@font-face{font-family:"Oswald";src:url(../fonts/Oswald.ttf) format("truetype");font-weight:200 700;font-display:swap}
@font-face{font-family:"Rubik";src:url(../fonts/Rubik.ttf) format("truetype");font-weight:300 900;font-display:swap}
:root{
  --y:#f5c400; --y2:#ffd83a; --yd:#a88600;
  --bg:#0d0d0c; --bg2:#151513; --panel:#1b1a17; --panel2:#23221e; --line:#34322b;
  --txt:#ece7d6; --mut:#9a9480; --red:#e0362c; --red2:#7a1410; --grn:#57c25a; --pur:#8a4fd6;
  --r:12px;
  --stripes:repeating-linear-gradient(-45deg,var(--y) 0 10px,#111 10px 20px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Rubik",system-ui,sans-serif;color:var(--txt);background:var(--bg);font-size:14px;line-height:1.35;min-height:100vh;
  background-image:radial-gradient(1200px 600px at 20% -10%,rgba(245,196,0,.08),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(224,54,44,.07),transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
button{font:inherit;color:inherit;cursor:pointer}
.h{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.mut{color:var(--mut)}
.hidden{display:none!important}
[hidden]{display:none!important}

/* ---------- mockup nav ---------- */
.mocknav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;padding:6px 10px;background:#000;border-bottom:3px solid transparent;border-image:var(--stripes) 1}
.mocknav .tag{font:600 11px "Oswald";letter-spacing:.12em;color:#000;background:var(--y);padding:2px 6px;border-radius:3px;margin-right:6px}
.mocknav button{background:transparent;border:1px solid #333;border-radius:999px;padding:5px 14px;font:500 13px "Oswald";letter-spacing:.06em;text-transform:uppercase;color:#bbb}
.mocknav button.on{background:var(--y);color:#000;border-color:var(--y)}
.mocknav .sp{flex:1}
.mocknav .note{font-size:11px;color:#666}

/* ---------- generic ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;padding:9px 16px;font:600 14px "Oswald";letter-spacing:.06em;text-transform:uppercase;background:var(--panel2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line);transition:.15s}
.btn:hover{filter:brightness(1.15)}
.btn.y{background:var(--y);color:#111;box-shadow:0 3px 0 var(--yd),0 6px 18px rgba(245,196,0,.25)}
.btn.y:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yd)}
.btn.pur{background:var(--pur);color:#fff;box-shadow:0 3px 0 #5a2c99}
.btn.red{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red2)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:6px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:600 11px "Oswald";letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.turn{background:var(--y);color:#111}
.pill.out{background:var(--red);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 6px var(--grn)}
.pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,196,0,.6)}50%{box-shadow:0 0 0 6px rgba(245,196,0,0)}}
.av{--c:#555;width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 15px "Oswald";color:#111;background:var(--c);box-shadow:0 0 0 2px #000,0 0 0 3px var(--line)}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r)}

/* ---------- card back (CSS) ---------- */
.back{position:relative;width:100%;aspect-ratio:744/1051;border-radius:8%/5.7%;overflow:hidden;background:#111;
  box-shadow:inset 0 0 0 2px #000,0 2px 6px rgba(0,0,0,.6)}
.back::before{content:"";position:absolute;inset:5%;border-radius:6%/4%;background:repeating-linear-gradient(-45deg,var(--y) 0 9%,#141414 9% 18%);opacity:.95}
.back::after{content:"";position:absolute;inset:5%;border-radius:6%/4%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),transparent 40%),radial-gradient(circle at 70% 85%,rgba(0,0,0,.45),transparent 50%)}
.back b{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);background:#0b0b0b;color:var(--y);text-align:center;font:700 clamp(7px,1.05em,22px) "Oswald";letter-spacing:.12em;padding:.35em 0;border-top:2px solid var(--y);border-bottom:2px solid var(--y)}
.back i{position:absolute;z-index:1;left:50%;top:22%;transform:translateX(-50%);width:26%;aspect-ratio:1;border-radius:50%;background:#0b0b0b;border:2px solid var(--y);display:grid;place-items:center}
.back i::before{content:"";width:55%;aspect-ratio:1;background:conic-gradient(var(--y) 0 60deg,transparent 60deg 120deg,var(--y) 120deg 180deg,transparent 180deg 240deg,var(--y) 240deg 300deg,transparent 300deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 18%,#000 20%);mask:radial-gradient(circle,transparent 18%,#000 20%)}

.cardimg{display:block;width:100%;aspect-ratio:744/1051;object-fit:cover;border-radius:8%/5.7%;box-shadow:0 2px 6px rgba(0,0,0,.6);background:#222}

/* ---------- table layout ---------- */

.chip{font:500 11px "Oswald";letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:#000;border:1px solid var(--line);color:#cfc8b0}
.chip.y{border-color:var(--yd);color:var(--y)}


.rounds{display:flex;gap:3px;margin-top:6px}
.rounds i{width:22px;height:5px;border-radius:2px;background:#333}
.rounds i.d{background:var(--yd)}.rounds i.c{background:var(--y);box-shadow:0 0 6px var(--y)}

.timer{position:relative;width:78px;height:78px;flex:none}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:7}
.timer .bgc{stroke:#2a2924}
.timer .fg{stroke:var(--y);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s;filter:drop-shadow(0 0 4px rgba(245,196,0,.6))}
.timer .num{position:absolute;inset:0;display:grid;place-items:center;font:700 26px "Oswald";font-variant-numeric:tabular-nums}
.timer.warn .fg{stroke:var(--red);filter:drop-shadow(0 0 5px rgba(224,54,44,.8))}
.timer.warn .num{color:var(--red);animation:tick 1s infinite}
@keyframes tick{0%{transform:scale(1.12)}40%{transform:scale(1)}}

.pairs{display:flex;gap:8px}
.pair{position:relative;width:68px;height:72px;flex:none;cursor:pointer}
.pair>*{position:absolute;width:46px;transition:transform .2s}
.pair>:first-child{left:0;top:0;transform:rotate(-5deg)}
.pair>:last-child{left:20px;top:5px;transform:rotate(5deg)}
.pair:hover>:first-child{transform:rotate(-9deg) translateX(-3px)}
.pair:hover>:last-child{transform:rotate(9deg) translateX(3px)}
.pair .back{font-size:6px}
.pair .no{position:absolute;bottom:-4px;left:-4px;z-index:3;width:18px;height:18px;border-radius:50%;background:#000;border:1px solid var(--y);font:600 10px/16px "Oswald";text-align:center;color:var(--y)}
.pair.closed{opacity:.75}

.mini{position:relative;cursor:pointer;perspective:600px;aspect-ratio:744/1051}
.paper{position:relative;width:100%;aspect-ratio:744/1051;border-radius:8%/5.7%;background:#1c1a16;border:1px solid #3d3a30;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8% 7%;text-align:left}
.paper small{color:var(--y);font:600 8px "Oswald";letter-spacing:.08em;text-transform:uppercase}
.paper b{color:#fff;font:600 11px/1.2 Rubik}
.mini .in{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.mini .in>*{backface-visibility:hidden}
.mini .in>.back{position:absolute;inset:0;transform:rotateY(180deg)}
.mini.closed .in{transform:rotateY(180deg)}
.mini .back{font-size:5px}
.mini .back b{letter-spacing:.04em}
.mini:hover .cardimg{outline:2px solid var(--y)}
.mini .new{position:absolute;top:-5px;right:-5px;z-index:2;background:var(--y);color:#000;font:700 9px "Oswald";padding:1px 4px;border-radius:3px;letter-spacing:.05em}
@keyframes slide{to{background-position:28px 0}}
.plist li.host{border:2px solid transparent;background:linear-gradient(180deg,#22201a,#16150f) padding-box,linear-gradient(135deg,#8a6a12,#f7e08a 30%,#b8860b 55%,#ffe9a0 75%,#7a5a0c) border-box;box-shadow:0 0 0 1px #000,0 0 14px rgba(212,160,23,.25)}


.badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font:700 12px/20px "Oswald";text-align:center;box-shadow:0 0 10px rgba(224,54,44,.6);animation:pop .3s}
.ev{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:7px 4px;border-bottom:1px dashed #2b2a25;font-size:12.5px;animation:evin .4s}
#feed .ev.pair>*{position:static;width:auto;left:auto;top:auto;transform:none}
#feed .ev>div{min-width:0;overflow-wrap:anywhere}
.ev time{color:#6f6a5a;font-size:11px;font-variant-numeric:tabular-nums;padding-top:1px}
.ev b{color:#fff;font-weight:600}
.ev .c{color:var(--y)}
.ev.sys{color:var(--mut)}
.ev.ev-vote{background:rgba(224,54,44,.08);border-left:3px solid var(--red);padding-left:6px}
.ev.ev-vote .c{color:#ff7a70}
.ev.round{display:block;text-align:center;color:var(--y);font:500 11px "Oswald";letter-spacing:.14em;text-transform:uppercase;border:0;padding:10px 0 4px}
.ev.round::before,.ev.round::after{content:" —— "}
.ev.sp{border-left:3px solid var(--pur);padding-left:6px;background:rgba(138,79,214,.08)}
@keyframes evin{from{opacity:0;transform:translateX(10px)}}
.ev.chat{border-left:3px solid var(--y);padding-left:6px}
.chat{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat input{flex:1;min-width:0;background:#0c0c0b;border:1px solid var(--line);border-radius:6px;color:var(--txt);padding:7px 9px;font:inherit}
.chat button{flex:none}

.hc{position:relative;flex:0 0 86px;display:flex;flex-direction:column;align-items:stretch;scroll-snap-align:start}
.hc>.btn{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:3;white-space:nowrap;box-shadow:0 2px 0 var(--yd),0 4px 12px rgba(0,0,0,.7)}
.hc>.btn.pur{box-shadow:0 2px 0 #5a2c99,0 4px 12px rgba(0,0,0,.7)}
.hc .face{position:relative;cursor:pointer;perspective:900px;transition:transform .2s}
.hc .face:hover{transform:translateY(-6px)}
.hc .in{position:relative;transform-style:preserve-3d}
.hc .in>*{backface-visibility:hidden}
.hc .in>.back{position:absolute;inset:0;transform:rotateY(180deg);font-size:11px}
.hc.closed .cardimg{filter:brightness(.55) saturate(.6)}
.hc .lock{position:absolute;inset:auto 6px 26px 6px;z-index:2;background:rgba(0,0,0,.8);border:1px dashed #6b6450;color:#d6cfb6;border-radius:6px;font:500 10px "Oswald";letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:3px}
.hc.open .lock{display:none}
.hc .seen{position:absolute;top:-5px;right:-5px;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--grn);color:#062;font:700 11px/18px "Oswald";text-align:center;box-shadow:0 0 0 2px #111}
.hc.closed .seen{display:none}
.hc.open .btn{visibility:hidden}
.hc.flip .in{animation:flip 1s cubic-bezier(.4,.1,.2,1)}
.hc.flip .face{animation:glow 1.4s}
@keyframes flip{0%{transform:rotateY(0)}45%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(360deg)}}
@keyframes glow{0%,100%{filter:none}60%{filter:drop-shadow(0 0 16px var(--y))}}
.hc.special{flex-basis:90px;margin-left:8px;padding-left:16px;border-left:2px dashed #3d3a30}
.hc.special .face{box-shadow:0 0 22px rgba(138,79,214,.35);border-radius:10px}
.hc.special.used .cardimg{filter:grayscale(1) brightness(.5)}
.picks{display:grid;gap:8px;margin:0 0 14px}
.pick{border:1px solid var(--line);border-radius:12px;background:#151412;color:#fff;padding:12px;text-align:left;cursor:pointer}
.pick.sel{border-color:var(--y);box-shadow:0 0 0 2px var(--y)}
.hint{font-size:12px;color:var(--mut)}
.hint b{color:var(--y)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:12px;overflow:auto;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal .box{position:relative;max-width:min(940px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;animation:pop .25s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.modal .x{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#000;color:#fff;font-size:18px}
.zoom{width:400px;padding:16px 18px 18px}
.zh{display:flex;align-items:center;gap:12px;padding:0 44px 12px 0;margin-bottom:14px;border-bottom:1px dashed var(--line)}
.zh .av{width:44px;height:44px;font-size:18px}
.av.zi{background:#000;color:var(--y);box-shadow:0 0 0 2px var(--y);font-size:20px}
.av.zi.red{color:var(--red);box-shadow:0 0 0 2px var(--red)}
.zt{font:700 22px/1.1 "Oswald";letter-spacing:.03em}
.zs{font:500 13px "Oswald";letter-spacing:.06em;color:var(--y);text-transform:uppercase;margin-top:3px}
.zbody{display:flex;gap:14px;justify-content:center}
.zc{margin:0;flex:1;max-width:320px}
.zc img{display:block;width:100%;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px #000}
.zc figcaption{margin-top:10px;font-size:12px;line-height:1.45;color:#b9b29b}
.zexp{margin:6px auto 0;max-width:320px;font:12px/1.45 "Rubik",system-ui,sans-serif;color:var(--mut);text-align:center}
.zoom:has(.zc+.zc){width:640px}
.zact{display:flex;gap:8px;justify-content:center;margin-top:14px}
.cata-box{width:760px;padding:16px 18px 20px}
.cata-pop{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.cata-pop img{width:100%;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px #000}
.cata-pop h3{margin:0 0 10px;font:700 34px/1 "Oswald";text-transform:uppercase;color:var(--y)}
.cata-pop p{margin:0 0 14px;font-size:15px;line-height:1.55;color:#ddd6bf}
.cp-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}

/* vote */
.vote{width:760px;max-width:100%;padding:20px;border:1px solid var(--y);box-shadow:0 0 0 4px #000,0 0 0 7px var(--y),0 30px 80px rgba(0,0,0,.9)}
.vote .vh{display:flex;gap:16px;align-items:center;margin-bottom:16px;padding-right:36px}
.vote .vh h3{margin:0;font:700 28px/1 "Oswald";text-transform:uppercase;letter-spacing:.04em}
.vote .vh p{margin:6px 0 0;color:var(--mut);font-size:13px}
.cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.cand{position:relative;border:1px solid var(--line);border-radius:12px;background:#151412;padding:12px 8px 10px;text-align:center;cursor:pointer;transition:.15s}
.cand:hover{border-color:#6b6450;transform:translateY(-2px)}
.cand .av{width:62px;height:62px;font-size:24px;margin:0 auto 8px}
.cand .nm{font:600 16px "Oswald"}
.cand .jb{font-size:11px;color:var(--mut);margin-top:2px}
.cand.sel{border-color:var(--y);background:linear-gradient(180deg,rgba(245,196,0,.16),#151412);box-shadow:0 0 0 2px var(--y)}
.cand.sel::after{content:"ВАШ ГОЛОС";white-space:nowrap;position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--y);color:#000;font:700 10px "Oswald";letter-spacing:.1em;padding:2px 7px;border-radius:3px}
.cand.dis{opacity:.4;cursor:not-allowed}
.cand .cnt{display:none}
.vote.reveal .cand{cursor:default}
.vote.reveal .cand .cnt{display:block;margin-top:8px}
.cnt .bar{height:6px;background:#2a2924;border-radius:3px;overflow:hidden}
.cnt .bar i{display:block;height:100%;background:var(--red);width:0;transition:width .8s}
.cnt .n{font:700 22px "Oswald";color:var(--red)}
.cnt .who{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;margin-top:4px}
.cnt .who .av{width:18px;height:18px;font-size:9px;margin:0;box-shadow:none}
.cand.lead{border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 0 30px rgba(224,54,44,.4)}
.vfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.voters{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut)}
.voters .av{width:24px;height:24px;font-size:11px}
.voters .av.wait{opacity:.25}
.verdict{display:none;margin-top:14px;padding:10px 14px;border-radius:10px;background:rgba(224,54,44,.12);border:1px solid var(--red);font:600 16px "Oswald";letter-spacing:.04em}
.vote.reveal .verdict{display:block}

/* ---------- lobby ---------- */
.lobby{max-width:1100px;margin:0 auto;padding:20px 14px 40px}
.hero{text-align:center;margin:10px 0 22px}
.hero .logo{font:700 64px/1 "Oswald";letter-spacing:.2em;color:var(--y);text-shadow:0 0 30px rgba(245,196,0,.35)}
.hero .tape{display:inline-block;margin-top:8px;padding:4px 14px;background:var(--stripes);}
.hero .tape span{background:#000;padding:2px 10px;font:500 12px "Oswald";letter-spacing:.2em;color:var(--y)}
.lgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}
.lp{padding:18px}
.lp h3{margin:0 0 12px;font:600 16px "Oswald";letter-spacing:.1em;text-transform:uppercase}
.code{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code .c{font:700 46px/1 "Oswald";letter-spacing:.22em;color:#111;background:var(--y);padding:6px 6px 6px 16px;border-radius:8px;box-shadow:0 4px 0 var(--yd)}
.iconbtn{position:relative;width:46px;height:46px;border-radius:10px;border:1px solid var(--line);background:#0c0c0b;color:#d8d1b8;display:grid;place-items:center;transition:.15s}
.iconbtn:hover{border-color:var(--y);color:var(--y)}
.iconbtn .ok{display:none}
.iconbtn.done{border-color:var(--grn);color:var(--grn)}
.iconbtn.done svg{display:none}.iconbtn.done .ok{display:block}
.iconbtn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#000;color:#fff;border:1px solid var(--line);font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.iconbtn:hover::after,.iconbtn.done::after{opacity:1}
.link{display:flex;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.link input{flex:1;min-width:0;background:#0c0c0b;border:0;color:#d8d1b8;padding:9px 10px;font:13px "Rubik"}
.link .btn{border-radius:0}
.plist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#121210;border:1px solid #26251f;border-radius:8px}
.plist .nm{flex:1;font:500 15px "Oswald";letter-spacing:.03em}
.plist .kick{background:none;border:0;color:#6b6450;font-size:16px}
.plist li.empty{border-style:dashed;color:#57534a;justify-content:center;font-size:12px}
.form{display:grid;gap:14px}
.fl{display:grid;gap:6px}
.fl>label{font:500 11px "Oswald";letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.seg{display:flex;background:#0c0c0b;border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:6px;padding:7px 6px;font:500 13px "Oswald";letter-spacing:.04em;color:#bdb6a0}
.seg button.on{background:var(--y);color:#111}
.tm{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tm div{background:#0c0c0b;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.tm small{display:block;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.tm b{font:600 20px "Oswald"}
.chk{display:flex;gap:8px;flex-wrap:wrap}
.chk label{display:flex;align-items:center;gap:6px;background:#0c0c0b;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}
.chk input{accent-color:var(--y)}
.sum{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-radius:8px;background:rgba(245,196,0,.07);border:1px dashed var(--yd);font-size:13px}
.sum b{color:var(--y)}
.start{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:4px}
.start .btn.y{font-size:20px;padding:12px 30px}

/* ---------- results ---------- */
.res{max-width:1100px;margin:0 auto;padding:18px 14px 40px}
.banner{position:relative;text-align:center;padding:26px 16px;border-radius:16px;overflow:hidden;border:2px solid var(--y);background:radial-gradient(600px 200px at 50% 0,rgba(245,196,0,.25),transparent),#12110e}
.banner::before,.banner::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--stripes)}
.banner::before{top:0}.banner::after{bottom:0}
.banner .k{font:500 13px "Oswald";letter-spacing:.3em;color:var(--mut)}
.banner h1{margin:6px 0;font:700 56px/1 "Oswald";letter-spacing:.08em;color:var(--y);text-shadow:0 0 30px rgba(245,196,0,.4)}
.banner p{margin:0;color:#d8d1b8}
.wins{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.wins .w{text-align:center}
.wins .w .av{width:54px;height:54px;font-size:20px;margin:0 auto 4px;box-shadow:0 0 0 3px var(--y)}
.wins .w.dead .av{filter:grayscale(1) brightness(.5);box-shadow:0 0 0 3px #444}
.wins .w span{font:500 13px "Oswald"}
.wins .w.dead span{color:#777;text-decoration:line-through}
.steps{display:grid;gap:14px;margin-top:16px}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--y);color:#111;display:grid;place-items:center;font:700 22px "Oswald"}
.step h3{margin:0;font:600 18px "Oswald";letter-spacing:.06em;text-transform:uppercase}
.step h3 small{font:400 12px Rubik;color:var(--mut);text-transform:none;letter-spacing:0;margin-left:6px}
.rsub{display:grid;grid-template-columns:96px 1fr;gap:14px;margin-top:12px;padding-top:12px;border-top:1px dashed #2f2d27}
.rsub:first-of-type{border-top:0;padding-top:0}
.rsub img{width:96px;border-radius:8px;cursor:pointer}
.useful{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.u{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:#0c0c0b;border:1px solid var(--line);font-size:12.5px}
.u.ok{border-color:#2f6b31;color:#a8e6a9}
.u.no{color:#8a8473}
.u em{font-style:normal;font:600 12px "Oswald";color:var(--mut)}
.out-ok,.out-bad{display:inline-flex;gap:6px;align-items:center;font:600 14px "Oswald";letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.out-ok{background:rgba(87,194,90,.15);color:var(--grn)}
.out-bad{background:rgba(224,54,44,.15);color:#ff7a70}
.pool{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px;align-items:center;font-size:12px;color:var(--mut)}
.pool span{padding:3px 8px;border-radius:5px;background:#222;color:#cfc8b0;font-size:12px}
.pool span.hit{background:var(--red);color:#fff;box-shadow:0 0 12px rgba(224,54,44,.6)}
.pool span.th{background:#3a2f00;color:var(--y)}
.again{display:flex;gap:10px;justify-content:center;margin-top:18px}
.marks{display:grid;gap:8px;margin:8px 0}
.marks .line{display:flex;gap:8px;align-items:center}
.marks .line b{flex:1;font:600 14px Rubik}
.marks button[aria-pressed="true"]{background:var(--y);color:#111}
.rsub [data-step],.rsub [data-live]{cursor:pointer}


/* ================= СТОЛ v2: покерный овал ================= */
body.on-table{overflow:hidden}
.ptable{height:calc(100vh - var(--navh,45px));height:calc(100dvh - var(--navh,45px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
/* верхняя панель */
.tb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2))}
.tb-l{display:flex;align-items:baseline;gap:12px;min-width:0}
.tb .logo{font:700 24px/1 "Oswald";letter-spacing:.14em;color:var(--y);text-shadow:0 0 18px rgba(245,196,0,.35)}
.tb .room{font-size:12px;color:var(--mut);white-space:nowrap}.tb .room b{color:#fff;font-weight:600}
.tb-r{display:flex;align-items:center;gap:8px}
.tchip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;background:#0c0c0b;border:1px solid var(--line);font:500 13px "Oswald";letter-spacing:.06em;text-transform:uppercase;color:#d8d1b8;white-space:nowrap}
.tchip svg{color:var(--y)}.tchip b{color:var(--y);font-weight:700;font-size:15px}
.iconbtn.s{width:38px;height:38px;border-radius:10px}
.tb .iconbtn::after{bottom:auto;top:calc(100% + 6px);z-index:60}
.tb-r .iconbtn:last-child::after{left:auto;right:0;transform:none}
.iconbtn .badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;font-size:11px;line-height:18px;padding:0 5px}
#snd .x{display:none}#snd.muted .w{display:none}#snd.muted .x{display:inline}#snd.muted{color:var(--mut)}
body.feed-open [data-feedtog].iconbtn{border-color:var(--y);color:var(--y)}

/* арена и стол */
.arena{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(245,196,0,.05),transparent 70%),radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,0,.6) 100%)}
.oval{position:absolute;border-radius:50%;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(245,196,0,.07),transparent 70%),radial-gradient(ellipse at 50% 50%,#22211c 0%,#1a1915 55%,#121210 100%);
  box-shadow:0 0 0 2px #0a0a09,0 0 0 3px var(--line),0 0 0 12px #151513,0 0 0 13px #2a2924,0 30px 80px rgba(0,0,0,.8),inset 0 0 70px rgba(0,0,0,.75),inset 0 0 0 1px rgba(245,196,0,.1)}
.oval::before{content:"";position:absolute;inset:26px;border-radius:50%;border:1px dashed rgba(154,148,128,.16)}
.oval::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:var(--stripes);opacity:.22;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.cblock{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.ctop{gap:12px}
.rnd-row{display:flex;align-items:center;gap:12px}
.rnd-row .timer{width:64px;height:64px}
.rnd-row .timer .num{font-size:21px}
.rnd-row .rnd{font:700 22px/1 "Oswald";text-transform:uppercase}.rnd-row .rnd span{color:var(--y)}
.rnd-row .st-t{display:inline-block;margin-top:6px;font:600 15px "Oswald";letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border:1px solid var(--line);border-radius:8px;background:#0c0c0b;white-space:nowrap}
.rnd-row .st-t b,.rnd-row .stm{color:var(--y)}
.rnd-row .stm{font-variant-numeric:tabular-nums}
.rnd-row .st-t.warn .stm{color:var(--red);animation:tick 1s infinite;display:inline-block}
.rnd-row .st-t.mine{border-color:var(--y);box-shadow:0 0 18px rgba(245,196,0,.3)}
.rounds{display:flex;gap:3px;margin-top:6px}
.rounds i{width:22px;height:5px;border-radius:2px;background:#333}
.rounds i.d{background:var(--yd)}.rounds i.c{background:var(--y);box-shadow:0 0 6px var(--y)}
.cata-card{position:relative;width:104px;cursor:pointer;transition:transform .2s}
.cata-card .cardimg{box-shadow:0 0 0 2px var(--red2),0 0 26px rgba(224,54,44,.25),0 10px 30px rgba(0,0,0,.7)}
.cata-card:hover,.cata-card:focus-visible{transform:translateY(-3px);outline:none}
.cata-card:hover .cardimg,.cata-card:focus-visible .cardimg{box-shadow:0 0 0 2px var(--y),0 0 26px rgba(245,196,0,.3),0 10px 30px rgba(0,0,0,.7)}
.cpairs{gap:8px}
.cpairs .pairs{gap:14px}
.cpairs .pair{width:84px;height:90px}
.cpairs .pair>.cardimg,.cpairs .pair>.back{width:58px}
.cpairs .pair>:nth-child(2){left:26px;top:6px}
.cpairs .pair .back{font-size:7px}
/* места игроков */
.seat{position:absolute;z-index:3;transform:translate(-50%,-50%);transition:transform .25s}
.plate{position:relative;padding:7px 8px 8px;border-radius:var(--r);background:linear-gradient(180deg,#1d1c18,#141411);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.6);overflow:hidden}
.plate .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.avw{position:relative;flex:none;display:grid}
.plate .av{width:32px;height:32px;font-size:13px}
.plate .who{min-width:0;flex:1}
.plate .nm{font:600 15px/1.1 "Oswald";letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate .tl{font:600 10px "Oswald";letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-top:1px}
.plate .oc{font:600 12px "Oswald";color:#cfc8b0;white-space:nowrap}
.plate .cards{display:grid;grid-template-columns:repeat(6,25px);gap:3px}
.seat .back b{font-size:0;padding:0;height:18%;border-width:1px}
.seat .back i{border-width:1px}
.ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:7}
.ring .bgc{stroke:rgba(0,0,0,.55)}
.ring .fg{stroke:var(--y);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s;filter:drop-shadow(0 0 3px rgba(245,196,0,.8))}
.warn .ring .fg{stroke:var(--red)}
/* активный игрок */
.seat.turn{z-index:5;transform:translate(-50%,-50%) scale(1.07)}
.seat.turn .plate{border-color:var(--y);background:linear-gradient(180deg,#2a2615,#16150f);animation:turnglow 1.4s ease-in-out infinite}
.seat.turn .plate::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--stripes);background-size:28px 28px;animation:slide 1s linear infinite}
@keyframes turnglow{0%,100%{box-shadow:0 0 0 2px var(--y),0 0 14px rgba(245,196,0,.35),0 8px 24px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 2px var(--y2),0 0 34px rgba(245,196,0,.7),0 8px 24px rgba(0,0,0,.6)}}
@keyframes slide{to{background-position:28px 0}}
/* хост — золотая рамка */
.seat.host .plate{border:2px solid transparent;background:linear-gradient(180deg,#22201a,#16150f) padding-box,linear-gradient(135deg,#8a6a12,#f7e08a 30%,#b8860b 55%,#ffe9a0 75%,#7a5a0c) border-box;box-shadow:0 0 0 1px #000,0 0 14px rgba(212,160,23,.25)}
.seat.off .plate{filter:saturate(.25) brightness(.62)}
.seat.out .plate{border-color:var(--red2)}
.seat.out .hd,.seat.out .cards{filter:grayscale(.85) brightness(.7)}
.seat.out .plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(224,54,44,.12) 0 8px,transparent 8px 16px)}
.seat.out .stamp{position:absolute;z-index:3;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-12deg);border:2px solid var(--red);color:var(--red);font:700 17px "Oswald";letter-spacing:.18em;padding:0 10px;border-radius:5px;background:rgba(0,0,0,.6);pointer-events:none;white-space:nowrap}
/* плотная рассадка */
.arena[data-n="10"] .plate .cards,.arena[data-n="11"] .plate .cards,.arena[data-n="12"] .plate .cards{grid-template-columns:repeat(6,19px);gap:2px}
.arena[data-n="13"] .plate .cards,.arena[data-n="14"] .plate .cards,.arena[data-n="15"] .plate .cards,.arena[data-n="16"] .plate .cards{grid-template-columns:repeat(6,15px);gap:2px}
.arena[data-n="13"] .plate .av,.arena[data-n="14"] .plate .av,.arena[data-n="15"] .plate .av,.arena[data-n="16"] .plate .av{width:26px;height:26px;font-size:11px}
.arena[data-n="13"] .plate .nm,.arena[data-n="14"] .plate .nm,.arena[data-n="15"] .plate .nm,.arena[data-n="16"] .plate .nm{font-size:13px}

/* моя зона: рука */
.myzone{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;display:flex;align-items:flex-end;gap:14px;max-width:calc(100% - 16px)}
.myzone .row{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;padding:8px 4px 9px;scroll-snap-type:x mandatory;scrollbar-width:none}
.myzone .row::-webkit-scrollbar{display:none}

/* нижняя строка статуса */
.status{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 12px 8px;background:linear-gradient(0deg,#000,transparent)}
.status .tape{width:64px;height:12px;background:var(--stripes);background-size:28px 28px;border-radius:2px;opacity:.9}
.status:not(:has(#table-note:not([hidden]))):not(:has(#to-final:not([hidden]))){display:none}
.status .err{margin:0;font-size:12px;white-space:nowrap}

/* лента событий — боковой ящик */
.drawer{position:fixed;z-index:80;top:var(--navh,45px);right:0;bottom:0;width:340px;max-width:92vw;display:flex;flex-direction:column;border-radius:var(--r) 0 0 var(--r);border-right:0;transform:translateX(105%);transition:transform .3s cubic-bezier(.3,1,.4,1);box-shadow:-20px 0 60px rgba(0,0,0,.7)}
body.feed-open .drawer{transform:none}
.drawer .hdr{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.drawer .hdr .h{font-weight:600;letter-spacing:.1em;white-space:nowrap}
.drawer .hdr .sp{flex:1}
.drawer .live{display:inline-flex;align-items:center;gap:5px;font:600 11px "Oswald";letter-spacing:.08em;text-transform:uppercase;color:var(--grn)}
.drawer .x2{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#0c0c0b;color:#fff}
.drawer .x2:hover{border-color:var(--y);color:var(--y)}
.drawer .list{flex:1;overflow:auto;padding:4px 10px 10px;display:flex;flex-direction:column;gap:2px}
/* мелкие модалки v2 */
.rules{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.45;color:#ddd6bf}.rules b{color:var(--y)}
.menu{display:grid;gap:8px}
.menu a.btn{display:block;text-align:center;text-decoration:none}
.seat .kick{position:absolute;top:4px;right:4px;z-index:4;background:#000;border:1px solid var(--line);color:#aaa;border-radius:50%;width:22px;height:22px;line-height:18px}
.seat.tied .plate{box-shadow:0 0 0 2px var(--red),0 0 18px rgba(224,54,44,.45)}


/* крупные экраны (1920×1080 и т.п.) */
@media (min-width:1600px) and (min-height:950px){
  .tb{padding:10px 20px}.tb .logo{font-size:30px}
  .tchip{height:44px;font-size:15px}.iconbtn.s{width:44px;height:44px}
  .rnd-row .timer{width:84px;height:84px}.rnd-row .timer .num{font-size:27px}
  .rnd-row .rnd{font-size:30px}.rounds i{width:30px;height:6px}.rnd-row .st-t{font-size:18px}
  .cata-card{width:150px}
  .cpairs .pairs{gap:20px}
  .cpairs .pair{width:118px;height:124px}
  .cpairs .pair>.cardimg,.cpairs .pair>.back{width:80px}
  .cpairs .pair>:nth-child(2){left:36px;top:8px}
  .cpairs .pair .back{font-size:9px}
  .cpairs .pair .no{width:24px;height:24px;font-size:13px;line-height:22px}
  .plate{padding:10px 12px 12px}
  .plate .av{width:42px;height:42px;font-size:17px}
  .plate .nm{font-size:19px}.plate .tl{font-size:12px}.plate .oc{font-size:14px}
  .plate .cards{grid-template-columns:repeat(6,36px);gap:4px}
  .myzone .hc{flex-basis:112px}.myzone .hc.special{flex-basis:118px}
  .myzone .hc .in>.back{font-size:14px}
  .status .tape{width:90px}.status .err{font-size:14px}
  .seat.out .stamp{font-size:22px}
}
/* ---------- responsive ---------- */
@media (max-width:640px){
  .seat .mini .new{font-size:6.5px;padding:0 2px;top:-4px;right:-4px;border-radius:2px}
  body{font-size:13px}
  .mocknav{gap:4px;padding:6px;overflow-x:auto}
  .mocknav .tag,.mocknav .note,.mocknav .sp{display:none}
  .mocknav button{padding:5px 10px;font-size:12px;flex:none}
  .vote .timer{width:64px;height:64px}
  .timer .num{font-size:21px}
  .zoom{padding:12px}
  .zoom:has(.zc+.zc){width:auto}
  .zbody{gap:8px}
  .zc img{border-radius:12px}
  .zt{font-size:19px}
  .cata-pop{grid-template-columns:1fr}
  .cata-pop img{width:62%;margin:0 auto;display:block}
  .cata-pop h3{font-size:26px}
  .cata-pop p{font-size:14px}
  .vote{padding:14px}
  .vote .vh h3{font-size:22px}
  .cands{grid-template-columns:repeat(2,1fr)}
  .cand .av{width:50px;height:50px;font-size:20px}
  .lgrid{grid-template-columns:1fr}
  .hero .logo{font-size:44px}
  .code .c{font-size:34px}
  .tm{grid-template-columns:repeat(2,1fr)}
  .banner h1{font-size:38px}
  .step{grid-template-columns:1fr;gap:8px}
  .rsub{grid-template-columns:70px 1fr}
  .rsub img{width:70px}

  /* стол v2 — мобильный */
  .tb{padding:6px 8px}
  .tb .logo{font-size:20px}.tb .room{display:none}
  .tb-r{gap:5px}
  .tchip{height:34px;padding:0 8px;gap:4px}.tchip .lbl{display:none}
  .iconbtn.s{width:34px;height:34px}
  .rnd-row{gap:8px}
  .rnd-row .timer{width:48px;height:48px}.rnd-row .timer .num{font-size:15px}
  .rnd-row .rnd{font-size:16px}.rounds i{width:14px;height:4px}
  .rnd-row .st-t{margin-top:4px;font-size:12px;padding:3px 8px;letter-spacing:.04em}
  .ctop{gap:10px}
  .cata-card{width:74px}
  .cpairs .pairs{gap:6px}
  .cpairs .pair{width:62px;height:66px}
  .cpairs .pair>.cardimg,.cpairs .pair>.back{width:42px}
  .cpairs .pair>:nth-child(2){left:19px;top:5px}
  .cpairs .pair .back{font-size:5px}
  .plate{padding:5px 6px 6px;border-radius:10px}
  .plate .hd{gap:6px;margin-bottom:4px}
  .plate .av{width:24px;height:24px;font-size:11px}
  .plate .nm{font-size:12.5px}
  .plate .tl{font-size:9px}
  .plate .oc{font-size:10px}
  .plate .cards{grid-template-columns:repeat(6,14px);gap:2px}
  .ring{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
  .seat.out .stamp{font-size:12px;padding:0 6px;letter-spacing:.12em}
  .arena[data-n] .plate .cards{grid-template-columns:repeat(6,14px)}
  .arena[data-n] .plate .av{width:24px;height:24px}
  /* 9+ игроков на телефоне: плашка-«жетон» — аватар и ник, без мини-карт */
  .arena.dense .plate .cards,.arena.dense .plate .oc,.arena.dense .plate .tl{display:none}
  .arena.dense .plate{padding:4px 5px}
  .arena.dense .plate .hd{flex-direction:column;gap:2px;margin:0;width:54px}
  .arena.dense .plate .who{width:100%;text-align:center}
  .arena.dense .plate .nm{font-size:10.5px}
  .arena.dense .seat.out .stamp{font-size:8px;padding:0 3px;letter-spacing:.06em;top:38%}
  .myzone{left:0;right:0;transform:none;bottom:4px;flex-direction:column;align-items:stretch;gap:4px;max-width:none}
  .myzone .row{gap:8px;padding:8px 10px 9px}
  .myzone .hc{flex-basis:74px}
  .myzone .hc.special{flex-basis:80px;margin-left:2px;padding-left:10px}
  .myzone .hc .lock{font-size:9px;inset:auto 4px 24px 4px}
  .status{gap:8px;padding:4px 8px 6px}
  .status .tape{width:22px}
  .status .st-t{font-size:14px;padding:4px 12px}
  .status .err{font-size:11px;white-space:normal;text-align:left}
  .drawer{width:100vw;max-width:none;border-radius:0}
  .marks .line{flex-wrap:wrap}
  .marks .line b{flex:1 1 140px}
}

body.on-table{--navh:0px}
.myzone{flex-wrap:wrap;justify-content:center}
.me-hand{display:flex;align-items:flex-end;gap:14px;min-width:0;max-width:100%}
.fl input:not([type="checkbox"]){width:100%;background:#000;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.tm input{width:100%;border:0;background:transparent;color:inherit;font:600 20px "Oswald",sans-serif;padding:0}
.plist li.off{filter:saturate(.25) brightness(.62)}
.err{color:#ff8a80;text-align:center;margin:0 0 12px}
.join-gate{max-width:460px;margin:0 auto}
#enter-fields{display:grid;gap:12px;margin-top:14px}
#enter-fields .btn{margin-top:0}
.lp .btn{margin-top:8px}
button:disabled{cursor:not-allowed;opacity:.55}