/* Shared UpMass chrome. Industrial launch-control desk. */
:root{
  --night:#07090e; --steel:#10141c; --panel:#171c26; --panel2:#1d2430; --edge:#2a3344;
  --copper:#d4894a; --flame:#ff6a1a; --ember:#ffb347; --lunar:#d5d0c4; --ice:#7ec8d8;
  --sage:#7dba8a; --bad:#e25a48; --text:#e8e4dc; --dim:#8b9088; --ink:#120c08;
  color-scheme:dark;
  --pad-top:env(safe-area-inset-top,0px);
  --pad-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--night);color:var(--text);
  font-family:"Barlow",system-ui,sans-serif;font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}
button,a.btn{font:inherit;color:inherit}
h1,h2,h3,.display{font-family:"Antonio",system-ui,sans-serif;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin:0;line-height:1.05}
a{color:var(--ice)}
a:focus-visible,button:focus-visible,.hit:focus-visible{
  outline:2px solid var(--ember);outline-offset:2px}

.app{min-height:100%;display:flex;flex-direction:column;padding:
  calc(8px + var(--pad-top)) max(10px, env(safe-area-inset-right,0px)) calc(10px + var(--pad-bot)) max(10px, env(safe-area-inset-left,0px))}
/* Desk pages (bay, map, sling) fit the window on tablets and desktops so the
   main controls never fall below the fold; their side columns scroll. */
@media (min-width:700px) and (orientation:landscape) and (min-height:600px){
  .app.desk{height:100vh;height:100dvh;min-height:0}
  .app.desk .stage{min-height:0}
  .app.desk .col{min-height:0;overflow-y:auto}
}
/* Phones: the Launch row stays pinned to the bottom of the screen. */
@media (max-width:699px), (orientation:portrait){
  .dock{position:sticky;bottom:0;z-index:5;background:var(--night);
    padding:8px 0 calc(4px + var(--pad-bot));margin-bottom:calc(-10px - var(--pad-bot));
    box-shadow:0 -10px 16px var(--night)}
  .dock > .fine{display:none}
}
@media (min-width:700px) and (orientation:landscape){
  .app{padding:calc(12px + var(--pad-top)) 16px calc(14px + var(--pad-bot))}
  .stat b{font-size:20px}
  .btn,.top .back,.top .ghost{min-height:52px}
}

.top{display:flex;align-items:center;gap:10px;min-height:48px;flex:none;margin-bottom:8px}
.top .back,.top .ghost{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;
  background:var(--panel);border:1px solid var(--edge);border-radius:2px 12px 2px 2px;
  text-decoration:none;color:var(--lunar);font-family:"Antonio",sans-serif;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px}
.top .back:active,.top .ghost:active{transform:translateY(1px)}
.top .title{flex:1;font-family:"Antonio",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  font-size:15px;color:var(--ember);text-align:center}
.top .mark{font-family:"Antonio",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-size:12px;color:var(--dim)}

.hud{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.stat{background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--copper);
  padding:6px 10px;min-width:72px;flex:1}
.stat b{display:block;font-family:"Antonio",sans-serif;font-size:18px;color:var(--lunar);letter-spacing:.04em}
.stat span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stat.warn{border-left-color:var(--bad)}
.stat.ok{border-left-color:var(--sage)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
  background:var(--flame);color:var(--ink);border:0;border-radius:2px 14px 2px 2px;
  font-family:"Antonio",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:16px;text-decoration:none;cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--lunar);border:1px solid var(--edge)}
.btn.sage{background:var(--sage);color:#06210c}
.btn.wide{width:100%}
.btn:active:not(:disabled){transform:translateY(1px)}

.panel{background:var(--panel);border:1px solid var(--edge);border-radius:2px 16px 2px 2px;padding:14px 16px}
.kicker{font-family:"Antonio",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.lede{color:#cfc8bc;max-width:48ch}
.fine{color:var(--dim);font-size:13.5px}

.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#07090ecc;display:flex;align-items:flex-end;justify-content:center;
  padding:calc(12px + var(--pad-top)) 12px calc(18px + var(--pad-bot));z-index:20}
@media (min-width:700px) and (orientation:landscape){
  .overlay{align-items:center}
}
.overlay .card{width:min(520px,100%);background:var(--steel);border:1px solid var(--edge);
  border-top:3px solid var(--flame);border-radius:8px 8px 2px 2px;padding:20px 18px 16px;
  max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.overlay h2{color:var(--ember);font-size:28px;margin-bottom:8px}
.overlay .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

.chip{font-family:"Antonio",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 9px;border:1px solid var(--edge);border-radius:9px;color:var(--ice);background:#12161e}

/* Why a module will not seat (bay and Rim). Sits over the top of the frame. */
.why{position:absolute;left:10px;right:10px;top:10px;z-index:4;background:#1a0d0aee;border:1px solid var(--bad);
  color:var(--lunar);padding:7px 10px;border-radius:4px;font-size:13.5px;line-height:1.3;pointer-events:none}
.why.low{top:auto;bottom:10px}
.why b{color:var(--bad);font-family:"Antonio",sans-serif;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-right:6px}
/* Seated cargo reads as a shape, not a flat cell with a 10px name.
   Colour comes from the module (--mod). Joined cells share one silhouette. */
.cell.shape-tank,.cell.shape-habitat,.cell.shape-crate,.cell.shape-solar{overflow:hidden}
.cell.shape-tank,.cell.shape-habitat{border-radius:12px}
.cell.shape-tank[data-join*="n"],.cell.shape-habitat[data-join*="n"]{border-top-left-radius:2px;border-top-right-radius:2px}
.cell.shape-tank[data-join*="s"],.cell.shape-habitat[data-join*="s"]{border-bottom-left-radius:2px;border-bottom-right-radius:2px}
.cell.shape-tank[data-join*="w"],.cell.shape-habitat[data-join*="w"]{border-top-left-radius:2px;border-bottom-left-radius:2px}
.cell.shape-tank[data-join*="e"],.cell.shape-habitat[data-join*="e"]{border-top-right-radius:2px;border-bottom-right-radius:2px}
.cell.shape-tank{
  background:
    radial-gradient(ellipse at 50% 38%, #ffffff73, transparent 58%),
    linear-gradient(90deg, #00000066, transparent 24%, transparent 76%, #00000066),
    var(--mod, #888);
  box-shadow:inset 0 0 0 2px #ffffff40}
.cell.shape-habitat{
  background:linear-gradient(180deg, #ffffff40, transparent 46%), var(--mod, #6ea8d8);
  box-shadow:inset 0 0 0 2px #ffffff2e}
.cell.shape-habitat.mark::before{
  content:"";position:absolute;left:29%;top:36%;width:42%;height:28%;border-radius:2px;
  background:#d7f3fb;box-shadow:inset 0 0 0 1px #1a1f2888}
.cell.shape-solar{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(rgba(0,0,0,.4) 0 1px, transparent 1px 7px),
    var(--mod, #d4a43a);
  box-shadow:inset 0 0 0 2px #3a2a10}
.cell.shape-crate{
  background:linear-gradient(135deg, #ffffff55, transparent 42%), var(--mod, #b08a68);
  box-shadow:inset 0 0 0 3px #00000055, inset 0 0 0 5px #ffffff24}
.cell.shape-crate.mark::before{
  content:"";position:absolute;inset:18%;pointer-events:none;
  background:
    linear-gradient(45deg, transparent 46%, rgba(0,0,0,.4) 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(0,0,0,.4) 46% 54%, transparent 54%)}
.cell.risk::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(135deg, #e25a48cc 0 4px, transparent 4px 9px)}
.mod-glyph{position:relative;z-index:1;font-size:clamp(14px,4vw,20px);line-height:1;pointer-events:none}
.share-fallback{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--pad-bot));z-index:40;
  min-height:6em;background:var(--steel);color:var(--text);border:1px solid var(--ember);padding:8px;font:inherit}

/* ---- Motion (fx.js). Base styles are the end state, so reduced motion
   (animation:none below) still shows the finished picture. ---- */
.fx-launching{overflow:hidden}
.vehicle.fx-lift{animation:fx-lift 1.35s cubic-bezier(.55,0,.85,.4) forwards}
.vehicle.fx-return{animation:fx-return .45s ease-out}
@keyframes fx-lift{
  0%{transform:translate(0,0)} 6%{transform:translate(-1px,1px)} 12%{transform:translate(1px,0)}
  18%{transform:translate(-1px,1px)} 26%{transform:translate(0,-2%)} 100%{transform:translate(0,-135%)}}
@keyframes fx-return{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
.fx-plume{position:absolute;left:30%;right:30%;top:100%;height:120px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,#fff7d0 0,#ffb347 18%,#ff6a1a 38%,#ff6a1a00 70%);
  transform-origin:50% 0;animation:fx-plume .12s ease-in-out infinite alternate}
@keyframes fx-plume{from{transform:scaleY(.85)} to{transform:scaleY(1.1)}}
.fx-smoke{position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none}
.fx-smoke i{position:absolute;bottom:-20px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,#c8c4bccc 0,#8b908866 45%,#8b908800 70%);opacity:0;
  animation:fx-smoke 1.3s ease-out forwards}
.fx-smoke i:nth-child(1){left:28%;animation-delay:.15s} .fx-smoke i:nth-child(2){left:44%;animation-delay:.25s}
.fx-smoke i:nth-child(3){left:58%;animation-delay:.2s}  .fx-smoke i:nth-child(4){left:18%;animation-delay:.4s}
.fx-smoke i:nth-child(5){left:68%;animation-delay:.45s} .fx-smoke i:nth-child(6){left:38%;animation-delay:.55s}
@keyframes fx-smoke{0%{opacity:0;transform:scale(.3)} 30%{opacity:1} 100%{opacity:0;transform:scale(2.2) translateY(-30px)}}

.fx-td{position:relative;height:96px;margin:-6px 0 12px;overflow:hidden;border-radius:4px;
  background:linear-gradient(180deg,#05070c 0%,#0c1220 70%,#141a28 100%);border:1px solid var(--edge)}
.fx-td::before{content:"";position:absolute;inset:0;background:radial-gradient(1px 1px at 12% 20%,#fff8 50%,transparent),
  radial-gradient(1px 1px at 70% 30%,#fff6 50%,transparent),radial-gradient(1px 1px at 40% 12%,#fff5 50%,transparent),
  radial-gradient(1px 1px at 88% 16%,#fff7 50%,transparent)}
.fx-ground{position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,#8f8b84,#5d5a55)}
.fx-mars .fx-ground{background:linear-gradient(180deg,#b5643a,#7a3a20)}
.fx-mars{background:linear-gradient(180deg,#2a1810 0%,#4a2a1a 75%,#5a3220 100%)}
.fx-callisto .fx-ground{background:linear-gradient(180deg,#7a6a58,#4a4036)}
.fx-ship{position:absolute;left:50%;bottom:22px;width:16px;height:50px;margin-left:-8px;
  background:linear-gradient(90deg,#8e98a3,#c5ccd3 40%,#8e98a3);border-radius:8px 8px 2px 2px;
  animation:fx-descend 1.2s cubic-bezier(.2,.7,.35,1) both}
.fx-ship b{position:absolute;left:-5px;right:-5px;bottom:0;height:7px;border-left:2px solid #6d767e;border-right:2px solid #6d767e}
.fx-ship i{position:absolute;left:3px;right:3px;top:100%;height:0;border-radius:0 0 50% 50%;
  background:linear-gradient(#ffb347,#ff6a1a00);animation:fx-burn 1.2s ease-out both}
@keyframes fx-descend{0%{transform:translateY(-120px)} 75%{transform:translateY(-6px)} 88%{transform:translateY(1px)} 100%{transform:none}}
@keyframes fx-burn{0%{height:22px} 85%{height:12px} 100%{height:0}}
.fx-dust{position:absolute;bottom:16px;left:50%;width:26px;height:16px;margin-left:-13px;border-radius:50%;
  background:radial-gradient(ellipse,#cfc8bccc 0,#cfc8bc00 70%);opacity:0;animation:fx-dust 1.4s ease-out .85s both}
.fx-mars .fx-dust{background:radial-gradient(ellipse,#d88a5acc 0,#d88a5a00 70%)}
.fx-dust.d1{--dx:-70px} .fx-dust.d2{--dx:70px} .fx-dust.d3{--dx:-40px;animation-delay:.9s}
.fx-dust.d4{--dx:44px;animation-delay:.92s} .fx-dust.d5{--dx:-100px;animation-delay:.95s} .fx-dust.d6{--dx:104px;animation-delay:.97s}
@keyframes fx-dust{0%{opacity:0;transform:translateX(0) scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:translateX(var(--dx)) translateY(-8px) scale(2.4)}}

/* Daily Lift share grid */
.grid-share{display:grid;grid-template-columns:repeat(6,14px);gap:2px;margin:10px 0 0}
.grid-share i{width:14px;height:14px;border-radius:2px;border:1px solid #ffffff14}
.score-big{font-family:"Antonio",sans-serif;font-size:44px;line-height:1;color:var(--lunar);letter-spacing:.02em}
.score-big small{font-size:18px;color:var(--dim);margin-left:4px}
.grade{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;margin-left:10px;
  border:2px solid var(--ember);color:var(--ember);font-family:"Antonio",sans-serif;font-size:28px;border-radius:2px 12px 2px 2px;vertical-align:top}
.grade.S{border-color:var(--sage);color:var(--sage)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation:none!important}}