/* ================================================================
   PLAY SCROLL – core/style_ansichten.css   (aus core/style.css ausgelagert, 2026-10-10)
   Ansichten neben dem Feed: Spiele-Uebersicht, Big Games, Nachrichten,
   Profil-Kacheln, Installier-Ansicht, Offline-Hinweis, Meldungen (#toast).
   REIHENFOLGE ZAEHLT: style.css -> style_ansichten.css -> style_pc.css ->
   style_profil.css -> style_rangliste.css. Die Dateien wurden nur an
   Abschnittsgrenzen geteilt, nicht umsortiert - so bleibt die Kaskade
   genau wie vorher. Farben: Variablen aus style.css (:root / html.ps-hell).
   ================================================================ */
/* ---------- Games-Ansicht ---------- */
#view-games,#view-profile,#view-messages,#view-saved,#view-install,#view-rangliste{overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--seite-txt);
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + var(--bottomnav-h) + env(safe-area-inset-bottom))}
.games-wrap{max-width:640px;margin:0 auto}
.games-head{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.games-head h1{font-size:26px;font-weight:900}
.search-wrap{position:relative}
.search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:14px;opacity:.65;pointer-events:none;color:var(--seite-txt-dim)}
.games-head input{width:100%;background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:999px;
  padding:12px 18px 12px 38px;color:var(--seite-txt);font-size:15px;outline:none}
.games-head input:focus{border-color:var(--gold)}
.games-head input::placeholder{color:var(--seite-txt-dim)}

/* Wechselndes Feature-Banner - ein grösseres Spiel, alle paar Sekunden
   ein anderes (siehe startFeaturedRotation in games-view.js). */
.games-featured{margin:16px 0 4px}
.featured-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  width:100%;background:linear-gradient(135deg,rgba(255,138,0,.16),rgba(255,201,60,.12));
  border:1px solid var(--seite-glass-border);border-radius:20px;padding:22px;
  animation:featuredIn .4s ease;
  font-family:inherit;color:inherit;cursor:pointer}
.featured-card .fc-download{position:absolute;top:14px;right:14px;z-index:3;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(10,13,24,.55);border:1px solid rgba(255,255,255,.25);
  color:#fff;backdrop-filter:blur(2px)}
.featured-card .fc-download .i{width:16px;height:16px}
.featured-card .fc-download:active{transform:scale(.9)}
.featured-card:not(.gross) .fc-download{top:16px;right:16px;
  background:var(--seite-glass);border-color:var(--seite-glass-border);color:var(--seite-txt-dim)}
/* Seit der Bildvorschau steckt der Inhalt in .fc-inhalt. Die Spalten-
   Anordnung muss deshalb HIER liegen und nicht nur bei .gross - sonst
   flossen Logo, Name, Beschreibung und Knopf der normalen Spiele in eine
   einzige Zeile, und das Banner war nur noch halb so hoch. */
.featured-card .fc-inhalt{display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;width:100%}
@keyframes featuredIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.featured-card .fc-icon{font-size:38px}
.featured-card .fc-name{font-weight:900;font-size:19px}
.featured-card .fc-desc{font-size:12.5px;color:var(--seite-txt-dim);line-height:1.4}
.featured-card .fc-cta{margin-top:6px;font-weight:800;font-size:13px;color:var(--gold-txt)}

/* ---------- Big Games: Banner mit eigener Bildvorschau (seit 1.37.0) ----------
   Nur fuer die Spiele in BIG_GAMES (core/games-view.js), die auch eine
   Szene im Sprite haben. Der Aufbau bleibt derselbe - Logo, Name,
   Beschreibung, Knopf, alles links. Neu ist nur, was DAHINTER liegt. */
.featured-card.gross{position:relative;overflow:hidden;padding:0;
  background:#101423;min-height:172px;display:block}
.featured-card.gross .fc-bg{position:absolute;inset:0;z-index:0;display:block}
.featured-card.gross .fc-bg svg{width:100%;height:100%;display:block}
.featured-card.gross .fc-bg .fc-bild{width:100%;height:100%;display:block;object-fit:cover;object-position:60% 40%}
/* Schleier von links: die Szene bleibt rechts sichtbar, der Text links
   liegt auf ruhigem Grund. Ohne ihn ist die Beschreibung auf dem Himmel
   nicht zu lesen. */
.featured-card.gross .fc-schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,rgba(10,13,24,.90) 0%,rgba(10,13,24,.72) 34%,
    rgba(10,13,24,.22) 62%,rgba(10,13,24,0) 86%)}
.featured-card.gross .fc-inhalt{position:relative;z-index:2;
  padding:22px;max-width:74%;width:auto}
.featured-card.gross .fc-name,
.featured-card.gross .fc-desc{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.featured-card.gross .fc-desc{color:rgba(255,255,255,.86)}
/* Am Handy ist weniger Platz - der Text darf mehr Breite nehmen, die
   Szene rutscht weiter nach rechts aus dem Blick. */
@media (max-width:420px){
  .featured-card.gross .fc-inhalt{max-width:84%;padding:18px}
  .featured-card.gross{min-height:158px}
}
.games-sec h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--seite-txt-dim);margin:20px 0 10px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.game-tile{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;
  background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:16px;
  padding:14px;transition:transform .12s ease;
  font-family:inherit;color:inherit;cursor:pointer}
.game-tile:active{transform:scale(.96)}
.game-tile .gi{font-size:26px}
.game-tile .gn{font-weight:800;font-size:14px}
.game-tile .gd{font-size:11.5px;color:var(--seite-txt-dim);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-tile .gtop-icons{position:absolute;top:10px;right:10px;display:flex;
  align-items:center;gap:6px}
.game-tile .gsaved{font-size:13px}
.game-tile .gdownload{width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:var(--seite-glass);
  border:1px solid var(--seite-glass-border);color:var(--seite-txt-dim)}
.game-tile .gdownload .i{width:14px;height:14px}
.game-tile .gdownload:active{transform:scale(.9)}
/* Seit 2026-09-27 (Philipps Vorgabe), PC und Handy: groesseres Logo,
   Titel gleich gross aber etwas tiefer, Beschreibung ganz weg. */
.game-tile{padding:16px}
.game-tile .gi{font-size:44px}
.game-tile .gi .gl{width:84px;height:84px}
.game-tile .gn{margin-top:10px}
.game-tile .gd{display:none}

/* ---------- Nachrichten-Ansicht ---------- */
.msgs-wrap{max-width:520px;margin:0 auto}
.msgs-wrap h1{font-size:26px;font-weight:900;margin-bottom:14px}
.msgs-hint{font-size:11.5px;color:var(--seite-txt-dim);background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  border-radius:12px;padding:9px 12px;margin-bottom:14px;line-height:1.4}
.msg-entry{background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:16px;
  padding:14px;margin-bottom:12px}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.msg-head .gi{font-size:17px}
.msg-head .gn{font-weight:800;font-size:13px;flex:1}
.msg-head .msg-time{font-size:10.5px;color:var(--seite-txt-dim)}
.msg-text{font-size:14px;line-height:1.4;margin-bottom:8px}
.msg-reply{background:var(--seite-glass);border-left:2px solid var(--cyan);border-radius:0 10px 10px 0;
  padding:7px 10px;margin:6px 0 0 12px}
.msg-reply-meta{font-size:10px;color:var(--seite-txt-dim);margin-bottom:2px}
.msg-reply-text{font-size:13px;line-height:1.35}
.msg-reply-form{display:flex;gap:8px;margin-top:10px}
.msg-reply-form input{flex:1;background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:999px;
  padding:8px 14px;color:var(--seite-txt);font-size:13px;outline:none}
.msg-reply-form button{width:32px;height:32px;border-radius:50%;background:var(--pink);color:#1c0f00;font-size:13px}

/* ---------- Profil-Ansicht ---------- */
.profile-wrap{max-width:400px;margin:0 auto}
.profile-card{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:center}
.profile-card h1{font-size:22px;font-weight:900;margin-top:6px}
.avatar-big{width:76px;height:76px;border-radius:50%;margin:8px auto 0;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--cyan));color:#1c0f00}
.auth-tabs{display:flex;background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  border-radius:999px;padding:3px;margin:16px 0 4px}
.auth-tabs.sub{margin-top:10px}
.auth-tab{flex:1;padding:9px 0;border-radius:999px;font-weight:700;font-size:13px;color:var(--seite-txt-dim)}
.auth-tab.active{background:linear-gradient(135deg,var(--pink),#ffb020);color:#1c0f00}
.auth-hint{font-size:12px;color:var(--seite-txt-dim);line-height:1.5;text-align:left;margin:8px 0 4px}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:10px;text-align:left}
.auth-form label{font-size:12px;font-weight:700;color:var(--seite-txt-dim);display:flex;flex-direction:column;gap:5px}
.auth-form input{background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:12px;
  padding:12px 14px;color:var(--seite-txt);font-size:15px;outline:none;font-weight:500}
.auth-form input:focus{border-color:var(--cyan-txt)}
.auth-error{color:var(--pink);font-size:12.5px;font-weight:700;min-height:15px}
.knopf-auth{margin-top:4px;padding:13px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--pink),#ffb020);color:#1c0f00;transition:transform .12s ease}
.knopf-auth:active{transform:scale(.97)}
.knopf-auth.ghost{background:var(--seite-glass);border:1px solid var(--seite-glass-border);color:var(--seite-txt);margin-top:16px}
.profile-tile{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:22px;padding:18px;border-radius:18px;background:var(--seite-glass);border:1px solid var(--seite-glass-border)}
.profile-tile.locked{opacity:.7}
.profile-tile .pt-icon{font-size:22px}
.profile-tile .pt-title{font-weight:800;font-size:14px}
.profile-tile .pt-sub{font-size:11px;color:var(--seite-txt-dim)}

/* Die anklickbare "Installieren"-Zeile im Profil (Handy-Einstieg): dieselbe
   Kachel-Optik wie die anderen Profil-Kacheln, aber als Zeile mit Pfeil statt
   zentrierter Spalte - sie fuehrt zur eigenen Installier-Ansicht, zeigt aber
   selbst nichts weiter an. */
.profile-tile.install-zeile{flex-direction:row;align-items:center;justify-content:space-between;
  text-align:left;gap:10px;cursor:pointer}
.profile-tile.install-zeile .pt-title{display:flex;align-items:center;gap:8px}
.profile-tile.install-zeile .zeile-pfeil{width:16px;height:16px;opacity:.5;flex-shrink:0}

/* ---------- Installier-Ansicht (seit 1.38.0) ---------- */
.install-wrap{max-width:400px;margin:0 auto}
/* Kopf: Name oben links, das Symbol direkt daneben - bewusst klein und am
   Rand statt der frueheren grossen zentrierten Version (2026-09-13,
   Philipps Wunsch nach "moderner und cleaner", siehe .install-balken). */
.install-kopf{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.install-kopf img{width:36px;height:36px;border-radius:9px;flex-shrink:0}
.install-andere{margin-top:22px}
.install-andere-liste{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.install-andere-logo{width:52px;height:52px;border-radius:15px;background:var(--seite-glass);
  border:1px solid var(--seite-glass-border);display:flex;align-items:center;justify-content:center}
.install-andere-logo .gl{width:28px;height:28px}
.install-info{margin-top:14px}
.install-recht{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.install-recht a{background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--seite-txt-dim);
  text-decoration:none}
/* Der Bildbalken: dasselbe Symbol, das vorher oben stand, jetzt als
   eigene Bildflaeche zwischen Knopf und Info - dieselbe Farbszene wie die
   Startkarte (.home), nur als schmaler Balken statt Vollbild. */
.install-balken{margin:18px 0;border-radius:20px;overflow:hidden;
  aspect-ratio:400/170;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 90% at 20% 10%, rgba(255,138,0,.28), transparent 60%),
    radial-gradient(55% 90% at 85% 90%, rgba(255,201,60,.20), transparent 60%),
    linear-gradient(160deg,#0b0b12,#12121e 60%,#0b0b12)}
.install-balken img{width:88px;height:88px;border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.3)}

/* Profil in Bereichen (2026-10-09): Übersicht mit großen Knöpfen, je Bereich
   ein Kopf mit Zurück-Pfeil (siehe pfKachel/pfBereich in core/auth.js) */
.pf-menue{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
@media(min-width:560px){.pf-menue{grid-template-columns:1fr 1fr}}
.pf-uebersicht[hidden],.pf-bereich[hidden]{display:none}
.pf-kachel{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:14px;border-radius:18px;background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  color:inherit;transition:transform .12s ease}
.pf-kachel:active{transform:scale(.97)}
.pf-ic{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--cyan));color:#1c0f00}
.pf-ic .i{width:21px;height:21px}
.pf-kachel[data-pf="profil"] .pf-ic{background:linear-gradient(135deg,#ff5f9e,#b45cff)}
.pf-kachel[data-pf="extras"] .pf-ic{background:linear-gradient(135deg,#ff9a2a,#ffd54a)}
.pf-kachel[data-pf="einstellungen"] .pf-ic{background:linear-gradient(135deg,#6b7bff,#9b5cff)}
.pf-kachel[data-pf="konto"] .pf-ic{background:linear-gradient(135deg,#2bb673,#25b8d6)}
.pf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-txt b{font-size:15px;font-weight:800}
.pf-txt small{font-size:12px;color:var(--seite-txt-dim);line-height:1.35}
.pf-pfeil{width:16px;height:16px;opacity:.45;flex:none}
.pf-kopf{display:flex;align-items:center;gap:10px;margin-top:20px;text-align:left}
.pf-kopf h2{font-size:18px;font-weight:900;margin:0}
.pf-zurueck{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--seite-glass);border:1px solid var(--seite-glass-border);color:inherit}
.pf-zurueck .i{width:18px;height:18px}
.pf-bereich .profile-tile:first-of-type{margin-top:14px}
/* Profil-Einstellung "Bewegungen reduzieren": Menüs, Fenster, Knöpfe ohne Animation */
body.ps-ruhig .sheet,body.ps-ruhig #backdrop,body.ps-ruhig #toast,body.ps-ruhig .side-btn,body.ps-ruhig .side-btn *,
body.ps-ruhig .pf-kachel,body.ps-ruhig .profile-stat,body.ps-ruhig .pause-overlay,body.ps-ruhig .tap-hint,
body.ps-ruhig .nav-item,body.ps-ruhig .ko-btn,body.ps-ruhig .karten-vorschau{transition:none!important;animation:none!important}
.profile-stats{display:flex;gap:10px;margin-top:18px}
.profile-stat{flex:1;background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:16px;
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;transition:transform .12s ease}
.profile-stat:active{transform:scale(.96)}
.profile-stat b{font-size:20px;font-weight:900}
.profile-stat span{font-size:11px;color:var(--seite-txt-dim)}
.profile-top-list{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.profile-top-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--seite-glass);border:1px solid var(--seite-glass-border);border-radius:12px;padding:9px 12px}
.profile-top-item .gi{font-size:18px}
.profile-top-item .gn{font-weight:700;font-size:13px;flex:1}
.profile-top-item .gc{font-size:11px;color:var(--gold-txt);font-weight:800}

#toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translate(-50%,80px);
  /* Bleibt bewusst dunkel mit weisser Schrift, auch in der hellen App:
     eine kurze Meldung soll sich abheben, und sie erscheint auch ueber
     der dunklen Spielflaeche. Die Schriftfarbe steht hier fest, sonst
     wuerde das schwarze --txt durchschlagen. */
  background:rgba(20,20,34,.95);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:12px 22px;
  color:#fff;
  font-weight:700;font-size:14px;z-index:210;opacity:0;transition:all .3s ease;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Offline-Hinweis (seit 1.38.0) ----------
   Die App laeuft installiert auch ohne Netz. Dann laden Kommentare,
   Stimmen und der Konto-Abgleich nicht - ohne Hinweis sieht das wie ein
   Fehler aus. Liegt UEBER dem Vollbild (z-index 200) und dem Toast (210),
   nimmt aber selbst keine Klicks an. Dunkel und mit fester Schriftfarbe
   wie der Toast: der Hinweis erscheint auch ueber der Spielflaeche. */
.ps-offline{position:fixed;left:50%;transform:translateX(-50%);
  top:calc(8px + env(safe-area-inset-top));z-index:300;
  background:rgba(255,138,0,.92);color:#fff;border-radius:999px;
  padding:5px 14px;font-weight:700;font-size:12px;
  display:none;pointer-events:none;white-space:nowrap;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis}
.ps-offline.an{display:block}

@media (min-width:768px) and (max-width:1023px){ .sidebar{right:18px} .game-info{right:96px;left:26px} }


/* Umschalter Games/Apps + Apps-Karten (2026-10-20, core/apps-view.js) */
.games-tabs{display:flex;gap:8px}
.games-tab{font:inherit;font-size:22px;font-weight:900;background:none;border:0;color:var(--seite-txt-dim);padding:2px 12px 6px;border-bottom:3px solid transparent;cursor:pointer}
.games-tab.active{color:var(--seite-txt);border-bottom-color:var(--gold)}
#view-games [hidden]{display:none!important}
#view-games a.app-tile{text-decoration:none;color:inherit}