/* Let's solve it — built to the Figma file "Solve it in 60" (v4, 10.08.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: 600; 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: #00A1DD;
  --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: 180 px ring */
  --hk: 1.6;   /* 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.1; --key-wide: 57.7; --key-font: 11.2; --key-r: 2.3;
  --tk: 0.4667; --hk: 1;
}
html.lay-tall {
  --W: 402;
  --tile: 61.6; --tile-gap: 9.25; --tile-r: 4.2; --tile-line: 1.6;
  --key-w: 32.2; --key-h: 59.1; --key-gap: 5.1; --key-row-gap: 8.7; --key-wide: 58.5; --key-font: 16; --key-r: 2.1;
  --tk: 0.4306; --hk: 0.776;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 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; }

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) * 50); top: calc(var(--u) * 74); 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) * 50); top: calc(var(--u) * 150);
  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: 0; border: 0;
  font-size: calc(var(--u) * 30); font-weight: 600; 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; font-weight: 400; color: var(--blue); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--blue); }
.btn-outline svg { width: 1.33em; height: 1.33em; margin-right: 0.25em; fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.lay-landscape .btn { width: calc(var(--u) * 177.3); height: calc(var(--u) * 66.7); 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.6)) var(--blue); }

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

.s-saver { cursor: pointer; }
.saver-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.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) * 830); top: calc(var(--u) * 1528.8); width: calc(var(--u) * var(--q) * 200); height: calc(var(--u) * var(--q) * 290.3); background: var(--lime); text-align: center; --q: 1; }
.saver-qr .qr-top { padding: calc(var(--u) * var(--q) * 12.9) calc(var(--u) * var(--q) * 6) 0; font: 400 calc(var(--u) * var(--q) * 28) / 1 var(--serif); color: var(--blue); }
.saver-qr .qr-code { width: calc(var(--u) * var(--q) * 145); margin: calc(var(--u) * var(--q) * 8.5) auto 0; background: #fff; padding: calc(var(--u) * var(--q) * 6); }
.saver-qr .qr-code svg { width: 100%; height: auto; }
.saver-qr .qr-bottom { padding: 0 calc(var(--u) * var(--q) * 22); margin-top: calc(var(--u) * var(--q) * 12); font-size: calc(var(--u) * var(--q) * 19.4); line-height: 1.15; 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) * 395); --q: 0.465; }
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 ============ */

.form-pane { position: absolute; left: calc(var(--u) * 131); top: calc(var(--u) * 567); width: calc(var(--u) * 828); height: calc(var(--u) * 813); }
.field-label { display: block; height: calc(var(--u) * 42); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 40); }
.row-2 { display: flex; gap: calc(var(--u) * 28); }
.row-2 .field { flex: 1; min-width: 0; }
.label-email { margin-top: calc(var(--u) * 27); }
.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: center; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 54); min-height: calc(var(--u) * 48); font-size: calc(var(--u) * 24); line-height: 1; color: #000; }
.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"] { background: #fff; border-color: var(--blue); }
.terms-box[aria-checked="true"] svg { opacity: 1; }
.terms-link { color: var(--blue); font-weight: 600; text-decoration: none; cursor: pointer; }
.terms-note { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 24); line-height: 1; color: #000; }
.terms-note b { font-weight: 600; }
.form-error { margin-top: calc(var(--u) * 26); color: #D0021B; font-size: calc(var(--u) * 26); font-weight: 600; line-height: 1.2; }
.form-pane .btn { position: absolute; left: 0; top: calc(var(--u) * 713); }

html.lay-landscape .form-pane { left: calc(var(--u) * 327); top: calc(var(--u) * 112); width: calc(var(--u) * 552); height: calc(var(--u) * 375); }
html.lay-landscape .field-label { height: calc(var(--u) * 28); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 26.7); }
html.lay-landscape .row-2 { gap: calc(var(--u) * 18.7); }
html.lay-landscape .label-email { margin-top: calc(var(--u) * 18); }
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) * 8); margin-top: calc(var(--u) * 24); min-height: calc(var(--u) * 32); font-size: calc(var(--u) * 15); }
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) * 10); font-size: calc(var(--u) * 15); }
html.lay-landscape .form-error { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 15); }
html.lay-landscape .form-pane .btn { left: calc(var(--u) * 1); top: calc(var(--u) * 308); }

