/* V24 main dashboard — scoped to the authenticated home screen. */
#main-menu-screen.main-menu-screen {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: clamp(10px, 1.5vw, 22px) !important;
  color: #08215c;
  background:
    radial-gradient(circle at 20% 8%, rgba(52, 211, 255, .44), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .34), transparent 30%),
    linear-gradient(145deg, #063b9f 0%, #0877e5 54%, #21b9ec 100%) !important;
}

#main-menu-screen .main-menu-viewport {
  width: min(1500px, 100%) !important;
  min-height: calc(100dvh - clamp(20px, 3vw, 44px)) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

#main-menu-screen .main-menu-card {
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(10px, 1.25vw, 18px) !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: clamp(11px, 1.1vw, 16px) !important;
  transform: none !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: clamp(22px, 2vw, 34px) !important;
  background: linear-gradient(145deg, rgba(7,48,135,.78), rgba(8,107,212,.72)) !important;
  box-shadow: 0 28px 80px rgba(2,25,84,.42), inset 0 1px 0 rgba(255,255,255,.45) !important;
  backdrop-filter: blur(18px);
}

#main-menu-screen .top-profile-bar {
  min-height: 80px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 1px solid rgba(109,220,255,.45) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(90deg, rgba(6,41,121,.94), rgba(26,69,185,.9)) !important;
  box-shadow: 0 12px 30px rgba(0,25,89,.24) !important;
}

#main-menu-screen .brand-block {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 18px !important;
}

#main-menu-screen .brand-block .eyebrow {
  grid-column: 2 !important;
  margin: 0 0 2px !important;
  color: #83edff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}

#main-menu-screen .main-logo-wrap {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 142px !important;
  height: 62px !important;
  padding: 2px 9px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 22px rgba(2,28,102,.3) !important;
}

#main-menu-screen .main-brand-logo { width: 100% !important; height: 100% !important; object-fit: contain !important; }
#main-menu-screen .brand-subtitle {
  grid-column: 2 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.9) !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.45 !important;
}
#main-menu-screen .brand-subtitle strong { color: #ffe566 !important; font-weight: 900 !important; }

#main-menu-screen .profile-actions { display: flex !important; gap: 9px !important; flex: 0 0 auto !important; }
#main-menu-screen .profile-actions .action-btn {
  min-height: 44px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 15px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: rgba(9,35,115,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
}
#main-menu-screen .profile-actions .topup-btn { background: linear-gradient(135deg,#7c3aed,#d946ef) !important; }
#main-menu-screen .profile-actions .shop-btn { background: linear-gradient(135deg,#f59e0b,#f97316) !important; }
#main-menu-screen .profile-actions .action-btn img { width: 20px !important; height: 20px !important; }

#main-menu-screen .dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.9fr) minmax(285px, .72fr) !important;
  gap: clamp(11px, 1.1vw, 16px) !important;
}

#main-menu-screen .hero-panel {
  position: relative !important;
  min-height: clamp(290px, 35vh, 355px) !important;
  overflow: hidden !important;
  padding: clamp(18px, 2.1vw, 32px) !important;
  display: flex !important;
  align-items: center !important;
  border: 2px solid rgba(116,232,255,.78) !important;
  border-radius: 27px !important;
  background-image:
    linear-gradient(90deg, rgba(4,34,112,.06) 0%, rgba(4,34,112,.12) 45%, rgba(3,26,92,.9) 100%),
    url('../assets/main-menu-puppy-hero-v24.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  box-shadow: 0 16px 40px rgba(1,28,98,.3), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

#main-menu-screen .hero-copy {
  position: relative !important;
  z-index: 2 !important;
  width: min(47%, 510px) !important;
  margin-left: auto !important;
  padding: clamp(16px, 1.7vw, 24px) !important;
  border: 1px solid rgba(125,231,255,.42) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(5,45,139,.86), rgba(49,32,155,.8)) !important;
  box-shadow: 0 16px 35px rgba(1,20,78,.3) !important;
  backdrop-filter: blur(8px);
}
#main-menu-screen .quest-label { color: #8bf2ff !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .12em !important; }
#main-menu-screen .hero-copy h2 {
  margin: 8px 0 10px !important;
  color: #fff !important;
  font-size: clamp(27px, 2.65vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 4px 0 rgba(3,31,102,.42), 0 8px 20px rgba(1,19,71,.35) !important;
}
#main-menu-screen .hero-copy h2 span { color: #ffdb3d !important; }
#main-menu-screen .hero-copy p { margin: 0 !important; color: rgba(255,255,255,.9) !important; font-size: clamp(12px, .95vw, 15px) !important; line-height: 1.6 !important; }
#main-menu-screen .hero-perks { margin-top: 13px !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#main-menu-screen .hero-perks span { padding: 6px 9px !important; border: 1px solid rgba(127,238,255,.34) !important; border-radius: 99px !important; color: #dffbff !important; font-size: 9px !important; font-weight: 900 !important; background: rgba(5,38,120,.58) !important; }

#main-menu-screen .hero-mini-cards {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(16px, 1.6vw, 24px) !important;
  bottom: clamp(14px, 1.5vw, 22px) !important;
  display: flex !important;
  gap: 8px !important;
}
#main-menu-screen .stat-chip {
  min-width: 126px !important;
  padding: 8px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 8px 22px rgba(2,31,101,.2) !important;
  backdrop-filter: blur(8px);
}
#main-menu-screen .stat-icon { width: 32px !important; height: 32px !important; }
#main-menu-screen .stat-label { display: block !important; color: #58709e !important; font-size: 9px !important; }
#main-menu-screen .stat-chip strong { color: #0b2d75 !important; font-size: 18px !important; }

