/* "Clash" skin, the paddock's look (js/ui/skin.js): everything here hangs from
   html.skin-clash, so without the class the game looks exactly as before. Chunky panels
   with a dark rim and a lit top edge, buttons with a "3D" bottom lip, a rounded cartoon
   face for titles and numbers, and the paddock as a mobile arcade lobby (dashboardClash.js). */

/* Palette: the logo's black and lime (html.skin-lime, always on: js/ui/skin.js), at the bottom.
   Set aside: the same design in Clash blue. To bring it back, uncomment this block and
   leave <html> without skin-lime.
.skin-clash {
  --k-panel-hi: #3a52b8;
  --k-panel: #2b3d98;
  --k-panel-lo: #24337f;
  --k-panel2: #3349ad;
  --k-drop: rgba(6,10,40,.6);
  --k-btn-hi: #6fb4ff;
  --k-btn-lo: #2f6fe0;
  --k-btn: #4f9dff;
  --k-tab-hi: #ffe08a;
  --k-tab-lo: #f2a81e;
  --k-alt-hi: #c49bff;
  --k-alt-lo: #7a45e6;
  --k-event-hi: #7a52e8;
  --k-event-lo: #4a2bb0;
  --k-well-hi: #0a0f2e;
  --k-well: #1a2260;
  --k-fill-hi: #8fd0ff;
  --k-fill-lo: #3b8cf0;
  --k-ribbon-hi: #ffd96b;
  --k-ribbon-lo: #e9a21a;
  --k-arena-glow: rgba(255,214,90,.35);
  --k-rays: rgba(255,255,255,.07);
  --k-arena-hi: #6b56e8;
  --k-arena-mid: #2b2d9e;
  --k-arena-lo: #141a5c;
  --k-shade: rgba(10,16,56,.55);
  --k-dock-hi: #4060c8;
  --k-dock-lo: #253f99;
  --k-cta-hi: #ffe58f;
  --k-cta: #ffc634;
  --k-cta-lo: #f29a12;
  --k-cta-lip: #c46f00;
  --k-cta-glow: rgba(255,198,52,.35);
  --k-cta-glow2: rgba(255,198,52,.6);
  --k-cta-chip: rgba(90,45,0,.35);
  --k-side-hi: #2a2f8f;
  --k-side-lo: #1a1f66;
  --k-card-hi: #4a3cb8;
  --k-card-lo: #2c2280;
  --k-nav-hi: #3a63c9;
  --k-nav-lo: #24439e;
  --k-chest-hi: #5a3fc4;
  --k-chest-lo: #36238f;
  --k-chest-empty: rgba(10,16,56,.45);
  --k-chest-ink: #8f9ad8;
  --k-top: rgba(10,16,56,.92);
  --k-nav-ink: #dfe5ff;
  --k-ghost: #6474c8;
  --k-disabled: #5b6390;
  --k-bg: #121c4e;
  --k-bg2: #18245f;
  --k-rim: #0a1038;
  --k-line2: #4a62c9;
  --k-muted: #b8c3f2;
  --k-bg-hi: #1b2a74;
  --k-bg-lo: #0e1640;
  --k-bg-glow: rgba(140, 110, 255, .45);
  --k-ink: #fff;
  --k-accent-rgb: 255, 198, 52;

}
*/
.skin-clash {
  --bg: var(--k-bg);
  --bg2: var(--k-bg2);
  --panel: var(--k-panel);
  --panel2: var(--k-panel2);
  --panel3: var(--k-panel-lo);
  --line: var(--k-rim);
  --line2: var(--k-line2);
  --text: #ffffff;
  --muted: var(--k-muted);
  --accent: var(--k-cta);
  --accent2: var(--k-cta-lo);
  --accent-rgb: var(--k-accent-rgb);
  --on-accent: #fff;
  --gold: #ffd75a;
  --green: #7be05b;
  --blue: #5fb4ff;
  --purple: #c77dff;
  --focus: #ffd75a;
  --radius: 18px;
  --rim: var(--k-rim);
  --shadow: 0 6px 0 var(--k-drop), 0 18px 40px rgba(0, 0, 0, .45);
  --display: 'Lilita One', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  /* Outlined white text, as cartoon game titles. */
  --ink: 0 2px 0 var(--rim), 2px 0 0 var(--rim), -2px 0 0 var(--rim), 0 -1px 0 var(--rim), 1px 2px 0 var(--rim), -1px 2px 0 var(--rim);
  --ink-s: 0 1.5px 0 var(--rim), 1px 0 0 var(--rim), -1px 0 0 var(--rim), 0 -1px 0 var(--rim);
}
.skin-clash body {
  background:
    radial-gradient(ellipse at 50% -10%, var(--k-bg-glow), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 18px, transparent 18px 36px),
    linear-gradient(180deg, var(--k-bg-hi), var(--k-bg-lo) 70%);
  background-attachment: fixed;
}
.skin-clash .shell, .skin-clash .content { background: transparent; }

