/* AI Detective - comic case-file look, lifted from the program flyer. */
:root {
  --ground:   #F2E4C9;
  --panel:    #FFFCF3;
  --panel-2:  #F7EDD9;
  --bubble:   #FFFFFF;
  --slab:     #12100E;
  --on-slab:  #FFFCF3;
  --stroke:   #12100E;
  --hard:     #12100E;
  --ink:      #12100E;
  --muted:    #5C534A;
  --faint:    #8A7E70;
  --red:      #E8402A;
  --yellow:   #FFC91B;
  --teal:     #12867F;
  --blue:     #2B5FD9;
  --mark:     #FFD84D;
  --dot:      rgba(232, 64, 42, .20);
  --ray:      rgba(18, 16, 14, .10);
  --on-red:   #FFFCF3;
  --on-yellow:#12100E;
  --code-bg:  #1B1916;
  --code-ink: #F4EDE1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #151317;
    --panel:    #211E24;
    --panel-2:  #2A262F;
    --bubble:   #2E2A33;
    --slab:     #0B0A0C;
    --on-slab:  #F4EDE1;
    --stroke:   #F0E7D6;
    --hard:     #E8402A;
    --ink:      #F4EDE1;
    --muted:    #B6ABA0;
    --faint:    #8E8378;
    --red:      #FF6A50;
    --yellow:   #FFD24A;
    --teal:     #3FC2B4;
    --blue:     #7C9BFF;
    --mark:     rgba(255, 210, 74, .34);
    --dot:      rgba(255, 106, 80, .16);
    --ray:      rgba(255, 231, 200, .07);
    --on-red:   #1A0D0A;
    --on-yellow:#1A1506;
    --code-bg:  #0B0A0C;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--ground);
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.6px);
  background-size: 9px 9px;
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  padding-block: clamp(26px, 5vw, 46px) clamp(44px, 7vw, 76px);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.4vw, 42px);
}

/* ---------------- shared comic parts ---------------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 3px solid var(--stroke);
  box-shadow: 7px 7px 0 var(--hard);
  padding: clamp(34px, 5vw, 42px) clamp(18px, 3.4vw, 32px) clamp(24px, 3.4vw, 32px);
}
.cap {
  position: absolute;
  top: -16px;
  left: clamp(12px, 3vw, 22px);
  background: var(--yellow);
  color: var(--on-yellow);
  border: 3px solid var(--stroke);
  padding: 3px 12px 2px;
  font-family: "Space Mono", ui-monospace, Consolas, monospace;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 44px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cap.red  { background: var(--red);  color: var(--on-red); }
.cap.teal { background: var(--teal); color: var(--on-red); }

h2 {
  font-family: Bangers, Impact, "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 3rem);
  line-height: .96;
  letter-spacing: .022em;
  text-wrap: balance;
  margin: 0;
}
h3 { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3; }
p { margin: 0; max-width: 64ch; }
.lede { color: var(--muted); font-size: 1.02rem; }
.mono { font-family: "Space Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }

/* ---------------- splash ---------------- */
.splash { overflow: hidden; padding-block: clamp(38px, 6vw, 58px) clamp(26px, 4vw, 38px); }
.rays {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg at 50% 42%, var(--ray) 0deg 2.1deg, transparent 2.1deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 22%, #000 62%);
  mask-image: radial-gradient(circle at 50% 42%, transparent 22%, #000 62%);
  pointer-events: none;
}
.splash > * { position: relative; }
.wordmark {
  font-family: Bangers, Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 8.2rem);
  line-height: .86;
  letter-spacing: .028em;
  margin: 0;
  color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--stroke);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--red);
}
.banner {
  display: inline-block;
  margin-top: clamp(18px, 3vw, 26px);
  background: var(--slab);
  color: var(--on-slab);
  border: 3px solid var(--stroke);
  padding: 7px 16px;
  transform: rotate(-1.4deg);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: clamp(.72rem, 2.3vw, .86rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.banner .sep { color: var(--yellow); padding-inline: .4em; }
.splash .lede { margin-top: 22px; font-size: 1.06rem; }

.burst {
  position: absolute;
  top: clamp(-6px, 1vw, 10px);
  right: clamp(-4px, 1vw, 10px);
  width: clamp(96px, 17vw, 138px);
  aspect-ratio: 1;
  background: var(--stroke);
  clip-path: polygon(50% 0%,61% 12%,76% 6%,79% 22%,95% 25%,88% 39%,100% 50%,88% 61%,95% 75%,79% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,21% 78%,5% 75%,12% 61%,0% 50%,12% 39%,5% 25%,21% 22%,24% 6%,39% 12%);
  display: grid;
  place-items: center;
  transform: rotate(11deg);
}
.burst > span {
  width: calc(100% - 9px);
  height: calc(100% - 9px);
  background: var(--red);
  color: var(--on-red);
  clip-path: inherit;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(.8rem, 2.4vw, 1.1rem);
  line-height: 1;
  letter-spacing: .04em;
  gap: 2px;
}
.burst b { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: .9; }
@media (max-width: 620px) { .burst { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  border: 3px solid var(--stroke);
  background: var(--panel-2);
  box-shadow: 3px 3px 0 var(--hard);
  padding: 7px 13px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.chip b { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--red); letter-spacing: .03em; }
.chip span { font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------------- forms ---------------- */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .q-label {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .hint { font-size: .8rem; color: var(--faint); }
input[type="text"], input[type="email"], input[type="password"], textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bubble);
  border: 3px solid var(--stroke);
  box-shadow: 3px 3px 0 var(--hard);
  padding: 10px 12px;
  width: 100%;
  border-radius: 0;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.error {
  border: 3px solid var(--stroke);
  background: var(--red);
  color: var(--on-red);
  padding: 9px 14px;
  font-weight: 600;
  font-size: .92rem;
}

.btn {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-red);
  background: var(--red);
  border: 3px solid var(--stroke);
  box-shadow: 4px 4px 0 var(--stroke);
  padding: 12px 20px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
  align-self: flex-start;
}
.btn:hover:not(:disabled) { background: var(--yellow); color: var(--on-yellow); }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--stroke); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--panel); color: var(--ink); }
.btn.big { font-size: .9rem; padding: 15px 26px; }

