/* ============================================================
   RAPID FIRE — game styles. Immersive dark arcade backdrop with a
   per-exam accent (--rf-accent). Loaded after the other game CSS.
   ============================================================ */

.rf-overlay {
  position: fixed; inset: 0; z-index: 9000;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(124,99,255,0.22), transparent 60%),
    radial-gradient(100% 80% at 10% 110%, rgba(40,200,180,0.10), transparent 55%),
    linear-gradient(180deg, #15112e 0%, #0d0a22 100%);
  -webkit-tap-highlight-color: transparent;
}
.rf-overlay.hidden { display: none; }
.rf-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.rf-shake {
  --rf-accent: #7b63ff;
  position: absolute; inset: 0; z-index: 10; display: flex;
}
.rf-shake.shaking { animation: rfShake 0.38s cubic-bezier(.36,.07,.19,.97); }
@keyframes rfShake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

.rf-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rf-screen.hidden { display: none; }

/* ── Top bar ── */
.rf-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 14px)); }
.rf-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.rf-x:hover { background: rgba(255,255,255,.14); }
.rf-logo { font-size: 17px; letter-spacing: .5px; }
.rf-logo b { font-weight: 800; }

/* ── Lobby ── */
.rf-lobby-body { flex: 1; overflow-y: auto; padding: 8px 20px 32px; max-width: 760px; margin: 0 auto; width: 100%; }
.rf-h1 { font-family: 'Lora', Georgia, serif; font-size: clamp(28px,6vw,42px); font-weight: 700; margin: 6px 0 8px; line-height: 1.1; }
.rf-h1 span { font-style: italic; background: linear-gradient(120deg,#c4b5fd,#8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rf-lead { color: #c7c2e8; font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 560px; }
.rf-pick-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9a93c9; margin: 18px 0 10px; }
.rf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.rf-cat {
  --rf-accent: #7b63ff;
  text-align: left; cursor: pointer; color: #fff; border-radius: 16px; padding: 13px 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: 2px; transition: transform .12s, border-color .15s, background .15s;
}
.rf-cat:hover { transform: translateY(-2px); border-color: var(--rf-accent); background: rgba(255,255,255,.08); }
.rf-cat.sel { border-color: var(--rf-accent); background: color-mix(in srgb, var(--rf-accent) 16%, transparent); box-shadow: 0 10px 26px -12px var(--rf-accent); }
.rf-cat-ico { font-size: 24px; }
.rf-cat-nm { font-weight: 700; font-size: 14px; line-height: 1.2; }
.rf-cat-ct { font-size: 11px; color: #9a93c9; }
.rf-exams { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.rf-exam {
  --rf-accent: #7b63ff;
  text-align: left; cursor: pointer; color: #fff; border-radius: 14px; padding: 13px 15px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: 3px; transition: transform .12s, border-color .15s, background .15s;
}
.rf-exam:hover { transform: translateY(-2px); border-color: var(--rf-accent); background: rgba(255,255,255,.09); box-shadow: 0 12px 28px -14px var(--rf-accent); }
.rf-exam-mixed { border-style: dashed; }
.rf-exam-nm { font-weight: 700; font-size: 14px; }
.rf-exam-meta { font-size: 11px; color: #9a93c9; }
.rf-who { margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: #b9b3dc; background: rgba(124,99,255,.10); border: 1px solid rgba(124,99,255,.22); border-radius: 12px; padding: 11px 14px; }
.rf-who b { color: #e7e3ff; }
.rf-empty { color: #9a93c9; padding: 20px 0; }

/* ── Countdown ── */
.rf-count { align-items: center; justify-content: center; }
.rf-count-num { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: clamp(80px,26vw,170px); line-height: 1; text-shadow: 0 0 50px var(--rf-accent,#7b63ff); }
.rf-count-num.pop { animation: rfPop .6s ease; }
.rf-count-num.go { color: #fff; animation: rfGo .55s ease; background: linear-gradient(120deg,#c4b5fd,#8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rf-count-sub { margin-top: 12px; color: #c7c2e8; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
@keyframes rfPop { 0%{transform:scale(.3);opacity:0} 40%{transform:scale(1.15);opacity:1} 100%{transform:scale(1)} }
@keyframes rfGo { 0%{transform:scale(.5);opacity:0} 50%{transform:scale(1.25);opacity:1} 100%{transform:scale(1)} }

/* ── HUD ── */
.rf-hud { display: flex; align-items: center; gap: 12px; padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top, 14px)); }
.rf-ring {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--rf-accent) 100%, rgba(255,255,255,.14) 0);
}
.rf-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #14112c; }
.rf-ring span { position: relative; z-index: 1; font-weight: 800; font-size: 21px; font-variant-numeric: tabular-nums; }
.rf-ring.low span { color: #ff6b6b; }
.rf-ring.low { animation: rfPulse 1s infinite; }
@keyframes rfPulse { 50%{ box-shadow: 0 0 0 6px rgba(255,80,80,.18); } }
.rf-score-wrap { flex: 1; text-align: center; }
.rf-score { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.rf-score.bump { animation: rfBump .3s ease; }
@keyframes rfBump { 0%{transform:scale(1)} 40%{transform:scale(1.22); color: var(--rf-accent)} 100%{transform:scale(1)} }
.rf-score-lbl { font-size: 11px; color: #9a93c9; margin-top: 2px; max-width: 240px; margin-inline: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-combo { width: 60px; flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rf-flame { font-size: 22px; display: inline-block; transition: transform .18s cubic-bezier(.34,1.56,.64,1); filter: grayscale(1) opacity(.5); }
.rf-combo.hot .rf-flame { filter: none; animation: rfFlame .6s infinite alternate; }
@keyframes rfFlame { to { transform: scale(1.15) translateY(-1px); } }
.rf-combo b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rf-combo small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #9a93c9; }

/* ── Question + choices ── */
.rf-qbox { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 22px; max-width: 720px; margin: 0 auto; width: 100%; }
.rf-topic { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-accent); background: color-mix(in srgb, var(--rf-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rf-accent) 40%, transparent); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.rf-q { font-size: clamp(18px,3.4vw,25px); font-weight: 700; line-height: 1.32; text-align: center; }
.rf-q.swap { opacity: 0; transform: translateY(8px); }
.rf-q { transition: opacity .22s, transform .22s; }
.rf-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 22px 26px; max-width: 720px; margin: 0 auto; width: 100%; }
@media (max-width: 520px) { .rf-choices { grid-template-columns: 1fr; } }
.rf-choice {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 13px 15px; font-size: 15px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 14px 24px -14px rgba(0,0,0,.55);
  transition: transform .08s, border-color .15s, background .15s, box-shadow .08s; min-height: 62px;
}
.rf-choice:hover { transform: translateY(-2px); border-color: var(--rf-accent); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); }
.rf-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.rf-key {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-style: normal; font-weight: 900; font-size: 14px; color: #fff;
  background: color-mix(in srgb, var(--rf-accent) 60%, #2a2350); border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.rf-choice > span { flex: 1; }
.rf-choice.correct { border-color: #34d399; background: linear-gradient(180deg, rgba(52,211,153,.32), rgba(52,211,153,.12)); box-shadow: 0 5px 0 rgba(16,120,90,.55); animation: rfCorrect .4s ease; }
.rf-choice.correct .rf-key { background: #10b981; }
.rf-choice.wrong { border-color: #fb7185; background: linear-gradient(180deg, rgba(251,113,133,.30), rgba(251,113,133,.10)); box-shadow: 0 5px 0 rgba(150,40,60,.55); animation: rfWrongFlash .4s ease; }
.rf-choice.wrong .rf-key { background: #f43f5e; }
.rf-choice.reveal { border-color: #34d399; background: linear-gradient(180deg, rgba(52,211,153,.24), rgba(52,211,153,.08)); }
.rf-choice.reveal .rf-key { background: #10b981; }
.rf-choice.reveal::after { content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #34d399; font-weight: 900; }
@keyframes rfCorrect { 0%{transform:scale(1)} 45%{transform:scale(1.04) translateY(-1px)} 100%{transform:scale(1)} }
@keyframes rfWrongFlash { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Quit button (HUD) */
.rf-quit { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #fff; font-size: 15px; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s; }
.rf-quit:hover { background: rgba(251,113,133,.25); border-color: rgba(251,113,133,.55); }

/* Cartoon mascot — reacts to every answer */
.rf-mascot { position: absolute; right: 16px; bottom: 14px; font-size: 44px; line-height: 1; z-index: 30; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); animation: rfMascotIdle 2.8s ease-in-out infinite; }
@keyframes rfMascotIdle { 50% { transform: translateY(-5px) rotate(-3deg); } }
.rf-mascot.happy { animation: rfMascotHappy .55s cubic-bezier(.34,1.56,.64,1); }
.rf-mascot.sad { animation: rfMascotSad .55s ease; }
@keyframes rfMascotHappy { 0%{transform:scale(1)} 30%{transform:scale(1.45) rotate(10deg)} 60%{transform:scale(1.12) rotate(-7deg)} 100%{transform:scale(1)} }
@keyframes rfMascotSad { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(7px) rotate(-4deg)} 70%{transform:translateY(2px) rotate(4deg)} }

/* Center cartoon reaction (NICE! / ON FIRE! / OOPS!) */
.rf-react { position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%); z-index: 45; pointer-events: none; text-align: center; opacity: 0; }
.rf-react.show { animation: rfReact .75s cubic-bezier(.18,1.5,.4,1) forwards; }
.rf-react-emo { display: block; font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.rf-react-word { display: block; margin-top: 2px; font-family: 'Lora', Georgia, serif; font-weight: 800; font-size: 30px; letter-spacing: .02em; text-shadow: 0 2px 16px rgba(0,0,0,.55); color: #fff; }
.rf-react.neg .rf-react-word { color: #fda4af; }
.rf-react.mile .rf-react-word { font-size: 40px; background: linear-gradient(120deg,#ffd76a,#ff7a59); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes rfReact { 0%{opacity:0; transform:translate(-50%,-30%) scale(.4) rotate(-9deg)} 22%{opacity:1; transform:translate(-50%,-50%) scale(1.18) rotate(4deg)} 68%{opacity:1; transform:translate(-50%,-54%) scale(1)} 100%{opacity:0; transform:translate(-50%,-84%) scale(.95)} }

/* Floating "+score" popups */
.rf-float { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.rf-pop { position: absolute; transform: translate(-50%,-50%); font-family: 'Lora', Georgia, serif; font-weight: 800; font-size: 26px; text-shadow: 0 2px 12px rgba(0,0,0,.5); animation: rfFloat .9s ease-out forwards; }
@keyframes rfFloat { 0%{opacity:0; transform:translate(-50%,-30%) scale(.6)} 25%{opacity:1; transform:translate(-50%,-90%) scale(1.1)} 100%{opacity:0; transform:translate(-50%,-180%) scale(1)} }

/* ── Results ── */
.rf-results { align-items: center; justify-content: center; padding: 24px; }
.rf-res-card { width: 100%; max-width: 420px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 30px 26px; box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: rfRise .5s ease; }
@keyframes rfRise { 0%{opacity:0; transform:translateY(18px) scale(.96)} 100%{opacity:1; transform:none} }
.rf-res-title { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.rf-res-score { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 72px; line-height: 1; margin: 6px 0 4px; background: linear-gradient(120deg,#c4b5fd,#8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.rf-res-best { font-size: 12.5px; color: #b9b3dc; margin-bottom: 18px; }
.rf-res-stats { display: flex; gap: 10px; margin-bottom: 22px; }
.rf-stat { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 12px 6px; }
.rf-stat b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rf-stat small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9a93c9; }
.rf-res-btns { display: flex; flex-direction: column; gap: 10px; }
.rf-btn { cursor: pointer; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .15s, transform .1s; }
.rf-btn:hover { background: rgba(255,255,255,.14); }
.rf-btn:active { transform: scale(.98); }
.rf-btn-primary { background: linear-gradient(135deg,#5841D8,#7b63ff); border: none; box-shadow: 0 12px 26px -10px rgba(88,65,216,.7); }
.rf-btn-ghost { background: transparent; color: #b9b3dc; }

/* ── Launcher card on the galaxy home ── */
.rf-launch {
  position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
  width: calc(100% - 40px); max-width: 1100px; margin: 4px auto 18px; padding: 16px 18px; overflow: hidden;
  border-radius: 20px; color: #fff; border: 1px solid rgba(124,99,255,.35);
  background: linear-gradient(120deg, #4a36c8 0%, #7b63ff 55%, #9a7bff 100%);
  box-shadow: 0 18px 36px -16px rgba(88,65,216,.7);
  transition: transform .14s, box-shadow .2s;
}
.rf-launch:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -16px rgba(88,65,216,.8); }
.rf-launch-glow { position: absolute; top: -60%; right: -10%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); pointer-events: none; animation: rfGlow 4s ease-in-out infinite; }
@keyframes rfGlow { 50% { transform: translateX(-30px) scale(1.1); opacity: .8; } }
.rf-launch-ico { font-size: 34px; width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); animation: rfBolt 2.2s ease-in-out infinite; }
@keyframes rfBolt { 0%,92%,100%{transform:none} 94%{transform:rotate(-8deg) scale(1.08)} 97%{transform:rotate(6deg) scale(1.08)} }
.rf-launch-txt { flex: 1; min-width: 0; }
.rf-launch-txt b { display: block; font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 700; }
.rf-launch-txt span { font-size: 12.5px; color: rgba(255,255,255,.88); }
.rf-launch-cta { flex-shrink: 0; font-weight: 800; font-size: 13px; letter-spacing: .06em; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); padding: 9px 14px; border-radius: 999px; }
@media (max-width: 560px) { .rf-launch-txt b { font-size: 17px; } .rf-launch-cta { display: none; } }

body.rf-open { overflow: hidden; }