/* Full-screen opening ceremony. JS owns the reel position and phase changes. */
.opening-theatre {
  --tile-width: 180px;
  --tile-height: 235px;
  --tile-gap: 12px;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 65px minmax(0, 1fr) 65px;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #edf3fa;
  background: radial-gradient(ellipse 65% 58% at 50% 51%, #12314b45, transparent 80%), #080f19;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.opening-theatre[hidden] { display: none !important; }
.opening-theatre:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .15;
  background: url("material-background.png") 55% 45% / cover no-repeat;
  pointer-events: none;
}
.theatre-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(20px, 3vw, 48px);
  border-bottom: 1px solid #d0e3ff0b;
  background: linear-gradient(#0d1723d6, #0b141ead);
  position: relative;
  z-index: 12;
}
.theatre-brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; letter-spacing: -.045em; }
.theatre-brand .brand-mark { width: 25px; height: 25px; }
.theatre-meta { color: #8399b2; font-size: 10px; letter-spacing: .11em; padding-left: 21px; border-left: 1px solid #afc8e71c; }
.theatre-sound, .theatre-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid #b7d4f01a;
  color: #a9bfd4;
  background: #1a2c402f;
  font-size: 11px;
}
.theatre-sound { margin-left: auto; }
.theatre-close { min-width: 36px; padding: 7px; }
.theatre-sound:hover, .theatre-close:hover { color: #f2f7fc; background: #263b5260; border-color: #b7d4f037; }
.theatre-header svg { width: 16px; height: 16px; }
.theatre-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.theatre-body::-webkit-scrollbar { display: none; }
.theatre-title {
  flex: none;
  text-align: center;
  padding: 0 22px;
  margin: 0 0 11px;
  max-height: 135px;
  opacity: 1;
  transition: max-height 500ms, opacity 300ms, margin 500ms;
}
.theatre-title .script-title { font-size: 27px; color: #ff4c90; transform: rotate(-3deg); margin-bottom: 6px; }
.theatre-title h2 { margin: 4px 0 8px; font: 800 clamp(27px, 2.7vw, 39px)/1.12 Inter, sans-serif; letter-spacing: -.045em; }
.theatre-title p { font-size: 12px; color: #90a7bf; line-height: 1.6; margin: 0; }

.roulette-window {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 1520px;
  height: calc(var(--tile-height) + 38px);
  max-height: calc(var(--tile-height) + 38px);
  overflow: hidden;
  opacity: 1;
  margin: 0;
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  transition: max-height 650ms cubic-bezier(.22, 1, .36, 1), height 650ms cubic-bezier(.22, 1, .36, 1), opacity 300ms, margin 650ms;
}
.roulette-window:after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: calc(var(--tile-width) + 8px);
  transform: translateX(-50%);
  border: 1px solid #8caed329;
  border-radius: 12px;
  background: linear-gradient(180deg, #9dcdff0a, transparent 18%, transparent 82%, #fe619a09);
  box-shadow: 0 0 36px #72c6fb06;
  pointer-events: none;
}
.roulette-track {
  display: flex;
  align-items: stretch;
  gap: var(--tile-gap);
  width: max-content;
  height: 100%;
  padding: 19px 0;
  will-change: transform;
}
.roulette-tile {
  --rarity: #6a8daa;
  flex: 0 0 var(--tile-width);
  width: var(--tile-width);
  height: var(--tile-height);
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 13px;
  overflow: hidden;
  border: 1px solid #b0ccec1a;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 25%, #8cbfe312, transparent 71%), linear-gradient(150deg, #1c2a3eea, #101c2cf5);
  box-shadow: inset 0 1px 0 #eef6ff07, 0 9px 18px #0002;
  transition: opacity 280ms, border-color 300ms, box-shadow 300ms, scale 400ms cubic-bezier(.16, 1, .3, 1);
}
.roulette-tile:after { content: ""; position: absolute; bottom: 0; left: 26%; right: 26%; height: 2px; background: var(--rarity); opacity: .7; }
.roulette-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 142px; min-height: 142px; overflow: visible; margin-bottom: 5px; }
.roulette-art>.atlas-art { height: 140px; margin: 0; filter: drop-shadow(0 8px 8px #0006); transform: none; }
.roulette-art>.atlas-gift { width: 75px; }
.roulette-art>.atlas-stock { width: 87px; }
.roulette-art>.atlas-digital { width: 106px; }
.roulette-art>.card-art { height: 140px; width: 125px; margin: 0; transform: none; }
.roulette-name { color: #c5d6e7; font-size: 11px; font-weight: 500; line-height: 1.4; text-align: center; max-width: 100%; min-height: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.roulette-value { font-size: 15px; font-weight: 700; letter-spacing: -.025em; color: #f1f6fb; margin-top: 5px; line-height: 1.25; }
.roulette-rarity { font-size: 8px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #829bb3; margin-top: 5px; }
.roulette-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); z-index: 5; pointer-events: none; background: linear-gradient(#ff4f9544, transparent 11%, transparent 89%, #ff4f9544); }
.roulette-pointer:before, .roulette-pointer:after { content: ""; position: absolute; left: 50%; width: 15px; height: 11px; transform: translateX(-50%); background: #ff4c8f; filter: drop-shadow(0 0 7px #ff236177); }
.roulette-pointer:before { top: 1px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.roulette-pointer:after { bottom: 1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.opening-theatre[data-phase="locked"] .roulette-tile:not(.is-winner) { opacity: .35; }
.roulette-tile.is-winner { border-color: #ff78a797; box-shadow: inset 0 0 30px #ff43860a, 0 0 0 2px #ff438615, 0 8px 25px #0003; scale: 1.035; }
.roulette-tile.is-winner .roulette-name { color: #f0f5fb; }
.roulette-tile.is-winner .roulette-rarity { color: #e0a5c1; }

/* Never fade the stage itself: the closed still remains visible between phases. */
.theatre-chest-slot {
  flex: none;
  width: min(740px, 92vw);
  height: 160px;
  position: relative;
  margin: 0 auto;
  transition: height 700ms cubic-bezier(.22, 1, .36, 1), width 700ms cubic-bezier(.22, 1, .36, 1);
}
.theatre-chest-slot .hero-stage { height: 100%; width: 100%; margin: 0; }
.theatre-chest-slot .scene-prize, .theatre-chest-slot .scene-caption, .theatre-chest-slot .scene-floor { display: none; }
.theatre-chest-slot .scene-halo { inset: 18% 12% 0; opacity: .62; background: radial-gradient(ellipse, #4593bc28, transparent 68%); }
.theatre-chest-slot .opening-reward { top: 15%; width: 240px; height: 218px; }
.theatre-chest-slot .reward-front>.atlas-gift { width: 118px; height: 215px; }
.theatre-chest-slot .reward-front>.atlas-stock { width: 136px; height: 215px; }
.theatre-chest-slot .reward-front>.atlas-digital { width: 172px; height: 215px; }
.theatre-chest-slot .reward-back { inset: 7px 58px; }
.opening-theatre:is([data-phase="chest"], [data-phase="revealing"], [data-phase="result"]) .roulette-window { max-height: 0; height: 0; opacity: 0; margin: 0; pointer-events: none; }
.opening-theatre:is([data-phase="chest"], [data-phase="revealing"], [data-phase="result"]) .theatre-chest-slot { height: min(360px, 45dvh); }
.opening-theatre[data-phase="result"] .theatre-title { max-height: 0; margin: 0; opacity: 0; overflow: hidden; }
.opening-theatre[data-phase="result"] .theatre-body { gap: 5px; }

.theatre-result {
  flex: none;
  width: min(480px, calc(100% - 36px));
  max-height: 0;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms, max-height 550ms cubic-bezier(.16, 1, .3, 1);
}
.opening-theatre:is([data-phase="result"], [data-phase="error"]) .theatre-result { opacity: 1; max-height: 245px; pointer-events: auto; overflow: visible; }
.theatre-result .script-title { font-size: 25px; margin-bottom: 5px; }
.theatre-result h2 { font: 750 clamp(23px, 2.3vw, 32px)/1.15 Inter, sans-serif; letter-spacing: -.04em; margin: 5px 0; }
#theatre-result-title { color: #edf5fc; }
#theatre-result-value { display: block; font-size: 27px; font-weight: 700; letter-spacing: -.04em; color: #a3e4ec; margin: 5px 0 16px; }
.theatre-result>p { font-size: 10px; color: #849db4; line-height: 1.6; margin: 12px 0 0; }
.theatre-result>div { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.theatre-result button { min-height: 43px; padding: 11px 18px; border-radius: 7px; font-size: 11px; font-weight: 600; background: #1d3045; color: #bcd2e5; border: 1px solid #b5d1eb21; }
.theatre-result button[data-theatre="inventory"] { color: #fff; background: linear-gradient(#ff347f, #f81266); border-color: #ff72a57d; box-shadow: inset 0 1px 0 #ffffff20, 0 6px 20px #ff176b12; }
.theatre-result button:hover { border-color: #d6eaff4d; }
.theatre-result button[data-theatre="close"] { background: transparent; color: #8ba4bb; border-color: transparent; }
.opening-theatre[data-phase="error"] .roulette-window { max-height: 0; height: 0; opacity: 0; }
.opening-theatre[data-phase="error"] .theatre-title { max-height: 0; opacity: 0; margin: 0; }

.theatre-footer {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 10px 28px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid #cae0ff0a;
  background: linear-gradient(transparent, #0a142080);
}
.theatre-steps { display: flex; align-items: center; gap: 27px; }
.theatre-steps span { display: inline-flex; align-items: center; gap: 9px; color: #5c748e; font-size: 10px; font-weight: 500; letter-spacing: .025em; transition: color 400ms; }
.theatre-steps span:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.theatre-steps span.active { color: #ff72a8; }
.theatre-skip { color: #adc2d5; background: transparent; border: 1px solid #a7c3df1d; border-radius: 6px; padding: 9px 13px; min-height: 34px; font-size: 10px; }
.theatre-skip:hover { border-color: #bcd6f044; background: #24395138; }
.opening-theatre[data-phase="result"] .theatre-skip { visibility: hidden; }

@media (max-width: 600px) {
  .opening-theatre { --tile-width: 132px; --tile-height: 190px; --tile-gap: 9px; grid-template-rows: 58px minmax(0, 1fr) 66px; }
  .theatre-header { padding: 0 15px; gap: 10px; }
  .theatre-brand { font-size: 15px; gap: 7px; }
  .theatre-brand .brand-mark { width: 23px; height: 23px; }
  .theatre-meta { font-size: 8px; padding-left: 11px; letter-spacing: .05em; }
  .theatre-sound { font-size: 0; padding: 8px; min-width: 33px; min-height: 33px; gap: 0; }
  .theatre-sound svg { width: 14px; height: 14px; }
  .theatre-close { min-width: 33px; min-height: 33px; font-size: 16px; }
  .theatre-body { padding: 14px 0; gap: 10px; }
  .theatre-title { margin-bottom: 8px; padding: 0 18px; }
  .theatre-title .script-title { font-size: 25px; }
  .theatre-title h2 { font-size: 27px; margin-bottom: 7px; }
  .theatre-title p { font-size: 11px; }
  .roulette-window { mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); height: calc(var(--tile-height) + 34px); max-height: calc(var(--tile-height) + 34px); }
  .roulette-track { padding: 17px 0; }
  .roulette-window:after { top: 12px; bottom: 12px; border-radius: 10px; }
  .roulette-tile { padding: 9px 8px 10px; border-radius: 8px; }
  .roulette-art { height: 111px; min-height: 111px; margin-bottom: 3px; }
  .roulette-art>.atlas-art { height: 111px; }
  .roulette-art>.atlas-gift { width: 58px; }
  .roulette-art>.atlas-stock { width: 68px; }
  .roulette-art>.atlas-digital { width: 83px; }
  .roulette-art>.card-art { width: 98px; height: 110px; }
  .roulette-name { font-size: 10px; line-height: 1.35; }
  .roulette-value { font-size: 13px; margin-top: 4px; }
  .roulette-rarity { font-size: 7px; letter-spacing: .06em; margin-top: 4px; }
  .roulette-pointer:before, .roulette-pointer:after { width: 13px; height: 9px; }
  .theatre-chest-slot { width: 100%; height: 145px; }
  .opening-theatre:is([data-phase="chest"], [data-phase="revealing"], [data-phase="result"]) .theatre-chest-slot { height: min(300px, 38dvh); }
  .theatre-chest-slot .opening-reward { width: 195px; height: 183px; top: 15%; }
  .theatre-chest-slot .reward-front>.atlas-gift { width: 97px; height: 178px; }
  .theatre-chest-slot .reward-front>.atlas-stock { width: 113px; height: 178px; }
  .theatre-chest-slot .reward-front>.atlas-digital { width: 142px; height: 178px; }
  .theatre-chest-slot .reward-back { inset: 7px 45px; }
  .theatre-result { width: calc(100% - 34px); }
  .theatre-result .script-title { font-size: 24px; }
  .theatre-result h2 { font-size: 24px; }
  #theatre-result-value { font-size: 26px; margin-bottom: 13px; }
  .theatre-result button { font-size: 10px; min-height: 43px; padding: 10px 13px; }
  .theatre-result>p { font-size: 9px; margin-top: 10px; }
  .theatre-footer { padding-left: 15px; padding-right: 15px; gap: 17px; }
  .theatre-steps { gap: 15px; }
  .theatre-steps span { font-size: 9px; gap: 6px; }
  .theatre-steps span:before { width: 4px; height: 4px; }
  .theatre-skip { min-height: 33px; padding: 8px 10px; font-size: 9px; }
}
@media (max-height: 730px) {
  .theatre-body { gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .theatre-title { margin-bottom: 3px; }
  .theatre-title .script-title { font-size: 22px; margin-bottom: 3px; }
  .theatre-title h2 { font-size: 26px; margin-top: 0; }
  .theatre-title p { font-size: 10px; }
  .theatre-chest-slot { height: 120px; }
  .opening-theatre:is([data-phase="chest"], [data-phase="revealing"], [data-phase="result"]) .theatre-chest-slot { height: min(280px, 40dvh); }
}
@media (max-width: 360px) {
  .theatre-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .theatre-brand { font-size: 14px; }
  .theatre-meta { font-size: 7px; padding-left: 8px; }
  .theatre-steps { gap: 11px; }
  .theatre-steps span { font-size: 8px; }
  .theatre-footer { gap: 12px; padding-left: 12px; padding-right: 12px; }
  .theatre-title h2 { font-size: 25px; }
  .theatre-result h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-theatre *, .opening-theatre *:before, .opening-theatre *:after { transition: none !important; animation: none !important; }
  .roulette-track { will-change: auto; }
  .roulette-tile.is-winner { scale: 1; }
}
/* Match the live controls and keep the status announcement outside the grid. */
.theatre-controls{display:flex;align-items:center;gap:8px;margin-left:auto}
.theatre-footer{padding-bottom:21px;padding-top:8px}
.theatre-footer>small{position:absolute;bottom:5px;left:0;right:0;text-align:center;color:#5b738c;font-size:7px;letter-spacing:.09em}
.theatre-steps>i{width:16px;height:1px;background:#35495f;flex:none}
.theatre-steps{gap:12px}.theatre-steps b{font-weight:500;white-space:nowrap}
.theatre-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.theatre-error{text-align:center;max-width:420px;padding:20px;color:#a5bdd0}.theatre-error h2{font-size:25px;color:#eaf3fa}.theatre-error p{font-size:12px;line-height:1.7}.theatre-error button{padding:12px 25px;margin-top:15px}
.theatre-result button{display:inline-flex;align-items:center;justify-content:center;gap:9px}.theatre-result button svg{width:15px;height:15px}
.opening-theatre.is-skipping .opening-reward{animation:none!important;opacity:1;transform:translate(-50%,-25px) scale(1) rotate(-5deg)}
.opening-theatre.is-skipping .reward-flipper{transition:none!important;transform:rotateY(0deg)}
@media(max-width:600px){.theatre-controls{gap:5px}.theatre-header{gap:7px}.theatre-meta{padding-left:8px}.theatre-footer{gap:14px}.theatre-steps{gap:7px}.theatre-steps span{gap:4px}.theatre-steps>i{width:10px}}
@media(max-width:360px){.theatre-meta{display:none}.theatre-footer{gap:10px}.theatre-steps{gap:5px}.theatre-skip{padding-left:8px;padding-right:8px}}