.viewport { position: relative; }
.arcane-menu[hidden], .game-over[hidden] { display: none !important; }
.arcane-menu {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(100,73,184,.25), transparent 38%),
    linear-gradient(180deg, rgba(3,5,17,.76), rgba(7,5,19,.94));
  backdrop-filter: blur(5px) saturate(.75);
}
.arcane-menu__panel {
  width: min(560px, calc(100% - 40px));
  padding: 34px 38px 30px;
  text-align: center;
  color: #eee9ff;
  background: linear-gradient(145deg, rgba(17,18,42,.97), rgba(14,8,31,.98));
  border: 1px solid #8469cf;
  box-shadow: 0 0 0 4px #080916, 0 0 42px rgba(109,76,216,.38), inset 0 0 30px rgba(98,199,255,.06);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.arcane-menu__sigil { color:#8eeaff; font:700 25px Georgia,serif; text-shadow:0 0 18px #785eff; letter-spacing:.35em; }
.arcane-menu__kicker { margin:10px 0 5px; color:#b69cff; font:700 10px "Courier New",monospace; letter-spacing:.22em; text-transform:uppercase; }
.arcane-menu h2 { margin:0; color:#fff2d3; font:46px Georgia,serif; line-height:1; text-shadow:0 0 24px rgba(171,113,255,.65); }
.arcane-menu__subtitle { margin:12px auto 24px; max-width:410px; color:#aeb7d4; font-size:13px; line-height:1.5; }
.arcane-menu__actions { display:grid; gap:10px; width:min(310px,100%); margin:0 auto; }
.arcane-button {
  min-height:46px;
  border:1px solid #8a70d5;
  color:#f7f1ff;
  background:linear-gradient(90deg,#31235e,#1d3760);
  box-shadow:inset 0 0 18px rgba(118,211,255,.12),0 7px 20px rgba(0,0,0,.28);
  font:700 12px "Courier New",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.arcane-button:hover,.arcane-button:focus-visible { border-color:#a8efff; color:#fffbdc; transform:translateY(-1px); box-shadow:0 0 20px rgba(110,213,255,.3); outline:none; }
.arcane-button--quiet { background:#11152c; color:#aeb8d3; }
.arcane-menu__controls { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; margin-top:24px; color:#7f8da9; font:10px "Courier New",monospace; }
.arcane-menu__controls kbd { color:#d8eaff; border-color:#536488; }
.game-over { z-index:85; width:min(430px,calc(100% - 48px)); padding:30px !important; text-align:center; background:rgba(9,5,18,.96) !important; border:1px solid #8d59bd; box-shadow:0 0 50px rgba(103,43,142,.48); }
.game-over .arcane-button { width:min(280px,100%); margin-top:14px; }
@media (max-width:760px) { .arcane-menu__panel{padding:25px 20px}.arcane-menu h2{font-size:34px}.arcane-menu__controls{display:none} }


.arcane-menu--start { overflow-y:auto; }
.arcane-menu--start .arcane-menu__panel { width:min(720px,calc(100% - 40px));padding-top:25px;padding-bottom:22px; }
.arcane-menu--start .arcane-menu__subtitle { margin-bottom:15px; }
.chapter-select { margin:18px auto 0;max-width:640px; }
.chapter-select__heading { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:10px; }
.chapter-select__heading span { height:1px;background:linear-gradient(90deg,transparent,#6f75b7); }
.chapter-select__heading span:last-child { background:linear-gradient(90deg,#6f75b7,transparent); }
.chapter-select h3 { margin:0;color:#9feeff;font:700 9px "Courier New",monospace;letter-spacing:.22em; }
.chapter-select__grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.chapter-card { min-height:65px;padding:10px 13px;text-align:left;border:1px solid rgba(132,105,207,.5);color:#dfe5ff;background:linear-gradient(135deg,rgba(33,30,69,.88),rgba(11,21,42,.9));cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s; }
.chapter-card small,.chapter-card strong,.chapter-card span { display:block; }
.chapter-card small { color:#8f9fc9;font:700 7px "Courier New",monospace;letter-spacing:.13em; }
.chapter-card strong { margin:4px 0 3px;color:#fff1d0;font:15px Georgia,serif;letter-spacing:.04em; }
.chapter-card span { color:#8494b8;font:9px "Courier New",monospace; }
.chapter-card:hover,.chapter-card:focus-visible { transform:translateY(-2px);border-color:#8eeaff;box-shadow:0 0 18px rgba(85,210,255,.22),inset 0 0 18px rgba(131,96,255,.12);outline:none; }
.chapter-card[data-chapter="cosmic"] { border-left-color:#a88cff; }
.chapter-card[data-chapter="desert"] { border-left-color:#efc46f; }
.chapter-card[data-chapter="chronicle"] { border-left-color:#67eee3; }
.chapter-card:is([data-chapter="shardwake"],[data-chapter="meridian"],[data-chapter="choir"],[data-chapter="loom"],[data-chapter="procession"],[data-chapter="heart"]) { min-height:56px;border-left-color:#fff0a8;background:linear-gradient(135deg,rgba(49,38,75,.94),rgba(13,26,47,.94)); }
.chapter-card[data-chapter="choir"],.chapter-card[data-chapter="procession"] { border-left-color:#d19cff; }
.chapter-card[data-chapter="loom"] { border-left-color:#ff9668; }
.chapter-card[data-chapter="heart"] { border-left-color:#75ebff;box-shadow:inset 0 0 20px rgba(255,240,168,.07); }
@media(max-width:620px){.arcane-menu--start .arcane-menu__panel{width:calc(100% - 12px);padding:16px 13px}.chapter-select__grid{grid-template-columns:1fr}.chapter-card{min-height:51px;padding:7px 10px}.chapter-card strong{font-size:12px}.arcane-menu--start .arcane-menu__controls{display:none}}