/* Living HD-2D hub: compositor-friendly layers over the existing real board. */
html[data-ui-theme='hd-2d'] #pane-home {
  isolation: isolate;
}

html[data-ui-theme='hd-2d'] #home-world {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

html[data-ui-theme='hd-2d'] #home-world::before {
  content: '';
  position: absolute;
  inset: 56px -22% 20%;
  background:
    linear-gradient(112deg, transparent 22%, rgba(255, 224, 151, .10) 38%, transparent 51%),
    radial-gradient(ellipse at 30% 13%, rgba(255, 227, 154, .18), transparent 44%);
  mix-blend-mode: screen;
  opacity: .72;
  transform: translate3d(-1.5%, 0, 0);
  animation: hubSunDrift 8s ease-in-out infinite alternate;
}

html[data-ui-theme='hd-2d'] #home-world::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(35, 20, 22, .08), transparent 19%, transparent 72%, rgba(35, 20, 22, .18)),
    radial-gradient(ellipse at 50% 48%, transparent 49%, rgba(38, 22, 25, .16) 100%);
}

html[data-ui-theme='hd-2d'] #home-world .hub-incense {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  right: -7px;
  width: 104px;
  aspect-ratio: 1;
  background: none;
  opacity: .52;
  filter: sepia(.16) saturate(.82) drop-shadow(0 8px 10px rgba(38, 21, 20, .22));
}

html[data-ui-theme='hd-2d'] #home-world .hub-incense.is-ready {
  background: url('../assets/themes/hd-2d/hub/fx/oud-smoke-strip.webp') 0 0 / 800% 100% no-repeat;
  animation: hubStripFrames 3.25s steps(7, end) infinite;
}

html[data-ui-theme='hd-2d'] #home-world #home-board-link {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: calc(env(safe-area-inset-top, 0px) + 96px) !important;
  width: min(78vw, 316px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html[data-ui-theme='hd-2d'] #home-board-link .hub-station-ring {
  position: absolute;
  inset: -1.8%;
  border: 2px solid rgba(246, 207, 112, .46);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(57, 32, 55, .28),
    0 12px 26px rgba(49, 27, 24, .34),
    0 0 28px rgba(246, 205, 105, .13),
    inset 0 0 16px rgba(255, 233, 164, .12);
  opacity: .72;
  transform: translateZ(0) scale(.995);
  animation: hubStationBreathe 3.4s ease-in-out infinite;
}

html[data-ui-theme='hd-2d'] #home-board-link .hub-station-plaque {
  position: absolute;
  left: 50%;
  bottom: -34px;
  min-width: 154px;
  min-height: 48px;
  padding: 7px 18px 8px;
  transform: translateX(-50%) translateZ(0);
  border: 2px solid #392037;
  border-radius: 15px;
  color: #392037;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.52), transparent 34%),
    repeating-linear-gradient(4deg, rgba(114, 67, 39, .045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255, 249, 221, .98), rgba(232, 199, 137, .98));
  box-shadow: 0 3px 0 #9f5b31, 0 6px 0 #392037, 0 12px 22px rgba(43, 25, 25, .28);
  text-align: center;
  white-space: nowrap;
}

html[data-ui-theme='hd-2d'] #home-board-link .hub-station-kicker,
html[data-ui-theme='hd-2d'] #home-board-link .hub-station-action {
  display: block;
  font: 800 8px/1.1 var(--font-ui, system-ui);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .67;
}

html[data-ui-theme='hd-2d'] #home-board-link .hub-station-name {
  display: block;
  margin: 2px 0 1px;
  font: 900 16px/.95 var(--font-display, var(--font-ui, system-ui));
  letter-spacing: .04em;
  text-shadow: 0 1px 0 #fff3cc;
}

html[data-ui-theme='hd-2d'] #home-board-link:is(:hover, :focus-visible) .hub-station-ring,
html[data-ui-theme='hd-2d'] #home-board-link.hub-station-selected .hub-station-ring {
  opacity: 1;
  border-color: rgba(255, 225, 144, .94);
  box-shadow: 0 0 0 4px rgba(57, 32, 55, .32), 0 0 38px rgba(255, 210, 105, .34), inset 0 0 18px rgba(255, 240, 190, .18);
}

html[data-ui-theme='hd-2d'] #home-board-link.hub-station-selected .hub-station-ring {
  animation: hubStationActivate .38s cubic-bezier(.2,.8,.2,1) both;
}

html[data-ui-theme='hd-2d'] #home-board-link.hub-station-arrived .hub-station-ring {
  opacity: 1;
  border-color: rgba(255, 231, 157, .98);
  box-shadow: 0 0 0 4px rgba(57, 32, 55, .34), 0 0 46px rgba(255, 210, 105, .42), inset 0 0 20px rgba(255, 244, 206, .22);
}

html[data-ui-theme='hd-2d'] #home-board-link:focus-visible {
  outline: 3px solid #ffe29b !important;
  outline-offset: 8px !important;
}

html[data-ui-theme='hd-2d'] body.perf-lite #home-world::before,
html[data-ui-theme='hd-2d'] body.perf-lite #home-world .hub-incense,
html[data-ui-theme='hd-2d'] body.perf-lite #home-board-link .hub-station-ring {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body.perf-lite #home-world .hub-incense {
  display: none;
}

html[data-ui-theme='hd-2d'] body.hub-traveling #pane-home .home-cta-wrap {
  opacity: .68;
  pointer-events: none;
  transform: translateY(2px) scale(.99);
}

html[data-ui-theme='hd-2d'] #pane-home .home-cta-wrap,
html[data-ui-theme='hd-2d'] #pane-home #home-resume {
  position: relative;
  z-index: 8 !important;
  transition: opacity .18s ease, transform .18s ease;
}

@keyframes hubStripFrames { to { background-position-x: 100%; } }
@keyframes hubSunDrift { to { transform: translate3d(2%, 1%, 0); opacity: .9; } }
@keyframes hubStationBreathe {
  0%, 100% { transform: translateZ(0) scale(.992); opacity: .68; }
  50% { transform: translateZ(0) scale(1.012); opacity: .9; }
}
@keyframes hubStationActivate {
  0% { transform: translateZ(0) scale(.99); filter: brightness(1); }
  48% { transform: translateZ(0) scale(1.035); filter: brightness(1.16); }
  100% { transform: translateZ(0) scale(1.005); filter: brightness(1.04); }
}

@media (max-height: 700px) {
  html[data-ui-theme='hd-2d'] #home-world #home-board-link {
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    width: min(67vw, 244px) !important;
  }
  html[data-ui-theme='hd-2d'] #home-board-link .hub-station-plaque {
    bottom: -27px;
    min-width: 132px;
    min-height: 42px;
    padding: 5px 13px 6px;
  }
  html[data-ui-theme='hd-2d'] #home-board-link .hub-station-name { font-size: 14px; }
  html[data-ui-theme='hd-2d'] #home-world .hub-incense { top: 54px; width: 82px; opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme='hd-2d'] #home-world::before,
  html[data-ui-theme='hd-2d'] #home-world .hub-incense,
  html[data-ui-theme='hd-2d'] #home-board-link .hub-station-ring { animation: none !important; }
}

body.reduce-motion #home-world::before,
body.reduce-motion #home-world .hub-incense,
body.reduce-motion #home-board-link .hub-station-ring { animation: none !important; }

