/* ================================================================
   MatheLand — style.css
   Regel-Detektiv (Fuchs) — Premium Visual Design
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Forest / Warm Palette */
  --c-bg-deep:     #0a0603;
  --c-bg-dark:     #150a04;
  --c-bg-mid:      #261508;
  --c-bg-warm:     #3d2210;
  --c-wood:        #6b3f1a;
  --c-wood-light:  #8b5a2b;

  /* Accent */
  --c-gold:        #f4a020;
  --c-gold-bright: #ffd700;
  --c-gold-dim:    #a0690e;
  --c-amber:       #ff8c42;

  /* Functional */
  --c-correct:     #52c41a;
  --c-correct-dim: #2d7a10;
  --c-wrong:       #ef4444;
  --c-hint:        #60a5fa;

  /* Chalkboard */
  --c-board:       #16281f;
  --c-board-2:     #1e3829;
  --c-chalk:       #fff8e7;
  --c-chalk-dim:   rgba(255, 248, 231, 0.55);

  /* Glassmorphism */
  --c-glass:       rgba(255, 255, 255, 0.06);
  --c-glass-b:     rgba(255, 255, 255, 0.13);
  --c-gold-glass:  rgba(244, 160, 32, 0.10);

  /* Typography */
  --f-body:  'Nunito',     sans-serif;
  --f-board: 'Fredoka One', cursive;

  /* Spacing */
  --sp-xs: 5px;
  --sp-s:  10px;
  --sp-m:  18px;
  --sp-l:  28px;
  --sp-xl: 44px;

  /* Radius */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  26px;
  --r-xl: 60px;

  /* Shadows */
  --sh-gold:   0 0 40px rgba(244,160,32,.40), 0 0 80px rgba(244,160,32,.15);
  --sh-green:  0 0 40px rgba(82,196,26,.50),  0 0 80px rgba(82,196,26,.20);
  --sh-card:   0 10px 40px rgba(0,0,0,.45);
  --sh-depth:  0 30px 90px rgba(0,0,0,.70);

  /* Easing */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--f-body);
  background: var(--c-bg-deep);
  color: var(--c-chalk);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; }
img    { display: block; max-width: 100%; }

/* ================================================================
   3. CANVAS & BACKGROUND
   ================================================================ */
#particle-canvas {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.game-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 25% 70%, rgba(140,80,30,.35) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(100,55,10,.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(60,30,5,.15) 0%, transparent 70%),
    linear-gradient(175deg, #0a0603 0%, #150a04 40%, #261508 100%);
}

.game-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: url("../img/fox-adventure.webp") center / cover no-repeat;
  opacity: .12;
  filter: blur(3px) saturate(0.4);
}

/* Animated golden light rays */
.game-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: conic-gradient(
    from 195deg at 72% 8%,
    transparent 0deg, rgba(244,160,32,.05) 12deg, transparent 24deg,
    transparent 60deg, rgba(244,160,32,.03) 72deg, transparent 84deg
  );
  animation: lightShift 10s ease-in-out infinite;
}

@keyframes lightShift {
  0%,100% { opacity: .7; transform: rotate(0deg); }
  50%      { opacity: 1;  transform: rotate(2deg); }
}

/* Floating ambient particles (CSS only) */
.ambient-particle {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244,160,32,.4);
  pointer-events: none;
  z-index: 1;
  animation: ambientFloat var(--dur,8s) var(--delay,0s) ease-in-out infinite;
}

@keyframes ambientFloat {
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { transform: translate(var(--tx,40px), var(--ty,-120px)) scale(0.3); opacity: 0; }
}

/* ================================================================
   4. SCREENS
   ================================================================ */
.screen {
  position: fixed; inset: 0;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .55s var(--ease-smooth);
}
.screen.active {
  opacity: 1; pointer-events: auto;
}


/* ================================================================
   5. INTRO SCREEN
   ================================================================ */
#screen-intro {
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8vh;
}

.intro-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#screen-intro.active .intro-bg { opacity: 1; }

.intro-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,6,3,.15) 0%,
    rgba(10,6,3,.0) 30%,
    rgba(10,6,3,.85) 65%,
    rgba(10,6,3,.98) 100%
  );
}

.intro-content {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  animation: fadeInUp .7s .3s var(--ease-spring) both;
}

.intro-badge {
  position: absolute;
  top: 5%; left: 6%;
  font-family: var(--f-board);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--c-gold-bright);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  pointer-events: none;
}

