/* Lab Chess — styles. Same game chrome as the other review games (deep navy, gold for the main action, raised
   things on a solid darker bottom edge). Readability floor for a Chromebook at arm's length or a projector: body
   16px+, HUD 18px+, answers 18px+, the prompt 22px+, tap targets 48px+. The match fits a 1366x768 window (about
   1366x650 inside the browser) with no scrolling, below the site header: board in the middle, a player rail each
   side, the question panel at the bottom (it grows to fit a long question; the board shrinks to make room). */
:root {
  --lc-page: #0e1424;
  --lc-panel: #1a2340;
  --lc-raised: #243056;
  --lc-raised-hover: #2d3b69;
  --lc-edge: #0a0f1c;
  --lc-line: #33406a;
  --lc-ink: #f2f5fc;
  --lc-muted: #b4bed8;
  --lc-gold: #ffc53d;
  --lc-gold-edge: #b9820c;
  --lc-gold-ink: #1d1400;
  --lc-good: #3ddc97;
  --lc-good-bg: #10392c;
  --lc-bad: #ff8a8a;
  --lc-bad-bg: #401a22;
  --lc-focus: #7cc4ff;
  --lc-font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lc-mono: 'DM Mono', ui-monospace, monospace;
}

.lc-body { margin: 0; color: var(--lc-ink); background: var(--lc-page); min-height: 100vh; font-size: 16px; line-height: 1.45; }
.lc-app { font-family: var(--lc-font); color: var(--lc-ink); background: var(--lc-page); padding: 20px 16px 40px; }
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }
.lc-app button, .lc-app input, .lc-app select { font: inherit; }
.lc-app button { cursor: pointer; }
.lc-app :where(button, a, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--lc-focus); outline-offset: 3px; }
.lc-app h1, .lc-app h2 { font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.lc-app h1 { font-size: 40px; line-height: 1.1; }
.lc-app h2 { font-size: 26px; }
.lc-app [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lc-app kbd { padding: 0 6px; font: 500 14px/1.4 var(--lc-mono); color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; border-radius: 6px; }
.lc-kicker { margin: 0 0 4px; color: var(--lc-muted); font-family: var(--lc-mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.lc-lede { font-size: 18px; color: var(--lc-muted); margin: 0 0 16px; }
.lc-hint { color: var(--lc-muted); margin: 4px 0 12px; }
.lc-msg { min-height: 1.45em; margin: 10px 0 0; color: var(--lc-gold); font-weight: 600; }
.lc-msg.is-bad { color: var(--lc-bad); }
.lc-card { background: var(--lc-panel); border: 2px solid var(--lc-line); border-radius: 14px; padding: 22px; }
.lc-piece-mini { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }

/* While a match is on screen the game owns the viewport below the site header (--lc-header-top is measured in chess.js). */
body.lc-playing { overflow: hidden; }
body.lc-playing .tlg-footer, body.lc-playing .tlg-skip, body.lc-playing .tlg-overlay { display: none; }

.lc-screen { display: none; max-width: 1180px; margin: 0 auto; }
.lc-screen.is-active { display: block; }

/* ---- buttons ---------------------------------------------------------------------------------- */
.lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  font-weight: 700; font-size: 18px; color: var(--lc-ink); background: var(--lc-raised); box-shadow: 0 3px 0 var(--lc-edge); transition: transform .06s, box-shadow .06s, background .12s; }
.lc-btn:hover:not(:disabled) { background: var(--lc-raised-hover); }
.lc-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--lc-edge); }
.lc-btn:disabled { opacity: .55; cursor: not-allowed; }
.lc-btn-go { color: var(--lc-gold-ink); background: var(--lc-gold); box-shadow: 0 3px 0 var(--lc-gold-edge); }
.lc-btn-go:hover:not(:disabled) { background: #ffd162; }
.lc-btn-quiet { background: transparent; box-shadow: inset 0 0 0 2px var(--lc-line); }
.lc-btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.lc-btn-bad { background: #8f2a35; box-shadow: 0 3px 0 #4d141b; }
.lc-btn-small { min-height: 40px; padding: 0 12px; font-size: 16px; }
.lc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 18px; }

/* ---- title ------------------------------------------------------------------------------------ */
.lc-title-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .lc-title-grid { grid-template-columns: 1fr; } }
.lc-me { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 18px; background: rgba(0, 0, 0, .18); border-radius: 12px; }
.lc-me-av { width: 64px; height: 64px; flex: none; }
.lc-me-av canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.lc-me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lc-me-label { color: var(--lc-muted); font-size: 15px; }
.lc-me-name { font-size: 22px; overflow-wrap: anywhere; }
.lc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .lc-modes { grid-template-columns: 1fr; } }
.lc-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; text-align: left; color: var(--lc-ink);
  background: var(--lc-raised); border: 0; border-radius: 12px; box-shadow: 0 3px 0 var(--lc-edge); min-height: 96px; }
