/* Let's solve it — built to the Figma file "Solve it in 60" (v5, 10.13.26).
   Each layout is drawn on its Figma canvas and scaled with --u (1 design px), so the whole
   screen scales as one piece on any device of that shape:
     lay-portrait  = Kiosk   1080 × 1920
     lay-landscape = Tablet / LED wall 960 × 576
     lay-tall      = Mobile  402 × 874
   js/app.js sets --u and the layout class on <html>. Numbers below are Figma px for that canvas. */

@font-face { font-family: "Invesco Editor"; src: url("../fonts/InvescoEditor-Regular.woff2") format("woff2"), url("../fonts/InvescoEditor-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Regular.woff2") format("woff2"), url("../fonts/Graphik-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Semibold.woff2") format("woff2"), url("../fonts/Graphik-Semibold.otf") format("opentype"); font-weight: 500; font-display: swap; }
/* Figma 10.20: all bold text is Graphik Medium (500). Semibold above is kept but no longer used. */
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Medium.woff2") format("woff2"), url("../fonts/Graphik-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }

:root {
  --u: 0.5px;
  --W: 1080;
  --bg: #D3EAFC;
  --blue: #000AD2;
  --lime: #E1FB00;
  --grey: #696969;
  --grey-light: #BEBEBE;
  --tile-correct: #000AD2;
  --tile-present: #E1FB00;
  --tile-absent: #696969;
  --serif: "Invesco Editor", Georgia, "Times New Roman", serif;
  --sans: "Graphik", "Segoe UI", Helvetica, Arial, sans-serif;

  /* per-layout component sizes (kiosk) */
  --tile: 109.7; --tile-gap: 16.45; --tile-r: 7.6; --tile-line: 2.7;
  --key-w: 60.15; --key-h: 79; --key-gap: 10.2; --key-row-gap: 11.6; --key-wide: 109.4; --key-font: 19.3; --key-r: 3.9;
  --tk: 1;     /* timer scale: 208 px disc */
  --hk: 1.52;  /* How to Play scale: drawn at tablet size (500 wide) */
}
html.lay-landscape {
  --W: 960;
  --tile: 53.3; --tile-gap: 8.03; --tile-r: 4.2; --tile-line: 2.5;
  --key-w: 31.7; --key-h: 41.7; --key-gap: 5; --key-row-gap: 5.3; --key-wide: 57.7; --key-font: 11.2; --key-r: 2.3;
  --tk: 0.5096; --hk: 1;
}
html.lay-tall {
  --W: 402;
  --tile: 61.6; --tile-gap: 9.25; --tile-r: 4.2; --tile-line: 1.6;
  --key-w: 29.7; --key-h: 54.5; --key-gap: 5.15; --key-row-gap: 8; --key-wide: 54; --key-font: 14.8; --key-r: 2.1;
  --tk: 0.4423; --hk: 0.776;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
b, strong { font-weight: 500; }

html, body { margin: 0; height: 100%; height: var(--app-h, 100%); overflow: hidden; background: var(--bg); }
body {
  font-family: var(--sans); font-weight: 400; color: var(--blue);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation; overscroll-behavior: none;
}
#app { position: relative; width: calc(var(--u) * var(--W)); height: 100%; margin: 0 auto; }
/* phones: everything moves up by --ty design px (the Figma frames include room for the status bar) */
html.lay-tall #app { top: calc(var(--u) * var(--ty, 0) * -1); height: calc(100% + var(--u) * var(--ty, 0)); }
html.lay-landscape #app { top: var(--oy, 0px); height: calc(var(--u) * 576); }

button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; outline: none; }
svg { display: block; }
h1, h2, h3, p, ol { margin: 0; padding: 0; font-weight: 400; }

.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; animation: screen-in 0.3s ease-out; }
@keyframes screen-in { from { opacity: 0; } }

/* ============ logo + title ============ */

.logo { position: absolute; z-index: 6; left: calc(var(--u) * 30); top: calc(var(--u) * 64); width: calc(var(--u) * 257); padding: 0; border: 0; background: none; }
.logo img { display: block; width: 100%; height: auto; }
body[data-screen="saver"] .logo { display: none; }
html.lay-landscape .logo { left: calc(var(--u) * 30.7); top: calc(var(--u) * 30); width: calc(var(--u) * 190.7); }
html.lay-tall .logo { left: calc(var(--u) * 19); top: calc(var(--u) * 50); width: calc(var(--u) * 128.5); }

.title {
  position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 130);
  font: 400 calc(var(--u) * 82) / calc(var(--u) * 105) var(--serif);
  letter-spacing: -0.01em; white-space: nowrap;
}
html.lay-landscape .title { left: calc(var(--u) * 30.7); top: calc(var(--u) * 95); font-size: calc(var(--u) * 50); line-height: calc(var(--u) * 50); }
html.lay-landscape .title span { display: block; }
html.lay-tall .title { left: calc(var(--u) * 19); top: calc(var(--u) * 85); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 45.2); }

/* ============ buttons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 266); height: calc(var(--u) * 100);
  /* padding-bottom lifts Graphik's capitals (which sit ~0.09em low) to the optical centre of the button */
  padding: var(--cap-pt, 0em) 0 var(--cap-pb, 0.18em); border: 0;
  font-size: calc(var(--u) * 30); font-weight: 500; color: #F5F5F5;
  transition: transform 0.08s, background-color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); }
.btn-primary:disabled { background: var(--grey-light); cursor: default; transform: none; }
.btn-outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 2)) var(--blue); }
.btn svg { width: 1.2em; height: 1.2em; margin-right: 0.4em; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
html.lay-landscape .btn { width: calc(var(--u) * 170); height: calc(var(--u) * 55); font-size: calc(var(--u) * 20); }
html.lay-landscape .btn-outline { box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 1.1)) var(--blue); }
html.lay-tall .btn { width: calc(var(--u) * 197); height: calc(var(--u) * 74); font-size: calc(var(--u) * 22); }
html.lay-tall .btn-outline { box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 1)) var(--blue); }

/* ============ screensaver / splash ============ */

.s-saver { cursor: pointer; }
/* The client's videos have a flat background (#D2E8FB), so "contain" fits the 16:9 landscape video into the
   5:3 LED-wall area without cropping: the thin bands above and below take the same colour and disappear. */
.saver-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #D4EAFA; }
.saver-touch { position: absolute; left: 0; right: 0; top: calc(var(--u) * 144); text-align: center; font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 35); }
@keyframes pulse { 50% { opacity: 0.4; } }
body:not(.kiosk) .saver-touch { display: none; }
.saver-head { position: absolute; left: calc(var(--u) * 50); top: calc(var(--u) * 568); font: 400 calc(var(--u) * 296) / calc(var(--u) * 281.2) var(--serif); letter-spacing: -0.04em; white-space: nowrap; }
.saver-head > span { display: block; }

