/* ================= Mind Reader ================= */
.mr [hidden] { display: none !important; }
.mr { padding-top: 1.2rem; }
.mr-head { margin: 0 0 1.3rem; }
.mr-head .page-lede { max-width: 44rem; }
.mr > *, .game > *, .stage-grid > *, .lower > *, .board-row > * { min-width: 0; }

/* ---------- the three movements ---------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1.6rem; max-width: 760px; }
.mode {
  display: grid; gap: 0.1rem; text-align: left; padding: 0.7rem 1rem 0.75rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(18, 7, 9, 0.45); color: var(--text-faint);
  transition: border-color 160ms, background 160ms, color 160ms;
}
.mode em { font: italic 400 1.75rem/1 var(--serif); color: var(--text-dim); }
.mode span { font-size: 0.82rem; }
.mode:hover { border-color: var(--line-strong); color: var(--text-dim); }
.mode[aria-selected="true"] {
  border-color: var(--brass); color: var(--text);
  background: linear-gradient(180deg, rgba(212, 162, 76, 0.16), rgba(212, 162, 76, 0.04));
  box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.25), 0 18px 40px -24px rgba(242, 203, 126, 0.45);
}
.mode[aria-selected="true"] em { color: var(--brass-hi); }

/* ---------- category picker ---------- */
.setup-lede { margin: 0 0 1.1rem; color: var(--text-dim); font: italic 1.45rem/1.3 var(--serif); max-width: 40rem; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem; }
.cat {
  position: relative; display: grid; gap: 0.2rem; align-content: start; text-align: left; min-height: 150px; overflow: hidden;
  padding: 1rem 1.1rem; border-radius: 14px; cursor: pointer; color: var(--text-dim);
  border: 1px solid var(--line); background: linear-gradient(180deg, #1D0B12, var(--ebony));
  transition: transform 200ms cubic-bezier(0.3, 0.7, 0.3, 1), border-color 200ms, box-shadow 200ms;
}
.cat em { font: italic 400 1.75rem/1.05 var(--serif); color: var(--text); position: relative; z-index: 1; }
.cat-hook { font-size: 0.88rem; position: relative; z-index: 1; }
.cat-count { margin-top: auto; padding-top: 1.6rem; font-size: 0.8rem; color: var(--brass-hi); position: relative; z-index: 1; }
.cat-glyph { position: absolute; right: -4px; bottom: -2px; width: 56%; max-height: 46%; opacity: 0.55; fill: var(--brass); transition: opacity 200ms; }
.cat:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--brass); box-shadow: 0 20px 40px -24px rgba(242, 203, 126, 0.5); }
.cat:hover:not(:disabled) .cat-glyph { opacity: 0.9; }
.cat:disabled { cursor: default; opacity: 0.45; }
.cat:disabled .cat-count { color: var(--text-faint); }

/* ---------- stage: the question card next to the field ---------- */
.game { display: grid; gap: 1.4rem; scroll-margin-top: 1rem; }
.stage-grid { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.asker {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.25rem 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg, #1D0B12, var(--ebony)); box-shadow: inset 0 0 0 1px var(--line);
}
.asker-body { display: grid; gap: 0.9rem; align-content: start; flex: 1; }
.asker-kicker { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-dim); }
.asker-kicker span { color: var(--text-faint); }
.asker-kicker .linkish { margin-left: auto; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-faint); font-size: 0.82rem; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.linkish:hover { color: var(--brass-hi); text-decoration-color: var(--brass); }
.question { margin: 0; font: italic 400 clamp(1.9rem, 3vw, 2.5rem)/1.08 var(--serif); color: var(--ivory); text-wrap: balance; }
.question.thinking { color: var(--text-faint); }
.guess-kicker { margin: 0; color: var(--brass-hi); font-size: 0.9rem; }
.guess-name { font-size: clamp(2.6rem, 4.5vw, 3.4rem); color: var(--brass-hi); text-shadow: 0 0 34px rgba(242, 203, 126, 0.35); }

