/* スイカ割り島 — 小さく、静かに、洗練。動きはスッと滑らかに。 */
:root{
  --paper:#f7f6f1; --card:#fffdf8; --ink:#26312e; --sub:#857f73; --line:#e6e1d5;
  --sea:#5fb3a6; --sea-deep:#3f8f86; --accent:#2f6f68; --gold:#d9a941; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.75;font-size:15px}
.wrap{max-width:480px;margin:0 auto;padding:20px 18px 28px;min-height:100svh;display:flex;flex-direction:column}
.screen{display:none}
.screen.active{display:block;animation:fadein .45s cubic-bezier(.22,.8,.3,1)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none}.pop-item{animation:none!important}.float-score{animation:none!important}}

.brand{font-size:11px;letter-spacing:.32em;color:var(--sub);text-align:center;margin-top:22px}
.game-title{font-size:27px;font-weight:700;text-align:center;letter-spacing:.03em;margin-top:10px;line-height:1.35}
.kakudai{text-align:center;color:var(--sub);font-size:12px;letter-spacing:.2em}
.tagline{text-align:center;color:#55524b;margin-top:10px;font-size:14px}

.island-box{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 10px 6px}
.island-box svg{width:100%;height:auto;display:block}
.island-stage{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 4px 4px;font-size:13px}
.island-stage>span:first-child{font-weight:700}
.island-next{color:var(--sub);font-size:11.5px;text-align:right}

.title-stats{margin:16px auto 0;max-width:320px;width:100%;border-top:1px solid var(--line)}
.title-stats div,.result-stats div{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.title-stats dt,.result-stats dt{color:var(--sub)}
.title-stats dd,.result-stats dd{font-weight:700}

.settings-row{display:flex;gap:8px;justify-content:center;margin-top:18px}
.chip{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:7px 16px;border-radius:999px;cursor:pointer;transition:opacity .25s,transform .25s cubic-bezier(.22,.8,.3,1)}
.chip:active{transform:scale(.97)}
.chip.off{opacity:.5}
.settings-note{margin-top:8px!important}

.title-actions{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:22px}
.btn{appearance:none;border:1px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-size:15px;padding:11px 34px;border-radius:999px;cursor:pointer;transition:transform .25s cubic-bezier(.22,.8,.3,1),background .25s}
.btn.primary{background:var(--ink);color:#fff}
.btn:active{transform:scale(.97)}
.howto-link{text-align:center;margin-top:22px;font-size:13px}
.howto-link a,.foot a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.fineprint{text-align:center;color:var(--sub);font-size:12px;margin-top:12px}

/* ゲーム画面 */
.game-head{display:flex;justify-content:space-between;align-items:flex-end;margin-top:2px}
.hud{display:flex;align-items:baseline;gap:6px}
.hud.right{flex-direction:row-reverse}
.hud-label{font-size:11px;color:var(--sub);letter-spacing:.14em}
.hud-time{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hud-unit{font-size:12px;color:var(--sub)}
.hud-score{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.combo-row{min-height:26px;display:flex;gap:10px;align-items:baseline}
.combo-text{font-size:14px;font-weight:700;color:var(--sea-deep)}
.mult-text{font-size:12px;color:var(--gold);font-weight:700}
#field{position:relative;height:56svh;min-height:340px;border-radius:18px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:linear-gradient(180deg,#e8f5f2 0%,#cdeee8 42%,#9fd8cd 72%,#7fc8bc 100%);border:1px solid #d7e8e2}
#field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:#f3e5c3;opacity:.85;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}
.pop-item{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;animation:floaty 2.8s ease-in-out infinite alternate;transition:transform .16s cubic-bezier(.22,.8,.3,1),opacity .16s}
.pop-item svg{width:100%;height:100%;display:block;pointer-events:none}
.pop-item.rare{filter:drop-shadow(0 0 7px rgba(217,169,65,.55))}
.pop-item.popped{transform:scale(1.22);opacity:0}
@keyframes floaty{from{transform:translateY(5px)}to{transform:translateY(-9px)}}
.float-score{position:absolute;z-index:3;font-size:14px;font-weight:800;color:var(--ink);pointer-events:none;animation:rise .75s cubic-bezier(.22,.8,.3,1) forwards;text-shadow:0 1px 0 rgba(255,255,255,.8)}
@keyframes rise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-26px)}}
.game-note{text-align:center;color:var(--sub);font-size:12px;margin-top:10px}

/* 結果 */
.result-title{font-size:22px;text-align:center;margin-top:14px}
.best-note{text-align:center;color:var(--gold);font-weight:700;font-size:13px;min-height:1.4em;margin-top:4px}
.result-stats{margin:18px auto 0;max-width:320px;width:100%;border-top:1px solid var(--line)}
.unlock-box{margin:18px auto 0;max-width:340px;background:#fdf6df;border:1px solid #eadfae;border-radius:var(--radius);padding:12px 14px;font-size:13.5px}

.foot{margin-top:auto;padding-top:28px;display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);align-items:center}

/* ガイド・規約ページ */
.guide h1,.legal h1{font-size:21px;margin:16px 0 10px;line-height:1.5}
.guide h2,.legal h2{font-size:15.5px;margin:24px 0 8px}
.guide p,.guide li,.legal p,.legal li{font-size:14px;color:#3d3a34}
.guide ul,.guide ol,.legal ol,.legal ul{padding-left:1.35em}
.guide table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0}
.guide th,.guide td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left}
.guide th{color:var(--sub);font-weight:600;font-size:12px;letter-spacing:.06em}
.guide .back{display:inline-block;margin-top:26px;color:var(--accent)}
.small{font-size:12px;color:var(--sub)}

.mode-box{margin-top:16px;text-align:center}
.mode-label{font-size:11px;letter-spacing:.28em;color:var(--sub)}
.mode-list{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.mode-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mode-desc{font-size:12px;color:var(--sub);margin-top:8px}

.round-text{font-size:12.5px;color:var(--sub);font-weight:600}
.strike-btn{width:100%;margin-top:12px;padding:14px;font-size:16px}
.strike-btn.not-ready{opacity:.55;filter:saturate(.35)}
/* AzPoint：残高チップ（会員のみ・残高が取れた時だけ出す）／噴出の粒と +N タグ／結果ピル */
.hud.azpoint .hud-num{color:#b8860b;font-weight:800}
#hud-points[hidden]{display:none}
#r-points[hidden]{display:none}
.azp-dot{position:fixed;width:12px;height:12px;border-radius:50%;z-index:80;pointer-events:none;background:radial-gradient(circle at 35% 30%,#ffe9a3,#f5b81d 55%,#c07f10);box-shadow:0 1px 4px rgba(150,100,10,.45)}
.azp-plus{position:fixed;z-index:80;pointer-events:none;font:800 13px sans-serif;color:#b8860b;background:rgba(255,253,240,.94);border:1px solid rgba(184,134,11,.4);border-radius:999px;padding:2px 9px;animation:azpfloat 1.5s ease-out forwards}
@keyframes azpfloat{0%{opacity:0;transform:translateY(4px)}18%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.points-pill{display:block;width:fit-content;margin:12px auto 0;padding:5px 16px;border-radius:999px;background:linear-gradient(180deg,#ffedb5,#ffd873);color:#6d4c00;font-weight:800;font-size:14px;box-shadow:0 2px 8px rgba(176,124,10,.3)}
.points-pill.pop{animation:hudpop .38s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.azp-plus{animation:none}.points-pill.pop{animation:none}}
.wm-stage{padding-top:8px}
.wm-stage svg{width:100%;height:auto;display:block}
.wm-feedback{min-height:32px;text-align:center;font-size:19px;font-weight:800}
.wm-gauge{position:relative;height:26px;margin:6px 10px 0;background:rgba(255,255,255,.55);border:1px solid #cfe3dc;border-radius:999px;overflow:hidden}
.wm-zone{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%)}
.wm-zone-split{background:rgba(95,179,166,.30);width:32%}
.wm-zone-perfect{background:rgba(224,120,86,.45);width:12%}
.wm-marker{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--ink);border-radius:2px}
.wm-kind{text-align:center;font-size:12.5px;color:#55524b;margin-top:8px;min-height:1.5em}

/* ===== Webアプリ化（ゲーム本編ページのみ: body.game-app スコープ） =====
   文章ページ（guide/privacy/terms は body に class が無い）は通常スクロールのまま。
   ウィンドウ自体はスクロールさせず、スクロールは .wrap の内部だけに閉じる。 */
html:has(body.game-app){overscroll-behavior:none}
body.game-app{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.game-app .wrap{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
body.game-app #field{touch-action:none}
body.game-app button,body.game-app a{touch-action:manipulation}

/* 長押しポップアップ全廃（プレイ面：ゲーム画面・キャンバス・操作ボタン） */
body.game-app,body.game-app #scr-game,body.game-app #scr-game *,body.game-app .cv-wrap,body.game-app .touch-controls,body.game-app .touch-controls *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ===== 横スクロール冒険版（2026-10-28 作り替え） ===== */
/* ゲーム画面：外殻を完全固定し、キャンバスだけが残り高さを使う */
#scr-game.active{display:flex;flex-direction:column;height:100%}
.wrap:has(#scr-game.active) .foot{display:none}
/* プレイ中はインストール案内（.azi-strip）を畳み、主プレイ画面だけで画面を使い切る（タイトル等では従来どおり表示） */
.wrap:has(#scr-game.active) .azi-strip{display:none}
/* 右上のCENTERチップ（共通キット・fixed）が一時停止ボタン等の操作要素に被らないよう、本作側で上部に帯を空ける */
#scr-game{padding-top:18px}
.game-head{display:flex;align-items:center;gap:10px;margin-top:2px}
.hud{flex:none;white-space:nowrap}
.hud-label{white-space:nowrap}
.hud-stage{font-size:17px;font-weight:800;white-space:nowrap}
.hud-num{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.hud-num.pop{animation:hudpop .38s cubic-bezier(.22,.8,.3,1)}
@keyframes hudpop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
/* 結果画面：主ボタンの静かな呼吸（「もう一回」への静かな誘い） */
#btn-next-stage{animation:btnbreath 2.6s ease-in-out infinite}
@keyframes btnbreath{0%,100%{box-shadow:0 0 0 0 rgba(38,49,46,0)}50%{box-shadow:0 0 0 6px rgba(38,49,46,.10)}}
@media (prefers-reduced-motion:reduce){.hud-num.pop{animation:none}#btn-next-stage{animation:none}}
.hud.hearts{margin-left:auto}
.hud-hearts{font-size:17px;color:#e4573d;letter-spacing:.12em}
.pause-btn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:12px;font-weight:800;width:38px;height:38px;border-radius:50%;cursor:pointer;flex:none}
.cv-wrap{position:relative;flex:1;min-height:0;margin-top:10px;border-radius:18px;overflow:hidden;border:1px solid #d7e8e2;background:#aee6f5}
#cv{display:block;width:100%;height:100%;touch-action:none}
.toast{position:absolute;left:50%;top:12px;transform:translateX(-50%) translateY(-6px);background:rgba(38,49,46,.88);color:#fff;font-size:13px;font-weight:700;padding:6px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.22,.8,.3,1),transform .3s cubic-bezier(.22,.8,.3,1);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.stage-banner{display:none}
.pause-overlay{position:absolute;inset:0;background:rgba(247,246,241,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:5}
.pause-overlay[hidden]{display:none}
.pause-title{font-size:18px;font-weight:800;margin-bottom:6px}
.touch-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0 2px}
.tc-cluster{display:flex;gap:12px}
.tc-btn{appearance:none;width:62px;height:62px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,248,.9);color:var(--ink);font-size:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(38,49,46,.10);display:flex;align-items:center;justify-content:center}
.tc-btn:active{background:var(--ink);color:#fff;transform:scale(.95)}
.tc-btn.jump{width:70px;height:70px;background:var(--ink);color:#fff}
/* 操作ボタンの矢印は文字グリフではなくCSS図形で描く */
.tc-tri{display:block;width:0;height:0;border-style:solid;pointer-events:none}
.tc-tri.left{border-width:11px 17px 11px 0;border-color:transparent currentColor transparent transparent}
.tc-tri.right{border-width:11px 0 11px 17px;border-color:transparent transparent transparent currentColor}
.tc-tri.up{border-width:0 12px 17px 12px;border-color:transparent transparent currentColor transparent}
.game-note{text-align:center;color:var(--sub);font-size:11.5px;margin-top:8px}

/* ワールドマップ */
.map-title{font-size:22px;text-align:center;margin-top:8px}
.map-note{text-align:center;color:var(--sub);font-size:13px;margin-top:6px}
.map-note strong{color:var(--ink);font-size:15px}
.map-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.stage-card{appearance:none;display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;font:inherit;cursor:pointer;transition:transform .25s cubic-bezier(.22,.8,.3,1)}
.stage-card:active{transform:scale(.98)}
.stage-card.locked{opacity:.55;cursor:default}
.stage-card.cleared{border-color:#bcd8d2;background:#f2f9f6}
.stage-no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.stage-card.locked .stage-no{background:#b9b2a2}
.stage-main{flex:1;display:flex;flex-direction:column}
.stage-name{font-weight:800;font-size:16px}
.stage-sub{font-size:12px;color:var(--sub)}
.stage-state{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.stage-card.locked .stage-state{color:var(--sub)}
.result-stage{text-align:center;color:var(--sub);font-size:13px;margin-top:2px}

/* === ショップ共通部品（見出し・販売対象外の参照行） ===
   変数は本作の :root（--paper/--card/--ink/--sub/--line/--radius/--sea）に合わせる。
   フォーカスセレクタ（azs-）は末尾の本番化ブロックに置く。 */
/* --- CENTERチップ被り回避（本作側・共通キット無変更）: ショップ画面は上部の帯で回避 --- */
#scr-shop { padding-top: 34px; }
/* --- プログレス線: 本作の基調（海の色）に溶ける細さ・点滅なし --- */
#az-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; opacity: 0; transition: opacity .3s cubic-bezier(.22,.8,.3,1); }
#az-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(95,179,166,.45), #5fb3a6 70%); border-radius: 0 2px 2px 0; box-shadow: 0 1px 5px rgba(95,179,166,.35); }
/* --- ショップ導線（タイトル） --- */
.menu-row {
  appearance: none; width: 100%; max-width: 320px; margin: 14px auto 0; display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 13px 16px; cursor: pointer;
  transition: transform .16s cubic-bezier(.22,1,.36,1);
}
.menu-row:active { transform: scale(.985); }
.menu-row .mr-sub { font-size: 11.5px; color: var(--sub); font-weight: 400; }
/* --- ショップ画面（共通部品：見出し・販売対象外の参照行） --- */
.btn.small { padding: 9px 22px; font-size: 13.5px; }
.shop-head { display: flex; align-items: center; gap: 10px; }
.shop-title { font-size: 19px; letter-spacing: .05em; flex: 1; }
.shop-note { font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.65; margin-top: 14px; }
.shop-cat-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sub); margin: 18px 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 .s-main { flex: 1; min-width: 0; }
.shop-item .s-main b { font-size: 14.5px; }
.shop-item .s-effect { flex: 0 0 100%; color: var(--sub); font-size: 12px; line-height: 1.65; }
.shop-item .s-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-item .s-tax { 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: #fffdf8; border: 1px solid var(--line); border-radius: 10px; }
.shop-ic { width: 23px; height: 23px; display: block; }
.shop-badge-design { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #2f6f68; background: rgba(95,179,166,.16); border-radius: 99px; padding: 2px 7px; margin-left: 7px; vertical-align: 2px; }
.btn-disabled { font-size: 12px; font-weight: 700; color: var(--sub); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; white-space: nowrap; font: inherit; }
.catalog-btn:disabled { opacity: .85; cursor: default; }
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#scr-shop.active .catalog-row, #scr-shop.active .ref-item { animation: riseIn .34s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  #scr-shop.active .catalog-row, #scr-shop.active .ref-item { animation: none; }
}

/* === アイテムショップ本番化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); 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: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-guest { margin-top: 18px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 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: 18px; }
.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; }
@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: var(--accent); 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: var(--accent); 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: var(--card); 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; }
.azs-thumb .shop-ic { width: 30px; height: 30px; }
.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: var(--accent); border-radius: 99px; padding: 1px 5px; }
.azs-sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.azs-sheet-wrap[hidden] { display: none; }
.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(--card); 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: var(--accent); 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; }
.azs-sheet-actions .btn { width: 100%; }
.azs-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); background: var(--ink); color: #fff; font-size: 13.5px; padding: 11px 18px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.22,.8,.3,1), transform .35s cubic-bezier(.22,.8,.3,1); z-index: 70; max-width: 88vw; text-align: center; }
.azs-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .azs-focus .shop-ic, .azs-sheet, .azs-sheet-backdrop { animation: none; } }
/* プレイ画面の使い切りチケット */
.play-items { display: flex; gap: 8px; justify-content: center; margin-top: 9px; flex-wrap: wrap; }
.item-qty { font-weight: 700; color: var(--accent); }
/* テーマ：夕焼けの島（画面まわり。島の空・海は canvas 側で差し替える） */
body.theme-sunset { --paper: #f8eee1; --card: #fff9f1; --line: #ead8c2; --accent: #c47f2a; }
/* テーマ：星空の島（画面まわり） */
body.theme-star { --paper: #141a29; --card: #1e2739; --ink: #ece9e1; --sub: #98a2b5; --line: #333f55; --accent: #7fb2e0; }
body.theme-star .tagline, body.theme-star .azs-effect { color: #c3cadb; }
body.theme-star .shop-ic-wrap { background: #262f45; }
body.theme-star .azs-focus { border-color: #333f55; }
body.theme-star .island-box { background: #1e2739; }

.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 に収める ===
   構造のみの是正（文言・導線・世界観は不変）。島の絵は比率を保って縮小し、
   統計リストとボタン群を詰め、余白のリズムを圧縮する。 */
body.app .wrap { padding-top: 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#scr-title .brand { margin-top: 2px; line-height: 1.4; }
#scr-title .game-title { line-height: 1.25; margin-top: 6px; }
#scr-title .tagline { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
#scr-title .island-box { margin-top: 10px; padding: 8px 10px 4px; }
#scr-title .island-box svg { width: 72%; margin: 0 auto; }
#scr-title .island-stage { padding: 4px 4px 2px; }
#scr-title .title-stats { margin-top: 8px; }
#scr-title .title-stats div { padding: 4px 2px; font-size: 12px; line-height: 1.4; }
#scr-title .settings-row { margin-top: 10px; }
#scr-title .settings-row .chip { padding: 5px 14px; }
#scr-title .menu-row { margin-top: 8px; padding: 10px 16px; }
#scr-title .title-actions { margin-top: 10px; gap: 7px; }
#scr-title .title-actions .btn { padding: 8px 26px; line-height: 1.35; }
#scr-title .howto-link { margin-top: 8px; line-height: 1.5; }
#scr-title .fineprint { font-size: 11px; line-height: 1.5; margin-top: 8px; }
.foot { padding-top: 10px; line-height: 1.5; }
.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) === */
#scr-title .island-box svg { width: 64%; }
#scr-title .island-stage { padding-top: 2px; }
#scr-title .title-stats div { padding: 3px 2px; line-height: 1.35; }
#scr-title .settings-row .chip { padding: 4px 14px; }
#scr-title .menu-row { padding: 8px 16px; }
#scr-title .title-actions .btn { padding: 7px 26px; line-height: 1.3; }
#scr-title .tagline { line-height: 1.45; }
#scr-title .howto-link { margin-top: 6px; }
#scr-title .fineprint { margin-top: 6px; }