/* 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 4px rgba(63, 196, 224, .3); }
#turninfo .dots.s1 { color: var(--enemy); text-shadow: 0 0 4px rgba(232, 80, 106, .3); }
#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 7px rgba(176, 124, 255, .24); }

#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; }
.rp-card .eyebrow { color: var(--muted); font: 700 12px var(--title); letter-spacing: .2em; text-transform: uppercase; }
.rp-score { display: flex; justify-content: center; }
.rp-score .s0 { color: var(--ally); } .rp-score .s1 { color: var(--enemy); } .rp-score .vs { color: var(--muted); }
.mvp { display: flex; flex-direction: column; }
.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); }

#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; }

.awards { display: grid; }
.award { display: flex; align-items: center; }
.award .ic { font-size: 20px; width: 26px; text-align: center; }
.award b { display: block; } .award small.t0 { color: var(--ally); } .award small.t1 { color: var(--enemy); }
.tbl { overflow-x: auto; }
.rounds { display: flex; flex-wrap: wrap; }
.rd { display: flex; flex-direction: column; gap: 1px; }
.rd b { font: 700 14px var(--title); } .rd span { font-size: 12px; } .rd small { color: var(--muted); font-size: 11px; }

/* End screen: the feedback prompt (js/feedback.js). Collapsed to one line of stars until touched. */
#overFb[hidden] { display: none; }
.fb-head { display: flex; align-items: center; flex-wrap: wrap; }
.fb-q { text-transform: uppercase; color: var(--muted); }
.fb-stars { display: inline-flex; gap: 2px; }
.fb-star { padding: 0 3px; border: 0; background: none; cursor: pointer; line-height: 1; color: rgba(141,154,176,.45); transition: color .12s, transform .12s, text-shadow .12s; }
.fb-stars:hover .fb-star { color: var(--dash); text-shadow: 0 0 6px rgba(255, 212, 59, .27); }
.fb-stars .fb-star:hover ~ .fb-star { color: rgba(141,154,176,.45); text-shadow: none; }
.fb-star.on { color: var(--dash); text-shadow: 0 0 6px rgba(255, 212, 59, .27); }
.fb-star:hover { transform: scale(1.15); }
.fb-star:focus-visible { outline: 2px solid var(--ally); outline-offset: 1px; border-radius: 4px; }
.fb-word { min-width: 40px; font: 600 12px var(--ui); color: var(--dash); }
.fb-link { padding: 0; border: 0; background: none; cursor: pointer; font: 600 12.5px var(--ui); color: var(--ally); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(63,196,224,.4); }
.fb-link:hover { text-decoration-color: var(--ally); }
.fb-body { flex-direction: column; margin-top: 10px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { padding: 4px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; font: 600 12px var(--ui); color: var(--muted); }
.fb-chip:hover:not(:disabled) { border-color: rgba(63,196,224,.45); color: var(--fg); }
.fb-chip.on { background: #1b4153; border-color: rgba(63,196,224,.6); color: #dff9ff; }
.fb-chip:disabled { opacity: .4; cursor: default; }
.fb-lbl { display: flex; flex-direction: column; gap: 4px; font: 600 12px var(--ui); }
.fb-lbl small { font-weight: 400; color: var(--muted); }
.fb-text, .fb-contact { font: 400 13.5px/1.4 var(--ui); color: var(--fg); background: rgba(4,6,10,.5); border: 1px solid var(--line); padding: 8px 10px; }
.fb-text { resize: vertical; }
.fb-text:focus, .fb-contact:focus { outline: none; border-color: var(--ally); box-shadow: 0 0 0 2px rgba(63,196,224,.2); }
.fb-count { align-self: flex-end; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-err { margin: 0; padding: 7px 10px; border-radius: 8px; background: rgba(232,80,106,.12); border: 1px solid rgba(232,80,106,.35); color: #ffb3bf; font-size: 12.5px; }
.fb-send { align-self: flex-end; padding: 8px 18px; border: 1px solid rgba(63,196,224,.55); background: rgba(63,196,224,.12); cursor: pointer; text-transform: uppercase; color: #dff9ff; }
.fb-send:hover:not(:disabled) { background: rgba(63,196,224,.22); }
.fb-send:disabled { opacity: .45; cursor: default; }
.fb-thanks { text-align: center; font: 600 13.5px var(--ui); color: var(--prep); }

@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 8px rgba(255, 90, 40, .36); animation: sdpulse 1.4s ease-in-out infinite; }
@keyframes sdpulse { 50% { box-shadow: 0 0 13px rgba(255, 90, 40, .57); } }
#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; }
}

/* ==== Round panel and end of match, in the HUD's angular look. The result first (word and score), then the
   highlights, the numbers; the actions stay in a footer that never scrolls away. ==== */
#over .over-card, #roundpanel .rp-card { --c: 18px; --res: var(--muted); position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none; }
#over .over-card.won, #roundpanel .rp-card.won { --res: var(--ally); }
#over .over-card.lost, #roundpanel .rp-card.lost { --res: var(--enemy); }
#over .over-card::before, #over .over-card::after, #roundpanel .rp-card::before, #roundpanel .rp-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
#over .over-card::before, #roundpanel .rp-card::before { inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--res) 75%, #fff 10%), var(--ar-line) 160px); }
#over .over-card::after, #roundpanel .rp-card::after { inset: 1px; background: radial-gradient(ellipse 70% 220px at 50% 0, color-mix(in srgb, var(--res) 22%, transparent), transparent), linear-gradient(180deg, rgba(15, 24, 39, .98), rgba(7, 11, 19, .98)); }
#over .over-card h3 { margin: 24px 0 8px; font: 700 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #a9bad3; }
#over .eyebrow, #roundpanel .eyebrow { font: 700 11px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--res) 60%, #c8d4e6); }
#over .go, #roundpanel .go { --c: 10px; position: relative; overflow: hidden; display: block; margin: 0; height: 52px; padding: 0 32px; border: 0; border-radius: 0; font: 800 16px var(--title); letter-spacing: .16em; color: #031018;
  background: linear-gradient(180deg, #7ed6ea, #2aa4c4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 60, 80, .35);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
#over .go:hover:not(:disabled), #roundpanel .go:hover { filter: brightness(1.08) saturate(1.1); }

/* Round panel. */
#roundpanel .rp-card { width: min(560px, 100%); padding: 24px; overflow: visible; }
#roundpanel .rp-band { padding-bottom: 16px; }
#roundpanel .rp-card h2 { margin: 4px 0 0; font: 800 30px/1.1 var(--title); letter-spacing: .12em; color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--res) 55%, transparent); }
#roundpanel .rp-card.won h2, #roundpanel .rp-card.lost h2 { color: color-mix(in srgb, var(--res) 45%, #fff); }
#roundpanel .rp-score { margin: 8px 0 0; gap: var(--s4); font: 800 44px/1 var(--title); }
#roundpanel .rp-band .sub { margin: 8px 0 0; font-size: 12.5px; }
#roundpanel .mvp { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--s1) 12px; margin: 0 0 16px; padding: 8px 12px; border: 0; border-radius: 0; border-left: 3px solid var(--dash); background: linear-gradient(90deg, rgba(255, 201, 40, .14), rgba(255, 201, 40, .03)); }
#roundpanel .mvp b { font-size: 16px; }
#roundpanel .rp-card .go { width: 100%; margin-top: var(--s4); }
/* Continue fills while the panel waits to close by itself. */
#roundpanel .go::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(0, 40, 56, .45); transform-origin: left; animation: rp-wait var(--rp-ms, 7s) linear forwards; }
@keyframes rp-wait { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Stats tables (round panel and end of match): your team first, a rule between the teams, your row lit, each
   column's best in bold, zeros faint, a star on the MVP. */
.st-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#over .st-tbl th, #over .st-tbl td, #roundpanel .st-tbl th, #roundpanel .st-tbl td { padding: 6px 8px; border-bottom: 1px solid rgba(140, 170, 210, .1); }
#over .st-tbl th, #roundpanel .st-tbl th { font: 700 10px var(--ui); letter-spacing: .1em; color: var(--muted); border-bottom-color: rgba(140, 170, 210, .25); }
.st-tbl td.z { color: rgba(141, 154, 176, .4); }
.st-tbl td.top { color: #fff; font-weight: 800; }
.st-tbl tr.tm0 + tr.tm1 td { border-top: 2px solid rgba(140, 170, 210, .28); }
.st-tbl tr.me td { background: rgba(63, 196, 224, .08); }
.st-tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--ally); }
.st-tbl tr.is-mvp td.who::after { content: " ★"; color: var(--dash); }

/* End of match. */
#over .over-card { display: flex; flex-direction: column; width: min(1000px, 100%); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; }
#over .ov-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 32px 16px; }
#over .ov-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(140, 170, 210, .14); }
#over .over-card h1 { margin: 4px 0 0; font: 800 48px/1 var(--title); letter-spacing: .14em; }
#over .ov-res .sub { margin: 8px 0 0; font-size: 12.5px; }
#over .ov-score { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; column-gap: var(--s3); font: 800 52px/1 var(--title); }
#over .ov-score .vs { color: var(--muted); font-size: 32px; }
#over .ov-score small { grid-column: 1 / -1; margin-top: 4px; font: 700 10px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
#over .ov-high { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s3); margin-top: var(--s4); align-items: stretch; }
#over .ov-high > :only-child { grid-column: 1 / -1; }
#over .mvp { margin: 0; padding: 12px 16px; align-items: flex-start; justify-content: center; gap: var(--s1); border: 0; border-radius: 0; border-left: 3px solid var(--dash); background: linear-gradient(90deg, rgba(255, 201, 40, .16), rgba(255, 201, 40, .03)); }
#over .mvp.big b { font-size: 20px; }
#over .mvp small { font-size: 12px; }
#over .awards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); align-content: start; }
#over .award { --c: 6px; gap: var(--s2); padding: 8px 12px; border: 1px solid var(--ar-line); border-radius: 0; background: rgba(14, 22, 36, .85);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
#over .award b { font-size: 12.5px; } #over .award small { font-size: 11.5px; }
#over .rounds { gap: var(--s2); }
#over .rd { --c: 6px; min-width: 140px; padding: 8px 12px; border: 1px solid var(--ar-line); border-top: 2px solid var(--muted); border-radius: 0; background: rgba(14, 22, 36, .85); }
#over .rd.won { border-top-color: var(--ally); } #over .rd.lost { border-top-color: var(--enemy); }
/* The footer: the feedback prompt (one line until touched) on the left, the actions on the right. */
#over .ov-foot { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) 24px; padding: 16px 32px 20px; border-top: 1px solid rgba(140, 170, 210, .16); background: rgba(5, 9, 15, .55); }
#over #overFb { flex: 1 1 300px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
#over #overFb.open { flex-basis: 100%; order: 2; max-height: 46vh; overflow: auto; padding: 12px 16px; border: 1px solid rgba(63, 196, 224, .25); background: rgba(14, 22, 36, .7); }
#over #overFb .fb-head { gap: var(--s2) 12px; }
#over #overFb:not(.open) .fb-link { margin-left: 4px; }
#over .fb-q { font: 700 11px var(--ui); letter-spacing: .14em; }
#over .fb-star { font-size: 20px; }
#over .fb-chip { border-radius: 0; }
#over .fb-text, #over .fb-contact { border-radius: 0; }
#over .fb-send { border-radius: 0; font: 700 12px var(--ui); letter-spacing: .1em; }
#over .ov-acts { flex: none; display: flex; align-items: flex-end; gap: var(--s3); margin-left: auto; }
#over .ov-acts #again { order: 0; width: auto; height: 44px; padding: 0 20px; background: transparent; border: 1px solid var(--ar-line); color: #b8c6da; box-shadow: none; text-shadow: none; font: 700 12px var(--ui); letter-spacing: .12em; }
#over .ov-acts #again:hover { color: #fff; border-color: var(--ar-line-hi); filter: none; }
#over .ov-acts #again:only-child { height: 52px; padding: 0 32px; border: 0; color: #031018; background: linear-gradient(180deg, #7ed6ea, #2aa4c4); font: 800 16px var(--title); letter-spacing: .16em; }
/* The rematch box: its status line gets a full row of its own above the buttons, so the vote count reads on one line. */
#over .rm-box { order: 1; display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px var(--s3); margin: 0; }
#over .rm-box:has(> .rm-host[hidden]) { grid-template-columns: auto; }
#over .rm-box .rm-go { grid-row: 2; min-width: 220px; }
#over .rm-box .rm-host { grid-row: 2; }
#over .rm-box .rm-go.voted { background: rgba(22, 74, 96, .9); color: #e4fbff; border: 0; box-shadow: inset 0 0 0 1px var(--ally); text-shadow: none; }
#over .rm-status { grid-column: 1 / -1; grid-row: 1; max-width: none; margin: 0; min-height: 0; font-size: 12px; line-height: 1.3; text-align: right; white-space: nowrap; color: var(--muted); }
#over .rm-status:empty { display: none; }
#over .rm-status.bad { white-space: normal; color: #ff8a8a; }
#over .rm-host { --c: 6px; height: 44px; white-space: nowrap; padding: 0 16px; border: 1px solid var(--ar-line); border-radius: 0; background: rgba(20, 32, 50, .7); color: var(--fg); font: 600 12px var(--ui);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
#over .rm-host:hover { border-color: var(--ar-line-hi); }
#over .rm-host[hidden] { display: none; }

/* The open feedback form, compact: tags and the note on the left, contact and Send on the right. */
#over #overFb .fb-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s2); align-items: start; }
#over #overFb .fb-chips { grid-column: 1; grid-row: 1; }
#over #overFb .fb-body > label:nth-of-type(1) { grid-column: 1; grid-row: 2; }
#over #overFb .fb-count { grid-column: 1; grid-row: 3; margin-top: -4px; }
#over #overFb .fb-body > label:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
#over #overFb .fb-err { grid-column: 2; grid-row: 3; }
#over #overFb .fb-send { grid-column: 2; grid-row: 4; justify-self: end; }
#over #overFb .fb-text { min-height: 56px; height: 56px; }