/* jbrostudio.com/webdemo: the studio site's look (tools/jbrostudio-studio/public/style.css palette, Cinzel / Inter,
   header, cta, footer) around the web game frame. Fonts and images are copied from the studio site into /webdemo/
   at deploy time (build_deploy.py), so this page never depends on the studio Worker's paths.
     .frame   16:9, as wide as the page allows while its height stays under 85 % of the viewport; portrait phones get a
              tall 9:16 frame under 78 % of the viewport height
     .stats   three lifetime figures counted up on load (webdemo.js), a cell without a value is removed */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(/webdemo/fonts/cinzel-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/webdemo/fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/webdemo/fonts/inter-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --night: #0a1020; --navy: #131d36; --gold: #d8ae57; --gold-soft: #f0d79a; --ink: #eef1f7; --muted: #a9b3c7; --line: #2a3658;
  color-scheme: dark; --page: min(1600px, calc(100vw - 48px));
  /* Game width: the page width, unless a 16:9 frame that wide would push the frame's bottom below the window
     (header ~76 px + title block ~150 px + margins); never under 60 % of the page for very short windows. */
  --demo-w: min(var(--page), max(calc((100svh - 250px) * 16 / 9), calc(var(--page) * .6))); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse 120% 70% at 50% 0, #1c2a4a 0, var(--night) 60%) var(--night); color: var(--ink);
  font: 17px/1.65 Inter, system-ui, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; font-weight: 700; margin: 0; letter-spacing: .02em; }
.skip { position: fixed; left: 16px; top: -60px; background: var(--gold); color: var(--night); padding: 10px 14px; z-index: 9; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

.top { max-width: var(--demo-w); margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 18px/1 Cinzel, serif; letter-spacing: .12em; color: var(--gold-soft); }
.top nav { display: flex; gap: 26px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--gold-soft); }

.cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid var(--gold); border-radius: 4px;
  color: var(--gold-soft); background: none; text-decoration: none; font: 600 15px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em;
  cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.cta:hover { background: var(--gold); color: var(--night); }
.cta-solid { background: var(--gold); color: var(--night); }
.cta-solid:hover { background: var(--gold-soft); }

/* ── game ── */
.demo { width: var(--page); margin: 0 auto; padding: 4px 0 28px; }
.demo-head { width: var(--demo-w); margin: 0 auto 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.kicker { margin: 0 0 6px; color: var(--gold); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; color: #fff; }
.intro { margin: 8px 0 0; color: #d6dcea; max-width: 62ch; }
.demo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.frame { position: relative; width: var(--demo-w); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #05080c; box-shadow: 0 24px 70px #000a, 0 0 0 1px #0006; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.frame:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; aspect-ratio: auto; }

/* ── figures ── */
.stats { width: min(var(--page), 1120px); margin: 10px auto 0; padding: 26px 24px; display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats[hidden] { display: none; }
.stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 18px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-value { font: 700 clamp(30px, 4vw, 48px)/1 Cinzel, Georgia, serif; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-align: center; }

/* ── full game links ── */
.more { max-width: 720px; margin: 0 auto; padding: 46px 24px 70px; text-align: center; }
.more h2 { font-size: 30px; color: var(--gold-soft); margin: 0 0 14px; }
.more p { margin: 0 0 24px; color: #d6dcea; }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

.foot { border-top: 1px solid var(--line); padding: 34px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 28px; color: var(--muted); font-size: 14px; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--gold-soft); }

@media (max-width: 760px) {
  :root { --page: calc(100vw - 20px); }
  .top { padding: 14px 4px; }
  .top nav { gap: 16px; }
  .brand span { font-size: 15px; }
  .demo-head { align-items: flex-start; }
  .demo-actions { width: 100%; }
  .demo-actions .cta { flex: 1 1 0; padding: 11px 12px; }
  .stats { padding: 20px 4px; }
  .stat { padding: 0 6px; }
  .stat-label { font-size: 11px; letter-spacing: .14em; }
}
/* Portrait phones: a tall frame (the game's portrait layout) under 78 % of the viewport height. */
@media (orientation: portrait) and (max-width: 760px) {
  .frame { width: min(100%, calc(78svh * 9 / 16)); aspect-ratio: 9 / 16; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cta { transition: none; } }