#main-menu-screen .profile-summary-card {
  min-height: 0 !important;
  padding: clamp(17px, 1.6vw, 24px) !important;
  border: 2px solid rgba(119,229,255,.86) !important;
  border-radius: 27px !important;
  color: #0b2869 !important;
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(225,247,255,.96)) !important;
  box-shadow: 0 16px 40px rgba(1,30,96,.28), inset 0 1px 0 #fff !important;
}
#main-menu-screen .summary-top { margin-bottom: 15px !important; }
#main-menu-screen .summary-label { color: #0575bf !important; font-size: 11px !important; font-weight: 900 !important; }
#main-menu-screen .level-pill { padding: 6px 10px !important; border-radius: 99px !important; color: #6d28d9 !important; background: #ede9fe !important; font-weight: 900 !important; }
#main-menu-screen .profile-name-row { margin-bottom: 14px !important; align-items: center !important; }
#main-menu-screen .mini-note { color: #6880a8 !important; font-size: 10px !important; }
#main-menu-screen #profileNicknameLarge { color: #081f55 !important; font-size: clamp(24px, 2vw, 32px) !important; }
#main-menu-screen .small-btn { min-height: 38px !important; padding: 0 13px !important; border: 1px solid #9fdcf5 !important; border-radius: 13px !important; color: #075ebf !important; background: #fff !important; font-weight: 800 !important; }
#main-menu-screen .selected-skin-panel {
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  border: 1px solid #c9e8f8 !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.78) !important;
}
#main-menu-screen .selected-skin-preview { width: 72px !important; height: 72px !important; border-radius: 18px !important; object-fit: contain !important; background: #eff8ff !important; }
#main-menu-screen #selectedSkinName { display: block !important; margin: 3px 0 5px !important; color: #0b2869 !important; font-size: 17px !important; }
#main-menu-screen .name-lock-note { color: #677b9e !important; font-size: 10px !important; line-height: 1.45 !important; }

#main-menu-screen .mode-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: clamp(11px, 1.1vw, 16px) !important; }
#main-menu-screen .mode-card {
  position: relative !important;
  min-height: 280px !important;
  padding: clamp(17px, 1.7vw, 25px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.7) !important;
  border-radius: 27px !important;
  box-shadow: 0 16px 38px rgba(2,27,91,.28), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
#main-menu-screen .friends-card { color: #073073 !important; background: linear-gradient(135deg,#d9fbff 0%,#85e9f6 58%,#5bcde8 100%) !important; }
#main-menu-screen .random-card { color: #6b2b07 !important; background: linear-gradient(135deg,#fff6d9 0%,#ffd088 55%,#ffab66 100%) !important; }
#main-menu-screen .mode-number { position: absolute !important; right: 22px !important; top: 13px !important; color: rgba(255,255,255,.82) !important; font-size: 46px !important; font-weight: 900 !important; }
#main-menu-screen .mode-card-head { display: grid !important; grid-template-columns: 68px minmax(0,1fr) !important; gap: 15px !important; align-items: start !important; }
#main-menu-screen .mode-icon { width: 68px !important; height: 68px !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius: 18px !important; color: #fff !important; font-size: 25px !important; font-weight: 900 !important; box-shadow: 0 8px 0 rgba(3,45,100,.18), 0 12px 22px rgba(3,35,92,.15) !important; }
#main-menu-screen .friends-icon { background: linear-gradient(145deg,#06b6d4,#0572c8) !important; }
#main-menu-screen .random-icon { background: linear-gradient(145deg,#ff8a35,#ef3f35) !important; }
#main-menu-screen .mode-kicker { color: #0879ad !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .08em !important; }
#main-menu-screen .random-card .mode-kicker { color: #b64c0b !important; }
#main-menu-screen .mode-card h2 { margin: 3px 0 5px !important; color: inherit !important; font-size: clamp(23px, 1.8vw, 30px) !important; line-height: 1.15 !important; }
#main-menu-screen .mode-card-head p { margin: 0 !important; max-width: 520px !important; color: inherit !important; font-size: 12px !important; line-height: 1.45 !important; opacity: .86 !important; }
#main-menu-screen .mode-reward-pill { display: inline-flex !important; margin-top: 7px !important; padding: 5px 9px !important; border-radius: 99px !important; color: inherit !important; background: rgba(255,255,255,.62) !important; font-size: 10px !important; font-weight: 900 !important; }
#main-menu-screen .feature-list { margin: 13px 0 !important; padding: 0 !important; display: grid !important; gap: 5px !important; color: inherit !important; font-size: 11px !important; line-height: 1.4 !important; list-style: none !important; }
#main-menu-screen .random-options { margin: 12px 0 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
#main-menu-screen .difficulty-select { min-height: 40px !important; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.76) !important; border-radius: 13px !important; color: #442507 !important; background: rgba(255,255,255,.82) !important; font-size: 11px !important; font-weight: 800 !important; }
#main-menu-screen .mode-action-btn { min-height: 48px !important; margin-top: auto !important; border: 0 !important; border-radius: 15px !important; color: #fff !important; font-size: 14px !important; font-weight: 900 !important; box-shadow: 0 7px 0 rgba(4,42,103,.2), 0 12px 24px rgba(2,39,106,.18) !important; }
#main-menu-screen .friends-card .mode-action-btn { background: linear-gradient(90deg,#087aeb,#3159e8) !important; }
#main-menu-screen .random-card .mode-action-btn { background: linear-gradient(90deg,#ff6b35,#ef3a4f) !important; }

@media (max-width: 980px) {
  #main-menu-screen .main-menu-viewport { align-items: flex-start !important; }
  #main-menu-screen .top-profile-bar { flex-wrap: wrap !important; }
  #main-menu-screen .brand-block { flex-basis: 100% !important; }
  #main-menu-screen .profile-actions { width: 100% !important; }
  #main-menu-screen .profile-actions .action-btn { flex: 1 1 0 !important; }
  #main-menu-screen .dashboard-grid { grid-template-columns: 1fr !important; }
  #main-menu-screen .profile-summary-card { display: grid !important; grid-template-columns: auto 1fr !important; gap: 8px 18px !important; }
  #main-menu-screen .summary-top { grid-column: 1 / -1 !important; margin: 0 !important; }
  #main-menu-screen .profile-name-row { margin: 0 !important; }
  #main-menu-screen .selected-skin-panel { min-width: 0 !important; }
}

