:root {
  --bg: #0b0d12; --fg: #eef0f4; --mut: #8a93a3; --dim: #5b6372; --line: rgba(255,255,255,.08);
  --warn: #f87171; --k: 1;
  --font: 'Inter', 'IBM Plex Sans Thai', system-ui, sans-serif;
}
html.light { --bg: #f7f7f5; --fg: #15171c; --mut: #6b7280; --dim: #9aa1ad; --line: rgba(0,0,0,.08); --warn: #dc2626; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
body.mobile { overflow: auto; }
body.idle { cursor: none; }

#app { height: 100vh; display: flex; flex-direction: column; padding: calc(var(--k) * 3.2vh) calc(var(--k) * 3.2vw) calc(var(--k) * 2vh); transition: opacity .4s; }
#app.loading { opacity: 0; }

/* ---------- header ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; padding-bottom: calc(var(--k) * 2.6vh); }
.event { font-size: calc(var(--k) * .82vw); letter-spacing: .28em; text-transform: uppercase; color: var(--mut); font-weight: 500; margin-bottom: .5em; }
h1 { font-size: calc(var(--k) * 2.35vw); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.clock { font-size: calc(var(--k) * 1.3vw); font-weight: 300; color: var(--mut); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .6em; }
.dot { width: .45em; height: .45em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2.4s infinite; }
.dot.off { background: var(--warn); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 .6em rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ---------- board (TV / landscape) ---------- */
.board { flex: 1; display: grid; grid-auto-rows: auto; align-content: start; min-height: 0; overflow: hidden; }
.row { display: grid; grid-template-columns: var(--cols); column-gap: calc(var(--k) * 2.4vw); border-top: 1px solid var(--line); padding: calc(var(--k) * 1.55vh) 0; align-items: start; }
.row.head { border-top: 0; padding: 0 0 calc(var(--k) * 1.2vh); align-items: end; }
.row:last-child { border-bottom: 1px solid var(--line); }
.hcell { font-size: calc(var(--k) * .9vw); color: var(--mut); font-weight: 400; display: flex; align-items: center; gap: .6em; }
.hcell .gd { width: .55em; height: .55em; border-radius: 50%; background: var(--c); }
.chip { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .55em; color: #fff; font-weight: 700; letter-spacing: 0; font-size: 1.05em; }

.tier .amt { font-size: calc(var(--k) * 1.75vw); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier .unit { font-size: calc(var(--k) * .9vw); color: var(--mut); font-weight: 400; margin-top: .25em; }
.tier .tname { font-size: calc(var(--k) * .7vw); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: .45em; font-weight: 500; }

.cell { min-width: 0; }
.it { font-size: calc(var(--k) * 1.18vw); font-weight: 500; line-height: 1.28; overflow-wrap: anywhere; padding: .12em 0 .12em .8em; position: relative; }
.it::before { content: ''; position: absolute; left: 0; top: .52em; width: .32em; height: .32em; border-radius: 50%; background: var(--c); }
.it + .it { margin-top: .32em; }
.nw { white-space: nowrap; }
.it .n { color: var(--mut); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it .x { color: var(--c); font-weight: 600; }
.it.out { color: var(--warn); font-weight: 400; }
.it.flash .n { color: var(--fg); transition: color 0s; }
.it .n { transition: color 1.6s; }
.next { font-size: calc(var(--k) * .6vw); color: var(--dim); line-height: 1.35; letter-spacing: .01em; overflow-wrap: anywhere; }
.next .nn { white-space: nowrap; }
.row.nextrow { border-bottom: 0 !important; align-items: baseline; padding-top: calc(var(--k) * 1.2vh); }
.row.nextrow .hcell { font-size: calc(var(--k) * .6vw); color: var(--dim); }
.row.nextrow .next { padding-left: calc(var(--k) * 1.18vw * .8); }
.next b { font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.none { color: var(--dim); font-size: calc(var(--k) * 1.2vw); font-weight: 300; }

.foot { font-size: calc(var(--k) * .72vw); color: var(--dim); padding-top: calc(var(--k) * 1.6vh); letter-spacing: .02em; }

/* ---------- mobile / portrait ---------- */
body.mobile #app { height: auto; min-height: 100vh; padding: 22px 16px 28px; }
body.mobile .top { padding-bottom: 18px; align-items: flex-start; }
body.mobile .event { font-size: 11px; }
body.mobile h1 { font-size: 22px; }
body.mobile .clock { font-size: 14px; padding-top: 2px; }
body.mobile .board { display: block; }
body.mobile .card { border-top: 1px solid var(--line); padding: 18px 0 16px; }
body.mobile .card:last-child { border-bottom: 1px solid var(--line); }
body.mobile .tier { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
body.mobile .tier .tname { font-size: 10.5px; margin: 0; order: 3; margin-left: auto; }
body.mobile .tier .amt { font-size: 21px; }
body.mobile .tier .unit { font-size: 13px; margin: 0; }
body.mobile .grp { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 6px 0; }
body.mobile .grp .chip { font-size: 12px; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px; }
body.mobile .it { font-size: 15px; padding-left: 0; }
body.mobile .it::before { display: none; }
body.mobile .next { font-size: 11.5px; padding-left: 0; padding-top: 4px; }
body.mobile .nextcard .tier { margin-bottom: 6px; }
body.mobile .foot { font-size: 11.5px; padding-top: 16px; line-height: 1.5; }