:root {
  --lime: #78f014;
  --ink: #0f2a33;
  --ink2: #1e3d46;
  --bg: #0a1d24;
  --panel: #12313b;
  --panel2: #173c47;
  --line: rgba(255,255,255,.08);
  --txt: #ffffff;
  --mute: #8fa9b1;
  --dim: #5f7c85;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100vw; height: 100vh; overflow: hidden; background: var(--bg); color: var(--txt);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.screen { width: 100vw; height: 100vh; display: flex; flex-direction: column; padding: 1.6vh 1.6vw 1.2vh; }

/* header */
.hdr { display: flex; align-items: center; gap: 2vw; height: 8.6vh; flex: none; margin-bottom: 1.4vh; }
.hdr .logo { height: 6.2vh; }
.hdr .logo svg { height: 100%; width: auto; display: block; }
.hdr .ttl { flex: 1; border-left: .25vw solid var(--lime); padding-left: 1.4vw; }
.hdr .ttl b { display: block; font-size: 3.6vh; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.hdr .ttl span .flag { height: .95em; vertical-align: -.1em; margin-right: .2em; }
.hdr .ttl > span { display: block; font-size: 2vh; color: var(--mute); font-weight: 600; margin-top: .3vh; }
.hdr .day { text-align: right; background: var(--panel); border-radius: 1.2vh; padding: .9vh 1.4vw; border-right: .4vw solid var(--lime); }
.hdr .day small { display: block; font-size: 1.5vh; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.hdr .day b { display: block; font-size: 3vh; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.hdr .day em { display: block; font-style: normal; font-size: 1.5vh; color: var(--mute); font-weight: 600; }
.hdr .stat { display: flex; align-items: center; gap: .7vw; font-size: 2.3vh; font-weight: 800; background: var(--panel); padding: 1vh 1.3vw; border-radius: 99px; }
.hdr .clock { font-size: 5vh; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 9vw; text-align: right; }
.dot { display: inline-block; width: 1.4vh; height: 1.4vh; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); } 70% { box-shadow: 0 0 0 1vh rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }

/* footer */
.ftr { flex: none; display: flex; justify-content: space-between; align-items: center; height: 2.6vh; margin-top: 1vh; font-size: 1.5vh; color: var(--dim); }
.ftr .legend { display: flex; gap: 2vw; align-items: center; }
.ftr .legend i { display: inline-block; width: 1.2vh; height: 1.2vh; border-radius: 3px; margin-right: .5vw; vertical-align: -.1vh; }
.credit { font-size: 1.35vh; color: var(--dim); letter-spacing: .02em; }

/* shared bits */
.flag { height: 1em; width: auto; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.cat { display: inline-block; color: #fff; font-weight: 800; border-radius: .6vh; padding: .2em .5em; font-size: .85em; letter-spacing: .02em; }
.cat-M75 { background: #2b7de9; } .cat-W75 { background: #e84a8a; }
.cat-M80 { background: #12a37f; } .cat-W80 { background: #f08a24; }
.cat-M85 { background: #7b5cf0; } .cat-W85 { background: #d23c3c; }
.live-tag { display: inline-flex; align-items: center; gap: .4em; color: var(--ink); background: var(--lime); font-weight: 900; border-radius: 99px; padding: .15em .6em; font-size: .8em; letter-spacing: .06em; }
.live-tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--ink); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.lose { color: var(--dim); }
.win { color: #fff; font-weight: 800; }

/* ---------- mobile (phones, portrait tablets) ---------- */
@media (max-width: 900px) {
  html, body { width: 100%; height: auto; overflow: auto; }
  .screen { width: 100%; height: auto; min-height: 100vh; padding: 14px 16px 18px; }
  .hdr { height: auto; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
  .hdr .logo { height: 40px; }
  .hdr .ttl { flex: 1 1 200px; border-left-width: 3px; padding-left: 12px; }
  .hdr .ttl b { font-size: 17px; line-height: 1.2; }
  .hdr .ttl > span { font-size: 13px; margin-top: 3px; }
  .hdr .ttl .sep { display: none; }
  .hdr .ttl .dt { display: block; margin-top: 2px; }
  .hdr .day { flex: 1 1 100%; display: block; text-align: left; border-right: 0; border-left: 4px solid var(--lime); border-radius: 10px; padding: 8px 12px; }
  .hdr .day small { font-size: 11px; }
  .hdr .day b { font-size: 17px; }
  .hdr .day b { margin: 2px 0; }
  .hdr .day em { font-size: 12px; }
  .ftr { height: auto; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 16px; }
  .credit { font-size: 11px; }
}