/* =====================================================================
   ClickPlay core.css — shared look for the whole game.
   Each level adds its own styles through its css: string, which is only
   present while that level is running.
   Sizes use --u (1% of the frame width), so everything scales with the
   720x1280 (9:16) frame on any screen.
   ===================================================================== */

:root {
  --bg: #dcd8cf;          /* page colour around the frame */
  --stage: #ffffff;       /* frame background; a level can override */
  --ink: #22262b;         /* text, outlines, dark buttons */
  --accent: #e2556f;      /* hotspot outlines, focus rings */
  --good: #2fbf71;        /* right / true / green ripple */
  --bad: #e5484d;         /* wrong / false / red ripple */
  --intro: #cfe3f1;       /* start screen and fail screen */
  --win: #ffd84d;         /* ClickPlay screen */
  --chip: rgba(34, 38, 43, .65);   /* sound + no-touch circles */
  --font-game: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #14181a; }
}
:root[data-theme="dark"] { --bg: #14181a; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  font-family: var(--font-game); color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
[hidden] { display: none !important; }

/* ---------- Page veil: white until the game is set up, then fades away ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1000;
  background: #fff; pointer-events: none;
  opacity: 1; transition: opacity .4s ease;
}
html.cp-ready body::before { opacity: 0; transition-duration: .55s; }

/* ---------- Frame: 9:16, sized by core.js ---------- */
#viewport { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
#frame {
  position: relative; width: 360px; height: 640px; --u: 3.6px;
  background: var(--stage); overflow: hidden; color: var(--ink);
}
.abs { position: absolute; z-index: 10; }

/* The running level lives in here; core screens sit above it */
#cp-level { position: absolute; inset: 0; z-index: 1; }
/* Video pool: kept in the page (phones need that) but invisible */
#cp-holder { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; z-index: 0; }
#cp-holder video { width: 1px; height: 1px; }

/* ---------- Title (top centre) ---------- */
#cp-title {
  left: 50%; top: 2.4%; transform: translateX(-50%); z-index: 45;
  margin: 0; width: 72%; white-space: nowrap; text-align: center;
  color: var(--ink); pointer-events: none; font-family: var(--font-game);
}
#cp-title small { display: block; font-size: calc(var(--u) * 3.9); font-weight: 600; opacity: .65; }
#cp-title span { display: block; margin-top: calc(var(--u) * .4); font-size: calc(var(--u) * 6.6); font-weight: 700; line-height: 1.05; }
#cp-title.on-video { color: #fff; text-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(0, 0, 0, .45); }

/* ---------- Sound (top left) + no-touch hand (top right) ---------- */
#cp-snd, #cp-busy {
  top: 2%; z-index: 46;
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  border-radius: 50%; background: var(--chip);
  display: grid; place-items: center;
}
#cp-snd {
  left: 3%; border: 0; padding: 0; cursor: pointer;
  font-size: calc(var(--u) * 5.6); line-height: 1; font-family: var(--font-emoji);
  -webkit-tap-highlight-color: transparent;
}
#cp-busy {
  right: 3%; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
#cp-busy.on { opacity: 1; visibility: visible; transition: opacity .15s ease; }
#cp-busy svg { width: 62%; height: 62%; display: block; overflow: visible; }

/* ---------- Caption pill (bottom centre) ---------- */
#cp-cap {
  left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 25; margin: 0;
  background: rgba(34, 38, 43, .9); color: #fff;
  padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: 999px;
  font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 4.4);
  white-space: nowrap; pointer-events: none;
}

/* ---------- Round play button (start screen, play again) ---------- */
.cp-play {
  width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--ink); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  animation: cp-breathe 1.8s ease-in-out infinite;
}
.cp-play svg { width: 44%; height: 44%; margin-left: 8%; fill: #fff; display: block; }
.cp-play.wait { visibility: hidden; }
#cp-snd:focus-visible, .cp-play:focus-visible { outline: 3px dashed var(--accent); outline-offset: 4px; }

/* ---------- Menu: logo, preloader, play button, level list ---------- */
#cp-menu {
  left: 0; top: 0; width: 100%; height: 100%; z-index: 40; background: var(--win);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 10%;
}
#cp-done { margin: calc(var(--u) * 4) 0 0; }
#cp-start { margin: calc(var(--u) * 8) 0 calc(var(--u) * 9); }
#cp-start.pop { animation: cp-popin .4s cubic-bezier(.3, 1.6, .5, 1) both, cp-breathe 1.8s ease-in-out .4s infinite; }
#cp-loadwrap {
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 9); width: 62%; height: calc(var(--u) * 17);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.5);
}
#cp-loader {
  width: 100%; height: calc(var(--u) * 6); overflow: hidden;
  border: calc(var(--u) * .8) solid var(--ink); border-radius: 999px; background: #fff;
  box-shadow: 0 calc(var(--u) * 1) 0 var(--ink);
}
#cp-loader i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }
#cp-loadtxt { margin: 0; font-size: calc(var(--u) * 4.2); font-weight: 600; }
#cp-list { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); }
.cp-lvl {
  width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 3.5);
  background: #fff; color: var(--ink); cursor: pointer; text-align: left;
  border: calc(var(--u) * .7) solid var(--ink); border-radius: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 3.5);
  font: inherit; font-size: calc(var(--u) * 4.4); font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.cp-lvl:disabled { opacity: .5; cursor: default; }
