/* ─── Catppuccin Macchiato palette ─────────────────────────────────────────── */
:root {
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo:  #f0c6c6;
  --ctp-pink:      #f5bde6;
  --ctp-mauve:     #c6a0f6;
  --ctp-red:       #ed8796;
  --ctp-maroon:    #ee99a0;
  --ctp-peach:     #f5a97f;
  --ctp-yellow:    #eed49f;
  --ctp-green:     #a6da95;
  --ctp-teal:      #8bd5ca;
  --ctp-sky:       #91d7e3;
  --ctp-sapphire:  #7dc4e4;
  --ctp-blue:      #8aadf4;
  --ctp-lavender:  #b7bdf8;
  --ctp-text:      #cad3f5;
  --ctp-subtext1:  #b8c0e0;
  --ctp-subtext0:  #a5adcb;
  --ctp-overlay2:  #939ab7;
  --ctp-overlay1:  #8087a2;
  --ctp-overlay0:  #6e738d;
  --ctp-surface2:  #5b6078;
  --ctp-surface1:  #494d64;
  --ctp-surface0:  #363a4f;
  --ctp-base:      #24273a;
  --ctp-mantle:    #1e2030;
  --ctp-crust:     #181926;
}

/* ─── Bootstrap dark theme → Catppuccin ────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:           var(--ctp-base);
  --bs-body-color:        var(--ctp-text);
  --bs-secondary-bg:      var(--ctp-mantle);
  --bs-tertiary-bg:       var(--ctp-surface0);
  --bs-border-color:      var(--ctp-surface1);
  --bs-heading-color:     var(--ctp-lavender);
  --bs-link-color:        var(--ctp-blue);
  --bs-link-hover-color:  var(--ctp-sapphire);
  --bs-code-color:        var(--ctp-pink);

  /* Cards */
  --bs-card-bg:                var(--ctp-mantle);
  --bs-card-border-color:      var(--ctp-surface0);
  --bs-card-cap-bg:            var(--ctp-surface0);

  /* Dropdowns */
  --bs-dropdown-bg:                 var(--ctp-surface0);
  --bs-dropdown-border-color:       var(--ctp-surface1);
  --bs-dropdown-link-color:         var(--ctp-text);
  --bs-dropdown-link-hover-color:   var(--ctp-lavender);
  --bs-dropdown-link-hover-bg:      var(--ctp-surface1);
  --bs-dropdown-link-active-color:  var(--ctp-crust);
  --bs-dropdown-link-active-bg:     var(--ctp-mauve);
  --bs-dropdown-divider-bg:         var(--ctp-surface2);
  --bs-dropdown-header-color:       var(--ctp-overlay1);

  /* Navbar */
  --bs-navbar-color:              var(--ctp-subtext1);
  --bs-navbar-hover-color:        var(--ctp-lavender);
  --bs-navbar-active-color:       var(--ctp-mauve);
  --bs-navbar-brand-color:        var(--ctp-mauve);
  --bs-navbar-brand-hover-color:  var(--ctp-lavender);
  --bs-navbar-toggler-border-color: var(--ctp-surface2);

  /* Nav */
  --bs-nav-link-color:        var(--ctp-subtext1);
  --bs-nav-link-hover-color:  var(--ctp-lavender);

  /* Forms */
  --bs-form-control-bg:           var(--ctp-surface0);
  --bs-form-control-border-color: var(--ctp-overlay0);
  --bs-form-control-color:        var(--ctp-text);
  --bs-input-bg:                  var(--ctp-surface0);
  --bs-input-border-color:        var(--ctp-overlay0);
  --bs-input-color:               var(--ctp-text);
  --bs-input-focus-border-color:  var(--ctp-mauve);
  --bs-input-placeholder-color:   var(--ctp-overlay1);

  /* Tables */
  --bs-table-color:         var(--ctp-text);
  --bs-table-border-color:  var(--ctp-surface1);
  --bs-table-striped-bg:    var(--ctp-mantle);
  --bs-table-hover-bg:      var(--ctp-surface0);

  /* List groups */
  --bs-list-group-bg:           var(--ctp-mantle);
  --bs-list-group-border-color: var(--ctp-surface1);
  --bs-list-group-color:        var(--ctp-text);
  --bs-list-group-action-color: var(--ctp-subtext1);
  --bs-list-group-action-hover-color: var(--ctp-lavender);
  --bs-list-group-action-hover-bg: var(--ctp-surface0);
  --bs-list-group-active-bg:    var(--ctp-mauve);
  --bs-list-group-active-color: var(--ctp-crust);

  /* Modals */
  --bs-modal-bg:            var(--ctp-mantle);
  --bs-modal-border-color:  var(--ctp-surface1);
  --bs-modal-header-border-color: var(--ctp-surface1);
  --bs-modal-footer-border-color: var(--ctp-surface1);

  /* Toasts */
  --bs-toast-bg:            var(--ctp-mantle);
  --bs-toast-border-color:  var(--ctp-surface1);
  --bs-toast-header-bg:     var(--ctp-surface0);

  /* Popovers */
  --bs-popover-bg:          var(--ctp-mantle);
  --bs-popover-border-color: var(--ctp-surface1);
  --bs-popover-body-color:  var(--ctp-text);
  --bs-popover-header-bg:   var(--ctp-surface0);

  /* Tooltips */
  --bs-tooltip-bg:          var(--ctp-surface2);
  --bs-tooltip-color:       var(--ctp-text);

  /* Pagination */
  --bs-pagination-bg:               var(--ctp-mantle);
  --bs-pagination-border-color:     var(--ctp-surface1);
  --bs-pagination-color:            var(--ctp-subtext1);
  --bs-pagination-hover-bg:         var(--ctp-surface0);
  --bs-pagination-hover-color:      var(--ctp-lavender);
  --bs-pagination-hover-border-color: var(--ctp-surface2);
  --bs-pagination-active-bg:        var(--ctp-mauve);
  --bs-pagination-active-color:     var(--ctp-crust);
  --bs-pagination-active-border-color: var(--ctp-mauve);
  --bs-pagination-disabled-bg:      var(--ctp-mantle);
  --bs-pagination-disabled-color:   var(--ctp-overlay0);

  /* Progress */
  --bs-progress-bg:         var(--ctp-surface0);
  --bs-progress-bar-bg:     var(--ctp-mauve);

  /* Accordions */
  --bs-accordion-bg:              var(--ctp-mantle);
  --bs-accordion-border-color:    var(--ctp-surface1);
  --bs-accordion-btn-color:       var(--ctp-text);
  --bs-accordion-btn-bg:          var(--ctp-mantle);
  --bs-accordion-active-bg:       var(--ctp-surface0);
  --bs-accordion-active-color:    var(--ctp-mauve);
  --bs-accordion-body-padding-y:  1rem;

  /* Breadcrumb */
  --bs-breadcrumb-divider-color:  var(--ctp-overlay0);
  --bs-breadcrumb-item-active-color: var(--ctp-subtext0);

  /* Alerts - spread palette */
  --bs-alert-color: inherit;
}

/* ─── Bootstrap component colour overrides ──────────────────────────────────── */

/* Buttons: primary = mauve */
.btn-primary {
  --bs-btn-bg:              var(--ctp-mauve);
  --bs-btn-border-color:    var(--ctp-mauve);
  --bs-btn-color:           var(--ctp-crust);
  --bs-btn-hover-bg:        var(--ctp-lavender);
  --bs-btn-hover-border-color: var(--ctp-lavender);
  --bs-btn-hover-color:     var(--ctp-crust);
  --bs-btn-active-bg:       var(--ctp-lavender);
  --bs-btn-active-border-color: var(--ctp-lavender);
  --bs-btn-active-color:    var(--ctp-crust);
  --bs-btn-focus-shadow-rgb: 198, 160, 246;
}
.btn-outline-primary {
  --bs-btn-color:           var(--ctp-mauve);
  --bs-btn-border-color:    var(--ctp-mauve);
  --bs-btn-hover-bg:        var(--ctp-mauve);
  --bs-btn-hover-border-color: var(--ctp-mauve);
  --bs-btn-hover-color:     var(--ctp-crust);
  --bs-btn-active-bg:       var(--ctp-mauve);
  --bs-btn-active-color:    var(--ctp-crust);
}

/* secondary = blue */
.btn-secondary {
  --bs-btn-bg:           var(--ctp-blue);
  --bs-btn-border-color: var(--ctp-blue);
  --bs-btn-color:        var(--ctp-crust);
  --bs-btn-hover-bg:     var(--ctp-sapphire);
  --bs-btn-hover-color:  var(--ctp-crust);
}
.btn-outline-secondary {
  --bs-btn-color:        var(--ctp-blue);
  --bs-btn-border-color: var(--ctp-blue);
  --bs-btn-hover-bg:     var(--ctp-blue);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* success = green */
.btn-success {
  --bs-btn-bg:           var(--ctp-green);
  --bs-btn-border-color: var(--ctp-green);
  --bs-btn-color:        var(--ctp-crust);
  --bs-btn-hover-bg:     var(--ctp-teal);
  --bs-btn-hover-color:  var(--ctp-crust);
}
.btn-outline-success {
  --bs-btn-color:        var(--ctp-green);
  --bs-btn-border-color: var(--ctp-green);
  --bs-btn-hover-bg:     var(--ctp-green);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* danger = red */
.btn-danger {
  --bs-btn-bg:           var(--ctp-red);
  --bs-btn-border-color: var(--ctp-red);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-danger {
  --bs-btn-color:        var(--ctp-red);
  --bs-btn-border-color: var(--ctp-red);
  --bs-btn-hover-bg:     var(--ctp-red);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* warning = peach (more visible on dark than yellow) */
.btn-warning {
  --bs-btn-bg:           var(--ctp-peach);
  --bs-btn-border-color: var(--ctp-peach);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-warning {
  --bs-btn-color:        var(--ctp-peach);
  --bs-btn-border-color: var(--ctp-peach);
  --bs-btn-hover-bg:     var(--ctp-peach);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* info = sapphire */
.btn-info {
  --bs-btn-bg:           var(--ctp-sapphire);
  --bs-btn-border-color: var(--ctp-sapphire);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-info {
  --bs-btn-color:        var(--ctp-sapphire);
  --bs-btn-border-color: var(--ctp-sapphire);
  --bs-btn-hover-bg:     var(--ctp-sapphire);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* Alert colours */
.alert-primary   { --bs-alert-bg: color-mix(in srgb, var(--ctp-mauve)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-mauve);    --bs-alert-color: var(--ctp-mauve); }
.alert-success   { --bs-alert-bg: color-mix(in srgb, var(--ctp-green)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-green);    --bs-alert-color: var(--ctp-green); }
.alert-danger    { --bs-alert-bg: color-mix(in srgb, var(--ctp-red)      15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-red);      --bs-alert-color: var(--ctp-red); }
.alert-warning   { --bs-alert-bg: color-mix(in srgb, var(--ctp-peach)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-peach);    --bs-alert-color: var(--ctp-peach); }
.alert-info      { --bs-alert-bg: color-mix(in srgb, var(--ctp-sapphire) 15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-sapphire); --bs-alert-color: var(--ctp-sapphire); }
.alert-secondary { --bs-alert-bg: color-mix(in srgb, var(--ctp-blue)     15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-blue);     --bs-alert-color: var(--ctp-blue); }

/* Twitch sign-in button (brand purple — used in the navbar, so it lives here) */
.btn-twitch {
  --bs-btn-bg: #9146ff;
  --bs-btn-border-color: #9146ff;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #772ce8;
  --bs-btn-hover-border-color: #772ce8;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #5c16c5;
  --bs-btn-active-border-color: #5c16c5;
  --bs-btn-active-color: #ffffff;
  font-weight: 700;
}

/* Kick sign-in button (brand green) — DORMANT since the 2026-08-22 Twitch move.
   Kept so re-pointing the sign-in links at core:kick_login restyles correctly. */
.btn-kick {
  --bs-btn-bg: #53fc18;
  --bs-btn-border-color: #53fc18;
  --bs-btn-color: #0b0e0f;
  --bs-btn-hover-bg: #45e012;
  --bs-btn-hover-border-color: #45e012;
  --bs-btn-hover-color: #0b0e0f;
  --bs-btn-active-bg: #3fce10;
  --bs-btn-active-border-color: #3fce10;
  --bs-btn-active-color: #0b0e0f;
  font-weight: 700;
}

/* Badges */
.badge.bg-primary   { background-color: var(--ctp-mauve)    !important; color: var(--ctp-crust); }
.badge.bg-secondary { background-color: var(--ctp-blue)     !important; color: var(--ctp-crust); }
.badge.bg-success   { background-color: var(--ctp-green)    !important; color: var(--ctp-crust); }
.badge.bg-danger    { background-color: var(--ctp-red)      !important; color: var(--ctp-crust); }
.badge.bg-warning   { background-color: var(--ctp-peach)    !important; color: var(--ctp-crust); }
.badge.bg-info      { background-color: var(--ctp-sapphire) !important; color: var(--ctp-crust); }

/* ─── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* The canvas (what shows when a phone rubber-bands past the top or bottom) takes
   its colour from <html>. Left transparent it inherits body's --ctp-base, which
   is LIGHTER than the mantle navbar and footer, so overscrolling painted a grey
   band under the footer. Mantle matches both bars at either end of the page. */
html {
  background-color: var(--ctp-mantle);
  /* Tells the browser this page is dark, so Safari and Firefox paint their own
     surfaces — overscroll backdrop, scrollbars, native form controls — to match
     instead of defaulting to light. Without it the rubber-band area at the
     bottom of the page still came up pale on iOS. */
  color-scheme: dark;
}

body {
  font-family: 'Roboto', system-ui, Arial, sans-serif;
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ─── Navbar ────────────────────────────────────────────────────────────────── */
.site-navbar {
  background-color: var(--ctp-mantle);
  border-bottom: 1px solid var(--ctp-surface0);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ctp-mauve) !important;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.site-brand:hover { color: var(--ctp-lavender) !important; }

.site-navbar .nav-link {
  color: var(--ctp-subtext1);
  font-weight: 500;
  transition: color 0.15s;
}

/* Needs .navbar-nav to outrank Bootstrap's .navbar-expand-lg .navbar-nav
   .nav-link, which otherwise forces its own padding-x and silently killed the
   value below. */
@media (min-width: 992px) {
  .site-navbar .navbar-nav .nav-link { padding: 0.5rem 0.9rem; }
}

/* Collapsed navbar: items stack, so horizontal padding pushed them 14px past
   the brand and the Sign In button, which sit flush at the container edge. */
@media (max-width: 991.98px) {
  .site-navbar .navbar-nav .nav-link { padding-left: 0; padding-right: 0; }
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus { color: var(--ctp-lavender); }
.site-navbar .nav-link.show  { color: var(--ctp-mauve); }

/* Dropdown */
.dropdown-menu {
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  padding: 0.4rem;
  min-width: 190px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ctp-text);
  border-radius: 7px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.dropdown-item:hover,
.dropdown-item:focus   { background-color: var(--ctp-surface1); color: var(--ctp-lavender); }
.dropdown-item:active,
.dropdown-item.active  { background-color: var(--ctp-mauve);    color: var(--ctp-crust); }

.dropdown-item .material-icons-outlined {
  font-size: 1.1rem;
  color: var(--ctp-overlay2);
  transition: color 0.15s;
}
/* The icon has to track the label through every state — pressing an item used to
   turn the text crust while the icon stayed grey. */
.dropdown-item:hover .material-icons-outlined,
.dropdown-item:focus .material-icons-outlined  { color: var(--ctp-lavender); }
.dropdown-item:active .material-icons-outlined,
.dropdown-item.active .material-icons-outlined { color: var(--ctp-crust); }

/* Bootstrap toggles dropdowns with display, so there is nothing to transition.
   Animate on open instead — and use `translate`, NOT `transform`, because
   Popper writes an inline transform to position the menu and would fight it. */
@keyframes dropdown-open {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}
.dropdown-menu.show { animation: dropdown-open 0.16s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.show { animation: none; }
}

/* ─── Main ──────────────────────────────────────────────────────────────────── */
.site-main { flex: 1; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--ctp-mantle);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.footer-divider { border-color: var(--ctp-surface0); margin-bottom: 1rem; }
.footer-copy {
  font-size: 0.82rem;
  color: var(--ctp-overlay1);
  text-align: center;
  padding-bottom: 1rem;
  margin: 0;
}

/* ─── Material Icons sizing ─────────────────────────────────────────────────── */
.material-icons-outlined {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: text-bottom;
  user-select: none;
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', system-ui, Arial, sans-serif; }
h1 { color: var(--ctp-lavender); }
h2 { color: var(--ctp-blue); }
h3 { color: var(--ctp-sapphire); }
h4 { color: var(--ctp-teal); }

a { color: var(--ctp-blue); }
a:hover { color: var(--ctp-sapphire); }

code { color: var(--ctp-pink); background-color: var(--ctp-surface0); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.9em; }
pre  { background-color: var(--ctp-surface0); color: var(--ctp-pink); border-radius: 8px; padding: 1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--ctp-surface0); }

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ctp-mauve);
  margin-bottom: 0.6rem;
}

.hero-title { color: var(--ctp-lavender); line-height: 1.1; }

.hero-subtitle {
  color: var(--ctp-subtext1);
  margin-bottom: 2rem;
}

.hero .btn-primary .material-icons-outlined {
  font-size: 1.25rem;
  vertical-align: text-bottom;
  margin-right: 0.25rem;
}

/* ─── On right now (live channels) ──────────────────────────────────────────── */
/* One row per live channel, pushed by the bot into ChannelStatus. Each row sets
   --ch-color from its channel class below; everything else reads that token so
   the accent (name, avatar ring, live dot) stays one colour per channel. */
.now-streaming-list {
  border: 1px solid var(--ctp-surface0);
  border-radius: 12px;
  background-color: var(--ctp-mantle);
  overflow: hidden;
}

.now-streaming-item + .now-streaming-item { border-top: 1px solid var(--ctp-surface0); }

.now-streaming-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}
.now-streaming-link:hover { background-color: var(--ctp-surface0); }

.now-streaming-pfp {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--ctp-mantle), 0 0 0 4px var(--ch-color);
}

.now-streaming-pfp-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--ch-color) 18%, transparent);
  color: var(--ch-color);
  font-weight: 600;
}

.now-streaming-text {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* lets a long episode title ellipsize instead of stretching the row */
}

.now-streaming-name {
  color: var(--ch-color);
  font-weight: 600;
  line-height: 1.3;
}

.now-streaming-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  border-radius: 50%;
  background-color: var(--ctp-red);
  vertical-align: middle;
  animation: now-streaming-pulse 2s ease-in-out infinite;
}

@keyframes now-streaming-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .now-streaming-dot { animation: none; }
}

.now-streaming-title {
  color: var(--ctp-subtext0);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-streaming-idle { color: var(--ctp-overlay0); font-style: italic; }

/* Which platform the channel is live on. Deliberately muted rather than brand
   coloured — the channel accent is the only colour a row should be fighting. */
.now-streaming-platform {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background-color: var(--ctp-surface0);
  color: var(--ctp-overlay1);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.now-streaming-link:hover .now-streaming-platform {
  background-color: var(--ctp-surface1);
  color: var(--ctp-subtext0);
}

/* Per-channel accent — house teal, bb yellow, st blue, dlc red
   (ChannelStatus.COLORS is the source of truth for the mapping). */
.ch-color-teal   { --ch-color: var(--ctp-teal); }
.ch-color-yellow { --ch-color: var(--ctp-yellow); }
.ch-color-blue   { --ch-color: var(--ctp-blue); }
.ch-color-red    { --ch-color: var(--ctp-red); }
.ch-color-mauve  { --ch-color: var(--ctp-mauve); }

/* ─── Features section ──────────────────────────────────────────────────────── */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ctp-overlay1);
  margin-bottom: 1.25rem;
}

.feature-card {
  background-color: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface0);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  border-color: var(--ctp-surface2);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.feature-icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon-wrap .material-icons-outlined { font-size: 1.4rem; }

.commands-icon { background-color: color-mix(in srgb, var(--ctp-mauve) 15%, transparent); color: var(--ctp-mauve); }
.rewards-icon  { background-color: color-mix(in srgb, var(--ctp-green) 15%, transparent); color: var(--ctp-green); }
.songs-icon    { background-color: color-mix(in srgb, var(--ctp-peach) 15%, transparent); color: var(--ctp-peach); }
.rpg-icon      { background-color: color-mix(in srgb, var(--ctp-red)  15%, transparent); color: var(--ctp-red); }

.commands-title { color: var(--ctp-mauve) !important; }
.rewards-title  { color: var(--ctp-green) !important; }
.songs-title    { color: var(--ctp-peach) !important; }
.rpg-card-title { color: var(--ctp-red)   !important; }

/* ─── Page headers (inner pages) ────────────────────────────────────────────── */
.page-header { border-bottom: 1px solid var(--ctp-surface0); }

.page-icon { font-size: 2rem !important; }
.commands-icon-sm { color: var(--ctp-mauve); }
.rewards-icon-sm  { color: var(--ctp-green); }
.songs-icon-sm    { color: var(--ctp-peach); }
.rpg-icon-sm      { color: var(--ctp-red); }
.rpg-page-title   { color: var(--ctp-red) !important; }

/* ─── Rewards page ──────────────────────────────────────────────────────────── */
.rewards-accordion .accordion-button {
  font-size: 1.05rem;
  font-weight: 600;
  gap: 0.5rem;
}

.reward-section-icon { font-size: 1.2rem; line-height: 1; }

.reward-count-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.25em 0.65em;
}
.audio-badge { background-color: var(--ctp-green);  color: var(--ctp-crust); }
.video-badge { background-color: var(--ctp-sky);    color: var(--ctp-crust); }

