/* GROCERY STORE SIMULATOR — the page around the game.
   Everything in the frame is drawn by the renderer; this is only the
   furniture that surrounds it, and the rule for all of it is the same:
   small, dim, out of the picture's way, and gone the moment the game is
   running. */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

/* The title face: Michroma (SIL OFL, bundled), the open cousin of the
   extended square sans the Flight Simulator wordmark is set in. Local,
   so the page still fetches nothing from anywhere else. */
@font-face {
  font-family: 'Michroma';
  src: url('../assets/fonts/Michroma-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05060a;
  color: #cfcfd6;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* THE FRAME KEEPS OUT OF THE NOTCH. */
#game, #touch {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
}

/* Nearest-neighbour all the way to the glass. */
#view {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- the screens: loading, title, pause -------------------------- */
#loading, #title, #pause {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  z-index: 10;
  transition: opacity .5s ease;
}
#loading { background: #05060a; }
/* The title sits ON the picture: the car park at night, standing still
   while the eye wanders. Only enough shade to read the words by. */
#title {
  background: linear-gradient(to bottom, rgba(5, 6, 10, .18), rgba(5, 6, 10, .34) 55%, rgba(5, 6, 10, .62));
}
#pause { background: rgba(5, 6, 10, .58); z-index: 20; }
#loading.gone, #title.gone, #pause.gone { opacity: 0; pointer-events: none; }

.panel { text-align: center; max-width: 42rem; padding: 2rem; }

/* The name: two lines set to one width — GROCERY STORE small over
   SIMULATOR large, the way the Flight Simulator mark stacks its maker
   over its name — with the letter-spacing of each line taking up the
   slack (textLength, in the markup), and the pair leaning together as
   one group. */
.logo-slot { display: flex; justify-content: center; margin-bottom: 2rem; }
.logo {
  display: block;
  width: min(78vw, 40rem); height: auto;
  overflow: visible;
  font-family: 'Michroma', 'Eurostile', 'Bank Gothic', 'Arial Black', sans-serif;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
}
/* Sizes chosen so each line's natural width sits just under the 600
   the markup holds it to: the justification then ADDS a little space
   rather than squeezing glyphs together. Michroma is wide. */
.logo .l1 { font-size: 47px; fill: #ece6d2; }
.logo .l2 { font-size: 67px; fill: #e8c34a; }
.logo-slot.small { margin-bottom: 1.1rem; }
.logo-slot.small .logo { width: min(48vw, 20rem); opacity: .85; }

#load-status { letter-spacing: .24em; font-size: .68rem; color: rgba(207, 207, 214, .5); margin-bottom: .8rem; }
.bar { width: 12rem; max-width: 60vw; height: 2px; margin: 0 auto; background: rgba(207, 207, 214, .12); }
#load-bar { height: 100%; width: 0; background: #e8c34a; transition: width .2s ease; }

.prompt {
  color: #e8c34a; letter-spacing: .26em; font-size: .78rem; margin-bottom: 1.1rem;
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .38; } }
/* The version, small and dim in the bottom right corner, clear of the
   phone's rounded edge; set in the same face and grey as the loading
   line so it reads as part of the furniture and not of the picture. */
#version {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 1rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + .8rem);
  letter-spacing: .2em; font-size: .62rem; color: rgba(207, 207, 214, .45);
  user-select: none;
}
@media (prefers-reduced-motion: reduce) { .prompt { animation: none; } }

h2 { font-size: .78rem; letter-spacing: .42em; color: rgba(207, 207, 214, .55); margin-bottom: 1rem; font-weight: normal; }

/* what shows depends on what the game is being played with — decided
   by input.js, stamped on <html> */
html.touch .desk-only, html:not(.touch) .touch-only { display: none !important; }

/* a phone in landscape is short: pull it all in so it fits */
@media (max-height: 480px) {
  .panel { padding: .8rem 1.2rem; }
  .logo { width: min(52vw, 24rem); }
  .logo-slot { margin-bottom: .8rem; }
  .prompt { margin-bottom: .5rem; }
  h2 { margin-bottom: .5rem; }
  .menu .row { margin: .2rem 0; gap: .3rem; }
  .btn { min-height: 40px; padding: .3rem .7rem; font-size: .64rem; }
  .slider input { height: 40px; }
}

/* ---- the pause menu: words, not boxes ----------------------------- */
.menu { max-width: 34rem; width: 100%; max-height: 100%; overflow-y: auto; }
.menu .row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem; margin: .35rem 0;
}
.btn {
  min-height: 44px; min-width: 44px;                 /* a thumb's worth, still */
  padding: .5rem 1rem;
  font: inherit; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(207, 207, 214, .72); background: transparent;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  cursor: pointer; touch-action: manipulation;
  transition: color .08s, border-color .08s;
}
.btn:hover, .btn:focus-visible { color: #fff; border-bottom-color: rgba(207, 207, 214, .4); outline: none; }
.btn:active { color: #e8c34a; }
.btn.primary { color: #e8c34a; }
.btn.primary:hover { color: #ffe07a; border-bottom-color: #e8c34a; }
.btn.quiet { color: rgba(207, 207, 214, .45); }
.btn.quiet.armed { color: #e8c34a; }
.btn.tog::before { content: '○ '; color: rgba(207, 207, 214, .35); }
.btn.tog[aria-pressed="true"] { color: #e8c34a; }
.btn.tog[aria-pressed="true"]::before { content: '● '; color: #e8c34a; }
/* THE STEPPER, for a setting with an order to it: a name, minus, the
   value, plus. A cycling button is fine for three states and wrong for
   eight — you should not have to go all the way round to go back one. */
.step { font-size: .7rem; letter-spacing: .2em; color: rgba(207, 207, 214, .55); }
.step > span { min-width: 6.5rem; text-align: right; }
.step b { min-width: 7.5rem; text-align: center; color: #e8c34a; font-weight: normal; }
.btn.narrow { min-width: 44px; padding: .5rem .6rem; font-size: .9rem; letter-spacing: 0; }

.slider { font-size: .7rem; letter-spacing: .2em; color: rgba(207, 207, 214, .55); }
.slider span { min-width: 6.5rem; text-align: right; }
.slider b { min-width: 3rem; text-align: left; color: #e8c34a; font-weight: normal; }
.slider input {
  flex: 1 1 8rem; min-width: 7rem; height: 44px;
  accent-color: #e8c34a; touch-action: pan-x; cursor: pointer;
}

/* ---- the touch controls ------------------------------------------ */
#touch {
  z-index: 6;
  touch-action: none;
  --stick-r: 56px;                       /* set by touch.js from the screen */
  --btn: clamp(64px, 18vmin, 84px);      /* the flame button */
  --edge-x: calc(4vw + 12px);            /* how far in from the thumb's side */
  --bar: 0px;                            /* nothing along the bottom any more */
  --edge-y: calc(var(--bar) + 14px);
  /* the bevel: a light edge at the top, a shadow at the bottom, and a
     gradient between that makes a flat ring read as a slightly domed one */
  --bevel: linear-gradient(160deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .04) 48%, rgba(0, 0, 0, .30) 100%);
  --bevel-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 4px rgba(0, 0, 0, .38), 0 3px 8px rgba(0, 0, 0, .4);
}
#touch.paused { visibility: hidden; }

/* the buttons: dark glass with a rim, gently bevelled, brighter under the thumb */
#touch .tb {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(207, 207, 214, .34);
  background: var(--bevel), rgba(5, 6, 10, .34);
  box-shadow: var(--bevel-shadow);
  color: rgba(207, 207, 214, .85);
  font-size: 11px; letter-spacing: .18em;
  text-shadow: 0 1px 0 #000;
  will-change: transform, opacity;
  transition: opacity .6s ease, background .08s, border-color .08s, transform .08s, box-shadow .08s;
}
#touch .tb.held {
  transform: scale(.94);
  background: var(--bevel), rgba(207, 207, 214, .30);
  border-color: #cfcfd6;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .12);
}

/* THE FIRE BUTTON SAYS FIRE, at the user's request — it used to wear a
   flame, and with a minigun in the game a flame is a lie a quarter of
   the time. */
.tb-fire {
  width: var(--btn); height: var(--btn);
  right: var(--edge-x); bottom: var(--edge-y);
  border-color: rgba(232, 98, 26, .62);
  background: var(--bevel), rgba(232, 98, 26, .16);
  font-size: 13px; letter-spacing: .22em; color: #ffd9a8;
}
#touch .tb-fire.held {
  background: var(--bevel), rgba(232, 98, 26, .52);
  border-color: #ffe07a;
  box-shadow: 0 0 28px rgba(232, 98, 26, .6), inset 0 2px 6px rgba(120, 40, 0, .5), inset 0 0 12px rgba(255, 224, 122, .35);
}

/* THE THREE SMALL ONES STAND IN AN ARC ROUND THE BIG ONE. Jump at nine
   o'clock, use at half past ten, swap at twelve, all the same size and
   all the same distance from the fire button's centre (--arc), so the
   right thumb rolls from one to the next without leaving its corner
   and the big one is always the nearest thing to it. JUMP is the
   newest, at the user's request, and took the spot beside the fire
   button because jumping and firing are the two things you do without
   looking. */
#touch {
  --small: calc(var(--btn) * .72);
  --arc: calc(var(--btn) * .5 + var(--small) * .5 + 12px);
  --fire-cx: calc(var(--edge-x) + var(--btn) * .5);
  --fire-cy: calc(var(--edge-y) + var(--btn) * .5);
}
.tb-use, .tb-swap, .tb-jump {
  width: var(--small); height: var(--small);
  font-size: 11px;
}
.tb-jump {
  right: calc(var(--fire-cx) + var(--arc) - var(--small) * .5);
  bottom: calc(var(--fire-cy) - var(--small) * .5);
  border-color: rgba(232, 195, 74, .42);
}
.tb-use {
  right: calc(var(--fire-cx) + var(--arc) * .7071 - var(--small) * .5);
  bottom: calc(var(--fire-cy) + var(--arc) * .7071 - var(--small) * .5);
}
/* THE WEAPON SWAP, which a phone needed the moment there were two of
   them, and cool rather than orange because what it mostly swaps to is
   the thing that puts fires out. */
.tb-swap {
  right: calc(var(--fire-cx) - var(--small) * .5);
  bottom: calc(var(--fire-cy) + var(--arc) - var(--small) * .5);
  border-color: rgba(122, 196, 224, .40);
}

.tb-pause { width: 44px; height: 44px; top: 8px; right: 8px; border-color: rgba(207, 207, 214, .22); }
.tb-pause i { display: block; width: 4px; height: 14px; margin: 0 2px; background: currentColor; }

/* the left-handed layout is the same layout in a mirror */
#touch.lefty .tb-fire { right: auto; left: var(--edge-x); }
#touch.lefty .tb-jump { right: auto; left: calc(var(--fire-cx) + var(--arc) - var(--small) * .5); }
#touch.lefty .tb-use  { right: auto; left: calc(var(--fire-cx) + var(--arc) * .7071 - var(--small) * .5); }
#touch.lefty .tb-swap { right: auto; left: calc(var(--fire-cx) - var(--small) * .5); }
#touch.lefty .tb-pause { right: auto; left: 8px; }

/* A PAD IN CHARGE FADES THEM, quickly, and a finger brings them back
   as quickly — see Input.padHeld. The elements stay where they are and
   keep their hit areas, because the touch that brings them back lands
   on them. */
#touch.pad .tb, #touch.pad .stick, #touch.pad .hint { opacity: 0 !important; transition: opacity .25s ease; }

/* the stick: drawn where the thumb landed, towed along behind it */
.stick {
  position: absolute; left: 0; top: 0;
  width: calc(var(--stick-r) * 2); height: calc(var(--stick-r) * 2);
  margin: calc(var(--stick-r) * -1) 0 0 calc(var(--stick-r) * -1);
  border-radius: 50%;
  border: 1px solid rgba(207, 207, 214, .30);
  background: linear-gradient(160deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .10)), rgba(5, 6, 10, .26);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .14);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
  transition: opacity .18s ease;
}
.stick.on { opacity: 1; }
.stick::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  background: rgba(207, 207, 214, .5);
}
.stick .knob {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--stick-r) * .8); height: calc(var(--stick-r) * .8);
  margin: calc(var(--stick-r) * -.4) 0 0 calc(var(--stick-r) * -.4);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(207, 207, 214, .78) 55%, rgba(150, 150, 160, .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 5px rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .4);
  will-change: transform;
  transition: background .12s;
}
.stick.run .knob {
  background: linear-gradient(160deg, #fff0b0, #e8c34a 55%, #b8922a);
}

/* untouched for a moment, the controls get out of the picture */
#touch.idle .tb, #touch.idle .stick.on { opacity: .38; }

/* the once-only hints */
.hint {
  position: absolute; pointer-events: none;
  font-size: 10px; letter-spacing: .24em; color: rgba(207, 207, 214, .55);
  text-shadow: 0 1px 0 #000;
  transition: opacity .8s ease;
}
.hint-move {
  left: calc(20% - var(--stick-r)); bottom: calc(var(--bar) + 30px);
  width: calc(var(--stick-r) * 2); height: calc(var(--stick-r) * 2);
  border: 2px dashed rgba(207, 207, 214, .32); border-radius: 50%;
}
.hint-move span { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; text-align: center; }
.hint-look { right: 24%; bottom: calc(var(--bar) + 44%); }
#touch.lefty .hint-move { left: auto; right: calc(20% - var(--stick-r)); }
#touch.lefty .hint-look { right: auto; left: 30%; }
#touch.used-move .hint-move, #touch.used-look .hint-look { opacity: 0; }

/* a first-person game held upright is a keyhole; say so, once, quietly */
#rotate {
  display: none;
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px);
  padding: .5rem 1rem; z-index: 7;
  font-size: .68rem; letter-spacing: .18em; text-align: center;
  color: #e8c34a; background: rgba(5, 6, 10, .78);
  pointer-events: none;
}
@media (orientation: portrait) { html.touch #rotate { display: block; } }

/* the debug readout: off unless asked for with the ` key */
#fps {
  position: fixed; z-index: 5;
  right: calc(env(safe-area-inset-right, 0px) + 6px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  font-size: 10px; color: rgba(200,200,210,.45);
  pointer-events: none; text-shadow: 0 1px 0 #000;
}