/* How Networks Work: the level player.
   One level on screen. Story, predict, play, twist, prove, clear.
   Each stage unlocks the next. Touch first, no hover-only meaning. */

.hnw { max-width: 880px; margin: 0 auto; padding: clamp(4.75rem, 8vw, 5.75rem) 1rem 2rem; }
.pix { font-family: 'Press Start 2P', var(--f-mono); font-weight: 400; }

/* World map strip */
.wmap { display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 6px; margin: 0 0 clamp(1.75rem, 5vw, 2.75rem); align-items: stretch; }
.wmap a { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 58px; padding: 8px 9px; border: 1px solid var(--c-border-vis); border-radius: var(--r-sm); text-decoration: none; color: var(--c-text-dim); background: rgba(255,255,255,0.02); transition: border-color 0.15s, transform 0.15s var(--ease); }
.wmap a:hover { border-color: var(--c-lavender); transform: translateY(-1px); }
.wmap a b { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 0.55rem; color: var(--c-text); }
.wmap a span { font-size: 0.74rem; line-height: 1.25; }
.wmap a.clear { border-color: rgba(155,142,196,0.55); background: rgba(155,142,196,0.12); }
.wmap a.clear b::after { content: ' \2605'; color: var(--c-lavender); }
.wmap a[aria-current] { border-color: var(--c-accent); box-shadow: 0 0 18px rgba(232,134,74,0.28); color: var(--c-text); }
.wmap .wnext { border-style: dashed; justify-content: center; text-align: center; min-width: 92px; }
.wmap .wnext span { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.wmap a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Level header */
.lvl-eyebrow { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); margin: 0 0 0.9rem; }
.lvl-eyebrow .pix { font-size: 0.6rem; color: var(--c-accent); letter-spacing: 0.04em; }
.lvl-title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.1rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.lvl-title:focus { outline: none; }
.lvl-mission { font-size: clamp(1rem, 2.6vw, 1.15rem); line-height: 1.6; color: var(--c-text-dim); max-width: 60ch; margin: 0 0 1.5rem; font-weight: 300; }
.lvl-mission b { color: var(--c-text); font-weight: 500; }

/* Stage progress pips */
.pips { display: flex; gap: 6px; margin: 0 0 1.75rem; flex-wrap: wrap; }
.pips span { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--c-border-vis); color: var(--c-text-muted); }
.pips span.on { border-color: var(--c-accent); color: var(--c-text); }
.pips span.done { border-color: rgba(125,212,160,0.5); color: var(--c-green); }
.pips span.free { border: 0; margin-left: auto; padding-right: 0; text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; }
.pips span.free a { color: var(--c-lavender); }

/* Stages */
.stage { position: relative; margin: 0 0 1.25rem; padding: clamp(1.1rem, 3.5vw, 1.75rem); border: 1px solid var(--c-border-vis); border-radius: var(--r-lg); background: var(--c-panel); animation: stageIn 0.45s var(--ease) both; }
.stage[hidden] { display: none; }
.stage, .clear-card { scroll-margin-top: 84px; }
.stage.is-done { border-color: rgba(125,212,160,0.28); }
@keyframes stageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stage-k { display: flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-muted); margin: 0 0 0.6rem; }
.stage-k i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-border-vis); font-size: 0.6rem; color: var(--c-text-dim); }
.stage.is-done .stage-k i { border-color: var(--c-green); color: var(--c-green); }
.stage h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.45rem, 4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.6rem; max-width: 34ch; }
.stage-intro { color: var(--c-text-dim); font-size: 0.97rem; line-height: 1.65; margin: 0 0 1.1rem; max-width: 62ch; font-weight: 300; }
.stage-intro b { color: var(--c-text); font-weight: 500; }
.stage .mt-explain:empty { display: none; }
.stage .mt-explain.ok { border-left-color: var(--c-green); }
.stage .mt-explain .tag { display: inline-block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.4rem; }
.stage .mt-explain.ok .tag { color: var(--c-green); }
.stage .mt-explain.err .tag { color: var(--c-red); }

