/* QORA TUMAN — 1920-yillar ovozsiz kinosi: sepiya, plyonka, tuman. Yagona aksent: qon qizili. */
:root {
  --ink: #0b0a08;
  --ink-2: #14110d;
  --ink-3: #1d1913;
  --paper: #dccfb2;
  --paper-2: #b9aa88;
  --paper-dim: #8f8269;
  --paper-faint: #5c5343;
  --line: #5d5343;
  --blood: #a3121a;
  --blood-hi: #d0202a;
  --app-h: 100dvh;
  --wx: 0px;
  --wy: 0px;
  --f-title: 'IM Fell English SC', 'Times New Roman', serif;
  --f-text: 'IM Fell English', Georgia, serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --sky1: #5e5a52; --sky2: #8d8677; --sky3: #b2a991;
  --far: #77705f; --far-tree: #6a6354;
  --mid: #3b362d; --mid-tree: #2c2822;
  --cloud: #d3c9b2;
}
body.t-night {
  --sky1: #060608; --sky2: #1f1d18; --sky3: #4a4336;
  --far: #23201a; --far-tree: #1e1b16;
  --mid: #100e0b; --mid-tree: #0c0b09;
  --cloud: #3a362d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-text); font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
b { font-weight: normal; color: var(--paper); }
.blood { color: var(--blood-hi) !important; }
.dim { color: var(--paper-dim); }
.center { text-align: center; }

/* ───────────────────────── sahna ───────────────────────── */
#world {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  transform: translate3d(var(--wx), var(--wy), 0) scale(1.03);
}
#scene { position: absolute; inset: 0; }
#scene .layer { position: absolute; inset: -24px -30px; will-change: transform; }
#scene .layer svg { width: 100%; height: 100%; display: block; }
.sky1 { stop-color: var(--sky1); } .sky2 { stop-color: var(--sky2); } .sky3 { stop-color: var(--sky3); }
.sky1, .sky2, .sky3 { transition: stop-color 2.4s steps(8); }
.stars { opacity: 0; transition: opacity 2s steps(6); }
body.t-night .stars { opacity: .8; }
.stars circle:nth-child(3n) { animation: twinkle 3.2s steps(2) infinite; }
.stars circle:nth-child(5n) { animation: twinkle 4.6s steps(2) infinite 1s; }
@keyframes twinkle { 50% { opacity: .2; } }
.moon { opacity: .45; transition: opacity 2.4s steps(8); }
body.t-night .moon { opacity: 1; }
.cloud { fill: var(--cloud); opacity: .28; transition: fill 2.4s steps(8); }
.cloud.c0 { animation: drift 160s steps(320) infinite alternate; }
.cloud.c1 { animation: drift 220s steps(440) infinite alternate-reverse; opacity: .2; }
.cloud.c2 { animation: drift 120s steps(240) infinite alternate; opacity: .34; }
body.t-night .cloud { opacity: .55; }
@keyframes drift { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
.far-hill { fill: var(--far); transition: fill 2.4s steps(8); }
.far-trees { color: var(--far-tree); transition: color 2.4s steps(8); }
.mid-hill { fill: var(--mid); transition: fill 2.4s steps(8); }
.mid-trees { color: var(--mid-tree); transition: color 2.4s steps(8); }
.fore-ground { fill: #0a0907; }
.fore-dark { fill: #0a0907; color: #0a0907; }
.bunker { filter: brightness(1); transition: filter 2.4s steps(8); }
body.t-night .bunker { filter: brightness(.55); }
.bunker .lamp { animation: lamp 3s steps(1) infinite; }
@keyframes lamp { 0%, 100% { opacity: .9; } 41% { opacity: .2; } 43% { opacity: .85; } 70% { opacity: .55; } 72% { opacity: .95; } }
.bunker .wheel { animation: wheel 14s steps(1) infinite; }
@keyframes wheel { 0%, 88% { transform: translate(500px, 806px) rotate(0); } 90% { transform: translate(500px, 806px) rotate(-12deg); } 93% { transform: translate(500px, 806px) rotate(8deg); } 96% { transform: translate(500px, 806px) rotate(0); } }

.shadowman { opacity: 0; }
.shadowman.show { animation: shadowman 1.8s steps(9) forwards; }
@keyframes shadowman { 0% { opacity: 0; } 22% { opacity: .85; } 55% { opacity: .85; } 66% { opacity: 0; } 72% { opacity: .5; } 78%, 100% { opacity: 0; } }

#crows { pointer-events: none; z-index: 1; }
.crow-fly { position: absolute; left: 0; width: calc(54px * var(--sc, 1)); animation: fly-ltr 10s steps(60) forwards; }
.crow-fly.rtl { animation-name: fly-rtl; }
.crow-fly.rtl .crow { transform: scaleX(-1); }
.crow { width: 100%; display: block; overflow: visible; }
.crow .f1 { animation: flap .32s steps(1) infinite; }
.crow .f2 { animation: flap .32s steps(1) infinite reverse; opacity: 0; }
@keyframes flap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fly-ltr { from { transform: translate(-80px, 0); } 50% { transform: translate(55vw, 24px); } to { transform: translate(115vw, -10px); } }
@keyframes fly-rtl { from { transform: translate(115vw, 0); } 50% { transform: translate(45vw, 30px); } to { transform: translate(-90px, -14px); } }

#fog { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: .9; transition: opacity 2.4s steps(8); }
body.t-night #fog { opacity: .42; }
body.t-night #scene { filter: contrast(1.08); }
#scene { transition: filter 2.4s steps(8); }
#flash { position: absolute; inset: 0; background: #efe6d2; opacity: 0; pointer-events: none; z-index: 3; }
#flash.on { animation: flash 1s steps(1) forwards; }
@keyframes flash { 0% { opacity: 0; } 4% { opacity: .55; } 10% { opacity: .05; } 16% { opacity: .38; } 24% { opacity: 0; } 100% { opacity: 0; } }
#bolt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; pointer-events: none; }
#bolt.on { animation: flash 1s steps(1) forwards; }

/* ───────────────────────── plyonka ───────────────────────── */
#film { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#grain { position: absolute; inset: -100px; background-size: 160px 160px; opacity: .55; animation: grain .6s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-37px, 21px); } 33% { transform: translate(53px, -44px); }
  50% { transform: translate(-61px, -12px); } 67% { transform: translate(18px, 63px); } 83% { transform: translate(71px, 9px); }
}
#flicker { position: absolute; inset: 0; background: #000; opacity: 0; animation: flicker 2.6s steps(1) infinite; }
@keyframes flicker {
  0% { opacity: .04; } 7% { opacity: 0; } 13% { opacity: .07; } 19% { opacity: .01; } 31% { opacity: .05; }
  43% { opacity: 0; } 52% { opacity: .09; } 55% { opacity: .02; } 71% { opacity: .05; } 86% { opacity: 0; } 92% { opacity: .06; }
}
#vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 48%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .9) 100%),
    linear-gradient(rgba(70, 48, 18, .07), rgba(70, 48, 18, .07));
}
.scratch { position: absolute; top: 0; width: 1px; background: rgba(232, 222, 196, .7); opacity: 0; }
.scratch:nth-child(odd) { background: rgba(0, 0, 0, .7); }
.dust { position: absolute; opacity: 0; }

/* ───────────────────────── ilova ───────────────────────── */
#app {
  position: fixed; left: 0; right: 0; top: 0; margin: 0 auto;
  height: var(--app-h); max-width: 560px; z-index: 10;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translate3d(calc(var(--wx) * .35), calc(var(--wy) * .35), 0);
  padding-bottom: env(safe-area-inset-bottom);
}
.boot { margin: auto; text-align: center; }
.boot-title { font-family: var(--f-title); font-size: 2.6rem; letter-spacing: .12em; animation: logoflick 2.2s steps(1) infinite; }
.boot-sub { font-family: var(--f-type); color: var(--paper-dim); font-size: .85rem; margin-top: 8px; }