@media (max-width: 680px) {
  #main-menu-screen.main-menu-screen { padding: 7px !important; }
  #main-menu-screen .main-menu-card { padding: 8px !important; border-radius: 20px !important; }
  #main-menu-screen .top-profile-bar { padding: 9px !important; border-radius: 17px !important; }
  #main-menu-screen .brand-block { grid-template-columns: 108px minmax(0,1fr) !important; column-gap: 10px !important; }
  #main-menu-screen .main-logo-wrap { width: 108px !important; height: 52px !important; border-radius: 13px !important; }
  #main-menu-screen .brand-block .eyebrow { font-size: 8px !important; }
  #main-menu-screen .brand-subtitle { font-size: 11px !important; line-height: 1.35 !important; }
  #main-menu-screen .profile-actions { gap: 5px !important; }
  #main-menu-screen .profile-actions .action-btn { min-width: 0 !important; min-height: 38px !important; padding: 0 6px !important; font-size: 10px !important; border-radius: 11px !important; }
  #main-menu-screen .hero-panel { min-height: 380px !important; padding: 11px !important; align-items: flex-end !important; background-position: 35% center !important; border-radius: 19px !important; }
  #main-menu-screen .hero-panel::after { content: '' !important; position: absolute !important; inset: 32% 0 0 !important; background: linear-gradient(transparent,rgba(3,28,99,.8)) !important; }
  #main-menu-screen .hero-copy { width: 100% !important; margin: 0 !important; padding: 14px !important; border-radius: 17px !important; }
  #main-menu-screen .hero-copy h2 { font-size: clamp(25px, 8vw, 34px) !important; }
  #main-menu-screen .hero-mini-cards { top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; flex-direction: column !important; }
  #main-menu-screen .stat-chip { min-width: 108px !important; padding: 6px 8px !important; }
  #main-menu-screen .stat-icon { width: 25px !important; height: 25px !important; }
  #main-menu-screen .stat-chip strong { font-size: 14px !important; }
  #main-menu-screen .profile-summary-card { padding: 14px !important; grid-template-columns: 1fr !important; border-radius: 19px !important; }
  #main-menu-screen .summary-top { grid-column: auto !important; }
  #main-menu-screen .selected-skin-panel { grid-template-columns: 58px minmax(0,1fr) !important; }
  #main-menu-screen .selected-skin-preview { width: 58px !important; height: 58px !important; }
  #main-menu-screen .mode-grid { grid-template-columns: 1fr !important; }
  #main-menu-screen .mode-card { min-height: 270px !important; padding: 16px !important; border-radius: 19px !important; }
  #main-menu-screen .mode-card-head { grid-template-columns: 56px minmax(0,1fr) !important; gap: 11px !important; }
  #main-menu-screen .mode-icon { width: 56px !important; height: 56px !important; font-size: 21px !important; }
  #main-menu-screen .mode-number { font-size: 36px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #main-menu-screen.main-menu-screen { padding: 6px !important; }
  #main-menu-screen .main-menu-card { padding: 7px !important; gap: 7px !important; }
  #main-menu-screen .top-profile-bar { min-height: 60px !important; padding: 6px 9px !important; flex-wrap: nowrap !important; }
  #main-menu-screen .brand-block { flex-basis: auto !important; grid-template-columns: 100px minmax(160px,1fr) !important; column-gap: 8px !important; }
  #main-menu-screen .main-logo-wrap { width: 100px !important; height: 47px !important; }
  #main-menu-screen .brand-block .eyebrow { display: none !important; }
  #main-menu-screen .brand-subtitle { grid-row: 1 / 3 !important; font-size: 10px !important; }
  #main-menu-screen .profile-actions { width: auto !important; }
  #main-menu-screen .profile-actions .action-btn { min-height: 35px !important; padding: 0 7px !important; font-size: 9px !important; }
  #main-menu-screen .dashboard-grid { grid-template-columns: minmax(0,1.75fr) minmax(220px,.75fr) !important; }
  #main-menu-screen .hero-panel { min-height: 250px !important; }
  #main-menu-screen .hero-copy { width: 48% !important; padding: 12px !important; }
  #main-menu-screen .hero-copy h2 { font-size: clamp(23px,3.2vw,31px) !important; }
  #main-menu-screen .hero-copy p { font-size: 10px !important; line-height: 1.4 !important; }
  #main-menu-screen .hero-perks { margin-top: 7px !important; }
  #main-menu-screen .hero-mini-cards { top: auto !important; right: auto !important; bottom: 10px !important; left: 10px !important; flex-direction: row !important; }
  #main-menu-screen .stat-chip { min-width: 102px !important; padding: 5px 7px !important; }
  #main-menu-screen .profile-summary-card { display: block !important; padding: 12px !important; }
  #main-menu-screen .summary-top { margin-bottom: 8px !important; }
  #main-menu-screen #profileNicknameLarge { font-size: 21px !important; }
  #main-menu-screen .selected-skin-panel { margin-top: 7px !important; padding: 8px !important; grid-template-columns: 48px minmax(0,1fr) !important; }
  #main-menu-screen .selected-skin-preview { width: 48px !important; height: 48px !important; }
  #main-menu-screen .name-lock-note { font-size: 8px !important; }
  #main-menu-screen .mode-card { min-height: 245px !important; padding: 13px !important; }
}

