:root{
  --bg:#0a0a0a;
  --surface:#141418;
  --surface2:#1c1c22;
  --line:#2a2a33;
  --text:#ffffff;
  --muted:#9b9bac;
  --accent:#8d14ff;
  --accent2:#530fff;
  --accent-soft:rgba(141,20,255,.14);
  --spotify:#1db954;
  --youtube:#ff0000;
  --instagram:#e1306c;
  --tiktok:#ff0050;
  --discord:#5865f2;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  line-height:1.5;
}
h1,h2,h3{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.app{width:100%;max-width:540px;padding:20px;display:flex;flex-direction:column;gap:16px}
.screen{display:flex;flex-direction:column;gap:16px}
#screen-landing{flex:1;justify-content:center;min-height:88vh}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:none;border-radius:var(--radius);padding:15px 18px;font-family:'Inter',sans-serif;
  font-size:16px;font-weight:600;cursor:pointer;transition:transform .08s,filter .15s,background .15s}
.btn:active{transform:scale(.985)}
.btn i{font-size:18px}
.btn-discord{background:var(--discord);color:#fff}
.btn-discord:hover{filter:brightness(1.08)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;
  padding:7px 12px;font-family:inherit;font-size:13px;cursor:pointer}
.ghost:hover{color:var(--text);border-color:var(--muted)}

/* Landing */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
/* Tirow-Avatar: rundes Foto mit Gradient-Ring, Glow & Logo-Badge */
.hero-avatar{position:relative;width:140px;height:140px;margin:0 auto 16px;border-radius:50%;
  padding:4px;background:conic-gradient(from 210deg,var(--accent),#ff2d9b,var(--accent2),var(--accent));
  box-shadow:0 12px 45px rgba(141,20,255,.55);animation:avatar-float 5.5s ease-in-out infinite}
.hero-avatar::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(141,20,255,.35),transparent);z-index:-1;filter:blur(6px)}
.hero-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:3px solid var(--bg);display:block}
.hero-avatar-badge{position:absolute;bottom:1px;right:1px;width:42px;height:42px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);padding:6px;object-fit:contain;
  box-shadow:0 4px 14px rgba(0,0,0,.6)}
@keyframes avatar-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.hero-avatar{animation:none}}
.hero-logo{width:120px;height:auto;margin-bottom:8px;filter:drop-shadow(0 8px 30px rgba(141,20,255,.45))}
.hero h1{font-size:42px;font-weight:700;line-height:1.05}
.sub{color:var(--muted);font-size:15px;max-width:340px;margin:8px 0 16px}
.fineprint{color:var(--muted);font-size:12px;margin-top:12px}
.landing-alt{display:inline-block;margin-top:16px;color:var(--accent);font-size:13px;text-decoration:none;font-weight:500}
.landing-alt:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo-sm{width:30px;height:auto}
.brand span{font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;font-size:15px;letter-spacing:1px}
.user{display:flex;align-items:center;gap:10px}
.me-name{font-size:14px;font-weight:600;color:var(--muted)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.card-head h2{font-size:19px;display:flex;align-items:center;gap:9px}
.card-head h2 i{color:var(--accent);font-size:17px}

/* Follow row */
.perk-status{font-size:12px;color:var(--muted);text-align:right}
.perk-status.active{color:var(--accent)}
.follow-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.follow-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 6px;color:var(--text);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  cursor:pointer;transition:border-color .15s,background .15s,transform .08s}
.follow-btn:hover{border-color:var(--muted)}
.follow-btn:active{transform:scale(.97)}
.follow-btn i{font-size:24px;color:var(--muted);transition:color .15s}
.follow-btn[data-net="spotify"]:hover i{color:var(--spotify)}
.follow-btn[data-net="youtube"]:hover i{color:var(--youtube)}
.follow-btn[data-net="instagram"]:hover i{color:var(--instagram)}
.follow-btn[data-net="tiktok"]:hover i{color:var(--tiktok)}
.follow-btn.on{border-color:transparent}
.follow-btn[data-net="spotify"].on{background:var(--spotify)}
.follow-btn[data-net="youtube"].on{background:var(--youtube)}
.follow-btn[data-net="instagram"].on{background:var(--instagram)}
.follow-btn[data-net="tiktok"].on{background:var(--tiktok)}
.follow-btn.on i,.follow-btn.on span{color:#fff}
.follow-btn.on::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;background:var(--accent);color:#fff;
  border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg)}

/* Perks legend */
.perks{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.perk{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);opacity:.5}
.perk.on{opacity:1}
.perk i{font-size:16px;width:20px;text-align:center;color:var(--muted)}
.perk.on i{color:var(--accent)}
.perk b{color:var(--text);font-weight:600}
.perk em{font-style:normal;color:var(--accent);font-size:12px}

/* Game */
.hud{display:flex;gap:8px}
.stat{display:flex;flex-direction:column;align-items:center;background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;padding:5px 12px;min-width:54px}
.stat small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stat b{font-size:16px;font-weight:700}
.stat.shield{flex-direction:row;align-items:center;gap:5px;color:var(--accent);border-color:var(--accent)}
.g-stage{position:relative;background:#0d0d12;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:16/9}
#g-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.g-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;background:rgba(10,10,12,.86);z-index:5;padding:16px}
.g-title{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:30px;font-weight:700;
  color:var(--accent);margin-bottom:8px;letter-spacing:1px}
.g-desc{color:var(--muted);font-size:14px;margin-bottom:18px;max-width:300px;margin-left:auto;margin-right:auto}
.g-overlay .btn{width:auto;padding:12px 30px}
.g-controls{display:flex;gap:10px;margin-top:12px}
.gbtn{flex:1;background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:10px;
  padding:14px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.gbtn:active{background:var(--accent);border-color:var(--accent)}
.gbtn i{font-size:14px}
.hint{color:var(--muted);font-size:12px;text-align:center;margin-top:12px}

/* Songs */
.song-search-wrap{position:relative;margin-bottom:14px}
.song-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.song-search{width:100%;background:var(--surface2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:11px 14px 11px 38px;font-family:'Inter',sans-serif;font-size:14px}
.song-search::placeholder{color:var(--muted)}
.song-search:focus{outline:none;border-color:var(--accent)}
.songs{list-style:none;display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto}
.songs::-webkit-scrollbar{width:8px}
.songs::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.song{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px}
.song-cover{width:44px;height:44px;border-radius:8px;background:#0d0d12;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.song-cover img{width:100%;height:100%;object-fit:cover}
.song-meta{flex:1;min-width:0}
.song-title{font-weight:600;font-size:14px}
.song-game{font-size:12px;color:var(--muted)}
.song-spotify{font-size:11px;color:#1db954;margin-top:2px;display:flex;align-items:center;gap:4px}
.song-dl{display:flex;align-items:center;gap:6px;background:var(--accent);border:none;color:#fff;
  border-radius:9px;padding:9px 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.song-dl:hover{background:var(--accent2)}
.song-dl-spotify{background:#1db954}
.song-dl-spotify:hover{background:#1ed760}
.song-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.song-play{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--surface2);
  border:1px solid var(--line);color:var(--text);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:14px;transition:background .15s,border-color .15s,transform .08s}
.song-play:hover{border-color:var(--accent);color:var(--accent)}
.song-play:active{transform:scale(.94)}
.song-play.playing{background:var(--accent);border-color:var(--accent);color:#fff}

/* Club-Rang */
.rank-bar{height:12px;background:var(--surface2);border:1px solid var(--line);border-radius:20px;
  overflow:hidden}
.rank-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:20px;transition:width .5s ease}
.rank-hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}

/* Rangliste */
.lb-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 14px}
.lb-row.me{border-color:var(--accent);background:var(--accent-soft)}
.lb-rank{width:26px;text-align:center;font-weight:700;font-size:15px;color:var(--muted);flex-shrink:0}
.lb-name{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row.me .lb-name{color:var(--accent)}
.lb-best{font-size:14px;font-weight:700;flex-shrink:0}

/* Studio-Log ("Direkt von Tirow") */
.studio-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.studio-entry{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-size:14px;line-height:1.5}
.studio-entry p{white-space:pre-wrap;overflow-wrap:break-word}
.studio-date{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;
  font-weight:600;margin-bottom:4px}
.studio-entry img{max-width:100%;border-radius:10px;margin-top:10px;display:block}

/* Song-Story */
.song-story{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}

/* Abstimmung ("Du entscheidest") */
.vote-row{display:flex;flex-direction:column;gap:9px}
.vote-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;transition:border-color .15s,transform .08s;text-align:left}
.vote-btn:hover{border-color:var(--accent)}
.vote-btn:active{transform:scale(.985)}
.vote-btn.chosen{border-color:var(--accent)}
.vote-btn.chosen span::after{content:" ✓";color:var(--accent);font-weight:700}
.vote-btn b{font-size:13px;color:var(--muted);flex-shrink:0}
.vote-btn.chosen b{color:var(--accent)}

/* Mute-Button im Game */
.gbtn-mute{flex:0 0 54px}
.gbtn-mute.off{color:var(--muted)}

/* Inner Circle / Support */
.support-text{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.55}
.support-text b{color:var(--text)}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tier-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 6px 13px;color:var(--text);font-family:'Inter',sans-serif;cursor:pointer;
  transition:border-color .15s,background .15s,transform .08s}
.tier-btn:hover{border-color:var(--accent)}
.tier-btn:active{transform:scale(.97)}
.tier-btn b{font-size:19px;font-weight:700}
.tier-btn span{font-size:11px;color:var(--muted)}
.tier-mid{border-color:var(--accent);background:var(--accent-soft)}
.tier-mid em{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--accent);
  color:#fff;font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;padding:2px 8px;border-radius:20px;white-space:nowrap}

/* Newsletter page (/gratis) */
.nl-card{max-width:440px;margin:0 auto;text-align:center;padding:28px}
.nl-logo{width:88px;height:auto;display:block;margin:0 auto 14px;filter:drop-shadow(0 8px 30px rgba(141,20,255,.4))}
.nl-card h1{font-size:32px;font-weight:700;margin-bottom:8px}
#nl-form{display:flex;flex-direction:column;gap:14px;margin-top:20px;text-align:left}
#nl-email{background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:10px;
  padding:14px;font-family:'Inter',sans-serif;font-size:15px}
#nl-email::placeholder{color:var(--muted)}
#nl-email:focus{outline:none;border-color:var(--accent)}
.nl-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.55}
.nl-consent input{margin-top:2px;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.nl-consent a{color:var(--accent)}
.nl-success{background:var(--surface2);border:1px solid var(--accent);border-radius:12px;padding:20px;margin-top:18px}
.nl-foot{margin-top:22px;font-size:12px;color:var(--muted)}
.nl-foot a{color:var(--muted);text-decoration:underline}

/* Toast + oauth */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface2);
  border:1px solid var(--line);color:var(--text);padding:12px 18px;border-radius:12px;font-size:14px;
  z-index:50;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.oauth{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;
  z-index:40;padding:20px}
.oauth-box{background:#16161c;border:1px solid var(--line);border-radius:18px;padding:28px;max-width:340px;text-align:center}
.oauth-logo{width:60px;height:60px;border-radius:16px;background:var(--discord);display:flex;align-items:center;
  justify-content:center;margin:0 auto 14px;color:#fff;font-size:28px}
.oauth-box h3{font-size:18px;margin-bottom:4px}
.oauth-box p{color:var(--muted);font-size:14px}
.scopes{list-style:none;text-align:left;margin:16px 0;display:flex;flex-direction:column;gap:9px}
.scopes li{font-size:14px;color:var(--text);display:flex;align-items:center;gap:9px}
.scopes li i{color:var(--spotify);font-size:13px}
.oauth-demo{font-size:11px;color:var(--muted);margin-top:12px}
[hidden]{display:none!important}

/* Mobile */
@media (max-width:480px){
  .app{padding:14px;gap:14px}
  .hero h1{font-size:34px}
  .hero-logo{width:96px}
  .sub{font-size:14px}
  .card{padding:14px}
  .follow-row{gap:7px}
  .follow-btn{padding:11px 4px;font-size:11px}
  .follow-btn i{font-size:20px}
  .song{flex-wrap:wrap;padding:10px}
  .song-actions{width:100%;justify-content:stretch;margin-top:4px}
  .song-actions .song-dl{flex:1;justify-content:center;padding:9px 10px;font-size:12px}
  .song-dl-spotify{white-space:normal;text-align:center}
}

@media (max-width:360px){
  .follow-row{grid-template-columns:repeat(2,1fr)}
}