/* ===== PROBE GRAVITY : 宇宙テーマ（深宇宙黒/シアン） ===== */
/* ローカル同梱フォント（オフライン対応・外部依存を撤去） */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-400.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-500.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-700.woff2') format('woff2');}

:root{
  --bg:#06080c; --surface:rgba(79,200,255,0.20); --panel:rgba(10,16,26,0.90);
  --text:#eef3fb; --text-muted:rgba(125,182,226,0.85); --border:rgba(79,200,255,0.35);
  --green:rgba(79,200,255,0.14); --green-d:rgba(79,200,255,0.50);
  --gold:#F2C21C; --gold-d:#C99A12;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html,body{margin:0;height:100%;}
body{
  font-family:'DM Mono',monospace;
  color:var(--text);
  background:var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(79,200,255,0.04) 0px, rgba(79,200,255,0.04) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(79,200,255,0.04) 0px, rgba(79,200,255,0.04) 1px, transparent 1px, transparent 28px);
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
.app{position:relative;width:100%;max-width:520px;height:100dvh;display:flex;flex-direction:column;}

/* ---------- HUD（SEIZEスコアパネル風） ---------- */
.hud{position:absolute;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;gap:0;
  padding:max(12px,env(safe-area-inset-top,0)) 14px 0;pointer-events:none;}
.grp{display:flex;flex-direction:column;align-items:flex-start;line-height:1;padding-right:18px;}
.grp .lab{font-size:10px;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;}
.grp .num{font-family:'Playfair Display',serif;font-size:22px;color:var(--text);margin-top:4px;
  font-variant-numeric:tabular-nums;}
.spacer{flex:1;}
.ob{pointer-events:auto;width:38px;height:38px;padding:0;font-size:15px;line-height:1;margin-left:6px;
  font-family:'DM Mono',monospace;
  border:1px solid var(--border);border-radius:3px;background:var(--panel);color:var(--text-muted);
  cursor:pointer;transition:background .1s;}
.ob:active{background:var(--surface);}

/* ---------- play field ---------- */
.stage{flex:1;position:relative;min-height:0;}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;}

/* ---------- controller（右下＝丸ボタン型ジョイスティック・白） ---------- */
.pad{position:absolute;right:22px;bottom:max(22px,env(safe-area-inset-bottom,0));
  width:88px;height:88px;border-radius:50%;z-index:20;touch-action:none;user-select:none;
  border:2px solid rgba(255,255,255,0.85);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 70%, transparent 72%);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.10);}
/* 内側の同心リング */
.pad::before{content:'';position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,0.55);}
/* ノブ＝中央の光る白い丸（ドラッグで動く） */
.padknob{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,0.98), rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.25) 100%);
  box-shadow:0 0 10px rgba(255,255,255,0.8), 0 0 4px rgba(255,255,255,0.95);}

/* ---------- stage clear banner ---------- */
.banner{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;background:rgba(232,224,204,.92);backdrop-filter:blur(2px);text-align:center;padding:24px;}
.banner.show{display:flex;}
.banner .big{font-family:'Playfair Display',serif;font-size:28px;letter-spacing:.12em;color:var(--text);}
.banner .small{font-size:11px;color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;}

/* ---------- 画面オーバーレイ ---------- */
.screen{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;background:rgba(232,224,204,.94);backdrop-filter:blur(3px);text-align:center;padding:24px;cursor:pointer;}
.screen.show{display:flex;}
.scr-logo{font-family:'Playfair Display',serif;font-size:34px;letter-spacing:.16em;color:var(--text);margin-bottom:8px;opacity:.9;}
.scr-big{font-family:'Playfair Display',serif;font-size:26px;letter-spacing:.10em;color:var(--text);}
.scr-small{font-size:11px;color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase;}
.scr-sub{font-size:10px;color:var(--text-muted);letter-spacing:.1em;margin-top:2px;}

/* ---------- ボタン（SEIZE） ---------- */
.scr-btn,.banner button{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 28px;min-height:44px;min-width:180px;
  border:1px solid var(--green-d);background:var(--green);color:#2a2818;
  border-radius:3px;cursor:pointer;transition:background .1s;}
.scr-btn:active,.banner button:active{background:#98a86a;}
.scr-btn.ghost{background:var(--panel);color:var(--text-muted);border-color:var(--border);}
.scr-btn.ghost:active{background:var(--surface);}
.scr-btn:disabled{opacity:.4;cursor:default;}
.banner button{min-width:0;padding:11px 26px;}

/* ---------- ステージセレクター ---------- */
.selector{display:flex;align-items:center;gap:10px;margin:2px 0 6px;}
body:not(.debug) .selector{ display:none; }   /* ステージセレクターはデバッグモード時のみ表示 */
#logo{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:default; }
.toast{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
  background:rgba(10,16,26,.95); border:1px solid rgba(79,200,255,.5); color:#bfe6ff;
  font:500 13px 'DM Mono',monospace; letter-spacing:.18em; text-transform:uppercase;
  padding:14px 22px; border-radius:6px; z-index:80; pointer-events:none;
  opacity:0; transition:opacity .25s ease, transform .25s ease; }
.toast[hidden]{ display:none; }
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.selarrow{font-family:'DM Mono',monospace;font-size:14px;
  border:1px solid var(--border);background:var(--panel);color:var(--text-muted);
  width:40px;height:40px;border-radius:3px;cursor:pointer;transition:background .1s;}
.selarrow:active{background:var(--surface);}
.selten{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;padding:10px;border-radius:3px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  -webkit-appearance:none;appearance:none;}
.selnum{font-family:'Playfair Display',serif;font-size:16px;letter-spacing:.06em;color:var(--text);
  font-variant-numeric:tabular-nums;min-width:64px;}
/* ===== PROBE GRAVITY : title screen (draft / たたき台・あとで詰める) ===== */
/* 世界観はゲーム本体の実色（宇宙黒/シアン斥力/白大気圏/金探査機/赤惑星）から。
   顔＝スイングバイ軌道線。文字＝DM Mono テレメトリ。#scrTitle のみ・他画面は不変。 */
#scrTitle{
  color:#eef3fb;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 73% 14%, rgba(200,225,255,.70), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 60%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 86% 68%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 26% 84%, rgba(200,225,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 38%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 9% 52%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1px 1px at 94% 46%, rgba(200,225,255,.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20375%20620%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22p%22%20cx%3D%2238%25%22%20cy%3D%2234%25%22%20r%3D%2272%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff8466%22%2F%3E%3Cstop%20offset%3D%2252%25%22%20stop-color%3D%22%23c23a28%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234d1410%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M26%20612%20C%20150%20500%2030%20400%20118%20372%20C%20214%20342%20150%20210%20320%2096%22%20fill%3D%22none%22%20stroke%3D%22%234FC8FF%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%224%208%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22384%22%20r%3D%2230%22%20fill%3D%22url(%23p)%22%20opacity%3D%220.92%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22384%22%20r%3D%2234%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.16%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2296%22%20r%3D%222.6%22%20fill%3D%22%23F2C21C%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2296%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23F2C21C%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") center/cover no-repeat,
    radial-gradient(ellipse 120% 75% at 50% 24%, rgba(40,72,128,.28), transparent 62%),
    radial-gradient(circle at 50% 55%, #11151f 0%, #0a0d15 56%, #06080c 100%);
}
#scrTitle .scr-logo{
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:23px; letter-spacing:.22em; text-indent:.22em;
  color:#f4f8ff; opacity:1; margin-bottom:6px;
  text-shadow:0 0 16px rgba(79,200,255,.40), 0 0 2px rgba(255,255,255,.55);
}
#scrTitle .scr-logo::after{
  content:'GRAVITY-ASSIST LANDER'; display:block;
  font-size:8.5px; letter-spacing:.40em; text-indent:.40em; font-weight:400;
  color:rgba(130,180,228,.80); margin-top:11px;
}
#scrTitle .scr-btn{
  background:rgba(79,200,255,.12); border:1px solid rgba(79,200,255,.50);
  color:#eaf6ff; letter-spacing:.18em; box-shadow:0 0 14px rgba(79,200,255,.10);
}
#scrTitle .scr-btn:active{ background:rgba(79,200,255,.22); }
#scrTitle .scr-btn.ghost{
  background:rgba(255,255,255,.045); border-color:rgba(170,190,220,.32);
  color:rgba(205,218,238,.85); box-shadow:none;
}
#scrTitle .scr-btn:disabled{ opacity:.32; }
#scrTitle .scr-sub{ color:rgba(150,178,210,.75); }
#scrTitle .selarrow,#scrTitle .selten{
  background:rgba(255,255,255,.05); border:1px solid rgba(170,190,220,.30); color:#dde7f3;
}
#scrTitle .selarrow:active{ background:rgba(255,255,255,.10); }
#scrTitle .selten option{ background:#11151f; color:#dde7f3; }
#scrTitle .selnum{
  font-family:'DM Mono',monospace; color:#eaf6ff; letter-spacing:.10em; font-size:14px;
}