/* V29 visual polish and distinct game-mode artwork. */
#main-menu-screen .friends-card {
  background-image: url('../assets/mode-friends-v29.png') !important;
  background-position: center !important;
  background-size: cover !important;
}
#main-menu-screen .random-card {
  background-image: url('../assets/mode-random-v29.png') !important;
  background-position: center !important;
  background-size: cover !important;
}
#main-menu-screen .friends-card::after,
#main-menu-screen .random-card::after {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  pointer-events: none !important;
}
#main-menu-screen .friends-card::after { background: linear-gradient(90deg,rgba(4,53,145,.82),rgba(4,91,166,.34),rgba(3,57,135,.65)) !important; }
#main-menu-screen .random-card::after { background: linear-gradient(90deg,rgba(74,25,118,.74),rgba(152,44,78,.22),rgba(118,39,16,.72)) !important; }
#main-menu-screen .mode-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
}
#main-menu-screen .brand-block .eyebrow {
  width: max-content !important;
  padding: 0 !important;
  color: transparent !important;
  background: linear-gradient(90deg,#62efff,#ffe14a,#ff8d4f,#e681ff) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-shadow: 0 3px 12px rgba(56,220,255,.35) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
}
#main-menu-screen .hero-panel { padding: 0 !important; }
#main-menu-screen .hero-copy {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-width: 0 0 0 1px !important;
  border-radius: 0 25px 25px 0 !important;
  box-shadow: -12px 0 28px rgba(3,25,90,.22) !important;
}
#main-menu-screen .profile-summary-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 10%,rgba(157,97,255,.2),transparent 28%),
    linear-gradient(150deg,#ffffff,#dff7ff 65%,#e8e4ff) !important;
  box-shadow: 0 9px 0 rgba(3,65,145,.24), 0 18px 40px rgba(1,26,91,.28), inset 0 1px 0 #fff !important;
}
#main-menu-screen .profile-summary-card::after {
  content: '★' !important;
  position: absolute !important;
  right: -12px !important;
  bottom: -30px !important;
  color: rgba(116,73,225,.1) !important;
  font-size: 130px !important;
  line-height: 1 !important;
}
#main-menu-screen .summary-label { font-size: 12px !important; letter-spacing: .06em !important; }
#main-menu-screen .level-pill { color: #fff !important; background: linear-gradient(135deg,#8b5cf6,#d946ef) !important; box-shadow: 0 4px 10px rgba(124,58,237,.28) !important; }
#main-menu-screen .selected-skin-panel { position: relative !important; z-index: 1 !important; border: 2px solid #fff !important; box-shadow: 0 8px 22px rgba(29,103,170,.14) !important; }

/* On phones preserve the complete 1440x820 desktop composition and scale it as one unit. */
body.main-menu-scaled.view-main #main-menu-screen,
body.main-menu-scaled[data-app-screen='main'] #main-menu-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
body.main-menu-scaled.view-main #mainMenuViewport,
body.main-menu-scaled[data-app-screen='main'] #mainMenuViewport {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1440px !important;
  height: 820px !important;
  min-height: 820px !important;
  margin: 0 !important;
  display: block !important;
  transform: translate(-50%,-50%) scale(var(--main-menu-scale,1)) !important;
  transform-origin: center !important;
}
body.main-menu-scaled.view-main #main-menu-screen .main-menu-card,
body.main-menu-scaled[data-app-screen='main'] #main-menu-screen .main-menu-card {
  width: 1440px !important;
  height: 820px !important;
  padding: 16px !important;
  grid-template-rows: 82px minmax(0,1.08fr) minmax(0,.92fr) !important;
  gap: 14px !important;
  border-radius: 32px !important;
}
body.main-menu-scaled #main-menu-screen .top-profile-bar { min-height: 82px !important; padding: 10px 14px !important; flex-wrap: nowrap !important; border-radius: 22px !important; }
body.main-menu-scaled #main-menu-screen .brand-block { flex-basis: auto !important; grid-template-columns: 142px minmax(220px,1fr) !important; column-gap: 18px !important; }
body.main-menu-scaled #main-menu-screen .main-logo-wrap { width: 142px !important; height: 62px !important; }
body.main-menu-scaled #main-menu-screen .brand-block .eyebrow { display: block !important; font-size: 12px !important; }
body.main-menu-scaled #main-menu-screen .brand-subtitle { grid-row: auto !important; font-size: 15px !important; }
body.main-menu-scaled #main-menu-screen .profile-actions { width: auto !important; display: flex !important; gap: 9px !important; }
body.main-menu-scaled #main-menu-screen .profile-actions .action-btn { width: auto !important; min-height: 44px !important; padding: 0 15px !important; font-size: 13px !important; }
body.main-menu-scaled #main-menu-screen .profile-actions .logout-btn { display: flex !important; }
body.main-menu-scaled #main-menu-screen .dashboard-grid { display: grid !important; grid-template-columns: minmax(0,1.9fr) minmax(285px,.72fr) !important; gap: 14px !important; }
body.main-menu-scaled #main-menu-screen .hero-panel { display: flex !important; min-height: 0 !important; border-radius: 27px !important; background-position: center !important; }
body.main-menu-scaled #main-menu-screen .hero-copy { width: 47% !important; margin-left: auto !important; padding: 24px !important; }
body.main-menu-scaled #main-menu-screen .hero-copy h2 { font-size: 42px !important; }
body.main-menu-scaled #main-menu-screen .hero-copy p { display: block !important; font-size: 14px !important; }
body.main-menu-scaled #main-menu-screen .hero-mini-cards { left: 20px !important; top: auto !important; right: auto !important; bottom: 18px !important; flex-direction: row !important; }
body.main-menu-scaled #main-menu-screen .stat-chip { min-width: 126px !important; padding: 8px 11px !important; }
body.main-menu-scaled #main-menu-screen .profile-summary-card { display: block !important; padding: 22px !important; border-radius: 27px !important; }
body.main-menu-scaled #main-menu-screen .selected-skin-panel { grid-template-columns: 72px minmax(0,1fr) !important; padding: 14px !important; }
body.main-menu-scaled #main-menu-screen .selected-skin-preview { width: 72px !important; height: 72px !important; }
body.main-menu-scaled #main-menu-screen .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; padding: 13px !important; border-radius: 27px !important; }
body.main-menu-scaled #main-menu-screen .mode-card { padding: 20px !important; border-radius: 22px !important; }
body.main-menu-scaled #main-menu-screen .mode-card h2 { font-size: 38px !important; }
body.main-menu-scaled #main-menu-screen .mode-action-btn { width: 260px !important; min-height: 48px !important; margin-top: 12px !important; }
body.main-menu-scaled #main-menu-screen .mode-action-btn::before { font-size: 15px !important; }

