/* Last Call — shell styles.
   Everything inside the canvas is drawn in JS; this file only frames it.
   Palette values mirror server/templates/site/styles.css so the game reads
   as the same brand as the site and the apps. */
:root{
  --ink-black:#0A0F0E; --ink-800:#10201D;
  --gilt:#E0A63B; --ivory:#F3E7C9; --ivory-dim:#C7B78F;
  --font-display:"Cinzel","Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 0%, #14211E 0%, var(--ink-black) 60%),
    var(--ink-black);
  color:var(--ivory);
  font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* The canvas draws its own cursor-free scene; a visible pointer over a
     keyboard-only game is just clutter. */
  cursor:default;
}
#stage{
  position:relative;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}
/* The canvas keeps its 960x540 logical resolution and is scaled by JS to the
   largest whole-pixel-friendly fit. Letterboxing lives in the flex centring
   above rather than in a transform, so the drawing buffer is never resampled
   at a fractional offset. */
#game{
  display:block;
  background:var(--ink-black);
  box-shadow:0 0 0 1px rgba(224,166,59,.22), 0 30px 90px rgba(0,0,0,.75);
  image-rendering:auto;
}
.fallback{
  position:fixed; inset:auto 0 2rem 0; text-align:center;
  color:var(--ivory-dim); letter-spacing:.08em;
}

/* Way out.
   Bottom-left, NOT top-left: the HUD bar owns the entire top strip of the canvas
   (hud.js fills 0,0..VIEW_W,76 and puts the hearts at x=30..90, the level name
   and timer at centre, and the coin count at VIEW_W-168). A link up there sits
   directly on the lives indicator.

   Honest about the trade-off: when the window is taller than 16:9 the canvas is
   letterboxed and this lands in dead space, but at wider ratios it does overlap
   the bottom-left of the play field. That corner holds only transient level
   geometry rather than anything you must read, and the link stays at .35 opacity
   until you look for it — which is the right compromise for a full-screen game
   that still needs a way back to the site.

   It is a real focusable link, which is why js/input.js ignores game keys while
   an interactive element holds focus: Enter is a CONFIRM key here, and a focused
   link would otherwise both confirm and navigate away mid-jump. */
.home{
  position:fixed; bottom:.9rem; left:1rem; z-index:10;
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ivory-dim);
  padding:.45em .8em; border:1px solid rgba(224,166,59,.22); border-radius:2px;
  background:rgba(10,15,14,.55); opacity:.35;
  transition:opacity .2s ease, color .2s ease, border-color .2s ease;
}
.home:hover,.home:focus-visible{opacity:1; color:var(--gilt); border-color:var(--gilt)}
.home:focus-visible{outline:2px solid var(--gilt); outline-offset:2px}
@media (max-width:640px){ .home{font-size:.64rem; bottom:.5rem; left:.5rem} }