@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --color-paper:#f6f5f3;--color-surface:#fff;--color-ink:#171512;--color-ink-800:#25221e;--color-on-ink:#fff;
  --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;
  --color-warn:#d99a00;--color-scrim:rgba(246,245,243,.92);
  --me:#d6337f;--foe:#25221e;--me-tint:#fde4ef;--foe-tint:#ebe7e3;
  --radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;
  --font-sans:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
/* Тёмную тему включает theme.js: в Телеграме по его теме, иначе по системной. */
:root[data-theme=dark]{
  color-scheme:dark;
  --color-paper:#141312;--color-surface:#1f1d1b;--color-ink:#f3efe9;--color-ink-800:#ddd7ce;--color-on-ink:#171512;
  --color-line:#38342f;--color-line-soft:#2b2825;--color-muted:#a8a199;--color-soft:#8b847c;--color-faint:#6a645d;
  --color-signal:#f0529c;--color-signal-deep:#f0529c;--color-signal-ink:#ff8fc2;--color-signal-dark:#ffc0dc;
  --color-signal-soft:#4b1d35;--color-signal-faint:#2c1721;
  --color-danger:#e2706a;--color-danger-ink:#f29c96;--color-danger-soft:#3a1f1d;
  --color-warn:#e5aa1e;--color-scrim:rgba(20,19,18,.92);
  --me:#f0529c;--foe:#e9e4dc;--me-tint:#4b1d35;--foe-tint:#3a3632;
}
*{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}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(html,body,body *){touch-action:manipulation}
input,textarea,select{font-size:16px}
body.game{-webkit-touch-callout:none;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:var(--color-on-ink)}
.btn.primary:hover{background:var(--color-ink-800);color:var(--color-on-ink)}
.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:16px;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:6px;font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1}
.brand .mark{display:block;flex:none;width:40px;height:40px}
.brand i{font-style:normal;color:var(--color-signal-deep)}

.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:var(--color-scrim)}
body.game>.overlay.scrim{z-index:80}
.stack{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px;text-align:center}
a.back{align-self:flex-start;margin:-8px 0 -8px -8px;padding:8px;font-size:12px;color:var(--color-soft);text-decoration:none;transition:color .15s}
a.back:hover{color:var(--color-ink)}
html.tg a.back{display:none}
.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{display:block;width:176px;height:176px;padding:0;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:#fff}
.qr svg{display:block;width:100%;height:100%}
button.qr{cursor:zoom-in}
.qr-zoom{z-index:30;justify-content:center;cursor:zoom-out}
.qr-zoom .qr{width:min(100%,340px,60dvh);height:auto;aspect-ratio:1}

body.game>.overlay.lobby{z-index:10}
.lobby{padding-bottom:0}
.lobby>.stack{padding-bottom:24px}
.lobby-title{font-size:20px}
.about{width:100%}
.about .text-muted{margin-top:6px}
.about.has-shot{display:flex;align-items:flex-start;gap:12px;text-align:left}
.shot{position:relative;flex:none;width:54px;aspect-ratio:9/16;padding:0;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--color-line);background:var(--color-surface);cursor:zoom-in}
.shot img,.shot-zoom img{display:block;width:100%;height:100%;object-fit:cover}
.shot svg{position:absolute;right:3px;bottom:3px;width:18px;height:18px;padding:4px;border-radius:50%;background:var(--color-ink);fill:none;stroke:var(--color-on-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shot-zoom{z-index:30;justify-content:center;cursor:zoom-out}
.shot-zoom img{width:auto;height:auto;max-width:min(100%,340px);max-height:calc(100dvh - 120px);border-radius:var(--radius-xl);border:1px solid var(--color-line)}
.invite{display:flex;flex-direction:column;gap:10px;width:100%;padding:14px;text-align:left}
.invite-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.invite .code-big{margin-top:6px;padding-left:0;font-size:40px}
.invite .qr{flex:none;width:96px;height:96px}
.invite .row .btn{flex:1 1 0;min-width:0;padding-inline:8px}
.link-out{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.link-out.show{position:static;width:100%;height:44px;padding:0 12px;border:1px solid var(--color-line);opacity:1;pointer-events:auto;color:var(--color-muted)}
.roster-box{display:flex;flex-direction:column;gap:6px;width:100%}
.set-fold{width:100%;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface);text-align:left}
.set-fold summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;list-style:none}
.set-fold summary::-webkit-details-marker{display:none}
.set-fold summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px 0;border:solid var(--color-soft);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s}
.set-fold[open] summary::after{margin-bottom:-3px;transform:rotate(225deg)}
.set-fold[open] summary{border-bottom:1px solid var(--color-line-soft)}
.set-sum{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--color-muted);font-weight:500;line-height:1.35;text-align:right}
.set-fold[open] .set-sum{visibility:hidden}
.set-fold .set-list{padding:12px}
/* Главная кнопка лобби всегда на экране, сколько бы настроек ни было выше. */
.lobby-foot{position:sticky;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;width:calc(100% + 48px);margin:0 -24px -24px;padding:12px 24px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--color-paper) 12px)}
.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;display:flex;gap:6px}

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}
.hud [data-help]{font-size:15px;font-weight:700}
/* Имя соперника в шапке обрезается: с кнопкой справки на узком экране ему остаётся совсем мало места. */
.pchip [data-foename]{max-width:9ch;overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){.hud.has-help [data-foename]{max-width:6ch}}
.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}
.tmr{display:flex;align-items:center;gap:8px;width:100%;height:22px}
.tmr span{flex:1;height:6px;border-radius:3px;background:var(--color-line-soft);overflow:hidden}
.tmr i{display:block;height:100%;width:0;background:var(--foe)}
.tmr.mine i{background:var(--me)}
.tmr.low i{background:var(--color-danger)}
.tmr b{width:34px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--color-muted)}
.tmr.low b{color:var(--color-danger-ink)}

