/* Independent scene, object, type and command layers from the approved trading table. */
body #merchantModeDialog.royal-table-dialog {
  --table-white: #f2e8d4; --table-gold: #bba172; --table-red: #9e2527;
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none;
  max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0;
  overflow: hidden; background: #101112; color: var(--table-white); box-shadow: none;
  font: 16px/1.4 'Songti SC','STSong',serif; letter-spacing: 0;
}
body #merchantModeDialog.royal-table-dialog[open] { display: block; }
#merchantModeDialog.royal-table-dialog::backdrop { background: #101112; backdrop-filter: none; }
.royal-table-stage { position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; }
.royal-scene-plate { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
body #merchantModeDialog button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; letter-spacing: 0; }
body #merchantModeDialog :focus-visible { outline: 2px solid var(--table-white); outline-offset: 4px; }
.royal-table-nav { position: absolute; z-index: 5; left: 2%; right: 2%; top: 2%; display: flex; align-items: center; gap: 18px; height: 52px; }
body #merchantModeDialog .royal-icon-button {
  display: grid; place-items: center; flex: none; min-width: 44px; min-height: 44px;
  width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--table-white); cursor: pointer;
}
body #merchantModeDialog .royal-icon-button:hover { background: #9e2527; }
.royal-icon-button svg { width: 25px; height: 25px; }
.royal-entry-brand { display: flex; align-items: center; gap: 14px; min-width: 0; border-left: 1px solid #bba17280; padding-left: 18px; }
.royal-entry-brand img { width: 36px; height: 44px; object-fit: contain; }
.royal-entry-brand span { font-size: 25px; font-weight: 600; white-space: nowrap; }
.royal-entry-tools { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.royal-entry-tools button + button { border-left: 1px solid #bba17270 !important; }
.royal-entry-title { position: absolute; top: 12%; left: 6.3%; width: 27%; }
.royal-entry-title h2 { margin: 0; font: 600 76px/1.12 'Songti SC','STSong',serif; color: var(--table-white); white-space: nowrap; letter-spacing: 0; }
.royal-title-rule { display: block; position: relative; height: 1px; background: #bba1729c; width: 94%; margin: 22px 0 8px; }
.royal-title-rule::after { content: ''; position: absolute; left: 48%; top: -3px; width: 6px; height: 6px; border: 1px solid var(--table-gold); background: #101112; transform: rotate(45deg); }
.royal-caravan { position: absolute; margin: 0; cursor: default; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.royal-caravan-mark { position: relative; width: 172px; aspect-ratio: 3/2; margin-left: 12%; }
.royal-caravan-scene { left: 50.2%; top: 16.3%; width: 22.3%; aspect-ratio: 3/2; }
.royal-caravan-motion, .royal-caravan-sprite { position: absolute; inset: 0; display: block; }
.royal-caravan-motion { transform: translateX(0); transition: transform 480ms ease-out; }
.royal-caravan.is-walking .royal-caravan-motion { transform: translateX(-7%); transition: transform 2800ms linear; }
.royal-caravan-sprite {
  background: url('./assets/ui/royal-entry/caravan-walk-v1.webp') 0 0 / 200% 200% no-repeat;
  animation: royal-caravan-walk 880ms steps(1,end) infinite; animation-play-state: paused;
}
.royal-caravan.is-walking .royal-caravan-sprite { animation-play-state: running; }
.royal-caravan-mark .royal-caravan-sprite {
  background: var(--table-white); mask: url('./assets/ui/royal-entry/caravan-walk-v1.webp') 0 0 / 200% 200% no-repeat;
}
@keyframes royal-caravan-walk {
  0%,100% { background-position: 0 0; mask-position: 0 0; }
  25% { background-position: 100% 0; mask-position: 100% 0; }
  50% { background-position: 0 100%; mask-position: 0 100%; }
  75% { background-position: 100% 100%; mask-position: 100% 100%; }
}
body #merchantModeDialog .royal-deck-fan {
  position: absolute; left: 24.8%; top: 46.5%; width: 31%; height: 34%;
  min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; overflow: visible; cursor: pointer; perspective: 1100px; touch-action: none;
}
body #merchantModeDialog .royal-deck-fan:is(:hover,:active,:focus-visible) { background: transparent; box-shadow: none; transform: none; }
.royal-table-card {
  --fan-angle: 0deg; --fan-shift: 0%; --fan-lift: 0px;
  position: absolute; left: 31%; bottom: 6%; width: 38%; aspect-ratio: 2/3;
  display: block; transform-origin: center 85%; pointer-events: none;
  filter: drop-shadow(0 9px 5px #0006);
  transform: translate(calc(var(--fan-shift) + var(--table-drag-x,0px)),calc(var(--fan-lift) + var(--table-drag-y,0px))) rotate(var(--fan-angle)) rotateX(calc(17deg + var(--table-tilt-x,0deg))) rotateY(var(--table-tilt-y,0deg));
  transition: transform 480ms cubic-bezier(.2,.75,.2,1), filter 220ms ease;
}
.royal-table-card img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.royal-table-card[data-card='left'] { --fan-angle: -15deg; --fan-shift: -67%; z-index: 1; }
.royal-table-card[data-card='right'] { --fan-angle: 17deg; --fan-shift: 67%; z-index: 2; }
.royal-table-card[data-card='center'] { z-index: 3; --fan-lift: -17px; }
.royal-deck-fan:is(:hover,:focus-visible) .royal-table-card { --fan-lift: -14px; filter: drop-shadow(0 12px 7px #0006); }
.royal-deck-fan:is(:hover,:focus-visible) [data-card='left'] { --fan-angle: -20deg; --fan-shift: -77%; }
.royal-deck-fan:is(:hover,:focus-visible) [data-card='right'] { --fan-angle: 22deg; --fan-shift: 77%; }
.royal-deck-fan:is(:hover,:focus-visible) [data-card='center'] { --fan-lift: -30px; }
body #merchantModeDialog .royal-deck-fan.is-dragging { cursor: grabbing; }
.royal-deck-fan.is-dragging .royal-table-card { transition-duration: 80ms; }
.royal-table-coin { position: absolute; left: 10.6%; top: 59.7%; width: 10.4%; aspect-ratio: 3/2; min-width: 44px; margin: 0; cursor: default; }
.royal-table-coin > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 3px #0008); }
.royal-coin-reflection { position: absolute; inset: 0; display: block; pointer-events: none; mask: url('./assets/ui/royal-entry/spade-coin-v1.webp') center / contain no-repeat; overflow: hidden; }
.royal-coin-reflection i { display: block; position: absolute; inset: -20% 0; opacity: 0; background: linear-gradient(90deg,transparent 24%,#fff9d800 31%,#fffce9b3 45%,#fffef8e6 50%,#fffce98c 56%,transparent 68%); transform: translateX(-125%) skewX(-24deg); }
body #merchantModeDialog .royal-entry-loadout {
  position: absolute; left: 2.4%; bottom: 5.4%; width: 66.8%; min-height: 56px;
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  padding: 0; border: 0; color: var(--table-white); background: transparent;
}
.royal-entry-loadout > small { font-size: 15px; color: var(--table-white); flex: none; }
.royal-entry-loadout > img { width: 62px; height: 50px; object-fit: cover; object-position: center 20%; border: 1px solid #bba17270; transform: rotate(-4deg); flex: none; }
.royal-entry-loadout > strong { font-size: 22px; font-weight: 600; max-width: 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.royal-entry-loadout > span { font-size: 17px; padding-left: 16px; border-left: 1px solid #bba17270; flex: none; color: var(--table-white); }
body #merchantModeDialog #merchantEntryDeckButton { border: 0; border-radius: 0; background: transparent; color: var(--table-white); padding: 8px 12px; min-height: 44px; font-size: 16px; flex: none; }
body #merchantModeDialog #merchantEntryDeckButton:hover { background: #10111266; color: #fffaf0; text-decoration: none; }
#merchantEntryDeckButton svg { width: 22px; height: 22px; }
.royal-command-rail { position: absolute; left: 72.45%; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; padding: 96px 36px 36px; }
#merchantModeDialog .royal-table-rules { display: grid; grid-template-rows: repeat(4,minmax(0,1fr)); grid-template-columns: minmax(0,1fr); flex: 1; min-height: 0; margin: 0; }
#merchantModeDialog .royal-table-rules > div { display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; gap: 7px 22px; align-content: center; align-items: center; justify-content: start; padding: 18px 0; border-bottom: 1px solid #bba17266; }
.royal-table-rules > div > :is(img,span) { grid-row: 1/3; width: 40px; height: 40px; display: grid; place-items: center; }
.royal-table-rules img { object-fit: contain; }
.royal-table-rules svg { width: 35px; height: 35px; stroke-width: 1.2; color: var(--table-white); }
#merchantModeDialog .royal-table-rules dt { font-size: 17px; line-height: 1.2; color: var(--table-white); }
#merchantModeDialog .royal-table-rules dd { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; color: var(--table-white); }
#merchantModeDialog .royal-table-rules dd strong { font: 500 43px/1.1 Georgia,serif; min-width: 0; color: inherit; font-variant-numeric: tabular-nums; }
#merchantModeDialog .royal-table-rules dd span { font-size: 27px; color: inherit; white-space: nowrap; }
#merchantModeDialog .royal-entry-actions { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 82px 68px; gap: 15px; padding: 0; margin-top: 30px; border: 0; }
body #merchantModeDialog .royal-play-command { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: 44px; border: 0; border-radius: 0; padding: 12px 18px; background: transparent; color: var(--table-white); cursor: pointer; font: 600 31px/1.2 'Songti SC','STSong',serif; }
.royal-play-command svg { width: 26px; height: 26px; transition: transform 200ms ease; }
body #merchantModeDialog #merchantOnlineButton::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #a3292a url('./assets/ui/royal-entry/table-v1.webp') 0 100% / 1000% 600% no-repeat; background-blend-mode: soft-light; border: 1px solid #c68559; clip-path: polygon(6% 0,94% 0,100% 24%,100% 76%,94% 100%,6% 100%,0 76%,0 24%); transition: background-color 180ms ease; }
body #merchantModeDialog #merchantOnlineButton:hover { background: transparent; color: #fffaf0; }
body #merchantModeDialog #merchantOnlineButton:hover::before { background-color: #bc3233; }
body #merchantModeDialog #merchantPracticeButton { border-top: 1px solid #bba17266; font-size: 25px; }
body #merchantModeDialog #merchantPracticeButton:hover { background: #f2e8d40a; }
.royal-play-command:hover svg { transform: translateX(5px); }
body #merchantModeDialog .royal-play-command:focus-visible { outline: none; }
.royal-play-command:focus-visible > span { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }

@media (min-width: 1800px) and (min-height: 800px) {
  .royal-entry-title h2 { font-size: 96px; }
  .royal-command-rail { padding: 110px 46px 48px; }
  #merchantModeDialog .royal-table-rules dt { font-size: 21px; }
  #merchantModeDialog .royal-table-rules dd strong { font-size: 54px; }
  #merchantModeDialog .royal-table-rules dd span { font-size: 32px; }
  body #merchantModeDialog .royal-play-command { font-size: 38px; }
}
@media (max-width: 1250px) and (min-height: 521px) {
  .royal-entry-title h2 { font-size: 56px; }
  .royal-caravan-mark { width: 138px; }
  .royal-command-rail { padding: 80px 24px 24px; }
  #merchantModeDialog .royal-table-rules > div { grid-template-columns: 30px minmax(0,1fr); gap: 5px 12px; padding: 10px 0; }
  .royal-table-rules > div > :is(img,span) { width: 30px; height: 30px; }
  .royal-table-rules svg { width: 27px; height: 27px; }
  #merchantModeDialog .royal-table-rules dt { font-size: 14px; }
  #merchantModeDialog .royal-table-rules dd strong { font-size: 34px; }
  #merchantModeDialog .royal-table-rules dd span { font-size: 21px; }
  #merchantModeDialog .royal-entry-actions { grid-template-rows: 68px 56px; margin-top: 24px; gap: 12px; }
  body #merchantModeDialog .royal-play-command { font-size: 24px; gap: 12px; }
  body #merchantModeDialog #merchantPracticeButton { font-size: 20px; }
  body #merchantModeDialog .royal-entry-loadout { gap: 10px; }
  .royal-entry-loadout > small { font-size: 12px; }
  .royal-entry-loadout > img { width: 44px; height: 42px; }
  .royal-entry-loadout > strong { font-size: 18px; max-width: 160px; }
  .royal-entry-loadout > span { font-size: 13px; padding-left: 10px; }
  body #merchantModeDialog #merchantEntryDeckButton { font-size: 13px; padding-inline: 6px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .royal-table-nav { height: 44px; top: 8px; gap: 8px; }
  .royal-entry-brand { padding-left: 8px; gap: 8px; }
  .royal-entry-brand img { width: 25px; height: 34px; }
  .royal-entry-brand span { font-size: 18px; }
  .royal-entry-tools { gap: 4px; }
  .royal-entry-title { top: 18%; left: 5%; width: 29%; }
  .royal-entry-title h2 { font-size: 38px; }
  .royal-title-rule { margin: 10px 0 0; }
  .royal-caravan-mark { width: 105px; }
  .royal-caravan-scene { top: 12%; }
  body #merchantModeDialog .royal-deck-fan { top: 41%; height: 42%; width: 26%; left: 28%; }
  .royal-table-card { width: 38%; }
  .royal-table-card[data-card='center'] { --fan-lift: -8px; }
  .royal-deck-fan:is(:hover,:focus-visible) [data-card='center'] { --fan-lift: -16px; }
  .royal-table-coin { top: 60%; width: 10%; }
  .royal-command-rail { padding: 58px 16px 10px; }
  #merchantModeDialog .royal-table-rules > div { grid-template-columns: 24px minmax(0,1fr); gap: 2px 10px; padding: 5px 0; }
  .royal-table-rules > div > :is(img,span) { width: 23px; height: 23px; }
  .royal-table-rules svg { width: 22px; height: 22px; }
  #merchantModeDialog .royal-table-rules dt { font-size: 11px; }
  #merchantModeDialog .royal-table-rules dd { gap: 6px; }
  #merchantModeDialog .royal-table-rules dd strong { font-size: 24px; }
  #merchantModeDialog .royal-table-rules dd span { font-size: 17px; }
  #merchantModeDialog .royal-entry-actions { grid-template-rows: 44px 44px; gap: 6px; margin-top: 8px; }
  body #merchantModeDialog .royal-play-command { font-size: 21px; padding: 6px 10px; gap: 8px; }
  body #merchantModeDialog #merchantPracticeButton { font-size: 17px; }
  .royal-play-command svg { width: 19px; height: 19px; }
  body #merchantModeDialog .royal-entry-loadout { bottom: 3%; gap: 8px; min-height: 44px; }
  .royal-entry-loadout > small { font-size: 11px; }
  .royal-entry-loadout > img { width: 34px; height: 32px; }
  .royal-entry-loadout > strong { font-size: 15px; max-width: 145px; }
  .royal-entry-loadout > span { font-size: 12px; padding-left: 8px; }
  body #merchantModeDialog #merchantEntryDeckButton { min-height: 44px; font-size: 12px; padding: 4px 6px; gap: 5px; }
  #merchantEntryDeckButton svg { width: 17px; height: 17px; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .royal-entry-title h2 { font-size: 31px; }
  .royal-command-rail { padding-top: 50px; padding-inline: 12px; }
  #merchantModeDialog .royal-table-rules dd strong { font-size: 19px; }
  #merchantModeDialog .royal-table-rules dd span { font-size: 14px; }
  #merchantModeDialog .royal-table-rules > div { gap: 1px 6px; padding: 3px 0; }
  .royal-table-rules > div > :is(img,span) { width: 20px; height: 20px; }
  .royal-entry-loadout > img { display: none; }
  .royal-entry-loadout > strong { max-width: 110px; font-size: 13px; }
  body #merchantModeDialog .royal-play-command { font-size: 18px; }
  body #merchantModeDialog #merchantPracticeButton { font-size: 16px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .royal-scene-plate { height: 60%; object-fit: cover; object-position: left center; }
  .royal-table-nav { left: 3%; right: 3%; top: 12px; gap: 6px; height: 44px; }
  .royal-entry-brand { gap: 6px; padding-left: 6px; }
  .royal-entry-brand img { width: 22px; height: 30px; }
  .royal-entry-brand span { font-size: 18px; }
  .royal-entry-tools { gap: 2px; }
  .royal-entry-title { top: 11%; left: 6%; width: 65%; }
  .royal-entry-title h2 { font-size: 44px; }
  .royal-title-rule { width: 76%; margin: 14px 0 0; }
  .royal-caravan-mark { width: 120px; margin-left: 8%; }
  .royal-caravan-scene { left: 46%; top: 22%; width: 52%; }
  body #merchantModeDialog .royal-deck-fan { top: 32%; left: 25%; width: 65%; height: 20%; }
  .royal-table-coin { left: 5%; top: 43%; width: 21%; }
  body #merchantModeDialog .royal-entry-loadout { left: 4%; top: 52%; bottom: auto; width: 92%; gap: 8px; min-height: 48px; flex-wrap: wrap; }
  .royal-entry-loadout > small { font-size: 11px; }
  .royal-entry-loadout > img { display: none; }
  .royal-entry-loadout > strong { font-size: 17px; max-width: 160px; }
  .royal-entry-loadout > span { font-size: 12px; padding-left: 8px; }
  body #merchantModeDialog #merchantEntryDeckButton { font-size: 13px; margin-left: auto; padding-inline: 4px; }
  .royal-command-rail { left: 0; top: 59%; padding: 18px 22px 22px; background: url('./assets/ui/royal-entry/table-v1.webp') right center / 400% 100% no-repeat; }
  #merchantModeDialog .royal-table-rules { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  #merchantModeDialog .royal-table-rules > div { grid-template-columns: 28px minmax(0,1fr); gap: 5px 10px; padding: 10px 0; }
  .royal-table-rules > div > :is(img,span) { width: 27px; height: 27px; }
  #merchantModeDialog .royal-table-rules dt { font-size: 12px; }
  #merchantModeDialog .royal-table-rules dd strong { font-size: 28px; }
  #merchantModeDialog .royal-table-rules dd span { font-size: 19px; }
  #merchantModeDialog .royal-entry-actions { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 56px; margin-top: 18px; gap: 14px; }
  body #merchantModeDialog .royal-play-command { padding: 8px; font-size: 21px; gap: 4px; }
  body #merchantModeDialog #merchantPracticeButton { font-size: 19px; }
  .royal-play-command svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #merchantModeDialog :is(.royal-table-card,.royal-caravan-motion,.royal-play-command svg) { transition: none; }
  #merchantModeDialog .royal-caravan-sprite { animation: none; }
  #merchantModeDialog .royal-caravan-motion { transform: none; }
}
body.salon-reduced-motion #merchantModeDialog .royal-caravan-sprite { animation: none; }
body.salon-reduced-motion #merchantModeDialog :is(.royal-table-card,.royal-caravan-motion,.royal-play-command svg) { transition: none; }
body.salon-reduced-motion #merchantModeDialog .royal-caravan-motion { transform: none; }