:root{
  --bg:#0d1a1c;
  --ink:#f4f1ea;
  --ink-soft:rgba(244,241,234,.72);
  --accent:#e7993e;
  --accent-ink:#1b1206;
  --glass:rgba(13,26,28,.46);
  /* glossy black glass panels */
  --panel:rgba(10,12,14,.58);
  --panel-edge:rgba(255,255,255,.16);
  --panel-sheen:linear-gradient(165deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 45%,rgba(0,0,0,.18) 100%);
  --gap:7px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --head:calc(48px + var(--safe-t));
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}

/* One phone-shaped column; full screen on a phone, centred on desktop. */
#app{position:relative;margin:0 auto;height:100vh;height:100dvh;width:min(100vw,calc(100dvh * .5));overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage{position:absolute;inset:0;overflow:hidden;background:#233;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.3,.1,.2,1)}
#film,#craft{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#film{object-fit:cover;transition:filter .5s}
#craft{pointer-events:none;transition:opacity .4s}

.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.primary{background:var(--accent);color:var(--accent-ink);font-weight:700;padding:13px 20px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.primary:disabled{opacity:.6;cursor:progress}
.ghost{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 14px;border-radius:999px;font-size:13px;border:1px solid rgba(255,255,255,.18)}

/* Header + nav */
.top{position:absolute;z-index:7;left:0;right:0;top:0;height:var(--head);padding:var(--safe-t) 14px 0;display:flex;align-items:center;gap:14px;background:linear-gradient(rgba(6,9,10,.75),rgba(6,9,10,0))}
.brand{font-weight:800;letter-spacing:.12em;font-size:16px;text-shadow:0 1px 8px rgba(0,0,0,.45);flex:none}
.brand b{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:14px;font-size:13px;font-weight:700}
.nav a{color:var(--ink);text-decoration:none;opacity:.92;white-space:nowrap}
.nav a:active{color:var(--accent)}
#skip{position:absolute;z-index:6;right:14px;top:calc(var(--head) + 6px)}
body:not([data-phase=intro]):not([data-phase=arrival]) #skip{display:none}

/* Intro */
.intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:0 24px calc(48px + var(--safe-b));background:linear-gradient(to top,rgba(8,16,18,.82),rgba(8,16,18,0) 60%)}
.intro h1{font-size:46px;line-height:1;letter-spacing:-.02em}
.intro .primary{align-self:flex-start}

/* Hangar: a control panel of four equal-width glass windows */
#hangar{position:absolute;z-index:3;left:8px;right:8px;top:calc(var(--head) + 2px);bottom:calc(8px + var(--safe-b));display:flex;flex-direction:column;gap:var(--gap)}
.card,#window{position:relative;border-radius:20px;flex:none}
.card{background:var(--panel-sheen),var(--panel);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--panel-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
  padding:7px 7px 6px;display:flex;flex-direction:column;touch-action:none;transition:opacity .45s,transform .55s cubic-bezier(.5,0,.2,1)}