button.lc-mode:hover:not(:disabled) { background: var(--lc-raised-hover); }
.lc-mode-main { grid-column: 1 / -1; background: var(--lc-gold); color: var(--lc-gold-ink); box-shadow: 0 3px 0 var(--lc-gold-edge); }
button.lc-mode-main:hover:not(:disabled) { background: #ffd162; }
.lc-mode-title { font-size: 22px; font-weight: 800; }
.lc-mode-sub { font-size: 16px; opacity: .9; }
.lc-mode-row { display: flex; gap: 8px; margin-top: 6px; }
.lc-mode-row .lc-btn { min-height: 44px; padding: 0 16px; font-size: 16px; }
.lc-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lc-toggle { min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--lc-ink); background: transparent; border: 2px solid var(--lc-line); font-size: 16px; }
.lc-toggle strong { color: var(--lc-gold); }
.lc-how { margin-top: 16px; color: var(--lc-muted); }
.lc-how summary { cursor: pointer; color: var(--lc-ink); font-weight: 700; min-height: 32px; }
.lc-how strong { color: var(--lc-ink); }
.lc-pieces { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.lc-pieces li { display: flex; align-items: center; gap: 10px; }
.lc-pieces li strong { min-width: 60px; }
.lc-pieces [data-piece] { width: 32px; height: 32px; flex: none; }

/* Lab Rating board (rows from games/shared/leaderboard.js; .lb-games is ours). */
.lc-board h2 { margin-bottom: 2px; }
.lc-lb-head { display: grid; grid-template-columns: 44px 1fr 70px 60px; gap: 8px; padding: 0 8px 6px; color: var(--lc-muted); font-size: 14px; border-bottom: 1px solid var(--lc-line); }
.lc-lb-head span:nth-child(n+3) { text-align: right; }
.lc-lb-body { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; min-height: 60px; }
.lc-lb-body .lb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .16); font-size: 16px; }
.lc-lb-body .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-lb-body .lb-pts { display: flex; gap: 8px; font-family: var(--lc-mono); }
.lc-lb-body .lb-rating { min-width: 56px; text-align: right; color: var(--lc-gold); font-weight: 600; }
.lc-lb-body .lb-games { min-width: 44px; text-align: right; color: var(--lc-muted); }
.lc-lb-you { margin: 10px 0 0; color: var(--lc-muted); }

/* ---- setup screens ---------------------------------------------------------------------------- */
.lc-narrow { max-width: 620px; margin: 0 auto; }
.lc-center { text-align: center; }
.lc-center .lc-actions { justify-content: center; }
.lc-field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; font-weight: 600; border: 0; padding: 0; min-width: 0; }
.lc-field select, .lc-field input { min-height: 48px; padding: 0 12px; color: var(--lc-ink); background: var(--lc-page); border: 2px solid var(--lc-line); border-radius: 10px; font-size: 18px; font-weight: 400; }
.lc-choice { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.lc-choice legend { width: 100%; margin-bottom: 6px; }
.lc-choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px; background: var(--lc-raised); border-radius: 10px; font-weight: 600; cursor: pointer; }
.lc-choice input { width: 20px; height: 20px; flex: none; accent-color: var(--lc-gold); }
.lc-rule { grid-column: 1 / -1; }
.lc-rule label { flex: 1 1 260px; font-weight: 400; }
.lc-code-input { font-family: var(--lc-mono); font-size: 32px !important; letter-spacing: .2em; text-transform: uppercase; text-align: center; min-height: 64px !important; }
.lc-code { font-family: var(--lc-mono); color: var(--lc-gold); letter-spacing: .12em; font-size: 34px; }
.lc-big { font-size: 24px; font-weight: 700; margin: 8px 0; }
.lc-spinner { width: 56px; height: 56px; margin: 16px auto; border-radius: 50%; border: 6px solid var(--lc-line); border-top-color: var(--lc-gold); animation: lc-spin 1s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lc-spinner { animation-duration: 3s; } }

