/* Stapel — DOM overlay UI (menus, results, toasts, splash, rotate overlay).
   Every size scales with --u (= canvas width / 720 px), set on #ui by js/ui/dom.js,
   so the UI looks identical on every phone. Before JS runs (splash), --u is
   estimated from the viewport. Palette mirrors PALETTE in js/config.js. */

:root {
  --u: calc(min(100vw, 62.5vh) / 720);
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;

  --ink: #1d2b45;
  --ink-soft: #3c4d6e;
  --muted: #56668a;      /* 5.2:1 on --panel, 5.7:1 on white */
  --line: #e3ebf5;
  --panel: #eef5fc;
  --card: #ffffff;
  --scrim: rgba(12, 32, 66, 0.46);

  --protea: #f25c84;    --protea-l: #ff9ab5;    --protea-d: #b83a5e;
  --karoo: #f39a2b;     --karoo-l: #ffc56e;     --karoo-d: #b86d12;
  --sonneblom: #f7c948; --sonneblom-l: #ffe38c; --sonneblom-d: #c39a1c;
  --bosveld: #5bbf5a;   --bosveld-l: #92e08d;   --bosveld-d: #3b8b3c;
  --oseaan: #2fb5b0;    --oseaan-l: #74ddd8;    --oseaan-d: #1d817d;
  --jakaranda: #8e6ce0; --jakaranda-l: #bba4f5; --jakaranda-d: #6447ad;
  --hemel: #3d8beb;     --hemel-l: #86b9f7;     --hemel-d: #2563b0;
  --klei: #d9483b;      --klei-l: #f28a7f;      --klei-d: #9e2c22;
  --wa: #25d366;        --wa-l: #6ee59a;        --wa-d: #168f45;

  /* effective safe-area insets inside the canvas rect (dom.js measures them) */
  --sat: 0px; --sar: 0px; --sab: 0px; --sal: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  background: #1b3f8f;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #4fb0ee 0%, #2f86d8 48%, #1b3f8f 100%);
  font-family: var(--font);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#game canvas {
  display: block;
  touch-action: none;
}

/* letterboxed column on desktop: lift the game off the backdrop */
@media (hover: hover) and (pointer: fine) {
  #game canvas { box-shadow: 0 0 80px rgba(6, 20, 50, 0.45); }
}

.emoji {
  font-family: var(--emoji);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}

/* ------------------------------------------------------------------------- */
/* Overlay root                                                              */
/* ------------------------------------------------------------------------- */
#ui {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  font-size: calc(28 * var(--u));
  line-height: 1.25;
  color: var(--ink);
}

#ui button {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}

#ui :focus { outline: none; }
#ui :focus-visible {
  outline: calc(6 * var(--u)) solid #fff;
  outline-offset: calc(5 * var(--u));
  box-shadow: 0 0 0 calc(14 * var(--u)) rgba(29, 43, 69, 0.45);
}
/* screens/sheets take focus programmatically for keyboard users; no ring around the whole page */
#ui .screen:focus-visible, #ui .modal:focus-visible { outline: none; box-shadow: none; }

/* zero-specificity reset so component classes always win */
:where(#ui) :where(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }
:where(#ui) :where(ol, ul) { list-style: none; }

svg.ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  overflow: visible;
}

/* ------------------------------------------------------------------------- */
/* Screens & modals                                                          */
/* ------------------------------------------------------------------------- */
.screen, .modal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--sat) + 22 * var(--u))
    calc(var(--sar) + 28 * var(--u))
    calc(var(--sab) + 30 * var(--u))
    calc(var(--sal) + 28 * var(--u));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.26s;
}

.screen::-webkit-scrollbar, .modal::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { display: none; }

.screen.on, .modal.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s;
}

/* content lifts in when its screen appears */
.screen > *, .modal > .sheet {
  transform: translateY(calc(36 * var(--u))) scale(0.98);
  transition: transform 0.34s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.screen.on > *, .modal.on > .sheet { transform: none; }

/* never animate what nobody sees (keeps the GPU free during play) */
.screen:not(.on) *, .screen:not(.on) *::before, .screen:not(.on) *::after,
.modal:not(.on) *, .modal:not(.on) *::before, .modal:not(.on) *::after {
  animation-play-state: paused !important;
}

.screen-menu { z-index: 1; }
.screen-results, .screen-pause { z-index: 2; background: var(--scrim); }
.modal {
  z-index: 5;
  background: var(--scrim);
  align-items: center;
  justify-content: center;
}

.spacer { flex: 1 1 0; min-height: calc(16 * var(--u)); }

/* ------------------------------------------------------------------------- */
/* Cards                                                                     */
/* ------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--card);
  border-radius: calc(44 * var(--u));
  padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(36 * var(--u));
  box-shadow:
    0 calc(8 * var(--u)) 0 rgba(20, 52, 104, 0.12),
    0 calc(26 * var(--u)) calc(50 * var(--u)) rgba(10, 34, 78, 0.3);
}

.label {
  font-size: calc(21 * var(--u));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------------- */
/* Buttons — chunky, rounded, with a real pressed state                       */
/* ------------------------------------------------------------------------- */
/* Button fills are a shade darker than the block palette so white labels reach 3.3–4.3:1. */
.btn {
  --bg: #d9700a;
  --bg-l: #f39a2b;
  --bg-d: #a65400;
  --fg: #fff;
  --depth: calc(10 * var(--u));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  width: 100%;
  min-height: calc(104 * var(--u));
  margin: 0;
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  border: 0;
  border-radius: calc(32 * var(--u));
  background: linear-gradient(180deg, var(--bg-l) 0%, var(--bg) 22%, var(--bg) 100%);
  color: var(--fg);
  font-size: calc(38 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  /* outlined label: readable on every fill */
  text-shadow: 0 calc(3 * var(--u)) 0 var(--bg-d), 0 0 calc(2 * var(--u)) var(--bg-d), 0 0 calc(1 * var(--u)) var(--bg-d);
  box-shadow:
    0 var(--depth) 0 var(--bg-d),
    0 calc(var(--depth) + 10 * var(--u)) calc(22 * var(--u)) rgba(10, 34, 78, 0.28),
    inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.35);
  transform: translateY(0);
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out, filter 0.15s;
}

.btn::after {
  /* glossy highlight */
  content: '';
  position: absolute;
  left: calc(22 * var(--u));
  right: calc(22 * var(--u));
  top: calc(9 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.btn:active, .btn.is-pressed {
  transform: translateY(calc(var(--depth) - 2 * var(--u)));
  box-shadow:
    0 calc(2 * var(--u)) 0 var(--bg-d),
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(10, 34, 78, 0.24),
    inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.25);
}

@media (hover: hover) {
  .btn:hover { filter: brightness(1.06); }
}

.btn .ic { font-size: 1.05em; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.15)); }
.btn .btn-txt { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); min-width: 0; }
.btn .btn-sub {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  opacity: 0.92;
  letter-spacing: 0;
  text-shadow: none;
}

.btn-big { min-height: calc(118 * var(--u)); font-size: calc(42 * var(--u)); border-radius: calc(36 * var(--u)); }

