/* RUCKUS RUN: the menus (js/ui/ui.js and the screens-*.js files). Identity "carved toy" (build spec
   14.1): chunky, rounded, outlined shapes with a hard ledge under them; ink panels at 82%; no glass,
   no backdrop-filter. Tokens, the loading screen, the error panel, icons and input glyphs are in
   base.css.

   Scale. Every size is N × --u, where --u is one design pixel at 1280 × 720 times --rr-scale (set
   on #app by main.js). After scaling, text never goes under 14 px and nothing to press under 44 px:
   those floors are the max() in the tokens below.
   Shape classes on #app (main.js): .ui-portrait (taller than wide) and .ui-short (under 480 px high:
   a phone held sideways), where every screen has its own layout at the foot of this file. */

.ui-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --u: calc(1px * var(--rr-scale, 1));
  --t: max(14px, calc(15 * var(--u)));            /* body text */
  --t-s: max(14px, calc(14 * var(--u)));          /* the smallest text there is */
  --t-l: max(15px, calc(17 * var(--u)));          /* button labels */
  --btn: max(44px, calc(52 * var(--u)));          /* the height of anything to press */
  --ledge: 5px;
  --ink-2: #2B1F4A;                               /* a raised surface on an ink panel */
  --ink-3: #3B2C63;
  /* #app starts under the Pixelrain bar, which already covers that much of a notch */
  --pad-t: max(calc(14 * var(--u)), calc(var(--rr-safe-t) - var(--pixelrain-bar, 0px)));
  --pad-r: max(calc(16 * var(--u)), var(--rr-safe-r));
  --pad-b: max(calc(14 * var(--u)), var(--rr-safe-b));
  --pad-l: max(calc(16 * var(--u)), var(--rr-safe-l));
  --pop: cubic-bezier(.34, 1.56, .64, 1);         /* a springy overshoot */
  font: 600 var(--t)/1.4 var(--rr-body);
  color: var(--rr-cream);
}
.ui-layer { position: absolute; inset: 0; }

/* ── Screens and their transitions ─────────────────────────────────────────────────────────── */

.ui-screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  row-gap: calc(8 * var(--u));
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  pointer-events: none;
}
.ui-screen[data-scrim="dim"] { background: rgba(27, 18, 48, .58); }
.ui-screen[data-scrim="soft"] { background: rgba(27, 18, 48, .40); }

/* A 220 ms slide of 16 px plus fade (the scrim only fades). */
.ui-enter, .ui-enter-back { animation: ui-fade .22s ease-out both; }
.ui-enter > .ui-panel { animation: ui-slide-up .22s cubic-bezier(.2, .8, .3, 1) both; }
.ui-enter-back > .ui-panel { animation: ui-slide-down .22s cubic-bezier(.2, .8, .3, 1) both; }
.ui-leave { animation: ui-fade .2s ease-in reverse both; }
.ui-leave, .ui-leave * { pointer-events: none !important; }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-slide-up { from { transform: translateY(16px); } }
@keyframes ui-slide-down { from { transform: translateY(-16px); } }

/* Parts of a screen that pop in one after another (--i is the order). */
.ui-enter .ui-rise, .ui-enter-back .ui-rise { animation: ui-rise .36s var(--pop) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px) scale(.94); } }

/* The tally: things wait unseen, then pop, stamp or thud. */
.ui-wait { opacity: 0; }
.ui-show { animation: ui-pop .3s var(--pop) both; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.ui-stamp { animation: ui-stamp .36s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ui-stamp {
  0% { opacity: 0; transform: scale(2.7) rotate(-16deg); }
  55% { opacity: 1; transform: scale(.88) rotate(3deg); }
  78% { transform: scale(1.07) rotate(-1deg); }
  100% { transform: none; }
}
.ui-thud { animation: ui-thud .3s ease-out both; }
@keyframes ui-thud {
  0% { transform: translateY(-7px); }
  40% { transform: translateY(3px) scale(1.06, .92); }
  70% { transform: translateY(-1px) scale(.98, 1.03); }
  100% { transform: none; }
}
.ui-deny { animation: ui-deny .28s ease-out; }
@keyframes ui-deny { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* Dev shots and reduced motion: nothing slides, nothing is caught half-way. */
.ui-instant *, .ui-instant *::before, .ui-instant *::after,
.ui-reduced *, .ui-reduced *::before, .ui-reduced *::after { animation: none !important; transition: none !important; }

/* ── Panels, headings, text ────────────────────────────────────────────────────────────────── */

.ui-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(26 * var(--u));
  /* pangolin scales, carved faintly into the ink */
  background:
    radial-gradient(circle at 50% 0, transparent 60%, rgba(255, 244, 220, .05) 61%, rgba(255, 244, 220, .05) 67%, transparent 68%) 0 0 / 52px 26px,
    radial-gradient(circle at 50% 0, transparent 60%, rgba(255, 244, 220, .05) 61%, rgba(255, 244, 220, .05) 67%, transparent 68%) 26px 13px / 52px 26px,
    var(--rr-ink-panel);
  box-shadow: 0 7px 0 rgba(0, 0, 0, .38), inset 0 2px 0 rgba(255, 244, 220, .12);
  pointer-events: auto;
}

.ui-head { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-bottom: calc(14 * var(--u)); flex: none; }
.ui-head-text { min-width: 0; }
.ui-head-right { margin-left: auto; min-width: 0; }

.ui-kicker {
  margin: 0;
  font: 800 var(--t-s)/1.25 var(--rr-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rr-cream);
  opacity: .82;
}
.ui-title {
  margin: 0;
  font: 900 calc(36 * var(--u))/1.02 var(--rr-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rr-sun);
  -webkit-text-stroke: 5px var(--rr-outline);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--rr-outline);
}

.ui-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 244, 220, .35) transparent;
  /* room for a focus ring and a ledge at the edges */
  margin: 0 calc(-8 * var(--u));
  padding: 4px calc(8 * var(--u)) 8px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────── */

.ui-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: var(--btn);
  margin: 0 0 var(--ledge);
  padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(5 * var(--u)) calc(16 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(18 * var(--u));
  background: var(--rr-cream);
  color: var(--rr-outline);
  box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -4px 0 rgba(58, 29, 11, .10);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: transform .07s ease-out, box-shadow .07s ease-out, background-color .1s linear;
  -webkit-appearance: none;
  appearance: none;
}
.ui-btn-icon { color: var(--rr-orange); width: max(22px, calc(24 * var(--u))); height: max(22px, calc(24 * var(--u))); }
.ui-btn-text { display: flex; flex-direction: column; min-width: 0; }
.ui-btn-label { font: 900 var(--t-l)/1.12 var(--rr-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.ui-btn-sub { font: 600 var(--t-s)/1.2 var(--rr-body); opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-btn-primary { background: var(--rr-sun); box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(255, 122, 26, .45); }
.ui-btn-primary .ui-btn-icon { color: var(--rr-cream); }
.ui-btn-danger { background: var(--rr-scarf); color: var(--rr-cream); box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(58, 29, 11, .22); }
.ui-btn-danger .ui-btn-icon { color: var(--rr-sun); }
.ui-btn-quiet { background: #CFC6DD; color: #3A2F52; }
.ui-btn-quiet .ui-btn-icon { color: var(--rr-leaf); }
.ui-btn.ui-locked { background: #B9AFC9; color: #4A3E66; box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .35); }
.ui-btn.ui-locked .ui-btn-icon { color: #6B5E8A; }

/* The cursor: a 3 px cream ring round the button and its ledge. */
.ui-btn.ui-focus { box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -4px 0 rgba(58, 29, 11, .10), 0 0 0 3px var(--rr-cream), 0 var(--ledge) 0 3px var(--rr-cream); }
.ui-btn-primary.ui-focus { box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(255, 122, 26, .45), 0 0 0 3px var(--rr-cream), 0 var(--ledge) 0 3px var(--rr-cream); }
.ui-btn-danger.ui-focus { box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 3px var(--rr-cream), 0 var(--ledge) 0 3px var(--rr-cream); }
.ui-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .5); }
.ui-btn.ui-focus:active { box-shadow: 0 1px 0 var(--rr-outline), 0 0 0 3px var(--rr-cream), 0 1px 0 3px var(--rr-cream); }

.ui-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(12 * var(--u)); flex: none; }
.ui-actions .ui-btn { min-width: calc(150 * var(--u)); justify-content: center; }

.ui-back {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--btn);
  height: var(--btn);
  margin: 0 0 var(--ledge);
  padding: 0;
  border: 3px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--rr-cream);
  color: var(--rr-orange);
  box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .75);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ui-back.ui-focus { box-shadow: 0 var(--ledge) 0 var(--rr-outline), 0 0 0 3px var(--rr-cream), 0 var(--ledge) 0 3px var(--rr-cream); }
.ui-back:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rr-outline); }