/* V28: one illustrated game-mode stage with two clean play choices. */
#main-menu-screen .mode-grid {
  position: relative !important;
  isolation: isolate !important;
  padding: clamp(9px, 1vw, 15px) !important;
  overflow: hidden !important;
  border: 2px solid rgba(128,235,255,.9) !important;
  border-radius: 27px !important;
  background-image:
    linear-gradient(90deg,rgba(4,38,124,.45),rgba(20,74,174,.18),rgba(70,37,159,.42)),
    url('../assets/main-menu-puppy-hero-v24.png') !important;
  background-size: cover !important;
  background-position: center 61% !important;
  box-shadow: 0 12px 34px rgba(1,27,91,.35), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#main-menu-screen .mode-grid::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: linear-gradient(180deg,rgba(3,27,96,.04),rgba(3,27,96,.35)) !important;
  pointer-events: none !important;
}
#main-menu-screen .mode-card {
  min-height: 0 !important;
  padding: clamp(12px, 1.4vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: center !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  border-radius: 22px !important;
  background-image: none !important;
  box-shadow: 0 7px 0 rgba(2,27,89,.45), 0 14px 28px rgba(1,20,75,.3), inset 0 1px 0 rgba(255,255,255,.5) !important;
  backdrop-filter: blur(5px) saturate(1.15) !important;
}
#main-menu-screen .friends-card { background: linear-gradient(145deg,rgba(0,111,204,.9),rgba(19,190,211,.74)) !important; }
#main-menu-screen .random-card { background: linear-gradient(145deg,rgba(225,68,31,.9),rgba(255,157,50,.75)) !important; }
#main-menu-screen .friends-card::before,
#main-menu-screen .random-card::before { display: none !important; }
#main-menu-screen .mode-card-head {
  display: block !important;
  width: 100% !important;
  margin: auto 0 !important;
}
#main-menu-screen .mode-card-head > .mode-icon,
#main-menu-screen .mode-kicker,
#main-menu-screen .mode-number,
#main-menu-screen .mode-card-head p,
#main-menu-screen .mode-reward-pill,
#main-menu-screen .feature-list,
#main-menu-screen .random-options {
  display: none !important;
}
#main-menu-screen .mode-card h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(25px, 2.4vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 4px 0 rgba(2,29,92,.58), 0 9px 22px rgba(0,0,0,.35) !important;
}
#main-menu-screen .mode-action-btn {
  width: min(260px, 78%) !important;
  min-height: 48px !important;
  margin: 12px auto 0 !important;
  font-size: 0 !important;
  border: 2px solid rgba(255,255,255,.84) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 0 rgba(2,27,88,.4), 0 10px 22px rgba(0,0,0,.2) !important;
}
#main-menu-screen .mode-action-btn::before {
  content: 'CHƠI' !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
#main-menu-screen .mode-action-btn span { display: none !important; }

@media (max-width: 680px) and (orientation: portrait) {
  #main-menu-screen .mode-grid { padding: 6px !important; border-radius: 16px !important; gap: 6px !important; }
  #main-menu-screen .mode-card { padding: 8px 5px !important; border-radius: 13px !important; }
  #main-menu-screen .mode-card h2 { font-size: clamp(17px, 5vw, 24px) !important; }
  #main-menu-screen .mode-action-btn { width: 82% !important; min-height: 34px !important; margin-top: 8px !important; border-radius: 10px !important; }
  #main-menu-screen .mode-action-btn::before { font-size: 9px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #main-menu-screen .mode-grid {
    padding: 6px !important;
    gap: 7px !important;
    border-radius: 17px !important;
    background-position: center 65% !important;
  }
  #main-menu-screen .mode-card { padding: 7px !important; border-radius: 14px !important; }
  #main-menu-screen .mode-card h2 { font-size: clamp(19px, 2.5vw, 27px) !important; }
  #main-menu-screen .mode-action-btn { width: min(190px,70%) !important; min-height: 34px !important; margin-top: 7px !important; border-radius: 10px !important; }
  #main-menu-screen .mode-action-btn::before { font-size: 10px !important; }
}

/* V27: illustrated mode cards, fewer words and stronger contrast. */
#main-menu-screen.main-menu-screen {
  background-image:
    linear-gradient(135deg, rgba(4,40,127,.76), rgba(3,105,195,.58)),
    url('../assets/main-menu-puppy-hero-v24.png') !important;
  background-size: cover !important;
  background-position: center !important;
}
#main-menu-screen .main-menu-card {
  background: linear-gradient(145deg, rgba(5,40,125,.76), rgba(5,101,192,.68)) !important;
}
#main-menu-screen .mode-card {
  isolation: isolate !important;
  color: #fff !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
#main-menu-screen .mode-card::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  pointer-events: none !important;
}
#main-menu-screen .friends-card {
  background-image: url('../assets/main-menu-puppy-hero-v24.png') !important;
  background-position: 12% 58% !important;
}
#main-menu-screen .friends-card::before {
  background: linear-gradient(90deg, rgba(3,58,153,.94), rgba(7,122,194,.69) 58%, rgba(12,186,211,.4)) !important;
}
#main-menu-screen .random-card {
  background-image: url('../assets/main-menu-puppy-hero-v24.png') !important;
  background-position: 88% 72% !important;
}
#main-menu-screen .random-card::before {
  background: linear-gradient(90deg, rgba(153,49,15,.93), rgba(235,99,35,.71) 58%, rgba(255,176,55,.4)) !important;
}
#main-menu-screen .mode-number,
#main-menu-screen .mode-card-head p,
#main-menu-screen .mode-reward-pill,
#main-menu-screen .feature-list {
  display: none !important;
}
#main-menu-screen .mode-card-head { align-items: center !important; }
#main-menu-screen .mode-kicker {
  display: inline-flex !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 99px !important;
  color: #fff !important;
  background: rgba(4,31,99,.5) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}