.intro-title {
  position: absolute;
  bottom: 1%; left: 6%;
  margin: 0; text-align: left;
  font-family: var(--f-board);
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  color: var(--c-gold-bright);
  text-shadow:
    0 0 50px rgba(255,215,0,.9),
    0 0 100px rgba(255,215,0,.45),
    4px 4px 0 rgba(80,45,0,.8);
  line-height: 1.05;
  animation: titlePulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes titlePulse {
  0%,100% { text-shadow: 0 0 50px rgba(255,215,0,.9), 0 0 100px rgba(255,215,0,.4), 4px 4px 0 rgba(80,45,0,.8); }
  50%     { text-shadow: 0 0 70px rgba(255,215,0,1),  0 0 140px rgba(255,215,0,.6), 4px 4px 0 rgba(80,45,0,.8); }
}

.intro-subtitle {
  position: absolute;
  bottom: 4%; right: 6%;
  text-align: right;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  max-width: 320px;
  line-height: 1.5;
  pointer-events: none;
}

.btn-start {
  position: absolute;
  top: 78%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 54px;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--c-gold) 0%, #e88a10 100%);
  color: #1a0a02;
  font-family: var(--f-body);
  font-size: 1.35rem;
  font-weight: 900;
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 40px rgba(244,160,32,.55), 0 2px 0 rgba(255,255,255,.25) inset;
  transition: box-shadow .25s ease;
  animation: btnPulse 2.2s ease-in-out infinite;
}

.btn-start .btn-icon { font-size: 1.5rem; }

@keyframes btnPulse {
  0%,100% { box-shadow: 0 10px 40px rgba(244,160,32,.55), 0 2px 0 rgba(255,255,255,.25) inset; transform: translate(-50%, -50%) scale(1); }
  50%     { box-shadow: 0 10px 50px rgba(244,160,32,.75), 0 0 0 14px rgba(244,160,32,0), 0 2px 0 rgba(255,255,255,.25) inset; transform: translate(-50%, -50%) scale(1.02); }
}
.btn-start:hover {
  transform: translate(-50%, calc(-50% - 4px)) scale(1.07);
  box-shadow: 0 20px 60px rgba(244,160,32,.7);
  animation: none;
}
.btn-start:active { transform: translate(-50%, -50%) scale(.97); }

.btn-reset {
  position: absolute;
  top: 15px; right: 25px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff9800; /* Orange */
  text-decoration: underline;
  cursor: pointer;
  background: none; border: none; padding: 10px;
  transition: color .2s;
  z-index: 100;
}
.btn-reset:hover { color: #ffb74d; }

/* ================================================================
   6. GAME SCREEN
   ================================================================ */
#screen-game {
  flex-direction: column;
  padding: 8px 12px 10px;
  gap: 7px;
  align-items: stretch;
}

.btn-quit {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.4);
  color: #ffcccc;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--f-base);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s var(--ease-spring);
  margin-right: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-quit:hover {
  background: rgba(255, 0, 0, 0.5);
  color: #fff;
  transform: scale(1.05);
}

/* ─── TOP BAR ─────────────────────────────────────────────────── */
.top-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  background: var(--c-glass);
  backdrop-filter: blur(24px);
  border: 1px solid var(--c-glass-b);
  border-radius: var(--r-l);
  flex-shrink: 0;
  z-index: 20;
  min-height: 44px;
}

.btn-icon-sm {
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px;
  border-radius: 10px;
  transition: background .2s;
}
.btn-icon-sm:hover { background: rgba(255,255,255,.1); }

.top-title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-board);
  font-size: 1.25rem;
  color: var(--c-gold);
  text-shadow: 0 0 20px rgba(244,160,32,.5);
  white-space: nowrap;
}

.top-progress {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}

.level-label {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
}

.progress-bar {
  width: 100%; max-width: 280px; height: 11px;
  background: rgba(255,255,255,.08);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-bright) 100%);
  border-radius: 100px;
  transition: width .6s var(--ease-smooth);
  box-shadow: 0 0 12px rgba(244,160,32,.6);
  width: 0%;
}

.top-stats {
  display: flex; align-items: center; gap: 12px;
}

.stat {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.6rem; font-weight: 800;
  color: var(--c-gold-bright);
}

/* ─── MAIN GAME AREA ─────────────────────────────────────────── */
.game-area {
  flex: 1;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* ─── FOX PANEL ──────────────────────────────────────────────── */
.fox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  padding-bottom: 0;
  height: 100%;
}

.fox-character {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* Take all available vertical space */
  flex: 1;
  display: flex;
  align-items: flex-end;
  animation: foxFloat 3.5s ease-in-out infinite;
  transform-origin: bottom center;
  cursor: default;
  user-select: none;
}

