/* ════════════════════════════════════════════════════
   INTRO SYSTEM
   ════════════════════════════════════════════════════ */

#intro-root { position:fixed; inset:0; z-index:500; background:var(--bg);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }

.intro-screen { min-height:100dvh; display:flex; flex-direction:column;
  padding:0 0 80px; position:relative; overflow:hidden; }

/* ── Title screen ────────────────────────────────────── */
.title-screen { align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 28%, rgba(45,185,85,.09) 0%, transparent 68%),
             linear-gradient(180deg,#010603 0%,#030a04 60%,#050d06 100%); }
.title-content { display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:48px 24px; text-align:center; position:relative; z-index:2; }

.title-logo { font-size:68px; line-height:1;
  filter:drop-shadow(0 0 18px rgba(45,185,85,.5));
  animation:logoGlow 3.5s ease-in-out infinite; }
@keyframes logoGlow {
  0%,100% { filter:drop-shadow(0 0 18px rgba(45,185,85,.45)); }
  50%      { filter:drop-shadow(0 0 40px rgba(45,185,85,.85)) drop-shadow(0 0 80px rgba(45,185,85,.3)); }
}

.title-h1 { font-family:var(--fd); font-size:clamp(56px,15vw,86px);
  letter-spacing:5px; line-height:.88; color:var(--t3); margin:0;
  text-shadow:0 0 60px rgba(45,185,85,.18); }
.title-accent { color:var(--g); }
.title-eyebrow { font-family:var(--fm); font-size:9px; letter-spacing:4px;
  text-transform:uppercase; color:var(--t1); margin-bottom:-6px; }
.title-sub { font-family:var(--fs); font-style:italic; font-size:13px;
  color:var(--t2); letter-spacing:.3px; }
.title-version { font-size:9px; color:var(--t0); font-family:var(--fm); }
.title-buttons { display:flex; flex-direction:column; gap:10px;
  width:100%; max-width:300px; margin-top:10px; }
.title-legal { font-size:9px; color:var(--t0); font-family:var(--fm);
  text-align:center; max-width:280px; line-height:1.7; margin-top:6px; }

/* Decorative scanline overlay */
.title-screen::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px); }

/* ── Intro button ────────────────────────────────────── */
.intro-btn { display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 24px; border-radius:var(--r); font-family:var(--fd); font-size:22px;
  letter-spacing:2.5px; color:var(--t3); border:1px solid var(--b1);
  background:rgba(12,22,14,.82); cursor:pointer; transition:all .2s; width:100%; }
.intro-btn:hover { background:rgba(18,34,20,.92); border-color:var(--b2);
  transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.45), var(--shg); }
.intro-btn.primary { background:linear-gradient(135deg,rgba(45,185,85,.2),rgba(45,185,85,.08));
  border-color:rgba(45,185,85,.48); color:var(--gh); box-shadow:var(--shg); }
.intro-btn.primary:hover { background:linear-gradient(135deg,rgba(45,185,85,.3),rgba(45,185,85,.14));
  box-shadow:0 0 44px rgba(45,185,85,.28); }
.intro-btn.disabled { opacity:.35; cursor:default; pointer-events:none; }

.intro-back { position:absolute; top:16px; left:16px; z-index:10;
  background:rgba(3,7,3,.84); border:1px solid var(--b0); border-radius:var(--rs);
  padding:7px 12px; font-family:var(--fu); font-size:11px; color:var(--t2);
  cursor:pointer; transition:all .15s; backdrop-filter:blur(8px); }
.intro-back:hover { border-color:var(--b1); color:var(--t3); }

.intro-title { font-family:var(--fd); font-size:30px; letter-spacing:3px;
  color:var(--t3); padding:54px 20px 0; text-align:center; }
.intro-sub { font-size:11px; font-family:var(--fm); letter-spacing:1.5px;
  color:var(--t1); text-align:center; padding:4px 20px 0; }

/* ── Character grid ──────────────────────────────────── */
.char-grid { display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; padding:10px 14px 0; }