/* Looping headline: letters slide in from the right one after another ("Let's", then "solve it"),
   hold, slide out to the left, and repeat. js/app.js adds .play / .out and sets --i per letter. */
.saver-head .ch { display: inline-block; opacity: 0; will-change: transform, opacity; }
.s-saver.play .saver-head .ch { animation: ch-in 0.75s cubic-bezier(.16,.84,.26,1) both; animation-delay: calc(var(--i) * 60ms + var(--w) * 220ms); }
.s-saver.out .saver-head .ch { opacity: 1; animation: ch-out 0.5s cubic-bezier(.6,0,.9,.4) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes ch-in { from { opacity: 0; transform: translateX(1.1em); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ch-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-0.7em); } }
/* "Touch screen to begin" and the QR code arrive after the first headline and then stay put */
.s-saver .saver-touch, .s-saver .saver-qr { opacity: 0; }
.s-saver.ready .saver-touch { opacity: 1; animation: fade-in 0.7s ease-out both, pulse 2.6s ease-in-out 0.7s infinite; }
.s-saver.ready .saver-qr { opacity: 1; animation: qr-in 0.55s cubic-bezier(.2,1.3,.4,1) 0.5s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qr-in { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
.saver-logo { position: absolute; left: calc(var(--u) * 86); top: calc(var(--u) * 1694); width: calc(var(--u) * 400); height: auto; }
.saver-qr { position: absolute; left: calc(var(--u) * 762); top: calc(var(--u) * 1423); width: calc(var(--u) * var(--q) * 268); height: calc(var(--u) * var(--q) * 396); background: var(--lime); text-align: center; --q: 1; }
.saver-qr .qr-top { height: calc(var(--u) * var(--q) * 105); padding: calc(var(--u) * var(--q) * 22) calc(var(--u) * var(--q) * 6) 0; font: 400 calc(var(--u) * var(--q) * 36) / calc(var(--u) * var(--q) * 32) var(--serif); color: var(--blue); }
.saver-qr .qr-code { width: calc(var(--u) * var(--q) * 211); margin: 0 auto; background: #fff; padding: calc(var(--u) * var(--q) * 24.5); border-radius: calc(var(--u) * var(--q) * 32); }
.saver-qr .qr-code svg { width: 100%; height: auto; }
.saver-qr .qr-bottom { padding: 0 calc(var(--u) * var(--q) * 44); margin-top: calc(var(--u) * var(--q) * 13); font-size: calc(var(--u) * var(--q) * 25); line-height: 1.12; color: #000; }

html.lay-landscape .saver-touch { top: calc(var(--u) * 86.4); font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 21); }
html.lay-landscape .saver-head { left: 0; right: 0; top: calc(var(--u) * 202.2); text-align: center; font-size: calc(var(--u) * 135); line-height: calc(var(--u) * 135); }
html.lay-landscape .saver-head > span { display: inline; }
html.lay-landscape .saver-logo { left: calc(var(--u) * 394.2); top: calc(var(--u) * 478.8); width: calc(var(--u) * 171.6); }
html.lay-landscape .saver-qr { left: calc(var(--u) * 804); top: calc(var(--u) * 393); --q: 0.35; }
html.lay-tall .saver-head { left: calc(var(--u) * 26); top: calc(var(--u) * 284); font-size: calc(var(--u) * 105.7); line-height: calc(var(--u) * 106.1); }
html.lay-tall .saver-logo { left: calc(var(--u) * 26); top: calc(var(--u) * 740); width: calc(var(--u) * 200); }

/* ============ registration ============ */
/* v6 (10.16.26): terms note sits beside the tick box, an optional marketing box below it,
   Continue under the form and, in kiosk mode, the on-screen keyboard drawn into the layout. */

.form-pane { position: absolute; left: calc(var(--u) * 131); top: calc(var(--u) * 353); width: calc(var(--u) * 828); height: calc(var(--u) * 650); }
.field-label { display: block; height: calc(var(--u) * 37); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 30); }
.row-2 { display: flex; gap: calc(var(--u) * 28); }
.row-2 .field { flex: 1; min-width: 0; }
.label-email { margin-top: calc(var(--u) * 32); height: calc(var(--u) * 36); }
.field {
  display: block; width: 100%; height: calc(var(--u) * 75);
  padding: 0 calc(var(--u) * 16);
  border: max(1px, calc(var(--u) * 1)) solid var(--blue); border-radius: calc(var(--u) * 6);
  background: #fff; color: var(--blue);
  font: 400 calc(var(--u) * 36) var(--sans);
  text-align: center; outline: none;
  -webkit-user-select: text; user-select: text;
}
.field::placeholder { color: var(--grey-light); }
.field:focus, .field.focus { box-shadow: 0 0 0 calc(var(--u) * 3) var(--blue); }
.field.invalid { border-color: #D0021B; box-shadow: 0 0 0 calc(var(--u) * 2) #D0021B; }

.terms { display: flex; align-items: flex-start; gap: calc(var(--u) * 25); margin-top: calc(var(--u) * 44); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 24); color: #000; }
.terms-mkt { margin-top: calc(var(--u) * 48); }
.mkt-copy { line-height: calc(var(--u) * 32); }
.terms-box { flex: 0 0 auto; position: relative; width: calc(var(--u) * 48); height: calc(var(--u) * 48); padding: 0; background: #DADADA; border: max(1px, calc(var(--u) * 1)) solid var(--grey); border-radius: calc(var(--u) * 6); }
.terms-box svg { position: absolute; left: 4%; top: -22%; width: 112%; height: 112%; fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: square; opacity: 0; }
.terms-box[aria-checked="true"], #mkt-box { background: #fff; border-color: var(--blue); }
.terms-box[aria-checked="true"] svg { opacity: 1; }
.terms-link { color: var(--blue); font-weight: 500; text-decoration: none; cursor: pointer; }
.terms-note { margin-top: calc(var(--u) * 12); }
.terms-note b { font-weight: 500; }
/* wording differs slightly per layout in the design: "agree to" / "accept", full stop on mobile */
.w-accept, .w-dot, html.lay-landscape .w-agree { display: none; }
html.lay-landscape .w-accept, html.lay-tall .w-dot { display: inline; }
.label-row { position: relative; }
.field-error { position: absolute; left: 0; top: 0; margin: 0; color: #D0021B; font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 30); font-weight: 500; white-space: nowrap; }
.field-error.err-last { left: calc(50% + var(--u) * 14); }
.label-row.has-err .field-label { visibility: hidden; }
html.lay-landscape .field-error { font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); }
html.lay-landscape .field-error.err-last { left: calc(50% + var(--u) * 3); }
html.lay-tall .field-error { font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 18); }
html.lay-tall .field-error.err-last { left: 0; }
.form-error { margin-top: calc(var(--u) * 20); color: #D0021B; font-size: calc(var(--u) * 26); font-weight: 500; line-height: 1.2; }
.form-pane .btn { position: absolute; left: 0; top: calc(var(--u) * 547); }

html.lay-landscape .form-pane { left: calc(var(--u) * 307); top: calc(var(--u) * 43); width: calc(var(--u) * 621); height: calc(var(--u) * 506); }
html.lay-landscape .field-label { height: calc(var(--u) * 23); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); }
html.lay-landscape .row-2 { gap: calc(var(--u) * 6); }
html.lay-landscape .label-email { margin-top: calc(var(--u) * 16); height: calc(var(--u) * 23); }
html.lay-landscape .field { height: calc(var(--u) * 50); font-size: calc(var(--u) * 24); border-radius: calc(var(--u) * 4); padding: 0 calc(var(--u) * 10); }
html.lay-landscape .terms { gap: calc(var(--u) * 15); margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 16); }
html.lay-landscape .terms-mkt { margin-top: calc(var(--u) * 24); }
html.lay-landscape .mkt-copy { line-height: calc(var(--u) * 16); }
html.lay-landscape .terms-box { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
html.lay-landscape .terms-note { margin-top: calc(var(--u) * 4); }
html.lay-landscape .form-error { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 14); }
html.lay-landscape .form-pane .btn { left: calc(var(--u) * 451); top: calc(var(--u) * 451); }

/* phone screens are static: they are scaled to fit the screen height instead of scrolling (see layout() in app.js) */
html.lay-tall .form-pane { left: calc(var(--u) * 20); top: calc(var(--u) * 171); width: calc(var(--u) * 364); height: calc(var(--u) * 640); }
html.lay-tall .field-label { height: calc(var(--u) * 26); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 18); }
html.lay-tall .row-2 { flex-direction: column; gap: calc(var(--u) * 16); }
html.lay-tall .row-2 .field { flex: none; }
html.lay-tall .label-email { margin-top: calc(var(--u) * 18); height: calc(var(--u) * 26); }
html.lay-tall .field { height: calc(var(--u) * 60); font-size: calc(var(--u) * 20); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 10); }
html.lay-tall .terms { gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 32); margin-left: calc(var(--u) * -1); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); }
html.lay-tall .terms-mkt { margin-top: calc(var(--u) * 24); }
html.lay-tall .mkt-copy, html.lay-tall .terms-note { line-height: calc(var(--u) * 16); }
html.lay-tall .terms-box { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
html.lay-tall .terms-note { margin-top: calc(var(--u) * 8); }
html.lay-tall .form-error { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 15); }
html.lay-tall .form-pane .btn { left: calc(var(--u) * 83); top: calc(var(--u) * 544); }