#main-menu-screen .mode-card h2 {
  color: #fff !important;
  text-shadow: 0 3px 0 rgba(2,28,91,.55), 0 6px 16px rgba(0,0,0,.34) !important;
}
#main-menu-screen .random-card .mode-kicker { color: #fff !important; background: rgba(120,38,12,.55) !important; }
#main-menu-screen .random-options { margin-top: auto !important; }
#main-menu-screen .difficulty-select {
  color: #102b65 !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 3px 0 rgba(3,34,94,.2) !important;
}
#main-menu-screen .mode-action-btn {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
#main-menu-screen .brand-subtitle,
#main-menu-screen .hero-copy p {
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(1,19,72,.72) !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  #main-menu-screen.main-menu-screen {
    background-image:
      linear-gradient(135deg,rgba(2,38,125,.72),rgba(4,110,196,.48)),
      url('../assets/main-menu-puppy-hero-v24.png') !important;
  }
  #main-menu-screen .mode-card { padding: 10px 12px !important; }
  #main-menu-screen .mode-card-head { grid-template-columns: 42px minmax(0,1fr) !important; }
  #main-menu-screen .mode-icon { width: 42px !important; height: 42px !important; }
  #main-menu-screen .mode-kicker { padding: 3px 6px !important; color: #fff !important; }
  #main-menu-screen .mode-card h2 { color: #fff !important; font-size: clamp(17px,2.25vw,22px) !important; }
  #main-menu-screen .random-options { margin-top: auto !important; }
}

/* V26: clean cartoon console layout for short landscape screens. */
body.view-main #fullscreenBtn,
body.view-main #installPwaBtn,
body[data-app-screen='main'] #fullscreenBtn,
body[data-app-screen='main'] #installPwaBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  #main-menu-screen.main-menu-screen {
    padding: 5px !important;
    background:
      radial-gradient(circle at 16% 20%, rgba(79,225,255,.55), transparent 23%),
      radial-gradient(circle at 88% 80%, rgba(255,201,66,.35), transparent 26%),
      linear-gradient(135deg,#07379d,#087de1 62%,#26bceb) !important;
  }
  #main-menu-screen .main-menu-card {
    grid-template-rows: 50px minmax(0, 1fr) minmax(0, 1.12fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    border: 2px solid rgba(150,239,255,.72) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg,rgba(4,45,142,.92),rgba(5,99,200,.88)) !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 12px 28px rgba(0,28,96,.32) !important;
  }
  #main-menu-screen .top-profile-bar {
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(5,39,127,.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  #main-menu-screen .brand-block { grid-template-columns: 88px minmax(140px,1fr) !important; }
  #main-menu-screen .main-logo-wrap { width: 88px !important; height: 42px !important; border-radius: 12px !important; transform: rotate(-1.5deg) !important; }
  #main-menu-screen .brand-subtitle { font-size: 9px !important; font-weight: 700 !important; }
  #main-menu-screen .profile-actions { gap: 4px !important; }
  #main-menu-screen .profile-actions .action-btn { min-height: 32px !important; padding: 0 9px !important; border-radius: 11px !important; font-size: 8px !important; }
  #main-menu-screen .profile-actions .action-btn img { width: 15px !important; height: 15px !important; }
  #main-menu-screen .profile-actions .logout-btn { display: none !important; }

  #main-menu-screen .dashboard-grid { display: block !important; }
  #main-menu-screen .profile-summary-card { display: none !important; }
  #main-menu-screen .hero-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    align-items: center !important;
    border: 2px solid #7cecff !important;
    border-radius: 17px !important;
    background-image:
      linear-gradient(90deg,rgba(1,37,118,.03) 0%,rgba(1,37,118,.08) 48%,rgba(9,32,112,.86) 100%),
      url('../assets/main-menu-puppy-hero-v24.png') !important;
    background-position: center 46% !important;
    box-shadow: 0 5px 0 #053b91, inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
  #main-menu-screen .hero-panel::after { display: none !important; }
  #main-menu-screen .hero-copy {
    width: 44% !important;
    margin-left: auto !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(125,235,255,.5) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg,rgba(12,56,157,.9),rgba(67,35,172,.84)) !important;
    box-shadow: 0 4px 0 rgba(2,25,91,.48) !important;
  }
  #main-menu-screen .quest-label { font-size: 6px !important; }
  #main-menu-screen .hero-copy h2 { margin: 2px 0 3px !important; font-size: clamp(17px,2.75vw,25px) !important; line-height: 1.02 !important; }
  #main-menu-screen .hero-copy p { display: none !important; }
  #main-menu-screen .hero-perks { margin-top: 4px !important; gap: 3px !important; }
  #main-menu-screen .hero-perks span { padding: 3px 5px !important; font-size: 5px !important; }
  #main-menu-screen .hero-mini-cards { left: 8px !important; bottom: 8px !important; gap: 4px !important; }
  #main-menu-screen .stat-chip { min-width: 92px !important; padding: 4px 6px !important; border-radius: 10px !important; }
  #main-menu-screen .stat-icon { width: 20px !important; height: 20px !important; }
  #main-menu-screen .stat-label { font-size: 6px !important; }
  #main-menu-screen .stat-chip strong { font-size: 11px !important; }

  #main-menu-screen .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  #main-menu-screen .mode-card {
    height: 100% !important;
    min-height: 0 !important;
    padding: 9px 11px !important;
    border-width: 2px !important;
    border-radius: 17px !important;
    box-shadow: 0 5px 0 rgba(3,42,106,.5), inset 0 1px 0 rgba(255,255,255,.78) !important;
  }
  #main-menu-screen .friends-card { background: linear-gradient(145deg,#d8fbff,#6fe1f1) !important; }
  #main-menu-screen .random-card { background: linear-gradient(145deg,#fff4ca,#ffbf6e) !important; }
  #main-menu-screen .mode-card-head { display: grid !important; grid-template-columns: 39px minmax(0,1fr) !important; gap: 7px !important; }
  #main-menu-screen .mode-icon { width: 39px !important; height: 39px !important; margin: 0 !important; border-radius: 11px !important; font-size: 15px !important; box-shadow: 0 4px 0 rgba(3,45,100,.3) !important; }
  #main-menu-screen .mode-number { top: 5px !important; right: 10px !important; font-size: 25px !important; }
  #main-menu-screen .mode-kicker { font-size: 6px !important; }
  #main-menu-screen .mode-card h2 { margin: 1px 0 2px !important; font-size: clamp(15px,2vw,20px) !important; }
  #main-menu-screen .mode-card-head p,
  #main-menu-screen .feature-list,
  #main-menu-screen .mode-reward-pill { display: none !important; }
  #main-menu-screen .random-options { margin: 5px 0 0 !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  #main-menu-screen .difficulty-select { min-height: 27px !important; padding: 0 7px !important; border-radius: 9px !important; font-size: 8px !important; }
  #main-menu-screen .mode-action-btn {
    min-height: 33px !important;
    margin-top: auto !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    box-shadow: 0 4px 0 rgba(3,39,103,.3) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #main-menu-screen .main-menu-card { animation: v24DashboardIn .55s cubic-bezier(.2,.8,.2,1) both; }
  #main-menu-screen .mode-card { transition: transform .2s ease, box-shadow .2s ease; }
  #main-menu-screen .mode-card:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 45px rgba(2,27,91,.34) !important; }
}
@keyframes v24DashboardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* V25 viewport lock: the complete dashboard always occupies exactly one screen. */
#main-menu-screen.main-menu-screen {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#main-menu-screen .main-menu-viewport {
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
#main-menu-screen .main-menu-card {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1.08fr) minmax(0, .92fr) !important;
  overflow: hidden !important;
}
#main-menu-screen .dashboard-grid,
#main-menu-screen .mode-grid,
#main-menu-screen .hero-panel,
#main-menu-screen .profile-summary-card,
#main-menu-screen .mode-card { min-height: 0 !important; }

