:root {
  color-scheme: dark;
  --bg: #171e1a;
  --panel: #202b24;
  --panel-light: #263229;
  --border: #384338;
  --ink: #e5e8d7;
  --muted: #95a28e;
  --accent: #c1d58c;
  --lcd0: #e3e8b7;
  --lcd1: #b4c783;
  --lcd2: #6c8954;
  --lcd3: #293d32;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

button:focus-visible,
a:focus-visible,
canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

button:hover {
  filter: brightness(1.12);
}

button {
  transition:
    background 0.15s,
    filter 0.15s;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

button svg {
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.app-shell {
  max-width: 1280px;
  margin: auto;
  padding: 0 44px;
}

.site-header {
  height: 89px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  gap: 65px;
}

.brand {
  display: flex;
  white-space: nowrap;
  gap: 11px;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
}

.brand-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--bg);
  border-radius: 8px;
}

.brand-mark svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.brand-dot {
  color: var(--accent);
}

nav {
  display: flex;
  gap: 31px;
  align-items: center;
  font-size: 12px;
  height: 100%;
}

nav button {
  background: none;
  color: var(--muted);
  padding: 10px 0;
}

nav a {
  color: var(--muted);
  text-decoration: none;
}
nav a:hover {
  color: var(--ink);
}

nav button span {
  padding-left: 5px;
}

.nav-current {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-current:after {
  content: '';
  height: 2px;
  width: 100%;
  background: var(--accent);
  position: absolute;
  bottom: -1px;
}

.header-note {
  margin-left: auto;
  font: 9px monospace;
  letter-spacing: 1.3px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 33px 0 31px;
}

.title-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.title-sprout {
  font-size: 53px;
  color: var(--accent);
  font-weight: normal;
  line-height: 1;
}

.eyebrow {
  font: 9px monospace;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 5px;
}

h1 {
  font:
    italic 49px/0.98 Georgia,
    serif;
  letter-spacing: -2.2px;
}

.title-period {
  color: var(--accent);
}

.edition {
  font: 9px monospace;
  color: var(--muted);
  letter-spacing: 1px;
  border-left: 1px solid var(--border);
  margin: 20px 0 0 10px;
  padding: 7px 0 7px 18px;
}

.title-right {
  text-align: right;
}

.demo-badge {
  border: 1px solid #4c5c40;
  border-radius: 4px;
  background: #253022;
  color: #c1d29f;
  padding: 6px 9px;
  font: 8px monospace;
  letter-spacing: 1.3px;
}

.title-right p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 16px;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 266px;
  gap: 24px;
  align-items: start;
}

.console {
  border: 1px solid #46503e;
  border-radius: 9px;
  background: var(--panel);
  padding: 0 9px;
  box-shadow: 0 14px 50px #0002;
  overflow: hidden;
}

.screen-top {
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
}

.location {
  display: flex;
  align-items: center;
  gap: 9px;
}

.location svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.location strong {
  font-size: 12px;
  font-weight: 500;
}

.location > span {
  font: 7px monospace;
  letter-spacing: 1px;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 11px;
  margin-left: 2px;
}

.weather {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
}

.weather svg {
  height: 13px;
  width: 13px;
}

.screen-shell {
  position: relative;
  isolation: isolate;
  background: var(--lcd3);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 3px solid #101c14;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #46543f;
}

#world {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  outline-offset: -4px;
}

.screen-corner {
  position: absolute;
  right: 13px;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--lcd3);
  opacity: 0.8;
  text-shadow: 1px 1px var(--lcd0);
  pointer-events: none;
}

.screen-corner span {
  font: 8px monospace;
}

.screen-corner b {
  font: 25px Georgia;
}

.location-toast {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 10px 15px 11px;
  color: var(--lcd3);
  background: var(--lcd0);
  box-shadow: 3px 3px 0 var(--lcd3);
  border: 2px solid var(--lcd3);
  pointer-events: none;
  transition: opacity 0.4s;
  opacity: 0;
}

.location-toast.show {
  opacity: 1;
}

.location-toast span {
  font: 7px monospace;
  letter-spacing: 1px;
  display: block;
}

.location-toast strong {
  font: 18px Georgia;
  display: block;
  margin-top: 3px;
}

.screen-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--lcd0);
  color: var(--lcd3);
  padding: 6px 10px;
  border: 1px solid var(--lcd3);
  box-shadow: 2px 2px 0 var(--lcd3);
  font: 10px monospace;
  white-space: nowrap;
  pointer-events: none;
}

.screen-hint kbd {
  border-color: var(--lcd2);
  color: var(--lcd3);
  background: transparent;
}

.console-footer {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
}

.live-label {
  font: 7px monospace;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a8b99c;
}

.live-label .status-dot {
  width: 4px;
  height: 4px;
}

.console-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.console-tools button {
  position: relative;
  background: none;
  color: var(--muted);
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-tools svg {
  width: 15px;
  height: 15px;
}

.console-tools button > span:not(.palette-dots):not(.mute-slash) {
  font: 8px monospace;
  letter-spacing: 0.8px;
}

.tool-divider {
  height: 12px;
  background: var(--border);
  width: 1px;
  margin: 0 3px;
}

.palette-dots {
  display: flex;
  gap: 2px;
}

.palette-dots i {
  width: 6px;
  height: 10px;
  background: var(--lcd0);
}

.palette-dots i:nth-child(2) {
  background: var(--lcd1);
}

.palette-dots i:nth-child(3) {
  background: var(--lcd2);
}

.mute-slash {
  position: absolute;
  left: 11px;
  top: 2px;
  font-size: 23px;
  color: var(--accent);
  text-shadow: 1px 1px var(--panel);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.traveler-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 18px;
}

.section-label {
  font: 8px monospace;
  letter-spacing: 1.2px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-label > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-label svg {
  width: 13px;
  height: 13px;
}

.traveler-identity {
  display: flex;
  gap: 13px;
  align-items: center;
  margin: 19px 0 22px;
}

.portrait {
  border: 1px solid #657452;
  background: var(--lcd1);
  width: 56px;
  height: 58px;
  border-radius: 3px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.portrait canvas {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.traveler-identity h2 {
  font: 24px Georgia;
  letter-spacing: -0.4px;
  margin-bottom: 3px;
}

.role {
  font-size: 10px;
  color: var(--muted);
}

.level-tag {
  font: 7px monospace;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin-top: 8px;
}

.level-tag span {
  padding: 0 5px;
  color: var(--muted);
}

.health-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 9px;
}

.health-label > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.health-label svg {
  width: 12px;
  height: 12px;
}

.health-label strong {
  font: 10px monospace;
  font-weight: normal;
}

.health-label strong span {
  color: var(--muted);
}

.health-track {
  height: 5px;
  background: #111b16;
  border-radius: 2px;
  overflow: hidden;
}

.health-track > div {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

.traveler-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 9px;
  color: var(--muted);
}

.traveler-stats > span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}

.traveler-stats strong {
  color: var(--ink);
  font: 12px monospace;
}

.traveler-stats svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

#xp-count {
  font: 8px monospace;
}

.bag-button {
  width: 100%;
  padding: 11px 12px;
  background: #34432e;
  border: 1px solid #506043;
  border-radius: 4px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d8e2bd;
  font-size: 11px;
}

.bag-button svg {
  width: 15px;
  height: 15px;
}

.bag-button kbd {
  margin-left: auto;
  border-color: #60724c;
  color: var(--accent);
  background: #2c3926;
}

.quest-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 18px;
}

.quest-card h2 {
  font: 21px/1.3 Georgia;
  letter-spacing: -0.3px;
  margin: 18px 0 9px;
}

.quest-card > p {
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

.quest-card ol {
  margin: 18px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.quest-card li {
  font-size: 10px;
  line-height: 1.5;
  display: flex;
  gap: 9px;
  color: #71816f;
}

.quest-card li:before {
  content: '';
  height: 10px;
  width: 10px;
  border: 1px solid #53644a;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
}

.quest-card li.current {
  color: #d0ddb4;
}

.quest-card li.current:before {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
  border-color: var(--accent);
}

.quest-card li.done {
  color: var(--muted);
}

.quest-card li.done:before {
  content: '✓';
  font-size: 8px;
  border-color: var(--accent);
  color: var(--accent);
  text-align: center;
  line-height: 9px;
}

.quest-reward {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quest-reward > span:first-child {
  font: 7px monospace;
  letter-spacing: 1px;
  color: #7d8e78;
}

.quest-reward > span:last-child {
  font-size: 10px;
  color: #afbf99;
}

.quest-reward b {
  padding: 0 5px;
  color: #758967;
}

.map-button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  background: var(--panel);
  border-radius: 5px;
  text-align: left;
}

.map-mini {
  display: grid;
  place-items: center;
  background: #303e2a;
  color: var(--accent);
  width: 34px;
  height: 36px;
  border-radius: 3px;
}

.map-mini svg {
  width: 23px;
  height: 23px;
}

.map-button strong {
  font-size: 11px;
  font-weight: normal;
  display: block;
  margin-bottom: 5px;
}

.map-button small {
  font-size: 9px;
  color: var(--muted);
}

.map-button kbd {
  margin-left: auto;
}

.field-note {
  text-align: center;
  margin: 7px 0 0;
}

.field-note > span {
  font: 7px monospace;
  letter-spacing: 1px;
  color: #7e9078;
}

.field-note p {
  font: italic 14px/1.5 Georgia;
  color: #9cac90;
  margin-top: 10px;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 27px;
  min-height: 76px;
  font-size: 10px;
  color: var(--muted);
}

.controls-row > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.controls-row b {
  font: 9px monospace;
  color: #b4c2a8;
}

.keys {
  display: flex;
  gap: 3px;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 20px;
  padding: 0 4px;
  font: 9px monospace;
  border: 1px solid #4b5847;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #243023;
  color: #bfceb3;
}

.controls-row button {
  margin-left: auto;
  background: none;
  color: var(--muted);
  font-size: 10px;
  padding: 10px 0;
}

.controls-row button span {
  color: #c5d4b2;
  margin-left: 5px;
}

.site-footer {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 26px;
  font: 7px monospace;
  letter-spacing: 0.8px;
  color: #738570;
}

.site-footer > span:nth-child(2) {
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 9px Arial;
  color: #95a68c;
}

.footer-star {
  color: #acbf94;
  font-size: 13px;
  margin-left: 8px;
}

.touch-controls {
  display: none;
}

.dpad button[data-pressed='true'] {
  background: var(--accent);
  color: var(--bg);
  box-shadow: inset 0 2px 3px #0005;
}

.touch-a[data-pressed='true'] {
  box-shadow: inset 0 2px 4px #0008;
  border-color: var(--accent);
}

.toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 11px 15px;
  background: var(--lcd3);
  border: 1px solid var(--lcd0);
  box-shadow: 3px 3px #0003;
  color: var(--lcd0);
  font: 11px/1.5 monospace;
  text-align: center;
  min-width: 55%;
  pointer-events: none;
}

.dialogue {
  position: absolute;
  z-index: 12;
  bottom: 13px;
  left: 13px;
  right: 13px;
  background: var(--lcd0);
  color: var(--lcd3);
  border: 3px solid var(--lcd3);
  box-shadow:
    0 0 0 2px var(--lcd0),
    4px 4px 0 #293d3244;
  padding: 17px 20px 10px;
}

.dialogue-heading {
  display: flex;
  justify-content: space-between;
  font: 10px monospace;
  font-weight: bold;
  letter-spacing: 1px;
}

.dialogue-heading > span:last-child {
  font-size: 8px;
  font-weight: normal;
}

.dialogue p {
  font: 14px/1.7 monospace;
  margin-top: 11px;
  white-space: pre-line;
}

.dialogue button {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  color: var(--lcd3);
  margin-left: auto;
  margin-top: 8px;
  padding: 5px 0;
  font: 10px monospace;
}

.dialogue kbd {
  color: var(--lcd3);
  border-color: var(--lcd2);
  background: transparent;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #132416aa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pixel-panel {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  color: var(--lcd3);
  background: var(--lcd0);
  border: 3px solid var(--lcd3);
  box-shadow:
    0 0 0 2px var(--lcd0),
    5px 5px 0 #0003;
  padding: 20px;
  scrollbar-color: var(--lcd2) var(--lcd0);
  scrollbar-width: thin;
}

.pixel-panel:focus {
  outline: none;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--lcd3);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.panel-heading h2 {
  font: 20px Georgia;
}

.panel-heading > span {
  font: 9px monospace;
  letter-spacing: 1px;
}

.close-panel {
  background: transparent;
  color: var(--lcd3);
  font: 20px monospace;
  line-height: 18px;
  padding: 4px 6px;
}

.pixel-panel button:focus-visible {
  outline-color: var(--lcd3);
}

.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-height: 225px;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid var(--lcd2);
  padding-right: 17px;
}

.item-row {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 8px;
  padding: 10px 9px;
  background: transparent;
  color: var(--lcd3);
  font: 11px monospace;
  border: 1px solid transparent;
}

.item-row.active {
  background: var(--lcd1);
  border: 1px solid var(--lcd3);
}

.item-row > span:last-child {
  margin-left: auto;
  font-size: 10px;
}

.item-row .item-caret {
  visibility: hidden;
}

.item-row.active .item-caret {
  visibility: visible;
}

