:root{
  --bg:#0A1120;--panel:#111C36;--panel2:#152140;--line:rgba(150,175,220,.14);
  --line-gold:rgba(232,180,76,.35);--text:#EDF2FB;--sub:#93A2BE;
  --gold:#E8B44C;--gold-soft:#F4D28A;--sky:#6CB6FF;--ok:#4CD98A;--bad:#E06A54;
  --mob:#E06A54;--solo:#B98CF0;--town:#6CB6FF;
  --dc:#5865F2;--display:'Unbounded',sans-serif;--body:'Onest',sans-serif;--pad:clamp(16px,4vw,54px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background:var(--bg) url('../../art/mafia/bg.webp') center top / cover no-repeat fixed}
/* Страница меняет настроение вместе с фазой: ночью холоднее, днём теплее.
   Это дешевле любой картинки и работает сильнее. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  transition:background .9s ease, opacity .9s ease;opacity:0}
body[data-phase="night"]::before{opacity:1;
  background:radial-gradient(120% 80% at 50% -10%, rgba(50,88,180,.20), transparent 62%)}
body[data-phase="day"]::before{opacity:1;
  background:radial-gradient(120% 80% at 50% -10%, rgba(232,180,76,.14), transparent 62%)}
body[data-phase="vote"]::before{opacity:1;
  background:radial-gradient(120% 80% at 50% -10%, rgba(224,106,84,.15), transparent 62%)}
body[data-phase="over"]::before{opacity:1;
  background:radial-gradient(120% 80% at 50% -10%, rgba(76,217,138,.13), transparent 62%)}
a{color:inherit}
img{max-width:100%;display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:rgba(108,182,255,.12);padding:1px 6px;border-radius:5px;color:#BFD8F5}

/* ---------- шапка ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;height:70px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:0 var(--pad);
  background:linear-gradient(180deg,rgba(8,13,25,.94),rgba(8,13,25,.7));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:700}
.logo .mark{width:32px;height:32px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--line-gold);background:var(--panel)}
.logo b{color:var(--gold)}
.nav{display:flex;gap:4px;list-style:none}
.nav a{text-decoration:none;color:var(--sub);font-weight:500;font-size:.88rem;padding:8px 12px;border-radius:9px}
.nav a:hover{color:var(--text);background:rgba(108,182,255,.08)}
.nav a.cur{color:var(--gold)}
@media(max-width:980px){.nav{display:none}}
.head-right{display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--sub);
  background:rgba(21,33,64,.7);border:1px solid var(--line);padding:5px 12px 5px 5px;border-radius:99px}
.who img{width:26px;height:26px;border-radius:50%;flex:none}
@media(max-width:640px){.who span{display:none}.who{padding:5px}}

/* ---------- каркас ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:96px var(--pad) 60px}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.12;margin-bottom:10px}
.lead{color:var(--sub);max-width:62ch;margin-bottom:30px}
.card{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:18px;padding:24px 26px;margin-bottom:18px}
.card h2{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:6px}
.card .muted{color:var(--sub);font-size:.88rem;margin-bottom:16px}
.muted{color:var(--sub)}
.mini{font-size:.8rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:700;
  font-size:.92rem;padding:12px 22px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;
  color:#221604;background:linear-gradient(160deg,var(--gold-soft),var(--gold) 55%,#C89238);
  box-shadow:0 8px 24px rgba(232,180,76,.25);transition:transform .16s,box-shadow .22s,opacity .2s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sm{padding:8px 14px;font-size:.82rem;border-radius:10px}
.btn.ghost{color:var(--text);background:rgba(21,33,64,.85);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--line-gold)}
.btn.danger{color:#fff;background:linear-gradient(160deg,#E88774,var(--bad));box-shadow:none}
.btn.discord{color:#fff;background:linear-gradient(160deg,#7078F0,var(--dc) 60%,#4650D8);box-shadow:0 8px 24px rgba(88,101,242,.32)}
.btn.wide{width:100%}
input,select,textarea{width:100%;font-family:var(--body);font-size:.94rem;color:var(--text);
  background:rgba(8,13,25,.7);border:1px solid var(--line);border-radius:11px;padding:11px 14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin:14px 0 6px}

.msg{padding:12px 15px;border-radius:11px;margin-top:14px;font-size:.88rem;display:none}
.msg.show{display:block}
.msg.ok{background:rgba(76,217,138,.12);border:1px solid rgba(76,217,138,.35);color:#8FE7B5}
.msg.err{background:rgba(224,106,84,.12);border:1px solid rgba(224,106,84,.35);color:#F0A392}

/* ---------- вход ---------- */
.gate{max-width:520px;margin:0 auto;text-align:center}
.gate .card{text-align:left}
.entry{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.entry{grid-template-columns:1fr}}
.entry .card{margin:0;display:flex;flex-direction:column}
.entry .card .grow{flex:1}
.codein{display:flex;gap:9px}
.codein input{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.28em;text-align:center;text-transform:uppercase}

/* ---------- стол ---------- */
.table{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:1180px){.table{grid-template-columns:280px minmax(0,1fr)}.col-chat{grid-column:1/-1}}
@media(max-width:860px){.table{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.pane{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.pane>h3{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sub);padding:15px 18px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pane .body{padding:0 18px 18px}
.pane .body.tight{padding:0}

/* верхняя лента */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:14px 20px;margin-bottom:16px}
.bar .code{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:.22em;color:var(--gold)}
.bar .copy{cursor:pointer;border:1px solid var(--line);background:rgba(8,13,25,.6);color:var(--sub);
  border-radius:9px;padding:5px 11px;font-size:.76rem;font-family:var(--body)}
.bar .copy:hover{border-color:var(--line-gold);color:var(--text)}
.bar .sep{flex:1}
.phase{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:99px;border:1px solid var(--line)}
.phase.lobby{color:var(--sub)}
.phase.night{color:#A9C6FF;background:rgba(60,90,180,.18);border-color:rgba(108,182,255,.3)}
.phase.day{color:var(--gold-soft);background:rgba(232,180,76,.13);border-color:var(--line-gold)}
.phase.vote{color:#F0A392;background:rgba(224,106,84,.13);border-color:rgba(224,106,84,.35)}
.phase.over{color:var(--ok);background:rgba(76,217,138,.13);border-color:rgba(76,217,138,.35)}

/* ===================== стол =====================
   Сукно во всю ширину, игроки — картами. Рубашка, пока роль скрыта;
   лицо, если вы её знаете. Мёртвые ложатся набок, как сброс. */
.felt{margin:0 0 16px}
.felt-in{position:relative;border-radius:22px;overflow:hidden;padding:16px clamp(12px,2vw,22px) 20px;
  background:#16302B url('../../art/mafia/felt.webp') center / cover no-repeat;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(232,180,76,.13), inset 0 22px 60px rgba(0,0,0,.45),
    0 22px 50px rgba(0,0,0,.45)}
.felt-in::after{content:'';position:absolute;inset:9px;border-radius:15px;pointer-events:none;
  border:1px dashed rgba(232,180,76,.17)}
.felt-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 6px 12px;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(240,232,206,.62)}
.felt-head .mini{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:400;
  font-size:.78rem;color:rgba(240,232,206,.5)}
.felt-head b{color:var(--gold-soft);letter-spacing:.12em}

.seats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;position:relative;
  --per:8;max-width:calc(var(--per) * 108px);margin:0 auto}
@media (max-height:900px){.seat{width:clamp(70px,5.4vw,82px)}}
.seat{width:clamp(78px,6.4vw,96px);display:flex;flex-direction:column;align-items:center;gap:5px}
/* Карты падают на стол только один раз - при первой сборке. Опрос идёт
   каждые пару секунд, и без этого раздача проигрывалась бы заново
   на каждый ответ сервера. */
.seats.dealing .seat{animation:deal .45s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i) * 45ms)}
@keyframes deal{from{opacity:0;transform:translateY(-16px) rotate(-6deg) scale(.9)}}
.seat-card{position:relative;width:100%;aspect-ratio:1/1.418;border-radius:9px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s}
.seat-card .cardimg{border-radius:9px;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.seat-av{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;border:2px solid rgba(12,18,14,.85);
  box-shadow:0 3px 10px rgba(0,0,0,.6);background:var(--panel)}
.seat-nm{margin-top:12px;font-size:.8rem;font-weight:600;max-width:100%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#F1EADA;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.seat .rl{font-size:.66rem;padding:2px 7px}
.seat .rl.hidden{color:rgba(240,232,206,.45);background:rgba(0,0,0,.28)}
.seat:hover .seat-card{transform:translateY(-6px) rotate(-1.5deg)}

.seat.me .seat-card{outline:2px solid var(--gold);outline-offset:2px;border-radius:9px}
.seat.me .seat-nm{color:var(--gold-soft)}
.seat.partner .seat-card{outline:2px solid rgba(224,106,84,.75);outline-offset:2px}
.seat.dead{opacity:.42}
.seat.dead .seat-card{transform:rotate(-7deg) scale(.94);filter:grayscale(.7)}
.seat.dead:hover .seat-card{transform:rotate(-7deg) scale(.94)}
.seat.empty{width:auto;color:rgba(240,232,206,.5);font-size:.85rem}

.seat .mk{position:absolute;top:4px;left:4px;font-size:.8rem;line-height:1;
  background:rgba(8,10,14,.78);border-radius:6px;padding:2px 4px}
.seat .mk.jail{left:auto;right:4px}
.seat .mk.mute{top:auto;bottom:4px;left:4px}
.seat-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(8,10,14,.8);color:#E9B9AC;cursor:pointer;font-size:.66rem;
  opacity:0;transition:opacity .18s}
.seat:hover .seat-x{opacity:1}
.seat-x:hover{background:var(--bad);color:#fff}

@media (max-width:640px){
  .seats{gap:12px 9px;max-width:100%}
  .seat{width:74px}
  .seat-av{width:28px;height:28px;bottom:-7px}
  .seat-nm{font-size:.72rem;margin-top:10px}
  .seat .rl{font-size:.6rem;padding:1px 6px}
}

/* плашка роли: цвет по стороне, слева знак с карты */
.rl{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:3px 8px;border-radius:7px;white-space:nowrap;flex:none}
.rl.town{color:var(--town);background:rgba(108,182,255,.14)}
.rl.mob{color:var(--mob);background:rgba(224,106,84,.15)}
.rl.solo{color:var(--solo);background:rgba(185,140,240,.16)}

/* значки сторон */
.sic{width:11px;height:11px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:0}
.side-line{display:flex;align-items:center;gap:6px;color:var(--sub)}
.side-line .sic{width:13px;height:13px}

/* панель ведущего / шаг ночи */
.step{padding:20px 22px}
.step .kicker{font-family:var(--display);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sub)}
.step h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:6px 0 2px}
.say{margin:16px 0;padding:16px 18px;border-radius:14px;border:1px solid var(--line-gold);
  background:linear-gradient(160deg,rgba(232,180,76,.13),rgba(232,180,76,.05))}
.say .lbl{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px}
.say p{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--gold-soft);line-height:1.4}
.say.calm{border-color:var(--line);background:rgba(8,13,25,.45)}
.say.calm .lbl{color:var(--sub)}
.say.calm p{color:#C4CFE4;font-size:1rem}
.hintbox{margin-top:14px;padding:13px 16px;border-radius:12px;background:rgba(108,182,255,.08);
  border:1px solid rgba(108,182,255,.22);font-size:.88rem;color:#BFD8F5}
.hintbox b{color:var(--sky)}
.progress{display:flex;gap:4px;margin:14px 0 4px}
.progress i{flex:1;height:4px;border-radius:2px;background:rgba(150,175,220,.16)}
.progress i.on{background:var(--gold)}
.progress i.cur{background:var(--sky)}

/* выбор цели */
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pick{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(8,13,25,.55);
  border-radius:11px;padding:7px 12px 7px 7px;cursor:pointer;font-family:var(--body);font-size:.86rem;color:var(--text);
  transition:border-color .15s,background .15s}
.pick img{width:24px;height:24px;border-radius:50%;flex:none}
.pick:hover{border-color:var(--line-gold)}
.pick.on{border-color:var(--gold);background:rgba(232,180,76,.14);color:var(--gold-soft);font-weight:600}
.pick:disabled{opacity:.35;cursor:not-allowed}
.pick .cnt{font-size:.74rem;color:var(--gold);font-weight:700}
.modes{display:flex;gap:8px;margin:12px 0 4px}
.modes .pick{padding:8px 14px}
.acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.awake{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.awake span{font-size:.78rem;color:#C4CFE4;background:rgba(150,175,220,.1);border-radius:7px;padding:3px 9px}

/* информация игроку */
.reveal{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px solid rgba(76,217,138,.3);
  background:rgba(76,217,138,.1);font-size:.92rem}
.reveal .lbl{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ok);font-weight:700;margin-bottom:6px}
.reveal ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.reveal li::before{content:'→ ';color:var(--ok)}

/* моя роль */
.myrole{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}
.myrole .ic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:1.4rem;
  border:1px solid var(--line);background:rgba(8,13,25,.55)}
.myrole.town .ic{border-color:rgba(108,182,255,.4)}
.myrole.mob .ic{border-color:rgba(224,106,84,.4)}
.myrole.solo .ic{border-color:rgba(185,140,240,.4)}
.myrole .nm{font-family:var(--display);font-weight:800;font-size:1.15rem}
.myrole .ds{font-size:.86rem;color:var(--sub);margin-top:3px}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.flags span{font-size:.74rem;padding:3px 9px;border-radius:7px;background:rgba(224,106,84,.14);color:#F0A392}

/* конструктор состава */
.build{display:flex;flex-direction:column;gap:18px}
.grp h4{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sub);margin-bottom:9px}
.rrow{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--line);
  border-radius:12px;background:rgba(8,13,25,.4);margin-bottom:7px}
.rrow .info{flex:1;min-width:0}
.rrow .info b{font-size:.9rem;font-weight:600}
.rrow .info span{display:block;font-size:.77rem;color:var(--sub);line-height:1.45}
.rrow .num{display:flex;align-items:center;gap:7px;flex:none}
.rrow .num button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:rgba(21,33,64,.9);
  color:var(--text);cursor:pointer;font-size:1rem;line-height:1;font-family:var(--body)}
