/* A bare frame for the dev server. On jelly48.com the shared game-page.css
   (inlined at deploy) lays out the page: the game centered, the title and
   how-to-play beside it, a minimal nav, Float Away's sky palette, and the phone
   sheet. The frame is just tall enough for the score bar and the board with its
   drop area (web_board_offset in src/web.rs). App colors, geometry and control
   radii come from Rust. */
:root { color-scheme:dark; font-family:system-ui,sans-serif;
  --preview-background:#101b24; --preview-cream:#faf5e3; --preview-inset:24px; --preview-radius:32px;
  background:var(--preview-background); }
* { box-sizing:border-box; }
body { --frame:min(390px,calc(92svh * 390 / 691),calc(100vw - var(--preview-inset) * 2));
  margin:0; min-height:100svh; display:grid; place-items:center; row-gap:24px;
  color:#cfd8de; font:17px/1.7 -apple-system,system-ui,"Segoe UI",sans-serif; }
#phone { position:relative; width:var(--frame); aspect-ratio:390/691;
  overflow:hidden; border-radius:var(--preview-radius); touch-action:none; }
canvas { display:block; width:100%; height:100%; touch-action:none; }
#controls { position:absolute; inset:0; pointer-events:none; }
#controls button { position:absolute; border:0; padding:0; background:transparent; color:transparent;
  pointer-events:auto; cursor:pointer; font:inherit; touch-action:none; }
#controls button:focus-visible { outline:3px solid var(--preview-cream); outline-offset:3px; }
#controls input[type=range] { position:absolute; margin:0; opacity:0; pointer-events:none; }
#controls input[type=range] { appearance:none; background:transparent; border:0; border-radius:14px; }
#controls input[type=range]::-webkit-slider-thumb { appearance:none; background:transparent; width:28px; height:28px; }
#controls input[type=range]::-moz-range-thumb { background:transparent; border:0; }
#controls input[type=range]::-moz-range-track { background:transparent; }
#controls input[type=range]:focus-visible { opacity:1; outline:3px solid var(--preview-cream); outline-offset:3px; }
#status { position:absolute; inset:40% var(--preview-inset) auto; text-align:center; color:var(--preview-cream); line-height:1.5; }
#status[hidden] { display:none; }
#safe-area { position:fixed; visibility:hidden; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
@media (max-width:500px) and (pointer:coarse) {
  body { background:#508fbf; }
  #phone { width:100vw; height:100svh; aspect-ratio:auto; border-radius:0; }
}