/* ---------------------------------------------------------------- type */
.skin-clash .display, .skin-clash h1, .skin-clash h2, .skin-clash h3, .skin-clash h4 { font-family: var(--display); font-weight: 400; letter-spacing: .3px; text-shadow: var(--ink); }
.skin-clash .eyebrow { color: var(--gold); text-shadow: var(--ink-s); font-family: var(--display); font-weight: 400; letter-spacing: 1px; font-size: 12px; }
.skin-clash .muted { color: var(--muted); }

/* ---------------------------------------------------------------- panels */
.skin-clash .surface {
  background: linear-gradient(180deg, var(--k-panel-hi) 0, var(--k-panel) 60%, var(--k-panel-lo));
  border: 3px solid var(--rim);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18), 0 5px 0 var(--k-drop);
}
.skin-clash .surface.clickable:hover { transform: translateY(-2px); border-color: var(--rim); box-shadow: inset 0 2px 0 rgba(255,255,255,.32), inset 0 -3px 0 rgba(0,0,0,.18), 0 7px 0 var(--k-drop); }
.skin-clash .surface.clickable:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 2px 0 var(--k-drop); }

/* Section titles as Clash's "—— En línea ——" separators. */
.skin-clash .section-title { margin: 28px 0 12px; gap: 12px; }
.skin-clash .section-title h3 { font-family: var(--display); font-weight: 400; font-size: 20px; display: flex; align-items: center; gap: 12px; flex: 1; text-shadow: var(--ink); }
.skin-clash .section-title h3::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.35), transparent); }
.skin-clash .section-title button, .skin-clash .section-title .link { font-family: var(--display); color: var(--gold); text-shadow: var(--ink-s); }

.skin-clash .tag { border-radius: 999px; font-family: var(--display); font-weight: 400; letter-spacing: .4px; font-size: 11px; height: 22px; border: 2px solid var(--rim); color: #fff; background: var(--c); text-shadow: var(--ink-s); }

/* ---------------------------------------------------------------- buttons */
.skin-clash .btn {
  --c: var(--accent);
  --lip: color-mix(in srgb, var(--c) 55%, #3a1d00);
  font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .4px; text-transform: none;
  color: #fff; text-shadow: var(--ink-s);
  border: 3px solid var(--rim); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0, var(--c) 48%, color-mix(in srgb, var(--c) 85%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 var(--lip), 0 4px 0 var(--rim);
}
.skin-clash .btn::after { display: none; }
.skin-clash .btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.skin-clash .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 var(--lip), 0 1px 0 var(--rim); }
.skin-clash .btn.small { font-size: 13.5px; border-radius: 11px; border-width: 2px; height: 38px; }
.skin-clash .btn.secondary { --c: var(--k-btn); color: #fff; border: 3px solid var(--rim); }
.skin-clash .btn.gold { --c: #ffc634; color: #fff; }
.skin-clash .btn.green { --c: #5fcf3d; }
.skin-clash .btn.blue { --c: var(--k-btn); }
.skin-clash .btn.danger { --c: #ef4444; }
.skin-clash .btn.ghost, .skin-clash .btn.outline { --c: var(--k-ghost); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 var(--rim); }
.skin-clash .btn:disabled { background: var(--k-disabled); color: #c9cde0; box-shadow: 0 3px 0 var(--rim); }
.skin-clash .chip { font-family: var(--display); font-weight: 400; border: 2px solid var(--rim); background: var(--k-panel2); color: #fff; text-shadow: var(--ink-s); border-radius: 10px; }
.skin-clash .chip.on { background: linear-gradient(180deg, var(--k-tab-hi), var(--k-cta)); }

/* ---------------------------------------------------------------- top bar */
.skin-clash .topbar { background: linear-gradient(180deg, var(--k-top), var(--k-shade)); border-bottom: 0; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.skin-clash .crumbs b { font-family: var(--display); font-weight: 400; font-size: 15px; text-shadow: var(--ink-s); }
/* Counters as Clash's dark capsules: the icon pokes out on the left, a green "+" on the right. */
.skin-clash .currency {
  position: relative; height: 34px; padding: 0 12px 0 30px; margin-left: 14px;
  font-family: var(--display); font-weight: 400; font-size: 17px; text-shadow: var(--ink-s);
  background: linear-gradient(180deg, var(--k-well-hi), var(--k-well)); border: 2px solid #000; border-radius: 10px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.08);
}
.skin-clash .currency > .icon-wrap { position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 2px solid #000; background: radial-gradient(circle at 35% 30%, #ffe9a3, #f2b01e 60%, #a8670a); color: #6b3d00; }
.skin-clash .currency.gems > .icon-wrap { background: radial-gradient(circle at 35% 30%, #d4ffb5, #5cd13b 60%, #1f7a17); color: #0d4a0b; }
.skin-clash .currency:not(.coins):not(.gems) > .icon-wrap { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc634 60%, #b07800); }
.skin-clash .currency .plus { margin-left: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 2px solid #000; background: linear-gradient(180deg, #8ef35f, #3fae22); font-size: 15px; line-height: 1; }
.skin-clash .premium-chip { font-family: var(--display); font-weight: 400; border: 2px solid #000; border-radius: 10px; background: linear-gradient(180deg, var(--k-tab-hi), var(--k-tab-lo)); color: #fff; text-shadow: var(--ink-s); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.skin-clash .premium-chip.off { background: linear-gradient(180deg, var(--k-alt-hi), var(--k-alt-lo)); }
.skin-clash .topbar .iconbtn { width: 42px; height: 42px; border-radius: 12px; border: 2px solid #000; color: var(--k-ink); background: linear-gradient(180deg, var(--k-btn-hi), var(--k-btn-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #000; }
.skin-clash .topbar .iconbtn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 #000; }
.skin-clash .topbar .avatar { border: 2px solid #000; border-radius: 12px; box-shadow: 0 3px 0 #000; }
@media (max-width: 649px) {
  .skin-clash .topbar { height: 62px; }
  /* (trophies are on the lobby's league ribbon; the logo makes room for the counters) */
  .skin-clash .topbar .currency:not(.coins):not(.gems), .skin-clash .topbar .appbar-brand { display: none; }
  .skin-clash .currency { height: 30px; font-size: 14.5px; padding: 0 8px 0 22px; margin-left: 12px; }
  .skin-clash .currency > .icon-wrap { width: 30px; height: 30px; left: -12px; }
  .skin-clash .currency .plus { width: 17px; height: 17px; font-size: 13px; margin-left: 3px; }
  .skin-clash .topbar .iconbtn { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------- side menu */
.skin-clash .sidebar { background: linear-gradient(180deg, var(--k-side-hi), var(--k-side-lo)); border-right: 3px solid var(--rim); }
.skin-clash .nav { gap: 6px; }
.skin-clash .nav-item { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--k-nav-ink); text-shadow: var(--ink-s); border-radius: 12px; border: 2px solid transparent; }
.skin-clash .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.skin-clash .nav-item.on { background: linear-gradient(180deg, var(--k-btn-hi), var(--k-btn-lo)); border-color: var(--rim); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--rim); color: #fff; }
.skin-clash .nav-item.on::before { display: none; }
.skin-clash .nav-item.on .icon-wrap { color: var(--k-ink); }
.skin-clash .nav-badge, .skin-clash .bn-badge, .skin-clash .ch-badge { background: #ef3b3b; color: #fff; border: 2px solid #000; font-family: var(--display); font-weight: 400; text-shadow: var(--ink-s); }
.skin-clash .side-card { border: 3px solid var(--rim); background: linear-gradient(180deg, var(--k-card-hi), var(--k-card-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- bottom tabs (phone) */
@media (max-width: 649px) {
  .skin-clash .bottomnav { height: calc(74px + var(--safe-b)); padding: 0 0 var(--safe-b); gap: 0; background: linear-gradient(180deg, var(--k-nav-hi), var(--k-nav-lo)); border-top: 3px solid var(--rim); backdrop-filter: none; }
  .skin-clash .bottomnav button { font-family: var(--display); font-size: 0; color: #fff; text-shadow: var(--ink-s); border-left: 2px solid var(--k-shade); background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 50%); }
  .skin-clash .bottomnav button:first-child { border-left: 0; }
  .skin-clash .bottomnav button .icon-wrap { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 2px 0 var(--rim)); }
  .skin-clash .bottomnav button .icon-wrap svg { width: 30px; height: 30px; }
  /* The open tab: lifted, golden and with its name, as Clash's "Batalla". */
  .skin-clash .bottomnav button.on { font-size: 13px; margin-top: -10px; border: 3px solid var(--rim); border-bottom: 0; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--k-tab-hi), var(--k-tab-lo) 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,.6); }
  .skin-clash .bottomnav button.on .icon-wrap { color: #fff; transform: scale(1.15); }
  .skin-clash .bottomnav .bn-center { background: none; box-shadow: none; border: 0; width: auto; height: auto; }
  .skin-clash .bn-badge { top: 4px; }
}

/* ---------------------------------------------------------------- lobby (dashboardClash.js) */
.ch-home { max-width: 980px; margin: 0 auto; }
.ch-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ch-profile { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.ch-avatar { display: grid; border: 3px solid var(--rim); border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 var(--rim); background: var(--k-panel2); }
.ch-avatar .avatar-img { border-radius: 0; }
.ch-profile-txt { display: flex; flex-direction: column; min-width: 0; }
.ch-name { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: #fff; text-shadow: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ch-sub { font-family: var(--display); font-size: 13px; color: var(--gold); text-shadow: var(--ink-s); }
/* League ribbon with trophies on a bar, as Clash's level bar top-left. */
.ch-ladder { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 3px solid var(--rim); border-radius: 16px; background: linear-gradient(180deg, var(--k-ribbon-hi), var(--k-ribbon-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 var(--rim); text-align: left; position: relative; }
.ch-ladder-txt { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.ch-ladder-txt b { font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; text-shadow: var(--ink-s); line-height: 1; }
.ch-meter { position: relative; height: 20px; border-radius: 8px; border: 2px solid var(--rim); background: var(--k-well); overflow: hidden; }
.ch-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, var(--k-fill-hi), var(--k-fill-lo)); }
.ch-meter em { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; height: 100%; font-style: normal; font-family: var(--display); font-size: 13px; color: #fff; text-shadow: var(--ink-s); }
.ch-meter em .icon-wrap { color: var(--gold); }
.ch-season { position: absolute; right: -6px; bottom: -14px; display: flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 8px; border: 2px solid var(--rim); background: var(--k-alt-lo); font-family: var(--display); font-size: 11px; color: #fff; text-shadow: var(--ink-s); }

.ch-arena { position: relative; margin-top: 18px; height: clamp(380px, 58vh, 560px); border-radius: 24px; overflow: hidden; border: 3px solid var(--rim);
  background:
    radial-gradient(circle at 50% 55%, var(--k-arena-glow), transparent 38%),
    repeating-conic-gradient(from 0deg at 50% 60%, var(--k-rays) 0 9deg, transparent 9deg 22deg),
    radial-gradient(ellipse at 50% 30%, var(--k-arena-hi), var(--k-arena-mid) 55%, var(--k-arena-lo));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -40px 60px var(--k-shade), 0 6px 0 var(--k-drop); }
.ch-stage { position: absolute; inset: 0; }
.ch-stage .showroom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-rail { position: absolute; top: 14px; display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.ch-rail.left { left: 12px; } .ch-rail.right { right: 12px; }
.ch-bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; width: 76px; }
.ch-bubble-ic { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; border: 3px solid var(--rim); color: var(--k-ink);
  background: linear-gradient(180deg, var(--k-btn-hi), var(--k-btn-lo)); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 var(--rim); transition: transform .12s; }
.ch-bubble-ic .icon-wrap { filter: drop-shadow(0 2px 0 var(--rim)); }
.ch-bubble.gold .ch-bubble-ic { background: linear-gradient(180deg, #ffe08a, #f2a81e); color: #fff; }
.ch-bubble.purple .ch-bubble-ic { background: linear-gradient(180deg, var(--k-alt-hi), var(--k-alt-lo)); color: #fff; }
.ch-bubble:hover .ch-bubble-ic { transform: translateY(-2px) rotate(-3deg); }
.ch-bubble:active .ch-bubble-ic { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 1px 0 var(--rim); }
.ch-bubble-label { font-family: var(--display); font-size: 12.5px; color: #fff; text-shadow: var(--ink-s); white-space: nowrap; }
.ch-badge { position: absolute; top: -6px; right: 0; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }

/* Bike picker: a plate with chunky arrows at the top of the stage, between the rails,
   as Clash's arena selector. Bikes still to reach turn the plate gold with a lock. */
.ch-bike-pick { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 6px; width: min(300px, calc(100% - 196px)); }
.ch-bike-plate { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px 7px;
  border: 3px solid var(--rim); border-radius: 14px; background: linear-gradient(180deg, var(--k-event-hi), var(--k-event-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--rim); color: #fff; text-align: center; }
.ch-bike-name { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1; text-shadow: var(--ink); text-transform: uppercase; }
.ch-bike-note { font-family: var(--display); font-size: 11.5px; line-height: 1.15; color: var(--gold); text-shadow: var(--ink-s); }
.ch-bike-dots { display: flex; gap: 5px; margin-top: 1px; }
.ch-bike-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 2px solid var(--rim); background: rgba(255,255,255,.35); transition: transform .15s, background .15s; }
.ch-bike-dots button.locked { background: rgba(255,255,255,.12); }
.ch-bike-dots button.on { background: var(--k-ink); transform: scale(1.35); }
.ch-bike-arrow { flex: none; width: 38px; height: 44px; display: grid; place-items: center; padding: 0; border: 3px solid var(--rim); border-radius: 12px; color: var(--k-ink);
  background: linear-gradient(180deg, var(--k-btn-hi), var(--k-btn-lo)); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 0 var(--rim); transition: transform .12s; }
.ch-bike-arrow .icon-wrap { filter: drop-shadow(0 2px 0 var(--rim)); }
.ch-bike-arrow.prev .icon-wrap { transform: scaleX(-1); }
.ch-bike-arrow:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 1px 0 var(--rim); }
.ch-bike-pick.locked .ch-bike-plate { background: linear-gradient(180deg, #ffe08a, #f2a81e); }
.ch-bike-pick.locked .ch-bike-note { color: #fff; }
.ch-bike-pick.locked .ch-bike-name .icon-wrap { color: #fff; }

/* The week's circuit as Clash's "Evento" tab, hanging over the battle button. */
.ch-event { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px 8px; min-width: 230px;
  border: 3px solid var(--rim); border-radius: 16px; background: linear-gradient(180deg, var(--k-event-hi), var(--k-event-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 var(--rim); color: #fff; }
.ch-event-head { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 12px; color: var(--gold); text-shadow: var(--ink-s); }
.ch-event b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1; text-shadow: var(--ink); }
.ch-event-row { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 14px; text-shadow: var(--ink-s); }
.ch-event-row .trackmap { width: 70px; height: 30px; }

/* Battle dock: a big yellow COMPETIR flanked by friendly and practice. */
.ch-dock { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1.7fr 1fr; align-items: center; gap: 10px; margin: -6px 6px 0; padding: 12px;
  border: 3px solid var(--rim); border-radius: 26px; background: linear-gradient(180deg, var(--k-dock-hi), var(--k-dock-lo)); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--k-drop); }
.ch-battle { height: 92px; border: 3px solid var(--rim); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff;
  background: linear-gradient(180deg, var(--k-cta-hi) 0, var(--k-cta) 45%, var(--k-cta-lo) 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 0 -6px 0 var(--k-cta-lip), 0 5px 0 var(--rim), 0 0 30px var(--k-cta-glow);
  animation: ch-pulse 2.4s ease-in-out infinite; }
.ch-battle:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 0 -3px 0 var(--k-cta-lip), 0 1px 0 var(--rim); animation: none; }
.ch-battle-label { font-family: var(--display); font-size: clamp(28px, 5vw, 40px); line-height: 1; text-shadow: var(--ink); }
@keyframes ch-pulse { 50% { filter: brightness(1.08); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 0 -6px 0 var(--k-cta-lip), 0 5px 0 var(--rim), 0 0 44px var(--k-cta-glow2); } }
.ch-dock-side { height: 80px; border: 3px solid var(--rim); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff;
  font-family: var(--display); font-size: 14px; text-shadow: var(--ink-s);
  background: linear-gradient(180deg, var(--k-btn-hi), var(--k-btn-lo)); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 var(--rim); }
.ch-dock-side:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 1px 0 var(--rim); }
.ch-dock-ic .icon-wrap { color: var(--k-ink); filter: drop-shadow(0 2px 0 var(--rim)); }
@media (prefers-reduced-motion: reduce) { .ch-battle { animation: none; } }
@media (max-width: 649px) {
  /* Short enough that COMPETIR shows without scrolling, as Clash's Batalla. */
  .skin-clash .page:has(> .ch-home) { padding-top: 12px; }
  .ch-top { gap: 8px; }
  /* The bike gets the middle: slimmer rails, the week's circuit as a small tab at the bottom
     and a wider camera (js/ui/pages/dashboardClash.js), so the whole bike shows between them. */
  .ch-arena { height: max(330px, calc(100dvh - 400px)); margin-top: 12px; border-radius: 20px; }
  .ch-rail { gap: 8px; top: 64px; } .ch-rail.left { left: 6px; } .ch-rail.right { right: 6px; }
  .ch-bubble { width: 54px; } .ch-bubble-ic { width: 44px; height: 44px; border-radius: 13px; border-width: 2px; }
  .ch-bubble-ic .icon-wrap svg { width: 22px; height: 22px; }
  .ch-bubble-label { font-size: 10.5px; }
  .ch-badge { top: -6px; right: 0; min-width: 18px; height: 18px; font-size: 11px; border-radius: 6px; }
  .ch-event { bottom: 8px; min-width: 0; max-width: calc(100% - 132px); padding: 4px 12px 5px; border-radius: 12px; border-width: 2px; gap: 0; }
  .ch-event-head { font-size: 10px; }
  .ch-event b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ch-event-row { display: none; }
  .ch-bike-pick { top: 8px; gap: 4px; width: min(280px, calc(100% - 24px)); }
  .ch-bike-arrow { width: 30px; height: 40px; border-radius: 10px; }
  .ch-bike-name { font-size: 16px; } .ch-bike-note { font-size: 10.5px; }
  .ch-dock { gap: 8px; padding: 10px; margin: -6px 0 0; }
  .ch-battle { height: 82px; } .ch-dock-side { height: 70px; font-size: 12.5px; }
  .ch-ladder { margin-left: 0; width: 100%; }
  .ch-ladder-txt { flex: 1; }
  .ch-name { font-size: 21px; }
}

/* Chests, missions and circuit cards follow the panel look. */
/* On the lobby the slots go in one row that scrolls sideways, as Clash's chest bar. */
.ch-home .chest-row .chest-slots { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(128px, 1fr); gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.ch-home .chest-slot.empty { height: 128px; }
.skin-clash .chest-slot.empty .icon-wrap, .skin-clash .chest-slot.empty .tiny { color: var(--k-chest-ink); font-family: var(--display); letter-spacing: .3px; }
.skin-clash .chest-slot { border: 3px solid var(--rim); border-radius: 16px; background: linear-gradient(180deg, var(--k-chest-hi), var(--k-chest-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--rim); }
.skin-clash .chest-slot.empty { border-style: solid; background: var(--k-chest-empty); box-shadow: inset 0 3px 8px rgba(0,0,0,.35); }
.skin-clash .chest-slot.ready { background: linear-gradient(180deg, #ffd96b, #e99a12); }
/* "Open now · 180 💎" fits the slot on one line. */
.skin-clash .chest-row .chest-slot .btn.chest-speed { font-size: 12px; letter-spacing: 0; padding: 0 4px; white-space: nowrap; }
.skin-clash .chest-tier, .skin-clash .chest-timer { font-family: var(--display); font-weight: 400; color: #fff; text-shadow: var(--ink-s); }
.skin-clash .circuit-mini h4 { font-size: 22px; }
.skin-clash .meter { border: 2px solid var(--rim); background: var(--k-well); border-radius: 8px; }
.skin-clash .tier-badge b { font-family: var(--display); font-weight: 400; text-shadow: var(--ink-s); }
.skin-clash .dialog { border: 3px solid var(--rim); border-radius: 20px; background: linear-gradient(180deg, var(--k-panel-hi), var(--k-panel-lo)); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 8px 0 var(--k-drop), var(--shadow); }

/* ---------------------------------------------------------------- black and lime palette
   Same layout, the logo's colours: carbon panels with black outlines, lime for what is
   pressed and lit (COMPETIR, the open tab, icons), gold only for prizes, chrome for the shop. */
.skin-clash.skin-lime {
  --k-bg: #0b0e0b; --k-bg2: #111511; --k-bg-hi: #141a13; --k-bg-lo: #050705; --k-bg-glow: rgba(57,255,20,.16);
  --k-rim: #000; --k-line2: #3a4339; --k-muted: #a7b3a3; --k-drop: rgba(0,0,0,.7);
  --k-panel-hi: #2c332c; --k-panel: #1d221d; --k-panel-lo: #151915; --k-panel2: #262c26;
  --k-btn-hi: #3d463d; --k-btn-lo: #1c211c; --k-btn: #3a433a; --k-ink: #39ff14;
  --k-tab-hi: #b4ff8c; --k-tab-lo: #2fc712;
  --k-alt-hi: #f2f5f2; --k-alt-lo: #7d877d;
  --k-event-hi: #1f3818; --k-event-lo: #0b1708;
  --k-well-hi: #000; --k-well: #0b0e0b; --k-fill-hi: #a6ff7d; --k-fill-lo: #2fc712;
  --k-ribbon-hi: #353d35; --k-ribbon-lo: #151915;
  --k-arena-glow: rgba(57,255,20,.26); --k-rays: rgba(57,255,20,.06); --k-arena-hi: #22321e; --k-arena-mid: #111810; --k-arena-lo: #050705; --k-shade: rgba(0,0,0,.6);
  --k-dock-hi: #2a312a; --k-dock-lo: #121512;
  --k-cta-hi: #c2ffa3; --k-cta: #39ff14; --k-cta-lo: #1fb80a; --k-cta-lip: #0f6a04; --k-cta-glow: rgba(57,255,20,.35); --k-cta-glow2: rgba(57,255,20,.65); --k-cta-chip: rgba(0,50,0,.45);
  --k-accent-rgb: 57, 255, 20;
  --k-side-hi: #141814; --k-side-lo: #080a08; --k-card-hi: #263123; --k-card-lo: #111711;
  --k-nav-hi: #262c26; --k-nav-lo: #0e110e;
  --k-chest-hi: #2f372f; --k-chest-lo: #161a16; --k-chest-empty: rgba(0,0,0,.45); --k-chest-ink: #6f7b6c;
  --k-top: rgba(5,7,5,.94); --k-nav-ink: #d3dccf; --k-ghost: #4a534a; --k-disabled: #353b35;
}
/* Lime is light: the big button's words keep a black outline, as the logo's lettering. */
.skin-clash.skin-lime .ch-season { color: #fff; }
.skin-clash.skin-lime .ch-arena { border-color: #000; box-shadow: inset 0 0 0 2px rgba(57,255,20,.25), inset 0 3px 0 rgba(255,255,255,.12), inset 0 -40px 60px rgba(0,0,0,.6), 0 6px 0 rgba(0,0,0,.7); }
.skin-clash.skin-lime .ch-event { box-shadow: inset 0 0 0 2px rgba(57,255,20,.45), 0 4px 0 #000; }
.skin-clash.skin-lime .ch-event-head { color: #39ff14; }
.skin-clash.skin-lime .ch-ladder { box-shadow: inset 0 0 0 2px rgba(57,255,20,.35), inset 0 2px 0 rgba(255,255,255,.18), 0 4px 0 #000; }
.skin-clash.skin-lime .section-title h3::after { background: linear-gradient(90deg, rgba(57,255,20,.55), transparent); }
.skin-clash.skin-lime .section-title button, .skin-clash.skin-lime .section-title .link, .skin-clash.skin-lime .ch-sub, .skin-clash.skin-lime .eyebrow { color: #39ff14; }
.skin-clash.skin-lime .bottomnav button.on .icon-wrap, .skin-clash.skin-lime .chip.on, .skin-clash.skin-lime .nav-item.on .icon-wrap { color: #fff; }
.skin-clash.skin-lime .nav-item.on { background: linear-gradient(180deg, #b4ff8c, #2fc712); }