:root {
  --ro-blue: #002b7f;
  --ro-yellow: #fcd116;
  --ro-red: #ce1126;
  --cream: #fff6e5;
  --ink: #2b1a10;
  --display-font: 'Baloo 2', 'Nunito', sans-serif;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1b2340;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* stop iOS from enlarging text when the phone is in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* the short-screen layout below asks the body's height, which stays right when the page is turned sideways */
body { container-type: size; }

button { touch-action: manipulation; }

canvas {
  display: block;
  position: fixed;
  inset: 0;
}
/* the scenery under the game's canvas, painted at a lower resolution (game.js renderBackdrop) */
#backdrop { pointer-events: none; }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* keep clear of notches, rounded corners and the home indicator */
  padding:
    max(12px, var(--safe-top))
    max(16px, var(--safe-right))
    12px
    max(16px, var(--safe-left));
  pointer-events: none;
}

.hud-box {
  background: rgba(255, 246, 229, 0.9);
  border-radius: 14px;
  padding: 6px 14px 4px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  min-width: 0;
  margin-right: 8px;
}

#levelName { font-weight: 800; font-size: 13px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#score { font-family: var(--display-font); font-weight: 800; font-size: 28px; line-height: 1.1; }

.hud-buttons { display: flex; gap: 8px; flex-shrink: 0; pointer-events: auto; }
.hud-buttons button {
  width: 44px; height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--cream);
  font-size: 20px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.hud-buttons button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
/* behind an open panel the HUD would only peek out around its corners */
body:has(> .overlay:not(.hidden)) #hud { visibility: hidden; }

/* Hints are a card on the left, under the score, so the middle of the scene stays clear (the snackbars are on the
   right). Each new one slides in from the left edge (.pop, game.js) and slides back out once read (.faded). */
#hint {
  position: fixed;
  top: calc(max(12px, var(--safe-top)) + 74px);
  left: max(16px, var(--safe-left));
  width: max-content;
  max-width: min(340px, 42%);
  background: rgba(43, 26, 16, 0.78);
  color: #fff;
  padding: 7px 13px 8px;
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s ease-in;
}
#hint:empty { display: none; }
body:where(:has(#rival:not(.hidden))) #hint { top: calc(max(12px, var(--safe-top)) + 114px); }
#hint.pop { animation: hint-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
#hint.faded { opacity: 0; transform: translateX(-24px); }
/* while you aim it steps back, still there to glance at */
#hint.dim:not(.faded) { opacity: 0.4; }
#hint b { color: var(--ro-yellow); }
@keyframes hint-in { from { opacity: 0; transform: translateX(calc(-100% - 24px)); } }
@media (prefers-reduced-motion: reduce) { #hint.pop { animation: none; } #hint.faded { transform: none; } }

/* Phones held upright, or kept upright by the rotation lock: game.js adds .rotated and the whole page
   is turned a quarter turn, so the game is always landscape (the web can't lock the screen on iPhone). */
html.rotated body {
  position: fixed;
  top: 0; left: 0;
  width: var(--rot-w); height: var(--rot-h);
  transform-origin: 0 0;
  transform: translateX(var(--rot-h)) rotate(90deg);
  /* turned sideways, the notch ends up on the left and the home indicator on the right */
  --safe-top: env(safe-area-inset-right);
  --safe-right: env(safe-area-inset-bottom);
  --safe-bottom: env(safe-area-inset-left);
  --safe-left: env(safe-area-inset-top);
}

/* iPhone browsers: the page scrolls so a swipe up makes the browser hide its toolbars (see game.js).
   The body stays exactly one screen tall, because it sizes the compact phone layout (@container below);
   an invisible strip makes the scroll room. The turned page (html.rotated) keeps its own size and doesn't scroll. */
html.ios-scroll:not(.rotated) { height: auto; overflow-y: auto; }
html.ios-scroll:not(.rotated) body { height: 100vh; height: 100dvh; overflow: visible; }
html.ios-scroll:not(.rotated) body::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 200vh;
  pointer-events: none;
}
html.ios-swipe, html.ios-swipe body { touch-action: pan-y; }
#swipeFull {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* nearly opaque and blurred, so the panel underneath doesn't show through the words */
  background: rgba(0, 43, 127, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
  padding: 16px;
  touch-action: pan-y;
}
#swipeFull.show { display: flex; }
#swipeFull .hand {
  width: 34px; height: 54px;
  border: 4px solid #fff;
  border-radius: 17px;
  position: relative;
  animation: swipeUp 1.4s ease-in-out infinite;
}
#swipeFull .hand::after {
  content: '';
  position: absolute;
  left: 50%; top: 9px;
  width: 6px; height: 12px;
  margin-left: -3px;
  border-radius: 3px;
  background: #fff;
}
@keyframes swipeUp {
  0% { transform: translateY(24px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-24px); opacity: 0; }
}
#swipeFull p { margin: 0; }
#swipeFull .big { font-family: var(--display-font); font-weight: 800; font-size: 24px; }
#swipeFull .small { font-weight: 700; font-size: 13px; opacity: 0.8; max-width: 360px; }
#swipeFull button {
  margin-top: 6px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 6px 18px;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 30, 0.55);
  padding:
    max(16px, var(--safe-top))
    max(16px, var(--safe-right))
    max(16px, var(--safe-bottom))
    max(16px, var(--safe-left));
}
.hidden { display: none !important; }

.panel {
  position: relative;
  overflow: auto;
  max-height: 100%;
  width: 100%;
  max-width: 560px;
  background: var(--cream);
  border-radius: 22px;
  padding: 34px 28px 24px;
  text-align: center;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25);
}
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(90deg,
    var(--ro-blue) 0 33.33%, var(--ro-yellow) 33.33% 66.66%, var(--ro-red) 66.66%);
}
/* every panel slides in a little when its screen opens, instead of just appearing */
.overlay > .panel { animation: panel-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.08) backwards; }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  .overlay > .panel, #endStars i, .end-panel .grade-num { animation: none; }
}
/* full-screen menus cover the game, so neither the scene nor its sky colour (set on the page by game.js)
   shows through the phone's see-through keyboard */
