[hidden] { display: none !important; }
button:focus-visible, select:focus-visible { outline: 3px solid #ffd166; outline-offset: 4px; }
.protocol-label { display: block; color: #ff9e00; font: 11px monospace; letter-spacing: 3px; margin: -4px 0 16px; }
.modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; touch-action: pan-y; }
.modal-card * { touch-action: pan-y; }
.menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.menu-actions .action-btn { padding: 12px 24px; font-size: 14px; }
.mode-picker { display: flex; flex-direction: column; gap: 8px; color: #94a3b8; text-align: left; font-size: 10px; letter-spacing: 1px; margin-bottom: 18px; }
.mode-picker select { background: #10172b; color: #e2e8f0; border: 1px solid #334155; border-radius: 10px; padding: 10px; font: 13px 'Segoe UI', sans-serif; width: 100%; }
.modal .control-note { font-size: 10px; color: #94a3b8; margin: 16px 0 0; line-height: 1.7; }
.secondary-btn { display: block; margin: 16px auto 0; border: 1px solid #475569; border-radius: 12px; background: #10172b; color: #cbd5e1; padding: 10px 16px; cursor: pointer; font-size: 11px; }
#mission-bar { position: absolute; top: 62px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; pointer-events: none; z-index: 40; font: 10px monospace; color: #cbd5e1; }
.mission-route { display: flex; align-items: center; gap: 10px; }
#route-progress { appearance: none; width: 110px; height: 4px; border: 0; border-radius: 4px; overflow: hidden; background: #263249; }
#route-progress::-webkit-progress-bar { background: #263249; }
#route-progress::-webkit-progress-value { background: #00ffa3; }
#route-progress::-moz-progress-bar { background: #00ffa3; }
#dash-status { color: #00ffa3; }
.mission-status { display: flex; gap: 14px; flex-shrink: 0; }
#pace-status { color: #ffd166; }
.performance-line { color: #00ffa3 !important; font: 11px monospace !important; }
#advisor { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 32px)); padding: 8px 12px; background: rgba(8,12,28,.9); border: 1px solid #253854; border-radius: 10px; font-size: 11px; color: #cbd5e1; text-align: center; pointer-events: none; z-index: 40; }
.advisor-badge { color: #00f0ff; margin-right: 10px; font-size: 10px; font-weight: 700; }
.sys-btn { min-width: 36px; }
@media (max-width: 960px), (pointer: coarse) {
    #advisor { top: 87px; bottom: auto; font-size: 10px; padding: 5px 8px; }
    #mission-bar { top: 65px; left: 10px; right: 10px; }
    #touch-controls { bottom: max(8px, env(safe-area-inset-bottom)); }
    #desktop-hints { display: none; }
    #top-bar { align-items: flex-start; }
    .hud-left { gap: 4px; }
    .hud-panel { padding: 3px 7px; }
    .system-controls { gap: 4px; }
}
@media (max-height: 500px) {
    .modal-card { max-width: 620px; padding: 16px 24px; }
    .modal h1 { font-size: 24px; margin-bottom: 6px; }
    .modal p { font-size: 12px; margin-bottom: 10px; }
    .protocol-label { margin-bottom: 8px; }
    .features-grid { gap: 5px; font-size: 9px; margin-bottom: 8px; }
    .feature-item { padding: 5px 7px; line-height: 1.35; }
    .feature-item strong { margin-bottom: 2px; }
    .mode-picker { flex-direction: row; align-items: center; margin-bottom: 10px; }
    .mode-picker select { width: auto; flex: 1; padding: 7px; }
    .modal .control-note { margin-top: 8px; }
    #advisor { top: 58px; width: min(520px, calc(100% - 140px)); }
    #mission-bar { top: 43px; }
    .touch-btn { width: 52px; height: 52px; }
    .touch-btn.jump-btn { width: 62px; height: 62px; }
}
@media (orientation: portrait) {
    #rotate-hint { top: 190px; font-size: 11px; max-width: 90%; width: max-content; }
    .hud-left { max-width: 100%; }
    .system-controls { position: absolute; top: 70px; right: 0; max-width: none; }
    .features-grid { font-size: 11px; }
    .modal-card { padding: 24px 18px; }
    #mission-bar { top: 120px; flex-wrap: wrap; gap: 6px; }
    #advisor { top: 158px; }
    #rotate-hint { top: 207px; }
    #route-progress { width: 55px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

#mission-bar { top: var(--hud-bottom, 62px); }
@media (max-width: 960px), (pointer: coarse), (max-height: 500px) {
    #advisor { top: var(--mission-bottom, 87px); }
}
@media (orientation: portrait) {
    #advisor { top: var(--mission-bottom, 158px); }
    #rotate-hint { top: calc(var(--mission-bottom, 158px) + 50px); }
}

/* The mobile shell reserves distinct spaces for information, play and thumbs. */
:root { color-scheme: dark; --pilot: #5ce8ff; --pilot-accent: #ff648b; --control-size: 56px; --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --scene-top: 116px; --dock-space: 88px; }
html, body { height: 100%; height: 100dvh; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #080d18; }
button, select, input { font: inherit; touch-action: manipulation; }
button { transition: background .15s, border-color .15s, transform .15s; }
button:disabled { cursor: default; }
#game-container { background: radial-gradient(ellipse at 65% 15%, #1c2441, transparent 60%), #080d18; }
#playfield { position: absolute; top: var(--scene-top); bottom: var(--dock-space); left: max(6px, var(--safe-left)); right: max(6px, var(--safe-right)); display: flex; align-items: center; justify-content: center; }
canvas { flex: none; border: 1px solid #35415a; border-radius: 16px; box-shadow: 0 18px 60px #0006; touch-action: none; }
canvas:focus-visible { outline: 2px solid #526880; outline-offset: 1px; }
#top-bar { top: calc(8px + var(--safe-top)); left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right)); align-items: flex-start; gap: 8px; }
.hud-left { gap: 5px; flex: 1; min-width: 0; }
.hud-panel { background: #101a2c; border: 1px solid #2a3c50; box-shadow: none; backdrop-filter: none; padding: 5px 9px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.hud-value { color: #99efff; text-shadow: none; font-size: 13px; }
.hud-label { color: #b0bed2; font-size: 9px; letter-spacing: .4px; }
.system-controls { position: static; gap: 5px; }
.sys-btn, .icon-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border: 1px solid #3c4d67; background: #132035; color: #b1c7e0; border-radius: 13px; font-size: 20px; cursor: pointer; }
.sys-btn:hover, .icon-button:hover { background: #203451; color: #fff; }
#btn-settings { color: #8fe4ff; }
#mission-bar { left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right)); gap: 8px; font-size: 10px; line-height: 1.5; color: #b8c9dc; }
.mission-route { min-width: 0; gap: 8px; }
#route-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-status { gap: 10px; }
#route-progress { width: 75px; flex-shrink: 0; height: 4px; }
#advisor { top: var(--mission-bottom); bottom: auto; width: calc(100% - max(24px, var(--safe-left) + var(--safe-right))); max-width: 720px; padding: 5px 10px; border-radius: 8px; background: #101b2c; border-color: #2a3b50; font-size: 10px; line-height: 1.45; color: #b9c9db; }
.advisor-badge { color: #87e9ff; font-size: 9px; }
#rotate-hint, #desktop-hints { display: none; }
#touch-controls { padding: 0 max(12px, var(--safe-left)) 0 max(12px, var(--safe-right)); bottom: calc(10px + var(--safe-bottom)); gap: 10px; }
.touch-group { gap: 6px; }
.touch-btn, .touch-btn.down-btn, .touch-btn.dash-btn, .touch-btn.jump-btn { width: var(--control-size); height: var(--control-size); min-width: 44px; min-height: 44px; flex: none; border-radius: 19px; background: linear-gradient(145deg, #17283d, #101b2b); border: 1px solid #395676; color: #a1eeff; box-shadow: 0 4px 0 #030912, inset 0 1px 0 #a3dbff12; backdrop-filter: none; font-size: 20px; }
.touch-btn.down-btn { color: #e7c991; border-color: #695537; }
.touch-btn.dash-btn { color: #ffb0c3; border-color: #69435d; }
.touch-btn.jump-btn { color: #b9ffc8; border-color: #3d6555; width: calc(var(--control-size) + 6px); }
.touch-btn.pressed, .touch-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #030912; background: #24445d; }
html[data-hand="left"] #touch-controls { flex-direction: row-reverse; }
html[data-controls="large"] { --control-size: 68px; }
.combo-badge { animation: none; color: #ffce73; border-color: #695735; }
.shield-badge { color: #72f8c6; border-color: #38634f; }
.battery-cell { background: #ff7caa; box-shadow: none; transition: background .15s; }
.modal { background: #070d17eb; backdrop-filter: blur(12px); padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)); }
.modal-card { border: 1px solid #36425a; box-shadow: 0 25px 100px #0008; animation: none; border-radius: 24px; background: linear-gradient(155deg, #162034, #0e1627 68%); color: #d8e2ee; max-height: calc(100dvh - max(24px, var(--safe-top) + var(--safe-bottom))); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3b526f transparent; text-align: center; padding: 30px; }
.modal-card, .modal-card * { touch-action: pan-y pinch-zoom; }
.modal-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - max(24px, var(--safe-top) + var(--safe-bottom))); }
.modal h1 { text-shadow: none; }
.modal-card h2 { font-size: 28px; color: #edf4fb; letter-spacing: -1px; margin: 8px 0 12px; text-wrap: balance; }
.modal p { color: #adbfd3; line-height: 1.7; }
.action-btn { min-height: 46px; border-radius: 12px; color: #061827; font-size: 12px; letter-spacing: .5px; background: linear-gradient(110deg, #88edff, #70b9ff); box-shadow: 0 4px 16px #61caff18; padding: 12px 22px; font-weight: 800; }
.action-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 22px #61caff30; }
.secondary-btn { min-height: 44px; margin: 8px auto; background: #172339; border-color: #374860; font-size: 12px; padding: 10px 15px; }
.hub-card { width: min(1040px, 100%); max-width: 1040px; padding: 24px 30px 18px; text-align: left; }
.hub-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.wordmark { color: #f4f9ff; font-size: 22px; font-weight: 900; letter-spacing: 3px; }
.wordmark > span:first-child { color: #9ceaff; }
.wordmark > span:first-child, .hero-copy h1 em, #btn-settings, .advisor-badge { color: var(--pilot); }
.wordmark .brand-dot { color: #ffce73; font-size: 8px; vertical-align: top; margin-left: 7px; }
.offline-tag { margin-left: auto; font: 9px monospace; letter-spacing: 1.3px; color: #99c6b9; }
.hub-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.eyebrow { display: block; color: #8ea5be; font: 9px monospace; letter-spacing: 1.5px; line-height: 1.6; }
.hero-copy h1 { font-size: clamp(32px, 4.5vw, 55px); color: #f2f7ff; line-height: 1.08; margin: 14px 0 18px; letter-spacing: -2px; }
.hero-copy h1 em { color: #97e9ff; font-style: normal; }
.hero-copy p { font-size: 13px; line-height: 1.7; max-width: 345px; margin: 0; }
.hero-art { width: 100%; height: auto; border: 1px solid #43506c66; border-radius: 24px; }
.launch-row { display: flex; align-items: end; gap: 14px; margin: 20px 0; }
.launch-row .mode-picker { margin: 0; flex: 1; font-size: 9px; }
.mode-picker select, .settings-grid select { min-height: 44px; background: #101b2c; border-color: #3a4d66; color: #dce8f4; font-size: 12px; border-radius: 10px; }
.menu-actions { flex-shrink: 0; gap: 8px; }
.menu-actions .action-btn { padding: 12px 20px; font-size: 12px; }
#start-btn:not(:only-child) { background: #1d2d42; color: #c9dded; border: 1px solid #40516a; box-shadow: none; }
#continue-btn[hidden] + #start-btn { background: linear-gradient(110deg, #88edff, #70b9ff); color: #061827; border: 0; }
.pilot-strip { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #34445b; border-radius: 15px; background: #122033; }
.pilot-strip strong { display: block; margin-top: 4px; font-size: 15px; }
.pilot-meter { flex: 1; display: flex; align-items: center; gap: 16px; font: 11px monospace; color: #bdd3e7; }
.pilot-meter progress { flex: 1; min-width: 20px; max-width: 430px; height: 5px; border: 0; border-radius: 5px; overflow: hidden; background: #263249; accent-color: #a8a9ff; }
.pilot-meter progress::-webkit-progress-bar { background: #263249; }
.pilot-meter progress::-webkit-progress-value { background: linear-gradient(90deg, #82d9ff, #b3a6ff); }
#pilot-stars { color: #ffce73; font: 12px monospace; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin: 20px 0 12px; }
.section-heading h2, .hub-collection h2 { font-size: 16px; margin: 0; letter-spacing: -.3px; }
.section-heading span { font-size: 10px; color: #a0b2c8; }
.chapter-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chapter-card { position: relative; display: grid; text-align: left; border: 1px solid #34445e; border-radius: 13px; padding: 15px 12px 12px; min-height: 140px; color: #e7f0fc; background: linear-gradient(145deg, #20304b, #101a2b); cursor: pointer; }
.chapter-card::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: var(--chapter); border-radius: 4px; opacity: .8; }
.chapter-card:disabled { opacity: .55; background: #121b2b; }
.chapter-card:not(:disabled):hover { border-color: var(--chapter); transform: translateY(-2px); }
.chapter-number { font: 24px monospace; color: var(--chapter); opacity: .85; margin-bottom: 12px; }
.chapter-card strong { font-size: 11px; line-height: 1.35; }
.chapter-card small { font-size: 9px; color: #a5b7ce; margin-top: 7px; }
.chapter-stars { color: #ffce73; margin-top: 10px; letter-spacing: 3px; font-size: 16px; }
.hub-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; }
.hub-collection p { margin: 5px 0 10px; font-size: 10px; }
.theme-list { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-chip { min-height: 44px; border: 1px solid #3d4d63; border-radius: 10px; background: #18243a; color: #c7d4e7; padding: 8px 10px; font-size: 10px; cursor: pointer; }
.theme-chip::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--swatch); margin-right: 6px; }
.theme-chip[aria-pressed="true"] { border-color: var(--swatch); color: #fff; }
.theme-chip:disabled { opacity: .55; }
.award-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.award { color: #889cb5; border: 1px solid #2e3c53; border-radius: 7px; font-size: 10px; padding: 7px 8px; }
.award.earned { color: #e7cda1; border-color: #62573f; background: #302b2444; }
.hub-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; border-top: 1px solid #293950; padding-top: 10px; }
.hub-footer span { color: #8fa4bd; font-size: 10px; }
.text-button { border: 0; background: transparent; color: #9adeff; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 11px; }
.panel-card { width: min(520px, 100%); text-align: left; }
.panel-card > .action-btn { display: block; width: 100%; margin-top: 18px; }
.settings-grid { display: grid; gap: 14px; margin: 18px 0; }
.settings-grid label { display: grid; gap: 7px; color: #c4d4e7; font-size: 12px; }
.settings-grid select { width: 100%; border: 1px solid #3a4d66; padding: 10px; }
.settings-grid .check-option { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; }
.check-option input { width: 22px; height: 22px; accent-color: #84dcff; }
.check-option small { color: #8ca1b9; margin-left: 32px; }
.utility-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.utility-actions .secondary-btn { margin: 0; }
.mission-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px 0; border-top: 1px solid #34435b; }
.mission-item strong { font-size: 13px; }.mission-item span { color: #9ce7ff; font: 11px monospace; }.mission-item small { grid-column: 1 / -1; color: #a3b6ce; font-size: 11px; line-height: 1.6; }
.help-list p { border-top: 1px solid #2d3c54; padding: 12px 0; margin: 0; font-size: 12px; }
.help-list strong { display: block; color: #a2e9ff; margin-bottom: 6px; font-size: 13px; }
.rating-stars { color: #ffce73; font-size: 42px; letter-spacing: 8px; margin: 14px 0; text-shadow: 0 3px 20px #fbbf2420; }
.modal .reward-line { color: #b1efcf; font-size: 12px; }.modal .rating-guide { font-size: 10px; color: #a9bad0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; }
html[data-quality="battery"] .modal { backdrop-filter: none; }
@media (max-width: 1100px), (pointer: coarse) {
    #btn-touch-toggle, #btn-music, #btn-sound, #btn-fullscreen { display: none; }
    .hud-secondary { display: none !important; }
    .hud-label { font-size: 8px; }
    .hud-panel { padding: 4px 7px; gap: 4px; }
    .hud-value { font-size: 12px; }
}
@media (max-width: 700px) {
    #mission-btn { display: none; }
    #route-progress, #pace-status { display: none; }
    .mission-status { flex-shrink: 0; font-size: 9px; }
    .hub-card { padding: 18px 18px 12px; }
    .hub-nav { margin-bottom: 18px; gap: 10px; }
    .offline-tag { font-size: 8px; letter-spacing: .5px; }
    .hub-hero { grid-template-columns: 1fr; gap: 16px; }
    .hero-copy h1 { font-size: 40px; margin: 10px 0 12px; }
    .hero-copy p { max-width: none; font-size: 12px; }
    .hero-art { max-height: 195px; }
    .launch-row { flex-direction: column; align-items: stretch; }
    .launch-row .mode-picker { flex-direction: column; align-items: stretch; }
    .launch-row .mode-picker select { width: 100%; }
    .menu-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .menu-actions .action-btn { padding: 12px 10px; font-size: 10px; }
    .pilot-strip { padding: 12px; gap: 10px; }
    .pilot-meter { flex-direction: column; align-items: stretch; gap: 6px; }
    .section-heading { display: block; }.section-heading span { display: block; margin-top: 6px; }
    .chapter-list { display: flex; overflow-x: auto; padding: 3px 0 8px; scroll-snap-type: x proximity; touch-action: pan-x pan-y pinch-zoom; }
    .chapter-list * { touch-action: pan-x pan-y pinch-zoom; }
    .chapter-card { min-width: 132px; min-height: 136px; scroll-snap-align: start; }
    .hub-collection { grid-template-columns: 1fr; gap: 18px; }
    .panel-card { padding: 22px; }
}
@media (orientation: portrait) {
    #mission-bar { flex-wrap: nowrap; }
    #advisor { font-size: 10px; padding: 6px 8px; }
    html[data-controls="large"] { --control-size: 60px; }
    #touch-controls { bottom: calc(16px + var(--safe-bottom)); padding-left: max(8px, var(--safe-left)); padding-right: max(8px, var(--safe-right)); }
    .touch-group { gap: 5px; }
    .touch-btn.down-btn { position: absolute; bottom: calc(var(--control-size) + 8px); margin-left: calc(var(--control-size) / 2); }
    html[data-hand="left"] .touch-btn.down-btn { margin-left: 0; margin-right: calc(var(--control-size) / 2); right: max(8px, var(--safe-right)); }
    .touch-btn.jump-btn { width: var(--control-size); }
}
@media (max-height: 460px) and (orientation: landscape) {
    :root { --control-size: 48px; }
    html[data-controls="large"] { --control-size: 58px; }
    .hud-label { display: none; }.hud-secondary, #hud-combo, #hud-shield { display: none !important; }
    #top-bar { top: calc(4px + var(--safe-top)); }.hud-panel { min-height: 26px; }
    #advisor { font-size: 9px; padding: 3px 8px; line-height: 1.4; }
    #mission-bar { font-size: 9px; }
    #pace-status { display: none; }
    .hub-card { padding: 14px 22px; }
    .hub-hero { grid-template-columns: 1fr 1fr; gap: 20px; }
    .hero-copy h1 { font-size: 32px; margin: 10px 0; }.hero-art { max-height: 180px; }
    .hub-nav { margin-bottom: 10px; }
    .launch-row { flex-direction: row; align-items: end; margin: 12px 0; }
    .launch-row .mode-picker { flex-direction: column; }
    .menu-actions { display: flex; }
    .modal-card h2 { font-size: 24px; }
    .settings-grid { gap: 10px; }
}
@media (max-width: 350px) {
    :root { --control-size: 50px; } html[data-controls="large"] { --control-size: 56px; }
    .hud-panel { padding: 4px 5px; }.hud-label { display: none; }
    .hero-copy h1 { font-size: 34px; }.offline-tag { display: none; }.hub-nav .icon-button { margin-left: auto; }
    .modal-card { padding: 16px; }.hub-footer { align-items: start; }.hub-footer span { max-width: 125px; line-height: 1.5; }
}

/* EKO-9: original rescue identity and optional memory collection. */
.hero-copy h1:focus { outline:none; }
.hero-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:18px; }
.hero-tags span, .hero-tags button { color:#c0e8ef; border:1px solid #5ce8ff30; border-radius:99px; padding:6px 9px; font-size:10px; background:#5ce8ff08; }
.hero-tags button { min-height:44px; cursor:pointer; border-color:#a3ffe360; color:#a3ffe3; }
.hero-tags button:hover { background:#a3ffe315; }
.echo-feature { display:flex; align-items:center; gap:24px; margin:24px 0 10px; padding:22px; border:1px solid #a3ffe32e; border-radius:18px; background:linear-gradient(120deg,#a3ffe30c,#ba9aff0c); text-align:left; }
.echo-feature h2 { margin:6px 0; font-size:22px; }
.echo-feature p { margin:6px 0; font-size:12px; line-height:1.6; color:#b0c8da; }
.echo-feature #echo-count { color:#a3ffe3; font-weight:700; }
.echo-feature .secondary-btn { flex-shrink:0; }
.story-panel { text-align:left; }
.story-panel h2 { text-align:left; }
.story-chapter { margin:24px 0; }
.story-chapter h3 { font-size:15px; color:#a3ffe3; margin:12px 0; }
.story-chapter > p { font-size:12px; line-height:1.7; }
.memory-card { border:1px dashed #40536a; border-radius:12px; padding:14px; margin:10px 0; background:#0b1525; }
.memory-card strong { font-size:13px; color:#afc2d5; }
.memory-card p { font-size:12px; line-height:1.7; margin:8px 0; color:#a1b5cc; }
.memory-card small { font-size:11px; color:#a3ffe3; }
.memory-card.recovered { border:1px solid #a3ffe345; background:linear-gradient(120deg,#a3ffe309,#ba9aff0a); }
.memory-card.recovered strong { color:#e0fff5; }
.chapter-ending { padding-left:12px; border-left:2px solid #a3ffe3; color:#c3f5e2 !important; }
@media(max-width:600px){ .echo-feature { flex-direction:column; align-items:stretch; gap:10px; padding:16px; }.hero-tags { margin-top:12px; } }

/* Real terrain previews keep the five worlds recognizable before starting. */
.chapter-map { display:block; width:100%; height:42px; margin:-4px 0 8px; overflow:visible; }
.chapter-map path { fill:none; stroke:var(--chapter); stroke-width:2; stroke-linecap:round; }
.chapter-focus { font-size:9px; line-height:1.5; color:#c2cfe0; margin-top:7px; }
.route-map-panel { margin:14px 0; padding:12px; border:1px solid #344e63; border-radius:14px; background:#09131f; text-align:left; }
.route-map-panel strong { font-size:12px; color:#cfe6ef; }
#sector-map { display:block; width:100%; height:auto; margin-top:8px; background:linear-gradient(#101e2e,#08111c); border-radius:8px; }
.route-map-panel .map-legend { margin:8px 0; font-size:10px; line-height:1.5; color:#b9cddd; }
.map-controls { display:flex; justify-content:center; gap:8px; }
.map-controls button { min-width:44px; min-height:44px; padding:6px 12px; border:1px solid #3b536e; border-radius:10px; background:#18283d; color:#dcf5ff; cursor:pointer; }
.map-controls button:disabled { opacity:.35; cursor:default; }
.modal .storage-status { color:#ffd166; font-size:11px; border:1px solid #7b6339; border-radius:10px; padding:10px; }
#learning-progress { color:#a3ffe3; font-size:11px; line-height:1.8; }


/* ==========================================================================
   ZIPZIP: NEŞELİ VE KİBAR MACERA TEMA GELİŞTİRMELERİ
   ========================================================================== */
.wordmark span { color: #ffd166; text-shadow: 0 0 12px rgba(255, 209, 102, 0.6); }
.brand-dot { color: #ff70a6 !important; font-size: 14px; margin-left: 2px; }
.action-btn {
    background: linear-gradient(135deg, #ff70a6 0%, #a17ee8 50%, #4facfe 100%) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 20px rgba(255, 112, 166, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
}
.action-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(255, 112, 166, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.action-btn:active {
    transform: translateY(1px) scale(0.97) !important;
}
.secondary-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 184, 200, 0.3) !important;
    background: rgba(30, 20, 55, 0.7) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}
.secondary-btn:hover {
    background: rgba(45, 30, 80, 0.9) !important;
    transform: translateY(-1px) scale(1.02) !important;
}
.hud-panel {
    border-color: rgba(181, 150, 242, 0.45) !important;
    border-radius: 20px !important;
    background: rgba(22, 12, 42, 0.82) !important;
}
.shield-badge {
    color: #72f8c6 !important;
    text-shadow: 0 0 10px rgba(114, 248, 198, 0.7);
}
.battery-cell {
    background: #ff70a6 !important;
    box-shadow: 0 0 8px #ff70a6 !important;
    border-radius: 4px !important;
}
.touch-btn {
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.touch-btn.jump-btn {
    background: linear-gradient(135deg, #ffd166, #ff70a6) !important;
}
.touch-btn.dash-btn {
    background: linear-gradient(135deg, #00f0ff, #72f8c6) !important;
}