@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');
/* ====== BENDRI KINTAMIEJI ====== */
:root{
  --bg: #f5fbff;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.06);
  --text: #0f2730;
  --muted: #557b7c;
  --primary:#2ec7a6;
  --primary-strong:#11b395;
  --danger:#ef476f;
  --shadow: 0 12px 36px rgba(0,0,0,.08);
  --topbar-h:56px;
}

/* ====== RESET / BAZĖ ====== */
*{box-sizing:border-box}
html, body { height:auto; min-height:100%; }
@supports (height: 100svh){
  html, body { min-height:100svh; }
}
/* duodam 1px „už kadro“, kad iOS turėtų ką slinkti */
body { min-height: calc(100svh + 1px); }

body.bg{
 margin:0;
   font: 16px/1.5 "Oswald", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
   color:var(--text);
   background: radial-gradient(1200px 800px at 10% 10%, #e3f3ff 0%, #ecfff8 45%, #e9f7ff 100%) no-repeat;
  background-attachment: scroll;
 }
 button, input, select, textarea {
  font: inherit;           /* svarbiausia eilutė */
}
.btn { font-family: inherit; }
body.bg.green{
  background: radial-gradient(1200px 800px at 10% 10%, #dbfff3 0%, #e9fff8 45%, #e6fbf3 100%) no-repeat;
 background-attachment: scroll;
    
}

/* Fades */
.fade-in{ animation: fadeIn .35s ease forwards; }
.fade-out{ animation: fadeOut .25s ease forwards; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0; transform:translateY(6px)} }

/* Kortelės / formos (naudojama prisijungime ir nustatymuose) */
.center-wrap{ min-height:100svh; display:grid; place-items:center; padding:0 16px; }
.card{ width:min(540px,100%); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:24px; padding:32px 28px; box-shadow:var(--shadow); }
.brand-mark{ text-align:center; margin-bottom:6px; }
.app-title{ text-align:center; margin:0 0 6px; }
.muted{ color:var(--muted); text-align:center }
.form{ display:grid; gap:14px; margin-top:12px }
.field{ display:grid; gap:6px }
.field.inline{ grid-template-columns:1fr 1fr; gap:16px }
.field input,.field select{ width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--card-border); background:#fbffff; color:var(--text); outline:none; }
.brand-mark img{ width:48px; height:48px; border-radius:12px; opacity:.9 }
.input-with-icon{ position:relative; display:flex; align-items:center }
.input-with-icon input{ padding-right:44px }
.input-with-icon .eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; cursor:pointer; font-size:16px; opacity:.55; }
.input-with-icon .eye:hover{ opacity:.9; }
.remember-row{ display:flex; align-items:center; gap:10px }
.remember-row input[type="checkbox"]{ width:18px; height:18px }

