html,body{margin:0;padding:0;height:100%}
body{position:relative;overflow:hidden;background:#000;font-family:sans-serif}

/* 1.) Canvas (Matrix) */
#matrixCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* 2.) ===== TICKER ===== */
.ticker{position:fixed;left:0;right:0;top:0;z-index:3;pointer-events:none;padding-top:18px}
.ticker-track{display:flex;white-space:nowrap;overflow:hidden}
.ticker-group{display:inline-flex;gap:36px;align-items:center;will-change:transform;animation:tickerMove 14s linear infinite}
.ticker-text{display:inline-block;color:#C00E04;font-weight:800;font-size:28px;letter-spacing:1px;text-shadow:0 0 10px rgba(255,0,0,.40),0 0 22px rgba(255,0,0,.20)}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* 3.) ===== LEBKY (generuje mini.js) ===== */
#skulls{position:fixed;inset:0;z-index:1;pointer-events:none}

/* 3.1.) LADĚNÍ OČÍ – výchozí hodnoty */
.skull-wrap{
  --eyeTop:43%;
  --eyeLeft1:39%;
  --eyeLeft2:58%;
  --eyeSize:7%;

  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  width:min(60vmin,520px);
  height:auto;
  z-index:1;
  pointer-events:none;
  will-change:transform,filter,opacity;
  transition:transform 1800ms ease-in-out,filter 900ms ease-in-out,opacity 900ms ease-in-out;
  opacity:.95
}
.skull-wrap.glow{filter:drop-shadow(0 0 18px rgba(120,255,120,.55)) drop-shadow(0 0 40px rgba(80,255,80,.25))}
.skull-img{display:block;width:100%;height:auto;pointer-events:none}

/* 3.2.) OČI – overlay (2×), blikají synchronně */
.skull-wrap::before,
.skull-wrap::after{
  content:"";
  position:absolute;
  top:var(--eyeTop);
  width:var(--eyeSize);
  height:var(--eyeSize);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,60,60,1) 0%,rgba(255,0,0,.9) 35%,rgba(255,0,0,0) 70%);
  filter:drop-shadow(0 0 10px rgba(255,0,0,.9));
  opacity:1;
  animation:eyeBlink var(--blinkDur,4.6s) infinite;
  animation-delay:var(--blinkDelay,0s)
}
.skull-wrap::before{left:var(--eyeLeft1)}
.skull-wrap::after{left:var(--eyeLeft2)}
@keyframes eyeBlink{
  0%{opacity:1}
  84%{opacity:1}
  86%{opacity:.08}
  88%{opacity:1}
  94%{opacity:.12}
  96%{opacity:1}
  100%{opacity:1}
}

/* 4.) ===== LOGIN ===== */
.login-container{
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  background:rgba(0,0,0,.4);
  padding:10px 20px;
  border-radius:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  z-index:4;
}

.login-error{
  width:100%;
  text-align:center;
  color:#ffaaaa;
  font-size:13px;
  margin-bottom:4px;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="submit"]{
  background:rgba(0,0,0,.2);
  border:1px solid #444;
  color:#777;
  padding:4px 8px;
  border-radius:4px;
  font-size:14px;
  outline:none;
  cursor:default;

  /* 5.) pomocné pro stabilitu vykreslení */
  -webkit-appearance:none;
  appearance:none;
  background-clip:padding-box;
}

/* 6.) Chrome autofill – pojistka (i když autocomplete je off) */
.login-container input:-webkit-autofill,
.login-container input:-webkit-autofill:hover,
.login-container input:-webkit-autofill:focus{
  -webkit-text-fill-color:#777 !important;
  caret-color:#777 !important;
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.2) inset !important;
  box-shadow:0 0 0 1000px rgba(0,0,0,.2) inset !important;
}

