.access-text {
  color: #ff304f !important;
  text-shadow: 0 0 18px rgba(255, 48, 79, .9), 0 0 60px rgba(255, 48, 79, .45) !important;
}

.arcane-rpg {
  --arc-green: #00ff99;
  --arc-cyan: #00e5ff;
  --arc-pink: #ff3b8d;
  --arc-gold: #ffb23e;
  position: fixed;
  inset: 0;
  z-index: 12000;
  overflow: hidden;
  color: #dfffee;
  background: #020504;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  outline: none;
  animation: arcane-in .32s ease-out both;
}

.arcane-rpg__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

.arcane-rpg__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .16;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .6));
}

.arcane-hud {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(13rem, .7fr) minmax(18rem, 1.4fr) minmax(10rem, .6fr);
  align-items: start;
  gap: 1.25rem;
  padding: 1rem 5.6rem 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(1, 7, 5, .94), rgba(1, 7, 5, .72) 72%, transparent);
  pointer-events: none;
}

.arcane-hud__identity { display: flex; flex-direction: column; gap: .2rem; }
.arcane-hud__identity strong { font-size: .92rem; color: var(--arc-green); letter-spacing: .09em; }
.arcane-hud__identity span { color: #708c80; font-size: .66rem; letter-spacing: .16em; }
.arcane-hud__meta { display: flex; justify-content: flex-end; gap: 1.2rem; color: #9eb9ad; font-size: .68rem; letter-spacing: .08em; }

.arcane-bars { display: grid; gap: .32rem; }
.arcane-bar { display: grid; grid-template-columns: 2.2rem 1fr 5rem; align-items: center; gap: .5rem; font-size: .64rem; color: #83a095; }
.arcane-bar i { position: relative; display: block; height: 5px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); }
.arcane-bar i b { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #ff304f, #00ff99); transition: width .15s linear; }
.arcane-bar--mana i b { background: linear-gradient(90deg, #1666ff, var(--arc-cyan)); }
.arcane-bar--xp i b { background: linear-gradient(90deg, #7030ff, #ca72ff); }
.arcane-bar em { font-style: normal; text-align: right; }

.arcane-spells {
  position: absolute;
  z-index: 6;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
}
.arcane-spells button {
  --cooldown: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem auto;
  grid-template-rows: 1fr auto;
  gap: .15rem .5rem;
  min-width: 8rem;
  padding: .65rem .8rem;
  overflow: hidden;
  color: #7f9b8f;
  background: rgba(2, 9, 7, .9);
  border: 1px solid rgba(0,255,153,.13);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.arcane-spells button::after { content: ""; position: absolute; inset: calc((1 - var(--cooldown)) * 100%) 0 0; background: rgba(0,0,0,.7); pointer-events: none; }
.arcane-spells button.is-active { color: #eafff2; border-color: var(--arc-green); box-shadow: 0 0 18px rgba(0,255,153,.12); }
.arcane-spells kbd { grid-row: 1 / 3; align-self: center; color: var(--arc-green); background: none; border: 0; font: inherit; }
.arcane-spells strong { font-size: .72rem; letter-spacing: .06em; }
.arcane-spells span { color: #60776d; font-size: .57rem; }

.arcane-notice {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  color: var(--arc-green);
  font-size: clamp(.76rem, 1.4vw, 1rem);
  letter-spacing: .18em;
  text-shadow: 0 0 18px rgba(0,255,153,.65);
  pointer-events: none;
}
.arcane-prompt { position: absolute; z-index: 7; left: 50%; bottom: 6rem; transform: translateX(-50%); color: var(--arc-gold); font-size: .7rem; letter-spacing: .12em; pointer-events: none; }
.arcane-close { position: absolute; z-index: 20; top: .9rem; right: 1rem; padding: .5rem .65rem; color: #a9c0b6; background: rgba(5,12,10,.88); border: 1px solid rgba(255,255,255,.12); font: 600 .65rem/1 "IBM Plex Mono", monospace; cursor: pointer; }
.arcane-close:hover, .arcane-close:focus-visible { color: #fff; border-color: #ff304f; outline: none; }

.arcane-panel {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 50%;
  width: min(90vw, 42rem);
  max-height: 82vh;
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: clamp(1.3rem, 4vw, 2.6rem);
  color: #cce9dc;
  background: rgba(2, 9, 7, .96);
  border: 1px solid rgba(0,255,153,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 0 70px rgba(0,255,153,.11);
  backdrop-filter: blur(12px);
}
.arcane-panel[hidden] { display: none; }
.arcane-panel h1, .arcane-panel h2 { margin: .25rem 0 .8rem; color: #f0fff7; font-family: Sora, sans-serif; letter-spacing: -.04em; }
.arcane-panel h1 { font-size: clamp(2.1rem, 8vw, 4.5rem); }
.arcane-panel h2 { font-size: 1.7rem; }
.arcane-panel p { color: #86a096; }
.arcane-eyebrow { margin: 0; color: var(--arc-green) !important; font-size: .65rem; letter-spacing: .18em; }
.arcane-panel button { padding: .72rem 1rem; color: #03100b; background: var(--arc-green); border: 0; font: 700 .7rem/1 "IBM Plex Mono", monospace; cursor: pointer; }
.arcane-panel button:disabled { color: #4e5c56; background: #19241f; cursor: not-allowed; }
.arcane-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.5rem 0; }
.arcane-controls span { display: flex; flex-direction: column; gap: .25rem; padding: .65rem; color: #718b80; border: 1px solid rgba(255,255,255,.07); font-size: .62rem; }
.arcane-controls kbd { color: var(--arc-green); background: none; border: 0; font: inherit; }
.arcane-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.arcane-panel__head button { color: #abc2b7; background: transparent; border: 1px solid rgba(255,255,255,.12); }

.arcane-equipment { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-bottom: 1.2rem; }
.arcane-equipment article { display: grid; gap: .2rem; padding: .65rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.arcane-equipment span, .arcane-equipment em { color: #60776d; font-size: .58rem; font-style: normal; }
.arcane-equipment strong { font-size: .7rem; }
.arcane-items, .arcane-shop-list { display: grid; gap: .4rem; }
.arcane-items article, .arcane-shop-list article { display: flex; align-items: center; gap: .7rem; padding: .65rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.arcane-items i { width: 4px; align-self: stretch; }
.arcane-items article div, .arcane-shop-list article div { flex: 1; display: grid; gap: .2rem; }
.arcane-items strong, .arcane-shop-list strong { font-size: .72rem; }
.arcane-items span, .arcane-shop-list p { margin: 0; color: #667f74; font-size: .58rem; }
.arcane-items button, .arcane-shop-list button { padding: .55rem .65rem; }
.arcane-empty { padding: 1.5rem; text-align: center; border: 1px dashed rgba(255,255,255,.1); }
.arcane-gameover { text-align: center; }

.arcane-touch { display: none; position: absolute; z-index: 10; inset: auto 1rem 1rem; justify-content: space-between; pointer-events: none; }
.arcane-touch button { width: 52px; height: 52px; color: #dfffee; background: rgba(0,20,14,.72); border: 1px solid rgba(0,255,153,.3); pointer-events: auto; touch-action: none; }
.arcane-touch__move { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 4px; }
.arcane-touch__move button:nth-child(1) { grid-column: 2; }
.arcane-touch__move button:nth-child(2) { grid-column: 1; grid-row: 2; }
.arcane-touch__move button:nth-child(3) { grid-column: 2; grid-row: 2; }
.arcane-touch__move button:nth-child(4) { grid-column: 3; grid-row: 2; }
.arcane-touch__cast { align-self: end; border-radius: 50%; }

@keyframes arcane-in { from { opacity: 0; filter: contrast(1.8) brightness(1.5); } to { opacity: 1; filter: none; } }

@media (pointer: coarse), (max-width: 700px) {
  .arcane-touch { display: flex; }
  .arcane-spells { bottom: 7.2rem; width: calc(100% - 2rem); }
  .arcane-spells button { min-width: 0; flex: 1; padding: .5rem; }
  .arcane-spells strong { font-size: .58rem; }
  .arcane-hud { grid-template-columns: 1fr; padding-right: 5rem; gap: .4rem; }
  .arcane-hud__identity, .arcane-hud__meta { display: none; }
  .arcane-bar { grid-template-columns: 1.6rem 1fr 4.3rem; }
  .arcane-controls { grid-template-columns: repeat(2, 1fr); }
  .arcane-prompt { bottom: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arcane-rpg { animation: none; }
  .arcane-notice { text-shadow: none; }
}

.arcane-quest {
  position:absolute;z-index:6;top:6.2rem;left:1.2rem;width:min(22rem,calc(100vw - 2.4rem));
  padding:.75rem .85rem;background:linear-gradient(120deg,rgba(20,24,20,.9),rgba(29,26,21,.82));
  border-left:3px solid #d0ad6e;box-shadow:0 8px 25px rgba(0,0,0,.2);pointer-events:none;
}
.arcane-quest span{display:block;margin-bottom:.22rem;color:#d0ad6e;font-size:.54rem;letter-spacing:.18em}
.arcane-quest strong{display:block;color:#f0e4cb;font-family:Literata,serif;font-size:.88rem;font-weight:600}
.arcane-quest p{margin:.25rem 0 0;color:#9d9b8d;font:400 .66rem/1.45 "IBM Plex Mono",monospace}
.arcane-quest.is-complete{border-left-color:#64d9a5;opacity:.72}

.arcane-dialogue {
  position:absolute;z-index:18;left:50%;bottom:2rem;transform:translateX(-50%);
  display:grid;grid-template-columns:7rem 1fr;gap:1.2rem;width:min(58rem,calc(100vw - 3rem));
  padding:1.2rem 1.35rem 1.25rem;color:#dfd8c7;
  background:linear-gradient(135deg,rgba(25,27,24,.98),rgba(31,27,23,.97));
  border:1px solid rgba(218,190,137,.3);border-top:3px solid var(--portrait-accent,#d0ad6e);
  box-shadow:0 18px 70px rgba(0,0,0,.58),inset 0 0 45px rgba(218,190,137,.025);
}
.arcane-dialogue[hidden]{display:none}
.arcane-dialogue__portrait{
  --portrait-color:#34453f;--portrait-accent:#d0ad6e;display:grid;place-items:center;align-self:stretch;
  min-height:8.8rem;color:#f0e4cb;font:700 1.7rem/1 Sora,sans-serif;letter-spacing:-.08em;
  background:radial-gradient(circle at 50% 30%,var(--portrait-accent),transparent 3%),linear-gradient(145deg,var(--portrait-color),#111714);
  border:1px solid color-mix(in srgb,var(--portrait-accent) 40%,transparent);
  box-shadow:inset 0 0 35px rgba(0,0,0,.5);
}
.arcane-dialogue__body>p{margin:0;color:#9b927f;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase}
.arcane-dialogue__body h2{margin:.2rem 0 .55rem;color:#f2e6cf;font:600 1.25rem/1.1 Literata,serif;letter-spacing:-.02em}
.arcane-dialogue__body>[data-dialogue-text]{min-height:2.9rem;color:#c9c5b8;font:400 .91rem/1.65 Literata,serif}
.arcane-dialogue__choices{display:grid;gap:.35rem;margin-top:.8rem}
.arcane-dialogue__choices button{
  display:flex;gap:.8rem;align-items:center;width:100%;padding:.55rem .7rem;text-align:left;color:#aaa99d;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);font:500 .69rem/1.35 "IBM Plex Mono",monospace;cursor:pointer;
}
.arcane-dialogue__choices button:hover,.arcane-dialogue__choices button:focus-visible{color:#f0e4cb;border-color:#d0ad6e;background:rgba(208,173,110,.07);outline:none}
.arcane-dialogue__choices button span{color:#d0ad6e;font-size:.58rem}
.arcane-dialogue__choices button[data-path="ward"]{border-left:2px solid #64d9a5}
.arcane-dialogue__choices button[data-path="hex"]{border-left:2px solid #d46bff}
.arcane-dialogue__choices button[data-path="ghost"]{border-left:2px solid #63cfff}

@media(max-width:700px){
  .arcane-quest{top:5.4rem;left:.7rem}
  .arcane-dialogue{bottom:.7rem;grid-template-columns:3.5rem 1fr;width:calc(100vw - 1.4rem);padding:.8rem;gap:.75rem}
  .arcane-dialogue__portrait{min-height:5rem;font-size:1rem}
  .arcane-dialogue__body>[data-dialogue-text]{font-size:.8rem;line-height:1.45}
  .arcane-dialogue__choices button{font-size:.62rem}
}