/* AIANDGRACE / ODIN WORLD — RUNE ORACLE
   Extends site.css. No new tokens, no external fonts, no new colour system. */

.ro-main{
  /* .46 alpha over the page ground measures 3.24:1 — WCAG 1.4.11 needs 3:1
     for the boundary that identifies each card as a control. */
  --ro-edge:rgba(241,199,91,.46);
  --ro-edge-hot:rgba(241,199,91,.78);
  --ro-back:#0b0f11;
  --ro-back-2:#131a1d;
  padding:56px 0 104px;
}
.ro-shell{width:min(var(--max),calc(100% - 40px));margin:auto}

.ro-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.ro-state[hidden]{display:none}

/* Runic glyphs: system stacks only — no webfont is added. */
.ro-glyph{
  font-family:"Segoe UI Historic","Segoe UI Symbol","Noto Sans Runic","Noto Sans Symbols2",
    "Apple Symbols",var(--sans);
}

/* ------------------------------------------------------------------ */
/* STATE 1 — INTRO                                                      */
/* ------------------------------------------------------------------ */
.ro-intro{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
  align-items:center;gap:clamp(24px,5vw,72px);padding:24px 0 8px;
}
.ro-intro h1{
  font-family:var(--sans);font-weight:850;line-height:.86;letter-spacing:-.055em;
  text-transform:uppercase;font-size:clamp(2.6rem,6.4vw,5.4rem);margin-left:-.04em;
}
.ro-lead{max-width:56ch;margin:28px 0 0;color:#c3cbcb;font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.66}
.ro-instruction{
  max-width:56ch;margin:22px 0 32px;padding-left:18px;border-left:1px solid var(--ro-edge);
  color:#98a2a4;font-size:.96rem;line-height:1.7;
}
.ro-instruction-tight{margin:16px 0 34px}

.ro-begin{cursor:pointer}
.ro-begin b{font-size:1rem}

.ro-staff-frame{
  position:relative;display:grid;place-items:center;padding:22px;
  width:100%;max-width:330px;justify-self:center;
  border:1px solid var(--line);background:
    radial-gradient(circle at 50% 26%,rgba(114,247,232,.05),transparent 62%),
    linear-gradient(180deg,var(--ro-back-2),var(--ink-2));
}
.ro-staff-frame::before{
  content:"";position:absolute;inset:9px;border:1px solid var(--ro-edge);pointer-events:none;
}
.ro-staff{width:auto;height:clamp(300px,42vh,520px);max-width:100%;filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}

/* ------------------------------------------------------------------ */
/* STATE 2 — SELECTION                                                  */
/* ------------------------------------------------------------------ */
.ro-heading{
  font-family:var(--sans);font-weight:850;line-height:.9;letter-spacing:-.05em;
  text-transform:uppercase;font-size:clamp(2rem,5vw,3.8rem);
}
.ro-heading:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}

.ro-deck{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:8px;
}

.ro-card{
  position:relative;display:block;width:100%;aspect-ratio:4/5;min-width:44px;min-height:44px;
  padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--ro-edge);
  background:
    radial-gradient(ellipse at 50% 30%,rgba(114,247,232,.055),transparent 62%),
    linear-gradient(170deg,var(--ro-back-2),var(--ro-back) 58%,#070a0b);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
/* The single cached staff asset, quietly repeated across all 24 identical backs. */
.ro-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.58;
  background:url("/assets/volva-staff-emblem.svg") no-repeat center center/auto 78%;
}
/* Restrained bronze inner rule with one very subtle turquoise detail beneath it. */
.ro-card::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(241,199,91,.18);
  box-shadow:inset 0 -1px 0 0 rgba(114,247,232,.16);
}

@media (hover:hover) and (pointer:fine){
  .ro-card:hover:not([disabled]){
    transform:translateY(-7px);border-color:var(--ro-edge-hot);
    box-shadow:0 14px 26px rgba(0,0,0,.62),0 0 0 1px rgba(114,247,232,.16);
  }
}
.ro-card:focus-visible{
  outline:2px solid var(--cyan);outline-offset:4px;
  transform:translateY(-7px);
  box-shadow:0 14px 26px rgba(0,0,0,.62);
}
.ro-card[disabled]{cursor:default}
.ro-deck.is-locked .ro-card{opacity:.5;transform:none;box-shadow:none}

