/* Optional spell-circle controls; only the buttons intercept pointer input. */
.sigil-toggle { position:absolute; z-index:8; top:13%; right:0; border:1px solid rgba(var(--cyan-rgb),.35); padding:7px 9px; background:rgba(var(--ink-rgb),.88); color:var(--cyan); font:inherit; font-size:11px; letter-spacing:.08em; cursor:pointer; transition:border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.sigil-toggle:hover { border-color:var(--cyan); box-shadow:0 0 12px rgba(var(--cyan-rgb),.22); }
.sigil-compiled .sigil-toggle { border-color:rgba(var(--amber-rgb),.65); color:var(--amber); }
.sigil-compiler { position:absolute; inset:0; z-index:9; pointer-events:none; }
.sigil-compiler[hidden] { display:none; }
.sigil-rune { position:absolute; pointer-events:auto; width:52px; min-height:52px; border:1px solid rgba(var(--cyan-rgb),.5); border-radius:50%; background:rgba(var(--ink-rgb),.94); color:var(--cyan); font:inherit; cursor:pointer; transition:border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.sigil-rune:hover { border-color:var(--cyan); box-shadow:0 0 14px rgba(var(--cyan-rgb),.28); }
.sigil-rune--root { top:24%; left:-3%; }
.sigil-rune--gate { top:3%; left:calc(50% - 26px); }
.sigil-rune--eye { top:24%; right:-3%; }
.sigil-rune__glyph { display:block; font-size:23px; line-height:1.15; }
.sigil-rune__name { display:block; font-size:10px; }
.sigil-rune[aria-pressed="true"] { color:var(--amber); border-color:var(--amber); box-shadow:0 0 15px rgba(var(--amber-rgb),.22); }
.sigil-rune[data-step]::after {
  content:attr(data-step);
  position:absolute;
  top:-5px;
  right:-5px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--amber);
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  box-shadow:0 0 8px rgba(var(--amber-rgb),.55);
}
.sigil-panel { position:absolute; pointer-events:auto; left:4%; right:4%; bottom:12%; padding:12px; background:rgba(var(--ink-rgb),.96); border:1px solid rgba(var(--cyan-rgb),.4); font-size:12px; }
.sigil-panel p { margin:0 0 9px; }
.sigil-panel__title { color:var(--cyan); font-size:10px; letter-spacing:.14em; }
.sigil-status { color:var(--amber); }
.sigil-hint { color:var(--text); line-height:1.4; }
.sigil-action { pointer-events:auto; color:var(--cyan); background:transparent; border:1px solid rgba(var(--cyan-rgb),.5); padding:10px 12px; min-height:44px; font:inherit; cursor:pointer; }
.sigil-action--quiet { margin-left:8px; color:var(--text); border-color:rgba(var(--cyan-rgb),.2); }
.sigil-action:disabled { opacity:.45; cursor:default; }
.sigil-toggle:focus-visible,.sigil-rune:focus-visible,.sigil-action:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.sigil-compiled .spell__ring { animation:none; transform:rotate(0deg); }
.sigil-compiled .spell__node { fill:var(--amber); }
.sigil-compiled .spell__text { fill:var(--amber); opacity:.92; }
.sigil-decoded-rain { display:none; position:fixed; inset:14% 0 12%; z-index:4; pointer-events:none; color:var(--cyan); font-size:12px; letter-spacing:.2em; }
.sigil-decoded-rain span { position:absolute; padding:10px 6px; background:rgba(var(--ink-rgb),.72); border:1px solid rgba(var(--cyan-rgb),.28); writing-mode:vertical-rl; text-orientation:upright; text-shadow:0 0 10px rgba(var(--cyan-rgb),.7); box-shadow:0 0 18px rgba(var(--ink-rgb),.85); }
.sigil-decoded-rain span:nth-child(1) { left:9%; }
.sigil-decoded-rain span:nth-child(2) { left:48%; }
.sigil-decoded-rain span:nth-child(3) { right:9%; }
.sigil-decoding .sigil-decoded-rain { display:block; }
.sigil-decoding .bg__rain { opacity:.08; }
@media (max-width:767px) { .sigil-toggle { top:10%; right:2%; font-size:10px; } .sigil-rune--root { left:0; top:28%; } .sigil-rune--gate { top:5%; } .sigil-rune--eye { right:0; top:28%; } .sigil-panel { bottom:13%; left:0; right:0; padding:10px; font-size:11px; } .sigil-decoded-rain span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { .sigil-compiled .spell__ring { animation:none; } .sigil-decoded-rain { text-shadow:none; } }

.sigil-incantation-label { display:block; margin:0 0 4px; color:var(--cyan); font-size:12px; }
.sigil-incantation { display:block; width:100%; min-height:44px; margin:0 0 10px; padding:8px 10px; color:var(--text); background:rgba(var(--ink-rgb),.9); border:1px solid rgba(var(--cyan-rgb),.4); border-radius:0; font:inherit; font-size:16px; }
.sigil-incantation:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.sigil-rune { z-index:1; }
@media (max-width:767px) { .sigil-panel { position:fixed; left:12px; right:12px; bottom:70px; max-width:340px; margin:auto; padding:12px; } .sigil-panel p { margin-bottom:7px; } }

/* Phones: the panel covers most of the portrait, so the runes ride above it
   in one bottom sheet instead of sitting round the circle. */
@media (max-width:767px) {
  .sigil-compiler:not([hidden]) { position:fixed; inset:auto 12px 70px; max-width:340px; margin:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; }
  .sigil-compiler .sigil-rune { position:static; }
  .sigil-compiler .sigil-panel { position:relative; flex:1 0 100%; inset:auto; max-width:none; margin:0; }
}
/* The hero column (z-index 2) overlaps the portrait's left edge at mid
   widths, and the runes' z-index cannot climb out of .avatar's stacking
   context (z-index 1), so lift the whole portrait while the compiler is
   open. The hero has no controls of its own to lose. */
.avatar.sigil-open { z-index:3; }
/* Tablets: the portrait bleeds past the right edge of the viewport, which
   pushed the eye rune (and the toggle) off screen; pull both inside. */
@media (min-width:768px) and (max-width:1100px) { .sigil-rune--eye { right:6%; } }
@media (min-width:600px) and (max-width:1100px) { .sigil-toggle { right:6%; } }