/* 7.) ===== 2FA BOX (sjednoceno se stylem indexu) ===== */
.auth-box{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  background:rgba(0,0,0,.4);
  padding:18px 22px;
  border-radius:8px;
  min-width:320px;
  max-width:min(92vw,420px);
  box-shadow:0 0 10px rgba(0,0,0,.6);
  color:#e5e7eb
}
.auth-title{font-size:18px;text-align:center;margin:0 0 6px 0}
.auth-sub{font-size:13px;text-align:center;color:#9ca3af;margin:0 0 10px 0}
.auth-user{font-size:13px;text-align:center;color:#cbd5e1;margin:0 0 12px 0}
.auth-error{font-size:13px;text-align:center;color:#ffaaaa;margin:0 0 10px 0}

.auth-form{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0}
.auth-code{
  background:rgba(0,0,0,.2);
  border:1px solid #444;
  color:#777;
  padding:6px 10px;
  border-radius:4px;
  font-size:16px;
  outline:none;
  width:140px;
  text-align:center;
  letter-spacing:2px
}
.auth-submit{
  background:rgba(0,0,0,.2);
  border:1px solid #444;
  color:#777;
  padding:6px 10px;
  border-radius:4px;
  font-size:14px;
  outline:none;
  cursor:default
}

.auth-close{position:absolute;right:10px;top:10px;margin:0}
.auth-close-btn{
  width:28px;height:28px;line-height:28px;
  border-radius:50%;
  border:1px solid #444;
  background:rgba(0,0,0,.35);
  color:#ddd;
  cursor:default;
  padding:0;
  font-size:18px;
  user-select:none
}

/* 7.1.) Oko uvnitř pole hesla (vpravo) */
.pass-wrap{position:relative;display:inline-block}
.pass-wrap input[type="password"],
.pass-wrap input[type="text"]{padding-right:36px} /* místo pro ikonu */

.pass-wrap .pass-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  user-select:none;
  color:#777
}
.pass-wrap .pass-toggle svg{width:18px;height:18px;display:block}

/* 7.2.) 2FA: ikona v close tlačítku */
.auth-close-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:auto;
  height:auto;
  line-height:1;

  border:0;
  border-radius:0;
  background:transparent;

  padding:0;
  margin:0;

  cursor:pointer;
  user-select:none;
}

.auth-close-ico{
  width:60px;
  height:60px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,0,0,.55));
}

/* 7.3.) 2FA close: vynucení bez kolečka */
.auth-box .auth-close{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
}

.auth-box .auth-close .auth-close-btn{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  padding:0 !important;
}

/* 7.4.) 2FA close: mini lebka s pulsem + rychlejší blink očí */
.auth-box .auth-skull,
.login-container .auth-skull{
  --eyeTop:46%; 
  --eyeLeft1:38%; 
  --eyeLeft2:58%; 
  --eyeSize:7%;
  --blinkDur:1.35s;
  --blinkDelay:0s;

  position:relative;
  display:inline-block;

  transform-origin:center center;
  animation:authSkullPulse 1400ms ease-in-out infinite;
}

.auth-box .auth-skull .auth-close-ico,
.login-container .auth-skull .auth-close-ico{
  width:60px;
  height:60px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,0,0,.55));
  position:relative;
  z-index:1;
}

/* oči přes pseudo-elementy (stejný princip jako .skull-wrap, jen zmenšené a rychlejší) */
.auth-box .auth-skull::before,
.auth-box .auth-skull::after,
.login-container .auth-skull::before,
.login-container .auth-skull::after{
  content:"";
  position:absolute;
  top:var(--eyeTop);
  width:var(--eyeSize);
  height:var(--eyeSize);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;  
  

  background:radial-gradient(circle,rgba(255,60,60,1) 0%,rgba(255,0,0,.9) 35%,rgba(255,0,0,0) 70%);
  filter:drop-shadow(0 0 10px rgba(255,0,0,.9));
  opacity:1;

  animation:authEyeBlink var(--blinkDur) infinite;
  animation-delay:var(--blinkDelay);
}

.auth-box .auth-skull::before{left:var(--eyeLeft1)}
.auth-box .auth-skull::after{left:var(--eyeLeft2)}
.login-container .auth-skull::before{left:var(--eyeLeft1)}
.login-container .auth-skull::after{left:var(--eyeLeft2)}

@keyframes authSkullPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.22)}
  100%{transform:scale(1)}
}

/* rychlejší verze blinku pro mini lebku (nezasahuje velké lebky) */
@keyframes authEyeBlink{
  0%{opacity:1}
  78%{opacity:1}
  82%{opacity:.08}
  86%{opacity:1}
  92%{opacity:.12}
  96%{opacity:1}
  100%{opacity:1}
}