/* bosh ekran */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8vh 24px 4vh; text-align: center; }
.logo-wrap { margin-top: 2vh; }
.logo { font-family: var(--f-title); font-weight: normal; font-size: clamp(3.4rem, 18vw, 5.2rem); line-height: .86; letter-spacing: .06em; margin: 6px 0; color: #e8dcc0; text-shadow: 0 0 1px #000, 3px 3px 0 #000, 0 0 24px rgba(0, 0, 0, .9); animation: logoflick 5s steps(1) infinite; }
@keyframes logoflick { 0%, 100% { opacity: 1; } 31% { opacity: .82; } 32% { opacity: 1; } 64% { opacity: .9; } 65% { opacity: 1; } 66% { opacity: .7; } 67% { opacity: 1; } }
.logo-sub { font-family: var(--f-type); font-size: .78rem; letter-spacing: .3em; color: var(--paper-2); text-shadow: 0 0 6px #000, 0 0 2px #000; text-transform: uppercase; }
.logo-line { font-style: italic; color: var(--paper-2); margin-top: 6px; text-shadow: 0 0 8px #000, 0 0 2px #000; }
.home-actions { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
.home-actions .lbl { text-align: left; font-family: var(--f-title); color: var(--paper-2); }
.joinrow { display: flex; gap: 8px; }
.joinrow input { flex: 1; min-width: 0; text-align: center; letter-spacing: .4em; text-transform: uppercase; font-size: 1.15rem; }
.home .who { display: flex; align-items: center; gap: 8px; font-family: var(--f-type); font-size: .85rem; color: var(--paper); background: rgba(10, 9, 7, .75); padding: 4px 12px 4px 4px; border-radius: 999px; text-shadow: 0 0 6px #000; }

input {
  background: rgba(10, 9, 7, .9); border: 1px solid var(--line); color: var(--paper);
  font-family: var(--f-type); font-size: 1rem; padding: 10px 12px; border-radius: 0; outline: none;
}
input:focus { border-color: var(--paper-2); }
input::placeholder { color: var(--paper-faint); }

.btn {
  display: inline-block; text-align: center; text-decoration: none;
  font-family: var(--f-title); font-size: 1.08rem; letter-spacing: .08em;
  background: rgba(20, 17, 13, .92); color: var(--paper);
  border: 1px solid #8c7d61; padding: 10px 18px;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px #4b4232;
}
.btn:active { transform: translate(1px, 1px); }
.btn.primary { background: #d6c8a6; color: #120f0b; border-color: #e6d9bb; box-shadow: inset 0 0 0 3px #d6c8a6, inset 0 0 0 4px #6f6148; }
.btn.ghost { background: rgba(11, 10, 8, .55); }
.btn.small { font-size: .85rem; padding: 6px 12px; }
.btn.big { width: 100%; font-size: 1.25rem; padding: 14px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* xona joylashuvi */
.room { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hud {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(rgba(8, 7, 5, .96), rgba(8, 7, 5, .7));
  border-bottom: 1px solid rgba(93, 83, 67, .6);
}
.hud-l { flex: 1; min-width: 0; }
.hud .ph { font-family: var(--f-title); font-size: 1.45rem; line-height: 1; letter-spacing: .06em; }
.hud .day { font-family: var(--f-type); font-size: .72rem; color: var(--paper-dim); letter-spacing: .12em; }
.hud-timer { font-family: var(--f-type); font-size: 1.5rem; min-width: 3.2em; text-align: center; }
.hud-timer.low { color: var(--blood-hi); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hud-r { display: flex; gap: 6px; }
.ib { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11, 10, 8, .8); display: grid; place-items: center; font-family: var(--f-title); font-size: 1rem; padding: 0; }
body[data-phase="night"] .hud .ph { color: #c9bfa9; }
body[data-phase="verdict"] .hud .ph { color: var(--blood-hi); }

.board { background: linear-gradient(rgba(8, 7, 5, .25), rgba(8, 7, 5, .55)); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 14px; -webkit-overflow-scrolling: touch; }
.chatbox { flex: 0 0 auto; height: 30%; min-height: 150px; display: flex; flex-direction: column; background: rgba(9, 8, 6, .92); border-top: 1px solid var(--line); }

/* portretlar */
.cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; margin: 8px 0; }
@media (min-width: 440px) { .cast { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { position: relative; text-align: center; cursor: pointer; min-width: 0; }
.portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.portrait .oval { position: absolute; inset: 5% 6%; border-radius: 50%; overflow: hidden; background: #2a241b; }
.portrait .oval img, .portrait .oval > svg.sil { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .oval img { filter: sepia(.85) grayscale(.35) contrast(1.15) brightness(.82); }
.portrait .oval img.ai { filter: contrast(1.12) brightness(1.18); }
.portrait .oval::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 14px 4px rgba(0, 0, 0, .75); pointer-events: none; }
.portrait .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait .cracks, .portrait .deathmark, .portrait .redeyes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.portrait.dead .oval > img, .portrait.dead .oval > svg.sil { filter: grayscale(1) brightness(.28) contrast(1.3); }
.portrait.cursed .oval { box-shadow: 0 0 0 1px rgba(163, 18, 26, .7), 0 0 10px rgba(163, 18, 26, .55); }
.redeyes .eyes { animation: eyes 2.4s steps(1) infinite; }
@keyframes eyes { 0%, 100% { opacity: 1; } 46% { opacity: .55; } 48% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: .75; } }
.portrait.mini { width: 26px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.portrait.mini .frame ellipse:nth-child(n+2), .portrait.mini .frame path { display: none; }
.portrait.big { width: 120px; margin: 0 auto 6px; }
.tile .nm { font-size: .78rem; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.tile.is-dead .nm { color: var(--paper-faint); text-decoration: line-through; text-decoration-color: var(--blood); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 2px; }
.tag { font-family: var(--f-type); font-size: .58rem; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); padding: 0 3px; color: var(--paper-2); background: rgba(10, 9, 7, .75); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag.me { border-color: var(--paper-2); color: var(--paper); }
.tag.host { border-color: #a8976f; color: #e2d3ad; }
.tag.off { opacity: .6; }
.tag.ok { border-color: #7e8e6a; color: #c4cfb0; }
.tag.blood, .tag.role.cursed { border-color: var(--blood); color: var(--blood-hi); }
.votes { position: absolute; top: -2px; right: 2px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--blood); color: #f2e6cc; font-family: var(--f-type); font-size: .8rem; line-height: 22px; animation: pop .3s steps(3); }
.kick { position: absolute; top: -4px; right: -2px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); font-size: .65rem; padding: 0; }
.tile.just-died .portrait { animation: shatter 1.4s steps(7); }
.tile.just-died .deathmark { animation: markin 1.4s steps(6); }
@keyframes shatter {
  0% { transform: none; filter: brightness(1.6); } 15% { transform: translate(-3px, 1px) rotate(-2deg); }
  30% { transform: translate(3px, -1px) rotate(2deg); filter: brightness(.6); } 45% { transform: translate(-2px, 2px); }
  60% { transform: translate(1px, 0) rotate(1deg); } 100% { transform: none; filter: none; }
}
@keyframes markin { 0%, 40% { opacity: 0; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
.tile.winner .portrait .oval { box-shadow: 0 0 0 2px #e6d6ae, 0 0 16px rgba(230, 214, 174, .5); }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* lobbi */
.lobby { padding-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.codebox { text-align: center; padding: 14px 12px; background: rgba(10, 9, 7, .78); border: 1px solid var(--line); box-shadow: inset 0 0 0 4px rgba(10, 9, 7, .9), inset 0 0 0 5px rgba(93, 83, 67, .6); }
.codebox .lbl { font-family: var(--f-type); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-dim); }
.code { font-family: var(--f-title); font-size: 2.8rem; letter-spacing: .3em; padding-left: .3em; line-height: 1.1; margin: 4px 0 10px; cursor: pointer; }
.sect { background: rgba(10, 9, 7, .55); padding: 2px 6px; font-family: var(--f-title); font-size: 1.05rem; letter-spacing: .08em; border-bottom: 1px solid var(--line); padding-bottom: 2px; display: flex; justify-content: space-between; text-shadow: 0 0 6px #000; }
.sect span { font-family: var(--f-type); font-size: .75rem; color: var(--paper-dim); }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: rgba(10, 9, 7, .7); padding: 10px; border: 1px solid rgba(93, 83, 67, .6); }
.set { display: grid; grid-template-columns: 1fr auto; font-size: .85rem; gap: 2px; }
.set b { font-family: var(--f-type); font-size: .8rem; }
.set input { grid-column: 1 / -1; width: 100%; padding: 0; border: 0; background: none; accent-color: #b9aa88; height: 26px; }
.roles-prev { text-align: center; font-family: var(--f-type); font-size: .8rem; color: var(--paper); margin: 0 auto; background: rgba(10, 9, 7, .8); padding: 4px 12px; border: 1px solid var(--line); text-shadow: 0 0 6px #000; }
.lead { margin: 0 0 8px; font-size: 1.05rem; text-shadow: 0 0 6px #000; }
.hint { margin: 6px 0; font-size: .82rem; color: var(--paper-dim); font-style: italic; }

/* o'yin */
.mybar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rolechip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 9, 7, .85); font-family: var(--f-title); font-size: .95rem; }
.rolechip .ico { width: 24px; height: 24px; color: var(--paper); }
.rolechip.cursed { border-color: var(--blood); color: var(--blood-hi); }
.rolechip.cursed .ico { color: var(--blood-hi); }
.alive-count { margin-left: auto; font-family: var(--f-type); font-size: .75rem; color: var(--paper-2); background: rgba(10, 9, 7, .8); padding: 2px 8px; }
.task { margin: 10px 0 4px; padding: 12px; background: rgba(12, 11, 8, .86); border: 1px solid var(--line); box-shadow: inset 0 0 0 3px rgba(12, 11, 8, .9), inset 0 0 0 4px rgba(93, 83, 67, .5); }
.task .btn { margin: 4px 6px 0 0; }
.verdict-text { font-family: var(--f-title); font-size: 1.3rem; text-align: center; margin: 6px 0; letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(20, 17, 13, .95); font-size: .9rem; max-width: 100%; }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.on { background: var(--blood); border-color: var(--blood-hi); color: #f3e8cf; }
body[data-phase="night"] .chip.on { animation: none; }
.cards-pick { display: grid; gap: 6px; }
.card-btn { text-align: left; padding: 8px 12px; background: #d8caa8; color: #17130e; border: 1px solid #f0e4c6; box-shadow: inset 0 0 0 3px #d8caa8, inset 0 0 0 4px #8a7b5e; display: flex; flex-direction: column; }
.card-btn small { font-family: var(--f-title); font-size: .78rem; letter-spacing: .1em; color: #5b4e39; }
.card-btn span { font-size: 1rem; }
.card-btn:active { transform: translate(1px, 1px) rotate(-.5deg); }
.tally { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; }
.tally li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.tally b { font-family: var(--f-type); color: var(--blood-hi); letter-spacing: .15em; }
.tally .dim b { color: var(--paper-dim); }
.over { text-align: center; }
.over-title { font-family: var(--f-title); font-size: 1.6rem; letter-spacing: .05em; }
.over.cursed .over-title, .over.jester .over-title { color: var(--blood-hi); }
.over-me { font-style: italic; margin: 4px 0 10px; color: var(--paper-2); }
.over-me.won { color: var(--paper); }
.over-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }

/* chat */
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tab { flex: 1; background: none; border: 0; padding: 7px 4px 6px; font-family: var(--f-title); font-size: .92rem; letter-spacing: .06em; color: var(--paper-dim); position: relative; border-bottom: 2px solid transparent; }
.tab.on { color: var(--paper); border-bottom-color: var(--paper-2); }
.tab.cursed { color: #9b4a4d; } .tab.cursed.on { color: var(--blood-hi); border-bottom-color: var(--blood); }
.tab i { font-style: normal; font-family: var(--f-type); font-size: .62rem; background: var(--blood); color: #f2e6cc; border-radius: 8px; padding: 0 5px; margin-left: 4px; vertical-align: 2px; }
.log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px; font-size: .92rem; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
.m { margin: 3px 0; overflow-wrap: anywhere; }
.m .who { font-family: var(--f-title); color: var(--paper-2); margin-right: 6px; letter-spacing: .03em; }
.m.mine .who { color: var(--paper); }
.m.cursed .who { color: var(--blood-hi); }
.m.ghost .who { color: #8e9aa0; }
.m.ghost .txt { color: #b9c0c2; font-style: italic; }
.m.sys { font-family: var(--f-type); font-size: .78rem; color: var(--paper-dim); text-align: center; padding: 2px 4px; }
.m.sys.death { color: var(--blood-hi); font-size: .84rem; }
.m.sys.over { color: var(--paper); font-size: .9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; }
.m.sys.reveal { color: var(--paper-2); }
.m.sys.vote { font-size: .72rem; opacity: .85; }
.m.sys.private { border: 1px dashed var(--paper-dim); color: var(--paper); padding: 5px 8px; text-align: left; }
.m.sys.seer { border-color: #a8976f; }
.m.sys.cursed { color: #c2585c; text-align: left; }
.m .pv { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.say { display: flex; gap: 6px; padding: 6px 8px 8px; flex: 0 0 auto; }
.say input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; }
.say input:disabled { opacity: .5; }
.say button { width: 44px; border: 1px solid var(--line); background: var(--ink-3); font-size: 1rem; }
.say.cursed input { border-color: var(--blood); }
.say.ghost input { border-color: #6f7a7e; }

/* ───────────────────────── overlay ───────────────────────── */
#overlay { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; }
#overlay.show { display: flex; }
.ov-bg { position: absolute; inset: 0; background: rgba(4, 3, 2, .82); }
.ov-box { position: relative; width: calc(100% - 32px); max-width: 420px; max-height: calc(var(--app-h) - 40px); overflow-y: auto; padding: 18px 16px; background: rgba(14, 12, 9, .97); border: 1px solid #8c7d61; box-shadow: inset 0 0 0 4px #0e0c09, inset 0 0 0 5px #4b4232, 0 0 40px #000; animation: pop .3s steps(3); text-align: center; }
.ov-box h2 { font-family: var(--f-title); font-weight: normal; font-size: 1.5rem; margin: 4px 0 6px; letter-spacing: .05em; }
.ov-box h3 { font-family: var(--f-title); font-weight: normal; margin: 14px 0 4px; font-size: 1.1rem; color: var(--paper-2); }
.ov-box .btn { margin-top: 14px; min-width: 60%; }
.ov-role .ov-box { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.rules { text-align: left; }
.rules ul { padding-left: 18px; margin: 4px 0; }
.rules li { margin: 4px 0; }
.rules .btn { display: block; margin: 16px auto 0; }

.rolecard { width: min(250px, 66vw); aspect-ratio: 2 / 3; margin: 0 auto; perspective: 1000px; cursor: pointer; }
.rc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s steps(8); }
.rolecard.flipped .rc-inner { transform: rotateY(180deg); }
.rc-back, .rc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rc-back svg { width: 100%; height: 100%; display: block; }
.rc-front { transform: rotateY(180deg); background: #d9cba8; color: #16120d; border: 2px solid #efe2c2; box-shadow: inset 0 0 0 6px #d9cba8, inset 0 0 0 7px #7a6b50, inset 0 0 40px rgba(80, 55, 20, .45); padding: 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; }
.rc-front.cursed { background: #120d0b; color: #e6d7b8; border-color: var(--blood); box-shadow: inset 0 0 0 6px #120d0b, inset 0 0 0 7px var(--blood), inset 0 0 50px rgba(163, 18, 26, .35); }
.rc-icon { width: 46%; color: #16120d; }
.rc-front.cursed .rc-icon { color: var(--blood-hi); }
.rc-icon .ico { width: 100%; height: auto; display: block; }
.rc-name { font-family: var(--f-title); font-size: 1.7rem; letter-spacing: .06em; margin-top: 6px; }
.rc-front.cursed .rc-name { color: var(--blood-hi); }
.rc-team { font-family: var(--f-type); font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; opacity: .7; }
.rc-desc { font-size: .84rem; margin: 8px 0 0; line-height: 1.25; }
.rc-partners { font-size: .82rem; margin: 6px 0 0; color: var(--blood-hi); }
.rc-partners b { color: inherit; }
.rc-amulet { font-size: .78rem; font-style: italic; margin: 6px 0 0; }

.dossier .dz-role { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-title); font-size: 1.1rem; }
.dossier .dz-role .ico { width: 28px; height: 28px; }
.dossier .dz-role.cursed { color: var(--blood-hi); }
.dossier .dz-role.unknown { color: var(--paper-faint); font-style: italic; font-family: var(--f-text); font-size: .9rem; }
.dz-death { color: var(--blood-hi); font-family: var(--f-type); font-size: .8rem; margin: 6px 0; }
.dz-seer { font-family: var(--f-type); font-size: .85rem; margin: 6px 0; }
.dz-cards { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; text-align: left; }
.dz-cards li { background: #d8caa8; color: #17130e; padding: 6px 10px; box-shadow: inset 0 0 0 2px #d8caa8, inset 0 0 0 3px #8a7b5e; display: flex; flex-direction: column; }
.dz-cards li small { font-family: var(--f-title); font-size: .74rem; color: #5b4e39; letter-spacing: .1em; }
.dz-cards li.hidden { background: #1a1611; color: var(--paper-faint); box-shadow: inset 0 0 0 2px #1a1611, inset 0 0 0 3px #3b3327; }
.dz-cards li.hidden small { color: var(--paper-faint); }
.dz-cards li.secret { background: #b9ab8a; opacity: .9; }

/* ───────────────────────── intertitr ───────────────────────── */
#intertitle { position: fixed; inset: 0; z-index: 50; background: #060504; display: none; align-items: center; justify-content: center; pointer-events: none; }
#intertitle.show { display: flex; animation: tin .5s steps(5) forwards; }
#intertitle.out { animation: tout .5s steps(5) forwards; }
@keyframes tin { 0% { opacity: 0; } 20% { opacity: .7; } 40% { opacity: .2; } 60% { opacity: 1; } 80% { opacity: .75; } 100% { opacity: 1; } }
@keyframes tout { 0% { opacity: 1; } 30% { opacity: .4; } 50% { opacity: .85; } 100% { opacity: 0; } }
#intertitle .tf { position: absolute; inset: 14% 7%; max-width: 560px; margin: 0 auto; }
#intertitle .tf svg { width: 100%; height: 100%; }
#intertitle .t-inner { position: relative; text-align: center; padding: 0 16%; max-width: 560px; animation: weave .4s steps(2) infinite; }
@keyframes weave { 50% { transform: translate(1px, -1px); } }
.t-main { font-family: var(--f-title); font-size: clamp(2.2rem, 11vw, 3.6rem); line-height: 1; letter-spacing: .08em; color: #e9ddc1; }
.t-orn { font-size: 1.2rem; color: #a99a78; margin: 12px 0 8px; }
.t-sub { font-family: var(--f-text); font-style: italic; font-size: 1.1rem; color: #cbbd9c; }
#intertitle.red .t-main { color: var(--blood-hi); }

#toast { position: fixed; left: 50%; bottom: 38%; transform: translateX(-50%); z-index: 45; max-width: 86%; padding: 10px 16px; background: rgba(10, 9, 7, .96); border: 1px solid #8c7d61; font-family: var(--f-type); font-size: .9rem; text-align: center; display: none; }
#toast.show { display: block; animation: pop .25s steps(3); }
#toast.red { border-color: var(--blood); color: #f0c7c9; }
body.offline::after { content: 'Aloqa uzildi... qayta ulanmoqda'; position: fixed; top: 0; left: 0; right: 0; z-index: 55; text-align: center; background: var(--blood); color: #f2e6cc; font-family: var(--f-type); font-size: .8rem; padding: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────────────────────── AI fonlar ───────────────────────── */
.l-photo { background: center 35% / cover no-repeat; transition: filter 2.4s steps(8); filter: brightness(.9); }
body.t-night .l-photo { filter: brightness(1.05) contrast(1.12); }
#scene.photo .l-sky, #scene.photo .l-mid, #scene.photo .l-fore { display: none; }
#scene.photo .l-far svg > *:not(#shadowman) { display: none; }
body:not([data-phase="lobby"]) .board { background: linear-gradient(rgba(6, 5, 4, .72), rgba(6, 5, 4, .86)), var(--bg-bunker, none) center / cover; }

/* ───────────────────────── stol sahnasi ───────────────────────── */
.board.ingame { display: flex; flex-direction: column; }
.board.ingame .mybar { flex: 0 0 auto; }
.board.ingame .task { flex: 0 0 auto; margin: 8px 0 0; }
.table-scene {
  position: relative; flex: 1 1 auto; min-height: 260px; margin-top: 8px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .88) 100%), var(--bg-bunker, #14110d) center / cover;
  border: 1px solid var(--line); box-shadow: inset 0 0 40px #000;
  transition: filter 2.4s steps(8);
}
body.t-night .table-scene { filter: brightness(.78) contrast(1.08); }
.tbl { position: absolute; left: 31%; right: 31%; top: 2%; bottom: 2%; z-index: 1; }
.tbl img { width: 100%; height: 100%; object-fit: fill; display: block; filter: drop-shadow(0 14px 18px #000); }
.tbl-fallback { width: 100%; height: 100%; background: linear-gradient(90deg, #2c2318, #4d3f2d 30%, #55462f 50%, #4d3f2d 70%, #2c2318); border: 2px solid #1c150d; }
.seat { position: absolute; cursor: pointer; aspect-ratio: 1 / 1.02; max-width: 47%; }
.seat.left { left: -2%; }
.seat.right { right: -2%; }
.seat .fig { position: absolute; inset: 0; }
.fig .body, .dz-fig .body, .pick-img .body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: filter .5s steps(4), transform .5s steps(4); }
.body.flip { transform: scaleX(-1); }
.sil-body svg { width: 100%; height: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse 42% 50% at 50% 46%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 42% 50% at 50% 46%, #000 55%, transparent 100%); }
.seat.cursed .body { filter: drop-shadow(0 0 5px rgba(208, 32, 42, .8)); }
.seat.can .body { filter: drop-shadow(0 0 1px #efe3c6) drop-shadow(0 0 8px rgba(239, 227, 198, .35)); animation: can 1.6s steps(2) infinite; }
@keyframes can { 50% { filter: drop-shadow(0 0 1px #efe3c6) drop-shadow(0 0 2px rgba(239, 227, 198, .2)); } }
.seat.chosen .body { filter: drop-shadow(0 0 2px var(--blood-hi)) drop-shadow(0 0 12px var(--blood)); animation: none; }
.seat.is-dead .body { filter: grayscale(1) brightness(.32) contrast(1.25); transform: rotate(-8deg) translateY(5%); }
.seat.is-dead .body.flip { transform: scaleX(-1) rotate(-8deg) translateY(5%); }
.fig-death { position: absolute; left: 22%; right: 22%; top: 4%; height: 52%; pointer-events: none; }
.fig-death svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seat.just-died .fig { animation: shatter 1.4s steps(7); }
.seat.just-died .deathmark { animation: markin 1.4s steps(6); }
.seat.winner .body { filter: drop-shadow(0 0 3px #efe3c6) drop-shadow(0 0 14px rgba(239, 227, 198, .5)); }
.seat .votes { top: 6%; right: auto; left: 45%; }
.plaque { position: absolute; z-index: 100; max-width: 30%; cursor: pointer; background: rgba(9, 8, 6, .62); border: 1px solid var(--line); padding: 1px 6px 2px; text-align: left; line-height: 1.1; }
.plaque.left { left: 1%; }
.plaque.right { right: 1%; text-align: right; }
.plaque .nm { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaque.dead .nm { color: var(--paper-faint); text-decoration: line-through; text-decoration-color: var(--blood); }
.plaque .tags { justify-content: flex-start; margin-top: 1px; }
.plaque.right .tags { justify-content: flex-end; }
.cn { font-family: var(--f-type); font-size: .56rem; letter-spacing: .02em; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn.center { text-align: center; font-size: .75rem; margin: -2px 0 6px; }
.tile .cn { text-align: center; text-shadow: 0 0 4px #000; }
.eye { display: inline-block; width: 7px; height: 4px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 4px #f00; margin-right: 4px; vertical-align: 2px; }
.board .task { background: rgba(10, 9, 7, .94); }

/* portretda personaj yuzi */
.portrait .oval img.face { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 42% 0; transform: scale(2.1); transform-origin: 40% 8%; filter: contrast(1.1) brightness(1.1); }

/* dosye va galereya */
.dz-fig { position: relative; width: min(220px, 60vw); aspect-ratio: 1; margin: 0 auto; }
.dz-fig.is-dead .body { filter: grayscale(1) brightness(.35); }
.ov-picker .ov-box { max-width: 520px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.pick { position: relative; background: rgba(20, 17, 13, .92); border: 1px solid var(--line); padding: 4px 3px 6px; }
.pick-img { position: relative; aspect-ratio: 1; }
.pick-nm { font-size: .74rem; line-height: 1.1; margin-top: 2px; }
.pick-own { font-family: var(--f-type); font-size: .56rem; color: var(--paper-dim); text-transform: uppercase; }
.pick-own.me { color: var(--paper); }
.pick.taken { opacity: .35; }
.pick.mine { border-color: var(--paper); box-shadow: 0 0 12px rgba(232, 220, 192, .3); }

/* rol kartasi AI rasm bilan */
.rc-back img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; border: 2px solid #bfae88; }
.rolecard.has-art .rc-front { justify-content: flex-start; padding: 10px 10px 12px; }
.rc-art { width: 100%; height: 56%; overflow: hidden; border: 1px solid #7a6b50; flex: 0 0 auto; }
.rc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rolecard.has-art .rc-name { font-size: 1.4rem; margin-top: 4px; }
.rolecard.has-art .rc-desc { font-size: .74rem; margin-top: 4px; }
.rolecard.has-art .rc-partners, .rolecard.has-art .rc-amulet { font-size: .72rem; margin-top: 3px; }
#scene.photo ~ #fog { opacity: .45; }
body.t-night #scene.photo ~ #fog { opacity: .14; }
.plaque .cn { font-size: .5rem; }
.plaque .tag { font-size: .5rem; }

/* ═════════════ YAGONA USLUB · effektlar faqat fonda ═════════════ */
:root {
  --f-type: 'IM Fell English', Georgia, serif;
  --panel: rgba(13, 11, 8, .9);
  --edge: rgba(190, 172, 134, .28);
  --edge-hi: rgba(214, 198, 162, .55);
}
/* Plyonka effektlari sahna ustida, lekin matn va tugmalar ostida */
#film { z-index: 4; }
#grain { opacity: .3; animation: grain 1.4s steps(4) infinite; }
#flicker { animation: flicker-soft 7s steps(1) infinite; }
@keyframes flicker-soft { 0% { opacity: .02; } 30% { opacity: 0; } 55% { opacity: .03; } 80% { opacity: .01; } }
#app { transform: none; }
#world { transform: translate3d(calc(var(--wx) * .6), calc(var(--wy) * .6), 0) scale(1.03); }
/* Doimiy miltillashlar yo'q */
.logo, .boot-title { animation: none; }
.hud-timer.low { animation: none; color: var(--blood-hi); }
.seat.can .body { animation: none; }
.redeyes .eyes { animation: none; }
#intertitle .t-inner { animation: none; }
#intertitle.show { animation: tin-soft .6s steps(3) forwards; }
#intertitle.out { animation: tout-soft .5s steps(3) forwards; }
@keyframes tin-soft { 0% { opacity: 0; } 60% { opacity: .75; } 100% { opacity: 1; } }
@keyframes tout-soft { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Panellar — bitta uslub */
.hud { background: rgba(8, 7, 5, .94); border-bottom: 1px solid var(--edge); }
.task, .codebox, .settings, .ov-box { background: var(--panel); border: 1px solid var(--edge); box-shadow: none; border-radius: 3px; }
.ov-box { box-shadow: 0 20px 60px #000; }
.sect { background: none; border: 0; border-bottom: 1px solid var(--edge); padding: 2px 0 3px; font-size: 1rem; }
.table-scene { border-color: var(--edge); border-radius: 3px; }
.roles-prev, .alive-count, .home .who { border: 1px solid var(--edge); border-radius: 3px; background: var(--panel); }
.roles-prev { font-size: .85rem; }
.alive-count { font-size: .8rem; }

/* Tugmalar — bitta uslub */
.btn { box-shadow: none; border: 1px solid var(--edge-hi); border-radius: 3px; background: rgba(20, 17, 13, .92); font-size: 1rem; letter-spacing: .06em; padding: 10px 16px; }
.btn.primary { background: #d8caa8; color: #15110c; border-color: #d8caa8; box-shadow: none; }
.btn.ghost { background: rgba(13, 11, 8, .6); border-color: var(--edge); }
.btn.small { font-size: .85rem; padding: 7px 12px; }
.btn.big { font-size: 1.15rem; padding: 13px; }
.ib { border-color: var(--edge); background: rgba(13, 11, 8, .85); }
.chip, .rolechip { border-color: var(--edge); }
.rolechip { padding: 3px 12px 3px 3px; font-size: .95rem; }
.rolechip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--edge-hi); display: block; }

/* Teglar va yozuvlar */
.tag { font-family: var(--f-text); font-size: .62rem; letter-spacing: .05em; border-color: var(--edge); border-radius: 2px; padding: 0 4px; }
.plaque { border-color: var(--edge); border-radius: 2px; }
.plaque .tag, .plaque .cn { font-size: .55rem; }
.cn { font-style: italic; letter-spacing: 0; }
.hud .day { font-size: .78rem; letter-spacing: .08em; }
.hud-timer { font-family: var(--f-title); font-size: 1.6rem; }
.codebox .lbl, .logo-sub { letter-spacing: .25em; font-size: .78rem; }
.m.sys { font-style: italic; font-size: .84rem; }
.m.sys.vote { font-size: .78rem; }
.m .pv { font-style: normal; font-size: .6rem; }

/* ───── Chat: pastda yig'iladigan panel ───── */
.room { position: relative; }
.chatbox { height: auto; min-height: 0; background: rgba(9, 8, 6, .97); border-top: 1px solid var(--edge); }
.chatbox:not(.open) .tabs, .chatbox:not(.open) .log { display: none; }
.chatbox.open { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 80; box-shadow: 0 -16px 40px rgba(0, 0, 0, .85); }
.chat-handle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 8px 14px 2px; text-align: left; color: var(--paper-2); font-size: .86rem; min-height: 32px; }
.ch-prev { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-prev b { font-family: var(--f-title); color: var(--paper); font-weight: normal; }
.ch-prev em { color: var(--paper-dim); }
.chatbox.open .ch-prev { visibility: hidden; }
.ch-badge { font-style: normal; background: var(--blood); color: #f2e6cc; border-radius: 9px; padding: 0 7px; font-size: .72rem; line-height: 1.5; }
.chev { width: 9px; height: 9px; border-left: 2px solid var(--paper-2); border-top: 2px solid var(--paper-2); transform: rotate(45deg); margin: 4px 4px 0; }
.chatbox.open .chev { transform: rotate(225deg); margin-top: -4px; }
.say { padding: 4px 10px 10px; }
.say input, .say button { border-radius: 3px; border-color: var(--edge); }
.tabs { border-bottom-color: var(--edge); }
.table-scene { isolation: isolate; }
.chatbox.open { z-index: 200; }
.seat.can .body { filter: drop-shadow(0 0 1px rgba(239, 227, 198, .7)) drop-shadow(0 0 4px rgba(239, 227, 198, .18)); }
.m .who { display: inline; background: none; border: 0; padding: 0; }
.chatbox.open { background: #0a0907; }
.plaque.dead { border-color: rgba(163, 18, 26, .7); }
.plaque.dead .nm::before { content: '✕'; color: var(--blood-hi); margin-right: 4px; text-decoration: none; display: inline-block; }
.seat.is-dead .body { filter: grayscale(1) brightness(.22) contrast(1.2); }
.cards-pick { grid-template-columns: 1fr 1fr; gap: 6px; }
.card-btn { padding: 6px 8px; box-shadow: none; border: 1px solid #8a7b5e; border-radius: 3px; }
.card-btn small { font-size: .66rem; }
.card-btn span { font-size: .86rem; line-height: 1.15; }
.card-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ═════════════ Perspektivali stol ═════════════ */
.table-scene { display: flex; align-items: center; justify-content: center; background: #050403; border: 1px solid var(--edge); box-shadow: none; overflow: hidden; }
.stage { position: relative; background: #0a0806 center / 100% 100% no-repeat; overflow: hidden; }
.stage-fog { position: absolute; inset: 0; pointer-events: none; z-index: 250; background: radial-gradient(ellipse 60% 45% at 50% 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%), linear-gradient(rgba(5, 4, 3, .55), rgba(5, 4, 3, 0) 30%); }
body.t-night .table-scene { filter: brightness(.82); }
.seat { aspect-ratio: auto; max-width: none; height: auto; }
.seat.left, .seat.right { left: auto; right: auto; }
.seat .fig { position: relative; inset: auto; width: 100%; aspect-ratio: 1; }
.seat .body { filter: brightness(var(--dk, 1)); }
.seat.cursed .body { filter: brightness(var(--dk, 1)) drop-shadow(0 0 5px rgba(208, 32, 42, .85)); }
.seat.can .body { filter: brightness(var(--dk, 1)) drop-shadow(0 0 1px rgba(239, 227, 198, .75)) drop-shadow(0 0 4px rgba(239, 227, 198, .2)); }
.seat.chosen .body { filter: brightness(var(--dk, 1)) drop-shadow(0 0 2px var(--blood-hi)) drop-shadow(0 0 10px var(--blood)); }
.seat.winner .body { filter: brightness(var(--dk, 1)) drop-shadow(0 0 3px #efe3c6) drop-shadow(0 0 12px rgba(239, 227, 198, .5)); }
.seat.is-dead .body { filter: grayscale(1) brightness(.18); transform: rotate(-6deg) translateY(6%); }
.seat.is-dead .body.flip { transform: scaleX(-1) rotate(-6deg) translateY(6%); }
.plaque { transform: translate(-50%, -100%); max-width: 34%; padding: 1px 5px; text-align: center; background: rgba(8, 7, 5, .7); }
.plaque.left, .plaque.right { left: auto; right: auto; text-align: center; }
.plaque .nm { font-size: .62em; }
.plaque .cn { font-size: .48em; }
.plaque .tags { justify-content: center; }
.plaque .tag { font-size: .48em; }
.plaque.chosen { border-color: var(--blood-hi); }
.plaque .votes { position: absolute; top: -10px; right: -10px; left: auto; min-width: 18px; height: 18px; line-height: 18px; font-size: .7rem; }

/* Yorliqlar: ixcham, chuqurlikka qarab kichrayadi */
.plaque { font-size: calc(var(--k, 1) * 1em); transform: translate(-50%, -100%); max-width: none; white-space: nowrap; padding: 1px 6px 2px; }
.plaque .nm { font-size: .64em; }
.plaque.me { border-color: var(--edge-hi); background: rgba(40, 33, 22, .85); }
.plaque.off { opacity: .55; }
.plaque.dead .nm::before { content: none; }
.plaque .mk { font-style: normal; margin-left: 4px; }
.plaque .mk.ok { color: #c4cfb0; }
.plaque .mk.dead { color: var(--blood-hi); }
.plaque .rl { display: block; font-size: .5em; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.plaque .rl.cursed { color: var(--blood-hi); }
.stage { flex: 0 0 auto; transform: translateY(6%); }

/* ═════════════ Skill'lar asosidagi qayta qurish: kontrast, o'lcham, tegish, fokus ═════════════ */
/* Ranglar tokeni (ui-ux-pro-max: matn ≥ 7:1, ikkinchi darajali ≥ 4.5:1, qizil matn ≥ 4.5:1) */
:root {
  --ink: #0d0b08;
  --paper: #e6d9bb;      /* ~13:1 */
  --paper-2: #cfc1a0;    /* ~10:1 */
  --paper-dim: #b3a585;  /* ~8:1 */
  --paper-faint: #8a7d63;/* faqat o'chirilgan holatlar uchun */
  --blood: #a3121a;      /* fon/chegara */
  --blood-hi: #e0444b;   /* qorong'ida matn: ~4.7:1 */
  --tap: 44px;
}
html, body { background: var(--ink); }
.board, .log { overscroll-behavior: contain; }

/* Tipografiya: 12px dan kichik matn yo'q, katta harfli yorliqlar yo'q (frontend-design) */
.tag, .pick-own, .rc-team, .plaque .rl, .codebox .lbl, .m .pv { text-transform: none; letter-spacing: .02em; }
.tag { font-size: .75rem; padding: 1px 6px; }
.cn { font-size: .75rem; }
.hint { font-size: .9rem; color: var(--paper-dim); }
.m.sys { font-size: .88rem; color: var(--paper-dim); }
.m.sys.vote { font-size: .82rem; }
.tile .nm, .pick-nm { font-size: .85rem; }
.pick-own { font-size: .72rem; }
.plaque .nm { font-size: max(11px, .66em); display: inline-flex; align-items: center; gap: 3px; }
.plaque .rl { font-size: max(10px, .52em); }
.plaque .mk { display: inline-flex; margin-left: 2px; }
.plaque .mk svg { width: 1.1em; height: 1.1em; }
.codebox .lbl { font-size: .85rem; letter-spacing: .04em; }
.hud .day { font-size: .85rem; letter-spacing: .02em; color: var(--paper-dim); }
.code-sm { font-family: var(--f-title); letter-spacing: .12em; margin-left: 6px; color: var(--paper-2); }

/* Tegish maydonlari ≥ 44px, oralari ≥ 8px (ui-ux-pro-max / pro-rules) */
.ib { width: var(--tap); height: var(--tap); }
.hud-r { gap: 8px; }
.btn { min-height: var(--tap); }
.btn.small { min-height: var(--tap); }
.tab { min-height: var(--tap); }
.say input, .say button { min-height: var(--tap); }
.say button { width: var(--tap); display: grid; place-items: center; }
.chat-handle { min-height: var(--tap); }
.kick { width: 26px; height: 26px; display: grid; place-items: center; }
.kick::after { content: ''; position: absolute; inset: -10px; }
.kick svg { width: 14px; height: 14px; }
.chip { min-height: var(--tap); }
.task .btn { margin: 6px 8px 0 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row .hint { flex-basis: 100%; }
.pick-open { display: inline-flex; align-items: center; gap: 8px; }
.pick-open svg { flex: 0 0 auto; }

/* Ko'rinadigan fokus (accessibility) */
:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.btn.primary:focus-visible { outline-color: var(--blood-hi); }

/* Telegram safe area (game-ui-ux) */
.hud { padding-top: calc(8px + env(safe-area-inset-top) + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)); }
#app { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tg-safe-area-inset-bottom, 0px)); }

/* Telegram ichida asosiy amal MainButton'da — sahifadagi takrori yashiriladi */
body.tg .dup-main { display: none; }

/* Pastdan chiqadigan tanlash paneli: 56px qatorlar */
#overlay.ov-sheet { align-items: flex-end; }
#overlay.ov-sheet .ov-box { width: 100%; max-width: 560px; border-radius: 10px 10px 0 0; border-bottom: 0; padding: 16px 0 calc(12px + env(safe-area-inset-bottom)); max-height: 78%; animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.tpick h2 { padding: 0 16px; font-size: 1.25rem; }
.trows { display: flex; flex-direction: column; margin: 8px 0 4px; text-align: left; }
.trow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px; background: none; border: 0; border-top: 1px solid var(--edge); color: var(--paper); text-align: left; }
.trow:last-child { border-bottom: 1px solid var(--edge); }
.trow .portrait.mini { width: 36px; }
.trow-nm { flex: 1; font-size: 1.02rem; display: flex; flex-direction: column; line-height: 1.15; }
.trow-nm small { font-size: .78rem; color: var(--paper-dim); font-style: italic; }
.trow-note { font-size: .78rem; color: var(--blood-hi); }
.trow.on { background: rgba(163, 18, 26, .28); }
.trow:active { background: rgba(230, 217, 187, .08); }
.tpick .btn { margin: 10px 16px 0; min-width: 0; width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) { #overlay.ov-sheet .ov-box { animation: none; } }
.row .btn { flex: 1 1 0; margin: 0; padding: 10px 12px; white-space: nowrap; font-size: .95rem; }

/* ═════════════ O'yinchilar kartalari setkasi (stol o'rniga) ═════════════ */
.cards-grid { display: grid; gap: 8px; margin: 10px 0 12px; }
.cards-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pcard {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; overflow: hidden;
  background: #120f0b; border: 1px solid var(--edge); border-radius: 6px; color: var(--paper); text-align: left;
  box-shadow: inset 0 0 0 3px #0d0b08, inset 0 0 0 4px rgba(190, 172, 134, .18);
  transition: border-color .15s ease, transform .1s ease;
}
.pcard:active { transform: scale(.98); }
.pc-art { position: absolute; inset: 0; }
.pc-art .body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: none; transform: none; }
.pc-art .sil-body svg { width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
.pc-plate {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 6px 6px;
  background: linear-gradient(rgba(10, 8, 6, 0), rgba(10, 8, 6, .88) 45%, rgba(10, 8, 6, .96));
  display: flex; flex-direction: column; gap: 1px;
}
.pc-nm { display: flex; align-items: center; gap: 4px; font-size: .85rem; line-height: 1.15; }
.pc-nm > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-nm .mk { flex: 0 0 auto; display: inline-flex; color: #c8d4b2; }
.pc-cn { font-size: .72rem; color: var(--paper-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-role { font-size: .72rem; color: var(--paper-2); }
.pc-role.cursed { color: var(--blood-hi); }
.c4 .pc-nm { font-size: .78rem; }
.c4 .pc-cn { display: none; }
.pc-me { position: absolute; top: 6px; left: 6px; font-size: .72rem; padding: 0 6px; border-radius: 3px; background: rgba(230, 217, 187, .9); color: #15110c; }
.pcard .votes { position: absolute; top: 6px; right: 6px; left: auto; z-index: 3; }
/* Holatlar */
.pcard.me { border-color: var(--edge-hi); }
.pcard.cursed { border-color: var(--blood); box-shadow: inset 0 0 0 3px #0d0b08, inset 0 0 18px rgba(163, 18, 26, .55); }
.pcard.can { border-color: var(--paper-2); }
.pcard.chosen { border: 2px solid var(--blood-hi); box-shadow: 0 0 0 2px rgba(224, 68, 75, .3), inset 0 0 22px rgba(163, 18, 26, .5); }
.pcard.off .pc-art { opacity: .55; }
.pcard.is-dead .pc-art .body, .pcard.is-dead .pc-art svg { filter: grayscale(1) brightness(.3) contrast(1.1); }
.pcard.is-dead .pc-nm > span { text-decoration: line-through; text-decoration-color: var(--blood-hi); color: var(--paper-dim); }
.pc-stamp { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blood-hi); pointer-events: none; }
.pc-stamp svg { width: 46%; height: auto; stroke-width: 2.2; opacity: .85; }
.pcard.winner { border-color: #efe3c6; box-shadow: 0 0 14px rgba(239, 227, 198, .35); }
.pcard.just-died .pc-art { animation: shatter 1.2s steps(6); }
.board.ingame { display: block; }

/* Galereya va dosye — karta nisbati */
.pick-img { aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; }
.pick-img .body { object-fit: cover; object-position: center 20%; }
.dz-fig { width: min(200px, 56vw); aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; border: 1px solid var(--edge); }
.dz-fig .body { object-fit: cover; object-position: center 20%; }
.portrait .oval img.facepic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }