/* Round score dots, storm chip, scoreboard, between-round panel, spectating, end-of-match summary. */

#turninfo .score { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; }
#turninfo .dots { letter-spacing: .12em; font-size: 13px; }
#turninfo .dots.s0 { color: var(--ally); text-shadow: 0 0 8px rgba(53,224,255,.5); }
#turninfo .dots.s1 { color: var(--enemy); text-shadow: 0 0 8px rgba(255,61,90,.5); }
#turninfo .vs { font-size: 10px; color: var(--muted); }
#turninfo .storm { margin-left: 10px; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(176,124,255,.4); color: #cdb3ff; font: 700 11px var(--ui); letter-spacing: .04em; text-transform: none; }
#turninfo .storm.on { background: rgba(122,44,255,.25); border-color: #b07cff; color: #fff; box-shadow: 0 0 12px rgba(176,124,255,.4); }

#scoreboard, #roundpanel { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(4,6,10,.6); backdrop-filter: blur(3px); }
#scoreboard[hidden], #roundpanel[hidden] { display: none; }
.sb-card, .rp-card { width: min(720px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.sb-card h2, .rp-card h2 { margin: 0 0 10px; font: 800 20px var(--title); letter-spacing: .1em; text-transform: uppercase; }
.sb-card table, .rp-card table, .over-card table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-card th, .sb-card td, .rp-card th, .rp-card td, .over-card th, .over-card td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sb-card th, .rp-card th, .over-card th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
td.who { text-align: left; } td.who.t0 { color: var(--ally); } td.who.t1 { color: var(--enemy); }
td.who.me { font-weight: 700; } td.who small { color: var(--muted); font-weight: 400; }
tr.dead td { opacity: .55; }
.hint-s { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.rp-card { text-align: center; width: min(560px, 100%); }
.rp-card .eyebrow { color: var(--muted); font: 700 12px var(--title); letter-spacing: .2em; text-transform: uppercase; }
.rp-card.won h2 { color: var(--ally); } .rp-card.lost h2 { color: var(--enemy); }
.rp-score { font: 800 40px var(--title); display: flex; justify-content: center; gap: 14px; margin: 2px 0 10px; }
.rp-score .s0 { color: var(--ally); } .rp-score .s1 { color: var(--enemy); } .rp-score .vs { color: var(--muted); }
.mvp { display: flex; flex-direction: column; gap: 2px; align-items: center; margin: 4px 0 12px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,212,59,.12), rgba(255,212,59,.02)); border: 1px solid rgba(255,212,59,.35); }
.mvp .tag { font: 800 10px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--dash); }
.mvp b { font: 700 18px var(--title); } .mvp b.t0 { color: var(--ally); } .mvp b.t1 { color: var(--enemy); }
.mvp small { color: var(--muted); }
.mvp.big b { font-size: 22px; }

#spectate { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; padding: 10px 16px; border-radius: 12px; background: rgba(13,17,26,.92); border: 1px solid var(--line); color: var(--muted); font: 600 13px var(--ui); white-space: nowrap; }
#spectate[hidden] { display: none; }

.over-card { max-height: 100%; overflow: auto; }
.over-card h3 { margin: 16px 0 6px; font: 700 12px var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.award { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.award .ic { font-size: 20px; width: 26px; text-align: center; }
.award b { display: block; font-size: 13px; } .award small { font-size: 12px; } .award small.t0 { color: var(--ally); } .award small.t1 { color: var(--enemy); }
.tbl { overflow-x: auto; }
.rounds { display: flex; flex-wrap: wrap; gap: 6px; }
.rd { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--muted); min-width: 120px; }
.rd.won { border-top-color: var(--ally); } .rd.lost { border-top-color: var(--enemy); }
.rd b { font: 700 14px var(--title); } .rd span { font-size: 12px; } .rd small { color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
  #turninfo .long { display: none; } #turninfo .short { display: inline; }
  #turninfo .storm { margin-left: 4px; padding: 1px 6px; font-size: 10px; }
  #turninfo .score { margin-left: 4px; gap: 3px; } #turninfo .dots { font-size: 11px; letter-spacing: 0; }
  .sb-card th, .sb-card td, .over-card th, .over-card td { padding: 5px 4px; font-size: 11.5px; }
  #spectate { white-space: normal; text-align: center; width: calc(100% - 24px); }
}

/* Fog and statuses on unit labels */
.ulabel .sts { display: flex; gap: 1px; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.ulabel .sts i { font-style: normal; }
.ulabel.hid .pip::after { content: "hidden"; font: 600 9px var(--ui); color: #9fe0b0; margin-left: 3px; text-shadow: 0 1px 2px #000; }

/* Sudden death and ties */
#turninfo .sd, #turninfo .tie { margin-left: 8px; padding: 2px 8px; border-radius: 99px; font: 800 11px var(--ui); letter-spacing: .04em; text-transform: none; border: 1px solid rgba(255,120,60,.45); color: #ffb08a; }
#turninfo .sd.on { background: linear-gradient(90deg, #ff3d2a, #ff8a2a); color: #fff; border-color: #ffb08a; box-shadow: 0 0 14px rgba(255,90,40,.6); animation: sdpulse 1.4s ease-in-out infinite; }
@keyframes sdpulse { 50% { box-shadow: 0 0 24px rgba(255,90,40,.95); } }
#turninfo .tie { border-color: rgba(200,210,230,.35); color: #cfd8e8; }
#banner.big { font-size: 46px; letter-spacing: .14em; }
@media (max-width: 640px) { #turninfo .sd, #turninfo .tie { margin-left: 3px; padding: 1px 6px; font-size: 10px; } #banner.big { font-size: 28px; white-space: normal; text-align: center; width: 90%; } }
/* Phones: the header wraps to two short lines so the score and the sudden-death / tie chips always show. */
@media (max-width: 640px) {
  #turninfo { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; line-height: 1.15; }
  #turninfo .score { margin-left: 0; }
}