.item-detail {
  padding: 8px 0;
}

.item-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 70px;
  background: var(--lcd1);
  border: 1px solid var(--lcd2);
  margin-bottom: 14px;
}

.item-art canvas {
  image-rendering: pixelated;
}

.item-type {
  font: 8px monospace;
  letter-spacing: 1px;
  margin-bottom: 7px;
  color: var(--lcd2);
}

.item-detail h3 {
  font: 18px Georgia;
  margin: 0 0 8px;
}

.item-detail p {
  font: 11px/1.6 monospace;
  margin-bottom: 13px;
}

.pixel-button {
  border: 2px solid var(--lcd3);
  background: var(--lcd3);
  color: var(--lcd0);
  padding: 9px 13px;
  font: 11px monospace;
  box-shadow: 2px 2px 0 var(--lcd2);
}

.pixel-button.secondary {
  background: var(--lcd0);
  color: var(--lcd3);
}

.saves-panel {
  font: 12px/1.55 monospace;
}
.screen-shell[data-mode='saves'] {
  min-height: clamp(340px, calc(100dvh - 110px), 600px);
}
.saves-panel h3 {
  font: 16px Georgia;
  margin-bottom: 8px;
}
.saves-panel h4 {
  font: 14px Georgia;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
  scroll-margin-block: 10px;
}
.saves-panel h4:focus {
  outline: 2px solid var(--lcd3);
  outline-offset: 3px;
}
.saves-panel p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.saves-panel .save-intro {
  margin: 10px 0 14px;
}
.save-current {
  border: 2px solid var(--lcd2);
  padding: 12px;
  margin: 14px 0;
}
.save-current label {
  display: block;
  margin: 12px 0 5px;
}
.save-current input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--lcd3);
  background: var(--lcd0);
  color: var(--lcd3);
  font: inherit;
}
.save-current input::placeholder {
  color: var(--lcd2);
}
.save-current input:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: 2px;
}
.save-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.save-actions .pixel-button {
  min-height: 36px;
}
.saves-panel .save-count {
  margin-top: 12px;
}
.save-group {
  margin-top: 20px;
}
.save-entry {
  border-top: 1px solid var(--lcd2);
  padding: 12px 0;
}
.save-date {
  font-size: 11px;
}
.save-current-summary {
  border-left: 3px solid var(--lcd2);
  padding: 9px 12px;
  margin: 12px 0;
}
.save-story {
  margin-top: 10px;
}
.save-task span,
.save-task strong {
  display: block;
}
.save-task span,
.save-label {
  font-size: 11px;
}
.save-task strong {
  margin: 3px 0;
}
.save-location {
  font-weight: bold;
}
.saves-panel .save-relocated {
  border-left: 2px solid var(--lcd2);
  padding-left: 8px;
  margin-top: 10px;
}
.save-decision {
  position: sticky;
  bottom: -20px;
  background: var(--lcd0);
  border-top: 1px solid var(--lcd2);
  padding: 10px 0;
}
.save-decision > p {
  flex-basis: 100%;
  margin: 0;
}
.saves-panel .save-message {
  border-left: 3px solid var(--lcd3);
  padding: 8px 10px;
  margin: 10px 0;
  background: var(--lcd1);
}
.saves-panel .save-confirm {
  margin: 18px 0;
}
#saves-button:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 600px) {
  .saves-panel {
    padding: 12px;
    font-size: 11px;
  }
  .saves-panel .panel-heading > span {
    font-size: 7px;
    letter-spacing: 0;
  }
  .save-actions .pixel-button {
    font-size: 11px;
    padding: 8px;
  }
  .save-decision {
    bottom: -12px;
  }
}

.panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--lcd2);
  padding-top: 12px;
  margin-top: 16px;
  font: 9px monospace;
  color: var(--lcd2);
}

.map-panel {
  max-width: 490px;
}

.map-panel canvas {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  image-rendering: pixelated;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 11px;
  font: 9px monospace;
}

.map-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.map-legend i {
  width: 7px;
  height: 7px;
  background: var(--lcd3);
}

.map-legend i.you {
  background: var(--lcd0);
  border: 2px solid var(--lcd3);
  width: 9px;
  height: 9px;
}

.map-legend i.quest {
  background: none;
  color: var(--lcd3);
  font-style: normal;
  line-height: 7px;
}

.map-note {
  font: 10px/1.5 monospace;
  margin: 12px 0 0;
}

.guide-panel h3 {
  font: 18px Georgia;
  margin: 18px 0 7px;
}

.guide-panel p {
  font: 12px/1.7 monospace;
}

.guide-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font: 12px/1.6 monospace;
  margin: 13px 0;
}

.shop-intro {
  font: 12px/1.6 monospace;
  margin-bottom: 17px;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--lcd2);
  padding: 15px 0;
}

.shop-item canvas {
  width: 48px;
  height: 40px;
  image-rendering: pixelated;
}

.shop-item h3 {
  font: 16px Georgia;
  margin: 0 0 5px;
}

.shop-item p {
  font: 10px monospace;
}

.shop-item button {
  margin-left: auto;
  white-space: nowrap;
}

.battle-panel {
  padding: 21px;
}

.battle-scene {
  height: 210px;
  position: relative;
  background: var(--lcd1);
  border: 1px solid var(--lcd2);
}

.enemy-stats {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 42%;
  font: 13px monospace;
}

.enemy-stats p {
  display: flex;
  justify-content: space-between;
}

.enemy-stats small {
  font: 8px monospace;
}

.battle-hp {
  height: 5px;
  border: 1px solid var(--lcd3);
  margin-top: 8px;
}

.battle-hp > div {
  height: 100%;
  background: var(--lcd3);
}

#monster-art {
  position: absolute;
  right: 7%;
  top: 18px;
  image-rendering: pixelated;
  width: 120px;
  height: 100px;
}

.battle-ground {
  position: absolute;
  right: 6%;
  top: 107px;
  width: 136px;
  border-bottom: 3px dotted var(--lcd2);
}

#battle-player {
  position: absolute;
  left: 12%;
  bottom: 20px;
  image-rendering: pixelated;
  width: 64px;
  height: 64px;
}

.battle-player-stats {
  position: absolute;
  right: 16px;
  bottom: 24px;
  font: 11px/1.8 monospace;
  min-width: 35%;
}

.battle-message {
  font: 12px/1.6 monospace;
  min-height: 54px;
  margin: 14px 0;
}

.battle-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.battle-actions button {
  font-size: 10px;
  padding: 10px 5px;
}

.screen-shell:has(.overlay:not([hidden])) .screen-corner {
  display: none;
}

.console:fullscreen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  background: var(--bg);
}

.console:fullscreen .screen-shell {
  flex: 1;
  aspect-ratio: auto;
  border: 0;
  background: var(--lcd3);
}

.console:fullscreen #world {
  object-fit: contain;
}

.console:fullscreen .screen-top,
.console:fullscreen .console-footer {
  padding: 0 25px;
}

.console:fullscreen .pixel-panel {
  max-width: 700px;
}

.console:fullscreen .dialogue {
  max-width: 900px;
  margin: 0 auto;
}

.console.expanded {
  position: fixed;
  inset: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.console.expanded .screen-shell {
  flex: 1;
  aspect-ratio: auto;
}

.console.expanded #world {
  object-fit: contain;
}

.console.expanded .pixel-panel {
  max-width: 700px;
}

@media (min-width: 1400px) {
  .app-shell {
    padding-top: 12px;
  }
  .title-row {
    padding-top: 37px;
    padding-bottom: 35px;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    padding: 0 25px;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 18px;
  }
  .weather span {
    display: none;
  }
  .title-right p {
    font-size: 10px;
  }
  .controls-row {
    gap: 19px;
  }
  .controls-row button {
    font-size: 9px;
  }
  .field-note {
    display: none;
  }
  .quest-card {
    padding: 16px;
  }
  .traveler-card {
    padding: 16px;
  }
  .traveler-identity {
    margin: 15px 0 18px;
  }
  .quest-card h2 {
    font-size: 20px;
  }
  .quest-card > p {
    font-size: 10px;
  }
  .quest-card ol {
    gap: 10px;
    margin: 14px 0;
  }
  .quest-card li {
    font-size: 9px;
  }
  .bag-button {
    margin-top: 16px;
  }
  .site-footer > span:last-child {
    display: none;
  }
  .dialogue p {
    font-size: 12px;
  }
  .dialogue {
    padding: 12px 15px 8px;
  }
  .overlay {
    padding: 18px;
  }
  .pixel-panel {
    padding: 16px;
  }
  .item-row {
    font-size: 10px;
    padding: 8px 4px;
  }
  .inventory-grid {
    gap: 12px;
    min-height: 180px;
  }
  .item-list {
    padding-right: 8px;
  }
  .item-detail p {
    font-size: 10px;
  }
  .item-detail h3 {
    font-size: 16px;
  }
  .item-art {
    width: 64px;
    height: 52px;
    margin-bottom: 9px;
  }
  .battle-scene {
    height: 170px;
  }
  .battle-message {
    font-size: 11px;
    min-height: 42px;
  }
  .battle-panel .panel-heading {
    margin-bottom: 12px;
  }
  .battle-actions {
    gap: 6px;
  }
  .battle-actions button {
    font-size: 9px;
  }
}

