/* アズナンバー — small, quiet, refined. Off-white / warm neutrals only. */
:root{--bg:#faf7f2;--panel:#fffdf9;--line:#e6ded0;--ink:#2a251d;--sub:#8a8172;--board:#e9e1d2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;min-height:100dvh}
#app{max-width:440px;margin:0 auto;padding:22px 16px calc(28px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.head{text-align:center;margin:6px 0 14px}
.kicker{font-size:11px;letter-spacing:.42em;color:#a08c5f;font-weight:700}
.head h1{font-size:34px;margin:4px 0 2px;letter-spacing:.06em;font-weight:800}
.catch{color:var(--sub);font-size:13px;margin:0}
.scores{display:flex;gap:8px;margin:12px 0}
.score-box{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 6px;text-align:center}
.score-box span{display:block;font-size:10px;letter-spacing:.14em;color:var(--sub)}
.score-box b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.25}
.toolbar{display:flex;gap:7px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4}
.btn.primary{background:#2a251d;color:#faf7f2;border-color:#2a251d}
.btn.wide{width:100%}
.account-line{font-size:11.5px;color:var(--sub);margin:9px 2px 0}
#board-wrap{margin-top:14px}
#board{position:relative;width:100%;aspect-ratio:1;background:linear-gradient(145deg,#efe7d6,#e3d8c0);border:1px solid #d9cdb2;border-radius:18px;box-shadow:inset 0 2px 6px rgba(255,253,249,.7),inset 0 -10px 22px rgba(120,102,64,.14),0 10px 26px rgba(74,62,38,.10);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:2.6%;padding:2.6%}
.cell{background:linear-gradient(160deg,rgba(255,253,249,.62),rgba(244,238,224,.5));border-radius:11px;box-shadow:inset 0 1px 3px rgba(120,102,64,.16),inset 0 -1px 0 rgba(255,253,249,.55)}
#tiles{position:absolute;inset:0;padding:0}
.tile{position:absolute;left:2.6%;top:2.6%;width:21.75%;height:21.75%;display:flex;align-items:center;justify-content:center;border-radius:11px;font-weight:800;font-variant-numeric:tabular-nums;font-size:26px;color:#5c5342;transition:transform .16s cubic-bezier(.22,1,.36,1);will-change:transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(90,74,40,.14),0 2px 5px rgba(74,62,38,.14);text-shadow:0 1px 0 rgba(255,255,255,.22)}
.tile.new{animation:tin-new .24s cubic-bezier(.22,1,.36,1)}
.tile.pop{animation:tin-pop .24s cubic-bezier(.22,1,.36,1)}
@keyframes tin-new{from{opacity:0;scale:.72}to{opacity:1;scale:1}}
@keyframes tin-pop{0%{scale:1 1}32%{scale:1.13 .90}62%{scale:.965 1.045}100%{scale:1 1}}
.tile.v2{background:linear-gradient(160deg,#f8f3e6,#efe7d2)}.tile.v4{background:linear-gradient(160deg,#f0e5c9,#e6d6ae)}.tile.v8{background:linear-gradient(160deg,#e6d5a8,#d9c48c);color:#57492a}
.tile.v16{background:linear-gradient(160deg,#d9c28e,#c8ad72);color:#4f4020}.tile.v32{background:linear-gradient(160deg,#cbb078,#b9975c);color:#fff;text-shadow:0 1px 2px rgba(74,56,18,.28)}
.tile.v64{background:linear-gradient(160deg,#b99764,#a07d47);color:#fff;text-shadow:0 1px 2px rgba(74,56,18,.3)}.tile.v128{background:linear-gradient(160deg,#acaa88,#97946f);color:#fff;text-shadow:0 1px 2px rgba(50,50,30,.28)}
.tile.v256{background:linear-gradient(160deg,#9aa383,#828f6a);color:#fff;text-shadow:0 1px 2px rgba(40,52,30,.3)}.tile.v512{background:linear-gradient(160deg,#859173,#6f7f5e);color:#fff;text-shadow:0 1px 2px rgba(40,52,30,.32)}
.tile.v1024{background:linear-gradient(160deg,#6b7d6c,#546654);color:#fff;font-size:21px;text-shadow:0 1px 2px rgba(24,36,24,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 7px rgba(20,32,20,.28),0 3px 8px rgba(52,68,52,.28)}.tile.v2048{background:linear-gradient(160deg,#41483f,#2c322c);color:#f2d98c;font-size:21px;text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:inset 0 0 0 1.5px #c9a959,inset 0 1px 0 rgba(242,217,140,.35),0 4px 14px rgba(51,58,51,.34),0 0 18px rgba(201,169,89,.20)}
.tile.v4096,.tile.v8192,.tile.v16384,.tile.v32768,.tile.v65536,.tile.v131072,.tile.vsuper{background:linear-gradient(160deg,#323128,#22221c);color:#f2d98c;font-size:19px;text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(201,169,89,.55),inset 0 1px 0 rgba(242,217,140,.25),0 3px 9px rgba(30,30,22,.3)}
@media(max-width:360px){.tile{font-size:22px}.tile.v1024,.tile.v2048{font-size:18px}}
/* === Quality pass 2026-10-28: score feedback / milestone / sound === */
#score-box{position:relative}
.score-box.bump{animation:score-bump .28s cubic-bezier(.22,1,.36,1)}
@keyframes score-bump{0%{scale:1}40%{scale:1.045}100%{scale:1}}
.score-delta{position:absolute;right:10px;top:6px;font-size:13px;font-weight:800;color:#a07d2c;font-variant-numeric:tabular-nums;pointer-events:none;animation:score-rise .85s cubic-bezier(.22,1,.36,1) forwards}
@keyframes score-rise{from{opacity:0;translate:0 6px}25%{opacity:1}to{opacity:0;translate:0 -13px}}
.milestone{margin:10px 2px 0;padding:8px 13px;background:#2a251d;color:#f2d98c;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-align:center;animation:milestone-in .38s cubic-bezier(.22,1,.36,1)}
@keyframes milestone-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
.btn.off{opacity:.52}
.overlay-epithet{margin:8px 0 0;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:#a07d2c}
.foot-note{font-size:11px;line-height:1.7;margin:10px 6px 0;color:#a79b83}
.hint{font-size:12px;color:var(--sub);line-height:1.7;margin:12px 2px 0}
.overlay{position:absolute;inset:0;background:rgba(250,247,242,.82);display:flex;align-items:center;justify-content:center;padding:20px;z-index:5;backdrop-filter:blur(2px)}
[hidden]{display:none !important}
.overlay[hidden]{display:none}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);margin:2px 0 12px}
.chk input{width:16px;height:16px}
.sep-line{border:none;border-top:1px solid var(--line);margin:18px 0}
.overlay-card{text-align:center}
.overlay-title{font-size:25px;font-weight:800;letter-spacing:.05em}
.overlay-text{color:var(--sub);font-size:13.5px;line-height:1.8;margin:10px 0 16px}
.overlay-card .btn{margin:3px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:14px}
.panel h2{font-size:15px;margin:0 0 10px;letter-spacing:.08em}
.note{font-size:12.5px;color:var(--sub);line-height:1.8}
.err{color:#b0483a;font-size:13px}
.seg{display:flex;background:#f0eadd;border-radius:999px;padding:4px;margin-bottom:16px}
.seg-btn{flex:1;padding:8px;border-radius:999px;color:var(--sub);font-weight:600;font-size:13.5px}
.seg-btn.on{background:#fffdf9;color:var(--ink)}
.fld{display:block;margin-bottom:12px}.fld span{display:block;font-size:11px;color:var(--sub);margin-bottom:5px}
.fld input{width:100%;background:#fbf8f1;border:1px solid var(--line);border-radius:11px;font-size:16px;padding:11px 13px;color:var(--ink);outline:none}
.fld input:focus{border-color:#c9b98f}
.rank-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:7px;background:#fbf8f1}
.rank-row.me{border-color:#c9a959}
.rank-no{font-weight:800;width:28px;text-align:center}.rank-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-tile{color:var(--sub);font-size:12px}.rank-score{font-weight:800;font-variant-numeric:tabular-nums}
.foot{text-align:center;margin-top:22px;font-size:12.5px;color:var(--sub)}
.foot a{color:#7a6c4f}
.foot-brand{margin-top:10px;font-size:10.5px;letter-spacing:.28em;color:#b6ab97}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2a251d;color:#faf7f2;border-radius:999px;padding:10px 20px;font-size:13px;z-index:50;white-space:nowrap}
.toast[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.tile{transition:none}.tile.new,.tile.pop,.score-box.bump,.score-delta,.milestone{animation:none}}

/* === Appify 2026-10-28: play surface fixed to viewport (game page only, scoped by body.game) === */
html:has(> body.game){height:100%;overflow:hidden;overscroll-behavior:none}
body.game{position:fixed;inset:0;left:0;right:0;margin-left:auto;margin-right:auto;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.game #app{height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.game #board{touch-action:none}
body.game #tiles{touch-action:none}

/* === Quality pass 2 2026-10-28: BGM / particles / hitstop / texture / result line === */
body{background-image:radial-gradient(120% 60% at 50% -8%,rgba(255,253,249,.95),rgba(250,247,242,0) 60%),radial-gradient(90% 50% at 50% 108%,rgba(201,169,89,.10),rgba(250,247,242,0) 62%)}
.head h1{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.score-box{box-shadow:0 1px 2px rgba(74,62,38,.05),inset 0 1px 0 rgba(255,255,255,.75)}
#board{box-shadow:inset 0 2px 6px rgba(255,253,249,.7),inset 0 -10px 22px rgba(120,102,64,.14),inset 0 0 0 1px rgba(255,253,249,.35),0 14px 30px rgba(74,62,38,.13),0 2px 6px rgba(74,62,38,.08)}
.tile{letter-spacing:-.02em}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 46%);pointer-events:none}
#fx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.fx-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#c9a959;box-shadow:0 0 6px rgba(201,169,89,.55);transform:translate(-50%,-50%)}
.fx-dot.big{width:9px;height:9px;background:#e9cf87}
#board.hit #tiles{filter:brightness(1.045) saturate(1.03)}
.btn{box-shadow:0 1px 2px rgba(74,62,38,.05)}
.btn.primary{box-shadow:0 3px 9px rgba(42,37,29,.20)}
.overlay-card{background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:18px;padding:22px 20px 18px;box-shadow:0 14px 34px rgba(74,62,38,.16),inset 0 1px 0 rgba(255,255,255,.8);animation:overlay-in .38s cubic-bezier(.22,1,.36,1);max-width:320px}
@keyframes overlay-in{from{opacity:0;transform:translateY(7px) scale(.982)}to{opacity:1;transform:translateY(0) scale(1)}}
.overlay-line{margin:9px 0 0;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.03em}
@media (prefers-reduced-motion: reduce){.overlay-card{animation:none}.tile.pop{animation:none}}

/* === Realism pass 2026-10-29: material weight / board depth / merge sink (drawing only, palette & hues unchanged) === */
body{background-image:radial-gradient(120% 60% at 50% -8%,rgba(255,253,249,.97),rgba(250,247,242,0) 60%),radial-gradient(90% 50% at 50% 108%,rgba(201,169,89,.12),rgba(250,247,242,0) 62%),linear-gradient(180deg,#fbf8f1,#faf7f2 42%,#f6f1e6)}
.score-box{background:linear-gradient(165deg,#fffefa,#f8f2e3);box-shadow:0 2px 5px rgba(74,62,38,.07),0 1px 1px rgba(74,62,38,.04),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(120,102,64,.07)}
.panel{background:linear-gradient(170deg,#fffefa,#fbf7ec);box-shadow:0 3px 10px rgba(74,62,38,.06),inset 0 1px 0 rgba(255,255,255,.8)}
.btn{background:linear-gradient(180deg,#fffefa,#f9f4e8);box-shadow:0 1px 3px rgba(74,62,38,.07),inset 0 1px 0 rgba(255,255,255,.8)}
.btn.primary{background:linear-gradient(165deg,#37312a,#241f18);box-shadow:0 4px 11px rgba(42,37,29,.24),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 7px rgba(0,0,0,.22)}
#board{background:radial-gradient(115% 90% at 30% 12%,rgba(255,253,249,.5),rgba(255,253,249,0) 55%),linear-gradient(145deg,#f0e8d5,#e7dcc2 52%,#ddd0ae);border:1px solid #cfc09c;transition:box-shadow .18s cubic-bezier(.22,1,.36,1);box-shadow:inset 0 2px 4px rgba(255,253,249,.75),inset 0 -16px 30px rgba(120,102,64,.20),inset 12px 0 24px rgba(255,253,249,.14),inset -12px 0 24px rgba(120,102,64,.10),inset 0 0 0 1px rgba(255,253,249,.35),0 18px 36px rgba(74,62,38,.15),0 4px 10px rgba(74,62,38,.10)}
#board::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 105% at 50% 42%,rgba(0,0,0,0) 58%,rgba(101,84,46,.10) 100%);pointer-events:none;z-index:1}
#board::after{content:"";position:absolute;inset:7px;border-radius:12px;box-shadow:inset 0 1px 3px rgba(101,84,46,.20),inset 0 -1px 0 rgba(255,253,249,.4);pointer-events:none;z-index:1}
#board.hit{box-shadow:inset 0 2px 4px rgba(255,253,249,.75),inset 0 -22px 36px rgba(120,102,64,.30),inset 12px 0 24px rgba(255,253,249,.14),inset -12px 0 24px rgba(120,102,64,.12),inset 0 0 0 1px rgba(255,253,249,.35),0 12px 26px rgba(74,62,38,.13),0 3px 8px rgba(74,62,38,.09)}
.cell{background:linear-gradient(165deg,rgba(133,113,70,.17),rgba(244,238,224,.42) 58%,rgba(255,253,249,.34));box-shadow:inset 0 2px 5px rgba(101,84,46,.30),inset 0 -1px 0 rgba(255,253,249,.6),inset 1px 0 2px rgba(101,84,46,.10)}
.tile{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}
.tile::after{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 42%),linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 34%)}
.tile.v2{background:linear-gradient(165deg,#fdfaf1,#f3ecd9 55%,#e7dbbf);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -4px 6px rgba(120,100,55,.16),inset 1px 0 2px rgba(255,255,255,.3),inset -1px 0 2px rgba(120,100,55,.08),0 3px 6px rgba(74,62,38,.17),0 1px 2px rgba(74,62,38,.12)}
.tile.v4{background:linear-gradient(165deg,#f8efdb,#ecdcb4 55%,#dec794);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -4px 6px rgba(120,100,55,.18),inset 1px 0 2px rgba(255,255,255,.28),inset -1px 0 2px rgba(120,100,55,.09),0 3px 6px rgba(74,62,38,.18),0 1px 2px rgba(74,62,38,.12)}
.tile.v8{background:linear-gradient(165deg,#f1e0b2,#e2cc92 55%,#cfb26f);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -4px 7px rgba(110,88,40,.20),inset 1px 0 2px rgba(255,255,255,.25),0 3px 7px rgba(74,62,38,.19),0 1px 2px rgba(74,62,38,.13)}
.tile.v16{background:linear-gradient(165deg,#e3cb96,#d0b478 55%,#b99554);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -5px 7px rgba(100,78,32,.22),inset 1px 0 2px rgba(255,255,255,.22),0 4px 7px rgba(74,62,38,.20),0 1px 2px rgba(74,62,38,.13)}
.tile.v32{background:linear-gradient(165deg,#d6ba82,#c09f5f 55%,#a37c3e);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 8px rgba(84,62,20,.26),inset 1px 0 2px rgba(255,255,255,.2),0 4px 8px rgba(74,60,28,.23),0 1px 2px rgba(74,60,28,.14)}
.tile.v64{background:linear-gradient(165deg,#c7a66c,#ad8750 55%,#8f6c36);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(74,54,16,.28),inset 1px 0 2px rgba(255,255,255,.18),0 4px 8px rgba(74,60,28,.24),0 1px 2px rgba(74,60,28,.15)}
.tile.v128{background:linear-gradient(165deg,#b8b89e,#9d9c7c 55%,#7f7d58);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(52,52,28,.26),inset 1px 0 2px rgba(255,255,255,.18),0 4px 8px rgba(56,58,36,.24),0 1px 2px rgba(56,58,36,.15)}
.tile.v256{background:linear-gradient(165deg,#aab695,#8b9a72 55%,#6d7f52);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -5px 8px rgba(38,50,24,.28),inset 1px 0 2px rgba(255,255,255,.16),0 5px 9px rgba(46,60,32,.26),0 1px 2px rgba(46,60,32,.16)}
.tile.v512{background:linear-gradient(165deg,#97a584,#76875f 55%,#596d44);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -6px 9px rgba(30,42,20,.30),inset 1px 0 2px rgba(255,255,255,.15),0 5px 10px rgba(40,54,28,.28),0 1px 2px rgba(40,54,28,.17)}
.tile.v1024{background:linear-gradient(165deg,#7d8d78,#5c6f57 55%,#42543d);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -6px 10px rgba(18,30,18,.34),inset 1px 0 2px rgba(255,255,255,.13),0 6px 11px rgba(36,50,36,.30),0 1px 2px rgba(36,50,36,.18)}
.tile.v2048{background:linear-gradient(165deg,#525852,#333a33 55%,#1f241f);box-shadow:inset 0 0 0 1.5px #c9a959,inset 0 1px 0 rgba(242,217,140,.4),inset 0 -7px 12px rgba(0,0,0,.42),inset 1px 0 3px rgba(242,217,140,.12),0 7px 15px rgba(40,46,40,.36),0 0 20px rgba(201,169,89,.22)}
.tile.v4096,.tile.v8192,.tile.v16384,.tile.v32768,.tile.v65536,.tile.v131072,.tile.vsuper{background:linear-gradient(165deg,#403f38,#28271f 55%,#161511);box-shadow:inset 0 0 0 1px rgba(201,169,89,.6),inset 0 1px 0 rgba(242,217,140,.28),inset 0 -7px 12px rgba(0,0,0,.46),0 6px 13px rgba(24,24,18,.34)}
@keyframes tin-new{from{opacity:0;scale:.72;translate:0 3px}to{opacity:1;scale:1;translate:0 0}}
@keyframes tin-pop{0%{scale:1 1;translate:0 0}32%{scale:1.13 .90;translate:0 2.5px}62%{scale:.965 1.045;translate:0 -1px}100%{scale:1 1;translate:0 0}}
.fx-dust{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(233,207,135,.5),rgba(233,207,135,0) 68%);transform:translate(-50%,-50%);pointer-events:none}
.fx-ring{position:absolute;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(201,169,89,.55);transform:translate(-50%,-50%);pointer-events:none}
@media (prefers-reduced-motion: reduce){.tile.new,.tile.pop{animation:none}}

/* === Recheck 2026-10-29: 新条件一式（長押し全廃／チップ帯／再編で大きく／演出／カタログ） === */

/* ---- 長押しポップアップ全廃（プレイ面）: コールアウト・選択を止める。
        入力欄（input/textarea）の長押しペーストだけは対象外に残す。 ---- */
body.game #app, body.game #toast{
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none;
}
body.game input, body.game textarea{
  user-select:text; -webkit-user-select:text; -webkit-touch-callout:default;
}
#board, #board *, .tile, .shop-item, .rank-row{
  -webkit-touch-callout:none !important;
  user-select:none !important; -webkit-user-select:none !important;
}

/* ---- CENTERチップ被りの本作側回避（共通キットは無変更）＋収納の再編 ----
   チップ（右上・高さ約28px＋余白）は画面最上部の38px帯に収め、その下から
   プレイ画面を始める。あわせてヘッダー/スコア/ボタンを締め、盤面を左右
   フルブリード化して 358px → 390px に拡大する（縮小ではなく再編）。
   主プレイ画面（ヘッダー→盤面→ヒント）は 390×844 内に収まる。 */
body.game #app{padding:calc(env(safe-area-inset-top, 0px) + 44px) 16px calc(28px + env(safe-area-inset-bottom))}
.head{margin:2px 0 8px}
.head h1{font-size:29px;margin:3px 0 1px}
.catch{font-size:12px}
.scores{margin:8px 0}
.score-box{padding:7px 6px}
.score-box b{font-size:22px}
.toolbar{gap:6px}
.toolbar .btn{padding:7px 11px;font-size:12.5px}
.account-line{margin:6px 2px 0}
#board-wrap{margin:12px -16px 0}
#board{border-radius:16px}
.hint{margin:10px 2px 0;font-size:11.5px;line-height:1.65}

/* ---- ネイティブアプリ級の登場演出（表現のみ・静かなイージング） ---- */
@keyframes app-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.head{animation:app-in .5s cubic-bezier(.22,1,.36,1) both}
.scores{animation:app-in .5s cubic-bezier(.22,1,.36,1) .05s both}
.toolbar,.account-line{animation:app-in .5s cubic-bezier(.22,1,.36,1) .1s both}
#board-wrap{animation:app-in .55s cubic-bezier(.22,1,.36,1) .17s both}
.hint{animation:app-in .5s cubic-bezier(.22,1,.36,1) .24s both}
.panel{animation:app-in .38s cubic-bezier(.22,1,.36,1) both}
.toast{animation:app-in .3s cubic-bezier(.22,1,.36,1) both}
.shop-item,.rank-row{transition:transform .16s cubic-bezier(.22,1,.36,1)}
.shop-item:active,.rank-row:active{transform:scale(.985)}

/* ---- 合体の閃光（派手さ×洗練・光の質のみ） ---- */
.fx-flash{position:absolute;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,rgba(242,217,140,.85),rgba(233,207,135,.28) 55%,rgba(233,207,135,0) 72%);transform:translate(-50%,-50%);pointer-events:none}
.fx-flash.big{width:76px;height:76px}

/* ---- ショップカタログ（アズコイン販売中） ---- */
.shop-lead{margin-bottom:4px}
.shop-cat-note{font-size:12.5px;color:var(--sub);line-height:1.8;background:#fbf8f1;border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.shop-cat-head{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--sub);margin:16px 2px 2px}
.shop-item{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.shop-item small{display:block;color:var(--sub);font-size:12px;font-weight:400}
.catalog-row .s-main{flex:1;min-width:0}
.catalog-row .s-main b{font-size:13.5px}
.catalog-row .s-effect{flex:0 0 100%;color:var(--sub);font-size:12px;line-height:1.65}
.s-price{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-tax{display:inline !important;font-size:10px;color:var(--sub);font-weight:700;margin-left:3px}
.shop-ic-wrap{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;background:#fffdf9;border:1px solid var(--line);border-radius:10px}
.shop-ic{width:23px;height:23px;display:block}
.tile-swatch{width:21px;height:21px;border-radius:6px;border:1px solid rgba(90,74,40,.25);display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.tile-swatch.s-touban{background:linear-gradient(165deg,#fdfaf1,#e7dbbf)}
.tile-swatch.s-kokuyou{background:linear-gradient(165deg,#403f38,#161511)}
.tile-swatch.s-azrion{background:linear-gradient(165deg,#525852,#1f241f);border-color:#c9a959;box-shadow:inset 0 0 0 1.5px rgba(201,169,89,.65)}
.shop-badge-design{display:inline-block;font-size:10px;font-weight:800;color:#a07d2c;border:1px solid rgba(201,169,89,.55);border-radius:999px;padding:1px 7px;margin-left:7px;vertical-align:2px;background:rgba(201,169,89,.10);white-space:nowrap}
.catalog-btn{font:inherit;padding:7px 11px;font-size:12.5px}
.catalog-btn:disabled{opacity:.55;cursor:default}
.catalog-row .s-main b{font-size:13px}
.catalog-row .s-price{font-size:13.5px}
@media (prefers-reduced-motion: reduce){.head,.scores,.toolbar,.account-line,#board-wrap,.hint,.panel,.toast{animation:none}}

/* === アイテムショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px;background:#fbf8f1;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.azs-balance-label{font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:700}
.azs-balance-num{font-size:20px;font-variant-numeric:tabular-nums}
.azs-balance-link{margin-left:auto;font-size:12px;color:#a07d2c;text-decoration:none;border-bottom:1px solid var(--line)}
.azs-guest{margin-top:14px;text-align:center;background:#fbf8f1;border:1px solid var(--line);border-radius:12px;padding:20px 16px}
.azs-guest p{font-size:13.5px;line-height:1.7;margin-bottom:14px}
.azs-stage{display:flex;align-items:center;gap:4px;margin-top:16px}
.azs-arrow{appearance:none;border:none;background:none;font-size:30px;line-height:1;color:var(--sub);cursor:pointer;padding:10px 6px;flex:none;transition:transform .25s cubic-bezier(.22,.8,.3,1),color .25s;-webkit-tap-highlight-color:transparent}
.azs-arrow:active{transform:scale(.9);color:var(--ink)}
.azs-focus{flex:1;height:218px;border-radius:20px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .45s cubic-bezier(.22,.8,.3,1)}
.azs-focus .shop-ic{width:132px;height:132px;animation:azsIn .5s cubic-bezier(.22,.8,.3,1) both}
.azs-tile-preview{width:132px;height:132px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;animation:azsIn .5s cubic-bezier(.22,.8,.3,1) both}
.tp-touban{background:linear-gradient(165deg,#e8c39a,#c98d5f 55%,#b0763f);color:#fff8ec;text-shadow:0 1px 2px rgba(90,50,20,.35);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 10px rgba(120,70,30,.25),0 10px 22px rgba(120,80,40,.25)}
.tp-kokuyou{background:linear-gradient(165deg,#3d434a,#22262c 55%,#14171b);color:#e9e4d8;text-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -6px 12px rgba(0,0,0,.5),0 10px 22px rgba(20,22,26,.35)}
.tp-azrion{background:linear-gradient(165deg,#41483f,#2c322c);color:#f2d98c;text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:inset 0 0 0 2.5px #c9a959,inset 0 1px 0 rgba(242,217,140,.35),0 10px 24px rgba(51,58,51,.35)}
@keyframes azsIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.azs-info{text-align:center;margin-top:16px}
.azs-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.azs-name{font-size:22px;letter-spacing:.03em;margin-top:4px}
.azs-effect{font-size:13px;color:#55524b;line-height:1.7;margin-top:8px;min-height:2.6em}
.azs-price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px}
.azs-price-unit{font-size:13px;font-weight:700;color:var(--sub)}
.azs-owned{font-size:12.5px;color:#a07d2c;font-weight:700;min-height:1.4em;margin-top:4px}
.azs-action{width:100%;margin-top:10px;padding:14px 26px;font-size:16px}
.azs-action:disabled{opacity:.45;cursor:default}
.azs-note{font-size:11.5px;color:var(--sub);margin-top:10px}
.azs-note a{color:#a07d2c;text-decoration:none;border-bottom:1px solid var(--line)}
.azs-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
.azs-dot{width:6px;height:6px;border-radius:99px;background:var(--line);transition:background .3s,width .3s cubic-bezier(.22,.8,.3,1)}
.azs-dot.on{background:var(--ink);width:18px}
.azs-strip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.azs-thumb{position:relative;appearance:none;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:#fbf8f1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.22,.8,.3,1),border-color .25s;-webkit-tap-highlight-color:transparent;padding:0}
.azs-thumb .shop-ic{width:30px;height:30px}
.azs-thumb .tile-swatch{width:30px;height:30px;border-radius:8px}
.azs-thumb.on{border-color:var(--ink);transform:translateY(-2px)}
.azs-thumb-owned{position:absolute;right:3px;bottom:3px;font-size:9px;font-weight:700;color:#fff;background:#a07d2c;border-radius:99px;padding:1px 5px}
.azs-sheet-wrap{position:fixed;inset:0;z-index:80}
.azs-sheet-backdrop{position:absolute;inset:0;background:rgba(28,26,22,.42);animation:azsFade .25s ease both}
.azs-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:20px 20px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;animation:azsSheet .38s cubic-bezier(.22,.8,.3,1) both}
@keyframes azsFade{from{opacity:0}to{opacity:1}}
@keyframes azsSheet{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.azs-sheet-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.azs-sheet-name{font-size:19px;margin-top:3px}
.azs-sheet-rows{margin-top:14px;border-top:1px solid var(--line)}
.azs-sheet-rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.azs-sheet-rows b{font-size:16px;font-variant-numeric:tabular-nums}
.azs-sheet-note{font-size:11.5px;color:var(--sub);margin-top:12px}
.azs-sheet-note a{color:#a07d2c;text-decoration:none;border-bottom:1px solid var(--line)}
.azs-sheet-error{font-size:13px;color:#b03a30;margin-top:10px}
.azs-sheet-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.item-qty{font-weight:700;color:#a07d2c}
/* ヒント方向の光（盤面の縁がそっと光る） */
#board.hint-l{box-shadow:inset 14px 0 22px -8px rgba(201,169,89,.75),inset 0 2px 6px rgba(255,253,249,.7),0 10px 26px rgba(74,62,38,.10)}
#board.hint-r{box-shadow:inset -14px 0 22px -8px rgba(201,169,89,.75),inset 0 2px 6px rgba(255,253,249,.7),0 10px 26px rgba(74,62,38,.10)}
#board.hint-u{box-shadow:inset 0 14px 22px -8px rgba(201,169,89,.75),inset 0 2px 6px rgba(255,253,249,.7),0 10px 26px rgba(74,62,38,.10)}
#board.hint-d{box-shadow:inset 0 -14px 22px -8px rgba(201,169,89,.75),inset 0 2px 6px rgba(255,253,249,.7),0 10px 26px rgba(74,62,38,.10)}
/* スキン：陶板（暖かい焼き物の質感） */
body.skin-touban .tile.v2{background:linear-gradient(165deg,#f9ecdc,#f0dcc2 55%,#e3c69c)}
body.skin-touban .tile.v4{background:linear-gradient(165deg,#f4ddba,#eac894 55%,#dbb276)}
body.skin-touban .tile.v8{background:linear-gradient(165deg,#eecfa1,#e0b878 55%,#cf9c58);color:#5a3d1e}
body.skin-touban .tile.v16{background:linear-gradient(165deg,#e5bd83,#d29f56 55%,#bc843e);color:#fff;text-shadow:0 1px 2px rgba(90,50,20,.3)}
body.skin-touban .tile.v32{background:linear-gradient(165deg,#d9a665,#c08b45 55%,#a87434);color:#fff;text-shadow:0 1px 2px rgba(90,50,20,.32)}
body.skin-touban .tile.v64{background:linear-gradient(165deg,#c98d5f,#b0763f 55%,#96602e);color:#fff;text-shadow:0 1px 2px rgba(80,44,16,.35)}
body.skin-touban .tile.v128{background:linear-gradient(165deg,#b98a68,#a1714e 55%,#875c3a);color:#fff}
body.skin-touban .tile.v256{background:linear-gradient(165deg,#a87f5c,#8f6a48 55%,#77552f);color:#fff}
body.skin-touban .tile.v512{background:linear-gradient(165deg,#96714e,#7d5c3a 55%,#684a2a);color:#fff}
body.skin-touban .tile.v1024{background:linear-gradient(165deg,#7d5a36,#634628 55%,#4e371d);color:#f6e3c2}
body.skin-touban .tile.v2048{background:linear-gradient(165deg,#5f4125,#46300f 55%,#33230a);color:#f2d98c;box-shadow:inset 0 0 0 1.5px #c9a959,0 4px 14px rgba(90,60,25,.35)}
/* スキン：黒曜（深い艶の黒） */
body.skin-kokuyou .tile{background:linear-gradient(165deg,#3d434a,#262a30 55%,#171a1e);color:#cfd4da;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -4px 7px rgba(0,0,0,.5),0 3px 6px rgba(10,12,14,.35)}
body.skin-kokuyou .tile.v32,body.skin-kokuyou .tile.v64{color:#f0e6cf}
body.skin-kokuyou .tile.v128,body.skin-kokuyou .tile.v256{color:#d9c58f}
body.skin-kokuyou .tile.v512,body.skin-kokuyou .tile.v1024{color:#e8cf87}
body.skin-kokuyou .tile.v2048{background:linear-gradient(165deg,#14171b,#0c0e11);color:#f2d98c;box-shadow:inset 0 0 0 1.5px #c9a959,inset 0 1px 0 rgba(242,217,140,.3),0 4px 14px rgba(0,0,0,.5)}
body.skin-kokuyou .tile.v4096,body.skin-kokuyou .tile.v8192,body.skin-kokuyou .tile.v16384,body.skin-kokuyou .tile.v32768,body.skin-kokuyou .tile.v65536,body.skin-kokuyou .tile.v131072,body.skin-kokuyou .tile.vsuper{color:#f2d98c}
/* スキン：AZRIONプレミアム（金の縁＋小さな紋） */
body.skin-azrion .tile{box-shadow:inset 0 0 0 2px rgba(201,169,89,.85),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(90,74,40,.16),0 2px 5px rgba(74,62,38,.16)}
body.skin-azrion .tile::before{content:"A";position:absolute;top:2px;right:6px;font-size:9px;font-weight:800;color:rgba(160,125,44,.85);letter-spacing:.05em;z-index:2}
/* テーマ：朝のトレイ */
body.theme-asa{--bg:#fdf9ef;--panel:#fffdf6;--line:#eee2c8;--board:#f3ead2}
body.theme-asa #board{background:linear-gradient(145deg,#faf3df,#f0e4c6)}
/* テーマ：夜の石盤 */
body.theme-yoru{--bg:#20241f;--panel:#262b26;--line:#3a4038;--ink:#ece7d9;--sub:#9aa08f;--board:#2c322c}
body.theme-yoru #board{background:linear-gradient(145deg,#31372f,#232823);border-color:#454c42;box-shadow:inset 0 2px 6px rgba(255,255,255,.06),inset 0 -10px 22px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35)}
body.theme-yoru .score-box,body.theme-yoru .rank-row,body.theme-yoru .azs-balance,body.theme-yoru .azs-guest,body.theme-yoru .azs-thumb{background:#2a2f2a}
body.theme-yoru .fld input{background:#2a2f2a;color:var(--ink)}
body.theme-yoru .seg-btn.on{background:#31372f;color:var(--ink)}
body.theme-yoru .azs-effect{color:#c9c4b2}

.azs-banner{display:block;margin:30px 0 2px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;overflow:hidden;line-height:0;aspect-ratio:4/1;background:#16222e;transition:transform .12s ease}
.azs-banner img{display:block;width:100%;height:100%;object-fit:cover}
.azs-banner:active{transform:scale(.99)}

/* === ノースクロール是正 (2026-11-01 FIX1): 主画面を 375×812 に収める ===
   ショップは在庫表示をやめツールバーのボタンから開くパネルにした
   （アカウント/順位と同じ作法・中身と導線は不変）。あわせて見出し・
   スコア・バナーの背丈を詰める。 */
#app { padding-top: 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.head { margin: 0 0 8px; }
.head h1 { font-size: 27px; margin: 2px 0 1px; line-height: 1.25; }
.catch { font-size: 12.5px; line-height: 1.45; }
.scores { margin: 8px 0; }
.score-box { padding: 6px 6px; }
.score-box b { font-size: 20px; line-height: 1.2; }
.toolbar .btn { padding: 7px 11px; font-size: 12.5px; }
.account-line { margin: 7px 2px 0; line-height: 1.45; }
#board-wrap { margin-top: 10px; }
.azs-banner { margin-top: 10px; height: 38px; aspect-ratio: auto; }
.azs-banner img { object-position: center 42%; }
.hint { margin-top: 8px; line-height: 1.5; }
.foot { margin-top: 10px; line-height: 1.5; }
.foot-note { line-height: 1.55; margin-top: 6px; }
.foot-brand { margin-top: 6px; }
.azi-strip { padding-top: 10px !important; padding-bottom: 10px !important; }
.azi-strip-title { line-height: 1.35 !important; }
.azi-strip-sub { line-height: 1.4 !important; }

/* === ノースクロール是正 第2段 (2026-11-01 FIX1) ===
   body.game の #app 上パディング44px（チップ回避の余白）が背丈を食って
   いたため詰め、盤面は全幅ベタから少しだけ内側に収める。 */
body.game #app { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
.head h1 { font-size: 25px; }
.kicker { font-size: 10.5px; line-height: 1.35; }
.scores { margin: 6px 0; }
.score-box { padding: 4px 6px; }
.score-box b { font-size: 19px; }
.toolbar { gap: 6px; }
.toolbar .btn { padding: 5px 9px; font-size: 12px; }
.account-line { margin-top: 5px; font-size: 11.5px; }
#board-wrap { margin: 8px 0 0; max-width: 327px; margin-inline: auto; width: 100%; }
.azs-banner { margin-top: 8px; }
.hint { font-size: 11px; line-height: 1.45; margin-top: 6px; }
.foot { font-size: 12px; }
.foot-note { font-size: 10.5px; line-height: 1.5; }
.azi-strip .azi-btn { padding: 8px 16px !important; }

/* === ノースクロール是正 第3段 (2026-11-01 FIX1) === */
body.game #app { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.head h1 { line-height: 1.2; }
.catch { line-height: 1.4; }
.score-box span { font-size: 9.5px; line-height: 1.3; }
.score-box b { line-height: 1.15; }
.toolbar .btn { line-height: 1.25; }
.account-line { font-size: 11px; line-height: 1.4; }
#board-wrap { max-width: 308px; }
.azs-banner { margin-top: 6px; }
.hint { font-size: 10.5px; line-height: 1.4; }
.foot { margin-top: 8px; }
.foot-note { line-height: 1.45; margin-top: 4px; }
.foot-brand { margin-top: 4px; }

/* === BUG-SWEEP 2026-11-02: ホーム追加カード(.azip-card, z-index 900)の被り修正 ===
   実測で覆われていたもの: アカウントパネルの「パスワードをお忘れですか」、ショップの購入ボタン(#azs-action 定位置)。
   購入シート(.azs-sheet-wrap, z80)表示中もカードが前面に出てシートのボタンを覆い得る。
   対処: アカウント/ショップパネル表示中と購入シート表示中はカードを出さない(カードは本編面でのみ出す)。
   帯(.azi-strip)とカードの二重表示では帯のボタンがカードに覆われるため、カード表示中は帯を畳む。 */
body:has(#panel-account:not([hidden])) .azip-card,
body:has(#panel-shop:not([hidden])) .azip-card,
body:has(#azs-sheet-wrap:not([hidden])) .azip-card { display: none !important; }
body:has(.azip-card) .azi-strip { display: none !important; }
/* 同・本編面(375x667): カード表示中だけ #app の下余白を足し、フッターリンク類を
   カードの上までスクロールできるようにする(カードを閉じれば余白も消える) */
body:has(.azip-card.open) #app { padding-bottom: 160px; }