.reward-card {
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reward-card:hover {
  border-color: var(--ctp-surface2);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.reward-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.audio-reward-name { color: var(--ctp-green); }
.video-reward-name { color: var(--ctp-sky); }

.reward-description {
  font-size: 0.82rem;
  color: var(--ctp-subtext0);
  margin-bottom: 0;
}

.reward-player {
  border-radius: 6px;
  display: block;
  max-width: 100%;
}
/* A video reports its intrinsic size (560px for a 480p clip), which overflowed
   the card and forced the whole page to scroll sideways on a phone. */
video.reward-player {
  width: 100%;
  height: auto;
  /* Until a poster or metadata loads there is no intrinsic ratio to lay out
     against, and iOS Safari renders a tall empty slab. Reserve a 16:9 box and
     letterbox anything that isn't, so the list keeps its shape and nothing
     jumps when the poster arrives. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: var(--ctp-crust);
}
video.reward-player { max-width: 560px; display: block; margin: 0 auto; }

.reward-no-file {
  font-size: 0.8rem;
  color: var(--ctp-overlay1);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0;
}
.reward-no-file .material-icons-outlined { font-size: 1rem; }

/* ─── Commands page ─────────────────────────────────────────────────────────── */
.cmd-table {
  background-color: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  overflow: hidden;
}

.cmd-header,
.cmd-row {
  display: grid;
  grid-template-columns: 130px 160px 1fr 44px;
  align-items: center;
  gap: 0;
}

.cmd-header {
  background-color: var(--ctp-surface0);
  padding: 0.55rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ctp-overlay1);
  border-bottom: 1px solid var(--ctp-surface1);
}

.cmd-header > div,
.cmd-row > div { padding: 0 0.5rem; }

.cmd-row {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--ctp-surface0);
}
.cmd-row:last-child { border-bottom: none; }
.cmd-row:hover { background-color: var(--ctp-surface0); }

.cmd-primary {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ctp-mauve);
  background-color: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-base));
  border-radius: 5px;
  padding: 0.15em 0.5em;
  white-space: nowrap;
}

