/* =====================================================================
   Foci — az ÉLES app stíluslapja
   =====================================================================
   A prototípus (foci.html) formanyelvét viszi tovább, de külön fájlban:
   ott egyetlen HTML-ben élt minden, itt az app több oldalból áll, és a
   böngésző gyorsítótárazhatja.

   A prototípus MEGMARAD érintetlenül — az a bemutatható változat. Ami itt
   épül, az a valódi app: adatbázissal, belépéssel, RLS-sel.
   ===================================================================== */

:root{
  --bg:#0C1116; --panel:#141B23; --panel2:#1A222B; --raise:#212B36;
  --line:#1E2630; --line2:#2A3440;
  --txt:#EEF1F4; --d1:rgba(255,255,255,.78); --d2:rgba(255,255,255,.58); --d3:rgba(255,255,255,.50);
  --go:#57C98A; --miss:#E4694E; --maybe:#D4A84A; --accent:#7CB4DE; --navy:#0F2336;
  --login:url(kep/belepo.jpg);
  --sab:min(env(safe-area-inset-bottom,0px), 18px);
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Karla',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- box-sizing MINDENRE ----------
   A `width:100%` + `padding` + `border` hármas alapértelmezésben ÖSSZEADÓDIK,
   és a doboz kilóg a szülőjéből. Telefonon ez oldalirányú csúszásként jön
   elő, amit a `html,body{overflow:hidden}` el is REJT a mérés elől — tehát a
   teszt zöld marad, a felhasználó meg elcsúszott lapot lát. Egy szabály itt,
   és az egész hibaosztály megszűnik. */
*,*::before,*::after{box-sizing:border-box}

/* A gyökérelem háttere kell, mert a böngésző ezt veszi át a rendszersávra. */
html{color-scheme:dark;background:#05070A}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{background:#05070A;color:var(--txt);font-family:var(--body);font-size:15px;line-height:1.5;
  height:100vh;height:100dvh;display:flex;justify-content:center}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left}

/* A `hidden` attribútum csak egy gyenge `display:none` alapértelmezést hoz
   magával, amit BÁRMELYIK saját `display` szabály felülír. A névsor sorain
   `display:block` van — és ettől a „elrejtett" nevek vígan ott maradtak a
   listában. Egy sor itt, és a hiba egyszer s mindenkorra megszűnik. */
[hidden]{display:none!important}

/* ---------- 16 px MINDEN beviteli mezőn — ez nem ízléskérdés ----------
   iOS Safari automatikusan RÁNAGYÍT a lapra, ha egy fókuszba kerülő mező
   betűje 16 px-nél kisebb. A nagyítás után a lap eltolódik és úgy is marad.
   A címkék maradhatnak kisebbek, azok nem fókuszálhatók. */
input,select,textarea{font:inherit;font-size:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
button:active{opacity:.68}
::selection{background:var(--accent);color:#08101A}

#phone{width:100%;max-width:440px;height:100vh;height:100dvh;height:var(--vvh,100dvh);
  position:relative;display:flex;flex-direction:column;background:var(--bg);
  border-left:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden}
#root{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* ---------- űrlapelemek ---------- */
.field{margin-bottom:11px}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--d3);margin-bottom:6px}
.field input{width:100%;height:44px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:11px;color:#fff;padding:0 13px;outline:none;
  -webkit-appearance:none;appearance:none}
.field input::placeholder{color:rgba(255,255,255,.38)}
.field input:focus{border-color:var(--accent)}

.hint{font-size:11.5px;color:var(--d2);margin:-5px 0 11px;line-height:1.5}
.legend{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  color:var(--d2);line-height:1.7}
.err{color:#FFB4A2;font-size:12.5px;margin:-4px 0 10px;min-height:17px}

.btn{display:block;width:100%;text-align:center;padding:13px;border-radius:12px;
  font-family:var(--disp);font-weight:800;font-size:15.5px;background:var(--accent);color:#08101A}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--d1)}

.foot{padding:24px 20px 10px;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;color:var(--d3);line-height:1.9}

/* ---------- belépő képernyő ---------- */
.auth{flex:1 1 auto;min-height:0;position:relative;overflow-y:auto;display:flex;
  flex-direction:column;justify-content:space-between;background:#0A1622}
.authbg{position:absolute;inset:0;z-index:0;background-image:var(--login);
  background-size:cover;background-position:50% 34%}
.authbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(7,16,25,.26) 0%,rgba(7,16,25,.10) 38%,rgba(7,16,25,.16) 55%,rgba(7,16,25,.38) 100%)}
.authtop,.authform{position:relative;z-index:1}

/* iPhone-on a lap a bevágás ALÁ fut (viewport-fit=cover), ezért a fix 46 px
   pont az órára csúszna. Androidon a bevágás 0 — ugyanaz a szabály jó. */
.authtop{padding:calc(46px + env(safe-area-inset-top,0px)) 26px 76px;
  background:linear-gradient(180deg,rgba(7,16,25,.78) 0%,
  rgba(7,16,25,.72) 80%,rgba(7,16,25,0) 100%)}
/* Az alsó sáv sötétítése nem díszítés: a fotó legvilágosabb pontja (a labda)
   pont oda esik, ahova a mezők címkéi kerülnek, és ott a halvány monó felirat
   olvashatatlanná válik. A kétmezős meghívó-űrlap magasabb, mint a belépőé,
   tehát feljebb ér — ezért kezdődik a sötétítés korábban és erősebben. */
.authform{padding:60px 26px calc(26px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(7,16,25,0) 0%,rgba(7,16,25,.58) 9%,
  rgba(7,16,25,.90) 26%,rgba(7,16,25,.97) 55%,rgba(7,16,25,.99) 100%)}
/* Fotós háttéren a címke nem lehet a leghalványabb szürke. */
.authform .field label{color:var(--d2)}
.auth .hero{font-family:var(--disp);font-weight:900;font-stretch:82%;font-size:46px;
  line-height:.94;letter-spacing:-.035em;margin:0 0 14px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.auth .hero em{font-style:normal;font-weight:800;font-size:34px;letter-spacing:-.025em;
  color:var(--accent);display:inline-block;margin-top:4px}
.auth .lede{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55;margin:0;
  max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.auth .btn{background:#fff;color:var(--navy);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.auth .foot{padding:18px 0 0}

/* ---------- a kód beírása ----------
   Egy mező, hat karakter, monó betűvel és nagy betűközzel. Kipróbáltunk
   hat külön dobozt is: telefonon a beillesztés és a törlés is elromlik
   tőle, és a rendszer automatikus kódkitöltése sem működik. Egy mező, ami
   `one-time-code`-ot vár — ettől iOS és Android maga felajánlja a kódot. */
.kodmezo{width:100%;height:60px;text-align:center;font-family:var(--mono);
  font-size:30px;font-weight:800;letter-spacing:.34em;text-indent:.34em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:14px;color:#fff;outline:none;-webkit-appearance:none;appearance:none}
.kodmezo:focus{border-color:var(--accent)}
.kodmezo.rossz{border-color:var(--miss);animation:megrazza .3s}
@keyframes megrazza{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.ujra{display:block;width:100%;text-align:center;margin-top:14px;font-size:13px;color:var(--d2)}
.ujra b{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ujra[disabled] b{color:var(--d3);text-decoration:none}
.vissza{display:block;width:100%;text-align:center;margin-top:18px;font-size:12.5px;color:var(--d3)}

/* ---------- ideiglenes: bent vagyunk ---------- */
.bent{padding:calc(22px + env(safe-area-inset-top,0px)) 20px 30px;overflow-y:auto}
.bent h2{font-family:var(--disp);font-weight:900;font-stretch:80%;font-size:26px;
  letter-spacing:-.02em;margin:0 0 4px}
.bent .sub{color:var(--d2);font-size:13px;margin:0 0 22px}
.gsor{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.gsor b{font-size:14.5px}
.gsor small{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--d3);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.ures{margin:18px 0;padding:16px;border-radius:14px;border:1px dashed var(--line2);
  color:var(--d2);font-size:13px;line-height:1.55}
.ures.baj{border-style:solid;border-color:var(--miss);color:#FFB4A2;
  background:rgba(228,105,78,.08)}

/* ---------- meghívó fogadója ---------- */
/* A tények blokkja: mikor, hol, ki hívott. Ez a három sor dönti el, hogy
   az ember felismeri-e a SAJÁT társaságát — ezért van a gomb FÖLÖTT. */
.tenyek{margin:0 0 16px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--line2)}
.teny{font-size:14px;color:var(--d1);line-height:1.65}
.teny b{color:#fff;font-weight:700}
.teny+.teny{margin-top:2px}

.miert{font-size:14px;color:var(--d1);line-height:1.55;margin:0 0 18px}
.bizalom{font-size:12.5px;color:var(--d2);line-height:1.6;margin:14px 0 0}
.bizalom b{color:var(--d1);font-weight:700}
.apro{font-size:11px;color:var(--d3);line-height:1.6;margin:10px 0 0}
.apro a{color:var(--d2)}

/* ---------- sima belső lap (névsor, megerősítés, kész) ---------- */
.lap{padding:calc(26px + env(safe-area-inset-top,0px)) 20px
     calc(26px + env(safe-area-inset-bottom,0px))}
.lap h2{font-family:var(--disp);font-weight:900;font-stretch:80%;font-size:28px;
  line-height:1.05;letter-spacing:-.02em;margin:0 0 8px}
.lap .sub{color:var(--d2);font-size:13.5px;line-height:1.55;margin:0 0 20px}
.lap a.btn{text-decoration:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}