@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #6e1f45;
  --ink-soft: #9b4a72;
  --pink: #ff6fa8;
  --pink-deep: #e0407f;
  --pink-pale: #ffe6ef;
  --gold: #ffc93c;
  --cream: #fffaf5;
  --shadow: 0 18px 40px rgba(130, 30, 80, 0.28);
  --consent-accent: #e0407f;
  --consent-accent-dark: #b82a64;
  --consent-ink: #6e1f45;
}

.save-link {
  display: block;
  margin: 12px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 13px/1.2 'Manrope', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
  cursor: pointer;
}
.save-link:hover { opacity: 1; }
.save-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 8px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #ffd3e2;
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

canvas#scene {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}

[hidden] { display: none !important; }

/* ---------- buttons ---------- */

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font: 800 17px/1 'Manrope', sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #ff8dbb 0%, var(--pink-deep) 100%);
  box-shadow: 0 6px 0 #b82a64, 0 12px 24px rgba(184, 42, 100, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s;
  text-shadow: 0 2px 0 rgba(150, 20, 70, 0.35);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b82a64, 0 6px 12px rgba(184, 42, 100, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.45); }
.btn:focus-visible, .icon-btn:focus-visible, .node:focus-visible, .card-close:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.btn-big {
  position: relative;
  overflow: hidden;
  padding: 18px 46px;
  font-size: 22px;
  background: linear-gradient(180deg, #ffd66b 0%, #ff9f2e 55%, #ff7a3d 100%);
  box-shadow: 0 7px 0 #c9541d, 0 16px 30px rgba(201, 84, 29, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 0 rgba(160, 60, 10, 0.4);
  animation: btn-breathe 2.2s ease-in-out infinite;
}
.btn-big:active { box-shadow: 0 3px 0 #c9541d, 0 8px 16px rgba(201, 84, 29, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.btn-big::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -40%;
  width: 30%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  animation: shine 3s ease-in-out infinite;
}
.btn-big span { position: relative; z-index: 1; }

.btn-soft {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #ffe3ee 100%);
  box-shadow: 0 5px 0 #f2a5c3, 0 10px 18px rgba(184, 42, 100, 0.16), inset 0 2px 0 #fff;
  text-shadow: none;
}
.btn-soft:active { box-shadow: 0 1px 0 #f2a5c3, 0 4px 8px rgba(184, 42, 100, 0.16); }

.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #ff9cc2, var(--pink-deep));
  color: #fff;
  font: 800 26px/1 'Manrope', sans-serif;
  box-shadow: 0 5px 14px rgba(150, 30, 80, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
}
.icon-btn-space { width: 48px; }

/* Boosters: the hammer button and its count, the level card picker, the reward. */
/* The floating hammer (phones and small screens; wide screens use the powers panel): a round gold
   button in the same family as the pause button, with the hammer drawn inside and a count badge. */
.hammer-btn {
  position: fixed;
  z-index: 5;
  left: 14px;
  top: calc(72px + env(safe-area-inset-top));
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: radial-gradient(circle at 38% 30%, #fff8d6 0%, #ffd66b 45%, #f2a321 100%);
  box-shadow: 0 5px 14px rgba(150, 80, 0, 0.35), inset 0 -4px 0 rgba(170, 90, 0, 0.25);
  display: grid;
  place-items: center;
  cursor: pointer;
  animation: hammer-ready 2.4s ease-in-out infinite;
}
.hammer-btn img { width: 46px; height: 46px; transition: transform 0.3s cubic-bezier(.2, 1.5, .4, 1); }
.hammer-btn:active { transform: translateY(2px) scale(0.96); }
.hammer-btn.is-armed { background: radial-gradient(circle at 38% 30%, #ffe3ee 0%, #ff8dbb 50%, #e0407f 100%); animation: hammer-armed 1s ease-in-out infinite; }
.hammer-btn.is-armed img { transform: rotate(-24deg) scale(1.08); }
.hammer-btn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
@keyframes hammer-ready { 0%, 100% { box-shadow: 0 5px 14px rgba(150, 80, 0, 0.35), inset 0 -4px 0 rgba(170, 90, 0, 0.25), 0 0 0 0 rgba(255, 201, 60, 0.55); } 50% { box-shadow: 0 5px 14px rgba(150, 80, 0, 0.35), inset 0 -4px 0 rgba(170, 90, 0, 0.25), 0 0 0 10px rgba(255, 201, 60, 0); } }
@keyframes hammer-armed { 0%, 100% { box-shadow: 0 5px 14px rgba(150, 30, 80, 0.4), 0 0 0 0 rgba(255, 111, 168, 0.7); } 50% { box-shadow: 0 5px 14px rgba(150, 30, 80, 0.4), 0 0 0 12px rgba(255, 111, 168, 0); } }
.hammer-count { position: absolute; right: -6px; top: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #ff8dbb, #e0407f); border: 2px solid #fff; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 3px 8px rgba(120, 20, 60, 0.35); }
/* The powers panel beside the board on wide screens: the hammer as a large button, and the
   boosters chosen for this level. JS sets its left, top and width from the board layout. */
.power-panel {
  position: fixed;
  z-index: 5;
  box-sizing: border-box;
  padding: 14px 12px 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
  border: 3px solid #f6a9c4;
  box-shadow: 0 14px 34px rgba(120, 30, 70, 0.22);
  text-align: center;
  animation: fade-in 0.5s ease both;
}
.pp-title, .pp-sub { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep); }
.pp-sub { margin: 16px 0 8px; color: var(--ink-soft); }
.pp-hammer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 8px 12px;
  border-radius: 18px;
  border: 2px solid #ffe08a;
  background: linear-gradient(180deg, #fffbea, #fff0f6);
  box-shadow: 0 4px 0 #f3d9a0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.pp-hammer:hover:not(:disabled) { transform: translateY(-2px); }
.pp-hammer:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #f3d9a0; }
.pp-hammer:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; }
.pp-icon { position: relative; display: block; width: 84px; height: 84px; }
.pp-icon img { width: 84px; height: 84px; filter: drop-shadow(0 8px 12px rgba(120, 60, 0, 0.3)); transition: transform 0.3s cubic-bezier(.2, 1.5, .4, 1); }
.pp-count { position: absolute; right: -8px; bottom: -2px; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 999px; border: 2px solid #fff; background: linear-gradient(180deg, #ff8dbb, #e0407f); color: #fff; font-size: 13px; font-weight: 800; line-height: 22px; box-shadow: 0 3px 8px rgba(120, 20, 60, 0.35); }
.pp-hammer strong { font-size: 14px; line-height: 1.2; }
.pp-hammer small { font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.pp-hammer.is-armed { border-color: var(--pink-deep); background: #fff0f6; box-shadow: 0 4px 0 #e0407f, 0 0 0 5px rgba(255, 111, 168, 0.28); }
.pp-hammer.is-armed img { transform: rotate(-18deg) scale(1.08); animation: pp-ready 1s ease-in-out infinite; }
@keyframes pp-ready { 50% { filter: drop-shadow(0 0 16px rgba(255, 111, 168, 0.95)); } }
.pp-hammer:disabled { cursor: default; box-shadow: none; }
.pp-hammer:disabled img { filter: grayscale(1) opacity(0.45); }
.pp-hammer:disabled .pp-count { background: #d9c7d0; }
.pp-active { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.pp-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 14px; background: #fff; border: 1.5px solid #ffe08a; font-size: 12.5px; font-weight: 800; }
.pp-chip img { width: 32px; height: 32px; flex: none; }
.pp-none { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
/* The booster picker on the level card. */
.lv-boost { margin: 12px 0 0; padding: 10px 10px 8px; border-radius: 18px; background: linear-gradient(180deg, #fffbea, #fff4f9); border: 2px solid #ffe08a; }
.lb-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #9a6200; }
.lb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lb-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px 6px; border-radius: 16px; border: 2px solid transparent; background: #fff; box-shadow: 0 3px 0 #f3d9a0; font: inherit; color: var(--ink); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.lb-pick img { width: 54px; height: 54px; filter: drop-shadow(0 4px 6px rgba(90, 30, 70, 0.22)); transition: transform 0.2s cubic-bezier(.2, 1.5, .4, 1); }
.lb-pick:active { transform: translateY(2px); }
.lb-pick:focus-visible { outline: 3px solid #ff6fa8; outline-offset: 2px; }
.lb-pick.is-on { border-color: #ff6fa8; background: #fff0f6; box-shadow: 0 3px 0 #e0407f, 0 0 0 4px rgba(255, 111, 168, 0.25); }
.lb-pick.is-on img { transform: scale(1.1) rotate(-6deg); }
.lb-pick.is-on::after { content: '✓'; position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: #3fbf7f; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; }
.lb-pick.is-empty img { filter: grayscale(1) opacity(0.45); }
.lb-pick.is-empty .lb-name { opacity: 0.55; }
.lb-count { position: absolute; right: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #ff8dbb, #e0407f); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; }
.lb-pick.is-empty .lb-count { background: #d9c7d0; }
.lb-name { font-size: 11.5px; font-weight: 800; line-height: 1.2; }
.lb-note { margin: 8px 2px 0; min-height: 2.6em; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); }
.rw-count { position: absolute; right: 4px; top: 4px; min-width: 24px; height: 20px; padding: 0 5px; border-radius: 999px; background: linear-gradient(180deg, #ff8dbb, #e0407f); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; }

.res-reward { margin: 0 0 16px; padding: 14px 12px 12px; border-radius: 20px; background: linear-gradient(180deg, #fffbea, #fff0f6); border: 2px solid #ffd66b; }
.res-reward.is-used { border-color: #f3c9d8; }
.res-reward.is-used .rw-box, .res-reward.is-used .rw-list { display: none; }
.rw-box { position: relative; width: 140px; height: 108px; margin: 0 auto 2px; }
.rw-rays { position: absolute; left: 50%; top: 46%; width: 200px; height: 200px; transform: translate(-50%, -50%) scale(0.3); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 107, 0.55) 0deg 12deg, rgba(255, 214, 107, 0) 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
.res-reward.play .rw-rays { animation: rays-in 0.8s ease-out 0.15s forwards, rays-spin 9s linear 0.15s infinite; }
@keyframes rays-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rays-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.rw-chip img { filter: drop-shadow(0 4px 8px rgba(90, 30, 70, 0.25)); }
.rw-glow { position: absolute; left: 50%; top: 52px; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 240, 160, 0.95), rgba(255, 240, 160, 0)); opacity: 0; }
.res-reward.play .rw-glow { animation: box-glow 1.4s ease-out 0.55s both; }
/* The 3D gift box. .gb is a point at the centre of the box, turned to show its front, right side
   and top. The base is a 56px cube 42px tall; the lid is 62px wide and 14px tall and hinges on its
   back edge. Back and left faces are darker: they are only seen from inside once it opens. */
.gb-scene { position: absolute; left: 50%; top: 70px; width: 0; height: 0; perspective: 460px; perspective-origin: 0 -60px; }
.gb { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-36deg); }
.gb-base, .gb-lid { position: absolute; transform-style: preserve-3d; }
.gb i { position: absolute; left: 0; top: 0; display: block; }
.gb-base { left: -28px; top: -21px; width: 56px; height: 42px; }
.gb-base i { width: 56px; height: 42px; }
.gb-base .front { transform: translateZ(28px); background: linear-gradient(90deg, transparent 41%, #ffd66b 41% 59%, transparent 59%), linear-gradient(180deg, #ff8dbb, #e24c8a); box-shadow: inset 0 -5px 0 rgba(120, 20, 60, 0.18); }
.gb-base .right { transform: rotateY(90deg) translateZ(28px); background: linear-gradient(90deg, transparent 41%, #e8b33c 41% 59%, transparent 59%), linear-gradient(180deg, #e0578f, #b8306a); }
.gb-base .back { transform: rotateY(180deg) translateZ(28px); background: #a8285e; }
.gb-base .left { transform: rotateY(-90deg) translateZ(28px); background: #93214f; }
.gb-base .bottom { height: 56px; top: -7px; transform: rotateX(-90deg) translateZ(21px); background: #7d1c44; }
.gb-base .light { height: 56px; top: -7px; transform: rotateX(90deg) translateZ(18px); background: radial-gradient(circle, #fffbe0 0%, rgba(255, 220, 110, 0.9) 38%, rgba(255, 200, 80, 0) 70%); opacity: 0; }
.gb-lid { left: -31px; top: -35px; width: 62px; height: 14px; transform-origin: 50% 100% -31px; }
.gb-lid i { width: 62px; height: 14px; }
.gb-lid .front { transform: translateZ(31px); background: linear-gradient(90deg, transparent 42%, #ffe28a 42% 58%, transparent 58%), linear-gradient(180deg, #ffa8cc, #ef5a92); box-shadow: 0 3px 4px rgba(90, 10, 40, 0.25); }
.gb-lid .right { transform: rotateY(90deg) translateZ(31px); background: linear-gradient(90deg, transparent 42%, #f0c24a 42% 58%, transparent 58%), linear-gradient(180deg, #ef6d9f, #cc3f78); }
.gb-lid .back { transform: rotateY(180deg) translateZ(31px); background: #c93a74; }
.gb-lid .left { transform: rotateY(-90deg) translateZ(31px); background: #d64a82; }
.gb-lid .top { height: 62px; top: -24px; transform: rotateX(90deg) translateZ(7px); background: linear-gradient(90deg, transparent 42%, #ffe28a 42% 58%, transparent 58%), linear-gradient(0deg, transparent 42%, #ffd66b 42% 58%, transparent 58%), linear-gradient(135deg, #ffc2dc, #ff8dbb); }
.gb-lid .under { height: 62px; top: -24px; transform: rotateX(-90deg) translateZ(7px); background: #b8306a; }
/* the bow: two crossed planes of ribbon loops standing on the lid */
.gb-bow { position: absolute; left: 31px; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.gb-bow b { position: absolute; left: -18px; top: -17px; width: 36px; height: 17px; background: radial-gradient(circle at 50% 100%, #f0b53a 0 4px, transparent 5px); }
.gb-bow b + b { transform: rotateY(90deg); }
.gb-bow b::before, .gb-bow b::after { content: ''; position: absolute; bottom: 1px; width: 17px; height: 15px; box-sizing: border-box; border: 4px solid #ffd66b; border-radius: 55% 55% 45% 45%; }
.gb-bow b::before { left: 0; transform: rotate(-28deg); transform-origin: 100% 100%; }
.gb-bow b::after { right: 0; transform: rotate(28deg); transform-origin: 0 100%; }
/* waiting: the closed box wiggles; opening: a squash, the lid swings back, light spills out */
.res-reward:not(.play) .gb { animation: gb-wiggle 0.55s ease-in-out infinite; }
.res-reward.play .gb { animation: gb-pop 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.res-reward.play .gb-lid { animation: gb-lid 1s cubic-bezier(.25, 1.35, .45, 1) 0.2s both; }
.res-reward.play .gb-base .light { animation: gb-light 0.7s ease-out 0.45s both, gb-flicker 1.8s ease-in-out 1.2s infinite; }
@keyframes gb-wiggle { 0%, 100% { transform: rotateX(-24deg) rotateY(-36deg) rotateZ(0); } 25% { transform: rotateX(-24deg) rotateY(-30deg) rotateZ(-5deg) translateY(-3px); } 75% { transform: rotateX(-24deg) rotateY(-42deg) rotateZ(5deg) translateY(-3px); } }
@keyframes gb-pop { 0% { transform: rotateX(-24deg) rotateY(-36deg) scale3d(1.12, 0.84, 1.12); } 100% { transform: rotateX(-24deg) rotateY(-36deg); } }
@keyframes gb-lid { 0% { transform: none; } 35% { transform: translateY(-22px) rotateX(18deg); } 100% { transform: translateY(-3px) rotateX(112deg); } }
@keyframes gb-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes gb-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
.rw-title { margin: 0; font-size: 18px; font-weight: 800; color: #b8467c; }
/* won boosters as a row of badges; the level card explains what each one does */
.rw-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 96px)); justify-content: center; gap: 6px; }
.rw-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border-radius: 14px; background: #fff; border: 1.5px solid #ffe08a; opacity: 0; }
.res-reward.play .rw-chip { animation: chip-in 0.5s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(0.4s + var(--i) * 0.2s); }
.rw-chip img { width: 46px; height: 46px; flex: none; }
.rw-chip strong { display: block; font-size: 11.5px; line-height: 1.2; }
.rw-note { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
@keyframes box-glow { 0% { opacity: 0; width: 10px; height: 10px; } 40% { opacity: 1; } 100% { opacity: 0; width: 160px; height: 160px; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }

.pause-btn {
  position: fixed;
  z-index: 5;
  left: 14px;
  top: calc(14px + env(safe-area-inset-top));
  font-size: 16px;
  letter-spacing: -1px;
  padding: 0;
}

@keyframes btn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shine { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }

/* ---------- title ---------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 2;
}

#screen-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 38%);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". ." ". text" ". actions" ". .";
  padding: 24px max(28px, 4vw);
  overflow: hidden;
  background: #f7d9e4;
}
/* The frosted panel behind the title and the buttons. */
#screen-title::after {
  content: '';
  grid-column: 2;
  grid-row: 2 / 4;
  z-index: 1;
  margin: -34px -26px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 248, 251, 0.78), rgba(255, 236, 244, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px rgba(110, 30, 70, 0.28);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  animation: rise-in 0.9s cubic-bezier(.2, 1.4, .4, 1) both;
}
.title-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* A blurred copy fills the screen, and the whole picture sits on top of it uncropped. */
.title-scene::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: url('../assets/dae/scenes/dae-scene-tray.webp') 50% 40% / cover no-repeat;
  filter: blur(26px) saturate(1.1) brightness(1.04);
  animation: fade-in 1.2s ease both;
}
/* The box has the picture's own proportions, so the fades fall on the picture's edges. */
.title-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100vw - min(100vw, 179.2vh)) * 0.22);
  margin: auto 0;
  width: min(100vw, 179.2vh);
  height: min(100vh, 55.8vw);
  background: url('../assets/dae/scenes/dae-scene-tray.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  transform-origin: 30% 45%;
  animation: scene-in 2.4s cubic-bezier(.2, .8, .2, 1) both, scene-drift 18s ease-in-out 2.4s infinite alternate;
}
.title-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 230, 240, 0) 45%, rgba(255, 230, 240, 0.45) 100%),
    linear-gradient(180deg, rgba(255, 240, 246, 0) 70%, rgba(255, 214, 230, 0.5) 100%);
}
/* Warm window light that slowly breathes. */
.title-glow {
  position: absolute;
  inset: -10%;
  z-index: 1;
  background:
    radial-gradient(40% 50% at 62% 18%, rgba(255, 226, 170, 0.45), rgba(255, 226, 170, 0) 70%),
    radial-gradient(30% 40% at 20% 70%, rgba(255, 190, 220, 0.3), rgba(255, 190, 220, 0) 70%);
  mix-blend-mode: screen;
  animation: glow-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scene-in { from { opacity: 0; transform: scale(1.1); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes scene-drift { from { transform: none; } to { transform: scale(1.025) translate(-0.4%, -0.3%); } }
@keyframes glow-breathe { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.title-actions {
  grid-area: actions;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rise-in 0.9s cubic-bezier(.2, 1.4, .4, 1) 0.15s both;
}

.title-wrap {
  grid-area: text;
  position: relative;
  z-index: 3;
  text-align: center;
  animation: rise-in 0.9s cubic-bezier(.2, 1.4, .4, 1) both;
}

.eyebrow {
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--pink-deep);
}

.game-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  font-weight: 800;
}
.game-title > span { display: block; white-space: nowrap; }
.game-title span span {
  display: inline-block;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow:
    0 3px 0 #e0407f, 0 6px 0 #b82a64, 0 10px 18px rgba(120, 20, 70, 0.4);
  animation: letter-drop 0.9s cubic-bezier(.2, 1.6, .4, 1) both, letter-bob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s + 0.2s), calc(var(--i) * 0.12s + 1.2s);
}
.t-a { font-size: clamp(44px, 5.6vw, 88px); }
.t-b { font-size: clamp(36px, 4.4vw, 68px); margin-top: 4px; }
.t-b span { color: #fff3a8 !important; text-shadow: 0 3px 0 #ff9f2e, 0 6px 0 #c9541d, 0 10px 18px rgba(120, 50, 10, 0.4) !important; }

.tagline {
  max-width: 30ch;
  margin: 22px auto 26px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}

@keyframes rise-in { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes letter-drop { 0% { opacity: 0; transform: translateY(-120px) rotate(-18deg) scale(1.4); } 100% { opacity: 1; transform: none; } }
@keyframes letter-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---------- map ---------- */

#screen-map { display: flex; flex-direction: column; }

/* Bonus level card: Dae piping cream. */
.lv-banner {
  position: relative;
  height: 120px;
  margin: 8px -8px 10px;
  border-radius: 18px;
  background: url('../assets/dae/scenes/dae-scene-piping.webp') 52% 22% / cover no-repeat;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
.lv-banner span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd66b, #ff9f2e);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(160, 60, 10, 0.4);
}

/* City intro: letterbox bars, the city name, and Dae saying hello. */
.city-intro { z-index: 6; cursor: pointer; overflow: hidden; }
.ci-bar { position: absolute; left: 0; right: 0; height: 11vh; height: 11svh; background: #150a1c; transform: scaleY(0); }
.ci-top { top: 0; transform-origin: top; }
.ci-bottom { bottom: 0; transform-origin: bottom; }
.city-intro.play .ci-bar { animation: bar-in 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.ci-text { position: absolute; left: 0; right: 0; top: 18vh; top: 18svh; text-align: center; color: #fff; text-shadow: 0 4px 24px rgba(40, 10, 50, 0.6); }
.ci-kicker { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0; }
.ci-name { margin: 6px 0; font-size: clamp(54px, 11vw, 120px); line-height: 1; font-weight: 800; opacity: 0; }
.ci-tag { margin: 0; font-size: clamp(16px, 2.4vw, 22px); font-weight: 700; opacity: 0; }
.city-intro.play .ci-kicker { animation: ci-rise 0.8s ease 0.5s both; }
.city-intro.play .ci-name { animation: ci-name 1.1s cubic-bezier(.2, 1.3, .4, 1) 0.7s both; }
.city-intro.play .ci-tag { animation: ci-rise 0.8s ease 1.2s both; }
.ci-dae { position: absolute; left: 50%; bottom: 11vh; bottom: 11svh; display: flex; align-items: flex-end; gap: 6px; transform: translateX(-50%); width: min(94vw, 620px); }
.ci-line { align-self: center; }
.ci-dae img { height: min(44vh, 400px); height: min(44svh, 400px); width: auto; flex: none; margin-bottom: -2px; filter: drop-shadow(0 12px 24px rgba(40, 10, 50, 0.45)); opacity: 0; }
.ci-line { margin: 0 0 20px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; color: #7a2a4f; font-weight: 700; font-size: 15px; line-height: 1.4; box-shadow: 0 10px 30px rgba(40, 10, 50, 0.35); opacity: 0; }
.city-intro.play .ci-dae img { animation: ci-rise 0.7s cubic-bezier(.2, 1.3, .4, 1) 1.5s both; }
.city-intro.play .ci-line { animation: ci-pop 0.6s cubic-bezier(.2, 1.5, .4, 1) 1.9s both; }
.ci-skip { position: absolute; left: 0; right: 0; bottom: 3.5vh; bottom: 3.5svh; margin: 0; text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Portrait phones: the city name and Dae are stacked in one column, so Dae sits below the name
   and shrinks to the space that is left instead of rising over it. svh is the visible screen
   height on iPhone, where vh counts the space behind Safari's toolbars too. */
@media (orientation: portrait) {
  .city-intro { display: flex; flex-direction: column; }
  .ci-text { position: relative; top: auto; flex: none; padding: calc(11vh + 22px) 16px 0; padding-top: calc(11svh + 22px); }
  .ci-name { font-size: clamp(44px, 13vw, 84px); }
  .ci-dae { position: relative; left: auto; bottom: auto; transform: none; flex: 1 1 auto; min-height: 0; margin: 10px auto 0; padding-bottom: 11vh; padding-bottom: 11svh; }
  .ci-dae img { height: 100%; max-height: 400px; }
}
@keyframes bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ci-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ci-name { from { opacity: 0; transform: scale(1.4); letter-spacing: 0.2em; filter: blur(8px); } to { opacity: 1; transform: none; letter-spacing: 0; filter: none; } }
@keyframes ci-pop { from { opacity: 0; transform: scale(0.7); transform-origin: 0 100%; } to { opacity: 1; transform: none; } }

/* Dae in the current city's outfit, standing beside the road (behind the level buttons). */
.map-dae {
  position: absolute;
  z-index: 1;
  left: max(8px, calc(50% - 600px));
  bottom: 0;
  height: min(70vh, 620px);
  aspect-ratio: 525 / 1100;
  transform-origin: 50% 100%;
  animation: map-dae-sway 6s ease-in-out infinite;
  pointer-events: none;
}
.map-dae img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  opacity: 0;
  filter: drop-shadow(0 16px 24px rgba(40, 10, 50, 0.35));
  transform: translateY(40px) scale(0.94);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2, 1.3, .4, 1);
}
.map-dae img.is-on { opacity: 1; transform: none; }
@keyframes map-dae-sway { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
@media (max-width: 1099px), (orientation: portrait) { .map-dae { height: min(26vh, 230px); left: 0; } }

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  position: relative;
  z-index: 3;
}
.map-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  border: 3px solid #f6a9c4;
}
.map-title strong { font-size: 20px; }
.map-title span { font-weight: 800; color: #d98c00; font-size: 15px; }

.map-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 30px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 30px), transparent 100%);
}
.map {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
}
.map-path { position: absolute; inset: 0; overflow: visible; }
.road-shadow { fill: none; stroke: rgba(160, 50, 100, 0.18); stroke-width: 46; stroke-linecap: round; transform: translateY(8px); }
.road { fill: none; stroke: #fff4f8; stroke-width: 40; stroke-linecap: round; }
.road-line { fill: none; stroke: #ffb3cf; stroke-width: 5; stroke-dasharray: 2 16; stroke-linecap: round; }
.branch-shadow { fill: none; stroke: rgba(120, 60, 0, 0.18); stroke-width: 30; stroke-linecap: round; transform: translateY(6px); }
.branch { fill: none; stroke: #fff6d8; stroke-width: 24; stroke-linecap: round; }
.branch-line { fill: none; stroke: #ffc93c; stroke-width: 4; stroke-dasharray: 1 11; stroke-linecap: round; animation: branch-flow 1.2s linear infinite; }
.branch-shadow.is-locked, .branch.is-locked, .branch-line.is-locked { opacity: 0.32; animation: none; }

/* Locked levels sit faintly on the faded road; a small tag says what opens the road next. */
.node.is-locked { opacity: 0.7; }
.lock-tag {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(160, 130, 150, 0.55);
  color: #7a5a6f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(90, 30, 70, 0.18);
  pointer-events: none;
}
@keyframes branch-flow { to { stroke-dashoffset: -24; } }

/* Bonus levels: golden gifts at the end of the side roads. */
.node.bonus-node {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 20px;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #ffb62e 70%);
  box-shadow: 0 6px 0 #c9851d, 0 0 0 0 rgba(255, 201, 60, 0.6), 0 12px 20px rgba(120, 60, 0, 0.3);
  animation: node-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both, gift-glow 2s ease-in-out 0.6s infinite;
}
.node.bonus-node .node-num { font-size: 28px; text-shadow: none; }
.node.bonus-node.is-done { background: radial-gradient(circle at 35% 30%, #ffe6f2, #ff8fc0 70%); box-shadow: 0 6px 0 #c9507f, 0 12px 20px rgba(120, 20, 70, 0.3); animation: node-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
.node.bonus-node.is-locked { background: radial-gradient(circle at 35% 30%, #f2e6ec, #c9aebb 70%); box-shadow: 0 6px 0 #a58797, 0 10px 16px rgba(80, 40, 60, 0.2); animation: node-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
.node.bonus-node.is-locked .node-num { font-size: 20px; }
.bonus-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0407f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(120, 20, 70, 0.3);
}
.node.bonus-node.is-locked .bonus-tag { background: #a58797; }
@keyframes gift-glow { 0%, 100% { box-shadow: 0 6px 0 #c9851d, 0 0 0 0 rgba(255, 201, 60, 0.6), 0 12px 20px rgba(120, 60, 0, 0.3); } 50% { box-shadow: 0 6px 0 #c9851d, 0 0 0 14px rgba(255, 201, 60, 0), 0 12px 20px rgba(120, 60, 0, 0.3); } }

/* City gates: a ribbon where each city starts. */
.city-gate {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 230px;
  padding: 10px 30px 12px;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background: linear-gradient(180deg, #ff8dbb, #e0407f);
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 0 #b82a64, 0 18px 30px rgba(90, 20, 55, 0.35);
  pointer-events: none;
}
.city-gate::before, .city-gate::after {
  content: '';
  position: absolute;
  top: 18px;
  width: 26px;
  height: 36px;
  background: #c93570;
  z-index: -1;
}
.city-gate::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.city-gate::after { right: -16px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.cg-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.cg-name { font-size: 28px; line-height: 1.05; text-shadow: 0 2px 0 rgba(120, 20, 70, 0.35); }
.cg-tag { font-size: 12px; font-weight: 700; opacity: 0.95; }
.city-gate.is-locked { background: linear-gradient(180deg, #d9c6d0, #a58797); box-shadow: 0 8px 0 #836b78, 0 18px 30px rgba(60, 30, 50, 0.3); }
.city-gate.is-locked::before, .city-gate.is-locked::after { background: #8d7482; }

/* After the last level: a boarding pass to the cities still to come. */
.coming-soon {
  position: absolute;
  left: 50%;
  width: min(94%, 460px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #6e1f45;
}
.cs-cloud {
  position: absolute;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(90, 30, 70, 0.16));
  animation: cloud-drift 8s ease-in-out infinite alternate;
}
.cs-cloud.back.c0 { width: 62%; height: 130px; left: -18%; top: -60px; }
.cs-cloud.back.c1 { width: 58%; height: 120px; right: -16%; top: -48px; animation-delay: -3s; }
.cs-cloud.front { z-index: 3; opacity: 0.95; }
.cs-cloud.front.c2 { width: 40%; height: 84px; left: -16%; bottom: -58px; animation-delay: -5s; }
.cs-cloud.front.c3 { width: 38%; height: 80px; right: -14%; bottom: -54px; animation-delay: -1.5s; }
@keyframes cloud-drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }

.cs-pass {
  position: relative;
  z-index: 2;
  display: flex;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff 0%, #fff4f8 60%, #ffe9f1 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(246, 169, 196, 0.8), 0 24px 50px rgba(90, 20, 55, 0.3);
  animation: pass-float 5s ease-in-out infinite;
}
@keyframes pass-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(0.6deg); } }
.cs-main { flex: 1; min-width: 0; padding: 16px 16px 16px 18px; text-align: left; }
.cs-route { display: flex; align-items: center; gap: 6px; }
.cs-code { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: #e0407f; }
.cs-mystery { color: #b99aac; }
.cs-flight { flex: 1; min-width: 60px; height: 34px; overflow: visible; }
.cs-arc { fill: none; stroke: #f3a9c6; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.cs-plane path { fill: #e0407f; }
.cs-kicker { margin: 8px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #e0407f; }
.cs-title { display: block; margin: 2px 0 4px; font-size: 24px; line-height: 1.1; }
.cs-text { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #8a4f70; }
.cs-stamps { display: flex; gap: 10px; margin-top: 12px; }
.cs-stamp {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px dashed var(--c);
  color: var(--c);
  font-size: 20px;
  font-weight: 800;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  transform: rotate(var(--r));
  animation: stamp-pulse 2.4s ease-in-out infinite;
}
.cs-stamp:nth-child(2) { animation-delay: 0.3s; }
.cs-stamp:nth-child(3) { animation-delay: 0.6s; }
@keyframes stamp-pulse { 0%, 100% { transform: rotate(var(--r)) scale(1); } 50% { transform: rotate(var(--r)) scale(1.08); } }
.cs-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  min-width: 100px;
  padding: 14px 12px;
  border-left: 2px dashed #f3b9cf;
  text-align: left;
}
/* the perforation notches */
.cs-stub::before, .cs-stub::after {
  content: '';
  position: absolute;
  left: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 214, 230, 0.95);
  box-shadow: inset 0 0 0 3px #fff;
}
.cs-stub::before { top: -10px; }
.cs-stub::after { bottom: -10px; }
.cs-label { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b58aa2; }
.cs-value { margin-bottom: 6px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.cs-barcode {
  height: 26px;
  margin-top: 2px;
  background: repeating-linear-gradient(90deg, #6e1f45 0 2px, transparent 2px 4px, #6e1f45 4px 5px, transparent 5px 8px, #6e1f45 8px 11px, transparent 11px 13px);
  opacity: 0.75;
}
.coming-soon.is-reached .cs-pass { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffc93c, 0 0 40px rgba(255, 201, 60, 0.55), 0 24px 50px rgba(90, 20, 55, 0.3); }
@media (max-width: 400px) {
  .cs-title { font-size: 20px; }
  .cs-code { font-size: 18px; }
  .cs-stub { min-width: 88px; padding: 12px 8px 12px 10px; }
  .cs-value { font-size: 12px; }
}

.node {
  position: absolute;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  border: 5px solid #fff;
  background: radial-gradient(circle at 35% 30%, #ffb0d0, #e0407f 70%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 0 #b82a64, 0 14px 22px rgba(120, 20, 70, 0.3);
  font-family: inherit;
  animation: node-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both;
  transition: transform 0.15s;
}
.node:hover:not(:disabled) { transform: scale(1.08); }
.node:active:not(:disabled) { transform: scale(0.95); }
.node-num { font-size: 28px; font-weight: 800; text-shadow: 0 2px 0 rgba(120, 20, 70, 0.4); }
.node.is-done { background: radial-gradient(circle at 35% 30%, #ffe28a, #ff9f2e 70%); box-shadow: 0 7px 0 #c9541d, 0 14px 22px rgba(120, 50, 10, 0.3); }
.node.is-locked { background: radial-gradient(circle at 35% 30%, #f2e6ec, #c9aebb 70%); box-shadow: 0 7px 0 #a58797, 0 10px 16px rgba(80, 40, 60, 0.2); cursor: default; }
.node.is-locked .node-num { font-size: 22px; }
.node.is-current { animation: node-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both, node-pulse 1.6s ease-in-out 0.6s infinite; }
.node-stars {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  display: flex;
  gap: 1px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(120, 20, 70, 0.4);
}
.node-stars .on { color: var(--gold); -webkit-text-stroke: 1px #c98a00; }
.node.is-locked .node-stars { display: none; }

.avatar {
  position: absolute;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  margin-top: -38px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #ffe6ef;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(120, 20, 70, 0.35);
  z-index: 3;
  animation: avatar-hop 1.4s ease-in-out infinite;
  pointer-events: none;
}
.avatar img { position: absolute; width: 253%; max-width: none; height: auto; left: -101%; top: -78%; }
.map-deco {
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: 0.9;
  filter: drop-shadow(0 6px 8px rgba(120, 20, 70, 0.25));
  animation: deco-float 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes node-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes node-pulse { 0%, 100% { box-shadow: 0 7px 0 #b82a64, 0 0 0 0 rgba(255, 111, 168, 0.6); } 50% { box-shadow: 0 7px 0 #b82a64, 0 0 0 16px rgba(255, 111, 168, 0); } }
@keyframes avatar-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes deco-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }

/* ---------- modals ---------- */

.modal-layer { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.modal {
  position: absolute;
  inset: 0;
  display: flex;
  padding: calc(22px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
  background: rgba(90, 20, 55, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  animation: fade-in 0.25s ease both;
  overflow-y: auto;
  overflow-x: hidden;
}
.card {
  position: relative;
  width: min(100%, 420px);
  padding: 26px 24px 26px;
  border-radius: 30px;
  background: linear-gradient(180deg, #fffdfb 0%, #fff0f5 100%);
  border: 5px solid #fff;
  box-shadow: 0 0 0 4px #f6a9c4, var(--shadow);
  text-align: center;
  margin: auto;
  flex: none;
  /* keeps the card at its content height when fitModal() gives it negative margins */
  align-self: flex-start;
  animation: card-pop 0.5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.card h2 { margin: 2px 0 8px; font-size: 28px; line-height: 1.1; }
.card-kicker { margin: 0; font-weight: 800; color: var(--pink-deep); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; }
.card-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #ff5c7a;
  color: #fff;
  font: 800 26px/1 'Manrope', sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(150, 30, 60, 0.35);
  padding-bottom: 4px;
}
.card-dae {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 6px -8px 10px;
}
.card-dae img { width: 38%; height: 170px; object-fit: cover; object-position: 50% 0; margin-bottom: -4px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.card-speech {
  flex: 1;
  margin: 0 0 30px;
  padding: 12px 14px;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  border: 3px solid #f6a9c4;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  animation: speech-in 0.5s cubic-bezier(.2, 1.5, .4, 1) 0.25s both;
}
.card-label { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.goal-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.goal-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--pink-pale);
  font-weight: 800;
  font-size: 17px;
}
.goal-item img { width: 40px; height: 40px; }
.card-moves { margin: 12px 0 18px; font-weight: 700; color: var(--ink-soft); }

.stars-row { display: flex; justify-content: center; gap: 6px; font-size: 30px; color: #f3c9d8; margin-bottom: 4px; }
.stars-row .on { color: var(--gold); -webkit-text-stroke: 1.5px #c98a00; }
/* the fireworks layer sits above the dialogs and never takes clicks */
.fx-top { position: fixed; inset: 0; z-index: 12; width: 100%; height: 100%; pointer-events: none; }

.stars-big { position: relative; isolation: isolate; font-size: 58px; gap: 4px; margin: 6px 0 4px; }
/* golden light rays behind the stars once the first one lands */
.stars-big::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  z-index: -1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, 0.5) 0deg 10deg, rgba(255, 201, 60, 0) 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 18%, transparent 66%);
  pointer-events: none;
}
.stars-big.has-stars::before { animation: rays-in 0.9s ease-out forwards, rays-spin 14s linear infinite; }
/* a light sweep across the stars */
.stars-big::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -30%;
  width: 22%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  opacity: 0;
  pointer-events: none;
}
.stars-big.has-stars::after { animation: star-sweep 1.2s ease-in-out 1.6s both; }
@keyframes star-sweep { 0% { left: -30%; opacity: 1; } 100% { left: 110%; opacity: 0.9; } }
.stars-big .on { filter: drop-shadow(0 0 10px rgba(255, 190, 40, 0.85)); }
.stars-big span { display: inline-block; transform: scale(0.8); transition: transform 0.2s; }
.stars-big span:nth-child(2) { transform: translateY(-14px) scale(0.9); }
.stars-big .on { animation: star-slam 0.6s cubic-bezier(.2, 1.8, .4, 1) both; }
.stars-big span:nth-child(2).on { animation-name: star-slam-mid; }

.card-small { width: min(100%, 320px); display: flex; flex-direction: column; gap: 14px; }

.btn-legend { display: block; margin: 18px auto 0; padding: 11px 22px; font-size: 15px; }
/* "Vezi rețetele lui Dae" leads to the Pașaport de Gust website, not into the game: it sits below
   a thin divider at the bottom of the title panel, as a flat outlined pill in the game's berry pink */
.btn-site {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 26px auto 0;
  padding: 9px 18px;
  border: 2px solid var(--pink-deep);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--pink-deep);
  font: 800 14px/1 'Manrope', sans-serif;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.12s;
}
.btn-site::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;
  width: 190px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(184, 42, 100, 0.35), transparent);
}
.btn-site:hover { background: var(--pink-deep); color: #fff; }
.btn-site:active { transform: translateY(2px); }
.btn-site:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; }
.btn-site svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* the arrow is drawn, because iOS turns the ↗ character into a blue emoji */
.btn-site svg.site-arrow { width: 13px; height: 13px; stroke-width: 2.2; opacity: 0.85; }

.card-legend { width: min(100%, 460px); }
/* "Cum se joacă": four tabs as a pink segmented control, numbered steps, a note under Ajutoare */
.guide-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 0 0; padding: 4px; border-radius: 999px; background: #ffe3ee; }
.guide-tab { padding: 8px 4px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 800 13px/1 'Manrope', sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.guide-tab:hover { color: var(--ink); }
.guide-tab.is-on { background: #fff; color: var(--pink-deep); box-shadow: 0 2px 6px rgba(184, 42, 100, 0.2); }
.guide-tab:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 1px; }
.guide-num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 6px 0 2px; border-radius: 50%; background: linear-gradient(180deg, #ff9cc2, var(--pink-deep)); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 3px 0 #b82a64; }
.guide-note { margin: 2px 2px 0; list-style: none; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-soft); text-align: left; }
.legend-ok { margin-top: 16px; min-width: 60%; }
.legend-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.legend-item, .tip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--pink-pale);
  animation: card-pop 0.45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.legend-item:nth-child(2) { animation-delay: 0.06s; }
.legend-item:nth-child(3) { animation-delay: 0.12s; }
.legend-item:nth-child(4) { animation-delay: 0.18s; }
.legend-item:nth-child(5) { animation-delay: 0.24s; }
.legend-item img, .tip-item img { width: 60px; height: 60px; flex: none; transform: scale(1.35); margin: 0 6px; filter: drop-shadow(0 4px 6px rgba(120, 20, 70, 0.2)); }
.legend-item img.wide, .tip-item img.wide { width: 80px; margin: 0 12px; }
.card-legend .card-close { top: 10px; right: 10px; }
.legend-item strong, .tip-item strong { display: block; font-size: 16px; }
.legend-how {
  display: inline-block;
  margin: 2px 0 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pink-pale);
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 800;
}
.legend-item p, .tip-item p { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ink-soft); }

.tip-box { position: relative; margin: 14px 0 0; text-align: left; }
.tip-box .tip-item { border-color: #ffd66b; background: #fffbea; }
.tip-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd66b, #ff9f2e);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(160, 60, 10, 0.4);
  animation: btn-breathe 1.6s ease-in-out infinite;
}

.card-result { padding-top: 110px; }
#modal-result { padding-top: calc(120px + env(safe-area-inset-top)); }
.res-dae {
  position: absolute;
  left: calc(50% - 95px);
  top: -110px;
  width: 190px;
  height: 214px;
  overflow: hidden;
  border-radius: 0 0 100px 100px;
  -webkit-mask: linear-gradient(#000 80%, transparent);
  mask: linear-gradient(#000 80%, transparent);
}
.res-dae img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.res-dae .rd-sad, .res-dae .rd-celebrate { display: none; }
.res-dae .rd-sad { width: 104%; left: -4%; top: 6px; }
.res-dae .rd-celebrate { width: 100%; left: 0; top: 0; }
/* the celebrating pose has stars and a trophy around her: a wider, unrounded frame keeps them whole */
.res-dae.is-celebrate { left: calc(50% - 135px); width: 270px; top: -128px; height: 232px; border-radius: 0; overflow: visible;
  -webkit-mask: linear-gradient(#000 78%, transparent 100%); mask: linear-gradient(#000 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.res-dae.is-celebrate .rd-body, .res-dae.is-celebrate .rd-hand, .res-dae.is-celebrate .rd-wink { display: none; }
.res-dae.is-celebrate .rd-celebrate { display: block; animation: celebrate-glow 2.4s ease-in-out infinite; }
@keyframes celebrate-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 90, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 210, 90, 0.8)); } }
.res-dae.is-lose .rd-body, .res-dae.is-lose .rd-hand, .res-dae.is-lose .rd-wink { display: none; }
.res-dae.is-lose .rd-sad { display: block; }
.rd-body { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 65%, 13% 86%, 26% 86%, 29% 80%, 25% 65%, 25% 45%, 0 45%); }
.rd-hand { clip-path: polygon(0 45%, 25% 45%, 25% 65%, 29% 80%, 26% 86%, 13% 86%, 0 65%); transform-origin: 23% 82%; }
.rd-wink {
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 7% 3.5% at 54% 36.2%, #000 80%, transparent 100%);
  mask-image: radial-gradient(ellipse 7% 3.5% at 54% 36.2%, #000 80%, transparent 100%);
}
.res-dae.is-win.play .rd-hand { animation: dae-wave 1.8s ease-in-out 0s 2; }
.res-dae.is-win.play .rd-wink { animation: dae-wink 0.62s ease-in-out 3.7s 1; }
@keyframes dae-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-9deg); } 40%, 80% { transform: rotate(6deg); } }
@keyframes dae-wink { 0% { opacity: 0; } 18%, 68% { opacity: 1; } 100% { opacity: 0; } }
.res-line { margin: 4px 0 12px; font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.res-score { display: flex; justify-content: center; gap: 12px; margin: 0 0 20px; }
.res-score div { min-width: 120px; padding: 10px 14px; border-radius: 18px; background: #fff; border: 3px solid var(--pink-pale); }
.res-score dt { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.res-score dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; }
.res-actions .btn-big { flex-basis: 100%; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(40px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes speech-in { from { opacity: 0; transform: scale(0.6); transform-origin: 0 100%; } to { opacity: 1; transform: none; } }
@keyframes star-slam { 0% { transform: scale(4.2) rotate(-50deg); opacity: 0; filter: blur(6px) drop-shadow(0 0 0 rgba(255, 190, 40, 0)); } 55% { transform: scale(0.85) rotate(8deg); opacity: 1; filter: blur(0) drop-shadow(0 0 22px rgba(255, 210, 80, 1)); } 78% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 190, 40, 0.85)); } }
@keyframes star-slam-mid { 0% { transform: translateY(-14px) scale(4.6) rotate(50deg); opacity: 0; filter: blur(6px); } 55% { transform: translateY(-14px) scale(0.9) rotate(-8deg); opacity: 1; filter: blur(0) drop-shadow(0 0 26px rgba(255, 210, 80, 1)); } 78% { transform: translateY(-14px) scale(1.28) rotate(3deg); } 100% { transform: translateY(-14px) scale(1.15); opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 190, 40, 0.9)); } }
#res-title.pop { animation: title-pop 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes title-pop { 0% { transform: scale(0.4); opacity: 0; letter-spacing: 0.2em; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; letter-spacing: normal; } }
@keyframes dae-bounce { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(0); } }

.fade {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff5f9, #ffb3cf);
  transition: opacity 0.38s ease;
}
.fade.on { opacity: 1; pointer-events: auto; }

/* ---------- phones and portrait ---------- */

@media (orientation: portrait), (max-width: 760px) {
  #screen-title {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "." "text" "actions";
    row-gap: 4px;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #f6d4e1 0%, #ffe4ee 60%, #ffd6e6 100%);
  }
  #screen-title::after { display: none; }
  .title-scene { bottom: auto; height: 66vh; }
  .title-scene::before { display: none; }
  .title-photo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-position: 53% 0;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .title-scene::after { background: linear-gradient(180deg, rgba(255, 240, 246, 0) 60%, rgba(255, 228, 238, 0.9) 100%); }
  .title-wrap { margin-top: -18px; }
  .eyebrow { font-size: 12px; }
  .t-a { font-size: clamp(38px, 12vw, 70px); }
  .t-b { font-size: clamp(30px, 9.5vw, 56px); }
  .tagline { font-size: 15px; margin: 8px auto 0; }
  .title-actions { margin-top: 14px; }
  .btn-big { padding: 16px 42px; font-size: 20px; }
  .btn-legend { margin-top: 12px; }
  .btn-site { margin-top: 20px; padding: 8px 16px; font-size: 13px; }
  .btn-site::before { top: -11px; }
  .legend-item, .tip-item { gap: 8px; padding: 8px 10px; }
  .legend-item img, .tip-item img { width: 44px; height: 44px; transform: scale(1.3); margin: 0 4px; }
  .legend-item img.wide, .tip-item img.wide { width: 60px; margin: 0 8px; }
  .legend-item strong, .tip-item strong { font-size: 15px; }
  .legend-item p, .tip-item p { font-size: 13px; }
  /* the legend fits a phone screen without scrolling */
  .card-legend .card-kicker { font-size: 12px; }
  .card-legend h2 { margin-bottom: 4px; font-size: 22px; }
  .legend-list { margin-top: 10px; gap: 6px; }
  .legend-list .legend-item { padding: 6px 10px; }
  .legend-list .legend-item p { font-size: 12.5px; line-height: 1.3; }
  .legend-ok { margin-top: 12px; padding: 12px 24px; }
  .card { padding: 22px 16px 20px; }
  .card-result { padding-top: 110px; }
  .card h2 { font-size: 24px; }
  /* a tighter level card, so it fits a phone screen without scrolling */
  .modal { padding: calc(18px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
  #lv-stars { font-size: 24px; margin-bottom: 0; }
  #modal-level .card-dae { margin: 2px -6px 8px; }
  #modal-level .card-dae img { height: min(150px, 18vh); }
  #modal-level .card-speech { margin-bottom: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.35; }
  #modal-level .goal-item { padding: 4px 12px 4px 6px; font-size: 16px; }
  #modal-level .goal-item img { width: 34px; height: 34px; }
  .lv-boost { margin-top: 10px; padding: 8px 8px 6px; }
  .lb-pick { padding: 6px 4px 5px; }
  .lb-pick img { width: 46px; height: 46px; }
  .lb-note { min-height: 2.5em; margin-top: 6px; }
  #modal-level .card-moves { margin: 8px 0 12px; }
  .res-line { margin: 2px 0 10px; font-size: 15px; }
  .res-score { margin-bottom: 12px; }
  .res-score div { padding: 6px 12px; }
  .res-score dd { font-size: 21px; }
  .res-reward { margin-bottom: 12px; padding: 8px 8px 8px; }
  .rw-box { margin: -10px auto -8px; transform: scale(0.82); }
  .rw-title { font-size: 16px; }
  .pause-btn { left: auto; top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .hammer-btn { left: auto; top: auto; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .hammer-btn img { width: 42px; height: 42px; }
}

@media (orientation: portrait) and (max-height: 720px) {
  .tagline { display: none; }
  .title-scene { height: 62vh; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .t-a { font-size: 44px; }
  .t-b { font-size: 34px; }
  .tagline { margin: 10px auto 14px; font-size: 15px; }
  .card-dae { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}