/* ------------------------------------------------------------------ */
/* STATE 3 — READING                                                    */
/* ------------------------------------------------------------------ */
.ro-reading-grid{
  display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  align-items:start;gap:clamp(26px,4vw,60px);padding-top:8px;
}
.ro-card-column{position:relative;display:grid;justify-items:center;gap:18px;position:sticky;top:96px}
.ro-front-frame{
  position:relative;width:100%;max-width:420px;padding:10px;
  border:1px solid var(--ro-edge);background:var(--ink-2);
  box-shadow:0 24px 54px rgba(0,0,0,.62);
}
.ro-front{width:100%;height:auto}
/* site.css sets `img,svg{display:block}`, an author rule that outranks the UA
   `[hidden]{display:none}`. Without this the failed image would stay laid out
   and stay in the accessibility tree as a phantom image. Scoped to the oracle;
   site.css is shared with the games and is not touched. */
.ro-front[hidden]{display:none}
/* Only ever shown if a front image genuinely fails to load. `hidden` must win,
   so the display rule is scoped to the not-hidden state. */
.ro-front-missing:not([hidden]){
  display:grid;place-items:center;aspect-ratio:4/5;
  border:1px dashed var(--line-hot);color:var(--muted);
  font:600 .66rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:16px;
}
.ro-staff-mini{height:52px;width:auto;opacity:.62}

.ro-rune-title{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  font-family:var(--sans);font-weight:850;line-height:.92;letter-spacing:-.045em;
  text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.4rem);
}
.ro-rune-title:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.ro-rune-title .ro-glyph{color:var(--cyan);font-weight:400;font-size:1.05em;letter-spacing:0}
.ro-codepoint{margin-top:10px;color:#6f797c;font:500 .58rem/1 var(--mono);letter-spacing:.16em}

.ro-label{
  margin:34px 0 12px;color:var(--gold);
  font:750 .7rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.ro-body{max-width:70ch;color:#bcc4c4;line-height:1.72}
.ro-meditation{
  max-width:70ch;padding:16px 20px;border-left:2px solid var(--cyan);
  background:var(--cyan-soft);color:var(--paper);font-style:italic;line-height:1.7;
}

/* Scholarly layer: subordinate, collapsed by default, keyboard-operable. */
.ro-historical{margin:38px 0 0;border:1px solid var(--line);background:rgba(13,17,20,.6)}
.ro-historical-summary{
  cursor:pointer;padding:14px 18px;color:var(--muted);
  font:600 .64rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.ro-historical-summary:hover{color:var(--paper)}
.ro-historical-summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.ro-historical[open] .ro-historical-summary{border-bottom:1px solid var(--line);color:var(--paper)}
.ro-historical-body{padding:18px}
.ro-historical-body p{max-width:70ch;color:#a9b2b3;font-size:.92rem;line-height:1.7}
.ro-historical-meta{
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line);
}
.ro-historical-meta dt{color:#6f797c;font:600 .56rem/1.5 var(--mono);letter-spacing:.14em;white-space:nowrap}
.ro-historical-meta dd{color:#9aa4a6;font-size:.86rem;line-height:1.6}

.ro-after{max-width:70ch;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:#bcc4c4;line-height:1.72}
.ro-again{max-width:70ch;margin-top:16px;color:#8b9497;font-size:.9rem;line-height:1.7}

/* Deliberately low-emphasis: not a reward, not a "draw again" call to action. */
.ro-return-row{margin-top:30px}
.ro-return{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font:600 .62rem/1 var(--mono);letter-spacing:.14em;
  transition:color .2s,border-color .2s;
}
.ro-return:hover{color:var(--paper);border-color:var(--line-hot)}

.ro-safety{margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.ro-safety p{max-width:70ch;color:#788285;font-size:.8rem;line-height:1.65}
.ro-safety-links{margin-top:8px;font:600 .6rem/1 var(--mono);letter-spacing:.12em}
.ro-safety-links a{color:var(--muted)}
.ro-safety-links a:hover{color:var(--cyan)}

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                           */
/* ------------------------------------------------------------------ */
@media (max-width:1099px){
  .ro-deck{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:900px){
  .ro-intro{grid-template-columns:1fr;gap:34px}
  .ro-staff-frame{order:-1;justify-self:start;padding:16px}
  .ro-staff{height:clamp(220px,32vh,300px)}
  .ro-reading-grid{grid-template-columns:1fr}
  .ro-card-column{position:static;justify-items:start}
  .ro-front-frame{max-width:340px}
}
@media (max-width:680px){
  .ro-main{padding:32px 0 72px}
  .ro-deck{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .ro-historical-meta{grid-template-columns:1fr;gap:4px}
  .ro-historical-meta dd{margin-bottom:10px}
  .ro-rune-title{gap:12px}
}
@media (max-width:400px){
  .ro-shell{width:calc(100% - 24px)}
  .ro-deck{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .ro-card{transition:none}
  .ro-card:hover:not([disabled]),.ro-card:focus-visible{transform:none}
}
@media (prefers-contrast:more){
  .ro-card{border-color:var(--line-hot)}
  .ro-instruction,.ro-body,.ro-after{color:var(--paper)}
}