body.duel #stage{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
html.tg-full body.game{top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
html.tg-full .hud{padding-top:8px}
html.tg-full .corner{top:8px}
.room-menu{position:relative}
.net-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--color-surface);background:var(--color-warn)}
.net-dot.off{background:var(--color-danger)}
.social-panel{position:fixed;z-index:62;width:236px;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-2xl)}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;font-size:13px;font-weight:600}
.menu-row b{font-size:18px;letter-spacing:.12em}
.react-bar{position:fixed;left:50%;bottom:calc(6px + env(safe-area-inset-bottom));z-index:61;transform:translateX(-50%);display:flex;gap:5px}
.react-bar:not(.pop){max-width:calc(100% - 16px);width:max-content}
.react-bar:not(.pop) button{flex-shrink:1;min-width:0}
.react-bar:not(.pop) .react-nudge{flex-shrink:0}
.react-bar button{flex:none;width:40px;height:44px;padding:0;border:1px solid var(--color-line-soft);border-radius:var(--radius-lg);background:var(--color-surface);font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}
.react-bar button:active{transform:scale(.92)}
.react-bar .react-nudge{width:auto;padding:0 12px;border-color:var(--color-ink);background:var(--color-ink);color:var(--color-on-ink);font:inherit;font-size:13px;font-weight:700}
.react-bar .react-nudge:disabled{opacity:.3;transform:none;cursor:default}
.react-bar.pop{left:auto;bottom:auto;z-index:62;transform:none;flex-wrap:wrap;width:152px;padding:10px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-2xl)}
.react-bar.pop .react-nudge{flex:1 1 100%;height:40px}
.react-layer{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.react-float{position:absolute;width:48px;margin-left:-24px;text-align:center;font-size:38px;line-height:1;animation:reactdrop 1.8s ease-out forwards}
.react-float.up{bottom:calc(64px + env(safe-area-inset-bottom));animation-name:reactup}
.react-float.down{top:calc(56px + env(safe-area-inset-top))}
@keyframes reactdrop{0%{transform:translateY(-12px) scale(.4);opacity:0}15%{transform:translateY(6px) scale(1.15);opacity:1}30%{transform:translateY(8px) scale(1)}75%{opacity:1}100%{transform:translateY(52px);opacity:0}}
@keyframes reactup{0%{transform:translateY(12px) scale(.4);opacity:0}15%{transform:translateY(-6px) scale(1.15);opacity:1}30%{transform:translateY(-8px) scale(1)}75%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.toast{position:fixed;left:50%;bottom:calc(64px + 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:var(--color-on-ink);font-size:13px;font-weight:600;text-align:center;pointer-events:none}
.turn-cue{position:fixed;left:50%;z-index:59;transform:translateX(-50%);padding:7px 16px;border-radius:99px;background:var(--color-signal-deep);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;pointer-events:none}
.turn-cue.in{animation:cuein 1.6s ease-out both}
@keyframes cuein{0%{opacity:0;transform:translate(-50%,-8px) scale(.9)}10%{opacity:1;transform:translate(-50%,0) scale(1.08)}20%{transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,0) scale(1)}}
.hud.my-turn{border-bottom-color:var(--color-signal-deep);box-shadow:inset 0 -2px 0 var(--color-signal-deep)}
.pick-card{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;max-height:100%;padding:16px}
.pick-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pick-head .text-muted{margin-top:2px;font-size:12px}
.pick-scroll{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;overflow-y:auto;overscroll-behavior:contain}
/* Запас высоты под каталогом: поиск поднимается к верху окна, и найденное не уходит под клавиатуру. */
.pick-scroll .pick-all{flex:none;min-height:calc(100dvh - 156px)}
.pick-top,.pick-all{display:flex;flex-direction:column}
.pick-top{gap:12px}
.pick-all{gap:8px}
.pick-note{text-align:center}
.pick-count{display:flex;align-items:baseline;justify-content:space-between}
.pick-find{position:relative;display:block}
.pick-find svg{position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;stroke:var(--color-faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pick-find .field{padding-left:36px;-webkit-appearance:none;appearance:none}
.pick-none{padding:16px 0;text-align:center}
.pick-list{flex:none;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface)}
.pick{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 14px 10px 10px;border:0;background:none;color:var(--color-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;touch-action:manipulation}
.pick+.pick,.pick-fold .pick,.pick-fold+.pick-fold{border-top:1px solid var(--color-line-soft)}
.pick:hover:not(:disabled),.pick:active:not(:disabled){background:var(--color-signal-faint)}
.pick:disabled{opacity:.45;cursor:default}
.pick .tile{width:40px;height:40px}
.pick-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pick-body b{font-size:15px;line-height:1.3}
.pick-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--color-muted);font-size:12.5px;line-height:1.4}
.pick-sub{overflow:hidden;color:var(--color-muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.pick-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:2px}
.pick-meta{display:flex;align-items:center;gap:6px}
.pick-who{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--color-muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pick-who svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick-bot{flex:none;padding:2px 6px;border-radius:5px;background:var(--color-signal-soft);color:var(--color-signal-dark);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pick.big{align-items:center;padding-right:12px}
.pick.big .pick-body{gap:4px}
.pick.big .pick-desc{-webkit-line-clamp:3}
.pick.big .tile{width:63px;height:84px}
.pick-cover{flex:none;width:63px;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.pick-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.pick-fold summary{display:flex;align-items:center;gap:10px;padding:12px 14px;list-style:none;cursor:pointer}
.pick-fold summary::-webkit-details-marker{display:none}
.pick-fold summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px 0;border:solid var(--color-soft);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s}
.pick-fold[open] summary::after{margin-bottom:-3px;transform:rotate(225deg)}
.pick-fold summary i{flex:none;font-style:normal;color:var(--color-faint);font-size:12px;font-weight:700}

.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)}
.player.off{opacity:.5}
.player.mine{cursor:text}
.player.mine:focus-within{border-color:var(--color-signal-deep)}
.player.mine input{flex:1;min-width:0;margin:-4px 0;padding:0;border:0;outline:0;background:none;color:inherit;font:inherit;font-size:16px;user-select:text;-webkit-user-select:text}
.player.mine svg{flex:none;width:14px;height:14px;stroke:var(--color-faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.player.mine:not(.edit) input,.player.mine.edit span,.player.mine.edit svg{display:none}
.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}

.set-list{display:flex;flex-direction:column;gap:12px;width:100%}
.set-row{display:flex;flex-direction:column;gap:6px}
.set-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg-b{flex:1 1 0;min-width:64px;min-height:40px;padding:6px 4px;line-height:1.2;border:1.5px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);font:inherit;font-size:13px;font-weight:700;color:var(--color-ink);cursor:pointer;touch-action:manipulation}
.seg-b.on{border-color:var(--me);background:var(--color-signal-faint);box-shadow:inset 0 0 0 1px var(--me)}
.set-desc{font-size:12px;line-height:1.35;color:var(--color-muted)}
.set-desc:empty{display:none}
.set-list.ro .seg-b{pointer-events:none;opacity:.55}
.set-list.ro .seg-b.on{opacity:1}

/* 3D-игры (body.scene3d): сцена во всю ширину, кнопки и подписи поверх неё, управление в нижней панели .dock. */
body.scene3d #stage{gap:0;justify-content:flex-start;padding:0}
.scene{position:relative;flex:1;min-height:120px;width:100%;overflow:hidden;isolation:isolate;touch-action:none}
.scene>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}
.scene-info{position:absolute;left:12px;top:10px;z-index:2;max-width:calc(100% - 116px);pointer-events:none}
.scene-info small{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;line-height:14px;text-transform:uppercase;color:var(--color-soft)}
.scene-info b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:20px}
.scene-tools{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:6px}
.scene-btn{display:grid;place-items:center;flex:none;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);font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;touch-action:manipulation;transition:color .15s,border-color .15s,transform .15s}
.scene-btn:hover{color:var(--color-ink)}
.scene-btn:active{transform:scale(.94)}
.scene-btn:disabled{opacity:.4;cursor:default;transform:none}
.scene-btn[aria-pressed=true]{border-color:var(--color-signal-deep);background:var(--color-signal-faint);color:var(--color-signal-ink)}
.scene-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene-turn{position:absolute;bottom:10px;z-index:3}
.scene-turn.left{left:10px}
.scene-turn.right{right:10px}
.scene-hint{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 116px);padding:5px 12px;border-radius:99px;background:var(--color-scrim);color:var(--color-muted);font-size:11px;line-height:1.3;text-align:center;pointer-events:none}
.scene-hint:empty{display:none}
.scene-tag{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:2px 8px;border-radius:99px;background:rgba(23,21,18,.8);color:#fff;font-size:11px;font-weight:700;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.scene-tag.me{background:var(--color-signal-deep)}
.dock{flex:none;display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px;padding:10px 12px calc(56px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-line)}
/* Полосы реакций нет в игре с ботом: место под неё не держим. */
body.scene3d:not(:has(.react-bar:not(.pop):not([hidden]))) .dock{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.dock-status{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dock-status p{min-width:0;font-size:13px;font-weight:600;line-height:18px}
.dock-status span,.dock-status output{flex:none;color:var(--color-muted);font-size:11px;line-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dock-seg{display:flex;gap:3px;padding:3px;border-radius:var(--radius-lg);background:var(--color-line-soft)}
.dock-seg button{flex:1;min-width:0;min-height:34px;padding:4px 6px;border:0;border-radius:6px;background:transparent;color:var(--color-muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;touch-action:manipulation}
.dock-seg button[aria-pressed=true]{background:var(--color-surface);color:var(--color-ink);box-shadow:0 0 0 1px var(--color-line)}
.dock-seg button:disabled{cursor:default}
.dock-step{display:flex;align-items:center;gap:8px}
.dock-step>div{flex:1;min-width:0;text-align:center}
.dock-step b{display:block;font-size:13px;font-weight:600;line-height:18px}
.dock-step span{display:block;color:var(--color-muted);font-size:11px;line-height:15px}
.dock-step>.btn{flex:none;width:44px;padding:0;font-size:16px}
.dock-range{display:flex;align-items:center;gap:10px;color:var(--color-muted);font-size:12px}
.dock-range input{flex:1;min-width:0;height:30px;margin:0;accent-color:var(--color-signal-deep);touch-action:none;cursor:pointer}
.dock-range output{min-width:36px;text-align:right;color:var(--color-ink);font-weight:700;font-variant-numeric:tabular-nums}
.dock-note{color:var(--color-muted);font-size:12px;line-height:1.45;text-align:center}
@media(min-width:592px){.dock{border-inline:1px solid var(--color-line);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}}
@media(max-height:540px) and (min-width:600px){
  body.scene3d #stage{flex-direction:row;align-items:stretch;padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  body.scene3d:not(:has(.react-bar:not(.pop):not([hidden]))) #stage{padding-bottom:env(safe-area-inset-bottom)}
  .dock,body.scene3d:not(:has(.react-bar:not(.pop):not([hidden]))) .dock{justify-content:center;width:300px;padding-bottom:10px;overflow-y:auto;touch-action:pan-y;border-top:0;border-right:0;border-left:1px solid var(--color-line);border-radius:0}
  .scene-hint{display:none}
}

/* Кнопки лобби под главной и окно справки: одни на все игры. */
.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.menu-actions .btn{min-width:0;padding-inline:8px;color:var(--color-ink)}
.menu-actions .btn:last-child:nth-child(odd){grid-column:1/-1}
body.game>.overlay.dialog-layer{z-index:85;touch-action:pan-y}
.dialog{flex:none;display:flex;flex-direction:column;gap:16px;width:100%;max-width:460px;text-align:left}
.dialog-title{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:4px;background:var(--color-surface);box-shadow:0 -24px 0 var(--color-surface)}
.dialog-title h2{font-size:22px}
.dialog-title .icon-btn{flex:none;font-size:20px}
.dialog section h3{font-size:14px}
.dialog section p{margin-top:4px;color:var(--color-muted);font-size:13px;line-height:1.5}

/* Карточные столы: таблички игроков на борту и слой летящих карт, штампов и конфетти (shared/cardfx.js). */
.pod{position:absolute;transform:translate(-50%,-50%);width:max-content}
.pod-in{position:relative;display:flex;flex-direction:column;align-items:center}
.pod-ava{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #fff6ef;color:#fff;font-size:13px;font-style:normal;font-weight:700;line-height:1}
.pod-plate{min-width:56px;max-width:84px;margin-top:-8px;padding:9px 8px 3px;border-radius:9px;background:#211c19e6;color:#fff6ef;text-align:center}
.pod-plate b{display:block;overflow:hidden;font-size:10px;font-weight:600;line-height:12px;opacity:.75;white-space:nowrap;text-overflow:ellipsis}
.pod-plate strong{display:block;font-size:13px;line-height:15px;font-variant-numeric:tabular-nums}
.pod-fan{display:flex;justify-content:center;height:20px;margin-top:3px}
.pod-fan i{width:13px;height:19px;margin-inline:-4px;border:1.5px solid #fff6ef;border-radius:3px;background:var(--pod-back,#1d1a17)}
.pod-flag{position:absolute;right:-16px;top:2px;z-index:2;padding:1px 6px;border-radius:99px;background:var(--color-signal-deep);color:#fff;font-size:9px;font-weight:800;line-height:14px;white-space:nowrap;transform:rotate(10deg)}
.pod.is-turn .pod-ava{box-shadow:0 0 0 3px var(--color-signal)}
.pod.is-turn .pod-plate{box-shadow:inset 0 0 0 1.5px var(--color-signal)}
.pod.is-gone{opacity:.4}
.pod.is-winner .pod-plate{background:var(--color-signal-deep)}
.fx-layer{position:fixed;inset:0;z-index:55;overflow:hidden;pointer-events:none}
.fx-layer>*{position:absolute;left:0;top:0;will-change:transform}
.fx-stamp{padding:4px 14px;border:3px solid currentColor;border-radius:10px;background:var(--color-surface);color:var(--color-signal-deep);font-size:26px;font-weight:800;line-height:30px;white-space:nowrap}
.fx-stamp.is-bad{color:var(--color-danger)}
.fx-stamp.is-big{font-size:44px;line-height:48px;border-width:4px}
.fx-bit{width:7px;height:11px;border-radius:2px}
.fx-ring{border:4px solid currentColor;border-radius:50%}

/* Оформление игрока: анимация платных наборов реакций и эффект победы поверх экрана итога. */
.win-fx{position:fixed;inset:0;z-index:90;width:100%;height:100%;pointer-events:none}
.overlay>.win-fx{z-index:0}
.overlay>.win-fx~*{position:relative;z-index:1}
.react-float.rich{font-size:46px}
.react-float b{display:block;font-weight:400}
.react-float i{position:absolute;left:50%;top:50%;width:18px;margin:-9px 0 0 -9px;font-size:16px;font-style:normal;line-height:18px;opacity:0;animation:fxspark .9s ease-out forwards}
.react-float.fx-hop b{animation:fxhop 1.2s ease-in-out}
.react-float.fx-burst b{animation:fxburst .7s ease-out}
.react-float.fx-spin b{animation:fxspin 1s ease-out}
.react-float.fx-ghost b{animation:fxghost 1.8s ease-in-out}
@keyframes fxhop{0%,40%,80%,100%{transform:none}20%{transform:translateY(-14px) rotate(-12deg)}60%{transform:translateY(-9px) rotate(10deg)}}
@keyframes fxburst{0%{transform:scale(.3)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes fxspin{0%{transform:rotate(-360deg) scale(.4)}100%{transform:none}}
@keyframes fxghost{0%,100%{transform:none}25%{transform:translateX(-12px) rotate(-8deg)}75%{transform:translateX(12px) rotate(8deg)}}
.nudge-frame{position:absolute;inset:0;--nudge:var(--color-signal);box-shadow:inset 0 0 0 5px var(--nudge),inset 0 0 38px 8px var(--nudge);opacity:0;animation:nudgeframe 2s ease-out forwards}
@keyframes nudgeframe{0%,100%{opacity:0}8%,46%,82%{opacity:1}28%,66%{opacity:.3}}
@keyframes fxspark{0%{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:1}100%{transform:rotate(var(--a)) translateY(-46px) scale(1);opacity:0}}