/* ========================================================================== */
/* SUNLIT MAJLIS                                                               */
/*                                                                            */
/* A supplied-image variant of the complete HD-2D system. The photographic   */
/* board is an underlay only: runtime Geo coordinates still own every hole,   */
/* marble, hint, card and hit target.                                          */
/* ========================================================================== */

/* Match-only controls stay invisible in the other themes. */
.sunlit-hud-action,
.hud-icon-menu,
#play-card-cta {
  display: none;
}

/* Mobile-safe scene mosaic. It is only activated below; desktop keeps the
   untouched full-resolution Play image. */
#sunlit-scene-bg {
  display: none;
}

#hud .hud-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Picker miniature is intentionally unscoped so it is visible in all themes. */
#pane-settings .theme-preview-majlis {
  overflow: hidden;
  border: 2px solid #8b673d;
  background: #ddc5a7 url('../assets/themes/sunlit-majlis/scene-board-play-v1.jpg') center top / cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.68), 0 4px 10px rgba(77,48,27,.25);
}

#pane-settings .theme-preview-majlis::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 6;
  border: 1px solid rgba(255,248,225,.78);
  border-radius: 10px;
  pointer-events: none;
}

#pane-settings .theme-preview-majlis .theme-preview-board {
  z-index: 2;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#pane-settings .theme-preview-majlis .theme-preview-board::after,
#pane-settings .theme-preview-majlis .theme-preview-board i {
  display: none;
}

#pane-settings .theme-preview-majlis .theme-preview-card {
  border: 1px solid #a88154;
  background: #fffaf0;
  box-shadow: 0 3px 7px rgba(74,43,24,.28);
}

#pane-settings .theme-preview-majlis .theme-preview-card::before {
  content: 'Q';
  position: absolute;
  left: 5px;
  top: 3px;
  color: #a92821;
  font: 900 12px/1 Georgia, serif;
}

