:root{
  --color-paper:#f6f5f3;--color-surface:#fff;--color-ink:#171512;--color-ink-800:#25221e;
  --color-line:#e1ddd8;--color-line-soft:#ebe8e4;--color-muted:#6f6a64;--color-soft:#928c85;--color-faint:#b5afa8;
  --color-signal:#f0529c;--color-signal-deep:#d6337f;--color-signal-ink:#b21e69;--color-signal-dark:#7d1148;
  --color-signal-soft:#fce3ee;--color-signal-faint:#fff1f7;
  --color-danger:#d65c56;--color-danger-ink:#a3524d;--color-danger-soft:#fdf1f0;
  --radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;
  --font-sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.game{position:fixed;inset:0;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
h1,h2,h3,p{margin:0}
h1,h2{font-size:28px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
h3{font-size:15px;font-weight:700}
.text-muted{color:var(--color-muted);font-size:13px;line-height:1.55}
.microlabel{letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:700;color:var(--color-faint)}

.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-2xl);padding:20px}
.card.pop{border-color:var(--color-ink);box-shadow:6px 6px 0 0 var(--color-signal)}
.card.center{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:340px;padding:28px;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;touch-action:manipulation;transition:color .15s,background .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:hover{color:var(--color-ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.primary{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.btn.primary:hover{background:var(--color-ink-800);color:#fff}
.btn.lg{min-height:52px;padding:12px 20px;font-size:14px;font-weight:700}
.btn.pop{box-shadow:3px 3px 0 0 var(--color-signal)}
.btn.pop:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--color-signal)}
.btn.pop:active{transform:none;box-shadow:2px 2px 0 0 var(--color-signal)}
.btn.pop:disabled{box-shadow:none}
.btn.quiet{border-color:transparent;background:transparent}
.btn.block{width:100%}

.field{height:44px;width:100%;min-width:0;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);padding:0 12px;font:inherit;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;user-select:text;-webkit-user-select:text}
.field::placeholder{color:var(--color-faint)}
.field:focus{border-color:var(--color-signal-deep);box-shadow:0 0 0 2px rgba(240,82,156,.3)}
.field.code{text-align:center;font-size:20px;font-weight:700;letter-spacing:.3em;padding-left:calc(12px + .3em);text-transform:uppercase}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;background:var(--color-line-soft);color:var(--color-muted);white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--color-faint)}
.badge.signal{background:var(--color-signal-soft);color:var(--color-signal-dark)}
.badge.signal .dot{background:var(--color-signal-deep)}

.tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-xl);background:var(--color-line-soft);color:var(--color-muted)}
.tile.signal{background:var(--color-signal-soft);color:var(--color-signal-ink)}
.tile svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.brand{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.brand .mark{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--color-ink);color:var(--color-signal);font-size:11px}

.note{min-height:1.3em;font-size:12px;font-weight:500;color:var(--color-soft)}
.note:empty{display:none}
.note.error{color:var(--color-danger-ink)}
.win{color:var(--color-signal-ink)}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;background:var(--color-paper);overflow-y:auto}
.overlay>.stack,.overlay>.card{margin-block:auto}
.scrim{background:rgba(246,245,243,.92)}
.stack{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px;text-align:center}
.back{position:absolute;top:16px;left:16px;padding:8px;font-size:12px;color:var(--color-soft);text-decoration:none;transition:color .15s}
.back:hover{color:var(--color-ink)}
.sep{display:flex;align-items:center;gap:12px;width:100%}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--color-line)}
.row{display:flex;gap:10px;width:100%}
.code-big{font-size:56px;font-weight:700;letter-spacing:.14em;padding-left:.14em;line-height:1;margin-top:10px}
.score{font-size:48px;font-weight:700;letter-spacing:.04em;line-height:1}

