:root{color-scheme:dark;--page:#0b111a;--panel:#151f2c;--line:#2c3b4c;--ink:#edf2f6;--muted:#a6b5c5;--mint:#79dfc3;--gold:#e8b477}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;min-width:320px;background:radial-gradient(ellipse at 90% 0,#203443,transparent 65%),var(--page);color:var(--ink);font:1rem/1.6 "Segoe UI",system-ui,sans-serif}
h1,h2,h3,p{margin:0}h1{font-size:2.25rem;letter-spacing:-.04em;line-height:1.15}h2{font-size:1.375rem}h3{font-size:1.25rem}
button{font:inherit;font-weight:650;border:1px solid transparent;border-radius:6px;padding:9px 12px;background:var(--mint);color:#10231f;cursor:pointer}
button:hover:not(:disabled){background:#a5f1da}button:disabled{cursor:not-allowed;background:#243241;border-color:#3a4959;color:#aab6c4}
button.quiet{color:var(--muted);border-color:var(--line);background:transparent}button.quiet:hover:not(:disabled){background:#29394b}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;object-fit:contain}
progress{display:block;width:100%;height:6px;appearance:none;border:0;border-radius:10px;overflow:hidden;background:#2c3946;color:var(--mint)}
progress::-webkit-progress-bar{background:#2c3946;border-radius:10px}progress::-webkit-progress-value{background:var(--mint);border-radius:10px}progress::-moz-progress-bar{background:var(--mint)}
.shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;max-width:1800px;margin:auto;padding:18px 28px 28px 18px}.content{min-width:0}
.relay-menu{position:sticky;top:18px;align-self:start;min-width:0;max-height:calc(100dvh - 36px);overflow:auto;scrollbar-width:thin;border:1px solid var(--line);border-radius:12px;background:linear-gradient(150deg,#192736,#101924);padding:18px 10px}
.menu-brand{display:flex;gap:10px;align-items:center;padding:0 10px 20px}.menu-brand>span{font-size:2.375rem;color:var(--gold)}.menu-brand strong{display:block;font-size:1.5rem;letter-spacing:.19em}.menu-brand small{display:block;font-size:0.875rem;letter-spacing:.3em;color:var(--muted)}
.survivor-mini{display:flex;gap:10px;align-items:center;padding:14px 4px;border-block:1px solid var(--line)}.survivor-mini img{border-radius:8px;flex:none}.survivor-mini strong{font-size:1.0625rem}.survivor-mini small{display:block;color:var(--muted);font-size:0.875rem}.survivor-mini b{color:var(--gold)}
.nav-heading{font-size:0.875rem;letter-spacing:.16em;color:#8598ab;padding:20px 10px 8px;font-weight:700}#skill-navigation{display:grid;gap:5px}
.skill-tab{display:flex;align-items:center;gap:8px;min-width:0;width:100%;padding:10px 7px;position:relative;color:var(--muted);text-align:left;background:transparent;border-color:transparent;font-size:1rem}
.skill-tab img{flex:none;border-radius:5px}.nav-name{flex:1;line-height:1.3}.nav-level{white-space:nowrap;color:#8c9faf;font-size:0.875rem;font-variant-numeric:tabular-nums}
.skill-tab:hover:not(:disabled),.outpost-navigation button:hover{background:#253749;color:var(--ink)}.skill-tab.selected,.outpost-navigation button.selected{color:#d6fff3;border-color:#446a67;background:#24423f}.skill-tab.selected .nav-level{color:var(--mint)}
.skill-tab.is-active-training img{outline:2px solid var(--mint);outline-offset:2px;box-shadow:0 0 8px 3px #79dfc388,0 0 17px #79dfc344}
.outpost-navigation{display:grid;gap:3px}.outpost-navigation button{color:var(--muted);text-align:left;background:transparent;font-weight:500;font-size:1rem;padding:8px 12px}
.menu-footer{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:20px;padding:18px 10px 0}.menu-footer strong{display:block;font-size:0.875rem;letter-spacing:.15em;color:var(--muted)}.menu-footer small{color:var(--mint);font-size:1rem}.status-light{height:6px;width:6px;border-radius:50%;background:var(--mint)}
.skip-link{position:absolute;left:10px;top:-80px;color:var(--ink);background:var(--page);padding:10px;z-index:2}.skip-link:focus{top:5px}
.eyebrow{color:var(--gold);font-size:0.875rem;letter-spacing:.15em;font-weight:650}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;margin-bottom:18px}#page-label{font-size:0.875rem;letter-spacing:.06em;margin-top:4px;color:var(--muted)}.header-actions{display:flex;gap:12px;align-items:center;font-size:0.875rem;color:var(--muted)}.header-actions button{font-size:0.875rem;white-space:nowrap}
.training-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:linear-gradient(110deg,#1b3636,#152730);border:1px solid #3a595a;border-radius:10px;padding:16px 18px 0;margin-bottom:24px;overflow:hidden}.training-description{flex:1 1 260px;min-width:0}.training-description .eyebrow{color:var(--mint);font-size:0.875rem}#training-title{display:block;font-size:1.1875rem;margin-top:2px}#training-hint{font-size:0.9375rem;color:#a9c4c4;margin-top:2px}.training-controls{display:flex;flex-direction:column;gap:7px;align-items:flex-end}.training-controls>div{display:flex;gap:8px;flex-wrap:wrap}.training-controls button{padding:6px 10px;font-size:0.9375rem}#training-time{font-size:0.875rem;color:#b1d5ca;font-variant-numeric:tabular-nums}#training-meter{flex:1 0 calc(100% + 36px);margin:0 -18px;height:3px;border-radius:0}
.panel{background:linear-gradient(130deg,#1b2a3b,#141e2a);border:1px solid var(--line);border-radius:10px;padding:22px}.skill-summary{margin-bottom:28px}.skill-title{display:flex;align-items:center;gap:16px;min-width:0}.skill-title>div{flex:1;min-width:0}#skill-hero-icon{flex:none;width:64px;height:64px;border-radius:9px;overflow:hidden}#skill-hero-icon img{display:block}#skill-description{font-size:1rem;color:var(--muted);margin-top:7px;max-width:650px}.level-badge{padding:8px 12px;border:1px solid #62725c;border-radius:7px;color:var(--gold);font-size:0.9375rem;white-space:nowrap;background:#292d28}.xp-summary{margin-top:20px;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:0.875rem}.xp-summary span{flex:none}.xp-summary progress{height:5px}.xp-summary progress::-webkit-progress-value{background:var(--gold)}.xp-summary progress::-moz-progress-bar{background:var(--gold)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 13px}.section-heading p{font-size:0.9375rem;color:var(--muted);margin-top:4px}.section-heading>span{font-size:0.875rem;color:var(--muted);text-align:right;flex:none}.equipped-label b{color:var(--gold);font-weight:500}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tool-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:#131e2a;padding:15px;min-width:0}.tool-card.equipped{border-color:#49796c;background:linear-gradient(135deg,#233c36,#162721)}.tool-card .eyebrow{font-size:0.875rem;color:var(--muted)}.tool-card h3{font-size:1.125rem;margin:4px 0}.tool-card p{font-size:0.875rem;color:var(--muted)}.tool-card .tool-cost{font-size:0.875rem;color:var(--gold);margin:10px 0 14px}.tool-card button{margin-top:auto;padding:6px 5px;font-size:0.875rem;min-height:32px}.tool-card.equipped button{background:#2a4b40;border-color:#49796c;color:var(--mint)}
.tool-card .tool-unlock{margin-top:8px;color:var(--mint)}
.tool-card .equipment-art{display:block;width:96px;height:96px;max-width:100%;object-fit:contain;align-self:center;margin:10px auto 8px;border-radius:6px;background:#12202e}
.skill-connections{padding:12px 16px;margin-top:-10px;border-left:3px solid var(--mint);background:#172e31;color:#b9d3cc;font-size:1rem;border-radius:0 6px 6px 0}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.resource-card{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid #3a5260;border-top:2px solid #77baa7;border-radius:9px;background:linear-gradient(155deg,#20323e,#131e2a);overflow:hidden}.resource-card.locked{border-color:#35414e;border-top-color:#856d59;background:linear-gradient(155deg,#212932,#151e28)}.resource-card.is-training{border-color:var(--mint);box-shadow:0 0 22px #79dfc30b}
.resource-top{display:flex;justify-content:space-between;gap:8px;font-size:0.875rem;letter-spacing:.09em;color:var(--muted)}.resource-status{color:var(--mint);font-weight:700}.locked .resource-status{color:var(--gold)}
.resource-art{display:grid;place-items:center;align-self:center;width:94px;height:86px;margin:13px 0 6px;border-radius:50%;background:radial-gradient(ellipse,#5cddbb19,transparent 70%)}.resource-art img{border-radius:12px;box-shadow:0 3px 12px #0003}.locked .resource-art img{opacity:.58;filter:saturate(.6)}.tone-copper{background:radial-gradient(ellipse,#dc987c33,transparent 70%)}.tone-violet{background:radial-gradient(ellipse,#ab91eb44,transparent 70%)}.tone-blue{background:radial-gradient(ellipse,#75bdec33,transparent 70%)}.tone-amber{background:radial-gradient(ellipse,#efb96433,transparent 70%)}
.resource-card h3{text-align:center;font-size:1.3125rem}.resource-description{font-size:0.9375rem;color:var(--muted);text-align:center;min-height:50px;margin-top:7px}.resource-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;padding:12px 0;font-size:0.875rem;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:10px}.resource-stats b{color:var(--ink);font-weight:600}.resource-cost{font-size:0.875rem;color:var(--muted);min-height:30px}.resource-gate{font-size:0.875rem;color:var(--gold);margin:6px 0 14px;min-height:30px}.resource-card progress{margin-top:auto;height:4px;margin-bottom:12px}.resource-card button{width:100%;font-size:1rem}.resource-card.is-training button{background:#24483e;color:var(--mint);border-color:#598b7a}
.resource-card{position:relative}.resource-card .resource-boost{width:94px;height:86px;flex:none;padding:6px;border:1px solid transparent;border-radius:16px;background:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.resource-card .resource-boost img{pointer-events:none;-webkit-user-drag:none}.resource-card.is-training .resource-boost{background:#203e36;border-color:var(--mint);box-shadow:0 0 18px #79dfc32b}.resource-card .resource-boost:hover:not(:disabled){background:#315f4f;box-shadow:0 0 22px #79dfc34a}.resource-card .resource-boost:active:not(:disabled){transform:scale(.95)}.resource-card .resource-boost:disabled{background:transparent;border-color:transparent}.boost-hint{text-align:center;font-size:0.875rem;color:var(--muted);min-height:25px;margin-bottom:5px}.is-training .boost-hint{color:var(--mint)}.boost-pop{position:absolute;top:80px;left:0;width:100%;text-align:center;pointer-events:none;color:#e3fff5;text-shadow:0 2px 5px #000;font-size:1.375rem;font-weight:800;animation:boost-rise .7s ease-out forwards}@keyframes boost-rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-30px);opacity:0}}@media(prefers-reduced-motion:reduce){.boost-pop{animation:none}.resource-card .resource-boost:active:not(:disabled){transform:none}}
.milestone-panel{border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-top:20px;color:var(--muted);font-size:1rem;background:#131e29}.milestone-panel summary{cursor:pointer;color:var(--ink)}#skill-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px;list-style:none;padding:0;margin:18px 0 4px;font-size:0.9375rem}#skill-milestones b{color:var(--gold);margin-right:5px}#skill-milestones .unlocked{color:var(--mint)}.page-footer{color:#7f91a4;font-size:0.875rem;margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.page-intro{margin:12px 0 24px;color:var(--muted)}.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.recipe{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.recipe p{font-size:1rem;color:var(--muted);margin-top:12px}.recipe .requirements{color:var(--gold);margin-bottom:18px}.recipe button{margin-top:auto}.operation-value{display:block;font-size:2rem;color:var(--mint);margin-top:15px}.inventory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.inventory-item{padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.inventory-item b{display:block;color:var(--gold);font-size:1.875rem}.inventory-item span{font-size:1rem;color:var(--muted)}.log-panel{margin-top:24px}#event-log{padding-left:18px;font-size:1rem;color:var(--muted)}#event-log li{margin:10px 0}
.relay-overview{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin:24px 0}.relay-scene{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#101a26}.relay-scene img{display:block;width:100%;height:auto}.relay-scene figcaption{padding:12px 18px;color:var(--gold);font-size:0.9375rem}.relay-overview p{color:var(--muted);font-size:1rem;margin-top:12px}.relay-overview dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:1rem;color:var(--muted)}.relay-overview dd{margin:0;color:var(--gold);text-align:right}.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.overview-skill{display:flex;align-items:center;gap:14px;background:var(--panel);color:var(--ink);border-color:var(--line);text-align:left;font-size:1rem}.overview-skill img{border-radius:7px;flex:none}.overview-skill b{display:block;color:var(--gold);font-size:0.9375rem}.overview-skill:hover:not(:disabled){background:#2b4050}.note{font-size:1rem;color:var(--muted);margin-top:20px}
@media(max-width:1200px){.shell{grid-template-columns:260px minmax(0,1fr);gap:20px;padding:16px}.skill-tab{font-size:0.9375rem;gap:6px}.nav-level{font-size:0.875rem}.tool-grid,.resource-grid,.support-grid,.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-controls{align-items:flex-start}.section-heading{align-items:flex-start}.section-heading>span{max-width:140px;flex-shrink:1}.relay-overview{grid-template-columns:1fr}}
@media(max-width:900px){.shell{grid-template-columns:240px minmax(0,1fr);gap:16px;padding:12px}.relay-menu{padding:14px 7px;top:12px}.menu-brand strong{font-size:1.3125rem}.survivor-mini img{width:40px;height:40px}.survivor-mini{gap:7px}.skill-tab img{width:26px;height:26px}.skill-title{flex-wrap:wrap;gap:12px}.level-badge{margin-left:76px;padding:4px 9px}.xp-summary{flex-wrap:wrap;gap:10px}.xp-summary progress{flex:1 0 100%}.topbar{flex-wrap:wrap}.section-heading{flex-wrap:wrap}.section-heading>span{text-align:left;max-width:none}.resource-card{padding:14px}.resource-description{min-height:66px}.resource-stats{gap:5px 8px}.inventory-grid,#skill-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shell{grid-template-columns:1fr;padding:10px;gap:20px}.relay-menu{position:relative;top:0;max-height:none;padding:12px}.menu-brand{padding:0;justify-content:center}.menu-brand>span{font-size:2rem}.menu-brand small{font-size:0.875rem}.survivor-mini,.menu-footer{display:none}.nav-heading{padding:13px 5px 7px}#skill-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.skill-tab{font-size:1rem;padding:9px 7px;gap:8px}.skill-tab img{width:28px;height:28px}.nav-level{font-size:0.875rem}.outpost-navigation{display:flex;flex-wrap:wrap;gap:3px}.outpost-navigation button{font-size:0.875rem;padding:6px 8px}.topbar{min-height:0;margin-bottom:14px}.header-actions{justify-content:space-between;width:100%}.training-banner{padding:14px 14px 0;margin-bottom:18px}.training-description{flex-basis:100%}.training-controls{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:1}#training-title{font-size:1.125rem}#training-meter{flex-basis:calc(100% + 28px);margin-inline:-14px}.panel{padding:18px}.skill-summary{margin-bottom:20px}h1{font-size:2rem}.skill-title{gap:10px}#skill-hero-icon{width:48px;height:48px}.level-badge{margin-left:58px}.resource-description{min-height:50px}.page-footer{font-size:0.875rem}}
@media(max-width:460px){.resource-grid,.support-grid,.overview-grid{grid-template-columns:1fr}.tool-grid{gap:8px}.tool-card{padding:12px}.tool-card h3{font-size:1.0625rem}.tool-card .tool-cost{font-size:0.875rem}.skill-tab{font-size:0.9375rem;gap:6px}.nav-level{font-size:0.875rem}.skill-tab img{width:25px;height:25px}.resource-description{min-height:0}.resource-cost,.resource-gate{min-height:0}.resource-stats{margin-top:4px}.resource-art{height:76px;margin-top:8px}.resource-card{padding:18px}#skill-milestones{grid-template-columns:1fr}.skill-title h1{font-size:1.875rem}#skill-description{font-size:0.9375rem}.xp-summary{font-size:0.875rem}}
/* Readable layouts: wrap text instead of shrinking it on small screens. */
.xp-summary progress{flex:1;min-width:120px;width:auto}
.nav-name{min-width:0;overflow-wrap:anywhere}.xp-summary span{flex-shrink:1;min-width:0;overflow-wrap:anywhere}.header-actions{flex-wrap:wrap}.resource-top{flex-wrap:wrap}.tool-card button{min-height:44px}.tool-card,.recipe,.inventory-item,.overview-skill{overflow-wrap:anywhere}.section-heading{flex-wrap:wrap}.section-heading>span{max-width:100%;overflow-wrap:anywhere}.skill-title h1{overflow-wrap:anywhere}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}.skill-tab{font-size:1rem}.nav-level{font-size:.875rem}.tool-card{padding:18px}.tool-card h3{font-size:1.125rem}.tool-card .tool-cost{font-size:.9375rem}}
/* Persistent event panel and native, keyboard-accessible equipment disclosure. */
.shell{grid-template-columns:280px minmax(0,1fr) 260px;gap:20px}
.activity-log{position:sticky;top:18px;align-self:start;min-width:0;max-height:calc(100dvh - 36px);overflow:auto;padding:18px}
.skill-connections strong{display:block;margin-bottom:4px}.skill-connections p{margin:0}.activity-log #event-log{font-size:.9375rem;list-style:none;padding:0;margin:14px 0 0;overflow-wrap:anywhere}.activity-log #event-log li{padding:12px 0;margin:0;border-top:1px solid var(--line)}.empty-log{color:var(--muted)}
.equipment-panel{border:1px solid var(--line);border-radius:8px;background:#131e29;padding:14px 18px;margin:20px 0;color:var(--ink)}
.equipment-panel summary{cursor:pointer;min-height:32px;font-size:1rem;overflow-wrap:anywhere}.equipment-panel summary::marker{color:var(--gold)}
.equipment-panel .equipped-label{display:block;font-size:.875rem;color:var(--muted);margin:4px 0 0 18px}.equipment-panel[open] summary{margin-bottom:14px}.equipment-help{font-size:.9375rem;color:var(--muted);margin-bottom:16px}
@media(min-width:1241px) and (max-width:1550px){.tool-grid,.resource-grid,.support-grid,.overview-grid,.inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.relay-overview{grid-template-columns:1fr}.skill-title{flex-wrap:wrap}.topbar{flex-wrap:wrap}}
@media(max-width:1240px){.shell{grid-template-columns:260px minmax(0,1fr)}.activity-log{position:static;grid-column:2;max-height:none}}
@media(max-width:900px){.shell{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:700px){.shell{grid-template-columns:1fr}.activity-log{grid-column:1}.equipment-panel{padding:14px}.equipment-panel summary{min-height:44px}}
/* Warden identity, calendar, and shared outpost guidance. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#calendar-time{font-size:.875rem;color:var(--muted);margin:3px 0 7px}
#calendar-progress{max-width:290px;height:4px}
.outpost-connections{margin:18px 0 22px}
.warden-card{min-width:0;display:flex;flex-direction:column}
.warden-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.warden-heading h2{flex:1;overflow-wrap:anywhere;min-width:0}
.warden-heading button{font-size:.875rem}
.warden-portrait{display:block;width:256px;max-width:100%;height:auto;align-self:center;margin:20px auto 0;border-radius:12px}
.survivor-mini>div{min-width:0}.survivor-mini strong{overflow-wrap:anywhere}
#warden-name-form{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:8px;min-width:0}
#warden-name-form label{display:block;font-weight:650}
#warden-name-input{width:100%;min-width:0;border:1px solid #657a8f;border-radius:6px;padding:10px;font:inherit;background:var(--page);color:var(--ink);margin-top:6px}
#warden-name-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#warden-name-help,#warden-name-error{font-size:.875rem;margin:8px 0}
#warden-name-error{color:#ffb1aa}
.name-actions{display:flex;gap:8px;flex-wrap:wrap}
.training-controls{max-width:100%}.training-controls button{min-height:44px}
/* Twelve skill operations and expedition timers. */
select,input{font:inherit;color:var(--ink);background:#101b27;border:1px solid #567080;border-radius:6px;padding:10px;max-width:100%;min-width:0}
select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.operations-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0}.operations-toolbar p{color:var(--muted)}
.operation-card{min-width:0}.operation-card label{display:block;margin:12px 0 5px;font-size:.9375rem}.operation-card select,.operation-card input{width:100%}
.operation-heading{display:flex;gap:12px;align-items:center}.operation-heading img{flex:none;border-radius:7px}.operation-heading>div{min-width:0}
.operation-card .operation-heading h3{margin:0}.operation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.operation-actions button{flex:1}
.operation-card details{margin:12px 0;border-top:1px solid var(--line);padding-top:12px}.operation-card summary{cursor:pointer;color:var(--gold);min-height:44px}
.operation-card [data-operation-status]{color:var(--mint)}.operation-card .operation-inputs{min-height:50px}
.patrol-status{margin:18px 0 24px}.patrol-status p{margin:8px 0 14px;color:var(--muted)}.patrol-card .eyebrow{margin-bottom:12px}
/* A short, skippable introduction; existing relay artwork supplies the backdrop. */
#story-intro { box-sizing: border-box; min-height: 100svh; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#09121ce8,#09121cde),url('assets/web/keyart/starfall.keyart.ashland_relay.v001__1280x720.webp') center/cover fixed; }
#story-intro header { text-align: center; }
#story-intro h1 { font-size: clamp(30px,5vw,54px); margin: 8px 0 24px; }
#story-window { width: min(100%,660px); height: 52svh; overflow: hidden; }
#story-text { padding: 12px 8px 24px; font-size: clamp(18px,2.2vw,24px); line-height: 1.8; text-align: center; color: #e1e8ed; }
#story-text p { margin: 0 0 32px; }
#story-text strong { color: #f4bd76; }
#story-intro footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
#story-intro.static-story #story-window { overflow-y: auto; }
.journey-enter { animation: journey-arrival .6s ease-out; }
@keyframes journey-arrival { from {opacity:0} to {opacity:1} }
@media(prefers-reduced-motion:reduce) { .journey-enter { animation: none; } }
#tutorial-panel { margin-bottom: 18px; border: 1px solid #7edecb; padding: 18px; }
#tutorial-panel h2 { margin: 0; font-size: 20px; }
.tutorial-target { outline: 2px solid #7edecb !important; outline-offset: 3px; animation: tutorial-glow 2.8s ease-in-out infinite; }
@keyframes tutorial-glow { 0%,100% {box-shadow:0 0 3px #7edecb44} 50% {box-shadow:0 0 20px #7edecb99;background-color:#244b49} }
.requirement-action { display: inline-block; max-width: 100%; }
.requirement-action > button:disabled { pointer-events:none; }
.requirements-info { font-size: 14px; margin: 6px 4px; min-height: 36px; }
#requirements-popup { position:fixed; z-index:1000; bottom:16px; right:16px; width:min(540px,calc(100vw - 32px)); max-height:70svh; overflow:auto; box-sizing:border-box; padding:16px; background:#152735; color:#eef5fa; border:1px solid #7edecb; border-radius:12px; box-shadow:0 12px 40px #0009; }
#requirements-popup table { width:100%; border-collapse:collapse; font-size:14px; }
#requirements-popup th,#requirements-popup td { padding:8px 4px; text-align:left; border-bottom:1px solid #3a4e58; overflow-wrap:anywhere; }
#requirements-popup .met { color:#7edecb; }
#requirements-popup .unmet td:last-child { color:#ffc08a; }
@media(prefers-reduced-motion:reduce) { .tutorial-target {animation:none;box-shadow:0 0 0 2px #7edecb;} }
.mobile-install { margin:12px auto; max-width:940px; padding:12px 18px; background:#152735; border:1px solid #2c3b4c; border-radius:10px; }
.mobile-install summary { cursor:pointer; color:var(--mint); min-height:44px; display:list-item; padding:8px 0; }
.mobile-install p { margin-top:8px; }
@media(max-width:700px) {
  body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  button, .requirements-info, select, summary { min-height:44px; }
  input, select { font-size:16px; }
  .mobile-install { margin:10px; }
  #requirements-popup { bottom:max(16px,env(safe-area-inset-bottom)); }
}
.alpha-label { padding:8px 20px; color:var(--muted); font-size:14px; letter-spacing:.06em; border-bottom:1px solid var(--line); }
.help-button { min-width:44px; min-height:44px; border-radius:6px; margin:8px 0; font-weight:800; }
.continue-glow { box-shadow:0 0 14px #79dfc399; animation:continue-pulse 2.8s ease-in-out infinite; }
@keyframes continue-pulse { 50% {box-shadow:0 0 24px 5px #79dfc388;} }
progress::-webkit-progress-value { transition:width .2s linear; }
#training-meter::-webkit-progress-value,progress[data-task-progress]::-webkit-progress-value { transition:none; }
progress::-moz-progress-bar { transition:width .2s linear; }
#training-meter::-moz-progress-bar,progress[data-task-progress]::-moz-progress-bar { transition:none; }
@media(prefers-reduced-motion:reduce) { .continue-glow {animation:none;} progress::-webkit-progress-value {transition:none;} progress::-moz-progress-bar {transition:none;} }
/* New journey and cosmetic Warden selection */
.new-game { max-width: 940px; margin: 40px auto; padding: 32px; }
.new-game h1 { font-size: clamp(28px, 4vw, 42px); }
.new-game form > label { display: block; font-weight: 700; margin-top: 24px; }
.new-game input[type="text"], #new-game-name { width: 100%; max-width: 440px; padding: 12px; margin-top: 8px; background: #101d2b; color: #eef5fa; border: 1px solid #607481; border-radius: 8px; font: inherit; box-sizing: border-box; }
.new-game fieldset, .appearance-picker fieldset { border: 0; padding: 0; margin: 24px 0 12px; min-width: 0; }
.new-game legend, .appearance-picker legend { margin-bottom: 12px; font-weight: 700; }
.avatar-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.avatar-choice { display: flex; flex-direction: column; padding: 8px; border: 2px solid #354956; border-radius: 12px; background: #101d2b; cursor: pointer; min-width: 0; }
.avatar-choice:has(input:checked) { border-color: #7edecb; background: #203f40; box-shadow: 0 0 14px #7edecb24; }
.avatar-choice:focus-within { outline: 2px solid #f4bd76; outline-offset: 3px; }
.avatar-choice img { width: 100%; height: auto; border-radius: 8px; }
.avatar-choice span { padding: 12px 2px; font-weight: 700; overflow-wrap: anywhere; }
.avatar-choice input { accent-color: #7edecb; }
.compact { grid-template-columns: 1fr; }
.compact .avatar-choice { flex-direction: row; align-items: center; }
.compact img { width: 64px; margin-right: 8px; }
#new-game-error { color: #ffaca5; min-height: 24px; }
.appearance-picker summary { cursor: pointer; color: #7edecb; padding: 12px 0; }
@media(max-width:600px) {
  .new-game { margin: 12px; padding: 20px; }
  .new-game .avatar-grid { grid-template-columns: 1fr; }
  .new-game .avatar-choice { flex-direction: row; align-items: center; }
  .new-game .avatar-choice img { width: 96px; margin-right: 12px; }
}
/* Relay layers share the baseline composition and never intercept controls. */
.relay-visual-scene { position: relative; }
.relay-visual-scene > img { display: block; width: 100%; height: auto; }
.relay-visual-scene > img[hidden] { display: none; }
.relay-visual-scene > .relay-visual-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.relay-visual-unavailable { aspect-ratio: 16 / 9; background: #101927; }
/* Alpha 0.20: readable controls and true empty meters. */
.operation-card .operation-actions button{flex:0 1 auto;min-width:max-content;white-space:nowrap;overflow-wrap:normal;align-self:stretch}
progress[value="0"]::-webkit-progress-value{background:transparent}
progress[value="0"]::-moz-progress-bar{background:transparent}
progress[id^="operation-meter"]::-webkit-progress-value{transition:none}
.mentor-portrait{float:left;object-fit:cover;border-radius:12px;margin:0 18px 12px 0}
#tutorial-panel{display:flow-root}.tutorial-dim{opacity:.35}.tutorial-target{opacity:1}
.survivor-mini[role="button"]{cursor:pointer}.survivor-mini:focus-visible{outline:2px solid var(--mint)}
.relay-history{padding:0 18px 22px;color:var(--muted)}.relay-history p{margin-top:12px}
#settings-dialog{background:#142331;color:var(--ink);border:1px solid var(--mint);border-radius:12px;width:min(640px,92vw);max-height:85vh;padding:24px;overflow:auto}
#settings-dialog::backdrop{background:#000a}#settings-dialog label{display:block;margin-top:18px}#settings-dialog h3{margin-top:20px}#settings-dialog a:not(.discord-join){color:var(--mint)}
.settings-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#combat-ui{display:grid;gap:18px}#combat-ui .panel{min-width:0}#combat-ui label{display:block;margin:10px 0}#combat-ui select{width:100%}#combat-ui progress{height:9px;margin:10px 0}#combat-ui button{margin:6px 4px 0 0}#combat-ui [data-member-attack]{height:3px}#combat-ui .combat-packing{display:flex;flex-wrap:wrap;gap:14px}#combat-ui .combat-packing label{flex:1 1 180px}#combat-ui input{width:100%;max-width:220px}#combat-log{max-height:300px;overflow:auto;color:var(--muted)}#combat-message{color:var(--gold)}
/* Settings sits after crew status in the shared left navigation. */
.sidebar-settings{display:block;width:100%;margin-top:20px;text-align:left;border-color:var(--line);padding:12px;color:var(--muted)}
.sidebar-settings:hover:not(:disabled){background:#253749;color:var(--ink)}
.survivor-mini[role="button"]{cursor:pointer;border:1px solid transparent;border-radius:8px;padding:8px}
.survivor-mini[role="button"]:hover,.survivor-mini.selected{background:#244440;border-color:var(--accent,#79ddc5)}
.survivor-mini[role="button"]:focus-visible{outline:2px solid #79ddc5;outline-offset:3px}
.combat-nav-heading{border-top:1px solid var(--line);margin-top:18px;padding-top:18px;font-size:1rem;color:var(--muted)}
.inventory-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:16px 0}.inventory-controls p{flex-basis:100%}
#developer-tools{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}#developer-tools label{display:block;margin:12px 0}#developer-tools button{margin:8px 4px}#developer-tools select{max-width:100%}#developer-tools fieldset:disabled{opacity:.55}#cheat-status{color:var(--gold)}
/* The community embed stays within narrow layouts without resizing every tick. */
.discord-community { max-width: 848px; min-width: 0; }
#discord-widget { display: block; width: 100%; max-width: 800px; height: 600px; border: 0; border-radius: 12px; overflow: hidden; background: #202225; }
.discord-join { display:inline-block; padding:10px 16px; border:1px solid transparent; border-radius:6px; background:var(--mint); color:#10231f; font-weight:650; text-decoration:none; margin:8px 0; }
.discord-join:hover { background:#a5f1da; }
#dev-speed-indicator { color:var(--gold); font-weight:800; }
.speed-presets { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
#discord-dialog { background:#142331; color:var(--ink); border:1px solid var(--mint); border-radius:12px; width:min(900px,92vw); max-height:85vh; padding:24px; overflow:auto; }
#discord-dialog::backdrop { background:#000a; }
#discord-dialog > button { margin-bottom:16px; }
#discord-dialog #discord-widget { height:min(600px,55vh); }
:root details > summary {
  cursor:pointer;
  min-height:44px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#192736;
  color:var(--ink);
}
:root details > summary::marker { color:var(--mint); }
@media (hover:hover) {
  :root details > summary:hover { background:#293f4d; border-color:var(--mint); color:#fff; }
}
:root details > summary:focus-visible { background:#293f4d; border-color:var(--mint); outline:2px solid var(--gold); outline-offset:3px; }
:root details > summary:active { background:#31564f; border-color:var(--mint); }
:root details[open] > summary { border-color:#527d75; }
#keyboard-controls { margin-top:24px; }
.keyboard-bindings > div { display:flex; align-items:center; gap:16px; padding:6px 0; border-bottom:1px solid var(--line); }
.keyboard-bindings dt { min-width:110px; }
.keyboard-bindings dd { margin:0; }
.keyboard-bindings kbd { display:inline-block; padding:3px 9px; border:1px solid #527d75; border-radius:6px; background:#192736; color:var(--mint); }
#keyboard-controls p { margin-top:12px; }
/* Keep the active task and its controls in view without removing layout space. */
.training-sticky-wrap {
  position:sticky;
  top:0;
  z-index:20;
  padding-top:2px;
  background:var(--page);
  margin-bottom:24px;
}
.training-sticky-wrap .training-banner {
  border-radius:10px;
  margin-bottom:0;
  box-shadow:0 8px 22px #0005;
}
@media(max-width:700px) { .training-sticky-wrap { margin-bottom:18px; } }
.activity-filter { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.activity-filter select { max-width:100%; }
.legacy-recipe { color:var(--gold); font-size:.9em; }
.equipment-fallback { display:block; min-height:96px; padding:24px 0; }
.relay-stage-label { padding:12px 18px 0; color:var(--mint); font-size:.9em; }
#save-transfer button { margin:4px 6px 4px 0; }