/* Том дэлгэц / TV dashboard — vh дээр суурилсан хэмжээ, гүйлгэхгүй */
.db-body{overflow:hidden;font-size:1.9vh}
.db{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);overflow:hidden}
.db-head{display:flex;align-items:center;gap:2vw;padding:1.4vh 2.4vw;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15))}
.db-logo{height:6.2vh}
.db-body .badge{font-size:1.4vh;padding:.4vh 1vh}
.db-body .av{overflow:hidden;letter-spacing:-.03em}
.db-mid{flex:1;min-width:0;text-align:center}
.db-title{font:900 2.6vh var(--fh);letter-spacing:.14em;text-transform:uppercase}
.db-phase{color:var(--mut);font-weight:600;font-size:1.8vh;margin-top:.3vh}
.db-right{display:flex;align-items:center;gap:1.6vw}
.db-live{display:inline-flex;align-items:center;gap:.8vh;background:rgba(255,43,85,.16);color:#ff6d8a;font:800 1.9vh var(--fh);padding:.7vh 1.4vh;border-radius:99px;letter-spacing:.06em}
.db-live[hidden]{display:none}
.db-live::before{content:"";width:1.1vh;height:1.1vh;border-radius:50%;background:var(--live);animation:pulse 1.2s infinite}
.db-clock{text-align:right;line-height:1.1}
.db-clock b{display:block;font:800 3.6vh var(--fh);font-variant-numeric:tabular-nums}
.db-clock span{color:var(--mut);font-size:1.5vh}
.db-btn{background:var(--panel2);border:1px solid var(--line2);color:#fff;border-radius:1vh;width:4.4vh;height:4.4vh;font-size:2.2vh;cursor:pointer;opacity:.5}
.db-btn:hover{opacity:1}

.db-stage{position:relative;overflow:hidden}
.slide{position:absolute;inset:2.4vh 2.4vw 1.6vh;display:flex;flex-direction:column;opacity:0;transform:translateX(3vw);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.out{opacity:0;transform:translateX(-3vw)}
.sh{display:flex;align-items:center;gap:1.4vw;margin-bottom:2vh}
.sh h2{font:900 4.2vh var(--fh);margin:0;letter-spacing:-.01em;text-transform:uppercase}
.sh .pg{margin-left:auto;color:var(--mut);font-weight:700;font-size:1.8vh}
.sh .zc{display:inline-grid;place-items:center;width:5.4vh;height:5.4vh;border-radius:1.2vh;font:900 3vh var(--fh);color:#111;background:var(--zc)}
.sbody{flex:1;min-height:0}

/* Live cards */
.lgrid{display:grid;gap:2vh;height:100%}
.lgrid.n1{grid-template-columns:1fr}
.lgrid.n2{grid-template-columns:1fr 1fr}
.lgrid.n3,.lgrid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.lc{min-width:0;min-height:0;background:var(--panel);border:1px solid rgba(255,43,85,.4);border-radius:2vh;padding:2.4vh 2.2vw;display:flex;flex-direction:column;justify-content:center;gap:1.2vh;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,43,85,.15),0 2vh 6vh -3vh rgba(255,43,85,.45)}
.lc.pend{border-color:var(--line)}
.lc::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 100% 0,rgba(255,106,42,.10),transparent 70%);pointer-events:none}
.lc-top{display:flex;align-items:center;gap:1vw;color:var(--mut);font-weight:700;font-size:1.9vh}
.lc-top .zc{display:inline-grid;place-items:center;min-width:3.4vh;height:3.4vh;border-radius:.8vh;font:900 1.9vh var(--fh);color:#111;background:var(--zc)}
.lc-top .bo{border:1px solid var(--line2);border-radius:99px;padding:.2vh 1vh;color:#fff}
.lc-top .sp{flex:1}
.lteam{display:flex;align-items:center;gap:1.4vw}
.lteam .av{width:7vh;height:7vh;flex-basis:7vh;border-radius:1.6vh;font-size:2vh}
.lteam .nm{flex:1;min-width:0;font:800 3.6vh var(--fh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lteam .sc{font:900 7.2vh var(--fh);min-width:8vh;text-align:right;font-variant-numeric:tabular-nums;line-height:1}
.lteam.lead .sc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lteam.lose{opacity:.5}
.lgrid.n3 .lteam .nm,.lgrid.n4 .lteam .nm{font-size:2.8vh}
.lgrid.n3 .lteam .sc,.lgrid.n4 .lteam .sc{font-size:5.4vh}
.lgrid.n3 .lteam .av,.lgrid.n4 .lteam .av{width:5.4vh;height:5.4vh;flex-basis:5.4vh}
.lmaps{display:flex;gap:.8vw;flex-wrap:wrap;margin-top:.6vh}
.lmaps span{background:var(--panel2);border-radius:.8vh;padding:.5vh 1.1vh;font-weight:700;font-size:1.8vh;color:var(--mut)}
.lmaps span.cur{color:#fff;outline:2px solid rgba(255,43,85,.6)}
.lmaps span.w1,.lmaps span.w2{color:#fff}
.lsub{color:var(--mut);font-size:1.7vh}

/* Rows (жагсаалт) */
.rows{display:flex;flex-direction:column;gap:.9vh}
.r{display:grid;grid-template-columns:9vw 5vh 1fr 11vw 1fr 15vw;align-items:center;gap:1.2vw;height:6.4vh;padding:0 1.4vw;background:var(--panel);border:1px solid var(--line);border-radius:1.2vh;font-size:2.1vh}
.r .t{font-weight:800;color:var(--g3);font-variant-numeric:tabular-nums}
.r .zc{display:inline-grid;place-items:center;width:3.6vh;height:3.6vh;border-radius:.8vh;font:900 1.9vh var(--fh);color:#111;background:var(--zc)}
.r .zc.po{background:var(--grad)}
.r .a{text-align:right;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .w{color:#fff}.r .l{color:var(--mut2)}
.r .s{text-align:center;font:900 3vh var(--fh);font-variant-numeric:tabular-nums}
.r .s small{font-size:1.5vh;color:var(--mut);font-weight:700;display:block;margin-top:-.4vh}
.r .c{color:var(--mut);font-size:1.7vh;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r.live{border-color:rgba(255,43,85,.45)}
.tbd{color:var(--mut2)!important;font-style:italic;font-weight:500!important}

/* Zones */
.zgrid{display:grid;gap:2vh 2vw;height:100%}
.zgrid.two{grid-template-columns:1fr 1fr}
.zp{background:var(--panel);border:1px solid var(--line);border-radius:2vh;padding:2vh 1.6vw;display:flex;flex-direction:column;min-height:0;border-top:.5vh solid var(--zc)}
.zp-h{display:flex;align-items:center;gap:1vw;margin-bottom:1.4vh}
.zp-h .zc{display:inline-grid;place-items:center;width:4.4vh;height:4.4vh;border-radius:1vh;font:900 2.4vh var(--fh);color:#111;background:var(--zc)}
.zp-h h3{margin:0;font:900 2.8vh var(--fh);text-transform:uppercase}
.zp-h .st{margin-left:auto;color:var(--mut);font-weight:700;font-size:1.7vh}
.zp-sub{font-size:1.5vh;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:800;margin:1vh 0 .8vh}
.st-t{width:100%;border-collapse:collapse}
.st-t td,.st-t th{padding:.75vh .6vw;font-size:2vh;border-bottom:1px solid var(--line)}
.st-t th{font-size:1.4vh;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;text-align:center}
.st-t th:nth-child(2){text-align:left}
.st-t td{text-align:center;font-variant-numeric:tabular-nums}
.st-t td.n{text-align:left;font-weight:700;max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:55%}
.st-t tr.q td{background:linear-gradient(90deg,rgba(255,106,42,.16),transparent 70%)}
.st-t tr.q td:first-child{box-shadow:inset .4vh 0 0 var(--zc)}
.st-t tr:last-child td{border-bottom:0}
.ko{display:grid;grid-template-columns:1fr 1fr;gap:.8vh 1vw}
.ko div{display:grid;grid-template-columns:1fr auto 1fr;gap:.6vw;align-items:center;background:var(--panel2);border-radius:.9vh;padding:.7vh .8vw;font-size:1.75vh}
.ko .x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ko .x:last-child{text-align:right}
.ko .v{font:800 1.8vh var(--fh);color:var(--mut)}
.ko .w{color:#fff;font-weight:800}.ko .l{color:var(--mut2);text-decoration:line-through}
.ko .lv{outline:1px solid rgba(255,43,85,.6)}

/* Bracket */
.br{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3vw;height:100%}
.bc{display:flex;flex-direction:column;justify-content:space-around;gap:1.6vh}
.bc h4{text-align:center;font:800 1.6vh var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0}
.bm{background:var(--panel);border:1px solid var(--line);border-radius:1.4vh;padding:1.2vh 1vw;position:relative}
.bm.live{border-color:rgba(255,43,85,.55)}
.bm.fin{border-color:rgba(255,197,58,.6);background:linear-gradient(160deg,rgba(255,197,58,.12),rgba(255,106,42,.04))}
.bm .hd{display:flex;justify-content:space-between;font-size:1.4vh;color:var(--mut);font-weight:700;margin-bottom:.4vh}
.bm .tm{display:flex;align-items:center;gap:.8vw;padding:.45vh 0}
.bm .tm .nm{flex:1;min-width:0;font-weight:800;font-size:2.1vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm .tm .s{font:900 2.6vh var(--fh);min-width:3vh;text-align:right}
.bm .tm.w .s{color:var(--g3)} .bm .tm.l{opacity:.45}
.bm .tm .av{width:3.4vh;height:3.4vh;flex-basis:3.4vh;font-size:1.2vh;border-radius:.7vh}
.bc:not(:last-child) .bm::after{content:"";position:absolute;right:-1.5vw;top:50%;width:1.5vw;height:1px;background:var(--line2)}
.blabel{font:800 1.6vh var(--fh);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6vh}

/* Podium */
.pod{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;gap:2vw;height:100%;padding:0 4vw 2vh}
.pod .p{text-align:center;border-radius:2vh 2vh 0 0;padding:3vh 1vw;background:var(--panel);border:1px solid var(--line2)}
.pod .p .md{font-size:7vh;line-height:1}
.pod .p b{display:block;font:900 4vh var(--fh);margin:1.4vh 0 .6vh}
.pod .p span{color:var(--mut);font-weight:700;font-size:2vh;text-transform:uppercase;letter-spacing:.1em}
.pod .g{height:78%;border-color:#ffc53a;background:linear-gradient(180deg,rgba(255,197,58,.2),rgba(255,106,42,.04))}
.pod .g b{font-size:5.4vh}
.pod .s{height:62%} .pod .b{height:50%}

.empty-db{height:100%;display:grid;place-items:center;text-align:center;color:var(--mut);font-size:2.6vh}
.empty-db b{display:block;font:900 5vh var(--fh);color:#fff;margin-bottom:1vh}

/* Footer */
.db-foot{display:flex;align-items:center;gap:2vw;padding:1.2vh 2.4vw;border-top:1px solid var(--line);background:rgba(0,0,0,.4)}
.db-dots{display:flex;gap:.6vw;flex:0 0 auto}
.db-dots button{position:relative;overflow:hidden;background:var(--panel2);border:0;color:var(--mut);font:700 1.5vh var(--fb);padding:.7vh 1.1vw;border-radius:.8vh;cursor:pointer;white-space:nowrap}
.db-dots button.on{color:#fff}
.db-dots button i{position:absolute;left:0;bottom:0;height:.35vh;width:0;background:var(--grad)}
.db-dots button.on i{animation:fill linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.db-ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.db-ticker-in{display:inline-block;padding-left:100%;animation:tick 60s linear infinite;font-size:1.8vh;color:var(--mut)}
.db-ticker-in b{color:#fff}
.db-ticker-in em{font-style:normal;color:var(--g3);font-weight:800;margin:0 .4vw}
.db-ticker-in .sep{margin:0 1.6vw;color:var(--g2)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.db-offline{position:fixed;right:2vw;bottom:8vh;background:rgba(255,77,106,.9);color:#fff;padding:1vh 1.6vw;border-radius:1vh;font-weight:700;font-size:1.8vh}
.paused .db-dots button.on i{animation-play-state:paused}

@media (max-aspect-ratio:4/3){
  .zgrid.two{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .lgrid.n2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .r{grid-template-columns:12vw 4vh 1fr 14vw 1fr}
  .r .c{display:none}
  .br{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}