/* Deoraí overlays — blueprint style. Designed on a 2580×1080 stage; overlay.js zooms it to the browser source size. */

@font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: block; }

:root {
  --bg: #12261c;
  --ink: #f4f3ee;
  --muted: #a9b7af;
  --accent: #8cc3a5;
  --line: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow: hidden; background: transparent; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }

.stage { position: relative; width: 2580px; height: 1080px; overflow: hidden; }
.paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(244 243 238 / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(244 243 238 / 0.10) 1px, transparent 1px),
    linear-gradient(rgb(244 243 238 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(244 243 238 / 0.045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.abs { position: absolute; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* header */
.header { left: 72px; right: 72px; top: 48px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-family: var(--mono); font-size: 30px; font-weight: 500; }
.wordmark span { color: var(--accent); }
.live { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; color: var(--muted); }
.live::before { content: ''; width: 12px; height: 12px; background: var(--accent); animation: blink 2s steps(1) infinite; }
.rule { left: 72px; right: 72px; top: 120px; height: var(--line); background: var(--ink); transform-origin: left; }

/* boxes */
.box { border: var(--line) solid var(--ink); background: var(--bg); }
.box-head { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: var(--line) solid var(--ink); font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; color: var(--muted); }
.cells { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cells > div { padding: 16px 20px; }
.cells > div + div { border-left: var(--line) solid var(--ink); }
.cell-k { font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; color: var(--muted); }
.cell-v { font-size: 48px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* title block */
.titleblock { left: 2040px; top: 876px; width: 468px; font-family: var(--mono); }
.titleblock .cells { --cols: 2; }
.titleblock .cells > div { padding: 12px 16px; }
.titleblock .cells + .cells { border-top: var(--line) solid var(--ink); }
.titleblock .k { font-size: 15px; letter-spacing: 0.06em; color: var(--muted); }
.titleblock .v { font-size: 22px; }

/* drawing marks */
/* <div class="dim-h"><i class="t"></i><i class="l"></i><span>label</span><i class="l"></i><i class="t"></i></div> */
.dim-h { display: flex; align-items: center; gap: 16px; font-family: var(--mono); color: var(--accent); }
.dim-h > .t { width: var(--line); height: 14px; background: var(--accent); }
.dim-h > .l { flex: 1; height: var(--line); background: var(--accent); }
/* chained dimension: <div class="chain" style="width:…"><i style="left:…"></i>…</div> */
.chain { height: 14px; }
.chain::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: var(--line); background: var(--accent); }
.chain > i { position: absolute; top: 0; width: var(--line); height: 14px; background: var(--accent); }
.dim-v { width: 14px; display: flex; flex-direction: column; align-items: center; }
.dim-v::before, .dim-v::after { content: ''; width: 14px; height: var(--line); background: var(--accent); }
.dim-v > i { flex: 1; width: var(--line); background: var(--accent); transform-origin: top; }
.crop { --n: 40px; }
.crop > i { position: absolute; width: var(--n); height: var(--n); border: 0 solid var(--accent); }
.crop > i:nth-child(1) { left: 0; top: 0; border-left-width: var(--line); border-top-width: var(--line); }
.crop > i:nth-child(2) { right: 0; top: 0; border-right-width: var(--line); border-top-width: var(--line); }
.crop > i:nth-child(3) { left: 0; bottom: 0; border-left-width: var(--line); border-bottom-width: var(--line); }
.crop > i:nth-child(4) { right: 0; bottom: 0; border-right-width: var(--line); border-bottom-width: var(--line); }
.reg { width: var(--s, 48px); height: var(--s, 48px); }
.reg::before { content: ''; position: absolute; inset: 25%; border: var(--line) solid var(--accent); border-radius: 50%; }
.reg > i { position: absolute; background: var(--accent); }
.reg > i:nth-child(1) { left: 0; right: 0; top: 50%; height: var(--line); margin-top: -1px; }
.reg > i:nth-child(2) { top: 0; bottom: 0; left: 50%; width: var(--line); margin-left: -1px; }

/* LP bar */
.bar { position: relative; height: 14px; border: var(--line) solid var(--ink); }
.bar > b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: var(--accent); transition: width 1.2s var(--ease); }
.bar > i { position: absolute; top: -8px; width: var(--line); height: 26px; background: var(--ink); }

/* event rows */
.rows { font-family: var(--mono); font-size: 20px; }
.rows > div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px dashed var(--muted); }
.rows > div > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* value change flash */
.bump { animation: bump 0.9s var(--ease); }

/* ---------- entrance: lines draw, blocks rise ---------- */
.in-draw-x { animation: draw-x 0.9s var(--ease) both; animation-delay: var(--d, 0ms); }
.in-draw-y { animation: draw-y 0.9s var(--ease) both; animation-delay: var(--d, 0ms); }
.in-rise { animation: rise 0.7s var(--ease) both; animation-delay: var(--d, 0ms); }

@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes bump { 0% { color: var(--accent); } 100% { color: inherit; } }

/* ---------- alert card: paper variant, so events stand out from the dark scenes ---------- */
.alert {
  --accent: #1e4d3a; /* the site's light-mode green; the card's marks inherit it */
  --muted: #3d4842;
  width: 720px; height: 216px; padding: 22px 28px; display: flex; flex-direction: column; justify-content: space-between;
  border: var(--line) solid #17201b; background: #f4f3ee; color: #17201b; visibility: hidden;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
}
.alert .top { display: flex; justify-content: space-between; align-items: center; }
.alert .kind { font-family: var(--mono); font-size: 18px; letter-spacing: 0.08em; color: var(--accent); }
.alert .user { font-size: 56px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert .foot { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 16px; color: var(--muted); }
.alert .foot::before { content: ''; width: var(--line); height: 12px; background: var(--accent); }
.alert .foot > i { flex: 1; height: var(--line); background: var(--accent); transform-origin: left; }
.alert .reg { position: relative; --s: 26px; }
.alert.result .kind { font-weight: 500; letter-spacing: 0.14em; }
.alert.result .foot { color: #17201b; font-size: 18px; }
.alert.loss { --accent: #4a5550; } /* a loss is reported in grey ink, not the win green */
.alert.show { visibility: visible; animation: alert-in 0.55s var(--ease) both; }
.alert.show .foot > i { animation: draw-x 0.8s var(--ease) 0.25s both; }
.alert.hide { visibility: visible; animation: alert-out 0.45s var(--ease) both; }
@keyframes alert-in { from { opacity: 0; transform: translateX(-48px); } }
@keyframes alert-out { to { opacity: 0; transform: translateX(-48px); } }

/* ---------- chat (queue scene) ---------- */
.chat { display: flex; flex-direction: column; }
.chat-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 20px; overflow: hidden; font-size: 22px; line-height: 1.35; }
.chat-log .msg { animation: rise 0.4s var(--ease) both; overflow-wrap: anywhere; }
.chat-log .who { font-family: var(--mono); font-size: 18px; color: var(--accent); margin-right: 10px; }
.chat-empty { font-family: var(--mono); font-size: 18px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition: none !important; }
}