@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap";
:root{--bg:#0f1420;--surface:#161e2f;--surface2:#1d2740;--line:#2b3757;--amber:#ffb84a;--amber-hot:#ff9b2e;--amber-glow:#ffb84a8c;--mint:#5fe0b7;--red:#ff6b7a;--text:#eef2fa;--muted:#8d99b5;--mono:"JetBrains Mono", ui-monospace, monospace;--disp:"Barlow Condensed", "Arial Narrow", sans-serif;--body:"Inter", system-ui, sans-serif}*{box-sizing:border-box;margin:0}html,body{padding:0}.app{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--body);overscroll-behavior:contain;background-image:radial-gradient(circle at 50% -10%,#ffb84a12,#0000 55%);justify-content:center;padding:28px 14px 60px;display:flex}.screen{flex-direction:column;gap:16px;width:100%;max-width:520px;animation:.3s fadeup;display:flex}@keyframes fadeup{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.toast{background:var(--surface2);border:1px solid var(--amber);color:var(--text);z-index:50;border-radius:10px;padding:10px 18px;font-size:13.5px;animation:.25s fadeup;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000073}.wordmark{text-align:center}.wordmark .wm-grid,.wordmark .wm-lock{font-family:var(--disp);letter-spacing:2px;font-size:54px;font-weight:800;line-height:1}.wm-small .wm-grid,.wm-small .wm-lock{font-size:30px}.wm-grid{color:var(--text)}.wm-lock{color:var(--amber)}.wm-sub{font-family:var(--disp);letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-top:4px;font-size:14px;font-weight:600}.motif{width:150px;margin:4px auto -6px;display:block}.motif-line{stroke-dasharray:260;stroke-dashoffset:260px;animation:1.4s .2s forwards drawline}@keyframes drawline{to{stroke-dashoffset:0}}.lede{color:var(--muted);text-align:center;padding:0 6px;font-size:15px;line-height:1.55}.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:13px;padding:18px;display:flex}.card h2{font-family:var(--disp);letter-spacing:.5px;font-size:26px;font-weight:700}.section-head{font-family:var(--disp);letter-spacing:1px;text-transform:uppercase;color:var(--amber);font-size:19px;font-weight:700}.section-head .opt{font-family:var(--body);letter-spacing:0;text-transform:none;color:var(--muted);font-size:11.5px;font-weight:400}.muted{color:var(--muted);font-size:14px;line-height:1.5}.field{flex-direction:column;gap:6px;display:flex}.field label{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.field .opt{text-transform:none;letter-spacing:0;font-weight:400}input,textarea{background:var(--surface2);border:1px solid var(--line);color:var(--text);font-family:var(--body);border-radius:9px;outline:none;width:100%;padding:11px 13px;font-size:15px;transition:border-color .15s}input:focus,textarea:focus{border-color:var(--amber)}.code-input{font-family:var(--mono);letter-spacing:8px;text-align:center;font-size:20px}.err{color:var(--red);font-size:13px}.fine{color:var(--muted);font-size:12px;line-height:1.5}.center{text-align:center}.btn{font-family:var(--disp);letter-spacing:1px;cursor:pointer;color:var(--bg);touch-action:manipulation;border:none;border-radius:10px;padding:12px 18px;font-size:18px;font-weight:700;transition:transform 80ms,filter .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.55;cursor:default}.btn.primary{background:var(--amber)}.btn.primary:hover{filter:brightness(1.08)}.btn.confirmed{background:var(--mint)}.btn.ghost{border:1px solid var(--line);color:var(--text);background:0 0;padding:9px 16px;font-size:15px}.btn.demo{border:1.5px dashed var(--amber);color:var(--amber);background:0 0;font-size:15px}.btn.demo.small{align-self:center;padding:8px 14px;font-size:13px}.btn.wide{width:100%}.stat-row{justify-content:space-between;gap:8px;padding:0 2px;display:flex}.stat-row>div{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;flex:1;padding:10px 4px}.stat-row b{font-family:var(--disp);letter-spacing:.5px;color:var(--amber);font-size:18px;display:block}.stat-row span{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:10px}.demo-chip{border:1px dashed var(--amber);color:var(--amber);background:#ffb84a1f;border-radius:8px;align-self:flex-start;padding:6px 12px;font-size:13px}.avatar-grid{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.avatar-opt{background:var(--surface2);border:1.5px solid var(--line);cursor:pointer;border-radius:9px;padding:6px 0;font-size:21px}.avatar-opt.sel{border-color:var(--amber);background:#ffb84a24}.check-row{color:var(--muted);cursor:pointer;align-items:flex-start;gap:10px;font-size:13.5px;display:flex}.check-row input{width:auto;accent-color:var(--amber);margin-top:2px}.check-row b{color:var(--text)}.lobby-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.lobby-head .wordmark{text-align:left}.chips{align-items:center;gap:7px;display:flex}.user-chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:7px;padding:6px 12px;font-size:13px;font-weight:600;display:flex}.streak-chip{color:var(--amber);border-color:#ffb84a80}.sc-w{color:var(--muted);margin-left:1px;font-size:10px}.uc-av{font-size:16px}.country-select{background:var(--surface2);border:1px solid var(--line);color:var(--text);font-family:var(--body);appearance:none;cursor:pointer;border-radius:9px;outline:none;width:100%;padding:11px 13px;font-size:15px}.country-select:focus{border-color:var(--amber)}.ghost-frame{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}.demo-frame{border-color:var(--line);box-shadow:0 0 40px #ffb84a14}.ghost-svg{aspect-ratio:1;width:100%;display:block}.ghost-line{fill:none;stroke:var(--mint);stroke-width:5.2px;stroke-linecap:round;stroke-linejoin:round;opacity:.9;animation:7s linear forwards ghostdraw}.demo-line{fill:none;stroke:var(--amber);stroke-width:7.5px;stroke-linecap:round;stroke-linejoin:round;animation:4.6s ease-in-out forwards ghostdraw}@keyframes ghostdraw{to{stroke-dashoffset:0}}.hero-line{font-family:var(--disp);letter-spacing:.5px;text-align:center;color:var(--text);margin-top:-8px;font-size:22px;font-weight:600}.try-solved{text-align:center;border-color:var(--mint);align-items:center}.ts-big{font-family:var(--disp);color:var(--mint);letter-spacing:1px;font-size:30px;font-weight:800}.lb-tabs{gap:8px;display:flex}.lb-tab{background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-family:var(--disp);letter-spacing:1px;cursor:pointer;border-radius:9px;flex:1;padding:9px 0;font-size:16px;font-weight:700}.lb-tab.on{border-color:var(--amber);color:var(--amber);background:#ffb84a1f}.rh-streak{color:var(--amber);font-size:14px;font-weight:600}.lock-card{text-align:center;align-items:center}.lock-title{letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-size:12px}.lock-date{font-family:var(--disp);letter-spacing:.5px;font-size:24px;font-weight:700}.countdown{align-items:baseline;gap:8px;margin:4px 0 6px;display:flex}.countdown>div b{font-family:var(--mono);color:var(--amber);font-size:28px;display:block}.countdown>div span{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-size:10px}.countdown .colon{color:var(--line);font-family:var(--mono);align-self:flex-start;font-size:24px}.podium-row{border-bottom:1px solid var(--line);justify-content:space-between;padding:6px 0;font-size:14.5px;display:flex}.podium-row:last-of-type{border-bottom:none}.podium-row b{font-family:var(--mono);color:var(--muted);font-size:13.5px}.email{border:1px solid var(--line);border-radius:10px;overflow:hidden}.email+.email{margin-top:-3px}.email-head{background:var(--surface2);width:100%;color:var(--text);cursor:pointer;font-family:var(--body);text-align:left;border:none;align-items:center;gap:10px;padding:11px 13px;font-size:13.5px;display:flex}.email-tag{letter-spacing:1px;text-transform:uppercase;color:var(--amber);white-space:nowrap;background:#ffb84a1a;border:1px solid #ffb84a59;border-radius:5px;padding:2px 7px;font-size:10px}.email-subj{flex:1;font-weight:600}.email-caret{color:var(--muted)}.email-body{background:var(--bg);flex-direction:column;gap:9px;padding:13px 15px;font-size:13.5px;line-height:1.55;display:flex}.email-meta{color:var(--muted);font-size:11px}.email-btn{background:var(--surface2);border:1px solid var(--line);border-radius:8px;align-self:flex-start;padding:8px 12px;font-weight:600}.email-btn.amber{background:var(--amber);color:var(--bg);border-color:var(--amber)}.email-fine{color:var(--muted);font-size:11.5px}.invite-row{align-items:center;gap:8px;display:flex}.invite-link{font-family:var(--mono);background:var(--surface2);border:1px solid var(--line);color:var(--amber);white-space:nowrap;border-radius:8px;flex:1;padding:10px 12px;font-size:12.5px;overflow-x:auto}.wr-live{font-family:var(--disp);letter-spacing:2px;color:var(--red);align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.wr-dot{background:var(--red);border-radius:50%;width:9px;height:9px;animation:1.2s infinite blink}.wr-count{font-family:var(--mono);color:var(--amber);font-variant-numeric:tabular-nums;font-size:46px;font-weight:700}.wr-avatars{flex-wrap:wrap;justify-content:center;gap:6px;max-width:360px;display:flex}.wr-av{opacity:.8;font-size:19px;animation:2.4s infinite bob}.wr-av.you{opacity:1;filter:drop-shadow(0 0 8px var(--amber-glow));font-size:24px}@keyframes bob{50%{transform:translateY(-3px)}}.wr-doors{color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:8px 14px;font-size:13px}.wr-doors.closed{color:var(--red);border-color:var(--red)}.wr-tip{color:var(--text);min-height:20px;font-size:13.5px;font-style:italic;animation:.4s fadeup}.lockseq{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;min-height:70vh;display:flex}.big-lock.shaking{animation:.5s infinite shake}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.big-lock.opening .shackle{transform-origin:16px 21px;animation:.5s forwards pop}@keyframes pop{to{transform:translateY(-7px)rotate(-24deg)}}.lockseq-label{font-family:var(--disp);letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-size:20px}.count-num{font-family:var(--disp);color:var(--amber);font-size:130px;font-weight:800;animation:.7s countpop}.count-num.go{color:var(--mint);letter-spacing:6px}@keyframes countpop{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}.game-screen{gap:11px}.game-top{justify-content:space-between;align-items:center;display:flex}.pz-count{font-family:var(--disp);letter-spacing:1px;font-size:26px;font-weight:800}.pz-count span{color:var(--muted);font-size:18px}.pz-tier{letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-size:11px}.tier-Brutal,.tier-FinalBoss{color:var(--red)}.stopwatch{font-family:var(--mono);color:var(--amber);background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums;border-radius:10px;padding:6px 14px;font-size:28px;font-weight:700}.progress-strip{gap:3px;display:flex}.progress-strip .tick{background:var(--surface2);border-radius:3px;flex:1;height:5px}.progress-strip .tick.done{background:var(--mint)}.progress-strip .tick.live{background:var(--amber);animation:1s infinite blink}@keyframes blink{50%{opacity:.45}}.board-wrap{flex-direction:column;gap:10px;display:flex}.board-wrap.solved-flash .grid{box-shadow:0 0 0 3px var(--mint), 0 0 34px #5fe0b766}.grid{aspect-ratio:1;background:var(--surface);border:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;border-radius:12px;width:100%;display:grid;position:relative;overflow:hidden}.cell{border:1px solid #2b37578c;justify-content:center;align-items:center;display:flex;position:relative}.cell.visited{background:#ffb84a0f}.num{z-index:3;background:var(--surface2);border:2px solid var(--line);width:58%;max-width:44px;height:58%;max-height:44px;font-family:var(--disp);color:var(--text);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:clamp(14px,4.2vw,21px);font-weight:800;display:flex;position:relative}.num-hit{background:var(--amber);border-color:var(--amber-hot);color:var(--bg)}.num-next{border-color:var(--amber);animation:1.1s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 6px #ffb84a2e}}.path-svg{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.board-hint{color:var(--muted);text-align:center;font-size:12.5px}.board-hint b{color:var(--amber)}.board-actions{justify-content:center;gap:10px;display:flex}.result-hero{text-align:center;align-items:center}.rh-label{letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-size:12px}.rh-time{font-family:var(--mono);color:var(--amber);font-variant-numeric:tabular-nums;font-size:50px;font-weight:700}.rh-rank{font-family:var(--disp);letter-spacing:.5px;font-size:21px;font-weight:700}.rh-rank.in-money{color:var(--mint)}.rh-splits{color:var(--muted);font-size:13px}.share-card{flex-direction:column;gap:10px;width:100%;display:flex}.share-card pre{font-family:var(--mono);color:var(--text);background:var(--bg);border:1px dashed var(--amber);text-align:left;white-space:pre-wrap;border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6}.lb{flex-direction:column;max-height:340px;display:flex;overflow-y:auto}.lb-row{border-bottom:1px solid #2b375780;align-items:center;gap:10px;padding:7px 6px;font-size:13.5px;display:flex}.lb-row:nth-child(-n+3) .lb-rank{color:var(--amber)}.lb-rank{font-family:var(--mono);width:34px;color:var(--muted);font-weight:700}.lb-name{flex:1;font-weight:500}.lb-flag{opacity:.85}.lb-time{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}.lb-me{border:1px solid var(--amber);background:#ffb84a1f;border-radius:8px}.lb-me .lb-name,.lb-me .lb-time{color:var(--amber);font-weight:700}.spinner{border:3px solid var(--line);border-top-color:var(--amber);border-radius:50%;width:22px;height:22px;margin:0 auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.link-btn{color:var(--amber);cursor:pointer;font-size:13px;font-family:var(--body);background:0 0;border:none;padding:0;text-decoration:underline}