/* Story strip (the cartoon) */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; color: var(--c-text); margin: 0 0 1.25rem; }
.strip-dots { display: none; }
.cx { width: 100%; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx text { fill: currentColor; stroke: none; font-family: var(--f-sans); }
.cx .dim { stroke: var(--c-border-vis); }
.cx .dash { stroke: var(--c-text-muted); stroke-dasharray: 3 6; }
.cx .a { stroke: var(--c-accent); }
.cx .l { stroke: var(--c-lavender); }
.cx .zone { stroke: var(--c-lavender); stroke-dasharray: 5 5; }
.cx .pk { fill: var(--c-accent); stroke: none; }
.cx .ta { fill: var(--c-accent); }
.cx .la { fill: var(--c-lavender); }
.cx .lab { fill: var(--c-text-muted); font-family: var(--f-mono); letter-spacing: 0.06em; }
.cx .dimt { fill: var(--c-text-dim); }

/* Buttons */
.btn-go { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; background: var(--c-accent); color: #140d26; font: inherit; font-weight: 500; font-size: 0.97rem; cursor: pointer; text-decoration: none; transition: transform 0.15s var(--ease), background 0.15s; }
.btn-go:hover { background: var(--c-accent-hover); transform: translateY(-1px); }
.btn-go[disabled] { opacity: 0.4; cursor: default; transform: none; }
.btn-ghost { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--c-border-vis); background: transparent; color: var(--c-text); font: inherit; font-size: 0.92rem; cursor: pointer; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.btn-ghost:hover { border-color: var(--c-lavender); background: rgba(155,142,196,0.08); }
.btn-ghost[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.btn-ghost[disabled] { opacity: 0.4; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.btn-go:focus-visible, .btn-ghost:focus-visible, .opt:focus-visible, .chip:focus-visible, .term-input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Choice options */
.opts { display: grid; gap: 0.6rem; margin: 0 0 0.25rem; }
.opt { appearance: none; text-align: left; display: flex; gap: 0.85rem; align-items: flex-start; width: 100%; min-height: 54px; padding: 0.85rem 1rem; border: 1px solid var(--c-border-vis); border-radius: var(--r-md); background: rgba(255,255,255,0.025); color: var(--c-text); font: inherit; font-size: 0.97rem; line-height: 1.45; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.opt:hover:not([disabled]) { border-color: var(--c-lavender); transform: translateY(-1px); }
.opt .k { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--c-border-vis); font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-text-dim); }
.opt[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.opt.right { border-color: var(--c-green); background: rgba(125,212,160,0.1); }
.opt.right .k { border-color: var(--c-green); color: var(--c-green); }
.opt.wrong { border-color: rgba(255,107,122,0.6); background: rgba(255,107,122,0.07); }
.opt.wrong .k { border-color: var(--c-red); color: var(--c-red); }
.opt[disabled] { cursor: default; }
.opt small { display: block; margin-top: 0.35rem; color: var(--c-text-dim); font-size: 0.86rem; }

.shake { animation: shake 0.38s ease; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* Scene canvas (each level draws in here) */
.scene { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-md); background: radial-gradient(120% 90% at 50% 0%, rgba(232,134,74,0.08), transparent 60%), rgba(8,6,20,0.55); padding: clamp(0.75rem, 2.5vw, 1.1rem); margin: 0 0 1rem; overflow: hidden; }
.scene svg.net { width: 100%; height: auto; display: block; overflow: visible; }
.net text { font-family: var(--f-sans); fill: var(--c-text); }
.net .lab { font-family: var(--f-mono); fill: var(--c-text-dim); letter-spacing: 0.04em; }
.net .mono { font-family: var(--f-mono); }
.net .wire { stroke: var(--c-border-vis); stroke-width: 2; fill: none; }
.net .wire.lit { stroke: var(--c-accent); }
.net .wire.lav { stroke: var(--c-lavender); }
.net .wire.dead { stroke: rgba(255,107,122,0.55); stroke-dasharray: 5 5; }
.net .node rect, .net .node circle.body { fill: #1d1738; stroke: var(--c-border-vis); stroke-width: 1.5; }
.net .node.me rect, .net .node.me circle.body { stroke: var(--c-accent); }
.net .node.hl rect, .net .node.hl circle.body { stroke: var(--c-lavender); fill: rgba(155,142,196,0.16); }
.net .node.ok rect, .net .node.ok circle.body { stroke: var(--c-green); fill: rgba(125,212,160,0.12); }
.net .node.bad rect, .net .node.bad circle.body { stroke: var(--c-red); fill: rgba(255,107,122,0.1); }
.net .icon { fill: none; stroke: var(--c-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.net .orb { fill: url(#orbGrad); }
.net .bubble rect { fill: #f5f2fa; stroke: none; }
.net .bubble text { fill: #140d26; font-size: 12px; font-weight: 500; }
.net .bubble.no rect { fill: #3a3158; }
.net .bubble.no text { fill: var(--c-text-dim); font-weight: 400; }
.net .ring { fill: none; stroke: var(--c-lavender); stroke-width: 2; }

.readout { font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.6; color: var(--c-text-dim); }
.readout b { color: var(--c-text); font-weight: 400; }
.readout .acc { color: var(--c-accent); }
.readout .lav { color: var(--c-lavender); }
.readout .grn { color: var(--c-green); }
.readout .red { color: var(--c-red); }

.goal { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: var(--r-md); border: 1px dashed rgba(232,134,74,0.55); background: rgba(232,134,74,0.07); margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; }
.goal::before { content: 'GOAL'; flex: none; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: #e8864a; padding-top: 0.3rem; }
.goal.met { border-style: solid; border-color: rgba(125,212,160,0.6); background: rgba(125,212,160,0.08); }
.goal.met::before { content: 'DONE'; color: var(--c-green); }

.chip { appearance: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: var(--r-sm); border: 1px solid var(--c-border-vis); background: rgba(255,255,255,0.03); color: var(--c-text); font: inherit; font-size: 0.9rem; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.chip:hover:not([disabled]) { border-color: var(--c-lavender); }
.chip[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.chip.used { border-color: rgba(125,212,160,0.5); color: var(--c-green); }
.chip[disabled] { opacity: 0.45; cursor: default; }
.chip code, .mono { font-family: var(--f-mono); font-size: 0.82em; }
.chip small { color: var(--c-text-dim); font-size: 0.78rem; }

/* Tables inside scenes */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.78rem; }
.tbl th { text-align: left; font-weight: 400; color: var(--c-text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--c-border-vis); }
.tbl td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--c-border); color: var(--c-text-dim); white-space: nowrap; }
.tbl td.chg { color: var(--c-accent); }
.tbl td.same { color: var(--c-green); }
.tbl tr.new td { animation: rowIn 0.6s var(--ease) both; }
@keyframes rowIn { from { background: rgba(155,142,196,0.3); } to { background: transparent; } }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The terminal */
.term { border-radius: var(--r-md); background: #0b0918; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; margin: 0 0 1rem; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--f-mono); font-size: 0.66rem; color: var(--c-text-muted); letter-spacing: 0.06em; }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3158; display: inline-block; }
.term-bar span { margin-left: 6px; }
.term-out { padding: 0.9rem 1rem 0.4rem; font-family: var(--f-mono); font-size: 0.8rem; line-height: 1.65; color: #d9d3ea; white-space: pre-wrap; word-break: break-word; min-height: 4.5em; max-height: 420px; overflow-y: auto; }
.term-out .p { color: var(--c-green); }
.term-out .c { color: #fff; }
.term-out .dim { color: var(--c-text-muted); }
.term-out mark { background: rgba(232,134,74,0.16); color: #ffd9a8; border-radius: 3px; padding: 0 2px; }
.term-out mark sup { font-size: 0.62rem; color: #e8864a; margin-left: 2px; }
.term-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.8rem; font-family: var(--f-mono); font-size: 0.8rem; }
.term-form label { color: var(--c-green); flex: none; }
.term-input { flex: 1; min-width: 0; min-height: 40px; background: transparent; border: 0; border-bottom: 1px dashed rgba(255,255,255,0.14); color: #fff; font: inherit; padding: 0 0.25rem; }
.term-input::placeholder { color: var(--c-text-muted); }
.tnotes { list-style: none; counter-reset: tn; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; }
.tnotes li { counter-increment: tn; display: flex; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; color: var(--c-text-dim); animation: stageIn 0.4s var(--ease) both; }
.tnotes li::before { content: counter(tn); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(232,134,74,0.18); color: #e8864a; font-family: var(--f-mono); font-size: 0.66rem; margin-top: 1px; }
.tnotes li b { color: var(--c-text); font-weight: 500; }
.cmd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }

/* Nerd tip */
.nerd { position: relative; margin: 1.25rem 0 0; padding: 1rem 1.1rem 1rem 3.3rem; border-radius: var(--r-md); border: 1px solid rgba(80,176,224,0.35); background: rgba(80,176,224,0.06); font-size: 0.9rem; line-height: 1.6; color: var(--c-text-dim); }
.nerd::before { content: '</>'; position: absolute; left: 1rem; top: 1rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-cyan); }
.nerd b { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); margin-bottom: 0.3rem; }
.nerd code { font-family: var(--f-mono); font-size: 0.85em; color: var(--c-text); }

/* Level clear */
.clear-card { text-align: center; padding: clamp(1.75rem, 6vw, 3rem) clamp(1rem, 4vw, 2rem); border-radius: var(--r-xl); border: 2px solid rgba(155,142,196,0.45); background: radial-gradient(90% 120% at 50% 0%, rgba(155,142,196,0.22), transparent 70%), var(--c-panel); overflow: hidden; position: relative; }
.clear-card .pix { display: block; font-size: clamp(0.85rem, 3.4vw, 1.25rem); line-height: 1.6; color: var(--c-text); text-shadow: 3px 3px 0 #000; margin: 0 0 0.4rem; }
.clear-card .stars { font-size: 1.4rem; letter-spacing: 0.4rem; color: var(--c-lavender); margin: 0 0 1rem; }
.clear-card h2 { margin: 0 auto 1rem; }
.can { list-style: none; padding: 0; margin: 0 auto 1.5rem; max-width: 30rem; text-align: left; display: grid; gap: 0.55rem; }
.can li { display: flex; gap: 0.6rem; font-size: 0.97rem; line-height: 1.45; }
.can li::before { content: '\2713'; flex: none; color: var(--c-green); font-weight: 700; }
.clear-card .row { justify-content: center; }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lavender); opacity: 0; animation: spark 1.4s var(--ease) forwards; pointer-events: none; }
@keyframes spark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.3); } }

.deeper { margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.deeper a { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; font-size: 0.93rem; }
.deeper a:hover { color: var(--c-accent); }
.deeper a small { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); min-width: 5.5rem; }

.skip-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.5rem 0 0; flex-wrap: wrap; }
.skip-row button { appearance: none; background: none; border: 0; color: var(--c-text-muted); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.5rem 0; }
.skip-row button:hover { color: var(--c-text); }

/* Teaser for World 2 and World 3 */
.teaser { padding: clamp(1.25rem, 4vw, 2rem); border: 1px dashed var(--c-border-vis); border-radius: var(--r-lg); background: rgba(255,255,255,0.02); }
.teaser p { color: var(--c-text-dim); line-height: 1.65; max-width: 60ch; margin: 0 0 1rem; }

/* All lessons, folded away */
.index { margin: 2.5rem 0 0; }
.index summary { cursor: pointer; list-style: none; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-dim); padding: 0.75rem 0; min-height: 48px; display: flex; align-items: center; gap: 0.3rem; }
.index summary::-webkit-details-marker { display: none; }
.index summary::after { content: ' +'; color: var(--c-text-muted); }
.index[open] summary::after { content: ' \2212'; }
.index summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.index h2 { font-family: var(--f-mono); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin: 1.5rem 0 0.4rem; }
.index h2 span { color: var(--c-text-muted); }
.index ol { list-style: none; margin: 0; padding: 0; }
.index li a { display: flex; gap: 1rem; padding: 0.6rem 0; color: var(--c-text-dim); text-decoration: none; border-bottom: 1px solid var(--c-border); font-size: 0.92rem; }
.index li a:hover, .index li a[aria-current] { color: var(--c-text); }
.index li a b { font-family: var(--f-mono); font-weight: 400; font-size: 0.72rem; color: var(--c-text-muted); min-width: 2.2rem; padding-top: 0.15rem; }
.index li a em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 0.66rem; color: var(--c-text-muted); padding-top: 0.2rem; }
.index li a.clear em { color: var(--c-lavender); }

/* Bottom bar: next level */
.stepper { display: flex; gap: 0.75rem; align-items: center; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--c-border); }
.stepper a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--c-border-vis); border-radius: 999px; color: var(--c-text); text-decoration: none; transition: border-color 0.15s; }
.stepper a:hover { border-color: var(--c-lavender); }
.stepper .prev { width: 48px; flex: none; }
.stepper .next { flex: 1; justify-content: space-between; padding: 0 1.4rem; gap: 1rem; }
.stepper .next small { display: block; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); }
.stepper .next.ready { border-color: var(--c-accent); background: var(--c-accent-soft); }
.stepper a[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.stepper a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (max-width: 700px) {
  .wmap { grid-template-columns: repeat(6, 1fr); }
  .wmap a { min-height: 44px; padding: 6px; align-items: center; justify-content: center; }
  .wmap a span { display: none; }
  .wmap .wnext { grid-column: 1 / -1; min-height: 36px; flex-direction: row; gap: 0.5rem; }
  .wmap .wnext span { display: inline; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -1.1rem 0.6rem; padding: 0 1.1rem; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip .cx { flex: 0 0 84%; scroll-snap-align: center; }
  .strip-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 1.25rem; }
  .strip-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-border-vis); transition: background 0.2s; }
  .strip-dots i.on { background: var(--c-text-dim); }
  .cx text { font-size: 115%; }
  .btn-go { width: 100%; }
  .term-out { font-size: 0.74rem; }
  .tbl { font-size: 0.7rem; }
  .tbl td, .tbl th { padding-left: 0.3rem; padding-right: 0.3rem; }
  .readout.bits { font-size: 0.72rem; word-break: break-all; }
  .stepper { position: sticky; bottom: 0; margin-left: -1rem; margin-right: -1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--c-bg); z-index: 5; }
}
/* Player v2: boss levels, Pro question, "this confused me", swipe hint. */
.wmap a.boss { border-color: rgba(255,107,122,0.45); }
.wmap a.boss b { color: var(--c-red, #ff6b7a); }
.confused-row { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.confused { min-height: 44px; padding: 0.5rem 0.75rem; background: none; border: 0; border-radius: var(--r-sm, 6px); color: var(--c-text-muted, #a89fc0); font: inherit; font-size: 0.78rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2); text-underline-offset: 3px; cursor: pointer; }
.confused:hover { color: var(--c-text, #f5f2fa); }
.confused:disabled { text-decoration: none; cursor: default; color: var(--c-green, #7dd4a0); }
.pro { margin-top: 1.25rem; border: 1px solid rgba(155,142,196,0.4); border-radius: var(--r-md, 12px); background: rgba(155,142,196,0.06); padding: 0 1rem; }
.pro summary { min-height: 48px; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none; }
.pro summary::-webkit-details-marker { display: none; }
.pro summary::before { content: '+'; font-family: var(--f-mono, monospace); color: var(--c-lavender, #9b8ec4); width: 1ch; }
.pro[open] summary::before { content: '‘2'; }
.pro summary b { color: var(--c-lavender, #9b8ec4); font-weight: 600; }
.pro summary span { font-family: var(--f-mono, monospace); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted, #a89fc0); }
.pro[open] { padding-bottom: 1rem; }
.pro-q { font-family: var(--f-serif, Georgia, serif); font-size: 1.15rem; line-height: 1.35; margin: 0.25rem 0 0.9rem; }
.casefile { margin-top: 1rem; padding: 0.9rem 1rem; border: 1px dashed rgba(255,107,122,0.45); border-radius: var(--r-md, 12px); background: rgba(255,107,122,0.05); }
.casefile b { font-family: var(--f-mono, monospace); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-red, #ff6b7a); }
.casefile ol { margin: 0.5rem 0 0 1.1rem; padding: 0; font-size: 0.92rem; line-height: 1.55; }
.casefile ol:empty::before { content: 'Nothing yet. Run a command.'; color: var(--c-text-muted, #a89fc0); margin-left: -1.1rem; }
.strip-dots .swipe { display: none; }

@media (max-width: 700px) {
  .strip-dots { align-items: center; }
  .strip-dots .swipe { display: inline; margin-left: 0.5rem; font-family: var(--f-mono, monospace); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted, #a89fc0); }
  .strip-dots.swiped .swipe { display: none; }
}

/* Phones: the level header gets out of the way so the Story card starts on the first screen. */
@media (max-width: 560px) {
  .hnw { padding-top: 4.4rem; }
  .wmap { display: flex; gap: 5px; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
  .wmap::-webkit-scrollbar { display: none; }
  .wmap a { flex: 1 0 42px; min-height: 44px; }
  .wmap .wnext { flex: 0 0 auto; min-width: 0; grid-column: auto; padding: 6px 8px; }
  .wmap .wnext span { display: none; }
  .lvl-eyebrow { font-size: 0.62rem; margin-bottom: 0.45rem; }
  .lvl-eyebrow .eb-min { display: none; }
  .lvl-title { font-size: 1.95rem; margin-bottom: 0.45rem; }
  .lvl-mission { font-size: 0.97rem; line-height: 1.5; margin-bottom: 0.85rem; }
  .pips { gap: 4px; margin-bottom: 1rem; }
  .pips span { padding: 4px 7px; font-size: 0.56rem; }
  .pips span.free { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .tnotes li, .tbl tr.new td, .shake, .spark { animation: none !important; }
  .opt, .chip, .btn-go, .wmap a { transition: none; }
}

/* Review queue: course warm-up and the Practice page. */
.warmup { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid rgba(155,142,196,0.45); border-radius: var(--r-md, 12px); background: rgba(155,142,196,0.08); }
.warmup-head b { color: var(--c-lavender, #9b8ec4); }
.warmup-head span { color: var(--c-text-dim, #cac4d9); }
.warmup .row { margin-top: 0.75rem; }
.rv-count { font-family: var(--f-mono, monospace); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted, #a89fc0); margin: 0.9rem 0 0.4rem; }
.rv-q { font-family: var(--f-serif, Georgia, serif); font-size: 1.2rem; line-height: 1.35; margin: 0 0 0.8rem; }
.rv-done { margin: 0.75rem 0 0; color: var(--c-text-dim, #cac4d9); }
.rv-done b { color: var(--c-green, #7dd4a0); }
.fine { margin: 2rem 0 0; font-size: 0.76rem; line-height: 1.6; color: var(--c-text-muted, #a89fc0); max-width: 60ch; }

/* Reserve the player's space before the script fills it, so nothing jumps (CLS). */
.wmap:empty { min-height: 58px; }
#stages:empty, #stages:has(> noscript:only-child) { min-height: 70vh; }
@media (max-width: 560px) { .wmap:empty { min-height: 44px; } }