:root {
  --pink: #ff6fa5;
  --pink-dark: #e85a90;
  --sea: #1c7fbf;
  --sky: #eafbff;
  --ink: #243b53;
  --font: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #bfe9ff 0%, #eafbff 45%, #d7f3ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.game {
  position: relative;
  width: 100%;
  max-width: 1120px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(28, 127, 191, 0.25);
  overflow: hidden;
  text-align: center;
  padding: 20px;
}

/* Pearls counter — a little pill in the top inline-start corner (left in LTR,
   right in Hebrew/Arabic), shown on every stage. The celebration pearl flies
   into it and it pops when a pearl is added. */
.pearls-badge {
  position: absolute;
  /* Sits on the same virtual row as the HUD's Back + Support Lili buttons
     (which start ~29px below the game's top edge), so on the game screens the
     pearl counter lines up with that row rather than riding higher. */
  top: 29px;
  inset-inline-start: 16px;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #cdeffd;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 18px;
  color: var(--pink-dark);
  box-shadow: 0 4px 12px rgba(28, 127, 191, 0.2);
}
.pearl-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #ffffff, #ffe6f2 42%, #d9c7ff 76%, #b9a7e6);
  box-shadow: inset 0 0 3px rgba(150, 120, 200, 0.5);
}
.pearls-badge.pop { animation: pearlPop 0.4s ease; }
@keyframes pearlPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* The stage-finished celebration overlay covers the whole card. */
.celebrate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
}
.celebrate-canvas[hidden] { display: none; }

/* Lili logo — a small transparent brand mark centered on the top row of every
   stage. It's absolutely positioned so it overlays the existing header row
   (alongside the language button) without adding any height. */
.stage-logo {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: auto;
  z-index: 15;
  pointer-events: none;
}

/* On the story screens (Start, Meet Lili, and the two cutscenes) the logo
   moves out of the top row down to the bottom corner — bottom-right normally,
   bottom-left in right-to-left languages (Hebrew, Arabic). The playable stages
   keep the centered top logo defined above. */
.game:has(#start-screen.is-active) .stage-logo,
.game:has(#intro-screen.is-active) .stage-logo,
.game:has(#girls-screen.is-active) .stage-logo,
.game:has(#stage6-screen.is-active) .stage-logo,
.game:has(#stage8-screen.is-active) .stage-logo,
.game:has(#stage10-screen.is-active) .stage-logo,
.game:has(#stage11-screen.is-active) .stage-logo {
  top: auto;
  bottom: 16px;
  left: auto;
  right: 16px;
  transform: none;
}
:root[dir="rtl"] .game:has(#start-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#intro-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#girls-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#stage6-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#stage8-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#stage10-screen.is-active) .stage-logo,
:root[dir="rtl"] .game:has(#stage11-screen.is-active) .stage-logo {
  right: auto;
  left: 16px;
}

/* On the playable stages, drop the centered logo down so it sits in the HUD's
   button row — level with the "Stage: N" label and the Map / Dressing tools. */
.game:has(#game-screen.is-active) .stage-logo,
.game:has(#stage5-screen.is-active) .stage-logo,
.game:has(#stage7-screen.is-active) .stage-logo,
.game:has(#stage9-screen.is-active) .stage-logo,
.game:has(#stage12-screen.is-active) .stage-logo,
.game:has(#stage13-screen.is-active) .stage-logo {
  top: 27px;
  height: 38px;
}

/* Screens */
.screen { display: none; }
.screen.is-active { display: block; animation: fade 0.4s ease; }

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

/* Language picker (top corner, shown on every screen). The round button
   shows the current language's flag; clicking it opens a small menu. */
.lang-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
}
/* In Hebrew (RTL) the picker sits in the opposite corner. */
:root[dir="rtl"] .lang-wrap { right: auto; left: 16px; }

.lang-btn {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--sea);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 5px 0 #145f8f, 0 8px 16px rgba(28, 127, 191, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.lang-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #145f8f; }
.lang-btn:focus-visible { outline: 4px solid #bfe9ff; outline-offset: 3px; }

/* Round music on/off button. Matches the language picker and sits just inline-
   start of it (its left in LTR, its right in RTL), on every screen. */
.music-btn {
  position: absolute;
  top: 16px;
  inset-inline-end: 80px;            /* 52px button + 16px gutter + 12px gap */
  z-index: 20;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--sea);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 #145f8f, 0 8px 16px rgba(28, 127, 191, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.music-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #145f8f; }
.music-btn:focus-visible { outline: 4px solid #bfe9ff; outline-offset: 3px; }
.music-ic {
  width: 26px;
  height: 26px;
  fill: #fff;
  pointer-events: none;
}
/* Show the "on" icon by default, the "off" (muted) icon when muted. */
.music-ic-off { display: none; }
.music-btn.is-muted .music-ic-on { display: none; }
.music-btn.is-muted .music-ic-off { display: block; }

/* The flag fills the round button. */
.lang-flag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dropdown list of languages. */
.lang-menu {
  position: absolute;
  top: 60px;
  right: 0;
  min-width: 172px;
  background: #fff;
  border: 3px solid #cdeffd;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(28, 127, 191, 0.32);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu[hidden] { display: none; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-align: start;
}
.lang-option:hover { background: #eaf6ff; }
.lang-option.is-active { background: #d7f0ff; }

/* Small rectangular flag inside each menu row (overrides the round-button flag). */
.lang-option .lang-flag {
  width: 28px;
  height: 19px;
  border-radius: 4px;
  border: 1px solid #cdeffd;
  flex: 0 0 auto;
}
.lang-name { white-space: nowrap; }

/* "Support Lili" link — links to Lili's Ko-fi page. Shown on every stage.
   Shared pink-pill look; placement differs by screen type (see below). */
.support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--pink-dark), 0 8px 16px rgba(232, 90, 144, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.support-link:hover { background: var(--pink-dark); }
.support-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dark); }
.support-link:focus-visible { outline: 4px solid #ffd6e6; outline-offset: 3px; }

.support-heart {
  width: 20px;
  height: 20px;
  fill: #fff;
  flex: 0 0 auto;
  animation: heart-beat 1.4s ease-in-out infinite;
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Story screens: float the button just UNDER the round language button in
   the top corner. In Hebrew (RTL) it sits under the flag on the opposite side.
   z-index is below the language menu (20) so an open menu covers it cleanly. */
.support-float {
  position: absolute;
  top: 78px;
  right: 16px;
  z-index: 19;
}
:root[dir="rtl"] .support-float { right: auto; left: 16px; }

/* On the game screens the floating copy is hidden — there the button lives
   inside the HUD, right after the Back button (the .support-hud copy). */
.game:has(#game-screen.is-active) .support-float,
.game:has(#stage5-screen.is-active) .support-float,
.game:has(#stage7-screen.is-active) .support-float,
.game:has(#stage9-screen.is-active) .support-float,
.game:has(#stage12-screen.is-active) .support-float,
.game:has(#stage13-screen.is-active) .support-float { display: none; }

/* Game-screen HUD copy: a touch smaller so it sits neatly beside the Back
   button, and flatter (no big drop shadow) to match the small HUD buttons. */
.support-hud {
  font-size: 15px;
  padding: 8px 16px;
  box-shadow: 0 4px 0 var(--pink-dark);
}
.support-hud .support-heart { width: 18px; height: 18px; }

/* On narrower screens, shrink the pill so it never crowds the top corner. */
@media (max-width: 560px) {
  .support-link { font-size: 14px; padding: 7px 12px; gap: 6px; }
  .support-heart { width: 17px; height: 17px; }
  .support-float { top: 74px; }
  .stage-logo { height: 40px; top: 12px; }
}

/* On narrow phones the game HUD row (Stage + Back + Support + flag) fills the
   width, so hide the centered logo on the three playable stages to avoid it
   overlapping the buttons. It still shows on the story screens and on wider
   screens where there's room. */
@media (max-width: 760px) {
  .game:has(#game-screen.is-active) .stage-logo,
  .game:has(#stage5-screen.is-active) .stage-logo,
  .game:has(#stage7-screen.is-active) .stage-logo,
  .game:has(#stage9-screen.is-active) .stage-logo,
  .game:has(#stage12-screen.is-active) .stage-logo,
  .game:has(#stage13-screen.is-active) .stage-logo { display: none; }
}

/* Start screen */
.scene {
  border-radius: 18px;
  overflow: hidden;
  background: #eafbff;
  border: 4px solid #cdeffd;
  max-width: 640px;
  margin: 0 auto;
}

.scene-img {
  display: block;
  width: 100%;
  height: auto;
}

.title {
  font-size: clamp(28px, 5vw, 44px);
  margin: 18px 0 4px;
  color: var(--pink-dark);
  text-shadow: 0 2px 0 #ffd6e6;
}

.subtitle {
  margin: 0 0 18px;
  font-size: clamp(15px, 2.4vw, 20px);
  color: var(--sea);
}

.hint {
  margin-top: 14px;
  font-size: 14px;
  color: #6b7a8d;
}

/* Intro screen (Lili's selfie + speech bubble) */
.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 620px;
  margin: 8px auto 20px;
}

.speech-bubble {
  position: relative;
  background: #fff;
  border: 4px solid var(--pink);
  border-radius: 26px;
  padding: 20px 26px;
  margin-bottom: 20px;
  max-width: 520px;
  box-shadow: 0 8px 22px rgba(232, 90, 144, 0.2);
}

.speech-bubble p {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 700;
  color: var(--pink-dark);
  line-height: 1.35;
}

/* Little tail pointing down toward Lili. */
.speech-bubble::after,
.speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
}
.speech-bubble::before {
  border-width: 22px 18px 0 18px;
  border-color: var(--pink) transparent transparent transparent;
}
.speech-bubble::after {
  bottom: -15px;
  border-width: 16px 13px 0 13px;
  border-color: #fff transparent transparent transparent;
}

.intro-portrait {
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid #cdeffd;
  box-shadow: 0 12px 30px rgba(28, 127, 191, 0.25);
  max-width: 300px;
}

.intro-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============ Stage 4: Meet Jessica & Ella (cutscene) ============ */
.girls-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 8px auto 20px;
}

.girls-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1408 / 768;
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid #cdeffd;
  box-shadow: 0 14px 34px rgba(28, 127, 191, 0.28);
  background: #eafbff;
}

.girls-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom pivots on Jessica's face (the girl on the right). */
  transform-origin: 64% 34%;
  transform: scale(1);
  transition: transform 1.4s ease-in-out;
  will-change: transform;
}

/* Phase 1 — camera pushes right in so only Jessica fills the frame. */
.girls-frame.zoom-in .girls-img { transform: scale(3.4); }
/* Phase 2 — pull back to reveal both friends. */
.girls-frame.zoom-out .girls-img { transform: scale(1); }

.girls-caption {
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 4px solid var(--pink);
  border-radius: 22px;
  padding: 16px 26px;
  max-width: 620px;
  box-shadow: 0 8px 22px rgba(232, 90, 144, 0.18);
}

.girls-caption p {
  margin: 0;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: var(--pink-dark);
  line-height: 1.35;
}

/* The Next button stays hidden until the sequence finishes. */
.girls-next {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.girls-next.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ============ Stage 6: The girls meet the mermaid (cutscene) ============ */
/* Reuses .girls-stage, .girls-caption and .girls-next from stage 4. */
.story-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1168 / 784;
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid #cdeffd;
  box-shadow: 0 14px 34px rgba(28, 127, 191, 0.28);
  background: #eafbff;
}

.story-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The scene OPENS zoomed in on the two girls, centered on them and with
     the mermaid cropped out of frame, then pulls back to the full picture
     (which brings the mermaid into view). */
  transform-origin: 38% 34%;
  transform: scale(2.5);
  transition: transform 1.6s ease-in-out;
  will-change: transform;
}

/* Snap to the zoomed-in start with no animation when (re)entering the scene. */
.story-frame.no-anim .story-img { transition: none; }
/* Phase 2 — pull back to reveal the full picture (the mermaid arriving). */
.story-frame.zoom-out .story-img { transform: scale(1); }

/* Keep the Back button below the Next button clear and subtle. */
#stage6-back-btn,
#girls-back-btn { margin-top: 4px; }

/* Row that holds a Back + Next pair side by side (e.g. the intro screen). */
.btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Stage 8: Lili asks the girls to free Simba ============ */
/* A calm, static picture (no zoom) with a longer multi-line message below. */
.stage8-frame {
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid #cdeffd;
  box-shadow: 0 14px 34px rgba(28, 127, 191, 0.28);
  background: #eafbff;
}

.stage8-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Preserve the line breaks in the message so it reads as written. */
.stage8-caption {
  max-width: 560px;
}
.stage8-caption p {
  white-space: pre-line;
  font-size: clamp(17px, 2.6vw, 23px);
  line-height: 1.45;
}

/* ============ Stage 10: Lili thanks the girls (ending cutscene) ============ */
/* Reuses the stage 8 frame/caption look; the ending picture gets a touch more
   room so the happy final scene reads clearly. */
.stage10-frame {
  max-width: 560px;
}

/* ================ Stage 7: deep-sea clean-up ================ */
/* Wrap lets the win overlay sit exactly on top of the canvas. */
.canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
}

#game7-canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  background: linear-gradient(180deg, #bfe9ff 0%, #3fb8e0 55%, #1c7fbf 100%);
  border-radius: 18px;
  border: 4px solid #cdeffd;
}

/* Stage 9 (temp) — free-the-animals rescue canvas */
#game9-canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  background: linear-gradient(180deg, #bfe9ff 0%, #3fb8e0 55%, #1c7fbf 100%);
  border-radius: 18px;
  border: 4px solid #cdeffd;
}

/* Victory overlay, centered over the canvas. */
.win-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 127, 191, 0.35);
  border-radius: 18px;
  animation: fade 0.4s ease;
}

.win-overlay[hidden] { display: none; }

.win-card {
  background: #fff;
  border: 5px solid var(--pink);
  border-radius: 24px;
  padding: 26px 34px;
  max-width: 82%;
  box-shadow: 0 14px 34px rgba(232, 90, 144, 0.3);
}

.win-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--pink-dark);
  text-shadow: 0 2px 0 #ffd6e6;
}

.win-text {
  margin: 0 0 18px;
  font-size: clamp(15px, 2.4vw, 20px);
  color: var(--sea);
}

.win-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===================== Debug tools (start screen) ===================== */
.debug-box {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #cdeffd;
  font-size: 13px;
}

.debug-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7a8d;
  cursor: pointer;
  user-select: none;
}

.debug-toggle input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #7a8aa0;
}

.debug-panel {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.debug-panel[hidden] { display: none; }

/* Neutral grey so debug buttons read as tools, not gameplay.
   `.btn.debug-jump` beats the later `.btn` colour rule on specificity. */
.btn.debug-jump {
  background: #7a8aa0;
  box-shadow: 0 4px 0 #5f6d80;
}
.btn.debug-jump:hover { background: #66748a; }
.btn.debug-jump:active { box-shadow: 0 2px 0 #5f6d80; }

/* Buttons */
.btn {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  border: none;
  border-radius: 999px;
  padding: 14px 46px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--pink-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:hover { background: var(--pink-dark); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-dark); }
.btn:focus-visible { outline: 4px solid #ffd6e6; outline-offset: 3px; }

.btn-small {
  font-size: 16px;
  padding: 8px 22px;
  box-shadow: 0 4px 0 var(--pink-dark);
}

/* Game screen */
.hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 14px;
}

/* The stage label sits at the far left; the injected Map + Dressing tools sit
   right next to it (see .hud-tools), and that group's auto margin pushes the
   Back + Support Lili buttons to the right. */
.hud .hud-item { margin-inline-end: 10px; }

.hud-item { font-size: 20px; }

/* Keep the HUD's Back button clear of the round language toggle. */
#game-screen .hud,
#stage5-screen .hud,
#stage7-screen .hud,
#stage9-screen .hud,
#stage12-screen .hud,
#stage13-screen .hud { padding-inline: 84px 140px; }  /* clear BOTH round buttons (music + language) on the end side */

.play-area {
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
}

/* Tap-to-swim: let the canvas capture touch drags without the page scrolling
   or zooming, and hint that it's interactive. The tap-highlight is disabled so
   tapping these canvases doesn't flash a blue box on mobile — matching the
   behaviour of stages 12 & 13 (which have no such highlight). */
#game-canvas,
#game5-canvas,
#game7-canvas,
#game9-canvas {
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-canvas {
  width: 100%;
  max-width: 800px;
  height: auto;
  background: linear-gradient(180deg, #bfe9ff 0%, #3fb8e0 60%, #1c7fbf 100%);
  border-radius: 18px;
  border: 4px solid #cdeffd;
}

/* Stage 5 beach canvas — sandy fallback background */
#game5-canvas {
  width: 100%;
  max-width: 800px;
  height: auto;
  background: linear-gradient(180deg, #fbeecb 0%, #f0d79a 100%);
  border-radius: 18px;
  border: 4px solid #f0dca8;
}

/* Side score panel */
.side-panel {
  width: 220px;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.counter-card {
  background: linear-gradient(180deg, #fff 0%, #f3fbff 100%);
  border: 3px solid #cdeffd;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(28, 127, 191, 0.15);
  text-align: center;
}

.counter-label {
  font-size: 16px;
  color: var(--sea);
  font-weight: 700;
  margin-bottom: 6px;
}

.counter-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--pink-dark);
}

/* Bag fill meter */
.bag {
  position: relative;
  width: 74px;
  height: 90px;
  margin: 14px auto 4px;
  background: #eaf6ff;
  border: 3px solid #b9dff5;
  border-radius: 10px 10px 16px 16px;
  overflow: hidden;
}

.bag::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  border: 3px solid #b9dff5;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.bag-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #7fe0a8 0%, #46c47f 100%);
  transition: height 0.3s ease;
}

.controls-hint {
  font-size: 15px;
  line-height: 1.5;
  color: #56687d;
  background: #f3fbff;
  border: 3px solid #cdeffd;
  border-radius: 18px;
  padding: 14px;
  margin: 0;
  text-align: center;
}

.controls-hint strong { color: var(--sea); }

/* Stack the side panel under the canvas on small screens */
@media (max-width: 900px) {
  .play-area { flex-direction: column; align-items: center; }
  .side-panel { width: 100%; flex: 1 1 auto; max-width: 640px; flex-direction: row; }
  .counter-card, .controls-hint { flex: 1; }
}

/* ============================ Dressing room ============================ */
/* A calm room where kids pick each girl's dress colour. The DressingRoom.jpg
   photo fills the panel; a live preview of the two girls sits on top with the
   colour swatches beside it. Reuses the app font/colours for a consistent look. */
.dressing-room {
  width: min(96%, 860px);
  margin: 8px auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: #16384b url("assets/DressingRoom.jpg") center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(20, 40, 60, 0.35);
}
.dressing-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 40, 60, 0.45);
  backdrop-filter: blur(2px);
}
.dressing-title {
  margin: 0;
  color: #fff;
  font-family: var(--font);
  font-size: 24px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.dressing-body {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.dressing-preview-wrap {
  flex: 1 1 280px;
  max-width: 380px;
  display: flex;
  justify-content: center;
}
.dressing-preview {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(20, 40, 60, 0.3);
}
.dressing-controls {
  flex: 1 1 260px;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 16px 18px;
}
.dressing-hint {
  margin: 0 0 12px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--pink-dark);
  font-size: 18px;
}
.dress-group { margin-bottom: 16px; }
.dress-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}
.swatch-row { display: flex; gap: 12px; }
.swatch {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--sw, #ccc);
  box-shadow: 0 2px 6px rgba(20, 40, 60, 0.35);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch:focus-visible { outline: 4px solid #ffd6e6; outline-offset: 3px; }
.swatch.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink);
}
.dressing-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #5a6b7b;
}
:root[dir="rtl"] .dressing-header { flex-direction: row-reverse; }
@media (max-width: 560px) {
  .swatch { width: 40px; height: 40px; }
  .dressing-title { font-size: 20px; }
}

/* ===================== Top-panel tools (Map + Dressing) ===================== */
/* Shown on every screen. On story pages they stack just below the Support Lili
   button (end side); on play stages that float is hidden, so they move to the
   start side of the top panel, tucked under the pearls counter. */
.top-tools {
  position: absolute;
  z-index: 18;
  top: 132px;
  inset-inline-end: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 0 #145f8f, 0 6px 14px rgba(28, 127, 191, 0.28);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.tool-btn:hover { background: #166fa8; }
.tool-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #145f8f; }
.tool-btn:focus-visible { outline: 4px solid #bfe9ff; outline-offset: 3px; }

/* Play stages: move the tools to the start side, up into the top panel. */
.game:has(#game-screen.is-active) .top-tools,
.game:has(#stage5-screen.is-active) .top-tools,
.game:has(#stage7-screen.is-active) .top-tools,
.game:has(#stage9-screen.is-active) .top-tools,
.game:has(#stage12-screen.is-active) .top-tools,
.game:has(#stage13-screen.is-active) .top-tools { display: none; }

/* Play stages: the Map + Dressing tools sit inside the HUD, in the same row as
   and right next to the "Stage: N" label. This group's auto end-margin then
   pushes the Back + Support buttons over to the right. */
.hud-tools {
  display: flex;
  gap: 8px;
  margin-inline-end: auto;
}
.hud-tools .tool-btn {
  font-size: 15px;
  padding: 8px 16px;
  box-shadow: 0 4px 0 #145f8f;
}

@media (max-width: 560px) {
  .tool-btn { font-size: 13px; padding: 7px 12px; }
  .top-tools { top: 120px; }
}

/* ============================ Modal overlays ============================ */
/* The Map and the Dressing room open here, on top of whatever screen is
   showing. The stage stays visible, dimmed by the backdrop, behind them. */
.overlay-root {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay-root[hidden] { display: none; }
.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 60, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.overlay-root.is-open .overlay-backdrop { opacity: 1; }
.overlay-card {
  position: relative;
  z-index: 1;
  width: min(96%, 640px);
  max-height: 88%;
  overflow: auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(20, 40, 60, 0.45);
  padding: 20px 22px 24px;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.overlay-root.is-open .overlay-card { transform: none; opacity: 1; }
.overlay-title {
  margin: 0 0 14px;
  font-family: var(--font);
  color: var(--pink-dark);
  font-size: 24px;
  text-align: center;
}
.overlay-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #f0f6fb;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 #cdddea;
}
.overlay-close:hover { background: #e2eef8; }
.overlay-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #cdddea; }
.overlay-close:focus-visible { outline: 4px solid #bfe9ff; outline-offset: 2px; }

/* Dressing room card gets the DressingRoom.jpg backdrop behind a soft panel. */
.wardrobe-card {
  /* A little wider than the other overlays so the dressing controls have room
     for longer translations (German, Italian, French, Polish, Romanian) on one
     line each, instead of wrapping and forcing a scrollbar. */
  width: min(96%, 780px);
  background: #16384b url("assets/DressingRoom.jpg") center / cover no-repeat;
}
.wardrobe-card .overlay-title { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.45); }
.wardrobe-card .dressing-body {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 16px;
  padding: 14px;
}

/* ---- Adventure map (illustrated Map.jpg with clickable signposts) ---- */
/* Cover the whole window rather than just the (variable-height) game card, so
   the tall map is measured against the viewport and always fits on screen. */
#map-overlay { position: fixed; }

/* The map card shrinks to hug the tall map image instead of the fixed 640px
   width the other overlays use. */
.map-card--image {
  width: auto;
  max-width: min(94%, 620px);
  /* Taller than the default overlay cap so the whole tall map fits on screen
     without scrolling; overflow stays auto as a safety net on tiny screens. */
  max-height: 96%;
  padding: 12px 16px 16px;
}
.map-card--image .overlay-title { margin: 0 0 10px; }
.map-image-wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;                 /* no stray gap under the image */
}
.map-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Keep the whole tall map visible without scrolling on typical screens. */
  max-height: 72dvh;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 40, 60, 0.25);
}

/* Each signpost hotspot is an invisible button laid over the drawn sign;
   game.js sets its left/top/width/height as percentages of the image. */
.map-nodes {
  position: absolute;
  inset: 0;
}
.map-node {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.map-node:hover,
.map-node:focus-visible {
  background: rgba(255, 213, 74, 0.30);
  border-color: rgba(255, 170, 30, 0.95);
  outline: none;
}
.map-node:active { transform: scale(0.97); }

/* Number + label are drawn on the picture already — keep the text for screen
   readers only. */
.map-node-num,
.map-node-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* A small green check tucked in the corner of a cleared stage's sign. */
.map-node-status {
  position: absolute;
  top: -9px;
  inset-inline-end: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3caa6a;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.map-node.is-passed .map-node-status { display: flex; }

/* ---- Dressing room: Lili / girls toggle (unlocked by pearls) ---- */
.dress-toggle {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  background: #b7c1cb;                 /* locked / disabled look */
  box-shadow: 0 3px 0 rgba(90, 107, 123, 0.6);
  cursor: not-allowed;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.dress-toggle:disabled { opacity: 0.85; }
.dress-toggle:not(:disabled) {
  background: var(--pink);
  box-shadow: 0 4px 0 var(--pink-dark);
  cursor: pointer;
}
.dress-toggle:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dark); }
.dress-toggle[aria-pressed="true"]:not(:disabled) {
  background: var(--sea);
  box-shadow: 0 4px 0 #145f8f;
}
/* Shine while it's available to press. */
.dress-toggle.is-shiny { animation: dressShine 1.5s ease-in-out infinite; }
@keyframes dressShine {
  0%, 100% { box-shadow: 0 4px 0 var(--pink-dark), 0 0 0 0 rgba(255, 240, 170, 0); }
  50%      { box-shadow: 0 4px 0 var(--pink-dark), 0 0 18px 5px rgba(255, 240, 170, 0.95); }
}
.dress-toggle.is-shiny[aria-pressed="true"] { animation: dressShineSea 1.5s ease-in-out infinite; }
@keyframes dressShineSea {
  0%, 100% { box-shadow: 0 4px 0 #145f8f, 0 0 0 0 rgba(191, 233, 255, 0); }
  50%      { box-shadow: 0 4px 0 #145f8f, 0 0 18px 5px rgba(191, 233, 255, 0.95); }
}
/* In Lili mode, only Lili is shown — hide the girls' dress controls. */
.wardrobe-card.showing-lili .dressing-hint,
.wardrobe-card.showing-lili .dress-group,
.wardrobe-card.showing-lili .dressing-note { display: none; }

/* Lili's hair-colour swatches are the exception: hidden in the girls' view,
   shown only in the "Show Lili" view (and kept visible there even though it
   carries the .dress-group class the rule above hides). */
.dress-hair-group { display: none; }
.wardrobe-card.showing-lili .dress-hair-group { display: block; }

/* =====================================================================
   RESPONSIVE LAYOUT — auto-adapts to phone & tablet screens.
   Laptop/desktop (>= 1024px) keeps the original centered-card design;
   everything below only applies at <= 1023px.
   Uses dynamic viewport height (dvh) so the phone address bar is handled.
   ===================================================================== */
@media (max-width: 1023px) {
  html, body { min-height: 100dvh; }
  body { padding: 0; align-items: stretch; justify-content: stretch; }

  /* The game becomes a full-screen app: fills the viewport, no wasted
     space, content stacked in a column. A top strip is reserved so the
     absolutely-positioned pearls / language / tools never overlap the
     screen content. */
  .game {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 10px;
    padding-top: 140px;          /* header strip (story screens: pearls + 2 tool rows) */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* The visible screen fills the remaining height and centres its content
     so there is neither overlap nor big empty gaps. */
  .screen.is-active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    width: 100%;
  }

  /* ---- Header strip: pearls (start side), language (end side) ---- */
  .pearls-badge { top: 12px; inset-inline-start: 10px; font-size: 16px; }
  .lang-wrap { top: 10px; inset-inline-end: 10px; }
  .lang-btn { width: 44px; height: 44px; }
  .lang-menu { top: 52px; }
  /* Keep the music button matched to (and clear of) the smaller language button. */
  .music-btn { top: 10px; inset-inline-end: 62px; width: 44px; height: 44px; }
  /* The brand logo is dropped on small screens (it caused the Next-button
     overlap); it returns on tablet-plus widths and on desktop. */
  .stage-logo { display: none; }

  /* Story screens: the Support / Map / Dressing-room controls dock as a
     centred, wrapping row inside the header strip instead of floating over
     the picture. */
  .support-float, .top-tools {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 94vw;
  }
  /* Two centred rows so the Support pill and the Map/Dressing group never
     overlap each other. */
  .support-float { top: 54px; }
  .top-tools { top: 96px; }
  :root[dir="rtl"] .support-float, :root[dir="rtl"] .top-tools { left: 50%; right: auto; }
  .support-hud { font-size: 14px; padding: 7px 14px; }

  /* Pictures fit the space left after the header + buttons (no scrolling). */
  .scene { max-width: 96vw; max-height: 40dvh; }
  .scene-img { max-height: 40dvh; width: auto; object-fit: contain; }
  .intro-card { max-width: 96vw; }
  .intro-portrait { max-height: 34dvh; }
  .intro-img { max-height: 34dvh; width: auto; }
  .girls-frame, .story-frame { max-width: 96vw; max-height: 46dvh; }
  .stage8-frame, .stage10-frame { max-width: min(94vw, 460px); }
  .girls-caption, .speech-bubble { max-width: 94vw; }
  .btn-row { flex-wrap: wrap; }
  .title { margin: 8px 0 2px; }
  .subtitle { margin-bottom: 8px; }

  /* ---- Play stages ---- */
  /* Only pearls + language sit in the corners here (logo hidden), so the
     top strip can be shorter. */
  .game:has(#game-screen.is-active),
  .game:has(#stage5-screen.is-active),
  .game:has(#stage7-screen.is-active),
  .game:has(#stage9-screen.is-active),
  .game:has(#stage12-screen.is-active),
  .game:has(#stage13-screen.is-active) { padding-top: 60px; }

  /* HUD flows and wraps; no need to dodge the corner controls anymore. */
  #game-screen .hud, #stage5-screen .hud, #stage7-screen .hud,
  #stage9-screen .hud, #stage12-screen .hud, #stage13-screen .hud {
    padding-inline: 0;
  }
  .hud { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding: 0 0 8px; }
  .hud-item { white-space: nowrap; }

  /* Play stages start right under the header instead of vertically centring,
     so there is no large empty gap above the HUD. */
  #game-screen.is-active, #stage5-screen.is-active, #stage7-screen.is-active,
  #stage9-screen.is-active, #stage12-screen.is-active, #stage13-screen.is-active {
    justify-content: flex-start;
    gap: 8px;
  }

  .play-area { width: 100%; }
  /* Fit the canvas to BOTH width and height: cap the width so the derived
     height (aspect 800:480) can never exceed the space left on screen. */
  .play-area > canvas,
  .play-area .canvas-wrap,
  #game-canvas, #game5-canvas, #game7-canvas, #game9-canvas {
    aspect-ratio: 800 / 480;
    width: min(100%, calc((100dvh - 250px) * 1.6667));
    max-width: 800px;
    height: auto;
    margin: 0 auto;
  }
  .canvas-wrap > canvas { width: 100%; height: auto; }
  .side-panel { max-width: 96vw; }
}

/* ---- Phone LANDSCAPE (short height): keep the canvas AND counters in
   view without scrolling by placing the panel beside the canvas. ---- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .game { padding-top: 44px; }           /* play screens */
  /* Story screens: two compact tool rows need a little more headroom. */
  .game:has(#start-screen.is-active),
  .game:has(#intro-screen.is-active),
  .game:has(#girls-screen.is-active),
  .game:has(#stage6-screen.is-active),
  .game:has(#stage8-screen.is-active),
  .game:has(#stage10-screen.is-active),
  .game:has(#stage11-screen.is-active) { padding-top: 82px; }
  .pearls-badge { top: 6px; font-size: 15px; }
  .lang-wrap { top: 5px; }
  .lang-btn { width: 38px; height: 38px; }
  .music-btn { top: 5px; inset-inline-end: 54px; width: 38px; height: 38px; }
  .stage-logo { display: none; }          /* never show the logo on a phone */
  /* Compact two-row tool header that fits the short height. */
  .support-float { top: 6px; }
  .top-tools { top: 44px; }
  .support-hud, .top-tools .tool-btn { font-size: 12px; padding: 5px 10px; }

  .scene, .scene-img { max-height: 44dvh; }
  .girls-frame, .story-frame { max-height: 42dvh; }
  .intro-portrait, .intro-img { max-height: 40dvh; }
  /* Tighten the vertical rhythm so image + caption + buttons fit the short height. */
  .girls-stage, .intro-card { gap: 8px; margin: 0 auto; }
  .girls-caption, .stage8-caption { padding: 5px 12px; min-height: 0; }
  .girls-caption p { font-size: 15px; line-height: 1.2; }
  .speech-bubble { padding: 8px 16px; margin-bottom: 10px; }
  .speech-bubble p { font-size: 17px; line-height: 1.2; }
  .btn { font-size: 18px; padding: 10px 30px; }
  .btn-small { font-size: 14px; padding: 7px 18px; }
  .title { font-size: 24px; margin: 2px 0; }
  .subtitle { font-size: 13px; margin: 0 0 4px; }
  .hint { display: none; }

  /* Play area sits in a row so the canvas and the counters are both visible
     without scrolling on a short screen. */
  .play-area { flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px; }
  .play-area > canvas,
  .play-area .canvas-wrap,
  #game-canvas, #game5-canvas, #game7-canvas, #game9-canvas {
    width: min(76vw, calc((100dvh - 118px) * 1.6667));
  }
  .side-panel {
    flex: 0 0 150px; width: 150px; flex-direction: column; font-size: 12px; gap: 8px;
  }
  .counter-card { padding: 8px; }
  .counter-value { font-size: 22px; }
  .bag { display: none; }        /* save vertical space; the number still shows */
  .controls-hint { display: none; }
}

/* ---- Tablet: bigger, finger-friendly controls ----
   Requires a tall-ish screen so a phone held in landscape (wide but short)
   is NOT treated as a tablet — it falls to the phone-landscape rules below. */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 600px) {
  .btn { font-size: 24px; padding: 16px 52px; }
  .tool-btn { font-size: 17px; padding: 10px 18px; }
  .support-link, .support-hud { font-size: 17px; }
  .lang-btn { width: 58px; height: 58px; }
  .music-btn { inset-inline-end: 76px; width: 58px; height: 58px; }
  .pearls-badge { font-size: 19px; }
  /* Larger controls need a bit more room in the two tool rows. */
  .support-float { top: 60px; }
  .top-tools { top: 108px; }
  .game { padding-top: 156px; }
  .game:has(#game-screen.is-active),
  .game:has(#stage5-screen.is-active),
  .game:has(#stage7-screen.is-active),
  .game:has(#stage9-screen.is-active),
  .game:has(#stage12-screen.is-active),
  .game:has(#stage13-screen.is-active) { padding-top: 72px; }
}

/* =====================================================================
   PORTRAIT LOCK — phones & tablets play upright only.
   The overlay is hidden by default and only appears on a touch device
   (coarse pointer, no hover) held in landscape. Laptops/desktops use a
   mouse (fine pointer / hover) so they never trigger it, and can still be
   used in their normal landscape window.
   ===================================================================== */
.rotate-overlay { display: none; }

@media (orientation: landscape) and (pointer: coarse) and (hover: none) {
  .rotate-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: linear-gradient(180deg, #bfe9ff 0%, #eafbff 55%, #d7f3ff 100%);
  }
  .rotate-inner { max-width: 420px; }
  .rotate-icon {
    font-size: 68px;
    line-height: 1;
    margin-bottom: 14px;
    display: inline-block;
    animation: rotateHint 1.8s ease-in-out infinite;
  }
  .rotate-text {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 800;
    color: var(--pink-dark);
  }
  @keyframes rotateHint {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate(78deg); }
  }
}