:root {
  color-scheme: dark;
  --ink: #090914;
  --panel: rgba(11, 11, 25, 0.92);
  --line: rgba(181, 225, 255, 0.2);
  --cyan: #67e8ff;
  --violet: #be5cff;
  --ember: #ff7a32;
  --text: #f6f3ff;
  --muted: #aaa6bf;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); overscroll-behavior: none; touch-action: none; user-select: none; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#app { position: fixed; inset: 0; width: 100dvw; height: 100dvh; min-height: 100%; isolation: isolate; background: var(--ink); }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#effects-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; z-index: 2; }
.vfx-sprite { position: absolute; object-fit: contain; pointer-events: none; filter: saturate(1.08) contrast(1.05); }

.hud { position: absolute; z-index: 5; top: calc(12px + var(--safe-top)); left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); display: grid; grid-template-columns: minmax(170px, 300px) 1fr 46px; gap: 12px; align-items: start; pointer-events: none; }
.status-stack { display: grid; gap: 5px; }
.meter { --fill: 100%; height: 15px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(6,7,18,.68); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); transition: width .12s linear; }
.meter span { position: absolute; z-index: 1; inset: 0 5px; display: flex; align-items: center; font-size: 8px; font-weight: 900; letter-spacing: .17em; text-shadow: 0 1px 2px #000; }
.meter.health::before { background: linear-gradient(90deg,#a92a4f,#ff5474); }
.meter.mana::before { background: linear-gradient(90deg,#1676b0,#56e8ff); }
.meter.xp { height: 9px; }
.meter.xp::before { background: linear-gradient(90deg,#6736be,#d16bff); }
.meter.xp span { font-size: 7px; }
.score-cluster { justify-self: center; min-width: 120px; text-align: center; text-shadow: 0 2px 8px #000; }
.score { display: block; font-weight: 900; font-size: clamp(20px,3vw,31px); letter-spacing: .04em; }
.timer { display: block; color: #c7c3da; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.icon-button { width: 46px; height: 46px; border: 1px solid var(--line); background: rgba(8,9,22,.72); border-radius: 50%; pointer-events: auto; cursor: pointer; backdrop-filter: blur(8px); }
.icon-button:hover { border-color: rgba(103,232,255,.7); }

.spell-dock { position: absolute; z-index: 6; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); display: flex; gap: 8px; padding: 7px; background: rgba(6,7,18,.7); border: 1px solid rgba(183,215,255,.15); clip-path: polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px); backdrop-filter: blur(8px); }
.spell { --cooldown: 0%; position: relative; width: clamp(64px,8vw,82px); height: 64px; border: 1px solid rgba(255,255,255,.15); background: rgba(19,18,38,.9); overflow: hidden; cursor: pointer; touch-action: manipulation; }
.spell::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.64); transform-origin: bottom; transform: scaleY(calc(var(--cooldown) / 100)); pointer-events:none; }
.spell[data-ready="true"] { box-shadow: inset 0 0 20px rgba(103,232,255,.11), 0 0 12px rgba(103,232,255,.06); }
.spell:disabled { opacity: .5; }
.spell .sigil { display: block; font-size: 22px; line-height: 23px; }
.spell strong { display: block; font-size: 9px; letter-spacing: .08em; }
.spell small { position: absolute; z-index: 2; right: 5px; bottom: 3px; color: #d9d5e8; font-size: 8px; }
.spell.ember .sigil { color: var(--ember); }
.spell.comet .sigil { color: #d58cff; }
.spell.nova .sigil { color: var(--cyan); }
.spell.dash .sigil { color: #fff; }

.brand { position: absolute; z-index: 5; left: calc(12px + var(--safe-left)); bottom: calc(15px + var(--safe-bottom)); display: flex; align-items: center; gap: 7px; max-width: min(220px,42vw); opacity: .72; pointer-events: auto; }
.brand img { width: 20px; height: 20px; object-fit: contain; }
.brand-monogram { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #8ceeff; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.brand a { color: #d4d2df; text-decoration: none; font-size: 10px; line-height: 1.15; }
.brand a:hover { color: #fff; }
.debug-badge { position: absolute; z-index: 10; right: 70px; top: 14px; background: #ffdd63; color: #111; padding: 4px 6px; font: 800 9px/1 system-ui; }

.overlay { position: absolute; z-index: 20; inset: 0; }
.overlay[hidden] { display: none !important; }
.start-screen { display: grid; place-items: center; background: #080916; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; filter: saturate(.84) contrast(1.05) brightness(.66); transform: scale(1.025); }
.veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%,rgba(11,9,26,.16) 0 18%,rgba(8,8,20,.68) 64%,rgba(5,5,13,.96) 100%), linear-gradient(180deg,rgba(5,6,16,.18),rgba(5,6,16,.42) 55%,rgba(5,6,16,.92)); }
.start-copy { position: relative; width: min(760px,calc(100% - 28px)); padding: clamp(20px,4vw,44px); text-align: center; text-shadow: 0 2px 22px #070713; }
.eyebrow { margin: 0 0 9px; color: #b9b5c9; font-weight: 800; letter-spacing: .22em; font-size: 9px; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: .84; letter-spacing: .04em; font-weight: 700; }
h1 span { display: block; font-size: clamp(48px,10vw,102px); color: #f6f1ff; }
h1 em { display: block; margin-top: 10px; font-family: ui-sans-serif,system-ui,sans-serif; font-style: normal; font-size: clamp(13px,2.8vw,24px); letter-spacing: .48em; color: #9eeeff; transform: translateX(.24em); }
.tagline { max-width: 640px; margin: 22px auto 15px; color: #e5e0ed; line-height: 1.55; font-size: clamp(13px,2vw,16px); }
.reaction-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 auto 18px; }
.reaction-strip span { border: 1px solid rgba(255,255,255,.14); background: rgba(8,8,19,.46); padding: 6px 9px; font-size: 9px; letter-spacing: .04em; }
.reaction-strip b { color: #c6f7ff; }
.primary-button,.secondary-button { min-height: 46px; min-width: 190px; padding: 12px 20px; border-radius: 0; cursor: pointer; font-weight: 900; letter-spacing: .13em; font-size: 11px; }
.primary-button { border: 1px solid #9af1ff; background: linear-gradient(180deg,#17435a,#0d273a); box-shadow: 0 0 22px rgba(103,232,255,.18); }
.primary-button:hover { background: linear-gradient(180deg,#235d75,#12354b); }
.secondary-button { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.controls-hint { margin: 15px auto 0; color: #bab6c8; font-size: 10px; line-height: 1.5; }
.start-settings { margin-top: 13px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; color: #c3bfce; font-size: 10px; }
.start-settings label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.start-settings input { accent-color: #63dff5; width: 16px; height: 16px; }

.modal { display: grid; place-items: center; padding: 18px; background: rgba(4,5,13,.7); backdrop-filter: blur(10px); }
.panel { width: min(430px,100%); padding: 28px; text-align: center; border: 1px solid rgba(164,227,255,.24); background: linear-gradient(180deg,rgba(20,18,39,.96),rgba(8,9,23,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.panel.wide { width: min(760px,100%); }
.panel h2 { margin: 0 0 8px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(34px,6vw,56px); font-weight: 500; }
.panel p:not(.eyebrow) { color: #bbb6ca; line-height: 1.5; font-size: 13px; }
.panel .primary-button,.panel .secondary-button { margin: 10px 5px 0; }
.results { display: flex; justify-content: center; gap: 24px; margin: 18px 0 8px; color: #a9a4b7; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.results strong { display: block; margin-top: 3px; color: #fff; font-size: 21px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.upgrade-card { min-height: 150px; padding: 18px 14px; border: 1px solid rgba(164,227,255,.2); background: rgba(17,19,38,.92); cursor: pointer; text-align: left; }
.upgrade-card:hover,.upgrade-card:focus-visible { border-color: #8befff; background: rgba(29,38,60,.95); }
.upgrade-card strong { display: block; margin-bottom: 14px; color: #eafcff; font-family: Georgia,"Times New Roman",serif; font-size: 20px; }
.upgrade-card span { color: #b9b5c8; font-size: 12px; line-height: 1.5; }
.victory-panel { border-color: rgba(255,231,154,.38); box-shadow: 0 0 80px rgba(223,181,94,.11); }
.sr-only { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 680px) {
  .hud { grid-template-columns: minmax(130px,42vw) 1fr 42px; gap: 7px; top: calc(8px + var(--safe-top)); left: calc(8px + var(--safe-left)); right: calc(8px + var(--safe-right)); }
  .icon-button { width: 42px; height: 42px; }
  .score-cluster { min-width: 75px; }
  .timer { font-size: 9px; }
  .spell-dock { right: calc(7px + var(--safe-right)); left: auto; bottom: calc(8px + var(--safe-bottom)); transform: none; gap: 5px; padding: 5px; }
  .spell { width: 58px; height: 58px; }
  .spell strong { font-size: 8px; }
  .spell small { font-size: 7px; }
  .brand { bottom: calc(80px + var(--safe-bottom)); max-width: 48vw; }
  .brand a { font-size: 8px; }
  .start-copy { padding: 18px 12px; }
  .reaction-strip span { font-size: 8px; padding: 5px 7px; }
  .controls-hint { font-size: 9px; }
  .upgrade-grid { grid-template-columns: 1fr; max-height: 58dvh; overflow: auto; }
  .upgrade-card { min-height: 90px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .start-copy { width: min(900px,calc(100% - 20px)); padding: 8px 14px; }
  h1 span { font-size: clamp(40px,10vh,68px); }
  h1 em { margin-top: 6px; font-size: 12px; }
  .tagline { margin: 10px auto 8px; font-size: 11px; }
  .reaction-strip { margin-bottom: 8px; }
  .controls-hint { margin-top: 8px; line-height: 1.3; }
  .start-settings { margin-top: 7px; }
  .spell-dock { left: auto; right: calc(8px + var(--safe-right)); transform: none; bottom: calc(8px + var(--safe-bottom)); }
  .brand { bottom: calc(8px + var(--safe-bottom)); }
  .panel { padding: 18px; }
  .panel h2 { font-size: 34px; }
  .upgrade-grid { grid-template-columns: repeat(3,1fr); max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
  #effects-layer { display: none; }
  .hero-art { transform: none; }
}

@media (pointer: coarse) { .brand { pointer-events: none; } }

/* Riftweaver v0.2 combat/readability polish */
.meter.resonance { height: 10px; border-color: rgba(255,226,132,.24); }
.meter.resonance::before { background: linear-gradient(90deg,#6748d9 0%,#c55cff 52%,#ffe9a3 100%); box-shadow: 0 0 14px rgba(199,111,255,.45); }
.meter.resonance span { font-size: 6px; color: #fff2ca; letter-spacing: .14em; }
.meter.resonance[data-overweave="true"] { border-color: rgba(255,239,173,.76); box-shadow: 0 0 18px rgba(255,225,126,.3), inset 0 0 12px rgba(219,104,255,.2); }

.boss-status { position: absolute; z-index: 5; top: calc(66px + var(--safe-top)); left: 50%; width: min(430px,55vw); transform: translateX(-50%); pointer-events: none; text-align: center; }
.boss-status[hidden] { display: none; }
.boss-name { display: block; margin-bottom: 5px; color: #f5dcff; font-family: Georgia,"Times New Roman",serif; font-size: 11px; letter-spacing: .24em; text-shadow: 0 0 14px #a827df; }
.boss-meter { --fill: 100%; position: relative; height: 8px; overflow: hidden; border: 1px solid rgba(239,182,255,.45); background: rgba(3,2,11,.72); box-shadow: 0 0 18px rgba(180,70,255,.15); }
.boss-meter::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--fill); background: linear-gradient(90deg,#6c1b93,#d24cff 58%,#f2b7ff); box-shadow: 0 0 14px rgba(218,86,255,.65); }

#app::before,#app::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .2s linear; }
#app[data-overweave="true"]::before { opacity:.72; box-shadow: inset 0 0 70px rgba(202,83,255,.25), inset 0 0 25px rgba(111,236,255,.22); border: 1px solid rgba(255,235,161,.18); }
#app[data-critical="true"]::after { opacity:1; background: radial-gradient(circle at 50% 50%,transparent 45%,rgba(113,4,29,.14) 74%,rgba(164,8,37,.42) 100%); }

.start-screen { background: #050511; }
.hero-art { object-position: 50% 42%; filter: saturate(.94) contrast(1.07) brightness(.72); animation: hero-breathe 9s ease-in-out infinite alternate; }
.veil { background: radial-gradient(circle at 50% 43%,rgba(8,6,21,.05) 0 23%,rgba(8,8,20,.42) 58%,rgba(5,5,13,.88) 100%), linear-gradient(180deg,rgba(5,6,16,.10),rgba(5,6,16,.24) 48%,rgba(5,6,16,.86)); }
.start-copy { text-shadow: 0 2px 25px #020209, 0 0 40px rgba(28,4,48,.35); }
.start-copy::before { content:""; position:absolute; inset:8% 4%; z-index:-1; border:1px solid rgba(189,125,255,.10); clip-path: polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); background: radial-gradient(circle,rgba(7,8,24,.46),rgba(4,4,14,.04) 72%); }
.start-copy h1 span { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 28px rgba(185,112,255,.15); }
.tagline strong { color:#e7b7ff; font-weight:800; }
.objective { display:inline-block; margin-top:7px; color:#d9baff; font-size:8px; font-weight:900; letter-spacing:.13em; }
.reaction-strip span:last-child { border-color: rgba(255,225,135,.3); color:#ffe9b5; }

.vfx-sprite { image-rendering: auto; transform-origin: 50% 50%; animation: vfx-pop .7s cubic-bezier(.15,.65,.2,1) both; }

@keyframes hero-breathe { from { transform: scale(1.025) translate3d(0,0,0); } to { transform: scale(1.055) translate3d(0,-.7%,0); } }
@keyframes vfx-pop { 0% { opacity:0; filter:saturate(1.12) contrast(1.05) brightness(1.3); } 12% { opacity:1; } 82% { opacity:.92; } 100% { opacity:0; filter:saturate(1) contrast(1.02) brightness(.8); } }

@media (max-width:680px) {
  .boss-status { top: calc(62px + var(--safe-top)); width:min(330px,58vw); }
  .boss-name { font-size:8px; letter-spacing:.16em; }
  .boss-meter { height:6px; }
  .meter.resonance { height:9px; }
  .meter.resonance span { font-size:5px; }
  .start-copy::before { inset:5% 0; }
  .hero-art { object-position: 52% 38%; }
}

@media (max-height:540px) and (orientation:landscape) {
  .boss-status { top: calc(46px + var(--safe-top)); width:min(380px,46vw); }
  .objective { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-art,.vfx-sprite { animation:none !important; }
  #app::before,#app::after { transition:none; }
}

.pause-settings { margin: 17px 0 6px; }
.pause-settings label { min-height: 32px; padding: 4px 6px; }
@media (pointer:coarse) { .pause-settings label { min-height:44px; padding:8px; } }

/* ARCANUM: Riftweaver v0.3 — grimoire/progression layer */
:root {
  --gold: #ffd978;
  --gold-dim: #9b6426;
  --life: #ff5a8d;
  --aether: #73ecff;
  --violet: #c066ff;
}

.journey-cluster {
  position: absolute;
  left: 50%;
  top: calc(10px + var(--safe-top));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "lives section" "checkpoint checkpoint";
  gap: 2px 10px;
  align-items: center;
  padding: 7px 12px 6px;
  border: 1px solid rgba(255,217,120,.22);
  background: linear-gradient(180deg, rgba(11,8,28,.74), rgba(5,5,16,.46));
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  pointer-events: none;
}
.lives {
  grid-area: lives;
  color: var(--life);
  font-size: 16px;
  letter-spacing: .05em;
  text-shadow: 0 0 12px rgba(255,69,121,.75);
  white-space: nowrap;
}
.section-label {
  grid-area: section;
  color: #fff1c2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}
.checkpoint-label {
  grid-area: checkpoint;
  justify-self: center;
  color: #8df6dd;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .88;
}

.spell-dock {
  width: min(620px, calc(100vw - 24px));
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.spell.heal {
  --spell-color: #70f0b1;
  --spell-shadow: rgba(112,240,177,.42);
}
.spell.heal .sigil { color: #b6ffd5; }

.pause-panel { width: min(790px, calc(100vw - 28px)); }
.pause-columns {
  display: grid;
  grid-template-columns: minmax(220px,.8fr) minmax(300px,1.2fr);
  gap: 24px;
  align-items: start;
  margin: 12px 0 16px;
}
.bindings-panel {
  border-left: 1px solid rgba(255,218,128,.16);
  padding-left: 20px;
}
.bindings-panel h3 {
  margin: 0 0 5px;
  font: 700 16px Georgia,serif;
  color: #ffe6a0;
  letter-spacing: .08em;
}
.binding-help { margin: 0 0 9px; font-size: 11px; opacity: .78; }
.binding-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.binding-list button {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(151,111,216,.34);
  background: rgba(12,9,28,.72);
  color: #f5edff;
  padding: 7px 9px;
  font: inherit;
  cursor: pointer;
}
.binding-list button:hover,
.binding-list button:focus-visible {
  border-color: rgba(255,220,128,.72);
  box-shadow: 0 0 18px rgba(196,106,255,.16);
}
.binding-list button[data-capturing="true"] {
  border-color: #ffe08a;
  background: rgba(71,42,28,.82);
  animation: binding-pulse .8s ease-in-out infinite alternate;
}
.binding-list kbd {
  min-width: 42px;
  padding: 4px 7px;
  border: 1px solid rgba(255,224,143,.28);
  background: #080714;
  color: #ffe9a7;
  font: 800 10px/1 system-ui,sans-serif;
  text-align: center;
}
@keyframes binding-pulse { to { box-shadow: 0 0 22px rgba(255,210,101,.35); } }

/* Enchanted grimoire upgrade experience */
.grimoire-overlay {
  background:
    radial-gradient(circle at 50% 46%, rgba(121,56,183,.18), transparent 48%),
    rgba(3,3,11,.88);
  backdrop-filter: blur(8px);
}
.grimoire-stage {
  width: min(980px,96vw);
  height: min(720px,94vh);
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(12px,3vh,26px);
}
.grimoire-stage h2 {
  margin: 2px 0 3px;
  color: #fff1b6;
  font: 700 clamp(23px,3.4vw,43px)/1 Georgia,"Times New Roman",serif;
  text-shadow: 0 2px 20px #07030c,0 0 22px rgba(255,208,98,.18);
}
.grimoire-hint {
  margin: 0 0 4px;
  color: #d9cbff;
  font-size: 11px;
  letter-spacing: .09em;
}
.grimoire-book {
  position: relative;
  width: min(920px,94vw);
  height: min(610px,77vh);
  margin-top: -5px;
}
.grimoire-book > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(152,62,255,.14));
  pointer-events: none;
}
.grimoire-runes {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.grimoire-rune {
  position: absolute;
  z-index: 2;
  width: clamp(152px,19vw,210px);
  min-height: clamp(138px,20vh,175px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  color: #5a3314;
  background:
    radial-gradient(circle, rgba(255,249,210,.94) 0 35%, rgba(246,205,117,.82) 65%, rgba(163,91,35,.18) 100%);
  clip-path: polygon(50% 0,72% 15%,95% 50%,74% 85%,50% 100%,27% 85%,5% 50%,27% 15%);
  cursor: pointer;
  padding: 24px 18px;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
  transition: transform .16s ease,filter .16s ease;
  filter: drop-shadow(0 0 8px rgba(255,217,112,.28));
}
.grimoire-rune::before,
.grimoire-rune::after {
  content:"";
  position:absolute;
  inset:8px;
  clip-path: inherit;
  border: 1px solid rgba(111,56,21,.28);
  pointer-events:none;
}
.grimoire-rune:hover,
.grimoire-rune:focus-visible {
  transform: scale(1.07) translateY(-4px);
  filter: drop-shadow(0 0 24px rgba(255,216,111,.7)) drop-shadow(0 0 34px rgba(157,68,255,.34));
  outline: none;
}
.grimoire-rune.left-page { left: 18%; top: 33%; transform: translate(-50%,-50%) rotate(-5deg); }
.grimoire-rune.crown-seal { left: 50%; top: 24%; transform: translate(-50%,-50%); }
.grimoire-rune.right-page { left: 82%; top: 33%; transform: translate(-50%,-50%) rotate(5deg); }
.grimoire-rune.left-page:hover,.grimoire-rune.left-page:focus-visible { transform: translate(-50%,-50%) rotate(-5deg) scale(1.07); }
.grimoire-rune.crown-seal:hover,.grimoire-rune.crown-seal:focus-visible { transform: translate(-50%,-50%) scale(1.07); }
.grimoire-rune.right-page:hover,.grimoire-rune.right-page:focus-visible { transform: translate(-50%,-50%) rotate(5deg) scale(1.07); }
.rune-glyph {
  font-size: 38px;
  line-height: 1;
  color: #7c3fa9;
  text-shadow: 0 0 10px rgba(138,52,196,.28);
}
.grimoire-rune strong {
  font: 800 15px/1.06 Georgia,serif;
  letter-spacing: .03em;
}
.rune-detail {
  max-width: 155px;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
}

/* Life pulse, checkpoint and boss states */
#app[data-critical="true"] .lives { animation: life-warning .65s ease-in-out infinite alternate; }
@keyframes life-warning { to { filter: brightness(1.35); transform: scale(1.05); } }
.boss-name { max-width: min(520px,70vw); margin-inline:auto; }
[data-boss-name] { display:block; }
#continue-button[hidden] { display:none; }

/* Five-spell mobile layout */
@media (max-width: 820px) {
  .journey-cluster { top: calc(7px + var(--safe-top)); padding:5px 8px; gap:1px 7px; }
  .lives { font-size:13px; }
  .section-label { font-size:7px; }
  .checkpoint-label { font-size:6px; }
  .spell-dock { width:calc(100vw - 12px); gap:5px; bottom:calc(6px + var(--safe-bottom)); }
  .spell { min-width:0; padding-inline:3px; }
  .spell strong { font-size:7px; letter-spacing:.03em; }
  .spell .sigil { font-size:16px; }
  .spell small { font-size:7px; }
}
@media (max-width: 680px) {
  .pause-panel { max-height:90vh; overflow:auto; }
  .pause-columns { grid-template-columns:1fr; gap:12px; }
  .bindings-panel { border-left:0; border-top:1px solid rgba(255,218,128,.16); padding:12px 0 0; }
  .binding-list { grid-template-columns:1fr 1fr; }
  .grimoire-stage { height:92vh; }
  .grimoire-book { width:98vw; height:72vh; }
  .grimoire-rune {
    width:134px;
    min-height:118px;
    padding:19px 12px;
  }
  .grimoire-rune.left-page { left:24%; top:38%; }
  .grimoire-rune.crown-seal { left:50%; top:19%; }
  .grimoire-rune.right-page { left:76%; top:38%; }
  .rune-glyph { font-size:30px; }
  .grimoire-rune strong { font-size:12px; }
  .rune-detail { font-size:9px; max-width:112px; }
}
@media (max-width: 430px) {
  .journey-cluster { top:calc(48px + var(--safe-top)); }
  .binding-list { grid-template-columns:1fr; }
  .grimoire-stage .eyebrow { font-size:7px; }
  .grimoire-stage h2 { font-size:21px; max-width:90vw; }
  .grimoire-book { margin-top:0; height:69vh; }
  .grimoire-rune { width:116px; min-height:105px; }
  .grimoire-rune.left-page { left:24%; top:41%; }
  .grimoire-rune.crown-seal { left:50%; top:19%; }
  .grimoire-rune.right-page { left:76%; top:41%; }
  .rune-glyph { font-size:25px; }
  .rune-detail { max-width:97px; font-size:8px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .journey-cluster { top:calc(4px + var(--safe-top)); left:43%; }
  .grimoire-stage { height:96vh; padding-top:4px; }
  .grimoire-stage h2 { font-size:22px; margin:0; }
  .grimoire-hint { display:none; }
  .grimoire-book { height:82vh; width:80vw; margin-top:-20px; }
  .grimoire-rune { min-height:102px; width:145px; padding:15px 12px; }
  .grimoire-rune.left-page { left:21%; top:43%; }
  .grimoire-rune.crown-seal { left:50%; top:25%; }
  .grimoire-rune.right-page { left:79%; top:43%; }
  .pause-panel { max-height:94vh; overflow:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .binding-list button[data-capturing="true"],
  #app[data-critical="true"] .lives { animation:none !important; }
  .grimoire-rune { transition:none; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .spell-dock {
    width: min(510px, 58vw);
    gap: 4px;
    bottom: calc(4px + var(--safe-bottom));
  }
  .spell {
    min-height: 58px;
    padding: 4px 2px;
  }
  .spell .sigil { font-size: 14px; }
  .spell strong { font-size: 7px; line-height: 1; }
  .spell small { font-size: 6px; }
  .brand {
    left: 6px;
    bottom: calc(6px + var(--safe-bottom));
    transform: scale(.78);
    transform-origin: left bottom;
  }
  .brand [data-brand-company] { display: none; }
}

.grimoire-rune.left-page .rune-detail,
.grimoire-rune.right-page .rune-detail {
  max-width: 122px;
  font-size: 9px;
}
.grimoire-rune.left-page { left: 20%; }
.grimoire-rune.right-page { left: 80%; }
@media (max-width: 680px) {
  .grimoire-rune.left-page .rune-detail,
  .grimoire-rune.right-page .rune-detail { max-width: 92px; font-size: 8px; }
  .grimoire-rune.left-page { left: 25%; }
  .grimoire-rune.right-page { left: 75%; }
}

@media (max-width: 430px) {
  .grimoire-rune {
    width: 126px;
    min-height: 140px;
    padding: 24px 16px;
    gap: 4px;
  }
  .grimoire-rune strong { font-size: 11px; line-height: 1.02; }
  .grimoire-rune .rune-glyph { font-size: 23px; }
  .grimoire-rune .rune-detail {
    max-width: 88px;
    font-size: 7.5px;
    line-height: 1.12;
  }
  .grimoire-rune.left-page .rune-detail,
  .grimoire-rune.right-page .rune-detail { max-width: 82px; }
  .grimoire-rune.left-page { left: 24%; top: 43%; }
  .grimoire-rune.crown-seal { left: 50%; top: 20%; }
  .grimoire-rune.right-page { left: 76%; top: 43%; }
}

/* ARCANUM: Riftweaver v0.4 — interaction, recap, shield and progression polish */

.hud .score-cluster {
  position: absolute;
  top: 0;
  right: 62px;
  min-width: 92px;
  max-width: 140px;
  text-align: right;
  justify-self: auto;
}
.journey-cluster { max-width: 240px; }
.spell-dock {
  width: min(720px, calc(100vw - 24px));
  grid-template-columns: repeat(6,minmax(0,1fr));
}
.spell.shield {
  --spell-color: #91d8ff;
  --spell-shadow: rgba(120,205,255,.42);
}
.spell.shield .sigil { color:#bfe8ff; }
.spell.shield[data-active="true"] {
  border-color: rgba(181,229,255,.9);
  box-shadow: inset 0 0 24px rgba(115,204,255,.28),0 0 24px rgba(125,202,255,.35);
}
.spell.shield[data-active="true"]::before {
  content:"AEGIS";
  position:absolute;
  inset:3px auto auto 4px;
  z-index:3;
  color:#e9f8ff;
  font-size:6px;
  font-weight:900;
  letter-spacing:.08em;
}

/* Reliable grimoire hit targets: visual sigil is decorative, button hitbox stays rectangular. */
.grimoire-rune {
  clip-path:none !important;
  background:transparent !important;
  overflow:visible;
  isolation:isolate;
  padding:28px 22px;
  min-height:176px;
}
.grimoire-rune::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  clip-path:polygon(50% 0,72% 15%,95% 50%,74% 85%,50% 100%,27% 85%,5% 50%,27% 15%);
  background:radial-gradient(circle,rgba(255,249,210,.97) 0 35%,rgba(246,205,117,.87) 65%,rgba(163,91,35,.30) 100%);
  border:1px solid rgba(111,56,21,.34);
  pointer-events:none;
}
.grimoire-rune::after {
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  clip-path:polygon(50% 0,72% 15%,95% 50%,74% 85%,50% 100%,27% 85%,5% 50%,27% 15%);
  border:1px solid rgba(111,56,21,.23);
  pointer-events:none;
}
.grimoire-rune.left-page,
.grimoire-rune.right-page,
.grimoire-rune.crown-seal { pointer-events:auto; }
.grimoire-rune:hover::before,
.grimoire-rune:focus-visible::before {
  filter:brightness(1.08) saturate(1.08);
}
.rune-detail {
  display:block;
  width:min(150px,100%);
  max-width:150px !important;
  min-height:2.5em;
  overflow:visible;
  overflow-wrap:anywhere;
  hyphens:auto;
  font-size:9.5px !important;
  line-height:1.2 !important;
}
.rune-branch {
  display:block;
  margin-top:2px;
  color:#77469e;
  font-size:7px;
  font-weight:900;
  letter-spacing:.11em;
}

/* Pause upgrade constellation */
.pause-panel {
  width:min(920px,calc(100vw - 28px));
  max-height:min(92dvh,820px);
  overflow:auto;
}
.upgrade-map-panel {
  margin:4px 0 8px;
  padding:14px;
  border:1px solid rgba(255,216,126,.14);
  background:radial-gradient(circle at 50% 0,rgba(105,56,158,.12),rgba(8,8,21,.62) 70%);
  text-align:left;
}
.upgrade-map-heading {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  margin-bottom:11px;
}
.upgrade-map-heading h3 {
  margin:0;
  color:#ffe7a5;
  font:700 16px Georgia,serif;
}
.upgrade-map-heading p {
  margin:0 !important;
  max-width:450px;
  font-size:9px !important;
  text-align:right;
}
.upgrade-map {
  display:grid;
  gap:8px;
}
.upgrade-empty {
  margin:0 !important;
  padding:10px;
  text-align:center;
  border:1px dashed rgba(180,146,221,.25);
}
.upgrade-lane {
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.upgrade-lane-head {
  color:#d7c5f3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.upgrade-chain {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:2px 0 5px;
}
.upgrade-node {
  flex:0 0 auto;
  min-width:112px;
  max-width:150px;
  padding:7px 8px;
  border:1px solid rgba(175,133,225,.30);
  background:linear-gradient(180deg,rgba(35,24,56,.86),rgba(14,12,28,.86));
  box-shadow:0 0 12px rgba(135,73,197,.08);
}
.upgrade-node strong {
  display:block;
  color:#f6efff;
  font-size:9px;
  line-height:1.15;
}
.upgrade-node small {
  display:block;
  margin-top:3px;
  color:#c7a8ef;
  font-size:7px;
}
.upgrade-link {
  flex:0 0 auto;
  color:#ffe397;
  opacity:.72;
}
.upgrade-lane[data-family="flame"] .upgrade-node { border-color:rgba(255,144,73,.38); }
.upgrade-lane[data-family="astral"] .upgrade-node { border-color:rgba(115,225,255,.36); }
.upgrade-lane[data-family="vitality"] .upgrade-node { border-color:rgba(112,240,177,.34); }
.upgrade-lane[data-family="aegis"] .upgrade-node { border-color:rgba(151,218,255,.48); }

/* Level celebration */
.celebration-overlay {
  z-index:28;
  display:grid;
  place-items:center;
  align-content:center;
  pointer-events:none;
  text-align:center;
  background:radial-gradient(circle at 50% 48%,rgba(155,83,255,.18),transparent 42%);
}
.celebration-overlay[hidden] { display:none !important; }
.celebration-overlay::before,
.celebration-overlay::after {
  content:"";
  position:absolute;
  width:min(58vw,610px);
  aspect-ratio:1;
  border:1px solid rgba(255,231,158,.28);
  border-radius:50%;
  box-shadow:0 0 48px rgba(152,77,255,.16),inset 0 0 48px rgba(101,229,255,.09);
  animation:celebration-ring .9s ease-out both;
}
.celebration-overlay::after {
  width:min(42vw,430px);
  animation-delay:.08s;
}
.celebration-sigil {
  font-size:clamp(54px,10vw,118px);
  color:#fff0ad;
  text-shadow:0 0 18px #fff,0 0 45px #bd65ff;
  animation:celebration-pop .7s cubic-bezier(.16,.8,.22,1) both;
}
.celebration-overlay h2 {
  margin:0;
  color:#fff4c7;
  font:700 clamp(42px,8vw,96px)/.95 Georgia,serif;
  text-shadow:0 4px 30px #07020d,0 0 28px rgba(255,224,129,.32);
}
.celebration-overlay h2 strong { color:#fff; }
.celebration-overlay > p:last-child {
  margin:12px 0 0;
  color:#c9f4ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.20em;
}
@keyframes celebration-ring {
  from { transform:scale(.35) rotate(-12deg); opacity:0; }
  45% { opacity:1; }
  to { transform:scale(1.08) rotate(12deg); opacity:0; }
}
@keyframes celebration-pop {
  from { transform:scale(.55); opacity:0; }
  50% { transform:scale(1.16); opacity:1; }
  to { transform:scale(1); opacity:.92; }
}

/* Encounter recap pauses gameplay while retaining the arena behind it. */
.recap-overlay {
  z-index:27;
  display:grid;
  place-items:center;
  padding:18px;
  background:linear-gradient(180deg,rgba(5,6,16,.42),rgba(3,3,11,.77));
  backdrop-filter:blur(4px);
}
.recap-overlay[hidden] { display:none !important; }
.recap-panel {
  width:min(700px,100%);
  border-color:rgba(255,225,142,.30);
  background:
    radial-gradient(circle at 50% 0,rgba(114,62,160,.20),transparent 40%),
    linear-gradient(180deg,rgba(20,18,39,.93),rgba(8,9,23,.97));
}
.recap-panel h2 { font-size:clamp(32px,5vw,54px); }
.recap-summary { max-width:560px; margin:0 auto 14px; }
.recap-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0;
}
.recap-grid > span {
  min-height:66px;
  display:grid;
  place-items:center;
  align-content:center;
  padding:8px;
  border:1px solid rgba(164,227,255,.15);
  background:rgba(7,9,22,.58);
  color:#aaa5bc;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.recap-grid strong {
  display:block;
  margin-top:4px;
  color:#fff1c5;
  font-size:18px;
  letter-spacing:.02em;
  text-transform:none;
}
.recap-last-hit { grid-column:span 3; }

/* Keep top HUD clusters in separate non-overlapping zones. */
@media (min-width:681px) {
  .journey-cluster { top:calc(8px + var(--safe-top)); }
  .score-cluster { right:64px; }
}
@media (max-width:820px) {
  .spell-dock {
    width:calc(100vw - 10px);
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
  }
  .spell { width:auto; min-width:0; }
  .score-cluster { right:50px; top:0; }
  .score { font-size:18px; }
  .journey-cluster { left:50%; }
}
@media (max-width:680px) {
  .hud .score-cluster {
    right:48px;
    top:0;
    min-width:62px;
    max-width:76px;
  }
  .score { font-size:15px; }
  .timer { font-size:7px; letter-spacing:.08em; }
  .journey-cluster {
    top:calc(50px + var(--safe-top));
    left:50%;
  }
  .upgrade-map-heading { display:block; }
  .upgrade-map-heading p { margin-top:4px !important; text-align:left; }
  .upgrade-lane { grid-template-columns:1fr; gap:4px; }
  .recap-grid { grid-template-columns:repeat(2,1fr); }
  .recap-last-hit { grid-column:span 2; }
}
@media (max-width:430px) {
  .spell-dock { gap:3px; padding:4px; }
  .spell { height:56px; }
  .spell .sigil { font-size:14px; }
  .spell strong { font-size:6.3px; }
  .grimoire-rune {
    width:132px;
    min-height:150px;
    padding:27px 18px;
  }
  .rune-detail {
    width:96px;
    max-width:96px !important;
    font-size:7.6px !important;
  }
  .rune-branch { font-size:6px; }
  .recap-panel { padding:20px 14px; }
  .recap-grid strong { font-size:15px; }
}
@media (max-height:560px) and (orientation:landscape) {
  .spell-dock {
    width:min(610px,68vw);
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .journey-cluster { left:42%; top:calc(4px + var(--safe-top)); }
  .hud .score-cluster { right:50px; }
  .recap-panel {
    max-height:92dvh;
    overflow:auto;
    padding:14px 18px;
  }
  .recap-panel h2 { font-size:30px; }
  .recap-grid { grid-template-columns:repeat(4,1fr); }
  .recap-last-hit { grid-column:span 4; }
}
@media (prefers-reduced-motion:reduce) {
  .celebration-overlay::before,
  .celebration-overlay::after,
  .celebration-sigil { animation:none !important; }
}

.spell-dock .spell {
  flex: 1 1 0;
  max-width: 92px;
  min-width: 52px;
}
@media (max-width: 820px) {
  .spell-dock .spell { min-width: 0; max-width: none; }
}

/* The pause control owns the top-right corner; score sits immediately to its left. */
.hud .icon-button {
  position: absolute;
  top: 0;
  right: 0;
}

/* ARCANUM: Riftweaver v0.5 — Ascension campaign, ultimate spell and late-game UI */

.spell-dock{
  width:min(820px,calc(100vw - 18px));
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.spell-dock .spell{max-width:100px}
.spell.ultimate{
  --spell-color:#ffffff;
  --spell-shadow:rgba(255,255,255,.46);
  background:
    radial-gradient(circle at 50% 32%,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(42,21,66,.96),rgba(6,5,14,.96));
  border-color:rgba(220,202,255,.48);
}
.spell.ultimate .sigil{
  color:#fff;
  text-shadow:0 0 8px #fff,0 0 16px #8f55ff,0 0 26px #4ecfff;
}
.spell.ultimate[data-locked="true"]{
  opacity:.47;
  filter:saturate(.55);
}
.spell.ultimate[data-locked="true"]::after{
  content:"SEALED";
  position:absolute;
  inset:auto 4px 3px;
  color:#cab8d8;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}
.spell.ultimate[data-ready="true"]{
  animation:ultimate-ready 1.65s ease-in-out infinite;
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 18px rgba(255,255,255,.28),0 0 32px rgba(121,70,255,.22);
}
@keyframes ultimate-ready{
  50%{transform:translateY(-2px);box-shadow:0 0 26px rgba(255,255,255,.42),0 0 42px rgba(91,210,255,.28)}
}

/* Upgrade history is inspectable rather than decorative. */
.upgrade-node{
  position:relative;
  cursor:help;
  outline:none;
}
.upgrade-node::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:40;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(220px,70vw);
  transform:translate(-50%,5px);
  padding:8px 9px;
  border:1px solid rgba(255,226,145,.35);
  background:rgba(7,6,17,.97);
  color:#f8f2ff;
  font-size:9px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease,transform .12s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 18px rgba(129,71,198,.16);
}
.upgrade-node:hover::after,
.upgrade-node:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}
.upgrade-node:focus-visible{
  box-shadow:0 0 0 2px rgba(255,234,170,.52),0 0 18px rgba(168,100,255,.3);
}

/* Ensure all rune choices, especially the left page, own identical interaction geometry. */
.grimoire-rune{
  z-index:2;
  pointer-events:auto!important;
  touch-action:manipulation;
}
.grimoire-rune.left-page{z-index:3}
.grimoire-rune:hover,
.grimoire-rune:focus-visible{
  transform:translateY(-3px) scale(1.025);
}
.grimoire-rune:hover::before,
.grimoire-rune:focus-visible::before{
  box-shadow:0 0 26px rgba(255,230,153,.32),0 0 42px rgba(178,91,255,.18);
}

/* Late campaign status gets a stronger but still compact apex treatment. */
#app[data-apex="true"] .journey-cluster{
  text-shadow:0 0 10px rgba(255,255,255,.26),0 0 22px rgba(115,77,255,.18);
}
#app[data-ultimate="ready"] .meter.mana{
  box-shadow:0 0 12px rgba(255,255,255,.12),0 0 24px rgba(104,86,255,.12);
}

@media(max-width:900px){
  .spell-dock{width:calc(100vw - 8px);gap:3px}
  .spell-dock .spell{max-width:none;min-width:0}
  .spell strong{font-size:6.6px}
}
@media(max-width:680px){
  .spell-dock{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:2px;
    padding:4px;
  }
  .spell{
    height:54px;
    padding-inline:1px;
  }
  .spell .sigil{font-size:13px}
  .spell strong{font-size:5.8px;letter-spacing:.02em}
  .spell small{font-size:6.4px}
  .spell.ultimate[data-locked="true"]::after{font-size:5px}
}
@media(max-width:430px){
  .spell-dock{width:calc(100vw - 4px)}
  .spell{height:52px}
  .spell strong{font-size:5.3px}
  .spell .sigil{font-size:12px}
  .journey-cluster{max-width:210px}
}
@media(max-height:560px) and (orientation:landscape){
  .spell-dock{
    width:min(690px,78vw);
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  .spell{height:50px}
  .spell strong{font-size:5.8px}
}

/* Reduced motion keeps all new information without pulsing animation. */
@media(prefers-reduced-motion:reduce){
  .spell.ultimate[data-ready="true"]{animation:none!important}
  .grimoire-rune:hover,.grimoire-rune:focus-visible{transform:none}
}

/* ARCANUM: Riftweaver v0.6 — Bosscraft, chronomancy and tooltip repair */

.spell-dock{
  box-sizing:border-box;
  width:min(930px,calc(100vw - 18px));
  grid-template-columns:repeat(8,minmax(0,1fr));
}
.spell-dock .spell{max-width:108px}
.spell.chronos{
  --spell-color:#c9f7ff;
  --spell-shadow:rgba(142,213,255,.42);
  background:
    radial-gradient(circle at 50% 34%,rgba(202,248,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(24,31,62,.96),rgba(6,6,17,.96));
  border-color:rgba(179,224,255,.46);
}
.spell.chronos .sigil{
  color:#dffcff;
  text-shadow:0 0 8px #fff,0 0 20px #6bcfff,0 0 28px #b46bff;
}
.spell.chronos[data-locked="true"]{opacity:.46;filter:saturate(.58)}
.spell.chronos[data-locked="true"]::after{
  content:"SEALED";
  position:absolute;
  inset:auto 4px 3px;
  color:#b8d9e6;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}
.spell.chronos[data-ready="true"]{
  border-color:rgba(207,249,255,.9);
  box-shadow:0 0 18px rgba(117,218,255,.24),0 0 30px rgba(155,88,255,.18);
}

/* The v0.5 tooltip existed, but its horizontal scroller clipped the pseudo-element.
   v0.6 keeps the relationship graph visible and allows pointer/focus tooltips to escape. */
.upgrade-chain{
  overflow:visible!important;
  flex-wrap:wrap;
  align-items:flex-start;
  row-gap:8px;
}
.upgrade-node{
  position:relative;
  cursor:help;
  outline:none;
  isolation:isolate;
}
.upgrade-node::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:120;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(240px,72vw);
  transform:translate(-50%,5px);
  padding:9px 10px;
  border:1px solid rgba(255,226,145,.42);
  border-radius:5px;
  background:rgba(6,6,16,.985);
  color:#fff8e7;
  font-size:10px;
  line-height:1.38;
  font-weight:650;
  letter-spacing:.01em;
  text-transform:none;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,transform .12s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 20px rgba(129,71,198,.18);
}
.upgrade-node:hover::after,
.upgrade-node:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.upgrade-node:focus-visible{
  box-shadow:0 0 0 2px rgba(255,234,170,.58),0 0 20px rgba(168,100,255,.34);
}

/* Cinematic Ultimate time compression is deliberately subtle in the UI.
   Simulation scaling happens in game-v06.js; this edge vignette only communicates weight. */
#app[data-time-scale="cinematic"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:16;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 58px rgba(132,76,255,.10);
}
#app[data-time-scale="fractured"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:16;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(183,240,255,.025) 48px 49px);
  box-shadow:inset 0 0 65px rgba(103,220,255,.08);
}

@media(max-width:900px){
  .spell-dock{width:calc(100vw - 8px);gap:2px}
  .spell-dock .spell{max-width:none;min-width:0}
  .spell strong{font-size:6.2px}
}
@media(max-width:680px){
  .spell-dock{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:2px;
    padding:4px 2px;
  }
  .spell{height:54px;padding-inline:0}
  .spell .sigil{font-size:12px}
  .spell strong{font-size:5.2px;letter-spacing:0}
  .spell small{font-size:6px}
  .spell.chronos[data-locked="true"]::after,
  .spell.ultimate[data-locked="true"]::after{font-size:4.6px}
  .upgrade-node::after{
    left:0;
    width:min(230px,80vw);
    transform:translate(0,5px);
  }
  .upgrade-node:hover::after,
  .upgrade-node:focus-visible::after{transform:translate(0,0)}
}
@media(max-width:430px){
  .spell-dock{
    width:calc(100vw - 16px);
    padding:3px;
    gap:1px;
  }
  .spell-dock .spell{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box;
    padding-inline:0!important;
  }
  .spell{height:51px}
  .spell strong{font-size:4.8px}
  .spell .sigil{font-size:11px}
  .spell small{font-size:5.7px}
}
@media(max-height:560px) and (orientation:landscape){
  .spell-dock{
    width:min(690px,82vw);
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .spell{height:48px}
  .spell strong{font-size:5.2px}
}
@media(prefers-reduced-motion:reduce){
  #app[data-time-scale="cinematic"]::after,
  #app[data-time-scale="fractured"]::after{display:none}
  .upgrade-node::after{transition:none}
}


/* Real tooltip popover: pseudo-element kept as a no-content fallback, real span owns visibility. */
.upgrade-node::after{content:none!important}
.upgrade-tooltip{
  position:absolute;
  z-index:140;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(240px,72vw);
  transform:translate(-50%,5px);
  padding:9px 10px;
  box-sizing:border-box;
  border:1px solid rgba(255,226,145,.42);
  border-radius:5px;
  background:rgba(6,6,16,.985);
  color:#fff8e7;
  font-size:10px;
  line-height:1.38;
  font-weight:650;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,transform .12s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 20px rgba(129,71,198,.18);
}
.upgrade-node:hover>.upgrade-tooltip,
.upgrade-node:focus>.upgrade-tooltip,
.upgrade-node:focus-visible>.upgrade-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
@media(max-width:680px){
  .upgrade-tooltip{left:0;transform:translate(0,5px);width:min(230px,80vw)}
  .upgrade-node:hover>.upgrade-tooltip,
  .upgrade-node:focus>.upgrade-tooltip,
  .upgrade-node:focus-visible>.upgrade-tooltip{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){.upgrade-tooltip{transition:none}}

/* ARCANUM: Riftweaver v0.7 — Arcane Alliance polish */

.spell-dock{
  width:min(1060px,calc(100vw - 18px));
  grid-template-columns:repeat(9,minmax(0,1fr));
}
.spell-dock .spell{max-width:112px}
.spell.psych{
  --spell-color:#93ff8f;
  --spell-shadow:rgba(174,92,255,.42);
  background:
    radial-gradient(circle at 45% 30%,rgba(112,255,138,.16),transparent 34%),
    radial-gradient(circle at 68% 55%,rgba(188,98,255,.15),transparent 46%),
    linear-gradient(180deg,rgba(18,37,34,.97),rgba(14,8,27,.97));
  border-color:rgba(149,255,157,.46);
}
.spell.psych .sigil{
  color:#a9ff9d;
  text-shadow:0 0 8px #dfffd8,0 0 18px #67ff84,0 0 28px #b04fff;
}
.spell.psych[data-ready="true"]{
  border-color:rgba(174,255,180,.92);
  box-shadow:0 0 18px rgba(100,255,132,.23),0 0 30px rgba(174,76,255,.17);
}

/* Pause overlay is deliberately transition-stable. Reopening it no longer
   rebuilds the rune graph on the same frame, and these properties prevent
   compositor/backdrop invalidation from flashing the whole modal. */
#pause-screen{
  backface-visibility:hidden;
  transform:translateZ(0);
  contain:layout paint style;
}
#pause-screen .pause-panel{
  backface-visibility:hidden;
  transform:translateZ(0);
  will-change:auto;
}
#pause-screen:not([hidden]) .upgrade-map,
#pause-screen:not([hidden]) .upgrade-chain{
  contain:layout style;
}
#pause-screen .upgrade-tooltip{
  pointer-events:none;
}

@media(max-width:900px){
  .spell-dock{
    width:calc(100vw - 8px);
    grid-template-columns:repeat(9,minmax(0,1fr));
  }
  .spell-dock .spell{min-width:0;max-width:none}
  .spell-dock .spell strong{font-size:5.9px;letter-spacing:.03em}
}
@media(max-width:680px){
  .spell-dock{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-rows:50px;
    gap:2px;
    padding:3px;
    width:calc(100vw - 6px);
  }
  .spell-dock .spell{height:50px}
}
@media(max-height:480px) and (orientation:landscape){
  .spell-dock{
    grid-template-columns:repeat(9,minmax(0,1fr));
    grid-auto-rows:44px;
    width:calc(100vw - 8px);
    padding:2px;
  }
  .spell-dock .spell{height:44px}
  .spell-dock .spell .sigil{font-size:15px}
  .spell-dock .spell strong{font-size:5.4px}
}


/* v0.7 interaction parity: preserve each rune's positional transform while
   scaling it on hover/focus. This specifically fixes the left page, whose
   centering/rotation was being overwritten by the generic v0.5 hover rule. */
.grimoire-rune{
  transform-origin:50% 50%;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.grimoire-rune.left-page{
  transform:translate(-50%,-50%) rotate(-5deg) scale(1);
}
.grimoire-rune.left-page:hover,
.grimoire-rune.left-page:focus-visible{
  transform:translate(-50%,-50%) rotate(-5deg) scale(1.09) !important;
}
.grimoire-rune.crown-seal{
  transform:translate(-50%,-50%) scale(1);
}
.grimoire-rune.crown-seal:hover,
.grimoire-rune.crown-seal:focus-visible{
  transform:translate(-50%,-50%) scale(1.09) !important;
}
.grimoire-rune.right-page{
  transform:translate(-50%,-50%) rotate(5deg) scale(1);
}
.grimoire-rune.right-page:hover,
.grimoire-rune.right-page:focus-visible{
  transform:translate(-50%,-50%) rotate(5deg) scale(1.09) !important;
}

/* Text collision hardening across HUD, boss banners and encounter reports. */
.boss-status{
  width:min(600px,64vw);
  max-width:calc(100vw - 180px);
}
.boss-name{
  max-width:100%;
  padding:0 8px;
  line-height:1.28;
  letter-spacing:clamp(.08em,.8vw,.20em);
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.recap-panel{
  box-sizing:border-box;
  width:min(720px,calc(100vw - 28px));
  max-height:min(92dvh,860px);
  overflow:auto;
}
.recap-panel .eyebrow,
.recap-panel h2,
.recap-summary,
.recap-grid > span,
.recap-grid strong,
.victory-panel p,
.victory-panel h2{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.recap-panel h2,
.victory-panel h2{
  line-height:1.03;
  text-wrap:balance;
}
.recap-panel .eyebrow{
  line-height:1.3;
}
.recap-summary{
  line-height:1.45;
  text-wrap:pretty;
}
.recap-grid > span{
  min-width:0;
}
.recap-grid strong{
  line-height:1.15;
}
.results{
  flex-wrap:wrap;
}
.results > span{
  min-width:0;
  max-width:100%;
}
.journey-cluster,
.score-cluster{
  box-sizing:border-box;
}
.section-label,
.checkpoint-label,
.score,
.timer{
  overflow-wrap:anywhere;
}
@media(max-width:680px){
  .boss-status{
    top:calc(96px + var(--safe-top));
    width:min(92vw,520px);
    max-width:92vw;
  }
  .boss-name{
    font-size:7.5px;
    letter-spacing:.10em;
    line-height:1.25;
  }
  .recap-panel{
    width:calc(100vw - 18px);
    padding:18px 12px;
  }
  .recap-panel h2{
    font-size:clamp(26px,8.5vw,40px);
  }
  .recap-panel .eyebrow{
    font-size:8px;
    letter-spacing:.14em;
  }
  .recap-summary{
    font-size:11px !important;
  }
  .recap-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:430px){
  .boss-status{
    top:calc(102px + var(--safe-top));
  }
  .recap-grid{
    gap:6px;
  }
  .recap-grid > span{
    min-height:58px;
    padding:6px;
    font-size:7px;
    letter-spacing:.06em;
  }
  .recap-grid strong{
    font-size:14px;
  }
}
@media(max-height:560px) and (orientation:landscape){
  .boss-status{
    top:calc(42px + var(--safe-top));
    width:min(54vw,520px);
    max-width:54vw;
  }
  .recap-panel{
    max-height:94dvh;
    width:min(760px,88vw);
    padding:12px 16px;
  }
  .recap-panel h2{
    margin-bottom:5px;
    font-size:clamp(26px,5.6vh,34px);
  }
  .recap-summary{
    margin-bottom:7px;
    font-size:10px !important;
  }
  .recap-grid{
    margin:7px 0;
    gap:5px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .recap-grid > span{
    min-height:49px;
    padding:5px;
  }
  .recap-last-hit{
    grid-column:span 4;
  }
}


/* v0.7 boss-spectacle follow-up: use the independent scale property so
   positional translate/rotate transforms can never suppress hover growth. */
.grimoire-rune{
  scale:1;
  transition:transform .16s ease,scale .16s ease,filter .16s ease,box-shadow .16s ease;
  will-change:scale;
}
.grimoire-rune:hover,
.grimoire-rune:focus-visible{
  scale:1.09 !important;
}
.grimoire-rune.left-page:hover,
.grimoire-rune.left-page:focus-visible,
.grimoire-rune.crown-seal:hover,
.grimoire-rune.crown-seal:focus-visible,
.grimoire-rune.right-page:hover,
.grimoire-rune.right-page:focus-visible{
  scale:1.09 !important;
}
.grimoire-rune.left-page:not(:hover):not(:focus-visible),
.grimoire-rune.crown-seal:not(:hover):not(:focus-visible),
.grimoire-rune.right-page:not(:hover):not(:focus-visible){
  scale:1 !important;
}

/* Text-fit audit: every authored UI text block owns a finite content area,
   wraps rather than colliding, and scrolls only where long copy genuinely
   cannot fit. */
.panel,
.pause-panel,
.grimoire-stage,
.grimoire-book,
.grimoire-rune,
.upgrade-node,
.upgrade-lane,
.upgrade-chain,
.binding-list button,
.spell,
.boss-status,
.recap-panel,
.victory-panel,
.results,
.results > span{
  box-sizing:border-box;
  min-width:0;
}
.grimoire-stage h2,
.grimoire-hint,
.grimoire-rune strong,
.rune-detail,
.rune-branch,
.upgrade-node strong,
.upgrade-node small,
.binding-list button,
.spell strong,
.spell small,
.boss-name,
.recap-panel .eyebrow,
.recap-panel h2,
.recap-summary,
.recap-grid > span,
.recap-grid strong,
.victory-panel h2,
.victory-panel p,
.results > span,
.results strong,
.section-label,
.checkpoint-label,
.score,
.timer{
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}
.grimoire-rune strong{
  width:100%;
  font-size:clamp(11px,1.05vw,15px);
  line-height:1.08;
  text-align:center;
  text-wrap:balance;
}
.rune-detail{
  width:min(154px,100%) !important;
  max-width:100% !important;
  max-height:5.6em;
  padding-inline:3px;
  overflow:auto !important;
  scrollbar-width:thin;
  font-size:clamp(7.5px,.78vw,9.5px) !important;
  line-height:1.18 !important;
  text-align:center;
}
.grimoire-hint{
  width:min(760px,90vw);
  line-height:1.35;
  text-wrap:balance;
}
.upgrade-node{
  overflow:visible;
}
.upgrade-node strong,
.upgrade-node small{
  white-space:normal;
}
.binding-list button{
  white-space:normal;
  line-height:1.2;
}
.spell strong{
  white-space:normal;
  line-height:1.02;
}
.boss-status{
  max-width:min(650px,calc(100vw - 140px));
}
.boss-name{
  white-space:normal;
  line-height:1.25;
  text-wrap:balance;
}
.recap-panel,
.victory-panel{
  overflow:auto;
}
.recap-panel h2,
.victory-panel h2{
  margin-inline:auto;
  text-wrap:balance;
}
.recap-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.recap-grid > span{
  overflow:hidden;
}
.recap-grid strong{
  white-space:normal;
}
.results{
  flex-wrap:wrap;
}
.results > span{
  flex:1 1 130px;
}
.primary-button,
.secondary-button{
  max-width:100%;
  white-space:normal;
  line-height:1.25;
}
@media(max-width:680px){
  .grimoire-stage{
    width:100vw;
    max-height:100dvh;
    overflow:auto;
    padding-inline:8px;
  }
  .grimoire-stage h2{
    max-width:92vw;
    font-size:clamp(22px,7vw,34px);
    line-height:1.02;
  }
  .grimoire-hint{
    max-width:88vw;
    font-size:9px;
  }
  .grimoire-rune strong{
    font-size:10px;
  }
  .rune-detail{
    max-height:5.2em;
    font-size:7.4px !important;
  }
  .recap-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .recap-last-hit{
    grid-column:span 2;
  }
  .results > span{
    flex-basis:110px;
  }
}
@media(max-width:430px){
  .grimoire-rune{
    width:126px;
    min-height:146px;
    padding:23px 15px;
  }
  .grimoire-rune strong{
    font-size:9px;
  }
  .rune-detail{
    font-size:6.9px !important;
    max-height:5em;
  }
  .recap-panel{
    padding:16px 10px;
  }
  .recap-panel h2{
    font-size:clamp(24px,8vw,34px);
  }
}
@media(max-height:560px) and (orientation:landscape){
  .grimoire-stage{
    height:100dvh;
    overflow:auto;
    padding-top:6px;
  }
  .grimoire-stage h2{
    font-size:26px;
  }
  .grimoire-book{
    height:min(500px,78dvh);
  }
  .recap-panel,
  .victory-panel{
    max-height:94dvh;
  }
  .recap-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .recap-last-hit{
    grid-column:span 4;
  }
}


/* Visual fallback for browsers/compositors that do not animate the individual
   scale property reliably on an absolutely positioned rune. The parchment
   plate itself also grows, so the left choice visibly expands/contracts. */
.grimoire-rune::before{
  transform:scale(1);
  transform-origin:50% 50%;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.grimoire-rune:hover::before,
.grimoire-rune:focus-visible::before{
  transform:scale(1.075);
}


/* Definitive upgrade hover state.
   The left rune previously opened already focused, so focus-visible could make
   it appear permanently enlarged. JS now moves neutral focus to the rune list
   and mirrors real pointer enter/leave through data-pointer. */
.grimoire-runes{
  pointer-events:auto;
  outline:none;
}
.grimoire-rune{
  scale:1 !important;
}
.grimoire-rune[data-pointer="on"],
.grimoire-rune:hover,
.grimoire-rune:focus-visible{
  scale:1.09 !important;
}
.grimoire-rune[data-pointer="off"]:not(:hover):not(:focus-visible){
  scale:1 !important;
}
.grimoire-rune[data-pointer="on"]::before,
.grimoire-rune:hover::before,
.grimoire-rune:focus-visible::before{
  transform:scale(1.075);
  filter:brightness(1.08) saturate(1.08);
}
.grimoire-rune[data-pointer="off"]:not(:hover):not(:focus-visible)::before{
  transform:scale(1);
}

/* Ensure all three interactive hit areas sit above the decorative book and
   receive the same pointer behavior, including the historically problematic
   left page. */
.grimoire-rune.left-page,
.grimoire-rune.crown-seal,
.grimoire-rune.right-page{
  pointer-events:auto !important;
  z-index:8 !important;
}

/* Final text-fit guard: rune copy is bounded inside each parchment rather than
   growing into neighboring choices. */
.grimoire-rune{
  overflow:visible;
}
.grimoire-rune strong{
  flex:0 0 auto;
  max-height:2.35em;
  overflow:hidden;
}
.rune-detail{
  flex:0 1 auto;
  min-height:0;
  max-height:5.4em !important;
  overflow:auto !important;
}
.rune-branch{
  flex:0 0 auto;
  max-width:100%;
  white-space:normal;
  line-height:1.05;
  overflow-wrap:anywhere;
}