/* Mind Palace — design system (Phase 0). Color code: green = good, yellow = caution/due, red = overdue/problem. */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/Cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }

:root {
  --bg: #06070b; --panel: #0e1016; --card: #151821; --card2: #1a1e29; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --text: #eef0f6; --muted: #8b92a5; --dim: #5d6476;
  --green: #3ddc6e; --yellow: #f5c542; --red: #ff4f4f; --blue: #4ea3ff; --purple: #a46bff; --gold: #dcb469; --orange: #ff9a3c;
  --r: 16px; --r-sm: 11px;
  --nav-h: 66px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 15px/1.4 Inter, system-ui, sans-serif; color: var(--text); min-height: 100vh;
  background: radial-gradient(1200px 600px at 10% -10%, #1a1440 0%, transparent 60%), radial-gradient(900px 600px at 110% 10%, #3a2a0e55 0%, transparent 60%), var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-sm { width: 16px; height: 16px; }
.muted { color: var(--muted); } .fine { color: var(--dim); font-size: 12px; margin: 10px 2px 0; } .center { text-align: center; }
.t-good { color: var(--green); } .t-warn { color: var(--yellow); } .t-bad { color: var(--red); } .t-blue { color: var(--blue); } .t-purple { color: var(--purple); }
.row { display: flex; align-items: center; } .gap { gap: 10px; } .grow { flex: 1; } .mt { margin-top: 10px; }

/* ---------- Shell ---------- */
.app { max-width: 1480px; margin: 0 auto; padding: 0 12px calc(var(--nav-h) + 24px); }
.top { display: flex; align-items: center; justify-content: center; position: relative; padding: 24px 0 10px; }
@media (min-width: 760px) { .top { padding: 14px 0 12px; } .build-tag { top: 18px; } }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 52px; height: 46px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(220,180,105,.35)); }
.logo path:nth-child(n+5) { stroke: #ff8a7a; }
.brand-txt { display: flex; flex-direction: column; align-items: center; }
.brand-txt b { font: 700 28px/1 Cinzel, serif; letter-spacing: .06em; background: linear-gradient(180deg, #f6dc9c, #c99a45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-txt small { font-size: 14px; color: var(--text); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.sun { width: 18px; height: 18px; color: var(--yellow); }
.build-tag { position: absolute; right: 0; top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); border: 1px solid #f5c54255; padding: 3px 7px; border-radius: 99px; }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; justify-content: space-around; align-items: center; background: rgba(9,10,15,.86); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.nav-i { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 12px; min-width: 64px; }
.nav-i .ic { width: 24px; height: 24px; }
.nav-i.on { color: var(--green); } .nav-i.on .ic { filter: drop-shadow(0 0 6px rgba(61,220,110,.6)); }
.nav-i:nth-child(5) .ic { color: #c08bff; }
.nav-i:nth-child(5).on .ic { color: var(--green); }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 30;
  background: #222634; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; font-size: 14px; transition: .25s; box-shadow: var(--shadow); max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Panels (Fold: two panels side by side, phone: one column) ---------- */
.two-panel { display: grid; gap: 14px; }
.hinge { display: none; }
.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 760px) {
  .app { padding: 0 20px calc(var(--nav-h) + 24px); }
  .two-panel { grid-template-columns: 1fr 10px 1fr; gap: 0; background: linear-gradient(180deg,#0d0f15,#0a0b10); border: 1px solid var(--line2); border-radius: 26px; padding: 18px;
    box-shadow: 0 0 0 6px #15171e, 0 0 0 7px #2b2f3a, var(--shadow); }
  .panel { padding: 4px 14px; }
  .hinge { display: block; width: 2px; justify-self: center; background: linear-gradient(180deg, transparent, #2a2e3a 10%, #2a2e3a 90%, transparent); }
  .nav { left: 50%; transform: translateX(-50%); max-width: 1100px; bottom: 12px; border-radius: 20px; border: 1px solid var(--line2); height: var(--nav-h); }
  .backbar + .two-panel { margin-top: 4px; }
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.panel-head h2 { font-size: 19px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); font-weight: 700; margin-bottom: 2px; }
.link { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.card { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
a.card, button.card { transition: transform .12s, border-color .12s; display: block; }
a.card:hover, button.card:hover { border-color: var(--line2); }
a.card:active, button.card:active { transform: scale(.985); }
.example-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); background: #ffffff0a; border: 1px solid var(--line2); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.example-tag .ic { width: 12px; height: 12px; }
.pill { font-size: 11.5px; font-weight: 650; padding: 4px 9px; border-radius: 99px; white-space: nowrap; border: 1px solid; }
.pill-good { color: var(--green); border-color: #3ddc6e55; background: #3ddc6e14; }
.pill-warn { color: var(--yellow); border-color: #f5c54255; background: #f5c54214; }
.pill-bad { color: var(--red); border-color: #ff4f4f55; background: #ff4f4f14; }
.pill-gold { color: var(--gold); border-color: #dcb46955; background: #dcb46914; }
.pill-blue { color: var(--blue); border-color: #4ea3ff55; background: #4ea3ff14; }
.pill-muted { color: var(--muted); border-color: var(--line2); }
.dotc { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.d-good { background: var(--green); } .d-warn { background: var(--yellow); } .d-bad { background: var(--red); box-shadow: 0 0 6px var(--red); } .d-muted { background: var(--dim); }
.backbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.backbar h1 { font-size: 18px; font-weight: 650; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 13px; font-weight: 700; font-size: 15px; border: 1px solid transparent; transition: .12s; }
.btn:active { transform: scale(.97); }
.btn.sm { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.btn-green { background: linear-gradient(180deg, #34c862, #1f9a45); color: #fff; box-shadow: 0 4px 16px #3ddc6e33, inset 0 1px 0 #ffffff33; }
.btn-yellow { background: linear-gradient(180deg, #ffc93f, #e89f12); color: #2a1d00; box-shadow: 0 4px 16px #f5c54233, inset 0 1px 0 #ffffff55; }
.btn-ghost { background: var(--card); border-color: var(--line2); color: var(--text); }
.wide { width: 100%; margin-top: 10px; }
.roundbtn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #1d2a44; border: 1px solid #2f4470; flex: none; }

/* ---------- Dials ---------- */
.dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dials.two { grid-template-columns: repeat(2, 1fr); max-width: 380px; margin: 0 auto; width: 100%; }
.dial { position: relative; aspect-ratio: 1; width: 100%; max-width: 160px; justify-self: center; container-type: inline-size; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial-track { fill: none; stroke: #232733; stroke-width: 11; stroke-linecap: round; }
.dial-val { fill: none; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); }
.t-good .dial-val { filter: drop-shadow(0 0 6px #3ddc6e88); } .t-warn .dial-val { filter: drop-shadow(0 0 6px #f5c54288); } .t-bad .dial-val { filter: drop-shadow(0 0 6px #ff4f4f88); }
.dial-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 8%; }
.dial-label { font-size: clamp(10px, 10cqi, 14px); color: #d7dbe6; white-space: nowrap; }
.dial-value { font-size: clamp(22px, 27cqi, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.dial-value small { font-size: .5em; font-weight: 600; margin-left: 1px; }
.dial-ic { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); }
.dial-ic .ic { width: 22px; height: 22px; filter: drop-shadow(0 0 4px currentColor); }
@media (min-width: 760px) and (max-width: 1100px) { .two-panel { padding: 14px 8px; } .panel { padding: 4px 10px; } .course { grid-template-columns: 36px 1fr 40px 74px; gap: 8px; } .course-ic { width: 36px; height: 36px; } .ring { width: 40px; height: 40px; } }

/* ---------- GMS timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 4px; background: #11141b; border: 1px solid var(--line); border-radius: 14px; padding: 5px; }
.tl-step { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 8px; border-radius: 10px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.tl-step .ic { width: 15px; height: 15px; }
.tl-done { color: #b9f5cb; } .tl-done .ic { color: var(--green); }
.tl-next, .tl-due { color: var(--yellow); background: #f5c54218; border: 1px solid #f5c54299; box-shadow: 0 0 12px #f5c54233; font-weight: 600; }
.tl-overdue { color: var(--red); background: #ff4f4f18; border: 1px solid #ff4f4f99; font-weight: 600; }
@media (max-width: 420px) { .tl-step { padding: 8px 5px; font-size: 12px; gap: 3px; } .tl-step .ic { width: 13px; height: 13px; } }

/* ---------- Courses ---------- */
.courses { display: flex; flex-direction: column; gap: 8px; }
.course { display: grid !important; grid-template-columns: 40px 1fr 44px 86px; align-items: center; gap: 10px; padding: 10px 12px; }
.course-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.course-ic .ic { width: 28px; height: 28px; }
.hue-red { color: #ff6b4a; background: #ff6b4a14; } .hue-purple { color: #b47bff; background: #a46bff14; } .hue-blue { color: #4ea3ff; background: #4ea3ff14; } .hue-gold { color: var(--gold); background: #dcb46914; }
.course-txt { display: flex; flex-direction: column; min-width: 0; }
.course-txt b { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-txt small, .course-pct small { color: var(--muted); font-size: 12px; }
.course-pct { display: flex; flex-direction: column; align-items: flex-end; }
.course-pct b { font-size: 16px; }
.ring-track { fill: none; stroke: #232733; stroke-width: 5; }
.ring-val { fill: none; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px #3ddc6e88); }

/* ---------- Pomodoro ---------- */
.pomo { display: flex !important; align-items: center; gap: 14px; padding: 10px 14px; }
.tomato { width: 42px; height: 42px; }
.pomo-time { font-size: 34px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pomo-mode { color: var(--muted); flex: 1; }
.pomo-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--green); border: 2px solid var(--green); background: #3ddc6e14; box-shadow: 0 0 14px #3ddc6e44; }

/* ---------- Featured palace / memory compact ---------- */
.mastered { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #d9dde8; } .mastered .ic { color: var(--yellow); width: 16px; height: 16px; }
.palace-hero { padding: 0 !important; overflow: hidden; }
.palace-hero img { display: block; width: 100%; aspect-ratio: 444 / 208; object-fit: cover; }
.mem-compact { display: grid !important; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; align-items: center; padding: 8px; }
.mem-thumb { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 140 / 82; background: #222; }
.mem-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-thumb > span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #000a; padding: 2px 6px; border-radius: 4px; }
.mem-body h3 { font-size: 18px; font-weight: 650; } .mem-body p { font-size: 13px; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid; }
.chip-red { color: #ff8080; border-color: #ff4f4f88; background: #ff4f4f1f; }
.chip-amber { color: #ffc066; border-color: #ff9a3c88; background: #ff9a3c1f; }
.chip-blue { color: #85c2ff; border-color: #4ea3ff88; background: #4ea3ff1f; }
.chip-purple { color: #c9a2ff; border-color: #a46bff88; background: #a46bff1f; }
.chip-green { color: #8af0aa; border-color: #3ddc6e88; background: #3ddc6e1f; }
.chips-lg .chip { font-size: 14px; padding: 6px 12px; }
.walk { display: grid !important; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.bigplay { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--green); border: 3px solid var(--green); box-shadow: 0 0 18px #3ddc6e55, inset 0 0 12px #3ddc6e33; }
.bigplay .ic { width: 26px; height: 26px; margin-left: 3px; }
.walk-txt { display: flex; flex-direction: column; } .walk-txt b { font-weight: 650; } .walk-txt small { color: var(--muted); font-size: 12px; }
.walk-ctrl { display: flex; align-items: center; justify-content: space-around; margin-top: 4px; color: #e8ebf3; }
.walk-ctrl .ic { width: 20px; height: 20px; }
.pausebg { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #262a36; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.cta span { display: flex; flex-direction: column; } .cta b { font-weight: 650; } .cta small { font-size: 12px; opacity: .8; }
.cta .ic { width: 28px; height: 28px; }
.cta-green { background: linear-gradient(180deg, #1c4a2a, #133520); border-color: #3ddc6e66; } .cta-green .ic { color: var(--green); }
.cta-purple { background: linear-gradient(180deg, #3b2468, #2a1a4d); border-color: #a46bff77; } .cta-purple .ic { color: #c9a2ff; }

/* ---------- Palaces ---------- */
.plist { display: flex; flex-direction: column; gap: 8px; }
.pal { display: grid !important; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; text-align: left; width: 100%; }
.pal.sel { border-color: #dcb46988; box-shadow: 0 0 0 1px #dcb46944, 0 0 18px #dcb46922; }
.pal-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #ffffff0a; }
.pal-ic.t-good { color: var(--green); } .pal-ic.t-warn { color: var(--yellow); } .pal-ic.t-muted { color: var(--muted); }
.pal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pal-txt b { font-weight: 650; } .pal-txt small { color: var(--muted); font-size: 12px; }
.pal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .pal-meta small { color: var(--muted); font-size: 11.5px; }
.bar { height: 5px; border-radius: 9px; background: #232733; overflow: hidden; margin-top: 3px; } .bar i { display: block; height: 100%; border-radius: 9px; }
.bg-good { background: var(--green); } .bg-warn { background: var(--yellow); } .bg-muted { background: var(--dim); }
.pal.add { grid-template-columns: 44px 1fr; color: var(--muted); border-style: dashed; } .pal.add .ic { justify-self: center; }
.rules h3 { font-size: 14px; display: flex; gap: 6px; align-items: center; color: var(--gold); margin-bottom: 6px; }
.rules ul { margin: 0; padding-left: 18px; color: #c8ccd8; font-size: 13px; display: grid; gap: 4px; }
.routecard { padding: 10px; }
.route-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.route-head > span:first-child { display: flex; gap: 6px; align-items: center; color: #d6dae5; }
.legend { display: flex; align-items: center; gap: 4px; font-size: 11px; } .legend .dotc { margin: 0 2px 0 6px; }
.routemap { width: 100%; display: block; }
.route-line { fill: none; stroke: #f2c45a; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1 0; }
.node-dot { fill: #2a2112; stroke: #f2c45a; stroke-width: 2.5; }
.node-glow { fill: #f2c45a22; }
.node text { fill: #fff; font: 700 13px Inter, sans-serif; }
.n-good .node-dot { stroke: var(--green); fill: #12301c; } .n-good .node-glow { fill: #3ddc6e2a; }
.n-warn .node-dot { stroke: var(--yellow); fill: #3a2e0c; } .n-warn .node-glow { fill: #f5c54240; }
.n-bad .node-dot { stroke: var(--red); fill: #3a1212; } .n-bad .node-glow { fill: #ff4f4f40; }
.node-glow { transform-box: fill-box; transform-origin: center; }
.node.cur .node-glow { animation: pulse 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 50% { opacity: .35; transform: scale(1.25); } }
.node-lbl { fill: #aab0c0; font: 600 9.5px Inter, sans-serif; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 16px; } .empty .ic { width: 36px; height: 36px; color: var(--gold); }

/* Memory screen (full) */
.mem-screen { padding: 0; overflow: hidden; }
.mem-scene { position: relative; aspect-ratio: 16 / 9; background: #1b1e28; }
.mem-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; color: var(--muted); font-size: 13px;
  background: radial-gradient(circle at 50% 40%, #2a2340, #12131a 70%); }
.scene-ph .ic { width: 40px; height: 40px; color: var(--gold); }
.scene-ph.big span { font: 700 26px Cinzel, serif; color: #e9d6a5; } .scene-ph.big .ic { width: 64px; height: 64px; }
.stop-chip { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(180deg, #3a2a7a, #24185a); border: 1.5px solid var(--gold); padding: 5px 10px; border-radius: 10px; box-shadow: 0 4px 12px #0008; }
.stop-chip .ic { width: 16px; height: 16px; color: var(--gold); }
.status-chip { position: absolute; right: 10px; top: 10px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: #000b; border: 1px solid; }
.s-good { color: var(--green); } .s-warn { color: var(--yellow); } .s-bad { color: var(--red); }
.mem-title { font-size: clamp(30px, 9vw, 44px); font-weight: 900; text-align: center; letter-spacing: .01em; text-transform: uppercase; margin: 12px 12px 8px;
  background: linear-gradient(180deg, #ff6a5a, #d81f1f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #fff3); }
.mem-screen .chips { justify-content: center; padding: 0 12px; }
.mem-def { text-align: center; font-weight: 600; font-size: 16px; padding: 12px 16px 4px; border-top: 1px solid #dcb46933; margin: 12px 16px 0; }
.mem-controls { display: grid; grid-template-columns: 46px 46px 1fr 1fr 46px; gap: 8px; align-items: center; padding: 14px; }
@media (max-width: 460px) {
  .mem-controls { grid-template-columns: 46px 1fr 1fr 46px; }
  .mem-controls > :nth-child(2) { display: none; }
  .mem-controls .btn { font-size: 14px; padding: 0 8px; }
}
.stoplist { display: flex; flex-direction: column; gap: 4px; }
.stoprow { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.stoprow.sel { background: #ffffff0d; outline: 1px solid #dcb46955; }
.stoprow b { font-size: 14px; font-weight: 600; } .stoprow small { color: var(--muted); font-size: 12px; display: block; }
.stoprow > small { font-size: 11.5px; }
.num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px Inter; font-style: normal; border: 2px solid; }
.num.n-good { border-color: var(--green); color: var(--green); } .num.n-warn { border-color: var(--yellow); color: var(--yellow); } .num.n-bad { border-color: var(--red); color: var(--red); }

/* ---------- Walkthrough player ---------- */
.player { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.stage { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #0b0c11; }
.frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s, transform 6s linear; transform: scale(1.06); }
.frame.on { opacity: 1; transform: scale(1); }
.paused .frame.on { transition: opacity .6s; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: clamp(24px, 7vw, 40px); font-weight: 900; text-transform: uppercase; background: linear-gradient(0deg, #000d, transparent); }
.kw { position: absolute; left: 12px; right: 12px; bottom: 70px; display: none; flex-wrap: wrap; gap: 6px; }
.kw p { width: 100%; font-weight: 600; text-shadow: 0 1px 4px #000; }
.kw-on .kw { display: flex; }
.count { position: absolute; right: 12px; top: 12px; width: 52px; height: 52px; display: grid; place-items: center; }
.count svg { position: absolute; inset: 0; }
.count .ring-track { stroke: #0009; stroke-width: 5; }
.count-val { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; }
.count b { position: relative; font-size: 20px; text-shadow: 0 1px 3px #000; }
.segs { display: flex; gap: 4px; }
.seg { flex: 1; height: 16px; display: flex; align-items: center; }
.seg i { display: block; height: 5px; width: 0; border-radius: 9px; background: var(--green); box-shadow: 0 0 6px #3ddc6e88; }
.seg { background: linear-gradient(#262a36, #262a36) center / 100% 5px no-repeat; border-radius: 9px; }
.player-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.toggle { display: flex; gap: 6px; align-items: center; } .toggle input { accent-color: var(--green); }
.controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.cbtn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--card2); border: 1px solid var(--line2); }
.cbtn.main { width: 72px; height: 72px; color: var(--green); border: 3px solid var(--green); background: #3ddc6e14; box-shadow: 0 0 22px #3ddc6e55; }
.cbtn.main .ic { width: 30px; height: 30px; }
.paused .cbtn.main .ic { margin-left: 4px; }
.stage { aspect-ratio: 1 / 1; } .frame img { object-position: 40% center; }
@media (min-width: 760px) { .stage { aspect-ratio: 16 / 8; } }

/* ---------- Reviews ---------- */
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sum { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.sum b { font-size: 26px; font-weight: 700; } .sum small { color: var(--muted); font-size: 12px; }
.sum.t-bad { border-color: #ff4f4f55; background: #ff4f4f0d; } .sum.t-warn { border-color: #f5c54255; background: #f5c5420d; } .sum.t-good { border-color: #3ddc6e55; background: #3ddc6e0d; } .sum.t-blue { border-color: #4ea3ff55; background: #4ea3ff0d; }
.duelist { display: flex; flex-direction: column; gap: 8px; }
.due { display: grid !important; grid-template-columns: 4px 1fr auto 16px; gap: 12px; align-items: center; padding: 12px 12px 12px 0; overflow: hidden; }
.bar-l { align-self: stretch; border-radius: 0 4px 4px 0; margin: -12px 0; }
.dl-good .bar-l { background: var(--green); } .dl-warn .bar-l { background: var(--yellow); } .dl-bad .bar-l { background: var(--red); box-shadow: 0 0 10px var(--red); }
.due.dl-bad { border-color: #ff4f4f44; }
.due-txt { display: flex; flex-direction: column; min-width: 0; } .due-txt b { font-weight: 600; } .due-txt small { color: var(--muted); font-size: 12px; }
.due-when { font-size: 13px; font-weight: 650; white-space: nowrap; }
.decks { display: flex; flex-direction: column; gap: 8px; }
.deckc { display: grid !important; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.deck-txt { display: flex; flex-direction: column; } .deck-txt b { font-weight: 600; } .deck-txt small { color: var(--muted); font-size: 12px; }
.sched { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sched li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; position: relative; }
.sched li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: -8px; width: 2px; background: #262a36; }
.sched li > i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dim); display: grid; place-items: center; z-index: 1; background: var(--card); }
.sched li > i .ic { width: 14px; height: 14px; }
.sched b { font-size: 14px; } .sched small { display: block; color: var(--muted); font-size: 12px; } .sched em { font-style: normal; font-size: 12px; color: var(--muted); }
.sc-done > i { border-color: var(--green); background: var(--green); color: #062; } .sc-done em { color: var(--green); }
.sched .next > i, .sc-due > i { border-color: var(--yellow); box-shadow: 0 0 10px #f5c54288; } .sched .next em, .sched .next b { color: var(--yellow); }
.sc-overdue > i { border-color: var(--red); box-shadow: 0 0 10px #ff4f4f88; } .sc-overdue em, .sc-overdue b { color: var(--red); }

.study { display: flex; flex-direction: column; gap: 12px; }
.study-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } .study-meta span { display: flex; gap: 5px; align-items: center; }
.flash { position: relative; height: 290px; perspective: 1200px; width: 100%; }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.3,.7,.2,1); border: 1px solid var(--line2); box-shadow: var(--shadow); padding: 16px; text-align: center; }
.face small { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.face em { font-style: normal; color: var(--muted); font-size: 12.5px; display: flex; gap: 6px; align-items: center; position: absolute; bottom: 16px; }
.front { background: radial-gradient(circle at 50% 30%, #23314f, #141824 70%); }
.back { background: radial-gradient(circle at 50% 30%, #1f3d2a, #121a16 70%); transform: rotateY(180deg); border-color: #3ddc6e55; }
.flash.flipped .front { transform: rotateY(-180deg); } .flash.flipped .back { transform: rotateY(0); }
.num-big { font-size: 110px; font-weight: 800; letter-spacing: .04em; line-height: 1; background: linear-gradient(180deg, #fff, #9fb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word { font-size: 54px; font-weight: 800; color: #eafff0; }
.rule { font-size: 16px; color: var(--gold); font-weight: 650; background: #dcb46914; border: 1px solid #dcb46955; padding: 4px 12px; border-radius: 99px; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; opacity: .35; pointer-events: none; transition: .2s; }
.grades.show { opacity: 1; pointer-events: auto; }
.grade { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 13px; border: 1px solid; font-weight: 700; }
.grade small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.g-red { color: #ff8a8a; border-color: #ff4f4f88; background: #ff4f4f1a; } .g-yellow { color: var(--yellow); border-color: #f5c54288; background: #f5c5421a; }
.g-green { color: var(--green); border-color: #3ddc6e88; background: #3ddc6e1a; } .g-blue { color: #8cc4ff; border-color: #4ea3ff88; background: #4ea3ff1a; }
.cardlist { display: flex; flex-direction: column; gap: 6px; }
.crow { display: grid !important; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; }
.crow-n { font-size: 20px; font-weight: 800; color: #b9c8ff; } .crow b { font-weight: 650; } .crow small { display: block; color: var(--muted); font-size: 12px; }
.crow-act { display: flex; gap: 6px; } .mini { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .mini .ic { width: 18px; height: 18px; }
.ease { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid; }
.e-good { color: var(--green); border-color: #3ddc6e66; } .e-easy { color: var(--blue); border-color: #4ea3ff66; } .e-hard { color: var(--yellow); border-color: #f5c54266; } .e-again { color: var(--red); border-color: #ff4f4f66; }

/* ---------- Recall ---------- */
.recall { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.rdots { display: flex; gap: 6px; flex-wrap: wrap; }
.rd { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px Inter; font-style: normal; border: 2px solid #2c3140; color: var(--muted); }
.rd.ok { border-color: var(--green); color: var(--green); background: #3ddc6e14; } .rd.bad { border-color: var(--red); color: var(--red); background: #ff4f4f14; }
.rd.cur { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 12px #f5c54277; }
.rq { text-align: center; padding: 14px 8px; border-radius: 16px; background: radial-gradient(circle at 50% 0, #2a2346, transparent 70%); }
.rq-loc { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.rq-loc .ic { width: 16px; height: 16px; }
.rq h2 { font: 700 32px Cinzel, serif; margin: 6px 0; color: #f3e3b8; }
.rq p { font-size: 13.5px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field input { height: 50px; border-radius: 13px; border: 1px solid var(--line2); background: #0d0f15; color: var(--text); font: 600 17px Inter; padding: 0 14px; outline: none; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #3ddc6e22; }
.recall-msg { min-height: 20px; text-align: center; font-weight: 600; }
.results { display: flex; flex-direction: column; gap: 6px; }
.res { display: grid !important; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; }
.res.bad { border-color: #ff4f4f55; background: linear-gradient(180deg, #2a1416, #1a1012); }
.res b { font-weight: 600; } .res small { display: block; color: var(--muted); font-size: 12px; } .res u { color: var(--green); text-decoration: none; font-weight: 600; }
.mini-link { font-size: 12.5px; font-weight: 700; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid; font-size: 13.5px; }
.alert .ic { flex: none; margin-top: 1px; }
.a-warn { background: #f5c54212; border-color: #f5c54266; color: #f7e3a6; } .a-warn > .ic { color: var(--yellow); }
.a-bad { background: #ff4f4f12; border-color: #ff4f4f66; color: #ffc4c4; } .a-bad > .ic { color: var(--red); }
.a-warn b, .a-bad b { color: #fff; }

/* ---------- Sensei ---------- */
.goal h2 { font-size: 21px; margin: 2px 0 8px; }
.goal-meta { display: flex; gap: 14px; flex-wrap: wrap; color: #cfd3de; font-size: 13px; } .goal-meta span { display: flex; gap: 5px; align-items: center; }
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; }
.pp { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted); }
.pp.done { color: var(--green); border-color: #3ddc6e55; background: #3ddc6e12; } .pp.cur { color: var(--yellow); border-color: #f5c54299; background: #f5c54218; }
.push > span { display: block; }
.disss { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds { display: grid !important; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px; }
.ds i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 800 15px Inter; font-style: normal; color: #c9a2ff; background: #a46bff1f; border: 1px solid #a46bff55; }
.ds b { font-size: 13.5px; } .ds small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 420px) { .disss { grid-template-columns: 1fr; } }
.method { border-color: #a46bff66; background: linear-gradient(180deg, #221a38, #16141f); display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.method-head { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; }
.method-head b { font-size: 16px; }
.mm-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #ff8a7a; background: linear-gradient(180deg, #3a2a7a, #24185a); border: 1.5px solid var(--gold); }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: #ffffff06; }
.opt b { font-size: 16px; } .opt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.opt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #ffffff0d; }
.opt em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #062; background: var(--green); padding: 2px 6px; border-radius: 6px; }
.opt.rec { border-color: var(--green); background: #3ddc6e12; box-shadow: 0 0 18px #3ddc6e33; } .opt.rec .opt-ic { color: var(--green); }
@media (max-width: 520px) {
  .opts { grid-template-columns: 1fr; }
  .opt { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 10px 12px; } .opt small { grid-column: 2; } .opt b { align-self: center; }
  .opt:not(.rec) small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.why { display: flex; gap: 8px; font-size: 13.5px; color: #ddd6f3; } .why .ic { color: #c9a2ff; margin-top: 2px; }
.todo { display: flex; flex-direction: column; gap: 6px; }
.td { display: grid !important; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; font-size: 14px; }
.cb { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--dim); display: grid; place-items: center; }
.td.done .cb { background: var(--green); border-color: var(--green); color: #052; } .td.done > span { color: var(--muted); text-decoration: line-through; }
.cb .ic { width: 14px; height: 14px; }
.tomatoes { color: #ff6b4a; font-size: 11.5px; white-space: nowrap; }
.nextgoal { display: grid !important; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; } .nextgoal .ic { color: var(--blue); }
.nextgoal b { font-size: 14px; } .nextgoal small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- Progress ---------- */
.chart { width: 100%; display: block; } .ax { fill: #c8a640; font: 600 9px Inter; }
.heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.hm { display: block; aspect-ratio: 1; border-radius: 5px; background: #1f232e; }
.hm.l1 { background: #1f5a33; } .hm.l2 { background: #2ea556; } .hm.l3 { background: #3ddc6e; box-shadow: 0 0 6px #3ddc6e66; }
.legend-row { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11px; color: var(--muted); margin-top: 8px; }
.legend-row .hm { width: 12px; }
.bigbar { height: 14px; border-radius: 9px; background: #232733; overflow: hidden; margin-bottom: 8px; }
.bigbar i { display: block; height: 100%; background: linear-gradient(90deg, #1f9a45, #3ddc6e); border-radius: 9px; }
.hide-sm { display: none; }
@media (min-width: 461px) { .hide-sm { display: inline; } }

.why-l { font-size: 12px !important; color: var(--green); }

/* ======================= Phase 1 additions (same design system) ======================= */
.ic-xs { width: 12px; height: 12px; vertical-align: -1px; }
.example-tag.mine { color: var(--green); background: #3ddc6e14; border-color: #3ddc6e66; }
button.pill { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 650; }
.tl-for { font-size: 12px; color: var(--muted); display: block; margin: -4px 2px 0; line-height: 1.5; }
.tl-for .ic { vertical-align: -2px; margin-right: 6px; }
.tl-for b { color: #d6dae5; font-weight: 600; }
.tl-upcoming { color: var(--muted); }
.mastered.st-good .ic { color: var(--yellow); } .mastered.st-warn .ic { color: var(--yellow); } .mastered.st-muted .ic { color: var(--muted); }
.hero-map { padding: 8px; background: #0d0f15; } .hero-map .routemap { max-height: 240px; }
.empty-sm { padding: 16px; text-align: center; font-size: 14px; }
.route-empty { display: flex; gap: 10px; align-items: center; padding: 26px 14px; color: var(--muted); font-size: 13px; justify-content: center; text-align: center; }
.route-empty .ic { color: var(--gold); width: 28px; height: 28px; }
.pal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pal-actions .btn { flex: 1 1 auto; }
.btn[aria-disabled="true"] { opacity: .55; }
.btn.danger { color: #ff8a8a; border-color: #ff4f4f55; }
.stoprow { grid-template-columns: 1fr auto auto; }
.stoprow-main { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; min-width: 0; }
.mv { display: flex; gap: 2px; } .mv button { width: 26px; height: 26px; border-radius: 7px; color: var(--muted); font-size: 10px; background: #ffffff08; }
.mv button:disabled { opacity: .25; }
.res-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.done-card { text-align: center; align-items: center; } .big-score { font-size: 56px; font-weight: 800; }
.chart-empty { padding: 30px 10px; text-align: center; }

/* Sheet (forms) */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: #000a; backdrop-filter: blur(3px); }
.sheet { position: relative; width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #1a1e29, #12141b);
  border: 1px solid var(--line2); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 760px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 22px; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; } .sheet-head h2 { font-size: 18px; }
.sheet-body { padding: 6px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.field textarea { border-radius: 13px; border: 1px solid var(--line2); background: #0d0f15; color: var(--text); font: 500 15px Inter; padding: 10px 14px; outline: none; resize: vertical; }
.field textarea:focus { border-color: var(--green); }
.field .hint { font-size: 11.5px; color: var(--muted); }
.imgpick { display: flex; gap: 12px; align-items: center; }
.imgpv { width: 96px; height: 72px; border-radius: 10px; background: #0d0f15; border: 1px dashed var(--line2); overflow: hidden; flex: none; }
.imgpv img { width: 100%; height: 100%; object-fit: cover; }
.imgbtns { display: flex; flex-direction: column; gap: 6px; }
.checkrow { display: flex; gap: 10px; align-items: center; font-size: 14px; } .checkrow input { width: 20px; height: 20px; accent-color: var(--green); }

/* SRS card with image + phonetics */
.deck-tools { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #cfd3de; cursor: pointer; }
.switch input { display: none; } .switch i { width: 38px; height: 22px; border-radius: 99px; background: #2a2e3a; position: relative; transition: .2s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #aab0c0; transition: .2s; }
.switch input:checked + i { background: #1f9a45; } .switch input:checked + i::after { left: 19px; background: #fff; }
.flash.tall { height: 470px; }
.face { overflow: hidden; }
.face.back { justify-content: flex-start; padding-top: 14px; gap: 8px; }
.card-img { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; flex: 0 0 auto; min-height: 0; border-radius: 14px; overflow: hidden; background: #141824; display: grid; place-items: center; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img.ph { background: radial-gradient(circle at 50% 40%, #24314a, #141824 70%); color: var(--muted); padding: 14px; gap: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card-img.ph .ic { width: 34px; height: 34px; color: var(--gold); } .card-img.ph small { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; max-width: 300px; }
.front.has-img { justify-content: flex-start; padding-top: 14px; } .front.has-img .card-img { max-width: 356px; } .front.has-img .num-big { font-size: 80px; }
.word { font-size: 46px; line-height: 1.05; }
.q-big { font-size: 34px; font-weight: 750; color: #eef2ff; padding: 0 10px; }
.phon { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.phon i { font-style: normal; font-size: 16px; font-weight: 750; color: var(--gold); background: #dcb46914; border: 1px solid #dcb46966; padding: 4px 12px; border-radius: 99px; }
.face .hint-line { position: static; font-style: normal; color: var(--muted); font-size: 12px; }
.face em.tap { position: absolute; bottom: 16px; }
.result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; text-align: center; }
.result b { font-size: 48px; } .result.ok b { color: var(--green); } .result.bad b { color: var(--red); }
.sched-box summary { cursor: pointer; font-weight: 600; display: flex; gap: 6px; align-items: center; } .sched-box[open] summary { margin-bottom: 8px; }
.tabs { display: flex; gap: 6px; background: #11141b; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tab { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 4px; border-radius: 9px; color: var(--muted); }
.tab.on { background: #f5c5421a; color: var(--yellow); outline: 1px solid #f5c54277; }
.crow { grid-template-columns: auto 46px 1fr auto; }
.crow:not(:has(.crow-img)) { grid-template-columns: 46px 1fr auto; }
.crow-img { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #e9e9ea; display: grid; place-items: center; }
.crow-img img { width: 100%; height: 100%; object-fit: cover; } .crow-img .ic { color: var(--dim); } .crow-img:not(:has(img)) { background: #1b1f2a; }
.crow-t { min-width: 0; } .crow-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow.chg { border-color: #ff4f4f55; }
.src { font-style: normal; font-weight: 700; } .src-m { color: var(--gold); } .src-p { color: #8cc4ff; }
.mini.ghost { background: #ffffff0a; color: var(--muted); }
.ease.e-new { color: #c9a2ff; border-color: #a46bff66; }

/* Settings */
.modeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg-b { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); }
.seg-b small { color: var(--muted); font-size: 12px; } .seg-b .ic { color: var(--muted); }
.seg-b.on.warn { border-color: var(--yellow); background: #f5c54214; } .seg-b.on.warn .ic { color: var(--yellow); }
.seg-b.on.good { border-color: var(--green); background: #3ddc6e14; } .seg-b.on.good .ic { color: var(--green); }
.stack { display: flex; flex-direction: column; gap: 8px; } .stack .btn { justify-content: flex-start; }
.about ul { margin: 8px 0 0; padding-left: 18px; color: #c8ccd8; font-size: 13px; display: grid; gap: 4px; }

/* ---------- Palace Walk TEMPLATE (#/walk): overview → empty walk → loaded walk → recall; fixed 6 s ---------- */
@media (max-width: 420px) { .nav-i { min-width: 0; padding: 6px 6px; font-size: 11px; } }
.btn-red { background: linear-gradient(180deg, #ff6464, #d63434); color: #fff; box-shadow: 0 4px 16px #ff4f4f33, inset 0 1px 0 #ffffff33; }
kbd { font: 600 11px Inter, sans-serif; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line2); background: #0006; color: var(--muted); }
.btn kbd { color: inherit; border-color: #0003; background: #0001; }
.pw { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 760px) { .pw { max-width: max(640px, min(1000px, calc((100vh - 600px) * 1.78))); } }
/* phase stepper */
.pw-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pw-ph { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--muted); text-align: left; min-width: 0; }
.pw-ph-top { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.pw-ph-top b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1.5px solid currentColor; flex: none; }
.pw-ph-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-ph-top small { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; } .pw-ph-top small em { font-style: normal; }
.pw-ph-bar { height: 4px; border-radius: 9px; background: #262a36; overflow: hidden; } .pw-ph-bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 9px; }
.pw-ph.done { color: var(--green); border-color: #3ddc6e55; }
.pw-ph.cur { color: var(--text); border-color: var(--green); background: #3ddc6e14; box-shadow: 0 0 12px #3ddc6e33; }
.pw[data-state="paused"] .pw-ph.cur, .pw[data-phase="recall"] .pw-ph.cur { border-color: var(--yellow); background: #f5c54214; box-shadow: none; }
.pw[data-state="paused"] .pw-ph.cur .pw-ph-bar i, .pw[data-phase="recall"] .pw-ph.cur .pw-ph-bar i { background: var(--yellow); }
@media (max-width: 520px) { .pw-ph { padding: 7px 7px; } .pw-ph-top { font-size: 11.5px; flex-wrap: wrap; gap: 4px; } .pw-ph-top .ic { display: none; } .pw-ph-top small { margin-left: 0; } }
/* header */
.pw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; }
.pw-head-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.pw-stn.stop-chip { position: static; }
.pw-status { display: inline-flex; align-items: center; gap: 5px; }
.pw-base { display: flex; align-items: baseline; gap: 10px; font: 700 clamp(20px, 5.5vw, 28px)/1.1 Cinzel, serif; color: #f6dc9c; }
.pw-base small { font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pw-name:empty { display: none; } .pw-name .chip { font-size: 14px; padding: 5px 11px; font-weight: 800; }
/* stage: overview camera + eye-level views */
.pw-stage { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.pw-ov { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.5s cubic-bezier(.45,0,.25,1); will-change: transform; }
.pw-ov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-ov-svg, .pw-mini-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pw-path { fill: none; stroke: #fff; stroke-width: 7; stroke-dasharray: 2 18; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 0 4px #000); }
.pw-walked { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #3ddc6eaa); }
.pw-mk-halo { fill: #f5c54233; stroke: #f5c542aa; stroke-width: 3; animation: pwPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pw-mk-dot { fill: #1b1405; stroke: #f5c542; stroke-width: 5; }
.pw-mk text { fill: #ffe39a; font: 800 30px Inter, sans-serif; }
.pw-mk.done .pw-mk-dot, .pw-mk.got .pw-mk-dot { stroke: var(--green); fill: #0d2a16; } .pw-mk.done text, .pw-mk.got text { fill: #9ff5bb; } .pw-mk.done .pw-mk-halo, .pw-mk.got .pw-mk-halo { fill: #3ddc6e22; stroke: #3ddc6e88; animation: none; }
.pw-mk.cur .pw-mk-dot { stroke: var(--green); fill: var(--green); } .pw-mk.cur text { fill: #06210f; } .pw-mk.cur .pw-mk-halo { fill: #3ddc6e44; stroke: var(--green); }
.pw-mk.miss .pw-mk-dot { stroke: var(--red); fill: #3a1212; } .pw-mk.miss text { fill: #ff9a9a; } .pw-mk.miss .pw-mk-halo { fill: #ff4f4f33; stroke: var(--red); animation: none; }
@keyframes pwPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
.pw-here-pin { fill: var(--green); stroke: #06210f; stroke-width: 4; filter: drop-shadow(0 4px 6px #000a); }
.pw-here-tag { fill: #06210fee; stroke: var(--green); stroke-width: 3; } .pw-here-txt { fill: #b8ffd0; font: 800 24px Inter, sans-serif; letter-spacing: 2px; }
.pw:not([data-phase="overview"]) .pw-ov-svg .pw-here { display: none; }
.pw-view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.14); transition: opacity .8s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.pw-view.on { opacity: 1; transform: scale(1); }
/* spotlight (loaded walk only, once inside the station) */
.pw-spot { position: absolute; top: 3%; bottom: 17%; border-radius: 22px; pointer-events: none; opacity: 0; transition: left .7s cubic-bezier(.4,0,.2,1), width .7s cubic-bezier(.4,0,.2,1), opacity .5s;
  box-shadow: 0 0 0 200vmax rgba(4,5,9,.58), 0 0 40px 10px rgba(4,5,9,.55) inset; outline: 2px solid #3ddc6e99; outline-offset: -2px; }
.pw[data-phase="loaded"] .in-station .pw-spot { opacity: 1; }
.pw[data-state="paused"] .pw-spot { outline-color: #f5c542cc; }
/* 6 s ring */
.pw-ring { position: absolute; right: 10px; top: 10px; width: 58px; height: 58px; display: grid; place-items: center; z-index: 3; }
.pw-ring svg { position: absolute; inset: 0; }
.pw-ring .ring-track { stroke: #000a; stroke-width: 5; fill: #0008; }
.pw-ring-val { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px #3ddc6e99); }
.pw[data-state="paused"] .pw-ring-val { stroke: var(--yellow); filter: none; }
.pw-ring b { position: relative; font-size: 21px; font-weight: 800; text-shadow: 0 1px 3px #000; }
.pw[data-phase="recall"] .pw-ring { display: none; }
/* mini-map */
.pw-mini { position: absolute; left: 10px; top: 10px; width: 24%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; z-index: 3; border: 2px solid #ffffffcc; box-shadow: 0 6px 18px #000a;
  opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; background: #000; }
.pw-mini img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.9); }
.pw-mini .pw-path { stroke-width: 14; stroke-dasharray: 3 26; } .pw-mini .pw-walked { stroke-width: 22; }
.pw-mini .pw-mk-halo { display: none; } .pw-mini .pw-mk-dot { stroke-width: 10; } .pw-mini .pw-mk text { font-size: 34px; } .pw-mini .pw-mk { transform-box: fill-box; }
.pw-mini .pw-mk circle.pw-mk-dot { r: 34; } .pw-mini .pw-here { display: none; }
.pw:not([data-phase="overview"]) .pw-mini { opacity: 1; transform: none; }
@media (max-width: 520px) { .pw-mini { width: 34%; left: 7px; top: 7px; border-width: 1.5px; } .pw-ring { width: 46px; height: 46px; right: 8px; top: 8px; } .pw-ring b { font-size: 17px; } }
/* caption bar */
.pw-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px;
  background: linear-gradient(0deg, #06070bf2 0%, #06070bd9 70%, #06070b00 100%); font-size: clamp(14px, 2.1vw, 19px); line-height: 1.3; }
.pw-cap-k { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #f6dc9c; }
.pw-cap.fallacy { padding: 14px 18px 16px; border-top: 3px solid var(--green); background: linear-gradient(0deg, #06070bf7, #06070be6); font-size: clamp(15px, 2.4vw, 22px); }
.pw-cap.fallacy .pw-cap-k { color: #fff; font-size: 1.12em; }
.pw[data-state="paused"] .pw-cap.fallacy { border-top-color: var(--yellow); }
/* recall overlays */
.pw-ask, .pw-mark { position: absolute; left: 0; right: 0; bottom: 64px; display: none; gap: 10px; justify-content: center; z-index: 3; padding: 0 12px; }
.pw-mark .btn { min-width: 130px; }
.pw[data-phase="recall"]:not(.revealed) .pw-ask { display: flex; }
.pw[data-phase="recall"].revealed .pw-mark { display: flex; bottom: auto; top: 50%; transform: translateY(-50%); }
.pw[data-phase="recall"].revealed .pw-mark { top: auto; bottom: clamp(70px, 18%, 120px); transform: none; }
@media (max-width: 520px) { .pw-ask, .pw[data-phase="recall"].revealed .pw-mark { bottom: 76px; } .pw-mark .btn { min-width: 0; flex: 1; height: 42px; } }
/* objects + dots */
.pw-objs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pw-objs:empty { display: none; }
.pw-obj { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); color: var(--muted); font-weight: 600; font-size: 14px; }
.pw-obj.cur { color: var(--text); border-color: #3ddc6e88; background: #3ddc6e14; }
.pw-obj.done { color: var(--green); }
.pw[data-state="paused"] .pw-obj.cur { border-color: #f5c54288; background: #f5c54214; }
.pw-obj-ring { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.pw-obj-ring svg { position: absolute; inset: 0; } .pw-obj-ring .ring-track { stroke-width: 4; } .pw-obj-ring .pw-ring-val { stroke-width: 4; filter: none; }
.pw-obj-ring i { position: relative; font-style: normal; font-size: 12px; font-weight: 800; }
.pw-obj-note { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.pw-dots { display: flex; gap: 6px; justify-content: center; }
.pw-dot { flex: 1; max-width: 90px; height: 30px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); color: var(--muted); }
.pw-dot i { font-style: normal; font-weight: 800; font-size: 13px; }
.pw-dot.done { border-color: #3ddc6e66; color: var(--green); }
.pw-dot.cur { border-color: var(--green); color: var(--text); background: #3ddc6e1f; box-shadow: 0 0 10px #3ddc6e44; }
.pw[data-phase="recall"] .pw-dot.cur, .pw[data-state="paused"] .pw-dot.cur { border-color: var(--yellow); background: #f5c5421f; box-shadow: none; }
.pw-dot.got { border-color: var(--green); background: #3ddc6e33; color: var(--green); }
.pw-dot.miss { border-color: var(--red); background: #ff4f4f33; color: var(--red); }
/* control bar */
.pw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 14px; }
.pw-ctrl { display: flex; align-items: center; gap: 12px; }
.pw-ctrl .cbtn { width: 50px; height: 50px; } .pw-ctrl .cbtn.main { width: 64px; height: 64px; }
.pw[data-state="paused"] .cbtn.main { color: var(--yellow); border-color: var(--yellow); background: #f5c54214; box-shadow: 0 0 18px #f5c54244; }
.pw[data-state="paused"] .cbtn.main .ic, .pw[data-phase="recall"] .cbtn.main .ic { margin-left: 4px; }
.cbtn:disabled { opacity: .35; cursor: not-allowed; }
/* Taps always land on the button itself (never on the icon inside it), no double-tap-zoom delay on phones */
.pw-bar button, .pw-dots button, .pw-phases button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pw-bar button > *, .pw-bar button svg { pointer-events: none; }
.pw-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.pw-speed { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
/* score */
.pw-score[hidden] { display: none; }
.pw-score { display: grid; gap: 12px; padding: 16px; }
.pw-score h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pw-score-body { display: grid; grid-template-columns: minmax(130px, 170px) 1fr; gap: 16px; align-items: center; }
.pw-missed { display: grid; gap: 8px; } .pw-missed b { font-size: 18px; }
.pw-missed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-missed li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #ff4f4f12; border: 1px solid #ff4f4f44; }
.pw-score-act { display: flex; gap: 10px; flex-wrap: wrap; }
.pw.scored .pw-stage, .pw.scored .pw-objs, .pw.scored .pw-head, .pw.scored .pw-ctrl { display: none; }
@media (max-width: 520px) {
  .pw-score-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pw-missed li { text-align: left; }
  .pw-bar { justify-content: center; } .pw-opts { justify-content: center; }
  .pw-keys { display: none; }
  .pw-cap { padding: 8px 10px; } .pw-cap.fallacy { padding: 9px 11px 10px; }
}
/* v2 tuning: bigger stage, compact one-flow caption, readable mini-map */
@media (min-width: 760px) { .pw { max-width: max(680px, min(1060px, calc((100vh - 500px) * 1.78))); } }
.pw-cap { display: block; padding: 10px 16px 12px; background: linear-gradient(0deg, #06070bf0 0%, #06070bcc 75%, #06070b00 100%); }
.pw-cap > span { display: inline; } .pw-cap > span + span { margin-left: 8px; }
.pw-cap-k { display: inline; }
.pw-cap-k .ic { vertical-align: -2px; margin-right: 4px; }
.pw-cap.fallacy { padding: 10px 16px 12px; font-size: clamp(14px, 1.9vw, 19px); background: #06070be6; }
.pw-cap.fallacy .pw-cap-k { font-size: 1.08em; }
.pw-spot { bottom: 14%; }
.pw-mini { width: 26%; }
.pw-mini .pw-mk circle.pw-mk-dot { r: 46; } .pw-mini .pw-mk text { font-size: 48px; } .pw-mini .pw-mk text { transform: translateY(6px); }
.pw-mini .pw-walked { stroke-width: 26; } .pw-mini .pw-path { stroke-width: 16; }
@media (max-width: 520px) { .pw-mini { width: 36%; } .pw-cap, .pw-cap.fallacy { padding: 7px 10px 8px; font-size: 13.5px; } }
@media (min-width: 760px) { .pw { max-width: max(680px, min(1060px, calc((100vh - 600px) * 1.78))); } }
@media (max-width: 520px) { .pw-mini { width: 30%; } }

/* ---------- Palace Walk: Straw-Man-style fallacy overlay (name banner + keyword chips + definition) & voice ---------- */
.pw-screen { position: relative; border-radius: var(--r); overflow: hidden; }
.pw-screen > .pw-stage { border-radius: 0; margin: 0; }
.pw.scored .pw-screen { display: none; }
.pw-cap.fallacy { display: block; padding: 0; background: none; border: 0; text-align: center; pointer-events: none; }
.pw-banner { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: pwPop .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pwPop { from { transform: scale(.82) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.pw-title { display: block; font: 900 clamp(38px, 6.6vw, 78px)/0.95 Impact, 'Arial Black', 'Helvetica Neue', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .015em;
  color: #e3161d; background: linear-gradient(180deg, #ff4b3e 0%, #e3161d 52%, #a50b10 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0; filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 0 #6d0306) drop-shadow(0 8px 10px #000a); padding: 0 .1em; }
.pw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 9px; max-width: 94%; }
.pw-chip { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 11px; font: 900 clamp(12px, 1.55vw, 17px)/1.1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; border: 2px solid #ffffffd0; box-shadow: 0 3px 0 #0006, 0 6px 14px #0005; text-shadow: 0 1px 1px #0007; }
.pw-chip.c-yellow { background: linear-gradient(#ffd84a, #f0a910); color: #2a1a00; text-shadow: none; }
.pw-chip.c-orange { background: linear-gradient(#ff9a3c, #e8620c); }
.pw-chip.c-red { background: linear-gradient(#f0383b, #b8121a); }
.pw-chip.c-grey { background: linear-gradient(#8c96a8, #5c6578); }
.pw-chip.c-blue { background: linear-gradient(#4aa3ff, #1c62d6); }
.pw-chip.c-purple { background: linear-gradient(#a879ff, #6b3ad6); }
.pw-chip.c-green { background: linear-gradient(#4fd67f, #1f9a4c); }
.pw-defl { margin: 2px 0 0; width: 100%; padding: 9px 16px 11px; background: linear-gradient(90deg, #06070b00, #06070bee 12%, #06070bee 88%, #06070b00); color: #fff;
  font: 800 clamp(14px, 1.9vw, 21px)/1.25 system-ui, sans-serif; border-top: 2px solid var(--green); }
.pw[data-state="paused"] .pw-defl { border-top-color: var(--yellow); }
.pw-defl .pw-cap-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* name already in the banner; kept for screen readers/tests */
.pw.outro .pw-spot { opacity: 0 !important; }
.pw.outro .pw-title { animation: pwPulse 1.2s ease-in-out infinite alternate; }
@keyframes pwPulse { to { transform: scale(1.05); } }
/* desktop/tablet: overlay sits on the bottom of the picture, like the sample screen */
@media (min-width: 761px) { .pw-cap.fallacy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-top: 30px; background: linear-gradient(0deg, #06070b99 0%, #06070b55 55%, #06070b00 100%); } }
/* phone: the picture stays clear; the same overlay stacks directly under it */
@media (max-width: 760px) { .pw-cap.fallacy { position: static; padding: 10px 6px 0; background: #0b0d14; }
  .pw-title { font-size: clamp(30px, 10vw, 44px); } .pw-chip { padding: 5px 10px; font-size: 11.5px; } .pw-defl { font-size: 14.5px; padding: 8px 10px 10px; } }
.pw-voice { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line, #ffffff22); background: transparent; color: var(--muted, #9aa3b5); font: 700 13px system-ui, sans-serif; cursor: pointer; }
.pw-voice.on { color: #0b0d14; background: var(--green); border-color: var(--green); }
.pw-voice:disabled { opacity: .45; cursor: not-allowed; }
/* controls sit right under the picture (desktop control bar no longer hides behind the fixed nav) */
.pw > .pw-phases { order: 1; } .pw > .pw-head { order: 2; } .pw > .pw-screen, .pw > .pw-score { order: 3; } .pw > .pw-bar { order: 4; }
.pw > .pw-dots { order: 5; } .pw > .pw-objs { order: 6; } .pw > .pw-keys { order: 7; }
@media (min-width: 761px) { .pw[data-phase="recall"].revealed .pw-mark { top: 14px; bottom: auto; z-index: 5; padding: 0 12% 0 28%; } }
/* ---------- breathing beat between stations/phases + hard freeze on Pause ---------- */
.pw-step { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; opacity: 0; }
.pw-mini .pw-step { stroke-width: 22; }
.pw-step.draw { opacity: 1; animation: pwDraw 1.9s ease-in-out forwards; }
@keyframes pwDraw { to { stroke-dashoffset: 0; } }
.pw-mk.next .pw-mk-halo { fill: #3ddc6e33; stroke: var(--green); animation: pwNext .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes pwNext { to { transform: scale(1.35); } }
.pw-beat { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at center, #06070bd9 0%, #06070bb3 55%, #06070b66 100%); color: #fff; }
.pw.beat .pw-beat { display: flex; animation: pwBeatIn .35s ease-out both; }
@keyframes pwBeatIn { from { opacity: 0; } to { opacity: 1; } }
.pw-beat small { font: 800 12px/1 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.pw-beat b { font: 900 clamp(20px, 3.4vw, 36px)/1.1 system-ui, sans-serif; } .pw-beat span { font: 600 clamp(13px, 1.6vw, 17px)/1.3 system-ui, sans-serif; color: #c9d1e0; }
.pw.beat .pw-mini { z-index: 5; }               /* the mini-map stays visible above the beat card, path drawing */
.pw.beat .pw-cap.fallacy { opacity: .25; } .pw.beat .pw-spot { opacity: 0 !important; }
/* Pause freezes every animation (path draw, pulses, banner pop) — nothing moves until Play */
.pw.frozen *, .pw.frozen *::before, .pw.frozen *::after { animation-play-state: paused !important; }
.pw.frozen .pw-beat small { color: var(--yellow); }
/* ---------- Station timing (QC W4, CEO 2026-10-18): story first (blue "listening" ring), then a 6 s silent hold (green countdown) ---------- */
.pw-ring-ic { position: relative; display: none; color: var(--blue); line-height: 0; }
.pw-ring .pw-ring-ic svg.ic { position: static; inset: auto; width: 20px; height: 20px; display: block; }
.pw.listening .pw-ring-ic { display: grid; place-items: center; } .pw.listening .pw-ring b { display: none; }
.pw.listening:not([data-state="paused"]) .pw-ring .pw-ring-val { stroke: var(--blue); filter: drop-shadow(0 0 4px #4ea3ff99); }
.pw.listening:not([data-state="paused"]) .pw-obj.cur .pw-ring-val { stroke: var(--blue); }
.pw[data-state="paused"] .pw-ring-ic { color: var(--yellow); }
.pw.hold .pw-spot { opacity: 0 !important; }        /* hold: the whole loaded image, nothing moving, nothing spoken */
/* ---------- Phone: Palace Walk fits one screen (QC M1). No brand header / bottom nav during the walk (Back bar still exits). ---------- */
@media (max-width: 760px) {
  body[data-screen="walk"] .top, body[data-screen="walk"] #nav { display: none; }
  body[data-screen="walk"] .app { padding-bottom: calc(12px + env(safe-area-inset-bottom)); padding-top: env(safe-area-inset-top); }
  body[data-screen="walk"] .main > .backbar { margin: 8px 0 6px; }
  .pw { gap: 6px; }
  .pw-ph { padding: 5px 6px; gap: 4px; } .pw-ph-top { flex-wrap: nowrap; font-size: 11px; } .pw-ph-top small { display: none; } .pw-ph-top b { width: 17px; height: 17px; font-size: 10px; }
  .pw-head { padding: 6px 10px; gap: 2px 10px; flex-wrap: nowrap; }
  .pw-head-top { width: auto; order: 2; margin-left: auto; flex-direction: column; align-items: flex-end; gap: 3px; }
  .pw-head .pw-stn { font-size: 11px; padding: 3px 8px; } .pw-head .pw-status { font-size: 11px; padding: 2px 8px; }
  .pw-base { order: 1; flex-direction: column; gap: 2px; font-size: clamp(18px, 5.4vw, 24px); min-width: 0; } .pw-base small { font-size: 10px; }
  .pw-name { display: none; }                        /* name is already the big banner under the picture */
  .pw-cap.fallacy { padding: 6px 4px 0; } .pw-banner { gap: 5px; }
  .pw-title { font-size: clamp(26px, 8.4vw, 36px); } .pw-chips { gap: 5px 6px; } .pw-chip { padding: 4px 8px; font-size: 10.5px; border-width: 1.5px; }
  .pw-defl { font-size: 13.5px; padding: 6px 8px 7px; }
  .pw-bar { padding: 6px 10px; gap: 6px 10px; flex-wrap: nowrap; justify-content: space-between; }
  .pw-ctrl { gap: 8px; } .pw-ctrl .cbtn { width: 44px; height: 44px; } .pw-ctrl .cbtn.main { width: 56px; height: 56px; }
  .pw-speed { display: none; }                       /* the fixed 6 s rule is shown in the header pill */
  .pw-dots .pw-dot { height: 26px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .pw-title { font-size: 26px; } .pw-chip { padding: 3px 7px; font-size: 10px; } .pw-defl { font-size: 13px; padding: 5px 8px 6px; }
}
@media (max-width: 420px) { .pw-ph-top { font-size: 10px; gap: 3px; } .pw-ph { padding: 5px 5px; } }
.pw-ph-s { display: none; }
@media (max-width: 420px) { .pw-ph-l { display: none; } .pw-ph-s { display: inline; white-space: nowrap; } }