/* 四套插画场景：标题横幅完整呈现人物，页面背景保留场景与晶体细节。 */
body {
  --scene-image: url('/assets/scene-silver.webp');
  --scene-rgb: 7 21 30;
  position: relative;
  isolation: isolate;
}

body[data-theme="gold"] {
  --scene-image: url('/assets/scene-gold.webp');
  --scene-rgb: 23 14 9;
}

body[data-theme="platinum"] {
  --scene-image: url('/assets/scene-platinum.webp');
  --scene-rgb: 250 244 238;
}

body[data-theme="diamond"] {
  --scene-image: url('/assets/scene-diamond.webp');
  --scene-rgb: 16 16 43;
}

body[data-theme]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--scene-image) center top / cover no-repeat;
  opacity: .66;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--scene-rgb) / .28),
    rgb(var(--scene-rgb) / .56) 52%,
    rgb(var(--scene-rgb) / .84));
}

.topbar {
  position: relative;
  background: rgb(var(--scene-rgb) / .72);
  backdrop-filter: blur(14px);
  border-bottom-color: color-mix(in srgb, var(--tone) 30%, transparent);
}

.choose { padding-top: 24px; }

.choose > .section-heading {
  --scene-banner-art-width: 483px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 168px;
  margin-bottom: 18px;
  padding: 28px 36px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-radius: 22px;
  background-color: rgb(var(--scene-rgb));
  box-shadow: 0 15px 38px -25px var(--shadow), inset 0 0 35px rgb(var(--scene-rgb) / .15);
}

.choose > .section-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg,
    rgb(var(--scene-rgb) / .48),
    rgb(var(--scene-rgb) / .14)), var(--scene-image);
  background-size: cover, 150% auto;
  background-position: center, left 52%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(90deg, #000 42%, transparent 83%);
  pointer-events: none;
}

.choose > .section-heading::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: var(--scene-banner-art-width);
  background: var(--scene-image) right 45% / 100% auto no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 18%);
  pointer-events: none;
}

.choose .section-heading h1 {
  max-width: 58%;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.4;
  letter-spacing: .035em;
  text-shadow: 0 2px 10px rgb(var(--scene-rgb) / .7);
}

.choose .choose-note {
  display: block;
  max-width: 53%;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  text-shadow: 0 1px 7px rgb(var(--scene-rgb) / .7);
}

.wheel-selector { position: relative; }
.wheel-card { backdrop-filter: blur(9px); }

body[data-theme] .play-shell {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--tone) 33%, transparent);
  box-shadow: 0 25px 60px -30px var(--shadow);
  backdrop-filter: blur(12px);
}

body[data-theme] .wheel-area {
  background: radial-gradient(ellipse at 50% 43%,
    color-mix(in srgb, var(--tone) 9%, transparent),
    rgb(var(--scene-rgb) / .24) 76%);
}

body[data-theme] .play-copy {
  background: color-mix(in srgb, var(--surface-soft) 94%, transparent);
}

.prizes > .section-heading {
  padding: 10px 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
}

.prizes .section-heading h2 {
  text-shadow: 0 2px 10px rgb(var(--scene-rgb) / .85);
}

.prizes .prize-caption {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 14px 12px 8px;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(8px);
}

.prize-note { text-shadow: 0 1px 5px rgb(var(--scene-rgb) / .9); }

footer {
  background: rgb(var(--scene-rgb) / .80);
  backdrop-filter: blur(12px);
}

body[data-theme="platinum"] .choose > .section-heading {
  --scene-banner-art-width: 414px;
  box-shadow: 0 16px 45px -28px #b47c5f77;
}

body[data-theme="platinum"] .choose > .section-heading::before {
  background-image: linear-gradient(90deg,
    rgb(255 250 245 / .48), rgb(255 250 245 / .1)), var(--scene-image);
}

body[data-theme="platinum"] .choose > .section-heading::after {
  background-position: right 64%;
}

body[data-theme="platinum"] .choose .section-heading h1,
body[data-theme="platinum"] .choose .choose-note,
body[data-theme="platinum"] .prizes .section-heading h2,
body[data-theme="platinum"] .prize-note {
  text-shadow: 0 1px 8px #fff9f1;
}

@media (min-width: 1700px) {
  .choose > .section-heading { --scene-banner-art-width: 538px; min-height: 180px; padding-left: 42px; }
}

@media (max-width: 1024px) {
  .choose > .section-heading { --scene-banner-art-width: 446px; min-height: 158px; padding: 25px 28px; }
  .choose .section-heading h1 { font-size: 32px; max-width: 60%; }
  .choose .choose-note { font-size: 13px; max-width: 52%; }
}

@media (max-width: 700px) {
  body[data-theme]::before { background-position: 64% top; opacity: .58; }
  body::after { background: linear-gradient(180deg, rgb(var(--scene-rgb) / .2), rgb(var(--scene-rgb) / .72)); }
  .choose { padding-top: 14px; }
  .choose > .section-heading {
    --scene-banner-art-width: 320px;
    min-height: 122px;
    padding: 17px 18px;
    margin-bottom: 14px;
    border-radius: 16px;
    gap: 0;
    background-position: center, 75% 30%;
  }
  .choose .section-heading h1 { font-size: 23px; line-height: 1.5; max-width: 62%; }
  .choose .section-heading h1 em { display: block; margin: 0; }
  .choose .choose-note { display: none; }
  .choose > .section-heading::before {
    background-image: linear-gradient(90deg, rgb(var(--scene-rgb) / .62), rgb(var(--scene-rgb) / .12)), var(--scene-image);
  }
  body[data-theme="platinum"] .choose > .section-heading::before {
    background-image: linear-gradient(90deg, rgb(255 250 245 / .66), rgb(255 250 245 / .12)), var(--scene-image);
  }
  .choose > .section-heading::after { mask-image: linear-gradient(90deg, transparent 20%, #000 65%); }
  body[data-theme="platinum"] .choose > .section-heading { --scene-banner-art-width: 275px; }
  body[data-theme] .play-shell { backdrop-filter: blur(8px); }
  body[data-theme] .play-copy { background: color-mix(in srgb, var(--surface-soft) 97%, transparent); }
  .prizes .prize-caption { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 359px) {
  .choose > .section-heading { --scene-banner-art-width: 294px; min-height: 112px; padding-left: 15px; }
  body[data-theme="platinum"] .choose > .section-heading { --scene-banner-art-width: 252px; }
  .choose .section-heading h1 { font-size: 21px; }
}