/* アズビジネス RPG — 小さく、静かに、洗練。紙色＋深い紺＋金（お金と上場の色）。
   ゲーム画面はアプリらしく固定（スクロール／バウンスなし）。 */
:root {
  --paper: #f6f4ee;
  --card: #fffdf8;
  --ink: #101c30;
  --navy: #26436e;
  --sub: #8a857b;
  --line: #e3ddcf;
  --gold: #c19a2e;
  --good: #2e7d4f;
  --bad: #c0452f;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 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.6;
}
body.game {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none;
}
body.game .wrap {
  height: 100svh; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
/* 長押しポップアップ全廃（アプリ全体の操作面）
   対象は画面内だけにしない：CENTERキットのチップ／メニュー／モーダル、購入シート
   （#azs-sheet-wrap）、イントロ、追加カードなど、JSが body 直下に注入する要素も
   含めてアプリ文書の全要素に効かせる（2026-11-01 実機でプレイ面の長押し選択が
   すり抜けたための拡大）。ガイド・規約ページは body.game でないため対象外。 */
body.game, body.game * {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* 本当に文字入力する欄だけは、選択とコールアウトを戻す（CENTERキットの入力欄など） */
body.game input, body.game textarea, body.game [contenteditable="true"] {
  -webkit-touch-callout: default; -webkit-user-select: text; user-select: text;
}
#cv { touch-action: none; }
.muted { color: var(--sub); font-size: 12px; line-height: 1.55; }
.sheet .muted { margin-top: 4px; }
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 18px 28px; min-height: 100svh; display: flex; flex-direction: column; }
.screen { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; animation: fadein .45s cubic-bezier(.22,.8,.3,1); }
#screen-play { overflow: hidden; padding-top: 38px; } /* 右上のCENTERチップ（共通キット）と音ボタンが被らないよう、本作側で帯を空ける */
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.brand { font-size: 11px; letter-spacing: .32em; color: var(--sub); text-align: center; margin-top: 14px; }
.game-title { font-size: 32px; font-weight: 800; text-align: center; letter-spacing: .06em; }
.game-title.small { font-size: 26px; }
.tagline { text-align: center; color: #55524b; margin-top: 10px; font-size: 13.5px; }
.note { font-size: 12.5px; color: var(--sub); text-align: center; min-height: 1em; margin-top: 12px; }
.fineprint { text-align: center; color: var(--sub); font-size: 11.5px; margin-top: 12px; }
.howto-link { text-align: center; margin-top: 16px; font-size: 13px; }
.howto-link a, .foot a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.title-art { display: flex; justify-content: center; padding: 22px 0 2px; }
.title-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 20px; }
.howto-box { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; font-size: 13px; color: #3c392f; }
.howto-box p + p { margin-top: 6px; }
.foot { margin-top: auto; padding-top: 20px; text-align: center; font-size: 11.5px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; align-items: center; }
.foot button { background: none; border: none; font: inherit; color: var(--navy); cursor: pointer; padding: 0; border-bottom: 1px solid var(--line); }

.btn {
  appearance: none; font: inherit; font-size: 15px; padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; }
.btn.big { font-size: 16.5px; padding: 13px 30px; }
.btn.small { font-size: 13px; padding: 7px 14px; }
.btn.sub { width: 100%; margin-top: 8px; }
.btn.ghost { border-color: var(--line); color: var(--sub); background: transparent; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; margin-top: 8px; }

.p-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.p-date { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-ym { font-weight: 800; font-size: 15px; }
.chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub); background: var(--card); }
.chip.gold { color: #7a5f14; border-color: #e4d194; background: #faf3da; font-weight: 700; }
.chip.good { color: var(--good); border-color: #bcd8c6; }
.chip.bad { color: var(--bad); border-color: #e6c0b6; }
.icon-btn { appearance: none; border: 1px solid var(--line); background: var(--card); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; color: var(--ink); cursor: pointer; flex: none; }
.icon-btn.muted { color: var(--sub); }
.hero-num { text-align: center; padding: 6px 0 2px; display: flex; flex-direction: column; }
.hero-label { font-size: 10.5px; letter-spacing: .28em; color: var(--sub); }
.hero-value { font-size: 34px; font-weight: 800; letter-spacing: .01em; line-height: 1.2; font-variant-numeric: tabular-nums; display: inline-block; }
.hero-value.bump { animation: valbump .65s cubic-bezier(.22,.8,.3,1); color: var(--gold); }
@keyframes valbump { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-value.bump { animation: none; } }
.hero-goal { font-size: 12px; color: var(--navy); }
.hero-goal.goal-ready { font-weight: 700; color: #7a5b00; background: #fdf0c0; border: 1px solid #e3c766; border-radius: 999px; padding: 2px 10px; }
.stat-row { display: flex; gap: 8px; margin-top: 8px; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; }
.stat-label { font-size: 10px; color: var(--sub); }
.stat-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.neg { color: var(--bad); }
.stat-value.pos { color: var(--good); }
.play-hint { text-align: center; font-size: 11.5px; color: var(--sub); margin-top: 6px; }

/* --- RPGステージ --- */
.stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.stage-box {
  position: relative;
  width: min(100%, 54svh);
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  background: #79a85b;
  box-shadow: 0 10px 30px rgba(16,28,48,.20), inset 0 0 0 1px rgba(255,255,255,.22);
}
.stage-box canvas { display: block; width: 100%; height: 100%; }
#area-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(16,28,48,.82); color: #fff; border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 10px; padding: 6px 18px; text-align: center; pointer-events: none;
  animation: bannerin .5s cubic-bezier(.22,.8,.3,1); z-index: 5;
}
#area-banner-name { display: block; font-size: 16px; font-weight: 800; letter-spacing: .08em; }
#area-banner-sub { display: block; font-size: 10.5px; opacity: .8; }
@keyframes bannerin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#toast {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(16,28,48,.88); color: #fff; border-radius: 999px; padding: 6px 16px;
  font-size: 12.5px; font-weight: 700; pointer-events: none; z-index: 6; white-space: nowrap;
}

/* 十字キー・Aボタン */
#touch-ui { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 10px; pointer-events: none; z-index: 4; }
#dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); gap: 2px; pointer-events: auto; }
#dpad .dp {
  appearance: none; border: 1.5px solid rgba(255,255,255,.75); background: rgba(16,28,48,.55); color: #fff;
  font-size: 14px; border-radius: 10px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.dp .tri { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,.92); pointer-events: none; }
.dp .tri.down { transform: rotate(180deg); }
.dp .tri.left { transform: rotate(-90deg); }
.dp .tri.right { transform: rotate(90deg); }
#dpad .dp.on { background: rgba(193,154,46,.75); }
#dpad .dp-mid { background: rgba(16,28,48,.35); border-radius: 10px; }
#abtns { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: auto; }
.abtn {
  appearance: none; border: 1.5px solid rgba(255,255,255,.8); color: #fff; cursor: pointer;
  font: inherit; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none;
}
.abtn.main { width: 62px; height: 62px; border-radius: 50%; background: rgba(193,154,46,.8); font-size: 14px; }
.abtn.sub { padding: 8px 18px; border-radius: 999px; background: rgba(16,28,48,.6); font-size: 13px; }
.abtn:active { transform: scale(.94); }

/* 会話ウィンドウ */
#dlg {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 8;
  background: rgba(13,22,40,.94); color: #f4f1e8;
  border: 2.5px solid #fff; outline: 2px solid rgba(13,22,40,.9); outline-offset: 1px;
  border-radius: 10px; padding: 13px 15px 15px; min-height: 92px;
  font-size: 14.5px; line-height: 1.65; cursor: pointer;
}
#dlg-name {
  position: absolute; top: -13px; left: 12px;
  background: rgba(13,22,40,.97); border: 2px solid #fff; border-radius: 7px;
  padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1.9;
}
#dlg-next { position: absolute; right: 14px; bottom: 8px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e8cf7a; animation: dlgbob 0.9s ease-in-out infinite; }
@keyframes dlgbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { #dlg-next { animation: none; } }
#dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dlg-choice {
  appearance: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 8px; padding: 8px 12px;
}
.dlg-choice small { display: block; font-size: 11.5px; opacity: .75; }
.dlg-choice:active { background: rgba(193,154,46,.5); }
.dlg-choice:disabled { opacity: .45; cursor: default; }