@media (max-height: 820px) {
  #main-menu-screen .top-profile-bar { min-height: 62px !important; padding: 6px 10px !important; }
  #main-menu-screen .main-logo-wrap { width: 112px !important; height: 50px !important; }
  #main-menu-screen .brand-block .eyebrow { font-size: 8px !important; }
  #main-menu-screen .brand-subtitle { font-size: 10px !important; }
  #main-menu-screen .profile-actions .action-btn { min-height: 36px !important; padding: 0 9px !important; font-size: 10px !important; }
  #main-menu-screen .hero-panel { min-height: 0 !important; padding: 12px !important; }
  #main-menu-screen .hero-copy { padding: 12px !important; }
  #main-menu-screen .hero-copy h2 { margin: 5px 0 7px !important; font-size: clamp(22px, 2.6vw, 34px) !important; }
  #main-menu-screen .hero-copy p { font-size: 10px !important; line-height: 1.4 !important; }
  #main-menu-screen .hero-perks { margin-top: 7px !important; }
  #main-menu-screen .hero-perks span { padding: 4px 7px !important; font-size: 7px !important; }
  #main-menu-screen .stat-chip { min-width: 102px !important; padding: 5px 7px !important; }
  #main-menu-screen .stat-icon { width: 25px !important; height: 25px !important; }
  #main-menu-screen .stat-chip strong { font-size: 14px !important; }
  #main-menu-screen .profile-summary-card { padding: 12px !important; }
  #main-menu-screen .summary-top { margin-bottom: 7px !important; }
  #main-menu-screen .profile-name-row { margin-bottom: 7px !important; }
  #main-menu-screen #profileNicknameLarge { font-size: 21px !important; }
  #main-menu-screen .selected-skin-panel { padding: 8px !important; grid-template-columns: 48px minmax(0,1fr) !important; }
  #main-menu-screen .selected-skin-preview { width: 48px !important; height: 48px !important; }
  #main-menu-screen .name-lock-note { font-size: 8px !important; }
  #main-menu-screen .mode-card { padding: 12px !important; }
  #main-menu-screen .mode-card-head { grid-template-columns: 50px minmax(0,1fr) !important; gap: 9px !important; }
  #main-menu-screen .mode-icon { width: 50px !important; height: 50px !important; font-size: 19px !important; }
  #main-menu-screen .mode-number { top: 6px !important; right: 14px !important; font-size: 32px !important; }
  #main-menu-screen .mode-card h2 { font-size: clamp(19px, 1.7vw, 25px) !important; }
  #main-menu-screen .mode-card-head p { font-size: 9px !important; line-height: 1.35 !important; }
  #main-menu-screen .mode-reward-pill { margin-top: 4px !important; padding: 3px 7px !important; font-size: 8px !important; }
  #main-menu-screen .feature-list { margin: 6px 0 !important; gap: 2px !important; font-size: 8px !important; line-height: 1.25 !important; }
  #main-menu-screen .random-options { margin-top: 6px !important; }
  #main-menu-screen .difficulty-select { min-height: 31px !important; font-size: 9px !important; }
  #main-menu-screen .mode-action-btn { min-height: 38px !important; font-size: 11px !important; }
}

