:root{--bg:#0b0e1a;--panel:#161a2eb8;--panel-solid:#161a2e;--border:#ffffff1a;--border-strong:#ffffff29;--text:#f3f5ff;--muted:#8b93b5;--primary:#6d8bff;--primary2:#9b5cff;--success:#3ddc97;--danger:#ff6b81;--warning:#ffc14d;--canvas:#faf9f6;--shadow:0 16px 48px #0006;--radius:16px;--safe-b:env(safe-area-inset-bottom,0px);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.45}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{background:radial-gradient(900px 500px at 12% -8%, #6d8bff47, transparent 55%), radial-gradient(700px 420px at 100% 0%, #9b5cff38, transparent 50%), radial-gradient(600px 360px at 70% 110%, #3ddc9714, transparent 45%), var(--bg);overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer;background:linear-gradient(135deg, var(--primary), var(--primary2));color:#fff;border:none;border-radius:12px;padding:.72rem 1.15rem;font-weight:600;transition:transform .12s,opacity .12s,filter .12s;box-shadow:0 8px 22px #6d8bff47}button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}button.ghost{border:1px solid var(--border);box-shadow:none;color:var(--text);background:#ffffff0d}button.ghost:hover:not(:disabled){filter:none;background:#ffffff17}button.block{width:100%}input{border:1px solid var(--border);background:#00000047;border-radius:12px;outline:none;width:100%;padding:.8rem .95rem;transition:border-color .15s,box-shadow .15s}input:focus{border-color:#6d8bffb3;box-shadow:0 0 0 3px #6d8bff2e}input:disabled{opacity:.55}input::placeholder{color:#8b93b5b3}.lobby{min-height:100%;padding:1.5rem 1rem calc(1.5rem + var(--safe-b));place-items:center;display:grid}.lobby-inner{gap:1.25rem;width:min(400px,100%);display:grid}.brand{text-align:center}.brand-icon{border:1px solid var(--border-strong);width:72px;height:72px;box-shadow:var(--shadow);background:linear-gradient(145deg,#6d8bff59,#9b5cff40);border-radius:22px;place-items:center;margin:0 auto .85rem;font-size:2.1rem;display:grid}.brand h1{letter-spacing:.06em;background:linear-gradient(100deg,#fff 10%,#b8c7ff 45%,#e0c3ff 90%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.85rem,5vw,2.35rem);font-weight:800}.lobby-card{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);border-radius:22px;gap:.85rem;padding:1.15rem;display:grid}.tabs{background:#00000047;border-radius:14px;grid-template-columns:1fr 1fr;gap:.3rem;padding:.28rem;display:grid}.tabs button{box-shadow:none;color:var(--muted);background:0 0;border-radius:11px;padding:.65rem .5rem;font-weight:600}.tabs button.active{color:#fff;background:linear-gradient(135deg,#6d8bff73,#9b5cff59)}.field label{color:var(--muted);margin-bottom:.35rem;font-size:.82rem;font-weight:600;display:block}.code-input{text-align:center;letter-spacing:.28em;text-transform:uppercase;font-size:1.25rem;font-weight:700}.error-banner{color:var(--danger);text-align:center;min-height:1.15rem;font-size:.88rem}.game{max-width:1320px;height:100%;padding:.65rem;padding-bottom:calc(.65rem + var(--safe-b));grid-template:"top top top""left main right"minmax(0,1fr)/200px minmax(0,1fr) 260px;gap:.65rem;margin:0 auto;display:grid}.game-top{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;flex-wrap:wrap;grid-area:top;align-items:center;gap:.5rem .75rem;padding:.55rem .75rem;display:flex}.top-left,.top-right,.top-center{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.top-center{flex:1;justify-content:center;min-width:0}.top-right{margin-left:auto}.pill{white-space:nowrap;background:#ffffff12;border-radius:999px;align-items:center;gap:.3rem;padding:.28rem .65rem;font-size:.82rem;font-weight:600;display:inline-flex}.pill.phase-drawing{color:#c5d2ff;background:#6d8bff33}.pill.phase-lobby{color:var(--muted);background:#ffffff12}.pill.phase-roundEnd{color:var(--warning);background:#ffc14d2e}.pill.phase-gameEnd{color:var(--success);background:#3ddc9726}.word-display{letter-spacing:.14em;text-align:center;font-size:clamp(1rem,2.5vw,1.35rem);font-weight:800}.word-display .hint{letter-spacing:.22em;color:#dce3ff}.timer-wrap{align-items:center;gap:.45rem;min-width:88px;display:flex}.timer-num{font-variant-numeric:tabular-nums;color:var(--warning);text-align:right;min-width:2.4rem;font-size:1.05rem;font-weight:800}.timer-num.urgent{color:var(--danger);animation:.7s infinite blink}@keyframes blink{50%{opacity:.45}}.timer-ring{background:conic-gradient(var(--warning) var(--p,100%), #ffffff14 0);border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.timer-ring:after{content:"";background:var(--panel-solid);border-radius:50%;width:26px;height:26px}.timer-ring.urgent{background:conic-gradient(var(--danger) var(--p,100%), #ffffff14 0)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;min-height:0;padding:.75rem;display:flex;overflow:hidden}.side-left{grid-area:left}.side-right{grid-area:right}.main-col{flex-direction:column;grid-area:main;gap:.55rem;min-width:0;min-height:0;display:flex}.panel-head{justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.55rem;display:flex}.panel-head h3{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.75rem;font-weight:700}.room-code-btn{width:100%;box-shadow:none;background:linear-gradient(145deg,#6d8bff29,#9b5cff1a);border:1px dashed #6d8bff73;border-radius:14px;flex-direction:column;align-items:center;gap:.15rem;margin-bottom:.55rem;padding:.7rem .5rem;display:flex}.room-code-btn .code{letter-spacing:.2em;font-size:1.35rem;font-weight:800}.room-code-btn .hint{color:var(--muted);letter-spacing:0;font-size:.72rem;font-weight:500}.share-row{grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.55rem;display:grid}.share-mini{box-shadow:none;padding:.45rem .4rem;font-size:.8rem}.overlay-actions{gap:.45rem;display:grid}.overlay-actions button{width:100%}.my-chip{background:#6d8bff1f;border:1px solid #6d8bff40;border-radius:12px;align-items:center;gap:.5rem;margin-bottom:.55rem;padding:.45rem .55rem;font-size:.88rem;display:flex}.avatar{color:#fff;text-shadow:0 1px 2px #00000040;border-radius:9px;flex-shrink:0;place-items:center;width:28px;height:28px;font-size:.72rem;font-weight:800;display:grid}.avatar.lg{border-radius:11px;width:34px;height:34px;font-size:.85rem}.player-list{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;flex-direction:column;flex:1;gap:.35rem;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.player-list li{background:#ffffff09;border-radius:12px;align-items:center;gap:.45rem;padding:.42rem .45rem;transition:background .15s;display:flex}.player-list li.me{background:#6d8bff1f;outline:1px solid #6d8bff59}.player-list li.drawing-now{background:#ffc14d1a}.player-meta{flex-direction:column;flex:1;gap:.08rem;min-width:0;display:flex}.player-name{white-space:nowrap;text-overflow:ellipsis;font-size:.86rem;font-weight:600;overflow:hidden}.player-tags{flex-wrap:wrap;gap:.25rem;display:flex}.badge{color:var(--muted);background:#ffffff1a;border-radius:999px;padding:.05rem .35rem;font-size:.65rem;font-weight:600}.badge.drawer{color:var(--warning);background:#ffc14d38}.badge.host{color:#d4b8ff;background:#9b5cff38}.badge.done{color:var(--success);background:#3ddc972e}.score{font-variant-numeric:tabular-nums;color:var(--success);text-align:right;min-width:1.5rem;font-size:.92rem;font-weight:800}.side-actions{gap:.4rem;margin-top:.55rem;display:grid}.side-actions button{width:100%}.canvas-card{background:var(--canvas);border:1px solid var(--border);min-height:0;box-shadow:var(--shadow);touch-action:none;border-radius:18px;flex:1;position:relative;overflow:hidden}.canvas-card canvas{cursor:crosshair;width:100%;height:100%;display:block}.canvas-card.readonly canvas{cursor:default}.toolbar{background:var(--panel);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.5rem .65rem;display:flex}.tool-group{flex-wrap:wrap;align-items:center;gap:.3rem;display:flex}.tool-sep{background:var(--border);width:1px;height:22px;margin:0 .15rem}.color-dot{border:2px solid #0000;border-radius:50%;width:26px;height:26px;padding:0;position:relative;box-shadow:inset 0 0 0 1px #0000001f,0 1px 3px #00000026}.color-dot.active{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 2px #6d8bff73,inset 0 0 0 1px #0000001f}.color-dot.light-border{box-shadow:inset 0 0 0 1px #0003,0 0 0 1px #ffffff40}.size-btn{width:36px;height:32px;box-shadow:none;background:#ffffff0f;border-radius:10px;place-items:center;padding:0;display:grid}.size-btn.active{background:#6d8bff59}.size-btn i{background:currentColor;border-radius:50%;display:block}.toolbar .spacer{flex:1}.chat-log{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent;flex-direction:column;flex:1;gap:.35rem;min-height:0;display:flex;overflow:auto}.msg{word-break:break-word;background:#ffffff0a;border-radius:10px;padding:.4rem .5rem;font-size:.86rem;animation:.2s msg-in}@keyframes msg-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.msg.system{color:var(--muted);text-align:center;background:0 0;padding:.2rem .3rem;font-size:.78rem}.msg.correct{color:var(--success);background:#3ddc9724;font-weight:650}.msg .who{color:#a8b6ff;margin-right:.25rem;font-weight:700}.guess-form{gap:.4rem;margin-top:.55rem;display:flex}.guess-form input{flex:1;min-width:0}.guess-form button{flex-shrink:0;padding-inline:1rem}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;text-align:center;z-index:2;background:#0b0e1a94;place-items:center;padding:1rem;animation:.2s fade-in;display:grid;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay .card{border:1px solid var(--border-strong);width:100%;max-width:340px;box-shadow:var(--shadow);background:#161a2ef5;border-radius:20px;padding:1.35rem 1.5rem;animation:.22s pop}@keyframes pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}.overlay h2{margin:0 0 .4rem;font-size:1.25rem}.overlay p{color:var(--muted);margin:0 0 1rem;font-size:.92rem}.overlay .answer{color:var(--warning);margin-bottom:.75rem;font-size:1.15rem;font-weight:800}.rank-list{text-align:left;gap:.35rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.rank-list li{background:#ffffff0a;border-radius:10px;align-items:center;gap:.5rem;padding:.4rem .5rem;font-size:.9rem;display:flex}.rank-list .medal{text-align:center;width:1.4rem;font-weight:800}.rank-list .medal.gold{color:#ffd56a}.rank-list .medal.silver{color:#c5c9d6}.rank-list .medal.bronze{color:#d4a574}.toast{left:50%;bottom:calc(1.25rem + var(--safe-b));z-index:50;border:1px solid var(--border-strong);box-shadow:var(--shadow);text-align:center;background:#161a2ef2;border-radius:999px;max-width:min(90vw,360px);padding:.65rem 1.1rem;font-size:.9rem;font-weight:600;animation:.25s toast-in;position:fixed;transform:translate(-50%)}.toast.err{color:#ffb3be;border-color:#ff6b8173}.toast.ok{color:#9aefc8;border-color:#3ddc9766}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media (width<=900px){.game{grid-template:"top""main""right""left"/1fr;gap:.5rem;height:auto;min-height:100%;padding:.5rem}.game-top{z-index:5;position:sticky;top:0}.canvas-card{aspect-ratio:4/3;min-height:52vw;max-height:58vh}.side-left,.side-right{max-height:none}.side-right{min-height:220px;max-height:280px}.side-left{max-height:220px}.player-list{grid-template-columns:1fr 1fr;gap:.3rem;display:grid}.top-center{flex-basis:100%;order:3}.word-display{width:100%}}@media (width<=420px){.player-list{grid-template-columns:1fr}.timer-ring{display:none}}