/* ══════════════════════════════════════════════════════════════════════
   IODEX kiosk game — 9:16 (1080 × 1920 design canvas)
   Every coordinate below is measured off the supplied artwork, so the
   live elements land exactly on top of the printed ones.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green:        #0C9146;   /* flat brand green            */
  --green-deep:   #06642F;
  --green-mid:    #0A7A3C;
  --green-ink:    #0B5B2E;
  --yellow:       #FBEB09;   /* HUD digits / brand accent   */
  --gold-hi:      #E7E2CE;   /* SUBMIT gradient, sampled    */
  --gold-lo:      #8B9B3E;
  --ink:          #060808;   /* input text                  */
  --red:          #ED1C24;   /* pain marker                 */
  --blue-a:       #22599C;
  --blue-b:       #3D9DD7;
  --blue-c:       #2F5083;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* class-level `display` outranks the UA's [hidden] rule — restore it */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: #05341A;
  overflow: hidden;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }

img { display: block; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── stage: 1080×1920 scaled to fit, letter-boxed ─────────────────── */
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 0; top: 0;
  width: 1080px; height: 1920px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--green);
  box-shadow: 0 0 90px rgba(0,0,0,.55);
}

.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease;
}
.screen.is-active { opacity: 1; visibility: visible; }
.plate { position: absolute; inset: 0; width: 1080px; height: 1920px; }

