.games-cloud-lead {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.games-cloud-signed-line {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lime);
}

.games-cloud-legal-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  opacity: 0.9;
}

.games-oauth-row:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.games-oauth-btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.games-oauth-btn .games-oauth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.games-oauth-btn--google {
  border-color: rgba(66, 133, 244, 0.55);
}

.games-oauth-btn--google .games-oauth-icon {
  background: #fff;
  border-radius: 999px;
  padding: 2px;
}

.games-oauth-btn--discord {
  border-color: rgba(88, 101, 242, 0.6);
}

.games-cloud-profile-block {
  margin-bottom: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.games-cloud-profile-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.games-cloud-profile-summary {
  flex: 1 1 12rem;
  min-width: 0;
}

.games-cloud-profile-preview {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lime);
  word-break: break-word;
}

.games-cloud-profile-sub {
  margin: 0.28rem 0 0;
}

.games-cloud-profile-editor {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.games-cloud-profile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.games-cloud-profile-row .games-cloud-email {
  flex: 1 1 12rem;
  min-width: 0;
}

.games-cloud-panel,
.games-leaderboard-panel {
  margin-top: 0.9rem;
  border: 1px solid rgba(57, 255, 20, 0.26);
  border-radius: 12px;
  padding: 0.8rem;
  background: rgba(12, 16, 20, 0.5);
}

.games-account-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.games-account-heading {
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  letter-spacing: 0.06em;
}

.games-account-status-chip {
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.88);
}

/* :not([hidden]) so the hidden HTML attribute beats display:flex (UA [hidden]{display:none} is lower-specificity). */
.games-account-toolbar:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0.65rem 0 0;
}

.games-account-toolbar--guest:not([hidden]) {
  flex-direction: column;
  align-items: stretch;
}

.games-account-toolbar--guest .games-oauth-row {
  margin-bottom: 0;
}

.games-account-sync-btn {
  border-color: rgba(57, 255, 20, 0.52);
  color: var(--lime);
  background: rgba(57, 255, 20, 0.08);
}

.games-account-msg {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.games-account-msg--panel:not(:empty) {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.games-cloud-auth-inline-msg {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(57, 255, 20, 0.22);
}

.games-cloud-auth-inline-msg:empty {
  display: none;
}

.games-account-signout-btn {
  border-color: rgba(255, 255, 255, 0.3);
}

.games-cloud-status--on {
  color: #39ff14;
}

.games-cloud-login-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.games-cloud-otp-block:not([hidden]) {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.games-cloud-build {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.games-cloud-build:empty {
  display: none;
}

.games-cloud-otp-input {
  letter-spacing: 0.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.games-cloud-resend-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--lime);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.games-cloud-resend-link:hover,
.games-cloud-resend-link:focus {
  color: #fff;
}

.games-cloud-email {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 0.45rem 0.6rem;
}

.games-cloud-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.games-leaderboard-table-wrap {
  margin-top: 0.65rem;
  overflow-x: auto;
}

.games-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.games-leaderboard-table th,
.games-leaderboard-table td {
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  font-size: 0.86rem;
}

.lb-name-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.lb-pfp {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(57, 255, 20, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.lb-pfp--empty {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.games-leaderboard-panel--refreshing {
  opacity: 0.55;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

@keyframes lb-shimmer {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.45; }
}
.lb-skeleton-cell {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  height: 0.72em;
  vertical-align: middle;
  animation: lb-shimmer 1.5s ease-in-out infinite;
}
.lb-skeleton-row .lb-pfp--empty {
  animation: lb-shimmer 1.5s ease-in-out infinite;
}

/* Drop aura peak column on narrow screens — not enough room */
@media (max-width: 520px) {
  .games-leaderboard-table th:last-child,
  .games-leaderboard-table td:last-child { display: none; }
}

.games-cloud-profile-line--pfp {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.games-pfp-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.games-pfp-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(57, 255, 20, 0.45);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.games-pfp-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(57, 255, 20, 0.08);
}

.games-pfp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.games-pfp-editor {
  margin-top: 0.65rem;
}

.games-pfp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 7px;
  margin-top: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

@media (max-width: 540px) {
  .games-pfp-grid {
    grid-template-columns: repeat(4, 1fr);
    max-height: none;
    overflow-y: visible;
    gap: 6px;
  }
}

.games-pfp-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.games-pfp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

@media (hover: hover) {
  .games-pfp-thumb:not(:disabled):hover {
    border-color: rgba(57, 255, 20, 0.7);
  }
}

.games-pfp-thumb--claimed {
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.games-pfp-thumb--mine {
  border-color: rgba(57, 255, 20, 1);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.55);
  opacity: 1;
  filter: none;
  cursor: default;
}

.games-pfp-clear-btn {
  margin-top: 0.6rem;
  display: block;
  color: rgba(255, 100, 100, 0.85);
}

:root {
  --lime: #39ff14;
  --yellow: #ffff00;
  --dark: #0a0a0a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  position: relative;
  background: var(--dark);
  color: var(--lime);
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 85% at 50% -25%, rgba(57, 255, 20, 0.16), transparent 58%),
    radial-gradient(ellipse 65% 45% at 100% 25%, rgba(255, 255, 0, 0.08), transparent 52%),
    radial-gradient(ellipse 55% 40% at 0% 95%, rgba(0, 229, 255, 0.07), transparent 48%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(57, 255, 20, 0.028) 2px,
      rgba(57, 255, 20, 0.028) 4px
    ),
    linear-gradient(175deg, #020302 0%, #0a100c 42%, #050505 100%);
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    background:
      radial-gradient(ellipse 120% 85% at 50% -25%, rgba(57, 255, 20, 0.12), transparent 58%),
      linear-gradient(175deg, #020302 0%, #0a100c 100%);
  }
}

header {
  background: #000;
  border-bottom: 6px solid var(--lime);
  box-shadow: 0 0 30px var(--lime);
  padding: 15px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  font-size: 2.8rem;
  font-weight: bold;
  text-shadow: 0 0 25px var(--lime);
  letter-spacing: 4px;
  color: var(--lime);
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  cursor: pointer;
}

.logo:visited {
  color: var(--lime);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  color: var(--lime);
  text-decoration: none;
  font-size: 1.4rem;
  padding: 8px 20px;
  border: 3px solid transparent;
  transition: all 0.3s;
  touch-action: manipulation;
}

nav a:focus-visible,
.button:focus-visible,
.streamer-btn a:focus-visible,
.social-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

@media (hover: hover) {
  nav a:hover {
    border-color: var(--lime);
    background: rgba(57, 255, 20, 0.15);
    box-shadow: 0 0 20px var(--lime);
    transform: translateY(-2px);
  }
}

.discord-icon-link {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  transition: all 0.3s;
  background: rgba(88, 101, 242, 0.15);
  border: 2px solid #5865f2;
  z-index: 1001;
  touch-action: manipulation;
}

@media (hover: hover) {
  .discord-icon-link:hover {
    background: #5865f2;
    box-shadow: 0 0 25px rgba(88, 101, 242, 0.9);
    transform: translateY(-50%) scale(1.1);
  }

  .discord-icon-link:hover .discord-icon-small {
    color: #fff;
  }
}

.discord-icon-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.discord-icon-small {
  width: 32px;
  height: 32px;
  color: #dbe1ff;
  transition: all 0.3s;
}

.streamers {
  display: none !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.streamer-btn {
  background: #111;
  border: 4px solid var(--lime);
  border-radius: 9999px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  box-shadow: 0 0 20px var(--lime);
  transition: all 0.3s;
}

@media (hover: hover) {
  .streamer-btn:hover {
    border-color: var(--yellow);
    box-shadow: 0 0 25px var(--yellow);
    transform: scale(1.05);
  }

  .streamer-btn a:hover {
    color: var(--yellow) !important;
  }
}

.streamer-btn a {
  color: var(--lime);
  text-decoration: none;
  font-weight: bold;
}

.live-dot {
  width: 14px;
  height: 14px;
  background: #555;
  border-radius: 50%;
  box-shadow: none;
  animation: pulse-offline 1.8s infinite;
  transition: all 0.3s;
}

@keyframes pulse-offline { 0%,100% { opacity: 0.3; } 50% { opacity: 0.1; } }

@keyframes pulse-live { 
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0.7); } 
  50% { box-shadow: 0 0 0 8px rgba(255, 50, 50, 0); } 
}

.streamer-btn.live .live-dot {
  background: #FF1744;
  animation: pulse-live 2s infinite;
  box-shadow: 0 0 15px #FF1744;
}

.streamer-btn.checking .live-dot {
  background: #ffb703;
  animation: pulse-offline 1.4s infinite;
  box-shadow: 0 0 12px rgba(255, 183, 3, 0.7);
}

.streamer-btn.offline .live-dot {
  background: #777;
  animation: pulse-offline 1.8s infinite;
}

.live-text {
  font-size: 0.86rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 999px;
  min-width: 126px;
  text-align: center;
  background: rgba(95, 95, 95, 0.25);
  color: #b8b8b8;
  text-shadow: none;
  transition: all 0.3s;
}

.streamer-btn.live .live-text {
  background: #FF1744;
  color: #FFF;
  font-size: 0.8rem;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.8);
  box-shadow: 0 0 15px #FF1744;
  animation: badge-pulse 2s infinite;
}

.streamer-btn.checking .live-text {
  background: #ffb703;
  color: #171717;
  box-shadow: 0 0 14px rgba(255, 183, 3, 0.8);
}

.streamer-btn.offline .live-text {
  background: rgba(95, 95, 95, 0.25);
  color: #b8b8b8;
  box-shadow: none;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.rotator {
  position: relative;
  max-width: 1100px;
  margin: 3rem auto;
  height: 560px;
  border: 14px solid var(--lime);
  box-shadow: 0 0 60px var(--lime);
  overflow: hidden;
  border-radius: 12px;
  background: #000; 
  cursor: pointer;
}

.home-page .rotator {
  margin: 1.1rem auto 2.2rem;
}

.rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background: #000;
  cursor: pointer;
  pointer-events: none;
}

.rotator img.active {
  opacity: 1;
  pointer-events: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  padding: 2rem 5%;
  max-width: 1600px;
  margin: 0 auto;
}

.meme-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 6px solid var(--lime);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(57,255,20,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  contain: layout style paint; 
  will-change: transform; 
  position: relative;
  /* Skip layout/paint for off-screen cards in very large grids (~300+ items). */
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

@media (hover: hover) {
  .meme-card:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 8px 30px rgba(57,255,20,0.6);
    border-color: var(--lime);
  }

  .meme-card:hover img {
    filter: brightness(1.1);
  }
}

.meme-card.selected {
  border-color: #ffff00;
  box-shadow: 0 0 60px #ffff00, inset 0 0 30px rgba(255,255,0,0.1);
  transform: scale(1.06);
}

.meme-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: filter 0.3s ease;
}

.meme-card.selected img {
  filter: brightness(1.15) drop-shadow(0 0 8px #ffff00);
}

.meme-view-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: 2px solid var(--lime);
  background: rgba(10, 10, 10, 0.92);
  color: var(--lime);
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
}

@media (hover: hover) {
  .meme-view-btn:hover {
    color: #000;
    background: var(--lime);
  }
}

.meme-card.hidden {
  display: none;
}

/* ====================== MEME VAULT FILTER (popover / bottom sheet) ====================== */

.vault-hero-hint {
  font-size: 1.4rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.vault-primary-btn {
  font-size: 1.4rem;
  padding: 18px 50px;
}

.vault-controls--filter {
  margin-bottom: 0.75rem;
}

.vault-filter-cluster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.vault-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 0.85rem;
  justify-content: center;
}

.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 2px solid rgba(57, 255, 20, 0.55);
  border-radius: 999px;
  color: rgba(57, 255, 20, 0.9);
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  padding: 9px 14px 9px 12px;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
  touch-action: manipulation;
}

.filter-toggle-icon {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  opacity: 0.85;
}

.filter-toggle-label {
  font-weight: bold;
  letter-spacing: 0.06em;
}

.filter-toggle-summary {
  font-weight: normal;
  opacity: 0.92;
  max-width: min(52vw, 14rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-toggle-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lime);
  color: #000;
  font-size: 0.68rem;
  font-weight: bold;
  line-height: 1.25rem;
  text-align: center;
}

@media (hover: hover) {
  .filter-toggle-btn:hover {
    border-color: var(--lime);
    color: var(--lime);
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.25);
  }
}

.filter-toggle-btn.filter-active {
  background: rgba(57, 255, 20, 0.12);
  border-color: var(--lime);
  color: var(--lime);
}

.filter-result-count {
  margin: 0;
  flex: 1 1 180px;
  min-width: 0;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.88;
  color: rgba(57, 255, 20, 0.85);
  font-family: 'Courier New', Courier, monospace;
}

.filter-active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.filter-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(57, 255, 20, 0.55);
  background: rgba(57, 255, 20, 0.08);
  color: var(--lime);
  border-radius: 999px;
  padding: 4px 8px 4px 10px;
  font-size: 0.72rem;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}

.filter-active-pill-x {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.85;
  padding: 0 2px;
}

@media (hover: hover) {
  .filter-active-pill:hover {
    background: rgba(57, 255, 20, 0.16);
    border-color: var(--lime);
  }
}

.filter-backdrop {
  display: none;
}

@media (max-width: 767px) {
  .filter-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 540;
    background: rgba(0, 0, 0, 0.72);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

.filter-panel {
  z-index: 560;
}

.filter-panel[hidden] {
  display: none !important;
}

@media (min-width: 768px) {
  .filter-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* top / left / width / max-height anchored under FILTER via hub.js (viewport-fixed; avoids backdrop-filter containing-block bug) */
    max-height: min(70vh, 520px);
    border: 2px solid var(--lime);
    border-radius: 14px;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(57, 255, 20, 0.18);
    animation: vaultFilterPopoverIn 0.22s ease-out;
    overflow: hidden;
    min-height: 0;
  }

  .filter-panel:not([hidden]) .filter-panel-inner {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    min-height: 0;
    flex: 1 1 auto;
  }

  .filter-panel-grip {
    display: none;
  }

  .vault-filter-cluster {
    align-items: center;
  }
}

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

@media (max-width: 767px) {
  .filter-panel:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    margin: 0;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border: 2px solid var(--lime);
    border-bottom: none;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    animation: vaultFilterSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .filter-panel-inner {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    min-height: 0;
  }

  .filter-panel-scroll {
    padding: 0 1rem 0.5rem;
  }

  .filter-panel-foot {
    flex-shrink: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

@keyframes vaultFilterSheetIn {
  from {
    transform: translateY(100%);
    opacity: 0.85;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-panel:not([hidden]) {
    animation: none !important;
  }
}

.filter-panel-inner {
  padding: 0;
}

.filter-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 0.65rem;
}

.filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem 0.5rem;
  border-bottom: 1px solid rgba(57, 255, 20, 0.2);
  position: relative;
}

.filter-panel-grip {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(57, 255, 20, 0.45);
}

.filter-panel-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--lime);
  flex: 1;
  text-align: center;
}