@media (max-width: 850px) {
  .app-shell {
    max-width: 760px;
    padding: 0 22px;
  }
  .site-header {
    height: 72px;
    gap: 35px;
  }
  .header-note {
    display: none;
  }
  .site-header nav {
    margin-left: auto;
  }
  .title-row {
    padding: 27px 0;
  }
  .title-right p {
    display: none;
  }
  .title-sprout {
    font-size: 44px;
  }
  h1 {
    font-size: 42px;
  }
  .edition {
    display: none;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .traveler-card {
    grid-row: span 2;
  }
  .quest-card {
    grid-row: span 2;
  }
  .map-button {
    grid-column: 1/-1;
    padding: 11px 15px;
  }
  .map-mini {
    width: 29px;
    height: 30px;
  }
  .map-button strong {
    margin-bottom: 3px;
  }
  .weather span {
    display: inline;
  }
  .controls-row {
    gap: 20px;
    flex-wrap: wrap;
    padding: 17px 0;
    min-height: 65px;
  }
  .controls-row button {
    display: none;
  }
  .site-footer {
    padding: 20px 0;
  }
  .live-label {
    font-size: 7px;
  }
  .dialogue p {
    font-size: 13px;
  }
  .overlay {
    padding: 25px;
  }
  .inventory-grid {
    min-height: 210px;
  }
  .item-detail p {
    font-size: 11px;
  }
  .item-row {
    font-size: 12px;
    padding: 10px 7px;
  }
  .battle-scene {
    height: 200px;
  }
  .battle-message {
    font-size: 12px;
  }
  .battle-actions button {
    font-size: 11px;
  }
  .field-note {
    display: none;
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 0 12px;
  }
  .site-header {
    height: 63px;
  }
  .brand {
    font-size: 20px;
  }
  .brand-mark {
    width: 27px;
    height: 27px;
  }
  nav {
    font-size: 10px;
    gap: 20px;
  }
  .title-row {
    padding: 25px 3px 23px;
  }
  .title-lockup {
    gap: 11px;
  }
  .title-sprout {
    font-size: 37px;
  }
  h1 {
    font-size: 38px;
  }
  .eyebrow {
    font-size: 6px;
    letter-spacing: 1.4px;
  }
  .demo-badge {
    font-size: 6px;
    letter-spacing: 0.7px;
    padding: 5px 6px;
  }
  .console {
    padding: 0 5px;
    border-radius: 6px;
  }
  .screen-top {
    padding: 0 6px;
    height: 39px;
  }
  .location strong {
    font-size: 10px;
  }
  .location > span {
    font-size: 6px;
    padding-left: 7px;
  }
  .location {
    gap: 6px;
  }
  .weather span {
    display: none;
  }
  .console-footer {
    height: 38px;
    padding: 0 5px;
  }
  .console-tools {
    gap: 3px;
  }
  .console-tools button > span:not(.palette-dots):not(.mute-slash) {
    font-size: 6px;
  }
  .live-label {
    font-size: 5px;
    letter-spacing: 0.6px;
  }
  .console-tools button {
    padding: 5px;
  }
  .tool-divider {
    margin: 0 2px;
  }
  .screen-corner {
    right: 9px;
    top: 8px;
  }
  .controls-row {
    display: none;
  }
  .sidebar {
    gap: 10px;
  }
  .traveler-card,
  .quest-card {
    padding: 13px;
  }
  .section-label {
    font-size: 6px;
    letter-spacing: 0.9px;
  }
  .traveler-identity {
    gap: 8px;
    margin: 13px 0 16px;
  }
  .portrait {
    width: 43px;
    height: 49px;
  }
  .portrait canvas {
    width: 42px;
    height: 42px;
  }
  .traveler-identity h2 {
    font-size: 22px;
  }
  .role {
    font-size: 8px;
  }
  .level-tag {
    font-size: 5px;
    letter-spacing: 0.2px;
  }
  .level-tag span {
    padding: 0 2px;
  }
  .health-label {
    font-size: 9px;
  }
  .traveler-stats {
    font-size: 8px;
  }
  .traveler-stats strong {
    font-size: 10px;
  }
  #xp-count {
    font-size: 7px;
  }
  .bag-button {
    padding: 9px 8px;
    font-size: 9px;
    gap: 6px;
  }
  .bag-button kbd {
    height: 18px;
    min-width: 17px;
  }
  .quest-card h2 {
    font-size: 18px;
    margin-top: 12px;
  }
  .quest-card > p {
    font-size: 9px;
  }
  .quest-card li {
    font-size: 8px;
    gap: 6px;
  }
  .quest-card li:before {
    width: 8px;
    height: 8px;
  }
  .quest-card ol {
    gap: 8px;
    margin: 12px 0;
  }
  .quest-reward {
    padding-top: 10px;
    gap: 4px;
  }
  .quest-reward > span:last-child {
    font-size: 8px;
  }
  .quest-reward > span:first-child {
    font-size: 6px;
  }
  .site-footer {
    font-size: 5px;
    letter-spacing: 0.4px;
    padding: 19px 1px;
  }
  .site-footer > span:nth-child(2) {
    font-size: 7px;
    gap: 5px;
  }
  .footer-star {
    font-size: 10px;
    margin-left: 4px;
  }
  .touch-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin-top: 8px;
    grid-row: 2;
  }
  .game-layout {
    display: flex;
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    order: 3;
  }
  .console {
    width: 100%;
  }
  .touch-controls {
    position: relative;
  }
  .dpad {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 6px;
    touch-action: none;
  }
  .dpad button {
    background: #2c392a;
    border: 1px solid #556548;
    box-shadow: 0 2px 0 #0d1710;
    border-radius: 4px;
    font-size: 18px;
    color: var(--accent);
    touch-action: none;
  }
  .dpad button:first-child {
    grid-column: 2;
  }
  .dpad button:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .dpad button:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .dpad button:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
  .touch-a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    border: 3px solid #7e945f;
    box-shadow: 0 3px 0 #0d1710;
    font: 22px Georgia;
    position: relative;
    touch-action: none;
  }
  .touch-a span {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    font: 10px monospace;
    letter-spacing: 1px;
    color: var(--muted);
  }
  .screen-hint {
    font-size: 8px;
    padding: 4px 7px;
    bottom: 8px;
    gap: 5px;
  }
  .screen-hint kbd {
    height: 16px;
    min-width: 16px;
    font-size: 8px;
  }
  .dialogue {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 9px 11px 5px;
    border-width: 2px;
  }
  .dialogue-heading {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .dialogue p {
    font-size: 10px;
    line-height: 1.55;
    margin-top: 7px;
  }
  .dialogue button {
    font-size: 8px;
    margin-top: 4px;
    gap: 6px;
  }
  .dialogue button kbd {
    height: 16px;
    min-width: 16px;
    font-size: 8px;
  }
  .overlay {
    padding: 11px;
  }
  .pixel-panel {
    padding: 11px;
    border-width: 2px;
  }
  .panel-heading {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .panel-heading h2 {
    font-size: 17px;
  }
  .panel-heading > span {
    font-size: 7px;
  }
  .inventory-grid {
    gap: 10px;
    min-height: 140px;
  }
  .item-row {
    font-size: 8px;
    padding: 8px 2px;
    gap: 3px;
  }
  .item-row > span:last-child {
    font-size: 7px;
  }
  .item-list {
    padding-right: 7px;
    gap: 1px;
  }
  .item-art {
    width: 44px;
    height: 35px;
    margin-bottom: 8px;
  }
  .item-art canvas {
    width: 36px;
    height: 30px;
  }
  .item-detail {
    padding: 3px 0;
  }
  .item-type {
    font-size: 6px;
    margin-bottom: 4px;
  }
  .item-detail h3 {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .item-detail p {
    font-size: 8px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .pixel-button {
    font-size: 8px;
    padding: 6px 8px;
  }
  .panel-foot {
    font-size: 7px;
    margin-top: 10px;
    padding-top: 8px;
  }
  .toast {
    font-size: 9px;
    padding: 8px;
    bottom: 8px;
  }
  .map-panel canvas {
    max-height: 145px;
  }
  .map-legend {
    font-size: 7px;
    gap: 8px;
    margin-top: 8px;
  }
  .map-note {
    font-size: 8px;
    margin-top: 8px;
  }
  .guide-panel h3 {
    font-size: 18px;
    margin: 12px 0 5px;
  }
  .guide-controls {
    font-size: 12px;
    gap: 5px;
    margin: 8px 0;
  }
  .shop-intro {
    font-size: 9px;
    margin-bottom: 10px;
  }
  .shop-item {
    padding: 9px 0;
    gap: 9px;
  }
  .shop-item h3 {
    font-size: 13px;
  }
  .shop-item p {
    font-size: 8px;
  }
  .shop-item canvas {
    width: 32px;
    height: 28px;
  }
  .battle-scene {
    height: 125px;
  }
  .enemy-stats {
    left: 10px;
    top: 10px;
    font-size: 9px;
    width: 45%;
  }
  .enemy-stats small {
    font-size: 6px;
  }
  #monster-art {
    width: 83px;
    height: 69px;
    top: 7px;
    right: 6%;
  }
  .battle-ground {
    top: 71px;
    right: 5%;
    width: 96px;
  }
  #battle-player {
    width: 43px;
    height: 43px;
    bottom: 9px;
  }
  .battle-player-stats {
    bottom: 10px;
    right: 10px;
    font-size: 8px;
  }
  .battle-message {
    font-size: 8px;
    min-height: 28px;
    margin: 8px 0;
  }
  .battle-actions button {
    font-size: 7px;
    padding: 7px 2px;
    border-width: 1px;
  }
  .battle-actions {
    gap: 5px;
  }
}

@media (pointer: coarse) and (min-width: 521px) {
  .touch-controls {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
  }
  .dpad {
    display: flex;
    gap: 8px;
  }
  .dpad button,
  .touch-a {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 18px;
    background: var(--panel-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    touch-action: none;
  }
  .touch-a span {
    font: 9px monospace;
    margin-left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media (min-width: 851px) and (max-height: 850px) {
  .app-shell {
    max-width: 1180px;
  }
  .site-header {
    height: 64px;
  }
  .title-row {
    padding: 22px 0 21px;
  }
  .screen-top {
    height: 42px;
  }
  .console-footer {
    height: 39px;
  }
  .screen-shell {
    aspect-ratio: 16/10;
    max-height: calc(100vh - 270px);
  }
  .field-note {
    display: none;
  }
  .sidebar {
    gap: 12px;
  }
  .traveler-card {
    padding: 14px 16px;
  }
  .traveler-identity {
    margin: 13px 0 15px;
  }
  .bag-button {
    margin-top: 13px;
    padding: 9px 11px;
  }
  .traveler-stats {
    margin-top: 11px;
  }
  .quest-card {
    padding: 15px 16px;
  }
  .quest-card h2 {
    margin: 12px 0 7px;
    font-size: 20px;
  }
  .quest-card > p {
    font-size: 10px;
    line-height: 1.6;
  }
  .quest-card ol {
    gap: 9px;
    margin: 13px 0;
  }
  .quest-card li {
    font-size: 9px;
  }
  .quest-reward {
    padding-top: 10px;
  }
  .map-button {
    padding: 11px 14px;
  }
  .controls-row {
    min-height: 59px;
    gap: 21px;
  }
  .site-footer {
    padding: 17px 0;
  }
}

@media (pointer: coarse) and (min-width: 851px) {
  .touch-controls {
    grid-column: 1;
    grid-row: 2;
  }
  .sidebar {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.screen-shell {
  width: 100%;
}

.touch-controls {
  width: 100%;
}

@media (min-width: 851px) and (max-height: 850px) {
  .map-panel canvas {
    max-height: 230px;
  }
}

/* Memory chapter: loadout, object communion, restoration and readable enemy intent. */
.focus-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 9px;
}
.focus-row strong {
  font: 9px monospace;
  margin-left: auto;
  color: var(--accent);
}
.focus-pips {
  display: flex;
  gap: 3px;
}
.focus-pips i {
  width: 8px;
  height: 4px;
  background: #101c14;
  border: 1px solid #60704c;
}
.focus-pips i.filled {
  background: var(--accent);
}
.traveler-actions {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 7px;
}
.traveler-actions .bag-button {
  padding: 9px 8px;
  font-size: 10px;
  gap: 5px;
}
.traveler-actions .bag-button svg {
  width: 13px;
  height: 13px;
}
.equipped-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  margin-top: 13px;
  padding-top: 11px;
}
.equipped-mini span {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 8px monospace;
  color: #adbea0;
}
.equipped-mini b {
  font: 7px monospace;
  color: #6d825f;
}
.journal-open {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #263229;
  padding: 3px 5px;
  color: var(--accent);
  font: 8px monospace;
}
.journal-open span {
  margin-left: 7px;
}
.chapter-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font: 7px monospace;
  color: #8b9f7e;
  letter-spacing: 0.5px;
}
.chapter-progress > span:first-child {
  color: #d1ddb8;
}
.chapter-progress b {
  margin-left: 5px;
  color: var(--accent);
  font-weight: normal;
}
.quest-card h2 {
  margin-top: 8px;
}
.memories-panel {
  padding: 16px;
}
.memories-panel .panel-heading {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.memory-intro {
  font: 9px/1.5 monospace;
  margin-bottom: 8px;
}
.memory-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 10px;
}
.memory-slot {
  border: 1px solid var(--lcd3);
  padding: 8px;
  background: var(--lcd1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.memory-slot > span {
  font: 9px monospace;
  color: var(--lcd2);
}
.memory-slot strong {
  font: 12px Georgia;
}
.memory-slot small {
  margin-left: auto;
  font: 7px monospace;
  color: var(--lcd2);
}
.memory-slot button {
  margin-left: auto;
  color: var(--lcd3);
  background: none;
  padding: 0 3px;
  font: 14px monospace;
}
.memory-quote {
  font: italic 11px/1.35 Georgia;
  margin: 7px 0;
}
.equip-actions {
  display: flex;
  gap: 5px;
  margin-top: auto;
}
.equip-actions button {
  padding: 6px;
  flex: 1;
  font-size: 8px;
  white-space: nowrap;
}
.overlay[data-mode='communion'],
.overlay[data-mode='memory-award'],
.overlay[data-mode='ending'] {
  background: #172a22ef;
}
.communion-panel,
.award-panel,
.ending-panel {
  text-align: center;
  max-width: 650px;
  border-color: var(--lcd2);
  padding: 22px;
}
.communion-eyebrow {
  display: flex;
  justify-content: space-between;
  font: 8px monospace;
  letter-spacing: 1.3px;
  text-align: left;
  color: var(--lcd2);
}
.echo-art {
  display: grid;
  place-items: center;
  position: relative;
  width: 120px;
  height: 115px;
  margin: 9px auto;
}
.echo-art canvas {
  position: relative;
  image-rendering: pixelated;
  z-index: 1;
}
.echo-ring {
  position: absolute;
  border: 1px dashed var(--lcd2);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.55;
}
.ring-two {
  width: 117px;
  height: 117px;
  border-style: dotted;
  opacity: 0.3;
}
.communion-panel h2,
.award-panel h2 {
  font: italic 30px Georgia;
  margin: 0 0 15px;
}
.echo-passage {
  font: 13px/1.8 monospace;
  max-width: 490px;
  margin: 0 auto 22px;
  min-height: 72px;
}
.echo-bottom {
  border-top: 1px solid var(--lcd2);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.echo-bottom > span {
  font: 7px monospace;
  letter-spacing: 0.5px;
  text-align: left;
}
.pixel-button kbd {
  border-color: var(--lcd2);
  background: transparent;
  color: inherit;
  height: 17px;
  min-width: 17px;
  margin-left: 5px;
  font-size: 8px;
}
.memory-gift {
  font: 7px monospace;
  letter-spacing: 1px;
  color: var(--lcd2);
  display: block;
  margin-bottom: 7px;
}
.award-panel > p:not(.memory-quote) {
  font: 11px/1.7 monospace;
}
.award-panel .echo-art {
  height: 86px;
  margin-top: 3px;
  margin-bottom: 12px;
}
.award-panel .memory-quote {
  margin: -5px 0 12px;
}
.award-abilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  padding: 13px 0;
  margin-top: 10px;
  border-top: 1px solid var(--lcd2);
}
.award-abilities > span {
  font: 9px/1.6 monospace;
}
.award-abilities b {
  display: block;
  font: bold 8px monospace;
  margin-bottom: 5px;
}
.award-panel .award-equipped {
  font-size: 9px !important;
  margin: 2px 0 13px;
}
.award-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.journal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-entry {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--lcd2);
}
.journal-number {
  font: 17px Georgia;
  color: var(--lcd2);
  min-width: 20px;
}
.journal-entry-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.journal-entry h3 {
  font: 18px Georgia;
  margin: 0;
}
.journal-entry-title span {
  font: 7px monospace;
  white-space: nowrap;
}
.journal-entry p {
  font: 10px/1.6 monospace;
  margin: 8px 0;
}
.journal-entry small {
  font: 8px monospace;
  color: var(--lcd2);
}
.journal-entry.complete {
  opacity: 0.7;
}
.ending-panel h2 {
  font: italic 34px/1.15 Georgia;
  margin: 7px 0 16px;
}
.ending-body > p {
  font: 11px/1.8 monospace;
}
.ending-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ending-body {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}
.ending-actions {
  flex-shrink: 0;
  padding-top: 12px;
  border-top: 1px solid var(--lcd2);
}
.ending-relics {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 20px 0 10px;
}
.ending-relics canvas {
  image-rendering: pixelated;
}
.ending-coda {
  margin-bottom: 18px;
}
.story-battle {
  padding: 16px;
}
.story-battle .panel-heading {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.story-battle .battle-scene {
  height: 125px;
}
.story-battle .enemy-stats {
  font-size: 13px;
  width: 50%;
}
.story-battle .enemy-stats small {
  display: block;
  margin-top: 5px;
  font-size: 7px;
}
.story-battle #monster-art {
  top: -10px;
  width: 108px;
  height: 108px;
}
.story-battle .battle-ground {
  top: 82px;
}
.story-battle #battle-player {
  width: 50px;
  height: 62.5px;
  bottom: 10px;
}
.story-battle .battle-player-stats {
  bottom: 14px;
  font-size: 9px;
  line-height: 1.5;
}
.enemy-intent {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--lcd1);
  border: 1px solid var(--lcd2);
  padding: 7px 9px;
  margin-top: 8px;
}
.intent-reading {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.peek-action {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 8px;
}
.enemy-intent b {
  font: bold 8px monospace;
  white-space: nowrap;
}
.enemy-intent span {
  font: 8px/1.4 monospace;
}
.enemy-intent.danger {
  border: 2px solid var(--lcd3);
  padding: 6px 8px;
}
.story-battle .battle-message {
  min-height: 32px;
  font: 10px/1.6 monospace;
  margin: 10px 0;
}
.connection-note {
  font: 8px/1.4 monospace;
  padding: 5px 8px;
  border-left: 3px solid var(--lcd3);
  margin: 7px 0;
}
.story-battle .battle-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.story-battle .battle-actions button small {
  font-size: 6px;
}
.story-battle[data-actor='player'][data-effect='critical'] #monster-art {
  animation: enemy-lunge 0.35s steps(5) 2;
  filter: brightness(1.3);
}
.story-battle[data-actor='player'][data-effect='miss'] #battle-player {
  animation: enemy-lunge 0.4s steps(4);
}
.battle-memories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.memory-skill,
.empty-skill {
  border: 1px solid var(--lcd3);
  background: var(--lcd1);
  color: var(--lcd3);
  text-align: left;
  padding: 7px 9px;
}
.memory-skill > span,
.empty-skill > span {
  display: block;
  font: 6px monospace;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.memory-skill strong {
  font: 12px Georgia;
  display: flex;
  justify-content: space-between;
}
.memory-skill b {
  font: 8px monospace;
}
.empty-skill {
  border-style: dashed;
  background: none;
  color: var(--lcd2);
}
.empty-skill small {
  font: 8px/1.4 monospace;
}
.map-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.map-switch button {
  font-size: 8px;
  padding: 6px 9px;
}
@media (min-width: 851px) and (max-height: 850px) {
  .traveler-identity {
    margin: 11px 0 12px;
  }
  .traveler-actions .bag-button {
    font-size: 9px;
    padding: 8px 7px;
  }
  .equipped-mini {
    margin-top: 10px;
    padding-top: 9px;
    gap: 5px;
  }
  .quest-card {
    padding: 14px 16px;
  }
  .quest-card > p {
    font-size: 9px;
  }
  .quest-card li {
    font-size: 8px;
  }
  .quest-card h2 {
    font-size: 19px;
    margin-top: 8px;
  }
  .chapter-progress {
    margin-top: 10px;
  }
  .map-panel canvas {
    max-height: 205px;
  }
  .memories-panel .panel-foot {
    margin-top: 10px;
    padding-top: 8px;
  }
  .memory-slots {
    margin-bottom: 11px;
  }
}
@media (max-width: 850px) {
  .sidebar .traveler-card,
  .sidebar .quest-card {
    grid-row: auto;
  }
}
@media (max-width: 520px) {
  .screen-shell[data-mode='battle'],
  .screen-shell[data-mode='battle-items'],
  .screen-shell[data-mode='inventory'],
  .screen-shell[data-mode='memories'],
  .screen-shell[data-mode='journal'],
  .screen-shell[data-mode='help'] {
    min-height: 360px;
  }
  .memories-panel,
  .story-battle {
    padding: 12px;
  }
  .focus-row {
    font-size: 7px;
    gap: 5px;
    margin-top: 9px;
  }
  .focus-row strong {
    font-size: 7px;
  }
  .focus-pips {
    gap: 2px;
  }
  .focus-pips i {
    width: 6px;
  }
  .traveler-actions {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 11px;
  }
  .traveler-actions .bag-button {
    margin-top: 0;
    padding: 8px;
    font-size: 9px;
  }
  .equipped-mini {
    gap: 5px;
    padding-top: 8px;
    margin-top: 10px;
  }
  .equipped-mini span {
    font-size: 6px;
    gap: 5px;
  }
  .chapter-progress {
    font-size: 5px;
    margin-top: 10px;
    letter-spacing: 0.1px;
  }
  .chapter-progress b {
    margin-left: 3px;
  }
  .quest-card h2 {
    font-size: 18px;
    margin-top: 8px;
  }
  .quest-card > p {
    font-size: 9px;
  }
  .journal-open {
    font-size: 6px;
  }
  .journal-open span {
    margin-left: 3px;
  }
  .memory-intro {
    font-size: 8px;
    margin-bottom: 9px;
  }
  .memory-slots {
    gap: 5px;
    margin: 8px 0;
  }
  .memory-slot {
    padding: 7px;
    gap: 5px;
  }
  .memory-slot strong {
    font-size: 9px;
  }
  .memory-slot > span,
  .memory-slot small {
    font-size: 6px;
  }
  .equip-actions button {
    font-size: 8px;
  }
  .communion-panel,
  .award-panel,
  .ending-panel {
    padding: 12px;
  }
  .communion-eyebrow {
    font-size: 6px;
    letter-spacing: 0.7px;
  }
  .echo-art {
    width: 75px;
    height: 64px;
    margin: 4px auto 8px;
  }
  .echo-art canvas {
    width: 64px;
    height: 64px;
  }
  .echo-ring {
    width: 60px;
    height: 60px;
  }
  .ring-two {
    width: 73px;
    height: 73px;
  }
  .communion-panel h2,
  .award-panel h2 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .echo-passage {
    font-size: 9px;
    line-height: 1.65;
    min-height: 58px;
    margin-bottom: 10px;
  }
  .echo-bottom {
    gap: 7px;
    padding-top: 8px;
  }
  .echo-bottom > span {
    font-size: 5px;
    max-width: 120px;
    line-height: 1.5;
  }
  .pixel-button kbd {
    height: 14px;
    min-width: 14px;
    font-size: 6px;
    margin-left: 3px;
  }
  .award-panel .echo-art {
    height: 60px;
    margin-bottom: 7px;
  }
  .memory-gift {
    font-size: 5px;
    margin-bottom: 4px;
  }
  .award-panel .memory-quote {
    font-size: 11px;
    margin: 0 0 8px;
  }
  .award-panel > p:not(.memory-quote) {
    font-size: 8px;
  }
  .award-abilities {
    padding: 9px 0;
    gap: 8px;
    margin-top: 9px;
  }
  .award-abilities > span {
    font-size: 7px;
  }
  .award-abilities b {
    font-size: 6px;
  }
  .award-panel .award-equipped {
    font-size: 7px !important;
  }
  .journal-entry {
    gap: 7px;
    padding: 9px 0;
  }
  .journal-number {
    font-size: 13px;
    min-width: 14px;
  }
  .journal-entry-title {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }
  .journal-entry h3 {
    font-size: 16px;
  }
  .journal-entry-title span {
    font-size: 6px;
  }
  .journal-entry p {
    font-size: 8px;
  }
  .journal-entry small {
    font-size: 7px;
  }
  .ending-panel h2 {
    font-size: 26px;
  }
  .ending-body > p {
    font-size: 8px;
  }
  .ending-relics {
    margin-top: 8px;
    gap: 10px;
  }
  .ending-relics canvas {
    width: 44px;
    height: 44px;
  }
  .story-battle .panel-heading {
    padding-bottom: 6px;
    margin-bottom: 7px;
  }
  .story-battle .panel-heading h2 {
    font-size: 14px;
  }
  .story-battle .panel-heading > span {
    font-size: 5px;
    letter-spacing: 0.3px;
  }
  .story-battle .battle-scene {
    height: 90px;
  }
  .story-battle .enemy-stats {
    font-size: 9px;
    left: 7px;
    top: 7px;
    width: 57%;
  }
  .story-battle .enemy-stats small {
    font-size: 5px;
    margin-top: 3px;
  }
  .story-battle #monster-art {
    width: 73px;
    height: 73px;
    right: 4px;
    top: -3px;
  }
  .story-battle .battle-ground {
    top: 51px;
    width: 70px;
    right: 4px;
  }
  .story-battle #battle-player {
    height: 40px;
    width: 32px;
    bottom: 4px;
  }
  .story-battle .battle-player-stats {
    font-size: 6px;
    bottom: 5px;
    right: 9px;
  }
  .enemy-intent {
    margin-top: 5px;
    padding: 5px;
    gap: 5px;
  }
  .intent-reading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .peek-action {
    padding: 5px;
    font-size: 7px;
  }
  .enemy-intent.danger {
    padding: 4px;
  }
  .enemy-intent b {
    font-size: 6px;
  }
  .enemy-intent span {
    font-size: 6px;
  }
  .story-battle .battle-message {
    font-size: 7px;
    min-height: 25px;
    margin: 6px 0;
  }
  .story-battle .battle-actions button {
    padding: 6px 2px;
    font-size: 7px;
  }
  .battle-memories {
    margin-top: 6px;
    gap: 5px;
  }
  .memory-skill,
  .empty-skill {
    padding: 6px;
  }
  .memory-skill > span,
  .empty-skill > span {
    font-size: 4px;
    letter-spacing: 0.3px;
  }
  .memory-skill strong {
    font-size: 9px;
  }
  .memory-skill b {
    font-size: 6px;
  }
  .empty-skill small {
    font-size: 6px;
  }
  .map-switch {
    margin-bottom: 7px;
  }
  .map-switch button {
    font-size: 7px;
    padding: 5px 7px;
  }
  .map-panel canvas {
    max-height: 115px;
  }
}

/* The same consumable picker serves both field exploration and turn-based combat. */
.inventory-panel {
  padding: 16px;
}
.inventory-panel .panel-heading {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.item-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.item-categories button {
  font-size: 9px;
  padding: 7px 12px;
}
.inventory-note,
.inventory-empty {
  font: 9px/1.5 monospace;
  margin-bottom: 10px;
}
.inventory-panel .inventory-grid {
  min-height: 180px;
}
.inventory-panel .panel-foot {
  font-size: 8px;
  margin-top: 10px;
  padding-top: 9px;
}
.screen-shell[data-mode='inventory'],
.screen-shell[data-mode='battle-items'] {
  min-height: 560px;
}
.inventory-resources {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  margin-bottom: 8px;
  font: bold 12px/1.5 monospace;
}
.inventory-panel .item-list {
  max-height: 360px;
  overflow-y: auto;
}
.inventory-panel .item-row {
  min-height: 52px;
  flex-shrink: 0;
  font-size: 11px;
}
.item-label {
  flex: 1;
  min-width: 0;
}
.item-label strong,
.item-label small {
  display: block;
  overflow-wrap: anywhere;
}
.item-label strong {
  font-weight: normal;
}
.item-label small {
  font: 10px/1.5 monospace;
  margin-top: 4px;
}
.inventory-panel .item-detail {
  min-width: 0;
}
.inventory-panel .item-detail p {
  font: 11px/1.6 monospace;
}
.inventory-panel .item-detail h3 {
  font-size: 22px;
}
.inventory-panel .item-detail .pixel-button {
  font-size: 11px;
  min-height: 44px;
}
.item-recovery {
  padding: 10px;
  margin: 12px 0;
  background: var(--lcd1);
  border-left: 3px solid var(--lcd2);
  font: 11px/1.6 monospace;
}
.item-recovery p {
  margin: 6px 0 0;
}
@media (max-width: 520px) {
  .inventory-panel {
    padding: 11px;
  }
  .inventory-panel .panel-heading > span {
    font-size: 8px;
    letter-spacing: 0.3px;
  }
  .item-categories button {
    font-size: 8px;
    padding: 6px 9px;
  }
  .inventory-note,
  .inventory-empty {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .inventory-panel .inventory-grid {
    min-height: 145px;
    grid-template-columns: 1fr;
  }
  .inventory-panel .item-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 230px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--lcd2);
    gap: 4px;
  }
  .inventory-panel .item-row {
    font-size: 10px;
    gap: 4px;
  }
  .inventory-panel .item-row > span:last-child {
    font-size: 10px;
  }
  .inventory-panel .item-type {
    font-size: 9px;
  }
  .inventory-panel .panel-foot {
    font-size: 5px;
    gap: 5px;
  }
}

/* Eight-town journey: four equipped echoes with an eight-memory browsing library. */
.memory-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.memory-slot {
  padding: 7px 5px;
  gap: 5px;
}
.memory-slot strong {
  font-size: 11px;
}
.memory-slot > span {
  font-size: 9px;
}
.memory-slot button {
  min-width: 32px;
  min-height: 32px;
}
.memory-library {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 15px;
}
.memory-index {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.memory-index-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lcd3);
  padding: 2px 5px;
  font: 9px monospace;
  text-align: left;
}
.memory-index-row.active {
  border-color: var(--lcd3);
  background: var(--lcd1);
}
.memory-index-row canvas {
  image-rendering: pixelated;
  flex-shrink: 0;
}
.memory-index-row small {
  display: block;
  margin: 4px 0 0;
  font: 10px/1.4 monospace;
}
.memory-index-row > span {
  min-width: 0;
  text-align: left;
}
.memory-index-row strong {
  font-size: 12px;
  line-height: 1.4;
}
.memory-index-row {
  min-height: 52px;
}
.foundation-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--lcd2);
  margin: 8px 0;
  padding: 0 0 8px;
}
.foundation-summary canvas {
  flex: none;
  image-rendering: pixelated;
}
.foundation-summary p,
.memory-power-note {
  margin: 0 0 8px;
  font: 11px/1.5 monospace;
}
.foundation-summary p {
  margin: 0;
}
.memory-detail .equip-actions .memory-slot-power {
  font-weight: bold;
}
.memory-field {
  border-top: 1px solid var(--lcd2);
  margin-top: 12px;
  padding-top: 8px;
}
.memory-field summary {
  cursor: pointer;
  font: bold 10px/1.5 monospace;
  padding: 6px 0;
}
.memory-field p {
  font: 11px/1.5 monospace;
  margin: 6px 0 0;
}
.memory-detail {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lcd2);
  padding: 12px;
}
.memory-detail h3 {
  font: 24px Georgia;
  margin: 0;
}
.memory-detail .memory-quote {
  min-height: 30px;
  font-size: 12px;
}
.memory-detail dl {
  margin: 0 0 10px;
}
.memory-detail dt {
  font: bold 9px monospace;
  margin: 7px 0 3px;
}
.memory-detail dd {
  font: 11px/1.5 monospace;
  margin: 0;
}
.memory-detail.unheard {
  opacity: 0.7;
}
.memory-detail .equip-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.memory-detail .equip-actions button {
  min-width: 0;
  white-space: normal;
  font-size: 11px;
}
.memory-detail .equip-actions button small {
  font-size: 10px;
}
.memory-slot-action {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
}
.attribute-strip {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.attribute-strip > div {
  flex: 1;
  min-width: 0;
  padding: 5px 4px;
  text-align: center;
  border: 1px solid var(--lcd2);
}
.attribute-strip dt {
  font: 7px/1.4 monospace;
  text-transform: uppercase;
}
.attribute-strip dd {
  margin: 0;
  font: bold 13px/1.4 monospace;
}
.traveler-card .attribute-strip {
  color: #c1d6a5;
}
.traveler-card .attribute-strip > div {
  border-color: #435843;
}
.stat-bonuses,
.skill-preview {
  font: 9px/1.5 monospace;
}
.skill-preview {
  font-weight: bold;
}
.equip-actions button small,
.battle-actions button small,
.memory-skill small,
.enemy-intent small {
  display: block;
  font: 7px/1.4 monospace;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.equip-actions button small {
  min-height: 20px;
}
.story-battle .attribute-strip {
  margin: 6px 0;
}
.enemy-intent b {
  white-space: normal;
  min-width: 0;
}
.enemy-intent small {
  white-space: normal;
}
.story-battle .attribute-strip > div {
  padding: 2px;
}
.story-battle .attribute-strip dd {
  font-size: 10px;
}
@media (max-width: 520px) {
  .attribute-strip {
    gap: 3px;
  }
  .attribute-strip dt {
    font-size: 6px;
  }
  .equip-actions button small,
  .battle-actions button small,
  .memory-skill small,
  .enemy-intent small {
    font-size: 6px;
  }
  .memory-detail .equip-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}
.journey-itinerary {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 12px 0;
}
.journey-itinerary li {
  border: 1px solid var(--lcd2);
  padding: 8px;
}
.journey-itinerary li.current {
  border: 2px solid var(--lcd3);
  padding: 7px;
  background: var(--lcd1);
}
.journey-itinerary li > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.journey-itinerary b {
  font: 8px monospace;
  color: var(--lcd2);
}
.journey-itinerary strong {
  font: 16px Georgia;
}
.journey-itinerary li > div > span {
  margin-left: auto;
  font: 6px monospace;
}
.journey-itinerary p {
  font: 8px monospace;
  margin: 5px 0;
}
.journey-itinerary small {
  display: block;
  font: 7px/1.4 monospace;
}
.compass-panel {
  padding: 16px;
}
.gift-panel .memory-quote {
  margin: 8px 0 12px;
}
.compass-panel .panel-heading {
  padding-bottom: 9px;
  margin-bottom: 10px;
}
.compass-panel .panel-foot {
  font-size: 7px;
  margin-top: 9px;
  padding-top: 8px;
}
.battle-status {
  font: 7px monospace;
  color: var(--lcd2);
  padding-top: 6px;
}
.story-battle .battle-scene {
  height: 132px;
}
.story-battle .battle-ground {
  top: 76px;
}
.story-battle .battle-memories {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.memory-skill strong {
  font-size: 11px;
  gap: 4px;
}
.memory-skill > span {
  font-size: 5px;
}
.ending-relics {
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 850px) {
  .memory-library {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 9px;
  }
  .memory-index-row {
    font-size: 8px;
  }
}
@media (max-width: 520px) {
  .screen-shell[data-mode='memories'],
  .screen-shell[data-mode='battle'],
  .screen-shell[data-mode='map'] {
    min-height: 440px;
  }
  .screen-shell[data-mode='prologue-gift'] {
    min-height: 360px;
  }
  .memory-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memory-slot button {
    min-width: 44px;
    min-height: 44px;
  }
  .memory-library {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .memory-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memory-index-row {
    font-size: 10px;
    padding: 6px;
    gap: 6px;
    min-height: 44px;
  }
  .memory-index-row canvas {
    width: 16px;
    height: 16px;
  }
  .memory-detail {
    padding: 12px;
  }
  .memory-detail h3 {
    font-size: 19px;
  }
  .memory-detail .memory-quote {
    font-size: 10px;
  }
  .memory-detail dt {
    font-size: 9px;
  }
  .memory-detail dd {
    font-size: 11px;
  }
  .memory-detail .equip-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .memory-detail .equip-actions button {
    font-size: 10px;
    padding: 8px 5px;
  }
  .memory-detail .equip-actions button small {
    font-size: 10px;
  }
  .memory-detail .memory-slot-action {
    font-size: 10px;
  }
  .memories-panel .panel-heading > span {
    font-size: 5px;
    letter-spacing: 0;
  }
  .memories-panel .panel-foot {
    font-size: 5px;
    gap: 5px;
  }
  .journey-itinerary {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .journey-itinerary strong {
    font-size: 15px;
  }
  .compass-panel .panel-heading > span {
    font-size: 5px;
    letter-spacing: 0;
  }
  .story-battle .battle-scene {
    height: 110px;
  }
  .story-battle .battle-ground {
    top: 55px;
  }
  .story-battle .battle-memories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-status {
    font-size: 5px;
  }
  .memory-skill > span {
    font-size: 5px;
  }
  .memory-skill strong {
    font-size: 11px;
  }
}
@media (min-width: 521px) {
  .screen-shell[data-mode='memories'],
  .screen-shell[data-mode='map'] {
    min-height: 520px;
  }
  .screen-shell[data-mode='battle'] {
    min-height: 440px;
  }
}
@media (max-width: 520px) {
  .screen-shell[data-mode='memories'] {
    min-height: 500px;
  }
}

/* Each phase is redrawn only when its actor resolves; actions lock meanwhile. */
.turn-phase {
  display: flex;
  justify-content: space-between;
  font: 700 9px monospace;
  letter-spacing: 1px;
  padding: 7px 0;
  color: var(--lcd3);
}
.turn-phase span {
  font-weight: 400;
}
.enemy-identity {
  font: 8px/1.5 monospace;
  margin: 0 0 7px;
}
.boss-phase {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 9px;
  margin-bottom: 7px;
  border-left: 3px solid var(--lcd3);
  background: var(--lcd1);
  font: 8px/1.5 monospace;
}
.boss-phase b {
  letter-spacing: 0.6px;
}
.story-battle[data-effect='transform'] .boss-phase {
  animation: phase-flash 0.65s steps(4);
}
.battle-tools {
  margin-top: 9px;
}
.battle-tools button {
  width: 100%;
  padding: 7px;
  font: 8px monospace;
}
.battle-tools small {
  display: block;
  font: 7px/1.5 monospace;
  margin-top: 4px;
}
.ability-panel {
  padding: 16px;
}
.ability-note {
  font: 12px/1.6 monospace;
}
.ability-budget {
  border: 1px solid var(--lcd2);
  padding: 10px;
  font: bold 12px/1.6 monospace;
}
.ability-outcome strong {
  display: block;
  font: bold 12px/1.6 monospace;
}
.ability-card .ability-readiness {
  border-top: 1px solid var(--lcd2);
  padding-top: 8px;
}
.ability-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.ability-card {
  border: 1px solid var(--lcd2);
  padding: 12px;
  background: var(--lcd1);
  min-width: 0;
}
.ability-card h3 {
  font: 18px Georgia;
  margin: 0 0 7px;
}
.ability-card p {
  font: 12px/1.6 monospace;
  margin: 8px 0;
}
.ability-card small {
  display: block;
  font: 10px/1.5 monospace;
}
.ability-card button {
  font: 11px/1.5 monospace;
  padding: 8px;
  min-height: 40px;
  width: 100%;
}
.ability-choice {
  color: var(--lcd3);
  text-align: left;
}
.ability-choice strong {
  display: block;
  font: 16px Georgia;
  margin-bottom: 7px;
}
.ability-unavailable {
  font-style: italic !important;
}
.screen-shell[data-mode='battle']:has(.battle-tools) {
  min-height: 770px;
}
@media (max-width: 650px) {
  .screen-shell[data-mode='battle']:has(.battle-tools) {
    min-height: 720px;
  }
  .ability-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ability-panel {
    padding: 12px;
  }
  .ability-card p,
  .ability-note,
  .ability-budget,
  .ability-outcome strong {
    font-size: 11px;
  }
}
@keyframes phase-flash {
  50% {
    background: var(--lcd2);
  }
}
.battle-fx {
  display: none;
  position: absolute;
  left: 68%;
  top: 25%;
  z-index: 3;
  font: 48px Georgia;
  pointer-events: none;
}
.story-battle[data-actor='player'][data-effect='strike'] #battle-player,
.story-battle[data-actor='player'][data-effect='counter'] #battle-player {
  animation: wren-lunge 0.65s steps(6);
}
.story-battle[data-actor='enemy'][data-effect='strike'] #monster-art {
  animation: enemy-lunge 0.65s steps(6);
}
.story-battle[data-actor='player'][data-effect='memory'] .battle-fx,
.story-battle[data-actor='enemy'][data-effect='beam'] .battle-fx,
.story-battle[data-actor='enemy'][data-effect='volley'] .battle-fx {
  display: block;
  animation: memory-bolt 0.65s steps(7);
}
.story-battle[data-actor='enemy'] .battle-fx {
  left: 22%;
}
.story-battle[data-effect='heal'] .battle-fx {
  display: block;
  left: 25%;
  animation: healing-rise 0.65s steps(6);
}
.story-battle[data-actor='enemy'][data-effect='heal'] .battle-fx {
  left: 77%;
}
.story-battle[data-actor='player'][data-effect='guard'] #battle-player,
.story-battle[data-actor='enemy'][data-effect='guard'] #monster-art {
  animation: guard-pulse 0.65s steps(4);
}
.story-battle[data-actor='enemy'][data-effect='strike'] .battle-player-stats,
.story-battle[data-actor='player'][data-effect='strike'] .enemy-stats,
.story-battle[data-actor='player'][data-effect='memory'] .enemy-stats {
  animation: hit-flash 0.65s steps(3);
}
@keyframes wren-lunge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  35%,
  55% {
    transform: translate(65px, -10px);
  }
}
@keyframes enemy-lunge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  35%,
  55% {
    transform: translate(-65px, 10px);
  }
}
@keyframes memory-bolt {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.7) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(90deg);
  }
}
@keyframes healing-rise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}
@keyframes guard-pulse {
  20%,
  60% {
    filter: drop-shadow(0 0 5px var(--lcd0)) brightness(1.5);
  }
}
@keyframes hit-flash {
  25%,
  65% {
    opacity: 0.25;
  }
}
.screen-shell[data-mode='battle'] {
  min-height: 710px;
}
@media (max-width: 650px) {
  .screen-shell[data-mode='battle'] {
    min-height: 660px;
  }
  .turn-phase {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
  .enemy-identity,
  .boss-phase {
    font-size: 7px;
  }
  .battle-status {
    font-size: 6px;
    line-height: 1.6;
    min-height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-battle * {
    animation: none !important;
  }
}
.journal-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 0;
  background: var(--lcd0);
}
.journal-tabs button {
  flex: 1;
}
.side-clues {
  padding-left: 0;
  list-style: none;
  font: 9px/1.8 monospace;
  margin: 9px 0;
}
@media (max-width: 650px) {
  .side-clues {
    font-size: 7px;
  }
  .journal-tabs {
    gap: 5px;
  }
  .journal-tabs button {
    font-size: 8px;
  }
}
.story-battle[data-actor='enemy'][data-effect='signal'] #monster-art {
  animation: guard-pulse 0.65s steps(4);
}
.story-battle[data-actor='player'][data-effect='counter'] .enemy-stats {
  animation: hit-flash 0.65s steps(3);
}
.story-battle[data-effect='volley'] .battle-fx {
  animation: scatter-burst 0.65s steps(6);
}
@keyframes scatter-burst {
  0%,
  30%,
  65%,
  100% {
    opacity: 0;
    transform: translateX(-6px) scale(0.8);
  }
  15%,
  48%,
  83% {
    opacity: 1;
    transform: translateX(6px) scale(1.4);
  }
}
.side-clues + small,
.journal-panel .journal-entry small {
  font-size: 8px;
  line-height: 1.6;
}
@media (max-width: 650px) {
  .journal-panel .journal-entry small {
    font-size: 7px;
  }
}