/* Results and Run over: the buttons are there from the start but take no press for 0.6 s. */
.ui-inert .ui-actions .ui-btn { filter: saturate(.5) brightness(.86); }

/* ── Chips, tags, badges ───────────────────────────────────────────────────────────────────── */

.ui-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin: 0; }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: max(30px, calc(34 * var(--u)));
  padding: 0 calc(12 * var(--u)) 0 calc(8 * var(--u));
  border: 2.5px solid var(--rr-outline);
  border-radius: 99px;
  background: var(--ink-2);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  font: 800 var(--t-s)/1 var(--rr-body);
  white-space: nowrap;
}
.ui-chip .ui-icon { color: var(--rr-sun); }
.ui-chip-label { opacity: .8; font-weight: 700; }
.ui-chip b { font-weight: 800; }
.ui-tone-keystones .ui-icon, .ui-tone-keystone .ui-icon { color: var(--rr-keystone); }
.ui-tone-idols .ui-icon, .ui-tone-idol .ui-icon { color: var(--rr-idol); }
.ui-tone-sundials .ui-icon, .ui-tone-gold .ui-icon { color: var(--rr-gold); }
.ui-tone-cream .ui-icon { color: var(--rr-cream); }
.ui-tone-sun .ui-icon { color: var(--rr-sun); }

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 4px 7px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 10px;
  background: var(--rr-leaf);
  color: var(--rr-outline);
  box-shadow: 0 3px 0 var(--rr-outline);
  font: 900 var(--t-s)/1 var(--rr-display);
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.ui-tag .ui-icon { color: var(--rr-cream); }

.ui-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); }
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 5px 8px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 99px;
  background: var(--rr-teal);
  color: var(--rr-outline);
  box-shadow: 0 3px 0 var(--rr-outline);
  font: 900 var(--t-s)/1 var(--rr-display);
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-badge .ui-icon { color: var(--rr-cream); }

/* ── Tabs ──────────────────────────────────────────────────────────────────────────────────── */

.ui-tabs { display: flex; gap: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); flex: none; }
.ui-tab {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px calc(8 * var(--u));
  min-width: 0;
  min-height: var(--btn);
  margin: 0 0 4px;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(16 * var(--u));
  background: var(--ink-3);
  color: var(--rr-cream);
  box-shadow: 0 4px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 244, 220, .12);
  font: 900 var(--t-l)/1.1 var(--rr-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-tab .ui-icon { color: var(--rr-sun); }
.ui-tab-label { min-width: 0; }
.ui-tab-note { flex-basis: 100%; font: 700 var(--t-s)/1.15 var(--rr-body); text-transform: none; letter-spacing: 0; opacity: .85; text-align: center; }
.ui-tab.ui-on { background: var(--rr-sun); color: var(--rr-outline); box-shadow: 0 4px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(255, 122, 26, .45); }
.ui-tab.ui-on .ui-icon { color: var(--rr-cream); }
.ui-tab.ui-locked { background: #62577C; color: var(--rr-cream); }
.ui-tab.ui-locked .ui-icon { color: var(--rr-cream); }
.ui-tab.ui-focus { box-shadow: 0 4px 0 var(--rr-outline), 0 0 0 3px var(--rr-cream), 0 4px 0 3px var(--rr-cream); }
.ui-tab.ui-on.ui-focus { box-shadow: 0 4px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(255, 122, 26, .45), 0 0 0 3px var(--rr-cream), 0 4px 0 3px var(--rr-cream); }

/* ── Input hints and the toast ─────────────────────────────────────────────────────────────── */

.ui-hints {
  grid-row: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: 0 calc(4 * var(--u));
  font: 700 var(--t-s)/1 var(--rr-body);
  text-shadow: 0 2px 0 var(--rr-outline), 0 0 6px rgba(27, 18, 48, .9);
}
.ui-hint { display: inline-flex; align-items: center; gap: 8px; }
.ui-hints .ui-glyph { transform: scale(.82); transform-origin: right center; text-shadow: none; }
#app[data-device="touch"] .ui-hints, .ui-short .ui-hints, .ui-portrait .ui-hints { display: none; }
/* A finger has no cursor to show. */
#app[data-device="touch"] .ui-focus:not(.ui-opt):not(.ui-on) { box-shadow: 0 var(--ledge) 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .5); }

.ui-toast {
  position: absolute;
  left: 50%;
  top: calc(var(--pad-t) + 44px);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 8px 16px 9px 12px;
  border: 3px solid var(--rr-outline);
  border-radius: 16px;
  background: var(--ink-2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  font: 700 var(--t)/1.3 var(--rr-body);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  z-index: 5;
}
.ui-root.ui-on .ui-toast { top: auto; bottom: calc(var(--pad-b) + 6px); }
.ui-toast .ui-icon { color: var(--rr-sun); }
.ui-toast.ui-on { opacity: 1; visibility: visible; animation: ui-toast .3s var(--pop); }
@keyframes ui-toast { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.92); } }

/* ── The logo (js/ui/logo.js) ──────────────────────────────────────────────────────────────── */

.ui-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-logo path, .ui-logo circle { vector-effect: none; }
.ui-logo-l path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ui-logo-ledge { stroke: rgba(27, 18, 48, .55); }
.ui-logo-out { stroke: var(--rr-outline); }
.ui-logo-lip { stroke: #C2470A; }
.ui-logo-hi { stroke: #FFFBE0; stroke-opacity: .7; }
.ui-logo-ledge-fill { fill: rgba(27, 18, 48, .55); }
.ui-logo-out-fill { fill: var(--rr-outline); }
.ui-logo-l, .ui-logo-ball, .ui-logo-dash, .ui-logo-scarf, .ui-logo-spin, .ui-logo-crown { transform-box: fill-box; transform-origin: 50% 100%; }
.ui-logo-spin { transform-origin: 50% 50%; }
.ui-logo-scarf { transform-origin: 0% 60%; }

.ui-enter .ui-logo-l { animation: ui-logo-pop .5s var(--pop) both; animation-delay: calc(var(--i) * 55ms + 60ms); }
.ui-enter .ui-logo-ball { animation: ui-logo-pop .5s var(--pop) both; animation-delay: 170ms; }
.ui-enter .ui-logo-spin { animation: ui-logo-roll .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: 170ms; }
.ui-enter .ui-logo-dash { animation: ui-logo-dash .4s ease-out both; animation-delay: 520ms; }
.ui-enter .ui-logo-crown { animation: ui-stamp .4s ease-out both; animation-delay: 900ms; }
@keyframes ui-logo-pop { from { opacity: 0; transform: translateY(40px) scale(.5, .7); } }
@keyframes ui-logo-roll { from { transform: rotate(-400deg); } }
@keyframes ui-logo-dash { from { opacity: 0; transform: translateX(60px) scaleX(.2); } }
/* The scarf never stops flicking. */
.ui-logo-scarf { animation: ui-logo-scarf 1.1s ease-in-out infinite alternate; }
.ui-logo-scarf-b { animation: ui-logo-scarf-b 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0% 20%; }
@keyframes ui-logo-scarf { from { transform: rotate(-7deg) skewY(-3deg); } to { transform: rotate(6deg) skewY(4deg); } }
@keyframes ui-logo-scarf-b { from { transform: rotate(5deg); } to { transform: rotate(-9deg); } }

/* ── Title ─────────────────────────────────────────────────────────────────────────────────── */

.ui-screen[data-screen="title"] {
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) auto auto minmax(0, 1fr);
  justify-items: start;
  align-items: start;
  row-gap: calc(12 * var(--u));
  padding-left: max(4%, var(--rr-safe-l));
  padding-top: max(2.5%, var(--pad-t));
}
.ui-title-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(27, 18, 48, .80) 0%, rgba(27, 18, 48, .55) 26%, rgba(27, 18, 48, 0) 56%);
}
.ui-title-logo { position: relative; grid-column: 1; grid-row: 1; width: 100%; min-height: 0; max-height: 100%; aspect-ratio: 2 / 1; align-self: stretch; }
.ui-title-logo .ui-logo { position: absolute; inset: 0; }
.ui-title-menu {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: calc(9 * var(--u));
  width: min(100%, max(280px, calc(360 * var(--u))));
  pointer-events: auto;
}
.ui-title-menu .ui-btn { padding-left: calc(18 * var(--u)); }
.ui-title-menu .ui-btn-primary { min-height: calc(var(--btn) + 8 * var(--u)); }
.ui-title-menu .ui-btn-primary .ui-btn-label { font-size: calc(var(--t-l) * 1.2); }
.ui-title-foot {
  position: relative;
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 700 var(--t-s)/1.2 var(--rr-body);
  text-shadow: 0 2px 0 var(--rr-outline), 0 0 6px rgba(27, 18, 48, .9);
  opacity: .92;
}
.ui-title-foot .ui-icon { color: var(--rr-sun); }
.ui-screen[data-screen="title"] .ui-hints { position: absolute; right: var(--pad-r); bottom: var(--pad-b); }