.rrow .num button:hover{border-color:var(--line-gold)}
.rrow .num button:disabled{opacity:.3;cursor:not-allowed}
.rrow .num b{width:20px;text-align:center;font-family:var(--display);font-weight:700}
.rrow.on{border-color:var(--line-gold);background:rgba(232,180,76,.07)}
.tally{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;border-radius:13px;border:1px solid var(--line);
  background:rgba(8,13,25,.5);margin-bottom:16px;font-size:.86rem}
.tally b{font-family:var(--display)}
.tally .t-town{color:var(--town)}.tally .t-mob{color:var(--mob)}.tally .t-solo{color:var(--solo)}
.tally .t-bad{color:var(--bad)}.tally .t-ok{color:var(--ok)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* голосование */
.vrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(150,175,220,.08)}
.vrow:first-child{border-top:none}
.vrow img{width:28px;height:28px;border-radius:50%;flex:none}
.vrow .nm{flex:1;font-size:.9rem}
.vrow .bar2{width:90px;height:6px;border-radius:3px;background:rgba(150,175,220,.14);overflow:hidden;flex:none}
.vrow .bar2 i{display:block;height:100%;background:var(--gold)}
.vrow .n{width:22px;text-align:right;font-family:var(--display);font-weight:700;font-size:.85rem;flex:none}