.fox-character img {
  /* Use width-based sizing with max-height constraint for robust flex behavior */
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 20px 50px rgba(244,160,32,.35));
  display: block;
  mix-blend-mode: normal;
  border-radius: 0;
  animation: foxBreathe 4s ease-in-out infinite;
}

@keyframes foxBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02, 0.98) translateY(-6px); }
}

.fox-eyes-container {
  display: none; /* Hide old CSS eyes since new transparent asset already has them */
}

.fox-glow {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 40px;
  background: radial-gradient(ellipse, rgba(244,160,32,.35) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
}

@keyframes foxFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  30%     { transform: translateY(-10px) rotate(.8deg); }
  70%     { transform: translateY(-6px) rotate(-.5deg); }
}

.fox-character.fox-celebrate {
  animation: foxCelebrate .55s var(--ease-spring) forwards !important;
}
@keyframes foxCelebrate {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  35%  { transform: translateY(-28px) scale(1.18) rotate(-5deg); }
  65%  { transform: translateY(-20px) scale(1.12) rotate(4deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

.fox-character.fox-shake {
  animation: foxShake .4s ease-out !important;
}
@keyframes foxShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20%     { transform: translateX(-12px) rotate(-3deg); }
  40%     { transform: translateX(12px) rotate(3deg); }
  60%     { transform: translateX(-8px) rotate(-2deg); }
  80%     { transform: translateX(8px) rotate(2deg); }
}

/* Speech Bubble */
.speech-bubble {
  position: absolute;
  top: 45px; left: 50%;
  transform: translateX(-50%) scale(.85) translateY(8px);
  width: calc(100% - 16px);
  max-width: 400px;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 100%);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255,255,255,.3); /* Thicker border for clarity */
  border-radius: var(--r-xl); /* Rounder edges like a real bubble */
  padding: 22px 28px;
  font-size: 1.6rem; /* Much larger font */
  font-weight: 800;
  line-height: 1.45;
  color: var(--c-chalk);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  text-align: center;
  opacity: 0;
  transition: all .35s var(--ease-spring);
  z-index: 30;
  pointer-events: none;
}

.speech-bubble.bubble-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -22px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0; 
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid rgba(255,255,255,.3); /* Matches border */
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; 
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 19px solid rgba(255,255,255,.15); /* Matches background */
  z-index: 1;
}

/* ─── BOARD PANEL ────────────────────────────────────────────── */
.board-panel {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 0;
  overflow-y: visible;
  overflow-x: visible;
  padding-right: 4px;
}

.chalkboard-wrapper {
  /* Grows to fill all available vertical space above the controls */
  flex: 1;
  position: relative;
  /* min-height ensures enough room for all 5 equations */
  min-height: 260px;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  width: 100%;
  margin: 0 auto 0 20px; /* Shifted significantly to the left (20px from left edge) */
}

/* Wooden frame */
.chalkboard-frame {
  position: absolute; inset: 0;
  background:
    linear-gradient(145deg, #8b5a2b 0%, #6b3f1a 30%, #7a4820 60%, #5c3010 100%);
  border-radius: var(--r-l);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.12),
    inset 0 0 0 13px rgba(0,0,0,.32),
    0 25px 70px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06),
    2px 2px 0 rgba(255,255,255,.05) inset;
}

/* Decorative wood grain lines */
.chalkboard-frame::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-l);
  background: repeating-linear-gradient(
    175deg,
    transparent 0px,
    transparent 8px,
    rgba(255,255,255,.025) 8px,
    rgba(255,255,255,.025) 9px
  );
}

.chalkboard {
  /* Now in normal flow so it can push parent height if needed */
  position: relative;
  margin: 14px; /* wooden frame thickness */
  flex: 1;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(50,100,70,.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(20,60,40,.18) 0%, transparent 60%),
    linear-gradient(150deg, #16281f 0%, #1e3829 55%, #152318 100%);
  border-radius: calc(var(--r-l) - 7px);
  /* Hidden clips the texture to rounded corners. Won't clip content since height is flexible now */
  overflow: hidden;
  display: flex; flex-direction: column;
  /* ⭐ Key fix: generous, balanced padding on all sides
     Left/right: 24px so text never touches the frame
     Top/bottom: 22px breathing room to ensure bottom equation isn't clipped  */
  padding: 16px 26px 22px;
  gap: 0;
}

/* Chalk texture overlay */
.chalkboard::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .6;
}

/* Chalk tray at bottom */
.chalkboard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.04) 100%);
  border-radius: 0 0 calc(var(--r-l) - 8px) calc(var(--r-l) - 8px);
}

