:root {
  --bg:#ECEEFB; --surface:#FFFFFF; --surface2:#F4F5FE; --ink:#151A45; --muted:#565C8C; --line:#D6D9F0;
  --accent:#5B4BE0; --accent-ink:#FFFFFF; --glow:#1D9FB2; --felt-off:#CDD1EC; --felt-on:#1D8FA3; --rail:#2A2F66;
  --lamp:#E2A92A; --danger:#D23F47; --on-felt:#FFFFFF; --stars:rgba(21,26,69,.22); --nebula:rgba(91,75,224,.12);
  --text:"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:"Montserrat", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0A0E2C; --surface:#141A45; --surface2:#1B2257; --ink:#E9EBFF; --muted:#A3A9DC; --line:#2A3170;
    --accent:#8C7CFF; --accent-ink:#0A0E2C; --glow:#5CE1E6; --felt-off:#1E2560; --felt-on:#169BAA; --rail:#3A418A;
    --lamp:#F5C542; --danger:#FF6B70; --stars:rgba(233,235,255,.6); --nebula:rgba(140,124,255,.18);
  }
}
:root[data-theme="dark"] {
  --bg:#0A0E2C; --surface:#141A45; --surface2:#1B2257; --ink:#E9EBFF; --muted:#A3A9DC; --line:#2A3170;
  --accent:#8C7CFF; --accent-ink:#0A0E2C; --glow:#5CE1E6; --felt-off:#1E2560; --felt-on:#169BAA; --rail:#3A418A;
  --lamp:#F5C542; --danger:#FF6B70; --stars:rgba(233,235,255,.6); --nebula:rgba(140,124,255,.18);
}
html { scroll-padding-top:env(safe-area-inset-top,0px); }
*, *::before, *::after { box-sizing:inherit; }
body { margin:0; color:var(--ink); font:16px/1.55 var(--text); padding-bottom:24px; background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 40% at 85% -5%, var(--nebula), transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 30%, var(--nebula), transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, var(--stars) 50%, transparent 55%),
    radial-gradient(1px 1px at 37% 72%, var(--stars) 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 68% 34%, var(--stars) 50%, transparent 55%),
    radial-gradient(1px 1px at 82% 81%, var(--stars) 50%, transparent 55%),
    radial-gradient(1px 1px at 55% 12%, var(--stars) 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 92% 55%, var(--stars) 50%, transparent 55%),
    radial-gradient(1px 1px at 24% 90%, var(--stars) 50%, transparent 55%);
  background-size:100% 100%, 100% 100%, 340px 340px, 280px 280px, 410px 410px, 300px 300px, 260px 260px, 380px 380px, 320px 320px;
  background-attachment:fixed; }
a { color:var(--accent); }
h1,h2,h3 { line-height:1.15; margin:0 0 10px; }
h1 { font:700 34px/1.1 var(--display); letter-spacing:-.01em; }
h2 { font:700 22px/1.2 var(--display); }
h3 { font:700 17px/1.3 var(--text); }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.num { font-family:var(--display); font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; }
.clock, .tile .st { font-variant-numeric:tabular-nums; }
h1, h2 { letter-spacing:0; font-weight:800; }
.big { font-size:40px; line-height:1; margin:8px 0; }
img { max-width:100%; }

