/* =====================================================================================================
   UI-B screens: garage (.garage-), settings (.set-), how-to (.howto-), results (.res-), pause (.pause-)
   and the UI-B widgets (.b-). Builds on the design system in app.css (tokens, .btn .card .seg .toggle
   .slider .swatch .tabs .glass .kicker ...) and only adds what those classes do not cover.
   Sizes are rem-based: app.css scales the root font with the viewport height (≈14.4 px at 390 px tall).
   Logical properties everywhere so Arabic (RTL) mirrors; motion is transform/opacity only.
   ===================================================================================================== */

/* ---- Shared header tweaks ------------------------------------------------------------------------- */
.b-head { position: relative; z-index: 2; }
.b-head .back-btn .ico { font-size: 1.4em; }
.b-head-t { display: flex; flex-direction: column; min-width: 0; }
.b-head-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-head-end { margin-inline-start: auto; }

/* ---- Sections, rows ------------------------------------------------------------------------------- */
.b-sec { display: flex; flex-direction: column; gap: .35rem; }
.b-sec + .b-sec { margin-top: .55rem; }
.b-sec-h { display: flex; align-items: center; gap: .4rem; min-height: 1.2rem; }
.b-kicker { display: flex; align-items: center; gap: .4rem; }
.b-anim > * { animation: rise-in .38s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) backwards; }
.b-anim > :nth-child(2) { animation-delay: .04s; }
.b-anim > :nth-child(3) { animation-delay: .08s; }
.b-anim > :nth-child(n+4) { animation-delay: .12s; }

