code/src/stackcraft/web/style.css

:root{color-scheme:dark;--bg:#101218;--panel:#191c24;--line:#2b2e39;--text:#f0f1f6;--muted:#969cab;--accent:#c4f578;--cell-size:29px;--piece-1:#52cbe4;--piece-2:#f5ce62;--piece-3:#af8eea;--piece-4:#8cda82;--piece-5:#f17986;--piece-6:#7099f1;--piece-7:#f4a368}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 45%,#1a1e2b 0,transparent 60%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}button,a,input,summary,#board{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,#board:focus-visible{outline:2px solid var(--accent)}[hidden]{display:none!important}button{transition:background .15s,transform .15s}button:not(:disabled):active{transform:translateY(1px)}.app-shell{max-width:1220px;margin:auto;padding:0 48px}.site-header{display:flex;justify-content:space-between;align-items:center;height:100px;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;color:var(--text);font-size:18px;font-weight:850;letter-spacing:-.6px;text-decoration:none}.wordmark>span:not(.brand-mark){font-weight:400}.wordmark small{font-size:9px;letter-spacing:1px;margin:2px 0 0 11px;border:1px solid #454a3b;color:var(--accent);padding:2px 5px;border-radius:3px}.brand-mark{display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(2,7px);gap:2px;margin-right:13px}.brand-mark i{background:var(--accent);border-radius:1px}.brand-mark i:first-child{grid-column:2}.brand-mark i:nth-child(2){grid-column:1;grid-row:2}.brand-mark i:nth-child(3){grid-column:2;grid-row:2}.brand-mark i:nth-child(4){grid-column:3;grid-row:2}.header-note{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:9px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px #c4f52d22;flex-shrink:0}.intro{display:flex;align-items:center;justify-content:space-between;margin:42px 0 34px}.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:500;margin:0 0 14px}h1{font-size:clamp(27px,3.2vw,39px);line-height:1.18;letter-spacing:-1.6px;margin:0 0 12px;font-weight:650}h1>span{color:var(--accent)}.subtitle{color:var(--muted);margin:0;font-size:14px}.mode-pill{font-family:ui-monospace,monospace;border:1px solid var(--line);padding:8px 12px;border-radius:30px;color:#b6bac7;font-size:10px;letter-spacing:.8px;white-space:nowrap}.mode-pill span{margin:0 7px;color:var(--accent)}.game-layout{display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);gap:32px;align-items:start;max-width:975px;margin:auto}.left-rail,.right-rail{padding-top:32px;display:flex;flex-direction:column;gap:18px}.panel{background:linear-gradient(130deg,#1d2029,#181b22);border:1px solid var(--line);border-radius:12px;padding:21px}.player-name{display:flex;align-items:center;gap:12px}.avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#c4f57810;border:1px solid #c4f57825;color:var(--accent);font-family:ui-monospace,monospace;font-size:10px;font-weight:700;flex-shrink:0}h2{margin:0;font-size:14px;font-weight:600}.player-name p{margin:3px 0 0;font-size:11px;color:var(--muted)}.player-status{margin-top:21px;border-top:1px solid var(--line);padding-top:13px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.stat>span{display:block;font-family:ui-monospace,monospace;letter-spacing:1.4px;font-size:10px;color:var(--muted);margin-bottom:8px}.stat strong{font-weight:500;font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-1px}.primary-stat strong{font-size:42px;line-height:1.1;letter-spacing:-1.5px}.stat-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:21px;padding-top:18px}.stat-row .stat+.stat{padding-left:20px;border-left:1px solid var(--line)}.sequence-panel label{font-size:12px;color:#d0d3dd;display:block;margin:0 0 9px}.seed-controls{display:flex;gap:8px}.seed-controls input{width:100%;min-width:0;background:#11141b;border:1px solid #353946;color:var(--text);padding:9px 12px;border-radius:6px;font-family:ui-monospace,monospace;font-size:13px}.icon-button{width:39px;flex-shrink:0;border:1px solid #3a3e4b;border-radius:6px;background:#252936;font-size:23px;line-height:1}.icon-button:hover{background:#333849}.helper{font-size:11px;line-height:1.7;color:var(--muted);margin:11px 0 0}.board-column{width:calc(var(--cell-size)*10 + 20px)}.board-heading{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.1px;color:var(--muted);height:32px;align-items:flex-start}.board-heading>span:first-child{display:flex;gap:8px;align-items:center;color:#d8dce5}.board-wrap{position:relative;padding:9px;border:1px solid #464957;border-radius:10px;background:#191c25;box-shadow:0 12px 45px #0004,0 0 0 4px #ffffff02}.board{display:grid;grid-template-columns:repeat(10,var(--cell-size));grid-template-rows:repeat(20,var(--cell-size));background:#10131b;border:0;overflow:hidden;touch-action:manipulation;cursor:crosshair}.cell{border-right:1px solid #ffffff06;border-bottom:1px solid #ffffff06;position:relative}.cell.filled:after,.cell.ghost:after{content:"";position:absolute;inset:1px;border-radius:2px;background:var(--piece-color);border:1px solid #ffffff35;box-shadow:inset 0 2px 0 #ffffff25,inset 0 -3px 0 #0002}.cell.ghost:after{background:color-mix(in srgb,var(--piece-color) 16%,transparent);border:1px solid color-mix(in srgb,var(--piece-color) 65%,transparent);box-shadow:inset 0 0 8px #ffffff03}.cell.ghost:before{content:"";position:absolute;inset:9px;background:var(--piece-color);opacity:.55;border-radius:1px}.terminal-overlay{position:absolute;inset:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10131bd9;backdrop-filter:blur(4px);text-align:center;padding:16px}.terminal-overlay h2{font-size:28px;letter-spacing:-1px}.terminal-overlay p{font-size:12px;color:var(--muted);margin:10px 0 25px}.terminal-overlay .eyebrow{color:var(--accent)}.primary-button{background:var(--accent);color:#1c2811;border:0;border-radius:7px;padding:13px 17px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:inset 0 -2px #0001}.primary-button:hover:not(:disabled){background:#d4ffa0}.board-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:39px;font-family:ui-monospace,monospace;font-size:9px;color:var(--muted)}.ghost-key{font-size:8px;letter-spacing:.4px;display:flex;align-items:center;gap:5px;white-space:nowrap}.ghost-key i{width:7px;height:7px;border:1px solid #959cac;display:inline-block;border-radius:1px}.direction-controls{display:flex;gap:8px;margin:0 0 9px}.control-button{border:1px solid #363b49;background:#222631;border-radius:7px;min-height:39px;padding:6px 16px;font-size:18px}.control-button:hover:not(:disabled){background:#303645}.direction-controls>.control-button{flex:1}.direction-controls>.rotate-button{flex:2;display:flex;align-items:center;justify-content:center;gap:9px}.rotate-button span{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1px}.drop-button{width:100%}.drop-button span{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;opacity:.7}.piece-header{display:flex;justify-content:space-between;align-items:start}.piece-name{font-family:ui-monospace,monospace;font-size:11px;color:#d5d9e5}.piece-preview{height:80px;display:flex;align-items:center;justify-content:center}.mini-grid{display:grid;grid-template-columns:repeat(4,22px);grid-template-rows:repeat(2,22px);gap:2px}.mini-cell{border-radius:2px}.mini-cell.filled{background:var(--piece-color);box-shadow:inset 0 2px #ffffff30,inset 0 -3px #0002;border:1px solid #ffffff20}.next-piece{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}.next-piece .eyebrow{margin:0}.next-piece .helper{margin-top:4px;font-size:10px}.small{height:44px;width:75px}.small .mini-grid{grid-template-columns:repeat(4,15px);grid-template-rows:repeat(2,15px);gap:1px}.how-to{padding:12px 7px 4px}.how-to .eyebrow{color:var(--accent);font-size:9px}.how-to h2{font-size:20px;letter-spacing:-.6px}.how-to>p:not(.eyebrow):not(.helper){color:var(--muted);font-size:12px;line-height:1.8;margin:9px 0 17px}.keyboard-help{list-style:none;margin:0;padding:0}.keyboard-help li{display:flex;justify-content:space-between;align-items:center;margin:9px 0;font-size:11px;color:#c4c8d3}kbd{display:inline-block;border:1px solid #363b46;box-shadow:0 2px #08090d;background:#20232c;color:var(--muted);border-radius:4px;min-width:24px;text-align:center;padding:1px 5px;font-family:ui-monospace,monospace;font-size:10px}.replay-tools{padding:20px 7px 0;border-top:1px solid var(--line);margin-top:4px}.replay-tools .eyebrow{font-size:9px;letter-spacing:1px}.secondary-button{width:100%;border:1px solid #373d49;border-radius:7px;background:transparent;padding:10px 15px;font-size:12px;text-align:left}.secondary-button span{margin-right:10px;color:var(--muted)}.secondary-button:hover{background:#242936}.text-button{border:0;background:transparent;padding:10px 0;color:var(--muted);font-size:11px}.text-button:hover{color:var(--accent)}.replay-tools>.text-button{width:100%;text-align:left;margin-top:3px}.text-button span{margin:0 14px}.replay-tools .helper{margin:0}.site-footer{position:relative;margin:43px 0 25px;border-top:1px solid var(--line);padding-top:21px;color:#777f91;font-size:10px;line-height:1.7}.site-footer p{margin:0 0 6px;max-width:770px}.site-footer strong{font-weight:500;color:#b0b7c4}.site-footer details{max-width:790px}.site-footer summary{cursor:pointer;color:#9ba3b4;width:max-content}.site-footer details p{margin:8px 0;color:#989ead}.footer-version{position:absolute;right:0;top:24px;font-size:8px;letter-spacing:1px;font-family:ui-monospace,monospace}.error-banner{border:1px solid #8e414a;border-radius:8px;background:#48212b;color:#ffd4d9;padding:12px 16px;margin-bottom:22px;font-size:13px}.replay-controls{padding:13px}.replay-heading{display:flex;justify-content:space-between;align-items:center}.replay-heading .eyebrow{font-size:8px;letter-spacing:.6px;margin:0}.replay-heading .text-button{font-size:10px}#replay-position{width:100%;accent-color:var(--accent);margin:10px 0 13px}.replay-buttons{display:flex;align-items:center;gap:7px}.replay-buttons .control-button{font-size:12px;min-height:30px;padding:4px 11px}#replay-progress{margin-left:auto;font-family:ui-monospace,monospace;font-size:10px;color:var(--muted)}.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}@media(min-width:1200px){:root{--cell-size:30px}.game-layout{gap:38px}}@media(max-width:980px){.app-shell{padding:0 25px}.game-layout{gap:20px;grid-template-columns:minmax(170px,1fr) auto minmax(150px,1fr)}.panel{padding:16px}.player-name{gap:8px}.player-name h2{font-size:12px}.avatar{width:32px;height:35px}.footer-version{display:none}}@media(max-width:790px){:root{--cell-size:27px}.app-shell{padding:0 22px;max-width:670px}.site-header{height:78px}.header-note{display:none}.intro{margin:30px 0 25px}.mode-pill{font-size:8px;padding:7px 9px}.game-layout{grid-template-columns:1fr auto;gap:22px}.left-rail{grid-column:1;grid-row:1}.board-column{grid-column:2;grid-row:1 / span 2}.right-rail{grid-column:1;grid-row:2;padding-top:0;margin-top:-7px}.how-to{display:none}.replay-tools{padding-top:16px}.piece-preview{height:55px}.next-piece{margin-top:5px;padding-top:12px}.site-footer{margin-top:27px}.player-card{display:none}}@media(max-width:530px){:root{--cell-size:26px}.app-shell{padding:0 16px;max-width:430px}.site-header{height:67px}.wordmark{font-size:17px}.intro{margin:26px 0 23px;display:block}h1{font-size:30px;letter-spacing:-1.2px}.eyebrow{font-size:9px}.subtitle{font-size:12px}.mode-pill{display:inline-block;margin-top:15px}.game-layout{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}.left-rail{display:contents}.stats-panel{order:0;width:100%;padding:13px 18px;display:flex;align-items:center;justify-content:space-between}.primary-stat strong{font-size:27px}.stat>span{font-size:8px;margin-bottom:2px}.stat-row{border-top:0;margin:0;padding:0;width:52%;border-left:1px solid var(--line);padding-left:18px}.stat-row .stat+.stat{padding-left:15px;border-left:0}.stat strong{font-size:25px}.board-column{order:1}.right-rail{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}.piece-panel{padding:14px}.piece-preview{height:43px}.mini-grid{grid-template-columns:repeat(4,18px);grid-template-rows:repeat(2,18px)}.next-piece{gap:6px}.next-piece .helper{display:none}.small{width:65px;height:35px}.replay-tools{border-top:0;margin:0;padding:7px 0}.replay-tools .eyebrow{font-size:8px}.sequence-panel{order:3;width:100%;padding:16px;display:grid;grid-template-columns:1fr 125px;column-gap:12px}.sequence-panel .eyebrow{grid-column:1 / -1}.sequence-panel label{align-self:center;margin:0}.sequence-panel .helper{grid-column:1 / -1;margin-top:8px;font-size:10px}.sequence-panel br{display:none}.board-heading{height:26px}.board-footer{min-height:34px}.site-footer{margin-top:24px;font-size:9px}.terminal-overlay h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep the full landing area and primary controls visible on laptop screens. */
@media (min-width: 791px) and (max-height: 900px) {
  :root { --cell-size: 22px; }
  .site-header { height: 58px; }
  .intro { margin: 16px 0 20px; }
  .intro .eyebrow { margin-bottom: 7px; font-size: 9px; }
  h1 { font-size: 30px; margin-bottom: 7px; letter-spacing: -1.1px; }
  .subtitle { font-size: 12px; }
  .game-layout { max-width: 860px; gap: 30px; }
  .board-heading { height: 26px; }
  .left-rail, .right-rail { padding-top: 26px; gap: 14px; }
  .panel { padding: 17px; }
  .player-status { margin-top: 14px; padding-top: 10px; }
  .primary-stat strong { font-size: 34px; }
  .stat-row { margin-top: 15px; padding-top: 12px; }
  .stat strong { font-size: 24px; }
  .primary-stat strong { font-size: 34px; }
  .piece-preview { height: 60px; }
  .small { height: 35px; }
  .next-piece { margin-top: 7px; padding-top: 12px; }
  .board-footer { min-height: 31px; font-size: 8px; }
  .ghost-key { font-size: 7px; gap: 4px; }
  .cell.ghost:before { inset: 7px; }
  .control-button { min-height: 34px; padding: 4px 12px; }
  .direction-controls { margin-bottom: 7px; }
  .drop-button { padding: 11px 13px; }
  .how-to { padding-top: 4px; }
  .how-to > p:not(.eyebrow):not(.helper) { margin: 7px 0 12px; }
  .replay-tools { padding-top: 14px; margin-top: 0; }
  .site-footer { margin-top: 23px; padding-top: 16px; }
  .footer-version { top: 19px; }
}
@media (min-width: 791px) and (max-height: 720px) {
  :root { --cell-size: 19px; }
  .intro { margin: 12px 0 14px; }
  h1 { font-size: 26px; }
  .intro .eyebrow { display: none; }
  .ghost-key { display: none; }
  .player-card { display: none; }
  .how-to { padding-top: 0; }
  .how-to > .helper { display: none; }
  .keyboard-help li { margin: 6px 0; }
}

/* Recorded races share a timeline, never the mutable human-game state. */
.view-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #171a21; }
.view-tab { padding: 9px 17px; background: transparent; border: 0; border-radius: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.view-tab.active { color: var(--accent); background: #c4f57812; box-shadow: inset 0 0 0 1px #c4f57818; }
.view-tab > span { margin-left: 6px; }
.race-view { max-width: 860px; margin: auto; }
.race-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 20px; }
.race-intro .eyebrow { margin-bottom: 5px; color: var(--accent); font-size: 9px; }
.race-intro h2 { font-size: 17px; font-weight: 550; letter-spacing: -.3px; }
.race-intro .helper { margin: 4px 0 0; }
.race-disclosure { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: var(--muted); font-size: 10px; }
.recorded-badge { border: 1px solid #4c435f; color: #c8b0e9; background: #af8eea0a; border-radius: 4px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .7px; }
.race-boards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; --race-cell: 23px; }
.race-card { width: calc(var(--race-cell) * 10 + 20px); }
.race-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.race-card-heading h3 { font-size: 14px; margin: 0; font-weight: 600; }
.race-player-status { color: var(--muted); font-size: 7px; font-family: ui-monospace, monospace; letter-spacing: .6px; }
.race-player-status.ended { color: #e5b776; }
.race-board { grid-template-columns: repeat(10, var(--race-cell)); grid-template-rows: repeat(20, var(--race-cell)); cursor: default; }
.race-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0; }
.race-metrics > div { padding-left: 12px; border-left: 1px solid var(--line); }
.race-metrics > div:first-child { padding-left: 0; border: 0; }
.race-metrics dt { font-size: 8px; letter-spacing: 1px; color: var(--muted); font-family: ui-monospace, monospace; }
.race-metrics dd { margin: 2px 0 0; font-size: 21px; font-variant-numeric: tabular-nums; font-weight: 500; }
.race-piece-detail { margin: 7px 0 0; color: #aeb5c4; font-size: 10px; }
.race-revision { color: #747e92; font-family: ui-monospace, monospace; font-size: 8px; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-loading { text-align: center; padding: 90px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.race-transport { margin: 18px auto 0; max-width: 610px; padding: 13px 17px; }
.race-position-row { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; font-size: 9px; color: var(--muted); letter-spacing: .7px; }
#race-position { width: 100%; accent-color: var(--accent); margin: 8px 0 10px; }
.race-buttons { display: flex; align-items: center; gap: 8px; }
.race-buttons .primary-button { min-height: 35px; padding: 8px 17px; font-size: 12px; }
.race-buttons .control-button { min-height: 35px; padding: 4px 11px; font-size: 16px; }
.race-speed { color: var(--muted); font-size: 9px; line-height: 1.6; margin-left: auto; }
.race-caption { text-align: center; color: #8891a2; font-size: 10px; margin: 12px 0 0; }
@media (min-width: 791px) and (max-height: 900px) {
  .race-boards { --race-cell: 16px; gap: 28px; }
  .race-intro { margin-bottom: 12px; }
  .race-intro h2 { font-size: 15px; }
  .race-card-heading { margin-bottom: 7px; }
  .race-metrics { margin-top: 8px; }
  .race-metrics dd { font-size: 18px; }
  .race-piece-detail { margin-top: 4px; font-size: 9px; }
  .race-revision { margin-top: 2px; }
  .race-transport { margin-top: 12px; padding: 10px 15px; }
  .race-caption { margin-top: 8px; font-size: 9px; }
}
@media (min-width: 791px) and (max-height: 720px) {
  .race-boards { --race-cell: 13px; }
  .race-intro .eyebrow { display: none; }
  .race-piece-detail, .race-revision { display: none; }
}
@media (max-width: 790px) {
  .race-intro { align-items: flex-start; }
  .race-disclosure { font-size: 9px; text-align: right; max-width: 150px; }
  .race-boards { --race-cell: 20px; gap: 20px; }
}
@media (max-width: 530px) {
  .view-tabs { margin-top: 15px; width: max-content; }
  .view-tab { padding: 7px 17px; font-size: 11px; }
  .race-intro { display: block; margin-bottom: 17px; }
  .race-disclosure { flex-direction: row; align-items: center; max-width: none; gap: 9px; text-align: left; margin-top: 10px; }
  .race-disclosure > span:last-child { font-size: 8px; }
  .race-boards { --race-cell: min(15px, calc((100vw - 86px) / 20)); gap: 12px; }
  .race-card-heading h3 { font-size: 12px; }
  .race-player-status { font-size: 6px; letter-spacing: 0; }
  .race-metrics > div { padding-left: 7px; }
  .race-metrics dd { font-size: 17px; }
  .race-metrics dt { font-size: 7px; letter-spacing: .4px; }
  .race-piece-detail { font-size: 8px; }
  .race-revision { font-size: 7px; }
  .race-transport { padding: 11px 13px; }
  .race-speed { display: none; }
  .race-buttons { justify-content: center; }
  .race-caption { font-size: 9px; }
}
@media (min-width: 791px) and (max-height: 900px) {
  .race-intro .eyebrow { display: none; }
}
.race-piece-detail > summary { cursor: pointer; width: fit-content; }
.race-piece-detail[open] { background: #1c202a; border: 1px solid var(--line); border-radius: 6px; padding: 7px; }
.race-alternatives { color: var(--muted); font-size: 9px; line-height: 1.6; overflow-wrap: anywhere; }
.race-alternatives p { margin: 6px 0; }
.race-player-status.failed { color: #f17986; }
.race-provenance { max-width: 610px; margin: 9px auto 0; font-size: 9px; color: var(--muted); }
.race-provenance summary { cursor: pointer; width: fit-content; }
.race-provenance ul { padding-left: 16px; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }

.race-report-link { text-align: center; margin: 9px 0 0; font-size: 11px; }
.race-report-link a { color: var(--accent); text-underline-offset: 3px; }

/* Reserve two title lines so real player names keep every board aligned. */
.race-card-heading { min-height: 42px; }

/* One authoritative human board is moved between Play and the comparison view. */
.race-view.with-human { max-width: 1124px; }
.race-join-controls { margin: 0 0 20px; padding: 12px 15px; border: 1px solid #3c4436; border-radius: 9px; background: #c4f57806; }
.race-join-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.race-join-buttons .secondary-button { width: auto; color: var(--accent); padding: 8px 13px; }
.race-join-buttons .text-button { padding: 4px 0; }
.race-join-controls .helper { margin-top: 6px; font-size: 10px; }
.race-human-card { width: calc(var(--cell-size) * 10 + 20px); flex-shrink: 0; }
.race-human-card .race-card-heading { margin-bottom: 8px; }
.live-human-badge { font-family: ui-monospace, monospace; font-size: 8px; color: var(--accent); letter-spacing: .7px; }
.race-human-card .board-wrap { border-color: #819e58; box-shadow: 0 0 0 3px #c4f57808; }
.race-human-card .race-metrics { margin: 0 0 5px; }
.race-human-preview { font-size: 10px; color: #c0ceae; margin: 5px 0 12px; }
.race-human-instructions { color: var(--muted); font-size: 10px; margin: 10px 0 0; text-align: center; }
.comparison-human-note { font-size: 9px; color: var(--accent); border: 1px solid #414d32; border-radius: 7px; padding: 8px; margin-bottom: 10px; }
.comparison-human-note .text-button { padding: 3px 0 0; display: block; font-size: 9px; }
.race-human-card .terminal-overlay p { max-width: 185px; }
@media (max-width: 790px) {
  .race-view.with-human .race-boards { gap: 20px; }
  .race-human-card { width: 100%; }
  .race-human-card > .race-card-heading, .race-human-card > .race-metrics, .race-human-preview, .race-human-instructions, #race-human-slot { width: calc(var(--cell-size) * 10 + 20px); margin-left: auto; margin-right: auto; }
  .race-human-card { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
}
@media (min-width: 791px) {
  .race-human-card { --cell-size: var(--race-cell); display: flex; flex-direction: column; width: calc(var(--race-cell) * 10 + 20px); }
  .race-human-card #race-human-slot, .race-human-card #human-board-column { display: contents; }
  .race-human-card > .race-card-heading { order: 0; margin-bottom: 7px; }
  .race-human-card .board-heading { display: none; }
  .race-human-card .board-wrap { order: 1; }
  .race-human-card .race-metrics { order: 2; margin: 8px 0 0; }
  .race-human-card .race-human-preview { order: 3; margin: 6px 0 0; font-size: 9px; }
  .race-human-card .board-footer { order: 4; }
  .race-human-card #play-controls { order: 5; }
  .race-human-card .race-human-instructions { order: 6; font-size: 9px; }
  .race-human-card .rotate-button span { display: none; }
  .race-human-card .drop-button { padding-left: 10px; padding-right: 10px; font-size: 11px; gap: 8px; }
  .race-human-card .drop-button span { font-size: 8px; }
}

@media (max-width: 530px) {
  .race-view.with-human .race-boards { gap: 12px; --race-cell: min(15px, calc((100vw - 112px) / 20)); }
}