/* ==========================================================================
   PERSPECTIVE — 11-WORLD TOY-BOX STUDIO & STANDALONE WORLD ARCHITECTURE
   Crafted under /frontend-design & /web-artifacts-builder anti-slop rules
   Audited & Hardened by 20-Persona Expert & Playtester Team
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@700,600&f[]=cabinet-grotesk@800,900&f[]=general-sans@600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Big+Shoulders+Display:wght@800;900&family=Chakra+Petch:ital,wght@0,700;1,700&family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,900&family=Instrument+Serif:ital@0;1&family=Unbounded:wght@800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bungee&family=Exo+2:ital,wght@0,800;0,900;1,900&family=Orbitron:wght@800;900&family=Russo+One&family=Silkscreen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Black+Ops+One&family=JetBrains+Mono:wght@500;700;800&family=Lilita+One&family=MuseoModerno:wght@800;900&family=Outfit:wght@600;800;900&family=Playfair+Display:ital,wght@0,800;0,900;1,900&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@700;800&display=swap');

/* When Toy-Box Hub or Standalone World is active, hide legacy dashboard chrome */
body.tb-studio-active .nav-header,
body.tb-studio-active .master-mode-bar-section,
body.tb-studio-active .hero-stage-layout-2col,
body.tb-studio-active > .engine-section,
body.tb-studio-active .first-time-guide-banner,
body.tb-studio-active .feed-section,
body.tb-studio-active .editorial-footer,
body.tb-studio-active .mobile-bottom-dock,
body.tb-studio-active .mobile-bottom-adhesion,
body.tb-studio-active .ambient-glow,
body.tb-studio-active .hologram-screen-overlay {
  display: none !important;
}

body.tb-studio-active {
  background-color: #F7F4ED !important;
  background-image: radial-gradient(#DED8CC 1.25px, transparent 1.25px) !important;
  background-size: 24px 24px !important;
  color: #141413 !important;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#tb-portal-root,
#tb-standalone-world {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Creative Typography Skill: Optical Balance, Mixed-Style Pill Keywords & Variable Font Kinetic Hover */
.tb-p-title,
.tb-world-hero h1,
.tb-reparent-title,
.stage-title {
  text-wrap: balance;
  transition: letter-spacing 0.22s cubic-bezier(0.22, 1, 0.36, 1), font-variation-settings 0.25s ease;
}

.tb-p-sub,
.tb-world-hero p,
.tb-reparent-sub,
.tb-strata-info p {
  text-wrap: pretty;
}

.tb-kw-pill {
  display: inline-block;
  padding: 1px 9px 2px;
  border-radius: 8px;
  border: 2px solid #141413;
  box-shadow: 2.5px 2.5px 0px #141413;
  text-shadow: none !important;
  line-height: 1.08;
  vertical-align: baseline;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.tb-game-poster:hover .tb-kw-pill {
  transform: scale(1.06) rotate(0deg) !important;
  box-shadow: 4px 4px 0px #141413;
}

.tb-kw-serif {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.16em;
  letter-spacing: 0em !important;
  text-transform: none !important;
}

/* ==========================================================================
   /WEBGAME-ANIMATION & /GAME-ENGINE: AMBIENT BG, JUICE FX & SPRITE KEYFRAMES
   ========================================================================== */
#tb-ambient-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

#tb-juice-fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99995;
}

#tb-portal-root,
#tb-standalone-world {
  position: relative;
  z-index: 1;
}

@keyframes tbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tbPulseDash {
  to { stroke-dashoffset: -48px; }
}

@keyframes tbFloatBob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes tbSquashPop {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.16, 0.84); }
  65% { transform: scale(0.94, 1.06); }
  100% { transform: scale(1, 1); }
}

.tb-spin-slow {
  transform-box: fill-box;
  transform-origin: center;
  animation: tbSpin 6s linear infinite;
}

.tb-spin-fast {
  transform-box: fill-box;
  transform-origin: center;
  animation: tbSpin 0.85s linear infinite;
}

.tb-electric-flow {
  animation: tbPulseDash 0.45s linear infinite;
}

.tb-sprite-bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: tbFloatBob 2.6s ease-in-out infinite;
}

.tb-juice-squash {
  animation: tbSquashPop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ensure reparented classic sections/panels inside standalone stage are always visible */
#tb-world-stage .engine-section,
#tb-world-stage .arcade-panel {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}

/* Ensure app.js toast notifications clear .tb-world-topbar (z-index: 9000) */
.perspective-toast,
.scoreboard-toast {
  z-index: 100000 !important;
}

/* Floating Return-to-ToyBox pill when user visits Classic 34-Wonder Encyclopedia */
#tb-classic-return-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99990;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2.5px solid #141413;
  background: #FFE600;
  color: #141413;
  box-shadow: 4px 4px 0px #141413;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
}

body:not(.tb-studio-active) #tb-classic-return-fab {
  display: inline-flex;
}

/* ==================== TOY-BOX PORTAL HUB SHELL ==================== */
#tb-portal-root {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.tb-studio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 2.5px solid #141413;
  gap: 16px;
  flex-wrap: wrap;
}

.tb-brand-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.tb-studio-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #141413;
  margin: 0;
}

.tb-studio-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #57534E;
  letter-spacing: -0.01em;
}

.tb-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tb-tactile-pill {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 3px 3px 0px #141413;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.tb-tactile-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #141413;
}

.tb-tactile-pill:active {
  transform: scale(0.97);
  box-shadow: 1px 1px 0px #141413;
}

.tb-tactile-pill.primary {
  background: #FFE600;
}

/* ==================== SECTION BANNER ==================== */
.tb-section-banner {
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: -4px;
}

.tb-section-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #141413;
  color: #FFE600;
  padding: 6px 14px;
  border-radius: 8px;
}

.tb-section-line {
  flex: 1;
  height: 2px;
  background: #141413;
  opacity: 0.2;
}

/* ==================== 12-COLUMN POSTER GRID ==================== */
.tb-poster-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.tb-span-7 { grid-column: span 7; }
.tb-span-6 { grid-column: span 6; }
.tb-span-5 { grid-column: span 5; }
.tb-span-4 { grid-column: span 4; }
.tb-span-8 { grid-column: span 8; }
.tb-span-12 { grid-column: span 12; }

@media (max-width: 920px) {
  .tb-span-7, .tb-span-6, .tb-span-5, .tb-span-4, .tb-span-8, .tb-span-12 {
    grid-column: span 12;
  }
}

/* ==================== FULL-BLEED GAME POSTER CARD ==================== */
.tb-game-poster {
  position: relative;
  border: 2.5px solid #141413;
  border-radius: 20px;
  box-shadow: 5px 5px 0px #141413;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.tb-game-poster:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px #141413;
}

.tb-game-poster:active {
  transform: scale(0.985);
  box-shadow: 2px 2px 0px #141413;
}

.tb-poster-top {
  padding: 22px 24px 0 24px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.tb-corner-tag {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid #141413;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-poster-art {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Poster Specific Worlds — Every World Uniquely Colorful & Bespoke Typography */
.tb-p-seesaw {
  background-color: #DDF0FF;
  background-image:
    linear-gradient(rgba(12, 74, 110, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 74, 110, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 300px;
}
.tb-p-seesaw .tb-p-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #082F49;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-seesaw .tb-p-sub { font-size: 14.5px; font-weight: 600; color: #0369A1; margin: 0; }

.tb-p-abyss {
  background: linear-gradient(180deg, #0EA5E9 0%, #0284C7 45%, #0369A1 100%);
  color: #FFFFFF;
  min-height: 300px;
}
.tb-p-abyss .tb-p-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FEF08A;
  text-shadow: 2.5px 2.5px 0px #082F49;
  margin: 0 0 6px 0;
}
.tb-p-abyss .tb-p-sub { font-size: 14px; font-weight: 600; color: #E0F2FE; margin: 0; }

.tb-p-draw {
  background-color: #FFFDF7;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(20, 20, 19, 0.08) 23px, rgba(20, 20, 19, 0.08) 24px);
  min-height: 300px;
}
.tb-p-draw .tb-p-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #141413;
  text-shadow: 2px 2px 0px #FDE68A;
  margin: 0 0 6px 0;
}
.tb-p-draw .tb-p-sub { font-size: 14.5px; font-weight: 600; color: #7C2D12; margin: 0; }

.tb-p-domino {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  min-height: 300px;
}
.tb-p-domino .tb-p-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 34px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.98;
  color: #78350F;
  text-shadow: 2.5px 2.5px 0px #FDE68A;
  margin: 0 0 6px 0;
}
.tb-p-domino .tb-p-sub { font-size: 14.5px; font-weight: 600; color: #B45309; margin: 0; }

.tb-p-borehole {
  background: linear-gradient(180deg, #FDE68A 0%, #FDBA74 48%, #FB923C 100%);
  color: #431407;
  min-height: 290px;
}
.tb-p-borehole .tb-p-title {
  font-family: 'Bungee', cursive, sans-serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #431407;
  text-shadow: 2px 2px 0px #FEF08A;
  margin: 0 0 6px 0;
}
.tb-p-borehole .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #7C2D12; margin: 0; }

.tb-p-planet {
  background: linear-gradient(145deg, #EDE9FE 0%, #DDD6FE 55%, #C4B5FD 100%);
  color: #2E1065;
  min-height: 290px;
}
.tb-p-planet .tb-p-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 21px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #3B0764;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-planet .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #5B21B6; margin: 0; }

.tb-p-decibel {
  background-color: #FCE7F3;
  background-image:
    linear-gradient(rgba(219, 39, 119, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 39, 119, 0.10) 1px, transparent 1px),
    linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 55%, #F9A8D4 100%);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  color: #500724;
  min-height: 290px;
}
.tb-p-decibel .tb-p-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #831843;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-decibel .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #9D174D; margin: 0; }

.tb-p-slice { background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%); min-height: 280px; }
.tb-p-slice .tb-p-title {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #7F1D1D;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-slice .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #B91C1C; margin: 0; }

.tb-p-asteroid {
  background-color: #FEF08A;
  background-image:
    radial-gradient(rgba(180, 83, 9, 0.16) 1.5px, transparent 1.5px),
    linear-gradient(135deg, #FEF08A 0%, #FDE047 50%, #FBBF24 100%);
  background-size: 16px 16px, 100% 100%;
  color: #451A03;
  min-height: 280px;
}
.tb-p-asteroid .tb-p-title {
  font-family: 'Black Ops One', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #7C2D12;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-asteroid .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #92400E; margin: 0; }

.tb-p-scale {
  background-color: #ECFCCB;
  background-image:
    linear-gradient(rgba(26, 46, 5, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 46, 5, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, #ECFCCB 0%, #D9F99D 100%);
  background-size: 16px 16px, 16px 16px, 100% 100%;
  min-height: 280px;
}
.tb-p-scale .tb-p-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.98;
  color: #1A2E05;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-scale .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #365314; margin: 0; }

.tb-p-wealth {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  min-height: 205px;
  flex-direction: row;
  align-items: center;
  padding: 22px 28px;
  gap: 28px;
}
@media (max-width: 920px) {
  .tb-p-wealth { flex-direction: column; align-items: flex-start; }
}
.tb-p-wealth .tb-p-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #064E3B;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 8px 0;
}
.tb-p-wealth .tb-p-sub { font-size: 15px; font-weight: 600; color: #047857; line-height: 1.45; max-width: 470px; margin: 0; }

/* Wave 2: 7 New Viral Worlds Poster Styles — Vibrant & Distinct Typography */
.tb-p-wind {
  background-color: #A5F3FC;
  background-image:
    repeating-linear-gradient(90deg, rgba(8, 51, 68, 0.08) 0px, rgba(8, 51, 68, 0.08) 1px, transparent 1px, transparent 28px),
    linear-gradient(135deg, #CFFAFE 0%, #67E8F9 60%, #22D3EE 100%);
  color: #083344;
  min-height: 290px;
}
.tb-p-wind .tb-p-title {
  font-family: 'Chakra Petch', sans-serif;
  font-style: italic;
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #083344;
  text-shadow: -2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-wind .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #155E75; margin: 0; }

.tb-p-fit {
  background-color: #FFEDD5;
  background-image:
    linear-gradient(rgba(154, 52, 18, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 52, 18, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  color: #141413;
  min-height: 290px;
}
.tb-p-fit .tb-p-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #9A3412;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-fit .tb-p-sub { font-size: 14px; font-weight: 600; color: #C2410C; margin: 0; }

.tb-p-crucible {
  background: linear-gradient(135deg, #BAE6FD 0%, #E0F2FE 38%, #FFEDD5 62%, #FDBA74 100%);
  color: #141413;
  min-height: 285px;
}
.tb-p-crucible .tb-p-title {
  font-family: 'Russo One', sans-serif;
  font-size: 23px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #9A3412;
  text-shadow: -1.5px -1.5px 0px #FFFFFF, 2px 2px 0px #FDE047;
  margin: 0 0 6px 0;
}
.tb-p-crucible .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #0C4A6E; margin: 0; }

.tb-p-pulse {
  background-color: #A7F3D0;
  background-image:
    radial-gradient(rgba(6, 78, 59, 0.14) 1px, transparent 1px),
    linear-gradient(135deg, #D1FAE5 0%, #6EE7B7 60%, #34D399 100%);
  background-size: 18px 18px, 100% 100%;
  color: #064E3B;
  min-height: 285px;
}
.tb-p-pulse .tb-p-title {
  font-family: 'Silkscreen', monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #064E3B;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-pulse .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #065F46; margin: 0; }

.tb-p-photon {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #4338CA 100%);
  color: #FFFFFF;
  min-height: 285px;
}
.tb-p-photon .tb-p-title {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-size: 25px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #FFE600;
  text-shadow: 2.5px 2.5px 0px #1E1B4B;
  margin: 0 0 6px 0;
}
.tb-p-photon .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #E0F2FE; margin: 0; }

.tb-p-hamster {
  background-color: #FEF08A;
  background-image:
    linear-gradient(rgba(113, 63, 18, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 63, 18, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #FEF9C3 0%, #FDE047 55%, #BEF264 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  color: #422006;
  min-height: 285px;
}
.tb-p-hamster .tb-p-title {
  font-family: 'Lilita One', cursive, sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #9A3412;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-hamster .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #365314; margin: 0; }

.tb-p-quantum {
  background: linear-gradient(135deg, #F5D0FE 0%, #E9D5FF 50%, #99F6E4 100%);
  color: #3B0764;
  min-height: 285px;
}
.tb-p-quantum .tb-p-title {
  font-family: 'MuseoModerno', sans-serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #4A044E;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-quantum .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #581C87; margin: 0; }

.tb-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Studio Footer on Hub */
.tb-hub-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid #141413;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #57534E;
}

.tb-hub-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.tb-hub-footer-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #141413;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ==========================================================================
   STANDALONE WORLD VIEWPORT (100% IMMERSIVE BESPOKE GAME WORLD)
   ========================================================================== */
.tb-show-mobile {
  display: none;
}

.tb-tactile-pill,
.tb-corner-home {
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#tb-standalone-world {
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding: 18px 24px 56px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Sleek In-Flow Studio Bar (Never overlaps canvas on scroll) */
.tb-world-topbar {
  position: relative;
  max-width: 1060px;
  height: 48px;
  margin: 0 auto 16px auto;
  z-index: 9000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* 1-Tap 11-World Quick-Switcher Drawer */
.tb-world-drawer {
  max-width: 1060px;
  margin: 0 auto 18px auto;
  background: #141413;
  color: #F6F3EC;
  border: 2.5px solid #FFE600;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.45);
}

.tb-world-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #FFE600;
}

.tb-world-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.tb-drawer-item {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #3F3F46;
  background: #27272A;
  color: #F4F4F5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  text-align: left;
}

.tb-drawer-item.active,
.tb-drawer-item:hover {
  background: #FFE600;
  color: #141413;
  border-color: #141413;
}

.tb-drawer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.85;
}

/* Dual-Mode Segmented Tabs for Deep-Sea & Spend $100B */
.tb-dual-mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tb-dual-mode-tabs .tb-btn {
  background: #FFFFFF;
  color: #141413;
  flex: 1 1 auto;
}

.tb-dual-mode-tabs .tb-btn.active {
  background: #FFE600;
  color: #141413;
}

/* End-of-World Up Next Chain Bar */
.tb-up-next-strip {
  max-width: 1060px;
  margin: 28px auto 0;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid currentColor;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tb-up-next-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tb-up-next-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tb-corner-home {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2.5px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 3px 3px 0px #141413;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tb-corner-home:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #141413;
}

.tb-corner-home:active {
  transform: scale(0.97);
  box-shadow: 1px 1px 0px #141413;
}

.tb-world-container {
  max-width: 1060px;
  margin: 0 auto;
}

/* Reusable Tactile Game Controls inside Standalone Worlds */
.tb-card-frame {
  border: 2.5px solid #141413;
  border-radius: 20px;
  box-shadow: 6px 6px 0px #141413;
  overflow: hidden;
}

.tb-btn {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2.5px solid #141413;
  box-shadow: 4px 4px 0px #141413;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #141413;
}

.tb-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #141413;
}

/* High-contrast Neo-Pop framing & dark-ink enforcement for reparented classic worlds */
#tb-standalone-world .stage-wrapper::before,
#tb-standalone-world .wealth-card-panel::before,
#tb-standalone-world .abyss-card-panel::before,
#tb-standalone-world .what-buys-panel::before {
  display: none !important;
}

#tb-standalone-world .stage-wrapper,
#tb-standalone-world .wealth-card-panel,
#tb-standalone-world .abyss-card-panel,
#tb-standalone-world .game-control-sidebar,
#tb-standalone-world .wealth-calculator-box,
#tb-standalone-world .blitz-header-strip,
#tb-standalone-world .blitz-item-card {
  background: #FFFFFF !important;
  color: #141413 !important;
  border: 2.5px solid #141413 !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0px #141413 !important;
}

#tb-standalone-world .game-arena-stage {
  border: 2.5px solid #141413 !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0px #141413 !important;
}

#tb-standalone-world .abyss-depth-controller,
#tb-standalone-world .game-stat-card,
#tb-standalone-world .comparison-selectors {
  background: #F8FAFC !important;
  color: #141413 !important;
  border: 2px solid #141413 !important;
}

#tb-standalone-world .stage-title,
#tb-standalone-world .wealth-card-panel h2,
#tb-standalone-world .wealth-card-panel h3,
#tb-standalone-world .abyss-card-panel .stage-title,
#tb-standalone-world .game-control-sidebar h3 {
  color: #141413 !important;
}

#tb-standalone-world .stage-subtitle,
#tb-standalone-world .abyss-card-panel .stage-subtitle {
  color: #334155 !important;
}

/* Bespoke Per-World Standalone Typography System (All 18 Worlds) */
#tb-standalone-world[data-world="seesaw"] .tb-reparent-title,
#tb-standalone-world[data-world="seesaw"] .stage-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="deep-sea"] .tb-reparent-title,
#tb-standalone-world[data-world="deep-sea"] .stage-title {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="draw-scale"] .tb-world-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-shadow: 2.5px 2.5px 0px #FDE68A;
}
#tb-standalone-world[data-world="domino-chain"] .tb-world-hero h1 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  text-shadow: 3px 3px 0px #FDE68A;
}
#tb-standalone-world[data-world="wind-tunnel"] .tb-world-hero h1,
#tb-standalone-world[data-world="wind-tunnel"] .tb-strata-info h2 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-shadow: -2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="does-it-fit"] .tb-world-hero h1,
#tb-standalone-world[data-world="does-it-fit"] .tb-strata-info h2 {
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FED7AA;
}
#tb-standalone-world[data-world="borehole"] .tb-world-hero h1,
#tb-standalone-world[data-world="borehole"] .tb-strata-info h2 {
  font-family: 'Bungee', cursive, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 2.5px 2.5px 0px #FDE68A;
}
#tb-standalone-world[data-world="planet-drop"] .tb-world-hero h1,
#tb-standalone-world[data-world="planet-drop"] .tb-planet-card strong {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  text-shadow: 2px 2px 0px #FFFFFF;
}
#tb-standalone-world[data-world="decibel-chamber"] .tb-world-hero h1,
#tb-standalone-world[data-world="decibel-chamber"] .tb-strata-info h2 {
  font-family: 'Audiowide', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="absolute-crucible"] .tb-world-hero h1,
#tb-standalone-world[data-world="absolute-crucible"] .tb-strata-info h2 {
  font-family: 'Russo One', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-shadow: -2px -1px 0px #BAE6FD, 2.5px 2.5px 0px #FDE047;
}
#tb-standalone-world[data-world="since-you-opened"] .tb-world-hero h1 {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="slow-mo-photon"] .tb-world-hero h1,
#tb-standalone-world[data-world="slow-mo-photon"] .tb-strata-info h2 {
  font-family: 'Exo 2', sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="hamster-grid"] .tb-world-hero h1,
#tb-standalone-world[data-world="hamster-grid"] .tb-strata-info h2 {
  font-family: 'Lilita One', cursive, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="quantum-shrink"] .tb-world-hero h1,
#tb-standalone-world[data-world="quantum-shrink"] .tb-strata-info h2 {
  font-family: 'MuseoModerno', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="laser-slice"] .tb-reparent-title,
#tb-standalone-world[data-world="laser-slice"] .stage-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="asteroid-launcher"] .tb-reparent-title,
#tb-standalone-world[data-world="asteroid-launcher"] .stage-title {
  font-family: 'Black Ops One', system-ui, sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="size-showdown"] .tb-reparent-title,
#tb-standalone-world[data-world="size-showdown"] .stage-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}
#tb-standalone-world[data-world="spend-100b"] .tb-reparent-title,
#tb-standalone-world[data-world="spend-100b"] .wealth-card-panel h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 2.5px 2.5px 0px #FFFFFF;
}

/* ==========================================================================
   MOBILE & IPHONE ERGONOMICS OVERHAUL (<= 768px) — AUDITED BY 4 MOBILE EXPERTS
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Suppress desktop scrollbars on mobile & iPhone simulator */
  html,
  body,
  body.tb-studio-active,
  #tb-portal-root,
  #tb-standalone-world {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body.tb-studio-active::-webkit-scrollbar,
  #tb-portal-root::-webkit-scrollbar,
  #tb-standalone-world::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .tb-hide-mobile {
    display: none !important;
  }

  .tb-show-mobile {
    display: inline !important;
  }

  .tb-mobile-planet-detail.tb-show-mobile {
    display: block !important;
  }

  /* 2. Tight 2-Row Mobile Hub Header (< 84px total height so 2.5 cards show above the fold) */
  #tb-portal-root {
    padding: 10px 12px 36px;
  }

  .tb-studio-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "wordmark controls"
      "tagline  tagline";
    align-items: center;
    gap: 4px 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom-width: 2px;
  }

  .tb-brand-group {
    display: contents;
  }

  .tb-studio-wordmark {
    grid-area: wordmark;
    font-size: 21px;
    line-height: 1;
  }

  .tb-header-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    gap: 3.5px;
    flex-wrap: nowrap;
  }

  .tb-header-controls .tb-tactile-pill {
    font-size: 10px;
    padding: 4px 6px;
    gap: 3px;
    box-shadow: 2px 2px 0px #141413;
  }

  .tb-studio-tagline {
    grid-area: tagline;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3. Dense Snappy Mobile Bento Cards (192px-204px height — Zero Dead SVG Whitespace) */
  .tb-poster-grid {
    gap: 12px;
  }

  .tb-game-poster {
    min-height: 194px !important;
    border-radius: 16px;
    border-width: 2px;
    box-shadow: 3.5px 3.5px 0px #141413;
  }

  .tb-poster-top {
    padding: 12px 14px 0 14px;
    gap: 8px;
  }

  .tb-corner-tag {
    font-size: 9.5px;
    padding: 3px 7px;
    border-radius: 5px;
  }

  .tb-game-poster .tb-p-title {
    font-size: 19.5px !important;
    line-height: 1.15 !important;
    margin: 0 0 3px 0 !important;
  }

  .tb-game-poster .tb-p-sub {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tb-poster-art {
    height: 124px !important;
    padding: 0 4px;
  }

  .tb-poster-art svg {
    height: 122px !important;
    width: 100%;
  }

  .tb-section-banner {
    gap: 8px;
    margin-top: 2px;
    margin-bottom: -2px;
  }

  .tb-section-badge {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 6px;
  }

  .tb-p-wealth {
    min-height: 190px !important;
    padding: 12px 14px 10px 14px;
    gap: 8px;
  }

  .tb-p-wealth svg {
    height: auto !important;
    max-height: 102px;
    width: 100%;
  }

  /* 4. Sleek Single-Line Standalone World Topbar (Never wraps, never overlaps game canvas) */
  #tb-standalone-world {
    padding: 8px 10px 28px !important;
  }

  .tb-world-topbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 42px;
    margin: 0 auto 8px auto;
    padding: 0 0 6px 0;
    border-bottom: 1.5px solid rgba(128, 128, 128, 0.22);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .tb-corner-home {
    font-size: 13px;
    height: 32px;
    padding: 0 10px;
    gap: 4px;
    box-shadow: 2px 2px 0px #141413;
  }

  .tb-topbar-actions {
    gap: 3.5px;
    flex-wrap: nowrap;
  }

  .tb-world-topbar .tb-tactile-pill {
    font-size: 11px;
    height: 32px;
    padding: 0 9px;
    gap: 3px;
    box-shadow: 2px 2px 0px #141413;
  }

  .tb-world-topbar .tb-audio-pill {
    width: 32px;
    padding: 0;
    justify-content: center;
    font-size: 13px;
  }

  .tb-world-drawer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .tb-drawer-item {
    font-size: 11px;
    padding: 6px 8px;
  }

  /* 5. Collapse Duplicate Wrapper Headers on Reparented Classic Worlds */
  .tb-reparent-header {
    margin-bottom: 6px !important;
  }

  .tb-reparent-header .tb-reparent-title,
  .tb-reparent-header h1 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .tb-reparent-header .tb-reparent-sub,
  .tb-reparent-header p {
    display: none !important;
  }

  /* 6. Classic Reparented Game Arena & Control Deck (100% Single-Screen Thumb-Zone Fit) */
  #tb-world-stage .engine-section,
  #tb-world-stage .arcade-panel {
    margin: 0 0 10px 0 !important;
  }

  #tb-standalone-world .arcade-game-layout {
    gap: 8px !important;
    margin-top: 2px !important;
  }

  #tb-standalone-world .game-arena-stage {
    min-height: 195px !important;
    height: 205px !important;
    max-height: 215px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0px #141413 !important;
  }

  #tb-standalone-world .game-arena-stage svg {
    max-height: 195px !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Single-line floating HUD badges inside Seesaw, Laser Slice & Asteroid canvases */
  #seesaw-stage-arena > div:first-child,
  #slice-stage-arena > div:first-child,
  #asteroid-stage-arena > div:first-child {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  #seesaw-stage-arena > div:first-child > div,
  #slice-stage-arena > div:first-child > div,
  #asteroid-stage-arena > div:first-child > div {
    padding: 3px 6px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #seesaw-titan-name,
  #seesaw-drop-name,
  #slice-target-name,
  #slice-pos-readout,
  #asteroid-name-badge,
  #asteroid-target-badge {
    font-size: 9.5px !important;
  }

  #seesaw-titan-mass,
  #seesaw-drop-mass-badge {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
  }

  /* Ultra-compact Control Sidebar */
  #tb-standalone-world .game-control-sidebar {
    padding: 10px 11px !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0px #141413 !important;
    gap: 5px !important;
  }

  #tb-standalone-world .game-control-sidebar > div:first-child > div:first-child {
    display: none !important;
  }

  #tb-standalone-world .game-control-sidebar h3 {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  #tb-standalone-world .game-stat-card {
    padding: 6px 10px !important;
    margin-bottom: 5px !important;
    border-radius: 10px !important;
  }

  #tb-standalone-world .game-huge-number {
    font-size: 1.2rem !important;
  }

  #tb-standalone-world .btn-game-action {
    padding: 9px 8px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
    min-height: 40px !important;
  }

  /* GAME 1: SEESAW — Inline Counter + 3x2 Counterweights + Side-by-Side Thumb Buttons */
  #arcade-panel-seesaw .game-stat-card:first-of-type {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 10px !important;
  }

  #arcade-panel-seesaw .game-stat-card:first-of-type > div:nth-child(3) {
    display: none !important;
  }

  #seesaw-item-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }

  #seesaw-item-selector .wage-preset-btn {
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  #arcade-panel-seesaw .game-control-sidebar > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  #seesaw-next-btn {
    grid-column: 1 / -1 !important;
  }

  /* GAME 2: 50/50 LASER SLICE */
  #arcade-panel-slice .game-control-sidebar p {
    display: none !important;
  }

  #slice-top-pct,
  #slice-bot-pct {
    font-size: 0.92rem !important;
  }

  #slice-balance-indicator {
    margin-top: 4px !important;
    padding: 3px 6px !important;
    font-size: 9.5px !important;
  }

  /* GAME 3: DEEP SEA CRUSH */
  #arcade-panel-implode .game-stat-card:first-of-type {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #tb-standalone-world .abyss-quick-jumps .wage-preset-btn {
    min-height: 28px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  #tb-standalone-world .abyss-viewport-box {
    height: 250px !important;
    padding: 10px !important;
  }

  /* GAME 4: ASTEROID LAUNCHER */
  #asteroid-prompt {
    display: none !important;
  }

  #asteroid-type-selector .wage-preset-btn,
  #asteroid-target-selector .wage-preset-btn {
    min-height: 28px !important;
    padding: 3px 5px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #asteroid-target-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #asteroid-receipt-box {
    padding: 8px 10px !important;
    font-size: 10.5px !important;
    margin-top: 4px !important;
    max-height: 115px !important;
    overflow-y: auto !important;
  }

  /* GAME 5: 1:1 SIZE SHOWDOWN */
  #tb-standalone-world #hero-scale-stage .stage-subtitle,
  #tb-standalone-world #hero-scale-stage .tech-pill.pill-blue,
  #tb-standalone-world #hero-scale-stage .stacker-label,
  #tb-standalone-world #hero-scale-stage .side-label {
    display: none !important;
  }

  #tb-standalone-world #hero-scale-stage .stage-title {
    font-size: 1rem !important;
    margin: 4px 0 !important;
  }

  #tb-standalone-world #hero-scale-stage .scale-stacker-bar {
    margin-top: 4px !important;
    gap: 4px !important;
  }

  #tb-standalone-world #hero-scale-stage .stacker-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  #tb-standalone-world #hero-scale-stage .comparison-selectors {
    padding: 6px 46px 6px 8px !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  #tb-standalone-world #hero-scale-stage .object-select {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    height: 32px !important;
  }

  #tb-standalone-world #hero-scale-stage .scale-arena {
    min-height: 195px !important;
    height: 200px !important;
  }

  #tb-standalone-world #hero-scale-stage .scale-canvas-svg {
    height: 190px !important;
  }

  #tb-standalone-world #hero-scale-stage .perspective-intel-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  #tb-standalone-world #hero-scale-stage .intel-metric-card {
    padding: 6px 8px !important;
  }

  #tb-standalone-world #hero-scale-stage .metric-value {
    font-size: 0.85rem !important;
  }

  #tb-standalone-world #hero-scale-stage .metric-note {
    display: none !important;
  }

  /* GAME 6: SPEND $100B — Sticky Balance Bar + 2-Column Compact Store Grid */
  #tb-standalone-world .blitz-header-strip {
    position: sticky !important;
    top: 6px !important;
    z-index: 8500 !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #141413 !important;
    gap: 6px !important;
  }

  #tb-standalone-world .blitz-balance-huge {
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
  }

  #tb-standalone-world #blitz-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #tb-standalone-world .blitz-item-card {
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #141413 !important;
  }

  #tb-standalone-world .blitz-item-card > div:first-child {
    font-size: 1.4rem !important;
    margin-bottom: 2px !important;
  }

  #tb-standalone-world .blitz-item-card h4 {
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }

  #tb-standalone-world .blitz-buy-btn,
  #tb-standalone-world .blitz-sell-btn {
    padding: 5px 6px !important;
    font-size: 0.72rem !important;
  }

  #tb-standalone-world .cash-volume-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }

  /* 7. THE 5 NEW STANDALONE GAMES — SINGLE-SCREEN MOBILE ERGONOMICS */
  .tb-world-hero {
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  .tb-world-hero h1 {
    font-size: 19.5px !important;
    line-height: 1.15 !important;
    margin: 2px 0 !important;
  }

  .tb-world-hero p {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin: 2px 0 0 !important;
  }

  #tb-standalone-world .tb-card-frame {
    padding: 10px 11px !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0px #141413 !important;
  }

  #tb-standalone-world .tb-btn {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0px #141413 !important;
  }

  /* 3-Column & 2-Column Horizontal KPI Strips (Replaces 315px vertical stack!) */
  .tb-kpi-strip-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .tb-kpi-strip-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .tb-kpi-strip-3 > div,
  .tb-kpi-strip-2 > div {
    padding: 6px 7px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }

  .tb-kpi-strip-3 > div > div:nth-child(1),
  .tb-kpi-strip-2 > div > div:nth-child(1) {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  .tb-kpi-strip-3 > div > div:nth-child(2) {
    font-size: 13px !important;
    line-height: 1.15 !important;
    margin: 2px 0 !important;
    word-break: break-word !important;
  }

  .tb-kpi-strip-2 > div > div:nth-child(2) {
    font-size: 15.5px !important;
    line-height: 1.15 !important;
    margin: 2px 0 !important;
  }

  .tb-kpi-strip-3 > div > div:nth-child(3),
  .tb-kpi-strip-2 > div > div:nth-child(3) {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  /* Compact SVG Stage Arenas for Domino, Borehole & Decibel */
  .tb-svg-arena {
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  .tb-svg-arena svg {
    height: 130px !important;
    max-height: 140px !important;
  }

  /* Compact Strata / Acoustic Description Box */
  .tb-strata-info {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  .tb-strata-info h2 {
    font-size: 14.5px !important;
    margin-bottom: 2px !important;
  }

  .tb-strata-info p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Draw It to 1:1 Scale Mobile Canvas & Single-Row Buttons */
  #tb-draw-canvas {
    height: 190px !important;
  }

  .tb-draw-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  #draw-feedback-banner {
    margin-top: 8px !important;
    padding: 8px 10px !important;
  }

  /* Drop It On Every Planet: 3x2 Object Selector + 3x3 All-9-Worlds Matrix */
  .tb-planet-obj-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .tb-planet-obj-grid .tb-btn {
    padding: 6px 4px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .tb-anomaly-strip {
    font-size: 10px !important;
    padding: 6px 8px !important;
    margin-bottom: 8px !important;
  }

  .tb-planet-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .tb-planet-cards-grid .tb-card-frame {
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .tb-planet-cards-grid strong {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .tb-planet-outcome-box {
    padding: 5px !important;
    margin-bottom: 2px !important;
  }

  .tb-planet-mph {
    font-size: 12px !important;
  }

  .tb-planet-time {
    font-size: 9px !important;
  }

  .tb-planet-verdict,
  .tb-planet-note {
    display: none !important;
  }

  .tb-up-next-strip {
    padding: 10px 12px;
    margin-top: 16px;
    gap: 8px;
  }

  .tb-up-next-buttons .tb-tactile-pill {
    font-size: 10.5px;
    padding: 5px 9px;
  }

  .tb-chip-strip {
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .tb-chip-strip .tb-btn {
    padding: 5px 7px !important;
    font-size: 10px !important;
  }

  .tb-hub-toolbar {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
  }

  .tb-hub-toolbar-title {
    font-size: 11px !important;
  }

  .tb-lb-form-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ==========================================================================
   DYNAMIC SHUFFLE BAR, PINNED FAVORITES & WORLDWIDE LEADERBOARD SYSTEM
   ========================================================================== */
.tb-hub-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: #FFFFFF;
  border: 2.5px solid #141413;
  border-radius: 14px;
  box-shadow: 3px 3px 0px #141413;
}

.tb-hub-toolbar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 800;
  color: #141413;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-hub-toolbar-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tb-poster-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tb-fav-star-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid #141413;
  background: rgba(255, 255, 255, 0.92);
  color: #141413;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  padding: 0;
}

.tb-fav-star-btn:hover {
  transform: scale(1.12);
}

.tb-fav-star-btn.is-fav {
  background: #FFE600;
  color: #141413;
  box-shadow: 2px 2px 0px #141413;
}

.tb-fav-shelf {
  margin-bottom: 22px;
  padding: 16px 18px;
  background: #FFFBEB;
  border: 2.5px solid #141413;
  border-radius: 18px;
  box-shadow: 5px 5px 0px #141413;
}

.tb-fav-shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #141413;
}

.tb-fav-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tb-fav-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 2px 2px 0px #141413;
  cursor: pointer;
}

.tb-fav-quick-pill:hover {
  background: #FFE600;
  transform: translate(-1px, -1px);
}

/* Per-Game Live Arcade Score, Target Missions & Scale Blitz HUD */
.tb-arcade-hud {
  max-width: 1060px;
  margin: 0 auto 16px auto;
  background: linear-gradient(135deg, #141413 0%, #272724 100%);
  color: #FFFFFF;
  border: 3px solid #141413;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 5px 5px 0px #141413;
}

.tb-hud-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 10px;
}

.tb-hud-score-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tb-hud-score-pill {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 800;
  background: #FFE600;
  color: #141413;
  padding: 6px 14px;
  border-radius: 10px;
  border: 2px solid #141413;
  box-shadow: 2px 2px 0px #FF5500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-hud-streak-pill {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
  background: #FF5500;
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #141413;
}

.tb-hud-rank-pill {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
  background: #22C55E;
  color: #052E16;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #141413;
  cursor: pointer;
}

.tb-hud-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tb-hud-tab-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid #3A3935;
  background: #1E1E1C;
  color: #E7E5E4;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tb-hud-tab-btn.active,
.tb-hud-tab-btn:hover {
  background: #38BDF8;
  color: #082F49;
  border-color: #FFFFFF;
}

.tb-hud-missions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tb-hud-mission-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tb-hud-mission-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #FFE600;
  transform: translateY(-1px);
}

.tb-hud-mission-card.done {
  background: rgba(34, 197, 94, 0.18);
  border-color: #4ADE80;
}

.tb-hud-mission-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
}

