/* Play Page Styles */
@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani-font-family/Rajdhani-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani-font-family/Rajdhani-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani-font-family/Rajdhani-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani-font-family/Rajdhani-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #0c0d14;
  --fg-0: #e0e0e0;
  --accent: #a86cf0;
  --accent-dk: #7b3fc9;
  --glass: rgba(12, 13, 20, 0.8);
  --glass-strong: rgba(12, 13, 20, 0.95);
  --card-border: rgba(168, 108, 240, 0.4);
  --radius-md: 12px;
  --gap: 16px;
  --header-height: 64px;
  --header-height-desktop: 48px;
  --control-bar-height-desktop: 40px;
  --nav-height: 60px;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --dynamic-vh: 1vh;
  --controls-reserve: 120px; /* reserved bottom space for controls + panel on mobile */
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: "Rajdhani", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  background-color: var(--bg-0);
  color: var(--fg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    system-ui, sans-serif;
  background: linear-gradient(135deg, var(--bg-0), var(--bg-0));
  color: var(--fg-0);
  line-height: 1.6;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  height: var(--header-height);
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(123, 63, 201, 0.18);
  position: sticky;
  top: 0;
  z-index: 1100; /* ensure header stays above in-frame content on mobile */
  pointer-events: auto;
}

.back-button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  /* Keep a constant size so icon swaps don't change layout */
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-top: 0;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1110; /* keep above header children and overlays */
  position: relative; /* allow absolute-positioned inner icons */
}

.back-button:hover {
  background-color: rgba(168, 108, 240, 0.1);
}