.filter-panel-close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  border: 1px solid rgba(57, 255, 20, 0.45);
  background: transparent;
  color: var(--lime);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .filter-panel-close:hover {
    background: rgba(57, 255, 20, 0.12);
    border-color: var(--lime);
  }
}

/* Mobile sheet: 48px close target + safe padding + grid title (must follow base .filter-panel-head for cascade) */
@media (max-width: 767px) {
  .filter-panel .filter-panel-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px
      max(12px, env(safe-area-inset-left, 0px));
  }

  .filter-panel .filter-panel-grip {
    grid-column: 1 / -1;
    grid-row: 1;
    position: static;
    left: auto;
    transform: none;
    justify-self: center;
    margin: 2px 0 4px;
  }

  .filter-panel .filter-panel-title {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    flex: initial;
    font-size: 0.92rem;
    text-align: center;
  }

  .filter-panel .filter-panel-close {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 14px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 2;
  }
}

.filter-panel-section {
  padding: 0.65rem 1rem;
}

.filter-section-heading {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(57, 255, 20, 0.65);
  text-transform: uppercase;
}

.filter-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-type-pill {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(57, 255, 20, 0.45);
  border-radius: 999px;
  background: transparent;
  color: rgba(57, 255, 20, 0.82);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  touch-action: manipulation;
}

@media (max-width: 767px) {
  .filter-type-pill {
    padding: 12px 14px;
    font-size: 0.8rem;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
  }
}

.filter-type-pill.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
  font-weight: bold;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
  margin: 0;
  min-height: 0;
}

.filter-chip {
  background: transparent;
  border: 1px solid rgba(57, 255, 20, 0.45);
  border-radius: 999px;
  color: rgba(57, 255, 20, 0.75);
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.76rem;
  padding: 6px 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  touch-action: manipulation;
}

@media (max-width: 767px) {
  .filter-chip {
    padding: 10px 14px;
    font-size: 0.78rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (hover: hover) {
  .filter-chip:hover {
    border-color: var(--lime);
    color: var(--lime);
  }
}

.filter-chip[aria-pressed='true'] {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
  font-weight: bold;
}

.filter-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0.65rem 1rem;
  border-top: 1px solid rgba(57, 255, 20, 0.22);
  background: rgba(8, 8, 8, 0.92);
}

.filter-clear-btn {
  border: 1px solid rgba(57, 255, 20, 0.45);
  background: transparent;
  color: rgba(57, 255, 20, 0.85);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}

.filter-apply-btn {
  border: 2px solid var(--lime);
  background: rgba(57, 255, 20, 0.14);
  color: var(--lime);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}

@media (max-width: 767px) {
  .filter-clear-btn,
  .filter-apply-btn {
    min-height: 48px;
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
}

@media (hover: hover) {
  .filter-clear-btn:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--lime);
  }

  .filter-apply-btn:hover {
    background: rgba(57, 255, 20, 0.22);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.25);
  }
}

/* ====================== SCROLL TO TOP ====================== */

.scroll-top-btn {
  background: rgba(10, 10, 10, 0.9);
  border: 2px solid var(--lime);
  border-radius: 50%;
  bottom: 2rem;
  color: var(--lime);
  cursor: pointer;
  font-size: 1.5rem;
  height: 50px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 2rem;
  transition: opacity 0.3s, box-shadow 0.2s;
  width: 50px;
  z-index: 500;
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top-btn:hover {
  box-shadow: 0 0 20px var(--lime);
}

.meme-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 54px 12px 14px;
  z-index: 3000;
}

.meme-lightbox.open {
  display: flex;
}

.meme-lightbox-frame {
  width: min(92vw, 1080px);
  height: min(74vh, 760px);
  border: 5px solid var(--lime);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(57, 255, 20, 0.45);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.meme-lightbox-frame.selected {
  border-color: var(--yellow);
  box-shadow: 0 0 40px rgba(255, 255, 0, 0.55);
}

.meme-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meme-lightbox-close,
.meme-lightbox-nav {
  position: absolute;
  border: 2px solid var(--lime);
  background: rgba(10, 10, 10, 0.95);
  color: var(--lime);
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.meme-lightbox-close {
  top: 18px;
  right: 18px;
}

.meme-lightbox-nav.prev {
  left: 20px;
}

.meme-lightbox-nav.next {
  right: 20px;
}

.meme-lightbox-nav.random {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.meme-lightbox-actions {
  position: static;
  margin-top: 12px;
  width: min(96vw, 860px);
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 10px 12px;
  align-items: center;
}

.meme-lightbox .meme-lightbox-action {
  font-size: 0.9rem !important;
  padding: 7px 16px !important;
  margin: 0;
  border-width: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  min-height: 44px;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.3px;
}

#meme-lightbox-download,
#meme-lightbox-download-zip {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 430px);
}

#meme-lightbox-toggle-select,
#meme-lightbox-selected-preview {
  width: 100%;
}

.button {
  display: inline-block;
  font-size: 2.2rem;
  padding: 22px 55px;
  background: transparent;
  color: var(--lime);
  border: 6px solid var(--lime);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 0 40px var(--lime);
  transition: all 0.4s;
  margin: 10px;
  touch-action: manipulation;
}

@media (hover: hover) {
  .button:hover {
    background: var(--lime);
    color: #000;
    transform: scale(1.12) rotate(4deg);
    box-shadow: 0 0 70px var(--lime);
  }
}

.random-home-cta {
  margin: 0.25rem 0 0.75rem;
}

.random-home-button {
  font-size: 1.08rem;
  padding: 10px 22px;
  border-width: 3px;
  box-shadow: 0 0 18px var(--lime);
}

.main-content {
  text-align: center;
  padding: 4rem 5%;
}

h1 {
  font-size: 4.8rem;
  text-shadow: 0 0 40px var(--lime);
  margin: 0 0 1rem;
}

.credit {
  opacity: 0.6;
  margin-top: 4rem;
}

.giveaway-headline {
  margin: 120px 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-shadow: 0 0 60px var(--lime);
}

.giveaway-headline-text {
  font-size: clamp(1.75rem, 6.5vw, 4rem);
  letter-spacing: clamp(1px, 1vw, 8px);
  line-height: 1;
}

.giveaway-flame {
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  line-height: 1;
}

/* duplicate live-status/button blocks removed to avoid cross-browser parse issues */

.vault-sticky-header {
  position: sticky;
  top: 86px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  padding: 1.5rem 5%;
  z-index: 220;
  border-bottom: 4px solid var(--lime);
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.28);
}

.vault-sticky-header h1 {
  font-size: 2.2rem;
  text-shadow: 0 0 40px var(--lime);
  margin: 0 0 0.8rem;
  color: var(--lime);
}

.vault-sticky-header p {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.button-group .button {
  margin: 0;
  font-size: 1.3rem;
  padding: 16px 45px;
}

.vault-utility-row {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.vault-utility-btn {
  border: 1px solid rgba(57, 255, 20, 0.65);
  background: transparent;
  color: rgba(57, 255, 20, 0.9);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .vault-utility-btn:hover {
    color: var(--yellow);
    border-color: var(--yellow);
  }
}

.selected-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3200;
}

.selected-preview-modal.open {
  display: flex;
}

.selected-preview-panel {
  width: min(92vw, 980px);
  max-height: 82vh;
  background: #070707;
  border: 3px solid var(--lime);
  border-radius: 10px;
  box-shadow: 0 0 35px rgba(57, 255, 20, 0.4);
  overflow: hidden;
}

.selected-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(57, 255, 20, 0.45);
}

.selected-preview-header h2 {
  margin: 0;
}

.selected-preview-close {
  border: 2px solid var(--lime);
  background: #000;
  color: var(--lime);
  font-weight: bold;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}

.selected-preview-table-wrap {
  overflow: auto;
  max-height: calc(82vh - 68px);
}

.selected-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.selected-preview-table th,
.selected-preview-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(57, 255, 20, 0.25);
  vertical-align: middle;
}

.selected-preview-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 2px solid var(--lime);
  border-radius: 6px;
  background: #000;
}

.selected-preview-action {
  border: 2px solid var(--lime);
  background: transparent;
  color: var(--lime);
  border-radius: 8px;
  padding: 5px 10px;
  margin-right: 8px;
  cursor: pointer;
}

.selected-preview-action.remove {
  border-color: #FF1744;
  color: #FF1744;
}

@media (hover: hover) {
  #deselect-all-btn:hover {
    background: #FF1744 !important;
    color: #FFF !important;
    transform: scale(1.12) rotate(4deg);
    box-shadow: 0 0 70px #FF1744 !important;
  }
}

.main-content {
  text-align: center;
  padding: 4rem 5%;
}

h1 {
  font-size: 4.8rem;
  text-shadow: 0 0 40px var(--lime);
  margin: 0 0 1rem;
}

.credit {
  opacity: 0.6;
  margin-top: 4rem;
}

.streamer-section {
  padding: 2rem;
  border: 3px solid var(--lime);
  border-radius: 15px;
  box-shadow: 0 0 26px rgba(57, 255, 20, 0.45);
  transition: all 0.3s ease;
  position: relative;
}

.streamer-section.live {
  border: 3px solid var(--lime);
  box-shadow: 0 0 26px rgba(57, 255, 20, 0.55), inset 0 0 12px rgba(57, 255, 20, 0.12);
  animation: none;
}

.streamer-section h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 1.1rem;
}

.streamer-section .button {
  display: block;
  margin: 0.8rem auto;
  width: fit-content;
}

.streamer-section.live h2::after {
  content: "LIVE NOW";
  display: inline-block;
  background: #FF1744;
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.7px;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.9);
  transform: rotate(-12deg) translateY(-1px);
}

.streamer-section.checking {
  border: 3px solid #ffb703;
  box-shadow: 0 0 30px rgba(255, 183, 3, 0.8), inset 0 0 16px rgba(255, 183, 3, 0.14);
  animation: none;
}

.streamer-section.offline {
  border: 3px solid var(--lime);
  box-shadow: 0 0 26px rgba(57, 255, 20, 0.45);
  animation: none;
}

.socials-subtitle {
  font-size: 2rem;
  margin: 3rem 0;
}

.socials-grid {
  display: flex;
  gap: 4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.socials-card {
  text-align: center;
}

.home-socials {
  margin: 2.5rem auto 0;
  max-width: 1100px;
}

.home-socials h2 {
  margin: 0 0 1.2rem;
  font-size: 2.1rem;
  letter-spacing: 2px;
}

.home-socials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}

.home-socials-card {
  padding: 0.2rem 0.5rem 0.4rem;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.home-socials-card h3 {
  margin: 0 0 0.8rem;
  font-size: 1.5rem;
  letter-spacing: 0.8px;
}

.home-socials-card .social-button {
  margin: 0.32rem auto;
  min-width: 170px;
  font-size: 1.12rem;
  padding: 10px 20px;
  border-width: 3px;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.7);
}