/* ── Map ───────────────────────────────────────────────────────────────────────────────────── */

.ui-map-panel { width: min(100%, calc(1100 * var(--u))); height: min(100%, calc(650 * var(--u))); }
.ui-map-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(330 * var(--u))); gap: calc(14 * var(--u)); }

.ui-map-world {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 3px solid var(--rr-outline);
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.ui-map-art { position: absolute; inset: 0; box-shadow: inset 0 -60px 70px -40px rgba(27, 18, 48, .5), inset 0 0 0 3px rgba(27, 18, 48, .18); }
[data-theme="jungle"] > .ui-map-art {
  background:
    radial-gradient(55% 44% at 16% 106%, #6BC043 99%, transparent 100%),
    radial-gradient(62% 50% at 84% 110%, #55A838 99%, transparent 100%),
    radial-gradient(54% 46% at 52% 104%, #3F8F45 99%, transparent 100%),
    radial-gradient(36% 58% at 4% 62%, #1F5A3A 99%, transparent 100%),
    radial-gradient(38% 62% at 99% 56%, #23643F 99%, transparent 100%),
    radial-gradient(26% 20% at 66% 8%, rgba(255, 255, 255, .5), transparent 100%),
    linear-gradient(180deg, #2F7FD1 0%, #8FD0E6 46%, #C9EDDC 72%);
}
[data-theme="forge"] > .ui-map-art {
  background:
    radial-gradient(40% 46% at 10% 106%, #2B2630 99%, transparent 100%),
    radial-gradient(46% 52% at 92% 110%, #3A2A2E 99%, transparent 100%),
    radial-gradient(70% 38% at 50% 116%, #FFB02E 0%, #FF5A14 45%, rgba(184, 20, 0, 0) 100%),
    radial-gradient(16% 26% at 28% 10%, rgba(53, 224, 255, .5), transparent 100%),
    radial-gradient(14% 24% at 78% 20%, rgba(192, 76, 255, .5), transparent 100%),
    linear-gradient(180deg, #0B0810 0%, #2A1420 58%, #6A2412 100%);
}
[data-theme="sky"] > .ui-map-art {
  background:
    radial-gradient(36% 26% at 20% 104%, #FFF6EA 99%, transparent 100%),
    radial-gradient(44% 30% at 60% 110%, #FFE2C4 99%, transparent 100%),
    radial-gradient(34% 26% at 94% 102%, #FFF6EA 99%, transparent 100%),
    radial-gradient(20% 12% at 74% 30%, rgba(255, 255, 255, .75) 99%, transparent 100%),
    radial-gradient(26% 14% at 22% 20%, rgba(255, 255, 255, .6) 99%, transparent 100%),
    radial-gradient(24% 36% at 86% 12%, #FFE9A8 0%, rgba(255, 201, 90, 0) 100%),
    linear-gradient(180deg, #2E5FA8 0%, #86AEE4 48%, #FFD9A0 90%);
}

.ui-trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-trail path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-trail-bed { stroke: rgba(27, 18, 48, .6); stroke-width: 18px; }
.ui-trail-done { stroke: var(--rr-sun); stroke-width: 8px; }
.ui-trail-todo { stroke: var(--rr-cream); stroke-width: 6px; stroke-dasharray: 1 15; }

.ui-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: calc(5 * var(--u));
  width: calc(150 * var(--u));
  margin: calc(-34 * var(--u)) 0 0 calc(-75 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--rr-cream);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-node-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: max(52px, calc(68 * var(--u)));
  height: max(52px, calc(68 * var(--u)));
  border: 3px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--rr-cream);
  color: var(--rr-outline);
  box-shadow: 0 6px 0 var(--rr-outline), inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -5px 0 rgba(58, 29, 11, .14);
  transition: transform .14s var(--pop);
}
.ui-node-id { font: 900 calc(22 * var(--u))/1 var(--rr-display); letter-spacing: -.01em; }
.ui-node-cleared .ui-node-disc { background: var(--rr-sun); box-shadow: 0 6px 0 var(--rr-outline), inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(255, 122, 26, .5); }
.ui-node-locked .ui-node-disc { background: #8E84A6; color: #3A2F52; }
.ui-node-locked .ui-node-disc .ui-icon { color: #D9D0EA; }
.ui-node.ui-on .ui-node-disc { transform: translateY(-4px) scale(1.1); }
.ui-node.ui-focus .ui-node-disc { box-shadow: 0 6px 0 var(--rr-outline), 0 0 0 4px var(--rr-cream), 0 6px 0 4px var(--rr-cream); }
.ui-node-open .ui-node-disc { animation: ui-node-pulse 1.4s ease-in-out infinite; }
@keyframes ui-node-pulse { 50% { box-shadow: 0 6px 0 var(--rr-outline), 0 0 0 7px rgba(255, 197, 49, .55); } }
.ui-node-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--rr-teal);
  color: var(--rr-cream);
}
.ui-node-badge-a { top: -8px; right: -9px; background: var(--rr-scarf); }
.ui-node-badge-b { bottom: -6px; right: -11px; }
.ui-node-pips { display: flex; gap: 3px; padding: 3px 7px; border: 2.5px solid var(--rr-outline); border-radius: 99px; background: var(--rr-ink); }
.ui-node-locked .ui-node-pips { visibility: hidden; }
.ui-node-name {
  max-width: 100%;
  font: 800 var(--t-s)/1.15 var(--rr-body);
  text-align: center;
  text-shadow: 0 2px 0 var(--rr-outline), 1px 0 0 var(--rr-outline), -1px 0 0 var(--rr-outline), 0 -1px 0 var(--rr-outline), 0 0 8px rgba(27, 18, 48, .9);
}
.ui-node-here { position: absolute; left: 50%; top: calc(-38 * var(--u)); margin-left: -13px; color: #C98A3C; animation: ui-node-hop .7s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
@keyframes ui-node-hop { to { transform: translateY(-9px) rotate(40deg); } }

.ui-pip { display: inline-grid; place-items: center; }
.ui-pip .ui-icon { stroke-width: 2; }
.ui-trophy-none { color: #54477A; }
.ui-trophy-keystone { color: var(--rr-keystone); }
.ui-trophy-idol { color: var(--rr-idol); }
.ui-trophy-bronze { color: var(--rr-bronze); }
.ui-trophy-silver { color: var(--rr-silver); }
.ui-trophy-gold { color: var(--rr-gold); }

.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(20 * var(--u));
  background: var(--ink-2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 244, 220, .1);
}
.ui-card-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 244, 220, .35) transparent;
}
.ui-card-title { margin: 0; font: 900 calc(26 * var(--u))/1.08 var(--rr-display); text-transform: uppercase; color: var(--rr-cream); }
.ui-card-id { color: var(--rr-sun); }
.ui-card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px calc(14 * var(--u)); }
.ui-stat { display: inline-flex; align-items: center; gap: 6px; font: 800 var(--t)/1.2 var(--rr-body); }
.ui-stat .ui-icon { color: var(--rr-sun); }
.ui-grade-tag {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 9px;
  background: var(--rr-cream);
  color: var(--rr-outline);
  box-shadow: 0 3px 0 var(--rr-outline);
  font: 900 18px/1 var(--rr-display);
  transform: rotate(4deg);
}
[data-grade="S"] { --grade: var(--rr-sun); }
[data-grade="A"] { --grade: var(--rr-leaf); }
[data-grade="B"] { --grade: var(--rr-teal); }
[data-grade="C"] { --grade: #F2B880; }
[data-grade="D"] { --grade: #B9AFC9; }
.ui-grade-tag { background: var(--grade, var(--rr-cream)); }

.ui-card-trophies { display: grid; gap: calc(6 * var(--u)); }
.ui-trophy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(10 * var(--u)); }
.ui-trophy-disc {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: max(44px, calc(50 * var(--u)));
  height: max(44px, calc(50 * var(--u)));
  border: 3px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--rr-ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 3px 0 rgba(0, 0, 0, .35);
}
.ui-trophy-none .ui-trophy-disc { border-style: dashed; border-color: #54477A; box-shadow: none; }
.ui-trophy-none .ui-trophy-disc .ui-icon { stroke: #54477A; fill: none; stroke-width: 1.6; }
.ui-trophy-none .ui-trophy-disc .ui-icon * { fill: none; stroke: #54477A; }
.ui-trophy-name { align-self: end; font: 900 var(--t)/1.1 var(--rr-display); text-transform: uppercase; color: var(--rr-cream); }
.ui-trophy-note { align-self: start; font: 600 var(--t-s)/1.2 var(--rr-body); color: var(--rr-cream); opacity: .8; }
.ui-card-actions { flex: none; flex-direction: column; flex-wrap: nowrap; gap: calc(8 * var(--u)); padding-top: calc(4 * var(--u)); }
.ui-card-actions .ui-btn { justify-content: flex-start; }
.ui-card .ui-kicker { padding-right: 40px; }

/* ── Rush hub ──────────────────────────────────────────────────────────────────────────────── */

.ui-rush-panel { width: min(100%, calc(860 * var(--u))); }
.ui-rushcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); min-height: 0; overflow-y: auto; padding: 4px 4px 10px; }
.ui-rushcard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(22 * var(--u));
  background: var(--rr-cream);
  color: var(--rr-outline);
  box-shadow: 0 6px 0 var(--rr-outline), inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -5px 0 rgba(58, 29, 11, .1);
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-rushcard.ui-focus { box-shadow: 0 6px 0 var(--rr-outline), 0 0 0 4px var(--rr-cream), 0 6px 0 4px var(--rr-cream); background: #FFFBEF; }
.ui-rushcard:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--rr-outline); }
.ui-rushcard-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  min-width: 56px;
  min-height: 56px;
  border: 3px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--rr-sun);
  color: var(--rr-cream);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(255, 122, 26, .5);
}
.ui-rushcard.ui-tone-teal .ui-rushcard-icon { background: var(--rr-teal); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 0, 0, .14); }
.ui-rushcard-title { align-self: end; font: 900 calc(28 * var(--u))/1.05 var(--rr-display); text-transform: uppercase; }
.ui-rushcard-text { grid-column: 2; font: 600 var(--t)/1.35 var(--rr-body); }
.ui-rushcard-stat { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: calc(6 * var(--u)); padding: 8px 12px; border: 2.5px solid var(--rr-outline); border-radius: 12px; background: var(--rr-ink); color: var(--rr-cream); font: 800 var(--t)/1.2 var(--rr-body); }
.ui-rushcard-stat .ui-icon { color: var(--rr-sun); }
.ui-rushcard-go { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font: 900 var(--t-l)/1 var(--rr-display); text-transform: uppercase; color: var(--rr-orange); }
.ui-rushcard-go .ui-icon { color: var(--rr-orange); }

/* ── Level intro ───────────────────────────────────────────────────────────────────────────── */

.ui-screen[data-screen="intro"] {
  background:
    radial-gradient(46% 42% at 50% 44%, rgba(255, 197, 49, .16), transparent 72%),
    radial-gradient(120% 70% at 50% 118%, rgba(255, 197, 49, .22), rgba(255, 122, 26, .08) 45%, transparent 70%),
    var(--rr-ink);
}
.ui-intro-card { display: grid; justify-items: center; gap: calc(14 * var(--u)); width: min(100%, calc(760 * var(--u))); text-align: center; }
/* the postcard: the world's painting in a carved frame, tipped a little */
.ui-intro-art {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  width: 100%;
  height: clamp(150px, calc(280 * var(--u)), 36vh);
  padding: 0 calc(22 * var(--u)) calc(34 * var(--u));
  border: 4px solid var(--rr-outline);
  border-radius: calc(26 * var(--u));
  background: var(--ink-3);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .4), 0 0 0 4px var(--rr-cream), 0 8px 0 4px var(--rr-outline);
  overflow: hidden;
  transform: rotate(-1.2deg);
  text-align: left;
}
.ui-intro-art > .ui-map-art { box-shadow: inset 0 calc(-130 * var(--u)) calc(90 * var(--u)) calc(-50 * var(--u)) rgba(27, 18, 48, .78); }
[data-theme="none"] > .ui-map-art {
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(255, 197, 49, .35), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(25, 195, 201, .3), transparent 70%),
    var(--ink-3);
}
.ui-intro-kicker {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(14 * var(--u));
  padding: 5px 14px 6px;
  border: 3px solid var(--rr-outline);
  border-radius: 99px;
  background: var(--rr-cream);
  color: var(--rr-outline);
  box-shadow: 0 3px 0 var(--rr-outline);
  font-size: max(14px, calc(16 * var(--u)));
  opacity: 1;
}
.ui-intro-title {
  position: relative;
  margin: 0;
  font: 900 min(calc(64 * var(--u)), 11vw)/1 var(--rr-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rr-sun);
  -webkit-text-stroke: 7px var(--rr-outline);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--rr-outline);
}
.ui-intro-lines { display: grid; gap: calc(8 * var(--u)); margin: calc(2 * var(--u)) 0 0; padding: 0; list-style: none; justify-items: start; }
.ui-intro-lines li { display: flex; align-items: center; gap: calc(12 * var(--u)); font: 700 max(15px, calc(19 * var(--u)))/1.25 var(--rr-body); text-align: left; }
.ui-intro-foot { margin: 0; font: 700 var(--t)/1.3 var(--rr-body); opacity: .85; }
/* Ruckus rolls along the bottom edge of the picture while the level is built */
.ui-intro-roll { position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(6 * var(--u)); height: 36px; }
.ui-intro-track { position: absolute; left: 0; right: 0; bottom: 3px; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 244, 220, .5) 0 10px, transparent 10px 20px); }
.ui-intro-ball { position: absolute; left: 0; bottom: 6px; display: block; width: 100%; color: #C98A3C; animation: ui-intro-roll 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.ui-intro-ball .ui-icon { display: block; width: 28px; height: 28px; animation: ui-spin 0.6s linear infinite; }
@keyframes ui-intro-roll { to { transform: translateX(calc(100% - 28px)); } }

/* ── Pause ─────────────────────────────────────────────────────────────────────────────────── */

.ui-pause-panel { width: min(100%, calc(540 * var(--u))); align-items: stretch; }
.ui-pause-title { text-align: center; margin-bottom: calc(12 * var(--u)); font-size: calc(44 * var(--u)); }
.ui-pause-stats { justify-content: center; margin-bottom: calc(10 * var(--u)); }
.ui-pause-actions { flex-direction: column; flex-wrap: nowrap; gap: calc(9 * var(--u)); margin-top: calc(12 * var(--u)); }
.ui-pause-actions .ui-btn { justify-content: flex-start; }

.ui-stretches { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-stretch { display: flex; align-items: center; gap: 6px; min-height: 26px; font: 600 var(--t-s)/1.2 var(--rr-body); }
.ui-stretch-dots { flex: 1 1 0; min-width: 4px; height: 0; border-bottom: 2px dotted rgba(255, 244, 220, .28); }
.ui-stretch b, .ui-stretch .ui-icon { flex: none; }
.ui-stretch b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ui-stretch .ui-icon { color: var(--rr-leaf); }
.ui-stretch.ui-missed { color: var(--rr-sun); }
.ui-stretch.ui-missed .ui-icon { color: var(--rr-orange); }
.ui-stretch.ui-open { opacity: .78; }
.ui-stretch-gap { flex: none; width: 16px; }

/* ── Results ───────────────────────────────────────────────────────────────────────────────── */

.ui-results-panel { width: min(100%, calc(900 * var(--u))); }
.ui-results-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; margin-bottom: calc(10 * var(--u)); flex: none; }
.ui-results-head .ui-kicker { grid-column: 1 / -1; }
.ui-results-title { font-size: calc(46 * var(--u)); }
.ui-enter .ui-results-title { animation: ui-stamp .4s cubic-bezier(.2, .9, .3, 1) both; animation-delay: .08s; transform-origin: 20% 60%; }
.ui-results-bank { align-self: center; }
.ui-results-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(290 * var(--u))); grid-template-rows: minmax(0, auto); gap: calc(18 * var(--u)); align-items: start; }
.ui-results-main { display: grid; align-content: start; gap: calc(10 * var(--u)); min-width: 0; max-height: 100%; }

.ui-tally { display: grid; gap: calc(5 * var(--u)); }
.ui-tally-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(10 * var(--u)); min-height: calc(40 * var(--u)); font: 900 calc(24 * var(--u))/1.1 var(--rr-display); }
.ui-tally-row > .ui-icon { color: var(--rr-sun); }
.ui-tally-crates > .ui-icon { color: #D9A05A; }
.ui-tally-run > .ui-icon { color: var(--rr-cream); }
.ui-tally-label { min-width: calc(108 * var(--u)); font: 800 var(--t)/1 var(--rr-body); letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.ui-tally-value { color: var(--rr-sun); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--rr-outline); }
.ui-tally-of { font: 800 var(--t-l)/1 var(--rr-body); opacity: .8; font-variant-numeric: tabular-nums; }
.ui-tally-text { font: 800 max(15px, calc(19 * var(--u)))/1.2 var(--rr-body); font-variant-numeric: tabular-nums; }
.ui-tally-row.ui-quiet { min-height: 0; padding-left: calc(38 * var(--u)); }
.ui-tally-row.ui-quiet .ui-tally-text { font: 700 var(--t)/1.2 var(--rr-body); color: var(--rr-sun); }
.ui-meter { flex: 1 1 calc(80 * var(--u)); max-width: calc(170 * var(--u)); height: 12px; margin-left: auto; border: 2.5px solid var(--rr-outline); border-radius: 7px; background: var(--rr-ink); overflow: hidden; }
.ui-meter-fill { display: block; height: 100%; background: linear-gradient(var(--rr-sun), var(--rr-orange)); transform: scaleX(0); transform-origin: left center; }
.ui-meter.ui-full .ui-meter-fill { background: var(--rr-keystone); }
.ui-tally-stretches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(22 * var(--u)); margin: 0 0 calc(4 * var(--u)) calc(38 * var(--u)); }

.ui-results-side { display: grid; justify-items: center; gap: calc(12 * var(--u)); min-width: 0; padding: calc(12 * var(--u)); border: 3px solid var(--rr-outline); border-radius: calc(20 * var(--u)); background: var(--ink-2); box-shadow: inset 0 2px 0 rgba(255, 244, 220, .1); }
.ui-grade {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(118 * var(--u));
  height: calc(118 * var(--u));
  min-width: 84px;
  min-height: 84px;
  border: 4px solid var(--rr-outline);
  border-radius: 50%;
  background: var(--grade, var(--rr-cream));
  box-shadow: 0 6px 0 var(--rr-outline), inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 -7px 0 rgba(58, 29, 11, .16);
}
/* rays turning slowly behind the stamp: brighter the better the grade */
.ui-grade::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 49, .34) 0 10deg, transparent 10deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, transparent 100%);
  opacity: 0;
  z-index: -1;
}
.ui-grade.ui-stamp::before { opacity: var(--rays, .5); animation: ui-spin 14s linear infinite; }
.ui-grade { z-index: 0; }
[data-grade="S"] { --rays: 1; }
[data-grade="A"] { --rays: .7; }
[data-grade="C"], [data-grade="D"] { --rays: 0; }
.ui-grade-label { position: absolute; top: calc(-11 * var(--u)); padding: 2px 10px 3px; border: 2.5px solid var(--rr-outline); border-radius: 99px; background: var(--rr-ink); font: 900 var(--t-s)/1 var(--rr-display); text-transform: uppercase; letter-spacing: .06em; }
.ui-grade-letter { font: 900 calc(78 * var(--u))/1 var(--rr-display); color: var(--rr-cream); -webkit-text-stroke: 6px var(--rr-outline); paint-order: stroke fill; text-shadow: 0 4px 0 var(--rr-outline); }

