/* Inicio y paneles de 3983: órbita, grafito y luz cian. */
:root { --ui-cyan:#9ecbd1; --ui-border:#688d99; --ui-paper:#e2edf0; --ui-dark:#09131d; }
* { scrollbar-width:thin; scrollbar-color:#769ba7 #0b1824; }
button,summary,input { accent-color:#a8d2d6; }
button:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid #d1edf0;outline-offset:4px; }
#start-screen {
  display:block;padding:0;overflow-y:auto;
  background:linear-gradient(180deg,#050d19d9,#050d1914 45%,#050d191a 60%,#050d19f0),url('img/espacio_tierra.webp') 58% center / cover;
}
.launch-topbar { position:absolute;top:20px;left:28px;right:28px;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:12px; }
#start-screen #journey-button { display:flex;align-items:center;gap:9px;min-height:48px;margin:0;padding:0 8px;color:#d3e7eb;background:transparent;border:0;font:17px Georgia,serif;text-shadow:0 2px 8px #000; }
#journey-button span { font:32px Arial,sans-serif;color:#9ecbd1; }
#launch-menu { position:relative; }
#launch-menu > summary { display:flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:0 20px;list-style:none;cursor:pointer;color:#dcecf0;background:#081522ed;border:1px solid var(--ui-border);border-radius:16px 4px;font:18px Georgia,serif; }
#launch-menu > summary::-webkit-details-marker { display:none; }
#launch-menu > summary span { font:24px Arial,sans-serif; }
#launch-menu nav { position:absolute;right:0;top:calc(100% + 10px);width:270px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px);overflow-y:auto;padding:9px;border:1px solid var(--ui-border);border-radius:12px 3px;background:#07131ff7;box-shadow:0 16px 45px #0008;box-sizing:border-box; }
#launch-menu nav button { width:100%;display:flex;align-items:center;gap:13px;margin:0;padding:12px 14px;min-height:52px;text-align:left;border:0;border-radius:5px;background:transparent;color:var(--ui-paper);font:17px Georgia,serif; }
#launch-menu nav button span { width:24px;text-align:center;font:23px Arial,sans-serif;color:#99cbd1; }
#launch-menu nav button:hover,#launch-menu nav button:focus-visible { background:#a0d6df18; }
#launch-menu nav button:last-child { border-top:1px solid #688d9955;margin-top:5px;border-radius:0; }
#start-screen .launch-panel { min-height:100dvh;width:100%;max-width:none;margin:0;padding:clamp(76px,12dvh,96px) 24px clamp(14px,3dvh,24px);display:flex;flex-direction:column;justify-content:space-between;text-align:center;overflow:visible;box-sizing:border-box; }
.launch-brand { width:min(1040px,100%);margin:0 auto; }
.launch-eyebrow { margin:0 0 13px;color:#aacbd4;font:11px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:.24em;text-shadow:0 2px 10px #000; }
.launch-title { margin:0;color:#e6f0f2;font:normal clamp(76px,min(11vw,16dvh),156px)/.9 Georgia,serif;letter-spacing:-.04em;text-shadow:0 4px 10px #000,0 0 35px #00192a; }
.launch-title small { display:block;margin-top:16px;color:#c5e0e5;font:normal clamp(23px,3vw,36px)/1.25 Georgia,serif;letter-spacing:.035em; }
.launch-hook { margin:20px 0 0;color:#dae7ed;font:clamp(16px,1.7vw,21px)/1.45 Georgia,serif;text-shadow:0 2px 7px #000; }
.launch-bottom { width:min(550px,100%);margin:20px auto 0; }
#start-screen .launch-actions { display:flex;flex-direction:column;align-items:center;gap:12px;margin:0; }
#start-screen .launch-actions button { width:min(420px,100%);display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:12px 24px;min-height:56px;border:1px solid #8db4bd;border-radius:32px;background:#071523db;color:#e0edf1;font:24px/1.2 Georgia,serif;box-shadow:inset 0 0 0 3px #b4dbe509,0 5px 22px #0007; }
#start-screen .launch-actions button span { display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;font:24px/1 Arial,sans-serif;color:#9ccbd2; }
#start-screen #continue-button,#start-screen:has(#continue-button[hidden]) #new-button { background:linear-gradient(#dfedef,#a2c9d0);color:#101e2a;border-color:#d5ecf0; }
#start-screen #continue-button span,#start-screen:has(#continue-button[hidden]) #new-button span { color:#365d70; }
#start-screen .launch-actions button:hover { border-color:#d6edf0;background:#264554; }
#start-screen #continue-button:hover,#start-screen:has(#continue-button[hidden]) #new-button:hover { background:#e1f0f2; }
#journey-summary { margin:18px 0 0;padding-top:12px;border-top:1px solid #9ecbd155;color:#c4dce3;font:14px/1.5 Georgia,serif;text-shadow:0 2px 7px #000; }
#start-screen #save-status { min-height:1.5em;max-width:none;margin:6px 0 0;color:#adbcc7;font:11px/1.5 Arial,sans-serif; }
#toolbar { gap:8px;max-width:calc(100vw - 190px); }
#route-label { display:none; }
#toolbar button { border:1px solid #8db4bd;border-radius:22px;background:#0a1722ef; }
#audio-settings > summary { display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin-left:auto;padding:0;border:1px solid #8db4bd;border-radius:50%;background:#0a1722ef;color:#9ecbd1;font:26px/1 Arial,sans-serif; }
.modal-panel { color:var(--ui-paper);background:linear-gradient(145deg,#132532,#070f19 75%);border:1px solid var(--ui-border);border-radius:18px;box-shadow:inset 0 0 0 3px #8bc4ce08,0 22px 70px #0009; }
.modal-panel::backdrop { background:#030a13bb; }
.modal-heading { padding:10px 14px 14px;border-bottom:1px solid #688d9955; }
.modal-heading h2,.modal-panel > h2 { color:#c5e3e8;font:normal 26px/1.25 Georgia,serif; }
.modal-panel .modal-close {
  position:relative;display:grid;place-items:center;flex:0 0 44px;
  width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;
  border-radius:50%;font:normal 19px/1 Arial,sans-serif;box-sizing:border-box;
}
.modal-panel button { min-height:44px;border:1px solid #7fa6b1;border-radius:24px;padding:9px 18px;color:#dcecf0;background:#152a38; }
.modal-panel button:hover { background:#2b4c5b;border-color:#c1e5ea; }
.modal-panel button:disabled { opacity:.45;cursor:default; }
.modal-panel button.primary,#confirm-new,#slot-confirm-yes { color:#10232c;background:linear-gradient(#deedef,#9cc4ce);border-color:#d0e8ed; }
.panel-note { color:#a9bdc6;font-size:14px;line-height:1.6; }
#save-feedback { color:#b8e1e8;min-height:1.5em; }
.save-slot,.journey-card { border:1px solid #688d9977;border-radius:12px;padding:16px;margin:12px 0;background:#a4d7e006; }
.save-slot h3,.journey-card h3 { margin:0 0 8px;color:#c8e2e7;font:normal 21px/1.3 Georgia,serif; }
.save-slot p { color:#b6c8d0;font-size:14px;overflow-wrap:anywhere; }
.slot-actions { display:flex;gap:10px;flex-wrap:wrap; }
#journey-stats { white-space:pre-line;padding:14px 18px;background:#8ac8dc0a;border:1px solid #688d9977;border-radius:10px;color:#c2e0e7;font-size:17px; }
#journey-complete { padding:14px;border:1px solid #97c9c5;border-radius:10px;color:#c4e7da;background:#82b8b60d; }
#journey-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.journey-card { margin:0;padding:12px;min-width:0; }
.journey-card img { width:100%;height:125px;object-fit:cover;border-radius:7px;margin-bottom:12px; }
.journey-card p { color:#b6c8d0;font-size:14px; }
.journey-card.locked { min-height:150px;border-style:dashed;display:flex;flex-direction:column;justify-content:center; }
.journey-card.locked .lock-mark { color:#688d99;font-size:28px; }
.history-chapter summary { color:#bbdce3; }
#sound-screen #audio-settings { position:static;max-height:none;max-width:none;width:100%;border:0;padding:0;background:transparent;box-sizing:border-box;overflow:visible; }
#sound-screen #audio-settings > summary { display:none; }
#sound-screen #audio-settings input[type=range] { width:100%;box-sizing:border-box;margin:6px 0 0; }
#memory-screen { width:min(1100px,96vw);height:min(760px,calc(100dvh - 54px));max-height:none;overflow:hidden;padding:65px clamp(45px,10vw,135px) 62px;border:0;border-radius:0;background:#080e14 var(--epilogue-frame,url('interfaz/Epilogo.webp')) center / 100% 100% no-repeat; }
#memory-screen[open] { display:flex;flex-direction:column;gap:10px; }
#memory-screen .modal-heading { flex:0 0 auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;margin:0; }
#memory-title { grid-column:2;text-align:center;overflow-wrap:anywhere;font-size:23px; }
#close-memory { grid-column:3;grid-row:1;padding:0;align-self:center; }
#memory-text { flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 8px;white-space:pre-line;text-align:center;font:var(--reading-size)/1.7 Georgia,serif;color:#e4ebee;overscroll-behavior:contain;scrollbar-width:thin; }
@media(max-width:600px) {
  .launch-topbar { top:12px;left:14px;right:14px; }
  #start-screen #journey-button { font-size:14px;padding:0;gap:6px; }
  #journey-button span { font-size:27px; }
  #launch-menu > summary { padding:0 14px;font-size:16px; }
  #start-screen { padding:0;background-position:58% center; }
  #start-screen .launch-panel { padding:clamp(76px,12.5dvh,106px) 22px clamp(12px,3dvh,22px); }
  .launch-title { font-size:clamp(56px,min(25vw,12dvh),115px); }
  .launch-title small { font-size:clamp(23px,6vw,30px);margin-top:17px; }
  .launch-eyebrow { font-size:9px;margin-bottom:16px;letter-spacing:.18em; }
  .launch-hook { font-size:17px;margin-top:20px; }
  .launch-bottom { margin-top:12px; }
  #start-screen .launch-actions button { font-size:clamp(20px,5.9vw,23px);min-height:54px;padding:10px 18px;gap:12px; }
  #journey-summary { font-size:12px; }
  #toolbar { max-width:calc(100vw - 175px); }
  #journey-cards { grid-template-columns:1fr; }
  #memory-screen { width:98vw;height:calc(100dvh - 64px);padding:53px 36px 48px; }
  #memory-screen .modal-heading { grid-template-columns:minmax(0,1fr) 44px;gap:6px; }
  #memory-title { grid-column:1;font-size:19px; }
  #close-memory { grid-column:2;min-width:44px;width:44px;min-height:44px;height:44px; }
}
@media(max-height:700px) and (min-width:601px) {
  .launch-topbar { top:10px;left:20px;right:20px; }
  #start-screen .launch-panel { padding:65px 24px 12px; }
  .launch-eyebrow { display:none; }
  .launch-title { font-size:clamp(64px,min(9vw,14dvh),112px); }
  .launch-title small { font-size:24px;margin-top:8px; }
  .launch-hook { font-size:15px;margin-top:10px; }
  .launch-bottom { margin-top:4px; }
  #start-screen .launch-actions { flex-direction:column;flex-wrap:nowrap;gap:8px; }
  #start-screen .launch-actions button { font-size:20px;min-height:46px;padding:8px 18px; }
  #journey-summary { margin-top:10px;padding-top:8px;font-size:12px; }
  #start-screen #save-status { margin-top:4px;font-size:10px; }
}
@media(max-height:500px) {
  #start-screen .launch-panel { padding-top:55px; }
  .launch-title { font-size:48px; }
  .launch-title small { font-size:22px;margin-top:6px; }
  .launch-hook { margin-top:6px;font-size:14px;line-height:1.3; }
  #start-screen .launch-actions button { min-height:44px; }
  #journey-summary { margin-top:6px;padding-top:6px; }
  #memory-screen { height:calc(100dvh - 35px);padding:32px 10% 30px;gap:6px; }
  #memory-title { font-size:19px; }
}