:root {
  color-scheme:dark;
  --chalk:#f2e5cf;
  --gold:#d7b579;
  --ink:#101316;
  --line:rgba(233,220,193,.22);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:clamp(12px,1.15vw,17px)
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  min-width:0;
  height:100%;
  background:#080a0c;
  color:var(--chalk)
}

body {
  height:100vh;
  height:100dvh;
  display:grid;
  place-items:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow:hidden
}

button,input,select {
  font:inherit
}

button {
  cursor:pointer;
  min-height:44px;
  color:var(--chalk);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 16px;
  background:rgba(13,17,19,.84);
  touch-action:manipulation;
  transition:background .18s,border-color .18s
}

button:hover {
  background:rgba(38,43,45,.96);
  border-color:var(--gold)
}

button:focus-visible,select:focus-visible,input:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px
}

button:disabled {
  opacity:.43;
  cursor:default
}

button.cta,button.selected {
  background:#c4a26b;
  color:#15130f;
  border-color:#dfbf8a;
  font-weight:650
}

button.cta:hover {
  background:#debf88
}

button.danger {
  color:#edb3ab
}

button.ghost {
  background:rgba(9,12,14,.65)
}

h1,h2,h3,p {
  margin:0
}

p {
  line-height:1.6
}

h2 {
  font-family:"Songti SC",Georgia,serif;
  font-size:1.55rem
}

h3 {
  font-size:1.08rem
}

small,.micro {
  font-size:.82rem;
  color:#c1bbae;
  line-height:1.5
}

.eyebrow {
  display:block;
  font-size:.7rem;
  color:#c8ad7d;
  letter-spacing:.13em;
  margin-bottom:5px
}

.page-shell {
  position:relative;
  width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));
  aspect-ratio:16/9;
  max-height:100%;
  overflow:hidden;
  background:#0c0d10;
  box-shadow:0 0 100px #000
}

#game-canvas {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain
}

.ui-root {
  position:absolute;
  inset:0;
  z-index:1
}

.scene-layer,.scene-shell {
  position:relative;
  width:100%;
  height:100%
}

.animation-hud {
  position:absolute;
  top:3%;
  left:3%;
  right:9%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  z-index:5;
  text-shadow:0 2px 5px #000
}

.animation-hud>div:first-child {
  display:flex;
  flex-direction:column
}

.animation-hud strong {
  font-size:1.15rem
}

.animation-stats {
  display:flex;
  gap:16px;
  font-size:.9rem;
  padding-top:5px
}

.animation-stats strong {
  font-size:1.05rem;
  margin-left:4px
}

.animation-pause {
  position:absolute;
  z-index:15;
  right:2%;
  top:2%;
  width:44px;
  padding:5px;
  font-weight:bold
}

.scene-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(13,17,19,.9);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  backdrop-filter:blur(10px)
}

.animation-title {
  position:absolute;
  left:12%;
  top:23%;
  max-width:60%;
  text-shadow:0 3px 14px #000
}