/* ===== PROBE GRAVITY : mission briefing screen (#scrStart) — matches title ===== */
/* Space theme like the title, but focused on a HOUSTON transmission panel.
   Scoped to #scrStart only; game-over (#scrOver) left as-is. */
#scrStart{
  color:#eef3fb;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 73% 14%, rgba(200,225,255,.70), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 60%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 86% 68%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 26% 84%, rgba(200,225,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 38%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 9% 52%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1px 1px at 94% 46%, rgba(200,225,255,.55), transparent 60%),
    radial-gradient(ellipse 120% 75% at 50% 24%, rgba(40,72,128,.28), transparent 62%),
    radial-gradient(circle at 50% 55%, #11151f 0%, #0a0d15 56%, #06080c 100%);
}
#scrStart #ssStage{
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:20px; letter-spacing:.26em; text-indent:.26em;
  color:#f2f8ff; text-shadow:0 0 14px rgba(79,200,255,.35);
}
#scrStart #ssPar{
  position:relative; max-width:264px; margin:18px 0 8px;
  font-family:'DM Mono',monospace; font-size:13px; line-height:1.5;
  letter-spacing:.08em; color:#e2f1ff; text-transform:uppercase;
  animation:ssParBlink 2.4s ease-in-out infinite;
}
@keyframes ssParBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.32; } }
#scrStart #ssPar::before{
  content:'\25B8 INCOMING \00B7 HOUSTON'; display:block;
  font-size:8px; letter-spacing:.26em; color:rgba(120,180,228,.90);
  margin-bottom:9px; text-transform:none;
}
#scrStart .scr-btn{
  background:rgba(79,200,255,.12); border:1px solid rgba(79,200,255,.50);
  color:#eaf6ff; letter-spacing:.18em; box-shadow:0 0 14px rgba(79,200,255,.10);
}
#scrStart .scr-btn:active{ background:rgba(79,200,255,.22); }
#scrStart .selarrow,#scrStart .selten{
  background:rgba(255,255,255,.05); border:1px solid rgba(170,190,220,.30); color:#dde7f3;
}
#scrStart .selarrow:active{ background:rgba(255,255,255,.10); }
#scrStart .selten option{ background:#11151f; color:#dde7f3; }