.cmd-col-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cmd-alias {
  font-size: 0.78rem;
  color: var(--ctp-overlay2);
  background-color: var(--ctp-surface0);
  border-radius: 4px;
  padding: 0.1em 0.45em;
  white-space: nowrap;
}

.cmd-col-desc {
  font-size: 0.88rem;
  color: var(--ctp-subtext0);
  line-height: 1.5;
}

.cmd-col-perm {
  text-align: center;
  font-size: 1.1rem;
  cursor: default;
}

/* Phones: the four fixed grid columns need 334px before the description gets
   any room at all, so at 390px the description was squeezed to a ~115px sliver
   and the permission column was pushed clean outside the table (clipped away by
   .cmd-table's overflow:hidden). Stack each command into a card instead. */
@media (max-width: 767.98px) {
  .cmd-header { display: none; }

  .cmd-row {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.4rem 0.6rem;
    padding: 0.85rem 0.9rem;
  }
  .cmd-row > div { padding: 0; }

  .cmd-col-name    { grid-column: 1; grid-row: 1; }
  .cmd-col-perm    { grid-column: 2; grid-row: 1; text-align: right; }
  .cmd-col-aliases { grid-column: 1 / -1; }
  .cmd-col-desc    { grid-column: 1 / -1; }

  /* No aliases: drop the row rather than leaving its gap behind. */
  .cmd-col-aliases:not(:has(code)) { display: none; }
}

/* ─── Permission legend ─────────────────────────────────────────────────────── */
.cmd-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.82rem;
  color: var(--ctp-subtext0);
}

.cmd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 20px;
  padding: 0.2em 0.7em;
  white-space: nowrap;
}

.cmd-legend-icon { line-height: 1; }

.cmd-legend-sep {
  color: var(--ctp-surface2);
  font-size: 1rem;
  user-select: none;
}