/* fredoka-latin-600-normal */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fredoka-latin-600-normal-C4zohCW5.woff2) format('woff2'), url(./fredoka-latin-600-normal-CcrEjrB4.woff) format('woff');
}/* fredoka-latin-ext-600-normal */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fredoka-latin-ext-600-normal-GoyidTAB.woff2) format('woff2'), url(./fredoka-latin-ext-600-normal-BExgZzUO.woff) format('woff');
}/* nunito-latin-700-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./nunito-latin-700-normal-Dort48En.woff2) format('woff2'), url(./nunito-latin-700-normal-OcDqTBcA.woff) format('woff');
}/* nunito-latin-800-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(./nunito-latin-800-normal-Dz8SOQK_.woff2) format('woff2'), url(./nunito-latin-800-normal-D-J0wlBY.woff) format('woff');
}/* nunito-latin-ext-700-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./nunito-latin-ext-700-normal-BWeMsAzO.woff2) format('woff2'), url(./nunito-latin-ext-700-normal-D4woHhbd.woff) format('woff');
}/* nunito-latin-ext-800-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(./nunito-latin-ext-800-normal-CtU8tJOV.woff2) format('woff2'), url(./nunito-latin-ext-800-normal-CDcxIxx8.woff) format('woff');
}/* nunito-cyrillic-700-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./nunito-cyrillic-700-normal-DP36NgGt.woff2) format('woff2'), url(./nunito-cyrillic-700-normal-DfHRUDv-.woff) format('woff');
}/* nunito-cyrillic-800-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(./nunito-cyrillic-800-normal-D3igD7Kl.woff2) format('woff2'), url(./nunito-cyrillic-800-normal-DymMgApb.woff) format('woff');
}/* baloo-2-latin-800-normal */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(./baloo-2-latin-800-normal-BbF3Etk1.woff2) format('woff2'), url(./baloo-2-latin-800-normal-B8BXfZF7.woff) format('woff');
}/* baloo-2-latin-ext-800-normal */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(./baloo-2-latin-ext-800-normal-C_Iwmf1s.woff2) format('woff2'), url(./baloo-2-latin-ext-800-normal-D-iCxxqE.woff) format('woff');
}/* Tenguin — a cozy polar night: glossy toy-like UI (ice panels, candy buttons) over an illustrated world.
   One committed look (night sky), so the palette is a single set of tokens. */
:root {
  --navy-950: #071029;
  --navy-900: #0b1838;
  --navy-800: #11244f;
  --navy-700: #1a3471;
  --ink: #17306a; /* text on light ice */
  --ink-2: #4a6aa8; /* secondary text on ice */
  --ice-0: #ffffff;
  --ice-50: #f4faff;
  --ice-100: #e3f1ff;
  --ice-200: #cfe5fb;
  --ice-300: #a9cdef;
  --ice-400: #7faee3;
  --blue: #2f86f0;
  --blue-lt: #6cc0ff;
  --blue-deep: #1549a3;
  --cyan: #4fd8ff;
  --green: #36c95c;
  --green-lt: #7cf090;
  --green-deep: #167a35;
  --gold: #ffc23d;
  --gold-lt: #ffe68a;
  --gold-deep: #c46d0c;
  --red: #ff4d4f;
  --red-deep: #b8232c;
  --coral: #ff7a59;
  --aurora: #3ee6b0;
  --violet: #8b6cff;
  --text: #ffffff;
  --text-dim: #c3d6f5;
  --d1: #1f5bd0;
  --d9: #142c78;
  --d2: #0a7a55;
  --d8: #065238;
  --d3: #c2187a;
  --d7: #7e1052;
  --d4: #7a3fd6;
  --d6: #4a2496;
  --d5: #a84e00;
  --cell: 40px;
  --gap: 0.08;
  --radius: 24%;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font-ui: "Nunito", system-ui, sans-serif;
  --font-num: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-logo: "Baloo 2", "Fredoka", system-ui, sans-serif;
  color-scheme: dark;
}
.classic {
  /* "Cores clássicas": one distinct hue per digit */
  --d1: #1f5bd0;
  --d2: #0a7a55;
  --d3: #c2187a;
  --d4: #7a3fd6;
  --d5: #a84e00;
  --d6: #00727f;
  --d7: #b3261e;
  --d8: #5b6b00;
  --d9: #6b3d1f;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--navy-900);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}
/* the game clears the notch and home bar itself (env() on the top bar, home and boosters); a host page that also pads
   :root (the Claude app's artifact viewer does) would double that space, so the root never pads */
:root {
  padding: 0 !important;
}
body {
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
svg {
  display: block;
}

#fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
#app {
  position: relative;
  z-index: 1;
  height: 100%;
}
.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.on {
  display: grid;
}

/* ---------- display text: an outline layer + a gradient layer on top (::after) ---------- */
.fx-text {
  position: relative;
  display: inline-block;
  font-family: var(--font-logo);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: #6b2a00;
  -webkit-text-stroke: 0.16em #6b2a00;
  text-shadow: 0 0.07em 0 #4a1a00;
}
.fx-text::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: transparent;
  background: linear-gradient(
    180deg,
    #fffbd6 0%,
    #ffe25c 40%,
    #ffae1f 75%,
    #ff8a12 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.fx-text.ice {
  color: #0f3f94;
  -webkit-text-stroke-color: #0f3f94;
  text-shadow: 0 0.07em 0 #0a2a6a;
}
.fx-text.ice::after {
  background: linear-gradient(180deg, #ffffff 0%, #e8f6ff 45%, #a9dcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.fx-text.aur {
  color: #07443e;
  -webkit-text-stroke-color: #07443e;
  text-shadow: 0 0.07em 0 #063b36;
}
.fx-text.aur::after {
  background: linear-gradient(180deg, #f2fffa 0%, #9dffd6 45%, #3ee6b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.fx-text.rose {
  color: #7a1030;
  -webkit-text-stroke-color: #7a1030;
  text-shadow: 0 0.07em 0 #4f0a20;
}
.fx-text.rose::after {
  background: linear-gradient(180deg, #fff0f6 0%, #ffb3cf 45%, #ff6f9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- buttons: one recipe for all ----------
   face (2-stop gradient) + one bottom lip (4 px) + one soft shadow + a quiet top highlight.
   Press: drops 3 px and the lip flattens (50 ms); release springs back (220 ms).
   Roles: .btn = primary (play / continue / next) gold · .green = success (claim, confirm) · .blue = secondary
   · .ghost = tertiary · .red = destructive / close. Sizes: .big 60 · default 52 · .small 42. */
.btn {
  --a: #ffd166;
  --b: #f5a623;
  --lip: #b8650c;
  --fg: #4a2300;
  --ts: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 52px;
  padding: 0 1.5em;
  border-radius: 999px;
  color: var(--fg);
  font: 800 1.25rem/1 var(--font-logo);
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--a), var(--b));
  box-shadow:
    inset 0 1px 0 #ffffff4d,
    0 4px 0 var(--lip),
    0 6px 12px #04103455;
  text-shadow: var(--ts);
  transition:
    transform 0.22s var(--ease-spring),
    box-shadow 0.22s var(--ease-spring),
    filter 0.15s;
}
.btn:active:not([disabled]),
.btn.press {
  transform: translateY(3px) scale(0.985);
  transition-duration: 0.05s;
  box-shadow:
    inset 0 1px 0 #ffffff4d,
    0 1px 0 var(--lip),
    0 3px 8px #04103455;
}
.btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.btn.gold {
  /* same as primary */
}
.btn.green {
  --a: #1f9a49;
  --b: #15803d;
  --lip: #0c5c2a;
  --fg: #fff;
  --ts: 0 1px 0 #0a4a22;
}
.btn.blue {
  --a: #2f7fe6;
  --b: #1d63c4;
  --lip: #134790;
  --fg: #fff;
  --ts: 0 1px 0 #0f3a78;
}
.btn.red {
  --a: #e04349;
  --b: #c9333a;
  --lip: #8e1a22;
  --fg: #fff;
  --ts: 0 1px 0 #6e1018;
}
.btn.ghost {
  --a: #ffffff26;
  --b: #ffffff14;
  --lip: #00000040;
  --fg: #fff;
  --ts: 0 1px 0 #0006;
  box-shadow:
    inset 0 0 0 1.5px #ffffff40,
    0 3px 0 var(--lip);
}
.btn.big {
  min-height: 60px;
  font-size: 1.55rem;
  padding: 0 1.8em;
}
.btn.small {
  min-height: 42px;
  font-size: 1.02rem;
  padding: 0 1.2em;
}
.btn.wide {
  width: 100%;
}
.btn .sub {
  display: block;
  font: 800 0.78rem/1.1 var(--font-ui);
  opacity: 0.9;
  letter-spacing: 0.02em;
}
.btn .ic {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}
.btn .ic svg {
  width: 100%;
  height: 100%;
}
.btn[disabled] {
  filter: saturate(0.25) brightness(0.95);
  opacity: 0.75;
  cursor: default;
  box-shadow: 0 2px 0 var(--lip);
}
.btn .cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  background: #ffffffa6;
  color: #4a2300;
  font-size: 0.95rem;
}
.btn .cost svg {
  width: 20px;
  height: 20px;
}

/* round ice buttons (pause, settings) and the round close button */
.rbtn {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: linear-gradient(180deg, #f4f9ff, #d6e7fa);
  box-shadow:
    inset 0 -2px 0 #a9c9ea,
    0 3px 0 #5a88c8,
    0 6px 12px #04103466;
  transition:
    transform 0.22s var(--ease-spring),
    box-shadow 0.22s var(--ease-spring);
}
.rbtn:active {
  transform: translateY(2px) scale(0.96);
  transition-duration: 0.05s;
  box-shadow:
    inset 0 -2px 0 #a9c9ea,
    0 1px 0 #5a88c8,
    0 3px 6px #04103455;
}
.rbtn svg {
  width: 24px;
  height: 24px;
}
.rbtn.red {
  color: #fff;
  background: linear-gradient(180deg, #e04349, #c9333a);
  box-shadow:
    inset 0 -2px 0 #b8232c,
    0 3px 0 #8e1a22,
    0 4px 10px #04103455;
}
.rbtn.red:active {
  box-shadow:
    inset 0 -2px 0 #b8232c,
    0 1px 0 #8e1a22;
}
.rbtn.red svg {
  width: 16px;
  height: 16px;
}
.rbtn.sm {
  width: 36px;
  height: 36px;
}
.rbtn.sm svg {
  width: 18px;
  height: 18px;
}

/* pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c1c44e6, #132a5ee6);
  box-shadow:
    inset 0 0 0 2px #ffffff2a,
    0 4px 10px #0004;
  font: 800 1.15rem/1 var(--font-logo);
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pill .coin {
  width: 34px;
  height: 34px;
  margin-left: -2px;
}
.coin {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: none;
}
.coin svg {
  width: 100%;
  height: 100%;
}
.pill.streak {
  padding: 0 14px 0 8px;
}
.pill.streak .sflake {
  width: 22px;
  height: 22px;
  color: var(--aurora);
}
.pill.streak .sflake svg {
  width: 22px;
  height: 22px;
}

/* badges */
.badge {
  text-shadow: none;
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #d92d36;
  color: #fff;
  font: 800 0.82rem/1 var(--font-ui);
  box-shadow:
    0 0 0 2px #fff,
    0 2px 4px #0005;
  z-index: 2;
}
.badge:empty {
  display: none;
}
.badge.price {
  display: inline-flex;
  gap: 2px;
  padding: 0 6px 0 2px;
  background: linear-gradient(180deg, #ffe27a, #ffb21e);
  color: #6b3a00;
}
.badge.price .coin {
  width: 16px;
  height: 16px;
}
.badge.free {
  background: #15803d;
}
.badge.lock {
  background: #0c1c44;
  padding: 0;
  width: 24px;
}
.badge.lock svg {
  width: 16px;
  height: 16px;
}
.badge.dot {
  min-width: 22px;
  height: 22px;
  font-size: 0.9rem;
}

/* ice panel */
.panel {
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffffee, #dcedfdee);
  box-shadow:
    inset 0 0 0 2px #ffffff,
    inset 0 -4px 0 #b9d6f2,
    0 8px 22px #0006;
}

/* ---------- home ---------- */
#home {
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  padding: max(10px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
#home .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#home .row-l {
  display: flex;
  gap: 8px;
  align-items: center;
}
#home .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  width: 100%;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
  transform: rotate(-2deg);
}
.logo .l1 {
  font-size: clamp(3.6rem, min(17vw, 11vh), 6.2rem);
  letter-spacing: -0.01em;
}
.logo .l2 {
  font-size: clamp(1.25rem, min(6.4vw, 4vh), 2.2rem);
  margin-top: -0.15em;
  letter-spacing: 0.04em;
}
.logo .l1::before {
  content: "";
  position: absolute;
  left: 6%;
  top: -0.1em;
  width: 30%;
  height: 0.26em;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 20'%3E%3Cpath d='M0 20V13Q2 7 9 8Q13 1 21 4Q27 0 33 5Q40 2 44 8Q48 9 48 13V20Z' fill='%23ffffff'/%3E%3C/svg%3E")
    left bottom / auto 100% repeat-x;
  filter: drop-shadow(0 2px 0 #9cc6ea);
  -webkit-text-stroke: 0;
}
#home .stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(4px, 2vh, 18px);
}
#home .stage .tg {
  --ts: clamp(118px, min(42vw, 26vh), 230px);
  z-index: 1;
  margin-bottom: -6%;
}
#home .stage .floe {
  width: calc(clamp(118px, min(42vw, 26vh), 230px) * 1.7);
  max-width: 92vw;
  margin-top: -10px;
}
#home .stage .tg-hit {
  left: 15%;
  right: 15%;
  top: 0;
  bottom: 20%;
}
#home .actions {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
#home .actions .btn.big {
  width: 100%;
  min-height: 76px;
  font-size: 2rem;
}
#home .actions .btn.big .ic {
  width: 1.1em;
  height: 1.1em;
}
#home .dailyb {
  justify-content: flex-start;
  padding: 0 16px 0 10px;
  min-height: 58px;
}
#home .dailyb .ic {
  width: 40px;
  height: 40px;
}
#home .dailyb .tx {
  flex: 1;
  text-align: left;
  font-size: 1.25rem;
}
#home .dailyb .tx small {
  display: block;
  font: 800 0.8rem/1.2 var(--font-ui);
  opacity: 0.9;
}
#home .dailyb .done {
  width: 30px;
  height: 30px;
}
#home .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pill.coins.lift {
  position: relative;
  z-index: 60;
}
.tilebtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 800 0.85rem/1.1 var(--font-logo);
  color: #fff;
  text-shadow:
    0 1px 0 #0b1838,
    0 -1px 0 #0b1838,
    1px 0 0 #0b1838,
    -1px 0 0 #0b1838,
    1px 1px 0 #0b1838,
    -1px 1px 0 #0b1838,
    0 2px 4px #000c;
}
.tilebtn .sq {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1;
  max-height: 70px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f4f9ff, #d3e5f8);
  box-shadow:
    inset 0 -4px 0 #9fc4ea,
    0 4px 0 #4f7fc4,
    0 8px 14px #0005;
  transition: transform 0.06s;
}
.tilebtn:active .sq {
  transform: translateY(3px);
}
.tilebtn .sq svg {
  width: 58%;
  height: 58%;
  max-width: 40px;
  max-height: 40px;
  filter: drop-shadow(0 2px 0 #0002);
}
.tilebtn .badge {
  top: -6px;
  right: -4px;
}
.tilebtn small {
  font: 800 0.7rem/1 var(--font-ui);
  color: var(--text-dim);
}
.chapter {
  max-width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #0b1838b8;
  box-shadow: inset 0 0 0 1px #ffffff24;
  font: 800 0.9rem/1 var(--font-logo);
  color: #fff;
}
.chapter .pips {
  display: flex;
  gap: 4px;
  align-items: center;
}
.chapter .pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0c1c44aa;
  box-shadow: inset 0 0 0 2px #ffffff40;
  font-style: normal;
  font-size: 0;
}
.chapter .pip.done {
  background: radial-gradient(circle at 40% 30%, #fff, #8fd2ff 60%, #3d98f5);
  box-shadow: 0 0 0 2px #fff;
}
.chapter .pip.cur {
  width: 19px;
  height: 19px;
  background: radial-gradient(circle at 40% 30%, #fff3c2, #ffc23d 55%, #f59e1b);
  box-shadow:
    0 0 0 3px #fff,
    0 0 12px #ffc23d;
  animation: pipPulse 1.4s ease-in-out infinite alternate;
}
@keyframes pipPulse {
  to {
    transform: scale(1.12);
  }
}
.chapter .pip.boss {
  border-radius: 6px;
  rotate: 45deg;
}
.chapter .pchest {
  width: 24px;
  height: 24px;
  margin-left: 2px;
  font-style: normal;
  display: grid;
}
.chapter .pchest svg {
  width: 100%;
  height: 100%;
}
/* chapter chest */
.chestbox {
  position: relative;
  height: 180px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  overflow: hidden;
  margin: -4px 0 0;
}
.chestbox .rays {
  position: absolute;
  inset: -40%;
  opacity: 0;
  transition: opacity 0.4s;
  background: repeating-conic-gradient(
    from 0deg,
    #ffe9a655 0deg 9deg,
    transparent 9deg 22deg
  );
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
  mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: spin 14s linear infinite;
}
.card.chestc.open .chestbox .rays {
  opacity: 1;
}
.chest {
  position: relative;
  width: 136px;
  height: 136px;
  transform-origin: 50% 90%;
}
.chest > svg,
.chest .lid,
.chest .lid svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.chest .lid {
  transform-origin: 10% 47%;
}
.chest-msg {
  margin: 4px 0 0;
  text-align: center;
  font: 800 1.1rem/1.2 var(--font-ui);
  color: var(--ink);
}
.chest-got {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 2px;
  min-height: 8px;
}
.chest-got .it {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: #eef4fb;
  box-shadow: inset 0 0 0 1.5px #d0deee;
  font: 800 1.15rem/1 var(--font-logo);
  color: var(--ink);
}
.chest-got .it svg,
.chest-got .it .coin {
  width: 32px;
  height: 32px;
}
body.calm .chestbox .rays {
  animation: none;
}

/* ---------- game layout (portrait): top bar / goal / board (Tenguin docked at its foot) / boosters ---------- */
#game {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
#game .side-l {
  display: contents;
}
/* top bar: three items, one height (44 px), one baseline */
.topbar {
  grid-row: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px)
    max(12px, env(safe-area-inset-right)) 8px
    max(12px, env(safe-area-inset-left));
}
.topbar .rbtn {
  width: 44px;
  height: 44px;
}
.topbar .rbtn svg {
  width: 22px;
  height: 22px;
}
.topbar .pill {
  height: 44px;
}
.topbar .pill .coin {
  width: 32px;
  height: 32px;
}
.lvlp {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 0;
  padding: 0 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #e2f0fd);
  color: var(--ink);
  box-shadow:
    inset 0 -3px 0 #c3dbf3,
    0 4px 10px #0004;
}
.lvlp .lvl {
  font: 800 1.05rem/1 var(--font-logo);
  white-space: nowrap;
}
.lvlp .st3 {
  display: flex;
  gap: 2px;
}
.lvlp .st3 i {
  width: 21px;
  height: 21px;
  display: block;
}
.lvlp .st3 i svg {
  width: 100%;
  height: 100%;
}