/* ---------------- briefing ---------------- */
.rogues { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 660px) { .rogues { grid-template-columns: 1fr 1fr; } }
.rogue {
  border: 3px solid var(--stroke);
  background: var(--panel-2);
  box-shadow: 4px 4px 0 var(--hard);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rogue .tag {
  align-self: flex-start;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .12em;
  background: var(--yellow);
  color: var(--on-yellow);
  border: 2px solid var(--stroke);
  padding: 1px 7px;
}
.rogue p { font-size: .85rem; color: var(--muted); }
.rogue.innocent { background: var(--panel); }
.rogue.innocent .tag { background: var(--teal); color: var(--on-red); }
.rogue.innocent h3 { color: var(--teal); }

.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules li { display: grid; grid-template-columns: 2rem 1fr; gap: 8px; align-items: baseline; }
.rules li b {
  font-family: Bangers, Impact, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--red);
  -webkit-text-stroke: 1px var(--stroke);
  paint-order: stroke fill;
}

/* ---------------- the clock bar ---------------- */
.clockbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--slab);
  color: var(--on-slab);
  border-bottom: 3px solid var(--stroke);
  box-shadow: 0 4px 0 var(--red);
}
.clockbar-inner {
  max-width: 960px;
  margin-inline: auto;
  padding: 10px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 14px 20px;
  flex-wrap: wrap;
}
.clockbar .digits {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.clockbar .digits.warn { color: var(--red); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.clockbar .who {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.5;
}
.clockbar .who span { color: var(--yellow); }
.clockbar .spacer { flex: 1; }
.clockbar .btn { box-shadow: 3px 3px 0 var(--on-slab); border-color: var(--on-slab); padding: 9px 16px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  font-family: Bangers, Impact, sans-serif;
  font-size: 1.15rem;
  letter-spacing: .05em;
  background: var(--panel-2);
  color: var(--ink);
  border: 3px solid var(--stroke);
  box-shadow: 3px 3px 0 var(--hard);
  padding: 4px 14px;
  cursor: pointer;
  position: relative;
}
.tab[aria-selected="true"] { background: var(--yellow); color: var(--on-yellow); }
.tab.done::after {
  content: "\2714";
  position: absolute;
  top: -10px;
  right: -9px;
  font-family: Archivo, sans-serif;
  font-size: .7rem;
  background: var(--teal);
  color: var(--on-red);
  border: 2px solid var(--stroke);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------------- case file ---------------- */
.case-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 3px solid var(--stroke);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.case-no { font-family: Bangers, Impact, sans-serif; font-size: 1.5rem; letter-spacing: .04em; color: var(--red); }
.case-title { font-weight: 700; font-size: 1.02rem; }
.brief { color: var(--muted); font-size: .95rem; }

.bubble {
  background: var(--bubble);
  border: 3px solid var(--stroke);
  border-radius: 20px;
  padding: 18px 20px;
  margin-block: 20px 34px;
  position: relative;
  box-shadow: 4px 4px 0 var(--hard);
}
.bubble::before, .bubble::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.bubble::before { bottom: -26px; left: 36px; border-width: 26px 20px 0 0; border-color: var(--stroke) transparent transparent transparent; }
.bubble::after { bottom: -19px; left: 41px; border-width: 19px 14px 0 0; border-color: var(--bubble) transparent transparent transparent; }
.who-line {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 8px;
}
.bubble .body { white-space: pre-wrap; font-size: 1rem; }

pre.code {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 3px solid var(--stroke);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: "Space Mono", ui-monospace, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.6;
}

.chart-headline {
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: .03em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.bars { display: flex; align-items: flex-end; gap: 18px; height: 180px; padding: 0 6px; border-bottom: 3px solid var(--stroke); margin-bottom: 8px; }
.bar { flex: 1; max-width: 90px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.bar .fill { width: 100%; background: var(--red); border: 3px solid var(--stroke); border-bottom: 0; }
.bar .val { font-family: "Space Mono", monospace; font-weight: 700; font-size: .78rem; }
.bar-labels { display: flex; gap: 18px; padding: 0 6px; margin-bottom: 18px; }
.bar-labels span { flex: 1; max-width: 90px; text-align: center; font-family: "Space Mono", monospace; font-size: .74rem; color: var(--muted); }
.data-table-wrap { overflow-x: auto; border: 3px solid var(--stroke); background: var(--panel-2); }

table.board, table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.board { min-width: 420px; }
table.board th, table.board td, table.data th, table.data td { text-align: left; padding: 9px 14px; border-bottom: 2px dotted var(--faint); }
table.board thead th, table.data thead th {
  background: var(--slab);
  color: var(--on-slab);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--stroke);
}
table.board tbody tr:last-child td, table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { font-variant-numeric: tabular-nums; }
.table-note { font-family: "Space Mono", monospace; font-size: .7rem; color: var(--faint); margin-top: 8px; }

.shout {
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.3rem, 4.4vw, 1.9rem);
  letter-spacing: .03em;
  line-height: 1.05;
  color: var(--red);
  -webkit-text-stroke: 1px var(--stroke);
  paint-order: stroke fill;
  margin-bottom: 14px;
}
.questions { display: flex; flex-direction: column; gap: 18px; }
.q { display: flex; flex-direction: column; gap: 6px; }
.q-label .pts { color: var(--red); margin-left: 6px; }

.case-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ---------------- grading ---------------- */
.grading { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.magnifier {
  font-size: 3.4rem;
  animation: sweep 1.6s ease-in-out infinite alternate;
}
@keyframes sweep { from { transform: translateX(-40px) rotate(-12deg); } to { transform: translateX(40px) rotate(12deg); } }

/* ---------------- results ---------------- */
.score-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.score-big {
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(4rem, 14vw, 6.5rem);
  line-height: .85;
  letter-spacing: .03em;
  color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--stroke);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--red);
  font-variant-numeric: tabular-nums;
}
.score-big small { font-size: .45em; color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
.score-meta { display: flex; flex-direction: column; gap: 6px; }
.sfx {
  position: absolute;
  right: clamp(4px, 2vw, 18px);
  top: -26px;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.9rem);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--stroke);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--red);
  transform: rotate(-11deg);
  animation: pop .35s cubic-bezier(.2,1.4,.5,1) .3s both;
  pointer-events: none;
}
@keyframes pop { from { opacity: 0; transform: rotate(-11deg) scale(1.9); } to { opacity: 1; transform: rotate(-11deg) scale(1); } }

