/* =====================================================================
   RIDGELINE MX - interface styles
   One look everywhere: dark glass cards over the 3D lobby, orange for
   actions, yellow for money and highlights, condensed display type.
   ===================================================================== */
[hidden] { display: none !important; }
:root {
  --accent: #ff5a1f;
  --accent-2: #ff8a3d;
  --gold: #ffd23f;
  --blue: #4f8cff;
  --card: rgba(13, 16, 23, 0.82);
  --card-2: rgba(255, 255, 255, 0.05);
  --card-3: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.24);
  --text: #f4f5f7;
  --muted: #9aa1ad;
  --good: #4ade80;
  --warn: #facc15;
  --bad: #f87171;
  --radius: 10px;
  --font: 'Bahnschrift', 'DIN Alternate', 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Bahnschrift Condensed', 'Bahnschrift', 'Arial Narrow', 'Segoe UI', sans-serif;
  --top: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d12; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
#game { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .card, #ui .sheet, #ui button, #ui input, #ui select, #ui label, #ui header, #ui .popups > *, #ui .center, #ui .overlay { pointer-events: auto; }
#hud, #hud * { pointer-events: none; }

/* ---------- controls ---------- */
button {
  font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text); background: var(--card-3); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 18px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: var(--line-2); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.primary { background: linear-gradient(100deg, var(--accent), #e8340b); border-color: transparent; color: #fff; box-shadow: 0 4px 18px rgba(255, 90, 31, 0.25); }
button.primary:hover:not(:disabled) { filter: brightness(1.12); background: linear-gradient(100deg, var(--accent-2), var(--accent)); }
button.ghost { background: transparent; }
button.danger { color: var(--bad); }
button.danger:hover { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.5); }
button.small { padding: 6px 12px; font-size: 13px; }
button.big { padding: 14px 20px; font-size: 18px; }
button.wide { width: 100%; }
button.link { background: none; border: none; padding: 2px 4px; color: var(--accent-2); font-size: 12px; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input, select {
  font-family: var(--font); font-size: 16px; color: var(--text); background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px;
}
input::placeholder { color: #6b7280; }
select option { background: #15181f; }
code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 5px; background: var(--card-3); font-family: var(--font); font-size: 13px; text-align: center; }
h2, h3, h4 { margin: 0; }
h2 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: 0.02em; text-transform: uppercase; }
h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.hint { color: var(--muted); font-size: 14px; line-height: 1.45; }
.error { color: var(--bad); min-height: 18px; margin-top: 8px; font-weight: 600; font-size: 14px; }
.msg { min-height: 20px; margin: 8px 0; font-weight: 600; font-size: 14px; color: var(--good); }
.msg.bad { color: var(--bad); }
.row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.row.tight { margin-top: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.notice { padding: 16px; border-radius: var(--radius); background: rgba(250, 204, 21, 0.08); border: 1px solid rgba(250, 204, 21, 0.3); line-height: 1.5; }
.field { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.col-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 10px 0; }
.col-field input { font-size: 18px; padding: 11px 13px; }

/* tabs + segmented buttons */
.tabs, .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs { margin-bottom: 14px; }
.tabs button, .seg button { padding: 7px 13px; font-size: 13px; }
.tabs button.sel, .seg button.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.2); color: #fff; }

/* cards + overlay sheets */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.screen { position: absolute; inset: 0; }
.menu-screen { top: var(--top); animation: fadein 0.25s ease-out; }
.overlay { display: flex; align-items: center; justify-content: center; padding: calc(var(--top) + 10px) 16px 16px; background: rgba(6, 8, 12, 0.55); animation: fadein 0.2s ease-out; }
.overlay.dim { padding-top: 16px; }
.sheet { background: rgba(14, 17, 24, 0.94); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); max-height: 100%; overflow: auto; width: min(620px, 100%); animation: rise 0.25s ease-out; }
.sheet.wide { width: min(1040px, 100%); }
.sheet.narrow { width: min(360px, 100%); }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

/* logo + loading */
.logo { font-family: var(--display); font-weight: 700; font-size: 64px; font-style: italic; letter-spacing: 0.02em; line-height: 0.95; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
.logo span, .brand span { color: var(--accent); }
.logo.big { font-size: 86px; }
.logo.small { font-size: 40px; margin-bottom: 16px; text-align: center; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at center, #1c2230 0%, #0b0d12 75%); }
.account-bg { background: radial-gradient(ellipse at 50% 40%, rgba(28, 34, 48, 0.75) 0%, rgba(8, 10, 14, 0.92) 75%); }
.loadbar { width: 260px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.loadbar i { display: block; height: 100%; width: 30%; background: var(--accent); animation: load 1.1s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(330%); } }
#loading-text { color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; }
.account-card { width: min(410px, calc(100% - 32px)); animation: rise 0.3s ease-out; }

/* ---------- top bar ---------- */
#topbar { position: absolute; left: 0; right: 0; top: 0; height: var(--top); display: flex; align-items: center; gap: 22px; padding: 0 18px; background: linear-gradient(180deg, rgba(6, 8, 12, 0.9), rgba(6, 8, 12, 0.55)); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); z-index: 5; }
.brand { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 26px; white-space: nowrap; }
#nav { display: flex; gap: 4px; height: 100%; }
#nav button { background: none; border: none; border-radius: 0; height: 100%; padding: 0 16px; font-size: 15px; color: var(--muted); position: relative; }
#nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
#nav button.sel { color: #fff; }
#nav button.sel::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.badge { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; margin-left: 4px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; white-space: nowrap; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip .dot.good { background: var(--good); box-shadow: 0 0 8px var(--good); } .chip .dot.ok { background: var(--warn); } .chip .dot.bad { background: var(--bad); }
.chip.coins b { color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, var(--gold) 45%, #b8860b); box-shadow: 0 0 6px rgba(255, 210, 63, 0.5); display: inline-block; }
.chip.profile small { color: var(--muted); font-weight: 400; }
.profile-wrap { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: rgba(14, 17, 24, 0.97); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: rise 0.15s ease-out; }
.menu-pop button { text-align: left; background: none; border: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.menu-pop button:hover { background: var(--card-3); }
.menu-stats { padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.menu-stats b { color: var(--text); }

/* ---------- lobby ---------- */
#home { background: linear-gradient(0deg, rgba(5, 6, 10, 0.75) 0%, rgba(5, 6, 10, 0) 26%); }
.party-card { position: absolute; left: 18px; top: 18px; width: 300px; }
.friends-mini { position: absolute; right: 18px; top: 18px; width: 260px; max-height: 40vh; overflow: auto; }
.join-row { display: flex; gap: 8px; margin-top: 10px; }
.code-input { flex: 1; min-width: 0; font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; font-weight: 700; font-family: Consolas, 'Courier New', monospace; }
.party-code-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 10px; }
.party-code-row small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.16em; }
.party-code-row b { font-size: 28px; letter-spacing: 0.22em; color: var(--gold); font-family: Consolas, 'Courier New', monospace; }
.members, .mini-list, .people { list-style: none; padding: 0; margin: 0; }
.members li, .mini-list li, .people li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--card-2); margin-bottom: 6px; font-size: 14px; }
.members li.me { border: 1px solid rgba(255, 90, 31, 0.45); }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { color: var(--muted); display: block; font-size: 12px; }
.pdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4b5563; }
.pdot.online { background: var(--good); } .pdot.party { background: var(--blue); } .pdot.riding { background: var(--accent); }
.pill { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(--muted); white-space: nowrap; }
.pill.ready { background: rgba(74, 222, 128, 0.2); color: var(--good); }
.pill.leader { background: rgba(255, 210, 63, 0.2); color: var(--gold); }
.pill.gone { background: rgba(248, 113, 113, 0.2); color: var(--bad); }
.status { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); color: var(--muted); text-transform: uppercase; }
.status.ok { background: rgba(74, 222, 128, 0.18); color: var(--good); }
.status.warn { background: rgba(250, 204, 21, 0.18); color: var(--warn); }
.status.bad { background: rgba(248, 113, 113, 0.18); color: var(--bad); }
.ping { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ping.good { color: var(--good); } .ping.ok { color: var(--warn); } .ping.bad { color: var(--bad); }
.empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }

.play-dock { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 44px); }
.dock-sel { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; align-items: baseline; text-align: left; text-transform: none; letter-spacing: 0; padding: 12px 74px 12px 18px; background: var(--card); backdrop-filter: blur(10px); min-width: 250px; position: relative; }
.dock-sel small { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; }
.dock-sel b { font-size: 17px; }
.dock-sel .edit { position: absolute; right: 12px; top: 8px; font-style: normal; font-size: 11px; color: var(--accent-2); letter-spacing: 0.1em; text-transform: uppercase; }
.play-btn { font-family: var(--display); font-size: 40px; font-style: italic; letter-spacing: 0.04em; padding: 10px 52px; border: none; color: #fff; background: linear-gradient(100deg, var(--accent), #e02f06); box-shadow: 0 8px 30px rgba(255, 90, 31, 0.35); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.play-btn:hover:not(:disabled) { filter: brightness(1.12); background: linear-gradient(100deg, var(--accent-2), var(--accent)); }
.play-btn.ready { background: linear-gradient(100deg, #22c55e, #15803d); box-shadow: 0 8px 30px rgba(34, 197, 94, 0.35); }
.dock-note { flex-basis: 100%; text-align: right; color: #e5e7eb; font-size: 14px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); min-height: 18px; }

/* name tags over vehicles in the lobby */
#stage-tags { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.stage-tag { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; transition: opacity 0.3s; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.stage-tag .tag-name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; }
.stage-tag .tag-name small { font-size: 11px; color: var(--accent-2); letter-spacing: 0.15em; vertical-align: middle; }
.stage-tag .tag-sub { font-size: 12px; color: #d1d5db; letter-spacing: 0.06em; }
.stage-tag .tag-row { display: flex; gap: 6px; justify-content: center; margin-top: 3px; }
.stage-tag .crown { color: var(--gold); font-style: normal; margin-right: 4px; }
.stage-tag.me .tag-name { color: #fff; }

/* ---------- match setup ---------- */
.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mode { text-align: left; text-transform: none; letter-spacing: 0; padding: 14px; min-height: 112px; display: flex; flex-direction: column; gap: 6px; }
.mode b { font-family: var(--display); font-size: 21px; text-transform: uppercase; letter-spacing: 0.02em; }
.mode span { font-weight: 400; color: var(--muted); font-size: 13px; line-height: 1.35; }
.mode.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.16); }
.mode:disabled { opacity: 0.35; }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.track-head h4 { margin-bottom: 8px; }
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.track-card { text-align: left; text-transform: none; letter-spacing: 0; padding: 10px; display: flex; gap: 10px; align-items: flex-start; }
.track-card canvas { flex: none; width: 74px; height: 74px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; }
.track-card b { display: block; font-size: 16px; margin-bottom: 4px; }
.track-card p { margin: 3px 0 0; font-weight: 400; color: var(--muted); font-size: 12px; line-height: 1.35; }
.track-card.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.14); }
.diff { display: inline-block; font-size: 10px; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.diff.Easy { background: rgba(74, 222, 128, 0.18); color: var(--good); }
.diff.Medium { background: rgba(79, 140, 255, 0.2); color: #93b4ff; }
.diff.Hard { background: rgba(255, 138, 61, 0.2); color: var(--accent-2); }
.diff.Expert { background: rgba(248, 113, 113, 0.2); color: var(--bad); }
.diff.Freestyle { background: rgba(192, 132, 252, 0.2); color: #d8b4fe; }
.options { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; min-height: 40px; }
.options .sections { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.options .sections button { font-size: 13px; padding: 7px 11px; text-transform: none; letter-spacing: 0; }
.options .sections button.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.18); }

/* ---------- garage ---------- */
#garage { background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%); }
.garage-list { position: absolute; left: 18px; top: 18px; bottom: 18px; width: 300px; display: flex; flex-direction: column; gap: 12px; }
.cats button { flex: 1 1 auto; font-size: 12px; padding: 7px 8px; }
.vehicle-cards { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.vcard { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; text-transform: none; letter-spacing: 0; padding: 11px 13px; position: relative; overflow: hidden; }
.vcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--swatch, #666); }
.vcard b { font-size: 16px; }
.vcard small { color: var(--muted); font-weight: 400; font-size: 12px; }
.vcard .tag { grid-row: span 2; align-self: center; font-size: 11px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 9px; background: var(--card-3); color: var(--muted); }
.vcard .tag.on { background: rgba(255, 90, 31, 0.2); color: var(--accent-2); }
.vcard .tag.lock { background: rgba(255, 210, 63, 0.14); color: var(--gold); }
.vcard.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.12); }
.vcard.locked b { color: #c3c7cf; }
.garage-info { position: absolute; right: 18px; top: 18px; bottom: 18px; width: 340px; overflow: auto; }
.tier { display: inline-block; font-size: 11px; letter-spacing: 0.16em; padding: 3px 9px; border-radius: 10px; background: var(--card-3); color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.tier.Works { background: rgba(255, 210, 63, 0.18); color: var(--gold); } .tier.Pro { background: rgba(79, 140, 255, 0.2); color: #93b4ff; }
.desc { color: #d1d5db; line-height: 1.5; font-size: 14px; margin: 8px 0 12px; }
.stat { margin: 9px 0; }
.stat .lbl { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.stat .lbl em { font-style: normal; font-weight: 700; }
.stat .lbl em.up { color: var(--good); } .stat .lbl em.down { color: var(--bad); }
.stat .bar { height: 7px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; display: flex; }
.stat .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 0.35s ease; }
.stat .bar i.plus { background: var(--good); }
.stat .bar i.ghost { background: rgba(255, 255, 255, 0.35); }
.ups { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ups span { font-size: 12px; padding: 4px 9px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); color: var(--muted); }
.ups span b { color: var(--good); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 3px solid transparent; position: relative; }
.swatch.combo { width: 46px; border-radius: 12px; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.swatch.locked { opacity: 0.45; }
.swatch.locked::after { content: '🔒'; position: absolute; right: -6px; top: -8px; font-size: 12px; }
.g-action { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.view-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); font-size: 13px; letter-spacing: 0.08em; text-shadow: 0 2px 6px #000; }

/* ---------- shop ---------- */
#shop { background: linear-gradient(90deg, rgba(5, 6, 10, 0.7) 0%, rgba(5, 6, 10, 0.2) 50%, rgba(5, 6, 10, 0) 70%); }
.shop-panel { position: absolute; left: 18px; top: 18px; bottom: 18px; width: min(560px, 48vw); display: flex; flex-direction: column; }
.shop-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.shop-top .tabs { margin: 0; }
#shop-sub { margin: 10px 0 2px; }
#shop-sub:empty { display: none; }
.shop-grid { margin-top: 12px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; padding-right: 2px; }
.item { text-align: left; text-transform: none; letter-spacing: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 12px; }
.item .thumb { height: 74px; position: relative; background: linear-gradient(135deg, var(--c1, #333) 50%, var(--c2, #555) 50%); }
.item .thumb .big { position: absolute; left: 10px; bottom: 6px; font-family: var(--display); font-size: 26px; font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.item .info { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.item .info b { font-size: 14px; }
.item .info small { color: var(--muted); font-weight: 400; font-size: 12px; }
.item .price { color: var(--gold); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.item .price.owned { color: var(--good); }
.item .price.need { color: var(--muted); }
.item.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.shop-detail { position: absolute; right: 18px; bottom: 18px; width: 340px; }
.shop-detail .price-big { font-size: 28px; font-weight: 700; color: var(--gold); display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.shop-detail .lock-note { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ---------- friends ---------- */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }
.friends-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.people li .acts { display: flex; gap: 6px; flex: none; }
.people li .acts button { padding: 5px 10px; font-size: 12px; }
#friend-results:empty { display: none; }
#friend-results { margin-bottom: 8px; }

/* ---------- settings ---------- */
.setting { display: grid; grid-template-columns: 240px 1fr 80px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.setting > span:first-child { color: #d1d5db; }
.setting .val { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.setting input[type=range] { width: 100%; accent-color: var(--accent); }
.region-list { display: grid; gap: 8px; margin: 6px 0 12px; }
.region { display: grid; grid-template-columns: 1fr auto; text-align: left; text-transform: none; letter-spacing: 0; padding: 12px 14px; }
.region small { color: var(--muted); font-weight: 400; }
.region.sel { border-color: var(--accent); background: rgba(255, 90, 31, 0.12); }
.server-box input { width: min(420px, 100%); margin: 6px 6px 6px 0; }
.keys { width: 100%; border-collapse: collapse; }
.keys td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; }
.keys td:first-child { white-space: nowrap; width: 240px; }

/* ---------- popups (invites, notices) ---------- */
.popups { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--top) + 12px); display: flex; flex-direction: column; gap: 10px; z-index: 20; width: 360px; max-width: calc(100% - 36px); }
.popup { background: rgba(14, 17, 24, 0.96); border: 1px solid var(--line-2); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: slidein 0.25s ease-out; font-size: 14px; }
.popup b { color: #fff; }
.popup .row { margin-top: 10px; }
.popup.good { border-left-color: var(--good); } .popup.bad { border-left-color: var(--bad); }
@keyframes slidein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; font-family: var(--font); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
/* two stacks in the bottom corners: lap + time over the minimap (left),
   position + standings over the speedometer (right) */
.hud-left, .hud-right { position: absolute; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.hud-left { left: 14px; align-items: flex-start; }
.hud-right { right: 14px; align-items: flex-end; }
.hud-tl, .hud-tr { background: linear-gradient(180deg, rgba(14, 17, 24, 0.72), rgba(14, 17, 24, 0.5)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; padding: 5px 10px 6px; backdrop-filter: blur(4px); }
.hud-tl { min-width: 130px; border-left: 3px solid var(--accent); }
.hud-tr { min-width: 110px; border-right: 3px solid var(--accent); text-align: right; }
.hud-lap { font-family: var(--display); font-weight: 700; font-size: 15px; font-style: italic; letter-spacing: 0.06em; color: var(--accent-2); }
.hud-time { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hud-sub { font-size: 12px; color: #cbd0d8; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hud-sub:empty { display: none; }
.hud-pos { font-family: var(--display); font-weight: 700; font-size: 34px; font-style: italic; line-height: 1; }
.hud-pos small { font-size: 17px; color: #aeb4bf; }
.standings { list-style: none; margin: 3px 0 0; padding: 0; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.standings li { padding: 0 5px; border-radius: 4px; }
.standings li.me { color: var(--gold); font-weight: 700; background: rgba(255, 210, 63, 0.12); }
.hud-center.small { font-size: 44px; white-space: nowrap; }
.hud-center { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 120px; font-style: italic; color: #fff; text-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); }
.toasts { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast { background: rgba(10, 12, 18, 0.72); padding: 8px 18px; border-radius: 8px; font-size: 19px; font-weight: 700; letter-spacing: 0.03em; animation: pop 0.2s ease-out; white-space: nowrap; }
.toast.good { color: var(--good); } .toast.bad { color: var(--bad); } .toast.coins { color: var(--gold); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* live trick readout while in the air, popup on landing */
.hud-trick { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; color: #fff; white-space: nowrap; }
.trick-pop { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); text-align: center; }
.trick-pop .tp { animation: trickin 1.9s ease-out forwards; }
.trick-pop .tp-name { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 38px; letter-spacing: 0.02em; color: #fff; }
.trick-pop .tp-pts { font-size: 26px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.trick-pop .tp-land { font-size: 15px; letter-spacing: 0.2em; font-weight: 700; }
.trick-pop .Perfect { color: var(--good); } .trick-pop .Clean { color: #93c5fd; } .trick-pop .Sketchy { color: var(--warn); }
.trick-pop .combo { font-size: 18px; color: var(--accent-2); font-weight: 700; }
@keyframes trickin { 0% { opacity: 0; transform: scale(0.7); } 10% { opacity: 1; transform: scale(1.08); } 18% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
/* both dials are canvases drawn every frame in ui.js (2x pixels for sharp edges) */
#minimap { width: 150px; height: 150px; border-radius: 50%; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
.hud-speedo { width: 170px; height: 170px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
.hud-bl { position: absolute; left: 180px; bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.08em; }
.fps { position: absolute; right: 18px; top: 14px; font-size: 13px; background: rgba(0, 0, 0, 0.5); padding: 3px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.netinfo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 13px; background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 12px; display: flex; gap: 8px; align-items: center; }

/* name tags over the other riders while riding */
#name-tags { position: absolute; inset: 0; overflow: hidden; }
.ntag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 10px; background: rgba(8, 10, 14, 0.55); color: #fff; text-shadow: none; will-change: transform; }
.ntag i { font-style: normal; color: var(--gold); margin-right: 5px; }
.ntag.friend { background: rgba(37, 99, 235, 0.55); }
.ntag.staff { background: none; padding: 0; text-align: center; }
.ntag.staff > i, .ntag.staff { text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.staff-tags { display: flex; gap: 4px; justify-content: center; margin-bottom: 3px; }
.stag { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 5px; color: #fff; text-shadow: none; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
.stag.dev { background: linear-gradient(135deg, #16a34a, #0d9488); }
.stag.creator { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.stage-tag .stag { font-size: 12px; }

/* results */
.results { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.results th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 10px; }
.results td { padding: 9px 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.results tr.me td { color: var(--gold); font-weight: 700; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
  .friends-mini { display: none; }
  #nav button { padding: 0 10px; font-size: 13px; }
  .brand { font-size: 20px; }
}
@media (max-width: 820px) {
  :root { --top: 104px; }
  #topbar { flex-wrap: wrap; height: var(--top); gap: 0 10px; padding: 6px 12px; align-content: center; }
  #nav { order: 3; width: 100%; height: 44px; overflow-x: auto; }
  .modes { grid-template-columns: repeat(2, 1fr); }
  .friends-cols { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 1fr 1fr 56px; }
  .party-card { width: auto; right: 12px; left: 12px; top: 12px; }
  .play-dock { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .dock-sel { flex: 1; min-width: 0; }
  .play-btn { font-size: 30px; padding: 10px 30px; }
  .garage-list { width: auto; left: 12px; right: 12px; top: 12px; bottom: auto; max-height: 34vh; }
  .garage-info { width: auto; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 38vh; }
  .shop-panel { width: auto; left: 12px; right: 12px; bottom: 44vh; }
  .shop-detail { width: auto; left: 12px; right: 12px; bottom: 12px; }
  .view-hint { display: none; }
  .logo { font-size: 46px; } .logo.big { font-size: 54px; }
  .hud-speedo { width: 130px; height: 130px; }
  #minimap { width: 110px; height: 110px; }
  .hud-tl { min-width: 0; } .hud-time { font-size: 17px; } .hud-sub { font-size: 11px; }
  .hud-pos { font-size: 26px; } .standings { font-size: 11px; }
  .hud-bl, .chip.profile small, #region-text { display: none; }
}
@media (max-height: 640px) { .party-card { max-height: 50vh; overflow: auto; } }
@media (max-height: 720px) {
  .hud-speedo { width: 140px; height: 140px; } #minimap { width: 125px; height: 125px; }
  .hud-pos { font-size: 28px; } .standings { font-size: 11px; line-height: 1.45; } .hud-time { font-size: 18px; }
  .hud-bl { left: 152px; }
}

/* ---------- item shop (battle-royale style) ---------- */
.shop-panel { width: min(760px, 58vw); }
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.shop-head h2 { font-size: 40px; font-style: italic; }
.shop-head small { color: var(--muted); }
.shop-head .reset { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.shop-head .reset b { color: #fff; font-size: 16px; margin-left: 4px; }
.fsec { margin: 18px 0 10px; font-family: var(--display); font-size: 22px; font-style: italic; color: #fff; letter-spacing: 0.04em; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 190px; gap: 10px; }
.fgrid.featured { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: 290px; }
.fcard { position: relative; padding: 0; overflow: hidden; border-radius: 12px; border: 2px solid rgba(255,255,255,0.15); text-transform: none; letter-spacing: 0; display: block; text-align: left; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.fcard:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.fcard.sel { border-color: #fff; box-shadow: 0 0 0 3px var(--gold); }
.fcard.Common { background: radial-gradient(circle at 50% 40%, #8b93a1, #3a4150 70%); }
.fcard.Uncommon { background: radial-gradient(circle at 50% 40%, #7fd34e, #1f5f1a 72%); }
.fcard.Rare { background: radial-gradient(circle at 50% 40%, #4fc3ff, #173c8f 72%); }
.fcard.Epic { background: radial-gradient(circle at 50% 40%, #c56bff, #4a1480 72%); }
.fcard.Legendary { background: radial-gradient(circle at 50% 40%, #ffb84d, #9a3b0c 72%); }
.fcard img { position: absolute; left: 50%; top: 44%; width: 112%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35)); }
.fcard.big img { width: 125%; top: 42%; }
.fcard .rar { position: absolute; left: 8px; top: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.fsec-note { font-family: var(--font); font-style: normal; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; margin-left: 8px; }
.fcard.bundle .rar { background: linear-gradient(135deg, #f59e0b, #ec4899); padding: 2px 7px; border-radius: 5px; color: #fff; }
.fcard .fprice s, .price-big s { color: var(--muted); font-size: 0.8em; margin-right: 4px; }
.bundle-list { margin: 8px 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.bundle-list .owned { font-size: 11px; }
.fcard .big-l { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 64px; font-style: italic; color: rgba(255,255,255,0.9); }
.fcard .loading-img { position: absolute; left: 50%; top: 42%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: spin 0.9s linear infinite; }
.fcard .fname { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; background: linear-gradient(0deg, rgba(5,6,10,0.92) 45%, rgba(5,6,10,0)); display: flex; flex-direction: column; gap: 1px; }
.fcard .fname b { font-family: var(--display); font-size: 18px; font-style: italic; text-transform: uppercase; line-height: 1.05; }
.fcard.big .fname b { font-size: 24px; }
.fcard .fname small { font-size: 11px; color: #cbd5e1; letter-spacing: 0.04em; }
.fcard .fprice { margin-top: 4px; display: flex; align-items: center; gap: 5px; font-weight: 800; color: #fff; font-size: 15px; }
.fcard .fprice .owned { color: var(--good); letter-spacing: 0.12em; font-size: 12px; }
.fcard .fprice .need { color: #cbd5e1; font-size: 12px; }
.fcard.is-owned::after { content: '✓'; position: absolute; right: 8px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #052e16; font-weight: 900; display: grid; place-items: center; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) { .shop-panel { width: auto; } .fgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 160px; } .fgrid.featured { grid-auto-rows: 220px; } }
.shop-grid { display: block; margin-top: 0; }

/* ---------- casino ---------- */
.casino-sheet { width: min(1000px, 100%); }
.casino-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cgame { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cgame h3 { font-family: var(--display); font-size: 24px; font-style: italic; color: #fff; letter-spacing: 0.04em; }
.rl-wheel { height: 130px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle, #1f5132 0%, #0b2416 75%); border: 2px solid #b8860b; }
.rl-ball { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 44px; font-weight: 700; color: #fff; border: 4px solid rgba(255,255,255,0.85); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.rl-ball.red { background: #c81e1e; } .rl-ball.black { background: #18181b; } .rl-ball.green { background: #15803d; }
.rl-ball.land { animation: pop 0.35s ease-out; }
.hist { display: flex; gap: 5px; flex-wrap: wrap; min-height: 24px; }
.rh { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.rh.red { background: #c81e1e; } .rh.black { background: #27272a; } .rh.green { background: #15803d; }
.ch { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 800; background: rgba(248,113,113,0.2); color: var(--bad); }
.ch.hi { background: rgba(74,222,128,0.2); color: var(--good); }
.picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pk { padding: 9px 6px; font-size: 14px; }
.pk.red { background: #991b1b; } .pk.black { background: #18181b; } .pk.green { background: #166534; }
.pk.sel, #rl-num.sel { outline: 3px solid var(--gold); outline-offset: 1px; }
#rl-num { width: 100%; text-align: center; }
.bet-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bet-row input { width: 120px; font-weight: 700; }
.cr-box { position: relative; border-radius: 12px; overflow: hidden; background: #0b0f17; border: 1px solid var(--line); }
.cr-box canvas { display: block; width: 100%; height: 200px; }
.cr-mult { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--display); font-size: 52px; font-weight: 700; color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,0.7); pointer-events: none; }
.cr-mult.dead { color: var(--bad); font-size: 40px; } .cr-mult.won { color: var(--good); }
#cr-go.cash { background: linear-gradient(100deg, #22c55e, #15803d); }
.cmsg { min-height: 20px; font-weight: 700; font-size: 14px; }
.cmsg.good { color: var(--good); } .cmsg.bad { color: var(--bad); }
.adm td { vertical-align: middle; }
.adm-acts { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.adm-set { width: 110px; padding: 5px 8px; font-size: 13px; }
#admin { z-index: 30; }
.chat { position: fixed; left: 14px; bottom: 14px; z-index: 25; width: min(340px, calc(100vw - 28px)); background: rgba(8, 10, 14, 0.62); border-radius: 12px; padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); transition: background 0.15s; }
.chat.off { display: none; }
.chat.typing { background: rgba(8, 10, 14, 0.88); }
/* lobby: just a small button until you press T / click it */
.chat.mini { width: auto; padding: 6px 12px; cursor: pointer; }
.chat.mini .chat-log, .chat.mini .chat-row, .chat.mini #chat-tabs { display: none; }
.chat.mini .chat-head { margin: 0; gap: 10px; }
.chat.mini .chat-title { display: inline !important; }
.chat-new { background: var(--accent); color: #fff; border-radius: 9px; padding: 1px 7px; margin-right: 6px; font-size: 11px; }
/* bad words: blurred, not removed */
.blur { filter: blur(4px); user-select: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; margin-bottom: 6px; }
.chat-key { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.chat-key kbd { font: inherit; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; padding: 0 5px; margin-right: 3px; color: #fff; }
.chat.typing .chat-key { visibility: hidden; }
.chat-log { display: flex; flex-direction: column; gap: 3px; height: 160px; overflow-y: auto; scrollbar-width: thin; }
.chat-row { display: flex; gap: 6px; margin-top: 6px; }
/* while riding: top-left, smaller and see-through until you type */
.chat.riding { bottom: auto; top: 14px; width: min(300px, calc(100vw - 28px)); background: rgba(8, 10, 14, 0.3); box-shadow: none; }
.chat.riding.typing { background: rgba(8, 10, 14, 0.82); }
.chat.riding .chat-log { height: 118px; }
.chat.riding:not(.typing) .chat-row { display: none; }
.chat.riding .cm { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.chat-tabs { display: flex; gap: 4px; }
.chat-tabs button { position: relative; padding: 3px 12px; font-size: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.chat-tabs button.sel { background: var(--accent); color: #fff; }
.chat-tabs i { position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
#chat-tabs:not([hidden]) + .chat-title { display: none; }
.cm.pt b { color: var(--good); }
.cm.pt.me b { color: #60a5fa; }
.cm > i { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; color: var(--good); border: 1px solid rgba(74, 222, 128, 0.6); border-radius: 4px; padding: 0 4px; margin-right: 5px; vertical-align: 1px; }
.chat-log .cm { border-radius: 6px; padding: 3px 6px; font-size: 13px; line-height: 1.35; word-wrap: break-word; }
.chat-log .cm b { color: var(--gold); margin-right: 5px; }
.chat-log .cm.me b { color: #60a5fa; }
.chat-log .cm.sys { color: #9ca3af; font-style: italic; }
.chat-log .cm .stag { font-size: 9px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; }
.chat.admin .cm { cursor: pointer; }
.chat-row input { flex: 1; padding: 6px 9px; font-size: 13px; }
.adm-tools { display: grid; gap: 8px; margin: 6px 0 12px; }
.adm-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-stats span { background: rgba(255,255,255,0.07); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.adm-stats b { color: var(--gold); }
.adm-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-row input:not([type]), .adm-row select { padding: 6px 9px; font-size: 13px; }
.adm-row label { display: inline-flex; gap: 5px; align-items: center; font-size: 14px; margin-right: 10px; cursor: pointer; }
.adm-info td { background: rgba(255, 255, 255, 0.04); }
.adm-detail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.adm-detail span { background: rgba(255,255,255,0.07); border-radius: 8px; padding: 4px 9px; font-size: 13px; }
.adm-detail b { color: var(--gold); }
.adm-info .adm-row { margin: 5px 0; }
.adm-log { max-height: 220px; overflow: auto; }
.adm-logt td { padding: 4px 8px; font-size: 13px; }
.adm-row .lbl { font-weight: 800; min-width: 92px; color: var(--gold); font-size: 13px; }
.adm tr.banned td:first-child b { color: var(--bad); text-decoration: line-through; }
#announce { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -140%); z-index: 60; max-width: min(720px, 92vw);
  background: linear-gradient(90deg, #7c2d12, #b45309); color: #fff; border-radius: 10px; padding: 10px 22px; font-size: 18px; font-weight: 800;
  text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.5); transition: transform 0.35s ease; pointer-events: none; }
#announce small { display: block; font-size: 11px; letter-spacing: 0.1em; opacity: 0.85; }
#announce.show { transform: translate(-50%, 0); }
#event-chip { position: fixed; left: 50%; top: calc(var(--top) + 10px); transform: translateX(-50%); z-index: 30; pointer-events: none; padding: 5px 14px; border-radius: 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; color: #fff; background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(219, 39, 119, 0.85)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
#event-chip.riding { top: 44px; }
#event-chip b { font-size: 10px; letter-spacing: 0.16em; margin-right: 6px; color: var(--gold); }
#event-chip span { margin-left: 8px; font-variant-numeric: tabular-nums; opacity: 0.85; }
@media (max-width: 820px) { .casino-grid { grid-template-columns: 1fr; } }
.track-card .rec { display: inline-block; margin-left: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 6px; background: rgba(255,255,255,0.12); color: #e5e7eb; }

/* ---------- roomier layout ---------- */
:root { --top: 70px; }
body { font-size: 15px; }
.card { padding: 22px 24px; border-radius: 16px; }
.sheet { padding: 30px 36px; }
.sheet.wide { width: min(1120px, 100%); }
.sheet-head { margin-bottom: 20px; }
h4 { margin: 22px 0 10px; }
#topbar { gap: 26px; padding: 0 22px; }
#nav button { padding: 0 18px; font-size: 15px; }
.party-card { left: 24px; top: 24px; width: 340px; }
.friends-mini { right: 24px; top: 24px; width: 290px; }
.play-dock { right: 28px; bottom: 28px; gap: 14px; }
.members li, .mini-list li, .people li { padding: 11px 13px; margin-bottom: 8px; }
.modes { gap: 14px; }
.mode { padding: 18px; min-height: 130px; }
.track-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.track-card { padding: 14px; gap: 14px; }
.track-card canvas { width: 84px; height: 84px; }
.options { margin-top: 22px; gap: 16px 28px; }
.garage-list { left: 24px; top: 24px; bottom: 24px; width: 340px; gap: 16px; }
.garage-info { right: 24px; top: 24px; bottom: 24px; width: 380px; }
.vehicle-cards { gap: 10px; }
.vcard { padding: 14px 16px; }
.stat { margin: 12px 0; }
.swatches { gap: 10px; }
.shop-panel { left: 24px; top: 24px; bottom: 24px; }
.fgrid { gap: 14px; }
.shop-detail { right: 24px; bottom: 24px; width: 360px; }
.setting { padding: 13px 0; }
.keys td { padding: 10px 10px; }
.cgame { padding: 20px; gap: 14px; }
.casino-grid { gap: 20px; }
@media (max-width: 1100px) { #nav button { padding: 0 11px; font-size: 13px; } }
@media (max-width: 820px) { :root { --top: 110px; } .party-card, .garage-list, .garage-info, .shop-panel, .shop-detail { left: 12px; right: 12px; } }

/* garage upgrades */
.ups { display: block; margin-top: 6px; }
.uprow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.upname { font-weight: 700; font-size: 14px; display: flex; flex-direction: column; }
.upname small { color: var(--muted); font-weight: 400; font-size: 12px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 9px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.12); transform: skewX(-12deg); }
.pips i.on { background: linear-gradient(180deg, var(--gold), var(--accent)); }
.uprow button { display: inline-flex; align-items: center; gap: 5px; }
.maxed { font-size: 12px; font-weight: 800; color: var(--good); letter-spacing: 0.1em; }
.uprow span { border: none; background: none; padding: 0; }
.uprow .upname, .uprow .pips { color: var(--text); }

/* =====================================================================
   CALM THEME - quiet, tidy menus: flat surfaces, soft accent, no glow,
   sentence-case type and room to breathe. Overrides the louder styles above.
   ===================================================================== */
:root {
  --accent: #d9825b; --accent-2: #e8a17f; --gold: #e6c36a; --blue: #7aa2d6;
  --card: rgba(22, 25, 31, 0.92); --card-2: rgba(255, 255, 255, 0.04); --card-3: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --text: #eceae6; --muted: #9a9ca3; --good: #7cc49a; --warn: #e3c16f; --bad: #e08a86;
  --radius: 12px; --top: 68px;
}
button { text-transform: none; letter-spacing: 0.01em; font-weight: 600; border-radius: 10px; }
button.primary, button.primary:hover:not(:disabled) { background: var(--accent); filter: none; box-shadow: none; }
button.primary:hover:not(:disabled) { background: var(--accent-2); }
.coin { box-shadow: none; background: radial-gradient(circle at 35% 35%, #f6e7b8, var(--gold) 50%, #a88a3c); }
.chip .dot.good { box-shadow: none; }
h2 { text-transform: none; font-family: var(--font); font-weight: 600; font-size: 26px; letter-spacing: 0; }
h3, h4 { letter-spacing: 0.08em; }
h4 { margin: 22px 0 10px; }
.card { border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.sheet { background: rgba(20, 23, 29, 0.97); border-radius: 18px; padding: 32px 36px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.sheet-head { margin-bottom: 22px; }
.overlay { background: rgba(8, 10, 14, 0.6); }
.tabs button.sel, .seg button.sel, .mode.sel, .track-card.sel, .region.sel, .vcard.sel, .options .sections button.sel { border-color: var(--accent); background: rgba(217, 130, 91, 0.14); }
.seg { gap: 8px; }
.seg.mini button { padding: 5px 10px; font-size: 12px; }
#topbar { background: rgba(14, 16, 21, 0.92); gap: 28px; padding: 0 24px; }
.brand { font-style: normal; font-family: var(--font); font-weight: 700; font-size: 20px; letter-spacing: 0.12em; }
#nav button { text-transform: none; font-size: 15px; padding: 0 14px; }
#nav button.sel::after { height: 2px; left: 14px; right: 14px; }
.top-right { gap: 10px; }
.logo { font-style: normal; text-shadow: none; }
.play-btn { font-family: var(--font); font-style: normal; font-weight: 700; font-size: 30px; letter-spacing: 0.08em; padding: 12px 56px; background: var(--accent); box-shadow: none; border-radius: 14px; }
.play-btn:hover:not(:disabled) { background: var(--accent-2); filter: none; }
.play-btn.ready { background: #4f9a6e; box-shadow: none; }
.mode b, .hud-lap, .hud-pos, .trick-pop .tp-name, .hud-center { font-style: normal; }
.mode b { text-transform: none; font-family: var(--font); font-size: 18px; }
.modes, .track-grid { gap: 14px; }
.stat .bar i { background: var(--accent); }
.pips i { transform: none; border-radius: 3px; }
.pips i.on { background: var(--accent); }
.vcard { border-radius: 12px; }
.vcard.locked { opacity: 0.75; }
.vcard .tag.lock { display: inline-flex; align-items: center; gap: 4px; }
.vcard .tag.lock .coin { width: 11px; height: 11px; }

/* level chip */
.chip.level { gap: 8px; }
.chip.level b { color: var(--text); font-variant-numeric: tabular-nums; }
.xpbar { display: inline-block; width: 54px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ntag .lv { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent-2); margin-right: 6px; }

/* garage: equip button above the skins, skins as labelled tiles in pages */
.g-action { margin: 22px 0 6px; }
.g-action button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.g-skins { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-skinhead { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#g-skinlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#g-skinlist .swatch { width: auto; height: 58px; border-radius: 10px; border: 2px solid transparent; overflow: hidden; }
#g-skinlist .swatch span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; background: rgba(10, 12, 16, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#g-skinlist .swatch.sel { border-color: var(--text); box-shadow: none; }
#g-skinlist .hint { grid-column: 1 / -1; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.pager:empty { display: none; }

/* shop: Featured + Daily only, roomy cards in calm colours */
.shop-panel { width: min(640px, 52vw); padding: 28px; }
.shop-grid { display: block; margin-top: 0; padding-right: 6px; }
.shop-head { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.shop-head h2 { font-size: 28px; font-style: normal; }
.shop-head .reset { letter-spacing: 0.02em; font-size: 13px; }
.fsec { font-family: var(--font); font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 26px 0 14px; }
.fgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 210px; gap: 18px; }
.fgrid.featured { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 270px; }
.fcard { border: 1px solid var(--line); border-radius: 14px; }
.fcard:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.fcard.sel { border-color: var(--text); box-shadow: none; }
.fcard.Common, .fcard.Uncommon { background: linear-gradient(180deg, #3a3f48, #24272e); }
.fcard.Rare { background: linear-gradient(180deg, #3a5470, #222c3a); }
.fcard.Epic { background: linear-gradient(180deg, #57456f, #2a2433); }
.fcard.Legendary { background: linear-gradient(180deg, #7a5a3a, #33271d); }
.fcard .rar { letter-spacing: 0.08em; font-weight: 600; left: 12px; top: 10px; }
.fcard .fname { padding: 30px 14px 13px; background: linear-gradient(0deg, rgba(16, 18, 23, 0.95) 50%, rgba(16, 18, 23, 0)); }
.fcard .fname b { font-family: var(--font); font-style: normal; text-transform: none; font-size: 16px; font-weight: 600; }
.fcard.big .fname b { font-size: 19px; }
.shop-detail { width: 360px; padding: 26px; }
@media (max-width: 1100px) { .fgrid.featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .shop-panel { width: auto; } .fgrid.featured { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } }

/* party panel, now inside Friends */
#friends .party-card { position: static; width: auto; margin-bottom: 26px; background: var(--card-2); box-shadow: none; backdrop-filter: none; }
#friends .party-card .join-row, #friends #party-create { max-width: 420px; }
.friends-cols { gap: 30px; }
.members li, .mini-list li, .people li { padding: 11px 14px; margin-bottom: 8px; border-radius: 10px; }

/* leaderboard */
.lb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lb-col h4 { margin-top: 0; }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 6px; border-radius: 10px; background: var(--card-2); font-size: 14px; }
.lb-list li.hint { display: block; background: none; padding: 6px 2px; }
.lb-list li.me { outline: 1px solid var(--accent); }
.lb-list .pos { color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-list b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-list .v { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .lb-cols { grid-template-columns: 1fr; } }

/* =====================================================================
   A LITTLE MORE COLOUR - same calm layout, richer accents (still no neon)
   ===================================================================== */
:root {
  --accent: #f0743e; --accent-2: #ff9a66; --gold: #f2c443; --blue: #5b9cf0;
  --good: #5fcf8b; --bad: #f07a74; --warn: #f2c443;
  --card: rgba(20, 24, 33, 0.93); --line: rgba(255, 255, 255, 0.1);
}
#topbar { background: linear-gradient(90deg, rgba(18, 22, 32, 0.95), rgba(24, 22, 34, 0.95)); border-bottom: 1px solid rgba(240, 116, 62, 0.25); }
.brand span, .logo span { color: var(--accent); }
button.primary, button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #f0743e, #e0553a); }
button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #ff8a52, #ec6440); }
.play-btn { background: linear-gradient(135deg, #f0743e, #dc4f36); }
.play-btn:hover:not(:disabled) { background: linear-gradient(135deg, #ff8a52, #e85c3e); }
.play-btn.ready { background: linear-gradient(135deg, #4cc27f, #2f9a5e); }
.tabs button.sel, .seg button.sel, .mode.sel, .track-card.sel, .region.sel, .vcard.sel, .options .sections button.sel { border-color: var(--accent); background: rgba(240, 116, 62, 0.18); }
.stat .bar i { background: linear-gradient(90deg, #f0743e, #f2c443); }
.pips i.on { background: linear-gradient(180deg, #f2c443, #f0743e); }
.xpbar i { background: linear-gradient(90deg, #5b9cf0, #a78bfa); }
.chip.level b { color: #b9d4ff; }
.ntag .lv { color: #9cc3ff; }
.sheet { border-top: 3px solid rgba(240, 116, 62, 0.55); }
.fsec { color: var(--accent-2); }
.fcard.Common, .fcard.Uncommon { background: linear-gradient(180deg, #4a5262, #272b34); }
.fcard.Rare { background: linear-gradient(180deg, #2f6fb5, #1b2a44); }
.fcard.Epic { background: linear-gradient(180deg, #7d4fc4, #2c2140); }
.fcard.Legendary { background: linear-gradient(180deg, #d0812f, #3d2817); }
.fcard .rar { color: #fff; }
.tier.Works { background: rgba(242, 196, 67, 0.2); color: var(--gold); } .tier.Pro { background: rgba(91, 156, 240, 0.22); color: #a9c9ff; }
.lvl-need { color: var(--bad); font-weight: 700; }
.lvl-ok { color: var(--good); font-weight: 700; }
/* friends: add-a-friend box first, party below */
.add-friend { padding: 18px 20px; border-radius: 14px; background: rgba(91, 156, 240, 0.08); border: 1px solid rgba(91, 156, 240, 0.25); margin-bottom: 8px; }
.add-friend h4 { margin-top: 0; color: #a9c9ff; }
.add-friend .hint { margin: 0 0 12px; }
#friends .party-card { margin: 26px 0 0; }

/* modal box in the middle (ban popup, admin ban dialog) */
.modal-wrap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 8, 12, 0.7); pointer-events: auto; animation: fadein 0.2s ease-out; }
.modal-box { width: min(420px, 100%); text-align: left; }
.modal-box h2 { margin-bottom: 10px; }
.modal-box label.field { display: flex; margin: 10px 0; }
.modal-box input[type=text] { width: 100%; }
.ban-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.ban-reason { margin: 6px 0 10px; color: var(--bad); }

/* ---------- leaderboard: podium for the top 3, then a list ---------- */
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin: 6px 0 18px; }
.lb-podium .pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 0; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border: 1px solid var(--line); overflow: hidden; }
.lb-podium .pod b { font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium .pod .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-podium .pod .v small, .lb-list .v small { font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.04em; }
.lb-podium .medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #1b1406; box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 -3px 0 rgba(0,0,0,0.18); }
.lb-podium .step { width: 100%; margin-top: 8px; border-radius: 8px 8px 0 0; }
.lb-podium .p1 .medal { background: linear-gradient(135deg, #ffe680, #f2b705); width: 56px; height: 56px; font-size: 26px; }
.lb-podium .p2 .medal { background: linear-gradient(135deg, #f4f6f9, #a9b3c1); }
.lb-podium .p3 .medal { background: linear-gradient(135deg, #f3c39a, #c7783f); }
.lb-podium .p1 .step { height: 54px; background: linear-gradient(180deg, rgba(242,183,5,0.45), rgba(242,183,5,0.08)); }
.lb-podium .p2 .step { height: 34px; background: linear-gradient(180deg, rgba(169,179,193,0.4), rgba(169,179,193,0.06)); }
.lb-podium .p3 .step { height: 22px; background: linear-gradient(180deg, rgba(199,120,63,0.4), rgba(199,120,63,0.06)); }
.lb-podium .p1 { border-color: rgba(242,183,5,0.5); box-shadow: 0 0 28px rgba(242,183,5,0.15); }
.lb-podium .pod.me { outline: 2px solid var(--accent); }
.lb-list li { grid-template-columns: 34px 1fr auto; }
.lb-list .lv, .lb-podium .lv { font-style: normal; font-size: 11px; color: var(--accent-2); margin-left: 4px; }
.lb-mine { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--card-2); color: var(--muted); }
.stag.top1 { background: linear-gradient(135deg, #f7d23a, #d99a00); color: #2a1d00; }
.stag.top2 { background: linear-gradient(135deg, #e2e7ee, #8f9aab); color: #1c2230; }
.stag.top3 { background: linear-gradient(135deg, #e9a36b, #a85a26); }
@media (max-width: 560px) { .lb-podium { gap: 8px; } .lb-podium .pod b { font-size: 14px; } .lb-podium .pod .v { font-size: 15px; } .lb-podium .stag { font-size: 8px; padding: 2px 4px; } }

/* first person on a bike: the edge of the goggles (a soft dark frame, rounded like the lens) */
#goggles { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 78% 74% at 50% 46%, transparent 62%, rgba(8, 10, 14, 0.35) 80%, rgba(8, 10, 14, 0.85) 100%); }

/* riding: a soft darkening toward the corners pulls the eye to the middle (static, costs nothing) */
#hud::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 62%, rgba(4, 6, 10, 0.32) 100%); }

/* matchmaking buttons under PLAY, and rank tiers */
.mm-row { flex-basis: 100%; display: flex; gap: 10px; justify-content: flex-end; }
.mm-btn { padding: 9px 16px; font-size: 14px; background: var(--card); backdrop-filter: blur(10px); border-color: var(--line-2); }
.mm-btn.ranked { border-color: rgba(242, 196, 67, 0.5); }
.mm-btn small { color: var(--gold); font-weight: 600; margin-left: 4px; }
.mm-btn.searching { border-color: var(--accent); background: rgba(240, 116, 62, 0.22); animation: mmpulse 1.4s ease-in-out infinite; }
@keyframes mmpulse { 50% { box-shadow: 0 0 0 4px rgba(240, 116, 62, 0.18); } }
.tier { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; margin-left: 6px; background: rgba(255,255,255,0.08); }
.tier.Bronze { color: #d49a6a; } .tier.Silver { color: #cfd6e0; } .tier.Gold { color: var(--gold); }
.tier.Platinum { color: #7fd6d0; } .tier.Diamond { color: #9cc3ff; } .tier.Pro { color: #ff8f6b; }
#lb-tabs { margin-left: auto; }

/* Ranked tab (coming soon) and the ranks */
.ranked-soon { font-size: 44px; font-weight: 700; text-align: center; margin: 26px 0 8px; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--accent), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ranked-sub { text-align: center; max-width: 560px; margin: 0 auto 22px; }
.rank-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
.rung { padding: 14px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.rung .tier { font-size: 16px; margin-left: 0; align-self: flex-start; padding: 3px 10px; }
.rung .rr { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.rung .rd { color: var(--muted); font-size: 12px; min-height: 15px; }
@media (max-width: 720px) { .rank-ladder { grid-template-columns: 1fr 1fr; } .ranked-soon { font-size: 34px; } }
/* Settings > Controls */
.setting.bind .seg { align-items: center; }
.keycap { min-width: 96px; font-family: var(--font); }
.keycap.waiting { border-color: var(--accent); background: rgba(240, 116, 62, 0.2); animation: mmpulse 1.2s ease-in-out infinite; }
.keyalt { font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
/* Ranked: its own full screen, just "Coming soon" (no pop-up box) */
.ranked-screen { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 45%, #1a1f2b 0%, #0b0d12 75%); pointer-events: auto; }
.ranked-screen .ranked-soon { font-size: clamp(56px, 11vw, 140px); margin: 0 0 6vh; letter-spacing: 0.01em; }

/* update log: the ! button in the top bar and the What's new box */
.updates-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; position: relative; background: var(--card-2); border: 1.5px solid var(--line-2); font-weight: 800; font-size: 16px; color: var(--text); }
.updates-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-2); }
.updates-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #12151c; }
.modal-box.updates-modal { width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column; }
.upd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.upd-head h2 { margin: 0; }
.upd-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--accent); color: #fff; }
.upd-list { overflow: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 12px; }
.upd { padding: 14px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.upd.latest { border-color: rgba(240, 116, 62, 0.45); background: rgba(240, 116, 62, 0.07); }
.upd-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.upd-top b { font-size: 15px; }
.upd-top small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.upd-new { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: #fff; }
.upd-new.soft { background: rgba(240, 116, 62, 0.25); color: var(--accent-2); }
.upd ul { margin: 0; padding-left: 18px; color: #d1d5db; font-size: 13.5px; line-height: 1.55; }

/* ---------- replays ---------- */
.rp-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow-y: auto; }
.rp-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--card-2); border: 1px solid transparent; }
.rp-list li.star { border-color: rgba(242, 196, 67, 0.45); }
.rp-list li.hint { display: block; background: none; padding: 6px 2px; }
.rp-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-info b { font-size: 16px; }
.rp-info span { color: var(--text); font-size: 13px; }
.rp-info small { color: var(--muted); font-size: 12px; }
.rp-acts { display: flex; gap: 6px; flex-shrink: 0; }
.rp-acts [data-star] { min-width: 36px; color: var(--gold); }
#hud.replay > :not(#name-tags) { display: none !important; }
.replay-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 26; width: min(760px, calc(100vw - 28px)); padding: 10px 14px 12px; border-radius: 14px;
  background: rgba(10, 12, 18, 0.82); border: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); pointer-events: auto; }
.replay-bar .rp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.replay-bar .rp-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.replay-bar input[type=range] { width: 100%; accent-color: var(--accent); margin: 2px 0 8px; }
.replay-bar .rp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.replay-bar .rp-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.replay-bar select { padding: 5px 8px; font-size: 13px; }
#rp-play { min-width: 76px; }

/* logo + settings gear in the top bar */
.brand { display: flex; align-items: center; }
.brand-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
@media (max-width: 700px) { .brand-logo { height: 32px; } }
.gear-btn svg { display: block; transition: transform 0.3s ease; }
.gear-btn:hover svg { transform: rotate(60deg); }
.gear-btn.sel { border-color: var(--accent); color: var(--accent-2); }

/* lobby right side: Friends online, then the Party panel, then a small Leave party */
.lobby-side { position: absolute; right: 24px; top: 24px; width: 300px; max-height: calc(100% - 150px); overflow: auto; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.lobby-side .friends-mini, .lobby-side .party-card { position: static; width: auto; max-height: none; left: auto; right: auto; top: auto; }
.lobby-side .party-card { padding: 18px 20px; }
.lobby-side .party-card .hint { font-size: 13px; margin: 0 0 10px; }
.party-leave { align-self: flex-end; padding: 6px 14px; font-size: 13px; }
@media (max-width: 820px) { .lobby-side { left: 12px; right: 12px; width: auto; } }

/* blackjack */
.casino-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.bj-table { background: radial-gradient(ellipse at 50% 30%, #1d5b3f, #0f3324); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; border: 1px solid rgba(255,255,255,0.08); }
.bj-row small { color: #cfe8da; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.bj-row small b { color: #fff; margin-left: 4px; }
.bj-cards { display: flex; gap: 6px; min-height: 66px; margin-top: 6px; flex-wrap: wrap; }
.pcard { width: 46px; height: 64px; border-radius: 7px; background: #f8f6f1; color: #15171c; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,0.35); animation: deal 0.25s ease-out both; }
.pcard b { font-size: 17px; line-height: 1; } .pcard i { font-style: normal; font-size: 18px; line-height: 1.1; }
.pcard.red { color: #c8202e; }
.pcard.back { background: repeating-linear-gradient(45deg, #9c3b2a 0 6px, #b5523d 6px 12px); border: 3px solid #f8f6f1; }
@keyframes deal { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.bj-acts { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }

/* Ranked screen */
.ranked-screen { display: block; padding: 28px; overflow: auto; }
.rk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; max-width: 1100px; margin: 0 auto; }
.rk-main { padding: 28px; }
.rk-me { display: flex; gap: 26px; align-items: center; }
.rk-badge .rank-badge { filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)); animation: badgeIn 0.6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes badgeIn { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rk-info { flex: 1; }
.rk-info small { color: var(--muted); letter-spacing: 0.14em; font-size: 12px; }
.rk-info h2 { font-size: 40px; margin: 2px 0 6px; }
.rk-rating { font-size: 15px; margin-bottom: 10px; } .rk-rating b { font-size: 22px; }
.rk-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 6px; }
.rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 6px; transition: width 0.6s ease; }
.rk-find { width: 100%; margin: 24px 0 8px; padding: 16px; font-size: 18px; letter-spacing: 0.08em; }
.rk-find.searching { background: linear-gradient(135deg, #3b4a63, #2a3446) !important; animation: mmpulse 1.4s ease-in-out infinite; }
.rk-status { text-align: center; min-height: 20px; }
.rk-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rk-ladder .rung { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.rk-ladder .rung.me { border-color: var(--accent); background: rgba(240,116,62,0.1); }
.rk-ladder .rung small { display: block; color: var(--muted); font-size: 12px; }
.rk-top { padding: 22px; align-self: start; }
.rk-top h4 { margin-top: 0; }
.rk-top .lb-list b { display: flex; align-items: center; gap: 6px; }
.tier-name.Bronze { color: #e7a06a; } .tier-name.Silver { color: #d9e0ea; } .tier-name.Gold { color: #f2c443; }
.tier-name.Platinum { color: #6fe0d2; } .tier-name.Diamond { color: #8cc2ff; } .tier-name.Pro { color: #ff8a5c; }
.rk-pop { display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .rk-wrap { grid-template-columns: 1fr; } .rk-ladder { grid-template-columns: 1fr 1fr; } .rk-me { flex-direction: column; text-align: center; } }
/* rank up */
.rankup { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(20,24,34,0.92), rgba(5,6,10,0.97)); pointer-events: auto; cursor: pointer; animation: fadein 0.3s ease-out; overflow: hidden; }
.rankup.out { animation: fadeout 0.4s ease-in forwards; }
@keyframes fadeout { to { opacity: 0; } }
.ru-rays { position: absolute; width: 1400px; height: 1400px; background: repeating-conic-gradient(from 0deg, rgba(242,196,67,0.12) 0deg 8deg, transparent 8deg 22deg); animation: spinr 14s linear infinite, raysIn 1.2s 1.1s ease-out both; border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); }
@keyframes spinr { to { transform: rotate(360deg); } }
@keyframes raysIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; } }
.ru-box { position: relative; text-align: center; }
.ru-label { font-size: 22px; letter-spacing: 0.4em; color: var(--gold); font-weight: 800; animation: rise 0.5s 0.2s both; }
.ru-badges { position: relative; width: 240px; height: 220px; margin: 10px auto; }
.ru-old, .ru-new { position: absolute; inset: 0; display: grid; place-items: center; }
.ru-old { animation: oldOut 1.1s 0.3s ease-in forwards; }
@keyframes oldOut { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.15); opacity: 1; filter: brightness(2.5); } 100% { transform: scale(0.2); opacity: 0; filter: brightness(4); } }
.ru-new { opacity: 0; animation: newIn 0.8s 1.15s cubic-bezier(.2,1.5,.4,1) forwards; }
.ru-new .rank-badge { filter: drop-shadow(0 0 30px rgba(242,196,67,0.55)); }
@keyframes newIn { from { opacity: 0; transform: scale(2.2); filter: brightness(3); } to { opacity: 1; transform: none; filter: none; } }
.ru-tier { font-size: 54px; font-weight: 800; letter-spacing: 0.08em; background: none; padding: 0; margin: 0; animation: rise 0.5s 1.6s both; }
.ru-rating { font-size: 18px; margin-top: 6px; animation: rise 0.5s 1.8s both; } .ru-rating b { font-size: 24px; color: var(--gold); }
.ru-hint { color: var(--muted); font-size: 12px; margin-top: 18px; animation: rise 0.5s 2.6s both; }

/* =====================================================================
   LOOK PASS: Saira fonts (slanted, like the logo), intro logo, a cleaner top bar (Cork7-style:
   glassy, pill tabs, everything on one baseline) and smoother motion
   ===================================================================== */
:root {
  --font: 'Saira', 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Saira', 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body, button, input, select { font-family: var(--font); }
h2, .sheet-head h2, .shop-head h2, .rk-info h2, .ru-tier, .ranked-soon { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: 0; }
h2 { font-weight: 700; }
.play-btn, .rk-find { font-family: var(--display); font-style: italic; font-weight: 900; letter-spacing: 0.04em; }

/* intro: the logo drops in, a shine sweeps across it, the name and bar fade up */
#loading { gap: 22px; background: radial-gradient(ellipse at 50% 42%, #1b2230 0%, #0a0c11 72%); }
.intro-logo { position: relative; width: min(340px, 60vw); aspect-ratio: 214 / 111; animation: introLogo 0.9s var(--ease) both; will-change: transform, opacity; }
.intro-logo img { display: block; width: 100%; height: auto; }
.intro-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; letter-spacing: 0.3em; padding-left: 0.3em; color: #e9e6e0; animation: rise 0.7s 0.5s var(--ease) both; }
.intro-name span { color: var(--accent); }
#loading .loadbar { animation: rise 0.6s 0.7s var(--ease) both; }
@keyframes introLogo { from { opacity: 0; transform: translateY(-18px) scale(1.12); } to { opacity: 1; transform: none; } }

/* top bar: dark glass, pill tabs, round chips all the same height */
#topbar { height: var(--top); padding: 0 22px; gap: 18px; background: linear-gradient(180deg, rgba(12, 14, 20, 0.92), rgba(12, 14, 20, 0.78)); border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
#nav { height: auto; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
#nav button { height: 36px; padding: 0 15px; border-radius: 999px; font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: #a7abb4; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
#nav button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); }
#nav button.sel { color: #fff; background: linear-gradient(135deg, rgba(240, 116, 62, 0.95), rgba(220, 85, 54, 0.95)); box-shadow: 0 4px 14px rgba(240, 116, 62, 0.3); }
#nav button.sel::after { display: none; }
.top-right { gap: 8px; }
.top-right .chip, .updates-btn, #settings-btn { height: 36px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.updates-btn, #settings-btn { width: 36px; }
.top-right .chip:hover, .updates-btn:hover, #settings-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* smoother motion everywhere */
button { transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease); }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.menu-screen { animation: screenIn 0.35s var(--ease) both; }
.overlay { animation: fadein 0.25s var(--ease) both; }
.overlay .sheet { animation: sheetIn 0.38s var(--ease) both; }
.card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.popup { animation: popIn 0.35s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
.modal-wrap .modal-box { animation: sheetIn 0.35s var(--ease) both; }
.toast { animation: toastIn 0.3s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }
.trick-pop .tp { animation-timing-function: var(--ease); }
.vcard, .fcard, .swatch, .rung, .lb-list li { transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.vcard:hover, .rung:hover { transform: translateX(3px); }
.lb-list li { animation: rise 0.4s var(--ease) both; }
.lb-list li:nth-child(2) { animation-delay: 0.04s; } .lb-list li:nth-child(3) { animation-delay: 0.08s; } .lb-list li:nth-child(4) { animation-delay: 0.12s; } .lb-list li:nth-child(5) { animation-delay: 0.16s; }
/* reduced motion (e.g. Windows animations off): calm the menu transitions only. Shortening EVERY animation made
   the ones that end faded out (trick points, rank-up) vanish the moment they appeared */
@media (prefers-reduced-motion: reduce) { .menu-screen, .overlay, .overlay .sheet, .intro-logo, .modal-wrap .modal-box { animation: none !important; } button { transition: none !important; } }

/* =====================================================================
   RANKED, LOBBY-STYLE: the track and your rider stay visible behind, the
   rank card and ladder stack on the left, top ranked on the right, and a
   gold find-match button sits where PLAY is in the lobby
   ===================================================================== */
.ranked-screen { display: block; padding: 0; overflow: hidden; background: linear-gradient(0deg, rgba(5, 6, 10, 0.75) 0%, rgba(5, 6, 10, 0) 26%), linear-gradient(90deg, rgba(5, 6, 10, 0.55) 0%, rgba(5, 6, 10, 0) 34%); pointer-events: none; }
.ranked-screen > * { pointer-events: auto; }
.rk-side { position: absolute; left: 24px; top: 24px; width: 320px; max-height: calc(100% - 150px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.rk-card, .rk-ladder-card { padding: 18px 20px; }
.rk-card .rk-me { gap: 16px; flex-direction: row; text-align: left; margin: 4px 0 12px; }
.rk-card .rk-info h2 { font-size: 34px; margin: 0; }
.rk-card .rk-rating { margin: 0; }
.rk-ladder-card .rk-ladder { grid-template-columns: 1fr 1fr; gap: 8px; }
.rk-ladder-card .rung { padding: 8px 10px; }
.rk-top { position: absolute; right: 24px; top: 24px; width: 290px; max-height: calc(100% - 170px); overflow: auto; padding: 18px 20px; }
.rk-dock .rk-sel { padding-right: 18px; cursor: default; }
.rk-dock .rk-sel:hover { transform: none; }
.play-btn.rk-find { width: auto; margin: 0; padding: 12px 46px; font-size: 30px; background: linear-gradient(135deg, #f2c443, #d4881c); color: #1a1408; box-shadow: 0 8px 26px rgba(242, 196, 67, 0.3); }
.play-btn.rk-find:hover:not(:disabled) { background: linear-gradient(135deg, #ffd65c, #e49a2a); }
.play-btn.rk-find.searching { background: linear-gradient(135deg, #3b4a63, #2a3446) !important; color: #fff; box-shadow: none; }
.play-btn.rk-find:disabled { opacity: 0.55; }
@media (max-width: 820px) {
  .rk-side { left: 12px; right: 12px; top: 12px; width: auto; max-height: 46%; }
  .rk-top { display: none; }
}

/* =====================================================================
   CASINO SCREEN: full menu screen, one game big in the middle, small
   name tabs (Roulette / Blackjack / Crash) to switch, coins on the right
   ===================================================================== */
.casino-screen { display: flex; flex-direction: column; align-items: center; padding: 22px 24px 14px; overflow: auto; background: radial-gradient(ellipse at 50% 35%, rgba(18, 52, 36, 0.92) 0%, rgba(8, 12, 16, 0.96) 70%); backdrop-filter: blur(6px); }
.cs-bar { width: min(900px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cs-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.cs-tabs button { height: 30px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; color: #a7abb4; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.cs-tabs button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.07); transform: none; }
.cs-tabs button.sel { color: #fff; background: linear-gradient(135deg, rgba(240, 116, 62, 0.95), rgba(220, 85, 54, 0.95)); }
.casino-stage { width: min(900px, 100%); flex: 1; display: flex; }
.casino-stage .cgame { flex: 1; padding: 26px 30px; gap: 16px; background: rgba(14, 18, 24, 0.75); border-radius: 18px; }
.casino-stage .cgame[hidden] { display: none; }
.casino-stage .cgame h3 { font-size: 34px; margin: 0; }
.casino-stage .rl-wheel { height: 230px; }
.casino-stage .rl-ball { width: 150px; height: 150px; font-size: 72px; border-width: 6px; }
.casino-stage .picks { grid-template-columns: repeat(8, 1fr); }
.casino-stage .picks .pk, .casino-stage .picks input { height: 44px; font-size: 15px; }
.casino-stage .bj-table { min-height: 300px; padding: 22px 26px; gap: 22px; justify-content: center; }
.casino-stage .bj-cards { min-height: 104px; gap: 10px; }
.casino-stage .pcard { width: 72px; height: 100px; border-radius: 10px; }
.casino-stage .pcard b { font-size: 26px; } .casino-stage .pcard i { font-size: 28px; }
.casino-stage .bj-acts button { height: 48px; font-size: 16px; }
.casino-stage .cr-box canvas { height: 300px; }
.casino-stage .cr-mult { font-size: 76px; } .casino-stage .cr-mult.dead { font-size: 56px; }
.casino-stage .bet-row input { width: 160px; }
.casino-stage .cmsg { font-size: 17px; min-height: 24px; }
.cs-foot { margin: 10px 0 0; }
@media (max-width: 820px) {
  .casino-screen { padding: 12px; }
  .casino-stage .cgame { padding: 16px; }
  .casino-stage .picks { grid-template-columns: repeat(4, 1fr); }
  .casino-stage .rl-wheel { height: 170px; } .casino-stage .rl-ball { width: 110px; height: 110px; font-size: 54px; }
}

/* =====================================================================
   CASINO LOOK: a real roulette wheel, poker-chip bet buttons, a printed
   blackjack felt with proper cards, a glowing crash graph
   ===================================================================== */
.casino-stage .cgame[data-game="roulette"] { background: radial-gradient(ellipse at 50% 0%, rgba(26, 92, 58, 0.55), rgba(14, 18, 24, 0.85) 70%); }
.casino-stage .cgame[data-game="blackjack"] { background: radial-gradient(ellipse at 50% 0%, rgba(20, 70, 48, 0.45), rgba(14, 18, 24, 0.85) 70%); }
.casino-stage .cgame[data-game="crash"] { background: radial-gradient(ellipse at 50% 0%, rgba(40, 52, 96, 0.5), rgba(14, 18, 24, 0.85) 70%); }
.casino-stage .cgame h3 { display: flex; align-items: center; gap: 10px; }
.casino-stage .cgame h3::before { content: ''; width: 6px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--accent)); }
/* roulette wheel */
.casino-stage .rl-wheel { position: relative; width: 270px; height: 270px; margin: 4px auto 0; border-radius: 50%; border: none; background: radial-gradient(circle, #5a3a1c 0 58%, #3b2410 59% 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 6px #b8860b, inset 0 0 0 9px #3b2410; display: grid; place-items: center; }
.rl-disc { position: absolute; inset: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 215, 120, 0.5), 0 0 0 2px #b8860b; will-change: transform; }
.rl-disc::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, #6b4524, #3b2410); box-shadow: 0 0 0 3px #b8860b; }
.rl-disc span { position: absolute; left: 50%; top: 0; height: 50%; width: 22px; margin-left: -11px; transform-origin: 50% 100%; text-align: center; }
.rl-disc span b { display: block; padding-top: 5px; font-size: 12px; font-weight: 700; color: #fff; font-family: var(--font); }
.rl-pointer { position: absolute; top: 4px; left: 50%; z-index: 3; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--gold); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.casino-stage .rl-ball { position: relative; z-index: 2; width: 92px; height: 92px; font-size: 42px; border-width: 4px; }
.casino-stage .hist { justify-content: center; }
/* roulette picks: felt cells */
.casino-stage .picks .pk { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); font-weight: 700; }
.casino-stage .picks .pk.red { background: linear-gradient(180deg, #d42a35, #a3141e); }
.casino-stage .picks .pk.black { background: linear-gradient(180deg, #2a2c33, #111216); }
.casino-stage .picks .pk.green { background: linear-gradient(180deg, #18a352, #0e6e36); }
.casino-stage .picks .pk.sel { box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(242, 196, 67, 0.3); }
/* bet buttons: poker chips */
.casino-stage .bet-row { align-items: center; gap: 8px; }
.casino-stage .bet-row button[data-chip] { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; border: 4px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.18); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.casino-stage .bet-row button[data-chip="100"] { background: #c8202e; }
.casino-stage .bet-row button[data-chip="1000"] { background: #2563eb; }
.casino-stage .bet-row button[data-chip="x2"] { background: #15803d; }
.casino-stage .bet-row button[data-chip="half"] { background: #7c3aed; }
.casino-stage .bet-row button[data-chip="max"] { background: #b7791f; }
.casino-stage .bet-row button[data-chip]:hover:not(:disabled) { transform: translateY(-3px) rotate(-12deg); }
.casino-stage .bet-row input { height: 48px; font-size: 18px; border-radius: 12px; }
/* blackjack felt */
.casino-stage .bj-table { position: relative; background: radial-gradient(ellipse at 50% 20%, #237a51, #0f3f2a 75%); border: 10px solid #4a2e17; border-radius: 22px 22px 140px 140px / 22px 22px 70px 70px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.45); padding: 22px 34px 40px; gap: 52px; }
.bj-print { position: absolute; left: 0; right: 0; top: calc(50% - 14px); text-align: center; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: rgba(255, 230, 160, 0.4); pointer-events: none; }
.casino-stage .bj-row { display: flex; flex-direction: column; align-items: center; }
.casino-stage .bj-row small { font-weight: 700; letter-spacing: 0.12em; }
.casino-stage .bj-row small b { display: inline-block; min-width: 26px; padding: 1px 8px; margin-left: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.casino-stage .bj-cards { justify-content: center; }
.casino-stage .pcard { position: relative; width: 74px; height: 104px; border-radius: 9px; background: linear-gradient(160deg, #ffffff, #efeae0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); display: grid; place-items: center; }
.casino-stage .pcard i { font-size: 38px; }
.casino-stage .pcard em { position: absolute; left: 6px; top: 4px; font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; text-align: center; }
.casino-stage .pcard em.br { left: auto; top: auto; right: 6px; bottom: 4px; transform: rotate(180deg); }
.casino-stage .pcard.back { background: repeating-linear-gradient(45deg, #9c3b2a 0 7px, #b5523d 7px 14px); border: 4px solid #f8f6f1; }
/* crash */
.casino-stage .cr-box { border-radius: 14px; background: radial-gradient(ellipse at 70% 20%, #172036, #090c14 75%); border: 1px solid rgba(120, 150, 255, 0.15); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); }
.casino-stage .cr-mult { top: 34%; font-style: italic; font-weight: 900; }
.casino-stage #cr-go.cash { background: linear-gradient(135deg, #facc15, #d97706); color: #1a1408; }

.rl-ball.spin { background: radial-gradient(circle at 40% 35%, #6b4524, #3b2410); border-color: rgba(255, 215, 120, 0.6); }

/* top bar: soft square icon buttons (friends, settings, what's new) */
.updates-btn, .updates-btn.sq-btn, #settings-btn, #friends-btn { border-radius: 10px !important; }
.sq-btn svg { display: block; }
#friends-btn.sel, #settings-btn.sel { border-color: var(--accent); color: var(--accent-2); }
.sq-badge { margin-left: 0; position: absolute; top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; border-radius: 8px; }
.rank-badge { display: inline-block; vertical-align: middle; object-fit: contain; }

/* ---------- challenges ---------- */
.ch-head { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 8px; }
.ch-head h3 { margin: 0; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.ch-head small { color: var(--muted); }
.ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .ch-grid { grid-template-columns: 1fr; } }
.ch-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.ch-card.done { border-color: rgba(124, 196, 154, 0.6); box-shadow: 0 0 18px rgba(124, 196, 154, 0.12); }
.ch-card.claimed { opacity: 0.6; }
.ch-text { display: flex; flex-direction: column; gap: 4px; }
.ch-text b { font-size: 15px; }
.ch-prize { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gold); }
.ch-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 0.4s ease; }
.ch-card.done .ch-bar i, .ch-card.claimed .ch-bar i { background: var(--good); }
.ch-foot { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.ch-foot small { color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-ok { color: var(--good); font-weight: 700; font-size: 13px; }
#nav button { position: relative; }
#chal-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; background: var(--gold); min-width: 0; padding: 0; margin: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px rgba(10, 12, 18, 0.9); }

/* garage / shop cards: never squashed by the scrolling list (the Saira text is taller), a little air between the lines */
.vehicle-cards .vcard { flex-shrink: 0; }
.vcard { row-gap: 3px; padding-top: 12px; padding-bottom: 12px; }
.vcard b { line-height: 1.2; }
.vcard small { line-height: 1.25; }

/* =====================================================================
   RANKED RESULT (after a ranked race, see ranks.js rankResult)
   ===================================================================== */
.rr { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(22, 26, 36, 0.94), rgba(5, 6, 10, 0.98)); pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity 0.35s var(--ease); overflow: hidden; }
.rr.in { opacity: 1; } .rr.out { opacity: 0; }
.rr-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 196, 67, 0.16), transparent 60%); transform: scale(0.6); transition: transform 1.2s var(--ease), background 0.6s; }
.rr.lose .rr-glow { background: radial-gradient(circle, rgba(220, 70, 60, 0.14), transparent 60%); }
.rr.in .rr-glow { transform: scale(1); }
.rr.promoted .rr-glow { background: radial-gradient(circle, rgba(242, 196, 67, 0.32), transparent 62%); transform: scale(1.15); }
.rr-box { position: relative; text-align: center; width: min(460px, 90vw); transform: translateY(14px); transition: transform 0.6s var(--ease); }
.rr.in .rr-box { transform: none; }
.rr-kind { font-size: 13px; letter-spacing: 0.4em; color: var(--muted); font-weight: 700; }
.rr.promoted .rr-kind { color: var(--gold); } .rr.demoted .rr-kind { color: #f08a7a; }
.rr-title { font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(54px, 9vw, 92px); line-height: 1; margin: 6px 0 8px; letter-spacing: 0.02em; }
.rr.win .rr-title { color: var(--gold); text-shadow: 0 0 40px rgba(242, 196, 67, 0.35); } .rr.lose .rr-title { color: #e8695a; }
.rr-badge { height: 176px; display: grid; place-items: center; transition: transform 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.rr-badge .rank-badge { filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5)); }
.rr.promoted .rr-badge { animation: rrPop 0.6s cubic-bezier(.2, 1.6, .4, 1); }
.rr.promoted .rr-badge .rank-badge { filter: drop-shadow(0 0 30px rgba(242, 196, 67, 0.6)); }
@keyframes rrPop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.rr-tier { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 30px; margin-top: 4px; }
.rr-num { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 14px; }
.rr-num b { font-family: var(--display); font-weight: 800; font-size: 46px; font-variant-numeric: tabular-nums; color: #fff; }
.rr-delta { font-style: normal; font-weight: 800; font-size: 18px; padding: 4px 12px; border-radius: 999px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s cubic-bezier(.2, 1.6, .4, 1); }
.rr-delta.show { opacity: 1; transform: none; }
.rr-delta.up { background: rgba(80, 200, 120, 0.18); color: #6fe09a; } .rr-delta.down { background: rgba(230, 90, 80, 0.18); color: #f08a7a; }
.rr-bar { height: 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.rr-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 14px rgba(242, 196, 67, 0.45); }
.rr-next { color: var(--muted); font-size: 14px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.rr-hint { color: var(--muted); font-size: 12px; margin-top: 26px; opacity: 0.7; }

/* =====================================================================
   TOP BAR, TAB STYLE: icon + slanted label per tab, no boxes, a white
   underline under the one you are on, Updates in the row with a NEW tag
   ===================================================================== */
#topbar { background: linear-gradient(180deg, rgba(9, 11, 16, 0.92), rgba(9, 11, 16, 0.55)); border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none; }
#nav { gap: 2px; padding: 0; background: none; border: none; border-radius: 0; height: 100%; align-items: stretch; }
#nav button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; border: none; border-radius: 0; background: none !important; box-shadow: none !important; color: #9aa3b2; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; text-transform: none; }
#nav button svg { flex: none; opacity: 0.85; }
#nav button:hover:not(:disabled) { color: #e8ecf2; transform: none; }
#nav button::after { content: ''; display: block !important; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: #fff; transform: scaleX(0); transition: transform 0.25s var(--ease); }
#nav button.sel { color: #fff; }
#nav button.sel::after { transform: scaleX(1); }
#nav button.sel svg { opacity: 1; }
#nav .new-pill { font-style: italic; font-weight: 900; font-size: 10px; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; background: #fff; color: #10131a; line-height: 1.2; }
#nav .new-pill[hidden] { display: none; }
#nav #chal-dot { top: 12px; right: 8px; }
@media (max-width: 1250px) { #nav button { padding: 0 9px; font-size: 14px; gap: 6px; } }
@media (max-width: 1020px) { #nav button span { display: none; } #nav button { padding: 0 11px; } }

/* top bar fit: tighter tabs, a compact region chip (dot + ping, the server name on hover), a slim
   level chip; on narrower windows the tabs drop their labels and keep the icons (titles on hover) */
#topbar { gap: 10px; padding: 0 16px; }
#nav button { padding: 0 10px; font-size: 14.5px; gap: 6px; }
#nav button svg { width: 16px; height: 16px; }
#nav button::after { left: 8px; right: 8px; }
.top-right { gap: 6px; flex: none; }
#region-chip { max-width: 104px; overflow: hidden; white-space: nowrap; }
#region-chip #region-text { overflow: hidden; text-overflow: ellipsis; }
#level-chip .xpbar { width: 44px; }
@media (max-width: 1440px) { #nav button { padding: 0 7px; font-size: 13px; gap: 5px; } #nav button svg { width: 14px; height: 14px; } #nav .new-pill { font-size: 8.5px; padding: 1px 4px; } #topbar { gap: 8px; padding: 0 12px; } }
@media (max-width: 1180px) { #nav button span { display: none; } #nav button { padding: 0 10px; } #nav .new-pill { position: absolute; top: 9px; right: 0; } }
@media (max-width: 900px) { #region-chip { display: none; } }
@media (max-width: 1440px) { #level-chip .xpbar { display: none; } #profile-mode { display: none; } .top-right { gap: 5px; } }
#profile-name { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* =====================================================================
   PASS: level header, a scrolling row of reward cards
   ===================================================================== */
.pass-screen { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 22px; background: linear-gradient(0deg, rgba(5, 6, 10, 0.92) 0%, rgba(5, 6, 10, 0.6) 45%, rgba(5, 6, 10, 0) 75%); }
.pass-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 28px 14px; }
.pass-head small { color: var(--gold); letter-spacing: 0.3em; font-weight: 700; font-size: 12px; }
.pass-head h2 { font-size: 44px; margin: 2px 0 6px; }
.pass-xp { width: min(360px, 60vw); height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pass-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 6px; transition: width 0.5s var(--ease); }
.pass-next { font-size: 16px; color: #e8ecf2; text-align: right; } .pass-next b { color: var(--gold); }
.pass-track { display: flex; gap: 12px; overflow-x: auto; padding: 8px 28px 14px; scroll-behavior: smooth; }
.pt { position: relative; flex: none; width: 138px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 10px; border-radius: 14px; background: rgba(18, 22, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); }
.pt-lv { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 15px; color: #9aa3b2; }
.pt-art { width: 92px; height: 70px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.35); display: grid; place-items: center; }
.pt-art.coin-art { background: radial-gradient(circle at 50% 40%, #3a3220, #1a1710); display: flex; flex-direction: column; gap: 2px; }
.pt-art.coin-art .coin { width: 26px; height: 26px; } .pt-art.coin-art b { color: var(--gold); font-size: 15px; }
.pt-art.gear-art span { font-weight: 900; font-size: 11px; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.pt-name { font-weight: 700; font-size: 13px; text-align: center; min-height: 32px; line-height: 1.2; display: flex; align-items: center; }
.pt-rar { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; min-height: 13px; }
.pt.rare .pt-rar { color: #6fb0ff; } .pt.epic .pt-rar { color: #c38cff; } .pt.legendary .pt-rar { color: var(--gold); }
.pt.legendary { border-color: rgba(242, 196, 67, 0.45); box-shadow: 0 0 20px rgba(242, 196, 67, 0.12); }
.pt.epic { border-color: rgba(195, 140, 255, 0.35); }
.pt.ready { border-color: var(--accent); box-shadow: 0 0 18px rgba(240, 116, 62, 0.25); }
.pt.locked .pt-art, .pt.locked .pt-name { opacity: 0.45; filter: saturate(0.5); }
.pt-lock, .pt-done { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); padding: 5px 0; }
.pt-done { color: var(--good); }
.pt button { width: 100%; }
.pass-foot { padding: 0 28px; margin: 0; }

/* tutorial card (top centre while you ride) */
.tut { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; width: min(460px, 92vw); }
.tut-card { pointer-events: auto; background: rgba(12, 15, 22, 0.88); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 14px 18px 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); text-align: center; }
.tut-card.flash { animation: tutFlash 0.6s var(--ease); }
@keyframes tutFlash { 0% { box-shadow: 0 0 0 3px var(--good), 0 12px 30px rgba(0, 0, 0, 0.45); transform: scale(1.03); } 100% { transform: none; } }
.tut-kicker { font-size: 11px; letter-spacing: 0.3em; color: var(--gold); font-weight: 800; }
.tut-title { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 30px; line-height: 1.1; margin: 2px 0 6px; }
.tut-text { font-size: 15px; line-height: 1.45; color: #e3e7ee; }
.tut-text kbd, .tut kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: 6px; background: #f2f2f2; color: #12151c; font-family: var(--font); font-weight: 800; font-size: 13px; box-shadow: 0 2px 0 #9aa0aa; margin: 0 1px; }
.tut-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; }
.tut-dots i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.tut-dots i.on { background: var(--good); } .tut-dots i.cur { background: var(--gold); }
.tut-skip { background: none; border: none; color: var(--muted); font-size: 12px; padding: 4px 8px; text-decoration: underline; }
.tut-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.tut-card.done .tut-title { color: var(--gold); }
.pass-track { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.pass-track::-webkit-scrollbar { height: 6px; } .pass-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; } .pass-track::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   PASS v2: premium row over a free row, one column per tier
   ===================================================================== */
.pass-screen { padding-bottom: 16px; background: linear-gradient(0deg, rgba(5, 6, 10, 0.95) 0%, rgba(5, 6, 10, 0.72) 52%, rgba(5, 6, 10, 0) 80%); }
.pass-head { align-items: flex-end; }
.pass-actions { display: flex; align-items: center; gap: 12px; }
.pass-buy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 9px 20px 10px; border: none; border-radius: 12px; background: linear-gradient(135deg, #f8d34a, #d4880f); color: #1a1206; box-shadow: 0 8px 24px rgba(242, 196, 67, 0.3); text-transform: none; letter-spacing: 0; }
.pass-buy small { font-size: 10px; font-weight: 800; letter-spacing: 0.22em; opacity: 0.75; }
.pass-buy b { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 22px; }
.pass-buy:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.pass-owned { font-family: var(--display); font-style: italic; font-weight: 900; letter-spacing: 0.08em; padding: 8px 16px; border-radius: 10px; background: linear-gradient(135deg, rgba(248, 211, 74, 0.2), rgba(212, 136, 15, 0.2)); color: var(--gold); border: 1px solid rgba(242, 196, 67, 0.45); }
.pass-rows { position: relative; display: flex; }
.pass-labels { flex: none; width: 34px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 0 26px 14px; }
.pass-labels span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 900; letter-spacing: 0.3em; }
.pl-prem { color: var(--gold); height: 190px; text-align: center; } .pl-free { color: #9aa3b2; height: 120px; text-align: center; }
.pass-track { flex: 1; gap: 10px; padding: 8px 24px 12px 10px; align-items: flex-start; }
.pcol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; }
.pcol-lv { display: flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.pcol-lv b { font-family: var(--display); font-style: italic; font-size: 16px; color: #e8ecf2; } .pcol-lv small { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }
.pcol.reached .pcol-lv { background: rgba(242, 196, 67, 0.16); } .pcol.reached .pcol-lv b { color: var(--gold); }
.pt { width: 150px; gap: 6px; padding: 10px; }
.pt.premium { min-height: 200px; background: linear-gradient(180deg, rgba(38, 32, 14, 0.92), rgba(16, 18, 26, 0.94)); border-color: rgba(242, 196, 67, 0.28); }
.pt.free { min-height: 122px; }
.pt.free .pt-art { height: 52px; }
.pt.empty { min-height: 122px; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.07); }
.pt-art { width: 100%; height: 88px; }
.pt-art.pic { overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a3140, #12161e); }
.pt-art.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-art.pic.loading { animation: ptLoad 1.2s ease-in-out infinite; }
@keyframes ptLoad { 50% { opacity: 0.55; } }
.pt-name { min-height: 30px; font-size: 13px; }
.pt-rar { font-size: 10.5px; text-align: center; min-height: 26px; }
.pt.excl { border-color: rgba(242, 196, 67, 0.55); }
.pt.excl .pt-rar { color: var(--gold) !important; }
.pt.legendary.premium { box-shadow: 0 0 26px rgba(242, 196, 67, 0.2); }
.pt.ready { border-color: var(--accent) !important; box-shadow: 0 0 18px rgba(240, 116, 62, 0.3); }
.pt.needprem .pt-art, .pt.needprem .pt-name { opacity: 0.8; }
.pt.needprem .pt-lock { color: var(--gold); }
.pt.locked .pt-art, .pt.locked .pt-name { opacity: 0.4; filter: saturate(0.5); }

/* new version banner (version.js) */
.newver { position: fixed; top: 64px; left: 50%; z-index: 200; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 14px; background: #f7f7f5; color: #12151c; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); transform: translate(-50%, -24px); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.35s; font-family: var(--font); }
.newver.in { transform: translate(-50%, 0); opacity: 1; }
.nv-tag { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 12px; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 6px; background: #12151c; color: #fff; }
.nv-text { font-weight: 700; font-size: 14px; }
.nv-btn { border: none; border-radius: 9px; padding: 7px 16px; background: var(--accent); color: #fff; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 15px; letter-spacing: 0.02em; }
.nv-btn:hover { filter: brightness(1.1); }
.nv-x { border: none; background: none; color: #6b7280; font-size: 20px; padding: 0 6px; line-height: 1; }

/* =====================================================================
   TOP BAR, CORK7 STYLE: no bar - the tabs float over the scene with a
   soft shade behind them; on the right only coins, friends, settings and
   a MENU (Esc) button. Level, server and your profile live in the menu.
   ===================================================================== */
#topbar { background: linear-gradient(180deg, rgba(5, 7, 12, 0.72), rgba(5, 7, 12, 0.25) 70%, rgba(5, 7, 12, 0)); border-bottom: none; box-shadow: none; backdrop-filter: none; padding: 0 22px; height: 64px; }
#nav { border-bottom: 1px solid rgba(255, 255, 255, 0.08); height: 48px; align-self: center; }
#nav button { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.top-right { align-self: center; }
.top-right .chip.coins, #friends-btn, #settings-btn { background: rgba(10, 12, 18, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 10px; background: rgba(10, 12, 18, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; }
.menu-btn kbd { font-family: var(--font); font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); color: #12151c; }
.menu-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
#profile-menu { min-width: 280px; right: 0; }
.menu-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px; }
.menu-chips .chip { display: inline-flex !important; max-width: none !important; }
.menu-chips #region-chip { flex: 1; }
.menu-chips .xpbar { display: inline-block !important; width: 60px !important; }

/* =====================================================================
   PASS v3 (season pass layout): solid dark page, level box, a grid with
   one column per level, FREE row over PASS row, next reward + action
   ===================================================================== */
.pass-screen { pointer-events: auto; display: block; padding: 0; overflow-y: auto; background: radial-gradient(ellipse at 50% -10%, #1b2030 0%, #0d0f15 55%, #0a0b10 100%); }
.ps-wrap { max-width: 1500px; margin: 0 auto; padding: 22px 36px 28px; }
.ps-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.ps-title { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(44px, 5vw, 66px); line-height: 1; letter-spacing: 0.01em; color: #fff; }
.ps-season { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #c9ced8; padding-bottom: 8px; }
.ps-boxes { display: flex; gap: 12px; margin-bottom: 18px; }
.ps-level, .ps-premium { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.ps-level { flex: 1; display: flex; align-items: center; gap: 20px; padding: 12px 18px; }
.ps-lvnum { display: flex; align-items: baseline; gap: 6px; }
.ps-lvnum small { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: #c9ced8; }
.ps-lvnum b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 42px; line-height: 1; color: #fff; }
.ps-xp { flex: 1; }
.ps-xpbar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 8px; }
.ps-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 3px; transition: width 0.5s var(--ease); }
.ps-xptext { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #e6e9ef; }
.ps-premium { min-width: 220px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ps-premium b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.04em; color: #fff; }
.ps-premium small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: #c9ced8; }
.ps-premium.owned { border-color: rgba(242, 196, 67, 0.5); background: linear-gradient(135deg, rgba(242, 196, 67, 0.12), rgba(242, 196, 67, 0.02)); } .ps-premium.owned b { color: var(--gold); }
.ps-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ps-info { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #c9ced8; }
.ps-arrows { display: flex; gap: 6px; }
.ps-arrows button { width: 34px; height: 30px; padding: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 20px; line-height: 1; }
.ps-grid { display: flex; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px; }
.ps-rowlabels { flex: none; width: 58px; display: grid; grid-template-rows: 26px 132px 132px; align-items: center; }
.ps-rowlabels span { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: #e6e9ef; }
.ps-track { flex: 1; display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.ps-track::-webkit-scrollbar { height: 5px; } .ps-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.pcl { flex: none; width: 124px; display: grid; grid-template-rows: 26px 124px 124px; gap: 8px; }
.pcl-n { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #8c93a0; }
.pcl.you .pcl-n { background: #f2f2ee; color: #12151c; border-radius: 4px; }
.pc { position: relative; width: 124px; height: 124px; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.04); background: #1a1d24; overflow: hidden; display: grid; place-items: center; text-transform: none; letter-spacing: 0; }
.pc:hover:not(:disabled) { transform: translateY(-2px); background: #20242c; }
.pc.empty { background: rgba(255, 255, 255, 0.015); border-color: transparent; cursor: default; }
.pc img { width: 100%; height: 100%; object-fit: cover; }
.pc-wait { width: 100%; height: 100%; background: linear-gradient(90deg, #1a1d24, #232731, #1a1d24); animation: ptLoad 1.2s ease-in-out infinite; }
.pc-coin { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pc-coin .coin { width: 30px; height: 30px; } .pc-coin b { font-size: 19px; font-weight: 800; color: #fff; }
.pc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.pc.rare::after { background: #3b82f6; } .pc.epic::after { background: #8b5cf6; } .pc.legendary::after { background: var(--gold); } .pc.excl::after { background: linear-gradient(90deg, var(--gold), #ff7a3d); }
.pc.premium.legendary, .pc.premium.excl { background: radial-gradient(circle at 50% 40%, #2a2240, #17141f); }
.pc-badge { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #e6e9ef; }
.pc-badge.ok { background: var(--good); color: #0b1a10; }
.pc.locked img, .pc.locked .pc-coin { opacity: 0.45; filter: saturate(0.4); }
.pc.claimed img, .pc.claimed .pc-coin { opacity: 0.55; }
.pc.ready { border: 2px solid #f2f2ee; box-shadow: 0 0 16px rgba(255, 255, 255, 0.15); }
.pc-claim { position: absolute; left: 6px; right: 6px; bottom: 7px; padding: 3px 0; border-radius: 4px; background: #f2f2ee; color: #12151c; font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.ps-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; }
.ps-next { display: flex; align-items: center; gap: 14px; }
.pn-art { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: #1a1d24; display: grid; place-items: center; }
.pn-art img { width: 100%; height: 100%; object-fit: cover; } .pn-art .pc-coin b { font-size: 13px; } .pn-art .pc-coin .coin { width: 20px; height: 20px; }
.ps-next small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: #c9ced8; }
.ps-next b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1.1; color: #fff; margin: 2px 0; }
.pn-kind { color: #8c93a0 !important; }
.ps-action { flex: 0 1 940px; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 18px 0 20px; border-radius: 8px; border: none; background: #f2f2ee; color: #12151c; font-family: var(--font); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.ps-action span { flex: 1; text-align: left; }
.ps-action em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: 0.02em; }
.ps-action.claim { background: linear-gradient(135deg, #ffffff, #e7e7e2); box-shadow: 0 0 22px rgba(255, 255, 255, 0.18); }
.ps-action.buy { background: linear-gradient(135deg, #f8d34a, #d4880f); color: #1a1206; }
.ps-action:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.ps-action:disabled { opacity: 0.6; }
@media (max-width: 900px) { .ps-wrap { padding: 16px; } .ps-boxes { flex-direction: column; } .ps-foot { flex-direction: column; align-items: stretch; } }
.pass-screen { top: 0 !important; padding-top: var(--top); }

/* pass vehicles in the garage, the Extras tab, extras / vehicle cards on the pass */
.vcard .tag.passtag { background: linear-gradient(135deg, rgba(248, 211, 74, 0.25), rgba(212, 136, 15, 0.2)); color: var(--gold); }
.g-action .passlock { background: linear-gradient(135deg, rgba(248, 211, 74, 0.18), rgba(212, 136, 15, 0.12)); border-color: rgba(242, 196, 67, 0.45); color: var(--gold); }
.ex-group { margin-bottom: 10px; grid-column: 1 / -1; }
.ex-group h5 { margin: 4px 0 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ex-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.ex-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px 8px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); color: var(--ex); text-transform: none; letter-spacing: 0; }
.ex-item span { font-size: 11.5px; font-weight: 700; color: #e6e9ef; text-align: center; line-height: 1.15; }
.ex-item small { position: absolute; top: 4px; right: 5px; font-size: 8.5px; font-weight: 900; letter-spacing: 0.08em; color: var(--gold); }
.ex-item.sel { border-color: var(--accent); background: rgba(240, 116, 62, 0.14); }
.ex-item.locked { opacity: 0.5; }
#g-skinlist:has(.ex-group) { display: block; }
.pc-extra { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: var(--ex); background: radial-gradient(circle, color-mix(in srgb, var(--ex) 28%, transparent), transparent 70%); }
.pc-extra svg { width: 40px; height: 40px; }
.pc.veh { background: radial-gradient(circle at 50% 40%, #3a2c10, #17130b) !important; }
.pc.veh::before { content: 'VEHICLE'; position: absolute; left: 6px; top: 6px; font-size: 8.5px; font-weight: 900; letter-spacing: 0.12em; padding: 2px 5px; border-radius: 3px; background: var(--gold); color: #1a1206; z-index: 1; }

/* ranked: 1v1 / 2v2 picker in the dock, leaderboard tabs, 2v2 team dots in the HUD standings */
.rk-fmt { display: flex; gap: 6px; }
.rk-fmt button { padding: 4px 14px; font-size: 14px; font-weight: 700; }
.lb-tabs { display: flex; margin-bottom: 10px; }
#hud-standings .tm { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
#hud-standings .tm.t0 { background: #3d8bff; }
#hud-standings .tm.t1 { background: #ff4a3d; }

.qn { margin-left: 6px; min-width: 15px; padding: 1px 5px; border-radius: 9px; background: #3ddc84; color: #06220f; font: 800 10px/13px var(--body, sans-serif); vertical-align: top; letter-spacing: 0; font-style: normal; }
.qn[hidden] { display: none; }

/* HUD: the lap / timer panel stays above the minimap; trick feedback and the lap-time toasts go up top, small, in the middle */
.toasts { top: 10px; }
.toast { font-size: 15px; padding: 5px 14px; }
.hud-trick { top: 58px; font-size: 15px; letter-spacing: 0.05em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.trick-pop { top: 80px; }
.trick-pop .tp-name { font-size: 22px; }
.trick-pop .tp-pts { font-size: 16px; }
.trick-pop .tp-land { font-size: 11px; }
.trick-pop .combo { font-size: 13px; }
@media (max-width: 700px) { .toasts { top: 6px; } .hud-trick { top: 48px; font-size: 13px; } .trick-pop { top: 68px; } .trick-pop .tp-name { font-size: 18px; } }
/* Ranked screen: nothing may overflow the rank card and no scrollbars on the side panel */
.rk-side { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.rk-side::-webkit-scrollbar { display: none; }
.rk-card .rk-info { min-width: 0; }
.rk-card .rk-info h2 { font-size: clamp(22px, 2.4vw, 32px); overflow-wrap: anywhere; line-height: 1.05; }
.rk-card .rk-me { min-width: 0; }
.rk-card .card-head { gap: 8px; flex-wrap: wrap; }
.rk-card .status { white-space: normal; text-align: right; line-height: 1.25; }
/* how many riders are searching: small pill above the top-right of FIND MATCH */
.rk-find-wrap { position: relative; display: inline-block; }
.rk-qn { position: absolute; right: 4px; top: -26px; padding: 3px 10px; border-radius: 999px; background: rgba(61, 220, 132, 0.18); border: 1px solid rgba(61, 220, 132, 0.55); color: #3ddc84; font: 700 13px/1.2 var(--body, sans-serif); letter-spacing: 0.02em; white-space: nowrap; }
.rk-qn[hidden] { display: none; }
.rk-card .rk-info h2 { font-size: 26px; white-space: nowrap; overflow-wrap: normal; }
.rk-qn { font-size: 14px; top: -32px; padding: 4px 12px; }

/* Admin panel: a side menu and one clean section at a time */
.adm-sheet { padding: 0; overflow: hidden; display: grid; grid-template-columns: 190px minmax(0, 1fr); width: min(960px, 94vw); max-height: 86vh; border-radius: 16px; }
.adm-side { display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 16px; background: rgba(0,0,0,0.28); border-right: 1px solid var(--line, rgba(255,255,255,0.1)); }
.adm-title h2 { margin: 0; font-size: 24px; }
.adm-title .hint { display: block; margin-top: 2px; font-size: 12px; }
.adm-tabs { display: grid; gap: 4px; }
.adm-tab { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; text-align: left; }
.adm-tab i { font-style: normal; width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.08); display: grid; place-items: center; font-size: 11px; }
.adm-tab:hover { background: rgba(255,255,255,0.06); color: #fff; }
.adm-tab.sel { background: rgba(240, 116, 62, 0.16); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.adm-tab.sel i { background: var(--accent); color: #1a0f08; }
.adm-x { margin-top: auto; padding: 9px 12px; font-size: 13px; }
.adm-x kbd { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.12); font-size: 11px; }
.adm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.adm-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 16px 22px 0; min-height: 28px; }
.adm-head .adm-stats { margin: 0; padding: 0; }
.adm-head .cmsg { margin: 0; min-height: 18px; }
.adm-pane { padding: 10px 22px 22px; overflow: auto; display: grid; gap: 14px; align-content: start; min-height: 0; }
.adm-pane[hidden] { display: none; }
.adm-h { margin: 6px 0 0; font-size: 18px; letter-spacing: 0.02em; text-transform: none; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-h .small { font-size: 12px; }
.adm-sub { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.adm-card { background: rgba(255,255,255,0.04); border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 14px; padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; }
.adm-card h4 { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.adm-card .adm-sub { margin: -4px 0 0; }
.adm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.adm-checks label { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.045); border: 1px solid transparent; }
.adm-checks label:hover { background: rgba(255,255,255,0.09); }
.adm-checks label:has(input:checked) { border-color: var(--accent); background: rgba(240, 116, 62, 0.12); }
.adm-pane .search-row { margin: 0; }
.adm-pane .search-row input { width: 100%; padding: 11px 14px; border-radius: 10px; }
.adm-pane table.adm { border-spacing: 0 6px; border-collapse: separate; }
.adm-pane table.adm th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; }
.adm-pane table.adm td { background: rgba(255,255,255,0.04); padding: 9px 10px; }
.adm-pane table.adm td:first-child { border-radius: 10px 0 0 10px; }
.adm-pane table.adm td:last-child { border-radius: 0 10px 10px 0; }
.adm-pane .adm-log { max-height: none; }
@media (max-width: 700px) { .adm-sheet { grid-template-columns: 1fr; } .adm-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line, rgba(255,255,255,0.1)); } .adm-tabs { display: flex; flex-wrap: wrap; } .adm-x { margin-top: 0; margin-left: auto; } }

/* shop cards: a picture that fits the box, and the name / price on a solid bar below it */
.fcard img { left: 50%; top: 24px; width: calc(100% - 14px); height: calc(100% - 92px); object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
.fcard.big img { width: calc(100% - 18px); height: calc(100% - 100px); top: 26px; }
.fcard .fname { padding: 9px 11px 10px; background: rgba(8, 10, 16, 0.9); border-top: 1px solid rgba(255,255,255,0.1); }
.fcard .fname b { font-size: 15px; }
.fcard.big .fname b { font-size: 19px; }
.fcard .rar { z-index: 2; background: rgba(0,0,0,0.38); padding: 2px 7px; border-radius: 6px; }
.fcard .loading-img { top: 40%; }
.fgrid { grid-auto-rows: 214px; }
.fgrid.featured { grid-auto-rows: 290px; }
/* the rewarded-ad button and the test ad */
.ad-btn { padding: 9px 16px; border-radius: 10px; font-weight: 800; background: linear-gradient(135deg, #3ddc84, #1fa862); color: #04200f; border: 0; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.ad-btn small { font-size: 11px; font-weight: 700; opacity: 0.8; }
.ad-btn:disabled { background: rgba(255,255,255,0.1); color: var(--muted); cursor: default; }
.ad-btn[hidden] { display: none; }
.ad-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.85); display: grid; place-items: center; }
.ad-box { width: min(420px, 90vw); padding: 28px; border-radius: 16px; background: #1b2130; text-align: center; display: grid; gap: 10px; }
.ad-box small { letter-spacing: 0.2em; color: var(--muted); }
.ad-box b { font-size: 54px; color: var(--gold, #f2c443); }
/* shop cards, second pass: a bigger picture that fills the box (the card is taller, the tag stays clear of the head) */
.fgrid { grid-auto-rows: 236px; }
.fgrid.featured { grid-auto-rows: 306px; }
.fcard img { top: 24px; width: calc(100% - 4px); height: calc(100% - 96px); transform: translateX(-50%) scale(1.1); transform-origin: 50% 50%; }
.fcard.big img { top: 26px; height: calc(100% - 104px); transform: translateX(-50%) scale(1.06); }
.fcard .rar { font-size: 9px; padding: 2px 6px; }

/* CrazyGames build (body.crazy): single player and offline - no ranked, leaderboard, levels, friends, party, chat, casino, pass */
body.crazy #nav [data-go="ranked"], body.crazy #nav [data-go="leaderboard"], body.crazy #nav [data-go="pass"],
body.crazy #nav [data-go="challenges"], body.crazy #nav [data-go="casino"], body.crazy #updates-btn, body.crazy #level-chip,
body.crazy #friends-btn, body.crazy #rename-btn, body.crazy #logout-btn, body.crazy #region-chip, body.crazy #chat,
body.crazy .card:has(#party-solo), body.crazy .card:has(#friends-mini), body.crazy #profile-stats { display: none !important; }

/* privacy link in the menu, and the cookie notice */
.menu-pop #privacy-link { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.menu-pop #privacy-link:hover { background: var(--card-3); }
body.crazy #privacy-link { display: none !important; }
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 150; max-width: 420px; padding: 14px 16px; border-radius: 14px; background: rgba(20, 24, 34, 0.96); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 12px 32px rgba(0,0,0,0.5); display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.consent[hidden] { display: none; }
.consent p { margin: 0; color: #cbd2de; }
.consent a { color: #7fb4ff; }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; }
.consent-btns button { padding: 7px 14px; font-size: 13px; }