:root{--bg-deep:#120c24;--bg-mid:#2a1a4f;--purple:#9458d3;--purple-dark:#60319e;--teal:#54bcae;--mint:#69d5c3;--gold:#ffe28b;--red:#e5484d;--text:#fff;--muted:#b9a9dc;--card:#ffffff0f;--line:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{color:var(--text);background:radial-gradient(ellipse at 50% 0%, #3b2370 0%, var(--bg-mid) 35%, var(--bg-deep) 80%);-webkit-user-select:none;user-select:none;font-family:Segoe UI,Roboto,system-ui,sans-serif;overflow:hidden}.stage{height:100%;padding:max(12px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom));flex-direction:column;display:flex;position:relative;overflow-y:auto}.center{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;margin:auto;padding:0 8px;display:flex}.logo{border:5px solid var(--mint);background:radial-gradient(circle,#4a2b86 0%,#1c1238 72%);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:180px;height:180px;display:flex;box-shadow:0 0 40px #69d5c359,inset 0 0 30px #0009}.logo.small{border-width:4px;width:120px;height:120px}.logo.small .logo-rabbit{width:44px}.logo.small .logo-peyfu{width:48px}.logo.small span{font-size:15px}.logo-rabbit{filter:drop-shadow(0 3px 6px #00000073);width:64px;height:auto}.logo-peyfu{width:66px;height:auto}.logo span{letter-spacing:3px;color:var(--gold);font-size:21px;font-weight:800}.btn{border:1px solid var(--line);width:100%;min-height:52px;color:var(--text);cursor:pointer;background:#ffffff14;border-radius:14px;padding:12px 18px;font-size:17px;font-weight:700}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn.primary{background:linear-gradient(180deg, #a86ae6 0%, var(--purple-dark) 100%);border-color:#b98af0;box-shadow:0 6px 18px #9458d366}.btn.small{border-radius:10px;width:auto;min-height:40px;padding:8px 14px;font-size:15px}.btn.ghost{background:0 0}.btn.danger{background:var(--red);border-color:var(--red)}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:6px;font-size:15px;text-decoration:underline}.name,.code-input{border:1px solid var(--line);width:100%;color:var(--text);text-align:center;-webkit-user-select:text;user-select:text;background:#00000040;border-radius:14px;outline:none;padding:14px 16px;font-size:18px}.name:focus,.code-input:focus{border-color:var(--mint)}.code-join{gap:8px;width:100%;display:flex}.code-join .code-input{letter-spacing:4px;flex:1;font-weight:700}.name-error{color:#ff8d90;margin:-8px 0 0;font-size:14px}.invite{color:var(--gold);margin:0;font-weight:700}.muted{color:var(--muted)}.small{margin:0;font-size:13px;line-height:1.5}.setup h2{margin:4px 0 0}.field{text-align:left;width:100%}.label{color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:0 0 6px 2px;font-size:13px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--card);min-width:64px;min-height:44px;color:var(--text);cursor:pointer;border-radius:12px;flex:1 0 auto;padding:8px 12px;font-size:15px;font-weight:600}.chip.on{background:var(--teal);border-color:var(--mint);color:#0d1f1c}.room-code{letter-spacing:10px;color:var(--gold);font-size:72px;font-weight:900;line-height:1}.room-link{color:var(--mint);margin-top:-8px;font-size:16px}.spinner{border:4px solid #ffffff26;border-top-color:var(--mint);border-radius:50%;width:32px;height:32px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.game{flex-direction:column;gap:8px;width:100%;max-width:560px;margin:0 auto;padding-top:36px;display:flex}.board-wrap{touch-action:none;width:min(100%,100dvh - 250px);min-width:260px;margin:0 auto;position:relative}.pbar{background:var(--card);border:1px solid #0000;border-radius:12px;align-items:center;gap:8px;padding:6px 8px;display:flex}.pbar.turn{border-color:#69d5c380}.pdot{border:2px solid #ccc;border-radius:50%;flex:none;width:14px;height:14px}.pdot.white{background:#fff}.pdot.black{background:#111}.pname{text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:1;min-width:0;font-weight:700;overflow:hidden}.offline{color:#ff8d90;font-size:12px}.clock{font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;background:#00000059;border-radius:10px;min-width:92px;padding:4px 12px;font-size:24px;font-weight:800}.clock.running{color:#111;background:#f1f1f1}.clock.low{background:var(--red);color:#fff}.moves{white-space:nowrap;color:var(--muted);scrollbar-width:none;gap:12px;padding:6px 4px;font-size:14px;display:flex;overflow-x:auto}.moves span:last-child{color:var(--text)}.game-meta{text-align:center;color:var(--muted);font-size:12px}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.actions .btn:not(.small){flex:1;width:auto}.hint{text-align:center;background:var(--card);border-radius:10px;padding:8px;font-size:14px}.hint.warn{background:#e5484d33}.hint.offer{background:#54bcae33;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.promo{z-index:5;background:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.promo-box{border:1px solid var(--line);background:#2a1a4f;border-radius:14px;gap:6px;padding:10px;display:flex}.promo-btn{background:var(--card);cursor:pointer;border:0;border-radius:10px;width:64px;height:64px;padding:4px}.promo-btn svg{width:100%;height:100%}.overlay{z-index:20;background:#0a061499;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.end-card{text-align:center;background:linear-gradient(#3b2370 0%,#1c1238 100%);border:1px solid #b98af0;border-radius:20px;width:100%;max-width:340px;padding:22px 18px 12px;box-shadow:0 20px 60px #0009}.end-card h2{margin:0 0 4px;font-size:28px}.end-card p{color:var(--muted);margin:0 0 16px}.end-actions{flex-direction:column;gap:8px;display:flex}.mute{top:max(8px, env(safe-area-inset-top));z-index:10;cursor:pointer;background:0 0;border:0;font-size:22px;position:absolute;right:8px}.banner{top:max(10px, env(safe-area-inset-top));z-index:9;background:#e5484de6;border-radius:10px;padding:6px 12px;font-size:13px;position:absolute;left:50%;transform:translate(-50%)}.toast{bottom:max(24px, env(safe-area-inset-bottom));z-index:30;text-align:center;background:#000000d9;border-radius:12px;max-width:90%;padding:10px 16px;font-size:15px;position:fixed;left:50%;transform:translate(-50%)}.code-input::placeholder{letter-spacing:normal;font-weight:400}