/* Stormspan — the interface. Colours and type are variables: change them here. (The loading screen's own few rules are in
 * index.html, so it is whole on the first paint.) */
:root {
  --ink: #081428; --deep: #0d2242; --foam: #eafff8; --teal: #2fd6c2; --mist: #8fe0d0; --amber: #ffb347; --coral: #ff5a4d; --gold: #ffd23f; --red: #ff3b3b; --cyan: #3ff0ff;
  --glass: rgba(8, 20, 40, 0.64); --line: rgba(234, 255, 248, 0.16);
  --font: ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px); --left: env(safe-area-inset-left, 0px); --right: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a1a33; font-family: var(--font); color: var(--foam); touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
[hidden] { display: none !important; }
button { font-family: var(--font); border: 0; cursor: pointer; color: inherit; touch-action: manipulation; }
i.coin { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6c0, var(--gold) 55%, #d98a00); box-shadow: inset 0 0 0 2px rgba(150, 90, 0, 0.5); }

/* ── the run ── */
#hud { position: fixed; inset: 0; pointer-events: none; padding: calc(10px + var(--top)) calc(12px + var(--right)) 0 calc(12px + var(--left)); display: flex; justify-content: space-between; align-items: flex-start; }
.hud-l, .hud-r { display: flex; flex-direction: column; gap: 6px; }
.hud-r { align-items: flex-end; gap: 8px; }
.score { font-weight: 900; font-style: italic; font-size: clamp(32px, 8vmin, 48px); line-height: 1; text-shadow: 0 3px 0 rgba(8, 20, 40, 0.7), 0 0 18px rgba(8, 20, 40, 0.5); font-variant-numeric: tabular-nums; }
.sub { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; text-shadow: 0 2px 0 rgba(8, 20, 40, 0.7); font-variant-numeric: tabular-nums; }
.mult { padding: 2px 9px; border-radius: 999px; background: var(--amber); color: var(--ink); text-shadow: none; font-weight: 900; }
.mult.bump { animation: bump 0.45s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); background: #fff; } 100% { transform: scale(1); } }
.coins { display: flex; align-items: center; gap: 7px; font-weight: 900; font-size: clamp(19px, 4.8vmin, 26px); padding: 5px 13px 5px 7px; border-radius: 999px; background: var(--glass); font-variant-numeric: tabular-nums; }
.pills { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; margin-top: 2px; }
.pill { font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--glass); display: flex; align-items: center; gap: 8px; }
.pill b { display: block; width: 46px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.pill b i { display: block; height: 100%; background: currentColor; }
button.round { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; background: var(--glass); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--line); }
button.round:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--line); }
button.round.small { width: 46px; height: 46px; }
i.bars { width: 14px; height: 16px; border-left: 5px solid var(--foam); border-right: 5px solid var(--foam); display: block; }
i.chev { width: 12px; height: 12px; border-left: 4px solid var(--foam); border-bottom: 4px solid var(--foam); transform: translateX(2px) rotate(45deg); display: block; }
i.chev.flip { transform: translateX(-2px) rotate(-135deg); }

/* after a trip the edges of the screen redden until the squallwings fall back: trip again while it shows and they have you */
#danger { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(255, 40, 60, 0) 52%, rgba(255, 40, 60, 0.42) 100%); }

/* a word of advice at the right moment, the first few runs */
#hint { position: fixed; left: 50%; top: 21%; transform: translate(-50%, -50%); padding: 10px 18px 12px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); font-weight: 900; font-size: clamp(16px, 4.6vmin, 22px); text-align: center; pointer-events: none; white-space: nowrap; animation: hint-in 0.22s ease-out; }
#hint b { display: block; font-size: 1.9em; line-height: 1; color: var(--amber); }
#hint.jump b { color: var(--red); } #hint.slide b { color: var(--cyan); }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#toast { position: fixed; left: 50%; bottom: calc(84px + var(--bottom)); transform: translateX(-50%); padding: 9px 16px; border-radius: 14px; background: var(--amber); color: var(--ink); font-weight: 900; font-size: 15px; text-align: center; pointer-events: none; max-width: 86vw; box-shadow: 0 4px 0 rgba(8, 20, 40, 0.5); animation: toast-in 0.3s ease-out; }
#toast small { display: block; font-weight: 800; font-size: 13px; opacity: 0.8; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
#pop { position: fixed; left: 0; right: 0; top: 31%; pointer-events: none; text-align: center; height: 0; }
#pop span { position: absolute; left: 50%; transform: translateX(-50%); display: inline-block; font-weight: 900; font-style: italic; font-size: clamp(19px, 5.4vmin, 28px); color: #fff; text-shadow: 0 3px 0 rgba(8, 20, 40, 0.75); white-space: nowrap; animation: pop 0.95s ease-out forwards; }
#pop span.gold { color: var(--gold); } #pop span.cool { color: var(--cyan); } #pop span.hot { color: #ff9a8a; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 14px) scale(0.7); } 16% { opacity: 1; transform: translate(-50%, 0) scale(1.14); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -36px) scale(1); } }

