/*
 * Durban Heat — chrome.
 *
 * The palette is the city on a good afternoon: Indian Ocean teal, wet tar,
 * bougainvillea, and the orange the sky goes at about half past five.
 */

/* Knewave: the brush lettering of the Durban Heat artwork. Montserrat: the
   clean sans of its taglines and HUD numbers. Both SIL OFL (assets/fonts). */
@font-face {
  font-family: "Knewave";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/knewave.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("assets/fonts/montserrat.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-italic.woff2") format("woff2");
}

:root {
  --ink: #0a1116;
  --ink-2: #101c23;
  --sea: #12586e;
  --sea-light: #2e93ad;
  --sand: #e8d6ae;
  --sunset: #f28c28;
  --chilli: #d8402c;
  --leaf: #3f8f5c;
  --bone: #f4f1e8;
  --muted: rgba(244, 241, 232, 0.62);
  --line: rgba(244, 241, 232, 0.14);
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  --display: "Knewave", "Arial Black", Impact, system-ui, sans-serif;
  --ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The artwork's sunset: gold through orange to chilli red, on night ink. */
  --gold: #ffc21a;
  --flame: #ff7a1a;
  --ember: #f0401f;
  --heat: linear-gradient(100deg, #ffd23a 0%, #ff9a1f 45%, #f04a1f 100%);
  --glass: rgba(14, 18, 26, 0.72);
  --glass-line: rgba(255, 255, 255, 0.78);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--ui);
  overflow: hidden;
  overscroll-behavior: none;
}

#stage {
  position: fixed;
  inset: 0;
}

:root { --sw: 100vw; --sh: 100vh; }

#scene,
#hud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#scene {
  background: #0d1a20;
  cursor: crosshair;
}

#hud {
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Panels                                                                  */
/* ---------------------------------------------------------------------- */

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4vmin;
  z-index: 5;
  overflow: auto;
}

.panel--full {
  /* A deep vignette so the city reads behind the sheet without competing. */
  background: linear-gradient(180deg, rgba(10, 17, 22, 0.42), rgba(10, 17, 22, 0.62));
  backdrop-filter: blur(2px);
}

.hidden {
  display: none !important;
}

.sheet {
  width: min(880px, 100%);
  background: linear-gradient(180deg, rgba(19, 33, 41, 0.9), rgba(11, 19, 24, 0.94));
  backdrop-filter: blur(6px);
  border: 3px solid #0b0b0b;
  outline: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: clamp(22px, 4vmin, 40px);
  box-shadow: var(--shadow);
}

.sheet--narrow {
  width: min(520px, 100%);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Type                                                                    */
/* ---------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd23a;
  text-shadow: 0 2px 0 #0b0b0b;
}

.title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(46px, 9vmin, 88px);
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #0b0b0b;
  text-shadow: 0 4px 0 #0b0b0b, 0 8px 22px rgba(0, 0, 0, 0.45);
}

.title span {
  display: block;
  color: var(--sunset);
  font-style: italic;
}

.h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(30px, 4.6vmin, 44px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-text-stroke: 1.5px #0b0b0b;
  text-shadow: 0 3px 0 #0b0b0b, 0 6px 16px rgba(0, 0, 0, 0.4);
}

.h3 {
  margin: 22px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.9vmin, 18px);
  line-height: 1.6;
  color: rgba(244, 241, 232, 0.85);
  max-width: 62ch;
}

.lede--sm {
  font-size: 15px;
  margin-inline: auto;
}

/* Column headings inside the title sheet. Scoped, so it cannot reach the
   .h2 panel titles and turn them into uppercase teal small-caps. */
.cols h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5fd3ff;
  text-shadow: 0 2px 0 #0b0b0b;
}

/* Needs to out-specify `.cols h2`, which zeroes the top margin. */
.cols h2.mt,
.mt {
  margin-top: 26px;
}

.fineprint {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------- */
/* Layout bits                                                             */
/* ---------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 26px;
}

.keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}

.keys dt {
  font-weight: 800;
  color: var(--sand);
  white-space: nowrap;
}

.keys dd {
  margin: 0;
  color: rgba(244, 241, 232, 0.78);
}

.bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(244, 241, 232, 0.78);
}

.bullets em {
  color: var(--sand);
  font-style: italic;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.row--wrap {
  margin-top: 22px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0;
  text-align: left;
}

.stats div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.stats strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
}

.stats span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  max-height: calc(var(--sh) * 0.3);
  overflow: auto;
}

.log li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(244, 241, 232, 0.8);
}

.log li::before {
  content: "✓ ";
  color: var(--leaf);
  font-weight: 800;
}

.log li.empty::before {
  content: "";
}

/* ---------------------------------------------------------------------- */
/* Controls                                                                */
/* ---------------------------------------------------------------------- */

.btn {
  appearance: none;
  border: 3px solid #0b0b0b;
  background: linear-gradient(180deg, #3a5568, #1f3340);
  color: #fff;
  font: inherit;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 26px;
  border-radius: 12px;
  box-shadow: 0 4px 0 #0b0b0b;
  transform: skewX(-6deg);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  background: linear-gradient(180deg, #4a6a80, #2a4353);
  transform: skewX(-6deg) translateY(-2px);
  box-shadow: 0 6px 0 #0b0b0b;
}

.btn:active {
  transform: skewX(-6deg) translateY(2px);
  box-shadow: 0 2px 0 #0b0b0b;
}

.btn--primary {
  background: linear-gradient(180deg, #ffd23a 0%, #ff8a1e 55%, #e8321f 100%);
  color: #fff;
  -webkit-text-stroke: 0.6px #0b0b0b;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  font-size: 22px;
}

.btn--primary:hover {
  background: linear-gradient(180deg, #ffe066 0%, #ff9a30 55%, #f0402a 100%);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--sunset);
}

/* ---------------------------------------------------------------------- */
/* Taxi signals                                                            */
/* ---------------------------------------------------------------------- */

.signals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.signal {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 16px 12px;
  color: var(--bone);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, transform 0.12s ease;
}

.signal:hover {
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(-2px);
}

.signal b {
  display: block;
  font-size: 34px;
  line-height: 1.1;
}

.signal span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------- */
/* Loading                                                                 */
/* ---------------------------------------------------------------------- */

.loading__inner {
  text-align: center;
  width: min(440px, 100%);
}

.bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sea-light), var(--sunset));
  transition: width 0.35s ease;
}

.loading__text {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* (was a media query; JS sets html.xnarrow from the game's own size) */
html.xnarrow .cols {
    gap: 20px;
  }
html.xnarrow .signals {
    grid-template-columns: 1fr;
  }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .signal,
  .bar__fill {
    transition: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Touch controls                                                          */
/* ---------------------------------------------------------------------- */

/*
 * Every control is at least 44 CSS px (Apple's minimum touch target) and the
 * ones a thumb hammers are a good deal bigger. Edges are padded by the
 * notch / home-indicator insets (the page runs under them: viewport-fit=cover).
 */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}


html {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.touch-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.stick {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid rgba(244, 241, 232, 0.4);
  background: rgba(10, 17, 22, 0.3);
  display: none;
  pointer-events: none;
}
/* Always on screen at its resting place (bottom left); it jumps to wherever
   your left thumb lands and returns when you let go. */
.stick { display: block; left: calc(var(--sal) + 22px); top: auto; bottom: calc(var(--sab) + 30px); opacity: 0.55; transition: opacity 0.15s; }
.stick[style*="top"] { bottom: auto; }
.stick.is-on { opacity: 1; }
.stick::after {
  content: "MOVE";
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
  text-align: center; font: 700 11px system-ui, sans-serif; letter-spacing: 0.12em; color: rgba(244, 241, 232, 0.7);
}
.stick.is-steer::after { content: "STEER"; }
.stick.is-fly::after { content: "FLY"; }
.stick.is-on::after { display: none; }
.touch-right .tbtn--gas { right: 0; bottom: 0; width: 104px; height: 104px; font-size: 22px; background: rgba(56, 170, 90, 0.65); }
.stick__knob {
  position: absolute;
  left: 38px;
  top: 38px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(244, 241, 232, 0.8);
}
.tbtn {
  position: absolute;
  border: 3px solid rgba(244, 241, 232, 0.5);
  background: rgba(10, 17, 22, 0.5);
  color: var(--bone);
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  padding: 0;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}
.tbtn.is-on { background: rgba(242, 140, 40, 0.8); transform: scale(0.94); }
.tbtn.is-latched { border-color: var(--sunset); color: var(--sunset); }
.tbtn.is-hint { border-color: #ffd83d; color: #ffd83d; box-shadow: 0 0 16px rgba(255, 216, 61, 0.6); }

/* Right thumb: fire in the corner, aim and jump fanned round it. */
.touch-right {
  position: absolute;
  right: calc(var(--sar) + 14px);
  bottom: calc(var(--sab) + 14px);
  width: 190px;
  height: 190px;
}
.tbtn--fire { right: 0; bottom: 0; width: 104px; height: 104px; font-size: 20px; background: rgba(216, 64, 44, 0.6); }
.tbtn--aim { right: 116px; bottom: 4px; width: 68px; height: 68px; }
.tbtn--jump { right: 104px; bottom: 88px; width: 68px; height: 68px; }

/* Context buttons sit in a row left of the fire cluster. */
.touch-row {
  position: absolute;
  right: calc(var(--sar) + 14px + 190px + 10px);
  bottom: calc(var(--sab) + 14px);
  display: flex;
  gap: 8px;
  min-height: 60px;     /* keeps its place even with no buttons showing (the HUD lines up on it) */
  pointer-events: none;
}
.touch-row .tbtn { pointer-events: auto; }
.touch-row .tbtn, .touch-top .tbtn { position: static; }
.tbtn--small { width: 60px; height: 60px; font-size: 12px; letter-spacing: 0.02em; }

/* System buttons along the top, clear of the notch and the badge. */
.touch-top {
  position: absolute;
  top: calc(var(--sat) + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.tbtn--tiny { width: 64px; height: 44px; border-radius: 22px; font-size: 12px; letter-spacing: 0.02em; }

/* The title sheet's touch cheat-sheet. */
.touchkeys {
  list-style: none;
  margin: 0;
  padding: 0;
}
.touchkeys li { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: rgba(244, 241, 232, 0.85); }
.touchkeys b { color: #ffd23a; font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; }

/* Panels clear the notch; the title and pause sheets scroll if a short phone needs it. */
.panel {
  padding: max(2.5vmin, var(--sat)) max(2.5vmin, var(--sar)) max(2.5vmin, var(--sab)) max(2.5vmin, var(--sal));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.btn { min-height: 52px; min-width: 52px; touch-action: manipulation; }
.signal { min-height: 64px; touch-action: manipulation; }
.row { gap: 14px; }
.check { min-height: 44px; }
.check input { width: 26px; height: 26px; }
/* (was a media query; JS sets html.narrow from the game's own size) */
html.narrow .sheet { padding: 3vmin; }
html.narrow .cols { grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------------------------------------------------------------------- */
/* Turn your phone                                                         */
/* ---------------------------------------------------------------------- */

.rotate {
  display: none;
  z-index: 100;
  background: radial-gradient(90% 70% at 50% 40%, #12586e, #0a1116);
  backdrop-filter: none;
  text-align: center;
}
html.portrait .rotate { display: grid; }
.rotate__inner { max-width: 320px; }
.rotate__icon {
  width: 120px;
  height: 120px;
  fill: none;
  stroke: #ffd23a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 8px;
  animation: rotate-hint 2.4s ease-in-out infinite;
}
@keyframes rotate-hint {
  0%, 15% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .rotate__icon { animation: none; } }

.fineprint--credits { opacity: 0.7; }

/* ---------------------------------------------------------------------- */
/* Brand: the Durban Heat logo and key art                                 */
/* ---------------------------------------------------------------------- */

.logo { display: block; height: auto; }
.logo--title { width: min(420px, calc(var(--sw) * 0.7)); margin: 0 auto 6px; }
.logo--big { width: min(560px, calc(var(--sw) * 0.76)); margin: 0 auto 10px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55)); }
.logo--badge {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 132px;
  z-index: 3;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.touch .logo--badge { width: 96px; top: calc(var(--sat) + 8px); left: calc(var(--sal) + 10px); }

.loading {
  /* The identity's sunset: a painted sky over a dark sea, palms in silhouette. */
  background:
    radial-gradient(90% 60% at 50% 70%, rgba(255, 138, 30, 0.55), transparent 65%),
    linear-gradient(180deg, #2b1436 0%, #7a2a3a 28%, #e8632a 52%, #f7b543 64%, #17384a 66%, #0b1f2b 100%);
  backdrop-filter: none;
}
.loading__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.loading__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 28px 20px;
  border-radius: 18px;
  background: rgba(8, 12, 16, 0.42);
  backdrop-filter: blur(3px);
  max-width: min(680px, calc(var(--sw) * 0.9));
}
.loading__tag {
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: 0.32em;
  font-size: 12px;
  text-transform: uppercase;
  color: #ffd23a;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.loading--art .logo--big, .loading--art .loading__tag { display: none; }
/* Upright phones: show the whole picture over the painted sky rather than
   cropping the logo out of the middle of it. */

.loading--art .loading__inner {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sh) * 0.05);
  transform: translateX(-50%);
  width: min(420px, calc(var(--sw) * 0.86));
  padding: 14px 22px 12px;
  background: rgba(8, 12, 16, 0.6);
  border: 1px solid rgba(255, 210, 58, 0.35);
}
.loading .bar { background: rgba(0, 0, 0, 0.45); border: 2px solid #0b0b0b; }
.loading .bar__fill { background: linear-gradient(90deg, #ffd23a, #ff8a1e, #e8321f); }
.loading__text { color: var(--bone); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); font-weight: 600; }
.btn--primary { background: linear-gradient(180deg, #ff8a1e, #e8321f); border-color: #0b0b0b; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.eyebrow { color: #ffd23a; }
.sheet { max-height: calc(var(--sh) * 0.94); overflow-y: auto; }
.logo--title { width: min(340px, calc(var(--sw) * 0.58)); }
/* (was a media query; JS sets html.medium from the game's own size) */
html.medium .logo--title { width: min(260px, calc(var(--sw) * 0.5)); }
html.medium .lede { display: none; }

/* ---------------------------------------------------------------------- */
/* Short landscape screens (phones on their side)                          */
/* ---------------------------------------------------------------------- */

/*
 * A phone on its side is only 320-430 px tall, so the title and pause sheets
 * scroll. Their main button therefore sticks to the bottom of the sheet and
 * is always under a thumb, however far down the text has been scrolled.
 */
.sheet > .row,
.sheet > .btn--primary {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.sheet > .row {
  padding: 10px 0 2px;
  background: rgba(11, 19, 24, 0.97);
  box-shadow: 0 -10px 12px rgba(11, 19, 24, 0.9);
}
/* (was a media query; JS sets html.short from the game's own size) */
html.short .sheet { padding: 12px 18px 10px; max-height: 100%; }
html.short .logo--title { width: min(150px, calc(var(--sw) * 0.3)); margin-bottom: 2px; }
html.short .eyebrow { font-size: 12px; margin-bottom: 4px; }
html.short .cols { gap: 8px 22px; margin-bottom: 8px; }
html.short .cols h2 { margin-bottom: 4px; font-size: 14px; }
html.short .cols h2.mt, html.short .mt { margin-top: 12px; }
html.short .touchkeys li { font-size: 13px; margin-bottom: 5px; }
html.short .bullets { font-size: 12.5px; line-height: 1.45; }
html.short .h2 { font-size: 26px; margin-bottom: 6px; }
html.short .h3 { margin: 12px 0 6px; }
html.short .stats { gap: 8px; }
html.short .row--wrap { margin-top: 12px; }
html.short .btn { min-height: 48px; padding-block: 8px; }
html.short /* Pause: the stats and the five buttons each fit on one row. */
  .sheet--narrow { width: min(760px, 100%); }
html.short .stats { grid-template-columns: repeat(6, 1fr); }
html.short .stats { margin: 8px 0; }
html.short .stats > div { padding: 6px 8px; }
html.short .stats strong { font-size: 15px; }
html.short .stats span { font-size: 10px; }
html.short .row--wrap { flex-wrap: nowrap; gap: 10px; }
html.short .row--wrap .btn { padding: 8px 12px; font-size: 14px; min-width: 0; }
html.short .row--wrap .btn--primary { font-size: 15px; }

/* ---------------------------------------------------------------------- */
/* Menus: pause, missions, settings, confirm, coach                        */
/* ---------------------------------------------------------------------- */

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.menu .btn { width: 100%; padding-inline: 8px; font-size: 16px; }

.missionlist { max-height: calc(var(--sh) * 0.52); }
.missionlist .m {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 8px 2px;
}
.missionlist .m b { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 0.03em; }
.missionlist .m em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.missionlist .m span { grid-column: 1 / -1; font-size: 13px; color: rgba(244, 241, 232, 0.75); }
.missionlist .m--available em, .missionlist .m--failed em { color: #ffd23a; }
.missionlist .m--active em { color: #5fd3ff; }
.missionlist .m--completed em { color: #48e07a; }
.missionlist .m--locked { opacity: 0.55; }

.settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  text-align: left;
  margin: 8px 0;
}
.setting {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(244, 241, 232, 0.85);
  min-height: 44px;
  justify-content: center;
}
.setting--check { flex-direction: row; align-items: center; justify-content: space-between; }
.setting input[type="range"] { width: 100%; height: 30px; accent-color: var(--sunset); touch-action: pan-x; }
.setting input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--sunset); }
.setting select {
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  color: var(--bone);
  background: #1f3340;
  border: 2px solid #0b0b0b;
  border-radius: 10px;
  padding: 4px 8px;
}

#confirm { z-index: 20; }
#settings, #missions { z-index: 15; }

#coach {
  position: absolute;
  top: calc(var(--sat) + 62px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;                 /* above the controls, under every menu sheet */
  max-width: min(560px, calc(var(--sw) * 0.7));
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.82);
  border: 2px solid #ffd23a;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
  animation: coach-in 0.35s ease-out;
}
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, -6px); } }
/* (was a media query; JS sets html.short from the game's own size) */
html.short .menu .btn { font-size: 14px; min-height: 44px; }
html.short .settings { gap: 2px 18px; }
html.short .setting { min-height: 40px; }

#debug { position: absolute; left: calc(var(--sal) + 8px); top: calc(var(--sat) + 110px); z-index: 30; font: 12px/1.3 ui-monospace, monospace; }
#debug .dbg-toggle { min-height: 34px; padding: 4px 10px; background: #000a; color: #0f0; border: 1px solid #0f0; border-radius: 6px; }
#debug .dbg-body { margin-top: 6px; width: 300px; background: #000c; color: #cfc; padding: 8px; border-radius: 8px; }
#debug .dbg-stats { margin: 0 0 6px; white-space: pre-wrap; }
#debug .dbg-btns { display: flex; flex-wrap: wrap; gap: 4px; }
#debug .dbg-btns button { min-height: 34px; padding: 4px 8px; background: #123; color: #fff; border: 1px solid #456; border-radius: 6px; font: inherit; }

/* The WEAPON button shows the gun and its ammo. */
.tbtn--weapon { white-space: pre; line-height: 1.15; font-size: 11px; }
.tbtn--weapon.is-empty { border-color: #ff5b4a; color: #ff9a8a; }

/* ---------------------------------------------------------------------- */
/* Context buttons and the upright (portrait) phone layout                 */
/* ---------------------------------------------------------------------- */

/* A button that has nothing to do right now is not there at all. */
.tbtn.is-gone { display: none !important; }
/* ...and pops in when it does (display none -> shown restarts the animation). */
.touch-row .tbtn, .touch-top .tbtn { animation: tbtn-pop 0.18s ease-out; }
@keyframes tbtn-pop { from { transform: scale(0.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .touch-row .tbtn, .touch-top .tbtn { animation: none; } }

/*
 * Upright phone (about 390 x 844): the left thumb owns the bottom-left for
 * the stick, the right thumb the bottom-right cluster. Context buttons line
 * up above the cluster, growing leftwards from the right edge, so the one
 * you need is always within reach of the same thumb. MAP and PAUSE sit top
 * left; money and health keep the top right.
 */
html.portrait-play .touch .logo--badge, html.portrait-play .logo--badge { display: none; }
html.portrait-play .touch-right {
  right: calc(var(--sar) + 16px);
  bottom: calc(var(--sab) + 22px);
}
html.portrait-play .touch-row {
  right: calc(var(--sar) + 16px);
  left: auto;
  bottom: calc(var(--sab) + 22px + 200px);
  flex-direction: row-reverse;
  gap: 10px;
}
html.portrait-play .touch-top {
  left: calc(var(--sal) + 12px);
  right: auto;
  top: calc(var(--sat) + 10px);
  transform: none;
}
html.portrait-play .tbtn--tiny { width: 58px; height: 42px; }
html.portrait-play #coach { top: calc(var(--sat) + 214px); max-width: calc(var(--sw) - 32px); font-size: 14px; }
html.portrait-play .stick { width: 150px; height: 150px; }
html.portrait-play .stick__knob { left: 43px; top: 43px; }

/* ---------------------------------------------------------------------- */
/* The tip card: dialogue, the tutorial hint and the job step, at the       */
/* bottom above the buttons, closable. The JOB pill brings a folded job back.*/
/* ---------------------------------------------------------------------- */

.tip {
  position: absolute;
  z-index: 6;
  left: calc(var(--sal) + 12px);
  right: calc(var(--sar) + 12px);
  bottom: calc(var(--sab) + 22px + 200px + 112px);   /* above the prompt pill */
  padding: 9px 44px 10px 14px;
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.84);
  border: 2px solid rgba(255, 210, 58, 0.55);
  color: #fff;
  font: 700 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-height: 34%;
  overflow: hidden;
  animation: tip-in 0.2s ease-out;
}
.tip.is-gone { display: none; }
.tip[data-kind="job"] { border-color: rgba(95, 211, 255, 0.55); }
.tip__kicker {
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #ffd23a;
  margin-bottom: 2px;
}
.tip[data-kind="job"] .tip__kicker { color: #5fd3ff; }
.tip__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  line-height: 36px;
  padding: 0;
}
@keyframes tip-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }

.jobpill {
  position: absolute;
  z-index: 6;
  left: calc(var(--sal) + 12px);
  top: calc(var(--sat) + 196px);
  min-height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 2px solid rgba(95, 211, 255, 0.7);
  background: rgba(8, 12, 18, 0.8);
  color: #5fd3ff;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.jobpill.is-gone { display: none; }
.jobpill.is-urgent { border-color: #ff5b4a; color: #ff8a7a; }

/* Landscape phones: the card sits left of the button row. */
html:not(.portrait-play) .tip {
  left: calc(var(--sal) + 200px);
  right: calc(var(--sar) + 420px);
  bottom: calc(var(--sab) + 14px);
  min-width: 260px;
}
html:not(.portrait-play) .jobpill { top: calc(var(--sat) + 110px); left: calc(var(--sal) + 14px); }


/* ======================================================================= */
/* The Durban Heat look (App Store artwork): sunset key art, the crown     */
/* wordmark, brush headlines, dark glass panels and line-icon buttons.     */
/* ======================================================================= */

.keyart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 50%;
  z-index: 0;
  pointer-events: none;
}
.loading, .title-screen {
  display: block;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2340 0%, #c4502a 45%, #f7a33a 62%, #1d1a22 100%);
  backdrop-filter: none;
}
/* Darken the street at the bottom so the headline and buttons read. */
.loading::after, .title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 20% at 50% 44%, rgba(255, 190, 100, 0.32), transparent 72%),
    linear-gradient(180deg, rgba(10, 8, 14, 0.25) 0%, rgba(10, 8, 14, 0) 30%, rgba(10, 8, 14, 0) 48%, rgba(10, 8, 14, 0.78) 78%, rgba(10, 8, 14, 0.94) 100%);
}
.brandhead {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(var(--sat) + 3vh);
  text-align: center;
}
.logo--title, .logo--big {
  width: min(86vw, 460px);
  max-width: none;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
html.medium .logo--title, html.short .logo--title { width: min(62vw, 300px); }
.madein {
  display: inline-block;
  margin: 4px 0 0;
  padding: 0 4px 6px;
  font: 700 clamp(15px, 4.2vw, 20px) var(--ui);
  letter-spacing: 0.08em;
  color: #15110f;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 120, 0.85) 18%, rgba(255, 196, 120, 0.85) 82%, transparent) bottom / 100% 64% no-repeat;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--ember), transparent) 1;
}

.loading__inner, .loading--art .loading__inner {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--sab) + 7vh);
  transform: translateX(-50%);
  width: min(78vw, 360px);
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
}
.loading .bar { height: 8px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); }
.loading .bar__fill { background: var(--heat); }
.loading__text { font: 700 12px var(--ui); letter-spacing: 0.18em; color: #fff; }

.title-foot {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px calc(var(--sab) + 18px);
  text-align: center;
  max-height: 64%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.headline { margin: 0; line-height: 0.86; }
/* "Welcome to": a small spaced-out kicker over the big brush DURBAN. */
.headline__top {
  display: block;
  margin-bottom: 8px;
  font: 800 clamp(12px, 3.4vw, 15px) var(--ui);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.headline__brush {
  display: block;
  margin-top: -2px;
  font: 400 clamp(48px, 16vw, 84px) var(--display);
  text-transform: uppercase;
  transform: rotate(-4deg);
  background: var(--heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}
.headline__sub {
  margin: 10px 0 0;
  font: 600 clamp(14px, 3.9vw, 17px) var(--ui);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.headline__sub::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--flame);
}
html.short .headline, html.short .headline__sub { display: none; }
.title-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.title-actions .btn { width: min(82vw, 340px); }

.howto {
  margin: 12px auto 0;
  width: min(92vw, 520px);
  text-align: left;
  color: #fff;
  font: 500 14px/1.45 var(--ui);
}
.howto summary {
  list-style: none;
  text-align: center;
  font: 700 13px var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  min-height: 44px;
  line-height: 44px;
  cursor: pointer;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: "  ▾"; color: var(--flame); }
.howto[open] summary::after { content: "  ▴"; }
.howto[open] {
  padding: 4px 16px 12px;
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.howto .lede { font-size: 14px; margin: 0 0 10px; color: rgba(255, 255, 255, 0.86); display: block; }
.howto .touchkeys, .howto .bullets { margin-bottom: 10px; }
.touchkeys b { font-family: var(--ui); font-weight: 800; color: var(--gold); letter-spacing: 0.02em; }

/* Buttons: an orange heat pill for the main action, dark glass for the rest. */
.btn {
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: var(--glass);
  backdrop-filter: blur(6px);
  font: 800 16px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: none;
  padding: 12px 26px;
}
.btn:hover, .btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); background: rgba(30, 36, 48, 0.8); }
.btn--primary, .btn--primary:hover {
  background: var(--heat);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  -webkit-text-stroke: 0;
  font: 400 24px var(--display);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 0 rgba(120, 30, 0, 0.55);
  box-shadow: 0 8px 22px rgba(240, 74, 31, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost { background: rgba(10, 12, 18, 0.55); }

/* Menus: dark glass sheets with a heat stripe. */
.sheet {
  background: linear-gradient(180deg, rgba(20, 22, 32, 0.9), rgba(10, 11, 17, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.16);
  outline: 0;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--heat);
}
.h2 {
  font: 400 clamp(32px, 9vw, 46px) var(--display);
  -webkit-text-stroke: 0;
  text-transform: uppercase;
  background: var(--heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
.stats div { border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.stats strong { font-family: var(--ui); font-weight: 800; }
.menu .btn { font-size: 14px; }
.missionlist .m b { font-family: var(--ui); font-weight: 800; }
.tip__kicker, .jobpill { font-family: var(--ui); font-weight: 800; }

/* The tip card: dark glass with a heat edge. */
.tip {
  background: rgba(12, 14, 20, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid var(--flame);
  border-radius: 16px;
  font-family: var(--ui);
  font-weight: 600;
}
.tip[data-kind="job"] { border-color: rgba(255, 255, 255, 0.16); border-left-color: var(--gold); }
.tip__kicker { color: var(--flame); letter-spacing: 0.1em; }
.tip[data-kind="job"] .tip__kicker { color: var(--gold); }
.jobpill { border-color: var(--gold); color: var(--gold); background: rgba(12, 14, 20, 0.8); }

/* ----------------------------------------------------------------------- */
/* Touch controls: dark glass circles, white rims, line icons.             */
/* ----------------------------------------------------------------------- */

.tbtn {
  border: 2px solid var(--glass-line);
  background: rgba(16, 20, 28, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font: 800 9px var(--ui);
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.tbtn svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.tbtn svg .fill { fill: currentColor; stroke: none; }
.tbtn .cap { pointer-events: none; opacity: 0.85; }
.tbtn.is-on { background: rgba(255, 122, 26, 0.85); border-color: #fff; transform: scale(0.94); }
.tbtn.is-hint { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(255, 194, 26, 0.55); }
.tbtn.is-latched { border-color: var(--flame); color: var(--flame); }
.tbtn--fire { background: rgba(16, 20, 28, 0.6); }
.tbtn--fire svg, .touch-right .tbtn--gas svg { width: 48%; height: 48%; }
.touch-right .tbtn--gas { background: rgba(38, 150, 80, 0.7); }
.tbtn--small { font-size: 8.5px; }
.tbtn--tiny { border-radius: 50%; width: 46px; height: 46px; }

/* Upright: one tight fan under the right thumb. The fist (or GAS) in the
   corner, JUMP (BRAKE) to its left, CAR above it and AIM on the diagonal,
   so the thumb rolls between them without travelling. */
html.portrait-play .touch-right {
  right: calc(var(--sar) + 14px);
  bottom: calc(var(--sab) + 20px);
  width: 160px;
  height: 156px;
}
html.portrait-play .tbtn--fire, html.portrait-play .touch-right .tbtn--gas { right: 0; bottom: 0; width: 88px; height: 88px; }
html.portrait-play .tbtn--jump { right: 96px; bottom: 4px; width: 60px; height: 60px; }
html.portrait-play .tbtn--carbig { right: 14px; bottom: 96px; width: 60px; height: 60px; }
html.portrait-play .tbtn--aim { right: 90px; bottom: 70px; width: 56px; height: 56px; }
html.portrait-play .touch-row { bottom: calc(var(--sab) + 20px + 164px); right: calc(var(--sar) + 14px); }
/* Upright: the tip card sits above the stick, clear of the button fan, so
   it never covers Sipho. */
html.portrait-play .tip { bottom: calc(var(--sab) + 236px); right: calc(var(--sar) + 104px); max-height: 120px; font-size: 13px; }
.tbtn--carbig { position: absolute; }
html:not(.portrait-play) .tbtn--carbig { right: 0; bottom: 116px; width: 64px; height: 64px; }

/* The stick: a dark glass ring with arrows, a pale knob. */
.stick {
  border: 2px solid var(--glass-line);
  background: rgba(16, 20, 28, 0.42);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0.9;
}
.stick::after { display: none; }
.stick__arrows { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.85); pointer-events: none; }
.stick__knob {
  background: radial-gradient(circle at 40% 35%, #f2f3f5, #c3c7cd 70%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Top right: the phone (jobs, map, settings) beside the cash pill drawn by the HUD. */
.hudphone {
  position: absolute;
  z-index: 5;
  top: calc(var(--sat) + 14px);
  right: calc(var(--sar) + 14px);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: rgba(14, 18, 26, 0.78);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.hudphone svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Tap targets over the HUD's radar (opens the map) and weapon card (next weapon). */
.hudtap { position: absolute; z-index: 5; border: 0; padding: 0; background: transparent; border-radius: 16px; }
.hudtap--radar { border-radius: 50%; }
html.portrait-play .touch-top { display: none; }

/* The top-right chips, after the artwork: a cash pill beside the phone,
   five stars under it, and the weapon card. */
.sr { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 8px; line-height: 1; color: transparent; pointer-events: none; white-space: nowrap; }
.hudchips {
  position: absolute;
  z-index: 5;
  top: calc(var(--sat) + 14px);
  right: calc(var(--sar) + 14px + 44px + 8px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.cashpill {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(14, 18, 26, 0.78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font: 800 19px var(--ui);
  color: #fff;
  letter-spacing: 0.01em;
}
.cashpill b { color: #3fd16b; font-weight: 900; }
.stars { display: flex; gap: 1px; font-size: 19px; line-height: 1; margin-right: -52px; }
.stars i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.stars i.on { color: #fff; }
.stars.hot i.on { color: #ff6a3a; }
.hudphone.tbtn { position: absolute; font-size: 0; border: 0; border-radius: 12px; width: 44px; height: 44px; background: rgba(14, 18, 26, 0.78); }
.hudphone.tbtn svg { width: 22px; height: 22px; }
.tbtn.wcard {
  position: absolute;
  z-index: 5;
  top: calc(var(--sat) + 14px + 44px + 30px);
  right: calc(var(--sar) + 14px);
  width: 120px;
  height: 58px;
  border-radius: 14px;
  border: 0;
  background: rgba(14, 18, 26, 0.78);
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 4px 10px 6px;
}
.wcard svg { width: 54px; height: 30px; stroke-width: 1.6; }
.wcard .ammo { position: absolute; right: 10px; bottom: 5px; font: 800 12px var(--ui); color: #fff; letter-spacing: 0.02em; }
.wcard .swap { position: absolute; left: 8px; top: 4px; font-size: 11px; color: var(--gold); }
.wcard.is-empty .ammo { color: #ff6a5a; }
.tbtn.hudtap {
  font-size: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 50%;
}
.tbtn.hudtap.is-on { background: rgba(255, 255, 255, 0.12); }
/* The context row: small glass circles above the right-hand column. */
.touch-row .tbtn { width: 54px; height: 54px; }
html:not(.portrait-play) .touch-row { right: calc(var(--sar) + 14px + 190px + 10px); }
.menu .btn { border-radius: 16px; line-height: 1.15; }

/* ----------------------------------------------------------------------- */
/* Pop-up cards (js/popup.js): bold, slanted, closable, then they live on   */
/* at the bottom as the tip card.                                           */
/* ----------------------------------------------------------------------- */
.pop-shade {
  position: absolute; inset: 0; z-index: 30;
  background: radial-gradient(80% 60% at 50% 45%, rgba(10, 8, 14, 0.35), rgba(10, 8, 14, 0.72));
  animation: pop-fade 0.18s ease-out;
}
.pop {
  --pop: #ffc21a;
  position: absolute; z-index: 31;
  left: 50%;
  width: min(calc(var(--sw) - 28px), 460px);
  transform: translateX(-50%);
  padding: 18px 20px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 24, 34, 0.96), rgba(12, 13, 19, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--ui);
  overflow: hidden;
}
.pop::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--pop);
}
.pop::after {
  content: ""; position: absolute; right: -40px; top: -60px; width: 160px; height: 160px;
  background: var(--pop); opacity: 0.12; transform: rotate(28deg);
}
.pop--modal { top: 50%; transform: translate(-50%, -50%); animation: pop-in 0.28s cubic-bezier(.2, 1.4, .4, 1); }
.pop--step {
  top: calc(var(--sat) + 158px);
  padding: 12px 44px 12px 18px;
  animation: pop-drop 0.3s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: auto;
}
.pop.is-out, .pop-shade.is-out { animation: pop-out 0.18s ease-in forwards; pointer-events: none; }
.pop__kicker { font: 800 11px var(--ui); letter-spacing: 0.14em; color: var(--pop); margin-bottom: 4px; padding-right: 30px; }
.pop__title {
  font: 400 clamp(24px, 7.4vw, 34px) / 1.05 var(--display);
  text-transform: uppercase;
  transform: skewX(-6deg);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  margin-bottom: 6px;
}
.pop--step .pop__title { font-size: clamp(17px, 5vw, 22px); margin: 0; text-transform: none; font-family: var(--ui); font-weight: 800; transform: none; }
.pop__body { font: 600 14px / 1.45 var(--ui); color: rgba(255, 255, 255, 0.85); margin: 4px 0 8px; }
.pop__steps { margin: 8px 0 6px; padding: 0; list-style: none; counter-reset: s; }
.pop__steps li {
  counter-increment: s; position: relative; padding: 6px 0 6px 34px;
  font: 700 13.5px / 1.35 var(--ui); color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pop__steps li::before {
  content: counter(s); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 800 12px var(--ui); color: #111; background: var(--pop);
}
.pop__steps li.is-done { opacity: 0.45; text-decoration: line-through; }
.pop__reward {
  display: inline-block; margin: 6px 0 4px; padding: 6px 12px; border-radius: 999px;
  background: rgba(63, 209, 107, 0.15); border: 1px solid rgba(63, 209, 107, 0.5);
  font: 800 13px var(--ui); color: #6fe397;
}
.pop__row { display: flex; gap: 10px; margin-top: 12px; }
.pop__row .btn { flex: 1; min-height: 50px; padding: 10px 14px; }
.pop__row .btn--primary { font-size: 21px; }
/* A list of choices (the bus stop): one per line, scrolling if it must. */
.pop__row--list { flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.pop__row--list .btn { flex: none; min-height: 46px; font-size: 15px; text-align: left; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop__close {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 15px; line-height: 36px; padding: 0;
}
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -44%) scale(0.86); } }
@keyframes pop-drop { from { opacity: 0; transform: translate(-50%, -18px) scale(0.94); } }
@keyframes pop-out { to { opacity: 0; transform: translate(-50%, var(--pop-out-y, -50%)) scale(0.92); } }
.pop--step.is-out { --pop-out-y: -14px; }
@keyframes pop-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop, .pop-shade { animation: none !important; } }

/* ----------------------------------------------------------------------- */
/* Upright phone: four corners, a clear middle.                             */
/*   top left     radar, district and street, bars, where-to-go chip        */
/*   top right    cash, stars, weapon (speed when driving), short messages   */
/*   bottom left  the stick, with the tip card / JOB pill just above it      */
/*   bottom right the buttons, with what they'll do written above them       */
/* ----------------------------------------------------------------------- */
html.portrait-play .hudphone.tbtn { top: calc(var(--sat) + 10px); right: calc(var(--sar) + 12px); width: 36px; height: 36px; border-radius: 10px; }
html.portrait-play .hudphone.tbtn svg { width: 18px; height: 18px; }
html.portrait-play .hudchips { top: calc(var(--sat) + 10px); right: calc(var(--sar) + 12px + 36px + 6px); gap: 4px; }
html.portrait-play .cashpill { height: 36px; padding: 0 11px; border-radius: 10px; font-size: 15px; gap: 6px; }
html.portrait-play .stars { font-size: 13px; margin-right: -42px; }
html.portrait-play .tbtn.wcard { top: calc(var(--sat) + 10px + 36px + 26px); right: calc(var(--sar) + 12px); width: 92px; height: 42px; border-radius: 11px; padding: 2px 8px 4px; }
html.portrait-play .wcard svg { width: 40px; height: 22px; }
html.portrait-play .wcard .ammo { font-size: 10.5px; right: 8px; bottom: 3px; }
html.portrait-play .wcard .swap { font-size: 9px; left: 6px; top: 2px; }

/* The tip card: small, bottom left, sitting on the stick. */
html.portrait-play .tip {
  left: calc(var(--sal) + 12px);
  right: auto;
  width: min(250px, 62vw);
  bottom: calc(var(--sab) + 30px + 150px + 10px);
  max-height: 92px;
  padding: 7px 34px 8px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.3;
  background: rgba(10, 13, 19, 0.72);
}
html.portrait-play .tip__kicker { font-size: 10px; margin-bottom: 1px; }
html.portrait-play .tip__close { width: 28px; height: 28px; line-height: 28px; font-size: 12px; top: 3px; right: 3px; }
html.portrait-play .jobpill {
  top: auto;
  left: calc(var(--sal) + 12px);
  bottom: calc(var(--sab) + 30px + 150px + 10px);
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
/* A new job step: the card pops once, then sits quietly. */
.tip.is-new { animation: tip-pop 0.5s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255, 194, 26, 0.5); }
@keyframes tip-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tip.is-new { animation: none; } }
/* The card sits where the left thumb lands: touches go straight through it
   to the stick. Only the ✕ takes a tap (lines of dialogue move on by themselves). */
html.portrait-play .tip { pointer-events: none; }
html.portrait-play .tip__close { pointer-events: auto; }

/* Messages under the map (js/texts.js): text-message bubbles that slide out
   from the left, stay a few seconds and slide away. */
.texts { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: min(250px, 66vw); pointer-events: none; }
.texts.is-hidden { visibility: hidden; }
.text {
  pointer-events: auto;
  max-width: 100%;
  padding: 7px 11px 8px;
  border-radius: 4px 14px 14px 14px;
  background: rgba(12, 16, 23, 0.86);
  border-left: 3px solid var(--text, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 600 12.5px/1.3 var(--ui, system-ui, sans-serif);
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.2, 1.1, .3, 1), opacity 0.2s;
}
.text.is-in { transform: none; opacity: 1; }
.text.is-passive { pointer-events: none; }
.text.is-out { transform: translateX(calc(-100% - 24px)); opacity: 0; transition-duration: 0.24s; }
.text__from { font: 800 10px var(--ui, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text, #ffd23a); margin-bottom: 1px; }
.text:not(.has-from) .text__body { color: var(--text, #fff); }
@media (prefers-reduced-motion: reduce) { .text, .text.is-out { transition: opacity 0.2s; transform: none; } }

/* Zo's GameStop: the reaction machine inside the pop-up card. */
.arcade {
  display: block; width: 100%; height: 120px; margin: 10px 0 2px; border: 0; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, #ff4a4a, #8a0c18); color: #fff;
  font: 900 30px var(--ui, system-ui, sans-serif); letter-spacing: 0.06em;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 79, 216, 0.35);
}
.arcade.is-go { background: radial-gradient(circle at 50% 40%, #6dff7a, #0c8a28); }
.arcade.is-foul { background: radial-gradient(circle at 50% 40%, #777, #333); }

/* The opening character select (js/main.js). */
.charpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 10px; }
.charopt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px;
  border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.05);
  color: #fff; font: 800 13px var(--ui, system-ui, sans-serif);
}
.charopt.is-on { border-color: var(--gold, #ffc21a); background: rgba(255, 194, 26, 0.14); box-shadow: 0 0 16px rgba(255, 194, 26, 0.35); }
/* A little figure: shirt and shoulders, a face with hair and two eyes, his hat. */
.charopt__fig { position: relative; display: block; width: 56px; height: 66px; }
.charopt__body { position: absolute; left: 6px; right: 6px; bottom: 0; height: 22px; border-radius: 16px 16px 4px 4px; background: var(--top); box-shadow: inset 0 -5px 0 var(--bottom), inset 0 2px 0 rgba(255, 255, 255, 0.2); }
.charopt__body::before { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 7px; margin-left: -5px; border-radius: 0 0 6px 6px; background: var(--skin); }
.charopt__face { position: absolute; left: 5px; top: 4px; width: 46px; height: 46px; border-radius: 50%; background: var(--skin); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15); overflow: hidden; }
.charopt__shades { position: absolute; left: 8px; right: 8px; top: 21px; height: 9px; border-radius: 3px 3px 6px 6px; background: #111; z-index: 1; }
.charopt__hat { position: absolute; left: 3px; right: 3px; top: -1px; height: 18px; background: var(--hatc); border-radius: 24px 24px 3px 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.charopt__hat--bucket { left: -1px; right: -1px; top: 0; height: 17px; border-radius: 18px 18px 6px 6px; }
.charopt__hat--bucket::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 5px; border-radius: 4px; background: var(--hatc); }
.charopt__hat--cap::after, .charopt__hat--capback::after { content: ""; position: absolute; bottom: 0; width: 22px; height: 5px; border-radius: 3px; background: var(--hatc); }
.charopt__hat--cap::after { right: -8px; }
.charopt__hat--capback::after { left: -8px; }
.charpick__line { margin: 2px 0 10px; min-height: 2.6em; color: rgba(255, 255, 255, 0.82); font: 600 13px/1.35 var(--ui, system-ui, sans-serif); text-align: center; }
.charopt__face::before { content: ""; position: absolute; left: -4px; right: -4px; top: -10px; height: 22px; border-radius: 50%; background: var(--hair); }
.charopt__face i::before, .charopt__face i::after { content: ""; position: absolute; top: 24px; width: 5px; height: 6px; border-radius: 50%; background: #1a1210; }
.charopt__face i::before { left: 14px; }
.charopt__face i::after { right: 14px; }

/* ---------------------------------------------------------------------- */
/* The kombi ride: a card with the taxi crossing a strip of road while the */
/* radio plays, then you're dropped off.                                   */
/* ---------------------------------------------------------------------- */
.ride {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 16, 0.55);
  animation: ride-in 0.25s ease-out;
  pointer-events: auto;
}
.ride.is-out { opacity: 0; transition: opacity 0.25s; }
.ride__card {
  width: min(360px, calc(100% - 32px));
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(18, 20, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ffc21a;
  color: #f4efe6;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.ride__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffc21a; }
.ride__to { margin-top: 4px; font-size: 22px; font-weight: 900; line-height: 1.15; }
.ride__road {
  position: relative; height: 64px; margin: 14px 0 10px; overflow: hidden;
  border-radius: 10px; background: #2a2d35;
  background-image: repeating-linear-gradient(90deg, #f0d24a 0 18px, transparent 18px 36px);
  background-size: 36px 3px; background-repeat: repeat-x; background-position: 0 50px;
  animation: ride-road 0.5s linear infinite;
}
.ride__taxi { position: absolute; left: 4%; top: 6px; animation: ride-bump 0.32s ease-in-out infinite alternate; }
.ride__notes { position: absolute; right: 10px; top: 6px; font-size: 18px; color: #ffc21a; animation: ride-notes 0.9s ease-in-out infinite; }
.ride__line { font-size: 14px; font-style: italic; color: #cfc8d8; }
@keyframes ride-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ride-road { to { background-position: -36px 50px; } }
@keyframes ride-bump { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes ride-notes { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ride__road, .ride__taxi, .ride__notes { animation: none; } }

/* Going through a door: a quick fade to black and back. */
.doorfade {
  position: absolute; inset: 0; z-index: 70; pointer-events: none;
  background: #000; opacity: 0; transition: opacity 0.25s ease;
}
.doorfade.is-on { opacity: 1; }

/* Notifications: a phone-style banner dropping in at the top, briefly. */
.notifs {
  position: absolute; z-index: 40; left: 50%; top: calc(var(--sat, 0px) + 10px);
  transform: translateX(-50%); width: min(320px, calc(100% - 150px));
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.notifs.is-hidden { visibility: hidden; }
.notif {
  pointer-events: auto;
  max-width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 7px;
  border-radius: 999px;
  background: rgba(16, 19, 27, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 600 12px/1.25 var(--ui, system-ui, sans-serif);
  transform: translateY(calc(-100% - 20px)); opacity: 0;
  transition: transform 0.3s cubic-bezier(.2, 1.1, .3, 1), opacity 0.2s;
}
.notif > div { min-width: 0; }
.notif__body, .notif__from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif__from { display: none; }
.notif i { flex: none; width: 7px; height: 7px; margin-top: 0; border-radius: 50%; background: var(--text, #ffd23a); box-shadow: 0 0 8px var(--text, #ffd23a); }
.notif.is-in { transform: none; opacity: 1; }
.notif.is-out { transform: translateY(calc(-100% - 20px)); opacity: 0; transition-duration: 0.24s; }
.notif__from { font: 800 10px var(--ui, system-ui, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text, #ffd23a); margin-bottom: 1px; }
@media (prefers-reduced-motion: reduce) { .notif, .notif.is-out { transition: opacity 0.2s; transform: none; } }

/* ---------------------------------------------------------------------- */
/* Shops with a list: Honestee's rail, Bradley's lot.                      */
/* ---------------------------------------------------------------------- */
.shoptabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.shoptabs button {
  flex: 1; padding: 7px 0; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06); color: #fff; font: 800 12px var(--ui, system-ui, sans-serif);
}
.shoptabs button.is-on { background: #fff; color: #111; border-color: #fff; }
.shoplist { display: flex; flex-direction: column; gap: 6px; max-height: min(46vh, 330px); overflow-y: auto; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.shoprow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left;
  border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
  color: #fff; font: 700 14px var(--ui, system-ui, sans-serif);
}
.shoprow.is-on { border-color: var(--gold, #ffc21a); background: rgba(255, 194, 26, 0.12); }
.shoprow__swatch { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.5); }
.shoprow__name { flex: 1; min-width: 0; }
.shoprow__name small { display: block; font-weight: 600; font-size: 12px; opacity: 0.72; margin-top: 2px; }
.shoprow__price { flex: none; font-weight: 900; color: var(--gold, #ffc21a); }
.shopcash { margin: 2px 0 8px; font: 800 13px var(--ui, system-ui, sans-serif); color: #4ad07a; text-align: right; }

/* TAXI sits in the bottom-right cluster, in line with JUMP and the action button. */
.touch-right .tbtn--taxi { position: absolute; right: 186px; bottom: 4px; width: 60px; height: 60px; pointer-events: auto; }
html.portrait-play .touch-right .tbtn--taxi { right: 158px; bottom: 6px; width: 50px; height: 50px; }
/* GAS (UP in the helicopter) is a pedal, not a target: smaller than FIRE. */
.touch-right .tbtn--gas { width: 84px; height: 84px; right: 10px; bottom: 10px; font-size: 16px; }
html.portrait-play .touch-right .tbtn--gas { width: 70px; height: 70px; right: 9px; bottom: 9px; font-size: 14px; }

/* SHARE THAT: pops in under the top HUD after something big (js/social.js). */
.sharepill {
  position: absolute; right: calc(var(--sar, 0px) + 14px); top: calc(var(--sat, 0px) + 124px); transform: translate(0, -12px) scale(0.9); transform-origin: right center;
  z-index: 30; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 2px solid #111; background: #ffd23a; color: #111;
  font: 800 13px "Montserrat", system-ui, sans-serif; letter-spacing: 0.06em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: opacity 0.2s, transform 0.2s;
}
.sharepill.is-on { opacity: 1; pointer-events: auto; transform: translate(0, 0) scale(1); animation: pill-nudge 1.6s ease-in-out 0.4s infinite; }
@keyframes pill-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .sharepill.is-on { animation: none; } }
.clipview { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 12px; margin: 10px 0 4px; background: #000; }
.clipview--paper { background: #f3eee2; }

/* Today's challenges, on the pause sheet. */
.daily { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 58, 0.1); border: 1px solid rgba(255, 210, 58, 0.35); text-align: left; }
.daily__head { display: flex; justify-content: space-between; font: 800 12px "Montserrat", system-ui, sans-serif; letter-spacing: 0.1em; color: #ffd23a; margin-bottom: 6px; }
.daily__head span { letter-spacing: 0.02em; color: #fff; }
.daily ul { list-style: none; margin: 0; padding: 0; }
.daily li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font: 600 13px "Montserrat", system-ui, sans-serif; color: #eee; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.daily li:first-child { border-top: 0; }
.daily li b { color: #ffd23a; white-space: nowrap; }
.daily li.is-done span { color: #4ad07a; }
.menu__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn--share { background: #2a2140; border-color: #ffd23a; color: #ffd23a; font-size: 13px; }
.menu > #pauseDaily, .menu > .menu__pair { grid-column: 1 / -1; }
.menu > #pauseDaily:empty { display: none; }
.menu__pair .btn { min-height: 0; padding: 12px 8px; }

/* Cloud save (js/cloud.js) */
.cloud__lead { margin: 4px 0 10px; font-size: 14px; color: rgba(244, 241, 232, 0.9); }
.cloud__in {
  min-height: 44px; font: inherit; font-size: 16px; color: #f4f1e8;
  background: #1f3340; border: 2px solid #0b0b0b; border-radius: 10px; padding: 6px 10px; width: 100%;
}
#cloudNote { min-height: 1.2em; color: var(--sunset); font-weight: 700; }
#cloudNote.is-ok { color: #4ad07a; }
#cloud a { color: var(--gold, #ffd23a); }

/* The activity bar under the map: hype, a delivery timer (js/activities.js) */
.actbar {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 118px); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 30;
  background: rgba(10, 10, 14, 0.72); border: 2px solid #0b0b0b; border-radius: 12px; padding: 6px 12px;
  color: #f4f1e8; font: 800 14px/1.2 Montserrat, system-ui, sans-serif; min-width: 180px;
}
.actbar.is-on { display: flex; }
.actbar__m { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden; }
.actbar__m i { display: block; height: 100%; width: 0; background: #ffd23a; transition: width 0.15s linear; }