/* ============================================================================
   piCO × IQOS Kiosk — pixel-perfect redesign (Figma: iqos / Section 1)
   Base canvas is a fixed 1024×768 kiosk stage, scaled to fit the viewport.
   All screen values are taken 1:1 from Figma node 754:7244 (Home) etc.
   ========================================================================== */

/* ---- IQOS brand fonts (provided by client) ---- */
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Georgian companion face ----
   The official IQOS font carries NO Georgian glyphs (verified against the
   files PMI itself serves on ge.iqos.com: 0/48 Mkhedruli codepoints). PMI's
   own Georgian site therefore falls back to whatever the browser picks. We do
   the same thing but pin the fallback, so the kiosk renders identically on
   every machine. The browser substitutes PER GLYPH: Latin, digits and the
   "IQOS" wordmark still come from the IQOS face — only Georgian letters come
   from here. `unicode-range` keeps this face from ever touching Latin. */
@font-face {
  font-family: "IQOSGeorgian";
  src: url("assets/fonts/NotoSansGeorgian-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
@font-face {
  font-family: "IQOSGeorgian";
  src: url("assets/fonts/NotoSansGeorgian-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
@font-face {
  font-family: "IQOSGeorgian";
  src: url("assets/fonts/NotoSansGeorgian-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

/* ---- Design tokens (extracted from Figma) ---- */
:root {
  --bg: #282728;          /* kiosk background */
  --cyan: #00d1d2;        /* primary accent (IQOS) */
  --cyan-glow: #08d1cd;   /* glow color */
  --cyan-bright: #09d0cc; /* device fill */
  --red: #dd4228;         /* cigarette accent */
  --track: #224949;       /* glow track background */
  --white: #ffffff;
  --white-65: rgba(255, 255, 255, 0.65);

  /* "IQOSGeorgian" sits right after IQOS: it only declares Georgian
     unicode-ranges, so it is used exclusively for Mkhedruli glyphs. */
  --font: "IQOS", "IQOSGeorgian", "Montserrat", "Segoe UI", system-ui, sans-serif;

  --stage-w: 1024px;
  --stage-h: 768px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Freeze animations at frame 0 for pixel-diff testing (?still=1). */
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
  transition: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Letterbox wrapper centers the scaled stage on screen */
#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* The fixed-size kiosk canvas; JS scales it via transform */
#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  background: transparent; /* full-window .co-pattern shows through */
  overflow: hidden;
  transform-origin: center center;
  flex: none;
}

/* ---- Shared background CO watermark (present on most screens) ---- */
.co-pattern {
  position: absolute;
  inset: 0; /* full stage */
  /* Subtle CO watermark: a full-screen staggered grid of individual glyphs
     (generated in app.js) that gently twinkle — brighter toward the centre,
     fading out toward the edges. No parent blur (it would force a full-screen
     re-raster every animation frame); the glyphs are faint enough as-is. */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.co-glyph {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 32px; /* ≈ Figma watermark glyph (~45×23px) */
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  opacity: 0.026; /* base shade when animation is disabled (screenshots) */
  animation-name: co-twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes co-twinkle {
  0%, 100% { opacity: var(--o-min, 0.006); }
  50%      { opacity: var(--o-max, 0.02); }
}

/* ---- Screen router ---- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}
.screen.active {
  opacity: 1;
  visibility: visible;
}

/* ---- Shared chrome: IQOS logo + language toggle ---- */
.iqos-logo {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 124px;
  height: 40px;
  transform: translateX(-50%);
  background-image: url("assets/img/logo-iqos.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.lang-toggle {
  position: absolute;
  top: 60px;
  left: 800px; /* Figma: calc(83.33% - 53.33px) on 1024 */
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 2;
}
.lang-btn {
  height: 32px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 46px;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--white-65);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.lang-btn.active {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* ---- Primary pill button (Start / Next) ---- */
.btn-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  border: none;
  border-radius: 46px;
  color: var(--white);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-pill:hover { filter: brightness(1.06); }
.btn-pill:active { transform: translateX(-50%) scale(0.98); }

/* ---- Disclaimer line ---- */
.disclaimer {
  position: absolute;
  top: 688px;
  left: 50%;
  width: 420px;
  height: 48px;
  transform: translate(-50%, -50%); /* Figma centers the block on y=688 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   SCREEN: Home (Figma node 754:7244)
   ========================================================================== */
#screen-home .home-heading {
  position: absolute;
  top: 136px;
  left: 50%;
  width: 568px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: var(--cyan);
  text-align: center;
  word-break: break-word;
}

#screen-home .home-illustration {
  position: absolute;
  /* Crop is 470×330 centered on the Figma illustration center (512,396) to
     include the device base glows that bleed past the 414×273 layout box. */
  top: 231px;
  left: 50%;
  width: 470px;
  height: 330px;
  transform: translateX(-50%);
  /* Base scene WITHOUT molecules — stays static; molecules float on top. */
  background-image: url("assets/img/home-illustration-base.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Feather the crop edges so the soft glow halo dissolves into the bg
     instead of showing a hard rectangular seam. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

/* ---- Animated CO-level fill bars over the bottom tracks ---- */
#screen-home .track-fill {
  position: absolute;
  top: 519px;
  height: 14px;
  border-radius: 100px;
  z-index: 1;
  will-change: width;
}
#screen-home .track-red {
  left: 305px;
  background: #dd4228;
  box-shadow: 0 0 28px 3px rgba(221, 66, 40, 0.5), 0 0 9px rgba(221, 66, 40, 0.85);
  animation: track-red 4.6s ease-in-out infinite;
}
#screen-home .track-cyan {
  left: 543px;
  background: #09d0cc;
  box-shadow: 0 0 24px 3px rgba(8, 209, 205, 0.55), 0 0 8px rgba(8, 209, 205, 0.9);
  animation: track-cyan 4.6s ease-in-out infinite;
}
/* cigarette: fills almost to the end (lots of CO) */
@keyframes track-red {
  0%, 8%    { width: 14px; }
  42%, 60%  { width: 158px; }
  94%, 100% { width: 14px; }
}
/* IQOS: barely fills (very little CO) */
@keyframes track-cyan {
  0%, 8%    { width: 14px; }
  42%, 60%  { width: 28px; }
  94%, 100% { width: 14px; }
}

/* ---- Floating CO molecules (Figma red glowing rings with "CO") ---- */
#screen-home .molecule {
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 168, 0.55);
  box-shadow:
    0 0 11px 2px rgba(221, 66, 40, 0.5),
    0 0 4px 1px rgba(221, 66, 40, 0.8),
    inset 0 0 5px rgba(221, 66, 40, 0.35);
  color: #e8553c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.5px;
  z-index: 2;
  will-change: transform;
}
/* cyan variant — molecules next to the IQOS device */
#screen-home .molecule.cyan {
  border-color: rgba(180, 255, 255, 0.55);
  box-shadow:
    0 0 11px 2px rgba(8, 209, 205, 0.5),
    0 0 4px 1px rgba(8, 209, 205, 0.8),
    inset 0 0 5px rgba(8, 209, 205, 0.35);
  color: #2fd9d2;
}

/* positions (stage-absolute; element is 22px so left/top = center − 11).
   All sit in the empty zones BESIDE the devices (cigarette ≈ x355–410,
   IQOS ≈ x577–625) — never on top of them.
   LEFT (cigarette) = many RED; RIGHT (IQOS) = a couple of faint CYAN. */
#screen-home .m1 { left: 303px; top: 305px; animation: co-appear 4.2s ease-in-out infinite 0s; }
#screen-home .m2 { left: 303px; top: 368px; animation: co-appear 4.8s ease-in-out infinite 0.6s; }
#screen-home .m3 { left: 427px; top: 368px; animation: co-appear 4.4s ease-in-out infinite 1.2s; }
#screen-home .m4 { left: 458px; top: 462px; animation: co-appear 5.0s ease-in-out infinite 0.3s; }
#screen-home .m5 { left: 336px; top: 430px; animation: co-appear 4.6s ease-in-out infinite 1.8s; }
#screen-home .m6 { left: 466px; top: 315px; animation: co-appear 4.0s ease-in-out infinite 0.9s; }
/* the two IQOS-side molecules: appear rarely and stay faint */
#screen-home .m7 { left: 646px; top: 340px; animation: co-appear-faint 7.5s ease-in-out infinite 2.4s; }
#screen-home .m8 { left: 666px; top: 400px; animation: co-appear-faint 8.5s ease-in-out infinite 5.0s; }

/* gentle "appear": fade + scale in, drift up, fade out — then loop */
@keyframes co-appear {
  0%   { opacity: 0; transform: translateY(7px) scale(0.65); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-11px) scale(0.85); }
}
@keyframes co-appear-faint {
  0%   { opacity: 0; transform: translateY(6px) scale(0.65); }
  25%  { opacity: 0.5; transform: translateY(0) scale(0.95); }
  65%  { opacity: 0.5; transform: translateY(-2px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-9px) scale(0.85); }
}

#screen-home .home-start {
  top: 592px;
}

/* ============================================================================
   SCREEN: Which one are you? (Figma node 754:7514)
   ========================================================================== */
#screen-which .which-center {
  position: absolute;
  left: 50%;
  top: calc(50% - 1px);
  transform: translate(-50%, -50%);
  width: 568px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
#screen-which .which-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
#screen-which .which-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 272px;
}
#screen-which .profile-btn {
  width: 272px;
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  border: none;
  border-radius: 46px;
  color: var(--white);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
#screen-which .profile-btn:hover { filter: brightness(1.06); }
#screen-which .profile-btn:active { transform: scale(0.98); }

/* ============================================================================
   SCREEN: Get Ready (Figma node 754:7781)
   ========================================================================== */
#screen-getready .getready-center {
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translateX(-50%);
  width: 568px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
#screen-getready .getready-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
#screen-getready .getready-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 332px;
}
#screen-getready .getready-ring {
  width: 160px;
  height: 160px;
  background-image: url("assets/img/getready-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  animation: getready-spin 1.4s linear infinite;
}
@keyframes getready-spin {
  to { transform: rotate(360deg); }
}
#screen-getready .getready-sub {
  font-weight: 300;
  font-size: 24px;
  line-height: normal;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   SCREEN: Deep breath in! / Exhale — countdown phases (Figma 754:8047, 754:8419)
   ========================================================================== */
.breathe-heading {
  position: absolute;
  top: 240px;
  left: 50%;
  width: 573px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
.breathe-countdown {
  position: absolute;
  top: 326px;
  left: 50%;
  width: 272px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.breathe-number {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 128px;
  line-height: 1;
  color: var(--cyan);
}
.breathe-sub {
  width: 272px;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   Glowing pill component — Exhale / Ready! (Figma 754:8423)
   ========================================================================== */
.glow-pill {
  position: absolute;
  height: 160px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a505c;
  border: 4px solid var(--cyan);
  border-radius: 100px;
  box-shadow: inset -4px -4px 20px #00d1d2, inset 4px 4px 20px #00d1d2;
}
.glow-pill span {
  font-weight: 700;
  font-size: 96px;
  line-height: 1.35;
  color: var(--white);
  white-space: nowrap;
  text-shadow:
    0 0 11.124px #00d1d2,
    0 0 22.248px #00d1d2,
    0 0 77.868px #00d1d2,
    0 0 155.736px #00d1d2,
    0 0 250px #00d1d2;
}

/* Exhale: pill below the heading (Figma top 326) */
#screen-exhale .glow-pill {
  top: 326px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
}

/* Ready!: pill centered slightly above mid (Figma fill center y≈401) */
#screen-ready .glow-pill {
  top: 316px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
}

/* ============================================================================
   SCREEN: While we're waiting — intro video (Figma node 754:8486)
   ========================================================================== */
.video-kicker {
  position: absolute; top: 141px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 300; font-size: 24px; line-height: 1.35; color: var(--white); text-align: center;
}
.video-heading {
  position: absolute; top: 173px; left: calc(50% - 0.5px); width: 573px; transform: translateX(-50%);
  font-weight: 700; font-size: 32px; line-height: 1.35; color: var(--cyan); text-align: center;
}
.video-box {
  /* Box matches the clip's 4:3 aspect (960x720): 472 * 4/3 ≈ 629. With the box
     and the video the same shape, the frame fills it exactly — no crop (the
     Georgian caption stays visible) and no letterbox bars. */
  position: absolute; top: 240px; left: 50%; width: 629px; height: 472px; transform: translateX(-50%);
  border-radius: 16px; overflow: hidden; background: #000;
}
/* Box is now the same 4:3 shape as the clip, so `cover` fills it with neither
   crop nor letterbox bars (was `cover` on a wider box → cropped the caption;
   then `contain` → black bars; matching the aspect fixes both). */
.video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   SCREEN: Result (Figma node 754:8574 etc.)
   ========================================================================== */
.result-title {
  position: absolute;
  top: 240px;
  left: calc(50% + 0.5px);
  width: 573px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
.result-ppm {
  position: absolute;
  top: 326px;
  left: 50%;
  width: 391px;
  height: 128px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 96px;
  line-height: 1.35;
  color: var(--cyan);
  text-align: center;
}
.result-message {
  position: absolute;
  top: 454px;
  left: 50%;
  width: 716px;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  color: var(--cyan);
  text-align: center;
}
.result-next { top: 592px; }

/* ============================================================================
   Shared gradient gauge (See-in-which-group screen + mobile share)
   ========================================================================== */
.gauge-bar {
  position: absolute; top: 0; left: 0; height: 48px; border-radius: 100px;
  /* Colour stops aligned to the LINEAR 0..31 ppm scale (see app.js scaleFrac):
     turquoise 0-6 (0-19%), orange 7-9 (~26%), red 10+ (from ~40% on). Same
     stops as result.html .m-gauge-bar so screen and phone card match. */
  background: linear-gradient(to right, #08d1cd 0%, #08d1cd 14%, #f0d04c 26%, #dd4228 40%, #dd4228 100%);
}
.gauge-labels {
  position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: space-between;
  font-weight: 400; font-size: 16px; color: var(--white);
}
.gauge-marker { position: absolute; top: 8px; width: 28px; }
.gauge-marker .tail { position: absolute; left: 13px; top: 18px; width: 2px; height: 22px; background: var(--white); }
.gauge-marker .bubble {
  position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.gauge-marker .bubble span { font-weight: 400; font-size: 20px; line-height: 1; color: var(--band, var(--cyan)); }

/* ============================================================================
   SCREEN: See in which group you landed (Figma node 754:8508)
   ========================================================================== */
#screen-group { --band: var(--cyan); }
#screen-group[data-band="mid"]  { --band: #f0d04c; }
#screen-group[data-band="high"] { --band: #dd4228; }

#screen-group .group-heading {
  position: absolute; top: 240px; left: calc(50% + 0.5px); width: 715px; transform: translateX(-50%);
  font-weight: 700; font-size: 40px; line-height: 1.35; color: var(--white); text-align: center;
}
#screen-group .group-gauge {
  position: absolute; top: 342px; left: 50%; width: 420px; height: 81px; transform: translateX(-50%);
}
#screen-group .gauge-bar { width: 420px; }
#screen-group .group-verdict {
  position: absolute; top: 442px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 400; font-size: 24px; line-height: normal; color: var(--band); text-align: center;
}
#screen-group .group-actions {
  position: absolute; top: 592px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 24px; align-items: center;
}
#screen-group .group-actions button {
  height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 46px; font-weight: 400; font-size: 24px; line-height: normal; cursor: pointer; white-space: nowrap;
}
#screen-group .btn-outline { width: 228px; background: transparent; border: 2px solid var(--cyan); color: var(--cyan); }
#screen-group .group-save { background: var(--cyan); border: none; color: var(--white); }
#screen-group .group-actions button:active { transform: scale(0.98); }