.qr{width:176px;height:176px;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:#fff}
.qr svg{display:block;width:100%;height:100%}
.link-row{display:flex;gap:10px;width:100%}
.link-row .field{font-size:12px;color:var(--color-muted)}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.scanner{z-index:20}
.scan-view{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-ink)}
.scan-view video{display:block;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:18%;border:3px solid var(--color-signal);border-radius:var(--radius-xl);pointer-events:none}

.icon-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-muted);cursor:pointer;touch-action:manipulation}
.icon-btn:hover{color:var(--color-ink)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.corner{position:absolute;top:calc(8px + env(safe-area-inset-top));right:8px;z-index:3}

:root{--me:#d6337f;--foe:#25221e;--me-tint:#fde4ef;--foe-tint:#ebe7e3}
body.duel{display:flex;flex-direction:column}
.hud{flex:none;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.hud .grow{flex:1;display:flex;justify-content:center;min-width:0}
.hud .icon-btn{width:36px;height:36px}
.pchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.pchip b{font-size:20px;font-variant-numeric:tabular-nums}
.pdot{width:10px;height:10px;border-radius:50%;flex:none}
.pdot.me{background:var(--me)}
.pdot.foe{background:var(--foe)}
.badge.turn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.badge.turn.mine{background:var(--color-signal-soft);color:var(--color-signal-dark)}
#stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.stage-note{font-size:12px;color:var(--color-muted);text-align:center}

.netinfo{position:fixed;left:10px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:5px;text-align:left;color:var(--color-soft);pointer-events:none;white-space:nowrap}
.netinfo b{display:block;font-size:11px;line-height:13px;font-weight:700;color:var(--color-muted)}
.netinfo small{display:block;font-size:9px;line-height:11px}
.netinfo i{width:7px;height:7px;border-radius:50%;background:var(--color-faint);flex:none}

body.duel #stage{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.social-fab{position:fixed;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:61;width:42px;height:42px;touch-action:none;box-shadow:0 1px 0 var(--color-line)}
.social-panel{position:fixed;z-index:62;width:236px;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-2xl)}
.react-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.react-row button{height:44px;font-size:24px;border:1px solid var(--color-line-soft);border-radius:var(--radius-lg);background:var(--color-paper);cursor:pointer;padding:0;touch-action:manipulation}
.react-row button:active{transform:scale(.94)}
.react-layer{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.react-float{position:absolute;bottom:90px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:44px;line-height:1;animation:floatup 2.2s ease-out forwards}
.react-float small{font-size:11px;font-weight:600;color:#fff;padding:1px 7px;border-radius:99px}
@keyframes floatup{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{transform:translateY(-280px) scale(1);opacity:0}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;max-width:90%;padding:9px 16px;border-radius:99px;background:var(--color-ink);color:#fff;font-size:13px;font-weight:600;text-align:center;pointer-events:none}
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick{display:flex;align-items:center;gap:12px;padding:10px;text-align:left;font:inherit;color:var(--color-ink);background:var(--color-surface);border:1.5px solid var(--color-line);border-radius:var(--radius-xl);cursor:pointer;touch-action:manipulation}
.pick:hover:not(:disabled){border-color:var(--color-ink)}
.pick:disabled{opacity:.5;cursor:default}
.pick-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-body b{font-size:15px}
.pick-body .text-muted{font-size:12px}

.roster{display:flex;flex-direction:column;gap:6px;width:100%}
.player{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);font-size:14px;font-weight:600;text-align:left}
.player i{width:12px;height:12px;border-radius:50%;flex:none}
.player em{margin-left:auto;font-style:normal;font-size:12px;color:var(--color-soft)}
.player.first{border-color:var(--color-ink)}
.ranks{display:flex;flex-direction:column;gap:6px;width:100%}
.hud.multi{flex-wrap:wrap;row-gap:4px}
.hud.multi [data-chips]{flex:1;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;min-width:0}
.hud.multi .pchip{font-size:12px;padding:2px 6px;border-radius:8px}
.hud.multi .pchip b{font-size:16px}
.pchip.turn{background:var(--color-signal-soft)}
.pchip.off{opacity:.4}