/* ============================================================
   ADVENTURE OF CLAIR — GAME CSS  (Bundle 3 Reference-based)
   ============================================================ */

#screen-game {
  background:#000; overflow:hidden;
  position:fixed; inset:0; z-index:var(--z-max);
}

#game-root {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}

/* ── SCENE WRAP — Naya lives here, world scrolls inside ── */
.g-scene-wrap {
  flex:1; position:relative; overflow:hidden; min-height:0;
  /* Sky colour set dynamically by buildWorld via sw.style.background */
  background:#020a06;
}

/* ── LAYER 1: FAR BG (stars, moon, mountains) — 12% speed ── */
.bg-layer {
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  will-change:transform;
}
.bg-layer-far {
  z-index:1;   /* behind everything */
}
.bg-layer-mid {
  z-index:2;   /* mid-distance tree line */
}
#prog-naya {
    transform: translateY(-50%) translateX(-50%) scaleX(-1);
}
/* ── LAYER 3: WORLD (500vw scrolling div) — 100% speed ───── */
#g-world {
  position:absolute; top:0; left:0;
  height:100%; width:500vw;
  z-index:3;
  will-change:transform;
}

/* ── LAYER 4: FOREGROUND (500vw) — 145% speed ────────────── */
#g-foreground {
  position:absolute; top:0; left:0;
  height:100%; width:500vw;
  z-index:5;
  pointer-events:none;
  will-change:transform;
}

/* ── NAYA CHARACTER — FIXED POSITION ─────────────────────── */
.naya-char {
  position:absolute;
  left:38%;
  bottom:7%;
  z-index:10;
  transform:translateX(-50%);
  pointer-events:none;
}

.naya-inner {
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}

.naya-shadow {
  position:absolute; bottom:-6px; left:50%;
  transform:translateX(-50%);
  width:50px; height:12px;
  background:rgba(0,0,0,0.35);
  border-radius:50%;
}

/* Naya animation keyframes */
@keyframes naya-idle {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-4px); }
}
@keyframes hero-float {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%      { transform:translateY(-8px) rotate(2deg); }
}
@keyframes naya-celebrate {
  0%   { transform:translateY(0) scale(1); }
  100% { transform:translateY(-12px) scale(1.05); }
}
@keyframes naya-impact-fly {
  0%   { transform:translateX(0); }
  40%  { transform:translateX(20px); }
  100% { transform:translateX(0); }
}
.naya-impact-fly { animation:naya-impact-fly 0.7s ease !important; }

/* ── STEP STONES ─────────────────────────────────────────── */
.step-stone {
  position:absolute; z-index:5;
  width:44px; height:22px;
  display:flex; align-items:center; justify-content:center;
}

.stone-base {
  width:44px; height:22px;
  border-radius:50%;
  background:radial-gradient(ellipse,#3a3020,#1a1508);
  border:2px solid rgba(255,255,255,0.08);
  box-shadow:0 3px 8px rgba(0,0,0,0.5);
  transition:all 0.4s ease;
}

.step-stone.danger .stone-base {
  background:radial-gradient(ellipse,#3a0808,#1a0404);
  border-color:rgba(200,0,0,0.25);
}

.step-stone.revealed .stone-base {
  background:radial-gradient(ellipse,#8b6820,#4a3810);
  border-color:rgba(245,200,66,0.35);
  box-shadow:0 3px 12px rgba(0,0,0,0.4), 0 0 8px rgba(245,200,66,0.2);
}

.step-stone.naya-here .stone-base {
  background:radial-gradient(ellipse,#f5c842,#c89820);
  border-color:rgba(245,200,66,0.8);
  box-shadow:0 0 18px rgba(245,200,66,0.6);
  transform:scale(1.15);
}

/* ── DESTINATION HUT ─────────────────────────────────────── */
.dest-hut {
  position: absolute;
  bottom: 14%;
  z-index: 6;
  filter: drop-shadow(0 0 12px rgba(245,200,66,0.3));
  animation: orb-pulse 3s ease-in-out infinite;
  /* left + transform:translateX(-50%) set inline by buildHut() per step position */
}

/* ── DANGER ZONE ─────────────────────────────────────────── */
.danger-zone-ground {
  /* Position, width, background all set inline by buildDangerZone() */
  z-index: 4;
}

/* ── GHOST ───────────────────────────────────────────────── */
.ghost-wrap {
  position:absolute; bottom:15%; left:-160px;
  z-index:8; opacity:0;
  transition:left 0.6s ease, opacity 0.4s ease;
  pointer-events:none;
}
.ghost-wrap.spawned  { opacity:1; }
.ghost-wrap.approach { left:2%; animation:ghost-hover 1.5s ease-in-out infinite; }
@keyframes ghost-hover {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}

/* ── GEM ─────────────────────────────────────────────────── */
.world-gem { z-index:8; }
@keyframes gem-float {
  0%,100% { transform:translateX(-50%) translateY(0) rotate(0); filter:drop-shadow(0 0 8px rgba(0,206,201,.7)); }
  50%      { transform:translateX(-50%) translateY(-10px) rotate(8deg); filter:drop-shadow(0 0 18px rgba(0,206,201,1)); }
}
@keyframes gem-collect {
  0%   { transform:translateX(-50%) scale(1) translateY(0); opacity:1; }
  60%  { transform:translateX(-50%) scale(1.6) translateY(-24px); opacity:0.7; }
  100% { transform:translateX(-50%) scale(0) translateY(-44px); opacity:0; }
}

/* ── SWING SYSTEM ────────────────────────────────────────── */
.swing-wrap {
  position:absolute;
  top:0; left:38%;
  transform-origin:top center;
  transform:translateX(-50%);
  z-index:40;
  pointer-events:none;
  animation:swing-in 0.48s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes swing-in {
  0%   { transform:translateX(-50%) rotate(-65deg); }
  70%  { transform:translateX(-50%) rotate(12deg); }
  85%  { transform:translateX(-50%) rotate(-4deg); }
  100% { transform:translateX(-50%) rotate(6deg); }
}

.swing-bounce-back {
  animation:swing-out 0.4s ease forwards !important;
}
@keyframes swing-out {
  0%   { transform:translateX(-50%) rotate(6deg); opacity:1; }
  100% { transform:translateX(-50%) rotate(-50deg); opacity:0; }
}

.swing-rope {
  width:5px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.3),#5a3a10);
  border-radius:3px;
  margin:0 auto;
  /* height set dynamically based on device */
  min-height:50px;
}

.swing-ball {
  width:52px; height:52px;
  position:relative;
  margin:0 auto;
}

.swing-ball-core {
  position:absolute; inset:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8a7a5a,#4a3a28);
  box-shadow:inset -4px -4px 8px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.4);
}

.swing-spikes { position:absolute; inset:0; }
.swing-spike {
  position:absolute;
  top:50%; left:50%;
  margin-top:-2px; margin-left:-2px;
  width:14px; height:4px;
  background:linear-gradient(to right,#8a6a40,#5a3a18);
  border-radius:0 2px 2px 0;
  transform-origin:0 50%;
}

/* ── WOUND / BLOOD / IMPACT ──────────────────────────────── */
.wound-mark {
  position:absolute;
  background:rgba(200,0,0,0.75);
  border-radius:2px;
  pointer-events:none;
}

.blood-drop {
  position:absolute;
  border-radius:50% 50% 50% 0;
  background:rgba(180,0,0,0.85);
  pointer-events:none;
  animation:blood-fly 0.6s ease-out forwards;
  transform-origin:left center;
}
@keyframes blood-fly {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--bx),var(--by)) scale(0.5); opacity:0; }
}

.blood-smear {
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,0,0,.4) 0%,transparent 70%);
  pointer-events:none;
}

.blood-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(180,0,0,var(--vig-opacity,.2)) 100%);
  pointer-events:none;
  animation:blood-vignette-anim 0.6s ease forwards;
}
@keyframes blood-vignette-anim {
  0%   { opacity:1; }
  100% { opacity:0; }
}

.impact-ring {
  position:absolute;
  transform:translate(-50%,-50%);
  width:10px; height:10px;
  border-radius:50%;
  border:3px solid rgba(255,100,0,0.8);
  pointer-events:none;
  animation:impact-ring-expand 0.5s ease-out forwards;
}
@keyframes impact-ring-expand {
  0%   { width:10px; height:10px; opacity:1; border-color:rgba(255,100,0,.8); }
  100% { width:100px; height:100px; opacity:0; border-color:rgba(255,200,0,.2); margin:-45px; }
}

.shield-spark {
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:#74C0FC;
  pointer-events:none;
  box-shadow:0 0 4px rgba(116,192,252,.8);
  animation:shield-spark-fly 0.6s ease-out forwards;
}
@keyframes shield-spark-fly {
  0%   { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(0.2); opacity:0; }
}

.shield-hit-bubble {
  position:absolute; inset:-20px;
  border-radius:50%;
  border:3px solid rgba(116,192,252,.9);
  background:rgba(116,192,252,.08);
  pointer-events:none;
  animation:shield-bubble-pop 0.7s ease-out forwards;
}
@keyframes shield-bubble-pop {
  0%   { transform:scale(0.8); opacity:1; }
  50%  { transform:scale(1.4); opacity:0.7; }
  100% { transform:scale(2);   opacity:0; }
}

.shield-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(74,144,217,.15) 0%,transparent 60%);
  pointer-events:none;
  animation:blood-vignette-anim 0.6s ease forwards;
}

/* ── SCREEN SHAKES ───────────────────────────────────────── */
.shake-light { animation:shake-light-anim .35s ease; }
.shake-med   { animation:shake-med-anim   .45s ease; }
.shake-hard  { animation:shake-hard-anim  .55s ease; }
@keyframes shake-light-anim { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 75%{transform:translate(3px,-2px)} }
@keyframes shake-med-anim   { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-5px,3px)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-3px,4px)} 80%{transform:translate(3px,-3px)} }
@keyframes shake-hard-anim  { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-7px,4px)} 30%{transform:translate(7px,-4px)} 50%{transform:translate(-5px,6px)} 70%{transform:translate(6px,-5px)} 90%{transform:translate(-3px,2px)} }

/* ── HIT LABEL ───────────────────────────────────────────── */
.hit-label {
  position:absolute;
  font-family:var(--font-display);
  font-size:clamp(1rem,3vw,1.4rem);
  font-weight:900;
  text-shadow:0 0 10px currentColor, 2px 2px 4px rgba(0,0,0,.8);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:hit-label-pop 1s ease-out forwards;
  z-index:50;
  white-space:nowrap;
}
@keyframes hit-label-pop {
  0%   { transform:translate(-50%,-50%) scale(0.5); opacity:1; }
  30%  { transform:translate(-50%,-70%) scale(1.2); }
  100% { transform:translate(-50%,-90%) scale(0.9); opacity:0; }
}

/* ── FLASH OVERLAYS ──────────────────────────────────────── */
.correct-flash, .wrong-flash {
  position:absolute; inset:0; z-index:30; pointer-events:none;
  animation:flash-fade 0.4s ease forwards;
}
.correct-flash { background:rgba(46,204,113,.15); }
.wrong-flash   { background:rgba(231,76,60,.2); }
@keyframes flash-fade { 0%{opacity:1} 100%{opacity:0} }

/* ── GHOST OVERLAYS ──────────────────────────────────────── */
.ghost-warning {
  position:absolute; inset:0; z-index:20; pointer-events:none;
  border:4px solid transparent; border-radius:0;
  transition:border-color .3s;
}
.ghost-warning.show { border-color:rgba(200,0,0,.5); animation:ghost-warn-pulse 0.5s ease-in-out 4; }
@keyframes ghost-warn-pulse { 0%,100%{border-color:rgba(200,0,0,.2)} 50%{border-color:rgba(200,0,0,.8)} }

.ghost-scene-dark {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:rgba(0,0,0,0); transition:background 1s;
}
.ghost-scene-dark.active { background:rgba(0,0,0,.35); }

.ghost-darkness {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at 38% 50%,transparent 30%,rgba(0,0,0,0) 100%);
  transition:background 2s;
}

.hut-enter-overlay {
  position:absolute; inset:0; z-index:50; pointer-events:none;
  background:rgba(245,200,66,0); transition:background 1.5s;
}
.hut-enter-overlay.active { background:rgba(245,200,66,.4); }

.qs-death-overlay {
  position:absolute; inset:0; z-index:50; pointer-events:none;
  background:rgba(180,0,0,0); transition:background 1s;
}
.qs-death-overlay.active { background:rgba(180,0,0,.5); }

.power-overlay {
  position:absolute; inset:0; z-index:35; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.power-overlay.show { opacity:1; }
.power-overlay-ice    { background:radial-gradient(ellipse at center,rgba(116,185,255,.15) 0%,transparent 70%); }
.power-overlay-reveal { background:radial-gradient(ellipse at center,rgba(155,89,182,.12) 0%,transparent 70%); }
.power-overlay-double { background:radial-gradient(ellipse at center,rgba(255,215,0,.12) 0%,transparent 70%); }

.hut-prox-msg {
  position:absolute; bottom:22%; left:50%;
  transform:translateX(-50%);
  background:rgba(245,200,66,.9); color:#1a0d00;
  font-weight:800; font-size:.85rem;
  padding:6px 16px; border-radius:var(--radius-full);
  z-index:25; opacity:0; pointer-events:none;
  transition:opacity .4s; white-space:nowrap;
}
.hut-prox-msg.show { opacity:1; }

/* ── XP FLOAT ────────────────────────────────────────────── */
.xp-float {
  position:absolute;
  font-size:.88rem; font-weight:800;
  color:#2ecc71; text-shadow:0 0 8px rgba(46,204,113,.8);
  white-space:nowrap;
  left:50%; top:30%;
  animation:xp-float-up 1.1s ease-out forwards;
  pointer-events:none; z-index:30;
}
@keyframes xp-float-up {
  0%   { transform:translateX(-50%) translateY(0); opacity:1; }
  100% { transform:translateX(-50%) translateY(-55px); opacity:0; }
}

/* ── STEP PARTICLE ───────────────────────────────────────── */
.step-particle {
  position:absolute; border-radius:50%;
  pointer-events:none;
  animation:step-particle-fly .7s ease-out forwards;
}
@keyframes step-particle-fly {
  0%   { transform:translate(-50%,-50%) scale(1); opacity:0.9; }
  100% { transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(0); opacity:0; }
}

/* ── NAYA STEP GLOW ──────────────────────────────────────── */
.naya-step-glow {
  position:absolute; inset:-12px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,200,66,.35) 0%,transparent 70%);
  animation:naya-glow-fade .7s ease-out forwards;
  pointer-events:none;
}
@keyframes naya-glow-fade { 0%{opacity:1;transform:scale(0.8)} 100%{opacity:0;transform:scale(1.6)} }

/* ── HUD ─────────────────────────────────────────────────── */
.game-hud {
  position:absolute; top:0; left:0; right:0;
  z-index:60; display:flex; flex-direction:column;
  gap:5px; padding:8px 10px 5px;
  pointer-events:none;
}

.hud-row {
  display:flex; align-items:center;
  justify-content:space-between; gap:6px;
}

.hud-glass {
  background:rgba(0,0,0,0.62);
  backdrop-filter:blur(10px);
  border-radius:var(--radius-md);
  padding:5px 10px;
  border:1px solid rgba(255,255,255,0.07);
}

.hud-audio-btn {
  width:34px; height:34px; border-radius:var(--radius-full);
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.15);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; cursor:pointer; pointer-events:all;
  transition:all var(--transition-fast); backdrop-filter:blur(8px);
  flex-shrink:0;
}
.hud-audio-btn:active { transform:scale(0.88); }
.hud-audio-btn.muted  { opacity:0.5; }

/* ── POWERS BAR ──────────────────────────────────────────── */
.hud-powers {
  display:flex; gap:5px; align-items:center;
  flex-wrap:wrap; flex:1; pointer-events:all;
}

.pw {
  position:relative;
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.7);
  border:1.5px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; cursor:pointer;
  transition:all var(--transition-fast);
  backdrop-filter:blur(6px);
  color:white;
}
/* ── POWERS 3-STATE SYSTEM ──────────────────────────────── */
/* State 1 — available: white icon, dark bg (default) */
.pw.pw-available {
  background: rgba(0,0,0,.72);
  border-color: rgba(255,255,255,.18);
  color: white;
  opacity: 1;
  filter: none;
  cursor: pointer;
}
.pw.pw-available:hover  { border-color:rgba(255,255,255,.45); transform:scale(1.1); }
.pw.pw-available:active { transform:scale(0.9); }

/* State 2 — gold active: black icon, gold background, glowing */
.pw.pw-gold-active {
  background: var(--gold) !important;
  border-color: var(--gold-dark) !important;
  color: #1a0d00 !important;
  opacity: 1;
  filter: none;
  cursor: pointer;
  animation: pw-active-glow 0.8s ease-in-out infinite;
  transform: scale(1.08);
}
.pw.pw-gold-active i { color: #1a0d00 !important; }

/* State 3 — depleted/spent: greyed out, no interaction */
.pw.pw-spent {
  opacity: 0.28;
  filter: grayscale(1);
  cursor: not-allowed;
  background: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.06);
  pointer-events: none;
}


@keyframes pw-active-glow {
  0%,100% { box-shadow:0 0 14px rgba(255,215,0,.5); }
  50%      { box-shadow:0 0 26px rgba(255,215,0,.9); }
}
@keyframes power-rec-pulse {
  0%,100% { box-shadow:0 0 14px rgba(255,215,0,.6); transform:scale(1); }
  50%      { box-shadow:0 0 28px rgba(255,215,0,1);  transform:scale(1.1); }
}