/* ===== PROBE GRAVITY : result screens — harmonized with title/briefing ===== */
/* Shared starfield+space background (no swing-by SVG; that stays the title's signature). */
:root{
  --pg-space:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 73% 14%, rgba(200,225,255,.70), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 60%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 86% 68%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 26% 84%, rgba(200,225,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 38%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1px 1px at 9% 52%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1px 1px at 94% 46%, rgba(200,225,255,.55), transparent 60%),
    radial-gradient(ellipse 120% 75% at 50% 24%, rgba(40,72,128,.28), transparent 62%),
    radial-gradient(circle at 50% 55%, #11151f 0%, #0a0d15 56%, #06080c 100%);
}

/* ---- TOUCHDOWN (stage clear banner) ---- */
.banner{ background:var(--pg-space); -webkit-backdrop-filter:none; backdrop-filter:none; color:#eef3fb; }
.banner .big{
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:30px; letter-spacing:.28em; text-indent:.28em; color:#ffe9b0;
  text-shadow:0 0 18px rgba(242,194,28,.40), 0 0 2px rgba(255,240,200,.55);
}
.banner .small:empty{ display:none; }
#bannerMovie{ width:100%; max-width:360px; margin:2px 0 0; }
#bannerMovie svg{ width:100%; height:auto; display:block; }
#bannerMovie #crowdDown{ opacity:0; }   /* 既定＝立ちは隠す。動かない環境では万歳(crowdUp)を表示 */
#bannerMovie #crowdUp{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  @keyframes bannerArms{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }       /* 万歳 → 下げ の2コマ */
  @keyframes bannerArmsDown{ 0%,50%{ opacity:0 } 50.01%,100%{ opacity:1 } }   /* 上の裏（立ち） */
  #bannerMovie #crowdUp{ animation:bannerArms 1s steps(1,end) infinite; }
  #bannerMovie #crowdDown{ animation:bannerArmsDown 1s steps(1,end) infinite; }
}
.banner button{
  background:rgba(79,200,255,.12); border:1px solid rgba(79,200,255,.50);
  color:#eaf6ff; letter-spacing:.18em; box-shadow:0 0 14px rgba(79,200,255,.10);
}
.banner button:active{ background:rgba(79,200,255,.22); }

/* ---- LOST... (game over) ---- */
#scrOver{ background:var(--pg-space); -webkit-backdrop-filter:none; backdrop-filter:none; color:#eef3fb; }
#scrOver .scr-big{
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:30px; letter-spacing:.30em; text-indent:.30em; color:#ff8c7a;
  text-shadow:0 0 18px rgba(255,90,70,.40), 0 0 2px rgba(255,200,190,.50);
}
#scrOver .scr-btn{
  background:rgba(79,200,255,.12); border:1px solid rgba(79,200,255,.50);
  color:#eaf6ff; letter-spacing:.18em; box-shadow:0 0 14px rgba(79,200,255,.10);
}
#scrOver .scr-btn:active{ background:rgba(79,200,255,.22); }
#scrOver .scr-btn.ghost{
  background:rgba(255,255,255,.045); border-color:rgba(170,190,220,.32);
  color:rgba(205,218,238,.85); box-shadow:none;
}
#scrOver .selarrow,#scrOver .selten{
  background:rgba(255,255,255,.05); border:1px solid rgba(170,190,220,.30); color:#dde7f3;
}
#scrOver .selarrow:active{ background:rgba(255,255,255,.10); }
#scrOver .selten option{ background:#11151f; color:#dde7f3; }
#scrOver .selnum{ color:#eaf6ff; }

/* ===== PROBE GRAVITY : HUD (dark telemetry, fuel gauge) ===== */
.hud .grp .lab{ color:rgba(125,182,226,.85); }
.hud .grp .num{
  font-family:'DM Mono',monospace; font-weight:500; font-size:18px;
  color:#eef4fc; text-shadow:0 0 10px rgba(79,200,255,.25);
}
/* COMM：回転ボタンと同系の細長い青い箱。中を無線ログが流れる（雰囲気演出・可読性不要） */
.hud .comm{
  width:150px; height:38px; padding:3px 8px; margin-left:0; overflow:hidden; position:relative;
  cursor:default; pointer-events:none; align-self:center;
  display:flex; flex-direction:column; justify-content:flex-end;     /* 新しい発話が下、古い発話は上へ流れて消える（枠内でクリップ） */
}
.comm-roll{ display:flex; flex-direction:column; gap:2px; }
.comm-roll span{ font:500 9px/1.5 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase;
  white-space:normal; word-break:break-word; }
