/* The shell is taken over from the first game, Tre dage til Kyiv (renekarberg/youll-never-win, css/style.css):
   the stage, the margins for the camera, the colours, the fonts, the start screen, the buttons and the overlays.
   What is Cargo 200's own stands at the bottom of the file. */
/* Layout: one landscape stage, 360 units high, scaled to fit and turned on its side on upright phones.
   The level is a canvas; every menu, the HUD and the fact sheet are ordinary HTML on top of it. */
/* The fonts travel with the game (fonts/, SIL Open Font License), so no font service sees the players. The game is
   only shown once they are ready (view.js), so the stand-in font is never seen. */
@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --bg: #0b0e14;
  --panel: rgba(12, 15, 22, .84);
  --card: rgba(239, 230, 210, .07);
  --ink: #efe6d2;
  --mute: #b3ad9b;
  --line: rgba(239, 230, 210, .28);
  --orange: #f08a3c;
  --red: #ff5a36;
  --green: #86d680;
  --cyan: #7fe0ff;
  --ua-blue: #1f5fbf;
  --ua-yellow: #ffd21f;
  --ua-ink: #0c2a5c;
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow: hidden;
  box-sizing: border-box; overscroll-behavior: none;
  /* the same margin on both sides: a phone may report the camera edge on one side only for a moment.
     --cut-l/--cut-r (view.js): the installed app may instead be kept clear of the camera with a black bar the page
     never hears about; the other side then gets as wide a margin. */
  padding-left: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), var(--cut-l, 0px));
  padding-right: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), var(--cut-r, 0px));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* held upright, the game turns itself sideways, so its left and right edges lie under the camera and the home bar */
@media (orientation: portrait) {
  body { padding-block: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)); }
}
/* in browser fullscreen the game box itself covers the screen, so it keeps the same margins as the page */
#app:fullscreen { padding-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
#app:-webkit-full-screen { padding-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
@media (orientation: portrait) {
  #app:fullscreen { padding-block: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)); }
  #app:-webkit-full-screen { padding-block: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)); }
}
#app { position: relative; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; background: var(--bg); touch-action: none; }
/* --fs-r: the margin of the fullscreen and close buttons from the right edge; buttons in the bottom corners keep it too */
#stage { --fs-r: 16px; --fs-gap: calc(var(--fs-r) + 30px); visibility: hidden; position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; overflow: hidden; background: var(--bg); font-size: 13px; line-height: 1.3; }
#stage *, #stage *::before, #stage *::after { box-sizing: border-box; }
#world { position: absolute; inset: 0; touch-action: none; }
#world canvas { display: block; width: 100%; height: 100%; }
#stage h2, #stage p { margin: 0; }
#stage button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
#stage button:focus-visible, #stage a:focus-visible { outline: 2px solid var(--ua-yellow); outline-offset: 2px; }

.screen { position: absolute; inset: 0; }
.cta, .ghost {
  height: 32px; padding: 0 18px; border-radius: 5px; font: 700 15px/1 var(--font-display) !important; letter-spacing: .04em; text-transform: uppercase;
}
.cta { background: var(--orange); border: 1px solid #ffc08a; color: #1a0f05 !important; }
.ghost { background: rgba(10, 12, 20, .6); border: 1px solid var(--line); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.panel .row { justify-content: center; }

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-display); }
#hud button { pointer-events: auto; }
/* a faint shade behind the top row keeps the read-outs legible over a bright sky */
#hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; background: linear-gradient(rgba(8, 10, 16, .5), rgba(8, 10, 16, 0)); }
.pips { display: flex; gap: 3px; }
.pips i { width: 12px; height: 13px; background: rgba(255, 255, 255, .16); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pips i.on { background: var(--orange); }
.pips.shield i.on { background: var(--cyan); }
.hbtn { background: rgba(10, 12, 20, .62); border: 1px solid var(--line); border-radius: 5px; }
.hbtn.icon { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.hbtn.icon svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------------------------------------------------------------- title */
.title-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.start { position: absolute; inset: 0; background: none; border: 0; padding: 0 0 16px; display: flex; align-items: flex-end; justify-content: center; }
.start span { padding: 7px 20px; border-radius: 5px; background: rgba(10, 12, 20, .68); border: 1px solid var(--line); font: 700 16px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.title-sub { position: absolute; left: var(--fs-r); bottom: 16px; font: 600 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.title-give { position: absolute; right: var(--fs-r); bottom: 14px; height: 30px; padding: 0 12px; border-radius: 5px; background: var(--ua-yellow); border: 0; color: var(--ua-ink) !important; font: 700 13px/1 var(--font-display) !important; letter-spacing: .04em; text-transform: uppercase; }
/* on phones and tablets in the browser: install the game as an app */
.title-install { position: absolute; left: var(--fs-r); bottom: 16px; height: 26px; padding: 0 10px; border-radius: 5px; background: rgba(10, 12, 20, .68); border: 1px solid var(--ua-yellow); color: var(--ua-yellow) !important; font: 700 12px/1 var(--font-display) !important; letter-spacing: .06em; text-transform: uppercase; }
/* updates: a line of plain text just above "tap to start" on the start screen, with a thin bar while a new version downloads */
.title-upd { position: absolute; left: 50%; bottom: 56px; pointer-events: none; transform: translateX(-50%); padding: 0 0 7px; font: 600 11px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .7); white-space: nowrap; transition: opacity .4s; }
.title-upd.gone { opacity: 0; }
.title-upd i { position: absolute; left: 0; right: 0; bottom: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .8); height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .15); display: none; }
.title-upd.dl i { display: block; }
.title-upd i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); border-radius: 1px; background: var(--ua-yellow); transition: width .2s; }
.install-tip { position: absolute; left: var(--fs-r); bottom: 50px; max-width: 44%; margin: 0; padding: 6px 9px; border-radius: 5px; background: rgba(10, 12, 20, .85); border: 1px solid var(--line); font: 500 11px/1.35 var(--font-display); color: var(--ink); }
.install-tip b { color: var(--ua-yellow); font-weight: 600; }
.install-tip .share { display: inline-block; width: 13px; height: 16px; margin: 0 1px -3px; color: #4ea1ff; }
.install-tip ol { margin: 0; padding-left: 16px; }
.install-tip li + li { margin-top: 3px; }
.install-tip a { display: inline-block; margin-top: 5px; color: var(--mute); text-decoration: underline; }
/* The fullscreen button: one button, in the top right corner of every screen between levels and in the pause menu. */
#btn-full { position: absolute; right: var(--fs-r); top: 10px; z-index: 7; }
#stage:not(.can-full) #btn-full, #stage.playing:not(.paused) #btn-full { display: none; }
#btn-full .fs-out, .full #btn-full .fs-in { display: none; }
.full #btn-full .fs-out { display: inline; }
.give-cta { font: 700 17px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ua-yellow); }
.give-text { font-size: 12.5px; line-height: 1.3; color: var(--ink); margin-bottom: 3px; }
.give-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 8px; border-radius: 5px; background: var(--ua-yellow); color: var(--ua-ink); text-align: center; text-decoration: none; font: 700 13px/1 var(--font-display); letter-spacing: .02em; }
.give-note { font-size: 9.5px; line-height: 1.25; color: var(--mute); }

/* ---------------------------------------------------------------- overlays */
.overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(6, 7, 12, .66); }
.panel { min-width: 240px; padding: 16px 20px; background: #10141c; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.panel h2 { font: 700 22px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.panel .give { border: 0; background: none; padding: 0; width: 230px; }
.no-webgl { position: fixed; inset: 0; z-index: 1000; background: #0b0e14; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 500 16px/1.4 var(--font-display); color: var(--mute); }
.ghost.small { height: 24px; padding: 0 12px; font-size: 11px !important; }
[hidden] { display: none !important; }

/* ================================================================ Cargo 200 */
/* The painted title lies in the sky of the start picture: from the top of the stage down to just above the helmets,
   wherever the picture lands (--pic-t and --pic-h, view.js). */
.title-logo { position: absolute; left: 0; right: 0; top: 10px; height: calc(var(--pic-t) + var(--pic-h) * .315 - 10px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.title-logo img { max-width: 62%; max-height: 100%; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }

/* the level behind everything: a vignette, and a red edge outside the zone */
#vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 42%, rgba(0,0,0,.62) 100%); }
#warn { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 20px rgba(200, 45, 25, .65); opacity: 0; transition: opacity .25s; }
.hud-box { position: absolute; font-size: 13px; font-weight: 500; line-height: 1.35; text-shadow: 0 1px 2px #000; }
#squad { top: 8px; left: 10px; }
#squad .sq-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
#squad .role { color: var(--mute); font-size: 11px; }
#squad .dead { opacity: .45; text-decoration: line-through; }
#squad .pips i { width: 9px; height: 10px; }
#info { top: 8px; right: 10px; text-align: right; }
#mini { display: block; margin: 6px 0 0 auto; width: 92px; height: 92px; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 4px; }
#feed { top: 10px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 14px; font-weight: 600; }
#feed div { transition: opacity .6s; }
#hint { bottom: 14px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; color: #ffd66b; font-size: 14px; font-weight: 600; }
#btn-gren { position: absolute; right: 22px; bottom: 20px; width: 66px; height: 66px; border-radius: 50%; background: rgba(10, 12, 20, .5); border: 1.5px solid rgba(255, 222, 170, .7); font: 700 12px/1.1 var(--font-display) !important; letter-spacing: .06em; text-transform: uppercase; }
#btn-gren b { display: block; font-size: 22px; }
#btn-gren.armed { background: rgba(240, 138, 60, .45); }
#btn-gren:disabled { opacity: .4; }
#btn-pause { position: absolute; left: 10px; bottom: 20px; }

/* panels with more than a heading and two buttons: the briefing card, the pause menu and the result */
.panel.wide { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 16px); overflow-y: auto; gap: 8px; padding: 12px 16px; align-items: stretch; }
.panel.wide h2 { text-align: center; }
.panel p, .panel li { font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.panel ul { margin: 0; padding-left: 16px; }
.panel .sub { text-align: center; font: 500 12px/1.2 var(--font-display); letter-spacing: .04em; color: var(--mute); }
.panel .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.panel label { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.panel input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--orange); }
#pause .panel, #end .panel { align-items: stretch; max-width: min(360px, calc(100% - 24px)); }
#pause .panel h2, #end .panel h2 { text-align: center; }
#end .give { width: auto; display: flex; flex-direction: column; gap: 4px; }