/* Selection is page UI. Game styles remain inside the iframe. */
.copy-block::before, .copy-block::after {
  width:78px; height:92px; border:0; border-radius:0; box-shadow:none;
  background:var(--ring-image, none) center / contain no-repeat; opacity:1;
  transform:rotate(-12deg);
}
.copy-block::after { width:38px; height:46px; transform:rotate(14deg); }
.copy-block:nth-child(2)::before { transform:rotate(12deg); }
.copy-block:last-child::before { width:58px; height:68px; }
/* The final down arrow is navigation decoration, not a ring. */
.copy-block:last-child::after { background:none; width:22px; height:22px; border:solid #ffe45c; border-width:0 3px 3px 0; transform:translateX(-50%) rotate(45deg); }
.lineup[data-selectable] {
  position:relative; display:block; padding:80px 24px 50px;
  background:#102957; isolation:isolate; scroll-margin-top:30px;
}
.lineup[data-selectable]::before {
  inset:0; border:0; z-index:-1; opacity:.04;
  background:url('../../generated/world/evidence/garden-first.png') center / cover no-repeat;
}
.lineup[data-selectable] > figure { display:none; }
.character-lineup { display:flex; justify-content:center; align-items:end; max-width:1440px; margin:auto; flex-wrap:wrap; gap:14px 2px; }
.lineup-choice {
  position:relative; display:block; flex:0 0 clamp(66px,6vw,96px); aspect-ratio:1 / 3.5;
  border:0; padding:0; background:transparent; color:inherit; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.lineup-sprite {
  display:block; position:absolute; inset:0; background-repeat:no-repeat;
  background-size:var(--sprite-width) auto; background-position:var(--sprite-position) center;
  mix-blend-mode:screen; transition:transform .18s ease;
}
.lineup-choice[data-preview='ready'] .lineup-sprite { background-size:100% 100%; background-position:center; mix-blend-mode:normal; }
.lineup-choice:disabled { cursor:wait; opacity:.3; }
.lineup-choice::after {
  content:''; position:absolute; left:15%; right:15%; bottom:-8px; height:8px;
  border:2px solid transparent; border-radius:50%; background:#0003;
}
.lineup-choice:is(:hover,:focus-visible,[aria-pressed='true']) .lineup-sprite { transform:translateY(-12px); }
.lineup-choice:is(:hover,:focus-visible,[aria-pressed='true'])::after { border-color:#ffe45c; background:#091a40; }
.lineup-choice:focus-visible { outline:2px solid #fff6da; outline-offset:4px; border-radius:8px; }
.entry-actions { display:flex; justify-content:center; min-height:84px; margin-top:36px; }
.entry-choose, .entry-close, .entry-retry {
  font:400 20px 'Comico',sans-serif; cursor:pointer; color:#fff6da;
  border:2px solid #fff6da; border-radius:6px; background:#102957;
  min-height:48px; padding:10px 24px;
}
.entry-choose { color:#102957; background:#ffe45c; border-color:#ffe45c; }
.entry-choose { min-width:116px; }
.entry-choose:disabled { color:#c0c4cb; background:#576171; border-color:#697483; cursor:not-allowed; }
.entry-choose[data-selected='true'] { color:#102957; background:#ffe45c; border-color:#ffe45c; }
.entry-choose:focus-visible, .entry-close:focus-visible, .entry-retry:focus-visible { outline:3px solid #ffe45c; outline-offset:4px; }
.gameplay-window[data-entry-managed] { display:none; }
.entry-dialog {
  position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none;
  padding:0; margin:0; border:0; overflow:hidden; background:#102957; color:#fff6da;
}
.entry-dialog::backdrop { background:#102957; }
.entry-dialog .gameplay-window { display:block; height:100%; min-height:0; }
.entry-dialog .gameplay-frame { height:100%; min-height:0; }
.entry-dialog iframe { opacity:0; transition:opacity .35s ease; }
.entry-dialog[data-ready='true'] iframe { opacity:1; }
.entry-close { position:absolute; z-index:3; left:max(16px,env(safe-area-inset-left)); top:max(16px,env(safe-area-inset-top)); background:#102957e8; }
.entry-loading { position:absolute; top:50%; left:50%; width:70px; height:84px; transform:translate(-50%,-50%); background:var(--ring-image, none) center / contain no-repeat; animation:entry-ring 1.1s ease-in-out infinite; pointer-events:none; }
.entry-dialog[data-ready='true'] .entry-loading, .entry-dialog[data-failed='true'] .entry-loading { display:none; }
.entry-error { position:absolute; top:45%; left:10%; width:80%; text-align:center; font:18px/1.6 'Comico',sans-serif; }
.entry-error[hidden] { display:none; }
.entry-dialog[open] { animation:entry-open .25s ease-out; }
@keyframes entry-ring { 50% { transform:translate(-50%,-50%) scaleX(.2); } }
@keyframes entry-open { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) {
  .lineup[data-selectable] { padding:54px 14px 30px; }
  .character-lineup { gap:28px 8px; }
  .lineup-choice { flex-basis:calc((100% - 32px) / 5); max-width:88px; }
  .copy-block::before { width:42px; height:52px; }
  .copy-block::after { width:30px; height:36px; }
  .copy-block::before, .copy-block:last-child::before { left:0; top:-54px; width:42px; height:42px; }
  .copy-block:nth-child(2)::before { left:auto; right:0; top:-54px; }
  .copy-block::after { right:0; bottom:0; }
  .copy-block:nth-child(2)::after { left:0; right:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .entry-dialog[open], .entry-loading { animation:none; }
  .lineup-sprite, .entry-dialog iframe { transition:none; }
}