#pane-settings .theme-preview-majlis .theme-preview-piece {
  border: 1px solid #fff5d6;
  background: radial-gradient(circle at 32% 22%, #eaf7ff 0 8%, #278fe4 30%, #0757a3 68%, #07346e 100%);
  box-shadow: 0 0 0 2px #b88743, 2px 4px 8px rgba(45,27,17,.35), inset -3px -4px 5px rgba(2,34,72,.42);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] {
  color-scheme: light;
  --hd2d-village-image: url('../assets/themes/sunlit-majlis/scene-board-play-v1.jpg');
  --bg: #d6bea0;
  --bg-deep: #8c6c4a;
  --surface: rgba(255, 250, 238, .82);
  --surface-2: rgba(239, 220, 190, .82);
  --surface-inset: rgba(207, 180, 143, .78);
  --surface-raised: rgba(255, 253, 245, .92);
  --brass: #c69a56;
  --brass-hi: #fff0b9;
  --brass-mid: #d6ad67;
  --brass-lo: #9b6a31;
  --brass-deep: #68411f;
  --brass-grad: linear-gradient(180deg, #fff1bb 0%, #d8ae68 48%, #956126 100%);
  --text: #3f3328;
  --text-soft: #69584a;
  --muted: #887665;
  --line: rgba(93, 66, 40, .32);
  --line-soft: rgba(93, 66, 40, .16);
  --hd2d-plum: #3c3128;
  --hd2d-plum-soft: #69574a;
  --hd2d-ivory: #fffaf0;
  --hd2d-ivory-hi: #fffef9;
  --hd2d-parchment: #ead7b7;
  --hd2d-wood: #7c522e;
  --hd2d-wood-deep: #3f2818;
  --hd2d-brass: #d0a35b;
  --hd2d-card-stock-hi: #fffdf7;
  --hd2d-card-stock: #faf4e8;
  --hd2d-card-stock-lo: #e7d9c4;
  --hd2d-card-edge: #8c704d;
  --hd2d-card-accent: #d6ad67;
  --hd2d-panel: linear-gradient(145deg, rgba(255,253,246,.92), rgba(236,218,190,.86));
  --hd2d-carved-shadow: 0 2px 0 rgba(255,255,255,.68), 0 8px 24px rgba(77,48,27,.2);
  --shadow-panel: 0 2px 0 rgba(255,255,255,.62), 0 10px 28px rgba(77,48,27,.2);
  --shadow-panel-lg: 0 2px 0 rgba(255,255,255,.72), 0 18px 42px rgba(77,48,27,.26);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'],
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body {
  background: #cdb391;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body::before {
  display: none;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #app {
  color: #3f3328;
  border-inline-color: rgba(255,250,235,.62);
  background: #d8c2a3 !important;
  box-shadow: 0 0 0 1px rgba(102,73,43,.14), 0 18px 54px rgba(70,43,24,.28);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #app::before {
  inset: 0;
  background: #d8c2a3 var(--hd2d-village-image) center top / cover no-repeat;
  filter: none;
  transform: none;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #board-wrap {
  background: transparent !important;
}

/* Beat the shared phone-fit rule only while a Sunlit Majlis match is open. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap {
  background: transparent !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage {
  flex-shrink: 0;
  translate: none;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #board-wrap::before {
  content: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #board-wrap::after {
  content: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #board {
  filter: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis']
body.perf-lite:has(#menu.hidden) #board {
  filter: none !important;
}

/* User-supplied stone support table below the playable wooden board. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage {
  isolation: isolate;
  z-index: 1;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage::before {
  content: none !important;
}

/* The reference uses one continuous frosted control rail across the top. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 12px;
  right: 12px;
  height: 58px;
  padding: 7px 10px;
  border: 1px solid rgba(255,251,238,.82);
  border-radius: 24px;
  background: linear-gradient(180deg,
    rgba(252,248,237,.44),
    rgba(210,194,172,.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(86,59,39,.14),
    0 2px 3px rgba(73,48,30,.10),
    0 10px 22px rgba(73,48,30,.09);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) :is(.ibtn, #btn-menu, #btn-speed, #btn-sound) {
  width: 43px !important;
  height: 43px !important;
  border: 1px solid rgba(95,72,49,.48) !important;
  border-radius: 50% !important;
  color: #42382f !important;
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(180deg, rgba(247,240,226,.58), rgba(207,191,169,.38)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -2px 4px rgba(83,57,38,.12),
    0 2px 1px rgba(82,55,35,.18),
    0 5px 9px rgba(82,55,35,.11) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) :is(.ibtn, #btn-menu, #btn-speed, #btn-sound):active {
  transform: scale(.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(68,45,28,.16) !important;
}

/* Gold portrait medallions and espresso nameplates match the supplied mockup. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .avw::before {
  inset: -4px;
  border: 1px solid #76502d;
  background: linear-gradient(145deg, #fff0ad, #d7a552 54%, #89552a);
  box-shadow:
    0 0 0 1px rgba(255,246,212,.55),
    1px 3px 4px rgba(72,44,25,.22),
    2px 8px 13px rgba(72,44,25,.14);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .avw::after {
  inset: -2px;
  border-color: rgba(255,245,207,.78);
  background: #5e3b22;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .av,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.active .av {
  border: 1px solid rgba(255,244,210,.78) !important;
  transform: none !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.14),
    inset -2px -3px 4px rgba(40,28,22,.12),
    1px 3px 5px rgba(64,39,22,.17) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill {
  min-height: 23px;
  margin-top: 2px;
  padding: 3px 12px !important;
  border: 1px solid #d8ad61 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(66,45,31,.96), rgba(39,27,20,.97)) !important;
  box-shadow: 0 0 0 1px #70502e, 0 4px 9px rgba(58,36,22,.25) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm {
  color: #fff9e9 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.34) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .seat-title {
  display: none;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat {
  top: calc(env(safe-area-inset-top, 0px) + 112px) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-side-seat {
  top: 37% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat {
  left: 18px !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  transform: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand {
  position: relative;
  z-index: 40 !important;
  height: clamp(172px, 23dvh, 208px);
  padding-bottom: 20px;
}

/* Cards are the top gameplay layer: above the local portrait and every seat
   plate. The important value also beats the per-slot inline fan order. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .hcard:has(.sel),
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .hcard:has(.peek),
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .hcard:has(.drag),
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .hcard:has(.pointer-held) {
  z-index: 80 !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] .card.fly {
  z-index: 90 !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] .card.fly {
  width: clamp(76px, 22vw, 104px);
  border-radius: 11px !important;
  box-shadow: 0 2px 0 #d7c29f, 0 7px 15px rgba(68,43,26,.24), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card.sel,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card.peek {
  transform: translateY(-14px) rotate(-.6deg) !important;
  box-shadow: 0 0 0 2px #fff1bd, 0 0 19px 5px rgba(230,181,87,.68), 0 10px 19px rgba(68,43,26,.25) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #bottom-hud {
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 16px);
  align-items: center;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #turnbar {
  width: min(330px, 78vw);
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px 24px;
  border: 2px solid #f8df9a;
  border-radius: 20px;
  color: #fffaf0 !important;
  background: linear-gradient(180deg, #315f50, #173f36) !important;
  box-shadow: 0 0 0 2px #8a642f, 0 0 0 4px rgba(255,245,209,.88), 0 8px 18px rgba(65,42,24,.24) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The complete inherited menu stays functional, but its surfaces become the
   translucent ivory/glass language shown in the generated reference. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #menu {
  color: #43372d !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(110,75,45,.08)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #d8c2a3 !important;
}

/* Shared menu styles use :has(#pane-...) selectors with two IDs, which beat
   the generic Sunlit rule above and turned every non-home page nearly black.
   Match that active-pane specificity so all menu pages keep this theme. */
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body
#menu:not(.lobby-mode):has(:is(#pane-arenas, #pane-ranked, #pane-friends, #pane-profile, #pane-settings, #pane-quests):not(.hidden)) {
  color: #43372d !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(110,75,45,.08)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #d8c2a3 !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #menu::before {
  opacity: .08 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 42%, rgba(76,48,28,.08)) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #m-top {
  margin: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0 !important;
  width: calc(100% - 24px) !important;
  min-height: 60px !important;
  border: 1px solid rgba(255,250,235,.78) !important;
  border-radius: 24px !important;
  color: #43372d !important;
  background: rgba(232,221,203,.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 9px 24px rgba(68,45,28,.15) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #m-top :is(.icon-btn, #top-profile, #top-settings, #top-friends, #top-trophies),
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #m-top .coin-pill {
  border-color: rgba(104,75,45,.42) !important;
  color: #43372d !important;
  background: rgba(244,236,220,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 9px rgba(68,45,28,.14) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #menu :is(.wood-panel, .settings-card, .profile-card, .fr-card, .theme-intro, .theme-detail-strip) {
  border-color: rgba(255,251,239,.74) !important;
  background: rgba(250,243,230,.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 26px rgba(73,47,28,.16) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #pane-settings .theme-choice.selected {
  border-color: #b38343 !important;
  background: linear-gradient(145deg, rgba(255,253,246,.94), rgba(235,215,182,.9)) !important;
  box-shadow: 0 0 0 2px rgba(255,246,210,.72), 0 9px 22px rgba(69,44,25,.18) !important;
}

@media (max-height: 780px) and (max-width: 520px) {
  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud {
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    height: 50px;
    padding: 6px 8px;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat {
    top: calc(env(safe-area-inset-top, 0px) + 94px) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 102px) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand {
    height: clamp(158px, 22dvh, 184px);
    padding-bottom: 15px;
  }
}

/* ========================================================================== */
/* Reference-match correction: complete rail, portrait seats, clean cards,   */
/* and the explicit post-selection action used by the supplied composition.   */
/* ========================================================================== */

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage {
  translate: 0 clamp(78px, 10dvh, 92px);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud {
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  left: 10px;
  right: 10px;
  height: 42px;
  padding: 5px 8px;
  border-radius: 21px;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud :is(.hud-left, .hud-right) {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud .sunlit-hud-action {
  display: grid !important;
  place-items: center;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud :is(#btn-speed, #btn-sound) {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud .hud-icon-home {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud .hud-icon-menu {
  display: block !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud .ibtn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #jk-connection-status {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate {
  gap: 2px !important;
  opacity: 1 !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .avw,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .av {
  width: clamp(46px, 12.3vw, 52px) !important;
  height: clamp(46px, 12.3vw, 52px) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .av {
  overflow: hidden;
  color: transparent !important;
  background-color: #d9bd8e !important;
  background-repeat: no-repeat !important;
  background-size: 844.45% 1777.78% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate:not(.has-seat-profile-avatar) .av {
  background-image: url('../assets/themes/sunlit-majlis/portrait-atlas.jpg') !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat:not(.has-seat-profile-avatar) .av {
  background-position: 5% 77.8% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-left-seat:not(.has-seat-profile-avatar) .av {
  background-position: 4% 29.5% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat:not(.has-seat-profile-avatar) .av {
  background-position: 50% 14.6% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-right-seat:not(.has-seat-profile-avatar) .av {
  background-position: 96% 29.5% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .av::before,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .av::after {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.has-seat-profile-avatar .av {
  background-image: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.has-seat-profile-avatar .av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .plate-avatar-chip {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .mc {
  width: 10px !important;
  height: 15px !important;
  border: 1px solid rgba(255, 242, 210, .82) !important;
  background: linear-gradient(145deg, #d56a55, #a9362f 62%, #6d211f) !important;
  box-shadow: 0 1px 2px rgba(69, 39, 24, .35), inset 0 0 0 1px rgba(255, 230, 203, .2) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill {
  min-height: 16px !important;
  max-width: 80px;
  margin-top: 0;
  padding: 0 7px !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  line-height: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,210,.16),
    inset 0 -1px 0 rgba(18,11,8,.38),
    0 0 0 1px #70502e,
    1px 3px 5px rgba(58,36,22,.18) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm {
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::before,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::after {
  width: 5px !important;
  height: 10px !important;
  box-shadow: 0 1px 0 rgba(57,32,55,.55) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::before {
  left: -4px !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::after {
  right: -4px !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat {
  top: calc(env(safe-area-inset-top, 0px) + 108px) !important;
  left: 50% !important;
  right: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  transform: translateX(-50%) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-side-seat {
  top: 36% !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat {
  left: 18px !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(138px, 16.7dvh, 152px)) !important;
  transform: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand {
  height: clamp(174px, 23dvh, 204px);
  padding-bottom: 20px !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand::before,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand::after {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] .card.fly {
  width: clamp(72px, 20vw, 82px);
  aspect-ratio: 86 / 122 !important;
  border: 1px solid #cbb691 !important;
  border-radius: 10px !important;
  background: linear-gradient(165deg, #fffefa 0%, #fbf8f1 62%, #eee5d6 100%) !important;
  box-shadow:
    0 2px 0 #d7c5a8,
    1px 4px 3px rgba(68,43,26,.23),
    2px 10px 16px rgba(68,43,26,.12),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(128,91,51,.10) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card .face,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] .card.fly .face {
  inset: 4px !important;
  border: 1px solid rgba(112, 80, 46, .08) !important;
  border-radius: 7px;
  background: rgba(255, 253, 247, .98) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card .rank {
  top: 5px;
  left: 8px;
  font: 700 clamp(22px, 6.6vw, 28px)/1 Georgia, 'Times New Roman', serif !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card .suit {
  padding-top: 14% !important;
  font: 400 clamp(42px, 12.5vw, 52px)/1 Georgia, 'Times New Roman', serif !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card::after,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] .card.fly::after {
  display: block !important;
  inset: 4px;
  border-color: rgba(101, 72, 42, .08);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card.dead::before {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card.sel,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand .card.peek {
  transform: translateY(-16px) rotate(-.6deg) !important;
  box-shadow:
    0 0 0 2px #ffebac,
    0 0 11px 3px rgba(230,181,87,.46),
    0 3px 0 #c7a45d,
    1px 11px 17px rgba(68,43,26,.18) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #bottom-hud {
  min-height: calc(92px + env(safe-area-inset-bottom, 0px));
  padding: 4px 22px calc(env(safe-area-inset-bottom, 0px) + 32px);
  align-items: flex-start;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #turnbar {
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(190px, 52vw, 300px);
  min-height: 52px;
  padding: 0 28px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  border: 2px solid #f8df9a;
  border-radius: 18px;
  color: #fffaf0;
  background: linear-gradient(180deg, #315f50, #173f36);
  box-shadow:
    0 0 0 2px #8a642f,
    0 0 0 4px rgba(255,245,209,.9),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -3px 0 rgba(16,44,36,.32),
    1px 4px 3px rgba(65,42,24,.20),
    2px 11px 18px rgba(65,42,24,.14);
  font: 800 16px/1 system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: opacity .18s ease, transform .2s ease, visibility .18s;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta::before,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta::after {
  content: '✦';
  position: absolute;
  top: 50%;
  color: #e9c76f;
  font-size: 12px;
  transform: translateY(-50%);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta::before { left: 15px; }
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta::after { right: 15px; }

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta.ready {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #play-card-cta.ready:active {
  transform: translateY(2px) scale(.985);
}

@media (max-height: 780px) and (max-width: 520px) {
  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage {
    translate: 0 clamp(66px, 9dvh, 76px);
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hud {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    height: 42px;
    padding: 5px 8px;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat {
    top: calc(env(safe-area-inset-top, 0px) + 82px) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 136px) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #hand {
    height: 174px;
    padding-bottom: 18px !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #bottom-hud {
    min-height: calc(86px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  }
}

/* ========================================================================== */
/* Single-scene board calibration                                               */
/* The supplied full-resolution scene is the only static scene layer.          */
/* transparent and are positioned from the image calibration in render.js.     */
/* ========================================================================== */

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage {
  position: absolute;
  left: var(--sunlit-board-left, 0);
  top: var(--sunlit-board-top, 0);
  margin-top: 0 !important;
  translate: none !important;
  isolation: isolate;
  z-index: 1;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage::before,
html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #stage::after {
  content: none !important;
  display: none !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-partner-seat {
  top: calc(var(--sunlit-board-top, 248px) - 52px) !important;
  left: var(--sunlit-board-cx, 50%) !important;
}

html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body:has(#menu.hidden) #board-wrap .plate.is-side-seat {
  top: calc(var(--sunlit-board-cy, 438px) - 110px) !important;
}

/* The supplied 3408x7384 scene exceeds the texture edge supported by some
   phones. Eight native-resolution crops feed a sequential canvas renderer,
   keeping every individual decode below 2048px without resizing the source. */
@media (max-width: 900px), (pointer: coarse) {
  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] {
    /* Prevent inherited HD-2D panels from requesting the monolithic scene. */
    --hd2d-village-image: url('../assets/themes/sunlit-majlis/scene-board-play-v3-r1-c1.jpg');
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #sunlit-scene-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: none;
    background: #d8c2a3;
  }

  #sunlit-scene-tiles {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: max(100%, calc(100dvh * .46153846));
    height: auto;
    aspect-ratio: 3408 / 7384;
    transform: translateX(-50%);
    overflow: hidden;
    /* Keep a complete low-weight scene visible while the eight high-resolution
       tiles decode. Mobile WebViews can present the first tile long before the
       rest of the mosaic, which otherwise reads as a blank screen. */
    background: #d8c2a3 url('../assets/themes/sunlit-majlis/scene-board-v1.jpg') center top / cover no-repeat;
  }

  #sunlit-scene-tiles img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: fill;
    border: 0;
    opacity: 0;
    transition: opacity 180ms ease-out;
  }

  #sunlit-scene-tiles.sunlit-scene-ready img {
    opacity: 1;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #app {
    background: transparent !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #app::before {
    content: none !important;
    display: none !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] #menu {
    background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(110,75,45,.08)) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis'] body
  #menu:not(.lobby-mode):has(:is(#pane-arenas, #pane-ranked, #pane-friends, #pane-profile, #pane-settings, #pane-quests):not(.hidden)) {
    background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(110,75,45,.08)) !important;
  }

  html[data-ui-theme='hd-2d'][data-ui-theme-variant='sunlit-majlis']
  body:has(#menu:not(.hidden)) #app > :is(#board-wrap, #hand, #bottom-hud) {
    visibility: hidden;
  }

  #pane-settings .theme-preview-majlis {
    background: #ddc5a7 url('../assets/themes/sunlit-majlis/scene-board-play-v3-r2-c1.jpg') center / cover no-repeat;
  }
}