/* Final portrait menu balance: use the full phone screen without clipping the start button. */
@media (orientation: portrait) and (max-width: 620px) {
  body:not(.game-active) .start-menu {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .start-menu-stage {
    width: min(100vw, 520px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(6px, env(safe-area-inset-top)) clamp(8px, 2.6vw, 14px) max(6px, env(safe-area-inset-bottom)) !important;
    grid-template-rows: clamp(176px, 31dvh, 248px) minmax(0, 1fr) !important;
    gap: clamp(4px, 0.8dvh, 8px) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .brand-showcase {
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.game-active) .brand-showcase::before {
    left: 50% !important;
    bottom: 0 !important;
    width: min(116vw, 650px) !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: translateX(-50%) !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }

  body:not(.game-active) .start-menu-panel {
    width: min(100%, 500px) !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows:
      minmax(56px, 0.8fr)
      minmax(52px, 0.72fr)
      minmax(50px, 0.66fr)
      minmax(110px, 1.28fr)
      clamp(52px, 7.2dvh, 66px) !important;
    gap: clamp(5px, 0.82dvh, 8px) !important;
    overflow: visible !important;
  }

  body:not(.game-active) .variant-group,
  body:not(.game-active) .level-group,
  body:not(.game-active) .home-options-section,
  body:not(.game-active) .competition-entry {
    padding: clamp(7px, 1.05dvh, 10px) clamp(8px, 2.2vw, 12px) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.game-active) .variant-group,
  body:not(.game-active) .level-group,
  body:not(.game-active) .home-options-section {
    align-content: stretch !important;
  }

  body:not(.game-active) .variant-group {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body:not(.game-active) .level-group {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body:not(.game-active) .home-options-section {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body:not(.game-active) .variant-group .menu-choice,
  body:not(.game-active) .level-group .menu-choice,
  body:not(.game-active) .home-action-card,
  body:not(.game-active) .premium-action,
  body:not(.game-active) .home-highscore,
  body:not(.game-active) .competition-copy {
    height: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  body:not(.game-active) .variant-group .menu-choice,
  body:not(.game-active) .level-group .menu-choice {
    padding: clamp(6px, 0.85dvh, 9px) clamp(7px, 1.9vw, 10px) !important;
  }

  body:not(.game-active) .variant-group .menu-choice::before,
  body:not(.game-active) .level-group .menu-choice::before,
  body:not(.game-active) .home-action-icon,
  body:not(.game-active) .premium-action-icon {
    display: block !important;
  }

  body:not(.game-active) .variant-group .menu-choice::before {
    width: clamp(34px, 8vw, 48px) !important;
    height: clamp(34px, 8vw, 48px) !important;
  }

  body:not(.game-active) .level-group .menu-choice::before {
    width: clamp(24px, 6.2vw, 36px) !important;
    height: clamp(24px, 6.2vw, 36px) !important;
  }

  body:not(.game-active) .home-action-card {
    grid-template-columns: clamp(28px, 7vw, 40px) minmax(0, 1fr) !important;
    padding: clamp(6px, 0.9dvh, 9px) clamp(6px, 1.8vw, 10px) !important;
  }

  body:not(.game-active) .home-action-card .home-action-icon {
    width: clamp(28px, 7vw, 40px) !important;
    height: clamp(28px, 7vw, 40px) !important;
  }

  body:not(.game-active) .variant-group .menu-choice strong,
  body:not(.game-active) .level-group .menu-choice strong,
  body:not(.game-active) .home-action-card strong,
  body:not(.game-active) .premium-action-text {
    line-height: 1.08 !important;
  }

  body:not(.game-active) .variant-group .menu-choice small,
  body:not(.game-active) .level-group .menu-choice small,
  body:not(.game-active) .home-action-card small,
  body:not(.game-active) .competition-copy p {
    display: none !important;
  }

  body:not(.game-active) .competition-entry {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(48px, 0.52fr) minmax(58px, 0.58fr) !important;
  }

  body:not(.game-active) .competition-copy {
    display: none !important;
  }

  body:not(.game-active) .home-highscore {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: clamp(7px, 1dvh, 10px) clamp(9px, 2.2vw, 12px) !important;
    grid-template-columns: clamp(38px, 9vw, 54px) minmax(0, 1fr) !important;
  }

  body:not(.game-active) .home-highscore .home-trophy {
    width: clamp(38px, 9vw, 54px) !important;
    height: clamp(38px, 9vw, 54px) !important;
  }

  body:not(.game-active) .online-entry-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(5px, 1.4vw, 8px) !important;
  }

  body:not(.game-active) .premium-action {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(24px, 1fr) auto !important;
    justify-items: center !important;
    text-align: center !important;
    padding: clamp(5px, 0.85dvh, 8px) 4px !important;
  }

  body:not(.game-active) .premium-action-icon {
    width: clamp(26px, 6.8vw, 40px) !important;
    height: clamp(26px, 6.8vw, 40px) !important;
  }

  body:not(.game-active) .premium-action-text {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button {
    min-height: 0 !important;
    height: 100% !important;
    font-size: clamp(24px, 6.6vw, 38px) !important;
  }
}

/* Desktop menu polish v9: keep landscape controls readable and single-icon. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel {
    --landscape-panel-gap: clamp(10px, 1.25dvh, 16px);
  }

  body:not(.game-active) .start-menu-panel > .home-options-section {
    min-height: clamp(132px, 16dvh, 168px) !important;
    padding: clamp(40px, 4.8dvh, 52px) clamp(14px, 1.2vw, 18px) clamp(14px, 1.7dvh, 18px) !important;
    align-content: stretch !important;
  }

  body:not(.game-active) .home-options-section .home-action-grid {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1vw, 16px) !important;
  }

  body:not(.game-active) .home-options-section .home-action-card {
    height: 100% !important;
    min-height: clamp(74px, 9dvh, 105px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(34px, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
    gap: clamp(4px, 0.75dvh, 8px) !important;
    padding: clamp(8px, 1dvh, 12px) clamp(8px, 0.9vw, 12px) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .home-options-section .home-action-icon,
  body:not(.game-active) .home-options-section .home-action-icon svg {
    width: clamp(34px, 4.6dvh, 52px) !important;
    height: clamp(34px, 4.6dvh, 52px) !important;
  }

  body:not(.game-active) .home-options-section .home-action-card span:last-child::after {
    font-size: clamp(13px, 1.05vw, 18px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body:not(.game-active) .start-menu-panel > .competition-entry {
    min-height: clamp(195px, 24dvh, 245px) !important;
    padding-bottom: clamp(16px, 2dvh, 22px) !important;
  }

  body:not(.game-active) .competition-entry .online-entry-actions {
    height: 100% !important;
    min-height: clamp(78px, 10dvh, 112px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(9px, 0.9vw, 15px) !important;
  }

  body:not(.game-active) .competition-entry .premium-action,
  body:not(.game-active) .competition-entry #openOnlineButton,
  body:not(.game-active) .competition-entry #openDailyButton,
  body:not(.game-active) .competition-entry #openRankingsButton {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(28px, 1fr) auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(3px, 0.55dvh, 6px) !important;
    padding: clamp(8px, 1dvh, 13px) clamp(8px, 0.9vw, 12px) !important;
    background-image: linear-gradient(180deg, rgba(10, 42, 46, 0.88), rgba(5, 18, 16, 0.9)) !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon {
    display: grid !important;
    place-items: center !important;
    width: clamp(30px, 4.3dvh, 46px) !important;
    height: clamp(30px, 4.3dvh, 46px) !important;
    background: none !important;
    background-image: none !important;
    opacity: 1 !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #ffe2a0 !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon svg * {
    stroke: currentColor !important;
    fill: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text {
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(12px, 0.95vw, 16px) !important;
    line-height: 1.05 !important;
  }

  body:not(.game-active) .competition-entry .premium-action small {
    display: inline-flex !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
  }
}

/* desktop-start-align-v13: keep this as the final landscape start-button override. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, clamp(360px, 34vw, 560px)) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    font-size: clamp(34px, 2vw, 54px) !important;
  }
}

/* desktop-start-align-v13: keep this as the final landscape start-button override. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, clamp(360px, 34vw, 560px)) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    font-size: clamp(34px, 2vw, 54px) !important;
  }
}

/* Browser landscape start button: shorter, calmer text, aligned under the right menu block. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, clamp(360px, 34vw, 560px)) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    font-size: clamp(34px, 2vw, 54px) !important;
  }
}

/* Desktop menu hard reset: the wide browser menu uses one explicit grid. */
@media (min-width: 1100px) and (min-height: 650px) {
  body:not(.game-active) .start-menu-stage {
    grid-template-columns: minmax(560px, 1.12fr) minmax(520px, 0.88fr) !important;
    grid-template-rows:
      minmax(130px, 0.88fr)
      minmax(130px, 0.82fr)
      minmax(98px, 0.58fr)
      minmax(170px, 1fr)
      clamp(76px, 9dvh, 108px) !important;
    grid-template-areas:
      "hero variant"
      "hero level"
      "hero options"
      "hero competition"
      "start start" !important;
  }

  body:not(.game-active) .brand-showcase {
    grid-area: hero !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  body:not(.game-active) .start-menu-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(560px, 1.12fr) minmax(520px, 0.88fr) !important;
    grid-template-rows:
      minmax(130px, 0.88fr)
      minmax(130px, 0.82fr)
      minmax(98px, 0.58fr)
      minmax(170px, 1fr)
      clamp(76px, 9dvh, 108px) !important;
    grid-template-areas:
      "empty variant"
      "empty level"
      "empty options"
      "empty competition"
      "start start" !important;
    gap: clamp(12px, 1.6dvh, 20px) clamp(18px, 2vw, 30px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group,
  body:not(.game-active) .start-menu-panel > .level-group,
  body:not(.game-active) .start-menu-panel > .home-options-section,
  body:not(.game-active) .start-menu-panel > .competition-entry,
  body:not(.game-active) .start-menu-panel > .start-game-button {
    pointer-events: auto !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group { grid-area: variant !important; }
  body:not(.game-active) .start-menu-panel > .level-group { grid-area: level !important; }
  body:not(.game-active) .start-menu-panel > .home-options-section { grid-area: options !important; }
  body:not(.game-active) .start-menu-panel > .competition-entry { grid-area: competition !important; }
  body:not(.game-active) .start-menu-panel > .start-game-button { grid-area: start !important; }

  body:not(.game-active) .start-menu-panel > .variant-group,
  body:not(.game-active) .start-menu-panel > .level-group,
  body:not(.game-active) .start-menu-panel > .home-options-section,
  body:not(.game-active) .start-menu-panel > .competition-entry {
    display: grid !important;
    border: 1px solid rgba(219, 155, 55, 0.72) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(18, 31, 23, 0.92), rgba(10, 11, 8, 0.86)) !important;
    box-shadow: inset 0 0 26px rgba(255, 211, 93, 0.08), 0 12px 28px rgba(0, 0, 0, 0.36) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group,
  body:not(.game-active) .start-menu-panel > .level-group {
    padding: 26px 18px 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 14px !important;
  }

  body:not(.game-active) .start-menu-panel > .level-group {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group legend,
  body:not(.game-active) .start-menu-panel > .level-group legend,
  body:not(.game-active) .start-menu-panel > .home-options-section > h2,
  body:not(.game-active) .start-menu-panel > .competition-entry > h2 {
    display: none !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group::before,
  body:not(.game-active) .start-menu-panel > .level-group::before,
  body:not(.game-active) .start-menu-panel > .home-options-section::before,
  body:not(.game-active) .start-menu-panel > .competition-entry::before {
    position: absolute !important;
    inset: 6px 20px auto !important;
    display: block !important;
    color: #e4b34f !important;
    font: 700 clamp(16px, 1.35vw, 22px) / 1.1 Georgia, serif !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    content: "" !important;
    pointer-events: none !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group::before { content: "SPEELVARIANT" !important; }
  body:not(.game-active) .start-menu-panel > .level-group::before { content: "AI-NIVEAU" !important; }
  body:not(.game-active) .start-menu-panel > .home-options-section::before { content: "OPTIES" !important; }
  body:not(.game-active) .start-menu-panel > .competition-entry::before { content: "COMPETITIE" !important; }

  body:not(.game-active) .variant-option,
  body:not(.game-active) .menu-choice {
    min-width: 0 !important;
    height: 100% !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: clamp(42px, 3.6vw, 58px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  body:not(.game-active) .variant-option img,
  body:not(.game-active) .menu-choice img,
  body:not(.game-active) .menu-choice .difficulty-icon {
    width: clamp(42px, 3.6vw, 58px) !important;
    height: clamp(42px, 3.6vw, 58px) !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  body:not(.game-active) .variant-option strong,
  body:not(.game-active) .menu-choice strong {
    display: block !important;
    color: #fff3cf !important;
    font: 600 clamp(18px, 1.45vw, 24px) / 1.15 Georgia, serif !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body:not(.game-active) .variant-option small,
  body:not(.game-active) .menu-choice small {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(255, 239, 197, 0.88) !important;
    font-size: clamp(12px, 0.95vw, 15px) !important;
    line-height: 1.22 !important;
  }

  body:not(.game-active) .start-menu-panel > .home-options-section {
    padding: 30px 18px 14px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:not(.game-active) .home-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.game-active) .home-action-card {
    min-width: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(40px, 3.2vw, 52px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    text-align: left !important;
    border-radius: 12px !important;
  }

  body:not(.game-active) .home-action-card::before,
  body:not(.game-active) .home-action-card::after,
  body:not(.game-active) .home-action-icon::before,
  body:not(.game-active) .home-action-icon::after {
    content: none !important;
    display: none !important;
  }

  body:not(.game-active) .home-action-card strong,
  body:not(.game-active) .home-action-card small {
    display: none !important;
  }

  body:not(.game-active) .home-action-card span:last-child {
    font-size: 0 !important;
  }

  body:not(.game-active) .home-action-card span:last-child::before,
  body:not(.game-active) .competition-entry .premium-action-text::before {
    content: none !important;
    display: none !important;
  }

  body:not(.game-active) .home-action-card span:last-child::after {
    display: block !important;
    color: #fff4d6 !important;
    font: 700 clamp(15px, 1.1vw, 18px) / 1.1 Arial, sans-serif !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  body:not(.game-active) .home-action-card:nth-child(1) span:last-child::after { content: "Regels" !important; }
  body:not(.game-active) .home-action-card:nth-child(2) span:last-child::after { content: "Demo" !important; }
  body:not(.game-active) .home-action-card:nth-child(3) span:last-child::after { content: "Setup" !important; }

  body:not(.game-active) .start-menu-panel > .competition-entry {
    padding: 34px 18px 16px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(70px, 0.55fr) minmax(74px, 0.65fr) !important;
    gap: 12px !important;
  }

  body:not(.game-active) .competition-entry .competition-copy {
    display: none !important;
  }

  body:not(.game-active) .competition-entry .home-highscore {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: clamp(48px, 4vw, 62px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.game-active) .competition-entry .home-highscore strong,
  body:not(.game-active) .competition-entry .home-highscore span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.game-active) .competition-entry .online-entry-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.game-active) .competition-entry .premium-action {
    min-width: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(30px, 3vw, 44px) auto auto !important;
    place-items: center !important;
    gap: 4px !important;
    padding: 8px 8px !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  body:not(.game-active) .competition-entry .premium-action::before,
  body:not(.game-active) .competition-entry .premium-action::after,
  body:not(.game-active) .competition-entry .premium-action-icon::before,
  body:not(.game-active) .competition-entry .premium-action-icon::after {
    content: none !important;
    display: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon {
    display: block !important;
    width: clamp(30px, 3vw, 44px) !important;
    height: clamp(30px, 3vw, 44px) !important;
    margin: 0 !important;
    background: none !important;
  }

  body:not(.game-active) .home-action-icon svg,
  body:not(.game-active) .competition-entry .premium-action-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text {
    font-size: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text::after {
    display: block !important;
    color: #fff4d6 !important;
    font: 700 clamp(13px, 1vw, 16px) / 1.1 Arial, sans-serif !important;
    letter-spacing: 0.01em !important;
  }

  body:not(.game-active) .competition-entry .premium-action:nth-child(1) .premium-action-text::after { content: "Online" !important; }
  body:not(.game-active) .competition-entry .premium-action:nth-child(2) .premium-action-text::after { content: "Daguitdaging" !important; }
  body:not(.game-active) .competition-entry .premium-action:nth-child(3) .premium-action-text::after { content: "Klassement" !important; }

  body:not(.game-active) .competition-entry .premium-action small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 1px 8px !important;
    max-width: 100% !important;
    font-size: clamp(10px, 0.8vw, 12px) !important;
    line-height: 1.1 !important;
  }

  html body:not(.game-active) main.start-menu .home-action-card span:last-child::before,
  html body:not(.game-active) main.start-menu .premium-action-text::before {
    content: none !important;
    display: none !important;
  }

  html body:not(.game-active) main.start-menu .home-action-card strong,
  html body:not(.game-active) main.start-menu .home-action-card small {
    display: none !important;
  }

  html body:not(.game-active) main.start-menu .home-action-card span:last-child {
    font-size: 0 !important;
  }

  html body:not(.game-active) main.start-menu .home-action-card:nth-child(1) span:last-child::after { content: "Regels" !important; }
  html body:not(.game-active) main.start-menu .home-action-card:nth-child(2) span:last-child::after { content: "Demo" !important; }
  html body:not(.game-active) main.start-menu .home-action-card:nth-child(3) span:last-child::after { content: "Setup" !important; }

  html body:not(.game-active) main.start-menu .premium-action:nth-child(1) .premium-action-text::after { content: "Online" !important; }
  html body:not(.game-active) main.start-menu .premium-action:nth-child(2) .premium-action-text::after { content: "Dagspel" !important; }
  html body:not(.game-active) main.start-menu .premium-action:nth-child(3) .premium-action-text::after { content: "Stand" !important; }
}

/* Match the strongest legacy landscape selector so desktop cannot collapse. */
@media (min-width: 1100px) and (min-height: 650px) {
  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    display: grid !important;
    grid-template:
      "empty variant" minmax(130px, 0.88fr)
      "empty level" minmax(130px, 0.82fr)
      "empty options" minmax(98px, 0.58fr)
      "empty competition" minmax(170px, 1fr)
      "start start" clamp(76px, 9dvh, 108px)
      / minmax(560px, 1.12fr) minmax(520px, 0.88fr) !important;
    gap: clamp(12px, 1.6dvh, 20px) clamp(18px, 2vw, 30px) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel > .variant-group {
    grid-area: variant !important;
  }

  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel > .level-group {
    grid-area: level !important;
  }

  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel > .home-options-section {
    grid-area: options !important;
  }

  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel > .competition-entry {
    grid-area: competition !important;
  }

  html body:not(.game-active) main.start-menu .start-menu-stage > .start-menu-panel.start-menu-panel > .start-game-button {
    grid-area: start !important;
  }

  html body:not(.game-active) .variant-group legend,
  html body:not(.game-active) .level-group legend {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html body:not(.game-active) .variant-group::before,
  html body:not(.game-active) .level-group::before {
    display: block !important;
    color: #e6b54e !important;
    font-size: clamp(16px, 1.1vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    grid-column: 1 / -1 !important;
  }

  html body:not(.game-active) .variant-group::before {
    content: "SPEELVARIANT" !important;
  }

  html body:not(.game-active) .level-group::before {
    content: "AI-NIVEAU" !important;
  }

  html body:not(.game-active) .home-options-section h2,
  html body:not(.game-active) .competition-entry::before {
    font-size: clamp(16px, 1.1vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
  }

  html body:not(.game-active) .home-options-section .home-action-card,
  html body:not(.game-active) .competition-entry .premium-action {
    position: relative !important;
    grid-template-columns: clamp(34px, 2.8vw, 48px) minmax(0, 1fr) !important;
    justify-content: start !important;
    align-items: center !important;
    padding: 8px 10px !important;
    min-height: 0 !important;
  }

  html body:not(.game-active) .home-action-card::before,
  html body:not(.game-active) .home-action-card::after,
  html body:not(.game-active) .premium-action::before,
  html body:not(.game-active) .premium-action::after,
  html body:not(.game-active) .home-action-icon::before,
  html body:not(.game-active) .home-action-icon::after,
  html body:not(.game-active) .premium-action-icon::before,
  html body:not(.game-active) .premium-action-icon::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.game-active) .home-action-card small,
  html body:not(.game-active) .competition-entry .premium-action small {
    display: none !important;
  }

  html body:not(.game-active) .home-action-card strong,
  html body:not(.game-active) .premium-action-text {
    font-size: clamp(13px, 1vw, 17px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body:not(.game-active) .home-action-card > span:last-child strong,
  html body:not(.game-active) .home-action-card > span:last-child small {
    display: none !important;
  }

  html body:not(.game-active) .home-action-card > span:last-child::before {
    display: block !important;
    color: #fff5d6 !important;
    font-size: clamp(14px, 1vw, 17px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  html body:not(.game-active) .home-action-card[data-info="rules"] > span:last-child::before {
    content: "Regels" !important;
  }

  html body:not(.game-active) #startDemoHomeButton > span:last-child::before {
    content: "Demo" !important;
  }

  html body:not(.game-active) #openSettingsButton > span:last-child::before {
    content: "Setup" !important;
  }

  html body:not(.game-active) .home-action-icon,
  html body:not(.game-active) .premium-action-icon {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: clamp(34px, 2.8vw, 48px) !important;
    height: clamp(34px, 2.8vw, 48px) !important;
    margin: 0 !important;
    place-self: center !important;
  }

  html body:not(.game-active) .home-action-card > *,
  html body:not(.game-active) .premium-action > * {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  html body:not(.game-active) .home-action-card > span:last-child,
  html body:not(.game-active) .premium-action-text {
    display: block !important;
    align-self: center !important;
  }

  html body:not(.game-active) .competition-entry {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) minmax(58px, 0.48fr) !important;
  }

  html body:not(.game-active) .competition-entry .competition-copy,
  html body:not(.game-active) .competition-entry .home-highscore {
    align-content: center !important;
  }

  html body:not(.game-active) .competition-entry .competition-copy {
    display: none !important;
  }

  html body:not(.game-active) .competition-entry .home-highscore {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: clamp(44px, 4vw, 60px) minmax(0, 1fr) !important;
    max-width: none !important;
  }

  html body:not(.game-active) .competition-entry .competition-copy strong,
  html body:not(.game-active) .competition-entry .home-highscore strong {
    font-size: clamp(15px, 1.12vw, 20px) !important;
    line-height: 1.15 !important;
  }

  html body:not(.game-active) .competition-entry .competition-copy p,
  html body:not(.game-active) .competition-entry .home-highscore small {
    font-size: clamp(11px, 0.82vw, 14px) !important;
    line-height: 1.2 !important;
  }

  html body:not(.game-active) .competition-entry .online-entry-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html body:not(.game-active) .competition-entry .premium-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    padding: 8px 10px !important;
  }

  html body:not(.game-active) .competition-entry .premium-action-icon {
    display: none !important;
  }

  html body:not(.game-active) .competition-entry .premium-action-text {
    font-size: 0 !important;
  }

  html body:not(.game-active) .competition-entry .premium-action-text::before {
    display: block !important;
    color: #fff5d6 !important;
    font-size: clamp(14px, 1vw, 17px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body:not(.game-active) .competition-entry .premium-action:nth-child(1) .premium-action-text::before {
    content: "Online" !important;
  }

  html body:not(.game-active) .competition-entry .premium-action:nth-child(2) .premium-action-text::before {
    content: "Daguitdaging" !important;
  }

  html body:not(.game-active) .competition-entry .premium-action:nth-child(3) .premium-action-text::before {
    content: "Klassement" !important;
  }

  html body:not(.game-active) #startGameButton {
    font-size: clamp(34px, 3vw, 54px) !important;
  }
}

@media (orientation: portrait) and (max-width: 390px), (orientation: portrait) and (max-height: 720px) {
  body:not(.game-active) .start-menu-stage {
    grid-template-rows: clamp(148px, 27dvh, 194px) minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body:not(.game-active) .start-menu-panel {
    grid-template-rows:
      minmax(50px, 0.72fr)
      minmax(46px, 0.62fr)
      minmax(44px, 0.58fr)
      minmax(102px, 1.15fr)
      clamp(48px, 7dvh, 56px) !important;
    gap: 4px !important;
  }

  body:not(.game-active) .variant-group,
  body:not(.game-active) .level-group,
  body:not(.game-active) .home-options-section,
  body:not(.game-active) .competition-entry {
    padding: 7px !important;
  }

  body:not(.game-active) .brand-showcase::before {
    width: min(114vw, 560px) !important;
  }
}

/* Desktop menu repair: keep the large browser layout readable and aligned. */
@media (min-width: 1100px) and (min-height: 650px) {
  body:not(.game-active) .start-menu {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(14px, 2dvh, 26px) !important;
  }

  body:not(.game-active) .start-menu-stage {
    width: min(96vw, 1540px) !important;
    height: min(94dvh, 980px) !important;
    max-height: 980px !important;
    margin: 0 auto !important;
    padding: clamp(18px, 2.2dvh, 30px) !important;
    display: grid !important;
    grid-template-columns: minmax(570px, 1.12fr) minmax(520px, 0.88fr) !important;
    grid-template-rows:
      minmax(130px, 0.88fr)
      minmax(130px, 0.82fr)
      minmax(96px, 0.58fr)
      minmax(168px, 1fr)
      clamp(76px, 10dvh, 112px) !important;
    grid-template-areas:
      "hero variant"
      "hero level"
      "hero options"
      "hero competition"
      "start start" !important;
    gap: clamp(12px, 1.6dvh, 20px) clamp(18px, 2vw, 30px) !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  body:not(.game-active) .brand-showcase {
    grid-area: hero !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  body:not(.game-active) .brand-showcase::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(104%, 880px) !important;
    height: min(104%, 780px) !important;
    transform: translate(-50%, -50%) !important;
    background: url("./assets/vertical-menu/table-menu.png") center / contain no-repeat !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body:not(.game-active) .brand-showcase > img,
  body:not(.game-active) .brand-showcase > p,
  body:not(.game-active) .start-heading,
  body:not(.game-active) .menu-error {
    display: none !important;
  }

  body:not(.game-active) .start-menu-panel {
    display: contents !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group,
  body:not(.game-active) .start-menu-panel > .level-group,
  body:not(.game-active) .start-menu-panel > .home-options-section,
  body:not(.game-active) .start-menu-panel > .competition-entry,
  body:not(.game-active) .start-menu-panel > .start-game-button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow: hidden !important;
    z-index: 3 !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group {
    grid-area: variant !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  body:not(.game-active) .start-menu-panel > .level-group {
    grid-area: level !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  body:not(.game-active) .start-menu-panel > .home-options-section {
    grid-area: options !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  body:not(.game-active) .home-options-section .home-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.game-active) .variant-group legend,
  body:not(.game-active) .level-group legend,
  body:not(.game-active) .home-options-section h2,
  body:not(.game-active) .competition-entry::before {
    position: relative !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #e6b54e !important;
    font-size: clamp(15px, 1.25vw, 22px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    background: none !important;
  }

  body:not(.game-active) .menu-choice,
  body:not(.game-active) .home-action-card,
  body:not(.game-active) .premium-action,
  body:not(.game-active) .home-highscore,
  body:not(.game-active) .competition-copy {
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(213, 157, 67, 0.7) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(35, 20, 10, 0.86), rgba(8, 17, 13, 0.82)) !important;
    box-shadow: inset 0 0 18px rgba(255, 216, 116, 0.05), 0 8px 20px rgba(0, 0, 0, 0.28) !important;
  }

  body:not(.game-active) .menu-choice:has(input:checked),
  body:not(.game-active) .home-action-card.primary {
    background: linear-gradient(145deg, rgba(21, 91, 38, 0.9), rgba(8, 44, 22, 0.86)) !important;
    box-shadow: inset 0 0 20px rgba(248, 208, 95, 0.14), 0 0 16px rgba(217, 170, 69, 0.22) !important;
  }

  body:not(.game-active) .variant-group .menu-choice,
  body:not(.game-active) .level-group .menu-choice {
    display: grid !important;
    grid-template-columns: clamp(42px, 4vw, 62px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px !important;
  }

  body:not(.game-active) .variant-group .menu-choice::before,
  body:not(.game-active) .level-group .menu-choice::before {
    display: block !important;
    width: clamp(42px, 4vw, 62px) !important;
    height: clamp(42px, 4vw, 62px) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  body:not(.game-active) .menu-choice span,
  body:not(.game-active) .home-action-card span:last-child,
  body:not(.game-active) .premium-action-text {
    min-width: 0 !important;
  }

  body:not(.game-active) .menu-choice strong,
  body:not(.game-active) .home-action-card strong,
  body:not(.game-active) .premium-action-text,
  body:not(.game-active) .home-highscore strong {
    display: block !important;
    color: #fff5d6 !important;
    font-size: clamp(15px, 1.18vw, 20px) !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.game-active) .menu-choice small,
  body:not(.game-active) .home-action-card small,
  body:not(.game-active) .competition-copy p,
  body:not(.game-active) .home-highscore small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #ead8ad !important;
    font-size: clamp(11px, 0.88vw, 15px) !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .home-action-card {
    display: grid !important;
    grid-template-columns: clamp(38px, 3.2vw, 52px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  body:not(.game-active) .home-action-icon,
  body:not(.game-active) .home-action-icon svg {
    width: clamp(38px, 3.2vw, 52px) !important;
    height: clamp(38px, 3.2vw, 52px) !important;
  }

  body:not(.game-active) .start-menu-panel > .competition-entry {
    grid-area: competition !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 0.95fr) minmax(160px, 1fr) minmax(190px, 1.15fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  body:not(.game-active) .competition-entry .competition-copy,
  body:not(.game-active) .competition-entry .home-highscore,
  body:not(.game-active) .competition-entry .online-entry-actions {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  body:not(.game-active) .competition-entry .competition-copy {
    grid-column: 1 !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  body:not(.game-active) .competition-entry .home-highscore {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: clamp(44px, 4.5vw, 66px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  body:not(.game-active) .home-highscore .home-trophy {
    width: clamp(44px, 4.5vw, 66px) !important;
    height: clamp(44px, 4.5vw, 66px) !important;
  }

  body:not(.game-active) .competition-entry .home-player-section {
    display: none !important;
  }

  body:not(.game-active) .competition-entry .online-entry-actions {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:not(.game-active) .competition-entry .premium-action {
    display: grid !important;
    grid-template-columns: clamp(28px, 2.8vw, 42px) minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    text-align: left !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon {
    width: clamp(28px, 2.8vw, 42px) !important;
    height: clamp(28px, 2.8vw, 42px) !important;
    margin: 0 !important;
    background: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text {
    text-align: left !important;
    white-space: nowrap !important;
  }

  body:not(.game-active) .competition-entry .premium-action small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f4cf65 !important;
    border: 1px solid rgba(244, 207, 101, 0.75) !important;
    border-radius: 999px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    grid-area: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 32px !important;
    color: #f7d68a !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65) !important;
    font-size: clamp(36px, 3.6vw, 62px) !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    border-radius: 18px !important;
    border: 2px solid rgba(239, 184, 78, 0.95) !important;
    background: linear-gradient(180deg, #1f6f29, #0d4d1d 58%, #093615) !important;
    box-shadow: inset 0 0 22px rgba(255, 235, 144, 0.22), 0 0 0 3px rgba(74, 38, 12, 0.72), 0 14px 30px rgba(0, 0, 0, 0.42) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button::before,
  body:not(.game-active) .start-menu-panel > .start-game-button::after {
    content: none !important;
    display: none !important;
  }
}

/* Final desktop override: keep wide browser menu sections in their own rows. */
@media (min-width: 1100px) and (min-height: 650px) {
  body:not(.game-active) .start-menu-stage {
    grid-template-columns: minmax(560px, 1.12fr) minmax(520px, 0.88fr) !important;
    grid-template-rows:
      minmax(130px, 0.88fr)
      minmax(130px, 0.82fr)
      minmax(98px, 0.58fr)
      minmax(170px, 1fr)
      clamp(76px, 9dvh, 108px) !important;
    grid-template-areas:
      "hero variant"
      "hero level"
      "hero options"
      "hero competition"
      "start start" !important;
  }

  body:not(.game-active) .brand-showcase {
    grid-area: hero !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  body:not(.game-active) .start-menu-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    display: grid !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    grid-template-columns: minmax(560px, 1.12fr) minmax(520px, 0.88fr) !important;
    grid-template-rows:
      minmax(130px, 0.88fr)
      minmax(130px, 0.82fr)
      minmax(98px, 0.58fr)
      minmax(170px, 1fr)
      clamp(76px, 9dvh, 108px) !important;
    grid-template-areas:
      "empty variant"
      "empty level"
      "empty options"
      "empty competition"
      "start start" !important;
    gap: clamp(12px, 1.6dvh, 20px) clamp(18px, 2vw, 30px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group,
  body:not(.game-active) .start-menu-panel > .level-group,
  body:not(.game-active) .start-menu-panel > .home-options-section,
  body:not(.game-active) .start-menu-panel > .competition-entry,
  body:not(.game-active) .start-menu-panel > .start-game-button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  body:not(.game-active) .start-menu-panel > .variant-group { grid-area: variant !important; }
  body:not(.game-active) .start-menu-panel > .level-group { grid-area: level !important; }
  body:not(.game-active) .start-menu-panel > .home-options-section { grid-area: options !important; }
  body:not(.game-active) .start-menu-panel > .competition-entry { grid-area: competition !important; }
  body:not(.game-active) .start-menu-panel > .start-game-button { grid-area: start !important; }
}

/* Desktop/menu polish v6: clear section titles, level symbols, premium buttons and CTA width. */
body:not(.game-active) .level-group,
body:not(.game-active) .home-options-section {
  position: relative !important;
  overflow: hidden !important;
}

body:not(.game-active) .level-group legend,
body:not(.game-active) .home-options-section h2 {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  margin: 0 auto clamp(7px, 1.1dvh, 12px) !important;
  padding: 0 12px !important;
  background: linear-gradient(90deg, transparent, rgba(9, 12, 8, 0.86) 18%, rgba(9, 12, 8, 0.86) 82%, transparent) !important;
  line-height: 1.12 !important;
  pointer-events: none !important;
}

body:not(.game-active) .level-group .menu-choice,
body:not(.game-active) .home-options-section .home-action-card {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.game-active) .level-group .menu-choice::before {
  content: "\2660" !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: clamp(34px, 4.2dvh, 58px) !important;
  height: clamp(34px, 4.2dvh, 58px) !important;
  border-radius: 999px !important;
  margin: 0 !important;
  color: #fff1ca !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(24px, 3.2dvh, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -0.08em !important;
  text-indent: -0.04em !important;
  background:
    radial-gradient(circle at 42% 34%, rgba(43, 92, 35, 0.98), rgba(8, 38, 17, 0.96) 72%),
    linear-gradient(180deg, #174f23, #071d0e) !important;
  border: 2px solid rgba(211, 160, 71, 0.92) !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.42), 0 3px 7px rgba(0, 0, 0, 0.34) !important;
}

body:not(.game-active) .level-group .menu-choice:nth-of-type(2)::before {
  content: "\2660\2660" !important;
  font-size: clamp(19px, 2.7dvh, 34px) !important;
}

body:not(.game-active) .level-group .menu-choice:nth-of-type(3)::before {
  content: "\2660\2660\2660" !important;
  font-size: clamp(16px, 2.35dvh, 29px) !important;
}

body:not(.game-active) .level-group .menu-choice:has(input:checked)::before {
  border-color: #f3c85a !important;
  box-shadow:
    0 0 0 2px rgba(255, 229, 136, 0.22),
    0 0 18px rgba(245, 198, 79, 0.52),
    inset 0 0 12px rgba(255, 228, 126, 0.18) !important;
}

body:not(.game-active) .level-group .menu-choice input:checked + span {
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.game-active) .level-group .menu-choice > span {
  min-width: 0 !important;
  width: 100% !important;
}

body:not(.game-active) .online-entry-actions .premium-action .premium-action-text::before,
body:not(.game-active) .online-entry-actions .premium-action .premium-action-text::after,
body:not(.game-active) .premium-action::before,
body:not(.game-active) .premium-action::after {
  content: none !important;
  display: none !important;
}

body:not(.game-active) .online-entry-actions .premium-action {
  overflow: hidden !important;
}

body:not(.game-active) .online-entry-actions .premium-action-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
}

body:not(.game-active) .online-entry-actions .premium-action-icon svg {
  display: none !important;
}

body:not(.game-active) #openOnlineButton .premium-action-icon {
  background-image: url("./assets/vertical-menu/icon-online.png") !important;
}

body:not(.game-active) #openDailyButton .premium-action-icon {
  background-image: url("./assets/vertical-menu/icon-daguitdaging.png") !important;
}

body:not(.game-active) #openRankingsButton .premium-action-icon {
  background-image: url("./assets/vertical-menu/icon-ranglijst.png") !important;
}

body:not(.game-active) .online-entry-actions .premium-action-text {
  min-width: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.08 !important;
}

body:not(.game-active) .start-menu-panel > .start-game-button::after,
body:not(.game-active) .start-menu-panel > .start-game-button:active::after,
body:not(.game-active) .start-menu-panel > .start-game-button.pressed::after {
  content: none !important;
  display: none !important;
}

@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .level-group {
    padding: clamp(42px, 5.2dvh, 58px) clamp(14px, 1.25vw, 18px) clamp(12px, 1.8dvh, 18px) !important;
  }

  body:not(.game-active) .start-menu-panel > .home-options-section {
    padding: clamp(38px, 5dvh, 52px) clamp(14px, 1.25vw, 18px) clamp(12px, 1.8dvh, 16px) !important;
  }

  body:not(.game-active) .start-menu-panel > .level-group::before,
  body:not(.game-active) .start-menu-panel > .home-options-section::before {
    top: clamp(8px, 1.2dvh, 12px) !important;
    z-index: 5 !important;
    height: clamp(20px, 2.7dvh, 30px) !important;
    line-height: 1.05 !important;
  }

  body:not(.game-active) .level-group legend,
  body:not(.game-active) .home-options-section h2 {
    margin-bottom: clamp(8px, 1.6dvh, 14px) !important;
  }

  body:not(.game-active) .level-group .menu-choice {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(3px, 0.7dvh, 7px) !important;
    text-align: center !important;
    padding: clamp(8px, 1.4dvh, 14px) clamp(8px, 1.2vw, 14px) !important;
  }

  body:not(.game-active) .level-group .menu-choice > span {
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    text-align: center !important;
  }

  body:not(.game-active) .level-group .menu-choice strong {
    font-size: clamp(15px, 1.55vw, 24px) !important;
    line-height: 1.05 !important;
  }

  body:not(.game-active) .level-group .menu-choice small {
    max-width: 15ch !important;
    font-size: clamp(9px, 0.85vw, 14px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }

  body:not(.game-active) .home-options-section {
    padding-top: clamp(22px, 3.4dvh, 36px) !important;
  }

  body:not(.game-active) .home-options-section .home-action-grid {
    align-items: stretch !important;
  }

  body:not(.game-active) .home-options-section .home-action-card {
    grid-template-columns: clamp(34px, 3.1vw, 52px) minmax(0, 1fr) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    min-height: clamp(58px, 8.5dvh, 88px) !important;
    padding: clamp(8px, 1.35dvh, 13px) clamp(10px, 1.2vw, 16px) !important;
  }

  body:not(.game-active) .home-options-section .home-action-card strong {
    font-size: clamp(13px, 1.2vw, 19px) !important;
    line-height: 1.08 !important;
  }

  body:not(.game-active) .competition-entry .online-entry-actions {
    gap: clamp(7px, 1.15dvh, 12px) !important;
  }

  body:not(.game-active) .competition-entry .premium-action,
  body:not(.game-active) .competition-entry #openOnlineButton,
  body:not(.game-active) .competition-entry #openDailyButton,
  body:not(.game-active) .competition-entry #openRankingsButton {
    grid-template-columns: clamp(30px, 2.45vw, 44px) minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    gap: clamp(8px, 0.9vw, 13px) !important;
    padding: clamp(7px, 1dvh, 11px) clamp(9px, 1vw, 15px) !important;
    text-align: left !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon {
    width: clamp(30px, 2.45vw, 44px) !important;
    height: clamp(30px, 2.45vw, 44px) !important;
    background: none !important;
    background-image: none !important;
    transform: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon svg,
  body:not(.game-active) .competition-entry .premium-action svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #f6d27a !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text {
    text-align: left !important;
    white-space: nowrap !important;
    font-size: clamp(13px, 1.05vw, 18px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.game-active) .competition-entry .premium-action small {
    display: inline-flex !important;
    font-size: clamp(8px, 0.72vw, 11px) !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    width: min(100%, 620px) !important;
    justify-self: center !important;
    min-height: clamp(62px, 8dvh, 92px) !important;
    max-height: clamp(62px, 8dvh, 92px) !important;
    padding-inline: clamp(28px, 3.4vw, 58px) !important;
  }

  body:not(.game-active) .level-group .menu-choice {
    grid-template-rows: clamp(34px, 4.2dvh, 54px) auto !important;
    gap: clamp(2px, 0.45dvh, 5px) !important;
  }

  body:not(.game-active) .level-group .menu-choice small {
    display: none !important;
  }

  body:not(.game-active) .level-group .menu-choice strong {
    font-size: clamp(16px, 1.38vw, 23px) !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
  }

  body:not(.game-active) .home-options-section .home-action-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(24px, 3.1dvh, 38px) auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(2px, 0.5dvh, 5px) !important;
    text-align: center !important;
  }

  body:not(.game-active) .home-options-section .home-action-icon,
  body:not(.game-active) .home-options-section .home-action-icon svg {
    width: clamp(24px, 3.1dvh, 38px) !important;
    height: clamp(24px, 3.1dvh, 38px) !important;
  }

  body:not(.game-active) .home-action-card span:last-child::after {
    font-size: clamp(11px, 1vw, 16px) !important;
    line-height: 1.05 !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton .premium-action-icon,
  body:not(.game-active) .competition-entry #openDailyButton .premium-action-icon,
  body:not(.game-active) .competition-entry #openRankingsButton .premium-action-icon {
    background: none !important;
    background-image: none !important;
  }

  body:not(.game-active) .competition-entry .premium-action,
  body:not(.game-active) .competition-entry #openOnlineButton,
  body:not(.game-active) .competition-entry #openDailyButton,
  body:not(.game-active) .competition-entry #openRankingsButton {
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(26px, 3.2dvh, 38px) auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(2px, 0.45dvh, 5px) !important;
    text-align: center !important;
  }

  body:not(.game-active) .competition-entry .premium-action-icon {
    width: clamp(26px, 3.2dvh, 38px) !important;
    height: clamp(26px, 3.2dvh, 38px) !important;
    justify-self: center !important;
    align-self: center !important;
  }

  body:not(.game-active) .competition-entry .premium-action-text {
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(11px, 0.95vw, 16px) !important;
    line-height: 1.02 !important;
  }

  body:not(.game-active) .competition-entry .premium-action small {
    justify-self: center !important;
    margin: 0 !important;
  }
}

/* Final desktop landscape menu pass: applied last on purpose. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .level-group {
    padding-top: clamp(40px, 4.8dvh, 54px) !important;
  }

  body:not(.game-active) .level-group .menu-choice {
    grid-template-rows: clamp(30px, 4dvh, 48px) auto !important;
    min-height: clamp(74px, 9dvh, 104px) !important;
  }

  body:not(.game-active) .start-menu-panel > .home-options-section {
    padding: clamp(40px, 4.8dvh, 54px) clamp(14px, 1.2vw, 18px) clamp(14px, 1.7dvh, 18px) !important;
    min-height: clamp(132px, 16dvh, 172px) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .home-options-section .home-action-grid {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1vw, 16px) !important;
  }

  body:not(.game-active) .home-options-section .home-action-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(34px, 1fr) auto !important;
    min-height: clamp(76px, 9.8dvh, 112px) !important;
    height: 100% !important;
    align-content: center !important;
    justify-items: center !important;
    gap: clamp(4px, 0.7dvh, 8px) !important;
    padding: clamp(8px, 1dvh, 12px) !important;
    overflow: hidden !important;
  }

  body:not(.game-active) .home-options-section .home-action-icon,
  body:not(.game-active) .home-options-section .home-action-icon svg {
    width: clamp(34px, 4.8dvh, 54px) !important;
    height: clamp(34px, 4.8dvh, 54px) !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }

  body:not(.game-active) .home-options-section .home-action-card span:last-child::after {
    font-size: clamp(13px, 1.05vw, 18px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body:not(.game-active) .start-menu-panel > .competition-entry {
    min-height: clamp(198px, 24dvh, 250px) !important;
  }

  body:not(.game-active) .competition-entry .online-entry-actions {
    min-height: clamp(82px, 10.5dvh, 118px) !important;
    gap: clamp(9px, 0.9vw, 15px) !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton,
  body:not(.game-active) .competition-entry #openDailyButton,
  body:not(.game-active) .competition-entry #openRankingsButton {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(30px, 1fr) auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(3px, 0.55dvh, 6px) !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton .premium-action-icon,
  body:not(.game-active) .competition-entry #openDailyButton .premium-action-icon,
  body:not(.game-active) .competition-entry #openRankingsButton .premium-action-icon {
    display: grid !important;
    place-items: center !important;
    width: clamp(30px, 4.3dvh, 46px) !important;
    height: clamp(30px, 4.3dvh, 46px) !important;
    background: none !important;
    background-image: none !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton .premium-action-icon svg,
  body:not(.game-active) .competition-entry #openDailyButton .premium-action-icon svg,
  body:not(.game-active) .competition-entry #openRankingsButton .premium-action-icon svg {
    display: none !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton .premium-action-icon::before,
  body:not(.game-active) .competition-entry #openDailyButton .premium-action-icon::before,
  body:not(.game-active) .competition-entry #openRankingsButton .premium-action-icon::before {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    content: "" !important;
    opacity: 1 !important;
    color: #ffe2a0 !important;
    font-family: "Segoe UI Symbol", "Arial", sans-serif !important;
    font-size: clamp(28px, 4dvh, 42px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    filter: drop-shadow(0 0 8px rgba(247, 197, 91, 0.38)) !important;
  }

  body:not(.game-active) .competition-entry #openOnlineButton .premium-action-icon::before { content: "◎" !important; }
  body:not(.game-active) .competition-entry #openDailyButton .premium-action-icon::before { content: "▦" !important; }
  body:not(.game-active) .competition-entry #openRankingsButton .premium-action-icon::before { content: "▥" !important; }

  body:not(.game-active) .competition-entry .premium-action-text {
    font-size: clamp(12px, 0.95vw, 16px) !important;
    line-height: 1.05 !important;
  }

  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
  }
}

/* desktop-start-align-v13-final: last landscape start-button override. */
@media (orientation: landscape) and (min-width: 760px) {
  body:not(.game-active) .start-menu-panel > .start-game-button,
  body:not(.game-active) #startGameButton {
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, clamp(360px, 34vw, 560px)) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    font-size: clamp(34px, 2vw, 54px) !important;
  }
}