/* Landscape foundation shared by every page (load AFTER the page's own CSS so it wins).
   The game frame is 16:9 and centred; --u = 1% of the frame HEIGHT, so 100u tall × 177.78u wide.
   Pages lay themselves out inside `.ls-frame`-sized areas with calc(var(--u) * N). */
/* --vw1 / --vh1 = 1% of the GAME's viewport width / height. All page CSS uses these instead of vw / vh so that a phone
   held upright can show the game rotated 90° (html.ls-rot, js/orient.js): there the game's width is the screen height. */
:root { --vw1: 1vw; --vh1: 1vh; }
html.ls-rot { --vw1: 1vh; --vh1: 1vw; }
/* small-viewport units: the size with the browser toolbars shown, so the frame doesn't jump when they slide in/out */
@supports (height: 1svh) { :root { --vh1: 1svh; } html.ls-rot { --vw1: 1svh; --vh1: 1svw; } }
:root {
  --fh: min(calc(var(--vh1) * 100), calc(var(--vw1) * 100 * 9 / 16));   /* frame height */
  --fw: calc(var(--fh) * 16 / 9);                                        /* frame width  */
  --u: calc(var(--fh) / 100);
}
/* Pages that opt in with <html class="ls-flex"> stretch sideways on wide screens (16:9 up to 21:9) instead of
   letterboxing; their layouts must let a middle area grow (minmax(0, 1fr) columns). Height-based --u is unchanged. */
html.ls-flex { --fw: min(calc(var(--vw1) * 100), calc(var(--fh) * 21 / 9)); }
html, body { height: 100%; overflow: hidden; }
/* Portrait phone: rotate the whole page a quarter turn so it plays in landscape without turning the phone. */
html.ls-rot body { position: fixed; top: 0; left: 0; width: calc(var(--vw1) * 100); height: calc(var(--vh1) * 100); margin: 0;
  transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
body { background: #101a33; }

/* Phone held upright: ask to rotate (js/orient.js toggles .ls-portrait on <html>). */
.ls-rotate { position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
  background: radial-gradient(circle at 50% 35%, #2b4bb8, #101a33 70%); color: #fff; text-align: center; font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; }
html.ls-portrait .ls-rotate { display: flex; }
.ls-rotate .ls-phone { width: 64px; height: 108px; border: 5px solid #fff; border-radius: 14px; position: relative; animation: lsTurn 2.2s cubic-bezier(.5, 0, .3, 1) infinite; box-shadow: 0 0 30px rgba(120, 180, 255, 0.5); }
.ls-rotate .ls-phone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 4px; background: #fff; }
@keyframes lsTurn { 0%, 20% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }
.ls-rotate b { font-size: 22px; font-weight: 700; }
.ls-rotate p { margin: 0; max-width: 280px; font-size: 14.5px; line-height: 1.45; opacity: 0.85; }
.ls-rotate button { margin-top: 6px; padding: 12px 22px; border: 0; border-radius: 99px; background: #fff; color: #2b55e6; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }