:root{--bg: #0b1020;--surf: #131a2e;--bd: #26304d;--tx: #eef2ff;--mu: #93a0c4;--ac: #2f6bff;box-sizing:border-box}@media (prefers-color-scheme: light){:root:not([data-theme=dark]){--bg: #e9eefb;--surf: #fff;--bd: #cfd8ee;--tx: #0f1730;--mu: #53608a}}:root[data-theme=dark]{--bg: #0b1020;--surf: #131a2e;--bd: #26304d;--tx: #eef2ff;--mu: #93a0c4}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--tx);font:400 15px/1.4 IBM Plex Sans,system-ui,sans-serif;overflow:clip;-webkit-tap-highlight-color:transparent}#c{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#ui,#hud,#scr{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud[hidden],#scr[hidden]{display:none}.top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;right:8px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}#players{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0}.pl{background:var(--surf);border:2px solid var(--bd);border-left:5px solid var(--c);border-radius:10px;padding:3px 7px;min-width:88px;line-height:1.2}.pl.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}.pl b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.pl span{font:500 10px JetBrains Mono,monospace;color:var(--mu)}.btns{display:flex;gap:5px;flex-shrink:0}.ib{pointer-events:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);color:var(--tx);font-size:18px;cursor:pointer}.bot{position:absolute;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;flex-direction:column;align-items:center;gap:7px}#info{background:var(--surf);border:1px solid var(--bd);border-radius:10px;padding:5px 12px;font-weight:600;text-align:center;max-width:92vw;font-size:14px}#info:empty{display:none}#dice{display:flex;gap:10px}.die{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#f8fafc;color:#0f172a;font:700 20px JetBrains Mono,monospace;box-shadow:0 2px #94a3b8}.die.used{opacity:.35;text-decoration:line-through}#choice{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.btn{pointer-events:auto;min-height:50px;padding:0 20px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);color:var(--tx);font:600 15px IBM Plex Sans,sans-serif;cursor:pointer}.btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}.btn.big{min-width:200px;min-height:56px;font-size:18px;font-weight:700}.btn:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:2px}#toast{position:fixed;left:50%;top:30%;transform:translate(-50%);background:var(--ac);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}#toast.on{opacity:1}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:12px;background:color-mix(in srgb,var(--bg) 82%,transparent);pointer-events:auto;overflow:auto}.card{width:min(420px,100%);background:var(--surf);border:1px solid var(--bd);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:9px;max-height:100%;overflow:auto}.card.wide{width:min(560px,100%)}.card h2,.card h3{margin:0}.card h3{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}.mu{color:var(--mu);margin:0}.logo{font:700 40px/1 IBM Plex Sans,sans-serif;text-align:center;letter-spacing:.06em}.logo span{color:var(--ac);margin-left:6px}.opts{display:flex;flex-direction:column;gap:7px}.opt{text-align:left;min-height:52px;padding:7px 12px;border-radius:12px;border:2px solid var(--bd);background:transparent;color:var(--tx);cursor:pointer;font:inherit}.opt small{display:block;color:var(--mu)}.opt[aria-pressed=true],.seg button[aria-pressed=true]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,transparent)}.seg{display:flex;gap:5px}.seg button{flex:1;min-height:46px;border-radius:10px;border:2px solid var(--bd);background:transparent;color:var(--tx);font:600 14px inherit;cursor:pointer}.chk{display:flex;gap:10px;align-items:center;min-height:36px}.chk input[type=checkbox]{width:22px;height:22px}.row{display:flex;gap:8px;margin-top:4px}.row .btn{flex:1}.prow{display:flex;gap:7px;align-items:center}.prow input,.prow select,.chk select{min-height:46px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);padding:0 10px;font:inherit}.prow input{flex:1;min-width:0}.dot{width:16px;height:16px;border-radius:50%;flex:none}.tag{font:500 10px JetBrains Mono,monospace;color:var(--mu);width:40px}.tag.wide{width:auto;flex:1;text-align:right}.rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}.hd{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:3px;vertical-align:middle}.online-panel{position:fixed;z-index:20;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 20px));max-height:88dvh;overflow:auto;padding:18px;border:1px solid #475569;border-radius:18px;background:#111b2e;color:#f1f5f9;box-shadow:0 16px 60px #0008;pointer-events:auto}.online-panel[hidden]{display:none}.online-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}.online-panel input{width:100%;min-width:0;padding:10px;border-radius:8px;border:1px solid #64748b;background:#0b1020;color:#fff;font:inherit;font-size:16px}.online-setup label{display:block;margin:10px 0}.online-panel .btn{padding:8px 12px;margin:3px 0}.online-status{color:#93c5fd;font-size:13px}.online-lobby p{font-size:13px;margin:7px 0;overflow-wrap:anywhere}.online-chat{margin-top:14px;border-top:1px solid #334155;padding-top:10px}.online-chat summary{cursor:pointer;-webkit-user-select:none;user-select:none}.online-messages{max-height:160px;overflow:auto;overflow-wrap:anywhere;font-size:13px}.online-send{display:flex;gap:6px;align-items:center}.online-panel.playing{inset:100px 12px auto auto;transform:none;width:260px;max-height:calc(100dvh - 220px);padding:12px}.online-panel.collapsed>:not(header){display:none}.online-panel .online-collapse{display:none}.online-panel.playing .online-collapse{display:inline-block}.online-panel.playing header{gap:5px;font-size:12px}.online-panel.playing header .btn{padding:6px 8px}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important}}@media (max-width: 800px){.online-panel.playing{inset:auto 8px 140px auto;width:200px;max-height:28dvh;font-size:12px;padding:8px}.online-panel.playing .online-messages{max-height:60px}}@media (max-width: 480px){body{font-size:14px}.pl{min-width:72px;padding:2px 5px;border-left-width:4px}.pl b{font-size:11px;max-width:80px}.pl span{font-size:9px}.ib{width:40px;height:40px;font-size:16px;border-radius:10px}.die{width:40px;height:40px;font-size:18px}.btn.big{min-width:160px;min-height:50px;font-size:16px}.btn{min-height:46px;font-size:14px;padding:0 14px}#info{font-size:13px;padding:4px 10px}.card{padding:14px;border-radius:14px;gap:8px}.logo{font-size:32px}.online-panel{width:calc(100vw - 16px);padding:14px;border-radius:14px;max-height:92dvh}.online-panel.playing{inset:auto 0 0 0;width:100%;max-height:42dvh;border-radius:14px 14px 0 0;padding:10px 12px;border-left:none;border-right:none;border-bottom:none}.online-panel.playing .online-messages{max-height:80px}.seg{flex-wrap:wrap}.seg button{min-width:80px}.prow{flex-wrap:wrap}.prow input{width:100%}}@media (max-height: 560px){.btn.big{min-height:44px}.die{width:38px;height:38px}.card{padding:10px;gap:6px}.logo{font-size:28px}.bot{gap:5px;bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}#info{padding:3px 8px;font-size:12px}.online-panel.playing{max-height:26dvh}}@media (max-width: 360px){.pl{min-width:60px}.pl b{max-width:60px;font-size:10px}.btn.big{min-width:140px;font-size:14px}.die{width:36px;height:36px;font-size:16px}}