.animation-title h1 {
  font-family:"Songti SC","STSong",Georgia,serif;
  font-size:clamp(28px,5vw,72px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:.1em
}

.animation-title h1 span {
  display:block;
  font-size:.68em;
  color:#d8bd89;
  margin-top:.17em
}

.animation-tagline {
  font-size:1rem;
  margin-top:22px;
  color:#d3c5ac
}

.animation-menu-actions {
  position:absolute;
  left:12%;
  bottom:13%;
  display:grid;
  gap:9px;
  min-width:220px;
  width:23%
}

.animation-menu-actions button {
  font-size:1.06rem
}

.animation-vault {
  font-size:.9rem;
  color:#d1b886;
  margin:5px 0
}

.preparation-card {
  position:absolute;
  left:7%;
  top:21%;
  width:43%;
  max-height:73%;
  overflow:auto;
  background:rgba(11,15,17,.92)
}

.venue-selector {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.preparation-cost {
  margin-top:4px
}

.stash-ledger {
  position:absolute;
  right:9%;
  bottom:16%
}

.scene-hotspot {
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:left;
  background:rgba(11,15,17,.72);
  border:1px solid rgba(220,194,151,.36);
  border-radius:9px;
  padding:10px 15px;
  box-shadow:0 8px 18px #0005;
  backdrop-filter:blur(5px);
  min-width:132px
}

.scene-hotspot strong {
  font-weight:600;
  font-size:1rem
}

.scene-hotspot small {
  font-size:.71rem
}

.scene-hotspot-layer {
  position:absolute;
  inset:0
}

.animation-hotspots .scene-hotspot {
  position:absolute
}

.hotspot-play {
  left:41%;
  top:45%
}

.hotspot-service {
  left:8%;
  top:38%
}

.hotspot-search {
  left:12%;
  bottom:23%
}

.hotspot-routes {
  right:8%;
  top:41%
}

.hotspot-transfer {
  right:9%;
  bottom:18%
}

.hotspot-inventory {
  left:38%;
  bottom:10%
}

.animation-scene-note {
  position:absolute;
  bottom:3%;
  left:3%;
  max-width:75%;
  font-size:.82rem;
  color:#d6c9b5;
  text-shadow:0 2px 4px #000
}

.scene-modal-layer {
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:3%
}

.scene-modal-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(2,5,7,.73);
  border:0;
  border-radius:0;
  cursor:default
}

.scene-modal {
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(880px,92%);
  max-height:100%;
  background:rgba(13,17,20,.98);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 20px 70px #0008;
  overflow:hidden
}

.scene-modal-head {
  padding:17px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex:none;
  border-bottom:1px solid var(--line)
}

.scene-modal-head button {
  min-width:60px
}

.scene-modal-body {
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
  overscroll-behavior:contain;
  min-height:0
}

.animation-card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.animation-card-grid .scene-card {
  padding:15px
}

.button-row {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}

.button-row>button {
  flex:1
}

.search-choice {
  display:flex;
  flex-direction:column;
  gap:3px
}

.collateral-choice {
  display:flex;
  align-items:center;
  gap:9px
}

.collateral-choice select {
  flex:1;
  min-width:0;
  min-height:44px;
  padding:10px;
  border-radius:6px;
  background:#1f2428;
  color:var(--chalk);
  border:1px solid var(--line)
}

.music-control {
  display:flex;
  gap:12px;
  align-items:center
}

.music-control input {
  width:100%;
  min-height:44px
}

.animation-transition {
  position:absolute;
  inset:0;
  z-index:45;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  padding:3%;
  background:linear-gradient(transparent 75%,#05070899);
  animation:scene-fade .55s ease
}

.pause-layer {
  z-index:50;
  background:#020406aa
}

.pause-layer .scene-modal {
  max-width:480px
}

.toast-stack {
  position:absolute;
  z-index:60;
  top:16%;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:75%;
  pointer-events:none
}

.toast {
  background:#13191fec;
  border:1px solid var(--line);
  padding:9px 15px;
  border-radius:9px;
  font-size:.83rem;
  text-align:center;
  box-shadow:0 8px 20px #0008
}

.save-warning {
  position:absolute;
  z-index:60;
  bottom:1%;
  left:4%;
  right:4%;
  background:#612e26;
  color:#fff0e9;
  padding:8px;
  text-align:center
}

.animation-summary {
  display:grid;
  place-items:center
}

.summary-card {
  width:58%;
  max-height:90%;
  overflow:auto;
  background:rgba(8,13,17,.85)
}

.summary-card h1 {
  font:600 2.8rem/1.2 "Songti SC",Georgia,serif;
  letter-spacing:.08em
}

.summary-stat-row {
  display:flex;
  gap:18px;
  margin:7px 0
}

.summary-stat-row>span {
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#cab991
}

.summary-stat-row strong {
  font-size:2rem;
  color:#f1ddb8
}

.summary-details {
  font-size:.88rem;
  line-height:1.6
}

.summary-details summary {
  cursor:pointer;
  min-height:44px;
  padding:12px 0
}

.summary-details p {
  margin-bottom:6px
}

.orientation-prompt {
  display:none
}

/* The cards, faces, chips and captions are independent from the scene plate. */
.animation-opponents {
  position:absolute;
  left:13%;
  right:13%;
  top:14%;
  display:flex;
  justify-content:space-between;
  gap:18px
}

.animation-opponent {
  display:flex;
  text-align:left;
  align-items:flex-end;
  gap:9px;
  width:32%;
  max-width:340px;
  background:rgba(9,14,18,.72);
  padding:7px 10px;
  overflow:hidden
}

.opponent-portrait {
  display:block;
  flex:0 0 66px;
  width:66px;
  height:86px;
  background-image:url("../assets/scene-plates/animation-v1/portraits.png");
  background-size:400% 200%;
  background-position:var(--portrait-x) var(--portrait-y);
  background-repeat:no-repeat;
  position:relative;
  border-radius:6px;
  overflow:hidden;
  filter:saturate(.8)
}

.opponent-portrait svg {
  width:100%;
  height:100%;
  fill:#bea77d;
  opacity:.4
}

.portraits-ready .opponent-portrait svg {
  display:none
}

.opponent-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  font-size:.75rem
}

.opponent-copy strong {
  font-size:.95rem
}

.opponent-copy small {
  font-size:.7rem
}

.opponent-copy em {
  font-size:.73rem;
  font-style:normal;
  color:#e1cdab;
  max-height:2.8em;
  overflow:hidden
}

.animation-opponent.acting {
  border-color:#cfb16f;
  box-shadow:0 0 12px #cfb16f33
}

.animation-opponent.tense .opponent-portrait {
  filter:sepia(.3) saturate(1.3)
}

.animation-opponent.folded {
  opacity:.6
}

.animation-board {
  position:absolute;
  left:30%;
  right:30%;
  top:39%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px
}

.card-row {
  display:flex;
  justify-content:center;
  gap:6px
}

.playing-card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:clamp(38px,4.3vw,65px);
  aspect-ratio:5/7;
  background:#eee5d2;
  color:#191c23;
  border-radius:5px;
  box-shadow:0 4px 12px #0005;
  font-weight:bold;
  border:1px solid #cabdaa
}

