:root{--bg: #06121f;--panel: rgba(10, 24, 40, .88);--accent: #39d0ff;--danger: #ff5d3b;--good: #4be38a;--gold: #ffd76a;--text: #dfeaf5;--line: rgba(57, 208, 255, .28)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#lobby{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 25%,rgba(57,208,255,.12) 0%,transparent 55%),radial-gradient(ellipse at 50% 30%,#0d2b47 0%,var(--bg) 72%)}#lobby.hidden{display:none}.panel{width:min(92vw,400px);padding:30px 26px;background:var(--panel);border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;box-shadow:0 24px 60px #00000080,inset 0 1px #ffffff0f}.panel h1{font-size:36px;letter-spacing:6px;line-height:1.05;color:var(--accent);text-shadow:0 0 24px rgba(57,208,255,.45)}.panel .sub{margin:10px 0 22px;opacity:.7;font-size:14px}input,button{width:100%;padding:13px 14px;margin:6px 0;border-radius:10px;font-size:16px;border:1px solid var(--line);background:#06121fcc;color:var(--text)}input{text-align:center;letter-spacing:2px;text-transform:uppercase}input::placeholder{color:#dfeaf559;letter-spacing:1px}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #39d0ff26}button{border:none;font-weight:600;cursor:pointer;background:linear-gradient(180deg,#1d7ba6,#0f4a68);transition:transform .08s,filter .15s,box-shadow .2s}button:active{transform:scale(.97)}button:disabled{opacity:.4}button.primary{background:linear-gradient(180deg,#1d7ba6,#0f4a68)}button.ghost{background:transparent;border:1px solid var(--line)}button.glow{box-shadow:0 0 18px #4be38a59;border:1px solid var(--good)}button.wide{margin-top:12px}.row{display:flex;gap:8px}.row button{flex:0 0 38%}.divider{margin:14px 0 2px;font-size:13px;opacity:.55}#lobby-status{margin-top:14px;font-size:13px;min-height:20px}.seat-list{text-align:left;font-size:14px;margin:10px 0}.seat{padding:6px 8px;border-radius:8px}.seat.me{background:#39d0ff1a}.seat .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.bot-tag{font-size:10px;color:var(--gold);border:1px solid var(--gold);border-radius:4px;padding:1px 4px}.off{opacity:.5;font-size:11px}.err{color:var(--danger)}.ok{color:var(--good)}.diff-row{display:flex;gap:5px;margin-top:12px}.diff-chip{flex:1;padding:8px 4px;font-size:10px;letter-spacing:0;background:#06121fcc;border:1px solid var(--line);border-radius:8px;opacity:.55}.diff-chip.on{opacity:1;border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px #39d0ff40}#hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;display:none}#hud.on{display:block}#hud>*{pointer-events:auto}#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(180deg,#06121feb,#06121f00);font-size:13px;pointer-events:none}.tb-left,.tb-right{display:flex;align-items:center;gap:8px}.chip{padding:5px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line);font-size:12px;letter-spacing:.5px}.chip.room{color:var(--accent);font-weight:700;letter-spacing:2px}.chip.help{cursor:pointer;font-weight:700;color:var(--gold);padding:5px 14px;pointer-events:auto}#water-meter{display:flex;align-items:center;gap:4px;padding:5px 10px;background:var(--panel);border:1px solid var(--line);border-radius:20px}.wm-label{font-size:9px;letter-spacing:1px;opacity:.6;margin-right:4px}#water-meter .pip{width:9px;height:9px;border-radius:2px;background:#16324a;transition:background .3s}#water-meter .pip.on{background:var(--accent);box-shadow:0 0 6px #39d0ff99}#water-meter .pip.hot.on{background:var(--danger);box-shadow:0 0 6px #ff5d3b99}#ap{padding:5px 10px;background:var(--panel);border:1px solid var(--line);border-radius:20px;color:var(--gold);letter-spacing:2px;font-size:12px}.ap-label{font-size:9px;letter-spacing:1px;opacity:.6;margin-right:6px;color:var(--text)}#captured{display:flex;gap:5px;margin-left:8px}.cap{width:12px;height:12px;border-radius:3px;border:1px solid var(--cc);opacity:.25}.cap.got{background:var(--cc);opacity:1;box-shadow:0 0 8px var(--cc)}#players-panel{position:absolute;left:10px;top:60px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.pl{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;background:var(--panel);border:1px solid transparent;border-radius:12px;min-width:150px;transition:border-color .3s,box-shadow .3s}.pl.cur{border-color:var(--accent);box-shadow:0 0 14px #39d0ff40}.pl .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor}.pl-name{font-size:13px;font-weight:600}.pl-role{font-size:10px;opacity:.65}.pl-hand{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}.hc{width:10px;height:10px;border-radius:50%;background:var(--cc);box-shadow:0 0 5px var(--cc)}#gamelog{position:absolute;top:46px;left:50%;transform:translate(-50%);width:min(92vw,380px);display:flex;flex-direction:column;gap:3px;pointer-events:none}.gl-line{padding:3px 10px;border-radius:7px;background:#081422d9;border-left:2px solid var(--line);font-size:11px;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:feedin .25s ease-out}.gl-line:nth-child(n+5){display:none}.gl-line.warn{border-left-color:var(--accent);color:#bfe9ff}.gl-line.bad{border-left-color:var(--danger);color:#ffb4a0}.gl-line.good{border-left-color:var(--good);color:#a8f0c4}.gl-line.turn{border-left-color:var(--gold);color:var(--gold);font-weight:700}@keyframes feedin{0%{transform:translate(8px);opacity:0}}#tile-info{position:absolute;bottom:192px;left:50%;transform:translate(-50%);padding:6px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--line);font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}#tile-info.show{opacity:1}#banner{position:fixed;top:46%;left:50%;transform:translate(-50%);padding:10px 22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);font-size:15px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;z-index:50}#banner.show{opacity:1}#banner.bad{border-color:var(--danger);color:var(--danger)}#banner.good{border-color:var(--good);color:var(--good)}#pending-banner{position:absolute;top:152px;left:50%;transform:translate(-50%);max-width:92vw;padding:8px 16px;border-radius:12px;background:#1e140aeb;border:1px solid var(--line);font-size:12px;color:#cbd8e6;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6}#pending-banner.show{opacity:1}#pending-banner.mine{border-color:var(--danger);color:#ffb4a0;font-weight:700;animation:mustpulse 1s ease-in-out infinite}#hud.my-turn:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;border:2px solid rgba(255,215,106,.5);box-shadow:inset 0 0 40px #ffd76a1f}#turn-chip.mine{border-color:var(--gold);color:var(--gold);font-weight:700}#actions-bar{position:absolute;right:10px;bottom:104px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}#actions-bar button{padding:11px 18px;font-size:13px;width:auto;min-width:110px;border-radius:12px;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#actions-bar button.primary{background:linear-gradient(180deg,#1d7ba6,#0f4a68);border:none}#actions-bar button.ghost{opacity:.8}#actions-bar button.on{background:linear-gradient(180deg,#1d7ba6,#0f4a68);border-color:var(--accent);box-shadow:0 0 10px #39d0ff4d}#actions-bar button.down{background:#081a26d9;border-color:var(--line);box-shadow:inset 0 3px 10px #000000a6;color:#7fa9bd;transform:translateY(1px)}#actions-bar button.down:before{content:"● ";font-size:9px;vertical-align:1px}.hint-chip{padding:8px 14px;border-radius:12px;background:var(--panel);border:1px dashed var(--gold);font-size:12px;color:var(--gold);white-space:nowrap}.status-chip{padding:6px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:11px;opacity:.85;white-space:nowrap}.status-chip.mine{border-color:var(--gold);color:var(--gold);font-weight:700;font-size:12px;opacity:1;animation:mustpulse 1.6s ease-in-out infinite}.hint-chip.must{border-style:solid;border-color:var(--danger);color:#ffb4a0;animation:mustpulse 1s ease-in-out infinite}@keyframes mustpulse{0%,to{box-shadow:0 0 4px #ff5d3b4d}50%{box-shadow:0 0 16px #ff5d3bb3}}#hand.overflow .card{border-color:var(--danger);box-shadow:0 0 12px #ff5d3b80,inset 0 0 12px #ff5d3b2e}#hand{position:absolute;left:0;right:0;bottom:0;display:flex;gap:7px;justify-content:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(6,18,31,.95),transparent);overflow-x:auto}.card{--cc: #888;flex:0 0 auto;width:60px;height:80px;border-radius:10px;border:1px solid var(--cc);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),#0d1f33;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 4px 12px #0006,inset 0 0 12px color-mix(in srgb,var(--cc) 18%,transparent);transition:transform .15s,box-shadow .2s}.card.sel{transform:translateY(-10px);box-shadow:0 0 16px var(--cc)}.card.ready{border-color:var(--gold);border-width:2px;box-shadow:0 0 16px #ffd76a8c,inset 0 0 14px #ffd76a33;animation:cardready 1.6s ease-in-out infinite}@keyframes cardready{0%,to{box-shadow:0 0 12px #ffd76a66,inset 0 0 12px #ffd76a26}50%{box-shadow:0 0 22px #ffd76abf,inset 0 0 18px #ffd76a4d}}.card-count{font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:8px;background:#ffffff14;border:1px solid var(--cc);color:var(--cc)}.card-hex{width:22px;height:22px;background:var(--cc);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 10px var(--cc)}.card-name{font-size:9px;letter-spacing:1px;color:var(--cc);font-weight:700}#card-sheet{--cc: #888;position:absolute;left:50%;bottom:106px;transform:translate(-50%);width:min(94vw,420px);background:var(--panel);border:1px solid var(--cc);border-radius:14px;padding:12px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 40px #0000008c,0 0 18px color-mix(in srgb,var(--cc) 30%,transparent);animation:sheetin .18s ease-out;z-index:6}@keyframes sheetin{0%{transform:translate(-50%,10px);opacity:0}}#card-sheet .cs-head{display:flex;gap:12px;align-items:flex-start}#card-sheet .card-hex{flex:0 0 auto;width:26px;height:26px;margin-top:2px}#card-sheet .cs-title{font-weight:700;font-size:15px;color:var(--cc)}#card-sheet .cs-desc{font-size:12px;opacity:.8;line-height:1.45;margin-top:3px}#card-sheet .cs-close{flex:0 0 auto;width:28px;height:28px;padding:0;margin:0;border-radius:8px;background:transparent;border:1px solid var(--line);font-size:13px;opacity:.7}#card-sheet .cs-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}#card-sheet .cs-actions button{width:auto;padding:9px 14px;margin:0;font-size:12px;border-radius:10px}#card-sheet .cs-hint{font-size:11px;opacity:.65;line-height:1.4;width:100%}.cs-site{display:inline-block;padding:2px 8px;margin:2px 2px 0 0;border-radius:8px;border:1px solid var(--line)}.cs-site.dry{color:var(--good)}.cs-site.flooded{color:var(--accent)}.cs-site.sunk{color:var(--danger);text-decoration:line-through;opacity:.6}#rules{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:none;align-items:center;justify-content:center;background:#040a12d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}#rules.on{display:flex}.rules-panel{width:min(94vw,460px);max-height:86vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;text-align:left}.rules-panel h2{color:var(--accent);letter-spacing:3px;font-size:20px;margin-bottom:10px;text-align:center}.rules-panel h3{color:var(--gold);font-size:13px;margin:14px 0 5px;letter-spacing:1px}.rules-panel p{font-size:13px;line-height:1.5;opacity:.9}.rules-panel button{margin-top:16px}#end-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:none;align-items:center;justify-content:center;background:#040a12e0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#end-screen.on{display:flex}#end-screen h2{font-size:26px;letter-spacing:3px;margin-bottom:10px}#end-screen p{opacity:.8;margin-bottom:18px;font-size:14px}@media(max-width:720px){#players-panel{top:auto;bottom:104px;left:8px;gap:4px}.pl{min-width:0;padding:5px 10px 5px 6px}.pl-role{display:none}#actions-bar button{min-width:90px;padding:10px 12px}}