/* Repeat Offenders — graphite chassis, illuminated contours, tampered signage. */
:root { --bg:#0c0e11; --panel:#14181d; --panel2:#1c2229; --cream:#f0f2ed; --muted:#9fa9b2; --line:#333d46; --accent:#49e4d0; --sage:#49e4d0; --rose:#b782ff; --ink:#f0f2ed; --sans:"Segoe UI",Arial,sans-serif; --mono:Consolas,"Courier New",monospace; --serif:var(--display); --chaos:"Lacquer",Impact,sans-serif; }
html { background:var(--bg); }
:root { --drip-ink:#f1f1ee; --drip-shadow:3px 3px 0 #0c0e11,5px 4px 0 #8248b5; }
body { position:relative; background:radial-gradient(ellipse at 80% 27%,#39166722,transparent 44%),radial-gradient(ellipse at 26% 68%,#1255560d,transparent 45%),var(--bg); color:var(--cream); isolation:isolate; }
::selection { background:#7b49b4; color:#fff; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { transition:color .16s,background .16s,border-color .16s,box-shadow .16s; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
main,.masthead { max-width:1500px; position:relative; }
.machine-art { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; min-height:100vh; }
.petal-light { position:absolute; width:620px; right:-150px; top:60px; opacity:.8; transform:rotate(-14deg); }
.wrench-circuit { position:absolute; width:950px; right:-40px; top:570px; opacity:.7; }
.chassis-rail { position:absolute; top:132px; bottom:28px; left:2%; width:11px; border-left:1px solid #283139; border-right:1px solid #1e252d; background:repeating-linear-gradient(0deg,transparent 0 23px,#3c4850 23px 24px); }
.masthead { padding:25px 4.5%; gap:28px; border-color:#343e48; }
.masthead:after { content:""; position:absolute; bottom:-4px; left:4.5%; right:4.5%; height:3px; background:linear-gradient(90deg,var(--accent) 0 55px,transparent 55px 60px,#5c3e87 60px 120px,transparent 120px); }
.brand { gap:13px; letter-spacing:0; }
.brand .brand-mark { width:42px; height:50px; }
.brand-wordmark { font:800 25px/.87 var(--display); letter-spacing:1px; text-transform:uppercase; }
.brand-wordmark em { font:inherit; }
.brand small { font:9px/1 var(--mono); letter-spacing:2.6px; margin-top:10px; color:#a0acb4; }
.masthead-note { margin:auto; display:flex; align-items:center; justify-content:center; gap:18px; font:400 20px/1.15 var(--chaos); letter-spacing:.8px; color:var(--drip-ink); text-shadow:var(--drip-shadow); text-align:center; text-transform:uppercase; }
.masthead-note i { width:4px; height:4px; transform:rotate(45deg); background:var(--accent); box-shadow:0 0 9px #49e4d077; }
.masthead-note i:last-child { background:var(--rose); box-shadow:0 0 9px #b782ff77; }
.masthead .quiet { margin-left:0; padding:10px 0 10px 24px; border-color:#343e48; font-size:15px; }
.quiet { color:#bdc7ce; }
.quiet:hover { color:var(--accent); }
.hero { display:grid; grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr); align-items:center; gap:7%; padding:53px 0 65px; min-height:760px; }
.hero-copy { padding:0; position:relative; z-index:2; }
.eyebrow { font:10px var(--mono); color:#a4b2ba; letter-spacing:2px; gap:17px; margin:0 0 24px; }
.cell-label { display:inline-flex; align-items:center; gap:13px; border-left:2px solid var(--accent); padding:4px 12px; color:#dbe3e7; letter-spacing:1.3px; }
.cell-label b { font:800 23px/1 var(--display); color:var(--accent); }
.hero h1 { font:800 clamp(90px,8.9vw,136px)/.83 var(--display); text-transform:uppercase; letter-spacing:-1px; margin:0 0 30px; }
.hero h1>span { display:inline-block; }
.hero h1 em { font:400 .76em/1.05 var(--chaos); letter-spacing:-3px; color:var(--drip-ink); display:inline-block; transform:rotate(-4deg) translate(-3px,4px); text-shadow:var(--drip-shadow); white-space:nowrap; }
.hero h1 em:after { content:""; display:block; position:absolute; width:59%; height:4px; right:2%; bottom:-6px; background:#d64994; clip-path:polygon(0 35%,100% 0,94% 100%,10% 60%); transform:rotate(-1deg); }
.intro { font:14px/1.7 var(--sans); color:#a8b4bd; max-width:330px; margin:0 0 28px; }
.start-form { max-width:400px; margin:0; padding:22px 0 0; border-top:1px solid #344049; position:relative; }
.start-form:before { content:""; width:34px; height:3px; background:#7c4ab5; position:absolute; top:-2px; left:0; }
.start-form>label,.start-form legend { font:10px var(--mono); text-transform:uppercase; letter-spacing:1.7px; color:#b6c4cc; }
.pin-field { margin-top:18px; margin-bottom:18px; }
.pin-field label { display:block; margin-bottom:8px; font:10px var(--mono); text-transform:uppercase; letter-spacing:1.7px; color:#b6c4cc; }
.pin-note { margin:7px 0 0; font-size:12px; color:var(--muted); }
input:not([type=radio]),#invite-url,#reset-count { background:#11161c; color:var(--cream); border:1px solid #44505b; border-radius:0; padding:13px 14px; box-shadow:inset 0 2px 8px #0004; }
input::placeholder { color:#8998a5; }
input:not([type=radio]):focus { border-color:var(--accent); }
fieldset { margin:20px 0; }
.difficulty-options { gap:8px; }
.difficulty-options label>span { border:1px solid #36414b; border-radius:0; background:linear-gradient(#1c222a,#14191f); color:#a8b5c0; padding:10px 4px 11px; font:9px var(--mono); text-transform:uppercase; }
.difficulty-options strong { font:600 29px/1.05 var(--display); color:#dbe2e6; margin-bottom:5px; }
.difficulty-options input:checked+span { background:linear-gradient(#1c3235,#152323); border-color:#46c9bb; color:var(--accent); box-shadow:inset 0 -2px var(--accent),0 4px 18px #49e4d00b; }
.difficulty-options input:checked+span strong { color:#b8fff0; }
.primary { border:1px solid #5ae6d3; background:var(--accent); color:#0d2426; border-radius:0; box-shadow:inset 0 -3px #0e66532b; font-size:17px; padding:13px 18px; }
.primary:hover { background:#8bf6e2; box-shadow:0 0 24px #49e4d023; }
.primary:active { box-shadow:inset 0 2px 10px #092d3a55; }
.fineprint { color:#8999a6; font:10px/1.6 var(--sans); }
.resume-link { color:var(--accent); }
.hero-display { position:relative; min-width:0; padding:45px 0 48px; align-self:center; }
.assembly-index { position:absolute; top:-77px; left:10px; font:800 180px/1 var(--display); color:transparent; -webkit-text-stroke:1px #5e497866; z-index:-1; }
.assembly-index>span { position:absolute; font:9px var(--mono); color:#a28ab9; -webkit-text-stroke:0; letter-spacing:3px; white-space:nowrap; top:70px; left:102px; transform:rotate(-90deg); }
.hero-art { margin:0; transform:rotate(1.2deg); position:relative; border:1px solid #53616b; border-radius:0; background:linear-gradient(140deg,#242b32,#11171c 40%,#20232c); padding:12px; box-shadow:0 22px 70px #0008,inset 0 0 0 4px #0a0c10; }
.hero-art:before,.hero-art:after { content:""; position:absolute; width:8px; height:8px; border:1px solid #82929e; border-radius:50%; background:linear-gradient(135deg,#0b0e11 45%,#a2adb8 46% 53%,#0b0e11 54%); }
.hero-art:before { top:14px; left:14px; }
.hero-art:after { bottom:15px; right:15px; }
.display-top { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 18px 19px; color:#aabac4; font:9px var(--mono); letter-spacing:1.5px; }
.display-top>span:first-child { display:flex; align-items:center; gap:8px; }
.status-light { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px #49e4d0aa; }
.photo-mat { padding:5px; background:#090c10; border:1px solid #36444d; box-shadow:0 0 20px #49e4d007; }
.hero-art .color-preview-frame { border:1px solid #2d3a43; }
.hero-art .color-preview-frame:after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,#07101115 3px 4px); box-shadow:inset 0 0 40px #0009; }
.hero-art figcaption { margin:0; padding:19px 13px 12px; max-width:none; display:flex; justify-content:space-between; align-items:center; gap:18px; color:#e4eceb; }
.hero-art figcaption>span { font:600 24px/1 var(--display); text-transform:uppercase; letter-spacing:.8px; }
.hero-art figcaption small { color:#8e9ca9; font:8px/1.6 var(--mono); letter-spacing:1px; max-width:150px; margin:0; text-align:right; }
.machine-signature { display:flex; align-items:center; gap:18px; position:absolute; right:13px; bottom:-4px; left:18px; color:#8d9da8; }
.machine-signature>span:first-child { font:10px var(--mono); letter-spacing:2px; white-space:nowrap; }
.machine-signature i { color:#d762a3; margin:0 5px; font-style:normal; }
.machine-signature b { font:400 16px var(--chaos); color:#9676b3; transform:rotate(-5deg); white-space:nowrap; }
.signature-line { flex:1; height:1px; background:#445057; position:relative; }
.signature-line:after { content:"+"; position:absolute; right:0; top:-10px; font:16px var(--mono); }
footer { border-top:1px solid #303943; padding:22px 0; color:#8999a6; display:flex; justify-content:space-between; font:600 18px var(--display); letter-spacing:1.5px; }
footer>span { font:9px var(--mono); letter-spacing:1.5px; align-self:center; }
footer .footer-motto { font-weight:600; text-transform:none; letter-spacing:.5px; }
footer .footer-heart { font:17px var(--mono); letter-spacing:0; color:var(--rose); margin-left:auto; }
/* A single chassis holds the active board, rather than two floating cards. */
body:has(#game:not([hidden])) .petal-light { width:450px; top:25px; right:-180px; opacity:.32; }
body:has(#game:not([hidden])) .wrench-circuit { top:610px; opacity:.22; }
#game { padding-top:32px; }
.game-heading h1 { font:800 clamp(40px,4vw,60px)/1 var(--display); margin:0 0 20px; text-transform:uppercase; letter-spacing:.5px; }
.game-heading h1 span { color:#cf559d; }
.game-heading .eyebrow { margin-bottom:15px; }
.room-actions { gap:24px; }
.primary.small { font-size:16px; padding:11px 18px; }
.session-bar { padding:15px 0; border-top:1px solid #38434d; gap:24px; background:transparent; }
.player .avatar { background:#143b39; border:1px solid #3ca698; color:#9ef7e7; border-radius:2px; }
.player.rose .avatar { background:#302044; border-color:#855fae; color:#d6b7ff; }
.player small,.player-status { color:#a9b6bf; }
.player-lead { color:var(--accent); border-color:#376a65; }
.player.rose .player-lead { color:#c8a1f5; border-color:#63517e; }
.contribution-bar,.contribution-bar::-webkit-progress-bar { background:#29313b; }
.connection { font:10px var(--mono); color:#a0b0bc; }
.progress-label strong { font:600 28px/1 var(--display); }
.progress-track { height:2px; background:#2e3942; margin-bottom:16px; }
.progress-track>span { background:var(--accent); box-shadow:0 0 10px #49e4d080; }
.workspace { grid-template-columns:minmax(0,1fr) 270px; gap:0; border:1px solid #47525c; padding:0 8px; position:relative; background:linear-gradient(120deg,#18202866,transparent 50%); box-shadow:0 14px 40px #0003; }
.workspace:before,.workspace:after { content:""; position:absolute; width:24px; height:24px; pointer-events:none; border-color:var(--accent); }
.workspace:before { left:-2px; top:-2px; border-left:2px solid; border-top:2px solid; color:#72c7c0; }
.workspace:after { right:-2px; bottom:-2px; border-right:2px solid; border-bottom:2px solid; color:#845eb7; }
.board-panel,.tray-panel { background:transparent; border:0; border-radius:0; box-shadow:none; }
.tray-panel { border-left:1px solid #35424c; margin:16px 0; max-height:690px; }
.panel-heading { font:10px var(--mono); letter-spacing:1.6px; min-height:55px; padding:15px 15px; color:#a8bbc8; background:none; }
.panel-heading>span:first-child:before { content:""; display:inline-block; width:5px; height:5px; margin-right:8px; background:#506675; vertical-align:1px; }
.board-tools { gap:15px; }
.panel-heading button,.board-tools button { color:#c8d2d9; font-size:14px; min-height:32px; }
.board-tools button[aria-pressed=true] { color:var(--accent); text-shadow:0 0 10px #49e4d040; }
.board-wrap { margin:0 14px; background:#090d11; border:1px solid #526570; box-shadow:0 0 0 4px #090d11,0 0 0 5px #25313a,inset 0 0 50px #0003; }
.board-target { stroke:#718895; stroke-opacity:.38; }
.board-target:focus,.board-target.drop-over { stroke:var(--accent); fill:#49e4d01c; }
.board-footer { padding:17px 15px; }
.board-footer p { color:#a6b5c0; }
.board-footer>span { color:var(--accent); }
.tray-filter { border-color:#303c46; padding:0 13px 12px; }
.tray-filter button { background:#1c2530; color:#b6c8d2; border:1px solid #4c5e6d; border-radius:2px; padding:7px 10px; font-size:13px; }
.tray-filter button[aria-pressed=true] { background:#163f3c; color:#9dffed; border-color:#45bbae; }
.tray-filter>span { color:#96a9b7; }
.piece-tray { gap:8px; scrollbar-color:#566374 #12181e; }
.piece { border-radius:0; }
.piece:hover { background:#26323c; }
.piece.selected { border-color:var(--accent); background:#183737; box-shadow:inset 0 0 14px #49e4d018; }
.game-bottom { padding-top:20px; gap:18px; }
.reaction-buttons button { background:#151d26; border-color:#3e4b57; border-radius:3px; }
.reaction-buttons button:hover { border-color:#b782ff; }
.reaction-buttons button:first-of-type { color:#c296fa; }
.reaction-buttons>span { color:#a4b6c4; }
.game-bottom>.quiet { color:#b8c5cf; }
.floating-reaction small { background:#131a22e0; }
/* Dark, perforated transmission tickets; original message wording is untouched. */
dialog { color:var(--cream); background:linear-gradient(145deg,#202630,#13181e 45%); border:1px solid #637481; border-radius:1px; box-shadow:0 25px 100px #000c,inset 0 3px #8556b4; }
dialog::backdrop { background:#04080cd9; backdrop-filter:blur(5px); }
dialog h2,.complete-dialog h2 { color:#edf1ef; }
dialog .eyebrow { color:#b18bdf; }
dialog .dialog-note,.complete-dialog p { color:#a8b7c2; }
dialog .primary { color:#0d2426; background:var(--accent); border-color:#5ae6d3; }
dialog .primary:hover { background:#8bf6e2; }
.close-dialog { color:#bdcbd5; min-width:36px; min-height:36px; }
.secondary { color:#c7d6df; border-color:#586d7e; border-radius:0; }
.secondary:hover { background:#2c3945; }
#reset-count { border-radius:0; }
#reset-count:focus-visible { outline-color:var(--accent); }
.reference-dialog { background:#10171e; }
.reference-dialog p { color:#c5d3dc; }
.reference-dialog>.close-dialog { min-height:30px; min-width:30px; }
.complete-dialog { background:radial-gradient(ellipse at 100% 0,#70429c55,transparent 55%),#151b22; }
.complete-dialog[open] { animation:completion-light 1.2s ease-out; }
@keyframes completion-light { from { box-shadow:0 0 70px #49e4d055,inset 0 3px #b782ff; } to { box-shadow:0 25px 100px #000c,inset 0 3px #8556b4; } }
.complete-dialog .completion-result { color:#c0f9ed; }
.completion-scores li,.history-list li { border-color:#364651; }
.completion-scores li>span { color:#aebfca; }
.completion-scores .contribution-bar,.completion-scores .contribution-bar::-webkit-progress-bar { background:#293541; }
.completion-scores .contribution-bar::-webkit-progress-value { background:var(--sage); }
.completion-scores .contribution-bar::-moz-progress-bar { background:var(--sage); }
.completion-scores .rose .contribution-bar::-webkit-progress-value { background:var(--rose); }
.completion-scores .rose .contribution-bar::-moz-progress-bar { background:var(--rose); }
.exchange-dialog { background:#171f27; border-color:#5a717f; box-shadow:0 20px 80px #000b,inset 4px 0 #7851a5; width:min(490px,calc(100vw - 32px)); }
.exchange-dialog::backdrop { background:#060b1166; backdrop-filter:none; }
.exchange-header { margin-bottom:15px; padding-bottom:13px; border-bottom:1px dashed #526571; background:linear-gradient(90deg,#273240,#1b232b); }
.exchange-header h2 { font:400 19px var(--chaos); color:#cfb0f2; letter-spacing:.5px; text-transform:none; }
.exchange-dialog .exchange-context,.exchange-dialog .exchange-attribution { color:#a5b9c6; }
.exchange-dialog .exchange-attribution { border-bottom:1px solid #35414e; padding-bottom:14px; font:11px var(--mono); }
.exchange-message,.exchange-message.from-kal { background:transparent; border:0; border-left:2px solid #8c68b4; border-radius:0; margin:0 0 18px; padding:2px 0 2px 14px; }
.exchange-message.from-kal { border-color:#3ca99d; }
.exchange-message cite { color:#c8a4f2; text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; }
.exchange-message.from-kal cite { color:#71dfcc; }
.exchange-dialog .exchange-message p { color:#edf0ef; font:15px/1.6 var(--sans); text-transform:none; }
.exchange-footer { border-top:1px dashed #526571; padding-top:14px; }
.history-dialog .history-status,.history-dialog .history-note,.history-list span,.history-list time { color:#a8bdca; }
.history-actions { background:#171f27; }
#toast { color:#d8fff5; background:#17312f; border:1px solid #477e75; border-radius:1px; }
@media(min-width:1550px) { .hero { padding-top:60px; padding-bottom:70px; } }
@media(max-width:1100px) { .hero { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:5%; } .hero h1 { font-size:100px; } .hero-art figcaption { flex-wrap:wrap; gap:9px; } .hero-art figcaption small { text-align:left; max-width:none; font-size:8px; } .display-top { font-size:8px; padding:10px 12px 16px; } .machine-signature { gap:12px; } .machine-signature b { font-size:13px; } .workspace { grid-template-columns:minmax(0,1fr) 220px; } .board-tools { gap:10px; } }
@media(max-width:760px) {
 .masthead { padding:20px 6%; gap:12px; row-gap:16px; flex-wrap:wrap; } .brand .brand-mark { width:35px; height:43px; } .brand-wordmark { font-size:24px; } .brand small { font-size:8px; letter-spacing:2px; margin-top:8px; }
 .masthead-note { order:3; flex-basis:100%; margin:0; gap:12px; font-size:16px; } .masthead .quiet { margin-left:auto; font-size:13px; padding:10px 0; border:0; } .masthead .quiet span { margin-left:3px; }
 .chassis-rail { top:107px; left:2%; width:5px; opacity:.6; } .petal-light { width:360px; top:70px; right:-180px; opacity:.6; } .wrench-circuit { width:630px; top:940px; right:-230px; opacity:.45; }
 .hero { display:flex; flex-direction:column; align-items:stretch; gap:34px; padding:38px 0 40px; min-height:0; } .hero-copy { display:block; } .hero-copy>.eyebrow { margin:0 0 28px; font-size:9px; gap:13px; } .cell-label { padding:4px 9px; gap:10px; font-size:9px; }
 .hero h1 { font-size:clamp(83px,23vw,140px); line-height:.85; letter-spacing:-1px; margin:0 0 29px; } .hero h1 em { font-size:.74em; letter-spacing:-2px; line-height:1.05; }
 .intro { margin:0 0 28px; max-width:340px; font-size:13px; } .start-form { max-width:none; width:100%; margin:0; padding-top:21px; }
 .hero-display { padding:25px 0 42px; align-self:stretch; } .assembly-index { top:-36px; left:12px; font-size:100px; } .assembly-index>span { display:none; }
 .hero-art { margin:0; padding:9px; } .display-top { padding:10px 15px 16px; font-size:8px; letter-spacing:1px; } .hero-art figcaption { padding:17px 12px 9px; gap:10px; } .hero-art figcaption>span { font-size:24px; } .hero-art figcaption small { font-size:7px; }
 .machine-signature { left:10px; right:10px; bottom:3px; gap:15px; } .machine-signature b { font-size:14px; } .machine-signature>span:first-child { font-size:9px; }
 footer { flex-direction:row; flex-wrap:wrap; gap:12px; font-size:17px; padding:22px 0; } footer>span { font-size:8px; }
 #game { padding-top:28px; } .game-heading { gap:0; } .game-heading h1 { font-size:43px; margin-bottom:22px; } .game-heading .eyebrow { font-size:9px; margin-bottom:16px; }
 .game-heading .room-actions { gap:20px; margin-bottom:18px; } .room-actions .quiet { font-size:13px; } .game-heading .room-actions .small { font-size:15px; }
 .session-bar { padding:15px 0; gap:14px; } .session-bar .players { gap:15px; } .player { flex-basis:calc(50% - 15px); } .progress-track { margin-bottom:18px; }
 .workspace { grid-template-columns:minmax(0,1fr); padding:0 5px; } .tray-panel { border-left:0; border-top:1px solid #3c4c59; margin:0 8px 5px; max-height:none; }
 .panel-heading { padding:11px 8px; min-height:51px; font-size:9px; letter-spacing:1px; } .panel-heading button,.board-tools button { font-size:12px; padding:4px 0; } .board-tools { gap:10px; }
 .board-wrap { margin:0 8px; } .board-footer { padding:15px 8px; gap:7px; } .board-footer p { font-size:10px; } .board-footer>span { font-size:9px; }
 .tray-filter { padding:0 0 11px; } .tray-filter>span { display:block; } .piece-tray { grid-template-columns:repeat(5,minmax(0,1fr)); max-height:265px; padding:13px 0; gap:4px; } .piece { min-height:45px; }
 .game-bottom { gap:14px; flex-wrap:wrap; } .game-bottom>.quiet { font-size:13px; } .reaction-buttons>span { display:none; } .reaction-buttons { gap:7px; }
 dialog { padding:38px 23px 25px; } .exchange-dialog { padding:0; } .exchange-header { padding:13px 16px; } .exchange-header h2 { font-size:18px; } .exchange-footer { padding:13px 16px; } .exchange-message,.exchange-message.from-kal { margin:0 0 17px; padding-left:12px; }
 .exchange-dialog .exchange-message p { font-size:15px; } .reference-dialog { padding:44px 14px 10px; } .history-dialog { padding:30px 20px 25px; }
 body:has(#game:not([hidden])) .wrench-circuit { top:820px; }
}
@media(max-width:360px) { .brand-wordmark { font-size:21px; } .brand .brand-mark { width:31px; } .brand { gap:9px; } .masthead .quiet { font-size:12px; } .hero h1 { font-size:83px; } .game-heading h1 { font-size:37px; } .board-tools { gap:7px; } .panel-heading button,.board-tools button { font-size:11px; } .panel-heading>span:first-child:before { display:none; } .piece-tray { grid-template-columns:repeat(4,minmax(0,1fr)); } .machine-signature b { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }