#frontier-open{position:fixed;left:16px;bottom:20px;z-index:18;margin:0;padding:9px 15px;font-size:14px;background:color-mix(in srgb, var(--af-stone-800) 91%, transparent);box-shadow:0 8px 24px color-mix(in srgb, var(--af-void) 53%, transparent)}
#frontier-open kbd{margin-left:8px;font-family:"Alegreya Sans",sans-serif}
body:has(#story:not(.hidden)) #frontier-open,body:has(#start:not(.hidden)) #frontier-open,body:has(#hero-creator:not(.hidden)) #frontier-open,body:has(#game-settings:not(.hidden)) #frontier-open,body:has(#pause:not(.hidden)) #frontier-open,body:has(#dead:not(.hidden)) #frontier-open,body:has(#touch:not(.hidden)) #frontier-open{display:none}
#frontier-vitals{position:fixed;left:16px;top:158px;z-index:12;min-width:180px;max-width:260px;padding:8px 11px;background:color-mix(in srgb, var(--af-stone-900) 85%, transparent);border:1px solid color-mix(in srgb, var(--af-ember-300) 27%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel;color:var(--af-bone);font-size:13px;line-height:1.45;pointer-events:none;text-shadow:0 1px 3px var(--af-void)}
#frontier-vitals b{color:var(--af-ember-300)}
#frontier-vitals .urgent{color:var(--af-blood-300)}
body:has(#story:not(.hidden)) #frontier-vitals,body:has(#start:not(.hidden)) #frontier-vitals,body:has(#hero-creator:not(.hidden)) #frontier-vitals,body:has(#game-settings:not(.hidden)) #frontier-vitals,body:has(#dead:not(.hidden)) #frontier-vitals{display:none}
body:has(#panel.frontier-panel:not(.hidden)) #frontier-vitals{display:none}
#panel.frontier-panel{width:min(1040px,96vw);max-height:92vh;padding:24px;display:block;overflow:auto;background:linear-gradient(145deg,var(--af-iron-800),var(--af-stone-900) 70%);border-color:var(--af-gold-500);box-shadow:0 24px 70px color-mix(in srgb, var(--af-void) 73%, transparent)}
#panel.frontier-panel h2{font-family:Cinzel,serif;color:var(--af-ember-300);font-size:clamp(24px,3vw,35px);margin:0 0 6px}
#panel.frontier-panel p{margin:5px 0 12px;color:var(--af-ash);line-height:1.4}
#panel.frontier-panel .frontier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#panel.frontier-panel .frontier-head .x{margin:0;flex:none}
#panel.frontier-panel .frontier-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
#panel.frontier-panel .frontier-meter{background:var(--af-stone-850);border:1px solid color-mix(in srgb, var(--af-iron-300) 20%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel;padding:8px 10px;font-size:13px}
#panel.frontier-panel .frontier-meter b{display:block;color:var(--af-ember-300);font:700 18px "Alegreya Sans",sans-serif}
#panel.frontier-panel .frontier-meter.urgent b{color:var(--af-blood-300)}
#panel.frontier-panel .frontier-context{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
#panel.frontier-panel .frontier-context span{border:1px solid color-mix(in srgb, var(--af-gold-600) 33%, transparent);background:var(--af-stone-600);padding:3px 8px;border-radius:var(--af-cut-lg);corner-shape:bevel;font-size:12px;color:var(--af-bone)}
/* #panel.frontier-panel .frontier-tabs: every tab strip in the game is drawn by public/ui/game.css (the design system's tabs) */
#panel.frontier-panel .frontier-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
#panel.frontier-panel .frontier-action{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:start;background:var(--af-stone-800);border:1px solid color-mix(in srgb, var(--af-iron-300) 19%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:11px 12px;min-height:100px}
#panel.frontier-panel .frontier-action.available{border-color:color-mix(in srgb, var(--af-gold-500) 47%, transparent)}
#panel.frontier-panel .frontier-action h3{font-family:Cinzel,serif;font-size:15px;color:var(--af-ember-300);margin:0}
#panel.frontier-panel .frontier-action small{display:block;font-size:13px;line-height:1.35;color:var(--af-ash);grid-column:1/-1}
#panel.frontier-panel .frontier-action .frontier-result{color:var(--af-moss-100)}
#panel.frontier-panel .frontier-action button{font-size:13px;padding:6px 10px;margin:0;min-width:68px}
#panel.frontier-panel .frontier-action button:disabled{opacity:.55}
#panel.frontier-panel .frontier-choices{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
#panel.frontier-panel .frontier-choices button{min-width:0}
#panel.frontier-panel .frontier-supplies{margin-top:16px;border-top:1px solid color-mix(in srgb, var(--af-ember-300) 20%, transparent);padding-top:12px}
#panel.frontier-panel .frontier-supplies h3{font-family:Cinzel,serif;color:var(--af-ember-300);font-size:16px;margin:0 0 8px}
#panel.frontier-panel .frontier-items{display:flex;flex-wrap:wrap;gap:5px}
#panel.frontier-panel .frontier-items span{background:var(--af-stone-700);border:1px solid color-mix(in srgb, var(--af-gold-600) 33%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel;padding:4px 8px;font-size:13px}
#panel.frontier-panel .frontier-feedback{color:var(--af-gold-300);min-height:20px;margin:12px 0 0}
#panel.frontier-panel .construction-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:16px 0 10px;border-top:1px solid color-mix(in srgb, var(--af-ember-300) 20%, transparent);padding-top:14px}
#panel.frontier-panel .construction-intro p{margin:0;max-width:70ch}
#panel.frontier-panel .construction-intro span{white-space:nowrap;color:var(--af-ember-300);font-weight:700}
#panel.frontier-panel .construction-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#panel.frontier-panel .construction-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--af-stone-800);border:1px solid color-mix(in srgb, var(--af-gold-600) 47%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:11px 12px}
#panel.frontier-panel .construction-item h3,#panel.frontier-panel .construction-queue h3{font-family:Cinzel,serif;color:var(--af-ember-300);margin:0;font-size:16px}
#panel.frontier-panel .construction-item p{font-size:13px;margin:5px 0 0;color:var(--af-ash)}
#panel.frontier-panel .construction-item button{margin:0;flex:none;padding:7px 13px;font-size:13px}
#panel.frontier-panel .construction-queue{margin-top:21px;border-top:1px solid color-mix(in srgb, var(--af-ember-300) 20%, transparent);padding-top:14px}
#panel.frontier-panel .construction-queue h3{margin-bottom:10px}
#panel.frontier-panel .construction-job{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid color-mix(in srgb, var(--af-iron-300) 14%, transparent)}
#panel.frontier-panel .construction-job b{display:block;color:var(--af-bone);font-size:14px}
#panel.frontier-panel .construction-job span{display:block;color:var(--af-ash);font-size:13px;margin-top:3px}
#panel.frontier-panel .construction-job-actions{display:flex;gap:6px;flex:none}
#panel.frontier-panel .construction-job-actions button{margin:0;padding:6px 9px;font-size:12px}
#panel.frontier-panel .construction-empty{color:var(--af-ash)}
#construction-hud{position:fixed;z-index:24;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:min(720px,calc(100vw - 32px));padding:10px 11px 10px 16px;background:color-mix(in srgb, var(--af-iron-800) 94%, transparent);border:1px solid var(--af-moss-300);border-radius:var(--af-cut-md);corner-shape:bevel;box-shadow:0 9px 24px color-mix(in srgb, var(--af-void) 60%, transparent);color:var(--af-bone);font:15px "Alegreya Sans",sans-serif}
#construction-hud[hidden]{display:none}
#construction-hud.invalid{border-color:var(--af-blood-300)}
#construction-hud .construction-hud-copy{flex:1;min-width:180px}
#construction-hud .construction-hud-controls{display:flex;gap:3px;flex:none}
#construction-hud .construction-hud-controls button{min-width:30px;padding:7px 5px}
#construction-hud b{display:block;color:var(--af-ember-300)}
#construction-hud span{display:block;font-size:13px;line-height:1.3;color:var(--af-bone)}
#construction-hud.invalid span{color:var(--af-bone)}
#construction-hud button{margin:0;padding:7px 11px;flex:none;font-size:13px}
body:has(#pause:not(.hidden)) #construction-hud,body:has(#dead:not(.hidden)) #construction-hud,body:has(#start:not(.hidden)) #construction-hud{display:none}
@media(max-width:700px){#frontier-vitals{top:120px;font-size:12px}#panel.frontier-panel{padding:13px;max-height:100vh;inset:0;width:100vw;border-radius:0}#panel.frontier-panel .frontier-actions{grid-template-columns:1fr}#panel.frontier-panel .frontier-meters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#panel.frontier-panel .construction-catalog{grid-template-columns:1fr}#panel.frontier-panel .construction-intro{align-items:flex-start;flex-direction:column;gap:3px}#panel.frontier-panel .construction-job{align-items:flex-start;flex-direction:column}#construction-hud{bottom:10px;width:calc(100vw - 20px);font-size:13px;flex-wrap:wrap}#construction-hud .construction-hud-copy{flex-basis:100%}#construction-hud span{font-size:12px}}