/* Slide-out navigation.

   Every number here was read off www.slotmafia.com as a computed style rather
   than eyeballed from a screenshot:

     panel            240px wide, #1c1c1c, 12px side padding, 12px section gap
     row              216x44, #222222, radius 8, 12px inner padding
     row icon         20x20 at 12px in, white at 40% opacity, 12px before text
     nested row       208x44, #161616, indented 4px, icon 16px in
     open group head  #292929, its panel wrapper #161616
     rows in a group  4px apart; groups 10px apart
     exclusive tile   106x44, two per row
     download row     54 tall

   The donor theme also ships rules for `.sm_burger__aside`; those set the
   slide transform and the fixed positioning and are left alone. What follows
   only paints the contents. */

.sm-sidebar {
  --sm-panel: #1c1c1c;
  --sm-row: #222222;
  --sm-row-head: #292929;
  --sm-row-sub: #161616;
  --sm-ink: rgba(255, 255, 255, 0.65);
  --sm-ink-strong: #fff;
  --sm-gold-a: #ffd18e;
  --sm-gold-b: #c07733;

  width: 240px;
  background: var(--sm-panel);
  padding: 12px;
  box-sizing: border-box;
  /* The scroll lives on .sm-side__body so the close button can stay put; the
     drawer itself must not scroll as well or both would move at once. */
  overflow: hidden;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The theme's own close button is an absolutely-positioned 16px hit area in the
   top-right. The real site puts a 44px rounded square at the top-LEFT, above
   the list, so it is restyled into the flow instead.

   `flex: 0 0 auto` is load-bearing: the theme lays the drawer out as a flex
   column, so without it the button is a shrinkable flex item and gets squeezed
   from 44px down to a sliver the moment an expanded group makes the content
   taller than the screen. */
.sm-sidebar .sm-side__close {
  position: static;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--sm-row);
  color: var(--sm-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sm-sidebar .sm-side__close:hover {
  background: var(--sm-row-head);
  color: var(--sm-ink-strong);
}

/* Takes the leftover column height and scrolls inside it, so a long open group
   never pushes the close button off the top of the drawer.

   The bottom padding and the fade are not decoration: with neither, expanding a
   group slices the last row flush against the drawer edge, and because the
   scrollbar is an overlay on this platform there is nothing at all to say the
   list continues. The mask turns that hard cut into an obvious "more below". */
.sm-side__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}

/* A drawer whose contents already fit needs no fade - it would just dim the
   last row for no reason. */
.sm-side__body:not(.is-scrollable) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* No scrollbar at all. A drawer this narrow cannot spare 6-17px for a track,
   and the platform bar sits as a pale slab against the #1c1c1c panel. The fade
   above is the affordance; the list still scrolls by wheel, drag and keyboard. */
.sm-side__body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sm-side__body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* The header's burger is the control this drawer replaces on screen, so it is
   given the close button's exact shape - 44px rounded square, same surface -
   rather than sitting there as a bare 24px glyph. */
.sm_burger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #222222;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sm_burger__icon:hover {
  background: #292929;
}

/* The donor ships an <img> here. It is suppressed and the brand's own
   font-icons--menu-left drawn in its place, so the burger and the drawer's
   font-icons--cross are the same set at the same weight - which the donor's
   lopsided three-bar SVG was not. */
.sm_burger__icon img {
  display: none;
}

.sm_burger__icon::before {
  content: "\e90d";
  font-family: "font-icons";
  font-size: 24px;
  line-height: 1;
  color: #fff;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.sm_burger__icon:hover::before {
  opacity: 1;
}

.sm-side__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- rows ------------------------------------------------------------- */

.sm-side__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 8px;
  background: var(--sm-row);
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sm-side__item:hover,
.sm-side__item:focus-visible {
  background: var(--sm-row-head);
  color: var(--sm-ink-strong);
  text-decoration: none;
}

/* A pointer click on a <button> leaves the UA focus ring drawn round the row -
   a blue rectangle over the brand palette. Keyboard focus keeps a ring, in the
   brand gold, because it is the only cue a keyboard user gets. */
.sm-side__item:focus {
  outline: none;
}

.sm-side__item:focus-visible {
  outline: 2px solid var(--sm-gold-a);
  outline-offset: -2px;
}

/* Glyphs from the brand's own icon font, at the size and strength the real
   site renders them: 20px box, 40% white, so the label stays the loudest thing
   in the row. */
.sm-side__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.sm-side__item:hover .sm-side__icon,
.sm-side__acc.is-open > .sm-side__item--head .sm-side__icon {
  opacity: 1;
}

/* The burger and the cross swap places on screen, so they carry the same 44px
   box and the same glyph size from the same font - 24px at 65% white, which is
   what the real site renders for both. The rows below are 20px at 40%. */
.sm-sidebar .sm-side__close .font-icons {
  font-size: 24px;
  line-height: 1;
}

/* Flags are full-colour artwork - dimming them just makes them look broken. */
.sm-side__icon--flag {
  object-fit: contain;
  opacity: 1;
  border-radius: 50%;
}

.sm-side__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-side__tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  color: #0f0f14;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ---- collapsible groups ------------------------------------------------ */

.sm-side__acc {
  border-radius: 8px;
}

.sm-side__acc.is-open {
  background: var(--sm-row-sub);
}

.sm-side__acc.is-open > .sm-side__item--head {
  background: var(--sm-row-head);
  color: var(--sm-ink-strong);
}

.sm-side__chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.sm-side__acc.is-open > .sm-side__item--head .sm-side__chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.sm-side__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

/* `display: flex` above outranks the UA sheet's `[hidden] { display: none }`,
   so a collapsed group would render fully open until its first click. The
   closed groups mark themselves with the attribute, so it has to win here. */
.sm-side__panel[hidden] {
  display: none;
}

.sm-side__item--sub {
  background: var(--sm-row-sub);
}

.sm-side__item--sub:hover {
  background: var(--sm-row);
}

/* Legal links carry no icon, so the label takes the icon's place rather than
   sitting in a ragged second column. */
.sm-side__item--plain {
  font-size: 15px;
}

/* ---- 2x2 exclusives ---------------------------------------------------- */

.sm-side__excl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.sm-side__tile {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--sm-row);
  color: var(--sm-ink-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.15s ease;
}

.sm-side__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(192, 119, 51, 0.55));
  pointer-events: none;
}

.sm-side__tile:hover {
  background: var(--sm-row-head);
  text-decoration: none;
}

.sm-side__tile-label {
  position: relative;
  z-index: 1;
  max-width: 68px;
}

/* The real site lets the promo art overhang the right edge of the tile. */
.sm-side__tile-art {
  position: absolute;
  right: 4px;
  bottom: 2px;
  z-index: 1;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  opacity: 0.55;
}

/* ---- download app ------------------------------------------------------ */

.sm-side__item--app {
  position: relative;
  height: 54px;
  padding-right: 56px;
  overflow: hidden;
}

.sm-side__app-art {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  object-fit: contain;
}