/* ---- lobby ------------------------------------------------------------------------------------ */
.lc-lobby { max-width: 900px; margin: 0 auto; }
.lc-lobby-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lc-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 560px) { .lc-seats { grid-template-columns: 1fr; } }
.lc-seat { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 76px; border-radius: 12px; background: rgba(0, 0, 0, .18); border: 2px solid var(--lc-line); }
.lc-seat-av { width: 48px; height: 48px; flex: none; }
.lc-seat-av canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.lc-seat-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lc-seat-name small { display: block; font-weight: 400; color: var(--lc-muted); font-size: 14px; }
.lc-seat-empty { color: var(--lc-muted); font-style: italic; }
.lc-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .lc-settings { grid-template-columns: 1fr; } }

/* ---- match ------------------------------------------------------------------------------------ */
.lc-screen.lc-game { position: fixed; inset: var(--lc-header-top, var(--tlg-header-h, 68px)) 0 0 0; z-index: 50; max-width: none; margin: 0; flex-direction: column; background: #0b1020; }
.lc-screen.lc-game.is-active { display: flex; }
.lc-top { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(240px, 320px); grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 10px 16px; }
.lc-boardwrap { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lc-boardcanvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; border-radius: 6px; box-shadow: 0 8px 0 rgba(0, 0, 0, .35); }
.lc-check { position: absolute; padding: 0 12px; border-radius: 8px; font: 900 24px/1.35 var(--lc-font); letter-spacing: .08em; z-index: 2;
  color: #fff; background: #c42727; box-shadow: 0 3px 0 #6a1010; pointer-events: none; animation: lc-pulse .6s ease-in-out infinite alternate; }
@keyframes lc-pulse { to { opacity: .75; } }
.lc-runbanner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 6px 22px; border-radius: 12px; pointer-events: none; white-space: nowrap;
  font: 900 40px/1.2 var(--lc-font); letter-spacing: .04em; color: var(--lc-gold-ink); background: var(--lc-gold); box-shadow: 0 5px 0 var(--lc-gold-edge); }
.lc-runbanner small { display: block; font: 700 16px/1.3 var(--lc-mono); letter-spacing: .06em; text-align: center; }
.lc-runbanner.is-pop { animation: lc-pop .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.lc-runbanner[data-level="3"], .lc-runbanner[data-level="4"] { background: #ff6b3d; box-shadow: 0 5px 0 #8f2a10; color: #1d0700; }
.lc-runbanner[data-level="5"] { background: #ff3d7f; box-shadow: 0 5px 0 #7a1036; color: #fff; font-size: 48px; }
@keyframes lc-pop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lc-runbanner.is-pop, .lc-check { animation: none; } }

.lc-promo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(8, 12, 24, .7); }
.lc-promo p { margin: 0; font-size: 20px; font-weight: 800; }
.lc-promo-row { display: flex; gap: 10px; }
.lc-promo-row button { width: 80px; height: 80px; border-radius: 12px; border: 0; background: #e4d7b6; box-shadow: 0 4px 0 #8a7a55; display: grid; place-items: center; }
.lc-promo-row button:hover { background: #fff2cf; }

/* Player rails. */
.lc-rail { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 100%; overflow-y: auto; padding: 12px; border-radius: 14px; background: var(--lc-panel); border: 2px solid var(--lc-line); align-self: center; }
.lc-rail.is-mover { border-color: var(--lc-gold); box-shadow: 0 0 0 3px rgba(255, 197, 61, .25); }
.lc-rail-head { display: flex; align-items: center; gap: 10px; }
.lc-rail-av { position: relative; width: 96px; height: 96px; flex: none; }
.lc-rail-av canvas { image-rendering: pixelated; }
.lc-rail-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-tag { align-self: flex-start; padding: 0 8px; border-radius: 6px; font: 700 14px/1.5 var(--lc-mono); letter-spacing: .06em; background: rgba(8, 12, 24, .82); color: var(--lc-ink); border: 1px solid rgba(255, 255, 255, .3); }
.lc-tag.is-you { background: #fff; color: #10172a; border-color: #fff; }
.lc-tag.is-bot { color: var(--lc-muted); }
.lc-rail-name { font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-rail-rating { font: 600 16px var(--lc-mono); color: var(--lc-gold); }
.lc-rail-color { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--lc-muted); }
.lc-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 34px; padding: 2px 6px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.lc-tray .lc-piece-mini { width: 24px; height: 24px; margin-right: -4px; }
.lc-tray-diff { margin-left: 10px; font: 700 18px var(--lc-mono); color: var(--lc-good); }
.lc-rail-status { min-height: 1.5em; font-size: 16px; font-weight: 700; }
.lc-rail-status.is-good { color: var(--lc-good); }
.lc-rail-status.is-bad { color: var(--lc-bad); }
.lc-rail-status.is-wait { color: var(--lc-muted); font-weight: 500; }
.lc-rail-stats { display: flex; gap: 12px; font-size: 15px; color: var(--lc-muted); }
.lc-rail-stats b { color: var(--lc-ink); font-family: var(--lc-mono); }
.lc-hud { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 6px; border-top: 1px solid var(--lc-line); font-size: 15px; color: var(--lc-muted); }
.lc-hud b { display: block; color: var(--lc-ink); font: 700 20px var(--lc-mono); }
.lc-hud .lc-run b { color: var(--lc-gold); }
.lc-rail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-rail-actions .lc-btn { min-height: 40px; padding: 0 12px; font-size: 15px; }
/* Passed over: dizzy stars circle the avatar's head. */
.lc-stars { position: absolute; left: 50%; top: 4px; width: 70px; height: 22px; margin-left: -35px; pointer-events: none; }
.lc-stars span { position: absolute; top: 0; left: 50%; font-size: 18px; color: #ffe066; text-shadow: 0 2px 0 #7a5a00; animation: lc-orbit 1.1s linear infinite; }
.lc-stars span:nth-child(2) { animation-delay: -.37s; }
.lc-stars span:nth-child(3) { animation-delay: -.73s; }
@keyframes lc-orbit { 0% { transform: translateX(-30px) scale(.8); } 50% { transform: translateX(22px) scale(1.15); } 100% { transform: translateX(-30px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .lc-stars span { animation: none; } }
.lc-pass { position: absolute; right: -6px; top: -10px; padding: 0 8px; border-radius: 6px; font: 900 16px/1.5 var(--lc-font); background: #c42727; color: #fff; box-shadow: 0 2px 0 #6a1010; }

.lc-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 40px; background: rgba(8, 12, 24, .9); z-index: 3; }
.lc-intro-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 220px; }
.lc-intro-side canvas { image-rendering: pixelated; }
.lc-intro-side .lc-tag { align-self: center; font-size: 16px; }
.lc-intro-name { font-size: 26px; font-weight: 800; text-align: center; }
.lc-intro-rating { font: 600 20px var(--lc-mono); color: var(--lc-gold); }
.lc-intro-color { font: 700 16px var(--lc-mono); letter-spacing: .1em; color: var(--lc-muted); display: flex; align-items: center; gap: 6px; }
.lc-vs { font: 900 56px var(--lc-font); color: var(--lc-gold); }
.lc-go { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 96px var(--lc-font); color: var(--lc-gold); background: rgba(8, 12, 24, .6); text-shadow: 0 6px 0 var(--lc-gold-edge); }

.lc-results { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 24, .55); padding: 16px; overflow-y: auto; z-index: 4; }
.lc-results-card { width: min(580px, 100%); text-align: center; margin: auto 0; }
.lc-results-card > h2 { font-size: 40px; }
.lc-res-how { font-size: 20px; color: var(--lc-muted); margin: 0 0 12px; }
.lc-res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.lc-res-stats div { padding: 10px 6px; border-radius: 10px; background: rgba(0, 0, 0, .2); }
.lc-res-stats dt { color: var(--lc-muted); font-size: 15px; }
.lc-res-stats dd { margin: 0; font: 700 24px var(--lc-mono); }
.lc-res-reward { font-size: 18px; margin: 14px 0 0; min-height: 1.4em; }
.lc-res-reward strong { color: var(--lc-gold); }
.lc-results .lc-actions { justify-content: center; }

/* Question panel. */
.lc-panel { flex: none; padding: 8px 20px 12px; background: var(--lc-panel); border-top: 3px solid var(--lc-line); min-height: 196px; max-height: 58%; overflow-y: auto; }
/* After the lock: only the right option (and a wrong pick) stay, so the reveal fits in the same height. */
.lc-panel.is-revealed .lc-opt:not(.is-right):not(.is-picked) { display: none; }
.lc-panel.is-revealed .lc-typed { display: none !important; }
.lc-panel.is-revealed .lc-reveal { margin-top: 8px; }
.lc-opt.is-picked:not(.is-right) { background: var(--lc-bad-bg); box-shadow: inset 0 0 0 3px var(--lc-bad); }
.lc-q-meta { display: flex; gap: 14px; align-items: center; min-height: 28px; color: var(--lc-muted); font-family: var(--lc-mono); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.lc-role { padding: 0 10px; border-radius: 6px; font: 800 16px/1.6 var(--lc-font); letter-spacing: .02em; text-transform: none; color: var(--lc-gold-ink); background: var(--lc-gold); }
.lc-role.is-defend { background: #7cc4ff; color: #071a2c; }
.lc-role.is-wait { background: transparent; color: var(--lc-muted); box-shadow: inset 0 0 0 2px var(--lc-line); }
.lc-streak { color: var(--lc-gold); font-weight: 600; }
.lc-afk { color: var(--lc-bad); text-transform: none; letter-spacing: 0; font-family: var(--lc-font); font-weight: 600; font-size: 16px; }
.lc-timer { margin-left: auto; font: 700 24px var(--lc-mono); color: var(--lc-ink); letter-spacing: 0; }
.lc-timer.is-low { color: var(--lc-gold); }
.lc-timebar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 4px 0 6px; }
.lc-timebar span { display: block; height: 100%; width: 100%; background: var(--lc-gold); transform-origin: left; }
.lc-prompt { margin: 0 0 10px; font-size: 23px; font-weight: 600; line-height: 1.3; min-height: 1.3em; max-width: 1200px; }
.lc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; max-width: 1200px; }
.lc-options.is-tf { max-width: 640px; }
.lc-opt { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 14px; text-align: left; font-size: 19px; color: var(--lc-ink); background: var(--lc-raised); border: 0; border-radius: 10px; box-shadow: 0 3px 0 var(--lc-edge); line-height: 1.25; }
.lc-opt:hover:not(:disabled) { background: var(--lc-raised-hover); }
.lc-opt:disabled { cursor: default; }
.lc-opt.is-picked { box-shadow: inset 0 0 0 3px var(--lc-gold), 0 3px 0 var(--lc-edge); }
.lc-opt.is-right { background: var(--lc-good-bg); box-shadow: inset 0 0 0 3px var(--lc-good); }
.lc-opt kbd { flex: none; }
.lc-panel.is-locked .lc-opt:not(.is-picked):not(.is-right), .lc-panel.is-locked .lc-typed { opacity: .55; }
.lc-typed { display: flex; gap: 10px; max-width: 760px; }
.lc-input { flex: 1; min-height: 50px; padding: 0 14px; font-size: 20px; color: var(--lc-ink); background: var(--lc-page); border: 2px solid var(--lc-line); border-radius: 10px; }
.lc-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin-top: 8px; font-size: 19px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 2px solid var(--lc-line); }
.lc-reveal.is-good { background: var(--lc-good-bg); border-color: var(--lc-good); }
.lc-reveal.is-bad { background: var(--lc-bad-bg); border-color: var(--lc-bad); }
.lc-reveal strong { font-weight: 800; }
.lc-reveal .lc-ans { font-weight: 700; color: #fff; }

.lc-dialog { max-width: 460px; padding: 22px; color: var(--lc-ink); background: var(--lc-panel); border: 2px solid var(--lc-line); border-radius: 14px; font-family: var(--lc-font); }
.lc-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.lc-dialog h2 { margin-top: 0; }

/* Short windows (a Chromebook at 1366x768 with the browser bar). */
@media (max-height: 700px) {
  .lc-panel { min-height: 184px; padding: 6px 16px 10px; }
  .lc-prompt { font-size: 21px; margin-bottom: 8px; }
  .lc-opt { min-height: 46px; font-size: 18px; }
  .lc-rail-av { width: 64px; height: 64px; }
  .lc-top { padding: 8px 12px; gap: 12px; }
}
@media (max-width: 1000px) {
  .lc-panel { min-height: 184px; }
  /* Board on top, the two rails side by side under it. */
  .lc-top { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "board board" "them me"; }
  .lc-boardwrap { grid-area: board; }
  #rail-them { grid-area: them; }
  #rail-me { grid-area: me; }
  .lc-rail { align-self: start; max-height: none; padding: 8px 10px; gap: 4px; }
  .lc-rail-av { width: 64px; height: 64px; }
  .lc-hud { grid-template-columns: repeat(2, 1fr); }
  .lc-hud > :nth-child(n+3) { display: none; }   /* Run and Turn rule: room for the board */
}
@media (max-width: 700px) { .lc-options { grid-template-columns: 1fr; } .lc-intro { flex-direction: column; gap: 12px; } }