.verdicts { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.verdict {
  border: 3px dashed var(--stroke);
  background: var(--panel-2);
  padding: clamp(16px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.verdict-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.verdict-head .case-no { font-size: 1.25rem; }
.verdict-head .pts-badge {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .8rem;
  background: var(--slab);
  color: var(--yellow);
  border: 2px solid var(--stroke);
  padding: 2px 10px;
}
.charge-line { font-family: Bangers, Impact, sans-serif; font-size: clamp(1.15rem, 3.4vw, 1.45rem); letter-spacing: .03em; line-height: 1.15; }
.fb { display: grid; grid-template-columns: 4.6rem 1fr; gap: 4px 12px; font-size: .92rem; }
.fb .k { font-family: "Space Mono", monospace; font-weight: 700; font-size: .72rem; color: var(--faint); padding-top: .2em; }
.fb .k b { color: var(--red); }

/* ---------------- leaderboard ---------------- */
.board-wrap { overflow-x: auto; border: 3px solid var(--stroke); background: var(--panel-2); }
table.board .rank { font-family: Bangers, Impact, sans-serif; font-size: 1.3rem; letter-spacing: .04em; color: var(--red); width: 3.4rem; }
table.board .num { font-family: "Space Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
table.board .who { font-weight: 600; }
table.board .who .gt { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; line-height: 1.1; overflow-wrap: anywhere; }
.real-name {
  display: block;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
  overflow-wrap: anywhere;
}
table.board tr.me td { background: var(--yellow); color: var(--on-yellow); }
table.board tr.me .rank { color: var(--on-yellow); }
table.board tr.dq td { color: var(--faint); }
table.board tr.dq .rank { color: var(--faint); }
.you-tag, .dq-tag {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--stroke);
  padding: 1px 7px;
  white-space: nowrap;
  margin-left: 8px;
}
.you-tag { background: var(--slab); color: var(--on-slab); }
.dq-tag { background: var(--red); color: var(--on-red); margin-left: 0; }
.board-note { font-family: "Space Mono", monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }

/* ---------------- closing ---------------- */
.close { background: var(--red); color: var(--on-red); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.close .kicker {
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: .94;
  letter-spacing: .03em;
  color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--stroke);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--stroke);
  margin: 0;
}

/* ---------------- modal ---------------- */
dialog {
  border: 3px solid var(--stroke);
  box-shadow: 7px 7px 0 var(--hard);
  background: var(--panel);
  color: var(--ink);
  padding: 26px;
  max-width: min(460px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(18, 16, 14, .55); }
dialog h2 { font-size: 2rem; margin-bottom: 10px; }
dialog .actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ---------------- live bits ---------------- */
.waiting {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 3px solid var(--stroke);
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 11px 16px;
  margin-bottom: 22px;
  font-size: .95rem;
}
.live-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--stroke);
  animation: pulse 1.2s steps(2) infinite;
}
.live-dot.off { background: var(--faint); animation: none; }
.live-line {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
table.board tr.fresh td { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { background: var(--mark); } 100% { background: transparent; } }
table.board td.empty { color: var(--faint); font-style: italic; }

/* ---------------- big-screen board ---------------- */
.bigboard .page { max-width: 1200px; }
.bigboard table.board { font-size: clamp(1rem, 2vw, 1.5rem); }
.bigboard table.board td { padding: clamp(10px, 1.4vw, 18px) clamp(12px, 2vw, 24px); }
.bigboard table.board .rank { font-size: clamp(1.6rem, 3vw, 2.6rem); width: 5rem; }
.bigboard .podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 22px); margin-bottom: 26px; }
@media (max-width: 640px) { .bigboard .podium { grid-template-columns: 1fr; } }
.bigboard .spot {
  border: 3px solid var(--stroke);
  box-shadow: 5px 5px 0 var(--hard);
  background: var(--panel-2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bigboard .spot.first { background: var(--yellow); color: var(--on-yellow); }
.bigboard .spot .place { font-family: Bangers, Impact, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--red); -webkit-text-stroke: 1.5px var(--stroke); paint-order: stroke fill; }
.bigboard .spot .tag { font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.6rem); overflow-wrap: anywhere; }
.bigboard .spot .stat { font-family: "Space Mono", monospace; font-weight: 700; font-size: .95rem; }

