/* ═══════════════════════════════════════════════════════════════
   ClockPals – style.css
   Kid-friendly, mobile-first PWA stylesheet
   Aesthetic: Playful Toybox — bold, bouncy, warm & joyful
═══════════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ──────────────────────────────────────── */
:root {
  /* Brand palette */
  --clr-bg:          #FFF9F0;
  --clr-bg-alt:      #FFF0DC;
  --clr-primary:     #FF6B6B;
  --clr-primary-dk:  #E85555;
  --clr-secondary:   #FFD93D;
  --clr-accent:      #6BCB77;
  --clr-accent2:     #4D96FF;
  --clr-purple:      #C77DFF;
  --clr-orange:      #FF9A3C;

  /* Day / Night ring colours */
  --clr-day-outer:   #FFF3C4;
  --clr-day-inner:   #FFE082;
  --clr-day-num:     #E65100;
  --clr-night-outer: #1A237E;
  --clr-night-inner: #283593;
  --clr-night-num:   #90CAF9;

  /* Clock */
  --clr-face:        #FFFDE7;
  --clr-face-stroke: #FFD54F;
  --clr-hand-hour:   #37474F;
  --clr-hand-min:    #FF6B6B;
  --clr-tick:        #90A4AE;
  --clr-center:      #37474F;
  --clr-center-in:   #FFFFFF;

  /* Text */
  --clr-text:        #2D2D2D;
  --clr-text-light:  #6B6B6B;
  --clr-text-inv:    #FFFFFF;

  /* UI */
  --clr-card:        #FFFFFF;
  --clr-shadow:      rgba(0,0,0,.12);
  --clr-shadow-md:   rgba(0,0,0,.18);

  /* Radii */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 9999px;

  /* Transitions */
  --t-fast:   .15s ease;
  --t-med:    .3s ease;
  --t-slow:   .5s cubic-bezier(.34,1.56,.64,1);

  /* Z-layers */
  --z-base:     1;
  --z-overlay: 50;
  --z-modal:   100;
  --z-top:     200;

  /* Typography */
  --font-display: 'Baloo 2', 'Comic Sans MS', cursive;
  --font-body:    'Nunito', 'Trebuchet MS', sans-serif;

  /* Safe area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Prevent pull-to-refresh killing animations */
body { touch-action: pan-y; }

img, svg { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-user-select: none; user-select: none;
}

input, textarea {
  font-family: inherit;
  outline: none;
}

h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.1; }

/* ─── SCREEN SYSTEM ──────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  flex-direction: column;
  background: var(--clr-bg);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  -webkit-overflow-scrolling: touch;
}

.screen.active {
  display: flex;
  animation: screenIn var(--t-med) both;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SHARED COMPONENTS ──────────────────────────────────────── */

/* Icon button (back, settings, etc.) */
.btn-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--clr-card);
  box-shadow: 0 3px 8px var(--clr-shadow);
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.btn-icon:active { transform: scale(.9); box-shadow: none; }

/* Generic small button */
.btn-small {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--clr-accent2);
  color: #fff;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(77,150,255,.35);
  transition: transform var(--t-fast);
}
.btn-small:active { transform: scale(.95); }

/* Sub-screen header */
.sub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 8px;
  flex-shrink: 0;
}
.sub-header h2 {
  font-size: 1.5rem;
  color: var(--clr-text);
  flex: 1;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 52px; height: 28px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #CBD5E0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-med);
}
.toggle-slider::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-med);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--clr-accent); }
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(24px); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F0E9DE;
  font-size: 1rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-loading {
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #FF6B6B 0%, #FF9A3C 50%, #FFD93D 100%);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  text-align: center;
}

.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.logo-clock {
  font-size: 5rem;
  animation: clockWiggle 1s infinite;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.2));
}

@keyframes clockWiggle {
  0%,100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

.logo-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,.2);
  letter-spacing: -1px;
}

.logo-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

.loading-monsters {
  display: flex;
  gap: 16px;
  font-size: 2.4rem;
}

.loader-monster {
  animation: monsterBounce .6s var(--d, 0s) infinite alternate;
  display: inline-block;
}

@keyframes monsterBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}

.loading-bar-wrap {
  width: 220px;
  height: 14px;
  background: rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: var(--r-pill);
  transition: width .2s ease;
}

.loading-text {
  color: rgba(255,255,255,.9);
  font-size: .95rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-home {
  background: linear-gradient(170deg, #FFF9F0 0%, #FFF0DC 100%);
  position: relative;
}

/* Floating background bubbles */
.home-bg-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
  animation: bubbleFloat linear infinite;
}
.b1 { width:180px;height:180px; background:var(--clr-primary);   left:-40px; top:5%;  animation-duration:18s; }
.b2 { width:120px;height:120px; background:var(--clr-secondary);  right:-20px;top:20%; animation-duration:14s; animation-delay:-4s; }
.b3 { width:200px;height:200px; background:var(--clr-accent);     left:30%;  top:55%; animation-duration:22s; animation-delay:-8s; }
.b4 { width: 90px;height: 90px; background:var(--clr-accent2);    right:10%; top:65%; animation-duration:16s; animation-delay:-2s; }
.b5 { width:140px;height:140px; background:var(--clr-purple);     left:60%;  top:10%; animation-duration:20s; animation-delay:-6s; }

@keyframes bubbleFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-40px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* Header */
.home-header {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  flex-shrink: 0;
}

.home-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo-emoji { font-size: 1.8rem; animation: clockWiggle 2s infinite ease-in-out; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--clr-primary);
  letter-spacing: -.5px;
}

/* Player bar */
.player-bar {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 0;
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  box-shadow: 0 4px 16px var(--clr-shadow);
  flex-shrink: 0;
}

.player-avatar {
  font-size: 2.4rem;
  line-height: 1;
  animation: avatarWobble 3s infinite ease-in-out;
}
@keyframes avatarWobble {
  0%,100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg) scale(1.05); }
}

.player-info { flex: 1; min-width: 0; }
.player-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player-level-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.level-badge {
  background: linear-gradient(135deg, var(--clr-accent2), var(--clr-purple));
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.level-xp-bar {
  flex: 1;
  height: 8px;
  background: #EEE;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.level-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
  border-radius: var(--r-pill);
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}

.player-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.star-icon { font-size: 1.4rem; }
.star-count {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
  color: var(--clr-text);
}

/* Daily challenge banner */
.daily-banner {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  background: linear-gradient(135deg, #FFD93D, #FF9A3C);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(255,154,60,.3);
  flex-shrink: 0;
}
.daily-icon { font-size: 1.8rem; }
.daily-text { flex: 1; }
.daily-text strong { font-family: var(--font-display); font-size: 1rem; color: #3E2000; display: block; }
.daily-text span { font-size: .85rem; color: #6B3800; }

.btn-daily {
  background: #fff;
  color: var(--clr-orange);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  white-space: nowrap;
  transition: transform var(--t-fast);
}
.btn-daily:active { transform: scale(.95); }

/* Menu cards */
.home-menu {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 16px 0;
  flex-shrink: 0;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  border-radius: var(--r-lg);
  box-shadow: 0 5px 18px var(--clr-shadow-md);
  transition: transform var(--t-slow), box-shadow var(--t-fast);
  color: #fff;
  text-align: center;
}
.menu-card:active { transform: scale(.95); box-shadow: 0 2px 8px var(--clr-shadow); }

.card-learn   { background: linear-gradient(145deg, #FF6B6B, #FF9A3C); }
.card-explore { background: linear-gradient(145deg, #4D96FF, #6BCBFF); }
.card-rewards { background: linear-gradient(145deg, #FFD93D, #FF9A3C); }
.card-eggs    { background: linear-gradient(145deg, #C77DFF, #FF6B6B); }

.menu-card-icon  { font-size: 2.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.menu-card-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.menu-card-sub   { font-size: .75rem; opacity: .85; font-weight: 600; }

.home-footer {
  position: relative; z-index: 2;
  text-align: center;
  padding: 16px;
  margin-top: auto;
  font-size: .75rem;
  color: var(--clr-text-light);
}

/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-game {
  background: var(--clr-bg);
  flex-direction: column;
  overflow: hidden;
}

/* Top bar */
.game-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
  background: var(--clr-card);
  box-shadow: 0 2px 12px var(--clr-shadow);
  flex-shrink: 0;
  z-index: 10;
}

.game-level-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-level-label {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 800;
  color: var(--clr-primary);
  white-space: nowrap;
}
.game-progress-bar {
  flex: 1;
  height: 10px;
  background: #EEE;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.game-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-orange));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.game-score-label {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--clr-text-light);
  white-space: nowrap;
}
.game-stars-count {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Timer bar */
.timer-bar-wrap {
  height: 6px;
  background: #EEE;
  flex-shrink: 0;
  position: relative;
}
.timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-secondary));
  border-radius: 0 3px 3px 0;
  transform-origin: left;
  transition: none;
}
.timer-bar.running {
  animation: timerDrain linear forwards;
}
@keyframes timerDrain {
  from { width: 100%; }
  to   { width: 0%; }
}
.timer-bar.warning { background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary)); }

/* ─── MONSTER AREA ─────────────────────────────────────────── */
.monster-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 0;
  flex-shrink: 0;
  position: relative;
}

.monster-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.monster-char {
  font-size: 3rem;
  line-height: 1;
  transition: transform var(--t-slow);
  animation: monsterIdle 2s infinite ease-in-out;
  cursor: default;
}
@keyframes monsterIdle {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.monster-char.celebrate {
  animation: monsterCelebrate .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes monsterCelebrate {
  0%   { transform: scale(.5) rotate(-20deg); }
  60%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.monster-char.sad {
  animation: monsterSad .4s ease both;
}
@keyframes monsterSad {
  0%,100% { transform: rotate(0); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}

.monster-energy-bar {
  width: 52px; height: 8px;
  background: #EEE;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.monster-energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD93D, var(--clr-accent));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}

.monster-emotion {
  font-size: 1.1rem;
  min-height: 1.5em;
  text-align: center;
}

/* Speech bubble */
.task-speech-bubble {
  flex: 1;
  background: var(--clr-card);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px var(--clr-shadow);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.35;
  position: relative;
  max-width: 220px;
}
.task-speech-bubble::before {
  content: '';
  position: absolute;
  left: -10px; top: 14px;
  border: 6px solid transparent;
  border-right-color: var(--clr-card);
}

/* ─── CLOCK STAGE ──────────────────────────────────────────── */
.clock-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 0;
  flex-shrink: 0;
}

/* Analog clock container */
.analog-clock-wrap {
  position: relative;
  width: min(260px, 78vw);
  height: min(260px, 78vw);
  flex-shrink: 0;
}

#clock-svg, #explore-clock-svg {
  width: 100%; height: 100%;
  overflow: visible;
  touch-action: none;
}

/* SVG clock elements */
.clock-outer-ring {
  fill: var(--clr-day-outer);
  stroke: var(--clr-day-inner);
  stroke-width: 2;
  transition: fill .6s ease, stroke .6s ease;
}
.clock-outer-ring.night {
  fill: var(--clr-night-outer);
  stroke: var(--clr-night-inner);
}

.clock-inner-ring {
  fill: var(--clr-day-inner);
  stroke: none;
  transition: fill .6s ease;
}
.clock-inner-ring.night {
  fill: var(--clr-night-inner);
}

.clock-face {
  fill: var(--clr-face);
  stroke: var(--clr-face-stroke);
  stroke-width: 3;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.10));
}

/* Clock hands */
.clock-hand { stroke-width: 7; transition: none; }
.clock-hand-hour  { stroke: var(--clr-hand-hour); stroke-width: 9; }
.clock-hand-minute { stroke: var(--clr-hand-min);  stroke-width: 6; }

/* Drag handle */
.drag-handle {
  fill: transparent;
  cursor: grab;
  stroke: none;
}
.drag-handle:active { cursor: grabbing; }

/* Center dot */
.clock-center-dot       { fill: var(--clr-center); }
.clock-center-dot-inner { fill: var(--clr-center-in); }

/* Day/Night badge */
.day-night-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  background: var(--clr-card);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  box-shadow: 0 3px 10px var(--clr-shadow);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 5;
}
.day-night-badge.pop {
  animation: badgePop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  0%   { transform: translateX(-50%) scale(.5); opacity: 0; }
  100% { transform: translateX(-50%) scale(1);  opacity: 1; }
}

/* Digital display */
.digital-clock-wrap {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.digital-display {
  background: #1C1C2E;
  border-radius: var(--r-md);
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25),
              inset 0 1px 0 rgba(255,255,255,.08);
}

.digital-hours,
.digital-minutes {
  font-family: 'Courier New', 'Baloo 2', monospace;
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFD93D;
  letter-spacing: 2px;
  min-width: 2ch;
  text-align: center;
  text-shadow: 0 0 12px rgba(255,217,61,.5);
}

.digital-colon {
  font-family: 'Courier New', monospace;
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFD93D;
  opacity: .7;
  animation: colonBlink 1s step-end infinite;
}
@keyframes colonBlink {
  0%,50% { opacity: .7; }
  51%,100%{ opacity: .2; }
}

/* ─── TASK AREA ────────────────────────────────────────────── */
.task-area {
  flex: 1;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.task-panel {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: taskPanelIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes taskPanelIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.task-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  text-align: center;
}

/* Task 1 – type digital */
.digital-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-card);
  border-radius: var(--r-md);
  padding: 10px 18px;
  box-shadow: 0 4px 14px var(--clr-shadow);
}
.digital-input-h,
.digital-input-m {
  width: 64px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--clr-text);
  background: #F7F3ED;
  border: 2px solid #EEE;
  border-radius: var(--r-sm);
  padding: 6px 4px;
  transition: border-color var(--t-fast);
  -moz-appearance: textfield;
  appearance: textfield;
}
.digital-input-h::-webkit-inner-spin-button,
.digital-input-m::-webkit-inner-spin-button { -webkit-appearance: none; }
.digital-input-h:focus, .digital-input-m:focus { border-color: var(--clr-accent2); }
.digital-input-colon {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--clr-text);
}

/* Submit button */
.btn-submit {
  background: linear-gradient(135deg, var(--clr-accent), #2E9E4F);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 14px 40px;
  border-radius: var(--r-pill);
  box-shadow: 0 5px 18px rgba(107,203,119,.4);
  letter-spacing: .3px;
  transition: transform var(--t-slow), box-shadow var(--t-fast);
  width: 100%;
  max-width: 260px;
}
.btn-submit:active { transform: scale(.95); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Task 2 – set clock target */
.target-time-display {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--clr-text);
  background: var(--clr-card);
  border-radius: var(--r-md);
  padding: 12px 28px;
  box-shadow: 0 4px 14px var(--clr-shadow);
  letter-spacing: 4px;
}

/* Task 3 & 6 – multiple choice */
.choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.btn-choice {
  background: var(--clr-card);
  border: 3px solid #EEE;
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--clr-text);
  box-shadow: 0 4px 12px var(--clr-shadow);
  transition: transform var(--t-slow), border-color var(--t-fast), background var(--t-fast);
  min-width: 90px;
  text-align: center;
}
.btn-choice:hover  { border-color: var(--clr-accent2); background: #EEF5FF; }
.btn-choice:active { transform: scale(.93); }
.btn-choice.correct { background: #EAFAF0; border-color: var(--clr-accent); }
.btn-choice.wrong   { background: #FDECEA; border-color: var(--clr-primary); animation: shake .4s ease; }

@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}

/* Task 4 – minute wheel */
.minute-wheel-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.btn-min-step {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: var(--clr-accent2);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(77,150,255,.35);
  transition: transform var(--t-fast);
}
.btn-min-step:active { transform: scale(.92); }
.minute-value-display {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--clr-text);
  min-width: 70px;
  text-align: center;
  background: var(--clr-card);
  border-radius: var(--r-md);
  padding: 8px 12px;
  box-shadow: 0 3px 10px var(--clr-shadow);
}

/* Task 5 – day or night */
.daynight-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.btn-daynight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px;
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 5px 18px var(--clr-shadow-md);
  transition: transform var(--t-slow);
}
#btn-day   { background: linear-gradient(145deg, #FFD93D, var(--clr-orange)); }
#btn-night { background: linear-gradient(145deg, #1A237E, #283593); }
.btn-daynight:active { transform: scale(.93); }
.daynight-icon { font-size: 2.5rem; }

/* ─── FEEDBACK OVERLAY ─────────────────────────────────────── */
.feedback-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: 24px;
  animation: fadeIn .2s ease both;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.feedback-card {
  background: var(--clr-card);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  animation: cardPop .4s cubic-bezier(.34,1.56,.64,1) both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@keyframes cardPop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.feedback-emoji { font-size: 3.5rem; }
.feedback-message {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clr-text);
}
.feedback-correct-time {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--clr-text-light);
  min-height: 1.5em;
}
.feedback-stars {
  font-size: 1.5rem;
  letter-spacing: 4px;
  min-height: 2em;
  display: flex;
  gap: 4px;
}
.feedback-star {
  display: inline-block;
  animation: starPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes starPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

.btn-next-task {
  background: linear-gradient(135deg, var(--clr-accent2), var(--clr-purple));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 14px 36px;
  border-radius: var(--r-pill);
  box-shadow: 0 5px 18px rgba(77,150,255,.35);
  margin-top: 4px;
  transition: transform var(--t-slow);
  width: 100%;
}
.btn-next-task:active { transform: scale(.95); }

/* ─── CONFETTI ─────────────────────────────────────────────── */
.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-top);
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 14px;
  border-radius: 2px;
  top: -20px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .1; }
}

/* ═══════════════════════════════════════════════════════════════
   EXPLORE SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-explore {
  background: linear-gradient(170deg, #E8F4FD 0%, #D1E9FB 100%);
}

.explore-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
  flex-shrink: 0;
}
.explore-title {
  flex: 1;
  font-size: 1.5rem;
  color: #0D47A1;
}
.explore-daynight {
  font-size: 1.5rem;
  transition: all .4s ease;
}

.explore-hint {
  text-align: center;
  padding: 8px 16px 0;
  font-size: .95rem;
  color: #1565C0;
  font-weight: 600;
}

.explore-clock-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  flex: 1;
}

.explore-clock {
  width: min(280px, 82vw);
  height: min(280px, 82vw);
}

.explore-digital-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.explore-digital {
  background: #0D47A1;
}

.explore-feedback {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0D47A1;
  text-align: center;
  min-height: 1.8em;
  transition: all .3s ease;
  /* FIX 4: removed always-on animation — now only triggers via class */
}
/* FIX 4: animation fires when class is toggled by JS */
.explore-feedback.feedbackPulse {
  animation: feedbackPulse .4s ease both;
}
@keyframes feedbackPulse {
  0%   { transform: scale(.95); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.explore-time-facts {
  padding: 0 16px 24px;
  text-align: center;
  font-size: .9rem;
  color: #1565C0;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   REWARDS SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-rewards {
  background: linear-gradient(170deg, #FFFDE7 0%, #FFF9C4 100%);
}

.rewards-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rewards-section {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 4px 14px var(--clr-shadow);
}

.rewards-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text-light);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.rewards-stars-display {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--clr-orange);
  text-align: center;
  text-shadow: 0 3px 8px rgba(255,154,60,.3);
}
.rewards-stars-display::before { content: '⭐ '; }

/* Medals grid */
.medals-grid, .hats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
}
.medal-item, .hat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: #F7F3ED;
  border-radius: var(--r-md);
  font-size: 2rem;
  text-align: center;
  transition: transform var(--t-slow);
}
.medal-item.locked, .hat-item.locked {
  filter: grayscale(1);
  opacity: .45;
}
.medal-item:not(.locked):hover,
.hat-item:not(.locked):hover { transform: scale(1.1) rotate(-3deg); }
.medal-label, .hat-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--clr-text-light);
  text-align: center;
  line-height: 1.2;
}

/* Streak */
.streak-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.streak-fire { font-size: 2rem; animation: flameDance .5s infinite alternate; }
@keyframes flameDance {
  from { transform: scale(1) rotate(-5deg); }
  to   { transform: scale(1.1) rotate(5deg); }
}
.streak-count {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--clr-orange);
}
.streak-label {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-text-light);
}

/* ═══════════════════════════════════════════════════════════════
   EGG SHOP SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-eggs {
  background: linear-gradient(170deg, #F3E5F5 0%, #EDE7F6 100%);
}

.egg-intro {
  text-align: center;
  padding: 0 16px 8px;
  font-size: 1rem;
  color: #6A1B9A;
  font-weight: 700;
}

.eggs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  padding: 8px 16px 24px;
  overflow-y: auto;
  flex: 1;
}

.egg-card {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px var(--clr-shadow);
  transition: transform var(--t-slow);
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
}
.egg-card:hover { transform: translateY(-4px); border-color: var(--clr-purple); }
.egg-card.locked { opacity: .6; cursor: not-allowed; }
.egg-card.locked:hover { transform: none; border-color: transparent; }

.egg-icon { font-size: 3rem; line-height: 1; }
.egg-name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--clr-text);
}
.egg-cost {
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-orange);
}
.egg-unlocked-badge {
  background: linear-gradient(135deg, var(--clr-accent), #2E9E4F);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* Hatch stage */
.egg-hatch-stage {
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.egg-hatching {
  font-size: 5rem;
  animation: eggShake .2s infinite;
}
@keyframes eggShake {
  0%,100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}
.egg-hatch-msg {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #6A1B9A;
}

/* ═══════════════════════════════════════════════════════════════
   PARENT DASHBOARD SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-parent {
  background: linear-gradient(170deg, #F1F8FF 0%, #E3F2FD 100%);
}

.parent-header { background: transparent; }

/* PIN Gate */
.parent-pin-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 20px 24px 40px;
}

.pin-prompt {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0D47A1;
}

.pin-dots {
  display: flex;
  gap: 14px;
}
.pin-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #CBD5E0;
  transition: background var(--t-fast), transform var(--t-slow);
}
.pin-dot.filled {
  background: var(--clr-accent2);
  transform: scale(1.2);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 10px;
}
.pin-key {
  height: 60px;
  background: var(--clr-card);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--clr-text);
  box-shadow: 0 4px 10px var(--clr-shadow);
  transition: transform var(--t-fast), background var(--t-fast);
}
.pin-key:active { transform: scale(.92); background: #EEF5FF; }
.pin-key-clear { color: var(--clr-primary); }
.pin-key-ok    { background: var(--clr-accent); color: #fff; }

.pin-hint {
  font-size: .8rem;
  color: var(--clr-text-light);
}

/* Parent content */
.parent-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.parent-child-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 4px 14px var(--clr-shadow);
}
.parent-avatar-big { font-size: 3.5rem; }
.parent-child-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--clr-text);
}
.parent-child-level {
  font-size: .9rem;
  color: var(--clr-text-light);
  font-weight: 700;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-card {
  background: var(--clr-card);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 4px 12px var(--clr-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-icon { font-size: 1.4rem; }
.stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--clr-text);
}
.stat-label { font-size: .75rem; color: var(--clr-text-light); font-weight: 700; }

/* Parent sections */
.parent-section {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 4px 12px var(--clr-shadow);
}
.parent-section h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-text-light);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

/* Level progress rows */
.level-progress-rows { display: flex; flex-direction: column; gap: 10px; }
.level-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-row-label {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  width: 60px;
  flex-shrink: 0;
}
.level-row-bar {
  flex: 1;
  height: 12px;
  background: #EEE;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.level-row-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-accent2), var(--clr-purple));
  border-radius: var(--r-pill);
  transition: width .6s ease;
}
.level-row-pct {
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-text-light);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Activity list */
.activity-list { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #F7F3ED;
  border-radius: var(--r-sm);
  font-size: .85rem;
}
.activity-icon { font-size: 1.1rem; flex-shrink: 0; }
.activity-text { flex: 1; color: var(--clr-text-light); }
.activity-time { font-size: .75rem; color: #AAA; flex-shrink: 0; }

/* Settings inputs */
.parent-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #F0E9DE;
  flex-wrap: wrap;
}
.parent-name-row label {
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.child-name-input {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border: 2px solid #EEE;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-family: var(--font-body);
  background: #F7F3ED;
  transition: border-color var(--t-fast);
}
.child-name-input:focus { border-color: var(--clr-accent2); }

/* ═══════════════════════════════════════════════════════════════
   LEVEL UP SCREEN
═══════════════════════════════════════════════════════════════ */
#screen-levelup {
  background: linear-gradient(145deg, #FF6B6B, #FFD93D, #6BCB77, #4D96FF, #C77DFF);
  background-size: 400% 400%;
  animation: rainbowBg 3s ease infinite;
  align-items: center;
  justify-content: center;
}
@keyframes rainbowBg {
  0%  { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.levelup-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  position: relative;
}

.levelup-fireworks {
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

.levelup-badge {
  font-size: 6rem;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
  animation: badgeBounce .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgeBounce {
  0%  { transform: scale(0) rotate(-45deg); opacity: 0; }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}

.levelup-title {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.levelup-sub {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.levelup-monsters {
  display: flex;
  gap: 12px;
  font-size: 2.5rem;
}
.levelup-monster {
  animation: monsterParty .5s infinite alternate;
  display: inline-block;
}
.levelup-monster:nth-child(1) { animation-delay: 0s; }
.levelup-monster:nth-child(2) { animation-delay: .1s; }
.levelup-monster:nth-child(3) { animation-delay: .2s; }
.levelup-monster:nth-child(4) { animation-delay: .3s; }
@keyframes monsterParty {
  from { transform: translateY(0) rotate(-10deg) scale(1); }
  to   { transform: translateY(-16px) rotate(10deg) scale(1.1); }
}

.btn-continue {
  background: #fff;
  color: var(--clr-primary);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  padding: 16px 44px;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  transition: transform var(--t-slow);
  margin-top: 8px;
}
.btn-continue:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS MODAL
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
  animation: fadeIn .2s ease both;
}

.modal-card {
  background: var(--clr-card);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  animation: cardPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header h3 { font-size: 1.3rem; font-weight: 800; }
.modal-close { background: #F0E9DE; }
.modal-body { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════
   INSTALL BANNER
═══════════════════════════════════════════════════════════════ */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-orange));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px calc(14px + var(--safe-bottom));
  z-index: var(--z-top);
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  animation: slideUp .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.install-banner-text {
  flex: 1;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
}
.btn-install {
  background: #fff;
  color: var(--clr-primary);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.install-banner-close {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   SVG CLOCK ELEMENT STYLES (applied via JS setAttribute)
═══════════════════════════════════════════════════════════════ */

/* Minute tick marks */
.minute-tick-major {
  stroke: var(--clr-tick);
  stroke-width: 2.5;
}
.minute-tick-minor {
  stroke: #C5D1D8;
  stroke-width: 1.5;
}

/* Hour number text in SVG */
.outer-hour-text {
  font-family: 'Baloo 2', cursive;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--clr-day-num);
  transition: fill .5s ease;
}
.outer-hour-text.night-num { fill: #FFF9E6; }

.inner-hour-text {
  font-family: 'Baloo 2', cursive;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #6B3E00;
  transition: fill .5s ease;
}
.inner-hour-text.night-num { fill: var(--clr-night-num); }
.inner-hour-text.hidden { display: none; }

.minute-label-text {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #78909C;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE / LARGE SCREENS
═══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .home-menu { max-width: 480px; margin: 0 auto; }
  .analog-clock-wrap { width: 280px; height: 280px; }
  .explore-clock    { width: 300px; height: 300px; }
  .digital-hours, .digital-minutes { font-size: 2.6rem; }
}

@media (min-width: 768px) {
  html { font-size: 17px; }

  #screen-home, #screen-game, #screen-explore,
  #screen-rewards, #screen-eggs, #screen-parent {
    max-width: 520px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0,0,0,.12);
    border-radius: 0;
  }

  .analog-clock-wrap { width: 300px; height: 300px; }
  .explore-clock    { width: 320px; height: 320px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY / REDUCED MOTION
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A0AEC0; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hidden    { display: none !important; }
.no-select { -webkit-user-select: none; user-select: none; }

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--clr-accent2);
  outline-offset: 3px;
  border-radius: 4px;
}