/* Longer authored maps need room for their actual proportions. */
.screen-shell[data-mode='map'] {
  min-height: 560px;
}
.map-panel #map-art {
  width: 100%;
  height: auto;
  max-height: 330px;
  object-fit: contain;
}
.map-panel .map-note {
  line-height: 1.55;
}
@media (max-width: 520px) {
  .screen-shell[data-mode='map'] {
    min-height: 590px;
  }
  .map-panel #map-art {
    max-height: 320px;
  }
  .map-panel .map-note {
    font-size: 8px;
    line-height: 1.65;
  }
}

/* Wearable gear has its own loadout, alongside the four memory slots. */
.equipment-button {
  margin-top: 9px;
  justify-content: space-between;
}
.gear-icon {
  width: 26px;
  height: 28px;
  flex: none;
  image-rendering: pixelated;
}
.gear-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0;
}
.gear-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 5px;
  border: 1px solid var(--lcd2);
  background: var(--lcd1);
  text-align: center;
}
.gear-slot small {
  font: 9px monospace;
  text-transform: uppercase;
}
.gear-slot strong {
  font: 12px/1.3 Georgia;
}
.gear-slot button {
  position: absolute;
  top: 1px;
  right: 2px;
  padding: 3px 5px;
  min-width: 32px;
  min-height: 32px;
  color: var(--lcd3);
  background: none;
}
.gear-library {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 14px;
}
.gear-index {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gear-index-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  text-align: left;
  color: var(--lcd3);
  border: 1px solid transparent;
  background: transparent;
  font: 10px/1.4 monospace;
}
.gear-index-row.active {
  background: var(--lcd1);
  border-color: var(--lcd3);
}
.gear-index-row .gear-icon {
  width: 18px;
  height: 20px;
}
.gear-index-row small {
  margin-left: auto;
  font: 9px monospace;
}
.gear-detail {
  border: 1px solid var(--lcd2);
  padding: 15px;
}
.gear-detail h3 {
  font: 25px Georgia;
  margin: 8px 0 12px;
}
.gear-detail p,
.gear-detail dd {
  font: 11px/1.65 monospace;
}
.gear-detail dl {
  margin: 15px 0;
}
.gear-detail dt {
  font: bold 9px monospace;
  margin: 12px 0 6px;
}
.gear-detail dd {
  margin: 0;
}
.gear-detail .gear-source {
  font-size: 10px;
  margin: 15px 0;
}
.gear-equip-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gear-equip-actions button {
  width: 100%;
  min-height: 52px;
  font-size: 11px;
  white-space: normal;
}
.gear-equip-actions small {
  display: block;
  font: 10px/1.5 monospace;
  margin-top: 6px;
}
.gear-comparison:only-child {
  grid-column: 1 / -1;
}
.gear-comparison {
  min-width: 0;
}
.gear-detail .gear-effect-change,
.gear-effect-change {
  font: 10px/1.6 monospace;
  margin: 8px 0 0;
}
.gear-shop-item,
.supply-shop-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 164px;
  align-items: start;
}
.screen-shell[data-mode='shop'] {
  min-height: 560px;
}
.console:fullscreen .screen-shell[data-mode='shop'],
.console.expanded .screen-shell[data-mode='shop'] {
  min-height: 0;
}
.shop-panel .shop-intro,
.shop-panel .shop-item p {
  font: 12px/1.6 monospace;
}
.shop-panel .shop-item h3 {
  font-size: 17px;
}
.shop-item .shop-purchase {
  grid-column: 3;
  grid-row: 1;
}
.shop-item .shop-purchase button {
  margin: 0;
  min-height: 44px;
  font-size: 12px;
}
.shop-item .shop-purchase-status {
  margin: 7px 0 0;
}
.shop-receipt {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--lcd2);
  background: var(--lcd1);
  font: 12px/1.6 monospace;
  scroll-margin-block: 12px;
}
.shop-receipt:focus {
  outline: 2px solid var(--lcd3);
  outline-offset: 2px;
}
.gear-shop-comparison {
  grid-column: 1 / -1;
  font: 11px/1.6 monospace;
}
.gear-shop-comparison summary {
  cursor: pointer;
  padding: 10px 0;
  min-height: 44px;
  box-sizing: border-box;
}
.gear-comparisons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.gear-comparisons .gear-comparison {
  border: 1px solid var(--lcd2);
  padding: 10px;
  background: var(--lcd1);
}
.gear-comparisons strong,
.gear-comparisons span {
  display: block;
  margin-bottom: 5px;
}
.shop-gear-note {
  font: 11px/1.6 monospace;
}
.gear-empty {
  padding: 24px 12px;
  font: 12px/1.8 monospace;
  border: 1px dashed var(--lcd2);
}
.gear-shop-heading {
  margin: 22px 0 8px;
  font: 21px Georgia;
}
.gear-shop-item .gear-icon {
  margin: 0 12px;
}
.gear-battle-note {
  font: 7px/1.5 monospace;
  margin: 6px 0;
}
.collection-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lcd2);
}
.collection-summary strong {
  font: 20px Georgia;
}
.collection-summary span,
.collection-heading small {
  font: 9px monospace;
}
.gear-scopes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.gear-scopes .pixel-button {
  font-size: 9px;
}
.gear-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.gear-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 8px monospace;
  min-width: 0;
}
.gear-filters .gear-search {
  grid-column: 1 / -1;
}
.gear-filters input,
.gear-filters select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--lcd2);
  border-radius: 0;
  background: var(--lcd0);
  color: var(--lcd3);
  padding: 8px;
  font: 10px monospace;
}
.gear-filters input::placeholder {
  color: var(--lcd2);
}
.gear-filters input:focus,
.gear-filters select:focus {
  outline: 2px solid var(--lcd3);
  outline-offset: 1px;
}
.gear-index {
  max-height: 360px;
  overflow-y: auto;
  align-content: start;
}
.gear-index-row {
  min-height: 44px;
  flex-shrink: 0;
}
.gear-index-row .gear-rarity {
  display: block;
  margin: 3px 0 0;
  font-size: 7px;
}
.rarity-uncommon {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rarity-rare {
  font-weight: bold;
}
.rarity-legendary {
  font-weight: bold;
  border-bottom: 3px double currentColor;
}
.gear-detail {
  align-self: start;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gear-request {
  border-left: 2px solid var(--lcd3);
  padding-left: 9px;
}
.gear-pagination {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.gear-pagination span {
  font: 8px/1.5 monospace;
  text-align: center;
}
.gear-pagination .pixel-button {
  font-size: 8px;
}
.collection-heading {
  font: 22px Georgia;
  margin-top: 24px;
}
.collection-heading small {
  display: block;
  margin-top: 6px;
}
.robot-cargo {
  font: 8px/1.5 monospace;
  padding: 6px 8px;
  margin: 0 0 6px;
  background: var(--lcd1);
  border-left: 2px solid var(--lcd2);
}
.screen-shell[data-mode='equipment'] {
  min-height: 740px;
}
@media (max-width: 520px) {
  .screen-shell[data-mode='equipment'] {
    min-height: 720px;
  }
  .gear-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .gear-slot {
    padding: 34px 4px 8px;
  }
  .gear-slot button {
    min-width: 44px;
    min-height: 44px;
  }
  .gear-slot strong {
    font-size: 11px;
  }
  .gear-library {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gear-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }
  .gear-index-row {
    padding: 5px;
    font-size: 10px;
  }
  .gear-index-row small {
    font-size: 8px;
  }
  .gear-detail {
    padding: 11px;
  }
  .gear-detail h3 {
    font-size: 21px;
  }
  .gear-detail p,
  .gear-detail dd {
    font-size: 11px;
  }
  .gear-shop-item,
  .supply-shop-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .shop-item .shop-purchase {
    grid-column: 2;
    grid-row: auto;
    margin: 0;
  }
  .gear-comparisons {
    grid-template-columns: 1fr;
  }
}

/* Saved Workshop pixels: preserve square canvases and whole-pixel scaling. */
.item-sprite,
.gear-detail-art {
  image-rendering: pixelated;
  flex: none;
}
.item-row .item-sprite,
.gear-index-row .item-sprite,
.gear-slot .item-sprite {
  width: 24px;
  height: 24px;
}
.item-art {
  width: 76px;
  height: 76px;
}
.item-art canvas,
.gear-detail-art {
  width: 64px;
  height: 64px;
}
.gear-detail-art {
  display: block;
  margin: 0 0 12px;
  background: var(--lcd1);
}
.shop-item .item-sprite {
  width: 48px;
  height: 48px;
}
@media (max-width: 650px) {
  .item-art {
    width: 72px;
    height: 72px;
  }
  .item-row {
    gap: 4px;
  }
  .gear-index-row {
    padding: 5px 3px;
    gap: 5px;
  }
  .gear-index-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
/* 96px story canvases reduce to 64px on phones: each 32px art pixel stays exact. */
.ending-relics canvas {
  width: 32px;
  height: 32px;
}
.memory-index-row canvas {
  width: 16px;
  height: 16px;
}

/* Listening is the opening tutorial: keep its action visible on small screens. */
.screen-shell[data-mode='communion'] {
  min-height: 460px;
}
.screen-shell[data-mode='memory-award'] {
  min-height: 560px;
}
@media (max-width: 520px) {
  .screen-shell[data-mode='communion'] {
    min-height: 350px;
  }
  .screen-shell[data-mode='memory-award'] {
    min-height: 500px;
  }
}

/* Short, player-paced scene breaks establish time and place without flashing. */
.screen-shell[data-presentation='interlude'] {
  min-height: 300px;
  background: var(--lcd3);
}
.screen-shell[data-presentation='interlude'] #world,
.screen-shell[data-presentation='interlude'] .location-toast {
  visibility: hidden;
}
.screen-shell[data-presentation='interlude'] .dialogue {
  inset: 0;
  border: 0;
  box-shadow: none;
  padding: 28px;
  background: var(--lcd3);
  color: var(--lcd0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: scene-break-in 240ms ease-out;
}
.screen-shell[data-presentation='interlude'] .dialogue p {
  margin: 22px 0;
  line-height: 1.8;
}
.screen-shell[data-presentation='interlude'] .dialogue button,
.screen-shell[data-presentation='interlude'] .dialogue kbd {
  color: var(--lcd0);
}
@keyframes scene-break-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-shell[data-presentation='interlude'] .dialogue {
    animation: none;
  }
}

/* A foundational memory stays distinct from the four interchangeable echoes. */
.foundation-memory {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 2px solid var(--lcd2);
  padding: 14px;
  margin: 14px 0;
  text-align: left;
}
.foundation-memory canvas {
  flex: none;
  image-rendering: pixelated;
}
.foundation-memory h3 {
  margin: 4px 0 8px;
}
.foundation-memory p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.6;
}
.story-battle[data-effect='follow-through'] #battle-player {
  filter: drop-shadow(0 0 6px var(--lcd0));
  animation: memory-swing 0.6s ease-out;
}
@keyframes memory-swing {
  0% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(22px) rotate(-8deg);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-battle[data-effect='follow-through'] #battle-player {
    animation: none;
  }
}

.story-battle #battle-player {
  width: 87.5px;
  height: 87.5px;
  margin-left: -18.75px;
}
.story-battle[data-effect='follow-through'] .battle-fx {
  display: block;
  animation: memory-bolt 0.65s steps(7);
}
.story-battle[data-effect='follow-through'] .enemy-stats {
  animation: hit-flash 0.65s steps(3);
}
@media (max-width: 600px) {
  .story-battle #battle-player {
    width: 56px;
    height: 56px;
    margin-left: -12px;
  }
}
.foundation-mini {
  padding: 8px 0;
  margin-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: 9px;
  line-height: 1.8;
}

/* Steady Cut closes remembered blades on one seam, then releases the fragments. */
#steady-cut-art {
  position: absolute;
  right: 7%;
  top: -10px;
  width: 108px;
  height: 108px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 3;
}
.story-battle[data-effect='steady-cut'] #battle-player {
  animation: steady-reach 0.7s steps(7);
  filter: drop-shadow(0 0 3px var(--lcd0));
}
.story-battle[data-effect='steady-cut'] #monster-art {
  animation: steady-impact 0.7s steps(7);
}
@keyframes steady-reach {
  0%,
  15% {
    transform: translateX(0);
  }
  40%,
  65% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes steady-impact {
  0%,
  40% {
    filter: none;
    transform: translateX(0);
  }
  50% {
    filter: brightness(1.5);
    transform: translateX(4px);
  }
  65% {
    filter: none;
    transform: translateX(0);
  }
  100% {
    filter: none;
    transform: translateX(0);
  }
}
@media (max-width: 600px) {
  #steady-cut-art {
    width: 73px;
    height: 73px;
    right: 4px;
    top: -3px;
  }
}

/* Combat prioritizes readable actions; the panel grows instead of shrinking type. */
.screen-shell[data-mode='battle']:has(.battle-clarity) {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
}
.screen-shell[data-mode='battle']:has(.battle-clarity) #world {
  position: absolute;
  inset: 0;
}
.overlay[data-mode='battle']:has(.battle-clarity) {
  position: relative;
  padding: 16px;
}
.story-battle.battle-clarity {
  padding: 18px;
  max-height: none;
  overflow: visible;
}
.battle-clarity .panel-heading {
  margin: 0 0 8px;
  padding-bottom: 10px;
}
.battle-clarity .panel-heading h2 {
  font-size: 24px;
}
.battle-clarity .turn-phase {
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 6px 0 10px;
}
.battle-clarity .battle-scene {
  height: 155px;
}
.battle-clarity .enemy-stats {
  top: 12px;
  left: 12px;
  width: 58%;
  font-size: 17px;
}
.battle-clarity .enemy-stats small {
  font-size: 13px;
  margin-top: 8px;
}
.battle-clarity #monster-art {
  top: 12px;
  right: 12px;
}
.battle-clarity #steady-cut-art {
  top: 12px;
  right: 12px;
}
.battle-clarity .battle-ground {
  top: 100px;
}
.battle-clarity #battle-player {
  bottom: 0;
}
.battle-clarity .battle-player-stats {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font: 13px/1.5 monospace;
  padding: 10px 0;
  text-align: left;
}
.battle-clarity .battle-player-stats strong {
  margin-right: auto;
}
.battle-clarity .battle-player-stats .battle-hp {
  flex-basis: 100%;
  margin: 0;
  height: 5px;
}
.battle-clarity .battle-message {
  font: 14px/1.5 monospace;
  min-height: 42px;
  margin: 8px 0;
}
.battle-history {
  margin: 8px 0;
  border: 1px solid var(--lcd2);
}
.battle-history > summary {
  padding: 9px 10px;
  cursor: pointer;
  font: bold 12px/1.5 monospace;
}
.battle-history > summary:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: -3px;
}
.battle-history-scroll {
  max-height: 240px;
  overflow: auto;
  padding: 0 10px 10px;
  scrollbar-color: var(--lcd2) var(--lcd0);
  scrollbar-width: thin;
}
.battle-history-note,
.battle-history-turn p {
  font: 11px/1.6 monospace;
  margin: 5px 0;
}
.battle-history-turn h3 {
  font: bold 12px/1.5 monospace;
  padding-top: 8px;
  border-top: 1px solid var(--lcd2);
}
.battle-history-turn ol {
  padding-left: 20px;
  margin: 8px 0 12px;
}
.battle-history-turn li {
  font: 11px/1.5 monospace;
  padding-bottom: 5px;
}
.battle-clarity .enemy-intent {
  align-items: center;
  margin: 8px 0 12px;
  padding: 10px;
  min-height: 76px;
}
.battle-clarity .enemy-intent.telegraph {
  border-left: 4px solid var(--lcd3);
}
.battle-clarity .intent-reading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.battle-clarity .enemy-intent b,
.battle-clarity .enemy-intent span,
.battle-clarity .enemy-intent small {
  font: 13px/1.45 monospace;
  white-space: normal;
}
.battle-clarity .enemy-intent b {
  font-weight: bold;
}
.battle-clarity .peek-action {
  font-size: 13px;
  padding: 10px;
  min-height: 44px;
}
.battle-clarity .battle-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.battle-clarity .battle-actions button {
  font: 700 15px/1.4 monospace;
  min-height: 64px;
  padding: 10px;
  white-space: normal;
}
.battle-clarity .battle-actions button small {
  display: block;
  font: 12px/1.5 monospace;
  margin-top: 4px;
}
.battle-clarity .battle-memories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.battle-clarity .memory-skill {
  padding: 12px;
  min-height: 92px;
}
.battle-clarity .memory-skill > span {
  font-size: 11px;
  line-height: 1.5;
}
.battle-clarity .memory-skill strong {
  font-size: 16px;
  line-height: 1.5;
}
.battle-clarity .memory-skill strong b {
  float: none;
  display: block;
  font-size: 12px;
}
.battle-clarity .memory-skill small {
  font-size: 12px;
  line-height: 1.5;
}
.battle-clarity .battle-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 6px 0;
  min-height: 0;
  font: 12px/1.5 monospace;
}
.battle-clarity .battle-status li {
  padding: 4px 7px;
  border: 1px solid var(--lcd2);
  background: var(--lcd1);
}
.battle-clarity .connection-note {
  font: 12px/1.5 monospace;
  padding: 6px 8px;
}
.battle-clarity .boss-phase {
  font-size: 12px;
  line-height: 1.5;
}
.battle-clarity .battle-tools button,
.battle-clarity .battle-tools small {
  font-size: 12px;
  line-height: 1.5;
}
.battle-clarity .battle-tools button {
  min-height: 48px;
}
.battle-details {
  border-top: 1px solid var(--lcd2);
  margin-top: 14px;
  font: 12px/1.6 monospace;
}
.battle-details summary {
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
  font-weight: bold;
}
.battle-details summary:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: 2px;
}
.battle-clarity .battle-details p,
.battle-clarity .enemy-identity,
.battle-clarity .robot-cargo {
  font: 12px/1.6 monospace;
  margin: 8px 0;
}
.battle-clarity .attribute-strip dt {
  font-size: 11px;
}
.battle-clarity .attribute-strip dd {
  font-size: 15px;
}
@media (min-width: 851px) {
  .battle-clarity .battle-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .overlay[data-mode='battle']:has(.battle-clarity) {
    padding: 7px;
  }
  .story-battle.battle-clarity {
    padding: 12px;
  }
  .battle-clarity .panel-heading h2 {
    font-size: 22px;
  }
  .battle-clarity .battle-scene {
    height: 122px;
  }
  .battle-clarity .enemy-stats {
    font-size: 15px;
    top: 8px;
    left: 8px;
  }
  .battle-clarity #monster-art,
  .battle-clarity #steady-cut-art {
    top: 18px;
    right: 3px;
  }
  .battle-clarity .battle-ground {
    top: 77px;
  }
  .battle-clarity .battle-player-stats {
    gap: 6px 12px;
    font-size: 12px;
  }
  .battle-clarity .battle-player-stats strong {
    flex-basis: 100%;
  }
  .battle-clarity .enemy-intent {
    flex-wrap: wrap;
  }
  .battle-clarity .intent-reading {
    flex-basis: 100%;
  }
  .battle-clarity .peek-action {
    width: 100%;
  }
  .battle-clarity .battle-actions button {
    font-size: 14px;
    padding: 9px 7px;
  }
  .battle-clarity .battle-actions button small {
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .battle-clarity .battle-memories {
    grid-template-columns: 1fr;
  }
}
.console:fullscreen .screen-shell[data-mode='battle']:has(.battle-clarity),
.console.expanded .screen-shell[data-mode='battle']:has(.battle-clarity) {
  overflow: auto;
  min-height: 0;
}

/* Recovery playtests: let conversations and memory rewards grow around readable text. */
.dialogue button {
  font-size: 13px;
  min-height: 44px;
}
.screen-shell:is([data-mode='communion'], [data-mode='memory-award'], [data-mode='ending']) {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
}
.screen-shell:is([data-mode='communion'], [data-mode='memory-award'], [data-mode='ending']) #world {
  position: absolute;
  inset: 0;
}
.overlay:is([data-mode='communion'], [data-mode='memory-award'], [data-mode='ending']) {
  position: relative;
  padding: 12px;
}
.communion-panel,
.award-panel,
.ending-panel {
  max-height: none;
  overflow: visible;
}
.communion-eyebrow {
  font-size: 11px;
  letter-spacing: 0.4px;
  gap: 8px;
}
.echo-passage {
  font-size: 14px;
  line-height: 1.7;
}
.echo-bottom > span,
.memory-gift {
  font-size: 12px;
  line-height: 1.5;
}
.communion-panel .pixel-button,
.award-panel .pixel-button,
.ending-panel .pixel-button {
  font-size: 13px;
  min-height: 44px;
  white-space: normal;
}
.award-panel > p:not(.memory-quote),
.ending-body > p,
.award-abilities > span {
  font-size: 13px;
  line-height: 1.6;
}
.award-panel .memory-quote {
  font-size: 14px;
  line-height: 1.6;
}
.award-abilities b {
  font-size: 12px;
  line-height: 1.5;
}
.award-panel .award-equipped {
  font-size: 13px !important;
}
@media (max-width: 650px) {
  .screen-shell[data-mode='dialogue'] {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 110px;
  }
  .screen-shell[data-mode='dialogue'] #world {
    position: absolute;
    inset: 0;
  }
  .screen-shell[data-mode='dialogue'] .dialogue {
    position: relative;
    inset: auto;
    margin: 10px;
    padding: 12px;
  }
  .dialogue-heading {
    font-size: 11px;
    line-height: 1.4;
    gap: 10px;
    letter-spacing: 0.3px;
  }
  .dialogue-heading > span:last-child {
    font-size: 11px;
    white-space: nowrap;
  }
  .dialogue p {
    font-size: 14px;
    line-height: 1.6;
  }
  .dialogue button {
    font-size: 13px;
    min-height: 44px;
  }
  .screen-shell[data-presentation='interlude'] {
    padding-top: 0;
  }
  .screen-shell[data-presentation='interlude'] .dialogue {
    min-height: 300px;
    margin: 0;
    padding: 20px;
  }
  .award-abilities {
    grid-template-columns: 1fr;
  }
  .echo-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .award-actions {
    flex-wrap: wrap;
  }
}
.console:fullscreen
  .screen-shell:is(
    [data-mode='dialogue'],
    [data-mode='communion'],
    [data-mode='memory-award'],
    [data-mode='ending']
  ),
.console.expanded
  .screen-shell:is(
    [data-mode='dialogue'],
    [data-mode='communion'],
    [data-mode='memory-award'],
    [data-mode='ending']
  ) {
  overflow: auto;
  min-height: 0;
}

/* A recovery review may expand beyond a fixed canvas. Keep the conversation
   and Continue in normal flow, with the room still visible above it. */
.screen-shell[data-mode='dialogue'][data-recovery='true'] {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: 80px;
}
.screen-shell[data-mode='dialogue'][data-recovery='true'] #world {
  position: absolute;
  inset: 0;
}
.screen-shell[data-mode='dialogue'][data-recovery='true'] .dialogue {
  position: relative;
  inset: auto;
  margin: 13px;
}
.recovery-summary {
  border-top: 1px solid var(--lcd2);
  margin-top: 16px;
  padding-top: 12px;
}
.recovery-summary h2 {
  margin: 0;
  font: bold 15px/1.5 monospace;
}
.dialogue .recovery-summary p {
  margin: 7px 0;
  font: 13px/1.6 monospace;
}
.recovery-resources {
  font-weight: bold !important;
}
.recovery-summary .battle-history > summary {
  min-height: 44px;
  display: list-item;
  align-content: center;
}
.dialogue .recovery-summary .battle-history p {
  font-size: 12px;
}

.dialogue-choices {
  display: grid;
  gap: 0.5rem;
}
.dialogue .dialogue-choice-hint {
  font-size: 0.75rem;
  line-height: 1.5;
}
.dialogue-choices[hidden],
#dialogue-choice-hint[hidden],
#dialogue-next[hidden] {
  display: none;
}
.dialogue-choices button {
  width: 100%;
  min-height: 44px;
  text-align: left;
  white-space: normal;
}
.dialogue-choices button:focus-visible {
  outline: 3px solid var(--accent, #d6b76a);
  outline-offset: 2px;
}
.map-landmarks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  font-size: 0.8rem;
  text-align: left;
}

/* Keep named landmarks in view alongside the map, including compact chapters. */
.map-panel #map-art {
  max-height: 220px;
}
.map-landmarks {
  font: 10px/1.45 monospace;
}
@media (max-width: 520px) {
  .map-panel #map-art {
    max-height: 180px;
  }
  .map-landmarks {
    grid-template-columns: 1fr 1fr;
    font-size: 9px;
  }
}
.dialogue-choices button {
  border: 1px solid var(--lcd2);
  padding: 9px 12px;
}