.tb-hud-mission-pts {
  background: #FFE600;
  color: #141413;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
}

.tb-hud-mission-card.done .tb-hud-mission-pts {
  background: #4ADE80;
  color: #052E16;
}

.tb-hud-mission-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #F5F5F4;
  line-height: 1.3;
}

.tb-hud-quiz-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  padding: 10px 14px;
}

.tb-hud-quiz-q {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFE600;
  margin-bottom: 8px;
}

.tb-hud-quiz-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tb-hud-quiz-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 2px 2px 0px #FFE600;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, background 0.12s ease;
}

.tb-hud-quiz-btn:hover {
  background: #FFE600;
  transform: translate(-1px, -1px);
}

/* Per-Game Worldwide Leaderboard Panel — Vibrant Championship Gold & Cream */
.tb-world-leaderboard {
  max-width: 1060px;
  margin: 24px auto 0;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #141413;
  border: 3px solid #141413;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 6px 6px 0px #141413;
}

.tb-lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #141413;
}

.tb-lb-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #141413;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-lb-live-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  background: #22C55E;
  color: #052E16;
  border: 2px solid #141413;
  padding: 4px 10px;
  border-radius: 99px;
}

.tb-lb-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 2.5px solid #141413;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0px #141413;
}

.tb-lb-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid #141413;
  background: #FFFDF7;
  color: #141413;
  flex: 1 1 160px;
}

.tb-lb-flag-select {
  font-size: 15px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 2px solid #141413;
  background: #FFFDF7;
  color: #141413;
  cursor: pointer;
}

.tb-lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.tb-lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2px solid #141413;
  box-shadow: 2px 2px 0px #141413;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}

.tb-lb-row.is-you {
  background: #FFE600;
  border-color: #141413;
  color: #141413;
}

.tb-lb-rank {
  font-weight: 900;
  color: #B45309;
  min-width: 28px;
}

.tb-lb-player {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: #141413;
  flex: 1 1 110px;
  min-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-lb-score {
  font-weight: 800;
  color: #047857;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}

@media (max-width: 768px) {
  .tb-fav-star-btn {
    width: 28px !important;
    height: 24px !important;
    min-width: 28px !important;
    min-height: 24px !important;
    padding: 0 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }
  .tb-header-controls {
    gap: 5px !important;
  }
  .tb-header-controls .tb-tactile-pill:not(.primary) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
  .tb-header-controls .tb-tactile-pill.primary {
    padding: 0 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
  }
  .tb-arcade-hud {
    padding: 9px 11px !important;
    margin-bottom: 10px !important;
    border-radius: 13px !important;
    box-shadow: 3px 3px 0px #141413 !important;
  }
  .tb-hud-top-row {
    gap: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
  }
  .tb-hud-score-cluster {
    gap: 5px !important;
  }
  .tb-hud-tabs {
    display: flex !important;
    width: 100% !important;
    gap: 5px !important;
  }
  .tb-hud-tab-btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    padding: 4px 6px !important;
  }
  .tb-hud-missions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .tb-hud-mission-card {
    padding: 5px 6px !important;
    gap: 2px !important;
  }
  .tb-hud-mission-top {
    font-size: 9.5px !important;
  }
  .tb-hud-mission-pts {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
  .tb-hud-mission-desc {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tb-hud-quiz-opts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .tb-hud-quiz-btn {
    padding: 6px 4px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   20-WORLD EXPANSION: BESPOKE POSTER CLASSES, EASY FILTER STRIP & LEVEL STEPPER
   (Strictly preserving the original Perspective Toy-Box Studio design & layout)
   ========================================================================== */
.tb-p-whack {
  background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 55%, #FCA5A5 100%);
  color: #7F1D1D;
  min-height: 285px;
}
.tb-p-whack .tb-p-title {
  font-family: 'Bungee', cursive, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #7F1D1D;
  text-shadow: 2px 2px 0px #FFFFFF;
  margin: 0 0 6px 0;
}
.tb-p-whack .tb-p-sub { font-size: 13.5px; font-weight: 700; color: #991B1B; margin: 0; }

.tb-p-blackhole {
  background: linear-gradient(135deg, #2E1065 0%, #4C1D95 55%, #701A75 100%);
  color: #FFFFFF;
  min-height: 285px;
}
.tb-p-blackhole .tb-p-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #FEF08A;
  text-shadow: 2.5px 2.5px 0px #141413;
  margin: 0 0 6px 0;
}
.tb-p-blackhole .tb-p-sub { font-size: 13.5px; font-weight: 600; color: #F5D0FE; margin: 0; }

.tb-hub-filter-bar {
  max-width: 1240px;
  margin: 0 auto 16px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-filter-pills-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-filter-pill {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 2.5px 2.5px 0px #141413;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.tb-filter-pill:hover { transform: translate(-1px, -1px); background: #FEF9C3; }
.tb-filter-pill.active { background: #141413; color: #FFE600; }

.tb-lvl-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tb-lvl-step-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 13px;
  border-radius: 10px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 2.5px 2.5px 0px #141413;
  cursor: pointer;
}
.tb-lvl-step-btn.done { background: #4ADE80; color: #052E16; }
.tb-lvl-step-btn.active { background: #FFE600; color: #141413; transform: translate(-1px, -1px); box-shadow: 3.5px 3.5px 0px #141413; }

.tb-mobile-quick-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #F7F4ED;
  border-top: 2.5px solid #141413;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tb-dock-btn,
.tb-mob-dock-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 4px;
  border-radius: 10px;
  border: 2px solid #141413;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 2px 2px 0px #141413;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.tb-dock-btn:active,
.tb-mob-dock-btn.active { background: #FFE600; }
.tb-dock-icon { font-size: 14px; line-height: 1; }

@media (max-width: 768px) {
  .tb-mobile-quick-dock { display: grid; }
  body.tb-studio-active { padding-bottom: 66px !important; }
  .tb-hub-filter-bar { padding: 0 12px; margin-bottom: 10px; }
  .tb-filter-pill { font-size: 11.5px; padding: 5px 10px; }
}

/* ==========================================================================
   SEPARATE FULL-SCREEN INTERACTIVE COVER PAGE (BEFORE THE 18-GAME HUB)
   ========================================================================== */
html:has(body.tb-cover-active),
body.tb-cover-active {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: #F6F3EC !important;
}

body.tb-cover-active #tb-portal-root,
body.tb-cover-active #tb-standalone-world,
body.tb-cover-active .tb-mobile-quick-dock {
  display: none !important;
}

#tb-cover-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  background-color: #F6F3EC;
  background-image:
    radial-gradient(rgba(20, 20, 19, 0.12) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(255, 230, 0, 0.14) 0%, rgba(255, 42, 133, 0.08) 50%, rgba(56, 189, 248, 0.14) 100%);
  background-size: 26px 26px, 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#tb-cover-screen.tb-cover-exiting {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

.tb-cover-card {
  position: relative;
  z-index: 2;
  max-width: 680px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  background: #FFFFFF;
  border: 4px solid #141413;
  border-radius: 32px;
  padding: 38px 34px 32px;
  box-shadow: 0 12px 0 #141413, 0 24px 50px rgba(20, 20, 19, 0.16);
  text-align: center;
  pointer-events: auto;
}
.tb-cover-card::-webkit-scrollbar { display: none; }

.tb-cover-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141413;
  color: #FFE600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tb-cover-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(46px, 7vw, 76px);
  font-weight: 900;
  color: #141413;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin-bottom: 12px;
}

.tb-cover-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 2.5vw, 23px);
  font-weight: 800;
  color: #292524;
  line-height: 1.32;
  max-width: 560px;
  margin: 0 auto 20px;
}

.tb-cover-vibe-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.tb-cover-stat-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 999px;
  border: 2px solid #141413;
  box-shadow: 0 2.5px 0 #141413;
}

.tb-cover-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 900;
  padding: 18px 28px;
  border-radius: 999px;
  border: 3.5px solid #141413;
  background: #FFE600;
  color: #141413;
  cursor: pointer;
  box-shadow: 0 7px 0 #141413;
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  margin-bottom: 18px;
}

.tb-cover-enter-btn:hover {
  transform: translateY(-3px);
  background: #4ADE80;
  box-shadow: 0 10px 0 #141413;
}

.tb-cover-enter-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #141413;
}

.tb-cover-quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tb-cover-quick-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid #141413;
  background: #F6F3EC;
  color: #141413;
  cursor: pointer;
  box-shadow: 0 3px 0 #141413;
  transition: transform 0.12s ease, background 0.12s ease;
}

.tb-cover-quick-btn:hover {
  transform: translateY(-2px);
  background: #FEF08A;
}

@media (max-width: 640px), (max-height: 720px) {
  #tb-cover-screen {
    padding: 14px;
  }
  .tb-cover-card {
    padding: 26px 18px 22px;
    border-radius: 26px;
    box-shadow: 0 8px 0 #141413, 0 16px 36px rgba(20, 20, 19, 0.16);
  }
  .tb-cover-kicker {
    font-size: 10px;
    padding: 5px 11px;
    margin-bottom: 10px;
  }
  .tb-cover-title {
    font-size: clamp(38px, 9vw, 52px);
    margin-bottom: 8px;
  }
  .tb-cover-subtitle {
    font-size: 15.5px;
    margin-bottom: 14px;
  }
  .tb-cover-vibe-row {
    gap: 6px;
    margin-bottom: 16px;
  }
  .tb-cover-stat-badge {
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .tb-cover-enter-btn {
    padding: 15px 20px;
    font-size: 18px;
    margin-bottom: 14px;
  }
  .tb-cover-quick-btn {
    font-size: 12px;
    padding: 8px 13px;
  }
}