.playing-card.red {
  color:#a23537
}

.playing-card .rank {
  font:700 1.35rem Georgia,serif;
  align-self:flex-start;
  margin-left:6px
}

.playing-card .suit {
  font-size:1.7rem;
  line-height:1
}

.playing-card.back {
  padding:3px;
  background:#242832
}

.playing-card img {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  border-radius:4px
}

.board-state {
  font-size:.78rem;
  background:#0b1118b0;
  padding:4px 12px;
  border-radius:10px
}

.board-peek {
  font-size:.75rem
}

.animation-player {
  position:absolute;
  left:5%;
  bottom:7%;
  display:flex;
  align-items:center;
  gap:13px
}

.animation-player>div:last-child {
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:150px;
  font-size:.78rem
}

.animation-action-dock {
  position:absolute;
  left:35%;
  right:4%;
  bottom:5%
}

.table-action-bar-shell {
  display:flex;
  flex-direction:column;
  gap:7px;
  background:#0c131ad1;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px
}

.table-action-status {
  font-size:.83rem
}

.table-action-status>p.micro {
  display:none
}

.table-button-row {
  flex-wrap:nowrap;
  gap:7px
}

.table-button-row button {
  padding:9px 12px;
  white-space:nowrap;
  font-size:.86rem
}

.raise-control-strip {
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:9px;
  align-items:center
}

.raise-label {
  font-size:.74rem
}

.raise-presets {
  display:flex;
  gap:5px
}

.raise-preset-btn {
  font-size:.7rem;
  padding:5px 8px
}

.raise-slider-row {
  display:flex;
  gap:6px;
  align-items:center;
  min-width:0
}

.raise-slider-row .raise-bound {
  display:none
}

.raise-slider {
  width:100%;
  min-width:50px;
  height:44px;
  accent-color:#d2b77d
}

.raise-commit-row {
  display:flex;
  align-items:center;
  gap:7px
}

.raise-current-value {
  font-size:.75rem
}

.raise-confirm-btn {
  padding:7px 10px;
  min-width:56px
}

.table-item-row {
  display:flex;
  gap:5px;
  flex-wrap:wrap
}

.table-item-row button {
  font-size:.71rem;
  padding:7px 9px
}

.table-item-status-strip {
  display:none
}

.table-verdict-inline {
  font-size:.76rem;
  max-height:55px;
  overflow:auto
}

.animation-log-toggle {
  position:absolute;
  left:3%;
  bottom:29%;
  font-size:.76rem
}

.animation-hand-log {
  position:absolute;
  z-index:12;
  left:3%;
  bottom:39%;
  max-width:40%;
  max-height:35%;
  overflow:auto;
  font-size:.77rem;
  background:#0b131dee;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px
}

.collapsed {
  display:none!important
}

@keyframes scene-fade {
  from {
    opacity:0
  }

  to {
    opacity:1
  }

}

@media(max-height:550px) {
  :root {
    font-size:12px
  }

  .animation-title {
    top:18%
  }

  .animation-title h1 {
    font-size:clamp(28px,4.8vw,46px)
  }

  .animation-tagline {
    margin-top:12px
  }

  .animation-menu-actions {
    bottom:8%;
    min-width:180px;
    gap:6px
  }

  .animation-menu-actions .micro {
    display:none
  }

  .preparation-card {
    top:19%;
    left:4%;
    width:51%;
    padding:13px;
    gap:7px
  }

  .venue-selector {
    gap:6px
  }

  .venue-selector button {
    padding:7px 10px
  }

  .animation-hud {
    top:3%;
    left:3%;
    right:10%
  }

  .animation-hud .eyebrow {
    margin-bottom:1px
  }

  .animation-stats {
    gap:11px;
    font-size:.8rem
  }

  .scene-hotspot {
    min-width:110px;
    min-height:48px;
    padding:7px 11px
  }

  .scene-hotspot small {
    font-size:.66rem
  }

  .scene-hotspot strong {
    font-size:.89rem
  }

  .hotspot-play {
    left:41%;
    top:45%
  }

  .hotspot-service {
    left:6%;
    top:34%
  }

  .hotspot-search {
    left:10%;
    bottom:22%
  }

  .hotspot-routes {
    right:4%;
    top:38%
  }

  .hotspot-transfer {
    right:5%;
    bottom:15%
  }

  .hotspot-inventory {
    left:37%;
    bottom:6%
  }

  .animation-scene-note {
    display:none
  }

  .scene-modal-layer {
    padding:2%
  }

  .scene-modal {
    width:96%
  }

  .scene-modal-head {
    padding:9px 13px
  }

  .scene-modal-body {
    padding:12px 14px;
    gap:10px
  }

  .animation-card-grid {
    gap:9px
  }

  .animation-card-grid .scene-card {
    padding:11px;
    gap:7px
  }

  .opponent-portrait {
    flex-basis:43px;
    width:43px;
    height:58px
  }

  .animation-opponents {
    left:10%;
    right:10%;
    top:14%
  }

  .animation-opponent {
    width:35%;
    padding:5px 7px;
    gap:7px
  }

  .opponent-copy {
    gap:1px
  }

  .opponent-copy small {
    display:none
  }

  .opponent-copy em {
    max-height:1.5em;
    font-size:.68rem
  }

  .playing-card {
    width:38px
  }

  .playing-card .rank {
    font-size:1.18rem
  }

  .playing-card .suit {
    font-size:1.45rem
  }

  .animation-board {
    top:38%;
    left:29%;
    right:29%;
    gap:4px
  }

  .animation-player {
    left:4%;
    bottom:7%;
    gap:8px
  }

  .animation-player .playing-card {
    width:36px
  }

  .animation-player>div:last-child {
    max-width:108px;
    font-size:.72rem
  }

  .animation-action-dock {
    left:35%;
    right:3%;
    bottom:4%
  }

  .table-action-bar-shell {
    padding:7px;
    gap:5px
  }

  .table-action-status>strong {
    font-size:.76rem
  }

  .table-button-row {
    gap:5px
  }

  .table-button-row button {
    padding:5px 9px;
    font-size:.76rem
  }

  .raise-control-strip {
    gap:5px;
    grid-template-columns:auto minmax(45px,1fr) auto
  }

  .raise-label {
    display:none
  }

  .raise-presets {
    gap:4px
  }

  .raise-presets button {
    padding:4px 6px
  }

  .raise-commit-row {
    gap:4px
  }

  .raise-current-value {
    font-size:.7rem
  }

  .table-item-row button {
    font-size:.66rem;
    min-height:44px;
    padding:4px 6px
  }

  .table-verdict-inline {
    max-height:42px;
    font-size:.7rem
  }

  .summary-card {
    width:65%;
    padding:17px;
    gap:8px
  }

  .summary-card h1 {
    font-size:2rem
  }

  .summary-stat-row strong {
    font-size:1.5rem
  }

  .animation-log-toggle {
    bottom:29%;
    padding:5px 9px
  }

  .toast-stack {
    top:13%;
    font-size:.75rem
  }

}