/* ============================================================================
   SCREEN: THANK YOU! / Scan the QR (Figma node 754:8497)
   ========================================================================== */
.thanks-kicker {
  position: absolute; top: 136px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 700; font-size: 32px; line-height: 1.35; color: var(--cyan); text-align: center;
}
.thanks-heading {
  position: absolute; top: 240px; left: calc(50% + 0.5px); width: 715px; transform: translateX(-50%);
  font-weight: 700; font-size: 40px; line-height: 1.35; color: var(--white); text-align: center;
}
.thanks-qr {
  position: absolute; top: 318px; left: 50%; width: 224px; height: 224px; transform: translateX(-50%);
}
.thanks-qr svg { display: block; width: 100%; height: 100%; }
.thanks-qr svg rect { fill: transparent; }     /* drop the white background */
.thanks-qr svg path { fill: var(--cyan); }      /* cyan QR modules */
.thanks-startover { top: 590px; }

/* 6+PPM variant recolours the headline + message (amber, per Figma 754:8744) */
#screen-result[data-band="high"] .result-ppm,
#screen-result[data-band="high"] .result-message { color: #f0d04c; }

/* ============================================================================
   Operator panel (not part of the kiosk canvas — fixed to the viewport)
   ========================================================================== */
#op-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#op-toggle:hover { background: rgba(40, 40, 40, 0.85); }
#op-panel button:disabled { opacity: 0.5; cursor: default; }

#op-panel {
  position: fixed;
  left: 14px;
  bottom: 62px;
  width: 300px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #e6e6e6;
  font-size: 13px;
}
#op-panel[hidden] { display: none; }
#op-panel .op-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}
#op-panel .op-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px currentColor;
  color: #ef4444;
}
#op-panel .op-dot.connected { background: #22c55e; color: #22c55e; }
#op-panel #op-close { margin-left: auto; background: none; border: none; color: #999; cursor: pointer; font-size: 14px; }
#op-panel .op-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
#op-panel .op-row.op-mini { font-size: 12px; color: #aaa; }
#op-panel select {
  flex: 1 1 0;
  min-width: 0;            /* allow the flex item to shrink below its content */
  max-width: 100%;
  padding: 6px;
  background: #2a2a2e;
  color: #eee;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#op-panel button {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #2a2a2e;
  color: #eee;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
#op-panel button:hover { background: #3a3a40; }
#op-panel button.op-primary { background: var(--cyan); color: #06343a; border-color: var(--cyan); font-weight: 600; }
#op-panel .op-log {
  margin-top: 8px;
  max-height: 96px;
  overflow-y: auto;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11px;
  color: #9aa;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ============================================================================
   GEORGIAN (lang="ka") layout overrides
   ----------------------------------------------------------------------------
   Georgian copy from the brief is markedly longer than the English, and
   Mkhedruli has no capitals, so the same px size reads smaller and wraps
   later. The Figma canvas is a fixed 1024x768 stage, so anything that was
   `white-space: nowrap` or pinned to a narrow width would overflow. These
   rules only relax width / size / wrapping — no repositioning, so the screens
   stay pixel-faithful to the design in English.
   ========================================================================== */