/* ---------------- admin ---------------- */
.admin-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-bar .spacer { flex: 1; }
.pack-list { display: flex; flex-direction: column; gap: 14px; }
.pack-card {
  border: 3px solid var(--stroke);
  background: var(--panel-2);
  box-shadow: 4px 4px 0 var(--hard);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pack-card.live { background: var(--panel); border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.pack-card .row1 { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.pack-card .ptitle { font-weight: 700; font-size: 1.08rem; }
.pack-card .pid { font-family: "Space Mono", monospace; font-size: .78rem; color: var(--faint); }
.pack-card .stats { font-size: .88rem; color: var(--muted); }
.pack-card .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-card .btn, .att .btn, .editor .btn.small { padding: 7px 12px; font-size: .68rem; box-shadow: 3px 3px 0 var(--stroke); }
.status {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 2px solid var(--stroke);
  padding: 1px 8px;
  background: var(--panel);
  color: var(--ink);
}
.status.live { background: var(--red); color: var(--on-red); }
.status.closed { background: var(--slab); color: var(--on-slab); }
.status.graded { background: var(--teal); color: var(--on-red); }
.status.dq, .status.grading_failed { background: var(--red); color: var(--on-red); }
.status.in_progress, .status.grading { background: var(--yellow); color: var(--on-yellow); }

.editor { display: flex; flex-direction: column; gap: 18px; }
.editor .grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .editor .grid2 { grid-template-columns: 1fr 1fr; } }
.editor select {
  font: inherit;
  color: var(--ink);
  background: var(--bubble);
  border: 3px solid var(--stroke);
  box-shadow: 3px 3px 0 var(--hard);
  padding: 9px 10px;
  border-radius: 0;
}
.editor input[type="number"] {
  font: inherit; color: var(--ink); background: var(--bubble); border: 3px solid var(--stroke);
  box-shadow: 3px 3px 0 var(--hard); padding: 10px 12px; width: 100%; border-radius: 0;
}
.case-edit { border: 3px dashed var(--stroke); background: var(--panel-2); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.case-edit-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.case-edit textarea.code-in { font-family: "Space Mono", monospace; font-size: .84rem; }
.key-box { border-left: 6px solid var(--teal); padding-left: 12px; display: flex; flex-direction: column; gap: 14px; }

.att-list { display: flex; flex-direction: column; gap: 10px; }
.att { border: 3px solid var(--stroke); background: var(--panel-2); }
.att > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.att > summary::-webkit-details-marker { display: none; }
.att > summary .rank { font-family: Bangers, Impact, sans-serif; font-size: 1.3rem; color: var(--red); }
.att > summary .who { font-weight: 700; overflow-wrap: anywhere; }
.att > summary .who small { display: block; font-weight: 400; color: var(--faint); font-size: .78rem; }
.att > summary .num { font-family: "Space Mono", monospace; font-weight: 700; font-size: .86rem; text-align: right; }
.att-body { border-top: 2px dotted var(--faint); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.att-case { display: flex; flex-direction: column; gap: 8px; border-bottom: 2px dotted var(--faint); padding-bottom: 14px; }
.att-case:last-of-type { border-bottom: 0; }
.att-case .qa { display: grid; grid-template-columns: 3.4rem 1fr; gap: 4px 10px; font-size: .9rem; }
.att-case .qa .k { font-family: "Space Mono", monospace; font-weight: 700; font-size: .7rem; color: var(--faint); padding-top: .25em; }
.att-case .qa .ans { white-space: pre-wrap; }
.att-case .qa .fbk { color: var(--muted); font-size: .84rem; }
.override { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: "Space Mono", monospace; font-size: .74rem; }
.override input { width: 3.6rem; padding: 5px 6px; box-shadow: 2px 2px 0 var(--hard); border-width: 2px; font: inherit; color: var(--ink); background: var(--bubble); border-style: solid; border-color: var(--stroke); }
.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--slab);
  color: var(--on-slab);
  border: 3px solid var(--stroke);
  box-shadow: 4px 4px 0 var(--red);
  padding: 10px 18px;
  font-weight: 600;
  z-index: 50;
  max-width: calc(100vw - 32px);
}

/* ---------------- leaderboard view switch ---------------- */
.seg { display: inline-flex; border: 3px solid var(--stroke); box-shadow: 4px 4px 0 var(--hard); margin: 4px 0 18px; max-width: 100%; }
.seg button {
  font-family: Bangers, Impact, sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  padding: 7px 18px;
  border: 0;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.seg button + button { border-left: 3px solid var(--stroke); }
.seg button[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.seg button:focus-visible { outline: 3px solid var(--blue); outline-offset: -6px; }
.bigboard .seg { display: flex; width: max-content; }
table.board td.num .real-name { margin-top: 2px; }

/* ---------------- admin: manage players ---------------- */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
table.roster .btn, .manage-runs .btn { padding: 6px 11px; font-size: .66rem; box-shadow: 3px 3px 0 var(--stroke); white-space: nowrap; }
.btn.ghost.danger { color: var(--red); }
table.roster tr.open td { background: var(--panel-2); }
table.roster tr.manage-row > td { background: var(--panel-2); border-bottom: 3px solid var(--stroke); padding: 16px; }
.manage-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: end; }
.manage-form .field span { font-family: "Space Mono", monospace; font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.manage-form .hint, .manage-runs .hint { grid-column: 1 / -1; font-size: .8rem; color: var(--faint); }
.manage-runs { display: flex; flex-direction: column; gap: 10px; }
.run-line { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.run-line .run-pack { flex: 1 1 200px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------------- profile ---------------- */
.prof-id { font-family: "Space Mono", monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 14px; overflow-wrap: anywhere; }
#prof-stats { margin: 0 0 22px; }
.onair {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border: 3px solid var(--stroke);
  box-shadow: 5px 5px 0 var(--hard);
  background: var(--panel-2);
  padding: 16px 18px;
}
.onair.hot { background: var(--yellow); color: var(--on-yellow); }
.onair .onair-text { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 260px; }
.onair strong { display: block; font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; line-height: 1.1; }
.onair small { display: block; font-size: .88rem; opacity: .85; }
table.history .pack-name { font-weight: 700; overflow-wrap: anywhere; }
table.history .btn { padding: 6px 11px; font-size: .66rem; box-shadow: 3px 3px 0 var(--stroke); white-space: nowrap; }
table.history .state { font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- gamer tag spotlight (briefing) ---------------- */
.tag-hero {
  position: relative;
  display: inline-block;
  margin: 6px 4px 0;
  padding: .08em .38em .02em;
  background: var(--yellow);
  color: var(--on-yellow);
  border: 3px solid var(--stroke);
  box-shadow: 4px 4px 0 var(--red);
  transform: rotate(-2deg);
  overflow-wrap: anywhere;
  animation: tag-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.tag-hero .sparkle {
  position: absolute;
  color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--stroke);
  paint-order: stroke fill;
  line-height: 1;
  pointer-events: none;
  animation: twinkle 1.8s ease-in-out infinite;
}
.tag-hero .s1 { top: -.55em; left: -.45em; font-size: .7em; }
.tag-hero .s2 { top: -.7em; right: -.35em; font-size: .9em; color: var(--red); animation-delay: .5s; }
.tag-hero .s3 { bottom: -.5em; right: -.6em; font-size: .6em; animation-delay: 1s; }
.tag-hero .s4 { bottom: -.45em; left: 20%; font-size: .45em; color: var(--teal); animation-delay: 1.3s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes tag-pop {
  from { transform: rotate(-2deg) scale(.6); opacity: 0; }
  to   { transform: rotate(-2deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .tag-hero .sparkle { opacity: 1; }
}