#card-engine{height:24%}
#window{flex:1 1 auto;min-height:0;border:1.5px solid rgba(255,255,255,.34);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 36px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35);overflow:hidden;transition:border-color .5s,box-shadow .5s}
#window::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,0) 28%);pointer-events:none;transition:opacity .5s}
#card-prop{height:16%}
#card-wing{height:21%}
.card .media{position:relative;flex:1 1 auto;min-height:0;border-radius:14px;overflow:hidden;background:#15181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.card .media video,.card .media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.card .label{flex:none;display:flex;align-items:baseline;justify-content:center;gap:8px;padding:4px 4px 0;text-align:center;white-space:nowrap;overflow:hidden}
.card .label strong{font-size:13px}
.card .label span{font-size:10.5px;color:var(--ink-soft)}
.card.chosen{border-color:rgba(231,153,62,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 2px var(--accent),0 10px 28px rgba(0,0,0,.45)}
.card.chosen .label span{display:none}
.card.pressing{transform:scale(.98)}
.card.gone{opacity:0;pointer-events:none;transform:scale(.94)}

/* Bigger arrow navs, sitting on the window edge */
.arrow{position:absolute;top:calc(50% - 30px);width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:32px;line-height:40px;font-weight:800;z-index:2;
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.arrow.prev{left:-4px}
.arrow.next{right:-4px}
.arrow:active{transform:scale(.92)}

/* Props: three tiles */
.tiles{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;border-radius:12px;overflow:hidden;background:#c7c9cc;outline:0 solid var(--accent);transition:outline-width .2s}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.15)}
.tile b{position:absolute;left:6px;bottom:4px;font-size:10px;font-weight:700;color:#1b2426}
.tile[aria-pressed=true]{outline-width:3px;outline-offset:-3px}

.verify{position:absolute;right:10px;top:10px;z-index:3;background:rgba(10,12,14,.82);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;border:1px solid var(--accent);
  box-shadow:0 6px 14px rgba(0,0,0,.35);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}}

#inspect-hit{position:absolute;inset:0;border-radius:inherit}
#ready-cue{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-shadow:0 2px 10px rgba(0,0,0,.5);animation:fade .8s;pointer-events:none}
#ready-cue>*{pointer-events:auto}
#ready-cue .cue{font-size:24px;font-weight:800}
#ready-cue .cue span{display:inline-block;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
/* once built, the frame fades so the trike stands in the open hangar */
body[data-phase=ready] #window{border-color:transparent;box-shadow:none}
body[data-phase=ready] #window::before{opacity:0}

/* Viewer */
#viewer{position:absolute;inset:0;z-index:8;background:#e4e5e2;animation:fade .35s}
#viewer.dark{background:#111}
#viewer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer-top{position:absolute;top:calc(12px + var(--safe-t));left:16px;right:16px;display:flex;justify-content:flex-end}
.viewer-bottom{position:absolute;left:24px;right:24px;bottom:calc(28px + var(--safe-b));color:#1b2426}
#viewer.dark .viewer-bottom{color:var(--ink)}
.viewer-bottom h2{font-size:32px;line-height:1.05}
.viewer-bottom .hint{font-size:13px;opacity:.7;margin:4px 0 10px}
.track{height:3px;border-radius:3px;background:rgba(127,127,127,.3);overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--accent)}

/* Inspect mode: film becomes a soft backdrop, the canvas takes the touches */
body[data-phase=inspect] #film{filter:blur(6px) brightness(.55) saturate(.8)}
body[data-phase=inspect] #craft{pointer-events:auto;touch-action:none}
#inspect-ui{position:absolute;z-index:6;left:0;right:0;bottom:calc(28px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;animation:fade .5s}
#inspect-ui>*{pointer-events:auto}
#inspect-ui .hint{font-size:12px;color:var(--ink-soft)}
#ready-cue #inspect{font-size:13px}

/* End */
#end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:0 24px calc(40px + var(--safe-b));background:linear-gradient(to top,rgba(8,16,18,.9),rgba(8,16,18,.2) 70%);animation:fade .6s}
#end h2{font-size:40px;line-height:1}
#summary{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
#summary dt{color:var(--ink-soft)}
#summary dd{font-weight:700}
#end .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#end{gap:12px;overflow:auto}
.ways{display:grid;gap:8px}
.way{display:block;text-decoration:none;color:var(--ink);padding:12px 14px;border-radius:18px;background:var(--panel-sheen),var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.way .row{margin-top:8px}
.way strong{display:block;margin-top:2px;font-size:16px}
.way a.ghost{color:var(--ink)}
.way a.primary{color:var(--accent-ink)}
.way a.primary,.way a.ghost{text-decoration:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px}
.way.link:active{transform:scale(.98)}
.fine{font-size:11px;color:var(--ink-soft)}

#hud{position:absolute;z-index:4;left:16px;right:16px;bottom:calc(18px + var(--safe-b));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#notice{position:absolute;z-index:9;left:50%;top:calc(var(--head) + 8px);transform:translateX(-50%);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:7px 14px;border-radius:999px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
#notice.on{opacity:1}
body[data-phase=hangar] #notice,body[data-phase=ready] #notice{top:calc(var(--head) + 2px + 24% + var(--gap) + 12px)}

@media (hover:hover){.nav a:hover{color:var(--accent)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}