/* score + Embalo, then the 1–9 tracker: information, so flatter than the tiles */
.goal {
  grid-row: 2;
  margin: 0 max(12px, env(safe-area-inset-right)) 8px
    max(12px, env(safe-area-inset-left));
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 18px;
  box-shadow:
    inset 0 -3px 0 #c3dbf3,
    0 6px 16px #0004;
}
.goal .gh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.goal small {
  display: block;
  font: 800 0.66rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.scorebox {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.scorebox .score {
  font: 600 1.45rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: inline-block;
  transform-origin: 0 60%;
}
.embalo {
  --tier: #6b7f9f;
  flex: 0 1 58%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "lab x" "bar x";
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
}
.embalo small {
  grid-area: lab;
}
.embalo .bar {
  grid-area: bar;
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #d3e3f4;
  overflow: hidden;
}
.embalo .bar i {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--tier);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition:
    transform 0.22s var(--ease-out),
    background 0.4s;
}
.embalo .x {
  grid-area: x;
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font: 800 1rem/1 var(--font-logo);
  color: #fff;
  background: var(--tier);
  box-shadow: inset 0 -2px 0 #0002;
  transition: background 0.4s;
  font-variant-numeric: tabular-nums;
}
.embalo[data-m="1"] .x {
  color: #fff;
}
.embalo[data-m="2"] {
  --tier: #1f7fd1;
}
.embalo[data-m="3"] {
  --tier: #12895a;
}
.embalo[data-m="4"] {
  --tier: #7c4ddb;
}
.embalo[data-m="5"] {
  --tier: linear-gradient(90deg, #0f8052, #6b46d6, #c2367f);
}
.embalo[data-m="5"] .x {
  box-shadow:
    inset 0 -2px 0 #0002,
    0 0 12px #8b6cff99;
}
.embalo[data-m="5"] .bar i {
  background-size: 200% 100%;
  animation: aurBar 1.4s linear infinite;
}
@keyframes aurBar {
  to {
    background-position: 200% 0;
  }
}
body[data-mult="5"] .goal {
  box-shadow:
    inset 0 -3px 0 #b6e8d6,
    0 0 0 2px #3ee6b0,
    0 6px 22px #3ee6b066;
}
.digits {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}
.digits b {
  --c: var(--d1);
  position: relative;
  height: 26px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font: 600 0.98rem/1 var(--font-num);
  color: var(--c);
  background: #ffffffa6;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #ffffff);
  transition:
    background 0.35s,
    box-shadow 0.35s;
}
.digits b span {
  transition: opacity 0.35s;
}
.digits b[data-d="1"] {
  --c: var(--d1);
}
.digits b[data-d="2"] {
  --c: var(--d2);
}
.digits b[data-d="3"] {
  --c: var(--d3);
}
.digits b[data-d="4"] {
  --c: var(--d4);
}
.digits b[data-d="5"] {
  --c: var(--d5);
}
.digits b[data-d="6"] {
  --c: var(--d6);
}
.digits b[data-d="7"] {
  --c: var(--d7);
}
.digits b[data-d="8"] {
  --c: var(--d8);
}
.digits b[data-d="9"] {
  --c: var(--d9);
}
.digits b .ck {
  position: absolute;
  right: -3px;
  top: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #22b04c;
  box-shadow: 0 0 0 1.5px #fff;
  transform: scale(0);
  transition: transform 0.3s var(--ease-spring);
}
.digits b .ck svg {
  width: 9px;
  height: 9px;
}
.digits b.done {
  background: color-mix(in srgb, #22b04c 12%, #ffffff);
  box-shadow: inset 0 0 0 1.5px #9fdcb2;
}
.digits b.done span {
  opacity: 0.45;
}
.digits b.done .ck {
  transform: scale(1);
}

.board-wrap {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--cell) * 0.2) 0 calc(var(--cell) * 2.2);
  scroll-behavior: smooth;
}
.board-wrap::-webkit-scrollbar {
  display: none;
}
.tray {
  position: relative;
  flex: none;
  will-change: transform;
  padding: calc(var(--cell) * 0.14);
  border-radius: calc(var(--cell) * 0.42);
  background: linear-gradient(180deg, #1d3f86e6, #142f6ae6);
  box-shadow:
    inset 0 0 0 2px #ffffff50,
    inset 0 3px 0 #ffffff30,
    0 0 0 3px #0b1d4a66,
    0 18px 40px #0008;
}
.board {
  position: relative;
  transition: height 0.38s var(--ease-out);
}
.board.nt {
  transition: none;
}
.slot {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  padding: calc(var(--cell) * var(--gap) / 2);
}
.slot::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: #0a1a42aa;
  box-shadow:
    inset 0 2px 0 #00000055,
    inset 0 -1px 0 #ffffff14;
}
.slot.future::before {
  background: #0a1a4244;
  box-shadow: inset 0 0 0 1.5px #ffffff18;
}

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  padding: calc(var(--cell) * var(--gap) / 2);
  transition: transform 0.32s var(--ease-spring);
}
.tile.nt {
  transition: none;
}
:root {
  --t-norm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23e6f1fc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='7' width='100' height='93' rx='24' fill='%2306123a' fill-opacity='.28'/%3E%3Crect width='100' height='95' rx='24' fill='%23bad3ee'/%3E%3Crect width='100' height='88' rx='24' fill='url%28%23g%29'/%3E%3Cpath d='M22 5.5H78' stroke='%23fff' stroke-opacity='.9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-sel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6fdff'/%3E%3Cstop offset='1' stop-color='%23d6f0ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='7' width='100' height='93' rx='24' fill='%2306123a' fill-opacity='.28'/%3E%3Crect width='100' height='95' rx='24' fill='%238ccbec'/%3E%3Crect width='100' height='88' rx='24' fill='url%28%23g%29'/%3E%3Cpath d='M22 5.5H78' stroke='%23fff' stroke-opacity='.9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-match: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ddf6ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='7' width='100' height='93' rx='24' fill='%2306123a' fill-opacity='.28'/%3E%3Crect width='100' height='95' rx='24' fill='%238ccbec'/%3E%3Crect width='100' height='88' rx='24' fill='url%28%23g%29'/%3E%3Cpath d='M22 5.5H78' stroke='%23fff' stroke-opacity='.9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-wild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4fbff'/%3E%3Cstop offset='1' stop-color='%23e2dcff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='7' width='100' height='93' rx='24' fill='%2306123a' fill-opacity='.28'/%3E%3Crect width='100' height='95' rx='24' fill='%23b9b0ee'/%3E%3Crect width='100' height='88' rx='24' fill='url%28%23g%29'/%3E%3Cpath d='M22 5.5H78' stroke='%23fff' stroke-opacity='.9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23eef7ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='7' width='100' height='93' rx='24' fill='%2306123a' fill-opacity='.28'/%3E%3Crect width='100' height='95' rx='24' fill='%23bad3ee'/%3E%3Crect width='100' height='88' rx='24' fill='url%28%23g%29'/%3E%3Cpath d='M22 5.5H78' stroke='%23fff' stroke-opacity='.9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --sel: #38c6f4;
  --hint: #ffbf2e;
  --err: #ff6b5e;
}
/* Tile states, one colour per meaning: cyan = your touch (selected / pair made), gold = Tenguin's hint, coral = not a pair.
   Faces are small baked pictures (body, bottom lip, one soft shadow, one highlight): cheap to draw on 100 tiles. */
.tile .face {
  position: relative;
  width: 100%;
  height: calc(100% + var(--cell) * 0.05);
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--t-norm) center / 100% 100% no-repeat;
  transition:
    transform 0.14s var(--ease-spring),
    box-shadow 0.15s,
    opacity 0.25s;
}
.tile .n {
  font: 600 calc(var(--cell) * 0.6) / 1 var(--font-num);
  margin-top: calc(var(--cell) * -0.09);
  position: relative;
  z-index: 1;
}
.tile[data-v="1"] .n {
  color: var(--d1);
}
.tile[data-v="2"] .n {
  color: var(--d2);
}
.tile[data-v="3"] .n {
  color: var(--d3);
}
.tile[data-v="4"] .n {
  color: var(--d4);
}
.tile[data-v="5"] .n {
  color: var(--d5);
}
.tile[data-v="6"] .n {
  color: var(--d6);
}
.tile[data-v="7"] .n {
  color: var(--d7);
}
.tile[data-v="8"] .n {
  color: var(--d8);
}
.tile[data-v="9"] .n {
  color: var(--d9);
}
.tile.wild .face {
  background-image: var(--t-wild);
  box-shadow: 0 0 calc(var(--cell) * 0.22) #8b6cff80;
}
.tile.wild .n {
  color: var(--violet);
}
.tile.wild .n svg {
  width: calc(var(--cell) * 0.6);
  height: calc(var(--cell) * 0.6);
  display: block;
}
.tile .fishb {
  position: absolute;
  right: 7%;
  bottom: 18%;
  width: 32%;
  height: 22%;
  z-index: 2;
  color: var(--coral);
  display: block;
}
.tile .fishb svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* selected: clear outline, small lift */
.tile.sel {
  z-index: 3;
}
.tile.sel .face {
  transform: translateY(calc(var(--cell) * -0.06)) scale(1.04);
  background-image: var(--t-sel);
  box-shadow:
    0 0 0 calc(var(--cell) * 0.055) var(--sel),
    0 calc(var(--cell) * 0.12) calc(var(--cell) * 0.2) #06123a55;
}
/* hint (Tenguin suggests): gold ring that breathes */
.tile.hint .face::after {
  content: "";
  position: absolute;
  inset: calc(var(--cell) * -0.045);
  border-radius: 28%;
  pointer-events: none;
  box-shadow:
    0 0 0 calc(var(--cell) * 0.055) var(--hint),
    0 0 calc(var(--cell) * 0.3) #ffbf2e99;
  animation: hintGlow 0.9s ease-in-out infinite alternate;
}
.tile.hint .face {
  animation: hintPulse 0.9s ease-in-out infinite alternate;
}
@keyframes hintPulse {
  to {
    transform: scale(1.05);
  }
}
@keyframes hintGlow {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
/* not a pair: a short shake and a coral flash, nothing more */
.tile.nope .face {
  animation: nope 0.3s ease-in-out;
  box-shadow: 0 0 0 calc(var(--cell) * 0.05) var(--err);
}
@keyframes nope {
  20% {
    translate: -7% 0;
  }
  45% {
    translate: 6% 0;
  }
  70% {
    translate: -3% 0;
  }
}
/* removed: a flat dent in the ice that keeps the board's memory but never looks tappable */
.tile.ghost {
  pointer-events: none;
  transition:
    transform 0.32s var(--ease-spring),
    opacity 0.6s;
}
.board.final .tile.ghost,
.board.final .slot {
  opacity: 0.35;
  transition: opacity 0.6s;
}
.tile.ghost .face {
  animation: none;
  height: 100%;
  background: #10276080;
  box-shadow:
    inset 0 1px 0 #0000004d,
    inset 0 0 0 1px #ffffff12;
}
.tile.ghost .face::after {
  display: none;
}
.tile.ghost .n {
  color: #ffffff2b;
  margin-top: calc(var(--cell) * -0.04);
}
.tile.ghost .fishb {
  display: none;
}
/* pair made: both tiles light up cyan-white for a beat, then crack */
.tile.match .face {
  height: calc(100% + var(--cell) * 0.05);
  background: var(--t-match) center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 calc(var(--cell) * 0.055) var(--sel),
    0 0 calc(var(--cell) * 0.4) #38c6f4aa;
}
.tile.match .n {
  margin-top: calc(var(--cell) * -0.09);
}
.board.cascading .tile:not(.burst) {
  transition-delay: 0.2s;
  transition-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
}
.tile.burst .face {
  background: #e9f7ff;
  box-shadow:
    0 0 0 calc(var(--cell) * 0.04) #fff,
    0 0 calc(var(--cell) * 0.45) #bff0ff;
}
.tile.burst .n {
  color: #3d74bd;
}
.tile.copy .face {
  background-image: var(--t-copy);
  box-shadow:
    0 0 0 2px #ffffffcc,
    0 0 12px #b9e6ff;
}
.board.pick .tile:not(.ghost) .face {
  animation: pickWobble 1.4s ease-in-out infinite;
}
@keyframes pickWobble {
  50% {
    transform: rotate(2deg) scale(0.98);
  }
}
.wrapmark {
  position: absolute;
  width: calc(var(--cell) * 0.13);
  height: calc(var(--cell) * 0.13);
  color: #ffffff77;
  pointer-events: none;
}
.linkline {
  position: absolute;
  height: calc(var(--cell) * 0.14);
  border-radius: 99px;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(90deg, #ffffff, #c8f3ff, #ffffff);
  box-shadow:
    0 0 10px #8fe6ff,
    0 0 22px #4fd8ff,
    0 0 2px #fff;
}

/* tutorial: spotlight on the pair to play, the pointing hand, the Snowfall button when it is its turn */
.board.tutfocus .tile:not(.focus):not(.ghost) {
  opacity: 0.6;
  filter: saturate(0.45);
  transition:
    opacity 0.3s,
    filter 0.3s;
}
.board.tutfocus .tile.focus {
  z-index: 3;
}
.tutHand {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  will-change: translate, scale;
  transform-origin: 43% 6%;
  rotate: -24deg;
}
.tutHand[hidden] {
  display: none;
}
.boosts.tutlock .boost:not(.tutfocus) {
  opacity: 0.4;
  filter: saturate(0.3);
}
.boost.tutfocus .disc {
  animation: urge 1.1s ease-in-out infinite;
}
.boost.tutfocus .disc::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid #ffd166;
  pointer-events: none;
}

/* Tenguin's dock: at the foot of the board, with his speech bubble */
.dock {
  --bs: clamp(76px, 11vw, 116px);
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  padding: 0 max(10px, env(safe-area-inset-right)) 2px
    max(8px, env(safe-area-inset-left));
  min-width: 0;
}
.dock .buddy-wrap {
  position: relative;
  flex: none;
  width: var(--bs, 76px);
}
.dock .buddy-wrap .tg {
  --ts: var(--bs, 76px);
  position: relative;
  z-index: 1;
}
.dock .buddy-wrap .floe-mini {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -8%;
  height: 30%;
  z-index: 0;
}
.dock .buddy-wrap .tg-hit {
  inset: 0;
}
.bubble {
  position: relative;
  margin-left: 12px;
  margin-bottom: calc(var(--bs, 76px) * 0.42);
  max-width: min(330px, calc(100% - var(--bs, 76px) - 10px));
  padding: 10px 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: 800 0.98rem/1.25 var(--font-ui);
  box-shadow:
    0 0 0 2px #cfe5fb,
    0 8px 20px #0006;
  pointer-events: auto;
  transform-origin: 0 100%;
  transition:
    opacity 0.2s,
    transform 0.3s var(--ease-spring);
}
.bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 12px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: -2px 2px 0 #cfe5fb;
}
.bubble[hidden] {
  display: block;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}