.social-button {
  font-size: 1.6rem;
  padding: 18px 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.button-icon {
  font-size: 1em;
  line-height: 1;
  width: 1.1em;
  height: 1.1em;
}

.social-icon {
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

.social-icon-twitch {
  color: #a970ff;
}

.social-icon-tiktok {
  color: #ffffff;
}

.social-icon-discord {
  color: #ffffff;
}

.socials-community {
  margin-top: 3rem;
  text-align: center;
}

.socials-community h2 {
  margin-bottom: 1rem;
}

.home-discord-cta {
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

.home-discord-cta .social-button {
  margin: 0 auto;
  font-size: 1.05rem;
  padding: 9px 18px;
}

@media (min-width: 1025px) {
  .home-socials {
    margin-top: 1.9rem;
    max-width: 980px;
  }

  .home-socials h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
  }

  .home-socials-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 2.2rem;
  }

  .home-socials-card {
    padding: 0.25rem 0.4rem 0.5rem;
  }

  .home-socials-card h3 {
    font-size: 1.45rem;
    margin-bottom: 0.7rem;
  }

  .home-socials-card .social-button {
    min-width: 210px;
    font-size: 1.2rem;
    padding: 11px 22px;
    border-width: 3px;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.72);
    margin: 0.32rem auto;
  }

  /* Desktop: sized between “tiny pill” and full social row — capped width, centered */
  .home-discord-cta,
  .random-home-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(980px, 94vw);
    margin-left: auto;
    margin-right: auto;
  }

  .home-discord-cta {
    margin-top: 0.9rem;
    margin-bottom: 0.35rem;
  }

  .home-discord-cta .social-button {
    font-size: 1.05rem;
    padding: 11px 22px;
    width: min(100%, 540px);
    max-width: 540px;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
  }

  .random-home-cta {
    margin: 0.25rem auto 0.85rem;
  }

  .random-home-button {
    font-size: 1.05rem;
    padding: 11px 22px;
    border-width: 3px;
    box-shadow: 0 0 16px var(--lime);
    width: min(100%, 540px);
    max-width: 540px;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-page .rotator {
    margin-top: 0.9rem;
  }
}

.discord-button {
  border-color: #5865f2;
  box-shadow: 0 0 30px rgba(88, 101, 242, 0.85);
  color: #dbe1ff;
}

@media (hover: hover) {
  .discord-button:hover {
    background: #5865f2;
    color: #fff;
    box-shadow: 0 0 36px rgba(88, 101, 242, 0.95);
  }
}

.streamer-section .button.platform-live {
  border-color: #FF1744;
  box-shadow: 0 0 24px rgba(255, 23, 68, 0.9);
  animation: platform-live-pulse 1.4s ease-in-out infinite;
}

@media (hover: hover) {
  .streamer-section .button.platform-live:hover {
    background: #FF1744;
    color: #fff;
    box-shadow: 0 0 32px rgba(255, 23, 68, 0.95);
  }
}

@keyframes platform-live-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 34px rgba(255, 23, 68, 1);
    transform: scale(1.04);
  }
}

@keyframes section-pulse {
  0%, 100% { box-shadow: 0 0 40px #FF1744, inset 0 0 20px rgba(255, 23, 68, 0.1); }
  50% { box-shadow: 0 0 60px #FF1744, inset 0 0 30px rgba(255, 23, 68, 0.2); }
}

.social-link {
  color: var(--lime);
  text-decoration: underline;
  font-weight: bold;
  transition: all 0.3s;
}

@media (hover: hover) {
  .social-link:hover {
    color: var(--yellow);
    text-shadow: 0 0 15px var(--yellow);
  }
}

.credit a,
.legal-footer a,
.games-cloud-legal-hint a {
  color: var(--lime);
  text-decoration: underline;
  font-weight: bold;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}

@media (hover: hover) {
  .credit a:hover,
  .legal-footer a:hover,
  .games-cloud-legal-hint a:hover {
    color: var(--yellow);
    text-shadow: 0 0 15px var(--yellow);
  }
}

.legal-footer {
  margin-top: 2.5rem;
  opacity: 0.85;
}

/* Press feedback on touch — :active when the primary pointer can’t hover */
@media (hover: none) {
  nav a:active {
    border-color: var(--lime);
    background: rgba(57, 255, 20, 0.22);
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.55);
  }

  .discord-icon-link:active {
    background: #5865f2;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.85);
  }

  .discord-icon-link:active .discord-icon-small {
    color: #fff;
  }

  .streamer-btn:active {
    border-color: var(--yellow);
    box-shadow: 0 0 22px rgba(255, 255, 0, 0.65);
  }

  .streamer-btn a:active {
    color: var(--yellow) !important;
  }

  .meme-card:active {
    transform: scale(0.98);
    box-shadow: 0 0 28px rgba(57, 255, 20, 0.55);
  }

  .meme-card.selected:active {
    transform: scale(1.03);
  }

  .meme-view-btn:active {
    color: #000;
    background: var(--lime);
  }

  .button:active {
    background: var(--lime);
    color: #000;
    box-shadow: 0 0 48px var(--lime);
    transform: scale(1.06);
  }

  .vault-utility-btn:active {
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(255, 255, 0, 0.1);
  }

  #deselect-all-btn:active {
    background: #ff1744 !important;
    color: #fff !important;
    box-shadow: 0 0 40px #ff1744 !important;
    transform: scale(1.05);
  }

  .discord-button:active {
    background: #5865f2;
    color: #fff;
    box-shadow: 0 0 28px rgba(88, 101, 242, 0.9);
  }

  .streamer-section .button.platform-live:active {
    background: #ff1744;
    color: #fff;
    box-shadow: 0 0 28px rgba(255, 23, 68, 0.85);
  }

  .social-link:active,
  .credit a:active,
  .legal-footer a:active,
  .games-cloud-legal-hint a:active {
    color: var(--yellow);
    text-shadow: 0 0 12px rgba(255, 255, 0, 0.45);
  }

  .meme-lightbox-close:active,
  .meme-lightbox-nav:not(.random):active {
    background: rgba(57, 255, 20, 0.22);
    color: #fff;
  }

  .meme-lightbox-nav.random:active {
    transform: translateX(-50%) scale(0.96);
    background: rgba(57, 255, 20, 0.22);
  }

  .selected-preview-close:active {
    background: rgba(57, 255, 20, 0.12);
  }

  .selected-preview-action:active {
    background: rgba(57, 255, 20, 0.12);
  }

  .selected-preview-action.remove:active {
    background: rgba(255, 23, 68, 0.18);
  }

  .games-tab--bj:not([aria-selected='true']):active {
    color: #e0c4f0;
    border-color: rgba(200, 140, 240, 0.55);
    background: rgba(200, 120, 255, 0.1);
  }

  .games-tab--crash:not([aria-selected='true']):active {
    color: #f0a070;
    border-color: rgba(255, 110, 60, 0.58);
    background: rgba(255, 100, 50, 0.1);
  }

  .games-tab--coin:not([aria-selected='true']):active {
    color: var(--lime);
    border-color: rgba(57, 255, 20, 0.55);
    background: rgba(57, 255, 20, 0.08);
  }

  .games-tab--rps:not([aria-selected='true']):active {
    color: #ffffaa;
    border-color: rgba(230, 230, 0, 0.55);
    background: rgba(255, 255, 0, 0.08);
  }

  .games-tab--slots:not([aria-selected='true']):active {
    color: #a8f5ff;
    border-color: rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.1);
  }

  .games-tab[aria-selected='true']:active {
    opacity: 0.94;
  }

  .games-stage-reset:active {
    border-color: var(--yellow);
    color: var(--yellow);
  }

  .games-choice-row label:active,
  .games-bet-row label:active {
    border-color: var(--yellow);
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 16px rgba(255, 255, 0, 0.22);
  }

  .games-history-clear:active {
    border-color: var(--yellow);
    color: var(--yellow);
  }
}

.business-card {
  margin: 2rem auto 0;
  max-width: 860px;
  border: 3px solid var(--lime);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.45);
  text-align: left;
}

.business-card h2 {
  margin-top: 0;
}

.business-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.business-list li {
  margin: 0.5rem 0;
}

.legal-page .legal-content {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 3rem;
}

.legal-page .legal-content h1 {
  margin-bottom: 1.5rem;
}

.legal-page .business-card {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border-width: 2px;
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.32);
}

.legal-page .business-card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
  letter-spacing: 0.4px;
}

.legal-page .business-list {
  margin: 0;
}

.legal-page .business-list li {
  margin: 0.32rem 0;
  line-height: 1.45;
}

.legal-page .legal-footer {
  margin-top: 1.5rem;
}

@media (max-width: 1700px) {
  header {
    padding: 12px 4%;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo discord"
      "nav nav";
    align-items: center;
  }

  .logo {
    font-size: 1.75rem;
    letter-spacing: 1px;
    position: static;
    transform: none;
    width: auto;
    text-align: center;
    order: 1;
    grid-area: logo;
    justify-self: center;
  }

  nav {
    width: 100%;
    order: 3;
    grid-area: nav;
  }

  nav ul {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    order: 3;
  }

  nav a {
    font-size: 1rem;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .discord-icon-link {
    position: static;
    transform: none;
    width: 40px;
    height: 40px;
    order: 2;
    grid-area: discord;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }

  @media (hover: hover) {
    .discord-icon-link:hover {
      transform: scale(1.08);
    }
  }

  .discord-icon-small {
    width: 24px;
    height: 24px;
  }
}

/* ====================== MOBILE RESPONSIVE ====================== */
@media (max-width: 1024px) {
  .logo {
    font-size: 1.55rem;
    letter-spacing: 1px;
  }

  nav {
    width: 100%;
    order: 3;
  }

  nav ul {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    order: 3;
  }

  nav a {
    font-size: 1rem;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .discord-icon-link {
    position: absolute;
    transform: none;
    width: 40px;
    height: 40px;
    order: 2;
    right: 4%;
    top: 10px;
    margin-left: 0;
    margin-right: 0;
  }

  @media (hover: hover) {
    .discord-icon-link:hover {
      transform: scale(1.08);
    }
  }

  .discord-icon-small {
    width: 24px;
    height: 24px;
  }

  .giveaway-headline {
    margin: 84px 0 48px;
    gap: 16px;
  }

  .streamer-btn {
    padding: 6px 16px;
    font-size: 0.9rem;
    gap: 8px;
  }

  .button {
    font-size: 1.6rem;
    padding: 16px 40px;
  }

  h1 {
    font-size: 3.5rem;
  }

  .rotator {
    height: 400px;
    margin: 2rem auto;
  }

  .home-page .rotator {
    margin: 0.9rem auto 1.6rem;
  }
}

@media (max-width: 768px) {
  header {
    border-bottom-width: 3px;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.55);
  }

  header {
    padding: 12px 4%;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo discord"
      "nav nav";
    align-items: center;
  }

  .logo {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }

  nav ul {
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    order: 3;
  }

  nav a {
    font-size: 0.9rem;
    padding: 5px 10px;
    border: 2px solid transparent;
    white-space: nowrap;
  }

  .discord-icon-link {
    position: static;
    transform: none;
    width: 33px;
    height: 33px;
    order: 2;
    grid-area: discord;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }

  @media (hover: hover) {
    .discord-icon-link:hover {
      transform: scale(1.08);
    }
  }

  .discord-icon-small {
    width: 18px;
    height: 18px;
  }

  .streamers {
    display: none;
  }

  .streamer-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: 3px solid var(--lime);
    gap: 8px;
  }

  .streamer-btn a {
    font-size: 0.8rem;
  }

  .live-dot {
    width: 10px;
    height: 10px;
  }

  .live-text {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .streamer-btn.live .live-text {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .main-content {
    padding: 2rem 4%;
  }

  .legal-page .legal-content {
    padding-top: 1.8rem;
  }

  .legal-page .business-card {
    margin-top: 0.8rem;
    padding: 0.95rem 1rem;
  }

  .legal-page .business-card h2 {
    font-size: 1.05rem;
  }

  .legal-page .business-list li {
    margin: 0.26rem 0;
    line-height: 1.35;
  }

  .vault-sticky-header {
    top: 76px;
    padding: 0.85rem 4% 0.7rem;
    border-bottom: 2px solid var(--lime);
  }

  .vault-sticky-header h1 {
    font-size: 1.35rem;
    margin: 0 0 0.4rem;
  }

  .vault-sticky-header p {
    font-size: 1rem;
    margin: 0 0 0.8rem;
  }

  /* Meme Vault hero hint hidden on small screens (compact sticky header) */
  .vault-sticky-header .vault-hero-hint {
    display: none;
  }

  .button-group {
    gap: 0.45rem;
  }

  .button-group .button {
    font-size: 1.1rem;
    padding: 12px 28px;
  }

  /* Meme Vault primary controls */
  .button-group .vault-primary-btn,
  .button-group #random-meme-btn,
  .button-group #download-zip-btn {
    font-size: 0.8rem !important;
    padding: 7px 12px !important;
    border-width: 2px;
    border-radius: 12px;
    max-width: 180px;
    min-width: 0;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.35);
  }

  .vault-utility-row {
    margin-top: 6px;
    gap: 6px;
  }

  .vault-utility-btn {
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  .meme-lightbox-actions {
    margin-top: 10px;
    width: 96%;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .meme-lightbox-action {
    width: 100%;
    max-width: none;
    font-size: 0.72rem;
    padding: 7px 9px;
    border-width: 2px;
  }

  #meme-lightbox-download,
  #meme-lightbox-download-zip {
    width: 100%;
  }

  .meme-lightbox-frame {
    width: 94vw;
    height: 56vh;
  }

  h1 {
    font-size: 2.5rem;
    margin: 0 0 0.8rem;
  }

  .rotator {
    height: 300px;
    margin: 1.5rem auto;
    border: 10px solid var(--lime);
    box-shadow: 0 0 32px rgba(57, 255, 20, 0.55);
  }

  .home-page .rotator {
    margin: 0.75rem auto 1.25rem;
  }

  .button {
    font-size: 1.2rem;
    padding: 14px 30px;
    margin: 8px 5px;
    border: 4px solid var(--lime);
  }

  @media (hover: hover) {
    .button:hover {
      transform: scale(1.08) rotate(2deg);
    }
  }

  .streamer-section {
    padding: 1.5rem;
    border-radius: 12px;
  }

  .socials-grid {
    gap: 2.2rem;
  }

  .home-socials h2 {
    font-size: 1.6rem;
  }

  .home-socials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .home-socials-card .social-button {
    min-width: 150px;
    font-size: 1rem;
    padding: 9px 16px;
    margin: 0.22rem auto;
  }

  .social-button {
    font-size: 1.25rem;
    padding: 14px 34px;
  }

  .home-discord-cta {
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
  }

  .home-discord-cta .social-button {
    font-size: 0.95rem;
    padding: 8px 15px;
  }

  .random-home-cta {
    margin: 0.2rem 0 0.65rem;
  }

  .random-home-button {
    font-size: 1rem;
    padding: 9px 18px;
  }

  .streamer-section h2 {
    gap: 8px;
  }

  .streamer-section.live h2::after {
    font-size: 0.62rem;
    padding: 3px 8px;
  }

  .streamer-section.live {
    box-shadow: 0 0 30px #FF1744, inset 0 0 15px rgba(255, 23, 68, 0.1);
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    padding: 1rem 3%;
  }

  .meme-card {
    border: 3px solid var(--lime);
    border-radius: 10px;
    aspect-ratio: 4 / 3;
  }

  @media (hover: hover) {
    .meme-card:hover {
      transform: scale(1.02) translateY(-4px);
    }
  }

  .meme-card.selected {
    transform: scale(1.03);
  }

  .credit {
    margin-top: 2rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  header {
    padding: 10px 3%;
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo discord"
      "nav nav";
    align-items: center;
  }

  .logo {
    font-size: 1.08rem;
    letter-spacing: 0;
    width: auto;
    order: 1;
    text-align: center;
    grid-area: logo;
    justify-self: center;
  }

  nav {
    width: 100%;
    order: 3;
    grid-area: nav;
  }

  nav ul {
    order: 3;
    gap: 0.45rem;
    width: 100%;
    justify-content: center;
  }

  nav a {
    font-size: 0.68rem;
    padding: 4px 6px;
    white-space: nowrap;
  }

  .giveaway-headline {
    margin: 54px 0 34px;
    gap: 10px;
  }

  .giveaway-headline-text {
    font-size: clamp(1.45rem, 8vw, 2.2rem);
    letter-spacing: clamp(1px, 0.8vw, 3px);
  }

  .giveaway-flame {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .discord-icon-link {
    position: static;
    transform: none;
    width: 25px;
    height: 25px;
    order: 2;
    grid-area: discord;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }

  @media (hover: hover) {
    .discord-icon-link:hover {
      transform: scale(1.06);
    }
  }

  .discord-icon-small {
    width: 14px;
    height: 14px;
  }

  .streamers {
    display: none;
  }

  .streamer-btn {
    flex: 1;
    min-width: 140px;
    padding: 5px 10px;
    font-size: 0.75rem;
    border: 2px solid var(--lime);
    gap: 6px;
    flex-direction: column;
  }

  .streamer-btn strong {
    font-size: 0.75rem;
  }

  .streamer-btn a {
    font-size: 0.65rem;
  }

  .live-dot {
    width: 8px;
    height: 8px;
  }

  .live-text {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .streamer-btn.live .live-text {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .main-content {
    padding: 1.5rem 3%;
  }

  .vault-sticky-header {
    top: 68px;
    padding: 0.7rem 3% 0.6rem;
    border-bottom: 2px solid var(--lime);
  }

  .vault-sticky-header h1 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
  }

  .vault-sticky-header p {
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
  }

  .vault-sticky-header .vault-hero-hint {
    display: none;
  }

  .button-group {
    gap: 0.4rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .button-group .button {
    font-size: 0.85rem;
    padding: 7px 12px;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .button-group .vault-primary-btn,
  .button-group #random-meme-btn,
  .button-group #download-zip-btn {
    font-size: 0.76rem !important;
    padding: 6px 10px !important;
    max-width: 160px;
    border-width: 2px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.32);
  }

  .vault-utility-row {
    margin-top: 5px;
    gap: 5px;
  }

  .vault-utility-btn {
    font-size: 0.68rem;
    padding: 3px 7px;
  }

  h1 {
    font-size: 1.8rem;
    margin: 0 0 0.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .rotator {
    height: 220px;
    margin: 1rem auto;
    border: 8px solid var(--lime);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.42);
  }

  .home-page .rotator {
    margin: 0.6rem auto 1rem;
  }

  .button {
    font-size: 1rem;
    padding: 12px 20px;
    margin: 6px 4px;
    border: 3px solid var(--lime);
    display: block;
    width: 90%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .random-home-cta {
    margin: 0.25rem 0 0.45rem;
  }

  .random-home-button {
    font-size: 0.86rem;
    padding: 6px 12px;
    width: auto;
    max-width: none;
    border-width: 2px;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.55);
  }

  @media (hover: hover) {
    .button:hover {
      transform: scale(1.05) rotate(1deg);
    }
  }

  .streamer-section {
    padding: 1rem;
    border-radius: 10px;
  }

  .socials-subtitle {
    font-size: 1.4rem;
    margin: 2rem 0 1.5rem;
  }

  .home-socials {
    margin-top: 1.6rem;
  }

  .home-socials h2 {
    font-size: 1.15rem;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
  }

  .home-socials-card {
    padding: 0.1rem 0.3rem 0.2rem;
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }

  .home-socials-card h3 {
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
  }

  .home-socials-card .social-button {
    min-width: 0;
    width: 100%;
    font-size: 0.74rem;
    padding: 6px 7px;
    margin: 0.15rem auto;
    border-width: 2px;
    box-shadow: 0 0 9px rgba(57, 255, 20, 0.5);
    gap: 5px;
  }

  .socials-grid {
    gap: 1rem;
    margin-top: 1.4rem;
  }

  .social-button {
    font-size: 1rem;
    padding: 12px 22px;
    gap: 8px;
  }

  .home-discord-cta {
    margin-top: 0.45rem;
    margin-bottom: 0.15rem;
  }

  .home-discord-cta .social-button {
    font-size: 0.82rem;
    padding: 6px 11px;
    border-width: 2px;
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.6);
  }

  .streamer-section h2 {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Don't override tighter home-page social button spacing */
  .streamer-section:not(.home-socials-card) .button {
    margin: 0.6rem auto;
  }

  .streamer-section.live h2::after {
    font-size: 0.56rem;
    padding: 2px 7px;
    transform: rotate(-10deg);
  }

  .streamer-section.live {
    box-shadow: 0 0 20px #FF1744, inset 0 0 10px rgba(255, 23, 68, 0.1);
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.8rem 2.5%;
  }

  .meme-card {
    border: 2px solid var(--lime);
    border-radius: 8px;
    aspect-ratio: 1;
  }

  .meme-card img {
    padding: 6px;
  }

  .meme-view-btn {
    right: 8px;
    bottom: 8px;
    font-size: 0.62rem;
    padding: 4px 7px;
    border-width: 1px;
  }

  .meme-lightbox-nav {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .meme-lightbox-close {
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
  }

  .meme-lightbox-actions {
    margin-top: 8px;
    width: 98%;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .meme-lightbox-action {
    width: 100%;
    max-width: none;
    font-size: 0.64rem;
    padding: 6px 7px;
    border-width: 2px;
  }

  #meme-lightbox-download,
  #meme-lightbox-download-zip {
    width: 100%;
  }

  .meme-lightbox-frame {
    width: 94vw;
    height: 50vh;
  }

  @media (hover: hover) {
    .meme-card:hover {
      transform: scale(1.01);
    }
  }

  .meme-card.selected {
    transform: scale(1.02);
  }

  p {
    font-size: 0.95rem;
  }

  .credit {
    margin-top: 1.5rem;
    font-size: 0.8rem;
  }
}

/* MOBILE PERFORMANCE OPTIMIZATIONS */
@media (max-width: 768px) {
  .meme-card {
    transition: none; 
    will-change: auto; 
  }

  /* Reduce motion for battery saving */
  @media (prefers-reduced-motion: reduce) {
    .meme-card,
    .rotator img,
    .button,
    .live-text {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* ---------- Mini games (games.html) ---------- */
.games-hero {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.35rem 1rem 1.85rem;
  position: relative;
  border: 2px solid rgba(57, 255, 20, 0.4);
  background: linear-gradient(
    155deg,
    rgba(57, 255, 20, 0.1) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(255, 255, 0, 0.06) 100%
  );
  box-shadow:
    0 0 48px rgba(57, 255, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.games-hero::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), var(--yellow), var(--lime), transparent);
  opacity: 0.75;
}

.games-hero-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--yellow);
  text-shadow: 0 0 14px rgba(255, 255, 0, 0.4);
  opacity: 0.92;
}

.games-title {
  margin: 0;
  font-size: clamp(2.1rem, 6.5vw, 3.15rem);
  letter-spacing: 0.14em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow:
    0 0 22px rgba(57, 255, 20, 0.7),
    0 0 55px rgba(57, 255, 20, 0.32),
    2px 2px 0 rgba(0, 70, 0, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  body.games-page .games-title {
    animation: games-title-glow 3.8s ease-in-out infinite alternate;
  }
}

@keyframes games-title-glow {
  from {
    text-shadow:
      0 0 18px rgba(57, 255, 20, 0.55),
      0 0 42px rgba(57, 255, 20, 0.22),
      2px 2px 0 rgba(0, 70, 0, 0.5);
  }
  to {
    text-shadow:
      0 0 28px rgba(57, 255, 20, 0.9),
      0 0 72px rgba(57, 255, 20, 0.38),
      2px 2px 0 rgba(0, 100, 0, 0.6);
  }
}

.games-main {
  max-width: min(1320px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.games-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .games-layout {
    grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
    gap: 1.75rem;
  }

  .games-rail {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
}

.games-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.games-stage-column {
  min-width: 0;
}

@media (max-width: 959px) {
  .games-stage-column {
    order: -1;
  }

  .games-rail {
    order: 1;
  }
}

.games-stage-balance {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.5rem 0.05rem 0.65rem;
  border: none;
  border-bottom: 1px solid rgba(57, 255, 20, 0.32);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.games-stage-balance-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
}

.games-stage-balance-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  opacity: 0.85;
  text-transform: uppercase;
}

.games-stage-balance-value {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: bold;
  color: var(--lime);
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.45);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Mobile balance stays inline in the stage column (no sticky pinning). */

.games-stage-reset {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 7px 11px;
  cursor: pointer;
  flex-shrink: 0;
  color: #999;
  background: #101010;
  border: 2px solid #4a4a4a;
  border-radius: 4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .games-stage-reset:hover {
    border-color: var(--yellow);
    color: var(--yellow);
  }
}

.games-stage-reset:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.games-daily-stage-wrap {
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border: 2px solid rgba(255, 255, 0, 0.4);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 0, 0.08) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow: 0 0 18px rgba(255, 255, 0, 0.1);
}

.games-rakeback-stage {
  margin-bottom: 1rem;
  padding: 0.72rem 0.85rem 0.8rem;
  border: 2px solid rgba(120, 120, 135, 0.34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(85, 92, 110, 0.08) 0%, rgba(0, 0, 0, 0.46) 72%);
  box-shadow: 0 0 10px rgba(120, 120, 135, 0.06);
}

.games-rakeback-stage--active {
  border-color: rgba(0, 229, 255, 0.55);
  background: linear-gradient(145deg, rgba(0, 229, 255, 0.09) 0%, rgba(0, 0, 0, 0.46) 72%);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.16);
}

.games-rakeback-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.games-rakeback-row--sub {
  margin-top: 0.15rem;
  opacity: 0.8;
}

.games-rakeback-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.games-rakeback-val {
  color: #9ca3b7;
  font-size: 0.93rem;
  text-shadow: none;
}

.games-rakeback-stage--active .games-rakeback-val {
  color: #77f7ff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

/** Lifetime row is informational, not actionable — keep it muted even when the
 *  panel lights up for a claimable pool, so the cyan glow stays a CTA cue. */
.games-rakeback-row--life {
  margin-top: 0.15rem;
  opacity: 0.78;
}

.games-rakeback-stage--active .games-rakeback-row--life .games-rakeback-val {
  color: #9ca3b7;
  text-shadow: none;
}

.games-rakeback-sub {
  font-size: 0.74rem;
}

.games-rakeback-hint {
  margin: 0.45rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(154, 160, 176, 0.85);
}

.games-rakeback-stage--guest .games-rakeback-hint {
  color: rgba(57, 255, 20, 0.78);
}

.games-rakeback-stage--guest .games-rakeback-val,
.games-rakeback-stage--guest .games-rakeback-sub {
  opacity: 0.6;
}

.games-rakeback-btn {
  margin-top: 0.55rem;
  width: 100%;
  border-color: rgba(125, 125, 140, 0.45) !important;
  color: #9aa0b0 !important;
  background: rgba(20, 20, 25, 0.78) !important;
  box-shadow: none !important;
}

.games-rakeback-stage--active .games-rakeback-btn:not(:disabled) {
  border-color: rgba(0, 229, 255, 0.62) !important;
  color: #77f7ff !important;
  background: rgba(0, 55, 70, 0.34) !important;
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.22),
    inset 0 0 8px rgba(0, 229, 255, 0.12) !important;
}

.games-rakeback-btn:disabled {
  opacity: 1;
  cursor: default;
}

@media (hover: hover) {
  .games-rakeback-btn:hover,
  .games-rakeback-stage--active .games-rakeback-btn:not(:disabled):hover {
    border-color: inherit !important;
    color: inherit !important;
    background: inherit !important;
    box-shadow: inherit !important;
    transform: none !important;
  }
}

.games-daily-quests {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 0.95rem;
  border: 2px solid rgba(57, 255, 20, 0.26);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
}

.games-quest-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.games-quest-summary {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.84;
}

.games-quest-toggle {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.4);
  color: #ddd;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}

.games-quest-toggle:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.games-quest-toggle--active {
  border-color: rgba(57, 255, 20, 0.65);
  color: var(--lime);
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.15);
  background: rgba(57, 255, 20, 0.1);
}

.games-quest-body {
  margin-top: 0.35rem;
}

.games-quest-panel--collapsed {
  padding-bottom: 0.7rem;
}

.games-quest-closed-note {
  margin: 0.2rem 0 0.05rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.86;
  color: var(--lime);
}

.games-daily-quests-heading {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.games-daily-quests-sub {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  opacity: 0.78;
  line-height: 1.4;
}

.games-daily-quests-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.games-daily-quest-item {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(57, 255, 20, 0.12);
}

.games-daily-quest-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.games-daily-quest-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.games-daily-quest-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  text-align: left;
}

.games-daily-quest-title {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.25;
}

.games-daily-quest-flavor {
  font-size: 0.64rem;
  line-height: 1.3;
  opacity: 0.72;
}

.games-daily-quest-meta {
  font-size: 0.66rem;
  opacity: 0.76;
}

.games-daily-quest-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 0.45rem;
}

.games-daily-quest-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(57, 255, 20, 0.45), rgba(255, 230, 80, 0.55));
  border-radius: 4px;
  transition: width 0.28s ease;
}

.games-daily-quest-claim {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  border-radius: 6px;
  border: 2px solid var(--lime);
  background: rgba(57, 255, 20, 0.08);
  color: var(--lime);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.games-daily-quest-item--claimed .games-daily-quest-claim {
  opacity: 0.5;
  border-color: #555;
  color: #888;
}

@media (hover: hover) {
  .games-daily-quest-claim:not(:disabled):hover {
    background: rgba(57, 255, 20, 0.18);
  }
}

.games-daily-quest-claim:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.games-weekly-quests {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 0.95rem;
  border: 2px solid rgba(186, 120, 255, 0.35);
  border-radius: 8px;
  background: rgba(12, 6, 24, 0.42);
  box-shadow: 0 0 14px rgba(140, 80, 255, 0.08);
}

.games-weekly-quests-heading {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: rgba(216, 180, 255, 0.95);
}

.games-weekly-quests-sub {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  opacity: 0.78;
  line-height: 1.4;
}

.games-weekly-quests-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.games-weekly-quest-item {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(186, 120, 255, 0.14);
}

.games-weekly-quest-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.games-weekly-quest-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.games-weekly-quest-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  text-align: left;
}

.games-weekly-quest-title {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.25;
}

.games-weekly-quest-flavor {
  font-size: 0.64rem;
  line-height: 1.3;
  opacity: 0.74;
}

.games-weekly-quest-meta {
  font-size: 0.66rem;
  opacity: 0.76;
}

.games-weekly-quest-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 0.45rem;
}

.games-weekly-quest-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(160, 100, 255, 0.5), rgba(255, 200, 120, 0.45));
  border-radius: 4px;
  transition: width 0.28s ease;
}

.games-weekly-quest-claim {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  border-radius: 6px;
  border: 2px solid rgba(200, 150, 255, 0.75);
  background: rgba(120, 60, 200, 0.12);
  color: rgba(230, 200, 255, 0.95);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.games-weekly-quest-item--claimed .games-weekly-quest-claim {
  opacity: 0.5;
  border-color: #555;
  color: #888;
}

@media (hover: hover) {
  .games-weekly-quest-claim:not(:disabled):hover {
    background: rgba(160, 100, 255, 0.2);
  }
}

.games-weekly-quest-claim:focus-visible {
  outline: 2px solid rgba(255, 220, 120, 0.9);
  outline-offset: 2px;
}

.games-daily-stage-wrap:has(.js-games-daily:disabled) {
  border-color: rgba(90, 90, 90, 0.55);
  background: rgba(20, 20, 20, 0.65);
  box-shadow: none;
}

.games-daily-stage-wrap:has(.js-games-daily:disabled) .games-daily-stage-hint {
  opacity: 0.5;
  color: #888;
}

.games-daily-stage-hint {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  opacity: 0.9;
  color: var(--lime);
}

.games-daily-stage-btn {
  width: 100%;
  max-width: none;
  font-size: 1rem !important;
  padding: 14px 18px !important;
}

@media (min-width: 960px) {
  .games-daily-stage-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 0.4rem 0.65rem 0.45rem;
    margin-bottom: 0.85rem;
    border-width: 1px;
    border-color: rgba(255, 255, 0, 0.28);
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.045) 0%, rgba(0, 0, 0, 0.38) 100%);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.06);
  }

  .games-daily-stage-hint {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
  }

  .games-daily-stage-wrap .button.games-wallet-btn.games-daily-stage-btn {
    width: auto !important;
    max-width: none;
    margin: 0;
    font-size: 0.78rem !important;
    padding: 7px 12px !important;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.22);
  }
}

button.js-games-daily:disabled,
button.js-games-daily[disabled] {
  color: #777 !important;
  background: #141414 !important;
  border-color: #3a3a3a !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  opacity: 0.92;
}

@media (hover: hover) {
  button.js-games-daily:disabled:hover,
  button.js-games-daily[disabled]:hover {
    background: #141414 !important;
    color: #777 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

.games-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.games-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  padding: 0.65rem 0.6rem;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.2;
  border: 2px solid rgba(100, 100, 100, 0.45);
  background: #0a0a0a;
  color: #777;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    opacity 0.15s ease;
  touch-action: manipulation;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (min-width: 520px) {
  .games-tab {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
  }
}

@media (hover: hover) {
  .games-tab--bj:not([aria-selected='true']):hover {
    color: #d8b8e8;
    border-color: rgba(200, 140, 230, 0.48);
    background: rgba(200, 120, 255, 0.07);
    box-shadow: none;
  }

  .games-tab--crash:not([aria-selected='true']):hover {
    color: #f2a078;
    border-color: rgba(255, 105, 55, 0.52);
    background: rgba(255, 100, 50, 0.07);
    box-shadow: none;
  }

  .games-tab--coin:not([aria-selected='true']):hover {
    color: var(--lime);
    border-color: rgba(57, 255, 20, 0.45);
    background: rgba(57, 255, 20, 0.08);
  }

  .games-tab--rps:not([aria-selected='true']):hover {
    color: #ffffaa;
    border-color: rgba(230, 230, 0, 0.48);
    background: rgba(255, 255, 0, 0.06);
  }

  .games-tab--slots:not([aria-selected='true']):hover {
    color: #aef8ff;
    border-color: rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.08);
  }
}

.games-tab[aria-selected='true'] {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

.games-tab--coin[aria-selected='true'] {
  border-color: #39ff14;
  color: var(--lime);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.28);
}

.games-tab--rps[aria-selected='true'] {
  border-color: #e6e600;
  color: #ffffaa;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.22);
}

.games-tab--slots[aria-selected='true'] {
  border-color: #00e5ff;
  color: #c5fff9;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.28);
}

.games-tab--bj[aria-selected='true'] {
  border-color: #e8a4ff;
  color: #f6e0ff;
  box-shadow: 0 0 12px rgba(200, 120, 255, 0.22);
  letter-spacing: 0.06em;
}

.games-tab--crash[aria-selected='true'] {
  border-color: #ff6b35;
  color: #ffe4d4;
  box-shadow: 0 0 18px rgba(255, 90, 40, 0.42);
}

.games-tab:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.games-tab-panel {
  min-height: 1px;
}

.games-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.9;
  margin: 1rem 0 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.games-wallet-btn {
  font-size: 0.95rem !important;
  padding: 10px 18px !important;
}

.games-coin-streak-bar {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(57, 255, 20, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.48);
  box-shadow: inset 0 0 18px rgba(57, 255, 20, 0.06);
  text-align: left;
}

.games-coin-streak-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.games-coin-streak-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  opacity: 0.75;
}

.games-coin-streak-num {
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1;
  color: var(--lime);
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.45);
  font-variant-numeric: tabular-nums;
}

.games-coin-streak-suffix {
  font-size: 0.85rem;
  opacity: 0.82;
}

.games-coin-streak-next {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.88;
  text-align: left;
}

.games-coin-streak-cap {
  opacity: 0.6;
}

.games-coin-streak-row--best {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(57, 255, 20, 0.22);
  align-items: center;
}

.games-coin-streak-num--best {
  font-size: 1.35rem;
  margin-left: auto;
}

.games-win-streak-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 2px solid rgba(120, 120, 120, 0.38);
  background: rgba(0, 0, 0, 0.42);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.games-win-streak-bar--bj {
  border-color: rgba(200, 160, 255, 0.38);
  box-shadow: inset 0 0 14px rgba(200, 140, 255, 0.06);
}

.games-win-streak-bar--rps {
  border-color: rgba(255, 255, 0, 0.32);
  box-shadow: inset 0 0 14px rgba(255, 255, 0, 0.05);
}

.games-win-streak-bar--slots {
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.06);
}

.games-win-streak-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.games-win-streak-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

.games-win-streak-val {
  font-size: 1.05rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--games-card-accent);
  text-shadow: 0 0 10px var(--games-card-glow);
}

.games-win-streak-dot {
  opacity: 0.45;
  user-select: none;
}

.games-card {
  --games-card-accent: #39ff14;
  --games-card-glow: rgba(57, 255, 20, 0.26);
  --games-card-tint: rgba(57, 255, 20, 0.1);
  border: 3px solid var(--games-card-accent);
  padding: 1.25rem 1.5rem 1.5rem 1.65rem;
  margin-bottom: 2rem;
  background: linear-gradient(
    125deg,
    var(--games-card-tint) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.72) 100%
  );
  box-shadow:
    0 0 28px var(--games-card-glow),
    inset 0 0 40px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.games-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--games-card-accent), rgba(0, 0, 0, 0.4));
  box-shadow: 0 0 18px var(--games-card-accent);
}

.games-rules-details {
  margin: 0.35rem 0 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden; /* fallback for Safari < 16 */
  overflow: clip;
}

.games-rules-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid transparent;
  user-select: none;
}

.games-rules-summary::-webkit-details-marker {
  display: none;
}

.games-rules-summary::after {
  content: '▾';
  float: right;
  opacity: 0.82;
}