.answers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.answers.two { grid-template-columns: 1.4fr 1fr; }
.ans {
  display: grid; justify-items: center; align-content: space-between; gap: 0.4rem; min-height: 78px; padding: 0.65rem 0.25rem 0.45rem;
  border: 0; border-radius: 0 0 10px 10px; cursor: pointer; color: var(--ink); touch-action: manipulation;
  background: linear-gradient(180deg, #E9DFCD, var(--ivory) 16%, var(--ivory-shade));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14), 0 3px 0 #000, 0 6px 10px rgba(0, 0, 0, 0.45);
  transition: transform 80ms, background 120ms, box-shadow 120ms;
}
.ans b { font: 400 1.12rem/1.05 var(--serif); text-align: center; }
.ans kbd { font: 500 0.68rem/1 var(--sans); color: var(--ink-soft); border: 1px solid rgba(42, 24, 18, 0.25); border-radius: 4px; padding: 0.12rem 0.32rem; }
.ans:hover { background: linear-gradient(180deg, #F2E8D6, #FFF8EA 16%, var(--ivory)); }
.ans:active, .ans.hit { transform: translateY(3px); background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 18px rgba(242, 203, 126, 0.5); }
.ans.yes { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, var(--brass-deep)); }
.ans.yes:hover { background: linear-gradient(180deg, #FFE2A6, var(--brass-hi)); }
.answers.two .ans b { font-size: 1.35rem; }
.why { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.why b { color: var(--text); font-weight: 600; }
.cf { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cf p { margin: 0; display: grid; gap: 0.05rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(241, 233, 218, 0.05); border: 1px solid var(--line); font-size: 0.8rem; color: var(--text-faint); }
.cf p span { font-size: 0.76rem; }
.cf b { font: italic 400 1.35rem/1.1 var(--serif); color: var(--ivory); overflow-wrap: anywhere; }
.weighing { margin: 0; display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.92rem; }
.weighing i { width: 10px; height: 10px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 14px var(--brass-hi); animation: breathe 0.9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(0.6); opacity: 0.5; } to { transform: scale(1.1); opacity: 1; } }

.notice { display: grid; gap: 0.55rem; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid rgba(212, 162, 76, 0.55); background: rgba(212, 162, 76, 0.08); font-size: 0.88rem; color: var(--text-dim); }
.notice p { margin: 0; }
.notice b { color: var(--brass-hi); font-weight: 600; }
.notice.error { border-color: rgba(242, 144, 127, 0.6); background: rgba(242, 144, 127, 0.08); }
.notice.error p { color: var(--danger); }
.notice .ghost { justify-self: start; }
.fix { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; }
.fix span { color: var(--text); font-size: 0.86rem; }
.fix select, .transcript select { width: auto; padding: 0.3rem 2rem 0.3rem 0.6rem; font-size: 0.84rem; border-radius: 8px; }

.hint-row { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.hint-row[hidden] { display: none; }
.hint-row .field-label { font-weight: 400; font-size: 0.8rem; color: var(--text-faint); }
.hint-input { display: flex; gap: 0.45rem; }
.hint-input input { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; font-size: 0.9rem; }
.hint-input .ghost { flex: none; }
.tell-form { display: flex; gap: 0.45rem; }
.tell-form input { flex: 1; min-width: 0; }

/* ---------- the thought field ---------- */
.field-wrap {
  position: relative; min-height: clamp(440px, 64vh, 660px); border-radius: 14px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(58, 24, 36, 0.55), transparent 75%),
    linear-gradient(180deg, #1A0A10 0%, #12070B 70%, #0D0507 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.field-host, .field { position: absolute; inset: 0; }
.field-canvas { display: block; touch-action: manipulation; }
.field-canvas:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; border-radius: 14px; }
.meter {
  position: absolute; top: 0.9rem; left: 1rem; z-index: 2; pointer-events: none; display: grid; gap: 0.05rem;
  text-shadow: 0 2px 12px rgba(13, 5, 7, 0.9);
}
.meter-label { font-size: 0.8rem; color: var(--text-faint); }
.meter-n { display: flex; align-items: baseline; gap: 0.45rem; }
.meter-n b { font: italic 400 3.1rem/0.95 var(--serif); color: var(--brass-hi); transition: color 300ms; }
.meter-n small { font-size: 0.82rem; color: var(--text-dim); }
.meter-bits { font-size: 0.8rem; color: var(--signal); }

.lens {
  position: absolute; z-index: 4; width: min(300px, calc(100% - 16px)); padding: 0.8rem 0.9rem 0.7rem; border-radius: 12px; pointer-events: none;
  background: rgba(22, 9, 14, 0.94); border: 1px solid var(--line-strong); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.lens[hidden] { display: none; }
.lens-name { margin: 0; font: italic 400 1.7rem/1.05 var(--serif); color: var(--brass-hi); }
.lens-p { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; color: var(--text-dim); }
.lens-more { margin: 0.35rem 0 0; font-size: 0.76rem; color: var(--text-faint); }
.sparkline { display: block; margin: 0.1rem 0 0.35rem; overflow: visible; }
.sl-line { fill: none; stroke: var(--brass-hi); stroke-width: 1.6; stroke-linejoin: round; }
.sl-area { fill: rgba(242, 203, 126, 0.12); }
.sparkline circle { fill: var(--brass-hi); }
.lens-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.lens-qs li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; font-size: 0.78rem; line-height: 1.25; color: var(--text); }
.lens-qs li em { grid-column: 1; font-style: normal; color: var(--text-faint); font-size: 0.72rem; }
.lens-qs li b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1rem; }
.lens-qs li.ok b { color: var(--brass-hi); }
.lens-qs li.no b, .lens-qs li.no em { color: var(--danger); }
.lens-qs li.meh b { color: var(--text-faint); }

/* the reveal */
.reveal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; background: radial-gradient(60% 60% at 50% 50%, rgba(13, 5, 7, 0.1), rgba(13, 5, 7, 0.55)); }
.reveal[hidden] { display: none; }
.reveal-card {
  width: min(420px, 100%); text-align: center; padding: 1.4rem 1.4rem 1.3rem; border-radius: 16px; color: var(--ink);
  background: linear-gradient(160deg, #F7D894 0%, var(--brass-hi) 30%, var(--brass) 75%, var(--brass-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 200, 0.5) inset, 0 0 80px rgba(242, 203, 126, 0.45), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  animation: rise 700ms cubic-bezier(0.2, 0.9, 0.2, 1.1);
}
@keyframes rise { from { transform: translateY(18px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.reveal-kicker { margin: 0; font-size: 0.86rem; color: rgba(42, 24, 18, 0.75); }
.reveal-name { margin: 0.15rem 0 0.3rem; font: italic 400 clamp(2.8rem, 6vw, 4rem)/1 var(--serif); color: var(--ebony); overflow-wrap: anywhere; }
.reveal-line { margin: 0 0 1rem; font-size: 0.95rem; }
.reveal-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; }
.reveal-card .primary { background: var(--ebony); color: var(--brass-hi); }
.reveal-card .primary:hover { background: #2A1218; }
.reveal-card .ghost { border-color: rgba(42, 24, 18, 0.45); color: var(--ink); }
.reveal-card .ghost:hover { border-color: var(--ink); color: var(--ebony); }

/* replay */
.replay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(18, 7, 9, 0.6); border: 1px solid var(--line); }
.replay[hidden] { display: none; }
.replay-label { grid-column: 1 / -1; font: italic 1.15rem/1.3 var(--serif); color: var(--text-dim); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(241, 233, 218, 0.14); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 12px rgba(242, 203, 126, 0.6); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--brass-hi); cursor: pointer; }
input[type="range"]:focus { box-shadow: none; }

/* ---------- leaderboard and chart ---------- */
.board-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 1.1rem; align-items: stretch; }
.board, .chart-card, .transcript-card {
  padding: 1rem 1.1rem 1.1rem; border-radius: 14px; background: linear-gradient(180deg, #1A0B10, var(--ebony)); box-shadow: inset 0 0 0 1px var(--line);
}
.board .register-name, .chart-card .register-name, .transcript-card .register-name, .sk-keys-col .register-name { margin: 0 0 0.8rem; color: var(--text); font-size: 1.35rem; }
.board-keys .key-body { height: 150px; }
.board-keys .key-name { font-size: 0.78rem; }
.board-keys .key-pct { font-size: 1rem; }
.delta { justify-self: center; font-size: 0.72rem; line-height: 1; min-height: 0.8rem; }
.delta.up { color: var(--brass-hi); }
.delta.down { color: var(--danger); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-y, .ch-x { fill: var(--text-faint); font: 10px var(--sans); }
.ch-y { text-anchor: end; }
.ch-x { text-anchor: middle; }
.ch-series path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-series.clef path { stroke: var(--brass-hi); }
.ch-series.clef circle { fill: var(--brass-hi); }
.ch-series.matrix path { stroke: var(--signal); stroke-dasharray: 4 4; opacity: 0.8; }
.ch-series.matrix circle { fill: var(--signal); opacity: 0.8; }
.ch-marker { stroke: rgba(241, 233, 218, 0.3); stroke-dasharray: 2 3; }
.ch-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-dim); }
.ch-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 0.4rem; vertical-align: middle; }
.ch-legend .clef i { background: var(--brass-hi); }
.ch-legend .matrix i { background: var(--signal); }
.chart-caption { margin: 0.5rem 0 0; font: italic 1.15rem/1.3 var(--serif); color: var(--text-dim); overflow-wrap: anywhere; }

/* ---------- lower row: inspector, transcript, under the hood ---------- */
.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.lower-right { display: grid; gap: 1.1rem; }
.inspector-host .keys.insp-keys .key-body { height: 76px; }
.inspector-host .keys.insp-keys .key-pct { font-size: 0.82rem; bottom: 0.35rem; }
.inspector-host .keys.insp-keys .key-name { font-size: 0.68rem; }
.insp-stops { margin-top: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stops-mini .knob { width: 54px; height: 54px; }
.stops-mini .knob b { font-size: 0.95rem; }
.insp-thumb { width: 84px; height: 84px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.verdict span { color: var(--text-dim); }
.small { font-size: 0.82rem; }

.transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: qa; max-height: 420px; overflow: auto; }
.transcript li { counter-increment: qa; display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.2rem 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.transcript li::before { content: counter(qa); color: var(--text-faint); font: italic 1rem var(--serif); }
.transcript li.muted, .transcript li.hint-item { counter-increment: none; }
.transcript li.muted::before, .transcript li.hint-item::before { content: ""; }
.transcript .tq { color: var(--text); }
.transcript .ta { font-weight: 500; color: var(--brass-hi); text-align: right; }
.transcript .changed { grid-column: 2; font-size: 0.72rem; color: var(--signal); font-style: normal; }

.hood { border-radius: 14px; background: linear-gradient(180deg, #1A0B10, var(--ebony)); box-shadow: inset 0 0 0 1px var(--line); }
.hood summary { cursor: pointer; padding: 1rem 1.1rem; font: italic 1.3rem/1.2 var(--serif); color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hood summary::-webkit-details-marker { display: none; }
.hood summary::after { content: "+"; font-style: normal; color: var(--brass-hi); }
.hood[open] summary::after { content: "−"; }
.hood-body { padding: 0 1.1rem 1.1rem; font-size: 0.88rem; color: var(--text-dim); }
.hood-body > p { margin: 0 0 0.8rem; }
.hood-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.8rem; }
.hood-h { margin: 0 0 0.4rem; color: var(--text); font-weight: 500; font-size: 0.84rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bars li { position: relative; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0.45rem; font-size: 0.8rem; color: var(--text); border-radius: 5px; overflow: hidden; }
.bars li i { position: absolute; inset: 0 auto 0 0; width: var(--w); z-index: -1; border-radius: 5px; }
.bars li { isolation: isolate; }
.bars.clef li i { background: rgba(242, 203, 126, 0.24); }
.bars.matrix li i { background: rgba(158, 194, 255, 0.22); }
.bars li b { font-weight: 500; }
.hood-stat b { color: var(--text); }
.tv-line { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.8rem; margin-bottom: 0.4rem; }
.tv-line .sparkline { margin: 0; }

/* ---------- Sketch ---------- */
.sketch-top { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.seg-btn { border: 0; background: transparent; color: var(--text-dim); padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; font-size: 0.9rem; }
.seg-btn[aria-checked="true"] { background: var(--brass); color: var(--ebony); font-weight: 600; }
.sketch-brief { margin: 0; color: var(--text-dim); font-size: 0.92rem; max-width: 40rem; }
.sketch-brief.error { color: var(--danger); }
.sketch-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.1rem; align-items: start; }
.pad-col { display: grid; gap: 0.7rem; }
.paper {
  position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: crosshair;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.2rem - 1px), rgba(42, 24, 18, 0.12) calc(2.2rem - 1px) 2.2rem), var(--ivory);
  box-shadow: 0 0 0 10px #1A0B10, 0 0 0 11px rgba(212, 162, 76, 0.45), 0 30px 60px -25px rgba(0, 0, 0, 0.8);
  margin: 11px;
}
.paper canvas { position: absolute; inset: 0; touch-action: none; display: block; }
.paper-hint { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none; font: italic 2.2rem var(--serif); color: rgba(42, 24, 18, 0.35); }
.paper-hint[hidden] { display: none; }
.sk-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(243, 235, 220, 0.82); backdrop-filter: blur(2px); z-index: 2; }
.sk-overlay[hidden] { display: none; }
.ov-card { text-align: center; color: var(--ink); display: grid; gap: 0.3rem; justify-items: center; animation: rise 500ms cubic-bezier(0.2, 0.9, 0.2, 1.1); }
.ov-card p { margin: 0; }
.ov-k { font-size: 0.9rem; color: var(--ink-soft); }
.ov-name { font: italic 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--serif); color: var(--ebony); }
.ov-list { list-style: none; padding: 0; margin: 0.5rem 0 0.8rem; display: grid; gap: 0.2rem; min-width: 220px; text-align: left; }
.ov-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; border-bottom: 1px solid rgba(42, 24, 18, 0.15); padding: 0.15rem 0; }
.ov-list li.ok span { color: var(--brass-deep); font-weight: 600; }
.ov-list li.no span { color: #A0473A; }
.tools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 11px 0; }
.tools [hidden] { display: none; }
.prompt-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 0.8rem; margin: 0 11px; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--brass); background: rgba(212, 162, 76, 0.1); position: relative; }
.prompt-card[hidden] { display: none; }
.prompt-text { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.prompt-text span { color: var(--text-dim); }
.prompt-text b { font: italic 400 2.2rem/1 var(--serif); color: var(--brass-hi); }
.timer { grid-row: 1 / span 2; grid-column: 2; width: 54px; height: 54px; transform: rotate(-90deg); }
.timer circle { fill: none; stroke: rgba(241, 233, 218, 0.12); stroke-width: 4; }
.timer .timer-arc { stroke: var(--brass-hi); stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 120ms linear; }
.timer .timer-arc.late { stroke: var(--danger); }
.timer-num { position: absolute; right: 0.9rem; top: 50%; width: 54px; transform: translateY(-50%); text-align: center; font: italic 1.4rem var(--serif); color: var(--text); pointer-events: none; }
.score { font-size: 0.84rem; color: var(--text-dim); }
.sk-right { display: grid; gap: 1.1rem; }
.sk-field-wrap { min-height: clamp(340px, 46vh, 470px); }
.sk-keys-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; align-items: end; padding: 1rem 1.1rem 1.1rem; border-radius: 14px; background: linear-gradient(180deg, #1A0B10, var(--ebony)); box-shadow: inset 0 0 0 1px var(--line); }
.sk-keys .key-body { height: 110px; }
.sk-keys:empty::before { content: "Clef's five strongest guesses appear here."; color: var(--text-faint); font: italic 1.1rem var(--serif); }
.sk-inspector { margin-top: 1.1rem; }

/* ---------- Hide ---------- */
.hide-asker { gap: 0.9rem; }
.hide-asker .asker-kicker { font-size: 0.95rem; color: var(--text); line-height: 1.45; display: block; }
.hide-asker .asker-kicker .linkish { display: block; margin: 0.3rem 0 0; }
.ask-form, .guess-form { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.ask-form input { flex: 1 1 200px; min-width: 0; font-size: 1rem; }
.guess-form input { flex: 1 1 140px; min-width: 0; }
.guess-form { padding-top: 0.9rem; border-top: 1px solid var(--line); margin-top: auto; }
.ask-quality { margin: 0; min-height: 1.4rem; font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.ask-quality b { color: var(--brass-hi); }
.ask-quality .linkish { display: inline; text-align: left; font-size: 0.86rem; color: var(--text-dim); }
.hide-keys .key-body { height: 92px; }
.hide-keys .key-pct { font-size: 1rem; bottom: 0.45rem; }
.qlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; max-height: 300px; overflow: auto; }
.qlog li { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.1rem 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.ql-n { color: var(--text-faint); font: italic 1rem var(--serif); }
.ql-q { color: var(--text); }
.ql-a { font-weight: 500; color: var(--brass-hi); text-align: right; white-space: nowrap; }
.ql-a.no { color: var(--text-dim); }
.ql-a small { font-weight: 400; color: var(--text-faint); }
.ql-score { grid-column: 2 / -1; position: relative; display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: var(--text-faint); }
.ql-score i { display: block; width: 70px; height: 5px; border-radius: 99px; background: rgba(241, 233, 218, 0.1); position: relative; overflow: hidden; flex: none; }
.ql-score i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--signal); border-radius: 99px; }
.ql-score.free { font-style: italic; }
.hide-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .stage-grid, .sketch-grid, .lower, .hide-lower, .board-row { grid-template-columns: 1fr; }
  .stage-grid .field-wrap { order: -1; min-height: 380px; }
}
@media (max-width: 520px) {
  .modes { gap: 0.4rem; }
  .mode { padding: 0.55rem 0.6rem; }
  .mode em { font-size: 1.4rem; }
  .mode span { font-size: 0.7rem; line-height: 1.2; }
  .cats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .cat { min-height: 128px; padding: 0.8rem 0.85rem; }
  .cat em { font-size: 1.4rem; }
  .cat-hook { font-size: 0.78rem; }
  .stage-grid .field-wrap { min-height: 340px; }
  .asker { padding: 1rem 0.9rem; }
  .ans { min-height: 70px; padding: 0.55rem 0.1rem 0.4rem; }
  .ans b { font-size: 0.98rem; }
  .meter-n b { font-size: 2.4rem; }
  .board-keys .key:nth-child(n + 6) { display: none; }
  .board-keys .key-body { height: 110px; }
  .hood-cols { grid-template-columns: 1fr; }
  .sk-field-wrap { min-height: 300px; }
  .prompt-text b { font-size: 1.8rem; }
  .sk-keys-row { grid-template-columns: 1fr; }
  .sk-keys .key-body { height: 90px; }
  .setup-lede { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card, .ov-card, .weighing i { animation: none; }
  .cat, .mode { transition: none; }
}
.ch-series.clefonly path { stroke: var(--ivory); stroke-width: 1.3; opacity: 0.55; }
.ch-series.clefonly circle { fill: var(--ivory); opacity: 0.55; }
.ch-legend .clefonly i { background: var(--ivory); opacity: 0.6; }
.bars.clefonly li i { background: rgba(243, 235, 220, 0.16); }
.hood-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .hood-cols.three { grid-template-columns: 1fr; } }
.alts, .narrow { margin-top: 0.2rem; }
.alts-h { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--text-faint); }
.alts ol, .narrow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.alts li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.28rem 0.5rem; border-radius: 6px; font-size: 0.8rem; color: var(--text-dim); isolation: isolate; overflow: hidden; }
.alts li i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(158, 194, 255, 0.1); z-index: -1; }
.alts li.best { color: var(--text); }
.alts li.best i { background: rgba(242, 203, 126, 0.2); }
.alts li b { font-weight: 500; color: var(--text-faint); }
.alts li.best b { color: var(--brass-hi); }
.narrow { max-height: 300px; overflow: auto; }
.narrow li { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; color: var(--text-dim); }
.narrow li em { font-style: normal; color: var(--brass-hi); margin-left: 0.25rem; }
.narrow li b { font: italic 400 1.2rem/1 var(--serif); color: var(--text); }
.sk-looking { position: absolute; top: 0.6rem; right: 0.7rem; margin: 0; z-index: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(42, 24, 18, 0.85); color: var(--ivory); font-size: 0.76rem; pointer-events: none; }
.sk-looking i { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-hi); animation: breathe 0.7s ease-in-out infinite alternate; }