/* Coordinates follow the 1024 × 1536 artwork, including its two hand poses. */
.character-image { transition: opacity 760ms ease, filter 760ms ease; }
.character-image-list { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero[data-scene-mode="list"] .character-image:not(.character-image-list) { opacity: 0; }
.hero[data-scene-mode="list"] .character-image-list { opacity: 1; }

.hand-toggle {
  position: absolute;
  left: 32.8125%;
  top: 29.7526%;
  width: 16.6016%;
  height: 7.2917%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 38%;
  background: none;
  z-index: 8;
  pointer-events: auto;
  touch-action: manipulation;
  transition: top 760ms cubic-bezier(.22, .68, .24, 1);
}
.hand-toggle[hidden] { display: none; }
.hand-toggle:focus-visible { outline: none; }
/* A diffuse wash lights the hand itself without tracing its silhouette. */
.hand-toggle::before {
  content: '';
  position: absolute;
  inset: -12% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, #ffddbc66 0%, #ffac824d 28%, #ee695033 48%, #df414018 62%, transparent 76%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 240ms ease, transform 300ms ease;
  pointer-events: none;
}
.hand-toggle:focus-visible::before,
.hand-toggle:active::before { opacity: 1; transform: scale(1); }
.hand-toggle-hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 44px;
  padding: 7px 11px;
  color: #dcb5ac;
  background: linear-gradient(115deg, #261218ed, #100c10e8);
  border: 1px solid #96584e77;
  border-radius: 3px;
  box-shadow: 0 4px 18px #0003;
  text-align: left;
  transform: translateY(-50%);
  transition: border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
  pointer-events: auto;
}
.hand-toggle-hint::before { content: ''; position: absolute; right: 100%; top: 50%; width: 11px; height: 1px; background: linear-gradient(90deg, transparent, #bf7664aa); }
.hand-toggle-sigil { color: #dd7d6d; font-size: 25px; line-height: 1; text-shadow: 0 0 10px #e6634055; transition: color 220ms ease, text-shadow 220ms ease; }
.hand-toggle-caption { display: flex; flex-direction: column; gap: 3px; }
.hand-toggle-kicker { font-size: 6px; line-height: 1; letter-spacing: .19em; color: #ae8580; }
.hand-toggle-action { font-size: 10px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.hand-toggle:focus-visible .hand-toggle-hint { outline: 2px solid #efb59c; outline-offset: 4px; }
.hand-toggle:focus-visible .hand-toggle-hint { border-color: #dda18e; color: #fff0e6; box-shadow: 0 0 22px #ed72412b, inset 0 0 16px #e9663e12; }
.hand-toggle:focus-visible .hand-toggle-sigil { color: #ffd0b5; text-shadow: 0 0 12px #fa9066bb; }
@media (hover: hover) {
  .hand-toggle:hover::before { opacity: 1; transform: scale(1); }
  .hand-toggle:hover .hand-toggle-hint { border-color: #dda18e; color: #fff0e6; box-shadow: 0 0 22px #ed72412b, inset 0 0 16px #e9663e12; }
  .hand-toggle:hover .hand-toggle-sigil { color: #ffd0b5; text-shadow: 0 0 12px #fa9066bb; }
}
.hero[data-scene-mode="list"] .hand-toggle { top: 22.8516%; }

.scene-toggle-ready .orb-stage {
  transform-origin: 51% 91%;
  transition: opacity 440ms ease, transform 700ms cubic-bezier(.4, 0, .2, 1), filter 600ms ease, visibility 0s;
}
.hero[data-scene-mode="list"] .orb-stage {
  opacity: 0;
  transform: translateY(8%) scale(.13) rotate(-16deg);
  filter: blur(8px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 440ms ease, transform 700ms cubic-bezier(.4, 0, .2, 1), filter 600ms ease, visibility 0s 700ms;
}
.orb-interface { transition: opacity 260ms ease, visibility 0s; }
.hero[data-scene-mode="list"] .orb-interface { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 0s 260ms; }
.palm-light, .orb-annotation { transition: opacity 400ms ease; }
.hero[data-scene-mode="list"] .palm-light,
.hero[data-scene-mode="list"] .orb-annotation { opacity: 0; animation: none; }

.summoned-games {
  position: absolute;
  top: 31%;
  left: 40.5%;
  width: 292px;
  max-width: 46%;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -18px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity 240ms ease, transform 350ms ease, visibility 0s 350ms;
}
.summoned-games::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 24px;
  bottom: calc(100% + 9px);
  left: 50%;
  background: linear-gradient(transparent, #ed7667b3);
  box-shadow: 0 0 10px #ec49374d;
}
.hero[data-scene-mode="list"] .summoned-games {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 480ms ease 220ms, transform 650ms cubic-bezier(.2, .7, .2, 1) 180ms, visibility 0s;
}
.summoned-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #ddaa9c; font-size: 8px; font-weight: 600; letter-spacing: .24em; }
.summoned-heading > span:first-child, .summoned-heading > span:last-child { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b7685977); }
.summoned-heading > span:last-child { transform: rotate(180deg); }
.summoned-games ul { list-style: none; padding: 0 4px 5px; margin: 0 -4px; display: grid; gap: 8px; max-height: 242px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #743a3e #100b0f; }
.summoned-games li { opacity: 0; transform: translateY(-12px); transition: opacity 180ms ease, transform 240ms ease; }
.hero[data-scene-mode="list"] .summoned-games li { opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(250ms + min(var(--game-order), 5) * 70ms); }
.summoned-game {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 65px;
  padding: 9px 13px 9px 10px;
  background: linear-gradient(115deg, #281217f5, #110d12f2 70%);
  border: 1px solid #95504775;
  border-left: 2px solid #ba6358b3;
  border-radius: 2px;
  box-shadow: inset 0 1px #f3baa109, 0 8px 20px #0003;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.summoned-game::after { content: ''; position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; border-top: 1px solid #cc8a7055; border-right: 1px solid #cc8a7055; }
.summoned-game:is(:hover, :focus-visible) { border-color: #e99c7b; background: linear-gradient(115deg, #402027f7, #1b1016f5); box-shadow: inset 0 0 20px #b5423e14, 0 0 15px #f4643c18; }
.summoned-game:focus-visible { outline-offset: 1px; }
.summoned-icon { flex: 0 0 44px; height: 44px; padding: 2px; border: 1px solid #bd867158; background: #100a10; border-radius: 5px; transform: rotate(-4deg); transition: transform 220ms ease; }
.summoned-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.summoned-game:is(:hover, :focus-visible) .summoned-icon { transform: rotate(0); }
.summoned-game-name { font: 500 15px/1.35 var(--font-heading); color: #eee0d7; overflow-wrap: anywhere; }
.summoned-game-arrow { margin-left: auto; color: #c48270; font-size: 18px; }
.summoned-return { margin-top: 9px; text-align: center; color: #c3a29c; font-size: 8px; letter-spacing: .02em; }

/* Keep the list above the character's bottom fade on small screens. */
@media (max-width: 800px) {
  .hero[data-scene-mode="list"] .summoner-scene { mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 79%); }
  .summoned-games { width: 280px; }
}
@media (max-width: 600px) {
  .summoned-games { top: 31.5%; }
  .summoned-game-name { font-size: 14px; }
  .hand-toggle-hint { left: calc(100% + 6px); gap: 6px; padding-inline: 8px; }
  .hand-toggle-hint::before { width: 7px; }
  .hand-toggle-sigil { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-scene-mode="list"] .orb-stage { transform: none; filter: none; }
}