:root{--bg: #0d1b2a;--bg2: #122740;--panel: #16283c;--panel2: #1d3450;--text: #e8f0f2;--muted: #9db4c4;--accent: #43a047;--danger: #e53935;--c-red: #e53935;--c-green: #43a047;--c-blue: #1e88e5;--c-yellow: #f9a825;--c-treatment: #8e24aa}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:linear-gradient(160deg,var(--bg) 0%,var(--bg2) 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}.app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}h1,h2,h3,p{margin:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel2);background:var(--panel2);color:var(--text);border-radius:12px;padding:.7rem 1.2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .08s ease,filter .15s ease}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ghost{background:transparent}.btn-big{width:100%;padding:.9rem;font-size:1.1rem}.panel{background:var(--panel);border:1px solid var(--panel2);border-radius:16px;padding:1rem}.field{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted)}input{background:var(--bg);border:1px solid var(--panel2);border-radius:10px;color:var(--text);font-size:1.05rem;padding:.7rem .9rem;outline:none;width:100%}input:focus{border-color:var(--accent)}.hint{color:var(--muted);font-size:.85rem}.divider{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--panel2)}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.dot.on{background:var(--accent)}.dot.off{background:var(--danger)}.badge{font-size:.7rem;background:var(--panel2);border-radius:999px;padding:.1rem .5rem;color:var(--muted)}.badge-me{color:var(--accent)}.conn-banner{position:fixed;top:0;left:0;right:0;text-align:center;background:var(--danger);color:#fff;font-size:.8rem;padding:.25rem;z-index:60}.toast{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;z-index:70;box-shadow:0 6px 24px #00000073;max-width:90vw;text-align:center}.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;overflow-y:auto}.home-logo{width:clamp(64px,14vh,110px)}.home-title{font-size:clamp(1.6rem,5vh,2.4rem)}.home-sub{color:var(--muted);margin-bottom:.75rem;text-align:center}.home-panel{width:min(420px,92vw);display:flex;flex-direction:column;gap:.9rem}.join-row{display:flex;gap:.6rem}.code-input{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-weight:700;font-size:1.3rem;max-width:160px}.lobby{flex:1;display:flex;gap:1rem;align-items:stretch;justify-content:center;padding:1rem;overflow-y:auto;flex-wrap:wrap}.lobby-qr,.lobby-players{display:flex;flex-direction:column;gap:.8rem;width:min(400px,92vw)}.lobby-qr{align-items:center;text-align:center}.room-code{letter-spacing:.3em;color:var(--accent);font-size:1.4em}.qr{width:min(220px,30vh);border-radius:12px;background:#fff;padding:8px}.lobby-share{display:flex;gap:.6rem}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;flex:1}.player-list li{display:flex;align-items:center;gap:.6rem;background:var(--bg);border-radius:10px;padding:.55rem .8rem}.player-name{flex:1;font-weight:600}.card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;border:2px solid transparent;background:var(--panel2);color:#fff;padding:3px;cursor:default;font-family:inherit;transition:transform .1s ease,box-shadow .15s ease;flex-shrink:0}.card.clickable{cursor:pointer}.card.selected{transform:translateY(-8px);box-shadow:0 0 0 3px #ffd54f,0 8px 18px #00000080}.card.disabled{opacity:.75}.card-name{font-size:.58rem;font-weight:700;text-align:center;line-height:1.05;text-shadow:0 1px 2px rgba(0,0,0,.5)}.card-icon-wrap{display:grid;place-items:center}.c-red{background:linear-gradient(165deg,var(--c-red),#8e1d1b);border-color:#ff8a80}.c-green{background:linear-gradient(165deg,var(--c-green),#1b5e20);border-color:#a5d6a7}.c-blue{background:linear-gradient(165deg,var(--c-blue),#0d47a1);border-color:#90caf9}.c-yellow{background:linear-gradient(165deg,var(--c-yellow),#b26a00);border-color:#ffe082}.c-wild{background:linear-gradient(135deg,var(--c-red) 0%,var(--c-yellow) 30%,var(--c-green) 60%,var(--c-blue) 100%);border-color:#fff}.c-treatment{background:linear-gradient(165deg,var(--c-treatment),#4a148c);border-color:#ce93d8}.card-hand{width:clamp(58px,13vh,92px);aspect-ratio:5 / 7}.card-slot{width:100%;height:100%}.card-mini{width:100%;height:100%;border-radius:6px;border-width:1px}.body{display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--panel2);border-radius:12px;padding:6px}.body-header{display:flex;align-items:center;gap:6px;background:transparent;border:2px solid transparent;border-radius:8px;color:var(--text);font-size:.78rem;font-weight:600;padding:2px 6px;font-family:inherit}.body-header.in-turn{border-color:var(--accent)}.body-header.target{border-color:#ffd54f;animation:pulse 1s infinite}.body-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body-handcount{color:var(--muted);font-size:.68rem;white-space:nowrap}.turn-badge{background:var(--accent);color:#fff;border-radius:999px;font-size:.62rem;padding:0 6px;text-transform:uppercase}.slots{display:flex;gap:5px}.slot{position:relative;border-radius:10px;border:2px dashed var(--panel2);background:var(--bg);padding:0;font-family:inherit;transition:box-shadow .15s ease}.slot.target{border-style:solid;border-color:#ffd54f;box-shadow:0 0 10px #ffd54f8c;animation:pulse 1s infinite;cursor:pointer}.slot.picked{border-style:solid;border-color:#80cbc4;box-shadow:0 0 10px #80cbc499}.slot.immunized{border-style:solid;border-color:gold}.slot-ghost{display:grid;place-items:center;width:100%;height:100%;opacity:.28}.slot-red .slot-ghost{color:var(--c-red)}.slot-green .slot-ghost{color:var(--c-green)}.slot-blue .slot-ghost{color:var(--c-blue)}.slot-yellow .slot-ghost{color:var(--c-yellow)}.body-me .slot{width:clamp(58px,12.5vh,90px);aspect-ratio:5 / 7}.body-compact .slot{width:clamp(32px,7.5vh,50px);aspect-ratio:5 / 7;border-radius:7px}.chips{position:absolute;bottom:2px;left:2px;right:2px;display:flex;flex-wrap:wrap;gap:2px}.chip{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 1px 3px #0009}.body-compact .chip{width:11px;height:11px}.chip-red{background:var(--c-red)}.chip-green{background:var(--c-green)}.chip-blue{background:var(--c-blue)}.chip-yellow{background:var(--c-yellow)}.chip-wild{background:linear-gradient(135deg,var(--c-red),var(--c-green),var(--c-blue))}.immune-badge{position:absolute;top:-6px;right:-4px;background:gold;color:#4d3800;font-size:.52rem;font-weight:800;border-radius:999px;padding:0 5px;text-transform:uppercase}.game{flex:1;display:flex;flex-direction:column;gap:6px;padding:6px;min-height:0}.rivals{display:flex;gap:8px;overflow-x:auto;align-items:flex-start;flex-shrink:0;padding-bottom:2px}.mid{flex:1;display:flex;gap:8px;min-height:0}.my-area{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}.body-me .slots{justify-content:center}.body-me{gap:8px;padding:10px}.body-me .body-header{font-size:.95rem}.sidebar{width:clamp(150px,26vw,230px);display:flex;flex-direction:column;gap:6px;flex-shrink:0}.counters{display:flex;justify-content:space-between;gap:6px;background:var(--panel);border:1px solid var(--panel2);border-radius:10px;padding:5px 9px;font-size:.72rem;color:var(--muted);white-space:nowrap}.log{flex:1;overflow-y:auto;background:var(--panel);border:1px solid var(--panel2);border-radius:10px;padding:6px 8px;font-size:.7rem;display:flex;flex-direction:column;gap:3px;min-height:0}.log-empty{color:var(--muted)}.log-entry{line-height:1.25}.log-win{color:#ffd54f;font-weight:700}.log-destroy{color:#ef9a9a}.log-immunize{color:#a5d6a7}.log-treatment{color:#ce93d8}.bottom{display:flex;gap:8px;align-items:stretch;flex-shrink:0}.hand{flex:1;display:flex;gap:6px;align-items:center;overflow-x:auto;background:var(--panel);border:1px solid var(--panel2);border-radius:12px;padding:6px 10px;min-width:0}.actionbar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--panel2);border-radius:12px;padding:6px 10px;flex-shrink:0;max-width:46vw}.actionbar .hint{max-width:220px}.end-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040a12d1;display:grid;place-items:center;z-index:50}.end-panel{display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;width:min(360px,90vw);padding:1.6rem}.rotate-overlay{display:none}@media(orientation:portrait){.rotate-overlay{display:grid;place-items:center;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:80;font-size:1.1rem;text-align:center;padding:2rem}}@keyframes pulse{0%,to{box-shadow:0 0 6px #ffd54f59}50%{box-shadow:0 0 14px #ffd54fbf}}