@media(orientation:portrait) and (max-width:950px) {
  .orientation-prompt {
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding:35px;
    text-align:center;
    background:#0d1116;
    color:#e8d4ac
  }

  .orientation-prompt strong {
    font-size:1.45rem
  }

  .orientation-prompt span {
    max-width:260px;
    font-size:.95rem;
    line-height:1.7
  }

  .orientation-prompt .rotate-icon {
    font-size:64px;
    line-height:1
  }

  .page-shell {
    pointer-events:none;
    visibility:hidden
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }

}

.animation-sprite { display:inline-block; position:relative; width:100%; height:100%; pointer-events:none; transform:translateY(calc(var(--sprite-breathe,0) * 1px)); }
.animation-sprite canvas { display:none; width:100%; height:100%; object-fit:contain; }
.animation-sprite[data-source="atlas"] canvas,.animation-sprite[data-source="reference"] canvas { display:block; }
.animation-sprite[data-source="atlas"] .item-sprite-symbol,.animation-sprite[data-source="reference"] .item-sprite-symbol { display:none; }
.opponent-portrait:has(.animation-sprite[data-source="atlas"]),.opponent-portrait:has(.animation-sprite[data-source="reference"]) { background-image:none; }
.opponent-portrait:has(.animation-sprite[data-source="atlas"]) svg,.opponent-portrait:has(.animation-sprite[data-source="reference"]) svg { display:none; }
.opponent-portrait { transform:translateY(calc(var(--sprite-breathe,0) * 1px)); }
.opponent-portrait .animation-sprite { position:absolute; inset:0; transform:none; }
.item-sprite { width:52px; height:52px; flex:0 0 52px; overflow:hidden; }
.item-sprite-symbol { display:grid; place-items:center; width:100%; height:100%; font-size:1.7rem; color:#cab67f; }
.item-sprite::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 35%,#fff1 48%,transparent 62%); transform:translateX(var(--sprite-glint,0%)); }
.item-heading { display:flex; align-items:center; gap:12px; }
.item-heading h3 { margin:0; }
.scene-modal-body>button .item-sprite { width:28px; height:28px; vertical-align:middle; margin-right:8px; }
.animation-bartender { position:absolute; left:11%; top:18%; width:64px; height:100px; pointer-events:none; }
.animation-bartender>span:last-child { position:absolute; bottom:0; left:0; right:0; text-align:center; background:#0c1019aa; color:#d6c6a4; font-size:.7rem; }
.animation-commit-feedback { position:absolute; z-index:15; top:24%; left:40%; display:flex; align-items:center; gap:8px; padding:6px 12px; max-width:45%; background:#111820df; color:#ecd7a0; border-radius:10px; pointer-events:none; animation:commit-feedback .85s ease-out both; }
.animation-commit-feedback .item-sprite { width:32px; height:32px; flex-basis:32px; }
.animation-commit-feedback strong { font-size:.8rem; }
.card-arrive { animation:card-arrive .28s ease-out both; }
.chip-change { display:inline-block; animation:chip-change .24s ease-out both; }
.motion-paused .card-arrive,.motion-paused .chip-change,.motion-paused .animation-commit-feedback { animation-play-state:paused; }
@keyframes card-arrive { from { opacity:0; transform:translateY(8px) rotateY(35deg); } to { opacity:1; transform:none; } }
@keyframes commit-feedback { 0% { opacity:0; transform:translateY(8px) scale(.96); } 20% { opacity:1; transform:none; } 80% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-6px); } }
@keyframes chip-change { from { color:#fff3c9; transform:translateY(-2px) scale(1.08); } to { transform:none; } }
@media(max-height:600px) { .item-sprite { width:38px; height:38px; flex-basis:38px; } .animation-bartender { left:10%; top:14%; width:42px; height:70px; } .animation-commit-feedback { top:28%; left:36%; max-width:56%; padding:4px 8px; } }
@media(prefers-reduced-motion:reduce) { .animation-sprite { transform:none; } .item-sprite::after { display:none; } }

.animation-tools {
  position:absolute;
  right:3%;
  bottom:29%;
  font-size:.76rem;
  min-height:44px
}

.scene-modal-body>button {
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:left
}

.scene-modal-body>button small {
  font-size:.75rem
}

.animation-tools {
  top:45%;
  bottom:auto
}
.music-control {
  white-space: nowrap;
}
.music-control input {
  width: auto;
  min-width: 0;
  flex: 1;
}