:root{ --ink:#2a2440; --cream:#fff7ea; --coral:#ff6b5e; --teal:#26c2b3; }
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
     -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }   /* 長押しでの文字選択・コンテキストメニューを抑止（ゲーム操作優先） */
  html,body{ width:100%; height:100%; overflow:hidden; background:#bfe9ff; overscroll-behavior:none; }   /* 引っ張って更新・スワイプ戻るを抑止 */
  body{ font-family:"Zen Maru Gothic", system-ui, sans-serif; color:var(--ink); }
  #app{ position:fixed; inset:0; }
  canvas{ display:block; touch-action:none; }
  .hud{ position:fixed; pointer-events:none; z-index:10; }
  body.pre #map, body.pre #joy, body.pre #btnA, body.pre #btnRun, body.pre #prompt, body.pre #dnBtn, body.pre #hint{ display:none !important; }
  #dnBtn{ position:fixed; top:64px; left:20px; z-index:20; width:42px; height:42px; border-radius:50%;
    border:3px solid #fff; background:rgba(42,36,64,.72); font-size:18px; line-height:1; cursor:pointer;
    box-shadow:0 6px 14px rgba(43,40,80,.2); }
  body.talking #joy, body.talking #btnRun, body.talking #btnA{ display:none !important; }
  body.battle #joy, body.battle #btnRun, body.battle #btnA{ display:none !important; }   /* ダンスバトル中は移動系を隠す（矢印ボタンだけ） */
  body.mini #btnRun, body.mini #btnA, body.mini #prompt{ display:none !important; }
  body.mini #title, body.mini #map{ display:none !important; }   /* クリスタル集め中は集中モード：上部のタイトル・ミニマップを隠す */
  body.inside #title, body.inside #map, body.inside #dnBtn, body.inside #hint{ display:none !important; }   /* 施設内は街のHUDを隠す（移動とEXITだけ） */
  body.inside #nightfx, body.inside #vig{ display:none !important; }   /* 街の昼夜オーバーレイは施設内に被せない（施設は独自の雰囲気） */
  /* トースト（営業時間外など一時メッセージ） */
  #toast{ left:50%; bottom:23%; transform:translateX(-50%); max-width:84vw; opacity:0; transition:opacity .3s;
    background:rgba(42,36,64,.92); color:#fff; font-family:"DotGothic16",monospace; font-size:15px; line-height:1.5;
    padding:12px 20px; border-radius:16px; border:2px solid #fff; box-shadow:0 8px 22px rgba(0,0,0,.3); text-align:center; white-space:pre-line; }
  #toast.show{ opacity:1; }
  /* ブレイクダンスQTE */
  /* ダンス対決UI：中央はダンスが見えるよう、上＝プロンプト／中央＝演出文字／下＝ボタン に分ける */
  #qte{ inset:0; z-index:49; display:none; pointer-events:none; }
  #qte.show{ display:block; }
  #qte .qtop{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:min(360px,86vw); text-align:center; }
  #qte .qround{ font-family:"Press Start 2P",monospace; font-size:12px; color:#ff5fc8; letter-spacing:1px; }
  #qte .qarrow{ font-size:88px; line-height:1; color:#fff; margin:2px 0; opacity:0; text-shadow:0 0 20px rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.5); }
  #qte .qarrow.show{ opacity:1; animation:qbang .36s cubic-bezier(.16,1.9,.4,1) both; }   /* バンッと大きく出現 */
  @keyframes qbang{ 0%{ transform:scale(2.8); opacity:0; } 55%{ transform:scale(.8); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
  @keyframes qcpop{ 0%{ transform:translate(-50%,-50%) scale(1.8); opacity:0; } 55%{ transform:translate(-50%,-50%) scale(.9); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
  @keyframes qbnr{ 0%{ transform:translate(-50%,-50%) scale(1.25); opacity:0; } 60%{ transform:translate(-50%,-50%) scale(.97); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
  #qte .qarrow.hit{ color:#49ffa0; } #qte .qarrow.miss{ color:#ff5147; }
  #qte .qarrow span{ display:inline-block; margin:0 .07em; transition:opacity .12s,transform .12s; }   /* 2連矢印：済/次の表現 */
  #qte .qarrow .qd-done{ opacity:.28; transform:scale(.8); } #qte .qarrow .qd-next{ opacity:.5; } #qte .qarrow .qd-cur{ opacity:1; }
  #qte .qbar{ height:9px; background:rgba(255,255,255,.2); border-radius:6px; overflow:hidden; margin:4px auto; max-width:280px; }
  #qte .qfill{ height:100%; width:100%; background:linear-gradient(90deg,#ff5fc8,#49e0ff); border-radius:6px; }
  #qte .qinfo{ font-family:"Press Start 2P",monospace; font-size:10px; color:#fff; letter-spacing:1px; text-shadow:0 2px 4px rgba(0,0,0,.5); }
  #qte .qinfo b{ color:#ffd54a; }
  #qte .qpop{ position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); font-family:"Press Start 2P",monospace; font-size:30px; opacity:0; }
  #qte .qpop.show{ opacity:1; animation:qcpop .55s cubic-bezier(.2,1.7,.4,1) both; }   /* 中央維持で出現 */
  #qte .qpop.hit{ color:#49ffa0; text-shadow:0 0 16px rgba(73,255,160,.8); } #qte .qpop.miss{ color:#ff5147; text-shadow:0 0 14px rgba(255,81,71,.7); }
  #qte .qbanner{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:90vw; text-align:center;
    font-family:"Press Start 2P",monospace; font-size:clamp(15px,4.4vw,24px); color:#ffd54a; text-shadow:0 4px 0 #c98f00,0 8px 20px rgba(0,0,0,.4); opacity:0; }
  #qte .qbanner.show{ opacity:1; animation:qbnr .9s cubic-bezier(.2,1.5,.5,1) both; }   /* 中央維持で出現（左ズレ防止） */
  #qte .qbtns{ position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto; }
  #qte .qrow{ display:flex; gap:6px; }
  #qte .qbtns button{ width:60px; height:54px; font-size:24px; cursor:pointer; border:2px solid #fff; color:#fff;
    background:rgba(60,50,90,.82); border-radius:12px; box-shadow:0 4px 0 rgba(0,0,0,.35); }
  #qte .qbtns button:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
  body:not(.touch) #qte .qbtns{ display:none; }   /* PCは矢印キー操作なのでボタン非表示 */
  body.talking #qte .qbtns{ display:none !important; }   /* ラウンド間の会話中は矢印ボタンを隠す（会話窓が隠れないように） */
  /* UFO戦は常時ダッシュなので走るボタンは不要（body.mini が非表示にする） */
  /* attract mode（埋め込み）: HUD・操作系・スタート画面をすべて隠して街だけ見せる
     html.attract はインラインスクリプトで最初の描画前に付与され、スタート画面のチラつきを防ぐ */
  html.attract #title, html.attract #map, html.attract #hint, html.attract #dnBtn,
  html.attract #prompt, html.attract #dialogue, html.attract #joy, html.attract #btnRun,
  html.attract #btnA, html.attract #mini, html.attract #miResult, html.attract #start,
  html.attract #fade{ display:none !important; }

  #title{ top:18px; left:20px; font-family:"DotGothic16", monospace; line-height:1; }
  #title .big{ font-family:"Press Start 2P", monospace; font-size:17px; letter-spacing:0; color:#fff; text-shadow:0 3px 0 #1b6e66; }
  #title .small{ display:block; margin-top:6px; font-family:"Zen Maru Gothic"; font-weight:700;
    font-size:12px; color:#1b6e66; background:rgba(255,255,255,.72); padding:3px 9px; border-radius:20px; }

  #map{ top:16px; right:16px; }
  #map canvas{ width:140px; height:140px; border-radius:18px; border:3px solid #fff;
    box-shadow:0 8px 20px rgba(43,40,80,.22); background:#3b4150; display:block; }
  #map .cap{ margin-top:6px; text-align:center; font-family:"DotGothic16",monospace; font-size:10px;
    color:#1b5e57; background:rgba(255,255,255,.74); padding:3px 8px; border-radius:20px; }
  #map .cap b{ color:#c64a40; }
  @media (max-width:760px){ #map canvas{ width:104px; height:104px; } #map .cap{ font-size:9px; padding:2px 6px; } }

  #hint{ bottom:16px; left:50%; transform:translateX(-50%);
    font-family:"DotGothic16",monospace; font-size:12px; color:var(--ink);
    background:rgba(255,247,234,.82); padding:8px 16px; border-radius:30px;
    border:2px solid #fff; box-shadow:0 6px 16px rgba(43,40,80,.16); white-space:nowrap; }

  /* proximity prompt */
  #prompt{ bottom:96px; left:50%; transform:translateX(-50%) translateY(14px);
    opacity:0; transition:opacity .16s ease, transform .16s ease; text-align:center; }
  #prompt.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  #prompt .card{ background:#fff; border-radius:18px; padding:11px 20px 13px;
    box-shadow:0 12px 30px rgba(43,40,80,.28); border:3px solid var(--ink); min-width:200px; }
  #prompt .jp{ font-weight:900; font-size:19px; }
  #prompt .en{ font-family:"DotGothic16",monospace; font-size:11px; letter-spacing:2px; color:#8a86a0; }
  #prompt .go{ margin-top:7px; display:inline-block; font-family:"DotGothic16",monospace;
    font-size:13px; color:#fff; background:var(--coral); padding:6px 16px; border-radius:30px; box-shadow:0 4px 0 #c64a40; }
  #prompt .go b{ background:rgba(255,255,255,.25); padding:1px 7px; border-radius:6px; }
  body.touch #prompt .go{ display:none; }   /* スマホは右の操作ボタンで分かるので操作行は出さない */
  body.touch #prompt .card{ padding-bottom:11px; }

  /* dialogue */
  #dialogue{ left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); z-index:52;   /* 話しかけプロンプト(#prompt)と下端を揃える／対決の#qte(49)より前面に */
    width:min(620px,92vw); opacity:0; transition:opacity .18s, transform .18s; pointer-events:none; }
  #dialogue.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  #dialogue .box{ background:#fff; border:4px solid var(--ink); border-radius:22px;
    padding:16px 22px 18px; box-shadow:0 18px 40px rgba(43,40,80,.3); position:relative; }
  #dialogue .who{ position:absolute; top:-16px; left:22px; font-family:"DotGothic16",monospace;
    font-size:14px; color:#fff; background:var(--teal); padding:5px 16px; border-radius:30px; border:3px solid var(--ink); }
  #dialogue .line{ font-size:18px; font-weight:700; line-height:1.6; min-height:32px; margin-top:14px; }
  #dialogue .next{ position:absolute; right:18px; bottom:12px; font-family:"DotGothic16",monospace;
    font-size:12px; color:#8a86a0; animation:blink 1s steps(2) infinite; }
  #dPlay{ display:none; margin-top:10px; pointer-events:auto; cursor:pointer; border:none;
    font-family:"DotGothic16",monospace; font-size:14px; color:#fff; background:#f2b500;
    padding:9px 18px; border-radius:30px; box-shadow:0 4px 0 #b88600; }
  #mini{ top:14px; left:50%; transform:translateX(-50%); opacity:0; transition:opacity .2s; }
  #mini.show{ opacity:1; }
  #mini .mwrap{ font-family:"DotGothic16",monospace; font-size:20px; color:#fff; background:rgba(42,36,64,.82);
    padding:8px 20px; border-radius:30px; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.2); white-space:nowrap; }
  /* 秒数・獲得数は AMIX TOWN と同じ Press Start 2P。
     幅広フォントなので等幅(min-width)＋中央寄せで桁数が変わってもHUDが揺れない */
  #mini .mwrap b{ font-family:"Press Start 2P", monospace; color:#ffd54a; font-size:.72em;
    display:inline-block; min-width:2.2ch; text-align:center; vertical-align:.06em; }
  #mini .u{ font-size:13px; margin-left:2px; }
  /* 残り5秒以下: タイマーを赤く点滅 / スコア加算でピクッと拡大（min-widthで枠は不動） */
  #mini #miTime.low{ color:#ff5147; animation:lowBlink .55s steps(1,end) infinite; }
  @keyframes lowBlink{ 50%{ color:#ffd54a; } }
  #mini #miScore.pop{ animation:scorePop .26s ease; }
  @keyframes scorePop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
  #miResult{ inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; }
  #miResult.show{ opacity:1; }
  #miResult .rcard{ text-align:center; background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:26px 38px; box-shadow:0 22px 50px rgba(0,0,0,.32); }
  #miResult .rt{ font-family:"DotGothic16",monospace; font-size:18px; color:var(--coral); }
  #miResult .rs{ font-size:24px; font-weight:900; margin-top:8px; }
  #miResult .rs b{ font-family:"Press Start 2P", monospace; color:#f2b500; font-size:26px;
    display:inline-block; min-width:2ch; text-align:center; }
  #miResult .rb{ margin-top:6px; font-family:"DotGothic16",monospace; font-size:13px; color:#8a86a0; }
  #miResult .rb b{ font-family:"Press Start 2P", monospace; color:#2e9c8e; font-size:13px;
    display:inline-block; min-width:2ch; text-align:center; }
  @keyframes blink{ 50%{ opacity:.3; } }

  /* inline HUD icons (絵文字の代わり) */
  .ic{ width:1.05em; height:1.05em; vertical-align:-0.18em; }
  #mini .ic-clock{ color:#fff; }
  #mini .ic-gem{ color:#49e0ff; }
  #miResult .ic-gem{ color:#49e0ff; width:30px; height:30px; vertical-align:-7px; }
  /* UFOモードはスコアアイコンをUFOに切替（クリスタル⇄撃墜数） */
  #mini .ic-ufo{ display:none; color:#b88bff; }
  #miResult .ic-ufo{ display:none; color:#b88bff; width:30px; height:30px; vertical-align:-7px; }
  #mini.ufo .ic-gem, #miResult.ufo .ic-gem{ display:none; }
  #mini.ufo .ic-ufo, #miResult.ufo .ic-ufo{ display:inline-block; }

  /* minigame countdown — AMIX TOWN と同じ Press Start 2P で 3..2..1..GO!! */
  #countdown{ inset:0; display:flex; align-items:center; justify-content:center; z-index:40;
    font-family:"Press Start 2P", monospace; color:#fff; opacity:0; pointer-events:none;
    text-shadow:0 6px 0 #1b6e66, 0 12px 26px rgba(0,0,0,.35); }
  #countdown.show{ animation:cdPop .72s cubic-bezier(.2,1.5,.5,1) both; }
  #countdown{ font-size:clamp(64px,18vw,140px); }
  #countdown.go{ color:#ffd54a; text-shadow:0 6px 0 #c98f00, 0 12px 26px rgba(0,0,0,.35); font-size:clamp(48px,12vw,104px); }
  @keyframes cdPop{ 0%{ opacity:0; transform:scale(2.2); } 22%{ opacity:1; transform:scale(1); }
    70%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.7); } }

  /* 遊び方パネル（UFO戦の開始前） */
  #howto{ inset:0; z-index:48; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:linear-gradient(180deg, rgba(20,16,40,.55), rgba(20,16,40,.78)); }
  #howto.show{ display:flex; }
  #howto .hcard{ width:min(420px,90vw); background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:24px 24px 22px; box-shadow:0 22px 50px rgba(0,0,0,.4); text-align:center;
    animation:pop .4s cubic-bezier(.34,1.56,.64,1); }
  #howto .heyebrow{ font-family:"Press Start 2P", monospace; font-size:11px; color:#7a4ff0; letter-spacing:1px; }
  #howto .hquote{ margin-top:10px; font-weight:900; font-size:16px; color:#7a4ff0; }
  #howto .hquote:empty{ display:none; }
  #howto .ht{ margin-top:12px; font-size:22px; font-weight:900; color:var(--ink); }
  #howto .hlist{ margin:16px auto 0; list-style:none; text-align:left; max-width:330px; }
  #howto .hlist li{ position:relative; padding:8px 0 8px 22px; font-size:14px; color:#4a4660; line-height:1.5;
    border-bottom:1px dashed rgba(42,36,64,.12); }
  #howto .hlist li:last-child{ border-bottom:0; }
  #howto .hlist li::before{ content:""; position:absolute; left:3px; top:14px; width:8px; height:8px; border-radius:50%; background:#7a4ff0; }
  #howto #htStart{ margin-top:20px; cursor:pointer; border:none; font-family:"DotGothic16",monospace; font-size:20px;
    color:#fff; background:var(--coral); padding:14px 40px; border-radius:50px; box-shadow:0 7px 0 #c64a40, 0 14px 26px rgba(0,0,0,.18); }
  #howto #htStart:active{ transform:translateY(5px); box-shadow:0 2px 0 #c64a40; }
  #howto #htCancel{ display:none; margin:12px auto 0; cursor:pointer; font-family:"DotGothic16",monospace; font-size:14px;
    color:var(--ink); background:#fff; border:2px solid var(--ink); padding:8px 24px; border-radius:50px; box-shadow:0 4px 0 rgba(0,0,0,.18); }
  #howto #htCancel:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18); }

  /* 起動時の注意モーダル（3D読み込み前）。理解しました→フェードアウトで街がフワッと出る */
  #attention{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:linear-gradient(180deg,#d9f3e6 0%, #fff7ea 52%, #fdeede 100%); opacity:1; transition:opacity .7s ease; }   /* aboutと同じ優しい色 */
  #attention.show{ display:flex; }
  #attention.hide{ opacity:0; }
  html.pre-att #attention{ display:flex; }                 /* 最初の描画から注意モーダルを出す（チラ見え防止） */
  html.pre-att #start{ display:none !important; }           /* 理解しましたまでスタート画面(AMIX TOWN)を隠す */
  #attention .aavatars{ display:flex; gap:8px; justify-content:center; margin-bottom:14px; }   /* ATTENTION文字との間に余白 */
  #attention .avox{ width:62px; height:62px; image-rendering:pixelated; image-rendering:crisp-edges; animation:avbob 2.4s ease-in-out infinite; }
  #attention .avox:nth-child(2){ animation-delay:.35s; }
  #attention .avox:nth-child(3){ animation-delay:.7s; }
  @keyframes avbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

  /* スリープ（別タブ/長時間放置で処理停止） */
  #sleep{ position:fixed; inset:0; z-index:75; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:rgba(14,24,38,.52); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  #sleep.show{ display:flex; }
  #sleep .scard{ text-align:center; color:#fff; font-family:"DotGothic16",monospace; animation:pop .4s cubic-bezier(.34,1.56,.64,1); }
  #sleep .szz{ font-size:46px; line-height:1; }
  #sleep .st{ font-size:20px; font-weight:700; margin-top:8px; letter-spacing:2px; }
  #sleep .ss{ font-size:13px; opacity:.85; margin-top:8px; }
  #attention .acard{ width:min(470px,90vw); background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:26px 26px 24px; box-shadow:0 24px 56px rgba(0,0,0,.5); text-align:center; animation:pop .45s cubic-bezier(.34,1.56,.64,1); }
  #attention .aeyebrow{ font-family:"Press Start 2P",monospace; font-size:13px; color:#ff6b5e; letter-spacing:2px; }
  #attention .abody{ margin-top:16px; font-size:14.5px; color:#4a4660; line-height:1.95; text-align:left; }
  #attention .anote{ display:block; margin-top:12px; font-size:13px; color:#1b8a78; font-weight:700; }
  #attention #atOk{ margin-top:22px; cursor:pointer; border:none; font-family:"DotGothic16",monospace; font-size:18px; color:#fff;
    background:var(--coral); padding:14px 42px; border-radius:50px; box-shadow:0 7px 0 #c64a40, 0 14px 26px rgba(0,0,0,.18); }
  #attention #atOk:active{ transform:translateY(5px); box-shadow:0 2px 0 #c64a40; }
  #attention #atOk:disabled{ opacity:.7; cursor:default; }

  /* ウェルカム案内モーダル（街に出た直後） */
  #welcome{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:transparent; opacity:0; transition:opacity .3s; }   /* 背景は暗くしない（街はそのまま動く） */
  #welcome.show{ display:flex; opacity:1; }
  #welcome .wcard{ width:min(440px,90vw); background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:26px 26px 22px; box-shadow:0 22px 50px rgba(0,0,0,.42); text-align:center; animation:pop .42s cubic-bezier(.34,1.56,.64,1); }
  #welcome .weyebrow{ font-family:"Press Start 2P", monospace; font-size:11px; color:#7a4ff0; letter-spacing:1px; }
  #welcome .wtitle{ margin-top:12px; font-size:21px; font-weight:900; color:var(--ink); line-height:1.4; }
  #welcome .wtitle:empty{ display:none; }
  #welcome .wbody{ margin-top:14px; font-size:16.5px; color:#4a4660; line-height:1.95; text-align:left; min-height:5.6em; }   /* タイプ中に高さが揺れないように */
  #welcome .wbtns{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  #welcome .wbtns button{ cursor:pointer; border:none; font-family:"DotGothic16",monospace; font-size:18px; color:#fff;
    background:var(--coral); padding:13px 30px; border-radius:50px; box-shadow:0 6px 0 #c64a40, 0 12px 22px rgba(0,0,0,.16); }
  #welcome .wbtns button:active{ transform:translateY(5px); box-shadow:0 2px 0 #c64a40; }
  #welcome .wbtns button.ghost{ background:#ece9f5; color:#6a6580; box-shadow:0 6px 0 #c9c3dc; }
  #welcome .wbtns button.ghost:active{ box-shadow:0 2px 0 #c9c3dc; }
  #welcome .wdots{ margin-top:16px; display:flex; gap:7px; justify-content:center; }
  #welcome .wdots:empty{ display:none; }
  #welcome .wdots i{ width:7px; height:7px; border-radius:50%; background:#d8d2e8; transition:background .2s,transform .2s; }
  #welcome .wdots i.on{ background:#7a4ff0; transform:scale(1.25); }

  /* 被弾フラッシュ（UFO戦） */
  #hitfx{ position:fixed; inset:0; z-index:45; pointer-events:none; opacity:0;
    background:rgba(255,30,30,.14); box-shadow:inset 0 0 170px rgba(255,30,30,.6); }
  #hitfx.show{ animation:hitFlash .42s ease; }
  @keyframes hitFlash{ 0%{ opacity:1; } 100%{ opacity:0; } }

  /* mobile controls */
  #joy{ position:fixed; left:22px; bottom:26px; width:104px; height:104px; z-index:20; border-radius:50%;
    background:rgba(255,255,255,.26); border:3px solid rgba(255,255,255,.68);
    box-shadow:0 8px 22px rgba(43,40,80,.18); display:none; touch-action:none; }
  #joyKnob{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
    border-radius:50%; background:#fff; border:3px solid var(--ink); box-shadow:0 4px 10px rgba(43,40,80,.25); }
  #btnA{ position:fixed; right:26px; bottom:34px; z-index:20; display:none; width:76px; height:76px; border-radius:50%;
    background:var(--coral); border:4px solid #fff; color:#fff; font-family:"DotGothic16",monospace; font-size:14px;
    box-shadow:0 7px 0 #c64a40, 0 11px 20px rgba(0,0,0,.2); opacity:.35; transform:scale(.92); transition:opacity .15s, transform .15s; }
  #btnA.on{ opacity:1; transform:scale(1); }
  #btnA:active{ box-shadow:0 3px 0 #c64a40; transform:translateY(4px) scale(1); }

  /* start */
  #start{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, rgba(120,200,235,.28) 0%, rgba(120,200,235,.06) 34%, rgba(18,68,62,.5) 100%);
    transition:opacity .55s ease; }
  #start .panel{ text-align:center; max-width:480px; padding:32px 30px; border-radius:30px;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45);
    box-shadow:0 22px 60px rgba(18,40,50,.28); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  #start h1{ font-family:"Press Start 2P", monospace; font-size:clamp(28px,8vw,48px); color:#fff; line-height:1.25;
    text-shadow:0 6px 0 #1b6e66; }
  #start h1 span{ color:#ffd54a; text-shadow:0 6px 0 #c98f00; }
  #start .lead{ margin:14px auto 0; font-weight:700; font-size:15px; color:#ffffff; max-width:380px; line-height:1.75; text-shadow:0 2px 5px rgba(6,34,30,.7),0 1px 2px rgba(6,34,30,.55); }
  #start .keys{ margin:22px auto 0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    font-family:"DotGothic16",monospace; font-size:12px; color:var(--ink); }
  #start .keys span{ background:rgba(255,255,255,.78); border:2px solid #fff; padding:6px 12px; border-radius:12px; }
  #playBtn{ pointer-events:auto; margin-top:26px; cursor:pointer; border:none; font-family:"DotGothic16",monospace;
    font-size:22px; color:#fff; background:var(--coral); padding:16px 46px; border-radius:50px;
    box-shadow:0 8px 0 #c64a40, 0 16px 30px rgba(0,0,0,.18); transition:transform .12s, box-shadow .12s; }
  #playBtn:hover{ transform:translateY(-2px); }
  #playBtn:active{ transform:translateY(6px); box-shadow:0 2px 0 #c64a40; }
  /* ローディング演出: 読み込み中はボクセルがピョコピョコ。準備完了で「街へ出る」をポップ表示 */
  #loader{ display:flex; gap:11px; justify-content:center; margin-top:26px; height:30px; align-items:flex-end; }
  #loader span{ width:16px; height:16px; border-radius:4px; background:#fff; border:2px solid var(--ink);
    box-shadow:0 4px 0 rgba(27,110,102,.45); animation:vxbounce .9s infinite ease-in-out; }
  #loader span:nth-child(2){ background:var(--yellow); animation-delay:.15s; }
  #loader span:nth-child(3){ background:var(--coral); animation-delay:.3s; }
  @keyframes vxbounce{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-15px); } }
  #playBtn{ display:none; }                       /* 準備完了まで隠す（早押し防止） */
  #start.ready #loader{ display:none; }
  #start.ready #playBtn{ display:inline-block; animation:playPop .42s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes playPop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  #loadnote{ margin-top:14px; font-family:"DotGothic16",monospace; font-size:11px; color:rgba(255,255,255,.92); opacity:.9; text-shadow:0 1px 3px rgba(6,34,30,.6); }
  #start .aboutlink{ display:inline-block; margin-top:16px; font-family:"DotGothic16",monospace; font-size:12px;
    color:#ffffff; text-decoration:none; border-bottom:2px dotted rgba(255,255,255,.6); padding-bottom:2px;
    text-shadow:0 2px 5px rgba(6,34,30,.7),0 1px 2px rgba(6,34,30,.55); }
  #start .aboutlink:hover{ color:#c64a40; border-bottom-color:#c64a40; }
  /* Liteモード切替（影なし・軽量） */
  #start .litetoggle{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px auto 0;
    font-family:"DotGothic16",monospace; font-size:12px; color:#0f4a44; cursor:pointer; user-select:none;
    background:rgba(255,255,255,.7); border:2px solid #fff; border-radius:30px; padding:7px 16px; width:max-content;
    box-shadow:0 3px 0 rgba(43,40,80,.1); }
  #start .litetoggle input{ width:16px; height:16px; accent-color:var(--teal); cursor:pointer; }
  #start .litetoggle .ic-bolt{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; color:#f2b500; }
  #start .copy{ position:absolute; bottom:18px; left:0; right:0; text-align:center; }
  #start .copy a{ font-family:"DotGothic16",monospace; font-size:11px; color:rgba(255,255,255,.92);
    text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,.35); }
  #start .copy a:hover{ text-decoration:underline; }

  #vig{ position:fixed; inset:0; z-index:5; pointer-events:none; box-shadow:inset 0 0 220px rgba(30,50,70,.22); }
  #nightfx{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; transition:opacity .7s ease, background .7s ease, box-shadow .7s ease; }

  /* scene transition fade — エリア／建物内への遷移に使う黒幕 */
  #fade{ position:fixed; inset:0; z-index:55; pointer-events:none; background:#0a0a14; opacity:0;
    transition:opacity .42s ease; }
  #fade.show{ opacity:1; pointer-events:auto; }

  #btnRun{ position:fixed; right:34px; bottom:122px; z-index:20; display:none; width:62px; height:62px; border-radius:50%;
    background:#2e9c8e; border:4px solid #fff; color:#fff; font-family:"DotGothic16",monospace; font-size:13px;
    box-shadow:0 6px 0 #1f6f64, 0 9px 16px rgba(0,0,0,.18); opacity:0; pointer-events:none;
    transition:transform .1s, box-shadow .1s, opacity .28s ease; touch-action:none; }
  #btnRun.show{ opacity:.9; pointer-events:auto; }   /* 移動中だけふわっと表示 */
  #btnRun.hold{ transform:translateY(4px) scale(.95); box-shadow:0 2px 0 #1f6f64; background:#37b8a7; }

  /* 運転: アクセル/バック（スマホ）。運転中だけ表示 */
  #btnAccel, #btnBack{ position:fixed; z-index:20; display:none; border-radius:50%; border:4px solid #fff; color:#fff;
    font-family:"DotGothic16",monospace; touch-action:none; }
  #btnAccel{ right:26px; bottom:30px; width:84px; height:84px; font-size:15px; background:#2e9c8e;
    box-shadow:0 7px 0 #1f6f64, 0 11px 20px rgba(0,0,0,.2); }
  #btnBack{ right:120px; bottom:34px; width:64px; height:64px; font-size:13px; background:#ff8e4a;
    box-shadow:0 6px 0 #c46a28, 0 9px 16px rgba(0,0,0,.18); }
  #btnAccel:active{ transform:translateY(4px); box-shadow:0 3px 0 #1f6f64; }
  #btnBack:active{ transform:translateY(4px); box-shadow:0 2px 0 #c46a28; }
  body.driving.touch #btnAccel, body.driving.touch #btnBack{ display:block; }
  /* 運転中に隠すHUD（ステア用ジョイスティック・マップは残す） */
  body.driving #prompt, body.driving #btnA, body.driving #btnRun, body.driving #dialogue,
  body.driving #mini, body.driving #hint{ display:none !important; }
  body.racing #title, body.racing #map, body.racing #dnBtn{ display:none !important; }   /* レース中はタイトル・ミニマップを隠して集中モード */
  body.driving #title{ display:none !important; }   /* 運転（ゲーム）中は AMIX TOWN ロゴを隠す（スマホで重なるため） */

  /* レースHUD（ラップ・順位）とラリー指示 */
  #raceHud{ top:14px; left:50%; transform:translateX(-50%); display:none; gap:14px;
    font-family:"Press Start 2P", monospace; font-size:13px; color:#fff; }
  #raceHud.show{ display:flex; }
  #raceHud span{ background:rgba(42,36,64,.82); border:2px solid #fff; border-radius:30px; padding:8px 14px;
    box-shadow:0 6px 16px rgba(0,0,0,.2); white-space:nowrap; }   /* 1行固定で3つの高さを揃える（右2つの余白防止） */
  #raceHud #rhPos{ color:#ffd54a; }
  #raceNote{ top:84px; left:50%; transform:translateX(-50%); font-family:"DotGothic16",monospace;
    font-size:clamp(30px,8vw,56px); font-weight:900; color:#fff; text-shadow:0 4px 0 #c64a40, 0 8px 18px rgba(0,0,0,.3);
    white-space:nowrap; }
  body.driving #raceHud.show{ display:flex; }
  /* レースの大きな演出（FINAL LAP! / FINISH!） */
  #raceBanner{ inset:0; display:flex; align-items:center; justify-content:center; z-index:42; pointer-events:none;
    font-family:"Press Start 2P", monospace; color:#ffd54a; opacity:0; white-space:nowrap;
    font-size:clamp(28px,7vw,56px); text-shadow:0 5px 0 #c98f00, 0 10px 24px rgba(0,0,0,.35); }
  #raceBanner.show{ animation:cdPop 1.5s cubic-bezier(.2,1.5,.5,1) both; }
  /* レース結果モーダル */
  #raceResult{ inset:0; z-index:49; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:linear-gradient(180deg, rgba(20,16,40,.5), rgba(20,16,40,.74)); }
  #raceResult.show{ display:flex; }
  #raceResult .rrcard{ width:min(360px,88vw); background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:26px 24px 22px; text-align:center; box-shadow:0 22px 50px rgba(0,0,0,.4); animation:pop .42s cubic-bezier(.34,1.56,.64,1); }
  #raceResult .rreyebrow{ font-family:"Press Start 2P", monospace; font-size:12px; color:#ff8e4a; letter-spacing:1px; }
  #raceResult .rrrank{ margin-top:14px; font-family:"Press Start 2P", monospace; font-size:30px; color:var(--ink); }
  #raceResult .rrtime{ margin-top:12px; font-family:"DotGothic16",monospace; font-size:18px; color:#2e9c8e; }
  #raceResult #rrClose{ margin-top:20px; cursor:pointer; border:none; font-family:"DotGothic16",monospace; font-size:18px;
    color:#fff; background:var(--coral); padding:13px 34px; border-radius:50px; box-shadow:0 6px 0 #c64a40; }
  #raceResult #rrClose:active{ transform:translateY(4px); box-shadow:0 2px 0 #c64a40; }
  #raceResult #rrExit{ display:block; margin:12px auto 0; cursor:pointer; font-family:"DotGothic16",monospace; font-size:15px;
    color:var(--ink); background:#fff; border:2px solid var(--ink); padding:9px 26px; border-radius:50px; box-shadow:0 4px 0 rgba(0,0,0,.18); }
  #raceResult #rrExit:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18); }

  /* ガレージのメニュー */
  #garage{ inset:0; z-index:48; display:none; align-items:center; justify-content:center; pointer-events:auto;
    background:linear-gradient(180deg, rgba(20,16,40,.5), rgba(20,16,40,.74)); }
  #garage.show{ display:flex; }
  #garage .gcard{ width:min(380px,90vw); background:#fff; border:4px solid var(--ink); border-radius:24px;
    padding:24px; text-align:center; box-shadow:0 22px 50px rgba(0,0,0,.4); animation:pop .4s cubic-bezier(.34,1.56,.64,1); }
  #garage .geyebrow{ font-family:"Press Start 2P", monospace; font-size:11px; color:#ff8e4a; }
  #garage .gt{ margin-top:12px; font-size:22px; font-weight:900; color:var(--ink); }
  #garage .gcard button{ display:block; width:100%; margin:12px 0 0; cursor:pointer; border:none;
    font-family:"DotGothic16",monospace; font-size:18px; color:#fff; padding:13px; border-radius:16px; }
  #garage #gDrive{ background:var(--coral); box-shadow:0 5px 0 #c64a40; }
  #garage #gRace{ background:#2e9c8e; box-shadow:0 5px 0 #1f6f64; }
  #garage #gTaxi{ background:#f2b500; box-shadow:0 5px 0 #c08f00; }
  /* タクシー：目的地コンパス（乗車中に上部表示） */
  #taxiCompass{ position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:21; display:none; flex-direction:column; align-items:center;
    background:rgba(20,16,40,.55); border:2px solid rgba(255,255,255,.5); border-radius:16px; padding:6px 14px 4px; backdrop-filter:blur(4px); }
  #taxiCompass.show{ display:flex; }
  #taxiCompass .tcarrow{ width:26px; height:26px; line-height:0; filter:drop-shadow(0 0 6px rgba(73,255,136,.75)); transition:transform .12s ease; }
  #taxiCompass .tclabel{ font-family:"DotGothic16",monospace; font-size:10px; color:#fff; letter-spacing:1px; margin-top:2px; }
  /* タクシー：ドリフトチップの浮遊「+P」（音なし・車の周囲に表示） */
  #tipLayer{ position:fixed; inset:0; z-index:22; pointer-events:none; overflow:hidden; }
  #tipLayer .tip{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; opacity:0; text-align:center;
    font-family:"Press Start 2P", monospace; font-size:16px; color:#ffd54a;
    text-shadow:0 3px 0 #9a6f12, 0 0 8px rgba(255,213,74,.9); }
  #tipLayer .tip .rk{ display:block; font-size:.92em; margin-bottom:4px; letter-spacing:1px;
    text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 12px currentColor; animation:rkWobble .5s ease-in-out; }
  #tipLayer .tip.big{ font-size:30px; color:#ffe27a; text-shadow:0 4px 0 #a8741a, 0 0 16px rgba(255,213,74,1); }   /* 降車時の獲得運賃＝大きな当たり演出 */
  #tipLayer .tip.go{ animation:tipFloat .9s ease-out forwards; }
  #tipLayer .tip.big.go{ animation:tipPop 1.15s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes tipFloat{ 0%{opacity:0; transform:translate(-50%,-40%) scale(.5);} 16%{opacity:1; transform:translate(-50%,-70%) scale(1.25);} 30%{transform:translate(-50%,-72%) scale(.96);} 44%{transform:translate(-50%,-76%) scale(1.08);} 100%{opacity:0; transform:translate(-50%,-150%) scale(1);} }
  @keyframes tipPop{ 0%{opacity:0; transform:translate(-50%,-38%) scale(.25) rotate(-6deg);} 16%{opacity:1; transform:translate(-50%,-66%) scale(1.45) rotate(2deg);} 32%{transform:translate(-50%,-70%) scale(.92) rotate(-1deg);} 48%{transform:translate(-50%,-74%) scale(1.16) rotate(0);} 66%{transform:translate(-50%,-80%) scale(1);} 100%{opacity:0; transform:translate(-50%,-128%) scale(1.02);} }
  @keyframes rkWobble{ 0%{transform:scale(.4);} 55%{transform:scale(1.25);} 100%{transform:scale(1);} }
  /* 獲得時の金色フラッシュ（射倖心を煽る一瞬の発光） */
  #payFlash{ position:fixed; inset:0; z-index:20; pointer-events:none; opacity:0; mix-blend-mode:screen;
    background:radial-gradient(circle at 50% 62%, transparent 30%, var(--pf,#ffd54a) 145%); }
  #payFlash.go{ animation:payFl .5s ease-out; }
  @keyframes payFl{ 0%{opacity:0;} 22%{opacity:.6;} 100%{opacity:0;} }
  /* HUDの売上(P)が増えた瞬間にポンと弾む */
  #raceHud #rhPos.bump{ animation:hudBump .42s ease-out; }
  @keyframes hudBump{ 0%{transform:scale(1);} 32%{transform:scale(1.38); color:#fff; text-shadow:0 0 12px #ffd54a,0 0 4px #fff;} 100%{transform:scale(1); color:#ffd54a;} }
  #garage #gClose{ background:#8a86a0; box-shadow:0 5px 0 #5d5a70; font-size:14px; padding:10px; }
  #garage .gnote{ margin-top:10px; min-height:16px; font-family:"DotGothic16",monospace; font-size:12px; color:#c64a40; }

  /* link modal */
  #modal{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
    background:rgba(18,28,38,.6); padding:16px; }
  #modal.show{ display:flex; }
  #modal .mcard{ position:relative; width:min(720px,94vw); height:min(80vh,880px); background:#fff; border-radius:20px; overflow:hidden;
    display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.42); border:3px solid var(--ink);
    transform:scale(.7); opacity:0; }
  /* モーダル読み込み中のローダー（カード中央に表示。バー/フッターは前面で操作可能） */
  #mLoad{ position:absolute; inset:0; z-index:2; display:none;
    align-items:center; justify-content:center; gap:9px; background:#f4f4f6; }
  #mLoad.show{ display:flex; }
  #mLoad span{ width:13px; height:13px; border-radius:4px; background:var(--teal); border:2px solid var(--ink);
    animation:vxbounce .9s infinite ease-in-out; }
  #mLoad span:nth-child(2){ background:#ffd54a; animation-delay:.15s; }
  #mLoad span:nth-child(3){ background:var(--coral); animation-delay:.3s; }
  #mLoad em{ font-family:"DotGothic16",monospace; font-style:normal; font-size:12px; color:#8a86a0; margin-left:6px; }
  #modal.show .mcard{ animation:pop .44s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes pop{ 0%{ transform:scale(.6) translateY(12px); opacity:0; } 55%{ opacity:1; } 100%{ transform:scale(1) translateY(0); opacity:1; } }
  #modal .mbar{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
    background:var(--teal); color:#fff; font-family:"DotGothic16",monospace; font-size:14px; }
  #modal .mbar button{ border:none; background:rgba(255,255,255,.25); color:#fff; width:30px; height:30px;
    border-radius:50%; font-size:15px; cursor:pointer; }
  #modal iframe{ flex:1; width:100%; border:0; background:#f4f4f6; }
  #modal .mfoot{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:#fff7ea; }
  #modal .mhint{ font-size:11px; color:#8a86a0; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #modal .mfoot button{ flex-shrink:0; border:none; background:var(--coral); color:#fff; font-family:"DotGothic16",monospace;
    font-size:13px; padding:9px 16px; border-radius:30px; box-shadow:0 4px 0 #c64a40; cursor:pointer; white-space:nowrap; }

  @media (max-width:760px){ #title .big{ font-size:21px; } #hint{ display:none; } #start .panel{ margin:0 16px; max-width:none; }
    #modal .mfoot{ padding:8px 12px; gap:8px; } #modal .mhint{ font-size:10px; }
    #modal .mfoot button{ font-size:12px; padding:8px 13px; }
    #raceHud{ font-size:11px; gap:8px; top:10px; } #raceHud span{ padding:7px 11px; } }   /* レースHUDをスマホでは少し小さく＆詰める */