.ui-slots { display: flex; justify-content: center; gap: calc(10 * var(--u)); width: 100%; }
.ui-slots .ui-trophy { grid-template-columns: 1fr; justify-items: center; row-gap: 3px; flex: 1 1 0; min-width: 0; text-align: center; }
.ui-slots .ui-trophy-disc { grid-row: auto; width: max(52px, calc(64 * var(--u))); height: max(52px, calc(64 * var(--u))); }
.ui-slots .ui-trophy-name { font-size: var(--t-s); }
.ui-slots .ui-trophy.ui-fresh .ui-trophy-disc { box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 0 3px currentColor; }
.ui-trophy-disc { position: relative; }
.ui-new { position: absolute; top: -11px; right: -18px; padding: 2px 6px 3px; border: 2.5px solid var(--rr-outline); border-radius: 8px; background: var(--rr-leaf); color: var(--rr-outline); font: 900 14px/1 var(--rr-display); text-transform: uppercase; transform: rotate(9deg); opacity: 0; }
.ui-fresh .ui-new { opacity: 1; }

.ui-results-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)) calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.ui-goal, .ui-unlock {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: 6px 14px 7px 10px;
  border: 3px solid var(--rr-outline);
  border-radius: calc(14 * var(--u));
  background: var(--ink-3);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  font: 800 var(--t)/1.25 var(--rr-body);
}
.ui-goal .ui-icon, .ui-unlock .ui-icon { color: var(--rr-sun); }
.ui-goal-hot { background: var(--rr-sun); color: var(--rr-outline); box-shadow: 0 4px 0 var(--rr-outline); }
.ui-goal-hot .ui-icon { color: var(--rr-cream); }
.ui-goal-hot.ui-show { animation: ui-pop .3s var(--pop) both, ui-nudge 1.2s ease-in-out .5s infinite; }
@keyframes ui-nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }
.ui-unlock { background: var(--rr-leaf); color: var(--rr-outline); box-shadow: 0 4px 0 var(--rr-outline); }
.ui-unlock .ui-icon { color: var(--rr-cream); }
.ui-results-actions { margin-top: calc(14 * var(--u)); }

/* The Time Trial's Sundial bar */
.ui-sunbar { padding: calc(30 * var(--u)) calc(14 * var(--u)) 0; }
.ui-sunbar-track { position: relative; height: 18px; border: 3px solid var(--rr-outline); border-radius: 10px; background: var(--rr-ink); }
.ui-sunbar-fill { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, var(--rr-orange), var(--rr-sun)); transform: scaleX(0); transform-origin: left center; }
.ui-sunbar-mark { position: absolute; top: 100%; display: grid; justify-items: center; gap: 2px; width: 0; padding-top: 6px; white-space: nowrap; }
.ui-sunbar-mark::before { content: ""; position: absolute; top: -21px; width: 4px; height: 21px; border-radius: 2px; background: var(--rr-cream); outline: 2px solid var(--rr-outline); }
.ui-sunbar-mark small { font: 800 var(--t-s)/1.1 var(--rr-body); color: var(--rr-cream); opacity: .7; font-variant-numeric: tabular-nums; }
.ui-sunbar-mark.ui-won small { opacity: 1; }
.ui-sunbar-you { position: absolute; left: 0; top: -31px; margin-left: -13px; color: #C98A3C; }
.ui-sunbar-text { margin: calc(52 * var(--u)) 0 0; min-height: 1.3em; text-align: center; font: 900 calc(22 * var(--u))/1.2 var(--rr-display); text-transform: uppercase; color: var(--rr-sun); }
.ui-results[data-mode="trial"] .ui-tally-time .ui-tally-text { font: 900 calc(40 * var(--u))/1 var(--rr-display); color: var(--rr-sun); text-shadow: 0 3px 0 var(--rr-outline); }
.ui-results[data-mode="trial"] .ui-results-body { grid-template-columns: minmax(0, 1fr) minmax(0, calc(180 * var(--u))); align-items: center; }

/* ── Run over ──────────────────────────────────────────────────────────────────────────────── */

.ui-over-panel { width: min(100%, calc(520 * var(--u))); text-align: center; align-items: stretch; }
.ui-over-title { font-size: calc(50 * var(--u)); color: var(--rr-scarf); margin-bottom: calc(10 * var(--u)); }
.ui-over .ui-scroll { display: grid; justify-items: center; gap: calc(8 * var(--u)); }
.ui-over-run { display: flex; gap: calc(8 * var(--u)); margin: 0; }
.ui-over-scoreline { display: grid; margin: calc(4 * var(--u)) 0 0; font: 800 var(--t)/1 var(--rr-body); letter-spacing: .08em; text-transform: uppercase; }
.ui-over-scoreline span { opacity: .8; }
.ui-over-score { font: 900 calc(70 * var(--u))/1.05 var(--rr-display); color: var(--rr-sun); -webkit-text-stroke: 6px var(--rr-outline); paint-order: stroke fill; text-shadow: 0 4px 0 var(--rr-outline); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ui-over-verdict { margin: 0; font-size: var(--t-l); }
.ui-over-verdict.ui-tag { padding: 6px 14px 7px 10px; font-size: var(--t-l); }
.ui-over-bank { display: flex; align-items: center; gap: 8px; margin: calc(4 * var(--u)) 0 0; font: 700 var(--t)/1.3 var(--rr-body); }
.ui-over-bank .ui-icon { color: var(--rr-sun); }
.ui-over-actions { margin-top: calc(16 * var(--u)); }

/* ── Wardrobe ──────────────────────────────────────────────────────────────────────────────── */

.ui-screen[data-screen="wardrobe"] { justify-items: end; }
.ui-wardrobe-panel { width: min(100%, max(46%, calc(500 * var(--u)))); height: min(100%, calc(690 * var(--u))); }
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(104px, calc(126 * var(--u))), 1fr)); gap: calc(10 * var(--u)); padding-bottom: 4px; }
.ui-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  min-width: 0;
  margin: 0 0 4px;
  padding: calc(8 * var(--u)) 6px calc(9 * var(--u));
  border: 3px solid var(--rr-outline);
  border-radius: calc(16 * var(--u));
  background: var(--ink-3);
  color: var(--rr-cream);
  box-shadow: 0 4px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 244, 220, .12);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-swatch { display: block; width: calc(54 * var(--u)); height: calc(54 * var(--u)); min-width: 46px; min-height: 46px; overflow: visible; }