.btn-white {
  --bg: #ffffff; --bg-l: #ffffff; --bg-d: #c9d7ea; --fg: var(--ink);
  text-shadow: none;
}
.btn-white::after { display: none; }
.card .btn-white { --bg: var(--panel); --bg-l: var(--panel); --bg-d: #cfdcee; }
.btn-quit { --fg: var(--klei-d); }
.btn-white .ic { filter: none; }
.btn-green  { --bg: #3f9a3e; --bg-l: #5bbf5a; --bg-d: #2b6e2b; }
.btn-teal   { --bg: #1d8f8a; --bg-l: #2fb5b0; --bg-d: #146a66; }
.btn-purple { --bg: var(--jakaranda); --bg-l: var(--jakaranda-l); --bg-d: var(--jakaranda-d); }
.btn-blue   { --bg: #2f74cf; --bg-l: var(--hemel); --bg-d: var(--hemel-d); }
.btn-wa     { --bg: #128c4a; --bg-l: #25d366; --bg-d: #0c6434; }

.btn-row { display: flex; gap: calc(18 * var(--u)); }
.btn-row > .btn { flex: 1 1 0; min-width: 0; padding-left: calc(18 * var(--u)); padding-right: calc(18 * var(--u)); white-space: nowrap; }

/* round icon buttons (sheet close) */
.icon-btn {
  --depth: calc(6 * var(--u));
  display: grid;
  place-items: center;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: calc(40 * var(--u));
  box-shadow:
    0 var(--depth) 0 #c9d7ea,
    0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(10, 34, 78, 0.22);
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out, color 0.15s, background 0.15s;
}
.icon-btn:active {
  transform: translateY(calc(var(--depth) - 1 * var(--u)));
  box-shadow: 0 calc(1 * var(--u)) 0 #c9d7ea, 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(10, 34, 78, 0.2);
}

/* ------------------------------------------------------------------------- */
/* Logo: letters on toy blocks, stacked a little askew                       */
/* ------------------------------------------------------------------------- */
.logo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(7 * var(--u));
  padding-top: calc(120 * var(--u));   /* the letters sit on the crane jib (LAYOUT.jibY) */
  font-size: calc(70 * var(--u));
}

.lb {
  --c: var(--protea); --cl: var(--protea-l); --cd: var(--protea-d);
  --r: 0deg; --y: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(98 * var(--u));
  height: calc(98 * var(--u));
  border-radius: calc(16 * var(--u));
  border: calc(4 * var(--u)) solid var(--cd);
  background: linear-gradient(180deg, var(--cl) 0 15%, var(--c) 15% 80%, var(--cd) 80% 100%);
  box-shadow:
    inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.06),
    0 calc(12 * var(--u)) calc(18 * var(--u)) rgba(10, 34, 78, 0.28);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 calc(5 * var(--u)) 0 var(--cd),
    calc(2 * var(--u)) 0 0 var(--cd),
    calc(-2 * var(--u)) 0 0 var(--cd),
    0 calc(-2 * var(--u)) 0 var(--cd);
  transform-origin: 50% 100%;
  transform: translateY(var(--y)) rotate(var(--r));
  animation: lb-wobble var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

.lb > span { transform: translateY(calc(-3 * var(--u))); }

.lb:nth-child(1) { --c: var(--protea);    --cl: var(--protea-l);    --cd: var(--protea-d);    --r: -5deg;   --y: calc(4 * var(--u));  --dur: 3.1s; --delay: -0.4s; }
.lb:nth-child(2) { --c: var(--karoo);     --cl: var(--karoo-l);     --cd: var(--karoo-d);     --r: 3deg;    --y: calc(-6 * var(--u)); --dur: 2.7s; --delay: -1.3s; }
.lb:nth-child(3) { --c: var(--sonneblom); --cl: var(--sonneblom-l); --cd: var(--sonneblom-d); --r: -2deg;   --y: calc(2 * var(--u));  --dur: 3.4s; --delay: -0.9s; }
.lb:nth-child(4) { --c: var(--bosveld);   --cl: var(--bosveld-l);   --cd: var(--bosveld-d);   --r: 4deg;    --y: calc(-8 * var(--u)); --dur: 2.9s; --delay: -2.1s; }
.lb:nth-child(5) { --c: var(--oseaan);    --cl: var(--oseaan-l);    --cd: var(--oseaan-d);    --r: -3.5deg; --y: calc(1 * var(--u));  --dur: 3.3s; --delay: -1.7s; }
.lb:nth-child(6) { --c: var(--jakaranda); --cl: var(--jakaranda-l); --cd: var(--jakaranda-d); --r: 6deg;    --y: calc(-46 * var(--u)); }

/* the last letter dangles from the crane hook, about to be placed */
.lb.hang {
  transform-origin: 50% calc(-62 * var(--u));
  animation: lb-swing 2.6s ease-in-out infinite;
}
.lb.hang::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14 * var(--u));
  width: calc(5 * var(--u));
  height: calc(var(--rope, 64) * var(--u));
  margin-left: calc(-2.5 * var(--u));
  border-radius: 999px;
  background: linear-gradient(0deg, #2b2b2b 60%, rgba(43, 43, 43, 0));
}
.screen-menu .lb.hang::before { --rope: 420; background: #2b2b2b; }
.lb.hang::after {
  /* hook */
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2 * var(--u));
  width: calc(26 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(-13 * var(--u));
  border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  background: #f5b800;
  border: calc(3 * var(--u)) solid #2b2b2b;
}

@keyframes lb-wobble {
  0%, 100% { transform: translateY(var(--y)) rotate(calc(var(--r) - 1.6deg)); }
  50% { transform: translateY(var(--y)) rotate(calc(var(--r) + 1.6deg)); }
}

@keyframes lb-swing {
  0%, 100% { transform: translateY(var(--y)) rotate(calc(var(--r) - 4deg)); }
  50% { transform: translateY(var(--y)) rotate(calc(var(--r) - 12deg)); }
}

.tagline {
  margin-top: calc(22 * var(--u));
  text-align: center;
  font-size: calc(34 * var(--u));
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0 calc(3 * var(--u)) 0 rgba(29, 43, 69, 0.42),
    0 0 calc(18 * var(--u)) rgba(29, 43, 69, 0.25);
}

/* a soft navy pill behind the tagline keeps it readable over clouds and sky (≥ 6:1) */
.tagline > span {
  display: inline-block;
  padding: calc(6 * var(--u)) calc(22 * var(--u));
  border-radius: 999px;
  background: rgba(29, 43, 69, 0.38);
}

/* ------------------------------------------------------------------------- */
/* Menu                                                                      */
/* ------------------------------------------------------------------------- */
.screen-menu {
  background:
    linear-gradient(180deg, rgba(14, 60, 120, 0.18) 0%, rgba(14, 60, 120, 0) 26%),
    linear-gradient(0deg, rgba(14, 50, 100, 0.28) 0%, rgba(14, 50, 100, 0) 46%);
}

/* icon dock: how-to, stats, sound, vibration */
.dock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(22 * var(--u));
}
.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: calc(120 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(29, 43, 69, 0.5), 0 0 calc(10 * var(--u)) rgba(29, 43, 69, 0.3);
}
.dock-ic {
  --depth: calc(7 * var(--u));
  display: grid;
  place-items: center;
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: calc(40 * var(--u));
  text-shadow: none;
  box-shadow:
    0 var(--depth) 0 #c9d7ea,
    0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(10, 34, 78, 0.24);
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out, color 0.15s, background 0.15s;
}
.dock-btn:active .dock-ic {
  transform: translateY(calc(var(--depth) - 1 * var(--u)));
  box-shadow: 0 calc(1 * var(--u)) 0 #c9d7ea, 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(10, 34, 78, 0.2);
}
.dock-btn[aria-pressed="false"] .dock-ic { color: #9aa8c0; background: #e6ecf5; }
.card .dock-btn { color: var(--muted); text-shadow: none; }
.card .dock-ic { background: var(--panel); box-shadow: 0 var(--depth) 0 #d5e2f2; }
.card .dock-btn:active .dock-ic { box-shadow: 0 calc(1 * var(--u)) 0 #d5e2f2; }
#ui .dock-btn:focus-visible { outline: none; box-shadow: none; }
#ui .dock-btn:focus-visible .dock-ic { outline: calc(5 * var(--u)) solid #fff; outline-offset: calc(4 * var(--u)); }
/* inside white cards a white ring is invisible */
#ui .card .dock-btn:focus-visible .dock-ic { outline-color: var(--hemel-d); }
#ui .card .btn:focus-visible { outline: calc(5 * var(--u)) solid var(--hemel-d); outline-offset: calc(4 * var(--u)); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(24 * var(--u)) 0 calc(18 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: calc(30 * var(--u));
  font-weight: 900;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(10, 34, 78, 0.2);
  white-space: nowrap;
}
.chip .emoji { font-size: calc(34 * var(--u)); }
.chip.is-zero { opacity: 0.85; }
.chip.is-zero .emoji { filter: grayscale(1); opacity: 0.6; }

.menu-stack { display: flex; flex-direction: column; gap: calc(22 * var(--u)); }

.daily-card { padding-top: calc(30 * var(--u)); }
/* die weekkis on the daily card (1.10): seven boxes, today's lit, and what it holds */
.week-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u)) calc(10 * var(--u));
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #fff7dd;
  color: #6b4d00;
  font-weight: 800;
}
.wk-title { font-size: max(10px, calc(18 * var(--u))); letter-spacing: 0.04em; text-transform: uppercase; }
.wk-cells { display: inline-flex; gap: calc(4 * var(--u)); }
.wk-cell {
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #fff;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #f0d78f;
  font-size: calc(20 * var(--u));
  opacity: 0.55;
}
.wk-cell.is-done { opacity: 1; background: var(--bosveld); color: #fff; box-shadow: none; font-weight: 900; }
.wk-cell.is-today { opacity: 1; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--karoo); animation: wk-pulse 1.6s ease-in-out infinite; }
.wk-cell.is-big { width: calc(42 * var(--u)); }
.wk-line, .wk-shield { font-size: max(12px, calc(21 * var(--u))); }
@keyframes wk-pulse { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .wk-cell.is-today { animation: none; } }
.rm .wk-cell.is-today { animation: none; }

.daily-head {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-bottom: calc(22 * var(--u));
}
.daily-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(82 * var(--u));
  height: calc(82 * var(--u));
  border-radius: calc(22 * var(--u));
  background: linear-gradient(180deg, var(--sonneblom-l), var(--sonneblom));
  box-shadow: inset 0 calc(-6 * var(--u)) 0 var(--sonneblom-d);
  font-size: calc(46 * var(--u));
}
.daily-title { font-size: calc(40 * var(--u)); font-weight: 900; line-height: 1.05; }
.daily-date { margin-top: calc(6 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 700; color: var(--muted); }
.daily-card > .streak {
  position: absolute;
  top: calc(-26 * var(--u));
  right: calc(26 * var(--u));
  height: calc(58 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(14 * var(--u));
  background: linear-gradient(180deg, #fff6ea, #ffe4c2);
  color: var(--karoo-d);
  box-shadow: inset 0 calc(-5 * var(--u)) 0 #f6cf9c, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(10, 34, 78, 0.22);
  transform: rotate(3deg);
}
.daily-card > .streak.is-zero { background: #fff; color: var(--muted); box-shadow: inset 0 calc(-5 * var(--u)) 0 #d5e2f2, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(10, 34, 78, 0.18); }

.forecast {
  border-radius: calc(28 * var(--u));
  background: var(--panel);
  padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
}
.forecast .label { text-align: center; }
.fc-strip {
  display: flex;
  justify-content: space-around;
  gap: calc(6 * var(--u));
  margin-top: calc(14 * var(--u));
}
.fc-item {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
}
.fc-emo {
  display: grid;
  place-items: center;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(5 * var(--u)) 0 #d5e2f2;
  font-size: calc(46 * var(--u));
}
.fc-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(19 * var(--u));
  font-weight: 800;
  color: var(--ink-soft);
}

/* "Besoekers vandag: 🐒 🤡" under the weather strip */
.fc-visitors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  font-size: max(11px, calc(20 * var(--u)));
  font-weight: 800;
  color: var(--ink-soft);
}
.fc-who .emoji { font-size: calc(32 * var(--u)); line-height: 1; }

.note {
  margin: calc(16 * var(--u)) 0 calc(22 * var(--u));
  text-align: center;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: var(--muted);
}

.note.nudge { margin-top: calc(-8 * var(--u)); color: var(--ink-soft); font-weight: 800; }

/* Afrikaanse spreekwoorde: "Spreekwoord van die dag" (menu), one line on results and pause.
   The menu one is absolutely placed in the spacer gap, so it never adds height (dom.js fitSaying()
   hides it with .is-off when the gap is too small). */
.spacer.has-saying { position: relative; }
.saying-day {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(36 * var(--u));
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.saying-day.is-off { visibility: hidden; }
.saying-inner { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); max-width: 100%; }
.saying-label {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.88;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(29, 43, 69, 0.45);
}
.saying-label::before, .saying-label::after {
  content: '';
  width: calc(34 * var(--u));
  height: calc(2 * var(--u));
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}
.saying-text {
  margin: 0;
  font-size: calc(30 * var(--u));
  font-style: italic;
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
  text-shadow: 0 calc(3 * var(--u)) 0 rgba(29, 43, 69, 0.42), 0 0 calc(16 * var(--u)) rgba(29, 43, 69, 0.28);
}
.saying-line {
  margin: 0;
  font-size: calc(26 * var(--u));
  font-style: italic;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ink-soft);
}
.res-saying {
  margin-top: calc(8 * var(--u));
  padding: 0 calc(24 * var(--u));
  color: #fff;
  opacity: 0.95;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(10, 30, 60, 0.4);
}

.done-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(24 * var(--u));
  padding: calc(20 * var(--u)) calc(16 * var(--u));
  border-radius: calc(28 * var(--u));
  background: linear-gradient(180deg, #eafbea, #dff5e0);
}
.done-title { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 900; color: var(--bosveld-d); }
.done-stats { font-size: calc(30 * var(--u)); font-weight: 900; color: var(--ink); }
.done-stats .sep { color: var(--muted); margin: 0 calc(10 * var(--u)); }

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 calc(12 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 800;
  color: var(--muted);
}
.countdown b {
  font-size: calc(36 * var(--u));
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.btn-practice .btn-txt { align-items: flex-start; }

/* Oefen + Uitdagersreeks side by side on the menu (one row: the menu is no taller than before) */
.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.play-row .btn { padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(32 * var(--u)); }
.play-row .btn > .ic, .play-row .btn > .emoji { display: none; }
.play-row .btn .btn-txt { align-items: center; }
.play-row .btn-sub { font-size: max(11px, calc(20 * var(--u))); white-space: nowrap; }

/* pinned house ad (sponsors.json) + "Adverteer hier": quieter than the play buttons */
.menu-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
}
.house-ad {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: 100%;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    0 calc(5 * var(--u)) 0 rgba(20, 52, 104, 0.12),
    0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(10, 34, 78, 0.18);
  transition: transform 0.07s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.house-ad:active { transform: translateY(calc(3 * var(--u))); }
.ad-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  text-align: left;
}
.ad-label {
  font-size: calc(16 * var(--u));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ad-title, .ad-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-title { font-size: calc(27 * var(--u)); font-weight: 900; line-height: 1.15; }
.ad-text { font-size: calc(21 * var(--u)); font-weight: 700; color: var(--ink-soft); }
.ad-go {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  background: var(--panel);
  color: var(--hemel-d);
  font-size: calc(28 * var(--u));
}
.advertise-link {
  font-size: calc(21 * var(--u));
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(29, 43, 69, 0.5), 0 0 calc(10 * var(--u)) rgba(29, 43, 69, 0.3);
}
#ui .house-ad:focus-visible, #ui .advertise-link:focus-visible {
  outline: calc(5 * var(--u)) solid #fff;
  outline-offset: calc(4 * var(--u));
}

/* ------------------------------------------------------------------------- */
/* Sheets (how-to, stats)                                                    */
/* ------------------------------------------------------------------------- */
.sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-bottom: calc(20 * var(--u));
  padding-right: calc(76 * var(--u));
  min-height: calc(80 * var(--u));
}
.sheet-head h2 { font-size: calc(46 * var(--u)); font-weight: 900; line-height: 1.05; }
.sheet-head .emoji { font-size: calc(54 * var(--u)); }
.sheet .close, .duel-card > .close, .duel-wait > .close {
  position: absolute;
  z-index: 2;   /* always above the sheet's own head (the shop's head is positioned and came later) */
  top: calc(26 * var(--u));
  right: calc(26 * var(--u));
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  font-size: calc(36 * var(--u));
  background: var(--panel);
  box-shadow: 0 calc(5 * var(--u)) 0 #d5e2f2;
}
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  margin: 0 calc(-8 * var(--u));
  padding: 0 calc(8 * var(--u)) calc(8 * var(--u));
}
.sheet-body.more {
  /* fade the bottom edge while there is more to scroll */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70 * var(--u)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 70 * var(--u)), transparent);
}
.sheet-foot { margin-top: calc(24 * var(--u)); }
.sheet-link {
  display: block;
  margin-top: calc(18 * var(--u));
  text-align: center;
  font-size: max(13px, calc(24 * var(--u)));
  font-weight: 800;
  color: var(--muted);
}

/* how-to */
.steps { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.step {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--panel);
}
.step-ic {
  --c: var(--protea); --cd: var(--protea-d);
  flex: none;
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--c);
  box-shadow: inset 0 calc(-6 * var(--u)) 0 var(--cd);
  font-size: calc(40 * var(--u));
  transform: rotate(var(--r, -3deg));
}
.step p { font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.3; color: var(--ink); }

/* stats */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: calc(140 * var(--u));
  padding: calc(14 * var(--u)) calc(8 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--panel);
  text-align: center;
}
.tile b { font-size: calc(44 * var(--u)); font-weight: 900; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile span { font-size: calc(20 * var(--u)); font-weight: 800; color: var(--muted); line-height: 1.15; }
.tile.hot { background: linear-gradient(180deg, #fff1df, #ffe4c2); }
.tile.hot b { color: var(--karoo-d); }

.chart-title { margin: calc(28 * var(--u)) 0 calc(14 * var(--u)); }
.bars {
  display: flex;
  align-items: flex-end;
  gap: calc(12 * var(--u));
  height: calc(250 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;
  border-radius: calc(26 * var(--u));
  background: var(--panel);
}
.bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.bar-val {
  margin-bottom: calc(6 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 900;
  color: var(--ink-soft);
  white-space: nowrap;
}
.bar-fill {
  width: 100%;
  min-height: calc(10 * var(--u));
  height: var(--h, 4%);
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  background: linear-gradient(180deg, var(--hemel-l), var(--hemel));
  box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--hemel-d);
  transform-origin: 50% 100%;
  animation: bar-grow 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.bar.today .bar-fill { background: linear-gradient(180deg, var(--karoo-l), var(--karoo)); box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--karoo-d); }
.bar.empty .bar-fill { background: transparent; box-shadow: none; border: calc(3 * var(--u)) dashed #c3d1e4; min-height: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.bar-day {
  width: 100%;
  margin-top: calc(8 * var(--u));
  padding-bottom: calc(10 * var(--u));
  text-align: center;
  font-size: calc(20 * var(--u));
  font-weight: 900;
  color: var(--muted);
}
.bar.today .bar-day { color: var(--karoo-d); }

@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.empty-note {
  margin-top: calc(18 * var(--u));
  text-align: center;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: var(--muted);
}

/* ------------------------------------------------------------------------- */
/* Uitdagersreeks (head-to-head)                                             */
/* ------------------------------------------------------------------------- */
.screen-duel, .screen-duelwait { z-index: 2; background: var(--scrim); }
/* centred while it fits, from the top (and scrollable) when it doesn't: never justify-content: center here */
.screen-duelwait > * { margin-top: auto; margin-bottom: auto; }
.duel-wrap { display: flex; flex-direction: column; gap: calc(18 * var(--u)); margin: auto 0; }
.duel-card, .duel-wait { display: flex; flex-direction: column; align-items: stretch; gap: calc(18 * var(--u)); text-align: center; }
.duel-wait { margin: auto 0; }
.duel-head { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: 0 calc(84 * var(--u)); }
.duel-head h2 { font-size: calc(48 * var(--u)); font-weight: 900; }
.duel-head .emoji { font-size: calc(52 * var(--u)); }
.duel-intro, .duel-sub { margin: 0; font-size: max(13px, calc(25 * var(--u))); font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.nick { display: flex; flex-direction: column; gap: calc(8 * var(--u)); text-align: left; }
.nick-input, .link-box {
  width: 100%;
  border: calc(3 * var(--u)) solid #cfdcee;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
}
.nick-input { font-size: max(16px, calc(30 * var(--u))); padding: calc(16 * var(--u)) calc(22 * var(--u)); border-radius: calc(24 * var(--u)); }
.link-box { font-size: max(12px, calc(21 * var(--u))); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); text-overflow: ellipsis; }
.nick-input:focus, .link-box:focus { outline: none; border-color: var(--hemel); }
.nick-msg { margin: 0; min-height: 1.3em; font-size: max(12px, calc(21 * var(--u))); font-weight: 700; color: var(--muted); }
.nick-msg.bad { color: var(--klei-d); }
.duel-btns { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.duel-btns .btn .emoji, .duel-wait .btn .emoji { font-size: 1.05em; }
.duel-wait .btn:not(.btn-big):not(.btn-mini):not(.btn-wa) { font-size: calc(32 * var(--u)); }
.duel-note { margin: 0; }
.duel-record { margin: 0; font-size: max(12px, calc(23 * var(--u))); font-weight: 800; color: var(--ink-soft); }
/* Uitdagersreeks rank and season (1.8) */
.rank-box { display: grid; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(24 * var(--u)); background: #eef6ff; }
.rank-box .pcard { margin: 0 auto; }
.rank-season { margin: 0; font-size: max(12px, calc(22 * var(--u))); font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.rank-now { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); font-size: max(15px, calc(32 * var(--u))); }
.rank-now .emoji { font-size: 1.3em; }
.rank-now span { font-weight: 700; color: var(--ink-soft); font-size: 0.8em; }
.rank-bar { height: calc(16 * var(--u)); min-height: 8px; border-radius: 999px; background: rgba(20, 28, 48, 0.12); overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #f5b833, #f08c2b); }
.rank-next { margin: 0; font-size: max(12px, calc(22 * var(--u))); font-weight: 800; color: var(--ink-soft); }
.season-notes { display: grid; gap: calc(10 * var(--u)); justify-items: center; }
.season-notes p { margin: 0; }
.rank-badges { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-weight: 800; color: var(--ink-soft); }
.rank-badges .emoji { font-size: calc(40 * var(--u)); }
.rank-how { font-size: max(11px, calc(21 * var(--u))); line-height: 1.4; }
.duel-wait h2 { font-size: calc(44 * var(--u)); font-weight: 900; }
.duel-count { margin: 0; min-height: 1.2em; font-size: calc(30 * var(--u)); font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.duel-wait .share-row { margin-top: 0; }
.vs-badge { margin: 0; font-size: calc(80 * var(--u)); line-height: 1; }
.vs-title { font-size: calc(54 * var(--u)); font-weight: 900; overflow-wrap: anywhere; }
.vs-count { margin: 0; min-height: 1.1em; font-size: calc(130 * var(--u)); font-weight: 900; line-height: 1.05; color: var(--jakaranda-d); font-variant-numeric: tabular-nums; }
.spinner {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  border: calc(8 * var(--u)) solid #d5e2f2;
  border-top-color: var(--jakaranda);
  animation: duel-spin 0.9s linear infinite;
}
@keyframes duel-spin { to { transform: rotate(360deg); } }
#ui.rm .spinner { animation-duration: 3s; }
.btn-row .btn-duel-again { font-size: calc(32 * var(--u)); }
.tile-you b { color: #a86a00; }
.tile-them b { color: var(--hemel-d); }
.tile-them span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ------------------------------------------------------------------------- */
/* Pause                                                                     */
/* ------------------------------------------------------------------------- */
.screen-pause { justify-content: center; }
.pause-card { display: flex; flex-direction: column; align-items: stretch; gap: calc(20 * var(--u)); margin: auto 0; text-align: center; }
.pause-ic {
  align-self: center;
  display: grid;
  place-items: center;
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  margin-top: calc(-100 * var(--u));
  border-radius: 50%;
  background: linear-gradient(180deg, var(--hemel-l), var(--hemel));
  border: calc(8 * var(--u)) solid #fff;
  box-shadow: 0 calc(14 * var(--u)) calc(24 * var(--u)) rgba(10, 34, 78, 0.25), inset 0 calc(-8 * var(--u)) 0 var(--hemel-d);
  color: #fff;
  font-size: calc(56 * var(--u));
}
.pause-card h2 { font-size: calc(52 * var(--u)); font-weight: 900; }
.warn {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fff4d6;
  color: #7a5200;
  text-align: left;
  font-size: calc(25 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}
.warn .emoji { font-size: calc(32 * var(--u)); }
.pause-card .dock { margin-top: calc(6 * var(--u)); }

/* ------------------------------------------------------------------------- */
/* Results                                                                   */
/* ------------------------------------------------------------------------- */
.res-wrap { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin: auto 0; }

.res-head { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.res-head .chip { height: calc(54 * var(--u)); font-size: calc(24 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.res-title {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(48 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 calc(4 * var(--u)) 0 rgba(10, 30, 60, 0.45);
}
.res-title .emoji { font-size: calc(58 * var(--u)); animation: pop-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.15s both; }
.res-sub { margin-top: calc(6 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; opacity: 0.95; text-shadow: 0 calc(2 * var(--u)) 0 rgba(10, 30, 60, 0.4); }

.res-card { padding-top: calc(26 * var(--u)); }
/* ✕ in the results card's corner: back to the start screen */
.res-card .res-close {
  position: absolute;
  top: calc(20 * var(--u));
  right: calc(20 * var(--u));
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  min-width: 44px;
  min-height: 44px;
  font-size: calc(32 * var(--u));
  background: var(--panel);
  box-shadow: 0 calc(5 * var(--u)) 0 #d5e2f2;
}

.res-card.has-record { margin-top: calc(24 * var(--u)); }
.record {
  position: absolute;
  top: calc(-34 * var(--u));
  right: calc(26 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sonneblom-l), var(--sonneblom));
  box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--sonneblom-d), 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(10, 34, 78, 0.25);
  color: #5c3d00;
  font-size: calc(26 * var(--u));
  font-weight: 900;
  transform: rotate(4deg);
  animation: record-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s both;
}
.record .emoji { font-size: calc(32 * var(--u)); }

.res-height { display: flex; flex-direction: column; align-items: center; }
.res-height .label { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.res-height .label .emoji { font-size: calc(26 * var(--u)); }
.big-m {
  font-size: calc(120 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 calc(6 * var(--u)) 0 #e3ecf7;
}
.res-time { margin-top: calc(12 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; color: var(--muted); }
/* how today's tower compares with the other players; arrives a moment after the card */
.res-pct {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  max-width: 100%;
  margin-top: calc(14 * var(--u));
  padding: calc(7 * var(--u)) calc(18 * var(--u)) calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: #e4f6f5;
  color: var(--oseaan-d);
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  animation: pop-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.res-pct .emoji { flex: none; font-size: calc(24 * var(--u)); }
#ui.compact .res-pct { margin-top: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); font-size: calc(19 * var(--u)); }

.res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
/* 1.8: what the game earned ("🪙 +18 · jy het 250") and, after a match, the rank points */
.res-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.res-reward > span {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(18 * var(--u)) calc(7 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: #fff4cc;
  color: #6b4d00;
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 800;
}
.res-reward .emoji { font-size: calc(26 * var(--u)); }
.res-reward b { font-size: max(14px, calc(26 * var(--u))); }
.res-reward .rw-sub { font-weight: 700; opacity: 0.8; }
.res-reward .rw-rank { background: #ece6ff; color: #45308f; }
/* the weekkis box on the results (1.10): its own line, the notes under it */
.res-reward .rw-week { flex-direction: column; gap: calc(2 * var(--u)); border-radius: calc(22 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); background: #e7f7e3; color: #22582a; text-align: center; }
.res-reward .rw-week.is-full { background: #fff0c2; color: #6b4d00; box-shadow: 0 0 0 calc(3 * var(--u)) #f7c948; }
.res-reward .rw-rank.is-up { background: #ffe9a8; color: #6b4d00; animation: rank-up 0.9s ease-out both; }
@keyframes rank-up { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .res-reward .rw-rank.is-up { animation: none; } }
.res-stats .tile { min-height: calc(112 * var(--u)); padding: calc(10 * var(--u)) calc(4 * var(--u)); border-radius: calc(22 * var(--u)); }
.res-stats .tile b { font-size: calc(38 * var(--u)); }
.res-stats .tile span { font-size: calc(18 * var(--u)); }

.grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;            /* rows read left to right like the share text */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  gap: calc(4 * var(--u));
  margin-top: calc(22 * var(--u));
  font-size: calc(40 * var(--u));
}
.grid-row { position: relative; display: flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(46 * var(--u)); }
/* "+N" and the 🌊/💥 hang off the end of the last row, so they never widen or shift the grid */
.grid-tail { position: absolute; left: 100%; top: 0; bottom: 0; display: flex; align-items: center; gap: calc(4 * var(--u)); padding-left: calc(4 * var(--u)); white-space: nowrap; }
.grid-tail.inline { position: static; padding-left: 0; }
.grid-row .emoji { display: inline-block; width: calc(46 * var(--u)); text-align: center; animation: cell-in 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(0.2s + var(--i, 0) * 28ms); }
.grid-more { margin-left: calc(6 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 900; color: var(--muted); }

.wx {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(18 * var(--u));
}
.wx .label { margin-right: calc(4 * var(--u)); }
.wx-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(48 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(10 * var(--u));
  border-radius: 999px;
  background: var(--panel);
  font-size: calc(21 * var(--u));
  font-weight: 800;
  color: var(--ink-soft);
}
.wx-chip .emoji { font-size: calc(28 * var(--u)); }
.wx-chip.solo { padding: 0 calc(14 * var(--u)); }
/* one line about the day's visitors ("Jy het Skelm Sakkie gevang! 👮") */
.res-visitors {
  margin: calc(14 * var(--u)) 0 0;
  text-align: center;
  font-size: max(12px, calc(22 * var(--u)));
  font-weight: 800;
  color: var(--ink-soft);
}

.share-row { display: flex; gap: calc(14 * var(--u)); margin-top: calc(24 * var(--u)); }
.share-row .btn { min-height: calc(100 * var(--u)); }
.share-row .btn-wa { flex: 1 1 0; min-width: 0; gap: calc(10 * var(--u)); font-size: calc(28 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); white-space: nowrap; }
.share-row .btn-wa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.share-row .btn-mini {
  flex: 0 0 calc(112 * var(--u));
  min-width: 0;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(10 * var(--u)) calc(6 * var(--u));
  font-size: calc(22 * var(--u));
}
.share-row .btn-mini .ic { font-size: calc(36 * var(--u)); }
.btn-wa .ic { font-size: calc(38 * var(--u)); }

.res-foot {
  display: flex;
  align-items: stretch;
  padding: calc(14 * var(--u)) calc(10 * var(--u));
  border-radius: calc(32 * var(--u));
}
.foot-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  text-align: center;
}
.foot-cell + .foot-cell { border-left: calc(3 * var(--u)) solid var(--line); }
.foot-cell b {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(40 * var(--u));
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.foot-cell b .emoji { font-size: calc(36 * var(--u)); }
.foot-cell span { font-size: calc(20 * var(--u)); font-weight: 800; color: var(--muted); }
.foot-cell.streak-cell b { color: var(--karoo-d); }
.foot-cell.streak-cell.is-zero b { color: var(--muted); }

/* confetti for a new record — little blocks raining down */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.confetti i {
  position: absolute;
  top: calc(-40 * var(--u));
  left: var(--x);
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--c);
  box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.18);
  animation: confetti-fall var(--t) cubic-bezier(0.25, 0.4, 0.5, 1) var(--d) both;
}

@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * var(--u)), calc(1700 * var(--u))) rotate(var(--rot)); opacity: 0; }
}
@keyframes pop-in { from { transform: scale(0.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes record-pop { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } to { transform: rotate(4deg); opacity: 1; } }
@keyframes cell-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* The search chip (1.10): an Oefen tower while the Uitdagersreeks looks for an opponent */
.search-chip {
  position: absolute;
  top: calc(var(--sat) + 138 * var(--u));
  left: calc(var(--sal) + 12 * var(--u));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(100, 71, 173, 0.92);
  color: #fff;
  font-weight: 800;
  font-size: max(12px, calc(22 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(5, 15, 35, 0.3);
  pointer-events: none;
}
.search-chip[hidden] { display: none; }
.search-chip .spinner.small { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-width: calc(3 * var(--u)); margin: 0; }
.search-stop { pointer-events: auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; }

/* ------------------------------------------------------------------------- */
/* The short lesson (1.10): one card at the top; the game goes on underneath  */
/* ------------------------------------------------------------------------- */
.tutor {
  position: absolute;
  top: calc(var(--sat) + 6 * var(--u));
  left: calc(var(--sal) + 10 * var(--u));
  right: calc(var(--sar) + max(50px, 108 * var(--u)));   /* the pause button stays free */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(26 * var(--u));
  background: rgba(12, 32, 66, 0.92);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(5, 15, 35, 0.35);
  color: #fff;
  pointer-events: none;   /* only its buttons take taps: a tap anywhere else still drops a block */
  animation: punish-in 0.25s ease-out both;
}
.tutor[hidden], .tutor.is-away { display: none; }
.tutor.is-done { flex-direction: column; align-items: stretch; text-align: center; }
.tutor-step {
  flex: none;
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--sonneblom);
  color: #3d2c00;
  font-weight: 900;
  font-size: max(12px, calc(22 * var(--u)));
}
.tutor-text { flex: 1 1 auto; margin: 0; font-weight: 800; font-size: max(13px, calc(25 * var(--u))); line-height: 1.3; }
.tutor-skip, .tutor-btns .btn { pointer-events: auto; }
.tutor-skip {
  flex: none;
  border: 0;
  background: none;
  color: #cfe9ff;
  font: inherit;
  font-weight: 800;
  font-size: max(12px, calc(21 * var(--u)));
  text-decoration: underline;
  cursor: pointer;
  padding: calc(8 * var(--u));
}
.tutor-btns { display: grid; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.lesson-link { border: 0; background: none; font: inherit; cursor: pointer; min-height: 44px; padding: 10px 16px; }

/* ------------------------------------------------------------------------- */
/* Uitdagersreeks: choose a punishment (the tower keeps going underneath)     */
/* ------------------------------------------------------------------------- */
.punish {
  position: absolute;
  top: calc(var(--sat) + 6 * var(--u));
  left: calc(var(--sal) + 10 * var(--u));
  right: calc(var(--sar) + max(50px, 108 * var(--u)));   /* the pause button stays free */
  z-index: 5;
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u));
  border-radius: calc(26 * var(--u));
  background: rgba(12, 32, 66, 0.9);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(5, 15, 35, 0.35);
  color: #fff;
  pointer-events: none;   /* only the buttons take taps: a tap anywhere else still drops a block */
  animation: punish-in 0.25s ease-out both;
}
.punish[hidden] { display: none; }
.punish-title {
  margin: 0 0 calc(8 * var(--u));
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 900;
  font-size: max(12px, calc(24 * var(--u)));
}
.punish-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); }
.punish-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  min-width: 0;
  min-height: 44px;
  padding: calc(8 * var(--u)) calc(2 * var(--u)) calc(7 * var(--u));
  border: 0;
  border-radius: calc(18 * var(--u));
  background: #fff;
  color: var(--ink);
  font: 900 max(10px, calc(19 * var(--u))) / 1.1 var(--font);
  box-shadow: 0 calc(4 * var(--u)) 0 #c9d7ea;
  pointer-events: auto;
}
.punish-btn .emoji { font-size: calc(44 * var(--u)); line-height: 1; }
.punish-btn b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.punish-btn small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: max(9px, calc(15 * var(--u))); color: var(--muted); }
.punish-btn:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 #c9d7ea; }
.punish-time {
  height: calc(6 * var(--u));
  margin-top: calc(8 * var(--u));
  border-radius: 999px;
  background: #ffd23f;
  transform-origin: left center;
  animation: punish-time var(--ms, 7s) linear both;
}
@keyframes punish-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes punish-in { from { transform: translateY(calc(-30 * var(--u))); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .punish { animation: none; } }

/* ------------------------------------------------------------------------- */
/* 1.8 Winkel: the shop sheet, player cards, frames and win celebrations      */
/* ------------------------------------------------------------------------- */
.dock-shop .dock-ic { position: relative; }
/* the player's coins on the Winkel button: a coin and the amount, so it never reads as a notification count */
.dock-coins {
  position: absolute;
  right: calc(-30 * var(--u));
  top: calc(-12 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u));
  border: calc(2 * var(--u)) solid #e3a714;
  border-radius: 999px;
  background: #fff4cc;
  color: #6b4d00;
  font: 900 max(10px, calc(18 * var(--u))) / 1.2 var(--font);
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(10, 34, 78, 0.25);
}
.dock-coins .emoji { font-size: 1.15em; line-height: 1; }
.shop-sheet .sheet-head { position: relative; }
.shop-coins {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-left: auto;
  padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: #fff4cc;
  color: #6b4d00;
  font-size: max(14px, calc(28 * var(--u)));
}
.shop-coins .emoji { font-size: calc(32 * var(--u)); }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(6 * var(--u)); border-radius: 999px; background: var(--panel); }
.shop-tab { padding: calc(12 * var(--u)) 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 900 max(13px, calc(24 * var(--u))) / 1.1 var(--font); }
.shop-tab.on { background: #fff; color: var(--ink); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(10, 34, 78, 0.12); }
.shop-note { margin: calc(12 * var(--u)) 0; color: var(--muted); font-size: max(12px, calc(20 * var(--u))); font-weight: 700; text-align: center; }
.shop-list { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.shop-row { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--panel); }
.shop-ic .emoji { font-size: calc(56 * var(--u)); }
.shop-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: max(12px, calc(20 * var(--u))); }
.shop-txt b { font-size: max(14px, calc(26 * var(--u))); }
.shop-txt small { margin-top: calc(4 * var(--u)); color: var(--muted); font-weight: 800; }
.shop-buy, .shop-wear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: 40px;
  padding: calc(8 * var(--u)) calc(18 * var(--u));
  border: 0;
  border-radius: 999px;
  font: 900 max(13px, calc(24 * var(--u))) / 1.1 var(--font);
}
.shop-buy { background: #ffd23f; color: #1d2b45; box-shadow: 0 calc(4 * var(--u)) 0 #c99a0c; }
.shop-wear { background: #2fb5b0; color: #fff; box-shadow: 0 calc(4 * var(--u)) 0 #1d817d; }
.shop-buy:active, .shop-wear:active { transform: translateY(calc(3 * var(--u))); box-shadow: none; }
.shop-buy .emoji { font-size: calc(26 * var(--u)); }
.shop-buy.is-poor { opacity: 0.5; }
/* the menu's dock holds five buttons (Winkel joined in 1.8): narrower, labels may wrap */
.dock-menu { gap: calc(8 * var(--u)); }
.dock-menu .dock-btn { flex: 1 1 0; min-width: 0; max-width: calc(130 * var(--u)); text-align: center; }
/* equal columns, one line each: the icons sit evenly and the labels line up */
.dock-menu .dock-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.shop-kind { margin: calc(20 * var(--u)) 0 calc(10 * var(--u)); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(6 * var(--u)); border: calc(3 * var(--u)) solid transparent; border-radius: calc(20 * var(--u)); background: var(--panel); text-align: center; }
.shop-item.is-on { border-color: #4fd66a; }
.shop-prev { display: grid; place-items: center; height: calc(64 * var(--u)); }
.shop-prev .emoji { font-size: calc(48 * var(--u)); }
.shop-name { font-size: max(12px, calc(20 * var(--u))); }
.shop-on { color: #1f7a35; font-weight: 900; font-size: max(12px, calc(20 * var(--u))); }
.shop-lock { color: var(--muted); font-weight: 800; font-size: max(10px, calc(17 * var(--u))); }
/* the celebration preview: a real button (at least 32px high), not a thin underlined word */
.shop-try { min-height: 32px; min-width: 56px; padding: 4px 12px; border: 2px solid var(--hemel-d); border-radius: 999px; background: #fff; color: var(--hemel-d); font: 800 max(12px, calc(19 * var(--u))) / 1.1 var(--font); cursor: pointer; }
.title-prev { padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; font: 900 max(11px, calc(19 * var(--u))) / 1.1 var(--font); color: var(--ink); }
canvas.style-prev { display: block; width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.style-prev-plain { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--u)); }
.frame-swatch { display: block; width: calc(64 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; }
/* the frames, on a swatch and on a player card */
.frame-hout { border: calc(5 * var(--u)) solid #a8743c; }
.frame-see { border: calc(5 * var(--u)) solid #2fb5b0; box-shadow: inset 0 0 0 calc(3 * var(--u)) #a9cdfa; }
.frame-goud { border: calc(5 * var(--u)) solid #e8b62c; box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff1b8; }
.frame-springbok { border: calc(5 * var(--u)) solid #157a3f; box-shadow: inset 0 0 0 calc(4 * var(--u)) #f7c948; }
.frame-vuur { border: calc(5 * var(--u)) solid #e8562a; box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffb347, 0 0 calc(10 * var(--u)) rgba(232, 86, 42, 0.5); }
.frame-diamant { border: calc(5 * var(--u)) solid #7fdcf0; box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff, 0 0 calc(14 * var(--u)) rgba(127, 220, 240, 0.8); }
.pcard { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(12 * var(--u)) auto 0; padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff; color: var(--ink); max-width: calc(560 * var(--u)); }
.pc-badge .emoji { font-size: calc(48 * var(--u)); }
.pc-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pc-name { overflow: hidden; font-size: max(15px, calc(30 * var(--u))); white-space: nowrap; text-overflow: ellipsis; }
.pc-title { color: var(--muted); font-weight: 800; font-size: max(11px, calc(19 * var(--u))); }
.pc-rank { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 900; font-size: max(12px, calc(20 * var(--u))); }
.pc-rank .emoji { font-size: calc(30 * var(--u)); }
.pcard.is-compact { margin: 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); gap: calc(8 * var(--u)); }
.pcard.is-compact .pc-badge .emoji { font-size: calc(36 * var(--u)); }
.celebrate { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.celebrate i {
  position: absolute;
  top: calc(-90 * var(--u));
  left: var(--x);
  font-style: normal;
  font-size: calc(var(--s) * var(--u));
  animation: confetti-fall var(--t) ease-in var(--d) both;
}
.celebrate .cel-big { position: absolute; left: 0; right: 0; top: 7%; text-align: center; animation: pop-in 0.5s ease-out both, cel-out 0.6s ease-in 3.2s both; }
.celebrate .cel-big .emoji { font-size: calc(200 * var(--u)); }
.celebrate .cel-cap { display: block; margin: calc(8 * var(--u)) auto 0; width: max-content; max-width: 90%; padding: calc(8 * var(--u)) calc(22 * var(--u)); border-radius: 999px; background: rgba(20, 28, 48, 0.82); color: #fff; font-size: calc(40 * var(--u)); font-weight: 900; overflow-wrap: anywhere; }
.vs-cards { display: grid; justify-items: center; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.vs-cards .pcard { margin: 0; }
@keyframes cel-out { to { opacity: 0; transform: scale(1.3); } }

/* ------------------------------------------------------------------------- */
/* 1.8 power-ups: round buttons on the right edge (only they take taps)      */
/* ------------------------------------------------------------------------- */
.power-tray {
  position: absolute;
  right: calc(var(--sar) + 12 * var(--u));
  top: 30%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  pointer-events: none;
}
.power-tray[hidden] { display: none; }
.power-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: calc(4 * var(--u)) solid #fff;
  border-radius: 50%;
  background: rgba(29, 43, 69, 0.82);
  box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(5, 15, 35, 0.35);
  pointer-events: auto;
}
.power-btn .emoji { font-size: calc(44 * var(--u)); line-height: 1; }
.power-btn:active { transform: scale(0.94); }
.power-btn:disabled { opacity: 0.45; }
.power-tag {
  position: absolute;
  right: calc(-8 * var(--u));
  bottom: calc(-6 * var(--u));
  padding: calc(2 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: #ffd23f;
  color: #1d2b45;
  font: 900 max(10px, calc(18 * var(--u))) / 1.2 var(--font);
}
.power-btn.is-active { border-color: #4fd66a; }
.power-btn.is-active .power-tag { background: #4fd66a; color: #0b3d18; }
.power-btn.is-glow { border-color: #ffd23f; animation: power-glow 1.1s ease-in-out infinite; }
@keyframes power-glow { 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(255, 210, 63, 0.45); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .power-btn.is-glow { animation: none; } }

/* ------------------------------------------------------------------------- */
/* In-game pause button (top-right corner, 96×96 hit area kept free by HUD)  */
/* ------------------------------------------------------------------------- */

.pause-btn {
  position: absolute;
  top: calc(var(--sat) + 6 * var(--u));
  right: calc(var(--sar) + 6 * var(--u));
  z-index: 4;
  display: grid;
  place-items: center;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
.pause-btn > span {
  display: grid;
  place-items: center;
  width: calc(70 * var(--u));
  height: calc(70 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: calc(34 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) 0 rgba(29, 43, 69, 0.22), 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(10, 34, 78, 0.18);
  transition: transform 0.07s ease-out;
}
.pause-btn:active > span { transform: translateY(calc(3 * var(--u))) scale(0.94); }
#ui .pause-btn:focus-visible { outline: none; box-shadow: none; }
#ui .pause-btn:focus-visible > span { outline: calc(5 * var(--u)) solid #fff; outline-offset: calc(4 * var(--u)); }

/* ------------------------------------------------------------------------- */
/* Toasts                                                                    */
/* ------------------------------------------------------------------------- */
.toasts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sab) + 210 * var(--u));
  z-index: 8;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: calc(12 * var(--u));
  pointer-events: none;
}
.toast {
  max-width: calc(620 * var(--u));
  padding: calc(18 * var(--u)) calc(34 * var(--u));
  border-radius: 999px;
  background: rgba(29, 43, 69, 0.94);
  color: #fff;
  text-align: center;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(6, 18, 40, 0.35);
  animation: toast-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.toast.out { animation: toast-out 0.25s ease-in both; }

@keyframes toast-in { from { transform: translateY(calc(30 * var(--u))) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(calc(16 * var(--u))) scale(0.92); opacity: 0; } }

/* ------------------------------------------------------------------------- */
/* Loading splash (static markup in index.html; hidden by ui.setLoading)     */
/* ------------------------------------------------------------------------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  background: linear-gradient(180deg, #5ec1f5 0%, #8fd3f4 55%, #c8ecfb 100%);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
#splash .logo { padding-top: calc(120 * var(--u)); }
#splash .lb { animation: lb-drop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both, lb-wobble var(--dur, 3s) ease-in-out 0.6s infinite; }
#splash .lb:nth-child(1) { animation-delay: 0.05s, 0.65s; }
#splash .lb:nth-child(2) { animation-delay: 0.14s, 0.74s; }
#splash .lb:nth-child(3) { animation-delay: 0.23s, 0.83s; }
#splash .lb:nth-child(4) { animation-delay: 0.32s, 0.92s; }
#splash .lb:nth-child(5) { animation-delay: 0.41s, 1.01s; }
#splash .lb.hang { animation: lb-drop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.5s both, lb-swing 2.6s ease-in-out 1.1s infinite; }
.splash-msg {
  font-size: calc(32 * var(--u));
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 calc(3 * var(--u)) 0 rgba(29, 43, 69, 0.35);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes lb-drop {
  from { transform: translateY(calc(-420 * var(--u))) rotate(calc(var(--r) * 3)); opacity: 0; }
  60% { opacity: 1; }
  to { transform: translateY(var(--y)) rotate(var(--r)); opacity: 1; }
}
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------------- */
/* Rotate-your-phone overlay (CSS only, small landscape touch screens)        */
/* ------------------------------------------------------------------------- */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #5ec1f5 0%, #2f86d8 100%);
  color: #fff;
  text-align: center;
  font-family: var(--font);
}
#rotate .rot-phone {
  font-size: 64px;
  animation: rot-phone 2.2s ease-in-out infinite;
}
#rotate p {
  margin: 0;
  max-width: 420px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 0 rgba(29, 43, 69, 0.35);
}

@keyframes rot-phone {
  0%, 20% { transform: rotate(-90deg); }
  55%, 100% { transform: rotate(0deg); }
}

@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ------------------------------------------------------------------------- */
/* No-JS message                                                             */
/* ------------------------------------------------------------------------- */
.nojs {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #5ec1f5;
  color: #1d2b45;
  font: 700 20px/1.4 var(--font);
  text-align: center;
}

/* ------------------------------------------------------------------------- */
/* Reduced motion: no wobble, no confetti, instant transitions               */
/* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .confetti { display: none; }
}
#ui.rm *, #ui.rm *::before, #ui.rm *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
}
#ui.rm .confetti { display: none; }

/* ------------------------------------------------------------------------- */
/* Short canvases (aspect < 1.72, e.g. desktop/tablet): tighten the menu       */
/* ------------------------------------------------------------------------- */
#ui.short .screen { padding-top: calc(var(--sat) + 14 * var(--u)); padding-bottom: calc(var(--sab) + 20 * var(--u)); }
#ui.short .screen-menu .logo { padding-top: calc(106 * var(--u)); font-size: calc(64 * var(--u)); }
#ui.short .screen-menu .lb { width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
#ui.short .screen-menu .lb.hang { --y: calc(-38 * var(--u)); }
#ui.short .tagline { margin-top: calc(16 * var(--u)); font-size: calc(31 * var(--u)); }
#ui.short .menu-stack { gap: calc(18 * var(--u)); }
#ui.short .daily-card { padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); }
#ui.short .daily-head { margin-bottom: calc(16 * var(--u)); }
#ui.short .daily-badge { width: calc(72 * var(--u)); height: calc(72 * var(--u)); font-size: calc(40 * var(--u)); }
#ui.short .forecast { padding: calc(14 * var(--u)) calc(12 * var(--u)); }
#ui.short .fc-emo { width: calc(68 * var(--u)); height: calc(68 * var(--u)); font-size: calc(40 * var(--u)); }
#ui.short .note { margin: calc(12 * var(--u)) 0 calc(16 * var(--u)); }
/* compact and short screens: the visitors line costs (almost) no extra height */
#ui.compact .forecast.has-visitors { padding-top: calc(10 * var(--u)); padding-bottom: calc(8 * var(--u)); }
#ui.compact .has-visitors .fc-strip { margin-top: calc(8 * var(--u)); }
#ui.compact .has-visitors .fc-item { gap: calc(4 * var(--u)); }
#ui.compact .has-visitors .fc-emo { width: calc(60 * var(--u)); height: calc(60 * var(--u)); font-size: calc(36 * var(--u)); }
#ui.compact .fc-visitors { margin-top: calc(4 * var(--u)); }
#ui.compact .fc-who .emoji { font-size: calc(26 * var(--u)); }
#ui.short .btn-big { min-height: calc(108 * var(--u)); }
#ui.short .btn-practice { min-height: calc(96 * var(--u)); }
#ui.short .dock-ic { width: calc(78 * var(--u)); height: calc(78 * var(--u)); font-size: calc(36 * var(--u)); }
#ui.short .res-wrap { gap: calc(16 * var(--u)); }
#ui.short .big-m { font-size: calc(104 * var(--u)); }
#ui.short .res-stats .tile { min-height: calc(100 * var(--u)); }
#ui.short .grid { margin-top: calc(16 * var(--u)); font-size: calc(36 * var(--u)); }
#ui.short .grid-row { min-height: calc(42 * var(--u)); }
#ui.short .grid-row .emoji { width: calc(42 * var(--u)); }
#ui.short .share-row { margin-top: calc(18 * var(--u)); }

/* ------------------------------------------------------------------------- */
/* 1.0.1: readability floors, colour-blind grid, results reveal and peek      */
/* ------------------------------------------------------------------------- */
/* never smaller than 12 CSS px, whatever the phone */
.fc-name { font-size: max(11px, calc(20 * var(--u))); letter-spacing: -0.02em; }
.res-stats .tile span { font-size: max(12px, calc(18 * var(--u))); }
.tile span { font-size: max(12px, calc(20 * var(--u))); }
.bar-val { font-size: max(12px, calc(19 * var(--u))); }
.bar-day, .foot-cell span { font-size: max(12px, calc(20 * var(--u))); }
.label { font-size: max(12px, calc(21 * var(--u))); }
.wx-chip, .dock-btn { font-size: max(12px, calc(21 * var(--u))); }
.note { font-size: max(12px, calc(24 * var(--u))); }

/* fog's emoji is a pale square on Android: give it a darker backing */
.fc-emo[data-wx="fog"], .wx-chip[data-wx="fog"] .emoji { background: #c9d7ea; border-radius: 50%; }
.wx-chip[data-wx="fog"] .emoji { padding: calc(2 * var(--u)); }
.wx-n { margin-left: calc(2 * var(--u)); font-size: max(11px, calc(16 * var(--u))); font-weight: 900; color: var(--ink-soft); }

/* grid cells: colour + symbol (★ Perfek, • Goed, ∼ Skeef, ✕ verlore) */
.grid-row .cell {
  display: inline-grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  margin: calc(2 * var(--u));
  border-radius: calc(9 * var(--u));
  font: 900 calc(24 * var(--u)) / 1 var(--font);
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.16);
  animation: cell-in 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 28ms);
}
.cell-P { background: #3f9a3e; color: #fff; }
.cell-G { background: #f7c948; color: var(--ink); }
.cell-S { background: #f39a2b; color: var(--ink); }
.cell-X { background: #31373d; color: #fff; }
/* the clown's gift block: cream with a circus-red rim (same in high contrast) */
.cell-B { background: #fff4dc; box-shadow: inset 0 0 0 calc(3 * var(--u)) #e23b3b; font-size: calc(22 * var(--u)); }
.cell-F { background: #3a3f47; box-shadow: inset 0 0 0 calc(3 * var(--u)) #f5b833; font-size: calc(22 * var(--u)); }
/* high contrast (matches the 🟦🟧⬜⬛ share grid) */
#ui.hc .cell-P { background: #2563b0; color: #fff; }
#ui.hc .cell-G { background: #f39a2b; color: var(--ink); }
#ui.hc .cell-S { background: #eef2f7; color: var(--ink); box-shadow: inset 0 0 0 calc(2 * var(--u)) #c3d1e4; }
#ui.hc .cell-X { background: #1d2b45; color: #fff; }

/* results arrive from below, the title gets a backing, the buttons stay reachable */
.screen-results.on .res-wrap { animation: res-up 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes res-up { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.res-head {
  align-self: center;
  padding: calc(14 * var(--u)) calc(24 * var(--u));
  border-radius: calc(36 * var(--u));
  background: rgba(12, 32, 66, 0.55);
}
.screen-results .btn-row {
  position: sticky;
  bottom: calc(10 * var(--u));
  z-index: 1;
}
.foot-cell .btn-new { min-height: calc(80 * var(--u)); font-size: calc(26 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); }
.empty-note { margin: calc(24 * var(--u)) 0 calc(4 * var(--u)); }

/* "Toring" peek: hide the card and scrim to look at the whole tower */
.peek-btn {
  position: absolute;
  top: calc(var(--sat) + 14 * var(--u));
  left: calc(var(--sal) + 14 * var(--u));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(64 * var(--u));
  min-height: 44px;
  padding: 0 calc(22 * var(--u)) 0 calc(16 * var(--u));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: 900 max(13px, calc(24 * var(--u))) / 1 var(--font);
  box-shadow: 0 calc(6 * var(--u)) 0 rgba(29, 43, 69, 0.22);
  pointer-events: auto;
}
.peek-btn .ic { width: 1.3em; height: 1.3em; }
.screen-results.peek { background: transparent; }
.screen-results.peek .res-wrap, .screen-results.peek .confetti { visibility: hidden; }

/* stats sheet: the settings that affect sharing */
.stats-foot { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.stats-foot .dock { margin: 0; }

/* phones around 16:9 (360×640): a long daily must still fit with its buttons */
#ui.compact .big-m { font-size: calc(96 * var(--u)); }
#ui.compact .res-stats .tile { min-height: calc(92 * var(--u)); }
#ui.compact .res-wrap { gap: calc(14 * var(--u)); }
#ui.compact .grid-row .cell { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
#ui.compact .grid-row { min-height: calc(42 * var(--u)); }
#ui.compact .res-card { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)); }
#ui.compact .share-row { margin-top: calc(16 * var(--u)); }
#ui.compact .res-foot { padding: calc(8 * var(--u)) calc(10 * var(--u)); }
#ui.compact .foot-cell b { font-size: calc(34 * var(--u)); }

/* ------------------------------------------------------------------------- */
/* Jou Stapelstad (the player's own skyline), friend challenge, teaser, install */
/* ------------------------------------------------------------------------- */
.res-city { padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); border-radius: calc(32 * var(--u)); }
.city-head { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); }
.city-title { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0; }
.city-title .emoji { font-size: calc(26 * var(--u)); }
.city-streak {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  font-size: max(12px, calc(21 * var(--u))); font-weight: 800; color: var(--karoo-d);
}
.city-streak .emoji { font-size: calc(24 * var(--u)); }
.city-strip {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: calc(3 * var(--u));
  align-items: end;
  height: calc(150 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(8 * var(--u));
  padding: calc(34 * var(--u)) 0 0;
  border-bottom: calc(4 * var(--u)) solid #b7c8dd;
  background: linear-gradient(to top, rgba(160, 200, 235, 0.25), rgba(160, 200, 235, 0) 75%);
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
}
.city-col {
  position: relative;
  display: block;
  height: var(--h);
  min-height: calc(10 * var(--u));
  background: repeating-linear-gradient(to top, var(--c) 0 calc(10 * var(--u)), rgba(255, 255, 255, 0.45) calc(10 * var(--u)) calc(12 * var(--u)));
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0;
  box-shadow: inset calc(-3 * var(--u)) 0 0 rgba(10, 30, 70, 0.14);
  transform-origin: 50% 100%;
}
.city-col.plot {
  height: calc(8 * var(--u));
  background: transparent;
  box-shadow: none;
  border: calc(2 * var(--u)) dashed #b2c4da;
  border-bottom: 0;
}
.city-flag {
  position: absolute; left: 35%; bottom: 100%;
  font-style: normal; font-size: calc(26 * var(--u)); line-height: 1;
  pointer-events: none;
}
.city-col.rise { transform: scaleY(0); }
.city-strip.go .city-col.rise {
  animation: city-rise 0.9s cubic-bezier(0.2, 1.25, 0.4, 1) 0.15s both, city-glow 1.4s ease-out 1.05s 1;
}
@keyframes city-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes city-glow {
  0% { box-shadow: inset calc(-3 * var(--u)) 0 0 rgba(10, 30, 70, 0.14), 0 0 0 0 var(--c); }
  40% { box-shadow: inset calc(-3 * var(--u)) 0 0 rgba(10, 30, 70, 0.14), 0 0 calc(22 * var(--u)) calc(8 * var(--u)) var(--c); }
  100% { box-shadow: inset calc(-3 * var(--u)) 0 0 rgba(10, 30, 70, 0.14), 0 0 0 0 transparent; }
}
.city-line {
  margin: 0; text-align: center; font-weight: 800; color: var(--ink-soft);
  font-size: max(12px, calc(26 * var(--u)));
}
.city-sm { margin-top: calc(22 * var(--u)); }
.city-sm .city-strip { height: calc(120 * var(--u)); padding-top: calc(30 * var(--u)); }
.res-teaser, .install-tip {
  margin: 0; align-self: center; text-align: center; font-weight: 800; color: #fff;
  font-size: max(13px, calc(26 * var(--u)));
  padding: calc(10 * var(--u)) calc(22 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(12, 32, 66, 0.55);
}
.install-row { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.install-btn { flex: 1 1 auto; min-height: calc(76 * var(--u)); font-size: max(13px, calc(26 * var(--u))); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.install-row .install-tip { flex: 1 1 auto; }
.install-x {
  flex: 0 0 auto; width: max(40px, calc(64 * var(--u))); height: max(40px, calc(64 * var(--u)));
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(12, 32, 66, 0.55);
}
.install-x .ic { width: 55%; height: 55%; }
.challenge-chip {
  margin: calc(12 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(18 * var(--u));
  text-align: center; font-weight: 800; font-size: max(13px, calc(25 * var(--u)));
  color: #a3262c; background: #fff1f1; border: calc(3 * var(--u)) solid #ffc9cc; border-radius: calc(26 * var(--u));
}
#ui.compact .city-strip { height: calc(124 * var(--u)); padding-top: calc(30 * var(--u)); margin: calc(6 * var(--u)) 0; }
#ui.compact .res-city { padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); }
#ui.compact .res-wrap { gap: calc(12 * var(--u)); }
#ui.compact .city-sm { margin-top: calc(10 * var(--u)); }
#ui.compact .city-sm .city-strip { height: calc(92 * var(--u)); padding-top: calc(26 * var(--u)); }
#ui.compact .city-sm .city-line { font-size: max(12px, calc(22 * var(--u))); }

/* 1.9 language: the menu's 🌐 button (top left, clear of the logo) and the Afrikaans / English picker */
.lang-chip {
  position: absolute;
  top: calc(var(--sat) + 14 * var(--u));
  left: calc(var(--sal) + 16 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: 36px;
  padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: max(13px, calc(24 * var(--u)));
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(10, 34, 78, 0.2);
  cursor: pointer;
  z-index: 2;
}
.lang-chip .emoji { font-size: 1.15em; }
.lang-sheet .sheet-head h2 { font-size: calc(36 * var(--u)); text-wrap: balance; }
.lang-btns { display: grid; gap: calc(16 * var(--u)); padding: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.lang-btn {
  min-height: 56px;
  padding: calc(22 * var(--u));
  border: calc(4 * var(--u)) solid transparent;
  border-radius: calc(28 * var(--u));
  background: #eef6ff;
  color: var(--ink);
  font: inherit;
  font-size: max(18px, calc(40 * var(--u)));
  font-weight: 900;
  cursor: pointer;
}
.lang-btn.on { border-color: var(--jakaranda-d, #5b3fa8); background: #fff; }
.lang-btn:focus-visible { outline: 3px solid var(--jakaranda-d, #5b3fa8); outline-offset: 2px; }

/* the daily reminder (1.10, the Android app) */
.remind-ask { margin: 0 0 calc(16 * var(--u)); font-weight: 700; line-height: 1.4; }
.remind-times { display: grid; gap: calc(12 * var(--u)); }
.remind-times .btn.is-on { box-shadow: 0 0 0 calc(4 * var(--u)) var(--sonneblom); }
.app-open { text-decoration: none; }

/* the version under the statistics (testers can say which one they have) */
.version-note { margin: 0; text-align: center; font-size: max(11px, calc(20 * var(--u))); font-weight: 700; color: var(--ink-soft); opacity: 0.8; }

/* 1.9.2 daily leaderboard: the place on the results card, and the Ranglys sheet */
.res-board {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--u));
  max-width: 100%;
  margin-top: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: #fff4cc;
  color: #6b4d00;
  font-size: max(12px, calc(22 * var(--u)));
  font-weight: 800;
}
.res-board .emoji { flex: none; font-size: calc(24 * var(--u)); }
.res-board-btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 2px solid #e3a714;
  border-radius: 999px;
  background: #fff;
  color: #6b4d00;
  font: 900 max(12px, calc(20 * var(--u))) / 1.1 var(--font);
  cursor: pointer;
}
.board-list { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(8 * var(--u)); }
.board-row {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--panel);
  font-size: max(14px, calc(28 * var(--u)));
}
.board-row.is-you { background: #fff4cc; box-shadow: inset 0 0 0 calc(3 * var(--u)) #e3a714; }
.board-rank { text-align: center; color: var(--ink-soft); }
.board-rank .emoji { font-size: calc(36 * var(--u)); }
.board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.board-h { font-variant-numeric: tabular-nums; }
.board-gap { text-align: center; color: var(--ink-soft); font-weight: 900; line-height: 1; }
.board-msg { margin: calc(16 * var(--u)) 0; text-align: center; color: var(--ink-soft); font-weight: 700; }
.board-foot { display: grid; gap: calc(10 * var(--u)); }
.board-foot .note { margin: 0; text-align: center; }
.board-toggle { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-height: 40px; font-weight: 800; cursor: pointer; }
.board-check { width: 22px; height: 22px; accent-color: #2f8f3a; }
/* read by screen readers, not shown (the place behind a medal) */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }