:root {
  color-scheme: dark;
  --bg: #050b17;
  --panel: #0b1628;
  --panel-2: #101f35;
  --line: rgba(116, 225, 255, .2);
  --cyan: #6ee7ff;
  --mint: #70f0c1;
  --gold: #ffd166;
  --pink: #ff79b9;
  --red: #ff496c;
  --violet: #a787ff;
  --text: #f3f8ff;
  --muted: #91a6c3;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  min-width: 300px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(36, 91, 140, .26), transparent 34rem),
    radial-gradient(circle at 90% 15%, rgba(118, 36, 116, .18), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: -4rem; left: 1rem; padding: .75rem 1rem; background: white; color: #071224; }
.skip-link:focus { top: 1rem; }

.title-screen {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: end center;
  min-height: 100svh;
  overflow: hidden;
  background: #071224;
  transition: opacity 500ms ease, visibility 500ms ease;
}
.title-screen.is-leaving { visibility: hidden; opacity: 0; }
.title-screen img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  animation: title-push 14s ease-out both;
}
.title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 18, .08) 15%, rgba(2, 7, 18, .26) 55%, rgba(3, 8, 20, .96) 92%),
    linear-gradient(90deg, rgba(2, 7, 18, .55), transparent 40%, rgba(2, 7, 18, .28));
}
.title-content {
  position: relative;
  width: min(92%, 48rem);
  padding: 3rem 1rem max(2.5rem, calc(1.5rem + var(--safe-bottom)));
  text-align: center;
  text-shadow: 0 2px 12px #000;
}
.kicker, .dialog-speaker, .mission-label {
  margin: 0;
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.title-content h1 {
  margin: .25rem 0 .55rem;
  font-size: clamp(3.2rem, 11vw, 7.6rem);
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.title-content h1 span { display: block; color: var(--gold); }
.title-copy { max-width: 35rem; margin: 0 auto 1.35rem; color: #deebff; font-size: clamp(.98rem, 2.3vw, 1.22rem); line-height: 1.45; }
.primary-button {
  min-height: 3.4rem;
  padding: .85rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .75rem;
  color: #06101e;
  background: linear-gradient(135deg, var(--gold), #ff9d55);
  box-shadow: 0 .35rem 1.5rem rgba(255, 187, 78, .25), inset 0 1px rgba(255,255,255,.7);
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button:active { transform: translateY(1px); }
.story-replay-button, .story-skip {
  min-height: 2.4rem;
  margin-left: .55rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .6rem;
  color: #dce9f9;
  background: rgba(6, 15, 31, .62);
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}
.story-replay-button:hover, .story-skip:hover { border-color: var(--cyan); color: white; }
.control-note { margin: .85rem 0 0; color: #a7b8d0; font-size: .72rem; }

.prologue {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: grid;
  min-height: 100svh;
  place-items: end center;
  overflow: hidden;
  background: #030712;
}
.prologue-art {
  position: absolute;
  inset: 0;
  background-image: url("assets/creator-quest-key-art.png");
  background-size: cover;
  background-position: 50% 48%;
  transition: background-position 700ms ease, filter 700ms ease, transform 700ms ease;
  transform: scale(1.03);
}
.prologue[data-scene="artifact"] .prologue-art { background-position: 18% 34%; filter: saturate(.7) brightness(.72); }
.prologue[data-scene="tower"] .prologue-art { background-position: 0% 12%; filter: saturate(1.15) brightness(.82); }
.prologue[data-scene="boar"] .prologue-art { background-position: 92% 10%; filter: saturate(1.25) brightness(.65); transform: scale(1.12); }
.prologue[data-scene="workshop"] .prologue-art { background-position: 28% 72%; filter: saturate(.95) brightness(.7); }
.prologue[data-scene="cores"] .prologue-art { background-position: 48% 52%; filter: saturate(1.35) brightness(.55) hue-rotate(8deg); }
.prologue[data-scene="pig"] .prologue-art { background-position: 48% 73%; filter: saturate(1.08) brightness(.73); transform: scale(1.08); }
.prologue::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(2,5,13,.04) 0, rgba(2,5,13,.17) 42%, rgba(2,6,15,.96) 82%, #02060f 100%);
}
.prologue-glitch { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.prologue-glitch::before, .prologue-glitch::after {
  position: absolute;
  width: 100%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(110,231,255,.75), transparent);
  opacity: .35;
  animation: story-scan 5s linear infinite;
}
.prologue-glitch::after { animation-delay: -2.5s; background: linear-gradient(90deg, transparent, rgba(255,73,108,.65), transparent); }
.prologue-content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 2rem), 48rem);
  margin-bottom: max(1.2rem, var(--safe-bottom));
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid rgba(110,231,255,.28);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(10,23,41,.94), rgba(3,9,20,.96));
  box-shadow: 0 1rem 5rem rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
.prologue-progress { display: flex; gap: .35rem; margin-bottom: 1rem; }
.prologue-progress i { height: .2rem; flex: 1; border-radius: 2rem; background: rgba(127,159,194,.2); }
.prologue-progress i.is-past { background: rgba(112,240,193,.55); }
.prologue-progress i.is-active { background: var(--cyan); box-shadow: 0 0 .7rem rgba(110,231,255,.6); }
.prologue-chapter, .prologue-speaker { margin: 0; font-size: .61rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.prologue-chapter { color: var(--cyan); }
.prologue-speaker { margin-top: .55rem; color: var(--gold); }
.prologue-content h2 { margin: .28rem 0 .55rem; font-size: clamp(1.55rem, 4vw, 2.8rem); line-height: .98; letter-spacing: -.045em; }
.prologue-content > p:not(.prologue-chapter):not(.prologue-speaker) { max-width: 43rem; margin: 0; color: #bfd0e4; font-size: clamp(.82rem, 1.8vw, .98rem); line-height: 1.55; }
.prologue-content blockquote { margin: .8rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--red); color: #ffe0e7; background: rgba(90,15,37,.28); font: italic .86rem/1.45 Georgia, serif; }
.prologue[data-scene="pig"] blockquote { border-color: var(--gold); color: #fff1bf; background: rgba(84,57,13,.3); }
.prologue-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1rem; }
.prologue-actions .story-skip { margin: 0; }
.prologue-actions .primary-button { min-height: 2.65rem; padding: .62rem 1rem; }

.app { min-height: 100svh; opacity: 0; transition: opacity 400ms ease; }
.app.is-ready { opacity: 1; }
.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  height: calc(4.5rem + var(--safe-top));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: var(--safe-top) clamp(.75rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 12, 27, .88);
  backdrop-filter: blur(18px);
}
.home-link { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-decoration: none; }
.home-link > span:first-child { font-size: 1.5rem; }
.home-link:hover { color: var(--cyan); }
.brand-lockup { display: flex; align-items: center; justify-self: center; gap: .65rem; }
.brand-pig {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .65rem;
  color: #1c1120;
  background: linear-gradient(145deg, #ffb0cd, #ff6f9f);
  box-shadow: 0 0 1.5rem rgba(255, 105, 164, .25);
  font-weight: 1000;
}
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: .92rem; letter-spacing: .025em; }
.brand-lockup small { margin-top: .08rem; color: var(--mint); font-family: ui-monospace, monospace; font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.top-stats { display: flex; align-items: center; justify-self: end; gap: .5rem; }
.stat { display: flex; min-height: 2.25rem; align-items: center; gap: .4rem; padding: 0 .68rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(16, 33, 57, .8); font-size: .82rem; }
.coin { width: .85rem; height: .85rem; border: 2px solid #fff1a9; border-radius: 50%; background: var(--gold); box-shadow: 0 0 .7rem rgba(255, 209, 102, .55); }
.cores span { color: var(--cyan); }
.icon-button { width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--cyan); background: var(--panel-2); cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { border-color: var(--cyan); color: white; background: #183556; outline: none; }
#pause-button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(73, 52, 15, .72); }
.restart-button {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: .35rem;
  padding: 0 .65rem;
  border: 1px solid rgba(255,112,137,.32);
  border-radius: .65rem;
  color: #ffb1c0;
  background: rgba(74,20,38,.55);
  font-size: .62rem;
  cursor: pointer;
}
.restart-button span { font-size: 1rem; }
.restart-button strong { white-space: nowrap; }
.restart-button:hover, .restart-button:focus-visible { border-color: #ff7892; color: white; background: rgba(104,25,49,.78); outline: none; }
.menu-button { display: none; }

.game-layout { display: grid; height: calc(100svh - 4.5rem - var(--safe-top)); grid-template-columns: minmax(0, 1fr) 20.5rem; }
.stage { position: relative; min-width: 0; overflow: hidden; background: #071426; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#game-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--cyan); }
.pause-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 42%, rgba(19, 54, 83, .72), rgba(2, 7, 17, .92));
  backdrop-filter: blur(7px);
}
.pause-card {
  width: min(100%, 27rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(110, 231, 255, .45);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(16, 36, 61, .98), rgba(6, 16, 31, .98));
  box-shadow: 0 1.5rem 5rem rgba(0,0,0,.58), 0 0 2rem rgba(110,231,255,.12);
  text-align: center;
}
.pause-card > p:first-child { margin: 0; color: var(--cyan); font: 900 .63rem ui-monospace, monospace; letter-spacing: .16em; }
.pause-card h2 { margin: .45rem 0 .65rem; font-size: clamp(2rem, 7vw, 3.25rem); line-height: .95; letter-spacing: -.055em; }
.pause-card #pause-copy { margin: 0 auto 1.15rem; max-width: 23rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.pause-card .primary-button { width: 100%; }
.pause-card small { display: block; margin-top: .85rem; color: #b8c9df; font-size: .68rem; }
.pause-card kbd { margin: 0 .12rem; }
.objective-chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  max-width: calc(100% - 10rem);
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem .55rem .55rem;
  border: 1px solid rgba(112, 240, 193, .35);
  border-radius: .85rem;
  background: rgba(5, 14, 29, .84);
  box-shadow: 0 .5rem 2rem rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.objective-number { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .55rem; color: #06151b; background: var(--mint); font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 1000; }
.objective-chip small, .objective-chip strong { display: block; }
.objective-chip small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.objective-chip strong { margin-top: .12rem; overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.energy-wrap { position: absolute; top: 1.2rem; right: 1rem; display: flex; align-items: center; gap: .45rem; color: var(--muted); font-family: ui-monospace, monospace; font-size: .54rem; font-weight: 900; }
.energy-track { width: 5rem; height: .48rem; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 2rem; background: rgba(0,0,0,.5); }
.energy-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); transition: width 180ms linear; }
.combat-hud {
  position: absolute;
  z-index: 3;
  bottom: 2.35rem;
  left: 1rem;
  display: flex;
  align-items: stretch;
  gap: .45rem;
  pointer-events: none;
}
.weapon-readout, .bomb-readout {
  border: 1px solid rgba(110,231,255,.28);
  border-radius: .68rem;
  background: rgba(5,14,29,.86);
  box-shadow: 0 .45rem 1.6rem rgba(0,0,0,.3);
  backdrop-filter: blur(9px);
}
.weapon-readout { min-width: 9.4rem; padding: .48rem .65rem; }
.weapon-readout small, .weapon-readout strong { display: block; }
.weapon-readout small { color: var(--muted); font: 850 .48rem ui-monospace, monospace; letter-spacing: .1em; }
.weapon-readout strong { margin-top: .12rem; color: white; font: 950 .68rem ui-monospace, monospace; letter-spacing: .04em; }
#weapon-pips { display: flex; gap: .2rem; margin-top: .3rem; }
#weapon-pips i { width: 1rem; height: .16rem; border-radius: 1rem; background: rgba(137,164,198,.2); }
#weapon-pips i.is-active { background: var(--cyan); box-shadow: 0 0 .4rem var(--cyan); }
.bomb-readout { display: grid; min-width: 4.35rem; grid-template-columns: auto auto; align-content: center; justify-content: center; column-gap: .35rem; padding: .42rem .55rem; }
.bomb-readout > span { grid-row: 1 / 3; align-self: center; color: var(--gold); font-size: 1.2rem; text-shadow: 0 0 .75rem rgba(255,209,102,.7); }
.bomb-readout strong { color: white; font: 950 .8rem ui-monospace, monospace; }
.bomb-readout small { color: var(--muted); font: 800 .44rem ui-monospace, monospace; letter-spacing: .07em; }
.boss-wrap {
  position: absolute;
  z-index: 3;
  top: 4.9rem;
  left: 50%;
  width: min(80%, 27rem);
  padding: .58rem .75rem;
  border: 1px solid rgba(255,73,108,.5);
  border-radius: .75rem;
  background: rgba(35,7,21,.9);
  box-shadow: 0 .6rem 2rem rgba(0,0,0,.35), 0 0 1.5rem rgba(255,73,108,.12);
  transform: translateX(-50%);
  pointer-events: none;
}
.boss-wrap > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.boss-wrap small { color: #ff8da4; font: 850 .52rem ui-monospace, monospace; letter-spacing: .08em; }
.boss-wrap strong { font-size: .7rem; }
.boss-track { height: .34rem; margin-top: .38rem; overflow: hidden; border-radius: 2rem; background: #10030a; }
.boss-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff496c, #ff9f64); box-shadow: 0 0 .7rem #ff496c; transition: width 160ms ease; }
.nearby-prompt { position: absolute; bottom: 4.5rem; left: 50%; display: flex; align-items: center; gap: .55rem; padding: .58rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: .7rem; background: rgba(5, 13, 27, .9); box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.38); font-size: .74rem; font-weight: 850; transform: translateX(-50%); pointer-events: none; }
kbd { display: inline-grid; min-width: 1.55rem; min-height: 1.45rem; place-items: center; padding: .12rem .3rem; border: 1px solid rgba(255,255,255,.28); border-bottom-width: 3px; border-radius: .35rem; color: white; background: #182840; font: 700 .65rem ui-monospace, monospace; }
.desktop-help { position: absolute; right: 1rem; bottom: .75rem; display: flex; gap: .65rem; color: rgba(196, 214, 238, .72); font-size: .58rem; font-weight: 700; pointer-events: none; }
.desktop-help span { display: flex; align-items: center; gap: .25rem; }
.toast-layer { position: absolute; z-index: 4; top: 5rem; left: 50%; display: grid; gap: .45rem; width: min(90%, 24rem); transform: translateX(-50%); pointer-events: none; }
.toast { padding: .7rem .9rem; border: 1px solid rgba(112, 240, 193, .35); border-radius: .7rem; color: #eafff7; background: rgba(8, 28, 37, .94); box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); font-size: .75rem; font-weight: 750; animation: toast-in 250ms ease both; }
.toast strong { color: var(--gold); }

.touch-controls { display: none; }
.mission-panel { overflow-y: auto; border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(13, 28, 49, .97), rgba(6, 14, 28, .98)); scrollbar-width: thin; }
.panel-head { display: flex; height: 3.1rem; align-items: center; gap: .5rem; padding: 0 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, monospace; font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.panel-head strong { margin-left: auto; color: var(--cyan); }
.live-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 .65rem var(--mint); animation: blink 1.8s ease-in-out infinite; }
.mission-card { margin: 1rem; padding: 1rem; border: 1px solid rgba(110, 231, 255, .2); border-radius: .9rem; background: linear-gradient(145deg, rgba(17, 38, 65, .95), rgba(10, 25, 44, .95)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.mission-card h2 { margin: .45rem 0 .6rem; font-size: 1.25rem; line-height: 1.05; letter-spacing: -.035em; }
.mission-card > p:not(.mission-label) { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.48; }
.mission-progress { height: .35rem; margin: 1rem 0 .35rem; overflow: hidden; border-radius: 2rem; background: #050c19; }
.mission-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); box-shadow: 0 0 .65rem var(--cyan); transition: width 400ms ease; }
.mission-card > small { color: var(--muted); font-size: .6rem; }
.side-quests { padding: .25rem 1rem 1rem; }
.side-quests h3 { margin: 0 0 .55rem; color: var(--muted); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; }
.challenge { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid rgba(116, 225, 255, .1); }
.challenge-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line); border-radius: .55rem; color: var(--cyan); background: rgba(23, 48, 78, .5); }
.challenge strong, .challenge small { display: block; }
.challenge strong { font-size: .72rem; }
.challenge small { margin-top: .12rem; color: var(--muted); font-size: .61rem; }
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 1rem 1rem; }
.panel-actions button { display: flex; min-height: 3rem; align-items: center; gap: .45rem; padding: .55rem; border: 1px solid var(--line); border-radius: .65rem; color: #c9d9ee; background: rgba(17, 37, 63, .7); font-size: .66rem; font-weight: 800; cursor: pointer; }
.panel-actions button span { color: var(--cyan); font-size: 1rem; }
.panel-actions button:hover { border-color: rgba(110, 231, 255, .55); background: rgba(23, 55, 91, .85); }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(2, 6, 14, .78); backdrop-filter: blur(6px); }
.story-dialog, .panel-dialog { width: min(calc(100% - 2rem), 42rem); max-height: min(88svh, 46rem); margin: auto; padding: 0; overflow: auto; border: 1px solid rgba(110, 231, 255, .35); border-radius: 1.1rem; background: linear-gradient(150deg, #11233b, #071424 70%); box-shadow: 0 1.5rem 6rem rgba(0,0,0,.65), 0 0 3rem rgba(57, 192, 238, .1); }
.story-dialog form, .panel-dialog form { position: relative; padding: clamp(1.2rem, 4vw, 2rem); }
.dialog-scanline { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 .8rem var(--cyan); }
.dialog-close { position: absolute; top: .75rem; right: .75rem; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--muted); background: rgba(3,10,22,.6); font-size: 1.25rem; cursor: pointer; }
.dialog-code { position: absolute; top: 1.15rem; right: 3.5rem; margin: 0; color: rgba(145, 166, 195, .6); font: 700 .58rem ui-monospace, monospace; letter-spacing: .09em; }
.story-dialog h2, .panel-dialog h2 { margin: .5rem 3rem .7rem 0; font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: .98; letter-spacing: -.05em; }
.dialog-story { color: #b7c8dd; font-size: .88rem; line-height: 1.55; }
#dialog-question-wrap h3, .feedback h3 { margin: 1.15rem 0 .7rem; font-size: .87rem; line-height: 1.35; }
.choices { display: grid; gap: .55rem; }
.choice { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .65rem; width: 100%; padding: .72rem; border: 1px solid rgba(130, 164, 202, .2); border-radius: .7rem; color: #eaf3ff; background: rgba(16, 34, 58, .72); text-align: left; cursor: pointer; transition: border 130ms ease, background 130ms ease, transform 130ms ease; }
.choice:hover, .choice:focus-visible { border-color: var(--cyan); background: rgba(24, 55, 87, .9); transform: translateX(.18rem); outline: none; }
.choice-index { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgba(110, 231, 255, .28); border-radius: .48rem; color: var(--cyan); font: 900 .63rem ui-monospace, monospace; }
.choice-text { font-size: .78rem; font-weight: 700; line-height: 1.35; }
.feedback { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: start; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(112, 240, 193, .3); border-radius: .8rem; background: rgba(12, 38, 45, .55); }
.feedback.is-learning { border-color: rgba(255, 209, 102, .35); background: rgba(50, 37, 12, .42); }
.feedback-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .7rem; color: #052119; background: var(--mint); font-size: 1.3rem; font-weight: 1000; }
.is-learning .feedback-icon { color: #2b1c00; background: var(--gold); }
.feedback h3 { margin: .05rem 0 .35rem; color: var(--mint); font-size: 1rem; }
.is-learning h3 { color: var(--gold); }
.feedback p { margin: 0; color: #b8cade; font-size: .78rem; line-height: 1.5; }
.reward-line { grid-column: 1 / -1; padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.1); color: var(--gold); font-size: .75rem; font-weight: 900; }
.dialog-next { grid-column: 1 / -1; width: 100%; }

.panel-dialog { width: min(calc(100% - 2rem), 48rem); }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.data-card { padding: .85rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(16, 34, 57, .68); }
.data-card.is-done { border-color: rgba(112, 240, 193, .36); }
.data-card.restart-card { border-color: rgba(255,112,137,.35); background: rgba(76,18,36,.48); }
.data-card.restart-card h3 { color: #ff9caf; }
.data-card h3 { margin: 0 0 .35rem; font-size: .82rem; }
.data-card p, .data-card small { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.data-card code { display: block; margin-top: .55rem; padding: .55rem; border-radius: .5rem; color: #c6fff0; background: #050d19; font: .62rem/1.45 ui-monospace, monospace; white-space: normal; }
.gear-card { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.gear-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .6rem; color: var(--cyan); background: rgba(35, 76, 111, .55); }
.gear-card strong, .gear-card small { display: block; }
.gear-card strong { font-size: .8rem; }
.gear-card small { margin-top: .15rem; color: var(--muted); font-size: .63rem; }
.gear-card button { min-width: 5.2rem; padding: .55rem; border: 1px solid rgba(255, 209, 102, .35); border-radius: .5rem; color: var(--gold); background: rgba(73, 52, 15, .4); font-size: .64rem; font-weight: 900; cursor: pointer; }
.gear-card button:disabled { opacity: .45; cursor: default; }
.map-list { display: grid; gap: .4rem; margin-top: 1rem; }
.map-stop { display: flex; align-items: center; gap: .6rem; padding: .55rem; border-radius: .55rem; color: var(--muted); background: rgba(12, 28, 48, .6); font-size: .7rem; }
.map-stop i { width: .55rem; height: .55rem; border-radius: 50%; background: #3e536c; }
.map-stop.is-done { color: #d8fff2; }
.map-stop.is-done i { background: var(--mint); box-shadow: 0 0 .55rem var(--mint); }
.map-stop.is-active { color: white; outline: 1px solid var(--cyan); }
.panel-note { padding: .75rem; border-left: 3px solid var(--gold); color: #c8d6e8; background: rgba(57, 42, 13, .38); font-size: .72rem; line-height: 1.5; }
.danger-button { margin-top: 1rem; padding: .55rem .7rem; border: 1px solid rgba(255, 73, 108, .4); border-radius: .5rem; color: #ff8da4; background: rgba(69, 15, 29, .4); font-size: .66rem; font-weight: 800; cursor: pointer; }

@keyframes title-push { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.5rem); } }
@keyframes story-scan { from { top: -2px; } to { top: 100%; } }

@media (max-width: 850px) {
  body { overflow: hidden; }
  .topbar { height: calc(3.75rem + var(--safe-top)); grid-template-columns: auto 1fr auto; gap: .45rem; }
  .home-link span:last-child, .brand-lockup small, .cores { display: none; }
  .brand-lockup { justify-self: start; }
  .brand-lockup strong { font-size: .78rem; }
  .brand-pig { width: 1.9rem; height: 1.9rem; border-radius: .5rem; }
  .stat { min-height: 2rem; padding: 0 .5rem; }
  .icon-button { width: 2rem; height: 2rem; }
  .restart-button { width: 2rem; min-height: 2rem; justify-content: center; padding: 0; }
  .restart-button strong { display: none; }
  .menu-button { display: inline-block; }
  .game-layout { height: calc(100svh - 3.75rem - var(--safe-top)); grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .mission-panel { display: none; }
  .objective-chip { top: .65rem; left: .65rem; max-width: calc(100% - 7.4rem); padding: .42rem .62rem .42rem .42rem; }
  .objective-number { width: 1.8rem; height: 1.8rem; }
  .objective-chip strong { font-size: .68rem; }
  .energy-wrap { top: .85rem; right: .65rem; }
  .energy-wrap > span { display: none; }
  .energy-track { width: 4.6rem; }
  .combat-hud { bottom: 7.9rem; left: .65rem; transform: scale(.88); transform-origin: bottom left; }
  .boss-wrap { top: 4rem; width: calc(100% - 1.3rem); }
  .desktop-help { display: none; }
  .nearby-prompt { bottom: 8.2rem; }
  .nearby-prompt kbd { display: none; }
  .touch-controls { position: absolute; right: 0; bottom: max(.8rem, var(--safe-bottom)); left: 0; display: flex; align-items: end; justify-content: space-between; padding: 0 1rem; pointer-events: none; }
  .joystick { position: relative; width: 7rem; height: 7rem; border: 1px solid rgba(110, 231, 255, .25); border-radius: 50%; background: rgba(5, 14, 28, .48); box-shadow: inset 0 0 1.6rem rgba(110, 231, 255, .08); pointer-events: auto; touch-action: none; }
  .joystick::before, .joystick::after { position: absolute; content: ""; background: rgba(110, 231, 255, .13); }
  .joystick::before { top: 50%; left: 14%; width: 72%; height: 1px; }
  .joystick::after { top: 14%; left: 50%; width: 1px; height: 72%; }
  .joystick span { position: absolute; top: 50%; left: 50%; width: 3.15rem; height: 3.15rem; border: 1px solid rgba(110, 231, 255, .48); border-radius: 50%; background: rgba(35, 75, 110, .88); box-shadow: 0 .35rem 1rem rgba(0,0,0,.35); transform: translate(-50%, -50%); }
  .action-stack { display: grid; grid-template-columns: 3.65rem 4.7rem; grid-template-rows: 3.35rem 3.35rem; align-items: center; gap: .25rem .45rem; pointer-events: auto; }
  .touch-button { width: 4.35rem; height: 4.35rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: white; background: rgba(12, 30, 52, .83); box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.35); touch-action: manipulation; }
  .touch-button span, .touch-button small { display: block; }
  .touch-button span { color: var(--cyan); font-size: 1.3rem; }
  .touch-button small { margin-top: .1rem; font-size: .55rem; font-weight: 850; }
  .fire-button { grid-column: 2; grid-row: 1 / 3; width: 4.7rem; height: 4.7rem; border-color: rgba(110,231,255,.5); background: radial-gradient(circle at 35% 28%, rgba(45,103,143,.95), rgba(9,30,54,.94)); }
  .fire-button { touch-action: none; }
  .fire-button span { color: var(--cyan); font-size: 1.65rem; }
  .action-button, .bomb-button { width: 3.35rem; height: 3.35rem; }
  .action-button { border-color: rgba(112, 240, 193, .38); background: rgba(19,73,62,.76); }
  .action-button span { color: var(--gold); }
  .bomb-button { border-color: rgba(255, 209, 102, .42); background: rgba(82, 56, 13, .82); }
  .bomb-button span { color: var(--gold); }
  .toast-layer { top: 4rem; }
}

@media (max-width: 520px) {
  .brand-pig { display: none; }
  .brand-lockup { display: none; }
  .top-stats { gap: .35rem; }
  .title-screen img { object-position: 50% 46%; }
  .title-content { width: 100%; padding-right: .6rem; padding-bottom: max(1.5rem, calc(.8rem + var(--safe-bottom))); padding-left: .6rem; }
  .title-content h1 { font-size: clamp(2.75rem, 14vw, 4.4rem); }
  .title-copy { font-size: .9rem; }
  .story-replay-button { display: block; margin: .55rem auto 0; }
  .prologue-content { width: calc(100% - 1rem); margin-bottom: max(.5rem, var(--safe-bottom)); padding: .9rem; border-radius: .8rem; }
  .prologue-art { background-size: auto 100%; }
  .prologue[data-scene="artifact"] .prologue-art { background-position: 22% 50%; }
  .prologue[data-scene="tower"] .prologue-art { background-position: 0% 50%; }
  .prologue[data-scene="boar"] .prologue-art { background-position: 80% 50%; }
  .prologue[data-scene="workshop"] .prologue-art, .prologue[data-scene="pig"] .prologue-art { background-position: 45% 50%; }
  .prologue-content h2 { font-size: 1.55rem; }
  .prologue-content > p:not(.prologue-chapter):not(.prologue-speaker) { font-size: .8rem; line-height: 1.45; }
  .prologue-content blockquote { font-size: .78rem; }
  .story-dialog, .panel-dialog { width: calc(100% - 1rem); max-height: calc(100svh - 1rem); border-radius: .85rem; }
  .story-dialog form, .panel-dialog form { padding: 1rem; }
  .dialog-speaker { padding-right: 5rem; }
  .feedback { grid-template-columns: 2.5rem 1fr; padding: .75rem; }
  .feedback-icon { width: 2.3rem; height: 2.3rem; }
  .data-grid { grid-template-columns: 1fr; }
  .gear-card { grid-template-columns: 2.4rem 1fr; }
  .gear-card button { grid-column: 1 / -1; width: 100%; }
  .combat-hud { bottom: 7.2rem; transform: scale(.76); }
  .touch-controls { padding: 0 .65rem; }
  .joystick { width: 6.25rem; height: 6.25rem; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .topbar { height: calc(3.25rem + var(--safe-top)); }
  .game-layout { height: calc(100svh - 3.25rem - var(--safe-top)); }
  .touch-controls { transform: scale(.78); transform-origin: bottom; }
  .nearby-prompt { bottom: 3.5rem; }
}

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


/* ⚔ Trials, ⚒ the Forge and the run result share one button look, built to
   match the game's own .choice buttons rather than inventing a new one. */
.panel-button {
  display: block; width: 100%; margin: .55rem 0 0;
  padding: .72rem .8rem;
  border: 1px solid rgba(130, 164, 202, .28);
  border-radius: .7rem;
  color: #eaf3ff; background: rgba(16, 34, 58, .72);
  font: 900 .76rem/1.3 inherit; letter-spacing: .03em; text-align: center;
  cursor: pointer;
  transition: border 130ms ease, background 130ms ease, transform 130ms ease;
}
.panel-button:hover:not(:disabled), .panel-button:focus-visible:not(:disabled) {
  border-color: var(--cyan); background: rgba(24, 55, 87, .9); outline: none;
}
.panel-button:active:not(:disabled) { transform: translateY(1px); }
.panel-button:disabled { opacity: .45; cursor: not-allowed; }

/* ⚒ The Forge — two rows of weapon forms you pick from */
.forge-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.forge-row .panel-button {
  flex: 1 1 8rem; width: auto; margin: 0; padding: .45rem .5rem;
  font-size: .66rem; letter-spacing: .04em;
}
.forge-row .panel-button.is-on {
  border-color: var(--cyan);
  background: rgba(110, 231, 255, .18);
  color: #eafcff;
}