/* Locksystem experience — branded stepped apps (survey + kiosk). */

/* Blank template: no theme chrome. Reset body and make the app fill the screen. */
html, body.lscf-blank { overflow-x: hidden; }
body.lscf-blank { margin: 0 !important; padding: 0 !important; background: #f4f5f7; }
body.lscf-blank .lscf-app { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
body.lscf-blank .lscf-setup { padding: 24px 16px; }
/* Remove footers/flair (Jetpack sharing & likes, related posts, admin bar). */
body.lscf-blank #jp-post-flair,
body.lscf-blank .sharedaddy,
body.lscf-blank .sd-like,
body.lscf-blank .sharing,
body.lscf-blank .jp-relatedposts,
body.lscf-blank #wpadminbar { display: none !important; }
html.lscf-blank-html { margin-top: 0 !important; }


/* Full-screen takeover: hide theme chrome on pages that host an experience. */
html.lscf-html-active, body.lscf-body-active { margin: 0 !important; }
body.lscf-body-active #wpcom-gifting-banner,
body.lscf-body-active .wp-site-blocks > header.wp-block-template-part,
body.lscf-body-active .wp-site-blocks > footer.wp-block-template-part,
body.lscf-body-active > footer.wp-block-template-part,
body.lscf-body-active .wp-block-post-title,
body.lscf-body-active .entry-content > .sharedaddy,
body.lscf-body-active .entry-content > .sd-like { display: none !important; }
body.lscf-body-active .wp-site-blocks { min-height: 100vh; min-height: 100svh; padding-left: 0 !important; padding-right: 0 !important; }
body.lscf-body-active main.wp-block-group, body.lscf-body-active .entry-content { margin-top: 0 !important; max-width: none !important; width: 100% !important; padding: 0 !important; }
body.lscf-body-active .entry-content > .lscf-app.alignfull, body.lscf-body-active .lscf-app.alignfull { width: 100vw !important; max-width: none !important; margin: 0 calc(50% - 50vw) !important; }


.lscf-app{
  --lscf-bg: var(--lscf-brand-bg, #080c1b);
  --lscf-fg: var(--lscf-brand-text, #ffffff);
  --lscf-font: var(--lscf-brand-font, 'Montserrat', Arial, sans-serif);
  --lscf-accent: var(--lscf-brand-accent, #d468f1);
  --lscf-accent2: var(--lscf-brand-accent2, #bf61ea);
  --lscf-btn-text: var(--lscf-brand-btn-text, #ffffff);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(16px, 4vw, 48px);
  /* Respect mobile safe areas, and pad the bottom so the last button clears the
     browser URL bar / iOS home indicator (the reported "button covered" bug on
     Android Chrome and iOS Safari). Needs viewport-fit=cover (set in blank.php).
     NOTE: env(safe-area-inset-bottom) only covers the home indicator (~0–34px); it
     does NOT account for iOS 26 Safari's floating Liquid-Glass toolbar (~50–60px,
     more when expanded), which overlays the page and CLIPS bottom content. The real
     toolbar clearance is added as a flat px floor in the phone media query below. */
  padding-top: max(clamp(16px, 4vw, 48px), calc(env(safe-area-inset-top) + 12px));
  padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right));
  padding-bottom: max(clamp(16px, 4vw, 48px), calc(env(safe-area-inset-bottom) + 32px));
  scroll-padding-bottom: 120px;
  background: var(--lscf-bg);
  color: var(--lscf-fg);
  font-family: var(--lscf-font);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  touch-action: manipulation; /* disable double-tap-to-zoom on iOS within the widget */
}
.lscf-app *, .lscf-app *::before, .lscf-app *::after { box-sizing: border-box; }
/* Scroll-safe vertical centering: centred when short, scrolls when tall (mobile). */
.lscf-app__inner{ margin: auto; }

.lscf-app__bg{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--lscf-accent) 22%, transparent), transparent 30%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--lscf-accent2) 16%, transparent), transparent 28%);
  animation: lscf-bgdrift 30s ease-in-out infinite;
}
@keyframes lscf-bgdrift{ 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.15) translate(2%,2%)} }

