.challenge-body { background:linear-gradient(180deg,rgba(9,11,9,.82),#0b0c0a 620px),url('/assets/dead-air-art.jpg') 62% top/cover no-repeat,#0b0c0a; }
.challenge-main,.board-main { padding-top:clamp(2rem,5vw,4.5rem); padding-bottom:5rem; min-height:calc(100svh - 130px); }
.challenge-intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding-bottom:2rem; }
.challenge-intro h1,.board-intro h1 { margin:.65rem 0 .75rem; font-size:clamp(2.3rem,4.6vw,4.7rem); line-height:1; letter-spacing:-.065em; font-weight:700; }
.challenge-intro p,.board-intro p { max-width:670px; margin:0; color:#c9c5b6; font-size:1rem; }
.board-link { flex:none; padding:.5rem 0; border-bottom:1px solid #9da78b; color:#e3e2d0; font-size:.8rem; }
.board-link span { margin-left:1.3rem; }
.challenge-machine { border:1px solid #767968; border-radius:4px; background:linear-gradient(145deg,#292e26,#161b16 45%,#111511); box-shadow:0 6px 0 #070a08,0 25px 70px #000a,inset 0 1px #c4c2a530; overflow:hidden; }
.challenge-strip { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:43px; padding:.7rem 1.5rem; border-bottom:1px solid #656b5d; background:#141914; color:#d0cbb2; font-size:.7rem; letter-spacing:.07em; }
.challenge-strip span:last-child { color:#bdc999; }
.challenge-ready { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:center; padding:clamp(1.5rem,4vw,4rem); }
.challenge-ready h2 { margin:.8rem 0 1rem; font-size:clamp(1.7rem,2.8vw,2.7rem); }
.challenge-ready p { max-width:510px; color:#c6c3b4; font-size:.93rem; }
.challenge-start-controls { display:grid; gap:.9rem; padding:1.5rem; border:1px solid #535a4d; background:#171c16; }
.challenge-start-controls label { display:flex; justify-content:space-between; gap:.8rem; color:#e1dcc9; font-size:.78rem; }
.challenge-start-controls label span { color:#b7b7a6; font-size:.7rem; }
.challenge-start-controls input { width:100%; min-height:48px; padding:.75rem 1rem; border:1px solid #858c77; border-radius:0; background:#0e150f; color:#f1ebd9; }
.challenge-start-controls input:focus { outline:2px solid #d0d7a9; outline-offset:2px; }
.challenge-options,.board-filters { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:.8rem; }
.challenge-options>div,.board-filters>div { min-width:0; }
.challenge-options label,.board-filters label { display:block; margin:0 0 .45rem; color:#d3d2be; font-size:.75rem; }
.challenge-options select,.board-filters select { width:100%; min-height:44px; padding:.55rem .7rem; border:1px solid #858c77; border-radius:0; background:#0e150f; color:#f1ebd9; font:inherit; font-size:.8rem; }
.challenge-options select:focus,.board-filters select:focus { outline:2px solid #d0d7a9; outline-offset:2px; }
.challenge-start-controls .option-note { margin:0; color:#b7b7a6; font-size:.7rem; }
.machine-button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:50px; padding:.75rem 1.15rem; border:1px solid #9eaa88; border-bottom-color:#566148; border-radius:2px; background:linear-gradient(#626e59,#3d4b3b); box-shadow:0 3px 0 #172018; color:#fbf7e8; font-weight:700; font-size:.82rem; cursor:pointer; transition:transform .12s ease,filter .12s ease,box-shadow .12s ease; }
.machine-button:hover { filter:brightness(1.13); transform:translateY(-1px); }.machine-button:active { transform:translateY(2px); box-shadow:0 1px 0 #172018; }
.machine-button:disabled { opacity:.6; cursor:wait; }
.service-message { margin:0; color:#dbc9a7; font-size:.8rem; }
.challenge-clock { display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:1.4rem clamp(1rem,3vw,2.5rem); }
.challenge-clock strong { display:block; font:600 clamp(2.3rem,4.5vw,4.7rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace; color:#ece7d6; font-variant-numeric:tabular-nums; }
.clock-track { height:5px; border:1px solid #5b6452; background:#111810; box-shadow:inset 0 1px 2px #0008; }.clock-track i { display:block; width:100%; height:100%; background:#afbc96; box-shadow:0 0 10px #afbc9670; }
.clock-note { color:#bbbba9; font-size:.68rem; }
.challenge-surface { position:relative; min-height:248px; margin:0 clamp(1rem,3vw,2.5rem); padding:1.6rem 1.8rem; border:12px solid #313a32; border-radius:16px 16px 22px 22px / 12px 12px 22px 22px; outline:1px solid #75816d; background:radial-gradient(ellipse at 50% 30%,#193020,#0a170e 78%); box-shadow:inset 0 0 35px #000b,0 5px 0 #0c120d,0 15px 25px #0008; cursor:text; }
.challenge-surface:before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(0deg,transparent 0 3px,#dbeacb08 3px 4px); }
.challenge-surface:focus { outline:2px solid #d3dcad; outline-offset:2px; border-color:#405044; }
.challenge-surface.misfire { animation:challengeMisfire .2s ease; }
@keyframes challengeMisfire { 50% { border-color:#985c53; box-shadow:inset 0 0 25px #a64b3c55,0 5px 0 #0c120d; } }
.challenge-prompt { position:relative; z-index:1; min-height:130px; font:500 clamp(1.18rem,2.1vw,1.65rem)/1.9 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.025em; overflow-wrap:anywhere; }
.challenge-prompt .typed { color:#9cb295; }.challenge-prompt .waiting { color:#e0e4ce; }.challenge-prompt .current { color:#0d1b12; background:#d6e3b6; box-shadow:0 0 0 3px #d6e3b6,0 0 14px #aecb8270; }.challenge-prompt .ellipsis { color:#7b8c75; }
.challenge-surface p { position:relative; z-index:1; margin:1rem 0 0; color:#bdc7b6; font-size:.73rem; }
.challenge-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:1.6rem clamp(1rem,3vw,2.5rem) 1.9rem; }
.challenge-metrics>div { padding:0 1rem; border-right:1px solid #535c4e; }.challenge-metrics>div:first-child { padding-left:0; }.challenge-metrics>div:last-child { border:0; }
.challenge-metrics small,.result-details small { display:block; color:#c2c4b2; font-size:.7rem; }.challenge-metrics strong { display:block; margin-top:.35rem; color:#f1ecdc; font:600 1.6rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; }
.challenge-submitting { padding:4rem 2rem; color:#e5e0ca; text-align:center; }
.challenge-result { padding:clamp(1.5rem,4vw,3.5rem); }.result-mark { display:flex; justify-content:space-between; color:#c7c4ab; font-size:.75rem; letter-spacing:.08em; }.result-mark span { color:#aeba98; }
.result-lead { display:flex; align-items:baseline; gap:1rem; margin:1.3rem 0 2rem; }.result-lead strong { font:700 clamp(4.5rem,10vw,9rem)/.9 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.09em; color:#ede8d7; }.result-lead span { color:#c6c1a9; font-size:.72rem; letter-spacing:.09em; }
.result-details { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #5d6455; border-bottom:1px solid #5d6455; }.result-details>div { padding:1.1rem 1rem; border-right:1px solid #5d6455; }.result-details>div:first-child { padding-left:0; }.result-details>div:last-child { border-right:0; }.result-details strong { display:block; margin-top:.3rem; font:600 1.35rem ui-monospace,SFMono-Regular,Consolas,monospace; color:#e7e7d4; }
.result-standing { margin:1.5rem 0; color:#d3d0bb; font-size:1rem; }.result-milestone { display:inline-block; margin:0 0 1.3rem; padding:.65rem 1rem; border:1px solid #b8b892; background:#343d2f; color:#e8e7c8; font-weight:750; letter-spacing:.06em; transform:rotate(-1deg); }
.result-weak { padding:1.2rem 0; border-top:1px solid #50594d; }.result-weak strong { display:block; margin:.55rem 0; color:#e5e2cd; font-size:1.2rem; }.result-weak p { color:#bbbba9; font-size:.83rem; margin:0; }
.result-actions { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; align-items:center; margin-top:1.4rem; }.result-actions>a,.result-actions>button:not(.machine-button) { padding:.65rem 0; border:0; border-bottom:1px solid #8a9278; background:none; color:#e4e2cf; font-size:.8rem; cursor:pointer; }.result-actions>a:hover,.result-actions>button:not(.machine-button):hover { color:#fff; border-color:#e4e2cf; }
.challenge-failed { padding:3rem; }.challenge-failed p { max-width:570px; color:#d3cbbb; }
.challenge-footnotes { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }.challenge-footnotes p { display:flex; gap:.9rem; color:#b6b4a7; font-size:.77rem; }.challenge-footnotes span { color:#aeba97; font:600 .7rem ui-monospace,monospace; }
.board-main { max-width:1000px; }.board-intro { padding:0 0 2.6rem; }.board-intro p { max-width:700px; }.board-intro .machine-button { margin-top:1.7rem; }
.leaderboard { border:1px solid #777e6a; background:linear-gradient(145deg,#242a22,#131713); box-shadow:0 25px 65px #0009; }.board-tabs { display:flex; border-bottom:1px solid #666d5e; }.board-tabs button { flex:1; min-height:54px; border:0; border-right:1px solid #5a6255; background:transparent; color:#c7c6b7; cursor:pointer; }.board-tabs button:last-child { border-right:0; }.board-tabs button[aria-pressed="true"] { background:#3d4738; color:#fff; box-shadow:inset 0 -3px #bdc89d; }.board-tabs button:hover { background:#353d31; }
.board-filters { max-width:540px; padding:1.2rem 1.3rem; }
.board-status { padding:1.3rem 1.5rem; margin:0; color:#c9c7b6; }.board-table-wrap { overflow-x:auto; }.leaderboard table { width:100%; border-collapse:collapse; }.leaderboard caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.leaderboard th { padding:.85rem 1.3rem; border-bottom:1px solid #586051; color:#babcaa; font-size:.7rem; font-weight:600; text-align:left; }.leaderboard td { padding:1rem 1.3rem; border-bottom:1px solid #444d42; color:#e9e5d6; font-size:.88rem; }.leaderboard tr:last-child td { border-bottom:0; }.leaderboard td:first-child { color:#b7c9a3; font:600 1rem ui-monospace,monospace; }.leaderboard td:nth-child(3),.leaderboard td:nth-child(4) { font-family:ui-monospace,monospace; }.board-note { margin-top:1.5rem; color:#b7b5a8; font-size:.78rem; }.board-note a { color:#e3dec9; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) { .challenge-ready { grid-template-columns:1fr; gap:1.5rem; }.challenge-footnotes { grid-template-columns:1fr; gap:.25rem; }.challenge-intro { align-items:start; }.challenge-clock { gap:1rem; } }
@media(max-width:620px) { .challenge-main,.board-main { padding-top:1.6rem; }.challenge-intro { display:block; }.challenge-intro h1,.board-intro h1 { font-size:clamp(2.1rem,9vw,3.3rem); }.board-link { display:inline-block; margin-top:1rem; }.challenge-ready { padding:1rem; }.challenge-start-controls { padding:1rem; }.challenge-clock { grid-template-columns:auto 1fr; gap:.8rem; padding:1rem; }.clock-note { grid-column:1/-1; }.challenge-surface { margin:0 .75rem; padding:1rem; border-width:8px; min-height:235px; }.challenge-prompt { font-size:1.1rem; line-height:1.8; }.challenge-metrics { grid-template-columns:repeat(3,1fr); gap:1rem 0; padding:1.2rem .8rem; }.challenge-metrics>div { padding:0 .6rem; }.challenge-metrics>div:nth-child(3) { border-right:0; }.challenge-metrics>div:nth-child(4) { padding-left:0; }.challenge-metrics strong { font-size:1.18rem; }.result-details { grid-template-columns:repeat(2,1fr); }.result-details>div:nth-child(2) { border-right:0; }.result-details>div:nth-child(-n+2) { border-bottom:1px solid #5d6455; }.result-details>div:nth-child(3) { padding-left:0; }.result-lead strong { font-size:5rem; }.challenge-failed { padding:1.5rem; }.leaderboard th,.leaderboard td { padding:.8rem .55rem; font-size:.72rem; }.leaderboard th:first-child,.leaderboard td:first-child { padding-left:.7rem; }.board-tabs button { font-size:.75rem; } }
@media(max-width:420px) { .challenge-options,.board-filters { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .machine-button { transition:none; }.challenge-surface.misfire { animation:none; border-color:#985c53; } }