.comm-roll span b{ font-weight:700; opacity:.85; margin-right:5px; }
.comm-roll span.h{ color:rgba(110,180,235,.62); }                 /* HOUSTON：管制（シアン） */
.comm-roll span.s{ color:rgba(196,206,168,.56); padding-left:9px; } /* SPRITE：探査機（ウォーム・インデント） */
.comm-roll span.typing::after{ content:'▌'; margin-left:1px; animation:commCaret .8s steps(1) infinite; }
@keyframes commCaret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .comm-roll span.typing::after{ animation:none; } }
/* 右側：回転 / ハンバーガー（タイトルと同じシアン） */
.hud .ob{
  border:1px solid rgba(79,200,255,.40); background:rgba(79,200,255,.08); color:#d3ecff;
}
.hud .ob:active{ background:rgba(79,200,255,.20); }
/* ハンバーガーのドロップメニュー（SE/BGMトグル＋データ消去） */
.menu-panel{ position:absolute; top:46px; right:8px; z-index:30; pointer-events:auto;
  display:flex; flex-direction:column; min-width:132px;
  border:1px solid rgba(79,200,255,.40); border-radius:5px; overflow:hidden;
  background:rgba(10,16,26,.94); box-shadow:0 6px 22px rgba(0,0,0,.5); }
.menu-panel[hidden]{ display:none; }
.menu-panel .menu-row{ pointer-events:auto; appearance:none; border:0; background:transparent;
  color:#d3ecff; font:500 12px/1 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase;
  text-align:left; padding:11px 13px; cursor:pointer; border-bottom:1px solid rgba(79,200,255,.14); }