.cp-lvl:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.cp-lvl b {
  width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700;
}

/* ---------- White fade ---------- */
#cp-flash {
  left: 0; top: 0; width: 100%; height: 100%; z-index: 50;
  background: #fff; opacity: 0; pointer-events: none; transition: opacity .38s ease;
}
#cp-flash.out { transition-duration: .55s; }

/* ---------- Result screens: ClickPlay! and Oops! ---------- */
.cp-result {
  left: 0; top: 0; width: 100%; height: 100%; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 9%;
}
#cp-win { background: var(--win); }
#cp-fail { background: var(--intro); }
.cp-result > :not(.cp-confetti) { position: relative; }
.cp-btns { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 7); }
.cp-replay {
  width: calc(var(--u) * 12); height: calc(var(--u) * 12); flex: none;
  border: calc(var(--u) * .8) solid var(--ink); border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.cp-replay svg { width: 54%; height: 54%; stroke: var(--ink); display: block; }
.cp-replay.wait { visibility: hidden; }
.cp-replay:focus-visible { outline: 3px dashed var(--accent); outline-offset: 4px; }
.cp-logo {
  display: flex; justify-content: center; margin: 0;
  font-size: calc(var(--u) * 15); font-weight: 700; line-height: 1; letter-spacing: -.01em;
}
.cp-logo span {
  display: inline-block; color: #fff;
  -webkit-text-stroke: calc(var(--u) * .9) var(--ink); paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 1.2) 0 var(--ink);
  animation: cp-hop .5s cubic-bezier(.3, 1.8, .5, 1) both;
}
.cp-oops { font-size: calc(var(--u) * 14); font-weight: 700; margin: 0; line-height: 1; animation: cp-wobble .6s ease both; }
.cp-sub { margin: calc(var(--u) * 4) 0 0; font-size: calc(var(--u) * 5.2); font-weight: 600; line-height: 1.25; }
.cp-sub:empty { display: none; }
.cp-rows { width: 100%; margin: calc(var(--u) * 4.5) 0 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
.cp-rows:empty { display: none; }
.cp-row {
  display: flex; align-items: center; gap: calc(var(--u) * 3); text-align: left;
  background: #fff; border: calc(var(--u) * .7) solid var(--ink); border-radius: calc(var(--u) * 4);
  padding: calc(var(--u) * 2); animation: cp-rowin .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.cp-row .cp-thumb { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; border-radius: calc(var(--u) * 2.4); overflow: hidden; border: calc(var(--u) * .5) solid var(--ink); }
.cp-row .cp-thumb > svg, .cp-row .cp-thumb > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cp-row b { display: block; font-weight: 700; font-size: calc(var(--u) * 3.9); line-height: 1.2; }
.cp-row span { display: block; margin-top: calc(var(--u) * .6); font-weight: 500; font-size: calc(var(--u) * 3.4); line-height: 1.25; color: #5f5e5a; }
.cp-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cp-confetti b {
  position: absolute; top: -6%; width: calc(var(--u) * 2.4); height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * .6); animation: cp-fall linear forwards;
}

/* ---------- Hotspot outline (dashed, pulsing) for any tap target ---------- */
.cp-hotspot {
  border: calc(var(--u) * 0.9) dashed var(--accent); border-radius: 50%;
  background: transparent; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: none;
  animation: cp-pulse 1.4s ease-in-out infinite;
}
.cp-hotspot.bare { border-color: transparent; animation: none; }
.cp-hotspot:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* ---------- Tap ripples: green on the right thing, red on anything else ---------- */
.cp-ripple {
  position: absolute; z-index: 60; pointer-events: none;
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  margin: calc(var(--u) * -8) 0 0 calc(var(--u) * -8); border-radius: 50%;
  border: calc(var(--u) * 0.9) solid var(--rc);
  background: color-mix(in srgb, var(--rc) 28%, transparent);
  animation: cp-ripple .32s ease-out forwards;
}
.cp-ripple.no { --rc: var(--bad); }
.cp-ripple.yes { --rc: var(--good); }

/* ---------- Shared animations (levels can use these too) ---------- */
@keyframes cp-ripple { 0% { transform: scale(.25); opacity: 1; } 60% { opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cp-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes cp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes cp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * 3)); } }
@keyframes cp-popin { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cp-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8%); } 40% { transform: translateX(7%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(3%); } }
@keyframes cp-hop { 0% { transform: translateY(calc(var(--u) * 14)) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cp-wobble { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes cp-rowin { 0% { transform: translateY(calc(var(--u) * 6)); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cp-fall { to { transform: translateY(calc(var(--u) * 200)) rotate(720deg); } }
@keyframes cp-fade { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cp-play, .cp-logo span, .cp-oops, .cp-row, .cp-hotspot, #cp-start.pop { animation: none; }
  #cp-loader i { transition: none; }
  .cp-confetti { display: none; }
  .cp-ripple { animation: cp-fade .25s ease-out forwards; }
}