/* ── the front ── */
section { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
section button, .card, .panel { pointer-events: auto; }
.logo { position: absolute; top: calc(66px + var(--top)); left: 50%; width: max-content; margin: 0; text-align: center; line-height: 0.82; font-weight: 900; font-style: italic; text-transform: uppercase; pointer-events: none; transform: translateX(-50%) rotate(-4deg); }
.logo span { display: block; font-size: clamp(34px, 11vmin, 64px); letter-spacing: 2px; color: var(--foam); text-shadow: 0 4px 0 var(--ink); }
.logo b { display: block; font-size: clamp(60px, 20vmin, 124px); letter-spacing: -1px; background: linear-gradient(180deg, #fff1b0, var(--amber) 52%, var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 var(--ink)); padding: 0 0.12em 0.04em 0; }
.logo em { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--glass); font-style: normal; font-weight: 800; font-size: clamp(12px, 3.2vmin, 15px); letter-spacing: 0.16em; color: var(--mist); }
#menu { justify-content: flex-end; }
.menu-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px calc(20px + var(--bottom)); width: 100%; }
.stats { display: flex; gap: 8px; font-weight: 900; font-size: 15px; flex-wrap: wrap; justify-content: center; }
.stats span { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass); }
.stats em { font-style: normal; font-variant-numeric: tabular-nums; }
button.peek { min-height: 44px; padding: 7px 14px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 380px); text-align: left; }
button.peek b { display: block; width: 62px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; flex: none; }
button.peek b i { display: block; height: 100%; background: var(--teal); }
button.peek u { text-decoration: none; color: var(--amber); font-weight: 900; margin-left: auto; padding-left: 4px; white-space: nowrap; }
button.big { min-width: min(74vw, 300px); min-height: 60px; padding: 14px 26px; border-radius: 22px; font-weight: 900; font-style: italic; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, #ffe08a, var(--amber) 55%, #ff8a3c); box-shadow: 0 7px 0 #b3531b, 0 14px 28px rgba(4, 10, 30, 0.5); }
button.big:active { transform: translateY(5px); box-shadow: 0 2px 0 #b3531b; }
#play { animation: beckon 1.5s ease-in-out infinite; }
#play:active { animation: none; }
@keyframes beckon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
button.big.small { min-width: 190px; min-height: 52px; font-size: 21px; padding: 11px 22px; border-radius: 18px; letter-spacing: 1px; }
button.big.locked { background: linear-gradient(180deg, #8794b8, #5d688f); box-shadow: 0 7px 0 #38405f; color: var(--foam); }
.row { display: flex; gap: 10px; align-items: center; justify-content: center; }
button.pill-btn { min-height: 46px; padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 16px; background: var(--glass); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--line); }
button.pill-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--line); }
button.pill-btn.dark { background: var(--deep); }

#shop { justify-content: flex-end; padding: 0 16px calc(20px + var(--bottom)); }
#shop .corner { position: absolute; top: calc(12px + var(--top)); right: calc(12px + var(--right)); }
.card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 18px 16px; border-radius: 24px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); min-width: min(90vw, 360px); }
.card h2 { margin: 0; font-size: 30px; font-weight: 900; font-style: italic; }
.card p { margin: 0; font-weight: 700; opacity: 0.9; text-align: center; min-height: 1.3em; }

.veil { justify-content: center; background: rgba(6, 12, 34, 0.55); pointer-events: auto; padding: 12px; }
.panel { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 20px 22px 22px; border-radius: 26px; background: linear-gradient(180deg, #17335c, #0d2242); box-shadow: 0 10px 0 rgba(4, 10, 30, 0.5), inset 0 0 0 1px var(--line); min-width: min(88vw, 330px); max-width: min(94vw, 440px); max-height: calc(100% - 8px); overflow: hidden; }
.panel h2 { margin: 0; font-size: 26px; font-weight: 900; font-style: italic; }
.panel .note { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.4; text-align: center; opacity: 0.92; }
.panel .note.small { font-size: 12px; opacity: 0.7; }
.panel code { font: 800 13px ui-monospace, Menlo, monospace; color: var(--amber); }
.missions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(4, 12, 34, 0.5); font-weight: 800; font-size: 14px; }
.mission .bar { grid-column: 1 / 3; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.mission .bar i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.mission .pay { display: flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 900; }
.mission small { font-weight: 700; font-size: 12px; opacity: 0.75; margin-left: 6px; font-variant-numeric: tabular-nums; }
.missions.compact .mission { padding: 6px 10px; font-size: 13px; }
.panel.over { gap: 10px; }
.over-a, .over-b { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
.over-dist { font-weight: 900; font-style: italic; font-size: 62px; line-height: 0.95; color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(4, 10, 30, 0.6); }
.over-dist small { font-size: 0.42em; margin-left: 4px; color: var(--foam); }
.over-rows { display: flex; gap: 14px; font-weight: 800; font-size: 15px; align-items: center; flex-wrap: wrap; justify-content: center; }
.over-rows span { display: flex; align-items: center; gap: 6px; }

/* ── a wide screen (a phone on its side, a desktop): the name goes left, the buttons right, the runner keeps the middle ── */
@media (min-aspect-ratio: 5/4) {
  .logo { top: calc(54px + var(--top)); left: calc(22px + var(--left)); transform: rotate(-4deg); text-align: left; }
  #menu { align-items: flex-end; justify-content: flex-end; }
  .menu-foot { width: auto; align-items: flex-end; gap: 8px; padding: 0 calc(18px + var(--right)) calc(14px + var(--bottom)) 0; }
  .menu-foot .stats { justify-content: flex-end; }
  #shop { align-items: flex-end; padding: 0 calc(18px + var(--right)) calc(14px + var(--bottom)) 0; }
  #hint { top: 26%; } #pop { top: 40%; }
}
/* ── …and a short one (the phone on its side): a size smaller, and the panels lie down ── */
@media (min-aspect-ratio: 5/4) and (max-height: 540px) {
  .logo span { font-size: clamp(26px, 10vh, 44px); } .logo b { font-size: clamp(48px, 21vh, 92px); }
  .logo em { margin-top: 8px; }
  button.big { min-width: 230px; min-height: 54px; font-size: 26px; padding: 10px 22px; }
  .card { min-width: 300px; padding: 10px 16px 12px; gap: 7px; }
  .panel { padding: 14px 18px 16px; gap: 8px; max-width: min(96vw, 640px); }
  .panel h2 { font-size: 22px; }
  .panel.over { flex-direction: row; align-items: center; gap: 18px; }
  .over-a { width: auto; min-width: 190px; } .over-b { width: auto; min-width: 270px; }
  .over-dist { font-size: 52px; }
  .missions { gap: 5px; } .mission { padding: 6px 10px; font-size: 13px; }
  #missions .panel { max-width: min(96vw, 560px); }
  #toast { bottom: calc(74px + var(--bottom)); }
}

/* ── what the port kit paints, made to sit with the rest: its (i) is a full finger wide, its words are never under 12 px, and its
      invitation to share is for the front of the game, not for a run ── */
#mosa-port-credits-open { width: 44px !important; height: 44px !important; border-radius: 22px !important; font-size: 19px !important; background: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--line); }
#mosa-port-room { font-size: 12px !important; font-family: var(--font) !important; font-weight: 700; pointer-events: none; }   /* the whole screen is the control: a swipe that starts on friends' distances is still a swipe */
#mosa-port-room small { font-size: 12px !important; }                                 /* (the kit's "room best" line is a <small>: smaller than its 11 px) */
#mosa-port-room.ss-away { display: none !important; }
.mp-credits { font-family: var(--font) !important; }
.mp-credits button { min-height: 46px; font-family: var(--font); }