.games-rules-details[open] .games-rules-summary {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.games-rules-details[open] .games-rules-summary::after {
  content: '▴';
}

.games-rules-details .games-rules {
  margin: 0;
  padding: 0.55rem 0.65rem 0.65rem;
}

.games-card--coin {
  --games-card-accent: #39ff14;
  --games-card-glow: rgba(57, 255, 20, 0.28);
  --games-card-tint: rgba(57, 255, 20, 0.11);
}

@media (max-width: 768px) {
  .games-rules-details {
    margin-top: 0.25rem;
  }

  .games-rules-summary {
    font-size: 0.68rem;
    padding: 0.4rem 0.55rem;
  }

  .games-rules-details .games-rules {
    padding: 0.48rem 0.58rem 0.58rem;
  }
}

.games-card--rps {
  --games-card-accent: #ffff00;
  --games-card-glow: rgba(255, 255, 0, 0.22);
  --games-card-tint: rgba(255, 255, 0, 0.09);
}

.games-card--slots {
  --games-card-accent: #00e5ff;
  --games-card-glow: rgba(0, 229, 255, 0.26);
  --games-card-tint: rgba(0, 229, 255, 0.1);
}

.games-card--crash {
  --games-card-accent: #ff8f5a;
  --games-card-glow: rgba(255, 120, 60, 0.38);
  --games-card-tint: rgba(255, 100, 50, 0.1);
  overflow: visible;
  max-width: min(1020px, 100%);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* svh = small viewport height (stable — doesn't change as browser chrome shows/hides).
     Falls back to the 40rem floor on browsers without svh support. */
  min-height: clamp(40rem, 75svh, 56rem);
}
/* Browsers without svh: keep the old vh value */
@supports not (min-height: 1svh) {
  .games-card--crash {
    min-height: clamp(40rem, 75vh, 56rem);
  }
}
/* On narrow mobile the card doesn't need a forced min-height — let content breathe naturally */
@media (max-width: 540px) {
  .games-card--crash {
    min-height: 0;
  }
}

.games-card--crash .games-crash-stage {
  flex: 1 1 auto;
  min-height: 0;
}

.games-card--crash .games-result-dock {
  margin-top: auto;
}

.games-card--crash .games-action-btn {
  box-shadow:
    0 0 22px rgba(255, 130, 70, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.games-win-streak-bar--crash {
  border-color: rgba(255, 150, 100, 0.42);
  box-shadow: inset 0 0 14px rgba(255, 120, 60, 0.07);
}

.games-crash-chart {
  position: relative;
  --crash-rider-x: 8%;
  --crash-rider-y: 92%;
  --crash-rider-tilt: -10deg;
  /* % position on sprite: tail-side deck (surf art faces right; pivot = where board meets wave) */
  --crash-rider-ax: 43;
  --crash-rider-ay: 87;
  margin: 0 0 0.75rem;
  width: 100%;
  height: clamp(180px, 50vw, 304px);
  min-height: 160px;
  border-radius: 10px;
  overflow: visible;
  border: 1px solid rgba(255, 130, 85, 0.45);
  box-shadow:
    0 0 24px rgba(255, 90, 40, 0.15),
    inset 0 1px 0 rgba(255, 200, 160, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.games-crash-chart--running {
  border-color: rgba(255, 140, 95, 0.58);
  box-shadow:
    0 0 28px rgba(255, 100, 50, 0.28),
    inset 0 1px 0 rgba(255, 200, 160, 0.09);
}

.games-crash-chart--bust {
  border-color: rgba(255, 65, 65, 0.65);
  box-shadow:
    inset 0 0 26px rgba(255, 40, 40, 0.18),
    0 0 18px rgba(255, 50, 50, 0.2);
  animation: games-crash-bust-flash 0.45s ease-out 1;
}

.games-crash-chart--bust-safe {
  border-color: rgba(100, 220, 150, 0.58);
  box-shadow:
    inset 0 0 22px rgba(60, 200, 120, 0.12),
    0 0 20px rgba(70, 210, 130, 0.22);
  animation: games-crash-bust-safe-glow 0.5s ease-out 1;
}

@keyframes games-crash-bust-safe-glow {
  0% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes games-crash-bust-flash {
  0% {
    filter: brightness(1.35);
  }
  100% {
    filter: brightness(1);
  }
}

.games-crash-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.games-crash-rider {
  position: absolute;
  left: var(--crash-rider-x);
  top: var(--crash-rider-y);
  width: clamp(82px, 22.5vmin, 136px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: translate(
      calc(-1% * var(--crash-rider-ax)),
      calc(-1% * var(--crash-rider-ay))
    )
    rotate(var(--crash-rider-tilt));
  transform-origin: calc(1% * var(--crash-rider-ax)) calc(1% * var(--crash-rider-ay));
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .games-crash-rider {
    transition: none;
  }
}

.games-crash-chart-dyn-grids {
  pointer-events: none;
}

.games-crash-chart-dyn-grid {
  stroke: rgba(255, 175, 130, 0.34);
  stroke-width: 0.45;
  stroke-dasharray: 1.5 2.4;
  vector-effect: non-scaling-stroke;
}

.games-crash-chart-grid-base {
  stroke: rgba(255, 190, 140, 0.38);
  stroke-width: 0.55;
}

.games-crash-chart-area {
  pointer-events: none;
}

.games-crash-chart-line {
  stroke-width: 3.15;
}

.games-crash-chart-head {
  fill: #fff3d4;
  stroke: rgba(255, 120, 70, 0.95);
  stroke-width: 0.4;
  filter: drop-shadow(0 0 5px rgba(255, 160, 90, 0.75));
}

.games-crash-chart--running .games-crash-chart-head {
  animation: games-crash-head-pulse 1.1s ease-in-out infinite;
}

@keyframes games-crash-head-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 160, 90, 0.65));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255, 220, 140, 0.95)) drop-shadow(0 0 18px rgba(255, 90, 40, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-crash-chart {
    opacity: 0.92;
  }

  .games-crash-chart--running .games-crash-chart-head {
    animation: none;
  }

  .games-crash-chart--bust {
    animation: none;
  }

  .games-crash-chart--bust-safe {
    animation: none;
  }
}

.games-crash-stage {
  margin: 1rem 0;
  padding: 1rem 0.85rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 130, 85, 0.42);
  background: radial-gradient(ellipse 130% 90% at 50% 0%, rgba(255, 95, 45, 0.16), rgba(0, 0, 0, 0.52));
  text-align: center;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.games-crash-stage--spectate {
  border-color: rgba(80, 220, 140, 0.55);
  box-shadow:
    0 0 22px rgba(60, 200, 120, 0.18),
    inset 0 0 0 1px rgba(100, 240, 160, 0.12);
  background: radial-gradient(ellipse 130% 90% at 50% 0%, rgba(40, 140, 90, 0.18), rgba(0, 0, 0, 0.52));
}

.games-crash-readouts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

/* Slots reserve height only while panels are active (see games.js toggles) — avoids idle gaps */
.games-crash-check-slot,
.games-crash-bank-slot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Always reserve worst-case height — BANK / Aura Check toggles no longer collapse these slots */
.games-crash-check-slot {
  min-height: clamp(2.65rem, 6.8vw, 3.35rem);
}

.games-crash-bank-slot {
  min-height: clamp(5rem, 13.5vw, 6.85rem);
}

.games-crash-mult {
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #ff9f70;
  text-shadow: 0 0 26px rgba(255, 120, 60, 0.55);
  line-height: 1.05;
  letter-spacing: 0.03em;
  margin: 0.05rem 0 0.5rem;
  min-height: clamp(3rem, 11vw, 4.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.games-crash-mult--concealed {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.games-crash-mult--spectate {
  color: #9effc8;
  text-shadow:
    0 0 20px rgba(100, 240, 160, 0.45),
    0 0 36px rgba(60, 200, 120, 0.25);
}

.games-crash-bank-summary {
  max-width: 22rem;
  margin: 0 auto;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  text-align: center;
  background: rgba(20, 55, 38, 0.42);
  border: 1px solid rgba(100, 210, 150, 0.38);
  box-shadow: inset 0 1px 0 rgba(160, 255, 200, 0.06);
}

.games-crash-bank-summary-line {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #d2ffe6;
  line-height: 1.45;
}

.games-crash-bank-summary-line--crash {
  opacity: 0.88;
  font-weight: 500;
}

.games-crash-bank-summary-line--crash.games-crash-bank-summary-line--final {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fffaf4;
  text-shadow: 0 0 14px rgba(120, 255, 180, 0.35);
  opacity: 1;
}

.games-crash-spectate-hint {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b4ffd0;
  text-shadow: 0 0 16px rgba(100, 240, 170, 0.55);
  margin: 0;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(30, 90, 55, 0.35);
  border: 1px solid rgba(100, 220, 150, 0.35);
}

.games-crash-check {
  font-size: clamp(1.35rem, 6vw, 2rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #fff2e6;
  text-shadow:
    0 0 22px rgba(255, 90, 40, 0.75),
    0 0 38px rgba(255, 60, 20, 0.35);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.15;
  min-height: 0;
}

.games-crash-check[hidden] {
  display: none !important;
}

.games-crash-hint {
  font-size: 0.74rem;
  opacity: 0.82;
  margin: 0 0 0.85rem;
  letter-spacing: 0.05em;
}

.games-crash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.games-crash-actions button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.games-crash-btn-main {
  min-width: clamp(148px, 52vw, 220px);
  font-weight: bold;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Bet labels: prevent double-tap zoom on rapid selections */
.games-bet-row--crash label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.games-crash-btn-main.games-crash-btn--cashout {
  border-color: #39ff14 !important;
  color: #c8ffc4 !important;
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.38) !important;
}

.games-crash-btn-main.games-crash-btn-main--spectate {
  opacity: 0.92;
  border-color: rgba(120, 210, 160, 0.55) !important;
  color: #b8efd0 !important;
  box-shadow: 0 0 16px rgba(80, 200, 130, 0.22) !important;
}

@media (hover: hover) {
  .games-crash-btn-main.games-crash-btn--cashout:hover {
    filter: brightness(1.06);
  }
}

.games-card--bj {
  --games-card-accent: #d4a5ff;
  --games-card-glow: rgba(200, 140, 255, 0.32);
  --games-card-tint: rgba(200, 140, 255, 0.1);
}

.games-card--bj .games-action-btn {
  box-shadow:
    0 0 22px rgba(200, 140, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.games-bj-table {
  margin: 1rem 0 0.75rem;
  padding: 0.85rem 0.75rem;
  border-radius: 8px;
  border: 2px solid rgba(200, 160, 255, 0.35);
  background: linear-gradient(180deg, rgba(30, 22, 40, 0.85) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.games-bj-hand {
  margin-bottom: 1rem;
}

.games-bj-hand:last-child {
  margin-bottom: 0;
}

.games-bj-hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.games-bj-hand-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  opacity: 0.8;
}

.games-bj-hand-score {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--games-card-accent);
  font-variant-numeric: tabular-nums;
}

.games-bj-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 4.25rem;
  align-items: flex-start;
}

.games-bj-card {
  width: clamp(2.6rem, 14vw, 3.15rem);
  height: clamp(3.6rem, 18vw, 4.35rem);
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(165deg, #2a2a32 0%, #101014 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: clamp(0.72rem, 3.2vw, 0.88rem);
  font-weight: bold;
  line-height: 1.15;
  color: #eee;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .games-bj-card--deal-in {
    animation: games-bj-card-deal-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .games-bj-card--hit-in {
    animation: games-bj-card-hit-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .games-bj-card--dealer-draw {
    animation: games-bj-card-dealer-draw 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes games-bj-card-deal-in {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(0.86) rotate(-2deg);
    filter: brightness(1.35) drop-shadow(0 0 10px rgba(212, 165, 255, 0.35));
  }
  72% {
    opacity: 1;
    transform: translateY(3px) scale(1.03) rotate(0.5deg);
    filter: brightness(1.12) drop-shadow(0 0 6px rgba(212, 165, 255, 0.2));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

@keyframes games-bj-card-hit-in {
  0% {
    opacity: 0;
    transform: translateX(-22px) translateY(6px) scale(0.9);
    filter: brightness(1.25);
  }
  70% {
    opacity: 1;
    transform: translateX(2px) translateY(-1px) scale(1.02);
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes games-bj-card-dealer-draw {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.88) rotate(1.5deg);
    filter: brightness(1.32) drop-shadow(0 0 10px rgba(212, 165, 255, 0.3));
  }
  68% {
    opacity: 1;
    transform: translateY(3px) scale(1.03) rotate(-0.5deg);
    filter: brightness(1.12) drop-shadow(0 0 6px rgba(212, 165, 255, 0.18));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

.games-bj-card--red {
  color: #ff7a8c;
}

.games-bj-card--back {
  background: linear-gradient(135deg, #1a2a6c 0%, #3a1a5c 50%, #0a0a12 100%);
  border-color: rgba(180, 140, 255, 0.5);
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.games-bj-actions {
  margin-top: 0.5rem;
}

.games-bj-play-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

#bj-play-buttons[hidden],
#bj-play-buttons.games-bj-play-row--concealed {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.games-bj-play-row .games-bj-btn {
  flex: 1 1 calc(25% - 0.4rem);
  min-width: 0;
  max-width: 10rem;
  margin: 0;
  box-sizing: border-box;
}

.games-bj-btn--deal {
  max-width: 320px;
}

#bj-deal-btn.games-bj-deal-hidden,
#bj-deal-btn[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.games-bj-player-hands {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.games-bj-split-hand {
  padding: 0.55rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(200, 160, 255, 0.22);
  background: rgba(0, 0, 0, 0.25);
}

.games-bj-split-hand--active {
  border-color: rgba(212, 165, 255, 0.65);
  box-shadow: 0 0 14px rgba(200, 140, 255, 0.2);
}

.games-bj-split-hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.games-bj-split-hand-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  opacity: 0.78;
}

.games-bj-hand-outcome {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  border: 1px solid rgba(170, 170, 170, 0.45);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  line-height: 1.2;
  color: #bdbdbd;
}

.games-bj-hand-outcome--win,
.games-bj-hand-outcome--blackjack {
  color: #a6ff9f;
  border-color: rgba(57, 255, 20, 0.6);
}

.games-bj-hand-outcome--push {
  color: #ffe98f;
  border-color: rgba(255, 230, 120, 0.6);
}

.games-bj-hand-outcome--lose,
.games-bj-hand-outcome--bust {
  color: #ff9a9a;
  border-color: rgba(255, 107, 107, 0.6);
}

.games-bj-play-row .button.games-action-btn {
  margin: 0;
  padding: 12px 14px !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em;
}

.games-card--bj .games-bj-btn--split:disabled,
.games-card--bj .games-bj-btn--split[disabled] {
  opacity: 0.45;
  border-color: #3d3d45 !important;
  color: #6a6a72 !important;
  background: #121218 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

@media (hover: hover) {
  .games-card--bj .games-bj-btn--split:disabled:hover,
  .games-card--bj .games-bj-btn--split[disabled]:hover {
    background: #121218 !important;
    color: #6a6a72 !important;
    border-color: #3d3d45 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

.games-card--bj .games-bj-btn--split:not(:disabled) {
  border-color: rgba(57, 255, 20, 0.85) !important;
  color: var(--lime) !important;
  background: rgba(12, 30, 12, 0.75) !important;
  box-shadow:
    0 0 14px rgba(57, 255, 20, 0.28),
    inset 0 0 8px rgba(57, 255, 20, 0.16) !important;
}

.games-card--bj .games-bj-btn--split:not(:disabled):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

@media (hover: hover) {
  .games-card--bj .games-bj-btn--split:not(:disabled):hover {
    background: rgba(16, 44, 16, 0.88) !important;
    box-shadow:
      0 0 18px rgba(57, 255, 20, 0.38),
      inset 0 0 10px rgba(57, 255, 20, 0.22) !important;
  }
}

.games-card--bj .games-bj-btn--double:disabled,
.games-card--bj .games-bj-btn--double[disabled] {
  opacity: 0.45;
  border-color: #3d3d45 !important;
  color: #6a6a72 !important;
  background: #121218 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

@media (hover: hover) {
  .games-card--bj .games-bj-btn--double:disabled:hover,
  .games-card--bj .games-bj-btn--double[disabled]:hover {
    background: #121218 !important;
    color: #6a6a72 !important;
    border-color: #3d3d45 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Narrow viewports: 4 equal flex columns squeeze "DOUBLE" — use 2×2 grid for readable labels */
@media (max-width: 720px) {
  .games-bj-play-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
  }

  .games-bj-play-row .games-bj-btn {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .games-bj-play-row .button.games-action-btn {
    padding: 12px 12px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.05em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .games-bj-play-row {
    grid-template-columns: 1fr;
  }
}

.games-card-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(57, 255, 20, 0.35);
  font-size: 0.95rem;
}

.games-card-balance-label {
  letter-spacing: 0.12em;
  opacity: 0.75;
  font-size: 0.8rem;
}

.games-card-balance-value {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--games-card-accent);
  text-shadow: 0 0 14px var(--games-card-glow);
  font-variant-numeric: tabular-nums;
}

/* Result strip — light status footer, not a second card */
.games-result-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem 0.95rem;
  margin-top: 1rem;
  padding: 0.5rem 0.35rem 0.35rem 1rem;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(57, 255, 20, 0.42); /* fallback */
  border-top: 1px solid color-mix(in srgb, var(--games-card-accent) 42%, rgba(90, 90, 90, 0.25));
  background: transparent;
  box-shadow: inset 3px 0 0 rgba(57, 255, 20, 0.55); /* fallback */
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--games-card-accent) 55%, transparent);
  backdrop-filter: none;
}

.games-result-dock:has(.games-outcome--win) {
  border-top-color: rgba(57, 255, 20, 0.35);
  box-shadow: inset 3px 0 0 rgba(57, 255, 20, 0.75);
}

.games-result-dock:has(.games-outcome--lose) {
  border-top-color: rgba(255, 110, 100, 0.32);
  box-shadow: inset 3px 0 0 rgba(255, 95, 90, 0.72);
}

.games-result-dock:has(.games-outcome--tie) {
  border-top-color: rgba(230, 230, 130, 0.3);
  box-shadow: inset 3px 0 0 rgba(255, 230, 100, 0.65);
}

.games-result-dock:has(.games-outcome--jackpot) {
  border-top-color: rgba(0, 220, 255, 0.38);
  box-shadow:
    inset 3px 0 0 rgba(0, 215, 255, 0.78),
    0 0 18px rgba(0, 200, 255, 0.12);
}

.games-result-dock > .games-outcome--dock {
  flex: 1 1 12rem;
  min-width: 0;
}

.games-result-dock .games-outcome-badge {
  font-size: clamp(1.05rem, 3.4vw, 1.32rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.25;
}

.games-card--crash .games-result-dock .games-outcome-badge {
  letter-spacing: 0.04em;
}

.games-card--crash #crash-outcome-sub {
  min-height: 3.15em;
}

.games-result-dock .games-outcome--pending .games-outcome-badge {
  letter-spacing: 0.18em;
}

.games-result-dock .games-outcome-sub {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  opacity: 0.76;
}

.games-result-dock-balance {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.22rem 0.38rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 0 0.06rem 0.9rem;
  border-left: 1px solid rgba(57, 255, 20, 0.32); /* fallback */
  border-left: 1px solid color-mix(in srgb, var(--games-card-accent) 32%, rgba(255, 255, 255, 0.05));
}

.games-result-dock-balance-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
  color: var(--games-card-accent);
}

.games-result-dock-balance-value {
  font-size: clamp(1.08rem, 3.8vw, 1.42rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--games-card-accent);
  text-shadow: 0 0 10px var(--games-card-glow); /* fallback */
  text-shadow: 0 0 10px color-mix(in srgb, var(--games-card-glow) 70%, transparent);
}

.games-result-dock-balance-unit {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.62;
  color: var(--games-card-accent); /* fallback */
  color: color-mix(in srgb, var(--games-card-accent) 65%, rgba(180, 180, 180, 0.45));
}

@media (max-width: 540px) {
  .games-result-dock {
    align-items: flex-start;
    padding: 0.5rem 0.35rem 0.25rem 1rem;
  }

  .games-result-dock-balance {
    margin-left: 0;
    margin-top: 0.05rem;
    padding-left: 0;
    padding-top: 0.42rem;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--games-card-accent) 26%, rgba(80, 80, 80, 0.2));
    width: 100%;
    justify-content: flex-end;
  }
}

.games-card h2 {
  margin-top: 0;
  letter-spacing: 0.1em;
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  color: var(--games-card-accent);
  text-shadow: 0 0 16px var(--games-card-glow);
}

.games-rules {
  font-size: 0.98rem;
  opacity: 0.88;
  line-height: 1.45;
  margin-bottom: 1rem;
}

.games-fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.95rem;
  margin-bottom: 1rem;
}

.games-label {
  flex: 0 0 auto;
  display: block;
  align-self: center;
  min-width: 4.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0.82;
  line-height: 1.25;
  text-align: left;
}

.games-choice-row,
.games-bet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.games-choice-row label,
.games-bet-row label {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 44px;
  min-width: 3.1rem;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid var(--games-card-accent, var(--lime)); /* fallback */
  border: 2px solid color-mix(in srgb, var(--games-card-accent, var(--lime)) 58%, rgba(80, 80, 80, 0.65));
  background: linear-gradient(168deg, rgba(57, 255, 20, 0.14) 0%, rgba(0, 0, 0, 0.78) 52%, rgba(0, 0, 0, 0.86) 100%); /* fallback */
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--games-card-accent, var(--lime)) 14%, rgba(0, 0, 0, 0.72)) 0%,
    rgba(0, 0, 0, 0.78) 52%,
    rgba(0, 0, 0, 0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  color: var(--games-card-accent, var(--lime)); /* fallback */
  color: color-mix(in srgb, var(--games-card-accent, var(--lime)) 72%, #f2ffe8);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px var(--games-card-glow, rgba(57, 255, 20, 0.3)); /* fallback */
  text-shadow: 0 0 12px color-mix(in srgb, var(--games-card-glow, rgba(57, 255, 20, 0.3)) 80%, transparent);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.games-choice-row label:has(input:focus-visible),
.games-bet-row label:has(input:focus-visible) {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

@media (hover: hover) {
  .games-choice-row label:hover,
  .games-bet-row label:hover {
    border-color: var(--yellow); /* fallback */
    border-color: color-mix(in srgb, var(--yellow) 82%, var(--games-card-accent, var(--lime)));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 0 18px var(--games-card-glow, rgba(255, 255, 80, 0.2)); /* fallback */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 0 18px color-mix(in srgb, var(--games-card-glow, rgba(255, 255, 80, 0.2)) 75%, transparent);
    transform: translateY(-2px);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .games-choice-row label:hover,
  .games-bet-row label:hover {
    transform: none;
  }
}

.games-bet-row label.games-bet-active,
.games-choice-row label.games-bet-active,
.games-choice-row label:has(input:checked) {
  border-color: var(--games-card-accent, var(--lime));
  background: linear-gradient(168deg, rgba(57, 255, 20, 0.32) 0%, rgba(57, 255, 20, 0.12) 100%); /* fallback */
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--games-card-accent, var(--lime)) 32%, rgba(0, 0, 0, 0.45)) 0%,
    color-mix(in srgb, var(--games-card-accent, var(--lime)) 12%, rgba(0, 0, 0, 0.75)) 100%
  );
  box-shadow:
    0 0 22px var(--games-card-glow, rgba(57, 255, 20, 0.32)),
    inset 0 1px 0 rgba(255, 255, 255, 0.1); /* fallback */
  box-shadow:
    0 0 22px var(--games-card-glow, rgba(57, 255, 20, 0.32)),
    inset 0 0 18px color-mix(in srgb, var(--games-card-glow, transparent) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fdfef8;
}

.games-choice-row input,
.games-bet-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.games-rps-row label {
  font-size: 1.65rem;
  letter-spacing: normal;
  min-width: 3.75rem;
  padding: 12px 18px;
}

/* Courier body font has no glyphs for many emoji planes; use system emoji fonts here */
body.games-page .games-display,
body.games-page .games-coin-face-inner,
body.games-page .games-rps-battle-emoji,
body.games-page .games-house,
body.games-page .games-rps-row label,
body.games-page .games-slot-reel {
  font-family:
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Apple Color Emoji',
    'Noto Color Emoji',
    'Twemoji Mozilla',
    'Segoe UI',
    sans-serif;
}

.games-display {
  font-size: 1.75rem;
  text-align: center;
  margin: 1rem 0;
  min-height: 2.2rem;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgba(57, 255, 20, 0.35);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.08);
}

.games-coin-flip-shell.games-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
}

.games-coin-flip-stage {
  width: 5.75rem;
  height: 5.75rem;
  -webkit-perspective: 880px;
  perspective: 880px;
  perspective-origin: 50% 50%;
}

.games-coin-3d {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.games-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 235, 0.35), rgba(60, 60, 60, 0.45) 45%, rgba(12, 12, 12, 0.85) 100%);
  border: 3px solid rgba(255, 235, 100, 0.45);
  box-shadow:
    inset 0 -6px 16px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(57, 255, 20, 0.12);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.games-coin-face-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.games-coin-mark {
  display: inline-block;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 50%;
}

.games-coin-mark--heads {
  background: var(--lime);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 0 6px rgba(57, 255, 20, 0.5);
}

.games-coin-mark--tails {
  border: 0.17rem solid rgba(255, 246, 188, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 4px rgba(255, 245, 170, 0.35);
}

.games-coin-face .games-coin-label {
  font-size: 0.58rem;
  font-family: inherit;
  letter-spacing: 0.18em;
  font-weight: bold;
}

.games-coin-face--tails {
  transform: rotateY(180deg);
}

.games-display.games-flash {
  animation: games-flash 0.45s ease-out;
}

.games-coin-flip-shell.games-display.games-flash {
  animation: games-coin-flash-shell 0.52s ease-out;
}

@keyframes games-flash {
  0% { color: var(--yellow); transform: scale(1.08); }
  100% { color: var(--lime); transform: scale(1); }
}

@keyframes games-coin-flash-shell {
  0% {
    border-color: rgba(255, 238, 80, 0.88);
    box-shadow:
      inset 0 0 26px rgba(255, 220, 60, 0.16),
      0 0 22px rgba(255, 230, 80, 0.28);
  }
  100% {
    border-color: rgba(57, 255, 20, 0.35);
    box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-coin-3d {
    transition-duration: 0ms !important;
  }
}

.games-rps-battle {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.4rem auto 0.55rem;
  max-width: 22rem;
}

.games-rps-battle-vs {
  align-self: center;
  font-weight: bold;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 140, 0.55);
  padding: 0 0.1rem;
}

.games-rps-battle-card {
  flex: 1;
  min-width: 7rem;
  text-align: center;
  padding: 0.5rem 0.45rem 0.58rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 70, 0.28);
  background: rgba(0, 0, 0, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 14px rgba(0, 0, 0, 0.35);
}

.games-rps-battle-card--you {
  border-color: rgba(57, 255, 20, 0.4);
}

.games-rps-battle-card--house {
  border-color: rgba(255, 120, 60, 0.35);
}

.games-rps-battle-label {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  font-weight: bold;
  opacity: 0.8;
  margin-bottom: 0.32rem;
}

.games-rps-battle-emoji {
  display: block;
  font-size: 2.45rem;
  line-height: 1.08;
}

.games-rps-battle-emoji-house.games-rps-battle-house-land {
  animation: games-rps-land-pop 0.42s cubic-bezier(0.2, 0.82, 0.25, 1) forwards;
}

@keyframes games-rps-land-pop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  55% {
    transform: scale(1.26);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-rps-battle-emoji-house.games-rps-battle-house-land {
    animation: none !important;
  }
}

.games-house {
  font-size: 1.2rem;
  text-align: center;
  margin: 0.75rem 0;
  padding: 0.55rem 0.75rem;
  border: 2px solid rgba(255, 255, 0, 0.35);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 16px rgba(255, 255, 0, 0.06);
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.25);
}

.games-action-btn {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0.5rem auto 0;
  font-size: 1.15rem !important;
  letter-spacing: 0.12em;
  box-shadow:
    0 0 20px rgba(57, 255, 20, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.games-card--rps .games-action-btn {
  box-shadow:
    0 0 20px rgba(255, 255, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.games-card--slots .games-action-btn {
  box-shadow:
    0 0 22px rgba(0, 229, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.games-slots-machine {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.games-slot-reel {
  font-size: clamp(2.2rem, 8vw, 3rem);
  width: clamp(4rem, 22vw, 5.5rem);
  height: clamp(4rem, 22vw, 5.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #00e5ff;
  border-radius: 4px;
  background: linear-gradient(165deg, #151a1a 0%, #050608 100%);
  box-shadow:
    inset 0 0 18px rgba(0, 229, 255, 0.12),
    0 0 16px rgba(0, 229, 255, 0.2),
    0 4px 0 rgba(0, 0, 0, 0.5);
}

.games-slot-icon {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.22));
}

.games-slot-fallback {
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1;
}

/* Per-game win / lose / tie result strip */
.games-outcome {
  margin-top: 0;
  padding: 0.85rem 1rem;
  text-align: center;
  border-radius: 6px;
  border: 2px solid rgba(120, 120, 120, 0.4);
  background: rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  min-width: 0;
}

.games-outcome--dock {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none !important;
  text-align: left;
}

.games-outcome--dock .games-outcome-sub {
  margin-top: 0.15rem;
}

.games-outcome-badge {
  display: block;
  font-size: 1.65rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

.games-outcome-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.4;
  opacity: 0.9;
  letter-spacing: 0.03em;
}

.games-outcome--pending {
  border-color: rgba(120, 120, 120, 0.45);
  color: #9a9a9a;
}

.games-outcome--dock.games-outcome--pending {
  border: none;
  background: transparent;
  box-shadow: none !important;
}

.games-outcome--pending .games-outcome-badge {
  letter-spacing: 0.4em;
}

.games-outcome--win {
  border-color: rgba(57, 255, 20, 0.9);
  color: var(--lime);
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.14) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    0 0 28px rgba(57, 255, 20, 0.32),
    inset 0 0 22px rgba(57, 255, 20, 0.07);
}

.games-outcome--dock.games-outcome--win {
  background: transparent;
  box-shadow: none !important;
}

.games-outcome--win .games-outcome-badge {
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.65);
}

.games-outcome--lose {
  border-color: rgba(255, 90, 90, 0.85);
  color: #ff8a8a;
  background: linear-gradient(180deg, rgba(255, 60, 60, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    0 0 22px rgba(255, 80, 80, 0.22),
    inset 0 0 18px rgba(255, 60, 60, 0.05);
}

.games-outcome--dock.games-outcome--lose {
  background: transparent;
  box-shadow: none !important;
}

.games-outcome--lose .games-outcome-badge {
  text-shadow: 0 0 14px rgba(255, 100, 100, 0.45);
}

.games-outcome--tie {
  border-color: rgba(255, 255, 0, 0.75);
  color: #ffffaa;
  background: linear-gradient(180deg, rgba(255, 255, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    0 0 22px rgba(255, 255, 0, 0.2),
    inset 0 0 18px rgba(255, 255, 0, 0.06);
}

.games-outcome--dock.games-outcome--tie {
  background: transparent;
  box-shadow: none !important;
}

.games-outcome--tie .games-outcome-badge {
  text-shadow: 0 0 14px rgba(255, 255, 0, 0.35);
}

.games-outcome--jackpot {
  border-color: #00e5ff;
  color: #b8fff9;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.16) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    0 0 32px rgba(0, 229, 255, 0.38),
    inset 0 0 24px rgba(0, 229, 255, 0.09);
}

.games-outcome--dock.games-outcome--jackpot {
  background: transparent;
  box-shadow: none !important;
}

.games-outcome--jackpot .games-outcome-badge {
  letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
  .games-outcome--pop {
    animation: games-outcome-pop 0.48s ease-out;
  }

  body.games-page .games-card-flash--win {
    animation: games-card-flash-win 0.85s ease-out;
  }

  body.games-page .games-card-flash--lose {
    animation: games-card-flash-lose 0.85s ease-out;
  }

  body.games-page .games-card-flash--tie {
    animation: games-card-flash-tie 0.85s ease-out;
  }

  body.games-page .games-card-flash--jackpot {
    animation: games-card-flash-jackpot 1s ease-out;
  }
}

@keyframes games-outcome-pop {
  0% {
    transform: scale(0.96);
    opacity: 0.88;
  }
  45% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes games-card-flash-win {
  0%,
  100% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(57, 255, 20, 0.45));
  }
}

@keyframes games-card-flash-lose {
  0%,
  100% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(0.92) drop-shadow(0 0 16px rgba(255, 80, 80, 0.35));
  }
}

@keyframes games-card-flash-tie {
  0%,
  100% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.12) drop-shadow(0 0 18px rgba(255, 255, 0, 0.35));
  }
}

@keyframes games-card-flash-jackpot {
  0%,
  100% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.25) drop-shadow(0 0 26px rgba(0, 229, 255, 0.55));
  }
  55% {
    filter: brightness(1.1) drop-shadow(0 0 18px rgba(0, 229, 255, 0.4));
  }
}

nav a[aria-current='page'] {
  border-color: var(--lime);
  background: rgba(57, 255, 20, 0.15);
  box-shadow: 0 0 12px var(--lime);
}

details.games-history-panel {
  border: 3px solid var(--lime);
  padding: 0;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.06) 0%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.65) 100%);
  box-shadow:
    0 0 22px rgba(57, 255, 20, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

details.games-history-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), var(--yellow), var(--lime), transparent);
  opacity: 0.65;
  z-index: 1;
  pointer-events: none;
}

.games-history-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin: 0;
  user-select: none;
}

.games-history-summary::-webkit-details-marker {
  display: none;
}

.games-history-summary::marker {
  content: '';
}

.games-history-summary-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.games-history-expand-hint {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--yellow);
  opacity: 0.85;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .games-history-expand-hint {
    display: none;
  }
}

.games-history-details-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(57, 255, 20, 0.2);
}

.games-history-details-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.65rem;
  margin-bottom: 0.25rem;
}

.games-history-heading {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
}

.games-history-clear {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  cursor: pointer;
  color: #aaa;
  background: #111;
  border: 2px solid #555;
  border-radius: 2px;
}

@media (hover: hover) {
  .games-history-clear:hover {
    border-color: var(--yellow);
    color: var(--yellow);
  }
}

.games-history-clear:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.games-history-hint {
  font-size: 0.82rem;
  opacity: 0.72;
  margin: 0 0 0.65rem;
}

.games-history-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-color: rgba(57, 255, 20, 0.45) rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
}

.games-history-list::-webkit-scrollbar {
  width: 8px;
}

.games-history-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

.games-history-list::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, 0.35);
  border-radius: 4px;
}

@media (hover: hover) {
  .games-history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(57, 255, 20, 0.55);
  }
}

.games-history-empty {
  margin: 0;
  padding: 0.75rem 0;
  font-size: 0.95rem;
  opacity: 0.75;
  text-align: center;
}

.games-history-row {
  display: grid;
  grid-template-columns: 4.2rem 2.8rem 1fr auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.5rem 0.55rem 0.5rem 0.65rem;
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(57, 255, 20, 0.22);
  border-left: 4px solid rgba(120, 120, 120, 0.5);
}

.games-history-row--up {
  border-left-color: var(--lime);
  background: linear-gradient(90deg, rgba(57, 255, 20, 0.08) 0%, rgba(0, 0, 0, 0.5) 40%);
}

.games-history-row--up.games-history-row--game-coin {
  border-left-color: #39ff14;
  background: linear-gradient(90deg, rgba(57, 255, 20, 0.1) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-rps {
  border-left-color: #e6e600;
  background: linear-gradient(90deg, rgba(255, 255, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-slots {
  border-left-color: #00e5ff;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-bj {
  border-left-color: #d4a5ff;
  background: linear-gradient(90deg, rgba(200, 140, 255, 0.12) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-daily {
  border-left-color: #f0e85a;
  background: linear-gradient(90deg, rgba(240, 220, 80, 0.12) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-crash {
  border-left-color: #ff9a62;
  background: linear-gradient(90deg, rgba(255, 140, 80, 0.12) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--up.games-history-row--game-quest {
  border-left-color: #b8ff7a;
  background: linear-gradient(90deg, rgba(130, 255, 100, 0.1) 0%, rgba(0, 0, 0, 0.5) 42%);
}

.games-history-row--down {
  border-left-color: #ff6b6b;
  background: linear-gradient(90deg, rgba(255, 80, 80, 0.08) 0%, rgba(0, 0, 0, 0.5) 40%);
}

.games-history-row--flat {
  border-left-color: rgba(255, 255, 0, 0.55);
}

.games-history-time {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.games-history-game {
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

.games-history-detail {
  opacity: 0.9;
  overflow-wrap: anywhere;
  white-space: normal;
}

.games-history-delta {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.games-history-after {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  text-align: right;
}

.games-history-row--up .games-history-delta {
  color: var(--lime);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.games-history-row--up.games-history-row--game-coin .games-history-delta {
  color: #39ff14;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.45);
}

.games-history-row--up.games-history-row--game-rps .games-history-delta {
  color: #ffff99;
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.35);
}

.games-history-row--up.games-history-row--game-slots .games-history-delta {
  color: #9cfbf0;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.games-history-row--up.games-history-row--game-bj .games-history-delta {
  color: #e8d4ff;
  text-shadow: 0 0 8px rgba(200, 140, 255, 0.45);
}

.games-history-row--up.games-history-row--game-daily .games-history-delta {
  color: #f5ee9a;
  text-shadow: 0 0 8px rgba(240, 220, 90, 0.35);
}

.games-history-row--up.games-history-row--game-crash .games-history-delta {
  color: #ffc8a8;
  text-shadow: 0 0 8px rgba(255, 140, 90, 0.4);
}

.games-history-row--up.games-history-row--game-quest .games-history-delta {
  color: #cfff9a;
  text-shadow: 0 0 8px rgba(140, 255, 100, 0.35);
}

.games-history-row--down .games-history-delta {
  color: #ff6b6b;
}

.games-history-row--flat .games-history-delta {
  color: #aaa;
}

@media (max-width: 520px) {
  .games-history-row {
    grid-template-columns: 3.25rem 2.4rem 1fr auto;
    grid-template-rows: auto auto;
    font-size: 0.76rem;
  }

  .games-history-time {
    grid-column: 1;
    grid-row: 1;
  }

  .games-history-game {
    grid-column: 2;
    grid-row: 1;
  }

  .games-history-delta {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }

  .games-history-after {
    grid-column: 4;
    grid-row: 1;
  }

  .games-history-detail {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }
}

@media (min-width: 960px) {
  .games-history-row {
    grid-template-columns: 3.8rem 2.6rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.2rem 0.45rem;
    font-size: 0.8rem;
  }

  .games-history-time {
    grid-column: 1;
    grid-row: 1;
  }

  .games-history-game {
    grid-column: 2;
    grid-row: 1;
  }

  .games-history-delta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .games-history-after {
    grid-column: 4;
    grid-row: 1;
  }

  .games-history-detail {
    grid-column: 1 / -1;
    grid-row: 2;
    line-height: 1.25;
  }
}

@media (max-width: 768px) {
  .games-wallet-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Small-screen games layout ── */
@media (max-width: 480px) {
  .games-card {
    padding: 0.9rem 1rem 1.1rem 1.1rem;
  }

  .games-card h2 {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }

  .games-rules {
    font-size: 0.88rem;
  }

  .games-slots-machine {
    gap: 0.5rem;
  }
}

@media (max-width: 380px) {
  /* Tab row — shrink text so all 5 tabs fit on one row even at 320 px */
  .games-tab {
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.3rem;
  }

  .games-card {
    padding: 0.75rem 0.85rem 0.95rem 0.9rem;
  }

  .games-rps-row label {
    font-size: 1.35rem;
    min-width: 3.1rem;
    padding: 10px 14px;
  }
}