@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #080b0c;
  --panel: rgba(15, 19, 20, 0.84);
  --panel-strong: #101516;
  --line: rgba(198, 234, 218, 0.12);
  --line-bright: rgba(191, 239, 215, 0.23);
  --text: #edf7f1;
  --muted: #78857f;
  --acid: #c9ff3f;
  --mint: #42e5a1;
  --cyan: #45c8de;
  --orange: #ff8d4d;
  --violet: #936ff7;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgba(58, 121, 96, .13), transparent 30%),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto;
  font-family: var(--sans);
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }

.ambient {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .2;
  pointer-events: none;
}
.ambient--one { width: 420px; height: 420px; background: #3cff94; right: -260px; top: 22%; }
.ambient--two { width: 300px; height: 300px; background: #6b54ff; left: -250px; bottom: 0; opacity: .12; }

.app-shell { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 24px; }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.brand > span:last-child > span { color: var(--acid); }
.brand__mark { width: 29px; height: 29px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-4deg); }
.brand__mark i { display: block; background: var(--acid); }
.brand__mark i:nth-child(2) { opacity: .48; }
.brand__mark i:nth-child(3) { opacity: .75; }
.brand__mark i:nth-child(4) { background: var(--mint); opacity: .35; }

.topbar__meta { display: flex; align-items: center; gap: 13px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; color: #9aa8a1; border: 1px solid var(--line); border-radius: 999px; font: 10px var(--mono); letter-spacing: .08em; }
.status-pill i, .live-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.icon-button:hover, .icon-button[aria-pressed="true"] { border-color: var(--acid); color: var(--acid); }
.icon-button svg { width: 15px; fill: currentColor; }

.intro { display: flex; align-items: end; justify-content: space-between; gap: 48px; padding: clamp(44px, 7vh, 82px) 2px 34px; }
.eyebrow { margin: 0 0 17px; color: #69736f; font: 10px var(--mono); letter-spacing: .16em; }
.eyebrow span { color: var(--acid); }
h1 { margin: 0; max-width: 700px; font-size: clamp(38px, 5.2vw, 75px); line-height: .98; letter-spacing: -.065em; font-weight: 600; }
h1 em { color: var(--acid); font-style: normal; font-weight: 600; }
.intro__copy { margin: 0 0 4px; max-width: 420px; color: #8b9691; font-size: 12px; line-height: 2; letter-spacing: .04em; }

.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 22px 80px rgba(0,0,0,.22); backdrop-filter: blur(20px); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; margin-top:32px; }
.disk-card { min-width: 0; }
.panel__header { height: 68px; padding: 0 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drive-name { display: flex; align-items: center; gap: 12px; }
.drive-icon { position: relative; width: 30px; height: 25px; border: 1px solid #52615a; border-radius: 3px; }
.drive-icon::before { content:""; position:absolute; inset: 6px 5px 8px; border: 1px solid #52615a; border-radius: 50%; }
.drive-icon::after { content:""; position:absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; background: #52615a; }
.drive-name div { display: grid; gap: 4px; }
.drive-name span, .metrics__header { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }
.drive-name strong { font: 12px var(--mono); letter-spacing: .04em; }
.drive-name b { color: var(--acid); font-weight: 500; }
.live-status { display: flex; gap: 9px; align-items: center; color: #a2afa9; font: 9px var(--mono); letter-spacing: .09em; }

.disk-stage { position: relative; height: clamp(300px, 40vw, 485px); margin: 12px; overflow: hidden; background: #090d0e; border: 1px solid rgba(208, 243, 226, .08); cursor: crosshair; touch-action:manipulation; }
#diskCanvas { display:block; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; outline:none; }
.control-deck button, .intro-card button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.disk-stage::before { content:""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
#diskCanvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; outline:none; }
.scan-line { position: absolute; z-index: 3; top: 0; bottom: 0; width: 2px; left: 0; background: var(--acid); box-shadow: 0 0 12px var(--acid), -20px 0 35px rgba(201,255,63,.23); opacity: 0; pointer-events: none; }
.disk-stage.is-scanning .scan-line { opacity: .8; animation: scan 1.7s cubic-bezier(.3,0,.7,1) infinite; }
@keyframes scan { from { left: 0; } to { left: 100%; } }
.canvas-hint { position: absolute; z-index: 4; right: 10px; bottom: 8px; padding: 5px 7px; color: #5e6d66; background: rgba(8,11,12,.75); font: 8px var(--mono); letter-spacing: .08em; pointer-events: none; }
.completion-stamp { position:absolute; z-index:6; inset:50% auto auto 50%; width:min(300px, 72%); padding:22px 16px; display:grid; gap:7px; text-align:center; color:#0d130d; background:var(--acid); border:1px solid #efffc8; box-shadow:0 0 0 8px rgba(201,255,63,.08), 0 0 70px rgba(201,255,63,.32); opacity:0; transform:translate(-50%,-42%) scale(.72) rotate(-3deg); pointer-events:none; }
.completion-stamp small, .completion-stamp span { font:8px var(--mono); letter-spacing:.16em; }
.completion-stamp strong { font:clamp(22px,4vw,36px)/1 var(--mono); letter-spacing:-.05em; }
.completion-stamp button { justify-self:center; margin-top:7px; padding:8px 16px; color:#dfffa0; background:#101610; border:1px solid #101610; font:700 10px var(--mono); letter-spacing:.08em; cursor:pointer; }
.completion-stamp button:hover, .completion-stamp button:focus-visible { color:#fff; background:#182018; outline:2px solid rgba(16,22,16,.25); outline-offset:2px; }
.completion-stamp.is-visible { animation:stamp-in .72s cubic-bezier(.16,.8,.24,1) both; pointer-events:auto; }
@keyframes stamp-in {
  0% { opacity:0; transform:translate(-50%,-40%) scale(1.6) rotate(-3deg); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg); }
}
.disk-stage.is-complete { animation:stage-complete .7s ease-out; }
@keyframes stage-complete { 0%,100% { border-color:rgba(208,243,226,.08); } 35% { border-color:var(--acid); box-shadow:inset 0 0 45px rgba(201,255,63,.16), 0 0 22px rgba(201,255,63,.12); } }

.legend { display: flex; flex-wrap: wrap; gap: 15px 22px; min-height: 48px; align-items: center; padding: 0 20px; border-top: 1px solid var(--line); color: #77847e; font: 8px var(--mono); letter-spacing: .08em; }
.legend span { display: flex; align-items: center; gap: 7px; }
.key { width: 7px; height: 7px; display: inline-block; }
.key--blue { background: #3296ff; }
.key--green { background: #54df65; }
.key--magenta { background: #d85cff; }
.key--orange { background: #ff9738; }
.key--complete { position:relative; background:#26312b; }
.key--complete::after { content:""; position:absolute; width:3px; height:3px; left:1px; top:1px; background:var(--acid); }
.key--moving { background: var(--acid); box-shadow: 0 0 7px var(--acid); }
.key--free { border: 1px solid #37423d; }

.metrics { display: flex; flex-direction: column; min-width: 0; }
.metrics__header { height: 44px; flex: 0 0 auto; }
.metrics__header span:last-child { color: #4d5a54; }
.health-ring { --health: 34; width: 142px; aspect-ratio: 1; margin: 34px auto 27px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--acid) calc(var(--health) * 1%), #202724 0); position: relative; transition: background .35s; box-shadow: 0 0 35px rgba(201,255,63,.04); }
.health-ring::before { content:""; position:absolute; inset: 7px; border-radius:50%; background: var(--panel-strong); }
.health-ring > div { position:relative; text-align:center; }
.health-ring strong { font: 39px/1 var(--mono); letter-spacing: -.09em; }
.health-ring small { color: var(--acid); font: 13px var(--mono); }
.health-ring span { display:block; margin-top: 8px; color: #66716c; font: 7px var(--mono); letter-spacing: .13em; }
.metric-list { border-top: 1px solid var(--line); }
.metric-list > div { display:flex; align-items:center; justify-content:space-between; height: 47px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.metric-list span, .capacity { color: #6e7b75; font: 8px var(--mono); letter-spacing: .08em; }
.metric-list strong { color: #cdd8d2; font: 13px var(--mono); font-weight: 400; }
.metric-list div:first-child strong { color: var(--orange); }
.capacity { padding: 18px; margin-top: auto; }
.capacity__label, .capacity__foot { display:flex; justify-content:space-between; align-items:center; }
.capacity__label b { color:#bcc8c2; font-weight:400; }
.capacity__bar { height: 4px; margin: 12px 0 8px; background:#26302b; overflow:hidden; }
.capacity__bar i { display:block; width:72.4%; height:100%; background: linear-gradient(90deg, var(--mint), var(--acid)); }
.capacity__foot { font-size: 7px; color:#53605a; letter-spacing:0; }

.control-deck { display: grid; grid-template-columns: minmax(190px, 1fr) auto 340px; align-items: center; gap: 20px; min-height: 116px; margin-top: 12px; padding: 20px; }
.progress-label { display: flex; align-items: baseline; justify-content: space-between; font: 9px var(--mono); letter-spacing: .08em; }
.progress-label span { color:#89958f; }
.progress-label strong { color:var(--acid); font-size:13px; font-weight:400; }
.progress-track { height:3px; margin: 13px 0 10px; background:#2a312e; overflow:hidden; }
.progress-track i { display:block; height:100%; width:0; background:var(--acid); box-shadow:0 0 10px var(--acid); transition:width .25s ease; }
.progress-block p { margin:0; color:#53605a; font:8px var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.controls { display:flex; gap:8px; }
.deck-settings { display:grid; grid-template-columns:1fr 1.25fr; gap:12px; }

.footer { display:flex; justify-content:space-between; padding:15px 3px 0; color:#3e4944; font:8px var(--mono); letter-spacing:.07em; }
.footer p { margin:0; }
.footer p:first-child { display:flex; align-items:center; gap:7px; }
.footer i { width:5px; height:5px; background:var(--mint); border-radius:50%; }

.inspect-toast { position:fixed; z-index:60; left:50%; bottom:max(9px, env(safe-area-inset-bottom)); transform:translate(-50%, 20px); max-width:calc(100% - 32px); padding:10px 14px; color:#d8e5de; background:#161c1a; border:1px solid var(--line-bright); font:9px var(--mono); letter-spacing:.04em; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 12px 40px rgba(0,0,0,.4); }
.inspect-toast.is-visible { opacity:1; transform:translate(-50%, 0); }
.inspect-toast.is-error { color:#ffd7d2; border-color:rgba(255,95,87,.72); background:#211614; }

@media (max-width: 900px) {
  .app-shell { width:min(100% - 24px, 720px); padding-top:16px; }
  .intro { padding:44px 2px 24px; }
  .intro__copy { display:none; }
  .workspace { grid-template-columns:1fr; }
  .metrics { display:grid; grid-template-columns:170px 1fr; grid-template-rows:auto 1fr auto; }
  .metrics__header { grid-column:1 / -1; }
  .health-ring { grid-row:2 / 4; margin:24px auto; width:126px; align-self:center; }
  .metric-list { border-left:1px solid var(--line); }
  .capacity { border-left:1px solid var(--line); }
  .control-deck { grid-template-columns:1fr auto; gap:20px; }
  .deck-settings { grid-column:1 / -1; }
}

@media (max-width: 560px) {
  html { min-width:0; width:100%; overflow-x:hidden; }
  body { width:100%; max-width:100%; overflow-x:hidden; }
  .app-shell { width:calc(100% - 16px); max-width:100%; padding-top:10px; padding-bottom:max(148px, calc(132px + env(safe-area-inset-bottom))); }
  .status-pill { display:none; }
  .workspace { margin-top:18px; }
  .intro { padding:38px 2px 21px; }
  .eyebrow { margin-bottom:12px; font-size:8px; }
  h1 { font-size:clamp(36px, 12vw, 55px); }
  .panel__header { height:57px; padding:0 13px; }
  .live-status span { display:none; }
  .disk-stage { width:calc(100% - 14px); height:clamp(430px, 138vw, 620px); margin:7px; }
  .legend { padding:10px 12px; min-height:50px; gap:9px 13px; }
  .metrics { grid-template-columns:140px 1fr; }
  .health-ring { width:108px; margin:20px auto; }
  .health-ring strong { font-size:31px; }
  .metric-list > div { height:42px; padding:0 13px; }
  .capacity { padding:13px; }
  .control-deck {
    position:fixed;
    z-index:40;
    left:8px;
    right:8px;
    bottom:max(8px, env(safe-area-inset-bottom));
    width:auto;
    min-height:0;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px;
    background:rgba(15,19,20,.96);
    border-color:rgba(201,255,63,.22);
    box-shadow:0 -12px 45px rgba(0,0,0,.48);
  }
  .progress-block { display:none; }
  .controls { order:0; }
  .deck-settings { display:grid; grid-template-columns:1fr 1.3fr; gap:8px; }
  .workspace, .disk-card, .metrics, .control-deck, .progress-block { min-width:0; max-width:100%; }
  .footer p:last-child { display:none; }
  .inspect-toast { bottom:max(154px, calc(138px + env(safe-area-inset-bottom))); width:max-content; }
}

/* Minimal game-first layout：盤面と、上のヘッダーだけを見せる */
.disk-card > .panel__header,
.metrics,
.footer,
.canvas-hint,
.progress-block,
.control-deck {
  display:none;
}

.topbar {
  position:relative; z-index:15; display:flex; align-items:center; gap:12px;
  min-height:44px; margin-bottom:8px;
}
.logo-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.brand { flex:0 0 auto; display:flex; align-items:center; gap:8px; margin:0; }
.brand__mark { width:26px; height:26px; flex:0 0 auto; }
.brand__name { height:15px; width:calc(15px * 37.2 / 9); flex:0 0 auto; }

.intro-logo { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:2px; }
.intro-logo__mark { width:46px; height:46px; }
.intro-logo__word { height:26px; width:calc(26px * 37.2 / 9); }

.app-shell { padding-top:8px; padding-bottom:0; }
.workspace { display:block; margin-top:0; }
.disk-card { background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
.disk-stage { margin:0; width:100%; height:clamp(280px, calc(100svh - var(--deck-h, 60px) - 46px), 900px); border-color:rgba(208,243,226,.14); }
/* すぐ要る操作だけ画面に出し、設定はメニューへ畳む */
.deck-bar { flex:0 0 auto; display:flex; align-items:center; gap:6px; }

/* 経過時間と点数。ことばは置かず、アイコンと数字だけ */
.hud { flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.hud-item { position:relative; display:flex; align-items:center; gap:6px; color:#8b9992; }
.hud-item svg { width:15px; height:15px; fill:currentColor; opacity:.7; }
.hud-item b { font:700 14px var(--mono); letter-spacing:.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.hud-item--score b { color:var(--acid); }
.hud-item--score.is-bumped b { animation:hud-bump .32s cubic-bezier(.2,.9,.3,1); }
@keyframes hud-bump { 0% { transform:scale(1); } 38% { transform:scale(1.22); } 100% { transform:scale(1); } }
.hud-gain {
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  color:var(--acid); font:700 10px var(--mono); white-space:nowrap; opacity:0; pointer-events:none;
}
.hud-gain.is-shown { animation:hud-gain .85s ease-out; }
@keyframes hud-gain {
  0% { opacity:0; transform:translate(-50%, 4px); }
  22% { opacity:1; transform:translate(-50%, -2px); }
  100% { opacity:0; transform:translate(-50%, -14px); }
}

.stamp-stats { display:flex; justify-content:center; gap:16px; margin-top:4px; }
.stamp-stats span { display:flex; align-items:center; gap:5px; }
.stamp-stats svg { width:13px; height:13px; fill:#0d130d; opacity:.65; }
.stamp-stats b { font:700 13px var(--mono); color:#0d130d; font-variant-numeric:tabular-nums; }
.deck-icon {
  width:36px; height:36px; display:grid; place-items:center;
  color:#8b9992; background:transparent; border:1px solid var(--line); cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.deck-icon svg { width:23px; height:23px; fill:currentColor; }
.deck-icon:hover { color:var(--text); border-color:var(--line-bright); }
.deck-icon:focus-visible { outline:2px solid var(--acid); outline-offset:1px; }
.deck-icon--primary { color:var(--acid); border-color:rgba(201,255,63,.42); background:rgba(201,255,63,.07); }
.deck-icon--primary:hover { color:var(--acid); border-color:var(--acid); }
#menuToggle[aria-expanded="true"] { color:var(--acid); border-color:rgba(201,255,63,.42); background:rgba(201,255,63,.07); }
.mode-icon { width:23px; height:23px; margin:auto; fill:currentColor; }
.mode-icon--pause { display:none; }
#modeToggle[data-current-mode="auto"] .mode-icon--play { display:none; }
#modeToggle[data-current-mode="auto"] .mode-icon--pause { display:block; }

.deck-menu {
  position:absolute; z-index:12; right:0; top:calc(100% + 6px);
  width:min(300px, calc(100vw - 24px)); display:grid; gap:7px; padding:11px;
  background:#111717; border:1px solid var(--line-bright);
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.deck-menu[hidden] { display:none; }
.menu-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.menu-row > span { color:var(--muted); font:9px var(--mono); letter-spacing:.11em; }
.seg { display:flex; border:1px solid var(--line); }
.seg button {
  min-width:38px; height:30px; padding:0 8px; color:#7d8a83; background:transparent; border:0;
  font:700 9px var(--mono); letter-spacing:.06em; cursor:pointer;
}
.seg button + button { border-left:1px solid var(--line); }
.seg button.is-active { color:#0d130d; background:var(--acid); }
.seg-icon { display:grid; place-items:center; min-width:38px; }
.seg-icon svg { width:19px; height:19px; fill:currentColor; }
.seg-icon[aria-pressed="true"] { color:var(--acid); background:rgba(201,255,63,.1); }
.menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:2px; }
.menu-actions button {
  display:flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 8px;
  color:#9aa8a1; background:transparent; border:1px solid var(--line); cursor:pointer;
  font:700 9px var(--mono); letter-spacing:.06em;
}
.menu-actions button:hover { color:var(--text); border-color:var(--line-bright); }
.menu-actions svg { width:17px; height:17px; fill:currentColor; flex:0 0 auto; }
.menu-credit { margin:4px 0 0; text-align:center; color:#5f6d67; font:10px var(--mono); letter-spacing:.05em; }
.menu-credit a { color:#8b9992; text-decoration:none; border-bottom:1px solid rgba(139,153,146,.35); }
.menu-credit a:hover { color:var(--acid); border-bottom-color:var(--acid); }
.intro-credit { margin:2px 0 0; text-align:center; color:#5f6d67; font:10px var(--mono); letter-spacing:.05em; }
.intro-credit a { color:#8b9992; text-decoration:none; border-bottom:1px solid rgba(139,153,146,.35); }
.intro-credit a:hover { color:var(--acid); border-bottom-color:var(--acid); }

@media (max-width: 560px) {
  .app-shell { padding-bottom:0; }
  .disk-stage { min-height:0; max-height:none; }
  .inspect-toast { bottom:max(8px, env(safe-area-inset-bottom)); }
  .topbar { gap:8px; min-height:40px; margin-bottom:6px; }
  .brand__mark { width:23px; height:23px; }
  .brand__name { height:12px; width:calc(12px * 37.2 / 9); }
  .intro-logo__mark { width:38px; height:38px; }
  .intro-logo__word { height:21px; width:calc(21px * 37.2 / 9); }
  .deck-menu { right:0; left:auto; width:min(290px, calc(100vw - 20px)); }
  .hud { gap:12px; }
  .hud-item b { font-size:13px; }
  .hud-item svg { width:14px; height:14px; }
  .deck-icon { width:34px; height:34px; }
  .deck-icon svg, .mode-icon { width:21px; height:21px; }
}

/* --- 遊び方オーバーレイ：ことばではなく、動く図で見せる --- */
.intro-overlay {
  position: fixed; z-index: 40; inset: 0; display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(4, 7, 8, .8); backdrop-filter: blur(9px);
  opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s;
}
.intro-overlay.is-visible { opacity: 1; visibility: visible; }
.intro-card {
  width: min(430px, 100%); max-height: 100%; min-height: 0;
  display: flex; flex-direction: column;
  color: var(--text); background: linear-gradient(180deg, #121818 0%, #0c1011 100%);
  border: 1px solid var(--line-bright);
  box-shadow: 0 0 0 1px rgba(201,255,63,.05), 0 34px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateY(12px) scale(.985); opacity: 0;
  transition: transform .32s cubic-bezier(.16,.8,.24,1), opacity .32s ease;
}
.intro-overlay.is-visible .intro-card { transform: none; opacity: 1; }
.intro-card__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 16px; display: grid; gap: 14px; align-content: start; }
.intro-card h2 { margin: 0; text-align: center; font: 700 13px var(--mono); letter-spacing: .1em; color: #93a09a; }
/* 出どころの一言。あの青い画面をずっと見ていた人に向けて */
.intro-origin { margin: -6px 0 2px; text-align: center; color: #5f6d67; font-size: 10.5px; line-height: 1.75; letter-spacing: .02em; }

/* 3ステップ。1枚につき「動く図＋1語」だけ */
.intro-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.intro-steps li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; background: rgba(201,255,63,.032); border: 1px solid var(--line);
}
.intro-steps strong { display: flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.intro-steps__n { display: grid; place-items: center; width: 19px; height: 19px; color: #0d130d; background: var(--acid); font: 700 10px var(--mono); }

/* 操作のヒントはアイコン＋1語のチップに */
.intro-tips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.intro-tips li { display: grid; justify-items: center; gap: 6px; padding: 9px 4px; border: 1px solid var(--line); color: #78857f; }
.intro-tips svg { width: 19px; height: 19px; fill: var(--mint); opacity: .82; }
.intro-tips span { font: 9px var(--mono); letter-spacing: .1em; text-align: center; }

.intro-card__foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(11, 15, 16, .92);
}
#introStart {
  flex: 1 1 auto; min-height: 46px; padding: 0 18px;
  color: #0d130d; background: var(--acid); border: 1px solid #efffc8;
  font: 700 13px var(--mono); letter-spacing: .18em; cursor: pointer;
  transition: box-shadow .2s ease, transform .12s ease, background .2s ease;
}
#introStart:hover, #introStart:focus-visible { background: #d7ff69; box-shadow: 0 0 0 5px rgba(201,255,63,.1), 0 0 40px rgba(201,255,63,.26); outline: none; }
#introStart:active { transform: translateY(1px); }
.intro-icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  color: #7d8a83; background: transparent; border: 1px solid var(--line); cursor: pointer;
}
.intro-icon svg { width: 24px; height: 24px; fill: currentColor; }
.intro-icon[aria-pressed="true"] { color: var(--acid); border-color: rgba(201,255,63,.42); background: rgba(201,255,63,.07); }
.intro-card__foot .lang-switch { flex: 0 0 auto; display: flex; height: 46px; border: 1px solid var(--line); }
.intro-card__foot .lang-switch button {
  min-width: 44px; padding: 0 10px; color: #7d8a83; background: transparent; border: 0;
  font: 700 10px var(--mono); letter-spacing: .08em; cursor: pointer;
}
.intro-card__foot .lang-switch button + button { border-left: 1px solid var(--line); }
.intro-card__foot .lang-switch button.is-active { color: #0d130d; background: var(--acid); }

/* ---- 動く図。セル・かけら・帯だけで説明する ---- */
.demo { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 46px; }
.demo-cell {
  position: relative; width: 27px; height: 42px; flex: 0 0 auto;
  background: #17201c; border: 1px solid rgba(208,243,226,.13); overflow: visible;
}
.demo-cell--sm { width: 15px; }
.demo-cell--rest { border-style: dashed; border-color: rgba(237,247,241,.4); }
.demo-fill { position: absolute; left: 0; right: 0; bottom: 0; background: #3296ff; height: 0; }
.demo-mark { position: absolute; left: 2px; top: 2px; width: 4px; height: 4px; background: #eaffb2; opacity: 0; }
/* 満タンになった瞬間の「スカッ」。輪郭が弾けて消える */
.demo-pop { position: absolute; inset: 0; border: 1px solid var(--acid); opacity: 0; }
/* タップの合図 */
.demo-tap { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 1px solid #fff; border-radius: 50%; opacity: 0; }
.demo-arrow { position: relative; width: 13px; height: 40px; flex: 0 0 auto; }
.demo-arrow::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--acid); border-right: 1.5px solid var(--acid); transform: rotate(45deg);
  animation: demo-arrow 2.8s ease-in-out infinite;
}

.demo-fill--drain { background: #3296ff; animation: demo-drain 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.demo-fill--grow { background: #3296ff; animation: demo-grow 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.demo--merge .demo-mark { animation: demo-mark 2.8s linear infinite; }
.demo--merge .demo-pop { animation: demo-pop 2.8s cubic-bezier(.2,.8,.3,1) infinite; }
.demo-tap { animation: demo-tap 2.8s ease-out infinite; animation-delay: var(--td); }

/* 2枚目は「入りきらない分が右の点線セルへ残る」ところが主役 */
.demo-fill--drain2 { background: #54df65; animation: demo-drain 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.demo-fill--grow2 { background: #54df65; animation: demo-grow2 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.demo-fill--rest { background: #54df65; animation: demo-rest 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.demo--spill .demo-mark { animation: demo-mark 2.8s linear infinite; }
.demo--spill .demo-pop { animation: demo-pop 2.8s cubic-bezier(.2,.8,.3,1) infinite; }
.demo--spill .demo-cell--rest { animation: demo-rest-frame 2.8s ease-out infinite; }

.demo--sort { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; width: 100%; max-width: 150px; height: 46px; }
.demo-bar { position: relative; height: 8px; background: var(--c); }
.demo-bar::after { content: ""; position: absolute; inset: 0; background: var(--g); animation: demo-sort 2.8s ease-in-out infinite; animation-delay: var(--d); }

@keyframes demo-drain { 0%, 22% { height: 62%; } 46%, 100% { height: 0; } }
@keyframes demo-grow { 0%, 22% { height: 38%; } 46%, 100% { height: 100%; } }
@keyframes demo-grow2 { 0%, 22% { height: 30%; } 46%, 100% { height: 100%; } }
@keyframes demo-rest { 0%, 30% { height: 0; } 54%, 100% { height: 24%; } }
@keyframes demo-rest-frame {
  0%, 40% { border-color: rgba(237,247,241,.16); }
  56% { border-color: #edf7f1; box-shadow: 0 0 12px rgba(237,247,241,.35); }
  100% { border-color: rgba(237,247,241,.4); box-shadow: none; }
}
@keyframes demo-mark { 0%, 45% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes demo-pop {
  0%, 45% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes demo-tap {
  0%, 100% { opacity: 0; transform: scale(.5); }
  4% { opacity: .95; transform: scale(.5); }
  16% { opacity: 0; transform: scale(1.9); }
}
@keyframes demo-arrow { 0%, 100% { opacity: .25; transform: rotate(45deg) translate(-2px, 2px); } 40% { opacity: 1; transform: rotate(45deg) translate(2px, -2px); } }
@keyframes demo-sort { 0%, 24% { opacity: 1; } 58%, 100% { opacity: 0; } }

@media (max-width: 560px) {
  .intro-card__body { padding: 16px 14px 13px; gap: 11px; }
  .intro-card__foot { padding: 11px 14px max(12px, env(safe-area-inset-bottom)); gap: 7px; }
  .intro-steps li { padding: 10px 11px; gap: 9px; }
  .demo, .demo--sort { height: 40px; }
  .demo-cell { width: 22px; height: 35px; }
  .demo-arrow { height: 35px; width: 11px; }
  #introStart { min-height: 44px; font-size: 12px; }
  .intro-icon { width: 44px; height: 44px; }
  .intro-card__foot .lang-switch { height: 44px; }
  .intro-card__foot .lang-switch button { min-width: 40px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay, .intro-card { transition-duration: .01ms !important; }
}