.pw-count {
  position:absolute; bottom:-4px; right:-4px;
  width:16px; height:16px;
  border-radius:var(--radius-full);
  background:var(--color-bg); border:1.5px solid rgba(255,255,255,.2);
  color:white; font-size:.55rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* Tooltip BELOW the icon */
.pw-tip {
  position:absolute;
  top:calc(100% + 7px);
  left:50%; transform:translateX(-50%);
  background:rgba(10,14,26,.97);
  border:1.5px solid var(--gold);
  border-radius:var(--radius-sm);
  padding:5px 9px;
  font-size:.65rem; font-weight:600;
  color:var(--gold);
  white-space:nowrap;
  z-index:80; pointer-events:none;
  animation:tooltip-pop .3s cubic-bezier(.34,1.56,.64,1);
}
.pw-tip::before {
  content:''; position:absolute;
  bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent;
  border-bottom-color:var(--gold);
}

.pw-tooltip {
  position:absolute; bottom:110%; left:50%; transform:translateX(-50%);
  background:rgba(10,14,26,.95); color:var(--text-primary);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:8px 12px; font-size:.78rem; white-space:nowrap;
  z-index:100; opacity:0; pointer-events:none; transition:opacity .3s;
  max-width:200px; white-space:normal; text-align:center;
}
.pw-tooltip.show { opacity:1; }

@keyframes tooltip-pop {
  from { transform:translateX(-50%) scale(0.7); opacity:0; }
  to   { transform:translateX(-50%) scale(1);   opacity:1; }
}

/* ── TIMER ───────────────────────────────────────────────── */
.hud-timer-wrap { flex-shrink:0; }
.timer-val {
  font-size:.92rem; font-weight:800; color:white;
  font-family:var(--font-body); white-space:nowrap;
}
.timer-val.danger      { color:#ff6b6b; animation:timer-pulse .5s ease-in-out infinite; }
.timer-val.ghost-danger{ color:#ff0000; animation:timer-pulse .3s ease-in-out infinite; }
@keyframes timer-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.timer-ring-wrap.shake { animation:shake-light-anim .3s ease; }

/* ── HEALTH ──────────────────────────────────────────────── */
.hud-health-wrap {
  display:flex; align-items:center; gap:6px;
  max-width:130px; flex-shrink:0;
}
.hud-health-icon { font-size:.75rem; color:#ff6b6b; flex-shrink:0; }
.hud-health-track {
  flex:1; height:7px;
  background:rgba(0,0,0,.5); border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.1); overflow:hidden;
}
.hud-health-fill {
  height:100%;
  /* Default: green = high health = good chance of finishing in time */
  background:linear-gradient(90deg,#27ae60,#2ecc71);
  border-radius:var(--radius-full); transition:width .4s ease;
}
.hud-health-fill.medium { background:linear-gradient(90deg,#e67e22,#f39c12); }
.hud-health-fill.low    { background:linear-gradient(90deg,#c0392b,#e74c3c); animation:health-flicker .4s ease-in-out infinite; }
@keyframes health-flicker { 0%,100%{opacity:1} 50%{opacity:.5} }
.hud-health-text { font-size:.6rem; color:rgba(255,255,255,.6); font-weight:700; flex-shrink:0; }

/* ── PROGRESS BAR ────────────────────────────────────────── */
.hud-progress-wrap {
  flex:1; display:flex; align-items:center; gap:5px;
}
.prog-dl, .prog-dr { font-size:.6rem; color:rgba(255,255,255,.7); font-weight:700; flex-shrink:0; white-space:nowrap; max-width:60px; overflow:hidden; text-overflow:ellipsis; }
.prog-track {
  flex:1; height:10px; position:relative;
  background:rgba(0,0,0,.5); border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.1); overflow:visible;
}
.prog-dz {
  position:absolute; left:0; top:0; bottom:0; z-index:1;
  background:linear-gradient(90deg,#cc0000,rgba(180,0,0,.4));
  border-radius:var(--radius-full) 0 0 var(--radius-full);
  pointer-events:none;
}
.prog-fill {
  position:absolute; left:0; top:0; bottom:0; z-index:2;
  /* Always yellow — represents player's safe progress */
  background:linear-gradient(90deg,#c8861a,#f5c842,#ffe066);
  border-radius:var(--radius-full); transition:width .5s ease;
}
.prog-naya {
  position:absolute; top:50%; z-index:4;
  /* JS sets left:X% and translateX(-50%) for centering — no vertical flip needed */
  transform:translateY(-50%) translateX(-50%);
  font-size:.9rem; line-height:1;
  transition:left .5s ease;
  filter:drop-shadow(0 0 4px rgba(255,215,0,.6));
  pointer-events:none;
}
.prog-ghost {
  position:absolute; top:50%; z-index:3;
  transform:translateY(-50%) translateX(-50%);
  font-size:.85rem; line-height:1; transition:left .5s ease;
  filter:drop-shadow(0 0 5px rgba(200,0,0,.7));
  pointer-events:none;
}

/* ── FEEDBACK TOAST ──────────────────────────────────────── */
.qa-feedback-toast {
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  padding:7px 18px; border-radius:var(--radius-full);
  font-size:.85rem; font-weight:700;
  pointer-events:none; z-index:55; opacity:0;
  transition:opacity .2s; white-space:nowrap;
}
.qa-feedback-toast.show    { opacity:1; animation:toast-pop .25s ease; }
.qa-feedback-toast.correct { background:rgba(46,204,113,.9); color:white; }
.qa-feedback-toast.wrong   { background:rgba(231,76,60,.9);  color:white; }
@keyframes toast-pop { 0%{transform:translateX(-50%) scale(.8)} 60%{transform:translateX(-50%) scale(1.05)} 100%{transform:translateX(-50%) scale(1)} }

/* ── QUESTION PANEL ──────────────────────────────────────── */
.qa-panel {
  background:rgba(8,12,24,.98); backdrop-filter:blur(12px);
  border-top:1px solid var(--color-border);
  padding:10px 12px 12px; z-index:30;
  position:relative; flex-shrink:0;
}
.qa-panel.qa-entering { animation:panel-enter .25s ease; }
@keyframes panel-enter { from{opacity:.5;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.qa-meta-row {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
}
.qa-diff-badge {
  font-size:.65rem; font-weight:700; padding:2px 7px;
  border-radius:var(--radius-full);
}
.diff-easy   { background:rgba(46,204,113,.2);  color:#2ecc71; }
.diff-med    { background:rgba(230,126,34,.2);   color:#e67e22; }
.diff-hard   { background:rgba(231,76,60,.2);    color:#e74c3c; }
.qa-q-num    { font-size:.65rem; color:var(--text-muted); font-weight:600; }

.qa-q {
  font-size:clamp(.8rem,2.5vw,.94rem);
  color:var(--text-primary); font-weight:600;
  text-align:center; margin-bottom:9px;
  line-height:1.4; min-height:36px;
}

.qa-opts {
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
}

.qa-opt {
  padding:9px 11px;
  background:var(--color-bg-elevated);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:clamp(.72rem,2.2vw,.85rem); font-weight:600;
  font-family:var(--font-body); cursor:pointer;
  transition:all var(--transition-fast);
  text-align:left; display:flex; align-items:center; gap:7px;
  min-height:42px;
}
.qa-opt .ok {
  width:20px; height:20px; border-radius:var(--radius-full);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.3);
  color:var(--gold); font-size:.65rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.qa-opt:hover  { border-color:var(--color-border-hover); background:var(--color-bg-card); }
.qa-opt:active { transform:scale(.96); }
.qa-opt.correct{ border-color:var(--accent-green); background:rgba(46,204,113,.18); animation:opt-correct .35s ease; }
.qa-opt.wrong  { border-color:var(--accent-red);   background:rgba(231,76,60,.18);  animation:opt-wrong .4s ease; }
.qa-opt.reveal { border-color:var(--accent-green); background:rgba(46,204,113,.1); }
.qa-opt.removed{ opacity:.18; pointer-events:none; filter:blur(2px); }
@keyframes opt-correct { 0%{background:rgba(46,204,113,.5)} 100%{background:rgba(46,204,113,.18)} }
@keyframes opt-wrong   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ── RESULT SCREEN ───────────────────────────────────────── */
.game-result {
  position:absolute; inset:0; z-index:200;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--space-xl) var(--space-lg);
  background:radial-gradient(ellipse at top,#141B2E 0%,#0A0E1A 70%);
  animation:result-in .5s ease; overflow-y:auto;
}
@keyframes result-in { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

.result-image-wrap {
  width:110px; height:110px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-md); font-size:3.2rem; border:3px solid;
  transition: width 0.4s ease, height 0.4s ease, border-radius 0.4s ease;
  overflow:visible;
}
/* Expand when book is revealed */
.result-image-wrap:has(.result-book-reveal) {
  width:auto; height:auto; border-radius:var(--radius-xl);
  padding:16px 20px;
  background:rgba(245,200,66,0.06) !important;
  border-color:rgba(245,200,66,0.4) !important;
}
.result-image-wrap.success { border-color:var(--gold);       box-shadow:0 0 36px rgba(255,215,0,.35);  background:rgba(255,215,0,.08); }
.result-image-wrap.failed  { border-color:var(--accent-red); box-shadow:0 0 36px rgba(231,76,60,.35);  background:rgba(231,76,60,.08); }

.result-title { font-family:var(--font-display); font-size:clamp(1.4rem,5vw,2rem); margin-bottom:var(--space-xs); text-align:center; }
.result-title.success { color:var(--gold); }
.result-title.failed  { color:var(--accent-red); }
.result-subtitle { font-size:.88rem; color:var(--text-secondary); text-align:center; margin-bottom:var(--space-lg); max-width:300px; }

.result-stats-card {
  background:var(--color-bg-card); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-lg);
  width:100%; max-width:340px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-md);
  margin-bottom:var(--space-lg); text-align:center;
}
.result-stat { display:flex; flex-direction:column; gap:4px; align-items:center; }
.result-stat-value { font-size:1.2rem; font-weight:800; color:var(--text-primary); }
.result-stat-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }

.result-stars { display:flex; gap:var(--space-sm); justify-content:center; margin-bottom:var(--space-lg); }
.result-stars i { font-size:1.8rem; color:var(--text-muted); transition:all .3s ease; }
.result-stars i.earned { color:var(--gold); filter:drop-shadow(0 0 6px rgba(255,215,0,.7)); }

.result-actions {
  display:flex; gap:var(--space-sm); justify-content:center;
  width:100%; max-width:340px; flex-wrap:wrap;
}
.result-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:var(--space-sm) var(--space-md);
  background:var(--color-bg-elevated); border:1px solid var(--color-border);
  border-radius:var(--radius-md); color:var(--text-secondary);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  cursor:pointer; transition:all var(--transition-fast);
  font-family:var(--font-body); font-weight:700; flex:1; min-width:62px;
}
.result-action-btn i { font-size:1.1rem; }
.result-action-btn:hover { border-color:var(--color-border-hover); color:var(--text-primary); }
.result-action-btn.primary-action { background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.4); color:var(--gold); }

/* ── MISC KEYFRAMES ──────────────────────────────────────── */
@keyframes orb-pulse     { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.08);opacity:1} }
@keyframes star-twinkle  { 0%{opacity:.2} 100%{opacity:.9} }
.intro-firefly {
  position:absolute; border-radius:50%;
  background:rgba(255,230,120,.85); pointer-events:none;
  animation:firefly-drift ease-in-out infinite;
  box-shadow:0 0 4px 2px rgba(255,230,80,.4);
}
@keyframes firefly-drift {
  0%,100%{transform:translate(0,0);opacity:.8}
  50%{transform:translate(var(--fx),var(--fy));opacity:.2}
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (min-width:768px) {
  .qa-panel  { padding:14px 24px 16px; }
  .qa-opt    { font-size:.9rem; padding:12px 16px; }
  .qa-q      { font-size:1rem; }
}
@media (max-height:580px) and (orientation:landscape) {
  .qa-panel  { padding:5px 12px 8px; }
  .qa-q      { font-size:.76rem; min-height:28px; margin-bottom:5px; }
  .qa-opt    { padding:6px 10px; font-size:.72rem; min-height:34px; }
  .qa-opts   { gap:4px; }
  .game-hud  { padding:5px 8px 3px; gap:3px; }
  .swing-rope{ min-height:30px; }
}

/* ── FOOT GLOW (impact on correct step) ─────────────────────── */
.naya-foot-glow {
  width: 70px; height: 20px;
  background: radial-gradient(ellipse, rgba(245,200,66,.55) 0%, transparent 75%);
  border-radius: 50%;
  filter: blur(3px);
  animation: foot-glow-fade 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes foot-glow-fade {
  0%   { transform: translateX(-50%) scale(0.6); opacity: 1; }
  60%  { transform: translateX(-50%) scale(1.3); opacity: 0.7; }
  100% { transform: translateX(-50%) scale(1.8); opacity: 0; }
}

/* ── XP TAG ON ANSWER BUTTON ─────────────────────────────────── */
.btn-xp-tag {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem; font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  pointer-events: none;
  animation: xp-tag-pop 0.3s ease;
}
.btn-xp-tag.gain { background: rgba(46,204,113,.25); color: #2ecc71; }
.btn-xp-tag.loss { background: rgba(231,76,60,.25);  color: #e74c3c; }
@keyframes xp-tag-pop {
  0%   { transform: translateY(-50%) scale(0.6); opacity: 0; }
  60%  { transform: translateY(-50%) scale(1.1); }
  100% { transform: translateY(-50%) scale(1);   opacity: 1; }
}

/* Fix qa-opt to be position:relative for absolute xp tag */
.qa-opt { position: relative; }

/* ── STONES INVISIBLE (system only) ─────────────────────────── */
.step-stone { opacity: 0 !important; pointer-events: none !important; }

/* ============================================================
   BUNDLE 3 — CINEMATICS, PROXIMITY, SHIELD BUBBLE
   ============================================================ */

/* ── SHIELD BUBBLE (persistent around Naya when active) ─────── */
@keyframes shield-bubble-idle {
  0%,100% { box-shadow: 0 0 10px rgba(116,192,252,.4), inset 0 0 10px rgba(116,192,252,.1); transform: scale(1); }
  50%      { box-shadow: 0 0 22px rgba(116,192,252,.8), inset 0 0 18px rgba(116,192,252,.2); transform: scale(1.04); }
}

/* ── DANGER ZONE PROXIMITY STATES ───────────────────────────── */
.danger-zone-ground { transition: opacity 0.5s ease; }

/* 2 steps away — slow red pulse */
.danger-zone-ground.dz-idle {
  animation: dz-idle-pulse 2s ease-in-out infinite;
}
@keyframes dz-idle-pulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(200,0,0,.3)); }
  50%      { filter: drop-shadow(0 0 18px rgba(200,0,0,.7)); }
}

/* 1 step away — fast aggressive shake + bright glow */
.danger-zone-ground.dz-warn {
  animation: dz-warn-shake 0.18s ease-in-out infinite, dz-warn-glow 0.5s ease-in-out infinite;
}
@keyframes dz-warn-shake {
  0%,100% { transform: translateX(-50%) translateX(0); }
  25%     { transform: translateX(-50%) translateX(-4px); }
  75%     { transform: translateX(-50%) translateX(4px); }
}
@keyframes dz-warn-glow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(255,0,0,.5)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255,0,0,1)); }
}

/* Step 0 — full critical animation */
.danger-zone-ground.dz-critical {
  animation: dz-critical 0.12s ease-in-out infinite;
}
@keyframes dz-critical {
  0%,100% { transform: translateX(-50%) scale(1);    filter: drop-shadow(0 0 20px rgba(255,0,0,.8)); }
  50%      { transform: translateX(-50%) scale(1.06); filter: drop-shadow(0 0 40px rgba(255,50,0,1)); }
}

/* ── HUT PROXIMITY STATES ────────────────────────────────────── */
.dest-hut { transition: opacity 0.5s ease; }

@keyframes hut-beacon {
  0%,100% { filter: drop-shadow(0 0 16px rgba(245,200,66,.5)); }
  50%      { filter: drop-shadow(0 0 40px rgba(245,200,66,1)); }
}

/* ── DEATH TEXT OVERLAY ──────────────────────────────────────── */
.death-text {
  position: absolute;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 900;
  color: #ff2200;
  text-shadow: 0 0 30px rgba(255,0,0,.9), 2px 2px 0 rgba(0,0,0,.8);
  letter-spacing: 0.08em;
  z-index: 60;
  pointer-events: none;
  animation: death-text-in 0.4s cubic-bezier(0.34,1.56,.64,1) forwards;
  white-space: nowrap;
}
@keyframes death-text-in {
  0%   { transform: translateX(-50%) scale(0.3); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}

/* ── DANGER PROXIMITY SCREEN VIGNETTE ───────────────────────── */
.g-scene-wrap.danger-near {
  animation: danger-near-flash 0.8s ease forwards;
}
@keyframes danger-near-flash {
  0%   { box-shadow: inset 0 0 0px rgba(200,0,0,0); }
  40%  { box-shadow: inset 0 0 60px rgba(200,0,0,.7); }
  100% { box-shadow: inset 0 0 0px rgba(200,0,0,0); }
}

/* ── XP REDUCTION BADGE (shown on result screen) ────────────── */
.xp-reduced-badge {
  display: inline-block;
  background: rgba(231,76,60,.18);
  color: #e74c3c;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(231,76,60,.35);
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   BUNDLE 3b — POWERS, HEALTH BAR, FEEDBACK, RESULT SCREEN
   ============================================================ */

/* ── POWER RECOMMENDATION STATE ────────────────────────────── */
.pw.pw-rec {
  border-color: var(--gold) !important;
  box-shadow: 0 0 16px rgba(255,215,0,.8) !important;
  animation: power-rec-pulse 0.7s ease-in-out infinite !important;
}

/* ── POWER TIP — floats ABOVE icon, full z-index, no clip ──── */
.pw-tip {
  position: fixed !important;   /* escape HUD stacking context */
  transform: translateX(-50%) translateY(-100%);
  margin-top: -10px;
  background: rgba(10,14,26,.98);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: .72rem; font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  z-index: 9999 !important;
  pointer-events: none;
  animation: tooltip-pop .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 20px rgba(0,0,0,.7);
}
.pw-tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gold);
}
/* Remove old bottom arrow */
.pw-tip::before { display: none; }

/* ── POWER CENTER ANNOUNCEMENT ──────────────────────────────── */
.power-announce-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  animation: power-icon-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.power-announce-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: .06em;
  animation: power-text-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes power-icon-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes power-text-in {
  0%   { transform: scale(0.4) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── CENTER FEEDBACK (big correct / wrong pop) ─────────────── */
.center-feedback {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 68;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0;
  transition: opacity .1s;
}
.center-feedback.show { opacity: 1; }
.center-feedback.cf-correct .cf-icon { color: #2ecc71; text-shadow: 0 0 20px #2ecc71; }
.center-feedback.cf-wrong   .cf-icon { color: #ef4444; text-shadow: 0 0 20px #ef4444; }
.cf-icon {
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-weight: 900;
  font-family: var(--font-display);
  line-height: 1;
  animation: cf-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.cf-text {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.5vw, 1.6rem);
  font-weight: 900;
  letter-spacing: .08em;
  animation: cf-pop .35s cubic-bezier(.34,1.56,.64,1) .05s forwards;
  opacity: 0;
}
.center-feedback.cf-correct .cf-text { color: #2ecc71; text-shadow: 0 0 12px #2ecc7180; }
.center-feedback.cf-wrong   .cf-text { color: #ef4444; text-shadow: 0 0 12px #ef444480; }
.cf-xp {
  font-size: clamp(.75rem, 2.5vw, 1rem);
  font-weight: 800;
  animation: cf-pop .3s cubic-bezier(.34,1.56,.64,1) .1s forwards;
  opacity: 0;
}
.center-feedback.cf-correct .cf-xp { color: #2ecc71; }
.center-feedback.cf-wrong   .cf-xp { color: #f87171; }
@keyframes cf-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ── HEALTH VERTICAL BAR ────────────────────────────────────── */
.hud-health-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hud-health-vbar-wrap {
  width: 5px;
  height: 28px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hud-health-vbar {
  width: 100%;
  border-radius: 3px;
  transition: height .6s ease, background .6s ease;
}

/* ── XP DISPLAY IN HUD ──────────────────────────────────────── */
.hud-xp-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  white-space: nowrap;
}
.hud-xp-icon { color: var(--gold); font-size: .75rem; }
.hud-xp-val  { font-weight: 800; font-size: .85rem; color: var(--gold); min-width: 24px; text-align: right; }
.hud-xp-label{ font-size: .6rem; color: var(--text-muted); font-weight: 600; }

/* ── HEALTH ALERT ANIMATION ─────────────────────────────────── */
@keyframes health-alert-in {
  0%   { transform: translateX(-50%) scale(0.6) translateY(8px); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.06) translateY(0); }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}

/* ── RESULT SCREEN XP BREAKDOWN ─────────────────────────────── */
.result-xp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 14px 20px;
  background: rgba(245,200,66,.08);
  border: 1px solid rgba(245,200,66,.25);
  border-radius: var(--radius-lg);
  width: 100%;
}
.result-xp-total {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(245,200,66,.5);
  margin-top: 4px;
}
.result-xp-total span { font-size: .85rem; opacity: .7; margin-left: 4px; }
.result-xp-bonus, .result-xp-earned, .result-xp-time {
  font-size: .82rem; font-weight: 700;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.result-xp-bonus  { color: #f5c842; }
.result-xp-earned { color: #2ecc71; }
.result-xp-time   { color: #74C0FC; }
.result-xp-bonus span, .result-xp-earned span, .result-xp-time span {
  font-weight: 400; opacity: .7;
}
.result-replay-hint {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 8px;
}
.result-replay-hint strong { color: var(--gold); }

/* ── pw-rec: pulsing glow on the recommended icon ── */
.pw.pw-rec {
  animation: power-rec-pulse 0.7s ease-in-out infinite !important;
  border-color: var(--gold) !important;
}
@keyframes power-rec-pulse {
  0%,100% { box-shadow:0 0 8px rgba(245,200,66,0.4);  transform:scale(1); }
  50%      { box-shadow:0 0 22px rgba(245,200,66,1);   transform:scale(1.12); }
}

/* ── pw-gold-active ── */
.pw.pw-gold-active {
  background: linear-gradient(135deg,#2a1f00,#3d2e00) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 14px rgba(245,200,66,0.8), inset 0 0 8px rgba(245,200,66,0.15) !important;
  color: var(--gold) !important;
}
.pw.pw-gold-active i { color: var(--gold) !important; }

/* ── Shield bubble ── */
.shield-bubble {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:112px; height:132px;
  border-radius:50%;
  border:3px solid rgba(96,165,250,0.9);
  background:radial-gradient(ellipse,rgba(96,165,250,0.12) 0%,transparent 70%);
  box-shadow:0 0 20px rgba(96,165,250,0.6),inset 0 0 12px rgba(96,165,250,0.15);
  animation:shield-pulse 1.2s ease-in-out infinite;
  pointer-events:none; z-index:15;
}
@keyframes shield-pulse {
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}
  50%    {transform:translate(-50%,-50%) scale(1.06);opacity:1}
}
.shield-bubble.shattering {
  animation:shield-shatter 0.4s ease forwards !important;
}
@keyframes shield-shatter {
  0%  {transform:translate(-50%,-50%) scale(1);opacity:1}
  40% {transform:translate(-50%,-50%) scale(1.4);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(2);opacity:0}
}

/* ── Power recommendation banner (inside game-hud, below health row) ── */
#pw-rec-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(10,8,22,0.96);
  border-top: 1.5px solid rgba(245,200,66,0.5);
  border-bottom: 1.5px solid rgba(245,200,66,0.2);
  animation: rec-banner-in 0.25s ease forwards;
  width: 100%;
  box-sizing: border-box;
}
#pw-rec-banner i {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
}
#pw-rec-banner span {
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}
#pw-rec-banner .pw-rec-tap {
  color: rgba(245,200,66,0.65);
  font-size: 0.7rem;
  flex-shrink: 0;
  flex: 0;
}
@keyframes rec-banner-in {
  from { opacity:0; max-height:0; padding-top:0; padding-bottom:0; }
  to   { opacity:1; max-height:40px; }
}

/* ── pw-rec: pulsing gold glow on recommended power icon ── */
.pw.pw-rec {
  animation: power-rec-pulse 0.65s ease-in-out infinite !important;
}
@keyframes power-rec-pulse {
  0%,100% { box-shadow:0 0 6px rgba(245,200,66,0.3);  transform:scale(1); }
  50%      { box-shadow:0 0 20px rgba(245,200,66,1);   transform:scale(1.14); }
}

/* ── Win cinematic animations ────────────────────────── */
@keyframes particle-burst {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--px),var(--py)) scale(0); opacity:0; }
}
@keyframes confetti-fall {
  0%   { transform:translateY(-20px) rotate(0deg);   opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0.2; }
}
@keyframes star-pop {
  0%   { transform:scale(0) rotate(-30deg); opacity:0; }
  60%  { transform:scale(1.3) rotate(5deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg);   opacity:1; }
}
@keyframes star-preview-in {
  from { opacity:0; transform:translateX(-50%) scale(0.6); }
  to   { opacity:1; transform:translateX(-50%) scale(1); }
}

/* ── Gold coin world element ─────────────────────────── */
.world-coin {
  pointer-events: none;
}
@keyframes coin-float {
  0%,100% { transform:translateX(-50%) translateY(0);    }
  50%      { transform:translateX(-50%) translateY(-8px); }
}
/* Old coin-xp-float replaced by coin-bonus-float below */
@keyframes coin-xp-float {
  0%   { opacity:1; transform:translateY(0)     scale(1); }
  60%  { opacity:1; transform:translateY(-30px) scale(1.1); }
  100% { opacity:0; transform:translateY(-55px) scale(0.9); }
}

/* ── Coin bonus label (smaller, below answer XP float) ── */
.coin-bonus-float {
  position: absolute;
  /* answer xp-float starts at top:30% and floats up — place bonus below it */
  left: 38%;
  top: 48%;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: #f5c842;
  text-shadow: 0 0 8px rgba(245,200,66,0.7);
  white-space: nowrap;
  pointer-events: none;
  z-index: 49;
  transform: translateX(-50%);
  animation: coin-bonus-rise 1.1s ease-out forwards;
}
@keyframes coin-bonus-rise {
  0%   { opacity:1; transform:translateX(-50%) translateY(0);     }
  65%  { opacity:1; transform:translateX(-50%) translateY(-22px); }
  100% { opacity:0; transform:translateX(-50%) translateY(-40px); }
}

/* ── Golden star confetti burst on coin collect ── */
.coin-star-conf {
  position: absolute;
  pointer-events: none;
  animation-fill-mode: forwards;
  line-height: 1;
}
@keyframes coin-star-burst {
  0%   { opacity:1; transform:translate(0,0)                     scale(1)   rotate(0deg);   }
  60%  { opacity:1; transform:translate(var(--cx),var(--cy))     scale(1.1) rotate(180deg); }
  100% { opacity:0; transform:translate(var(--cx),calc(var(--cy) + 20px)) scale(0.5) rotate(320deg); }
}
/* Result screen – vertical list (unchanged) */
.result-xp-bonus, .result-xp-earned, .result-xp-coin, .result-xp-time {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  width: 100%;
}
.result-xp-bonus  { color: #f5c842; }
.result-xp-earned { color: #2ecc71; }
.result-xp-coin   { color: #00CEC9; }
.result-xp-time   { color: #74C0FC; }

/* Horizontal row with three columns */
.result-xp-stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(245,200,66,0.2);
  text-align: center;
}

.result-xp-stat-item {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.result-xp-total {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(245,200,66,.5);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Responsive: smaller font on narrow screens */
@media (max-width: 480px) {
  .result-xp-stat-item {
    font-size: 0.7rem;
  }
  .result-xp-total {
    font-size: 1.3rem;
  }
  .result-xp-stats-row {
    gap: var(--space-sm);
  }
}
/* Nation additional styles */
.nation-members-btn {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-primary);
}
.nation-members-btn:hover {
    border-color: var(--gold);
}
.pending-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.btn-sm {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    cursor: pointer;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}
.btn-sm.approve-member { background: rgba(46,204,113,0.2); color: #2ecc71; }
.btn-sm.deny-member { background: rgba(231,76,60,0.2); color: #e74c3c; }
.btn-sm.disabled { opacity: 0.5; cursor: not-allowed; }
.members-ul { list-style: none; padding: 0; }
.members-ul li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.members-ul li .xp { margin-left: auto; color: var(--gold); }
.icon-picker { display: flex; gap: 12px; margin: 10px 0; }
.icon-picker label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
#nation-fab { position: fixed; bottom: 80px; right: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: #000; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 100; }
.nation-fab-menu { position: absolute; bottom: 70px; right: 0; background: var(--color-bg-2); border-radius: var(--radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 160px; border: 1px solid var(--color-border); }
.nation-fab-menu button { background: none; padding: 8px 12px; text-align: left; color: var(--text-primary); border-radius: var(--radius-md); cursor: pointer; }
.nation-fab-menu button:hover { background: var(--color-bg-elevated); }
.hidden { display: none !important; }
@media (min-width: 768px) { #nation-fab { bottom: 24px; right: 24px; } }
/* ============================================================
   CHALLENGE RESULT SCREEN + CHALLENGE FEED CARD
   ============================================================ */

/* ── CHALLENGE RESULT ──────────────────────────────────────── */
.challenge-result {
  background: radial-gradient(ellipse at top, #141B2E 0%, #0A0E1A 70%);
}

.chal-result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px 10px;
}
.chal-result-emoji {
  font-size: clamp(2.5rem, 10vw, 4rem);
  animation: result-in .4s ease;
}
.chal-result-emoji.won  { filter: drop-shadow(0 0 16px rgba(245,200,66,.8)); }
.chal-result-emoji.lost { filter: drop-shadow(0 0 12px rgba(231,76,60,.6)); }
.chal-result-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .06em;
  margin: 0;
}
.chal-result-title.success { color: var(--gold); }
.chal-result-title.failed  { color: var(--accent-red, #e74c3c); }

/* ── FACEOFF ─────────────────────────────────────────────────  */
.chal-faceoff {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.chal-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color .2s;
}
.chal-side.side-winner {
  border-color: var(--gold);
  background: rgba(245,200,66,.06);
  box-shadow: 0 0 16px rgba(245,200,66,.15);
}
.chal-side.side-loser { opacity: .65; }

.chal-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}
.chal-avatar-me   { border-color: var(--gold);   background: rgba(245,200,66,.08); }
.chal-avatar-king { border-color: #f5c842; background: rgba(245,200,66,.12); font-size: 1.3rem; }

.chal-name {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.chal-score-box { text-align: center; }
.chal-score-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-primary);
}
.chal-score-num.pending { color: var(--text-muted); font-size: 1.1rem; }
.chal-score-label { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; }

.chal-status-tag {
  font-size: .62rem; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
}
.chal-status-tag.done    { color: #2ecc71; background: rgba(46,204,113,.1); }
.chal-status-tag.failed  { color: var(--accent-red, #e74c3c); background: rgba(231,76,60,.1); }
.chal-status-tag.pending-tag { color: var(--text-muted); }

.chal-vs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}
.chal-vs-badge {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 900;
  color: var(--text-muted);
  background: var(--color-bg-elevated);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.chal-winner-arrow {
  font-size: .6rem;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  animation: orb-pulse 1.5s ease-in-out infinite;
}
.chal-stake-result {
  text-align: center;
  padding: 10px 16px;
  font-weight: 800;
  font-size: .9rem;
  border-radius: var(--radius-full);
  margin: 4px 16px 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.stake-won  { background: rgba(245,200,66,.12); color: var(--gold); }
.stake-lost { background: rgba(231,76,60,.1);  color: var(--accent-red, #e74c3c); }

.chal-pending-note {
  text-align: center;
  padding: 10px 20px;
  color: var(--text-muted);
  font-size: .78rem;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ── CHALLENGE FEED CARD ──────────────────────────────────── */
.challenge-badge {
  background: rgba(245,200,66,.12) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(245,200,66,.3) !important;
  font-weight: 800;
  letter-spacing: .04em;
}
.challenge-faceoff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
}
.challenge-contender {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.challenge-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800;
  color: var(--text-primary);
}
.king-avatar {
  border-color: var(--gold);
  background: rgba(245,200,66,.08);
  font-size: .85rem;
}
.challenge-name {
  font-size: .68rem; font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}
.challenge-score {
  font-size: .85rem; font-weight: 800;
  color: var(--gold);
}
.challenge-score.pending { color: var(--text-muted); font-size: .75rem; }
.challenge-middle {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex-shrink: 0;
}
.challenge-vs-badge {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 900;
  background: var(--color-bg-elevated);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.challenge-stake-info {
  font-size: .68rem; font-weight: 700; color: var(--gold);
}
.challenge-status-badge {
  font-size: .6rem; font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
}
.challenge-status-badge.pending  { color: #f0ad4e; background: rgba(240,173,78,.1); }
.challenge-status-badge.accepted { color: #2ecc71; background: rgba(46,204,113,.1); }
.challenge-status-badge.completed{ color: var(--gold); background: rgba(245,200,66,.1); }
.challenge-status-badge.declined { color: #e74c3c; background: rgba(231,76,60,.1); }
.challenge-status-badge.expired  { color: var(--text-muted); }

.challenge-conditions {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 4px 0 8px;
}
.cond-tag {
  font-size: .62rem; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--text-muted);
  display: flex; align-items: center; gap: 3px;
}
.powers-on  { color: #f5c842; background: rgba(245,200,66,.1); }
.powers-off { color: #e74c3c; background: rgba(231,76,60,.1); }

.challenge-king-actions {
  display: flex; gap: 8px; padding-top: 4px;
}
.challenge-king-actions .nation-btn { flex: 1; justify-content: center; }

.challenge-result-bar {
  text-align: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: .78rem; font-weight: 800;
  margin-top: 6px;
}
.challenge-result-bar.won  { background: rgba(245,200,66,.12); color: var(--gold); }
.challenge-result-bar.lost { background: rgba(231,76,60,.1);  color: #e74c3c; }

/* ── SETTINGS SECTION ─────────────────────────────────────── */
.settings-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── SUBJECT CHECKBOXES in challenge modal ────────────────── */
.subject-checkboxes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.subject-check-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all .15s ease;
  background: var(--color-bg-elevated);
  color: var(--text-secondary);
}
.subject-check-label:has(input:checked) {
  border-color: var(--gold);
  background: rgba(245,200,66,.08);
  color: var(--gold);
}
.subject-check-label input { display: none; }