:root {
  --sky-1: #5463d1; --sky-4: #b97cc6; --sky-7: #f6aed0;
  --ink: #fff7f2;
  --pill: rgba(54, 36, 84, 0.38);
}
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--sky-4);
  color: var(--ink);
  font: 15px/1.3 'Fredoka', system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
@font-face {
  font-family: 'Pico Black';
  src: url('assets/picoblack.ttf') format('truetype');
  font-display: block;
}

/* ---------- title: sits on its own puffy cloud ---------- */
#title {
  position: fixed; left: 0; right: 0;
  top: calc(12vh + env(safe-area-inset-top, 0px));
  display: grid; justify-items: center;
  padding: 0 16px; text-align: center; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#title.gone { opacity: 0; transform: translateY(-12px); }
#title .cloud {
  --k: 1px;                                   /* puff size unit (smaller on retry) */
  position: relative; isolation: isolate;
  display: grid; justify-items: center; gap: 10px;
  width: min(340px, calc(100vw - 40px));
  padding: 6px 10px 10px;
  color: #4a1f33;
}
#title .puffs { position: absolute; inset: -10% -8%; z-index: -1; }   /* puffs are sized well past the text: the texture's solid core is small */
#title .puffs i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * var(--k)); aspect-ratio: 1.25;
  transform: translate(-50%, -50%);
  background: #fff7fb;
  -webkit-mask: url('../3d/cloud.png') center / 100% 100% no-repeat;
  mask: url('../3d/cloud.png') center / 100% 100% no-repeat;
}
#title .puffs i.shade { background: #d9b8e6; opacity: 0.9; }
#title h1 { margin: 0; display: grid; justify-items: center; line-height: 0.9; font-weight: normal; }
#title .logo, #title .name {
  font-family: 'Pico Black', 'Fredoka', sans-serif;
  color: #ffb3d4;                             /* light pink face over the brown drop */
  text-shadow:
    0 3px 0 #5a2a1a,
    0 6px 0 rgba(90, 42, 26, 0.55),
    0 10px 24px rgba(58, 24, 70, 0.45);
}
#title .logo { font-size: clamp(72px, 24vw, 128px); letter-spacing: 0.01em; }
#title .name { font-size: clamp(30px, 9.5vw, 52px); margin-top: 6px; }
#startHint {
  margin: 4px 0 0; font-size: 15px; font-weight: 600; color: #5a2a1a;
  animation: hint 1.6s ease-in-out infinite;
}
@keyframes hint { 50% { opacity: 0.5; } }
#title .rules {
  display: grid; justify-items: center; gap: 7px; max-width: 330px;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff6ee;
  /* a brown outline + drop, like the title */
  text-shadow:
    1px 0 0 #5a2a1a, -1px 0 0 #5a2a1a, 0 1px 0 #5a2a1a, 0 -1px 0 #5a2a1a,
    1px 1px 0 #5a2a1a, -1px 1px 0 #5a2a1a, 1px -1px 0 #5a2a1a, -1px -1px 0 #5a2a1a,
    0 3px 0 #5a2a1a, 0 6px 14px rgba(40, 15, 50, 0.55);
}
#title .rules p { margin: 0; }
#title .rules b { color: #ffe08a; font-weight: 600; }
#title .rules .pitch { font-size: 17px; font-weight: 600; }
#title .rules .small { font-size: 13.5px; max-width: 300px; }
#title .set { display: flex; gap: 8px; margin: 4px 0 0; filter: drop-shadow(0 2px 4px rgba(60, 30, 80, 0.45)); }
#title .set img { width: 38px; height: 38px; object-fit: contain; }
#title.retry .rules { display: none; }
/* Retry: only the hint comes back, not the whole title */
#title.retry h1 { display: none; }
#title.retry { top: calc(18vh + env(safe-area-inset-top, 0px)); }
#title.retry .cloud { --k: 0.36px; width: auto; padding: 10px 24px; }   /* a small cloud just for the hint */
#title.retry #startHint { margin: 0; }

/* ---------- progress rail ---------- */
#progress {
  position: fixed; right: calc(14px + env(safe-area-inset-right, 0px));
  top: 50%; transform: translateY(-50%);
  height: min(46vh, 380px); width: 30px;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 8px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(58, 24, 70, 0.45));
}
#progress .crown { width: 24px; height: 18px; fill: #ffd36b; stroke: #8a4b12; stroke-width: 1.4; stroke-linejoin: round; }
#progress .rail {
  position: relative; width: 4px; border-radius: 2px;
  background: rgba(255, 246, 238, 0.75);
}
#progress .dot {
  filter: hue-rotate(-16deg) saturate(1.35) brightness(0.9);   /* favicon yellow -> the 3D cat's orange */
  position: absolute; left: 50%; bottom: 0;
  width: 28px; height: 28px; margin: 0 0 -14px -14px;
  transform: translateY(calc(var(--p, 0) * var(--rail, 0px) * -1));
}
#progress .best {
  position: absolute; left: 50%; bottom: 0; width: 14px; height: 3px; margin-left: -7px;
  border-radius: 2px; background: #ffd36b; opacity: 0;
  transform: translateY(calc(var(--b, 0) * var(--rail, 0px) * -1));
}
#progress .best.on { opacity: 0.9; }