/* ═══════════════════════════ 1 · SPLASH ═════════════════════════════ */
.touch-hint {
  position: absolute; left: 0; top: 1330px; width: 1080px;
  text-align: center;
  font-size: 42px; font-weight: 700; letter-spacing: 11px;
  color: var(--yellow);
  text-shadow: 0 3px 16px rgba(0,0,0,.35);
  animation: hintPulse 2.1s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ═══════════════════════ 2 · REGISTRATION ═══════════════════════════ */
/* pills sit exactly over the printed white fields */
.pill {
  position: absolute; left: 107px; width: 866px; height: 108px;
  background: #fff; border-radius: 54px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .18s ease, transform .18s ease;
}
#f-name   { top: 166px; }
#f-mobile { top: 432px; }
#f-city   { top: 696px; }
.pill.is-focus { box-shadow: 0 0 0 7px var(--yellow), 0 0 34px 6px rgba(251,235,9,.45); }
.pill.is-bad   { box-shadow: 0 0 0 7px var(--red), 0 0 34px 6px rgba(237,28,36,.45); }

.pill-in { display: inline-flex; align-items: center; max-width: 800px; }
.pill-txt {
  font-size: 54px; font-weight: 800; letter-spacing: 1px;
  color: var(--ink); white-space: pre; line-height: 1;
  overflow: hidden; text-overflow: clip;
}
.pill-txt.is-empty { color: #B9BFB8; font-weight: 700; }
.caret {
  width: 5px; height: 58px; margin-left: 4px; border-radius: 3px;
  background: var(--green-ink); opacity: 0;
}
.pill.is-focus .caret { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.field-msg {
  position: absolute; left: 107px; top: 826px; width: 866px;
  text-align: center; font-size: 30px; font-weight: 700;
  color: #FFE9A6; opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.field-msg.is-on { opacity: 1; }

/* consent box — sits exactly on the printed 49×49 outline, ticked by default */
.consent {
  position: absolute; left: 169px; top: 939px; width: 49px; height: 49px;
  display: grid; place-items: center;
}
.consent::before {                      /* comfortable touch target */
  content: ''; position: absolute; inset: -34px -30px -34px -40px;
}
.consent::after {                       /* covers the printed empty box */
  content: ''; position: absolute; inset: 0;
  border: 2px solid #fff;
  background: transparent; transition: background .16s ease;
}
.consent svg {
  position: relative; z-index: 1; width: 38px; height: 38px;
  fill: none; stroke: var(--green-ink); stroke-width: 15;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset .22s ease;
}
.consent[aria-pressed="true"]::after { background: var(--yellow); border-color: var(--yellow); }
.consent[aria-pressed="true"] svg { stroke-dashoffset: 0; }

/* ── sprite buttons (SUBMIT / START), lifted straight off the artwork ── */
.sprite-btn {
  position: absolute; display: block;
  transition: transform .12s ease, filter .2s ease;
}
.sprite-btn:active { transform: scale(.965); }
.sprite-btn.is-off { filter: grayscale(.7) brightness(.62); }
.sprite-btn.is-off:active { transform: none; }

#btn-submit { left: 335px; top: 1091px; width: 411px; height: 98px; }
#btn-start  { left: 381px; top: 1114px; width: 317px; height: 117px; }
#btn-start  { animation: startBreathe 2.4s ease-in-out infinite; }
@keyframes startBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
#btn-start:active { animation: none; transform: scale(.965); }

/* ══════════════════════════ 3 · GAME HUD ════════════════════════════ */
.hud {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.hud-time  { left: 63px;  top: 364px; width: 287px; height: 85px; font-size: 86px; }
.hud-score { left: 697px; top: 363px; width: 234px; height: 83px; font-size: 108.6px; }
.hud-time.is-low  { color: #FFD3D3; animation: lowTime .9s ease-in-out infinite; }
@keyframes lowTime { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hud-score.is-bump { animation: bump .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ── pain marker: concentric rings, matching the printed one ──────── */
.marker {
  position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side,
      #fff 0 20.5%,
      var(--red) 20.5% 34%,
      #F58769 34% 38.5%,
      var(--red) 38.5% 47%,
      #F58A6D 47% 51.5%,
      #EE2E2A 51.5% 60%,
      #F79C87 60% 72%,
      rgba(247,167,149,.85) 72% 80.5%,
      rgba(250,194,184,.5) 80.5% 89%,
      rgba(250,194,184,0) 89% 100%);
  animation: markerIn .28s cubic-bezier(.2,1.7,.5,1), markerPulse 1.15s ease-in-out .28s infinite;
}
@keyframes markerIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes markerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.13); } }
.marker::after {
  content: ''; position: absolute; inset: -26px; border-radius: 50%;
  border: 4px solid rgba(237,28,36,.55);
  animation: markerHalo 1.15s ease-out infinite;
}
@keyframes markerHalo {
  0%   { transform: scale(.7); opacity: .85; }
  100% { transform: scale(1.5); opacity: 0; }
}
.marker.is-hit  { animation: markerHit .34s ease forwards; }
.marker.is-miss { animation: markerMiss .38s ease forwards; }
@keyframes markerHit  { to { transform: scale(2.1); opacity: 0; } }
@keyframes markerMiss { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-14px); } 75% { transform: translateX(14px); } }

/* ── product jars ─────────────────────────────────────────────────── */
.jar {
  position: absolute; display: block;
  transition: transform .13s ease, filter .18s ease;
}
.jar img { width: 100%; height: 100%; }
.jar::before {                                  /* generous touch target */
  content: ''; position: absolute; inset: -34px -30px;
}
#jar-green { left: 114px; top: 512px; width: 231px; height: 301px; }
#jar-blue  { left: 744px; top: 502px; width: 249px; height: 319px; }
.jar:active           { transform: scale(1.07); }
.jar.is-right  { animation: jarRight .5s ease; }
.jar.is-wrong  { animation: jarWrong .45s ease; }
@keyframes jarRight {
  0%   { transform: scale(1);    filter: none; }
  35%  { transform: scale(1.14); filter: drop-shadow(0 0 30px rgba(251,235,9,.95)) drop-shadow(0 0 60px rgba(251,235,9,.6)); }
  100% { transform: scale(1);    filter: none; }
}
@keyframes jarWrong {
  0%, 100% { transform: translateX(0);   filter: none; }
  20%      { transform: translateX(-20px); filter: drop-shadow(0 0 26px rgba(237,28,36,.9)); }
  60%      { transform: translateX(20px);  filter: drop-shadow(0 0 26px rgba(237,28,36,.9)); }
}

/* ── verdict badge + floating score ───────────────────────────────── */
.verdict {
  position: absolute; left: 50%; top: 1020px;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 50%;
  font-size: 104px; font-weight: 800; color: #fff;
  pointer-events: none;
  animation: verdictIn .42s cubic-bezier(.2,1.7,.5,1);
}
.verdict.ok  { background: rgba(20,150,70,.94);  box-shadow: 0 0 0 10px rgba(251,235,9,.5); }
.verdict.no  { background: rgba(210,26,34,.94);  box-shadow: 0 0 0 10px rgba(255,255,255,.35); }
@keyframes verdictIn { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.floater {
  position: absolute; pointer-events: none;
  font-size: 64px; font-weight: 800; color: var(--yellow);
  text-shadow: 0 3px 12px rgba(0,0,0,.4);
  animation: floatUp .95s ease-out forwards;
}
@keyframes floatUp {
  0%   { transform: translate(-50%, 0)     scale(.6); opacity: 0; }
  22%  { transform: translate(-50%, -26px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -150px) scale(1);  opacity: 0; }
}

/* ── 3‧2‧1 count-in ──────────────────────────────────────────────── */
.countin {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(5,52,26,.55); z-index: 40;
}
.countin span {
  font-size: 340px; font-weight: 800; color: var(--yellow);
  text-shadow: 0 10px 40px rgba(0,0,0,.5);
  animation: countPop .85s ease-out;
}
@keyframes countPop {
  0%   { transform: scale(2.2); opacity: 0; }
  25%  { transform: scale(1);   opacity: 1; }
  75%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.7);  opacity: 0; }
}

/* ═══════════════════════════ 4 · SCORE ══════════════════════════════ */
.sc-name {
  position: absolute; left: 60px; top: 436px; width: 960px;
  text-align: center; font-size: 56px; font-weight: 800; color: #fff;
  letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.sc-label {
  position: absolute; left: 0; top: 524px; width: 1080px;
  text-align: center; font-size: 38px; font-weight: 700;
  letter-spacing: 12px; color: var(--yellow);
}
.sc-pill {
  position: absolute; left: 270px; top: 1288px; width: 540px; height: 168px;
  border-radius: 84px;
  background: linear-gradient(100deg, var(--blue-a) 0%, var(--blue-b) 52%, var(--blue-c) 100%);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.22);
  display: grid; place-items: center;
  animation: scorePop .6s cubic-bezier(.2,1.5,.4,1) .15s both;
}
.sc-pill span {
  font-size: 116px; font-weight: 800; color: var(--yellow); line-height: 1;
  font-variant-numeric: tabular-nums;
}
@keyframes scorePop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sc-detail {
  position: absolute; left: 0; top: 1486px; width: 1080px;
  text-align: center; font-size: 32px; font-weight: 700;
  letter-spacing: 4px; color: rgba(255,255,255,.94);
}
.sc-hint {
  position: absolute; left: 0; top: 1782px; width: 1080px;
  text-align: center; font-size: 30px; font-weight: 600;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(5,52,26,.85), 0 0 22px rgba(5,52,26,.7);
}
.sc-hint b { color: var(--yellow); font-weight: 800; }

/* ═══════════════════════ ON-SCREEN KEYBOARD ═════════════════════════ */
.kb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 24px 26px;
  background: linear-gradient(180deg, var(--green-mid) 0%, var(--green-deep) 100%);
  border-top: 6px solid var(--yellow);
  box-shadow: 0 -18px 48px rgba(0,0,0,.4);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.3,.9,.4,1);
}
.kb.is-open { transform: translateY(0); }
.kb-head {
  height: 74px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; letter-spacing: 9px;
  color: rgba(255,255,255,.72);
}
.kb-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kb-row  { display: flex; gap: 10px; }