html.lay-tall .s-form { overflow: hidden auto; }
html.lay-tall .form-pane { left: calc(var(--u) * 20); top: calc(var(--u) * 236.8); width: calc(var(--u) * 364); height: calc(var(--u) * 580); }
html.lay-tall .field-label { height: calc(var(--u) * 29.2); 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) * 33.8); }
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 { align-items: flex-start; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 19); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); }
html.lay-tall .terms-box { width: calc(var(--u) * 32); height: calc(var(--u) * 32); margin-top: calc(var(--u) * 3); }
html.lay-tall .terms-note { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 16); }
html.lay-tall .form-error { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 15); }
html.lay-tall .form-pane .btn { left: calc(var(--u) * 83); top: calc(var(--u) * 478.2); }

/* on-screen keyboard for the form (kiosk mode) */
.osk { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 46); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * var(--ok) * 12); --ok: 1; }
.osk .krow { display: flex; gap: calc(var(--u) * var(--ok) * 12); }
.osk .key { width: calc(var(--u) * var(--ok) * 86); height: calc(var(--u) * var(--ok) * 82); border-radius: calc(var(--u) * var(--ok) * 5); font-size: calc(var(--u) * var(--ok) * 32); text-transform: none; }
.osk .key.w15 { width: calc(var(--u) * var(--ok) * 130); }
.osk .key.w2 { width: calc(var(--u) * var(--ok) * 160); }
.osk .key.w4 { width: calc(var(--u) * var(--ok) * 300); }
.osk .key.on { background: var(--blue); color: #fff; }
.osk .key svg { width: 36%; height: 46%; }
html.lay-landscape .osk { --ok: 0.5; bottom: 0; padding: calc(var(--u) * 10) 0 calc(var(--u) * 12); background: rgba(255, 255, 255, 0.92); box-shadow: 0 calc(var(--u) * -2) calc(var(--u) * 12) rgba(0, 0, 0, 0.18); z-index: 7; }
/* landscape + keyboard: the form moves up so nothing sits under the keys */
html.lay-landscape .s-form.osk-open .title { display: none; }
html.lay-landscape .s-form.osk-open .form-pane { left: calc(var(--u) * 204); top: calc(var(--u) * 78); height: calc(var(--u) * 250); }
html.lay-landscape .s-form.osk-open .label-email { margin-top: calc(var(--u) * 8); }
html.lay-landscape .s-form.osk-open .terms { margin-top: calc(var(--u) * 12); }
html.lay-landscape .s-form.osk-open .terms-note { margin-top: calc(var(--u) * 6); max-width: calc(var(--u) * 360); line-height: 1.1; }
html.lay-landscape .s-form.osk-open .form-error { position: absolute; right: 0; top: calc(var(--u) * 4); margin: 0; }
html.lay-landscape .s-form.osk-open .form-pane .btn { left: auto; right: 0; top: calc(var(--u) * 182); height: calc(var(--u) * 56); }

/* ============ 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: 600; line-height: calc(var(--u) * 38); text-transform: uppercase; }
.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 { margin-bottom: 1.2em; }
.waiver-text p:last-child { margin-bottom: 0; }
.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); }
.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) * 14); }
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) * 331); }

html.lay-tall .waiver-card { left: calc(var(--u) * 19); top: calc(var(--u) * 60); width: calc(var(--u) * 365); height: calc(var(--u) * 753); 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); width: calc(var(--u) * 327); height: calc(var(--u) * 536); font-size: calc(var(--u) * 14); }
html.lay-tall .waiver-bar { left: calc(var(--u) * 354); top: calc(var(--u) * 83); height: calc(var(--u) * 536); }
html.lay-tall .waiver-card .btn { left: calc(var(--u) * 84); top: calc(var(--u) * 655); }

/* ============ instructions ============ */

.spaced { font-size: calc(var(--u) * 32.8); font-weight: 600; line-height: 1.04; letter-spacing: 0.75em; text-transform: uppercase; }
.intro-pane { position: absolute; left: calc(var(--u) * 100); top: calc(var(--u) * 515); width: calc(var(--u) * 916); }
.intro-pane .spaced { padding-left: calc(var(--u) * 21.8); }
.steps { list-style: none; }
.steps li { position: absolute; left: 0; right: 0; display: flex; font-size: calc(var(--u) * 38.2); line-height: 1.06; }
.steps b { flex: 0 0 calc(var(--u) * 109.2); margin-right: calc(var(--u) * 17.8); text-align: center; font-size: calc(var(--u) * 41); font-weight: 600; line-height: 0.99; }
.steps li:nth-child(1) { top: calc(var(--u) * 112); }
.steps li:nth-child(2) { top: calc(var(--u) * 250); }
.steps li:nth-child(3) { top: calc(var(--u) * 428); }
.steps li:nth-child(4) { top: calc(var(--u) * 585); }
.steps li > span { max-width: calc(var(--u) * 770); }
.btn-start { position: absolute; left: calc(var(--u) * 131); top: calc(var(--u) * 1280); }

html.lay-landscape .spaced { font-size: calc(var(--u) * 16); }
html.lay-landscape .intro-pane { left: calc(var(--u) * 376); top: calc(var(--u) * 102); width: calc(var(--u) * 447); }
html.lay-landscape .intro-pane .spaced { padding-left: calc(var(--u) * 10.7); }
html.lay-landscape .steps li { font-size: calc(var(--u) * 18.7); }
html.lay-landscape .steps b { flex-basis: calc(var(--u) * 53.3); margin-right: calc(var(--u) * 8.7); font-size: calc(var(--u) * 20); }
html.lay-landscape .steps li:nth-child(1) { top: calc(var(--u) * 44); }
html.lay-landscape .steps li:nth-child(2) { top: calc(var(--u) * 103); }
html.lay-landscape .steps li:nth-child(3) { top: calc(var(--u) * 182); }
html.lay-landscape .steps li:nth-child(4) { top: calc(var(--u) * 262); }
html.lay-landscape .steps li > span { max-width: calc(var(--u) * 385); }
html.lay-landscape .btn-start { left: calc(var(--u) * 391.3); top: calc(var(--u) * 420); }

html.lay-tall .spaced { font-size: calc(var(--u) * 20); letter-spacing: 0.28em; text-align: center; }
html.lay-tall .intro-pane { left: calc(var(--u) * 14); top: calc(var(--u) * 197); width: calc(var(--u) * 336); }
html.lay-tall .intro-pane .spaced { padding-left: calc(var(--u) * 29); width: calc(var(--u) * 336); }
html.lay-tall .steps li { font-size: calc(var(--u) * 20); line-height: 1; }
html.lay-tall .steps b { flex-basis: calc(var(--u) * 53.8); margin-right: calc(var(--u) * 9.2); font-size: calc(var(--u) * 20); line-height: 1; }
html.lay-tall .steps li:nth-child(1) { top: calc(var(--u) * 57); }
html.lay-tall .steps li:nth-child(2) { top: calc(var(--u) * 150); }
html.lay-tall .steps li:nth-child(3) { top: calc(var(--u) * 265); }
html.lay-tall .steps li:nth-child(4) { top: calc(var(--u) * 379); }
html.lay-tall .steps li > span { max-width: calc(var(--u) * 266); }
html.lay-tall .btn-start { left: calc(var(--u) * 103); top: calc(var(--u) * 715); }

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

.timer { position: absolute; left: calc(var(--u) * 830); top: calc(var(--u) * 85); width: calc(var(--u) * var(--tk) * 180); height: calc(var(--u) * var(--tk) * 180); }
html.lay-landscape .timer { left: calc(var(--u) * 28); top: calc(var(--u) * 246); }
html.lay-tall .timer { left: calc(var(--u) * 307); top: calc(var(--u) * 45); }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 8.89; }
.timer .track { stroke: #DAF1FF; }
.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) * 58); font-size: calc(var(--u) * var(--tk) * 50); font-weight: 600; letter-spacing: -0.05em; line-height: calc(var(--u) * var(--tk) * 55); }
.timer-text small { display: block; font-size: calc(var(--u) * var(--tk) * 14); font-weight: 600; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.timer.low .timer-text b { animation: pulse 1s ease-in-out infinite; }

.board { position: absolute; left: calc(var(--u) * 232.4); top: calc(var(--u) * 376); display: grid; gap: calc(var(--u) * var(--tile-gap)); }
html.lay-landscape .board { left: calc(var(--u) * 330.5); top: calc(var(--u) * 58); }
html.lay-tall .board { left: calc(var(--u) * 29); top: calc(var(--u) * 185); }
.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: 600; letter-spacing: -0.05em; line-height: 1;
  text-transform: uppercase;
}
.tile.st-0, .tile.st-1, .tile.st-2 { border-color: transparent; color: #fff; }
.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) * 1140); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * var(--key-row-gap)); }
html.lay-landscape .kbd { left: calc(var(--u) * 290); right: auto; width: calc(var(--u) * 381); top: calc(var(--u) * 430); }
html.lay-tall .kbd { top: calc(var(--u) * 629); }
.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: var(--grey);
  font-size: calc(var(--u) * var(--key-font)); font-weight: 600; letter-spacing: -0.02em;
  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: var(--grey); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.key.st-0, .key.st-1, .key.st-2 { color: #fff; }

.toast {
  position: absolute; left: calc(var(--u) * 539.5); top: calc(var(--u) * 282); transform: translateX(-50%);
  height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 26); display: flex; align-items: center;
  background: #000; color: #fff; border-radius: calc(var(--u) * 7.5);
  font-size: calc(var(--u) * 24.4); font-weight: 600; 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) * 479.9); top: calc(var(--u) * 10); height: calc(var(--u) * 39); padding: 0 calc(var(--u) * 13); border-radius: calc(var(--u) * 3.7); font-size: calc(var(--u) * 11.9); }
