/* Tap Lanes — interface "L · Amber Accent" (chosen from ui-designs.html).
 * Almost everything is plain white type straight on the scene: no cards, no
 * frames, no button shapes. The amber neon glow is kept for the one thing
 * that matters on each screen (play, the score, a new best, the main action).
 * White type carries a dark shadow so it reads over any road colour. */

:root {
  --amber: #ffb21f;
  --amber-l: #ffd27a;
  --ink: #15142a;
  --green: #3dffb0;
  --red: #ff6b7d;
  --cyan: #4fe3ff;
  --orange: #ff9a3d;
  --line: rgba(255, 255, 255, 0.16);
  --muted: rgba(255, 255, 255, 0.62);
  --read: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.45);
  --glow: 0 0 6px rgba(255, 178, 31, 0.95), 0 0 18px rgba(255, 150, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.6);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: #fff;
  background: #03030a;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  text-shadow: var(--read);
}
button, select { font: inherit; color: inherit; text-shadow: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
[dir="rtl"] .ico.flip { transform: scaleX(-1); }
.acc { color: #fff3d6; text-shadow: var(--glow); }
.acc .ico, .ico.acc { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); }

#stage { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fx-text { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#fx-text span {
  position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1;
  font-weight: 900; will-change: transform, opacity; letter-spacing: 0.02em;
  text-shadow: 0 0 6px currentColor, 0 1px 3px rgba(0, 0, 0, 0.8);
}
#fx-text span.ban { letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor, 0 1px 3px rgba(0, 0, 0, 0.7); }
#fx-text span.gate { letter-spacing: 0.18em; text-shadow: 0 0 16px currentColor; }
#fx-text span.rival { font-weight: 800; text-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0, 0, 0, 0.8); }

/* --- shared pieces: everything is text and icons ------------------------------------ */
.glass-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  color: #fff; opacity: 0.92;
  transition: transform 0.1s, opacity 0.15s;
}
.glass-btn:hover { opacity: 1; }
.glass-btn:active { transform: scale(0.88); }
.glass-btn svg:not(.ico) { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.glass-btn .wave, .glass-btn .cross { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.glass-btn .cross { display: none; }
.glass-btn.small { width: 36px; height: 36px; }
.glass-btn.small .ico { width: 20px; height: 20px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 2px;
  font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.pill.has-plus { gap: 7px; }
.pill-plus {
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  color: var(--amber);
}
.pill-plus .ico { width: 19px; height: 19px; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255, 178, 31, 0.8)); }
.pill-plus:active { transform: scale(0.88); }
.gem-ico {
  width: 15px; height: 15px; flex: none; display: inline-block;
  background: linear-gradient(160deg, #e9fdff 0 30%, #5fe3ff 31% 62%, #1aa6d9 63%);
  clip-path: polygon(22% 8%, 78% 8%, 100% 38%, 50% 96%, 0 38%);
  filter: drop-shadow(0 0 3px rgba(80, 220, 255, 0.8));
}

/* The main action of a screen: amber neon text, no box, a generous tap area */
.wide-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  min-height: 54px; padding: 8px 18px;
  color: #fff3d6; text-shadow: var(--glow);
  font-size: 19px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.1s;
  flex: none;
}
.wide-btn .ico { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); }
.wide-btn:active { transform: scale(0.96); }

