/* Tungsten (für Titel im Formular) */
@font-face{
  font-family:"Tungsten";
  src:
    url("../fonts/Tungsten-Bold.woff2") format("woff2"),
    url("../fonts/Tungsten-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:block;
}

:root{
  --paper:#ece8e1;
  --bg:#0b1721;
  --accent:#ff4655;
  --text:#0f1923;
  --muted:rgba(255,255,255,.72);
  --shadow: 0 30px 80px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#05080c;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* ==== Background (nur das Bild) ==== */
.auth{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  overflow:hidden;
}

.auth::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("assets/valorant_auth_background.jpg") center / cover no-repeat;
  z-index:0;
}

/* optional: Agent links (wenn Datei existiert) */
.agent{
  position:absolute;
  left:80px;
  bottom:0;
  width:min(520px, 38vw);
  height:auto;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  opacity:.98;
}

/* Top-left Riot logo */
.top-left{
  position:absolute;
  left:44px;
  top:36px;
  z-index:3;
}

.riot-logo{
  height: clamp(34px, 3.5vw, 98px);
  width:auto;
  display:block;
  filter: brightness(0) invert(1);
  opacity:.95;
}

/* ==== Center Card ==== */
.card{
  position:relative;
  z-index:4;
  width:min(560px, calc(100% - 40px));
  background:#ffffff;
  box-shadow: var(--shadow);
  padding:52px 64px 38px;
}

.card h1{
  margin:0 0 22px 0;
  text-align:center;
  font-size:24px;
  font-weight:700;
  color:#0f1923;
}

.form-msg{
  min-height: 18px;
  text-align:center;
  margin: 6px 0 10px;
  font-size: 12px;
  color: rgba(15,25,35,.75);
}

.form-msg.is-error{ color: #c0262d; }
.form-msg.is-ok{ color: #1a7f37; }

/* Title im Card: Tungsten */
body.use-tungsten .card h1{
  font-family: "Tungsten", Inter, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size:34px;
}

.field{ margin:14px 0; }

.input{ position:relative; }

/* Input im Screenshot-Look (≈10% niedriger) */
.input input{
  width:100%;
  padding:20px 14px 10px;       /* vorher 22/12 -> ~10% weniger Höhe */
  border:2px solid transparent; /* Rahmen kommt erst bei Focus */
  outline:none;
  background:#f1f1f1;
  font-size:14px;
  color:#0f1923;
  border-radius:2px;
  transition: border-color .12s ease, background .12s ease;
  font-weight:800;              /* eingegebener Text fett */
}

/* Label sitzt IN der Box */
.input label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(15,25,35,.45);
  pointer-events:none;
  transition: all .12s ease;
}

/* Focus: schwarzer Rahmen wie Screenshot */
.input input:focus{
  border-color:#0f1923;
  background:#ffffff;
}

/* Wenn Fokus oder Text drin: Label nach oben "floaten" */
.input input:focus + label,
.input input:not(:placeholder-shown) + label{
  top:7px;
  transform:none;
  font-size:9px;
  color:rgba(15,25,35,.55);
}

/* Register-only Felder */
.register-only{ display:none; }
body.mode-register .register-only{ display:block; }

/* Register-only rows sollen flex sein */
body.mode-register .row.register-only{ display:flex; }

/* Login-only Felder */
.login-only{ display:block; }
body.mode-register .login-only{ display:none; }

/* stay logged in / terms */
.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:rgba(15,25,35,.70);
  font-size:12px;
}

.row input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color: var(--accent);
}

/* Submit button (Layout unverändert lassen) */
.submit-wrap{
  display:flex;
  justify-content:center;
  margin:30px 0 18px;
}

.submit{
  width:74px;
  height:74px;
  border-radius:28px;               /* Layout bleibt wie bei dir */
  border:2px solid rgba(15,25,35,.14);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .12s ease, border-color .12s ease, filter .12s ease, opacity .12s ease;
}

.submit svg{
  width:26px;
  height:26px;
  fill:rgba(15,25,35,.45);
}

/* Disabled */
.submit:disabled{
  opacity:.70;
  cursor: default;
}

/* Ready: rot wie im Screenshot */
.submit.is-ready{
  background: var(--accent);
  border-color: var(--accent);
  opacity:1;
}

.submit.is-ready svg{
  fill:#0f1923;
}

.submit.is-ready:hover{
  filter: brightness(.98);
}

/* bottom links */
.below{
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(15,25,35,.55);
  line-height:1.9;
}

.below a{
  display:inline-block;
  color:rgba(15,25,35,.55);
}

.below a:hover{ color:rgba(15,25,35,.85); }

/* Link untere Leiste (wie Screenshot links unten) */
.footerlinks{
  position:absolute;
  left:44px;
  bottom:22px;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
}

.footerlinks a:hover{ color:#fff; }

.footerfine{
  position:absolute;
  left:44px;
  bottom:6px;
  z-index:3;
  font-size:10px;
  color:rgba(255,255,255,.45);
  max-width:800px;
}

/* Responsive */
@media (max-width: 980px){
  .agent{ display:none; }
  .top-left{ left:18px; top:18px; }
  .footerlinks, .footerfine{ left:18px; }
  .card{ padding:44px 22px 30px; }
}

/* Login Error Look */
/* Violetter Hinweistext wie im Screenshot */
.login-hint{
  margin: 10px auto 22px;
  max-width: 420px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #b400ff; /* kräftiges Riot-Lila */
}

/* Inputs violett markieren bei Login-Error */
.input.is-error input{
  background: rgba(180, 0, 255, 0.08);        /* leicht violett */
  border-color: rgba(180, 0, 255, 0.55);      /* kräftiger Rahmen */
}

.input.is-error input:focus{
  border-color: rgba(180, 0, 255, 0.75);
}

/* Inline Error unter Feld (violett wie Screenshot) */
.inline-error{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  color:#b400ff;
  font-size:13px;
  font-weight:600;
}

.inline-error__icon{
  width:14px;
  height:14px;
  display:inline-block;
  background: #b400ff;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position:relative;
}

.inline-error__icon::after{
  content:"!";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:10px;
  font-weight:900;
}

/* sorgt dafür, dass hidden IMMER gewinnt */
.inline-error[hidden]{
  display: none !important;
}