/* ===== Heat Check: type system + depth pass =====
   Loads last. base.css / themes.css stay untouched.
   Font: the system UI font on Apple devices, self-hosted Inter everywhere else. */

/* ---------- Faces (Inter 4 variable, Latin subset, self-hosted) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-4.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-italic-4.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Metric-matched fallback so the swap to Inter doesn't shift layout */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

:root { --sf: -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", system-ui, sans-serif; }

/* One family everywhere (the disguised pause screen keeps its plain notes look) */
#app, #app *, #splash, #splash *, .doc, .doc *, body:not(:has(#app)) * { font-family: var(--sf) !important; }
#app { --font-display: var(--sf); --font-body: var(--sf); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "kern"; }

/* ---------- Hierarchy ---------- */
/* Display: Black Italic */
.logo, #splash .sp-logo { font-weight: 900 !important; font-style: italic; letter-spacing: -.045em; line-height: .86; }
.home-head .logo, .gate .logo { padding-right: .08em; }
#app h1 { font-weight: 900; font-style: italic; letter-spacing: -.035em; line-height: 1; }
#app h2, .hud-title, .who, .noir-title, .handoff .who { font-weight: 800 !important; font-style: italic; letter-spacing: -.025em; }
.tile .t-name { font-weight: 900 !important; font-style: italic; letter-spacing: -.03em; line-height: .95; text-transform: none; }
/* Prompts: heavy upright for reading at a glance */
.prompt { font-weight: 700 !important; font-style: normal !important; letter-spacing: -.02em; line-height: 1.12; }
[data-theme="redflag"] .prompt { text-transform: none; }
/* Subtitles: Light Italic */
.home-sub, .tile .t-tag, .gate p, .consent-quote, .handoff p { font-weight: 300; font-style: italic; letter-spacing: .005em; }
.consent-quote { font-weight: 800; font-size: clamp(22px, 6vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.tile .t-tag { font-size: 13px; opacity: .9; }
/* Labels, kickers, badges: Semibold Italic caps */
.field label, .heat-label, .heat-badge, .seat-name, .tag, .onair, .sp-skip { font-weight: 600 !important; font-style: italic; letter-spacing: .12em; text-transform: uppercase; }
/* Notes and helper text: Regular, quiet */
.note, .muted { font-weight: 400; letter-spacing: .005em; }
/* Interactive: Bold upright */
.btn, .seg button, .chips3 button, .vsbtn { font-weight: 700 !important; font-style: normal; letter-spacing: -.005em; }
.chip { font-weight: 500; } .chip b { font-weight: 700; }
.input { font-weight: 500; }
.timer span, .streak, .big { font-weight: 900 !important; font-style: italic; letter-spacing: -.04em; }

/* ---------- Depth: shared surfaces ---------- */
.card, .modal, .icon-btn, .chip, .controls .pause, .controls .pass, .input, .seg {
  background-image: linear-gradient(180deg, #ffffff12, #ffffff03 60%, #00000014);
}
.card { box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -1px 0 #0000004d, 0 1px 2px #0006, 0 18px 40px -20px #000c, 0 24px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.modal { box-shadow: inset 0 1px 0 #ffffff24, 0 -24px 60px -20px #000c, 0 -10px 40px -24px color-mix(in srgb, var(--accent) 60%, transparent); }
.icon-btn, .chip, .controls .pause, .controls .pass { box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000059, 0 6px 16px -8px #000c; }
.chip.turn { box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 1px var(--accent), 0 8px 22px -8px var(--accent); }
.input { box-shadow: inset 0 2px 6px #00000059, inset 0 -1px 0 #ffffff10; }
.input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 2px 6px #00000059, 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.seg { box-shadow: inset 0 2px 6px #00000066; }

/* Primary buttons: accent gradient, top light, bottom shade, coloured drop shadow */
.btn:not(.ghost):not(.pass):not(.pause) {
  background-image: linear-gradient(180deg, #ffffff38 0%, #ffffff00 48%), linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent2)));
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -2px 0 #00000033, 0 2px 4px -1px #0008, 0 14px 30px -12px var(--accent);
  text-shadow: 0 1px 0 #ffffff26;
}
.btn.alt { background-image: linear-gradient(180deg, #ffffff38 0%, #ffffff00 48%), linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 60%, var(--accent))) !important; box-shadow: inset 0 1px 0 #ffffff59, inset 0 -2px 0 #00000033, 0 14px 30px -12px var(--accent2) !important; }
.btn.ghost { background-image: linear-gradient(180deg, #ffffff10, #ffffff00); box-shadow: inset 0 1px 0 #ffffff14, 0 8px 20px -14px #000; }
.seg button.on { background-image: linear-gradient(180deg, #ffffff40, #ffffff00 55%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 #ffffff59, 0 6px 16px -8px var(--accent); }
.heat-bar { box-shadow: inset 0 1px 3px #0009, 0 1px 0 #ffffff12; }
.heat-fill { background-image: linear-gradient(180deg, #ffffff55, #ffffff00 60%), linear-gradient(90deg, #ffd166, #ff7a3c, #ff2e63) !important; box-shadow: 0 0 14px #ff5a3c99; }
.hud { -webkit-backdrop-filter: none; }

/* ---------- Home logo ---------- */
.home-head .logo, .gate .logo {
  background: linear-gradient(175deg, #fff3d6 0%, #ffd166 22%, #ff7a3c 52%, #ff2e63 86%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  filter: drop-shadow(0 6px 18px #ff2e6355) drop-shadow(0 1px 0 #00000080);
}

/* ---------- Game tiles: richer scenes + real depth ---------- */
.tiles { gap: 14px; perspective: 900px; }
.tile {
  min-height: 176px; border-radius: 26px; padding: 16px; isolation: isolate;
  box-shadow: inset 0 1px 0 #ffffff2e, inset 0 -1px 0 #00000066, inset 0 0 0 1px #ffffff12,
              0 2px 3px #0009, 0 22px 40px -22px var(--tile-glow, #000), 0 30px 50px -30px #000;
}
.tile.wide { min-height: 150px; }
.tile .t-name { font-size: clamp(22px, 6.4vw, 27px); text-shadow: 0 2px 10px #00000080; }
.tile.wide .t-name { font-size: clamp(26px, 8vw, 34px); }
/* Gloss sheen and a bottom scrim for the type, drawn as background layers so the art pseudos stay free */
.tile { background-blend-mode: normal; }
.tile > .t-name, .tile > .t-tag { z-index: 3; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, #ffffff1f 0%, #ffffff00 34%), linear-gradient(0deg, #000000a6 0%, #00000000 55%); }

/* Red Flag / Green Flag: TV studio, two coloured spotlights */
.tile.redflag { --tile-glow: #e11d2e;
  background: radial-gradient(70% 90% at 12% 0%, #ff3b4e59, transparent 60%), radial-gradient(70% 90% at 92% 0%, #3ee08a4d, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 22px), linear-gradient(170deg, #1a3690 0%, #0c1a4a 55%, #060c24 100%); }
.tile.redflag .t-art::before { filter: drop-shadow(0 6px 10px #e11d2e99); }
.tile.redflag .t-art::after { filter: drop-shadow(0 4px 10px #3ee08a99); }
.tile.redflag .onair { box-shadow: 0 0 14px #e11d2e, inset 0 1px 0 #ffffff55; z-index: 3; }

/* Never Have I Ever: neon club */
.tile.nhie { --tile-glow: #ff2bd6;
  background: radial-gradient(90% 70% at 85% 10%, #ff2bd640, transparent 60%), radial-gradient(80% 60% at 0% 100%, #00f0ff2e, transparent 60%), linear-gradient(160deg, #24003f, #0d0019 60%, #06000d);
  box-shadow: inset 0 0 0 1.5px #ff2bd6, inset 0 0 24px #ff2bd655, 0 0 30px -8px #ff2bd6, 0 30px 50px -30px #000 !important; }
.tile.nhie .t-name { color: #ffd2f6 !important; text-shadow: 0 0 6px #ff2bd6, 0 0 18px #ff2bd6, 0 0 36px #ff2bd699 !important; }

/* Strip Charades: velvet curtains with gold trim */
.tile.charades { --tile-glow: #ff2e63;
  background: linear-gradient(180deg, #d4af37 0 5px, #8a6d1e 5px 7px, transparent 7px),
    radial-gradient(60% 70% at 50% 0%, #ffe9a847, transparent 70%),
    linear-gradient(90deg, #00000080, transparent 12% 88%, #00000080),
    repeating-linear-gradient(90deg, #7a0a22 0, #5c0016 9px, #2d0009 16px, #5c0016 23px, #7a0a22 30px); }
.tile.charades .t-name { color: #ffe7a0; text-shadow: 0 1px 0 #6b4e0e, 0 3px 12px #000 !important; }

/* Would You Rather: fighting game split with metal sheen */
.tile.wyr { --tile-glow: #1d4fe0;
  background: linear-gradient(180deg, #ffffff30, transparent 40%), linear-gradient(115deg, #ff3b4e 0%, #b0101f 49.3%, #ffe14d 49.3% 50.7%, #1340c8 50.7%, #3d74ff 100%); }
.tile.wyr .t-art::before { text-shadow: 3px 3px 0 #000, 0 0 24px #ffe14daa !important; }

/* Who's Most Likely: comic halftone burst */
.tile.mostlikely { --tile-glow: #ffe14d;
  background: radial-gradient(circle at 80% 20%, #ffe14d 0 18%, transparent 19%), radial-gradient(#ffe14d55 22%, transparent 24%) 0 0/10px 10px, conic-gradient(from 0deg at 80% 20%, #2a2a2a 0 10deg, #1a1a1a 10deg 20deg) , #1a1a1a; }
.tile.mostlikely .t-name { font-style: italic; color: #111 !important; text-shadow: none !important; box-shadow: 4px 4px 0 #000; }

/* Hot Seat: game show bulbs */
.tile.hotseat { --tile-glow: #8a3ffc;
  background: radial-gradient(circle, #ffc83d 0 2.5px, transparent 3.5px) 0 0/18px 18px, radial-gradient(85% 65% at 50% 115%, #b06bff, #5a1fc2 40%, #1b0b3a 75%), #12062a;
  background-blend-mode: soft-light, normal, normal; }

/* Two Truths: casino felt with a rail */
.tile.twotruths { --tile-glow: #1fb96a;
  background: radial-gradient(70% 60% at 50% 40%, #1e7a54, #0d4a33 60%, #062418), #0a3022;
  box-shadow: inset 0 0 0 4px #3b2414, inset 0 0 0 6px #d4af3780, inset 0 0 40px #000a, 0 22px 40px -22px #1fb96a, 0 30px 50px -30px #000 !important; }
.tile.twotruths .t-name { color: #fff6e6; }
.tile.twotruths .t-art::before { text-shadow: 0 2px 6px #000a; }

/* Swap Rounds: holographic chrome */
.tile.swap { --tile-glow: #c8b6ff; }
.tile.swap::before { background: linear-gradient(115deg, transparent 20%, #ffffff8c 38%, transparent 52%), linear-gradient(0deg, #1a10304d 0%, transparent 55%) !important; }
.tile.swap .t-name, .tile.swap .t-tag { color: #1a1030; text-shadow: 0 1px 0 #ffffffaa !important; }

/* Reduced motion keeps the same surfaces; nothing here animates */