/* SIDEBAR */
.sidebar-top-nav { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 86px; min-height: 86px; flex-shrink: 0; box-sizing: border-box; }
.sidebar-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--bg-chip); border-radius: var(--radius-md); border: none; cursor: pointer; font: inherit; color: inherit; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-menu-btn { transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
  .sidebar-menu-btn:hover { background: var(--bg-chip-hover); }
}
.sidebar-menu-btn:focus { background: var(--bg-chip); }
.sidebar-menu-btn img { filter: brightness(1.25); }
.menu-lines { position: relative; width: 24px; height: 18px; }
.menu-line { position: absolute; width: 100%; height: 20%; left: 0; }
.menu-line:nth-child(1) { top: 0; } .menu-line:nth-child(2) { top: 40%; } .menu-line:nth-child(3) { top: 80%; }

.sidebar { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); padding: 0; overflow: hidden; z-index: 1005; transition: transform var(--dur-sidebar, .4s) var(--ease-sidebar), width var(--dur-sidebar, .4s) var(--ease-sidebar); transform: translateX(-100%); display: flex; flex-direction: column; }
.sidebar.active { transform: translateX(0); }

/* Scroll area & custom scrollbar */
.sidebar-scroll-area { position: relative; flex: 1; min-height: 0; }
.sidebar-inner { display: flex; flex-direction: column; padding: 0 16px 16px 16px; gap: 6px; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-inner::-webkit-scrollbar { display: none; }
.sidebar-custom-scrollbar { position: absolute; top: 0; right: 1px; bottom: 0; width: 6px; pointer-events: none; z-index: 2; }
.sidebar-custom-thumb { position: absolute; right: 0; width: 6px; background: var(--scrollbar-thumb, var(--bg-elevated)); border-radius: 999px; min-height: 30px; }

.sidebar-footer-inner { position: relative; margin-top: auto; padding-top: 4px; }
.sidebar-search-bar { display: flex; align-items: center; gap: 8px; padding: 8px; height: 44px; min-height: 44px; background: var(--bg-input); border: 2px solid var(--border-strong); border-radius: var(--radius-md); flex: 1; min-width: 0; cursor: pointer; transition: border-color var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
@media (hover: hover) { .sidebar-search-bar:hover { border-color: var(--bg-elevated-hover); } }
.sidebar-search-bar .search-icon { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; }
.sidebar-search-bar input { flex: 1; background: none; border: none; color: #fff; font-size: var(--fs-md); font-family: "RM Neue-Regular", Helvetica, sans-serif; pointer-events: none; }
.sidebar-search-bar input::placeholder { color: var(--text-muted); }
.sidebar-search-bar input:focus { outline: none; }
.sidebar-menu-wrapper { border-bottom: 1px solid var(--border-strong); padding-bottom: 12px; }
.sidebar-nav-menu { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-divider { height: 1px; min-height: 1px; flex-shrink: 0; background: var(--border-strong); margin: 6px 0; }

/* Menu items */
.sidebar-pc-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 42px; box-sizing: border-box; color: #fff; text-decoration: none; border-radius: var(--radius-md); font-size: var(--fs-sm); font-family: "RM Neue-Regular", Helvetica, sans-serif; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-pc-menu-item { transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)), color var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
  .sidebar-pc-menu-item:hover { background: var(--bg-secondary); color: #fff; }
}
.sidebar-pc-menu-item.active { background: rgba(var(--bg-card-rgb),0.9); color: var(--accent-pink); }
/* Tap/press feedback — driven by JS pointer events (.is-pressed), NOT :active,
   so it never lights up while scrolling the menu, only on a genuine press. */
.sidebar-pc-menu-item, .sidebar-pc-group-header { transition: transform var(--dur-press, .08s) var(--ease-out, cubic-bezier(.33,1,.68,1)), background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); -webkit-tap-highlight-color: transparent; }
.sidebar-pc-menu-item.is-pressed, .sidebar-pc-group-header.is-pressed { background: rgba(255, 255, 255,0.14); transform: scale(0.97); }
.sidebar-pc-menu-item.active.is-pressed { background: rgba(var(--bg-card-rgb),0.97); }
.sidebar-pc-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-pc-menu-item.active .sidebar-pc-icon { color: #fff; }
.sidebar-pc-icon img { width: 100%; height: 100%; object-fit: contain; vertical-align: middle; }
/* A main row's own icon (Sidebar.tsx Glyph): the file as a mask, painted in the icon colour (sidebar-stake.css) —
   sharp at every size, unlike the CSS-filter tint it replaced (owner 2026-10-16: icons "blurry until clicked"). */
.sidebar-pc-glyph { display: block; width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; overflow: visible; }
/* every row icon reaches the same 20 px (owner 2026-10-16: "Make sure all icons on site are even in length and size"): the
   glyphs are trimmed to their drawing; the heart's drawing is 82 % of its box and Font Awesome's glyphs are 1 em tall */
.sidebar-pc-icon[data-icon="favourites"] svg { width: 24px; height: 24px; flex-shrink: 0; }
.sidebar-pc-icon img[src*="pragmatic"] { width: 26px; height: 26px; }
.sidebar-pc-text { flex: 1; white-space: nowrap; line-height: 22px; height: 22px; color: var(--text-primary); transform: translateY(1px); }

/* Menu groups (dropdowns) */
.sidebar-pc-menu-group { margin-top: 2px; background: rgba(255, 255, 255,0.03); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); }
.sidebar-pc-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 42px; box-sizing: border-box; background: rgba(255, 255, 255,0.05); border-radius: 0; cursor: pointer; touch-action: manipulation; }
.sidebar-pc-expand { margin-left: auto; width: 26px; height: 26px; min-width: 26px; min-height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255,0.1); border-radius: var(--radius-sm); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-pc-group-header { transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
  .sidebar-pc-group-header:hover { background: var(--bg-secondary); }
  .sidebar-pc-expand { transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
  .sidebar-pc-expand:hover { background: var(--bg-card); }
}
.sidebar-pc-expand svg { width: 16px; height: 16px; transition: transform .24s var(--ease-premium); transform: rotate(0deg); }
body.sidebar-open .sidebar-pc-menu-group.open .sidebar-pc-expand svg { transform: rotate(180deg); }
.sidebar-pc-submenu { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--dur-base, .22s) var(--ease-premium), padding var(--dur-base, .22s) var(--ease-premium); padding: 0 6px; contain: layout; }
.sidebar-pc-submenu.open { grid-template-rows: 1fr; padding-top: 4px; padding-bottom: 6px; }
.sidebar-pc-submenu-inner { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; max-height: 500px; }
.sidebar-pc-subitem { padding: 10px 14px !important; display: flex; align-items: center; min-height: 42px; border-radius: var(--radius-md); }
.sidebar-pc-subitem .sidebar-pc-text { opacity: 0.7; }
.sidebar-pc-subitem.active .sidebar-pc-text { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-pc-subitem:hover .sidebar-pc-text { opacity: 1; }
}

/* Bottom links */
.sidebar-rewards-link { margin-top: 4px; }
.sidebar-rewards-link svg { color: var(--text-muted); }
.sidebar-rewards-link.active svg { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-rewards-link svg { transition: color var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
  .sidebar-rewards-link:hover svg { color: #fff; }
}
.sidebar-section-bottom { display: flex; flex-direction: column; gap: 2px; }

/* Footer */
.sidebar-section-footer { display: flex; flex-direction: column; gap: 16px; }
.sidebar-footer-item-wrap { display: flex; width: 100%; background: var(--bg-card); border-radius: var(--radius-lg); touch-action: manipulation; }
.sidebar-footer-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; border: none; color: #fff; font-size: var(--fs-sm); font-family: "RM Neue-Regular", Helvetica, sans-serif; cursor: pointer; text-decoration: none; border-radius: var(--radius-md); width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-language-btn:hover { background: rgba(255, 255, 255,0.06); }
}
.sidebar-language-dropdown { position: absolute; bottom: 100%; left: 14px; right: 14px; margin-bottom: 8px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .14s var(--ease-in, cubic-bezier(.4,0,1,1)), opacity .14s var(--ease-in, cubic-bezier(.4,0,1,1)); pointer-events: none; }
.sidebar-language-dropdown.open { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transition: grid-template-rows var(--dur-base, .22s) var(--ease-premium), opacity var(--dur-base, .22s) var(--ease-premium); }
.sidebar-dropdown-inner { overflow: hidden; overflow-y: auto; min-height: 0; max-height: 300px; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-dropdown-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }
.language-option { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.language-option:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .language-option:hover { background: rgba(var(--info-rgb),0.1); }
}
.language-option.active { background: rgba(var(--info-rgb),0.15); color: var(--accent-blue); }
.language-flag { font-size: 24px; width: 32px; text-align: center; }
.language-name { flex: 1; font-size: var(--fs-sm); font-weight: 500; }
.language-option i.fa-check { color: var(--accent-blue); font-size: 14px; }
.sidebar-currency-icon { width: 22px; height: 22px; object-fit: contain; display: block; }
.language-flag .sidebar-currency-icon { width: 24px; height: 24px; }
.sidebar-pc-icon .sidebar-currency-icon { width: 20px; height: 20px; }
/* Language flags are landscape (3:2), not square tiles — match the register field's look. */
.sidebar-lang-icon { width: 28px; height: 18px; object-fit: cover; display: block; border-radius: 3px; }
.sidebar-pc-icon .sidebar-lang-icon { width: 24px; height: 16px; flex-shrink: 0; }
/* Footer (language/currency) icon slot is a touch wider so the landscape flag isn't squeezed. */
.sidebar-language-btn .sidebar-pc-icon { width: 24px; }

.sidebar-item-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; background: var(--badge-purple); color: #fff; font-size: 10px; font-weight: 700; font-family: "RM Neue-Bold", Helvetica, Arial, sans-serif; letter-spacing: 0.4px; border-radius: var(--radius-sm); line-height: 1.4; margin-left: auto; flex-shrink: 0; text-transform: uppercase; }
.sidebar-overlay { display: none; }
.sidebar-mobile-search { display: none; }

/* Sidebar desktop collapsed state */

/* Tidy pass 2026-10-10, no change to the look: Slots / Originals headers are <button>s (keyboard,
   aria-expanded) dressed exactly like the old <div> rows; the keyboard focus ring is drawn inside
   the rows so the clipped lists never cut it; icon sizes that used to be inline styles. */
.sidebar-pc-group-header { width: 100%; margin: 0; border: none; font: inherit; color: inherit; text-align: left; }
.sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header, .sidebar-footer-row, .sidebar-menu-btn, .sidebar-search-bar, .sidebar-mobile-search, .language-option):focus-visible { outline-offset: -2px; }
.sidebar-pc-icon[data-icon="referrals"] i { font-size: 20px; line-height: 1; }

@media (min-width: 769px) {
    /* Same duration + curve as .header padding-left, .main-content margin and .main-footer, so all edges move together. */
    .sidebar { transform: translateX(0); width: calc(52px + env(safe-area-inset-left, 0px)); padding-left: env(safe-area-inset-left, 0px); transition: transform var(--dur-sidebar, .4s) var(--ease-sidebar), width var(--dur-sidebar, .4s) var(--ease-sidebar); }
    body.sidebar-open .sidebar { width: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px)); }
    .sidebar-top-nav .sidebar-menu-btn { display: flex; width: 44px; height: 44px; }
    .sidebar-top-nav { padding: 0 16px; justify-content: flex-start; gap: 8px; height: var(--header-h); min-height: var(--header-h); }
}


