/* ==========================================================================
   DAILY PUZZLE ARCADE — PRODUCTION STYLESHEET (styles.css)
   Designed for high engagement, zero Cumulative Layout Shift (CLS) on ad
   containers, mobile responsiveness, and AdSense / Ezoic compliance.
   ========================================================================== */

:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-elevated: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --accent-indigo: #6366f1;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --tile-correct: #16a34a;
  --tile-present: #ca8a04;
  --tile-absent: #475569;
  --radius-md: 12px;
  --radius-lg: 16px;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: #818cf8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   PUBLISHER MONETIZATION STATUS BAR (Top Strip)
   -------------------------------------------------------------------------- */
.publisher-bar {
  background: linear-gradient(90deg, #1e1b4b 0%, #0f172a 50%, #064e3b 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.35);
  padding: 8px 16px;
  font-size: 0.82rem;
}

.publisher-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pub-metrics {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pub-metric-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e2e8f0;
}

.pub-metric-item strong {
  color: #34d399;
  font-weight: 700;
}

.pub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pub-sm {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s;
}

.btn-pub-sm:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-pub-primary {
  background: #10b981;
  color: #06281e;
  border-color: #10b981;
}

.btn-pub-primary:hover {
  background: #34d399;
}

/* --------------------------------------------------------------------------
   MAIN SITE HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(30, 41, 59, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: -0.02em;
}

.brand-icon {
  background: linear-gradient(135deg, #6366f1, #10b981);
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-pill {
  background: var(--bg-elevated);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
}

/* --------------------------------------------------------------------------
   IAB AD CONTAINERS (CLS-Safe Reserved Heights + Responsive Layout)
   -------------------------------------------------------------------------- */
.ad-container-top {
  max-width: 1280px;
  margin: 16px auto 8px;
  padding: 0 20px;
}

.ad-unit-shell {
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
  border: 1px solid #334155;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s;
}

.ad-unit-shell.diag-border {
  border: 2px dashed #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.ad-label-bar {
  background: rgba(15, 23, 42, 0.65);
  padding: 4px 12px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ad-diag-pill {
  background: #f59e0b;
  color: #0f172a;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
}

.ad-YourAdHere {
  color: #94a3b8;
  font-size: 0.68rem;
}

.ad-leaderboard-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  min-height: 78px;
}

.ad-lb-headline {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.ad-lb-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ad-cta-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.ad-rect-body {
  display: block;
  padding: 16px;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  min-height: 215px;
}

.ad-rect-brand {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.ad-rect-headline {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}

.ad-rect-sub {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.ad-rect-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ad-rect-stats {
  font-size: 0.78rem;
  color: #fbbf24;
  font-weight: 600;
}

.ad-cta-btn-sm {
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
}

.ad-sky-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  min-height: 420px;
}

.ad-sky-badge {
  font-size: 0.82rem;
  font-weight: 800;
  color: #f472b6;
  text-transform: uppercase;
}

.ad-sky-headline {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 12px 0;
}

.ad-sky-list {
  list-style: none;
  margin: 12px 0 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.ad-sky-list li {
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   MAIN ARCADE TWO-COLUMN LAYOUT (Game Stage + Sticky Ad Sidebar)
   -------------------------------------------------------------------------- */
.arcade-layout {
  max-width: 1280px;
  margin: 16px auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 960px) {
  .arcade-layout {
    grid-template-columns: 1fr;
  }
  .ad-leaderboard-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ad-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 76px;
}

/* --------------------------------------------------------------------------
   GAME SWITCHER TABS
   -------------------------------------------------------------------------- */
.game-tabs-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .game-tabs-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

.game-tab-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-tab-btn:hover {
  border-color: #6366f1;
  color: #fff;
}

.game-tab-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(16, 185, 129, 0.18));
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.tab-title {
  font-weight: 800;
  font-size: 0.95rem;
}

.tab-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   GAME STAGE CARD
   -------------------------------------------------------------------------- */
.game-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.game-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.game-title-group h2 {
  font-size: 1.35rem;
  font-weight: 800;
}

.game-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 4px;
}

.game-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-game {
  background: var(--bg-elevated);
  color: #fff;
  border: 1px solid #475569;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-game:hover {
  background: #475569;
}

.btn-rewarded {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  border: none;
}

.btn-rewarded:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* --------------------------------------------------------------------------
   GAME 1: WORDGRID BOARD & KEYBOARD
   -------------------------------------------------------------------------- */
.wg-hint-box {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #fde68a;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  text-align: center;
}

.wg-board {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  margin: 12px 0 22px;
}

.wg-row {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: 7px;
}

.wg-tile {
  width: 56px;
  height: 56px;
  border: 2px solid #475569;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 800;
  text-transform: uppercase;
  background: #0f172a;
  color: #fff;
  user-select: none;
  transition: transform 0.12s, background-color 0.2s;
}

.wg-tile-filled {
  border-color: #94a3b8;
  transform: scale(1.03);
}

.wg-tile-correct {
  background: var(--tile-correct);
  border-color: var(--tile-correct);
}

.wg-tile-present {
  background: var(--tile-present);
  border-color: var(--tile-present);
}

.wg-tile-absent {
  background: var(--tile-absent);
  border-color: var(--tile-absent);
}

.wg-keyboard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.wg-kb-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: nowrap;
}

.wg-key {
  min-width: 38px;
  height: 48px;
  padding: 0 8px;
  border-radius: 6px;
  border: none;
  background: #475569;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
}

.wg-key-wide {
  min-width: 64px;
  font-size: 0.78rem;
}

.wg-key-correct {
  background: var(--tile-correct);
}

.wg-key-present {
  background: var(--tile-present);
}

.wg-key-absent {
  background: #1e293b;
  color: #64748b;
}

/* --------------------------------------------------------------------------
   GAME 2: LINKFOUR (16-Word Category Grid)
   -------------------------------------------------------------------------- */
.lf-solved-banner {
  border: 2px solid;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin-bottom: 10px;
}

.lf-solved-cat {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.lf-solved-words {
  font-weight: 600;
  font-size: 0.88rem;
  color: #f8fafc;
  margin-top: 3px;
}

.lf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}

.lf-cell {
  min-height: 68px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 10px;
  color: #f8fafc;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
  padding: 6px;
  text-transform: uppercase;
}

.lf-cell:hover {
  border-color: #6366f1;
}

.lf-cell-selected {
  background: #6366f1;
  border-color: #818cf8;
  color: #fff;
  transform: translateY(-2px);
}

.lf-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   GAME 3: BRAINBLITZ TRIVIA
   -------------------------------------------------------------------------- */
.bb-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.bb-question-box {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.bb-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .bb-options-grid {
    grid-template-columns: 1fr;
  }
}

.bb-option-btn {
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 10px;
  padding: 14px 16px;
  color: #f8fafc;
  font-size: 0.96rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s;
}

.bb-option-btn:hover {
  border-color: #6366f1;
}

.bb-opt-letter {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.bb-opt-correct {
  background: rgba(22, 163, 74, 0.25) !important;
  border-color: #22c55e !important;
}

.bb-opt-wrong {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: #ef4444 !important;
}

.bb-opt-eliminated {
  opacity: 0.3;
  text-decoration: line-through;
  pointer-events: none;
}

.bb-explanation-box {
  background: rgba(59, 130, 246, 0.14);
  border-left: 4px solid #3b82f6;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   GAME 4: ANAGRAM RUSH
   -------------------------------------------------------------------------- */
.ar-clue-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 18px;
}

.ar-slots-row,
.ar-pool-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}

.ar-slot {
  width: 52px;
  height: 52px;
  border: 2px dashed #64748b;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
}

.ar-slot-filled {
  border-style: solid;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.ar-tile {
  width: 52px;
  height: 52px;
  border: 2px solid #6366f1;
  border-radius: 10px;
  background: #312e81;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s;
}

.ar-tile:hover:not(:disabled) {
  transform: translateY(-3px);
}

.ar-tile-used {
  opacity: 0.25;
  cursor: default;
}

/* --------------------------------------------------------------------------
   EDITORIAL ARTICLES & STRATEGY GUIDES (AdSense High-Value Content Section)
   -------------------------------------------------------------------------- */
.editorial-section {
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-heading {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.section-subheading {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.article-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 8px;
}

.article-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}

.article-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.article-card ul {
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.article-card li {
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   MODALS (Rewarded Ad & Post-Game Summary) & TOASTS
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-card {
  background: var(--bg-secondary);
  border: 1px solid #475569;
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: 100%;
  padding: 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.emoji-share-box {
  background: #0f172a;
  padding: 12px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.95rem;
  margin: 12px 0;
  white-space: pre-wrap;
}

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #1e293b;
  border-left: 4px solid #6366f1;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s;
}

.toast-success {
  border-left-color: #10b981;
}

.toast-warn {
  border-left-color: #f59e0b;
}

.toast-fade {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #090d16;
  border-top: 1px solid var(--border-color);
  padding: 40px 20px;
  margin-top: 60px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   MUSIC ON/OFF TOGGLE BUTTON & EQUALIZER ANIMATION
   -------------------------------------------------------------------------- */
.btn-music-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid #6366f1;
  color: #e0e7ff !important;
  font-weight: 700;
  transition: all 0.18s ease;
}

.btn-music-toggle.music-on {
  background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
  border-color: #34d399;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.btn-music-toggle.music-off {
  background: rgba(51, 65, 85, 0.65);
  border-color: #475569;
  color: #94a3b8 !important;
}

.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.eq-bar {
  width: 2.5px;
  background: #ffffff;
  border-radius: 1px;
  animation: eqBounce 0.7s infinite ease-in-out alternate;
}

.eq-bar:nth-child(1) { height: 5px; animation-delay: 0s; }
.eq-bar:nth-child(2) { height: 11px; animation-delay: 0.2s; }
.eq-bar:nth-child(3) { height: 7px; animation-delay: 0.4s; }

@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* --------------------------------------------------------------------------
   GAME 5: BLOCKDROP TETRIS (10x20 Canvas + Hold/Next + Touch Controls)
   -------------------------------------------------------------------------- */
.tetris-workspace {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10px;
}

.tetris-board-wrap {
  position: relative;
  background: #070b14;
  border: 3px solid #475569;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(99, 102, 241, 0.12);
}

#tetris-canvas {
  display: block;
  background: #090e1a;
  border-radius: 6px;
}

.tetris-overlay {
  position: absolute;
  inset: 6px;
  background: rgba(9, 14, 26, 0.86);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  z-index: 5;
}

.tetris-side-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 185px;
  flex: 1;
  max-width: 240px;
}

.tetris-box-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.tetris-box-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.tetris-mini-canvas {
  display: block;
  margin: 0 auto;
  background: #090e1a;
  border-radius: 6px;
  border: 1px solid #1e293b;
}

.tetris-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tetris-stat-item {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.tetris-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #34d399;
}

.tetris-touch-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.btn-tetris-pad {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 10px;
  color: #f8fafc;
  font-weight: 800;
  font-size: 0.86rem;
  padding: 11px 10px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s, background 0.15s;
}

.btn-tetris-pad:hover {
  background: #334155;
  border-color: #6366f1;
}

.btn-tetris-pad:active {
  transform: scale(0.95);
}

.tetris-keys-help {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.5;
  text-align: left;
}

.tetris-keys-help kbd {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.72rem;
  color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   SOUNDTRACK STYLE SELECTOR (🎹 Arcade Synth vs 🎻 Classical Violin)
   -------------------------------------------------------------------------- */
.music-style-select {
  background: rgba(30, 41, 59, 0.95);
  color: #f8fafc;
  border: 1px solid #6366f1;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.music-style-select:hover,
.music-style-select:focus {
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
}

.btn-violin-switch {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid #a855f7;
  color: #f3e8ff !important;
}

.btn-violin-switch:hover {
  background: rgba(168, 85, 247, 0.35);
}

/* --------------------------------------------------------------------------
   UPGRADED GAME-OVER / RESULTS MODAL, NATIVE AD DOCK & ITCH.IO -> SURGE CTA
   -------------------------------------------------------------------------- */
.modal-card {
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
}

.btn-full-arcade-cta {
  background: linear-gradient(135deg, #10b981 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.btn-full-arcade-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.iframe-surge-banner {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(99, 102, 241, 0.24) 50%, rgba(245, 158, 11, 0.18) 100%);
  border: 1px solid #6366f1;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: #e2e8f0;
}

body.is-embedded-iframe .iframe-surge-banner {
  border-width: 2px;
  border-color: #34d399;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.28);
}

.btn-surge-top-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #052e16 !important;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: transform 0.15s, filter 0.15s;
}

.btn-surge-top-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-surge-endscreen-cta {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
  border: 1px solid #34d399;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 11px 16px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none !important;
  margin: 10px 0 14px;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
  transition: transform 0.15s, filter 0.15s;
}

.btn-surge-endscreen-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.postgame-native-wrap {
  margin: 12px 0;
  text-align: left;
}

/* Mobile & narrow viewport optimization: hide low-performing 160x600 skyscraper
   so NativeBanner (#31950186), SocialBar (#31950187), and 300x250 get top visibility */
@media (max-width: 960px) {
  [data-ad-slot="sidebarSkyscraper"] {
    display: none !important;
  }
}

/* Soundtrack download (ad-gated) */
.st-dl-wrap{margin:10px 0;text-align:center}
.st-dl-btn{background:#7c3aed;color:#fff;white-space:normal;max-width:100%}
.st-dl-mini{font-size:.8em;margin-left:6px}
.st-dl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.st-dl-box{background:#1e1b2e;color:#fff;border-radius:12px;padding:20px;max-width:380px;width:100%;text-align:center}
.st-dl-box a{color:#a78bfa}.st-dl-small{font-size:.8em;opacity:.8}
.st-dl-go[disabled]{opacity:.5;cursor:not-allowed}

/* ===== Arcade+ ===== */
.plus-share{margin:10px 0;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;text-align:center}
.plus-share-prompt{font-weight:700;margin-bottom:6px}
.plus-grid{white-space:pre-wrap;font-size:.85rem;text-align:left;background:rgba(0,0,0,.3);padding:8px;border-radius:8px;max-height:160px;overflow:auto}
.plus-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#7c3aed;color:#fff;padding:10px 16px;border-radius:8px;z-index:100001;max-width:90%;text-align:center}
.plus-notify{max-width:900px;margin:24px auto;padding:16px;border-radius:12px;background:rgba(124,58,237,.15);text-align:center}
.plus-email{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}.plus-email input{padding:8px;border-radius:6px;border:0;min-width:200px}
html[data-theme="midnight"] body{background:#020617 !important}
html[data-theme="neon"] body{background:radial-gradient(circle at 20% 0%,#3b0764,#020617 60%) !important}
html[data-theme="neon"] .btn-game{box-shadow:0 0 10px #e879f9;border-color:#e879f9 !important}
html[data-theme="sunset"] body{background:linear-gradient(160deg,#7c2d12,#4c0519 55%,#1e1b4b) !important}
html[data-theme="sunset"] .btn-game{border-color:#fb923c !important}
html[data-theme="forest"] body{background:linear-gradient(160deg,#052e16,#022c22 60%,#0c0a09) !important}
html[data-theme="forest"] .btn-game{border-color:#4ade80 !important}
@media (max-width:640px){.plus-theme-select{max-width:140px}.st-dl-mini{display:inline-block;margin-top:4px}}
.plus-nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px;background:rgba(0,0,0,.25)}
.plus-nav a{color:#c4b5fd;font-size:.85rem;padding:4px 8px;border-radius:6px;text-decoration:none}.plus-nav a:hover{background:rgba(255,255,255,.08)}
.plus-main{max-width:900px;margin:0 auto;padding:16px;color:#e2e8f0}.plus-main h1{font-size:1.8rem;margin:8px 0}.plus-main h2{margin-top:20px}
.plus-article li{margin:6px 0}.plus-lead{color:#cbd5e1}.plus-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.plus-status{font-weight:600}
.plus-game{display:flex;flex-direction:column;align-items:center;gap:10px;margin:12px 0}
.sdk-grid{display:grid;grid-template-columns:repeat(9,1fr);width:min(92vw,450px);border:2px solid #a78bfa}
.sdk-cell{aspect-ratio:1;border:1px solid rgba(255,255,255,.15);background:#1e1b2e;color:#a5f3fc;font-size:clamp(14px,4vw,22px);font-weight:700;cursor:pointer}
.sdk-cell.given{color:#fff}.sdk-cell.sel{background:#4c1d95}.sdk-cell.br{border-right:2px solid #a78bfa}.sdk-cell.bb{border-bottom:2px solid #a78bfa}
.sdk-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;width:min(92vw,450px)}.sdk-pad .btn-game{padding:8px 0;min-width:0}
.mg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(90vw,360px);padding:8px;background:#312e81;border-radius:10px;touch-action:none}
.mg-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.08);font-weight:800;font-size:clamp(16px,5vw,28px);color:#fff}
.mg-tile.t2{background:#6366f1}.mg-tile.t4{background:#7c3aed}.mg-tile.t8{background:#a21caf}.mg-tile.t16{background:#db2777}.mg-tile.t32{background:#e11d48}.mg-tile.t64{background:#ea580c}
.mg-tile.t128,.mg-tile.t256{background:#ca8a04}.mg-tile.t512,.mg-tile.t1024{background:#16a34a}.mg-tile.t2048{background:#0891b2;box-shadow:0 0 20px #67e8f9}
.mg-pad{text-align:center}.mg-pad .btn-game{min-width:56px}
.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(90vw,380px)}
.mm-card{aspect-ratio:1;font-size:clamp(22px,8vw,40px);border-radius:10px;border:0;background:#4c1d95;cursor:pointer}.mm-card.up{background:#f5f3ff}.mm-card.done{opacity:.55}
.ost-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:14px 0}
.ost-card{background:rgba(255,255,255,.05);border-radius:10px;padding:12px}.ost-card audio{width:100%}.ost-cover{float:right;margin:0 0 10px 12px;border-radius:12px;max-width:40%;height:auto}
.ost-buy{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;clear:none}
.plus-hub{max-width:1100px;margin:16px auto;padding:0 12px}.plus-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.plus-hub-grid a{display:block;padding:14px;border-radius:10px;background:rgba(124,58,237,.2);color:#fff;text-decoration:none}.plus-hub-grid a small{display:block;color:#cbd5e1}
.plus-badge-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.plus-badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);opacity:.45;font-size:.85rem}
.plus-badge small{display:block;font-size:.7rem;color:#cbd5e1}.plus-badge.got{opacity:1;background:rgba(234,179,8,.25)}
.plus-next{margin-top:10px}.plus-tomorrow{font-size:.85rem;color:#cbd5e1;margin-top:6px}
.plus-risk{background:linear-gradient(90deg,#b45309,#be123c);color:#fff;padding:8px 12px;text-align:center;font-size:.9rem;position:relative;z-index:50}.plus-risk button{background:none;border:0;color:#fff;margin-left:8px;cursor:pointer}
.hv-hive{text-align:center;line-height:0}.hv-cell{width:64px;height:64px;margin:3px;border:0;border-radius:50%;background:#e5e7eb;color:#111;font-size:1.5rem;font-weight:800;cursor:pointer}
.hv-cell.center{background:#facc15}.hv-word{font-size:1.6rem;font-weight:800;letter-spacing:3px;min-height:2rem}.hv-found{max-width:420px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.hv-found span{background:rgba(255,255,255,.08);padding:2px 8px;border-radius:6px}
.ms-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:min(92vw,400px)}.ms-cell{aspect-ratio:1;border:0;border-radius:4px;background:#4c1d95;color:#fff;font-weight:800;font-size:clamp(12px,4vw,20px);cursor:pointer}
.ms-cell.open{background:#1e1b2e}.ms-cell.n1{color:#60a5fa}.ms-cell.n2{color:#4ade80}.ms-cell.n3{color:#f87171}.ms-cell.n4{color:#c084fc}.ms-cell.n5{color:#fb923c}
.act-canvas{max-width:92vw;height:auto;border-radius:12px;border:2px solid #7c3aed;touch-action:none}.act-score{font-weight:700}
.px-art{image-rendering:pixelated;max-width:100%;height:auto;border-radius:10px;display:block;margin:0 auto 8px}.px-go{max-width:320px}
.plus-hub-grid a img{image-rendering:pixelated;width:40px;height:40px;float:left;margin-right:8px}
.poll-opt{display:block;width:100%;text-align:left;margin:8px 0;padding:12px;border-radius:10px;border:2px solid #7c3aed;background:rgba(124,58,237,.12);color:#fff;font-size:1rem;cursor:pointer}
.poll-bar{height:10px;border-radius:5px;background:#facc15;margin-top:6px}

.end-cta{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.9rem 0 .3rem;padding-top:.7rem;border-top:1px dashed rgba(255,255,255,.25)}
.end-cta .btn-game{flex:1 1 45%;text-align:center;text-decoration:none}
.end-cta .end-bonus{background:linear-gradient(90deg,#f7b733,#fc4a1a);color:#fff;font-weight:700;flex-basis:100%;animation:endpulse 1.6s infinite}
.end-cta .end-play{background:#2ecc71;color:#06210f;font-weight:700}
.end-cta .end-note{flex-basis:100%;opacity:.6;font-size:.72rem}
@keyframes endpulse{50%{transform:scale(1.03)}}
.rw-panel{margin:12px 0;padding:10px;border:1px dashed rgba(255,200,80,.5);border-radius:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.rw-title{font-weight:700}
.postgame-native-wrap:empty{display:none}