:root{--bg:#0f1c2e;--bg2:#142439;--panel:#1a2d46;--panel-2:#213755;--line:#2e4767;--text:#eaf2fb;--muted:#9db3cc;--ice:#7fe0f2;--ice-2:#4cc3dc;--danger:#ef6a6a;--ok:#55d6a0;--c-red:#e8554e;--c-yellow:#f2b83c;--c-green:#3fae7d;--c-blue:#3d84dc;--card-w:64px;--card-h:94px;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,PingFang TC,PingFang SC,Noto Sans TC,Noto Sans SC,Microsoft JhengHei,Microsoft YaHei,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(1200px 600px at 50% -10%, #1d3556 0%, var(--bg) 60%) fixed;color:var(--text);font-size:16px;line-height:1.5;overflow-x:hidden}h1,h2,h3,p{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:3px solid var(--ice);outline-offset:2px}.page{width:100%;max-width:520px;padding:12px 14px calc(20px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;margin:0 auto;display:flex}.center-page{justify-content:center;align-items:center;min-height:60vh}.top-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.row{align-items:center;display:flex}.gap{gap:8px}.grow{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.82rem}.error{color:var(--danger)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.panel h2,.panel h3{font-size:1.05rem}.brand{color:var(--ice);align-items:center;gap:8px;display:flex}.brand-mark{flex:none;width:34px;height:34px}.brand-name{color:var(--text);font-size:1.05rem;font-weight:800;line-height:1.1}.brand-en{letter-spacing:.08em;color:var(--muted);font-size:.7rem}.brand-big{text-align:center;flex-direction:column;margin-top:8px}.brand-big .brand-mark{width:76px;height:76px}.brand-big .brand-name{font-size:2.2rem}.tagline{text-align:center;color:var(--ice);font-size:1.1rem;font-weight:600}.foot{text-align:center;margin-top:8px}.foot a{color:var(--muted);font-size:.85rem}.btn{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;min-height:44px;padding:8px 16px;font-weight:700}.btn:hover:not(:disabled){border-color:var(--ice-2)}.btn.primary{background:linear-gradient(180deg, var(--ice), var(--ice-2));color:#06222b;border-color:#0000}.btn.danger{color:#ffd5d5;background:#4a2530;border-color:#7a3a47}.btn.ghost{background:0 0}.btn.big{min-height:52px;font-size:1.1rem}.btn.small{min-height:34px;padding:2px 10px;font-size:.85rem}.link-btn{color:var(--ice);background:0 0;border:none;align-self:flex-start;padding:8px 4px;text-decoration:underline}.icon-btn{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;width:40px;height:40px;font-size:1.1rem}input{border:1px solid var(--line);background:var(--bg2);border-radius:12px;width:100%;min-height:46px;padding:8px 12px;font-size:1rem}.field-label{font-size:.9rem;font-weight:700}.field{flex-direction:column;gap:6px;display:flex}.seg{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.seg button{border:1px solid var(--line);background:var(--bg2);border-radius:10px;min-height:40px;font-size:.85rem}.seg button.on{background:var(--ice);color:#06222b;border-color:#0000;font-weight:800}.lang-toggle{border:1px solid var(--line);background:var(--bg2);border-radius:999px;display:inline-flex;overflow:hidden}.lang-toggle button{color:var(--muted);background:0 0;border:none;padding:6px 10px;font-size:.78rem}.lang-toggle button.on{background:var(--ice);color:#06222b;font-weight:800}details>summary{cursor:pointer;padding:4px 0;font-weight:700}.how ol{color:var(--muted);margin:6px 0 0;padding-left:1.2rem}.count{color:var(--ice);font-weight:800}.player-list,.host-players,.scores,.log ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.player-list li,.host-players li,.scores li{background:var(--bg2);border:1px solid var(--line);border-radius:10px;align-items:center;gap:8px;padding:8px 10px;display:flex}.player-list li.me{border-color:var(--ice-2)}.dot{background:#5a6b80;border-radius:50%;flex:none;width:10px;height:10px}.dot.on{background:var(--ok)}.badge{background:var(--ice);color:#06222b;border-radius:999px;padding:1px 8px;font-size:.72rem;font-weight:800}.badge.dim{background:var(--line);color:var(--muted)}.log{color:var(--muted);font-size:.85rem}.log li{padding:2px 0}.game-page{gap:10px;min-height:100dvh}.game-top{justify-content:space-between;align-items:center;gap:6px;display:flex}.top-actions{align-items:center;gap:6px;display:flex}.banner{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:800}.banner.mine{border-color:var(--ice);color:#eafcff;background:linear-gradient(#1f5a68,#17414d);animation:1.6s ease-in-out infinite glow}@keyframes glow{50%{box-shadow:0 0 0 4px #7fe0f240}}.opponents{scrollbar-width:thin;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.opp{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;flex:none;gap:2px;min-width:92px;padding:6px 10px;display:flex}.opp.acting{border-color:var(--ice);box-shadow:0 0 0 2px #7fe0f259}.opp.off{opacity:.55}.opp-name{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;max-width:120px;font-size:.9rem;font-weight:700;display:flex;overflow:hidden}.opp-count{color:var(--muted);font-size:.85rem}.table{border:1px solid var(--line);background:radial-gradient(circle,#1e3c5c 0%,#14263b 80%);border-radius:20px;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:6px;padding:10px 6px;display:grid}.pile{flex-direction:column;align-items:center;gap:6px;display:flex}.pile-label{color:var(--muted);text-align:center;font-size:.72rem}.dir{color:var(--ice);font-size:2.2rem;line-height:1}.halo{border:3px solid #0000;border-radius:20px;padding:6px}.halo-red{border-color:var(--c-red)}.halo-yellow{border-color:var(--c-yellow)}.halo-green{border-color:var(--c-green)}.halo-blue{border-color:var(--c-blue)}.color-chip{color:#101820;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:800}.chip-red{background:var(--c-red)}.chip-yellow{background:var(--c-yellow)}.chip-green{background:var(--c-green)}.chip-blue{background:var(--c-blue)}.actions{flex-direction:column;gap:8px;display:flex}.color-row{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.color-btn{color:#101820;border:3px solid #ffffff40;border-radius:12px;min-height:56px;font-size:1.1rem;font-weight:900}.cb-red{background:var(--c-red)}.cb-yellow{background:var(--c-yellow)}.cb-green{background:var(--c-green)}.cb-blue{background:var(--c-blue)}.pulse{animation:1s ease-in-out infinite glow}.hand-area{background:linear-gradient(#0000,#08101c99);border-radius:16px;margin-top:auto;padding:6px 0 0}.hand-head{justify-content:space-between;padding:0 4px 4px;font-weight:700;display:flex}.hand{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:6px;padding:22px 6px 8px;display:flex;overflow-x:auto}.hand .card{scroll-snap-align:center;flex:none}.hand-actions{justify-content:center;gap:8px;padding:4px 0 2px;display:flex}.hand-actions .btn{flex:1;max-width:180px}.card{width:var(--card-w);height:var(--card-h);border:3px solid var(--card-color,#888);color:var(--card-color,#333);background:#f7fbff;border-radius:10px;padding:0;font-weight:900;transition:transform .12s,box-shadow .12s,opacity .12s;display:block;position:relative;overflow:hidden;box-shadow:0 2px 6px #00000059}.card-sm{--card-w:44px;--card-h:64px}.card-md{--card-w:64px;--card-h:94px}.card-lg{--card-w:86px;--card-h:126px}.c-red{--card-color:var(--c-red)}.c-yellow{--card-color:var(--c-yellow)}.c-green{--card-color:var(--c-green)}.c-blue{--card-color:var(--c-blue)}.c-wild{--card-color:#25344a;background:#eef3fa}.card .face{background:color-mix(in srgb, var(--card-color) 14%, white);border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;inset:6px 4px}.card .num{font-size:calc(var(--card-h) * .5);letter-spacing:-.04em;line-height:1}.card .glyph{width:64%;height:auto}.card .glyph-text{font-size:calc(var(--card-h) * .36)}.card .corner{font-size:calc(var(--card-h) * .15);z-index:1;line-height:1;position:absolute}.card .tl{top:3px;left:5px}.card .br{bottom:3px;right:5px;transform:rotate(180deg)}.card .shape{font-size:calc(var(--card-h) * .14);z-index:1;line-height:1;position:absolute;top:3px;right:4px}.card .risk{background:var(--danger);color:#fff;text-align:center;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:18px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.card-back{--card-color:#2b4a73;color:#cfe9f3;background:repeating-linear-gradient(45deg,#1a3558 0 8px,#1e3e68 8px 16px);border-color:#cfe9f3}.back-art{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.flake{opacity:.9;width:60%;height:auto}.back-count{background:#08101cb3;border-radius:999px;margin-top:2px;padding:0 8px;font-size:.9rem}button.card{cursor:pointer}.card.is-dim{opacity:.45;filter:saturate(.6)}.card.is-playable{transform:translateY(-6px);box-shadow:0 0 0 2px #7fe0f2bf,0 4px 10px #0006}.card.is-selected{box-shadow:0 0 0 3px var(--ice), 0 10px 18px #00000080;z-index:2;transform:translateY(-18px)scale(1.06)}.overlay{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#050a12b8;justify-content:center;align-items:flex-end;padding:0;display:flex;position:fixed;inset:0}.sheet{border:1px solid var(--ice-2);width:100%;max-width:520px;max-height:84dvh;padding:18px 18px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(#223c5e,#182d47);border-bottom:none;border-radius:24px 24px 0 0;flex-direction:column;gap:12px;animation:.22s ease-out rise;display:flex;position:relative;overflow-y:auto}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.q-kicker{color:var(--ice);letter-spacing:.04em;font-weight:800}.q-who{color:var(--muted);font-size:1.05rem}.q-text{font-size:1.6rem;font-weight:800;line-height:1.35}.q-hint{background:var(--bg2);border:1px dashed var(--ice-2);border-radius:12px;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.q-hint-label{color:var(--ice);font-size:.75rem;font-weight:800}.q-en{background:var(--bg2);border-radius:12px;padding:10px 12px;font-size:1rem}.q-en-hint{color:var(--muted);margin-top:4px}.q-note{color:var(--muted);font-size:.8rem}.q-actions{gap:8px;display:grid}.q-wait{text-align:center;color:var(--ice);padding:6px 0;font-weight:700}.q-min{position:absolute;top:12px;right:12px}.q-pill{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:49;border:1px solid var(--ice);background:#1f5a68;border-radius:999px;padding:12px 20px;font-weight:800;position:fixed;transform:translate(-50%);box-shadow:0 6px 18px #00000080}.end-sheet h2{font-size:1.5rem}.scores li.win{border-color:var(--ice)}.scores{counter-reset:s}.toast{left:50%;top:calc(12px + env(safe-area-inset-top));z-index:80;border:1px solid var(--line);text-align:center;background:#2a3d57;border-radius:12px;max-width:calc(100vw - 28px);padding:10px 16px;font-weight:700;position:fixed;transform:translate(-50%);box-shadow:0 6px 18px #00000080}.error-toast{background:#4a2530;border-color:#7a3a47}.conn-bar{z-index:90;color:#fff3d1;text-align:center;background:#7a5a1a;padding:6px;font-size:.85rem;font-weight:700;position:sticky;top:0}@media (width>=700px){.overlay{align-items:center}.sheet{border-bottom:1px solid var(--ice-2);border-radius:24px}:root{--card-w:72px;--card-h:104px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.last-call{top:calc(8px + env(safe-area-inset-top));z-index:70;filter:drop-shadow(0 6px 14px #0000008c);gap:8px;max-width:calc(100vw - 20px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.last-call .btn{min-height:48px;font-size:1rem}.answer-input{border:1px solid var(--line);background:var(--bg2);width:100%;min-height:84px;font:inherit;color:inherit;resize:vertical;border-radius:12px;padding:10px 12px}.answer-count{text-align:right;margin-top:-8px}.answers{flex-direction:column;gap:6px;display:flex}.answer-card{background:var(--panel);border:1px solid var(--ice-2);border-radius:12px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.answer-meta{color:var(--ice);font-size:.75rem;font-weight:800}.answer-q{color:var(--muted);font-size:.85rem}.answer-text{overflow-wrap:anywhere;white-space:pre-wrap;font-size:1.05rem;font-weight:700}.answer-list{flex-direction:column;gap:8px;margin:6px 0 0;padding:0;list-style:none;display:flex}.answer-list li{background:var(--bg2);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.admin-bar{text-align:center;color:#2b1d00;background:var(--c-yellow);border-radius:10px;padding:4px 8px;font-size:.85rem;font-weight:800}
