/* Ask Predicto (evergreen night stage + Halloween accents). Palette: brief §1.4 "Ask Predicto". */

body.game-page.predicto { background: #1b0b3a; color: #fff; }

/* ---- Title poster ---- */
#title {
  background:
    radial-gradient(ellipse at 50% 112%, #ffb81f44 0 20%, transparent 46%),
    radial-gradient(circle at 50% 42%, #4b1f8f 0, #2a1050 48%, #1b0b3a 100%);
  --ray1: rgba(164,92,255,.16);
}
/* phones: the painted title stage (P02 predicto-title-bg, 780x1690) over the same gradient, which
   stays as the fallback while it loads or if it is missing */
@media (max-width: 760px) {
  #title {
    background:
      url(../assets/img/predicto-title-bg.webp) center bottom / cover no-repeat,
      radial-gradient(circle at 50% 42%, #4b1f8f 0, #2a1050 48%, #1b0b3a 100%);
    --ray1: rgba(164,92,255,.07);   /* the art has painted rays; keep the spinning burst faint */
  }
}
#title .poster-logo { --c1: #3dff7a; --c2: #ffe14d; --c3: #ff8a1f; }
#title .poster-logo .ask { display: block; font-size: .5em; }
#title .poster-logo .ask .l { color: #fff; }
#title .tagline { background: #ff8a1f; }
.pumpkin {
  position: relative; display: inline-block; width: 20px; height: 17px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, transparent 0 28%, #00000022 29% 31%, transparent 32%), #ff8a1f;
  border: 2.5px solid var(--ink); margin-top: 2px;
}
.pumpkin::before { content: ''; position: absolute; left: 6px; top: -7px; width: 4px; height: 6px; background: #5bbf3a; border: 2px solid var(--ink); border-radius: 2px; }
/* The wizard's held crystal ball is the one tap target (title + stage). JS centres it on the ball each
   frame; the pulsing ring and "Tap the ball!" tag are the hint for kids. */
.orb-hit { position: absolute; left: 0; top: 0; width: 88px; height: 88px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; z-index: 3; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.orb-hit::before, .orb-hit::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 4px solid #ffe14d; pointer-events: none; animation: orb-pulse 1.6s ease-out infinite; }
.orb-hit::after { animation-delay: .8s; }
.orb-hit:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 4px; }
.orb-hit .tap-tip {
  position: absolute; left: 100%; top: 50%; transform: translate(6px, -50%); white-space: nowrap; pointer-events: none;
  font: 400 15px/1.05 var(--comic); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); text-align: left;
  background: #ffe14d; border: 3px solid var(--ink); border-radius: 12px; padding: 5px 8px; box-shadow: 0 3px 0 #0007;
  animation: tap-tip-bob 1.6s ease-in-out infinite;
}
.orb-hit .tap-tip::before { content: ''; position: absolute; right: 100%; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right-color: var(--ink); }
@keyframes orb-pulse { 0% { transform: scale(.8); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tap-tip-bob { 50% { transform: translate(10px, -50%); } }
@media (prefers-reduced-motion: reduce) { .orb-hit::before, .orb-hit::after, .orb-hit .tap-tip { animation: none; } }
html.kw-reduce .orb-hit::before, html.kw-reduce .orb-hit::after, html.kw-reduce .orb-hit .tap-tip { animation: none; }
/* only while he's waiting for a question */
body.thinking #orb-hit, body.frenzy #orb-hit { display: none; }

/* ---- How-to: red velvet curtain with gold scallops (P02 art pending; CSS stand-in) ---- */
#howto {
  background:
    linear-gradient(180deg, #1b0b3a 0 7%, transparent 7%),
    repeating-linear-gradient(90deg, #6d1029 0 22px, #8e1b3a 22px 34px, #5a0b22 34px 46px);
}
#howto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7%; height: 40px;
  background: radial-gradient(circle at 50% 0, #ffb81f 0 40%, transparent 41%) 0 0/40px 40px, #8e1b3a;
  border-bottom: 4px solid #1a1420;
}
#howto .card { color: var(--ink); background: #f3e9ff; margin-top: 30px; }
#howto h2 { --c1: #a45cff; --c2: #3dff7a; --c3: #ff8a1f; }
#howto .steps { --step: #a45cff; --step2: #3d8bff; --step3: #2ee86a; --step4: #ff3b4e; }

/* ---- Play ---- */
#play { display: flex; flex-direction: column; background: #1b0b3a; height: 100vh; height: 100dvh; min-height: 560px; }
#play .hud { --hud-bg: #2a1050; --hud-cell: #f3e9ff; flex: none; }
#play .hud .cell.streak { flex: 1.4 1 0; }
#play .hud .cell.ask-title { flex: 4 1 0; }
#play .hud .cell.ask-title b { font-size: clamp(18px, 5vw, 24px); }
body:not(.frenzy) #play .hud .cell:not(.ask-title), body.frenzy #play .hud .cell.ask-title { display: none; }
#play .hud .meter { --meter: linear-gradient(90deg, #a45cff, #3d8bff, #3dff7a, #ffe14d); }
/* The stage must never jump: the HUD and the control panel have fixed heights in every mode (ask,
   thinking, answered, Frenzy), so the stage keeps exactly the same box. */
#play .hud > .cell, #play .hud > .icon-btn, #play .hud > .sound-toggle { height: 54px; min-height: 0; overflow: hidden; }
.stage { position: relative; flex: 1 1 auto; min-height: 200px; }
#stage-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.controls {
  --panel: 252px;
  flex: none; height: calc(var(--panel) + max(12px, var(--sa-b)) + 15px); overflow: hidden;
  padding: 10px max(12px, var(--sa-r)) max(12px, var(--sa-b)) max(12px, var(--sa-l)); background: #12062a; border-top: 5px solid #1a1420; box-shadow: inset 0 4px 0 #4b1f8f;
}
#ask-ui, #pad-ui { height: var(--panel); display: flex; flex-direction: column; }
.slot { flex: none; height: 96px; margin-top: 8px; display: flex; flex-direction: column; justify-content: flex-start; }
body.answered .slot .chips, body.answered .slot .skip { display: none; }

.answer {
  flex: none; height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  text-align: center; margin: 0 auto 8px; max-width: 560px;
  font: 400 clamp(19px, 5.4vw, 26px)/1.08 var(--logo); letter-spacing: .5px; text-transform: uppercase;
  color: var(--answer, #fff);
  -webkit-text-stroke: 4px #12062a; paint-order: stroke fill;
  text-shadow: 0 0 14px var(--answer-glow, transparent);
}
.answer small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 14px var(--body); text-transform: none; color: #cbb9ea; -webkit-text-stroke: 0; text-shadow: none; margin-bottom: 3px; letter-spacing: 0; }
.answer .w { opacity: .15; transition: opacity .12s; }
.answer .w.on { opacity: 1; }
.ask-form { flex: none; display: flex; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; }
.ask-form input {
  flex: 1; min-width: 0; font: 700 17px var(--body); padding: 12px 14px;
  border: 4px solid #a45cff; border-radius: 14px; background: #2a1050; color: #fff; min-height: 52px;
}
.ask-form input::placeholder { color: #a38cc8; }
.ask-form input:focus { outline: 3px dashed var(--yellow); outline-offset: 2px; }
.ask-form .btn { background: #3dff7a; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 auto; width: 100%; max-width: 560px; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; font: 800 13px var(--body); color: #fff; background: #2a1050; border: 2px solid #a45cff; border-radius: 999px; padding: 8px 12px; cursor: pointer; min-height: 40px; }
.chips button:active { background: #4b1f8f; }
.after { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; margin: auto 0; }
.after .btn.go { background: #3dff7a; }
.skip { display: block; margin: 4px auto 0; background: none; border: 0; color: #cbb9ea; font: 400 15px var(--comic); letter-spacing: 1px; text-decoration: underline; cursor: pointer; min-height: 36px; }
body.thinking .chips, body.thinking .skip { opacity: .4; pointer-events: none; }

.pad { flex: 1 1 auto; min-height: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto 6px; }
.pad button {
  font: 400 clamp(17px, 5vw, 22px) var(--logo); letter-spacing: .5px; text-transform: uppercase;
  min-height: 0;
  border: 4px solid #1a1420; border-radius: 18px; color: #fff; cursor: pointer;
  -webkit-text-stroke: 4px #1a1420; paint-order: stroke fill;
  box-shadow: 0 6px 0 #000a, inset 0 -7px 0 rgba(0,0,0,.2), inset 0 6px 0 rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .05s, filter .05s; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pad button svg.i { width: 1.6em; height: 1.6em; }
.pad button kbd { -webkit-text-stroke: 0; color: var(--ink); }
.pad button.lit, .pad button:active { transform: translateY(4px); filter: brightness(1.3); box-shadow: 0 2px 0 #000a, 0 0 30px currentColor; }
.pad .c0 { background: #8a3df0; }
.pad .c1 { background: #3d8bff; }
.pad .c2 { background: #2ec760; }
.pad .c3 { background: #ff3b4e; }
.pad.locked button { filter: saturate(.45) brightness(.75); }
.pad-tip { flex: none; text-align: center; font: 400 17px var(--comic); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 8px; color: #e4d6ff; min-height: 20px; }
@media (hover: none) { .pad button kbd { display: none; } }

/* ---- End ---- */
.end-screen.spooky { background: radial-gradient(circle at 50% 18%, #4b1f8f, #1b0b3a 70%); }
.end-screen.spooky .end-title { --c1: #3dff7a; --c2: #ffe14d; --c3: #ff8a1f; }
.end-screen.spooky .end-card { color: var(--ink); background: #f3e9ff; }
.fortune-card { margin: 12px auto 0; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; text-align: left; font-size: 14px; line-height: 1.4; }
.fortune-card b { font: 400 15px var(--comic); letter-spacing: 1px; text-transform: uppercase; }
.fortune-card .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -1px; margin-right: 4px; }

/* v9: streak meter = 4 pips in the orb's approved glow colours (purple, blue, green, red); all 4 = ORB POWER. Same 10px box as the old bar. */
#play .hud .meter.pips { display: flex; gap: 2px; padding: 0; background: #3a2060; }
#play .hud .meter.pips .pip { flex: 1 1 0; background: rgba(255,255,255,.18); transition: background .2s; }
#play .hud .meter.pips .pip:nth-child(1).on { background: #a45cff; }
#play .hud .meter.pips .pip:nth-child(2).on { background: #3d8bff; }
#play .hud .meter.pips .pip:nth-child(3).on { background: #3dff7a; }
#play .hud .meter.pips .pip:nth-child(4).on { background: #ff3b4e; }
#play .hud .meter.pips.power { box-shadow: 0 0 8px 2px #c99bff; }
@media (prefers-reduced-motion: reduce) { #play .hud .meter.pips .pip { transition: none; } }
html.kw-reduce #play .hud .meter.pips .pip { transition: none; }