.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:12px 18px; overflow-x:auto; }
.brand { font:700 20px var(--display); color:var(--ink); text-decoration:none; margin-right:auto; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.brand i { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #d9dcf5 60%, #9aa0d6); box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--accent); }
.top nav { display:flex; gap:16px; white-space:nowrap; }
.top nav a { color:var(--ink); text-decoration:none; padding:4px 2px; font-weight:600; }
.top nav a.on { box-shadow:inset 0 -2px 0 var(--accent); }
main { max-width:1100px; margin:0 auto; padding:24px 18px 40px; }
section { margin:0 0 40px; }

.btn { font:700 15px var(--text); padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer; text-align:center; text-decoration:none; display:inline-block; }
.btn:hover { border-color:var(--accent); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.danger { color:var(--danger); border-color:var(--danger); background:none; }
.btn.ghost { border-color:transparent; background:none; color:var(--muted); }
.btn.small { padding:7px 11px; font-size:14px; border-radius:9px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--glow); outline-offset:2px; }
.stack { display:grid; gap:8px; margin:12px 0; }
.opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin:12px 0; }
.opt { padding:14px 8px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; text-align:center; }
.opt b { display:block; font:700 18px var(--display); margin-bottom:2px; }
.opt:hover { border-color:var(--accent); }
input, select, textarea { font:inherit; color:var(--ink); background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%; }
label { display:grid; gap:4px; font-size:14px; color:var(--muted); }
.form { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); align-items:end; }
.row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.row:last-child { border-bottom:0; }
.row .grow { flex:1 1 220px; min-width:0; }
.pill { display:inline-block; font-size:13px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--felt-off); color:var(--ink); }
.pill.go { background:var(--felt-on); color:var(--on-felt); }
.pill.warn { background:var(--lamp); color:#241A02; }
.pill.bad { background:var(--danger); color:#fff; }
.scroll { overflow-x:auto; }
table.t { border-collapse:collapse; width:100%; min-width:420px; }
table.t th, table.t td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
table.t th { font-weight:600; color:var(--muted); font-size:14px; }
.tabs { display:flex; gap:6px; overflow-x:auto; margin:0 0 20px; padding-bottom:4px; }
.tabs a, .tabs button { white-space:nowrap; padding:8px 13px; border-radius:20px; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--surface); font:600 14px var(--text); cursor:pointer; }
.tabs a.on, .tabs button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.cols { display:grid; grid-template-columns:1fr 340px; gap:28px; }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:16px; }

/* Ширээ */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.tile { display:block; text-decoration:none; color:var(--ink); background:none; border:0; padding:0; font:inherit; text-align:left; cursor:pointer; }
.tile .rail { background:var(--rail); border-radius:14px; padding:7px; transition:box-shadow .5s; }
.tile .felt { background:var(--felt-off); border-radius:6px; aspect-ratio:2/1; display:grid; place-items:center; align-content:center; color:var(--ink); transition:background .5s; position:relative; }
.tile .felt::after { content:""; position:absolute; inset:-3px; pointer-events:none;
  background:radial-gradient(circle at 0 0,#05071a 4px,transparent 5px),radial-gradient(circle at 50% 0,#05071a 3px,transparent 4px),radial-gradient(circle at 100% 0,#05071a 4px,transparent 5px),
  radial-gradient(circle at 0 100%,#05071a 4px,transparent 5px),radial-gradient(circle at 50% 100%,#05071a 3px,transparent 4px),radial-gradient(circle at 100% 100%,#05071a 4px,transparent 5px); opacity:.8; }
.tile.lit .rail { box-shadow:0 0 0 1px var(--glow), 0 0 28px -4px var(--glow); }
.tile.lit .felt { background:var(--felt-on); color:var(--on-felt); }
.tile.warn .rail { animation:flick 1.2s steps(2) infinite; }
@keyframes flick { 50% { box-shadow:none; } }
.tile .no { font:700 28px/1 var(--display); }
.tile .st { font:700 15px var(--display); margin-top:4px; }
.tile .meta { display:flex; justify-content:space-between; font-size:14px; padding:7px 2px 0; color:var(--muted); }
.strip { display:flex; gap:5px; flex-wrap:wrap; }
.strip i { width:22px; height:12px; border-radius:3px; background:var(--felt-off); border:2px solid var(--rail); }
.strip i.on { background:var(--felt-on); box-shadow:0 0 10px -1px var(--glow); }

.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:8px 0 16px; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } .hero .orbit { max-width:260px; justify-self:center; order:-1; } }
.hero h1 { font-size:clamp(40px,7vw,72px); line-height:1; margin-bottom:14px; }
.hero p { font-size:18px; max-width:44ch; }
.orbit { width:100%; height:auto; overflow:visible; }
.orbit .ring { fill:none; stroke:var(--line); stroke-width:1; }
.orbit .o1, .orbit .o2, .orbit .o3 { transform-origin:160px 160px; animation:spin 60s linear infinite; }
.orbit .o2 { animation-duration:38s; animation-direction:reverse; }
.orbit .o3 { animation-duration:22s; }
.orbit text { font:700 7px var(--text); text-anchor:middle; dominant-baseline:central; fill:#111; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit g, .tile.warn .rail { animation:none !important; } }
.clock { font:700 64px/1 var(--display); letter-spacing:-.02em; }
.lampline { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; }
.lampline i { width:12px; height:12px; border-radius:50%; background:var(--felt-off); }
.lampline i.on { background:var(--glow); box-shadow:0 0 12px var(--glow); }

/* Тамирчид */
.people { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.person { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.ball { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; position:relative; flex:none;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), transparent 35%), var(--c, var(--accent)); }
.ball b { width:28px; height:28px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font:700 12px var(--text); }
.person ul { margin:0; padding-left:18px; color:var(--muted); font-size:14px; }

/* Bracket */
.bracket { display:flex; gap:24px; overflow-x:auto; padding-bottom:8px; }
.round { display:flex; flex-direction:column; justify-content:space-around; gap:12px; min-width:170px; }
.round h3 { font-size:14px; color:var(--muted); }
.match { border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; }
.match button, .match div { display:block; width:100%; text-align:left; padding:7px 10px; border:0; background:none; color:var(--ink); font:inherit; }
.match button { cursor:pointer; }
.match button:hover { background:var(--surface2); }
.match > :first-child { border-bottom:1px solid var(--line); }
.match .w { font-weight:700; color:var(--glow); }
.match .empty { color:var(--muted); }

/* Modal */
#modal.on { position:fixed; inset:0; z-index:20; }
.overlay { position:fixed; inset:0; background:rgba(5,7,26,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.sheet { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:20px; width:min(460px,100%); max-height:90vh; overflow:auto; padding:22px; }
@media (max-width:600px) { .overlay { align-items:flex-end; padding:0; } .sheet { border-radius:20px 20px 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); } }
.qr { display:grid; place-items:center; padding:12px; background:#fff; border-radius:12px; margin:10px 0; min-height:60px; }
.qr img, .qr canvas { display:block; }
.qty { display:flex; align-items:center; gap:8px; }
.qty button { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface2); color:var(--ink); font:700 18px var(--text); cursor:pointer; }

#toast { position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:12px; z-index:30; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; font-weight:600; }
#toast.on { opacity:1; }

.demo-toggle { position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:11; background:var(--ink); color:var(--bg); border:0; border-radius:20px; padding:8px 14px; font:700 13px var(--text); cursor:pointer; }
.demobar { position:fixed; left:0; right:0; bottom:0; z-index:10; background:var(--ink); color:var(--bg); display:none; gap:6px; align-items:center;
  padding:8px 90px calc(8px + env(safe-area-inset-bottom,0px)) 10px; overflow-x:auto; white-space:nowrap; font-size:14px; }
body.demo-open .demobar { display:flex; }
body.demo-open { padding-bottom:64px; }
.demobar a, .demobar button { color:var(--bg); background:none; border:1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius:8px; padding:5px 9px; font:inherit; cursor:pointer; text-decoration:none; }
.demobar span { opacity:.75; margin-right:4px; }

.qrsheet { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.qrcard { border:1px dashed var(--line); border-radius:12px; padding:12px; text-align:center; background:var(--surface); }
@media print {
  .top, .demobar, .demo-toggle, .tabs, .noprint { display:none !important; }
  body { padding:0; background:#fff; color:#000; }
  .qrcard { break-inside:avoid; border-color:#999; }
}

/* ===== v2: биллиард + сансар ===== */
:root { --wood:#5A3E2B; --wood2:#3F2B1E; --cloth-off:#3F5A88; --diamond:#E8D9B0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wood:#4E3626; --wood2:#2E1F15; --cloth-off:#1B2E5C; } }
:root[data-theme="dark"] { --wood:#4E3626; --wood2:#2E1F15; --cloth-off:#1B2E5C; }

body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(1.8px 1.8px at 16% 24%, var(--stars) 50%, transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 14%, var(--stars) 50%, transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 62%, var(--stars) 50%, transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 86%, var(--stars) 50%, transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 70%, var(--stars) 50%, transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 44%, var(--stars) 50%, transparent 60%);
  animation:twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:.2; } to { opacity:1; } }

.btn, .opt, .tile .rail, .bcard { transition:transform .12s ease, border-color .2s, box-shadow .3s; }
.btn:active, .opt:active { transform:scale(.97); }
.tile:active .rail { transform:scale(.985); }

/* Гариг */
.planet { --s:120px; width:var(--s); height:var(--s); border-radius:50%; position:relative; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.7), transparent 30%), radial-gradient(circle at 72% 78%, rgba(0,0,0,.38), transparent 58%), var(--c);
  box-shadow:0 0 calc(var(--s) * .35) calc(var(--s) * -.08) var(--c); }
.planet b { width:44%; height:44%; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font:700 calc(var(--s) * .17) var(--display); position:relative; z-index:1; }
.planet::before { content:""; position:absolute; left:-24%; right:-24%; top:41%; height:18%; border:2px solid color-mix(in srgb, var(--c) 70%, #fff); border-radius:50%;
  transform:rotate(-16deg); opacity:.75; }
.planet.sm { --s:28px; box-shadow:none; }
.planet.sm::before { display:none; }

/* Салбар сонгох карусель */
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.car-nav { display:flex; gap:8px; }
.car-nav button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.car-nav svg { width:18px; height:18px; }
.bcar { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:28px 18px 10px; margin:0 -18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.bcar::-webkit-scrollbar { display:none; }
.bcard { flex:0 0 min(80%, 330px); scroll-snap-align:center; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:24px; padding:20px;
  background:radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 62%), var(--surface); display:grid; gap:14px; }
.bcard:hover { border-color:var(--c); transform:translateY(-3px); }
.bcard .planet { margin-top:-44px; }
.bcard .free-n { display:flex; align-items:baseline; gap:6px; }
.bcard .free-n .num { font-size:34px; color:var(--ink); }
.bcard .go { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--c); }
.dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.dots i { width:8px; height:8px; border-radius:4px; background:var(--line); transition:width .3s, background .3s; }
.dots i.on { width:22px; background:var(--accent); }

.bswitch { display:flex; gap:8px; overflow-x:auto; margin:0 -18px 18px; padding:2px 18px 6px; scrollbar-width:none; }
.bswitch::-webkit-scrollbar { display:none; }
.bswitch a { display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:30px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; white-space:nowrap; font-weight:600; }
.bswitch a.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.bhead { display:flex; align-items:center; gap:18px; margin-bottom:16px; }

/* Биллиардын ширээ */
.tile .lamp { height:5px; width:48%; margin:0 auto 9px; border-radius:4px; background:var(--line); transition:background .6s, box-shadow .6s; }
.tile.lit .lamp { background:var(--lamp); box-shadow:0 8px 26px 6px color-mix(in srgb, var(--lamp) 40%, transparent); }
.tile.warn .lamp { animation:flick 1.1s steps(2) infinite; }
.tile.warn .rail { animation:none; }
@keyframes flick { 50% { background:var(--line); box-shadow:none; } }
.tile .rail { position:relative; padding:9px; border-radius:14px;
  background:
    radial-gradient(circle at 25% 4px, var(--diamond) 1.4px, transparent 1.9px), radial-gradient(circle at 50% 4px, var(--diamond) 1.4px, transparent 1.9px), radial-gradient(circle at 75% 4px, var(--diamond) 1.4px, transparent 1.9px),
    radial-gradient(circle at 25% calc(100% - 4px), var(--diamond) 1.4px, transparent 1.9px), radial-gradient(circle at 50% calc(100% - 4px), var(--diamond) 1.4px, transparent 1.9px), radial-gradient(circle at 75% calc(100% - 4px), var(--diamond) 1.4px, transparent 1.9px),
    linear-gradient(160deg, var(--wood), var(--wood2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.tile.lit .rail { box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 30px -8px var(--glow); }
.tile .felt { background:var(--cloth-off); color:#E9EBFF; overflow:visible; }
.tile .felt::before { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .8s ease;
  background:radial-gradient(ellipse 70% 85% at 50% 45%, rgba(255,255,255,.3), transparent 70%), var(--felt-on); }
.tile.lit .felt::before { opacity:1; }
.tile.lit .felt { background:var(--cloth-off); }
.tile .felt > * { position:relative; z-index:1; }
.tile .rack { position:absolute; inset:0; z-index:0; opacity:.9;
  background:
    radial-gradient(circle at 26% 50%, #F4F2EA 3px, transparent 3.5px),
    radial-gradient(circle at 70% 50%, #F5C542 2.8px, transparent 3.3px),
    radial-gradient(circle at calc(70% + 5px) calc(50% - 3px), #2F6BD8 2.8px, transparent 3.3px),
    radial-gradient(circle at calc(70% + 5px) calc(50% + 3px), #E5484D 2.8px, transparent 3.3px),
    radial-gradient(circle at calc(70% + 10px) calc(50% - 6px), #7B61FF 2.8px, transparent 3.3px),
    radial-gradient(circle at calc(70% + 10px) 50%, #111 2.8px, transparent 3.3px),
    radial-gradient(circle at calc(70% + 10px) calc(50% + 6px), #F08A24 2.8px, transparent 3.3px); }
.tile .no { opacity:.95; }
.tile:not(.lit) .no { font-size:22px; opacity:.55; }
.tile:not(.lit) .st { opacity:.9; }
.tile .prog { height:4px; border-radius:2px; background:var(--line); margin:9px 3px 0; overflow:hidden; }
.tile .prog i { display:block; height:100%; background:var(--glow); transition:width 1s linear; }
.tile.warn .prog i { background:var(--lamp); }
.tile.big { max-width:520px; margin:6px auto 16px; cursor:default; }
.tile.big .felt { aspect-ratio:2/1; }
.tile.big .no { font-size:40px; }
.tile.big.lit .st { display:none; }
.tile.big:not(.lit) .no { font-size:34px; }
.tile.big .rack { background-size:auto; transform:scale(1.6); transform-origin:center; }
.strip i { background:var(--cloth-off); border-color:var(--wood); }

/* Шилжилт */
.enter > * { animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
.enter > *:nth-child(2) { animation-delay:.06s; } .enter > *:nth-child(3) { animation-delay:.12s; }
.enter > *:nth-child(4) { animation-delay:.18s; } .enter > *:nth-child(5) { animation-delay:.24s; } .enter > *:nth-child(n+6) { animation-delay:.3s; }
.enter .tiles > * { animation:rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 35ms + .15s); }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.overlay { animation:fadein .2s ease both; }
.sheet { animation:sheetup .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadein { from { opacity:0; } }
@keyframes sheetup { from { opacity:0; transform:translateY(28px) scale(.98); } }
::view-transition-old(root) { animation:.18s ease both fadeout; }
::view-transition-new(root) { animation:.28s ease both fadein; }
@keyframes fadeout { to { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ===== v3: биллиард илүү тод, сансрын нисгэгч ===== */
:root { --felt-on:#1F9D5A; --cloth-off:#3F6B57; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --felt-on:#22A862; --cloth-off:#1C3A2D; } }
:root[data-theme="dark"] { --felt-on:#22A862; --cloth-off:#1C3A2D; }
.tile.lit .rail { box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 34px -6px color-mix(in srgb, var(--felt-on) 80%, transparent); }
.strip i.on { box-shadow:0 0 10px -1px var(--felt-on); }

#space { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
#space .galaxy { position:absolute; width:80vmax; height:80vmax; right:-28vmax; top:-34vmax; border-radius:50%; transform:rotate(-22deg) scaleY(.42);
  background:radial-gradient(circle, rgba(255,244,225,.55) 0 1.2%, rgba(255,214,170,.25) 3%, rgba(140,124,255,.28) 10%, rgba(92,225,230,.10) 26%, transparent 56%); }
#space .galaxy.g2 { right:auto; left:-36vmax; top:auto; bottom:-40vmax; transform:rotate(28deg) scaleY(.5);
  background:radial-gradient(circle, rgba(255,200,220,.25) 0 2%, rgba(229,72,77,.14) 12%, rgba(123,97,255,.10) 30%, transparent 58%); }
:root[data-theme="light"] #space .galaxy { opacity:.55; }
.fball { position:absolute; width:var(--s); height:var(--s); border-radius:50%; display:grid; place-items:center; opacity:var(--o);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), transparent 34%), radial-gradient(circle at 70% 76%, rgba(0,0,0,.35), transparent 60%), var(--c);
  animation:drift var(--d) ease-in-out infinite alternate; }
.fball.st { background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), transparent 34%), radial-gradient(circle at 70% 76%, rgba(0,0,0,.3), transparent 60%),
  linear-gradient(180deg, #F4F2EA 0 27%, var(--c) 27% 73%, #F4F2EA 73%); }
.fball b { width:46%; height:46%; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font:700 calc(var(--s) * .2) var(--text); }
@keyframes drift { to { transform:translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.bg-astro { position:absolute; width:90px; right:4%; bottom:10%; opacity:.38; animation:astrofly 38s ease-in-out infinite alternate; }
@keyframes astrofly { 0% { transform:translate(0,0) rotate(-8deg); } 50% { transform:translate(-30vw,-18vh) rotate(14deg); } 100% { transform:translate(-62vw,-4vh) rotate(-4deg); } }
body.staff .fball, body.staff .bg-astro { display:none; }
@media (max-width:600px) { .bg-astro { width:80px; } }

.scene { width:100%; height:auto; overflow:visible; }
.scene text { font:700 6px var(--text); text-anchor:middle; dominant-baseline:central; fill:#111; }
.scene .bob { animation:bob 6s ease-in-out infinite alternate; }
.scene .f1 { animation:fl 7s ease-in-out infinite alternate; }
.scene .f2 { animation:fl 9s ease-in-out infinite alternate-reverse; }
.scene .f3 { animation:fl 11s ease-in-out infinite alternate; }
@keyframes bob { to { transform:translateY(-9px); } }
@keyframes fl { to { transform:translate(6px, -12px); } }

.eight { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 36%), #111; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.eight b { width:12px; height:12px; border-radius:50%; background:#fff; color:#111; font:700 8px/12px var(--text); text-align:center; }
main h2::before { content:""; display:inline-block; width:15px; height:15px; border-radius:50%; margin-right:10px; vertical-align:-1px;
  background:radial-gradient(circle at 50% 50%, #fff 0 3.2px, transparent 3.6px), radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 40%), #111;
  box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.theme-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none; }
.theme-btn svg { width:18px; height:18px; }
.top .theme-btn { position:sticky; right:0; box-shadow:-12px 0 12px -4px var(--bg); }
@media (max-width:760px) { .hero .scene { order:-1; max-width:440px; justify-self:center; margin:-8px 0 -6px; } }

.ladder { display:flex; align-items:center; gap:0; overflow-x:auto; padding:10px 2px 6px; }
.ladder .step { display:grid; justify-items:center; gap:8px; text-align:center; font-weight:600; font-size:14px; flex:none; width:96px; }
.ladder i { flex:1 0 24px; height:2px; background:linear-gradient(90deg, var(--line), var(--accent), var(--line)); margin-bottom:28px; }
.cert { max-width:640px; margin:10px auto; padding:10px; border-radius:20px; background:linear-gradient(135deg, #F5C542, #7B61FF, #22A862); }
.cert-in { background:var(--surface); border-radius:14px; padding:34px 24px; text-align:center; }
.tile.t-vip1 .rail, .tile.t-vip2 .rail { box-shadow:inset 0 0 0 2px #E2B04A, inset 0 1px 0 rgba(255,255,255,.12); }
.tile.t-vip1.lit .rail, .tile.t-vip2.lit .rail { box-shadow:inset 0 0 0 2px #E2B04A, 0 0 34px -6px color-mix(in srgb, #E2B04A 80%, transparent); }
.tile.t-tennis .felt { background:#1C3D6E; }
.tile.t-tennis .felt::before { background:radial-gradient(ellipse 70% 85% at 50% 45%, rgba(255,255,255,.3), transparent 70%), #2C6FD1; }
.tile.t-tennis .felt::after { inset:0; opacity:.85; background:linear-gradient(90deg, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
  linear-gradient(0deg, transparent calc(50% - .5px), rgba(255,255,255,.6) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.tile.t-tennis .rail { background:linear-gradient(160deg, #3A4A66, #232E44); }
@media print { .cert { background:#ccc; } }

/* ===== Жинхэнэ системийн нэмэлт ===== */
.banks { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin:12px 0; }
.banks a { display:grid; justify-items:center; gap:4px; padding:8px 4px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); font-size:12px; text-align:center; background:var(--surface2); }
.banks img { width:40px; height:40px; border-radius:10px; object-fit:cover; }
.waiting { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; }
.waiting i { width:10px; height:10px; border-radius:50%; background:var(--glow); animation:pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity:.25; } }
.note-ack { border-left:4px solid var(--lamp); padding-left:10px; }
.thumb { width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--surface2); border:1px solid var(--line); }
.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.err { color:var(--danger); min-height:1.2em; font-size:14px; }
.empty-state { color:var(--muted); padding:20px 0; }
.chk { display:flex; gap:8px; align-items:center; color:var(--ink); }
.chk input { width:auto; }
.right { text-align:right; }
.loading { opacity:.6; pointer-events:none; }
.brand img { height:28px; width:auto; }

/* ===== 3D ширээ ===== */
.hero3d { position:relative; width:100%; aspect-ratio:4 / 3; }
.hero3d > .orbit { position:absolute; inset:0; margin:auto; max-height:100%; }
.hero3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y; border-radius:24px; }
.hero3d canvas:active { cursor:grabbing; }
.hero3d.on3d > svg { display:none; }
.hero3d-btn { position:absolute; right:12px; bottom:12px; display:none; }
.hero3d.on3d .hero3d-btn { display:inline-flex; }
@media (max-width:760px) { .hero3d { order:-1; aspect-ratio:4 / 5; margin:0 -16px; width:calc(100% + 32px); } .hero3d canvas { border-radius:0; } }
body.has3d .bg-astro { display:none; }

/* ===== Дартс ===== */
.tile.t-darts .rail { background:linear-gradient(160deg, #3A2A20, #22170F); }
.tile.t-darts .felt { background:#17141F; }
.tile.t-darts .felt::before { background:radial-gradient(circle at 50% 50%, rgba(255,226,168,.35), transparent 62%), #241E2E; }
.tile.t-darts .felt::after { content:""; position:absolute; left:50%; top:50%; height:88%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:
    radial-gradient(circle, #E5484D 0 5%, #1FA36A 5% 10%, transparent 10.5%),
    radial-gradient(circle, transparent 0 46%, rgba(229,72,77,.95) 46% 52%, transparent 52% 80%, rgba(31,163,106,.95) 80% 86%, transparent 86%),
    repeating-conic-gradient(from 9deg, #151515 0 18deg, #EFE3C2 18deg 36deg);
  box-shadow:0 0 0 3px #111, 0 0 0 5px #3A2A20; filter:brightness(.55) saturate(.7); transition:filter .6s ease; z-index:0; }
.tile.lit.t-darts .felt::after { filter:none; }
.tile.t-darts .felt .no, .tile.t-darts .felt .st { text-shadow:0 1px 3px #000, 0 0 8px #000; }
.tile.t-darts .felt .no { font-size:16px; }

body.has3d .fball { display:none; }
.credit3d { position:absolute; left:12px; bottom:10px; font-size:10px; color:var(--muted); opacity:.7; display:none; }
.hero3d.on3d .credit3d { display:block; }

.btn.fb { background:#1877F2; color:#fff; border-color:#1877F2; display:inline-flex; gap:8px; align-items:center; justify-content:center; text-decoration:none; }
.btn.fb:hover { background:#166FE5; }