/* Tabs: plain words, the chosen one in amber with a thin glowing line under it */
.seg { display: flex; justify-content: center; gap: 28px; flex: none; }
.seg button { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 2px; font-weight: 900; font-size: 15px; color: var(--muted); }
.seg button.on { color: #fff3d6; text-shadow: var(--glow); }
.seg button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.seg .ico { width: 17px; height: 17px; }
.seg button.on .ico { color: var(--amber); }

.glass-tile {
  min-height: 48px; padding: 8px 10px;
  font-weight: 900; font-size: 17px;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s;
}
.glass-tile:hover, .glass-tile:active { color: #fff3d6; text-shadow: var(--glow); }

/* --- HUD ----------------------------------------------------------------------------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
}
#hud .glass-btn { pointer-events: auto; }
.hud-left { justify-self: start; }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-score {
  font-size: clamp(48px, 9vmin, 70px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff3d6; text-shadow: var(--glow);
}
.hud-score.bump { animation: bump 0.22s ease-out; }
@keyframes bump { 0% { transform: scale(1.16); } 100% { transform: scale(1); } }
.hud-best:empty { display: none; }
.hud-best { font-size: 13px; font-weight: 700; color: var(--muted); }
/* Levels: how far to the finish line */
.hud-prog { width: min(46vw, 220px); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.hud-prog i { display: block; height: 100%; width: 0; background: #8dffa8; box-shadow: 0 0 8px #8dffa8; transition: width 0.25s; }
.hud-gems { position: fixed; right: calc(var(--safe-r) + 16px); bottom: calc(var(--safe-b) + 14px); }

/* "Tap to switch" over the road */
.hint {
  position: absolute; left: 0; right: 0; top: 62%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 5;
}
.hint .hand { display: grid; place-items: center; animation: tapPulse2 1.1s ease-in-out infinite; }
.hint .hand .ico { width: 38px; height: 38px; color: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 178, 31, 0.9)); }
.hint b { font-size: clamp(22px, 6vw, 30px); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #fff3d6; text-shadow: var(--glow); text-align: center; padding: 0 16px; }
@keyframes tapPulse2 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(5px) scale(0.92); } }

#toast {
  position: absolute;
  left: 50%; top: calc(var(--safe-t) + 92px);
  transform: translate(-50%, -12px);
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(6, 5, 14, 0.82);
  color: #fff3d6; text-shadow: var(--glow);
  font-weight: 900; font-size: 15px;
  width: max-content; max-width: 90vw; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 30;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- overlays -------------------------------------------------------------------------- */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: calc(var(--safe-t) + 14px) calc(var(--safe-r) + 18px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 18px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
  z-index: 10;
}
.overlay.show { opacity: 1; visibility: visible; }
.overlay.dim { background: rgba(4, 3, 10, 0.8); }
.overlay.dim-down { background: linear-gradient(rgba(4, 3, 10, 0.45), rgba(4, 3, 10, 0.78) 45%, rgba(4, 3, 10, 0.9)); }
.overlay > .screen, .overlay > .big-screen, .overlay > .round-row, .result-side > .round-row { transform: translateY(14px); transition: transform 0.28s cubic-bezier(.2, .9, .3, 1.2); }
.overlay.show > .screen, .overlay.show > .big-screen, .overlay.show > .round-row, .overlay.show .result-side > .round-row { transform: none; }
.result-side { display: contents; }

.screen { width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.screen.narrow { max-width: 420px; }
.screen-head { display: grid; grid-template-columns: 44px 1fr minmax(44px, auto); align-items: center; gap: 10px; flex: none; }
.screen-head h2 { margin: 0; text-align: center; font-size: 22px; font-weight: 900; letter-spacing: 0.04em; }
.head-meta { justify-self: end; display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 15px; }
.scroll { overflow-y: auto; touch-action: pan-y; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; }
.cap { font-size: 13px; font-weight: 900; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.sub-line { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); min-height: 1em; }
.sub-line:empty { display: none; }
.sub-line .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; color: var(--amber); }
.rules { margin: 0; text-align: center; font-weight: 700; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sub-h { margin: 4px 0 0; font-size: 12px; font-weight: 900; text-align: center; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* --- main menu ----------------------------------------------------------------------------- */
#ov-menu { background: linear-gradient(rgba(3, 3, 10, 0.45), rgba(3, 3, 10, 0) 28%, rgba(3, 3, 10, 0) 58%, rgba(3, 3, 10, 0.6)); display: block; }
.menu-top {
  position: absolute;
  top: calc(var(--safe-t) + 8px);
  left: calc(var(--safe-l) + 8px);
  right: calc(var(--safe-r) + 16px);
  display: flex; align-items: center; gap: 2px;
}
.menu-top-gap { flex: 1; }
.gift-btn {
  position: relative; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.gift-btn .ico { width: 19px; height: 19px; }
.gift-btn:active { transform: scale(0.94); }
.gift-btn:has(#badge-gift:not([hidden])) { color: #fff3d6; text-shadow: var(--glow); }
.gift-btn:has(#badge-gift:not([hidden])) .ico { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); animation: wiggle 1.8s 0.6s ease-in-out infinite; }
.gift-btn .badge { display: none; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
.logo {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 14vh);
  margin: 0; text-align: center; font-weight: 900; line-height: 0.92;
  pointer-events: none;
}
.logo small { display: block; font-size: clamp(13px, 3.8vw, 17px); letter-spacing: 0.5em; padding-left: 0.5em; margin-bottom: 2px; opacity: 0.9; }
.logo span { display: block; font-size: clamp(64px, 19vw, 104px); letter-spacing: -0.01em; }
.logo i { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.logo i:empty { display: none; }
.tap-start {
  position: absolute; left: 0; right: 0; top: 54%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; text-align: center; padding: 0 16px;
}
.tap-start b { font-size: clamp(22px, 6vw, 28px); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: #fff3d6; text-shadow: var(--glow); animation: breathe 2.2s ease-in-out infinite; }
.tap-start small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.dock {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 88px);
  width: min(460px, calc(100% - 16px));
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
}
.dock button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0;
  font-size: 11.5px; font-weight: 800; line-height: 1.15; text-align: center;
}
.dock-b { display: grid; place-items: center; color: #fff; transition: transform 0.1s; }
.dock-b .ico { width: 26px; height: 26px; }
.dock button:active .dock-b { transform: scale(0.88); }
/* Something waiting in a mode (a streak, a ball you can afford): its icon lights up */
.dock button:has(.badge:not([hidden])) .dock-b { color: var(--amber); }
.dock button:has(.badge:not([hidden])) .dock-b .ico { filter: drop-shadow(0 0 6px rgba(255, 178, 31, 0.95)); }
.dock button:has(.badge:not([hidden])) > span:not(.dock-b) { color: #fff3d6; }
.badge {
  position: absolute; top: 0; left: calc(50% + 12px);
  display: flex; align-items: center; gap: 1px;
  font-style: normal; font-size: 11px; font-weight: 900; color: var(--amber-l);
  text-shadow: 0 0 6px rgba(255, 178, 31, 0.9), 0 1px 2px #000;
}
.badge .ico { width: 11px; height: 11px; color: var(--amber); }
.c-blue, .c-orange, .c-violet, .c-green, .c-red { color: inherit; }

/* --- missions ------------------------------------------------------------------------------ */
.rank-card { display: flex; align-items: center; gap: 16px; padding: 6px 4px 12px; border-bottom: 1px solid var(--line); }
.rank-badge { position: relative; width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; }
.rank-badge .ico { width: 20px; height: 20px; color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); }
.rank-badge b { font-size: 38px; font-weight: 900; line-height: 1; color: #fff3d6; text-shadow: var(--glow); }
.rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-info small { font-size: 11px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.rank-info b { font-size: 22px; font-weight: 900; }
.rank-info span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rank-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin: 4px 0 2px; }
.rank-bar i { display: block; height: 100%; width: 0; background: var(--amber); box-shadow: 0 0 8px var(--amber); transition: width 0.6s; }
.mission-list { display: flex; flex-direction: column; }
.mission { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.m-ico { display: grid; place-items: center; }
.m-ico .ico { width: 22px; height: 22px; }
.m-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.m-body b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.m-body small { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: #fff; }
.m-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.m-reward { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 900; }
.m-reward .gem-ico { width: 13px; height: 13px; }
.m-skip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0 6px 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.m-skip .ico { width: 15px; height: 15px; }
.mission.done .m-ico .ico, .mission.done .m-body b { color: #fff3d6; }
.mission.done .m-ico .ico { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); }
.mission.done .m-bar i { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.mission.done .m-skip { display: none; }

/* --- online leaderboard ---------------------------------------------------------------------- */
.lb-screen { height: 100%; max-width: 460px; }
.lb-reset { margin: -4px 0 0; min-height: 1em; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.lb-list { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; }
.lb-list li, .lb-me { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; flex: none; }
.lb-list .rk, .lb-me .rk { width: 34px; text-align: center; font-weight: 900; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.lb-list .nm, .lb-me .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list b, .lb-me b { font-variant-numeric: tabular-nums; }
.lb-list li.top1 .rk { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 211, 77, 0.8), 0 1px 2px #000; }
.lb-list li.top2 .rk { color: #e6edf7; text-shadow: 0 0 8px rgba(230, 237, 247, 0.6), 0 1px 2px #000; }
.lb-list li.top3 .rk { color: #f2a86a; text-shadow: 0 0 8px rgba(242, 168, 106, 0.7), 0 1px 2px #000; }
/* your own row: the one lit line */
.lb-list li.me, .lb-me { color: #fff3d6; text-shadow: var(--glow); border-bottom-color: rgba(255, 178, 31, 0.6); }
.lb-list li.me .rk, .lb-me .rk { color: var(--amber-l); }
.lb-me { border-top: 1px solid rgba(255, 178, 31, 0.6); margin-top: 2px; }
.lb-list li.lb-state { justify-content: center; border: 0; color: var(--muted); font-size: 14px; text-align: center; padding: 22px 12px; }
.lb-name { display: flex; flex-direction: column; gap: 6px; flex: none; }
.lb-name label { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.lb-name-row { display: flex; gap: 10px; align-items: center; }
.lb-name input {
  flex: 1; min-width: 0; height: 44px; padding: 0 2px;
  border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 0;
  background: transparent; color: #fff; font: inherit; font-size: 16px; font-weight: 800;   /* 16 px: no zoom on iPhone */
  text-shadow: var(--read);
}
.lb-name input:focus { outline: none; border-bottom-color: var(--amber); box-shadow: 0 2px 8px -4px var(--amber); }
.lb-save { height: 44px; padding: 0 8px; font-weight: 900; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff3d6; text-shadow: var(--glow); }
.lb-save:disabled { opacity: 0.5; }
.lb-signin { flex: none; min-height: 46px; font-weight: 900; font-size: 15px; color: #fff3d6; text-shadow: var(--glow); }
.lb-name[hidden], .seg[hidden], .seg button[hidden] { display: none; }
#lb-msg { min-height: 1.1em; font-size: 13px; font-weight: 800; }
#lb-msg.ok { color: var(--green); }
#lb-msg.err { color: var(--red); }
.lb-line { color: #fff3d6; text-shadow: var(--glow); }
.lb-line .ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; color: var(--amber); }

/* --- shop ---------------------------------------------------------------------------------- */
#ov-shop .screen { height: 100%; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px 8px; align-content: start; padding-bottom: 6px; }
.shop-grid.roads { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 10px;
  font-weight: 800; font-size: 13.5px;
  transition: transform 0.1s;
}
.shop-item:active { transform: scale(0.95); }
.shop-item img { width: 70px; height: 70px; }
.shop-item img.road-thumb { width: 100%; height: auto; aspect-ratio: 220 / 130; border-radius: 10px; opacity: 0.92; }
.shop-item .price { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; }
.shop-item .price .gem-ico { width: 12px; height: 12px; }
.shop-item .state { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.shop-item .state .ico { width: 13px; height: 13px; }
.shop-item.on > span:not(.state) { color: #fff3d6; text-shadow: var(--glow); }
.shop-item.on .state { color: var(--amber-l); font-weight: 900; }
.shop-item.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 1px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.shop-item.on img.road-thumb { opacity: 1; box-shadow: 0 0 0 1.5px var(--amber), 0 0 14px rgba(255, 178, 31, 0.5); }
.shop-item.locked { opacity: 0.5; }
.shop-item.poor .price { color: var(--red); }
.try-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 4px; font-size: 11.5px; font-weight: 900; color: var(--amber-l); text-shadow: 0 0 6px rgba(255, 178, 31, 0.8), 0 1px 2px #000; }
.try-chip .ico { width: 14px; height: 14px; color: var(--amber); }
.trying-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-l); font-weight: 900; }
.trying-tag .ico { width: 13px; height: 13px; }

/* --- help, settings ---------------------------------------------------------------------- */
.help { display: flex; flex-direction: column; gap: 14px; }
.help-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.help-ico { display: grid; place-items: center; padding-top: 1px; color: var(--amber); }
.help-ico .ico { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(255, 178, 31, 0.7)); }
.help p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; }

.settings { display: flex; flex-direction: column; }
.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 4px 2px;
  font-size: 16px; font-weight: 800; text-align: start;
  border-bottom: 1px solid var(--line);
}
.switch { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.18); transition: background 0.15s, box-shadow 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
a.setting { color: inherit; text-decoration: none; }
a.setting .ico { color: var(--muted); }
.setting.on .switch { background: var(--amber); box-shadow: 0 0 10px rgba(255, 178, 31, 0.6); }
.setting.on .switch::after { transform: translateX(20px); }
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .setting.on .switch::after { transform: translateX(-20px); }
#lang-select { font-weight: 800; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--amber); background: transparent; color: #fff; max-width: 170px; text-shadow: none; }
#lang-select option { color: var(--ink); }

/* --- result & pause ---------------------------------------------------------------------------- */
.big-screen { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 100%; }
.result-score { font-size: clamp(90px, 26vw, 136px); font-weight: 900; line-height: 0.95; font-variant-numeric: tabular-nums; }
.ribbon { font-size: 15px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: #fff3d6; text-shadow: var(--glow); animation: pop 0.45s 0.25s both cubic-bezier(.2, .9, .3, 1.4); }
.result-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(380px, 100%); margin-top: 12px; }
.result-stats div { display: flex; flex-direction: column; align-items: center; }
.result-stats b { display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 900; white-space: nowrap; }
.result-stats span { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; line-height: 1.2; }
.result-stats .gem-ico { width: 14px; height: 14px; }
.result-missions { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: min(360px, 100%); }
.result-missions li { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; animation: pop 0.4s 0.4s both; }
.result-missions li .ico { width: 16px; height: 16px; color: var(--amber); filter: drop-shadow(0 0 4px rgba(255, 178, 31, 0.9)); }
.result-missions li b { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--amber-l); }
.result-missions .gem-ico { width: 12px; height: 12px; }

.round-row { display: flex; align-items: center; justify-content: center; gap: 30px; }
.round-btn { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 6px; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.round-btn span { display: grid; place-items: center; transition: transform 0.1s; }
.round-btn .ico { width: 20px; height: 20px; }
.round-btn em { font-style: normal; line-height: 1.15; white-space: nowrap; }
.round-btn em:empty { display: none; }
.round-btn:active span { transform: scale(0.88); }
/* pause: resume is the one lit action */
.round-btn.go { flex-direction: column; gap: 4px; color: #fff3d6; text-shadow: var(--glow); font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.round-btn.go .ico { width: 52px; height: 52px; color: var(--amber); filter: drop-shadow(0 0 8px rgba(255, 178, 31, 0.95)); }
.tap-hint {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(19px, 5.2vw, 25px); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
  color: #fff3d6; text-shadow: var(--glow);
  opacity: 0; transition: opacity 0.3s;
  padding: 0 12px;
}
.tap-hint .ico { display: none; }
.tap-hint.on { opacity: 1; animation: breathe 2s ease-in-out infinite; }
.round-row.tight { gap: 26px; }
#ov-result .round-row { opacity: 0; transition: opacity 0.35s, transform 0.35s; }
/* result screen: Main menu / Shop (or Missions, Share) 25 % bigger */
#ov-result .round-row.tight { gap: 32px; }
#ov-result .round-btn { gap: 9px; min-height: 55px; font-size: 17.5px; }
#ov-result .round-btn .ico { width: 25px; height: 25px; }
#ov-result .round-row.in { opacity: 1; }

/* --- revive, free gems, test ad ---------------------------------------------------------------- */
.revive-ring { position: relative; width: 150px; height: 150px; margin: 4px 0; }
.revive-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.revive-ring circle { fill: none; stroke-width: 4; }
.revive-ring .track { stroke: rgba(255, 255, 255, 0.16); }
.revive-ring .left { stroke: var(--amber); stroke-linecap: round; transition: stroke-dashoffset 0.05s linear; filter: drop-shadow(0 0 6px rgba(255, 178, 31, 0.9)); }
.revive-go { position: absolute; inset: 16px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.revive-go .ico { width: 34px; height: 34px; color: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 178, 31, 0.9)); }
.revive-go b { font-size: 34px; font-weight: 900; line-height: 1; color: #fff3d6; text-shadow: var(--glow); }
.revive-go:active { transform: scale(0.95); }
.earn-gem { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; }
.earn-gem .gem-ico { width: 52px; height: 52px; animation: pop 0.4s both; filter: drop-shadow(0 0 12px rgba(80, 220, 255, 0.8)); }
.earn-gem b { font-size: 46px; font-weight: 900; color: #fff3d6; text-shadow: var(--glow); }
#ov-earn.short #earn-title { color: var(--red); }
#ov-earn.short.show .earn-gem .gem-ico { animation: pop 0.4s both, nope 0.45s 0.35s; }
@keyframes nope { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.link-btn { padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn[data-action="revive-no"] { padding: 10px 17.5px; font-size: 17.5px; font-weight: 500; text-underline-offset: 4px; }   /* "No thanks" under Keep going: 25 % bigger, not bold */
.ad-standin { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(4, 4, 12, 0.94); color: #fff; font-family: var(--font); }
.ad-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 20px; }
.ad-box small { font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; }
.ad-box .ad-count { font-size: 72px; font-weight: 900; color: #fff3d6; text-shadow: var(--glow); }
.ad-close { padding: 8px 16px; color: var(--muted); font-weight: 800; text-decoration: underline; }

/* --- brand --------------------------------------------------------------------------------------- */
.brand { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: flex-end; }
.brand-credit { padding-right: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.brand-link { display: block; transition: transform 0.15s; }
.brand-link img { display: block; width: 120px; height: auto; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6)); }
.brand-link:hover { transform: scale(1.05); }
.brand-link:active { transform: scale(0.97); }
.brand-link.no-link { pointer-events: none; }
.brand[hidden] { display: none; }
#ov-pause { padding-bottom: calc(var(--safe-b) + 90px); }
/* Settings from the pause screen, top right */
.pause-gear { position: absolute; top: calc(var(--safe-t) + 8px); right: calc(var(--safe-r) + 12px); width: auto; padding: 0 8px; gap: 7px; display: flex; font-size: 14px; font-weight: 800; }
.pause-gear .ico { width: 20px; height: 20px; }

/* --- duels: ball pickers, race levels, HUD -------------------------------------------------------- */
.vs-levels { display: flex; flex-direction: column; }
.vs-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; direction: ltr; }   /* player 1 left, as on the split screen */
[dir="rtl"] .vs-pick > .picker { direction: rtl; }
.picker { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; min-width: 0; }
.picker .tag { font-style: normal; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 8px rgba(79, 227, 255, 0.8), 0 1px 2px #000; }
.picker.p2 .tag { color: var(--orange); text-shadow: 0 0 8px rgba(255, 154, 61, 0.8), 0 1px 2px #000; }
.pick-row { display: flex; align-items: center; gap: 4px; }
/* keyboard: the key that does what the arrow does, under it */
.pick-row .glass-btn[data-key] { position: relative; }
.pick-row .glass-btn[data-key]::after { content: attr(data-key); position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); }
.pick-row .glass-btn[data-key]::after, .keycap {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px;
  font: 900 12px/1 var(--font); color: #fff; text-shadow: none;
  background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 2px 0 rgba(0, 0, 0, 0.45);
}
.pick-ball { width: 84px; height: 84px; }
.pick-name { font-size: 15px; font-weight: 900; text-align: center; }
.pick-key { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }

#vs-hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#vs-pause { position: absolute; left: calc(var(--safe-l) + 6px); top: calc(var(--safe-t) + 6px); pointer-events: auto; }
.vs-timer { position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 3px 12px; border-radius: 10px; background: rgba(3, 3, 10, 0.55); }
.vs-timer b { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff3d6; text-shadow: var(--glow); }
.vs-timer b.low { color: #ffd0d6; text-shadow: 0 0 8px var(--red), 0 0 18px rgba(255, 107, 125, 0.6); animation: tapPulse 0.8s ease-in-out infinite; }
@keyframes tapPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.vs-timer small { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#vs-hud.split.side .vs-timer { top: calc(var(--safe-t) + 34px); }
#vs-hud.split.stack .vs-timer { top: 50%; }
#vs-hud.race .vs-timer { top: calc(var(--safe-t) + 36px); }
.vs-score { position: absolute; display: flex; align-items: center; gap: 8px; font-weight: 900; white-space: nowrap; }
.vs-score .vs-who { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; max-width: 40vw; overflow: hidden; }
.vs-score .vs-who em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.vs-score .vs-who img { width: 18px; height: 12px; border-radius: 2px; }
.vs-score b { font-size: 24px; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: end; }
.vs-score .dots { display: inline-flex; gap: 4px; }
.vs-score .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.vs-score .dots i.on { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.vs-score.lead b { color: #fff3d6; text-shadow: var(--glow); }
#vs-hud.split #vs-score-0 .vs-who { color: var(--cyan); }
#vs-hud.split #vs-score-1 .vs-who { color: var(--orange); }
/* 2 players side by side (landscape): player 1 top left (after the pause button), player 2 top right */
#vs-hud.split.side .vs-score { top: calc(var(--safe-t) + 14px); flex-wrap: wrap; max-width: calc(50% - 64px); }
#vs-hud.split.side #vs-score-0 { left: calc(var(--safe-l) + 54px); }
#vs-hud.split.side #vs-score-1 { right: calc(var(--safe-r) + 14px); flex-direction: row-reverse; }
#vs-hud.split.side .vs-score .vs-who { max-width: 22vw; }
/* one above the other (portrait): each at the top left of its half, the clock on the line between */
#vs-hud.split.stack .vs-score { left: calc(var(--safe-l) + 54px); }
#vs-hud.split.stack #vs-score-0 { top: calc(var(--safe-t) + 14px); }
#vs-hud.split.stack #vs-score-1 { top: calc(50% + 14px); left: calc(var(--safe-l) + 14px); }
#vs-hud.race .vs-score { left: calc(var(--safe-l) + 54px); min-width: 150px; justify-content: space-between; }
#vs-hud.race #vs-score-0 { top: calc(var(--safe-t) + 10px); }
#vs-hud.race #vs-score-0 .vs-who { color: var(--cyan); }
#vs-hud.race #vs-score-1 { top: calc(var(--safe-t) + 44px); }
#vs-hud.race #vs-score-1 .vs-who { color: var(--orange); }
@media (max-width: 520px) { #vs-hud.race .vs-timer, #vs-hud.split.side .vs-timer { top: auto; bottom: calc(var(--safe-b) + 16px); transform: translateX(-50%); } }
.vs-banner {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(0.6);
  text-align: center; font-size: clamp(28px, 7vmin, 50px); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff3d6; text-shadow: var(--glow);
  opacity: 0; padding: 0 16px;
}
.vs-banner.show { opacity: 1; transform: translateY(-50%) scale(1); transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.4), opacity 0.15s; }
.vs-banner.count, .vs-banner.go { font-size: clamp(64px, 18vmin, 120px); }
#vs-hud.split .vs-banner.count, #vs-hud.split .vs-banner.go { font-size: clamp(48px, 12vmin, 90px); }

/* first count-in of a 2-player match: each player's controls in the middle of their half */
.vs-ctrl { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vs-ctrl em { font-style: normal; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.vs-ctrl.p1 em { color: var(--cyan); text-shadow: 0 0 8px rgba(79, 227, 255, 0.8), 0 1px 2px #000; }
.vs-ctrl.p2 em { color: var(--orange); text-shadow: 0 0 8px rgba(255, 154, 61, 0.8), 0 1px 2px #000; }
.vs-ctrl .keys { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; padding: 8px 12px; border-radius: 14px; background: rgba(3, 3, 10, 0.55); }
.vs-ctrl .keys .ico { width: 22px; height: 22px; }
.vs-ctrl .or { color: var(--muted); font-size: 13px; padding: 0 2px; }
.keycap.big { min-width: 34px; height: 34px; border-radius: 8px; font-size: 16px; padding: 0 8px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.5); }
#vs-hud.side #vs-ctrl-0 { left: 25%; top: 30%; }
#vs-hud.side #vs-ctrl-1 { left: 75%; top: 30%; }
#vs-hud.stack #vs-ctrl-0 { left: 50%; top: 24%; }
#vs-hud.stack #vs-ctrl-1 { left: 50%; top: 74%; }

#ov-pause.vs { flex-direction: column; gap: 16px; }
.pause-wins { display: flex; justify-content: space-between; align-self: stretch; padding: 0 6vw; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.vs-side small { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-side b { font-size: 40px; font-weight: 900; line-height: 1; }
.vs-side .dots { display: flex; gap: 7px; margin-top: 5px; }
.vs-side .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.vs-side .dots i.on { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* Short screens (phones in landscape): smaller, the result and pause side by
 * side, the logo credit in the corner. */
@media (max-height: 560px) {
  .logo { top: calc(var(--safe-t) + 8vh); }
  .logo span { font-size: clamp(50px, 15vh, 78px); }
  .logo small { font-size: 13px; }
  .logo i { margin-top: 6px; font-size: 13px; }
  .tap-start { top: 47%; }
  .tap-start b { font-size: 22px; }
  .dock { bottom: calc(var(--safe-b) + 10px); width: min(380px, calc(100% - 260px)); }
  .dock-b .ico { width: 24px; height: 24px; }
  .dock button { font-size: 11px; gap: 4px; }
  .brand { left: auto; right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 8px); transform: none; }
  .brand-link img { width: 92px; }
  .overlay { gap: 12px; }
  #ov-result, #ov-pause { flex-direction: row; gap: 40px; padding-bottom: calc(var(--safe-b) + 14px); }
  #ov-result .result-side { display: flex; flex-direction: column-reverse; align-items: center; gap: 16px; }
  #ov-result .tap-hint { font-size: 17px; max-width: 240px; padding: 0; }
  #ov-result .big-screen { gap: 4px; }
  .result-score { font-size: clamp(48px, 17vh, 84px); }
  .result-stats { margin-top: 2px; }
  .result-stats b { font-size: 17px; }
  .result-missions li { font-size: 12px; }
  .round-btn.go .ico { width: 42px; height: 42px; }
  .wide-btn { min-height: 46px; }
  .screen { gap: 10px; }
  .rank-card { padding-bottom: 6px; }
  .mission { padding: 7px 2px; }
  #ov-missions .screen, #ov-versus .screen, #ov-race .screen { overflow-y: auto; }
  .hint { top: 56%; }
  .lb-list li, .lb-me { padding: 6px 4px; font-size: 14px; }
  .lb-name label { display: none; }
  .lb-name-row input, .lb-save { height: 40px; }
  .picker { padding: 4px; gap: 4px; }
  .pick-ball { width: 56px; height: 56px; }
  .gift-btn span { display: none; }
  .pause-wins { position: absolute; left: 0; right: 0; top: calc(50% + 8px); transform: translateY(-50%); padding: 0 calc(var(--safe-r) + 9vw) 0 calc(var(--safe-l) + 9vw); pointer-events: none; }
}
@media (max-width: 420px) { .hud-score { font-size: 48px; } .menu-top { gap: 0; } .gift-btn { padding: 0 6px; } }
/* Pause menu on a desktop (mouse or touchpad) with a landscape window: everything 25 % bigger.
   Phones and tablets keep the sizes above, held either way. */
@media (hover: hover) and (pointer: fine) and (orientation: landscape) {
  #ov-pause .cap { font-size: 16px; }
  #ov-pause .round-row { gap: 38px; }
  #ov-pause .round-btn { gap: 9px; min-height: 55px; font-size: 17.5px; }
  #ov-pause .round-btn .ico { width: 25px; height: 25px; }
  #ov-pause .round-btn.go { gap: 5px; font-size: 20px; }
  #ov-pause .round-btn.go .ico { width: 65px; height: 65px; }
  .pause-gear { padding: 0 10px; gap: 9px; font-size: 17.5px; }
  .pause-gear .ico { width: 25px; height: 25px; }
  #ov-pause .vs-side small { font-size: 15px; }
  #ov-pause .vs-side b { font-size: 50px; }
  #ov-pause .vs-side .dots { gap: 9px; margin-top: 6px; }
  #ov-pause .vs-side .dots i { width: 12px; height: 12px; }
}
@media (hover: hover) and (pointer: fine) and (orientation: landscape) and (max-height: 560px) {
  #ov-pause .round-btn.go .ico { width: 52px; height: 52px; }   /* a short window: 42 px × 1.25 */
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

/* --- Levels -------------------------------------------------------------------------- */
.lv-total .ico { width: 18px; height: 18px; color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.9)); }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 6px; align-content: start; padding: 16px 14px; }
.lv {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  aspect-ratio: 1; max-width: 100%; border-radius: 50%;
  border: 1.5px solid var(--line);
  font-weight: 900; font-size: clamp(18px, 5.4vw, 24px); font-variant-numeric: tabular-nums;
  transition: transform 0.1s, color 0.15s;
}
.lv:active { transform: scale(0.92); }
.lv.challenge { border-style: dashed; }
.lv.now { color: #fff3d6; text-shadow: var(--glow); border-color: var(--amber); box-shadow: 0 0 12px rgba(255, 178, 31, 0.45), inset 0 0 10px rgba(255, 178, 31, 0.25); animation: lvPulse 1.6s ease-in-out infinite; }
@keyframes lvPulse { 50% { box-shadow: 0 0 20px rgba(255, 178, 31, 0.7), inset 0 0 12px rgba(255, 178, 31, 0.35); } }
.lv.locked { color: rgba(255, 255, 255, 0.32); cursor: default; }
.lv.locked .ico { width: 18px; height: 18px; }
.lv .stars { display: flex; gap: 1px; line-height: 0; }
.lv .stars .ico { width: 11px; height: 11px; color: rgba(255, 255, 255, 0.22); }
.lv .stars .ico.on { color: var(--amber); filter: drop-shadow(0 0 3px rgba(255, 178, 31, 0.9)); }
.result-stars { display: flex; justify-content: center; gap: 10px; line-height: 0; }
.result-stars .ico { width: clamp(52px, 13vmin, 74px); height: clamp(52px, 13vmin, 74px); color: rgba(255, 255, 255, 0.18); transform: scale(0.6); opacity: 0; transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.5), opacity 0.2s; }
.result-stars .ico.in { transform: none; opacity: 1; }
.result-stars .ico.on { color: var(--amber); filter: drop-shadow(0 0 10px rgba(255, 178, 31, 0.95)); }
@media (prefers-reduced-motion: reduce) { .lv.now { animation: none; } }