/* ========================================================================== */
/* HD-2D HOME SCENE V2                                                        */
/* The board is the hero. Chrome is smoked walnut, aged brass, and leather—  */
/* never flat pastel panels. Everything below is scoped to the visible Home. */
/* ========================================================================== */

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) {
  --hub-ivory: #fff0cf;
  --hub-ivory-soft: rgba(255, 239, 204, .76);
  --hub-muted: rgba(223, 199, 159, .58);
  --hub-brass-hi: #f2d087;
  --hub-brass: #d2a252;
  --hub-brass-lo: #75502a;
  --hub-ink: #241317;
  --hub-walnut: #261611;
  --hub-walnut-deep: #100a08;
  --hub-oxblood: #682d27;
  --hub-oxblood-deep: #3c1919;
  --hub-jade: #314737;
  --hub-jade-deep: #17271f;
  color: var(--hub-ivory) !important;
  /* The live canvas table sits behind the menu. Keep this layer transparent
     so Home shows that real board instead of painting over it with a duplicate
     village image; atmosphere stays on the translucent pseudo layers below. */
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden))::before {
  opacity: 1 !important;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(255, 226, 161, .07) 39%, transparent 52%),
    radial-gradient(78% 38% at 50% 34%, transparent 48%, rgba(17, 8, 7, .34) 100%),
    repeating-linear-gradient(104deg, transparent 0 35px, rgba(39, 18, 14, .025) 36px 37px) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-fx {
  opacity: .24 !important;
  filter: sepia(.08) saturate(.82) contrast(1.02) !important;
  mix-blend-mode: screen !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-panes {
  width: 100% !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden)::before {
  content: '';
  position: absolute;
  inset: 0;
  height: auto !important;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(52% 34% at 50% 38%, rgba(255, 221, 150, .08), transparent 74%),
    linear-gradient(180deg, transparent 0 58%, rgba(19, 10, 9, .22) 68%, rgba(11, 6, 6, .82) 100%) !important;
}

/* Compact, diegetic HUD rail. */
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top {
  min-height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 7px)
    10px
    7px !important;
  gap: 6px !important;
  color: var(--hub-ivory) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(224, 177, 91, .46) !important;
  background:
    radial-gradient(80% 160% at 50% -45%, rgba(231, 185, 103, .16), transparent 58%),
    repeating-linear-gradient(2deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(42, 24, 18, .97), rgba(16, 10, 9, .94)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, .9),
    0 8px 24px rgba(5, 3, 3, .42) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.94) !important;
  backdrop-filter: blur(16px) saturate(.94) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 168px !important;
  min-height: 44px !important;
  padding: 3px 7px 3px 3px !important;
  gap: 7px !important;
  color: var(--hub-ivory) !important;
  border: 1px solid rgba(218, 169, 82, .32) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(115deg, rgba(255, 235, 191, .075), transparent 38%),
    linear-gradient(180deg, rgba(62, 37, 27, .92), rgba(29, 17, 14, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 202, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .56),
    0 4px 12px rgba(0, 0, 0, .22) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .avatar-hole {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border: 1px solid var(--hub-brass-lo) !important;
  background: radial-gradient(circle at 35% 24%, #76502b, #241511 72%) !important;
  box-shadow:
    0 0 0 2px rgba(18, 10, 9, .9),
    0 0 0 3px rgba(222, 172, 82, .58),
    inset 0 2px 5px rgba(0, 0, 0, .62) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .top-name {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: 3px;
  min-width: 0;
  line-height: 1;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .nm {
  grid-column: 1 / -1;
  max-width: 92px !important;
  color: var(--hub-ivory) !important;
  font: 800 12px/1.08 var(--font-ui, system-ui) !important;
  letter-spacing: .01em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.66) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .rk,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .ttl {
  max-width: 58px !important;
  color: var(--hub-brass-hi) !important;
  font: 800 7px/1.15 var(--font-ui, system-ui) !important;
  letter-spacing: .055em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.72) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .ttl {
  grid-column: 1 / -1;
  max-width: 96px !important;
  color: var(--hub-muted) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top .coin-pill {
  min-width: 64px !important;
  min-height: 36px !important;
  padding: 5px 6px !important;
  gap: 4px !important;
  color: var(--hub-ivory) !important;
  border: 1px solid rgba(218, 169, 82, .42) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(115deg, rgba(255, 239, 198, .08), transparent 42%),
    linear-gradient(180deg, rgba(67, 42, 28, .94), rgba(30, 18, 14, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,204,.09), 0 3px 9px rgba(0,0,0,.26) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top #m-coins {
  color: var(--hub-ivory) !important;
  font-size: 12px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.72) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #coin-plus {
  width: 17px !important;
  height: 17px !important;
  color: #2b1814 !important;
  border: 1px solid rgba(255, 232, 175, .66) !important;
  background: radial-gradient(circle at 36% 25%, #ffe2a0, #c88e3b 68%, #775022) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.45) !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-friends,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-settings {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  color: var(--hub-ivory-soft) !important;
  border: 1px solid rgba(218, 169, 82, .34) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(115deg, rgba(255, 238, 195, .07), transparent 44%),
    linear-gradient(180deg, rgba(58, 36, 27, .94), rgba(26, 16, 14, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,204,.08), 0 3px 9px rgba(0,0,0,.28) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-trophies .g {
  background: radial-gradient(circle at 35% 28%, #f9d47e, #a66b2f 74%) !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)) !important;
}

/* Board station: a tight luminous rim, grounded shadow, dark carved plaque. */
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-world {
  z-index: 4;
  overflow: hidden;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-world::before {
  inset: 62px -18% 27% !important;
  opacity: .8;
  background:
    linear-gradient(112deg, transparent 24%, rgba(255, 226, 156, .08) 39%, transparent 53%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 224, 151, .16), transparent 56%) !important;
  mix-blend-mode: screen;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-world::after {
  background:
    radial-gradient(ellipse at 50% 39%, transparent 47%, rgba(24, 12, 10, .16) 72%, rgba(14, 7, 7, .44) 100%),
    linear-gradient(180deg, rgba(20, 10, 8, .07), transparent 56%, rgba(13, 7, 7, .24)) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link {
  isolation: isolate;
  left: var(--hub-station-left, 50%) !important;
  top: var(--hub-station-top, calc(env(safe-area-inset-top, 0px) + 84px)) !important;
  width: var(--hub-station-size, min(78vw, 316px)) !important;
  transform: var(--hub-station-transform, translateX(-50%)) !important;
}

/* Enlarge the actual canvas table on Home only. Board geometry and gameplay
   hit testing stay untouched; the station controller follows its live bounds. */
html[data-ui-theme='hd-2d'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #stage {
  scale: .88;
  translate: 0 1%;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 4%;
  bottom: -1%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(7, 4, 4, .75), rgba(7, 4, 4, .2) 58%, transparent 76%);
  filter: blur(9px);
  transform: translateY(38%);
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link::after {
  content: '';
  position: absolute;
  inset: -.4%;
  z-index: 3;
  border: 1px solid rgba(245, 208, 132, .34);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(25, 13, 12, .44),
    0 0 0 3px rgba(210, 160, 73, .14),
    0 18px 34px rgba(7, 4, 4, .38),
    inset 0 0 10px rgba(255, 224, 158, .06);
  pointer-events: none;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-ring {
  inset: 1.2% !important;
  z-index: 4;
  border: 1px solid rgba(246, 213, 143, .38) !important;
  box-shadow:
    0 0 0 1px rgba(74, 45, 28, .55),
    0 0 18px rgba(238, 187, 91, .12),
    inset 0 0 11px rgba(255, 235, 184, .07) !important;
  opacity: .2;
  animation: hubStationBreathe 4.4s ease-in-out infinite;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-plaque {
  bottom: -29px !important;
  min-width: 174px !important;
  min-height: 54px !important;
  padding: 7px 18px 8px !important;
  color: var(--hub-ivory) !important;
  border: 1px solid rgba(239, 197, 113, .72) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 234, 189, .11), transparent 32%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(85, 49, 32, .98), rgba(36, 20, 17, .99)) !important;
  box-shadow:
    0 0 0 2px rgba(25, 13, 13, .9),
    0 0 0 3px rgba(132, 84, 42, .78),
    0 5px 0 rgba(20, 11, 12, .92),
    0 12px 24px rgba(8, 4, 5, .42),
    inset 0 1px 0 rgba(255, 235, 193, .12) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-kicker,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-action {
  color: var(--hub-brass-hi) !important;
  font-size: 7px !important;
  letter-spacing: .18em !important;
  opacity: .78 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.7) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-name {
  margin: 3px 0 2px !important;
  color: var(--hub-ivory) !important;
  font: 800 16px/.95 var(--font-display, var(--font-ui, system-ui)) !important;
  letter-spacing: .075em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.72) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-world .hub-incense {
  top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
  right: -16px !important;
  width: 94px !important;
  opacity: .32 !important;
  filter: sepia(.28) saturate(.62) drop-shadow(0 7px 10px rgba(20, 10, 9, .3)) !important;
}

/* Gameplay identity plates belong to the match, not the Home diorama. */
html[data-ui-theme='hd-2d'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #board-wrap .plate {
  display: none !important;
}

/* Retire the duplicate logo/name from the action area; identity lives in HUD. */
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-stage,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-name,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-whoami {
  display: none !important;
}

/* Material action deck: oxblood lacquer primary, jade leather secondary. */
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important;
  z-index: 120 !important;
  display: flex !important;
  width: min(calc(100% - 28px), 414px) !important;
  margin: 0 !important;
  padding: 9px !important;
  gap: 7px !important;
  transform: translateX(-50%);
  border: 1px solid rgba(220, 173, 88, .52) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(115deg, rgba(255, 236, 194, .055), transparent 35% 74%, rgba(255, 228, 176, .025)),
    repeating-linear-gradient(1deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(56, 34, 27, .96), rgba(21, 13, 12, .98)) !important;
  box-shadow:
    0 0 0 2px rgba(15, 8, 8, .76),
    0 11px 28px rgba(4, 2, 3, .5),
    inset 0 1px 0 rgba(255, 236, 197, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .68) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap::before {
  content: 'ENTER THE MAJLIS';
  position: absolute;
  left: 50%;
  top: -19px;
  transform: translateX(-50%);
  color: rgba(244, 207, 133, .78);
  font: 800 8px/1 var(--font-ui, system-ui);
  letter-spacing: .2em;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
}

html[data-ui-theme='hd-2d'] body.hub-traveling #menu #pane-home:not(.hidden) .home-cta-wrap {
  opacity: .66;
  pointer-events: none;
  transform: translateX(-50%) translateY(2px) scale(.99) !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 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 18px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-items: start !important;
  column-gap: 11px !important;
  row-gap: 1px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--hub-ivory) !important;
  text-align: left !important;
  font-family: var(--font-ui, system-ui) !important;
  animation: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play.home-btn-play {
  min-height: 58px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(238, 190, 105, .68) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(100% 140% at 16% 0%, rgba(255, 196, 132, .18), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--hub-oxblood), var(--hub-oxblood-deep)) !important;
  box-shadow:
    0 3px 0 #241114,
    0 8px 17px rgba(5, 2, 3, .3),
    inset 0 1px 0 rgba(255, 228, 190, .14),
    inset 0 -1px 0 rgba(10, 4, 5, .65) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup.home-btn-team {
  min-height: 45px !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(194, 169, 112, .38) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(90% 150% at 15% -20%, rgba(220, 221, 165, .11), transparent 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--hub-jade), var(--hub-jade-deep)) !important;
  box-shadow:
    0 2px 0 #0f1814,
    0 6px 14px rgba(4, 3, 3, .24),
    inset 0 1px 0 rgba(244, 236, 197, .09) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play > svg,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup > svg {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 36px !important;
  height: 36px !important;
  padding: 9px;
  color: #291615 !important;
  border: 1px solid rgba(255, 226, 165, .7);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #f7d98e, #bd8237 68%, #684322);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.48), 0 2px 0 rgba(42,22,16,.8), 0 5px 9px rgba(0,0,0,.3);
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup > svg {
  width: 32px !important;
  height: 32px !important;
  padding: 7px;
  color: var(--hub-ivory) !important;
  border-color: rgba(218, 192, 133, .38);
  background: radial-gradient(circle at 35% 27%, #526a55, #273b2d 70%);
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play .hbp-label,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup .hbt-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--hub-ivory) !important;
  -webkit-text-fill-color: var(--hub-ivory) !important;
  font: 850 14px/1 var(--font-ui, system-ui) !important;
  letter-spacing: .085em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.72) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play .hbp-sub,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup .hbt-sub {
  position: static !important;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: var(--hub-brass-hi) !important;
  -webkit-text-fill-color: var(--hub-brass-hi) !important;
  font: 700 9px/1.15 var(--font-ui, system-ui) !important;
  letter-spacing: .035em !important;
  opacity: .72 !important;
  transform: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.64) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup .hbt-sub {
  color: rgba(232, 218, 183, .62) !important;
  -webkit-text-fill-color: rgba(232, 218, 183, .62) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.08), transparent 30% 76%, rgba(255,221,168,.035)) !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: '›';
  position: static !important;
  display: block !important;
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: center;
  color: rgba(244, 207, 137, .7);
  font: 500 24px/1 Georgia, serif;
  background: none !important;
  pointer-events: none;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play:active,
html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup:active {
  transform: translateY(2px) scale(.995) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 1px 0 #160b0d, 0 3px 8px rgba(0,0,0,.32), inset 0 1px 0 rgba(255, 230, 192, .1) !important;
}

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

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-status:not(:empty) {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 246px);
  z-index: 122;
  width: max-content;
  max-width: calc(100% - 48px);
  min-height: 0;
  padding: 6px 11px;
  transform: translateX(-50%);
  color: rgba(226, 211, 181, .66) !important;
  border: 1px solid rgba(140, 171, 119, .28);
  border-radius: 999px;
  background: rgba(20, 12, 11, .82);
  box-shadow: 0 5px 14px rgba(0,0,0,.32);
  font-size: 9px;
  white-space: nowrap;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-resume:not(.hidden) {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 226px);
  z-index: 121 !important;
  width: min(calc(100% - 34px), 400px) !important;
  margin: 0 !important;
  transform: translateX(-50%);
  color: var(--hub-ivory) !important;
  border: 1px solid rgba(231, 186, 101, .55) !important;
  background: linear-gradient(180deg, rgba(85, 49, 31, .96), rgba(35, 20, 17, .98)) !important;
}

/* Floating dark carved navigation, visually part of the scene. */
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav {
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  min-height: 62px !important;
  padding: 6px !important;
  gap: 3px !important;
  border: 1px solid rgba(221, 174, 86, .5) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(115deg, rgba(255, 236, 193, .045), transparent 38% 76%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(49, 29, 23, .97), rgba(15, 9, 9, .99)) !important;
  box-shadow:
    0 0 0 2px rgba(11, 6, 7, .72),
    0 10px 30px rgba(2, 1, 2, .5),
    inset 0 1px 0 rgba(255, 236, 196, .07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.9) !important;
  backdrop-filter: blur(18px) saturate(.9) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.center {
  flex: 1 1 50% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 4px 4px !important;
  color: rgba(226, 207, 173, .52) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn .ni,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.center .ni {
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn .nl,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.center .nl {
  color: inherit !important;
  font-size: 8px !important;
  font-weight: 780 !important;
  letter-spacing: .09em !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.active,
html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.center.active {
  color: var(--hub-ivory) !important;
  border-color: rgba(255, 236, 187, .94) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(230, 184, 91, .18), transparent 66%),
    linear-gradient(180deg, rgba(115, 73, 39, .42), rgba(47, 27, 20, .32)) !important;
  box-shadow:
    0 0 0 2px rgba(126, 82, 38, .9),
    inset 0 1px 0 rgba(255, 247, 219, .2),
    inset 0 -1px 0 rgba(0,0,0,.42) !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(--hub-brass-hi) !important;
  transform: translateY(-1px) scale(1.04) !important;
  filter: drop-shadow(0 0 7px rgba(222, 168, 74, .28)) !important;
}

html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.active::after {
  bottom: 2px !important;
  width: 3px !important;
  height: 3px !important;
  background: var(--hub-brass-hi) !important;
  box-shadow: 0 0 7px rgba(239, 196, 111, .7) !important;
}

@media (max-width: 350px) {
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top {
    padding-inline: 8px !important;
    gap: 4px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile {
    max-width: 108px !important;
    padding-right: 4px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-profile .ttl {
    display: none !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top .coin-pill {
    min-width: 56px !important;
    padding-inline: 4px !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-friends,
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #top-settings {
    width: 33px !important;
    min-width: 33px !important;
  }
}

@media (max-height: 700px) {
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #m-top {
    min-height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 5px) !important;
    padding-bottom: 5px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link {
    top: var(--hub-station-top, calc(env(safe-area-inset-top, 0px) + 67px)) !important;
    width: var(--hub-station-size, min(69vw, 232px)) !important;
  }
  html[data-ui-theme='hd-2d'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #stage {
    scale: .82;
    translate: 0 -1%;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-plaque {
    bottom: -25px !important;
    min-width: 142px !important;
    min-height: 42px !important;
    padding: 5px 13px 6px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-name {
    margin: 2px 0 1px !important;
    font-size: 13px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 69px) !important;
    width: min(calc(100% - 20px), 400px) !important;
    padding: 7px !important;
    gap: 5px !important;
    border-radius: 17px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) .home-cta-wrap::before {
    top: -16px;
    font-size: 7px;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-play.home-btn-play {
    min-height: 51px !important;
    padding-block: 5px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-teamup.home-btn-team {
    min-height: 41px !important;
    padding-block: 4px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav {
    bottom: max(5px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: 55px !important;
    padding: 4px !important;
    border-radius: 17px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn,
  html[data-ui-theme='hd-2d'] body #menu:not(.lobby-mode):has(#pane-home:not(.hidden)) #menu-nav .nav-btn.center {
    height: 45px !important;
    min-height: 45px !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #m-status:not(:empty) {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 211px) !important;
  }
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-resume:not(.hidden) {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 187px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme='hd-2d'] body #menu #pane-home:not(.hidden) #home-board-link .hub-station-ring {
    animation: none !important;
  }
}