/* ═══════════════════════════════════════════════════════════════════
   CLOSED DESKTOP MENU — the 52px rail (sidebar tidy 2026-10-10).
   Owner: "less weird lines between, more even" for the closed sidebar, then "revert the open side
   bar back to how it was i just wanted the change for the close sidebar": everything above (the
   open menu, the phone menu) is the old look; only these rules change the rail.
   - 40px rounded square tiles in 44px slots (4px gaps), icons on one 26px line;
   - the current page / hover = a tile one shade lighter than the column (--sb-tile-*,
     sidebar-stake.css); a group whose list holds the current page shows it on its tile;
   - ONE divider (above VIP; the one after Recently Played is open-menu only), no box, no lines;
   - a tiny › on Slots / Originals: a click opens the menu with that list unfolded (Sidebar.tsx toggleGroup).
   Undo: removed-features-backup/sidebar-tidy-2026-10-10/README.txt
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body:not(.sidebar-open) .sidebar-top-nav .sidebar-menu-btn:hover,
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header):hover { background: var(--sb-tile-hover); }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header):hover .sidebar-pc-icon { color: #fff; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-group-header:hover .sidebar-pc-expand svg { stroke: #fff; }
}
@media (min-width: 769px) {
  /* The rail scrolls when its icons are taller than the window (2026-10-18: on a laptop the lower icons were out of
     reach with a trackpad, because the rail never scrolled; it was kept from scrolling only so its labels were not cut
     off). The labels are now drawn outside the rail (.sidebar-rail-tip below, placed by Sidebar.tsx). Undo
     ../removed-features-backup/sidebar-rail-scroll-2026-10-18/README.txt */
  body:not(.sidebar-open) .sidebar { overflow: visible; }
  body:not(.sidebar-open) .sidebar .sidebar-scroll-area { overflow: hidden; }
  body:not(.sidebar-open) .sidebar .sidebar-inner { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 6px 16px; }
  body:not(.sidebar-open) .sidebar .sidebar-custom-scrollbar { display: none; }
  /* Top bar: the hamburger on the icons' line */
  body:not(.sidebar-open) .sidebar-top-nav { padding: 0 0 0 6px; justify-content: flex-start; }
  body:not(.sidebar-open) .sidebar-top-nav .sidebar-search-bar { display: none !important; }
  body:not(.sidebar-open) .sidebar-top-nav .sidebar-menu-btn { width: 40px; height: 40px; border-radius: var(--radius-lg); }
  body:not(.sidebar-open) .sidebar-top-nav .menu-lines { width: 20px; height: 15px; }
  /* The list: no box; every row a 40px tile in a 44px slot, icon centred, label hidden */
  body:not(.sidebar-open) .sidebar .sidebar-menu-wrapper { background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
  body:not(.sidebar-open) .sidebar .sidebar-nav-menu { gap: 4px; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-menu-group { display: flex; flex-direction: column; margin: 0; background: transparent; border: none; border-radius: 0; overflow: visible; }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header) { position: relative; width: 40px; height: 40px; min-height: 40px; margin: 2px 0; padding: 0; gap: 0; justify-content: center; border-radius: var(--radius-lg); background: transparent; }
  /* Label hidden from sight only: it stays the button's name for screen readers (display: none left the rail's
     icon buttons with no name at all — full browser test 2026-10-10). The tile is position: relative (above). */
  body:not(.sidebar-open) .sidebar .sidebar-pc-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; animation: none; }
  body:not(.sidebar-open) .sidebar .sidebar-item-badge { display: none; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-submenu { grid-template-rows: 0fr; padding: 0; transition: none; }
  /* The current page; a group whose (hidden) list holds the current page; a tap */
  body:not(.sidebar-open) .sidebar .sidebar-pc-menu-item.active,
  body:not(.sidebar-open) .sidebar .sidebar-pc-group-header.has-current { background: var(--sb-tile-active); }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current) .sidebar-pc-icon { color: #fff; }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current) .sidebar-pc-icon img { filter: none; }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current) .sidebar-pc-glyph { color: #fff; }
  body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header).is-pressed { background: var(--sb-tile-press); }
  /* Icons: one 20px slot, every drawing reaching 20 px (2026-10-16: the glyphs are trimmed to their drawing, SiteIcon;
     the per-icon sizes of 2026-10-10 are gone — owner: "Make sure all icons on site are even in length and size"). */
  body:not(.sidebar-open) .sidebar .sidebar-pc-icon { width: 20px; height: 20px; flex: 0 0 20px; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-icon :is(img, .sidebar-pc-glyph) { width: 20px; height: 20px; flex-shrink: 0; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-icon i { font-size: 20px; line-height: 1; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-icon[data-icon="favourites"] svg { width: 24px; height: 24px; stroke-width: 2; }
  /* ONE divider, the tile's width */
  body:not(.sidebar-open) .sidebar .sidebar-nav-divider { width: 40px; margin: 6px 0; background: var(--sb-rail-divider); }
  body:not(.sidebar-open) .sidebar .sidebar-nav-divider--open-only { display: none; }
  /* The tiny › beside the icon of Slots / Originals */
  body:not(.sidebar-open) .sidebar .sidebar-pc-expand { position: absolute; top: 50%; right: 1px; width: 10px; height: 10px; min-width: 0; min-height: 0; margin: -5px 0 0; background: transparent; pointer-events: none; }
  body:not(.sidebar-open) .sidebar .sidebar-pc-expand svg { width: 10px; height: 10px; stroke: var(--sb-icon); stroke-width: 3.5; transform: rotate(-90deg); transition: none; }
  /* Footer (no picker today; kept in step if one comes back): a tile, its list not offered on the rail */
  body:not(.sidebar-open) .sidebar .sidebar-footer-item-wrap { width: 40px; height: 40px; background: var(--sb-tile-hover); border: none; box-shadow: none; }
  body:not(.sidebar-open) .sidebar .sidebar-footer-row { height: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; }
  body:not(.sidebar-open) .sidebar .sidebar-footer-row .sidebar-pc-text { display: none; }
  body:not(.sidebar-open) .sidebar .sidebar-language-dropdown { display: none !important; }
}

/* The rail's labels (2026-10-18): ONE floating label in <body>, placed by Sidebar.tsx beside the tile under the pointer,
   so the scrolling rail never cuts it off. The same look and timing as the old ::after labels: it fades and slides 4px
   into place after a short pause (moving down the rail does not flash every label) and hides at once. */
.sidebar-rail-tip { position: fixed; z-index: 1010; transform: translate(0, -50%); padding: 10px 14px; background: var(--bg-card); color: #fff; font-size: var(--fs-sm); font-weight: 500; font-family: "RM Neue-Regular", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; white-space: nowrap; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); pointer-events: none; animation: sidebar-rail-tip-in .14s var(--ease-out, cubic-bezier(.33,1,.68,1)) .12s both; }
.sidebar-rail-tip::before { content: ''; position: absolute; left: -7px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right-color: var(--bg-card); }
@keyframes sidebar-rail-tip-in { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) { .sidebar-rail-tip { animation-name: sidebar-rail-tip-fade; } }
@keyframes sidebar-rail-tip-fade { from { opacity: 0; } to { opacity: 1; } }

/* Touch screens wider than 768px (a tablet, a phone turned sideways): no hover, so no rail
   tooltips to keep unclipped. The rail scrolls (on a 390px-tall screen its lower items were out
   of reach), clears the home-indicator area at its end, and its buttons are full tap targets. */
@media (min-width: 769px) and (hover: none) {
    .sidebar .sidebar-inner { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    /* The rail on a touch screen: it scrolls, ends clear of the home indicator, 44px tiles (inset 4px: icons stay on the 26px line). */
    body:not(.sidebar-open) .sidebar .sidebar-scroll-area { overflow: hidden; }
    body:not(.sidebar-open) .sidebar .sidebar-inner { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 4px calc(16px + env(safe-area-inset-bottom, 0px)); }
    body:not(.sidebar-open) .sidebar-top-nav { padding-left: 4px; }
    body:not(.sidebar-open) .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header),
    body:not(.sidebar-open) .sidebar .sidebar-footer-item-wrap,
    body:not(.sidebar-open) .sidebar .sidebar-footer-row,
    body:not(.sidebar-open) .sidebar-top-nav .sidebar-menu-btn { width: 44px; height: 44px; min-height: 44px; margin: 0; }
    body:not(.sidebar-open) .sidebar .sidebar-nav-divider { width: 44px; }
}

/* Expanding (owner 2026-10-14: "sidebar opens too quick that it doesnt load properly and hurts eyes make it smoother"):
   the menu's whole content (the rows, the search box, the sound box) fades in once the menu is about half open, so the
   switch from the rail's tiles to the open rows never shows mid-way; the labels follow a moment later (collapsing
   hides them at once, above). Undo: ../removed-features-backup/sidebar-smoother-2026-10-14/README.txt */
@keyframes sbLabelIn { from { opacity: 0; } }
@keyframes sbContentIn { from { opacity: 0; transform: translateX(-6px); } }
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    body.sidebar-open .sidebar :is(.sidebar-top-nav, .sidebar-scroll-area) { animation: sbContentIn .26s var(--ease-sidebar, ease) .14s backwards; }
    body.sidebar-open .sidebar .sidebar-pc-text { animation: sbLabelIn .24s var(--ease-sidebar, ease) .22s backwards; }
}
/* Collapsing (owner 2026-10-14: "when u close sidebar tab make the animation cleaner aswell"): the rail's tiles wait
   until the menu has mostly folded, then fade in — the open rows never squeeze into the shrinking panel and the tiles
   never jump in at once. Only after the player opened / closed it (body.sb-moved, Layout.tsx): never on page load. */
@keyframes sbRailIn { from { opacity: 0; transform: translateX(-4px); } }
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    body.sb-moved:not(.sidebar-open) .sidebar :is(.sidebar-top-nav, .sidebar-scroll-area) { animation: sbRailIn .22s var(--ease-sidebar, ease) .22s backwards; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* Sidebar mobile */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: none;
        z-index: 1001;
        transform: translateY(100%);
        will-change: transform;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: none;
        border-right: none;
        border-radius: 0;
        padding-top: 0;
        padding-bottom: 70px;
        pointer-events: none;
    }
    .sidebar.active { transform: translateY(0); pointer-events: auto; }
    .sidebar-top-nav { display: none; }
    .sidebar-search-bar { display: none !important; }
    .sidebar-custom-scrollbar { display: none; }
    .sidebar-mobile-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: var(--bg-input);
        border: 2px solid var(--border-strong);
        border-radius: var(--radius-md);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .sidebar-mobile-search .search-icon { width: 18px; height: 18px; opacity: 0.6; flex-shrink: 0; }
    .sidebar-mobile-search span { color: var(--text-muted); font-size: var(--fs-md); font-family: "RM Neue-Regular", Helvetica, sans-serif; }
    .sidebar-mobile-search:active { border-color: var(--bg-elevated-hover); }
    .sidebar-inner {
        padding: 16px 16px 16px;
        overflow-x: hidden !important;
        overflow-y: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        scrollbar-width: auto; /* undo the desktop "none" so the ::-webkit-scrollbar rules below apply (Chrome 121+) */
        -ms-overflow-style: auto;
    }
    /* Show the shared thin token scrollbar here (the desktop rule above hides it). */
    .sidebar-inner::-webkit-scrollbar { display: block; width: var(--scrollbar-size, 6px); }
    .sidebar-inner::-webkit-scrollbar-track { background: transparent; }
    .sidebar-inner::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, var(--bg-elevated)); border-radius: 999px; }
    .sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, var(--bg-elevated-hover)); }
    @supports not selector(::-webkit-scrollbar) {
        .sidebar-inner { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, var(--bg-elevated)) transparent; }
    }
    .sidebar.active { overflow-x: hidden !important; overflow-y: hidden; }
    .sidebar-overlay { display: none; }
    .sidebar-pc-menu-group { margin-top: 2px; }
    .sidebar-pc-group-header { padding: 10px 13px; min-height: 42px; }
    .sidebar-pc-expand { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
    .sidebar-pc-submenu { padding-left: 0; padding-right: 0; }
    .sidebar-pc-subitem { padding: 10px 13px !important; }
    .sidebar-footer-inner { margin-top: auto; padding-top: 4px; }
    .sidebar-section-footer { display: flex; flex-direction: column; gap: 16px; width: 100%; }
    /* The sheet ends above the bottom bar, which is 70px + the home-indicator area */
    .sidebar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* Display currency: the list opens in place under its button and pushes nothing off
       screen (it used to float up over Weekly Race, VIP, Rewards and Referrals). */
    .sidebar-language-dropdown { position: static; margin: 8px 0 0; }
    .sidebar-language-dropdown:not(.open) { margin-top: 0; border-width: 0; }
    .language-option { min-height: 44px; }

}
@media (max-width: 480px) {
    .sidebar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Small tablets held upright (601–768px, e.g. iPad mini; owner 2026-10-10: "menu + Rewards as side
   panels"): the menu is a 420px panel from the left between the header and the bottom bar, the page
   stays visible behind it, dimmed by .sidebar-overlay (Layout.tsx); a tap on the page closes the menu.
   Phones keep the full-width sheet; wider tablets the rail + open menu above.
   Undo: ../removed-features-backup/site-answers-2026-10-10/README.txt ── */
@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
  .sidebar {
    right: auto;
    width: min(420px, 100%);
    transform: translateX(-100%);
    border-right: 1px solid var(--border-color);
  }
  .sidebar.active { transform: translateX(0); box-shadow: var(--shadow-xl); }
  /* the page stays on screen behind the panel (phones hide it under the full sheet, frame.css) */
  html body.sidebar-open .main-content,
  html body.sidebar-open .main-footer { visibility: visible; transition: none; }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
    -webkit-tap-highlight-color: transparent;
  }
  body.sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease; }
}
@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-overlay, body.sidebar-open .sidebar-overlay { transition: none; }
}

/* ═══ Sound switch (SidebarSound.tsx; owner 2026-10-14: "add a mute thing obvious on the side bar") ═══
   Its own box under the menu: speaker · Sound · On / Off · a switch. The closed rail shows the speaker tile only
   (crossed out when muted; the state in its tooltip). Undo: removed-features-backup/site-click-sounds-2026-10-14/ */
/* under the menu: at the bottom when there is room, otherwise right after the last item (owner 2026-10-14: "the sound
   and music go over the options when you expand the side bar it should just go further down" — it no longer sticks) */
.sidebar-sound-box { flex-shrink: 0; margin-top: auto; }
.sidebar-sound .sidebar-sound__state { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.sidebar-sound.is-on .sidebar-sound__state { color: var(--text-primary); }
.sidebar-sound__switch { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 10px; background: var(--bg-elevated); transition: background-color .16s; }
.sidebar-sound__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s; }
.sidebar-sound.is-on .sidebar-sound__switch { background: var(--accent); }
.sidebar-sound.is-on .sidebar-sound__knob { transform: translateX(16px); }
.sidebar .sidebar-sound.is-on .sidebar-pc-icon { color: var(--accent); }
.sidebar .sidebar-sound.is-off .sidebar-pc-icon { color: var(--text-muted); }
@media (min-width: 769px) {
  body:not(.sidebar-open) .sidebar .sidebar-sound :is(.sidebar-sound__state, .sidebar-sound__switch) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-sound__switch, .sidebar-sound__knob { transition: none; }
}
/* the volume sliders under Sound and Music (owner 2026-10-14: "make the sound button a slidebar aswell") */
.sidebar-audio-row { display: flex; flex-direction: column; }
.sidebar-audio-slider {
  -webkit-appearance: none; appearance: none;
  width: calc(100% - 40px); height: 6px; margin: -4px 20px 14px;
  border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--val, 50%), var(--bg-elevated) var(--val, 50%));
}
.sidebar-audio-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.sidebar-audio-slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.sidebar-audio-slider:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.sidebar-audio-row.is-off .sidebar-audio-slider { opacity: 0.45; }
@media (min-width: 769px) {
  body:not(.sidebar-open) .sidebar .sidebar-audio-slider { display: none; }
}
/* touch screens: a 28 px tall touch area (the track still looks 6 px), clear of the Sound / Music row above — a 6 px
   box pulled up into that row was hard to grab and a thumb could toggle the sound instead (overnight check 2026-10-16) */
