/* (1.25) The menu as two tall pills (js/ui/dom.js renderMenu). The owner, 31 Oct 2026: "Glybaan needs its own section and
   Stapel it's own section ... 2 pills that runs long vertically, Stapel has a grass theme and Glybaan has thunder, something
   that will make someone playing for the first time say WOW this looks cool". Only transforms and opacity move; the page's
   sleep (html.zzz) and reduced motion stop them. */

.menu-pills { gap: calc(18 * var(--u)); }
.pills-week { padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(34 * var(--u)); }
.pills-week .week-strip { margin: 0; }
.pills-flame { display: flex; justify-content: center; }

.pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(18 * var(--u));
  align-items: stretch;
}
.pill {
  position: relative;
  cursor: pointer;   /* (1.32.6) the whole pill presses its big button (dom.js wholeTap) */
  display: flex;
  flex-direction: column;
  min-height: calc(900 * var(--u));
  border-radius: calc(170 * var(--u)) calc(170 * var(--u)) calc(70 * var(--u)) calc(70 * var(--u));
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  box-shadow:
    0 0 0 calc(5 * var(--u)) rgba(255, 255, 255, 0.85),
    0 0 0 calc(10 * var(--u)) #1d2b45,
    0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(8, 20, 50, 0.45);
}
.pill-stapel { background: linear-gradient(180deg, #8fdcff 0%, #c9f2ff 30%, #62c05a 46%, #3f9a3c 70%, #2d7a2e 100%); }
.pill-gly {
  background: linear-gradient(180deg, #0c1230 0%, #222a5c 26%, #343d7c 44%, #1a1f4a 70%, #0c0f2a 100%);
  box-shadow:
    0 0 0 calc(5 * var(--u)) rgba(150, 200, 255, 0.85),
    0 0 0 calc(10 * var(--u)) #1d2b45,
    0 0 calc(40 * var(--u)) rgba(110, 160, 255, 0.55),
    0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(8, 20, 50, 0.5);
}

/* the picture at the top of each pill */
.pill-art { position: absolute; left: 0; right: 0; top: 0; height: calc(430 * var(--u)); overflow: hidden; z-index: 0; pointer-events: none; }
.pill-art i, .pill-art b, .pill-art svg, .pill-art img, .pill-art div { position: absolute; display: block; }
.pill-art .sa-sea::before { display: block; }
/* (1.40) the painted cover over each pill's drawn picture: it shows once loaded, breathing slowly; the drawn one is put away */
.pill-art .pill-paint { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: 0; transition: opacity 0.35s ease; transform-origin: 50% 35%; animation: pillPaint 11s ease-in-out infinite alternate; }
.pill-art.painted .pill-paint { opacity: 1; }
.pill-art.painted > :not(.pill-paint) { display: none !important; }
@keyframes pillPaint { from { transform: scale(1); } to { transform: scale(1.05); } }
.pill-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(14 * var(--u));
  padding: calc(330 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u));
}
.pill-title {
  margin: 0;
  text-align: center;
  font-size: calc(58 * var(--u));
  line-height: 1;
  font-weight: 900;
  letter-spacing: calc(1 * var(--u));
  white-space: nowrap;
}
.pill-title span {
  -webkit-text-stroke: calc(9 * var(--u)) #1d2b45;
  paint-order: stroke fill;
  text-shadow: 0 calc(8 * var(--u)) 0 #1d2b45;
}
.pill-stapel .pill-title span { color: #ffd84d; }
.pill-gly .pill-title span {
  color: #eaf6ff;
  text-shadow: 0 calc(8 * var(--u)) 0 #1d2b45, 0 0 calc(26 * var(--u)) rgba(140, 200, 255, 0.95);
}
.pill-sub { margin: 0; text-align: center; font-size: calc(30 * var(--u)); font-weight: 800; color: #dfe9ff; line-height: 1.2; }
.pill-note { margin: 0; text-align: center; font-size: calc(24 * var(--u)); font-weight: 700; color: rgba(220, 232, 255, 0.8); line-height: 1.25; }
.pill .btn-big { min-height: calc(104 * var(--u)); font-size: calc(40 * var(--u)); border-radius: calc(30 * var(--u)); width: 100%; }
.pill-go-gly { background: linear-gradient(180deg, #7fd7ff, #2f8cf0 60%, #1f5fd0); color: #fff; }
.pill-mini {
  min-height: calc(76 * var(--u));
  font-size: calc(30 * var(--u));
  border-radius: calc(26 * var(--u));
  width: 100%;
  gap: calc(10 * var(--u));
}
.pill-gly .pill-mini { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(170, 210, 255, 0.55); }

/* the Daily inside the Stapel pill: a frosted card */
.pill-daily {
  position: relative;
  background: rgba(255, 255, 255, 0.93);
  color: var(--ink, #1d2b45);
  border-radius: calc(34 * var(--u));
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 rgba(20, 60, 20, 0.3);
}
.pill-daily .daily-head { text-align: center; }
.pill-daily .daily-title { font-size: calc(34 * var(--u)); }
.pill-daily .daily-date { font-size: calc(21 * var(--u)); }
/* (1.25) today's ranking: the 🏆 beside Practice (the narrow card's corner was too tight; it covered the title) */
.pill-row { display: flex; gap: calc(10 * var(--u)); width: 100%; }
.pill-row > .pill-mini { flex: 1; min-width: 0; }
.pill-row > .board-chip {
  position: static; flex: none; transform: none; border: 0; cursor: pointer;
  height: auto; min-height: calc(76 * var(--u)); min-width: calc(76 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: calc(26 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 900;
  background: linear-gradient(180deg, #fffbe8, #ffe08a); color: #6b4a00;
  box-shadow: inset 0 calc(-5 * var(--u)) 0 #f2c94c, 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(10, 34, 78, 0.22);
}
.pill-row > .board-chip .emoji { font-size: calc(34 * var(--u)); }
.pill-daily .fc-line { font-size: calc(24 * var(--u)); flex-wrap: wrap; justify-content: center; }
.pill-daily .btn-big { margin-top: calc(10 * var(--u)); }

/* Hengel's fish of the day (all players' biggest, else your own) */
.fish-trophy {
  display: grid;
  grid-template-columns: calc(118 * var(--u)) 1fr;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(100 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border: 0;
  border-radius: calc(28 * var(--u));
  background: linear-gradient(180deg, #fff3b8, #e6b53e 48%, #b9861c 54%, #f1cd62);
  box-shadow: 0 calc(5 * var(--u)) 0 #5a3d06, inset 0 0 0 calc(3 * var(--u)) #7a5a12;
  color: #3b2a07;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.fish-trophy img { position: static; width: 100%; height: calc(56 * var(--u)); object-fit: contain; filter: drop-shadow(0 calc(4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35)); }
.fish-trophy.empty img { filter: brightness(0) opacity(0.3); }
.fish-trophy .ft-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
/* (the menu's: its label a line of its own across the top, so "VIS VAN DIE DAG" never breaks in two) */
.fish-trophy:not(.res-fish) { grid-template-columns: calc(96 * var(--u)) 1fr; row-gap: calc(2 * var(--u)); padding-top: calc(6 * var(--u)); }
.fish-trophy .ft-lbl { grid-column: 1 / -1; text-align: center; white-space: nowrap; }
.fish-trophy small { font-size: calc(18 * var(--u)); font-weight: 900; letter-spacing: calc(1 * var(--u)); opacity: 0.8; }
.fish-trophy b { font-size: calc(34 * var(--u)); font-weight: 900; }
.fish-trophy .ft-who { font-size: calc(20 * var(--u)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fish-trophy.empty .ft-who { white-space: normal; }

/* --- Stapel's picture: the sea at sunset, the tower on its rock, Oom fighting a fish, a tuna leaping --- */
.sa-sky { left: -40%; right: -40%; top: 0; height: 60%; background: linear-gradient(180deg, #2f5fb3 0%, #6f78c4 30%, #f08a6a 66%, #ffc98f 88%, #ffe2ae 100%); }
.sa-sun {
  left: 58%; top: calc(60% - 56 * var(--u)); width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffe9a6 34%, #ffc46b 52%, rgba(255, 170, 90, 0.35) 64%, rgba(255, 170, 90, 0) 72%);
  animation: pill-glow 4s ease-in-out infinite alternate;
}
.sa-sea { left: -40%; right: -40%; top: 60%; bottom: 0; background: linear-gradient(180deg, #3aa0bf 0%, #1f7ea2 30%, #145b7d 70%, #0e4663 100%); }
.sa-sea::before {
  content: ''; position: absolute; left: -20%; right: -20%; top: 0; bottom: 0; opacity: 0.45;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 calc(9 * var(--u)), rgba(255, 255, 255, 0.45) calc(9 * var(--u)) calc(10.5 * var(--u)), rgba(255, 255, 255, 0) calc(10.5 * var(--u)) calc(20 * var(--u)));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(26 * var(--u)), transparent calc(26 * var(--u)) calc(44 * var(--u)));
  mask: repeating-linear-gradient(90deg, #000 0 calc(26 * var(--u)), transparent calc(26 * var(--u)) calc(44 * var(--u)));
  animation: pill-drift 6s ease-in-out infinite alternate; will-change: transform;
}
.sa-path {
  left: calc(52% + 28 * var(--u)); top: 60%; width: calc(70 * var(--u)); height: 30%;
  background: repeating-linear-gradient(180deg, rgba(255, 236, 170, 0.85) 0 calc(5 * var(--u)), rgba(255, 236, 170, 0) calc(5 * var(--u)) calc(12 * var(--u)));
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent);
  animation: pill-shine 1.8s ease-in-out infinite alternate; will-change: opacity;
}
.sa-gulls { left: 46%; top: 20%; width: calc(96 * var(--u)); height: calc(40 * var(--u)); fill: none; stroke: #2b2440; stroke-width: 3; stroke-linecap: round; animation: pill-drift 9s ease-in-out infinite alternate; will-change: transform; }
.sa-scene { position: absolute; left: 0; right: 0; bottom: 0; height: calc(400 * var(--u)); transform-origin: 50% 100%; transform: scale(var(--scene-s, 1)); }
.sa-rock {
  left: calc(10 * var(--u)); bottom: calc(-26 * var(--u)); width: calc(240 * var(--u)); height: calc(126 * var(--u));
  border-radius: 46% 54% 0 0 / 64% 70% 0 0; background: linear-gradient(180deg, #7a6650, #4a3a2c 55%, #2e241b);
  box-shadow: inset calc(-10 * var(--u)) calc(8 * var(--u)) 0 rgba(255, 220, 170, 0.18);
}
.sa-tower { left: calc(58 * var(--u)); bottom: calc(96 * var(--u)); width: calc(150 * var(--u)); height: calc(130 * var(--u)); }
.sa-tower b {
  left: calc(6 * var(--u) + var(--x) * var(--u));
  bottom: calc(var(--k) * 30 * var(--u));
  width: calc(136 * var(--u) - var(--k) * 10 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(7 * var(--u));
  background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.22)), var(--c);
  box-shadow: 0 0 0 calc(3 * var(--u)) #1d2b45, inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}
.sa-oom { left: calc(68 * var(--u)); bottom: calc(96 * var(--u) + 4 * 30 * var(--u) - 6 * var(--u)); width: calc(158 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) 0 rgba(29, 43, 69, 0.35)); }
.sa-line { left: calc(224 * var(--u)); top: calc(66 * var(--u)); width: calc(78 * var(--u)); height: calc(214 * var(--u)); fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sa-fish {
  left: calc(236 * var(--u)); top: calc(236 * var(--u)); width: calc(104 * var(--u));
  transform-origin: 50% 50%; animation: pill-leap 3.4s ease-in-out infinite; will-change: transform, opacity;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35));
}
.sa-splash {
  left: calc(252 * var(--u)); top: calc(286 * var(--u)); width: calc(70 * var(--u)); height: calc(20 * var(--u));
  border-radius: 50%; border: calc(3 * var(--u)) solid rgba(255, 255, 255, 0.9); opacity: 0;
  animation: pill-splash 3.4s ease-out infinite; will-change: transform, opacity;
}
.sa-splash.s2 { animation-delay: 1.55s; }
@keyframes pill-glow { to { transform: scale(1.06); } }
@keyframes pill-shine { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes pill-leap {
  0%, 8% { transform: translate(0, calc(40 * var(--u))) rotate(-40deg); opacity: 0; }
  14% { opacity: 1; }
  42% { transform: translate(calc(-14 * var(--u)), calc(-46 * var(--u))) rotate(-8deg); opacity: 1; }
  66% { transform: translate(calc(-30 * var(--u)), calc(30 * var(--u))) rotate(32deg); opacity: 1; }
  72%, 100% { transform: translate(calc(-34 * var(--u)), calc(50 * var(--u))) rotate(40deg); opacity: 0; }
}
@keyframes pill-splash { 0% { transform: scale(0.3); opacity: 0.95; } 40% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }

/* --- Glybaan's picture (1.25, the owner: "The lines in the river ... does not make sense ... make it look more exciting"):
   the storm with a portal in its clouds, the canyon, the river widening toward you (its whitewater drifting down, rocks in
   their foam), the croc waiting, the builder carving down in his spray; rain and lightning over it all. The river's parts
   sit from the picture's foot (the river does, and the title's top is always 100u above it); the sky's from its top. --- */
.ga-cloud { height: calc(80 * var(--u)); border-radius: calc(50 * var(--u)); background: linear-gradient(#5a6396, #3a4170); opacity: 0.95; }
.ga-cloud::before, .ga-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.ga-cloud::before { width: 55%; height: 140%; left: 12%; top: -55%; }
.ga-cloud::after { width: 40%; height: 110%; left: 52%; top: -35%; }
.ga-cloud.c1 { left: calc(-70 * var(--u)); top: calc(70 * var(--u)); width: calc(220 * var(--u)); animation: pill-drift 11s ease-in-out infinite alternate; }
.ga-cloud.c2 { left: calc(150 * var(--u)); top: calc(30 * var(--u)); width: calc(220 * var(--u)); background: linear-gradient(#6a74aa, #444c80); animation: pill-drift2 15s ease-in-out infinite alternate; }
.ga-cloud.c3 { left: calc(110 * var(--u)); top: calc(112 * var(--u)); width: calc(190 * var(--u)); opacity: 0.85; animation: pill-drift 17s ease-in-out infinite alternate-reverse; }
/* the portal at the river's head, the river pouring out of it (1.25.11, the owner: "a portal like Minecraft", as in the
   game: a door of Stapel's blocks, gold, standing on the water, the deep space and its gold light inside; no circle) */
.ga-portal { left: calc(50% - 35 * var(--u)); top: calc(28 * var(--u)); width: calc(70 * var(--u)); height: calc(84 * var(--u));
  border-radius: calc(3 * var(--u));
  z-index: 2; transform: scale(var(--scene-s, 1)); transform-origin: 50% 0;   /* (in front of the canyon; smaller when the picture is) */
  background:
    repeating-linear-gradient(90deg, rgba(107, 66, 8, 0.6) 0 calc(1.5 * var(--u)), transparent 0 calc(14 * var(--u))),
    repeating-linear-gradient(0deg, rgba(107, 66, 8, 0.6) 0 calc(1.5 * var(--u)), transparent 0 calc(14 * var(--u))),
    linear-gradient(#ffe38c, #f7c948 45%, #c39a1c);
  box-shadow: 0 0 0 calc(2 * var(--u)) #6b4208, 0 0 calc(20 * var(--u)) #ffc845, 0 0 calc(44 * var(--u)) rgba(255, 200, 69, 0.5); }
.ga-portal::before { content: ''; position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(14 * var(--u)); bottom: 0;
  background: radial-gradient(ellipse at 50% 55%, #fff 0 7%, #fff0c0 16%, #ffc845 32%, #b8650c 50%, #1a2a5e 72%, #0a1230);
  box-shadow: inset 0 0 calc(8 * var(--u)) #ffc845; }
/* (its light breathes, slowly: 1.25.8, the owner: "The sircles goes way to fast") */
.ga-swirl { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(14 * var(--u)); bottom: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 246, 214, 0.9) 0 10%, rgba(255, 200, 69, 0.35) 34%, transparent 60%);
  animation: ga-door 2.8s ease-in-out infinite alternate; will-change: opacity; }
@keyframes ga-door { from { opacity: 0.35; } to { opacity: 1; } }
.ga-bolt {
  left: calc(236 * var(--u)); top: calc(34 * var(--u)); width: calc(56 * var(--u)); height: calc(112 * var(--u));
  fill: #fff7b0; filter: drop-shadow(0 0 calc(10 * var(--u)) #fff) drop-shadow(0 0 calc(24 * var(--u)) #9fd0ff);
  opacity: 0; animation: pill-bolt 3.6s linear infinite; will-change: opacity;
}
.ga-flash { will-change: opacity; inset: 0; background: radial-gradient(circle at 75% 22%, rgba(230, 240, 255, 0.9), rgba(190, 210, 255, 0.35) 60%, rgba(190, 210, 255, 0) 80%); opacity: 0; animation: pill-flash 3.6s linear infinite; z-index: 4; }
/* the canyon and the river: one drawing, from the picture's foot */
.ga-river, .ga-foam { left: 0; right: 0; bottom: 0; width: 100%; height: calc(330 * var(--u)); z-index: 1; }
.ga-river .far { fill: #3f5c58; }
.ga-river .ground { fill: #24493a; }
.ga-river .wall { fill: #6e3226; }
.ga-river .face { fill: #8f4a32; }
.ga-river .water { fill: #2b92dc; }
.ga-river .deep { fill: #1b67b6; opacity: 0.6; }
.ga-river .edge { fill: none; stroke: rgba(232, 247, 255, 0.85); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ga-river .foam { fill: rgba(240, 250, 255, 0.92); }
.ga-river .stone { fill: #4d3f36; }
.ga-river .top { fill: #8a7563; }
.ga-foam { fill: none; stroke: rgba(240, 250, 255, 0.95); stroke-width: 2.6; stroke-linecap: round; animation: ga-foam 2.4s linear infinite; will-change: transform, opacity; }
.ga-foam.f2 { animation-delay: -1.2s; }
/* the croc, up the river: half under, bobbing, a ring of foam round him */
.ga-croc { left: calc(170 * var(--u)); bottom: calc(194 * var(--u)); width: calc(84 * var(--u)); z-index: 2; clip-path: inset(0 0 24% 0);
  transform-origin: 50% 80%; animation: ga-lurk 3s ease-in-out infinite; will-change: transform; }
.ga-wake { left: calc(162 * var(--u)); bottom: calc(186 * var(--u)); width: calc(104 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; z-index: 2;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.85) 0 32%, rgba(255, 255, 255, 0) 70%); animation: ga-wake 3s ease-in-out infinite; will-change: transform, opacity; }
/* the builder on his board, carving side to side, his spray flying */
.ga-rider { left: calc(84 * var(--u)); bottom: calc(102 * var(--u)); width: calc(80 * var(--u)); z-index: 3; transform-origin: 50% 92%;
  animation: ga-carve 2.2s ease-in-out infinite alternate; will-change: transform; }
.ga-spray { left: calc(118 * var(--u)); bottom: calc(98 * var(--u)); width: calc(64 * var(--u)); height: calc(40 * var(--u)); z-index: 3; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 70%, rgba(255, 255, 255, 0.95) 0 28%, rgba(220, 240, 255, 0.55) 46%, rgba(220, 240, 255, 0) 70%);
  transform-origin: 30% 90%; animation: ga-spray 1.2s ease-out infinite; will-change: transform, opacity; }
.ga-spray.s2 { left: calc(96 * var(--u)); animation-delay: -0.6s; }
.ga-rain { left: -10%; right: -10%; top: -100%; height: 200%; opacity: 0.55; z-index: 4;
  background: repeating-linear-gradient(105deg, rgba(190, 215, 255, 0) 0 calc(18 * var(--u)), rgba(190, 215, 255, 0.75) calc(18 * var(--u)) calc(20 * var(--u)));
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 calc(26 * var(--u)), transparent calc(26 * var(--u)) calc(46 * var(--u)));
  mask: repeating-linear-gradient(180deg, #000 0 calc(26 * var(--u)), transparent calc(26 * var(--u)) calc(46 * var(--u)));
  animation: pill-rain 0.7s linear infinite; will-change: transform; }
.ga-rain.r2 { opacity: 0.35; animation-duration: 1.1s; }
@keyframes ga-foam { 0% { transform: translate(calc(4 * var(--u)), calc(-5 * var(--u))); opacity: 0; } 30%, 65% { opacity: 1; } 100% { transform: translate(calc(-4 * var(--u)), calc(5 * var(--u))); opacity: 0; } }
@keyframes ga-lurk { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(calc(3 * var(--u))) rotate(2deg); } }
@keyframes ga-wake { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ga-carve { from { transform: translateX(calc(-8 * var(--u))) rotate(-5deg); } to { transform: translateX(calc(8 * var(--u))) rotate(4deg); } }
@keyframes ga-spray { 0% { transform: scale(0.35); opacity: 0.95; } 100% { transform: translate(calc(16 * var(--u)), calc(-12 * var(--u))) scale(1.3); opacity: 0; } }
@keyframes pill-spin { to { transform: rotate(360deg); } }
@keyframes pill-drift { to { transform: translateX(calc(40 * var(--u))); } }
@keyframes pill-drift2 { to { transform: translateX(calc(-50 * var(--u))) scale(0.7); } }
@keyframes pill-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes pill-bob { 50% { transform: translateY(calc(-8 * var(--u))) rotate(-3deg); } }
@keyframes pill-sway { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes pill-rain { from { transform: translateY(0); } to { transform: translateY(50%); } }
@keyframes pill-flow { to { stroke-dashoffset: -36; } }
@keyframes pill-flash { 0%, 86% { opacity: 0; } 87% { opacity: 1; } 89% { opacity: 0.15; } 90% { opacity: 0.9; } 94%, 100% { opacity: 0; } }
@keyframes pill-bolt { 0%, 86% { opacity: 0; } 87%, 89% { opacity: 1; } 90%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

html.zzz .pill-art *, html.zzz .pill-art *::before, html.zzz .pill-art *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pill-art *, .pill-art *::before, .pill-art *::after { animation: none !important; }
  .ga-flash, .ga-bolt { opacity: 0; }
}
html.reduce-motion .pill-art *, html.reduce-motion .pill-art *::before, html.reduce-motion .pill-art *::after { animation: none !important; }

/* (the menu with the pills: a smaller logo, no tagline, the Daily compact inside its pill) */
.pills-menu .brand { margin-top: calc(-6 * var(--u)); margin-bottom: calc(-26 * var(--u)); transform: scale(0.74); transform-origin: 50% 0; }
.pills-menu .tagline { display: none; }
.pill-daily .nudge, .pill-daily .challenge-chip { display: none; }
.pill-daily .daily-title { font-size: calc(30 * var(--u)); line-height: 1.1; }
.pill-daily .daily-date { font-size: calc(19 * var(--u)); line-height: 1.25; }
.pill-daily .fc-vlabel { display: none; }
/* (the narrow pill: the date and its tries on two lines, the weather above the visitors, no "·" between them) */
.pill-daily .daily-date .dd-part { display: block; }
.pill-daily .daily-date .dd-sep, .pill-daily .fc-sep { display: none; }
.pill-daily .fc-grp { flex-basis: 100%; }
.pill-daily .btn-big { min-height: calc(96 * var(--u)); font-size: calc(46 * var(--u)); letter-spacing: calc(2 * var(--u)); }
.pill-daily .btn-mini { font-size: calc(22 * var(--u)); min-height: calc(64 * var(--u)); }
/* (--pill-cut: what dom.js fitMenu() takes off the pictures when the menu is a little too tall, never more than needed) */
.pill-art { height: calc(400 * var(--u) - var(--pill-cut, 0px)); }
.pill-body { padding-top: calc(300 * var(--u) - var(--pill-cut, 0px)); }
.pill { min-height: calc(860 * var(--u) - var(--pill-cut, 0px)); }

/* (the Glybaan picture's canyon: its red cliffs in the storm light) */

/* (a phone a little short for the menu, or a Daily played today: dom.js fitMenu() first lets the small words step out
   (.fit1), then shortens the pictures exactly as much as needed (--pill-cut, --scene-s), then lets the words that repeat
   what the tiles and buttons say, the fish card's label and the dock's words step out (.fit2); the sizes follow the
   screen's width, so a fixed screen height can't tell) */
.pills-menu.fit1 .pills-week .wk-line { display: none; }
.pills-menu.fit1 .pill-daily .fc-line, .pills-menu.fit1 .pill-daily .fc-grp { gap: calc(4 * var(--u)) calc(8 * var(--u)); }
.pills-menu.fit1 .pill-daily .fc-grp { flex-basis: auto; }
.pills-menu.fit1 .pill-daily .fc-line { margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); }
.pills-menu.fit1 .pill-daily .fc-line .fc-pic .emoji { font-size: calc(30 * var(--u)); }
.pills-menu.fit1 .pill-title { font-size: calc(52 * var(--u)); }
.pills-menu.fit1 .pills-week { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.pills-menu.fit1 .brand { transform: scale(0.62); margin-bottom: calc(-44 * var(--u)); }
/* (1.25.11) fit3: a small phone with Android's bars and the weekly chests (dom.js fitMenu) */
.pills-menu.fit3 .brand { margin-bottom: calc(-52 * var(--u)); }
.pills-menu.fit3 .pills-week { transform: scale(0.82); margin: calc(-12 * var(--u)) 0; }
.pills-menu.fit3 .dock-menu .dock-ic { width: calc(84 * var(--u)); height: calc(84 * var(--u)); font-size: calc(38 * var(--u)); }
.pills-menu.fit1 .pill-daily .daily-date { display: none; }
.pills-menu.fit1 .pill-daily { padding-top: calc(14 * var(--u)); padding-bottom: calc(12 * var(--u)); }
.pills-menu.fit1 .pill-body { gap: calc(10 * var(--u)); }
.pills-menu.fit1 .fish-trophy { min-height: calc(84 * var(--u)); }
.pills-menu.fit1 .pill-mini, .pills-menu.fit1 .pill-row > .board-chip { min-height: calc(66 * var(--u)); }
.pills-menu.fit1 .pill-row > .board-chip { min-width: calc(66 * var(--u)); }
.pills-menu.fit2 .pill-daily .done-title, .pills-menu.fit2 .pill-daily .retry-note, .pills-menu.fit2 .fish-trophy .ft-lbl,
.pills-menu.fit2 .pill-daily .done-tile small, .pills-menu.fit2 .dock-menu .dock-label { display: none; }

/* (1.25) the Daily results card's fish line: the card's full width, its label clear of the fish line */
.res-fish { display: grid; width: 100%; box-sizing: border-box; margin: calc(10 * var(--u)) 0; }
.res-fish .ft-txt { gap: calc(4 * var(--u)); }
/* (1.25.11, the screen sweep: its title was 9.8 px on a 390 px phone) */
.res-fish .ft-txt > small:first-child { font-size: calc(22 * var(--u)); }
.res-fish b { font-size: calc(30 * var(--u)); line-height: 1.15; }

/* (1.25) the Daily played today, inside the narrow pill: one compact block, so the fish, Practice and the dock stay in sight */
.pill-daily .done-box { gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
.pill-daily .done-title { font-size: max(12px, calc(24 * var(--u))); gap: calc(8 * var(--u)); line-height: 1.15; text-align: left; }
.pill-daily .done-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(6 * var(--u)); }
.pill-daily .done-stats.three .done-tile-top { flex-direction: column; gap: 0; }
/* (three tiles: their words don't fit a third of the narrow card, "HOOG…"; the pictures say it, a tap on 🔁 explains) */
.pill-daily .done-stats.three .done-tile small { display: none; }
/* (1.25.3, his picture of "42.8 m" spilling out of its tile: the height takes the widest share of three, every value on
   one line, a long one a size smaller) */
.pill-daily .done-stats.three { grid-template-columns: 1.5fr 1.1fr 0.8fr; }
.pill-daily .done-tile b { white-space: nowrap; }
.pill-daily .done-tile b.long { font-size: max(11px, calc(22 * var(--u))); }
.pill-daily .done-tile { padding: calc(6 * var(--u)) calc(4 * var(--u)); gap: 0; }
.pill-daily .done-tile-top .emoji { font-size: calc(24 * var(--u)); }
.pill-daily .done-tile b { font-size: max(13px, calc(28 * var(--u))); }
.pill-daily .done-tile small { font-size: max(9px, calc(16 * var(--u))); }
.pill-daily .countdown.done-count { font-size: calc(20 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); }
.pill-daily.has-retry .done-count { display: none; }
.pill-daily .btn-big.btn-green { font-size: calc(28 * var(--u)); min-height: calc(80 * var(--u)); letter-spacing: 0; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); }
/* (1.25.3, his "Play your extra tr…": a label without a second tier wraps; the big word of a two-tier one stays whole) */
.pill-daily .btn-big .bl.two > span { white-space: nowrap; }
.pill-daily .btn-big .bl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.02; text-align: left; }
.pill-daily .btn-big .bl small { font-size: 0.5em; font-weight: 800; opacity: 0.92; }
.pill-daily .retry-see { min-height: 0; padding: calc(8 * var(--u)) calc(8 * var(--u)); font-size: calc(24 * var(--u)); background: transparent; box-shadow: none; color: #2c4a7a; white-space: nowrap; }
.pill-daily .free-try ~ .retry-note { display: none; }
.pill-daily .retry-row { margin-top: calc(8 * var(--u)); gap: calc(4 * var(--u)); width: 100%; }
/* (1.25.3, his "this is very hidden": one more try is a gold button the width of the card, its price in a dark chip) */
.pill-daily .retry-buy {
  width: 100%; min-height: calc(76 * var(--u)); justify-content: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u));
  font-size: calc(26 * var(--u)); font-weight: 900; line-height: 1.1; color: #3b2a07; border-radius: calc(26 * var(--u));
  background: linear-gradient(180deg, #fff3b8, #f2c94c 55%, #e0a82e);
  box-shadow: 0 calc(5 * var(--u)) 0 #8a6110, 0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.25);
}
.pill-daily .retry-buy .retry-price { margin-left: 0; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: rgba(59, 42, 7, 0.88); color: #ffe08a; white-space: nowrap; }
.pill-daily .retry-buy.is-short { opacity: 1; filter: saturate(0.55); }
.pill-daily .retry-note { font-size: max(10px, calc(18 * var(--u))); margin-top: calc(6 * var(--u)); text-align: center; }
/* (1.28.2, his MacBook picture: "30.3 m" spilling out of its tile, "One more try" on three lines in the narrow card) each
   value shrinks to its tile; a narrow card puts the price under the words, kept on one line (old browsers keep the above) */
.pill-daily .done-tile, .pill-daily .retry-row { container-type: inline-size; }
.pill-daily .done-tile b { font-size: min(max(13px, calc(28 * var(--u))), 28cqi); }
.pill-daily .done-tile b.long { font-size: min(max(11px, calc(22 * var(--u))), 24cqi); }
@container (max-width: 160px) { .pill-daily .done-tile-top { flex-direction: column; gap: 0; } }
@container (max-width: 320px) {
  .pill-daily .retry-buy { flex-direction: column; gap: calc(4 * var(--u)); font-size: min(calc(26 * var(--u)), 11cqi); }
  .pill-daily .retry-buy > span:first-child { white-space: nowrap; }
}

/* (1.25) the Glybaan pill's body: the day's farthest ride (a cool steel plaque, the fish of the day's twin) and what waits
   down the river, in its order */
.gly-trophy { background: linear-gradient(180deg, #e9f6ff, #9fc7ea 48%, #6e9cc7 54%, #c4e2f8); box-shadow: 0 calc(5 * var(--u)) 0 #1d3a63, inset 0 0 0 calc(3 * var(--u)) #2b5486; color: #0f2747; }
.gly-trophy img { height: calc(62 * var(--u)); }
.gly-ahead { display: grid; gap: calc(8 * var(--u)); width: 100%; }
/* (1.25.11, the screen sweep: on a 360 px phone the four stops, 33 px each, were wider than the card: the note's words ran
   onto its rim) they give way to the card's width */
.gh-stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; }
.gh-stop { position: relative; display: grid; place-items: center; width: calc(66 * var(--u)); max-width: calc(100% - 6 * var(--u)); height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3d5ca8, #1a2a5c); box-shadow: 0 0 0 calc(3 * var(--u)) #9cc3ff, 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.35); }
.gh-stop img { width: 104%; height: 104%; object-fit: contain; }
.gh-hippo img { margin-top: 18%; }
/* (1.32.6, the owner: "the croc needs to be the fake croc, then the monkey and the portal needs to be improved") the croc,
   Blouaap and the portal are square pictures of the ride's own models now (img/gly/stop-*.webp, scripts/qa/glyicons1326.html),
   each framed to sit inside its circle: no crop of a wide croc, no drawn door */
.gly-ahead .pill-note { font-size: calc(22 * var(--u)); }
/* (1.25.6: the Glybaan card's note stays: its card is the Stapel card's height anyway; hiding it left a hole) */


/* (1.25.6, the owner: cards "must line up perfectly") the two pills level with each other: each card fills the room above
   its plaque and its row (the same height in both), its big button at its foot, so SPEEL and GLY AF, the fish and the
   farthest ride, Oefen and Saam gly sit side by side */
.pill-body > .pill-daily { flex: 1 1 auto; display: flex; flex-direction: column; row-gap: calc(6 * var(--u)); }
.pill-body > .pill-daily > .btn-big { margin-top: auto; }
.pill-body > .fish-trophy { height: calc(112 * var(--u)); min-height: 0; overflow: hidden; }
/* (1.32.5, the owner: "NB! I do not like any misalignments") and the bottom row one height in both: the 👥 in Saam gly
   stood it 4 px taller than Oefen and its 🏆, so the Glybaan card's GLY AF and plaque sat 3-5 px above SPEEL and the fish */
.pill-body > .pill-row { flex: none; height: calc(76 * var(--u)); }
.pills-menu.fit1 .pill-body > .pill-row { height: calc(66 * var(--u)); }
.pill-body > .pill-row > * { height: auto; min-height: 0; }
.gly-card { background: linear-gradient(180deg, rgba(236, 246, 255, 0.95), rgba(206, 226, 252, 0.93)); box-shadow: 0 calc(6 * var(--u)) 0 rgba(8, 20, 60, 0.45); }
.gly-card-sub { margin: 0 0 calc(4 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); font-weight: 900; color: #16305e; line-height: 1.15; }
.gly-card .pill-note { color: #2b4a7c; }
.gly-card .gh-stop { box-shadow: 0 0 0 calc(3 * var(--u)) #3d6fd6, 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.3); }
/* (1.25.6) the big buttons' words on one line ("GLY AF" broke in two inside the narrower card) */
.pill .btn-big { white-space: nowrap; padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); gap: calc(10 * var(--u)); }
.pill .btn-big > span { min-width: 0; }
.pill-go-gly { font-size: calc(38 * var(--u)); }
/* (1.25.6) an earlier try's bigger fish still leads the day: a line under this try's */
.res-fish .res-fish-lead { font-size: calc(19 * var(--u)); font-weight: 800; opacity: 0.85; white-space: normal; line-height: 1.2; }

/* (1.25.6, the owner: "This section has nothing inside") the Glybaan card's words and pictures in the middle of its room */
.gly-card .gly-info { margin: auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--u)); }
.gly-card .gly-card-sub { margin: 0; }
.gly-card .gly-card-best { margin: 0; text-align: center; font-size: calc(22 * var(--u)); font-weight: 800; color: #2b4a7c; }
.gly-card .gh-stop { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }

/* (1.32.5, the owner: "please improve the visuals of the menu, not a revamp, just a proper touchup") */
/* the day's weather and visitors each on a soft chip: the pale pictures (wind, mist, rain) read on the white card */
.pill-daily .fc-line .fc-grp {
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #e3f3ff, #bfe0fa);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(61, 139, 235, 0.25);
}
.pill-daily .fc-line .fc-grp + .fc-grp { background: linear-gradient(180deg, #fff1df, #ffd9ad); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(232, 89, 12, 0.22); }
.pill-daily .fc-line { row-gap: calc(8 * var(--u)); }
/* Glybaan's farthest-today plate: polished silver to stand by the fish's gold */
.gly-trophy { background: linear-gradient(180deg, #ffffff, #cfe3f5 44%, #8fb4d9 54%, #dbeefc); box-shadow: 0 calc(5 * var(--u)) 0 #1d3a63, inset 0 0 0 calc(3 * var(--u)) #2b5486, inset 0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(255, 255, 255, 0.7); }
.gly-trophy.empty img { filter: brightness(0) opacity(0.42); }