.char-card { border:1px solid var(--b0); border-radius:var(--r); background:var(--raised);
  overflow:hidden; cursor:pointer; transition:all .22s cubic-bezier(.2,0,.3,1);
  display:flex; flex-direction:column; }
.char-card:hover { transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(0,0,0,.45); border-color:var(--b1); }
.char-card.selected { transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(0,0,0,.5); }

.char-header { padding:13px 12px 9px; display:flex; align-items:flex-start; gap:9px; }
.char-portrait { border-radius:var(--rs); overflow:hidden; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--b0); }
.char-meta { flex:1; min-width:0; }
.char-name { font-family:var(--fu); font-size:13px; font-weight:700;
  margin-bottom:3px; line-height:1.2; }
.char-diff { font-size:8.5px; font-family:var(--fm); letter-spacing:1.5px;
  text-transform:uppercase; padding:2px 6px; border-radius:3px;
  border:1px solid currentColor; display:inline-block; opacity:.65; }
.char-body { padding:0 12px 10px; }
.char-desc { font-size:11px; color:var(--t2); line-height:1.5; margin-bottom:7px; }
.char-stats { display:flex; gap:5px; flex-wrap:wrap; }
.char-stat { font-size:9px; font-family:var(--fm); background:var(--bg2);
  border-radius:4px; padding:2px 6px; color:var(--t1); }
.char-stat strong { color:var(--t3); }
.char-tipp { font-size:10px; color:var(--g); font-family:var(--fm);
  border-top:1px solid var(--b0); padding:7px 12px; background:var(--gd);
  line-height:1.5; font-style:italic; }
.char-screen>.intro-btn { margin:12px 14px 0; width:calc(100% - 28px); }

/* ── City selection ──────────────────────────────────── */
.city-screen-v2 { padding-top:0; }

.city-region-tabs { display:flex; gap:6px; padding:7px 14px; flex-wrap:wrap; }
.city-region-tab { flex:1; min-width:74px; padding:8px 4px;
  border-radius:var(--rs); text-align:center; background:var(--bg1);
  border:1px solid var(--b0); color:var(--t1);
  font-family:var(--fu); font-size:10px; font-weight:600; cursor:pointer; transition:all .15s; }
.city-region-tab:hover { border-color:var(--b1); color:var(--t2); }
.city-region-tab.active { background:var(--gd); border-color:var(--b2); color:var(--g); }

.city-v2-layout { flex:1; display:flex; gap:10px; padding:0 14px;
  min-height:0; overflow:hidden; }
.city-list { flex:0 0 52%; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:6px; overflow-y:auto; align-content:start; max-height:310px; }
.city-card { background:var(--raised); border:1px solid var(--b0);
  border-radius:var(--rs); padding:10px 8px; cursor:pointer;
  text-align:center; transition:all .15s; }
.city-card:hover { border-color:var(--b1); background:var(--surf); }
.city-card.selected { border-width:2px; }
.cc-name { font-family:var(--fd); font-size:14px; letter-spacing:1px;
  margin-bottom:2px; color:var(--t3); }
.cc-bl   { color:var(--t0); font-size:9px; font-family:var(--fm); }
.cc-dots { font-size:9px; color:var(--t3); margin-top:3px; }
.cc-rent { margin-top:2px; font-size:9px; color:var(--t1); }

.city-detail { flex:1; overflow-y:auto; }
.city-detail-box { background:var(--raised); border:1px solid;
  border-radius:var(--r); padding:14px 12px; }
.city-detail-empty { display:flex; align-items:center; justify-content:center;
  min-height:130px; color:var(--t0); font-size:11px;
  font-family:var(--fm); letter-spacing:1.5px; text-align:center; }
.cdb-name  { font-family:var(--fd); font-size:22px; letter-spacing:2px; color:var(--t3); margin-bottom:2px; }
.cdb-bl    { font-size:10px; color:var(--t1); margin-bottom:9px; font-family:var(--fm); }
.cdb-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0; }
.cdb-s     { background:var(--bg2); border-radius:var(--rs); padding:7px;
  text-align:center; font-size:9px; color:var(--t1); }