@media (hover: none) and (pointer: coarse) {
  .sidebar-audio-slider {
    height: 28px;
    margin: 0 20px 6px;
    background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--val, 50%), var(--bg-elevated) var(--val, 50%)) center / 100% 6px no-repeat;
  }
}

/* My Kingdom's count (owner 2026-10-15): friend requests waiting + unread messages, a small gold block on the icon,
   on the open menu and the closed rail alike */
.sidebar-kingdom-link .sidebar-pc-icon { position: relative; }
.sidebar-kingdom-count {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--bg-sidebar);
  pointer-events: none;
}

/* ── PHONES: QUICK BUTTONS (owner 2026-10-16: "For mobile structure this differently instead of recently played and
   favourites put 4 buttons 2 left side 2 right side — Lobby - Weekly Race / Favourites - Refferals and make them coloured
   fitting the site"): a 2 x 2 grid of castle blocks at the top of the phone menu — Lobby gold, Weekly Race crimson,
   Favourites royal blue, Referrals emerald — each with its pixel icon; on phones they replace the Lobby / Favourites /
   Recently Played rows and the lower Weekly Race / Referrals rows (.sidebar-pc-menu-item--quick). Computers keep the
   rows. Undo ../removed-features-backup/phone-menu-quick-buttons-2026-10-16/README.txt */
