/* =============================================================
   Capostone – Noir / Prohibition-Ära
   Akzent: Messing-Gold. Aktion: Oxblood. Sonst ruhig.
   ============================================================= */

:root{
  --ink:        #0e0f12;   /* Hintergrund, fast schwarz   */
  --concrete:   #16181e;   /* Panel                        */
  --concrete-2: #1d2027;   /* Eingaben                     */
  --smoke:      #2c3038;   /* Linien/Rahmen                */
  --bone:       #e8e3d8;   /* Text                         */
  --bone-dim:   #9b958a;   /* Sekundärtext                 */
  --brass:      #c8a04a;   /* Akzent (sparsam!)            */
  --brass-soft: #8a7233;
  --oxblood:    #8c2533;   /* primäre Aktion               */
  --oxblood-hi: #a92e3e;
  --err:        #d4736f;
  --ok:         #7fae7a;

  --r: 3px;                /* kantig, kaum gerundet        */
}

*{ box-sizing:border-box; }

html,body{ margin:0; }

body{
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a1c22 0%, var(--ink) 60%) fixed;
  color:var(--bone);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* feiner Grain als Atmosphäre, dezent */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.shell{
  position:relative; z-index:1;
  flex:1; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1.25rem;
}

/* ---- Auth-Karte: das Signature-Element ---------------------- */
.card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--concrete) 0%, #121419 100%);
  border:1px solid var(--smoke);
  border-radius:var(--r);
  padding:2.25rem 2rem 2rem;
  box-shadow:0 24px 60px -30px #000, inset 0 1px 0 #ffffff08;
  position:relative;
}
/* Messing-Hairline oben – „gestempelt" */
.card::before{
  content:""; position:absolute; left:1.75rem; right:1.75rem; top:0;
  height:2px; background:linear-gradient(90deg, transparent, var(--brass), transparent);
}

.brand{
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:700; font-size:2.1rem; letter-spacing:.42em;
  text-transform:uppercase; text-indent:.42em;
  margin:0 0 .15rem; color:var(--bone);
}
.brand b{ color:var(--brass); font-weight:700; }
.tagline{
  margin:0 0 1.75rem; color:var(--bone-dim);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
}

h1.h{
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:1.05rem; color:var(--bone-dim);
  margin:0 0 1.25rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--smoke);
}

/* ---- Formular ---------------------------------------------- */
.field{ margin-bottom:1.05rem; }
.field label{
  display:block; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.4rem;
}
.field input{
  width:100%; padding:.7rem .8rem;
  background:var(--concrete-2); color:var(--bone);
  border:1px solid var(--smoke); border-radius:var(--r);
  font-size:.98rem; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:#6b665d; }
.field input:focus{
  outline:none; border-color:var(--brass-soft);
  box-shadow:0 0 0 3px #c8a04a22;
}
.field--bad input{ border-color:var(--err); }
.field .msg{ margin-top:.35rem; font-size:.78rem; color:var(--err); }

.btn{
  width:100%; margin-top:.5rem; padding:.8rem 1rem;
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.92rem; color:var(--bone); cursor:pointer;
  background:linear-gradient(180deg, var(--oxblood-hi), var(--oxblood));
  border:1px solid #6f1d28; border-radius:var(--r);
  transition:filter .15s, transform .05s;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px #c8a04a55; }

.alt{
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--smoke);
  font-size:.85rem; color:var(--bone-dim); text-align:center;
}
.alt a{ color:var(--brass); text-decoration:none; }
.alt a:hover{ text-decoration:underline; }

/* ---- Meldungen --------------------------------------------- */
.note{
  border-radius:var(--r); padding:.7rem .85rem; margin-bottom:1.25rem;
  font-size:.88rem; border:1px solid;
}
.note--error{ background:#3a1a1d; border-color:#7c2f37; color:#f0c9c7; }
.note--ok{ background:#1b2a1c; border-color:#37562f; color:#cfe3c9; }

/* ---- Dashboard (Minimal) ----------------------------------- */
.dash{ width:100%; max-width:680px; }
.dash .stat-row{ display:flex; gap:1px; background:var(--smoke);
  border:1px solid var(--smoke); border-radius:var(--r); overflow:hidden; margin:1.25rem 0; }
.dash .stat{ flex:1; background:var(--concrete); padding:1rem; text-align:center; }
.dash .stat .k{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); }
.dash .stat .v{ font-family:"Oswald", sans-serif; font-size:1.5rem; color:var(--brass); margin-top:.2rem; }

.foot{
  position:relative; z-index:1; text-align:center;
  padding:1.25rem; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:#54504a;
}

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

/* =============================================================
   In-Game-Chrome (Topbar, Navigation, Listen, Komponenten)
   ============================================================= */
.topbar{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem 1.25rem;
  background:linear-gradient(180deg,#15171d,#101218);
  border-bottom:1px solid var(--smoke);
}
.topbar .brand{font-size:1.15rem;letter-spacing:.3em;margin:0;}
.topbar nav{display:flex;gap:1.1rem;flex:1;}
.topbar nav a{
  color:var(--bone-dim);text-decoration:none;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.2rem 0;
  border-bottom:2px solid transparent;
}
.topbar nav a:hover{color:var(--bone);}
.topbar nav a.active{color:var(--brass);border-bottom-color:var(--brass);}
.topbar .purse{display:flex;gap:1.1rem;font-size:.82rem;}
.topbar .purse .k{color:var(--bone-dim);text-transform:uppercase;font-size:.66rem;letter-spacing:.1em;}
.topbar .purse .v{font-family:"Oswald",sans-serif;color:var(--brass);}
.topbar .lo{color:var(--bone-dim);text-decoration:none;font-size:.78rem;}
.topbar .lo:hover{color:var(--err);}

.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:1.5rem 1.25rem 3rem;}
.wrap h1{font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;font-size:1.4rem;margin:.2rem 0 1.2rem;}
.wrap h2{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:1rem;color:var(--bone-dim);
  margin:2rem 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--smoke);}

.panel{background:var(--concrete);border:1px solid var(--smoke);border-radius:var(--r);}

.ltable{width:100%;border-collapse:collapse;font-size:.9rem;}
.ltable th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--smoke);}
.ltable td{padding:.6rem .7rem;border-bottom:1px solid #20232a;}
.ltable tr:last-child td{border-bottom:none;}
.ltable .num{text-align:right;font-family:"Oswald",sans-serif;}

.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;
  letter-spacing:.06em;border:1px solid var(--smoke);color:var(--bone-dim);}
.pill.q1{color:#9b958a;} .pill.q2{color:#7fae7a;} .pill.q3{color:#5b9bd5;}
.pill.q4{color:#b48ce0;} .pill.q5{color:var(--brass);border-color:var(--brass-soft);}

.btn-sm{padding:.4rem .8rem;font-family:"Oswald",sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--bone);
  background:linear-gradient(180deg,var(--oxblood-hi),var(--oxblood));
  border:1px solid #6f1d28;border-radius:var(--r);cursor:pointer;}
.btn-sm:hover{filter:brightness(1.12);}
.btn-sm:disabled{background:var(--smoke);border-color:var(--smoke);color:var(--bone-dim);cursor:not-allowed;filter:none;}
.btn-sm.alt{background:var(--concrete-2);border-color:var(--brass-soft);color:var(--bone);}
.btn-sm.alt:hover{filter:brightness(1.15);border-color:var(--brass);}

.bar{height:6px;background:#20232a;border-radius:3px;overflow:hidden;min-width:80px;}
.bar > i{display:block;height:100%;background:var(--brass);}

.tabs{display:flex;gap:.5rem;margin-bottom:1rem;}
.tabs a{padding:.4rem .9rem;border:1px solid var(--smoke);border-radius:var(--r);
  text-decoration:none;color:var(--bone-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
.tabs a.active{color:var(--brass);border-color:var(--brass-soft);}

.empty{color:var(--bone-dim);font-size:.9rem;padding:1rem .2rem;}
.qty{width:64px;padding:.4rem;background:var(--concrete-2);color:var(--bone);
  border:1px solid var(--smoke);border-radius:var(--r);}