.key {
  height: 112px; min-width: 96px; padding: 0 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6ECE3 100%);
  box-shadow: 0 6px 0 #094B27, 0 8px 14px rgba(0,0,0,.28);
  color: var(--green-ink);
  font-size: 46px; font-weight: 800;
  display: grid; place-items: center;
  transition: transform .07s ease, box-shadow .07s ease, background .07s ease;
}
.key.is-down {
  transform: translateY(6px);
  box-shadow: 0 0 0 #094B27, 0 2px 6px rgba(0,0,0,.3);
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-lo) 100%);
  color: #fff;
}
.key--wide  { min-width: 214px; }
.key--space { min-width: 512px; }
.key--gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-lo) 100%);
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.28);
  box-shadow: 0 6px 0 #4E5B21, 0 8px 14px rgba(0,0,0,.28);
}
.key--gold.is-down { box-shadow: 0 0 0 #4E5B21, 0 2px 6px rgba(0,0,0,.3); }
.key--go {
  background: linear-gradient(180deg, #37C46A 0%, #128A42 100%);
  color: #fff; box-shadow: 0 6px 0 #0A5228, 0 8px 14px rgba(0,0,0,.28);
}
.key--go.is-down { box-shadow: 0 0 0 #0A5228, 0 2px 6px rgba(0,0,0,.3); }
.key svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }

/* numeric pad */
.kb--num .key      { height: 130px; min-width: 210px; font-size: 62px; }
.kb--num .kb-row   { gap: 16px; }
.kb--num .kb-body  { gap: 16px; }

/* ── unsent-record flag (kiosk diagnostics) ──────────────────────── */
.net-flag {
  position: absolute; right: 18px; top: 18px; z-index: 90;
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF9800; box-shadow: 0 0 12px rgba(255,152,0,.9);
  animation: hintPulse 1.6s ease-in-out infinite;
}