html.lay-tall .toast { left: calc(var(--u) * 201.5); top: calc(var(--u) * 133); height: calc(var(--u) * 45); padding: 0 calc(var(--u) * 14.5); border-radius: calc(var(--u) * 4.2); font-size: calc(var(--u) * 13.7); }

.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) * 833); 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; }
.stats { position: absolute; left: calc(var(--u) * 121); top: calc(var(--u) * 457); width: calc(var(--u) * 839); height: calc(var(--u) * 570); padding: 0 calc(var(--u) * 49.4); display: flex; flex-direction: column; background: var(--blue); color: #fff; border-radius: calc(var(--u) * 18.7); }
.stat { flex: 32.9 0 0; display: flex; align-items: center; font-size: calc(var(--u) * 46.7); letter-spacing: -0.01em; }
.stat:nth-child(1) { flex-grow: 29.4; padding-top: calc(var(--u) * 12); }
.stat:nth-child(2) { flex-grow: 37.7; }
.stat + .stat { border-top: max(1px, calc(var(--u) * 2.3)) solid #fff; }
.stat svg { width: calc(var(--u) * 64); height: calc(var(--u) * 60); margin: 0 calc(var(--u) * 20) 0 calc(var(--u) * 4); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.stat span { flex: 1; }
.stat b { font-weight: 600; }
.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-outline { width: calc(var(--u) * 310); height: calc(var(--u) * 90); font-size: calc(var(--u) * 36); }
.btn-view { display: none; }

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); padding: 0 calc(var(--u) * 26.1); border-radius: calc(var(--u) * 10.4); }
html.lay-landscape .stat { font-size: calc(var(--u) * 26.1); }
html.lay-landscape .stat:nth-child(1) { padding-top: calc(var(--u) * 6); }
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) * 346); align-items: flex-start; }
html.lay-landscape .result-actions .btn-outline { width: calc(var(--u) * 172.2); height: calc(var(--u) * 50); 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); padding: 0 calc(var(--u) * 22.1); border-radius: calc(var(--u) * 8.8); }
html.lay-tall .stat { font-size: calc(var(--u) * 22.1); }
html.lay-tall .stat:nth-child(1) { padding-top: calc(var(--u) * 5); }
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.5); }

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

