/* Square-style Jackaroo home menu.
 * This is the final presentation layer for Home only; game and lobby screens
 * continue to use their existing layouts and behavior. */

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) {
  --sq-cream: #fff1d1;
  --sq-cream-soft: rgba(255, 239, 205, .70);
  --sq-gold: #e4b45d;
  --sq-gold-hi: #f8dc98;
  --sq-gold-deep: #765026;
  --sq-walnut: #2a1712;
  --sq-walnut-deep: #0d0706;
  --sq-red: #6f2e27;
  --sq-red-deep: #3c1717;
  --sq-green: #304936;
  --sq-green-deep: #17271e;
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden))::before {
  opacity: 1 !important;
  background:
    radial-gradient(80% 48% at 50% 30%, rgba(255, 218, 143, .10), transparent 62%),
    linear-gradient(180deg, rgba(18, 9, 7, .04) 0 55%, rgba(12, 6, 6, .48) 78%, rgba(6, 3, 3, .91) 100%) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden))::after {
  background:
    linear-gradient(90deg, rgba(5, 2, 2, .34), transparent 10% 90%, rgba(5, 2, 2, .34)),
    linear-gradient(180deg, rgba(6, 3, 3, .10), transparent 64%, rgba(4, 2, 2, .72)) !important;
}

