:root{
  --bg-0:#0d0a14; --bg-1:#14101f; --bg-2:#1c1730; --bg-3:#2a2245;
  --border:#3a3055; --border-strong:#5a4a7c;
  --text:#ffffff; --text-dim:#d8d0e8; --text-mute:#9a91b0;
  --accent:#8b5cf6; --accent-2:#c084fc; --accent-dim:#6d28d9;
  --gold:#f59e0b; --gold-2:#fbbf24; --bad:#ef4444; --good:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:'IBM Plex Sans',sans-serif; color:var(--text);
  background:radial-gradient(1200px 800px at 50% -10%, #1c1730 0%, #0d0a14 60%);
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
header{display:flex; align-items:center; gap:12px; padding:22px 28px; border-bottom:1px solid var(--border)}
.brand-icon{font-size:30px}
.brand b{font-family:'Cinzel',serif; font-size:22px; letter-spacing:.02em}
.brand small{display:block; color:var(--text-mute); font-size:12px; font-family:'IBM Plex Mono',monospace; letter-spacing:.12em}
header .spacer{flex:1}
header .logout{font-size:13px; color:var(--text-mute); cursor:pointer; padding:8px 14px; border:1px solid var(--border); border-radius:9px}
header .logout:hover{color:var(--text); border-color:var(--border-strong)}
main{flex:1; display:flex; align-items:center; justify-content:center; padding:5vh 20px}

/* ---- Login / Erstanmeldung: zentrierte Karte ---- */
.card{
  width:100%; max-width:440px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:20px; padding:34px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--gold-2); text-transform:uppercase}
h1{font-family:'Cinzel',serif; font-size:30px; margin:8px 0 4px}
.sub{color:var(--text-mute); font-size:14px; margin-bottom:22px; line-height:1.5}
label{display:block; font-size:13px; color:var(--text-dim); margin:16px 0 6px; letter-spacing:.02em}
input{
  width:100%; padding:14px 15px; font-size:16px; font-family:'IBM Plex Sans',sans-serif;
  color:var(--text); background:var(--bg-0); border:1px solid var(--border-strong);
  border-radius:11px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:#6a6183}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,92,246,.25)}
input#aid{text-transform:uppercase; letter-spacing:.08em; font-family:'IBM Plex Mono',monospace}
.btn{
  width:100%; margin-top:24px; padding:15px; font-size:16px; font-weight:600; cursor:pointer;
  color:#1a1330; background:linear-gradient(180deg, var(--gold-2), var(--gold));
  border:none; border-radius:11px; letter-spacing:.03em; transition:filter .15s, transform .05s;
}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)}
.btn[disabled]{filter:grayscale(.5) brightness(.8); cursor:default}
.btn.ghost{background:transparent; color:var(--text-dim); border:1px solid var(--border-strong)}
.msg{margin-top:16px; min-height:20px; font-size:14px; text-align:center}
.msg.err{color:var(--bad)} .msg.ok{color:var(--good)} .msg.info{color:var(--text-mute)}
.hint{margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:13px; color:var(--text-mute); line-height:1.6}
.hint b{color:var(--text-dim)}

/* ---- Profil / Dashboard ---- */
.profil{width:100%; max-width:720px; display:flex; flex-direction:column; gap:20px}
.p-head{display:flex; align-items:center; gap:20px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:20px; padding:24px}
.p-foto{width:96px; height:96px; border-radius:16px; object-fit:cover; border:2px solid var(--border-strong); background:var(--bg-0)}
.p-foto.noimg{display:flex; align-items:center; justify-content:center; font-size:46px}
.p-name{font-family:'Cinzel',serif; font-size:28px; line-height:1.1}
.p-id{font-family:'IBM Plex Mono',monospace; color:var(--text-mute); font-size:14px; letter-spacing:.06em; margin-top:4px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.stat{background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border); border-radius:16px; padding:20px 12px; text-align:center}
.stat .val{font-family:'Cinzel',serif; font-size:34px; color:var(--gold-2); line-height:1}
.stat .val.mute{color:var(--text-mute); font-size:26px}
.stat .lab{font-size:13px; color:var(--text-mute); margin-top:8px}
.stat .note{font-size:11px; color:var(--text-mute); margin-top:4px; font-style:italic; opacity:.8}
.sec{background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border); border-radius:18px; padding:22px}
.sec h2{font-family:'Cinzel',serif; font-size:20px; margin:0 0 14px}
.qr-wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.qr-box{width:180px; height:180px; background:#fff; border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:center}
.qr-box svg, .qr-box canvas{width:100%; height:100%; display:block}
.qr-info .code{font-family:'IBM Plex Mono',monospace; font-size:24px; letter-spacing:.12em; color:var(--gold-2)}
.qr-info p{color:var(--text-mute); font-size:14px; line-height:1.6; max-width:340px}
.comp-empty{color:var(--text-mute); font-style:italic; font-size:14px}
.comp-row{padding:10px 0; border-bottom:1px solid var(--border); font-size:15px}
.comp-row:last-child{border-bottom:none}

/* ---- Spielverlauf ("Meine Spiele") ---- */
.game-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); flex-wrap:wrap}
.game-row:last-child{border-bottom:none}
.game-left{display:flex; align-items:baseline; gap:10px; min-width:0}
.game-metric{font-family:'Cinzel',serif; font-size:19px; color:var(--gold-2); white-space:nowrap}
.game-name{font-size:13px; color:var(--text-mute)}
.game-meta{font-size:13px; color:var(--text-mute); text-align:right}