.board-header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-board);
  font-size: .92rem;
  color: rgba(255,248,231,.65);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  letter-spacing: .05em;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.board-icon { font-size: 1.15rem; }

/* ─── EQUATION ROWS ────────────────────────────────────────────── */
.equation-sequence {
  display: flex; flex-direction: column;
  flex: 1;
  /* ⭐ Key: evenly distribute equations with space between
     Creates natural breathing room without overflow risk */
  justify-content: space-evenly;
  overflow: visible; /* Ensure focus rings or glowing effects aren't cut */
  position: relative;
  padding-bottom: 4px; /* Extra breathing space at bottom */
}

.eq-row {
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
  /* Comfortable vertical padding on each row */
  padding: 4px 0;
}
.eq-row.visible { opacity: 1; transform: translateX(0); }

.eq-text {
  font-family: var(--f-board);
  /* Larger font size requested */
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--c-chalk);
  text-shadow:
    0 0 20px rgba(255,248,231,.22),
    1px 1px 0 rgba(0,0,0,.6);
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
}

.eq-check {
  font-size: 1.25rem;
  color: #6adf3a;
  text-shadow: 0 0 16px rgba(106,223,58,.7);
  opacity: 0; transform: scale(0);
  transition: opacity .32s var(--ease-spring), transform .32s var(--ease-spring);
  flex-shrink: 0;
  margin-left: 4px;
}
.eq-check.visible { opacity: 1; transform: scale(1); }

/* ─────────────────────────────────────────────────── */
/* Visual divider before the target equation                       */
.equation-sequence::before {
  content: '';
  position: absolute;
  /* Placed between 4th known row and the target row */
  bottom: 22%;  /* approx position of the target row */
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,160,32,.2) 20%, rgba(244,160,32,.25) 50%, rgba(244,160,32,.2) 80%, transparent 100%);
  pointer-events: none;
}

/* Target equation — highlighted, stand-alone */
.eq-target {
  background: rgba(244,160,32,.08);
  border: 1.5px dashed rgba(244,160,32,.45);
  border-radius: var(--r-s);
  /* Comfortable padding inside the golden box */
  padding: 6px 12px;
  margin: 0;
  /* Slightly more spacing above to visually separate from known rows */
  margin-top: 2px;
}
.eq-target .eq-text { color: var(--c-gold); }

/* Input box inside equation */
.eq-input-box {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 75px; height: 60px;
  background: rgba(244,160,32,.1);
  border: 2px solid rgba(244,160,32,.45);
  border-radius: var(--r-s);
  font-family: var(--f-board);
  font-size: 3rem;
  color: var(--c-gold);
  text-shadow: 0 0 18px rgba(255,215,0,.55);
  padding: 0 8px;
  transition: all .2s var(--ease-spring);
  animation: boxPulse 1.8s ease-in-out infinite;
  cursor: default;
  vertical-align: middle;
}

@keyframes boxPulse {
  0%,100% { border-color: rgba(244,160,32,.45); box-shadow: none; }
  50%     { border-color: rgba(244,160,32,.8);  box-shadow: 0 0 18px rgba(244,160,32,.35); }
}

.eq-input-box.has-value {
  color: var(--c-gold-bright);
  border-color: var(--c-gold);
  background: rgba(244,160,32,.18);
  animation: none;
  box-shadow: 0 0 22px rgba(244,160,32,.4);
}

.eq-input-box.box-correct {
  background: rgba(82,196,26,.15);
  border-color: var(--c-correct);
  color: #88ee55;
  text-shadow: 0 0 20px rgba(82,196,26,.7);
  animation: none;
  box-shadow: var(--sh-green);
}

.eq-input-box.box-wrong {
  background: rgba(239,68,68,.15);
  border-color: var(--c-wrong);
  color: #ff9999;
  animation: shakeBox .35s ease-out !important;
}

.shake-box, .eq-input-box.box-wrong {
  animation: shakeBox .35s ease-out;
}

