/* =========================================================================
   THELYON — Přihlášení / Registrace (kinematický řecký dark-fantasy design)
   Reuse: stejné form ID a auth.js. Žádný druhý auth systém.
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#d4af37; --gold-lt:#e8c860; --gold-dk:#8a6d16; --bronze:#a97e3c;
  --navy:#15243d; --navy-lt:#1e3355; --navy-dk:#0e1830;
  --stone:#191410; --stone-lt:#241c12;
  --burg:#7d1616;
  --txt:#efe3c6; --txt-dim:#b8a888; --txt-mut:#8f8064;
  --panel:rgba(18,15,11,.92); --line:rgba(212,175,55,.34);
  --err:#e06a5a; --ok:#7ac08a;
  --z-bg:0; --z-particles:1; --z-content:5;
}
html,body{height:100%}
body{
  font-family:'Cinzel',Georgia,serif;
  color:var(--txt);
  /* tmavá záložní barva — funkčnost nikdy nezávisí na obrázku pozadí */
  background:radial-gradient(ellipse at 50% 0%, #23324e 0%, #131d31 45%, #0a1020 100%);
  min-height:100dvh;
  overflow-x:hidden;
}

/* ---------- pozadí ---------- */
.auth-bg{
  position:fixed; inset:0; z-index:var(--z-bg);
  background:url('../img/ui/background.jpg') center 30%/cover no-repeat;
  filter:saturate(1.05);
}
.auth-bg-overlay{
  position:fixed; inset:0; z-index:var(--z-bg);
  background:
    linear-gradient(180deg, rgba(8,12,22,.55) 0%, rgba(8,12,22,.35) 40%, rgba(8,12,22,.85) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(8,12,22,0) 30%, rgba(8,12,22,.6) 100%);
  pointer-events:none;
}
#particles{position:fixed; inset:0; z-index:var(--z-particles); pointer-events:none; opacity:.5}

/* ---------- stage / rozvržení ---------- */
.auth-stage{
  position:relative; z-index:var(--z-content);
  min-height:100dvh; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(16px,3vw,34px) clamp(12px,3vw,28px);
  padding-top:max(clamp(16px,3vw,34px), env(safe-area-inset-top));
  padding-bottom:max(clamp(16px,3vw,34px), env(safe-area-inset-bottom));
  gap:clamp(16px,2.4vw,28px);
}