/* ---- Adresse: Banner "Bitte zu Ende registrieren" + Formular ---- */
.adr-box{background:linear-gradient(180deg, rgba(245,158,11,.12), var(--bg-1)); border:1px solid var(--gold); border-radius:18px; padding:22px}
.adr-box.edit{background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border-color:var(--border-strong)}
.adr-title{font-family:'Cinzel',serif; font-size:20px; color:var(--gold-2)}
.adr-box.edit .adr-title{color:var(--text)}
.adr-sub{color:var(--text-dim); font-size:14px; margin:6px 0 14px; line-height:1.5}
.adr-lab{display:block; font-size:12px; color:var(--text-dim); margin:12px 0 5px}
.adr-inp{width:100%; padding:12px 13px; font-size:15px; color:var(--text); background:var(--bg-0); border:1px solid var(--border-strong); border-radius:10px; outline:none}
.adr-inp:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,92,246,.22)}
.adr-row{display:flex; gap:10px}
.adr-msg{min-height:18px; font-size:13px; margin-top:8px; color:var(--bad)}
.adr-btns{display:flex; gap:10px; margin-top:16px}
.adr-btns .btn{width:auto; margin-top:0; flex:1; padding:13px}

/* ---- "Meine Daten"-Raster ---- */
.data-grid{display:grid; grid-template-columns:120px 1fr; gap:10px 14px; font-size:15px}
.data-grid .dk{color:var(--text-mute)}
.data-grid .dv{color:var(--text)}
.data-grid .dv-empty{color:var(--text-mute)}
footer{padding:18px 28px; border-top:1px solid var(--border); color:var(--text-mute); font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
footer .v{font-family:'IBM Plex Mono',monospace}
/* ---- QR-Vollbild (auf Tippen: großer QR auf weißem Grund fürs Scannen) ---- */
#qrFull{position:fixed; inset:0; background:#ffffff; z-index:9999; display:none; align-items:center; justify-content:center; cursor:pointer}
#qrFull .qf-inner{display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px}
#qrFull .qf-qr{line-height:0}
#qrFull .qf-qr svg{display:block}
#qrFull .qf-code{font-family:'IBM Plex Mono',monospace; font-size:22px; letter-spacing:.12em; color:#12151b; font-weight:700}
#qrFull .qf-hint{font-size:13px; color:#666; text-align:center; max-width:82vw}
.qr-box{cursor:pointer}
.qr-tap{font-size:12px; color:var(--text-mute); margin-top:8px}

/* ---- Handy / kleine Bildschirme ---- */
@media (max-width:600px){
  header{padding:16px 16px}
  .brand b{font-size:20px}
  header .logout{padding:7px 12px; font-size:12px}
  main{padding:18px 12px}
  .card{padding:26px 20px}
  h1{font-size:25px}
  .profil{gap:14px}
  .p-head{gap:14px; padding:18px}
  .p-foto{width:74px; height:74px; border-radius:13px}
  .p-foto.noimg{font-size:36px}
  .p-name{font-size:22px}
  .p-id{font-size:13px}
  .stats{gap:9px}
  .stat{padding:15px 6px; border-radius:14px}
  .stat .val{font-size:27px}
  .stat .val.mute{font-size:20px}
  .stat .lab{font-size:11px}
  .stat .note{font-size:10px}
  .sec{padding:17px}
  .sec h2{font-size:18px}
  .qr-wrap{flex-direction:column; align-items:center; gap:14px}
  .qr-box{width:100%; max-width:230px; height:auto; aspect-ratio:1/1; margin:0 auto}
  .qr-info{text-align:center; width:100%}
  .qr-info .code{font-size:20px}
  .qr-info p{max-width:100%}
}