@keyframes shakeBox {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* ─── RULE CARDS ─────────────────────────────────────────────── */
.rule-cards {
  position: absolute;
  top: 50%; left: 100%;
  transform: translate(30px, -50%);
  display: flex;
  flex-direction: column;
  width: 380px; /* Increased from 320px for larger text */
  gap: 12px;
  opacity: 0; pointer-events: none;
  transition: all .4s var(--ease-spring);
  flex-shrink: 0;
}
.rule-cards.cards-visible {
  opacity: 1; pointer-events: auto;
  transform: translate(15px, -50%);
}

.rule-card {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16px 20px;
  background: linear-gradient(140deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--r-m);
  font-size: 1.25rem; font-weight: 700;
  line-height: 1.45;
  color: var(--c-chalk);
  cursor: pointer;
  min-height: 85px;
  opacity: 0; transform: translateY(18px);
  transition:
    opacity .32s var(--ease-spring),
    transform .32s var(--ease-spring),
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.rule-card.visible { opacity: 1; transform: translateY(0); }

.rule-card em {
  color: var(--c-gold-bright);
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
  margin: 0;
}

.rule-card:hover:not(:disabled) {
  background: linear-gradient(140deg, rgba(244,160,32,.16) 0%, rgba(244,160,32,.06) 100%);
  border-color: rgba(244,160,32,.5);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(244,160,32,.22);
  color: var(--c-gold-bright);
}

.rule-card.selected {
  background: linear-gradient(140deg, rgba(244,160,32,.3) 0%, rgba(244,160,32,.1) 100%);
  border-color: var(--c-gold);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 30px rgba(244,160,32,.3);
  color: var(--c-gold-bright);
}

.rule-card:active:not(:disabled) { transform: translateY(0) scale(.98); }

.rule-card.card-correct {
  background: linear-gradient(140deg, rgba(244,160,32,.22) 0%, rgba(244,160,32,.07) 100%);
  border-color: var(--c-gold-bright);
  color: #fff;
  transform: scale(1.08);
  pointer-events: none;
  animation: correctGlowSuper 1s ease-in-out infinite alternate;
  z-index: 10;
}

@keyframes correctGlowSuper {
  0% {
    box-shadow: 0 0 20px rgba(255,215,0,.5), inset 0 0 10px rgba(255,215,0,.3);
    border-color: rgba(255,215,0,.8);
  }
  100% {
    box-shadow: 0 0 60px rgba(255,255,255,1), 0 0 100px rgba(255,215,0,.9), inset 0 0 30px rgba(255,215,0,.6);
    border-color: rgba(255,255,255,1);
    background: linear-gradient(140deg, rgba(255,215,0,.4) 0%, rgba(255,215,0,.15) 100%);
  }
}

.rule-card.card-wrong {
  background: linear-gradient(140deg, rgba(239,68,68,.22) 0%, rgba(239,68,68,.06) 100%);
  border-color: var(--c-wrong);
  color: #ff9a9a;
  animation: shakeBox .35s ease;
  pointer-events: none;
}

.rule-card.card-dim {
  opacity: .28 !important;
  pointer-events: none;
}

/* ─── NUMBER PAD ─────────────────────────────────────────────── */
.numpad-section {
  position: absolute;
  top: 50%; left: 100%;
  transform: translate(40px, -50%);
  margin-left: 50px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  opacity: 0; pointer-events: none;
  transition: all .4s var(--ease-spring);
  flex-shrink: 0;
}
.numpad-section.numpad-visible {
  opacity: 1; pointer-events: auto;
  transform: translate(0, -50%);
}

.numpad-info {
  display: flex; align-items: center; gap: 12px;
}

.numpad-label {
  font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-chalk-dim);
}

.numpad-display {
  min-width: 90px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-board);
  font-size: 2.5rem;
  color: var(--c-gold-bright);
  text-shadow: 0 0 18px rgba(255,215,0,.6);
  background: rgba(244,160,32,.1);
  border: 2px solid rgba(244,160,32,.4);
  border-radius: var(--r-s);
  padding: 0 10px;
  letter-spacing: .06em;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: max-content;
  width: 100%;
}

.numpad-btn {
  position: relative;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 85px; height: 85px;
  background: linear-gradient(145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.05);
  font-family: var(--f-board);
  font-size: 2.8rem;
  color: var(--c-chalk);
  cursor: pointer;
  transition: transform .18s var(--ease-spring), background .18s, box-shadow .18s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* Ripple effect */
.numpad-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(244,160,32,.35) 0%, transparent 65%);
  opacity: 0; transition: opacity .15s;
  border-radius: inherit;
}
.numpad-btn:active::after { opacity: 1; }

.numpad-btn:hover:not(:active) {
  background: linear-gradient(145deg, rgba(244,160,32,.18) 0%, rgba(244,160,32,.07) 100%);
  border-color: rgba(244,160,32,.45);
  box-shadow: 0 5px 20px rgba(244,160,32,.25);
  transform: translateY(-2px) scale(1.04);
}
.numpad-btn:active { transform: scale(.92); }

.numpad-btn.del   { font-size: 1.8rem; color: var(--c-amber); }
.numpad-btn.confirm {
  background: linear-gradient(140deg, var(--c-correct-dim) 0%, var(--c-correct) 100%);
  border-color: var(--c-correct);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 6px 22px rgba(82,196,26,.4);
}
.numpad-btn.confirm:hover:not(:active) {
  background: linear-gradient(140deg, var(--c-correct) 0%, #72dd2e 100%);
  box-shadow: 0 8px 30px rgba(82,196,26,.55);
}

/* ─── ACTION BAR ─────────────────────────────────────────────── */
.action-bar {
  display: flex; justify-content: center; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  flex-shrink: 0;
  max-width: 500px;
  width: 100%;
  margin: 0 auto 0 20px;
}

.btn-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 26px;
  border-radius: var(--r-xl);
  font-family: var(--f-body);
  font-size: .98rem; font-weight: 800;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, background .2s ease;
}

.btn-hint {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--c-chalk);
}
.btn-hint:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}

.btn-check {
  background: linear-gradient(140deg, var(--c-correct-dim) 0%, var(--c-correct) 100%);
  border-color: rgba(82,196,26,.6);
  color: #fff;
  box-shadow: 0 6px 24px rgba(82,196,26,.45);
}
.btn-check:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 36px rgba(82,196,26,.55);
}
.btn-check:active { transform: scale(.97); }

/* ================================================================
   7. HINT OVERLAY
   ================================================================ */
.hint-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.hint-overlay.overlay-visible { opacity: 1; pointer-events: auto; }

.hint-box {
  max-width: 420px;
  margin: var(--sp-m);
  background: linear-gradient(145deg, rgba(22,12,4,.97) 0%, rgba(40,22,8,.97) 100%);
  border: 1.5px solid rgba(244,160,32,.35);
  border-radius: var(--r-l);
  padding: var(--sp-l);
  text-align: center;
  box-shadow: var(--sh-gold), var(--sh-depth);
  transform: scale(.88) translateY(20px);
  transition: transform .38s var(--ease-spring);
}
.hint-overlay.overlay-visible .hint-box {
  transform: scale(1) translateY(0);
}

.hint-header {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.hint-fox    { font-size: 2.5rem; }
.hint-title  { font-family: var(--f-board); font-size: 1.2rem; color: var(--c-gold); }

.hint-text {
  font-size: 1.35rem; font-weight: 500; line-height: 1.7;
  color: var(--c-chalk);
  text-align: center;
  max-width: 450px;
}
.hint-text em {
  color: var(--c-gold-bright);
  font-style: normal; font-weight: 800;
}

.btn-hint-action {
  margin-top: var(--sp-m);
  padding: 12px 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--c-gold) 0%, #e88a10 100%);
  color: #1a0802;
  font-weight: 900; font-size: 1rem;
  border: none; cursor: pointer;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
  box-shadow: 0 6px 22px rgba(244,160,32,.45);
}
.btn-hint-action:hover { transform: scale(1.05); box-shadow: var(--sh-gold); }

/* ================================================================
   8. CELEBRATION OVERLAY
   ================================================================ */
.celebration-overlay {
  position: fixed; inset: 0;
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.celebration-overlay.cel-visible { opacity: 1; }

.celebration-message {
  font-family: var(--f-board);
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--c-gold-bright);
  text-shadow:
    0 0 35px rgba(255,215,0,.9),
    0 0 70px rgba(255,215,0,.5),
    4px 4px 0 rgba(80,45,0,.8);
  animation: celebPop .5s var(--ease-spring) both;
}

@keyframes celebPop {
  0%   { transform: scale(0) rotate(-15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ================================================================
   9. LEVEL UP SCREEN
   ================================================================ */
#screen-level-up {
  flex-direction: column; align-items: center; gap: var(--sp-l);
}

.levelup-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .55;
  filter: blur(4px) saturate(0.6);
}

.levelup-panel {
  position: relative; z-index: 2;
  background: linear-gradient(145deg, rgba(20,10,3,.95) 0%, rgba(40,22,8,.95) 100%);
  border: 1.5px solid rgba(244,160,32,.35);
  border-radius: var(--r-l);
  padding: var(--sp-xl);
  max-width: 480px;
  text-align: center;
  box-shadow: var(--sh-gold), var(--sh-depth);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-m);
  animation: fadeInUp .6s var(--ease-spring) both;
}

.levelup-fox   { font-size: 4rem; }
.levelup-title {
  font-family: var(--f-board);
  font-size: 2.4rem;
  color: var(--c-gold-bright);
  text-shadow: 0 0 30px rgba(255,215,0,.7);
}
.levelup-subtitle {
  font-size: 1.05rem; font-weight: 700;
  color: var(--c-chalk-dim);
  max-width: 320px; line-height: 1.5;
}

.stars-display {
  display: flex; gap: var(--sp-m); justify-content: center;
}

.star-item {
  font-size: 3.5rem;
  opacity: 0; transform: scale(0) rotate(-30deg);
  transition: all .5s var(--ease-spring);
  filter: grayscale(1);
}
.star-item.star-visible { opacity: 1; transform: scale(1) rotate(0deg); }
.star-item.star-lit     {
  filter: grayscale(0) drop-shadow(0 0 12px rgba(255,215,0,.9));
}

.btn-continue-big {
  padding: 16px 44px;
  font-size: 1.1rem;
}

/* ================================================================
   10. ANIMATIONS & UTILITIES
   ================================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ================================================================
   11. RESPONSIVE
   ================================================================ */
@media (max-width: 700px) {
  .game-area {
    grid-template-columns: 1fr;
    grid-template-rows: 120px 1fr;
  }

  .fox-panel {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    height: 120px;
  }

  .fox-character {
    height: 110px; width: auto; max-width: none; flex: none;
  }
  .fox-character img { height: 100%; width: auto; }

  .speech-bubble {
    position: relative;
    top: auto; left: auto; width: auto;
    transform: none !important;
  }
  .speech-bubble.bubble-visible { transform: none !important; }

  .eq-text { font-size: 1.5rem; }

  .rule-cards { grid-template-columns: 1fr; }

  .numpad {
    grid-template-columns: repeat(3, 1fr);
    max-width: 200px;
  }

  .top-title { display: none; }
}

@media (max-width: 420px) {
  #screen-game { padding: 6px 8px 8px; gap: 6px; }
  .chalkboard  { padding: 12px 14px; }
  .eq-text     { font-size: 1.3rem; }
}

/* Prevent text selection on game elements */
.game-area, .numpad, .rule-cards {
  -webkit-user-select: none; user-select: none;
}

/* Focus styles for accessibility */
button:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* ================================================================
   PREMIUM UPGRADES (3D Parallax, Magnetic, Eye Tracking)
   ================================================================ */

/* 3D Parallax on Chalkboard */
.chalkboard-wrapper {
  transition: transform 0.1s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Magnetic Buttons */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
  will-change: transform;
}
.magnetic-btn:hover {
  /* scale slightly when hovered */
  transform: scale(1.05);
}

/* Simulated Fox Eye Tracking */
.fox-character {
  position: relative;
  /* Eye tracking CSS vars updated by JS */
  --eye-x: 0px;
  --eye-y: 0px;
}

.fox-eyes-container {
  position: absolute;
  top: 45%; 
  left: 48%;
  width: 40px;
  height: 15px;
  display: flex;
  justify-content: space-between;
  transform: translateX(-50%);
  pointer-events: none;
}

.fox-eye {
  width: 8px;
  height: 8px;
  background-color: #0a0603; /* Dark brown/black pupil */
  border-radius: 50%;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform 0.05s ease-out;
  box-shadow: inset -1px -1px 2px rgba(255,255,255,0.4); /* slight catchlight */
}