.ui-tile-art { position: relative; }
.ui-tile-lock { position: absolute; right: -10px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px; border: 2.5px solid var(--rr-outline); border-radius: 50%; background: var(--rr-ink); color: #D9D0EA; }
.ui-tile-name { font: 900 var(--t-s)/1.1 var(--rr-display); text-transform: uppercase; text-align: center; }
.ui-tile-note { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--t-s)/1.2 var(--rr-body); text-align: center; opacity: .9; }
.ui-tile-note .ui-icon { color: var(--rr-sun); flex: none; }
.ui-tile-worn { background: #2E6B4E; }
.ui-tile-worn .ui-tile-note .ui-icon { color: var(--rr-leaf); }
.ui-tile-locked .ui-swatch, .ui-tile-short .ui-swatch { filter: saturate(.55) brightness(.8); }
.ui-tile-locked .ui-tile-note .ui-icon { color: #D9D0EA; }
.ui-tile-short .ui-tile-note { color: #FFB6A6; }
.ui-tile.ui-on { background: var(--rr-cream); color: var(--rr-outline); box-shadow: 0 4px 0 var(--rr-outline), inset 0 2px 0 rgba(255, 255, 255, .7); }
.ui-tile.ui-on .ui-swatch { filter: none; }
.ui-tile.ui-on .ui-tile-note .ui-icon { color: var(--rr-orange); }
.ui-tile.ui-on.ui-tile-short .ui-tile-note { color: #B5321F; }
.ui-tile.ui-focus { box-shadow: 0 4px 0 var(--rr-outline), 0 0 0 3px var(--rr-cream), 0 4px 0 3px var(--rr-cream); }
.ui-wardrobe-foot { display: flex; align-items: center; gap: calc(12 * var(--u)); flex: none; margin-top: calc(10 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 3px solid var(--rr-outline); }
.ui-wardrobe-pick { display: grid; min-width: 0; margin-right: auto; }
.ui-wardrobe-pick b { font: 900 max(15px, calc(20 * var(--u)))/1.1 var(--rr-display); text-transform: uppercase; }
.ui-wardrobe-pick span { font: 600 var(--t-s)/1.25 var(--rr-body); opacity: .9; }
.ui-wardrobe-pick .ui-warn { color: #FFB6A6; opacity: 1; }
.ui-wardrobe-foot .ui-btn { flex: none; min-width: calc(140 * var(--u)); justify-content: center; }

/* ── Options ───────────────────────────────────────────────────────────────────────────────── */

.ui-options-panel { width: min(100%, calc(860 * var(--u))); height: min(100%, calc(600 * var(--u))); }
.ui-options-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: calc(210 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); }
.ui-options-tabs { flex-direction: column; margin: 0; padding: 4px 4px 0; }
.ui-options-tabs .ui-tab { flex: none; justify-content: flex-start; padding-left: calc(16 * var(--u)); }
.ui-options-main .ui-scroll { margin: 0; padding: 4px 6px 8px; border: 3px solid var(--rr-outline); border-radius: calc(18 * var(--u)); background: rgba(27, 18, 48, .5); }
.ui-options-section { display: none; gap: 2px; padding: calc(4 * var(--u)); }
.ui-options-body[data-section="graphics"] [data-id="graphics"],
.ui-options-body[data-section="sound"] [data-id="sound"],
.ui-options-body[data-section="controls"] [data-id="controls"],
.ui-options-body[data-section="comfort"] [data-id="comfort"],
.ui-options-body[data-section="data"] [data-id="data"] { display: grid; }
.ui-options-heading { display: none; align-items: center; gap: 8px; margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); font: 900 var(--t-l)/1.1 var(--rr-display); text-transform: uppercase; color: var(--rr-sun); }
.ui-options-heading .ui-icon { color: var(--rr-sun); }
.ui-options-actions { margin-top: calc(12 * var(--u)); }

.ui-opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 4px calc(14 * var(--u));
  min-height: max(52px, calc(58 * var(--u)));
  padding: 4px calc(10 * var(--u));
  border: 3px solid transparent;
  border-radius: calc(14 * var(--u));
  cursor: pointer;
}
.ui-opt.ui-focus { border-color: var(--rr-cream); background: rgba(255, 244, 220, .10); }
.ui-opt-label { display: grid; min-width: 0; font: 800 var(--t-l)/1.2 var(--rr-body); }
.ui-opt-label small { font: 600 var(--t-s)/1.25 var(--rr-body); opacity: .8; }
.ui-opt-toggle { grid-template-columns: minmax(0, 1fr) auto; }
.ui-opt-button { grid-template-columns: 1fr; cursor: default; }
.ui-opt-button .ui-btn { justify-self: start; max-width: 100%; }
.ui-opt-button .ui-btn-sub { white-space: normal; }

.ui-segs { display: grid; grid-template-columns: repeat(var(--n), minmax(max-content, 1fr)); border: 3px solid var(--rr-outline); border-radius: calc(14 * var(--u)); background: var(--rr-ink); overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ui-seg { display: grid; place-items: center; min-height: max(40px, calc(42 * var(--u))); padding: 2px 5px; white-space: nowrap; font: 800 var(--t-s)/1.1 var(--rr-body); text-align: center; color: var(--rr-cream); }
.ui-seg + .ui-seg { border-left: 2px solid var(--rr-outline); }
.ui-seg.ui-on { background: var(--rr-sun); color: var(--rr-outline); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(255, 122, 26, .45); }

.ui-switch { position: relative; display: flex; align-items: center; width: max(76px, calc(84 * var(--u))); height: max(38px, calc(40 * var(--u))); border: 3px solid var(--rr-outline); border-radius: 99px; background: var(--rr-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transition: background-color .12s linear; }
.ui-switch-text { width: 100%; padding: 0 10px 0 0; text-align: right; font: 800 var(--t-s)/1 var(--rr-body); }
.ui-switch-knob { position: absolute; left: 3px; top: 3px; bottom: 3px; aspect-ratio: 1; border: 2.5px solid var(--rr-outline); border-radius: 50%; background: var(--rr-cream); box-shadow: inset 0 -3px 0 rgba(58, 29, 11, .16); transition: transform .14s var(--pop); }
.ui-opt.ui-on .ui-switch { background: var(--rr-leaf); }
.ui-opt.ui-on .ui-switch-text { padding: 0 0 0 10px; text-align: left; color: var(--rr-outline); }
.ui-opt.ui-on .ui-switch-knob { transform: translateX(max(38px, calc(44 * var(--u)))); }

.ui-slider { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: 44px; touch-action: none; }
.ui-slider-track { position: relative; flex: 1 1 auto; height: 16px; border: 3px solid var(--rr-outline); border-radius: 9px; background: var(--rr-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ui-slider-fill { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(var(--rr-sun), var(--rr-orange)); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.ui-slider-thumb { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--rr-outline); border-radius: 50%; background: var(--rr-cream); box-shadow: 0 3px 0 var(--rr-outline), inset 0 -3px 0 rgba(58, 29, 11, .16); }
.ui-opt.ui-drag .ui-slider-thumb, .ui-opt.ui-focus .ui-slider-thumb { background: var(--rr-sun); }
.ui-slider-out { flex: none; width: 3.2em; text-align: right; font: 800 var(--t)/1 var(--rr-body); font-variant-numeric: tabular-nums; }

/* "Reset progress?" */
.ui-dialog-panel { width: min(100%, calc(480 * var(--u))); align-items: center; text-align: center; }
.ui-dialog-icon { color: var(--rr-scarf); margin-bottom: calc(4 * var(--u)); }
.ui-dialog-title { color: var(--rr-cream); font-size: calc(34 * var(--u)); }
.ui-dialog-text { margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); font: 600 var(--t)/1.45 var(--rr-body); }
.ui-dialog-actions { width: 100%; }
.ui-hold { overflow: hidden; }
.ui-hold-fill { position: absolute; inset: 0; background: rgba(27, 18, 48, .45); transform: scaleX(0); transform-origin: left center; }
.ui-hold > :not(.ui-hold-fill) { position: relative; }
.ui-hold.ui-holding { animation: ui-shiver .12s linear infinite; }
@keyframes ui-shiver { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }

/* ── A phone held upright ──────────────────────────────────────────────────────────────────── */

.ui-portrait .ui-screen[data-screen="title"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) minmax(0, 1fr) auto auto;
  justify-items: center;
  padding-left: var(--pad-l);
  padding-top: max(3%, var(--pad-t));
}
.ui-portrait .ui-title-shade { background: linear-gradient(180deg, rgba(27, 18, 48, .72) 0%, rgba(27, 18, 48, .1) 36%, rgba(27, 18, 48, 0) 52%, rgba(27, 18, 48, .7) 84%); }
.ui-portrait .ui-title-logo { width: min(92%, 520px); }
.ui-portrait .ui-title-menu { grid-row: 3; width: min(100%, 400px); }
.ui-portrait .ui-title-foot { grid-row: 4; }

.ui-portrait .ui-panel { padding: 14px 14px 16px; border-radius: 22px; }
.ui-portrait .ui-title { font-size: max(26px, calc(34 * var(--u))); }
.ui-portrait .ui-head { gap: 10px; margin-bottom: 10px; }
.ui-portrait .ui-head-text { flex: 1 1 0; }
.ui-portrait .ui-chip-label { display: none; }
.ui-portrait .ui-tab { font-size: 14px; padding: 4px; }
/* what scrolls fades out at its lower edge, so it is plain there is more */
.ui-portrait .ui-scroll, .ui-short .ui-scroll, .ui-portrait .ui-card-body, .ui-short .ui-card-body {
  padding-bottom: 14px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
}

/* Map: chips, tabs, the world, then the card with its two buttons along its bottom edge. */
.ui-portrait .ui-map-panel { width: 100%; height: 100%; }
.ui-portrait .ui-map .ui-head { flex-wrap: wrap; }
.ui-portrait .ui-map .ui-head-right { flex-basis: 100%; }
.ui-portrait .ui-map .ui-chips { flex-wrap: nowrap; gap: 5px; }
.ui-portrait .ui-map .ui-chip { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 6px; }
.ui-portrait .ui-map-tabs { gap: 6px; margin-bottom: 10px; }
.ui-portrait .ui-map-tabs .ui-tab { padding: 3px 4px; gap: 2px 5px; font: 800 14px/1.1 var(--rr-body); letter-spacing: 0; text-transform: none; }
.ui-portrait .ui-map-tabs .ui-tab-note { display: none; }
.ui-portrait .ui-map-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 30%) minmax(0, 1fr); gap: 10px; }
.ui-portrait .ui-node { width: 74px; margin: -26px 0 0 -37px; }
.ui-portrait .ui-node-name, .ui-short .ui-node-name { display: none; }
.ui-portrait .ui-card { padding: 12px 12px 10px; }
.ui-portrait .ui-card-body { gap: 8px; }
.ui-portrait .ui-card-title { font-size: 22px; }
.ui-portrait .ui-card-actions, .ui-short .ui-card-actions { flex-direction: row; align-items: stretch; }
.ui-portrait .ui-card-actions .ui-btn, .ui-short .ui-card-actions .ui-btn { flex: 1 1 0; min-width: 0; padding: 2px 10px 3px; }
.ui-portrait .ui-card-actions .ui-btn + .ui-btn, .ui-short .ui-card-actions .ui-btn + .ui-btn { flex-grow: 1.5; }
.ui-portrait .ui-card-actions .ui-btn-sub, .ui-short .ui-card-actions .ui-btn-sub { white-space: normal; }

.ui-portrait .ui-intro-art { height: clamp(170px, 30vh, 260px); padding: 0 14px 34px; border-radius: 22px; }
.ui-portrait .ui-intro-title { font-size: min(40px, 10.5vw); -webkit-text-stroke-width: 6px; }
.ui-portrait .ui-rushcards { grid-template-columns: minmax(0, 1fr); }
.ui-portrait .ui-rushcard-title { font-size: 24px; }

/* Results: one column; the goal lines and one row of buttons along the bottom edge. */
.ui-portrait .ui-results-panel { width: 100%; }
.ui-portrait .ui-results-head { align-items: center; margin-bottom: 8px; }
.ui-portrait .ui-results-title { font-size: 30px; white-space: nowrap; }
.ui-portrait .ui-over-title, .ui-portrait .ui-pause-title { font-size: 36px; }
.ui-portrait .ui-results-body, .ui-portrait .ui-results[data-mode="trial"] .ui-results-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.ui-portrait .ui-tally { gap: 3px; }
.ui-portrait .ui-tally-row { min-height: 30px; gap: 2px 8px; font-size: 21px; }
.ui-portrait .ui-tally-row > .ui-icon { width: 24px; height: 24px; }
.ui-portrait .ui-tally-label { min-width: 84px; }
.ui-portrait .ui-tally-text { font-size: 16px; }
.ui-portrait .ui-tally-stretches { grid-template-columns: minmax(0, 1fr); margin: 0 0 2px 32px; }
.ui-portrait .ui-stretch { min-height: 22px; }
.ui-portrait .ui-tally-row.ui-quiet { padding-left: 32px; }
.ui-portrait .ui-results-side { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 12px 10px 8px; }
.ui-portrait .ui-results[data-mode="trial"] .ui-results-side { grid-template-columns: minmax(0, 1fr); }
.ui-portrait .ui-results-side .ui-badges { grid-column: 1 / -1; }
.ui-portrait .ui-grade { width: 76px; height: 76px; min-width: 0; min-height: 0; }
.ui-portrait .ui-grade-letter { font-size: 50px; -webkit-text-stroke-width: 5px; }
.ui-portrait .ui-slots .ui-trophy-disc { width: 48px; height: 48px; }
.ui-portrait .ui-results-foot { margin-top: 8px; gap: 6px 8px; }
.ui-portrait .ui-goal, .ui-portrait .ui-unlock { padding: 5px 12px 6px 8px; }
.ui-portrait .ui-results-actions, .ui-portrait .ui-over-actions { flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
.ui-portrait .ui-results-actions .ui-btn, .ui-portrait .ui-over-actions .ui-btn { flex: 1 1 auto; min-width: 0; padding: 2px 8px 3px; }
.ui-portrait .ui-results-actions .ui-btn-icon { display: none; }
.ui-portrait .ui-results[data-mode="trial"] .ui-tally-time .ui-tally-text { font-size: 34px; }
.ui-portrait .ui-sunbar { padding: 30px 22px 0; }
.ui-portrait .ui-sunbar-text { margin-top: 48px; font-size: 19px; }
.ui-portrait .ui-over-score { font-size: 56px; }

.ui-portrait .ui-screen[data-screen="wardrobe"] { align-items: end; }
.ui-portrait .ui-wardrobe-panel { width: 100%; height: min(100%, 58%); }
.ui-portrait .ui-options-panel { height: 100%; }
.ui-portrait .ui-opt { grid-template-columns: minmax(0, 1fr); padding: 6px 8px 8px; }
.ui-portrait .ui-opt-toggle { grid-template-columns: minmax(0, 1fr) auto; }
.ui-portrait .ui-seg { padding: 2px 3px; }
.ui-portrait .ui-dialog-actions { flex-direction: column; flex-wrap: nowrap; }
.ui-portrait .ui-dialog-actions .ui-btn { width: 100%; }

/* Options without tabs: one scrolling list with a heading per section. */
.ui-portrait .ui-options-tabs, .ui-short .ui-options-tabs { display: none; }
.ui-portrait .ui-options-main, .ui-short .ui-options-main { grid-template-columns: minmax(0, 1fr); }
.ui-portrait .ui-options-section, .ui-short .ui-options-section { display: grid; }
.ui-portrait .ui-options-heading, .ui-short .ui-options-heading { display: flex; }

/* ── A phone held sideways (under 480 px high) ─────────────────────────────────────────────── */

.ui-short .ui-screen { padding-top: max(8px, calc(var(--rr-safe-t) - var(--pixelrain-bar, 0px))); padding-bottom: max(8px, var(--rr-safe-b)); }
.ui-short .ui-panel { padding: 10px 14px 12px; border-radius: 20px; }
.ui-short .ui-title { font-size: 24px; -webkit-text-stroke-width: 4px; }
.ui-short .ui-head { margin-bottom: 8px; gap: 10px; }
.ui-short .ui-tabs { margin-bottom: 8px; }
.ui-short .ui-chip { min-height: 30px; }
.ui-short .ui-chip-label { display: none; }

/* Title: the logo in a left column (40% of the width), the menu as a two-column grid on the right. */
.ui-short .ui-screen[data-screen="title"] {
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: center;
  padding-left: var(--pad-l);
}
.ui-short .ui-title-shade { background: rgba(27, 18, 48, .46); }
.ui-short .ui-title-logo { grid-row: 1; align-self: center; }
.ui-short .ui-title-menu { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; width: 100%; align-self: center; }
.ui-short .ui-title-menu .ui-btn-primary { grid-column: 1 / -1; min-height: var(--btn); }
.ui-short .ui-title-menu .ui-btn { padding: 2px 12px 3px 12px; }
.ui-short .ui-title-menu .ui-btn-sub { white-space: normal; }
.ui-short .ui-sub-lead { display: none; }
.ui-short .ui-title-foot { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

/* Map: the world on the left, the card on the right, tabs along the top. */
.ui-short .ui-map-panel { width: 100%; height: 100%; }
.ui-short .ui-map-body { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 10px; }
.ui-short .ui-node { width: 84px; margin: -26px 0 0 -42px; }
.ui-short .ui-node-disc { width: 48px; height: 48px; }
.ui-short .ui-node-id { font-size: 16px; }
.ui-short .ui-node-here { top: -30px; }
.ui-short .ui-card { gap: 6px; padding: 8px 10px; }
.ui-short .ui-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  padding-bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.ui-short .ui-card-title { grid-column: 1 / -1; padding-right: 30px; font-size: 18px; }
.ui-short .ui-card .ui-kicker, .ui-short .ui-card .ui-badges, .ui-short .ui-card .ui-btn-sub, .ui-short .ui-card .ui-btn-primary .ui-btn-icon { display: none; }
.ui-short .ui-card-stats { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
.ui-short .ui-stat { font-size: 14px; white-space: nowrap; }
.ui-short .ui-card-trophies { grid-column: 2; grid-template-columns: repeat(3, 40px); gap: 4px; }
.ui-short .ui-card-trophies .ui-trophy { grid-template-columns: 1fr; }
.ui-short .ui-card-trophies .ui-trophy-disc { grid-row: auto; width: 40px; height: 40px; }
.ui-short .ui-card-trophies .ui-trophy-disc .ui-icon { width: 28px; height: 28px; }
.ui-short .ui-card-trophies .ui-trophy-name, .ui-short .ui-card-trophies .ui-trophy-note { display: none; }
.ui-short .ui-grade-tag { width: 26px; height: 26px; font-size: 15px; }
.ui-short .ui-card-actions { margin: 0; padding: 2px 0 0; border: 0; background: none; gap: 8px; }
.ui-short .ui-card-actions .ui-btn:first-child { flex: 0 0 auto; padding: 2px 16px 3px; }
.ui-short .ui-tab { min-height: 44px; font-size: 14px; }
.ui-short .ui-tab-note { display: none; }

/* Pause, Results, Run over, Options and Wardrobe: one panel that scrolls, its buttons pinned to the bottom edge. */
.ui-short .ui-pause-panel, .ui-short .ui-results-panel, .ui-short .ui-over-panel, .ui-short .ui-options-panel { width: min(100%, 760px); height: 100%; }
.ui-short .ui-pause-title, .ui-short .ui-results-title, .ui-short .ui-over-title { font-size: 26px; margin-bottom: 6px; text-align: left; }
.ui-short .ui-actions {
  flex-wrap: nowrap;
  gap: 10px;
  margin: 6px -14px -12px;
  padding: 9px 14px 6px;
  border-top: 3px solid var(--rr-outline);
  border-radius: 0 0 17px 17px;
  background: var(--ink-2);
}
.ui-short .ui-actions .ui-btn { flex: 1 1 auto; min-width: 0; flex-direction: row; justify-content: center; padding: 2px 10px 3px; }
.ui-short .ui-pause-actions { flex-direction: row; }
.ui-short .ui-pause-stats { justify-content: flex-start; }
.ui-short .ui-stretches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }

/* Results: the title, the level and the bank on one line; sunfruit and crates side by side. */
.ui-short .ui-results-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-bottom: 4px; }
.ui-short .ui-results-title { grid-column: 1; grid-row: 1; margin: 0; }
.ui-short .ui-results-head .ui-kicker { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-short .ui-results-bank { grid-column: 3; grid-row: 1; }
.ui-short .ui-results-body { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.ui-short .ui-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.ui-short .ui-tally > * { grid-column: 1 / -1; }
.ui-short .ui-tally > .ui-tally-fruit { grid-column: 1; }
.ui-short .ui-tally > .ui-tally-crates { grid-column: 2; }
.ui-short .ui-meter { display: none; }
.ui-short .ui-tally-row { min-height: 28px; gap: 2px 8px; font-size: 20px; }
.ui-short .ui-tally-row > .ui-icon { width: 22px; height: 22px; }
.ui-short .ui-tally-label { min-width: 0; }
.ui-short .ui-tally-stretches { gap: 0 14px; margin: 0 0 2px; }
.ui-short .ui-stretch { min-height: 21px; gap: 6px; }
.ui-short .ui-tally-stretches .ui-icon { display: none; }
.ui-short .ui-stretch-dots { flex-basis: 0; min-width: 0; }
.ui-short .ui-tally-row.ui-quiet { padding-left: 30px; }
.ui-short .ui-results-side { grid-template-columns: auto auto; align-items: center; gap: 6px 10px; padding: 12px 8px 6px; }
.ui-short .ui-results-side .ui-badges { grid-column: 1 / -1; }
.ui-short .ui-grade { width: 64px; height: 64px; min-width: 0; min-height: 0; }
.ui-short .ui-grade-letter { font-size: 40px; -webkit-text-stroke-width: 5px; }
.ui-short .ui-slots { gap: 4px; width: auto; }
.ui-short .ui-slots .ui-trophy { flex: 0 0 62px; }
.ui-short .ui-slots .ui-trophy-disc { width: 44px; height: 44px; }
.ui-short .ui-slots .ui-trophy-name { display: none; }
/* one line of goals: the near-miss lines come first, whatever does not fit waits for a bigger screen */
.ui-short .ui-results-foot { flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-height: 38px; margin-top: 4px; overflow: hidden; }
.ui-short .ui-goal, .ui-short .ui-unlock { min-height: 34px; padding: 3px 12px 4px 8px; border-width: 2.5px; box-shadow: none; }
.ui-short .ui-results[data-mode="trial"] .ui-results-side { grid-template-columns: auto; }
.ui-short .ui-results[data-mode="trial"] .ui-slots .ui-trophy-name { display: block; }
.ui-short .ui-results[data-mode="trial"] .ui-tally-time .ui-tally-text { font-size: 28px; }
.ui-short .ui-results[data-mode="trial"] .ui-tally { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.ui-short .ui-results[data-mode="trial"] .ui-tally > * { grid-column: auto; }
.ui-short .ui-sunbar { padding-top: 26px; padding-bottom: 56px; }
.ui-short .ui-sunbar-text { display: none; }

.ui-short .ui-over .ui-scroll { grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 6px 18px; }
.ui-short .ui-over-score { font-size: 44px; }
.ui-short .ui-over-panel { text-align: left; }
.ui-short .ui-options-main .ui-scroll { border-width: 0; background: none; padding: 0 4px 14px; }
.ui-short .ui-opt { min-height: 50px; }
.ui-short .ui-wardrobe-panel { width: 58%; height: 100%; }
.ui-short .ui-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ui-short .ui-swatch { width: 46px; height: 46px; }
.ui-short .ui-wardrobe-foot { margin: 6px -14px -12px; padding: 8px 14px 6px; border-radius: 0 0 17px 17px; background: var(--ink-2); }
.ui-short .ui-rush-panel { width: 100%; max-height: 100%; }
.ui-short .ui-rushcard { padding: 12px; }
.ui-short .ui-rushcard-title { font-size: 22px; }
.ui-short .ui-rushcard-go { display: none; }
/* Intro: the postcard on the left, the trophies to win on the right. */
.ui-short .ui-intro-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; justify-items: start; gap: 6px 22px; width: 100%; }
.ui-short .ui-intro-card > :only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 520px); }
.ui-short .ui-intro-art { grid-row: 1 / span 2; height: clamp(150px, 62vh, 200px); padding: 0 14px 30px; border-radius: 20px; }
.ui-short .ui-intro-title { font-size: min(36px, 6.4vw); -webkit-text-stroke-width: 5px; }
.ui-short .ui-intro-lines { align-self: end; }
.ui-short .ui-intro-lines:last-child { align-self: center; grid-row: 1 / span 2; }
.ui-short .ui-intro-foot { align-self: start; }
.ui-short .ui-intro-lines li { font-size: 15px; gap: 8px; }
.ui-short .ui-intro-lines li .ui-icon { width: 22px; height: 22px; flex: none; }
.ui-short .ui-dialog-panel { width: min(100%, 560px); }
.ui-short .ui-dialog-icon { display: none; }
.ui-short .ui-dialog-text { margin: 8px 0 10px; }
.ui-short .ui-toast { top: auto; }

/* A small phone held sideways (an iPhone SE is 667 px wide): words before pictures on the buttons. */
@media (max-width: 760px) {
  .ui-short .ui-actions .ui-btn-icon { display: none; }
  .ui-short .ui-map-body { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); }
  .ui-short .ui-stat .ui-icon { display: none; }
  .ui-short .ui-node { width: 60px; margin-left: -30px; }
  .ui-short .ui-node-pips { gap: 2px; padding: 2px 5px; }
  .ui-short .ui-pip .ui-icon { width: 14px; height: 14px; }
  .ui-short .ui-card-trophies { grid-template-columns: repeat(3, 36px); }
  .ui-short .ui-card-trophies .ui-trophy-disc { width: 36px; height: 36px; }
  .ui-short .ui-card-trophies .ui-trophy-disc .ui-icon { width: 24px; height: 24px; }
  .ui-short .ui-tally-stretches { grid-template-columns: minmax(0, 1fr); }
  .ui-short .ui-results[data-mode="trial"] .ui-tally { grid-template-columns: minmax(0, 1fr); }
  .ui-short .ui-results[data-mode="trial"] .ui-tally-time .ui-tally-text { font-size: 26px; }
  .ui-short .ui-tally-fruit .ui-tally-label, .ui-short .ui-tally-crates .ui-tally-label { display: none; }
  .ui-short .ui-slots .ui-trophy { flex-basis: 52px; }
  .ui-short .ui-slots .ui-trophy-note { display: none; }
  .ui-short .ui-wardrobe-panel { width: 62%; }
}