/* Buttons: let the long Georgian labels wrap instead of running off the pill. */
html[lang="ka"] .btn-pill,
html[lang="ka"] #screen-which .profile-btn,
html[lang="ka"] #screen-group .group-actions button {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

/* "IQOS-ის მომხმარებელი" / "სიგარეტის მწეველი" do not fit 272px at 24px. */
html[lang="ka"] #screen-which .profile-btn {
  font-size: 20px;
  height: auto;
  min-height: 56px;
  padding: 8px 20px;
}

/* Disclaimer is one long sentence in Georgian (vs two short EN lines). */
html[lang="ka"] .disclaimer {
  width: 680px;
  height: auto;
  font-size: 13px;
  line-height: 1.35;
}

/* Sub-lines that were sized for short EN strings. The countdown column itself
   is 272px wide, so the parent has to grow with the copy or the line spills. */
html[lang="ka"] .breathe-countdown { width: 460px; }
html[lang="ka"] .breathe-sub { width: 460px; font-size: 20px; }
html[lang="ka"] #screen-getready .getready-sub { font-size: 20px; }

/* Verdicts / result copy: longest strings in the whole deck. */
html[lang="ka"] #screen-group .group-verdict { width: 700px; font-size: 20px; line-height: 1.3; }
html[lang="ka"] .result-message { font-size: 21px; line-height: 1.3; }

/* Gauge caption "IQOS-ის მომხმარებელი" is far wider than "IQOS USER". */
html[lang="ka"] .gauge-labels { font-size: 11px; }

/* The glow pill word ("ამოისუნთქე") is long at 96px — trim so it stays inside. */
html[lang="ka"] .glow-pill span { font-size: 72px; }

/* Headings that wrap to TWO lines in Georgian (one in English) collide with the
   element pinned right below them. The English layout leaves only ~80px between
   the heading (top:240) and the pill/QR (top:~320), enough for one 40px line
   but not two. Shrink the Georgian heading and tighten its leading so both
   lines fit in that band. Measured to clear the pill (exhale) and the QR
   (thanks) with margin. */
html[lang="ka"] #screen-exhale .breathe-heading {
  font-size: 30px;
  line-height: 1.15;
  width: 640px;
}
html[lang="ka"] .thanks-heading {
  font-size: 28px;
  line-height: 1.2;
  top: 236px;
}
/* Give the QR a little more air below the taller Georgian heading. */
html[lang="ka"] .thanks-qr { top: 336px; }