/* =========================================================
   Mokausi: design system (tokens and shared components)
   ========================================================= */
@font-face {
  font-family: 'Mokausi Baloo';
  src: url('/fonts/MokausiBaloo-600.woff2') format('woff2');
  font-weight: 400 600;
  font-display: block;
}
@font-face {
  font-family: 'Mokausi Baloo';
  src: url('/fonts/MokausiBaloo-800.woff2') format('woff2');
  font-weight: 700 900;
  font-display: block;
}

:root {
  --ink: #2d2445;
  --ink-soft: #6e6688;
  --paper: #ffffff;
  --bg: #e3f0ff;
  --check: #d5e8ff;
  --line: #cfe3fa;
  --line-strong: #b3d0f0;

  --tomato: #ff6b4a; --tomato-deep: #d9472a; --tomato-soft: #ffe3da;
  --sun: #ffc23d; --sun-deep: #e0980c; --sun-soft: #fff1c9;
  --mint: #2fc79a; --mint-deep: #139e74; --mint-soft: #d5f6ea;
  --sky: #4ba3ff; --sky-deep: #2378d4; --sky-soft: #ddeeff;
  --grape: #9c6bff; --grape-deep: #7344da; --grape-soft: #ece2ff;
  --rose: #ff77b0; --rose-deep: #da4d8a; --rose-soft: #ffe1ef;
  --mist: #a9b4ca; --mist-deep: #8290ab; --mist-soft: #eef1f6;

  --font: 'Mokausi Baloo', ui-rounded, system-ui, sans-serif;
  --t-fast: 140ms;
  --t-base: 320ms;
  --t-slow: 700ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --touch: 88px;
  --r-pill: 999px;
  /* The shelf cubie's spot; the map leaves room for it at the bottom. */
  --shelf-item: max(var(--touch), calc(var(--u) * 10));

  /* The game field is 100u × 75u and always fits on screen. */
  --u: min(1vw, 1.333vh);
}

* { box-sizing: border-box; touch-action: manipulation; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background-color: var(--bg);
  background-image: conic-gradient(var(--check) 25%, transparent 0 50%, var(--check) 0 75%, transparent 0);
  background-size: calc(var(--u) * 10) calc(var(--u) * 10);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
#app { position: fixed; inset: 0; }

/* The 100u × 75u field in the centre of the screen */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 75);
  transform: translate(-50%, -50%);
}
/*
 * A phone held sideways (the apps run there too) is about twice as wide as tall: a 4:3 field would leave a third of
 * the screen empty while its 88 px buttons squeeze everything. There the field takes the whole width.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .stage { width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); }
}

/* ---------- Letter character ---------- */
.lc {
  --size: calc(var(--u) * 11);
  /* The eyes sit on top of the letter: lower, they hide the strokes that tell E from F, H from I, S from 8. */
  --eye-y: 0.02em;
  position: relative;
  display: inline-block;
  font-size: var(--size);
  line-height: 1;
  font-weight: 800;
  color: var(--c);
}
/* Č, Š, Ž, Ė, Ū: the eyes go under the mark, which tells the letter apart. */
.lc.has-mark { --eye-y: 0.12em; }
.lc-breathe { display: inline-block; transform-origin: 50% 92%; animation: breathe 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.lc-act { display: inline-block; position: relative; transform-origin: 50% 92%; }
.lc-glyph { display: block; padding: 0 0.05em; text-shadow: 0 0.06em 0 var(--cd); }
.lc-eyes { position: absolute; left: 50%; top: var(--eye-y); transform: translateX(-50%); display: flex; gap: 0.03em; pointer-events: none; }
.lc-eye {
  width: 0.2em; height: 0.2em; border-radius: 50%; background: #fff; position: relative;
  box-shadow: 0 0 0 0.024em var(--ink); animation: blink 5.2s infinite; animation-delay: var(--bd, 0s);
}
.lc-eye::after {
  content: ''; position: absolute; width: 0.09em; height: 0.09em; border-radius: 50%; background: var(--ink);
  left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 0.012em));
}
.lc.is-happy .lc-eye {
  background: transparent; box-shadow: none; height: 0.1em; margin-top: 0.05em;
  border: 0.034em solid var(--ink); border-bottom: 0; border-radius: 0.2em 0.2em 0 0; animation: none;
}
.lc.is-happy .lc-eye::after { display: none; }
.lc.is-faded { opacity: 0.25; filter: saturate(0.2); transition: opacity var(--t-base), filter var(--t-base); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, 0.965); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }

/* ---------- Buttons ---------- */
.btn {
  --c: var(--tomato);
  --cd: var(--tomato-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: max(var(--touch), calc(var(--u) * 8)); min-width: var(--touch);
  padding: 0 calc(var(--u) * 4); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c); color: #fff; font: 700 calc(var(--u) * 3) / 1 var(--font);
  box-shadow: 0 calc(var(--u) * 0.8) 0 var(--cd);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(calc(var(--u) * 0.8)); box-shadow: 0 0 0 var(--cd); }
.btn.is-ghost { background: var(--paper); color: var(--ink); box-shadow: 0 calc(var(--u) * 0.8) 0 var(--line-strong), inset 0 0 0 3px var(--line); }
/* Never squeezed by a crowded row (a top bar with ten slots): it stays round and at least 88 px. */
.round-btn {
  flex: none; width: max(var(--touch), calc(var(--u) * 7.5)); height: max(var(--touch), calc(var(--u) * 7.5));
  border-radius: 50%; border: 0; cursor: pointer; background: var(--paper);
  font-size: calc(var(--u) * 3.4); display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 0.7) 0 var(--line-strong), inset 0 0 0 3px var(--line);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.round-btn:active { transform: translateY(calc(var(--u) * 0.7)); box-shadow: 0 0 0 var(--line-strong), inset 0 0 0 3px var(--line); }
/* ‹ one step back (a game, the zoo, the herbarium to their map; an island to the hub). */
.back-btn svg { width: 52%; height: 52%; }

/* ---------- Speech bubble ---------- */
.bubble {
  position: relative; display: inline-block; background: var(--paper); border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); font: 700 calc(var(--u) * 3.4) / 1.1 var(--font);
  box-shadow: 0 calc(var(--u) * 0.6) 0 var(--line-strong), inset 0 0 0 3px var(--line); white-space: nowrap;
}

/* ---------- Cubies ---------- */
.kb {
  --kb: calc(var(--u) * 12);
  display: inline-block; width: var(--kb); aspect-ratio: 120 / 130; position: relative;
  transform-origin: 50% 100%; animation: kb-bob 2.8s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.kb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kb-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; animation-delay: var(--bd, 0s); }
.kb-spark { transform-box: fill-box; transform-origin: center; animation: twinkle 1.6s ease-in-out infinite; }
.kb.is-locked { animation: none; }
/* Sticker border and shadow: the same shapes with a thick stroke (sharp at any size, see cubie-art.ts sticker). */
.kb-outline *, .kb-shadow * {
  fill: #fff; stroke: #fff; stroke-width: 9px; stroke-linejoin: round; stroke-linecap: round; opacity: 1; animation: none;
}
.kb-shadow * { fill: rgba(45, 36, 69, 0.18); stroke: rgba(45, 36, 69, 0.18); }
.kb.is-locked svg { filter: brightness(0); opacity: 0.15; }
@keyframes kb-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3%) scale(1.03, 0.97); } }
@keyframes twinkle { 50% { transform: scale(0.35) rotate(45deg); opacity: 0.6; } }
@keyframes gift-wiggle {
  0%, 55%, 100% { transform: rotate(0) scale(1); }
  62% { transform: rotate(-9deg) scale(1.05); }
  70% { transform: rotate(8deg) scale(1.05); }
  78% { transform: rotate(-5deg); }
  86% { transform: rotate(3deg); }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes pulse-ring { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.3); opacity: 0; } }

/* ---------- End of step (StepDoneOverlay; background .g-end / .mg-end) ---------- */
[data-step-done] h3 { font-size: calc(var(--u) * 8); font-weight: 800; }
[data-step-done] .btn { font-size: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 6); min-height: max(var(--touch), calc(var(--u) * 10)); }
.sd-stars { display: flex; gap: calc(var(--u) * 2.4); font-size: calc(var(--u) * 13); line-height: 1; }
.sd-star { display: inline-block; filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(224, 152, 12, 0.3)); }
.sd-home { position: absolute; left: max(env(safe-area-inset-left), calc(var(--u) * 3)); top: max(env(safe-area-inset-top), calc(var(--u) * 2.6)); }
.sd-buddy { display: flex; align-items: center; gap: calc(var(--u) * 3.4); }
.sd-buddy .kb { --kb: calc(var(--u) * 20); }
.sd-say { font-size: calc(var(--u) * 4.2); line-height: 1.25; padding: calc(var(--u) * 2) calc(var(--u) * 3.4); }
.sd-say-head { font-size: calc(var(--u) * 5.4); color: var(--grape-deep); }
.sd-say::before {
  content: ''; position: absolute; left: calc(var(--u) * -2); top: 50%; translate: 0 -50%;
  border: calc(var(--u) * 1.4) solid transparent; border-right: calc(var(--u) * 2.2) solid var(--paper); border-left: 0;
}
.sd-score {
  font: 800 calc(var(--u) * 5.4) / 1 var(--font); color: var(--sky-deep); background: var(--sky-soft);
  border-radius: var(--r-pill); padding: calc(var(--u) * 1.4) calc(var(--u) * 4.4);
}
[data-step-done] .sd-retry { font-size: calc(var(--u) * 4.6); min-height: max(var(--touch), calc(var(--u) * 13)); padding: 0 calc(var(--u) * 8); }

/* ---------- Shelf of the newest cubies (CubieShelf) ---------- */
.shelf {
  display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2);
  background: rgba(255, 255, 255, 0.94); border-radius: calc(var(--u) * 4);
  box-shadow: 0 calc(var(--u) * 0.7) 0 var(--line-strong), inset 0 0 0 3px var(--line);
}
.shelf-item {
  position: relative; width: var(--shelf-item); height: var(--shelf-item); padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: end center;
}
.shelf-item .kb { --kb: calc(var(--shelf-item) * 0.78); }
.shelf-item.is-new::before {
  content: ''; position: absolute; inset: 8% 4% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--sun-soft) 40%, transparent 70%);
}
.shelf-new {
  position: absolute; left: 50%; top: calc(var(--u) * -1.2); translate: -50% 0; rotate: -6deg; z-index: 1; pointer-events: none;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.3); border-radius: var(--r-pill); white-space: nowrap;
  background: var(--sun); color: var(--ink); font: 800 max(14px, calc(var(--u) * 1.9)) / 1 var(--font);
  box-shadow: 0 calc(var(--u) * 0.4) 0 var(--sun-deep);
}

/* ---------- Confetti ---------- */
.confetti { position: fixed; width: 12px; height: 8px; border-radius: 3px; pointer-events: none; z-index: 100; }
.confetti.is-round { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Colour classes (last, so they override the defaults) ---------- */
.c-tomato { --c: var(--tomato); --cd: var(--tomato-deep); --cs: var(--tomato-soft); }
.c-sun { --c: var(--sun); --cd: var(--sun-deep); --cs: var(--sun-soft); }
.c-mint { --c: var(--mint); --cd: var(--mint-deep); --cs: var(--mint-soft); }
.c-sky { --c: var(--sky); --cd: var(--sky-deep); --cs: var(--sky-soft); }
.c-grape { --c: var(--grape); --cd: var(--grape-deep); --cs: var(--grape-soft); }
.c-rose { --c: var(--rose); --cd: var(--rose-deep); --cs: var(--rose-soft); }
.c-mist { --c: var(--mist); --cd: var(--mist-deep); --cs: var(--mist-soft); }