:root {
  color-scheme: dark;
  --night: #080511; --night-2: #0e0920; --panel: rgba(20, 14, 43, .94); --panel-solid: #16102f;
  --line: rgba(157, 125, 255, .24); --cream: #fff6e8; --muted: #b9adc9; --cyan: #2dd6d0;
  --pink: #ff3d8a; --orange: #ff8a3d; --lime: #bcf36a; --violet: #8b63ff;
  --sunset: linear-gradient(105deg, var(--pink), var(--orange)); --shadow: 0 22px 70px rgba(0,0,0,.48);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--night); color: var(--cream); }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; } a { color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 14px; color: #080511; background: white; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { height: 100dvh; min-height: 520px; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.topbar { z-index: 1200; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 8px clamp(12px, 2.5vw, 34px); background: rgba(8,5,17,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.topbar::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:linear-gradient(90deg,transparent,var(--pink),var(--orange),var(--cyan),transparent); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#160913; background:var(--sunset); font-weight:950; box-shadow:0 0 26px rgba(255,61,138,.24); }
.brand-copy strong,.brand-copy small { display:block; }.brand-copy strong { font-size:16px; font-weight:900; background:var(--sunset); background-clip:text; color:transparent; }.brand-copy small { margin-top:2px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.game-tabs { justify-self:center; display:flex; gap:7px; padding:4px; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:13px; }
.game-tab { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 15px; color:#9288a7; background:transparent; border-radius:9px; }
.game-tab b { font-size:14px; }.game-tab span { font-size:8px; font-weight:900; letter-spacing:.08em; }
.game-tab.active { color:#190a18; background:var(--sunset); box-shadow:0 8px 22px rgba(255,61,138,.19); }
.top-actions { display:flex; gap:7px; align-items:center; }.icon-button,.home-button { min-height:40px; display:flex; align-items:center; gap:7px; padding:0 11px; color:#d8cfe2; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:10px; text-decoration:none; font-size:11px; }.icon-button span,.home-button span { color:var(--cyan); font-size:16px; }.icon-button.active { color:#100f08; background:var(--lime); border-color:var(--lime); }.icon-button.active span { color:inherit; }
.play-space { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px, 31vw); background:var(--night); }
.map-space { min-width:0; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 38%,#281d59,var(--night) 74%); }
#map { position:absolute; inset:0; z-index:1; background:var(--night); }
.map-vignette { position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 0 110px rgba(0,0,0,.54); background:linear-gradient(90deg,rgba(8,5,17,.18),transparent 20%,transparent 75%,rgba(8,5,17,.28)); }
.leaflet-container { font-family:inherit; }.leaflet-control-zoom { margin:18px !important; border:1px solid var(--line)!important; box-shadow:var(--shadow)!important; }.leaflet-control-zoom a { width:42px!important; height:42px!important; line-height:42px!important; color:var(--cream)!important; background:rgba(20,14,43,.95)!important; border-color:var(--line)!important; }.leaflet-control-attribution { color:#786e8d; background:rgba(8,5,17,.75)!important; font-size:8px; }.leaflet-control-attribution a { color:#a99bbb; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { color:var(--cream); background:var(--panel-solid); }.leaflet-popup-content-wrapper { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }.leaflet-popup-content { margin:15px; min-width:200px; }.leaflet-popup-close-button { color:#c8bad7!important; }.point-popup small { color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.12em; }.point-popup h3 { margin:7px 20px 7px 0; font-size:18px; }.point-popup p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.map-marker { width:32px; height:40px; position:relative; display:grid; place-items:center; filter:drop-shadow(0 7px 9px rgba(0,0,0,.6)); }.map-marker::before { content:""; position:absolute; top:1px; width:28px; height:28px; background:var(--marker-color,var(--cyan)); border:3px solid white; border-radius:50% 50% 50% 7px; transform:rotate(-45deg); box-shadow:0 0 18px color-mix(in srgb,var(--marker-color,var(--cyan)) 68%,transparent); }.map-marker b { z-index:1; color:#090615; transform:translateY(-5px); font-size:12px; }.map-marker.custom::after { content:""; position:absolute; top:-1px; right:-2px; width:8px; height:8px; background:var(--pink); border:2px solid white; border-radius:50%; }
.route-step-marker { width:30px; height:30px; display:grid; place-items:center; color:#120817; background:#9284ae; border:3px solid white; border-radius:50%; box-shadow:0 8px 18px rgba(0,0,0,.45); font-weight:950; }.route-step-marker.done { background:var(--cyan); }.route-step-marker.current { color:#1b0912; background:var(--pink); box-shadow:0 0 0 7px rgba(255,61,138,.2),0 0 24px rgba(255,61,138,.8); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 13px rgba(255,61,138,0),0 0 34px rgba(255,61,138,.9); } }
.mission-dock { position:absolute; z-index:500; top:18px; left:50%; width:min(510px,calc(100% - 180px)); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 13px; background:rgba(20,14,43,.93); border:1px solid rgba(45,214,208,.34); border-radius:15px; box-shadow:var(--shadow); transform:translateX(-50%); backdrop-filter:blur(15px); }
.mission-select-wrap { min-width:0; display:flex; align-items:center; gap:10px; }.live-light { width:8px; height:8px; flex:none; background:var(--lime); border-radius:50%; box-shadow:0 0 0 5px rgba(188,243,106,.1),0 0 15px var(--lime); }.mission-select-wrap label { min-width:0; display:grid; }.mission-select-wrap small { color:var(--cyan); font-size:8px; font-weight:900; letter-spacing:.13em; }.mission-select-wrap select { min-width:0; margin-top:2px; padding:0 20px 0 0; background:transparent; border:0; outline:0; font-size:15px; font-weight:850; }.mission-select-wrap option { background:var(--panel-solid); }.mission-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }.mission-meta span { padding:5px 7px; color:#cbc0d7; background:rgba(255,255,255,.05); border-radius:7px; font-size:9px; white-space:nowrap; }
.map-controls { position:absolute; z-index:500; right:16px; top:18px; display:grid; gap:7px; }.map-controls button { min-width:108px; min-height:42px; display:flex; align-items:center; gap:8px; padding:0 11px; color:#e8deee; background:rgba(20,14,43,.92); border:1px solid var(--line); border-radius:11px; box-shadow:0 9px 24px rgba(0,0,0,.25); backdrop-filter:blur(13px); font-size:11px; }.map-controls span { color:var(--cyan); font-size:17px; }.map-controls button.active { color:#170a16; background:var(--sunset); border-color:transparent; }.map-controls button.active span { color:inherit; }
.route-legend { position:absolute; z-index:500; bottom:20px; left:50%; display:flex; align-items:center; gap:13px; padding:9px 12px; color:#c6b9d1; background:rgba(20,14,43,.92); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); transform:translateX(-50%); backdrop-filter:blur(13px); font-size:9px; }.route-legend span { display:flex; align-items:center; gap:5px; white-space:nowrap; }.route-legend i { width:16px; height:4px; border-radius:8px; }.route-legend i.done { background:var(--cyan); }.route-legend i.current { background:var(--pink); box-shadow:0 0 8px var(--pink); }.route-legend strong { padding-left:10px; border-left:1px solid var(--line); color:var(--cream); white-space:nowrap; }
.source-note { position:absolute; z-index:400; bottom:8px; left:12px; margin:0; color:#786d8e; font-size:8px; }
.places-panel { position:absolute; z-index:700; top:18px; left:18px; width:min(330px,calc(100% - 36px)); max-height:calc(100% - 36px); overflow:auto; padding:15px; background:rgba(20,14,43,.97); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); backdrop-filter:blur(18px); }.places-panel header { display:flex; justify-content:space-between; align-items:center; }.places-panel header strong { font-size:16px; }.places-panel header button { width:34px; height:34px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:9px; font-size:20px; }.place-search { min-height:43px; display:flex; align-items:center; gap:8px; margin-top:12px; padding:0 10px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; }.place-search span { color:var(--cyan); }.place-search input { width:100%; background:transparent; border:0; outline:0; font-size:12px; }.filter-list { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0; }.filter-chip { padding:7px 9px; color:#c6bad4; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:999px; font-size:9px; }.filter-chip.active { color:#0a0612; background:var(--chip-color,var(--cyan)); border-color:transparent; }.search-results { display:grid; gap:5px; }.result-button { width:100%; display:grid; grid-template-columns:31px 1fr; align-items:center; gap:8px; padding:8px; color:var(--cream); background:rgba(255,255,255,.035); border-radius:9px; text-align:left; }.result-icon { width:31px; height:31px; display:grid; place-items:center; color:#0c0715; background:var(--result-color); border-radius:9px; font-weight:900; }.result-button strong,.result-button small { display:block; }.result-button strong { font-size:11px; }.result-button small { margin-top:2px; color:var(--muted); font-size:8px; }
.copilot-panel { --persona:var(--cyan); position:relative; z-index:800; min-width:0; display:flex; flex-direction:column; padding:clamp(16px,2vw,27px); background:linear-gradient(160deg,rgba(27,18,55,.98),rgba(12,8,26,.99)); border-left:1px solid var(--line); box-shadow:-22px 0 60px rgba(0,0,0,.26); overflow:auto; }.copilot-panel[data-persona="vega"] { --persona:#a68cff; }.copilot-panel[data-persona="milo"] { --persona:var(--orange); }.copilot-panel[data-persona="noa"] { --persona:var(--pink); }.copilot-panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 14% 15%,color-mix(in srgb,var(--persona) 12%,transparent),transparent 31%); }.copilot-panel > * { position:relative; z-index:1; }.sheet-grip { display:none; }
.copilot-head { display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:12px; }.persona-core { width:60px; height:60px; position:relative; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--persona) 60%,transparent); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--persona) 22%,transparent),transparent 65%); box-shadow:inset 0 0 16px color-mix(in srgb,var(--persona) 16%,transparent); }.persona-core i { position:absolute; inset:7px; border:1px dashed var(--persona); border-radius:50%; }.persona-core i:nth-child(2) { inset:-5px; border-style:solid; border-color:transparent var(--persona) transparent color-mix(in srgb,var(--persona) 40%,transparent); }.persona-core b { color:var(--persona); font-size:11px; letter-spacing:.05em; }.copilot-panel.is-speaking .persona-core { animation:core 1.25s ease-in-out infinite; }.copilot-panel.is-speaking .persona-core i:nth-child(2) { animation:spin 2s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}@keyframes core{50%{box-shadow:inset 0 0 22px color-mix(in srgb,var(--persona) 32%,transparent),0 0 24px color-mix(in srgb,var(--persona) 35%,transparent)}}
.copilot-identity { min-width:0; display:grid; }.copilot-identity small { color:var(--persona); font-size:8px; font-weight:900; letter-spacing:.13em; }.copilot-identity strong { margin-top:3px; font-size:18px; }.copilot-identity span { margin-top:3px; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.settings-button { width:40px; height:40px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:11px; letter-spacing:2px; }
.wave { height:39px; display:flex; align-items:center; justify-content:center; gap:4px; margin:17px 0 10px; padding:0 10px; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }.wave i { width:3px; height:22%; background:var(--persona); border-radius:9px; opacity:.4; }.wave i:nth-child(2n){height:42%}.wave i:nth-child(3n){height:68%}.wave i:nth-child(5n){height:88%}.copilot-panel.is-speaking .wave i { opacity:.95; animation:wave .62s ease-in-out infinite alternate; }.copilot-panel.is-speaking .wave i:nth-child(2n){animation-delay:-.34s}.copilot-panel.is-speaking .wave i:nth-child(3n){animation-delay:-.17s}@keyframes wave{to{height:92%;filter:drop-shadow(0 0 6px var(--persona))}}
.narration-card { flex:1; min-height:200px; display:flex; flex-direction:column; justify-content:center; padding:20px 0; }.step-line { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--persona); font-size:8px; font-weight:900; letter-spacing:.12em; }.safe-badge { padding:5px 7px; color:var(--lime); background:rgba(188,243,106,.07); border:1px solid rgba(188,243,106,.2); border-radius:999px; letter-spacing:.06em; }.narration-card h1 { margin:15px 0 10px; font-size:clamp(26px,3vw,43px); line-height:.98; letter-spacing:-.045em; }.narration-card p { margin:0; color:#e6dae9; font-size:clamp(16px,1.4vw,20px); line-height:1.5; }
.primary-actions { display:grid; grid-template-columns:1fr 48px; gap:8px; }.speak-button,.stop-button { min-height:54px; border-radius:13px; font-weight:850; }.speak-button { display:flex; justify-content:center; align-items:center; gap:10px; color:#170913; background:var(--sunset); box-shadow:0 12px 28px rgba(255,61,138,.22); }.play-icon { width:27px; height:27px; display:grid; place-items:center; padding-left:2px; background:rgba(255,255,255,.35); border-radius:50%; font-size:10px; }.stop-button { color:#d2c5dc; background:rgba(255,255,255,.06); border:1px solid var(--line); }.stop-button:disabled { opacity:.35; cursor:not-allowed; }.copilot-panel.is-speaking .speak-button { background:var(--persona); }.step-actions { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-top:8px; }.step-actions button { min-height:48px; padding:0 13px; color:#c8bad2; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:11px; font-size:11px; }.step-actions button:disabled { opacity:.32; }.step-actions .next-button { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--cyan); border-color:rgba(45,214,208,.4); text-align:left; }.next-button b { font-size:18px; }.progress-track { height:4px; margin-top:14px; overflow:hidden; background:rgba(255,255,255,.07); border-radius:10px; }.progress-track i { display:block; width:12.5%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); transition:width .3s; }.voice-status { min-height:31px; margin:9px 0; color:#9487a5; font-size:9px; line-height:1.45; }.voice-status.active { color:var(--persona); }.copilot-foot { display:flex; align-items:center; gap:7px; padding-top:9px; border-top:1px solid rgba(255,255,255,.06); }.copilot-foot button { min-height:35px; display:flex; align-items:center; gap:6px; padding:0 9px; color:#bfb1cc; background:rgba(255,255,255,.04); border-radius:8px; font-size:9px; }.copilot-foot button[aria-pressed="true"] { color:#130a16; background:var(--lime); }.copilot-foot > span { margin-left:auto; color:#7d7190; font-size:7px; letter-spacing:.11em; }.copilot-foot > span i { display:inline-block; width:5px; height:5px; margin-right:4px; background:var(--lime); border-radius:50%; }
body.discreet .copilot-identity span,body.discreet .wave,body.discreet .voice-status,body.discreet .copilot-foot { display:none; }body.discreet .narration-card { min-height:120px; }body.discreet .narration-card p { font-size:14px; }
.modal { width:min(600px,calc(100% - 26px)); max-height:calc(100dvh - 26px); overflow:auto; padding:clamp(24px,5vw,42px); color:var(--cream); background:linear-gradient(145deg,#231746,var(--panel-solid) 70%); border:1px solid var(--line); border-radius:23px; box-shadow:0 35px 110px rgba(0,0,0,.76); }.modal::backdrop { background:rgba(3,2,9,.83); backdrop-filter:blur(9px); }.modal-close { position:absolute; top:13px; right:13px; width:40px; height:40px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:11px; font-size:24px; }.eyebrow { margin:0 0 8px; color:var(--cyan)!important; font-size:9px!important; font-weight:900; letter-spacing:.14em; }.modal h2 { margin:0 45px 10px 0; font-size:clamp(27px,6vw,40px); line-height:1; letter-spacing:-.04em; }.modal p { color:var(--muted); font-size:12px; line-height:1.55; }.persona-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:20px 0; }.persona-choice { min-height:90px; padding:13px; color:var(--cream); background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:13px; text-align:left; }.persona-choice[aria-checked="true"] { border-color:var(--choice-color,var(--cyan)); background:color-mix(in srgb,var(--choice-color,var(--cyan)) 11%,transparent); }.persona-choice small,.persona-choice strong,.persona-choice span { display:block; }.persona-choice small { color:var(--choice-color,var(--cyan)); font-size:8px; font-weight:900; letter-spacing:.1em; }.persona-choice strong { margin-top:6px; font-size:14px; }.persona-choice span { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.3; }.field { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:14px; color:#d8cddd; font-size:11px; font-weight:750; }.field select,.field input:not([type="range"]),.field textarea { grid-column:1/-1; width:100%; padding:11px; color:var(--cream); background:#0c071b; border:1px solid var(--line); border-radius:10px; outline:0; }.field input[type="range"] { grid-column:1/-1; width:100%; accent-color:var(--pink); }.field output { color:var(--cyan); }.voice-profile-list { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:8px; }.voice-profile { min-height:64px; display:grid; place-items:center; gap:2px; padding:8px; color:var(--muted); background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:11px; }.voice-profile[aria-checked="true"] { color:var(--cream); border-color:var(--cyan); background:rgba(45,214,208,.1); }.voice-profile b { font-size:18px; }.voice-profile span { font-size:9px; }.test-button { width:100%; min-height:49px; margin-top:16px; color:#160914; background:var(--sunset); border-radius:12px; font-weight:900; }.selected-voice { margin-bottom:0!important; color:var(--cyan)!important; text-align:center; }.steps-modal ol { display:grid; gap:7px; margin:20px 0 0; padding:0; list-style:none; counter-reset:steps; }.steps-modal li { display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:center; padding:10px; color:#81758f; background:rgba(255,255,255,.025); border-radius:11px; }.steps-modal li::before { counter-increment:steps; content:counter(steps); width:30px; height:30px; display:grid; place-items:center; background:rgba(255,255,255,.08); border-radius:50%; font-weight:900; }.steps-modal li.done { color:#b9dcd8; }.steps-modal li.current { color:var(--cream); background:rgba(255,61,138,.09); border:1px solid rgba(255,61,138,.25); }.steps-modal li.current::before { color:#150914; background:var(--pink); }.steps-modal li b,.steps-modal li small { display:block; }.steps-modal li b { font-size:12px; }.steps-modal li small { margin-top:3px; font-size:9px; }.spoiler-note { padding:10px; color:var(--lime)!important; background:rgba(188,243,106,.06); border-radius:9px; }.toast { position:fixed; z-index:4000; left:50%; bottom:24px; max-width:calc(100% - 30px); padding:11px 15px; color:#130a15; background:var(--cream); border-radius:11px; box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,24px); transition:opacity .2s,visibility .2s,transform .2s; font-size:11px; font-weight:850; }.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }.legal-bar { position:fixed; z-index:1900; right:0; bottom:0; left:0; min-height:23px; display:flex; justify-content:center; align-items:center; gap:12px; padding:4px 12px; color:#756982; background:rgba(8,5,17,.91); border-top:1px solid rgba(157,125,255,.12); font-size:7px; }.legal-bar a { color:#9a8aa9; }
.voice-tip { margin:12px 0 0!important; padding:10px 12px; color:#bfb2cb!important; background:rgba(45,214,208,.06); border:1px solid rgba(45,214,208,.16); border-radius:10px; font-size:11px!important; }
.legal-link { margin-left:auto; color:#8e829d; font-size:9px; }
.map-mode-banner { position:absolute; z-index:750; left:50%; bottom:18px; width:min(390px,calc(100% - 32px)); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px 10px 14px; color:var(--cream); background:rgba(20,14,43,.97); border:1px solid var(--cyan); border-radius:13px; box-shadow:var(--shadow); transform:translateX(-50%); backdrop-filter:blur(16px); }
.map-mode-banner span { display:grid; }.map-mode-banner b { font-size:12px; }.map-mode-banner small { margin-top:2px; color:var(--muted); font-size:10px; }.map-mode-banner button { min-height:38px; padding:0 12px; color:#130a15; background:var(--cyan); border-radius:9px; font-weight:850; font-size:11px; }
body.placing-point #map { cursor:crosshair; }
body.placing-point .route-legend { display:none; }
@media (max-width: 1120px) { .icon-button b{display:none}.mission-dock{left:16px;transform:none;width:min(490px,calc(100% - 160px))}.mission-meta{display:none}.play-space{grid-template-columns:minmax(0,1fr) minmax(320px,36vw)} }
@media (max-width: 760px) {
  .app-shell{grid-template-rows:54px minmax(0,1fr);min-height:480px}.topbar{grid-template-columns:auto 1fr auto;gap:7px;padding:6px 9px}.brand-mark{width:36px;height:36px;border-radius:11px;font-size:13px}.brand-copy{display:none}.game-tabs{justify-self:stretch;gap:3px;padding:3px}.game-tab{min-height:35px;justify-content:center;gap:5px;padding:0 8px}.game-tab b{font-size:12px}.game-tab span{font-size:6px}.top-actions{gap:4px}.icon-button,.home-button{width:36px;min-height:36px;justify-content:center;padding:0}.home-button b,.top-actions .icon-button:nth-child(1){display:none}.play-space{position:relative;display:block}.map-space{position:absolute;inset:0}.copilot-panel{position:absolute;z-index:900;right:7px;bottom:27px;left:7px;max-height:54%;padding:12px 13px 13px;border:1px solid var(--line);border-radius:21px 21px 15px 15px;box-shadow:0 -20px 55px rgba(0,0,0,.52);transition:max-height .25s,transform .25s}.copilot-panel.collapsed{max-height:205px}.copilot-panel.collapsed .wave,.copilot-panel.collapsed .narration-card p,.copilot-panel.collapsed .step-line,.copilot-panel.collapsed .voice-status,.copilot-panel.collapsed .progress-track,.copilot-panel.collapsed .copilot-foot{display:none}.copilot-panel.collapsed .narration-card{min-height:0;padding:8px 0}.copilot-panel.collapsed .narration-card h1{margin:0;font-size:19px}.sheet-grip{height:16px;display:grid;place-items:start center;margin:-7px -8px 2px;background:transparent}.sheet-grip span{width:42px;height:4px;background:#6d607e;border-radius:9px}.copilot-head{grid-template-columns:44px 1fr auto;gap:9px}.persona-core{width:44px;height:44px}.persona-core i{inset:6px}.persona-core i:nth-child(2){inset:-3px}.copilot-identity strong{font-size:15px}.copilot-identity span{font-size:8px}.settings-button{width:36px;height:36px}.wave{height:23px;margin:7px 0}.narration-card{min-height:110px;padding:6px 0 10px}.narration-card h1{margin:8px 0 5px;font-size:23px}.narration-card p{font-size:14px;line-height:1.38}.safe-badge{display:none}.primary-actions{grid-template-columns:1fr 45px}.speak-button,.stop-button{min-height:47px}.step-actions button{min-height:43px}.voice-status{min-height:20px;margin:6px 0;font-size:8px}.copilot-foot{padding-top:6px}.mission-dock{top:8px;left:50%;width:min(390px,calc(100% - 18px));padding:8px 11px;transform:translateX(-50%)}.mission-select-wrap select{font-size:13px}.map-controls{top:68px;right:9px}.map-controls button{min-width:42px;width:42px;min-height:42px;justify-content:center;padding:0}.map-controls b{display:none}.leaflet-control-zoom{margin:68px 9px!important}.route-legend{bottom:auto;top:68px;left:50%;gap:8px;padding:8px 9px;transform:translateX(-50%)}.route-legend span{display:none}.route-legend strong{padding:0;border:0}.source-note{display:none}.places-panel{top:61px;left:8px;width:calc(100% - 16px);max-height:calc(100% - 260px)}.legal-bar{justify-content:space-between;bottom:0}.legal-bar span{display:none}.persona-list{grid-template-columns:1fr 1fr}.persona-choice{min-height:98px}.modal{padding:25px 18px}.toast{bottom:235px}
}

/* Modo juego: móvil y tablet en vertical, sin capas superpuestas */
@media (max-width: 900px) {
  .app-shell { min-height: 0; grid-template-rows: 54px minmax(0, 1fr); }
  .topbar { grid-template-columns: auto 1fr auto; gap: 7px; padding: 6px 9px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
  .brand-copy { display: none; }
  .game-tabs { justify-self: stretch; gap: 3px; padding: 3px; }
  .game-tab { min-height: 35px; justify-content: center; gap: 5px; padding: 0 8px; }
  .game-tab b { font-size: 12px; }.game-tab span { font-size: 7px; }
  .top-actions { gap: 4px; }.icon-button,.home-button { width: 36px; min-height: 36px; justify-content: center; padding: 0; }
  .home-button b,.top-actions .icon-button:nth-child(1) { display: none; }

  .play-space { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(210px, 43%) minmax(0, 57%); overflow: hidden; }
  .play-space.map-focus { grid-template-rows: minmax(0, 1fr) 176px; }
  .map-space { position: relative; inset: auto; grid-row: 1; min-height: 0; overflow: hidden; border-bottom: 1px solid rgba(45,214,208,.3); }
  .copilot-panel { position: relative; inset: auto; grid-row: 2; max-height: none; min-height: 0; padding: 9px 14px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; transition: none; }
  .copilot-panel.collapsed { max-height: none; overflow: hidden; }
  .copilot-panel.collapsed .wave,
  .copilot-panel.collapsed .narration-card p,
  .copilot-panel.collapsed .step-line,
  .copilot-panel.collapsed .voice-status,
  .copilot-panel.collapsed .progress-track,
  .copilot-panel.collapsed .step-actions,
  .copilot-panel.collapsed .copilot-foot { display: none; }
  .copilot-panel.collapsed .copilot-head { grid-template-columns: 34px 1fr auto; }
  .copilot-panel.collapsed .persona-core { width: 34px; height: 34px; }
  .copilot-panel.collapsed .copilot-identity small,
  .copilot-panel.collapsed .copilot-identity span { display: none; }
  .copilot-panel.collapsed .copilot-identity strong { margin: 0; font-size: 15px; }
  .copilot-panel.collapsed .settings-button { width: 34px; height: 34px; }
  .copilot-panel.collapsed .narration-card { min-height: 0; padding: 3px 0 5px; }
  .copilot-panel.collapsed .narration-card h1 { margin: 2px 0 4px; font-size: 19px; }
  .copilot-panel.collapsed .speak-button,
  .copilot-panel.collapsed .stop-button { min-height: 42px; }
  .sheet-grip { position: sticky; z-index: 4; top: -9px; height: 29px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: -9px -14px 7px; color: #9f92af; background: rgba(19,13,41,.98); border-bottom: 1px solid rgba(157,125,255,.14); }
  .sheet-grip span { width: 34px; height: 4px; background: #6d607e; border-radius: 9px; }
  .sheet-grip b { font-size: 10px; letter-spacing: .04em; }
  .copilot-head { grid-template-columns: 40px 1fr auto; gap: 9px; }
  .persona-core { width: 40px; height: 40px; }.persona-core i { inset: 6px; }.persona-core i:nth-child(2) { inset: -3px; }
  .copilot-identity strong { font-size: 16px; }.copilot-identity span { font-size: 10px; }.settings-button { width: 38px; height: 38px; }
  .wave { height: 23px; margin: 7px 0; }
  .narration-card { flex: 0 0 auto; min-height: 0; justify-content: start; padding: 4px 0 10px; }
  .narration-card h1 { margin: 8px 0 6px; font-size: clamp(23px, 6vw, 29px); line-height: 1.05; }
  .narration-card p { font-size: 16px; line-height: 1.38; }
  .safe-badge { display: none; }
  .primary-actions { grid-template-columns: 1fr 47px; }.speak-button,.stop-button { min-height: 50px; }
  .step-actions { grid-template-columns: minmax(92px,.34fr) minmax(0,1fr); }.step-actions button { min-height: 47px; font-size: 14px; }
  .voice-status { min-height: 0; margin: 8px 0; font-size: 12px; }
  .copilot-foot { padding-top: 8px; }.copilot-foot button { min-height: 39px; font-size: 11px; }.copilot-foot > span { font-size: 8px; }

  .mission-dock { top: 8px; left: 8px; width: calc(100% - 16px); min-height: 52px; padding: 8px 11px; transform: none; }
  .mission-select-wrap select { font-size: 14px; }.mission-meta { display: none; }
  .map-controls { top: 69px; right: 9px; }.map-controls button { min-width: 43px; width: 43px; min-height: 43px; justify-content: center; padding: 0; }.map-controls b { display: none; }
  .leaflet-control-zoom { margin: 69px 9px!important; }
  .route-legend { top: auto; right: auto; bottom: 9px; left: 50%; gap: 8px; padding: 8px 10px; transform: translateX(-50%); }
  .route-legend span { display: none; }.route-legend strong { padding: 0; border: 0; }
  .source-note { display: none; }
  .places-panel { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: min(46%, 320px); padding: 14px; border-radius: 15px; }
  .map-mode-banner { bottom: 9px; width: calc(100% - 18px); }
  .legal-bar { display: none; }
  .toast { top: 118px; bottom: auto; max-width: calc(100% - 28px); transform: translate(-50%,-16px); }
  .toast.show { transform: translate(-50%,0); }
  .modal { padding: 25px 18px calc(25px + env(safe-area-inset-bottom)); }
  .persona-list { grid-template-columns: 1fr 1fr; }.persona-choice { min-height: 98px; }
  .voice-profile-list { grid-template-columns: 1fr; gap: 8px; }
  .voice-profile { min-height: 58px; grid-template-columns: 42px 1fr; justify-items: start; text-align: left; padding: 9px 13px; }
  .voice-profile b { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,255,255,.06); border-radius: 10px; }
  .voice-profile span { font-size: 13px; font-weight: 800; }
  .field select { min-height: 50px; font-size: 16px; }
  .selected-voice { font-size: 13px!important; line-height: 1.45!important; }
}

@media (max-width: 430px) {
  .game-tab { padding: 0 6px; }.game-tab span { display: none; }
  .play-space { grid-template-rows: minmax(205px, 40%) minmax(0, 60%); }
  .copilot-panel { padding-inline: 12px; }
  .sheet-grip { margin-inline: -12px; }
  .copilot-identity span { display: none; }
  .wave { margin-block: 5px; }
  .step-actions button { font-size: 13px; padding-inline: 10px; }
  .copilot-foot { flex-wrap: wrap; }.copilot-foot > span { margin-left: 0; }.legal-link { margin-left: auto; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .play-space { grid-template-rows: minmax(260px, 55%) minmax(0, 45%); }
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}