.lb-title { font-weight: 600; line-height: 1; text-transform: uppercase; white-space: nowrap; color: #000; }
.lb-title span { color: var(--blue); }
.lb { border-collapse: collapse; table-layout: fixed; background: var(--bg); }
.lb th { background: var(--blue); color: #fff; font-weight: 600; text-transform: uppercase; text-align: left; padding: 0; white-space: nowrap; }
.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: 600; background-position: var(--lb-inset) 100%; background-size: calc(100% - var(--lb-inset)) var(--lb-line); }
.lb td:last-child { background-size: calc(100% - var(--lb-inset)) var(--lb-line); }
.lb tr:last-child td { background-image: none; }
.lb th:nth-child(n+3), .lb td:nth-child(n+3) { text-align: right; }
.lb tr.me td { background-color: var(--lime); font-weight: 600; }
.lb .empty td { text-align: center !important; font-weight: 400 !important; background-image: none; white-space: normal; }

/* kiosk dock: two columns along the bottom */
.dock { position: absolute; z-index: 3; left: calc(var(--u) * 35); top: calc(var(--u) * 1430); width: calc(var(--u) * 1010); height: calc(var(--u) * 460); background: #fff; border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(0, 0, 0, 0.25); }
.dock .lb-title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 26); text-align: center; font-size: calc(var(--u) * 32); letter-spacing: 0.2em; padding-left: 0.2em; }
.dock-cols { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 83); display: flex; gap: calc(var(--u) * 19); }
.dock .lb { width: calc(var(--u) * 472); --lb-inset: calc(var(--u) * 14); --lb-line: max(1px, calc(var(--u) * 1)); }
.dock .lb th { height: calc(var(--u) * 41); 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) * 67); padding-top: calc(var(--u) * 8); }
.dock .lb th:nth-child(1) { width: calc(var(--u) * 98); text-align: center; padding-right: calc(var(--u) * 17); }
.dock .lb td:nth-child(1) { padding-left: calc(var(--u) * 29); }
.dock .lb th:nth-child(3), .dock .lb td:nth-child(3) { width: calc(var(--u) * 92); }
.dock .lb th:nth-child(3) { padding-right: calc(var(--u) * 7); }
.dock .lb th:nth-child(4), .dock .lb td:nth-child(4) { width: calc(var(--u) * 136); }
.dock .lb th:nth-child(4) { padding-right: calc(var(--u) * 14); }
.dock .lb td:nth-child(4) { padding-right: calc(var(--u) * 37); }
.dock .lb .empty td { height: calc(var(--u) * 303); padding: 0; }

/* tablet dock: one column down the right edge */
html.lay-landscape .dock { left: calc(var(--u) * 730); top: calc(var(--u) * 57); width: calc(var(--u) * 230); height: calc(var(--u) * 462); border-radius: 0; box-shadow: calc(var(--u) * -1) 0 calc(var(--u) * 8) rgba(0, 0, 0, 0.25); }
html.lay-landscape .dock .lb-title { left: calc(var(--u) * 13.2); right: auto; top: calc(var(--u) * 24); text-align: left; font-size: calc(var(--u) * 14); letter-spacing: 0.11em; padding: 0; }
html.lay-landscape .dock-cols { left: calc(var(--u) * 10); top: calc(var(--u) * 48); display: block; }
html.lay-landscape .dock .lb { width: calc(var(--u) * 208); --lb-inset: calc(var(--u) * 5); --lb-line: max(1px, calc(var(--u) * 0.5)); }
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) * 38.2); 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) * 38.7); }
html.lay-landscape .dock .lb th:nth-child(1) { padding-right: calc(var(--u) * 5); }
html.lay-landscape .dock .lb td:nth-child(1) { padding-left: calc(var(--u) * 13.8); }
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(3) { padding-right: calc(var(--u) * 8.5); }
html.lay-landscape .dock .lb th:nth-child(4), html.lay-landscape .dock .lb td:nth-child(4) { width: calc(var(--u) * 49); }
html.lay-landscape .dock .lb th:nth-child(4) { padding-right: calc(var(--u) * 5.5); }
html.lay-landscape .dock .lb td:nth-child(4) { padding-right: calc(var(--u) * 17); }
html.lay-landscape .dock .lb .empty td { height: calc(var(--u) * 191); }
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) * 15); top: calc(var(--u) * 151); width: calc(var(--u) * 377); height: calc(var(--u) * 640); background: #fff; border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 4.5) rgba(0, 0, 0, 0.25); }
.lb-panel .lb-title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 35); text-align: center; font-size: calc(var(--u) * 17.9); letter-spacing: 0.2em; padding-left: 0.2em; }
.lb-panel .lb { position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 64); width: calc(var(--u) * 355); --lb-inset: calc(var(--u) * 5); --lb-line: max(1px, calc(var(--u) * 1)); }
.lb-panel .lb th { height: calc(var(--u) * 24); font-size: calc(var(--u) * 8.6); }
.lb-panel .lb td { height: calc(var(--u) * 53.4); font-size: calc(var(--u) * 14.94); }
.lb-panel .lb th:nth-child(1), .lb-panel .lb td:nth-child(1) { width: calc(var(--u) * 41); }
.lb-panel .lb th:nth-child(1) { text-align: center; padding-right: calc(var(--u) * 6); }
.lb-panel .lb td:nth-child(1) { padding-left: calc(var(--u) * 14.7); }
.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(3) { padding-right: calc(var(--u) * 5.5); }
.lb-panel .lb th:nth-child(4), .lb-panel .lb td:nth-child(4) { width: calc(var(--u) * 125); }
.lb-panel .lb th:nth-child(4) { padding-right: calc(var(--u) * 17); }
.lb-panel .lb td:nth-child(4) { padding-right: calc(var(--u) * 29); }
.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) * 141); top: calc(var(--u) * 450); width: calc(var(--u) * 800); height: calc(var(--u) * 840);
  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); }
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: 600 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: 600; letter-spacing: -0.05em; line-height: 1;
}
.howto-card .ex span[class] { border-color: transparent; color: #fff; }
.howto-card .ex-cap { margin-bottom: calc(var(--u) * var(--hk) * 15.5); }
.howto-card b { font-weight: 600; }
.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: 600; }
.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: 0 calc(var(--u) * var(--mk) * 36); font-size: calc(var(--u) * var(--mk) * 30); }
.modal-actions .btn-outline { font-weight: 600; }

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