/*
 * A carnival food stall. The striped awning with its hanging signs is the
 * one loud element; the sky, the glass jar and the counter stay soft and
 * have no dark outlines, so CAG and the food stickers (which do) stand out.
 * Colours come from the CAG brand: blue, pink, yellow, cream.
 */
:root {
  --cream: #FFF3DC;
  --paper: #FFFFFF;
  --ink: #1B2233;
  --dim: #7B8094;
  --blue: #3BC7F5;
  --blue-d: #1C9FD0;
  --blue-l: #C9EEFB;
  --pink: #EE3D77;
  --pink-d: #C42760;
  --pink-l: #FFD9E5;
  --yellow: #FFC93C;
  --yellow-d: #E2A31C;
  --yellow-l: #FFEBAE;
  --green: #3FAE5A;
  --glass: #E4F7FF;
  --glass-2: #C6ECFB;
  --glass-edge: #8ED4F0;
  --wood: #F7D08A;
  --wood-d: #E0AE5E;
  --wood-l: #FCE4B4;
  --shade: rgba(27, 34, 51, 0.12);
  /* Size factor of the scenery and the signs. Bigger windows raise it (see the end of this file). */
  --k: 1;
  --font: Fredoka, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  /* cream sky with a few soft confetti dots */
  background-color: var(--cream);
  background-image:
    radial-gradient(circle, rgba(238, 61, 119, 0.16) 4px, transparent 4.5px),
    radial-gradient(circle, rgba(59, 199, 245, 0.2) 5px, transparent 5.5px),
    radial-gradient(circle, rgba(255, 201, 60, 0.36) 4px, transparent 4.5px);
  background-size: 130px 150px, 170px 120px, 110px 160px;
  background-position: 14px 30px, 84px 96px, 46px 120px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.app {
  min-height: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
}

/*
 * Play area. Phone shape: signs on top, then the jar using the whole width;
 * the three power-ups sit on the counter under it. Wide screens (see the end of
 * this file): the jar in the middle at full height, score on the left,
 * next food and power-ups on the right.
 */
.play {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 6px;
  margin-bottom: -14px;
}
.sign.score { grid-area: 1 / 1 / 2 / -1; justify-self: start; }
.sign.next { grid-area: 1 / 1 / 2 / -1; justify-self: end; }
.status { grid-area: 2 / 1 / 3 / -1; }
.stage { grid-area: 3 / 1 / 4 / 2; }
/* On tall phones the power-ups are moved onto the counter by the page's script (see placePowers).
   Otherwise they stay in .play: in a narrow column on the right of the jar, or (wide screens, below) under the next food. */
@media not all and (min-width: 720px) and (min-aspect-ratio: 11/10) {
  .play:has(> .powers) { grid-template-columns: minmax(0, 1fr) calc(52px * var(--k)); }
  .play > .powers { grid-area: 3 / 2 / 4 / 3; }
}

/* Awning */
.awning {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-inline: -16px;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(38px * var(--k) + env(safe-area-inset-top, 0px));
  display: grid;
  place-items: end center;
  background: repeating-linear-gradient(90deg, var(--pink) 0 calc(28px * var(--k)), #FFFAF0 calc(28px * var(--k)) calc(56px * var(--k)));
  filter: drop-shadow(0 4px 0 var(--shade));
}
.awning::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc(14px * var(--k));
  background:
    radial-gradient(circle at calc(14px * var(--k)) 0, var(--pink) calc(13.5px * var(--k)), transparent calc(14px * var(--k))) 0 0 / calc(56px * var(--k)) calc(14px * var(--k)) repeat-x,
    radial-gradient(circle at calc(14px * var(--k)) 0, #FFFAF0 calc(13.5px * var(--k)), transparent calc(14px * var(--k))) calc(28px * var(--k)) 0 / calc(56px * var(--k)) calc(14px * var(--k)) repeat-x;
}
.plaque {
  position: relative;
  z-index: 1;
  transform: translateY(calc(10px * var(--k)));
  padding: calc(5px * var(--k)) calc(14px * var(--k)) calc(4px * var(--k));
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--shade);
}
/* Sound on/off, at the right end of the awning */
.mute { position: absolute; z-index: 2; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(-10px * var(--k)); width: calc(34px * var(--k)); height: calc(34px * var(--k)); display: grid; place-items: center; padding: 0; background: var(--paper); border: 0; border-radius: 50%; box-shadow: 0 3px 0 var(--shade); cursor: pointer; }
.mute svg { width: 66%; height: 66%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: var(--ink); }
.mute .off { display: none; stroke: var(--pink); }
.mute[aria-pressed="true"] .on { display: none; }
.mute[aria-pressed="true"] .off { display: inline; }
.mute:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 3px; }
.logo { display: block; height: calc(27px * var(--k)); width: auto; }
.logo.big { height: auto; width: 250px; max-width: 92%; margin-bottom: 2px; }

/* Signs hanging from the awning */
.sign { position: relative; margin-top: calc(20px * var(--k)); display: flex; align-items: center; gap: calc(8px * var(--k)); min-height: calc(44px * var(--k)); padding: calc(3px * var(--k)) calc(14px * var(--k)) calc(5px * var(--k)); background: var(--paper); border-radius: calc(16px * var(--k)); box-shadow: 0 4px 0 var(--shade); }
.sign::before, .sign::after { content: ""; position: absolute; bottom: 100%; width: 3px; height: calc(22px * var(--k)); border-radius: 2px; background: var(--wood-d); }
.sign::before { left: calc(16px * var(--k)); }
.sign::after { right: calc(16px * var(--k)); }
.kcal { font-weight: 700; font-size: calc(30px * var(--k)); line-height: 1; font-variant-numeric: tabular-nums; }
.kcal small { font-size: calc(14px * var(--k)); font-weight: 600; color: var(--pink); margin-left: 4px; }
.cap { font-size: calc(12px * var(--k)); font-weight: 600; color: var(--dim); }
.disc { display: block; width: calc(36px * var(--k)); height: calc(36px * var(--k)); }
.disc canvas, .ladder canvas { display: block; width: 100%; height: 100%; }
.disc.gold { border-radius: 50%; animation: ring 0.9s ease-in-out infinite alternate; box-shadow: 0 0 0 3px var(--yellow); }
@keyframes ring { to { box-shadow: 0 0 0 8px rgba(255, 201, 60, 0.3); } }

.status { margin: 6px 0 0; min-height: calc(24px * var(--k)); justify-self: center; padding: 3px calc(14px * var(--k)); font-size: calc(13px * var(--k)); font-weight: 600; line-height: calc(18px * var(--k)); color: var(--dim); text-align: center; border-radius: 999px; }
.status.hot { background: var(--yellow); color: var(--ink); font-weight: 700; box-shadow: 0 3px 0 var(--yellow-d); }
.status.bad { background: var(--pink); color: #fff; font-weight: 700; }

/* Glass jar, with CAG leaning over it */
.stage { min-width: 0; min-height: 366px; display: grid; place-items: end center; }
.jar { position: relative; width: 300px; height: 433px; margin-top: calc(var(--av, 44px) + 10px); }
.jar::before { content: ""; position: absolute; z-index: 3; pointer-events: none; left: -8px; right: -8px; top: -10px; height: 12px; border-radius: 8px; background: var(--glass-edge); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--shade); }
.jar::after { content: ""; position: absolute; inset: 0 -4px -4px -4px; border: 4px solid var(--glass-edge); border-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 8px 0 -2px var(--shade); pointer-events: none; }
#game { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--glass), var(--glass-2)); border-radius: 0 0 16px 16px; touch-action: none; cursor: pointer; }
#game:focus-visible { outline: none; }
.jar:has(#game:focus-visible)::before { background: var(--blue); }   /* keyboard focus lights up the rim */
.shine { position: absolute; left: 9px; top: 14%; width: 9px; height: 34%; border-radius: 9px; background: rgba(255, 255, 255, 0.6); pointer-events: none; }
.shine.two { top: 52%; height: 9%; }
.sign.score { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.left { font-size: calc(12px * var(--k)); font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
/* CAG on top of the jar. Her canvas goes under the rim (z-index 3 above), which hides the bottom edge of her bust. Placed and sized from the page's script. */
.puppet { position: absolute; z-index: 2; left: 0; pointer-events: none; will-change: transform; }
@media (min-resolution: 2dppx) { .puppet { will-change: auto; } }   /* see drawPuppet: on phones she moves by whole screen pixels */

.toast { position: absolute; z-index: 4; top: 22%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 5px 16px; border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--shade); color: var(--ink); font-weight: 700; font-size: calc(15px * var(--k)); text-align: center; pointer-events: none; animation: pop 0.25s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } }

/* Start, result and ranking boards */
.over { position: fixed; z-index: 20; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--k)); width: min(330px, calc(100% - 32px)); max-height: calc((100% - 24px) / var(--k)); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 30px 18px 20px; text-align: center; background: var(--paper); border-radius: 24px; box-shadow: 0 6px 0 var(--shade), 0 0 0 200vmax rgba(255, 243, 220, 0.78); overflow-x: hidden; overflow-y: auto; }
.over::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--pink) 0 20px, var(--pink-l) 20px 40px); }
/* CAG peeks over the cards (start, result, ranking), her cut edge hidden behind the striped top. Her
   canvas is painted from the page's script at the exact size it is shown (see drawPeek), and blinks.
   The loop: on Play she ducks behind the card and comes up behind the jar; when the run ends she
   ducks behind the jar and comes up over the result card. */
.over { overflow: visible; margin-top: calc(48px * var(--k)); }
/* The box clips her at the stripe; the room at its top lets her overshoot a little when she pops up. */
.peekbox { position: absolute; z-index: 0; left: 50%; bottom: calc(100% - 12px); width: 124px; padding-top: 18px; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.peek { display: block; width: 100%; height: auto; aspect-ratio: 560 / 509; transform: translateY(120%); }
.over.ready .peek { transform: none; transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15); }   /* comes up once her picture is in */
.over.ready.leaving .peek { transform: translateY(120%); transition: transform 0.24s cubic-bezier(0.55, 0, 0.9, 0.45); }
.over::before { z-index: 1; }
.app:has(.over:not([hidden])) .puppet { visibility: hidden; }   /* one CAG at a time */
/* The order of the foods, on the start card */
.menu { list-style: none; margin: 4px 0 2px; padding: 6px 10px; display: grid; grid-template-columns: repeat(11, 20px); gap: 3px; justify-content: center; background: #FFF7E8; border-radius: 14px; }
.menu li { width: 20px; height: 20px; }
.menu canvas { display: block; width: 100%; height: 100%; }
/* Result card: the biggest food in a little spotlight, the score counting up, three small boxes */
.hero { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px 0 0; }
.hero-disc { position: relative; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #FFFFFF 0 30%, #E3F6FD 62%, var(--blue-l) 100%); box-shadow: inset 0 -4px 0 rgba(28, 159, 208, 0.14); }
.hero-disc::before, .hero-disc::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.hero-disc::before { left: -6px; top: 16px; background: var(--pink); box-shadow: 92px 6px 0 -1px var(--yellow), 84px 58px 0 -2px var(--blue), 4px 52px 0 -2px var(--yellow); }
.hero-disc::after { right: 8px; top: -4px; background: var(--blue); box-shadow: -66px 82px 0 -2px var(--pink); }
.hero-disc canvas { display: block; width: 66px; height: 66px; }
.hero-cap { font-size: 13px; font-weight: 600; color: var(--dim); }
.hero-cap b { color: var(--ink); font-weight: 700; }
.tally { position: relative; margin: 2px 0 0; }
.over-kcal { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.sticker { position: absolute; top: -14px; right: -42px; margin: 0; padding: 3px 9px 4px; font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; background: var(--yellow); border-radius: 10px; box-shadow: 0 3px 0 var(--yellow-d); transform: rotate(9deg); animation: stick 0.55s 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes stick { from { transform: rotate(9deg) scale(0.2); opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 294px; margin: 8px 0 2px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 8px; border-radius: 14px; min-width: 0; }
.stat.blue { background: #EAF8FE; }
.stat.pink { background: #FFEFF4; }
.stat.yellow { background: #FFF6DB; }
.stat.yellow.hot { background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-d); }
.stat-k { font-size: 11px; font-weight: 600; color: var(--dim); }
.stat.hot .stat-k { color: var(--ink); }
.stat-v { max-width: 100%; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { margin: 2px 0 0; padding: 3px 11px; font-size: 12px; font-weight: 600; border-radius: 999px; text-align: center; }
.check.ok { color: var(--green); background: #EAF7EE; }
.check.bad { color: var(--pink-d); background: #FFEFF4; }
.check:empty { display: none; }
/* Start card: best score and ranking side by side */
.pair { display: flex; align-items: center; justify-content: center; gap: 8px; }
.best { padding: 5px 12px; font-weight: 600; font-size: 13.5px; background: var(--yellow-l); border-radius: 999px; font-variant-numeric: tabular-nums; }
.primary.wide { width: 220px; max-width: 100%; padding-inline: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#board::before { background: repeating-linear-gradient(90deg, var(--yellow) 0 20px, var(--yellow-l) 20px 40px); }
#over::before { background: repeating-linear-gradient(90deg, var(--blue) 0 20px, var(--blue-l) 20px 40px); }
.over-title { margin: 0; font-weight: 700; font-size: 25px; line-height: 1.1; text-wrap: balance; }
.over-kcal { margin: 0; font-weight: 700; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.over-kcal small { font-size: 17px; font-weight: 600; color: var(--pink); }
.over-line { margin: 0; color: var(--dim); font-weight: 600; font-size: 15px; text-wrap: balance; }
.over-line.small { font-size: 12.5px; font-weight: 500; min-height: 16px; }
.over-line.small:empty, .over-line:empty { display: none; }
.over-line.hot { padding: 3px 14px; color: var(--ink); background: var(--yellow); border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 var(--yellow-d); }
.over-line.ok { color: var(--green); font-weight: 600; }
.over-line.bad { color: var(--pink-d); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.field input::placeholder { color: #A9B6C4; font-weight: 600; }
.field input { width: 220px; max-width: 100%; padding: 9px 12px; font: 700 17px var(--font); text-align: center; color: var(--ink); background: #F5FCFF; border: 3px solid var(--blue-l); border-radius: 16px; -webkit-user-select: text; user-select: text; }
.field input:focus { outline: none; border-color: var(--blue); }
.primary, .ghost { font-family: var(--font); border-radius: 999px; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.primary { margin: 8px 0 6px; padding: 11px 40px 12px; font-weight: 700; font-size: 20px; color: #fff; background: var(--pink); border: 0; box-shadow: 0 5px 0 var(--pink-d); }
.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--pink-d); }
.primary:disabled { opacity: 0.55; cursor: default; }
.ghost { padding: 5px 16px; font-weight: 600; font-size: 14px; color: var(--blue-d); background: var(--paper); border: 2.5px solid var(--blue-l); }
.ghost:active { transform: translateY(1px); }
.primary:focus-visible, .ghost:focus-visible, .pw:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 3px; }

.rank, .rank-head { --cols: 30px minmax(0, 1fr) 76px; }
.rank.runs, .rank-head.runs { --cols: 30px minmax(0, 1fr) 46px 76px; }
.rank { list-style: none; margin: 2px 0 6px; padding: 0; width: 100%; max-width: 300px; max-height: calc(54vh / var(--k)); overflow-y: auto; border: 1.5px solid #E3F3FA; border-radius: 14px; font-variant-numeric: tabular-nums; }
.rank li, .rank-head { display: grid; grid-template-columns: var(--cols); gap: 6px; align-items: center; text-align: left; }
.rank li { padding: 6px 12px; font-weight: 500; font-size: 13.5px; line-height: 1.25; border-top: 1px solid #EEF7FB; }
.rank li:first-child { border-top: 0; }
.rank li:nth-child(even) { background: #F8FCFE; }
.rank li.you { background: var(--yellow-l); font-weight: 700; }
.rank li > :nth-child(n+3), .rank-head > :nth-child(n+3) { text-align: right; }
.rank .pos { justify-self: start; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--dim); border-radius: 50%; }
.rank .pos.p1 { color: #7A5300; background: #FFD45C; }
.rank .pos.p2 { color: #4B5566; background: #DDE3EA; }
.rank .pos.p3 { color: #6E3B12; background: #F2B98A; }
.rank .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .runs-n { color: var(--dim); }
.rank .kc { font-weight: 600; }
.rank-head { width: 100%; max-width: 300px; margin: 2px 0 0; padding: 0 13.5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.rank-head:empty { display: none; }
/* Ranking card: two tabs */
.tabs2 { display: flex; gap: 4px; padding: 4px; margin: 2px 0 4px; background: #F1FAFE; border-radius: 999px; }
.tab2 { padding: 5px 16px; font: 600 14px var(--font); color: var(--dim); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.tab2[aria-selected="true"] { color: #fff; background: var(--blue-d); box-shadow: 0 2px 0 rgba(27, 34, 51, 0.15); }
.tab2:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.rank li.you { background: var(--yellow-l); font-weight: 700; }
.rank .pos { color: var(--dim); text-align: right; }
.rank .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Counter: the jar stands on it; the menu of foods and the power-ups are on its front */
.counter { flex: 0 0 auto; margin-inline: -16px; padding: 24px 16px max(8px, env(safe-area-inset-bottom, 0px)); background: var(--wood); border-top: 6px solid var(--wood-l); border-radius: 22px 22px 0 0; box-shadow: 0 -3px 0 var(--shade); display: flex; flex-direction: column; gap: 6px; }
.ladder { display: grid; grid-template-columns: repeat(11, minmax(0, calc(28px * var(--k)))); gap: 3px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.ladder li { aspect-ratio: 1; opacity: 0.32; }
.ladder li.on { opacity: 1; }

.powers { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pw { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 0; font-family: var(--font); color: var(--ink); text-align: center; background: none; border: 0; cursor: pointer; transition: transform 0.1s ease; }
.pw:active:not(:disabled) { transform: translateY(3px); }
.ico { flex: 0 0 auto; display: grid; place-items: center; width: calc(48px * var(--k)); height: calc(48px * var(--k)); border-radius: 50%; }
.ico svg { width: 62%; height: 62%; display: block; }
.ico.blue { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-d), 0 3px 0 var(--shade); }
.ico.pink { background: var(--pink); box-shadow: inset 0 -4px 0 var(--pink-d), 0 3px 0 var(--shade); }
.ico.yellow { background: var(--yellow); box-shadow: inset 0 -4px 0 var(--yellow-d), 0 3px 0 var(--shade); }
.txt { display: flex; flex-direction: column; min-width: 0; }
.pw-n { font-weight: 700; font-size: calc(12.5px * var(--k)); line-height: 1.15; }
.pw-d { display: none; font-size: calc(11.5px * var(--k)); font-weight: 500; color: var(--dim); line-height: 1.15; }
.pw:disabled { cursor: default; opacity: 0.45; filter: grayscale(1); }

/* Power-ups on the counter (phones) */
.counter .powers { flex-direction: row; justify-content: center; gap: 8px; margin-bottom: 4px; }
.counter .pw { flex: 0 1 auto; flex-direction: row; gap: 6px; padding: 4px 13px 4px 4px; background: var(--paper); border-radius: 999px; box-shadow: 0 3px 0 var(--wood-d); }
.counter .pw:active:not(:disabled) { box-shadow: 0 0 0 var(--wood-d); }
.counter .ico { width: calc(34px * var(--k)); height: calc(34px * var(--k)); }
.counter .ico.blue { box-shadow: inset 0 -3px 0 var(--blue-d); }
.counter .ico.pink { box-shadow: inset 0 -3px 0 var(--pink-d); }
.counter .ico.yellow { box-shadow: inset 0 -3px 0 var(--yellow-d); }
.counter .pw-n { font-size: calc(14px * var(--k)); }
.counter .pw:disabled { opacity: 0.55; }
.note { margin: 0; font-size: calc(11.5px * var(--k)); font-weight: 500; color: #9A7A3F; text-align: center; }
.fail { margin: 8px 0; padding: 12px; background: var(--paper); border-radius: 14px; }

@media (prefers-reduced-motion: reduce) { .disc.gold, .toast, .sticker { animation: none; } .over .peek { transition: none !important; } }

/* Tablets held upright: same layout, more room, everything a bit bigger */
@media (min-width: 620px) { .app { max-width: 600px; } }
@media (min-width: 620px) and (min-height: 900px) { :root { --k: 1.25; } .app { max-width: 680px; } }

/*
 * Wide screens (a computer, a phone on its side): the awning and the counter
 * span the whole window, the jar stands in the middle at full height, with
 * the score on its left and the next food and power-ups on its right.
 * The middle column is as wide as the jar can get for the window's height.
 */
@media (min-width: 720px) and (min-aspect-ratio: 11/10) {
  :root { --jar-col: clamp(300px, calc((100vh - 126px - 82px * var(--k)) * 0.6923 + 38px), 780px); }
  .app { max-width: none; }
  .play { grid-template-columns: calc(190px * var(--k)) minmax(0, var(--jar-col)) calc(190px * var(--k)); grid-template-rows: auto minmax(0, 1fr); column-gap: calc(18px * var(--k)); justify-content: center; }
  .sign.score { grid-area: 1 / 1 / 2 / 2; }
  .sign.next { grid-area: 1 / 3 / 2 / 4; }
  .status { grid-area: 2 / 1 / 3 / 2; justify-self: start; align-self: start; margin-top: 12px; text-align: left; border-radius: 16px; }
  .stage { grid-area: 1 / 2 / -1 / 3; min-height: 380px; margin-top: 16px; }
  .powers { grid-area: 2 / 3 / 3 / 4; justify-content: flex-start; gap: calc(10px * var(--k)); margin-top: calc(30px * var(--k)); }
  .pw { flex-direction: row; gap: calc(10px * var(--k)); padding: calc(8px * var(--k)) calc(12px * var(--k)) calc(9px * var(--k)); text-align: left; background: var(--paper); border-radius: calc(18px * var(--k)); box-shadow: 0 4px 0 var(--shade); }
  .pw:active:not(:disabled) { box-shadow: 0 1px 0 var(--shade); }
  .ico { width: calc(40px * var(--k)); height: calc(40px * var(--k)); }
  .ico.blue { box-shadow: inset 0 -4px 0 var(--blue-d); }
  .ico.pink { box-shadow: inset 0 -4px 0 var(--pink-d); }
  .ico.yellow { box-shadow: inset 0 -4px 0 var(--yellow-d); }
  .pw-n { font-size: calc(16px * var(--k)); }
  .pw-d { display: block; }
}
/* Bigger windows: grow the awning, the signs and the buttons along with the jar. */
@media (min-width: 1000px) and (min-height: 760px) and (min-aspect-ratio: 11/10) { :root { --k: 1.2; } }
@media (min-width: 1200px) and (min-height: 900px) and (min-aspect-ratio: 11/10) { :root { --k: 1.4; } }
@media (min-width: 1500px) and (min-height: 1080px) and (min-aspect-ratio: 11/10) { :root { --k: 1.65; } }

/* ---------- wallet, tickets and prizes ---------- */
.wallet { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 294px; }
.ghost.wide { width: 220px; max-width: 100%; padding-top: 7px; padding-bottom: 7px; }
.who { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 13px; font-weight: 600; }
.who .addr { padding: 3px 10px; border-radius: 999px; background: #EAF8FE; font-variant-numeric: tabular-nums; }
.who .tix b { color: var(--pink); }
.link { padding: 0; border: 0; background: none; color: var(--dim); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.pick { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 14px; background: #FFF6DB; }
.pick-k { flex: 1; text-align: left; font-size: 13px; font-weight: 600; }
.pick-n { min-width: 22px; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.step { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--shade); color: var(--ink); font: 700 20px/1 Fredoka, system-ui, sans-serif; cursor: pointer; }
.step:disabled { opacity: 0.4; cursor: default; }
.pick-note { margin: 0; font-size: 12px; font-weight: 600; color: var(--dim); }
.pick-note:empty { display: none; }
#openPrizes { position: relative; }
.dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--paper); }
.prize { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k btn" "v btn" "note note"; align-items: center; column-gap: 10px; width: 100%; max-width: 294px; padding: 9px 12px; border-radius: 16px; text-align: left; }
.prize.gold { background: #FFF6DB; }
.prize.week { background: #FFEFF4; }
.prize-k { grid-area: k; font-size: 12px; font-weight: 600; color: var(--dim); }
.prize-v { grid-area: v; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prize .primary { grid-area: btn; margin: 0 0 4px; padding: 8px 18px 9px; font-size: 16px; }
.prize-note { grid-area: note; font-size: 12px; font-weight: 600; color: var(--dim); }
.prize-note:empty { display: none; }

.welcome { margin: 4px 0 2px; font-size: 19px; font-weight: 600; }
.welcome b { color: var(--pink); }
.prize.now { background: #EAF8FE; grid-template-areas: "k k" "v v" "note note"; }
/* The pool of the week, in whole RON, on the start card */
.poolsign { display: inline-flex; align-items: baseline; gap: 6px; margin: 4px 0 0; padding: 5px 16px 6px; border-radius: 999px; background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-d); font-weight: 600; }
.poolsign .pool-k { font-size: 13px; }
.poolsign b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.poolsign .pool-u { font-size: 13px; }

/* ---------- golden onigiri reveal: eaten in bites, then the prize ---------- */
.goldfx { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px;
  background: radial-gradient(circle at 50% 40%, #FFE08A, #FFF3DC 62%); cursor: pointer; text-align: center; }
.gfx-title { margin: 0 0 -6px; font-size: 26px; font-weight: 700; color: var(--yellow-d); }
.gfx-stage { position: relative; width: min(280px, 70vw); height: min(280px, 70vw); }
.gfx-cv { display: block; width: 100%; height: 100%; }
/* the prize shows up right where the onigiri was eaten */
.gfx-prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gfx-mult { margin: 0; font-size: 64px; font-weight: 700; line-height: 1; color: var(--ink); text-shadow: 0 4px 0 var(--yellow); opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.gfx-ron { margin: 6px 0 0; padding: 6px 22px 8px; border-radius: 999px; background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d); font-size: 30px; font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.gfx-ron:empty { display: none; }
.gfx-note { margin: 10px 0 0; max-width: 300px; font-size: 15px; font-weight: 600; color: var(--dim); opacity: 0; transition: opacity 0.3s; }
.gfx-tap { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--dim); opacity: 0; transition: opacity 0.4s; }
.goldfx.shown .gfx-mult { opacity: 1; transform: scale(1); }
.goldfx.shown .gfx-ron { opacity: 1; transform: none; transition-delay: 0.3s; }
.goldfx.shown .gfx-note { opacity: 1; transition-delay: 0.6s; }
.goldfx.shown .gfx-tap { opacity: 1; transition-delay: 1.2s; animation: tapnudge 1.6s ease-in-out 2s infinite; }
@keyframes tapnudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
/* ticket shop */
.link.buy { color: var(--pink); font-weight: 700; }
.shop-view { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.shop-view[hidden] { display: none; }
.ticket { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 294px; padding: 10px 14px 10px 10px; text-align: left;
  background: linear-gradient(135deg, #FFF6DB, #FFEBAE); border-radius: 16px; box-shadow: 0 4px 0 var(--yellow-d);
  -webkit-mask: radial-gradient(circle 9px at 84px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 84px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 84px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 84px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.ticket::after { content: ""; position: absolute; left: 84px; top: 12px; bottom: 12px; border-left: 2px dashed rgba(226, 163, 28, 0.55); }
.ticket-pic { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 12px; background: var(--paper); overflow: hidden; }
.ticket-pic img { width: 100%; height: 100%; object-fit: contain; }
.ticket-fallback { font-size: 32px; line-height: 1; }
.ticket-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-left: 14px; }
.ticket-name { font-size: 16px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-price { font-size: 14px; font-weight: 700; color: var(--pink-d); }
.ticket-stock { font-size: 12px; font-weight: 600; color: var(--dim); }
.ticket-stock:empty { display: none; }
.qty { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.step.big { width: 42px; height: 42px; font-size: 26px; background: #EAF8FE; box-shadow: 0 4px 0 var(--blue-l); color: var(--blue-d); }
.step.big:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-l); }
.qty-n { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1; }
.qty-n b { font-size: 40px; font-variant-numeric: tabular-nums; }
.qty-n b.bump { animation: bump 0.22s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }
.qty-n small { font-size: 12px; font-weight: 600; color: var(--dim); }
.chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.chips:empty { display: none; }
.chip { min-width: 40px; padding: 4px 10px; font: 600 14px var(--font); color: var(--ink); background: var(--paper); border: 2px solid var(--blue-l); border-radius: 999px; cursor: pointer; }
.chip.on { color: #fff; background: var(--blue); border-color: var(--blue); }
.bill { width: 100%; max-width: 294px; padding: 8px 14px; border-radius: 14px; background: #F6FBFE; }
.bill-row { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; color: var(--dim); }
.bill-row b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bill-row.small { font-size: 12.5px; }
.bill-row.small .short { color: var(--pink-d); font-weight: 700; }
.bill-row[hidden] { display: none; }
.shop-foot { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--dim); opacity: 0.85; }
.steps { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 260px; text-align: left; }
.steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--dim); transition: color 0.2s; }
.steps li i { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--blue-l); background: var(--paper); }
.steps li.now { color: var(--ink); }
.steps li.now i { border-color: var(--blue-l); border-top-color: var(--blue); animation: spin 0.8s linear infinite; }
.steps li.done { color: var(--ink); }
.steps li.done i { border-color: var(--green); background: var(--green); }
.steps li.done i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.steps li.fail { color: var(--pink-d); }
.steps li.fail i { border-color: var(--pink); background: var(--pink); }
.steps li.fail i::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; line-height: 20px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.won { position: relative; margin: 6px 0 2px; }
.won-ticket { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 24px; background: linear-gradient(135deg, #FFF6DB, #FFC93C); box-shadow: 0 6px 0 var(--yellow-d), 0 0 0 8px rgba(255, 201, 60, 0.25); overflow: hidden; animation: land 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.won-ticket img { width: 86%; height: 86%; object-fit: contain; }
.won-ticket .ticket-fallback { font-size: 60px; }
.won-plus { position: absolute; right: -18px; top: -10px; padding: 3px 11px; font-size: 22px; font-weight: 700; color: #fff; background: var(--pink); border-radius: 999px; box-shadow: 0 3px 0 var(--pink-d); transform: rotate(8deg); animation: stick 0.45s 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes land { from { transform: translateY(-60px) rotate(-14deg) scale(0.4); opacity: 0; } }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; border-radius: 24px; }
@media (prefers-reduced-motion: reduce) { .won-ticket, .won-plus, .qty-n b.bump { animation: none; } .steps li.now i { animation-duration: 2s; } }
/* start card, signed in: account line, three tiles, then the run */
.welcome { margin: 6px 0 0; }
.acct { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 4px; font-size: 12px; font-weight: 600; color: var(--dim); }
.acct[hidden] { display: none; }
.acct .addr { font-variant-numeric: tabular-nums; }
.acct .sep { opacity: 0.6; }
.dash { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.dash[hidden] { display: none; }
.poolcard { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 3px; padding: 11px 14px 10px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d); }
.pc-k { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(27, 34, 51, 0.7); }
.pc-ico { width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 2px 0 var(--yellow-d)); }
.pc-v { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 5px; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-v small { font-size: 16px; font-weight: 700; }
.pc-bar { grid-column: 1 / -1; height: 8px; margin-top: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.55); overflow: hidden; }
.pc-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--pink); transition: width 0.6s ease; }
.pc-s { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: rgba(27, 34, 51, 0.7); }
.tile-btn { padding: 3px 10px 4px; font: 700 12px var(--font); color: #fff; background: var(--pink); border: 0; border-radius: 999px; box-shadow: 0 2px 0 var(--pink-d); cursor: pointer; white-space: nowrap; }
.tile-btn:active { transform: translateY(2px); box-shadow: none; }
.tile-btn[hidden] { display: none; }
.tixbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 14px; background: #FFEFF4; }
.tix-ico { flex: none; width: 20px; height: 20px; color: var(--pink); }
.tix-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.tix-v { margin-right: auto; font-size: 22px; line-height: 1; color: var(--pink-d); font-variant-numeric: tabular-nums; }
.chooser { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l step" "chips chips"; align-items: center; row-gap: 6px; width: 100%; margin-top: 7px; padding: 8px 10px 9px 12px; border-radius: 14px; background: #FFF6DB; }
.chooser[hidden] { display: none; }
.ch-l { grid-area: l; display: flex; flex-direction: column; text-align: left; }
.ch-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.ch-l small { font-size: 12px; font-weight: 600; color: var(--dim); }
.ch-step { grid-area: step; display: flex; align-items: center; gap: 8px; }
.ch-n { min-width: 26px; font-size: 26px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.ch-n.bump { animation: bump 0.22s ease; }
.chooser .chips { grid-area: chips; justify-content: flex-start; }
.chooser .chip { min-width: 34px; padding: 2px 9px; font-size: 13px; }
.link.practice { margin: -2px 0 4px; font-size: 14px; font-weight: 600; color: var(--blue-d); text-decoration: none; }
.link.practice:hover { text-decoration: underline; }
.link.practice[hidden] { display: none; }
.pair.two { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 294px; }
.pair.two .ghost { width: 100%; padding-inline: 0; }
.best[hidden] { display: none; }
/* signed in: the logo gets smaller and the how-to line steps aside for the dashboard */
#home.dashed .tagline, #home.dashed .menu { display: none; }
#home.dashed .logo.big { width: 190px; }
#home.dashed .welcome { margin-top: 0; }
/* the "how many tickets" card: one big number in the middle */
#choose .chooser.big { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 12px; margin: 6px 0 0; border-radius: 20px; }
.cb-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
#choose .step { width: 46px; height: 46px; font-size: 26px; background: var(--paper); box-shadow: 0 4px 0 var(--shade); }
.cb-n { display: flex; flex-direction: column; align-items: center; min-width: 72px; line-height: 1; }
#choose .ch-n { min-width: 0; font-size: 52px; }
.cb-n small { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
#choose .chooser .chips { justify-content: center; }
#choose .chooser .chip { min-width: 48px; padding: 5px 12px; font-size: 15px; }
.cb-of { font-size: 12px; font-weight: 600; color: var(--dim); }
.boost { display: flex; justify-content: center; gap: 8px; margin: 2px 0 0; }
.boost span { padding: 4px 11px 5px; border-radius: 999px; background: #EAF8FE; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.boost b { color: var(--blue-d); font-variant-numeric: tabular-nums; }
.boost span:last-child { background: #FFF6DB; }
.boost span:last-child b { color: var(--yellow-d); }
/* prizes card */
.pz { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico txt btn" "note note note"; align-items: center; column-gap: 10px; row-gap: 4px; width: 100%; max-width: 294px; padding: 10px 12px 11px; border-radius: 18px; text-align: left; }
.pz.gold { background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d); }
.pz.week { background: #FFEFF4; }
.pz.now { grid-template-columns: 1fr; grid-template-areas: none; background: #EAF8FE; }
.pz-ico { grid-area: ico; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); }
.pz-ico canvas { display: block; width: 40px; height: 40px; }
.pz.gold .pz-ico { width: 46px; height: 46px; }
.pz-ico svg { width: 24px; height: 24px; }
.pz.week .pz-ico { color: var(--pink); background: #fff; }
.pz-txt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; }
.pz-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz.gold .pz-k { color: rgba(27, 34, 51, 0.7); }
.pz-v { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-v.big { font-size: 26px; color: var(--blue-d); }
.pz.week .pz-v { color: var(--pink-d); }
.pz-btn { grid-area: btn; padding: 7px 16px 8px; font: 700 15px var(--font); color: #fff; background: var(--pink); border: 0; border-radius: 999px; box-shadow: 0 3px 0 var(--pink-d); cursor: pointer; }
.pz-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-d); }
.pz-btn:disabled { color: rgba(27, 34, 51, 0.4); background: rgba(255, 255, 255, 0.65); box-shadow: none; cursor: default; }
.pz-btn.done { color: #fff; background: var(--green); }
.pz-note { grid-area: note; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.pz.gold .pz-note { color: rgba(27, 34, 51, 0.7); }
.pz.now .pz-note { grid-area: auto; }
.pz-note:empty { display: none; }
.pz[hidden] { display: none; }
.pz-head { display: flex; justify-content: space-between; align-items: baseline; }
.pz-time { font-size: 11.5px; font-weight: 700; color: var(--blue-d); }
.pz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.pz-two > span { display: flex; flex-direction: column; padding: 6px 10px 7px; border-radius: 12px; background: #fff; }
.pz-two small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.pz-two b { font-size: 19px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-two span:last-child b { color: var(--blue-d); }
.tixbar[hidden] { display: none; }
#home .pick-note { margin-top: 3px; }
/* result card */
.scorecard { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 294px; margin-top: 4px; }
.sc-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-d); }
.scorecard .tally { position: relative; }
.sc-s { font-size: 12px; font-weight: 600; color: var(--dim); }
.sc-s[hidden] { display: none; }
#over .stats { margin: 4px 0 0; }
#over .stat-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.goldwin { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k v" "s v"; align-items: center; width: 100%; max-width: 294px; padding: 8px 14px; border-radius: 16px; text-align: left; background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d); }
.goldwin[hidden] { display: none; }
.gw-k { grid-area: k; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(27, 34, 51, 0.7); }
.gw-s { grid-area: s; font-size: 12px; font-weight: 600; color: rgba(27, 34, 51, 0.7); }
.gw-v { grid-area: v; font-size: 22px; font-variant-numeric: tabular-nums; }
#over .check { margin-top: 0; padding: 0; background: none; font-size: 11.5px; }
#over .pair.two { margin-top: -2px; }
#over .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* golden onigiri feed: soft notices, a button with the onigiri, and the list */
.oni { display: inline-block; flex: none; width: 28px; height: 28px; background: url(/web/img/oni-gold.webp) center / contain no-repeat; }
.gbtn { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); top: var(--gb-top, 12px); width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--shade), 0 0 0 2px rgba(255, 201, 60, 0.55); cursor: pointer; }
.gbtn[hidden] { display: none; }
.gbtn .oni { width: 72%; height: 72%; }
body.in-run .gbtn, body.gb-off .gbtn { display: none; }
.gstack { position: fixed; z-index: 45; left: 12px; right: 12px; top: calc(64px * var(--k)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.gnote { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 14px 5px 7px; border-radius: 999px; background: linear-gradient(135deg, #FFF3CC, #FFFFFF 75%); box-shadow: 0 6px 18px rgba(27, 34, 51, 0.12), inset 0 0 0 1.5px rgba(255, 201, 60, 0.6); font-size: 13px; font-weight: 500; color: var(--ink); pointer-events: auto; cursor: pointer; animation: gin 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; transition: opacity 0.4s, transform 0.4s; }
.gnote .oni { width: 26px; height: 26px; }
.gnote .t { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; min-width: 0; }
.gnote b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.gnote small { font-size: 12px; color: var(--dim); }
.gnote .amt { margin-left: 4px; font-weight: 600; color: var(--yellow-d); white-space: nowrap; }
.gnote.out { opacity: 0; transform: translateY(-6px); }
@keyframes gin { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
.gpanel .tabs2 { margin: 2px 0 2px; }
.gp-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 294px; max-height: 52vh; overflow-y: auto; }
.gp-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 6px; border-top: 1px solid #F1EDE4; text-align: left; }
.gp-list li:first-child { border-top: 0; }
.gp-list li.fresh { border-radius: 12px; background: linear-gradient(90deg, rgba(255, 235, 174, 0.6), rgba(255, 235, 174, 0)); }
.gp-list .oni { width: 26px; height: 26px; }
.gp-list .w { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.gp-list .w b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-list .w small { font-size: 11.5px; font-weight: 600; color: var(--dim); }
.gp-list li.me .w b::after { content: " · you"; color: var(--blue-d); }
.gp-list .a { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.gp-list .a b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.gp-list .a small { font-size: 11.5px; font-weight: 700; color: var(--yellow-d); }
#golds .over-line.small:empty { display: none; }
@media (min-width: 900px) {
  /* on a computer: a round button in the corner, notices above it, and the list opens from it */
  .gbtn { position: fixed; z-index: 44; left: auto; top: auto; right: 22px; bottom: 22px; width: 52px; height: 52px; box-shadow: 0 6px 18px rgba(27, 34, 51, 0.14), 0 0 0 3px rgba(255, 201, 60, 0.5); }
  body.in-run .gbtn, body.gb-off .gbtn { display: grid; }
  .gbtn { transform: none; }
  .gbtn .oni { width: 36px; height: 36px; }
  .gstack { left: auto; right: 22px; top: auto; bottom: 88px; align-items: flex-end; flex-direction: column-reverse; }
  .gnote { width: 260px; padding: 9px 14px 9px 10px; border-radius: 16px; }
  .gnote .oni { width: 30px; height: 30px; }
  .gnote .t { flex-direction: column; gap: 0; line-height: 1.25; }
  .gnote .amt { margin-left: auto; }
  .gnote.old { opacity: 0.6; transform: scale(0.96); transform-origin: right bottom; }
  .gnote.out { transform: translateX(12px); }
  @keyframes gin { from { opacity: 0; transform: translateX(16px); } }
  #golds.gpanel { position: fixed; z-index: 43; top: auto; left: auto; right: 22px; bottom: 88px; width: 320px; margin: 0; padding-top: 26px; transform: none; box-shadow: 0 6px 0 var(--shade), 0 14px 40px rgba(27, 34, 51, 0.16); }
  #golds .over-title { font-size: 21px; }
  #golds .gp-list { max-height: 330px; }
}
body.in-run .gstack { top: calc(118px * var(--k)); }
body.golds-open .gstack { display: none; }
@media (min-width: 900px) { body.in-run .gstack { top: auto; } }
/* pool card in two: the weekly pool and the biggest golden prize */
.poolcard { grid-template-columns: 1.15fr 1fr; align-items: stretch; column-gap: 8px; padding: 9px; }
.pc-half { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 6px 3px; text-align: left; }
.pc-half.gold { padding: 7px 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); }
.poolcard .pc-k { font-size: 11px; white-space: nowrap; }
.poolcard .pc-v { font-size: 30px; white-space: nowrap; }
.poolcard .pc-v small { font-size: 14px; }
.pc-half.gold .pc-v { font-size: 26px; color: var(--pink-d); }
.poolcard .pc-bar { margin-top: 3px; height: 6px; }
.poolcard .pc-s { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-oni { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; }
/* the golden onigiri list: a plain round window */
#golds.gpanel::before { display: none; }
#golds.gpanel { padding-top: 18px; border-radius: 22px; }
/* how to play */
.homelinks { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -2px 0 4px; }
.homelinks .link.practice { margin: 0; }
.homelinks .sep { color: var(--dim); opacity: 0.6; }
.homelinks .sep[hidden] { display: none; }
.howto { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 294px; }
.hrow { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; padding: 10px 12px 10px 8px; border-radius: 18px; text-align: left; }
.hrow.b { background: #EAF8FE; }
.hrow.y { background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d); }
.hrow.p { background: #FFEFF4; }
.hpic { display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 700; color: var(--dim); }
.hrow.p .hpic { color: var(--pink); }
.hf { display: inline-block; flex: none; background: center / contain no-repeat; }
.hf.s { width: 28px; height: 28px; }
.hf.l { width: 46px; height: 46px; }
.hf.ck { background-image: url(/web/img/cookie-s.webp); }
.hrow b { display: block; font-size: 15.5px; line-height: 1.15; }
.hrow .t { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #5D6275; }
.hrow.y .t { color: rgba(27, 34, 51, 0.75); }
.hf.oni { background-image: url(/web/img/oni-gold.webp); }
/* Shake, Swap and Sweep for CAG NFT holders only */
.powers { position: relative; }
.pw-lock { display: none; }
.powers.locked .pw-lock { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); display: flex; align-items: center; gap: 7px; padding: 5px 13px 6px 6px; border-radius: 999px; background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 3px 0 var(--yellow-d), 0 6px 14px rgba(27, 34, 51, 0.12); color: var(--ink); white-space: nowrap; pointer-events: none; line-height: 1.05; }
.pw-lock .lk { display: grid; place-items: center; width: calc(24px * var(--k)); height: calc(24px * var(--k)); border-radius: 50%; background: var(--paper); box-shadow: 0 2px 0 var(--yellow-d); }
.pw-lock svg { width: 58%; height: 58%; color: var(--pink); }
.pw-lock .lt { display: flex; flex-direction: column; text-align: left; }
.pw-lock small { font-size: calc(9.5px * var(--k)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(27, 34, 51, 0.6); }
.pw-lock b { font-size: calc(13px * var(--k)); font-weight: 700; }
.powers.locked .pw { opacity: 0.5; filter: grayscale(0.85); }
.powers.locked .pw:not(:disabled) { cursor: pointer; }
@media (min-width: 720px) and (min-aspect-ratio: 11/10) {
  /* on a computer the badge sits right over the three buttons */
  .powers { align-self: start; }
  .powers.locked .pw-lock { padding: 7px 16px 8px 8px; gap: 9px; }
  .pw-lock .lk { width: calc(30px * var(--k)); height: calc(30px * var(--k)); }
  .pw-lock small { font-size: calc(10.5px * var(--k)); }
  .pw-lock b { font-size: calc(15px * var(--k)); }
}
/* golden notices during a run: the gold gradient of the menus */
.toast { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.toast.gold { padding: 6px 20px 8px; border-radius: 16px; background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d), 0 8px 18px rgba(27, 34, 51, 0.12); color: var(--ink); }
.toast.gold small { font-size: calc(10.5px * var(--k)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(27, 34, 51, 0.6); }
.toast.gold span { font-size: calc(16px * var(--k)); font-weight: 700; }
.status.hot { background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 3px 0 var(--yellow-d); border-radius: 999px; }
/* the Max golden box opens how it pays */
button.pc-half.gold { border: 0; font: inherit; color: inherit; cursor: pointer; transition: transform 0.1s ease; }
button.pc-half.gold:hover { background: rgba(255, 255, 255, 0.7); }
button.pc-half.gold:active { transform: translateY(2px); }
.pc-more { position: absolute; right: 7px; bottom: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); color: var(--yellow-d); font-size: 11px; font-weight: 700; font-style: italic; box-shadow: 0 1px 0 var(--yellow-d); }
.gi-max { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 294px; padding: 10px 12px 12px; border-radius: 20px; background: linear-gradient(135deg, #FFE69A, var(--yellow)); box-shadow: 0 4px 0 var(--yellow-d); }
.gi-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(27, 34, 51, 0.65); }
.gi-v { font-size: 46px; line-height: 1.05; color: var(--pink-d); font-variant-numeric: tabular-nums; }
.gi-v small { font-size: 18px; color: var(--ink); }
.gi-s { font-size: 12px; font-weight: 600; color: rgba(27, 34, 51, 0.7); }
.gi-lead { margin: 2px 0 0; max-width: 280px; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.gi-lead b { color: var(--yellow-d); }
.gi-mult { font-size: 20px; font-weight: 700; color: var(--pink); }
#goldinfo .hrow .t + .t { margin-top: 1px; }
button.pc-half.gold .pc-s { padding-right: 18px; }
/* golden onigiri terms */
.link.terms { margin: -2px 0 0; font-size: 12.5px; font-weight: 600; }
#terms { gap: 10px; }
.terms-list { margin: 0; padding: 0 2px 0 20px; max-width: 300px; max-height: calc(52vh / var(--k)); overflow-y: auto; text-align: left; font-size: 12.5px; line-height: 1.4; color: #5D6275; }
.terms-list li { margin: 0 0 8px; padding-left: 2px; }
.terms-list li::marker { font-weight: 700; color: var(--pink); }
.terms-list b { color: var(--ink); }
#terms .over-title { font-size: 21px; }
#terms { padding-top: 24px; }