.sidebar-quick { display: none; }
@media (max-width: 768px) {
  .sidebar .sidebar-pc-menu-item--quick { display: none; }
  .sidebar-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 10px 6px; }
  .sidebar-quick__btn {
    --q-bg: var(--accent); --q-fg: var(--accent-text, #1a1308);
    display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 12px;
    font: inherit; font-size: 17px; line-height: 1; text-align: left; color: var(--q-fg);
    background: var(--q-bg); border: 0; border-radius: 3px; cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 3px 3px 0 rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform 0.08s, box-shadow 0.08s;
  }
  .sidebar-quick__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-quick__btn:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 1px 1px 0 rgba(0, 0, 0, 0.45); }
  .sidebar-quick__btn:focus-visible { outline: 2px solid var(--castle-cream, #fff); outline-offset: 2px; }
  .sidebar-quick__btn--race { --q-bg: var(--team-red); --q-fg: var(--castle-cream, #fff); }
  .sidebar-quick__btn--fav { --q-bg: color-mix(in srgb, var(--team-blue) 82%, black); --q-fg: var(--castle-cream, #fff); }
  .sidebar-quick__btn--ref { --q-bg: color-mix(in srgb, var(--success) 62%, black); --q-fg: var(--castle-cream, #fff); }
  /* the page you are on: a cream ring inside the block */
  .sidebar-quick__btn.is-on { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 0 0 4px var(--castle-cream, #fff), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 3px 3px 0 rgba(0, 0, 0, 0.45); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .sidebar-quick__btn { transition: none; } }
/* ── PHONES: REFERRALS (owner 2026-10-23, the phone list: "Replace the "My Kingdom" nav item with "Referrals" (linking to
   the referrals page)"): on phones the menu's last row is Referrals → /referrals (.sidebar-ref-phone, Sidebar.tsx)
   instead of My Kingdom; computers keep My Kingdom and never show it. Undo
   ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 5) */
.sidebar .sidebar-ref-phone { display: none; }
@media (max-width: 768px) {
  .sidebar .sidebar-kingdom-link { display: none; }
  .sidebar .sidebar-ref-phone { display: flex; }
}
/* the narrowest phones (320 px): a little less room round the words so "Weekly Race" / "Favourites" fit whole */
@media (max-width: 359px) {
  .sidebar-quick { gap: 6px; padding: 8px 8px 4px; }
  .sidebar-quick__btn { gap: 6px; padding: 0 8px; font-size: 15px; }
}