/* ================================================================
   PLAY SCROLL – core/style_pc.css   (aus core/style.css ausgelagert, 2026-10-10)
   PC / grosser Bildschirm (ab 1024px), Info-Block, Kopfleiste am Handy.
   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).
   ================================================================ */
/* ================================================================
   PC / großer Bildschirm (ab 1024px, gilt auch fürs Tablet quer)
   Grundprinzip: #feed zeigt wie am Handy nur die eine aktuelle Karte -
   nur wie eine .game-card ihren Inhalt anordnet, ändert sich per
   Flex-Layout. Die Leiste mit Like/Kommentar/... wandert dadurch NEBEN
   das Hochformat-Spielfeld, statt es zu überlagern wie am Handy.
   ================================================================ */
@media (min-width:1024px){
  html,body{background:var(--seite)}
  .app-shell{background:var(--seite)}
  .app-stage{background:var(--seite)}

  /* PC bleibt unverändert: "Weiter" ist ohnehin immer sichtbar (siehe
     Basis-Regel oben), die Handy-Pfeil-Streifen gibt's am PC nie (dort
     gibt's stattdessen das Mausrad) - die Sichtbarkeits-/Zonen-Regeln zur
     Handy-Navigationseinstellung sind bereits auf max-width:1023.98px
     begrenzt, hier ist also nichts mehr gegenzusteuern. */
  .mobile-nav-btn{display:none}
  /* Pause- und Dislike-Button bleiben am PC, nur am Handy weg. */
  .side-btn[data-action="pause"],
  .side-btn[data-action="dislike"]{display:flex}

  /* Linkes Menü ersetzt das untere - der Feed bekommt seine volle
     Höhe zurück (--bottomnav-h wird hier bewusst nicht mehr gebraucht). */
  .app-bottomnav{display:none}
  :root{--bottomnav-h:0px;--navbtn-top-h:0px;--navbtn-bottom-h:0px}
  body.ps-nav-strips{--navbtn-top-h:0px;--navbtn-bottom-h:0px}

  .app-nav{display:flex;flex-direction:column;width:var(--nav-w);flex:0 0 auto;
    padding:22px 14px;gap:4px;border-right:1px solid var(--seite-glass-border);
    background:var(--seite);color:var(--seite-txt)}
  .nav-logo{font-size:22px;font-weight:900;letter-spacing:.5px;color:var(--seite-txt);
    margin:4px 8px 26px}
  .nav-logo b{background:linear-gradient(90deg,var(--pink),var(--cyan));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .nav-item{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:14px;
    font-size:15px;font-weight:700;color:var(--seite-txt);text-align:left;
    transition:background .15s ease}
  .nav-item .ni{font-size:20px;width:24px;text-align:center}
  /* Ohne das bliebe der Installieren-Punkt sichtbar: das display:flex
     oben ueberstimmt das display:none, das der Browser einem [hidden]
     von sich aus gibt. */
  .nav-item[hidden]{display:none}
  .nav-item:hover{background:var(--seite-glass)}
  .nav-item.active{background:linear-gradient(90deg,rgba(255,138,0,.12),rgba(255,201,60,.10));
    color:var(--pink)}

  /* Feed: die einzelne Karte zentriert ihr Hochformat-Spielfeld und
     stellt die Leiste als echte Spalte daneben, nicht mehr overlay. */
  .game-card{display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:22px;padding:26px 30px;background:var(--seite)}
  .game-card .game-stage{position:relative;inset:auto;flex:0 0 auto;
    width:min(100%,calc((100vh - var(--bottomnav-h)) * .56));height:100%;
    border-radius:26px;overflow:hidden;
    /* Steckt in --buehne-schatten, weil sich beide Ansichten hier
       unterscheiden: auf Weiss grenzt der Schatten allein schon ab,
       auf dunklem Grund ist er unsichtbar und der Buehnen-Verlauf endet
       unten bei genau der Hintergrundfarbe - dort kommt ein 1px-Ring
       dazu. Immer als box-shadow, nie als border: ein echter Rand
       aendert die Innenmasse der Spielflaeche um 2px, und die Spiele
       rechnen mit clientWidth (makeCanvas in core/utils.js). */
    box-shadow:var(--buehne-schatten);
    background:linear-gradient(170deg,#101020,#0b0b12)}
  .game-card .sidebar{position:static;inset:auto;transform:none;right:auto;top:auto;
    flex:0 0 auto;width:88px;flex-direction:column;justify-content:center;gap:20px}
  /* Am Handy liegen die Buttons als "durchscheinendes Glas" direkt auf
     der Spielflaeche (grayscale+opacity gedimmt). Am PC stehen sie in
     einer eigenen Spalte NEBEN der Buehne, wo dieser Glas-Look nichts
     mehr zu tun haette - deshalb hier voll sichtbar als eigener Kreis
     mit Rand. Farben kommen aus --seite*, seit 1.22.0 also dunkler
     Kreis mit hellem Icon (vorher weisser Kreis mit dunklem Icon). */
  .game-card .sidebar .side-btn .ic{width:46px;height:46px;font-size:19px;
    filter:none;opacity:1;color:var(--seite-txt);background:var(--seite);
    border-color:var(--seite-glass-border);box-shadow:0 2px 10px rgba(0,0,0,.12)}
  .game-card .sidebar .side-btn .ct,.game-card .sidebar .side-btn .lb{color:var(--seite-txt-dim)}
  /* Farbige Zustände (aktiv geliked/disliked/gespeichert/pausiert)
     müssen trotz der höheren Grund-Spezifität oben weiter durchkommen. */
  .game-card .sidebar .side-btn.liked .ic{color:var(--pink);border-color:rgba(255,138,0,.5)}
  .game-card .sidebar .side-btn.disliked .ic{color:#5b6bcf;border-color:rgba(91,107,207,.5)}
  .game-card .sidebar .side-btn.saved .ic{color:var(--gold);border-color:rgba(255,213,74,.6)}
  .game-card.paused .sidebar .pause-btn .ic{color:var(--cyan);border-color:rgba(255,201,60,.6)}
  /* Die Leiste sitzt jetzt daneben, nicht mehr im Spielfeld - der dafür
     reservierte rechte Rand bei game-info/tap-hint wird wieder frei. */
  .game-card .game-info{right:14px}
  .game-card .tap-hint{left:50%}

  /* .home (Startkarte) bleibt bewusst bei ihrem eigenen dunklen Look -
     kein Spielfeld, keine Seitenleiste, andere Bühne. */

  /* Games/Profil/Nachrichten: eigene Abstaende am PC. Die Farben kommen
     wie ueberall aus --seite* und sind seit 1.22.0 durchgehend dunkel. */
  #view-games,#view-profile,#view-messages,#view-saved,#view-install,#view-rangliste{color:var(--seite-txt);padding-top:36px}
  .msgs-hint{background:var(--seite-glass);border-color:var(--seite-glass-border);color:var(--seite-txt-dim)}
  .msg-entry{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .msg-head .msg-time{color:var(--seite-txt-dim)}
  .msg-reply{background:var(--seite-glass)}
  .msg-reply-meta{color:var(--seite-txt-dim)}
  .msg-reply-form input{background:var(--seite-glass);border-color:var(--seite-glass-border);color:var(--seite-txt)}
  .games-head input,.auth-form input,.games-head input:focus,.auth-form input:focus{
    background:var(--seite-glass);border-color:var(--seite-glass-border);color:var(--seite-txt)}
  .game-tile{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .game-tile .gd,.games-sec h2,.games-head input::placeholder{color:var(--seite-txt-dim)}
  .auth-tabs{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .auth-tab{color:var(--seite-txt-dim)}
  .auth-hint{color:var(--seite-txt-dim)}
  .auth-form label{color:var(--seite-txt-dim)}
  .knopf-auth.ghost{background:var(--seite-glass);border-color:var(--seite-glass-border);color:var(--seite-txt)}
  .profile-tile{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .profile-tile .pt-sub{color:var(--seite-txt-dim)}
  .profile-stat{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .profile-stat span{color:var(--seite-txt-dim)}
  .profile-top-item{background:var(--seite-glass);border-color:var(--seite-glass-border)}
  .search-wrap .search-icon{color:var(--seite-txt-dim)}
  .featured-card{background:linear-gradient(135deg,rgba(255,138,0,.08),rgba(255,201,60,.06));
    border-color:var(--seite-glass-border)}
  .featured-card .fc-desc{color:var(--seite-txt-dim)}
}

/* ---------- Info-Block ueber dem Spiel ----------
   Zwei getrennte Gruende, ihn auszublenden:
   1. Er lag bisher DAUERHAFT ueber der Spielflaeche - bei Ziegelbruch auf
      dem Paddel, bei Mini-Farm auf den Knoepfen. Jetzt verhaelt er sich wie
      .tap-hint: sichtbar, solange nicht wirklich gespielt wird.
   2. Zusaetzlich ganz abschaltbar im Profil (Body-Klasse ps-info-aus,
      siehe spielInfoAn()/applySpielInfo() in core/utils.js). */
.game-info{opacity:0;transition:opacity .25s ease}
.card.ready .game-info,
.card.live:not(.engaged) .game-info{opacity:1}
body.ps-info-aus .game-info{display:none}
.game-info .ki-hinweis{margin-top:8px;font-size:10.5px;line-height:1.35;
  color:var(--buehne-txt-dim);opacity:.72}

/* ---------- Kopfleiste (nur Handy, nur ausserhalb des Feeds) ----------
   Sichtbar geschaltet wird sie in setView() (core/nav.js) ueber das
   hidden-Attribut. Am PC bleibt sie immer aus - dort gibt es die linke
   Navigation mit eigenem Logo. */
.app-topbar{position:relative;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  background:var(--seite);
  border-bottom:1px solid var(--seite-glass-border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.app-topbar[hidden]{display:none}
body.ps-topbar{--topbar-h:52px}

.tb-logo{font-size:19px;font-weight:900;letter-spacing:.5px;color:var(--seite-txt)}
.tb-logo b{background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tb-wallet{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;
  color:var(--seite-txt);background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  border-radius:999px;padding:5px 12px;white-space:nowrap}

/* Die vier Ansichten mit Kopfleiste werden um deren Hoehe kuerzer. Der
   Feed steht NICHT in dieser Liste - er behaelt seine volle Hoehe. */
body.ps-topbar #view-games,body.ps-topbar #view-profile,
body.ps-topbar #view-messages,body.ps-topbar #view-saved,body.ps-topbar #view-install,
body.ps-topbar #view-rangliste{
  height:calc(100dvh - var(--bottomnav-h) - var(--topbar-h) - env(safe-area-inset-top))}

@media (min-width:1024px){
  .app-topbar{display:none!important}
  body.ps-topbar{--topbar-h:0px}
}

/* PC-Hochformat 9:16 (core/feed_vollbild.js, 2026-10-17): feste Spielbreiten aufheben */
.game-body.ps-hoch .gdash-root{max-width:none}
.game-body.ps-hoch .game{width:100%}
.game-body.ps-hoch{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 60px rgba(0,0,0,.45)}