/* ---------- reset transition ---------- */
#wipe {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: none; pointer-events: none;
}
#wipe .field { fill: #3a2c74; }

#loading {
  position: fixed; top: 45%; left: 50%; transform: translateX(-50%);
  background: var(--pill); padding: 6px 14px; border-radius: 999px; pointer-events: none;
}
[hidden] { display: none !important; }
/* Film grain, same as the homepage (sits over everything, ignores input) */
#grain {
  position: fixed; inset: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ---------- stash slots ---------- */
#slots {
  position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex; gap: 6px; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(58, 24, 70, 0.4));
}
.slot {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(54, 36, 84, 0.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 246, 238, 0.55);
  display: grid; place-items: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.slot img { width: 34px; height: 34px; object-fit: contain; transition: opacity 0.2s, filter 0.2s; }
.slot.empty img { opacity: 0.35; filter: grayscale(1) brightness(1.4); }
.slot b {
  position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #fff6ee; color: #5a2a1a;
  font: 600 12px/18px 'Fredoka', sans-serif; text-align: center;
}
.slot b:empty { display: none; }
.slot.pop { animation: slotPop 0.35s ease-out; }
@keyframes slotPop { 40% { transform: scale(1.25); } }
#slots.full .slot { border-color: #ffd36b; box-shadow: 0 0 12px rgba(255, 211, 107, 0.75); }
#slots.broke { animation: broke 0.4s ease-out; }
@keyframes broke {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
#testHit {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 8px 14px; border-radius: 999px; border: 0;
  background: rgba(54, 36, 84, 0.6); color: #fff6ee; font: 600 14px 'Fredoka', sans-serif;
}

/* ---------- win card ---------- */
#win {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(40, 24, 70, 0.25); opacity: 0; transition: opacity 0.4s ease;
}
#win.on { opacity: 1; }
#win .card {
  width: min(360px, 100%); padding: 22px 20px 16px; border-radius: 24px; text-align: center;
  background: rgba(255, 246, 238, 0.94); color: #3a1a12;
  box-shadow: 0 18px 50px rgba(58, 24, 70, 0.35);
  transform: translateY(12px); transition: transform 0.4s ease;
}
#win.on .card { transform: none; }
#winNote { margin: 0; font-size: 15px; color: #7a5a50; }
#winPrize { margin: 4px 0 14px; font: 600 30px/1.1 'Fredoka', sans-serif; color: #5a2a1a; }   /* not Pico Black: its numbers don't read */
#winForm { display: grid; gap: 10px; text-align: left; }
#winForm .field span { display: block; font-size: 13px; color: #7a5a50; margin: 0 0 4px 4px; }
#winForm input[type=email] {
  width: 100%; font: 16px 'Fredoka', sans-serif; padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid #e2c8c8; background: #fff; color: #3a1a12; outline: none;
}
#winForm input[type=email]:focus { border-color: #b97cc6; }
#winForm .opt { display: flex; gap: 8px; align-items: center; font-size: 14px; }
#winForm .opt input { width: 18px; height: 18px; accent-color: #b97cc6; }
#winForm button {
  margin-top: 2px; padding: 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: #5a2a1a; color: #fff6ee; font: 600 16px 'Fredoka', sans-serif;
}
#winForm button:disabled { opacity: 0.6; }
#winMsg { margin: 0; min-height: 1.2em; font-size: 14px; color: #a3384a; text-align: center; }
#winMsg a { color: #5a2a1a; font-weight: 600; }
#win .fine { margin: 12px 0 6px; font-size: 12px; color: #8a7068; }
#win .link { border: 0; background: none; color: #7a5a50; font: 14px 'Fredoka', sans-serif; text-decoration: underline; cursor: pointer; }

/* ---------- arrow pads (touch screens only) ---------- */
#pad { display: none; }
@media (pointer: coarse) {
  #pad {
    display: block; position: fixed; inset: auto 0 0 0; height: 0; pointer-events: none;
  }
  #pad .arrow {
    position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(12px + env(safe-area-inset-left, 0px));
    width: 66px; height: 66px; padding: 0; border: 0; background: none;
    pointer-events: auto; touch-action: none; cursor: pointer;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    opacity: 0.55;
    transition: transform 0.08s ease, opacity 0.12s ease;
  }
  #pad .arrow.right { left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); }
  #pad .arrow.right svg { transform: scaleX(-1); }
  #pad .arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
  /* same rounded arrow, toned down: soft cream face, thin pink rim, no outline or shine */
  #pad .arrow .o { display: none; }
  #pad .arrow .f { fill: rgba(255, 246, 238, 0.7); stroke: rgba(255, 143, 194, 0.9); stroke-width: 7; stroke-linejoin: round; }
  #pad .arrow .g { display: none; }
  #pad .arrow.down { transform: scale(0.92); opacity: 0.85; }
  #pad .arrow.down .f { fill: rgba(255, 143, 194, 0.75); }
}