/* чат */
.tabs{display:flex;gap:4px;padding:0 14px 10px;flex-wrap:wrap}
.tabs button{font-family:var(--body);font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:9px;
  border:1px solid transparent;background:rgba(8,13,25,.5);color:var(--sub);cursor:pointer}
.tabs button.on{color:var(--gold);border-color:var(--line-gold);background:rgba(232,180,76,.1)}
.feed{height:340px;overflow-y:auto;padding:0 18px;display:flex;flex-direction:column;gap:9px}
.feed::-webkit-scrollbar{width:6px}
.feed::-webkit-scrollbar-thumb{background:rgba(150,175,220,.22);border-radius:3px}
.feed .m .h{font-size:.74rem;color:var(--sub)}
.feed .m .h b{color:var(--sky);font-weight:600}
.feed .m.host .h b{color:var(--gold)}
.feed .m .tx{font-size:.89rem;word-break:break-word}
.feed .empty{color:var(--sub);font-size:.84rem;text-align:center;padding:24px 0}
.send{display:flex;gap:8px;padding:12px 18px 0}
.send input{font-size:.88rem;padding:9px 12px}
.send button{flex:none;padding:9px 15px;font-size:.85rem}

/* журнал */
.log{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;font-size:.83rem}
.log::-webkit-scrollbar{width:6px}
.log::-webkit-scrollbar-thumb{background:rgba(150,175,220,.22);border-radius:3px}
.log .l{color:var(--sub);display:flex;gap:8px}
.log .l i{color:rgba(150,175,220,.5);font-style:normal;flex:none;font-size:.76rem;padding-top:1px}
.log .l-death{color:#F0A392}
.log .l-phase{color:var(--gold-soft)}
.log .l-win{color:var(--ok);font-weight:600}

/* итог */
.final{text-align:center;padding:26px 22px}
.final .cup{font-size:2.6rem}
.final h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:8px 0 4px}
.final .why{color:var(--sub);margin-bottom:18px}
.rollout{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;text-align:left}
.rollout .r{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(8,13,25,.4)}
.rollout img{width:26px;height:26px;border-radius:50%;flex:none}
.rollout .n{flex:1;font-size:.85rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* гайд */
.guide{margin-top:40px}
.guide details{border:1px solid var(--line);border-radius:14px;background:rgba(17,28,54,.6);margin-bottom:10px;overflow:hidden}
.guide summary{cursor:pointer;padding:15px 20px;font-family:var(--display);font-weight:700;font-size:.95rem;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:'+';color:var(--gold);font-size:1.2rem;flex:none}
.guide details[open] summary::after{content:'−'}
.guide .in{padding:0 20px 20px;color:#C4CFE4;font-size:.92rem}
.guide .in p{margin-bottom:10px}
.guide .in ul,.guide .in ol{margin:0 0 12px 20px;display:flex;flex-direction:column;gap:5px}
.guide .in h4{font-family:var(--display);font-size:.85rem;margin:16px 0 7px;color:var(--gold-soft)}
.order{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.order span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:5px 11px;border-radius:9px;
  border:1px solid var(--line);background:rgba(8,13,25,.5)}
.order span i{font-style:normal;color:var(--gold);font-weight:700;font-size:.72rem}
.rtab{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:6px}
.rtab th,.rtab td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.rtab th{color:var(--sub);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.rtab td:first-child{white-space:nowrap;font-weight:600}
.scrollx{overflow-x:auto}

footer{border-top:1px solid var(--line);padding:28px var(--pad);text-align:center;color:var(--sub);font-size:.85rem}
footer a{color:var(--gold-soft);text-decoration:none}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--panel2);
  border:1px solid var(--line-gold);border-radius:12px;padding:12px 20px;font-size:.9rem;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.spin{display:grid;place-items:center;padding:60px 0;color:var(--sub)}

/* ===================== карточки колоды =====================
   Мини-карта в списках, портрет в аватарках и полноэкранный показ.
   Пропорции печатной карты 1:1.418 — их и держим везде. */
.cardimg{display:block;width:100%;aspect-ratio:1/1.418;object-fit:cover;border-radius:7px;
  border:1px solid rgba(0,0,0,.5);box-shadow:0 3px 10px rgba(0,0,0,.45);background:#2a2016}
.cardimg.noart{display:grid;place-items:center;background:linear-gradient(160deg,#2A2016,#1B140D);
  border:1px dashed rgba(232,180,76,.35)}
.cardimg.noart i{font-style:normal;font-size:1.2rem;opacity:.8}
.faceimg{display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;background:#2a2016}
.faceimg.noart{display:grid;place-items:center;background:linear-gradient(160deg,#2A2016,#1B140D)}
.faceimg.noart i{font-style:normal;font-size:1.1rem;opacity:.8}

/* кнопки-обёртки: карта должна ощущаться как карта — приподнимается и светится */
.mycard,.rthumb,.sthumb,.gthumb{border:none;background:none;padding:0;cursor:pointer;flex:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),filter .18s;display:block}
.mycard:hover,.rthumb:hover,.sthumb:hover,.gthumb:hover{transform:translateY(-3px) rotate(-1.2deg);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.mycard{width:96px}
.rthumb{width:44px}
.sthumb{width:76px}
.gthumb{width:30px;display:inline-block;vertical-align:middle;margin-right:9px}
.rtab td.rname{white-space:nowrap}

/* шапка ночного шага: портрет слева, название и суть справа */
.steprole{display:flex;align-items:center;gap:16px;margin:6px 0 2px}
.steprole h2{font-family:var(--display);font-weight:800;font-size:1.45rem;margin:0}
.steprole>div{min-width:0}

/* «Ваша роль» — карта вместо квадратной иконки */
.myrole .mycard{align-self:flex-start}

/* итог партии: портрет, ник и роль в столбик */
.rollout .r{gap:11px;padding:7px 9px}
.rollout .r.out{opacity:.5}
.rollout .rface{width:44px;height:44px;flex:none;border-radius:9px}
.rollout .n{display:flex;flex-direction:column;gap:2px;min-width:0}
.rollout .n b{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rollout .n .rl{align-self:flex-start;font-size:.68rem}
.rollout .sk{flex:none;font-size:.85rem}

/* ── карта во весь экран ─────────────────────────────────────────── */
.cardov{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:rgba(5,8,16,.82);backdrop-filter:blur(10px);opacity:0;transition:opacity .22s}
.cardov.in{opacity:1}
.cardov.out{opacity:0}
.cardov-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:min(94vw,760px)}
.cardov-card{width:min(72vw,300px);transform:rotateY(18deg) scale(.9);opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .4s}
.cardov.in .cardov-card{transform:none;opacity:1}
/* при раздаче карта «переворачивается» — на секунду читается как рубашка */
.cardov.dealt .cardov-card{transform:rotateY(-92deg) scale(.86)}
.cardov.dealt.in .cardov-card{transform:none}
.cardov-card .cardimg{border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(232,180,76,.2)}
.dealt-lbl{font-family:var(--display);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .5s .25s}
.cardov.in .dealt-lbl{opacity:1}
.cardov-txt{text-align:center;max-width:46ch;color:#C4CFE4;font-size:.92rem;
  opacity:0;transform:translateY(10px);transition:opacity .45s .18s,transform .45s .18s}
.cardov.in .cardov-txt{opacity:1;transform:none}
.cardov-txt h3{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--text);margin-bottom:2px}
.cardov-txt .side{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px}
.cardov-txt .side.town{color:var(--town)}
.cardov-txt .side.mob{color:var(--mob)}
.cardov-txt .side.solo{color:var(--solo)}
.cardov-x{position:fixed;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(21,33,64,.9);color:var(--sub);cursor:pointer;font-size:1rem;
  backdrop-filter:blur(6px)}
.cardov-x:hover{color:var(--text);border-color:var(--line-gold)}
@media (max-width:560px){
  .cardov-card{width:74vw}
  .cardov-x{top:12px;right:12px}
  .mycard{width:76px}
  .sthumb{width:62px}
}
@media (prefers-reduced-motion:reduce){
  .cardov-card,.cardov-txt,.dealt-lbl{transition:none}
  .cardov.dealt .cardov-card{transform:none}
  .mycard:hover,.rthumb:hover,.sthumb:hover,.gthumb:hover{transform:none}
}