.bubble .txt {
  position: relative;
}
.bubble .txt b {
  color: var(--blue);
}
.bubble .acts {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bubble .acts:empty {
  display: none;
}
.bubble .acts .btn {
  min-height: 38px;
  font-size: 1rem;
  padding: 0 1em;
}
.tg-hit {
  position: absolute;
  pointer-events: auto;
  border-radius: 40%;
}

/* boosters */
/* booster bar: five equal columns, fixed spots for the count (top right) and the tag (price / free / lock, bottom centre) */
.boosts {
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  padding: 4px max(8px, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom, 0px) + 10px)
    max(8px, env(safe-area-inset-left));
}
.boost {
  position: relative;
  width: 100%;
  max-width: 80px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  font: 800 0.78rem/1 var(--font-logo);
  color: #fff;
  text-shadow:
    0 1px 0 #0b1838,
    0 0 4px #0b1838;
  -webkit-tap-highlight-color: transparent;
}
.boost .lbl {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boost .disc {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3d8bec, #2569cf);
  box-shadow:
    inset 0 0 0 2.5px #ffffffc8,
    inset 0 -4px 0 #1a4fa8,
    0 3px 0 #0f2f6e,
    0 6px 12px #0005;
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.12s;
}
.boost .disc > svg {
  width: 32px;
  height: 32px;
  position: relative;
  filter: drop-shadow(0 1px 0 #0003);
}
.boost:active .disc {
  transform: translateY(2px) scale(0.95);
  transition-duration: 0.05s;
  box-shadow:
    inset 0 0 0 2.5px #ffffffc8,
    inset 0 -3px 0 #1a4fa8,
    0 1px 0 #0f2f6e,
    0 3px 6px #0005;
}
.boost.on .disc {
  box-shadow:
    inset 0 0 0 2.5px #fff,
    inset 0 -4px 0 #1a4fa8,
    0 3px 0 #0f2f6e,
    0 0 0 3px var(--sel),
    0 0 16px #38c6f4aa;
}
.boost .badge {
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  font-size: 0.74rem;
}
.boost .tag {
  position: absolute;
  left: 50%;
  bottom: -7px;
  translate: -50% 0;
  z-index: 2;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 800 0.66rem/1 var(--font-ui);
  white-space: nowrap;
  text-shadow: none;
  box-shadow:
    0 0 0 1.5px #fff,
    0 1px 3px #0004;
}
.boost .tag:empty {
  display: none;
}
.boost .tag .coin {
  width: 13px;
  height: 13px;
}
.boost .tag svg {
  width: 11px;
  height: 11px;
}
.boost .tag.price {
  background: linear-gradient(180deg, #ffe27a, #ffb21e);
  color: #6b3a00;
}
.boost .tag.free {
  background: #15803d;
  color: #fff;
}
.boost .tag.lock {
  background: #13285a;
  color: #c3d6f5;
  box-shadow: 0 0 0 1.5px #ffffff66;
}
.boost.add {
  max-width: 88px;
}
.boost.add .disc {
  width: 68px;
  height: 68px;
  margin-top: -10px;
  background: linear-gradient(180deg, #f4f9ff, #cfe2f6);
  box-shadow:
    inset 0 0 0 2.5px #fff,
    inset 0 -5px 0 #8db3df,
    0 4px 0 #3e6fb8,
    0 8px 16px #0006;
}
.boost.add:active .disc {
  box-shadow:
    inset 0 0 0 2.5px #fff,
    inset 0 -4px 0 #8db3df,
    0 1px 0 #3e6fb8,
    0 4px 8px #0006;
}
.boost.add .disc > svg {
  width: 46px;
  height: 46px;
}
.boost.add .badge {
  top: -2px;
  right: -2px;
}
.boost.add.urge .disc {
  animation: urge 1.1s ease-in-out infinite;
}
@keyframes urge {
  50% {
    transform: scale(1.07);
  }
}
.boost.add.urge .disc::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 5px #ffffff55,
    0 0 26px #fff;
  animation: urgeGlow 1.1s ease-in-out infinite;
}
@keyframes urgeGlow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.boost.add.empty .disc {
  filter: saturate(0.3) brightness(0.85);
}
/* locked: an empty socket in the ice, the tool faintly visible inside, and the level it opens at */
.boost.locked .disc {
  background: radial-gradient(circle at 50% 35%, #2b4277, #1b2d5c);
  box-shadow:
    inset 0 3px 6px #0007,
    inset 0 0 0 2px #ffffff26,
    0 2px 0 #0b1838aa;
}
.boost.locked .disc > svg {
  filter: grayscale(1) brightness(1.4);
  opacity: 0.3;
}
.boost.locked .lbl {
  opacity: 0.65;
}
.boost[aria-disabled="true"]:not(.locked) .disc {
  filter: saturate(0.4) brightness(0.9);
}
.boost[aria-disabled="true"]:not(.locked) .lbl {
  opacity: 0.6;
}
.boost.big-ic {
  width: auto;
}
.boost.big-ic .disc {
  width: 84px;
  height: 84px;
}
.boost.big-ic .disc > svg {
  width: 50px;
  height: 50px;
}

/* transient feedback */
.toast {
  position: absolute;
  left: 50%;
  top: 18%;
  translate: -50% 0;
  z-index: 70;
  padding: 10px 18px;
  border-radius: 999px;
  max-width: calc(100% - 32px);
  text-align: center;
  background: linear-gradient(180deg, #0c1c44f2, #16306af2);
  box-shadow:
    inset 0 0 0 2px #ffffff30,
    0 8px 20px #0007;
  font: 800 1rem/1.2 var(--font-ui);
  pointer-events: none;
}
.banner {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 36;
  translate: -50% -50%;
  font-size: clamp(2.4rem, 11vw, 4rem);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}
.banner .sub2 {
  font-size: 0.5em;
}
.banner .fx-text {
  -webkit-text-stroke-width: 0.24em;
}
.float {
  position: absolute;
  z-index: 20;
  font: 800 calc(var(--cell) * 0.5) var(--font-logo);
  color: #fff;
  -webkit-text-stroke: 3px #17306a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #17306a;
  pointer-events: none;
  white-space: nowrap;
}
.float.big {
  color: var(--gold);
  font-size: calc(var(--cell) * 0.62);
  -webkit-text-stroke-color: #6b2a00;
  text-shadow: 0 2px 0 #6b2a00;
}
.coin.fly {
  position: fixed;
  z-index: 60;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

/* ---------- modals: light ice cards with a blue header and a red close button ---------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px
    calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: #030a1ecc;
}
.modal[hidden] {
  display: none;
}
/* card: one border, one lip, one shadow */
.card {
  position: relative;
  width: min(400px, 100%);
  max-height: 100%;
  overflow: auto;
  scrollbar-width: none;
  padding: 0 0 18px;
  border-radius: 26px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(180deg, #f8fcff, #e3f0fd);
  box-shadow:
    inset 0 0 0 2px #ffffffd0,
    inset 0 -4px 0 #c3dbf3,
    0 16px 36px #0007;
}
.card::-webkit-scrollbar {
  display: none;
}
.card .head {
  position: relative;
  margin: 0 0 14px;
  padding: 13px 52px 12px;
  border-radius: 26px 26px 14px 14px;
  background: linear-gradient(180deg, #2f7fe6, #2265c9);
  box-shadow: inset 0 -3px 0 #1a52a8;
}
.card .head h2 {
  margin: 0;
  font: 800 clamp(1.35rem, 6vw, 1.6rem)/1.15 var(--font-logo);
  color: #fff;
  text-shadow: 0 1px 0 #164a9a;
  letter-spacing: 0.01em;
}
.card .xbtn {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
}
.card .btn.ghost {
  --a: #f2f7fd;
  --b: #dfeaf7;
  --lip: #a9c1de;
  --fg: var(--ink);
  --ts: none;
  box-shadow:
    inset 0 0 0 1px #d0deee,
    0 3px 0 var(--lip);
}
.card .bd {
  padding: 0 16px;
}
.card h3 {
  margin: 8px 0 4px;
  font: 800 1.3rem/1.15 var(--font-logo);
  color: var(--ink);
}
.card p {
  color: var(--ink-2);
  font-weight: 800;
  margin: 4px 0 12px;
  line-height: 1.35;
}
.card .row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.card .col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}
.card .inset {
  border-radius: 16px;
  background: #ffffffb3;
  box-shadow: inset 0 0 0 1px #d6e6f6;
}
.card .stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin: 8px 0 0;
  font-weight: 800;
}
.card .stat b {
  font: 600 1.25rem/1 var(--font-num);
}
/* settings: grouped lists, rows separated by hairlines (not a stack of big buttons) */
.card .groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.card .group small {
  display: block;
  margin: 0 0 6px 6px;
  font: 800 0.68rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card .list {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #ffffffb3;
  box-shadow: inset 0 0 0 1px #d6e6f6;
  overflow: hidden;
}
.card .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px 6px 14px;
  font-weight: 800;
}
.card .list .opt + .opt {
  box-shadow: inset 0 1px 0 #dbe8f5;
}
.switch {
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: #c3d2e6;
  box-shadow: inset 0 1px 3px #0003;
  position: relative;
  transition: background 0.2s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0004;
  transition: transform 0.22s var(--ease-spring);
}
.switch[aria-checked="true"] {
  background: #15803d;
}
.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
.langs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: #dbe7f5;
}
.langs button {
  min-width: 40px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--ink);
  font-weight: 800;
  transition: background 0.2s;
}
.langs button[aria-pressed="true"] {
  background: #fff;
  color: #1d63c4;
  box-shadow: 0 1px 3px #0002;
}
.mtg {
  display: flex;
  justify-content: center;
  margin: 2px 0 0;
}

/* level complete: stars one by one, then the reward, then the buttons */
.card.win {
  overflow: visible;
  padding-top: 0;
  margin-top: 36px;
}
.card.win .rays {
  position: absolute;
  left: 50%;
  top: -24px;
  width: 480px;
  height: 480px;
  translate: -50% -50%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    #fff6c240 0deg 9deg,
    transparent 9deg 22deg
  );
  mask: radial-gradient(circle, #000 20%, transparent 66%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 66%);
  animation: spin 18s linear infinite;
  will-change: rotate;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
.card.win .stars {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  margin: -42px 0 0;
  height: 90px;
}
.card.win .stars span {
  width: 70px;
  height: 70px;
  display: block;
}
.card.win .stars span:nth-child(2) {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
}
.card.win .stars span svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 0 #0002);
}
.card.win .stars span:not(.won) svg {
  filter: none;
  opacity: 0.85;
}
.ribbon {
  position: relative;
  margin: 4px -8px 2px;
  padding: 9px 18px 11px;
  border-radius: 14px;
  font-size: clamp(1.5rem, 7vw, 2rem);
  z-index: 2;
  background: linear-gradient(180deg, #ff7468, #e2463e);
  box-shadow:
    inset 0 -4px 0 #b02f2c,
    0 5px 12px #0004;
}
.ribbon .fx-text {
  font-size: 1em;
  -webkit-text-stroke-width: 0.12em;
  text-shadow: 0 0.05em 0 #0a2a6a;
}
.reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 16px 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff9e3, #ffecb3);
  box-shadow:
    inset 0 0 0 1px #ffe08a,
    inset 0 -3px 0 #f2cd73;
}
.reward small {
  display: block;
  font: 800 0.7rem/1 var(--font-ui);
  color: #9a5a00;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.reward .amt {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 800 1.9rem/1 var(--font-logo);
  color: #7a3e00;
}
.reward .pile {
  width: 70px;
  height: 54px;
  position: relative;
  flex: none;
}
.reward .pile .coin {
  position: absolute;
  width: 34px;
  height: 34px;
}
.win-best {
  color: #d9800a;
  font: 800 1rem/1 var(--font-logo);
  margin: 8px 0 0;
}
.card.win .col {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s,
    transform 0.35s var(--ease-spring);
}
.card.win.ready .col {
  opacity: 1;
  transform: none;
}

/* daily calendar */
.cal-month {
  font: 800 1.05rem/1 var(--font-logo);
  color: var(--ink);
  margin: 0 0 8px;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal i {
  font-style: normal;
  color: var(--ink-2);
  font-weight: 900;
  font-size: 0.72rem;
  text-transform: uppercase;
  padding-bottom: 2px;
}
.cday {
  aspect-ratio: 1;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #ffffffc0;
  box-shadow: inset 0 0 0 1px #d6e6f6;
  transition: transform 0.2s var(--ease-spring);
}
.cday:active:not([disabled]) {
  transform: scale(0.94);
}
.cday b {
  font: 600 1rem/1 var(--font-num);
}
.cday svg {
  width: 78%;
  height: 78%;
}
.cday.won {
  background: #fff3cf;
  box-shadow: inset 0 0 0 1px #ffd978;
}
.cday.today {
  background: #1f6ad0;
  color: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #ffc23d;
}
.cday.today.won {
  background: #fff3cf;
}
.cday.sel {
  box-shadow: inset 0 0 0 2px var(--blue);
}
.cday.fut {
  opacity: 0.45;
  cursor: default;
  background: #ffffff66;
  box-shadow: none;
}
.trophy {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 10px 12px;
  margin: 12px 0 0;
}
.trophy .ti {
  width: 42px;
  height: 42px;
  flex: none;
  filter: grayscale(0.85) brightness(1.1);
  opacity: 0.75;
}
.trophy.won .ti {
  filter: none;
  opacity: 1;
}
.trophy .tb {
  flex: 1;
  min-width: 0;
}
.trophy .tb b {
  display: flex;
  justify-content: space-between;
  font: 800 1rem/1.1 var(--font-logo);
  color: var(--ink);
}
.trophy .tb small {
  display: block;
  color: var(--ink-2);
  font-weight: 800;
  font-size: 0.76rem;
  margin-top: 4px;
}
.pbar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #d3e3f4;
  overflow: hidden;
  margin-top: 6px;
}
.pbar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #ffcb47, #ffa21e);
}

/* daily gift: past (ticked), today (the prize, lifted), future (quiet) */
.gifts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 4px;
}
.gday {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 8px 4px;
  border-radius: 14px;
  background: #ffffffc0;
  box-shadow: inset 0 0 0 1px #d6e6f6;
  transition: transform 0.3s var(--ease-spring);
}
.gday small {
  color: var(--ink-2);
  font: 800 0.7rem/1 var(--font-ui);
  letter-spacing: 0.03em;
}
.gday .gw {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  font: 800 1rem/1 var(--font-logo);
  color: var(--ink);
}
.gday .gw svg {
  width: 24px;
  height: 24px;
}
.gday .gw .coin {
  width: 22px;
  height: 22px;
}
.gday.got {
  background: #eef4fb;
  box-shadow: none;
}
.gday.got .gw,
.gday.got small {
  opacity: 0.45;
}
.gday.got::after {
  content: "✓";
  position: absolute;
  right: -4px;
  top: -4px;
  box-shadow: 0 0 0 2px #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 900 11px/1 var(--font-ui);
  background: #26b350;
}
.gday.now {
  background: linear-gradient(180deg, #fff9e3, #ffe9a6);
  box-shadow:
    inset 0 0 0 2px #ffc23d,
    0 4px 12px #ffb21e55;
  transform: translateY(-3px);
}
.gday.now small {
  color: #9a5a00;
}
.gday.fut {
  opacity: 0.7;
}
.gday.big {
  grid-column: span 2;
}
.gday.pop {
  animation: gpop 0.5s var(--ease-spring);
}
@keyframes gpop {
  30% {
    transform: scale(1.12);
  }
}

/* how to play: each page plays its move on a loop (select, select, light, crack) */
.howto .pg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.howto .say {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
}
.howto .say .tg {
  --ts: 84px;
  flex: none;
}
.howto .say .bubble {
  position: relative;
  margin-left: 4px;
  margin-bottom: 40px;
  max-width: none;
  flex: 1;
  text-align: left;
  font-size: 1rem;
  pointer-events: none;
}
.howto .step {
  font: 800 0.72rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-top: 10px;
}
.mini {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1d3f86, #142f6a);
  box-shadow:
    inset 0 0 0 1.5px #ffffff40,
    0 4px 10px #0003;
}
.mini .mt {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font: 600 1.55rem/1 var(--font-num);
  background: var(--t-norm) center / 100% 100% no-repeat;
  padding-bottom: 4px;
}
.mini .mt.e {
  background: #10276080;
  box-shadow: inset 0 1px 0 #0000004d;
}
.mini .mt.pa,
.mini .mt.pb {
  animation: 3s ease-in-out infinite both;
}
.mini .mt.pa {
  animation-name: miniA;
}
.mini .mt.pb {
  animation-name: miniB;
}
@keyframes miniA {
  0%,
  12% {
    transform: none;
    box-shadow: none;
  }
  16%,
  54% {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
      0 0 0 3px var(--sel),
      0 6px 10px #0004;
  }
  60% {
    transform: scale(1.14);
    box-shadow:
      0 0 0 3px #fff,
      0 0 18px #9fe6ff;
    opacity: 1;
  }
  70%,
  92% {
    transform: scale(0.9);
    opacity: 0.25;
    box-shadow: none;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes miniB {
  0%,
  34% {
    transform: none;
    box-shadow: none;
  }
  38%,
  54% {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
      0 0 0 3px var(--sel),
      0 6px 10px #0004;
  }
  60% {
    transform: scale(1.14);
    box-shadow:
      0 0 0 3px #fff,
      0 0 18px #9fe6ff;
    opacity: 1;
  }
  70%,
  92% {
    transform: scale(0.9);
    opacity: 0.25;
    box-shadow: none;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.mini svg.ln {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.mini svg.ln path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #4fd8ff);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: miniLine 3s ease-in-out infinite;
}
@keyframes miniLine {
  0%,
  40% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  54% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  64%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.mini .eq {
  position: absolute;
  right: -12px;
  top: -14px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 800 0.95rem/1 var(--font-logo);
  box-shadow: 0 3px 8px #0003;
  rotate: 4deg;
}
.mini .eq b {
  color: #22a84a;
}
.mini-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mini-wrap .boost {
  pointer-events: none;
  width: auto;
  min-height: 0;
}
.mini-wrap .boost .disc {
  width: 62px;
  height: 62px;
  margin: 0;
  animation: urge 1.5s ease-in-out infinite;
}
.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 0;
}
.dots i {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c3d2e6;
  transition:
    width 0.25s var(--ease-out),
    background 0.25s;
}
.dots i.on {
  background: var(--blue);
  width: 22px;
}

/* calm mode: shorter, softer motion */
body.calm .tile {
  transition-duration: 0.18s;
}
body.calm .card.win .rays,
body.calm .chapter .pip.cur,
body.calm .gday.now {
  animation: none;
}

/* short screens: compact level-complete card */
@media (max-height: 720px) {
  .card.win .mtg {
    display: none;
  }
  .card.win .stars {
    height: 76px;
    margin-top: -36px;
  }
  .card.win .stars span {
    width: 58px;
    height: 58px;
  }
  .card.win .stars span:nth-child(2) {
    width: 76px;
    height: 76px;
  }
  .reward {
    padding: 6px 12px;
  }
  .card.win .btn.big {
    min-height: 56px;
    font-size: 1.4rem;
  }
}
/* short phones: tighter home and HUD */
@media (max-height: 700px) and (max-aspect-ratio: 5/4) {
  #home .actions {
    gap: 9px;
  }
  #home .actions .btn.big {
    min-height: 64px;
    font-size: 1.7rem;
  }
  #home .dailyb {
    min-height: 50px;
  }
  .tilebtn .sq {
    max-height: 56px;
  }
  .goal {
    padding: 6px 8px 8px;
    gap: 4px;
  }
  .boost .disc {
    width: 50px;
    height: 50px;
  }
  .boost .disc svg {
    width: 30px;
    height: 30px;
  }
  .boost.add .disc {
    width: 64px;
    height: 64px;
  }
  .boost.add .disc svg {
    width: 42px;
    height: 42px;
  }
  .dock {
    --bs: 58px;
  }
  .dock .bubble {
    padding: 7px 12px;
    font-size: 0.86rem;
    line-height: 1.2;
  }
  .dock .bubble .acts {
    margin-top: 4px;
  }
  .dock .bubble .acts .btn {
    min-height: 32px;
    font-size: 0.9rem;
  }
  .boosts {
    padding-top: 2px;
  }
  .boost {
    gap: 11px;
    min-height: 58px;
  }
  /* home: logo and Tenguin shrink with the height so nothing overlaps */
  .logo .l1 {
    font-size: clamp(2.5rem, 9.5vh, 4rem);
  }
  .logo .l2 {
    font-size: clamp(1rem, 3.4vh, 1.5rem);
  }
  #home .stage .tg {
    --ts: clamp(84px, 20vh, 150px);
  }
  #home .stage .floe {
    width: calc(clamp(84px, 20vh, 150px) * 1.7);
  }
  #home .stage {
    margin-top: 2px;
  }
  .chapter {
    padding: 6px 12px;
    gap: 8px;
    font-size: 0.82rem;
  }
}
/* landscape phones and short desktop windows: home in two columns */
@media (min-aspect-ratio: 5/4) and (max-height: 620px) {
  #home {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 24px;
  }
  #home .top {
    grid-column: 1 / -1;
  }
  #home .hero {
    grid-column: 1;
    grid-row: 2;
  }
  #home .actions {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
  #home .stage .tg {
    --ts: clamp(90px, 30vh, 170px);
  }
  #home .stage .floe {
    width: calc(clamp(90px, 30vh, 170px) * 1.7);
  }
  .logo .l1 {
    font-size: clamp(2.6rem, 13vh, 4.4rem);
  }
}

/* ranking */
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: #dbe7f5;
  margin: 0 0 10px;
}
.seg button {
  height: 38px;
  border-radius: 10px;
  font: 800 1rem/1 var(--font-logo);
  color: #2c4f8f;
}
.seg button[aria-pressed="true"] {
  background: #fff;
  color: #1d63c4;
  box-shadow: 0 1px 3px #0002;
}
ol.rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card.rankc .bd > ol.rank {
  max-height: min(44vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
ol.rank li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px 0 6px;
  border-radius: 12px;
  background: #f2f7fd;
  font: 700 0.98rem/1.1 var(--font-ui);
  color: var(--ink);
}
ol.rank li .rk {
  text-align: center;
  font: 800 0.95rem/1 var(--font-logo);
  color: #4a6389;
}
ol.rank li .rk i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-style: normal;
  color: #4a2300;
  background: #ffd166;
  box-shadow: inset 0 -2px 0 #e0a21c;
}
ol.rank li.top2 .rk i {
  background: #dfe8f3;
  color: #2c3e5c;
  box-shadow: inset 0 -2px 0 #a9bdd6;
}
ol.rank li.top3 .rk i {
  background: #f2b48a;
  color: #4a2300;
  box-shadow: inset 0 -2px 0 #c9773d;
}
ol.rank li .nm {
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
ol.rank li .nm em {
  font-style: normal;
  margin-right: 6px;
}
ol.rank li .sc {
  font: 800 1rem/1 var(--font-logo);
  color: #1d63c4;
}
ol.rank li.me {
  background: #fff4d1;
  box-shadow: inset 0 0 0 2px #ffc23d;
}
ol.rank li.me .nm b {
  color: #7a3e00;
}
.rank-me {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.rank-me p {
  margin: 4px 0;
  text-align: center;
  color: var(--ink-2);
  font-weight: 700;
}
.namebtn {
  align-self: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eef4fb;
  color: #1d63c4;
  font: 800 0.9rem/1 var(--font-ui);
  box-shadow: inset 0 0 0 1.5px #d0deee;
}
.nameform {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nameform input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 2px solid #c6d7ec;
  font: 700 1rem/1 var(--font-ui);
  color: var(--ink);
  background: #fff;
}
.nameform input:focus {
  outline: none;
  border-color: #2f7fe6;
}
.rank-note {
  margin: 8px 0 0;
  text-align: center;
  font: 600 0.78rem/1.3 var(--font-ui);
  color: var(--ink-2);
  opacity: 0.8;
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stats .sc {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f2f7fd;
  box-shadow: inset 0 0 0 1px #dde8f5;
  min-width: 0;
}
.stats .sc b {
  font: 800 1.35rem/1 var(--font-logo);
  color: #1d63c4;
}
.stats .sc small {
  font: 700 0.78rem/1.2 var(--font-ui);
  color: var(--ink-2);
}
.stats .sc.big {
  background: #fff4d1;
  box-shadow: inset 0 0 0 1.5px #ffd166;
}
.stats .sc.big b {
  color: #7a3e00;
  font-size: 1.7rem;
}
.stats .sc:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* rewarded videos */
.btn > svg {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}
.offer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin: 4px 0 0;
}
.offer .boost {
  width: auto;
}
.offer .disc {
  width: 70px;
  height: 70px;
}
.offer .disc > svg {
  width: 42px;
  height: 42px;
}
.card .reward {
  position: relative;
}
.dblbtn {
  flex: none;
  min-height: 40px;
  padding: 0 0.9em;
  font-size: 1.05rem;
}
.dbl-ok {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #15803d;
  font: 800 1.05rem/1 var(--font-logo);
}
.dbl-ok svg {
  width: 20px;
  height: 20px;
}
.adtest {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #050b1ee6;
}
.adbox {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
.adbox small {
  font: 800 0.8rem/1.3 var(--font-ui);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.adart {
  height: 150px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2f7fe6, #12895a);
  position: relative;
  overflow: hidden;
}
.adart i {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  opacity: 0.9;
  animation: adBob 1.6s ease-in-out infinite;
}
.adart i:nth-child(1) {
  left: 18%;
  top: 30%;
}
.adart i:nth-child(2) {
  left: 44%;
  top: 46%;
  animation-delay: 0.3s;
}
.adart i:nth-child(3) {
  left: 70%;
  top: 26%;
  animation-delay: 0.6s;
}
@keyframes adBob {
  50% {
    translate: 0 -12px;
  }
}
.adbar {
  height: 8px;
  border-radius: 4px;
  background: #dde8f5;
  overflow: hidden;
}
.adbar b {
  display: block;
  height: 100%;
  width: 0;
  background: #2f7fe6;
}

.adbox .btn.ghost {
  --a: #f2f7fd;
  --b: #dfeaf7;
  --lip: #a9c1de;
  --fg: var(--ink);
  --ts: none;
  box-shadow:
    inset 0 0 0 1px #d0deee,
    0 3px 0 var(--lip);
}

/* Background art is independent of layout, text and animated characters. */
#sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #b1cbee;
}
#sky picture,
#sky img {
  display: block;
  width: 100%;
  height: 100%;
}
#sky picture {
  position: absolute;
  inset: 0;
} /* two stack while an island change crossfades */
#sky img {
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
/* Snowlight Cove: the selected visual target, with text and game state kept live. */
:root {
  --ink: #0b2862;
  --ink-2: #245ca4;
  --d1: #225c9a;
  --d9: #102761;
  --d2: #096558;
  --d8: #09574f;
  --d3: #b81668;
  --d7: #691354;
  --d4: #4e2a83;
  --d6: #392773;
  --d5: #795035;
  --radius: 22%;
  --sel: #ffbf35;
  --row: 48px;
}
.game-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.coin .game-art {
  width: 100%;
  height: 100%;
}

#game {
  grid-template-columns: minmax(0, min(100%, 600px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-content: center;
  gap: 7px 0;
  padding: clamp(14px, 8.4dvh, 82px) max(0px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
}
.hud-shell {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  gap: 14px;
  padding: 0 5px;
  min-width: 0;
}
#game .topbar {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 112px;
  grid-template-areas: "menu lvl coins";
  gap: 14px;
  padding: 0;
}
#game .topbar > .rbtn {
  grid-area: menu;
  width: 54px;
  height: 54px;
}
#game .topbar > .lvlp {
  grid-area: lvl;
  justify-self: stretch;
  justify-content: center;
  height: 54px;
  padding: 0 12px;
  gap: 10px;
}
#game .topbar > .coins {
  grid-area: coins;
  height: 54px;
  padding: 0 12px 0 3px;
  font-family: var(--font-ui);
  font-size: 1.3rem;
}
#game .topbar .coin {
  width: 38px;
  height: 38px;
}
#game .lvlp .lvl {
  font: 800 1.1rem/1 var(--font-ui);
}
#game .lvlp .st3 i {
  width: 24px;
  height: 24px;
}
#game .goal {
  grid-row: auto;
  margin: 0;
  padding: 10px 16px;
  border-radius: 22px;
  min-height: 77px;
}
#game .goal .gh {
  flex-direction: row;
  gap: 18px;
  height: 100%;
}
#game .scorebox {
  flex: 0 0 38%;
  gap: 4px;
  border-right: 1px solid #8dbbdf;
}
#game .goal small {
  font: 800 0.75rem/1 var(--font-ui);
  letter-spacing: 0;
}
#game .scorebox .score {
  font: 800 1.65rem/1 var(--font-ui);
}
#game .embalo {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
}
#game .embalo .bar {
  height: 11px;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px #37639544;
}
#game .embalo .x {
  background: #577ea7;
  border: 1px solid #c1dcf0;
  box-shadow:
    inset 0 2px 1px #d0e7fa66,
    0 2px 2px #325a8633;
}
#game .digits {
  display: none;
}

#game .board-wrap {
  grid-column: 1;
  grid-row: 2;
  padding: 5px 0;
  height: min(35dvh, 440px);
  min-height: 0;
  justify-content: flex-start;
}
.tray {
  background: #103754;
  border: 2px solid #7db5d0;
  padding: calc(var(--cell) * 0.14);
  padding-top: calc(var(--cell) * 0.14 + 12px);
  border-radius: calc(var(--cell) * 0.48);
  box-shadow:
    inset 0 0 0 3px #254d70,
    0 0 0 2px #317394,
    0 4px 8px #16385966;
}
.slot,
.tile {
  height: var(--row);
}
.slot::before {
  background: #103256;
  box-shadow:
    inset 0 12px 20px #153c6344,
    inset 0 1px 3px #001d3e77,
    inset 0 0 0 1px #3b729766;
}
.slot.future::before {
  background: #103256;
  box-shadow:
    inset 0 12px 20px #153c6344,
    inset 0 1px 3px #001d3e77,
    inset 0 0 0 1px #3b729766;
}
.tile .face {
  background-color: #faf8ef;
  background-image: none;
  height: calc(100% - 2px);
  border-radius: 22%;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 #c2c9c9,
    0 3px 3px #00192f77;
}
.tile .n {
  font-size: calc(var(--cell) * 0.64);
  margin-top: -1px;
}
.tile.sel .face {
  background-image: none;
  background-color: #fffdf5;
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 0 #d6d6c9,
    0 0 0 2px #fff6b7,
    0 0 0 4px #efa52d,
    0 0 10px #fdb64799;
}
.tile.hint .face::after {
  border-radius: 25%;
  box-shadow:
    0 0 0 2px #fff6b7,
    0 0 0 4px #f3a321,
    0 0 12px #ffb42d;
}
body.calm .tile.hint .face::after,
body.calm .tile.hint .face {
  animation: none;
  opacity: 1;
}
.tile.match .face {
  background-color: #fffdf0;
  background-image: none;
}
.tile.wild .face {
  background-color: #eee6ff;
  background-image: none;
}
.tile.ghost .face {
  background: #102f51;
  box-shadow:
    inset 0 1px 3px #001d3e77,
    inset 0 0 0 1px #3b729766;
}
.board.tutfocus .tile:not(.focus):not(.ghost) {
  opacity: 0.88;
  filter: none;
}
.boosts.tutlock .boost:not(.tutfocus) {
  opacity: 0.82;
  filter: none;
}

#game .dock {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 430px;
  height: auto;
  padding: 0 14px 0 64px;
  margin: 0;
  --bs: clamp(86px, 17dvh, 160px);
  flex-direction: row;
  align-items: center;
  gap: 0;
  translate: 0 24px;
}
#game .dock .buddy-wrap {
  align-self: auto;
}
#game .dock .bubble {
  margin: 0 0 18px 10px;
  max-width: min(265px, calc(100% - var(--bs) - 12px));
  max-height: none;
  padding: 12px 14px;
  font-size: 1rem;
}
#game .dock .bubble::before {
  left: -8px;
  bottom: 12px;
}
.dock .buddy-wrap .floe-mini {
  left: -36%;
  right: -36%;
  bottom: -25%;
  height: 68%;
}
#home .stage .floe .game-art {
  width: 100%;
  height: 100%;
}
#home .stage .floe {
  position: absolute;
  top: 64%;
  left: 50%;
  translate: -50% 0;
  bottom: auto;
  height: 70%;
  margin: 0;
}
.logo .l1::before {
  display: none;
}

#game .boosts {
  grid-column: 1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  width: calc(100% - 4px);
  max-width: 600px;
  padding: 13px 8px 10px;
  gap: 3px;
  border-radius: 26px;
  color: var(--ink);
  background: #d2ecfd;
  border: 2px solid #f6fcff;
  box-shadow:
    inset 0 3px 3px #ffffff99,
    inset 0 -4px 0 #a8d5f1,
    0 3px 8px #29618755;
}
#game .boost {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 0;
  max-width: none;
  font: 800 0.8rem/1 var(--font-ui);
  color: var(--ink);
  text-shadow: none;
}
#game .boost .disc {
  width: clamp(44px, 14.2vw, 64px);
  height: clamp(44px, 14.2vw, 64px);
  margin: 0;
  background: #64bafa;
  box-shadow:
    inset 0 0 0 2px #bce6ff,
    inset 0 3px 2px #f5fdff,
    inset 0 -4px 0 #3299e5,
    0 0 0 2px #91cbed,
    0 3px 3px #4b9ad777;
}
#game .boost .disc > .game-art {
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #19528444);
}
#game .boost .badge {
  top: -8px;
  right: -5px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  background: #0b2b74;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #b5d9ef;
  font: 800 0.85rem/1 var(--font-ui);
}
#game .boost .tag {
  bottom: -5px;
  height: 16px;
  font-size: 0.58rem;
}
#game .boost .lbl {
  padding: 0 1px;
  line-height: 1.12;
  min-height: 14px;
}
#game .boost.locked .disc {
  background: #76b9e5;
  box-shadow:
    inset 0 0 0 2px #d0edff,
    inset 0 -4px 0 #5199ce,
    0 0 0 2px #a2cce7;
}
#game .boost.locked .game-art {
  filter: saturate(0.45);
  opacity: 0.72;
}
#game .boost.locked .lbl {
  opacity: 0.8;
}
#game .boost:active .disc {
  transform: translateY(2px) scale(0.95);
}
.modal {
  z-index: 50;
}
.tutHand {
  z-index: 35;
}

@media (min-width: 900px) {
  #game {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, min(64vw, 840px)) minmax(
        0,
        0.78fr
      );
    grid-template-rows: 64px minmax(0, 1fr) 126px;
    gap: 20px 0;
    padding: 10dvh 0 16dvh;
  }
  #game .hud-shell {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(74.3%, 980px);
    display: grid;
    grid-template-columns: 60px auto minmax(240px, 1fr) auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: #e3f3ff;
    border-radius: 32px;
    box-shadow:
      inset 0 0 0 2px #fff,
      inset 0 -4px 0 #b0d6ee,
      0 4px 8px #235c8c33;
  }
  #game .hud-shell {
    position: relative;
    left: 1.7vw;
  }
  #game .topbar {
    display: contents;
  }
  #game .topbar > .rbtn {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    align-self: center;
    justify-self: center;
  }
  #game .topbar > .lvlp {
    grid-area: auto;
    grid-column: 2;
    grid-row: 1;
    height: 64px;
    gap: 12px;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 0 20px;
  }
  #game .lvlp .lvl {
    font-size: 1.25rem;
  }
  #game .lvlp .st3 i {
    width: 26px;
    height: 26px;
  }
  #game .topbar > .coins {
    grid-area: auto;
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    height: 56px;
    margin-left: 18px;
    margin-right: -2px;
    padding-right: 18px;
    font-size: 1.35rem;
    box-shadow:
      inset 0 0 0 2px #b5d8f6,
      0 3px 4px #1f466b55;
  }
  #game .topbar .coin {
    width: 44px;
    height: 44px;
  }
  #game .goal {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    padding: 11px 18px 11px 12px;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #game .goal .gh {
    gap: 20px;
  }
  #game .scorebox {
    border-left: 1px solid #8dbbdf;
    padding-left: 18px;
    flex-basis: 36%;
  }
  #game .board-wrap {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    height: min(42dvh, 460px);
    padding: 5px 0;
  }
  #game .boosts {
    grid-column: 2;
    grid-row: 3;
    width: 92%;
    max-width: 760px;
    height: 126px;
    padding: 13px 20px 12px;
    border-radius: 32px;
    gap: 8px;
  }
  #game .boost {
    gap: 10px;
    font-size: 1rem;
  }
  #game .boost .disc {
    width: 74px;
    height: 74px;
  }
  #game .dock {
    position: relative;
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: end;
    justify-self: end;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0 5px;
    gap: 12px;
    max-width: 210px;
    --bs: clamp(120px, 15vw, 170px);
    translate: none;
  }
  #game .dock .bubble {
    position: absolute;
    left: calc(50% + 35px);
    bottom: calc(var(--bs) * 0.88);
    width: max-content;
    max-width: 245px;
    margin: 0;
    font-size: 1.12rem;
    padding: 13px 15px;
    z-index: 2;
  }
  #game .dock .bubble::before {
    left: 20px;
    bottom: -8px;
    box-shadow: 2px 2px 0 #cfe5fb;
  }
}

/* Short screens get their own composition, rather than losing playable board height. */
@media (max-height: 740px) and (max-aspect-ratio: 1/1) {
  #game {
    padding-top: 12px;
    gap: 9px;
  }
  .hud-shell {
    gap: 9px;
  }
  #game .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }
  #game .topbar > .rbtn {
    width: 44px;
    height: 44px;
  }
  #game .topbar > .lvlp,
  #game .topbar > .coins {
    height: 44px;
  }
  #game .topbar > .lvlp {
    gap: 6px;
    padding: 0 7px;
  }
  #game .lvlp .st3 i {
    width: 21px;
    height: 21px;
  }
  #game .lvlp .lvl {
    font-size: 1rem;
  }
  #game .goal {
    min-height: 60px;
    padding: 8px 13px;
  }
  #game .board-wrap {
    height: 38dvh;
  }
  #game .dock {
    --bs: clamp(78px, 16dvh, 110px);
    padding-left: 35px;
    translate: none;
  }
  #game .dock .bubble {
    font-size: 0.86rem;
    padding: 9px 11px;
    margin-bottom: 0;
  }
  #game .boosts {
    padding-top: 11px;
  }
  #game .boost .disc {
    width: 48px;
    height: 48px;
  }
  #game .boost {
    font-size: 0.71rem;
  }
}
@media (min-aspect-ratio: 1/1) and (max-height: 619px) {
  #game {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 62vw) minmax(4px, 0.2fr);
    grid-template-rows: 44px minmax(0, 1fr) 72px;
    gap: 9px 0;
    padding: 10px 10px 12px;
  }
  #game .hud-shell {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(96%, 850px);
    display: grid;
    grid-template-columns: 44px auto minmax(180px, 1fr) auto;
    gap: 0;
    padding: 0;
    background: #e3f3ff;
    border-radius: 24px;
  }
  #game .topbar {
    display: contents;
  }
  #game .topbar > .rbtn {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    align-self: center;
  }
  #game .topbar > .lvlp {
    grid-area: auto;
    grid-column: 2;
    grid-row: 1;
    height: 44px;
    padding: 0 8px;
    gap: 6px;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #game .lvlp .lvl {
    font-size: 0.9rem;
  }
  #game .lvlp .st3 i {
    width: 19px;
    height: 19px;
  }
  #game .topbar > .coins {
    grid-area: auto;
    grid-column: 4;
    grid-row: 1;
    height: 40px;
    align-self: center;
    font-size: 1rem;
  }
  #game .topbar .coin {
    width: 30px;
    height: 30px;
  }
  #game .goal {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    padding: 5px 12px;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #game .goal .gh {
    gap: 10px;
  }
  #game .goal small {
    font-size: 0.6rem;
  }
  #game .scorebox {
    flex-basis: 30%;
  }
  #game .scorebox .score {
    font-size: 1.1rem;
  }
  #game .embalo .x {
    min-width: 30px;
    height: 23px;
    font-size: 0.8rem;
  }
  #game .board-wrap {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    padding: 3px 0;
    justify-content: safe center;
  }
  #game .boosts {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: 72px;
    padding: 7px 10px 6px;
    border-radius: 23px;
  }
  #game .boost {
    gap: 5px;
    font-size: 0.67rem;
  }
  #game .boost .disc {
    width: 42px;
    height: 42px;
  }
  #game .boost .badge {
    min-width: 19px;
    height: 19px;
    font-size: 0.68rem;
    top: -6px;
  }
  #game .boost .tag {
    font-size: 0.52rem;
    height: 13px;
  }
  #game .dock {
    grid-column: 1;
    grid-row: 2 / 4;
    flex-direction: column-reverse;
    align-items: center;
    align-self: end;
    gap: 10px;
    padding: 0 12px 15px 0;
    --bs: clamp(74px, 25dvh, 120px);
    translate: none;
  }
  #game .dock .bubble {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: 100%;
    font-size: 0.72rem;
    padding: 8px;
    margin: 0;
  }
  #game .dock .bubble::before {
    left: 20px;
    bottom: -8px;
  }
}
/* Illustrated branding and celebration; labels, rewards and actions remain live. */
#home .logo {
  width: clamp(230px, 82vw, 400px);
  max-width: 100%;
  margin: 0;
  transform: none;
}
#home .logo .game-art {
  width: 100%;
  height: auto;
}
#home .hero {
  gap: 12px;
}
#home .dailyb .ic {
  width: 54px;
  height: 54px;
}
#home .dailyb {
  gap: 10px;
  min-height: 64px;
}
#home .tilebtn .sq {
  max-height: 82px;
  border-radius: 22px;
}
#home .tilebtn .sq > .game-art {
  width: 74px;
  height: 68px;
  max-width: 78%;
  max-height: 90%;
  filter: drop-shadow(0 3px 2px #17486b33);
}

.card.win {
  width: min(430px, 100%);
  padding: 0 18px 18px;
  margin-top: 44px;
  border: 2px solid #fff;
  background: #f0f9ff;
  border-radius: 32px;
  box-shadow:
    inset 0 -5px 0 #b5d8ed,
    0 18px 45px #071e4266;
}
.card.win .stars {
  height: 110px;
  margin: -42px -10px 0;
  gap: 0;
}
.card.win .stars span {
  width: 112px;
  height: 112px;
  flex: 0 1 112px;
  rotate: -10deg;
}
.card.win .stars span:nth-child(2) {
  width: 144px;
  height: 144px;
  flex-basis: 144px;
  margin-bottom: 8px;
  rotate: 0deg;
}
.card.win .stars span:nth-child(3) {
  rotate: 10deg;
}
.card.win .stars span {
  min-width: 0;
}
.card.win .stars .game-art {
  filter: grayscale(1) brightness(0.8);
  opacity: 0.28;
  transition:
    opacity 0.25s,
    filter 0.25s;
}
.card.win .stars .won .game-art {
  opacity: 1;
  filter: drop-shadow(0 4px 2px #a86a1738) drop-shadow(0 0 12px #ffd56966);
}
.card.win .win-title {
  margin: 6px 0 4px;
  color: #123c77;
  font: 800 clamp(1.4rem, 6vw, 1.8rem)/1.12 var(--font-ui);
  letter-spacing: -0.02em;
}
.card.win .mtg {
  margin: 5px 0 0;
}
.card.win .winT {
  --ts: 100px;
}
.card.win .reward {
  min-height: 100px;
  padding: 4px 16px;
  margin: 7px 0 12px;
  gap: 14px;
  background: #fff2c8;
  border: 1px solid #f3d283;
  border-radius: 23px;
  box-shadow:
    inset 0 2px 0 #fffaf0,
    inset 0 -3px 0 #efce82;
}
.card.win .reward-art {
  width: 138px;
  height: 94px;
  flex: 0 1 138px;
}
.card.win .reward small {
  font: 800 0.7rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  color: #a96c14;
}
.card.win .reward .amt {
  font: 800 2.4rem/1.1 var(--font-ui);
  color: #92500a;
}
.card.win > .bd {
  padding: 0;
}
.card.win .stat {
  min-height: 40px;
  background: #fff;
  border: 1px solid #d4e7f5;
  border-radius: 14px;
  box-shadow: none;
}
.card.win .win-best {
  margin: 6px 0 8px;
  font-size: 0.85rem;
  color: #bd7a15;
}
.card.win .col {
  gap: 10px;
}
.card.win .btn.big {
  min-height: 58px;
  font-size: 1.45rem;
}
.card.win .btn[data-act="home"] {
  min-height: 42px;
  background: #dceefa;
  color: #24548b;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 #a3c9e4;
  text-shadow: none;
}
@media (max-height: 740px) {
  .card.win {
    padding: 0 15px 15px;
    margin-top: 34px;
  }
  .card.win .stars {
    height: 82px;
    margin-top: -32px;
  }
  .card.win .stars span {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
  .card.win .stars span:nth-child(2) {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
    margin-bottom: 6px;
  }
  .card.win .mtg {
    display: flex;
    margin: 0;
  }
  .card.win .winT {
    --ts: 74px;
  }
  .card.win .reward {
    min-height: 82px;
    margin: 5px 0 8px;
  }
  .card.win .reward-art {
    width: 112px;
    height: 78px;
    flex-basis: 112px;
  }
  .card.win .reward .amt {
    font-size: 2rem;
  }
  .card.win .win-title {
    font-size: 1.35rem;
  }
  .card.win .btn.big {
    min-height: 50px;
    font-size: 1.25rem;
  }
  #home .dailyb {
    min-height: 54px;
  }
  #home .dailyb .ic {
    width: 44px;
    height: 44px;
  }
  #home .tilebtn .sq {
    max-height: 62px;
  }
  #home .tilebtn .sq > .game-art {
    width: 58px;
    height: 54px;
  }
}
@media (min-aspect-ratio: 5/4) and (max-height: 620px) {
  #home .logo {
    width: min(36vw, 340px);
  }
}
@media (max-width: 430px) {
  .card.win .stars span {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
  .card.win .stars span:nth-child(2) {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }
}
@media (max-aspect-ratio: 1/1) and (max-height: 620px) {
  #home .stage {
    padding-bottom: 28px;
    transform: translateY(-18px);
  }
  #home .stage .tg {
    --ts: 88px;
  }
  #home .stage .floe {
    top: 48%;
    width: 150px;
    height: 48px;
  }
}
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  .card.win {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: 36px 86px auto auto;
    gap: 6px 16px;
    width: min(620px, 100%);
    margin-top: 0;
    padding: 13px 16px;
  }
  .card.win .stars {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    height: 90px;
    margin: 0 -6px;
  }
  .card.win .stars span {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
  .card.win .stars span:nth-child(2) {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
  }
  .card.win .win-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 1.25rem;
  }
  .card.win .mtg {
    grid-column: 1;
    grid-row: 3 / 5;
    align-self: center;
    margin: 0;
  }
  .card.win .winT {
    --ts: 88px;
  }
  .card.win .reward {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: 86px;
    margin: 0;
    padding: 3px 8px;
  }
  .card.win .reward-art {
    width: 108px;
    height: 76px;
    flex-basis: 108px;
  }
  .card.win .win-summary {
    grid-column: 2;
    grid-row: 3;
  }
  .card.win .win-summary .stat {
    min-height: 34px;
  }
  .card.win .win-best {
    margin: 3px 0;
    font-size: 0.7rem;
  }
  .card.win .win-actions {
    grid-column: 2;
    grid-row: 4;
  }
  .card.win .col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .card.win .win-actions .btn {
    min-height: 44px;
    padding: 0 8px;
    font-size: 1rem;
  }
}
#home .home-shortcuts {
  display: flex;
  align-items: center;
  gap: 9px;
}
#home .home-shortcuts .rbtn {
  width: 48px;
  height: 48px;
}
#home .home-shortcuts .nav-art .game-art {
  width: 42px;
  height: 42px;
  max-width: none;
}
#home button.pill.coins {
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#home .tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#home .tiles .tilebtn {
  min-width: 0;
  font-size: 0.78rem;
}
/* Reserve the floe's real height so chapter progress stays below the stage. */
#home .logo {
  width: min(400px, 82vw, 36vh);
}
#home .stage {
  --home-mascot: clamp(74px, min(42vw, 16vh), 180px);
  padding-bottom: 24px;
  transform: none;
}
#home .stage .tg {
  --ts: var(--home-mascot);
  margin-bottom: 0;
}
#home .stage .floe {
  position: relative;
  top: auto;
  left: auto;
  translate: none;
  width: calc(var(--home-mascot) * 1.5);
  height: calc(var(--home-mascot) * 0.4);
  margin: calc(var(--home-mascot) * -0.22) 0 0;
}
.card.boutique {
  width: min(680px, 100%);
}
.buddy-floe {
  display: block;
  width: 100%;
  height: 100%;
}
.home-boutique-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.home-boutique-links button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  padding: 0 9px;
  border-radius: 18px;
  background: #e8f6ff;
  color: #184b87;
  box-shadow:
    inset 0 2px 0 #fff,
    0 4px 0 #9ccbea,
    0 4px 9px #174c8a33;
  font: 800 0.9rem/1.1 var(--font-ui);
}
.home-boutique-links .game-art {
  width: 44px;
  height: 44px;
  flex: none;
}
.card.boutique .head {
  margin-bottom: 12px;
}
.boutique-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 14px;
  margin-bottom: 16px;
}
.boutique-emblem {
  flex: 0 0 100px;
  height: 100px;
}
.boutique-intro p {
  max-width: 270px;
  margin: 0 0 8px;
  font-size: 1rem;
}
.boutique-balance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 8px;
  border-radius: 30px;
  background: #123565;
  color: #fff;
  font-size: 1.05rem;
}
.boutique-balance .game-art {
  width: 29px;
  height: 29px;
}
.boutique-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  background: #d4e9f8;
  border-radius: 17px;
  margin-bottom: 14px;
}
.boutique-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border-radius: 12px;
  color: #45668b;
  font: 800 0.9rem/1.1 var(--font-ui);
}
.boutique-tabs button[aria-selected="true"] {
  background: #fff;
  color: #123c77;
  box-shadow: 0 2px 5px #174d8a24;
}
.shop-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.shop-product {
  position: relative;
  background: #fff;
  border: 1px solid #c4dfef;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-product .product-art {
  width: 88px;
  height: 84px;
  max-width: 100%;
}
.card.boutique .shop-product h3 {
  font-size: 1rem;
  margin: 4px 0 0;
}
.product-quantity {
  font-size: 0.8rem;
  color: #6681a2;
  margin: 3px 0 8px;
}
.shop-product .btn {
  width: 100%;
  min-height: 36px;
  font-size: 0.9rem;
  gap: 5px;
}
.shop-product .btn .game-art {
  width: 20px;
  height: 20px;
}
.card.boutique button:disabled {
  opacity: 0.66;
  cursor: default;
}
.coin-product {
  background: #fffbeb;
  border-color: #f1dc9e;
}
.coin-product .product-art {
  height: 102px;
  width: 128px;
}
.card.boutique .boutique-note {
  margin: 14px 0 7px;
  font-size: 0.8rem;
  color: #6883a2;
}
.boutique-link {
  color: #2368ae;
  min-height: 36px;
  padding: 5px 8px;
  font: 800 0.9rem/1.2 var(--font-ui);
}
.closet-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 16px;
}
.closet-mirror {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 330px;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at 50% 40%,
    #fff 0%,
    #d5f3ff 48%,
    #8ec9f4 100%
  );
  overflow: hidden;
}
.closet-caption {
  position: absolute;
  top: 17px;
  color: #356490;
  font: 800 0.85rem/1.2 var(--font-ui);
}
.closet-mirror .tg {
  --ts: 164px;
  z-index: 1;
  margin-bottom: 12px;
}
.closet-floe {
  position: absolute;
  width: 230px;
  height: 100px;
  top: 53%;
}
.closet-current {
  position: absolute;
  bottom: 16px;
  padding: 5px 16px;
  border-radius: 20px;
  background: #ffffffb8;
  color: #24568b;
  font-size: 0.8rem;
}
.closet-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 14px;
}
.closet-catalog .boutique-tabs {
  gap: 0;
}
.closet-catalog .boutique-tabs button {
  padding: 6px 4px;
  font-size: 0.72rem;
}
.closet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed #a4cee8;
  border-radius: 22px;
  padding: 16px;
  background: #ffffff80;
}
.closet-empty-art {
  width: 95px;
  height: 95px;
}
.card.boutique .closet-empty p {
  max-width: 245px;
  margin: 8px 0 12px;
  font-size: 0.85rem;
  color: #6480a0;
}
.boutique-soon {
  padding: 5px 12px;
  border-radius: 20px;
  background: #dceefa;
  color: #4d7ca9;
  font-size: 0.75rem;
  font-weight: 800;
}
@media (max-width: 520px) {
  .closet-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .closet-mirror {
    min-height: 195px;
  }
  .closet-mirror .tg {
    --ts: 112px;
    margin: 9px 0 5px;
  }
  .closet-floe {
    width: 160px;
    height: 65px;
    top: 49%;
  }
  .closet-caption {
    top: 10px;
    font-size: 0.75rem;
  }
  .closet-current {
    bottom: 7px;
    font-size: 0.7rem;
  }
  .closet-empty {
    min-height: 165px;
    padding: 9px;
  }
  .closet-empty-art {
    width: 65px;
    height: 65px;
  }
  .closet-wallet {
    margin-bottom: 9px;
  }
  .closet-catalog .boutique-tabs button {
    font-size: 0.78rem;
  }
  .shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .coin-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .coin-product {
    padding: 9px 5px;
  }
  .coin-product .product-art {
    height: 76px;
  }
  .coin-product .btn {
    font-size: 0.7rem;
    padding: 0 3px;
  }
}
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  #home .stage {
    --home-mascot: 74px;
    padding-bottom: 20px;
  }
  #home .logo {
    width: min(180px, 72vw);
  }
  #home .actions {
    gap: 8px;
  }
  #home .actions > .btn.big {
    min-height: 54px;
    font-size: 1.6rem;
  }
  #home .dailyb {
    min-height: 48px;
  }
  #home .tilebtn .sq {
    max-height: 52px;
  }
  .home-boutique-links button {
    min-height: 44px;
    font-size: 0.8rem;
  }
  .home-boutique-links .game-art {
    width: 36px;
    height: 36px;
  }
  #home .home-shortcuts {
    gap: 7px;
  }
  #home .home-shortcuts .rbtn {
    width: 42px;
    height: 42px;
  }
  #home .home-shortcuts .nav-art .game-art {
    width: 37px;
    height: 37px;
  }
  .closet-mirror {
    min-height: 160px;
  }
  .closet-mirror .tg {
    --ts: 90px;
  }
}
@media (max-height: 450px) and (min-aspect-ratio: 1/1) {
  #home .logo {
    width: min(36vw, 340px);
  }
  #home .stage {
    --home-mascot: 104px;
  }
  #home .actions {
    gap: 6px;
  }
  #home .actions > .btn.big {
    min-height: 54px;
    font-size: 1.5rem;
  }
  #home .dailyb {
    min-height: 46px;
  }
  #home .tiles .sq {
    max-height: 48px;
  }
  .home-boutique-links button {
    min-height: 40px;
    font-size: 0.8rem;
  }
  .home-boutique-links .game-art {
    width: 34px;
    height: 34px;
  }
  .card.shop-menu .head {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-bottom: 5px;
  }
  .shop-menu .boutique-intro {
    gap: 9px;
    margin-bottom: 6px;
  }
  .shop-menu .boutique-emblem {
    flex-basis: 52px;
    height: 52px;
  }
  .shop-menu .boutique-intro p {
    font-size: 0.8rem;
    margin-bottom: 3px;
    max-width: none;
  }
  .shop-menu .boutique-balance {
    padding: 2px 9px 2px 4px;
    font-size: 0.85rem;
  }
  .shop-menu .boutique-balance .game-art {
    width: 22px;
    height: 22px;
  }
  .shop-menu .boutique-tabs {
    padding: 3px;
    margin-bottom: 7px;
  }
  .shop-menu .boutique-tabs button {
    min-height: 30px;
    padding: 4px;
  }
  .shop-menu .shop-product {
    padding: 6px;
  }
  .shop-menu .product-art {
    height: 56px;
  }
  .shop-menu .product-quantity {
    margin: 1px 0 4px;
  }
  .shop-menu .shop-product .btn {
    min-height: 30px;
  }
}
/* Refinement round: Home composition, the green Play, four shortcut tiles, the frosted-ice board that uses the space it
   has, the gameplay buddy on his floe, the HUD coin counter, the larger Shop, the Closet, the language menu and fonts.
   Loaded last; it layers over main/snowlight/premium/boutique without rewriting them. */

