.summoning-view {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  margin-left: clamp(250px, 21vw, 315px);
  padding: 4px 0 110px;
  color: #ded9e5;
  container-type: inline-size;
}

.summoning-view[hidden] { display: none; }
html[data-page="summoning"] .game-stage { height: auto; min-height: 1080px; padding-top: 28px; align-content: start; }

.summoning-heading { border-bottom: 1px solid rgba(165, 97, 216, .34); padding: 0 4px 17px; }
.summoning-heading p { margin: 0 0 5px; color: #bf76ef; font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.summoning-heading h1 { margin: 0; color: #f0e9f4; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; }
.summoning-heading span { color: #aaa0ae; font-size: .86rem; }

.summoning-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(245px, 300px); gap: 18px; align-items: start; padding-top: 18px; }
.summoning-circle-panel,
.summoning-items { border: 1px solid rgba(143, 77, 190, .32); background: linear-gradient(145deg, rgba(10, 10, 14, .94), rgba(20, 13, 24, .9)); box-shadow: 0 16px 42px rgba(0, 0, 0, .32); }
.summoning-circle-panel { min-width: 0; padding: clamp(12px, 2.2vw, 26px); overflow: hidden; }

.summoning-stage { position: relative; width: min(100%, 720px); aspect-ratio: 1; margin: 0 auto; isolation: isolate; }
.summoning-aura { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(137, 50, 190, .15), rgba(103, 21, 159, .04) 48%, transparent 70%); animation: summoning-aura-pulse 22s ease-in-out infinite; }
.summoning-glyph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #a141df; animation: summoning-glyph-pulse 22s ease-in-out infinite; }
.summoning-rings { fill: none; stroke: currentColor; stroke-width: 2.2; }
.summoning-rings circle:nth-child(2) { stroke-width: 1; stroke-dasharray: 4 10; opacity: .62; }
.summoning-rings circle:nth-child(3) { stroke: #794394; stroke-width: 1.4; }
.summoning-rings circle:nth-child(4) { fill: rgba(104, 24, 149, .12); stroke: #c261fa; stroke-width: 2.6; }
.summoning-crosslines { fill: none; stroke: #7828aa; stroke-width: 1; opacity: .38; }
.summoning-crosslines polygon { stroke-dasharray: 3 8; }
.summoning-sigils { fill: none; stroke: #d087ff; stroke-width: 1.5; opacity: .78; }
.summoning-sigils path:first-child { fill: rgba(148, 54, 200, .1); }
.summoning-runes { fill: #b674d2; font-family: Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: 8px; opacity: .75; }
.summoning-runes text:nth-child(n+3) { font-size: 13px; letter-spacing: 5px; }

.summoning-slot { position: absolute; left: var(--slot-x); top: var(--slot-y); z-index: 2; width: clamp(42px, 9.5%, 68px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 2px solid #8222bd; border-radius: 50%; color: #c889ed; background: radial-gradient(circle at 40% 35%, #281331, #100d15 72%); box-shadow: 0 0 0 4px rgba(12, 8, 16, .8), 0 0 14px rgba(155, 52, 219, .2); cursor: pointer; animation: summoning-slot-pulse 22s ease-in-out infinite; }
.summoning-slot[data-slot="1"] { --slot-x: 50%; --slot-y: 10.7%; }
.summoning-slot[data-slot="2"] { --slot-x: 73.1%; --slot-y: 18.2%; }
.summoning-slot[data-slot="3"] { --slot-x: 87.4%; --slot-y: 37.9%; }
.summoning-slot[data-slot="4"] { --slot-x: 87.4%; --slot-y: 62.1%; }
.summoning-slot[data-slot="5"] { --slot-x: 73.1%; --slot-y: 81.8%; }
.summoning-slot[data-slot="6"] { --slot-x: 50%; --slot-y: 89.3%; }
.summoning-slot[data-slot="7"] { --slot-x: 26.9%; --slot-y: 81.8%; }
.summoning-slot[data-slot="8"] { --slot-x: 12.6%; --slot-y: 62.1%; }
.summoning-slot[data-slot="9"] { --slot-x: 12.6%; --slot-y: 37.9%; }
.summoning-slot[data-slot="10"] { --slot-x: 26.9%; --slot-y: 18.2%; }
.summoning-slot span { font-family: Georgia, serif; font-size: clamp(.9rem, 2.2vw, 1.35rem); line-height: 1; }
.summoning-slot small { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; min-width: 18px; height: 18px; border: 1px solid #6d387f; border-radius: 50%; color: #c7adcF; background: #151019; font-size: .56rem; }
.summoning-slot:hover,
.summoning-slot:focus-visible,
.summoning-slot.is-selected { outline: 0; border-color: #df97ff; color: #f0ceff; box-shadow: 0 0 0 4px rgba(12, 8, 16, .86), 0 0 22px rgba(197, 94, 246, .62); }
.summoning-slot.is-selected::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(220, 147, 255, .52); border-radius: inherit; }
.summoning-core { position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 2px solid #9c3ed0; border-radius: 50%; color: #f0c9ff; background: radial-gradient(circle, #3d1550 0 27%, #170d20 72%); box-shadow: 0 0 24px rgba(171, 63, 222, .32); animation: summoning-core-pulse 22s ease-in-out infinite; }
.summoning-core span { font-size: clamp(1rem, 3vw, 1.9rem); }
.summoning-core i { position: absolute; inset: 17%; border: 1px solid rgba(226, 168, 255, .46); transform: rotate(45deg); }
.summoning-caption { max-width: 620px; margin: 6px auto 0; color: #a69da9; text-align: center; font-size: .82rem; }
.summoning-caption strong { color: #cfa8e2; }

.summoning-items { padding: 0 14px 16px; }
.summoning-items > header { display: flex; gap: 10px; align-items: center; margin: 0 -14px 14px; border-bottom: 1px solid rgba(165, 97, 216, .28); padding: 12px 14px; background: rgba(88, 48, 105, .18); }
.summoning-items > header > span { color: #ca78f4; font-size: 1.25rem; }
.summoning-items h2,
.summoning-items p { margin: 0; }
.summoning-items h2 { color: #eee6f1; font-size: .93rem; }
.summoning-items header p { color: #a698a9; font-size: .72rem; }
.summoning-readiness { display: grid; grid-template-columns: 1fr auto; gap: 5px; color: #b7aeb9; font-size: .75rem; }
.summoning-readiness strong { color: #d6b2e5; }
.summoning-readiness div { grid-column: 1 / -1; height: 5px; border: 1px solid #493650; background: #0d0c0f; }
.summoning-readiness i { display: block; width: 0; height: 100%; background: #a044d1; }
.summoning-item-grid { min-height: 154px; margin: 14px 0; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px dashed rgba(161, 98, 190, .34); padding: 16px; color: #8e8491; background: rgba(8, 8, 11, .45); text-align: center; }
.summoning-item-grid > span { color: #9c4ec3; font-size: 1.65rem; }
.summoning-item-grid p { font-size: .76rem; line-height: 1.5; }
.summoning-trial-note { border-top: 1px solid rgba(165, 97, 216, .24); padding-top: 13px; }
.summoning-trial-note h3 { margin: 0 0 5px; color: #d9c4df; font-size: .82rem; }
.summoning-trial-note p { color: #9e94a1; font-size: .72rem; line-height: 1.55; }
.summoning-invoke { width: 100%; margin-top: 14px; border: 1px solid #59445f; padding: 10px; color: #777079; background: #171419; font: inherit; }
.summoning-invoke:disabled { cursor: not-allowed; }

@keyframes summoning-glyph-pulse {
  0%, 100% { opacity: .5; filter: drop-shadow(0 0 3px rgba(153, 56, 211, .12)); }
  50% { opacity: .96; filter: drop-shadow(0 0 11px rgba(185, 80, 239, .58)); }
}
@keyframes summoning-slot-pulse {
  0%, 100% { border-color: #72209f; }
  50% { border-color: #b957ee; }
}
@keyframes summoning-core-pulse {
  0%, 100% { opacity: .72; box-shadow: 0 0 16px rgba(171, 63, 222, .2); }
  50% { opacity: 1; box-shadow: 0 0 38px rgba(193, 83, 239, .55); }
}
@keyframes summoning-aura-pulse {
  0%, 100% { opacity: .32; transform: scale(.96); }
  50% { opacity: .85; transform: scale(1.03); }
}

@container (max-width: 760px) {
  .summoning-layout { grid-template-columns: 1fr; }
  .summoning-items { width: auto; }
}

@media (max-width: 1050px) {
  .summoning-view { margin: 0; grid-column: 2; }
  html[data-page="summoning"] .game-stage { padding-top: 24px; align-content: start; }
  .summoning-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .summoning-view { grid-column: 1; }
  .summoning-circle-panel { padding: 10px 7px 16px; }
  .summoning-slot { width: clamp(36px, 10%, 50px); border-width: 1px; }
  .summoning-slot small { display: none; }
  .summoning-runes { font-size: 11px; letter-spacing: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .summoning-aura,
  .summoning-glyph,
  .summoning-slot,
  .summoning-core { animation: none; }
}