/* The shell every game shares: the play area, the panel on the right, and the words over the game.
   The colors come from brand.js and land on :root at load. Square corners on purpose. */
:root {
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --panel: clamp(260px, 25vw, 520px);
  --bg: #0b0b0c; --text: #ecece6; --accent: #E85D00; --fill: #E85D00; --onFill: #fff; --surface: #171718; --text2: #9a9a95;
  --line: rgba(236,236,230,0.1); --line2: rgba(236,236,230,0.2);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 500 16px/1.3 var(--sans); }
#stage { cursor: none; position: fixed; left: 0; top: 0; width: calc(100vw - var(--panel)); height: 100vh; background: var(--bg); }
#stage canvas { display: block; }

#panel { position: fixed; right: 0; top: 0; width: var(--panel); height: 100vh; display: flex; flex-direction: column; gap: 1.6vh; padding: 2.6vh 1.6vw; background: var(--surface); border-left: 1px solid var(--line); }
.eyebrow { font: 500 clamp(10px, 1.05vh, 15px) var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); }
h1 { margin: 0.4vh 0 0; font: 700 clamp(22px, 4.4vh, 64px)/1 var(--sans); letter-spacing: -0.02em; }
h1 i, .call b i, #over .big i { font-style: normal; color: var(--fill); }
#logo { display: block; max-width: 100%; max-height: 7vh; margin-bottom: 1vh; object-fit: contain; object-position: left; }
#logo[hidden], #credit[hidden] { display: none; }
.scores { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scores div { padding: 1.2vh 0; min-width: 0; }
.scores div + div { padding-left: 0.9vw; border-left: 1px solid var(--line); }
.scores b { display: block; font: 700 clamp(26px, 6.6vh, 96px)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.scores div + div b { font-size: clamp(20px, 4.2vh, 60px); margin-top: 1.2vh; }
.scores .new b { color: var(--accent); }
.slot { flex: 1; min-height: 0; overflow: hidden; }
.cam { position: relative; flex: none; aspect-ratio: 4 / 3; max-height: 22vh; background: #000; border: 1px solid var(--line); overflow: hidden; }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam video { transform: scaleX(-1); opacity: 0.55; }
.cam span { position: absolute; left: 0.6vw; bottom: 0.8vh; right: 0.6vw; font: 500 clamp(10px, 1.3vh, 18px) var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.call { padding-top: 1.4vh; border-top: 1px solid var(--line); }
.call b { display: block; font: 700 clamp(18px, 3.6vh, 52px)/1.05 var(--sans); letter-spacing: -0.02em; }
.call small { display: block; margin-top: 0.6vh; color: var(--text2); font-size: clamp(11px, 1.5vh, 22px); }

#over { position: fixed; left: 6vw; top: 16vh; width: calc(100vw - var(--panel) - 12vw); pointer-events: none; transition: opacity 0.4s; }
#over[hidden] { display: block; opacity: 0; }
#over .big { font: 700 clamp(28px, 8.4vh, 130px)/0.95 var(--sans); letter-spacing: -0.035em; text-shadow: 0 0.4vh 3vh rgba(0,0,0,0.75); }
#over p { margin: 2.4vh 0 0; max-width: 46em; padding: 1.2vh 1vw; background: rgba(11,11,12,0.72); font-size: clamp(14px, 2.4vh, 36px); }
#over .tag { display: inline-block; margin-bottom: 2vh; padding: 0.6vh 1vw; background: var(--fill); color: var(--onFill); font: 500 clamp(11px, 1.6vh, 22px) var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
#hint { position: fixed; left: 0; top: 3vh; width: calc(100vw - var(--panel)); padding: 0 2vw; text-align: center; font: 700 clamp(18px, 4.2vh, 64px)/1.1 var(--sans); letter-spacing: -0.02em; pointer-events: none; text-shadow: 0 0.2vh 1.5vh rgba(0,0,0,0.9); }
#hint[hidden] { display: none; }
#credit { position: fixed; left: 1vw; bottom: 1.2vh; font: 500 clamp(11px, 1.5vh, 20px) var(--sans); color: var(--text); text-decoration: none; text-shadow: 0 0 6px #000; }
#problem { position: fixed; left: 2vw; bottom: 6vh; max-width: 50vw; padding: 10px 14px; background: var(--surface); border: 1px solid #ff6b5e; font: 500 13px var(--sans); }