@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #f3eadc;
  --muted: #acb5c2;
  --panel: rgba(7, 12, 24, .91);
  --line: rgba(196, 211, 232, .34);
  --gold: #f0b86d;
  --blue: #75a7c7;
  --green: #89c7a0;
  --violet: #9a7ad1;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; background: #040711; }

body {
  display: grid;
  place-items: start center;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid #fff3cf; outline-offset: 3px; }

.game {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #07101d;
  box-shadow: 0 24px 80px #000;
}

.screen { position: absolute; inset: 0; overflow: hidden; }
.screen[hidden] { display: none; }
.scene-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.explore-screen .scene-background {
  transform: scale(1.04);
  will-change: transform;
}

.scene-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 8, 17, .12), transparent 47%, rgba(2, 5, 10, .4)),
    radial-gradient(ellipse at center, transparent 55%, rgba(2, 5, 11, .55));
}

.eyebrow, .speaker {
  margin: 0 0 .35rem;
  color: #d7cbbd;
  font-size: clamp(.58rem, .72vw, .82rem);
  font-weight: 700;
  letter-spacing: .18em;
}

kbd {
  border: 1px solid rgba(255,255,255,.38);
  border-radius: .22rem;
  padding: .1em .34em;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 -1px rgba(0,0,0,.55);
  font: inherit;
}

/* Welcome */

.welcome-screen {
  z-index: 200;
  background: #060a12;
  color: #f7edda;
}

.welcome-background {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.75) contrast(1.06) brightness(.7);
  transform: scale(1.035);
  animation: welcome-camera 14s ease-out both;
}

.welcome-depth {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,6,13,.9) 0%, rgba(3,6,13,.69) 35%, rgba(3,6,13,.12) 67%, rgba(3,6,13,.42) 100%),
    linear-gradient(180deg, rgba(2,5,10,.35), transparent 46%, rgba(2,4,9,.86)),
    radial-gradient(ellipse at 72% 43%, rgba(248,190,103,.17), transparent 28%);
  box-shadow: inset 0 0 12vw rgba(0,0,0,.72);
}

.welcome-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 45%, rgba(255,215,150,.08) 58%, transparent 70%);
  mix-blend-mode: screen;
}

.welcome-motes {
  position: absolute;
  inset: -12%;
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(255,226,174,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(197,219,229,.7) 0 1px, transparent 1.4px);
  background-position: 0 0, 29px 37px;
  background-size: 91px 83px, 137px 121px;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 88%, transparent);
  animation: welcome-motes 15s linear infinite;
}

.welcome-content {
  position: absolute;
  z-index: 4;
  left: 7.5%;
  top: 50%;
  width: min(45%, 690px);
  transform: translateY(-49%);
  text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,.92);
  animation: welcome-copy-in 1.2s ease-out both;
}

.welcome-kicker {
  margin: 0 0 .9rem;
  color: #d6c4a7;
  font: 600 clamp(.48rem,.65vw,.76rem) Cinzel,serif;
  letter-spacing: .3em;
}

.welcome-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: #e2b66f;
}
.welcome-rule i { width: 27%; height: 1px; background: linear-gradient(90deg, transparent, rgba(230,190,124,.8)); }
.welcome-rule i:last-child { background: linear-gradient(90deg, rgba(230,190,124,.8), transparent); }
.welcome-rule b { font-size: .65rem; text-shadow: 0 0 14px rgba(242,188,103,.75); }

.welcome-content h1 {
  margin: .55rem 0 .25rem;
  font-family: Cinzel,serif;
  line-height: .78;
  letter-spacing: .055em;
}
.welcome-content h1 span,
.welcome-content h1 strong { display: block; }
.welcome-content h1 span {
  margin-left: -.18em;
  color: #fff6e7;
  font-size: clamp(3rem,7.2vw,8rem);
  font-weight: 500;
}
.welcome-content h1 strong {
  margin-left: .16em;
  color: #e7bd78;
  font-size: clamp(3.6rem,8.5vw,9.4rem);
  font-weight: 700;
  text-shadow: 0 3px 0 #6a4622, 0 8px 28px rgba(0,0,0,.95), 0 0 34px rgba(227,170,88,.18);
}

.welcome-subtitle {
  margin: 1.15rem 0 0;
  color: #f0dfc1;
  font: 600 clamp(.55rem,.78vw,.9rem) Cinzel,serif;
  letter-spacing: .22em;
}

.welcome-copy {
  width: min(88%, 520px);
  margin: 1rem auto 1.55rem;
  color: #c7c4bd;
  font-size: clamp(.62rem,.85vw,1rem);
  line-height: 1.55;
}

.welcome-start {
  position: relative;
  display: grid;
  min-width: clamp(210px,19vw,320px);
  margin: 0 auto;
  border: 1px solid rgba(234,196,132,.62);
  border-radius: .12rem;
  padding: .78rem 2.2rem .7rem;
  overflow: hidden;
  background: linear-gradient(105deg,rgba(19,24,34,.92),rgba(72,49,27,.88),rgba(18,23,32,.94));
  box-shadow: 0 14px 34px rgba(0,0,0,.48), inset 0 0 24px rgba(244,194,113,.06);
  cursor: pointer;
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.welcome-start::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,235,197,.12);
  pointer-events: none;
}
.welcome-start:hover,.welcome-start:focus-visible {
  transform: translateY(-2px);
  border-color: #f3cf91;
  box-shadow: 0 16px 40px rgba(0,0,0,.58),0 0 22px rgba(231,180,101,.2),inset 0 0 26px rgba(244,194,113,.09);
}
.welcome-start span { font: 700 clamp(.7rem,.9vw,1rem) Cinzel,serif; letter-spacing: .16em; }
.welcome-start small { margin-top: .22rem; color: #bcaa90; font-size: clamp(.4rem,.5vw,.58rem); letter-spacing: .13em; }
.welcome-key { margin: .75rem 0 0; color: #878c94; font-size: clamp(.42rem,.52vw,.6rem); letter-spacing: .1em; }

.welcome-hero {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: -2%;
  width: clamp(190px,25vw,470px);
  height: 83%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 28px 22px rgba(0,0,0,.68));
  animation: welcome-hero-in 1.35s .15s ease-out both;
}
.welcome-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.welcome-hero span {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 4%;
  height: 7%;
  border-radius: 50%;
  background: rgba(2,4,9,.62);
  filter: blur(10px);
}

.welcome-footer {
  position: absolute;
  z-index: 5;
  left: 3%;
  right: 3%;
  bottom: 2.7%;
  display: flex;
  justify-content: space-between;
  color: rgba(225,218,205,.52);
  font: 600 clamp(.4rem,.5vw,.58rem) Cinzel,serif;
  letter-spacing: .18em;
}

.welcome-screen.is-leaving { animation: welcome-leave .62s ease-in forwards; }

@keyframes welcome-camera { from { transform:scale(1.09); } to { transform:scale(1.035); } }
@keyframes welcome-motes { to { transform:translate3d(3%,-6%,0); } }
@keyframes welcome-copy-in { from { opacity:0; transform:translateY(-45%); } to { opacity:1; transform:translateY(-49%); } }
@keyframes welcome-hero-in { from { opacity:0; transform:translateX(8%) scale(.94); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes welcome-leave { to { opacity:0; filter:brightness(1.45) blur(2px); } }

/* Exploration */

.explore-hud {
  position: absolute;
  z-index: 20;
  inset: 3.4% 3.2% auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  text-shadow: 0 2px 12px #000;
}

.explore-hud h1 {
  margin: 0;
  font: 600 clamp(1.25rem, 2.15vw, 2.5rem)/1.05 Cinzel, serif;
}

.explore-hud #explore-objective { margin: .45rem 0 0; color: #dbe1e7; font-size: clamp(.65rem, .9vw, 1rem); }

.prototype-tools { display: flex; gap: .45rem; }

.scene-status {
  display: grid;
  min-width: clamp(105px, 10vw, 170px);
  border: 1px solid rgba(224, 203, 168, .42);
  border-radius: .22rem;
  padding: .62rem .9rem;
  background: linear-gradient(120deg, rgba(6, 11, 21, .88), rgba(22, 24, 30, .7));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35), inset 0 0 18px rgba(240, 184, 109, .04);
  backdrop-filter: blur(9px);
  text-align: center;
}
.scene-status span { color: #fff0d2; font: 600 clamp(.85rem, 1.25vw, 1.35rem) Cinzel, serif; letter-spacing: .12em; }
.scene-status small { margin-top: .25rem; color: #aeb6c1; font-size: clamp(.42rem, .52vw, .6rem); font-weight: 700; letter-spacing: .13em; }

.prototype-jump {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .62rem 1rem;
  background: rgba(6, 12, 23, .68);
  backdrop-filter: blur(10px);
  color: #e7dfd2;
  font-size: clamp(.55rem, .68vw, .75rem);
  font-weight: 700;
  letter-spacing: .09em;
  cursor: pointer;
}

.walk-area { position: absolute; inset: 0; z-index: 8; }

.rain-motes {
  position: absolute;
  z-index: 1;
  inset: -12%;
  pointer-events: none;
  opacity: .26;
  background-image:
    radial-gradient(circle, rgba(210,225,240,.8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(240,206,151,.7) 0 1px, transparent 1.5px);
  background-position: 0 0, 27px 19px;
  background-size: 83px 71px, 119px 103px;
  animation: motes-drift 11s linear infinite;
  mask-image: linear-gradient(180deg, transparent 4%, #000 28%, #000 76%, transparent 96%);
}

.world-character { position: absolute; transform-origin: 50% 100%; }
.world-character img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }

.alex-walker {
  left: 17%;
  top: 65%;
  width: clamp(62px, 6.4vw, 121px);
  aspect-ratio: 8 / 15;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 10px 7px rgba(0,0,0,.46));
  will-change: left, top, transform;
}

.alex-sprite {
  --alex-facing: 1;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("assets/sprites/alex-walk-v6.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0 0;
  image-rendering: auto;
  transform-origin: 50% 93.333%;
}
.alex-walker[data-direction="down"] .alex-sprite { background-position-y: 0%; }
.alex-walker[data-direction="up"] .alex-sprite { background-position-y: 100%; }
.alex-walker.is-walking .alex-sprite { animation: none; }
.alex-walker[data-direction="left"] .alex-sprite,
.alex-walker[data-direction="right"] .alex-sprite {
  background-image: url("assets/sprites/alex-side-walk-v13.png");
  background-size: 600% 100%;
  background-position: 0 0;
  transform: scaleX(var(--alex-facing));
}
.alex-walker[data-direction="left"] .alex-sprite { --alex-facing: -1; }
.alex-walker.is-walking[data-direction="left"] .alex-sprite,
.alex-walker.is-walking[data-direction="right"] .alex-sprite { animation: none; }

.actor-shadow, .unit-shadow {
  position: absolute;
  z-index: 1;
  left: 19%;
  right: 19%;
  bottom: 2%;
  height: 11%;
  border-radius: 50%;
  background: rgba(1, 3, 8, .48);
  filter: blur(5px);
}

.dani {
  left: 31%;
  top: 52%;
  width: clamp(46px, 5.1vw, 96px);
  aspect-ratio: .48;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 9px 6px rgba(0,0,0,.44));
  cursor: pointer;
}

.dani img { transform-origin: 50% 100%; animation: dani-idle 3.4s ease-in-out infinite; }

.bea {
  left: 44%;
  top: 55%;
  z-index: 106;
  width: clamp(56px, 6.3vw, 120px);
  aspect-ratio: .54;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 9px 6px rgba(0,0,0,.44));
  cursor: pointer;
}
.bea img { transform-origin: 50% 100%; animation: bea-idle 3.1s ease-in-out infinite; }
.world-character.has-spoken .nameplate { border-color: rgba(137,199,160,.72); color: #bde2c8; opacity: .96; }
.dani.is-leaving, .bea.is-leaving { pointer-events: none; animation: friends-leave .9s ease-in forwards; }
.world-character[hidden] { display: none; }

.world-prop { position: absolute; }
.school-clock {
  z-index: 9;
  left: 68%;
  top: 23%;
  width: clamp(50px, 5.8vw, 98px);
  aspect-ratio: 2.15;
  transform: translate(-50%, -50%) perspective(220px) rotateY(-5deg) rotateZ(-.4deg);
  border: 2px solid rgba(91, 67, 40, .9);
  border-radius: .12rem;
  background: linear-gradient(145deg, #4c3928, #261d18);
  box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(209,168,103,.2), inset 0 0 12px rgba(0,0,0,.55);
  color: #e8d7b7;
  cursor: pointer;
}
.school-clock span { font: 700 clamp(.48rem, .72vw, .82rem) ui-monospace, monospace; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.school-clock:hover { border-color: var(--gold); }

.nameplate {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: -1.05rem;
  transform: translateX(-50%);
  padding: .2rem .45rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: .25rem;
  background: rgba(5,10,20,.74);
  font-size: clamp(.46rem, .55vw, .65rem);
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .72;
  white-space: nowrap;
}

.ground-marker {
  position: absolute;
  border: 1px solid rgba(239, 193, 113, .32);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240,184,109,.18), transparent 66%);
  opacity: 0;
  transition: opacity .2s;
}
.friend-marker { left: 26%; top: 47%; width: 23%; height: 9%; }
.entrance-marker { left: 50%; top: 27%; width: 12%; height: 8%; }
.walk-area.near-friend .friend-marker, .walk-area.near-entrance .entrance-marker { opacity: 1; animation: marker-pulse 1.4s ease-in-out infinite; }

.interact-prompt {
  position: absolute;
  z-index: 180;
  min-width: 7.5rem;
  transform: translate(-50%, -100%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: .45rem .7rem;
  background: rgba(5, 10, 20, .9);
  box-shadow: 0 7px 20px rgba(0,0,0,.45);
  font-size: clamp(.55rem, .67vw, .72rem);
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}

.explore-dialogue {
  position: absolute;
  z-index: 50;
  left: 7%;
  right: 7%;
  bottom: 6.5%;
  min-height: 22%;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .7rem 1.2rem;
  background: linear-gradient(115deg, rgba(6,11,22,.97), rgba(15,20,35,.93));
  box-shadow: 0 18px 55px rgba(0,0,0,.58), inset 0 0 25px rgba(129,158,193,.06);
}
.explore-dialogue[hidden] { display: none; }
.explore-dialogue img { align-self: flex-end; width: clamp(70px, 8vw, 140px); height: 17vh; object-fit: contain; object-position: bottom; }
.explore-dialogue > div { flex: 1; }
.explore-dialogue p:not(.speaker) { margin: .2rem 0 .7rem; font: 500 clamp(.9rem, 1.25vw, 1.35rem)/1.45 Cinzel, serif; }
.explore-dialogue button {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 0;
  border-bottom: 1px solid var(--gold);
  padding: .2rem 0;
  background: transparent;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
}
.explore-dialogue button small { color: #828b98; font-size: .85em; letter-spacing: .05em; }

.narration-overlay {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 0 7% 6.5%;
  background:
    linear-gradient(180deg, rgba(2,5,12,.08), rgba(2,5,12,.18) 48%, rgba(2,5,12,.64)),
    radial-gradient(ellipse at center, transparent 38%, rgba(1,3,8,.34));
  backdrop-filter: saturate(.78);
}
.narration-overlay[hidden] { display: none; }

.narration-card {
  position: relative;
  width: min(850px, 78%);
  min-height: clamp(145px, 20vh, 210px);
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.7rem) clamp(1.2rem, 3vw, 3rem) 1rem;
  border: 1px solid rgba(210,190,153,.45);
  border-radius: .18rem;
  background:
    linear-gradient(105deg, rgba(8,11,20,.97), rgba(20,21,29,.94)),
    #090d18;
  box-shadow: 0 22px 70px rgba(0,0,0,.7), inset 0 0 40px rgba(223,190,125,.035);
  text-align: center;
}
.narration-card::before,
.narration-card::after {
  content: "";
  position: absolute;
  top: .48rem;
  bottom: .48rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(232,200,140,.45), transparent);
}
.narration-card::before { left: .55rem; }
.narration-card::after { right: .55rem; }

.narration-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--gold);
  font-size: .55rem;
  opacity: .75;
}
.narration-ornament i { width: 18%; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.narration-ornament i:last-child { transform: scaleX(-1); }
.narration-speaker { margin: .65rem 0 .45rem; color: #c8b38b; font-size: clamp(.48rem,.6vw,.68rem); font-weight: 700; letter-spacing: .22em; }
.narration-text {
  min-height: 2.8em;
  margin: 0 auto;
  max-width: 44rem;
  color: #f1eadf;
  font: 500 clamp(.88rem,1.35vw,1.45rem)/1.45 Cinzel,serif;
  text-wrap: balance;
}
.narration-card[data-voice="thought"] .narration-speaker { color: #dba96e; }
.narration-card[data-voice="thought"] .narration-text { font-style: italic; color: #fff2dc; }
.narration-card[data-voice="thought"] .narration-text::before { content: "«"; color: #c69c6b; }
.narration-card[data-voice="thought"] .narration-text::after { content: "»"; color: #c69c6b; }
.narration-card[data-voice="guardian"] { border-color: rgba(147, 115, 180, .58); background: linear-gradient(105deg, rgba(8,8,18,.98), rgba(27,17,39,.96)); }
.narration-card[data-voice="guardian"] .narration-speaker { color: #b897d5; }
.narration-card[data-voice="guardian"] .narration-text { color: #e5d9ef; letter-spacing: .035em; }

.narration-card button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: .8rem auto 0;
  border: 0;
  border-bottom: 1px solid rgba(240,184,109,.7);
  padding: .25rem .1rem;
  background: transparent;
  color: #e2bf85;
  font-size: clamp(.48rem,.58vw,.66rem);
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
}
.narration-card button small { color: #8f96a2; font-size: .9em; letter-spacing: .06em; }

.move-help {
  position: absolute;
  z-index: 20;
  right: 3%;
  bottom: 2.4%;
  display: flex;
  gap: 1rem;
  color: rgba(240,240,240,.68);
  font-size: clamp(.45rem, .58vw, .66rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 2px 6px #000;
}

.touch-controls { display: none; }

/* Corridor scenario */

.corridor-only { display: none; }
.explore-screen.is-corridor .corridor-only { display: block; }
.explore-screen.is-corridor #dani,
.explore-screen.is-corridor #bea,
.explore-screen.is-corridor #school-clock,
.explore-screen.is-corridor .ground-marker,
.explore-screen.is-corridor .rain-motes { display: none; }
.explore-screen.is-corridor .scene-grade {
  background:
    linear-gradient(180deg, rgba(4,8,14,.08), transparent 45%, rgba(2,5,10,.34)),
    radial-gradient(ellipse at center, transparent 62%, rgba(2,5,11,.36));
}

.corridor-hotspot {
  position: absolute;
  z-index: 12;
  border: 1px solid rgba(210,190,153,.5);
  border-radius: .18rem;
  background: linear-gradient(145deg, rgba(38,31,24,.9), rgba(10,14,20,.88));
  box-shadow: 0 5px 14px rgba(0,0,0,.46), inset 0 0 12px rgba(226,190,124,.06);
  color: #e8dcc9;
  cursor: pointer;
  transition: opacity .2s, border-color .2s, filter .2s;
}
.corridor-hotspot span { display: block; font-size: clamp(.45rem,.57vw,.65rem); font-weight: 700; letter-spacing: .11em; }
.corridor-hotspot small { display: block; margin-top: .15rem; color: #a8a193; font-size: clamp(.38rem,.44vw,.5rem); letter-spacing: .06em; }
.corridor-hotspot:hover { border-color: var(--gold); }
.corridor-map { left: 30.8%; top: 34%; width: 10%; min-height: 8%; transform: translate(-50%,-50%) perspective(180px) rotateY(4deg); }
.laboratory-door { left: 88%; top: 42%; width: 10%; min-height: 8%; transform: translate(-50%,-50%) perspective(180px) rotateY(-4deg); }
.classroom-exit { left: 9%; top: 39%; width: 11%; min-height: 6%; transform: translate(-50%,-50%); }

.concierge {
  left: 73%;
  top: 57%;
  z-index: 112;
  width: clamp(52px,5.6vw,106px);
  aspect-ratio: .55;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%,-100%);
  filter: drop-shadow(0 9px 6px rgba(0,0,0,.44));
  cursor: pointer;
}
.concierge img { transform-origin: 50% 100%; animation: concierge-idle 3.8s ease-in-out infinite; }

.explore-screen.is-corridor:not(.corridor-route-seen) .laboratory-door { border-color: rgba(240,184,109,.8); box-shadow: 0 0 18px rgba(240,184,109,.2), inset 0 0 12px rgba(226,190,124,.08); }
.explore-screen.is-corridor:not(.corridor-solved) .classroom-exit { opacity: .42; }
.explore-screen.is-corridor.corridor-solved .classroom-exit { border-color: var(--gold); box-shadow: 0 0 18px rgba(240,184,109,.22); animation: marker-pulse 1.4s ease-in-out infinite; }

.schedule-phone {
  position: absolute;
  z-index: 25;
  right: 3.2%;
  top: 13.5%;
  min-width: clamp(110px,11vw,180px);
  border: 1px solid rgba(144,168,194,.46);
  border-radius: .3rem;
  padding: .55rem .75rem;
  background: linear-gradient(120deg,rgba(7,13,24,.92),rgba(20,29,41,.85));
  color: #dbe5ee;
  text-align: left;
  cursor: pointer;
}
.schedule-phone span { display:block; font-size:clamp(.48rem,.58vw,.66rem); font-weight:700; letter-spacing:.12em; }
.schedule-phone small { color:#95a4b5; font-size:clamp(.4rem,.48vw,.55rem); }
.schedule-phone:disabled { opacity:.35; cursor:not-allowed; }
.schedule-phone:not(:disabled) { border-color:rgba(117,167,199,.76); box-shadow:0 0 16px rgba(117,167,199,.15); }

.scenario-complete.is-corridor-complete #restart-scenario { border-color: var(--gold); background: rgba(105,72,40,.7); }

/* Classroom door scenario */

.classroom-only { display: none; }
.explore-screen.is-classroom .classroom-only { display: block; }
.explore-screen.is-classroom #dani,
.explore-screen.is-classroom #bea,
.explore-screen.is-classroom #school-clock,
.explore-screen.is-classroom .corridor-only,
.explore-screen.is-classroom .ground-marker,
.explore-screen.is-classroom .rain-motes { display: none; }
.explore-screen.is-classroom .scene-background { object-position: center; transition: transform 1s ease, filter 1s ease; }
.explore-screen.is-classroom .scene-grade {
  background:
    linear-gradient(180deg, rgba(7,10,25,.12), transparent 46%, rgba(3,5,14,.34)),
    radial-gradient(ellipse at 66% 45%, rgba(239,180,99,.1), transparent 22%, rgba(4,6,18,.24) 67%);
}
.explore-screen.is-classroom.classroom-entered .scene-background { transform: scale(1.055); filter: saturate(1.08) brightness(1.03); }

.classroom-entry {
  position: absolute;
  z-index: 14;
  left: 66%;
  top: 43%;
  width: 13%;
  height: 31%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(228,193,131,.28);
  border-radius: .15rem;
  background: linear-gradient(180deg,rgba(239,190,107,.03),rgba(19,11,8,.08));
  color: #f5dfb8;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, opacity .4s;
}
.classroom-entry span { position:absolute; top:-2.25rem; left:50%; transform:translateX(-50%); padding:.35rem .65rem; border:1px solid rgba(215,186,132,.55); background:rgba(8,11,20,.82); font:700 clamp(.64rem,.85vw,.95rem) Cinzel,serif; letter-spacing:.14em; }
.classroom-entry small { position:absolute; bottom:-1.6rem; left:50%; transform:translateX(-50%); font-size:.46rem; letter-spacing:.18em; opacity:.65; }
.classroom-entry:hover { border-color:var(--gold); box-shadow:0 0 28px rgba(239,181,101,.18), inset 0 0 22px rgba(239,181,101,.06); }
.explore-screen.is-classroom.classroom-near-door .classroom-entry { border-color:var(--gold); box-shadow:0 0 28px rgba(239,181,101,.18); animation: classroom-door-pulse 1.6s ease-in-out infinite; }
.explore-screen.is-classroom.classroom-entered .classroom-entry { opacity:0; pointer-events:none; }

.guardian-echo {
  position:absolute;
  z-index:11;
  left:66%;
  top:29%;
  transform:translate(-50%,-50%);
  color:rgba(97,75,132,.0);
  font:600 clamp(.52rem,.72vw,.8rem) Cinzel,serif;
  letter-spacing:.24em;
  text-shadow:0 0 12px rgba(96,52,153,.4);
  pointer-events:none;
  transition:color .5s;
}
.explore-screen.is-classroom.is-checking-time .guardian-echo { color:rgba(164,133,206,.72); animation: guardian-echo 1.8s ease forwards; }

.classroom-character {
  position:absolute;
  z-index:126;
  opacity:0;
  transform:translate(-50%,-96%) scale(.88);
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 7px rgba(0,0,0,.48));
  pointer-events:none;
  transition:opacity .7s ease .2s, transform .8s ease .15s;
}
.classroom-character img { display:block; width:100%; height:100%; object-fit:contain; object-position:bottom; }
.profesora-vega { left:44%; top:68%; width:clamp(58px,6.2vw,116px); aspect-ratio:.56; }
.noa { left:76%; top:62%; z-index:118; width:clamp(49px,5.2vw,98px); aspect-ratio:.57; }
.explore-screen.is-classroom.classroom-entered .classroom-character { opacity:1; transform:translate(-50%,-100%) scale(1); }

.classroom-choice-panel {
  position:absolute;
  z-index:65;
  left:7%;
  right:7%;
  bottom:6.5%;
  padding:clamp(.85rem,1.4vw,1.25rem);
  border:1px solid rgba(211,190,151,.46);
  border-radius:.35rem;
  background:linear-gradient(110deg,rgba(6,10,21,.97),rgba(18,22,34,.94));
  box-shadow:0 20px 60px rgba(0,0,0,.62), inset 0 0 28px rgba(219,184,120,.035);
  text-align:center;
}
.classroom-choice-panel[hidden] { display:none; }
.classroom-choice-panel h2 { margin:.15rem 0 .8rem; font:600 clamp(1rem,1.7vw,1.65rem) Cinzel,serif; }
.classroom-choice-panel > div { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.classroom-choice-panel button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.2rem .6rem; min-height:4.3rem; border:1px solid rgba(148,160,182,.34); border-radius:.28rem; padding:.6rem .7rem; background:rgba(12,19,32,.9); color:#eee7dd; text-align:left; cursor:pointer; }
.classroom-choice-panel button:hover,.classroom-choice-panel button:focus-visible { border-color:var(--gold); background:rgba(58,43,29,.86); outline:none; }
.classroom-choice-panel kbd { grid-row:1/3; color:var(--gold); font-size:.75rem; }
.classroom-choice-panel strong { font-size:clamp(.55rem,.67vw,.75rem); letter-spacing:.09em; }
.classroom-choice-panel span { color:#9ca5b2; font-size:clamp(.46rem,.54vw,.62rem); }
.scenario-complete.is-classroom-complete #restart-scenario { border-color:var(--gold); background:rgba(105,72,40,.7); }

/* Pair activity scenario */

.activity-only { display:none; }
.explore-screen.is-activity .activity-only { display:block; }
.explore-screen.is-activity #dani,
.explore-screen.is-activity #bea,
.explore-screen.is-activity #school-clock,
.explore-screen.is-activity .corridor-only,
.explore-screen.is-activity .classroom-entry,
.explore-screen.is-activity .guardian-echo,
.explore-screen.is-activity .ground-marker,
.explore-screen.is-activity .rain-motes,
.explore-screen.is-activity .move-help,
.explore-screen.is-activity .touch-controls { display:none; }
.explore-screen.is-activity .scene-grade {
  background:
    linear-gradient(180deg,rgba(5,8,16,.04),transparent 52%,rgba(3,5,12,.3)),
    radial-gradient(ellipse at 52% 66%,rgba(239,183,103,.08),transparent 28%,rgba(5,7,16,.2) 78%);
}
.explore-screen.is-activity .classroom-character {
  display:block;
  opacity:1;
  transform:translate(-50%,-100%) scale(1);
}
.explore-screen.is-activity .profesora-vega { left:63%; top:53%; z-index:108; width:clamp(50px,5.3vw,100px); }
.explore-screen.is-activity .noa { left:58%; top:76%; z-index:132; width:clamp(57px,6vw,112px); }
.explore-screen.is-activity #alex-walker { filter:drop-shadow(0 10px 7px rgba(0,0,0,.52)); }

.worksheet-marker {
  position:absolute;
  z-index:136;
  left:50%;
  top:67%;
  width:clamp(120px,16vw,250px);
  transform:translate(-50%,-50%) perspective(260px) rotateX(58deg) rotateZ(-2deg);
  border:1px solid rgba(104,82,52,.7);
  border-radius:.12rem;
  padding:.55rem .7rem;
  background:linear-gradient(145deg,#eee2c8,#c8b48e);
  box-shadow:0 8px 16px rgba(0,0,0,.36);
  color:#443722;
  text-align:center;
}
.worksheet-marker span { display:block; font:700 clamp(.45rem,.55vw,.64rem) Cinzel,serif; letter-spacing:.1em; }
.worksheet-marker small { display:block; margin-top:.18rem; font-size:clamp(.34rem,.41vw,.48rem); letter-spacing:.05em; }
.explore-screen.is-activity.activity-started .worksheet-marker { border-color:rgba(104,139,117,.8); }
.scenario-complete.is-activity-complete #restart-scenario { border-color:var(--gold); background:rgba(105,72,40,.7); }

/* Break scenario */

.explore-screen.is-break #school-clock,
.explore-screen.is-break .corridor-only,
.explore-screen.is-break .classroom-entry,
.explore-screen.is-break .profesora-vega,
.explore-screen.is-break .guardian-echo,
.explore-screen.is-break .activity-only,
.explore-screen.is-break .ground-marker,
.explore-screen.is-break .move-help,
.explore-screen.is-break .touch-controls { display:none; }
.explore-screen.is-break .rain-motes { display:block; opacity:.28; }
.explore-screen.is-break .scene-background { object-position:center 56%; filter:saturate(1.04) brightness(1.04); }
.explore-screen.is-break .scene-grade {
  background:
    linear-gradient(180deg,rgba(7,11,18,.02),transparent 48%,rgba(4,7,12,.23)),
    radial-gradient(ellipse at 58% 55%,rgba(255,199,111,.11),transparent 30%,rgba(7,10,17,.13) 78%);
}
.explore-screen.is-break #dani { left:69%; top:58%; width:clamp(64px,6.8vw,128px); z-index:116; }
.explore-screen.is-break #bea { left:81%; top:61%; width:clamp(60px,6.4vw,120px); z-index:122; }
.explore-screen.is-break .classroom-character.noa {
  display:block;
  left:35%;
  top:72%;
  z-index:135;
  width:clamp(58px,6.2vw,116px);
  opacity:1;
  transform:translate(-50%,-100%) scale(1);
}
.explore-screen.is-break #alex-walker { filter:drop-shadow(0 10px 7px rgba(0,0,0,.52)); }
.explore-screen.is-break.break-grouped #alex-walker { transition:left .9s ease, top .9s ease, transform .9s ease; }
.explore-screen.is-break.break-grouped .noa { left:59%; top:67%; transition:left .9s ease, top .9s ease; }
.scenario-complete.is-break-complete #restart-scenario { border-color:var(--gold); background:rgba(105,72,40,.7); }

.scenario-complete {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 43%, rgba(91, 70, 42, .25), transparent 30%),
    linear-gradient(180deg, rgba(3, 7, 14, .72), rgba(3, 7, 14, .96));
  backdrop-filter: blur(5px) saturate(.72);
  text-align: center;
}
.scenario-complete[hidden] { display: none; }
.scenario-complete h2 { margin: .15rem 0; color: #fff0cf; font: 600 clamp(2.1rem, 5vw, 5.5rem)/1 Cinzel, serif; letter-spacing: .04em; text-shadow: 0 5px 25px #000; }
.scenario-complete > p:not(.eyebrow) { color: #bbc1c9; font: 500 clamp(.75rem, 1vw, 1.05rem) Cinzel, serif; }
.scenario-complete > div { display: flex; gap: .6rem; margin-top: 1rem; }
.scenario-complete button { border: 1px solid var(--line); border-radius: .3rem; padding: .72rem 1rem; background: rgba(18, 27, 42, .9); color: #e8dfd2; font-size: .65rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.scenario-complete button:first-child { border-color: var(--gold); background: rgba(105,72,40,.7); }

/* Battle */

.battle-background { transform: scale(1.045); filter: saturate(.72) brightness(.52) blur(1px); }
.battle-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 46%, rgba(100,67,163,.38), transparent 34%),
    radial-gradient(circle at 27% 62%, rgba(111,72,183,.2), transparent 23%),
    linear-gradient(180deg, rgba(3,8,18,.2), rgba(1,5,13,.57) 70%, rgba(2,4,10,.88));
}
.battle-screen::before,
.battle-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(159,137,211,.32) 0 1px, transparent 1.5px);
  background-size: 67px 67px;
  opacity: .28;
  animation: battle-drift 13s linear infinite;
}
.battle-screen::after { background-size: 103px 103px; opacity: .15; animation-duration: 19s; animation-direction: reverse; }

.turn-order {
  position: absolute;
  z-index: 15;
  top: 3.2%;
  left: 3.2%;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.order-label { font-size: clamp(.5rem,.62vw,.7rem); font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.turn-order ol { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.turn-chip {
  display: flex;
  align-items: center;
  gap: .25rem;
  height: clamp(30px,3.2vw,48px);
  min-width: clamp(62px,6.3vw,96px);
  border: 1px solid rgba(255,255,255,.2);
  transform: skewX(-10deg);
  padding: .2rem .45rem;
  background: rgba(7,12,23,.78);
  color: #aeb5c1;
  font-size: clamp(.45rem,.52vw,.6rem);
  font-weight: 700;
  letter-spacing: .06em;
}
.turn-chip > * { transform: skewX(10deg); }
.turn-chip img { width: 26%; height: 120%; object-fit: contain; }
.turn-chip.is-current { border-color: var(--gold); background: rgba(70,43,27,.85); color: #fff0d5; }

.battlefield { position: absolute; z-index: 5; inset: 10% 4% 30%; }
.enemy-unit, .hero-unit { position: absolute; transform-origin: 50% 100%; }
.enemy-unit { left: 7%; bottom: 1%; width: clamp(220px, 27vw, 490px); aspect-ratio: .62; }
.enemy-unit > img { position: absolute; inset: 9% 5% 0; width: 90%; height: 91%; object-fit: contain; filter: drop-shadow(0 10px 10px #050715); }
.hero-unit { right: 18%; bottom: 1%; width: clamp(92px, 10vw, 180px); aspect-ratio: .57; }
.hero-unit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 10px #050715); }
.enemy-unit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% -10% -4%;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(131,78,210,.26), rgba(64,43,116,.09) 43%, transparent 70%);
  filter: blur(10px);
  animation: guardian-aura 3.6s ease-in-out infinite;
}
.enemy-unit:not(.is-broken) > img { animation: guardian-idle 3.6s ease-in-out infinite; }
.hero-unit:not(.is-acting) > img { animation: hero-idle 2.8s ease-in-out infinite; }
.hero-unit.is-acting > img { animation: hero-response .48s cubic-bezier(.2,.8,.25,1); }
.hero-unit.is-acting::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  bottom: 4%;
  aspect-ratio: 1;
  border: 2px solid rgba(250,207,126,.76);
  border-radius: 50%;
  animation: response-ring .5s ease-out forwards;
}
.hero-unit[data-action="breathe"]::after { border-color: rgba(119,198,201,.82); }
.hero-unit[data-action="observe"]::after { border-color: rgba(117,167,199,.88); }
.hero-unit[data-action="reframe"]::after { border-color: rgba(250,207,126,.9); }
.hero-unit[data-action="reach"]::after { border-color: rgba(137,199,160,.88); }
.unit-shadow { bottom: 1%; height: 9%; }

.enemy-card {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -3%;
  min-width: 48%;
  transform: translateX(-50%);
  text-align: center;
  filter: drop-shadow(0 3px 5px #000);
}
.enemy-card p { margin: 0; font: 600 clamp(.7rem,1vw,1.05rem) Cinzel,serif; letter-spacing: .08em; }
.enemy-card > div:first-child > span { color: #b8b1c5; font-size: clamp(.46rem,.54vw,.62rem); letter-spacing: .17em; }
.shield-row { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: .3rem; }
.shield-row b {
  display: grid;
  place-items: center;
  width: 1.8rem;
  aspect-ratio: .82;
  clip-path: polygon(50% 0,100% 28%,86% 82%,50% 100%,14% 82%,0 28%);
  background: #e9e3d8;
  color: #171927;
  font-size: .8rem;
}
.shield-pips { display: flex; gap: .2rem; }
.shield-pips i { width: clamp(8px,.7vw,12px); aspect-ratio: 1; rotate: 45deg; border: 1px solid #e8e4db; background: rgba(232,228,219,.72); }
.shield-pips i.is-empty { background: rgba(255,255,255,.08); opacity: .36; }
.weaknesses { display: flex; justify-content: center; gap: .18rem; margin-top: .35rem; }
.weaknesses span {
  display: grid;
  place-items: center;
  width: clamp(21px,1.8vw,30px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(5,9,18,.8);
  color: #b8bdc9;
  font-size: clamp(.58rem,.72vw,.8rem);
  font-weight: 700;
}
.weaknesses span.is-known { border-color: var(--gold); color: #ffe2a8; }
.weaknesses [data-weak="observe"].is-known::before { content: "◉"; }
.weaknesses [data-weak="reframe"].is-known::before { content: "◇"; }
.weaknesses [data-weak="breathe"].is-known::before { content: "≈"; }
.weaknesses [data-weak="reach"].is-known::before { content: "∞"; }
.weaknesses span.is-known { font-size: 0; }
.weaknesses span.is-known::before { font-size: .78rem; }

.enemy-unit.is-hit > img { animation: enemy-hit .32s steps(2); }
.enemy-unit.is-broken > img { filter: grayscale(.3) brightness(.78) drop-shadow(0 8px 8px #050715); transform: rotate(-3deg) translateY(4%); }
.break-label {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%) rotate(-5deg);
  margin: 0;
  padding: .18rem .55rem;
  border: 2px solid #fff0c9;
  background: rgba(99,48,37,.88);
  color: #fff6dd;
  font: 700 clamp(.8rem,1.3vw,1.5rem) Cinzel,serif;
  letter-spacing: .12em;
}

.status-panel {
  position: absolute;
  z-index: 18;
  top: 4%;
  right: 3.3%;
  width: clamp(170px,16vw,280px);
  border-left: 1px solid rgba(255,255,255,.2);
  padding: .5rem .8rem;
  background: linear-gradient(90deg,rgba(4,8,17,.7),rgba(4,8,17,.25));
  text-shadow: 0 2px 6px #000;
}
.status-name { display: flex; justify-content: space-between; align-items: baseline; font-family: Cinzel,serif; }
.status-name strong { font-size: clamp(.72rem,1vw,1.05rem); }
.status-name span, .meter-line span, .boost-points span { color: #c7cbd1; font-size: clamp(.44rem,.5vw,.58rem); letter-spacing: .1em; }
.meter-line { display: grid; grid-template-columns: 3.5rem 2rem 1fr; align-items: center; margin-top: .38rem; }
.meter-line b { font-size: clamp(.58rem,.7vw,.78rem); font-weight: 600; }
.meter-line > div { height: .35rem; background: rgba(255,255,255,.15); transform: skewX(-12deg); }
.meter-line i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#6da887,#b2d792); transition: width .35s; }
.meter-line.noise i { background: linear-gradient(90deg,#6d5799,#ad7ab8); }
.boost-points { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; }
.boost-points span { margin-right: auto; }
.boost-points i { width: clamp(8px,.65vw,11px); aspect-ratio: 1; border: 1px solid #d8b474; border-radius: 50%; background: rgba(255,255,255,.08); }
.boost-points i.is-full { background: #f2bd6e; box-shadow: 0 0 8px rgba(242,189,110,.7); }
.boost-points i.is-spent { transform: scale(1.5); background: #fff0bd; }

.command-panel {
  position: absolute;
  z-index: 20;
  left: 2.5%;
  right: 2.5%;
  bottom: 2.5%;
  min-height: 28%;
  display: grid;
  grid-template-columns: 34% 66%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: linear-gradient(120deg,rgba(5,10,22,.96),rgba(13,18,31,.93));
  box-shadow: 0 15px 50px rgba(0,0,0,.6), inset 0 0 35px rgba(116,153,189,.05);
}
.battle-message { padding: .8rem 1.1rem; border-right: 1px solid rgba(255,255,255,.14); }
.battle-message > p:not(.speaker) { margin: .1rem 0; }
#battle-line { min-height: 2.9em; font: 500 clamp(.75rem,1vw,1.07rem)/1.34 Cinzel,serif; }
.battle-effect { color: #aeb7c6; font-size: clamp(.53rem,.66vw,.75rem); line-height: 1.4; }
.battle-controls { display: grid; grid-template-columns: 25% 75%; min-width: 0; }
.boost-control { padding: .8rem; border-right: 1px solid rgba(255,255,255,.12); }
.boost-control button {
  width: 100%;
  border: 1px solid rgba(242,189,110,.36);
  border-radius: .25rem;
  padding: .55rem .4rem;
  background: rgba(98,69,38,.24);
  color: #efd5a1;
  font-size: clamp(.46rem,.58vw,.65rem);
  font-weight: 700;
  cursor: pointer;
}
.boost-control button.is-active { background: rgba(166,104,43,.52); box-shadow: inset 0 0 15px rgba(255,211,133,.17),0 0 14px rgba(242,189,110,.2); }
.boost-control kbd { display: block; width: fit-content; margin: 0 auto .3rem; }
.boost-control strong { display: block; margin-top: .25rem; font-size: clamp(.85rem,1.15vw,1.3rem); }
.boost-control p { color: #969fac; font-size: clamp(.46rem,.55vw,.63rem); line-height: 1.35; }
.battle-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: .45rem; padding: .65rem; }
.battle-actions button {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(194,210,231,.32);
  border-radius: .25rem;
  padding: .45rem .6rem;
  background: rgba(26,34,51,.72);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.battle-actions button:hover:not(:disabled) { border-color: var(--gold); background: rgba(66,55,48,.78); transform: translateY(-1px); }
.battle-actions button:disabled, #boost-button:disabled { cursor: wait; opacity: .48; }
.battle-actions small { color: var(--gold); font-weight: 700; }
.battle-actions b { font-size: clamp(.56rem,.72vw,.82rem); letter-spacing: .06em; }
.battle-actions span { color: #909aa9; font-size: clamp(.45rem,.53vw,.6rem); }
.battle-actions button.is-weak { border-color: rgba(242,189,110,.55); }
.battle-actions button.is-discovered::after { content: "EFICAZ"; position:absolute; top:.17rem; right:.3rem; color:var(--gold); font-size:.38rem; letter-spacing:.08em; }

.result-panel {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  background: radial-gradient(circle,rgba(22,31,49,.91),rgba(3,7,15,.97));
  text-align: center;
}
.result-panel[hidden] { display: none; }
.result-panel h2 { max-width: 38rem; margin: .3rem 0; font: 600 clamp(1.25rem,2.3vw,2.7rem)/1.2 Cinzel,serif; }
.result-panel > p:not(.eyebrow) { color: #b8c0cc; }
.result-panel button { min-width: 13rem; margin-top: .5rem; border: 1px solid var(--line); border-radius: .3rem; padding: .75rem 1rem; background: rgba(28,36,53,.9); font-size: .7rem; font-weight: 700; letter-spacing: .08em; cursor:pointer; }
.result-panel button:first-of-type { border-color: var(--gold); background: rgba(105,72,40,.7); }

@keyframes sprite-walk {
  0%, 24.99% { background-position-x: 0%; }
  25%, 49.99% { background-position-x: 33.333%; }
  50%, 74.99% { background-position-x: 66.667%; }
  75%, 99.99% { background-position-x: 100%; }
  100% { background-position-x: 0%; }
}
@keyframes sprite-walk-side {
  0% { background-position-x: 0%; transform: scaleX(var(--alex-facing)); }
  16.6667% { background-position-x: 20%; transform: scaleX(var(--alex-facing)); }
  33.3333% { background-position-x: 40%; transform: scaleX(var(--alex-facing)); }
  50% { background-position-x: 60%; transform: scaleX(var(--alex-facing)); }
  66.6667% { background-position-x: 80%; transform: scaleX(var(--alex-facing)); }
  83.3333% { background-position-x: 100%; transform: scaleX(var(--alex-facing)); }
  100% { background-position-x: 0%; transform: scaleX(var(--alex-facing)); }
}
@keyframes dani-idle { 50% { transform: translateY(-1.2%) scaleY(1.008); } }
@keyframes bea-idle { 45% { transform: translateY(-.8%) rotate(.35deg); } 55% { transform: translateY(-.8%) rotate(-.25deg); } }
@keyframes concierge-idle { 50% { transform: translateY(-.7%) scaleY(1.004); } }
@keyframes friends-leave { to { transform: translate(36%, -112%) scale(.82); opacity: 0; filter: blur(1px); } }
@keyframes motes-drift { to { transform: translate3d(3%, -5%, 0); } }
@keyframes battle-drift { to { transform: translate3d(6%, -8%, 0) rotate(2deg); } }
@keyframes guardian-idle { 50% { transform: translateY(-.7%); filter: brightness(1.1) drop-shadow(0 15px 16px rgba(28,13,52,.9)); } }
@keyframes guardian-aura { 50% { transform: scale(1.035); opacity: .68; filter: blur(14px); } }
@keyframes hero-idle { 50% { transform: translateY(-1.2%); } }
@keyframes hero-response { 45% { transform: translateX(-7%) scale(1.04); filter: brightness(1.35) drop-shadow(0 0 18px rgba(240,184,109,.5)); } }
@keyframes response-ring { from { transform:scale(.2); opacity:1; } to { transform:scale(1.4); opacity:0; } }
@keyframes marker-pulse { 50% { transform: scale(1.12); opacity:.55; } }
@keyframes enemy-hit { 33% { transform: translateX(-4%); filter: brightness(1.5); } 66% { transform: translateX(3%); } }
@keyframes classroom-door-pulse { 50% { box-shadow:0 0 36px rgba(239,181,101,.3), inset 0 0 25px rgba(239,181,101,.08); } }
@keyframes guardian-echo { 0% { opacity:0; letter-spacing:.34em; } 28% { opacity:1; } 100% { opacity:0; letter-spacing:.5em; } }

@media (max-aspect-ratio: 4/3) {
  .game { width: 100vw; min-height: 100svh; aspect-ratio: auto; }
  .scene-background { object-position: center; }
  .command-panel { grid-template-columns: 1fr; min-height: 35%; }
  .battle-message { min-height: 7rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .battlefield { bottom: 38%; }
  .enemy-unit { left: 1%; width: 44vw; }
  .hero-unit { right: 9%; width: 24vw; }
  .status-panel { top: 10%; }
  .move-help { display: none; }
  .prototype-tools { flex-direction: column; }
  .prototype-jump { padding: .5rem .7rem; }
  .narration-overlay { padding: 0 4% 18%; }
  .narration-card { width: 100%; }
  .classroom-choice-panel { left:4%; right:4%; bottom:17%; }
  .explore-screen.is-classroom .scene-background { object-position:66% center; }
  .classroom-choice-panel > div { grid-template-columns:1fr; }
  .classroom-choice-panel button { min-height:3.1rem; }
  .profesora-vega { left:42%; width:15vw; }
  .noa { left:77%; width:13vw; }
  .explore-screen.is-activity .scene-background { object-position:52% center; }
  .explore-screen.is-activity .profesora-vega { left:72%; top:49%; width:13vw; }
  .explore-screen.is-activity .noa { left:63%; top:72%; width:16vw; }
  .explore-screen.is-break #dani { left:72%; top:55%; width:16vw; }
  .explore-screen.is-break #bea { left:85%; top:58%; width:15vw; }
  .explore-screen.is-break .classroom-character.noa { left:39%; top:70%; width:15vw; }
  .explore-screen.is-break.break-grouped .noa { left:61%; top:66%; }
  .worksheet-marker { left:49%; top:68%; width:34vw; }
  .welcome-background { object-position:62% center; }
  .welcome-depth { background:linear-gradient(180deg,rgba(3,6,13,.22),rgba(3,6,13,.7) 55%,rgba(2,4,9,.94)),radial-gradient(ellipse at 66% 34%,rgba(248,190,103,.15),transparent 31%); }
  .welcome-content { left:5%; top:61%; width:90%; }
  .welcome-hero { right:18%; bottom:27%; width:42vw; height:55%; opacity:.82; }
  .welcome-kicker { margin-bottom:.55rem; }
  .welcome-copy { margin:.8rem auto 1rem; }
  .welcome-footer { font-size:.42rem; }
  .touch-controls {
    position: absolute;
    z-index: 28;
    left: 1rem;
    bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3,2.7rem);
    grid-template-rows: repeat(2,2.7rem);
    gap: .2rem;
  }
  .touch-controls button { border:1px solid rgba(255,255,255,.28); border-radius:.45rem; background:rgba(4,9,18,.7); }
  .touch-controls [data-move="up"] { grid-column:2; }
  .touch-controls [data-move="left"] { grid-column:1; grid-row:2; }
  .touch-controls [data-move="down"] { grid-column:2; grid-row:2; }
  .touch-controls [data-move="right"] { grid-column:3; grid-row:2; }
  .touch-controls .touch-interact { position:absolute; left:10rem; bottom:0; width:3.4rem; height:3.4rem; border-radius:50%; color:var(--gold); font-weight:700; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}