@media (max-width: 680px) and (orientation: portrait) {
  #main-menu-screen .main-menu-card {
    grid-template-rows: 66px minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  #main-menu-screen .top-profile-bar { min-height: 0 !important; padding: 5px 7px !important; flex-wrap: nowrap !important; gap: 5px !important; }
  #main-menu-screen .brand-block { flex-basis: auto !important; grid-template-columns: 82px minmax(0,1fr) !important; column-gap: 6px !important; }
  #main-menu-screen .main-logo-wrap { width: 82px !important; height: 43px !important; }
  #main-menu-screen .brand-block .eyebrow { display: none !important; }
  #main-menu-screen .brand-subtitle { grid-row: 1 / 3 !important; font-size: 8px !important; line-height: 1.25 !important; }
  #main-menu-screen .profile-actions { width: auto !important; display: grid !important; grid-template-columns: repeat(3, 30px) !important; gap: 3px !important; }
  #main-menu-screen .profile-actions .action-btn { width: 30px !important; min-height: 30px !important; padding: 0 !important; font-size: 0 !important; border-radius: 9px !important; }
  #main-menu-screen .profile-actions .action-btn img { width: 16px !important; height: 16px !important; }
  #main-menu-screen .profile-actions .logout-btn span { font-size: 17px !important; }
  #main-menu-screen .dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(112px, .72fr) !important; gap: 6px !important; }
  #main-menu-screen .hero-panel { min-height: 0 !important; padding: 7px !important; align-items: flex-end !important; background-position: 36% center !important; border-radius: 15px !important; }
  #main-menu-screen .hero-panel::after { inset: 22% 0 0 !important; }
  #main-menu-screen .hero-copy { width: 100% !important; padding: 7px !important; border-radius: 12px !important; }
  #main-menu-screen .quest-label { font-size: 6px !important; }
  #main-menu-screen .hero-copy h2 { margin: 3px 0 !important; font-size: clamp(16px, 5vw, 23px) !important; line-height: 1.05 !important; }
  #main-menu-screen .hero-copy p { display: none !important; }
  #main-menu-screen .hero-perks { margin-top: 4px !important; gap: 3px !important; }
  #main-menu-screen .hero-perks span { padding: 3px 5px !important; font-size: 5px !important; }
  #main-menu-screen .hero-mini-cards { top: 6px !important; right: 6px !important; gap: 3px !important; }
  #main-menu-screen .stat-chip { min-width: 72px !important; padding: 3px 5px !important; gap: 4px !important; border-radius: 9px !important; }
  #main-menu-screen .stat-icon { width: 18px !important; height: 18px !important; }
  #main-menu-screen .stat-label { font-size: 5px !important; }
  #main-menu-screen .stat-chip strong { font-size: 10px !important; }
  #main-menu-screen .profile-summary-card { display: flex !important; flex-direction: column !important; padding: 7px !important; border-radius: 15px !important; }
  #main-menu-screen .summary-label { font-size: 6px !important; }
  #main-menu-screen .level-pill { padding: 3px 5px !important; font-size: 6px !important; }
  #main-menu-screen .profile-name-row { margin: 0 !important; }
  #main-menu-screen .mini-note { font-size: 6px !important; }
  #main-menu-screen #profileNicknameLarge { font-size: 14px !important; }
  #main-menu-screen .small-btn { min-height: 25px !important; padding: 0 6px !important; font-size: 7px !important; border-radius: 7px !important; }
  #main-menu-screen .selected-skin-panel { margin-top: auto !important; padding: 5px !important; grid-template-columns: 36px minmax(0,1fr) !important; gap: 5px !important; border-radius: 10px !important; }
  #main-menu-screen .selected-skin-preview { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
  #main-menu-screen #selectedSkinName { margin: 1px 0 !important; font-size: 9px !important; }
  #main-menu-screen .name-lock-note { display: none !important; }
  #main-menu-screen .mode-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 6px !important; }
  #main-menu-screen .mode-card { min-height: 0 !important; padding: 8px !important; border-radius: 15px !important; }
  #main-menu-screen .mode-card-head { display: block !important; }
  #main-menu-screen .mode-icon { width: 34px !important; height: 34px !important; margin-bottom: 4px !important; border-radius: 10px !important; font-size: 13px !important; }
  #main-menu-screen .mode-number { top: 5px !important; right: 8px !important; font-size: 24px !important; }
  #main-menu-screen .mode-kicker { font-size: 6px !important; }
  #main-menu-screen .mode-card h2 { margin: 1px 0 3px !important; font-size: clamp(14px, 4vw, 19px) !important; }
  #main-menu-screen .mode-card-head p { display: none !important; }
  #main-menu-screen .mode-reward-pill { margin: 2px 0 0 !important; padding: 3px 5px !important; font-size: 6px !important; }
  #main-menu-screen .feature-list { margin: 5px 0 !important; font-size: 6px !important; gap: 2px !important; }
  #main-menu-screen .feature-list li:nth-child(n+2) { display: none !important; }
  #main-menu-screen .random-options { margin: 5px 0 0 !important; grid-template-columns: 1fr !important; gap: 3px !important; }
  #main-menu-screen .difficulty-select { min-height: 26px !important; padding: 0 5px !important; font-size: 7px !important; border-radius: 7px !important; }
  #main-menu-screen .mode-action-btn { min-height: 32px !important; padding: 0 4px !important; border-radius: 9px !important; font-size: 8px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #main-menu-screen .main-menu-card { grid-template-rows: 52px minmax(0, 1.03fr) minmax(0, .97fr) !important; }
  #main-menu-screen .top-profile-bar { min-height: 0 !important; }
  #main-menu-screen .hero-panel { min-height: 0 !important; }
  #main-menu-screen .mode-card { min-height: 0 !important; padding: 8px 10px !important; }
  #main-menu-screen .mode-card-head { grid-template-columns: 38px minmax(0,1fr) !important; gap: 7px !important; }
  #main-menu-screen .mode-icon { width: 38px !important; height: 38px !important; font-size: 14px !important; border-radius: 11px !important; }
  #main-menu-screen .mode-card h2 { font-size: 16px !important; }
  #main-menu-screen .mode-card-head p, #main-menu-screen .feature-list { display: none !important; }
  #main-menu-screen .mode-reward-pill { margin-top: 2px !important; }
  #main-menu-screen .random-options { margin-top: 4px !important; }
  #main-menu-screen .difficulty-select { min-height: 27px !important; }
  #main-menu-screen .mode-action-btn { min-height: 30px !important; font-size: 9px !important; }
}