:root {
  --bg: #0a1310;
  --felt1: #22865a;
  --felt2: #125a39;
  --felt3: #0a3624;
  --wood1: #7a4826;
  --wood2: #3b200f;
  --gold: #f4c95d;
  --gold2: #d9962a;
  --ink: #f5f1e6;
  --muted: #a6b5ab;
  --team0: #ff6b6b;
  --team1: #4dabf7;
  --panel: rgba(10, 20, 15, 0.84);
  --line: rgba(255, 255, 255, 0.1);
  --card-red: #d22b3d;
  --card-black: #19202e;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cw: 64px;
  --ch: 90px;
  --sr: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 50% 30%, #163a2a 0%, transparent 70%),
    radial-gradient(900px 600px at 50% 120%, #2a1a0e 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- товч ---------- */
.btn {
  appearance: none; border: 0; border-radius: 999px;
  padding: 11px 20px; font-weight: 600; font-size: 15px; line-height: 1;
  background: rgba(255, 255, 255, 0.1); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.12s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.btn:hover { background: rgba(255, 255, 255, 0.17); }
.btn:active { transform: translateY(2px) scale(0.98); }
.btn.primary {
  background: linear-gradient(180deg, #ffd978, #eaa62a);
  color: #2b1900;
  box-shadow: 0 4px 0 #a46a12, 0 10px 24px rgba(234, 166, 42, 0.3);
}
.btn.primary:hover { background: linear-gradient(180deg, #ffe08f, #f0b23c); }
.btn.danger {
  background: linear-gradient(180deg, #ff8d7e, #e0493d);
  color: #fff;
  box-shadow: 0 4px 0 #992b22;
}
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.big { padding: 15px 24px; font-size: 17px; }
.btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; transform: none; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06); cursor: pointer; font-size: 17px;
  display: grid; place-items: center; transition: background 0.2s, transform 0.12s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn:active { transform: scale(0.94); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field select, .join-row input {
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 16px; color: var(--ink); outline: none;
  user-select: text; -webkit-user-select: text;
}
.field input:focus, .join-row input:focus { border-color: var(--gold); }

/* ---------- нүүр ---------- */
#home { align-items: center; justify-content: center; gap: 24px; padding: 16px; overflow-y: auto; }
.hero { text-align: center; }
.logo-fan { position: relative; height: 130px; width: 260px; margin: 0 auto 4px; --cw: 70px; --ch: 98px; }
.logo-fan .card { position: absolute; left: 50%; top: auto; bottom: 0; transform-origin: 50% 120%; animation: fanIn 0.9s var(--ease) both, bob 4s ease-in-out infinite; }
@keyframes fanIn { from { transform: translateX(-50%) rotate(0deg) translateY(30px); opacity: 0; } }
@keyframes bob { 50% { margin-bottom: 6px; } }
.logo {
  margin: 0; font-size: clamp(56px, 14vw, 104px); font-weight: 900; letter-spacing: 0.06em; line-height: 1;
  background: linear-gradient(180deg, #fff6d6 0%, #f4c95d 45%, #c97f12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 0 30px rgba(244, 201, 93, 0.25));
}
.tag { margin: 6px 0 0; color: var(--muted); letter-spacing: 0.08em; }
.home-panel { width: min(380px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-weight: 700; }

/* ---------- лобби ---------- */
#lobby { overflow-y: auto; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
.head-right { display: flex; align-items: center; gap: 8px; }
.room-code { text-align: center; line-height: 1.1; }
.room-code span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.room-code b { font-size: 30px; letter-spacing: 0.25em; color: var(--gold); }
.lobby-body { flex: 1; display: flex; gap: 20px; align-items: center; justify-content: center; padding: 8px 16px 24px; flex-wrap: wrap; }
.lobby-table { position: relative; width: min(520px, 100%); aspect-ratio: 1.15; }
.lobby-table .felt-mini {
  position: absolute; inset: 15% 13%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--felt1), var(--felt2) 60%, var(--felt3));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 0 8px var(--wood1), 0 0 0 11px var(--wood2), 0 16px 40px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 13px; padding: 20px;
}
.lobby-seat {
  position: absolute; transform: translate(-50%, -50%); width: 96px; padding: 8px 6px;
  border-radius: 14px; text-align: center; font-size: 13px; background: rgba(10, 18, 14, 0.92);
  border: 2px solid var(--tc); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.2s;
}
.lobby-seat.team0 { --tc: var(--team0); }
.lobby-seat.team1 { --tc: var(--team1); }
.lobby-seat.empty { border-style: dashed; opacity: 0.85; }
.lobby-seat.me { box-shadow: 0 0 0 3px rgba(244, 201, 93, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4); }
.lobby-seat .t { font-size: 10px; color: var(--tc); font-weight: 700; letter-spacing: 0.05em; }
.lobby-seat .n { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-seat .acts { display: flex; gap: 4px; }
.lobby-seat .mini { padding: 4px 8px; font-size: 11px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.lobby-seat .mini:hover { background: rgba(255, 255, 255, 0.22); }
.lobby-seat .mini.sit { background: var(--gold); color: #2b1900; font-weight: 700; }
.lobby-side { width: min(340px, 100%); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.lobby-side h3 { margin: 0; font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; }
.switch { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 1px; }
.hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.people { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.people span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }

/* ---------- тоглоом ---------- */
#game { background: transparent; }
.hud {
  flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; position: relative; z-index: 40;
}
.hud-left, .hud-right { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hud-right { justify-content: flex-end; }
.round-chip { font-size: 13px; color: var(--muted); white-space: nowrap; }
.trump-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 10px;
  background: #fffdf6; color: var(--card-black); font-weight: 700; font-size: 13px; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 2px var(--gold);
}
.trump-chip .sym { font-size: 20px; line-height: 1; }
.trump-chip.red { color: var(--card-red); }
.trump-chip.pop { animation: pop 0.6s var(--ease); }
.score { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; white-space: nowrap; }
.score .t { display: inline-flex; align-items: center; gap: 6px; }
.score .t0 { color: var(--team0); }
.score .t1 { color: var(--team1); }
.score b { display: inline-block; min-width: 1ch; color: var(--ink); }
.score b.bump { animation: bump 0.9s var(--ease); }
.score .sep { color: var(--muted); }
.score small { font-size: 11px; color: var(--muted); font-weight: 500; }
@keyframes bump { 30% { transform: scale(1.8); color: var(--gold); } }
@keyframes pop { 40% { transform: scale(1.25); } }

.board { position: relative; flex: 1; overflow: hidden; }
.felt {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, var(--felt1) 0%, var(--felt2) 55%, var(--felt3) 100%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    0 0 0 12px var(--wood1), 0 0 0 16px var(--wood2),
    0 24px 70px rgba(0, 0, 0, 0.7);
}
.felt::before {
  content: ''; position: absolute; inset: 16px; border-radius: 50%;
  border: 2px solid rgba(244, 201, 93, 0.14);
}
.felt::after {
  content: 'МАСС'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 900; font-size: min(9vw, 90px); letter-spacing: 0.15em; color: rgba(0, 0, 0, 0.13);
}
.pile-label {
  position: absolute; transform: translate(-50%, -50%); font-size: 11px; color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.3); padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  transition: opacity 0.3s;
}
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.arrows path {
  fill: none; stroke: rgba(255, 190, 90, 0.85); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 2 10; animation: dash 0.8s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 170, 60, 0.7));
}
.arrows path.def { stroke: rgba(120, 200, 255, 0.85); filter: drop-shadow(0 0 4px rgba(100, 180, 255, 0.7)); }
@keyframes dash { to { stroke-dashoffset: -12; } }

/* ---------- хөзөр ---------- */
.cards { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  font-size: calc(var(--cw) * 0.26);
  transition: transform var(--dur, 480ms) var(--ease) var(--delay, 0ms), opacity 0.25s;
  will-change: transform;
}
.card .lift { width: 100%; height: 100%; perspective: 700px; transition: transform 0.18s var(--ease); }
.card .inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform var(--flip, 520ms) var(--ease) var(--fdelay, 0ms);
}
.card.down .inner { transform: rotateY(180deg); }
.card.no-anim, .card.no-anim .inner { transition: none !important; }
.face {
  position: absolute; inset: 0; border-radius: 0.42em; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0.12em 0.35em rgba(0, 0, 0, 0.4);
}
.front { background: linear-gradient(165deg, #ffffff 0%, #fbf5e6 100%); border: 1px solid rgba(0, 0, 0, 0.18); color: var(--card-black); }
.card.red .front { color: var(--card-red); }
.back {
  transform: rotateY(180deg);
  border: 0.16em solid #fbf5e6;
  background:
    radial-gradient(circle at 50% 50%, #f4c95d 0 0.62em, #7b1426 0.66em 0.78em, transparent 0.82em),
    repeating-linear-gradient(45deg, rgba(244, 201, 93, 0.22) 0 0.1em, transparent 0.1em 0.55em),
    repeating-linear-gradient(-45deg, rgba(244, 201, 93, 0.22) 0 0.1em, transparent 0.1em 0.55em),
    linear-gradient(160deg, #a11f35, #4a0a16);
}
.back::after {
  content: 'М'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: 0.78em; color: #5a0f1d;
}
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 0.92; font-weight: 700; }
.corner b { font-size: 1em; letter-spacing: -0.06em; }
.corner i { font-style: normal; font-size: 0.82em; }
.corner.tl { top: 0.24em; left: 0.26em; }
.corner.br { bottom: 0.24em; right: 0.26em; transform: rotate(180deg); }
.pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.25em; line-height: 1; }
.ace .pip { font-size: 3.1em; }
.court .pip { flex-direction: column; font-size: 1em; }
.court .pip span {
  display: grid; place-items: center; width: 2.1em; height: 2.6em; border-radius: 0.3em;
  border: 0.08em solid currentColor; font-weight: 800; font-size: 1.15em; line-height: 0.95;
  background: linear-gradient(180deg, rgba(244, 201, 93, 0.28), rgba(244, 201, 93, 0.06));
}
.court .pip span i { font-style: normal; font-size: 0.9em; }

.joker .front { border: 0; }
.jk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #2c1b00; }
.jk-star { font-size: 2.3em; line-height: 1; filter: drop-shadow(0 0.05em 0 rgba(255, 255, 255, 0.7)); }
.jk-word { font-size: 0.5em; font-weight: 800; letter-spacing: 0.2em; margin-top: 0.15em; }
.jk-tag { position: absolute; top: 0.24em; left: 0.3em; font-weight: 800; font-size: 0.85em; }
.jk-tag.br { top: auto; left: auto; bottom: 0.24em; right: 0.3em; transform: rotate(180deg); }
.j1 .front { background: radial-gradient(circle at 50% 45%, #fffbe6, #f6cf5f 55%, #c4840f); }
.j2 .front { background: radial-gradient(circle at 50% 45%, #f7f2ff, #bba9f7 55%, #6a4ad0); }
.j2 .jk { color: #1e0f4d; }
.j3 .front { background: radial-gradient(circle at 50% 45%, #effff8, #84dfc3 55%, #1c9874); }
.j3 .jk { color: #053b2c; }
.j1 .front::after, .j2 .front::after, .j3 .front::after {
  content: ''; position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  animation: shine 3.5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

.card.zone-hand { cursor: pointer; pointer-events: auto; }
.card.zone-hand:hover .lift { transform: translateY(-8%); }
.card.zone-hand.sel .lift { transform: none; }
.card.sel .front { box-shadow: 0 0 0 0.14em var(--gold), 0 0 1.2em rgba(244, 201, 93, 0.7), 0 0.5em 1em rgba(0, 0, 0, 0.5); }
.card.trump:not(.down) .front::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 0.09em rgba(232, 172, 40, 0.95), inset 0 0 0.8em rgba(244, 201, 93, 0.45);
}
.card.dim .front::after { content: ''; position: absolute; inset: 0; background: rgba(8, 20, 14, 0.5); }
.card.ghost { opacity: 0.6; }
.card.ghost .front { box-shadow: 0 0 0 0.12em var(--gold); }
.card.target .front { animation: targetPulse 1.1s ease-in-out infinite; }
@keyframes targetPulse { 50% { box-shadow: 0 0 0 0.12em rgba(120, 200, 255, 0.9), 0 0 1em rgba(120, 200, 255, 0.6); } }
.card.fly .lift { animation: flyPop var(--dur, 480ms) var(--ease) var(--delay, 0ms); }
@keyframes flyPop { 45% { transform: scale(1.14) translateY(-6%); } }
.card.leaving { opacity: 0; transition: transform var(--dur, 480ms) var(--ease) var(--delay, 0ms), opacity 0.2s ease calc(var(--dur, 480ms) * 0.75 + var(--delay, 0ms)); }
.card.vanish { opacity: 0; transition: opacity 0.15s; }

/* ---------- суудал ---------- */
.seats { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.seat {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: auto;
}
.seat.team0 { --tc: var(--team0); }
.seat.team1 { --tc: var(--team1); }
.avatar {
  position: relative; width: calc(var(--sr) * 2); height: calc(var(--sr) * 2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4f45, #15211b);
  border: 3px solid var(--tc); display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--sr) * 0.85); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s, transform 0.3s;
}
.avatar .bot { position: absolute; right: -6px; top: -6px; font-size: calc(var(--sr) * 0.6); filter: drop-shadow(0 1px 1px #000); }
.avatar svg.ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); overflow: visible; }
.avatar svg.ring circle { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; animation: ring linear forwards; }
@keyframes ring { to { stroke-dashoffset: var(--len); } }
.nameplate {
  margin-top: -7px; display: flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px;
  background: rgba(6, 12, 9, 0.9); border: 1px solid var(--tc); border-radius: 999px;
  font-size: 11.5px; white-space: nowrap; max-width: 120px; position: relative;
}
.nameplate .nm { overflow: hidden; text-overflow: ellipsis; }
.nameplate .cnt { background: var(--tc); color: #0d1410; border-radius: 999px; padding: 0 6px; font-weight: 800; min-width: 18px; text-align: center; }
.seat .role { position: absolute; top: calc(-1 * var(--sr) + -14px); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.seat.attacker .role, .seat.defender .role, .seat.chooser .role, .seat.beat .role { opacity: 1; transform: none; }
.seat.beat .role { background: #8ff0b0; color: #06301a; }
.seat.attacker .role { background: #ffb347; color: #3a1d00; }
.seat.defender .role { background: #74c0fc; color: #062033; }
.seat.chooser .role { background: var(--gold); color: #2b1900; }
.seat.attacker .avatar { box-shadow: 0 0 0 4px rgba(255, 170, 60, 0.35), 0 0 26px rgba(255, 170, 60, 0.85); animation: breathe 1.3s ease-in-out infinite; }
.seat.defender .avatar { box-shadow: 0 0 0 4px rgba(120, 200, 255, 0.35), 0 0 26px rgba(120, 200, 255, 0.85); }
.seat.chooser { cursor: pointer; }
.seat.chooser .avatar { animation: breathe 1s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(244, 201, 93, 0.5), 0 0 24px rgba(244, 201, 93, 0.8); }
.seat.takeable { cursor: pointer; }
.seat.takeable .avatar::after { content: 'Суух'; position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(244, 201, 93, 0.9); color: #2b1900; opacity: 0; transition: opacity 0.2s; }
.seat.takeable:hover .avatar::after { opacity: 1; }
.seat.offline .avatar { filter: grayscale(1) brightness(0.6); }
.seat.me-seat { pointer-events: none; }
.seat.me-seat .avatar { display: none; }
.seat.me-seat .nameplate, .seat.me-seat .role { display: none; }
@keyframes breathe { 50% { transform: scale(1.07); } }

/* ---------- үйлдлийн самбар ---------- */
.actionbar {
  position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 6px 6px 6px 8px; border-radius: 28px; width: max-content; max-width: calc(100vw - 16px);
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.actionbar.myturn { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 201, 93, 0.2), 0 0 34px rgba(244, 201, 93, 0.35); }
.actionbar .me-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--tc, #888); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.actionbar .status { font-size: 14px; padding: 0 6px; text-align: center; line-height: 1.3; }
.actionbar .status b { color: var(--gold); font-weight: 600; }
.actionbar .status small { color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.actionbar .status .bad { color: #ff9a8a; }
.actionbar .buttons { display: flex; gap: 6px; }
.actionbar .btn { padding: 10px 16px; font-size: 14.5px; }
.actionbar .tbar { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--gold); transform-origin: left; animation: tbar linear forwards; }
.actionbar .tbar.low { background: #ff6b6b; }
@keyframes tbar { from { transform: scaleX(var(--from, 1)); } to { transform: scaleX(0); } }

/* ---------- эффект ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: bannerIn var(--bd, 2200ms) var(--ease) forwards;
}
.banner::before {
  content: ''; position: absolute; inset: -40px -90px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 70%);
}
.banner h2 {
  margin: 0; font-size: clamp(30px, 7vw, 60px); font-weight: 900; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fffaf0 0%, #f4c95d 55%, #cf8513 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}
.banner.team0 h2 { background-image: linear-gradient(180deg, #fff 0%, #ffb0b0 40%, var(--team0) 100%); }
.banner.team1 h2 { background-image: linear-gradient(180deg, #fff 0%, #b7e0ff 40%, var(--team1) 100%); }
.banner p { margin: 6px 0 0; font-size: clamp(14px, 3.4vw, 19px); font-weight: 500; text-shadow: 0 2px 6px #000; }
.banner .big-sym { display: block; font-size: clamp(60px, 14vw, 120px); line-height: 1; margin-bottom: 4px; text-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); }
.banner .big-sym.red { color: #ff5a6a; }
.banner .big-sym.black { color: #fff; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(0.96); }
}
.float {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); animation: floatUp 1.6s var(--ease) forwards;
}
.float.good { color: #8ff0b0; }
.float.bad { color: #ffb0a0; }
.float.gold { color: var(--gold); font-size: 17px; }
.float.emoji { background: none; font-size: 36px; animation-duration: 2.2s; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  25% { transform: translate(-50%, -60%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%); }
}

.die-wrap { position: absolute; width: var(--ds, 44px); height: var(--ds, 44px); transform: translate(-50%, -50%); perspective: 300px; transition: opacity 0.35s, transform 0.35s; animation: dieIn 0.35s var(--ease) backwards; }
.die-wrap.out { opacity: 0.2; transform: translate(-50%, -50%) scale(0.8); }
.die-wrap.win { transform: translate(-50%, -50%) scale(1.25); }
.die-wrap.win .f { background: #fff1bd; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2), 0 0 18px #f4c95d; }
.die { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.35s cubic-bezier(0.15, 0.85, 0.25, 1); }
.die .f {
  position: absolute; inset: 0; background: #fffdf6; border-radius: 20%;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%;
  backface-visibility: hidden;
}
.die .f span { width: 72%; aspect-ratio: 1; border-radius: 50%; background: #19202e; place-self: center; }
.die .f.v1 span { background: var(--card-red); }
@keyframes dieIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-90deg); } }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

.react-picker {
  position: absolute; right: 12px; top: 56px; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: dropIn 0.2s var(--ease);
}
.react-picker button { font-size: 26px; width: 46px; height: 46px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.react-picker button:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); }
.menu {
  position: absolute; right: 12px; top: 56px; z-index: 60; min-width: 200px; padding: 6px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; animation: dropIn 0.2s var(--ease);
}
.menu button { text-align: left; padding: 11px 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; font-size: 14px; }
.menu button:hover { background: rgba(255, 255, 255, 0.1); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

.overlay {
  position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.8));
  animation: fadeIn 0.5s ease both;
}
.overlay .panel { padding: 28px 26px; text-align: center; width: min(400px, 100%); animation: rise 0.7s var(--ease) both; }
.overlay .trophy { font-size: 74px; line-height: 1; animation: trophy 1.8s ease-in-out infinite; display: inline-block; }
.overlay h2 { margin: 10px 0 4px; font-size: 30px; font-weight: 900; }
.overlay .final { font-size: 40px; font-weight: 900; margin: 6px 0 18px; }
.overlay .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(0.9); } }
@keyframes trophy { 50% { transform: translateY(-8px) rotate(-5deg); } }

#toasts { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 12px; background: #2b1414; border: 1px solid #ff8a7a; font-size: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); animation: toast 3s var(--ease) forwards; }
.toast.ok { background: #13281c; border-color: #6fd497; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- дүрэм ---------- */
dialog#rules {
  width: min(680px, calc(100% - 24px)); max-height: calc(100% - 40px); padding: 0; border: 1px solid var(--line);
  border-radius: 20px; background: #0f1b15; color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  user-select: text; -webkit-user-select: text;
}
dialog#rules::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
dialog#rules .rules-body { padding: 8px 24px 24px; overflow-y: auto; font-size: 14.5px; line-height: 1.6; }
dialog#rules header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #0f1b15; border-bottom: 1px solid var(--line); }
dialog#rules h2 { margin: 0; font-size: 20px; }
dialog#rules h3 { margin: 20px 0 6px; font-size: 15px; color: var(--gold); }
dialog#rules ul { padding-left: 20px; margin: 6px 0; }
dialog#rules code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
dialog#rules .note { background: rgba(244, 201, 93, 0.08); border: 1px solid rgba(244, 201, 93, 0.25); border-radius: 12px; padding: 10px 14px; }

@media (max-width: 600px) {
  .hud { height: 50px; padding: 0 8px; }
  .score { font-size: 18px; gap: 6px; }
  .round-chip { display: none; }
  .trump-chip { font-size: 0; gap: 0; padding: 3px 8px; }
  .trump-chip .sym { font-size: 20px; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .actionbar .status { font-size: 12.5px; }
  .actionbar .btn { padding: 9px 13px; font-size: 13.5px; }
  .nameplate { font-size: 10.5px; max-width: 86px; }
  .lobby-seat { width: 78px; font-size: 11.5px; padding: 6px 4px; }
  .lobby-table { aspect-ratio: 0.95; }
  .lobby-table .felt-mini { inset: 16% 18%; font-size: 0; }
  .lobby-head .btn { padding: 9px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .card { --dur: 160ms !important; }
  .seat.attacker .avatar, .seat.chooser .avatar, .overlay .trophy { animation: none; }
}

/* ---------- дуут чат ---------- */
.voice-btn { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.voice-btn.ptt { border-color: var(--gold); border-style: dashed; }
.voice-btn.ptt.talking { background: rgba(80, 200, 120, 0.35); border: 1px solid #6fd497; transform: scale(1.08); }
.voice-btn.live { background: rgba(80, 200, 120, 0.22); border-color: #6fd497; }
.voice-btn.muted::after {
  content: ''; position: absolute; width: 2px; height: 24px; border-radius: 2px;
  background: var(--team0); transform: rotate(45deg);
}
.voice-btn.speaking { box-shadow: 0 0 0 3px rgba(111, 212, 151, 0.55), 0 0 14px rgba(111, 212, 151, 0.8); }
.avatar .mic { position: absolute; left: -6px; bottom: -4px; font-size: calc(var(--sr) * 0.5); filter: drop-shadow(0 1px 1px #000); }
.seat.speaking .avatar { box-shadow: 0 0 0 4px rgba(111, 212, 151, 0.55), 0 0 24px rgba(111, 212, 151, 0.9); }

/* ---------- бууж өгөх санал ---------- */
.vote-box {
  position: absolute; top: 62px; left: 0; right: 0; margin-inline: auto; z-index: 45;
  width: min(360px, calc(100% - 32px)); padding: 12px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-top: 3px solid var(--tc); animation: rise 0.4s var(--ease) both;
}
.vote-box.team0 { --tc: var(--team0); }
.vote-box.team1 { --tc: var(--team1); }
.vote-box .q { font-weight: 800; }
.vote-box .meta { font-size: 12.5px; color: var(--muted); }
.vote-box .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vote-box .btn { padding: 8px 14px; font-size: 14px; }