.b-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: .6rem; row-gap: .15rem; min-height: 3.05rem; padding: .38rem .7rem;
  border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .05);
}
.b-row-ico {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.08rem;
  color: var(--brand-hot); background: rgba(255, 106, 0, .12); border: 1px solid rgba(255, 138, 31, .22);
}
.b-row:not(:has(.b-row-ico)) { grid-template-columns: minmax(0, 1fr) auto; }
.b-row-text { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.b-row-label { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.b-row-desc { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.b-row-ctl { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
/* stacked: control on its own line (sliders, segmented) */
.b-row.stack { grid-template-columns: auto minmax(0, 1fr); }
.b-row.stack:not(:has(.b-row-ico)) { grid-template-columns: minmax(0, 1fr); }
.b-row.stack .b-row-ctl { grid-column: 1 / -1; justify-content: stretch; }
.b-row.stack .b-row-ctl > * { flex: 1; min-width: 0; }
.b-row.dim { opacity: .55; }
.b-row.dim .b-row-desc { color: #c9cad3; }

/* ---- Slider with readout -------------------------------------------------------------------------- */
.b-slider { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; }
.b-slider input { flex: 1; min-width: 0; }
.b-slider-val {
  flex: none; min-width: 3.1rem; text-align: center; font-weight: 800; font-size: .88rem; direction: ltr;
  font-variant-numeric: tabular-nums; padding: .12rem .35rem; border-radius: 7px; background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
}

/* ---- Color picker: two-row swatch grid, scrolls sideways when narrow ------------------------------- */
.b-colors {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start;
  gap: .34rem; padding: .25rem .2rem .3rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.b-colors::-webkit-scrollbar { display: none; }
.b-colors .swatch { width: 1.72rem; height: 1.72rem; }
.b-colors .swatch.b-light { border-color: rgba(0, 0, 0, .35); }
.b-colors .swatch.b-light.active { border-color: #fff; }
.b-colors .swatch.custom .ico { font-size: .95rem; }
.b-colors .swatch.custom.active .ico { opacity: 0; }

/* ---- Stepper (shared .stepper look) ---------------------------------------------------------------- */
.b-stepper > button { color: var(--text); }
.b-stepper > output { min-width: 2.8rem; font-size: 1.15rem; }

/* ---- Stat bars -------------------------------------------------------------------------------------- */
.b-stats { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.b-stat { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.b-stat-k { font-size: .7rem; line-height: 1.25; font-weight: 700; color: #c9cad3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-stat-track {
  position: relative; height: .56rem; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .1);
  transform: skewX(var(--skew, -8deg)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
.b-stat-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(.5);
  background: linear-gradient(90deg, #c9ccd3, #ffffff); transition: transform .45s var(--ease-out, ease);
}
[dir="rtl"] .b-stat-fill { transform-origin: right center; background: linear-gradient(270deg, #c9ccd3, #ffffff); }
.b-stat.hi .b-stat-fill { background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-hot)); }
[dir="rtl"] .b-stat.hi .b-stat-fill { background: linear-gradient(270deg, var(--brand-deep), var(--brand), var(--brand-hot)); }
.b-stat.lo .b-stat-fill { background: linear-gradient(90deg, #5d6070, #8a8d9a); }
.b-stat-mark { position: absolute; top: 0; bottom: 0; inset-inline-start: 44%; width: 2px; background: rgba(255, 255, 255, .35); }

/* ---- Option cards ----------------------------------------------------------------------------------- */
.b-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .42rem; }
.b-opt { align-items: center; justify-content: center; gap: .2rem; padding: .4rem .35rem .38rem; min-height: 3.4rem; text-align: center; }
.b-opt-art { display: grid; place-items: center; width: 100%; line-height: 0; }
.b-opt-art svg { width: 100%; height: auto; max-height: 3rem; overflow: visible; }
.b-opt-l { font-size: .76rem; font-weight: 700; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-opt-sub { font-size: .64rem; color: var(--muted); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.b-opt.active .b-opt-l { color: #fff; }
.b-opt.active::after {
  content: ''; position: absolute; top: .25rem; inset-inline-end: .25rem; width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45); animation: pop-in .26s var(--ease-back, ease) backwards;
}

/* ---- Tab rail (icon tabs; the active one shows its label) ------------------------------------------ */
.b-tabs { flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: .18rem; }
.b-tabs::-webkit-scrollbar { display: none; }
.b-tab { padding: 0 .58rem; gap: .38rem; min-width: 2.45rem; }
.b-tab .b-tab-ico { font-size: 1.22rem; }
.b-tab .b-tab-l { display: none; white-space: nowrap; font-size: .84rem; }
.b-tab.active { color: #fff; padding-inline-end: .8rem; }
.b-tab.active .b-tab-l { display: inline; animation: fade-in .25s var(--ease) both; }
.b-tab.active .b-tab-ico { color: var(--brand-hot); }
.b-tabs-labels .b-tab .b-tab-l { display: inline; }

/* ---- Fallback confirm + note ------------------------------------------------------------------------ */
.b-confirm { position: fixed; inset: 0; z-index: var(--z-modal, 40); display: grid; place-items: center; background: rgba(4, 4, 8, .7); animation: fade-in .18s both; }
.b-confirm.out { animation: fade-out .18s both; }
.b-confirm-card { width: min(26rem, 92vw); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.b-confirm-ico { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 9px; font-size: 1.25rem; background: rgba(255, 255, 255, .1); }
.b-confirm-ico.danger { background: linear-gradient(180deg, #ff6d82, #d8203f); color: #fff; }
.b-confirm-text { font-size: .9rem; line-height: 1.45; }
.b-confirm-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.b-note { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: var(--z-toasts, 60); padding: .45rem 1rem; border-radius: 999px; background: #1c1c26; border: 1px solid var(--line-2); font-weight: 700; animation: fade-in .2s both; }

/* =====================================================================================================
   GARAGE — live showroom kart on the stage side, glass panel (header + content + vertical icon rail) on the other.
   Cards: 3D thumbnails (render/thumbs.js) in sideways rows, rarity frames, exclusive holographic frame.
   ===================================================================================================== */
.garage-screen {
  --gp-w: min(28.6rem, 50vw);
  --rail-w: 3.95rem;
  --cg: .5rem;
  display: grid; gap: 0 .9rem;
  grid-template-columns: minmax(0, 1fr) var(--gp-w);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'head panel' 'stage panel' 'foot panel';
}
.garage-head { grid-area: head; min-width: 0; }
.garage-stage { grid-area: stage; position: relative; min-height: 0; touch-action: none; cursor: grab; }
.garage-stage:active { cursor: grabbing; }
/* soft vignette on the stage side so the header and the bottom bar read over any showroom lighting */
.garage-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(270deg, rgba(7, 7, 11, .7) 0%, rgba(7, 7, 11, .3) 40%, rgba(7, 7, 11, 0) 58%),
    linear-gradient(0deg, rgba(7, 7, 11, .6), rgba(7, 7, 11, 0) 26%),
    radial-gradient(60% 34% at 0% 0%, rgba(7, 7, 11, .78), rgba(7, 7, 11, 0));
}
[dir="rtl"] .garage-screen::before {
  background: linear-gradient(90deg, rgba(7, 7, 11, .7) 0%, rgba(7, 7, 11, .3) 40%, rgba(7, 7, 11, 0) 58%),
    linear-gradient(0deg, rgba(7, 7, 11, .6), rgba(7, 7, 11, 0) 26%),
    radial-gradient(60% 34% at 100% 0%, rgba(7, 7, 11, .78), rgba(7, 7, 11, 0));
}
.garage-hint {
  position: absolute; top: .15rem; inset-inline-start: 0; display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600; color: rgba(255, 255, 255, .55); pointer-events: none;
  animation: fade-in .6s var(--ease) .8s both;
}
.garage-hint-ico { font-size: 1rem; color: var(--brand-hot); animation: spin 6s linear infinite; }
.garage-plate-body {
  position: absolute; bottom: .3rem; inset-inline-start: .15rem; padding: .12rem .6rem; pointer-events: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, rgba(255, 106, 0, .9), rgba(255, 106, 0, 0)); transform: skewX(var(--skew));
}
[dir="rtl"] .garage-plate-body { letter-spacing: 0; background: linear-gradient(270deg, rgba(255, 106, 0, .9), rgba(255, 106, 0, 0)); }

/* ---- bottom bar: race number + name + randomize + reset ---------------------------------------------- */
.garage-footwrap { grid-area: foot; min-width: 0; padding-top: .35rem; }
.garage-foot { display: flex; align-items: center; gap: .45rem; min-width: 0; animation: rise-in .5s var(--ease-out) .15s backwards; }
.garage-plate-num {
  --p: #ff6a00; --ink: #fff; --a: #101114;
  display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .35rem; flex: none;
  font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--ink); direction: ltr;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--p);
  border-radius: 9px; transform: skewX(var(--skew));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px var(--a), 0 8px 18px rgba(0, 0, 0, .5);
  transition: background-color .3s;
}
.garage-name-wrap {
  flex: 1 1 auto; min-width: 5.5rem; max-width: 15rem; display: flex; align-items: center; gap: .45rem;
  height: max(40px, 2.75rem); padding: 0 .7rem; margin-inline-start: .25rem;
  border-radius: var(--radius-s); background: rgba(8, 8, 12, .62); border: 1px solid var(--line-2); cursor: text;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s;
}
.garage-name-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 106, 0, .2); }
.garage-name-ico { color: var(--brand-hot); font-size: 1.05rem; flex: none; }
.garage-name-edit { color: rgba(255, 255, 255, .4); font-size: .9rem; flex: none; }
.garage-name { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-weight: 700; font-size: .98rem; unicode-bidi: plaintext; }
.garage-name::placeholder { color: rgba(255, 255, 255, .35); }
.garage-foot .btn { min-height: max(40px, 2.75rem); flex: none; }
.garage-dice { padding: 0 .9rem; }
.garage-dice .ico { color: var(--brand-hot); }
.garage-dice.rolling .ico { animation: garage-dice .5s var(--ease-back); }
@keyframes garage-dice { from { transform: skewX(var(--unskew)) rotate(-200deg) scale(.6); } to { transform: skewX(var(--unskew)) rotate(0) scale(1); } }
@media (max-width: 800px) {
  .garage-dice { padding: 0 .75rem; }
  .garage-dice .lbl { display: none; }
}

/* ---- panel ------------------------------------------------------------------------------------------ */
.garage-panel.panel {
  grid-area: panel; min-height: 0; min-width: 0; padding: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w);
  animation: garage-in .45s var(--ease-out) backwards;
}
@keyframes garage-in { from { opacity: 0; translate: 1.5rem 0; } to { opacity: 1; translate: 0 0; } }
[dir="rtl"] .garage-panel.panel { animation-name: garage-in-rtl; }
@keyframes garage-in-rtl { from { opacity: 0; translate: -1.5rem 0; } to { opacity: 1; translate: 0 0; } }
.gp-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .45rem; padding: .55rem .6rem .45rem; }
.gp-head { flex: none; display: flex; align-items: center; gap: .6rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); min-width: 0; }
.gp-ico {
  flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; font-size: 1.12rem; color: #fff;
  background: var(--grad-brand); transform: skewX(var(--skew));
  box-shadow: 0 4px 14px rgba(255, 106, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gp-ico > .ico { transform: skewX(var(--unskew)); }
.gp-head.x .gp-ico { background: linear-gradient(135deg, #fff1b8, #ffc21f 40%, #ff5a1f 80%, #d8203f); box-shadow: 0 4px 16px rgba(255, 140, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.gp-head-t { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.gp-title { font-size: 1.1rem; font-weight: 800; line-height: 1.1; color: #fff; }
.gp-desc { font-size: .68rem; line-height: 1.3; color: var(--muted); }
.gp-head.gp-in .gp-title, .gp-head.gp-in .gp-desc, .gp-head.gp-in .gp-ico > .ico { animation: gar-fade .32s var(--ease) both; }
.gp-head.gp-in .gp-desc { animation-delay: .05s; }
@keyframes gar-fade { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
.gp-head.gp-in .gp-ico > .ico { animation-name: gar-fade-ico; }
@keyframes gar-fade-ico { from { opacity: 0; transform: skewX(var(--unskew)) scale(.6); } to { opacity: 1; transform: skewX(var(--unskew)); } }

.gp-body {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .7rem; padding: .05rem 0 .35rem; scrollbar-width: none;
}
.gp-body::-webkit-scrollbar { display: none; }
/* content keeps its size and the body scrolls (rows are scroll containers, which flexbox would squash to 0) */
.gp-body > *, .gsec > * { flex-shrink: 0; }
.gp-body.fill { overflow: hidden; padding-bottom: .1rem; }
.gp-body.fill > .gar-row.two { flex: 1 1 auto; min-height: 0; }
.gp-body.gp-in > * { animation: gar-rise .4s var(--ease-out) backwards; }
.gp-body.gp-in > :nth-child(2) { animation-delay: .05s; }
.gp-body.gp-in > :nth-child(3) { animation-delay: .1s; }
.gp-body.gp-in > :nth-child(n+4) { animation-delay: .14s; }
@keyframes gar-rise { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }

/* sections */
.gsec { gap: .38rem; }
.gsec + .gsec { margin-top: 0; }
.gsec-h { justify-content: space-between; min-height: 1.35rem; }
.gsec-chip {
  display: inline-flex; align-items: center; gap: .32rem; padding: .1rem .5rem .1rem .15rem; border-radius: 999px;
  font-size: .66rem; font-weight: 800; color: #d9dae0; direction: ltr; letter-spacing: .04em;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.gsec-dot { width: .95rem; height: .95rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 8px rgba(0, 0, 0, .4); transition: background-color .25s; }

/* ---- vertical icon rail (on the screen edge) ----------------------------------------------------------- */
.gar-rail {
  min-height: 0; display: flex; flex-direction: column; gap: .08rem; padding: .35rem .28rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .22)); border-inline-start: 1px solid var(--line);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.gar-rail::-webkit-scrollbar { display: none; }
.gar-rail .gar-tab {
  position: relative; flex: 1 1 0; min-height: max(30px, 2.12rem); max-height: 3.7rem; min-width: 0; padding: .14rem .06rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .14rem;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: inherit;
  transition: color .2s, background-color .2s;
}
.gar-rail .gar-tab:active { transform: scale(.94); }
.gar-rail .gar-tab.active { color: #fff; padding: .14rem .06rem; background: linear-gradient(180deg, rgba(255, 106, 0, .28), rgba(255, 106, 0, .08)); }
.gar-rail .gar-tab::before {
  content: ''; position: absolute; inset-inline-start: -.28rem; top: 20%; bottom: 20%; width: 3px; border-radius: 3px;
  background: var(--brand); box-shadow: 0 0 10px rgba(255, 106, 0, .9); opacity: 0; transform: scaleY(.3);
  transition: opacity .2s, transform .28s var(--ease-back);
}
.gar-rail .gar-tab.active::before { opacity: 1; transform: none; }
.gar-rail .gar-tab.active::after { content: none; }
.gar-tab-ico { display: grid; place-items: center; font-size: 1.16rem; line-height: 0; transition: transform .28s var(--ease-back), color .2s; }
.gar-tab.active .gar-tab-ico { color: var(--brand-hot); transform: scale(1.1); }
.gar-tab-l { display: block; max-width: 100%; font-size: .6rem; font-weight: 700; line-height: 1.05; text-align: center; white-space: nowrap; }
[dir="rtl"] .gar-tab-l { font-size: .64rem; }
.gar-rail .gar-tab-x { color: #e6c27a; }
.gar-rail .gar-tab-x .gar-tab-ico { color: #ffd56b; filter: drop-shadow(0 0 6px rgba(255, 180, 40, .6)); }
.gar-rail .gar-tab-x.active { background: linear-gradient(180deg, rgba(255, 170, 40, .3), rgba(255, 60, 40, .1)); }
.gar-rail .gar-tab-x::before { background: linear-gradient(180deg, #ffd56b, #ff5a1f); box-shadow: 0 0 10px rgba(255, 170, 40, .9); }

/* ---- card rows ------------------------------------------------------------------------------------------ */
.gar-row {
  /* two whole cards + a sliver of the next one: a sliver reads as "more", half a card read as a cut-off name */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--cg)) / 2.12); gap: var(--cg);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: .15rem .1rem .2rem; margin: -.15rem -.1rem -.2rem;
}
.gar-row::-webkit-scrollbar { display: none; }
.gar-row.two { grid-template-rows: repeat(2, minmax(0, 1fr)); }
/* edge fades where more cards wait (set by cardRow on scroll) */
.gar-row.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.1rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.1rem), transparent); }
.gar-row.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.1rem); mask-image: linear-gradient(90deg, transparent, #000 2.1rem); }
.gar-row.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.1rem, #000 calc(100% - 2.1rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.1rem, #000 calc(100% - 2.1rem), transparent); }
[dir="rtl"] .gar-row.fade-end { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 2.1rem), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 2.1rem), transparent); }
[dir="rtl"] .gar-row.fade-start { -webkit-mask-image: linear-gradient(270deg, transparent, #000 2.1rem); mask-image: linear-gradient(270deg, transparent, #000 2.1rem); }
[dir="rtl"] .gar-row.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.1rem, #000 calc(100% - 2.1rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.1rem, #000 calc(100% - 2.1rem), transparent); }
.gar-row > .gar-card { scroll-snap-align: start; }
/* a card cut by the row edge shows only its picture (never a clipped name) */
.gar-card .gar-txt, .gar-card .gar-tag { transition: opacity .18s var(--ease); }
.gar-card.peek .gar-txt, .gar-card.peek .gar-tag, .gar-card.peek .gar-check { opacity: 0; }

/* ---- cards ------------------------------------------------------------------------------------------------ */
.gar-card.card {
  --rc: #9a9ca8; --rc2: rgba(154, 156, 168, .16); --rc3: rgba(154, 156, 168, .35);
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-width: 0; min-height: 0;
  border-radius: 12px; border: 1px solid var(--rc3); overflow: hidden; text-align: start;
  background: linear-gradient(180deg, #15161e, #0f1016); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transition: transform .16s var(--ease), border-color .2s;
}
.gar-card[data-rarity="rare"] { --rc: #3aa2ff; --rc2: rgba(47, 155, 255, .22); --rc3: rgba(47, 155, 255, .5); }
.gar-card[data-rarity="epic"] { --rc: #c06bff; --rc2: rgba(180, 77, 255, .24); --rc3: rgba(180, 77, 255, .55); }
.gar-card[data-rarity="legendary"] { --rc: #ffc21f; --rc2: rgba(255, 194, 31, .24); --rc3: rgba(255, 194, 31, .6); }
.gar-card.card:active { transform: scale(.965); }
.gar-card.card.active { border-color: var(--brand); background: linear-gradient(180deg, #1c1510, #120f0d); box-shadow: 0 0 0 1px var(--brand), 0 0 18px rgba(255, 106, 0, .45), 0 6px 16px rgba(0, 0, 0, .35); }
.gar-card.b-opt.active::after, .gar-card.card.active::after { content: none; }
/* selection ring fades in on top of the picture */
.gar-card::before {
  content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 20px rgba(255, 106, 0, .35); opacity: 0; transition: opacity .22s var(--ease);
}
.gar-card.active::before { opacity: 1; }

.gar-pic {
  position: relative; display: block; flex: none; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 85% at 50% 38%, #252733 0%, #14151c 62%, #0c0d12 100%);
}
.gar-row.two .gar-pic { flex: 1 1 auto; aspect-ratio: auto; min-height: 2.5rem; }
/* two-row grids: the name always gets two lines, so the picture (and its cached thumbnail size) never depends on the
   name's length or on the web font arriving */
.gar-row.two .gar-txt { min-height: calc(.78rem + .8rem * 1.14 * 2 + .1rem + .6rem * 1.2 + 1px); justify-content: flex-start; }
.gar-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .38s var(--ease); -webkit-user-drag: none; }
.gar-pic[data-state="ready"] .gar-thumb, .gar-pic[data-state="stale"] .gar-thumb { opacity: 1; }
/* skeleton: soft floor shadow + moving sheen until the thumbnail arrives (also while a colour change re-renders) */
.gar-pic[data-state="loading"]::before {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 16%; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent);
}
.gar-pic[data-state="loading"]::after, .gar-pic[data-state="stale"]::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .09) 50%, transparent 75%);
  transform: translateX(-100%); animation: gar-shimmer 1.25s ease-in-out infinite;
}
@keyframes gar-shimmer { to { transform: translateX(100%); } }
/* rarity tint rising from the bottom of the picture */
.gar-card .gar-pic { box-shadow: inset 0 -26px 26px -18px var(--rc2); }
.gar-art { position: absolute; inset: 0; display: grid; place-items: center; }
.gar-fb { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; color: rgba(255, 255, 255, .3); }
.gar-none { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .45); font-size: 1.2rem; }

.gar-check {
  position: absolute; top: .32rem; inset-inline-end: .32rem; z-index: 7; display: grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .74rem; color: #fff; background: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 2px rgba(10, 10, 14, .55); opacity: 0; transform: scale(.4);
  transition: opacity .18s var(--ease), transform .28s var(--ease-back);
}
.gar-card.active .gar-check { opacity: 1; transform: none; }
.gar-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  transform: translateX(-120%);
}
.gar-card[data-rarity="legendary"] .gar-shine { opacity: 1; animation: gar-sweep 5.2s ease-in-out infinite; }
@keyframes gar-sweep { 0%, 58% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.gar-txt { position: relative; display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .36rem .5rem .42rem; }
.gar-txt::before {
  content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rc), transparent); opacity: .85;
}
.gar-card .gar-name {
  display: block; max-width: 100%; font-size: .8rem; font-weight: 800; line-height: 1.14; color: #f3f3f6;
  white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: none;
}
.gar-card.active .gar-name { color: #fff; }
.gar-sub { display: flex; align-items: center; gap: .32rem; min-width: 0; font-size: .6rem; font-weight: 700; line-height: 1.2; color: var(--muted); }
.gar-sub-t { min-width: 0; }
.gar-dot { flex: none; width: .42rem; height: .42rem; border-radius: 1.5px; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.gar-card[data-rarity="rare"] .gar-sub { color: #8cc6ff; }
.gar-card[data-rarity="epic"] .gar-sub { color: #d7a6ff; }
.gar-card[data-rarity="legendary"] .gar-sub { color: #ffd66e; }
/* ---- exclusive cards: a class above every rarity, drawn in their set's palette -----------------------------
   --x1 primary, --x2 light, --x3 deep, --x4 base (set by thumbCard from the item's colours; gold by default).
   Rotating holographic ring, moving foil + twinkles, glowing picture well, flowing gradient name, set ribbon. */
.gar-card[data-rarity="exclusive"] {
  --x1: #ffc21f; --x2: #fff0b8; --x3: #a86a00; --x4: #0b0b0d;
  --rc: var(--x1); --rc2: color-mix(in srgb, var(--x1) 34%, transparent); --rc3: transparent;
  background:
    radial-gradient(130% 70% at 50% 100%, color-mix(in srgb, var(--x1) 16%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--x4) 60%, #19161d), #09080b);
  box-shadow: 0 0 16px color-mix(in srgb, var(--x1) 32%, transparent), 0 6px 16px rgba(0, 0, 0, .42);
}
.gar-card[data-rarity="exclusive"].active {
  box-shadow: 0 0 0 1.5px var(--x1), 0 0 26px color-mix(in srgb, var(--x1) 62%, transparent), 0 6px 16px rgba(0, 0, 0, .42);
}
.gar-card[data-rarity="exclusive"]::before { box-shadow: inset 0 0 0 2px var(--x1), inset 0 0 22px color-mix(in srgb, var(--x1) 45%, transparent); }
.gar-card[data-rarity="exclusive"] .gar-check { background: var(--x1); color: #120d02; box-shadow: 0 0 10px var(--x1), 0 0 0 2px rgba(10, 10, 14, .55); }
.gar-card[data-rarity="exclusive"] .gar-pic {
  background: radial-gradient(90% 85% at 50% 42%, color-mix(in srgb, var(--x3) 42%, #1d1a22) 0%, #110f15 60%, #09080c 100%);
  box-shadow: inset 0 -30px 28px -18px var(--rc2), inset 0 0 0 1px color-mix(in srgb, var(--x1) 18%, transparent);
}
.gar-card[data-rarity="exclusive"] .gar-shine { display: none; }
.gar-card[data-rarity="exclusive"] .gar-txt::before { height: 2px; background: linear-gradient(90deg, transparent, var(--x3), var(--x2), var(--x1), var(--x2), var(--x3), transparent); box-shadow: 0 0 8px var(--x1); }
.gar-card[data-rarity="exclusive"] .gar-name {
  background: linear-gradient(90deg, var(--x2), color-mix(in srgb, var(--x1) 70%, #fff) 30%, var(--x2) 50%, var(--x1) 75%, var(--x2));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7));
}
/* only the equipped piece's name flows (text-clip gradients repaint every frame) */
.gar-card[data-rarity="exclusive"].active.vis .gar-name { animation: gar-flow 5s linear infinite; }
.gar-card[data-rarity="exclusive"] .gar-sub { color: color-mix(in srgb, var(--x2) 72%, #a9a9b4); }
.gar-card[data-rarity="exclusive"] .gar-dot { background: var(--x1); box-shadow: 0 0 8px var(--x1); }
@keyframes gar-flow { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }

/* holographic ring: a rotating conic gradient in the set colours seen through a 2px ring mask.
   Motion runs only while the card is on screen (.vis, set by the garage's IntersectionObserver): a tab can hold
   dozens of exclusive cards and each rotating layer costs GPU memory on phones. */
.gar-holo {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.gar-holo::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(var(--x3), var(--x1), var(--x2), #fff, var(--x2), var(--x1), var(--x3), var(--x1), var(--x2), #fff, var(--x1), var(--x3));
}
.gar-card.vis .gar-holo::before { animation: gar-holo 3.6s linear infinite; }
@keyframes gar-holo { to { rotate: 360deg; } }

/* foil: a sheen that keeps travelling across the picture (transform only) + two twinkles */
.gar-foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.gar-foil::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 10%, color-mix(in srgb, var(--x2) 26%, transparent) 38%, rgba(255, 255, 255, .28) 50%, color-mix(in srgb, var(--x1) 24%, transparent) 62%, transparent 90%);
}
.gar-card.vis .gar-foil::before { opacity: 1; animation: gar-foil 4.8s ease-in-out infinite; }
@keyframes gar-foil { 0%, 30% { transform: translateX(0); } 100% { transform: translateX(270%); } }
.gar-foil::after {
  content: ''; position: absolute; top: 18%; inset-inline-end: 16%; width: .7rem; height: .7rem; background: #fffbea; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px var(--x2));
}
.gar-card.vis .gar-foil::after { animation: gar-twinkle 3.1s ease-in-out infinite; }
@keyframes gar-twinkle { 0%, 68%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 78% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: .15; transform: scale(.5) rotate(90deg); } }

.gar-tag {
  position: absolute; top: .32rem; inset-inline-start: .32rem; z-index: 7; max-width: calc(100% - 2.3rem);
  padding: .08rem .42rem; border-radius: 4px; font-size: .56rem; font-weight: 800; line-height: 1.35; color: #2a1200; white-space: nowrap;
  background: linear-gradient(90deg, #ffe08a, #ff9a2e); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transform: skewX(var(--skew));
}
.gar-card[data-rarity="exclusive"] .gar-tag {
  color: #120d02; background: linear-gradient(90deg, var(--x2), var(--x1), var(--x2)); box-shadow: 0 0 10px color-mix(in srgb, var(--x1) 55%, transparent), 0 2px 8px rgba(0, 0, 0, .45);
}
/* locked: still clearly visible (seeing what the special players drive is part of the prestige, EXCLUSIVES.md §5):
   the piece keeps its colours and the lock is a corner badge, never over the kart */
.gar-card.locked .gar-thumb, .gar-card.locked .gar-art { filter: saturate(.9); }
.gar-card.locked .gar-foil { opacity: .35; }
.gar-lock {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .5));
}
.gar-lock > .ico {
  width: 1.9rem; height: 1.9rem; padding: .42rem; border-radius: 50%; font-size: 1.05rem; color: var(--x1, #ffd56b);
  background: rgba(12, 10, 10, .8); border: 1px solid color-mix(in srgb, var(--x1, #ffd56b) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--x1, #ffa028) 45%, transparent);
}
.gar-pic > .gar-lock { inset: auto; top: .3rem; inset-inline-end: .3rem; z-index: 7; background: none; }
.gar-pic > .gar-lock > .ico { width: 1.4rem; height: 1.4rem; padding: .26rem; font-size: .78rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 10px color-mix(in srgb, var(--x1, #ffa028) 40%, transparent); }
/* set emblem while a kart piece's 3D thumbnail renders (software GL on slow phones takes seconds) */
.gar-ph { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: .55; transition: opacity .3s var(--ease); }
.gar-ph > svg { display: block; width: auto; height: 62%; max-width: 46%; filter: drop-shadow(0 0 .5rem color-mix(in srgb, var(--x1, #ffc21f) 55%, transparent)); }
.gar-pic[data-state="ready"] > .gar-ph, .gar-pic[data-state="stale"] > .gar-ph { opacity: 0; }
.gar-pic:has(> .gar-ph) > .gar-fb { display: none; } /* a failed thumbnail keeps the emblem */
.gar-card.nope { animation: gar-nope .38s var(--ease); }
@keyframes gar-nope { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* exclusive group at the top of a regular tab */
.gsec-x {
  padding: .45rem .45rem .5rem; border-radius: 12px; gap: .42rem;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 150, 40, .16), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 194, 31, .1), transparent 60%), rgba(20, 13, 8, .6);
  border: 1px solid rgba(255, 190, 80, .3);
}
.gx-head { display: flex; align-items: center; gap: .38rem; min-width: 0; }
.gx-ico { display: grid; place-items: center; color: #ffd56b; font-size: 1rem; filter: drop-shadow(0 0 6px rgba(255, 180, 40, .7)); }
.gx-title { font-size: .86rem; font-weight: 800; background: linear-gradient(90deg, #fff1b8, #ffc21f 50%, #ff9a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-sub { margin-inline-start: auto; font-size: .62rem; font-weight: 700; color: #d9b98a; text-align: end; }
.gsec-x .kicker { color: #ffcf8a; }

/* ---- Exclusive tab: one block per set ----------------------------------------------------------------------- */
.gxs {
  --x1: #ffc21f; --x2: #fff0b8; --x3: #a86a00; --x4: #0b0b0d; --gxh: 7.9rem;
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .5rem; padding: .55rem .5rem .55rem;
  border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--x1) 42%, transparent);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--x1) 24%, transparent), transparent 62%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--x3) 30%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--x4) 70%, #16131a), #09080c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 24px color-mix(in srgb, var(--x1) 16%, transparent);
}
[dir="rtl"] .gxs {
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--x1) 24%, transparent), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--x3) 30%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--x4) 70%, #16131a), #09080c);
}
.gxs + .gxs { margin-top: .1rem; }
/* gold line along the top edge + a slow light sweep over the block */
.gxs::before {
  content: ''; position: absolute; top: 0; inset-inline: 6%; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--x3), var(--x2), #fff, var(--x2), var(--x3), transparent);
  box-shadow: 0 0 12px var(--x1);
}
.gxs-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gxs-glow::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; opacity: .7;
  background: linear-gradient(110deg, transparent, color-mix(in srgb, var(--x2) 12%, transparent) 50%, transparent);
  animation: gar-foil 7s ease-in-out infinite;
}
.gxs.locked .gxs-glow::before { animation: none; opacity: 0; }
.gxs-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-width: 0; }
.gxs-emblem { display: block; width: 2.35rem; height: 2.35rem; filter: drop-shadow(0 0 .5rem color-mix(in srgb, var(--x1) 80%, transparent)); animation: gxs-bob 3.2s ease-in-out infinite; }
.gxs-emblem svg { display: block; width: 100%; height: 100%; }
@keyframes gxs-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
.gxs-t { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.gxs-name {
  font-size: 1.06rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--x2), var(--x1) 35%, #fff 50%, var(--x1) 65%, var(--x2)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .35rem color-mix(in srgb, var(--x1) 40%, transparent));
}
.gxs:not(.locked) .gxs-name { animation: gar-flow 4.5s linear infinite; }
.gxs-sub { font-size: .62rem; font-weight: 700; line-height: 1.25; color: color-mix(in srgb, var(--x2) 68%, #b3b3bd); }
.gxs-equip.btn {
  min-height: max(34px, 2.3rem); padding: 0 .75rem; gap: .35rem; font-size: .74rem; font-weight: 800; color: #140d02; border: 0;
  background: linear-gradient(90deg, var(--x3), var(--x1), var(--x2), var(--x1), var(--x3)); background-size: 200% 100%;
  animation: gar-flow 3.5s linear infinite; box-shadow: 0 0 16px color-mix(in srgb, var(--x1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.gxs-equip.btn .ico { color: #140d02; }
.gxs-count, .gxs-lock {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap;
  font-size: .64rem; font-weight: 800; color: var(--x2); border: 1px solid color-mix(in srgb, var(--x1) 55%, transparent);
  background: rgba(0, 0, 0, .35);
}
.gxs-count { direction: ltr; }
.gxs-lock .ico { color: var(--x1); font-size: .85rem; }
.gxs .gxs-row.two { height: calc(2 * var(--gxh) + var(--cg)); }
.gxs.locked .gxs-emblem { filter: grayscale(.3) drop-shadow(0 0 .35rem color-mix(in srgb, var(--x1) 50%, transparent)); }

/* ---- exclusive art (moments, names, sounds) ---------------------------------------------------------------- */
.gxa { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.gar-card:not(.vis) .gxa *, .gar-card:not(.vis) .gxa *::before, .gar-card:not(.vis) .gxa *::after { animation-play-state: paused !important; }
.gxa-em { position: relative; z-index: 2; display: block; width: 2.9rem; height: 2.9rem; filter: drop-shadow(0 0 .55rem var(--x1)); }
.gxa-em svg { display: block; width: 100%; height: 100%; }
.gxa-rays {
  position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--x1) 26%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 22%, transparent 52%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 22%, transparent 52%);
  animation: gar-holo 18s linear infinite;
}
/* entrance: sigil ring on the floor, a bolt strikes, flash, the emblem pops */
.gxa-entrance .gxa-em { animation: gxa-pop 2.6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.gxa-ring {
  position: absolute; left: 50%; bottom: 10%; width: 64%; height: 20%; translate: -50% 0; border-radius: 50%;
  border: 2px solid var(--x1); box-shadow: 0 0 12px var(--x1), inset 0 0 10px var(--x1); animation: gxa-ring 2.6s ease-out infinite;
}
.gxa-beam {
  position: absolute; left: 50%; top: -6%; width: 1.5rem; height: 86%; translate: -50% 0; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, #fff, var(--x2) 45%, var(--x1));
  clip-path: polygon(55% 0, 70% 0, 52% 42%, 78% 42%, 34% 100%, 46% 56%, 22% 56%);
  filter: drop-shadow(0 0 6px var(--x1)); animation: gxa-bolt 2.6s steps(1) infinite;
}
.gxa-flash { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--x2) 75%, #fff), transparent 60%); animation: gxa-flash 2.6s ease-out infinite; }
@keyframes gxa-bolt { 0%, 44% { opacity: 0; } 46% { opacity: 1; } 49% { opacity: .2; } 51% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes gxa-flash { 0%, 45% { opacity: 0; } 50% { opacity: .9; } 70%, 100% { opacity: 0; } }
@keyframes gxa-pop { 0%, 48% { transform: scale(.55); opacity: .35; } 60% { transform: scale(1.12); opacity: 1; } 70%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(.55); opacity: .35; } }
@keyframes gxa-ring { 0%, 46% { transform: scale(.7); opacity: .5; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* victory: rays, confetti rain in the set colours, the emblem on a glowing podium */
.gxa-victory .gxa-em { width: 3.1rem; height: 3.1rem; animation: gxs-bob 2.4s ease-in-out infinite; margin-bottom: .5rem; }
.gxa-confetti {
  position: absolute; inset: -40% 0 0; z-index: 1;
  background:
    radial-gradient(circle, var(--x2) 0 1.4px, transparent 2px) 0 0 / 17px 19px,
    radial-gradient(circle, var(--x1) 0 1.6px, transparent 2.2px) 7px 9px / 23px 21px;
  animation: gxa-rain 3.2s linear infinite;
}
.gxa-confetti.c2 { opacity: .6; animation-duration: 4.6s; background-size: 29px 31px, 13px 27px; }
@keyframes gxa-rain { from { transform: translateY(-20%); } to { transform: translateY(20%); } }
.gxa-podium { position: absolute; left: 50%; bottom: 12%; width: 58%; height: 16%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--x1) 80%, #fff), transparent); animation: xgp-pulse 2.2s ease-in-out infinite; }
@keyframes xgp-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* names, titles, horns */
/* name effect: the player's own name on a floating nameplate, as it hangs over their kart in a match */
.gxa-name { font-size: 1.32rem; padding: 0 .35rem; }
.gxa-name .xfx-name {
  max-width: 100%; padding: .16em .55em .2em; border-radius: .5em;
  background: linear-gradient(180deg, rgba(10, 9, 12, .82), rgba(10, 9, 12, .55));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x1) 45%, transparent), 0 0 18px color-mix(in srgb, var(--x1) 28%, transparent), 0 6px 14px rgba(0, 0, 0, .5);
}
.gxa-name::after {
  content: ''; position: absolute; left: 50%; top: calc(50% + .95em); width: 0; height: 0; translate: -50% 0;
  border: .32em solid transparent; border-top-color: rgba(10, 9, 12, .7);
}
.gxa-title .xfx-title { margin: 0; font-size: .68rem; max-width: 92%; }
.gxa-badge { padding: .2rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 800; color: #140d02; background: linear-gradient(90deg, var(--x2), var(--x1)); }
.gxa-horn .xfx-wave .xfx-emblem { width: 2.6rem; height: 2.6rem; }
.gxa-horn .xfx-bars { height: 2.1rem; }
.gxa-glyph { position: absolute; inset-inline-end: 18%; bottom: 16%; z-index: 3; width: 1.3rem; height: 1.3rem; color: var(--x2); filter: drop-shadow(0 0 4px var(--x1)); }
.gxa-glyph-svg { display: block; width: 100%; height: 100%; }

/* ---- replay chips on the stage (equipped entrance / victory) ------------------------------------------------ */
.gx-moments { position: absolute; bottom: 2.2rem; inset-inline-start: .15rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.gx-moments:empty { display: none; }
.gx-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: max(32px, 2.1rem); padding: 0 .75rem 0 .55rem; border-radius: 999px;
  font: inherit; font-size: .7rem; font-weight: 800; color: #ffe9b0; cursor: pointer;
  background: rgba(22, 15, 5, .72); border: 1px solid rgba(255, 200, 90, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 14px rgba(255, 170, 40, .3);
  animation: rise-in .4s var(--ease-out) backwards;
}
.gx-chip .ico { color: #ffc21f; font-size: .9rem; }
.gx-chip:active { transform: scale(.95); }
/* entrance preview on the turntable: its banner and flashes stay on the stage side, above the kart */
.garage-stage > .xfx-banner, .garage-stage > .xfx-flash, .garage-stage > .xfx-glitch { position: absolute; z-index: 3; }
.garage-stage > .xfx-banner { --band-top: .6rem; }
.garage-stage > .xfx-banner .xfx-b-rays { inline-size: 160%; inset-inline-start: -30%; inset-block-start: calc(.6rem + 3.5rem - 80%); }
.garage-stage > .xfx-banner .xfx-b-band { inline-size: 100%; padding: 1.35rem .6rem .55rem; }
.garage-stage > .xfx-banner .xfx-b-emblem { inline-size: 2.8rem; block-size: 2.8rem; inset-block-start: -1.5rem; }
.garage-stage > .xfx-banner .xfx-b-title { font-size: clamp(1.15rem, 6.6vh, 1.8rem); }
.garage-stage > .xfx-banner .xfx-b-kicker { font-size: .62rem; }
.garage-stage > .xfx-banner .xfx-b-name { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .gar-card .gar-holo::before, .gar-card .gar-foil::before, .gar-card .gar-foil::after, .gxs-glow::before, .gxs-emblem, .gxs-name, .gxa *, .gar-card[data-rarity="exclusive"] .gar-name { animation: none !important; }
}

/* ---- colour rows ---------------------------------------------------------------------------------------- */
.garage-screen .b-colors { gap: .36rem; padding: .3rem .25rem .32rem; }
.garage-screen .b-colors .swatch { width: 2.4rem; height: 2.4rem; }
.garage-screen .b-colors .swatch.active { transform: scale(1.04); box-shadow: 0 0 0 2px #0d0d12, 0 0 0 4px var(--brand), 0 4px 12px rgba(0, 0, 0, .45); }
.garage-screen .b-colors .swatch.custom { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.garage-screen .b-colors .swatch.custom.active { box-shadow: 0 0 0 2px #0d0d12, 0 0 0 4px var(--brand), 0 4px 12px rgba(0, 0, 0, .45); }

/* ---- body tab: name, description and stat meters -------------------------------------------------------- */
.gb-info {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: .75rem; align-items: center;
  padding: .55rem .65rem; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
}
.gb-meta { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.gb-name { font-size: 1.02rem; font-weight: 800; line-height: 1.1; color: #fff; }
.gb-desc { font-size: .7rem; line-height: 1.3; color: #d0d1d9; }
.gb-hint { font-size: .6rem; line-height: 1.3; color: var(--muted); margin-top: .2rem; }
.gar-meters { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.gar-meter { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 2.3rem; align-items: center; gap: .45rem; }
.gar-meter-k { font-size: .62rem; font-weight: 700; line-height: 1.2; color: #c9cad3; white-space: nowrap; }
.gar-meter-track {
  position: relative; height: .52rem; overflow: hidden; transform: skewX(var(--skew));
  background: rgba(255, 255, 255, .09);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.gar-meter-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #8d909c, #eceef3); transition: transform .7s var(--ease-out);
}
[dir="rtl"] .gar-meter-fill { transform-origin: right center; background: linear-gradient(270deg, #8d909c, #eceef3); }
.gar-meter.hi .gar-meter-fill { background: linear-gradient(90deg, var(--brand-deep), var(--brand), #ffc27a); }
[dir="rtl"] .gar-meter.hi .gar-meter-fill { background: linear-gradient(270deg, var(--brand-deep), var(--brand), #ffc27a); }
.gar-meter.lo .gar-meter-fill { background: linear-gradient(90deg, #4b4e5a, #7d8090); }
[dir="rtl"] .gar-meter.lo .gar-meter-fill { background: linear-gradient(270deg, #4b4e5a, #7d8090); }
.gar-meter-base { display: none; }
.gar-meter-v { font-size: .66rem; font-weight: 800; text-align: end; direction: ltr; font-variant-numeric: tabular-nums; color: #b9bac4; }
.gar-meter.hi .gar-meter-v { color: var(--brand-hot); }
.gar-meter.lo .gar-meter-v { color: #858896; }

/* ---- livery number row ---------------------------------------------------------------------------------- */
.garage-num-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .3rem .3rem .65rem;
  border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
[dir="rtl"] .garage-num-row { padding: .3rem .65rem .3rem .3rem; }

/* ---- horn cards ------------------------------------------------------------------------------------------ */
.garage-horns .gar-pic { background: radial-gradient(80% 95% at 50% 42%, color-mix(in srgb, var(--rc) 22%, #1d1715) 0%, #15131a 62%, #0c0c11 100%); }
/* horn "speaker": a lit metal disc in the rarity colour, glyph glowing inside, sound rings on tap (idle on the pick) */
.gar-horn {
  position: relative; display: grid; place-items: center; width: min(4.5rem, 70%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--rc) 38%, #5a4a40) 0%, #2a2220 42%, #121014 74%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 -8px 14px rgba(0, 0, 0, .6),
    inset 0 5px 10px rgba(255, 255, 255, .08), 0 0 0 5px color-mix(in srgb, var(--rc) 10%, transparent), 0 0 24px color-mix(in srgb, var(--rc) 30%, transparent);
}
.gar-horn::before {
  content: ''; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--rc) 45%, transparent); opacity: .7;
}
.gar-horn svg { position: relative; width: 58%; height: auto; color: color-mix(in srgb, var(--rc) 45%, #ffd6a6); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.gar-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rc) 70%, #fff); opacity: 0; }
.gar-card.honk .gar-wave { animation: garage-wave .8s ease-out; }
.gar-card.honk .gar-wave.w2 { animation-delay: .14s; }
.gar-card.honk .gar-wave.w3 { animation-delay: .28s; }
.gar-card.active:not(.honk) .gar-wave { animation: garage-wave 2.4s ease-out infinite; }
.gar-card.active:not(.honk) .gar-wave.w2 { animation-delay: .8s; }
.gar-card.active:not(.honk) .gar-wave.w3 { animation-delay: 1.6s; }
.gar-card.honk .gar-horn svg { animation: garage-honk .35s var(--ease-back); }
@keyframes garage-wave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
@keyframes garage-honk { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }

/* ---- exclusive info sheet --------------------------------------------------------------------------------- */
.gar-sheet {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 1rem calc(var(--safe-b) + .8rem); background: rgba(4, 4, 8, .62); animation: fade-in .2s both;
}
.gar-sheet.out { animation: fade-out .2s both; pointer-events: none; }
.gar-sheet-card {
  width: min(34rem, 94%); display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: .9rem; align-items: center;
  padding: .75rem .85rem; animation: gar-sheet-up .4s var(--ease-out) both;
}
.gar-sheet.out .gar-sheet-card { animation: gar-sheet-down .2s var(--ease) both; }
@keyframes gar-sheet-up { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
@keyframes gar-sheet-down { to { opacity: 0; transform: translateY(20%); } }
.gar-sheet-card.x { border-color: rgba(255, 170, 60, .35); box-shadow: 0 0 30px rgba(255, 120, 30, .2), var(--shadow-2); }
.gar-sheet-art { min-width: 0; }
.gar-sheet-pic { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; background: #111; }
.gar-sheet-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.7); }
.gar-sheet-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; }
.gar-sheet-tag {
  padding: .06rem .5rem; border-radius: 4px; font-size: .62rem; font-weight: 800; color: #2a1200; transform: skewX(var(--skew));
  background: linear-gradient(90deg, #ffe08a, #ff9a2e);
}
.gar-sheet-title { font-size: 1.15rem; font-weight: 800; line-height: 1.15; background: linear-gradient(90deg, #fff1b8, #ffc21f 50%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gar-sheet-text { font-size: .74rem; line-height: 1.4; color: #d3d4db; }
.gar-sheet-note { display: flex; align-items: flex-start; gap: .4rem; font-size: .7rem; line-height: 1.35; color: #ffd27a; }
.gar-sheet-note > .ico { flex: none; margin-top: .1rem; }
.gar-sheet-btns { align-self: stretch; display: flex; justify-content: flex-end; margin-top: .25rem; }

/* ---- short / narrow landscape phones -------------------------------------------------------------------- */
@media (max-height: 352px) {
  .gp-desc { display: none; }
  .gp-head { padding-bottom: .35rem; }
  .gp-ico { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
  .garage-hint { display: none; }
}
@media (max-width: 760px) {
  .garage-screen { --gp-w: min(28.6rem, 51vw); gap: 0 .6rem; }
}

/* =====================================================================================================
   SETTINGS
   ===================================================================================================== */
.set-screen {
  display: grid; gap: .55rem .75rem;
  grid-template-columns: min(12.2rem, 25vw) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'head head' 'nav body';
}
.set-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 7, 11, .62), rgba(7, 7, 11, .5) 50%, rgba(7, 7, 11, .7)); }
.set-screen > .b-head { grid-area: head; }
.set-nav {
  grid-area: nav; min-height: 0; flex-direction: column; align-self: start; gap: .22rem; padding: .3rem;
  overflow-y: auto; overflow-x: hidden; max-height: 100%;
}
.set-nav .b-tab { justify-content: flex-start; width: 100%; min-height: max(40px, 2.85rem); padding: 0 .7rem; font-size: .9rem; }
.set-nav .b-tab .b-tab-l { display: inline; overflow: hidden; text-overflow: ellipsis; }
.set-nav .b-tab.active::after { inset-inline: auto; inset-inline-start: .18rem; top: .6rem; bottom: .6rem; width: 3px; height: auto; }
.set-body { grid-area: body; min-height: 0; display: flex; flex-direction: column; padding: .35rem .45rem .35rem .55rem; }
[dir="rtl"] .set-body { padding: .35rem .55rem .35rem .45rem; }
.set-scroll { flex: 1; min-height: 0; padding: .3rem .1rem .7rem; display: flex; flex-direction: column; gap: .5rem; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .45rem; }
.set-grid > .wide { grid-column: 1 / -1; }
.set-quality { display: flex; width: 100%; }
.set-quality > button { flex: 1 1 0; min-width: 0; padding: 0 .35rem; }
.set-qnote {
  display: flex; align-items: flex-start; gap: .55rem; padding: .5rem .65rem; border-radius: 10px; margin-top: .1rem;
  background: linear-gradient(90deg, rgba(255, 106, 0, .12), rgba(255, 106, 0, .02)); border: 1px solid rgba(255, 138, 31, .22);
}
[dir="rtl"] .set-qnote { background: linear-gradient(270deg, rgba(255, 106, 0, .12), rgba(255, 106, 0, .02)); }
.set-qnote .ico { color: var(--brand-hot); font-size: 1.1rem; margin-top: .1rem; }
.set-qnote p { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.4; color: #dcdde4; }
.set-qnote .chip { flex: none; min-height: 1.6rem; font-size: .72rem; }
.set-qbars { display: inline-flex; align-items: flex-end; gap: 2px; height: .85rem; margin-inline-start: .15rem; }
.set-qbars i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .22); }
.set-qbars i.on { background: currentColor; }
.set-quality > button.active .set-qbars i { background: rgba(255, 255, 255, .35); }
.set-quality > button.active .set-qbars i.on { background: #fff; }

.set-steer {
  display: grid; grid-template-columns: minmax(0, 1fr) min(13rem, 42%); gap: .8rem; align-items: center;
  padding: .55rem .7rem; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .05);
}
.b-row.stack .seg > button { flex: 1 1 0; min-width: 0; }
.set-steer-l { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.set-steer .seg { width: 100%; }
.set-steer .seg > button { flex: 1 1 0; min-width: 0; }
.set-steer-d { font-size: .74rem; color: var(--muted); line-height: 1.35; min-height: 2em; }
.set-phone { position: relative; line-height: 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.set-phone svg { width: 100%; height: auto; }
.set-phone { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.set-phone .kicker { line-height: 1; font-size: .56rem; color: rgba(255, 255, 255, .45); }
.set-phone-anim { animation: pop-in .3s var(--ease-back) backwards; }

.set-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.set-lang { min-height: 6.2rem; padding: .9rem 1rem; align-items: flex-start; justify-content: center; gap: .35rem; }
.set-lang-big { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.set-lang-sub { font-size: .76rem; color: var(--muted); }
.set-lang .set-lang-flag { position: absolute; top: .6rem; inset-inline-end: .7rem; font-size: 1.6rem; color: rgba(255, 255, 255, .12); }
.set-lang.active .set-lang-flag { color: var(--brand-hot); }

.set-profile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .6rem; align-items: start; }
.set-card { display: flex; flex-direction: column; gap: .45rem; padding: .65rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); min-width: 0; }
.set-name {
  width: 100%; height: max(40px, 2.75rem); padding: 0 .75rem; border-radius: var(--radius-s); border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .35); font-weight: 700; font-size: 1rem; outline: none; unicode-bidi: plaintext;
}
.set-name:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 106, 0, .2); }
.set-lvl { display: flex; align-items: center; gap: .55rem; }
.set-lvl .xpbar { flex: 1; }
.set-lvl-note { font-size: .7rem; color: var(--muted); }
.set-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.set-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.set-stat b { font-size: 1.35rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.set-stat span { font-size: .66rem; color: var(--muted); font-weight: 700; text-align: center; line-height: 1.15; }
.set-reset { align-self: flex-start; }
.set-card.wide { grid-column: 1 / -1; }
.set-laps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .35rem; }
.set-lap { display: flex; flex-direction: column; gap: .05rem; padding: .4rem .55rem; border-radius: 9px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); min-width: 0; }
.set-lap span { font-size: .7rem; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-lap b { font-size: 1rem; font-weight: 800; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
.set-lap.none b { color: rgba(255, 255, 255, .3); }
.set-reset .ico { color: #ff8a9b; }

/* =====================================================================================================
   HOW TO PLAY
   ===================================================================================================== */
.howto-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 7, 11, .7), rgba(7, 7, 11, .55) 50%, rgba(7, 7, 11, .75)); }
.howto-seg > button { min-width: 0; }
.howto-body { flex: 1; min-height: 0; display: flex; }
.howto-pane { flex: 1; min-width: 0; min-height: 0; display: flex; gap: .7rem; }

/* controls */
.howto-diagram { position: relative; flex: 1.45; min-width: 0; display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem .55rem; }
.howto-phone { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
/* Largest 240:112 box that fits the container (labels are positioned in % of this box). */
.howto-phone-in { position: relative; width: min(100cqw, 100cqh * 240 / 112); aspect-ratio: 240 / 112; }
.howto-phone-in svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.howto-call {
  position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem; border-radius: 6px; white-space: nowrap; font-size: .7rem; font-weight: 800; line-height: 1.25;
  color: #fff; background: rgba(12, 12, 18, .88); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  animation: pop-in .35s var(--ease-back) backwards;
}
.howto-call.o { background: var(--grad-brand); border-color: rgba(255, 200, 150, .6); }
.howto-call .ico { font-size: .9rem; }
.howto-keys { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--muted); line-height: 1.35; }
.howto-keys .ico { font-size: 1.05rem; color: var(--brand-hot); flex: none; }
.howto-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.howto-tipcard { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .65rem .75rem; min-height: 0; }
.howto-tipcard-h { display: flex; align-items: center; gap: .5rem; }
.howto-tipcard-h .ico-badge { width: 2rem; height: 2rem; font-size: 1.05rem; }
.howto-tipcard-h b { font-size: 1rem; font-weight: 800; line-height: 1.15; }
.howto-tipcard p { font-size: .78rem; color: #d7d8df; line-height: 1.4; }
.howto-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; direction: ltr; }
.howto-tier { --c: #2f9bff; display: flex; flex-direction: column; gap: .2rem; align-items: center; font-size: .66rem; font-weight: 800; color: var(--c); }
.howto-tier i { width: 100%; height: .5rem; border-radius: 2px; transform: skewX(-18deg); background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--c); box-shadow: 0 0 10px var(--c); animation: howto-tier 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes howto-tier { 0%, 100% { opacity: .45; } 30%, 70% { opacity: 1; } }
.howto-go { display: flex; align-items: center; gap: .5rem; }
.howto-go .howto-lights { display: inline-flex; gap: .22rem; padding: .22rem .3rem; border-radius: 999px; background: #0a0a0e; border: 1px solid var(--line-2); direction: ltr; }
.howto-go .howto-lights i { width: .6rem; height: .6rem; border-radius: 50%; background: #3a1414; }
.howto-go .howto-lights i.r { animation: howto-red 2.4s steps(1) infinite; }
.howto-go .howto-lights i.g { animation: howto-green 2.4s steps(1) infinite; }
.howto-go .howto-lights i:nth-child(2) { animation-delay: .4s; }
.howto-go .howto-lights i:nth-child(3) { animation-delay: .8s; }
@keyframes howto-red { 0% { background: #ff3d3d; box-shadow: 0 0 6px #ff3d3d; } 50%, 100% { background: #3a1414; box-shadow: none; } }
@keyframes howto-green { 0%, 49% { background: #143a1f; box-shadow: none; } 50%, 90% { background: #35d07f; box-shadow: 0 0 8px #35d07f; } 91%, 100% { background: #143a1f; box-shadow: none; } }

/* games */
.howto-modes { flex: none; width: min(12.5rem, 27vw); display: flex; flex-direction: column; gap: .3rem; padding: .35rem; overflow-y: auto; scrollbar-width: none; }
.howto-modes::-webkit-scrollbar { display: none; }
.howto-mbtn {
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: max(38px, 2.7rem); padding: 0 .55rem; flex: 1 0 auto; max-height: 3.2rem;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 700 .9rem/1.1 var(--font); cursor: pointer; text-align: start;
  transition: background-color .2s, color .2s, border-color .2s;
}
.howto-mbtn .ico { font-size: 1.25rem; flex: none; }
.howto-mbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.howto-mbtn.active { color: #fff; background: linear-gradient(90deg, rgba(255, 106, 0, .3), rgba(255, 106, 0, .08)); border-color: rgba(255, 106, 0, .45); }
[dir="rtl"] .howto-mbtn.active { background: linear-gradient(270deg, rgba(255, 106, 0, .3), rgba(255, 106, 0, .08)); }
.howto-mbtn.active .ico { color: var(--brand-hot); }
.howto-mode {
  flex: 1; min-width: 0; position: relative; display: grid; gap: .55rem 1rem; padding: .85rem .95rem; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) min(16rem, 44%); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'head art' 'goal art' 'steps art';
}
.howto-mode-h { grid-area: head; }
.howto-mode-t { min-width: 0; }
.howto-art { grid-area: art; align-self: center; min-height: 0; max-height: 100%; display: grid; place-items: center; }
.howto-art-svg { width: 100%; height: auto; max-height: 100%; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.howto-art-svg .hw-pulse { transform-box: fill-box; transform-origin: center; animation: hw-pulse 1.6s ease-in-out infinite; }
.howto-art-svg .hw-dash { animation: hw-dash 1.2s linear infinite; }
@keyframes hw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hw-dash { to { stroke-dashoffset: -18; } }
.howto-mode-h { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.howto-mode-ico {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 12px; font-size: 1.8rem; color: #fff;
  background: var(--grad-brand); transform: skewX(var(--skew)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(255, 106, 0, .4);
}
.howto-mode-ico > * { transform: skewX(var(--unskew)); }
.howto-mode-name { font-size: 1.6rem; font-weight: 800; line-height: 1.05; }
.howto-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.howto-goal { grid-area: goal; display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(255, 106, 0, .12); border: 1px solid rgba(255, 138, 31, .3); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.howto-goal .ico { color: var(--brand-hot); font-size: 1.2rem; flex: none; }
.howto-steps { grid-area: steps; display: flex; flex-direction: column; gap: .5rem; min-height: 0; padding-top: .15rem; }
.howto-step { display: flex; align-items: center; gap: .6rem; font-size: .88rem; line-height: 1.35; color: #e3e4ea; animation: rise-in .4s var(--ease-out) backwards; }
.howto-step:nth-child(2) { animation-delay: .06s; }
.howto-step:nth-child(3) { animation-delay: .12s; }
.howto-step b { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%; font-size: .74rem; background: rgba(255, 255, 255, .1); border: 1px solid var(--line-2); color: var(--brand-hot); }
.howto-mode.b-anim > * { animation-duration: .32s; }

/* tips */
.howto-tips { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .55rem; min-height: 0; }
.howto-tips .howto-tipcard { overflow: hidden; }
.howto-tips .howto-tipcard p { font-size: .82rem; line-height: 1.45; max-width: 92%; }
.howto-tip { justify-content: flex-start; }
.howto-tip-n { position: absolute; bottom: .45rem; inset-inline-start: .8rem; font-size: 1.5rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .1); letter-spacing: .02em; }
.howto-tip-bg { position: absolute; bottom: -.8rem; inset-inline-end: -.5rem; font-size: 5.2rem; color: rgba(255, 138, 31, .09); pointer-events: none; transform: rotate(-12deg); }

/* =====================================================================================================
   RESULTS
   ===================================================================================================== */
.res-screen {
  display: grid; gap: .55rem .8rem;
  grid-template-columns: min(22.5rem, 38vw) minmax(0, 1fr) min(24.5rem, 41vw);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'hero . table' 'hero . actions';
}
.res-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 6, 10, .82) 0%, rgba(6, 6, 10, .45) 34%, rgba(6, 6, 10, 0) 48%, rgba(6, 6, 10, 0) 54%, rgba(6, 6, 10, .5) 66%, rgba(6, 6, 10, .82) 100%),
    linear-gradient(0deg, rgba(6, 6, 10, .6), rgba(6, 6, 10, 0) 35%);
}
.res-hero { grid-area: hero; min-height: 0; display: flex; flex-direction: column; gap: .55rem; }
.res-kick { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.res-kick .chip .ico { color: var(--brand-hot); }
.res-title {
  --c1: #ffffff; --c2: #ffd9b8; --glow: rgba(255, 106, 0, .45);
  font-size: clamp(2rem, 11.5vh, 3.1rem); font-weight: 800; line-height: .98; letter-spacing: -.01em; white-space: nowrap;
  transform: skewX(var(--skew)); transform-origin: 0 100%;
  background: linear-gradient(180deg, var(--c1) 20%, var(--c2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .2rem 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 1.2rem var(--glow));
  animation: res-title .7s var(--ease-back) .1s backwards; padding-inline-end: .3rem; text-transform: uppercase; overflow: visible;
}
html[lang="ar"] .res-title { letter-spacing: 0; line-height: 1.12; }
.res-title.win { --c1: #fff7cf; --c2: #ffb21f; --glow: rgba(255, 190, 0, .5); }
.res-title.lose { --c1: #ffffff; --c2: #b9bcc8; --glow: rgba(120, 120, 140, .3); }
.res-title.team0 { --c1: #e4efff; --c2: #6aa4ff; --glow: rgba(47, 123, 255, .55); }
.res-title.team1 { --c1: #ffe6f2; --c2: #ff6fb3; --glow: rgba(255, 61, 154, .55); }
.res-title.coop { --c1: #eaffdf; --c2: #62ff3b; --glow: rgba(98, 255, 59, .45); }
.res-title.coopfail { --c1: #fff; --c2: #ff8a9b; --glow: rgba(255, 61, 90, .4); }
@keyframes res-title { from { opacity: 0; transform: skewX(var(--skew)) scale(1.5); filter: blur(6px); } to { opacity: 1; transform: skewX(var(--skew)) scale(1); } }
.res-sub { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: #d7d8df; margin-top: -.15rem; }
.res-sub .badge { font-size: .74rem; }

/* podium */
.res-podium { flex: 1; min-height: 5.5rem; max-height: 10.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .4rem; }
.res-pod { --c: #ff6a00; --m1: #ffe27a; --m2: #c98a00; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; gap: .2rem; animation: res-pod .55s var(--ease-back) backwards; }
.res-pod.p1 { order: 2; animation-delay: .45s; }
.res-pod.p2 { order: 1; --m1: #f4f6fb; --m2: #8e97a8; animation-delay: .3s; }
.res-pod.p3 { order: 3; --m1: #ffd0a8; --m2: #a8562a; animation-delay: .15s; }
@keyframes res-pod { from { opacity: 0; transform: translateY(1.2rem) scaleY(.6); } to { opacity: 1; transform: none; } }
.res-pod-av {
  position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; font-size: 1.2rem; color: rgba(0, 0, 0, .65);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 48%), var(--c);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 12px rgba(0, 0, 0, .5);
}
.res-pod.p1 .res-pod-av { width: 2.7rem; height: 2.7rem; font-size: 1.4rem; box-shadow: 0 0 0 2px #ffe27a, 0 0 18px rgba(255, 200, 40, .6), 0 4px 12px rgba(0, 0, 0, .5); }
.res-pod-crown { position: absolute; top: -.95rem; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 1.05rem; color: #ffd21f; filter: drop-shadow(0 0 6px rgba(255, 200, 0, .8)); }
.res-pod-name { max-width: 100%; font-size: .78rem; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.res-pod.me .res-pod-name { color: var(--brand-hot); }
.res-pod-block {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: .15rem;
  border-radius: 8px 8px 3px 3px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 30%, rgba(0, 0, 0, .25)), linear-gradient(180deg, var(--m1), var(--m2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .45);
}
.res-pod.p1 .res-pod-block { height: 62%; }
.res-pod.p2 .res-pod-block { height: 46%; }
.res-pod.p3 .res-pod-block { height: 34%; }
.res-pod-rank { font-size: 1.9rem; font-weight: 800; line-height: 1; color: rgba(0, 0, 0, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); transform: skewX(-8deg); }
.res-pod.p1 .res-pod-rank { font-size: 2.3rem; }
.res-pod-score { font-size: .72rem; font-weight: 800; color: rgba(0, 0, 0, .7); direction: ltr; white-space: nowrap; }
.res-pod-block::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: res-shine 3.2s ease-in-out 1.2s infinite; }
@keyframes res-shine { 0% { left: -60%; } 40%, 100% { left: 140%; } }
.res-pod.empty { visibility: hidden; }

/* team scoreboard */
.res-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .35rem; animation: pop-in .5s var(--ease-back) .3s backwards; }
.res-team {
  --c: #2f7bff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 5.2rem; padding: .4rem .5rem; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(0, 0, 0, .4);
  transform: skewX(var(--skew));
}
.res-team > * { transform: skewX(var(--unskew)); }
.res-team.lost { filter: saturate(.45) brightness(.7); }
.res-team-n { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .res-team-n { letter-spacing: 0; }
.res-team-s { font-size: 2.6rem; font-weight: 800; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; }
.res-team .res-pod-crown { position: static; transform: none; font-size: 1.1rem; }
.res-vs { align-self: center; font-size: .9rem; font-weight: 800; color: var(--muted); }

/* XP */
.res-xp { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .7rem .6rem; position: relative; animation: rise-in .5s var(--ease-out) .6s backwards; }
.res-xp-row { display: flex; align-items: center; gap: .55rem; }
.res-xp-row .xpbar { flex: 1; height: .62rem; }
.res-xp-row .xpbar > i { transition: none; }
.res-xp-gain { font-size: 1.15rem; font-weight: 800; color: var(--brand-hot); direction: ltr; font-variant-numeric: tabular-nums; min-width: 4.6rem; text-align: end; white-space: nowrap; }
.res-xp-note { display: flex; justify-content: space-between; gap: .5rem; font-size: .7rem; color: var(--muted); font-weight: 600; }
.res-xp .lvl { min-width: 3.1rem; font-size: .82rem; }
.res-xp .lvl.bump { animation: res-bump .6s var(--ease-back); }
@keyframes res-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.res-lvlup {
  position: absolute; inset-inline-end: .6rem; top: -.9rem; display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 6px;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: #231a00; background: linear-gradient(180deg, #fff3a8, #ffd21f 55%, #ffae1f);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 22px rgba(255, 210, 31, .75); transform: skewX(var(--skew)); white-space: nowrap;
  animation: res-lvlup .7s var(--ease-back) both;
}
html[lang="ar"] .res-lvlup { letter-spacing: 0; }
.res-lvlup::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 220, 90, .5) 0deg 6deg, rgba(255, 220, 90, 0) 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%);
  animation: res-rays 1.6s ease-out both;
}
@keyframes res-lvlup { from { opacity: 0; transform: skewX(var(--skew)) scale(2.2); } to { opacity: 1; transform: skewX(var(--skew)) scale(1); } }
@keyframes res-rays { 0% { opacity: 0; transform: rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(50deg) scale(1.3); } }

/* standings */
.res-table { grid-area: table; min-height: 0; display: flex; flex-direction: column; padding: .45rem .45rem .35rem; animation: garage-in .5s var(--ease-out) .2s backwards; }
[dir="rtl"] .res-table { animation-name: garage-in-rtl; }
.res-th, .res-tr { display: grid; grid-template-columns: 1.75rem .35rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: 0 .55rem; }
.res-th { min-height: 1.5rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .res-th { letter-spacing: 0; font-size: .72rem; }
.res-th > :last-child { text-align: end; }
.res-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .2rem; padding-block: .2rem .3rem; }
.res-tr {
  --c: #888; position: relative; min-height: max(28px, 2.05rem); flex: none; border-radius: 8px; background: rgba(255, 255, 255, .045);
  animation: rise-in .38s var(--ease-out) backwards; animation-delay: calc(.25s + var(--i, 0) * .05s);
}
.res-tr.me { background: linear-gradient(90deg, rgba(255, 106, 0, .55), rgba(255, 106, 0, .16)); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .55); }
[dir="rtl"] .res-tr.me { background: linear-gradient(270deg, rgba(255, 106, 0, .55), rgba(255, 106, 0, .16)); }
.res-tr[data-team="0"]:not(.me) { background: linear-gradient(90deg, rgba(47, 123, 255, .22), rgba(47, 123, 255, .04)); }
.res-tr[data-team="1"]:not(.me) { background: linear-gradient(90deg, rgba(255, 61, 154, .22), rgba(255, 61, 154, .04)); }
[dir="rtl"] .res-tr[data-team="0"]:not(.me) { background: linear-gradient(270deg, rgba(47, 123, 255, .22), rgba(47, 123, 255, .04)); }
[dir="rtl"] .res-tr[data-team="1"]:not(.me) { background: linear-gradient(270deg, rgba(255, 61, 154, .22), rgba(255, 61, 154, .04)); }
.res-rank { display: grid; place-items: center; width: 1.55rem; height: 1.4rem; font-size: .82rem; font-weight: 800; color: #d7d8df; position: relative; z-index: 0; }
.res-rank::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: rgba(255, 255, 255, .1); transform: skewX(var(--skew)); }
.res-tr.r1 .res-rank { color: #3a2a00; } .res-tr.r1 .res-rank::before { background: linear-gradient(180deg, #fff1a0, #ffc21f); }
.res-tr.r2 .res-rank { color: #22252c; } .res-tr.r2 .res-rank::before { background: linear-gradient(180deg, #ffffff, #aeb5c2); }
.res-tr.r3 .res-rank { color: #3a1a06; } .res-tr.r3 .res-rank::before { background: linear-gradient(180deg, #ffd6b0, #c7773f); }
.res-chip { width: .35rem; height: 1.15rem; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.res-name { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .88rem; font-weight: 700; }
.res-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.res-name .ico { color: var(--muted); font-size: .9rem; }
.res-name .badge { font-size: .6rem; min-height: 1.1rem; }
.res-val { font-size: .95rem; font-weight: 800; direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.res-val small { font-size: .66rem; color: var(--muted); font-weight: 700; margin-inline-start: .2rem; }
.res-tr.me .res-val small { color: rgba(255, 255, 255, .8); }

/* actions */
.res-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: .45rem; animation: rise-in .45s var(--ease-out) .5s backwards; }
.res-actions .btn.primary { flex: 1 1 auto; min-width: 0; }
.res-actions .res-wait { flex: 1; min-width: 0; font-size: .74rem; color: var(--muted); line-height: 1.3; }

/* =====================================================================================================
   PAUSE
   ===================================================================================================== */
.pause-screen { display: grid; place-items: center; }
.pause-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 90% at 50% 50%, rgba(6, 6, 10, .55), rgba(4, 4, 7, .85));
}
.pause-card {
  position: relative; width: min(46rem, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1rem; padding: 1rem 1.1rem 1rem; overflow: hidden;
  animation: pause-in .38s var(--ease-back) backwards;
}
@keyframes pause-in { from { opacity: 0; transform: scale(.92) translateY(.6rem); } to { opacity: 1; transform: none; } }
.pause-main { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.pause-kick { display: flex; align-items: center; gap: .45rem; }
.pause-kick .ico-badge { width: 2rem; height: 2rem; font-size: 1.1rem; }
.pause-title { font-size: clamp(1.9rem, 10vh, 2.6rem); font-weight: 800; line-height: 1; transform: skewX(var(--skew)); transform-origin: 0 100%; letter-spacing: .01em; }
html[lang="ar"] .pause-title { letter-spacing: 0; line-height: 1.15; }
.pause-title::after { content: ''; display: block; width: 2.8rem; height: 4px; margin-top: .35rem; border-radius: 2px; background: var(--brand); box-shadow: 0 0 12px rgba(255, 106, 0, .8); }
.pause-online { display: flex; align-items: flex-start; gap: .45rem; padding: .4rem .55rem; border-radius: 9px; background: rgba(53, 208, 127, .1); border: 1px solid rgba(53, 208, 127, .3); font-size: .74rem; line-height: 1.35; color: #cdf5dd; }
.pause-online .dot { --dc: var(--ok); margin-top: .3rem; }
.pause-resume { width: 100%; }
.pause-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.pause-row .btn { min-width: 0; padding: 0 .6rem; font-size: .88rem; }
.pause-row .btn .lbl { overflow: hidden; text-overflow: ellipsis; }
.pause-leave { margin-top: auto; align-self: flex-start; color: #ffb3c0; border-color: rgba(255, 61, 90, .35); }
.pause-leave .ico { color: #ff6b82; }
.pause-quick { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .6rem .65rem; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.pause-quick .b-row { min-height: 2.7rem; padding: .28rem .55rem; }
.pause-quick .seg { width: 100%; }
.pause-quick .seg > button { flex: 1 1 0; min-width: 0; padding: 0 .4rem; }

/* =====================================================================================================
   Responsive
   ===================================================================================================== */
@media (max-height: 370px) {
  .b-row { min-height: 2.8rem; padding: .3rem .6rem; }
  .b-row-desc { font-size: .68rem; }
  .res-title { font-size: clamp(1.8rem, 10.5vh, 2.6rem); }
  .res-xp { padding: .45rem .6rem .5rem; }
  .howto-mode { padding: .65rem .8rem; }
  .howto-mode-name { font-size: 1.4rem; }
  .pause-card { padding: .8rem .95rem; gap: .8rem; }
  .pause-quick .b-row { min-height: 2.5rem; }
  .res-tr { min-height: max(25px, 1.85rem); }
  .res-rows { gap: .16rem; }
  .res-actions .btn.big { min-height: max(44px, 3.2rem); font-size: 1.1rem; }
  .res-actions .btn.big.icon { width: max(44px, 3.2rem); }
}
@media (max-width: 780px) {
  .res-screen { grid-template-columns: min(21rem, 39vw) minmax(0, 1fr) min(23rem, 43vw); column-gap: .55rem; }
  .howto-tips { gap: .45rem; }
  .set-screen { grid-template-columns: min(11rem, 24vw) minmax(0, 1fr); }
}
@media (min-height: 460px) {
  .res-podium { max-height: 13rem; }
}