:root{--cream: #f3efe6;--ink: #14120e;--red: #e0312c;--blue: #1f4fa3;--yellow: #f0b410;--paper: #ffffff;--on-accent: #14120e;--frame: 14px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--cream);color:var(--ink);font-family:Archivo,sans-serif;-webkit-font-smoothing:antialiased}#scene{position:fixed;top:0;right:0;bottom:0;left:0;cursor:grab}#scene:active{cursor:grabbing}.frame{position:fixed;top:0;right:0;bottom:0;left:0;border:var(--frame) solid var(--ink);pointer-events:none;z-index:30}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}.hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none}.title{position:absolute;top:38px;left:40px;font-family:Archivo Black,sans-serif;line-height:.92;letter-spacing:-.02em;font-size:clamp(28px,4.4vw,56px);text-transform:uppercase}.title .x{color:var(--red)}.title .o{color:var(--blue)}.title small{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(10px,1vw,13px);letter-spacing:.34em;margin-top:12px;color:var(--ink)}.score{position:absolute;top:40px;right:40px;display:flex;align-items:stretch;border:3px solid var(--ink);background:var(--cream);box-shadow:7px 7px 0 var(--ink);font-family:Archivo Black,sans-serif;pointer-events:auto}.score .cell{padding:12px 18px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px}.score .cell+.cell{border-left:3px solid var(--ink)}.score .who{font-family:Archivo,sans-serif;font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase}.score .pts{font-size:30px;line-height:1}.score .cell.px .pts{color:var(--red)}.score .cell.po .pts{color:var(--blue)}.score .cell.pd .pts{color:var(--ink);opacity:.55}.turn{position:absolute;bottom:46px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;border:3px solid var(--ink);background:var(--cream);box-shadow:7px 7px 0 var(--ink);padding:12px 26px;font-family:Archivo Black,sans-serif;font-size:17px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:opacity .25s}.turn .chip{width:22px;height:22px;flex:none}.turn .chip.x{background:linear-gradient(45deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%),linear-gradient(-45deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%)}.turn .chip.o{border-radius:50%;border:6px solid var(--blue)}.turn.thinking{animation:blink 1s steps(2,start) infinite}@keyframes blink{50%{opacity:.45}}.actions{position:absolute;bottom:46px;left:40px;display:flex;flex-direction:column;gap:12px}button.bt{pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font-family:Archivo,sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:11px 18px;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}button.bt:hover{background:var(--yellow);color:var(--on-accent);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}button.bt:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.hint{position:absolute;bottom:46px;right:40px;width:150px;text-align:right;font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1.6;text-transform:uppercase;opacity:.55}.deco{position:absolute;z-index:1}.deco.circle{width:90px;height:90px;border-radius:50%;background:var(--red);top:-30px;right:220px;opacity:.92}.deco.tri{width:0;height:0;border-left:38px solid transparent;border-right:38px solid transparent;border-bottom:66px solid var(--yellow);bottom:130px;right:56px;transform:rotate(14deg)}.deco.sq{width:46px;height:46px;background:var(--blue);bottom:150px;left:46px;transform:rotate(45deg)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:var(--cream);transition:opacity .4s,visibility .4s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay .inner{text-align:center;padding:24px;max-width:760px;position:relative}.menu-kicker{font-weight:700;font-size:12px;letter-spacing:.45em;text-transform:uppercase;margin-bottom:26px}.menu-title{font-family:Archivo Black,sans-serif;text-transform:uppercase;font-size:clamp(44px,9vw,110px);line-height:.88;letter-spacing:-.03em;margin-bottom:14px}.menu-title .x{color:var(--red)}.menu-title .o{color:var(--blue)}.menu-sub{font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:52px;opacity:.7}.menu-buttons{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}button.big{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:4px solid var(--ink);background:var(--cream);box-shadow:9px 9px 0 var(--ink);font-family:Archivo Black,sans-serif;text-transform:uppercase;font-size:19px;letter-spacing:.06em;padding:26px 38px;color:var(--ink);transition:transform .13s,box-shadow .13s,background .13s;display:flex;flex-direction:column;gap:8px;align-items:center;min-width:250px}button.big span.tag{font-family:Archivo,sans-serif;font-weight:700;font-size:10px;letter-spacing:.3em;opacity:.6}button.big:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink)}button.big:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink)}button.big.red:hover{background:var(--red);color:var(--cream)}button.big.blue:hover{background:var(--blue);color:var(--cream)}button.big.yellow:hover{background:var(--yellow);color:var(--on-accent)}button.big.ink:hover{background:var(--ink);color:var(--cream)}button.big.red:hover .tag,button.big.blue:hover .tag,button.big.ink:hover .tag{opacity:.85}button.big:disabled{opacity:.55;pointer-events:none}.menu-buttons.online-row{margin-top:22px}.menu-buttons.online-row button.big{font-size:15px;padding:18px 30px;min-width:250px}.nick-row{margin-top:30px}.skin-row{margin-top:28px;display:flex;gap:16px;justify-content:center}button.skin{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:52px;height:52px;padding:0;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}button.skin:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}button.skin.sel{transform:scale(1.14);outline:3px solid var(--ink);outline-offset:3px}.skin-caption{margin-top:16px;font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}.overlay.end{background:transparent;pointer-events:none}.overlay.end .inner{pointer-events:auto;background:var(--cream);border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);padding:46px 64px}.end-title{font-family:Archivo Black,sans-serif;text-transform:uppercase;font-size:clamp(36px,6vw,72px);line-height:.9;letter-spacing:-.02em;margin-bottom:30px}.end-title.winx{color:var(--red)}.end-title.wino{color:var(--blue)}.end-status{margin-top:22px;font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.65;min-height:14px}.overlay.modal{background:#f3efe6e0}.overlay.modal .inner{background:var(--cream);border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);padding:42px 52px;max-width:480px}.modal-title{font-family:Archivo Black,sans-serif;font-size:24px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:26px}.field{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-family:Archivo Black,sans-serif;font-size:22px;text-transform:uppercase;text-align:center;letter-spacing:.12em;padding:14px 16px;outline:none;border-radius:0}.field:focus{box-shadow:5px 5px 0 var(--yellow)}.field.code{letter-spacing:.45em;font-size:30px}.field::placeholder{opacity:.3}.modal-buttons{display:flex;gap:14px;justify-content:center;margin-top:26px}.confirm-note{font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.65}.code-view{display:flex;gap:10px;justify-content:center}.code-view span{font-family:Archivo Black,sans-serif;font-size:40px;line-height:1;padding:14px 6px;min-width:58px;border:3px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink)}.wait-note{margin-top:26px;font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.65;line-height:2}.wait-note .dots{display:block;animation:blink 1.2s steps(2,start) infinite}.overlay .inner .deco.circle{top:-120px;left:-130px;right:auto;width:110px;height:110px}.overlay .inner .deco.tri{bottom:-110px;right:-120px}.overlay .inner .deco.sq{top:-70px;right:-150px;left:auto;bottom:auto}@media(max-width:720px){:root{--frame: 8px}.title{top:24px;left:22px}.score{top:auto;bottom:110px;right:22px;transform:scale(.85);transform-origin:bottom right}.actions{left:22px;bottom:26px}.turn{bottom:26px;left:auto;right:22px;transform:none;font-size:13px;padding:10px 16px}.hint,.deco.circle,.deco.tri,.deco.sq,.overlay .inner .deco.circle,.overlay .inner .deco.tri,.overlay .inner .deco.sq{display:none}}