/* ---------------------------------------------------------------- fonts for every alphabet */
:root:lang(ru) {
  --font-logo: "Nunito", system-ui, sans-serif;
}
:root:lang(ja) {
  --font-ui:
    "Nunito", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
    "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --font-logo: var(--font-ui);
}
:root:lang(ko) {
  --font-ui:
    "Nunito", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui,
    sans-serif;
  --font-logo: var(--font-ui);
}
:root:lang(zh-CN) {
  --font-ui:
    "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui,
    sans-serif;
  --font-logo: var(--font-ui);
}
:root:lang(ja) .btn,
:root:lang(ko) .btn,
:root:lang(zh-CN) .btn,
:root:lang(ja) .tilebtn,
:root:lang(ko) .tilebtn,
:root:lang(zh-CN) .tilebtn {
  letter-spacing: 0;
  font-weight: 800;
}

/* ---------------------------------------------------------------- Home: one composed column, sized by the screen */
#home {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
#home .home-main {
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6dvh, 18px);
  width: 100%;
  min-height: 0;
  padding-bottom: 4px;
}
#home .hero {
  flex: none;
  justify-content: flex-end;
  gap: 0;
}
#home .logo {
  --logo-w: min(400px, 82vw, 36dvh);
  width: var(--logo-w);
  margin: calc(var(--logo-w) * -0.05) 0 calc(var(--logo-w) * -0.035);
}
#home .stage {
  --home-mascot: clamp(84px, min(40vw, 17dvh), 260px);
  margin-top: 0;
  padding-bottom: 0;
}
#home .stage .floe {
  width: calc(var(--home-mascot) * 1.62);
  height: calc(var(--home-mascot) * 0.52);
  margin: calc(var(--home-mascot) * -0.27) 0 calc(var(--home-mascot) * -0.07);
}
#home .actions {
  flex: none;
  gap: clamp(8px, 1.3dvh, 14px);
}
#home .actions > .btn.big {
  min-height: clamp(58px, 8dvh, 84px);
  font-size: clamp(1.6rem, 3.4dvh, 2.2rem);
}

/* Play: the one vivid green call to action, with an occasional light sweep (none in calm mode) */
/* Play is the one warm hero: orange sits opposite the cyan/blue water of every island (critique: dev/design/home-buttons-critique.md);
   the dark ring gives the edge where the fill and the water are equally bright */
:is(#home, #map, .card.lvc) .btn.play-cta {
  --a: #ffc43a;
  --b: #ff7a12;
  --lip: #b4420a;
  --fg: #fff;
  overflow: hidden;
  --ts:
    0 2px 0 #8a2f04, 1px 0 0 #8a2f04, -1px 0 0 #8a2f04, 0 -1px 0 #8a2f04,
    0 3px 4px #5a1e0080;
  background: linear-gradient(180deg, #ffc43a 0%, #ff9b1f 48%, #ff7a12 100%);
  box-shadow:
    inset 0 2px 0 #fff3c080,
    inset 0 -6px 10px #e0560055,
    0 0 0 2px #8a2f04,
    0 5px 0 2px var(--lip),
    0 12px 22px #5a1e0066;
}
:is(#home, #map, .card.lvc) .btn.play-cta .sub {
  color: #fff3d6;
  opacity: 1;
}
:is(#home, #map, .card.lvc) .btn.play-cta .ic {
  filter: drop-shadow(0 2px 0 #8a2f04);
}
:is(#home, #map, .card.lvc) .btn.play-cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 38%,
    #ffffff9e 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  animation: ctaShine 5.2s ease-in-out 1.4s infinite;
}
@keyframes ctaShine {
  0%,
  70% {
    transform: translateX(-130%);
  }
  88%,
  100% {
    transform: translateX(130%);
  }
}
:is(#home, #map, .card.lvc) .btn.play-cta:active:not([disabled]) {
  box-shadow:
    inset 0 2px 0 #fff3c080,
    0 0 0 2px #8a2f04,
    0 2px 0 2px var(--lip),
    0 4px 10px #5a1e0044;
}
body.calm :is(#home, #map, .card.lvc) .btn.play-cta::after {
  animation: none;
  display: none;
}

/* four shortcuts in one row: Gift, Shop, Customize, Ranking */
#home .tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
}
#home .tilebtn {
  gap: 5px;
}
#home .tilebtn .sq {
  aspect-ratio: 1.05;
  max-height: 84px;
}
#home .tilebtn .sq > .game-art {
  width: 76%;
  height: 84%;
  max-width: 78px;
}
/* labels may use the gap beside their tile; words never break in the middle */
#home .tilebtn .tl {
  display: block;
  width: calc(100% + 10px);
  margin: 0 -5px;
  font-size: clamp(0.62rem, 3.15vw, 0.86rem);
  line-height: 1.08;
  overflow-wrap: normal;
  text-wrap: balance;
}
.home-boutique-links {
  display: none;
}

@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  #home .logo {
    --logo-w: min(190px, 64vw);
  }
  #home .stage {
    --home-mascot: 70px;
  }
  #home .tilebtn .sq {
    max-height: 54px;
  }
  #home .tilebtn .sq > .game-art {
    width: 70%;
    height: 80%;
  }
}
/* desktop and large landscape: bigger logo and Tenguin, held together as one centred group */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  #home .logo {
    --logo-w: clamp(300px, 46dvh, 640px);
  }
  #home .stage {
    --home-mascot: clamp(120px, 24dvh, 320px);
  }
  #home .actions {
    width: clamp(380px, 42dvh, 520px);
  }
  #home .dailyb {
    min-height: clamp(56px, 7dvh, 72px);
  }
  #home .tilebtn .sq {
    max-height: clamp(70px, 10dvh, 104px);
  }
  #home .tilebtn .sq > .game-art {
    max-width: 92px;
  }
  #home .tilebtn .tl {
    font-size: clamp(0.8rem, 1.5dvh, 1rem);
  }
}
/* landscape windows up to 700px tall (phones on their side, laptop windows): logo + Tenguin beside the actions */
@media (min-aspect-ratio: 1/1) and (max-height: 700px) {
  #home .home-main {
    flex-direction: row;
    gap: clamp(16px, 5vw, 64px);
  }
  #home .hero {
    justify-content: center;
    width: auto;
    flex: 0 1 auto;
  }
  #home .logo {
    --logo-w: min(38vw, 440px, 54dvh);
  }
  #home .stage {
    --home-mascot: clamp(70px, 27dvh, 190px);
  }
  #home .actions {
    width: min(46vw, 440px);
    gap: clamp(6px, 1.4dvh, 12px);
  }
  #home .actions > .btn.big {
    min-height: clamp(50px, 10dvh, 70px);
    font-size: clamp(1.4rem, 4.4dvh, 1.9rem);
  }
  #home .dailyb {
    min-height: clamp(44px, 9dvh, 60px);
  }
  #home .tilebtn .sq {
    max-height: clamp(48px, 12dvh, 80px);
    aspect-ratio: 1.2;
  }
  #home .tilebtn .tl {
    font-size: clamp(0.66rem, 2.2dvh, 0.9rem);
  }
}

/* ---------------------------------------------------------------- game: the board takes the space between HUD and boosters */
#game {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding-top: max(10px, min(4dvh, 40px), env(safe-area-inset-top));
}
#game .board-wrap {
  grid-row: 2;
  height: auto;
  min-height: 0;
  align-self: stretch;
  overflow: visible;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#game .dock {
  grid-row: 3;
}
#game .boosts {
  grid-row: 4;
}
.tray {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #ffffffb0 transparent;
  will-change: auto;
}
.tray::-webkit-scrollbar {
  width: 6px;
}
.tray::-webkit-scrollbar-thumb {
  background: #ffffffb0;
  border-radius: 3px;
}
.board {
  will-change: transform;
}

/* frosted ice glass: a translucent cyan pane, lit rim, soft inner shading */
.tray {
  border: 1.5px solid #f4fcffd9;
  background:
    radial-gradient(120% 60% at 18% -8%, #ffffff8c, transparent 55%),
    linear-gradient(165deg, #c4ecffb8 0%, #8fd0f2a8 40%, #5fb0e2b3 100%);
  box-shadow:
    inset 0 1.5px 0 #ffffff,
    inset 0 0 0 1px #ffffff40,
    inset 0 -14px 26px #2f86c033,
    0 0 0 1px #3f8fc455,
    0 12px 30px #0a3c6a55;
  -webkit-backdrop-filter: blur(9px) saturate(1.35);
  backdrop-filter: blur(9px) saturate(1.35);
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .tray {
    background:
      radial-gradient(120% 60% at 18% -8%, #ffffff80, transparent 55%),
      linear-gradient(165deg, #bfe8fb 0%, #8bcbee 40%, #5aa9dc 100%);
  }
}
.slot::before,
.slot.future::before {
  background: #1f6ea12e;
  box-shadow:
    inset 0 2px 5px #13507d3d,
    inset 0 0 0 1px #ffffff5c;
}
.slot.future::before {
  background: #1f6ea114;
  box-shadow: inset 0 0 0 1.5px #ffffff59;
}
.tile.ghost .face {
  background: #1f6ea124;
  box-shadow:
    inset 0 2px 4px #13507d33,
    inset 0 0 0 1px #ffffff52;
}
.tile.ghost .n {
  color: #ffffff8c;
  text-shadow: 0 1px 0 #2b6f9e40;
}
.tile .face {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 #c2cfd6,
    0 3px 4px #0c3d6a59;
}
.wrapmark {
  color: #0f4f80aa;
}

/* desktop: no tall paddings; the board column is the whole middle */
@media (min-width: 900px) {
  #game {
    grid-template-rows: 64px minmax(0, 1fr) clamp(104px, 13dvh, 126px);
    gap: clamp(10px, 2dvh, 20px) 0;
    padding: clamp(12px, 3dvh, 36px) 0 clamp(12px, 3dvh, 36px);
  }
  #game .board-wrap {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    height: auto;
  }
  #game .boosts {
    grid-row: 3;
    height: auto;
    align-self: stretch;
  }
  #game .boost .disc {
    width: clamp(58px, 8dvh, 74px);
    height: clamp(58px, 8dvh, 74px);
  }
  /* the coin counter sits inside the HUD bar with its own margin, and grows with the digits */
  #game .hud-shell {
    grid-template-columns: 60px auto minmax(200px, 1fr) auto;
  }
  #game .topbar > .coins {
    margin: 0 10px 0 12px;
    min-width: 112px;
    justify-content: flex-start;
    height: 50px;
  }
  /* Tenguin stands in the middle of his floe, a little above the painted floes */
  #game .dock {
    grid-row: 2 / 4;
    align-self: end;
    margin-bottom: clamp(70px, 17dvh, 230px);
    --bs: clamp(120px, 14vw, min(240px, 19dvh));
    max-width: 300px;
  }
  /* the bubble sits centred above his head, inside his own column (it never covers the board) */
  #game .dock .bubble {
    left: 50%;
    bottom: calc(var(--bs) * 1.62);
    translate: -50% 0;
    max-width: min(260px, 100%);
  }
  #game .dock .bubble::before {
    left: calc(50% - 8px);
  }
  #game .dock .buddy-wrap .floe-mini {
    left: 50%;
    right: auto;
    width: calc(var(--bs) * 1.7);
    height: calc(var(--bs) * 1.133);
    top: calc(var(--bs) * 0.56);
    bottom: auto;
    translate: -50% 0;
  }
}
@media (min-aspect-ratio: 1/1) and (max-height: 619px) {
  #game {
    grid-template-rows: 44px minmax(0, 1fr) 72px;
    padding: 8px 10px 8px;
  }
  #game .board-wrap {
    grid-row: 2;
    height: auto;
  }
  #game .boosts {
    grid-row: 3;
  }
  #game .dock {
    grid-row: 2 / 4;
    margin-bottom: 0;
    padding-bottom: calc(var(--bs) * 0.3);
  }
}
/* phones: the floe is centred under his feet, and the dock keeps room for it above the boosters */
#game .dock {
  translate: none;
  padding-bottom: calc(var(--bs) * 0.36);
}
.dock .buddy-wrap .floe-mini {
  left: 50%;
  right: auto;
  width: calc(var(--bs) * 1.8);
  height: calc(var(--bs) * 0.9);
  top: calc(var(--bs) * 0.69);
  bottom: auto;
  translate: -50% 0;
}
.dock .buddy-wrap .floe-mini .buddy-floe,
.dock .buddy-wrap .floe-mini .game-art {
  width: 100%;
  height: 100%;
}
#game .topbar > .coins {
  min-width: 0;
  white-space: nowrap;
}
#game .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
#game .topbar > .coins span {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- shop: wider on desktop, art first, readable prices */
/* tab panels stay in the DOM; the hidden attribute must win over their grid display */
.card.boutique [role="tabpanel"][hidden] {
  display: none;
}
.card.boutique {
  width: min(900px, 100%);
}
.card.boutique .bd {
  padding: 0 clamp(14px, 3vw, 26px);
}
.boutique-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin: 0 0 14px;
  padding: 8px 14px 8px 8px;
  border-radius: 20px;
  background: #eaf6ff;
  box-shadow: inset 0 0 0 1px #cfe4f5;
}
.boutique-emblem {
  flex: none;
  width: 76px;
  height: 76px;
}
.boutique-intro p {
  margin: 0;
  max-width: none;
  color: #2c5b8c;
  font-size: 1rem;
}
.boutique-balance b {
  font: 800 1.15rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.shop-products {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.shop-products.coin-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shop-product {
  padding: 12px 10px 12px;
  border-radius: 22px;
  box-shadow:
    0 3px 0 #c9e0f0,
    0 6px 14px #1b4f8a14;
}
.shop-product .product-art {
  width: 100%;
  max-width: 110px;
  height: 96px;
}
.coin-product .product-art {
  max-width: 160px;
  height: 116px;
  width: 100%;
}
.card.boutique .shop-product h3 {
  font-size: 1.05rem;
  line-height: 1.15;
  min-height: 1.2em;
}
.coin-products .shop-product h3 {
  font: 800 1.45rem/1.1 var(--font-ui);
  color: #92500a;
  font-variant-numeric: tabular-nums;
}
.product-quantity {
  font: 800 0.85rem/1 var(--font-ui);
  color: #4d6f94;
  margin: 4px 0 10px;
}
.shop-product .btn {
  min-height: 38px;
  font: 800 1rem/1 var(--font-ui);
  padding: 0 8px;
}
.shop-product .btn .game-art {
  width: 22px;
  height: 22px;
}
@media (max-width: 760px) {
  .shop-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .shop-products > .shop-product:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .shop-products.coin-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .shop-products.coin-products > .shop-product:last-child {
    grid-column: auto;
  }
  .boutique-intro {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }
  .boutique-intro .boutique-balance {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .boutique-emblem {
    width: 56px;
    height: 56px;
  }
  .boutique-intro p {
    font-size: 0.88rem;
  }
  .shop-product .product-art {
    height: 74px;
  }
  .coin-product .product-art {
    height: 72px;
  }
  .coin-products .shop-product h3 {
    font-size: 1.1rem;
  }
}
@media (max-height: 450px) and (min-aspect-ratio: 1/1) {
  .boutique-intro {
    padding: 4px 10px 4px 4px;
    margin-bottom: 7px;
  }
  .boutique-emblem {
    width: 44px;
    height: 44px;
  }
  .shop-products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .shop-product .product-art {
    height: 54px;
  }
  .coin-product .product-art {
    height: 60px;
  }
}

/* ---------------------------------------------------------------- closet */
.closet-layout {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: 18px;
  text-align: left;
}
.closet-mirror {
  min-height: 0;
  justify-content: flex-end;
  padding: 44px 10px 26px;
  border: 2px solid #fff;
  box-shadow:
    inset 0 0 0 1px #b7dbf3,
    0 4px 14px #1b4f8a1f;
  transition: box-shadow 0.2s;
}
.closet-mirror.trying {
  box-shadow:
    inset 0 0 0 3px #ffc23d,
    0 4px 14px #1b4f8a1f;
}
.closet-caption {
  top: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #ffffffd0;
  font: 800 0.82rem/1.2 var(--font-ui);
  color: #24568b;
}
.closet-mirror.trying .closet-caption {
  background: #ffe9a8;
  color: #8a5300;
}
.closet-mirror .tg {
  --ts: clamp(120px, 22dvh, 180px);
  z-index: 1;
  margin: 0;
}
.closet-floe {
  position: relative;
  top: auto;
  width: calc(clamp(120px, 22dvh, 180px) * 1.5);
  height: calc(clamp(120px, 22dvh, 180px) * 0.48);
  margin-top: calc(clamp(120px, 22dvh, 180px) * -0.25);
}
.closet-wallet {
  margin-bottom: 10px;
}
.closet-catalog .boutique-tabs {
  margin-bottom: 10px;
}
.closet-catalog .boutique-tabs button {
  font-size: 0.85rem;
  padding: 6px 4px;
  overflow-wrap: anywhere;
}
.closet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.closet-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 8px 6px 9px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 2px #d3e6f5,
    0 3px 0 #c6dcee;
  transition:
    transform 0.16s var(--ease-spring),
    box-shadow 0.16s;
}
.closet-item:active {
  transform: translateY(2px);
}
.closet-item:focus-visible {
  outline: 3px solid #2f7fe6;
  outline-offset: 2px;
}
.closet-item.sel {
  box-shadow:
    inset 0 0 0 3px #2f7fe6,
    0 3px 0 #1d63c4,
    0 6px 14px #2f7fe633;
  transform: translateY(-2px);
}
.closet-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 62px;
  border-radius: 13px;
  background: radial-gradient(ellipse at 50% 35%, #ffffff, #dff2ff 70%);
}
.closet-thumb svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.closet-item[data-slot="fx"] .closet-thumb svg {
  height: 74%;
}
.closet-name {
  font: 800 0.8rem/1.12 var(--font-ui);
  text-align: center;
  min-height: 2.24em;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
.closet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font: 800 0.74rem/1 var(--font-ui);
  white-space: nowrap;
}
.closet-chip .game-art {
  width: 17px;
  height: 17px;
}
.closet-chip.price {
  background: #fff2c8;
  color: #7a4a00;
  box-shadow: inset 0 0 0 1px #f0d28a;
}
.closet-chip.price.poor {
  background: #eef2f6;
  color: #6f8296;
  box-shadow: inset 0 0 0 1px #d5dee8;
}
.closet-chip.own {
  background: #dceefa;
  color: #1d5a99;
}
.closet-chip.eq {
  background: #1fae4b;
  color: #fff;
}
.closet-chip.eq::before {
  content: "";
  width: 10px;
  height: 6px;
  margin: -2px 2px 0 0;
  border: solid #fff;
  border-width: 0 0 2.4px 2.4px;
  rotate: -45deg;
}
.closet-cta {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 10px 10px 10px 14px;
  border-radius: 18px;
  background: #f2f9ff;
  box-shadow:
    inset 0 0 0 1px #cfe4f5,
    0 -6px 12px #f0f9ff;
}
.closet-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.closet-sel-name {
  font: 800 1.05rem/1.15 var(--font-ui);
  color: var(--ink);
}
.closet-sel-note {
  font: 700 0.8rem/1.25 var(--font-ui);
  color: #4d6f94;
}
.closet-sel-note.warn {
  color: #b24a12;
}
.closet-sel-note.good {
  color: #138040;
}
.closet-cta-act {
  flex: none;
}
.closet-cta-act .btn {
  min-height: 46px;
  padding: 0 16px;
  font-size: 1.1rem;
}
.closet-cta-act .btn svg {
  width: 18px;
  height: 18px;
}
.closet-cta-act .btn .cost {
  margin-left: 4px;
}
.closet-cta-act .btn.poor {
  --a: #e9eef4;
  --b: #d5dee8;
  --lip: #a6b5c6;
  --fg: #51657c;
}
.closet-cta-act .btn[disabled] {
  opacity: 1;
  filter: none;
  --fg: #138040;
}
@media (max-width: 600px) {
  .closet-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .closet-mirror {
    padding: 58px 8px 12px;
  }
  .closet-mirror .tg {
    --ts: clamp(86px, 14dvh, 112px);
  }
  .closet-floe {
    width: calc(clamp(86px, 15dvh, 120px) * 1.5);
    height: calc(clamp(86px, 15dvh, 120px) * 0.48);
    margin-top: calc(clamp(86px, 15dvh, 120px) * -0.25);
  }
  .closet-caption {
    top: 8px;
  }
  .closet-thumb {
    height: 52px;
  }
  .closet-catalog .boutique-tabs button {
    font-size: 0.76rem;
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .closet-layout {
    grid-template-columns: minmax(150px, 0.6fr) minmax(0, 1.6fr);
  }
  .closet-mirror {
    position: sticky;
    top: 0;
    align-self: start;
    height: calc(100dvh - 110px);
    justify-content: center;
    padding: 40px 6px 10px;
  }
  .closet-mirror .tg {
    --ts: 92px;
  }
  .closet-chip {
    padding: 0 5px;
    font-size: 0.62rem;
  }
  .closet-chip.eq::before {
    display: none;
  }
  .closet-floe {
    width: 138px;
    height: 44px;
    margin-top: -23px;
  }
  .closet-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .closet-thumb {
    height: 44px;
  }
  .closet-name {
    font-size: 0.68rem;
  }
}

/* ---------------------------------------------------------------- settings: language dropdown */
.lang-opt {
  cursor: pointer;
}
.lang-pick {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.lang-pick::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border: solid #1d63c4;
  border-width: 0 2.4px 2.4px 0;
  rotate: 45deg;
  pointer-events: none;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: min(56vw, 230px);
  height: 38px;
  padding: 0 34px 0 12px;
  border: 0;
  border-radius: 11px;
  background: #dbe7f5;
  color: var(--ink);
  font: 800 0.95rem/1 var(--font-ui);
  text-overflow: ellipsis;
  cursor: pointer;
}
.lang-select:focus-visible {
  outline: 3px solid #2f7fe6;
  outline-offset: 2px;
}
.lang-select option {
  font-weight: 700;
  color: #0b2862;
  background: #fff;
}

/* ---------------------------------------------------------------- critic round 1 fixes */
/* phones in portrait: a smaller Tenguin dock leaves the board its rows */
@media (max-aspect-ratio: 1/1) {
  /* fixed height: a long speech bubble never changes the board's area (no refit while he talks) */
  #game .dock {
    --bs: clamp(58px, 10.5dvh, 108px);
    padding-bottom: calc(var(--bs) * 0.3);
    height: calc(var(--bs) * 1.42);
    align-items: flex-start;
  }
  #game .dock .bubble {
    font-size: clamp(0.8rem, 1.9dvh, 1rem);
  }
}
/* a hat rises above the head: reserve that room so it never touches the board, the logo or a caption */
.tg[data-hat] {
  margin-top: calc(var(--ts, 96px) * 0.21);
}
/* long words wrap with a hyphen, never broken mid-word without one */
.boutique-tabs button,
.closet-name,
#home .tilebtn .tl {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.closet-name {
  overflow-wrap: break-word;
}
.closet-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.closet-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .closet-catalog .boutique-tabs button {
    font-size: 0.68rem;
    padding: 6px 2px;
  }
  .closet-grid {
    gap: 6px;
  }
  .closet-name {
    font-size: 0.7rem;
  }
  .closet-chip {
    font-size: 0.66rem;
    padding: 0 6px;
  }
  /* booster lock tags: the narrowest phones need them smaller so neighbours never touch */
  #game .boost .tag {
    font-size: 0.48rem;
    padding: 0 3px;
    gap: 1px;
  }
  #game .boost .tag svg {
    width: 7px;
    height: 7px;
  }
}
/* phones: the fitting-room mirror is a compact strip, more of the catalog shows */
@media (max-width: 600px) {
  .closet-mirror {
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    padding: 42px 8px 8px;
  }
  .closet-mirror .tg {
    --ts: clamp(72px, 11dvh, 100px);
  }
  .closet-floe {
    position: absolute;
    left: 50%;
    bottom: 4px;
    translate: -50% 0;
    margin: 0;
    width: calc(clamp(72px, 11dvh, 100px) * 1.5);
    height: calc(clamp(72px, 11dvh, 100px) * 0.48);
  }
  .closet-cta {
    padding: 8px 8px 8px 12px;
  }
  .closet-cta-act .btn {
    min-height: 42px;
    font-size: 1rem;
    padding: 0 12px;
  }
}
/* the shop's preview notice sits right under the tabs, so it is seen before the disabled prices */
.card.boutique .boutique-note {
  margin: 0 0 12px;
}
.shop-product .btn[disabled] {
  opacity: 1;
  filter: none;
  --a: #f1f5f9;
  --b: #e3eaf1;
  --lip: #c3cfdb;
  --fg: #6b7f94;
}
.shop-product .btn[disabled] .game-art {
  filter: saturate(0.6);
  opacity: 0.85;
}
/* very large screens: the Home group and the modals scale up instead of floating small */
@media (min-width: 2200px) and (min-height: 1300px) {
  #home .hero,
  #home .actions {
    zoom: 1.28;
  }
  #home .hero {
    width: auto;
  }
  .modal .card {
    zoom: 1.3;
  }
}
/* two-column Home: the two columns balance in height */
@media (min-aspect-ratio: 1/1) and (max-height: 700px) {
  #home .home-main {
    align-items: center;
  }
  #home .logo {
    --logo-w: min(34vw, 400px, 46dvh);
  }
  #home .stage {
    --home-mascot: clamp(70px, 24dvh, 170px);
  }
  #home .actions {
    width: min(48vw, 480px);
  }
  #home .actions > .btn.big {
    min-height: clamp(52px, 11.5dvh, 80px);
  }
  #home .dailyb {
    min-height: clamp(46px, 10dvh, 66px);
  }
  #home .tilebtn .sq {
    max-height: clamp(50px, 14dvh, 92px);
  }
}

/* ---------------------------------------------------------------- critic round 2 fixes */
/* short landscape closet: three wide cards per row (long German names fit), the catalog scrolls beside the mirror */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .closet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .closet-thumb {
    height: 40px;
  }
  .closet-name {
    font-size: 0.72rem;
    min-height: 0;
  }
}
/* the narrowest phones: the action bar stacks (message above, full-width button) and stays short */
@media (max-width: 360px) {
  .closet-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
  }
  .closet-sel-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .closet-cta-act .btn {
    width: 100%;
  }
  /* equipped chip: the check alone says it, no clipped word */
  .closet-chip.eq > span {
    display: none;
  }
  .closet-chip.eq::before {
    margin: -2px 0 0;
  }
}
/* shop on phones: three booster cards per row, all five above the fold */
@media (max-width: 520px) {
  .shop-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shop-products > .shop-product:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .shop-product {
    padding: 9px 5px;
  }
  .shop-product .product-art {
    height: 60px;
  }
  .card.boutique .shop-product h3 {
    font-size: 0.86rem;
  }
  .shop-product .btn {
    min-height: 34px;
    font-size: 0.9rem;
  }
}
/* speech bubbles avoid a lonely last word */
.bubble .txt {
  text-wrap: pretty;
}

/* final stretch zoom: no scrollbar for the zoom's own overflow (the zoom frames the tiles that are left) */
.tray.zoomed {
  overflow: hidden;
}
/* "this row continues on the next one" marks (levels 1-3): a clear white return arrow in the tray margin */
.wrapmark {
  color: #ffffff;
  filter: drop-shadow(0 1px 1px #1d5f9a99);
  width: calc(var(--cell) * 0.12);
  height: calc(var(--cell) * 0.12);
}

/* ---------------------------------------------------------------- shop: boosters for coins */
.boost-products.shop-products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shop-product .shop-have {
  font: 800 0.82rem/1 var(--font-ui);
  color: #2c5b8c;
  margin: 4px 0 8px;
}
.shop-offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.shop-buy.btn {
  --a: #ffd96b;
  --b: #f5ad2a;
  --lip: #b8650c;
  --fg: #4a2300;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 10px;
  font: 800 0.95rem/1 var(--font-ui);
}
.shop-buy .n {
  font-size: 1rem;
}
.shop-buy .cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 8px 0 3px;
  border-radius: 13px;
  background: #ffffffb3;
  color: #5a3200;
  font-size: 0.9rem;
}
.shop-buy .cost .game-art {
  width: 18px;
  height: 18px;
}
.shop-buy.poor {
  --a: #eef2f6;
  --b: #dde5ee;
  --lip: #a9b8c8;
  --fg: #607489;
}
.shop-buy.poor .cost {
  background: #ffffff99;
  color: #607489;
}
.shop-product.locked .product-art {
  filter: saturate(0.35);
  opacity: 0.6;
}
.shop-product.locked .shop-buy {
  display: none;
}
.shop-lock {
  display: none;
}
.shop-product.locked .shop-lock {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 14px;
  background: #e3edf7;
  color: #4d6f94;
  font: 800 0.8rem/1.15 var(--font-ui);
  text-align: center;
}
.shop-msg {
  min-height: 1.3em;
  font-weight: 800;
}
.shop-msg.good {
  color: #138040;
}
.shop-msg.warn {
  color: #b24a12;
}
.shop-pack.busy {
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 520px) {
  .boost-products.shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop-buy.btn {
    min-height: 38px;
    font-size: 0.88rem;
  }
}
@media (max-height: 450px) and (min-aspect-ratio: 1/1) {
  .boost-products.shop-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .shop-offers {
    flex-direction: row;
  }
  .shop-buy.btn {
    min-height: 34px;
    padding: 0 6px;
  }
}
.card .btn.ghost.danger {
  --fg: #c0303a;
  box-shadow:
    inset 0 0 0 1.5px #f0b4b8,
    0 3px 0 #e2a0a5;
}

/* ---------------------------------------------------------------- Home: hello bubble and a living logo */
#home .stage {
  position: relative;
}
.home-bubble {
  position: absolute;
  z-index: 3;
  left: calc(50% + var(--home-mascot) * 0.42);
  bottom: calc(var(--home-mascot) * 0.78);
  width: max-content;
  max-width: min(240px, 42vw);
  padding: 9px 13px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: 800 clamp(0.8rem, 1.7dvh, 1rem)/1.25 var(--font-ui);
  text-align: left;
  box-shadow:
    0 0 0 2px #cfe5fb,
    0 6px 14px #0b286226;
  pointer-events: none;
}
.home-bubble::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  rotate: 45deg;
  box-shadow: 2px 2px 0 #cfe5fb;
}
.home-bubble[hidden] {
  display: none;
}
/* the bubble always fits between Tenguin and the screen edge */
.home-bubble {
  max-width: min(
    240px,
    max(118px, calc(50vw - var(--home-mascot) * 0.42 - 14px))
  );
}
#home .logo {
  position: relative;
  cursor: pointer;
  animation: logoFloat 4.2s ease-in-out infinite;
}
#home .logo.enter {
  animation:
    logoIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    logoFloat 4.2s ease-in-out 0.75s infinite;
}
@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateY(-26px) scale(0.7);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes logoFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
/* a light sweeps across the letters only (the logo is its own mask) */
#home .logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      105deg,
      transparent 40%,
      #ffffffb8 50%,
      transparent 60%
    )
    no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask: var(--logo-url) center / contain no-repeat;
  mask: var(--logo-url) center / contain no-repeat;
  animation: logoShine 6s ease-in-out 1.6s infinite;
}
@keyframes logoShine {
  0%,
  72% {
    background-position: 160% 0;
  }
  92%,
  100% {
    background-position: -60% 0;
  }
}
body.calm #home .logo,
body.calm #home .logo.enter {
  animation: none;
}
body.calm #home .logo::after {
  display: none;
}

/* ---------------------------------------------------------------- round 4 (Codex critique) */
.board {
  touch-action: pan-y;
}
/* a cleared cell keeps only its ice hollow: the number fades out with the dissolve and never reads as a tile */
.tile.ghost .n {
  color: transparent;
  text-shadow: none;
  transition: color 0.5s ease-out;
}
/* banners: compact on the board's top edge; only the big moments (double avalanche, aurora) are large */
.banner {
  top: auto;
  translate: -50% 0;
  font-size: clamp(1.5rem, 6.5vw, 2.5rem);
}
.banner.major {
  font-size: clamp(2rem, 9vw, 3.4rem);
}
/* closet: header (close), fitting-room preview and the buy bar never scroll away; only the item grid scrolls */
.card.closet-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card.closet-menu > .head {
  flex: none;
}
.card.closet-menu > .bd {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card.closet-menu .closet-layout {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.card.closet-menu .closet-catalog {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card.closet-menu .closet-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 3px 6px;
  align-content: start;
  scrollbar-width: thin;
}
.card.closet-menu .closet-cta {
  position: static;
  flex: none;
  margin-top: 8px;
  box-shadow: inset 0 0 0 1px #cfe4f5;
}
.card.closet-menu .closet-mirror {
  justify-content: center;
}
@media (max-width: 600px) {
  .card.closet-menu .closet-layout {
    display: flex;
    flex-direction: column;
  }
  .card.closet-menu .closet-mirror {
    flex: none;
  }
  .card.closet-menu .closet-catalog {
    flex: 1 1 auto;
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .card.closet-menu .closet-mirror {
    position: static;
    height: auto;
    align-self: stretch;
  }
}

/* a hat makes him taller: his speech bubble rises with it (desktop dock) */
#game .dock .buddy-wrap > .tg {
  top: calc(var(--bs, 76px) * -0.09);
}
/* desktop floe: feet in the middle of its snowy top, as a share of his size so it holds at every width (phones keep their own footing) */
@media (min-width: 900px) {
  #game .dock .buddy-wrap > .tg {
    top: calc(var(--bs, 160px) * -0.03);
  }
}
@media (min-width: 900px) {
  #game .dock:has(.tg[data-hat]) .bubble {
    bottom: calc(var(--bs) * 1.82);
  }
}
/* narrow phones: the hello bubble sits beside his body, below the logo */
@media (max-width: 360px) {
  .home-bubble {
    bottom: calc(var(--home-mascot) * 0.35);
    left: calc(50% + var(--home-mascot) * 0.46);
    font-size: 0.76rem;
    padding: 7px 10px;
  }
}
/* the Skip button in his lesson bubble: small and quiet */
.dock .bubble .acts .btn[data-act="tut-skip"] {
  --a: #eef5fc;
  --b: #dbe9f6;
  --lip: #a9c1de;
  --fg: #2c5b8c;
  --ts: none;
  min-height: 30px;
  padding: 0 12px;
  font: 800 0.82rem/1 var(--font-ui);
}
/* short phones: a compact mirror and buy bar leave the item grid real room */
@media (max-width: 600px) and (max-height: 700px) {
  .card.closet-menu .closet-mirror {
    padding: 32px 8px 4px;
  }
  .card.closet-menu .closet-mirror .tg {
    --ts: 62px;
  }
  .card.closet-menu .closet-floe {
    width: 96px;
    height: 30px;
  }
  .card.closet-menu .closet-caption {
    top: 6px;
    font-size: 0.7rem;
    padding: 2px 10px;
  }
  .card.closet-menu .closet-wallet {
    margin-bottom: 6px;
  }
  .card.closet-menu .closet-wallet .boutique-balance {
    padding: 2px 10px 2px 4px;
    font-size: 0.9rem;
  }
  .card.closet-menu .closet-wallet .boutique-balance .game-art {
    width: 22px;
    height: 22px;
  }
  .card.closet-menu .boutique-tabs {
    margin-bottom: 6px;
    padding: 3px;
  }
  .card.closet-menu .boutique-tabs button {
    min-height: 32px;
  }
  .card.closet-menu .closet-cta {
    flex-direction: row;
    align-items: center;
    padding: 6px 6px 6px 10px;
    margin-top: 6px;
  }
  .card.closet-menu .closet-sel-note {
    display: none;
  }
  .card.closet-menu .closet-sel-note.warn,
  .card.closet-menu .closet-sel-note.good {
    display: -webkit-box;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  .card.closet-menu .closet-sel-name {
    font-size: 0.9rem;
  }
  .card.closet-menu .closet-cta-act .btn {
    width: auto;
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0 10px;
  }
}
@media (max-width: 600px) and (max-height: 700px) {
  .card.closet-menu .closet-cta-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .card.closet-menu .closet-sel-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card.closet-menu .closet-sel-note.warn,
  .card.closet-menu .closet-sel-note.good {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card.closet-menu .closet-cta-act .btn {
    font-size: 0.8rem;
    gap: 4px;
  }
  .card.closet-menu .closet-cta-act .btn .cost {
    padding: 0 6px 0 3px;
    height: 24px;
    font-size: 0.82rem;
  }
}

/* ---------------------------------------------------------------- selected vs hint: two clearly different states */
/* selected (your touch): icy blue ring, lifted, cool glow */
.tile.sel .face {
  background-color: #f4fbff;
  transform: translateY(calc(var(--cell) * -0.07)) scale(1.06);
  box-shadow:
    inset 0 -3px 0 #b9d7ea,
    0 0 0 calc(var(--cell) * 0.05) #ffffff,
    0 0 0 calc(var(--cell) * 0.1) #27a8ec,
    0 0 calc(var(--cell) * 0.35) #4fc3ffaa,
    0 calc(var(--cell) * 0.1) calc(var(--cell) * 0.16) #0b3a6a55;
}
/* hint (Tenguin shows a pair): warm gold, strong breathing glow and a little hop, both tiles in step */
.tile.hint .face {
  animation: hintHop 1.1s ease-in-out infinite;
}
.tile.hint .face::after {
  inset: calc(var(--cell) * -0.07);
  border-radius: 30%;
  box-shadow:
    0 0 0 calc(var(--cell) * 0.045) #fff7c9,
    0 0 0 calc(var(--cell) * 0.1) #ffb51c,
    0 0 calc(var(--cell) * 0.55) #ffc53d;
  animation: hintGlow2 1.1s ease-in-out infinite;
}
@keyframes hintHop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(calc(var(--cell) * -0.09)) scale(1.07);
  }
  65% {
    transform: translateY(0) scale(0.98);
  }
}
@keyframes hintGlow2 {
  0%,
  100% {
    opacity: 0.55;
  }
  45% {
    opacity: 1;
  }
}
body.calm .tile.hint .face {
  animation: none;
}
body.calm .tile.hint .face::after {
  animation: none;
  opacity: 1;
}

/* ---------------------------------------------------------------- pair juice */
.linkfx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.linkfx path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.linkfx path:first-child {
  filter: blur(3px);
  opacity: 0.9;
}
/* the two tiles flash, squash and stretch as they break (the second a beat later) */
.tile.match .face {
  animation: matchPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes matchPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.2, 0.88);
    filter: brightness(1.55);
  }
  60% {
    transform: scale(0.94, 1.08);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
body.calm .tile.match .face {
  animation: none;
}

/* ---------------------------------------------------------------- juice round */
/* hit-stop: the far pair holds, lit, for a beat */
.tile.held .face {
  transform: scale(1.12);
  filter: brightness(1.45);
  box-shadow:
    0 0 0 calc(var(--cell) * 0.06) #ffffff,
    0 0 calc(var(--cell) * 0.5) #8fe6ff;
  transition: none;
}
/* Snowfall: the ice gives a cold shiver */
.tray.shiver {
  animation: trayShiver 0.5s ease-out;
}
@keyframes trayShiver {
  0% {
    filter: none;
  }
  20% {
    filter: brightness(1.18) saturate(1.25) hue-rotate(-8deg);
    transform: translateY(-2px);
  }
  45% {
    transform: translate(-2px, 1px);
  }
  70% {
    transform: translate(1px, 0);
  }
  100% {
    filter: none;
    transform: none;
  }
}
/* nearly there: the glass rim breathes a warm light */
.tray.nearly {
  animation: nearlyGlow 2s ease-in-out infinite;
}
@keyframes nearlyGlow {
  0%,
  100% {
    box-shadow:
      inset 0 1.5px 0 #fff,
      inset 0 0 0 1px #ffffff40,
      0 0 0 1px #3f8fc455,
      0 12px 30px #0a3c6a55,
      0 0 0 0 #ffe27a00;
  }
  50% {
    box-shadow:
      inset 0 1.5px 0 #fff,
      inset 0 0 0 1px #ffffff60,
      0 0 0 2px #ffe27a99,
      0 12px 30px #0a3c6a55,
      0 0 26px 4px #ffe27a66;
  }
}
body.calm .tray.nearly,
body.calm .tray.shiver {
  animation: none;
}
/* more rows below / above: soft fades and a bouncing chevron on the tray edge */
#game .board-wrap {
  position: relative;
}
#game .board-wrap::before,
#game .board-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 30px;
  height: 30px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 50%;
  background: #ffffffe0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231d63c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
  box-shadow: 0 2px 8px #0b3a6a40;
}
#game .board-wrap::after {
  bottom: 0;
}
#game .board-wrap::before {
  top: 0;
  rotate: 180deg;
}
#game .board-wrap.more-below::after {
  opacity: 1;
  animation: moreBob 1.4s ease-in-out infinite;
}
#game .board-wrap.more-above::before {
  opacity: 0.85;
}
@keyframes moreBob {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% 4px;
  }
}
body.calm #game .board-wrap.more-below::after {
  animation: none;
}

/* ---------------------------------------------------------------- missions, relax, win lines, closet extras, contrast */
#home .pill.missions {
  position: relative;
  gap: 6px;
  padding: 0 12px 0 6px;
  color: #fff;
  font: 800 1rem/1 var(--font-ui);
  cursor: pointer;
}
#home .pill.missions .mi {
  width: 26px;
  height: 26px;
}
#home .pill.missions .badge {
  top: -6px;
  right: -6px;
}
.card.missionsc .missions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.mission {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #d3e6f5;
}
.mission.ready {
  box-shadow:
    inset 0 0 0 2px #1fae4b,
    0 0 14px #1fae4b33;
}
.mission.claimed {
  opacity: 0.72;
}
.mission .mtxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mission .mtxt b {
  font: 800 0.95rem/1.2 var(--font-ui);
  color: var(--ink);
}
.mission .pbar {
  height: 8px;
  border-radius: 4px;
  background: #e2edf7;
  overflow: hidden;
  margin: 0;
}
.mission .pbar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #3ee6b0, #1fae4b);
}
.mission .mtxt small {
  font: 800 0.75rem/1 var(--font-ui);
  color: #6681a2;
}
.mission .btn.small {
  min-height: 38px;
  padding: 0 12px;
  gap: 4px;
  font-size: 0.95rem;
}
.mission .btn .coin {
  width: 20px;
  height: 20px;
}
.mission .mdone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #138040;
  font: 800 0.85rem/1 var(--font-ui);
}
.mission .mdone svg {
  width: 16px;
  height: 16px;
}
/* Daily challenge and Relax side by side */
#home .daily-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
}
#home .daily-row .dailyb {
  min-width: 0;
}
#home .btn.relaxb {
  --a: #9a6cff;
  --b: #5a2fd0;
  --lip: #3a1a8a;
  --fg: #fff;
  --ts: 0 2px 0 #2a1066;
  justify-content: flex-start;
  gap: 8px;
  min-height: inherit;
  padding: 0 12px 0 10px;
  min-width: 0;
}
#home .btn.relaxb .ic {
  width: 30px;
  height: 30px;
  color: #efe6ff;
  flex: none;
}
#home .btn.relaxb .ic svg {
  width: 100%;
  height: 100%;
}
#home .btn.relaxb .tx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.05;
}
#home .btn.relaxb .tx small,
#home .daily-row .dailyb .tx small {
  font: 800 0.72rem/1.15 var(--font-ui);
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#home .daily-row .dailyb .tx {
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.05;
}
#home .daily-row .dailyb .ic {
  width: 40px;
  height: 40px;
}
@media (max-width: 380px) {
  #home .daily-row {
    grid-template-columns: 1fr 1fr;
  }
  #home .btn.relaxb .ic {
    display: none;
  }
  #home .daily-row .dailyb .ic {
    width: 30px;
    height: 30px;
  }
  #home .btn.relaxb .tx,
  #home .daily-row .dailyb .tx {
    font-size: 0.9rem;
  }
}
/* Relax: no stars to chase */
#game.relax .lvlp .st3,
.card.win.relax .stars {
  display: none;
}
.card.win.relax {
  margin-top: 0;
  padding-top: 16px;
}
/* win: best moment + new look lines */
.card.win .win-feat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #e7f5ff;
  box-shadow: inset 0 0 0 1px #c4e1f5;
}
.card.win .win-feat span {
  font: 800 0.7rem/1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d7ca9;
}
.card.win .win-feat b {
  font: 800 0.95rem/1.1 var(--font-ui);
  color: #123c77;
}
.card.win .win-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 6px 12px;
  border-radius: 16px;
  background: linear-gradient(90deg, #fff6d6, #ffe9a8);
  box-shadow: inset 0 0 0 1.5px #f0c75a;
}
.card.win .win-unlock .closet-thumb {
  width: 52px;
  height: 44px;
  flex: none;
  border-radius: 10px;
}
.card.win .win-unlock b {
  font: 800 0.95rem/1.2 var(--font-ui);
  color: #7a4a00;
  text-align: left;
}
/* closet: event ribbon and earned-only lock chip */
.closet-ribbon {
  position: absolute;
  top: 6px;
  left: -4px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #ff5aa8, #a46cff);
  color: #fff;
  font: 800 0.62rem/1.3 var(--font-ui);
  box-shadow: 0 2px 4px #5a1a6e44;
}
.closet-chip.lock {
  background: #eef2f6;
  color: #4d6f94;
  box-shadow: inset 0 0 0 1px #d5dee8;
}
.closet-chip.lock svg {
  width: 13px;
  height: 13px;
}
/* high contrast: plain white tiles, dark heavy digits, firm edges, darker hollows */
body.contrast .tile .face {
  background: #ffffff !important;
  box-shadow:
    inset 0 0 0 2px #0b2862,
    0 3px 0 #0b2862 !important;
}
body.contrast .tile .n {
  color: #0b1838 !important;
  font-weight: 700;
}
body.contrast .tile.sel .face {
  box-shadow:
    inset 0 0 0 3px #0057c2,
    0 0 0 calc(var(--cell) * 0.1) #0057c2 !important;
}
body.contrast .tile.hint .face::after {
  box-shadow: 0 0 0 calc(var(--cell) * 0.12) #c06a00 !important;
}
body.contrast .slot::before,
body.contrast .tile.ghost .face {
  background: #0b28622e !important;
  box-shadow: inset 0 0 0 1.5px #0b286266 !important;
}
body.contrast .tray {
  background: #d9eefb;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mission {
  gap: 8px;
  padding: 10px;
}
.mission .mdone {
  flex: none;
  white-space: nowrap;
  font-size: 0.78rem;
}
.mission .btn.small {
  flex: none;
}

/* Home secondaries: cool and darker than the hero, never the water's hue (Daily royal blue, Relax violet) */
#home .btn.dailyb {
  --a: #3f74f2;
  --b: #1f3fb8;
  --lip: #142a7a;
  --fg: #fff;
  --ts: 0 2px 0 #0e1f5c;
}
#home .btn.relaxb .tx small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* World map: islands on a scrolling sea. Sizes inside an island use cqw (its own width), so stops, stars and Tenguin keep
   their place on the art at any screen size. */
#map.on {
  display: block;
  background: #1478c8;
}
#map .map-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #1478c8;
  -webkit-overflow-scrolling: touch;
}
/* the sea is part of the scrolled content (not a scroller background, which iPhone repaints late and makes shake) */
#map .map-sea {
  position: relative;
  min-height: 100%;
  background:
    var(--sea) center bottom / max(100%, 640px) auto repeat-y,
    #1478c8;
}
#map .map-scroll::-webkit-scrollbar {
  display: none;
}
#map .map-col {
  position: relative;
  width: min(100%, max(320px, 52vh));
  margin: 0 auto;
  padding: max(70px, env(safe-area-inset-top)) 0
    calc(118px + env(safe-area-inset-bottom));
}
#map .map-routes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
#map .map-routes path {
  fill: none;
  stroke: #ffffff80;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0 12;
}
#map .map-routes path.lit {
  stroke: #b9fff0;
  filter: drop-shadow(0 0 4px #7dffc8);
}

/* islands are drawn a bit larger than the column (only their transparent margins leave the screen) and centred, so the
   landmark on the left stays whole */
#map .isle {
  position: relative;
  width: 128%;
  left: calc(-14% + var(--dx, 0%));
  aspect-ratio: 1;
  container-type: inline-size;
  pointer-events: none;
}
#map .isle + .isle {
  margin-top: -30%;
}
#map .isle-bob {
  position: absolute;
  inset: 0;
  animation: isleBob 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
@keyframes isleBob {
  50% {
    translate: 0 -0.7cqw;
  }
}
#map .isle-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 1.1s ease;
}
#map .isle-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 0.6s;
}
#map .isle-path path {
  fill: none;
  stroke-linecap: round;
}
#map .pshadow path {
  stroke: #6aa6dc59;
  stroke-width: 2.4;
}
#map .pdots path {
  stroke: #ffffff;
  stroke-width: 1.35;
  stroke-dasharray: 0 2.6;
  transition: stroke 0.5s;
}
#map .pdots path.lit {
  stroke: #ffc23d;
}

/* stops */
#map .node {
  position: absolute;
  z-index: 2;
  width: 8.6cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  font:
    800 3.9cqw/1 "Baloo 2",
    "Nunito",
    sans-serif;
  background: radial-gradient(
    circle at 36% 28%,
    #fff 0 7%,
    #9fe2ff 9%,
    #3d9cf0 62%,
    #2a7fd6
  );
  box-shadow:
    inset 0 0 0 0.55cqw #fff,
    0 0.75cqw 0 #1d63b6,
    0 1.6cqw 1.8cqw #0b3a7a55;
  -webkit-tap-highlight-color: transparent;
}
#map .node b {
  text-shadow: 0 0.3cqw 0 #0b3a7a99;
  margin-top: 0.3cqw;
}
#map .node.boss {
  width: 10.8cqw;
  font-size: 4.5cqw;
  background: radial-gradient(
    circle at 36% 28%,
    #fff 0 7%,
    #d9b8ff 9%,
    #8b6cff 62%,
    #6a4fe0
  );
  box-shadow:
    inset 0 0 0 0.6cqw #fff,
    0 0.85cqw 0 #4c35b0,
    0 1.8cqw 2cqw #2a1a6e55;
}
#map .node.todo {
  color: #fff;
  background: radial-gradient(
    circle at 36% 28%,
    #c9d6ea 0 7%,
    #7f95b8 10%,
    #566d93 62%,
    #475d82
  );
  box-shadow:
    inset 0 0 0 0.5cqw #e9f0fa,
    0 0.65cqw 0 #34466a,
    0 1.2cqw 1.4cqw #0b3a7a44;
}
#map .node.todo b {
  text-shadow: 0 0.3cqw 0 #26365699;
}
#map .node.todo.boss {
  background: radial-gradient(
    circle at 36% 28%,
    #e3d6ff 0 7%,
    #9a86d6 10%,
    #6c57b0 62%,
    #5a4699
  );
  box-shadow:
    inset 0 0 0 0.55cqw #efe8ff,
    0 0.75cqw 0 #3e2f7a,
    0 1.4cqw 1.6cqw #2a1a6e44;
}
#map .node.cur {
  z-index: 4;
  color: #fff;
  background: radial-gradient(
    circle at 36% 28%,
    #fff 0 8%,
    #fff0a8 10%,
    #ffc23d 55%,
    #f59e1b
  );
  box-shadow:
    inset 0 0 0 0.6cqw #fff,
    0 0.8cqw 0 #c06f08,
    0 0 3cqw #ffd34dcc;
}
#map .node.cur b {
  text-shadow: 0 0.3cqw 0 #a85a0099;
}
#map .node.cur::before {
  content: "";
  position: absolute;
  inset: -1.4cqw;
  border-radius: 50%;
  border: 0.6cqw solid #fff6c4;
  animation: curRing 1.5s ease-out infinite;
  pointer-events: none;
}
@keyframes curRing {
  from {
    scale: 0.8;
    opacity: 1;
  }
  to {
    scale: 1.45;
    opacity: 0;
  }
}
#map .node:active {
  scale: 0.92;
}
#map .nboss {
  position: absolute;
  right: -3cqw;
  top: -3.4cqw;
  width: 6.4cqw;
  height: 6.4cqw;
  filter: drop-shadow(0 0.4cqw 0.4cqw #0005);
}
#map .nboss svg {
  width: 100%;
  height: 100%;
}
#map .nst {
  position: absolute;
  left: 50%;
  top: -3.2cqw;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  filter: drop-shadow(0 0.3cqw 0 #0b3a7a88);
}
#map .node:not(.done) .nst {
  visibility: hidden;
}
#map .nst i {
  width: 3.2cqw;
  aspect-ratio: 1;
  background: var(--star) center / contain no-repeat;
  filter: grayscale(1) brightness(1.5) opacity(0.6);
}
#map .nst i:nth-child(2) {
  width: 3.8cqw;
  translate: 0 -0.8cqw;
}
#map .nst i.on {
  filter: none;
}
#map .node.reveal .nst i.on {
  animation: starPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.14s + var(--s) * 0.12s);
}
@keyframes starPop {
  from {
    scale: 0;
    rotate: -90deg;
  }
  60% {
    scale: 1.5;
  }
}

/* Tenguin stands on his stop; the stops of the next row sit between his possible places, so he never hides one */
#map .map-actor {
  position: absolute;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}
#map .act-pos {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -90%;
}
#map .act-in {
  transform-origin: 50% 92%;
}
#map .map-actor .tg {
  --ts: 10cqw;
}

/* locked islands: grey under drifting fog, a lock with what opens them */
#map .fog,
#map .lock {
  display: none;
}
#map .isle.locked .fog,
#map .isle.waking .fog {
  display: block;
  position: absolute;
  inset: 20% 8% 14%;
  pointer-events: none;
}
#map .isle.locked .lock,
#map .isle.waking .lock {
  display: grid;
}
#map .isle.locked .isle-art {
  filter: grayscale(0.4) brightness(0.9) saturate(0.8);
} /* dimmed, still showing what waits there */
#map .isle.locked .node,
#map .isle.locked .isle-path {
  opacity: 0;
  pointer-events: none;
}
#map .fog i {
  position: absolute;
  width: 62%;
  aspect-ratio: 1.7;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    #f6faffb0,
    #e3eefc80 50%,
    #e3eefc00
  );
  filter: blur(1.2cqw);
  animation: fogDrift 8s ease-in-out infinite alternate;
}
#map .fog i:nth-child(1) {
  left: -6%;
  top: 6%;
}
#map .fog i:nth-child(2) {
  left: 42%;
  top: 0;
  animation-delay: -3s;
}
#map .fog i:nth-child(3) {
  left: 4%;
  top: 42%;
  animation-delay: -5s;
}
#map .fog i:nth-child(4) {
  left: 44%;
  top: 40%;
  animation-delay: -1.5s;
}
@keyframes fogDrift {
  to {
    translate: 6% -4%;
    scale: 1.08;
  }
}
#map .isle.waking .fog i {
  animation: fogAway 1.2s cubic-bezier(0.25, 0.7, 0.35, 1) 0.25s forwards;
}
@keyframes fogAway {
  to {
    translate: var(--fx) var(--fy);
    scale: 1.9;
    opacity: 0;
  }
}
#map .lock {
  position: absolute;
  left: 52%;
  top: 49%;
  translate: -50% -50%;
  z-index: 5;
  justify-items: center;
  gap: 1.2cqw;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
#map .lock .lk {
  position: relative;
  width: 15cqw;
  aspect-ratio: 1;
  display: block;
  filter: drop-shadow(0 1cqw 1.2cqw #0b3a7a66);
}
#map .lock .lk img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
#map .lock .lk .lk-shackle {
  transform-origin: 62% 38%;
}
#map .lock small {
  font:
    800 clamp(12px, 2.9cqw, 16px)/1.15 "Nunito",
    sans-serif;
  color: #fff;
  background: #0b1838c4;
  padding: 1.1cqw 2.8cqw;
  border-radius: 999px;
  white-space: nowrap;
}
#map .isle.waking .lock {
  animation: lockPop 0.75s ease-in forwards;
}
#map .isle.waking .lock .lk-shackle {
  animation: shackleOpen 0.26s cubic-bezier(0.3, 1.6, 0.6, 1) 0.26s forwards;
} /* after the shake, before the burst */
@keyframes shackleOpen {
  to {
    translate: 0 -16%;
    rotate: 24deg;
  }
}
@keyframes lockPop {
  0% {
    scale: 1;
  }
  15% {
    rotate: -14deg;
  }
  32% {
    rotate: 12deg;
  }
  48% {
    rotate: 0deg;
    scale: 1.25;
    opacity: 1;
  }
  100% {
    scale: 0;
    opacity: 0;
  }
}
#map .isle.waking .node {
  animation: nodePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.6s + var(--j) * 70ms);
}
@keyframes nodePop {
  from {
    scale: 0;
    opacity: 0;
  }
}
#map .isle.waking .isle-path {
  animation: pathIn 0.9s ease-out 0.5s backwards;
}
@keyframes pathIn {
  from {
    opacity: 0;
  }
}

/* island name ribbon */
#map .isle-tag {
  position: absolute;
  left: 50%;
  top: 12%;
  translate: -50% 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  pointer-events: none;
}
#map .isle-tag small {
  font:
    800 clamp(10px, 2.3cqw, 14px)/1 "Nunito",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0.3cqw 0.6cqw #0b3a7acc;
}
#map .isle-tag b {
  font:
    800 clamp(15px, 3.9cqw, 24px)/1.05 "Baloo 2",
    "Nunito",
    sans-serif;
  color: #fff;
  padding: 1.1cqw 4cqw 1cqw;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(#ffb547, #f2861a);
  box-shadow:
    inset 0 0.4cqw 0 #ffffff70,
    0 0.7cqw 0 #b85f0e,
    0 1.6cqw 2.4cqw #0b3a7a55;
  text-shadow: 0 0.3cqw 0 #a1520c;
}
#map .isle.locked .isle-tag b {
  background: linear-gradient(#a9bad3, #8095b4);
  box-shadow:
    inset 0 0.4cqw 0 #ffffff60,
    0 0.7cqw 0 #5e7395,
    0 1.6cqw 2.4cqw #0b3a7a55;
  text-shadow: 0 0.3cqw 0 #4c5f80;
}
#map .isle-tag span {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  font:
    800 clamp(11px, 2.6cqw, 15px)/1 "Nunito",
    sans-serif;
  color: #fff;
  background: #0b1838a8;
  padding: 0.7cqw 2cqw 0.7cqw 1cqw;
  border-radius: 999px;
}
#map .isle-tag .mi {
  width: max(13px, 3.6cqw);
  height: max(13px, 3.6cqw);
}

/* bars */
#map .map-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: linear-gradient(#0b3a7a99, #0b3a7a00);
  pointer-events: none;
}
#map .map-top > * {
  pointer-events: auto;
}
#map .map-top .mstars {
  margin-left: auto;
  padding: 0 14px 0 8px;
}
#map .map-top .mstars .mi {
  width: 24px;
  height: 24px;
}
#map .map-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 26px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(#0b3a7a00, #0b3a7a99);
  pointer-events: none;
}
#map .map-bottom .btn {
  pointer-events: auto;
  width: min(100%, 360px);
}
#map .play-cta.pulse {
  animation: ctaPulse 1.6s ease-in-out infinite;
}
@keyframes ctaPulse {
  50% {
    scale: 1.04;
  }
}

/* the trip */
#map .beam {
  position: absolute;
  z-index: 5;
  width: 13cqw;
  height: 62cqw;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  pointer-events: none;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(
    to top,
    #ffffff,
    #b9fff0dd 18%,
    #7dffc888 48%,
    #c9a6ff00
  );
  filter: blur(0.5cqw);
  mix-blend-mode: screen;
}
#map .orb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 0;
  height: 0;
  pointer-events: none;
}
#map .orb i {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: orbPulse 0.32s ease-in-out infinite alternate;
  background: radial-gradient(
    circle,
    #fff 0 22%,
    #b9fff0 38%,
    #7dffc8aa 58%,
    #c9a6ff00 72%
  );
  box-shadow:
    0 0 26px 10px #7dffc888,
    0 0 64px 24px #c9a6ff55;
}
@keyframes orbPulse {
  to {
    scale: 1.25;
  }
}
#map .map-banner {
  position: absolute;
  left: 50%;
  top: 15%;
  translate: -50% 0;
  z-index: 12;
  display: grid;
  justify-items: center;
  gap: 4px;
  pointer-events: none;
  text-align: center;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 22px 26px 16px;
  border-radius: 26px;
  background: linear-gradient(#5a3fd6f2, #3a2a9ef2);
  box-shadow:
    inset 0 2px 0 #ffffff55,
    0 6px 0 #26196e,
    0 16px 40px #0b1838aa,
    0 0 40px #7dffc855;
}
#map .map-banner[hidden] {
  display: none;
}
#map .map-banner small {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  font:
    800 15px/1 "Nunito",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a2a00;
  background: linear-gradient(#fff3a8, #ffc23d);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #c07a0c;
  white-space: nowrap;
}
#map .map-banner b {
  font:
    800 clamp(24px, 7vw, 38px)/1.08 "Baloo 2",
    "Nunito",
    sans-serif;
  color: #fff;
  text-shadow:
    0 3px 0 #26196e,
    0 0 18px #7dffc8aa;
}

/* level card */
.card.lvc .lvstars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  margin: 6px 0 10px;
}
.card.lvc .lvstars span {
  width: 62px;
  height: 62px;
  display: grid;
}
.card.lvc .lvstars span:nth-child(2) {
  width: 78px;
  height: 78px;
  translate: 0 -10px;
}
.card.lvc .lvstars img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) brightness(1.35) opacity(0.5)
    drop-shadow(0 2px 0 #9fb0c8);
}
.card.lvc .lvstars .on img {
  filter: drop-shadow(0 3px 0 #b86a00) drop-shadow(0 0 10px #ffd34d99);
}
.card.lvc .lvboss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  color: #6a4fe0;
  margin: 4px 0;
}
.card.lvc .lvboss svg {
  width: 30px;
  height: 30px;
}
.card.lvc .lvbest {
  margin: 4px 0 2px;
  color: var(--ink, #1d3557);
  opacity: 0.8;
  font-weight: 700;
}
.card.lvc .btn .ic,
.card.lvc .btn svg {
  width: 26px;
  height: 26px;
}

body.calm #map .isle-bob,
body.calm #map .fog i,
body.calm #map .node.cur::before,
body.calm #map .play-cta.pulse,
body.calm #map .orb i {
  animation: none;
}

/* in-game pause: a filled royal-blue button (the white one vanished into the white HUD and the sky) */
#game .topbar > .rbtn[data-act="menu"] {
  color: #fff;
  background: linear-gradient(180deg, #5b8cff, #2a4fd0);
  box-shadow:
    inset 0 2px 0 #ffffff66,
    inset 0 0 0 2px #ffffffcc,
    0 4px 0 #18307e,
    0 8px 14px #04103466;
}
#game .topbar > .rbtn[data-act="menu"] svg {
  filter: drop-shadow(0 2px 0 #18307e);
}
#game .topbar > .rbtn[data-act="menu"]:active {
  box-shadow:
    inset 0 2px 0 #ffffff66,
    inset 0 0 0 2px #ffffffcc,
    0 1px 0 #18307e,
    0 3px 6px #04103455;
}
#game .topbar > .rbtn[data-act="menu"] svg rect {
  fill: #fff;
}
#game .topbar > .rbtn[data-act="menu"] svg {
  width: 28px;
  height: 28px;
}

/* opening: Tenguin dozes, the menus wait for the first touch (it also unlocks sound on iPhone) */
#home.asleep {
  cursor: pointer;
}
#home.asleep .top,
#home.asleep .actions > :not(.wake-hint) {
  opacity: 0;
  pointer-events: none;
}
#home.asleep [data-act] {
  pointer-events: none;
}
#home .actions {
  position: relative;
}
#home .wake-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}
#home .wake-hint b {
  font:
    800 clamp(1.15rem, 3.2dvh, 1.6rem)/1.15 "Baloo 2",
    "Nunito",
    sans-serif;
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  background: #0b3a7acc;
  box-shadow:
    0 6px 18px #04103455,
    inset 0 0 0 2px #ffffff40;
  animation: wakeGlow 1.8s ease-in-out infinite;
}
#home .wake-hint .wh-hand {
  width: clamp(46px, 8dvh, 64px);
  display: block;
  animation: wakeTap 1.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px #04103466);
}
#home .wake-hint .wh-hand img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes wakeTap {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  45% {
    transform: translateY(-10px) rotate(-8deg);
  }
  60% {
    transform: translateY(2px) scale(0.92) rotate(-8deg);
  }
}
@keyframes wakeGlow {
  50% {
    box-shadow:
      0 6px 18px #04103455,
      inset 0 0 0 2px #ffffff80,
      0 0 24px #9ff7ff88;
    scale: 1.04;
  }
}
body.calm #home .wake-hint b,
body.calm #home .wake-hint .wh-hand {
  animation: none;
}

/* phones: a lighter button group (about 15% smaller) sitting lower, so Tenguin's floe sits on the water */
@media (max-aspect-ratio: 1/1) {
  #home .actions {
    zoom: 0.86;
  }
  #home .home-main {
    justify-content: flex-end;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* closet: rows as tall as their tiles (the price chip used to slip under the next row), balance inside the fitting room,
   and on phones a window of one fixed size, so picking items never makes it grow and shrink */
.card.closet-menu .closet-grid {
  grid-auto-rows: max-content;
}
.closet-mirror > .boutique-balance {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
}
.closet-sel-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-aspect-ratio: 1/1) {
  .card.closet-menu {
    height: min(calc(100dvh - 28px), 760px);
  }
  .card.closet-menu .closet-cta {
    min-height: 64px;
  }
}

/* "ran out" windows: the booster's own art, an "or" divider and the way to the coin shop */
.offer .boost.big-ic .disc .game-art {
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.or-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 4px;
  color: #6f86a6;
  font: 800 0.82rem/1 var(--font-ui, "Nunito", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.or-sep::before,
.or-sep::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #cfdff0;
}
.btn.shopway {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn.shopway .coin {
  width: 26px;
  height: 26px;
}
.coin.fly {
  z-index: 90;
}

/* "no pairs: use a Snowfall": the Snowfall button glows a few times */
.boost.add.nudge .disc {
  animation: addNudge 0.5s ease-in-out 6 alternate;
}
@keyframes addNudge {
  to {
    box-shadow:
      0 0 0 4px #ffd34d,
      0 0 22px #ffd34d;
    scale: 1.08;
  }
}
body.calm .boost.add.nudge .disc {
  animation: none;
  box-shadow: 0 0 0 4px #ffd34d;
}

/* portrait phones: a one-row HUD and Tenguin at the left of the booster bar give the board +200px or more
   (dev/design/game-layout-critique.md); bubbles with buttons shorten the tray instead of covering tiles */
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
  #game {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px 0;
    padding: max(8px, env(safe-area-inset-top)) env(safe-area-inset-right)
      max(6px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }
  #game .hud-shell {
    grid-row: 1;
    grid-template-columns: 40px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
  }
  #game .topbar {
    display: contents;
  }
  #game .topbar > .rbtn {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }
  #game .topbar > .rbtn[data-act="menu"] svg {
    width: 22px;
    height: 22px;
  }
  #game .topbar > .lvlp {
    grid-area: auto;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 44px;
    padding: 0 10px;
    border-radius: 16px;
  }
  #game .lvlp .lvl {
    font-size: 0.8rem;
  }
  #game .lvlp .st3 i {
    width: 13px;
    height: 13px;
  }
  #game .goal {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    height: 44px;
    padding: 0 6px 0 10px;
    border-radius: 16px;
  }
  #game .goal .gh {
    gap: 8px;
    align-items: center;
  }
  #game .goal small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #game .scorebox {
    flex: 0 0 auto;
    border-right: 0;
    padding: 0;
  }
  #game .scorebox .score {
    font-size: 1.15rem;
  }
  #game .embalo {
    min-width: 0;
    align-items: center;
  }
  #game .embalo .bar {
    height: 7px;
  }
  #game .embalo .x {
    min-width: 30px;
    height: 24px;
    font-size: 0.78rem;
  }
  #game .topbar > .coins {
    grid-area: auto;
    grid-column: 4;
    grid-row: 1;
    height: 36px;
    padding: 0 9px 0 2px;
    font-size: 1rem;
  }
  #game .topbar .coin {
    width: 28px;
    height: 28px;
  }
  #game .board-wrap {
    grid-row: 2;
    padding: 2px 0;
    justify-content: flex-start;
  }
  #game:has(.dock .bubble:not([hidden]) .acts:not(:empty)) .tray {
    max-height: calc(100% - 104px);
  }
  #game .boosts {
    --bs: 56px;
    grid-row: 3;
    padding: 8px 2px 8px calc(var(--bs) + 10px);
  }
  #game .boost {
    gap: 7px;
    font-size: min(0.74rem, 2.7vw);
    letter-spacing: -0.01em;
  }
  #game .boost .lbl {
    padding: 0;
  }
  #game .boost .disc {
    width: 46px;
    height: 46px;
  }
  #game .dock {
    --bs: 56px;
    position: relative;
    grid-row: 3;
    grid-column: 1;
    align-self: center;
    justify-self: start;
    z-index: 7;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0 0 6px 12px;
    translate: none;
  }
  #game .dock .buddy-wrap .floe-mini {
    width: calc(var(--bs) * 1.25);
    height: calc(var(--bs) * 0.45);
    top: calc(var(--bs) * 0.8);
  }
  #game .dock .bubble {
    position: absolute;
    left: 6px;
    bottom: calc(100% + 14px);
    margin: 0;
    width: max-content;
    max-width: min(330px, calc(100vw - 16px));
    font-size: 0.9rem;
    padding: 9px 12px;
    transform-origin: 26px 100%;
  }
  #game .dock .bubble::before {
    left: 26px;
    bottom: -8px;
    box-shadow: 2px 2px 0 #cfe5fb;
  }
  #game .dock .bubble:has(.acts:empty) {
    pointer-events: none;
  }
}
.tray {
  overflow-anchor: none;
} /* the final zoom resets the scroll and frames with transforms: no browser scroll anchoring under it */
/* Loaded after the original game theme so runtime branding wins the cascade. */
#home .tiles {
  --shortcut-gap: clamp(6px, 2vw, 12px);
  grid-template-columns: repeat(3, minmax(0, calc((100% - 3 * var(--shortcut-gap)) / 4)));
  justify-content: center;
  align-items: end;
  gap: var(--shortcut-gap);
}

#home .actions .play-cta,
.card button[data-act="map-go"],
.card .btn.gold {
  background: var(--template-accent, #ffb632);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--template-accent, #ffb632) 80%, white),
    var(--template-accent, #ffb632)
  );
}
/* Tenguin. Layout box = the 0 0 120 132 drawing; the SVG overhangs it (viewBox -30 -24 180 168) so nothing is clipped.
   Body motion: nested HTML wrappers (composited). Inside the SVG: shape toggles by data-* and short tweens from rig.ts. */
.tg {
  position: relative;
  width: var(--ts, 96px);
  aspect-ratio: 120 / 132;
  pointer-events: none;
}
.tg .tgShadow {
  position: absolute;
  left: 19%;
  width: 62%;
  top: 92.8%;
  height: 6.6%;
  border-radius: 50%;
  background: #02103052;
  transform-origin: 50% 50%;
}
.tg .tgM,
.tg .tgL,
.tg .tgB,
.tg .tgS,
.tg .tgSpin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 95.45%;
}
.tg .tgSpin {
  transform-origin: 50% 50%;
}
/* breathing: taller on the in-breath, feet planted, long soft exhale */
.tg .tgB {
  --bA: 1;
  animation: tgBreath var(--bd, 3.8s) infinite;
  will-change: transform;
}
.tg.buddy .tgB {
  --bA: 0.72;
}
@keyframes tgBreath {
  0% {
    transform: scale(1, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  40% {
    transform: scale(calc(1 - 0.008 * var(--bA)), calc(1 + 0.022 * var(--bA)));
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1);
  }
  52% {
    transform: scale(calc(1 - 0.007 * var(--bA)), calc(1 + 0.02 * var(--bA)));
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.tg[data-bd="sleep"] .tgB {
  animation-duration: 6.2s;
  --bA: 1.3;
}
.tg[data-bd="sad"] .tgB {
  animation-duration: 5.4s;
  --bA: 0.7;
}
.tg[data-bd="worry"] .tgB {
  animation-duration: 3s;
  --bA: 0.8;
}
.tg[data-bd="pant"] .tgB {
  animation-duration: 1.4s;
  --bA: 1.2;
}
.tg svg {
  position: absolute;
  left: -25%;
  top: -18.182%;
  width: 150%;
  height: 127.273%;
  overflow: visible;
  display: block;
}
.tg g,
.tg path,
.tg ellipse,
.tg rect,
.tg circle,
.tg text {
  transform-box: view-box;
}

/* pivots (drawing units) */
.tg .face {
  transform-origin: 60px 52px;
}
.tg .mask {
  transform-origin: 60px 47px;
}
.tg .eL {
  transform-origin: 45px 48.5px;
}
.tg .eR {
  transform-origin: 75px 48.5px;
}
.tg .flL {
  transform-origin: 14px 91px;
}
.tg .flR {
  transform-origin: 106px 91px;
}
.tg .tipL {
  transform-origin: 11.3px 96.2px;
}
.tg .tipR {
  transform-origin: 108.7px 96.2px;
}
.tg .st1 {
  transform-origin: 87px 83px;
}
.tg .st2 {
  transform-origin: 89.5px 96.8px;
}
.tg .ftL {
  transform-origin: 43px 126px;
}
.tg .ftR {
  transform-origin: 77px 126px;
}
.tg .btext {
  transform-origin: 60px 112px;
}
.tg .ckL {
  transform-origin: 34px 59px;
}
.tg .ckR {
  transform-origin: 86px 59px;
}
.tg .ea {
  transform-origin: 60px 46px;
}
.tg .ea-swirl path:first-child {
  transform-origin: 45px 46px;
}
.tg .ea-swirl path:last-child {
  transform-origin: 75px 46px;
}
.tg .bk-o .mouth {
  transform-origin: 60px 57px;
}
.tg .x-flake {
  transform-origin: 60px 58px;
}
.tg .x-puff {
  transform-origin: 60px 62px;
}
.tg.mirror .btext {
  scale: -1 1;
}

/* paint */
.tg .body {
  fill: url(#tgBody);
  stroke: #0c1433;
  stroke-width: 2.4;
}
.tg .sheen {
  fill: #fff;
  opacity: 0.2;
}
.tg .mask {
  fill: url(#tgFace);
}
.tg .belly {
  fill: url(#tgBelly);
}
.tg .btext {
  font:
    800 25px "Baloo 2",
    "Fredoka",
    sans-serif;
  fill: #1b2d5e;
}
.tg .btext.long {
  font-size: 19px;
}
.tg .feet ellipse {
  fill: url(#tgFoot);
  stroke: #c46f0c;
  stroke-width: 1.4;
}
.tg .feet path {
  fill: none;
  stroke: #c46f0c;
  stroke-width: 1.2;
  stroke-linecap: round;
}
.tg .ff {
  fill: url(#tgFlip);
}
.tg .fo {
  fill: none;
  stroke: #0c1433;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tg .fh {
  fill: none;
  stroke: #ffffff26;
  stroke-width: 2;
  stroke-linecap: round;
}
.tg .stick {
  display: none;
}
.tg[data-stick] .stick {
  display: inline;
}
.tg .stick path {
  stroke: #a8692f;
  stroke-width: 3.6;
  stroke-linecap: round;
}
.tg .stick circle {
  fill: #ffd54a;
  stroke: #b07a12;
  stroke-width: 1;
}
.tg .scarf .sb {
  fill: url(#tgScarf);
  stroke: #8e1e22;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.tg .scarf .shl {
  fill: none;
  stroke: #ffffff55;
  stroke-width: 2;
  stroke-linecap: round;
}
.tg .scarf .stp {
  fill: url(#tgTail);
}
.tg .scarf .sto {
  fill: none;
  stroke: #8e1e22;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tg .scarf .fr {
  fill: none;
  stroke: #b0282b;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.tg .scarf .knot {
  fill: #e8483f;
  stroke: #8e1e22;
  stroke-width: 1.3;
}
.tg .pc {
  fill: #121a33;
}
.tg .g1,
.tg .g2 {
  fill: #fff;
}
.tg .ea {
  display: none;
  fill: none;
  stroke: #121a33;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tg .ea-star {
  fill: #ffc23d;
  stroke: #b07900;
  stroke-width: 1;
}
.tg .ea-swirl {
  stroke-width: 1.8;
}
.tg .ea-shades rect {
  fill: #121a33;
  stroke: none;
}
.tg .ea-shades path {
  stroke-width: 2.6;
}
.tg .ea-shades .glint {
  stroke: #ffffff88;
  stroke-width: 1.6;
}
.tg .br path {
  fill: none;
  stroke: #121a33;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.3s;
  transform-box: fill-box;
  transform-origin: center;
}
.tg .ck {
  fill: #ff8fa3;
  opacity: 0.6;
}
.tg .beak {
  transform-origin: 60px 55px;
  scale: 1.14;
}
.tg .bk {
  display: none;
}
.tg .bk-c,
.tg .bk .up {
  fill: url(#tgBeak);
  stroke: #c97412;
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.tg .bk .mouth {
  fill: #c92f3a;
  stroke: #8a1d27;
  stroke-width: 1;
}
.tg .bk .tongue {
  fill: #ff7a8a;
}
.tg .bk .wv {
  fill: none;
  stroke: #8a1d27;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.tg .bk-c {
  display: inline;
}
.tg .x {
  display: none;
}
.tg .x-lines path {
  fill: none;
  stroke: #ffc61a;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.tg .x-q text {
  font:
    800 26px "Baloo 2",
    "Fredoka",
    sans-serif;
  fill: #3d9bff;
  stroke: #fff;
  stroke-width: 1.5;
  paint-order: stroke;
}
.tg .x-sweat path,
.tg .x-tear path {
  fill: #8fd8ff;
  stroke: #3aa0d8;
  stroke-width: 1.1;
}
.tg .x-zz text {
  font:
    800 15px "Baloo 2",
    "Fredoka",
    sans-serif;
  fill: #6cc4ff;
  stroke: #fff;
  stroke-width: 1;
  paint-order: stroke;
}
.tg .x-zz .z2 {
  font-size: 19px;
}
.tg .x-zz .z3 {
  font-size: 24px;
}
.tg .x-spark path {
  fill: #ffd54a;
  stroke: #e0a400;
  stroke-width: 0.6;
}
.tg .x-hearts path {
  fill: #ff5a6e;
  stroke: #c42a40;
  stroke-width: 1;
}
.tg .x-heart path {
  fill: url(#tgHeart);
  stroke: #b8233a;
  stroke-width: 1.2;
}
.tg .props > g {
  display: none;
}
.tg .props > g.on {
  display: inline;
}
.tg .x-puff circle {
  fill: #fff;
  opacity: 0.9;
}
.tg .x-gustL path,
.tg .x-gustR path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.75;
}

/* face shapes */
.tg[data-ey="hap"] .eye,
.tg[data-ey="cls"] .eye,
.tg[data-ey="star"] .eye,
.tg[data-ey="shades"] .eye,
.tg[data-ey="swirl"] .eye {
  display: none;
}
.tg[data-ey="wnk"] .eR {
  display: none;
}
.tg[data-ey="hap"] .ea-hap,
.tg[data-ey="cls"] .ea-cls,
.tg[data-ey="star"] .ea-star,
.tg[data-ey="shades"] .ea-shades,
.tg[data-ey="wnk"] .ea-wnk,
.tg[data-ey="swirl"] .ea-swirl {
  display: inline;
}
.tg .eye {
  transition: transform 0.18s;
}
.tg[data-ey="big"] .eye {
  transform: scale(1.18);
}
.tg[data-ey="small"] .eye {
  transform: scale(0.8);
}
.tg[data-ey="up"] .ball {
  transform: translate(2px, -2.5px);
}
.tg[data-ey="down"] .ball {
  transform: translate(0, 2.5px);
}
.tg[data-br] .br path {
  opacity: 1;
}
.tg[data-br="up"] .br {
  transform: translateY(-3px);
}
.tg[data-br="worry"] .bL {
  transform: rotate(-18deg) translateY(-1px);
}
.tg[data-br="worry"] .bR {
  transform: rotate(18deg) translateY(-1px);
}
.tg[data-m="sad"] .bL {
  transform: rotate(-24deg) translateY(-2px);
}
.tg[data-m="sad"] .bR {
  transform: rotate(24deg) translateY(-2px);
}
.tg[data-br="think"] .bL {
  transform: translateY(1px) rotate(10deg);
}
.tg[data-br="think"] .bR {
  transform: translateY(-3px) rotate(-6deg);
}
.tg[data-mo] .bk-c {
  display: none;
}
.tg[data-mo="c"] .bk-c,
.tg[data-mo="o"] .bk-o,
.tg[data-mo="s"] .bk-s,
.tg[data-mo="w"] .bk-w {
  display: inline;
}
/* extras (most are one-shot and faded by script; these few stay with their mood) */
.tg[data-x="lines"] .x-lines,
.tg[data-x="tear"] .x-tear,
.tg[data-x="q"] .x-q,
.tg[data-x="sweat"] .x-sweat,
.tg[data-x="zz"] .x-zz,
.tg[data-x="spark"] .x-spark,
.tg[data-x="hearts"] .x-hearts,
.tg[data-x="hearts"] .x-heart,
.tg[data-x="conf"] .x-conf {
  display: inline;
}
.tg[data-x="zz"] .x-zz text {
  animation: tgZ 2.4s ease-in-out infinite;
}
.tg[data-x="zz"] .x-zz .z2 {
  animation-delay: 0.4s;
}
.tg[data-x="zz"] .x-zz .z3 {
  animation-delay: 0.8s;
}
@keyframes tgZ {
  50% {
    opacity: 0.35;
    transform: translateY(-3px);
  }
}
.tg[data-x="tear"] .x-tear {
  animation: tgTear 3.4s ease-in infinite;
}
@keyframes tgTear {
  0%,
  20% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(9px);
    opacity: 0;
  }
}
body.tab-hidden .tg,
body.tab-hidden .tg * {
  animation-play-state: paused !important;
}
body.calm .tg,
body.calm .tg * {
  animation: none !important;
}

/* outfits (mascot/outfits.ts): hats by attribute, effects as a light particle layer around him */
.tg .hat {
  display: none;
}
.tg[data-hat="party"] .hat-party,
.tg[data-hat="earmuffs"] .hat-earmuffs,
.tg[data-hat="beanie"] .hat-beanie,
.tg[data-hat="tophat"] .hat-tophat,
.tg[data-hat="crown"] .hat-crown,
.tg[data-hat="snowflake"] .hat-snowflake,
.tg[data-hat="santa"] .hat-santa,
.tg[data-hat="carnival"] .hat-carnival {
  display: inline;
}
.tg .tgFx {
  position: absolute;
  inset: -18% -22% -6%;
  pointer-events: none;
}
.tg .tgFx:empty {
  display: none;
}
.tg .tgFx.front {
  z-index: 2;
}
.tg .tgFx i {
  position: absolute;
  left: var(--x);
  display: block;
}
.tg .tgFx svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tg .p-snow {
  top: 0;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #bfe6ff;
  opacity: 0;
  animation: tgSnow 3.2s linear infinite;
  animation-delay: var(--d);
}
.tg .p-snow:nth-child(3n) {
  width: 3.4%;
}
@keyframes tgSnow {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translate(8%, 900%);
    opacity: 0;
  }
}
.tg .p-bub {
  bottom: 6%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    #ffffffee 0 14%,
    #bfeaff55 30%,
    #8fd8ff33 70%
  );
  box-shadow: inset 0 0 0 1.5px #ffffffb0;
  opacity: 0;
  animation: tgBub 3.6s ease-in infinite;
  animation-delay: var(--d);
}
.tg .p-bub:nth-child(2n) {
  width: 6%;
}
@keyframes tgBub {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-820%) scale(1);
    opacity: 0;
  }
}
.tg .p-star {
  top: calc(8% + (var(--i) * 13%));
  width: 11%;
  aspect-ratio: 1;
  opacity: 0;
  filter: drop-shadow(0 0 3px #ffe27a);
  animation: tgTwinkle 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}
.tg .p-star:nth-child(2n) {
  width: 8%;
}
@keyframes tgTwinkle {
  0%,
  100% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}
.tg .p-heart {
  bottom: 20%;
  width: 12%;
  aspect-ratio: 1;
  opacity: 0;
  animation: tgHeart 3.4s ease-out infinite;
  animation-delay: var(--d);
}
@keyframes tgHeart {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-10%, -520%) scale(1);
    opacity: 0;
  }
}
.tg .aur {
  position: absolute;
  inset: -2% 2% 8%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 52%,
    #3ee6b0aa 64%,
    #3fa8ff99 74%,
    #8b6cff88 84%,
    transparent 96%
  );
  filter: blur(1.5px);
  animation: tgAur 5s ease-in-out infinite alternate;
}
@keyframes tgAur {
  from {
    transform: scale(0.94) rotate(-6deg);
    opacity: 0.75;
  }
  to {
    transform: scale(1.06) rotate(6deg);
    opacity: 1;
  }
}
.tg .p-glow {
  top: calc(14% + (var(--i) * 15%));
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #7dffd2 45%, transparent 70%);
  opacity: 0;
  animation: tgTwinkle 3s ease-in-out infinite;
  animation-delay: var(--d);
}
.tg .p-glow:nth-child(2n) {
  background: radial-gradient(circle, #fff 0 20%, #c4a2ff 45%, transparent 70%);
}
/* calm mode: the effect is still there, just still */
body.calm .tg .tgFx i,
body.calm .tg .aur {
  animation: none;
  opacity: 0.85;
  transform: none;
}
body.calm .tg .p-snow {
  top: calc(10% + var(--i) * 9%);
}
body.calm .tg .p-bub {
  bottom: calc(10% + var(--i) * 11%);
}
body.calm .tg .p-heart {
  bottom: calc(30% + var(--i) * 12%);
}
/* the halo is an <i> too: its own box wins over the particle lanes */
.tg .tgFx i.aur {
  left: 2%;
  right: 2%;
  top: -2%;
  bottom: 8%;
}

.tg .p-dust {
  top: 0;
  width: 3.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff7d0 0 30%,
    #ffcf3d 60%,
    transparent 72%
  );
  box-shadow: 0 0 5px #ffd56988;
  opacity: 0;
  animation: tgDust 4.4s linear infinite;
  animation-delay: calc(var(--d) * 1.4);
}
@keyframes tgDust {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(14%, 450%);
    opacity: 0.9;
  }
  100% {
    transform: translate(-10%, 900%);
    opacity: 0;
  }
}
.tg .p-conf {
  top: 0;
  width: 4.6%;
  height: 2.6%;
  border-radius: 1px;
  background: #ff5aa8;
  opacity: 0;
  animation: tgConf 3s linear infinite;
  animation-delay: var(--d);
}
.tg .p-conf:nth-child(5n + 1) {
  background: #ffd23d;
}
.tg .p-conf:nth-child(5n + 2) {
  background: #3ee6b0;
}
.tg .p-conf:nth-child(5n + 3) {
  background: #4aa8ff;
}
.tg .p-conf:nth-child(5n + 4) {
  background: #a46cff;
}
@keyframes tgConf {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate(20%, 1400%) rotate(540deg);
    opacity: 0;
  }
}
body.calm .tg .p-dust,
body.calm .tg .p-conf {
  animation: none;
  opacity: 0.85;
  top: calc(12% + var(--i) * 8%);
}