/* on-screen keyboard (kiosk mode), placed as in the design: grey keys, capital labels, four rows */
.osk { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1049); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * var(--ok) * 11.3); --ok: 1; }
.osk .krow { display: flex; gap: calc(var(--u) * var(--ok) * 12.6); }
.osk .key { width: calc(var(--u) * var(--ok) * 69.9); height: calc(var(--u) * var(--ok) * 92.4); border-radius: calc(var(--u) * var(--ok) * 5.1); font-size: calc(var(--u) * var(--ok) * 25); text-transform: none; color: #000; }
.osk .key.w15 { width: calc(var(--u) * var(--ok) * 128.3); }
.osk .key.w4 { width: calc(var(--u) * var(--ok) * 265.4); }
.osk .key.on { background: var(--blue); color: #fff; }
.osk .key svg { width: 39%; height: 41%; stroke: #000; }
html.lay-landscape .osk { --ok: 0.4506; left: calc(var(--u) * 307); right: auto; width: calc(var(--u) * 381); top: calc(var(--u) * 367); }
/* without the on-screen keyboard (&osk=0) the device keyboard is used instead */

/* ============ waiver ============ */

body.waiver-open .osk { visibility: hidden; }

.waiver { position: absolute; inset: 0; z-index: 30; animation: screen-in 0.2s; }
.waiver-card { position: absolute; left: calc(var(--u) * 50); top: calc(var(--u) * 172); width: calc(var(--u) * 963); height: calc(var(--u) * 1507); background: #fff; border: 1px solid #D9D9D9; border-radius: calc(var(--u) * 16); }
.waiver-card h3 { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 50); right: calc(var(--u) * 100); font-size: calc(var(--u) * 32); font-weight: 500; line-height: calc(var(--u) * 38); }
.waiver-close { position: absolute; left: calc(var(--u) * 866); top: calc(var(--u) * 36); width: calc(var(--u) * 60); height: calc(var(--u) * 60); padding: calc(var(--u) * 12); border: 0; background: none; }
.waiver-close svg { width: 100%; height: 100%; fill: none; stroke: var(--blue); stroke-width: 6; }
.waiver-text {
  position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 118); width: calc(var(--u) * 869); height: calc(var(--u) * 1184);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  color: var(--grey); font-size: calc(var(--u) * 20); line-height: 1.2;
  scrollbar-width: none; outline: none;
}
.waiver-text::-webkit-scrollbar { display: none; }
.waiver-text p, .waiver-text ul { margin: 0 0 1.2em; }
.waiver-text h4 { margin: 0; font-size: inherit; font-weight: 500; }
.waiver-text ul { padding-left: 1.3em; }
.waiver-text a { color: var(--blue); text-decoration: underline; }
/* "I have read and agree" box at the end of the terms; ticking it unlocks Accept */
.waiver-agree { display: flex; align-items: flex-start; gap: calc(var(--u) * 15); padding: calc(var(--u) * 10) 0 calc(var(--u) * 6); color: #000; }
.waiver-agree p { margin: 0; }
.waiver-agree .req { color: var(--blue); }
.waiver-agree .terms-box { width: calc(var(--u) * 32); height: calc(var(--u) * 32); background: #fff; border-color: var(--blue); }
html.lay-landscape .waiver-agree .terms-box, html.lay-tall .waiver-agree .terms-box { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.waiver-bar { position: absolute; left: calc(var(--u) * 933); top: calc(var(--u) * 118); width: max(2px, calc(var(--u) * 2)); height: calc(var(--u) * 1184); background: #D9D9D9; }
.waiver-bar i { position: absolute; left: 0; top: 0; width: 100%; height: 30%; background: var(--grey); }
/* wide invisible touch area around the thin bar so it can be dragged with a finger */
.waiver-bar { touch-action: none; cursor: pointer; }
.waiver-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--u) * 56); transform: translateX(-50%); }
html.lay-landscape .waiver-bar::before, html.lay-tall .waiver-bar::before { width: calc(var(--u) * 30); }
.waiver-card .btn { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 1365); }

html.lay-landscape .waiver-card { left: calc(var(--u) * 41); top: calc(var(--u) * 100); width: calc(var(--u) * 878); height: calc(var(--u) * 435); border-radius: calc(var(--u) * 6); }
html.lay-landscape .waiver-card h3 { left: calc(var(--u) * 46); top: calc(var(--u) * 25); font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 22); }
html.lay-landscape .waiver-close { left: calc(var(--u) * 822); top: calc(var(--u) * 13); width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: calc(var(--u) * 12); }
html.lay-landscape .waiver-text { left: calc(var(--u) * 46); top: calc(var(--u) * 63); width: calc(var(--u) * 780); height: calc(var(--u) * 246); font-size: calc(var(--u) * 13); }
html.lay-landscape .waiver-bar { left: calc(var(--u) * 854); top: calc(var(--u) * 63); height: calc(var(--u) * 246); }
html.lay-landscape .waiver-card .btn { left: calc(var(--u) * 46); top: calc(var(--u) * 337); }

/* phones: the card fills the screen height, so it fits whatever the phone's shape */
html.lay-tall .waiver-card { left: calc(var(--u) * 19); top: calc(var(--u) * (var(--ty, 0) + 16)); bottom: calc(var(--u) * 16); width: calc(var(--u) * 365); height: auto; border-radius: calc(var(--u) * 6); }
html.lay-tall .waiver-card h3 { left: calc(var(--u) * 19); top: calc(var(--u) * 22); right: calc(var(--u) * 110); font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 22); }
html.lay-tall .waiver-close { left: calc(var(--u) * 318); top: calc(var(--u) * 9); width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: calc(var(--u) * 12); }
html.lay-tall .waiver-text { left: calc(var(--u) * 19); top: calc(var(--u) * 83); bottom: calc(var(--u) * 122); width: calc(var(--u) * 327); height: auto; font-size: calc(var(--u) * 14); }
html.lay-tall .waiver-bar { left: calc(var(--u) * 354); top: calc(var(--u) * 83); bottom: calc(var(--u) * 122); height: auto; }
html.lay-tall .waiver-card .btn { left: calc(var(--u) * 84); top: auto; bottom: calc(var(--u) * 24); }

