/* =========================================================================
   Kinkstar — gemeinsame UI (Header, Login-Overlay, Coming-Soon)
   Alle Klassen sind mit "ks-" praefixiert, damit sie keine bestehenden
   Styles (z. B. .header/.container auf play) ueberschreiben.
   ========================================================================= */
:root{
  --ks-accent:#ff344c; --ks-accent-dark:#cc2138;
  --ks-bg-input:#2b2c2f; --ks-border:#3a3b3f; --ks-text:#f1f1f2; --ks-dim:#a7a8ac;
}

/* ---- Header ---- */
.ks-header{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 18px; background:rgba(20,20,22,.96);
  border-bottom:2px solid #000; box-shadow:0 2px 10px rgba(0,0,0,.45);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
}
.ks-brand{display:flex;align-items:center;gap:12px;min-width:0}
.ks-logo img{height:40px;display:block}
.ks-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ks-brand-title{font-weight:700;font-size:16px;color:#fff}
.ks-brand-tag{font-size:11px;color:var(--ks-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-menu{display:flex;gap:22px}
.ks-menu a{color:#fff;text-decoration:none;font-size:15px;transition:color .2s}
.ks-menu a:hover{color:var(--ks-accent)}
.ks-menu a.active{color:var(--ks-accent)}
.ks-menu a[hidden]{display:none}
.ks-right{display:flex;align-items:center;gap:12px}
.ks-coins{display:flex;align-items:center;gap:6px;color:var(--ks-dim);font-size:13px;white-space:nowrap}
.ks-coins .ks-ico{width:18px;height:18px}
.ks-lang{background:var(--ks-bg-input);color:#fff;border:1px solid var(--ks-border);border-radius:6px;padding:5px 8px;font-size:13px;cursor:pointer}
.ks-auth{display:inline-flex;align-items:center;gap:6px;background:var(--ks-accent);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.ks-auth:hover{background:var(--ks-accent-dark)}

/* ---- Coming-Soon-Seiten (body.ks-page) ---- */
body.ks-page{
  margin:0;min-height:100vh;color:var(--ks-text);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:#161618 url('https://kinkstar.online/metal.jpg') no-repeat center center fixed;
  background-size:cover;display:flex;flex-direction:column;
}
body.ks-page::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.7),rgba(10,10,12,.88));z-index:-1}
.ks-coming{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:40px 20px}
.ks-coming img{max-width:240px;width:55%;opacity:.95}
.ks-coming .ks-coming-text{font-size:26px;font-weight:700;letter-spacing:.5px}
.ks-coming .ks-coming-sub{font-size:14px;color:var(--ks-dim);max-width:420px}

.ks-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;color:var(--ks-dim);font-size:12px;background:rgba(20,20,22,.9);border-top:1px solid #000}
.ks-foot a{color:var(--ks-accent);text-decoration:none}

/* ---- Login-Overlay (verschwommener Hintergrund) ---- */
.ks-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ks-overlay[hidden]{display:none}
.ks-modal{
  width:330px;max-width:90vw;padding:24px;position:relative;
  background:rgba(26,26,28,.97);border:1px solid var(--ks-border);border-radius:12px;
  box-shadow:0 12px 44px rgba(0,0,0,.6);color:var(--ks-text);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
}
.ks-modal h2{margin:0 0 16px;text-align:center;font-size:20px}
.ks-modal label{display:block;font-size:13px;color:var(--ks-dim);margin:10px 0 4px}
.ks-modal input{width:100%;padding:9px 11px;background:var(--ks-bg-input);border:1px solid var(--ks-border);border-radius:7px;color:var(--ks-text);box-sizing:border-box;font-size:14px}
.ks-modal input:focus{outline:none;border-color:var(--ks-accent)}
.ks-modal .ks-submit{width:100%;margin-top:18px;padding:10px;background:var(--ks-accent);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer}
.ks-modal .ks-submit:hover{background:var(--ks-accent-dark)}
.ks-modal .ks-reg{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--ks-accent);text-decoration:none}
.ks-modal .ks-note{text-align:center;font-size:12px;color:var(--ks-dim);margin-top:12px}
.ks-modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--ks-dim);font-size:20px;line-height:1;cursor:pointer}
.ks-modal-close:hover{color:var(--ks-accent)}

/* ---- Responsive ---- */
/* Schmal: EINE Zeile (Logo | wischbares Menue | Sprache | Login). Frueher brach der
   Header auf drei Zeilen um - auf play (fixer Kopf) kostete das ~1/4 der Hoehe. */
@media (max-width:760px){
  .ks-header{flex-wrap:nowrap;gap:8px;padding:6px 10px}
  .ks-brand{flex:0 0 auto;gap:0}
  .ks-brand-text{display:none}
  .ks-logo img{height:32px}
  .ks-menu{flex:1 1 auto;min-width:0;gap:14px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .ks-menu::-webkit-scrollbar{display:none}
  .ks-menu a{font-size:13px;white-space:nowrap}
  .ks-right{flex:0 0 auto;gap:6px}
  .ks-coins{display:none}
  .ks-lang{padding:4px;font-size:12px}
  .ks-auth{padding:6px 10px;font-size:13px}
}