* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #0a2c24; overflow: hidden; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Color Emoji", sans-serif;
  color: #eaf4ee; -webkit-font-smoothing: antialiased;
}
#screen { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1vh 1.4vw; background: #082019; border-bottom: 0.3vh solid #f4c64e;
}
.brand { display: flex; align-items: center; }
.brand > * + * { margin-left: 0.7vw; }
.ball { font-size: 2vw; }
.title { font-size: 1.6vw; font-weight: 400; }
.title b { color: #f4c64e; font-weight: 500; }
.hosts { font-size: 1.4vw; letter-spacing: 0.15vw; }
.clock { font-size: 1.2vw; color: #9cbdb0; white-space: nowrap; }

.winrow { display: flex; align-items: center; overflow: hidden; }
.winrow > * + * { margin-left: 0.6vw; }
.winrow .lbl { font-size: 1vw; color: #8fb3a5; }
.win-pill {
  display: inline-flex; align-items: center;
  background: #0f3a2f; border: 1px solid #1c5a49; border-radius: 2vw;
  padding: 0.3vh 0.7vw; font-size: 1.1vw; white-space: nowrap;
}
.win-pill > * + * { margin-left: 0.4vw; }
.win-pill .pct { color: #34e29a; font-weight: 500; }

.legend { display: flex; align-items: center; padding: 0.5vh 1.4vw; background: #07211a; border-bottom: 1px solid #14463a; font-size: 0.82vw; color: #9cbdb0; }
.legend > * + * { margin-left: 1.8vw; }
.legend span { display: inline-flex; align-items: center; }
.legend .sw { display: inline-block; width: 0.9vw; height: 0.9vw; border-radius: 0.2vw; margin-right: 0.45vw; }
.legend .sw.q { background: #1f6b46; }
.legend .sw.b3 { background: #7a5f1c; }
.legend .sw.bar { width: 1.8vw; height: 0.5vh; background: #34e29a; border-radius: 1vw; }
.legend .sw.gw { background: #34e29a; border-radius: 50%; }

#body { flex: 1; display: flex; padding: 0.9vh 0.9vw; min-height: 0; }
#body > * + * { margin-left: 0.8vw; }

.grid {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 0.7vw;
}
.card {
  background: #0f3a2f; border: 1px solid #1c5a49; border-radius: 0.7vw;
  padding: 0.8vh 0.7vw; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; min-width: 0;
}
.card.live { border: 0.25vh solid #ff486b; }
.card-head { display: flex; align-items: center; margin-bottom: 0.6vh; }
.card-head > * + * { margin-left: 0.6vw; }
.badge {
  width: 1.7vw; height: 1.7vw; border-radius: 0.5vw; color: #06251a;
  font-size: 1.1vw; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
}
.gw { font-size: 0.95vw; color: #8fb3a5; }
.gw .pct { color: #34e29a; font-weight: 500; }
.live-tag { margin-left: auto; width: 0.8vw; height: 0.8vw; border-radius: 50%; background: #ff486b; }

.row { display: flex; align-items: center; padding: 0.35vh 0.3vw; }
.row > * + * { margin-left: 0.6vw; }
.row.q { background: #103f2b; border-radius: 0.4vw; }
.row.best3 { background: #332d12; border-top: 1px dashed #6b6320; margin-top: 0.3vh; padding-top: 0.5vh; }
.row.out { opacity: 0.72; border-top: 1px dashed #5a3030; margin-top: 0.3vh; padding-top: 0.5vh; }
.row .pos { width: 1vw; color: #6f9486; font-size: 0.95vw; text-align: center; }
.row .flag { font-size: 1.5vw; line-height: 1; }
.row .name { flex: 1; min-width: 0; font-size: 1.15vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .pts { font-size: 1.15vw; font-weight: 500; color: #06251a; background: #f4c64e; border-radius: 0.4vw; min-width: 1.6vw; text-align: center; padding: 0 0.4vw; }
.row .adv { display: inline-flex; align-items: center; }
.adv > * + * { margin-left: 0.4vw; }
.row .track { width: 3.4vw; height: 0.7vh; background: #0a2820; border-radius: 1vw; overflow: hidden; }
.row .fill { height: 100%; border-radius: 1vw; }
.row .advpct { font-size: 0.95vw; min-width: 2.4vw; text-align: right; font-weight: 500; }
.contend { color: #f4c64e; }

.rail { width: 31%; flex-shrink: 0; background: #0b3327; border: 1px solid #1c5a49; border-radius: 0.7vw; display: flex; flex-direction: column; overflow: hidden; }
.rail-head { padding: 1vh 1vw 0.5vh; font-size: 1vw; font-weight: 500; letter-spacing: 0.1vw; color: #8fb3a5; }
.live-head { display: flex; align-items: center; background: #3a0f25; border-bottom: 1px solid #5e1c3a; color: #ffb3c6; }
.live-head > * + * { margin-left: 0.6vw; }
.live-head .dot { width: 0.8vw; height: 0.8vw; border-radius: 50%; background: #ff486b; }
.live { padding: 0.4vh 0.8vw; border-bottom: 1px solid #1c5a49; max-height: 26vh; overflow-y: auto; }
.hist { padding: 0 0.8vw 0.8vh; overflow-y: auto; flex: 1; }

.match { display: flex; align-items: center; padding: 0.5vh 0.2vw; font-size: 1.05vw; }
.match > * + * { margin-left: 0.4vw; }
.match.hist-row { border-bottom: 1px solid #103a2e; font-size: 1vw; color: #cfe2d9; }
.match .mf { font-size: 1.25vw; }
.match .mn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .mn.right { text-align: right; }
.match .sc { color: #ffce4d; font-weight: 500; }
.match .dash { color: #5e8073; }
.match .min { color: #ff8aa6; min-width: 2.4vw; text-align: right; }
.match .ft { color: #6f9486; min-width: 2.6vw; text-align: right; }

.upnext { display: flex; align-items: center; padding: 0.9vh 1.2vw; background: #082019; border-top: 0.25vh solid #1c5a49; }
.upnext > * + * { margin-left: 1vw; }
.upnext-label { color: #f4c64e; font-size: 1vw; font-weight: 500; letter-spacing: 0.15vw; white-space: nowrap; }
.next { display: flex; align-items: center; overflow: hidden; }
.next > * + * { margin-left: 1.6vw; }
.fixture { display: inline-flex; align-items: center; font-size: 1.05vw; white-space: nowrap; color: #dceae3; }
.fixture > * + * { margin-left: 0.5vw; }
.fixture .ff { font-size: 1.25vw; }
.fixture .v { color: #5e8073; }
.fixture .grp { color: #6f9486; }
.fixture .et { color: #f4c64e; font-weight: 500; }

.status { position: absolute; right: 0.8vw; bottom: 0.6vh; font-size: 0.8vw; color: #3f5c50; }
.dot { display: inline-block; }
@keyframes wcpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.live-head .dot, .live-tag { animation: wcpulse 1.1s ease-in-out infinite; }