/* The actual ticket art and the live number scale as one, without stretching. */
html[data-theme] .zone-stack { min-height: 0; height: 100%; }
html[data-theme] .number-board { --ticket-gap: clamp(5px, .7vw, 12px); gap: var(--ticket-gap); container-type: size; }
html[data-theme] .number-tile,
html[data-theme] .zone-lower .number-tile,
html[data-theme] .number-tile:disabled,
html[data-theme] .zone-lower .number-tile:disabled {
  width: min(100%, calc((100cqh - 4 * var(--ticket-gap)) / 5 * 2.85));
  max-width: none; height: auto; aspect-ratio: 2.85; place-self: center;
  border: 0; border-radius: 0; clip-path: none; background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  box-shadow: none; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: clamp(14px, 6.2cqh, 36px); line-height: 1; font-weight: 800;
  text-shadow: 0 1px 1px rgba(255,255,255,.7);
}
html[data-theme] .number-tile::before, html[data-theme] .number-tile::after { display: none; }
html[data-theme] .number-tile:hover:not(:disabled) { transform: translateY(-2px) scale(1.025); filter: drop-shadow(0 4px 5px rgba(16,32,53,.3)) brightness(1.08); }
html[data-theme] .number-tile:disabled, html[data-theme] .zone-lower .number-tile:disabled { opacity: .48; color: #193e63; filter: saturate(.45); text-shadow: 0 1px 1px rgba(255,255,255,.65); }
html[data-theme='cloud'] .zone-upper .number-tile,
html[data-theme='cloud'] .number-tile:disabled { background-image: url('./assets/images/cloud-economy-ticket.png'); color: #15385c; }
html[data-theme='cloud'] .zone-lower .number-tile { background-image: url('./assets/images/cloud-business-ticket.png'); color: #fff0cd; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
html[data-theme='cloud'] .zone-lower .number-tile:disabled { background-image: url('./assets/images/cloud-economy-ticket.png'); color: #193e63; }

/* Each theme is one transparent card composition, with only live UI over it. */
html[data-theme] .reveal-dialog {
  --art-ratio: 1.777778;
  width: min(1380px, calc(100vw - 24px), calc((100dvh - 24px) * var(--art-ratio)));
  max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none;
  container-type: inline-size;
}
html[data-theme] .reveal-dialog::backdrop { background: rgba(8,20,42,.55); backdrop-filter: blur(2px); }
html[data-theme] .reveal-dialog[data-reveal-theme="cloud"]::backdrop { background: rgba(32,53,80,.4); }
html[data-theme] .reveal-content { display: block; width: 100%; min-height: 0; padding: 0; aspect-ratio: var(--art-ratio); }
.reveal-artwork { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
html[data-theme] .reveal-panel,
html[data-theme] .reveal-ticket {
  position: absolute; z-index: 1; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; clip-path: none;
}
html[data-theme] .reveal-panel::before,
html[data-theme] .reveal-ticket::before,
html[data-theme] .reveal-ticket::after { display: none; }
html[data-theme] .reveal-panel { left: 30%; top: 38%; width: 40%; height: 27%; display: block; }
html[data-theme] .reveal-prize { display: flex; width: 100%; height: 100%; margin: 0; justify-content: center; }
html[data-theme] .reveal-text {
  width: 100%; max-height: 100%; margin: 0; color: #102b50;
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; font-weight: 800;
  font-size: 5.2cqw; line-height: 1.3; letter-spacing: .025em;
  text-wrap: balance; overflow-wrap: anywhere; -webkit-text-stroke: .6px #f5dfb7;
  text-shadow: 1px 2px 0 #fff8e9, 2px 3px 0 #c39855, 3px 5px 6px rgba(20,40,67,.25);
}
html[data-theme] .reveal-ticket { top: 39%; width: 22%; height: 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; }
html[data-theme] .reveal-ticket-cabin { left: 6%; transform: rotate(-9deg); }
html[data-theme] .reveal-ticket-lucky { right: 6%; transform: rotate(9deg); }
html[data-theme] .reveal-cabin { font-size: 2.9cqw; letter-spacing: .04em; }
html[data-theme] .reveal-number { font-size: 5.1cqw; }
html[data-theme] .lucky-label { color: #fff0d3; font-size: 3.7cqw; line-height: 1.35; letter-spacing: .12em; text-shadow: 1px 2px 2px #132844; }
html[data-theme] .reveal-dialog #continue-select {
  position: absolute; z-index: 2; left: 38%; top: 73%; width: 24%; height: 11%;
  min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px;
  color: #fff9e9; background: transparent; box-shadow: none;
  font-size: 2.8cqw; font-family: 'Noto Serif SC', 'Songti SC', serif; font-weight: 800;
  letter-spacing: .12em; text-shadow: 0 2px 3px #7b481b; transform: none;
}
html[data-theme] .reveal-dialog #continue-select:hover { color: #fff; background: rgba(255,255,255,.14); }
html[data-theme] .reveal-dialog #continue-select:focus-visible { outline: 3px solid #fff5d9; outline-offset: 3px; }

@media (max-height: 800px) {
  html[data-theme] .game-header { min-height: 62px; }
  html[data-theme] .zone-heading h2 img { width: 180px; max-height: 45px; }
  html[data-theme] .zone-heading { margin-bottom: 5px; }
  html[data-theme] .number-zone { padding-block: 8px; }
}
@media (max-width: 760px) {
  html[data-theme] .number-board { --ticket-gap: 4px; }
}

/* Keep the two grid rows stretched when the game stage becomes narrower. */
@media (max-width: 900px) {
  html[data-theme] .game-stage { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
}

/* Align live controls to the generated night card's blank areas. */
html[data-theme] .reveal-dialog[data-reveal-theme="night"] .reveal-panel { top: 40%; height: 18%; }
html[data-theme] .reveal-dialog[data-reveal-theme="night"] #continue-select { left: 37%; top: 59%; width: 26%; height: 12%; }

/* Both cabins share the available viewport height; tickets scale as one. */
html[data-theme] .game-screen { overflow: hidden; padding-block: clamp(4px, 1dvh, 10px); }
html[data-theme] .game-header { flex: 0 0 auto; min-height: 0; height: clamp(32px, 6dvh, 44px); align-items: center; grid-template-columns: 1fr auto 1fr; }
html[data-theme] .game-heading { min-width: 0; line-height: 1; }
html[data-theme] .game-stage { flex: 1 1 0; min-height: 0; }
html[data-theme] .zone-stack { height: 100%; min-height: 0; gap: clamp(4px, 1dvh, 10px); }
html[data-theme] .number-zone { padding: clamp(3px, .8dvh, 8px) clamp(4px, 1vw, 12px); }
html[data-theme] .zone-heading { margin-bottom: clamp(2px, .5dvh, 5px); }
html[data-theme] .zone-heading h2 img { width: auto; height: clamp(18px, 4.5dvh, 42px); max-width: 180px; }
html[data-theme] .number-board { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; container-type: size; --ticket-gap: clamp(2px, .5dvh, 5px); }
html[data-theme] .number-tile,
html[data-theme] .zone-lower .number-tile,
html[data-theme] .number-tile:disabled,
html[data-theme] .zone-lower .number-tile:disabled {
  width: min(100%, calc((100cqh - 4 * var(--ticket-gap)) / 5 * 2.85));
  font-size: clamp(10px, 6.8cqh, 30px);
}
html[data-theme] .action-dock { margin-bottom: clamp(3px, .7dvh, 7px); gap: clamp(3px, .6dvh, 6px); }
html[data-theme] .action-dock .button { min-height: 0; height: clamp(24px, 4.8dvh, 36px); padding-block: 2px; }
html[data-theme] .game-header .button, html[data-theme] .game-tools .icon-button { min-height: 0; height: clamp(28px, 5dvh, 38px); padding-block: 2px; }
html[data-theme] .game-tools .icon-button { width: clamp(28px, 5dvh, 38px); }
/* Match the right ticket's tilt and move the text into its blank center. */
html[data-theme] .reveal-ticket-lucky { right: 5%; top: 36.5%; transform: rotate(16deg); }
html[data-theme] .lucky-label { letter-spacing: .06em; }
/* Match the cloud composition's central blank area and gold button. */
html[data-theme] .reveal-dialog[data-reveal-theme="cloud"] .reveal-panel { top: 35%; height: 25%; }
html[data-theme] .reveal-dialog[data-reveal-theme="cloud"] #continue-select { left: 37%; top: 62%; width: 26%; height: 12%; }

/* Keep the smaller seat suffix vertically aligned with the seat number. */
html[data-theme] .reveal-dialog[data-reveal-theme="cloud"] .reveal-number { align-items: center; }
html[data-theme] .reveal-dialog[data-reveal-theme="cloud"] .reveal-number small { line-height: 1; }

/* Photo placement trial 1: evening portrait beside the reveal card. */
html[data-theme] .reveal-dialog { width: min(1500px, calc(100vw - 24px), calc((100dvh - 24px) * 1.777778)); }
html[data-theme] .reveal-content { width: 78%; container-type: inline-size; }
.reveal-portrait { position: absolute; right: 0; bottom: 12%; width: 27%; height: 88%; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 12px 28px rgba(0,0,0,.24)); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
@media (max-width: 620px) {
  html[data-theme] .reveal-dialog { margin-block: auto; }
  html[data-theme] .reveal-content { width: 100%; margin-top: 110px; }
  .reveal-portrait { width: 125px; height: 190px; top: -5px; right: 8%; bottom: auto; z-index: -1; }
}

/* Fixed cloud board: only back and audio controls remain in the header. */
html[data-theme] .game-header { grid-template-columns: 1fr auto; }

/* Center the economy cabin's smaller suffix beside its seat digits. */
html[data-theme] .reveal-dialog[data-reveal-theme="night"] .reveal-number { align-items: center; }
html[data-theme] .reveal-dialog[data-reveal-theme="night"] .reveal-number small { line-height: 1; }