/* ============ instructions ("How to Play", Figma 10.20) ============ */
/* Each block is placed at its Figma position per layout. --xt tile, --xg gap, --xb border, --xr radius, --xf letter size. */

.intro-pane { position: absolute; inset: 0; color: var(--blue); }
.ip { position: absolute; margin: 0; }
.ip-head { left: calc(var(--u) * 180); top: calc(var(--u) * 303); font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 44); font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; white-space: nowrap; }
.ip-step { left: calc(var(--u) * 130); width: calc(var(--u) * 780); display: flex; align-items: baseline; font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 40); }
.ip-step b { flex: 0 0 calc(var(--u) * 50); font-size: calc(var(--u) * 32); font-weight: 400; }
.ip-1 { top: calc(var(--u) * 419); }
.ip-2 { top: calc(var(--u) * 491); width: calc(var(--u) * 871); }
.ip-3 { top: calc(var(--u) * 563); }
.ip-4 { top: calc(var(--u) * 1229.9); }
.ip-ex-title { left: calc(var(--u) * 180); top: calc(var(--u) * 715); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 40); font-weight: 500; letter-spacing: -0.01em; }
.ip-ex { left: calc(var(--u) * 180); width: calc(var(--u) * 681); --xt: 60.7; --xg: 9.1; --xb: 1; --xr: 4.2; --xf: 31.2; }
.ip-ex-1 { top: calc(var(--u) * 787); }
.ip-ex-2 { top: calc(var(--u) * 918.6); }
.ip-ex-3 { top: calc(var(--u) * 1050.3); }
.ip-ex p { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 42.9); letter-spacing: -0.01em; }
.ip-ex p b { font-weight: 500; }
.ipx { display: flex; gap: calc(var(--u) * var(--xg)); }
.ipx span {
  width: calc(var(--u) * var(--xt)); height: calc(var(--u) * var(--xt));
  display: flex; align-items: center; justify-content: center; padding: var(--cap-pt, 0em) 0 var(--cap-pb, 0.18em);
  border: max(1px, calc(var(--u) * var(--xb))) solid var(--grey); border-radius: calc(var(--u) * var(--xr));
  color: #000; font-size: calc(var(--u) * var(--xf)); font-weight: 500; line-height: 1;
}
.ipx span.st-2 { background: var(--tile-correct); border-color: transparent; color: #fff; }
.ipx span.st-1 { background: var(--tile-present); color: #000; }
.ipx span.st-0 { background: var(--tile-absent); border-color: transparent; color: #fff; }
.btn-start { position: absolute; left: calc(var(--u) * 180); top: calc(var(--u) * 1353); }

/* tablet / LED wall: steps on the left under the title, examples in a column on the right */
html.lay-landscape .ip-head { left: calc(var(--u) * 50); top: calc(var(--u) * 233); font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 16.7); letter-spacing: 0.4em; }
html.lay-landscape .ip-step { left: calc(var(--u) * 31); width: calc(var(--u) * 418); font-size: calc(var(--u) * 18.67); line-height: calc(var(--u) * 21); }
html.lay-landscape .ip-step b { flex: 0 0 auto; margin-right: calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
html.lay-landscape .ip-1 { top: calc(var(--u) * 273.7); }
html.lay-landscape .ip-2 { top: calc(var(--u) * 318.7); }
html.lay-landscape .ip-3 { top: calc(var(--u) * 363.7); }
html.lay-landscape .ip-4 { top: calc(var(--u) * 429.7); }
html.lay-landscape .ip-ex-title { left: calc(var(--u) * 523); top: calc(var(--u) * 164); font-size: calc(var(--u) * 18.67); line-height: calc(var(--u) * 21); letter-spacing: 0; }
html.lay-landscape .ip-ex { left: calc(var(--u) * 523); width: calc(var(--u) * 350); --xt: 37.7; --xg: 5.7; --xb: 0.6; --xr: 2.6; --xf: 19.4; }
html.lay-landscape .ip-ex-1 { top: calc(var(--u) * 212); }
html.lay-landscape .ip-ex-2 { top: calc(var(--u) * 300.7); }
html.lay-landscape .ip-ex-3 { top: calc(var(--u) * 389.4); }
html.lay-landscape .ip-ex p { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 18.75); line-height: calc(var(--u) * 20); }
html.lay-landscape .btn-start { left: calc(var(--u) * 523); top: calc(var(--u) * 485); }

/* phone */
html.lay-tall .ip-head { left: calc(var(--u) * 47); top: calc(var(--u) * 176); font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 22); letter-spacing: 0.28em; }
html.lay-tall .ip-step { left: calc(var(--u) * 29); width: calc(var(--u) * 354); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 18); }
html.lay-tall .ip-step b { flex: 0 0 auto; margin-right: calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
html.lay-tall .ip-1 { top: calc(var(--u) * 234); }
html.lay-tall .ip-2 { top: calc(var(--u) * 268); }
html.lay-tall .ip-3 { top: calc(var(--u) * 302); }
html.lay-tall .ip-4 { top: calc(var(--u) * 610.8); }
html.lay-tall .ip-ex-title { left: calc(var(--u) * 50); top: calc(var(--u) * 374); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 18); }
html.lay-tall .ip-ex { left: calc(var(--u) * 50); width: calc(var(--u) * 302); --xt: 29.4; --xg: 4.4; --xb: 0.5; --xr: 2; --xf: 15.1; }
html.lay-tall .ip-ex-1 { top: calc(var(--u) * 404); }
html.lay-tall .ip-ex-2 { top: calc(var(--u) * 464.9); }
html.lay-tall .ip-ex-3 { top: calc(var(--u) * 525.9); }
html.lay-tall .ip-ex p { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 18); }
html.lay-tall .btn-start { left: calc(var(--u) * 103); top: calc(var(--u) * 715); }

/* ============ game ============ */

.timer { position: absolute; left: calc(var(--u) * 838); top: calc(var(--u) * 32); width: calc(var(--u) * var(--tk) * 208); height: calc(var(--u) * var(--tk) * 208); background: #fff; border-radius: 50%; }
html.lay-landscape .timer { left: calc(var(--u) * 25); top: calc(var(--u) * 235); }
html.lay-tall .timer { left: calc(var(--u) * 289); top: calc(var(--u) * 39); }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 14.7; }
.timer .track { stroke: var(--bg); }
.timer .arc { stroke: var(--lime); stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s linear; }
.timer-text { position: absolute; inset: 0; text-align: center; }
.timer-text b { display: block; margin-top: calc(var(--u) * var(--tk) * 74.5); font-size: calc(var(--u) * var(--tk) * 46); font-weight: 500; letter-spacing: -0.05em; line-height: calc(var(--u) * var(--tk) * 50.6); }
.timer-text small { display: block; font-size: calc(var(--u) * var(--tk) * 12.9); font-weight: 500; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.timer.low .timer-text b { animation: pulse 1s ease-in-out infinite; }

/* white card behind the grid and keyboard */
.game-card { position: absolute; left: calc(var(--u) * 144); top: calc(var(--u) * 290); width: calc(var(--u) * 792); height: calc(var(--u) * 1112); background: #fff; border-radius: calc(var(--u) * 12); }
html.lay-landscape .game-card { left: calc(var(--u) * 270); top: calc(var(--u) * 13); width: calc(var(--u) * 420); height: calc(var(--u) * 550); }
/* phone game: card height, board and keyboard positions come from fitPhoneGame() in app.js (Figma values as fallback) */
html.lay-tall .game-card { left: calc(var(--u) * 12); top: calc(var(--u) * 158); width: calc(var(--u) * 377); height: calc(var(--u) * var(--pg-card-h, 662)); border-radius: calc(var(--u) * 8.8); }

.board { position: absolute; left: calc(var(--u) * 233); top: calc(var(--u) * 346); display: grid; gap: calc(var(--u) * var(--tile-gap)); }
html.lay-landscape .board { left: calc(var(--u) * 329.5); top: calc(var(--u) * 36); }
html.lay-tall .board { left: calc(var(--u) * var(--pg-board-left, 27)); top: calc(var(--u) * var(--pg-board-top, 184)); }
.board .row { display: grid; grid-template-columns: repeat(5, calc(var(--u) * var(--tile))); gap: calc(var(--u) * var(--tile-gap)); }
.tile {
  height: calc(var(--u) * var(--tile));
  display: flex; align-items: center; justify-content: center;
  border: max(1px, calc(var(--u) * var(--tile-line))) solid rgba(190, 190, 190, 0.8);
  border-radius: calc(var(--u) * var(--tile-r));
  color: var(--blue);
  font-size: calc(var(--u) * var(--tile) * 0.513); font-weight: 500; letter-spacing: 0; line-height: 1;
  /* Capitals are centred optically: app.js measures where this browser draws Graphik's capitals (Windows draws them
     ~0.09em low, iPhone Safari ~0.05em high) and sets --cap-pt / --cap-pb to compensate. */
  padding: var(--cap-pt, 0em) 0 var(--cap-pb, 0.18em);
  text-transform: uppercase;
}
.tile.st-0, .tile.st-1, .tile.st-2 { border-color: transparent; color: #fff; }
/* "in the word, wrong spot" is lime with a black letter and a light outline */
.tile.st-1 { border-color: var(--grey-light); color: #000; }
.tile.st-0, .key.st-0, .ex .st-0 { background: var(--tile-absent); }
.tile.st-1, .key.st-1, .ex .st-1 { background: var(--tile-present); }
.tile.st-2, .key.st-2, .ex .st-2 { background: var(--tile-correct); }

/* Wordle-style motion: pop on typing, shake on a bad guess, flip to reveal, bounce on a win */
.tile.filled { border-color: var(--blue); animation: pop 0.1s ease-in-out; }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } }
.board .row.shake { animation: shake 0.6s; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.tile.flip-in { animation: flip-in 0.25s ease-in forwards; }
.tile.flip-out { animation: flip-out 0.25s ease-out forwards; }
@keyframes flip-in { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flip-out { from { transform: rotateX(-90deg); } to { transform: rotateX(0); } }
.tile.win { animation: bounce 1s; }
@keyframes bounce { 0%, 20% { transform: translateY(0); } 40% { transform: translateY(-38%); } 50% { transform: translateY(6%); } 60% { transform: translateY(-19%); } 80% { transform: translateY(3%); } 100% { transform: translateY(0); } }

/* Keyboard: keys take the same colours as the grid once a guess is revealed */
.kbd { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1110); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * var(--key-row-gap)); }
html.lay-landscape .kbd { left: calc(var(--u) * 289); right: auto; width: calc(var(--u) * 381); top: calc(var(--u) * 408); }
html.lay-tall .kbd { top: calc(var(--u) * var(--pg-kbd-top, 614)); }
.krow { display: flex; gap: calc(var(--u) * var(--key-gap)); }
.key {
  width: calc(var(--u) * var(--key-w)); height: calc(var(--u) * var(--key-h));
  padding: 0; border: 0; border-radius: calc(var(--u) * var(--key-r));
  background: rgba(190, 190, 190, 0.4); color: #000;
  font-size: calc(var(--u) * var(--key-font)); font-weight: 500; letter-spacing: 0; padding-top: var(--cap-pt, 0em); padding-bottom: var(--cap-pb, 0.18em);
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s, transform 0.06s;
}
.key:active { background: rgba(190, 190, 190, 0.85); transform: scale(0.94); }
.key.wide { width: calc(var(--u) * var(--key-wide)); text-transform: none; }
.key svg { width: calc(var(--u) * var(--key-wide) * 0.4); height: calc(var(--u) * var(--key-wide) * 0.3); margin: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.key.st-0, .key.st-1, .key.st-2 { color: #fff; }
.key.st-1 { color: #000; box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 1)) rgba(190, 190, 190, 0.8); }

/* message bar over the middle of the grid */
.toast {
  position: absolute; left: calc(var(--u) * 540.5); top: calc(var(--u) * 684); transform: translateX(-50%);
  min-width: calc(var(--u) * 275); height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 28); display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; border-radius: calc(var(--u) * 7.5);
  font-size: calc(var(--u) * 28); font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10;
}
.toast.show { opacity: 1; }
html.lay-landscape .toast { left: calc(var(--u) * 480.5); top: calc(var(--u) * 196); min-width: calc(var(--u) * 125); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 13); border-radius: calc(var(--u) * 3.7); font-size: calc(var(--u) * 13); }
html.lay-tall .toast { left: calc(var(--u) * 201); top: calc(var(--u) * var(--pg-toast-top, 370)); min-width: calc(var(--u) * 146); height: calc(var(--u) * 45); padding: 0 calc(var(--u) * 14.5); border-radius: calc(var(--u) * 3.9); font-size: calc(var(--u) * 14); }

.btn-info { position: absolute; left: calc(var(--u) * 59); top: calc(var(--u) * 1340); width: calc(var(--u) * 60); height: calc(var(--u) * 60); padding: 0; border: 0; background: none; transition: opacity 0.2s; }
.btn-info svg { width: 100%; height: 100%; fill: none; stroke: var(--blue); stroke-width: 5; }
.btn-info svg .fill { fill: var(--blue); stroke: none; }
html.lay-landscape .btn-info { left: calc(var(--u) * 25); top: calc(var(--u) * 534); width: calc(var(--u) * 31); height: calc(var(--u) * 31); }
html.lay-tall .btn-info { left: calc(var(--u) * 19); top: calc(var(--u) * var(--pg-info-top, 831)); width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
body.howto-open .btn-info { opacity: 0.35; }

/* ============ result ============ */

.result-head { position: absolute; left: 0; right: 0; top: calc(var(--u) * 321); text-align: center; font: 400 calc(var(--u) * 85) / calc(var(--u) * 110) var(--serif); letter-spacing: -0.01em; }
/* white card: rows and lime rules sit at their Figma centres (--c = row centre, --l1 / --l2 = rules) */
.stats { position: absolute; left: calc(var(--u) * 121); top: calc(var(--u) * 457); width: calc(var(--u) * 839); height: calc(var(--u) * 570); background: #fff; color: #000; border-radius: calc(var(--u) * 18.7); --pad: 49.4; --l1: 167.8; --l2: 382.5; --lw: 8; }
.stats::before, .stats::after { content: ""; position: absolute; left: calc(var(--u) * var(--pad)); right: calc(var(--u) * var(--pad)); height: calc(var(--u) * var(--lw)); margin-top: calc(var(--u) * var(--lw) / -2); background: var(--lime); }
.stats::before { top: calc(var(--u) * var(--l1)); }
.stats::after { top: calc(var(--u) * var(--l2)); }
.stat { position: absolute; left: calc(var(--u) * var(--pad)); right: calc(var(--u) * var(--pad)); top: calc(var(--u) * var(--c)); height: 0; display: flex; align-items: center; font-size: calc(var(--u) * 46.7); letter-spacing: -0.01em; white-space: nowrap; }
.stat:nth-child(1) { --c: 90; }
.stat:nth-child(2) { --c: 280; }
.stat:nth-child(3) { --c: 470; }
.stat svg { flex: 0 0 auto; width: calc(var(--u) * 64); height: calc(var(--u) * 60); margin: 0 calc(var(--u) * 20) 0 calc(var(--u) * 4); fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.stat span { flex: 1; }
.stat b { font-weight: 500; color: var(--blue); }
.stat b.word { letter-spacing: 0.12em; }
.result-note { position: absolute; left: calc(var(--u) * 215); top: calc(var(--u) * 1068); width: calc(var(--u) * 649); text-align: center; font-size: calc(var(--u) * 40); line-height: 1.1; }
.result-actions { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1220); display: flex; flex-direction: column; align-items: center; }
.result-actions .btn { width: calc(var(--u) * 310); height: calc(var(--u) * 100); font-size: calc(var(--u) * 36); color: #fff; }
.btn-view { display: none; }

.result-legal { position: absolute; left: calc(var(--u) * 34); top: calc(var(--u) * 1845); width: calc(var(--u) * 1011); margin: 0; text-align: center; font-size: calc(var(--u) * 12); line-height: 1.17; color: var(--blue); }
html.lay-landscape .result-legal { left: calc(var(--u) * 41); top: calc(var(--u) * 531); width: calc(var(--u) * 879); font-size: calc(var(--u) * 9); }
html.lay-tall .result-legal { left: calc(var(--u) * 14); top: calc(var(--u) * 818); width: calc(var(--u) * 375); font-size: calc(var(--u) * 9); }
html.lay-tall .legal-br { display: none; }
/* Kiosk result page: Figma moves the leaderboard up 30 to make room for the legal line. */
html.lay-portrait body[data-screen="result"] .dock { top: calc(var(--u) * 1425); }
html.lay-landscape .result-head { left: calc(var(--u) * 39); right: auto; top: calc(var(--u) * 150); width: calc(var(--u) * 244); text-align: left; font-size: calc(var(--u) * 48); line-height: calc(var(--u) * 48); }
html.lay-landscape .stats { left: calc(var(--u) * 306); top: calc(var(--u) * 137); width: calc(var(--u) * 366.6); height: calc(var(--u) * 302); border-radius: calc(var(--u) * 10.4); --pad: 26.1; --l1: 102; --l2: 202; --lw: 4; }
html.lay-landscape .stat { font-size: calc(var(--u) * 26.1); }
html.lay-landscape .stat:nth-child(1) { --c: 47.6; }
html.lay-landscape .stat:nth-child(2) { --c: 148.2; }
html.lay-landscape .stat:nth-child(3) { --c: 248.7; }
html.lay-landscape .stat svg { width: calc(var(--u) * 34); height: calc(var(--u) * 32); margin: 0 calc(var(--u) * 11) 0 calc(var(--u) * 2); stroke-width: 2.4; }
html.lay-landscape .result-note { left: calc(var(--u) * 41); top: calc(var(--u) * 263); width: calc(var(--u) * 200); text-align: left; font-size: calc(var(--u) * 16); line-height: 1.12; }
html.lay-landscape .result-actions { left: calc(var(--u) * 41); right: auto; top: calc(var(--u) * 379); align-items: flex-start; }
html.lay-landscape .result-actions .btn { width: calc(var(--u) * 170); height: calc(var(--u) * 55); font-size: calc(var(--u) * 20); }

html.lay-tall .result-head { top: calc(var(--u) * 156); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 46); }
html.lay-tall .stats { left: calc(var(--u) * 13.3); top: calc(var(--u) * 229); width: calc(var(--u) * 375.3); height: calc(var(--u) * 255); border-radius: calc(var(--u) * 8.8); --pad: 22.1; --l1: 75.1; --l2: 171.1; --lw: 6; }
html.lay-tall .stat { font-size: calc(var(--u) * 22.1); }
html.lay-tall .stat:nth-child(1) { --c: 40.3; }
html.lay-tall .stat:nth-child(2) { --c: 126.3; }
html.lay-tall .stat:nth-child(3) { --c: 210.3; }
html.lay-tall .stat svg { width: calc(var(--u) * 29); height: calc(var(--u) * 27); margin: 0 calc(var(--u) * 9) 0 calc(var(--u) * 2); stroke-width: 2.4; }
html.lay-tall .result-note { left: calc(var(--u) * 38); top: calc(var(--u) * 511); width: calc(var(--u) * 325); font-size: calc(var(--u) * 20); line-height: 1.08; }
html.lay-tall .result-actions { top: calc(var(--u) * 589); gap: calc(var(--u) * 20); }
html.lay-tall .btn-view { display: inline-flex; }
html.lay-tall .result-actions .btn { width: calc(var(--u) * 225); height: calc(var(--u) * 74); font-size: calc(var(--u) * 22); }
html.lay-tall .result-actions .btn-outline { font-size: calc(var(--u) * 22); color: var(--blue); }

/* ============ leaderboard ============ */

/* v5: no card. "LEADERBOARD" left, "TOP 10" right, blue header bar, blue rules between rows. */
.lb-title { display: flex; justify-content: space-between; font-weight: 500; line-height: 1; text-transform: uppercase; white-space: nowrap; color: #000; }
.lb-title b { font-weight: 500; }
.lb-title span { color: var(--blue); margin-right: -0.2em; }
.lb { border-collapse: collapse; table-layout: fixed; color: #000; }
.lb th { background: var(--blue); color: #fff; font-weight: 500; text-transform: uppercase; text-align: left; padding: var(--cap-pt, 0em) 0 var(--cap-pb, 0.18em); white-space: nowrap; }
body.from-email .btn-close { display: none; }
.privacy-qr { width: calc(var(--u) * var(--mk) * 300); margin: calc(var(--u) * var(--mk) * 28) auto 0; padding: calc(var(--u) * var(--mk) * 16); background: #fff; border: 1px solid #D9D9D9; }
.privacy-qr svg { width: 100%; height: auto; }
/* On-screen privacy notice (kiosk / tablet): a tall card with the PDF pages scrolling inside it. */
.modal-card.doc-card { width: calc(var(--u) * var(--mk) * 980); max-width: 94%; height: 90%; display: flex; flex-direction: column; padding: calc(var(--u) * var(--mk) * 44) calc(var(--u) * var(--mk) * 40); }
html.lay-landscape .modal-card.doc-card { width: 70%; }
.doc-pages { flex: 1; min-height: 0; margin-top: calc(var(--u) * var(--mk) * 28); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid #D9D9D9; background: #F2F2F2; }
.doc-pages img { display: block; width: 100%; height: auto; margin-bottom: 6px; background: #fff; user-select: none; -webkit-user-select: none; }
.doc-card h3 { font-size: calc(var(--u) * var(--mk) * 48); }
.doc-card .modal-actions { margin-top: calc(var(--u) * var(--mk) * 28); }
.lb th i { font-style: normal; }
.lb .h-name, html.lay-landscape .lb .h-player { display: none; }
html.lay-landscape .lb .h-name { display: inline; }
.lb td { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 100% / 100% var(--lb-line); }
.lb td:first-child { font-weight: 500; }
.lb tr:last-child td { background-image: none; }
.lb th:nth-child(n+3), .lb td:nth-child(n+3) { text-align: center; }
.lb tr.me td { background-color: var(--lime); font-weight: 500; }
.lb .empty td { text-align: center !important; font-weight: 400 !important; background-image: none; white-space: normal; color: var(--blue); }

/* kiosk dock: two columns along the bottom */
.dock { position: absolute; z-index: 3; left: calc(var(--u) * 30); top: calc(var(--u) * 1455); width: calc(var(--u) * 1015); height: calc(var(--u) * 396); }
.dock .lb-title { font-size: calc(var(--u) * 32); letter-spacing: 0.2em; }
/* align-items: flex-start keeps a short second column (6–9 players) from stretching its rows to the first column's height */
.dock-cols { position: absolute; left: 0; top: calc(var(--u) * 58); display: flex; align-items: flex-start; gap: calc(var(--u) * 13); }
.dock .lb { width: calc(var(--u) * 501); --lb-line: max(1px, calc(var(--u) * 1)); }
.dock .lb th { height: calc(var(--u) * 40); font-size: calc(var(--u) * 18); }
.dock .lb td { height: calc(var(--u) * 59); font-size: calc(var(--u) * 24); }
.dock .lb tr:first-child td { height: calc(var(--u) * 62); padding-top: calc(var(--u) * 3); }
.dock .lb th:nth-child(1), .dock .lb td:nth-child(1) { width: calc(var(--u) * 54); }
.dock .lb td:nth-child(1) { padding-left: calc(var(--u) * 12); }
.dock .lb th:nth-child(3), .dock .lb td:nth-child(3) { width: calc(var(--u) * 90); }
.dock .lb th:nth-child(4), .dock .lb td:nth-child(4) { width: calc(var(--u) * 98); padding-right: calc(var(--u) * 13); }
.dock .lb .empty td { height: calc(var(--u) * 298); padding: 0; }

/* tablet dock: one column down the right edge */
html.lay-landscape .dock { left: calc(var(--u) * 712); top: calc(var(--u) * 36); width: calc(var(--u) * 224); height: calc(var(--u) * 431); }
html.lay-landscape .dock .lb-title { font-size: calc(var(--u) * 14); letter-spacing: 0.08em; }
html.lay-landscape .lb-title span { margin-right: -0.08em; }
html.lay-landscape .dock-cols { left: 0; top: calc(var(--u) * 21.9); display: block; }
html.lay-landscape .dock .lb { width: calc(var(--u) * 224); --lb-line: max(1px, calc(var(--u) * 0.4)); }
html.lay-landscape .dock .lb + .lb thead { display: none; }
html.lay-landscape .dock .lb:first-child tr:last-child td { background-image: linear-gradient(var(--blue), var(--blue)); }
html.lay-landscape .dock .lb th { height: calc(var(--u) * 22); font-size: calc(var(--u) * 8); }
html.lay-landscape .dock .lb td, html.lay-landscape .dock .lb tr:first-child td { height: calc(var(--u) * 40); padding-top: 0; font-size: calc(var(--u) * 13); }
html.lay-landscape .dock .lb th:nth-child(1), html.lay-landscape .dock .lb td:nth-child(1) { width: calc(var(--u) * 28); }
html.lay-landscape .dock .lb td:nth-child(1) { padding: 0 calc(var(--u) * 8) 0 0; text-align: center; }
html.lay-landscape .dock .lb th:nth-child(3), html.lay-landscape .dock .lb td:nth-child(3) { width: calc(var(--u) * 44); }
html.lay-landscape .dock .lb th:nth-child(4), html.lay-landscape .dock .lb td:nth-child(4) { width: calc(var(--u) * 48); padding-right: calc(var(--u) * 2); }
html.lay-landscape .dock .lb .empty td { height: calc(var(--u) * 200); }
html.lay-landscape .dock .lb + .lb .empty { display: none; }
html.lay-tall .dock { display: none; }

/* mobile leaderboard screen */
.lb-panel { position: absolute; left: calc(var(--u) * 19); top: calc(var(--u) * 180); width: calc(var(--u) * 368); }
.lb-panel .lb-title { font-size: calc(var(--u) * 22); letter-spacing: 0.1em; }
.lb-panel .lb-title span { margin-right: -0.1em; }
.lb-panel .lb { position: absolute; left: 0; top: calc(var(--u) * 35); width: calc(var(--u) * 368); --lb-line: max(1px, calc(var(--u) * 1)); }
.lb-panel .lb th { height: calc(var(--u) * 24); font-size: calc(var(--u) * 12); }
.lb-panel .lb td { height: calc(var(--u) * 54); font-size: calc(var(--u) * 14.9); }
.lb-panel .lb tr:first-child td { height: calc(var(--u) * 52); }
.lb-panel .lb th:nth-child(1), .lb-panel .lb td:nth-child(1) { width: calc(var(--u) * 38); }
.lb-panel .lb td:nth-child(1) { padding-right: calc(var(--u) * 8); text-align: center; }
.lb-panel .lb th:nth-child(3), .lb-panel .lb td:nth-child(3) { width: calc(var(--u) * 60); }
.lb-panel .lb th:nth-child(4), .lb-panel .lb td:nth-child(4) { width: calc(var(--u) * 70); }
.lb-panel .lb tr.gap td { height: calc(var(--u) * 16); background-image: none; text-align: center; }
.btn-close { position: absolute; left: calc(var(--u) * 339); top: calc(var(--u) * 98); width: calc(var(--u) * 43); height: calc(var(--u) * 43); padding: calc(var(--u) * 12.9); border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.04); }
.btn-close svg { width: 100%; height: 100%; fill: none; stroke: var(--blue); stroke-width: 3.2; }

/* ============ How to Play ============ */

.howto { position: absolute; inset: 0; z-index: 20; animation: screen-in 0.2s; }
.howto-card {
  position: absolute; left: calc(var(--u) * 160); top: calc(var(--u) * 363); width: calc(var(--u) * 760); height: calc(var(--u) * 800); border-radius: calc(var(--u) * 15.2);
  padding: calc(var(--u) * var(--hk) * 18.9) calc(var(--u) * var(--hk) * 36) 0 calc(var(--u) * var(--hk) * 36.2);
  background: #fff; color: var(--blue);
  font-size: calc(var(--u) * var(--hk) * 18.8); line-height: 1.07; letter-spacing: -0.01em;
  box-shadow: 0 calc(var(--u) * var(--hk) * 3) calc(var(--u) * var(--hk) * 16) rgba(0, 20, 70, 0.22);
  animation: howto-in 0.25s cubic-bezier(.2,.8,.3,1);
}
@keyframes howto-in { from { opacity: 0; transform: translateY(3%); } }
html.lay-landscape .howto-card { left: calc(var(--u) * 230); top: calc(var(--u) * 28); width: calc(var(--u) * 500); height: calc(var(--u) * 520); border-radius: calc(var(--u) * 10); }
html.lay-tall .howto-card { left: calc(var(--u) * 16); top: calc(var(--u) * 224); width: calc(var(--u) * 370); height: calc(var(--u) * 425); border-radius: calc(var(--u) * 8); padding-left: calc(var(--u) * 26.8); padding-right: calc(var(--u) * 20); }
.howto-card h3 { font: 500 calc(var(--u) * var(--hk) * 24) / calc(var(--u) * var(--hk) * 55.1) var(--sans); letter-spacing: 0.17em; text-transform: uppercase; }
.howto-card p { margin-bottom: calc(var(--u) * var(--hk) * 20.1); }
.howto-card .ex-label { margin-bottom: calc(var(--u) * var(--hk) * 5.5); padding-top: calc(var(--u) * var(--hk) * 6); }
.howto-card .ex { display: flex; gap: calc(var(--u) * var(--hk) * 5.7); margin-bottom: calc(var(--u) * var(--hk) * 11); }
.howto-card .ex span {
  width: calc(var(--u) * var(--hk) * 37.7); height: calc(var(--u) * var(--hk) * 37.7);
  display: flex; align-items: center; justify-content: center;
  border: max(1px, calc(var(--u) * var(--hk) * 0.6)) solid var(--grey); border-radius: calc(var(--u) * var(--hk) * 2.6);
  font-size: calc(var(--u) * var(--hk) * 19.4); font-weight: 500; letter-spacing: 0; line-height: 1; color: #000; padding: var(--cap-pt, 0em) 0 var(--cap-pb, 0.18em);
}
.howto-card .ex span[class] { border-color: transparent; color: #fff; }
.howto-card .ex span.st-1 { border-color: var(--grey); color: #000; }
.howto-card .ex-cap { margin-bottom: calc(var(--u) * var(--hk) * 15.5); }
.howto-card b { font-weight: 500; }
.howto-close { position: absolute; right: calc(var(--u) * var(--hk) * 13.7); top: calc(var(--u) * var(--hk) * 12.7); width: calc(var(--u) * var(--hk) * 26.9); height: calc(var(--u) * var(--hk) * 26.9); padding: 0; border: 0; border-radius: 50%; background: var(--blue); }
.howto-close svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

/* ============ dialogs (leave game / idle) ============ */

.modal { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(211, 234, 252, 0.8); backdrop-filter: blur(3px); animation: screen-in 0.2s; --mk: 1; }
html.lay-landscape .modal { --mk: 0.55; }
html.lay-tall .modal { --mk: 0.42; }
.modal-card { width: calc(var(--u) * var(--mk) * 820); max-width: 92%; padding: calc(var(--u) * var(--mk) * 60); background: #fff; color: var(--blue); text-align: center; border-radius: calc(var(--u) * var(--mk) * 16); box-shadow: 0 calc(var(--u) * var(--mk) * 4) calc(var(--u) * var(--mk) * 30) rgba(0, 20, 60, 0.25); }
.modal-card h3 { font: 400 calc(var(--u) * var(--mk) * 64) / 1.1 var(--serif); }
.modal-card p { margin-top: calc(var(--u) * var(--mk) * 22); font-size: calc(var(--u) * var(--mk) * 34); line-height: 1.25; }
.modal-card b { font-weight: 500; }
.modal-actions { display: flex; gap: calc(var(--u) * var(--mk) * 24); justify-content: center; margin-top: calc(var(--u) * var(--mk) * 46); }
.modal-actions .btn { width: auto; min-width: calc(var(--u) * var(--mk) * 266); height: calc(var(--u) * var(--mk) * 100); padding: var(--cap-pt, 0em) calc(var(--u) * var(--mk) * 36) var(--cap-pb, 0.18em); font-size: calc(var(--u) * var(--mk) * 30); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}