.cdb-s strong { display:block; font-size:14px; color:var(--t3); margin-bottom:2px;
  font-family:var(--fu); font-weight:700; }
.cdb-pro   { font-size:11px; color:var(--g); background:var(--gd);
  border:1px solid var(--b0); border-radius:var(--rs); padding:5px 8px; margin:4px 0; line-height:1.5; }
.cdb-con   { font-size:11px; color:var(--go); background:rgba(240,192,55,.07);
  border:1px solid rgba(240,192,55,.15); border-radius:var(--rs); padding:5px 8px; margin:4px 0; line-height:1.5; }
.cdb-note  { font-size:10px; color:var(--t1); margin-top:6px; font-family:var(--fs); font-style:italic; line-height:1.55; }
.cdb-pioneer { font-size:11px; color:var(--g); font-weight:600; margin-top:6px; }
.cdb-proj  { font-size:11px; color:var(--t2); margin-top:5px; }
.city-screen-v2>.intro-btn { margin:10px 14px 0; width:calc(100% - 28px); }

/* ── Konto screen ────────────────────────────────────── */
.konto-screen { padding-top:0; }
.konto-layout { padding:0 14px; display:flex; flex-direction:column; gap:12px; }
.konto-boxes  { display:flex; gap:10px; align-items:flex-start; }
.konto-box    { flex:1; background:var(--raised); border:1px solid var(--b0);
  border-radius:var(--r); padding:14px 12px; text-align:center; }
.konto-box.priv   { border-top:2px solid var(--go); }
.konto-box.verein { border-top:2px solid var(--g); }
.kb-icon   { font-size:26px; margin-bottom:5px; }
.kb-label  { font-family:var(--fm); font-size:8px; letter-spacing:2px;
  text-transform:uppercase; color:var(--t1); margin-bottom:5px; }
.kb-amount { font-family:var(--fd); font-size:22px; letter-spacing:1px; margin-bottom:5px; }
.kb-desc   { font-size:10px; color:var(--t1); line-height:1.55; }
.konto-arrow { font-size:18px; color:var(--t0); align-self:center; flex-shrink:0; }
.konto-slider-area { background:var(--raised); border:1px solid var(--b0);
  border-radius:var(--r); padding:12px 14px; }
.ks-track { display:flex; justify-content:space-between; font-size:9px;
  color:var(--t1); font-family:var(--fm); margin-bottom:8px; }
input[type=range].konto-slider { width:100%; -webkit-appearance:none; appearance:none;
  height:4px; background:var(--bg2); border-radius:2px; margin:0; }
input[type=range].konto-slider::-webkit-slider-thumb { -webkit-appearance:none;
  width:18px; height:18px; background:var(--g); border-radius:50%; cursor:pointer;
  box-shadow:0 0 8px var(--gg); }
.ks-pct { text-align:center; font-size:11px; font-family:var(--fm);
  color:var(--t2); margin-top:8px; }
.konto-analyse { background:var(--bg2); border:1px solid var(--b0);
  border-radius:var(--rs); padding:12px; font-size:11px; color:var(--t2); line-height:1.5; }
.konto-screen>.intro-btn { margin:10px 14px 0; width:calc(100% - 28px); }

/* ── Name screen ─────────────────────────────────────── */
.name-screen { padding-top:0; }
.name-layout { padding:0 14px; display:flex; gap:12px; align-items:flex-start; }
.name-portrait-area { flex:0 0 auto; text-align:center; }
.np-name    { font-family:var(--fu); font-weight:700; font-size:13px; color:var(--t3); margin-top:6px; }
.np-city    { font-size:10px; color:var(--t1); font-family:var(--fm); }
.np-cash    { font-size:11px; color:var(--go); margin-top:4px; font-family:var(--fm); }
.np-members { font-size:11px; color:var(--g);  font-family:var(--fm); }
.name-form  { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.name-label { font-size:9px; font-family:var(--fm); letter-spacing:2px;
  text-transform:uppercase; color:var(--t1); }
.name-input { background:var(--bg1); border:1px solid var(--b0);
  border-radius:var(--rs); padding:10px 12px; color:var(--t3); font-size:13px;
  font-family:var(--fb); width:100%; transition:border-color .15s, box-shadow .15s; }
.name-input:focus { border-color:var(--b2); box-shadow:0 0 0 2px var(--gd); }
.name-hint  { font-size:9px; color:var(--t0); font-family:var(--fm); }
.name-preview { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--rs);
  padding:12px; margin-top:6px; font-size:11px; color:var(--t2); line-height:1.6; }
.np-label   { font-size:8px; font-family:var(--fm); letter-spacing:2px;
  text-transform:uppercase; color:var(--t1); margin-bottom:5px; }
.np-clubname{ font-family:var(--fd); font-size:17px; letter-spacing:1.5px; color:var(--t3); }
.np-founder { font-size:11px; color:var(--t2); margin-top:4px; font-family:var(--fs); font-style:italic; }
.np-stamp   { font-size:9px; font-family:var(--fm); color:var(--t0); margin-top:8px;
  border-top:1px solid var(--b0); padding-top:6px; }
.name-screen>.intro-btn { margin:10px 14px 0; width:calc(100% - 28px); }

/* ── Story screen ────────────────────────────────────── */
.story-screen { justify-content:center; align-items:center; cursor:pointer;
  min-height:100dvh;
  background:radial-gradient(ellipse at 50% 38%,rgba(45,185,85,.07) 0%,transparent 62%),
             linear-gradient(180deg,#010503 0%,#030b04 100%); }
.story-content { display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:28px 22px; max-width:390px; width:100%; text-align:center; }
.story-portrait { border-radius:var(--r); overflow:hidden;
  border:2px solid rgba(45,185,85,.28);
  box-shadow:0 0 36px rgba(45,185,85,.12),0 0 0 4px rgba(45,185,85,.05); }
.story-meta { width:100%; }
.story-lines { display:flex; flex-direction:column; gap:13px; }
.story-line { font-family:var(--fs); font-size:15px; color:var(--t2); line-height:1.7;
  font-style:italic;
  opacity:0; transform:translateY(9px);
  transition:opacity .55s ease, transform .55s ease; }
.story-line.visible { opacity:1; transform:none; }
.story-tap-hint { font-size:10px; color:var(--t0); font-family:var(--fm);
  letter-spacing:2px; text-transform:uppercase; animation:blink 2.2s ease-in-out infinite; }
.story-continue { font-size:20px !important; letter-spacing:3px !important; }
.story-skip { background:rgba(3,7,3,.75) !important; border:1px solid var(--b0) !important;
  font-family:var(--fm) !important; font-size:10px !important;
  color:var(--t1) !important; letter-spacing:.8px !important;
  padding:5px 10px !important; border-radius:var(--rs) !important; width:auto !important; }
.story-skip:hover { color:var(--t3) !important; border-color:var(--b1) !important; }
@keyframes blink { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* ═══════════════════════════════════════════════════
   AGE CHECK
   ═══════════════════════════════════════════════════ */
.age-screen { position:fixed !important; inset:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  z-index:10001 !important;
  background:radial-gradient(ellipse at 50% 38%,rgba(45,185,85,.06) 0%,transparent 62%),
             #020703 !important;
  padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.age-box { max-width:460px; width:100%; text-align:center; padding:44px 34px;
  background:var(--raised); border:1px solid var(--b1); border-radius:var(--rx);
  box-shadow:0 0 70px rgba(0,0,0,.75), 0 0 50px rgba(45,185,85,.06); }
.age-num { font-family:var(--fd); font-size:80px; letter-spacing:6px; line-height:1;
  color:var(--g); margin-bottom:8px;
  text-shadow:0 0 50px rgba(45,185,85,.55); }
.age-text { font-size:13px; color:var(--t2); line-height:1.8; margin-bottom:24px;
  font-family:var(--fs); }
.age-disclaimer { font-size:10px; color:var(--t1); margin-top:14px; font-family:var(--fm); line-height:1.6; }
.age-disclaimer a { color:var(--g); }