/* MoonCat Odyssey — moonbase terminal pixel UI.
   Look rules (MOONCAT_ART_DIRECTION.md + aesthetic direction doc):
   deep navy/black-violet base, cyan/yellow/magenta/mint accents,
   monospace terminal voice, square chunky pixel borders, no glossy blur. */

html, body { margin: 0; min-height: 100%; background: #050713; color: #eaf3ff; font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; }
body { overflow: auto; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 360px minmax(640px, 1fr); gap: 18px; padding: 18px; box-sizing: border-box; }
.hud { max-height: calc(100vh - 36px); overflow-y: auto; border: 2px solid rgba(110, 243, 255, .38); border-radius: 0; padding: 22px; background: #0b1022; box-shadow: 0 0 0 4px #050713, 0 0 0 6px rgba(110, 243, 255, .14); }
.eyebrow { color: #6ef3ff; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; margin: 0 0 8px; }
h1 { margin: 0; font-size: 30px; line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; color: #fff5c7; text-shadow: 3px 3px 0 #123a4a; }
.lede { color: #b9c7df; line-height: 1.45; font-size: 13px; }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0; }
.readouts div { border: 1px solid rgba(154, 165, 199, .30); background: #070b1c; border-radius: 0; padding: 10px; }
.readouts span { display: block; color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.readouts strong { color: #fff5c7; font-size: 15px; }
.controls { display: grid; grid-template-columns: auto 1fr; gap: 9px 10px; align-items: center; color: #c6d7ef; font-size: 12px; }
.controls kbd, .portal-hint kbd { border: 1px solid rgba(110,243,255,.38); border-bottom: 3px solid rgba(110,243,255,.55); border-radius: 0; padding: 4px 7px; color: #6ef3ff; background: #050713; text-align: center; font-family: inherit; }
.portal-hint { margin-top: 18px; color: #ffd866; font-size: 12px; line-height: 1.5; }
.objective { color: #dff8ff; border: 1px solid rgba(255, 216, 102, .34); background: #0d0e20; border-radius: 0; padding: 10px 12px; font-size: 12px; line-height: 1.45; box-shadow: inset 3px 0 0 #ffd866; }
.cat-picker { display: grid; gap: 7px; color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin: -8px 0 16px; }
.cat-picker select, #catSelect { width: 100%; border: 1px solid rgba(110,243,255,.38); border-radius: 0; color: #fff5c7; background: #050713; padding: 10px 12px; font: inherit; text-transform: none; letter-spacing: 0; outline: none; }
.safety { margin-top: 16px; color: #9affb0; font-size: 11px; line-height: 1.5; }
.save-status--error { color: #ff5f79 !important; text-shadow: 0 0 10px rgba(255,95,121,.35); }
code { color: #ffd866; }
.game-wrap { position: relative; min-width: 0; }
#game { width: 100%; height: calc(100vh - 36px); border-radius: 0; border: 2px solid rgba(110,243,255,.38); background: #050713; box-shadow: 0 0 0 4px #050713, 0 0 0 6px rgba(110,243,255,.14); touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; }
/* CRT scanlines over the playfield only — subtle, behind the overlay cards. */
.game-wrap::after { content: ''; position: absolute; inset: 2px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(5, 7, 19, .16) 0 1px, transparent 1px 4px); }
.economyPanel { margin: 16px 0 0; display: grid; gap: 8px; border: 1px solid rgba(154,255,176,.32); background: #081120; border-radius: 0; padding: 12px; }
.economyPanel div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: baseline; }
.economyPanel span { color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.economyPanel strong { color: #9affb0; font-size: 12px; line-height: 1.3; }
.economyPanel button { border: 1px solid rgba(110,243,255,.42); border-radius: 0; background: #0d1830; color: #bff7ff; padding: 7px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #050713; }
.economyPanel button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.economyPanel button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.managementPanel { margin: 16px 0 0; display: grid; gap: 10px; border: 1px solid rgba(255,107,214,.36); background: #100a1e; border-radius: 0; padding: 12px; }
.managementGrid { display: grid; gap: 8px; }
.managementGrid div, .managementColumns > div { border: 1px solid rgba(154,165,199,.22); background: #070b1c; border-radius: 0; padding: 10px; }
.managementGrid span { display: block; color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.managementGrid strong { color: #ffb7ef; font-size: 12px; line-height: 1.3; }
.managementColumns { display: grid; gap: 8px; }
.managementColumns h2 { margin: 0 0 6px; color: #fff5c7; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.managementColumns p, .managementList { margin: 0; color: #dff8ff; font-size: 12px; line-height: 1.4; }
.managementList { padding-left: 0; list-style: none; }
.managementList li { margin: 5px 0; }
.cat-holding-row { width: 100%; display: grid; gap: 4px; text-align: left; border: 1px solid rgba(110,243,255,.28); border-radius: 0; padding: 8px 9px; color: #dff8ff; background: #060a18; cursor: pointer; font: inherit; }
.cat-holding-row[aria-current="true"] { border-color: #ffd866; box-shadow: 2px 2px 0 rgba(255,216,102,.30); color: #fff5c7; }
.marketplaceBadge { display: inline-block; border-radius: 0; padding: 3px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.marketplaceBadge--listed { color: #ffd0d0; background: rgba(255,80,80,.18); border: 1px solid rgba(255,80,80,.4); }
.marketplaceBadge--held { color: #9affb0; background: rgba(154,255,176,.12); border: 1px solid rgba(154,255,176,.38); }
.marketplaceBadge--unknown { color: #ffd866; background: rgba(255,216,102,.10); border: 1px solid rgba(255,216,102,.34); }
.battlePanel { margin: 16px 0 0; border: 1px solid rgba(110,243,255,.32); background: #081424; border-radius: 0; padding: 12px; display: grid; gap: 10px; }
.battleGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.battle-action-button { border: 1px solid rgba(255,216,102,.45); border-radius: 0; background: #1a1502; color: #fff5c7; padding: 10px; cursor: pointer; font: inherit; font-weight: 700; box-shadow: 0 3px 0 #050713; }
.battle-action-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.battle-action-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#pigmentTypePreview { margin: 0; color: #c6d7ef; font-size: 12px; line-height: 1.45; }
.encounterTargetPanel { display: grid; gap: 4px; border: 1px solid rgba(154,255,176,.30); border-radius: 0; background: #071527; padding: 9px; color: #c6d7ef; font-size: 12px; }
.encounterTargetPanel strong { color: #9affb0; }
.battleResultFlash { box-shadow: 2px 2px 0 rgba(154,255,176,.45); }
.audioControls { margin: 16px 0 0; display: grid; gap: 9px; border: 1px solid rgba(255,216,102,.30); border-radius: 0; padding: 10px; background: #0d0e20; }
.audioControls label { display: flex; justify-content: space-between; gap: 8px; color: #c6d7ef; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.audioControls input[type="range"] { width: 100%; accent-color: #6ef3ff; cursor: pointer; }
.audioButton { width: 100%; border: 1px solid rgba(255,216,102,.40); border-radius: 0; padding: 10px 12px; color: #fff5c7; background: #131006; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #050713; }
.audioButton:active { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.audioButton[aria-pressed="true"] { color: #06101d; background: #ffd866; border-color: #ffd866; }
.completionModal { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 0; background: rgba(3,6,16,.74); }
.completionModal[hidden] { display: none; }
.completionCard { width: min(480px, calc(100% - 44px)); border: 2px solid #ffd866; border-radius: 0; padding: 26px; background: #0b1022; box-shadow: 0 0 0 4px #050713, 0 0 0 6px rgba(255,216,102,.30), 6px 6px 0 rgba(5,7,19,.9); text-align: center; }
.completionCard h2 { margin: 4px 0 8px; color: #fff5c7; font-size: 24px; text-transform: uppercase; letter-spacing: .04em; text-shadow: 2px 2px 0 #123a4a; }
.completionCard p { color: #dff8ff; line-height: 1.45; font-size: 13px; }
.completionCard button { border: 1px solid #6ef3ff; border-radius: 0; padding: 11px 18px; margin: 4px; color: #06101d; background: #6ef3ff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #0a3b46; }
.completionCard button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a3b46; }
.touchControls { position: absolute; right: 24px; bottom: 24px; display: none; grid-template-columns: repeat(4, 54px); grid-template-rows: repeat(3, 54px); gap: 8px; opacity: .94; }
.touchControls button { border: 1px solid rgba(110,243,255,.5); border-radius: 4px; color: #dff8ff; background: rgba(5,10,24,.85); font-family: inherit; font-size: 22px; font-weight: 800; box-shadow: 0 3px 0 #050713; }
.touchControls button:disabled { opacity: .38; filter: grayscale(.4); }
.touchControls [data-touch="up"] { grid-column: 2; grid-row: 1; }
.touchControls [data-touch="left"] { grid-column: 1; grid-row: 2; }
.touchControls [data-touch="portal"] { grid-column: 2; grid-row: 2; color: #ffd866; }
.touchControls [data-touch="encounter"] { grid-column: 4; grid-row: 2; color: #ffb7ef; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.touchControls [data-touch="right"] { grid-column: 3; grid-row: 2; }
.touchControls [data-touch="down"] { grid-column: 2; grid-row: 3; }
@media (hover: none), (max-width: 960px) { .touchControls { display: grid; } }
@media (max-width: 960px) { body { overflow: auto; } .shell { height: auto; grid-template-columns: 1fr; } #game { height: 62vh; } }


.topStatusBar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: .8rem 1rem; border: 1px solid rgba(154,255,176,.36); border-radius: 0; background: #081120; box-shadow: 2px 2px 0 rgba(5,7,19,.9); margin-bottom: .75rem; }
.topStatusBar span { display: block; color: #9fb6c8; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.topStatusBar strong { color: #fff0a6; font-size: .9rem; }
.hud--details { position: relative; }
.sideMenuTabs { display: flex; gap: .5rem; margin: .25rem 0 .75rem; }
.sideMenuTabs button { border: 1px solid rgba(191,247,255,.42); background: #0d1830; color: #bff7ff; border-radius: 0; padding: .55rem .85rem; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #050713; }
.bottomActionBar button { padding: .24rem .28rem; font-size: .54rem; width: 52px; min-height: 28px; border: 1px solid rgba(191,247,255,.38); background: rgba(13,24,48,.78); color: #bff7ff; border-radius: 0; font-family: inherit; font-weight: 700; line-height: .96; cursor: pointer; box-shadow: 0 1px 0 #050713; text-transform: uppercase; letter-spacing: .015em; white-space: normal; overflow-wrap: anywhere; }
.sideMenuTabs button:active, .bottomActionBar button:active { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.sideMenuTabs button[aria-selected="true"] { color: #06111f; background: #ffd866; border-color: #ffd866; }
.panel--collapsed { display: none !important; }
.bottomActionBar { display: flex; flex-direction: column; gap: .24rem; align-items: flex-start; justify-content: flex-start; margin: -.25rem 0 .75rem; padding: .28rem; border: 1px solid rgba(255,240,166,.20); border-radius: 0; background: rgba(5, 12, 26, .58); box-shadow: 0 0 0 1px rgba(5,7,19,.72); width: max-content; }

.onboardingPanel { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; margin: .75rem 0; padding: 1rem; border: 2px solid rgba(255,216,102,.42); border-radius: 0; background: #0d0e20; box-shadow: 0 0 0 4px #050713, 4px 4px 0 rgba(5,7,19,.9); }
.onboardingPanel[hidden] { display: none !important; }
.onboardingPanel h2 { margin: .15rem 0 .5rem; font-size: 1.05rem; color: #fff5c7; text-transform: uppercase; letter-spacing: .03em; }
.onboardingSteps { margin: 0 0 .5rem 1.15rem; color: #d8e8ff; font-size: 13px; }
.onboardingPanel button { border: 1px solid rgba(154,255,176,.5); background: #9affb0; color: #06111f; border-radius: 0; padding: .7rem 1rem; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #0a3b2a; }
.onboardingPanel button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a3b2a; }


.onboardingProgress { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.onboardingProgress li { border: 1px solid rgba(154,255,176,.28); border-radius: 0; padding: 6px 10px; color: #bff7ff; background: #060a18; font-size: 12px; }
.onboardingProgress li::before { content: '○ '; color: #fff0a6; }
.onboardingProgress li.onboardingStep--complete { color: #9affb0; border-color: rgba(154,255,176,.65); background: rgba(154,255,176,.10); }
.onboardingProgress li.onboardingStep--complete::before { content: '✓ '; color: #9affb0; }


.moonbase-terminal { border-color: rgba(110,243,255,.40); background: #060d1c; box-shadow: inset 0 0 0 1px rgba(110,243,255,.10), inset 4px 4px 0 rgba(5,7,19,.6); }
.rescueLogPanel { margin: 14px 0 0; border: 1px solid rgba(154,255,176,.32); border-radius: 0; padding: 12px; }
.rescueLogPanel ol { margin: 0; padding-left: 18px; color: #dff8ff; font-size: 12px; line-height: 1.45; }
.passport-card { display: grid; gap: 8px; border: 2px solid rgba(255,216,102,.36); border-radius: 0; padding: 12px; image-rendering: pixelated; box-shadow: 3px 3px 0 rgba(5,7,19,.9); }
.passport-card div { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: baseline; }
.passport-card span { color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.passport-card strong { color: #fff5c7; font-size: 12px; }
.route-guidance, #routeGuidanceLabel { color: #fff0a6; text-shadow: 0 0 8px rgba(255,240,166,.34); }

.pixel-shell { border-style: solid; image-rendering: pixelated; box-shadow: 0 0 0 2px rgba(110,243,255,.22), 0 0 0 4px #050713, 0 0 0 6px rgba(110,243,255,.10); }
.glyphHoldingsPanel { border: 2px solid rgba(110,243,255,.46); background: #050a16; padding: 12px; }
.glyphHoldingsList { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.glyphHolding { display: flex; justify-content: space-between; border: 1px solid rgba(255,255,255,.20); padding: 6px 8px; background: #0a0f22; text-transform: capitalize; font-size: 12px; }
.glyphExchangeHint { color: #fff0a6; font-size: 11px; }