/* Compact status rail. */
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top {
  height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  min-height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px !important;
  gap: 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(229, 177, 81, .48) !important;
  background:
    radial-gradient(90% 180% at 50% -70%, rgba(237, 190, 102, .18), transparent 62%),
    repeating-linear-gradient(2deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(44, 25, 19, .98), rgba(14, 8, 7, .97)) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.9), 0 9px 26px rgba(5,2,2,.46) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile {
  flex: 1 1 auto !important;
  max-width: 178px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 3px 10px 3px 3px !important;
  gap: 9px !important;
  color: var(--sq-cream) !important;
  border: 1px solid rgba(224, 171, 77, .42) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(112deg, rgba(255, 236, 191, .09), transparent 42%),
    linear-gradient(180deg, rgba(67, 39, 28, .96), rgba(27, 15, 12, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,242,207,.12), 0 4px 12px rgba(0,0,0,.27) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .avatar-hole {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  overflow: visible !important;
  border: 1px solid var(--sq-gold-deep) !important;
  background: radial-gradient(circle at 35% 23%, #80572f, #281713 73%) !important;
  box-shadow: 0 0 0 2px #160c0a, 0 0 0 3px rgba(227,177,85,.72), inset 0 2px 5px rgba(0,0,0,.65) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .profile-avatar-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) .sq-profile-orb {
  position: absolute;
  z-index: 4;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border: 2px solid #f7e9c3;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9f1b7, #5d9e64 72%);
  box-shadow: 0 1px 4px rgba(0,0,0,.7);
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .nm {
  max-width: 106px !important;
  color: var(--sq-cream) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .ttl {
  color: rgba(220, 192, 146, .61) !important;
  font-size: 7px !important;
  letter-spacing: .085em !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) .top-actions {
  gap: 5px !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top .coin-pill,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-trophies,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-settings {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(224, 171, 77, .42) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(112deg, rgba(255,238,195,.08), transparent 44%),
    linear-gradient(180deg, rgba(63,38,28,.96), rgba(25,14,12,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,204,.10), 0 3px 10px rgba(0,0,0,.30) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top .coin-pill {
  min-width: 68px !important;
  padding: 5px 8px !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top #m-coins,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-trophies {
  color: var(--sq-cream) !important;
  font-weight: 900 !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-trophies,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-settings {
  width: 40px !important;
  min-width: 40px !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-friends {
  display: none !important;
}

/* Board hero and title plaque. */
html[data-ui-theme='hd-2d'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #stage {
  scale: .9 !important;
  translate: 0 1.8% !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link::after {
  inset: -1.1% !important;
  border: 1px solid rgba(252, 218, 145, .58) !important;
  box-shadow:
    0 0 0 2px rgba(28,14,11,.72),
    0 0 0 4px rgba(166,108,51,.35),
    0 20px 38px rgba(5,2,2,.48),
    inset 0 0 13px rgba(255,231,175,.10) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-plaque {
  bottom: -31px !important;
  min-width: 184px !important;
  min-height: 57px !important;
  padding: 8px 20px 9px !important;
  border-color: rgba(247, 209, 132, .78) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 24% 10%, rgba(255,235,193,.12), transparent 32%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(89,51,32,.99), rgba(34,18,15,.99)) !important;
  box-shadow:
    0 0 0 2px #150b0a,
    0 0 0 4px rgba(139,88,39,.86),
    0 5px 0 rgba(15,8,8,.96),
    0 13px 27px rgba(5,2,2,.48),
    inset 0 1px 0 rgba(255,240,207,.14) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-name {
  color: var(--sq-cream) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 17px !important;
  letter-spacing: .12em !important;
}

/* Deliberate two-choice action deck. */
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
  width: min(calc(100% - 28px), 414px) !important;
  padding: 10px !important;
  gap: 8px !important;
  border-color: rgba(229, 179, 87, .62) !important;
  border-radius: 21px !important;
  background:
    linear-gradient(112deg, rgba(255,239,199,.065), transparent 36% 75%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(58,34,26,.98), rgba(18,10,9,.99)) !important;
  box-shadow: 0 0 0 2px #0d0707, 0 12px 30px rgba(3,1,2,.56), inset 0 1px 0 rgba(255,239,201,.10) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap::before {
  top: -21px !important;
  color: rgba(247, 207, 129, .86) !important;
  font-size: 8px !important;
  letter-spacing: .24em !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play.home-btn-play,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup.home-btn-team {
  grid-template-columns: 42px minmax(0, 1fr) 18px !important;
  column-gap: 12px !important;
  border-radius: 14px !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play.home-btn-play {
  min-height: 62px !important;
  border-color: rgba(247, 201, 114, .78) !important;
  background:
    radial-gradient(110% 160% at 14% -15%, rgba(255,201,140,.22), transparent 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--sq-red), var(--sq-red-deep)) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup.home-btn-team {
  min-height: 49px !important;
  background:
    radial-gradient(100% 160% at 14% -20%, rgba(220,232,177,.13), transparent 49%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--sq-green), var(--sq-green-deep)) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play::after,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup::after {
  content: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .sq-action-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  color: rgba(245, 205, 129, .78);
  font: 500 25px/1 Georgia, serif;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-status {
  display: none !important;
}

/* Two-command footer, with Play treated as the primary command. */
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav {
  min-height: 64px !important;
  padding: 7px !important;
  gap: 5px !important;
  border-color: rgba(226,174,79,.58) !important;
  border-radius: 21px !important;
  background:
    linear-gradient(112deg, rgba(255,237,196,.05), transparent 40% 76%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(48,28,22,.99), rgba(13,7,7,.99)) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn {
  flex: 1 1 50% !important;
  max-width: none !important;
  height: 49px !important;
  min-height: 49px !important;
  border-radius: 15px !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.active {
  color: var(--sq-cream) !important;
  border: 2px solid rgba(255,241,204,.98) !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(235,188,98,.22), transparent 70%),
    linear-gradient(180deg, rgba(105,66,37,.72), rgba(42,23,17,.75)) !important;
  box-shadow: 0 0 0 3px rgba(119,76,34,.92), inset 0 1px 0 rgba(255,248,220,.22), 0 4px 12px rgba(0,0,0,.26) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.active .ni {
  color: var(--sq-gold-hi) !important;
  transform: translateY(-1px) scale(1.08) !important;
}

@media (max-width: 350px) {
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile {
    max-width: 122px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .nm {
    max-width: 66px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top .coin-pill {
    min-width: 58px !important;
    padding-inline: 5px !important;
  }
}

@media (max-height: 700px) {
  html[data-ui-theme='hd-2d'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #stage {
    scale: .83 !important;
    translate: 0 0 !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
    padding: 7px !important;
    gap: 5px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play.home-btn-play { min-height: 52px !important; }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup.home-btn-team { min-height: 42px !important; }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav {
    min-height: 56px !important;
    padding: 5px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn {
    height: 44px !important;
    min-height: 44px !important;
  }
}