/* Vampshi theme: dark purple with blood red. Colours are tokens; fonts are bundled (OFL). */
@font-face { font-family: 'Nosifer'; src: url('/static/fonts/nosifer.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Creepster'; src: url('/static/fonts/creepster.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/static/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --bg: #12051d;
  --bg-2: #1c0b2e;
  --panel: #26103d;
  --panel-2: #321652;
  --line: #4a2a6e;
  --text: #f4ecfa;
  --muted: #bfa9d3;
  --blood: #d11a3c;
  --blood-dark: #7a0f26;
  --blood-text: #ff6b85;
  --yes: #b69cff;
  --no: #ff6b85;
  --ok: #7be0a8;
  --radius: 14px;
  --font-body: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-head: 'Creepster', 'Barlow Condensed', system-ui, sans-serif;
  --font-logo: 'Nosifer', 'Creepster', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg) radial-gradient(120% 70% at 50% -10%, var(--panel-2) 0%, var(--bg) 62%) no-repeat;
  color: var(--text);
  font: 600 1.125rem/1.25 var(--font-body);
  overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: .04em; margin: 0 0 .4em; color: var(--blood-text); }
a { color: var(--yes); }
button { font: inherit; color: inherit; }

/* The logo is outlined paths (no font needed); a mask lets it take the text colour.
   Use: <div class="logo" role="img" aria-label="VAMPSHI"></div> */
.logo {
  width: min(100%, 22rem); aspect-ratio: 611.7 / 111.6; margin: 0 auto; color: var(--blood-text);
  background: currentColor;
  -webkit-mask: url('/static/logo.svg') center / contain no-repeat;
  mask: url('/static/logo.svg') center / contain no-repeat;
}
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.row { display: flex; align-items: center; gap: .6rem; }
.grow { flex: 1 1 auto; min-width: 0; }

.btn {
  appearance: none; border: 0; border-radius: 12px; padding: .7rem 1rem; min-height: 3rem;
  background: var(--panel-2); color: var(--text); font-weight: 700; letter-spacing: .02em; cursor: pointer;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; }
.btn-blood { background: var(--blood); color: #fff; }
.btn-yes { background: #3a2470; color: var(--yes); box-shadow: inset 0 0 0 2px var(--yes); }
.btn-no { background: #4a1020; color: var(--no); box-shadow: inset 0 0 0 2px var(--no); }

.chip { display: inline-block; align-self: center; line-height: 1.3; padding: .15rem .6rem; border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: .9rem; }
.chip-hit { background: #2c1d58; color: var(--yes); }
.chip-miss { background: #4a1020; color: var(--no); }
.chip-void { background: #3b3248; color: var(--muted); }

.drop { display: inline-block; vertical-align: -.15em; color: var(--blood-text); }

/* Bet titles shrink in steps chosen from their length (see js/size.mjs). */
.t-xl { font-size: calc(var(--title-scale, 1) * 2.4rem); line-height: 1.05; }
.t-l  { font-size: calc(var(--title-scale, 1) * 2rem);   line-height: 1.08; }
.t-m  { font-size: calc(var(--title-scale, 1) * 1.65rem); line-height: 1.1; }
.t-s  { font-size: calc(var(--title-scale, 1) * 1.4rem);  line-height: 1.12; }
.t-xs { font-size: calc(var(--title-scale, 1) * 1.2rem);  line-height: 1.15; }

/* Avatars: <svg class="av av-3"><use href="/static/avatars.svg#av3"/></svg> or <img class="av" ...> */
.av { display: inline-block; width: 2.4rem; height: 2.4rem; padding: .3rem; border-radius: 50%; object-fit: cover; background: var(--av, #6b2fa0); color: #fff; flex: none; }
img.av { padding: 0; }
.av-0 { --av: #8b1a3a; } .av-1 { --av: #6b2fa0; } .av-2 { --av: #b3224f; } .av-3 { --av: #4a2c8a; }
.av-4 { --av: #8a2a6a; } .av-5 { --av: #2f4a8a; } .av-6 { --av: #a02040; } .av-7 { --av: #3b3b8f; }
.av-8 { --av: #7a2f5a; } .av-9 { --av: #5a1f7a; } .av-10 { --av: #922b3e; } .av-11 { --av: #6a3aa0; }

/* Phones may animate; the board never does (it idles at 0 fps). */
@media (prefers-reduced-motion: no-preference) {
  body.phone .live-dot { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
}
.live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); }
.live-dot.down { background: var(--blood); animation: none; }