/* ====== MYGTUKAI (vieninga sistema) ====== */
.btn{
  appearance:none; cursor:pointer;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#0b1b1f;
  padding:10px 14px; border-radius:16px;
  transition: transform .08s ease, box-shadow .15s ease, background .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.btn.primary{ background:#eef1f4; border-color:rgba(0,0,0,.08); }   /* PILKAS primary – aiškus tekstas */
.btn.ghost{ background:rgba(255,255,255,.8); }
.btn.danger{ background:#ffe9e9; border-color:#ffc8c8; }
.btn.lg{ padding:12px 18px; border-radius:20px; font-size:16px; }

/* ====== VIRŠUTINĖ JUOSTA ====== */
.app-body{ padding-top:var(--topbar-h); }
.topbar{
  position:fixed; left:0; right:0; top:0; height:var(--topbar-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:10px; padding:8px 10px;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06); z-index:60;
}
.topbar-center{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.logo-img{ width:36px; height:36px; border-radius:12px; }

/* ====== PAGRINDINIS IŠDĖSTYMAS ====== */
.container{
  max-width:980px; margin:0 auto; padding:20px;
  min-height:calc(100svh - var(--topbar-h));
  display:flex; flex-direction:column; justify-content:center;
}
.view{ display:none; opacity:0; transform:translateY(6px); transition:opacity .28s ease, transform .28s ease; }
.view.active{ display:block; opacity:1; transform:none; }
/* Leisk minimalią slinktį, kad iOS numestų URL juostą */
body.practice-active{
  overflow:auto;
  min-height:calc(100svh + 1px);
  -webkit-overflow-scrolling: touch;
}
/* Paslėpk slinkties juostą iOS/WebKit */
body.practice-active::-webkit-scrollbar{ width:0; height:0; }


/* Meniu mygtukai */
.menu-btn{ display:block; width:100%; margin-bottom:10px; }

/* ====== NUSTATYMŲ KORTELĖS ====== */
.setup-steps{ display:grid; gap:16px; max-width:760px; margin:0 auto; }
.card-lite{ padding:16px; border:1px solid var(--card-border); border-radius:16px; background:#ffffffb3; backdrop-filter:blur(2px); }
.step-title{ display:block; text-align:center; font-weight:700; margin-bottom:10px; }
.viz-types,.choice-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.viz-btn,.choice-btn{ padding:12px 14px; border-radius:14px; border:1px solid var(--card-border); background:#fff; cursor:pointer; }
.viz-btn:hover,.choice-btn:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); }
.actions-row{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; }

/* ====== PRAKTIKOS ZONA ====== */
.canvas-wrap.full{ position:fixed; inset:var(--topbar-h) 0 0 0; background:#c4e5ff; }
body.bg.green .canvas-wrap.full{ background:#c3ffef; }
.canvas-wrap.full canvas{ width:100%; height:calc(100svh - var(--topbar-h)); display:block; }

/* HUD meniu (viršutinis kairys kampas viduje vizualizacijos) */
.hud-btn{
  position:fixed; top:calc(var(--topbar-h) + 8px); left:8px; z-index:70;
  border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:12px; padding:8px 10px;
}
.hud-panel{
  position:fixed; top:calc(var(--topbar-h) + 8px); left:8px; z-index:70;
  background:rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding:10px; width:210px; box-shadow:0 8px 26px rgba(0,0,0,.12);
}
.hud-group{ display:flex; gap:8px; margin-bottom:8px; }
.hud-meta{ font-size:13px; color:#000; font-weight:600; display:flex; flex-direction:column; gap:4px; }

/* HUD: centravimas + close */
.hud-panel { text-align:center; position:fixed; } /* užtikrina konteinerį absoliučiam mygtukui */
.hud-group { display:flex; gap:8px; margin-bottom:8px; justify-content:center; }
.hud-meta  { display:flex; flex-direction:column; gap:4px; align-items:center; font-size:13px; color:#000; font-weight:600; }

.hud-close{
  position:absolute; top:6px; right:6px;
  background:transparent; border:0; font-size:16px; line-height:1; cursor:pointer; opacity:.6;
}
.hud-close:hover{ opacity:1; }

/* Trukmės juosta */
.progress-bar{ position:fixed; left:0; right:0; top:var(--topbar-h); height:4px; background:rgba(0,0,0,0.06); z-index:40; }
.progress-bar .progress-inner{ height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary-strong)); transition:width .25s linear; }

/* Instrukcijos + 3..2..1 – tikrai centre */
.center-overlay{
  position:fixed; inset:var(--topbar-h) 0 0 0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; font-weight:800; letter-spacing:.5px; font-size:clamp(28px,5vw,56px); color:#0f2730; z-index:55;
}
.pre-msg{
  position:fixed; inset:var(--topbar-h) 0 0 0; display:none; align-items:center; justify-content:center;
  z-index:70; background:rgba(255,255,255,0.55); backdrop-filter:blur(2px);
}
.pre-msg.show{ display:flex; }
.pre-card{
  margin:0 auto; max-width:min(620px,92vw); background:#fff; border:1px solid var(--card-border);
  border-radius:16px; padding:18px 20px; box-shadow:0 12px 32px rgba(0,0,0,.14); text-align:center;
}

/* PDF modalas */
.modal{ border:none; padding:0; }
.modal-card{ width:min(900px,96vw); height:min(80vh,820px); background:#fff; border-radius:16px; border:1px solid var(--card-border); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--card-border); }
.pdf-wrap{ width:100%; height:calc(100% - 48px); }
.pdf-wrap iframe{ width:100%; height:100%; border:0; }
.link{ color:#10b093; text-decoration:underline; }

/* ====== RESPONSIVE ====== */
@media (max-width:768px){
  .container{ padding:12px; }
  .viz-types,.choice-row{ grid-template-columns:1fr; }
  .hud-panel{ width:86vw; }
  .logo-img{ width:34px; height:34px; }
}
@media (max-height:640px){
  .hud-group .btn{ padding:8px 12px; }
}
.footnote {
    text-align: center;
}
/* Modalas – telefonams tvarkingas dydis ir scroll lock */
.no-scroll { overflow: hidden;  }

.modal-card{ width:min(900px,96vw); height:min(85dvh, 820px); }
.pdf-wrap{ width:100%; height:calc(100% - 48px); }
.pdf-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.menu-buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.menu-buttons .btn.lg{
  min-width:260px; /* vienodas vizualinis plotis visiems trims */
}
/* ==== MENIU nuotrauka ==== */
/* Didesnis tarpas tarp iliustracijos ir mygtukų */
#view-menu .menu-hero{
  align-items:center; text-align:center;
  display:flex;
  justify-content:center;
  margin-bottom:56px !important; /* buvo mažai — dabar aiškus tarpas */
}
/* Video+poster dėžutė, kad nešokinėtų aukštis */
.logo-box{
  width: clamp(300px, 76vw, 560px);
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 16/9; /* jei tavo posteris ne 16:9 – pakeisk */
}

/* Video ir posteris užpildo dėžę */
.logo-box > video,
.logo-box > .poster-cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

/* Posterio nunuardymas, kai video startuoja */
.poster-cover{ transition: opacity .35s ease; }
.poster-cover.hidden{ opacity: 0; pointer-events: none; }

/* švarus fade-in ir pačiam video, jei nori */
#siteLogo{ opacity: 0; transition: opacity .35s ease; }
#siteLogo.playing{ opacity: 1; }

/* Jei kas nors „pritraukia“ iš kitos pusės */
#view-menu .menu-buttons{
  margin-top:0 !important;
}

/* Didesnė iliustracija (pagal ekrano plotį) */
#view-menu .menu-illustration{
  display:block;
  width:100%;
  max-width:560px;   /* arba koks pas tave buvo */
  height:auto;
  object-fit:contain;   /* kad nesitemptų */
  border-radius:16px;   /* jei buvo užapvalinimas */
  aspect-ratio: 16/9; /* 1920x1080 */
}

/* Telefonams */
@media (max-width: 768px){
  #view-menu /* REMOVED: conflicting width clamp on .menu-illustration for Android centering */
  #view-menu .menu-hero{
  align-items:center; text-align:center; margin-bottom:28px !important; }
}
/* Kompaktiška modalų galvutė su ikonų mygtukais */
.modal-head.compact{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:6px 8px;                /* buvo ~10–12px – sumažinam */
  border-bottom:1px solid var(--card-border);
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--card-border);
  border-radius:10px;
  background:#fff;
  font-size:18px; line-height:1;
  cursor:pointer;
}
.icon-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.10); }
.icon-btn.open-ext{ font-size:16px; }

.modal-card{
  width:min(900px, 96vw);
  height:min(85dvh, 820px);
  background:#fff; border-radius:16px; border:1px solid var(--card-border);
}

/* Pdf sritis ir fallback */
.pdf-wrap{ width:100%; height:calc(100% - 44px); } /* 44px – ~kompaktiškos galvutės aukštis */
.pdf-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.pdf-fallback{
  display:none;               /* desktop’e – paslėpta */
  gap:8px; padding:10px; text-align:center;
}

/* Telefonams: nesirandam su iframe (iOS riboja zoom/slinktį), rodome tik mygtuką */
@media (max-width: 768px){
  .modal-card{ width:96vw; height:85dvh; }
  .pdf-wrap{ display:none; }     /* slepiam iframe telefone */
  .pdf-fallback{ display:grid; } /* rodome mygtuką */
}

/* Jei jau turi .no-scroll – paliekam kaip yra */
.no-scroll { overflow: hidden;  }

/* === BG LOADER === */
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Pulsuojantis tekstas */
.pulse-note{
  animation: gkPulse 1.2s ease-in-out infinite;
}
@keyframes gkPulse{
  0%, 100% { opacity:.45; transform:scale(.98); }
  50%      { opacity:1;    transform:scale(1); }
}

/* Trijų taškų „loaderis“ (naudoja currentColor iš .muted) */
.loader{
  display:inline-flex; gap:6px; vertical-align:middle; margin-right:8px;
}
.loader i{
  width:6px; height:6px; border-radius:50%;
  background: currentColor; opacity:.25;
  animation: gkBlink 1s infinite;
}
.loader i:nth-child(2){ animation-delay:.15s; }
.loader i:nth-child(3){ animation-delay:.30s; }
@keyframes gkBlink{
  0%, 80%, 100% { opacity:.25; transform: translateY(0); }
  40%           { opacity:1;    transform: translateY(-2px); }
}

.center-wrap > .card{ justify-self:center; margin-inline:auto; }

/* === AUTO-HIDE TOPBAR (2025-08-15) === */
.topbar{ transition: transform 220ms ease; will-change: transform; }
.topbar.is-hidden{ transform: translateY(calc(-1 * var(--topbar-h))); }
/* Auto-hide animacija */
.topbar{
  transition: transform 220ms ease;   /* + */
  will-change: transform;             /* + */
}
.topbar.is-hidden{
  transform: translateY(calc(-1 * var(--topbar-h))); /* + */
}

/* (nebūtina, bet patogu iOS) */
.app-body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); }

/* (jei pas tave NĖRA var(--topbar-h) apibrėžimo, įsimesk numatytą) */
/* :root{ --topbar-h: 56px; } */



/* --- iOS Safari URL bar friendly scroll --- */
html, body { overflow-y: auto; }
@supports (height: 100svh) {
  body:not(.no-scroll) { min-height: calc(100svh + 2px); }
}