.glossary-term {
  color: #ff9800;
  font-weight: 900;
  cursor: url('data:image/svg+xml;utf8,<svg width="36" height="36" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><text x="2" y="26" font-size="30" font-family="sans-serif" font-weight="900" fill="%23ffeb3b" stroke="%23000" stroke-width="1.5">?</text></svg>') 8 8, help;
  transition: all 0.2s var(--ease-spring);
  display: inline;
  padding: 0 1px;
  border-radius: 4px;
}
.glossary-term:hover {
  color: #fff;
  background: #ff9800;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

/* ── CUSTOM MODAL ────────────────────────────────────── */
.custom-modal {
  position: fixed; inset: 0;
  background: rgba(10,6,3,.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.custom-modal.active {
  opacity: 1; pointer-events: all;
}
.custom-modal-content {
  background: var(--c-chalkboard);
  border-radius: var(--r-l);
  padding: 35px 25px;
  max-width: 450px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s var(--ease-spring);
  border: 4px solid #8b5a2b; /* Wooden color */
}
.custom-modal.active .custom-modal-content {
  transform: translateY(0) scale(1);
}
.custom-modal-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
}
.custom-modal-text {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.5;
  font-family: var(--f-board);
}
.custom-modal-actions {
  display: flex; gap: 15px; justify-content: center;
}
.btn-modal {
  padding: 12px 28px;
  border-radius: var(--r-m);
  font-size: 1.2rem;
  font-family: var(--f-board);
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: transform 0.1s, opacity 0.2s;
}
.btn-modal:active {
  transform: scale(0.95);
}
.btn-modal-cancel {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.btn-modal-cancel:hover {
  background: rgba(255,255,255,0.25);
}
.btn-modal-confirm {
  background: var(--c-wrong);
  color: #fff;
}
.btn-modal-confirm:hover {
  opacity: 0.9;
}

/* ================================================================
   THEME: PENGUIN (Futterketten)
   ================================================================ */
body.theme-penguin {
  /* Ice / Cold Palette */
  --c-bg-deep:     #020b14;
  --c-bg-dark:     #031626;
  --c-bg-mid:      #0a2845;
  --c-bg-warm:     #123e66;
  --c-wood:        #0e3152;
  --c-wood-light:  #184b7a;

  /* Accent (Aurora Green / Ice Blue) */
  --c-gold:        #2fd0b3;
  --c-gold-bright: #4af2d4;
  --c-gold-dim:    #1c8a75;
  --c-amber:       #29a7e6;

  /* Chalkboard to Iceboard */
  --c-board:       #0d1a26;
  --c-board-2:     #142a3e;
  --c-chalk:       #e0f7fa;
  --c-chalk-dim:   rgba(224, 247, 250, 0.55);

  --c-gold-glass:  rgba(47, 208, 179, 0.10);

  --sh-gold:   0 0 40px rgba(47,208,179,.40), 0 0 80px rgba(47,208,179,.15);
}

.theme-penguin .game-bg {
  background:
    radial-gradient(ellipse 80% 60% at 25% 70%, rgba(47,208,179,.25) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(41,167,230,.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(20,50,80,.15) 0%, transparent 70%),
    linear-gradient(175deg, #020b14 0%, #031626 40%, #0a2845 100%);
}
.theme-penguin .game-bg::after {
  background: conic-gradient(
    from 195deg at 72% 8%,
    transparent 0deg, rgba(47,208,179,.05) 12deg, transparent 24deg,
    transparent 60deg, rgba(47,208,179,.03) 72deg, transparent 84deg
  );
}
.theme-penguin .ambient-particle {
  background: rgba(47,208,179,.4);
}

.theme-penguin .rule-cards,
.theme-penguin .numpad-section {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
}

.theme-penguin .numpad-section {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.theme-penguin .fox-glow {
  background: radial-gradient(circle at center, rgba(47,208,179,0.35) 0%, transparent 70%);
}

.fish-bucket {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  position: relative;
  font-size: 1.8rem;
  margin-bottom: 5px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-m);
  padding: 10px;
  min-width: 60px;
  min-height: 60px;
}
.fish-group {
  letter-spacing: -4px;
  white-space: nowrap;
  line-height: 1;
}
.fish-icon {
  display: inline-block;
  transition: filter 0.3s;
}
.fish-green {
  filter: hue-rotate(-80deg) saturate(1.5);
}
.fish-yellow {
  filter: hue-rotate(-140deg) saturate(2) brightness(1.2);
}
.fish-red {
  filter: hue-rotate(-180deg) saturate(2);
}
.fish-lightblue {
  filter: hue-rotate(20deg) saturate(1.2) brightness(1.3);
}

.theme-penguin .equation-sequence {
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  gap: 10px;
  padding: 10px 0;
  margin-left: 20px;
}

.theme-penguin .arrow {
  font-size: 2rem;
  color: var(--c-gold);
  margin: 0 20px;
  transform: rotate(90deg);
}

.fish-bucket::after {
  content: attr(data-count);
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: var(--c-wrong);
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Tens and Ones Layout */
.tens-ones-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
}

.tens-group {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-end;
}

.tens-bucket {
  position: relative;
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.bucket-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
}

.ones-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Hub Return Button for Intro Screens */
.btn-hub-return {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--f-ui);
  font-weight: 700;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.btn-hub-return:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Hide navigation elements when embedded in Journey iframe */
html.in-iframe .btn-hub-return,
html.in-iframe .btn-quit,
html.in-iframe #btn-back {
  display: none !important;
}



/* Stat Pop Animation (Juice) */
@keyframes statPop {
  0% { transform: scale(1); color: var(--c-gold-bright); }
  50% { transform: scale(1.6); color: white; text-shadow: 0 0 20px white; }
  100% { transform: scale(1); color: var(--c-gold-bright); }
}
.stat-pop {
  animation: statPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.icon-img-star, .icon-img-gem {
  width: 1.2em; height: 1.2em;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.star-item {
  color: transparent !important;
  background: url('../img/icon_star.png') center/contain no-repeat;
  width: 1.2em; height: 1.2em;
  display: inline-block;
}
.star-item.star-lit {
  filter: drop-shadow(0 0 15px rgba(255,215,0,0.8));
}