/* The menus every game on joldi.in shares (game-menus.js), in Fruit Jar's
   look, where they began: cream cards edged in brown, candy buttons, the top
   bar, the title screen, Paused, Settings, the scores and the toasts. A game's
   own stylesheet comes after this one. */
:root {
  --cream: #FFF4E6; --peach: #FFE9D6; --apricot: #FFD6C0; --coral: #FF8A65; --pink: #FF6F91;
  --leaf: #7CC47F; --sky: #BFE6FF; --brown: #6B3A1F; --ink: #3B2314;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --gap: clamp(8px, 2.2vmin, 16px);
  --hud-h: clamp(62px, 8.6vmin, 84px);
  --bw: clamp(2.5px, 0.7vmin, 4px);
  --radius: clamp(16px, 4vmin, 26px);
  --lift: clamp(3px, 0.8vmin, 5px);
  --round: clamp(44px, 11vmin, 58px);
  --shadow: 0 var(--lift) 0 var(--brown), 0 calc(var(--lift) * 2.4) calc(var(--lift) * 4) rgba(107, 58, 31, 0.22);
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--peach); color: var(--ink); font-family: var(--font);
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
body { position: fixed; inset: 0; height: 100vh; height: 100dvh; }
[hidden] { display: none !important; }
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- cards ---------- */
.card {
  background: var(--cream); border: var(--bw) solid var(--brown);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* ---------- candy buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-width: 44px; min-height: 44px; padding: 0 1.15em; border-radius: 999px;
  border: var(--bw) solid var(--brown); color: #fff; cursor: pointer;
  font: 900 clamp(15px, 4.2vmin, 22px)/1 var(--font); letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(107, 58, 31, 0.45);
  background: linear-gradient(180deg, #FFB59E 0%, var(--coral) 50%, #F2663F 100%);
  box-shadow: 0 var(--lift) 0 var(--brown), 0 calc(var(--lift) * 2) calc(var(--lift) * 3) rgba(107, 58, 31, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.09s ease, box-shadow 0.09s ease; touch-action: manipulation; outline: none;
}
.btn::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 8%; height: 34%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); pointer-events: none;
}
.btn:active {
  transform: translateY(calc(var(--lift) - 1px)) scale(0.97);
  box-shadow: 0 1px 0 var(--brown), 0 3px 8px rgba(107, 58, 31, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.btn:focus-visible { box-shadow: 0 var(--lift) 0 var(--brown), 0 0 0 4px rgba(255, 138, 101, 0.45); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 2px 0 rgba(107, 58, 31, 0.4)); }
.btn.green { background: linear-gradient(180deg, #C4F0B2 0%, var(--leaf) 50%, #56A95B 100%); }
.btn.pink { background: linear-gradient(180deg, #FFB0C5 0%, var(--pink) 50%, #EA4B74 100%); }
.btn.cream { background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 55%, #FFE2C6 100%); color: var(--brown); text-shadow: none; }
.btn.cream svg { filter: none; }
.btn.round { padding: 0; width: var(--round); height: var(--round); }
.btn.round svg { width: 52%; height: 52%; }
.btn.big { min-height: clamp(56px, 14vmin, 78px); font-size: clamp(21px, 6.2vmin, 32px); padding: 0 1.3em; }
.btn.waiting { opacity: 0.6; }
.btn.small { min-height: 44px; font-size: clamp(14px, 3.8vmin, 17px); padding: 0 0.95em; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--gap);
  padding: calc(var(--sat) + var(--gap)) calc(var(--sar) + var(--gap)) 0 calc(var(--sal) + var(--gap));
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud.over { z-index: 11; }
.score-card {
  height: var(--hud-h); min-width: clamp(92px, 25vmin, 160px); flex: none;
  padding: calc(var(--hud-h) * 0.08) clamp(12px, 3vmin, 18px);
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; line-height: 1;
}
.score-label { font-size: min(clamp(9px, 2.3vmin, 12px), calc(var(--hud-h) * 0.15)); font-weight: 900; letter-spacing: 0.14em; margin-right: -0.14em; color: var(--coral); text-transform: uppercase; }
.score { font-size: min(clamp(20px, 6vmin, 34px), calc(var(--hud-h) * 0.37)); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; transform-origin: center; }
.score.bump { animation: bump 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.score.bump2 { animation: bump2 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.best-line { font-size: min(clamp(10px, 2.4vmin, 13px), calc(var(--hud-h) * 0.16)); font-weight: 800; color: rgba(59, 35, 20, 0.62); font-variant-numeric: tabular-nums; }
.best-line.record { color: #E0356B; font-weight: 900; animation: record 0.7s ease-in-out 4; }
@keyframes record { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bump2 { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Points counting more for a few moves (GameMenus' boost): ×2 in honey, and the game's
   picture for each move left, sized by the font it is in. On the score card it rides the
   card's top edge in place of Score, centred, or from the card's left when it is wider. */
.boost {
  display: inline-flex; align-items: center; padding: 0.1em 0.45em 0.1em 0.4em; vertical-align: middle;
  border: 2px solid var(--brown); border-radius: 999px; box-shadow: 0 2px 0 var(--brown);
  background: linear-gradient(180deg, #FFF0A8 0%, #FFD23F 55%, #F5B01B 100%);
  color: var(--brown); font: 900 1em/1 var(--font); letter-spacing: 0; text-shadow: none; white-space: nowrap;
}
.boost b { font-weight: 900; margin-right: 0.2em; }
.boost .pip { flex: none; display: block; width: auto; height: 1.1em; margin-left: -0.1em; }
.boost i.pip { width: 0.5em; height: 0.5em; margin: 0 0.1em; border-radius: 50%; background: var(--brown); }
.boost .pip.away { animation: pip-away 0.7s ease-in forwards; }
@keyframes pip-away { to { transform: translate(0.9em, -1.8em) rotate(25deg) scale(0.7); opacity: 0; } }
.score-card { position: relative; }
.score-card.boosted .score-label { visibility: hidden; }
.score-card .boost {
  position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; top: calc(-1 * var(--bw) - 0.45em);
  font-size: min(clamp(13px, 3.8vmin, 18px), calc(var(--hud-h) * 0.24)); pointer-events: none;
  animation: boost-in 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.score-card .boost.away { animation: boost-out 0.4s ease both; }
/* A streak (GameMenus' streak): the same badge in leaf green, hanging from the card's
   bottom edge, its pictures dropping off as the moves to carry it on go by. */
.score-card .boost.streak {
  top: auto; bottom: calc(-1 * var(--bw) - 0.95em); color: #fff; text-shadow: 0 1px 0 rgba(59, 35, 20, 0.55);
  background: linear-gradient(180deg, #B9E68A 0%, #7CC47F 50%, #4E9A45 100%);
}
.score-card .boost.streak .pip { height: 0.95em; margin-left: 0; }
.score-card .boost.streak .pip.away { animation: pip-drop 0.7s ease-in forwards; }
@keyframes pip-drop { to { transform: translate(0.2em, 1.6em) rotate(70deg) scale(0.8); opacity: 0; } }
@keyframes boost-in { from { transform: scale(0.5); opacity: 0; } }
@keyframes boost-out { to { transform: translateY(-0.6em) scale(0.8); opacity: 0; } }
.hud-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.8vmin, 12px); pointer-events: none; }
.hud-mid > * { pointer-events: auto; }
#soundBtn .off, #soundBtn.muted .on { display: none; }
#soundBtn.muted .off { display: block; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + var(--gap)) calc(var(--sar) + var(--gap)) calc(var(--sab) + var(--gap)) calc(var(--sal) + var(--gap));
}
.modal { background: rgba(59, 35, 20, 0.3); }
.modal .panel { animation: slide-in 0.34s cubic-bezier(0.25, 1.45, 0.5, 1) both; }
@keyframes slide-in { from { transform: translateY(26px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
#title {
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 246, 236, 0.94) 0%, rgba(255, 237, 222, 0.86) 50%, rgba(255, 220, 200, 0.72) 100%);
}
.title-col { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 5vmin, 40px); max-width: 100%; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2vmin, 16px); margin: 0; animation: bob 3.2s ease-in-out infinite; }
/* The game's own logo (branding/logo.webp, made by _tools/prepare-logo.php). */
.logo-img { display: block; width: min(86vw, 440px); height: auto; max-height: 36vh; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(107, 58, 31, 0.22)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
.title-best, .final-best { font-size: clamp(15px, 4.2vmin, 20px); font-weight: 800; color: rgba(59, 35, 20, 0.75); font-variant-numeric: tabular-nums; }
.title-best b, .final-best b { color: var(--ink); }
.panel {
  width: min(100%, 380px); max-height: 100%; padding: clamp(18px, 5vmin, 28px); display: flex; flex-direction: column;
  align-items: center; gap: clamp(8px, 2.4vmin, 14px); text-align: center;
}
.panel-title { margin: 0; font-size: clamp(26px, 8vmin, 40px); font-weight: 900; color: var(--brown); line-height: 1.05; }
.panel-text { margin: 0; font-size: clamp(15px, 4vmin, 18px); font-weight: 700; color: rgba(59, 35, 20, 0.8); line-height: 1.3; }
.panel-icon { width: clamp(64px, 18vmin, 96px); height: clamp(64px, 18vmin, 96px); }
.panel-actions { display: flex; flex-direction: column; align-items: stretch; gap: clamp(10px, 2.6vmin, 14px); width: 100%; margin-top: 4px; }
.panel-actions.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.panel-actions.row .btn { flex: 1 1 0; }
/* Paused's Settings and Home stay side by side, at every width and text size */
#pause .panel-actions.row { flex-wrap: nowrap; }
#pause .panel-actions.row .btn { min-width: 0; padding: 0 0.6em; }
/* the steps that put a game on an iPhone's home screen, under the title's Install this app */
.install-steps { margin: 0; padding: 10px 14px 10px 34px; background: #fff; border: 2px solid rgba(107, 58, 31, 0.2); border-radius: calc(var(--radius) * 0.7); text-align: left; font-size: clamp(14px, 3.9vmin, 16px); font-weight: 700; line-height: 1.35; color: rgba(59, 35, 20, 0.85); }
.install-steps li + li { margin-top: 6px; }
.install-steps b { font-weight: 900; color: var(--ink); }
.install-steps svg { width: 1.3em; height: 1.3em; vertical-align: -0.3em; color: #2f7bf6; }
.final-label { font-size: clamp(12px, 3.2vmin, 15px); font-weight: 900; letter-spacing: 0.1em; color: var(--coral); text-transform: uppercase; }
.final-score { font-size: clamp(46px, 15vmin, 72px); font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.new-best {
  font-size: clamp(14px, 3.8vmin, 17px); font-weight: 900; color: #fff; background: var(--pink); border: 2px solid var(--brown);
  border-radius: 999px; padding: 0.3em 0.9em; text-shadow: 0 1px 0 rgba(107, 58, 31, 0.4); animation: wiggle 1.4s ease-in-out infinite;
}
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }

/* ---------- how to play ---------- */
/* A game's own How to play (its #gameHowTo): groups of rows, each a picture and a line
   or two, under headings. */
.howto { display: flex; flex-direction: column; gap: clamp(8px, 2.2vmin, 12px); }
.howto h3 { margin: 4px 0 -2px; font-size: clamp(17px, 4.6vmin, 20px); font-weight: 900; color: var(--brown); text-align: center; }
.howto-note { margin: 0; font-size: clamp(14px, 3.9vmin, 16px); font-weight: 700; color: rgba(59, 35, 20, 0.85); line-height: 1.3; text-align: center; }
.howto-group { display: flex; flex-direction: column; background: #fff; border: 2px solid rgba(107, 58, 31, 0.2); border-radius: calc(var(--radius) * 0.7); }
.howto-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.howto-row + .howto-row { border-top: 2px solid rgba(107, 58, 31, 0.1); }
.howto-row img {
  flex: none; width: clamp(60px, 17vmin, 76px); height: clamp(60px, 17vmin, 76px); object-fit: cover;
  border-radius: 22%; border: 2px solid var(--brown); box-shadow: 0 2px 0 var(--brown); background: var(--cream);
}
.howto-row p { margin: 0; font-size: clamp(14px, 3.9vmin, 16px); font-weight: 700; color: rgba(59, 35, 20, 0.85); line-height: 1.3; }
.howto-row b { display: block; margin-bottom: 1px; font-size: 1.08em; font-weight: 900; color: var(--ink); }
/* Got it stays in reach at the foot of the card while it scrolls. */
#howto .panel-actions { position: sticky; bottom: calc(-1 * clamp(18px, 5vmin, 28px)); margin-bottom: calc(-1 * clamp(18px, 5vmin, 28px)); padding: 12px 0 clamp(18px, 5vmin, 28px); background: linear-gradient(rgba(255, 244, 230, 0), var(--cream) 30%); }

/* ---------- settings sheet ---------- */
.sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; align-items: stretch; text-align: left; }
.sheet .panel-title { text-align: center; }
.set-group { display: flex; flex-direction: column; background: #fff; border: 2px solid rgba(107, 58, 31, 0.2); border-radius: calc(var(--radius) * 0.7); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 12px; }
.set-row + .set-row { border-top: 2px solid rgba(107, 58, 31, 0.1); }
.set-group > :first-child { border-top: 0; }
.set-label { display: flex; align-items: center; gap: 8px; font-size: clamp(15px, 4vmin, 17px); font-weight: 800; color: var(--ink); }
.toggle {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0; width: 52px; height: 32px; border-radius: 999px;
  background: rgba(107, 58, 31, 0.18); border: 2px solid var(--brown); cursor: pointer; transition: background 0.15s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 0 var(--brown); transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.toggle:checked { background: var(--leaf); }
.toggle:checked::after { transform: translateX(20px); }
.set-row .btn { flex: none; }
/* A setting that is one of a few choices: its label, and the choices under it as the
   scores' tabs, each as wide as its word, closer together, so Block Garden's five times
   of day fit a phone 375 wide on one line; on a narrower one they go on to a second.
   A game's boards, picked above the scores' tabs, are laid out the same way. */
.set-row.choices { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 10px; }
.set-row.choices .set-label { padding: 0 4px; }
.set-row.choices .tabs, .tabs.boards { flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 24px; }
.set-row.choices .tab { flex: 1 1 auto; padding: 0 2px; }
.name-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--brown);
  background: var(--cream); color: var(--ink); font: 800 max(16px, clamp(15px, 4vmin, 17px)) var(--font);
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.name-input:focus { outline: 3px solid rgba(255, 138, 101, 0.55); outline-offset: 1px; }
.set-row.name-note { min-height: 0; padding-top: 0; font-size: clamp(13px, 3.6vmin, 15px); font-weight: 800; color: #C2334D; border-top: 0; }
/* (no narrower than its longest word, which would run into the button beside it) */
.set-row .set-label { min-width: min-content; }
.set-value { display: block; font-size: 0.8em; font-weight: 700; color: rgba(59, 35, 20, 0.62); font-variant-numeric: tabular-nums; }
/* The title: its column in the middle of the room above its foot, where All games
   by Joldi is. */
.title-col { width: min(100%, 440px); margin-block: auto; }
/* Play is as wide as the menu under it, in every game. */
#title .btn.big { width: auto; min-width: min(100%, 372px); max-width: 100%; align-self: center; margin-inline: auto; }
.title-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.8vmin, 14px); width: 100%; padding-top: clamp(16px, 4vmin, 28px); }
/* Brought to you by New Mexico Tea Company: under All games by Joldi, and at Paused's foot */
.tea-ad {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 14px 6px; border-radius: 14px; background: rgba(255, 248, 238, 0.72);
  text-decoration: none; text-align: center;
  font-size: clamp(12px, 3.3vmin, 14px); font-weight: 800; line-height: 1.25; color: rgba(59, 35, 20, 0.68); touch-action: manipulation;
}
.tea-ad b { font-size: 1.14em; font-weight: 900; color: var(--brown); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* The title's menu under Play: High scores, How to play and Settings, as tiles of one
   size in one row, the icon over the word; the icons stay in line when one word wraps. */
.title-menu { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(8px, 2.4vmin, 12px); width: min(100%, 372px); }
.title-menu .btn {
  flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 0; padding: 11px 4px 9px; border-radius: calc(var(--radius) * 0.85);
  font-size: clamp(13px, 3.7vmin, 16px); line-height: 1.1; white-space: normal; text-align: center;
}
.title-menu .btn::before { left: 10%; right: 10%; top: 5%; height: 26%; }
.title-menu .btn svg { width: 1.75em; height: 1.75em; color: var(--coral); }
/* Install this app, under the menu until the game is on the home screen; on an iPhone
   its steps open under it. */
.title-install { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 372px); }
.title-install[hidden] { display: none; }
/* The way to joldi.in keeps joldi.in's own look, navy on cream as on its
   home page, so it reads as the site's rather than the game's. */
.btn.joldi {
  height: var(--round); padding: 0 1em 0 0.65em; gap: 0.3em; font-size: clamp(15px, 4vmin, 19px);
  background: #FFFCF2; border-color: #1B1446; color: #1B1446; text-shadow: none; box-shadow: 0 var(--lift) 0 #1B1446;
}
.btn.joldi::before { display: none; }
.btn.joldi:active { transform: translateY(var(--lift)); box-shadow: none; }
.btn.joldi:focus-visible { box-shadow: 0 var(--lift) 0 #1B1446, 0 0 0 4px rgba(255, 210, 31, 0.7); }
.btn.joldi svg { filter: none; width: 1.05em; height: 1.05em; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: #fff; border: 2px solid rgba(107, 58, 31, 0.2); border-radius: calc(var(--radius) * 0.7); overflow: hidden; }
.board-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; font-size: clamp(14px, 3.8vmin, 16px); font-weight: 800; color: var(--ink); }
.board-list li + li { border-top: 2px solid rgba(107, 58, 31, 0.1); }
.board-list .rank { flex: none; width: 2.2em; color: var(--coral); font-variant-numeric: tabular-nums; }
.board-list .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .pts { flex: none; font-variant-numeric: tabular-nums; }
.board-list li.you { background: #FFF1C9; }
/* A row's badge (Owner, Employee) sits just after the name, which gives way to it. */
.board-list li.badged .who { flex: 0 1 auto; }
.board-list .badge {
  flex: none; margin-right: auto; padding: 0.15em 0.55em; border: 2px solid var(--brown); border-radius: 999px;
  background: var(--cream); color: var(--brown); font-size: 0.72em; font-weight: 900; line-height: 1.1; white-space: nowrap;
}
/* A game's boards, a step smaller than the scores' tabs below them: each as wide as its
   name, and never narrower than a finger. */
.tabs.boards .tab { flex: 1 1 auto; min-width: 44px; padding: 0 4px; font-size: clamp(12px, 3.6vmin, 14px); }
.board-note { margin: 0; text-align: center; font-weight: 700; color: rgba(59, 35, 20, 0.62); }
.board-clear { display: flex; justify-content: center; }
.win-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--cream); color: var(--ink); font-size: clamp(18px, 5vmin, 22px); font-weight: 800; }
.win-summary strong { font-size: clamp(28px, 8vmin, 38px); font-variant-numeric: tabular-nums; }
/* A game's own numbers on the player's own tab (#gameScores). */
.game-scores { width: 100%; text-align: left; }
/* The shared sheet remains narrow on tablets too; each full period name keeps
   a finger-sized target without shrinking its text. */
.tabs.win-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
.tabs { display: flex; gap: 4px; width: 100%; padding: 4px; border-radius: 999px; background: rgba(107, 58, 31, 0.12); }
.tab {
  flex: 1 1 0; min-height: 44px; padding: 0 4px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px solid transparent; border-radius: 999px; font-size: clamp(12px, 3.9vmin, 15px); font-weight: 900; line-height: 1.1;
  white-space: nowrap;
  color: rgba(107, 58, 31, 0.8); cursor: pointer; touch-action: manipulation;
}
.tab[aria-selected="true"] { background: var(--cream); border-color: var(--brown); color: var(--brown); box-shadow: 0 2px 0 var(--brown); }
/* the link a whole tap tall, the panel's gap (at least 8px) taking some of its padding */
.panel-links { display: flex; justify-content: center; margin: -8px 0; font-weight: 700; font-size: 15px; text-align: center; color: rgba(59, 35, 20, 0.62); }
.panel-links a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
.score-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.score-card:active { transform: translateY(2px); }

/* ---------- toasts, hints ---------- */
.toasts {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(var(--sat) + var(--gap) * 2 + var(--hud-h));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
/* During a game, inside the top of the jar, clear of the basket above it. */
.in-game .toasts { top: var(--toast-y, calc(var(--sat) + var(--gap) * 2 + var(--hud-h))); }
.toast {
  background: var(--cream); border: 2px solid var(--brown); border-radius: 999px; padding: 0.5em 1.1em; box-shadow: 0 3px 0 var(--brown);
  font-size: clamp(14px, 3.8vmin, 17px); font-weight: 900; color: var(--brown); animation: toast-in 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.out { animation: toast-out 0.35s ease both; }
@keyframes toast-in { from { transform: translateY(-12px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}