/* --- シート（決算・施設・経営） --- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(16,28,48,.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40;
  animation: fadein .3s ease;
}
.sheet {
  background: var(--paper); width: 100%; max-width: 480px; max-height: 86%;
  overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  animation: sheetup .45s cubic-bezier(.22,.8,.3,1);
}
@keyframes sheetup { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-kicker { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.sheet-kicker.alert { color: var(--bad); font-weight: 700; }
.sheet-title { font-size: 19px; font-weight: 800; margin-top: 4px; }
.sheet-text { font-size: 13.5px; color: #3c392f; margin-top: 6px; }
.sheet .btn.big { width: 100%; margin-top: 14px; }
.rep-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; font-variant-numeric: tabular-nums; gap: 10px; }
.rep-line span:last-child { text-align: right; }
.rep-line.bold { font-weight: 700; }
.rep-line .neg, .neg { color: var(--bad); }
.rep-line .pos, .pos { color: var(--good); }
.rep-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid var(--ink); margin-top: 8px; padding-top: 8px; font-size: 14px; }
.rep-total strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.event-card { background: #fbf6e3; border: 1px solid #e4d194; border-radius: 12px; padding: 9px 12px; margin-top: 10px; display: flex; flex-direction: column; }
.event-card.rival { background: #edf1f7; border-color: #b7c6da; }
.event-title { font-weight: 700; font-size: 13.5px; }
.event-text { font-size: 12.5px; color: #3c392f; }
.alert-text { color: var(--bad); font-weight: 700; font-size: 13.5px; margin-top: 10px; }

.zone { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px; }
.zone h4 { font-size: 13px; letter-spacing: .1em; color: var(--navy); margin: 10px 0 4px; }
.zone h4:first-child { margin-top: 0; }
.btn.danger { border-color: #e2bab0; color: var(--bad); }
.btn-col { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.btn-col .btn { width: 100%; }
.step-btn:disabled { opacity: .38; cursor: default; }
.zone-plain { background: transparent; border: none; text-align: center; }
.zone-title { font-size: 13px; letter-spacing: .12em; color: var(--navy); margin-bottom: 6px; }
.zone-note { font-size: 12px; color: var(--sub); margin-top: 6px; }
.opt-card {
  appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  transition: transform .12s ease;
}
.opt-card:active { transform: scale(.98); }
.opt-card.selected { border-color: var(--gold); background: #fbf6e3; }
.opt-card:disabled { opacity: .45; cursor: default; }
.opt-main { display: flex; flex-direction: column; }
.opt-name { font-size: 14.5px; font-weight: 700; }
.opt-desc { font-size: 11.5px; color: var(--sub); line-height: 1.5; }
.opt-extra { font-size: 11.5px; color: var(--navy); font-weight: 700; white-space: nowrap; }
.biz-head { display: flex; justify-content: space-between; align-items: flex-start; }
.biz-name { font-size: 16px; font-weight: 800; display: block; }
.biz-kind { font-size: 11.5px; color: var(--sub); display: block; }
.biz-est { font-size: 12.5px; color: #3c392f; margin-top: 4px; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.row-label { font-size: 12.5px; color: #3c392f; }
.stepper { display: flex; align-items: center; gap: 10px; }
.step-btn { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); background: var(--card); font-size: 16px; line-height: 1; cursor: pointer; flex: none; }
.step-btn:active { transform: scale(.94); }
.step-val { font-weight: 700; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.ad-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.seg-btn { appearance: none; border: none; background: var(--card); font: inherit; font-size: 13px; padding: 6px 13px; cursor: pointer; color: var(--sub); }
.seg-btn.on { background: var(--ink); color: #fff; font-weight: 700; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.check-row:last-of-type { border-bottom: none; }
.check-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.check-mark.ok { background: var(--good); border-color: var(--good); color: #fff; }
.check-label { flex: 1; }
.check-now { font-weight: 700; font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.progress-bar { height: 100%; background: var(--gold); border-radius: 99px; transition: width .6s cubic-bezier(.22,.8,.3,1); }
.roster-line { font-size: 12.5px; color: #3c392f; padding: 2px 0; }
.roster-line b { color: var(--navy); }

/* --- 上場画面 --- */
#screen-ipo { position: relative; overflow-x: hidden; overflow-y: auto; }
/* ↑ overflow-y:auto（2026-10-29 バグ修正）: 従来の overflow:hidden では
   小型端末（667px級）で内容（約800px）が縦にあふれ、下部の
   「新しい挑戦をはじめる」「タイトルへ」ボタンが切れて届かなかった。
   横は hidden のまま（紙吹雪スパークの見た目は不変）、縦だけ .screen 本来の
   スクロールに戻す。背の高い端末では従来どおりスクロールなしで収まる。 */
.ipo-spark { position: absolute; top: -12px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; pointer-events: none; animation: sparkfall 3.6s cubic-bezier(.3,.6,.6,1) forwards; z-index: 3; }
.ipo-spark.pale { background: #e8cf7a; width: 4px; height: 4px; }
@keyframes sparkfall { 0% { opacity: 0; transform: translateY(0) translateX(0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translateY(96svh) translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .ipo-spark { display: none; } }
.ipo-art { display: flex; justify-content: center; padding: 20px 0 0; }
.ipo-rank { text-align: center; margin-top: 12px; display: flex; flex-direction: column; }
.ipo-rank-label { font-size: 10.5px; letter-spacing: .28em; color: var(--sub); }
.ipo-rank-value { font-size: 64px; font-weight: 800; color: var(--gold); line-height: 1.15; }
#screen-ipo .stat-row { flex-direction: column; }
#screen-ipo .stat { flex-direction: row; justify-content: space-between; align-items: baseline; }

/* --- ショップ導線（タイトル） --- */
.menu-row {
  appearance: none; width: 100%; margin-top: 14px; 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; }
/* --- ショップ画面（共通部品：見出し・販売対象外の参照行） --- */
#screen-shop { padding-top: 34px; }
.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-main .s-effect { display: block; margin-top: 2px; }
.shop-item .s-effect { flex: 0 0 100%; color: var(--sub); font-size: 12px; line-height: 1.65; }
.shop-item.ref-item .s-effect { flex: none; }
.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: #7a5f14; background: rgba(193,154,46,.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; } }
#screen-shop .catalog-row, #screen-shop .ref-item { animation: riseIn .34s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  #screen-shop .catalog-row, #screen-shop .ref-item { animation: none; }
}

/* --- ガイド・規約ページ --- */
body:not(.game) .wrap { max-width: 680px; }
.guide h1, .terms h1 { font-size: 22px; font-weight: 800; margin: 8px 0 12px; }
.guide h2, .terms h2 { font-size: 16px; font-weight: 800; margin: 20px 0 6px; color: var(--navy); }
.guide p, .terms p, .guide li, .terms li { font-size: 14px; color: #2c2c28; }
.guide ul, .terms ul, .terms ol { padding-left: 20px; }
.guide a, .terms a { color: var(--navy); }
.guide table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.guide th, .guide td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.guide th { background: var(--card); }
.guide .back, .terms .cta, .guide .cta { display: inline-block; margin-top: 26px; background: var(--ink); color: #fff; padding: 11px 26px; border-radius: 999px; text-decoration: none; font-size: 14px; }
.terms .small { font-size: 12px; color: var(--sub); margin-top: 22px; }

/* === アイテムショップ本番化（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(--navy); 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(--navy); 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(--navy); 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(--navy); border-radius: 99px; padding: 1px 5px; }
.azs-sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.azs-sheet-backdrop { position: absolute; inset: 0; background: rgba(16,28,48,.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(--navy); 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; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.item-qty { font-weight: 700; color: var(--gold); }
.card-armed { font-size: 11.5px; color: #7a5f14; font-weight: 700; }
/* テーマ：店内（画面まわり）木目 — 店構えの本体は canvas 側で木目に描く */
body.theme-wood { --paper: #f4ead8; --card: #fbf3e2; --line: #e2cfa8; }
/* テーマ：首都本社の夜景 — 画面まわりの配色を夜にする */
body.theme-hq-night { --paper: #141a29; --card: #1e2739; --ink: #ece9e1; --sub: #98a2b5; --line: #333f55; --navy: #9db8dd; }
body.theme-hq-night .tagline, body.theme-hq-night .azs-effect { color: #c3cadb; }
body.theme-hq-night .howto-box { color: #d5dae6; }
body.theme-hq-night .shop-ic-wrap { background: #262f45; }
body.theme-hq-night .azs-focus { border-color: #333f55; }

.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 に収める ===
   構造のみの是正（文言・導線・世界観は不変）。タイトル画と説明ボックスを
   詰め、余白のリズムを圧縮する。 */
.wrap { padding-top: 12px; padding-bottom: 18px; }
#screen-title .brand { margin-top: 4px; line-height: 1.4; }
#screen-title .title-art { padding: 10px 0 0; }
#screen-title .title-art svg { width: 118px; height: 71px; }
#screen-title .game-title { font-size: 27px; line-height: 1.25; }
#screen-title .tagline { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
#screen-title .title-records { margin-top: 8px; }
#screen-title .title-actions { margin-top: 10px; gap: 7px; }
#screen-title .title-actions .btn { padding: 9px 26px; line-height: 1.35; }
#screen-title .howto-box { margin-top: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.55; }
#screen-title .howto-box p + p { margin-top: 4px; }
#screen-title .howto-link { margin-top: 8px; line-height: 1.5; }
#screen-title .menu-row { margin-top: 8px; padding: 10px 16px; }
#screen-title .fineprint { font-size: 11px; line-height: 1.5; margin-top: 8px; }
#screen-title .azs-banner { margin-top: 10px; height: 38px; aspect-ratio: auto; }
#screen-title .azs-banner img { object-position: center 42%; }
#screen-title .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) === */
.wrap { padding-bottom: 14px; }
#screen-title .brand { margin-top: 2px; }
#screen-title .title-art { padding-top: 6px; }
#screen-title .title-art svg { width: 92px; height: 55px; }
#screen-title .game-title { font-size: 25px; }
#screen-title .tagline { margin-top: 4px; font-size: 13px; line-height: 1.45; }
#title-records { margin-top: 6px; }
#screen-title .title-actions { margin-top: 8px; gap: 6px; }
#screen-title .title-actions .btn { padding: 7px 26px; line-height: 1.3; }
#screen-title .howto-box { margin-top: 10px; padding: 8px 11px; font-size: 11.5px; line-height: 1.48; }
#screen-title .howto-box p + p { margin-top: 3px; }
#screen-title .howto-link { margin-top: 5px; }
#screen-title .menu-row { margin-top: 6px; padding: 8px 16px; }
#screen-title .fineprint { line-height: 1.45; margin-top: 6px; }
#screen-title .azs-banner { margin-top: 8px; }
#screen-title .foot { padding-top: 6px; line-height: 1.45; font-size: 11px; }
.azi-strip-sub { font-size: 10.5px !important; line-height: 1.35 !important; }

/* === ノースクロール是正 第3段 (2026-11-01 FIX1): 安全マージン === */
#screen-title .howto-box { padding: 7px 11px; line-height: 1.46; }
#screen-title .tagline { line-height: 1.42; }
#screen-title .foot { padding-top: 4px; }

/* ============================================================
   FULLSCREEN (2026-11-01): 書類の枠をやめ、世界を画面いっぱいに。
   プレイ＝フィールド全面＋HUDは浮遊パネル。タイトル＝世界を背景に
   タイトルと開始ボタンだけを主役に（本文はあそびかたシートの先）。
   ============================================================ */
body.game .wrap { padding: 0; }

/* --- プレイ画面 --- */
#screen-play { padding-top: 0; }
#screen-play .stage-wrap { position: absolute; inset: 0; margin: 0; display: block; z-index: 0; }
#screen-play .stage-box {
  position: absolute; inset: 0; width: auto; max-width: none; height: auto; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; background: #79a85b;
}
#screen-play #cv { position: absolute; inset: 0; }
/* 操作系（十字キー／経営／はなす）は下端から十分に上げる（2026-11-01 実機指摘
   「操作するところが下すぎる」：従来は下端+10px+安全域でホームインジケーターに
   張り付いていた。固定分を 10px→36px にし、クラスタ全体を +26px 持ち上げる） */
#screen-play #touch-ui { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
#screen-play #dlg { bottom: calc(8px + env(safe-area-inset-bottom)); }
#screen-play #area-banner { top: calc(env(safe-area-inset-top) + 136px); }
#screen-play #toast { top: calc(env(safe-area-inset-top) + 198px); }

.hud-panel {
  position: absolute; z-index: 6;
  top: calc(env(safe-area-inset-top) + 8px); left: 8px;
  max-width: 256px; padding: 7px 11px 8px;
  background: rgba(255, 253, 248, 0.93);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(16, 28, 48, 0.14); border-radius: 14px;
  box-shadow: 0 5px 16px rgba(9, 18, 38, 0.20);
  pointer-events: none;
}
.hud-panel .p-ym { font-size: 14.5px; white-space: nowrap; }
.hud-panel .chip { font-size: 10.5px; padding: 2px 8px; white-space: nowrap; }
.hud-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.hud-row .chip { margin-left: auto; }
.hud-value { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }
.hud-value .chip { margin-left: auto; align-self: center; }
.hud-value .hero-label { font-size: 10.5px; white-space: nowrap; flex: none; }
.hud-value .hero-value { font-size: 23px; white-space: nowrap; flex: none; }
.hud-panel .hero-goal { display: block; font-size: 10.5px; margin-top: 1px; line-height: 1.4; }
.hud-stats { display: flex; gap: 12px; margin-top: 4px; padding-top: 5px; border-top: 1px solid rgba(16, 28, 48, 0.10); }
.hud-stat { display: flex; align-items: baseline; gap: 4px; }
.hud-stat .stat-label { font-size: 10px; }
.hud-stat .stat-value { font-size: 13.5px; }
#btn-sound.hud-sound {
  position: absolute; z-index: 6;
  top: calc(env(safe-area-inset-top) + 50px); right: 8px;
  width: 40px; height: 40px; margin: 0;
  background: rgba(255, 253, 248, 0.93);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 4px 12px rgba(9, 18, 38, 0.18);
}
#screen-play .play-items {
  position: absolute; z-index: 6;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 178px); /* 操作系の +26px 持ち上げに同期（金の名刺ピルと経営ボタンの間隔を維持） */
  margin: 0; padding: 6px 8px; gap: 6px; max-width: calc(100% - 24px);
  background: rgba(255, 253, 248, 0.93);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(16, 28, 48, 0.14); border-radius: 999px;
  box-shadow: 0 5px 16px rgba(9, 18, 38, 0.20);
}
#screen-play .play-items .card-armed { max-width: 190px; }

/* --- 上場・ショップ画面は従来レイアウトのまま、全面化した .wrap の余白を戻す --- */
#screen-ipo, #screen-shop { padding: 10px 12px 18px; }
#screen-shop { padding-top: 34px; }

/* --- タイトル画面 --- */
#screen-title { position: relative; overflow: hidden; padding: 0; }
#screen-title .title-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#screen-title .title-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(246, 244, 239, 0.94) 0%, rgba(246, 244, 239, 0.78) 26%,
    rgba(246, 244, 239, 0.38) 52%, rgba(246, 244, 239, 0.72) 78%,
    rgba(246, 244, 239, 0.95) 100%);
}
#screen-title .title-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 42px) 18px calc(env(safe-area-inset-bottom) + 12px);
}
#screen-title .brand { margin-top: 0; }
#screen-title .game-title { font-size: 34px; margin-top: 6px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
#screen-title .tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
#screen-title #title-records { margin-top: 10px; }
#screen-title .title-actions { margin-top: 14px; gap: 8px; width: 100%; max-width: 320px; }
#screen-title .title-actions .btn { padding: 12px 26px; font-size: 16.5px; line-height: 1.35; box-shadow: 0 6px 18px rgba(9, 18, 38, 0.25); }
#screen-title .title-spacer { flex: 1; min-height: 12px; }
.title-utils { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#screen-title .title-util {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(16, 28, 48, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(9, 18, 38, 0.16);
}
#screen-title .title-foot {
  margin-top: 10px; padding-top: 0; border-top: 0;
  font-size: 10.5px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center;
}

/* --- あそびかたオーバーレイ（専用入り口の先） --- */
#howto-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(9, 18, 38, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
#howto-overlay[hidden] { display: none; }
.howto-card {
  background: var(--paper); width: 100%; max-height: 86%;
  overflow-y: auto; border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(9, 18, 38, 0.35);
  text-align: left;
}
.howto-title { font-size: 17px; margin-bottom: 8px; }
.howto-card p { font-size: 13px; line-height: 1.65; color: #33383f; }
.howto-card p + p { margin-top: 8px; }
.howto-card .howto-more { margin-top: 10px; }
.howto-card .fineprint { margin-top: 10px; }
.howto-card .btn { width: 100%; margin-top: 14px; }