/* Apply the same gradient fill to the back-arrow icon */
.back-button i,
.back-button .ri-arrow-left-line {
  /* Reserve an explicit icon box so swapping icons does not affect layout */
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: linear-gradient(135deg, #7302cf, #7e0496);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  position: absolute; /* icons are stacked and centered inside the button */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Ensure default and active icons occupy the same space and are layered */
.back-button .icon-default,
.back-button .icon-active {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  display: inline-block;
}

.back-button:hover i,
.back-button:hover .ri-arrow-left-line {
  filter: brightness(1.05);
}

/* Logo: inline left-aligned (image + text) */
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logo-img,
.logo .logo-icon,
.logo img {
  height: clamp(20px, 3.2vw, 32px);
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.logo-text,
.logo .logo-text {
  margin-left: 8px;
  font-weight: 700;
  background: linear-gradient(135deg, #7302cf, #7e0496);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  font-size: clamp(16px, 2.6vw, 20px);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Mobile: ensure logo text matches the logo image size for consistent branding */
@media (max-width: 768px) {
  .logo {
    /* single source of truth for logo dimension on small screens */
    --logo-h: clamp(20px, 6.5vw, 36px);
  }

  .logo-img,
  .logo .logo-icon,
  .logo img {
    height: var(--logo-h) !important;
  }

  .logo-text,
  .logo .logo-text {
    /* Match the text size to the image height for visual parity.
       Scale the text down slightly on mobile so it doesn't overpower the icon. */
    font-size: clamp(10px, calc(var(--logo-h) * 0.6), 18px) !important;
    line-height: 1 !important;
    margin-left: 8px;
  }
}

.page-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  min-width: 0;
}

.game-title {
  flex: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--fg-0);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.play-frame-wrap {
  flex: 1;
  position: relative;
  background: var(--bg-0);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--gap);
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#game-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* Game loader overlay: elegant centered glass panel with spinner */
.game-loader {
  position: absolute;
  inset: 0; /* cover the entire play-frame-wrap */
  display: flex; /* laid out but hidden via opacity */
  align-items: center;
  justify-content: center;
  pointer-events: none; /* allow clicks to pass through when hidden */
  z-index: 5000; /* above iframe but below play-overlay (if present) */
  opacity: 0;
  transition: opacity 200ms var(--ease);
  border-radius: inherit; /* follow the play frame rounding */
}
.game-loader .game-loader-bg {
  position: absolute;
  inset: 0;
  /* Opaque solid background — no transparency or blur */
  background: var(--bg-0);
  border-radius: inherit;
}
.game-loader .game-loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-radius: 14px;
  /* Use a fully opaque inner panel to avoid glassy look */
  background: var(--bg-0);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.game-loader .game-loader-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.game-loader .game-loader-label {
  color: var(--fg-0);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Visible state: use `.show` class to fade loader in and enable pointer events */
.game-loader.show {
  opacity: 1;
  pointer-events: auto;
}

/* Body-fixed variant: used as a robust fallback when play-frame stacking
   contexts prevent the in-frame loader from appearing. It is positioned
   over the iframe using JS and kept above everything with a very high z-index. */
.game-loader.body-fixed {
  position: fixed;
  inset: auto; /* positioned via inline styles set by JS */
  z-index: 2147483647; /* ensure it's above any stacking context */
  /* Keep the body-fixed fallback inert until explicitly shown. The
     JS toggles the `.show` class — only then should it accept pointer events
     and be interactable. This prevents the invisible fallback from
     blocking controls when not visible. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}

.game-loader.body-fixed.show {
  opacity: 1;
  pointer-events: auto;
}

.rotation-prompt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
  text-align: center;
}

.rotation-prompt.show {
  opacity: 1;
  visibility: visible;
}

.rotation-icon img {
  width: 80px;
  height: 80px;
  animation: rotate90 2s linear infinite;
}

@keyframes rotate90 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotation-prompt h3 {
  color: var(--fg-0);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.rotation-prompt p {
  color: var(--fg-0);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 16px 0;
  max-width: 300px;
}

.continue-button {
  background: var(--accent);
  color: #0c0d14;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.continue-button:hover {
  background: var(--accent-dk);
}

.control-bar {
  flex-shrink: 0;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--glass), rgba(168, 108, 240, 0.1));
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(168, 108, 240, 0.1),
    0 0 20px rgba(168, 108, 240, 0.05);
  margin: var(--gap);
  margin-top: 0;
  border: 1px solid rgba(168, 108, 240, 0.2);
  animation: subtleGlow 3s ease-in-out infinite alternate;
}

.control-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.control-button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-button:hover {
  background-color: rgba(168, 108, 240, 0.1);
}

.control-button.active {
  color: var(--accent);
}

.control-button.active:hover {
  background-color: rgba(168, 108, 240, 0.2);
}

.button-text {
  font-family: "Rajdhani", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 4px;
  color: var(--fg-0);
}

.count {
  margin-left: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-0);
}

/* Mobile + Tablet responsive design (up to 1024px) */
@media (max-width: 1024px) {
  /* Mobile: Full height layout with fixed footer */
  body {
    height: calc(var(--dynamic-vh) * 100);
    overflow: auto;
  }

  .play-frame-wrap {
    flex: 1;
    position: relative;
    margin: 0;
    border-radius: var(--radius-md);
    border: none; /* remove border on mobile/tablet for cleaner fullscreen look */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Reserve space at the bottom equal to controls + suggestions panel
       so the iframe content is never obscured. JS keeps `--controls-reserve`
       in sync with actual element heights (resize/toggle/orientation). */
    /* Use JS-updated `--controls-reserve` so the play area is pushed up
       when the control bar + suggestions panel are visible on small
       devices. Also include the safe-area inset. JS updates the variable
       via `measureControlsReserve()` so expand/collapse will animate
       the reserved space correctly. */
    padding-bottom: calc(
      var(--controls-reserve, 120px) + env(safe-area-inset-bottom)
    );
    transition: padding-bottom 320ms var(--ease),
      margin-bottom 320ms var(--ease);
    /* mobile-only height is applied in a dedicated narrower breakpoint */
  }

  .control-bar {
    height: var(--header-height);
    margin: 0;
    border-radius: 0;
  }

  /* Mobile suggestion panel (fixed bottom) */
  .suggestions-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* collapsed: constrain height using max-height for animatability */
    max-height: 44px; /* collapsed - reduced for a slimmer footer */
    /* Dynamic thumbnail height: default for collapsed state, can be
       overridden by `.suggestions-panel.expanded` or via JS */
    --suggestion-thumb-h: 62px;
    z-index: 220; /* ensure suggestions sit above the control bar */
    background: linear-gradient(
      180deg,
      rgba(12, 13, 20, 0.96),
      rgba(12, 13, 20, 0.98)
    );
    border-top: 1px solid var(--card-border);
    padding: 6px 10px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    /* transition max-height for smooth expand/collapse; include padding & box-shadow */
    transition: max-height 380ms var(--ease), padding 320ms var(--ease),
      box-shadow 320ms var(--ease);
    display: block;
    /* start visually hidden on mobile; revealed after a short delay to
       avoid initial layout jank and reduce perceived overlap with controls */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 360ms var(--ease), transform 360ms var(--ease),
      max-height 380ms var(--ease);
  }

  .suggestions-panel.expanded {
    /* Expand to fit multiple rows of thumbnails on mobile/tablet so more
       (up to 12) items are visible without forcing horizontal scrolling.
       Use a generous max-height relative to the viewport to avoid clipping
       the last row on shorter devices. */
    max-height: calc(100vh - 80px);
    /* When expanded, increase the thumbnail height. This remains a
       CSS variable so JS or other media queries can change it without
       editing hard-coded values. */
    --suggestion-thumb-h: 144px;
    /* slight lift so panel appears above the controls when expanded */
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.55);
    z-index: 240; /* elevated when expanded */
  }

  /* class applied by JS when it's time to show the suggestions panel */
  .suggestions-panel.show-late {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .suggestions-toggle-wrap {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 70;
  }

  .suggestions-toggle {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--fg-0);
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
  }

  .suggestions-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 6px 8px 6px 8px;
  }
  .suggestions-title h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .suggestions-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .suggestions-toggle {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 180ms var(--ease), background 180ms var(--ease);
    -webkit-tap-highlight-color: transparent;
    /* Make the toggle icon color match the suggestions title color by
       default so arrows inherit the page accent color. */
    --toggle-icon-color: var(--accent);
  }
  .suggestions-toggle:active {
    transform: translateY(1px) scale(0.995);
  }
  .suggestions-toggle:focus-visible {
    outline: 3px solid rgba(168, 108, 240, 0.18);
    outline-offset: 2px;
  }
  .suggestions-toggle i {
    transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  }
  /* support inline SVG icons for the toggle (inherited `color`) */
  .suggestions-toggle svg,
  .suggestions-toggle .suggestion-toggle-icon {
    transition: transform 220ms var(--ease), opacity 220ms var(--ease);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    color: var(--toggle-icon-color, var(--fg-0));
    fill: currentColor; /* ensure paths inherit color when SVG is inline */
  }
  .suggestions-toggle[aria-expanded="true"] i.icon-collapsed,
  .suggestions-toggle[aria-expanded="true"] svg.icon-collapsed {
    opacity: 0;
    transform: rotate(-90deg) scale(0.9);
  }
  .suggestions-toggle[aria-expanded="true"] i.icon-expanded,
  .suggestions-toggle[aria-expanded="true"] svg.icon-expanded {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  /* Icon swap for suggestions toggle: show collapsed icon by default,
     show expanded icon when toggle has aria-expanded="true" or when focused. */
  .suggestions-toggle .icon-expanded {
    display: none;
  }
  /* Ensure explicit initial state so the correct icon shows reliably
     across browsers/devices. When aria-expanded is "false" show the
     collapsed (up) icon and hide the expanded (down) icon. When it is
     "true" the other rules above will take over. This prevents a race
     where the expanded icon may appear briefly or by default. */
  .suggestions-toggle[aria-expanded="false"] .icon-collapsed,
  .suggestions-toggle[aria-expanded="false"] svg.icon-collapsed {
    display: inline-block !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
  }
  .suggestions-toggle[aria-expanded="false"] .icon-expanded,
  .suggestions-toggle[aria-expanded="false"] svg.icon-expanded {
    display: none !important;
    opacity: 0 !important;
    transform: rotate(90deg) scale(0.9) !important;
  }
  .suggestions-toggle[aria-expanded="true"] .icon-expanded,
  .suggestions-toggle:focus .icon-expanded,
  .suggestions-toggle:focus-visible .icon-expanded {
    display: inline-block;
  }
  .suggestions-toggle[aria-expanded="true"] .icon-collapsed,
  .suggestions-toggle:focus .icon-collapsed,
  .suggestions-toggle:focus-visible .icon-collapsed {
    display: none;
  }

  /* Back-button icon swap: show outline by default, show solid/active on focus/active */
  .back-button .icon-active {
    display: none;
  }
  .back-button:focus .icon-active,
  .back-button:active .icon-active,
  .back-button:focus-visible .icon-active {
    display: inline-block;
  }
  .back-button:focus .icon-default,
  .back-button:active .icon-default,
  .back-button:focus-visible .icon-default {
    display: none;
  }

  /* JS-driven pressed state: ensures touch devices get the same visual
     feedback even when :active isn't applied persistently. Handled by
     adding/removing the `is-pressed` class via JS on pointerdown/up. */
  .back-button.is-pressed .icon-active {
    display: inline-block !important;
  }
  .back-button.is-pressed .icon-default {
    display: none !important;
  }

  .suggestions-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden; /* prevent vertical scrollbars */
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE/Edge hide scrollbar */
    scrollbar-width: none; /* Firefox hide scrollbar */
    padding: 12px 12px 8px 12px; /* give a touch-friendly top padding */
    align-items: flex-start; /* top-align items so thumbs line up */
    justify-content: center; /* center items when list is narrower than viewport */
    height: calc(100% - 36px);
    /* animate opacity and translate for the whole list */
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
    opacity: 0;
    transform: translateY(8px);
  }

  /* Hide native scrollbar in WebKit browsers while still allowing scroll */
  .suggestions-list::-webkit-scrollbar {
    height: 0; /* horizontal scrollbar height */
    width: 0; /* in case of vertical */
    display: none;
  }

  .suggestions-panel.expanded .suggestions-list {
    opacity: 1;
    transform: translateY(0);
  }

  /* Animate individual cards when the panel expands for polished entrance */
  .suggestions-panel .suggestion-card {
    /* initial compact state (collapsed or hidden list) */
    opacity: 0;
    transform: translateY(8px) scale(0.99);
    transition: transform 360ms var(--ease), opacity 360ms var(--ease),
      box-shadow 260ms var(--ease);
    will-change: transform, opacity;
  }

  .suggestions-panel.expanded .suggestion-card {
    /* visible entrance state */
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }

  /* small stagger to make the grid feel lively (covers first 8 items) */
  .suggestions-panel.expanded .suggestion-card:nth-child(1) {
    transition-delay: 40ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(2) {
    transition-delay: 80ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(3) {
    transition-delay: 120ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(4) {
    transition-delay: 160ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(5) {
    transition-delay: 200ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(6) {
    transition-delay: 240ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(7) {
    transition-delay: 280ms;
  }
  .suggestions-panel.expanded .suggestion-card:nth-child(8) {
    transition-delay: 320ms;
  }

  /* When expanded on mobile, show items in a compact grid so all 12
     suggestion cards can be seen without awkward vertical offsets. The
     grid uses fixed column size matching the mobile card width so rows
     align neatly. */
  .suggestions-panel.expanded .suggestions-list {
    display: grid;
    /* Use fixed card column widths (same as mobile) so thumbnails keep
       their portrait shape on tablets instead of stretching horizontally. */
    /* allow the grid to fill the panel width and distribute cards
        evenly; columns are at least 92px but will expand to share space */
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    justify-content: start;
    justify-items: center; /* center each item in its grid cell */
    align-items: start;
    align-content: start; /* anchor grid to the top to avoid vertical centering */
    grid-auto-rows: min-content; /* rows size to content (thumbnail) */
    column-gap: 12px;
    row-gap: 6px; /* slightly tighter vertical spacing for compact layout */
    padding: 12px 8px; /* reduce horizontal padding slightly to use panel space */
    height: auto;
    overflow-y: auto; /* allow internal scroll if device is very short */
    -webkit-overflow-scrolling: touch;
  }

  /* Make each suggestion card tightly wrap its thumbnail when grid is active.
     Remove extra margins/padding and ensure the card's height equals the
     thumbnail height so rows align perfectly. */
  .suggestions-panel.expanded .suggestion-card {
    display: block;
    width: 100%; /* fill the grid cell */
    padding: 0;
    margin: 0;
    line-height: 0; /* Remove whitespace gaps caused by inline elements */
    box-sizing: border-box;
    height: auto; /* let the thumb determine the card height */
    min-height: var(--suggestion-thumb-h);
  }

  .suggestions-panel.expanded .suggestion-card .suggestion-thumb {
    display: block;
    width: 100%; /* make thumbnail fill its card (grid cell) */
    /* Do not force a fixed height here — let the aspect-ratio (3/4)
       determine the thumbnail's height based on its width so thumbnails
       remain portrait on tablets. Cap the height with the CSS variable
       so very tall layouts don't overshoot. */
    aspect-ratio: 3 / 4;
    max-height: var(--suggestion-thumb-h);
    margin: 0;
    border-radius: 8px;
  }

  .suggestion-card {
    width: 92px;
    flex: 0 0 92px;
    margin: 0 4px;
  }

  /* Make mobile thumbnails visually match the desktop sidebar tiles.
     Use transparent card background so the thumbnail fully covers the card
     and no translucent layer bleeds through. Keep visual emphasis on the
     thumbnail itself (shadow + radius). */
  .suggestion-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    margin: 0 6px;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.12s var(--ease);
    border: none;
    overflow: visible;
    position: relative;
    min-height: 0; /* let the grid determine row heights responsively */
    width: 100%;
    max-width: none; /* allow the grid cell size to govern the card width */
  }

  /* keep the thumbnail pinned to the top of the card for consistent alignment */
  .suggestion-card .suggestion-thumb {
    align-self: center;
    margin: 0;
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 4;
    min-height: 96px;
    object-fit: cover;
  }

  /* Ensure suggestion thumbnails have a visible size and cover behavior
     on mobile/tablet viewports. Desktop styles already define a polished
     thumbnail, but mobile was missing these rules which caused the
     thumbnail element to collapse and only inline text/badges to show. */
  .suggestion-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 96px;
    max-height: 140px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(12, 13, 20, 0.6);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    border: 0;
  }

  /* Visible <img> fallback inside suggestion thumbnails */
  .suggestion-thumb img.suggestion-thumb-img,
  img.suggestion-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Hide the <img> when there is no thumbnail so the placeholder shows */
  .suggestion-thumb.no-thumb img.suggestion-thumb-img {
    display: none;
  }

  .play-frame-wrap {
    transition: margin-bottom 320ms var(--ease);
  }

  /* Ensure the control bar overlays the iframe on mobile/tablet so
     controls remain visible without requiring extra scrolling. This
     mirrors the desktop overlay behaviour but keeps touch-friendly
     spacing and z-index for reliability across devices. */
  .play-frame-wrap .control-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px; /* doubled bottom spacing for touch comfort */
    margin: 0;
    margin-top: 0; /* ensure no space above the control bar */
    /* keep control bar below suggestions panel so expanded suggestions
       can visually overlap when needed */
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    pointer-events: auto;
  }

  /* Auto-hide variant for gameplay: slide controls off-screen but keep
     them accessible via touch/click or keyboard focus. This reduces visual
     clutter while playing on small devices. JS will toggle the
     `.auto-hidden` class. */
  .play-frame-wrap .control-bar.auto-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 260ms var(--ease), opacity 220ms var(--ease);
  }
  .play-frame-wrap .control-bar {
    transition: transform 260ms var(--ease), opacity 220ms var(--ease);
  }

  /* Ensure keyboard focus reveals controls (accessibility): when any child
     gets focus, reset the hidden state so keyboard users can operate items. */
  .play-frame-wrap .control-bar:focus-within {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mobile Landscape: Hide header and control bar for full-screen game view */
@media (orientation: landscape) and (max-height: 500px) {
  header {
    display: none;
  }

  .control-bar {
    display: none;
  }
}

/* Tablet: show 4 suggestion cards per row when the panel is expanded */
@media (min-width: 601px) and (max-width: 1024px) {
  .suggestions-panel.expanded .suggestions-list {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    column-gap: 12px;
    row-gap: 8px;
  }
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  width: 90%;
  max-width: 500px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: modalFadeIn 0.3s ease-out;
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: var(--glass);
  border-radius: var(--radius-md);
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dk);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close {
  color: var(--fg-0);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close:hover,
.close:focus {
  color: var(--accent);
}

.modal-content h2 {
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
}

.modal-content p {
  color: var(--fg-0);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
  word-wrap: break-word;
}

/* Make inline links clearly visible on the play page */
a {
  color: var(--accent);
  text-decoration: none;
}

a:visited {
  color: color-mix(in srgb, var(--accent) 70%, black 30%);
}

a:hover,
a:focus {
  color: var(--accent-dk);
  text-decoration: underline;
}

/* Desktop (>= 1025px) */
@media (min-width: 1025px) {
  header {
    height: var(--header-height-desktop);
  }

  .play-frame-wrap {
    flex: 1;
    position: relative;
    margin: var(--gap);
    margin-bottom: 0;
    border-radius: var(--radius-md);
    border: 2px solid var(--card-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  /* Position control bar inside the frame as an overlay on desktop */
  .play-frame-wrap .control-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0 !important; /* anchor to inner bottom of play-frame-wrap */
    margin: 0 !important;
    z-index: 40;
    background: linear-gradient(
      135deg,
      rgba(12, 13, 20, 0.65),
      rgba(12, 13, 20, 0.5)
    );
    border-radius: 10px;
    padding: 6px 10px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .play-frame-wrap .control-bar .control-button {
    background: none;
  }

  .control-bar {
    height: var(--control-bar-height-desktop);
    margin: var(--gap);
    margin-top: 0;
    border-radius: var(--radius-md);
  }

  .modal-content {
    margin: 10% auto;
    padding: 30px;
  }

  .modal-content h2 {
    font-size: 1.8rem;
  }

  .modal-content p {
    font-size: 1.1rem;
  }

  /* Hide mobile toggle on tablet/desktop so sidebar layout is not affected */
  .suggestions-toggle-wrap,
  .suggestions-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 1025px) {
  /* Make main take the remaining viewport space (below header) and use padding
     so child margins don't cause overflow. Children will stretch to fill height. */
  main {
    height: calc(100vh - var(--header-height-desktop));
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--gap);
    padding: var(--gap);
    box-sizing: border-box;
    overflow: hidden;
  }

  .play-frame-wrap {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    /* fill the available height from the parent `main` */
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0; /* use main's padding instead */
  }

  .suggestions-panel {
    width: 160px; /* reduced width to make suggestion tiles narrower */
    max-width: 160px;
    flex: 0 0 160px;
    margin: 0;
    margin-top: 0;
    background: linear-gradient(
      180deg,
      rgba(12, 13, 20, 0.85),
      rgba(12, 13, 20, 0.8)
    );
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 12px 12px 0 12px; /* remove bottom padding so last thumbnail isn't hidden */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    /* allow badges to extend outside the panel so inline corner badges are visible */
    overflow: visible;
    z-index: 20;
    /* On desktop, override the mobile fixed-bottom behaviour */
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: 100%;
    top: calc(var(--header-height-desktop) + var(--gap));
  }

  /* Make the iframe fill the play frame area */
  #game-iframe {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: block;
  }

  .suggestions-header h3 {
    margin: 0 0 8px 0;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
  }

  /* flame icon next to suggestions header */
  .suggestions-fire {
    height: 18px;
    width: auto;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
  }

  .suggestions-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
    padding-right: 0;
    padding-bottom: 0;
    /* small top padding so items don't touch the panel edge */
    padding-top: 12px;
    /* leave room for the header + padding so the list fits inside the panel */
    max-height: calc(100% - 56px);
  }

  .suggestions-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .suggestion-card {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 0;
    margin: 6px 0; /* small vertical breathing space for elegance */
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.12s var(--ease);
    border: 1px solid rgba(255, 255, 255, 0.02);
    /* allow corner badges to sit partly outside the thumbnail */
    overflow: visible;
    position: relative;
  }

  /* Hot overlay badge placed at top-right of the card */
  /* legacy element - no longer used; keep hidden to avoid duplicate badges */
  .suggestion-hot {
    display: none !important;
  }

  /* Hot badge variant for inline badges */
  .suggestion-badge--hot {
    background: linear-gradient(90deg, #ff6b4a, #ff3d3d);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Keep a visible keyboard focus state but remove hover-based motion */
  .suggestion-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
      0 0 16px rgba(168, 108, 240, 0.06);
    outline: none;
  }

  /* Hover: subtle thumbnail zoom (no overlay) */
  .suggestion-thumb {
    transition: transform 200ms var(--ease);
  }

  /* remove hover scaling; keep optional focus scaling for keyboard users */
  .suggestion-card:focus .suggestion-thumb {
    transform: scale(1.04);
  }

  /* Make suggestion thumbnails visually match the homepage category tiles:
     portrait aspect, consistent min-height, rounded corners and cover cropping. */
  .suggestion-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 96px;
    max-height: 140px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: rgba(12, 13, 20, 0.6);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    border: 0;
  }

  /* Fallback placeholder when thumbnail fails to load */
  .suggestion-thumb.no-thumb {
    background-image: none !important;
    background: linear-gradient(
      180deg,
      rgba(18, 18, 20, 0.85),
      rgba(12, 13, 20, 0.9)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  /* show compact textual metadata: title and a small badge */
  /* remove the metadata overlay (game title + bottom badge) below each thumbnail */
  /* hide textual meta for compact thumbnail-only mobile view */
  .suggestion-meta {
    display: none !important;
  }
  .suggestion-title {
    font-size: 12px;
    color: var(--fg-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
  }

  /* badge styles and color variants */
  /* hide bottom badges: keep only the small inline overlay badge (`.suggestion-badge-inline`) */
  .suggestion-badge {
    display: none !important;
  }
  .suggestion-badge--popular {
    background: linear-gradient(90deg, #ff6b4a, #ff3d3d);
  }
  .suggestion-badge--new {
    background: linear-gradient(90deg, #4ad9ff, #2ab7ff);
  }
  .suggestion-badge--top-pick {
    background: linear-gradient(90deg, #ffd166, #ffb84d);
    color: #2b2b2b;
  }
  .suggestion-badge--featured {
    background: linear-gradient(90deg, #9b6bff, #7b3fc9);
    color: #ffffff; /* ensure featured badge text is white for readability */
  }
  .suggestion-badge--multiplayer {
    background: linear-gradient(90deg, #79f29f 0%, #2dbb63 100%);
  }

  /* small inline badge that sits over the thumbnail for compact visibility (top-left) */
  .suggestion-badge-inline {
    position: absolute;
    /* move badge to sit on the card's top-left border (slight negative
       offset) so it appears attached to the card rather than covering
       the thumbnail */
    left: 0px;
    top: -8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    border-radius: 999px;
    z-index: 29;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45),
      inset 0 -2px 6px rgba(255, 255, 255, 0.02);
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px) saturate(120%);
    color: var(--fg-0);
  }
  /* Polished variant backgrounds and subtle glow/shadows */
  .suggestion-badge-inline.suggestion-badge--popular {
    background: linear-gradient(180deg, #ff8a61 0%, #ff4d4d 100%);
    box-shadow: 0 8px 22px rgba(255, 77, 77, 0.16);
    color: #fff;
  }
  .suggestion-badge-inline.suggestion-badge--new {
    background: linear-gradient(180deg, #68e6ff 0%, #2ab7ff 100%);
    box-shadow: 0 8px 22px rgba(43, 183, 255, 0.12);
    color: #ffffff;
  }
  .suggestion-badge-inline.suggestion-badge--top-pick {
    background: linear-gradient(180deg, #ffdf80 0%, #ffb84d 100%);
    box-shadow: 0 8px 22px rgba(255, 184, 77, 0.1);
    color: #1f1f1f;
  }
  .suggestion-badge-inline.suggestion-badge--featured {
    background: linear-gradient(180deg, #a884ff 0%, #7b3fc9 100%);
    box-shadow: 0 8px 22px rgba(123, 63, 201, 0.12);
    color: #ffffff;
  }

  /* also ensure non-inline badge variants display white text for these types */
  .suggestion-badge.suggestion-badge--new,
  .suggestion-badge.suggestion-badge--featured {
    color: #ffffff;
  }
  .suggestion-badge-inline.suggestion-badge--multiplayer {
    background: linear-gradient(180deg, #79f29f 0%, #2dbb63 100%);
    box-shadow: 0 8px 22px rgba(45, 187, 99, 0.12);
    color: #ffffff;
  }
  .suggestion-badge.suggestion-badge--multiplayer {
    color: #ffffff;
  }
  .suggestion-badge-inline.suggestion-badge--hot {
    background: linear-gradient(180deg, #ff8b5a 0%, #ff3d3d 100%);
    box-shadow: 0 8px 28px rgba(255, 61, 61, 0.16);
    color: #fff;
  }

  /* Elegant custom tooltip for compact badges */
  .suggestion-badge-inline[data-tooltip] {
    position: absolute; /* ensure pseudo tooltip aligns correctly */
  }
  .suggestion-badge-inline[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 12px;
    top: -8px;
    transform: translateY(-100%) translateY(-6px);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(12, 13, 20, 0.92)
    );
    color: var(--fg-0);
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 9px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
    z-index: 40;
    border: 1px solid rgba(168, 108, 240, 0.06);
    backdrop-filter: blur(6px) saturate(120%);
  }
  .suggestion-badge-inline[data-tooltip]::before {
    /* caret */
    content: "";
    position: absolute;
    left: 22px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(12, 13, 20, 0.92)
    );
    transform: translateY(-50%) rotate(45deg);
    z-index: 39;
    opacity: 0;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
    border-left: 1px solid rgba(168, 108, 240, 0.04);
    border-top: 1px solid rgba(168, 108, 240, 0.04);
    backdrop-filter: blur(6px);
  }
  .suggestion-badge-inline[data-tooltip]:hover::after,
  .suggestion-badge-inline[data-tooltip]:focus::after,
  .suggestion-badge-inline[data-tooltip]:hover::before,
  .suggestion-badge-inline[data-tooltip]:focus::before {
    opacity: 1;
    transform: translateY(-100%) translateY(-12px);
  }
  /* keep the hidden .suggestion-badge consistent if used elsewhere */
  .suggestion-badge {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
  }
}

/* Suggestions panel is desktop-only (sidebar) — mobile UI removed */

/* Mobile: ensure no textual game metadata appears under thumbnails */
@media (max-width: 1024px) {
  .suggestions-panel .suggestion-meta,
  .suggestions-panel .suggestion-title,
  .suggestion-card .suggestion-title,
  .suggestion-card .suggestion-meta {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  /* Show inline/top tags (badges) on mobile/tablet while keeping
     textual metadata hidden. Use !important to override other rules
     and ensure badges remain interactable. */
  .suggestions-panel .suggestion-badge,
  .suggestions-panel .suggestion-badge-inline,
  .suggestion-card .suggestion-badge,
  .suggestion-card .suggestion-badge-inline {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Ensure inline badges sit above the thumbnail and are positioned
     correctly (most markup uses `suggestion-badge-inline` as absolute). */
  .suggestion-badge-inline {
    /* Move the inline badge off the thumbnail and onto the card's
       top-left border so it reads as a tag attached to the card.
       Negative offsets place the badge slightly outside the thumbnail
       while `overflow: visible` on the card keeps it visible. */
    position: absolute !important;
    left: -8px !important;
    top: -8px !important;
    z-index: 40 !important;
  }

  /* Match desktop badge styling on mobile: gradients, padding, radius,
     shadows and tooltip behaviour so badges look identical but placed
     for mobile thumbnails. These rules intentionally mirror the
     desktop styles defined earlier. */
  .suggestion-badge,
  .suggestion-badge-inline {
    /* Mobile-friendly badge sizing: increase vertical padding so the
       badge text has comfortable inner spacing without appearing bulky. */
    padding: 7px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.36) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep tooltip and hover behaviour functional on touch devices when
     using keyboard/emulated hover — retain existing pseudo-element
     styles by ensuring visibility and z-index. */
  .suggestion-badge-inline[data-tooltip]::after,
  .suggestion-badge-inline[data-tooltip]::before {
    z-index: 45 !important;
  }

  /* Force exact desktop gradients & matching shadows for each badge
     variant so mobile badges match desktop visuals precisely. */
  .suggestions-panel .suggestion-badge-inline.suggestion-badge--popular,
  .suggestions-panel .suggestion-badge.suggestion-badge--popular {
    background: linear-gradient(180deg, #ff8a61 0%, #ff4d4d 100%) !important;
    box-shadow: 0 6px 16px rgba(255, 77, 77, 0.14) !important;
    color: #fff !important;
  }

  .suggestions-panel .suggestion-badge-inline.suggestion-badge--new,
  .suggestions-panel .suggestion-badge.suggestion-badge--new {
    background: linear-gradient(180deg, #68e6ff 0%, #2ab7ff 100%) !important;
    box-shadow: 0 6px 16px rgba(43, 183, 255, 0.12) !important;
    color: #fff !important;
  }

  .suggestions-panel .suggestion-badge-inline.suggestion-badge--top-pick,
  .suggestions-panel .suggestion-badge.suggestion-badge--top-pick {
    background: linear-gradient(180deg, #ffdf80 0%, #ffb84d 100%) !important;
    box-shadow: 0 6px 16px rgba(255, 184, 77, 0.1) !important;
    color: #1f1f1f !important;
  }

  .suggestions-panel .suggestion-badge-inline.suggestion-badge--featured,
  .suggestions-panel .suggestion-badge.suggestion-badge--featured {
    background: linear-gradient(180deg, #a884ff 0%, #7b3fc9 100%) !important;
    box-shadow: 0 6px 16px rgba(123, 63, 201, 0.12) !important;
    color: #ffffff !important;
  }

  .suggestions-panel .suggestion-badge-inline.suggestion-badge--multiplayer,
  .suggestions-panel .suggestion-badge.suggestion-badge--multiplayer {
    background: linear-gradient(180deg, #79f29f 0%, #2dbb63 100%) !important;
    box-shadow: 0 6px 16px rgba(45, 187, 99, 0.12) !important;
    color: #ffffff !important;
  }
}

/* Tablet-specific adjustments: slightly larger inner vertical padding for
   badges so tags feel airier on tablet screens (601px - 1024px). */
@media (min-width: 601px) and (max-width: 1024px) {
  .suggestion-badge,
  .suggestion-badge-inline {
    padding: 8px 8px !important; /* 8px top/bottom, 8px left/right */
  }
  /* ensure inline badge remains positioned off the thumbnail on tablets */
  .suggestion-badge-inline {
    left: -8px !important;
    top: -8px !important;
  }
}

/* Micro-breakpoint for very narrow phones: reduce header padding & font-size */
@media (max-width: 360px) {
  .suggestions-header-row {
    padding-left: 6px;
    padding-right: 6px;
    height: 40px;
    min-height: 40px;
  }
  .suggestions-title h3 {
    font-size: 13px;
  }
  .suggestions-toggle {
    width: 40px;
    height: 40px;
    padding: 4px;
  }
  .play-frame-wrap .control-bar {
    left: 0;
    right: 0;
    bottom: 24px; /* doubled for very narrow phones */
    padding: 0 6px 4px; /* tighter padding for very small phones */
    /* reduce the control bar height on very small phones */
    height: 48px !important;
    align-items: center;
    margin: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Hot tag (mobile) - ensure same gradient as desktop */
.suggestions-panel .suggestion-badge-inline.suggestion-badge--hot,
.suggestions-panel .suggestion-badge.suggestion-badge--hot {
  background: linear-gradient(180deg, #ff8b5a 0%, #ff3d3d 100%) !important;
  box-shadow: 0 8px 28px rgba(255, 61, 61, 0.16) !important;
  color: #fff !important;
}

/* Immersive UI: when the page should show the game in an immersive view
   (landscape on small devices or when entering fullscreen), hide the
   page chrome (control bar, suggestions panel and header) while keeping
   them accessible via pointer-events when the class is removed. This
   class is toggled by JS only on mobile/tablet breakpoints. */
.immersive-ui-hidden header,
.immersive-ui-hidden .play-frame-wrap .control-bar,
.immersive-ui-hidden #suggestions-panel,
.immersive-ui-hidden .suggestions-panel {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

/* Ensure the rotation prompt or modals can still be presented when immersive
   mode is active by keeping their z-index above the hidden chrome. */
.immersive-ui-hidden .rotation-prompt {
  /* When immersive mode is active (landscape or fullscreen on mobile/tablet)
     ensure the rotation prompt is hidden so it doesn't block the game view. */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
}

/* Reduce control-bar icon sizes on very small phones (iPhone 8 and smaller).
   This targets the icon font-size while preserving button padding and touch targets. */
@media (max-width: 375px) {
  .control-bar .control-button {
    font-size: 1.1rem; /* was 1.5rem */
  }
  .control-bar .control-button i {
    font-size: 1.1rem; /* explicit icon sizing for icon fonts */
  }
}

@media (max-width: 375px) {
  .play-frame-wrap .control-bar {
    padding-top: 2px !important;
    padding-bottom: 6px !important;
  }
}

@media (max-width: 320px) {
  .play-frame-wrap .control-bar {
    padding-top: 1px !important;
    padding-bottom: 5px !important;
    height: 44px !important;
    align-items: center;
    margin: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 320px) {
  .control-bar .control-button {
    font-size: 1rem; /* tighter on very narrow phones */
  }
  .control-bar .control-button i {
    font-size: 1rem;
  }
}

/* Small-phone scrolling fixes: ensure suggestions list can scroll vertically
   on very small devices (iPhone 5s/7/8 widths). Use a max-height so the
   list never overflows the viewport and enable smooth touch scrolling. */
@media (max-width: 375px) {
  .suggestions-panel {
    /* keep the panel from filling the whole viewport on small phones */
    max-height: calc(100vh - 80px) !important;
    overflow: visible !important;
  }

  .suggestions-panel.expanded .suggestions-list {
    /* leave room for header / controls and allow vertical scroll */
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 320px) {
  .suggestions-panel {
    max-height: calc(100vh - 64px) !important;
  }
  .suggestions-panel.expanded .suggestions-list {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Compact responsive redesign for very small phones (<= 360px).
   Keep the suggestions toggle and panel available but much smaller:
   - smaller floating toggle
   - single-row horizontally scrollable thumbnails
   - reduced padding, smaller thumbs, and lighter shadows
   This preserves functionality while improving usability on tiny screens. */
@media (max-width: 360px) {
  /* make the panel less tall and less intrusive */
  .suggestions-panel {
    /* unified item width used by both collapsed row and expanded grid */
    --suggestion-item-w: 60px !important;
    max-height: 48px !important; /* collapsed compact footer */
    padding: 4px 6px !important;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.36) !important;
    z-index: 260 !important;
    border-top-width: 1px !important;
    /* animate from bottom so expansion feels like growing upward */
    transform-origin: bottom center !important;
    transform: translateY(6px) !important;
    transition: max-height 420ms var(--ease), padding 320ms var(--ease),
      box-shadow 320ms var(--ease), transform 360ms var(--ease),
      opacity 360ms var(--ease);
  }

  /* collapsed thumbnails: a single horizontal row with smaller cards */
  .suggestions-panel .suggestions-list {
    display: flex !important;
    gap: 10px !important; /* nicer breathing room for collapsed row */
    padding: 8px 8px !important; /* slightly larger padding for touch comfort */
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important; /* avoid centered grouping which can create uneven gaps */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* start slightly lowered and hidden; will slide up and fade in on expand */
    transform: translateY(8px) !important;
    opacity: 0 !important;
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  }

  .suggestions-panel .suggestion-card {
    width: var(--suggestion-item-w) !important;
    flex: 0 0 var(--suggestion-item-w) !important;
    margin: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  /* ensure no unexpected pseudo-element spacing or gaps from children */
  .suggestions-panel .suggestions-list > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .suggestions-panel .suggestion-card .suggestion-thumb,
  .suggestions-panel .suggestion-thumb {
    aspect-ratio: 3 / 4 !important;
    width: 72px !important;
    max-height: 96px !important;
    min-height: 56px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important;
  }

  /* Keep textual metadata hidden to save vertical space */
  .suggestions-panel .suggestion-meta,
  .suggestions-panel .suggestion-title,
  .suggestion-card .suggestion-title,
  .suggestion-card .suggestion-meta {
    display: none !important;
  }

  /* compact floating toggle: smaller and centered with higher z-index */
  .suggestions-toggle-wrap {
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 400 !important;
  }

  .suggestions-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    --toggle-icon-color: var(--accent) !important;
    pointer-events: auto !important;
    z-index: 402 !important;
    transition: transform 220ms var(--ease), background 220ms var(--ease),
      box-shadow 220ms var(--ease);
  }

  /* rotate the toggle arrow when panel is expanded to indicate state */
  .suggestions-toggle[aria-expanded="true"] {
    transform: rotate(180deg) !important;
  }

  /* When expanded on tiny screens, allow a compact stacked view but keep
     internal scrolling so it never covers the whole viewport. */
  .suggestions-panel.expanded {
    /* halved size for very small phones */
    max-height: 160px !important;
    /* smaller thumbnail height fits narrow screens */
    --suggestion-thumb-h: 70px !important;
    padding: 6px 8px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .suggestions-panel.expanded .suggestions-list {
    display: grid !important;
    grid-auto-flow: column !important;
    /* use the unified item width so spacing is consistent */
    grid-auto-columns: var(--suggestion-item-w) !important;
    gap: 12px !important; /* elegant gap between items when expanded */
    column-gap: 12px !important;
    row-gap: 8px !important;
    overflow-x: auto !important;
    /* allow vertical scrolling inside the list if needed */
    overflow-y: auto !important;
    /* ensure the list can grow taller than previously-declared fixed heights */
    height: auto !important;
    box-sizing: border-box !important;
    max-height: 140px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  }

  /* ensure each card can expand to match the thumbnail variable */
  .suggestions-panel.expanded .suggestion-card {
    min-height: var(--suggestion-thumb-h) !important;
  }

  /* Make the suggestion card height exactly match the thumbnail height
     and ensure the thumbnail fills the card to avoid clipping/offsets. */
  .suggestions-panel.expanded .suggestion-card {
    height: var(--suggestion-thumb-h) !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .suggestions-panel.expanded .suggestion-card .suggestion-thumb,
  .suggestions-panel.expanded
    .suggestion-card
    .suggestion-thumb
    img.suggestion-thumb-img {
    height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* reduce reserved bottom space so the play area isn't pushed too high */
  :root {
    --controls-reserve: 96px;
  }

  /* ensure immersive mode still hides gracefully */
  .immersive-ui-hidden .suggestions-panel,
  .immersive-ui-hidden #suggestions-panel {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }
}

/* Hide suggestions panel entirely on small/mobile viewports to maximize
   game viewport and avoid overlap with controls. Adjust breakpoint as needed. */
@media (max-width: 768px) {
  .suggestions-panel,
  #suggestions-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(12px) !important;
  }
  /* reduce reserved controls space since suggestions are hidden */
  :root {
    --controls-reserve: 72px;
  }
  /* Make the play frame wrap fill the visible viewport on small devices.
     Use the JS-updated `--dynamic-vh` to avoid 100vh browser chrome bugs.
     On mobile we reserve space for the control bar by keeping the
     control bar inside the same container but below the iframe: the
     container height excludes only the header and safe-area insets,
     while the iframe itself is sized to leave room for the controls. */
  .play-frame-wrap {
    height: calc(
      (var(--dynamic-vh, 1vh) * 100) - var(--header-height) -
        env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
    min-height: 180px;
    padding-bottom: 0; /* controls are part of the content flow now */
    display: flex;
    flex-direction: column;
  }

  /* Size the iframe to leave room for the control bar (uses CSS var).
     `--controls-reserve` is set earlier; default to 72px when missing. */
  .play-frame-wrap #game-iframe {
    height: calc(100% - var(--controls-reserve, 72px));
    display: block;
  }

  /* Place control bar beneath the iframe in normal document flow so it
     appears below the game area (not overlaying it). */
  .play-frame-wrap .control-bar {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    padding: 0 8px 6px 8px; /* top padding 0, bottom 6px, horizontal 8px */
    z-index: 30;
    width: 100%;
    box-sizing: border-box;
  }

  /* Keep auto-hide working by translating the control bar out of view
     when `.auto-hidden` is applied. */
  .play-frame-wrap .control-bar.auto-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
}