/*
 * Stagger Home — the night-street arcade game.
 *
 * Same rules as the rest of public/play: plain CSS, no build step, palette
 * hand-copied from the site tokens (see docs/games.md). The look is the
 * arcade one Mug Climb settled on — flat saturated colour, hard edges, chunky
 * bevels, pixel type — dressed for a street at 2am instead of a beer mug.
 */

/* [hidden] loses to the display rules below without this. */
.sh-hud[hidden], .sh-touch[hidden], .sh-screen[hidden], .sh-initials[hidden],
.sh-keys[hidden], .sh-ctrl-row[hidden], .sh-slidehint[hidden],
.sh-btns[hidden], .sh-record[hidden], #hud-mult[hidden] {
  display: none !important;
}

.sh-stage canvas { display: block; width: 100%; height: 100%; background: #07070d; }

:root {
  --sh-amber: #ffb02e;      /* sodium streetlight, the dominant light source */
  --sh-white: #fff4d6;      /* headlight */
  --sh-red: #ff3b30;        /* tail lights, danger, the tipsy meter */
  --sh-cyan: #45d7ff;       /* the neon on the shopfronts */
  --sh-sign: #1f8a3d;       /* NYC street sign green */
  --sh-ink: #fff6e0;
  --sh-panel: rgba(8, 6, 16, 0.84);
  --sh-line: #2f2a4a;
  --sh-num: "Press Start 2P", "Courier New", monospace;
  --sh-px: "DotGothic16", "Courier New", monospace;
}

/* ---- HUD ---------------------------------------------------------------- */

.sh-hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 10px 0;
  font-family: var(--sh-px);
}
.sh-hud-top, .sh-hud-bars { display: flex; justify-content: space-between; gap: 8px; }

.sh-panel {
  background: var(--sh-panel); border: 2px solid var(--sh-line);
  border-bottom-width: 4px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px; line-height: 1;
}
.sh-panel.sh-right { align-items: flex-end; text-align: right; }

.sh-lbl { font-family: var(--sh-num); font-size: 7px; letter-spacing: .12em;
  color: rgba(255, 246, 224, 0.55); }
.sh-gold { color: var(--sh-amber); }

.sh-blocks { display: flex; align-items: baseline; gap: 6px; }
.sh-blocks b { font-family: var(--sh-num); font-size: 15px; color: var(--sh-amber);
  font-variant-numeric: tabular-nums; }
.sh-blocks i { font-style: normal; font-size: 11px; color: rgba(255, 246, 224, 0.6); }
.sh-street { font-family: var(--sh-num); font-size: 7px; letter-spacing: .1em;
  color: var(--sh-sign); }
.sh-score { font-family: var(--sh-num); font-size: 12px; color: var(--sh-ink);
  font-variant-numeric: tabular-nums; }

/* Two meters, deliberately different colours: the one you spend is warm, the
   one that is working against you is red. */
.sh-meter { display: flex; flex-direction: column; gap: 3px; width: 106px; }
.sh-meter.sh-right { align-items: flex-end; }
.sh-bar { width: 100%; height: 9px; background: rgba(8, 6, 16, 0.8);
  border: 2px solid var(--sh-line); overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: var(--sh-amber);
  transform-origin: left center; transform: scaleX(1); }
.sh-bar-red i { background: var(--sh-red); }
/* Spent down to nothing, it flashes so you look for a bottle of water. */
.sh-bar.sh-empty { border-color: var(--sh-red); }

.sh-lives { display: flex; gap: 5px; }
.sh-lives i { display: block; width: 9px; height: 16px; background: var(--sh-ink);
  clip-path: polygon(30% 0, 70% 0, 70% 34%, 100% 100%, 62% 100%, 50% 62%,
                     38% 100%, 0 100%, 30% 34%); }
.sh-lives i.spent { background: rgba(255, 246, 224, 0.18); }

/* Centre toast: "NICE", "WATCH IT", street names. */
.sh-toast {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  font-family: var(--sh-num); font-size: 13px; letter-spacing: .06em;
  color: var(--sh-amber); text-shadow: 0 3px 0 #7a3b00;
  opacity: 0; transition: opacity 140ms linear; z-index: 3; pointer-events: none;
  text-align: center; white-space: nowrap;
}
.sh-toast[data-show="true"] { opacity: 1; }

/* ---- panels ------------------------------------------------------------- */

.sh-screen {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 4, 12, 0.9); overflow-y: auto;
}
.sh-screen p { max-width: 30rem; }

.sh-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.sh-logo span { font-family: var(--sh-px); font-size: 42px; color: var(--sh-amber);
  letter-spacing: .08em; line-height: 1; text-shadow: 0 4px 0 #7a3b00; }
.sh-logo em { font-family: var(--sh-num); font-style: normal; font-size: 13px;
  letter-spacing: .1em; color: var(--sh-ink); }
.sh-logo.sh-small span { font-size: 28px; }
.sh-logo.sh-small em { font-size: 10px; }

/* The street sign is the memento of the run: where you gave up. */
.sh-sign {
  font-family: var(--sh-num); font-size: 11px; letter-spacing: .1em;
  color: #eafff0; background: var(--sh-sign);
  border: 2px solid #eafff0; border-radius: 3px; padding: 8px 14px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

.sh-stats { display: flex; gap: 10px; }
.sh-stat { background: var(--sh-panel); border: 2px solid var(--sh-line);
  border-bottom-width: 4px; padding: 8px 10px; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sh-stat b { font-family: var(--sh-num); font-size: 14px; color: var(--sh-amber);
  font-variant-numeric: tabular-nums; }
.sh-stat span { font-family: var(--sh-px); font-size: 11px;
  color: rgba(255, 246, 224, 0.6); }

.sh-signoff { font-family: var(--sh-px); font-size: 13px; text-align: center;
  color: rgba(255, 246, 224, 0.78); max-width: 26rem; }
.sh-record { font-family: var(--sh-num); font-size: 9px; letter-spacing: .1em;
  color: var(--sh-amber); }

.sh-keys { display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--sh-px); font-size: 12px; color: rgba(255, 246, 224, 0.62); }
.sh-keys kbd { font-family: var(--sh-num); font-size: 8px; padding: 4px 6px;
  background: #241d3d; border: 2px solid var(--sh-line); color: var(--sh-ink); }
.sh-keys i { font-style: normal; }

.sh-initials { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; font-family: var(--sh-px); font-size: 12px;
  color: rgba(255, 246, 224, 0.75); }
.sh-initials input {
  width: 5.2rem; font-family: var(--sh-num); font-size: 14px; text-align: center;
  text-transform: uppercase; letter-spacing: .18em; padding: 8px 6px;
  background: #120e22; border: 2px solid var(--sh-line); color: var(--sh-amber);
}
.sh-initials input:focus-visible { outline: 2px solid var(--sh-amber); outline-offset: 2px; }

.sh-btn-gold { border-color: rgba(255, 176, 46, 0.6) !important; color: var(--sh-amber) !important; }

/* ---- board -------------------------------------------------------------- */

.sh-board { width: min(100%, 22rem); display: flex; flex-direction: column; gap: 3px; }
.sh-board h3 { margin: 6px 0 2px; font-family: var(--sh-num); font-size: 7px;
  letter-spacing: .12em; color: rgba(255, 246, 224, 0.45); text-align: center; }
.sh-row { display: flex; gap: 8px; align-items: baseline; font-family: var(--sh-num);
  font-size: 9px; padding: 4px 8px; background: rgba(8, 6, 16, 0.6);
  border-left: 3px solid transparent; }
.sh-row .r { width: 1.6em; color: rgba(255, 246, 224, 0.4); }
.sh-row .n { flex: 1; color: var(--sh-ink); letter-spacing: .1em; }
.sh-row .b { color: rgba(255, 246, 224, 0.45); font-size: 8px; }
.sh-row .s { color: var(--sh-amber); font-variant-numeric: tabular-nums; }
.sh-row.me { border-left-color: var(--sh-amber); background: rgba(255, 176, 46, 0.1); }
.sh-empty-row { font-family: var(--sh-px); font-size: 12px; text-align: center;
  color: rgba(255, 246, 224, 0.35); padding: 6px; }

/* ---- touch controls ----------------------------------------------------- */

/* Geometry copied from Mug Climb on purpose: 84px arrows, 28px of clear air
   between them, everything lifted clear of the home indicator. That layout
   came out of a playtest and there is no reason to make players relearn it
   one game over. STEADY takes the jump button's place and its size, because
   like jump it is the control you hold under pressure. */
.sh-touch { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sh-touch * { pointer-events: none; }

.sh-tbtn { position: absolute; width: 84px; height: 84px;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  background: rgba(38, 30, 68, 0.72); border: 3px solid #514282;
  border-bottom-width: 6px; color: var(--sh-ink); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; }
.sh-tbtn.press { background: var(--sh-amber); color: #3a1400;
  border-color: #a06a00; transform: translateY(3px); }

#tL { left: 14px; }
#tR { left: 126px; }        /* 28px of clear air between the arrows */

.sh-tsteady { right: 14px; width: 124px; height: 124px;
  bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
.sh-tsteady span { font-family: var(--sh-num); font-size: 11px; letter-spacing: .06em; }
/* Spent, it goes dead rather than lying about being available. */
.sh-tsteady.dry { border-color: #3a3350; color: rgba(255, 246, 224, 0.3); }
.sh-tsteady.dry.press { background: rgba(38, 30, 68, 0.72); color: rgba(255, 246, 224, 0.3);
  border-color: #3a3350; transform: none; }

.sh-slidehint { position: absolute; inset: auto 0 0 0; text-align: center;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sh-slidehint span { font-family: var(--sh-num); font-size: 7px; letter-spacing: .12em;
  color: rgba(255, 246, 224, 0.26); }

.sh-ctrl-row { display: flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--sh-num); font-size: 7px;
  letter-spacing: .12em; color: var(--sh-cyan); }
.sh-seg { font-family: var(--sh-num); font-size: 8px; letter-spacing: .06em;
  padding: 8px 12px; background: #2b2350; color: var(--sh-ink);
  border: 2px solid var(--sh-line); border-bottom-width: 4px; cursor: pointer; }
.sh-seg.on { background: var(--sh-amber); color: #3a1400; border-color: #a06a00; }

/* Keep the HUD clear of the control band. */
body.sh-touch-on .sh-hud { padding-bottom: calc(182px + env(safe-area-inset-bottom, 0px)); }
body.sh-touch-on.sh-slide .sh-hud { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* Landscape on a phone: the road needs height more than the chrome does. */
@media (orientation: landscape) and (max-height: 520px) {
  .sh-logo span { font-size: 30px; }
  .sh-screen { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
}