:root { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme: dark; --bg:#0b1220; --card:#172235; --line:#334155; --ink:#e2e8f0; --muted:#9aabc3; --mint:#6ee7b7; --danger:#fca5a5; }
* { box-sizing: border-box } body{ margin:0; background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent } .shell{max-width:680px;margin:auto;padding:16px 18px} header{border-bottom:1px solid var(--line)} .eyebrow{letter-spacing:2px;font-size:11px;font-weight:800;color:var(--mint)} h1{font-size:28px;margin:5px 0} .subhead{font-weight:400;font-size:13px;color:var(--muted)} footer{font-size:12px;line-height:1.7;color:var(--muted);padding-bottom:35px}
.card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:19px;margin:14px 0} .subcard{background:#0f1b2e;border:1px solid var(--line);border-radius:12px;padding:13px;margin:12px 0} h2{font-size:23px;line-height:1.2;margin:7px 0 13px} h3{font-size:16px;margin:16px 0 8px} p{line-height:1.55;color:#cbd5e1} .muted,.note{color:var(--muted);font-size:13px;line-height:1.6} .success{color:var(--mint)} .error{color:var(--danger)} .eyebrow-label{color:var(--mint);font-size:13px;font-weight:800} .id-code{font-size:clamp(19px,4vw,29px);font-weight:900;letter-spacing:1px;color:var(--mint);overflow-wrap:anywhere}.recovery{letter-spacing:1px;font-size:21px;font-weight:900;overflow-wrap:anywhere}.field{display:block;font-size:13px;font-weight:700;color:#ccd6e5;margin:15px 0 6px} input,select{font:inherit;width:100%;min-height:48px;padding:10px 13px;background:#0f1b2e;color:var(--ink);border:1px solid #53657e;border-radius:10px} input[type=checkbox]{width:auto;min-height:auto;margin-right:9px;accent-color:var(--mint)} .checkrow{display:flex;gap:3px;align-items:start;margin-top:17px;line-height:1.55;font-size:13px;color:#cbd5e1}.choicebar{display:flex;gap:8px;flex-wrap:wrap}.choicebar label{cursor:pointer;background:#0f1b2e;border:1px solid #52627a;padding:12px 16px;border-radius:10px;flex:1;text-align:center}.choicebar input{width:auto;min-height:auto}button{cursor:pointer;background:var(--mint);color:#052e22;border:0;border-radius:11px;padding:14px 18px;font-size:15px;font-weight:850;min-height:48px}button.secondary{background:#233148;color:var(--ink);border:1px solid #52627a}button.ghost{background:transparent;color:var(--muted);padding:10px;border:1px solid var(--line)}button:disabled{opacity:.5;cursor:default} .stack{display:grid;gap:10px;margin-top:14px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#0f1b2e;padding:14px;border-radius:11px;border:1px solid var(--line)}.stat strong{display:block;font-size:22px;color:var(--ink)}.stat small{color:var(--muted)} .level{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0}.level strong{color:var(--mint)}.progress{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:800}.progressbar{height:6px;background:#314158;border-radius:5px;margin:9px 0 18px;overflow:hidden}.progressbar div{height:100%;background:var(--mint)}.game-heading{text-align:center;font-size:20px;font-weight:900}.board-holder{display:flex;justify-content:center;align-items:center;margin:20px 0;min-height:min(76vw,415px)}.board{width:min(88vw,400px);height:min(88vw,400px);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border-radius:15px;background:#18263e;overflow:hidden}.cell{border:.5px solid #304761;display:grid;place-items:center}.stimulus{width:100%;height:100%;display:grid;place-items:center;border:0;padding:0;border-radius:0;background:transparent;touch-action:manipulation;user-select:none}.stimulus svg{width:65%;height:65%;max-width:62px;max-height:62px;pointer-events:none}.stimulus:focus-visible{outline:3px solid #fff;outline-offset:-4px}.cue-board{width:min(88vw,400px);height:min(88vw,400px);display:grid;place-items:center;border:2px solid #2d405b;background:#1b2940;border-radius:15px}.cue-board svg{width:88px;height:88px} .dots{font-size:30px;letter-spacing:12px;color:#708198}.nowrap{white-space:nowrap}.code-actions{display:flex;gap:10px;flex-wrap:wrap}.code-actions button{flex:1}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:9px 5px;border-bottom:1px solid var(--line)} .overflow{overflow:auto;max-height:430px} .center{text-align:center} .alert{padding:11px;border:1px solid #9c4b56;color:#fee2e2;border-radius:9px;background:#411f2e;margin:13px 0} .ok{padding:11px;border:1px solid #316c59;border-radius:9px;background:#163a32;color:var(--mint);margin:13px 0}a{color:var(--mint)}
@media(min-width:650px){.board-holder{min-height:420px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}