:root{
  --bg:#0b0d10;
  --surface:#161a20;
  --surface-2:#1d222a;
  --border:#272d36;
  --text:#e7eaee;
  --muted:#8b94a3;
  --accent:#8b5cff;
  --accent-2:#6a3ce0;
  --glow:#966eff;
  --subtitle:#c9a8ff;
  --pink:#ff78c8;
  --radius:14px;
  --shadow:0 14px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 85% -15%, #211a33 0%, var(--bg) 55%) fixed;
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;
  padding:18px 24px;
  padding-top:max(18px, env(safe-area-inset-top));
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right));
  border-bottom:1px solid var(--border);
  background:rgba(11,13,16,.7);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.search{margin-left:auto}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:46px;height:46px;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 14px rgba(150,110,255,.35)) drop-shadow(0 2px 10px rgba(255,120,200,.18));
}
.brand__name{margin:0;font-size:20px;font-weight:800;letter-spacing:.3px}
.brand__tag{margin:0;font-size:12px;color:var(--subtitle)}
.search input{
  width:min(320px,40vw);
  padding:10px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}
.search input::placeholder{color:var(--muted)}

/* ---------- Main ---------- */
.main{max-width:1200px;margin:0 auto;padding:28px 24px 64px}
.section-title{font-size:18px;font-weight:700;margin:22px 0 20px}
.count{color:var(--muted);font-weight:500}
.empty{color:var(--muted);text-align:center;padding:60px 0}

/* ---------- Grid + Karten ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px;
}
.card{
  text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:inherit;padding:0;overflow:hidden;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  font:inherit;
}
.card:hover{transform:translateY(-4px);border-color:#3a4252;box-shadow:var(--shadow)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card__cover{
  position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--surface-2),#10141a);
}
.card__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card__ph{font-size:40px;font-weight:800;color:var(--muted)}
.card__info{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.card__title{font-weight:700;font-size:15px}
.card__type{font-size:12px;color:var(--muted)}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:5px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  white-space:nowrap;
}
.badge--type{background:rgba(150,110,255,.14);border-color:rgba(150,110,255,.35);color:#c9a8ff}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
.modal__card{
  position:relative;z-index:1;width:min(560px,100%);
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal__close{
  position:absolute;top:12px;right:12px;z-index:2;
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:rgba(0,0,0,.4);color:var(--text);font-size:14px;
}
.modal__close .ico{width:16px;height:16px}
.modal__close:hover{background:rgba(0,0,0,.65)}
.modal__cover{position:relative;aspect-ratio:16/9;background:var(--surface-2)}
.modal__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Verlauf für Lesbarkeit des Buttons über dem Cover */
.modal__cover::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(to top, rgba(11,13,16,.9), transparent);pointer-events:none}
.btn.modal__play{position:absolute;right:16px;bottom:16px;z-index:2;
  width:auto;padding:10px 26px;font-size:14px;border-radius:999px}
@media (max-width:600px){
  .btn.modal__play{right:auto;left:50%;transform:translateX(-50%)}
}
.modal__body{padding:20px}
.modal__head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:14px}
.modal__head h3{margin:0;font-size:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.modal__desc{color:var(--muted);line-height:1.6;font-size:15px;margin:0 0 22px}
.modal__playtime{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:14px;color:var(--subtitle)}
.modal__playtime b{color:var(--text)}
.modal__playtime .ico-clock{font-size:15px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:11px;cursor:pointer;font:inherit;font-weight:700;
  padding:12px 20px;font-size:15px;transition:filter .15s,background .15s;
}
.btn--play{
  width:100%;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px rgba(150,110,255,.35);
}
.btn--play:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn--ghost:hover{background:#262c36}

/* ---------- Vollbild-Spieler ---------- */
.player{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column}
.player[hidden]{display:none}
.player__bar{
  display:flex;align-items:center;gap:14px;
  /* Safe-Area: unter der iOS-Statusleiste (Uhrzeit/Akku) bleiben, wenn als
     Home-Screen-App im Vollbild (black-translucent) geöffnet. */
  padding:max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
          10px max(14px, env(safe-area-inset-left));
  background:var(--surface);border-bottom:1px solid var(--border);
}
.player__title{font-weight:700}
.player__frame{flex:1;width:100%;border:0;background:#000}
/* Profil-Avatar rechts in der Spiele-Bar – öffnet die Freunde-Sidebar. */
.player__account{
  position:relative;margin-left:auto;flex:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:3px;
  background:var(--surface);border:1px solid var(--border);border-radius:50%;
  color:var(--text);transition:background .15s ease, border-color .15s ease;
}
.player__account:hover{background:var(--surface-2);border-color:var(--accent)}
.player__account[hidden]{display:none}

/* ---------- Account / Topbar rechts ---------- */
.topbar__right{display:flex;align-items:center;gap:14px;margin-left:auto}
.account{display:flex;align-items:center;gap:10px}
.account__name{font-size:14px;color:var(--text);white-space:nowrap}
.btn--sm{padding:9px 14px;font-size:13px}
a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- Auth-Modal ---------- */
.modal__card--auth{width:min(400px,100%)}
.auth{padding:26px}
.auth__tabs{display:flex;gap:8px;margin-bottom:18px}
.auth__tab{
  flex:1;padding:10px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);border-radius:10px;cursor:pointer;font:inherit;font-weight:600;
}
.auth__tab.is-active{background:rgba(150,110,255,.16);border-color:rgba(150,110,255,.4);color:#c9a8ff}
.auth__form{display:flex;flex-direction:column;gap:12px}
.auth__form input{
  padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:15px;outline:none;
}
.auth__form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}

/* ---------- Login-Gate (Anmeldung erzwungen) ---------- */
.gate{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:hidden;
  background:
    radial-gradient(620px 420px at 18% 16%, rgba(150,110,255,.28), transparent 70%),
    radial-gradient(620px 420px at 85% 84%, rgba(255,120,200,.20), transparent 70%),
    radial-gradient(900px 600px at 50% -10%, #2a1f44 0%, #0c0a14 62%);
}
.gate[hidden]{display:none}
/* feiner Sternenstaub */
.gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 12% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 85%, #fff, transparent);
}

/* Deko-Illustrationen in den Ecken */
.gate__illu{
  position:absolute;width:clamp(120px,13vw,190px);z-index:1;pointer-events:none;user-select:none;
  filter:drop-shadow(0 10px 26px rgba(150,110,255,.45));
  animation:floaty 6s ease-in-out infinite;
}
.gate__illu--tl{top:6%;left:4%}
.gate__illu--tr{top:7%;right:4%;animation-delay:-1.5s}
.gate__illu--bl{bottom:5%;left:5%;animation-delay:-3s}
.gate__illu--br{bottom:6%;right:5%;transform:scaleX(-1);animation-delay:-4.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gate__illu--br{animation-name:floaty-mirror}
@keyframes floaty-mirror{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-12px)}}

.gate__card{
  position:relative;z-index:2;width:min(400px,100%);
  background:rgba(24,20,38,.72);border:1px solid rgba(150,110,255,.25);
  border-radius:22px;padding:32px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(150,110,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.gate__brand{text-align:center;margin-bottom:24px}
.gate__logo{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(150,110,255,.45)) drop-shadow(0 2px 12px rgba(255,120,200,.25))}
.gate__title{
  margin:12px 0 4px;font-family:'Fredoka',-apple-system,system-ui,sans-serif;
  font-size:38px;font-weight:700;letter-spacing:.5px;line-height:1.05;
  background:linear-gradient(180deg,#ffffff 0%,#dcc6ff 45%,#9a6cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(150,110,255,.4));
}
.gate__sub{margin:6px 0 0;color:var(--subtitle);font-size:14px}
.gate .btn--play{border-radius:14px;box-shadow:0 12px 34px rgba(150,110,255,.5)}
.gate .auth__tab.is-active{box-shadow:0 0 0 1px rgba(150,110,255,.3)}
@media (max-width:860px){ .gate__illu{display:none} }

/* Auswahl Konto/Gast auf der Anmelde-Seite */
.gate__choice{display:flex;flex-direction:column;gap:12px}
.choice-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;text-decoration:none;cursor:pointer;width:100%;
  padding:16px 18px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  transition:border-color .15s, background .15s, transform .15s;
}
.choice-card:hover{border-color:var(--accent);background:#262c36;transform:translateY(-1px)}
.choice-card__ico{font-size:26px;line-height:1;margin-bottom:2px}
.choice-card__title{font-weight:700;font-size:16px}
.choice-card__sub{color:var(--muted);font-size:13px}
.auth__form[hidden],.gate__choice[hidden]{display:none}

.auth__msg{
  color:#ffb4b4;font-size:14px;margin:0;
  background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.3);
  padding:9px 12px;border-radius:9px;
}
.auth__msg--ok{
  color:#9be8c0;background:rgba(40,200,120,.1);border-color:rgba(40,200,120,.3);
}
.auth__form input[hidden]{display:none}
.auth__link{
  background:none;border:0;color:var(--accent);font:inherit;font-size:13px;
  cursor:pointer;padding:4px;text-align:center;width:100%;
}
.auth__link:hover{text-decoration:underline}
.auth__link[hidden]{display:none}

/* ---------- Avatar ---------- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:16px;line-height:1;flex:none;
  position:relative;overflow:hidden;
}
.avatar--lg{width:64px;height:64px;font-size:34px}
/* Serverseitig gerendertes Avatar-PNG liegt über dem Emoji-Fallback und wird erst
   nach dem Laden sichtbar (verhindert Aufblitzen/leeren Kreis). */
.avatar__img{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  opacity:0;transition:opacity .12s ease;
}
.avatar.has-img .avatar__img{opacity:1}

/* ---------- Account-Dropdown ---------- */
.account{position:relative}
.account__btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:6px 10px 6px 6px;color:var(--text);font:inherit;
}
.account__btn:hover{background:var(--surface-2)}
.account__caret{color:var(--muted);font-size:12px}
.account__burger{display:none;font-size:20px;line-height:1;color:var(--text)}
.dropdown{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:210px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;
}
.dropdown[hidden]{display:none}
.dropdown__item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;text-decoration:none;
  padding:10px 12px;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--text);font:inherit;font-size:14px;
}
.dropdown__item:hover{background:var(--surface-2)}
.dropdown__item--danger{color:#ff9b9b}

/* Inline-Icons (überall statt Emoji) */
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:-0.15em}
.dropdown__item .ico,.btn .ico{width:18px;height:18px}

/* ---------- Kontoeinstellungen ---------- */
.settings__title{margin:0 0 16px;font-size:20px}
.settings__preview{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.settings__pname{font-size:18px;font-weight:700}
.settings__label{display:block;font-size:13px;color:var(--muted);margin:16px 0 8px}
.settings__input{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:15px;outline:none;
}
.settings__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}
.picker{display:flex;flex-wrap:wrap;gap:8px}
.picker-scroll{max-height:200px;overflow-y:auto;padding-right:6px;margin-right:-2px}
.picker-scroll::-webkit-scrollbar{width:8px}
.picker-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.picker-scroll::-webkit-scrollbar-track{background:transparent}
.picker__cat{font-size:12px;color:var(--muted);font-weight:600;margin:12px 2px 8px}
.picker__cat:first-child{margin-top:0}
.picker__item{
  width:42px;height:42px;font-size:20px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.picker__item.is-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(150,110,255,.35)}
.picker__img{width:26px;height:26px;display:block}
.prev-avatar__img{width:44px;height:44px;display:block}
/* Bild-Avatare (Special) füllen Button bzw. Vorschau-Kreis – rund, wie der echte Avatar.
   Absolut positioniert, damit die Höhe im Flex-Button sicher greift (sonst „Ei"). */
.picker__img--full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.prev-avatar__img--full{width:100%;height:100%;object-fit:cover;border-radius:50%}
.picker--colors{gap:10px}
.picker__color{
  width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;
}
.picker__color.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
#set-save{margin-top:22px;width:100%}
#set-msg{margin-top:16px}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .topbar{flex-wrap:wrap;row-gap:12px;padding:14px 16px;
    padding-top:max(14px, env(safe-area-inset-top));}
  .brand{order:1}
  .account{order:2;margin-left:auto}          /* Zeile 1: Marke links, Konto rechts */
  .search{order:3;flex-basis:100%;margin-left:0}/* Zeile 2: Suche über volle Breite */
  .search input{width:100%}
  .brand__logo{width:38px;height:38px}
  .brand__name{font-size:18px}
  /* Konto-Menü als Burger */
  .account__btn{padding:8px 10px}
  .account__burger{display:block}
  .account__btn .avatar,
  .account__name,
  .account__caret{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .modal__head h3{font-size:19px}
}

/* ---------- Geteiltes Seitenleisten-Layout (Profil + Admin) ---------- */
.brand--link{text-decoration:none;color:inherit;cursor:pointer}
.brand--link:hover .brand__name{color:var(--accent)}

.profile-page{max-width:920px;margin:0 auto;padding:24px 24px 48px}
.back-link{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
}
.back-link svg{width:16px;height:16px}
.back-link:hover{color:var(--text)}

.profile{display:flex;align-items:flex-start;gap:22px}
.profile-nav{
  flex:none;width:210px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:96px;
}
.profile-nav__item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 14px;border-radius:10px;border:1px solid transparent;
  background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;
}
.profile-nav__item svg{width:19px;height:19px;flex:none}
.profile-nav__item:hover{background:var(--surface-2);color:var(--text)}
.profile-nav__item.is-active{
  background:rgba(150,110,255,.16);border-color:rgba(150,110,255,.4);color:#c9a8ff;
}
.profile-content{flex:1;min-width:0}
.profile-section{margin:0}
.profile-section[hidden]{display:none}
.profile .form-actions{margin-top:24px}
.profile .form-actions .btn{flex:1}
.profile .auth__msg{margin-top:18px}

.badge--ok{background:rgba(40,200,120,.15);color:#7fe3b0;border-color:rgba(40,200,120,.35)}
.badge--warn{background:rgba(255,180,80,.15);color:#ffb450;border-color:rgba(255,180,80,.35)}
.badge--admin{background:rgba(106,60,224,.18);color:#c6b4ff;border-color:rgba(106,60,224,.4)}
.badge--off{background:rgba(255,90,90,.14);color:#ff9b9b;border-color:rgba(255,90,90,.35)}

@media (max-width:760px){
  .profile-page{padding:14px 14px 36px}
  .profile{flex-direction:column;gap:14px}
  .profile-nav{
    flex-direction:row;width:100%;position:static;gap:8px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
  }
  .profile-nav__item{flex:1;justify-content:center;white-space:nowrap;padding:10px 8px;font-size:14px}
  .profile-content{width:100%}
  .panel{padding:18px}
}
@media (max-width:380px){
  .profile-nav__label{display:none}
  .profile-nav__item{justify-content:center}
}

/* ---------- Eigenes Bestätigungs-/Hinweis-Modal ---------- */
.ui-modal{z-index:100}
.ui-modal__card{width:min(400px,100%)}
.ui-modal__body{padding:24px}
.ui-modal__title{margin:0 0 10px;font-size:18px;font-weight:800}
.ui-modal__msg{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
.ui-modal__actions{display:flex;gap:10px;margin-top:22px}
.ui-modal__actions .btn{flex:1}
.btn--danger{background:#e5484d;color:#fff}
.btn--danger:hover{filter:brightness(1.08)}

/* ---------- Übersicht: Tabs / Filter / Favoriten ---------- */
.segment{
  display:inline-flex;gap:4px;padding:4px;margin:6px 0 4px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
}
.segment__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;
  border:0;border-radius:999px;white-space:nowrap;
  background:none;color:var(--muted);font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  transition:color .15s,background .15s;
}
.segment__btn:hover{color:var(--text)}
.segment__btn.is-active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 6px 18px rgba(150,110,255,.35);
}
.segment__btn .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.segment__badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);color:#fff;
}
.segment__badge:empty{display:none}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 6px}
.toolbar[hidden]{display:none}
.cat-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.chip{
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:#3a4252}
.chip.is-active{
  background:rgba(150,110,255,.16);border-color:rgba(150,110,255,.45);color:#c9a8ff;
}
.sort{display:inline-flex;align-items:center;gap:8px;flex:none}
.sort__label{font-size:13px;color:var(--muted)}
.sort__select{
  padding:8px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer;outline:none;
}
.sort__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}

.grid[hidden]{display:none}

/* Favorit-Herz auf der Karte */
.card__fav{
  position:absolute;top:8px;right:8px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  transition:transform .12s ease,background .15s,color .15s;
}
.card__fav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.card__fav:hover{transform:scale(1.14);background:rgba(0,0,0,.62)}
.card__fav.is-fav{color:var(--pink)}
.card__fav.is-fav svg{fill:currentColor;stroke:currentColor}

/* Leerzustand (z. B. keine Favoriten) */
.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:64px 20px;color:var(--muted);
}
.empty-state[hidden]{display:none}
.empty-state__icon svg{width:54px;height:54px;color:var(--accent);opacity:.85}
.empty-state__title{margin:0;font-size:18px;color:var(--text)}
.empty-state__text{margin:0;max-width:340px;line-height:1.5}
.empty-state .btn{margin-top:8px}

@media (max-width:600px){
  .segment{display:flex;width:100%}
  /* Einzeilig halten: kleinere Schrift/Abstände, damit "Meine Favoriten"
     samt Herz + Zähler nebeneinander passt und nicht umbricht. */
  .segment__btn{flex:1;padding:10px 8px;font-size:13px;gap:5px}
  .segment__btn .ico{width:14px;height:14px}
  .cat-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .toolbar{align-items:stretch}
  .sort{justify-content:space-between}
}

/* ---------- Tabs + Suche auf einer Zeile ---------- */
.overview-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.overview-head .segment{flex:none}
.overview-head .searchbar{flex:1;min-width:220px;max-width:none;margin:0}

/* ---------- Suchleiste in der Übersicht ---------- */
.topbar > .account{margin-left:auto}
.searchbar{position:relative;max-width:520px;margin:18px 0 0}
.searchbar__icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none;
}
.searchbar input{
  width:100%;box-sizing:border-box;
  padding:12px 14px 12px 42px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.searchbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}
.searchbar input::placeholder{color:var(--muted)}

/* ---------- Konto-Badge (offene Anfragen) am Account-Button ---------- */
.account__btn{position:relative}
.account__badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--pink);color:#1a0d14;
  font-size:11px;font-weight:800;line-height:18px;text-align:center;box-sizing:border-box;
}

/* ---------- Rechte Sidebar (Konto-Menü + Freunde) ---------- */
/* z-index über dem Vollbild-Spieler (100), aber unter dem Login-Gate (200),
   damit die Freunde-Sidebar auch aus einem laufenden Spiel heraus erscheint. */
.fp-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s ease}
.fp-overlay.is-open{opacity:1}
.side-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(360px,90vw);
  display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--border);box-shadow:var(--shadow);
  transform:translateX(100%);transition:transform .25s ease;
  padding-top:env(safe-area-inset-top);
}
.side-panel.is-open{transform:none}

.sp-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.sp-user{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.sp-user__meta{display:flex;flex-direction:column;min-width:0}
.sp-user__name{font-weight:800;font-size:16px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-user__sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.fp-close:hover{background:var(--surface-2);color:var(--text)}

/* Konto-Navigation in der Sidebar */
.sp-nav{display:flex;flex-direction:column;gap:2px;padding:8px;border-bottom:1px solid var(--border)}
.sp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;text-decoration:none;
  padding:11px 12px;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--text);font:inherit;font-size:14px;font-weight:600}
.sp-item:hover{background:var(--surface-2)}
.sp-item--danger{color:#ff9b9b}
.sp-item .ico{width:18px;height:18px}

/* Runde-teilen-Button (nur in einer laufenden Runde sichtbar) */
.sp-share-wrap{padding:12px;border-bottom:1px solid var(--border)}
.sp-share-wrap[hidden]{display:none}
.sp-share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 16px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:700;font-size:14px;
  color:#fff;background:#2f6fed;box-shadow:0 8px 22px rgba(47,111,237,.35);transition:background .15s,filter .15s}
.sp-share:hover{background:#2a63d4}
.sp-share:active{filter:brightness(.95)}
.sp-share .ico{width:18px;height:18px}

/* Freunde-Bereich in der Sidebar */
.sp-friends{flex:1;display:flex;flex-direction:column;min-height:0}
.fp-head-row{display:flex;align-items:center;gap:8px;padding:14px 16px 2px}
.fp-head-row .fp-h{margin:0}
.fp-link{margin-left:auto;font-size:13px;color:var(--subtitle);text-decoration:none}
.fp-link:hover{color:var(--accent)}
.fp-search{padding:10px 16px;position:relative}
.fp-search input{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;outline:none;
}
.fp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,110,255,.18)}
.fp-results{margin-top:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}
.fp-section{padding:4px 8px 8px;overflow-y:auto}
#fp-friends{flex:1}
.fp-h{font-size:14px;font-weight:800;
  color:var(--text);margin:14px 8px 6px;display:flex;align-items:center;gap:8px}
.fp-count{background:var(--surface-2);border-radius:8px;padding:1px 7px;font-size:11px;color:var(--text)}
.fp-empty{color:var(--muted);font-size:13px;padding:8px 8px 4px;margin:0}

/* Zeile pro Nutzer */
.fp-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.fp-row:hover{background:var(--surface)}
.fp-row--muted{opacity:.7}
.fp-ava{position:relative;flex:none}
.fp-dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--muted);border:2px solid var(--bg)}
.fp-dot.is-online{background:#22c55e}
.fp-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.fp-name{font-weight:700;font-size:14px;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.fp-name:hover{color:var(--accent)}
.fp-statusline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fp-status{font-size:12px;color:var(--muted)}
.fp-status--online{color:#22c55e}
.fp-status--play{color:var(--subtitle)}
.fp-actions{display:flex;gap:6px;flex:none}
.fp-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.fp-btn:hover{filter:brightness(1.1)}
.fp-btn--ok{background:var(--accent);border-color:transparent;color:#fff}
.fp-btn:disabled{opacity:.5;cursor:not-allowed}
.fp-join{flex:none;margin-left:auto;border:0;border-radius:9px;padding:9px 16px;font:inherit;
  font-size:13px;font-weight:800;cursor:pointer;background:#22c55e;color:#04210f}
.fp-join:hover{filter:brightness(1.08)}
.fp-tag{font-size:12px;font-weight:700;color:var(--muted);padding:6px 8px}
.fp-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s}
.fp-row:hover .fp-x{opacity:1}
.fp-x:hover{background:var(--surface-2);color:#ff9b9b}
.fp-x .ico{width:15px;height:15px}