/* Fixed design frame: 1280×800 (8:5). JS scales #stage uniformly. */

:root {
  --stage-w: 1280px;
  --stage-h: 800px;
  --card-w: 110px;
  --card-h: 154px;
  --hand-h: 210px;
  --hand-overlap: 40px;
  --card-ratio: 110 / 154;
  --board-card-h: 210px;
  --board-card-w: 150px; /* 210 * 110 / 154 */
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #05070c !important;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: top left;
  /* Letterbox scale is applied by fitStage() via transform translate+scale.
     Do not use CSS zoom here — WeChat WebView breaks layout with zoom. */
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61, 124, 255, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(212, 168, 75, 0.08), transparent 40%),
    #0c121e;
  box-shadow:
    0 0 0 1px rgba(212, 168, 75, 0.2),
    0 18px 60px rgba(0, 0, 0, 0.55);
}

#app {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

/* Overlays live inside the scaled stage, except cover / deck builder / lord
   picker which stay on the viewport so taps still hit them inside WeChat. */
#codex-overlay,
#codex-detail,
#boot-loader,
#gameover,
.overlay,
#target-hint,
#toast {
  position: absolute !important;
}

#cover-overlay,
#deck-builder-overlay,
#lord-picker-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000 !important;
}
#deck-builder-overlay {
  z-index: 4100 !important;
}
#lord-picker-overlay {
  z-index: 4200 !important;
}

.cover-panel {
  width: min(92%, 480px) !important;
}

#boot-loader .boot-card {
  width: min(420px, 86%) !important;
}

#preload-track {
  width: min(320px, 70%) !important;
}

#enemy-hand-backs {
  max-width: 640px !important;
}

#target-hint,
#toast {
  max-width: 90% !important;
}

#top-bar h1 {
  max-width: none !important;
}

/* Keep three-column table at every viewport; media queries use the window, not the stage */
#game-table {
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1fr) 160px !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

#combat-log {
  display: block !important;
}

.db-body {
  grid-template-columns: 1.4fr 1fr !important;
  grid-template-rows: none !important;
}

/* Board slots: same 110:154 as hand faces, fixed px inside the stage */
.lane-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: none !important;
}

.lane-slot {
  flex: 0 0 var(--board-card-w) !important;
  width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  max-width: var(--board-card-w) !important;
  max-height: var(--board-card-h) !important;
  aspect-ratio: 110 / 154 !important;
  align-self: center !important;
}

.lane-slot .board-card,
.lane-slot .card,
.lane-slot .card.layout-b,
.lane-slot .card.layout-b.board-card {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 110 / 154;
}

.hand-slot,
.hand-slot .card,
#codex-grid .card.layout-b,
.db-card-scale .card {
  aspect-ratio: 110 / 154;
}

.hand-slot {
  width: var(--card-w) !important;
  flex: 0 0 var(--card-w) !important;
}

.hand-slot .card {
  width: var(--card-w) !important;
  height: var(--card-h) !important;
}

.db-card-scale {
  width: 88px !important;
  height: 123.2px !important; /* 88 × 154/110 */
  aspect-ratio: 110 / 154;
}

.enemy-back {
  width: auto !important;
  height: 48px !important;
  aspect-ratio: 110 / 154 !important;
}

.spell-fly-card {
  width: 132px !important;
  height: 185px !important; /* 132 × 154/110 */
  aspect-ratio: 110 / 154;
}