body:has(> .overlay:is(.lobby, .onboarding):not(.hidden)) > canvas { visibility: hidden; }
html:has(> body > .overlay:is(.lobby, .onboarding):not(.hidden)),
body:has(> .overlay:is(.lobby, .onboarding):not(.hidden)) { background: #001a4f !important; }

h1, h2 {
  font-family: var(--display-font); font-weight: 800;
  color: var(--ro-red);
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 #7a0a15;
}
h1 { font-size: clamp(38px, 8vw, 60px); line-height: 1; }
h2 { font-size: clamp(30px, 6vw, 44px); }

.subtitle { margin: 6px 0 0; font-weight: 800; color: var(--ro-blue); }
.howto { margin: 0; font-size: 14px; line-height: 1.45; }
kbd {
  font-family: inherit;
  background: #fff;
  border: 1px solid #d8c7a6;
  border-radius: 4px;
  padding: 0 4px;
}

#levels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 #d8c7a6;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.1s;
}
.level:hover:not(:disabled) { transform: translateY(-2px); }
.level:disabled { opacity: 0.5; cursor: not-allowed; }
.level .num { font-family: var(--display-font); font-weight: 800; font-size: 28px; color: var(--ro-red); line-height: 1; }
.level .lname { font-weight: 800; font-size: 14px; }
.level .lstars { color: #e8a90c; font-size: 18px; letter-spacing: 2px; }

#endStars { font-size: 52px; color: #e8a90c; letter-spacing: 6px; line-height: 1.2; margin-top: 6px; }
#endStars .off { color: #d8c7a6; }
/* a won level's stars pop in one by one (delays set in game.js), then the teacher stamps the grade */
#endStars i { display: inline-block; font-style: normal; animation: star-pop 0.42s cubic-bezier(0.3, 1.6, 0.6, 1) backwards; }
#endStars i.off { animation-name: fade-in; }
@keyframes star-pop { 0% { opacity: 0; transform: scale(0.2) rotate(-50deg); } 60% { opacity: 1; transform: scale(1.35) rotate(10deg); } }
@keyframes fade-in { from { opacity: 0; } }
.end-panel .grade-num { animation: reset-stamp 0.45s 0.95s cubic-bezier(0.3, 1.6, 0.6, 1) backwards; }
/* long sayings as titles get a smaller size, so the panel keeps its height */
#endTitle.long { font-size: clamp(24px, 4.4vw, 34px); }
/* the school grade: a number in red pen, what it means, and one line about the level */
.grade { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px auto 12px; text-align: left; }
.grade-num {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid var(--ro-red); background: #fff; color: var(--ro-red);
  font-family: var(--display-font); font-weight: 800; font-size: 30px; line-height: 1;
  transform: rotate(-8deg);
}
.grade-text { min-width: 0; }
.grade-text b { display: block; font-size: 16px; line-height: 1.2; }
#endText { font-weight: 600; font-size: 14px; line-height: 1.3; margin: 2px 0 0; opacity: 0.8; }
#endText:empty { display: none; }
#endScore { font-family: var(--display-font); font-weight: 800; font-size: 30px; margin-bottom: 16px; }

.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: var(--display-font); font-weight: 800;
  font-size: 18px;
  padding: 12px 18px;
  border: none;
  border-radius: 14px;
  background: var(--ro-red);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a0a15;
}
.btn.secondary { background: var(--ro-blue); box-shadow: 0 4px 0 #001a4d; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }

/* ---------- Menus, settings, achievements ---------- */
.panel.narrow { max-width: 420px; }
.panel.wide { max-width: 760px; }
.panel p { line-height: 1.45; }
h3 {
  font-family: var(--display-font);
  font-weight: 800;
  color: var(--ro-blue);
  font-size: 20px;
  margin: 14px 0 4px;
}
.muted { opacity: 0.65; font-weight: 700; margin: 0; }
.small-text { font-size: 13px; margin: 4px 0; }

.btn.small { font-size: 15px; padding: 9px 14px; }
.btn.ghost {
  background: transparent;
  color: var(--ro-red);
  box-shadow: none;
  border: 2px solid currentColor;
}
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.total-stars { font-family: var(--display-font); font-weight: 800; font-size: 20px; color: #c98a00; }
.level .lbest { font-size: 11px; font-weight: 700; opacity: 0.6; }

.settings-list { text-align: left; margin: 14px 0 18px; }
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid #ecdcc0;
  font-weight: 800;
}
.switch {
  position: relative;
  width: 54px; height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #d8c7a6;
  cursor: pointer;
  transition: background 0.15s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch[aria-checked="true"] { background: #2e9d4a; }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
.segmented { display: flex; background: #ecdcc0; border-radius: 12px; padding: 3px; }
.segmented button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

/* difficulty: label and four choices on one line when they fit, the note under them */
.setting-diff { flex-wrap: wrap; }
.setting-diff .segmented button { padding: 6px 9px; }
/* the music: which tune (a button each), then on/off */
.music-ctl { display: flex; align-items: center; gap: 8px; }
.track-pick button { padding: 5px 8px; white-space: nowrap; }
.track-pick button i { font-style: normal; }
.diff-note { flex: 0 0 100%; margin: 0; font-size: 13px; font-weight: 700; opacity: 0.7; line-height: 1.35; }

/* make this level easier */
.ease-text { margin: 8px 0 10px; font-weight: 700; }
.ease-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ease-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #ecdcc0;
  border-radius: 12px;
  background: #fffaf0;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ease-opt[aria-pressed="true"] { border-color: var(--ro-blue); background: #fff; box-shadow: 0 2px 6px rgba(0, 43, 127, 0.18); }
.ease-opt:disabled { cursor: default; opacity: 0.6; }
.ease-name { font-family: var(--display-font); font-weight: 800; font-size: 17px; }
.ease-cost { font-weight: 800; color: var(--ro-red); align-self: center; white-space: nowrap; }
.ease-cost.free { color: #2e9d4a; }
.ease-opt:disabled .ease-cost { color: inherit; }
.ease-cost.short { opacity: 0.55; }
.ease-need { margin: 8px 0 0; font-weight: 800; color: var(--ro-red); font-size: 14px; }
.segmented button:disabled { opacity: 0.4; cursor: default; }
.ease-desc { grid-column: 1 / -1; font-size: 13px; font-weight: 600; opacity: 0.75; }
#ease .row { margin-top: 12px; }
.btn:disabled { opacity: 0.5; cursor: default; }

.ach-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 12px 0 6px;
  text-align: left;
}
.ach {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 #e6d6b8;
}
.ach .icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ro-yellow);
  font-size: 18px;
}
.ach.locked { opacity: 0.55; }
.ach.locked .icon { background: #e6d6b8; filter: grayscale(1); }
.ach b { display: block; font-size: 14px; }
.ach .desc { font-size: 12px; line-height: 1.3; }
.stats-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
  margin: 6px 0 16px;
  text-align: left;
  font-size: 13px;
}
.stats-list div { display: flex; justify-content: space-between; border-bottom: 1px dashed #e0cfae; padding: 3px 0; }
.stats-list b { font-family: var(--display-font); font-size: 15px; }

.badge {
  display: inline-block;
  background: var(--ro-yellow);
  color: var(--ink);
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
  margin: -6px 0 12px;
  animation: pop 0.4s ease-out;
}
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* today's holiday, above the stop's name */

/* Snackbars at the right edge, right under the HUD buttons (44px tall, 10px gap): one at a time (game.js),
   the ones waiting peek out underneath as card edges, with a "+2" badge */
#toasts {
  position: fixed;
  top: calc(max(12px, var(--safe-top)) + 54px);
  right: max(12px, var(--safe-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: max-content;
  max-width: min(340px, 46%);
  z-index: 20;
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  padding: 7px 14px 7px 7px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  transition: opacity 0.3s, transform 0.3s ease-in;
  line-height: 1.2;
  pointer-events: auto;
  cursor: pointer;
}
.toast b { display: block; }
.toast.stacked { box-shadow: 0 5px 0 -1px #4d3828, 0 10px 0 -3px #745a46, 0 6px 14px rgba(0, 0, 0, 0.3); margin-bottom: 10px; }
/* how long it stays: a thin line running down (its clock stops while it's held) */
.toast .bar { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.4); transform-origin: left; transform: scaleX(var(--left, 1)); transition: transform 0.1s linear; }
/* while you aim or a shot flies: out of the way, half see-through, waiting */
.toast.held { opacity: 0.5; }
/* while a story card is open (the brief, a new shot, the album): out of sight until it closes */
.toast.away { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.toast.out { opacity: 0; transform: translateX(calc(100% + 24px)); }
.toast .icon { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ro-yellow); font-size: 18px; }
.toast small { display: block; opacity: 0.75; font-size: 11px; }
/* a whole sentence (the train announcement on the map) wraps onto two lines */
.toast.wide { line-height: 1.3; }
@keyframes toast-in { from { transform: translateX(calc(100% + 24px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @keyframes toast-in { from { opacity: 0; } }
  .toast.out { transform: none; }
}

/* your avatar commenting on your play, under the score */
.coach {
  position: fixed; right: max(16px, var(--safe-right)); bottom: max(14px, var(--safe-bottom));
  display: flex; align-items: flex-end; gap: 6px; max-width: min(360px, 62%); pointer-events: none;
  animation: coach-in 0.25s ease-out;
}
body:has(> .overlay:not(.hidden)) .coach { display: none; }
.coach.out { transition: opacity 0.4s; opacity: 0; }
.coach .av { display: inline-flex; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--ro-red), 0 3px 0 3px rgba(0, 0, 0, 0.2); }
.coach .av svg { width: 40px; height: 40px; display: block; }
.coach .say { background: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; padding: 6px 11px 7px; font-weight: 800; font-size: 14px; line-height: 1.25; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.coach .say b { display: block; color: var(--ro-yellow); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1px; }
@keyframes coach-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Profile, challenges, sharing ---------- */
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rival {
  display: flex; align-items: center; gap: 6px;
  background: rgba(43, 26, 16, 0.8); color: #fff;
  border-radius: 999px; padding: 3px 12px 3px 3px;
  font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.rival .av, .lrival .av, .end-rival .av, .profile-chip .av { display: inline-flex; flex-shrink: 0; }
.rival .av svg { width: 28px; height: 28px; }
.rival.beaten { background: #2e9d4a; }

.panel { --chip-top: 18px; }
.profile-chip {
  position: absolute; top: var(--chip-top); left: 14px;
  display: flex; align-items: center; gap: 8px;
  border: none; background: #fff; border-radius: 999px;
  padding: 3px 12px 3px 3px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 14px; color: var(--ink);
  box-shadow: 0 3px 0 #d8c7a6; max-width: 46%;
}
.profile-chip .av svg { width: 34px; height: 34px; }
.profile-chip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; text-align: left; }
.profile-chip .rk { font-size: 10px; font-weight: 800; color: var(--ro-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip .rk:empty { display: none; }
.avatar-pick { position: relative; }
.avatar-pick.locked svg { filter: grayscale(1) brightness(0.9); opacity: 0.45; }
.avatar-pick.locked span { color: #a08a64; }
.avatar-pick .lock { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 14px; }
.toast .icon svg { width: 100%; height: 100%; border-radius: 50%; }
/* the game's own drawing of a shot standing in for an emoji (iconHTML in game.js) */
.shot-ic { display: block; width: 1.5em; height: 1.5em; margin: auto; }

.name-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-weight: 800; text-align: left; }
.name-row input {
  flex: 1; min-width: 0;
  font: 800 18px 'Nunito', sans-serif; color: var(--ink);
  padding: 10px 14px; border-radius: 12px;
  border: 2px solid #d8c7a6; background: #fff; outline: none;
}
.name-row input:focus { border-color: var(--ro-blue); }
.shake { animation: shake 0.4s; border-color: var(--ro-red) !important; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px; margin: 6px 0 16px;
}
.avatar-pick {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 3px solid transparent; border-radius: 16px; background: #fff;
  padding: 6px 4px; cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 0 #e6d6b8;
}
.avatar-pick svg { width: 64px; height: 64px; }
.avatar-pick span { font-size: 11px; font-weight: 800; line-height: 1.15; color: var(--ink); }
.avatar-pick[aria-pressed="true"] { border-color: var(--ro-red); background: #fff1f1; }

/* onboarding: the music choices */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin: 6px 0 16px;
}
.music-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 3px solid transparent; border-radius: 16px; background: #fff;
  padding: 10px 8px; cursor: pointer; font-family: inherit; color: var(--ink);
  box-shadow: 0 2px 0 #e6d6b8;
}
.music-pick i { font-style: normal; font-size: 34px; line-height: 1.2; }
.music-pick b { font-size: 15px; font-weight: 800; }
.music-pick span { font-size: 12px; font-weight: 600; opacity: 0.75; line-height: 1.2; }
.music-pick[aria-pressed="true"] { border-color: var(--ro-red); background: #fff1f1; }

.challenge-panel .big-avatar { display: flex; justify-content: center; margin-bottom: 6px; }
.challenge-panel .big-avatar svg { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px #d8c7a6; }
.ch-text { font-family: var(--display-font); font-weight: 800; font-size: 24px; color: var(--ro-blue); margin: 6px 0 0; }
.ch-stars { font-size: 34px; color: #e8a90c; letter-spacing: 4px; }
.ch-stars .off { color: #d8c7a6; }
.ch-question { font-weight: 800; font-size: 18px; margin: 4px 0 14px; }

.lrival {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  background: #fff1f1; border-radius: 999px; padding: 2px 8px 2px 2px;
  font-size: 11px; font-weight: 800; color: var(--ro-red); max-width: 100%;
}
.lrival .av svg { width: 20px; height: 20px; }
.lrival .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.end-rival {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: -4px auto 14px; padding: 6px 14px 6px 6px; width: fit-content; max-width: 100%;
  background: #fff; border-radius: 999px; font-weight: 800; font-size: 15px;
  box-shadow: 0 2px 0 #e6d6b8;
}
.end-rival .av svg { width: 36px; height: 36px; }
.end-rival.won { background: #e3f6e7; color: #1d6b31; }
.share-btn { margin-top: 12px; width: 100%; background: #2e9d4a; box-shadow: 0 4px 0 #1d6b31; }

.share-panel { max-width: 720px; }
.share-body { display: flex; gap: 18px; align-items: center; margin: 12px 0; }
.share-body img { width: 42%; aspect-ratio: 1080 / 1350; border-radius: 14px; background: #002b7f; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); object-fit: cover; }
.share-actions { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.btn.fb { background: #1877f2; box-shadow: 0 4px 0 #0f4fa8; }
.btn.wa { background: #25a244; box-shadow: 0 4px 0 #1a7331; }
.share-tip { font-size: 12px; margin: 2px 0 0; opacity: 0.75; line-height: 1.35; }

/* ---------- Lobby: the journey map ---------- */
.overlay.lobby, .overlay.onboarding {
  background:
    linear-gradient(0deg, #f3e7cf 0 10px, transparent 10px),
    radial-gradient(120% 100% at 50% 0%, #1458cf 0%, #002b7f 55%, #001a4f 100%);
}
.overlay.lobby {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: max(18px, var(--safe-bottom));
}
.lobby-top { display: flex; align-items: center; gap: 12px; }
.lobby .profile-chip { position: static; max-width: 34%; }
.lobby-brand {
  flex: 1; text-align: center;
  font-family: var(--display-font); font-weight: 800; font-size: 30px; line-height: 1;
  color: #fff; text-shadow: 0 3px 0 var(--ro-red);
}
.lobby-actions { display: flex; align-items: center; gap: 8px; }
.lobby .total-stars { background: rgba(0, 0, 0, 0.25); color: var(--ro-yellow); border-radius: 999px; padding: 6px 12px; font-size: 18px; }
.lobby .total-points { color: #fff; white-space: nowrap; }
.icon-btn {
  width: 42px; height: 42px; border: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: var(--ro-blue);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.lobby-main { flex: 1; min-height: 0; display: flex; gap: 14px; align-items: stretch; }
.map-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
/* only the map itself: the avatar drawn on it is an <svg> too, and would grow to the map's size */
.map-wrap > svg { flex: 1; min-height: 0; width: 100%; height: 100%; overflow: visible; }
/* the two chapters: the map, and the family album */
.chapter-tabs { align-self: center; flex-shrink: 0; }
.chapter-tabs button { padding: 5px 12px; font-size: 13px; }
.album-page {
  flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px;
  background: #5b3a2a linear-gradient(135deg, #6b4532, #4a2e20); border-radius: 14px; padding: 10px 12px 12px;
  box-shadow: inset 0 0 0 3px #3a2216, 0 6px 0 rgba(0, 0, 0, 0.25);
}
.album-head { color: #f6e7c8; font-family: var(--display-font); font-weight: 800; font-size: 17px; text-align: center; }
.album-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.album-grid .photo {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 0;
  background: #fffaf0; border: none; border-radius: 3px; padding: 5px 5px 4px; cursor: pointer; font: inherit; color: var(--ink);
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); transition: transform 0.15s;
}
.album-grid .photo:hover:not(:disabled), .album-grid .photo.selected { transform: rotate(0deg) scale(1.06); z-index: 1; }
.album-grid .photo.selected { outline: 3px solid var(--ro-yellow); }
.album-grid .photo.current::after { content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ro-red); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.album-grid .photo:disabled { cursor: default; opacity: 0.7; }
.album-grid .pic { position: relative; flex: 1; min-height: 24px; background: #d8cbb0; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #9a8a6a; overflow: hidden; }
.album-grid .pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.35) saturate(0.9); }
.album-grid .photo.done .pic canvas { filter: none; }
.album-grid .pic .closed { position: absolute; font-size: 22px; }
.album-grid .year { position: absolute; top: 7px; left: 8px; background: #fffaf0e6; border-radius: 3px; padding: 0 4px; font-weight: 900; font-size: 11px; color: #ce1126; }
.album-grid .cap { font-weight: 800; font-size: 11px; line-height: 1.15; min-height: 1.15em; text-align: center; }
.album-grid .stars { font-size: 11px; color: #e8a90c; text-align: center; letter-spacing: 1px; }
.album-grid .stars .off { color: #d8c7a6; }
/* chapter 3, coming soon: a suitcase with its stickers, the plan, and a stamp across the corner */
.coming-page {
  position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  background: #1d3f6e linear-gradient(135deg, #24508a, #142d52); border-radius: 14px; padding: 10px 14px 14px;
  box-shadow: inset 0 0 0 3px #0e2240, 0 6px 0 rgba(0, 0, 0, 0.25); color: #f6efd9;
}
.coming-head { font-family: var(--display-font); font-weight: 800; font-size: 17px; text-align: center; color: #f6e7c8; }
.coming-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 18px; }
.suitcase {
  position: relative; flex-shrink: 0; width: 36%; max-width: 320px; aspect-ratio: 1.25;
  background: linear-gradient(160deg, #b8642e, #8a4220); border-radius: 14px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 4px #6a3216, 0 8px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg);
}
.suitcase::before, .suitcase::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; background: #6a3216; opacity: 0.6; }
.suitcase::before { left: 22%; }
.suitcase::after { right: 22%; }
.suitcase .handle { position: absolute; left: 35%; right: 35%; top: -14%; height: 16%; border: 5px solid #4a2410; border-bottom: none; border-radius: 10px 10px 0 0; }
.suitcase .st {
  position: absolute; z-index: 1; padding: 0.25em 0.6em; border-radius: 6px; font: 900 clamp(10px, 1.1vw, 15px)/1 'Nunito', sans-serif; letter-spacing: 0.04em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.suitcase .it { left: 6%; top: 12%; background: #fff; color: #2e9d4a; transform: rotate(-12deg); border: 2px solid #ce1126; }
.suitcase .es { right: 6%; top: 18%; background: #fcd116; color: #c8202a; transform: rotate(9deg); }
.suitcase .uk { left: 12%; bottom: 14%; background: #002b7f; color: #fff; transform: rotate(6deg); border: 2px solid #c8202a; }
.suitcase .ro { right: 10%; bottom: 22%; background: linear-gradient(90deg, #002b7f 33%, #fcd116 33% 66%, #ce1126 66%); color: #fff; text-shadow: 0 1px 2px #000; transform: rotate(-7deg); }
.suitcase .at { left: 36%; top: 44%; background: #f6efd9; color: #ce1126; transform: rotate(-3deg); }
.coming-text { flex: 1; min-width: 0; }
.coming-text p { margin: 0 0 0.7em; font-size: clamp(13px, 1.2vw + 4px, 19px); line-height: 1.4; }
.coming-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25em; font-weight: 800; font-size: clamp(12.5px, 1.1vw + 4px, 18px); }
.coming-stamp {
  position: absolute; right: -8px; top: 8px; padding: 4px 14px; border: 3px solid #ff5a5a; border-radius: 8px;
  color: #ff5a5a; font: 900 20px/1 var(--display-font); letter-spacing: 0.08em; transform: rotate(-10deg);
  background: rgba(20, 30, 60, 0.35); pointer-events: none;
}
/* a phone on its side: the stop card beside it already says which chapter, so no heading; the stamp goes on the suitcase */
@media (max-height: 440px) {
  .coming-page { padding: 10px 12px; }
  .coming-head { display: none; }
  .coming-body { gap: 12px; }
  .suitcase { width: 30%; }
  .coming-text p { font-size: 12.5px; line-height: 1.3; margin-bottom: 5px; }
  .coming-text ul { font-size: 12px; gap: 1px; }
  .coming-stamp { font-size: 14px; top: auto; right: auto; left: 8px; bottom: 12px; transform: rotate(-8deg); }
}
.victory-next { font-weight: 800; color: var(--ro-blue); }
.map-sea { fill: #ffffff; opacity: 0.8; font: italic 800 20px 'Nunito', sans-serif; text-anchor: middle; }
.stop { cursor: pointer; outline: none; }
.stop .hit { fill: transparent; }
.stop .dot { fill: #fffaf0; stroke: #7a5a32; stroke-width: 3; transition: stroke-width 0.15s; }
.stop .num { font: 800 17px 'Nunito', sans-serif; text-anchor: middle; fill: #2b1a10; pointer-events: none; }
.stop .label {
  pointer-events: none;
  font: 800 21px 'Nunito', sans-serif; fill: #2b1a10;
  paint-order: stroke; stroke: #f6efd9; stroke-width: 5px; stroke-linejoin: round;
}
.stop .mini-stars { font: 14px sans-serif; fill: #e8a90c; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.stop.done .dot { fill: #2e9d4a; stroke: #1d6b31; }
.stop.done .num, .stop.current .num { fill: #fff; }
.stop.current .dot { fill: var(--ro-red); stroke: #7a0a15; }
.stop.locked .dot { fill: #ddd2bd; stroke: #ab9b7c; }
.stop.locked .label { fill: #8a7a5c; }
.stop.locked .num { font-size: 13px; }
.stop.selected .dot { stroke: var(--ro-yellow); stroke-width: 6; }
.stop .pulse { fill: none; stroke: var(--ro-red); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
.stop .rival-dot { fill: var(--ro-yellow); stroke: #7a0a15; stroke-width: 2; }
#meMarker { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35)); pointer-events: none; }

.stop-card {
  width: 250px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--cream); border-radius: 20px; padding: 18px 16px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); text-align: center; overflow: auto;
}
.stop-num { font-weight: 800; font-size: 13px; color: var(--ro-blue); text-transform: uppercase; letter-spacing: 0.06em; }
.stop-card h3 { margin: 0; font-size: 24px; color: var(--ro-red); line-height: 1.1; }
.stop-stars { font-size: 28px; color: #e8a90c; letter-spacing: 3px; }
.stop-stars .off { color: #d8c7a6; }
.stop-best { font-weight: 800; font-size: 14px; min-height: 1em; opacity: 0.75; }
.stop-card .end-rival { margin: 2px auto; font-size: 12px; }
.stop-card .end-rival .av svg { width: 28px; height: 28px; }
.stop-locked { font-size: 13px; margin: 0; opacity: 0.75; }
.stop-card .btn { margin-top: 4px; }
/* a narrow upright window (a desktop window made thin; phones get the turned page): the top bar in two rows,
   the map, and the stop's card under it */
@container (orientation: portrait) and (max-width: 640px) {
  .lobby-top { flex-wrap: wrap; row-gap: 8px; }
  .lobby-actions { flex-basis: 100%; flex-wrap: wrap; justify-content: center; }
  .lobby-main { flex-direction: column; gap: 10px; }
  .stop-card { width: auto; padding: 12px 14px; }
  .chapter-tabs button { padding: 4px 9px; font-size: 12px; }
}

/* ---------- First launch ---------- */
.onboarding .panel { text-align: center; }
.steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.steps i { width: 26px; height: 6px; border-radius: 3px; background: #e2d3b4; }
.steps i.on { background: var(--ro-red); }
.steps i.done { background: #2e9d4a; }
/* the language switch, in the welcome panel's top-right corner: visitors from abroad shouldn't have to find Settings */
.welcome-lang { position: absolute; top: 18px; right: 14px; z-index: 1; }
.welcome-lang button { padding: 4px 10px; font-size: 13px; }
.welcome-icon { width: 96px; height: 96px; border-radius: 24px; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
.welcome-story { font-size: 16px; font-weight: 700; margin: 10px 0; }
.onboarding .howto { opacity: 0.75; margin-bottom: 16px; }

/* after a data reset: grandma's official cleaning report, with a stamp that lands on it */
/* Grătarul: the setup screen */
.setup-panel { text-align: center; }
.setup-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#setupPreview { position: static; display: block; width: 340px; max-width: 100%; height: 170px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.setup-who { font-weight: 800; color: var(--ro-blue); margin: 4px 0; }
.setup-tabs { justify-content: center; flex-wrap: wrap; margin: 6px auto 8px; width: fit-content; max-width: 100%; }
.setup-tabs button { padding: 5px 10px; font-size: 13px; }
.setup-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; text-align: left; }
.gear {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name state' 'desc desc'; gap: 2px 8px; align-items: center;
  background: #fffaf0; border: 2px solid #e2d3b4; border-radius: 12px; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.gear .gear-name { grid-area: name; font-size: 14px; }
.gear .gear-desc { grid-area: desc; font-size: 12px; opacity: 0.75; }
.gear .gear-state { grid-area: state; font-size: 12px; font-weight: 800; color: #2e9d4a; white-space: nowrap; }
.gear.worn { border-color: #2e9d4a; background: #eef8e8; cursor: default; }
.gear.paid .gear-state { color: #b5651d; }
.gear.locked { opacity: 0.6; cursor: default; }
.gear.locked .gear-state { color: #8a7a5c; white-space: normal; text-align: right; }
.gear.title .gear-state { white-space: normal; text-align: right; color: #8a7a5c; }
.gear.title.worn .gear-state { color: #2e9d4a; }
.title-form { grid-column: 1 / -1; justify-self: center; }
.title-form button { padding: 4px 10px; font-size: 13px; }
.plate-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.plate-edit input { font: 900 18px 'Nunito', sans-serif; text-transform: uppercase; width: 150px; text-align: center; border: 2px solid #1d1d1d; border-radius: 6px; padding: 4px 6px; border-left: 14px solid #0a43b0; }
.plate-edit .btn.small { padding: 6px 12px; font-size: 14px; }
.plate-hint { flex-basis: 100%; font-size: 12px; opacity: 0.7; text-align: center; }
.ch-who { margin: -4px 0 4px; font-weight: 800; color: #b5651d; }
.ch-grill { font-size: 13px; opacity: 0.8; margin: 0 0 4px; }
.ch-who:empty, .ch-grill:empty { display: none; }

.chapter-panel { text-align: center; }
.album-cover {
  position: relative; width: 150px; height: 112px; margin: 0 auto 10px; border-radius: 6px 10px 10px 6px;
  background: linear-gradient(135deg, #8a2a2a, #5e1616); box-shadow: inset 8px 0 0 #4a1010, 0 6px 12px rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.album-cover .ac-title { color: #e8c27a; font-family: var(--display-font); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
.album-cover .ac-photo { width: 52px; height: 38px; background: #fffaf0; border: 3px solid #fffaf0; box-shadow: inset 0 -14px 0 #6cbf4a, inset 0 0 0 40px #9fd3f5; transform: rotate(5deg); }
.chapter-num { font-weight: 800; font-size: 13px; color: var(--ro-blue); text-transform: uppercase; letter-spacing: 0.08em; }
.chapter-panel h2 { margin: 2px 0 8px; color: var(--ro-red); }
.chapter-text { font-size: 15px; }
.chapter-sign { font-style: italic; opacity: 0.8; }
.reset-doc {
  position: relative;
  margin: 0 0 12px; padding: 12px 14px 34px;
  background: #fff; border: 2px dashed #c9b48c; border-radius: 6px;
  transform: rotate(-1deg); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}
.reset-head { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--ro-blue); text-transform: uppercase; }
.reset-doc h2 { font-size: clamp(26px, 5vw, 36px); line-height: 1.1; margin: 4px 0 6px; }
.reset-body { margin: 0; font-size: 14px; line-height: 1.45; text-align: left; }
.reset-stamp {
  position: absolute; right: 8px; bottom: 6px;
  padding: 2px 12px; border: 4px double var(--ro-red); border-radius: 8px;
  font-family: var(--display-font); font-weight: 800; font-size: 26px; letter-spacing: 3px;
  color: var(--ro-red); opacity: 0.75; transform: rotate(-8deg);
  animation: reset-stamp 0.45s 0.7s cubic-bezier(0.3, 1.6, 0.6, 1) backwards;
  pointer-events: none;
}
@keyframes reset-stamp { from { opacity: 0; transform: rotate(-30deg) scale(3); } }
.reset-but { margin: 0 0 6px; font-weight: 800; color: var(--ro-blue); }
.reset-new { list-style: none; margin: 0 auto 8px; padding: 0; max-width: 420px; text-align: left; font-size: 14px; line-height: 1.35; }
.reset-new li { margin: 4px 0; }
.reset-sign { margin: 0 0 12px; font-size: 13px; font-style: italic; opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .reset-stamp { animation: none; } }
@container (max-height: 500px) {
  /* phone held sideways: the report on the left, the news and the button on the right */
  .reset-panel.panel { max-width: 800px; display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 18px; align-items: start; }
  .reset-doc { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding: 8px 12px 28px; }
  .reset-panel > :not(.reset-doc) { grid-column: 2; }
  .reset-head { font-size: 9.5px; }
  .reset-doc h2 { font-size: 22px; margin: 2px 0 4px; }
  .reset-panel .reset-body { font-size: 12px; line-height: 1.35; margin: 0; }
  .reset-stamp { font-size: 17px; border-width: 3px; right: 6px; bottom: 4px; }
  .reset-panel .reset-but { font-size: 13px; margin: 0 0 2px; }
  .reset-new { font-size: 12px; line-height: 1.3; margin-bottom: 8px; }
  .reset-new li { margin: 2px 0; }
  .reset-sign { display: none; }
  .reset-panel .btn.big { font-size: 16px; padding: 10px 14px; }
}
.big-input {
  display: block; width: 100%; margin: 14px 0 16px;
  font: 800 24px 'Nunito', sans-serif; text-align: center; color: var(--ink);
  padding: 12px 16px; border-radius: 14px; border: 3px solid #d8c7a6; background: #fff; outline: none;
}
.big-input:focus { border-color: var(--ro-blue); }
.btn.big { width: 100%; font-size: 20px; padding: 14px 22px; }

/* ---------- Tall panels: pinned buttons + "more below" cue (scroll-hints.js) ---------- */
.panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* overlays cover only what the browser actually shows, so its toolbars can't hide the pinned buttons
   (--vv-* come from visualViewport; the turned page in html.rotated sizes itself) */
html:not(.rotated) .overlay { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }
/* an always-visible scrollbar beside panels that scroll (iPhones hide the native one) */
.scroll-track {
  position: absolute;
  width: 6px;
  border-radius: 3px;
  background: rgba(255, 246, 229, 0.35);
  pointer-events: none;
  z-index: 3;
}
.scroll-track i {
  position: absolute;
  left: 0; right: 0;
  border-radius: 3px;
  background: var(--ro-yellow);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.panel.has-foot { padding-bottom: 0; }
.panel-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 12px -28px 0;
  padding: 12px 28px 24px;
  background: var(--cream);
  transition: box-shadow 0.2s;
}
.panel-foot.bare { margin-top: 0; padding-top: 0; }
.panel.more-below .panel-foot:not(.bare) { box-shadow: 0 -1px 0 #e6d6b8, 0 -8px 14px -10px rgba(43, 26, 16, 0.35); }
/* fade the content into the footer so a half-hidden row reads as "keeps going" */
.panel-foot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 40px;
  background: linear-gradient(rgba(255, 246, 229, 0), var(--cream) 85%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.panel.more-below .panel-foot::before { opacity: 1; }
.scroll-cue {
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  width: 36px; height: 36px;
  margin-left: -18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ro-blue);
  color: #fff;
  box-shadow: 0 3px 0 #001a4d;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.panel.more-below .scroll-cue { opacity: 1; pointer-events: auto; animation: cue-bob 1.2s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .panel.more-below .scroll-cue { animation: none; } }
/* a lone big button keeps full width inside its footer */
.panel-foot > .btn.big { margin: 0; }

/* ---------- The debt notebook and the share-card styles ---------- */
.ledger { list-style: none; margin: 0 0 12px; padding: 8px 12px; display: grid; gap: 4px; text-align: left;
  background: repeating-linear-gradient(#fffdf6 0 27px, #b9d3ea 27px 28px); border-left: 3px solid #e3a0a0; border-radius: 4px; }
.ledger li { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 'Nunito', sans-serif; min-height: 28px; }
.ledger li.plus { color: #1d6b31; }
.ledger li.minus { color: #9b1020; }
.ledger .av svg { width: 24px; height: 24px; display: block; }
.card-styles { display: flex; justify-content: center; margin: 8px 0 0; }
.card-styles button { font-size: 13px; }
@container (max-height: 500px) {
  .ledger li { font-size: 13px; min-height: 24px; }
  .card-styles { margin: 4px 0 0; }
  .card-styles button { font-size: 12px; padding: 4px 8px; }
}

/* ---------- Meniul zilei: a restaurant's set menu ---------- */
.daily-btn { font-size: 20px; }
.daily-panel { background: #fffdf6; }
.daily-badge { display: inline-block; font: 800 13px/1 'Nunito', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ro-blue); border-bottom: 2px solid var(--ro-blue); padding-bottom: 4px; }
.daily-place { margin: 2px 0 10px; font-weight: 700; font-style: italic; }
.daily-menu { list-style: none; padding: 0; margin: 0 auto 10px; max-width: 320px; display: grid; gap: 4px; }
.daily-menu li { display: flex; align-items: baseline; gap: 6px; font-size: 16px; }
.daily-menu li span { font-weight: 700; opacity: 0.75; white-space: nowrap; }
.daily-menu li::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted #c9b48a; }
.daily-menu li b { order: 2; white-space: nowrap; }
.daily-best { margin: 0 0 4px; font-weight: 800; color: var(--ro-red); }
.daily-note { margin: 0 0 12px; font-size: 13px; opacity: 0.75; }
@container (max-height: 500px) {
  .daily-menu li { font-size: 13px; }
  .daily-place { margin: 0 0 6px; }
  .daily-note { margin: 0 0 6px; font-size: 12px; }
}

/* ---------- Postcard album (in the achievements screen) ---------- */
.album-count { margin: 0 0 6px; font-size: 13px; opacity: 0.8; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0 0 14px; }
.postcard { margin: 0; background: #fff; padding: 5px 5px 4px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18); transform: rotate(-1.5deg); }
.postcard:nth-child(even) { transform: rotate(1.5deg); }
.postcard canvas { position: static; display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.postcard .blank { aspect-ratio: 8 / 5; display: grid; place-items: center; background: #efe5d0; color: #b8a27a; font: 800 28px var(--display-font); }
.postcard figcaption { font-size: 10.5px; font-weight: 800; text-align: center; margin-top: 3px; line-height: 1.2; }
.postcard.missing { opacity: 0.6; }
@container (max-height: 500px) {
  .album { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  #achievements .panel > .album, #achievements .panel > .album-count { flex: 0 0 100%; }
}

/* ---------- Boosters and grandma's package ---------- */
#btnBoost { position: relative; }
#btnBoost i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ro-red); color: #fff; font: 800 11px/18px 'Nunito', sans-serif; font-style: normal; }
#btnBoost i:empty { display: none; }
.boost-list { display: grid; gap: 8px; margin: 12px 0 14px; text-align: left; }
.boost { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 2px 0 #e6d6b8; }
.boost .ic { font-size: 26px; text-align: center; }
.boost b { display: block; font-size: 15px; }
.boost .d { font-size: 12px; line-height: 1.3; opacity: 0.8; }
.boost .use { font-size: 14px; padding: 7px 10px; white-space: nowrap; }
.boost .use:disabled { background: #d8c7a6; box-shadow: none; cursor: default; }
.gift-panel { text-align: left; }
.gift-head { display: flex; align-items: center; gap: 12px; }
.gift-head .av svg { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 0 3px #d8c7a6; display: block; }
.gift-head h2 { font-size: 30px; }
.gift-head p { margin: 2px 0 0; font-weight: 700; }
.gift-items { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.gift-items li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 7px 12px; font-weight: 800; box-shadow: 0 2px 0 #e6d6b8; }
.gift-items li span { font-size: 22px; }
.gift-items li em { margin-left: auto; font-style: normal; color: var(--ro-red); }
.gift-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.gift-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e0a21a; }
.gift-dots i.on { background: var(--ro-yellow); }
.gift-missed { font-style: italic; text-align: center; margin: 0 0 10px; }
@container (max-height: 500px) {
  /* two columns of cards on short screens: the panel widens so each description gets room */
  #boosters .panel.narrow { max-width: 640px; }
  .boost-list { grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 8px; }
  .boost { grid-template-columns: 30px 1fr auto; padding: 5px 8px; gap: 6px; }
  .boost .ic { font-size: 20px; }
  .boost b { font-size: 13px; }
  .boost .d { font-size: 11px; }
  .gift-head .av svg { width: 44px; height: 44px; }
  .gift-head h2 { font-size: 22px; }
  .gift-items { grid-template-columns: 1fr 1fr; margin: 6px 0; }
  .gift-items li { padding: 4px 10px; font-size: 13px; }
  .gift-dots { margin: 2px 0 4px; }
}

/* ---------- A new kind of shot ---------- */
/* ---------- The briefing before a level: the story on the left, the job on the right ---------- */
.brief-overlay { background: rgba(10, 12, 30, 0.38); }
.brief-panel { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; text-align: left; }
.brief-where { font-weight: 800; font-size: 12px; color: var(--ro-blue); text-transform: uppercase; letter-spacing: 0.08em; }
.brief-progress { display: flex; align-items: center; gap: 8px; }
.brief-dots { display: flex; gap: 4px; }
.brief-stop { font-weight: 800; font-size: 12px; color: #9a7a4a; white-space: nowrap; }
.brief-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e3d3b4; }
.brief-dots i.done { background: var(--ro-yellow); box-shadow: inset 0 0 0 1.5px #c99a12; }
.brief-dots i.now { background: var(--ro-red); transform: scale(1.3); }
.brief-panel h2 { line-height: 1.1; margin: 0 0 6px; }
.brief-text { margin-top: 0; }
.album .brief-text { font-style: italic; }
.brief-fact { margin: 0; line-height: 1.35; opacity: 0.78; }
.brief-fact b { color: var(--ro-red); }
.brief-task { background: #fffaf0; border-radius: 16px; box-shadow: inset 0 0 0 2px #ecdcbc; }
.brief-label { font-weight: 800; font-size: 11px; color: #9a7a4a; text-transform: uppercase; letter-spacing: 0.1em; margin: 2px 0 4px; }
.brief-goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
/* the goal sits beside the faces while there's room, under them when there isn't */
.brief-goal-row .brief-goal { flex: 1 1 150px; }
.brief-faces { display: flex; flex-shrink: 0; }
.brief-faces span { position: relative; margin-right: -6px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #e0cda8; display: grid; place-items: center; }
.brief-faces span:last-child { margin-right: 0; }
.brief-faces img { border-radius: 50%; }
.brief-faces b { position: absolute; z-index: 2; right: -4px; bottom: -4px; background: var(--ro-red); color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 999px; }
.brief-goal { margin: 0; font-weight: 800; line-height: 1.3; }
.brief-shots { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.brief-shots img { padding: 2px; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 #e0cda8; }
.brief-stars { margin-top: 2px; font-weight: 700; color: #8a6a3a; }
.brief-task .btn.big { margin: 0; }
/* the album's photos: an old print with its date */
.brief-panel.album { background: #fbf4e4; }
.brief-panel.album .brief-where { color: #8a5a2a; }
/* the page is always wide (a phone held upright gets it turned, html.rotated), so one column only on a narrow window */
@media (max-width: 640px) { html:not(.rotated) .brief-panel { grid-template-columns: 1fr; } }
/* a phone on its side (or the turned page): tighter, so it all fits without scrolling */
@media (max-height: 440px) { html:not(.rotated) .brief-panel { --tight: 1; } }
@media (max-width: 440px) { html.rotated .brief-panel { --tight: 1; } }
@media (max-height: 390px) { html:not(.rotated) .brief-panel { --tight: 2; } }
@media (max-width: 390px) { html.rotated .brief-panel { --tight: 2; } }
.brief-panel { --tight: 0; }
.brief-panel {
  padding: calc(26px - var(--tight) * 4px) calc(22px - var(--tight) * 3px) calc(18px - var(--tight) * 3px);
  gap: 4px calc(22px - var(--tight) * 4px);
}
.brief-panel h2 { font-size: calc(24px - var(--tight) * 2.5px); }
.brief-text { font-size: calc(15px - var(--tight) * 0.9px); line-height: calc(1.42 - var(--tight) * 0.05); margin-bottom: calc(8px - var(--tight) * 2px); }
.brief-fact { font-size: calc(13px - var(--tight) * 0.8px); }
.brief-goal { font-size: calc(15px - var(--tight) * 0.8px); }
.brief-progress { margin: calc(5px - var(--tight) * 1px) 0 calc(6px - var(--tight) * 2px); }
.brief-faces span { width: calc(46px - var(--tight) * 4px); height: calc(46px - var(--tight) * 4px); }
.brief-faces img { width: calc(40px - var(--tight) * 4px); height: calc(40px - var(--tight) * 4px); }
.brief-shots img { width: calc(34px - var(--tight) * 3px); height: calc(34px - var(--tight) * 3px); }
.brief-stars { margin-bottom: calc(10px - var(--tight) * 3px); font-size: calc(13px - var(--tight) * 0.5px); }
.brief-task { padding: calc(10px - var(--tight) * 2px) 12px calc(12px - var(--tight) * 2px); }
.brief-task .btn.big { font-size: calc(19px - var(--tight) * 1px); padding: calc(12px - var(--tight) * 2px) 18px; }

.newshot-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.newshot-badge { background: var(--ro-yellow); color: var(--ink); font-weight: 800; border-radius: 999px; padding: 4px 14px; transform: rotate(-3deg); }
#newShotIcon { position: static; display: block; width: 160px; height: 110px; }
.newshot-ability { margin: 0; font-weight: 700; }
.newshot-ability b { color: var(--ro-red); }
#newShotText { margin: 4px 0 14px; max-width: 34ch; }
@container (max-height: 500px) {
  #newShotIcon { width: 110px; height: 76px; }
  .newshot-panel h2 { font-size: 24px; }
  #newShotText { margin: 2px 0 8px; font-size: 13px; }
}
/* very short landscape phones: the drawing on the left, the words on the right, so nothing needs scrolling */
@container (max-height: 340px) {
  #newShot .panel { display: grid; grid-template-columns: 110px 1fr; column-gap: 16px; row-gap: 2px; justify-items: start; align-items: center; text-align: left; max-width: 600px; }
  #newShot .panel > * { grid-column: 2; }
  #newShot #newShotIcon { grid-column: 1; grid-row: 1 / 5; }
  #newShotText { margin: 2px 0 0; }
  #newShot #newShotOk { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }
}

/* ---------- Level end ---------- */
.end-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.end-actions .row { flex-wrap: nowrap; }
.end-actions .row .btn { flex: 1; }
.end-actions .share-btn { margin-top: 0; font-size: 19px; }
/* Screens a little taller than a phone held sideways (500–600px) get the phone's level-end layout too,
   results left and actions right, a size up (the phone sizes are in the short-screen section below). */
@container (max-height: 600px) {
  .end-panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: center; max-width: 760px; padding: 26px 20px 18px; }
  .end-panel h2 { font-size: 32px; }
  .end-panel #endTitle.long { font-size: 25px; }
  .end-panel #endStars { font-size: 38px; margin-top: 0; }
  .end-panel .grade { margin: 2px auto 8px; }
  .end-panel .grade-num { width: 46px; height: 46px; font-size: 26px; }
  .end-panel #endScore { font-size: 26px; margin-bottom: 8px; }
  .end-panel .badge { margin: 0 0 6px; }
  .end-panel .end-rival { margin: 4px auto 0; }
  .end-actions { margin-top: 0; }
  /* the welcome story's fairy-tale opening needs one more line */
  .welcome-icon { width: 80px; height: 80px; border-radius: 20px; }
}
/* over an open panel (end of a level, share, album): small, in the top-right corner above it, clear of its title */
body:has(> .overlay:not(.hidden)) #toasts { top: max(6px, var(--safe-top)); }
body:has(> .overlay:not(.hidden)) .toast { padding: 4px 14px 4px 4px; gap: 8px; font-size: 14px; }
body:has(> .overlay:not(.hidden)) .toast .icon { width: 28px; height: 28px; font-size: 15px; }

/* ---------- Journey complete ---------- */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -24px; width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-fall 4s linear infinite;
}
@keyframes confetti-fall { to { transform: translateY(calc(100vh + 48px)) rotate(var(--spin, 360deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
.victory-trophy { font-size: 64px; line-height: 1; margin-bottom: 4px; }
#victoryText { font-weight: 700; margin: 8px 0; }
#victoryScore { font-family: var(--display-font); font-weight: 800; font-size: 30px; color: var(--ro-blue); }
.victory-panel .badge { margin: 6px auto 0; }
.victory-reset { font-size: 14px; opacity: 0.75; margin: 10px 0 0; }
@container (max-height: 500px) {
  .victory-trophy { font-size: 38px; margin-bottom: 0; }
  #victoryText { font-size: 13px; margin: 2px 0; }
  #victoryScore { font-size: 22px; }
  .victory-reset { font-size: 12px; margin-top: 4px; }
}

/* ---------- Phones in landscape (short screens) ---------- */
@container (max-height: 500px) {
  #hud { padding-top: max(8px, var(--safe-top)); }
  .hud-box { padding: 4px 10px 2px; border-radius: 10px; }
  #levelName { font-size: 11px; }
  #score { font-size: 20px; }
  .hud-buttons button { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
  #hint { font-size: 12px; padding: 5px 11px 6px; border-radius: 12px; top: calc(max(8px, var(--safe-top)) + 56px); }

  .panel { max-width: 720px; padding: 22px 18px 14px; border-radius: 16px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .subtitle { font-size: 13px; margin-top: 2px; }
  #levels { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0; }
  .level { padding: 8px 6px; }
  .level .num { font-size: 22px; }
  .level .lname { font-size: 12px; }
  .level .lstars { font-size: 14px; }
  .howto { font-size: 12px; }
  #endStars { font-size: 36px; margin-top: 2px; }
  #endText { margin: 1px 0 0; font-size: 13px; }
  #endScore { font-size: 22px; margin-bottom: 10px; }
  .btn { font-size: 15px; padding: 9px 14px; }
}

@container (max-height: 500px) {
  .panel.narrow { max-width: 460px; }
  #setupPreview { width: 240px; height: 120px; }
  .setup-panel .subtitle { display: none; }
  .setup-tabs { margin: 4px auto 6px; }
  .album-cover { width: 96px; height: 72px; margin-bottom: 4px; }
  .album-cover .ac-photo { width: 34px; height: 24px; }
  .chapter-panel h2 { margin: 0 0 4px; }
  .chapter-text { font-size: 13px; margin: 4px 0; }
  .settings-list { margin: 8px 0 10px; }
  .setting { padding: 6px 2px; font-size: 14px; }
  .stack { gap: 7px; margin-top: 10px; }
  h3 { font-size: 16px; margin: 8px 0 2px; }
  .menu-footer { margin-bottom: 6px; }
  .panel p { font-size: 14px; margin: 6px 0; }
  .overlay.lobby { gap: 6px; padding-bottom: max(12px, var(--safe-bottom)); }
  .lobby-brand { font-size: 22px; }
  .lobby .total-stars { font-size: 14px; padding: 4px 10px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .stop-card { width: 196px; padding: 10px 12px; gap: 3px; border-radius: 16px; }
  .chapter-tabs button { padding: 3px 9px; font-size: 11px; }
  .album-page { padding: 6px 8px 8px; gap: 3px; }
  .album-head { font-size: 13px; }
  .album-grid { gap: 6px 8px; }
  .album-grid .photo { padding: 3px 3px 2px; }
  .album-grid .cap { font-size: 9px; }
  .album-grid .stars { font-size: 9px; }
  .album-grid .year { font-size: 9px; top: 4px; left: 5px; }
  .stop-card h3 { font-size: 18px; }
  .stop-stars { font-size: 22px; }
  .stop-best { font-size: 12px; }
  .welcome-icon { width: 64px; height: 64px; border-radius: 16px; }
  .welcome-story { font-size: 14px; margin: 6px 0; }
  .onboarding .howto { display: none; }
  .big-input { font-size: 20px; padding: 8px 12px; margin: 8px 0 10px; }
  .btn.big { font-size: 17px; padding: 10px 18px; }
  .steps { margin-bottom: 4px; }
  /* level end: results left, actions right, so everything fits above the fold */
  .end-panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: center; max-width: 740px; padding: 22px 18px 16px; }
  .end-panel h2 { font-size: 26px; }
  .end-panel #endTitle.long { font-size: 21px; }
  .end-panel #endStars { font-size: 32px; }
  .end-panel .grade { gap: 10px; margin: 2px auto 6px; }
  .end-panel .grade-num { width: 40px; height: 40px; font-size: 22px; border-width: 2.5px; }
  .end-panel .grade-text b { font-size: 13px; }
  .end-panel #endText { font-size: 12px; margin: 1px 0 0; }
  .end-panel #endScore { font-size: 22px; margin-bottom: 6px; }
  .end-panel .badge { margin: 0 0 4px; padding: 2px 10px; font-size: 13px; }
  .end-panel .end-rival { margin: 4px auto 0; font-size: 12px; }
  .end-actions { margin-top: 0; gap: 8px; }
  .end-actions .share-btn { font-size: 16px; }
  .panel { --chip-top: 14px; }
  .profile-chip { font-size: 12px; }
  .profile-chip .av svg { width: 28px; height: 28px; }
  .rival { font-size: 11px; }
  .coach .av svg { width: 30px; height: 30px; }
  .coach .say { font-size: 12px; padding: 4px 9px 5px; }
  .coach .say b { font-size: 9px; }
  .rival .av svg { width: 22px; height: 22px; }
  .name-row { margin: 8px 0 6px; }
  /* 16px or more, or iPhones zoom the page in when the field gets focus */
  .name-row input { font-size: 16px; padding: 6px 12px; }
  .challenge-panel .big-avatar svg { width: 84px; height: 84px; }
  .ch-text { font-size: 19px; }
  .ch-stars { font-size: 26px; }
  .share-actions .btn { padding: 7px 12px; font-size: 14px; }
  .total-stars { font-size: 16px; }
  .panel-foot { margin: 6px -18px 0; padding: 6px 18px 12px; }
  .scroll-cue { width: 32px; height: 32px; margin-left: -16px; }
  /* settings in two columns, so the whole list fits without scrolling */
  #settings .panel { max-width: 640px; }
  #settings .settings-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  #settings .setting-diff { grid-column: 1 / -1; }
  /* two columns: the tunes as icons only (the one you pick is named in a snackbar) */
  .track-pick .track-name { display: none; }
  .track-pick button { padding: 4px 6px; }
  .diff-note { font-size: 12px; }
  #ease .panel { max-width: 720px; }
  .ease-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
  .ease-opt { align-content: start; }
  .ease-opt { padding: 5px 10px; }
  .ease-name { font-size: 15px; }
  .ease-desc { font-size: 12px; }
  .ease-text { margin: 4px 0 6px; font-size: 14px; }

  /* Phones in landscape have width to spare and little height: spread panels sideways so they fit without scrolling. */
  h1, h2 { line-height: 1.15; }

  /* a title and a short line beside it share one row */
  #achievements .panel, #profile .panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; }
  #achievements .panel > *, #profile .panel > * { flex: 0 0 100%; }
  #achievements .panel > h2, #achievements .panel > .subtitle, #profile .panel > h2 { flex: 0 1 auto; }
  #achievements .subtitle { margin: 4px 0 0; }
  #profile .panel > .name-row { flex: 1 1 260px; margin: 0; }

  .ach-list { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 5px; margin: 6px 0 0; }
  .ach { padding: 3px 8px 3px 4px; gap: 7px; border-radius: 10px; }
  .ach .icon { width: 28px; height: 28px; font-size: 15px; }
  .ach b { font-size: 12.5px; line-height: 1.2; }
  .ach .desc { display: block; font-size: 11px; line-height: 1.2; }
  /* "Statistici" sits beside its numbers */
  #achievements .panel > h3 { flex: 0 0 auto; align-self: flex-start; margin: 7px 0 0; font-size: 15px; }
  #achievements .panel > .stats-list { flex: 1 1 0; min-width: 0; margin-top: 6px; }
  .stats-list { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 0 12px; margin: 0; font-size: 12px; }
  .stats-list div { padding: 1px 0; }
  .stats-list b { font-size: 13px; }

  /* the 30 avatars become a strip that scrolls sideways, so the title, name and button stay in view */
  .avatar-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 68px;
    gap: 6px;
    margin: 8px 0 0;
    padding: 2px 2px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .avatar-grid::-webkit-scrollbar { display: none; }
  .avatar-pick { padding: 4px 2px; border-width: 2px; border-radius: 12px; gap: 2px; justify-content: flex-start; }
  .avatar-pick svg { width: 44px; height: 44px; flex-shrink: 0; }
  .avatar-pick span { font-size: 10px; line-height: 1.1; }
  .music-grid { margin: 6px 0 10px; gap: 8px; }
  .music-pick { flex-direction: row; justify-content: center; gap: 8px; padding: 6px 8px; border-width: 2px; border-radius: 12px; }
  .music-pick i { font-size: 24px; }
  .music-pick span { display: none; }

  /* About: the text in two columns */
  #about .panel { max-width: 640px; }
  .about-body { columns: 2; column-gap: 28px; text-align: left; margin-top: 4px; }
  .about-body > :first-child { margin-top: 0; }
  .about-body p { margin: 0 0 6px; break-inside: avoid; }
  .about-body h3 { margin: 6px 0 2px; break-after: avoid; }

  /* Share: a smaller card beside the buttons, laid out two by two */
  .share-body { gap: 14px; align-items: stretch; margin: 8px 0 0; }
  .share-body img { width: auto; height: 190px; flex-shrink: 0; }
  .share-actions { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px; }
  .share-actions > .btn:first-child, .share-actions .share-tip { grid-column: 1 / -1; }
  /* in the apps "Copy link" is the only button left on its row */
  #shareCopy:has(+ .btn.hidden) { grid-column: 1 / -1; }

  /* snackbars: right under the HUD buttons (38px here) while playing, in the free strip above an open panel otherwise */
  #toasts { top: calc(max(8px, var(--safe-top)) + 46px); max-width: min(300px, 42%); }
  /* a friend's score sits under the score box: the hint moves down past it */
  body:where(:has(#rival:not(.hidden))) #hint { top: calc(max(8px, var(--safe-top)) + 90px); }
  body:has(> .overlay:not(.hidden)) #toasts { top: max(6px, var(--safe-top)); }
  .toast { padding: 4px 12px 4px 4px; gap: 8px; font-size: 13px; border-radius: 14px; }
  .toast .icon { width: 28px; height: 28px; font-size: 15px; }
}

/* Phones in landscape with the browser's toolbars showing (about 290px tall): tighter still. */
@container (max-height: 340px) {
  .panel { padding: 16px 16px 8px; }
  .panel-foot { margin: 4px -16px 0; padding: 4px 16px 8px; }
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  .btn { font-size: 14px; padding: 7px 12px; }
  .btn.big { font-size: 15px; padding: 8px 16px; }
  .panel p { font-size: 13px; margin: 4px 0; }
  .steps { margin-bottom: 2px; }
  .steps i { height: 5px; }
  .welcome-icon { width: 44px; height: 44px; border-radius: 12px; }
  .welcome-story { font-size: 13px; margin: 4px 0; }
  .big-input { font-size: 18px; padding: 6px 12px; margin: 6px 0 8px; }
  /* pause: the four buttons two by two */
  .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .settings-list { margin: 4px 0 6px; }
  .setting { padding: 4px 2px; }
  .challenge-panel .big-avatar svg { width: 60px; height: 60px; box-shadow: 0 0 0 3px #fff, 0 4px 0 3px #d8c7a6; }
  .ch-text { font-size: 16px; margin-top: 2px; }
  .ch-stars { font-size: 22px; line-height: 1.1; }
  .ch-question { font-size: 15px; margin: 2px 0 8px; }
  .avatar-grid { grid-template-rows: auto; margin-top: 6px; }
  .end-panel { padding: 16px 16px 12px; gap: 14px; }
  .end-panel #endTitle.long { font-size: 18px; }
  .end-panel #endStars { font-size: 26px; }
  .end-panel .grade { margin: 0 auto 4px; }
  .end-panel .grade-num { width: 34px; height: 34px; font-size: 19px; }
  .end-panel #endScore { font-size: 19px; margin-bottom: 2px; }
  .end-actions { gap: 6px; }
  .share-body img { height: 120px; }
  .share-actions { gap: 6px; }
  .share-tip { display: none; }
}

/* Typing a name on a phone held sideways: the keyboard (the phone's, or the game's own on the turned page,
   see gameKb in game.js) leaves a strip, so the panel becomes one row: the question, the field and its button.
   game.js puts .typing on the overlay only while a keyboard is really up. (The ids outrank #profile's own layout.) */
@container (max-height: 500px) {
  :is(#onbName, #profile).typing { padding-top: 6px; padding-bottom: 6px; }
  :is(#onbName, #profile).typing .panel {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
    max-width: 760px; padding: 16px 12px 8px; overflow: hidden;
  }
  :is(#onbName, #profile).typing .panel > :is(.steps, p, .avatar-grid) { display: none; }
  #onbName.typing .panel > h2 { flex: none; font-size: 20px; line-height: 1.1; letter-spacing: 0; text-shadow: 0 2px 0 #7a0a15; }
  #profile.typing .panel > h2 { display: none; }
  :is(#onbName, #profile).typing .panel > :is(.big-input, .name-row) { flex: 1 1 0; min-width: 0; margin: 0; }
  :is(#onbName, #profile).typing .big-input { font-size: 20px; padding: 6px 12px; }
  :is(#onbName, #profile).typing .panel > .panel-foot { position: static; flex: none; margin: 0; padding: 0; background: none; box-shadow: none; }
  :is(#onbName, #profile).typing .panel-foot::before,
  :is(#onbName, #profile).typing :is(.scroll-cue, .scroll-track) { display: none; }
  :is(#onbName, #profile).typing .btn.big { width: auto; }
}
/* the gradient's ground strip would sit right on top of the keyboard */
.overlay.onboarding.typing { background: radial-gradient(120% 100% at 50% 0%, #1458cf 0%, #002b7f 55%, #001a4f 100%); }

/* Text fields stay editable: select, move the cursor, paste (the page itself turns selection off) */
input { -webkit-user-select: text; user-select: text; }

/* ---------- The game's own keyboard (gameKb in game.js) ----------
   On the turned page the phone's keyboard would open along the real bottom of the screen, sideways to the game;
   this one turns with the page. It's also used when Safari's toolbars leave too little room for the phone's keyboard. */
#gkb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px max(10px, var(--safe-right)) max(8px, var(--safe-bottom)) max(10px, var(--safe-left));
  background: #e6d8bb;
  border-top: 4px solid; border-image: linear-gradient(90deg, var(--ro-blue) 0 33.33%, var(--ro-yellow) 33.33% 66.66%, var(--ro-red) 66.66%) 1;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(105%); visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0s 0.2s;
}
#gkb.show { transform: none; visibility: visible; transition: transform 0.2s ease-out; }
#gkb .krow { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; }
#gkb button {
  flex: 1 1 0; min-width: 0; max-width: 72px; height: 40px;
  border: none; border-radius: 9px; background: #fffaf0; color: var(--ink);
  font: 800 19px 'Nunito', sans-serif; padding: 0;
  box-shadow: 0 3px 0 #b9a77f; cursor: pointer;
}
#gkb button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b9a77f; background: #fff; }
#gkb button.fn { background: #cdbb94; font-size: 16px; max-width: 96px; flex-grow: 1.4; }
#gkb button.fn[aria-pressed="true"] { background: var(--ro-blue); color: #fff; }
#gkb button.fn[aria-pressed="true"] svg { fill: currentColor; }
#gkb button svg { display: block; margin: auto; }
#gkb button.space { flex-grow: 6; max-width: 420px; font-size: 13px; color: #8a7a5c; }
#gkb button.ok { flex-grow: 2; max-width: 170px; background: var(--ro-red); color: #fff; box-shadow: 0 3px 0 #7a0a15; font-family: var(--display-font); }
@container (max-height: 340px) {
  #gkb { gap: 5px; padding-top: 6px; }
  #gkb button { height: 34px; font-size: 17px; }
}
/* the panel above it: the overlay ends where the keyboard starts */
html.gkb-open .overlay { bottom: var(--gkb-h, 0px); }
html.gkb-open:not(.rotated) .overlay { height: calc(var(--vv-h, 100vh) - var(--gkb-h, 0px)); }
/* the field being typed into, without the phone's caret */
.gkb-target { border-color: var(--ro-blue) !important; box-shadow: 0 0 0 3px rgba(0, 43, 127, 0.18); }

/* Keyboard hint only makes sense with a keyboard. */
@media (pointer: coarse) {
  .howto kbd, .howto .kbd-only { display: none; }
}

/* ---------- The tray of tries, the closed road, offers and Nea Gigi's grill ---------- */
/* the tray: the mici left as little drawn mici, the eaten ones faded */
.tray-line { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: 13px; }
.tray-mici { --mic: 22px; position: relative; display: inline-flex; gap: 1px; }
.tray-mici i { display: inline-flex; width: var(--mic); height: var(--mic); transition: opacity 0.3s; }
.tray-mici i .shot-ic { width: 100%; height: 100%; }
.tray-mici i.eaten { opacity: 0.22; filter: grayscale(1); }
#endTray { margin: 2px auto 0; }
#endTray .tray-text { flex-basis: 100%; text-align: center; opacity: 0.85; }
.stop-card .tray-line { margin: 2px 0; }
.stop-card .tray-text { flex-basis: 100%; font-size: 12px; opacity: 0.75; }
/* in the HUD, next to the score */
.hud-score { display: flex; align-items: center; gap: 12px; }
.hud-tray { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; }
.hud-tray .tray-mici { --mic: 20px; }
.hud-tray .tray-count { display: none; }
/* narrow windows: one mic and a count, so the HUD buttons don't cover it */
@container (max-width: 600px) {
  .hud-tray .tray-mici i:not(:first-child) { display: none; }
  .hud-tray .tray-count { display: inline; }
}
/* narrower still (a desktop window made thin; phones held upright get the turned page instead): the buttons take
   the top row and the level's box the row under it, so neither covers the other; hints and snackbars move down */
@container (max-width: 560px) {
  #hud { flex-wrap: wrap; row-gap: 8px; }
  .hud-buttons { order: -1; margin-left: auto; }
  .hud-left { flex-basis: 100%; }
  .hud-box { max-width: 100%; }
  #hint, body:where(:has(#rival:not(.hidden))) #hint { top: calc(max(12px, var(--safe-top)) + 128px); max-width: 44%; }
  body:where(:has(#rival:not(.hidden))) #hint { top: calc(max(12px, var(--safe-top)) + 168px); }
  #toasts { top: calc(max(12px, var(--safe-top)) + 128px); }
}
/* the fridge counter in the lobby: tap for the shop */
.fridge-chip { display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer; font-family: var(--display-font); }
.fridge-chip .shot-ic { width: 22px; height: 22px; margin: 0; }
.stop.closed .dot { fill: #fcd116; stroke: #2b1a10; }
.stop.closed .num { font-size: 14px; }

/* offers: two side by side, the free-ish one (an ad) first; never bigger than the plain "try again" */
.offer-row { display: flex; gap: 8px; }
.offer {
  flex: 1 1 0; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 8px 10px; border: 2px solid #ecdcc0; border-radius: 14px; background: #fffaf0;
  color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #e0cfae;
}
.offer:active { transform: translateY(2px); box-shadow: 0 1px 0 #e0cfae; }
.offer { align-content: center; }
.offer .ic { grid-row: 1 / 3; font-size: 22px; width: 30px; display: grid; place-items: center; }
.offer .ic .shot-ic { width: 30px; height: 30px; }
.offer b { font-family: var(--display-font); font-size: 15px; line-height: 1.15; }
.offer .gives { font-size: 12px; font-weight: 700; opacity: 0.75; line-height: 1.25; }
.offer.ad { border-color: #9fc3ec; background: #f2f8ff; box-shadow: 0 3px 0 #b8d3f0; }
.offer.pay { border-color: #f0c64a; background: #fff8dc; box-shadow: 0 3px 0 #e8cf7c; }
.end-offer { background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 2px 0 #e6d6b8; animation: pop 0.4s ease-out; }
/* grandma makes the near-miss offer herself */
.offer-say { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.offer-say .av svg { display: block; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 0 2px #e6d6b8; }
.offer-say p { margin: 0; background: var(--ink); color: #fff; border-radius: 14px 14px 14px 4px; padding: 6px 11px; font-weight: 800; font-size: 13px; line-height: 1.25; text-align: left; }
.end-offer .offer.ad, .tray-plus-panel .offer.ad { width: 100%; }
.offer-no { margin-top: 6px; background: none; border: none; color: var(--ink); opacity: 0.6; font: 700 12px 'Nunito', sans-serif; cursor: pointer; text-decoration: underline; }
/* grandma's package: the plain thanks and the ad side by side once the ad is offered (a wider panel for them) */
#gift .panel:has(.gift-ad:not(.hidden)) { max-width: 560px; }
.gift-actions { display: flex; flex-direction: column; gap: 8px; }
.gift-actions:has(.gift-ad:not(.hidden)) { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.gift-items em.x2 { display: none; }
.gift-items.with-ad li { display: grid; grid-template-columns: 26px 1fr 44px 120px; }
.gift-items.with-ad em.x2 { display: block; justify-self: center; margin: 0; color: var(--ro-blue); background: #f2f8ff; border: 2px dashed #9fc3ec; border-radius: 10px; padding: 0 12px; }
.gift-items.with-ad li em:not(.x2) { margin-left: 0; text-align: center; }
.gift-items li.head { background: none; box-shadow: none; padding: 0 12px; font-size: 11px; }
.gift-items li.head b, .gift-items li.head em { opacity: 0.7; }
.gift-items li.head em.x2 { background: none; border: none; padding: 0; opacity: 1; text-align: center; }

/* the road is closed: the road with Dorel's barrier and the time to the free refill on the left,
   the choices on the right, sorted by how long they take (free ones first) */
.closed-panel.panel { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 16px; align-items: center; max-width: 780px; text-align: center; }
.closed-info { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.closed-panel h2 { font-size: clamp(24px, 4vw, 32px); }
.closed-text { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.closed-road { width: 100%; max-width: 300px; }
.closed-road svg { display: block; width: 100%; height: auto; }
.closed-clock { display: inline-flex; align-items: center; gap: 6px; margin: 0; background: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 12px; box-shadow: 0 2px 0 #e6d6b8; white-space: nowrap; }
.closed-clock svg { flex-shrink: 0; }
.closed-choices { display: flex; flex-direction: column; gap: 8px; }
.closed-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.closed-cols:has(#closedNow.hidden) { grid-template-columns: 1fr; }
.closed-col { display: flex; flex-direction: column; gap: 6px; }
.closed-col .offer { flex: none; width: 100%; }
.col-head { font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
.col-head.free { color: #1d6b31; }
.col-head.now { color: var(--ro-blue); }
.btn.two-line { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px; }
.btn.two-line b { font-size: 16px; line-height: 1.1; }
.btn.two-line span { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; opacity: 0.9; }
.closed-col .offer.pay { background: var(--ro-yellow); border-color: transparent; box-shadow: 0 4px 0 #c9a000; }
.closed-col .offer.pay .gives { opacity: 1; }
.offer { position: relative; }
.offer .tag, .offer-main .tag { position: absolute; right: 10px; top: -10px; background: var(--ro-red); color: #fff; border-radius: 999px; padding: 1px 9px; font: 800 11px 'Nunito', sans-serif; font-style: normal; white-space: nowrap; }
.closed-col .offer.pay .tag { background: var(--ro-blue); }
@container (max-width: 640px) {
  .closed-panel.panel { grid-template-columns: 1fr; }
}

/* Nea Gigi's grill */
.shop-panel { text-align: left; }
.shop-head { display: flex; align-items: center; gap: 12px; }
/* a terasa awning over the grill: red and cream stripes with a scalloped edge */
.shop-awning {
  height: 36px; margin: -24px -28px 8px;
  background:
    radial-gradient(circle at 20px 0, var(--ro-red) 19px, transparent 20px) 0 16px / 80px 20px repeat-x,
    radial-gradient(circle at 60px 0, #fffaf0 19px, transparent 20px) 0 16px / 80px 20px repeat-x,
    repeating-linear-gradient(90deg, var(--ro-red) 0 40px, #fffaf0 40px 80px) 0 0 / 100% 16px no-repeat;
}
.shop-head .av svg { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 0 3px #d8c7a6; display: block; }
.shop-head h2 { font-size: 30px; }
.shop-say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-say .say { margin: 0; align-self: flex-start; background: var(--ink); color: #fff; border-radius: 4px 14px 14px 14px; padding: 4px 10px; font-weight: 800; font-size: 13px; line-height: 1.3; }
.shop-first { margin: 10px 0 0; text-align: center; background: var(--ro-yellow); border-radius: 10px; padding: 4px 10px; font-weight: 800; font-size: 13px; transform: rotate(-0.6deg); }
.shop-summary { margin: 10px 0 2px; font-size: 12px; font-weight: 700; opacity: 0.8; }
.shop-need { margin: 10px 0 0; padding: 6px 12px; border-radius: 12px; background: #fff3d1; border: 2px solid #f0c64a; font-weight: 800; font-size: 14px; }
.shop-fridge { display: flex; align-items: center; gap: 6px; margin: 0; background: #fff; border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 0 #e6d6b8; font-weight: 800; font-size: 13px; white-space: nowrap; }
.shop-fridge .shot-ic { width: 26px; height: 26px; margin: 0; }
.shop-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 6px 10px; border: 2px solid #ecdcc0; border-radius: 16px; background: #fff;
  color: var(--ink); font-family: inherit; cursor: pointer; box-shadow: 0 3px 0 #e0cfae;
}
.pack:active { transform: translateY(2px); box-shadow: 0 1px 0 #e0cfae; }
.pack:disabled { opacity: 0.5; cursor: default; }
.pack.pick { border-color: var(--ro-red); box-shadow: 0 3px 0 #7a0a15; }
.pack-badge { position: absolute; top: -10px; background: var(--ro-red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pack-badge:empty { display: none; }
/* each portion drawn as a plate with mici piled on it */
.pack-plate { position: relative; width: 140px; max-width: 100%; height: 62px; }
.pack-plate::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 4px; height: 26px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 4px #e9dcc0, 0 3px 0 4px #c9b48c; }
.pack-plate i { position: absolute; width: 30px; height: 30px; }
.pack-plate .shot-ic { width: 100%; height: 100%; margin: 0; }
.pack-count { font-family: var(--display-font); font-size: 22px; line-height: 1; }
.pack-name { font-weight: 800; font-size: 13px; text-align: center; line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; }
.pack-price { font-family: var(--display-font); font-weight: 800; font-size: 20px; color: var(--ro-red); }
.pack-per { font-size: 11px; font-weight: 700; opacity: 0.7; text-align: center; line-height: 1.2; }
.shop-panel h3 { margin-top: 14px; }
.shop-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shop-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: 0 2px 0 #e6d6b8; }
.shop-item .ic { font-size: 22px; text-align: center; }
.shop-item .ic .shot-ic { width: 30px; height: 30px; }
.shop-item b { display: block; font-size: 14px; }
.shop-item .d { display: block; font-size: 11px; line-height: 1.3; opacity: 0.8; }
.shop-item .cost { font-weight: 800; font-size: 12px; color: var(--ro-red); white-space: nowrap; }
.shop-item .cost .btn { font-size: 12px; padding: 6px 9px; }
.shop-fine { font-size: 11px; line-height: 1.4; opacity: 0.65; margin: 12px 0 4px; }
.shop-mock { font-size: 12px; font-weight: 800; color: #8a5a00; background: #fff3d1; border-radius: 8px; padding: 4px 10px; margin: 0 0 8px; }
.shop-panel .row { margin-top: 6px; }
@container (max-width: 640px) {
  .shop-packs { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .shop-items { grid-template-columns: 1fr; }
}
@container (max-height: 500px) {
  .end-offer { padding: 7px 8px; }
  .end-offer p { font-size: 12px; margin-bottom: 6px; }
  .offer { padding: 5px 8px; column-gap: 6px; border-radius: 12px; }
  .offer .ic { width: 24px; font-size: 18px; }
  .offer .ic .shot-ic { width: 24px; height: 24px; }
  .offer b { font-size: 13px; }
  .offer .gives { font-size: 11px; }
  .offer-no { margin-top: 3px; }
  #endTray { font-size: 12px; }
  .tray-mici { --mic: 18px; }
  .closed-panel.panel { padding: 20px 16px 12px; gap: 12px; }
  .closed-panel h2 { font-size: 22px; }
  .closed-text { font-size: 12px; }
  .closed-road { max-width: 230px; }
  .closed-clock { padding: 3px 9px; font-size: 10.5px; }
  .closed-cols { gap: 8px; }
  .closed-col { gap: 5px; }
  .btn.two-line { padding: 7px 8px; }
  .btn.two-line b { font-size: 14px; }
  .btn.two-line span { font-size: 10px; }
  .offer-say { margin-bottom: 6px; }
  .offer-say .av svg { width: 32px; height: 32px; }
  .offer-say p { font-size: 12px; padding: 5px 9px; }
  .shop-head .av svg { width: 44px; height: 44px; }
  .shop-head h2 { font-size: 22px; }
  .shop-say .say { font-size: 10.5px; padding: 3px 8px; }
  .shop-awning { height: 26px; margin: -12px -16px 4px; background-size: 80px 14px, 80px 14px, 100% 12px; background-position: 0 12px, 0 12px, 0 0; }
  .shop-head { gap: 8px; }
  .shop-head .av svg { width: 36px; height: 36px; }
  .shop-head h2 { font-size: 20px; }
  .shop-fridge { padding: 3px 9px; font-size: 11px; }
  .shop-fridge .shot-ic { width: 20px; height: 20px; }
  .shop-need { margin-top: 6px; padding: 3px 10px; font-size: 12px; }
  .shop-first { margin-top: 6px; padding: 2px 8px; font-size: 11.5px; }
  .shop-summary { font-size: 11px; margin-top: 8px; }
  .offer-main .txt b { font-size: 13px; }
  .gift-actions .btn.big { font-size: 15px; padding: 9px 12px; }
  .shop-panel.panel { padding: 22px 16px 12px; }
  .shop-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pack { padding: 12px 4px 6px; }
  .shop-packs { margin-top: 12px; gap: 8px; }
  .pack { gap: 0; }
  .pack-plate { height: 44px; transform: scale(0.72); transform-origin: bottom center; margin-top: -10px; }
  .pack-count { font-size: 16px; }
  .pack-name { min-height: 0; font-size: 10.5px; }
  .pack-per { font-size: 10px; }
  .pack-price { font-size: 16px; }
  .pack-name { font-size: 11px; }
  .shop-items { grid-template-columns: 1fr 1fr; }
  .hud-tray .tray-mici { --mic: 15px; }
}

/* lose screen: how close it was, the last opponent gloating at the end of the bar */
.end-meter { width: min(300px, 100%); margin: 6px auto 2px; text-align: left; }
.meter-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 12px; color: var(--ro-blue); margin-bottom: 4px; }
.meter-bar { position: relative; height: 14px; margin-right: 16px; background: #ecdcc0; border-radius: 999px; }
.meter-bar i { display: block; height: 100%; background: #2e9d4a; border-radius: 999px; animation: meter-grow 0.9s 0.35s ease-out backwards; }
@keyframes meter-grow { from { width: 0; } }
.meter-face { position: absolute; right: -18px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); }
.meter-face img { display: block; width: 100%; height: 100%; }
.meter-face:empty { display: none; }
.meter-taunt { width: fit-content; margin: 8px 0 0 auto; background: var(--ink); color: #fff; border-radius: 12px 4px 12px 12px; padding: 3px 10px; font-weight: 800; font-size: 12px; animation: pop 0.4s 1.1s ease-out backwards; }

/* the one warm offer card: what you get, and the price in mici and lei */
.offer-main {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 100%;
  margin-bottom: 8px; padding: 9px 10px; border: none; border-radius: 14px; background: var(--ro-yellow);
  box-shadow: 0 4px 0 #c9a000; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer;
}
.offer-main:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9a000; }
.offer-main .ic { display: grid; place-items: center; font-size: 22px; }
.offer-main .ic .shot-ic { width: 34px; height: 34px; }
.offer-main .txt { display: flex; flex-direction: column; min-width: 0; }
.offer-main .txt b { font-family: var(--display-font); font-size: 16px; line-height: 1.1; }
.offer-main .gives { font-size: 12px; font-weight: 700; line-height: 1.25; }
.offer-main .price { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; padding: 3px 8px; }
.offer-main .price b { font-family: var(--display-font); font-size: 15px; line-height: 1.1; color: var(--ro-red); white-space: nowrap; }
.offer-main .price span { font-size: 10px; font-weight: 800; white-space: nowrap; }
.end-offer .offer-main { margin-top: 4px; }

/* the mic a hand snatches off the tray, over its empty place */
.snatch { position: absolute; top: 0; left: calc(var(--k) * (var(--mic) + 1px)); width: var(--mic); height: var(--mic); pointer-events: none; }
.snatch .shot-ic { display: block; width: 100%; height: 100%; animation: snatch-mic 1.3s 0.6s ease-in forwards; }
.snatch .hand { position: absolute; left: 6px; top: -14px; opacity: 0; animation: snatch-hand 1.3s 0.6s ease-in-out forwards; }
/* the word pops up on the tray's own row, beside the empty place, clear of the lines above and below */
.snatch .hap { position: absolute; left: calc(var(--mic) + 4px); top: calc(var(--mic) / 2 - 12px); white-space: nowrap; transform-origin: left center; font: 800 18px var(--display-font); color: var(--ro-red); text-shadow: 0 2px 0 #7a0a15; opacity: 0; animation: hap 1.3s 0.6s ease-out forwards; }
@keyframes snatch-mic { 0%, 40% { transform: none; opacity: 1; } 100% { transform: translate(36px, -30px) rotate(-35deg); opacity: 0; } }
@keyframes snatch-hand { 0% { transform: translate(30px, -18px); opacity: 0; } 35%, 45% { transform: none; opacity: 1; } 100% { transform: translate(40px, -34px); opacity: 0; } }
@keyframes hap { 0%, 30% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1.2); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .snatch { display: none; } }

/* the + next to the tray in the HUD: quiet, until the last mic */
.hud-plus { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px solid #c9a000; border-radius: 50%; background: #fff; color: #8a6a00; font: 800 16px/1 'Nunito', sans-serif; cursor: pointer; pointer-events: auto; }
.hud-plus.hot { background: var(--ro-yellow); border-color: transparent; color: var(--ink); animation: plus-glow 1.2s ease-out 2; }
.hud-tray.hot .tray-mici i:first-child { filter: drop-shadow(0 0 4px #fcd116); }
@keyframes plus-glow { from { box-shadow: 0 0 0 0 rgba(252, 209, 22, 0.85); } to { box-shadow: 0 0 0 12px rgba(252, 209, 22, 0); } }
.tray-plus-panel { max-width: 380px; }
.tray-plus-text { margin: 4px 0 8px; font-weight: 700; font-size: 14px; }
.tray-plus-panel .stack { margin-top: 10px; gap: 8px; }
.tray-plus-panel .offer-main { margin-bottom: 0; }

/* the map: the grill chip lights up once a day when the tray is low, and Nea Gigi says so */
.fridge-wrap { position: relative; display: inline-flex; }
.fridge-chip .lbl { font-size: 13px; opacity: 0.85; }
.lobby .fridge-chip.hot { background: var(--ro-yellow); color: var(--ink); animation: plus-glow 1.2s ease-out 3; }
.fridge-tip { position: absolute; right: 0; top: calc(100% + 8px); z-index: 3; width: 210px; background: var(--ink); color: #fff; border-radius: 12px 4px 12px 12px; padding: 6px 10px; font-weight: 800; font-size: 12px; line-height: 1.3; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); animation: pop 0.4s ease-out; }
.stop-card .stop-add { margin-top: 2px; padding: 7px 10px; font-size: 14px; background: transparent; color: var(--ro-blue); border: 2px solid var(--ro-blue); box-shadow: none; }
.stop-wait { margin: 0; font-size: 11px; font-weight: 700; opacity: 0.7; }

/* making a level easier: deeper steps are priced in mici */
.ease-cost.mici { color: #8a6a00; }

@container (max-height: 500px) {
  .end-meter { margin: 2px auto 0; }
  .meter-head { font-size: 11px; margin-bottom: 2px; }
  .meter-bar { height: 11px; }
  .meter-face { width: 30px; height: 30px; right: -14px; }
  .meter-taunt { margin-top: 5px; font-size: 11px; padding: 2px 8px; }
  .offer-main { padding: 6px 8px; gap: 6px; grid-template-columns: 26px 1fr auto; }
  .offer-main .ic .shot-ic { width: 26px; height: 26px; }
  .offer-main .txt b { font-size: 14px; }
  .offer-main .gives { font-size: 11px; }
  .offer-main .price b { font-size: 13px; }
  .fridge-chip .lbl { display: none; }
  .gift-items.with-ad { grid-template-columns: 1fr; }
  .gift-items.with-ad li { grid-template-columns: 22px 1fr 36px 100px; }
  .stop-card .stop-add { padding: 4px 8px; font-size: 12px; }
  .stop-wait { font-size: 10px; }
}