/* ---------- značka ---------- */
.auth-brand{text-align:center; margin-top:clamp(4px,2vw,18px)}
.auth-logo{width:clamp(66px,9vw,104px); height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.auth-wordmark{
  font-family:'Cinzel Decorative',Georgia,serif; font-weight:900;
  font-size:clamp(34px,6vw,66px); letter-spacing:clamp(3px,1vw,10px); line-height:1;
  background:linear-gradient(180deg,#fff5d6 0%,var(--gold-lt) 30%,var(--gold) 55%,#8a6a1f 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 18px rgba(0,0,0,.5); margin-top:6px;
}
.auth-tagline{color:var(--txt-dim); font-size:clamp(12px,1.5vw,15px); letter-spacing:1px; margin-top:6px; font-family:Georgia,serif}

/* ---------- panely ---------- */
.auth-panels{
  width:100%; max-width:1000px;
  display:flex; gap:clamp(14px,2.2vw,26px); justify-content:center; align-items:stretch;
}
.page{width:100%; min-width:0}
.auth-panels .page{flex:1 1 0; max-width:440px}

.auth-card{
  position:relative; height:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(18px,2.4vw,28px);
  box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(3px);
}
/* antický zlatý rámeček + rohy */
.auth-card::before{
  content:''; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.25);
  border-radius:8px; pointer-events:none;
}
.auth-card-wide{max-width:640px; margin:0 auto}

.auth-card-head{text-align:center; margin-bottom:14px}
.auth-h{
  font-family:'Cinzel',serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,2.3vw,23px); letter-spacing:1.5px;
  color:var(--gold-lt); text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.auth-sub{color:var(--txt-dim); font-family:Georgia,serif; font-size:13px; margin-top:6px}
.auth-orn{
  display:block; height:14px; margin:9px auto 0; width:66%;
  background:
    linear-gradient(90deg,transparent,var(--gold-dk) 20%,var(--gold) 50%,var(--gold-dk) 80%,transparent) center/100% 2px no-repeat;
  position:relative;
}
.auth-orn::after{
  content:'⬧'; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  color:var(--gold); font-size:12px; background:var(--panel); padding:0 8px;
}

/* ---------- pole ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-family:Georgia,serif; font-size:12.5px; color:var(--txt-dim); margin-bottom:6px; letter-spacing:.4px}
.field-in{position:relative; display:flex; align-items:center}
.field-ico{position:absolute; left:12px; font-size:15px; opacity:.75; pointer-events:none}
.field-in input{
  width:100%; min-width:0;
  background:rgba(8,10,16,.72); color:var(--txt);
  border:1px solid rgba(212,175,55,.28); border-radius:8px;
  padding:12px 14px 12px 38px; font-size:15px; font-family:Georgia,serif;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field-in input::placeholder{color:var(--txt-mut)}
.field-in input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(212,175,55,.22); background:rgba(10,13,20,.85);
}
.field-in .eye{
  position:absolute; right:6px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--txt-dim); cursor:pointer; font-size:16px; border-radius:6px;
}
.field-in .eye:hover{color:var(--gold-lt); background:rgba(212,175,55,.1)}
.field-in .eye:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.field-in:has(.eye) input{padding-right:42px}
.field-hint{font-size:11px; color:var(--txt-mut); margin-top:5px; font-family:Georgia,serif}

.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.check{display:flex; align-items:center; gap:8px; cursor:pointer; font-family:Georgia,serif; font-size:13px; color:var(--txt-dim)}
.check input{width:17px; height:17px; accent-color:var(--gold-dk); cursor:pointer}
.link-sub{color:var(--bronze); font-family:Georgia,serif; font-size:13px; text-decoration:none; cursor:pointer}
.link-sub:hover{color:var(--gold-lt); text-decoration:underline}

/* ---------- hlavní tlačítko ---------- */
.btn-thelyon{
  width:100%; min-height:48px; cursor:pointer;
  font-family:'Cinzel',serif; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  font-size:15px; color:#fff2cf;
  background:linear-gradient(180deg,var(--navy-lt) 0%,var(--navy) 55%,var(--navy-dk) 100%);
  border:1px solid var(--gold-dk); border-radius:9px;
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(212,175,55,.25);
  transition:transform .08s, box-shadow .15s, filter .15s;
}
.btn-thelyon:hover:not(:disabled){filter:brightness(1.12); box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(212,175,55,.5)}
.btn-thelyon:active:not(:disabled){transform:translateY(1px)}
.btn-thelyon:disabled{opacity:.6; cursor:not-allowed}
.btn-thelyon:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---------- přepínač login/register ---------- */
.auth-switch{text-align:center; margin-top:16px; font-family:Georgia,serif; font-size:13.5px; color:var(--txt-dim)}
.auth-switch a{color:var(--gold-lt); cursor:pointer; font-weight:600}
.auth-switch a:hover{text-decoration:underline}

/* ---------- hlášky ---------- */
.auth-msg:empty{display:none}
.auth-msg{margin-bottom:12px}
.message{
  padding:10px 12px; border-radius:8px; font-family:Georgia,serif; font-size:13.5px; line-height:1.4;
  border:1px solid; word-break:break-word;
}
.message.error{background:rgba(120,25,20,.35); border-color:rgba(224,106,90,.6); color:#ffcabf}
.message.success{background:rgba(30,90,40,.3); border-color:rgba(122,192,138,.55); color:#c8f0cf}

/* ---------- vytvoření postavy ---------- */
.char-avatar{
  width:104px; height:126px; margin:0 auto 16px; font-size:3em;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2d2417,#1a1410); border:2px solid var(--gold);
  border-radius:8px; box-shadow:0 0 20px rgba(212,175,55,.3); overflow:hidden;
}
.char-avatar img{width:100%; height:100%; object-fit:cover}
.opt-grid{display:grid; gap:10px}
.opt-grid.two{grid-template-columns:1fr 1fr}
.opt-card{
  background:rgba(10,13,20,.6); border:1px solid rgba(212,175,55,.25); border-radius:9px;
  padding:12px 8px; text-align:center; cursor:pointer; transition:border-color .12s, transform .1s, background .12s;
  display:flex; flex-direction:column; align-items:center; gap:3px; min-height:44px;
}
.opt-card:hover{border-color:var(--gold); transform:translateY(-2px); background:rgba(20,25,38,.7)}
.opt-card.selected{border-color:var(--gold); background:rgba(212,175,55,.14); box-shadow:0 0 0 1px var(--gold) inset}
.opt-ico{font-size:26px}
.opt-label{font-family:'Cinzel',serif; font-weight:700; font-size:14px; color:var(--gold-lt)}
.opt-desc{font-family:Georgia,serif; font-size:11px; color:var(--txt-mut)}

/* ---------- prvky hry (feature strip) ---------- */
.auth-features{
  width:100%; max-width:1000px; margin-top:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.feat{
  text-align:center; padding:12px 10px; border-radius:9px;
  background:rgba(14,18,30,.55); border:1px solid rgba(212,175,55,.18);
}
.feat-ico{font-size:22px; display:block; margin-bottom:5px}
.feat b{font-family:'Cinzel',serif; font-size:13px; color:var(--gold-lt); display:block; letter-spacing:.5px}
.feat small{font-family:Georgia,serif; font-size:11px; color:var(--txt-mut); line-height:1.35; display:block; margin-top:3px}

.auth-footer{color:var(--txt-mut); font-family:Georgia,serif; font-size:12px; letter-spacing:.5px}
.auth-footer a{color:var(--bronze); text-decoration:none} .auth-footer a:hover{color:var(--gold-lt)}

/* ---------- přepínání pohledů: VŽDY jen JEDEN formulář ---------- */
.page{display:none}
.page.active{display:block}
.auth-panels .page:not(.active){display:none}   /* login NEBO registrace, ne obojí */
/* character creation přebírá celou plochu, panely schová */
.auth-panels.hidden{display:none}
.auth-panels{max-width:460px}                     /* jeden vycentrovaný panel */
.mobile-only{display:block}                       /* přepínací odkaz vždy (i desktop) */

/* =========================================================================
   RESPONZIVITA
   ========================================================================= */
/* TABLET portrét + MOBIL */
@media (max-width:859px){
  .auth-features{grid-template-columns:repeat(2,1fr)}
}

/* MOBIL */
@media (max-width:600px){
  .auth-bg{background-position:center 28%}
  .auth-panels{max-width:100%}
  .auth-panels .page{max-width:100%}
  .auth-features{grid-template-columns:1fr 1fr; gap:8px}
  .feat small{display:none}                        /* jen ikona + název, ať to nezabere půl obrazovky */
  .auth-tagline{font-size:12px}
}

/* MALÝ MOBIL */
@media (max-width:400px){
  .auth-stage{padding-left:10px; padding-right:10px}
  .auth-card{padding:16px}
  .auth-features{grid-template-columns:1fr; gap:6px}
  .feat{display:flex; align-items:center; gap:10px; text-align:left; padding:9px 12px}
  .feat-ico{margin:0; font-size:18px}
}

/* KRAJINA na nízkých mobilech: nezabírat vertikálně tolik */
@media (max-height:560px) and (max-width:900px){
  .auth-features{display:none}
  .auth-brand{margin-top:0}
  .auth-logo{width:52px}
}

@media (prefers-reduced-motion:reduce){
  #particles{display:none}
  .btn-thelyon,.opt-card{transition:none}
}