:root {
  --ink: #5c2a0c;
  --ink-2: #3a1a06;
  --cream: #fff4e2;
  --cream-2: #f6e3c4;
  --yellow: #ffc21a;
  --yellow-2: #f09a0c;
  --sky: #2fa8e4;
  --sky-2: #b5e9fa;
  --red: #ff5a3c;
  --font-display: "Lilita One", "Arial Black", sans-serif;
  --font-ui: "Fredoka", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 0%, #6cc8f0 0%, #2a8fc4 55%, #17618e 100%);
  font-family: var(--font-ui);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
/* the game fills the entire window, edge to edge */
#wrap { position: fixed; inset: 0; display: flex; }
#stage { --s: 1; position: relative; overflow: hidden; background: var(--sky); }
#stage canvas { display: block; }

/* all sizes are in game pixels (600×450 stage) × --s */
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10px * var(--s)); text-align: center; }
[hidden] { display: none !important; }
.overlay.dim { background: rgba(20, 60, 90, 0.35); backdrop-filter: blur(3px); animation: fade-in 0.25s ease-out; }

/* ------------------------------------------------------------------ loading */
.loading { background: linear-gradient(180deg, var(--sky), var(--sky-2)); }
.load-text { font-family: var(--font-display); font-size: calc(18px * var(--s)); color: var(--cream); -webkit-text-stroke: calc(1.4px * var(--s)) var(--ink); paint-order: stroke fill; }
.logo { width: calc(330px * var(--s)); filter: drop-shadow(0 calc(5px * var(--s)) 0 rgba(58, 26, 6, 0.25)); pointer-events: none; }
.logo.pulse { animation: breathe 1.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ buttons */
.btn {
  font-family: var(--font-display);
  font-size: calc(17px * var(--s));
  color: var(--ink);
  background: var(--cream);
  border: calc(3px * var(--s)) solid var(--ink);
  border-radius: 999px;
  padding: calc(5px * var(--s)) calc(20px * var(--s));
  box-shadow: 0 calc(4px * var(--s)) 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(.3, 1.8, .5, 1), box-shadow 0.12s;
}
.btn:hover { transform: translateY(calc(-2px * var(--s))) scale(1.04); box-shadow: 0 calc(6px * var(--s)) 0 var(--ink); }
.btn:active { transform: translateY(calc(3px * var(--s))); box-shadow: 0 calc(1px * var(--s)) 0 var(--ink); }
.btn:focus-visible { outline: calc(3px * var(--s)) solid #fff; outline-offset: calc(3px * var(--s)); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.play {
  position: relative;
  font-size: calc(22px * var(--s));
  letter-spacing: 0.04em;
  padding: calc(3px * var(--s)) calc(30px * var(--s)) calc(5px * var(--s));
  background: linear-gradient(180deg, #ffe066 0%, var(--yellow) 55%, var(--yellow-2) 100%);
}
.btn.play span { position: relative; color: var(--cream); -webkit-text-stroke: calc(2.2px * var(--s)) var(--ink); paint-order: stroke fill; }
.btn.play::before { content: ""; position: absolute; left: 14%; right: 14%; top: calc(4px * var(--s)); height: 32%; border-radius: 999px; background: rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------------------------ menu: see "main menu" at the end */

/* popups */
.card.wide { position: relative; min-width: calc(340px * var(--s)); max-width: 92%; }
.card-title.blue { color: #44b4ec; }
.x { position: absolute; right: calc(-10px * var(--s)); top: calc(-10px * var(--s)); width: calc(28px * var(--s)); height: calc(28px * var(--s)); border-radius: 50%; border: calc(2.5px * var(--s)) solid var(--ink); background: var(--red); color: #fff; font-weight: 700; font-size: calc(12px * var(--s)); cursor: pointer; box-shadow: 0 calc(2px * var(--s)) 0 var(--ink); }
.x:hover { transform: scale(1.1) rotate(90deg); transition: transform 0.2s; }
.set-row { display: flex; align-items: center; gap: calc(10px * var(--s)); width: 100%; justify-content: space-between; font-weight: 700; font-size: calc(11px * var(--s)); }
.chips { display: flex; gap: calc(5px * var(--s)); flex-wrap: wrap; justify-content: flex-end; }
.inv-sub { display: flex; align-items: center; gap: calc(4px * var(--s)); font-size: calc(10px * var(--s)); font-weight: 600; }
.inv-sub img { width: calc(14px * var(--s)); }
.skins { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8px * var(--s)); }
.skin { display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); width: calc(78px * var(--s)); padding: calc(4px * var(--s)) calc(4px * var(--s)) calc(6px * var(--s)); background: #fff; border: calc(2.5px * var(--s)) solid var(--ink); border-radius: calc(10px * var(--s)); box-shadow: 0 calc(3px * var(--s)) 0 var(--ink); cursor: pointer; font-family: var(--font-ui); color: var(--ink); transition: transform 0.12s; }
.skin:hover { transform: translateY(calc(-2px * var(--s))); }
.skin canvas { width: calc(56px * var(--s)); height: calc(64px * var(--s)); }
.skin .sk-name { font-family: var(--font-display); font-size: calc(11px * var(--s)); }
.skin .sk-tag { font-weight: 700; font-size: calc(9px * var(--s)); border-radius: 999px; padding: 0 calc(6px * var(--s)); background: var(--cream-2); display: flex; align-items: center; gap: 2px; }
.skin .sk-tag img { width: calc(10px * var(--s)); }
.skin.equipped { background: #fff3c4; border-color: var(--yellow-2); }
.skin.equipped .sk-tag { background: var(--yellow); }
.skin.locked canvas { filter: grayscale(0.2) brightness(0.92); }
.skin.poor .sk-tag { opacity: 0.55; }
.toast { position: absolute; left: 50%; bottom: calc(40px * var(--s)); transform: translate(-50%, calc(20px * var(--s))); opacity: 0; pointer-events: none; font-family: var(--font-display); font-size: calc(14px * var(--s)); color: var(--cream); background: rgba(58, 26, 6, 0.9); border-radius: 999px; padding: calc(4px * var(--s)) calc(16px * var(--s)); transition: opacity 0.25s, transform 0.25s; z-index: 5; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* shared bits reused in the settings card */
.chip, .seg button {
  display: inline-flex; align-items: center; gap: calc(4px * var(--s));
  font-family: var(--font-ui); font-weight: 600; font-size: calc(11px * var(--s));
  color: var(--ink); background: rgba(255, 244, 226, 0.88);
  border: calc(2px * var(--s)) solid var(--ink); border-radius: 999px;
  padding: calc(2px * var(--s)) calc(10px * var(--s));
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.chip:hover, .seg button:hover { transform: translateY(calc(-1px * var(--s))); }
.chip input { appearance: none; width: calc(10px * var(--s)); height: calc(10px * var(--s)); margin: 0; border-radius: 50%; border: calc(2px * var(--s)) solid var(--ink); background: #fff; cursor: pointer; }
.chip input:checked { background: var(--ink); box-shadow: inset 0 0 0 calc(1.5px * var(--s)) var(--yellow); }
.chip:has(input:checked) { background: var(--yellow); }
.chip:has(input:focus-visible), .seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: calc(-2px * var(--s)); }
.seg button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.seg button:last-child { border-radius: 0 999px 999px 0; }
.seg button[aria-checked="true"] { background: var(--yellow); }
kbd { font-family: var(--font-ui); font-weight: 700; display: inline-block; min-width: calc(15px * var(--s)); padding: 0 calc(3px * var(--s)); margin: 0 1px; border-radius: calc(4px * var(--s)); background: var(--cream); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 calc(2px * var(--s)) 0 var(--ink); text-shadow: none; }
/* ------------------------------------------------------------------ hud */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-score { position: absolute; left: calc(12px * var(--s)); top: calc(6px * var(--s)); font-family: var(--font-display); font-size: calc(32px * var(--s)); line-height: 1; color: var(--cream); -webkit-text-stroke: calc(2.4px * var(--s)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(3px * var(--s)) 0 rgba(58, 26, 6, 0.3); }
.hud-score small { font-size: 0.5em; margin-left: 0.1em; }
.hud-score.bump { animation: bump 0.25s; }
.hud-sub { position: absolute; left: calc(13px * var(--s)); top: calc(42px * var(--s)); display: flex; align-items: center; gap: calc(4px * var(--s)); font-weight: 700; font-size: calc(11px * var(--s)); color: var(--cream); text-shadow: 0 1px 1px var(--ink), 0 0 2px var(--ink); }
.hud-sub img { width: calc(13px * var(--s)); height: calc(13px * var(--s)); }
.hud-sub .sep { opacity: 0.6; }
.hud-items { position: absolute; right: calc(36px * var(--s)); top: calc(10px * var(--s)); display: flex; gap: calc(4px * var(--s)); }
.hud-items span { font-weight: 700; font-size: calc(9px * var(--s)); background: var(--cream); border: calc(2px * var(--s)) solid var(--ink); border-radius: 999px; padding: calc(1px * var(--s)) calc(6px * var(--s)); }
.hud-items span.used { opacity: 0.35; text-decoration: line-through; }
.hud-flash { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-family: var(--font-display); font-size: calc(34px * var(--s)); color: var(--yellow); -webkit-text-stroke: calc(2.4px * var(--s)) var(--ink); paint-order: stroke fill; opacity: 0; transform: scale(0.6); }
.hud-flash.on { animation: flash 1.4s ease-out both; }
.icon-btn { pointer-events: auto; position: absolute; right: calc(8px * var(--s)); top: calc(8px * var(--s)); width: calc(24px * var(--s)); height: calc(24px * var(--s)); border-radius: 50%; border: calc(2px * var(--s)) solid var(--ink); background: var(--cream); color: var(--ink); font-size: calc(9px * var(--s)); cursor: pointer; box-shadow: 0 calc(2px * var(--s)) 0 var(--ink); }

/* ------------------------------------------------------------------ countdown */
.countdown { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; font-family: var(--font-display); font-size: calc(96px * var(--s)); line-height: 1; color: var(--cream); -webkit-text-stroke: calc(5px * var(--s)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(6px * var(--s)) 0 rgba(58, 26, 6, 0.35); }
.countdown.go { color: var(--yellow); }
.countdown .n { display: inline-block; animation: count-pop 0.95s cubic-bezier(.2, 1.7, .4, 1) both; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--cream); border: calc(3px * var(--s)) solid var(--ink); border-radius: calc(18px * var(--s)); box-shadow: 0 calc(6px * var(--s)) 0 var(--ink); padding: calc(14px * var(--s)) calc(26px * var(--s)) calc(12px * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--s)); min-width: calc(250px * var(--s)); animation: card-in 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.card-title { font-family: var(--font-display); font-size: calc(32px * var(--s)); line-height: 1; color: var(--red); -webkit-text-stroke: calc(2.2px * var(--s)) var(--ink); paint-order: stroke fill; }
.big-score { font-family: var(--font-display); font-size: calc(52px * var(--s)); line-height: 0.9; color: var(--yellow); -webkit-text-stroke: calc(2.6px * var(--s)) var(--ink); paint-order: stroke fill; display: flex; flex-direction: column; align-items: center; }
.big-score small { font-family: var(--font-ui); font-weight: 700; font-size: calc(10px * var(--s)); letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink); -webkit-text-stroke: 0; margin-top: calc(4px * var(--s)); }
.new-best { font-family: var(--font-display); font-size: calc(14px * var(--s)); color: #fff; background: var(--red); border: calc(2px * var(--s)) solid var(--ink); border-radius: 999px; padding: 0 calc(10px * var(--s)); animation: wiggle 0.8s ease-in-out infinite; }
.stats { display: flex; gap: calc(16px * var(--s)); }
.stats div { display: flex; flex-direction: column; align-items: center; }
.stats b { font-family: var(--font-display); font-weight: 400; font-size: calc(18px * var(--s)); }
.stats span { font-size: calc(9px * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; }
.card .btn.ghost { color: var(--ink); border-color: var(--ink); text-shadow: none; box-shadow: 0 calc(4px * var(--s)) 0 var(--ink); }
.row { display: flex; gap: calc(10px * var(--s)); align-items: center; margin-top: calc(4px * var(--s)); }
.hint { font-size: calc(9px * var(--s)); font-weight: 600; opacity: 0.6; }

/* ------------------------------------------------------------------ touch */
#touch { position: absolute; left: 0; right: 0; bottom: calc(8px * var(--s)); display: flex; gap: calc(8px * var(--s)); padding: 0 calc(10px * var(--s)); }
#touch .sp { flex: 1; }
#touch button { width: calc(62px * var(--s)); height: calc(50px * var(--s)); font-size: calc(20px * var(--s)); border: calc(3px * var(--s)) solid var(--ink); border-radius: calc(14px * var(--s)); background: rgba(255, 244, 226, 0.7); color: var(--ink); touch-action: none; box-shadow: 0 calc(3px * var(--s)) 0 var(--ink); }
#touch button.on { background: var(--yellow); transform: translateY(calc(2px * var(--s))); }

/* ------------------------------------------------------------------ motion */
@keyframes pop-in { 0% { transform: scale(0.3) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); } 50% { transform: translateY(calc(-7px * var(--s))) rotate(1.2deg) scale(1.025); } }
@keyframes shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes play-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 calc(4px * var(--s)) 0 var(--ink), 0 0 0 0 rgba(255, 194, 26, 0.6); } 50% { transform: scale(1.06); box-shadow: 0 calc(5px * var(--s)) 0 var(--ink), 0 0 0 calc(10px * var(--s)) rgba(255, 194, 26, 0); } }
@keyframes rise-in { from { transform: translateY(calc(18px * var(--s))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; transform: translateY(calc(10px * var(--s))); } }
@keyframes fly-up { to { transform: translateY(calc(-260px * var(--s))) scale(0.8) rotate(-6deg); opacity: 0; } }
@keyframes count-pop { 0% { transform: scale(2.4) rotate(-10deg); opacity: 0; } 25% { transform: scale(0.9) rotate(3deg); opacity: 1; } 40% { transform: scale(1.05) rotate(0); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.7); opacity: 0; } }
@keyframes card-in { from { transform: scale(0.6) translateY(calc(30px * var(--s))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flash { 0% { opacity: 0; transform: scale(0.5) rotate(-6deg); } 20% { opacity: 1; transform: scale(1.15) rotate(2deg); } 35% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) translateY(calc(-14px * var(--s))); } }
@keyframes bump { 50% { transform: scale(1.12); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) scale(1.06); } }
@keyframes slide-in-left { from { transform: translateX(calc(-230px * var(--s))); } to { transform: none; } }
@keyframes slide-in-right { from { transform: translateX(calc(200px * var(--s))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-out-left { to { transform: translateX(calc(-240px * var(--s))); } }
@keyframes slide-out-right { to { transform: translateX(calc(220px * var(--s))); opacity: 0; } }
@keyframes nudge { 0%, 80%, 100% { transform: skewX(-14deg); } 88% { transform: skewX(-14deg) translateX(calc(6px * var(--s))); } }
@keyframes shadow-breathe { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.92); opacity: 0.85; } }
@keyframes coin-spin { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(0.15); } 90% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .m-logo, .btn.play, .new-best, .m-coins img, .m-pill.ready, .m-big::after { animation: none !important; }
}

/* ================================================================== v2.1 additions */
.daily-ic { width: calc(30px * var(--s)); height: calc(30px * var(--s)); flex: none; }
.daily-ic svg, .m-tile-ic svg, .slot svg, .item-ic svg, .op svg, .rv-ic svg, .boost-chip svg { width: 100%; height: 100%; display: block; }
.pw-ic { display: block; width: 100%; height: 100%; object-fit: contain; } /* Stick Run's power-up pictures (icons.js) */
.missions { list-style: none; margin: 0; padding: calc(4px * var(--s)) calc(8px * var(--s)) calc(6px * var(--s)); }
.missions li { padding: calc(3px * var(--s)) 0; font-size: calc(9.5px * var(--s)); font-weight: 600; border-bottom: 1px dashed rgba(92, 42, 12, 0.25); }
.missions li:last-child { border-bottom: 0; }
.m-row { display: flex; justify-content: space-between; gap: calc(6px * var(--s)); align-items: baseline; }
.m-reward { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-display); font-weight: 400; color: #c97800; white-space: nowrap; }
.m-reward img { width: calc(10px * var(--s)); }
.bar { height: calc(6px * var(--s)); margin-top: calc(3px * var(--s)); border-radius: 999px; background: rgba(92, 42, 12, 0.15); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb340, var(--yellow)); transition: width 0.6s; }

/* shop + inventory */
.shopcard { position: relative; width: min(calc(470px * var(--s)), 94%); max-height: 92%; }
.shop-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: calc(8px * var(--s)); }
.tabs { display: inline-flex; gap: calc(4px * var(--s)); }
.tabs button { font-family: var(--font-display); font-size: calc(13px * var(--s)); color: var(--ink); background: var(--cream-2); border: calc(2.5px * var(--s)) solid var(--ink); border-radius: calc(9px * var(--s)) calc(9px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s)); padding: calc(2px * var(--s)) calc(12px * var(--s)); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--yellow); transform: translateY(calc(-2px * var(--s))); box-shadow: 0 calc(3px * var(--s)) 0 var(--ink); }
.mini-wallet { display: flex; align-items: center; gap: calc(4px * var(--s)); font-family: var(--font-display); font-size: calc(15px * var(--s)); background: #fff; border: calc(2.5px * var(--s)) solid var(--ink); border-radius: 999px; padding: 0 calc(10px * var(--s)) 0 calc(4px * var(--s)); }
.mini-wallet img { width: calc(16px * var(--s)); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8px * var(--s)); width: 100%; overflow-y: auto; padding: calc(4px * var(--s)) calc(2px * var(--s)) calc(6px * var(--s)); max-height: calc(270px * var(--s)); }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); padding: calc(5px * var(--s)) calc(4px * var(--s)) calc(6px * var(--s)); background: #fff; border: calc(2.5px * var(--s)) solid var(--ink); border-radius: calc(10px * var(--s)); box-shadow: 0 calc(3px * var(--s)) 0 var(--ink); cursor: pointer; font-family: var(--font-ui); color: var(--ink); transition: transform 0.12s; text-align: center; }
.item:hover { transform: translateY(calc(-2px * var(--s))); }
.item:active { transform: translateY(calc(1px * var(--s))); }
.item.equipped { background: #fff3c4; border-color: var(--yellow-2); }
.item.poor { opacity: 0.75; }
.item canvas { width: calc(56px * var(--s)); height: calc(64px * var(--s)); }
.item-ic { width: calc(40px * var(--s)); height: calc(40px * var(--s)); margin: calc(3px * var(--s)) 0; }
.item .nm { font-family: var(--font-display); font-size: calc(11.5px * var(--s)); line-height: 1.05; }
.item .ds { font-size: calc(8px * var(--s)); font-weight: 600; opacity: 0.75; line-height: 1.2; min-height: calc(20px * var(--s)); }
.item .tag { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: calc(9.5px * var(--s)); border-radius: 999px; padding: 0 calc(7px * var(--s)); background: var(--cream-2); }
.item .tag.buy { background: #4fbd3a; color: #fff; }
.item .tag img { width: calc(10px * var(--s)); }
.item .own { position: absolute; top: calc(-7px * var(--s)); right: calc(-7px * var(--s)); min-width: calc(20px * var(--s)); height: calc(20px * var(--s)); padding: 0 calc(4px * var(--s)); border-radius: 999px; background: var(--red); color: #fff; border: calc(2px * var(--s)) solid var(--ink); font-family: var(--font-display); font-size: calc(10px * var(--s)); display: grid; place-items: center; }
.item .key { position: absolute; top: calc(4px * var(--s)); left: calc(5px * var(--s)); font-size: calc(8px * var(--s)); font-weight: 700; opacity: 0.6; }
.owned-powers { display: flex; flex-wrap: wrap; gap: calc(5px * var(--s)); justify-content: center; }
.op { display: inline-flex; align-items: center; gap: calc(3px * var(--s)); background: #fff; border: calc(2px * var(--s)) solid var(--ink); border-radius: 999px; padding: calc(1px * var(--s)) calc(8px * var(--s)) calc(1px * var(--s)) calc(3px * var(--s)); font-weight: 700; font-size: calc(10px * var(--s)); }
.op span { width: calc(16px * var(--s)); height: calc(16px * var(--s)); }
.op.zero { opacity: 0.4; }

/* in-game power-up bar */
.powerbar { position: absolute; left: 50%; bottom: calc(8px * var(--s)); transform: translateX(-50%); display: flex; gap: calc(6px * var(--s)); pointer-events: auto; }
.slot { position: relative; width: calc(42px * var(--s)); height: calc(42px * var(--s)); padding: calc(5px * var(--s)); border-radius: calc(10px * var(--s)); border: calc(2.5px * var(--s)) solid var(--ink); background: rgba(255, 244, 226, 0.92); box-shadow: 0 calc(3px * var(--s)) 0 var(--ink); cursor: pointer; transition: transform 0.12s, opacity 0.2s; }
.slot:hover { transform: translateY(calc(-2px * var(--s))); }
.slot.empty { opacity: 0.35; cursor: default; }
.slot.used { animation: bump 0.35s; }
.slot b { position: absolute; right: calc(-6px * var(--s)); top: calc(-6px * var(--s)); min-width: calc(16px * var(--s)); height: calc(16px * var(--s)); border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: calc(9px * var(--s)); display: grid; place-items: center; border: calc(1.5px * var(--s)) solid var(--ink); padding: 0 2px; }
.slot i { position: absolute; left: 50%; bottom: calc(-8px * var(--s)); transform: translateX(-50%); font-style: normal; font-weight: 700; font-size: calc(8px * var(--s)); background: var(--ink); color: var(--cream); border-radius: calc(4px * var(--s)); padding: 0 calc(4px * var(--s)); }
.boost-chip { display: inline-flex; width: calc(16px * var(--s)); height: calc(16px * var(--s)); margin-left: calc(4px * var(--s)); filter: drop-shadow(0 1px 0 var(--ink)); }

/* results card */
.earned { display: flex; flex-direction: column; gap: calc(3px * var(--s)); align-items: center; font-weight: 700; font-size: calc(11px * var(--s)); }
.earned .gain { font-family: var(--font-display); font-weight: 400; font-size: calc(15px * var(--s)); color: #c97800; display: inline-flex; align-items: center; gap: 3px; }
.earned .gain img { width: calc(15px * var(--s)); }
.earned .done { background: #e8f8dc; border: calc(2px * var(--s)) solid #3e9a2a; border-radius: 999px; padding: 0 calc(10px * var(--s)); color: #2c6e1d; animation: card-in 0.5s both; }
.btn.revive { display: inline-flex; align-items: center; gap: calc(6px * var(--s)); background: linear-gradient(180deg, #ff8a9a, #ff5a6e); color: #fff; font-size: calc(16px * var(--s)); animation: play-pulse 1.4s ease-in-out infinite; }
.btn.revive span:not(.rv-ic) { -webkit-text-stroke: calc(1.4px * var(--s)) var(--ink); paint-order: stroke fill; }
.btn.revive small { font-family: var(--font-ui); font-weight: 700; font-size: calc(9px * var(--s)); color: var(--ink); background: #fff; border-radius: 999px; padding: 0 calc(5px * var(--s)); }
.rv-ic { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }

/* ================================================================== v2.2 additions */
.milestone { position: absolute; left: 0; right: 0; top: 13%; text-align: center; pointer-events: none; font-family: var(--font-display); font-size: calc(26px * var(--s)); color: var(--cream); -webkit-text-stroke: calc(2.2px * var(--s)) var(--ink); paint-order: stroke fill; opacity: 0; }
.milestone.on { animation: milestone 1.3s ease-out both; }
.milestone small { display: block; font-size: 0.45em; letter-spacing: 0.25em; color: var(--yellow); }
@keyframes milestone { 0% { opacity: 0; transform: translateY(calc(-20px * var(--s))) scale(0.6); } 15% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-10px * var(--s))); } }
.screenflash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.screenflash.on { animation: screenflash 0.45s ease-out; }
@keyframes screenflash { 0% { opacity: 0.75; } 100% { opacity: 0; } }
.earned .lvup { font-family: var(--font-display); font-size: calc(14px * var(--s)); color: #fff; background: linear-gradient(180deg, #a77bff, #6e43d1); border: calc(2px * var(--s)) solid var(--ink); border-radius: 999px; padding: 0 calc(12px * var(--s)); animation: wiggle 0.8s ease-in-out 3; }
.earned .xp { font-size: calc(10px * var(--s)); color: #6e43d1; }


/* ================================================================== v2.3 wearables */
.shopcard { width: min(calc(560px * var(--s)), 96%); }
.shopcard .grid { grid-template-columns: repeat(5, 1fr); }
.tabs { flex-wrap: wrap; }
.tabs button { font-size: calc(11.5px * var(--s)); padding: calc(2px * var(--s)) calc(9px * var(--s)); }
/* the picture always fits its fixed box (icons are large PNGs), so names and prices stay visible */
.gear-pic { position: relative; flex: none; width: calc(62px * var(--s)); height: calc(54px * var(--s)); margin: calc(2px * var(--s)) 0; overflow: visible; }
.gear-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(2px * var(--s)) 0 rgba(58, 26, 6, 0.25)); transition: transform 0.15s; }
.item:hover .gear-pic img { transform: scale(1.1) rotate(-4deg); }
.gear-pic .none { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(26px * var(--s)); color: rgba(92, 42, 12, 0.35); }


/* software-rendered browsers (hardware acceleration off): skip the costly blur behind popups */
.lowfx .overlay.dim { backdrop-filter: none; background: rgba(20, 60, 90, 0.5); }

/* ------------------------------------------------------------------ dark windows (Stick Run's Account Settings) */
/* Settings and the room browser: a dark glass panel with faint diagonal stripes, a white heavy
   title over a grey subtitle, the red round close button, darker wells inside, glossy buttons. */
.card.dk { position: relative; align-items: stretch; gap: calc(8px * var(--s)); padding: calc(10px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s)); color: #fff; font-family: Arial, Helvetica, sans-serif; background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.035) 0 calc(14px * var(--s)), transparent calc(14px * var(--s)) calc(28px * var(--s))), linear-gradient(180deg, #2c2c2c 0%, #161616 100%); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(10px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.12), 0 calc(14px * var(--s)) calc(36px * var(--s)) rgba(0, 0, 0, 0.55); }
.dk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(10px * var(--s)); }
.dk-head > span { display: flex; flex-direction: column; text-align: left; }
.dk-head b { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: calc(20px * var(--s)); line-height: 1.05; letter-spacing: -0.01em; color: #fff; text-shadow: 0 calc(2px * var(--s)) 0 #000; }
.dk-head small { font-size: calc(9px * var(--s)); color: #9a9a9a; margin-top: calc(1px * var(--s)); }
.card.dk .x { position: static; flex: none; width: calc(24px * var(--s)); height: calc(24px * var(--s)); border: calc(2px * var(--s)) solid #fff; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a5a, #c80000); box-shadow: 0 0 0 calc(1px * var(--s)) #600, 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.5); font-size: calc(10px * var(--s)); }
.card.dk .x:hover { transform: scale(1.1) rotate(90deg); }
.dk-well { display: flex; flex-direction: column; gap: calc(8px * var(--s)); padding: calc(10px * var(--s)) calc(12px * var(--s)); background: rgba(0, 0, 0, 0.42); border: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.06); border-radius: calc(7px * var(--s)); box-shadow: inset 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.5); }
.dk-sub { font-family: "Arial Black", Arial, sans-serif; font-size: calc(10px * var(--s)); text-transform: uppercase; letter-spacing: 0.06em; color: #bdbdbd; text-align: left; margin: calc(2px * var(--s)) 0 calc(5px * var(--s)); }
/* glossy buttons: grey, green (the selected / on one), blue */
.dk-btn, .card.dk .seg button, .card.dk .chip { display: inline-flex; align-items: center; justify-content: center; gap: calc(5px * var(--s)); height: calc(26px * var(--s)); padding: 0 calc(14px * var(--s)); font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: calc(10.5px * var(--s)); color: #fff; background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 50%, #3a3a3a 100%); border: calc(1px * var(--s)) solid #111; border-radius: calc(5px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.25), 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.4); text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.5); cursor: pointer; transition: filter 0.12s, transform 0.12s; }
.dk-btn:hover, .card.dk .seg button:hover, .card.dk .chip:hover { filter: brightness(1.18); transform: none; }
.dk-btn:active, .card.dk .seg button:active, .card.dk .chip:active { transform: translateY(calc(1px * var(--s))); }
.dk-btn.blue { background: linear-gradient(180deg, #4fb3ff 0%, #2a86e0 50%, #1f6cc0 100%); border-color: #0d3c73; }
.card.dk .seg button[aria-checked="true"], .card.dk .chip:has(input:checked) { background: linear-gradient(180deg, #5be043 0%, #2ea81f 50%, #228a16 100%); border-color: #0d4a07; }
.card.dk .seg button { border-radius: 0; margin-left: calc(-1px * var(--s)); }
.card.dk .seg button:first-child { border-radius: calc(5px * var(--s)) 0 0 calc(5px * var(--s)); margin-left: 0; }
.card.dk .seg button:last-child { border-radius: 0 calc(5px * var(--s)) calc(5px * var(--s)) 0; }
/* on / off switches for sound and music */
.card.dk .chips { display: flex; gap: calc(6px * var(--s)); }
.card.dk .chip input { appearance: none; width: calc(22px * var(--s)); height: calc(12px * var(--s)); margin: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.6); position: relative; cursor: pointer; }
.card.dk .chip input::after { content: ""; position: absolute; top: calc(1.5px * var(--s)); left: calc(1.5px * var(--s)); width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; background: #d8d8d8; transition: transform 0.15s; }
.card.dk .chip input:checked { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.4); }
.card.dk .chip input:checked::after { transform: translateX(calc(10px * var(--s))); background: #fff; }
.card.dk kbd { color: #fff; background: linear-gradient(180deg, #555, #2c2c2c); border-color: #000; box-shadow: 0 calc(2px * var(--s)) 0 #000; }
.dk-foot { display: flex; align-items: center; gap: calc(6px * var(--s)); padding-top: calc(6px * var(--s)); border-top: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.08); font-size: calc(9px * var(--s)); color: #aaa; }

/* ---- settings */
.setcard { width: min(calc(380px * var(--s)), 94%); min-width: 0; }
.setcard .set-row { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: calc(11px * var(--s)); color: #fff; }
.setcard .set-row > span { text-shadow: 0 calc(1px * var(--s)) 0 #000; }

/* ---- the room browser */
#lobby .lobbycard { width: min(calc(520px * var(--s)), 96%); min-width: 0; }
/* the Marketplace: a glossy green feature card with its four sector keys */
.lb-market { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--s)); padding: calc(10px * var(--s)) calc(12px * var(--s)); background: linear-gradient(180deg, #43c22f 0%, #2a9c1d 50%, #1f7f14 100%); border: calc(1.5px * var(--s)) solid #0b3d06; border-radius: calc(8px * var(--s)); box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; }
.lb-market::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)); pointer-events: none; }
.lb-mk-info { position: relative; display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; }
.lb-mk-info > svg { flex: none; width: calc(40px * var(--s)); height: calc(40px * var(--s)); fill: #fff3c0; stroke: #0b3d06; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.35)); }
.lb-mk-info > span { display: flex; flex-direction: column; text-align: left; }
.lb-mk-info b { font-family: "Arial Black", Arial, sans-serif; font-size: calc(18px * var(--s)); line-height: 1; text-transform: uppercase; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45); }
.lb-mk-info small { font-size: calc(9px * var(--s)); font-weight: 700; color: #dcffd2; margin-top: calc(3px * var(--s)); }
.lb-open { position: absolute; top: calc(-6px * var(--s)); left: calc(28px * var(--s)); font-style: normal; font-family: "Arial Black", Arial, sans-serif; font-size: calc(7px * var(--s)); color: #0b3d06; background: #fff27a; border-radius: calc(3px * var(--s)); padding: 0 calc(4px * var(--s)); box-shadow: 0 calc(1px * var(--s)) 0 #0b3d06; }
.lb-sectors { position: relative; display: flex; gap: calc(7px * var(--s)); }
.lb-room { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1px * var(--s)); width: calc(52px * var(--s)); height: calc(52px * var(--s)); padding: 0; color: #1a1a1a; background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 48%, #d6d6d6 52%, #c4c4c4 100%); border: calc(1.5px * var(--s)) solid #1b1b1b; border-radius: calc(9px * var(--s)); box-shadow: inset 0 calc(-2px * var(--s)) 0 rgba(0, 0, 0, 0.12), 0 calc(3px * var(--s)) 0 #0b3d06, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1); }
.lb-room:hover { transform: translateY(calc(-3px * var(--s))) scale(1.05); }
.lb-room:active { transform: translateY(calc(2px * var(--s))); box-shadow: inset 0 calc(-2px * var(--s)) 0 rgba(0, 0, 0, 0.12), 0 calc(1px * var(--s)) 0 #0b3d06; }
.lb-room:focus-visible, .lb-pill:focus-visible, .lb-group:focus-visible { outline: calc(2.5px * var(--s)) solid #fff27a; outline-offset: calc(2px * var(--s)); }
.lb-room span { font-family: "Arial Black", Arial, sans-serif; font-size: calc(22px * var(--s)); line-height: 1; }
.lb-room small { font-size: calc(7.5px * var(--s)); font-weight: 700; color: #2a7a1d; white-space: nowrap; }
.lb-room small.busy { color: #d40000; }
/* below: the lobbies and the other rooms, side by side */
.lb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--s)); }
.lb-cols > section { display: flex; flex-direction: column; }
.lb-run, .lb-trade { display: flex; flex-direction: column; gap: calc(4px * var(--s)); }
.lb-soon { margin-left: auto; font-style: normal; font-family: "Arial Black", Arial, sans-serif; font-size: calc(7px * var(--s)); color: #fff; background: #d40000; border-radius: calc(3px * var(--s)); padding: calc(1px * var(--s)) calc(4px * var(--s)); box-shadow: 0 calc(1px * var(--s)) 0 #600; }
/* a lobby: a glossy black bar with a runner */
.lb-pill { display: flex; align-items: center; gap: calc(7px * var(--s)); height: calc(25px * var(--s)); padding: 0 calc(6px * var(--s)) 0 calc(8px * var(--s)); font-family: "Arial Black", Arial, sans-serif; font-size: calc(10px * var(--s)); color: #fff; background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); border: calc(1px * var(--s)) solid #000; border-radius: calc(5px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.2); cursor: pointer; transition: transform 0.12s, filter 0.12s; }
.lb-pill:hover { transform: translateX(calc(3px * var(--s))); filter: brightness(1.2); }
.lb-count { margin-left: auto; font-family: var(--font-ui); font-size: calc(8px * var(--s)); font-weight: 700; color: #b8ffb0; white-space: nowrap; }
.lb-count.busy { color: #ff6d6d; }
.lb-pill svg { width: calc(14px * var(--s)); height: calc(16px * var(--s)); flex: none; fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
/* a room that's coming: a locked dark tile */
.lb-group { display: flex; align-items: center; gap: calc(7px * var(--s)); height: calc(25px * var(--s)); padding: 0 calc(6px * var(--s)) 0 calc(7px * var(--s)); color: #fff; text-align: left; background: rgba(255, 255, 255, 0.05); border: calc(1px * var(--s)) dashed rgba(255, 255, 255, 0.22); border-radius: calc(5px * var(--s)); cursor: pointer; transition: background 0.12s; }
.lb-group:hover { background: rgba(255, 255, 255, 0.1); }
.lb-group svg { width: calc(13px * var(--s)); height: calc(13px * var(--s)); flex: none; fill: #8a8a8a; stroke: #8a8a8a; stroke-width: 2; }
.lb-group > span { display: flex; align-items: baseline; gap: calc(6px * var(--s)); min-width: 0; }
.lb-group b { font-family: "Arial Black", Arial, sans-serif; font-size: calc(9.5px * var(--s)); white-space: nowrap; }
.lb-group small { font-size: calc(7.5px * var(--s)); color: #8f8f8f; white-space: nowrap; }
.lb-group.bank b { color: #ff7a7a; }
.lb-group.bid b { color: #f0b060; }
.lb-group.mpp b { color: #7fc8ff; }
/* an open market room group: its name, then a white chip per room with who's in it */
.lb-rgroup { display: flex; align-items: center; gap: calc(7px * var(--s)); height: calc(25px * var(--s)); padding: 0 calc(3px * var(--s)) 0 calc(8px * var(--s)); color: #fff; background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); border: calc(1px * var(--s)) solid #000; border-radius: calc(5px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.2); }
.lb-rgroup > svg { width: calc(14px * var(--s)); height: calc(16px * var(--s)); flex: none; fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.lb-rgroup > b { font-family: "Arial Black", Arial, sans-serif; font-size: calc(10px * var(--s)); white-space: nowrap; }
.lb-rgroup:is(.mr, .bank, .bid, .casino) > svg { width: calc(17px * var(--s)); height: calc(17px * var(--s)); stroke: none; }
.lb-rgroup.bank > svg { fill: #ffc21a; }
.lb-rgroup.bank > b { color: #ff9a9a; }
.lb-rgroup.bid > b { color: #f0c070; }
.lb-rgroup.casino > b { color: #ff86c8; }
.lb-rchips { margin-left: auto; display: flex; gap: calc(3px * var(--s)); }
.lb-chip { display: flex; align-items: center; gap: calc(4px * var(--s)); height: calc(19px * var(--s)); padding: 0 calc(6px * var(--s)); color: #1a1a1a; background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 48%, #d6d6d6 52%, #c4c4c4 100%); border: calc(1px * var(--s)) solid #000; border-radius: calc(4px * var(--s)); cursor: pointer; transition: transform 0.12s; }
.lb-chip:hover { transform: translateY(calc(-2px * var(--s))) scale(1.06); }
.lb-chip:focus-visible { outline: calc(2px * var(--s)) solid #fff27a; outline-offset: calc(1px * var(--s)); }
.lb-chip span { font-family: "Arial Black", Arial, sans-serif; font-size: calc(10px * var(--s)); }
.lb-chip small { font-size: calc(8px * var(--s)); font-weight: 700; color: #2a7a1d; }
.lb-chip small.busy { color: #d40000; }
.lb-dot { width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; background: #d40000; box-shadow: 0 0 calc(6px * var(--s)) #ff3030; }
.lb-dot.on { background: #3fe02a; box-shadow: 0 0 calc(6px * var(--s)) #5bff40; }
/* ------------------------------------------------------------------ shop + inventory (Stick Run's) */
/* the window header: an icon, the title, the coins, the red close button */
.sw-head { display: flex; align-items: center; gap: calc(6px * var(--s)); width: 100%; }
.sw-head > img { width: calc(18px * var(--s)); }
.sw-head .card-title { flex: 1; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(17px * var(--s)); color: #2a2a2a; -webkit-text-stroke: 0; }
.sw-head .x { position: static; width: calc(22px * var(--s)); height: calc(22px * var(--s)); border: calc(2px * var(--s)) solid #fff; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a5a, #c80000); box-shadow: 0 0 0 calc(1px * var(--s)) #7a0000; font-size: calc(10px * var(--s)); }
/* Stick Run's shop windows (shop_window), the Normal and the Premium Item Shop: orange, lighter
   towards the bottom, round corners; the title in dark PT Sans after the coin (or the dollar), the
   coins in yellow, the red X; a dark line under the head and one under the list. The rows
   (shop_item_disp) are flat two-tone bands: grey, green once bought ("✔ Item bought"), teal in the
   Premium Item Shop; a dark cell with the item, its name big and light with a line about it under,
   then the price and the green Buy button. The Normal Item Shop's one list has a heading a kind. */
:is(#shop, #prem-shop) .shopcard { width: min(calc(500px * var(--s)), 96%); gap: calc(6px * var(--s)); padding: calc(10px * var(--s)) calc(14px * var(--s)) calc(12px * var(--s)); background: linear-gradient(180deg, #ff9800 0%, #ffad2e 35%, #ffcb6b 100%); border: 0; border-radius: calc(16px * var(--s)); box-shadow: 0 calc(10px * var(--s)) calc(30px * var(--s)) rgba(0, 0, 0, 0.45); font-family: "PT Sans", Arial, sans-serif; }
:is(#shop, #prem-shop) .sw-head { gap: calc(5px * var(--s)); padding-bottom: calc(6px * var(--s)); border-bottom: calc(1.5px * var(--s)) solid rgba(50, 25, 0, 0.8); }
:is(#shop, #prem-shop) .sw-head > img { width: calc(20px * var(--s)); }
:is(#shop, #prem-shop) .sw-head .card-title { font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(22px * var(--s)); line-height: 1; color: #2b2b2b; }
:is(#shop, #prem-shop) .sw-head .x { width: calc(26px * var(--s)); height: calc(26px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; background: radial-gradient(circle at 40% 35%, #ff4d4d, #c40000); box-shadow: inset 0 0 0 calc(1.5px * var(--s)) rgba(255, 255, 255, 0.35); font-family: Arial, sans-serif; font-weight: 900; font-size: calc(12px * var(--s)); color: #fff; }
:is(#shop, #prem-shop) .mini-wallet { margin-right: calc(4px * var(--s)); background: none; border: 0; padding: 0; gap: calc(3px * var(--s)); font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(17px * var(--s)); color: #ffee00; text-shadow: 0 0 calc(3px * var(--s)) #ff8a00, 0 calc(1px * var(--s)) 0 #9a5200; }
:is(#shop, #prem-shop) .mini-wallet img { width: calc(15px * var(--s)); }
:is(#shop, #prem-shop) .grid { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: calc(3px * var(--s)); max-height: calc(300px * var(--s)); padding: 0 calc(8px * var(--s)) calc(6px * var(--s)) 0; background: none; border-bottom: calc(1.5px * var(--s)) solid rgba(50, 25, 0, 0.8); border-radius: 0; }
:is(#shop, #prem-shop) .shop-sec { margin-top: calc(5px * var(--s)); text-align: left; font-weight: 700; font-size: calc(13px * var(--s)); color: #3a2000; }
:is(#shop, #prem-shop) .shop-sec:first-child { margin-top: 0; }
:is(#shop, #prem-shop) .hint { margin-top: calc(-2px * var(--s)); font-size: calc(10px * var(--s)); color: #5a3400; opacity: 1; }
:is(#shop, #prem-shop) .item { display: grid; grid-template-columns: calc(46px * var(--s)) 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: calc(10px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(4px * var(--s)) calc(6px * var(--s)); min-height: calc(52px * var(--s)); text-align: left; font-family: "PT Sans", Arial, sans-serif; color: #e8e8e8; background: linear-gradient(180deg, #666 0 50%, #5b5b5b 50% 100%); border: 0; border-radius: 0; box-shadow: none; transform: none; }
:is(#shop, #prem-shop) .item:hover { filter: brightness(1.1); transform: none; }
:is(#shop, #prem-shop) .item > canvas, :is(#shop, #prem-shop) .item > img.skin-tile, :is(#shop, #prem-shop) .item > .gear-pic, :is(#shop, #prem-shop) .item > .item-ic { grid-row: 1 / span 2; grid-column: 1; width: calc(42px * var(--s)); height: calc(42px * var(--s)); margin: 0; padding: calc(3px * var(--s)); background: #333; border: calc(2px * var(--s)) solid #2a2a2a; border-radius: calc(7px * var(--s)); box-shadow: inset 0 0 0 calc(1px * var(--s)) rgba(255, 255, 255, 0.08); }
:is(#shop, #prem-shop) .item > canvas { object-fit: contain; }
:is(#shop, #prem-shop) .item .nm { grid-column: 2; align-self: end; font-family: "PT Sans", Arial, sans-serif; font-weight: 400; font-size: calc(19px * var(--s)); line-height: 1.05; color: #e8e8e8; }
:is(#shop, #prem-shop) .item .ds { grid-column: 2; align-self: start; min-height: 0; font-size: calc(11px * var(--s)); font-weight: 400; line-height: 1.2; color: #a9a9a9; opacity: 1; }
:is(#shop, #prem-shop) .item .tag { grid-column: 3; grid-row: 1 / span 2; justify-self: end; background: none; padding: 0; font-family: "PT Sans", Arial, sans-serif; }
/* a price: the coin (or the money) and the number, then Stick Run's green Buy button */
:is(#shop, #prem-shop) .item .tag.buy, :is(#shop, #prem-shop) .item .tag.pay { gap: calc(5px * var(--s)); color: #fff; font-weight: 400; font-size: calc(16px * var(--s)); }
:is(#shop, #prem-shop) .item .tag.buy img { width: calc(15px * var(--s)); }
:is(#shop, #prem-shop) .item .tag.buy::after, :is(#shop, #prem-shop) .item .tag.pay::after { content: "Buy"; margin-left: calc(10px * var(--s)); padding: calc(3px * var(--s)) calc(16px * var(--s)); font-family: "PT Sans", Arial, sans-serif; font-weight: 400; font-size: calc(15px * var(--s)); color: #fff; background: linear-gradient(180deg, #2fd42f 0%, #18b818 50%, #0b9a0b 100%); border-radius: calc(6px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35); text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.25); }
:is(#shop, #prem-shop) .item.poor .tag.buy::after { background: linear-gradient(180deg, #9a9a9a, #6a6a6a); }
:is(#shop, #prem-shop) .item.poor { opacity: 1; }
/* bought: the row turns green, "✔ Item bought" */
:is(#shop, #prem-shop) .item.bought { background: linear-gradient(180deg, #358e35 0 50%, #3b7f3b 50% 100%); cursor: default; }
:is(#shop, #prem-shop) .item .tag.got { gap: calc(4px * var(--s)); font-size: calc(16px * var(--s)); font-weight: 400; color: #33ee33; }
:is(#shop, #prem-shop) .item .tag.got::before { content: "✔"; font-size: calc(17px * var(--s)); color: #22d822; }
:is(#shop, #prem-shop) .item:not(:has(.ds)) .nm { grid-row: 1 / span 2; align-self: center; }
:is(#shop, #prem-shop) .item .key { top: calc(2px * var(--s)); left: calc(38px * var(--s)); z-index: 1; font-size: calc(8px * var(--s)); color: #fff; opacity: 0.8; background: #111; border-radius: calc(3px * var(--s)); padding: 0 calc(3px * var(--s)); }


.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ------------------------------------------------------------------ the Marketplace and the running lobbies */
/* (The Marketplace and the running lobbies themselves get Stick Run's look further down; the market
   rooms and the windows keep this one.) In the main menu's look: white glossy slabs, black glossy bars,
   chunky coloured buttons, Arial Black. The Marketplace (src/online/Marketplace.js) and a running
   lobby (src/online/Race.js) share it, and so do their windows and the race's panels. */
/* the Marketplace and a lobby keep the menu's moving backdrop (MenuScene's .menu-bg) behind a dark shade */
#stage:has(#runlobby:not([hidden])) #menu > :not(.menu-bg), #stage:has(#market:not([hidden])) #menu > :not(.menu-bg), #stage:has(#inventory:not([hidden])) #menu > :not(.menu-bg) { visibility: hidden; }
.market, .race { --black: "Arial Black", "Arial Bold", Gadget, sans-serif; }
.market { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(10, 20, 40, 0) 40%, rgba(10, 20, 40, 0.3) 100%); font-family: var(--font-ui); color: #1b1b1b; animation: fade-in 0.25s ease-out; }
.mk-wrap {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(140px * var(--s)); grid-template-rows: calc(54px * var(--s)) minmax(0, 1fr) calc(118px * var(--s));
  gap: calc(9px * var(--s)) calc(8px * var(--s)); width: min(calc(100% - 12px * var(--s)), calc(588px * var(--s))); height: min(calc(100% - 10px * var(--s)), calc(440px * var(--s)));
}
.market button { font-family: var(--black); cursor: pointer; }
/* the white glossy slab (the menu's mode buttons, as a panel) */
.mk-offers, .mk-chat {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: calc(6px * var(--s));
  border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(14px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 55%, #e2e2e2 100%);
  box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.1), 0 calc(4px * var(--s)) 0 #1b1b1b, 0 calc(10px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.3);
}
/* the black glossy bar (the menu's Missions / player bars) */
.ms-bar, .mk-tab, .mk-th, .mk-trader, .mk-ch, .mk-cats, .race-board, .race-feed p, .race-leave, .rl-bets {
  position: relative; border: calc(1.5px * var(--s)) solid #000; border-radius: calc(8px * var(--s)); color: #fff;
  background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%);
  box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.35);
}
.mk-trader::after, .mk-cats::after, .race-board::after, .rl-bets::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-55deg, transparent 0 calc(10px * var(--s)), rgba(255, 255, 255, 0.04) calc(10px * var(--s)) calc(20px * var(--s))); pointer-events: none; }

/* ---- the header: the title on a tilted white slab, a dashed pill, Back To Menu */
.mk-head { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: calc(12px * var(--s)); min-width: 0; padding: 0 calc(2px * var(--s)); }
.ms-title {
  display: flex; align-items: center; gap: calc(10px * var(--s)); height: calc(48px * var(--s)); padding: 0 calc(18px * var(--s)) 0 calc(12px * var(--s));
  border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(14px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 46%, #d9d9d9 54%, #c6c6c6 100%);
  box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.12), 0 calc(4px * var(--s)) 0 #1b1b1b, 0 calc(10px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg); animation: ms-in 0.5s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes ms-in { from { transform: translateX(calc(-60px * var(--s))) rotate(-3deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.ms-ic { flex: none; width: calc(34px * var(--s)); height: calc(34px * var(--s)); }
.ms-ic svg { width: 100%; height: 100%; display: block; }
.ms-tt { display: flex; flex-direction: column; gap: calc(2px * var(--s)); line-height: 1; }
.mk-title { font-family: var(--black); font-weight: 900; font-size: calc(21px * var(--s)); letter-spacing: -0.01em; white-space: nowrap; color: #111; }
.mk-sector { font-family: var(--black); font-size: calc(9px * var(--s)); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #6a6a6a; }
.ms-pill { display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(28px * var(--s)); padding: 0 calc(12px * var(--s)); border: calc(2.5px * var(--s)) dashed #fff; border-radius: 999px; background: #111; color: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) #111, 0 calc(6px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, 0.3); font-family: var(--black); font-size: calc(10.5px * var(--s)); white-space: nowrap; }
.ms-pill:empty { display: none; }
.ms-back { margin-left: auto; display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(34px * var(--s)); padding: 0 calc(14px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(8px * var(--s)); color: #fff; font-size: calc(12.5px * var(--s));
  background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(4px * var(--s)) 0 #000, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.3); transition: transform 0.12s, filter 0.12s; }
.ms-back:hover { transform: translateX(calc(-4px * var(--s))); filter: brightness(1.25); }
.ms-back:active { transform: translate(calc(-4px * var(--s)), calc(2px * var(--s))); }
.ms-back i { font-style: normal; color: #ffcf1a; }

/* ---- the main panel: a black tab, the light well, then the big green button and the filter bar */
.mk-offers { padding-top: calc(30px * var(--s)); }
.mk-tab { position: absolute; z-index: 1; left: calc(12px * var(--s)); top: calc(-12px * var(--s)); display: flex; align-items: center; gap: calc(7px * var(--s)); height: calc(34px * var(--s)); padding: 0 calc(16px * var(--s)) 0 calc(8px * var(--s)); font-family: var(--black); font-size: calc(14px * var(--s)); letter-spacing: 0.02em; transform: rotate(-2deg); }
.mk-tab-ic { width: calc(24px * var(--s)); height: calc(24px * var(--s)); }
.mk-tab-ic svg { width: 100%; height: 100%; display: block; }
.mk-board {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(90px * var(--s)), 1fr)); align-content: start; gap: calc(8px * var(--s));
  padding: calc(8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(10px * var(--s));
  background: linear-gradient(180deg, #e6e6e6, #d6d6d6); box-shadow: inset 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.18);
}
.mk-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--s)); margin-top: calc(18px * var(--s)); text-align: center; font-weight: 700; font-size: calc(13px * var(--s)); color: #555; }
.mk-empty-ic { width: calc(50px * var(--s)); height: calc(50px * var(--s)); animation: mk-float 3s ease-in-out infinite; filter: drop-shadow(0 calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.25)); }
.mk-empty-ic svg { width: 100%; height: 100%; }
.mk-empty b { font-family: var(--black); font-size: calc(17px * var(--s)); color: #1b1b1b; }
.mk-empty em { font-style: normal; font-weight: 800; color: #1f8e10; }
.mk-bar { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; padding: calc(8px * var(--s)) calc(2px * var(--s)) calc(2px * var(--s)); }
.mk-vdiv { display: none; }
/* the chunky coloured button (the menu's Coins & Shop / Inventory bars) */
.ms-go, .market .aw-btn, .race .aw-btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--s));
  min-width: calc(104px * var(--s)); height: calc(36px * var(--s)); padding: 0 calc(14px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: calc(9px * var(--s));
  font-family: var(--black); font-weight: 900; font-size: calc(13.5px * var(--s)); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 0; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #5be043 0%, #2fb51c 50%, #1f8e10 100%);
  box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.25);
  cursor: pointer; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1), filter 0.14s, box-shadow 0.14s;
}
.ms-go::before, .market .aw-btn::before, .race .aw-btn::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 48%; border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)); }
.ms-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: sweep 3.5s 1.5s ease-in-out infinite; pointer-events: none; }
.market .aw-btn.green, .race .aw-btn.green { background: linear-gradient(180deg, #5be043 0%, #2fb51c 50%, #1f8e10 100%); border-color: #111; box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.25); }
.market .aw-btn.blue, .race .aw-btn.blue { background: linear-gradient(180deg, #3d6fe0 0%, #2a52c2 50%, #1d3c9e 100%); border-color: #111; box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.25); }
.market .aw-btn.red, .race .aw-btn.red { background: linear-gradient(180deg, #ff6b5a 0%, #e0301f 50%, #b3170e 100%); border-color: #111; box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.25); }
.market .aw-btn.dark, .race .aw-btn.dark { background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); border-color: #000; box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.25); }
.market .aw-btn.small, .race .aw-btn.small { min-width: calc(64px * var(--s)); height: calc(28px * var(--s)); padding: 0 calc(10px * var(--s)); font-size: calc(11.5px * var(--s)); }
.ms-go:hover:not(:disabled), .market .aw-btn:hover:not(:disabled), .race .aw-btn:hover:not(:disabled) { transform: translateY(calc(-2px * var(--s))) scale(1.03); filter: brightness(1.08); }
.ms-go:active:not(:disabled), .market .aw-btn:active:not(:disabled), .race .aw-btn:active:not(:disabled) { transform: translateY(calc(3px * var(--s))); box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(1px * var(--s)) 0 #111; }
.ms-go:disabled, .market .aw-btn:disabled, .race .aw-btn:disabled { filter: grayscale(0.85) brightness(0.85); cursor: default; }
.ms-go.mk-make { flex: none; min-width: calc(132px * var(--s)); height: calc(40px * var(--s)); font-size: calc(15px * var(--s)); }
.ms-go.mk-make:disabled { font-size: calc(12px * var(--s)); }
/* the filter bar: a black bar of coloured boxes */
.mk-cats { display: flex; flex: 1; justify-content: space-around; gap: calc(3px * var(--s)); min-width: 0; height: calc(40px * var(--s)); padding: 0 calc(6px * var(--s)); }
.mk-cat { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3px * var(--s)); padding: 0; border: 0; background: none; color: #bdbdbd; font-size: calc(7.5px * var(--s)); letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.12s; }
.mk-cat i { width: calc(17px * var(--s)); height: calc(17px * var(--s)); box-sizing: border-box; border-radius: calc(4px * var(--s)); border: calc(2.5px * var(--s)) solid var(--c); background: #0c0c0c; transition: transform 0.12s, background-color 0.12s, box-shadow 0.12s; }
.mk-cat:hover i { transform: scale(1.15); box-shadow: 0 0 calc(8px * var(--s)) var(--c); }
.mk-cat[aria-pressed="true"] { color: #fff; }
.mk-cat[aria-pressed="true"] i { background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.2' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; box-shadow: 0 0 calc(10px * var(--s)) var(--c); }

/* an offer: a white tile with the item and the seller; "Trading…" while someone trades on it */
.mk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--s)); min-width: 0; padding: calc(8px * var(--s)) calc(5px * var(--s)) calc(6px * var(--s));
  border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(11px * var(--s)); background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 50%, #dedede 100%);
  box-shadow: 0 calc(3px * var(--s)) 0 #1b1b1b, 0 calc(6px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.18); color: #111; font-size: calc(11px * var(--s)); transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1); animation: pop-in 0.3s; }
.mk-card:hover { transform: translateY(calc(-3px * var(--s))) rotate(-2deg); }
.mk-card .mk-cell { width: calc(62px * var(--s)); height: calc(62px * var(--s)); }
.mk-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--black); font-weight: 900; }
.mk-card.busy { cursor: default; }
.mk-card.busy:hover { transform: none; }
.mk-card.busy .mk-cell { filter: grayscale(0.9) brightness(0.8); }
.mk-busy { position: absolute; left: 50%; top: calc(40px * var(--s)); transform: translate(-50%, -50%) rotate(-8deg); padding: calc(2px * var(--s)) calc(7px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: calc(6px * var(--s)); background: #e0301f; color: #fff; font-family: var(--black); font-size: calc(9.5px * var(--s)); white-space: nowrap; box-shadow: 0 calc(2px * var(--s)) 0 #111; }
/* an item in its frame, coloured by its kind */
.mk-cell { position: relative; flex: none; display: grid; place-items: center; width: calc(54px * var(--s)); height: calc(54px * var(--s)); box-sizing: border-box; border-radius: calc(9px * var(--s)); border: calc(2.5px * var(--s)) solid var(--c, #9a9a9a); background: radial-gradient(circle at 50% 35%, #ffffff, #e9e9e9 75%); box-shadow: inset 0 0 calc(10px * var(--s)) color-mix(in srgb, var(--c, #9a9a9a) 40%, transparent), 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.25); }
.mk-cell img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.3)); }
.mk-cell.empty { border: calc(2px * var(--s)) dashed #9a9a9a; background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.mk-cell.big { width: calc(92px * var(--s)); height: calc(92px * var(--s)); border-width: calc(3px * var(--s)); }
.mk-cell.sm { width: calc(42px * var(--s)); height: calc(42px * var(--s)); border-width: calc(2px * var(--s)); }
.mk-cell.pop, .mk-coinline.pop, .mk-coins.pop, #mk-tcoins.pop { animation: mk-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes mk-pop { from { transform: scale(1.5); } to { transform: none; } }
.mk-coin { width: calc(15px * var(--s)); height: calc(15px * var(--s)); vertical-align: calc(-3px * var(--s)); margin-right: calc(4px * var(--s)); }
.mk-coins { font-family: var(--black); font-size: calc(12px * var(--s)); color: #c97800; white-space: nowrap; }
.mk-spin { display: inline-block; width: calc(11px * var(--s)); height: calc(11px * var(--s)); margin-right: calc(6px * var(--s)); vertical-align: calc(-1px * var(--s)); border-radius: 50%; border: calc(2px * var(--s)) solid rgba(0, 0, 0, 0.15); border-top-color: #2a52c2; animation: aw-spin 0.7s linear infinite; }

/* your offer on show: the item big in its frame, light turning behind it in its kind's colour */
.mk-board.mk-mine { display: flex; align-items: center; justify-content: center; gap: calc(22px * var(--s)); overflow: hidden; padding: calc(6px * var(--s)) calc(12px * var(--s));
  background: radial-gradient(ellipse 45% 85% at 30% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), linear-gradient(180deg, #ececec, #d8d8d8); }
.mk-spot { position: relative; flex: none; display: grid; place-items: center; width: calc(132px * var(--s)); height: calc(132px * var(--s)); }
.mk-rays { position: absolute; inset: calc(-18px * var(--s)); border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 9deg, transparent 9deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); animation: mk-rays 16s linear infinite; pointer-events: none; }
@keyframes mk-rays { to { transform: rotate(360deg); } }
.mk-cell.huge { width: calc(108px * var(--s)); height: calc(108px * var(--s)); border-width: calc(3.5px * var(--s)); border-radius: calc(16px * var(--s)); box-shadow: 0 0 calc(18px * var(--s)) color-mix(in srgb, var(--c) 55%, transparent), 0 calc(4px * var(--s)) 0 #1b1b1b; animation: mk-float 3s ease-in-out infinite; }
.mk-cell.huge img { width: 80%; height: 80%; }
@keyframes mk-float { 50% { transform: translateY(calc(-4px * var(--s))); } }
.mk-tag { position: absolute; left: 50%; bottom: calc(2px * var(--s)); transform: translateX(-50%); padding: 0 calc(11px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: 999px; background: var(--c); box-shadow: 0 calc(2px * var(--s)) 0 #111;
  font-family: var(--black); font-size: calc(9.5px * var(--s)); line-height: calc(17px * var(--s)); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
.mk-mine-info { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6px * var(--s)); min-width: 0; }
.mk-mine-info h3 { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--black); font-weight: 900; font-size: calc(14px * var(--s)); color: #1b1b1b; }
.mk-mine-info h3.mk-big { font-family: var(--font-display); font-weight: 400; font-size: calc(25px * var(--s)); line-height: 1.05; color: #ffcf1a; -webkit-text-stroke: calc(2.4px * var(--s)) #1b1b1b; paint-order: stroke fill; text-shadow: 0 calc(3px * var(--s)) 0 #1b1b1b; }
.mk-iname.big { max-width: none; text-align: left; font-family: var(--black); font-size: calc(14px * var(--s)); color: #333; }
.mk-dots { display: inline-flex; gap: calc(3px * var(--s)); margin-right: calc(7px * var(--s)); vertical-align: calc(1px * var(--s)); }
.mk-dots i { width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: #2a52c2; animation: mk-hop 1.2s ease-in-out infinite; }
.mk-dots i:nth-child(2) { animation-delay: 0.15s; }
.mk-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mk-hop { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(calc(-5px * var(--s))); opacity: 1; } }
.mk-mine-info > .aw-btn { margin-top: calc(3px * var(--s)); min-width: calc(150px * var(--s)); height: calc(36px * var(--s)); }
.mk-board.mk-mine.trading { gap: calc(14px * var(--s)); }
.mk-mine.trading .mk-spot { width: calc(92px * var(--s)); height: calc(92px * var(--s)); }
.mk-mine.trading .mk-cell.huge { width: calc(78px * var(--s)); height: calc(78px * var(--s)); }
.mk-tline { display: flex; align-items: center; gap: calc(10px * var(--s)); max-width: 100%; min-width: 0; }
.mk-tline .mk-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-status { margin: 0; font-weight: 700; font-size: calc(12.5px * var(--s)); color: #444; }
.mk-acts { display: flex; gap: calc(8px * var(--s)); }
.mk-acts .aw-btn { min-width: calc(86px * var(--s)); height: calc(32px * var(--s)); font-size: calc(12px * var(--s)); }
.mk-slots { display: grid; grid-template-columns: repeat(3, auto); gap: calc(6px * var(--s)); }
.mk-slots.sm { gap: calc(4px * var(--s)); }
.mk-slots.row { grid-template-columns: repeat(6, auto); gap: calc(4px * var(--s)); }
.mk-coinline { display: flex; align-items: center; gap: calc(8px * var(--s)); }

/* ---- traders / players: a dashed pill, then a black glossy bar each */
.mk-traders { display: flex; flex-direction: column; gap: calc(7px * var(--s)); min-height: 0; }
.mk-th { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--s)); flex: none; height: calc(32px * var(--s)); border: calc(2.5px * var(--s)) dashed #fff; border-radius: 999px; background: #111; box-shadow: 0 0 0 calc(2px * var(--s)) #111, 0 calc(6px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, 0.3); font-family: var(--black); font-size: calc(10.5px * var(--s)); letter-spacing: 0.04em; white-space: nowrap; }
.mk-th-ic { flex: none; width: calc(19px * var(--s)); height: calc(19px * var(--s)); }
.mk-th-ic svg, .mk-ch-ic svg { width: 100%; height: 100%; display: block; }
.mk-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: calc(5px * var(--s)); padding: calc(2px * var(--s)) calc(2px * var(--s)) calc(6px * var(--s)); }
.mk-trader { flex: none; display: flex; align-items: center; gap: calc(7px * var(--s)); height: calc(30px * var(--s)); padding: 0 calc(8px * var(--s)); overflow: hidden; font-family: var(--black); font-size: calc(11px * var(--s)); animation: slide-in-right 0.35s cubic-bezier(.2, 1.3, .4, 1) both; transition: transform 0.12s, filter 0.12s; }
.mk-trader:hover { transform: translateX(calc(-3px * var(--s))); filter: brightness(1.2); }
.mk-trader.you { box-shadow: inset calc(4px * var(--s)) 0 0 #ffcf1a, inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.35); }
.mk-trader b { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dot { position: relative; z-index: 1; flex: none; width: calc(13px * var(--s)); height: calc(13px * var(--s)); box-sizing: border-box; border-radius: 50%; border: calc(2px * var(--s)) solid #000; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--c, #2fb51c) 20%); }
.mk-none { margin: calc(8px * var(--s)) 0 0; text-align: center; font-family: var(--black); font-size: calc(10px * var(--s)); color: #fff; text-shadow: 0 calc(1px * var(--s)) calc(3px * var(--s)) #000; }

/* ---- the chat: a white slab with a black strip on top */
.mk-chat { grid-column: 1 / -1; padding: calc(5px * var(--s)); }
.mk-ch { display: flex; align-items: center; gap: calc(7px * var(--s)); flex: none; height: calc(25px * var(--s)); padding: 0 calc(8px * var(--s)); font-family: var(--black); font-size: calc(10.5px * var(--s)); }
.mk-ch b { font-weight: 900; }
.mk-ch-ic { flex: none; width: calc(18px * var(--s)); height: calc(18px * var(--s)); }
.mk-log { flex: 1; min-height: 0; overflow-y: auto; padding: calc(4px * var(--s)) calc(8px * var(--s)); font-weight: 700; font-size: calc(12px * var(--s)); line-height: 1.4; color: #222; user-select: text; -webkit-user-select: text; }
.mk-log p { margin: 0; overflow-wrap: anywhere; }
.mk-log b, .rr-log b, .rr-row b, .mk-who, .mk-mine-info h3 .mk-who { -webkit-text-stroke: calc(3px * var(--s)) #1b1b1b; paint-order: stroke fill; }
.mk-log .sys { color: #1f8e10; }
.mk-log .note { color: #b07a00; }
.mk-say { position: relative; display: flex; flex: none; padding-top: calc(4px * var(--s)); }
.mk-say input { flex: 1; min-width: 0; height: calc(26px * var(--s)); box-sizing: border-box; padding: 0 calc(42px * var(--s)) 0 calc(9px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(8px * var(--s)); outline: none; background: #fff; color: #111; caret-color: #2a52c2; font: 700 calc(12px * var(--s)) var(--font-ui); box-shadow: inset 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.12); user-select: text; -webkit-user-select: text; }
.mk-say input:focus { border-color: #2a52c2; box-shadow: 0 0 0 calc(2px * var(--s)) rgba(42, 82, 194, 0.25), inset 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.12); }
.mk-say input::placeholder { color: #8a8a8a; }
.mk-chatlock { position: absolute; right: calc(5px * var(--s)); top: 50%; margin-top: calc(2px * var(--s)); transform: translateY(-50%); padding: 0 calc(6px * var(--s)); border-radius: 999px; background: #e0301f; color: #fff; font-family: var(--black); font-size: calc(9.5px * var(--s)); line-height: calc(16px * var(--s)); }

/* ---- scrollbars: the shop's (a grey thumb on a soft track) */
.mk-scroll::-webkit-scrollbar { width: calc(9px * var(--s)); }
.mk-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.mk-scroll::-webkit-scrollbar-track { margin: calc(4px * var(--s)) 0; border-radius: 999px; background: rgba(0, 0, 0, 0.12); }
.mk-scroll::-webkit-scrollbar-thumb { border-radius: 999px; border: calc(1.5px * var(--s)) solid #1b1b1b; background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%), #9a9a9a; }
.mk-scroll::-webkit-scrollbar-thumb:hover { background-color: #6e6e6e; }
.mk-scroll::-webkit-scrollbar-corner { background: transparent; }
.mk-list.mk-scroll::-webkit-scrollbar-thumb { border-color: #000; background-color: #5a5a5a; }
@supports not selector(::-webkit-scrollbar) { .mk-scroll { scrollbar-color: #9a9a9a rgba(0, 0, 0, 0.12); } }

/* ---- windows over these screens: a white slab with a black title bar */
.mk-dim { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(10, 20, 40, 0.42); animation: fade-in 0.2s ease-out; }
.mk-dim.keepchat { bottom: calc(127px * var(--s)); }
.market .aw, .race .aw {
  padding: calc(6px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(16px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 55%, #e0e0e0 100%);
  box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.1), 0 calc(5px * var(--s)) 0 #1b1b1b, 0 calc(14px * var(--s)) calc(26px * var(--s)) rgba(0, 0, 0, 0.4);
  color: #1b1b1b; font-family: var(--font-ui);
}
.market .aw-head, .race .aw-head { height: calc(40px * var(--s)); padding-left: calc(52px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(10px * var(--s)); background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.3); }
.market .aw-head::after, .race .aw-head::after { display: none; }
.market .aw-badge, .race .aw-badge { background: linear-gradient(180deg, #ffffff, #dcdcdc); box-shadow: inset 0 0 0 calc(2px * var(--s)) #1b1b1b; }
.market .aw-title, .race .aw-title { font-family: var(--black); font-weight: 900; font-size: calc(16px * var(--s)); letter-spacing: 0; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.market .aw-body p, .race .aw-body p { color: #222; font-weight: 800; text-shadow: none; }
.market .aw-err, .race .aw-err { color: #d4231a; text-shadow: none; }
.aw.mkw { width: calc(340px * var(--s)); }
.aw.mkw.wide { width: calc(440px * var(--s)); }
.mkw .aw-head { padding-right: calc(46px * var(--s)); }
.mkw .aw-title { overflow: hidden; text-overflow: ellipsis; }
.as-x.mkw-x { right: calc(5px * var(--s)); top: 50%; width: calc(28px * var(--s)); height: calc(28px * var(--s)); margin-top: calc(-14px * var(--s)); }
.aw-btns.mk-center { justify-content: center; }
.mk-hint { margin: 0; }
.mk-tw { display: flex; align-items: center; justify-content: center; gap: calc(14px * var(--s)); }
.mk-side { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--s)); }
.mk-lab { font-family: var(--black); font-size: calc(10.5px * var(--s)); letter-spacing: 0.06em; text-transform: uppercase; color: #555; }
.mk-iname { max-width: calc(110px * var(--s)); text-align: center; font-family: var(--black); font-size: calc(10.5px * var(--s)); color: #222; }
.mk-arrow { width: calc(34px * var(--s)); height: calc(34px * var(--s)); }
.mk-arrow svg { width: 100%; height: 100%; }
.mk-slot { position: relative; padding: 0; border: 0; border-radius: calc(9px * var(--s)); background: none; cursor: pointer; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1); }
.mk-slot:hover:not(:disabled) { transform: scale(1.1); }
.mk-slot:disabled { cursor: default; }
.mk-slot.empty:hover:not(:disabled) .mk-cell { border-color: #2a52c2; }
.mk-plus { position: absolute; inset: 0; pointer-events: none; }
.mk-plus::before, .mk-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(16px * var(--s)); height: calc(3px * var(--s)); margin: calc(-1.5px * var(--s)) 0 0 calc(-8px * var(--s)); border-radius: 2px; background: #9a9a9a; }
.mk-plus::after { transform: rotate(90deg); }
.mk-slot.empty:hover:not(:disabled) .mk-plus::before, .mk-slot.empty:hover:not(:disabled) .mk-plus::after { background: #2a52c2; }
.mk-rm { position: absolute; right: calc(-4px * var(--s)); top: calc(-4px * var(--s)); width: calc(18px * var(--s)); height: calc(18px * var(--s)); border-radius: 50%; border: calc(2px * var(--s)) solid #111; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #e0301f; opacity: 0; transform: scale(0.6); transition: opacity 0.12s, transform 0.12s; pointer-events: none; }
.mk-slot:hover:not(:disabled) .mk-rm { opacity: 1; transform: none; }
.mkw.locked .mk-slots { opacity: 0.7; }
.mk-coinbox { display: flex; gap: calc(6px * var(--s)); }
.mk-coinbox input { width: calc(90px * var(--s)); height: calc(28px * var(--s)); box-sizing: border-box; padding: 0 calc(8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(7px * var(--s)); outline: none; background: #fff; color: #111; font: 800 calc(13px * var(--s)) var(--font-ui); user-select: text; -webkit-user-select: text; }
.mk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--s)); }
.mk-cols > div { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--s)); padding: calc(8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(10px * var(--s)); background: linear-gradient(180deg, #e6e6e6, #d6d6d6); box-shadow: inset 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.15); }
.mk-lv { margin-left: calc(4px * var(--s)); padding: 0 calc(7px * var(--s)); border-radius: 999px; background: #1b1b1b; color: #fff; font-family: var(--black); font-size: calc(9.5px * var(--s)); }
.mk-who { font-family: var(--black); }
/* DEAL! */
.mk-dealmsg { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; animation: flash 2.6s ease-out forwards; }
.mk-dealmsg b { font-family: var(--font-display); font-weight: 400; font-size: calc(68px * var(--s)); line-height: 1; color: #5be043; -webkit-text-stroke: calc(4px * var(--s)) #111; paint-order: stroke fill; text-shadow: 0 calc(6px * var(--s)) 0 #111; }
.mk-dealmsg span { font-family: var(--black); font-size: calc(15px * var(--s)); color: #fff; -webkit-text-stroke: calc(3px * var(--s)) #111; paint-order: stroke fill; }

/* ------------------------------------------------------------------ a running lobby (src/online/Race.js) */
.mk-board.rl-board { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: calc(10px * var(--s)) calc(14px * var(--s)); }
.rl-wait { font-family: var(--black); font-size: calc(12px * var(--s)); color: #555; }
.rl .mk-trader b { flex: 1; }
.rl-bot { position: relative; z-index: 1; flex: none; padding: 0 calc(4px * var(--s)); border-radius: calc(4px * var(--s)); background: #ffcf1a; color: #3a2400; font-style: normal; font-family: var(--black); font-size: calc(7.5px * var(--s)); line-height: calc(13px * var(--s)); letter-spacing: 0.05em; }
.rl-flag { position: relative; z-index: 1; display: grid; flex: none; animation: mk-float 1.6s ease-in-out infinite; }
.rl-flag svg { width: calc(15px * var(--s)); height: calc(15px * var(--s)); }
.rl-lv { flex: none; min-width: calc(18px * var(--s)); padding: 0 calc(5px * var(--s)); border-radius: 999px; background: #1b1b1b; color: #fff; font-family: var(--black); font-size: calc(9px * var(--s)); line-height: calc(15px * var(--s)); text-align: center; }
/* Search Game: Battle, or a coin bet */
.rl-intro { grid-column: 1 / -1; text-align: center; }
.rl-intro h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(24px * var(--s)); color: #ffcf1a; -webkit-text-stroke: calc(2.4px * var(--s)) #1b1b1b; paint-order: stroke fill; text-shadow: 0 calc(3px * var(--s)) 0 #1b1b1b; }
.rl-intro p { margin: calc(3px * var(--s)) 0 0; font-weight: 800; font-size: calc(11.5px * var(--s)); color: #444; }
.rl-mode { position: relative; isolation: isolate; overflow: hidden; color: #fff; border: calc(2px * var(--s)) solid #111; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1), filter 0.14s; }
.rl-mode::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)); }
.rl-mode:hover:not(:disabled) { transform: translateY(calc(-2px * var(--s))) scale(1.03); filter: brightness(1.08); }
.rl-mode:active:not(:disabled) { transform: translateY(calc(3px * var(--s))); }
.rl-mode:disabled { filter: grayscale(0.85) brightness(0.8); cursor: default; }
.rl-mode.battle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5px * var(--s)); border-radius: calc(12px * var(--s));
  background: linear-gradient(180deg, #5be043 0%, #2fb51c 50%, #1f8e10 100%); box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) 0 #111, 0 calc(8px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, 0.25); }
.rl-mode.battle::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: sweep 3.5s 1s ease-in-out infinite; pointer-events: none; }
.rl-mode.battle b { font-weight: 900; font-size: calc(26px * var(--s)); line-height: 1; letter-spacing: 0.01em; text-shadow: 0 calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.45); }
.rl-mode.battle small { font-family: var(--font-ui); font-weight: 800; font-size: calc(11px * var(--s)); color: #eaffdf; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.rl-bets { display: flex; flex-direction: column; justify-content: center; gap: calc(9px * var(--s)); padding: calc(8px * var(--s)); border-radius: calc(12px * var(--s)); text-align: center; }
.rl-bets span { position: relative; z-index: 1; font-family: var(--black); font-size: calc(9.5px * var(--s)); letter-spacing: 0.04em; text-transform: uppercase; color: #ffcf1a; }
.rl-bets div { position: relative; z-index: 1; display: flex; justify-content: center; gap: calc(7px * var(--s)); }
.rl-mode.bet { display: flex; align-items: center; justify-content: center; gap: calc(2px * var(--s)); min-width: calc(52px * var(--s)); height: calc(40px * var(--s)); padding: 0 calc(6px * var(--s)); border-radius: calc(9px * var(--s)); background: linear-gradient(180deg, #ffe066 0%, #ffc21a 50%, #e0a000 100%); box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.4), 0 calc(3px * var(--s)) 0 #000; font-size: calc(14px * var(--s)); color: #3a2400; }
.rl-mode.bet .mk-coin { width: calc(15px * var(--s)); height: calc(15px * var(--s)); margin: 0; }
/* searching: a flag inside two widening rings */
.rl-search { display: flex; flex-direction: column; align-items: center; gap: calc(7px * var(--s)); text-align: center; }
.rl-search h3 { margin: 0; font-family: var(--black); font-weight: 900; font-size: calc(16px * var(--s)); color: #1b1b1b; }
.rl-radar { position: relative; display: grid; place-items: center; width: calc(64px * var(--s)); height: calc(64px * var(--s)); }
.rl-radar svg { width: calc(34px * var(--s)); height: calc(34px * var(--s)); animation: mk-float 1.6s ease-in-out infinite; }
.rl-radar i { position: absolute; inset: 0; border-radius: 50%; border: calc(3px * var(--s)) solid #1b1b1b; animation: rl-ping 1.6s ease-out infinite; }
.rl-radar i + i { animation-delay: 0.8s; }
@keyframes rl-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.rl-search .aw-btn, .rl-acts .aw-btn { min-width: calc(110px * var(--s)); height: calc(34px * var(--s)); }
/* the group: the game type, four white slots with ready lights, the status and the buttons */
.rl-group { display: flex; flex-direction: column; gap: calc(8px * var(--s)); width: 100%; }
.rl-gtitle { display: flex; align-items: center; justify-content: space-between; }
.rl-gtitle b { font-family: var(--black); font-size: calc(11px * var(--s)); color: #333; }
.rl-chip { display: inline-flex; align-items: center; gap: calc(4px * var(--s)); padding: calc(3px * var(--s)) calc(12px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: 999px; background: linear-gradient(180deg, #5be043, #1f8e10); box-shadow: 0 calc(2px * var(--s)) 0 #111; font-family: var(--black); font-size: calc(11px * var(--s)); text-transform: uppercase; color: #fff; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.rl-chip.bet { background: linear-gradient(180deg, #ffe066, #e0a000); color: #3a2400; text-shadow: none; }
.rl-chip .mk-coin { margin: 0; }
.rl-slots { display: grid; grid-template-columns: 1fr 1fr; gap: calc(7px * var(--s)); }
.rl-slot { display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(32px * var(--s)); padding: 0 calc(10px * var(--s)) 0 calc(14px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(9px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 46%, #dcdcdc 54%, #cbcbcb 100%); box-shadow: inset calc(6px * var(--s)) 0 0 var(--c), 0 calc(3px * var(--s)) 0 #1b1b1b; color: #111; font-family: var(--black); font-size: calc(11.5px * var(--s)); animation: pop-in 0.3s; }
.rl-slot b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-slot.you { box-shadow: inset calc(6px * var(--s)) 0 0 var(--c), 0 0 0 calc(2px * var(--s)) #ffcf1a, 0 calc(3px * var(--s)) 0 #1b1b1b; }
.rl-slot.empty { justify-content: center; padding: 0; border: calc(2px * var(--s)) dashed #8a8a8a; background: rgba(255, 255, 255, 0.45); box-shadow: none; color: #777; font-size: calc(10px * var(--s)); animation: none; }
/* whether they're ready: a word on a pill (red Not ready, green Ready), readable on any skin row */
.rl-rdy { position: relative; z-index: 1; flex: none; padding: calc(2px * var(--s)) calc(7px * var(--s)); border-radius: 999px; border: calc(1.5px * var(--s)) solid #111; background: linear-gradient(180deg, #e8483e, #b0170f); color: #fff; font: normal calc(10px * var(--s)) / 1.1 "Arial Black", Arial, sans-serif; font-style: normal; white-space: nowrap; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.45); }
.rl-rdy.on { background: linear-gradient(180deg, #4ee03a, #19a00c); box-shadow: 0 0 calc(6px * var(--s)) rgba(74, 210, 58, 0.8); }
.rl-status { text-align: center; }
.rl-status.go { font-family: var(--font-display); font-size: calc(19px * var(--s)); color: #ffcf1a; -webkit-text-stroke: calc(2px * var(--s)) #1b1b1b; paint-order: stroke fill; text-shadow: 0 calc(2px * var(--s)) 0 #1b1b1b; animation: bump 1s ease-in-out infinite; }
.rl-acts { display: flex; justify-content: center; gap: calc(10px * var(--s)); }

/* ---- Stick Run Evolution's look for the Marketplace and the running lobbies (its market and mplobby
   screens). The title big and black with the sector or the lobby's name beside it, and the green
   "< Back To Menu". The Marketplace: an orange-brown backdrop, black OFFERS / ONLINE TRADERS bars over a
   dark brown board and a dark list, Make Offer and the category boxes on a black strip, a dark chat.
   A lobby: an orange sky with clouds, and one big dark rounded panel with RACE, PLAYERS and CHAT in
   white, black wells, a round chat box with "Press [enter] to send!" under it. Chat in the pixel font. */
#market, #runlobby { background: rgba(0, 0, 0, 0.45); }
:is(#market, #runlobby) .ms-title { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; animation: none; }
:is(#market, #runlobby) .ms-ic, :is(#market, #runlobby) .mk-tab-ic, :is(#market, #runlobby) .mk-th-ic, :is(#market, #runlobby) .mk-ch-ic { display: none; }
:is(#market, #runlobby) .ms-tt { flex-direction: row; align-items: baseline; gap: calc(14px * var(--s)); }
:is(#market, #runlobby) .mk-title { font-size: calc(36px * var(--s)); letter-spacing: -0.02em; color: #111; text-shadow: calc(2px * var(--s)) calc(2px * var(--s)) 0 rgba(60, 25, 0, 0.45); }
:is(#market, #runlobby) .mk-sector { font-family: "PT Sans", Arial, sans-serif; font-size: calc(17px * var(--s)); letter-spacing: 0; text-transform: lowercase; color: #3a2a18; }
#runlobby .mk-sector { font-family: var(--black); font-size: calc(19px * var(--s)); text-transform: none; color: #ffc93c; text-shadow: calc(2px * var(--s)) calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
#runlobby .mk-title, #market .mk-title { color: #fff; text-shadow: calc(2px * var(--s)) calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
#runlobby .ms-tt { align-items: center; }
#market .mk-sector { color: #ffc93c; text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
#market .mk-deals { position: relative; top: calc(4px * var(--s)); color: #fff; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.7); }
#runlobby #rl-count { align-self: center; color: #fff; font-weight: 700; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.7); }
#runlobby #rl-count::before { content: ""; flex: none; width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; background: #3fe02a; box-shadow: 0 0 calc(6px * var(--s)) #5bff40; animation: rl-live 1.4s ease-in-out infinite; }
@keyframes rl-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.55; } }
:is(#market, #runlobby) .ms-pill { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: #111; font-family: "PT Sans", Arial, sans-serif; font-weight: 400; font-size: calc(15px * var(--s)); }
:is(#market, #runlobby) .ms-back { height: calc(36px * var(--s)); padding: 0 calc(12px * var(--s)); border: 0; border-radius: calc(5px * var(--s)); background: linear-gradient(180deg, #2fd42f 0%, #18b818 50%, #0b9a0b 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.3); font-size: calc(13.5px * var(--s)); }
:is(#market, #runlobby) .ms-back { flex: none; white-space: nowrap; }
:is(#market, #runlobby) .ms-back i { font-size: 0; }
:is(#market, #runlobby) .ms-back i::before { content: "<"; font-size: calc(13.5px * var(--s)); color: #fff; }
:is(#market, #runlobby) .ms-go, :is(#market, #runlobby) .aw-btn.green { border: 0; border-radius: calc(5px * var(--s)); background: linear-gradient(180deg, #2fd42f 0%, #18b818 50%, #0b9a0b 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.35); }
:is(#market, #runlobby) .ms-go::after { display: none; }
:is(#market, #runlobby) .ms-go.mk-make { text-transform: none; }
/* the panels: no white slabs; black bars and dark wells */
:is(#market, #runlobby) .mk-offers, :is(#market, #runlobby) .mk-chat { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:is(#market, #runlobby) .mk-tab, :is(#market, #runlobby) .mk-th { position: static; flex: none; justify-content: flex-start; height: calc(30px * var(--s)); padding: 0 calc(10px * var(--s)); border: 0; border-radius: 0; background: #000; box-shadow: none; transform: none; color: #d8d8d8; font-family: var(--black); font-size: calc(15px * var(--s)); letter-spacing: 0; }
:is(#market, #runlobby) .mk-th { justify-content: center; }
:is(#market, #runlobby) .mk-board { border: 0; border-radius: 0; background: #351a09; box-shadow: inset 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.5); }
:is(#market, #runlobby) .mk-bar { padding: calc(5px * var(--s)) calc(8px * var(--s)); background: #161616; }
:is(#market, #runlobby) .mk-cats { border: 0; border-radius: 0; background: #0c0c0c; box-shadow: none; }
:is(#market, #runlobby) .mk-cats::after { display: none; }
:is(#market, #runlobby) .mk-cat { font-family: "PT Sans", Arial, sans-serif; font-size: calc(10px * var(--s)); letter-spacing: 0; text-transform: lowercase; color: #9a9a9a; }
:is(#market, #runlobby) .mk-cat i { width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-width: calc(3px * var(--s)); background-color: #111; }
:is(#market, #runlobby) .mk-traders { gap: 0; }
:is(#market, #runlobby) .mk-list { padding: calc(6px * var(--s)); background: #1f1f1f; box-shadow: inset 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.6); }
#market .mk-traders .mk-th { margin-bottom: calc(5px * var(--s)); }
/* its list: the lobby's PLAYERS list (.rl-list) */
#market .mk-traders .mk-list { padding: 0; border-top: 0; background: #333; box-shadow: inset 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.6); }
/* the chat: dark, the welcome line and the lines in Stick Run's pixel font */
:is(#market, #runlobby) .mk-chat { gap: 0; }
#market .mk-chat { border: calc(2px * var(--s)) solid #8a7a66; background: #1b1b1b; }
:is(#market, #runlobby) .mk-ch { height: auto; padding: calc(6px * var(--s)) calc(10px * var(--s)) 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #1f86d8; font-family: "VT323", monospace; font-size: calc(19px * var(--s)); }
:is(#market, #runlobby) .mk-ch b { font-weight: 400; }
:is(#market, #runlobby) .mk-log { color: #e6e6e6; font-family: "VT323", monospace; font-weight: 400; font-size: calc(17px * var(--s)); line-height: 1.1; }
:is(#market, #runlobby) .mk-log .sys { color: #3fdc2f; }
:is(#market, #runlobby) .mk-log .note { color: #ffc93c; }
#market .mk-say { padding-top: 0; border-top: calc(2px * var(--s)) solid #8a7a66; }
#market .mk-say input { height: calc(30px * var(--s)); border: 0; border-radius: 0; background: #111; color: #fff; caret-color: #fff; }
#market .mk-say input:focus { box-shadow: none; }
:is(#market, #runlobby) .mk-chatlock { background: none; color: #ccc; font-family: "PT Sans", Arial, sans-serif; font-size: calc(13px * var(--s)); }
:is(#market, #runlobby) .mk-chatlock::before { content: "🔒 "; }
:is(#market, #runlobby) .mk-none { font-family: "PT Sans", Arial, sans-serif; font-weight: 400; color: #bbb; text-shadow: none; }
/* a lobby (Stick Run's mplobby): the header, then one dark rounded panel, black on the left fading to
   grey on the right: CHAT (its black box, a round input, "Press [enter] to send!", the green Search game)
   and PLAYERS (light grey rows on a dark list) */
#runlobby .mk-wrap { position: static; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(54px * var(--s)) minmax(0, 1fr); }
#runlobby .mk-head { grid-row: 1; }
.rl-panel { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) calc(160px * var(--s)); gap: calc(16px * var(--s)); min-height: 0; padding: calc(12px * var(--s)) calc(18px * var(--s)) calc(14px * var(--s)); border-radius: calc(16px * var(--s)); background: linear-gradient(90deg, #0b0b0b 0%, #1c1c1c 50%, #505050 100%); box-shadow: inset 0 0 0 calc(2px * var(--s)) #262626, 0 calc(6px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.45); }
.rl-h { display: block; margin-bottom: calc(6px * var(--s)); font-family: var(--black); font-size: calc(17px * var(--s)); color: #fff; }
.rl-chatcol, .rl-playcol { display: flex; flex-direction: column; min-height: 0; }
.rl-playcol { padding-left: calc(14px * var(--s)); border-left: calc(3px * var(--s)) solid rgba(0, 0, 0, 0.55); }
#runlobby .mk-log { flex: 1; min-height: 0; padding: calc(6px * var(--s)) calc(10px * var(--s)); border-radius: calc(10px * var(--s)); background: #0a0a0a; }
#runlobby .mk-log .rl-welcome { color: #1f86d8; }
#runlobby .mk-say { padding-top: calc(7px * var(--s)); }
#runlobby .mk-say input { height: calc(24px * var(--s)); border: 0; border-radius: 999px; background: #151515; color: #fff; caret-color: #fff; font-family: "PT Sans", Arial, sans-serif; }
#runlobby .mk-say input:focus { box-shadow: 0 0 0 calc(1.5px * var(--s)) #555; }
.rl-enter { margin-top: calc(2px * var(--s)); text-align: center; font-family: "PT Sans", Arial, sans-serif; font-size: calc(11px * var(--s)); color: #fff; }
.rl-searchbtn { align-self: flex-start; margin-top: calc(10px * var(--s)); height: calc(34px * var(--s)); padding: 0 calc(20px * var(--s)); border: 0; border-radius: calc(5px * var(--s)); background: linear-gradient(180deg, #2fd42f 0%, #18b818 50%, #0b9a0b 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.4); color: #fff; font-size: calc(15px * var(--s)); transition: filter 0.12s, transform 0.12s; }
.rl-searchbtn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(calc(-1px * var(--s))); }
.rl-searchbtn:disabled { filter: grayscale(0.8) brightness(0.8); cursor: default; }
.rl-list { flex: 1; min-height: 0; overflow-y: auto; background: #333; box-shadow: inset 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.6); }
.rl-p { display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(22px * var(--s)); padding: 0 calc(6px * var(--s)); border-bottom: calc(1px * var(--s)) solid #8a8a8a; background: linear-gradient(180deg, #ececec, #bcbcbc); color: #111; font-family: "PT Sans", Arial, sans-serif; font-size: calc(13px * var(--s)); }
.rl-p b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-p.you b { text-decoration: none; } /* (no line under your own name, as in Stick Run) */
.rl-rank { flex: none; width: calc(7px * var(--s)); height: calc(7px * var(--s)); margin: calc(4px * var(--s)) calc(2px * var(--s)) 0; border: solid #ffe000; border-width: calc(2.5px * var(--s)) calc(2.5px * var(--s)) 0 0; transform: rotate(-45deg); filter: drop-shadow(0 0 calc(1px * var(--s)) #8a7000); }
.rl-p .rl-flag svg { width: calc(13px * var(--s)); height: calc(13px * var(--s)); }
#runlobby .mk-none { color: #ccc; }
/* its windows (#rl-board): Search Game, the bets and Searching Game... (searchgame_w: light grey, a
   cyan arrow behind the title), and the game you're in (currentLobbyGame_mc: orange) */
#runlobby .rl-board { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rl-dim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); pointer-events: auto; animation: fade-in 0.2s ease-out; }
.rl-win { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(7px * var(--s)); padding: calc(8px * var(--s)) calc(12px * var(--s)) calc(12px * var(--s)); border-radius: calc(10px * var(--s)); font-family: "PT Sans", Arial, sans-serif; color: #111; box-shadow: 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.5); animation: sri-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
.rl-win h3 { margin: 0; font-weight: 700; font-size: calc(25px * var(--s)); line-height: 1.1; color: #000; }
.rl-sw { width: calc(232px * var(--s)); background: linear-gradient(172deg, rgba(160, 238, 252, 0.75) 0 calc(22px * var(--s)), transparent calc(23px * var(--s))), linear-gradient(180deg, #ffffff 0%, #ececec 50%, #d2d2d2 100%); }
.rl-x { position: absolute; top: calc(3px * var(--s)); right: calc(3px * var(--s)); width: calc(18px * var(--s)); height: calc(18px * var(--s)); padding: 0; border: calc(1.5px * var(--s)) solid #000; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff4d4d, #c40000); color: #fff; font-family: Arial, sans-serif; font-weight: 900; font-size: calc(11px * var(--s)); line-height: 1; }
.rl-pickbtn { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--s)); width: 100%; height: calc(34px * var(--s)); border: 0; border-radius: calc(6px * var(--s)); background: linear-gradient(180deg, #fafafa, #c8c8c8); box-shadow: 0 calc(1.5px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.35); transition: filter 0.12s, transform 0.12s; }
.rl-pickbtn:hover { filter: brightness(1.06); transform: translateY(calc(-1px * var(--s))); }
.rl-pickbtn b { margin: 0 calc(4px * var(--s)); font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(18px * var(--s)); text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.35); }
.rl-pickbtn.battle b { color: #e07000; }
.rl-pickbtn.wager b { color: #10a8d8; }
.rl-pickbtn .mk-coin { width: calc(13px * var(--s)); height: calc(13px * var(--s)); margin: 0; }
.rl-run { width: calc(11px * var(--s)); height: calc(14px * var(--s)); }
.rl-runs { display: inline-flex; }
.rl-sel { margin: 0; font-weight: 700; font-size: calc(16px * var(--s)); color: #333; }
#runlobby .rl-bets { display: flex; flex-direction: row; gap: calc(10px * var(--s)); padding: 0; border: 0; background: none; box-shadow: none; }
#runlobby .rl-bets::after { display: none; }
.rl-bet { width: calc(56px * var(--s)); height: calc(44px * var(--s)); border: 0; border-radius: calc(6px * var(--s)); background: radial-gradient(circle, #fffbd2 0 calc(15px * var(--s)), #f2edb0 calc(15.5px * var(--s)) calc(16.5px * var(--s)), #fff calc(17px * var(--s))); box-shadow: 0 calc(1px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.3); color: #000; font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(19px * var(--s)); }
.rl-bet:hover:not(:disabled) { transform: translateY(calc(-1px * var(--s))); }
.rl-bet:disabled { opacity: 0.4; cursor: default; }
.rl-bars { display: flex; gap: calc(4px * var(--s)); }
.rl-bars i { width: calc(11px * var(--s)); height: calc(26px * var(--s)); box-sizing: border-box; border: calc(1px * var(--s)) solid #6f8fe0; background: #8aa6ea; animation: rl-bar 1s ease-in-out infinite; }
.rl-bars i:nth-child(2) { animation-delay: 0.2s; }
.rl-bars i:nth-child(3) { animation-delay: 0.4s; }
@keyframes rl-bar { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.rl-sw p { margin: 0; font-size: calc(13px * var(--s)); color: #666; }
.rl-game { width: calc(330px * var(--s)); align-items: stretch; padding: calc(8px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s)); border: calc(2.5px * var(--s)) solid #222; border-radius: calc(14px * var(--s)); background: linear-gradient(180deg, #ffbf62 0%, #ffd6a2 55%, #ffeadf 100%); }
.rl-gt { display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--s)); }
.rl-win h3.rl-gt { font-size: calc(26px * var(--s)); color: #e07000; }
.rl-gt .rl-run { width: calc(14px * var(--s)); height: calc(18px * var(--s)); }
.rl-opp { margin: 0; font-size: calc(16px * var(--s)); }
#runlobby .rl-slots { grid-template-columns: 1fr 1fr; gap: calc(6px * var(--s)) calc(12px * var(--s)); }
#runlobby .rl-slot { justify-content: center; gap: calc(5px * var(--s)); height: calc(22px * var(--s)); padding: 0 calc(6px * var(--s)); border: 0; border-radius: 0; background: linear-gradient(180deg, #a28c72, #c3ae92); box-shadow: none; color: #111; font-family: "PT Sans", Arial, sans-serif; font-size: calc(13px * var(--s)); animation: none; }
#runlobby .rl-slot.you { box-shadow: inset 0 0 0 calc(2px * var(--s)) #ffcf1a; }
#runlobby .rl-slot b { flex: none; max-width: 70%; }
/* a player in a slot: Stick Run's row, a bar in their skin's colour with the level chevron and the name */
#runlobby .rl-slot:not(.empty) { justify-content: flex-start; padding: 0 calc(8px * var(--s)) 0 calc(4px * var(--s)); background: linear-gradient(180deg, var(--a), var(--b)); color: var(--t); }
#runlobby .rl-slot:not(.empty) b { flex: 1; max-width: none; text-align: center; }
#runlobby .rl-slot .rl-rank { margin-top: calc(5px * var(--s)); }
.rl-time { margin: calc(2px * var(--s)) 0 0; text-align: center; font-size: calc(13px * var(--s)); color: #5a3a10; }
.rl-time.go { font-weight: 700; color: #c03000; }
#runlobby .rl-acts { justify-content: flex-end; gap: calc(6px * var(--s)); }
.rl-ready, .rl-leave { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--s)); width: calc(104px * var(--s)); height: calc(25px * var(--s)); border: 0; border-radius: calc(3px * var(--s)); color: #fff; font-size: calc(14px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35); }
.rl-ready { background: linear-gradient(180deg, #2fd42f 0%, #18b818 50%, #0b9a0b 100%); }
.rl-leave { background: linear-gradient(180deg, #ff2a1a 0%, #d40000 50%, #b00000 100%); }
.rl-ready:disabled { filter: grayscale(0.6); cursor: default; }
.rl-pad { width: calc(22px * var(--s)); height: calc(14px * var(--s)); }
/* (the Marketplace's header and narrow traders column hold more words) */
#market .mk-head { gap: calc(8px * var(--s)); }
#market .mk-title { font-size: calc(30px * var(--s)); }
#market .ms-tt { gap: calc(10px * var(--s)); }
#market .ms-pill { font-size: calc(13px * var(--s)); }
#market .mk-traders .mk-th { padding: 0 calc(4px * var(--s)); font-size: calc(12px * var(--s)); white-space: nowrap; }
/* words on the dark brown board */
#market .mk-empty, #market .mk-status, #market .mk-iname.big { color: #d8c8b4; }
#market .mk-empty b, #market .mk-mine-info h3 { color: #fff; }
/* an offer: Stick Run's offer_listitem, a black rounded bar with the item's dark cell, then the seller */
#market .mk-board:not(.sro) { grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--s)), 1fr)); gap: calc(6px * var(--s)); }
#market .mk-card { flex-direction: row; justify-content: flex-start; gap: calc(8px * var(--s)); padding: calc(4px * var(--s)); border: 0; border-radius: calc(8px * var(--s)); background: linear-gradient(180deg, #2c2c2c 0%, #000 100%); box-shadow: 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.5); color: #fff; font-family: "PT Sans", Arial, sans-serif; font-size: calc(13px * var(--s)); }
#market .mk-card:hover { transform: none; filter: brightness(1.35); }
#market .mk-card b { font-family: "PT Sans", Arial, sans-serif; font-weight: 700; }
#market .mk-card .mk-cell { width: calc(40px * var(--s)); height: calc(40px * var(--s)); }
#market .mk-busy { left: auto; right: calc(6px * var(--s)); top: 50%; transform: translateY(-50%) rotate(-6deg); }
/* the item cells: Stick Run's dark rounded squares, framed in the kind's colour */
#market .mk-board .mk-cell { border-radius: calc(6px * var(--s)); background: #333; box-shadow: inset 0 0 0 calc(1px * var(--s)) rgba(255, 255, 255, 0.06); }
#market .mk-board .mk-cell img { filter: none; }

/* ------------------------------------------------------------------ a race (src/online/Race.js) */
.racing .hud-bar > div:not(.hud-score), .racing #pausebtn { display: none; }   /* no coins, best or pause in races */
.race { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-ui); color: #fff; }
.race-tags { position: absolute; inset: 0; overflow: hidden; }
.race-tag { position: absolute; left: 0; top: 0; padding: calc(1px * var(--s)) calc(7px * var(--s)); border: calc(1px * var(--s)) solid #000; border-radius: 999px; background: rgba(17, 17, 17, 0.78); font-family: var(--black); font-size: calc(9.5px * var(--s)); white-space: nowrap; will-change: transform; }
/* the round's standings, under the score: a black glossy panel */
.race-board { position: absolute; left: calc(10px * var(--s)); top: calc(34px * var(--s)); min-width: calc(150px * var(--s)); padding: calc(5px * var(--s)) calc(8px * var(--s)); overflow: hidden; border-radius: calc(9px * var(--s)); }
.rb-head { position: relative; z-index: 1; margin-bottom: calc(3px * var(--s)); font-family: var(--black); font-size: calc(11px * var(--s)); letter-spacing: 0.04em; color: #ffcf1a; }
.rb-row { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(18px * var(--s)); font-family: var(--black); font-size: calc(10.5px * var(--s)); }
.rb-row i:not(.rl-bot) { flex: none; width: calc(10px * var(--s)); height: calc(10px * var(--s)); box-sizing: border-box; border-radius: 50%; border: calc(1.5px * var(--s)) solid #000; }
.rb-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.rb-row span { font-weight: 900; }
.rb-row.you b { color: #ffcf1a; }
.rb-row.gone { opacity: 0.45; }
/* "X died with a score of N": black pills */
.race-feed { position: absolute; left: calc(10px * var(--s)); bottom: calc(62px * var(--s)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--s)); background: none; border: 0; box-shadow: none; }
.race-feed p { margin: 0; padding: calc(3px * var(--s)) calc(11px * var(--s)); border-radius: 999px; font-family: var(--black); font-size: calc(10px * var(--s)); animation: rise-in 0.25s ease-out; transition: opacity 0.6s; }
.race-feed p.old { opacity: 0; }
/* after your crash: the menu's dashed pill */
.race-watch { position: absolute; left: 50%; top: calc(48px * var(--s)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(10px * var(--s)); height: calc(32px * var(--s)); padding: 0 calc(16px * var(--s)); border: calc(2.5px * var(--s)) dashed #fff; border-radius: 999px; background: #111; box-shadow: 0 0 0 calc(2px * var(--s)) #111, 0 calc(6px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, 0.3); font-family: var(--black); font-size: calc(11px * var(--s)); white-space: nowrap; animation: pop-in 0.3s; }
.race-watch b { font-weight: 900; color: #ff6b5a; }
.race-watch span { color: #d8d8d8; }
.race-watch i { font-style: normal; -webkit-text-stroke: calc(2px * var(--s)) #000; paint-order: stroke fill; }
.race-leave { position: absolute; right: calc(8px * var(--s)); top: calc(8px * var(--s)); pointer-events: auto; height: calc(28px * var(--s)); padding: 0 calc(12px * var(--s)); font-family: var(--black); font-size: calc(11px * var(--s)); cursor: pointer; transition: transform 0.12s, filter 0.12s; }
.race-leave:hover { filter: brightness(1.25); }
.race-leave.sure { background: linear-gradient(180deg, #ff6b5a 0%, #e0301f 50%, #b3170e 100%); }
/* the round results / the final results (in a white window) */
.race-panel { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(10, 20, 40, 0.4); animation: fade-in 0.2s ease-out; }
.rr-rows { display: flex; flex-direction: column; gap: calc(5px * var(--s)); }
.rr-row { display: flex; align-items: center; gap: calc(8px * var(--s)); height: calc(30px * var(--s)); padding: 0 calc(10px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(9px * var(--s)); background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 46%, #dcdcdc 54%, #cbcbcb 100%); box-shadow: 0 calc(2px * var(--s)) 0 #1b1b1b; color: #222; font-family: var(--black); font-size: calc(11.5px * var(--s)); }
.rr-row.you { box-shadow: 0 0 0 calc(2px * var(--s)) #ffcf1a, 0 calc(2px * var(--s)) 0 #1b1b1b; }
.rr-row.gone { opacity: 0.5; }
.rr-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.rr-place { flex: none; display: grid; place-items: center; width: calc(22px * var(--s)); height: calc(22px * var(--s)); box-sizing: border-box; border-radius: 50%; border: calc(2px * var(--s)) solid #111; background: var(--m); color: #1a1a1a; font-style: normal; font-family: var(--black); font-size: calc(10.5px * var(--s)); }
.rr-score { color: #555; }
.rr-total { min-width: calc(50px * var(--s)); text-align: right; color: #c97800; }
.rr-pts { min-width: calc(26px * var(--s)); text-align: center; font-size: calc(13px * var(--s)); color: #1f8e10; }
.rr-pts.pop { opacity: 0; animation: rr-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes rr-pop { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
.rr-ok { width: calc(14px * var(--s)); font-style: normal; color: #1f8e10; }
.rr-ok.off { visibility: hidden; }
.rr-coins { display: inline-flex; align-items: center; }
.rr-coins.up { color: #1f8e10; }
.rr-coins.down { color: #d4231a; }
.rr-timer { text-align: center; }
.rr-chat { display: flex; flex-direction: column; gap: calc(4px * var(--s)); }
.rr-log { height: calc(42px * var(--s)); overflow-y: auto; padding: calc(3px * var(--s)) calc(8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(8px * var(--s)); background: #fff; color: #222; font-weight: 700; font-size: calc(11.5px * var(--s)); line-height: 1.35; box-shadow: inset 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.12); user-select: text; -webkit-user-select: text; }
.rr-log p { margin: 0; overflow-wrap: anywhere; }
.rr-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8px * var(--s)); }
.rr-reward span { display: inline-flex; align-items: center; padding: calc(4px * var(--s)) calc(13px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: 999px; box-shadow: 0 calc(3px * var(--s)) 0 #111; font-family: var(--black); font-size: calc(13px * var(--s)); color: #fff; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45); animation: pop-in 0.4s 0.3s both; }
.rr-reward .xp { background: linear-gradient(180deg, #3d6fe0, #1d3c9e); }
.rr-reward .gain { background: linear-gradient(180deg, #5be043, #1f8e10); }
.rr-reward .loss { background: linear-gradient(180deg, #ff6b5a, #b3170e); }
.rr-reward .lvup { background: linear-gradient(180deg, #b07aff, #6a3ad0); }

/* ------------------------------------------------------------------ a market room (src/online/Rooms.js, RoomGames.js) */
#stage:has(#mroom:not([hidden])) #menu { visibility: hidden; }
.market.mr { display: block; background: #2fa8e4; animation: none; }
#mr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mr-top { position: absolute; left: calc(8px * var(--s)); top: calc(8px * var(--s)); z-index: 1; display: flex; align-items: center; gap: calc(8px * var(--s)); pointer-events: none; }
.mr-top > * { pointer-events: auto; }
.mr .ms-back.mr-leave { margin-left: 0; height: calc(30px * var(--s)); font-size: calc(11.5px * var(--s)); }
.mr .ms-back.mr-leave:hover { transform: translateX(calc(-3px * var(--s))); }
/* the room name stays in the DOM (Rooms.title() reads it) but is not shown beside Leave Room */
.mr .mr-title { display: none; }
/* the chat log: a dark glass box, top right (chatlog) */
.mr-log { position: absolute; right: calc(8px * var(--s)); top: calc(8px * var(--s)); z-index: 1; width: calc(168px * var(--s)); height: calc(150px * var(--s)); box-sizing: border-box; padding: calc(4px * var(--s));
  border: calc(1.5px * var(--s)) solid #3a1a06; border-radius: calc(10px * var(--s)); background: rgba(58, 26, 6, 0.55); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.14), 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.35); }
.mr-log[hidden] { display: none; }
.mr-log-lines { height: 100%; overflow-y: auto; padding: 0 calc(4px * var(--s)); font-weight: 700; font-size: calc(10.5px * var(--s)); line-height: 1.35; color: #fff; user-select: text; -webkit-user-select: text; }
.mr-log-lines p, .mr-pc-lines p { margin: 0; overflow-wrap: anywhere; }
.mr-log-lines b, .mr-pc-lines b { -webkit-text-stroke: calc(3px * var(--s)) #000; paint-order: stroke fill; }
.mr-log-lines .sys { color: #7dff6a; }
/* the bar along the bottom: chat, the chat log button, which area you're in, emotes (uibar) */
.mr-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: calc(6px * var(--s)); height: calc(34px * var(--s)); box-sizing: border-box; padding: 0 calc(6px * var(--s));
  border-top: calc(1.5px * var(--s)) solid #000; background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(-3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.3); }
.mr-say { position: relative; flex: 1; min-width: 0; display: flex; }
.mr-say input { flex: 1; min-width: 0; height: calc(24px * var(--s)); box-sizing: border-box; padding: 0 calc(34px * var(--s)) 0 calc(9px * var(--s)); border: calc(2px * var(--s)) solid #000; border-radius: calc(7px * var(--s)); outline: none;
  background: #fff; color: #111; caret-color: #2a52c2; font: 700 calc(11.5px * var(--s)) var(--font-ui); box-shadow: inset 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.15); }
.mr-say input:focus { border-color: #2a52c2; box-shadow: 0 0 0 calc(2px * var(--s)) rgba(42, 82, 194, 0.35); }
.mr-lock { position: absolute; right: calc(5px * var(--s)); top: 50%; transform: translateY(-50%); padding: 0 calc(6px * var(--s)); border-radius: 999px; background: #e0301f; color: #fff; font-family: var(--black); font-size: calc(9.5px * var(--s)); line-height: calc(15px * var(--s)); }
.mr-bb { flex: none; height: calc(24px * var(--s)); padding: 0 calc(10px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(7px * var(--s)); color: #111; font-size: calc(10px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 46%, #d9d9d9 54%, #c6c6c6 100%); box-shadow: 0 calc(2px * var(--s)) 0 #000; transition: transform 0.12s, filter 0.12s; }
.mr-bb:hover { transform: translateY(calc(-1px * var(--s))); filter: brightness(1.06); }
.mr-bb:active { transform: translateY(calc(1px * var(--s))); box-shadow: none; }
.mr-area { flex: none; padding: 0 calc(10px * var(--s)); height: calc(22px * var(--s)); line-height: calc(19px * var(--s)); box-sizing: border-box; border: calc(1.5px * var(--s)) dashed rgba(255, 255, 255, 0.7); border-radius: 999px;
  color: #9fd8ff; font-family: var(--black); font-size: calc(9.5px * var(--s)); white-space: nowrap; }
.mr-area.trading { color: #ffcf1a; border-color: #ffcf1a; }
/* the tooltip by the pointer, a player's card over their head, "Trade?" over whoever asked */
.mr-tip { position: absolute; z-index: 2; transform: translate(calc(12px * var(--s)), calc(-26px * var(--s))); padding: calc(3px * var(--s)) calc(9px * var(--s)); border-radius: 999px; background: #111; color: #fff;
  box-shadow: 0 0 0 calc(1.5px * var(--s)) #fff, 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.4); font-family: var(--black); font-size: calc(10.5px * var(--s)); white-space: nowrap; pointer-events: none; }
.mr-tip.busy { background: #e0301f; }
.mr-tip[hidden], .mr-card[hidden], .mr-offer[hidden], .mr-emotes[hidden], .mr-pchat[hidden], .mr-note[hidden] { display: none; }
.mr-askb { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(3px * var(--s)) calc(5px * var(--s)) calc(3px * var(--s)) calc(9px * var(--s));
  border: calc(2px * var(--s)) solid #111; border-radius: calc(10px * var(--s)); background: #fff; box-shadow: 0 calc(3px * var(--s)) 0 #111; }
.mr-askb::after { content: ""; position: absolute; left: 50%; bottom: calc(-8px * var(--s)); margin-left: calc(-6px * var(--s)); border: calc(6px * var(--s)) solid transparent; border-top-color: #111; border-bottom: 0; }
.mr-askb b { font-family: var(--black); font-size: calc(11px * var(--s)); }
.mr-askb button { width: calc(22px * var(--s)); height: calc(22px * var(--s)); padding: 0; border: calc(1.5px * var(--s)) solid #111; border-radius: 50%; box-shadow: 0 calc(2px * var(--s)) 0 #111; background-position: center; background-repeat: no-repeat; background-size: 62%; }
.mr-askb .ok { background-color: #2fb51c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mr-askb .no { background-color: #e0301f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* small white slabs over the bar: the offer, the emotes, the private chat, a game's panel */
.mr-offer, .mr-emotes, .mr-pchat, .mr-panel { position: absolute; z-index: 2; box-sizing: border-box; border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(12px * var(--s)); background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 55%, #e0e0e0 100%);
  box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.1), 0 calc(4px * var(--s)) 0 #1b1b1b, 0 calc(10px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.35); animation: mr-up 0.3s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes mr-up { from { transform: translateY(calc(24px * var(--s))); opacity: 0; } to { transform: none; opacity: 1; } }
.mr-offer { left: calc(8px * var(--s)); bottom: calc(44px * var(--s)); display: flex; align-items: center; gap: calc(7px * var(--s)); padding: calc(5px * var(--s)) calc(8px * var(--s)); }
.mr-off-lab { max-width: calc(92px * var(--s)); font-weight: 800; font-size: calc(10px * var(--s)); line-height: 1.15; color: #333; }
.mr-emotes { right: calc(8px * var(--s)); bottom: calc(44px * var(--s)); display: grid; grid-template-columns: repeat(2, auto); gap: calc(5px * var(--s)); padding: calc(6px * var(--s)); }
.mr-emotes button { height: calc(26px * var(--s)); padding: 0 calc(12px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(7px * var(--s)); color: #fff; font-size: calc(10.5px * var(--s));
  background: linear-gradient(180deg, #3d6fe0 0%, #2a52c2 50%, #1d3c9e 100%); box-shadow: 0 calc(2px * var(--s)) 0 #000; transition: transform 0.12s; }
.mr-emotes button:hover { transform: translateY(calc(-1px * var(--s))) scale(1.04); }
.mr-note { position: absolute; left: 50%; bottom: calc(46px * var(--s)); z-index: 3; transform: translateX(-50%); padding: calc(4px * var(--s)) calc(12px * var(--s)); border-radius: 999px; background: #111; color: #fff;
  box-shadow: 0 0 0 calc(1.5px * var(--s)) #fff, 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.4); font-family: var(--black); font-size: calc(10.5px * var(--s)); white-space: nowrap; pointer-events: none; }
.mr-note.show { animation: mr-note 0.25s; }
@keyframes mr-note { from { transform: translate(-50%, calc(14px * var(--s))); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
/* the table chat or the trade's chat: over the bar, in the middle (privatechat) */
.mr-pchat { left: 50%; bottom: calc(40px * var(--s)); width: calc(290px * var(--s)); height: calc(112px * var(--s)); margin-left: calc(-145px * var(--s)); display: flex; flex-direction: column; padding: calc(4px * var(--s)); }
.mr-pc-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(26px * var(--s)); box-sizing: border-box; padding: 0 calc(3px * var(--s)) 0 calc(9px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(8px * var(--s));
  background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); color: #fff; font-family: var(--black); font-size: calc(10.5px * var(--s)); }
.mr .mr-pc-head .aw-btn.small { min-width: 0; height: calc(20px * var(--s)); padding: 0 calc(9px * var(--s)); font-size: calc(9.5px * var(--s)); }
.mr-pc-lines { flex: 1; min-height: 0; overflow-y: auto; padding: calc(3px * var(--s)) calc(6px * var(--s)); font-weight: 700; font-size: calc(10.5px * var(--s)); line-height: 1.35; color: #222; }
.mr-pc-lines .sys { color: #1f8e10; }
/* the dark cover while walking in */
.mr-veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--s)); background: linear-gradient(180deg, #6cc8f0, #2fa8e4 60%, #1c78b0); color: #fff; }
.mr-veil[hidden] { display: none; }
.mr-veil .ms-ic { width: calc(40px * var(--s)); height: calc(40px * var(--s)); padding: calc(6px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(12px * var(--s)); background: #fff; animation: mr-bob 0.7s ease-in-out infinite alternate; }
@keyframes mr-bob { to { transform: translateY(calc(-6px * var(--s))) rotate(-6deg); } }
.mr-veil b { font-family: var(--black); font-size: calc(22px * var(--s)); }
.mr-veil small { font-weight: 800; font-size: calc(11px * var(--s)); color: #9fb4d8; }
/* windows: the bar stays usable under them (the trade's leave the room in view) */
.mr .mk-dim { bottom: calc(34px * var(--s)); z-index: 4; }
.mr .mk-dim.keepbar { background: rgba(10, 20, 40, 0.2); }
.mr .mk-dealmsg { z-index: 5; }
/* the trade: your side from the left, theirs from the right, the two of you zoomed in between */
.mr-trade { position: absolute; inset: calc(46px * var(--s)) calc(8px * var(--s)) calc(160px * var(--s)); z-index: 3; pointer-events: none; }
.mr .mr-tw { position: absolute; top: 0; width: calc(176px * var(--s)); box-sizing: border-box; pointer-events: auto; animation: mr-left 0.35s cubic-bezier(.2, 1.3, .4, 1) both; }
.mr .mr-tw.mine { left: 0; }
.mr .mr-tw.theirs { right: 0; animation-name: mr-right; }
@keyframes mr-left { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes mr-right { from { transform: translateX(110%); } to { transform: none; } }
.mr .mr-tw .aw-head { height: calc(28px * var(--s)); padding-left: calc(10px * var(--s)); }
.mr .mr-tw .aw-title { font-size: calc(12px * var(--s)); }
.mr .mr-tw .aw-body { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--s)); padding: calc(6px * var(--s)) calc(2px * var(--s)) calc(2px * var(--s)); }
.mr .mr-tw .mk-cell { width: calc(46px * var(--s)); height: calc(46px * var(--s)); }
.mr .mr-tw.locked { box-shadow: 0 0 0 calc(3px * var(--s)) #2fb51c, inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.1), 0 calc(5px * var(--s)) 0 #1b1b1b; }
.mr .mr-tw .aw-btns { margin: 0; }
.mr .mr-tw .mk-status { font-size: calc(10.5px * var(--s)); text-align: center; }
.mr .mk-coinbox { display: flex; gap: calc(5px * var(--s)); }
.mr .mk-coinbox[hidden] { display: none; }
.mr .mk-coinbox input, .mr-betline input { width: calc(70px * var(--s)); height: calc(26px * var(--s)); box-sizing: border-box; padding: 0 calc(6px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(7px * var(--s)); font: 800 calc(12px * var(--s)) var(--font-ui); }
/* the passes (VIP door) */
.mr-passrow { display: flex; align-items: center; gap: calc(8px * var(--s)); margin: calc(6px * var(--s)) 0; padding: calc(6px * var(--s)) calc(8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(10px * var(--s)); background: #fff; box-shadow: 0 calc(2px * var(--s)) 0 #1b1b1b; }
.mr-passic { flex: none; width: calc(34px * var(--s)); height: calc(34px * var(--s)); }
.mr-passic svg { width: 100%; height: 100%; display: block; }
.mr-passtx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.mr-passtx b { font-family: var(--black); font-size: calc(12px * var(--s)); }
.mr-passtx small { font-weight: 700; font-size: calc(9.5px * var(--s)); color: #555; }
.mr-have { font-style: normal; font-family: var(--black); font-size: calc(10px * var(--s)); color: #1f8e10; white-space: nowrap; }
/* a game's panel over the bar (Rare Slots, the races, the auction, the ATM) */
.mr-panel { left: 50%; bottom: calc(42px * var(--s)); width: calc(330px * var(--s)); margin-left: calc(-165px * var(--s)); padding: calc(5px * var(--s)); }
.mr-pn-head { position: relative; display: flex; align-items: center; height: calc(28px * var(--s)); box-sizing: border-box; padding: 0 calc(36px * var(--s)) 0 calc(10px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(8px * var(--s));
  background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); color: #fff; font-family: var(--black); font-size: calc(12px * var(--s)); }
.mr-pn-head .as-x.mr-pn-x { right: calc(3px * var(--s)); top: 50%; width: calc(22px * var(--s)); height: calc(22px * var(--s)); margin-top: calc(-11px * var(--s)); }
.mr-pn-body { display: flex; flex-direction: column; align-items: center; gap: calc(7px * var(--s)); padding: calc(8px * var(--s)) calc(6px * var(--s)) calc(4px * var(--s)); }
.mr-pn-body .aw-btns { margin: 0; }
.mr-pn-note { margin: 0; min-height: 1.3em; text-align: center; font-weight: 800; font-size: calc(10.5px * var(--s)); color: #333; }
.mr-pn-note b { color: #c97800; }
.mr-lanes { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5px * var(--s)); }
.mr-lane { display: flex; align-items: center; gap: calc(5px * var(--s)); height: calc(26px * var(--s)); padding: 0 calc(9px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(7px * var(--s)); background: #fff; color: #111; font-size: calc(10px * var(--s)); box-shadow: 0 calc(2px * var(--s)) 0 #000; }
.mr-lane i { width: calc(12px * var(--s)); height: calc(12px * var(--s)); box-sizing: border-box; border: calc(1.5px * var(--s)) solid #000; border-radius: 50%; background: var(--c); }
.mr-lane.on { background: #111; color: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) var(--c), 0 calc(2px * var(--s)) 0 #000; }
.mr-lane:disabled { cursor: default; opacity: 0.75; }
.mr-betline { display: flex; align-items: center; gap: calc(6px * var(--s)); font-family: var(--black); font-size: calc(11px * var(--s)); }
.mr-pays { font-weight: 800; font-family: var(--font-ui); color: #1f8e10; }
.mr-bid { display: flex; align-items: center; gap: calc(10px * var(--s)); }
.mr-bid-tx { display: flex; flex-direction: column; gap: calc(2px * var(--s)); }
.mr-bid-tx b { font-family: var(--black); font-size: calc(13px * var(--s)); }
.mr-bid-tx span { font-family: var(--black); font-size: calc(14px * var(--s)); color: #c97800; }
.mr-bid-tx small { font-weight: 800; font-size: calc(10px * var(--s)); color: #555; }
/* the auction's window in the Bidding Room's own look: its dark boards and panelling with the gold
   rail, a red velvet title like its rug, cream and gold lettering, a gold-framed lot and a gold BID */
.mr-panel.mr-pn-bid { border: calc(2.5px * var(--s)) solid #c99a1e; background: linear-gradient(180deg, #4a2414 0%, #331509 55%, #200b04 100%);
  box-shadow: inset 0 calc(1.5px * var(--s)) 0 rgba(255, 220, 150, 0.25), inset 0 0 0 calc(4px * var(--s)) rgba(0, 0, 0, 0.18), 0 calc(4px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, 0.55); }
.mr-pn-bid .mr-pn-head { border-color: #c99a1e; background: linear-gradient(180deg, #a3192a 0%, #7a0f1d 55%, #520812 100%); box-shadow: inset 0 calc(1.5px * var(--s)) 0 rgba(255, 255, 255, 0.25); color: #ffe36b; text-shadow: 0 calc(1.5px * var(--s)) 0 #2a0408; letter-spacing: 0.06em; }
.mr-pn-bid .mr-pn-head b { text-transform: uppercase; }
.mr-pn-bid .mr-bid .mk-cell { background: radial-gradient(circle at 50% 40%, #5a2a16, #2a0f06); box-shadow: 0 0 0 calc(2px * var(--s)) #6b4c0a, 0 0 calc(12px * var(--s)) rgba(255, 200, 60, 0.35); } /* (its frame stays its tier's colour) */
.mr-pn-bid .mr-bid-tx b { color: #fff4e2; text-shadow: 0 calc(1.5px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
.mr-pn-bid .mr-bid-tx span { color: #ffd23a; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.6); }
.mr-pn-bid .mr-bid-tx small, .mr-pn-bid .mr-pn-note { color: #e9cfa6; }
.mr-pn-bid .mr-pn-note b { color: #ffd23a; }
.mr-pn-bid .mr-betline input { border-color: #c99a1e; background: #1a0904; color: #ffe36b; font-family: var(--black); }
.mr-pn-bid .mr-betline .aw-btn { background: linear-gradient(180deg, #ffe36b 0%, #ffc21a 50%, #e09a0c 100%); color: #3a1a06; text-shadow: none; border-color: #6b4c0a; }
.mr-pn-bid .mr-betline .aw-btn:disabled { filter: grayscale(0.6) brightness(0.8); }
/* the ATMs (src/online/Atm.js): Velocity Bank's machine, in the bank room's green and gold. A
   gold-rimmed green body, the VELOCITY BANK header with its lamp, a dark screen lit in mint (VT323,
   as the bank screen's), and a keypad of cream keys with CLEAR, ENTER and CANCEL */
.mr-panel.mr-pn-atm { width: calc(300px * var(--s)); margin-left: calc(-150px * var(--s)); padding: calc(4px * var(--s)); }
.mr-pn-atm .mr-pn-head { background: linear-gradient(180deg, #2f8a5a, #145c37); color: #ffe36b; }
.mr-pn-atm .mr-pn-body { padding: calc(5px * var(--s)) calc(3px * var(--s)) calc(2px * var(--s)); }
.atm { width: 100%; box-sizing: border-box; padding: calc(8px * var(--s)); border: calc(3px * var(--s)) solid #c99a1e; border-radius: calc(14px * var(--s));
  background: linear-gradient(180deg, #2b8456 0%, #1d6b43 45%, #11502f 100%); box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.25), inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.25), 0 calc(3px * var(--s)) 0 #6b4c0a; }
.atm-top { display: flex; align-items: center; gap: calc(7px * var(--s)); margin-bottom: calc(7px * var(--s)); font-family: var(--black); font-size: calc(13px * var(--s)); letter-spacing: 0.08em; color: #ffe36b; text-shadow: 0 calc(1.5px * var(--s)) 0 #0b3a22; }
.atm-logo { display: grid; place-items: center; width: calc(22px * var(--s)); height: calc(22px * var(--s)); border-radius: 50%; border: calc(2px * var(--s)) solid #ffe36b; background: radial-gradient(circle at 40% 35%, #ffe36b, #c99a1e); color: #0f4a2e; font-style: normal; font-size: calc(13px * var(--s)); text-shadow: none; }
.atm-top b { flex: 1; }
.atm-lamp { width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; background: #5bff9a; box-shadow: 0 0 calc(7px * var(--s)) #5bff9a; animation: atm-lamp 1.6s ease-in-out infinite; }
@keyframes atm-lamp { 50% { opacity: 0.45; } }
.atm-bezel { padding: calc(5px * var(--s)); border-radius: calc(9px * var(--s)); background: linear-gradient(180deg, #0d2f20, #061a11); box-shadow: inset 0 0 0 calc(2px * var(--s)) #c99a1e; }
.atm-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3px * var(--s)); height: calc(146px * var(--s)); padding: calc(7px * var(--s)) calc(9px * var(--s)); box-sizing: border-box; overflow: hidden;
  border-radius: calc(6px * var(--s)); background: radial-gradient(ellipse at 50% 30%, #0f4a35 0%, #082a1e 70%, #051c14 100%); font-family: "VT323", monospace; font-size: calc(15px * var(--s)); line-height: 1.05; color: #8dffcb; text-align: center; text-shadow: 0 0 calc(5px * var(--s)) rgba(80, 255, 170, 0.55); }
.atm-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) calc(1px * var(--s)), transparent calc(1px * var(--s)), transparent calc(3px * var(--s))); }
.atm-screen p { margin: 0; }
.atm-h { font-size: calc(19px * var(--s)); color: #c8ffe4; }
.atm-small { font-size: calc(13px * var(--s)); color: #6fe0aa; }
.atm-hint { font-size: calc(11.5px * var(--s)); color: #4fb388; }
.atm-big { font-size: calc(40px * var(--s)); line-height: 1; }
.atm-screen .bad { color: #ff7a6e; text-shadow: 0 0 calc(6px * var(--s)) rgba(255, 80, 60, 0.6); }
.atm-screen .good { color: #9dff7a; }
.atm-balance { display: flex; align-items: center; gap: calc(5px * var(--s)); font-size: calc(30px * var(--s)); color: #ffe36b; text-shadow: 0 0 calc(7px * var(--s)) rgba(255, 210, 60, 0.6); }
.atm-tc { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }
.atm-amount { font-size: calc(22px * var(--s)); }
.atm-amount b { color: #ffe36b; font-weight: 400; }
.atm-pin { display: flex; gap: calc(8px * var(--s)); margin: calc(4px * var(--s)) 0; }
.atm-pin i { width: calc(22px * var(--s)); height: calc(26px * var(--s)); border: calc(2px * var(--s)) solid #4fb388; border-radius: calc(4px * var(--s)); background: rgba(0, 0, 0, 0.25); }
.atm-pin i.on { background: radial-gradient(circle, #8dffcb 0 calc(5px * var(--s)), rgba(0, 0, 0, 0.25) calc(6px * var(--s))); }
.atm-wait span { animation: atm-dot 1.2s infinite; }
.atm-wait span:nth-child(2) { animation-delay: 0.2s; } .atm-wait span:nth-child(3) { animation-delay: 0.4s; }
@keyframes atm-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.atm-opts { display: flex; flex-direction: column; gap: calc(3px * var(--s)); width: 100%; margin-top: calc(2px * var(--s)); min-height: 0; overflow-x: hidden; overflow-y: auto; }
.atm-opts.two { flex-direction: row; margin-top: calc(5px * var(--s)); }
/* the choices fill the screen from the top; the notes' screen is a little taller, for its five */
.atm-screen.s-options, .atm-screen.s-deposit { justify-content: flex-start; }
.atm-screen.s-options { height: calc(178px * var(--s)); }
.atm-screen.s-options .atm-h { font-size: calc(16px * var(--s)); }
.atm-opt { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--s)); min-height: calc(20px * var(--s)); padding: calc(1px * var(--s)) calc(8px * var(--s)); white-space: nowrap;
  border: calc(1.5px * var(--s)) solid #4fb388; border-radius: calc(5px * var(--s)); background: rgba(80, 255, 170, 0.08); font: inherit; font-size: calc(14px * var(--s)); line-height: 1; color: #c8ffe4; text-shadow: inherit; cursor: pointer; }
.atm-opts.two .atm-opt { flex: 1; min-height: calc(26px * var(--s)); font-size: calc(17px * var(--s)); }
.atm-opt:hover:not(:disabled), .atm-opt:focus-visible { outline: none; background: rgba(80, 255, 170, 0.22); border-color: #8dffcb; }
.atm-opt:disabled { opacity: 0.4; cursor: default; }
.atm-opt small { margin-left: auto; font-size: calc(11.5px * var(--s)); color: #6fe0aa; white-space: nowrap; }
.atm-notes { flex: none; display: inline-flex; align-items: center; gap: calc(2px * var(--s)); white-space: nowrap; }
.atm-note { width: calc(22px * var(--s)); height: auto; filter: drop-shadow(0 0 calc(2px * var(--s)) rgba(0, 0, 0, 0.6)); }
.atm-deck { display: flex; gap: calc(7px * var(--s)); margin-top: calc(8px * var(--s)); }
.atm-keys { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5px * var(--s)); }
.atm-side { display: flex; flex-direction: column; gap: calc(6px * var(--s)); width: calc(64px * var(--s)); }
.atm-key { height: calc(24px * var(--s)); padding: 0; border: calc(1.5px * var(--s)) solid #3a2a06; border-radius: calc(5px * var(--s)); background: linear-gradient(180deg, #fffaf0, #e8dcc2); box-shadow: 0 calc(2.5px * var(--s)) 0 #6b5a2a;
  font-family: var(--black); font-size: calc(12px * var(--s)); color: #3a2a06; cursor: pointer; transition: transform 0.06s, box-shadow 0.06s; }
.atm-key:active { transform: translateY(calc(2px * var(--s))); box-shadow: 0 calc(0.5px * var(--s)) 0 #6b5a2a; }
.atm-key.k-clear { background: linear-gradient(180deg, #ffe36b, #f0b81a); font-size: calc(9px * var(--s)); }
.atm-key.k-enter { background: linear-gradient(180deg, #7cf06a, #2ea81f); color: #fff; font-size: calc(9px * var(--s)); text-shadow: 0 1px 0 #135c0c; }
.atm-key.k-cancel { height: calc(34px * var(--s)); background: linear-gradient(180deg, #ff7a6e, #d8261a); color: #fff; font-size: calc(9.5px * var(--s)); text-shadow: 0 1px 0 #7a0c05; }
/* the Lucky Wheel's stakes (src/online/Casino.js) */
.mr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5px * var(--s)); }
.mr-chip { display: flex; align-items: center; gap: calc(3px * var(--s)); height: calc(24px * var(--s)); padding: 0 calc(9px * var(--s)) 0 calc(6px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(12px * var(--s)); background: #fff; color: #111; font: 800 calc(11px * var(--s)) var(--font-ui); box-shadow: 0 calc(2px * var(--s)) 0 #000; }
.mr-chip .mk-coin { width: calc(13px * var(--s)); height: calc(13px * var(--s)); }
.mr-chip.on { background: #111; color: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) #ffc21a, 0 calc(2px * var(--s)) 0 #000; }
/* a casino table's band (Casino.js), as Stick Run Evolution's: dark, fading up from the bar; the
   clock badge, what's happening, the balance; blackjack's moves; the chips, CLEAR, REBET, LEAVE */
.mr-hud { position: absolute; left: 0; right: 0; bottom: calc(34px * var(--s)); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--s)); padding: calc(18px * var(--s)) calc(10px * var(--s)) calc(6px * var(--s));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) calc(22px * var(--s)), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%); color: #fff; pointer-events: none; animation: mr-fade 0.25s ease-out both; }
@keyframes mr-fade { from { opacity: 0; } to { opacity: 1; } }
.mr-hud > * { pointer-events: auto; width: 100%; max-width: calc(600px * var(--s)); box-sizing: border-box; }
.mr-hud .mk-coin { width: calc(12px * var(--s)); height: calc(12px * var(--s)); margin-right: calc(3px * var(--s)); vertical-align: calc(-2px * var(--s)); }
.mr-hud-top { display: grid; grid-template-columns: calc(130px * var(--s)) 1fr calc(130px * var(--s)); align-items: center; }
.mr-clock { position: relative; display: flex; align-items: center; justify-content: center; width: calc(38px * var(--s)); height: calc(38px * var(--s)); box-sizing: border-box; border-radius: 50%; --f: 0; --cc: #ffd25a;
  border: calc(2.5px * var(--s)) solid #e0a83a; background: radial-gradient(circle at 50% 30%, #2b3342, #0b0f16 70%); box-shadow: 0 0 0 calc(1px * var(--s)) #8a5a12, inset 0 0 0 calc(1px * var(--s)) #fff4c8, 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.mr-clock::before { content: ""; position: absolute; left: 50%; top: calc(-7px * var(--s)); width: calc(7px * var(--s)); height: calc(5px * var(--s)); margin-left: calc(-3.5px * var(--s)); border-radius: calc(2px * var(--s)) calc(2px * var(--s)) 0 0; background: linear-gradient(90deg, #b07a1a, #ffe08a, #b07a1a); }
.mr-clock i { position: absolute; inset: calc(1.5px * var(--s)); border-radius: 50%; background: conic-gradient(var(--cc) calc(var(--f) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); }
.mr-clock.low { --cc: #ff4a3a; }
.mr-clock b { position: relative; font-family: var(--black); font-size: calc(12px * var(--s)); color: #ffe08a; }
.mr-hud-mid { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.mr-hud-mid b { font-family: var(--black); font-size: calc(13px * var(--s)); letter-spacing: 0.02em; text-shadow: calc(1px * var(--s)) calc(1.2px * var(--s)) 0 rgba(0, 0, 0, 0.75); }
.mr-hud-mid b.turn { color: #ffd25a; animation: mr-pulse 0.9s ease-in-out infinite alternate; }
.mr-hud-mid b.won { color: #7dff8a; }
.mr-hud-mid b.lost { color: #ffb0a8; }
@keyframes mr-pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
.mr-hud-mid small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; font-size: calc(10px * var(--s)); color: #cfe3f5; text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.75); }
.mr-hud-bal { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.mr-hud-bal small { font-family: var(--black); font-size: calc(8px * var(--s)); color: #9ee6b4; letter-spacing: 0.05em; }
.mr-hud-bal b { font-family: var(--black); font-size: calc(13px * var(--s)); color: #ffe6a0; text-shadow: calc(1px * var(--s)) calc(1.2px * var(--s)) 0 rgba(0, 0, 0, 0.75); }
.mr-hud-bal em { position: absolute; right: 0; top: 100%; font: normal calc(13px * var(--s)) var(--black); color: #ff3b30; text-shadow: 0 0 calc(3px * var(--s)) #fff; opacity: 0; }
.mr-hud-bal em.go { animation: mr-minus 1.1s ease-out both; }
@keyframes mr-minus { 0% { opacity: 1; transform: translateY(0) scale(1.35); } 15% { transform: translateY(calc(-3px * var(--s))) scale(1); } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-16px * var(--s))); } }
.mr-hud-game { display: flex; justify-content: center; gap: calc(12px * var(--s)); }
.mr-hud-game.off { visibility: hidden; }
.mr-hud-hist { display: flex; justify-content: center; gap: calc(3px * var(--s)); min-height: calc(17px * var(--s)); }
.mr-hud-hist i { display: inline-flex; align-items: center; justify-content: center; min-width: calc(17px * var(--s)); height: calc(17px * var(--s)); padding: 0 calc(2px * var(--s)); box-sizing: border-box; border: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.55); border-radius: 50%; font: normal calc(8px * var(--s)) var(--black); }
.mr-hud-hist i:first-child { box-shadow: 0 0 0 calc(1.5px * var(--s)) #ffd25a; }
.mr-hud-hist .red { background: #d62537; }
.mr-hud-hist .black { background: #1e1a22; }
.mr-hud-hist .green { background: #1f9e4e; }
.mr-hud-row { display: flex; align-items: center; gap: calc(7px * var(--s)); }
.mr-hud-chips { display: flex; gap: calc(5px * var(--s)); margin-right: calc(4px * var(--s)); }
.mr-tchip { position: relative; width: calc(25px * var(--s)); height: calc(25px * var(--s)); padding: 0; box-sizing: border-box; border: calc(2.5px * var(--s)) dashed rgba(255, 255, 255, 0.92); border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, var(--c) 0 56%, rgba(255, 255, 255, 0.8) 57% 63%, var(--c) 64%); box-shadow: 0 0 0 calc(1px * var(--s)) var(--c), 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.55);
  font: normal calc(8px * var(--s)) var(--black); color: #fff; text-shadow: 0 0 calc(2px * var(--s)) #000, 0 0 calc(2px * var(--s)) #000; transition: transform 0.1s; }
.mr-tchip:hover:not(:disabled) { transform: translateY(calc(-2px * var(--s))); }
.mr-tchip.on { transform: translateY(calc(-3px * var(--s))); box-shadow: 0 0 0 calc(1px * var(--s)) var(--c), 0 0 0 calc(3px * var(--s)) #ffe6a0, 0 0 calc(8px * var(--s)) #ffb84a, 0 calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.55); }
.mr-tchip:disabled { cursor: default; opacity: 0.45; }
.mr .mr-hud .aw-btn { min-width: calc(58px * var(--s)); height: calc(24px * var(--s)); padding: 0 calc(8px * var(--s)); border-width: calc(2px * var(--s)); border-radius: calc(12px * var(--s)); font-size: calc(11px * var(--s)); -webkit-text-stroke-width: calc(1px * var(--s)); }
.mr .mr-hud-game .aw-btn { min-width: calc(84px * var(--s)); height: calc(28px * var(--s)); font-size: calc(13px * var(--s)); }
.mr-hud-bet { flex: 1; min-width: 0; white-space: nowrap; font-family: var(--black); font-size: calc(10px * var(--s)); color: #ffe6a0; text-shadow: calc(1px * var(--s)) calc(1.2px * var(--s)) 0 rgba(0, 0, 0, 0.75); }
.mr-hud-bet b { font-size: calc(12px * var(--s)); }
.mr-hud-bet small { font-size: calc(9px * var(--s)); color: #cfe3f5; }

/* ------------------------------------------------------------------ sign up / log in (src/online/AccountUI.js) */
/* dark rounded windows with a glowing blue rim; a glossy blue title bar with the badge on a darker tab */
.acct-screen { z-index: 3; background: rgba(4, 14, 32, 0.55); backdrop-filter: blur(2px); animation: fade-in 0.2s ease-out; }
.aw {
  position: relative; width: calc(312px * var(--s)); padding: calc(4px * var(--s)); box-sizing: border-box;
  border-radius: calc(16px * var(--s)); border: calc(3px * var(--s)) solid #2b9bff;
  background: linear-gradient(180deg, #272b34, #14161b 70%);
  box-shadow: 0 0 0 calc(2.5px * var(--s)) #062a52, 0 0 calc(20px * var(--s)) rgba(30, 144, 255, 0.75), inset 0 0 calc(12px * var(--s)) rgba(30, 144, 255, 0.22), 0 calc(12px * var(--s)) calc(30px * var(--s)) rgba(0, 0, 0, 0.6);
  font-family: var(--font-ui); color: #fff; text-align: center;
  animation: card-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.aw-head {
  position: relative; display: flex; align-items: center; height: calc(42px * var(--s)); padding: 0 calc(12px * var(--s)) 0 calc(58px * var(--s));
  border-radius: calc(11px * var(--s)) calc(11px * var(--s)) calc(6px * var(--s)) calc(6px * var(--s));
  background: linear-gradient(180deg, #86ccff 0%, #3e9fff 46%, #1b79f0 54%, #0d5fd6 100%);
  box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.6), inset 0 calc(-2px * var(--s)) 0 rgba(0, 40, 110, 0.55), 0 calc(2px * var(--s)) 0 #05285a;
}
.aw-head::after { content: ""; position: absolute; left: calc(5px * var(--s)); right: calc(5px * var(--s)); top: calc(3px * var(--s)); height: 42%; border-radius: calc(9px * var(--s)) calc(9px * var(--s)) calc(8px * var(--s)) calc(8px * var(--s)); background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06)); pointer-events: none; }
.aw-badge {
  position: absolute; z-index: 1; left: calc(4px * var(--s)); top: calc(3px * var(--s)); bottom: calc(3px * var(--s)); width: calc(46px * var(--s));
  display: grid; place-items: center; border-radius: calc(9px * var(--s));
  background: linear-gradient(180deg, #1c66cf, #0a3a8f);
  box-shadow: inset 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.45), 0 0 0 calc(1.5px * var(--s)) rgba(255, 255, 255, 0.3);
}
.aw-badge svg { width: calc(32px * var(--s)); height: calc(32px * var(--s)); filter: drop-shadow(0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45)); animation: pop-in 0.4s 0.1s both; }
.aw-title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 400; font-size: calc(23px * var(--s)); letter-spacing: 0.01em; white-space: nowrap; color: #fff; -webkit-text-stroke: calc(1.8px * var(--s)) #062a5e; paint-order: stroke fill; text-shadow: 0 calc(2.5px * var(--s)) 0 #062a5e; }
.aw-title.long { font-size: calc(19px * var(--s)); }
.aw-body { display: flex; flex-direction: column; gap: calc(8px * var(--s)); padding: calc(12px * var(--s)) calc(16px * var(--s)) calc(12px * var(--s)); }
.aw-body p { margin: 0; font-weight: 700; font-size: calc(13.5px * var(--s)); line-height: 1.35; color: #fff; text-shadow: 0 calc(1.5px * var(--s)) 0 rgba(0, 0, 0, 0.7); }
.aw-name { color: #6cc4ff; }
.aw-field { display: flex; flex-direction: column; gap: calc(3px * var(--s)); text-align: left; }
.aw-field > span:first-child { padding-left: calc(2px * var(--s)); font-weight: 600; font-size: calc(11.5px * var(--s)); color: #c8ccd4; }
.aw-input { position: relative; display: block; }
.aw-input input {
  display: block; width: 100%; height: calc(32px * var(--s)); box-sizing: border-box; padding: 0 calc(32px * var(--s)) 0 calc(11px * var(--s));
  border-radius: calc(8px * var(--s)); border: calc(2.5px * var(--s)) solid #1e90ff; outline: none;
  background: linear-gradient(180deg, #08111f, #0f1b33); color: #fff; caret-color: #6cc4ff;
  font: 600 calc(14px * var(--s)) var(--font-ui); user-select: text; -webkit-user-select: text;
  box-shadow: 0 0 calc(8px * var(--s)) rgba(30, 144, 255, 0.55), inset 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, 0.55);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.aw-input input:focus { border-color: #62bbff; box-shadow: 0 0 calc(14px * var(--s)) rgba(70, 175, 255, 0.9), inset 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, 0.55); }
.aw-input[data-state="ok"] input { border-color: #3ddc4a; box-shadow: 0 0 calc(10px * var(--s)) rgba(61, 220, 74, 0.6), inset 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, 0.55); }
.aw-input[data-state="bad"] input { border-color: #ff4a4a; box-shadow: 0 0 calc(10px * var(--s)) rgba(255, 70, 70, 0.6), inset 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, 0.55); }
/* the field's mark: a tick, a cross, or a spinner while the server checks */
.aw-status { display: none; position: absolute; right: calc(9px * var(--s)); top: 50%; width: calc(17px * var(--s)); height: calc(17px * var(--s)); margin-top: calc(-8.5px * var(--s)); box-sizing: border-box; border-radius: 50%; pointer-events: none; }
[data-state="ok"] > .aw-status { display: block; background: radial-gradient(circle at 50% 30%, #6cf06a, #1f9e22); box-shadow: 0 0 calc(6px * var(--s)) rgba(61, 220, 74, 0.8); animation: pop-in 0.25s; }
/* drawn marks, so they sit dead centre in the circle */
.aw-status::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
[data-state="ok"] > .aw-status::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-state="bad"] > .aw-status { display: block; background: radial-gradient(circle at 50% 30%, #ff7a7a, #c41f1f); box-shadow: 0 0 calc(6px * var(--s)) rgba(255, 70, 70, 0.8); animation: pop-in 0.25s; }
[data-state="bad"] > .aw-status::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-state="busy"] > .aw-status { display: block; border: calc(2.5px * var(--s)) solid rgba(255, 255, 255, 0.2); border-top-color: #6cc4ff; animation: aw-spin 0.7s linear infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-err { min-height: calc(14px * var(--s)); margin: calc(-4px * var(--s)) 0 calc(-2px * var(--s)); font-weight: 600; font-size: calc(11px * var(--s)); line-height: calc(14px * var(--s)); color: #ff6d6d; text-shadow: 0 calc(1px * var(--s)) 0 #000; }
.aw-btns { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--s)); margin-top: calc(2px * var(--s)); }
/* glossy buttons: a light top half over the colour, a dark rim and a drop */
.aw-btn {
  position: relative; isolation: isolate; overflow: hidden; min-width: calc(118px * var(--s)); height: calc(36px * var(--s)); padding: 0 calc(12px * var(--s)); white-space: nowrap;
  border-radius: calc(10px * var(--s)); border: calc(2.5px * var(--s)) solid #0d4a08; cursor: pointer;
  font: 400 calc(18px * var(--s)) var(--font-display); letter-spacing: 0.03em; color: #fff;
  -webkit-text-stroke: calc(1.4px * var(--s)) rgba(0, 0, 0, 0.6); paint-order: stroke fill; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.1s, filter 0.15s, box-shadow 0.1s;
}
.aw-btn::before { content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; top: calc(2px * var(--s)); height: 46%; border-radius: calc(8px * var(--s)) calc(8px * var(--s)) calc(5px * var(--s)) calc(5px * var(--s)); background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.12)); }
.aw-btn.green { background: linear-gradient(180deg, #92f66c, #44d22e 50%, #25a616 52%, #1a8a10); border-color: #0d4a08; box-shadow: 0 calc(3px * var(--s)) 0 #0d4a08, 0 0 calc(12px * var(--s)) rgba(80, 230, 60, 0.45); }
.aw-btn.blue { background: linear-gradient(180deg, #86ccff, #3e9fff 50%, #1b79f0 52%, #0d5fd6); border-color: #06306e; box-shadow: 0 calc(3px * var(--s)) 0 #06306e, 0 0 calc(12px * var(--s)) rgba(30, 144, 255, 0.6); }
.aw-btn.dark { min-width: calc(104px * var(--s)); background: linear-gradient(180deg, #646b78, #414650 50%, #2e323a 52%, #24272e); border-color: #0b0c0f; box-shadow: 0 calc(3px * var(--s)) 0 #0b0c0f; font-size: calc(15px * var(--s)); }
.aw-btn.big { min-width: calc(136px * var(--s)); }
.aw-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(calc(-1px * var(--s))); }
.aw-btn:active:not(:disabled) { transform: translateY(calc(2px * var(--s))); box-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.8); }
.aw-btn:disabled { filter: grayscale(0.75) brightness(0.65); cursor: default; }
.aw-link { align-self: center; padding: calc(4px * var(--s)) calc(2px * var(--s)); border: 0; background: none; cursor: pointer; font: 600 calc(12.5px * var(--s)) var(--font-ui); color: #9aa1ad; transition: color 0.15s; }
.aw-link:hover { color: #fff; }
.aw-link span { display: inline-block; transition: transform 0.15s; }
.aw-have:hover span { transform: translateX(calc(4px * var(--s))); }
/* the five colours: glossy squares in a white frame */
.aw-colors { display: flex; justify-content: center; gap: calc(10px * var(--s)); margin: calc(4px * var(--s)) 0 calc(2px * var(--s)); }
.aw-color {
  position: relative; isolation: isolate; overflow: hidden; width: calc(40px * var(--s)); height: calc(40px * var(--s)); padding: 0; cursor: pointer;
  border-radius: calc(7px * var(--s)); border: calc(3px * var(--s)) solid #fff; background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 calc(1.5px * var(--s)) #000, 0 calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.12s, box-shadow 0.12s;
}
.aw-color::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15)); }
.aw-color:hover { transform: translateY(calc(-3px * var(--s))) scale(1.1); box-shadow: 0 0 0 calc(1.5px * var(--s)) #000, 0 calc(5px * var(--s)) 0 rgba(0, 0, 0, 0.5), 0 0 calc(14px * var(--s)) var(--c1); }
.aw-color:active { transform: translateY(calc(1px * var(--s))) scale(0.96); }
.aw-done { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--s)); padding: calc(8px * var(--s)) 0 calc(6px * var(--s)); }
.aw-done i { display: grid; place-items: center; width: calc(46px * var(--s)); height: calc(46px * var(--s)); border-radius: 50%; border: calc(3px * var(--s)) solid #0d4a08; background: radial-gradient(circle at 50% 30%, #8ef56a, #1f9e16); box-shadow: 0 0 calc(16px * var(--s)) rgba(80, 230, 60, 0.7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 30%, #8ef56a, #1f9e16); background-size: 70% 70%, auto; background-position: center; background-repeat: no-repeat; animation: pop-in 0.4s; }

/* ------------------------------------------------------------------ account settings (AccountUI.openSettings) */
/* a blue framed window: the big title, Log out and the red close button on the blue top, then a dark
   panel with the profile picture, nickname, and the email and password lines; light stripes on the right */
.as {
  position: relative; width: calc(404px * var(--s)); box-sizing: border-box; padding: calc(4px * var(--s));
  border-radius: calc(18px * var(--s)); border: calc(2.5px * var(--s)) solid #08203f;
  background: linear-gradient(180deg, #3aa2ff 0%, #1f80e8 14%, #1a70d8 100%);
  box-shadow: inset 0 0 0 calc(3px * var(--s)) #3ea6ff, 0 calc(12px * var(--s)) calc(30px * var(--s)) rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui); color: #fff; text-align: left;
  animation: card-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.as-head { position: relative; display: flex; align-items: flex-start; gap: calc(12px * var(--s)); padding: calc(7px * var(--s)) calc(50px * var(--s)) calc(7px * var(--s)) calc(12px * var(--s)); border-radius: calc(14px * var(--s)) calc(14px * var(--s)) 0 0; overflow: hidden; }
.as-head::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 55%; background: repeating-linear-gradient(55deg, transparent 0 calc(12px * var(--s)), rgba(255, 255, 255, 0.13) calc(12px * var(--s)) calc(21px * var(--s))); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.as-titles { position: relative; }
.as-title { display: block; font-family: var(--font-display); font-weight: 400; font-size: calc(30px * var(--s)); line-height: 1.05; white-space: nowrap; color: #fff; -webkit-text-stroke: calc(2.2px * var(--s)) #0a2a5e; paint-order: stroke fill; text-shadow: 0 calc(3px * var(--s)) 0 #0a2a5e; }
.as-sub { display: block; margin-top: calc(1px * var(--s)); font-weight: 700; font-size: calc(12.5px * var(--s)); color: #c4dcf6; text-shadow: 0 calc(1.5px * var(--s)) 0 #0a2a5e; }
/* the red glossy Log out */
.as-logout {
  position: relative; isolation: isolate; overflow: hidden; margin-top: calc(7px * var(--s)); height: calc(23px * var(--s)); padding: 0 calc(17px * var(--s));
  border-radius: calc(6px * var(--s)); border: calc(2px * var(--s)) solid #4a0606; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #ff6d5c, #ea2a1f 48%, #c8140d 52%, #a50d08);
  box-shadow: 0 calc(2px * var(--s)) 0 #4a0606;
  font: 700 calc(12.5px * var(--s)) var(--font-ui); color: #fff; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.1s, filter 0.15s;
}
.as-logout::before { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: calc(1.5px * var(--s)); height: 45%; border-radius: calc(4px * var(--s)); background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)); }
.as-logout:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(calc(-1px * var(--s))); }
.as-logout:active:not(:disabled) { transform: translateY(calc(1px * var(--s))); }
.as-logout:disabled { filter: grayscale(0.6) brightness(0.7); cursor: default; }
/* the round red close button, its X drawn so it sits dead centre */
.as-x {
  position: absolute; z-index: 1; right: calc(5px * var(--s)); top: calc(5px * var(--s)); width: calc(37px * var(--s)); height: calc(37px * var(--s)); padding: 0;
  border-radius: 50%; border: calc(2.5px * var(--s)) solid #3d0000; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 10l12 12M22 10 10 22' fill='none' stroke='%233d0000' stroke-width='7.5' stroke-linecap='round'/%3E%3Cpath d='M10 10l12 12M22 10 10 22' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(circle at 50% 28%, #ff7a68, #e8261b 55%, #b30f09);
  box-shadow: inset 0 0 0 calc(1.5px * var(--s)) rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) 0 #3d0000;
  transition: transform 0.12s, filter 0.15s;
}
.as-x:hover { filter: brightness(1.12); transform: scale(1.08) rotate(90deg); }
.as-x:active { transform: scale(0.94); }
.as-body {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: calc(7px * var(--s));
  padding: calc(12px * var(--s)) calc(14px * var(--s)) calc(15px * var(--s));
  border-radius: calc(12px * var(--s)); border: calc(2px * var(--s)) solid #0a1a30;
  background: linear-gradient(180deg, #1d2738, #141c29);
  box-shadow: inset 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.45);
}
.as-body::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 42%; background: repeating-linear-gradient(55deg, transparent 0 calc(16px * var(--s)), rgba(42, 120, 230, 0.2) calc(16px * var(--s)) calc(27px * var(--s))); -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); pointer-events: none; }
.as-who, .as-row, .as-form { position: relative; }
.as-who { display: flex; align-items: center; gap: calc(12px * var(--s)); }
.as-avatar { flex: none; display: block; width: calc(58px * var(--s)); height: calc(54px * var(--s)); box-sizing: border-box; border: calc(3px * var(--s)) solid #2b95ff; border-radius: calc(3px * var(--s)); outline: calc(2px * var(--s)) solid #0a1a30; outline-offset: calc(-5px * var(--s)); box-shadow: 0 0 calc(7px * var(--s)) rgba(43, 149, 255, 0.45); }
.as-label { display: block; font-weight: 700; font-size: calc(15px * var(--s)); color: #a9c8ec; }
.as-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: calc(26px * var(--s)); line-height: 1.1; color: #fff; text-shadow: 0 calc(2px * var(--s)) 0 #000; }
.as-big { display: block; margin-bottom: calc(3px * var(--s)); font-family: var(--font-display); font-weight: 400; font-size: calc(19px * var(--s)); color: #fff; text-shadow: 0 calc(2px * var(--s)) 0 #000; }
.as-line { display: flex; align-items: center; gap: calc(11px * var(--s)); }
.as-value {
  flex: 1; min-width: 0; height: calc(34px * var(--s)); box-sizing: border-box; display: flex; align-items: center; padding: 0 calc(12px * var(--s));
  border-radius: calc(6px * var(--s)); border: calc(2.5px * var(--s)) solid #3f84d8;
  background: linear-gradient(180deg, #111c2d, #1d2c45); box-shadow: inset 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.5);
  font-weight: 700; font-size: calc(15px * var(--s)); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 calc(1px * var(--s)) 0 #000;
}
.as-value.stars { padding-top: calc(6px * var(--s)); font-size: calc(17px * var(--s)); letter-spacing: 0.06em; }
.as-value.empty { color: #ff6b6b; }
.as-value.dim { color: #8c97a8; }
.as-change { flex: none; min-width: calc(92px * var(--s)); height: calc(33px * var(--s)); font-size: calc(17px * var(--s)); }
.as-form { display: flex; flex-direction: column; gap: calc(7px * var(--s)); }
/* "Email updated!" for a moment */
.as-note { position: absolute; z-index: 1; top: calc(12px * var(--s)); right: calc(12px * var(--s)); display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(4px * var(--s)) calc(11px * var(--s)) calc(4px * var(--s)) calc(5px * var(--s)); border-radius: 999px; border: calc(2px * var(--s)) solid #0d4a08; background: linear-gradient(180deg, #6ce85a, #23a318); box-shadow: 0 0 calc(10px * var(--s)) rgba(80, 230, 60, 0.5); font-weight: 700; font-size: calc(12px * var(--s)); color: #fff; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.45); animation: pop-in 0.3s, fade-out 0.4s 2.6s forwards; pointer-events: none; }
.as-note i { width: calc(15px * var(--s)); height: calc(15px * var(--s)); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #0d6b08; }

/* ------------------------------------------------------------------ welcome bar (AccountUI.loggedIn) */
/* "Welcome back, NAME!": a glossy light-blue bar with the runner on a blue tile, rising from the bottom */
.welcome-bar {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(16px * var(--s)); margin: 0 auto;
  width: fit-content; min-width: calc(262px * var(--s)); max-width: 92%; height: calc(46px * var(--s)); box-sizing: border-box;
  display: flex; align-items: center; gap: calc(7px * var(--s)); padding: calc(3px * var(--s)) calc(24px * var(--s)) calc(3px * var(--s)) calc(3px * var(--s));
  border-radius: calc(9px * var(--s)); border: calc(2.5px * var(--s)) solid #0b2347;
  background: linear-gradient(180deg, #d2f1ff 0%, #a9ddff 30%, #78c6ff 70%, #5ab6ff 100%);
  box-shadow: inset 0 calc(1.5px * var(--s)) 0 rgba(255, 255, 255, 0.95), inset 0 calc(-2.5px * var(--s)) 0 #3a9cff, 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.35);
  pointer-events: none; animation: wb-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
/* the shine in the top right corner */
.welcome-bar::after { content: ""; position: absolute; right: calc(4px * var(--s)); top: calc(3px * var(--s)); width: calc(14px * var(--s)); height: calc(20px * var(--s)); border-top-right-radius: calc(7px * var(--s)); border-top: calc(1.5px * var(--s)) solid rgba(255, 255, 255, 0.6); border-right: calc(1.5px * var(--s)) solid rgba(255, 255, 255, 0.4); }
.welcome-bar.out { animation: wb-out 0.35s ease-in forwards; }
@keyframes wb-in { from { transform: translateY(calc(80px * var(--s))); } to { transform: none; } }
@keyframes wb-out { to { transform: translateY(calc(80px * var(--s))); } }
.wb-icon {
  position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: calc(42px * var(--s)); height: 100%; box-sizing: border-box;
  border-radius: calc(6px * var(--s)); border: calc(2px * var(--s)) solid #0b2347;
  background: linear-gradient(180deg, #3cb4ff, #1592ff 45%, #0a7ef0);
  box-shadow: inset calc(1.5px * var(--s)) calc(1.5px * var(--s)) 0 rgba(255, 255, 255, 0.45);
}
.wb-icon::before { content: ""; position: absolute; left: calc(2px * var(--s)); top: calc(2px * var(--s)); width: 70%; height: 45%; border-radius: calc(4px * var(--s)) calc(4px * var(--s)) 60% 0; background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); }
.wb-icon svg { position: relative; width: calc(32px * var(--s)); height: calc(32px * var(--s)); }
/* the player's face (their runner from the waist up, in what they wear) in place of the running man */
.wb-face { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-icon.face .wb-face { display: block; }
.wb-icon.face svg { display: none; }
.wb-text { font: 700 calc(15px * var(--s)) Verdana, "DejaVu Sans", Tahoma, sans-serif; color: #000; white-space: nowrap; -webkit-text-stroke: calc(0.35px * var(--s)) #000; }

/* ================================================================== main menu */
/* Stick Run Evolution's lobby, in Velocity Run: the title and two white mode slabs on the left,
   a giant runner in the middle, the feature column on the right (a dashed pill,
   glossy black bars, big glossy colour bars), the blue run icon and the icon row at the bottom.
   Its type is heavy and black-outlined; its buttons are glossy, tilted and chunky. */
.menu { position: absolute; inset: 0; --black: "Arial Black", "Arial Bold", Gadget, sans-serif; background: radial-gradient(ellipse at 50% 120%, rgba(10, 20, 40, 0) 40%, rgba(10, 20, 40, 0.28) 100%); }
.menu button { font-family: var(--black); cursor: pointer; }
.menu.leaving .m-left { animation: slide-out-left 0.35s ease-in forwards; }
.menu.leaving .m-right, .menu.leaving .m-icons, .menu.leaving .m-corner { animation: slide-out-right 0.35s ease-in forwards; }
.menu.leaving .m-center { animation: fade-out 0.3s ease-in forwards; }
/* no focus ring on the menu buttons: the game hands focus back to them after a screen closes */
.menu button:focus, .menu button:focus-visible { outline: none; }

/* ---- the title and the two mode slabs (white, glossy, tilted) */
.m-left { position: absolute; left: calc(18px * var(--s)); top: calc(10px * var(--s)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(16px * var(--s)); animation: slide-in-left 0.6s cubic-bezier(.2, 1.3, .4, 1) both; }
.m-logo { width: calc(226px * var(--s)); margin: 0 0 calc(4px * var(--s)) calc(-4px * var(--s)); filter: drop-shadow(0 calc(4px * var(--s)) 0 rgba(30, 14, 4, 0.35)); animation: float 4.2s ease-in-out infinite; pointer-events: none; }
.m-slab { position: relative; display: flex; align-items: center; gap: calc(12px * var(--s)); width: calc(190px * var(--s)); height: calc(47px * var(--s)); padding: 0 calc(16px * var(--s)) 0 calc(18px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; border-radius: calc(16px * var(--s)); background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 46%, #d9d9d9 54%, #c6c6c6 100%); box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.12), 0 calc(4px * var(--s)) 0 #1b1b1b, 0 calc(10px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.35); transform: rotate(-4deg); transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1), box-shadow 0.14s; }
.m-slab:nth-of-type(2) { margin-left: calc(4px * var(--s)); }
.m-slab:hover { transform: rotate(-4deg) translateX(calc(6px * var(--s))) scale(1.04); }
.m-slab:active { transform: rotate(-4deg) translate(calc(6px * var(--s)), calc(3px * var(--s))); box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.12), 0 calc(1px * var(--s)) 0 #1b1b1b; }
.m-slab svg { height: calc(29px * var(--s)); width: auto; flex: none; fill: #111; stroke: #111; stroke-width: 3.4; stroke-linecap: round; }
.m-slab span { font-size: calc(17px * var(--s)); color: #111; letter-spacing: -0.01em; }

/* ---- the giant runner */
/* the runner stands on the backdrop's track (MenuScene.js): a 190x300 box, its feet 20 up from the
   bottom, the box clickable. Its canvas reaches past the box as far as what it wears does (main.js
   hero.fit: wings, a long mustache, a scythe held up), under the buttons around it. */
.m-center { position: absolute; z-index: 1; left: 50%; bottom: calc(38px * var(--s)); width: calc(190px * var(--s)); height: calc(300px * var(--s)); margin-left: calc(-95px * var(--s)); pointer-events: none; animation: hero-in 0.7s 0.15s cubic-bezier(.2, 1.4, .4, 1) both; }
.m-left, .m-right, .m-corner, .m-icons { z-index: 2; }
.menu { isolation: isolate; } /* (those stay inside the menu: windows open over all of it) */
.hero { position: absolute; inset: 0; }
.hero canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-name { display: none; position: absolute; left: 50%; bottom: calc(62px * var(--s)); transform: translateX(-50%); white-space: nowrap; font-family: var(--black); font-size: calc(10px * var(--s)); color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: calc(2px * var(--s)) calc(10px * var(--s)); }


/* ---- the right column */
.m-right { position: absolute; right: calc(10px * var(--s)); top: calc(46px * var(--s)); width: calc(194px * var(--s)); display: flex; flex-direction: column; align-items: stretch; gap: calc(6px * var(--s)); animation: slide-in-right 0.6s 0.1s cubic-bezier(.2, 1.3, .4, 1) both; }
/* the dashed pill ("My Pet") */
.m-pill { align-self: center; display: flex; align-items: center; gap: calc(7px * var(--s)); min-width: calc(150px * var(--s)); height: calc(36px * var(--s)); padding: 0 calc(14px * var(--s)) 0 calc(8px * var(--s)); border: calc(2.5px * var(--s)) dashed #fff; border-radius: 999px; background: #111; color: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) #111, 0 calc(6px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, 0.3); text-align: left; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1); }
.m-pill:hover { transform: scale(1.05); }
/* (the glow ring grows and fades on its own layer: no repaint each frame) */
.m-pill.ready { position: relative; }
.m-pill.ready::after { content: ""; position: absolute; inset: calc(-2px * var(--s)); border-radius: 999px; box-shadow: 0 0 0 calc(3px * var(--s)) rgba(255, 207, 26, 0.8); animation: pill-ring 1.4s ease-out infinite; pointer-events: none; will-change: transform, opacity; }
.m-pill.done { opacity: 0.8; }
.m-pill-ic { width: calc(24px * var(--s)); height: calc(24px * var(--s)); flex: none; }
.m-pill-ic svg { width: 100%; height: 100%; display: block; }
.m-pill.ready .m-pill-ic { animation: wiggle 0.9s ease-in-out infinite; }
.m-pill-txt { display: flex; flex-direction: column; line-height: 1.05; }
.m-pill-txt b { font-weight: 400; font-size: calc(11.5px * var(--s)); }
.m-pill-txt small { font-family: var(--font-ui); font-weight: 700; font-size: calc(8px * var(--s)); opacity: 0.75; }
/* glossy black bars (Challenges / Achievements / Friends) */
.m-black { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(7px * var(--s)); height: calc(30px * var(--s)); padding: 0 calc(10px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, #4a4a4a 0%, #2b2b2b 48%, #121212 52%, #1d1d1d 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.22), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.35); color: #fff; font-size: calc(13px * var(--s)); overflow: hidden; transition: transform 0.12s, filter 0.12s; }
.m-black::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, transparent 0 calc(10px * var(--s)), rgba(255, 255, 255, 0.04) calc(10px * var(--s)) calc(20px * var(--s))); pointer-events: none; }
.m-black:hover { transform: translateX(calc(-4px * var(--s))); filter: brightness(1.25); }
.m-black:active { transform: translate(calc(-4px * var(--s)), calc(2px * var(--s))); }
.m-black-ic { width: calc(17px * var(--s)); height: calc(17px * var(--s)); }
.m-black-ic svg { width: 100%; height: 100%; display: block; }
/* the player card under Multiplayer: Stick Run's playerstats_mc. A red rounded card: your runner in
   a square, the name in black and the level by a yellow chevron, Highscore in yellow, Boxjumps in
   cyan, XP and the race rounds. */
.pcard { position: relative; display: grid; grid-template-columns: calc(46px * var(--s)) 1fr auto; grid-template-rows: auto auto auto; column-gap: calc(8px * var(--s)); row-gap: 0; width: calc(236px * var(--s)); margin: calc(6px * var(--s)) 0 0 calc(10px * var(--s)); padding: calc(7px * var(--s)) calc(11px * var(--s)) calc(7px * var(--s)); border: 0; border-radius: calc(11px * var(--s)); background: var(--pimg, none) center / 100% 100% no-repeat, linear-gradient(180deg, var(--pa, #e80000) 0%, var(--pb, #a81c1c) 100%); box-shadow: 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.35); font-family: var(--black); font-weight: 400; color: #111; text-align: left; transition: transform 0.14s, filter 0.14s; }
.pc-pic { grid-row: 1 / span 2; width: calc(46px * var(--s)); height: calc(46px * var(--s)); background: linear-gradient(180deg, #b8b8b8, #8a8a8a); }
.pc-id { grid-column: 2 / -1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Arial Black", Arial, sans-serif; font-size: calc(15px * var(--s)); line-height: 1.1; color: #000; }
.pc-lv { display: flex; align-items: center; gap: calc(5px * var(--s)); font-family: "Arial Black", Arial, sans-serif; font-size: calc(12px * var(--s)); color: #3a2a2a; }
.pc-rank { width: calc(7px * var(--s)); height: calc(7px * var(--s)); margin-top: calc(4px * var(--s)); border: solid #ffe000; border-width: calc(2.5px * var(--s)) calc(2.5px * var(--s)) 0 0; transform: rotate(-45deg); }
.pc-hs { grid-column: 1 / 3; margin-top: calc(2px * var(--s)); font-family: Arial, sans-serif; font-size: calc(13.5px * var(--s)); line-height: 1.2; color: #ffee00; }
.pc-hs b, .pc-bj b { margin-left: calc(6px * var(--s)); font-family: "Arial Black", Arial, sans-serif; color: #ffd400; -webkit-text-stroke: calc(1px * var(--s)) #000; paint-order: stroke fill; }
.pc-bj { grid-column: 3; display: flex; flex-direction: column; align-items: center; font-size: calc(11.5px * var(--s)); line-height: 1; color: #35e8ff; }
.pc-bj b { margin: calc(2px * var(--s)) 0 0; font-size: calc(12.5px * var(--s)); color: #222; -webkit-text-stroke: calc(1px * var(--s)) #888; }
.pc-rows { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; row-gap: 0; font-size: calc(11.5px * var(--s)); line-height: 1.25; }
.pc-rows b { font-weight: 400; text-align: right; }
.pc-xp { font-family: Arial, sans-serif; color: #ffee00; }
.pc-rows b.pc-xpv { font-family: "Arial Black", Arial, sans-serif; color: #000; }
/* big glossy colour bars (Coins & Shop, Inventory) */
.m-big { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(6px * var(--s)); height: calc(46px * var(--s)); padding: 0 calc(8px * var(--s)); border: calc(2px * var(--s)) solid #111; border-radius: calc(9px * var(--s)); color: #fff; overflow: hidden; box-shadow: inset 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(4px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.35); transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1), filter 0.14s; }
.m-big:first-of-type { margin-top: calc(4px * var(--s)); }
.m-big::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)); pointer-events: none; }
.m-big::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: sweep 3.5s 1.5s ease-in-out infinite; pointer-events: none; }
.m-big:hover { transform: translateX(calc(-4px * var(--s))) scale(1.03); filter: brightness(1.08); }
.m-big:active { transform: translate(calc(-4px * var(--s)), calc(3px * var(--s))); }
.m-big span { position: relative; flex: 1; text-align: center; font-size: calc(13.5px * var(--s)); white-space: nowrap; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45); }
.m-big-shop { background: linear-gradient(180deg, #3d6fe0 0%, #2a52c2 50%, #1d3c9e 100%); }
.m-big-coin { position: relative; width: calc(26px * var(--s)); height: calc(26px * var(--s)); flex: none; animation: coin-spin 3s ease-in-out infinite; }
.m-big-dollar { position: relative; font-weight: 400; font-size: calc(30px * var(--s)); line-height: 1; color: #48e0ff; -webkit-text-stroke: calc(1.5px * var(--s)) #0d2a6e; paint-order: stroke fill; transform: rotate(8deg); }
.m-big-inv { background: linear-gradient(180deg, #f08a3a 0%, #d8661c 50%, #b04c10 100%); }
.m-crate { position: relative; flex: none; width: calc(28px * var(--s)); height: calc(28px * var(--s)); border-radius: calc(3px * var(--s)); background: linear-gradient(135deg, transparent 44%, #6b3d12 44% 56%, transparent 56%), linear-gradient(45deg, transparent 44%, #6b3d12 44% 56%, transparent 56%), linear-gradient(180deg, #e8a85a, #c07a30); box-shadow: inset 0 0 0 calc(3px * var(--s)) #8a5320, 0 0 0 calc(1.5px * var(--s)) #3a1e06; }

/* ---- corners */
.m-corner { position: absolute; top: calc(8px * var(--s)); right: calc(10px * var(--s)); display: flex; align-items: center; gap: calc(8px * var(--s)); animation: slide-in-right 0.6s cubic-bezier(.2, 1.3, .4, 1) both; }
.m-coins { display: flex; align-items: center; gap: calc(5px * var(--s)); height: calc(28px * var(--s)); padding: 0 calc(3px * var(--s)) 0 calc(5px * var(--s)); border: calc(1.5px * var(--s)) solid #000; border-radius: 999px; background: linear-gradient(180deg, #3a3a3a, #111); color: #fff; font-size: calc(13px * var(--s)); box-shadow: 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.3); }
.m-coins img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); animation: coin-spin 3s ease-in-out infinite; }
.m-coins .plus { display: grid; place-items: center; width: calc(20px * var(--s)); height: calc(20px * var(--s)); margin-left: calc(3px * var(--s)); border-radius: 50%; background: linear-gradient(180deg, #7be35a, #2f9e1e); color: #fff; font-size: calc(14px * var(--s)); line-height: 1; }
.m-coins.bump { animation: bump 0.35s; }
.m-coins[hidden] { display: none; }
.m-tc img { animation: none; }
.m-gear { width: calc(32px * var(--s)); height: calc(32px * var(--s)); padding: 0; border: 0; background: none; transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.m-gear svg { width: 100%; height: 100%; fill: #d8d8d8; stroke: #333; stroke-width: 1.3; filter: drop-shadow(0 calc(2px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.35)); }
.m-gear:hover { transform: rotate(60deg) scale(1.08); }
.m-icons { position: absolute; right: calc(12px * var(--s)); bottom: calc(10px * var(--s)); display: flex; gap: calc(6px * var(--s)); animation: slide-in-right 0.6s 0.2s cubic-bezier(.2, 1.3, .4, 1) both; }
.m-icons button { width: calc(34px * var(--s)); height: calc(34px * var(--s)); padding: 0; border: 0; background: none; transition: transform 0.14s cubic-bezier(.3, 1.8, .5, 1); }
.m-icons button:hover { transform: scale(1.15) rotate(-6deg); }
.m-icons svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45)); stroke-linecap: round; stroke-linejoin: round; }
.m-icons .gold { fill: #ffcf1a; stroke: #8a5a00; stroke-width: 1.2; }
.m-icons .blue { fill: #1e88e5; stroke: #0b3d73; stroke-width: 1.4; }
.m-icons path.blue[fill="none"] { stroke: #1e88e5; stroke-width: 2.6; }
.m-icons .wave { stroke: #1e88e5; stroke-width: 2.2; }
.m-icons button.off svg { opacity: 0.35; }

/* missions (a window, from the right column and the trophy) */
.missions-card { width: min(calc(330px * var(--s)), 92%); min-width: 0; }
.missions-card .missions { width: 100%; padding: 0; }
.missions-card .missions li { font-size: calc(11px * var(--s)); padding: calc(6px * var(--s)) 0; }
.missions-card .bar { height: calc(8px * var(--s)); }

/* the achievements window (src/Achievements.js, as Stick Run's): every goal in a row with its badge,
   what it's for, its progress and its coins and XP; the earned ones lit in gold */
.ach-card { width: min(calc(420px * var(--s)), 94%); min-width: 0; }
.ach-total { height: calc(7px * var(--s)); margin: 0 calc(2px * var(--s)) calc(6px * var(--s)); border-radius: 999px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.ach-total i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb340, var(--yellow)); transition: width 0.6s; }
.ach-well { max-height: calc(280px * var(--s)); overflow-y: auto; padding: calc(6px * var(--s)); }
.ach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(5px * var(--s)); }
.ach-list li { display: flex; align-items: center; gap: calc(8px * var(--s)); padding: calc(5px * var(--s)) calc(8px * var(--s)); border-radius: calc(8px * var(--s)); background: rgba(255, 255, 255, 0.05); border: calc(1.5px * var(--s)) solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.ach-list li.got { background: linear-gradient(90deg, rgba(255, 194, 26, 0.22), rgba(255, 194, 26, 0.06)); border-color: rgba(255, 210, 60, 0.55); color: #fff; }
.ach-ic { flex: none; display: grid; place-items: center; width: calc(34px * var(--s)); height: calc(34px * var(--s)); border-radius: 50%; border: calc(2px * var(--s)) solid #555; background: radial-gradient(circle at 40% 35%, #555, #2a2a2a); color: #8a8a8a; }
.ach-ic.got { border-color: #ffe36b; background: radial-gradient(circle at 40% 35%, #ffe36b, #e09a0c); color: #5c2a0c; box-shadow: 0 0 calc(8px * var(--s)) rgba(255, 200, 40, 0.55); }
.ach-ic svg { width: 62%; height: 62%; }
.ach-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1px * var(--s)); text-align: left; }
.ach-tx b { font-family: var(--font-display); font-weight: 400; font-size: calc(12.5px * var(--s)); letter-spacing: 0.02em; }
.ach-tx small { font-size: calc(9.5px * var(--s)); font-weight: 600; opacity: 0.85; }
.ach-tx .bar { height: calc(5px * var(--s)); margin-top: calc(3px * var(--s)); background: rgba(0, 0, 0, 0.45); }
.ach-list li.got .bar i { background: linear-gradient(90deg, #7cf06a, #2ea81f); }
.ach-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(1px * var(--s)); font-weight: 700; font-size: calc(9.5px * var(--s)); }
.ach-pct { font-family: var(--font-display); font-size: calc(13px * var(--s)); color: #fff; }
.ach-list li.got .ach-pct { color: #7cf06a; }
.ach-gift { display: inline-flex; align-items: center; gap: calc(2px * var(--s)); color: var(--yellow); }
.ach-gift img { width: calc(10px * var(--s)); height: calc(10px * var(--s)); }
.ach-xp { color: #7fd0ff; }
/* a new one, sliding down from the top for a few seconds */
.ach-pop { position: absolute; z-index: 8; top: calc(10px * var(--s)); left: 50%; display: flex; align-items: center; gap: calc(9px * var(--s)); min-width: calc(220px * var(--s)); padding: calc(7px * var(--s)) calc(16px * var(--s)) calc(7px * var(--s)) calc(8px * var(--s));
  border: calc(2.5px * var(--s)) solid #ffe36b; border-radius: 999px; background: linear-gradient(180deg, #2a2a2a, #111); color: #fff; box-shadow: 0 calc(6px * var(--s)) calc(16px * var(--s)) rgba(0, 0, 0, 0.45), 0 0 calc(12px * var(--s)) rgba(255, 200, 40, 0.35);
  transform: translate(-50%, calc(-90px * var(--s))); transition: transform 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; }
.ach-pop.show { transform: translate(-50%, 0); }
.ach-pop .ach-tx small { color: #ffe36b; font-size: calc(9px * var(--s)); text-transform: uppercase; letter-spacing: 0.08em; opacity: 1; }
.ach-pop .ach-tx b { font-size: calc(15px * var(--s)); }
.ach-pop .ach-tx em { font-style: normal; font-weight: 700; font-size: calc(10px * var(--s)); color: #ffd23a; display: inline-flex; align-items: center; gap: calc(3px * var(--s)); }
.ach-pop .ach-tx em img { width: calc(11px * var(--s)); height: calc(11px * var(--s)); }

@keyframes hero-in { from { transform: translateY(calc(60px * var(--s))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pill-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.1, 1.45); opacity: 0; } }
/* the buttons' shine moves by transform (moving it by `left` re-laid-out the page every frame):
   from 40% left of the button to 130% across = 170% of the button = 567% of the 30%-wide shine */
@keyframes sweep { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(567%); } }

/* ------------------------------------------------------------------ scrollbars (the shop and items lists) */
/* No browser scrollbar: a slim rounded track and a glossy handle, without arrow buttons,
   coloured for each window (--sb-track, --sb-thumb, --sb-edge). */
.grid { --sb-track: rgba(0, 0, 0, 0.12); --sb-thumb: #5a5a5a; --sb-edge: #2e2e2e; padding-right: calc(6px * var(--s)); }
:is(#shop, #prem-shop) .grid { --sb-track: rgba(110, 60, 0, 0.35); --sb-thumb: #4a2a10; --sb-edge: #2a1406; }
.grid::-webkit-scrollbar { width: calc(9px * var(--s)); }
.grid::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.grid::-webkit-scrollbar-track { margin: calc(4px * var(--s)) 0; border-radius: 999px; background: var(--sb-track); }
.grid::-webkit-scrollbar-thumb { border-radius: 999px; border: calc(1.5px * var(--s)) solid var(--sb-edge); background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%), var(--sb-thumb); }
.grid::-webkit-scrollbar-thumb:hover { background-color: #6e6e6e; }
.grid::-webkit-scrollbar-thumb:active { background-color: #ff9800; }
.grid::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .grid { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
}

/* ------------------------------------------------------------------ inventory (Stick Run's items_mc) */
/* Stick Run's inventory, laid out the same and the stage's size: "Items" and the red X; Skins
   (current + select skin) beside Backgrounds; the Outfit rows beside your runner; PowerUps. Its
   cells are Stick Run's (dark rounded squares, the red X for nothing, a triangle for next; they
   grow and tilt under the pointer). Background and type are Velocity Run's: the sky, Lilita One
   and Fredoka. */
.inv-screen { z-index: 2; animation: fade-in 0.2s ease-out; }
.invcard { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(3px * var(--s)); padding: calc(10px * var(--s)) calc(22px * var(--s)) calc(12px * var(--s)); overflow-y: auto; font-family: var(--font-ui); color: var(--cream); text-align: left; background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.06) 0 calc(18px * var(--s)), transparent calc(18px * var(--s)) calc(36px * var(--s))), linear-gradient(180deg, #17618e 0%, #2a8fc4 45%, #6cc8f0 100%); }
.iv-head { display: flex; align-items: center; justify-content: space-between; }
.iv-head b { font-family: var(--font-display); font-weight: 400; font-size: calc(30px * var(--s)); line-height: 1; color: var(--cream); -webkit-text-stroke: calc(2px * var(--s)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(3px * var(--s)) 0 rgba(30, 14, 4, 0.35); }
.iv-x { width: calc(28px * var(--s)); height: calc(28px * var(--s)); padding: 0; border: calc(2.5px * var(--s)) solid #fff; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a5a, #c80000); box-shadow: 0 0 0 calc(1.5px * var(--s)) #7a0000, 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.35); color: #fff; font-weight: 700; font-size: calc(12px * var(--s)); cursor: pointer; transition: transform 0.2s; }
.iv-x:hover { transform: scale(1.1) rotate(90deg); }
.iv-x:focus-visible, .iv-cell:focus-visible, .iv-next:focus-visible { outline: calc(2.5px * var(--s)) solid var(--yellow); outline-offset: calc(2px * var(--s)); }
/* a section: its name over a line, as Stick Run's */
.iv-sec { margin-top: calc(4px * var(--s)); padding-bottom: calc(2px * var(--s)); border-bottom: calc(2px * var(--s)) solid rgba(255, 244, 226, 0.65); font-family: var(--font-display); font-size: calc(15px * var(--s)); color: var(--cream); -webkit-text-stroke: calc(1.2px * var(--s)) var(--ink); paint-order: stroke fill; }
.iv-cur small, .iv-sel small, .iv-rows label { display: block; font-weight: 700; font-size: calc(9.5px * var(--s)); color: var(--cream); text-shadow: 0 calc(1px * var(--s)) 0 var(--ink), 0 0 calc(2px * var(--s)) var(--ink); }
.iv-top { display: flex; gap: calc(24px * var(--s)); align-items: flex-start; }
.iv-skins { flex: 1; min-width: 0; }
.iv-bgs { flex: none; width: calc(170px * var(--s)); }
.iv-pair { display: flex; gap: calc(14px * var(--s)); margin-top: calc(4px * var(--s)); }
.iv-cur { flex: none; display: flex; flex-direction: column; align-items: center; }
.iv-cur small { align-self: flex-start; }
/* the current skin: a big glossy square of its colour */
.iv-curskin { width: calc(50px * var(--s)); height: calc(50px * var(--s)); margin-top: calc(3px * var(--s)); border: calc(2px * var(--s)) solid #222; border-radius: calc(8px * var(--s)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--fill), var(--back)); box-shadow: 0 calc(4px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.3); }
/* the current background: a wide tile of its sky */
.iv-curbg { display: grid; place-items: center; height: calc(38px * var(--s)); margin: calc(5px * var(--s)) 0 calc(4px * var(--s)); border: calc(2px * var(--s)) solid #222; border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, var(--top), var(--bottom)); font-family: var(--font-display); font-size: calc(13px * var(--s)); color: #fff; -webkit-text-stroke: calc(1px * var(--s)) var(--ink); paint-order: stroke fill; box-shadow: 0 calc(4px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.3); }
/* the rows of cells (Stick Run's widths: 8 skins a line, 16 hats a line) */
.iv-cells { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3px * var(--s)); margin-top: calc(2px * var(--s)); }
#inv-skins { max-width: calc(8 * 33px * var(--s)); }
#inv-head { max-width: calc(16 * 33px * var(--s)); }
.iv-cell { position: relative; display: grid; place-items: center; flex: none; width: calc(30px * var(--s)); height: calc(30px * var(--s)); padding: calc(3px * var(--s)); background: rgba(0, 0, 0, 0.5); border: calc(1.5px * var(--s)) solid #434343; border-radius: calc(6px * var(--s)); cursor: pointer; transition: transform 0.5s cubic-bezier(.2, 1, .3, 1); }
/* sk_over / sk_out / sk_down: grow and tilt (0.2 s), settle (0.5 s), squish (0.08 s) */
.iv-cell:hover { z-index: 1; transform: scale(1.21) rotate(10deg); transition-duration: 0.2s; }
.iv-cell:active { transform: scale(0.6); transition-duration: 0.08s; }
.iv-cell img { width: 100%; height: 100%; object-fit: contain; }
.iv-cell:has(img) { grid-template: minmax(0, 1fr) / minmax(0, 1fr); } /* tall pictures (a rocket pack) fit the cell too */
.iv-cell .x-mark { font-weight: 700; font-size: calc(20px * var(--s)); line-height: 1; color: #f00; }
.iv-cell.worn { border-color: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) #2ea81f, 0 0 calc(10px * var(--s)) #5bff40; }
.iv-cell.swatch { background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--fill), var(--back)); border-color: #222; }
.iv-cell.sky { width: calc(44px * var(--s)); background: linear-gradient(180deg, var(--top), var(--bottom)); border-color: #222; }
.iv-power { cursor: default; background: rgba(0, 0, 0, 0.45); }
.iv-power:hover, .iv-power:active { transform: none; }
.iv-power svg { width: 100%; height: 100%; display: block; }
/* next: Stick Run's triangle */
.iv-next { flex: none; width: calc(16px * var(--s)); height: calc(26px * var(--s)); margin-left: calc(4px * var(--s)); padding: 0; border: 0; background: linear-gradient(180deg, #ffe066, var(--yellow-2)); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 calc(1px * var(--s)) 0 var(--ink)); cursor: pointer; transition: transform 0.12s; }
.iv-next:hover { transform: translateX(calc(3px * var(--s))) scale(1.1); }
/* the outfit: your runner on the left, the rows on the right */
.iv-outfit { display: flex; gap: calc(14px * var(--s)); align-items: flex-start; margin-top: calc(2px * var(--s)); }
.iv-fig { width: calc(110px * var(--s)); }
.iv-fig canvas { width: calc(110px * var(--s)); height: calc(139px * var(--s)); filter: drop-shadow(0 calc(4px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.3)); }
.iv-fig b { font-family: var(--font-display); font-weight: 400; font-size: calc(11px * var(--s)); color: var(--cream); background: rgba(30, 14, 4, 0.6); border-radius: 999px; padding: calc(1px * var(--s)) calc(10px * var(--s)); }
.iv-rows { flex: 1; min-width: 0; }
.iv-rows label { margin-top: calc(4px * var(--s)); }
.iv-rows label:first-child { margin-top: 0; }
/* six outfit rows: each label beside its row, not over it, so the PowerUps still fit below */
.iv-rows { display: grid; grid-template-columns: auto 1fr; column-gap: calc(8px * var(--s)); row-gap: calc(4px * var(--s)); align-items: center; }
.iv-rows label, .iv-rows label:first-child { margin-top: 0; text-align: right; }
.iv-rows .iv-cells { margin-top: 0; }
.iv-powers { min-height: calc(30px * var(--s)); }
/* the item picker (Marketplace.pickWindow: Make Offer, a trade's free slot, the market rooms' Show an
   item): Stick Run's Items window. A light glossy window with "Items" and the red X, the category
   boxes beside the title, and a grey board of dark cells framed in their kind's colour; the one under
   the pointer glows. */
.sri { position: relative; width: calc(450px * var(--s)); padding: calc(10px * var(--s)) calc(16px * var(--s)) calc(14px * var(--s)); box-sizing: border-box; border: calc(3px * var(--s)) solid #1b1b1b; border-radius: calc(22px * var(--s)); background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 50%, #d9d9d9 100%); box-shadow: inset 0 calc(-3px * var(--s)) 0 rgba(0, 0, 0, 0.08), 0 calc(5px * var(--s)) 0 #1b1b1b, 0 calc(14px * var(--s)) calc(26px * var(--s)) rgba(0, 0, 0, 0.4); font-family: "PT Sans", var(--font-ui); color: #2b2b2b; text-align: left; animation: sri-in 0.25s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes sri-in { from { transform: scale(0.85); opacity: 0; } }
.sri-head { display: flex; align-items: flex-end; gap: calc(12px * var(--s)); padding-right: calc(36px * var(--s)); }
.sri-title { margin-right: auto; font-size: calc(23px * var(--s)); font-weight: 400; line-height: 1; color: #2b2b2b; }
.sri-cats { display: flex; gap: calc(9px * var(--s)); }
.sri-cat { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.sri-cat span { font-size: calc(10.5px * var(--s)); line-height: 1; color: #9a9a9a; }
.sri-cat i { display: grid; place-items: center; width: calc(20px * var(--s)); height: calc(20px * var(--s)); box-sizing: border-box; border: calc(2.5px * var(--s)) solid var(--c); border-radius: calc(4px * var(--s)); background: #5c5c5c; transition: transform 0.12s; }
.sri-cat:hover i { transform: scale(1.12); }
.sri-cat[aria-pressed="true"] i { background: var(--c); }
.sri-cat[aria-pressed="true"] i::after { content: "×"; font-style: normal; font-weight: 700; font-size: calc(14px * var(--s)); line-height: 1; color: #1b1b1b; }
.sri-x { position: absolute; top: calc(8px * var(--s)); right: calc(10px * var(--s)); width: calc(27px * var(--s)); height: calc(27px * var(--s)); padding: 0; border: calc(2.5px * var(--s)) solid #1b1b1b; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff4d4d, #c40000); box-shadow: inset 0 0 0 calc(1.5px * var(--s)) rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.35); color: #fff; font-family: Arial, sans-serif; font-weight: 900; font-size: calc(13px * var(--s)); cursor: pointer; transition: transform 0.2s; }
.sri-x:hover { transform: scale(1.1); }
.sri-board { display: grid; grid-template-columns: repeat(10, calc(32px * var(--s))); justify-content: center; align-content: start; gap: calc(7px * var(--s)); height: calc(232px * var(--s)); box-sizing: border-box; margin-top: calc(8px * var(--s)); padding: calc(13px * var(--s)) calc(10px * var(--s)); overflow-y: auto; border-radius: calc(14px * var(--s)); background: #8a8a8a; box-shadow: inset 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, 0.25); }
.sri-cell { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: calc(32px * var(--s)); height: calc(32px * var(--s)); padding: calc(2.5px * var(--s)); box-sizing: border-box; border: calc(2px * var(--s)) solid var(--c); border-radius: calc(4px * var(--s)); background: #545454; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.sri-cell img { width: 100%; height: 100%; object-fit: contain; }
.sri-cell:hover:not(:disabled), .sri-cell:focus-visible { z-index: 1; outline: none; box-shadow: 0 0 calc(10px * var(--s)) calc(3px * var(--s)) #35f0ff; transform: scale(1.06); }
.sri-cell:disabled { opacity: 0.3; cursor: default; }
.sri-cell[hidden] { display: none; }
.sri-none { grid-column: 1 / -1; margin: auto; text-align: center; font-weight: 700; color: #f2f2f2; }
.invcard::-webkit-scrollbar { width: calc(9px * var(--s)); }
.invcard::-webkit-scrollbar-button { display: none; }
.invcard::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); }
.invcard::-webkit-scrollbar-thumb { border-radius: 999px; border: calc(1.5px * var(--s)) solid var(--ink); background: var(--cream-2); }
/* ================================================================== in-run screens (Stick Run's) */
/* Stick Run's type: labels in bold Arial, numbers and titles in Arial Black, white with a black
   outline and a hard shadow; buttons glossy. Readable on every sky (day, sunset, night). */
:root { --heavy: "Arial Black", "Arial Bold", Gadget, sans-serif; }
.outlined, .hud-bar strong, .fail-stats b, .fail-title span, .countdown, .milestone, .hud-flash { font-family: var(--heavy); font-weight: 900; color: #fff; -webkit-text-stroke: calc(1.2px * var(--s)) #111; paint-order: stroke fill; }

/* ---- the score bar (Stick Run's "Score: 742   XP: 30") */
.hud-bar { position: absolute; left: calc(14px * var(--s)); top: calc(8px * var(--s)); display: flex; align-items: baseline; gap: calc(18px * var(--s)); font: 700 calc(14px * var(--s))/1 Arial, Helvetica, sans-serif; color: #111; text-shadow: 0 0 calc(3px * var(--s)) rgba(255, 255, 255, 0.85), 0 0 calc(1px * var(--s)) #fff; }
.hud-bar > div { display: flex; align-items: baseline; gap: calc(6px * var(--s)); white-space: nowrap; }
.hud-bar strong { font-size: calc(19px * var(--s)); font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(3px * var(--s)) #000, calc(1.5px * var(--s)) calc(1.5px * var(--s)) 0 #111; }
.hud-bar .hud-score strong { font-size: calc(26px * var(--s)); }
.hud-bar small { font-family: var(--heavy); font-size: calc(12px * var(--s)); color: #fff; -webkit-text-stroke: calc(0.8px * var(--s)) #111; paint-order: stroke fill; margin-left: calc(-3px * var(--s)); text-shadow: none; }
.hud-bar strong.gold { color: #ffd23f; }
.hud-bar strong.green { color: #00ef14; }
.hud-bar .hud-score { animation: none; }
.hud-bar .hud-score.bump strong { display: inline-block; animation: bump 0.25s; }
.hud-bar #boosts { display: flex; align-self: center; }
/* pause: a glossy dark round button */
#pausebtn { display: flex; align-items: center; justify-content: center; gap: calc(3px * var(--s)); width: calc(30px * var(--s)); height: calc(30px * var(--s)); padding: 0; border: calc(1.5px * var(--s)) solid #000; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #5a5a5a, #1a1a1a 70%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.3), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.4); }
#pausebtn i { width: calc(4px * var(--s)); height: calc(12px * var(--s)); border-radius: calc(1px * var(--s)); background: #fff; }
#pausebtn:hover { filter: brightness(1.3); }
/* power-ups: dark glossy tiles, the key in a chip, the count in a red badge */
.slot { border: calc(1.5px * var(--s)) solid #8a8a8a; border-radius: calc(8px * var(--s)); background: linear-gradient(180deg, #4a4a4a, #222); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.2), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.45); }
.slot b { background: radial-gradient(circle at 40% 35%, #ff5a5a, #c80000); border: calc(1.5px * var(--s)) solid #fff; font-family: var(--heavy); }
.slot i { background: #000; color: #fff; font-family: var(--heavy); font-weight: 400; border: calc(1px * var(--s)) solid #555; }
.slot.empty { opacity: 0.4; filter: grayscale(1); }
/* an owned power-up is never used up: after a use its slot greys out and refills over the cooldown (POWER_COOL in Game.js) */
.slot.cool { cursor: default; }
.slot.cool > svg, .slot.cool > img { filter: grayscale(1) brightness(0.6); }
.slot.cool::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.55); transform-origin: top; animation: slot-cool 8s linear forwards; pointer-events: none; }
@keyframes slot-cool { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* ---- the countdown, milestones, power-up flashes */
.countdown { font-size: calc(110px * var(--s)); -webkit-text-stroke: calc(5px * var(--s)) #111; text-shadow: calc(4px * var(--s)) calc(5px * var(--s)) 0 #111; }
.countdown.go { color: #00ef14; }
.milestone { top: 17%; font-size: calc(28px * var(--s)); color: #ffd23f; -webkit-text-stroke: calc(1.4px * var(--s)) #111; text-shadow: 0 0 calc(4px * var(--s)) #000, 0 calc(2px * var(--s)) 0 #111; }
.milestone small { font-family: Arial, Helvetica, sans-serif; font-weight: 700; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) #000; }
.hud-flash { color: #ffd23f; -webkit-text-stroke: calc(1.6px * var(--s)) #111; text-shadow: 0 0 calc(4px * var(--s)) #000, 0 calc(3px * var(--s)) 0 #111; }

/* ---- glossy buttons (Stick Run's Play Again) */
.g-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(8px * var(--s)); }
.g-btn { position: relative; display: inline-flex; align-items: center; gap: calc(6px * var(--s)); height: calc(34px * var(--s)); padding: 0 calc(18px * var(--s)); font-family: var(--heavy); font-weight: 900; font-size: calc(13px * var(--s)); color: #fff; text-shadow: 0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.55); border: calc(1.5px * var(--s)) solid #000; border-radius: calc(6px * var(--s)); background: linear-gradient(180deg, #6a6a6a 0%, #474747 50%, #2f2f2f 100%); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35), 0 calc(4px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.45); overflow: hidden; cursor: pointer; transition: transform 0.12s cubic-bezier(.3, 1.8, .5, 1), filter 0.12s; }
.g-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06)); pointer-events: none; }
.g-btn:hover { transform: translateY(calc(-2px * var(--s))) scale(1.04); filter: brightness(1.1); }
.g-btn:active { transform: translateY(calc(1px * var(--s))); }
.g-btn:focus-visible { outline: calc(2.5px * var(--s)) solid #fff; outline-offset: calc(3px * var(--s)); }
.g-btn svg { width: calc(16px * var(--s)); height: calc(18px * var(--s)); fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 calc(1px * var(--s)) 0 rgba(0, 0, 0, 0.5)); }
.g-btn.green { height: calc(40px * var(--s)); padding: 0 calc(24px * var(--s)); font-size: calc(16px * var(--s)); background: linear-gradient(180deg, #5be043 0%, #2ea81f 50%, #228a16 100%); border-color: #0d4a07; }
.g-btn.pink { background: linear-gradient(180deg, #ff7d93 0%, #ff4d6a 50%, #d92a4a 100%); border-color: #6a0018; animation: play-pulse 1.4s ease-in-out infinite; }
.g-btn.pink small { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(9px * var(--s)); color: #6a0018; background: #fff; border-radius: 999px; padding: 0 calc(5px * var(--s)); text-shadow: none; }
.g-btn.blue { background: linear-gradient(180deg, #4fb3ff 0%, #2a86e0 50%, #1f6cc0 100%); border-color: #0d3c73; }
.g-btn .rv-ic { width: calc(18px * var(--s)); height: calc(18px * var(--s)); }

/* ---- results and pause: big outlined titles over the frozen run */
.fail-screen, .pause-screen { gap: calc(8px * var(--s)); background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.1) 100%); animation: fade-in 0.25s ease-out; }
.fail-title { display: flex; gap: calc(16px * var(--s)); }
.fail-title span { font-size: calc(58px * var(--s)); line-height: 1; color: #ff2a1a; -webkit-text-stroke: calc(3px * var(--s)) #111; text-shadow: calc(4px * var(--s)) calc(5px * var(--s)) 0 #111; animation: fail-pop 0.55s cubic-bezier(.2, 1.6, .4, 1) both; }
.fail-title span:nth-child(2) { animation-delay: 0.18s; }
.fail-title.paused span { color: #fff; font-size: calc(54px * var(--s)); }
.new-best { font-family: var(--heavy); font-size: calc(14px * var(--s)); color: #3a2400; background: linear-gradient(180deg, #fff6a8, #ffd21a 50%, #e8a800); border: calc(1.5px * var(--s)) solid #8a5a00; border-radius: calc(4px * var(--s)); padding: calc(1px * var(--s)) calc(12px * var(--s)); box-shadow: 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.4); animation: wiggle 0.8s ease-in-out infinite; }
.fail-stats { display: grid; grid-template-columns: auto auto; gap: calc(3px * var(--s)) calc(28px * var(--s)); align-items: baseline; font: 700 calc(15px * var(--s))/1.1 Arial, Helvetica, sans-serif; color: #fff; text-shadow: 0 0 calc(3px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; animation: rise-in 0.4s 0.3s both; }
.fail-stats > span { text-align: left; }
.fail-stats b { text-align: right; font-size: calc(19px * var(--s)); text-shadow: 0 0 calc(3px * var(--s)) #000, calc(1.5px * var(--s)) calc(1.5px * var(--s)) 0 #111; }
.fail-stats b span { font: inherit; }
.fail-stats b.gold { color: #ffd23f; }
.fail-stats b.green { color: #00ef14; }
.fail-screen .earned { gap: calc(4px * var(--s)); color: #fff; }
.fail-screen .earned .gain { font-family: var(--heavy); font-size: calc(17px * var(--s)); color: #ffd23f; -webkit-text-stroke: calc(1px * var(--s)) #111; paint-order: stroke fill; text-shadow: 0 0 calc(3px * var(--s)) #000; }
.fail-screen .earned .done { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(10.5px * var(--s)); color: #fff; background: linear-gradient(180deg, #43c22f, #227f14); border: calc(1px * var(--s)) solid #0b3d06; border-radius: calc(4px * var(--s)); padding: calc(2px * var(--s)) calc(10px * var(--s)); }
.fail-screen .earned .xp { font-family: var(--heavy); font-size: calc(11px * var(--s)); color: #00ef14; text-shadow: 0 0 calc(3px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; }
.fail-screen .earned .lvup { font-family: var(--heavy); font-size: calc(13px * var(--s)); color: #fff; background: linear-gradient(180deg, #a77bff, #6e43d1); border: calc(1.5px * var(--s)) solid #2a0f6a; border-radius: calc(5px * var(--s)); }
.fail-screen .g-row, .pause-screen .g-row { margin-top: calc(6px * var(--s)); animation: rise-in 0.4s 0.4s both; }
.fail-screen .hint, .pause-screen .hint { color: #fff; opacity: 0.85; font-family: Arial, Helvetica, sans-serif; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) #000; }

/* ---- missions (a dark window like Settings) */
.missions-card { width: min(calc(380px * var(--s)), 94%); }
.missions-card .missions { width: 100%; margin: 0; padding: 0; }
.missions-card .missions li { padding: calc(7px * var(--s)) 0; border-bottom: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.08); font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(11px * var(--s)); color: #fff; }
.missions-card .m-reward { font-family: var(--heavy); color: #ffd23f; }
.missions-card .bar { height: calc(9px * var(--s)); margin-top: calc(5px * var(--s)); background: rgba(0, 0, 0, 0.55); border: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.12); }
.missions-card .bar i { background: linear-gradient(180deg, #5be043, #228a16); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.35); }

/* ---- toasts and the loading screen */
.toast { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(12px * var(--s)); color: #fff; background: linear-gradient(180deg, #3a3a3a, #111); border: calc(1px * var(--s)) solid #000; border-radius: calc(6px * var(--s)); box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.2), 0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, 0.4); padding: calc(6px * var(--s)) calc(16px * var(--s)); }
.loading { background: radial-gradient(ellipse at 50% 40%, #3a78b8 0%, #1c3e66 60%, #0c1a2e 100%); }
.load-text { font-family: var(--heavy); font-size: calc(15px * var(--s)); color: #fff; -webkit-text-stroke: calc(1px * var(--s)) #000; text-shadow: 0 calc(2px * var(--s)) 0 #000; }
.load-text::after { content: ""; display: block; width: calc(160px * var(--s)); height: calc(8px * var(--s)); margin: calc(10px * var(--s)) auto 0; border: calc(1.5px * var(--s)) solid #000; border-radius: 999px; background: linear-gradient(90deg, #5be043 0 40%, rgba(0, 0, 0, 0.5) 40%); background-size: 250% 100%; animation: load-bar 1.2s linear infinite; }

/* ---- touch controls: dark glossy keys */
#touch button { border: calc(1.5px * var(--s)) solid #000; border-radius: calc(10px * var(--s)); background: linear-gradient(180deg, rgba(90, 90, 90, 0.85), rgba(25, 25, 25, 0.85)); color: #fff; box-shadow: inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.25), 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.4); }
#touch button.on { background: linear-gradient(180deg, #5be043, #228a16); }

@keyframes fail-pop { 0% { transform: scale(2.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(0.92) rotate(1deg); opacity: 1; } 100% { transform: none; } }
@keyframes load-bar { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.hud-bar .hud-score { position: static; left: auto; top: auto; font: inherit; line-height: inherit; color: inherit; -webkit-text-stroke: 0; text-shadow: inherit; }
/* the results and pause screens have the bottom of the screen to themselves */
#stage:has(#fail:not([hidden])) .powerbar, #stage:has(#pause:not([hidden])) .powerbar { display: none; }

/* ================================================================== item tiers and the Premium Shop
   Premium wearables are framed yellow, rare ones green, event ones orange and ultra ones red (Stick
   Run's prem, rare, event and ultra colours, as the Marketplace frames them) wherever an item is
   shown; the Premium tab and button are gold. */
:root { --tier-premium: #ffe11a; --tier-rare: #2fdc3a; --tier-event: #ff8a1a; --tier-ultra: #ff2a1f; }
:is(#shop, #prem-shop) .item > .gear-pic.tier-premium, :is(#shop, #prem-shop) .item > .gear-pic.tier-pass { border: calc(2px * var(--s)) solid var(--tier-premium); box-shadow: inset 0 0 calc(7px * var(--s)) color-mix(in srgb, var(--tier-premium) 50%, transparent), 0 0 calc(5px * var(--s)) color-mix(in srgb, var(--tier-premium) 45%, transparent); }
:is(#shop, #prem-shop) .item > .gear-pic.tier-rare { border: calc(2px * var(--s)) solid var(--tier-rare); box-shadow: inset 0 0 calc(7px * var(--s)) color-mix(in srgb, var(--tier-rare) 50%, transparent), 0 0 calc(5px * var(--s)) color-mix(in srgb, var(--tier-rare) 45%, transparent); }
:is(#shop, #prem-shop) .item > .gear-pic.tier-event { border: calc(2px * var(--s)) solid var(--tier-event); box-shadow: inset 0 0 calc(7px * var(--s)) color-mix(in srgb, var(--tier-event) 50%, transparent), 0 0 calc(5px * var(--s)) color-mix(in srgb, var(--tier-event) 45%, transparent); }
:is(#shop, #prem-shop) .item > .gear-pic.tier-ultra { border: calc(2px * var(--s)) solid var(--tier-ultra); box-shadow: inset 0 0 calc(7px * var(--s)) color-mix(in srgb, var(--tier-ultra) 50%, transparent), 0 0 calc(5px * var(--s)) color-mix(in srgb, var(--tier-ultra) 45%, transparent); }
.gear-pic > svg { position: absolute; inset: 10%; width: 80%; height: 80%; }
.iv-cell.tier-premium { border-color: var(--tier-premium); box-shadow: inset 0 0 0 calc(1px * var(--s)) var(--tier-premium), inset 0 0 calc(6px * var(--s)) color-mix(in srgb, var(--tier-premium) 45%, transparent); }
.iv-cell.tier-rare { border-color: var(--tier-rare); box-shadow: inset 0 0 0 calc(1px * var(--s)) var(--tier-rare), inset 0 0 calc(6px * var(--s)) color-mix(in srgb, var(--tier-rare) 45%, transparent); }
.iv-cell.tier-event { border-color: var(--tier-event); box-shadow: inset 0 0 0 calc(1px * var(--s)) var(--tier-event), inset 0 0 calc(6px * var(--s)) color-mix(in srgb, var(--tier-event) 45%, transparent); }
.iv-cell.tier-ultra { border-color: var(--tier-ultra); box-shadow: inset 0 0 0 calc(1px * var(--s)) var(--tier-ultra), inset 0 0 calc(6px * var(--s)) color-mix(in srgb, var(--tier-ultra) 45%, transparent); }
.iv-cell.worn.tier-premium { box-shadow: inset 0 0 0 calc(1.5px * var(--s)) var(--tier-premium), 0 0 0 calc(2px * var(--s)) #2ea81f, 0 0 calc(10px * var(--s)) #5bff40; }
.iv-cell.worn.tier-rare { box-shadow: inset 0 0 0 calc(1.5px * var(--s)) var(--tier-rare), 0 0 0 calc(2px * var(--s)) #2ea81f, 0 0 calc(10px * var(--s)) #5bff40; }
.iv-cell.worn.tier-event { box-shadow: inset 0 0 0 calc(1.5px * var(--s)) var(--tier-event), 0 0 0 calc(2px * var(--s)) #2ea81f, 0 0 calc(10px * var(--s)) #5bff40; }
.iv-cell.worn.tier-ultra { box-shadow: inset 0 0 0 calc(1.5px * var(--s)) var(--tier-ultra), 0 0 0 calc(2px * var(--s)) #2ea81f, 0 0 calc(10px * var(--s)) #5bff40; }

/* the Premium Item Shop's rows: what each is in its tier's colour */
:is(#shop, #prem-shop) .item.prem .ds { color: #e8e8e8; }
:is(#shop, #prem-shop) .item.prem.tier-rare .ds { color: #8dff86; }
:is(#shop, #prem-shop) .item.prem.tier-event .ds { color: #ffb35c; }
:is(#shop, #prem-shop) .item.prem.tier-ultra .ds { color: #ff7a6e; }
:is(#shop, #prem-shop) .item.prem:not(.bought).tier-premium .ds, :is(#shop, #prem-shop) .item.prem:not(.bought).tier-pass .ds { color: #fff07a; }
:is(#shop, #prem-shop) .item.prem:disabled { cursor: wait; filter: grayscale(0.4); }
:is(#shop, #prem-shop) .prem-note { grid-column: 1 / -1; margin: calc(2px * var(--s)) 0; padding: calc(6px * var(--s)) calc(10px * var(--s)); font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: calc(11px * var(--s)); color: #6a3a00; background: rgba(255, 255, 255, 0.55); border-radius: calc(5px * var(--s)); text-align: center; }

/* Marketplace+ in the room browser */
.lb-rgroup.mpp > b { color: #7fc8ff; }
.lb-rgroup.mpp > svg { fill: #ffd23f; stroke: #ffd23f; }
.lb-pass { font-style: normal; font-family: "Arial Black", Arial, sans-serif; font-size: calc(6.5px * var(--s)); color: #3a2400; background: linear-gradient(180deg, #ffe680, #ffc21a); border: calc(1px * var(--s)) solid #8a5a00; border-radius: calc(3px * var(--s)); padding: 0 calc(3px * var(--s)); }
/* the room's pass windows: the Trading Pass is bought in the Premium Shop */
.aw-btn.gold { color: #3a2400; background: linear-gradient(180deg, #ffe680 0%, #ffc21a 50%, #e09a00 100%); border-color: #8a5a00; }
.mr-passnote { font-size: calc(10px * var(--s)); color: #8a5a00; text-align: center; }
/* ================================================================== the main menu's backdrop (src/MenuScene.js)
   A canvas painted once (again on resize or a theme change), the sun's rays turning and the clouds
   drifting as transform-only animations: the compositor moves them, nothing repaints. */
.menu-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.menu-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-rays { position: absolute; left: calc(50% + var(--dx) * var(--s) * 1px); bottom: calc((450 - var(--y)) * var(--s) * 1px); width: calc(380px * var(--s)); height: calc(380px * var(--s)); margin: 0 0 calc(-190px * var(--s)) calc(-190px * var(--s)); border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 17%, rgba(0, 0, 0, 0.5) 40%, transparent 70%); mask: radial-gradient(circle, transparent 0 13%, #000 17%, rgba(0, 0, 0, 0.5) 40%, transparent 70%);
  animation: rays-turn 90s linear infinite; will-change: transform; }
.menu-bg[data-theme="sunset"] .menu-rays { opacity: 0.8; }
.menu-bg[data-theme="night"] .menu-rays { display: none; }
.menu-cloud { position: absolute; left: 0; width: 100%; height: 0; bottom: calc((450 - var(--y)) * var(--s) * 1px); animation: cloud-drift linear infinite; will-change: transform; }
.menu-cloud img { position: absolute; right: 100%; bottom: 0; width: calc(var(--w) * var(--s) * 1px); opacity: 0.95; }
.menu-bg[data-theme="sunset"] .menu-cloud img { filter: sepia(0.45) saturate(1.6) hue-rotate(-25deg) brightness(1.02); }
.menu-bg[data-theme="night"] .menu-cloud img { filter: brightness(0.5) saturate(0.7); opacity: 0.7; }
@keyframes rays-turn { to { transform: rotate(360deg); } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(calc(100% + var(--w) * var(--s) * 1px)); } }
@media (prefers-reduced-motion: reduce) { .menu-rays, .menu-cloud { animation: none; } }
/* Coins & Shop's picker (#shop-pick): a white card of big icon buttons, one a shop */
.pickcard { position: relative; display: flex; gap: calc(10px * var(--s)); padding: calc(18px * var(--s)) calc(26px * var(--s)); background: #fff; border-radius: calc(18px * var(--s)); box-shadow: 0 calc(10px * var(--s)) calc(30px * var(--s)) rgba(0, 0, 0, 0.45); animation: card-in 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.pickcard .x { right: calc(-8px * var(--s)); top: calc(-8px * var(--s)); border: calc(2px * var(--s)) solid #1b1b1b; background: radial-gradient(circle at 40% 35%, #ff4d4d, #c40000); box-shadow: inset 0 0 0 calc(1.5px * var(--s)) rgba(255, 255, 255, 0.35), 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.4); font-family: Arial, sans-serif; font-weight: 900; color: #fff; }
.pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--s)); width: calc(150px * var(--s)); padding: calc(10px * var(--s)) calc(6px * var(--s)); background: none; border: 0; border-radius: calc(12px * var(--s)); cursor: pointer; font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: calc(18px * var(--s)); line-height: 1.15; color: #111; transition: background 0.15s, transform 0.15s; }
.pick:hover, .pick:focus-visible { background: #f1f1f1; transform: translateY(calc(-2px * var(--s))); outline: none; }
.pick img { width: calc(34px * var(--s)); height: calc(34px * var(--s)); }
.pick-dollar { display: inline-block; font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: 900; font-size: calc(34px * var(--s)); line-height: calc(34px * var(--s)); color: #19c8d8; -webkit-text-stroke: calc(1.5px * var(--s)) #0a4a55; }
/* the Premium Item Shop: Stick Run's, the same orange window with its gold dollar, and teal rows */
#prem-shop .sw-head .pick-dollar { font-size: calc(24px * var(--s)); line-height: 1; color: #ffd400; -webkit-text-stroke: calc(1.2px * var(--s)) #5a3a00; }
#prem-shop .item { background: linear-gradient(180deg, #2596ab 0 50%, #2f8b99 50% 100%); }
#prem-shop .item.bought { background: linear-gradient(180deg, #358e35 0 50%, #3b7f3b 50% 100%); }

/* the Premium Item Shop's packs and coin stacks: a pack's row shows what's in it */
#prem-shop .item > .gear-pic.tier-pack, #prem-shop .item > .gear-pic.tier-coins { border: calc(2px * var(--s)) solid #b98cff; }
#prem-shop .item > .gear-pic.tier-coins { border-color: #1fb8ff; } /* (Stick Run's cash colour) */
#prem-shop .item > .gear-pic.tier-coins .tc-note { inset: 0; width: 88%; height: auto; margin: auto; }
/* a pack: Stick Run's own picture, which has its frame */
#prem-shop .item > .gear-pic.tier-pack.sre-pack { padding: 0; border: 0; background: none; box-shadow: none; }
#prem-shop .gear-pic.sre-pack img { filter: drop-shadow(0 calc(2px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.35)); }
/* a pack's row is as tall as its name, description and the strip of what's in it */
#prem-shop .item.kind-pack { grid-template-rows: max-content max-content; align-content: center; padding-top: calc(6px * var(--s)); padding-bottom: calc(6px * var(--s)); }
#prem-shop .pack-items { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--s)); margin-top: calc(4px * var(--s)); }
#prem-shop .pack-items img, #prem-shop .pack-items i { box-sizing: border-box; width: calc(26px * var(--s)); height: calc(26px * var(--s)); object-fit: contain; flex: none; }
#prem-shop .pack-items img { padding: calc(2px * var(--s)); background: #2c2c2c; border: calc(1px * var(--s)) solid #8a8a8a; border-radius: calc(5px * var(--s)); }
/* (each item framed in its tier's colour, as everywhere: premium yellow, rare green...) */
#prem-shop .pack-items img.tier-premium { border: calc(1.5px * var(--s)) solid var(--tier-premium); }
#prem-shop .pack-items img.tier-rare { border: calc(1.5px * var(--s)) solid var(--tier-rare); }
#prem-shop .pack-items img.tier-event { border: calc(1.5px * var(--s)) solid var(--tier-event); }
#prem-shop .pack-items img.tier-ultra { border: calc(1.5px * var(--s)) solid var(--tier-ultra); }
#prem-shop .pack-items .pk-skin { border-radius: 50%; background: linear-gradient(90deg, var(--fill) 50%, var(--back) 50%); border: calc(1.5px * var(--s)) solid #222; }
#prem-shop .pack-items .pk-pass svg { width: 100%; height: 100%; }
#prem-shop .pack-items b { margin-left: calc(4px * var(--s)); font-size: calc(10px * var(--s)); color: #ffe066; }
#prem-shop .pack-items b + img { width: calc(12px * var(--s)); height: calc(12px * var(--s)); padding: 0; background: none; }

/* ---- Stick Run's trade screens. Your offer on the board (offers_w): your item at the top, "Waiting
   for interested trader..." and Close Offer; a trader found (trade_actions): the trader, what they
   put in the box (outlined red with the lock once they lock), Unlock / Accept / Reject. Joining an
   offer (trade_w): the dark Trading... window. */
.sr-box { position: relative; flex: none; display: grid; place-items: center; width: calc(36px * var(--s)); height: calc(36px * var(--s)); box-sizing: border-box; border: calc(2.5px * var(--s)) solid #444; border-radius: calc(6px * var(--s)); background: #2b1609; }
.sr-box img { width: 82%; height: 82%; object-fit: contain; }
.sr-box.sm { width: calc(30px * var(--s)); height: calc(30px * var(--s)); border-width: calc(2px * var(--s)); border-color: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.2); }
.sr-box.pop { animation: mk-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.sr-x { position: absolute; inset: 22%; }
.sr-x::before, .sr-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; height: calc(3.5px * var(--s)); margin: calc(-1.75px * var(--s)) 0 0 -65%; border-radius: calc(2px * var(--s)); background: #f00; transform: rotate(45deg); }
.sr-x::after { transform: rotate(-45deg); }
.sr-lab { font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(14px * var(--s)); color: #fff; white-space: nowrap; }
.sr-coins { padding: 0; border: 0; background: none; font-family: "Arial Black", Arial, sans-serif; font-size: calc(14px * var(--s)); color: #ff0; white-space: nowrap; }
.sr-coins.pop { animation: mk-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.sr-lock { display: inline-block; flex: none; width: calc(15px * var(--s)); height: calc(18px * var(--s)); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18'%3E%3Cpath d='M3.5 8V5.5a4 4 0 0 1 8 0V8' fill='none' stroke='%23f00' stroke-width='2.4'/%3E%3Crect x='1' y='7.5' width='13' height='10' rx='1.5' fill='%23f00'/%3E%3C/svg%3E"); }
.sr-btn { position: relative; display: inline-grid; place-items: center; height: calc(24px * var(--s)); padding: 0 calc(16px * var(--s)); border: 0; border-radius: calc(3px * var(--s)); font-family: "Arial Black", Arial, sans-serif; font-size: calc(11.5px * var(--s)); color: #fff; white-space: nowrap; cursor: pointer; }
.sr-btn.red { background: linear-gradient(180deg, #f20000, #b00000); }
.sr-btn.green { background: linear-gradient(180deg, #19c419, #0a9a0a); font-size: calc(13px * var(--s)); }
.sr-btn:hover { filter: brightness(1.15); }
.sr-btn:active { transform: translateY(calc(1px * var(--s))); }
.sr-btn[hidden] { display: none; }
.sr-btn.pill { display: inline-flex; align-items: center; gap: calc(4px * var(--s)); min-width: calc(62px * var(--s)); justify-content: center; height: calc(22px * var(--s)); padding: 0 calc(10px * var(--s)); border: calc(3px * var(--s)) solid #555; border-radius: calc(7px * var(--s)); font-family: "PT Sans", Arial, sans-serif; font-weight: 400; font-size: calc(13px * var(--s)); color: #000; }
.sr-btn.pill.red { background: linear-gradient(180deg, #e00 0%, #e00 45%, #a00 100%); }
.sr-btn.pill.green { background: linear-gradient(180deg, #5f5 0%, #2c2 45%, #1a1 100%); font-size: calc(13px * var(--s)); }
.sr-btn.pill.silver { background: linear-gradient(180deg, #fff 0%, #ddd 45%, #aaa 100%); }
.sr-btn.pill .sr-lock { width: calc(10px * var(--s)); height: calc(12px * var(--s)); filter: brightness(0); }
.sr-fig { display: block; width: auto; height: 100%; }

#market .mk-board.sro { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8px * var(--s)); overflow: hidden; padding: calc(10px * var(--s)); background: #552d12; }
/* (while your offer is up, the bar under the board goes: Make Offer is hidden then and the kind boxes
   only sort the offers, so the board takes its room and everything in it can be bigger) */
#market .mk-offers:has(> .mk-board.sro) > .mk-bar { display: none; }
.sro .sro-item { width: calc(52px * var(--s)); height: calc(52px * var(--s)); border-width: calc(3px * var(--s)); border-radius: calc(8px * var(--s)); }
.sro .sro-item { position: absolute; left: 50%; top: calc(18px * var(--s)); transform: translateX(-50%); }
.sro-wait { margin: 0; font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(21px * var(--s)); color: #fff; }
.sro-close { position: absolute; right: calc(10px * var(--s)); bottom: calc(10px * var(--s)); height: calc(28px * var(--s)); font-size: calc(13px * var(--s)); }
/* (someone came: the item stays as big, at the top, and the rest goes under it) */
#market .mk-board.sro.found { justify-content: flex-start; gap: calc(2px * var(--s)); padding: calc(62px * var(--s)) calc(3px * var(--s)) calc(3px * var(--s)); }
.sro.found .sro-item { top: calc(5px * var(--s)); }
.sro > * { flex: none; }
.sro-trader { position: absolute; left: 9%; top: calc(12px * var(--s)); height: calc(88px * var(--s)); }
.sro-int { margin: 0; font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(17px * var(--s)); line-height: 1; color: #fff; }
.sro-name { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Arial Black", Arial, sans-serif; font-size: calc(15px * var(--s)); line-height: 1.15; color: #0ff; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.6); }
.sro-get { display: flex; align-items: flex-start; gap: calc(9px * var(--s)); margin-top: calc(3px * var(--s)); padding: calc(2px * var(--s)) calc(12px * var(--s)); border: calc(2px * var(--s)) solid transparent; border-radius: calc(8px * var(--s)); }
.sro-get > .sr-lab, .sro-get > .sr-coins { font-size: calc(17px * var(--s)); line-height: calc(32px * var(--s)); }
.sro-get .sr-box.sm { width: calc(32px * var(--s)); height: calc(32px * var(--s)); }
.sro-get > .sr-lock { margin-top: calc(8px * var(--s)); visibility: hidden; }
.sro-get.locked { border-color: #f00; }
.sro-get.locked > .sr-lock { visibility: visible; }
.sro-slots { display: grid; grid-template-columns: repeat(3, auto); gap: calc(3px * var(--s)); }
.sro-btns { display: flex; align-items: center; gap: calc(8px * var(--s)); min-height: calc(26px * var(--s)); margin-top: calc(3px * var(--s)); }
.sro-btns .sr-btn.pill { height: calc(26px * var(--s)); min-width: calc(76px * var(--s)); border-width: calc(2.5px * var(--s)); font-size: calc(14px * var(--s)); }
.sro-waiting { margin: 0 calc(8px * var(--s)) 0 0; font-family: "PT Sans", Arial, sans-serif; font-size: calc(15px * var(--s)); color: #fff; }

.srt { position: relative; display: flex; flex-direction: column; gap: calc(6px * var(--s)); width: calc(400px * var(--s)); box-sizing: border-box; padding: calc(6px * var(--s)) calc(8px * var(--s)) calc(8px * var(--s)); border-radius: calc(10px * var(--s)); background: linear-gradient(180deg, #252525, #111); box-shadow: 0 calc(3px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.5); font-family: "PT Sans", Arial, sans-serif; color: #fff; animation: srt-in 0.6s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes srt-in { from { transform: scale(0.5); opacity: 0; } }
.srt-head { padding: calc(3px * var(--s)) calc(8px * var(--s)); border-radius: calc(10px * var(--s)); background: #383838; font-size: calc(17px * var(--s)); line-height: 1.25; }
.srt-top { display: flex; align-items: flex-start; gap: calc(8px * var(--s)); padding: 0 calc(10px * var(--s)); }
.srt-fig { flex: none; height: calc(72px * var(--s)); }
.srt-partner { display: flex; flex-direction: column; gap: calc(2px * var(--s)); min-width: 0; flex: 1; padding-top: calc(4px * var(--s)); }
.srt-partner .sro-name { max-width: 100%; }
.srt-item { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); margin-right: calc(70px * var(--s)); padding-top: calc(4px * var(--s)); }
.srt-item .sr-box { width: calc(40px * var(--s)); height: calc(40px * var(--s)); }
.srt .sr-box { border-color: #3a3a3a; background: #111; }
.srt-give { position: relative; display: flex; align-items: flex-start; gap: calc(8px * var(--s)); padding: calc(2px * var(--s)) calc(30px * var(--s)) 0; border: calc(2px * var(--s)) solid transparent; border-radius: calc(8px * var(--s)); margin: 0 calc(6px * var(--s)); }
.srt-give > .sr-lab, .srt-give > .sr-coins { line-height: calc(30px * var(--s)); }
.srt-give > .sr-lab { font-size: calc(15px * var(--s)); }
.srt.locked .srt-give { border-color: #f00; }
.srt-slots { display: grid; grid-template-columns: repeat(3, auto); gap: calc(3px * var(--s)); }
.srt-slot { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.srt-slot .sr-box { width: calc(30px * var(--s)); height: calc(30px * var(--s)); border-width: calc(2px * var(--s)); }
.srt-slot:disabled { cursor: default; }
.srt-slot:hover:not(:disabled) .sr-box { border-color: #35f0ff; }
.srt-rm { position: absolute; right: calc(-4px * var(--s)); top: calc(-4px * var(--s)); width: calc(13px * var(--s)); height: calc(13px * var(--s)); border: calc(1px * var(--s)) solid #000; border-radius: 50%; background: #e00; opacity: 0; transition: opacity 0.15s; }
.srt-rm::before { content: "x"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(9px * var(--s)) / 1 Arial, sans-serif; color: #fff; }
.srt-slot:hover:not(:disabled) .srt-rm { opacity: 1; }
.srt-coins { cursor: pointer; }
.srt-coins:hover:not(:disabled) { text-decoration: underline; }
.srt-coins:disabled { cursor: default; }
.srt-coinsel { position: absolute; z-index: 2; right: calc(6px * var(--s)); top: calc(-6px * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); padding: calc(6px * var(--s)); border-radius: calc(8px * var(--s)); background: #222; box-shadow: 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.6); }
.srt-coinsel[hidden] { display: none; }
.srt-coinsel span { font-size: calc(12px * var(--s)); color: #ddd; }
.srt-coinsel input { width: calc(96px * var(--s)); height: calc(26px * var(--s)); box-sizing: border-box; padding: 0 calc(6px * var(--s)); border: 0; border-radius: calc(6px * var(--s)); background: linear-gradient(180deg, #777, #444); font: 700 calc(14px * var(--s)) Arial, sans-serif; color: #fff; text-align: center; }
.srt-btns { display: flex; align-items: center; justify-content: flex-end; gap: calc(6px * var(--s)); min-height: calc(26px * var(--s)); }
.srt-btns .sr-btn { min-width: calc(80px * var(--s)); }
.srt-waiting { margin: 0; font-size: calc(11px * var(--s)); line-height: 1.1; text-align: center; color: #fff; }
.srt-waiting[hidden] { display: none; }

/* ---- Stick Run's roundstats between the rounds: no window, straight over the game (Stick Run's
   units are Velocity Run's: its stage is 600 wide too) */
.race-panel:has(.srr) { background: rgba(0, 0, 0, 0.62); } /* (a dark shade over the game behind the round's results) */
.srr { position: relative; display: flex; flex-direction: column; width: calc(384px * var(--s)); font-family: "PT Sans", Arial, sans-serif; color: #fff; animation: srr-in 1s cubic-bezier(0.25, 1.5, 0.45, 1) both; }
@keyframes srr-in { from { transform: translateX(calc(500px * var(--s))); } }
.srr-title { margin: 0; text-align: center; font: 900 calc(50px * var(--s)) / 1 "Arial Black", Arial, sans-serif; color: #00ff00; text-shadow: calc(1px * var(--s)) calc(2px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, 0.55); }
.srr-over { margin: calc(2px * var(--s)) calc(92px * var(--s)) 0 0; text-align: right; font-size: calc(15px * var(--s)); line-height: 1; }
.srr-rows { display: flex; flex-direction: column; min-height: calc(88px * var(--s)); margin-top: calc(4px * var(--s)); background: linear-gradient(90deg, transparent calc(306px * var(--s)), rgba(80, 80, 80, 0.6) calc(306px * var(--s)), rgba(80, 80, 80, 0.6) calc(307px * var(--s)), transparent calc(307px * var(--s))); }
.srr-row { display: flex; align-items: center; height: calc(22px * var(--s)); }
.srr-row.gone { opacity: 0.45; }
.srr-rdy { flex: none; width: calc(94px * var(--s)); text-align: center; font: normal calc(13px * var(--s)) "Arial Black", Arial, sans-serif; color: #00ff00; text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 #050; visibility: hidden; }
.srr-rdy.on { visibility: visible; animation: pop-in 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.srr-p { flex: none; display: flex; align-items: center; gap: calc(6px * var(--s)); width: calc(212px * var(--s)); min-width: 0; font-weight: 700; font-size: calc(15px * var(--s)); }
.srr-p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srr-row.you .srr-p b { text-decoration: underline; text-decoration-color: #ffcf1a; text-decoration-thickness: calc(2px * var(--s)); }
.srr-place { position: relative; flex: none; width: calc(18px * var(--s)); font-style: normal; text-align: center; }
.srr-place.star { color: #000; } /* (black on its gold star) */
.srr-place.star::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(34px * var(--s)); height: calc(34px * var(--s)); transform: translate(-50%, -54%); background: linear-gradient(180deg, #fff6a0, #f5d000 55%, #d9a800); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.srr-pts { flex: 1; text-align: center; font: normal calc(15px * var(--s)) "Arial Black", Arial, sans-serif; color: #fff; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.7); }
.srr-pts.pop { opacity: 0; animation: rr-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.srr-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(8px * var(--s)); margin-top: calc(4px * var(--s)); }
.srr-timer { margin: 0 0 calc(2px * var(--s)) calc(14px * var(--s)); font-size: calc(15px * var(--s)); color: #ddd; }
.srr-next { display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); }
.srr-next small { font-size: calc(10.5px * var(--s)); color: #bbb; }
.srr-ready { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--s)); width: calc(78px * var(--s)); height: calc(19px * var(--s)); padding: 0; border: 0; border-radius: calc(2px * var(--s)); background: linear-gradient(180deg, #19d419, #0a9a0a); font: normal calc(11px * var(--s)) "Arial Black", Arial, sans-serif; color: #fff; cursor: pointer; }
.srr-ready:hover { filter: brightness(1.12); }
.srr-ready[hidden] { display: none; }
.srr-ready .rl-pad { width: calc(17px * var(--s)); height: calc(11px * var(--s)); }
.srr-chat { display: flex; flex-direction: column; height: calc(86px * var(--s)); margin-top: calc(4px * var(--s)); overflow: hidden; border-radius: calc(12px * var(--s)); background: #3a3a3a; }
.srr-log { flex: 1; overflow-y: auto; padding: calc(4px * var(--s)) calc(8px * var(--s)); font-size: calc(11px * var(--s)); color: #fff; }
.srr-log p { margin: 0; overflow-wrap: anywhere; }
.srr-say { position: relative; flex: none; height: calc(17px * var(--s)); background: #262626; }
.srr-say input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 calc(8px * var(--s)); border: 0; background: none; font: calc(11px * var(--s)) "PT Sans", Arial, sans-serif; color: #fff; outline: none; }
.srr-say .mk-chatlock { position: absolute; right: calc(6px * var(--s)); top: 50%; transform: translateY(-50%); font-size: calc(10px * var(--s)); color: #aaa; }

/* ---- Stick Run's rareslotswindow: a dark tray along the bottom with the blue bar in it */
.rsw { position: absolute; z-index: 3; left: 50%; bottom: calc(40px * var(--s)); width: calc(516px * var(--s)); margin-left: calc(-258px * var(--s)); padding: calc(5px * var(--s)); box-sizing: border-box; border-radius: calc(16px * var(--s)) calc(16px * var(--s)) calc(10px * var(--s)) calc(10px * var(--s)); background: #333; font-family: "PT Sans", Arial, sans-serif; color: #fff; animation: rsw-up 0.3s ease-out both; }
@keyframes rsw-up { from { transform: translateY(calc(160px * var(--s))); } }
.rsw-leave { position: absolute; right: 0; bottom: 100%; display: grid; place-items: center; width: calc(44px * var(--s)); height: calc(28px * var(--s)); padding: 0; border: 0; background: #b85050; cursor: pointer; }
.rsw-leave:hover { background: #cc5c5c; }
.rsw-leave svg { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }
.rsw-bar { display: flex; align-items: center; gap: calc(10px * var(--s)); height: calc(44px * var(--s)); padding: 0 calc(10px * var(--s)); border: calc(1px * var(--s)) solid #fff; border-radius: calc(12px * var(--s)); background: #305573; }
.rsw-rate { flex: none; font-size: calc(10.5px * var(--s)); }
.rsw-sep { flex: none; align-self: stretch; width: calc(1px * var(--s)); margin: calc(5px * var(--s)) 0; background: rgba(255, 255, 255, 0.45); }
.rsw-bal { flex: 1; display: flex; align-items: center; gap: calc(5px * var(--s)); font-size: calc(16px * var(--s)); }
.rsw-bal .mk-coin { width: calc(18px * var(--s)); height: calc(18px * var(--s)); margin: 0; }
.rsw-btn { flex: none; padding: 0; border: calc(2px * var(--s)) solid #111; border-radius: 999px; background: linear-gradient(180deg, #8d9aa6, #4e5a66); font: calc(15px * var(--s)) "PT Sans", Arial, sans-serif; color: #fff; cursor: pointer; }
.rsw-btn:hover:not(:disabled) { filter: brightness(1.15); }
.rsw-btn:disabled { opacity: 0.55; cursor: default; }
.rsw-spin { width: calc(86px * var(--s)); height: calc(24px * var(--s)); color: #8fd6ff; }
.rsw-auto { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); }
.rsw-n { display: flex; align-items: center; gap: calc(4px * var(--s)); padding: calc(1px * var(--s)); border-radius: calc(5px * var(--s)); background: #222; }
.rsw-n button { width: calc(18px * var(--s)); height: calc(16px * var(--s)); padding: 0; border: 0; border-radius: calc(4px * var(--s)); background: #555; font: 700 calc(13px * var(--s)) / 1 Arial, sans-serif; color: #fff; cursor: pointer; }
.rsw-n button:disabled { opacity: 0.45; cursor: default; }
.rsw-n b { min-width: calc(20px * var(--s)); text-align: center; font-weight: 400; font-size: calc(12px * var(--s)); }
.rsw-autobtn { width: calc(74px * var(--s)); height: calc(18px * var(--s)); font-size: calc(11px * var(--s)); }
.rsw-stop { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); }
.rsw-stop small { font-size: calc(8px * var(--s)); }
.rsw-switch { position: relative; width: calc(28px * var(--s)); height: calc(13px * var(--s)); padding: 0; border: 0; border-radius: 999px; background: #c8c8c8; cursor: pointer; transition: background 0.2s; }
.rsw-switch::after { content: ""; position: absolute; left: calc(2px * var(--s)); top: calc(2px * var(--s)); width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; background: #fff; transition: transform 0.2s; }
.rsw-switch[aria-pressed="true"] { background: #2fb51c; }
.rsw-switch[aria-pressed="true"]::after { transform: translateX(calc(15px * var(--s))); }

/* an item's box is framed in its kind's colour (normal grey, prem yellow, rare green...) */
:is(.sro, .srt, .mk-dim) .sr-box[style] { border-color: var(--c); }
/* the Trading window in the middle of the screen; the private chat under it stays usable */
#mk-trade.mk-dim.keepchat { bottom: 0; pointer-events: none; }
#mk-trade .srt { pointer-events: auto; }

/* ---- Stick Run's trade_consent_w: black with grey stripes across the top, the two rows of boxes,
   the trade partner's box, OK, COOL! / NO! and "Cancel in:" */
#mk-consent.mk-dim.keepchat { bottom: 0; }
.src { position: relative; display: flex; flex-direction: column; align-items: stretch; width: calc(300px * var(--s)); box-sizing: border-box; padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(4px * var(--s)); background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.07) 0 calc(10px * var(--s)), transparent calc(10px * var(--s)) calc(20px * var(--s))) top / 100% 30% no-repeat, linear-gradient(180deg, #161616, #000 30%); font-family: "PT Sans", Arial, sans-serif; color: #fff; box-shadow: 0 calc(3px * var(--s)) calc(10px * var(--s)) rgba(0, 0, 0, 0.6); animation: srt-in 0.45s cubic-bezier(0.2, 1.2, 0.4, 1); }
.src-h { text-align: center; font-size: calc(15px * var(--s)); line-height: 1.3; }
.src-row { display: flex; align-items: center; justify-content: space-between; height: calc(28px * var(--s)); padding: 0 calc(8px * var(--s)); background: #222; }
.src-boxes { display: flex; gap: calc(4px * var(--s)); }
.src .sr-box { width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-width: calc(1.5px * var(--s)); border-radius: calc(3px * var(--s)); border-color: #444; background: #111; }
.src .sr-box[style] { border-color: var(--c); }
.src .sr-x::before, .src .sr-x::after { height: calc(2px * var(--s)); margin-top: calc(-1px * var(--s)); }
.src-coins { display: flex; align-items: center; gap: calc(3px * var(--s)); margin-right: calc(30px * var(--s)); font-size: calc(13px * var(--s)); }
.src-coins .mk-coin { width: calc(12px * var(--s)); height: calc(12px * var(--s)); margin: 0; }
.src-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--s)); margin-top: calc(6px * var(--s)); }
.src-about { display: flex; flex-direction: column; align-items: center; width: calc(132px * var(--s)); padding: calc(2px * var(--s)) 0 calc(4px * var(--s)); background: #0b1a20; }
.src-about small { font-size: calc(9px * var(--s)); color: #2f7d8a; }
/* the partner's face card: their face, name and level (no skin) */
.src-card { display: flex; align-items: center; gap: calc(6px * var(--s)); width: calc(124px * var(--s)); margin-top: calc(2px * var(--s)); padding: calc(2px * var(--s)) calc(4px * var(--s)); box-sizing: border-box; color: #fff; }
.src-face { flex: none; width: calc(34px * var(--s)); height: calc(34px * var(--s)); border-radius: calc(4px * var(--s)); background: linear-gradient(180deg, #b8b8b8, #8a8a8a); }
.src-who { display: flex; flex-direction: column; min-width: 0; }
.src-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 calc(12px * var(--s)) "Arial Black", Arial, sans-serif; }
.src-who span { display: flex; align-items: center; gap: calc(3px * var(--s)); font: 700 calc(10px * var(--s)) "Arial Black", Arial, sans-serif; opacity: 0.9; }
.src-btns { display: flex; flex-direction: column; gap: calc(4px * var(--s)); }
.src-btns[hidden], .src-wait[hidden] { display: none; }
.src-btns .sr-btn { width: calc(96px * var(--s)); height: calc(19px * var(--s)); font-size: calc(11px * var(--s)); }
.src-btns .sr-btn.red { font-family: "PT Sans", Arial, sans-serif; font-size: calc(12px * var(--s)); }
.src-wait { margin: 0; width: calc(96px * var(--s)); text-align: center; font-size: calc(10px * var(--s)); }
.src-cancel { margin: calc(2px * var(--s)) 0 0; text-align: right; font: 700 calc(8.5px * var(--s)) Arial, sans-serif; color: #888; }
.src-cancel b { margin-left: calc(10px * var(--s)); color: #f00; }

/* the hovered player in a market room: Stick Run's listplayer row where it puts it (282, 29), a bar in the
   skin's colours with the level chevron and the name; under it, whether you can trade */
.mr-card { position: absolute; z-index: 2; width: calc(140px * var(--s)); transform: translate(-50%, -100%); pointer-events: none; box-shadow: 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.45); }
.mr-card .rl-p { border-bottom: 0; }

/* ---- the inventory as Stick Run's items_mc: an orange page (lighter towards the bottom), "Items" on a
   cream-to-orange bar with the red X, the section titles in PT Sans with a black line, brown cells
   with a red X when empty, and your items in dark cells framed in their kind's colour */
#inventory .invcard { overflow: hidden; gap: 0; padding: calc(8px * var(--s)) calc(12px * var(--s)) calc(8px * var(--s)); background: linear-gradient(180deg, #ff9a00 0%, #ffad2e 45%, #ffd37e 100%); font-family: "PT Sans", Arial, sans-serif; color: #000; }
#inventory .iv-head { height: calc(34px * var(--s)); padding: 0 calc(4px * var(--s)) 0 calc(14px * var(--s)); border-radius: calc(18px * var(--s)) 0 0 calc(18px * var(--s)); background: linear-gradient(90deg, #fff0d0 0%, #ffd27a 35%, rgba(255, 170, 40, 0) 70%); }
#inventory .iv-head b { font-family: "PT Sans", Arial, sans-serif; font-weight: 700; font-size: calc(26px * var(--s)); color: #000; -webkit-text-stroke: 0; text-shadow: none; }
#inventory .iv-x { width: calc(27px * var(--s)); height: calc(27px * var(--s)); border: calc(2.5px * var(--s)) solid #000; background: radial-gradient(circle at 45% 35%, #ff3030, #c00000 70%); box-shadow: inset 0 0 0 calc(1.5px * var(--s)) #fff; font: 900 calc(14px * var(--s)) / 1 Arial, sans-serif; color: #fff; }
#inventory .iv-sec { display: flex; align-items: center; gap: calc(16px * var(--s)); margin-top: calc(4px * var(--s)); padding: 0; border: 0; font-family: "PT Sans", Arial, sans-serif; font-weight: 400; font-size: calc(14px * var(--s)); color: #000; text-shadow: none; }
#inventory .iv-sec::after { content: ""; flex: 1; height: calc(1px * var(--s)); background: #000; }
#inventory .iv-bgs .iv-sec::after { display: none; }
#inventory .iv-cur small, #inventory .iv-sel small { font-weight: 700; font-size: calc(14px * var(--s)); color: #000; text-shadow: none; }
#inventory .iv-rows label { font-weight: 700; font-size: calc(10px * var(--s)); color: #000; text-shadow: none; }
#inventory .iv-top { gap: calc(16px * var(--s)); }
#inventory .iv-bgs { width: calc(106px * var(--s)); }
#inventory .iv-curskin { width: calc(48px * var(--s)); height: calc(48px * var(--s)); border: calc(2px * var(--s)) solid #555; border-radius: calc(7px * var(--s)); }
#inventory .iv-curbg { width: calc(64px * var(--s)); height: calc(30px * var(--s)); margin: calc(3px * var(--s)) auto calc(3px * var(--s)) 0; border: calc(1.5px * var(--s)) solid #222; border-radius: calc(4px * var(--s)); font: 700 calc(9px * var(--s)) "PT Sans", Arial, sans-serif; color: #fff; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) #000; }
#inventory #inv-bgs { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: calc(2px * var(--s)); }
#inventory #inv-bgs .iv-next { grid-column: 3; grid-row: 1 / 3; }
#inventory #inv-skins { display: grid; grid-template-columns: repeat(8, auto); grid-auto-flow: row; gap: calc(3px * var(--s)); }
#inventory #inv-skins .iv-next { grid-column: 9; grid-row: 1 / 3; }

/* the cells */
#inventory .iv-cells { gap: calc(2px * var(--s)); flex-wrap: nowrap; }
#inventory .iv-cell { width: calc(25px * var(--s)); height: calc(23px * var(--s)); padding: calc(2px * var(--s)); box-sizing: border-box; border: calc(1.5px * var(--s)) solid #4a3214; border-radius: calc(4px * var(--s)); background: #7b5a2b; box-shadow: none; }
#inventory .iv-cell:hover:not(.empty) { transform: scale(1.12); transition-duration: 0.15s; }
#inventory .iv-cell.empty { cursor: default; }
#inventory .iv-cell .x-mark { position: absolute; inset: 22%; }
#inventory .iv-cell .x-mark::before, #inventory .iv-cell .x-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 125%; height: calc(1.6px * var(--s)); margin: calc(-0.8px * var(--s)) 0 0 -62.5%; background: #f00; transform: rotate(45deg); }
#inventory .iv-cell .x-mark::after { transform: rotate(-45deg); }
#inventory .iv-cell.item { border-width: calc(2px * var(--s)); border-color: #4a3214; background: #7b5a2b; } /* (Stick Run's: the brown cell, framed in the item's kind) */
#inventory .iv-cell.item.tier-premium { border-color: var(--tier-premium); }
#inventory .iv-cell.item.tier-rare { border-color: var(--tier-rare); }
#inventory .iv-cell.item.tier-event { border-color: var(--tier-event); }
#inventory .iv-cell.item.tier-ultra { border-color: var(--tier-ultra); }
#inventory .iv-cell.worn { box-shadow: none; } /* (no white ring on what you wear, as in Stick Run) */
#inventory .iv-cell.swatch { width: calc(27px * var(--s)); height: calc(25px * var(--s)); border: calc(1.5px * var(--s)) solid #555; border-radius: calc(4px * var(--s)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--fill), var(--back)); }
#inventory .iv-cell.sky { width: calc(27px * var(--s)); height: calc(25px * var(--s)); border: calc(1.5px * var(--s)) solid #4a3214; background: linear-gradient(180deg, var(--top), var(--bottom)); }
/* Stick Run's paging arrow: an orange triangle with a dark edge */
#inventory .iv-next { width: calc(18px * var(--s)); height: calc(26px * var(--s)); margin-left: calc(8px * var(--s)); background: linear-gradient(180deg, #ffb52e, #d67c00); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 calc(1px * var(--s)) #7a4a00); }

/* the outfit: the runner on the left, each row's name above it */
#inventory .iv-outfit { gap: calc(10px * var(--s)); }
#inventory .iv-fig { width: calc(82px * var(--s)); }
#inventory .iv-fig canvas { width: calc(82px * var(--s)); height: calc(104px * var(--s)); margin-top: calc(10px * var(--s)); filter: none; }
#inventory .iv-fig b { display: none; }
#inventory .iv-rows { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#inventory .iv-rows label { margin: calc(2px * var(--s)) 0 0; text-align: left; line-height: 1.1; }
#inventory .iv-two { display: grid; grid-template-columns: repeat(16, auto); justify-content: start; }
#inventory .iv-two .iv-next { grid-column: 17; grid-row: 1 / 3; }
#inventory .iv-line { align-self: stretch; display: flex; align-items: flex-end; justify-content: space-between; }
#inventory .iv-wings label { text-align: right; }
#inventory .iv-powers .iv-cell { width: calc(36px * var(--s)); height: calc(32px * var(--s)); border: 0; background: none; }
#inventory .iv-powers { gap: calc(14px * var(--s)); padding-left: calc(10px * var(--s)); }
/* Remove Item: Stick Run's bin under the runner */
#inventory .iv-del { display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); margin-top: calc(8px * var(--s)); padding: 0; border: 0; background: none; font: calc(8.5px * var(--s)) / 1.1 "PT Sans", Arial, sans-serif; color: #222; cursor: pointer; }
#inventory .iv-del svg { width: calc(17px * var(--s)); height: calc(20px * var(--s)); transition: transform 0.15s; }
#inventory .iv-del:hover svg { transform: scale(1.15) rotate(-6deg); }
#inventory #inv-pick { z-index: 5; }
/* a player row (the traders and players lists) in that player's skin colours, as Stick Run's listplayer_mc */
.rl-p[style*="--a"] { border-bottom-color: rgba(0, 0, 0, 0.35); background: linear-gradient(180deg, color-mix(in srgb, var(--a), #fff 15%), var(--b)); color: var(--t); }
/* skins as glossy tiles with a black edge */
#inventory .iv-cell.swatch, #inventory .iv-curskin { border: calc(1.5px * var(--s)) solid #111; box-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 45%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--fill), var(--back)); }
/* Stick Run's skins: their own tile (it has its frame) in the inventory and the shop */
#inventory .iv-cell.swatch, #inventory .iv-curskin { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 45%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--fill), var(--back)); }
#shop .item > img.skin-tile { padding: 0; border: 0; background: none; box-shadow: none; object-fit: contain; } /* (the tile has its own frame) */
/* ---- Stick Run's alert box (alert_mc): dark, rounded, a grey edge; the message in white, the dark OK */
.sra-dim { z-index: 9; background: rgba(0, 0, 0, 0.35); }
.sra { display: flex; flex-direction: column; align-items: center; gap: calc(12px * var(--s)); width: calc(326px * var(--s)); min-height: calc(108px * var(--s)); box-sizing: border-box; padding: calc(16px * var(--s)) calc(20px * var(--s)) calc(12px * var(--s)); border: calc(2px * var(--s)) solid #4a4a4a; border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, #2e2e2e, #1b1b1b); box-shadow: 0 calc(4px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, 0.5); animation: sra-in 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes sra-in { from { transform: scale(0.6); opacity: 0; } }
.sra-txt { flex: 1; display: grid; place-items: center; margin: 0; text-align: center; font: 400 calc(var(--fs) * 1px * var(--s)) / 1.2 "PT Sans", Arial, sans-serif; color: #fff; overflow-wrap: anywhere; }
.sra-ok { width: calc(90px * var(--s)); height: calc(29px * var(--s)); padding: 0; border: calc(2px * var(--s)) solid #5a5a5a; border-radius: calc(6px * var(--s)); background: linear-gradient(180deg, #2a2a2a, #1a1a1a); font: normal calc(17px * var(--s)) / 1 "Arial Black", Arial, sans-serif; color: #fff; cursor: pointer; }
.sra-ok:hover { border-color: #888; }
.sra-ok:focus, .sra-ok:focus-visible { outline: none; } /* (no white ring: it's focused when it opens) */
/* how many you have of an item, in the item windows (the Marketplace's, the market rooms', Remove Item) */
.sri-n { position: absolute; right: calc(1px * var(--s)); bottom: calc(-1px * var(--s)); font: normal calc(13px * var(--s)) / 1 "Arial Black", Arial, sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: calc(2.5px * var(--s)) #000; paint-order: stroke fill; pointer-events: none; }
/* skins as Stick Run's Items page shows them: a plain rounded tile (its picture, or its colour, flat) with a thin dark edge */
#inventory .iv-cell.swatch, #inventory .iv-cell.sre-skin, #inventory .iv-curskin { border: calc(1.5px * var(--s)) solid #3a3a3a; border-radius: calc(5px * var(--s)); box-shadow: none; background: linear-gradient(180deg, color-mix(in srgb, var(--fill), #fff 12%), var(--back)); }
#inventory .iv-cell.swatch, #inventory .iv-cell.sre-skin { width: calc(30px * var(--s)); height: calc(30px * var(--s)); padding: 0; }
#inventory .iv-cell.sre-skin { overflow: hidden; background: #222; }
#inventory .iv-cell.sre-skin img { width: 100%; height: 100%; object-fit: cover; }
#inventory .iv-curskin.sre { background: var(--tile) center / cover no-repeat; }
#inventory .iv-power.off { opacity: 0.3; filter: grayscale(0.6); }
/* ---- the inventory: Stick Run's Items page (its picture), everything placed on it by main.js */
#inventory .invcard { padding: 0; overflow: clip; background: rgba(0, 0, 0, 0.45); } /* (the menu's moving sky behind it, shaded, as the running lobby) */
.ivp { position: absolute; overflow: clip; left: 50%; top: 0; width: calc(600px * var(--s)); height: calc(450px * var(--s)); margin-left: calc(-300px * var(--s)); background: url(assets/art/inventory/page.png) center / 100% 100% no-repeat; font-family: "PT Sans", Arial, sans-serif; }
#inv-cells > * { position: absolute; box-sizing: border-box; }
.ivp-x { position: absolute; left: calc(569px * var(--s)); top: calc(3px * var(--s)); width: calc(28px * var(--s)); height: calc(28px * var(--s)); padding: 0; border: 0; background: url(assets/art/inventory/close.png) center / 100% 100% no-repeat; cursor: pointer; transition: transform 0.15s; }
.ivp-x:hover { transform: scale(1.1); }
.ivp-hero { position: absolute; left: calc(-6px * var(--s)); top: calc(186px * var(--s)); width: calc(94px * var(--s)); height: calc(119px * var(--s)); }
.ivp-del { position: absolute; left: calc(25px * var(--s)); top: calc(336px * var(--s)); width: calc(29px * var(--s)); height: calc(43px * var(--s)); padding: 0; border: 0; background: url(assets/art/inventory/del.png) center / 100% 100% no-repeat; cursor: pointer; transition: transform 0.15s; }
.ivp-del:hover { transform: scale(1.1); }
/* the cells: Stick Run's X cell, an item in the brown cell framed in its kind's colour, a sky */
.ivc { display: grid; place-items: center; padding: 0; border: calc(1.5px * var(--s)) solid #4a3214; border-radius: calc(4px * var(--s)); background: #7b5a2b; cursor: pointer; transition: transform 0.12s; }
.ivc.none { border: 0; border-radius: 0; background: url(assets/art/inventory/xcell.png) center / 100% 100% no-repeat; }
.ivc.item { border-width: calc(2px * var(--s)); }
.ivc.item { position: absolute; overflow: hidden; }
.ivc.item img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.ivc.tier-premium { border-color: var(--tier-premium); }
.ivc.tier-rare { border-color: var(--tier-rare); }
.ivc.tier-event { border-color: var(--tier-event); }
.ivc.tier-ultra { border-color: var(--tier-ultra); }
.ivc.sky { border-color: #3a3a3a; background: linear-gradient(180deg, var(--top), var(--bottom)); }
.ivc.sky.big { border-width: calc(2px * var(--s)); cursor: default; }
.ivc:hover:not(.big), .ivs:hover { z-index: 1; transform: scale(1.2) rotate(10deg); }
.ivc:active:not(.big), .ivs:active { transform: scale(0.6); }
/* a skin: Stick Run's skin tile; the colours it doesn't have drawn the same way */
.ivs { padding: 0; border: 0; background: center / 100% 100% no-repeat; cursor: pointer; transition: transform 0.12s; }
.ivs.flat { border: calc(1.6px * var(--s)) solid #555; border-radius: calc(5px * var(--s)); background: linear-gradient(180deg, color-mix(in srgb, var(--fill), #fff 10%), var(--back)); background-clip: padding-box; }
/* the runner's colours, beside the skins: a little stickman in each on a light tile; yours ringed in gold */
.ivr { display: grid; place-items: center; padding: 0; border: calc(1.6px * var(--s)) solid #555; border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, #ffffff, #d9e4ee); cursor: pointer; transition: transform 0.12s; }
.ivr svg { width: 82%; height: 82%; }
.ivr:hover { transform: scale(1.06); }
#inv-cells > .ivr.on { border-color: #ffcf1a; box-shadow: 0 0 0 calc(2px * var(--s)) #ffcf1a, 0 0 calc(8px * var(--s)) rgba(255, 207, 26, 0.8); }
/* Stick Run's paging arrow, the power-ups */
.ivn { padding: 0; border: 0; background: url(assets/art/inventory/next.png) center / 100% 100% no-repeat; cursor: pointer; transition: transform 0.15s; }
.ivn:hover { transform: scale(1.12); }
.ivpw { display: grid; place-items: center; }
.ivpw svg, .ivpw img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ivpw.off { opacity: 0.3; }
/* (no button shadow under the inventory's cells: Stick Run's have none) */
#inv-cells > *, .ivp-x, .ivp-del { box-shadow: none; }
/* Stick Run's staff shields (admin, mod, helper) in place of the level chevron */
.rl-badge { flex: none; width: calc(11px * var(--s)); height: calc(12px * var(--s)); object-fit: contain; }
.pcard[data-badge="admin"] .pc-rank, .pcard[data-badge="mod"] .pc-rank, .pcard[data-badge="helper"] .pc-rank { width: calc(12px * var(--s)); height: calc(13px * var(--s)); margin: 0; border: 0; transform: none; background: center / contain no-repeat; }
.pcard[data-badge="admin"] .pc-rank { background-image: url(assets/art/badges/admin.png); }
.pcard[data-badge="mod"] .pc-rank { background-image: url(assets/art/badges/mod.png); }
.pcard[data-badge="helper"] .pc-rank { background-image: url(assets/art/badges/helper.png); }
/* the player card 25% bigger, with Stick Run's text glows (playerstats_mc) so the stats read over any skin's
   picture: black glow round the yellow and cyan labels, yellow round the score, cyan round Boxjumps, and a
   light glow round the black text */
.pcard { zoom: 1.125; transform-origin: left bottom; }
.pc-name, .pc-lv, .pc-rows, .pc-rows b { text-shadow: 0 0 calc(2px * var(--s)) #fff, 0 0 calc(2px * var(--s)) #fff, 0 0 calc(3px * var(--s)) rgba(255, 255, 255, 0.8); }
.pc-hs, .pc-xp, .pc-bj { text-shadow: 0 0 calc(1.5px * var(--s)) #000, 0 0 calc(1.5px * var(--s)) #000, 0 0 calc(2px * var(--s)) #000; }
.pc-hs b { text-shadow: 0 0 calc(2px * var(--s)) #ff0, 0 0 calc(2px * var(--s)) #ff0; }
.pc-bj b { text-shadow: 0 0 calc(2px * var(--s)) #0ff, 0 0 calc(2px * var(--s)) #0ff; }
.pc-rows b.pc-xpv { text-shadow: 0 0 calc(2px * var(--s)) #fff, 0 0 calc(2px * var(--s)) #fff; }
/* the live skins (src/skinEffects.js: Matrix, Radioactive): drawn behind what's on the box */
:is(.pcard, .rl-p, .rl-slot):is([style*="matrixskin"], [style*="radioskin"], [style*="fireskin"], [style*="classichalloweenskin"], [style*="skins/vip-"], [style*="helperskin"], [style*="donatorskin"], [style*="valueskin"], [style*="skins/stickrun-"]), .mr-card:is([style*="matrixskin"], [style*="radioskin"], [style*="fireskin"], [style*="classichalloweenskin"], [style*="skins/vip-"], [style*="helperskin"], [style*="donatorskin"], [style*="valueskin"], [style*="skins/stickrun-"]) .mr-row { position: relative; isolation: isolate; overflow: hidden; background: #000 !important; }
.skin-fx { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pcard:is([style*="matrixskin"], [style*="radioskin"], [style*="fireskin"], [style*="classichalloweenskin"], [style*="skins/vip-"], [style*="helperskin"], [style*="donatorskin"], [style*="valueskin"]) :is(.pc-name, .pc-lv, .pc-rows, .pc-rows b, .pc-rows b.pc-xpv) { color: #fff; text-shadow: 0 0 calc(2px * var(--s)) #000, 0 0 calc(3px * var(--s)) #000; }
:is(.rl-p, .rl-slot):is([style*="matrixskin"], [style*="radioskin"], [style*="fireskin"], [style*="classichalloweenskin"], [style*="skins/vip-"], [style*="helperskin"], [style*="donatorskin"], [style*="valueskin"]), .mr-card:is([style*="matrixskin"], [style*="radioskin"], [style*="fireskin"], [style*="classichalloweenskin"], [style*="skins/vip-"], [style*="helperskin"], [style*="donatorskin"], [style*="valueskin"]) .mr-row { color: #fff; }

/* number boxes (coins, TC, bets): no up/down arrows, just the number you type */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* the Lucky Wheel's panel: the daily spin, its prizes (each in its segments' colour) and their chances */
.mr-wheel-sub { margin: 0 0 calc(6px * var(--s)); text-align: center; font-weight: 800; font-size: calc(11px * var(--s)); color: #333; }
.mr-wheel-odds { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3px * var(--s)) calc(10px * var(--s)); margin: 0 0 calc(8px * var(--s)); padding: 0; list-style: none; }
.mr-wheel-odds li { display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(2px * var(--s)) calc(6px * var(--s)); border-radius: calc(5px * var(--s)); background: rgba(0, 0, 0, 0.06); font-weight: 700; font-size: calc(10.5px * var(--s)); color: #222; }
.mr-wheel-odds li i { flex: none; width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: calc(2px * var(--s)); border: calc(1px * var(--s)) solid rgba(0, 0, 0, 0.5); }
.mr-wheel-odds li span { flex: 1; display: flex; align-items: center; gap: calc(3px * var(--s)); white-space: nowrap; }
.mr-wheel-odds li span img { width: calc(12px * var(--s)); height: calc(12px * var(--s)); }
.mr-wheel-odds li b { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; color: #c97800; }

/* the achievements window's scrollbar: a slim gold one on a dark track, instead of the browser's own */
.ach-well { scrollbar-width: thin; scrollbar-color: #e0a92a rgba(0, 0, 0, 0.35); }
.ach-well::-webkit-scrollbar { width: calc(9px * var(--s)); }
.ach-well::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ach-well::-webkit-scrollbar-track { margin: calc(4px * var(--s)) 0; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.ach-well::-webkit-scrollbar-thumb { border-radius: 999px; border: calc(1.5px * var(--s)) solid #3a2a06; background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%), #e0a92a; }
.ach-well::-webkit-scrollbar-thumb:hover { background-color: #ffc21a; }
.ach-well::-webkit-scrollbar-corner { background: transparent; }

/* the achievements' pictures: Stick Run Evolution's own tiles (assets/art/achievements), grey until earned */
.ach-ic.ach-art { border: 0; border-radius: 0; background: none; box-shadow: none; width: calc(38px * var(--s)); height: calc(38px * var(--s)); }
.ach-ic.ach-art img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.6); opacity: 0.75; }
.ach-ic.ach-art.got img { filter: drop-shadow(0 0 calc(5px * var(--s)) rgba(255, 200, 40, 0.6)); opacity: 1; }

/* the casino tables' bars, each its own: blackjack on green felt with a wooden chip tray and a
   card-shaped clock; roulette on mahogany and velvet with a gold rail and a little wheel for a clock */
.mr-hud-bj { background: linear-gradient(180deg, rgba(4, 40, 22, 0) 0, rgba(6, 52, 30, 0.72) calc(22px * var(--s)), rgba(8, 64, 36, 0.9) 50%, #062a18 100%); }
.mr-hud-bj::before, .mr-hud-rou::before { content: ""; position: absolute; left: 0; right: 0; top: calc(14px * var(--s)); height: calc(2px * var(--s)); pointer-events: none; }
.mr-hud-bj::before { background: linear-gradient(90deg, transparent, #d8b25a 15%, #fff0b8 50%, #d8b25a 85%, transparent); opacity: 0.8; }
.mr-hud-bj .mr-hud-mid b { color: #fff3c4; letter-spacing: 0.08em; }
.mr-hud-bj .mr-hud-mid small { color: #bfe8c8; }
.mr-hud-bj .mr-hud-bal small { color: #f0d27a; }
.mr-hud-bj .mr-clock { border-radius: calc(6px * var(--s)); width: calc(32px * var(--s)); height: calc(42px * var(--s)); border-color: #f3f3f3; background: linear-gradient(160deg, #ffffff, #dfe7df); box-shadow: 0 0 0 calc(1px * var(--s)) #1d5a34, 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.mr-hud-bj .mr-clock::before { display: none; }
.mr-hud-bj .mr-clock i { inset: calc(2px * var(--s)); border-radius: calc(4px * var(--s)); --cc: #1f9e4e; background: conic-gradient(var(--cc) calc(var(--f) * 1turn), transparent 0); -webkit-mask: none; mask: none; opacity: 0.25; }
.mr-hud-bj .mr-clock.low i { --cc: #ff4a3a; }
.mr-hud-bj .mr-clock b { color: #0c3b20; }
.mr-hud-bj .mr-hud-chips { padding: calc(4px * var(--s)) calc(8px * var(--s)); border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, #3a2210, #5a361a); box-shadow: inset 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.7), 0 0 0 calc(1.5px * var(--s)) #8a6230; }
.mr-hud-rou { background: linear-gradient(180deg, rgba(40, 6, 12, 0) 0, rgba(60, 10, 18, 0.72) calc(22px * var(--s)), rgba(74, 14, 22, 0.9) 50%, #2a0a0e 100%); }
.mr-hud-rou::before { height: calc(3px * var(--s)); background: linear-gradient(180deg, #ffe08a, #b07a1a); box-shadow: 0 calc(1px * var(--s)) 0 #5a3a08; opacity: 0.9; }
.mr-hud-rou .mr-hud-mid b { color: #ffe08a; text-transform: uppercase; }
.mr-hud-rou .mr-hud-mid small { color: #f3c9cf; }
.mr-hud-rou .mr-hud-bal { padding: calc(3px * var(--s)) calc(9px * var(--s)); border-radius: calc(6px * var(--s)); border: calc(1.5px * var(--s)) solid #d8a43a; background: rgba(20, 4, 8, 0.6); justify-self: end; }
.mr-hud-rou .mr-hud-bal small { color: #ffcf6a; }
.mr-hud-rou .mr-clock { border: calc(3px * var(--s)) solid transparent; background: radial-gradient(circle, #1a0a0e 0 55%, transparent 56%) padding-box, repeating-conic-gradient(#c8202e 0 10deg, #17131a 10deg 20deg) border-box; box-shadow: 0 0 0 calc(1.5px * var(--s)) #d8a43a, 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.5); }
.mr-hud-rou .mr-clock::before { display: none; }
.mr-hud-rou .mr-hud-chips { padding: calc(4px * var(--s)) calc(9px * var(--s)); border-radius: 999px; background: radial-gradient(ellipse at 50% 30%, #8e1a2c, #4a0a14); box-shadow: inset 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, 0.6), 0 0 0 calc(1.5px * var(--s)) #d8a43a; }

/* the Rare Slots bar, as a casino console: burgundy and gold, the TC on a lit credit display, a big
   round red SPIN button standing out of the bar, gold auto-spin controls and a gold stop-on-win switch */
.rsw .rsw-bar { position: relative; height: calc(50px * var(--s)); gap: calc(12px * var(--s)); padding: 0 calc(14px * var(--s)); border: calc(2px * var(--s)) solid #f2c94c; border-radius: calc(14px * var(--s)); background: linear-gradient(180deg, #6e1020 0%, #3c0812 55%, #1e0408 100%); box-shadow: 0 0 0 calc(2px * var(--s)) #5a3a08, 0 calc(4px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, 0.55), inset 0 calc(1px * var(--s)) 0 rgba(255, 220, 140, 0.35); color: #ffe9a8; }
.rsw .rsw-sep { display: none; }
.rsw { padding: 0; border: 0; background: none; box-shadow: none; } /* (the console is the bar itself: no frame round it) */
.rsw .rsw-bal { flex: none; display: flex; flex-direction: column; justify-content: center; min-width: calc(108px * var(--s)); height: calc(36px * var(--s)); padding: 0 calc(9px * var(--s)); border: calc(1.5px * var(--s)) solid #a9862c; border-radius: calc(7px * var(--s)); background: linear-gradient(180deg, #0c0204, #22060c); box-shadow: inset 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.8); }
.rsw .rsw-bal small { font: 700 calc(7.5px * var(--s)) "Arial Black", Arial, sans-serif; letter-spacing: 0.12em; color: #c9a24a; }
.rsw .rsw-bal > span { display: flex; align-items: center; gap: calc(5px * var(--s)); }
.rsw .rsw-bal b { font: 400 calc(22px * var(--s)) / 1 "VT323", monospace; color: #ffd84a; text-shadow: 0 0 calc(6px * var(--s)) rgba(255, 196, 40, 0.75); }
.rsw .rsw-bal .mk-coin { width: calc(15px * var(--s)); height: calc(15px * var(--s)); }
.rsw .rsw-rate { flex: 1; text-align: left; line-height: 1.1; font-size: calc(9.5px * var(--s)); color: #e9c97a; }
.rsw .rsw-rate b { font: 900 calc(13px * var(--s)) "Arial Black", Arial, sans-serif; color: #fff; }
.rsw .rsw-btn { border: calc(2px * var(--s)) solid #f2c94c; color: #3a2400; background: linear-gradient(180deg, #ffe58a, #f2b81c 55%, #c98a00); box-shadow: 0 calc(2px * var(--s)) 0 #6a4600; font-family: "Arial Black", Arial, sans-serif; }
.rsw .rsw-spin { width: calc(66px * var(--s)); height: calc(66px * var(--s)); margin: calc(-22px * var(--s)) 0 calc(-6px * var(--s)); border: calc(3px * var(--s)) solid #f2c94c; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #ff8a7a 0%, #e8322a 45%, #9a0e0a 100%); color: #fff; font-size: calc(15px * var(--s)); letter-spacing: 0.04em; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0, 0, 0, 0.6); box-shadow: 0 calc(4px * var(--s)) 0 #5a0806, 0 0 calc(14px * var(--s)) rgba(255, 80, 60, 0.55), inset 0 calc(-4px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, 0.35); transition: transform 0.08s, box-shadow 0.08s; }
.rsw .rsw-spin:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(calc(-1px * var(--s))); }
.rsw .rsw-spin:active:not(:disabled) { transform: translateY(calc(3px * var(--s))); box-shadow: 0 calc(1px * var(--s)) 0 #5a0806, 0 0 calc(8px * var(--s)) rgba(255, 80, 60, 0.4); }
.rsw .rsw-spin:disabled { opacity: 1; filter: grayscale(0.75) brightness(0.7); }
.rsw .rsw-auto { flex-direction: row; gap: calc(6px * var(--s)); }
.rsw .rsw-n { padding: calc(2px * var(--s)); border: calc(1.5px * var(--s)) solid #a9862c; border-radius: 999px; background: #1a0408; }
.rsw .rsw-n button { width: calc(18px * var(--s)); height: calc(18px * var(--s)); border-radius: 50%; background: linear-gradient(180deg, #ffe58a, #c98a00); color: #3a2400; font-weight: 900; }
.rsw .rsw-n b { min-width: calc(22px * var(--s)); font: 400 calc(16px * var(--s)) / 1 "VT323", monospace; color: #ffd84a; }
.rsw .rsw-autobtn { width: calc(78px * var(--s)); height: calc(24px * var(--s)); font-size: calc(10px * var(--s)); white-space: nowrap; }
.rsw .rsw-stop { gap: calc(4px * var(--s)); }
.rsw .rsw-stop small { color: #e9c97a; font-weight: 700; }
.rsw .rsw-switch { background: #1a0408; box-shadow: inset 0 0 0 calc(1.5px * var(--s)) #a9862c; }
.rsw .rsw-switch[aria-pressed="true"] { background: linear-gradient(180deg, #ffe58a, #c98a00); }
.rsw .rsw-leave { width: calc(34px * var(--s)); height: calc(34px * var(--s)); margin-bottom: calc(6px * var(--s)); border: calc(2px * var(--s)) solid #f2c94c; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #8a1a2a, #3c0812); color: #ffe9a8; }
.rsw .rsw-leave:hover { background: radial-gradient(circle at 40% 30%, #b02236, #5a0c1a); }