/* Resume the journal at the live thread; keep earlier returns available nearby. */
.screen-shell[data-mode='journal'] {
  min-height: 560px;
}
.journal-panel {
  padding: 12px;
  overscroll-behavior: contain;
}
.journal-header {
  position: sticky;
  top: -12px;
  z-index: 2;
  margin: -12px -12px 12px;
  padding: 12px 12px 8px;
  border-bottom: 2px solid var(--lcd3);
  background: var(--lcd0);
}
.journal-header .panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 4px 8px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
.journal-header .panel-heading h2 {
  margin: 0;
  font-size: 20px;
}
.journal-header .panel-heading > span {
  grid-column: 1;
  font: 10px/1.4 monospace;
  letter-spacing: 0;
}
.journal-header .close-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  align-self: center;
}
.journal-header .journal-tabs,
.journal-header .map-switch {
  margin: 0;
  padding: 0;
}
.journal-header .journal-tabs button,
.journal-header .map-switch button {
  min-height: 44px;
  font-size: 12px;
}
.journal-panel .journal-entry > div {
  min-width: 0;
  flex: 1;
}
.journal-panel .journal-entry-title {
  flex-wrap: wrap;
  align-items: baseline;
}
.journal-panel .journal-entry-title span {
  font-size: 10px;
  white-space: normal;
}
.journal-panel .journal-entry p,
.journal-panel .side-clues,
.journal-panel .journal-empty,
.journal-panel .memory-intro {
  font: 12px/1.65 monospace;
}
.journal-panel .journal-entry small {
  font: 11px/1.6 monospace;
}
.journal-panel .journal-entry.complete {
  opacity: 1;
}
.journal-panel .journal-current {
  border: 1px solid var(--lcd2);
  padding: 14px;
  background: color-mix(in srgb, var(--lcd1) 20%, transparent);
}
.journal-panel .journal-current .journal-number {
  color: var(--lcd3);
}
.journal-map {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  margin-top: 12px;
  font-size: 12px;
  scroll-margin-top: 168px;
}
.journal-section {
  margin-top: 20px;
}
.journal-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: bold 12px/1.5 monospace;
  margin: 0 0 8px;
}
.journal-section-title span {
  font-weight: normal;
}
.journal-history {
  margin-top: 18px;
  border-top: 1px solid var(--lcd2);
}
.journal-history > summary {
  cursor: pointer;
  min-height: 44px;
  padding: 15px 0;
  font: bold 12px/1.5 monospace;
  scroll-margin-top: 168px;
}
.journal-history > summary:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: 3px;
}
.journal-panel .panel-foot {
  font: 10px/1.6 monospace;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 650px) {
  .journal-panel .journal-entry small,
  .journal-panel .journal-entry-title span {
    font-size: 10px;
  }
  .journal-panel .journal-current {
    padding: 12px;
  }
}

.map-finder {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  font: 11px/1.5 monospace;
}
.map-finder select {
  min-width: 0;
  min-height: 36px;
  flex: 1;
  border: 1px solid var(--lcd2);
  background: var(--lcd0);
  color: var(--lcd3);
  padding: 6px;
  font: inherit;
}
.map-finder select:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: 2px;
}
.map-selection {
  margin: 8px 0;
  text-align: left;
  font: bold 12px/1.6 monospace;
}
.map-selection:empty {
  display: none;
}
@media (max-width: 650px) {
  .map-finder {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .map-finder select {
    min-height: 40px;
    width: 100%;
  }
}

/* A task-first field guide with topics that follow the player's discoveries. */
.screen-shell[data-mode='help'] {
  min-height: 560px;
}
.console:fullscreen .screen-shell[data-mode='help'],
.console.expanded .screen-shell[data-mode='help'] {
  min-height: 0;
}
.guide-panel {
  padding: 12px;
  scroll-padding-top: 84px;
  overscroll-behavior: contain;
}
.guide-panel .panel-heading {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 4px 12px;
  min-height: 64px;
  padding: 12px 0 10px;
  background: var(--lcd0);
}
.guide-panel .panel-heading h2,
.guide-panel .panel-heading > span {
  grid-column: 1;
}
.guide-panel .close-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 44px;
}
.guide-task {
  padding: 10px 12px;
  border-left: 3px solid var(--lcd3);
  background: color-mix(in srgb, var(--lcd1) 35%, var(--lcd0));
}
.guide-task > span {
  font: 11px monospace;
}
.guide-panel .guide-task h3 {
  margin: 7px 0;
}
.guide-panel .guide-task p {
  margin: 0;
}
.guide-topic {
  margin: 10px 0;
  border: 1px solid var(--lcd2);
}
.guide-topic > summary {
  min-height: 46px;
  padding: 12px;
  font: bold 13px/1.6 monospace;
  cursor: pointer;
}
.guide-topic > summary:focus-visible {
  outline: 2px solid var(--lcd3);
  outline-offset: -4px;
}
.guide-topic[open] > summary {
  border-bottom: 1px solid var(--lcd2);
}
.guide-topic-body {
  padding: 0 12px 12px;
}
.guide-topic-body p {
  margin: 12px 0 0;
}
.guide-controls > div {
  min-width: 0;
}
.guide-controls dd {
  margin: 4px 0 0;
}
.guide-controls kbd {
  font: bold 12px/1.6 monospace;
  overflow-wrap: anywhere;
}
.guide-memory + .guide-memory {
  border-top: 1px solid var(--lcd2);
  margin-top: 14px;
}
.guide-panel .panel-foot {
  font-size: 11px;
}

/* Readable memory comparisons, with a reachable exit and return to the library. */
.memories-panel {
  padding: 12px;
  scroll-padding-top: 84px;
  overscroll-behavior: contain;
}
.memories-panel .panel-heading {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 4px 8px;
  margin: -12px -12px 12px;
  padding: 12px;
  background: var(--lcd0);
}
.memories-panel .panel-heading h2 {
  font-size: 20px;
  margin: 0;
}
.memories-panel .panel-heading > span {
  grid-column: 1;
  font: 10px/1.4 monospace;
  letter-spacing: 0;
}
.memories-panel .close-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  align-self: center;
}
.memories-panel .memory-intro,
.memories-panel .foundation-summary p,
.memories-panel .memory-power-note,
.memories-panel .memory-detail dd,
.memories-panel .memory-field p {
  font: 12px/1.6 monospace;
}
.memories-panel .attribute-strip dt {
  font-size: 10px;
}
.memories-panel .attribute-strip dd {
  font-size: 15px;
}
.memories-panel .memory-slot {
  min-width: 0;
  padding: 6px;
}
.memories-panel .memory-slot strong {
  min-width: 0;
  font: 14px/1.3 Georgia;
}
.memories-panel .memory-slot > span,
.memories-panel .memory-slot small {
  font: 10px/1.4 monospace;
}
.memories-panel .memory-slot button {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
}
.memories-panel .memory-index-row {
  min-height: 56px;
  padding: 8px;
  gap: 8px;
}
.memories-panel .memory-index-row strong {
  font-size: 13px;
}
.memories-panel .memory-index-row small {
  font-size: 11px;
}
.memories-panel .memory-detail {
  min-width: 0;
  gap: 0;
}
.memories-panel .memory-detail h3 {
  font-size: 24px;
}
.memories-panel .memory-detail .memory-quote {
  font: italic 14px/1.5 Georgia;
  min-height: 0;
  margin: 8px 0 12px;
}
.memories-panel .memory-detail dt {
  font: bold 11px/1.5 monospace;
}
.memories-panel .memory-detail .equip-actions {
  gap: 8px;
}
.memories-panel .memory-detail .equip-actions button,
.memories-panel .memory-detail .equip-actions button small,
.memories-panel .memory-slot-action {
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.memories-panel .memory-detail .equip-actions button {
  padding: 10px 8px;
  min-height: 44px;
}
.memories-panel .memory-field summary {
  font-size: 12px;
  min-height: 44px;
  padding: 10px 0;
}
.memories-panel .memory-back {
  align-self: flex-start;
  font: 12px/1.5 monospace;
  min-height: 44px;
  padding: 8px 10px;
  margin-bottom: 12px;
  white-space: normal;
}
.memories-panel .panel-foot {
  font: 10px/1.5 monospace;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 850px) {
  .memories-panel .memory-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .screen-shell[data-mode='memories'] {
    min-height: 560px;
  }
  .memories-panel .memory-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 2px 4px;
  }
  .memories-panel .memory-slot strong {
    grid-column: 1;
  }
  .memories-panel .memory-slot button {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .memories-panel .memory-slot small {
    grid-row: 1 / 3;
    grid-column: 2;
  }
}
@media (max-width: 360px) {
  .memories-panel .memory-index,
  .memories-panel .memory-detail .equip-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.console:fullscreen .screen-shell[data-mode='memories'],
.console.expanded .screen-shell[data-mode='memories'] {
  min-height: 0;
}

/* Expanded play owns its controls and fits the available viewport in every mode. */
.fullscreen-menus {
  display: none;
}
html.game-expanded {
  overflow: hidden;
}
.console:fullscreen {
  height: 100dvh;
}
.console.expanded {
  width: auto;
}
.console:is(:fullscreen, .expanded) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: 'top' 'screen' 'menus' 'pad' 'footer';
  padding: 0;
}
.console:is(:fullscreen, .expanded) .screen-top {
  grid-area: top;
  height: 40px;
  min-width: 0;
  padding: 0 12px;
}
.console:is(:fullscreen, .expanded) .screen-shell[data-mode] {
  grid-area: screen;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
.console:is(:fullscreen, .expanded) .console-footer {
  grid-area: footer;
  height: 44px;
  padding: 0 8px;
  justify-content: flex-end;
}
.console:is(:fullscreen, .expanded) .console-footer .live-label {
  display: none;
}
.console:is(:fullscreen, .expanded) .console-tools {
  gap: 4px;
}
.console:is(:fullscreen, .expanded) .console-tools button {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.console:is(:fullscreen, .expanded) .fullscreen-menus {
  grid-area: menus;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 4px 8px;
}
.console:is(:fullscreen, .expanded):has(.screen-shell[data-mode='roam']) .fullscreen-menus {
  display: grid;
}
.fullscreen-menus button {
  min-width: 0;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--ink);
  font: 12px/1.4 monospace;
}
.console:is(:fullscreen, .expanded) .touch-controls {
  display: none;
  grid-area: pad;
  margin: 0;
  padding: 8px 20px 18px;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}
.console:is(:fullscreen, .expanded) .dpad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
  touch-action: none;
}
.console:is(:fullscreen, .expanded) .dpad button {
  padding: 0;
  min-width: 48px;
  min-height: 48px;
  background: var(--panel-light);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 18px;
  touch-action: none;
}
.console:is(:fullscreen, .expanded) .dpad button:first-child {
  grid-column: 2;
}
.console:is(:fullscreen, .expanded) .dpad button:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.console:is(:fullscreen, .expanded) .dpad button:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.console:is(:fullscreen, .expanded) .dpad button:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}
.console:is(:fullscreen, .expanded) .touch-a {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #7e945f;
  background: var(--accent);
  color: var(--bg);
  font: 22px Georgia;
  touch-action: none;
}
.console:is(:fullscreen, .expanded) .touch-a span {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font: 10px monospace;
  color: var(--muted);
}
.console:is(:fullscreen, .expanded) [data-action][data-pressed='true'] {
  box-shadow: inset 0 2px 4px #0008;
  border-color: var(--accent);
}
.console:is(:fullscreen, .expanded) .dpad [data-pressed='true'] {
  background: var(--accent);
  color: var(--bg);
}
.console:is(:fullscreen, .expanded) .screen-shell[data-mode='dialogue'] {
  padding-top: 80px;
  overflow: auto;
}
.console:is(:fullscreen, .expanded) .screen-shell[data-mode='dialogue'] .dialogue {
  position: relative;
  inset: auto;
  margin: 12px;
}
.console:is(:fullscreen, .expanded) .screen-shell[data-presentation='interlude'] {
  padding-top: 0;
}
@media (pointer: coarse), (max-width: 850px) {
  .console:is(:fullscreen, .expanded):has(.screen-shell[data-mode='roam']) .touch-controls {
    display: flex;
  }
}
@media (max-width: 599px) {
  .console:is(:fullscreen, .expanded) .fullscreen-menus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (pointer: coarse) and (min-width: 600px) and (max-height: 600px),
  (min-width: 600px) and (max-width: 850px) and (max-height: 600px) {
  .console:is(:fullscreen, .expanded):has(.screen-shell[data-mode='roam']) {
    grid-template-columns: 176px minmax(0, 1fr) 80px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'top top top' '. screen .' 'menus menus menus' 'footer footer footer';
  }
  .console:is(:fullscreen, .expanded) .touch-controls {
    grid-area: 2 / 1 / 3 / -1;
    z-index: 2;
    padding: 4px 8px 18px;
    pointer-events: none;
  }
  .console:is(:fullscreen, .expanded) .touch-controls button {
    pointer-events: auto;
  }
}

/* Ada's protection surrounds Wren for the action; it is not a healing pulse. */
.warmth-aura {
  position: absolute;
  width: 92px;
  height: 96px;
  left: 12%;
  margin-left: -20px;
  bottom: 0;
  border: 4px double var(--lcd1);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--lcd2);
  pointer-events: none;
  animation: guard-pulse 0.65s steps(4);
}
@media (prefers-reduced-motion: reduce) {
  .warmth-aura {
    animation: none;
  }
}

@media (max-width: 600px) {
  .warmth-aura {
    width: 52px;
    height: 52px;
    margin-left: -10px;
  }
}