.menu-panel .menu-row:last-child{ border-bottom:0; }
.menu-panel .menu-row:active{ background:rgba(79,200,255,.18); }
.menu-panel .menu-row.off{ color:rgba(125,182,226,.5); }
.menu-panel .menu-row.danger{ color:#e88; }
.menu-panel .menu-row.danger:active{ background:rgba(230,120,120,.18); }

/* ========== MAKING（ステージメーカー・デバッグ専用 / PC横長2分割） ========== */
.make-panel{ display:none; }
.making-bar{ display:none; }
body.making{ flex-direction:row; align-items:stretch; justify-content:flex-start; overflow:hidden; }
body.making .app{ flex:0 1 460px; max-width:460px; }
body.making .make-panel{
  display:flex; flex-direction:column; gap:10px; flex:0 0 320px; max-width:320px;
  height:100dvh; overflow-y:auto; padding:14px 14px 24px; box-sizing:border-box;
  background:rgba(6,9,15,.96); border-left:1px solid rgba(79,200,255,.25);
  font-family:'DM Mono',monospace;
}
body.making .making-bar{
  display:flex; position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:30; gap:8px;
}
.mk-modebtn{
  font:600 12px 'DM Mono',monospace; letter-spacing:.12em; color:#bfe6ff;
  background:rgba(10,16,26,.92); border:1px solid rgba(79,200,255,.45);
  padding:9px 20px; border-radius:6px; cursor:pointer;
}
.mk-modebtn.on{ background:rgba(79,200,255,.22); border-color:rgba(79,200,255,.95); color:#eaf7ff; }
.mk-sec{ border-top:1px solid rgba(79,200,255,.14); padding-top:8px; }
.mk-sec:first-child{ border-top:0; padding-top:0; }
.mk-h{ font:600 11px 'DM Mono',monospace; letter-spacing:.18em; text-transform:uppercase;
  color:#7fb6d6; margin-bottom:7px; }
.mk-row{ display:flex; flex-wrap:wrap; gap:7px; }
.mk-toggle{
  flex:1 1 auto; font:600 12px 'DM Mono',monospace; letter-spacing:.1em; color:#bfe6ff;
  background:rgba(10,16,26,.9); border:1px solid rgba(79,200,255,.4);
  padding:9px 10px; border-radius:6px; cursor:pointer;
}
.mk-toggle.on{ background:rgba(79,200,255,.22); border-color:rgba(79,200,255,.95); color:#eaf7ff; }
.mk-add{
  font:600 12px 'DM Mono',monospace; letter-spacing:.08em; color:#0a0e16;
  border:0; padding:9px 12px; border-radius:6px; cursor:pointer; min-width:54px;
}
.mk-add.red{   background:#ff7a7a; }
.mk-add.blue{  background:#5cc6ff; }
.mk-add.warp{  background:#d98cff; }
.mk-add.boost{ background:#5ee0a0; }
.mk-add.iss{   background:#b9c0cc; }
.mk-add:active{ transform:translateY(1px); }
.mk-foot{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.mk-export{
  font:700 14px 'DM Mono',monospace; letter-spacing:.14em; color:#0a0e16;
  background:#ffd24a; border:0; padding:14px; border-radius:7px; cursor:pointer;
}
.mk-exit{
  font:600 12px 'DM Mono',monospace; letter-spacing:.12em; color:#9fb4cc;
  background:transparent; border:1px solid rgba(120,150,180,.35); padding:10px; border-radius:6px; cursor:pointer;
}
/* ===== エンディング（ST100クリア後の演出） ===== */
/* 重なり順：end-scene(画像) < end-bubble(吹き出し) < end-white(白)。
   白フェードで覆い→画像フェードインで白を退ける→吹き出しpop。フェードはJS(goEnding)が制御。 */
.ending{ position:absolute; inset:0; z-index:50; overflow:hidden; }
.ending[hidden]{ display:none; }
.end-scene{ position:absolute; inset:0; opacity:0;
  background:url("../assets/ending_morning.png") center/cover no-repeat; }
.end-white{ position:absolute; inset:0; opacity:0; background:#fff; pointer-events:none; }
.end-bubble{ position:absolute; left:50%; top:30%; transform:translate(-50%,0) scale(.6);
  transform-origin:50% 120%; opacity:0;
  background:#fff; color:#1f2750; border-radius:26px; padding:16px 22px; max-width:78%;
  font-family:"Hiragino Maru Gothic ProN","Segoe UI Rounded","Baloo 2","Comic Sans MS",system-ui,sans-serif;
  font-size:clamp(16px,3.4vw,28px); font-weight:800; line-height:1.28; text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28); letter-spacing:.01em; }
.end-bubble::after{ content:""; position:absolute; left:46%; bottom:-20px;
  border:14px solid transparent; border-top-color:#fff; border-bottom:0;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.12)); }
.end-bubble.show{ animation:endPop .5s cubic-bezier(.18,1.5,.4,1) forwards; }
@keyframes endPop{
  0%{ opacity:0; transform:translate(-50%,12px) scale(.6); }
  70%{ opacity:1; transform:translate(-50%,-2px) scale(1.04); }
  100%{ opacity:1; transform:translate(-50%,0) scale(1); } }
@media (prefers-reduced-motion:reduce){
  .end-bubble.show{ animation:none; opacity:1; transform:translate(-50%,0) scale(1); } }
.end-title{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
  font:600 13px/1 'DM Mono',monospace; letter-spacing:.16em; color:#fff;
  background:rgba(20,24,48,.5); border:1px solid rgba(255,255,255,.55);
  padding:13px 30px; border-radius:11px; cursor:pointer; }
.end-title:hover{ background:rgba(20,24,48,.72); }
.end-title.show{ opacity:1; pointer-events:auto; }

/* ===== チュートリアル（初回ST1のみ・操作案内だけ） ===== */
.tut{ position:absolute; inset:0; z-index:35; pointer-events:none; }
.tut[hidden]{ display:none; }
.tut-bubble{ position:absolute; right:18px; bottom:128px; pointer-events:none;
  background:rgba(20,24,48,.88); color:#eef1ff; border:1px solid rgba(255,255,255,.28);
  padding:11px 15px; border-radius:12px; font:500 13px/1.3 'DM Mono',monospace; letter-spacing:.03em;
  box-shadow:0 8px 20px rgba(0,0,0,.38); }
.tut-bubble::after{ content:""; position:absolute; right:34px; bottom:-9px;
  border:9px solid transparent; border-top-color:rgba(20,24,48,.88); border-bottom:0; }
.tut-skip{ position:absolute; right:18px; bottom:170px; pointer-events:auto;
  background:transparent; color:#9fb4cc; border:1px solid rgba(120,150,180,.4);
  border-radius:8px; padding:6px 12px; font:500 11px/1 'DM Mono',monospace; letter-spacing:.1em; cursor:pointer; }
.tut-skip:hover{ color:#eef1ff; border-color:rgba(255,255,255,.5); }