/* ============================================================
   QUIZORIA — base reset + app shell
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--c-void);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.35;
  overflow: hidden;               /* TV app: never scroll the shell */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* A TV has no pointer by default; keep the cursor out of the way
     but still allow mouse testing in the browser. */
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
body.is-remote { cursor: none; }

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }

/* We draw our own focus rings; the UA outline is never TV-legible. */
:focus { outline: none; }
:focus-visible { outline: none; }

h1, h2, h3, p { margin: 0; }

.app {
  position: relative;
  z-index: var(--z-app);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: stretch;
}

/* Every screen fills the shell inside the TV safe area */
.screen {
  position: absolute;
  inset: 0;
  padding: var(--safe-y) var(--safe-x);
  display: flex;
  flex-direction: column;
  will-change: opacity, transform;
}

/* --- Screen transitions (cinematic push) --- */
.screen--enter { animation: screenIn var(--t-slow) var(--ease-out) both; }
.screen--exit  { animation: screenOut 320ms var(--ease-in-out) both; pointer-events: none; }

@keyframes screenIn {
  from { opacity: 0; transform: translate3d(0, calc(var(--u) * 1.6), 0) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes screenOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translate3d(0, calc(var(--u) * -1), 0) scale(1.012); filter: blur(8px); }
}

/* --- Utility --- */
.u-center { display: flex; align-items: center; justify-content: center; }
.u-col    { display: flex; flex-direction: column; }
.u-grow   { flex: 1 1 auto; min-height: 0; }
.u-hidden { display: none !important; }
.u-nowrap { white-space: nowrap; }

.text-gold {
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Full-bleed white flash used for dramatic reveals */
.flash {
  position: fixed; inset: 0; z-index: var(--z-flash);
  pointer-events: none; opacity: 0; background: #fff;
}
.flash.is-firing { animation: flashFire 480ms var(--ease-out); }
.flash.is-firing--gold { animation: flashGold 620ms var(--ease-out); }
@keyframes flashFire { 0% { opacity: .0 } 12% { opacity: .55 } 100% { opacity: 0 } }
@keyframes flashGold {
  0%   { opacity: 0;  background: #fff6dd; }
  10%  { opacity: .7; background: #fff6dd; }
  100% { opacity: 0;  background: #fff6dd; }
}

/* Toast (used for hints / lifeline feedback) */
.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--safe-y) * 0.6);
  transform: translate(-50%, 140%);
  z-index: var(--z-overlay);
  max-width: 70vw;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--glow-violet), 0 1rem 3rem rgba(0,0,0,.6);
  font-size: var(--fs-lead);
  text-align: center;
  opacity: 0;
  transition: transform var(--t-base) var(--ease-pop), opacity var(--t-base);
  pointer-events: none;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }