/* NAADAY — "Vivid Gloss" design system (Stitch-аас).
 * Гэрэлтэй гадаргуу, гялгар 3D товч (хатуу доод сүүдэр), ягаан/улбар шар/нил ягаан.
 * Rubik (кирилл-найдвартай). Blur ашиглахгүй → 50k perf. */
:root {
  /* Гадаргуу (гэрэлтэй) */
  --surface: #f4fafd; --surface-2: #e8eff1; --surface-low: #eef5f7;
  --ink: #f4fafd; --ink-2: #eaf1f4;
  --card: #ffffff; --card-2: #f6fafb;
  --card-border: #e2e9ec; --card-shadow: #cfd9dd;   /* хатуу elevation сүүдэр */
  /* Текст */
  --text: #161d1f; --text-muted: #5b6b6f;
  --muted: #5b6b6f; --muted-2: #8a9a9e; --white: #ffffff;
  /* Бренд өнгө (gloss: дээд тал 10% цайвар) */
  --pink: #e2007d; --pink-deep: #8e004c;
  --orange: #ff8a00; --orange-deep: #a85a00;
  --violet: #a154bf; --violet-deep: #6e208c;
  --cyan: #0aa3a3; --green: #1fc77a; --gold: #e8a300;
  --accent: var(--pink); --accent-2: var(--orange); --accent-deep: var(--pink-deep);
  /* Градиентууд */
  --grad-brand: linear-gradient(180deg, #ff5fa8 0%, #e2007d 100%);
  --grad-purple: linear-gradient(180deg, #c074dd 0%, #a154bf 100%);
  --grad-cool: linear-gradient(180deg, #2cc0c0 0%, #0aa3a3 100%);
  /* Glass → одоо цагаан карт */
  --glass: #ffffff; --glass-2: #f6fafb; --glass-border: #e2e9ec;
  --radius: 24px; --radius-sm: 16px;
  --glow: 0 0 0;                                    /* неон гэрэлтэлт идэвхгүй */
  --shadow: 0 4px 0 var(--card-shadow);             /* хатуу 4px elevation */
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-alt: 'Rubik', 'Bebas Neue', sans-serif;
  --font-body: 'Rubik', system-ui, sans-serif;
}

/* Theme skins — accent өнгийг солино (cosmetic) */
body[data-theme="cyan"]   { --accent:#0aa3a3; --accent-2:#a154bf; --accent-deep:#076b6b; }
body[data-theme="gold"]   { --accent:#e8a300; --accent-2:#e2007d; --accent-deep:#9a6a00; }
body[data-theme="green"]  { --accent:#1fc77a; --accent-2:#0aa3a3; --accent-deep:#0b7a47; }
body[data-theme="violet"] { --accent:#a154bf; --accent-2:#e2007d; --accent-deep:#6e208c; }

/* Харанхуй горим — суурь өнгийг даран солино (компонент var ашигладаг тул автоматаар) */
body[data-mode="dark"] {
  /* ATMAN Neon Arena obsidian-violet палитр (arena.css-тэй нийцүүлсэн) */
  --surface:#1b1a26; --surface-2:#2a2935; --surface-low:#1f1e2a;
  --ink:#13121d; --ink-2:#0e0d18;
  --card:#1b1a26; --card-2:#1f1e2a; --card-border:#343340; --card-shadow:#0a0814;
  --text:#e4e0f1; --text-muted:#ccc3d9; --muted:#b6add0; --muted-2:#958da2;
  --glass:#1b1a26; --glass-2:#1f1e2a; --glass-border:#343340;
  /* Неон violet/pink accent */
  --pink:#7b2cff; --pink-deep:#4631b0; --accent:#7b2cff; --accent-2:#d1bcff; --accent-deep:#4631b0;
  --violet:#7b2cff; --cyan:#00daf2; --gold:#ffd45e;
  --grad-brand:linear-gradient(90deg,#7B2CFF,#FF2D77);
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(123,44,255,.20), transparent 60%),
    radial-gradient(800px 600px at 95% 8%, rgba(255,45,119,.10), transparent 55%),
    #0B0712 !important;
}
/* Hardcoded цагаан компонентуудыг харанхуйд card-болгоно */
body[data-mode="dark"] .topbar .back, body[data-mode="dark"] .btn.ghost, body[data-mode="dark"] .pill,
body[data-mode="dark"] .cos, body[data-mode="dark"] .achv, body[data-mode="dark"] .hub2-q-w,
body[data-mode="dark"] .hub2-game, body[data-mode="dark"] .hub-quick, body[data-mode="dark"] .ad-box,
body[data-mode="dark"] .tgc, body[data-mode="dark"] .av3d { background-color: var(--card); }
body[data-mode="dark"] .hub2-header { border-bottom-color: var(--card-border); box-shadow: 0 4px 0 var(--card-shadow); }
body[data-mode="dark"] .hub2-nav { border-top-color: var(--card-border); }
body[data-mode="dark"] .hub2-game, body[data-mode="dark"] .hub2-q-w { box-shadow: 0 6px 0 var(--card-shadow); }
body[data-mode="dark"] .hub2-tag, body[data-mode="dark"] .tag, body[data-mode="dark"] .seg .opt { background: var(--surface-2); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Давхар-товшилтоор томрох (double-tap zoom)-ийг бүх апп даяар болиулна.
   pinch-zoom (2 хуруу) ба гүйлгэлт хэвээр. Тоглоомын drag гадаргуу (.fan/.g2-board:none,
   .dg-card:pan-y) нь илүү хатуу тул ancestor-тай огтлолцолоор хадгалагдана. */
html, body { margin: 0; height: 100%; touch-action: manipulation; overflow-x: hidden; max-width: 100%; width: 100%; }
/* Хэвтээ халилтыг хаана — зөвхөн дээш/доош гүйнэ (дотоод overflow-x:auto эгнээ хэвээр ажиллана) */
.screen, .arena-screen, .ar-main { max-width: 100%; overflow-x: hidden; }
.btn, button, a, [role="button"], [data-nav], [data-go], .opt, .seg, .bt-pod, .react-chip,
.hob-chip, .emote-chip, .report-reason, .he-step, .he-preset, .ar-nav-i, .dg-act,
.fr-req-yes, .fr-req-no, .fa-row, .tile, .ar-gtile { touch-action: manipulation; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(226,0,125,.06), transparent 60%),
    radial-gradient(800px 600px at 95% 8%, rgba(255,138,0,.06), transparent 55%),
    var(--surface);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* App shell — утсан дээр голлуулна */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

h1,h2,h3,.display { font-family: var(--font-display); font-weight: 800; letter-spacing: .3px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* Топбар */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 8px;
}
.topbar .back {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: #fff; border: 1px solid var(--card-border); box-shadow: 0 2px 0 var(--card-shadow);
  cursor: pointer; color: var(--text);
}
.topbar .title { font-family: var(--font-display); font-size: 18px; font-weight: 800; flex: 1; color: var(--text); }

.screen { flex: 1; padding: 6px 18px 28px; animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* Logo */
.brand {
  font-family: var(--font-alt); font-weight: 400; font-size: 46px; line-height: .9;
  letter-spacing: 2px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255,44,166,.5));
}

/* Карт / panel — glassmorphism */
.card {
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  padding: 18px;
}
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  padding: 18px; cursor: pointer;
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tile:active { transform: scale(.97); }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--glow) color-mix(in srgb, var(--accent) 22%, transparent); }
.tile .chip {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-size: 28px; margin-bottom: 12px;
  background: radial-gradient(circle at 30% 25%, var(--accent), var(--accent-2));
  box-shadow: var(--glow) color-mix(in srgb, var(--accent) 55%, transparent);
}
.tile h3 { margin: 4px 0 2px; font-size: 17px; }
.tile p { margin: 0; font-size: 12.5px; color: var(--muted); }
.tile.locked { opacity: .55; }
.tile .soon {
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--muted); z-index:2;
}
/* Өнгөлөг тоглоомын tile (зурагтай header band) */
.gtile { padding: 0 !important; }
.gtile-art { height: 92px; background: var(--g); display: grid; place-items: center; position: relative; overflow: hidden; }
.gtile-art::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 72% 18%, rgba(255,255,255,.4), transparent 52%),
    radial-gradient(circle at 20% 90%, rgba(0,0,0,.25), transparent 55%); }
.gtile-emo { font-size: 46px; position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.gtile h3 { margin: 12px 14px 2px; }
.gtile p { margin: 0 14px 14px; }
.gtile:hover .tile-art-inner { transform: scale(1.05); transition: transform .2s; }

/* Tile-ийн зурагт контент */
.tile-art-inner { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.tile-emo { font-size: 48px; filter: drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.tile-fan { position: relative; display: flex; align-items: center; justify-content: center; }
.tile-card.pcard { width: 42px !important; height: 58px !important; box-shadow: 0 5px 12px rgba(0,0,0,.45); border-radius: 7px; }
.tile-card.pcard.face .c-mid { font-size: 21px; }
.tile-card.pcard.face .c-tl, .tile-card.pcard.face .c-br { font-size: 11px; }
.tile-card.pcard.face .c-tl small, .tile-card.pcard.face .c-br small { font-size: 9px; }
.tile-card.pcard.face.court .cr { font-size: 13px; } .tile-card.pcard.face.court .cl { font-size: 14px; } .tile-card.pcard.face.court .cs { font-size: 11px; }
.tile-card.pcard.face.ace .c-mid { font-size: 28px; }
.tile-card.pcard.back { font-size: 16px; }
/* Покер чип */
.tile-chips { position: absolute; right: 18px; bottom: 8px; }
.tile-chip { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.85);
  box-shadow: 0 4px 8px rgba(0,0,0,.5); display: grid; place-items: center; font-size: 12px; color: #fff; }
.tile-chip.c1 { background: #1a8bd6; right: 26px; bottom: 0; }
.tile-chip.c2 { background: #2b2f45; right: 14px; bottom: 8px; }
.tile-chip.c3 { background: #e0245e; right: 0; bottom: 0; }
/* Эргэдэг дугуй */
.tile-wheel { width: 70px; height: 70px; border-radius: 50%; position: relative;
  background: conic-gradient(#e0245e 0 60deg, #FFBA00 60deg 120deg, #39E98A 120deg 180deg, #00E0FF 180deg 240deg, #7B2CFF 240deg 300deg, #FF2CA6 300deg 360deg);
  box-shadow: 0 0 0 5px #FFCF4D, 0 6px 16px rgba(0,0,0,.5); }
.tw-needle { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 16px; }
.tw-hub { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE27A, #FFBA00); box-shadow: 0 0 0 3px #c4961e; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }

/* Товч */
/* Glossy 3D товч — gradient (дээд 10% цайвар) + хатуу 4px доод сүүдэр + дарахад доош */
.btn {
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .2px;
  border: none; border-radius: var(--radius); padding: 15px 22px; width: 100%;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff) 0%, var(--accent) 100%);
  box-shadow: 0 4px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4); }
.btn:disabled { filter: grayscale(.5) opacity(.55); cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--card-border);
  box-shadow: 0 4px 0 var(--card-shadow); }
.btn.ghost:active { transform: translateY(4px); box-shadow: 0 0 0 var(--card-shadow); }
.btn.sm { width: auto; padding: 11px 17px; font-size: 13px; border-radius: 16px;
  box-shadow: 0 3px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.sm.ghost { box-shadow: 0 3px 0 var(--card-shadow); }
.btn.gold { background: linear-gradient(180deg, #ffce5e, #e8a300); color:#3a2600;
  box-shadow: 0 4px 0 #9a6a00, inset 0 1px 0 rgba(255,255,255,.5); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--card-border); box-shadow: 0 2px 0 var(--card-shadow);
}
.pill.coin { color: #b07400; }

/* Input — "сийлсэн" inset төрх */
.input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-low); border: 1px solid var(--card-border);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
  transition: border-color .14s, box-shadow .14s;
}
.input:focus { outline: none; border-color: var(--accent);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input::placeholder { color: var(--muted-2); }

/* Сегмент сонголт */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg .opt {
  flex: 1; min-width: 64px; text-align: center; padding: 12px 8px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--card-border); color: var(--text);
  cursor: pointer; font-weight: 700; font-size: 13px; transition: all .14s;
}
.seg .opt.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent)); color: #fff;
  border-color: transparent; box-shadow: 0 3px 0 var(--accent-deep);
}
/* Ботын түвшний сегмент — урт нэртэй тул жижиг үсэг */
.seg.botlvl .opt { font-size: 11px; padding: 10px 5px; min-width: 56px; line-height: 1.15; }

/* Тэмцээн — hub banner ба картууд (casual, өнгөлөг) */
.tg-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  padding:14px 16px; border-radius:18px; margin-top:6px; color:#fff;
  background:linear-gradient(120deg,#ff8a00,#ff2d77 55%,#7b2cff);
  box-shadow:0 10px 24px -10px rgba(255,45,119,.7), inset 0 0 0 1px rgba(255,255,255,.18); }
.tg-banner-go { font-weight:800; font-size:13px; background:rgba(255,255,255,.22); padding:8px 14px; border-radius:12px; white-space:nowrap; }
.tg-card { border:1px solid var(--card-border); }
.tg-cd { display:inline-block; }
/* Тэмцээний карт — Stitch layout */
.tgc { border:1px solid var(--card-border); box-shadow:0 6px 0 var(--card-shadow); }
.tgc-top { display:flex; align-items:flex-start; gap:11px; }
.tgc-ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:24px; flex:0 0 auto;
  box-shadow:0 3px 0 rgba(0,0,0,.18); }
.tgc-meta { flex:1; min-width:0; }
.tgc-name { font-weight:800; font-size:15px; color:var(--text); }
.tgc-open { background:#1fc77a !important; color:#04210f !important; font-weight:800; }
.tgc-stats { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.tgc-pool { background:linear-gradient(180deg,#ff6fae,#e2007d) !important; color:#fff !important; font-weight:800; }

/* In-game emote */
.chat-emotes { display:flex; gap:6px; flex-wrap:wrap; padding:6px 0; }
.emote-chip { font-size:22px; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--surface-2); transition:transform .1s; }
.emote-chip:active { transform:scale(1.2); }
.emote-float { position:fixed; bottom:24%; z-index:9400; pointer-events:none; display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.emote-float .ef-ic { font-size:66px; line-height:1; }
.emote-float .ef-nm { margin-top:5px; font-size:12px; font-weight:700; color:#fff; background:rgba(11,7,18,.6); padding:2px 10px; border-radius:20px; white-space:nowrap; }
.emote-float.fx-up { animation:emoteRise 1.7s ease-out forwards; }
.emote-float.fx-rise { animation:emoteRise 1.4s ease-out forwards; }
.emote-float.fx-pulse { animation:emotePulse 1.6s ease-out forwards; }
.emote-float.fx-boom { animation:emoteBoom 1.0s ease-out forwards; }
.emote-float.fx-sink { animation:emoteSink 1.6s ease-in forwards; }
@keyframes emoteRise { 0%{opacity:0;transform:translateY(0) scale(.4)} 20%{opacity:1;transform:translateY(-30px) scale(1.2)}
  60%{opacity:1;transform:translateY(-120px) scale(1)} 100%{opacity:0;transform:translateY(-220px) scale(.9)} }
@keyframes emotePulse { 0%{opacity:0;transform:scale(.4)} 15%{opacity:1;transform:scale(1.35)} 30%{transform:scale(1)} 45%{transform:scale(1.28)} 62%{transform:scale(1)} 100%{opacity:0;transform:translateY(-110px) scale(.9)} }
@keyframes emoteBoom { 0%{opacity:0;transform:scale(.3)} 12%{opacity:1;transform:scale(2)} 26%{transform:scale(1.6) rotate(-5deg)} 40%{transform:scale(1.85) rotate(5deg)} 100%{opacity:0;transform:scale(2.5)} }
@keyframes emoteSink { 0%{opacity:0;transform:translateY(-40px) scale(.5)} 20%{opacity:1;transform:translateY(0) scale(1.1)} 100%{opacity:0;transform:translateY(120px) scale(.8)} }
/* Илгээгчээс → бай руу нисэх эможи */
.emote-fly { position:fixed; z-index:9450; pointer-events:none; width:52px; height:52px; font-size:46px; line-height:52px; text-align:center;
  opacity:.92; transform:translate(0,0) scale(.6); transition:transform .46s cubic-bezier(.34,.9,.32,1), opacity .46s linear;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); will-change:transform; }
/* ПИЗ*ДАА текст реакц */
.emote-float .ef-txt { font-family:var(--font-display,'Rubik'),sans-serif; font-weight:900; font-size:34px; letter-spacing:.5px;
  color:#fff; -webkit-text-stroke:2px #b80024; text-shadow:0 0 12px rgba(255,40,80,.9),0 3px 0 #7a0018; white-space:nowrap; }
/* Bomb дэлбэрэлтийн цацраг (shockwave ring) */
.boom-ring { position:fixed; z-index:9430; pointer-events:none; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  border:4px solid #ffd34d; box-shadow:0 0 24px 8px rgba(255,150,40,.7),inset 0 0 16px rgba(255,90,30,.6);
  animation:boomRing .6s ease-out forwards; }
@keyframes boomRing { 0%{opacity:1;transform:scale(.3)} 70%{opacity:.85} 100%{opacity:0;transform:scale(7)} }
/* Гахай толгой бахалзуурдах — байны зураг чичрэх */
.bt-pod.choke-shake { animation:chokeShake .14s linear 0s 7; }
@keyframes chokeShake { 0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-5px,2px) rotate(-4deg)} 50%{transform:translate(4px,-3px) rotate(3deg)} 75%{transform:translate(-3px,3px) rotate(-3deg)} 100%{transform:translate(0,0) rotate(0)} }
.emote-float.fx-choke { animation:emoteChoke 1.5s ease-out forwards; }
@keyframes emoteChoke { 0%{opacity:0;transform:scale(.4) rotate(-12deg)} 14%{opacity:1;transform:scale(1.5) rotate(8deg)} 28%{transform:scale(1.2) rotate(-8deg)} 42%{transform:scale(1.45) rotate(6deg)} 56%{transform:scale(1.2) rotate(-4deg)} 100%{opacity:0;transform:translateY(-50px) scale(1) rotate(0)} }
/* ПИЗ*ДАА splat — байны зураг гялсхийх */
.bt-pod.splat-hit { animation:splatHit .45s ease-out; }
@keyframes splatHit { 0%{filter:none} 30%{filter:brightness(1.7) saturate(1.5) hue-rotate(-15deg)} 100%{filter:none} }
.emote-float.fx-splat { animation:emoteSplat 1.6s ease-out forwards; }
@keyframes emoteSplat { 0%{opacity:0;transform:scale(.3) rotate(-8deg)} 12%{opacity:1;transform:scale(1.5) rotate(5deg)} 24%{transform:scale(1.1) rotate(-3deg)} 38%{transform:scale(1.3) rotate(2deg)} 55%{transform:scale(1.15)} 100%{opacity:0;transform:translateY(-80px) scale(1)} }

/* Аватар хүрээ (cosmetic frame) */
body[data-frame="solid"] .hub2-av, body[data-frame="solid"] .avatar { box-shadow:0 0 0 3px var(--frame-col), 0 4px 10px -3px rgba(0,0,0,.3); }
body[data-frame="rainbow"] .hub2-av, body[data-frame="rainbow"] .avatar { box-shadow:0 0 0 3px #ff2d77, 0 0 0 5px #ff8a00, 0 0 12px rgba(255,138,0,.6); }
/* Cosmetic дэлгүүр */
.cos-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cos { background:#fff; border:2px solid var(--card-border); border-radius:18px; padding:12px; text-align:center; cursor:pointer; box-shadow:0 4px 0 var(--card-shadow); }
.cos.on { border-color:var(--pink); }
.cos-prev { height:60px; border-radius:12px; margin-bottom:8px; }
.cos-prev.felt { border:4px solid var(--bd); }
.cos-nm { font-weight:700; font-size:13px; }
.cos-price { font-size:11px; color:var(--muted); margin-top:2px; }

/* Hub event banner */
.hub2-event { display:flex; align-items:center; gap:12px; cursor:pointer; padding:13px 15px; border-radius:20px; color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.18); transition:transform .1s; }
.hub2-event:active { transform:translateY(3px); }
.hub2-event-emo { font-size:30px; }
.hub2-event-t { font-weight:800; font-size:15px; }
.hub2-event-d { font-size:11px; opacity:.9; }
/* Event hero */
.event-hero { border-radius:24px; padding:28px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 8px 0 rgba(0,0,0,.18); }
/* Шатар */
.chess-wrap { display:flex; justify-content:center; padding:6px 0; }
/* Хөлөг нь өргөн БА өндөрт багтана (том/жижиг алдаа арилгав), 3D гүнтэй хүрээ */
.chess-board { display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  width:min(92vw,68vh,420px); aspect-ratio:1; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px -14px #000, 0 6px 0 #2a1c10, 0 0 0 6px #3a2817, 0 0 0 8px #5a3f22, inset 0 0 40px rgba(0,0,0,.35); }
.chsq { position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
/* Гялалзсан модон хөлөг (3D bevel) */
.chsq.l { background:linear-gradient(150deg,#f3e2c3,#e6cda0); }
.chsq.d { background:linear-gradient(150deg,#9c6b43,#7d5230); }
.chsq.sel { box-shadow:inset 0 0 0 3px var(--pink), inset 0 0 18px rgba(255,44,166,.45); }
.chsq.tgt { cursor:pointer; }
.chpc { font-size:min(9.5vw,40px); line-height:1; z-index:1;
  font-family:"Segoe UI Symbol","Noto Sans Symbols2","DejaVu Sans",serif; font-variant-emoji:text; text-rendering:optimizeLegibility;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.chpc-w { color:#fff; text-shadow:0 0 2px #000, 0 0 1px #000, 1px 1px 0 #2a2a2a, -1px 1px 0 #2a2a2a, 1px -1px 0 #2a2a2a, -1px -1px 0 #2a2a2a; }
.chpc-b { color:#161616; text-shadow:0 0 2px rgba(255,255,255,.55), 0 1px 1px rgba(255,255,255,.4); }
.chdot { position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(0,0,0,.28); }
.chsq.tgt .chpc ~ .chdot, .chsq.tgt:has(.chpc) .chdot { width:90%; height:90%; background:transparent; box-shadow:inset 0 0 0 3px rgba(226,0,125,.6); border-radius:8px; }

/* Домино */
.dom-board { display:flex; gap:3px; overflow-x:auto; padding:8px 2px; min-height:56px; align-items:center; }
.dom-hand { display:flex; gap:6px; flex-wrap:wrap; padding:6px 0; }
.dom-tile { display:inline-flex; align-items:center; gap:3px; background:linear-gradient(180deg,#fffef8,#ece7d6); color:#222;
  border:1px solid #cbc4ad; border-radius:8px; padding:6px 8px; font-size:20px; line-height:1; box-shadow:0 2px 4px rgba(0,0,0,.2); flex:0 0 auto; }
.dom-sep { width:1px; height:22px; background:#bbb399; }
.dom-tile.playable { cursor:pointer; box-shadow:0 0 0 2px var(--pink), 0 2px 4px rgba(0,0,0,.2); }
.dom-tile.playable:active { transform:translateY(2px); }
body[data-mode="dark"] .dom-tile { background:linear-gradient(180deg,#2a2448,#1e1838); color:#f1ecff; border-color:#352a5e; }

/* Шагай морин уралдаан */
.sh-lane { display:flex; align-items:center; gap:8px; padding:8px 4px; border-radius:12px; }
.sh-lane.act { background:rgba(226,0,125,.08); }
.sh-who { width:64px; font-size:11px; font-weight:700; flex:0 0 auto; }
.sh-rail { position:relative; flex:1; height:26px; border-radius:999px; background:var(--surface-2);
  border:1px dashed var(--card-border); overflow:hidden; }
.sh-flag { position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:15px; }
.sh-horse { position:absolute; top:50%; transform:translateY(-50%); font-size:20px; transition:left .8s cubic-bezier(.3,1.2,.5,1); }
.sh-pos { width:40px; text-align:right; font-size:11px; font-weight:700; color:var(--muted); flex:0 0 auto; }
.sh-dice { display:flex; gap:10px; justify-content:center; min-height:48px; align-items:center; }
.sh-bone { font-size:40px; animation:boneIn .3s ease; }
@keyframes boneIn { from{transform:scale(.3) rotate(-30deg);opacity:0} to{transform:none;opacity:1} }

/* Найз — онлайн цэг */
.fr-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#c2ccd0; margin-right:4px; }
.fr-dot.on { background:#1fc77a; box-shadow:0 0 6px rgba(31,199,122,.7); }
/* Leaderboard */
.scorerow.lb-me { background:rgba(226,0,125,.12) !important; font-weight:700; }
.lb-av { display:inline-block; width:20px; height:20px; border-radius:50%; background-size:cover; background-position:center; vertical-align:middle; }

/* Амжилт (achievements) */
.achv-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.achv { background:#fff; border:1px solid var(--card-border); border-radius:18px; padding:14px 12px; text-align:center;
  box-shadow:0 4px 0 var(--card-shadow); opacity:.6; }
.achv.got { opacity:1; border-color:var(--gold); }
.achv-ic { font-size:34px; }
.achv-nm { font-weight:800; font-size:13px; margin-top:4px; }
.achv-d { font-size:10.5px; color:var(--muted); margin-top:1px; }
/* Season Pass */
.pass-tier { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ff6fae,#e2007d); }
.pass-lock { opacity:.55; }

/* 3D аватар picker */
.av3d-row { display:flex; gap:10px; flex-wrap:wrap; }
.av3d { width:62px; height:62px; border-radius:16px; background-size:cover; background-position:center; cursor:pointer;
  border:3px solid transparent; box-shadow:0 3px 0 var(--card-shadow); transition:transform .1s; }
.av3d:active { transform:translateY(2px); }
.av3d.on { border-color:var(--pink); }

/* Material Symbols icon */
.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; direction:ltr;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; }

/* ===== HUB — Stitch-тэй яг ижил ===== */
.hub2 { padding:0 !important; animation:fade .28s ease; }
.hub2-header { position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; z-index:50;
  height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:var(--surface); border-bottom:4px solid #dde4e6; box-shadow:0 4px 0 rgba(221,228,230,.6); }
.hub2-prof { display:flex; align-items:center; gap:9px; cursor:pointer; }
.hub2-av { width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--pink);
  display:grid; place-items:center; font-size:20px; background:linear-gradient(160deg,#ffd9e3,#ffb0c9); background-size:cover; background-position:center; }
.hub2-nm { font-size:13px; font-weight:700; color:var(--text); line-height:1.1; }
.hub2-rank { font-size:9px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.5px; }
.hub2-word { font-family:var(--font-display); font-weight:900; font-size:22px; letter-spacing:-1px; color:var(--pink); }
.hub2-coin { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800; color:var(--text); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--card-border); border-radius:999px; padding:6px 12px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.05); }
.hub2-main { padding:76px 16px 100px; display:flex; flex-direction:column; gap:18px; }
.hub2-banner { position:relative; overflow:hidden; border-radius:24px; min-height:150px; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(135deg,#e2007d,#ff8a00); box-shadow:0 8px 0 #8e004c; cursor:pointer; transition:transform .1s; }
.hub2-banner:active { transform:translateY(4px); box-shadow:0 4px 0 #8e004c; }
.hub2-banner-ico { position:absolute; top:-22px; right:-12px; font-size:150px; color:#fff; opacity:.18; }
.hub2-banner h2 { position:relative; z-index:1; margin:0 0 12px; font-size:21px; font-weight:800; color:#fff; line-height:1.15; }
.hub2-banner-btn { position:relative; z-index:1; align-self:flex-start; background:#fff; color:var(--pink);
  border:none; border-radius:999px; padding:9px 20px; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.12); }
.hub2-quick { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hub2-q { border-radius:24px; padding:16px; min-height:118px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; transition:transform .1s; }
.hub2-q:active { transform:translateY(3px); }
.hub2-q-p { background:linear-gradient(180deg,#b577cf,#a154bf); box-shadow:0 6px 0 #6e208c; }
.hub2-q-w { background:#fff; border:2px solid rgba(255,138,0,.25); box-shadow:0 6px 0 #e2e9ec; }
.hub2-q-ic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.22); }
.hub2-q-ic .material-symbols-outlined { color:#fff; font-size:28px; }
.hub2-q-ic.w { background:rgba(255,138,0,.12); }
.hub2-q-ic.w .material-symbols-outlined { color:var(--orange); }
.hub2-q-t { font-size:15px; font-weight:800; color:#fff; }
.hub2-q-d { font-size:11.5px; color:rgba(255,255,255,.85); margin-top:1px; }
.hub2-q-t.dark { color:var(--text); } .hub2-q-d.dark { color:var(--muted); }
.hub2-sec { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; }
.hub2-sec h2 { margin:0; font-size:22px; font-weight:800; color:var(--text); }
.hub2-tag { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-weight:600; }
.hub2-alllink { font-size:13px; font-weight:700; color:var(--pink); cursor:pointer; }
.hub2-hot { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px; }
.hub2-games { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hub2-game { background:#fff; border:1px solid var(--card-border); border-radius:24px; padding:8px;
  box-shadow:0 6px 0 #dde4e6; cursor:pointer; transition:transform .1s; }
.hub2-game:active { transform:translateY(3px); box-shadow:0 3px 0 #dde4e6; }
.hub2-game-art { aspect-ratio:1; border-radius:18px; overflow:hidden; background:var(--g); display:grid; place-items:center; position:relative; }
.hub2-game p { margin:8px 0 4px; text-align:center; font-size:13px; font-weight:700; color:var(--text); }
.hub2-game.locked { opacity:.5; filter:grayscale(1); }
.hub2-game.locked .hub2-game-art { background:var(--surface-2); }
.hub2-lock { color:var(--muted); font-size:46px; }
.hub2-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; z-index:50;
  display:flex; justify-content:space-around; align-items:center; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:4px solid #dde4e6; }
.hub2-nav-i { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--muted); cursor:pointer;
  padding:5px 12px; border-radius:14px; font-size:11px; font-weight:700; transition:transform .1s; }
.hub2-nav-i:active { transform:translateY(2px); }
.hub2-nav-i .material-symbols-outlined { font-size:24px; }
.hub2-nav-i.active { background:linear-gradient(180deg,var(--accent-2,#ffb0c9),var(--accent)); color:#fff; box-shadow:0 4px 0 var(--accent-deep,#8e004c); }

/* ===== HUB — зураг шиг (greeting + hero + ангилал + найз) ===== */
.hub2-greet { justify-content:space-between; }
.hub2-hi { font-size:14px; font-weight:800; color:var(--text); line-height:1.1; }
.hub2-htools { display:flex; align-items:center; gap:8px; }
.hub2-bell { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:18px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--card-border); }
.hub2-hero { position:relative; overflow:hidden; border-radius:24px; padding:20px 18px;
  background:linear-gradient(150deg,#6c5ce7 0%,#4631b0 100%); box-shadow:0 10px 26px -12px rgba(108,92,231,.7); cursor:pointer; }
.hub2-hero-props { position:absolute; top:14px; right:14px; font-size:30px; letter-spacing:2px; opacity:.9; }
.hub2-hero h2 { margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; line-height:1.2; max-width:70%; }
.hub2-hero p { margin:0 0 14px; font-size:12.5px; color:rgba(255,255,255,.85); max-width:78%; line-height:1.4; }
.hub2-hero-btn { background:linear-gradient(180deg,#ffd45e,#f0b400); color:#3a2600; border:none; border-radius:14px;
  padding:11px 20px; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 4px 0 #b88600; }
.hub2-hero-btn:active { transform:translateY(4px); box-shadow:0 0 0 #b88600; }
.hub2-cats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.hub2-cat { border-radius:18px; padding:14px 8px; text-align:center; cursor:pointer; color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.22); transition:transform .1s; }
.hub2-cat:active { transform:translateY(3px); }
.hub2-cat-ic { font-size:30px; }
.hub2-cat-nm { font-weight:800; font-size:13px; margin-top:4px; }
.hub2-cat-c { font-size:10.5px; opacity:.9; margin-top:1px; }
.hub2-friends { display:flex; gap:10px; overflow-x:auto; padding:2px; }
.hub2-friend { flex:0 0 auto; width:78px; text-align:center; cursor:pointer; }
.hub2-friend-av { position:relative; width:54px; height:54px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  font-size:26px; background:var(--surface-2); border:2px solid var(--card-border); }
.hub2-friend-av.img { background-size:cover; background-position:center; }
.hub2-friend-dot { position:absolute; right:2px; bottom:2px; width:12px; height:12px; border-radius:50%; background:#c2ccd0; border:2px solid var(--card); }
.hub2-friend-dot.on { background:#2ec16b; }
.hub2-friend-nm { font-size:11.5px; font-weight:700; color:var(--text); margin-top:4px; }
.hub2-friend-g { font-size:9.5px; color:var(--muted); }

/* Доод nav төв + товч */
.hub2-nav-plus { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer; margin-top:-22px;
  background:linear-gradient(160deg,var(--accent-2,#8b7cf0),var(--accent,#6c5ce7)); color:#fff;
  box-shadow:0 6px 16px -4px var(--accent,#6c5ce7), 0 0 0 5px var(--surface); transition:transform .1s; }
.hub2-nav-plus:active { transform:translateY(2px); }
.hub2-nav-plus .material-symbols-outlined { font-size:30px; }
/* Champions төв товч — ранк дэлгэц рүү */
.hub2-nav-champ { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; margin-top:-20px; text-decoration:none; }
.hub2-nav-champ .champ-ic { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:25px;
  background:linear-gradient(160deg,#ffd45e,#f0820c); box-shadow:0 6px 16px -4px rgba(240,130,12,.7), 0 0 0 4px var(--surface); transition:transform .1s; }
.hub2-nav-champ .champ-lb { font-size:10px; font-weight:800; color:#f0820c; letter-spacing:.2px; }
.hub2-nav-champ:active .champ-ic { transform:translateY(2px); }
.hub2-nav-champ.active .champ-ic { box-shadow:0 0 0 3px #ffd45e, 0 0 16px rgba(255,212,94,.8), 0 0 0 4px var(--surface); }

/* Тоглоомууд tab — жагсаалт */
.gl-tabs .opt { padding:9px 6px; font-size:13px; }
.gl-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--card-border);
  border-radius:18px; padding:10px; box-shadow:0 4px 0 var(--card-shadow); }
.gl-ic { width:64px; height:64px; flex:0 0 auto; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:var(--g,var(--surface-2)); position:relative; }
.gl-ic img { width:100%; height:100%; object-fit:cover; }
.gl-ic .tile-art-inner { transform:scale(.54); }
.gl-ic .tile-emo { font-size:32px; }
/* Тоглоомын tile CSS-art (2048/tetris/uno/domino) */
.ta-2048 { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.ta-2048 span { width:30px; height:30px; border-radius:6px; display:grid; place-items:center; font-weight:800; font-size:13px; color:#fff; font-family:'Unbounded',sans-serif; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.ta-tetris { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ta-tetris i { width:17px; height:17px; border-radius:3px; box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.3); }
.ta-uno { display:flex; }
.ta-uno span { width:30px; height:42px; border-radius:7px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 0 0 2px #fff; margin-left:-10px; transform:rotate(var(--r,0)); }
.ta-uno span:nth-child(1){ margin-left:0; --r:-10deg; } .ta-uno span:nth-child(3){ --r:10deg; }
.ta-domino { width:34px; height:60px; background:#f5f5f0; border-radius:8px; display:flex; flex-direction:column; box-shadow:0 3px 8px rgba(0,0,0,.45); overflow:hidden; }
.ta-domino b { flex:1; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:4px; padding:5px; }
.ta-domino b:first-child { border-bottom:2px solid #ccc; }
.ta-domino i { width:6px; height:6px; border-radius:50%; background:#333; }
.ta-roles { position:absolute; bottom:5px; font-size:15px; letter-spacing:2px; filter:drop-shadow(0 1px 2px #000); }
.gl-meta { flex:1; min-width:0; }
.gl-nm { font-weight:800; font-size:15px; color:var(--text); }
.gl-d { font-size:11.5px; color:var(--muted); line-height:1.3; margin:2px 0; }
.gl-p { font-size:11px; color:var(--accent); font-weight:700; }
.gl-play { flex:0 0 auto; width:auto !important; padding:9px 18px !important; }

/* Splash — Stitch-тэй яг ижил */
.splash-wrap { display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  min-height:86vh; padding:36px 16px; position:relative; text-align:center; }
.splash-deco { position:absolute; inset:0; pointer-events:none; opacity:.12; color:var(--accent); }
.splash-deco span { position:absolute; font-size:22px; font-weight:800; }
.splash-center { display:flex; flex-direction:column; align-items:center; }
.brand-grad { margin:0; font-family:var(--font-display); font-weight:900; font-size:50px; letter-spacing:-1px; line-height:1;
  background:linear-gradient(135deg,#ff2d77 0%,#ff8a00 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.float { animation:floaty 3s ease-in-out infinite; }
.atman-logo { width:min(78vw,300px); height:auto; display:block; filter:drop-shadow(0 0 22px rgba(123,44,255,.55)) drop-shadow(0 0 40px rgba(226,0,125,.35)); }
.app-logo { width:auto; height:30px; vertical-align:middle; filter:drop-shadow(0 0 8px rgba(123,44,255,.5)); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.splash-pill { margin-top:12px; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--pink);
  background:#ffd9e3; padding:5px 14px; border-radius:999px; }
.splash-sub { margin-top:18px; font-size:15px; color:var(--muted); line-height:1.55; max-width:260px; }
.splash-bottom { width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.splash-start { height:62px; font-size:22px; border-radius:20px;
  background:linear-gradient(135deg,#ff2d77 0%,#ff8a00 100%); box-shadow:0 4px 0 #b7004f, inset 0 1px 0 rgba(255,255,255,.4); }
.splash-start:active { transform:translateY(4px); box-shadow:0 0 0 #b7004f, inset 0 1px 0 rgba(255,255,255,.4); }
.splash-foot { display:flex; align-items:center; gap:8px; opacity:.7; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.splash-avs { display:inline-flex; align-items:center; }
.splash-avs i, .splash-avs b { width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  border:2px solid #fff; margin-left:-8px; font-size:14px; font-style:normal; }
.splash-avs i:first-child { margin-left:0; }
.splash-avs i { background:#ffe0ec; }
.splash-avs b { background:#ff8a00; color:#fff; font-size:9px; }

/* Hub хурдан холбоос (хүрд / coin олох) */
.hub-quick { flex:1; display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 13px; border-radius:16px;
  background:#fff; border:1px solid var(--card-border); box-shadow:0 3px 0 var(--card-shadow); }
.hub-quick:active { transform:scale(.97); }
.hq-ic { font-size:26px; }
.hq-t { font-weight:800; font-size:13px; }
.hq-d { font-size:10.5px; opacity:.7; }

/* Аватар үүсгэгч */
.av-preview { width:130px; height:130px; border-radius:26px; overflow:hidden; box-shadow:0 10px 26px -10px #000, 0 0 0 3px rgba(255,255,255,.12); }
.av-preview svg { width:100%; height:100%; display:block; }
.av-row { display:flex; align-items:center; justify-content:space-between; padding:8px 2px; border-bottom:1px solid rgba(255,255,255,.07); }
.av-row:last-child { border-bottom:none; }
.av-lbl { font-weight:700; font-size:13px; }
.av-ctrl { display:flex; align-items:center; gap:12px; }
.av-arrow { width:34px; height:34px; border-radius:11px; border:none; cursor:pointer; font-size:20px; font-weight:800;
  background:linear-gradient(160deg,var(--accent),var(--accent-2)); color:#fff; display:grid; place-items:center; }
.av-val { min-width:34px; text-align:center; font-weight:700; font-size:13px; opacity:.85; }

/* Азын хүрд — бүтэн дэлгэц */
.wheel-screen { display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  min-height:calc(100dvh - 120px); text-align:center; gap:14px; padding:6px 0 10px; }
.wheel-head { display:flex; flex-direction:column; gap:6px; align-items:center; }
.wheel-foot { width:100%; display:flex; flex-direction:column; align-items:center; }
.wheel-big { width:min(86vw,330px) !important; height:min(86vw,330px) !important; }
.wheel-wrap { position:relative; width:230px; height:230px; }
.wheel { width:100%; height:100%; border-radius:50%; position:relative;
  box-shadow:0 0 0 6px #2a1a4a, 0 0 0 9px rgba(255,255,255,.18), 0 14px 34px -10px #000; }
.wheel-lbl { position:absolute; left:50%; top:0; height:50%; transform-origin:bottom center; }
.wheel-lbl b { position:absolute; top:18px; left:-14px; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); display:inline-block; }
.wheel-ptr { position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:5; font-size:26px; color:var(--gold,#e8c66a); filter:drop-shadow(0 2px 3px #000); }
.wheel-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:48px; height:48px; border-radius:50%;
  background:#fff; display:grid; place-items:center; font-size:24px; box-shadow:0 4px 10px rgba(0,0,0,.4); }

/* Зар (demo) overlay */
.ad-ov { position:fixed; inset:0; z-index:1200; background:rgba(6,4,16,.86); display:grid; place-items:center; }
.ad-box { background:#fff; color:var(--text); border:1px solid var(--card-border); border-radius:22px;
  padding:26px 30px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; min-width:220px;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.5); }
.ad-tag { font-size:9px; font-weight:800; letter-spacing:1px; background:var(--surface-2); color:var(--muted); padding:3px 9px; border-radius:8px; }

/* Coin олох / урих */
.earn-ic { font-size:26px; width:40px; text-align:center; }
.ref-code { font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:1px; padding:10px 16px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.3); }

/* Хэн худалч вэ */
.imp-card { width:230px; height:300px; border-radius:22px; cursor:pointer; display:grid; place-items:center;
  background:linear-gradient(160deg,#2a1a4a,#160d2c); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px -12px #000; user-select:none; }
.imp-back { font-size:18px; font-weight:800; opacity:.8; }
.imp-face { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:16px; }
.imp-face.imp-bad .display { color:var(--pink); }
.imp-timer { font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--gold,#e8c66a); letter-spacing:1px; }

/* Хосын асуулт */
.cpl-q { font-family:var(--font-display); font-weight:800; font-size:23px; line-height:1.35; text-align:center; padding:6px 8px;
  background:linear-gradient(120deg,#ff8a00,#ff2d77 60%,#7b2cff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Лудо самбар */
/* ====== ЛУДО — өнгөлөг самбар + тоглогчийн самбар (өөрийн CSS дизайн) ====== */
.ludo-stage { display:flex; flex-direction:column; align-items:center; gap:9px; }
.lu-players { display:grid; grid-template-columns:1fr 1fr; gap:7px; width:min(94vw,360px); }
.lu-pcard { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:12px;
  background:var(--surface-2,rgba(255,255,255,.06)); border:2px solid transparent; transition:.2s; position:relative; overflow:hidden; }
.lu-pcard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc); }
.lu-pcard.act { border-color:var(--pc); box-shadow:0 0 0 1px var(--pc), 0 0 16px -3px var(--pc); }
.lu-pcard.out { opacity:.5; }
.lu-pav { width:30px; height:30px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2px var(--pc); flex:0 0 auto; }
.lu-pmeta { display:flex; flex-direction:column; min-width:0; }
.lu-pnm { font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-phome { font-size:9.5px; color:var(--muted); line-height:1.1; }
.lu-pdie { margin-left:auto; flex:0 0 auto; }

.ludo-wrap { display:flex; justify-content:center; }
.ludo-board { position:relative; width:min(94vw,360px); aspect-ratio:1; display:grid;
  grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr);
  background:#0e1422; border-radius:16px; overflow:hidden;
  box-shadow:0 16px 38px -14px #000, inset 0 0 0 3px rgba(255,255,255,.06); }
.lu-cell { position:relative; display:flex; align-items:center; justify-content:center; }
.lu-path { background:#f6f8fa; box-shadow:inset 0 0 0 1px #ced6dd; }
.lu-blank { background:#f6f8fa; box-shadow:inset 0 0 0 1px #ced6dd; }
.lu-home { box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.lu-start { box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.lu-safe .lu-star { color:#c2920f; font-size:12px; line-height:1; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
/* ⚡ Повер pickup — зам дээр гэрэлтэн дуудна */
.lu-pickup { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; font-size:13px; line-height:1;
  filter:drop-shadow(0 0 4px var(--gold,#ffba00)); animation:luPickPulse 1.1s ease-in-out infinite; pointer-events:none; }
@keyframes luPickPulse { 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.28); } }
.lu-center { background:transparent; }
/* Хашаа — өнгөт дөрвөлжин + цагаан дотор + 4 буудлын тойрог */
.lu-yardbox { position:absolute; width:40%; height:40%; z-index:1; border-radius:0; background:var(--yc); padding:9%; }
.lu-yardbox.tl { left:0; top:0; } .lu-yardbox.tr { right:0; top:0; } .lu-yardbox.br { right:0; bottom:0; } .lu-yardbox.bl { left:0; bottom:0; }
.lu-yardin { width:100%; height:100%; background:#fff; border-radius:14px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; padding:14%; gap:10%; }
.lu-park { border-radius:50%; box-shadow:inset 0 0 0 3px var(--yc); background:rgba(0,0,0,.03); position:relative; }
/* Төв — 4 өнгийн гурвалжин + цом */
.lu-goal { position:absolute; left:40%; top:40%; width:20%; height:20%; z-index:2;
  background:conic-gradient(from 45deg,#2ec16b 0 90deg,#e8c020 90deg 180deg,#3b7de8 180deg 270deg,#e23b3b 270deg 360deg);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); display:flex; align-items:center; justify-content:center; }
.lu-goal::after { content:'🏆'; font-size:min(3.4vw,14px); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* Мод (token) — пешка маягийн */
.lu-tok { position:absolute; width:64%; height:64%; border-radius:50% 50% 50% 50%/60% 60% 45% 45%; left:18%; top:14%;
  background:var(--tc); z-index:6;
  box-shadow:0 3px 5px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.35);
  border:1.5px solid rgba(255,255,255,.85); transition:transform .28s cubic-bezier(.3,.8,.3,1); }
.lu-tok::after { content:''; position:absolute; left:28%; top:14%; width:44%; height:30%; border-radius:50%; background:rgba(255,255,255,.55); }
.lu-tok.in-park { width:78%; height:78%; left:11%; top:11%; border-radius:50%; }
.lu-tok.movable { cursor:pointer; animation:luPulse .8s ease-in-out infinite; z-index:9; }
.lu-tok.moved { animation:luHop .3s ease; }
.lu-tok.done { opacity:.7; }
@keyframes luPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.95),0 3px 5px rgba(0,0,0,.5)} 50%{box-shadow:0 0 0 6px rgba(255,255,255,0),0 3px 5px rgba(0,0,0,.5)} }
@keyframes luHop { 0%{transform:scale(1)} 40%{transform:scale(1.32) translateY(-4px)} 100%{transform:scale(1)} }
/* Шоо — 3D дугуй булантай, цэгтэй */
.lu-die { width:30px; height:30px; border-radius:7px; background:linear-gradient(150deg,#fff,#e6e9ee);
  box-shadow:0 3px 6px -1px rgba(0,0,0,.5), inset 0 1px 2px #fff; position:relative; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:4px; gap:1px; }
.lu-die i { width:5px; height:5px; border-radius:50%; background:#222; align-self:center; justify-self:center; }
.lu-die.rolling { animation:luDie .5s ease; }
@keyframes luDie { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(190deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
.lu-die.big { width:42px; height:42px; } .lu-die.big i { width:7px; height:7px; }
/* Power горим — инвентар + бамбай */
.lu-powers { display:flex; gap:8px; margin-bottom:10px; }
.lu-pw { flex:1; display:flex; align-items:center; gap:6px; justify-content:center; padding:8px 6px; border-radius:12px; cursor:pointer;
  background:var(--surface-2,rgba(255,255,255,.06)); border:1.5px solid var(--card-border,rgba(255,255,255,.1)); color:var(--text); font:inherit; }
.lu-pw .lu-pwic { font-size:17px; } .lu-pw .lu-pwnm { font-size:11px; font-weight:700; }
.lu-pw .lu-pwn { font-size:11px; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; background:var(--pink,#e2007d); color:#fff; }
.lu-pw.on { border-color:var(--cyan,#00e0ff); box-shadow:0 0 12px -3px var(--cyan,#00e0ff); }
.lu-pw.off { opacity:.42; pointer-events:none; }
.lu-tok.shielded { box-shadow:0 0 0 3px #36c5ff, 0 0 12px rgba(54,197,255,.7), 0 3px 5px rgba(0,0,0,.5); }
.lu-tok .lu-shieldmark { position:absolute; top:-8px; right:-6px; font-size:11px; filter:drop-shadow(0 1px 1px #000); }
.lu-tok.shieldable { cursor:pointer; animation:luPulse .8s ease-in-out infinite; outline:2px dashed #36c5ff; }
.lu-team { display:inline-grid; place-items:center; width:14px; height:14px; border-radius:5px; font-size:9px; font-weight:800;
  background:var(--pc); color:#fff; margin-right:4px; vertical-align:middle; }
/* ===== Янхандах (нийгмийн дедукц) ===== */
.yh-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.yh-pl { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:11px 12px; border-radius:12px; cursor:pointer;
  background:var(--surface-2,rgba(255,255,255,.06)); border:1.5px solid var(--card-border,rgba(255,255,255,.1)); color:var(--text); font:inherit; font-weight:600; font-size:13px; }
.yh-pl:active { transform:translateY(1px); } .yh-pl:disabled { opacity:.45; }
.yh-vn { min-width:20px; height:20px; border-radius:10px; display:inline-grid; place-items:center; background:var(--pink,#e2007d); color:#fff; font-size:11px; font-weight:800; }
.yh-result { padding:10px 12px; border-radius:12px; font-weight:700; font-size:13px; text-align:center; background:var(--surface-2,rgba(255,255,255,.06)); }
.yh-result.bad { background:rgba(226,0,125,.16); color:#ff6b95; } .yh-result.good { background:rgba(46,193,107,.16); color:#5fe0a0; }
.yh-inv { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.yh-tag { font-size:11px; color:var(--muted); }
.yh-roster { display:flex; flex-direction:column; gap:5px; }
.yh-rrow { display:flex; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:10px; background:var(--surface-2,rgba(255,255,255,.05)); font-size:13px; }
.yh-rrow.dead { opacity:.5; }
.yo-step { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 4px; font-size:13px; font-weight:600; border-bottom:1px solid var(--card-border,rgba(255,255,255,.06)); }
.yo-stp { display:flex; align-items:center; gap:10px; }
.yo-stp button { width:30px; height:30px; border-radius:8px; font-size:18px; font-weight:800; background:var(--surface-2,rgba(255,255,255,.08)); border:1px solid var(--card-border,rgba(255,255,255,.12)); color:var(--text); cursor:pointer; }
.yo-stp b { min-width:18px; text-align:center; }
/* Дүрийн карт (character role card) */
.rolecard { width:min(82vw,300px); margin:0 auto; border-radius:20px; overflow:hidden; padding:0 0 14px;
  background:linear-gradient(180deg,#181426,#0c0a16); border:2px solid var(--rg,#888);
  box-shadow:0 20px 44px -16px #000, 0 0 28px -8px var(--rg,#888); }
.rolecard.rc-closed { cursor:pointer; --rg:#7b6cff; }
.rc-top { display:flex; justify-content:space-between; align-items:center; padding:9px 13px 7px; }
.rc-team { font-size:9px; font-weight:800; letter-spacing:1.6px; color:var(--rg); }
.rc-name { font-size:14px; font-weight:800; color:#fff; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-portrait { position:relative; height:172px; margin:0 11px; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -34px 54px rgba(0,0,0,.55); }
.rc-char { font-size:98px; line-height:1; filter:drop-shadow(0 10px 16px rgba(0,0,0,.6)); animation:rcFloat 3s ease-in-out infinite; z-index:2; }
@keyframes rcFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes rcFlip { 0%{transform:rotateY(90deg);opacity:.2} 100%{transform:rotateY(0);opacity:1} }
.rc-deco { position:absolute; top:11px; width:100%; text-align:center; font-size:21px; opacity:.45; letter-spacing:12px; }
.rc-ring { position:absolute; width:134px; height:134px; border-radius:50%; border:2px dashed rgba(255,255,255,.16); animation:rcSpin 22s linear infinite; }
@keyframes rcSpin { to { transform:rotate(360deg); } }
.rc-banner { display:flex; align-items:center; justify-content:center; gap:8px; margin:13px 12px 0; padding:10px;
  border-radius:12px; background:rgba(255,255,255,.05); font-family:'Unbounded',sans-serif; font-weight:800; font-size:19px; color:#fff;
  letter-spacing:1px; box-shadow:inset 0 0 0 1.5px var(--rg); text-shadow:0 0 10px var(--rg); }
.rc-banner .rc-ic { font-size:22px; text-shadow:none; }
.rc-sub { text-align:center; font-size:12.5px; color:rgba(255,255,255,.78); margin-top:7px; font-weight:600; }
.rc-tag { text-align:center; font-size:11.5px; color:rgba(255,255,255,.6); margin:7px 16px 0; line-height:1.45; }
/* ===== 2048 ===== */
.g2-score { background:var(--surface-2,rgba(255,255,255,.07)); border-radius:10px; padding:4px 10px; text-align:center; min-width:56px; }
.g2-score span { display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
.g2-score b { font-size:16px; color:var(--text); }
.g2-board { position:relative; width:100%; max-width:340px; aspect-ratio:1; margin:6px auto 0; padding:8px; border-radius:14px;
  background:#bbada0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:8px; touch-action:none; user-select:none; }
.g2-cell { background:rgba(238,228,218,.32); border-radius:9px; position:relative; }
.g2-tile { position:absolute; inset:0; border-radius:9px; display:grid; place-items:center; font-weight:800; font-family:'Unbounded',sans-serif;
  box-shadow:0 2px 4px rgba(0,0,0,.18); }
.g2-new { animation:g2pop .18s ease; }
@keyframes g2pop { 0%{transform:scale(.2);opacity:.4} 100%{transform:scale(1);opacity:1} }
.g2-over { position:absolute; inset:0; border-radius:14px; background:rgba(238,228,218,.78); display:grid; place-items:center; z-index:5; backdrop-filter:blur(2px); }
.g2-over-in { text-align:center; color:#776e65; display:flex; flex-direction:column; align-items:center; gap:4px; }
.g2-over-in .display { color:#5a524b; }
/* ===== Тетрис ===== */
.tt-wrap { display:flex; gap:12px; justify-content:center; align-items:flex-start; }
.tt-board { position:relative; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(20,1fr);
  width:min(54vw,200px); aspect-ratio:1/2; gap:2px; padding:6px; border-radius:12px; background:#0d1320;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), 0 12px 28px -12px #000; }
.tt-cell { border-radius:3px; background:rgba(255,255,255,.04); }
.tt-cell[style] { box-shadow:inset 0 2px 2px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.35); }
.tt-side { display:flex; flex-direction:column; gap:7px; min-width:84px; }
.tt-stat { background:var(--surface-2,rgba(255,255,255,.06)); border-radius:10px; padding:5px 9px; }
.tt-stat span { display:block; font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.tt-stat b { font-size:16px; color:var(--text); }
.tt-next { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:2px; width:56px; height:56px; margin-top:3px; }
.tt-ncell { border-radius:2px; }
.tt-ncell[style] { box-shadow:inset 0 1px 1px rgba(255,255,255,.4); }
.tt-pad { display:flex; gap:8px; justify-content:center; margin-top:4px; flex-wrap:wrap; }
.tt-btn { width:54px; height:48px; border-radius:12px; font-size:22px; font-weight:800; cursor:pointer; color:var(--text);
  background:var(--surface-2,rgba(255,255,255,.08)); border:1px solid var(--card-border,rgba(255,255,255,.12)); }
.tt-btn:active { transform:translateY(2px); }
.tt-btn.tt-hard { background:linear-gradient(160deg,#7b2cff,#e2007d); color:#fff; border:none; }
.tt-opp { display:flex; flex-direction:column; align-items:flex-end; gap:1px; padding:4px 9px; border-radius:10px; background:var(--surface-2,rgba(255,255,255,.06)); transition:background .2s; }
.tt-opp.warn { background:rgba(255,77,94,.4); }
.tt-opp .bt-nm { font-size:11px; font-weight:700; } .tt-opp .bt-cnt { font-size:11px; color:var(--cyan); }
/* Боттой versus — мини өрсөлдөгчийн хөлөг (2 хөлөг зэрэг) */
.tt-oppbot { align-items:center; padding:5px 6px; }
.tt-minihead { display:flex; justify-content:space-between; gap:8px; width:100%; margin-bottom:3px; }
.tt-mini { display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(20,1fr);
  width:84px; aspect-ratio:1/2; gap:1px; background:rgba(0,0,0,.35); border-radius:6px; padding:2px; box-shadow:0 0 0 2px rgba(255,255,255,.06); }
.ttm-cell { border-radius:1.5px; background:rgba(255,255,255,.04); }
.ttm-cell[style] { box-shadow:inset 0 1px 1px rgba(255,255,255,.35); }
.tt-flash { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); z-index:10; pointer-events:none;
  font-family:'Unbounded',sans-serif; font-weight:900; font-size:24px; color:#fff; white-space:nowrap;
  text-shadow:0 0 14px var(--cyan,#00e0ff), 0 2px 6px #000; animation:ttFl .7s ease both; }
.tt-flash.tetris { color:#ffd45e; font-size:30px; text-shadow:0 0 18px #ff8a00, 0 2px 6px #000; }
@keyframes ttFl { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} 75%{opacity:1;transform:translate(-50%,-60%) scale(1)} 100%{opacity:0;transform:translate(-50%,-90%) scale(.95)} }
/* ===== 108 / UNO ===== */
.uno-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; z-index:8; }
.uno-dir { position:absolute; top:-26px; font-size:22px; color:#fff; opacity:.7; }
.uno-colordot { width:16px; height:16px; border-radius:50%; margin-top:6px; box-shadow:0 0 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.5); }
.uno-card { width:42px; height:60px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px; flex:0 0 auto;
  box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.4); position:relative; }
.uno-card span { background:rgba(0,0,0,.14); width:74%; height:54%; border-radius:50%; display:grid; place-items:center; }
.uno-card.big { width:58px; height:82px; font-size:28px; }
.uno-hand { display:flex; gap:7px; overflow-x:auto; padding:8px 2px; }
.uno-card.hand { cursor:default; opacity:.6; transition:transform .12s; }
.uno-card.hand.playable { opacity:1; cursor:pointer; box-shadow:0 0 0 2px #fff, 0 6px 14px -4px #000, var(--glow) var(--cyan); }
.uno-card.hand.playable:active { transform:translateY(-6px); }
.uno-pick { width:54px; height:54px; border-radius:14px; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.4); }
.uno-pick:active { transform:translateY(2px); }
/* ===== Буур (Bura) ===== */
.bur-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; }
.bur-opp, .bur-me { display:flex; align-items:center; gap:8px; }
.bur-trump { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bur-table { min-height:120px; display:flex; flex-direction:column; gap:8px; justify-content:center; padding:10px;
  border-radius:14px; background:radial-gradient(circle at 50% 40%,#173d2c,#0d2a1f); box-shadow:inset 0 0 30px rgba(0,0,0,.4); }
.bur-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.bur-row .pcard { flex:0 0 auto; }
/* ===== Босс зэрэглэл (geo rank) ===== */
.rank-zone { font-size:11.5px; font-weight:700; color:var(--text); background:var(--surface-2,rgba(255,255,255,.07)); padding:6px 11px; border-radius:11px; text-align:center; line-height:1.5; }
.rank-me { display:flex; align-items:center; gap:11px; padding:10px; border-radius:14px; background:linear-gradient(160deg,rgba(226,0,125,.18),rgba(123,44,255,.14)); border:1px solid rgba(255,255,255,.12); }
.rank-me-ic { font-size:34px; }
.rank-me-t { font-size:15px; font-weight:800; color:var(--text); }
.rank-need { font-size:12px; font-weight:600; color:var(--gold,#e8c66a); text-align:center; }
.rank-boss-tag { font-size:13px; font-weight:800; color:#ffd45e; text-align:center; text-shadow:0 0 10px rgba(255,212,94,.6); }
.rank-list { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.rank-row { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:10px; background:var(--surface-2,rgba(255,255,255,.05)); }
.rank-row .rank-pos { width:26px; text-align:center; font-weight:800; font-size:14px; color:var(--muted); }
.rank-row .lb-av { width:26px; height:26px; }
.rank-row .rank-nm { flex:1; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-row .rank-pts { font-size:13px; font-weight:800; color:var(--cyan,#00e0ff); }
.rank-row.boss { background:linear-gradient(160deg,rgba(255,212,94,.22),rgba(226,0,125,.12)); box-shadow:inset 0 0 0 1px rgba(255,212,94,.4); }
.rank-row.me { box-shadow:inset 0 0 0 2px var(--pink,#e2007d); }
.rank-row.low { opacity:.66; }
/* Газрын зураг (Leaflet) */
.rank-map-wrap { position:relative; }
.rank-map { height:58vh; min-height:300px; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px -12px #000, inset 0 0 0 2px rgba(255,255,255,.08); z-index:0; }
.rank-map-load { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); font-size:13px; padding:20px; }
.rm-pin { position:relative; width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.5); }
.rm-pin.me { box-shadow:0 0 0 3px var(--pink,#e2007d), 0 0 12px rgba(226,0,125,.8), 0 3px 8px rgba(0,0,0,.5); }
.rm-pin.boss { box-shadow:0 0 0 3px #ffd45e, 0 0 14px rgba(255,212,94,.9), 0 3px 8px rgba(0,0,0,.5); }
.rm-pin.boss::after { content:'👑'; position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:14px; filter:drop-shadow(0 1px 1px #000); }
.rm-pin.real { box-shadow:0 0 0 3px #19c37d, 0 0 12px rgba(25,195,125,.85), 0 3px 8px rgba(0,0,0,.5); }
.leaflet-popup-content { font-family:var(--font-body,sans-serif); font-size:12px; }
/* Champions — тоглоом бүрийн байр */
.ch-row { display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:13px; cursor:pointer; transition:background .15s; }
.ch-row:active { background:rgba(255,255,255,.06); }
.ch-row.top { background:linear-gradient(90deg,rgba(255,186,0,.14),transparent); }
.ch-row.dim { opacity:.55; }
.ch-ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 auto; box-shadow:0 2px 7px rgba(0,0,0,.35); }
.ch-main { flex:1; min-width:0; }
.ch-nm { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-sub { margin-top:1px; }
.ch-pos { text-align:center; flex:0 0 auto; min-width:38px; }
.ch-rank { font-weight:800; font-size:17px; line-height:1; }
.ch-row.top .ch-rank { font-size:20px; }
/* Атманы ДОШ — газрын зураг дээрх нутаг дэвсгэрийн туг */
.dosh { display:flex; flex-direction:column; align-items:center; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.dosh-flag { display:flex; align-items:center; gap:5px; background:linear-gradient(135deg,#e2007d,#7b2cff); color:#fff; padding:3px 9px 3px 3px; border-radius:14px; border:1.5px solid #fff; max-width:108px; }
.dosh.mine .dosh-flag { background:linear-gradient(135deg,#ffd45e,#ff8a00); color:#1a0e2e; }
.dosh-av { width:22px; height:22px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; box-shadow:0 0 0 1.5px rgba(255,255,255,.6); }
.dosh-nm { font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dosh-pole { width:2px; height:12px; background:rgba(255,255,255,.65); }
.dosh-zone { font-size:9px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:1px 6px; border-radius:6px; white-space:nowrap; }
.lf-battle { margin-top:6px; width:100%; background:linear-gradient(135deg,#e23b3b,#7b2cff); color:#fff; border:none; border-radius:9px; padding:6px 8px; font-weight:800; font-size:12px; cursor:pointer; }
/* Байлдааны дэлгэц */
.bt-vs { display:flex; align-items:stretch; gap:8px; }
.bt-side { flex:1; background:linear-gradient(160deg,rgba(255,212,94,.14),rgba(0,0,0,.18)); border:1.5px solid rgba(255,212,94,.4); border-radius:16px; padding:14px 8px; text-align:center; display:flex; flex-direction:column; gap:3px; align-items:center; }
.bt-side.enemy { background:linear-gradient(160deg,rgba(226,0,125,.16),rgba(0,0,0,.18)); border-color:rgba(226,0,125,.45); }
.bt-flag { font-size:26px; }
.bt-hood { font-weight:800; font-size:14px; }
.bt-pts { font-weight:800; color:var(--pink,#ff4fb0); margin-top:2px; font-size:13px; }
.bt-x { align-self:center; font-weight:900; font-size:18px; opacity:.8; }
/* Notification */
.bell-badge { position:absolute; top:-4px; right:-4px; background:#e2007d; color:#fff; font-size:9px; font-weight:800; min-width:15px; height:15px; line-height:15px; border-radius:8px; padding:0 3px; box-shadow:0 0 0 1.5px var(--bg,#0e0a1e); }
.hub2-bell { position:relative; }
.nf-row { display:flex; align-items:center; gap:11px; padding:12px 11px; border-radius:13px; background:rgba(255,255,255,.04); cursor:pointer; }
.nf-row.unread { background:linear-gradient(90deg,rgba(226,0,125,.16),rgba(255,255,255,.04)); }
.nf-ic { font-size:22px; flex:0 0 auto; }
.nf-tx { flex:1; font-size:13px; line-height:1.35; }
.nf-arr { opacity:.5; font-size:20px; }
/* Онцгой тоглолт */
.sp-hero { background:linear-gradient(155deg,rgba(255,186,0,.18),rgba(226,0,125,.14)); border:1.5px solid rgba(255,186,0,.4); }
.sp-mult { font-size:40px; font-weight:900; background:linear-gradient(135deg,#ffd45e,#ff2ca6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
/* Шоо сонгох — 1-6 сонгогч */
.lu-choose { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.lu-choose-l { font-size:11px; font-weight:700; margin-right:2px; }
.lu-cd { padding:3px; border-radius:8px; background:var(--surface-2,rgba(255,255,255,.06)); border:1.5px solid var(--card-border,rgba(255,255,255,.1)); cursor:pointer; display:grid; place-items:center; }
.lu-cd:active { transform:translateY(1px); }
.lu-cd-x { font-size:14px; color:var(--muted); width:30px; height:30px; }
/* Цохигдсон мод хашаандаа нисэх (ghost) */
.lu-ghost { z-index:30 !important; pointer-events:none; transition:transform .55s cubic-bezier(.4,0,.3,1), opacity .55s ease; }

/* ====== ХӨЗӨР ====== */
.hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pcard {
  width: 46px; height: 64px; border-radius: 10px; background: #fff; color: #111;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 14px rgba(0,0,0,.45); position: relative; cursor: grab;
  border: 2px solid transparent; user-select: none; font-family: var(--font-body);
  touch-action: none;
}
.pcard.sel { border-color: var(--cyan); transform: translateY(-8px); box-shadow: var(--glow) var(--cyan); }
.pcard.red { color: #e0245e; }
.pcard.mini { width: 34px; height: 48px; font-size: 13px; border-radius: 8px; }
.pcard.back {
  background: linear-gradient(160deg, var(--violet), var(--ink));
  color: var(--cyan); border: 2px solid rgba(255,255,255,.15);
}
.rowzone { margin: 10px 0; }
.rowzone .lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; display:flex; justify-content:space-between;}
.rowzone .slots {
  min-height: 70px; border-radius: 14px; padding: 8px;
  border: 1.5px dashed rgba(255,255,255,.14); display: flex; gap: 6px; flex-wrap: wrap; justify-content:center;
}
.rowzone.active .slots { border-color: var(--cyan); background: rgba(39,231,255,.05); }
.rowzone.full .slots { border-style: solid; border-color: rgba(57,233,138,.4); }

/* Privacy gate */
.gate { display: grid; place-items: center; gap: 18px; padding: 40px 0; text-align: center; }
.gate .big { font-size: 26px; }

/* Score table */
.scorerow { display:flex; justify-content:space-between; padding:12px 14px; border-radius:14px; background:var(--surface-2); }
.scorerow .pts { font-family: var(--font-display); font-weight:800; }
.pos { color: var(--gold); }
.neg { color: var(--pink); }

/* Spinner wheel */
.wheelwrap { position: relative; width: min(86vw, 380px); aspect-ratio: 1; margin: 10px auto; }
.wheel { width:100%; height:100%; border-radius:50%; transition: transform 3.8s cubic-bezier(.17,.67,.16,1);
  box-shadow: 0 0 0 6px rgba(255,255,255,.05), var(--glow) rgba(122,59,255,.5); }
.needle { position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:34px; z-index:3; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.wheelhub {
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background: linear-gradient(160deg,var(--card),var(--card-2)); border:2px solid rgba(255,255,255,.15);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; z-index:2; font-size:13px;
}

/* Prompt card */
.prompt {
  text-align:center; padding: 26px 20px; font-size: 19px; font-weight:600; line-height:1.4;
}
.prompt .who { font-family:var(--font-display); color: var(--accent); font-size: 22px; display:block; margin-bottom:10px; }

/* Avatar */
.avatar {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 30% 25%, var(--accent), var(--accent-2));
  box-shadow: var(--glow) color-mix(in srgb, var(--accent) 45%, transparent);
}
.xpbar { height: 10px; border-radius: 999px; background: rgba(0,0,0,.08); overflow:hidden; }
.xpbar > i { display:block; height:100%; background: linear-gradient(92deg,var(--accent),var(--accent-2)); }

/* Daily task */
.task { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); }
.task .tprog { flex:1; }
.task.done { opacity:.6; }

/* Emoji picker / skin grid */
.pickgrid { display:grid; grid-template-columns: repeat(6,1fr); gap:8px; }
.pickgrid .e { aspect-ratio:1; display:grid; place-items:center; font-size:24px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--card-border); cursor:pointer; }
.pickgrid .e.on { border-color: var(--pink); box-shadow:0 3px 0 var(--card-shadow); }

.swatch { aspect-ratio: 1.6; border-radius:14px; cursor:pointer; border:2px solid transparent; position:relative; }
.swatch.on { border-color: var(--white); }
.swatch .lk { position:absolute; inset:0; display:grid; place-items:center; font-size:20px; background:rgba(0,0,0,.4); border-radius:12px; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(40px);
  background: rgba(20,10,40,.95); border:1px solid rgba(255,255,255,.14); color:#fff;
  padding: 12px 20px; border-radius: 999px; font-weight:700; font-size:14px; opacity:0;
  transition: all .3s; z-index: 99; box-shadow: var(--shadow); pointer-events:none; max-width:90vw;
}
#toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* Confetti dot */
.spark { position:fixed; width:9px; height:9px; border-radius:2px; z-index:90; pointer-events:none; }

hr.sep { border:none; border-top:1px solid rgba(255,255,255,.08); margin:18px 0; }
.small { font-size:12px; }
.tag { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-weight:600; }

/* ====== КАЗИНО ШИРЭЭ — tactile cards ====== */

/* Бодит хөзрийн нүүр — булан дахь зэрэг+тэмдэг + том төв тэмдэг */
/* Хуучирсан цаасан (parchment) хөзрийн нүүр — монгол хээтэй винтаж */
.pcard.face { display:block; padding:0; color:#2a2118;
  background: linear-gradient(160deg,#f8f1da 0%, #ebdfba 100%); }
.pcard.face.red { color:#9e1b2f; }
.pcard.face .c-tl, .pcard.face .c-br {
  position:absolute; font-weight:800; line-height:.92; text-align:center; font-size:13px; letter-spacing:-.5px;
  font-family:Georgia,'Times New Roman',serif;
}
.pcard.face .c-tl { top:4px; left:5px; }
.pcard.face .c-br { bottom:4px; right:5px; transform:rotate(180deg); }
.pcard.face .c-mid { position:absolute; inset:0; display:grid; place-items:center; font-size:27px; opacity:.9; }
.pcard.face .c-tl small, .pcard.face .c-br small { display:block; font-size:12px; }
/* Винтаж давхар алтан хүрээ */
.pcard.face::before { content:''; position:absolute; inset:3px; border:1px solid rgba(150,110,30,.45); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(150,110,30,.16); pointer-events:none; }
/* Ace — том ганц тэмдэг */
.pcard.face.ace .c-mid { font-size:38px; }
/* Court (J/Q/K) — баян алтан дэвсгэр + хаан/хатан дүрс */
.pcard.face.court { background: linear-gradient(160deg,#f5e9bf 0%, #e6cd8e 100%); }
.pcard.face.court::before { border-color:rgba(176,130,28,.7); box-shadow:inset 0 0 0 1px rgba(176,130,28,.28); }
.pcard.face.court .court-mid { display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.pcard.face.court .cr { font-size:19px; color:#a9801c; filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.pcard.face.court .cl { font-family:Georgia,serif; font-weight:800; font-size:20px; }
.pcard.face.court .cs { font-size:15px; margin-top:1px; }
/* Гарын хөзрийг илүү том харагдуулах (fan дотор) */
.fan .pcard.face { width:54px; height:78px; }
.fan .pcard.face .c-tl, .fan .pcard.face .c-br { font-size:15px; }
.fan .pcard.face .c-mid { font-size:34px; }

/* Felt ширээний гадаргуу */
.felt {
  position:relative; border-radius:16px;
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(0,224,255,.06), transparent 55%),
    radial-gradient(circle at 50% 45%, #173d2c 0%, #0d2a1f 62%, #07140f 100%);
  box-shadow: inset 0 0 48px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
.felt::after { /* оёдлын ирмэг */
  content:""; position:absolute; inset:7px; border-radius:11px;
  border:1.5px dashed rgba(255,255,255,.07); pointer-events:none;
}
.felt.over { box-shadow: inset 0 0 48px rgba(0,0,0,.5), 0 0 0 2px var(--cyan),
  var(--glow) color-mix(in srgb, var(--cyan) 45%, transparent); }

/* Дэлгээстэй гар (fan) */
.fan { position:relative; height:132px; margin:2px 0; touch-action:none; }
.fan-slot {
  position:absolute; left:50%; bottom:8px;
  transition: transform .24s cubic-bezier(.2,.7,.2,1); will-change:transform;
}
.fan-slot .pcard { transition: transform .14s ease, box-shadow .14s ease; }
.fan-slot .pcard:hover, .fan-slot .pcard.up {
  transform: translateY(-16px) scale(1.07); z-index:6;
  box-shadow: 0 14px 26px rgba(0,0,0,.5), var(--glow) var(--cyan);
}

/* Чирч буй карт — гараас сугалж авав */
.pcard.dragging {
  position:fixed !important; margin:0 !important; z-index:9999;
  width:66px; height:92px; font-size:22px;
  transform: translate(-50%,-50%) scale(1.18) rotate(0deg) !important;
  box-shadow: 0 26px 54px rgba(0,0,0,.7), var(--glow) color-mix(in srgb, var(--cyan) 60%, transparent);
  pointer-events:none; transition:none; cursor:grabbing;
}

/* Хуваах анимаци (deal) */
@keyframes dealIn { from { transform: translateY(-190px) rotate(-22deg); opacity:0 } to { transform:none; opacity:1 } }
.pcard.deal { animation: dealIn .44s cubic-bezier(.2,.7,.2,1) both; }

/* Ширээнд буух (settle bounce) */
@keyframes settle { 0%{transform:translateY(-12px) scale(1.14)} 60%{transform:translateY(2px) scale(.97)} 100%{transform:none} }
.pcard.settle { animation: settle .3s ease; }

/* Гараас ширээнд гарах (муушиг) */
@keyframes toTable { from{transform:translateY(120px) scale(1.12); opacity:.3} to{transform:none; opacity:1} }
.pcard.totable { animation: toTable .32s cubic-bezier(.2,.7,.2,1) both; }

/* Felt дэх жижиг эгнээ (placed cards) */
.feltrow { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; align-items:center; min-height:74px; padding:8px; }

/* ====== BIG TWO зууван казино ширээ ====== */
.bt-tablewrap { position:relative; height:300px; margin:2px 0 6px; }
.bt-opps { position:absolute; inset:0; z-index:5; }
.bt-table {
  position:absolute; left:50%; top:55%; transform:translate(-50%,-50%);
  width:94%; height:78%; border-radius:46% / 40%;
  background: radial-gradient(60% 55% at 50% 42%, #1f8e6e 0%, #0f6e56 55%, #0a4a3c 100%);
  border:3px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 6px rgba(11,7,18,.7), 0 0 46px -7px rgba(123,44,255,.5), inset 0 0 60px rgba(0,0,0,.45);
}
/* ATMAN лого — фетрийн төв хээ (хар дэвсгэрийг screen blend-ээр салгаж, зөвхөн неон гэрэлтэнэ) */
.bt-table::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54%; max-width:200px; aspect-ratio:1;
  background:url(img/atman-logo.png?v=1) center/contain no-repeat;
  mix-blend-mode:screen; opacity:.4; pointer-events:none; z-index:0;
}
.bt-rail { position:absolute; inset:13px; border-radius:44% / 38%; border:1px dashed rgba(255,255,255,.14); }
.bt-logo { display:none; } /* текст лого → ::after зураг лого-гоор сольсон */
.bt-pile { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; z-index:8; }
.bt-turn { position:absolute; bottom:9%; left:50%; transform:translateX(-50%);
  font-size:11px; color:rgba(255,255,255,.75); z-index:8; white-space:nowrap; font-weight:600; text-align:center; }
/* Чиний ээлж — том, анхаарал татах */
.bt-turn.mine { font-family:'Unbounded',sans-serif; font-size:21px; font-weight:800; letter-spacing:.5px;
  color:#fff; text-shadow:0 0 14px rgba(255,44,166,.9), 0 2px 6px #000; animation:turnPulse 1s ease-in-out infinite; }
.bt-turn.mine small { display:block; font-family:'Poppins',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0; color:rgba(255,255,255,.8); text-shadow:0 1px 3px #000; margin-top:1px; }
@keyframes turnPulse { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.08)} }
/* Pod дээрх орлоо/өнжсөн badge + ээлжийн тэмдэгч */
.mu-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:7;
  font-size:8px; font-weight:800; letter-spacing:.3px; padding:2px 6px; border-radius:8px; white-space:nowrap; line-height:1; }
.mu-badge.in { background:linear-gradient(160deg,#1fc77a,#0b7a47); color:#fff; box-shadow:0 0 8px rgba(31,199,122,.6); }
.mu-badge.out { background:rgba(120,120,140,.4); color:rgba(255,255,255,.6); }
.mu-turnmark { position:absolute; top:-30px; left:50%; transform:translateX(-50%); z-index:9;
  font-size:8.5px; font-weight:800; color:#fff; background:linear-gradient(160deg,var(--pink),var(--orange));
  padding:2px 7px; border-radius:9px; white-space:nowrap; box-shadow:0 0 12px rgba(255,44,166,.8);
  animation:turnPulse2 1s ease-in-out infinite; }
@keyframes turnPulse2 { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.12)} }
/* Муушиг: тоглогчийн гаргасан карт (профайл дээр) — мод авмагц арилна */
.mu-played { position:absolute; top:-34px; left:50%; transform:translateX(-50%); z-index:9;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); animation:muPlayPop .22s ease-out; }
@keyframes muPlayPop { from{opacity:0; transform:translate(-50%,8px) scale(.7)} to{opacity:1; transform:translateX(-50%) scale(1)} }
/* Миний гаргасан карт (доод гарын дэргэд) */
.mu-myplayed { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:rgba(255,255,255,.8); }
/* Дараагийн ээлж тэмдэглэгээ */
.mu-next { display:block; font-family:'Poppins',sans-serif; font-size:10px; font-weight:600;
  color:rgba(255,255,255,.7); text-shadow:0 1px 3px #000; margin-top:1px; }
.bt-pod.nextup { filter:drop-shadow(0 0 6px rgba(255,170,40,.7)); }
.bt-pod.nextup .bt-nm { color:#ffce6b; }
/* ===== Муушиг — цэвэр тоглолтын самбар (солилцоогүй, төв дэх модны овоо) ===== */
.mu-table .bt-rail { inset:8px; }
.mu-center2 { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:7; text-align:center; display:flex; flex-direction:column; align-items:center; }
.mu-center2.play { top:3px; }
.mu-bidcount { margin-top:5px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.45); padding:3px 12px; border-radius:11px; }
.mu-pile2 { position:absolute; top:53%; left:50%; transform:translate(-50%,-50%); z-index:8; display:flex; gap:8px; align-items:flex-end; justify-content:center; flex-wrap:wrap; max-width:86%; }
.mu-pile2 .mu-pile-empty { color:rgba(255,255,255,.5); font-size:12px; }
/* Ширээний суудал (нумаар байрлуулна — JS-ээс left/top%) */
.mu-opp { display:flex; flex-direction:column; align-items:center; gap:1px; width:66px; z-index:6; }
.mu-opp.act { filter:drop-shadow(0 0 8px rgba(255,44,166,.85)); }
.mu-opp.next .mu-opp-nm { color:#ffce6b; }
.mu-opp.out { opacity:.42; }
.mu-opp-av { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; position:relative; border:2px solid rgba(255,255,255,.25); }
.mu-opp.act .mu-opp-av { border-color:var(--pink,#FF2CA6); }
.mu-opp-turn { position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--pink,#FF2CA6); text-shadow:0 0 6px #000; }
.mu-opp-roles { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; margin-top:1px; }
.mu-role { font-size:7.5px; font-weight:800; padding:1px 4px; border-radius:6px; white-space:nowrap; line-height:1.35; }
.mu-role.work { background:linear-gradient(160deg,#c77d1f,#7a4f0b); color:#fff; }
.mu-role.lead { background:linear-gradient(160deg,#1f9ec7,#0b4f7a); color:#fff; }
.mu-opp-nm { font-size:10px; font-weight:700; color:#fff; max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-opp-sub { font-size:9.5px; color:rgba(255,255,255,.82); }
.mu-myarea { margin-top:8px; }
.mu-myarea .mu-role { font-size:9px; }
/* Төв дэх энэ модны карт (мод авмагц арилна) */
.mu-pile-c { display:flex; flex-direction:column; align-items:center; gap:3px; animation:muPlayPop .22s ease-out; }
.mu-pile-c.led .pcard, .mu-pile-c.led [class*="card"] { box-shadow:0 0 0 2px var(--cyan,#22d3ee), 0 3px 8px rgba(0,0,0,.5); border-radius:6px; }
.mu-pile-nm { font-size:10px; font-weight:700; color:rgba(255,255,255,.9); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px #000; }
.mu-pile-tag { font-size:9px; font-weight:800; color:var(--cyan,#22d3ee); letter-spacing:.3px; }
.mu-pile-empty { color:rgba(255,255,255,.45); font-size:12px; padding:6px 0; }
/* Идсэн мод 🪵 ялагч руу нисэх */
.mu-fly { position:fixed; z-index:9999; font-size:30px; pointer-events:none; transition:transform .7s cubic-bezier(.4,0,.2,1), opacity .7s ease-in; will-change:transform,opacity; }
/* Идсэн хөзрүүд — тоглогчийн хажуу дахь жижиг давхар стек (ямар хөзрөөр идсэн нь харагдана) */
.mu-won { display:flex; justify-content:center; align-items:center; margin-top:1px; height:22px; pointer-events:none; }
.mu-won .mu-won-c { display:inline-flex; margin-left:-16px; }
.mu-won .mu-won-c:first-child { margin-left:0; }
.mu-won .pcard.mini { transform:scale(.46); transform-origin:center; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.mu-roles-line { margin-top:4px; font-size:10.5px; color:rgba(255,255,255,.82); background:rgba(0,0,0,.35); padding:2px 8px; border-radius:9px; white-space:nowrap; }
.mu-roles-line b { color:#ffce6b; }
.mu-wonrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.mu-wonrow .mu-won { justify-content:flex-start; max-width:none; }
.bt-pod { position:absolute; display:flex; flex-direction:column; align-items:center; width:76px; transform:translateX(-50%); z-index:6; }
.bt-pod.op-top { top:2px; left:50%; }
.bt-pod.op-left { top:10%; left:19%; }
.bt-pod.op-right { top:10%; left:81%; }
.bt-av { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(160deg,#ffd9e3,#ffb0c9);
  box-shadow:0 0 0 3px #fff, 0 4px 10px -3px rgba(0,0,0,.5); }
.bt-av.img { background-size:cover; background-position:center; background-repeat:no-repeat; font-size:0; }
/* Найз чат (DM) */
.dm-badge { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; margin-left:3px; border-radius:8px;
  background:var(--pink,#e2007d); color:#fff; font-size:10px; font-weight:800; vertical-align:middle; }
.dm-box { padding:12px; }
.dm-msg { max-width:78%; align-self:flex-start; padding:8px 11px; border-radius:14px 14px 14px 4px; font-size:13px; line-height:1.35;
  background:var(--surface-2,rgba(255,255,255,.07)); color:var(--text); word-break:break-word; }
.dm-msg.me { align-self:flex-end; border-radius:14px 14px 4px 14px; background:linear-gradient(160deg,#7b2cff,#e2007d); color:#fff; }
.bt-pod.act .bt-av { box-shadow:0 0 0 3px var(--pink), 0 0 16px rgba(226,0,125,.7), 0 4px 10px -3px rgba(0,0,0,.5); }
.bt-pod.out { opacity:.45; }
.bt-podinfo { margin-top:-8px; background:linear-gradient(160deg,#241640,#140c26);
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:7px 8px 4px; text-align:center; min-width:62px;
  box-shadow:0 6px 14px -8px #000; }
.bt-nm { font-size:9.5px; font-weight:600; color:rgba(255,255,255,.92); line-height:1; }
.bt-cnt { font-size:10px; font-weight:700; margin-top:2px; color:var(--cyan); }
.bt-pod.out .bt-cnt { color:var(--gold); }

/* Муушиг — тоглогчийн сүүлд гаргасан карт (seat-ийн дэргэд, round дуустал) */
.bt-pod .mu-played { position:absolute; bottom:-46px; left:50%; transform:translateX(-50%); z-index:4;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
/* Big Two — pod дээрх сүүлд гаргасан combo (1–5 карт). Голыг бүү дар: нягт, жижиг, доош биш дээш */
.bt-pod .mu-played.bt-lastplay { display:flex; bottom:auto; top:-30px; z-index:3; gap:0; }
.bt-pod .mu-played.bt-lastplay .pcard.mini { width:26px; height:37px; font-size:10px; margin-left:-13px;
  box-shadow:0 1px 4px rgba(0,0,0,.55); }
.bt-pod .mu-played.bt-lastplay .pcard.mini:first-child { margin-left:0; }
.bt-pod.op-top .mu-played.bt-lastplay { top:auto; bottom:-40px; } /* дээд pod — доош, гэхдээ нягт */
.mu-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:8; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px; }
.mu-center .tr { font-size:30px; line-height:1; }
.mu-center .mu-trumplbl { font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold,#e8c66a); text-shadow:0 1px 3px #000; }
/* Төвийн trump хөзөр — жинхэнэ карт байдлаар, алтан гэрэлтэлттэй */
.mu-center .mu-trumpcard { position:relative; width:46px; height:64px; border-radius:8px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:1px; font-weight:800;
  box-shadow:0 0 0 2px var(--gold,#e8c66a), 0 0 16px rgba(232,198,106,.6), 0 6px 14px -4px #000; }
.mu-center .mu-trumpcard .r { font-size:20px; line-height:1; }
.mu-center .mu-trumpcard .s { font-size:18px; line-height:1; }
.mu-center .md { font-size:11px; color:rgba(255,255,255,.7); font-weight:600; margin-top:1px; }
/* Муушиг — trump/trick кластер дээд хэсэгт, ээлжийн мессеж доод ирмэгт → давхцахгүй */
.bt-table:has(.mu-center) .mu-center { top: 44%; gap: 1px; }
.bt-table:has(.mu-center) .bt-turn { bottom: 3%; }
.bt-table:has(.mu-center) .bt-turn.mine { font-size: 17px; }
.bt-table:has(.mu-center) .bt-turn.mine small { font-size: 9px; }
#myplayed { display:flex; justify-content:center; min-height:52px; align-items:center; gap:6px; }
#myplayed .lp { filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

/* Муушиг — нэр томьёо ба ойлгомжтой UI */
.mu-role { font-size:8.5px; font-weight:800; letter-spacing:.3px; padding:1px 6px; border-radius:7px; line-height:1.5;
  background:rgba(255,255,255,.14); color:rgba(255,255,255,.8); display:inline-block; }
.mu-role.neck { background:linear-gradient(160deg,#ffb24d,#e88a00); color:#3a2400; }
.mu-role.work { background:linear-gradient(160deg,#6c9bff,#3f5fe0); color:#fff; }
.bt-podinfo .mu-role { margin-bottom:2px; font-size:7.5px; padding:1px 5px; }
.mu-hint { font-size:11.5px; font-weight:600; color:rgba(255,255,255,.85); text-align:center; }
.mu-rec { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:14px; line-height:1.4;
  background:var(--card); border:1.5px solid var(--accent); box-shadow:0 4px 0 var(--card-shadow); }
.mu-rec b { font-size:13px; }
/* Навшвал хэдэн хөзөр сольж болох — суудлын магадлал */
.mu-fore { display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:14px;
  background:var(--card); border:1px solid var(--card-border); box-shadow:0 4px 0 var(--card-shadow); }
.mu-fore-h { font-size:12.5px; font-weight:800; color:var(--text); }
.mu-prob { display:flex; flex-direction:column; gap:5px; }
.mu-prow { display:flex; align-items:center; gap:8px; }
.mu-pk { flex:0 0 52px; font-size:11px; font-weight:700; color:var(--text); }
.mu-pbar { flex:1; height:14px; border-radius:7px; background:var(--surface-2,rgba(255,255,255,.06)); overflow:hidden; }
.mu-pbar i { display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#00e0ff,#6c5ce7); transition:width .4s; }
.mu-pp { flex:0 0 34px; text-align:right; font-size:11px; font-weight:800; color:var(--muted); }
.mu-prow.hl .mu-pk { color:var(--cyan,#00e0ff); }
.mu-prow.hl .mu-pp { color:var(--cyan,#00e0ff); }
.mu-prow.hl .mu-pbar i { background:linear-gradient(90deg,#00e0ff,#1fc77a); box-shadow:0 0 8px rgba(0,224,255,.5); }
.mu-prow.dim .mu-pk, .mu-prow.dim .mu-pp { color:rgba(255,107,129,.85); }
.mu-prow.dim .mu-pbar i { background:rgba(255,107,129,.5); }
.mu-strong { font-size:12px; font-weight:700; color:#7fe6b4; padding:4px 2px; }
/* «Муу хөзөр» тэмдэг — солих санал болсон картууд */
.fan .pcard.mu-weak::after { content:'⟳'; position:absolute; top:2px; right:3px; font-size:11px; font-weight:900;
  color:#0a8; background:rgba(0,224,255,.22); border-radius:50%; width:15px; height:15px; line-height:15px; text-align:center; }
.fan .pcard.mu-weak { box-shadow:0 0 0 2px var(--cyan,#00e0ff), 0 4px 10px -3px rgba(0,0,0,.5); }
/* Ажилтны эрх — солилцооны тайлбар */
.mu-worker-note { font-size:11px; line-height:1.4; color:var(--text); padding:7px 9px; border-radius:10px; margin:2px 0 4px;
  background:linear-gradient(160deg,rgba(232,198,106,.16),rgba(232,138,0,.12)); border:1px solid rgba(232,198,106,.45); }
.mu-worker-note b { color:var(--gold,#e8c66a); font-size:13px; }
.mu-worker-note b.mu-red { color:#ff6b81; }
.mu-led { font-size:9.5px; font-weight:700; color:rgba(255,255,255,.75); margin-top:1px; }
.mu-led b { font-size:13px; color:#fff; }
.mu-led b.mu-red, .mu-red { color:#ff6b81 !important; }
.mu-think { color:var(--cyan); }
.mu-dots i { animation:muBlink 1.2s infinite both; font-style:normal; }
.mu-dots i:nth-child(2){ animation-delay:.2s; } .mu-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes muBlink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.tag.mu-loo { background:rgba(255,44,102,.18); color:#ff6b81; font-weight:800; }
.mu-loobanner { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; font-size:14px; font-weight:700;
  background:linear-gradient(160deg,rgba(255,44,102,.22),rgba(150,20,50,.28)); border:1.5px solid rgba(255,44,102,.5); color:#ff9bad; }
.mu-loobanner.ok { background:linear-gradient(160deg,rgba(31,199,122,.2),rgba(11,90,60,.25)); border-color:rgba(31,199,122,.5); color:#7fe6b4; }
.mu-loobanner span { font-size:11.5px; font-weight:500; opacity:.9; color:#fff; }

/* ====== TEXAS HOLD'EM нэмэлт ====== */
.bt-pod.folded { opacity:.32; filter:grayscale(.6); }
.bt-pod .dlr { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
  background:#fff; color:#111; font-size:8.5px; font-weight:800; display:grid; place-items:center;
  box-shadow:0 0 6px rgba(255,255,255,.6); z-index:3; }
.bt-bet { font-size:9px; font-weight:700; margin-top:3px; color:var(--gold); }
.he-pot { position:absolute; top:28%; left:50%; transform:translate(-50%,-50%); z-index:9;
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  background:rgba(8,4,20,.6); border:1px solid rgba(255,255,255,.14); padding:5px 12px; border-radius:20px; }
.he-pot .c, .bt-bet .c { width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE27A,#FFBA00); box-shadow:0 0 7px rgba(255,186,0,.7); display:inline-block; }
.he-community { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:8; display:flex; gap:4px; }
.he-slot { width:30px; height:42px; border-radius:6px; border:1.5px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03); }
.he-hole { display:flex; gap:8px; justify-content:center; }
.he-actions { display:flex; gap:8px; margin-top:8px; }
.he-presets { display:flex; gap:6px; margin-bottom:8px; justify-content:center; }
.he-preset { flex:1; text-align:center; padding:8px 4px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:700; }
.he-preset .l { font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; }
.he-preset.on { background:linear-gradient(160deg,var(--accent),var(--accent-2)); border-color:transparent; }
.btn.act-fold { background:linear-gradient(160deg,#FFB23E,#FF7A00); box-shadow:0 10px 22px -10px rgba(255,138,0,.7); }
.btn.act-call { background:linear-gradient(160deg,#22E3D0,#00A9E0); box-shadow:0 10px 22px -10px rgba(0,224,255,.7); }
.btn.act-raise { background:linear-gradient(160deg,#FF4DA0,#9B2CFF); box-shadow:0 10px 22px -10px rgba(255,44,166,.8); }

/* ====== ЧАТ (тоглолтын үед) ====== */
.chat-btn { position:fixed; right:14px; bottom:16px; width:50px; height:50px; border-radius:50%;
  display:none; align-items:center; justify-content:center; font-size:22px; z-index:80; cursor:pointer;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));
  box-shadow:var(--glow) color-mix(in srgb,var(--accent) 50%,transparent), 0 8px 20px -6px #000; }
.chat-badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; border-radius:9px;
  background:#fff; color:var(--accent); font-size:10px; font-weight:800; display:grid; place-items:center; padding:0 4px; }
.chat-panel { position:fixed; right:10px; bottom:74px; width:300px; max-width:88vw; height:380px; max-height:58vh;
  z-index:81; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,rgba(28,22,56,.98),rgba(13,9,26,.98)); border:1px solid var(--glass-border);
  box-shadow:var(--shadow); transform:translateY(20px) scale(.96); opacity:0; pointer-events:none; transition:all .2s; }
.chat-panel.open { transform:none; opacity:1; pointer-events:auto; }
.chat-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  font-family:var(--font-display); font-weight:800; font-size:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.chat-msgs { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.chat-msg { font-size:12.5px; line-height:1.35; padding:7px 10px; border-radius:12px;
  background:rgba(255,255,255,.06); align-self:flex-start; max-width:85%; word-break:break-word; }
.chat-msg b { color:var(--cyan); font-weight:700; margin-right:3px; }
.chat-msg.me { align-self:flex-end; background:linear-gradient(160deg,var(--accent),var(--accent-2)); }
.chat-msg.me b { color:rgba(255,255,255,.85); }
.chat-quick { display:flex; gap:6px; overflow-x:auto; padding:8px 10px; border-top:1px solid rgba(255,255,255,.06); }
.chat-chip { white-space:nowrap; font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); cursor:pointer; }
.chat-input { display:flex; gap:6px; padding:10px; border-top:1px solid rgba(255,255,255,.06); }
.chat-input .input { padding:9px 12px; }

/* ====== Нэвтрэх (provider товч) ====== */
.btn-google { background:#fff; color:#1a1a2e; box-shadow:0 10px 22px -10px rgba(0,0,0,.5); }
.btn-apple { background:#000; color:#fff; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 22px -10px rgba(0,0,0,.6); }
.btn-fb { background:#1877F2; color:#fff; box-shadow:0 10px 22px -10px rgba(24,119,242,.7); }
.prov-ic { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:5px; margin-right:9px; font-weight:900; font-size:14px; }
.prov-g { background:#fff; color:#4285F4; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }

/* ====== Улс сонгох (хайлттай жагсаалт) ====== */
.country-list { display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow-y:auto;
  margin-top:10px; padding-right:4px; -webkit-overflow-scrolling:touch; }
.country-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); text-align:left; transition:border-color .12s,background .12s; }
.country-row:hover, .country-row.on { border-color:var(--accent); background:rgba(255,255,255,.08); }
.country-row .cf { font-size:22px; }
.country-row .cn { font-weight:600; font-size:14px; }
.country-row .clg { margin-left:auto; font-size:10px; color:var(--muted); text-transform:uppercase; }
.country-empty { text-align:center; color:var(--muted); padding:20px; font-size:13px; }

/* ====== WINNER / LOSER үсрэлт ====== */
.result-burst { position:fixed; inset:0; display:grid; place-items:center; z-index:95; pointer-events:none; }
.result-burst .txt { font-family:var(--font-alt); font-size:clamp(64px,18vw,108px); letter-spacing:4px;
  animation:burstIn .55s cubic-bezier(.2,1.5,.35,1) both; }
.result-burst.win .txt { background:linear-gradient(100deg,#FFD600,#FFBA00 45%,#FF2CA6);
  -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 34px rgba(255,186,0,.6)); }
.result-burst.lose .txt { color:#FF4D6D; filter:drop-shadow(0 0 26px rgba(255,77,109,.5)); animation:burstLose .7s ease both; }
.result-burst .sub { position:absolute; bottom:30%; font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--muted); }
@keyframes burstIn { 0%{transform:scale(.2) rotate(-12deg);opacity:0} 55%{transform:scale(1.18) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
@keyframes burstLose { 0%{transform:translateY(-40px) scale(1.1);opacity:0} 30%{transform:translateY(0) scale(1);opacity:1}
  45%{transform:translateX(-8px)} 60%{transform:translateX(8px)} 75%{transform:translateX(-5px)} 100%{transform:translateX(0)} }

/* ============ ХӨНДЛӨН (landscape) — намхан дэлгэцэд бүх зүйл гүйлгэлгүй багтаах ============
   Утсыг хөндлөн эргүүлэхэд ширээ + гар + товч бүгд НЭГ дэлгэцэд багтана (гүйлгэхгүй).
   Тоглоомын дэлгэцийг (:has(.bt-tablewrap)) viewport-д тааруулсан flex багана болгоно:
   ширээ үлдсэн зайг дүүргэж сунах, гар/товчлуур доор тогтмол харагдана. */
@media (orientation: landscape) and (max-height: 620px) {
  /* Бүтэн дэлгэц — голлуулсан нарийн багана биш, дэлгэц дүүрэн (edge-to-edge) */
  #app { max-width: none; width: 100%; }
  .hub2-header, .hub2-nav { max-width: none; }
  .topbar { padding: 6px 16px 2px; }
  .topbar .title { font-size: 16px; }

  /* === Тоглоомын дэлгэц: viewport өндөрт багтсан flex багана === */
  #app:has(.bt-tablewrap) { height: 100dvh; }
  .screen:has(.bt-tablewrap) { overflow: hidden; min-height: 0; padding: 2px 10px 4px !important; }
  .screen:has(.bt-tablewrap) > .stack { display: flex; flex-direction: column; height: 100%; gap: 4px; }
  .screen:has(.bt-tablewrap) > .stack > * + * { margin-top: 0; }
  /* Ширээ үлдсэн босоо зайг дүүргэнэ (pod-ууд %-аар тул автоматаар тааруулна) */
  .screen:has(.bt-tablewrap) .bt-tablewrap { flex: 1 1 auto !important; height: auto !important; min-height: 84px; margin: 0 !important; }
  /* Гар/товчлуурын картууд хэзээ ч агшихгүй — үргэлж харагдана */
  .screen:has(.bt-tablewrap) > .stack > .card { flex: 0 0 auto; padding: 8px 10px; }

  /* Хэмжээ багасгалт */
  .bt-av { width: 32px; height: 32px; }
  .bt-pod .bt-nm { font-size: 10px; }
  .bt-pod .bt-cnt { font-size: 9px; }
  .fan { height: 64px !important; margin: 0 !important; }
  .fan .pcard.face { width: 38px; height: 54px; }
  .fan .pcard.face .c-mid { font-size: 22px; }
  .fan .pcard.face .c-tl, .fan .pcard.face .c-br { font-size: 10px; }
  .he-hole .pcard, .he-hole { transform: scale(.92); transform-origin: center; }
  .felt, .feltrow, #myplayed { min-height: 0 !important; }
  .feltrow { padding: 3px; }
  .he-community { gap: 3px; }
  /* Муушиг төв */
  .mu-center .tr { font-size: 18px; }
  .mu-center .mu-trumpcard { width: 30px; height: 43px; }
  .mu-center .mu-trumpcard .r { font-size: 13px; } .mu-center .mu-trumpcard .s { font-size: 11px; }
  .mu-hint, .mu-rec, .mu-fore { font-size: 11px; }
  /* Картын товчлуурын мөр нягт */
  .he-actions { gap: 6px; }
  .he-actions .btn { padding: 8px 8px; font-size: 13px; }
  .he-presets { margin-bottom: 4px !important; }
  /* Гарын/нэр гэх мэт толгойн мөр нягт */
  .screen:has(.bt-tablewrap) .card .display { font-size: 13px; }
  /* Хөвөгч чат товч — доод үйлдлийн товчтой давхцахгүйгээр дээш зөөнө */
  .chat-btn { top: 44px; bottom: auto; right: 8px; width: 38px; height: 38px; font-size: 17px; }

  /* Hold'em PRO — landscape-д удирдлага нягт, ширээ илүү өндөртэй */
  .he-pro .he-mecard { padding: 5px 10px !important; }
  .he-pro .he-hole { margin: 3px 0 !important; }
  .he-pro .he-hole .pcard { width: 42px; height: 60px; }
  .he-pro .he-hole .pcard:first-child { transform: rotate(-6deg) translateX(5px); }
  .he-pro .he-hole .pcard:last-child { transform: rotate(5deg) translateX(-5px); }
  .he-pro .he-betadj { margin-bottom: 5px; }
  .he-pro .he-step { width: 36px; height: 36px; font-size: 20px; }
  .he-pro .he-betval { padding: 2px 0; } .he-pro .he-betval b { font-size: 15px; } .he-pro .he-betval .l { font-size: 9px; }
  .he-pro .he-presets { display: none !important; } /* landscape-д зайгүй тул нуув; +/− stepper хангалттай */
  .he-pro .he-actions .btn { padding: 9px 0; font-size: 13px; }
  .he-pro .he-actions .btn small { font-size: 10px; }
  .screen:has(.bt-tablewrap) .bt-tablewrap { min-height: 110px; }
  .he-pro .bt-table { height: 96%; }
  .he-pro .bt-pod .bt-av { width: 34px; height: 34px; font-size: 16px; }
  .he-pro .he-community .pcard { width: 30px; height: 43px; }
  .he-pro .he-pot { top: 38%; }
  .he-pro .he-community { top: 60%; }
  .chat-panel { top: 44px; bottom: auto; height: auto; max-height: 78vh; }
  /* Лудо — самбарыг өндөрт багтаах (квадрат тул өндрөөр хязгаарлана), самбар+цонх 2 баганаар */
  .ludo-stage { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 0 8px; }
  .ludo-wrap { grid-row: 1 / 3; grid-column: 1; }
  .ludo-board { width: min(74vh, 340px); }
  .lu-players { grid-column: 2; width: auto; grid-template-columns: 1fr 1fr; }
  #luinfo { grid-column: 2; width: auto !important; }
}

/* ===================== Hold'em PRO ширээ (шинэ дизайн, .he-pro хүрээнд) ===================== */
/* Дэлгэцийг бүтэн дүүргэнэ — ширээ ургана, удирдлага доор нягт (хоосон зай арилгав) */
#app:has(.he-pro) { height: 100dvh; }
.screen:has(.he-pro) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 8px !important; }
.screen:has(.he-pro) > .stack { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.he-pro .bt-tablewrap { flex: 1 1 auto; height: auto !important; min-height: 230px; }
.he-pro .he-mecard { flex: 0 0 auto; }
/* My-area 2-багана: хөзөр зүүн талд, товчлуур баруун талд (босоо хэмнэлт) */
.he-merow { display: flex; gap: 10px; align-items: center; }
.he-meL { flex: 0 0 41%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.he-meR { flex: 1; min-width: 0; }
.he-pro .he-meL .he-hole { margin: 0 !important; }
.he-pro .he-meL .he-hole .pcard { width: 50px; height: 72px; }
.he-pro .he-meR .he-betadj { margin-bottom: 6px; }
.he-pro .he-meR .he-presets { margin-bottom: 6px; }
/* Босоо горимд чат товчийг дээш (action товчтой давхцахгүй) */
@media (orientation: portrait) {
  body:has(.he-pro) .chat-btn { top: 70px; bottom: auto; right: 10px; width: 42px; height: 42px; font-size: 18px; }
}
.he-pro .bt-table { width: 99%; height: 82%; } /* фетрийн неон зуйл base .bt-table-аас өвлөнө */
.he-pro .bt-rail { inset: 13px; border-radius: 44% / 38%; border: 1px dashed rgba(255,255,255,.16); }
.he-pro .bt-logo { top: 30%; font-size: 27px; opacity: .08; }
.he-pro .bt-av { box-shadow: 0 0 0 2px var(--surf-2,#221f33), 0 4px 10px -3px rgba(0,0,0,.5); }
/* Нягт pod — олон тоглогч (6 хүртэл) давхцахгүй */
.he-pro .bt-pod { width: 66px; }
.he-pro .bt-pod .bt-av { width: 42px; height: 42px; font-size: 20px; }
.he-pro .bt-podinfo { min-width: 56px; padding: 4px 6px 3px; margin-top: -7px; }
.he-pro .bt-nm { font-size: 9px; }
.he-pro .bt-cnt { font-size: 9.5px; }
.he-pro .bt-bet { font-size: 8.5px; }
.he-pro .bt-act { top: -13px; font-size: 9px; padding: 1.5px 7px; }
/* Бот тэмдэг — өрсөлдөгч нь компьютер гэдгийг тодорхой (account мэт харагдахгүй) */
.he-pro .bt-avwrap { position: relative; display: inline-block; }
.he-pro .bt-bot { position: absolute; bottom: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; background: #13121d; border: 1.5px solid rgba(255,255,255,.18); }
.he-pro .bt-pod.act .bt-av { box-shadow: 0 0 0 2px var(--gold,#ffba00), 0 0 16px -1px var(--gold,#ffba00); position: relative; }
.he-pro .bt-pod.act .bt-av::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2.5px solid transparent; border-top-color: var(--gold,#ffba00); border-right-color: var(--gold,#ffba00);
  animation: heSpin 1.8s linear infinite;
}
@keyframes heSpin { to { transform: rotate(360deg); } }
/* Неон фетр polish — бусад ширээнд (.bt-neon tablewrap дээр). Layout биш — зөвхөн cosmetic:
   эвдрэлгүйгээр алтан timer ring + dashed rail-ийг муушиг/bigtwo/uno-д тараана. */
.bt-neon .bt-rail { inset: 11px; border-radius: 44% / 38%; border: 1px dashed rgba(255,255,255,.16); }
.bt-neon .bt-pod.act .bt-av { box-shadow: 0 0 0 2px var(--gold,#ffba00), 0 0 16px -1px var(--gold,#ffba00); position: relative; }
.bt-neon .bt-pod.act .bt-av::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2.5px solid transparent; border-top-color: var(--gold,#ffba00); border-right-color: var(--gold,#ffba00);
  animation: heSpin 1.8s linear infinite; pointer-events: none;
}
.he-pro .bt-act {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); z-index: 9;
  font-size: 9.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
  background: var(--vio,#7B2CFF); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.he-pro .bt-act.fold { background: #4a4458; color: #cdc7e0; }
.he-pro .bt-act.raise { background: var(--pink,#FF2CA6); }
.he-pro .bt-act.call { background: var(--cyan,#00E0FF); color: #04323a; }
.he-pro .he-pot {
  top: 40%; z-index: 12; background: rgba(11,7,18,.72); padding: 4px 14px; border-radius: 30px;
  font-weight: 800; font-size: 13px; color: var(--gold,#ffba00); border: 1px solid rgba(255,186,0,.32);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* Pot + дундын карт-ыг тоглогчдын нумаас доош, цэвэр зайд байрлуулна (давхцлыг арилгав) */
.he-pro .he-community { top: 56%; z-index: 11; }
.he-pro .bt-turn { bottom: 5%; z-index: 11; }
.he-pro .bt-podinfo { background: linear-gradient(160deg,#241640,#140c26); }
.he-pro .he-hole { gap: 0; }
.he-pro .he-hole .pcard { width: 60px; height: 86px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.he-pro .he-hole .pcard:first-child { transform: rotate(-7deg) translateX(7px); }
.he-pro .he-hole .pcard:last-child { transform: rotate(6deg) translateX(-7px); }
.he-pro .he-mecard { border: 1px solid rgba(255,255,255,.08); background: rgba(24,21,39,.7); }
/* Өсгөх дүн тохируулагч (+/−) */
.he-pro .he-betadj { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.he-pro .he-step { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: var(--surf-2,#221f33); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.he-pro .he-step:active { transform: scale(.93); }
.he-pro .he-betval { flex: 1; text-align: center; background: rgba(11,7,18,.5); border: 1px solid rgba(255,186,0,.25); border-radius: 12px; padding: 5px 0; }
.he-pro .he-betval .l { display: block; font-size: 10px; letter-spacing: .04em; color: var(--muted,#9a93b5); }
.he-pro .he-betval b { font-size: 18px; font-weight: 800; color: var(--gold,#ffba00); }
.he-pro .he-presets { display: flex; gap: 6px; margin-bottom: 9px; }
.he-pro .he-preset { flex: 1; text-align: center; padding: 6px 2px; background: var(--surf-2,#221f33); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; cursor: pointer; }
.he-pro .he-preset .l { display: block; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted,#9a93b5); }
.he-pro .he-preset b { font-size: 12px; font-weight: 700; color: #fff; }
.he-pro .he-preset.on { background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); border-color: transparent; box-shadow: 0 4px 12px -3px rgba(255,44,166,.5); }
.he-pro .he-preset.on .l, .he-pro .he-preset.on b { color: #fff; }
.he-pro .he-actions .btn { padding: 13px 0; border-radius: 14px; font-family: var(--font-display,'Rubik'),sans-serif; font-weight: 800; font-size: 15px; border: none; line-height: 1.15; }
.he-pro .he-actions .btn small { font-weight: 600; font-size: 11px; opacity: .9; }
.he-pro .he-actions .act-fold { background: #3a3450; color: #d7d0ea; }
.he-pro .he-actions .act-call { background: #2a2540; border: 1px solid var(--cyan,#00E0FF); color: var(--cyan,#00E0FF); }
.he-pro .he-actions .act-raise { background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); box-shadow: 0 6px 18px -3px rgba(255,44,166,.55); color: #fff; }

/* ===================== Discovery swipe-deck ===================== */
/* Карт + үйлдлийн товчнууд viewport-д БҮРЭН багтана (доош халихгүй) */
.dg-main { display: flex; flex-direction: column; gap: 8px !important; height: 100dvh; padding: calc(70px + env(safe-area-inset-top, 0px)) 14px 90px !important; }
.dg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dg-filtbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--surf-2,#221f33); border: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 17px; }
.dg-filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; -ms-overflow-style: none; scrollbar-width: none; }
.dg-filters::-webkit-scrollbar { display: none; }
.dg-fchip { flex: 0 0 auto; background: var(--surf-2,#221f33); border: 1px solid rgba(255,255,255,.08); border-radius: 30px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--muted,#9a93b5); cursor: pointer; }
.dg-fchip.on { background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); border-color: transparent; color: #fff; }
.dg-agewrap { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.dg-agewrap .input { width: 64px; }
.dg-deck { position: relative; flex: 1 1 0; min-height: 0; margin: 2px 0; }
.dg-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #1a1726; box-shadow: 0 18px 44px -12px rgba(0,0,0,.7); touch-action: pan-y; will-change: transform; }
.dg-card.peek1 { transform: scale(.95) translateY(12px); opacity: .85; }
.dg-card.peek2 { transform: scale(.9) translateY(24px); opacity: .5; }
.dg-card.top { cursor: grab; border: 1px solid rgba(255,255,255,.06); }
.dg-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dg-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 8%, rgba(0,0,0,.05) 46%, rgba(0,0,0,.22) 100%); }
.dg-live { position: absolute; top: 13px; left: 13px; background: rgba(31,199,122,.95); color: #042; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; }
.dg-tip { position: absolute; top: 13px; right: 13px; background: rgba(11,7,18,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 20px; backdrop-filter: blur(4px); }
.dg-info { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.dg-nm { font-weight: 800; font-size: 25px; display: flex; align-items: center; gap: 7px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.dg-loc { font-size: 13px; opacity: .92; margin-top: 2px; }
.dg-bio { font-size: 13px; opacity: .9; margin-top: 7px; line-height: 1.4; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.dg-chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); font-size: 12px; padding: 4px 11px; border-radius: 20px; }
.disc-sec { margin-top: 10px; }
.disc-sec-h { display: block; font-size: 12px; font-weight: 700; color: var(--muted,#9a93b5); margin-bottom: 6px; }
.disc-stamp { position: absolute; top: 38px; font-family: 'Unbounded',sans-serif; font-weight: 900; font-size: 28px; padding: 5px 14px; border-radius: 12px; border: 4px solid; opacity: 0; pointer-events: none; }
.disc-stamp.like { left: 18px; color: var(--green,#1fc77a); border-color: var(--green,#1fc77a); transform: rotate(-12deg); }
.disc-stamp.nope { right: 18px; color: #ff5a7a; border-color: #ff5a7a; transform: rotate(12deg); }
.dg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--muted,#9a93b5); font-size: 14px; padding: 20px; }
.dg-acts { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0 2px; flex: 0 0 auto; }
.dg-act { border-radius: 50%; border: none; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); }
.dg-act:active { transform: scale(.9); }
.dg-act.rewind { width: 44px; height: 44px; font-size: 18px; background: #2a2540; border: 1.5px solid #4a4458; color: var(--gold,#ffba00); }
.dg-act.pass { width: 56px; height: 56px; font-size: 24px; background: #2a2540; border: 1.5px solid #4a4458; color: #ff6b8a; }
.dg-act.sticker { width: 44px; height: 44px; font-size: 19px; background: #2a2540; border: 1.5px solid #4a4458; color: var(--cyan,#00E0FF); }
.dg-act.like { width: 62px; height: 62px; font-size: 28px; background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); box-shadow: 0 8px 24px -4px rgba(255,44,166,.6); }

/* Эможи реакц picker (тоглогч руу, coin-оор) */
.react-ov { align-items: flex-end !important; padding-bottom: 16px; }
.react-pick { width: 100%; max-width: 380px; background: var(--surf,#181527); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: fadeIn .15s; }
.react-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.react-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.react-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--surf2,#221f33); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 9px 4px; cursor: pointer; }
.react-chip:active { transform: scale(.92); }
.react-chip .re-ic { font-size: 28px; line-height: 1; }
.react-chip .re-cost { font-size: 11px; font-weight: 700; color: var(--gold,#ffba00); }
/* Гомдол (report) шалтгаан сонгох */
.report-list { display: flex; flex-direction: column; gap: 7px; }
.report-reason { text-align: left; background: var(--surf2,#221f33); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--text,#fff); font-size: 14px; font-weight: 600; }
.report-reason:active { transform: scale(.98); }
.report-reason:hover { border-color: rgba(255,90,90,.5); }
.report-block { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted,#9b93b5); cursor: pointer; }
.report-block input { width: 16px; height: 16px; accent-color: var(--pink,#ff4d8d); }
.mod-row { padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.verify-shot { width: 80px; height: 80px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--green,#1fc77a); box-shadow: 0 0 12px -2px var(--green,#1fc77a); }
/* 📲 QR апп урих */
.qr-box { background: #fff; padding: 12px; border-radius: 16px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.5); line-height: 0; width: max-content; max-width: 100%; margin: 0 auto; }
.qr-box svg { width: 220px; height: 220px; display: block; }
.qr-box svg rect:first-child, .qr-box svg path:first-child { fill: #fff; }
.qr-hint { font-size: 11.5px; line-height: 1.6; color: var(--muted,#9a93b5); text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 12px; }
/* PWA суулгах баннер */
.install-bar { position: fixed; left: 10px; right: 10px; bottom: 12px; z-index: 9600; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #7B2CFF, #FF2CA6); box-shadow: 0 10px 30px -6px rgba(255,44,166,.6); animation: emoteRise .01s; }
.install-bar .material-symbols-outlined { flex: 0 0 auto; }
.install-bar .ib-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.install-bar .ib-txt b { font-size: 14px; } .install-bar .ib-txt span { font-size: 11px; opacity: .9; }
.install-bar .ib-go { flex: 0 0 auto; background: #fff; color: #7B2CFF; border: none; font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 12px; cursor: pointer; }
.install-bar .ib-x { flex: 0 0 auto; background: rgba(255,255,255,.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; }
.ios-step { text-align: left; font-size: 14px; margin: 8px 0; line-height: 1.5; }
/* Татах хэсэгт суулгах баннер (хөвөгч биш, бүтэн өргөн) */
.install-bar.install-dl { position: static; left: auto; right: auto; bottom: auto; margin: 0; max-width: none; width: 100%; animation: none; cursor: pointer; }
/* Дөрөв холбох (Connect Four) */
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: min(94vw, 420px); padding: 8px; border-radius: 16px;
  background: linear-gradient(160deg, #1b56d6, #0b3aa0); box-shadow: 0 12px 30px -10px #000, inset 0 0 30px rgba(0,0,0,.4); }
.c4-col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 4px; cursor: pointer; }
.c4-col:active { filter: brightness(1.15); }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #0a1430, #060c1f); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); transition: transform .12s; }
.c4-cell.p1 { background: radial-gradient(circle at 38% 32%, #ff6b7e, #d6002f); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), 0 0 8px -2px #ff2c54; }
.c4-cell.p2 { background: radial-gradient(circle at 38% 32%, #ffe07a, #f0a800); box-shadow: inset 0 2px 3px rgba(255,255,255,.5), 0 0 8px -2px #ffba00; }
.c4-cell.win { animation: c4Win .6s ease-in-out infinite; }
@keyframes c4Win { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); filter: brightness(1.3); } }
/* Сонирхол/хобби олон сонголтот чип */
.hob-box { margin-top: 6px; max-height: 230px; overflow-y: auto; padding: 4px 2px 2px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(11,7,18,.25); }
.hob-cat { font-size: 11px; font-weight: 700; color: var(--muted,#9a93b5); margin: 8px 4px 4px; text-transform: uppercase; letter-spacing: .03em; }
.hob-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 4px; }
.hob-chip { font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 18px; cursor: pointer; white-space: nowrap;
  background: var(--surf2,#221f33); border: 1px solid rgba(255,255,255,.1); color: var(--text,#fff); transition: all .12s; }
.hob-chip:active { transform: scale(.94); }
.hob-chip.on { background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); border-color: transparent; color: #fff; box-shadow: 0 3px 12px -3px rgba(255,44,166,.5); }
/* Танилцах радар — түгжээтэй төлөв (профайл бүрэн биш) */
.ar-radar { position: relative; }
.ar-radar.locked { filter: saturate(.55); }
.ar-radar.locked .ar-radar-c { filter: grayscale(.5); }
.ar-radar-pct { position: absolute; top: 10px; right: 12px; font-size: 12px; font-weight: 800; color: var(--gold,#ffba00); background: rgba(11,7,18,.65); padding: 3px 9px; border-radius: 12px; z-index: 3; }
/* Доод nav-ийн "Найз" таб дээрх хүлээгдэж буй хүсэлтийн badge */
.ar-nav-i { position: relative; }
.ar-nav-badge { position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--pink,#FF2CA6); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg,#0B0712); }
/* Найзын хүсэлт inbox (Найз дэлгэц) */
.fr-reqn { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 11px; background: var(--pink,#FF2CA6); color: #fff; font-size: 12px; font-weight: 800; vertical-align: middle; }
.fr-reqlist { display: flex; flex-direction: column; gap: 8px; }
.fr-req { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.fr-req-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.fr-req-av img { width: 100%; height: 100%; object-fit: cover; }
.fr-req-nm { flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-req-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.fr-req-yes { padding: 8px 12px; border-radius: 11px; border: none; cursor: pointer; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg,var(--vio,#7B2CFF),var(--pink,#FF2CA6)); }
.fr-req-no { width: 38px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; font-weight: 700; color: var(--muted,#9a93b5); background: rgba(255,255,255,.04); }
.fr-req-yes:active, .fr-req-no:active { transform: scale(.94); }
/* Өрөөнд найзаа урих жагсаалт */
.rinv-row { display: flex; align-items: center; gap: 9px; }
.rinv-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rinv-nm { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rinv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted,#9a93b5); flex: 0 0 auto; }
.rinv-dot.on { background: #19C37D; box-shadow: 0 0 6px #19C37D; }
.rinv-go[disabled] { opacity: .6; }
/* Бүх найз — бүтэн жагсаалт */
.fa-list { display: flex; flex-direction: column; }
.fa-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.fa-row:last-child { border-bottom: none; }
.fa-row:active { background: rgba(255,255,255,.04); }
.fa-av { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.fa-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fa-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted,#9a93b5); border: 2px solid var(--surf,#181527); }
.fa-dot.on { background: #19C37D; }
.fa-main { flex: 1; min-width: 0; }
.fa-nm { font-weight: 700; font-size: 15px; }
.fa-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pink,#FF2CA6); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
/* Найзын профайл */
.fp-av { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(255,255,255,.1), 0 8px 20px -6px rgba(0,0,0,.6); }
.fp-av img { width: 100%; height: 100%; object-fit: cover; }
.fp-stats { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.fp-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.fp-stat b { font-size: 20px; font-weight: 800; color: var(--gold,#ffba00); }
.fp-stat span { font-size: 11px; color: var(--muted,#9a93b5); }
.fp-games { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-gchip { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 16px; background: linear-gradient(135deg,rgba(123,44,255,.25),rgba(255,44,166,.2)); border: 1px solid rgba(255,255,255,.1); }
.fp-stks { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-stk { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 44%), linear-gradient(150deg, var(--tc,#7B2CFF), rgba(0,0,0,.4));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.3), 0 4px 12px -4px var(--tc,#7B2CFF); }
.fp-stk-ic { font-size: 26px; line-height: 1; }
.fp-stk-n { position: absolute; bottom: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pink,#FF2CA6); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg,#0B0712); }

/* Хожлын "УУХАЙ!" баяр */
.uukhai-pop { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 22vh; z-index: 9500; pointer-events: none; transition: opacity .5s; }
.uukhai-pop span { font-family: var(--font-display,'Rubik'),sans-serif; font-weight: 900; font-size: 64px; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold,#ffba00), #ff5a3c, var(--pink,#FF2CA6)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,186,0,.6)); animation: uukhaiPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes uukhaiPop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Танилцах галерей */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gal-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.06); }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gal-cell img { cursor: pointer; }
.gal-setav { position: absolute; left: 4px; bottom: 4px; border: none; border-radius: 9px; background: rgba(11,7,18,.7); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; cursor: pointer; }
.gal-avtag { position: absolute; left: 4px; bottom: 4px; background: var(--gold,#ffba00); color: #0b0712; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 9px; }
.gal-isav { box-shadow: 0 0 0 3px var(--gold,#ffba00) inset; }
select.input { -webkit-appearance: none; appearance: none; }

/* Discovery — хүн хайх */
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.disc-card { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; cursor: pointer; background: #1a1726; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.disc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .25s; }
.disc-card:active .disc-photo { transform: scale(1.05); }
.disc-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 52%); }
.disc-meta { position: absolute; left: 10px; right: 10px; bottom: 9px; color: #fff; }
.disc-nm { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 5px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.disc-sub { font-size: 11px; opacity: .85; margin-top: 1px; }
.disc-g { font-size: 13px; }
.disc-g-m { color: #5ab0ff; } .disc-g-f { color: #ff7ac4; } .disc-g-x { color: #c9a6ff; }
.disc-live { position: absolute; top: 8px; left: 8px; background: rgba(31,199,122,.92); color: #042; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; z-index: 2; }
/* Profile modal */
.disc-modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .15s; }
.disc-modal { width: 100%; max-width: 380px; max-height: 92vh; overflow: hidden; border-radius: 22px; background: var(--card,#181527); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.disc-modal-ph { position: relative; width: 100%; aspect-ratio: 1; background-size: cover; background-position: center; cursor: pointer; }
.disc-modal-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 45%); }
.disc-modal-top { position: absolute; left: 16px; right: 16px; bottom: 12px; color: #fff; }
.disc-modal-nm { font-weight: 800; font-size: 24px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.disc-modal-loc { font-size: 13px; opacity: .9; margin-top: 2px; }
.disc-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 17px; cursor: pointer; z-index: 3; }
.disc-dots { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 3; }
.disc-dots span { width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.4); }
.disc-dots span.on { background: #fff; }
.disc-modal-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.disc-stats { display: flex; gap: 14px; font-size: 13px; opacity: .85; }
.disc-bio { font-size: 14px; line-height: 1.4; }
.disc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.disc-chip { background: rgba(123,44,255,.16); border: 1px solid rgba(123,44,255,.35); color: var(--ar-primary,#b98cff); font-size: 12px; padding: 3px 10px; border-radius: 20px; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Стикерүүд */
.stk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stk-cell { position: relative; border-radius: 14px; padding: 10px 6px 8px; text-align: center; cursor: pointer; background: rgba(255,255,255,.05); border: 1.5px solid var(--tc,#8a93a6); transition: transform .12s; overflow: hidden; }
.stk-cell::before { content: ''; position: absolute; inset: 0; background: var(--tc,#8a93a6); opacity: .08; }
.stk-cell:active { transform: scale(.94); }
.stk-cell.owned { box-shadow: 0 0 0 1px var(--tc) inset, 0 4px 14px rgba(0,0,0,.25); }
.stk-ic { font-size: 30px; line-height: 56px; position: relative; width: 56px; height: 56px; margin: 0 auto 5px; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), linear-gradient(150deg, var(--tc,#8a93a6), rgba(0,0,0,.4));
  box-shadow: inset 0 -3px 8px rgba(0,0,0,.35), 0 5px 14px -4px var(--tc,#8a93a6); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.stk-nm { font-size: 10.5px; margin-top: 5px; font-weight: 600; line-height: 1.15; position: relative; }
.stk-cost { font-size: 11px; margin-top: 4px; color: var(--tc,#8a93a6); font-weight: 700; position: relative; }
.stk-recv { display: flex; flex-wrap: wrap; gap: 8px; }
.stk-badge { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; border: none;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 44%), linear-gradient(150deg, var(--tc,#8a93a6), rgba(0,0,0,.4));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.35), 0 4px 12px -3px var(--tc); }
.stk-badge i { position: absolute; bottom: -4px; right: -4px; background: var(--tc,#8a93a6); color: #0b0712; font-size: 10px; font-weight: 800; font-style: normal; padding: 1px 5px; border-radius: 10px; }
.ar-prof-stk { position: absolute; bottom: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; background: #13121d; border: 2px solid var(--tc,#ffba00); box-shadow: 0 0 10px -1px var(--tc); z-index: 3; }
.dm-sticker { align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; }
.dm-sticker.me { align-self: flex-end; }
.dm-stk-ic { font-size: 46px; line-height: 1; }
.dm-sticker small { opacity: .7; font-size: 11px; }

/* WebRTC дуу/камер */
.rtc-fab { position: fixed; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: auto; width: 50px; height: 50px; border-radius: 50%; border: none; background: linear-gradient(135deg, #1fc77a, #0a9e63); color: #fff; font-size: 23px; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 8500; cursor: pointer; }
.rtc-fab.on { background: linear-gradient(135deg, #e2007d, #ff5a3c); animation: rtcPulse 1.6s infinite; }
@keyframes rtcPulse { 0%,100% { box-shadow: 0 6px 18px rgba(226,0,125,.5) } 50% { box-shadow: 0 6px 26px rgba(226,0,125,.9) } }
.rtc-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 8600; background: rgba(8,6,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; display: flex; align-items: center; gap: 10px; }
.rtc-strip { display: flex; gap: 8px; overflow-x: auto; flex: 1; }
.rtc-tile { position: relative; width: 66px; height: 66px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: #1a1726; border: 2px solid rgba(31,199,122,.7); }
.rtc-tile.muted { border-color: rgba(255,255,255,.18); }
.rtc-tile video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rtc-av { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rtc-nm { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; color: #fff; background: rgba(0,0,0,.55); text-align: center; padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-mic { position: absolute; top: 2px; right: 3px; font-size: 11px; }
.rtc-ctrls { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.rtc-status { font-size: 11px; font-weight: 600; color: var(--muted,#9a93b5); margin-right: 4px; white-space: nowrap; }
.rtc-mintgl { background: rgba(255,255,255,.12) !important; }
/* Нуусан (minimize) — баруун дээд буланд жижиг pill, видео/товч нуугдана, дуу үргэлжилнэ */
.rtc-bar.rtc-min { left: auto; right: 8px; width: auto; border: 1px solid rgba(255,255,255,.1); border-top: none; border-radius: 0 0 16px 16px; padding: 6px 10px; gap: 6px; }
.rtc-bar.rtc-min .rtc-strip, .rtc-bar.rtc-min #rtcMic, .rtc-bar.rtc-min #rtcCam, .rtc-bar.rtc-min #rtcLeave { display: none; }
.rtc-cbtn { width: 40px; height: 40px; border-radius: 50%; border: none; font-size: 18px; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; }
.rtc-cbtn.on { background: #1fc77a; } .rtc-cbtn.off { background: #e2552c; } .rtc-cbtn.leave { background: #e2007d; }