.lscf-app__inner{
  position: relative; z-index: 1;
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* Lock connection indicator (kiosk) */
.lscf-conn{ position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 5; display: flex; align-items: center; gap: 7px; font-family: var(--lscf-font); font-size: 12px; letter-spacing: .03em; color: var(--lscf-fg); opacity: .75; }
.lscf-conn__dot{ width: 9px; height: 9px; border-radius: 50%; background: #888; transition: background .3s; }
.lscf-conn.is-ok   .lscf-conn__dot{ background: #00e676; box-shadow: 0 0 6px #00e676; }
.lscf-conn.is-wait .lscf-conn__dot{ background: #ffc400; animation: lscf-blink 1s infinite; }
.lscf-conn.is-err  .lscf-conn__dot{ background: #ff1744; }
@keyframes lscf-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Top-left X (kiosk): skip the idle timeout and jump straight back to the start / attract-video
   screen. Hidden while already on the intro step. Mirrors the .lscf-conn indicator's placement. */
.lscf-home{ position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 6;
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--lscf-fg);
  background: rgba(127,127,127,.18); opacity: .7; -webkit-tap-highlight-color: transparent;
  transition: opacity .2s, background .2s, transform .1s; }
.lscf-home:hover{ opacity: 1; background: rgba(127,127,127,.32); }
.lscf-home:active{ transform: scale(.92); }
.lscf-app.is-intro .lscf-home{ display: none; }

/* Live event dashboard on the branded (dark) experience pages — Box Controls page.
   The setup page styles .lscf-dash with its own light inline CSS; these rules are scoped
   under .lscf-app so they apply only on the branded pages and never touch the setup page. */
.lscf-app .lscf-dash{ width:100%; max-width:640px; margin:0 auto 6px; text-align:left;
  border:1px solid rgba(255,255,255,.18);
  border:1px solid color-mix(in srgb, var(--lscf-fg) 18%, transparent);
  border-radius:14px; padding:16px 18px;
  background:rgba(255,255,255,.04);
  background:color-mix(in srgb, var(--lscf-fg) 5%, transparent);
  font-family:var(--lscf-font); color:var(--lscf-fg); }
.lscf-app .lscf-dash__top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.lscf-app .lscf-dash__badge{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.82rem; letter-spacing:.06em; padding:6px 14px; border-radius:999px; text-transform:uppercase; background:rgba(255,255,255,.12); color:var(--lscf-fg); }
.lscf-app .lscf-dash__dot{ width:10px; height:10px; border-radius:50%; background:#888; }
.lscf-app .lscf-dash[data-state=live] .lscf-dash__badge{ background:rgba(0,200,83,.20); color:#7dffb0; }
.lscf-app .lscf-dash[data-state=live] .lscf-dash__dot{ background:#00e676; box-shadow:0 0 7px #00e676; animation:lscf-blink 1.2s infinite; }
.lscf-app .lscf-dash[data-state=paused] .lscf-dash__badge{ background:rgba(255,149,0,.22); color:#ffcf8a; }
.lscf-app .lscf-dash[data-state=paused] .lscf-dash__dot{ background:#ff9500; box-shadow:0 0 7px #ff9500; animation:lscf-blink 1.2s infinite; }
.lscf-app .lscf-dash[data-state=ended] .lscf-dash__badge{ background:rgba(255,82,82,.22); color:#ff9a93; }
.lscf-app .lscf-dash[data-state=ended] .lscf-dash__dot{ background:#ff5252; }
.lscf-app .lscf-dash__count{ font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; }
.lscf-app .lscf-dash__prizes{ display:flex; gap:18px; flex-wrap:wrap; }
.lscf-app .lscf-dash__prize{ flex:1; min-width:200px; }
.lscf-app .lscf-dash__prize-h{ font-size:.9rem; font-weight:600; margin-bottom:6px; }
.lscf-app .lscf-dash__bar{ height:10px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.14);
  background:color-mix(in srgb, var(--lscf-fg) 14%, transparent); }
.lscf-app .lscf-dash__bar>span{ display:block; height:100%; width:0; background:var(--lscf-accent); transition:width .4s ease; }
.lscf-app .lscf-dash__next{ margin-top:12px; font-size:.9rem; opacity:.75; }

.lscf-app__logo{ margin-bottom: clamp(18px, 4vh, 40px); min-height: 1px; }
.lscf-app__logo img.lscf-logo{ max-height: 84px; max-width: 60vw; width: auto; height: auto; }
.lscf-branding{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.8rem; letter-spacing:.04em; }
.lscf-branding__mark{ padding:6px 12px 7px; border-radius:999px; background:linear-gradient(135deg,var(--lscf-accent2),var(--lscf-accent)); color:#fff; line-height:1; }

/* Steps */
.lscf-step{ display:none; width:100%; flex-direction:column; align-items:center; gap:18px; animation: lscf-fade .4s ease both; }
.lscf-step.is-active{ display:flex; }
@keyframes lscf-fade{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

/* Kiosk attract-loop video (start screen). Fills the whole viewport; tap anywhere to enter a code. */
.lscf-step--video{ position:fixed; inset:0; width:100%; height:100%; gap:0; padding:0; cursor:pointer; z-index:4; }
.lscf-attract{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
/* While the attract video is showing, hide the logo header so the video is unobstructed. */
.lscf-kiosk.is-attract .lscf-app__logo{ display:none; }

.lscf-h1{ margin:0; font-size:clamp(1.8rem,5vw,3rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
.lscf-h2{ margin:0; font-size:clamp(1.4rem,3.5vw,2rem); font-weight:800; }
.lscf-sub{ margin:0; font-size:clamp(1rem,2vw,1.2rem); opacity:.82; max-width:32ch; line-height:1.6; }

/* ---- Per-page / per-role branding (font, size, colour) --------------------
   Values come from CSS variables emitted per page by render_brand_styles()
   (--lscf-title/heading/body/button-font|size|color). Scoped under .lscf-app and
   marked !important so the active WordPress theme's CSS can never override the
   experience's own branding (the "theme settings override the plugin" bug).
   Contained to .lscf-app, so the !important cannot leak to the rest of the site.
   A blank variable falls back to the responsive default inside var(). */
.lscf-app .lscf-h1{
  font-family: var(--lscf-title-font, var(--lscf-font)) !important;
  font-size: var(--lscf-title-size, clamp(1.8rem,5vw,3rem)) !important;
  color: var(--lscf-title-color, var(--lscf-fg)) !important;
}
.lscf-app .lscf-h2{
  font-family: var(--lscf-heading-font, var(--lscf-font)) !important;
  font-size: var(--lscf-heading-size, clamp(1.4rem,3.5vw,2rem)) !important;
  color: var(--lscf-heading-color, var(--lscf-fg)) !important;
}
.lscf-app .lscf-sub{
  font-family: var(--lscf-body-font, var(--lscf-font)) !important;
  font-size: var(--lscf-body-size, clamp(1rem,2vw,1.2rem)) !important;
  color: var(--lscf-body-color, var(--lscf-fg)) !important;
}
/* Body role governs the paragraphs + consent line only (field labels & inputs have
   their own roles below, so changing "Body text" no longer secretly resizes labels). */
.lscf-app .lscf-check{
  font-family: var(--lscf-body-font, var(--lscf-font)) !important;
  color: var(--lscf-body-color, var(--lscf-fg)) !important;
}
/* Form field LABELS (the caption above each box, e.g. "Full name"). Blank font/colour
   inherit the body role; blank size keeps the original .95rem so labels stay label-sized
   unless the operator opts in. */
.lscf-app .lscf-label{
  font-family: var(--lscf-label-font, var(--lscf-body-font, var(--lscf-font))) !important;
  font-size: var(--lscf-label-size, .95rem) !important;
  color: var(--lscf-label-color, var(--lscf-body-color, var(--lscf-fg))) !important;
}
.lscf-app .lscf-label__title{
  font-family: var(--lscf-label-font, var(--lscf-body-font, var(--lscf-font))) !important;
  font-size: inherit !important;
  color: var(--lscf-label-color, var(--lscf-body-color, var(--lscf-fg))) !important;
}
.lscf-app .lscf-req{ font-size: inherit !important; color: inherit !important; }
/* What people TYPE + the grey placeholder hint. font-size is floored at 16px via max()
   so iOS Safari never auto-zooms on focus, even if the operator sets a smaller number. */
.lscf-app .lscf-label input[type=text], .lscf-app .lscf-label input[type=email], .lscf-app .lscf-label select{
  font-family: var(--lscf-input-font, var(--lscf-body-font, var(--lscf-font))) !important;
  font-size: max(16px, var(--lscf-input-size, 16px)) !important;
  color: var(--lscf-input-color, var(--lscf-fg)) !important;
}
.lscf-app .lscf-label select option{
  font-family: var(--lscf-input-font, var(--lscf-body-font, var(--lscf-font))) !important;
  color: var(--lscf-input-color, var(--lscf-fg)) !important;
}
/* Placeholder colour = a faded version of the input colour. Each vendor pseudo MUST be its
   own rule block — one unknown selector in a grouped list invalidates the whole rule in
   Safari/Firefox. opacity:1 cancels Firefox's default placeholder dimming. */
.lscf-app .lscf-label input::placeholder{ color: color-mix(in srgb, var(--lscf-input-color, var(--lscf-fg)) 55%, var(--lscf-bg)) !important; opacity: 1 !important; }
.lscf-app .lscf-label input::-webkit-input-placeholder{ color: color-mix(in srgb, var(--lscf-input-color, var(--lscf-fg)) 55%, var(--lscf-bg)) !important; }
.lscf-app .lscf-label input::-moz-placeholder{ color: color-mix(in srgb, var(--lscf-input-color, var(--lscf-fg)) 55%, var(--lscf-bg)) !important; opacity: 1 !important; }
.lscf-app .lscf-label input:-ms-input-placeholder{ color: color-mix(in srgb, var(--lscf-input-color, var(--lscf-fg)) 55%, var(--lscf-bg)) !important; }
.lscf-app .lscf-label select option:first-child{ color: color-mix(in srgb, var(--lscf-input-color, var(--lscf-fg)) 55%, var(--lscf-bg)) !important; }
.lscf-app .lscf-btn{
  font-family: var(--lscf-button-font, var(--lscf-font)) !important;
  font-size: var(--lscf-button-size, 1.05rem) !important;
  color: var(--lscf-button-color, var(--lscf-btn-text)) !important;
}
.lscf-app .lscf-btn--xl{
  font-size: var(--lscf-button-size, 1.2rem) !important;
}
/* Ghost buttons have a transparent background, so their text must stay the page
   foreground colour (not the solid-button auto-contrast colour). */
.lscf-app .lscf-btn--ghost{
  color: var(--lscf-button-color, var(--lscf-fg)) !important;
}
.lscf-app .lscf-bigcode{
  font-family: var(--lscf-title-font, var(--lscf-font)) !important;
  color: var(--lscf-title-color, var(--lscf-fg)) !important;
}
/* Kiosk win/lose RESULT screen (heading, prize name, note). Blank inherits body/page.
   The big-win heading keeps its gradient until a result colour is set, then the chosen
   colour overrides the gradient text-fill. */
.lscf-app .lscf-result__heading, .lscf-app .lscf-result__prize, .lscf-app .lscf-result__note{
  font-family: var(--lscf-result-font, var(--lscf-body-font, var(--lscf-font))) !important;
  color: var(--lscf-result-color, var(--lscf-fg)) !important;
}
.lscf-app .lscf-result__heading{ font-size: var(--lscf-result-size, clamp(1.8rem,5vw,2.6rem)) !important; }
.lscf-app .lscf-result__prize{ font-size: var(--lscf-result-size, clamp(1.3rem,4vw,2rem)) !important; }
.lscf-app .lscf-result__note{ font-size: var(--lscf-result-size, clamp(1rem,2.4vw,1.3rem)) !important; }
.lscf-app .lscf-result__heading--big{ -webkit-text-fill-color: var(--lscf-result-color, transparent); }

/* Buttons — flat, minimalistic (no glow). Text colour auto-contrasts. */
.lscf-btn{
  appearance:none; border:0; cursor:pointer; font-family:inherit; color:var(--lscf-btn-text);
  background:var(--lscf-accent);
  border-radius:999px; font-weight:800; letter-spacing:.02em;
  padding:16px 30px; font-size:1.05rem;
  transition:transform .12s ease, filter .15s ease;
  box-shadow:none;
}
.lscf-btn--xl{ padding:20px 40px; font-size:1.2rem; }
.lscf-btn:hover:not(:disabled){ filter:brightness(1.04); transform:translateY(-1px); }
.lscf-btn:active:not(:disabled){ transform:scale(.97); }
.lscf-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.lscf-btn--ghost{
  background:transparent; color:var(--lscf-fg);
  border:1px solid color-mix(in srgb, var(--lscf-fg) 35%, transparent);
  box-shadow:none;
}

/* Survey form fields */
.lscf-label{ display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; max-width:420px; font-weight:600; font-size:.95rem; }
.lscf-label input[type=text], .lscf-label input[type=email], .lscf-label select{
  width:100%; min-height:54px; padding:0 16px; border-radius:14px; font-size:1.05rem; font-family:inherit;
  border:1px solid rgba(255,255,255,.24);
  border:1px solid color-mix(in srgb, var(--lscf-fg) 24%, transparent);
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--lscf-fg) 6%, transparent); color:var(--lscf-fg);
  appearance:none; -webkit-appearance:none;
}
.lscf-label select{
  background-image:linear-gradient(45deg, transparent 50%, var(--lscf-fg) 50%), linear-gradient(135deg, var(--lscf-fg) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right:36px;
}
/* Style the native open dropdown list. Browsers render <option> in a system popup
   that does NOT inherit the parent's translucent background, so we must set both
   background AND text colour explicitly — otherwise white-on-white = invisible. */
.lscf-label select option{
  background-color: var(--lscf-bg);
  color: var(--lscf-fg);
}
.lscf-label select option:checked,
.lscf-label select option:hover{
  background-color: color-mix(in srgb, var(--lscf-accent) 25%, var(--lscf-bg));
  color: var(--lscf-fg);
}
.lscf-label input:focus, .lscf-label select:focus{ outline:none; border-color:var(--lscf-accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--lscf-accent) 18%, transparent); }
.lscf-check{ display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; max-width:420px; font-size:.92rem; line-height:1.5; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* flex-gap fallback for iOS < 14.5 (gap is dropped there) — space the box from the text with a margin instead. */
@supports not (gap:1px){ .lscf-check > input{ margin-right:12px; } }
/* Custom checkbox. -webkit-appearance:none is REQUIRED on iOS, or it ignores width/height and renders
   a tiny ~13px native box. Box, border, fill and checkmark use LITERAL colours first, then var()/
   color-mix as progressive enhancement, so the control is fully visible and the checked state obvious
   even on iOS < 16.2 (no color-mix) and iOS < 15.4 (no accent-color) — the old "invisible checkbox" bug. */
.lscf-check input[type=checkbox]{
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  position:relative; flex:0 0 auto; display:inline-block; vertical-align:top;
  width:24px; height:24px; min-width:24px; min-height:24px; margin:1px 0 0; padding:0;
  border:2px solid #d468f1;
  border:2px solid var(--lscf-accent, #d468f1);
  border-radius:6px;
  background:rgba(212,104,241,.10);
  background:color-mix(in srgb, var(--lscf-accent) 10%, transparent);
  cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
/* >=44px invisible tap target (Apple HIG) without enlarging the visible 24px box. */
.lscf-check input[type=checkbox]::after{ content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
/* Checked: solid accent fill (literal first) so the on-state is unmistakable even with no accent-color support. */
.lscf-check input[type=checkbox]:checked{
  background:#d468f1;
  background:var(--lscf-accent, #d468f1);
  border-color:#d468f1;
  border-color:var(--lscf-accent, #d468f1);
}
/* Drawn checkmark — pure border trick, no accent-color / mask dependency. Colour uses the
   brand auto-contrast value (white on dark accents, the bg colour on light accents) so the
   tick stays visible even when the accent (= the fill) is very light/white. */
.lscf-check input[type=checkbox]:checked::before{
  content:''; position:absolute; left:7px; top:3px; width:6px; height:11px;
  border-style:solid; border-width:0 3px 3px 0;
  border-color:#fff;
  border-color:var(--lscf-btn-text, #fff);
  transform:rotate(45deg); box-sizing:border-box;
}
.lscf-check input[type=checkbox]:focus-visible{ outline:3px solid #d468f1; outline:3px solid var(--lscf-accent, #d468f1); outline-offset:2px; }
/* Consent box: literal rgba() border+background FIRST (always valid, visible on iOS < 16.2), color-mix
   SECOND so iOS 16.2+ / Chrome 111+ upgrade to the token-tinted version. */
.lscf-check--consent{ padding:12px 14px; border-radius:14px;
  border:1px solid rgba(212,104,241,.30);
  background:rgba(212,104,241,.08);
  border:1px solid color-mix(in srgb, var(--lscf-accent) 30%, transparent);
  background:color-mix(in srgb, var(--lscf-accent) 8%, transparent);
}
.lscf-check a{ color:var(--lscf-accent); text-decoration:underline; text-underline-offset:2px; }
.lscf-alert{ width:100%; max-width:420px; padding:12px 16px; border-radius:12px; background:rgba(255,60,60,.14); border:1px solid rgba(255,60,60,.4); font-size:.95rem; }

/* Big code reveal (survey) */
.lscf-bigcode{ font-size:clamp(3rem,12vw,6rem); font-weight:800; letter-spacing:.18em; line-height:1; font-variant-numeric:tabular-nums; }
.lscf-bigcode--gen{ opacity:.85; filter:blur(.4px); }
.lscf-pop{ animation: lscf-pop .55s cubic-bezier(.2,.8,.2,1) both; }

/* Keypad (kiosk) */
.lscf-cells{ display:flex; gap:12px; justify-content:center; margin:6px 0 10px; }
.lscf-cell{
  width:clamp(44px,11vw,64px); height:clamp(60px,15vw,86px); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(2rem,7vw,3rem); font-weight:800;
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb, var(--lscf-fg) 7%, transparent);
  border:2px solid rgba(255,255,255,.18);
  border:2px solid color-mix(in srgb, var(--lscf-fg) 18%, transparent);
}
.lscf-cell.is-filled{ border-color:var(--lscf-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--lscf-accent) 16%, transparent); }
.lscf-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:360px; }
.lscf-key{
  appearance:none; cursor:pointer; font-family:inherit; color:var(--lscf-fg);
  min-height:clamp(56px,12vw,74px); border-radius:16px; font-size:1.7rem; font-weight:700;
  border:1px solid rgba(255,255,255,.16);
  border:1px solid color-mix(in srgb, var(--lscf-fg) 16%, transparent);
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--lscf-fg) 6%, transparent);
  transition:transform .08s ease, background .15s ease;
}
.lscf-key:active{ transform:scale(.94); background:color-mix(in srgb, var(--lscf-accent) 24%, transparent); }
.lscf-key--util{ font-size:1.3rem; opacity:.85; }

/* Suspense */
.lscf-suspense{ position:relative; width:200px; height:200px; display:flex; align-items:center; justify-content:center; }
.lscf-suspense__ring{ position:absolute; inset:0; border-radius:50%; border:4px solid transparent; border-top-color:var(--lscf-accent); animation:lscf-spin 1.1s linear infinite; }
.lscf-suspense__ring:nth-child(2){ inset:22px; border-top-color:var(--lscf-accent2); animation-duration:1.6s; animation-direction:reverse; }
.lscf-suspense__ring:nth-child(3){ inset:44px; border-top-color:#fff; animation-duration:2s; }
.lscf-suspense__digit{ font-size:3.4rem; font-weight:800; }
@keyframes lscf-spin{ to{ transform:rotate(360deg); } }

/* Kiosk "checking" loader — clean spinner with a pulsing core (no random digits) */
.lscf-loader{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; margin: 8px auto 4px; }
.lscf-loader__ring{ position:absolute; inset:0; border-radius:50%; border:5px solid color-mix(in srgb, var(--lscf-fg) 18%, transparent); border-top-color:var(--lscf-accent); animation:lscf-spin 0.9s linear infinite; }
.lscf-loader__core{ width:22px; height:22px; border-radius:50%; background:var(--lscf-accent); animation:lscf-corepulse 1.2s ease-in-out infinite; }
@keyframes lscf-corepulse{ 0%,100%{ transform:scale(.7); opacity:.6; } 50%{ transform:scale(1.1); opacity:1; } }
.lscf-dots::after{ content:''; animation:lscf-dots 1.4s steps(4,end) infinite; }
@keyframes lscf-dots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} 100%{content:'';} }

/* Result */
.lscf-result{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.lscf-result__icon{ font-size:clamp(3rem,10vw,5rem); line-height:1; animation:lscf-pop .5s ease both; }
.lscf-result__icon--big{ font-size:clamp(4.5rem,18vw,9rem); animation:lscf-pop .5s ease both, lscf-bounce 1.4s ease-in-out .5s infinite; }
@keyframes lscf-pop{ 0%{transform:scale(0); opacity:0} 70%{transform:scale(1.2)} 100%{transform:scale(1); opacity:1} }
@keyframes lscf-bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.lscf-result__heading{ margin:0; font-size:clamp(1.8rem,5vw,2.6rem); font-weight:800; }
.lscf-result__heading--big{ font-size:clamp(2.4rem,8vw,4rem); background:linear-gradient(135deg,var(--lscf-accent2),var(--lscf-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lscf-result__prize{ margin:0; font-size:clamp(1.3rem,4vw,2rem); font-weight:700; }
.lscf-result__note{ margin:0; font-size:clamp(1rem,2.4vw,1.3rem); opacity:.85; max-width:30ch; line-height:1.5; }

/* Mobile tuning */
@media (max-width: 600px){
  .lscf-app{
    padding: 16px 14px;
    padding-top: max(16px, calc(env(safe-area-inset-top) + 10px));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    /* iOS 26 Safari floating toolbar clearance: the bar overlays/clips the bottom
       ~50–60px of the page (more when the URL pill is tapped/expanded), and
       env(safe-area-inset-bottom) reports ~0px while it's visible. Reserve a flat
       110px floor so the last button's resting position is always above the bar;
       add the home-indicator inset on top of that. Phones only (<=600px) — the
       iPad kiosk (>=768px) has a TOP toolbar and is excluded by this breakpoint. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  }
  /* NOTE: .lscf-app__inner{margin:auto} centering is intentionally KEPT. The 110px
     padding-bottom lives outside the flex content box, and .lscf-app grows so the
     BODY scrolls (it never scrolls internally) — so the clearance is always honoured:
     a short step centres with the button well above the bar, a tall form top-aligns
     and scrolls with 110px below the button. No need to disable centering. */
  .lscf-app__logo{ margin-bottom: 18px; }
  .lscf-app__logo img.lscf-logo{ max-height: 60px; max-width: 70vw; }
  .lscf-app .lscf-h1{ font-size: var(--lscf-title-size, clamp(1.6rem, 7.5vw, 2.3rem)) !important; }
  .lscf-app .lscf-h2{ font-size: var(--lscf-heading-size, clamp(1.25rem, 6vw, 1.7rem)) !important; }
  .lscf-app .lscf-sub{ font-size: var(--lscf-body-size, 1rem) !important; }
  .lscf-bigcode{ letter-spacing: .1em; }
  .lscf-suspense{ width: 150px; height: 150px; }
  .lscf-suspense__digit{ font-size: 2.6rem; }
  .lscf-btn--xl{ width: 100%; max-width: 340px; padding: 18px 24px; }
  .lscf-label, .lscf-check{ max-width: 100%; }
  .lscf-keypad{ max-width: 320px; }
  .lscf-cells{ gap: 8px; }
  .lscf-conn{ top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); font-size: 11px; }
  .lscf-home{ top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); width: 36px; height: 36px; }
}
/* Inputs at >=16px so iOS doesn't zoom on focus. */
.lscf-label input[type=text], .lscf-label input[type=email], .lscf-label select, .lscf-entry-code-input { font-size: 16px; }
/* When a field is focused and the on-screen keyboard opens, keep the field + its
   submit button scrolled into view above the keyboard (Android resize / iOS). */
.lscf-label input, .lscf-label select, .lscf-check { scroll-margin-bottom: 120px; }

/* Landscape phones are WIDER than the 600px portrait breakpoint above, so they miss
   that bottom-clearance rule — but they still have the browser's bottom toolbar. Keep
   the survey's bottom button clear of it in landscape too. Height-gated so it never
   touches iPad (height > 520 in both orientations) or the kiosk. */
@media (max-width: 932px) and (max-height: 520px){
  .lscf-survey{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
}

/* ============================================================
   Tablet / iPad — make the KIOSK (code-entry) fill the screen.
   Scoped to .lscf-kiosk so the survey/registration form is unaffected.
   Sizes are driven mostly by viewport HEIGHT (vh) so the keypad scales to
   fit BOTH portrait (tall → large) and landscape (short → moderate) without
   ever needing to scroll. (A width-only breakpoint would blow up landscape,
   which is wide but short.)
   ============================================================ */
@media (min-width: 768px){
  /* Vertically centre the kiosk block so it doesn't bunch at the top with empty space below. */
  .lscf-kiosk{ justify-content: center; }
  .lscf-kiosk .lscf-app{ padding: clamp(12px, 2.5vh, 40px) clamp(16px, 4vw, 48px); }
  .lscf-kiosk .lscf-app__inner{ max-width: 760px; }
  .lscf-kiosk .lscf-app__logo{ margin-bottom: clamp(6px, 1.6vh, 30px); }
  .lscf-kiosk .lscf-app__logo img.lscf-logo{ max-height: clamp(52px, 8vh, 104px); }
  .lscf-kiosk .lscf-step{ gap: clamp(12px, 2.1vh, 32px); }
  .lscf-kiosk .lscf-h2{ font-size: var(--lscf-heading-size, clamp(1.6rem, 3.8vh, 2.7rem)) !important; }
  .lscf-kiosk .lscf-cells{ gap: clamp(10px, 1.5vh, 18px); }
  .lscf-kiosk .lscf-cell{
    width: clamp(58px, 7.6vh, 108px);
    height: clamp(78px, 10.8vh, 148px);
    border-radius: 16px;
    font-size: clamp(2.3rem, 5.8vh, 4.3rem);
  }
  .lscf-kiosk .lscf-keypad{ max-width: clamp(420px, 56vh, 620px); gap: clamp(9px, 1.5vh, 20px); }
  .lscf-kiosk .lscf-key{ min-height: clamp(58px, 9.4vh, 128px); border-radius: 18px; font-size: clamp(1.7rem, 3.9vh, 2.8rem); }
  .lscf-kiosk .lscf-btn--xl{ padding: clamp(14px, 2.2vh, 28px) clamp(40px, 6vw, 72px); font-size: var(--lscf-button-size, clamp(1.2rem, 3vh, 1.7rem)) !important; }
  /* Result screen scales with height too (honours a custom result size when set). */
  .lscf-kiosk .lscf-result__heading{ font-size: var(--lscf-result-size, clamp(2.2rem, 6vh, 3.4rem)) !important; }
  .lscf-kiosk .lscf-result__heading--big{ font-size: var(--lscf-result-size, clamp(3rem, 9vh, 5rem)) !important; }
  .lscf-kiosk .lscf-result__prize{ font-size: var(--lscf-result-size, clamp(1.6rem, 4.5vh, 2.6rem)) !important; }
  .lscf-kiosk .lscf-result__note{ font-size: var(--lscf-result-size, clamp(1.2rem, 3vh, 1.7rem)) !important; max-width: 36ch; }
}