/* ================================================================
   PLAY SCROLL – core/style_look.css   (2026-10-13)
   Einheitlicher Look im Stil der Installationsseiten (_build_store.js):
   ruhiger dunkler Grund, feine Trennlinien statt dicker Kaesten, EIN
   Orange (mit Verlaeufen/Abstufungen) fuer alles, was markiert ist.
   Wird als LETZTE Stildatei geladen und aendert nur das Aussehen,
   nicht den Aufbau (Philipps Vorgabe: Grundstruktur bleibt).
   ================================================================ */
:root{
  --marke:#ff8a00; --marke2:#ffc93c; --marke-txt:#ffae42;
  --marke-weich:rgba(255,138,0,.12); --marke-rand:rgba(255,138,0,.32);
  --flaeche-l:rgba(255,255,255,.035); --flaeche-l2:rgba(255,255,255,.065);
  --knopf-txt:#1c0f00;
}
html.ps-hell{
  --marke-txt:#a35c00; --marke-weich:rgba(255,138,0,.12); --marke-rand:rgba(255,138,0,.4);
  --flaeche-l:rgba(0,0,0,.03); --flaeche-l2:rgba(0,0,0,.06);
}

/* ---------- Grundlagen ---------- */
input[type=radio],input[type=checkbox],input[type=range]{accent-color:var(--marke)}
:focus-visible{outline:2px solid var(--marke2);outline-offset:2px}
#view-games a,#view-profile a,#view-install a,#view-rangliste a,#view-messages a,.sheet a{color:var(--marke-txt)}

/* Hintergrund wie auf der Installationsseite: ruhig, oben ein leichter
   orangefarbener Schein (bleibt stehen, der Inhalt scrollt darueber). */
#view-games,#view-profile,#view-messages,#view-saved,#view-install,#view-rangliste{
  background:radial-gradient(110% 340px at 50% -120px,rgba(255,138,0,.10),transparent 70%),var(--seite)}
html.ps-hell #view-games,html.ps-hell #view-profile,html.ps-hell #view-messages,
html.ps-hell #view-saved,html.ps-hell #view-install,html.ps-hell #view-rangliste{
  background:radial-gradient(110% 340px at 50% -120px,rgba(255,138,0,.08),transparent 70%),var(--seite)}

/* Ueberschriften wie im Store */
.games-head h1,.msgs-wrap h1,#view-rangliste h1,#view-saved h1,.install-wrap h1{font-weight:800;letter-spacing:-.3px}

/* ---------- Kopfleiste (Handy) + untere Navigation ---------- */
.app-topbar{background:rgba(11,11,18,.82);border-bottom-color:var(--linie)}
html.ps-hell .app-topbar{background:rgba(255,255,255,.86)}
.tb-logo b,.nav-logo b{background:linear-gradient(90deg,var(--marke),var(--marke2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tb-wallet{background:var(--flaeche-l);border-color:var(--linie)}
.app-bottomnav{border-top-color:var(--linie)!important}
/* Nur der GERADE offene Bereich ist orange - vorher leuchtete "Games"
   immer mit, auch im Profil. Games bleibt durch das groessere Symbol
   hervorgehoben. */
.bn-games{color:inherit;opacity:1}
.bn-item.active,.bn-games.active{color:var(--marke)}

/* ---------- Linke Navigation am PC ---------- */
@media (min-width:1024px){
  .app-nav{border-right-color:var(--linie)}
  .nav-item{color:var(--seite-txt-dim);position:relative}
  .nav-item:hover{background:var(--flaeche-l2);color:var(--seite-txt)}
  .nav-item.active{background:var(--marke-weich);color:var(--marke-txt)}
  .nav-item.active::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
    border-radius:3px;background:linear-gradient(var(--marke),var(--marke2))}
}

/* ---------- Games ---------- */
.games-head input,.games-head input:focus{background:var(--flaeche-l);border:1px solid var(--linie);border-radius:14px}
.games-head input:focus{border-color:var(--marke-rand);box-shadow:0 0 0 3px var(--marke-weich)}
.featured-card{border-radius:20px;border-color:var(--linie);
  background:radial-gradient(90% 120% at 0% 0%,rgba(255,138,0,.16),var(--flaeche-l) 70%)}
.featured-card.gross{border:0;box-shadow:0 0 0 1px var(--linie),0 14px 36px rgba(0,0,0,.35)}
.featured-card .fc-cta{color:var(--marke-txt)}
.featured-card.gross .fc-cta{color:var(--marke2)}
@media (min-width:1024px){
  .featured-card{background:radial-gradient(90% 120% at 0% 0%,rgba(255,138,0,.14),var(--flaeche-l) 70%);border-color:var(--linie)}
  .game-tile{background:var(--flaeche-l);border-color:var(--linie)}
}
/* Abschnittstitel wie im Store: ruhig, normale Schreibweise, Symbol orange */
.games-sec h2{font-size:17px;font-weight:700;text-transform:none;letter-spacing:-.1px;
  color:var(--seite-txt)!important;margin:28px 0 12px;display:flex;align-items:center;gap:8px}
.games-sec h2 .i{color:var(--marke)}
.game-tile{background:var(--flaeche-l);border:1px solid var(--linie);border-radius:18px;
  transition:transform .12s ease,background .2s ease,border-color .2s ease}
.game-tile:hover{background:var(--flaeche-l2);border-color:var(--marke-rand)}
.game-tile .gi .gl{box-shadow:0 0 0 1px var(--linie),0 10px 26px rgba(0,0,0,.4);border-radius:22.5%}
.game-tile .gn{font-weight:700}

/* Installieren-Knopf auf Kachel und Banner: gleich gross wie bisher,
   aber eine unsichtbar groessere Tippflaeche (~46px) fuer den Finger. */
.game-tile .gdownload,.featured-card .fc-download{overflow:visible}
.game-tile .gdownload{position:relative}
.game-tile .gdownload::after,.featured-card .fc-download::after{content:"";position:absolute;
  inset:-10px;border-radius:50%}
.game-tile .gdownload{background:var(--marke-weich);border-color:var(--marke-rand);color:var(--marke-txt)}
.game-tile .gdownload:hover,.featured-card .fc-download:hover{background:var(--marke);color:var(--knopf-txt);border-color:transparent}
.featured-card:not(.gross) .fc-download{background:var(--marke-weich);border-color:var(--marke-rand);color:var(--marke-txt)}

/* Banner "Online mit Freunden" und Gold-Rangliste in Orange */
.pso-banner{background:radial-gradient(90% 140% at 0% 0%,rgba(255,138,0,.16),var(--flaeche-l) 70%)!important;
  border:1px solid var(--linie)!important;border-radius:18px!important}
.games-rang-balken{background:radial-gradient(90% 140% at 0% 0%,rgba(255,201,60,.12),var(--flaeche-l) 70%)!important;
  border:1px solid var(--linie)!important;border-radius:18px!important}

/* Gespeichert / Nachrichten: dieselben ruhigen Flaechen */
.saved-item,.msg-entry,.msgs-hint{background:var(--flaeche-l)!important;border:1px solid var(--linie)!important}
.saved-item .go{color:var(--marke-txt)}
.msg-reply{border-left-color:var(--marke)}

/* ---------- Profil ---------- */
.profile-wrap{max-width:460px}
.pc-head{gap:16px;margin:4px 0 6px}
.pc-head .avatar-big{width:84px;height:84px;margin:0;border:0;
  box-shadow:0 0 0 2px var(--marke),0 0 0 5px var(--marke-weich),0 10px 26px rgba(0,0,0,.4)}
.pc-info h1{font-size:clamp(22px,5.4vw,26px);font-weight:800;letter-spacing:-.3px}
.pc-info .auth-hint{color:var(--marke-txt);font-weight:600;font-size:13.5px;margin:2px 0 0}
.pc-info .pc-sub{display:block;color:var(--seite-txt-dim);font-size:12.5px;margin-top:1px}

/* Werte-Zeile wie "Werte" im Store: eine Linie, feine Trenner, kein Kasten */
.profile-stats{gap:0;margin-top:14px;padding:12px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.profile-stat{background:none!important;border:0!important;border-radius:10px;padding:4px 6px;gap:1px}
.profile-stat+.profile-stat{border-left:1px solid var(--linie)!important;border-radius:0}
.profile-stat b{font-size:18px;font-weight:800}
.profile-stat span{font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.profile-stat span .i{color:var(--marke)}
button.profile-stat:hover b{color:var(--marke-txt)}

/* Installieren-Zeile: dezent orange hinterlegt */
.profile-tile.install-zeile{background:radial-gradient(120% 160% at 0% 0%,rgba(255,138,0,.16),var(--flaeche-l) 70%)!important;
  border:1px solid var(--marke-rand)!important;border-radius:16px;padding:14px 16px}
.profile-tile.install-zeile .pt-title .i{color:var(--marke)}

/* Menue: eine gruppierte Liste mit feinen Linien statt vier bunter Kaesten */
.pf-menue{grid-template-columns:1fr!important;gap:0;margin-top:16px;border-radius:18px;overflow:hidden;
  background:var(--flaeche-l);border:1px solid var(--linie)}
.pf-kachel{border:0;border-radius:0;background:none;padding:14px 16px;gap:14px}
.pf-kachel+.pf-kachel{border-top:1px solid var(--linie)}
.pf-kachel:hover{background:var(--flaeche-l2)}
.pf-kachel:active{transform:none;background:var(--marke-weich)}
.pf-ic,.pf-kachel[data-pf] .pf-ic{width:40px;height:40px;border-radius:50%;
  background:var(--marke-weich)!important;color:var(--marke)}
.pf-txt b{font-weight:700}
.pf-kachel:hover .pf-pfeil{opacity:.9;color:var(--marke)}
.pf-kachel[hidden]{display:none}   /* "Konto & Bereiche" bzw. "Abmelden" - je nach Rechten (profil.js) */
button.profile-stat{cursor:pointer;color:inherit;font:inherit}

/* Bereiche (Einstellungen, Konto, ...): Kopf + ruhige Karten, links ausgerichtet */
.pf-kopf h2{font-weight:800;letter-spacing:-.2px}
.pf-zurueck{background:var(--flaeche-l2);border-color:transparent}
.pf-zurueck:hover{background:var(--marke-weich);color:var(--marke-txt)}
.profile-tile{align-items:stretch;text-align:left;background:var(--flaeche-l)!important;
  border:1px solid var(--linie)!important;border-radius:18px;padding:16px 18px}
.profile-tile .pt-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.profile-tile .pt-title .i{color:var(--marke)}
.profile-tile label{justify-content:flex-start}
.profile-top-item{background:var(--flaeche-l2)!important;border:0!important;border-radius:12px}
.profile-top-item .gc{color:var(--marke-txt)}
.av-profil{background:var(--flaeche-l)!important;border:1px solid var(--linie)!important}
.ps-abschnitt{color:var(--seite-txt-dim)}

/* Knoepfe im Profil wie "Installieren" im Store: Orange, dunkle Schrift */
.knopf-auth{background:linear-gradient(135deg,var(--marke),#ffb020);color:var(--knopf-txt);
  box-shadow:0 8px 22px rgba(255,138,0,.2);border-radius:14px}
.knopf-auth:hover{filter:brightness(1.06)}
.knopf-auth.ghost{background:var(--flaeche-l2)!important;border:1px solid var(--linie)!important;
  color:var(--seite-txt)!important;box-shadow:none}
.auth-tabs{background:var(--flaeche-l);border-color:var(--linie)}
.auth-form input,.auth-form input:focus{background:var(--flaeche-l)!important;border-color:var(--linie)!important}
.auth-form input:focus{border-color:var(--marke-rand)!important;box-shadow:0 0 0 3px var(--marke-weich)}
.auth-error{color:#ff6a3d}

/* Impressum / Datenschutz / AGB wie im Store-Fuss: grau, ohne Blau */
.ps-recht{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin:30px 0 6px;
  padding-top:18px;border-top:1px solid var(--linie)}
.ps-recht a{color:var(--seite-txt-dim)!important;text-decoration:none;font-size:13px;font-weight:600}
.ps-recht a:hover{color:var(--seite-txt)!important}

/* ---------- Fenster (Shop, Kommentare, ...) ---------- */
.sheet{border-radius:22px 22px 0 0;border:1px solid var(--linie);border-bottom:0}
.sheet-head{border-bottom-color:var(--linie)}
.sheet-head button{border-radius:50%;width:34px;height:34px;padding:0;background:var(--flaeche-l2)}
.shop-item{background:var(--flaeche-l)!important;border:1px solid var(--linie)!important;border-radius:14px}
.shop-item button{color:var(--knopf-txt)}
.shop-item button.eq,.vc-action button.eq{background:var(--marke-weich)!important;
  border:1px solid var(--marke-rand)!important;color:var(--marke-txt)!important}
.sheet-form input:focus{border-color:var(--marke-rand)}
.sheet-form button{color:var(--knopf-txt)}
#toast{border-color:rgba(255,138,0,.28)}

/* ---------- Rangliste ---------- */
.rang-reiter{background:var(--flaeche-l);border-color:var(--linie)}
.rang-reiter button.an{background:linear-gradient(135deg,var(--marke),#ffb020);color:var(--knopf-txt)}
/* Spiel- und Gold-Rangliste wie das Profil-Menue (Smaragd 13.10.: "altes Design"):
   EINE gruppierte Liste mit feinen Linien statt zehn einzelner Kaesten,
   der eigene Eintrag nur dezent orange mit Strich links. */
.gr-liste{gap:0;border-radius:18px;overflow:hidden;background:var(--flaeche-l);border:1px solid var(--linie)}
.gr-zeile{background:none;border:0;border-radius:0;padding:12px 16px}
.gr-zeile+.gr-zeile{border-top:1px solid var(--linie)}
.gr-zeile.ist-ich{border-color:var(--linie);background:linear-gradient(92deg,var(--marke-weich),transparent 75%);
  box-shadow:inset 3px 0 0 var(--marke)}
.gr-gold{color:var(--marke-txt)}
.gr-du{background:var(--marke);color:var(--knopf-txt)}
.gr-laed,.gr-leer,.gr-hinweis{background:var(--flaeche-l);border-color:var(--linie)}
.gr-trenner{color:var(--seite-txt-dim)}
.rang-balken{background:var(--linie)}
.rang-balken i{background:linear-gradient(90deg,var(--marke),var(--marke2))}
.rang-anmelden{background:linear-gradient(135deg,var(--marke),#ffb020);color:var(--knopf-txt)}

/* Tester-Knopf (Kolben) wie Shop/Rangliste in Orange statt Tuerkis; die Zahl
   sitzt knapp am Rand mit dunklem Ring, statt halb ueber dem Knopf zu haengen
   (Smaragd 13.10.: "Offset") */
.ko-aufgaben,.gf-aufgaben{color:var(--marke-txt);background:var(--marke-weich);border-color:var(--marke-rand)}
.ko-zahl{top:-4px;right:-4px;min-width:16px;height:16px;line-height:16px;font-size:9.5px;
  background:var(--marke);color:var(--knopf-txt);box-shadow:0 0 0 2px rgba(11,11,18,.9)}

/* Creator-Code im Profil so breit wie der Knopf "Rangliste ansehen" darueber
   (Smaragd 13.10.: Rangliste mittig, Code links) */
.profile-tile .code-row{max-width:none;margin-top:0}
.profile-tile .code-row input{flex:1 1 160px}
.profile-tile .code-row button{flex:0 0 auto;padding:0 22px}
html.ps-hell .game-tile .gi .gl{box-shadow:0 0 0 1px var(--linie),0 6px 16px rgba(0,0,0,.14)}
html.ps-hell .pc-head .avatar-big{box-shadow:0 0 0 2px var(--marke),0 0 0 5px var(--marke-weich),0 8px 20px rgba(0,0,0,.14)}

/* ---------- Groesser am PC (Philipp 2026-10-13: "Seite generell zu klein") ----------
   Breitere Inhaltsspalte wie die Store-Seite (880px), groessere Navigation
   und Schrift. Ab 1440px noch eine Stufe mehr. */
@media (min-width:1024px){
  :root{--nav-w:270px}
  .app-nav{padding:26px 16px}
  .nav-logo{font-size:26px;margin:4px 10px 30px}
  .nav-item{font-size:17px;padding:15px 16px;gap:16px}
  .nav-item .ni{font-size:23px;width:28px}
  .games-wrap{max-width:880px}
  .games-head h1,.msgs-wrap h1{font-size:32px}
  .games-head input{font-size:16px;padding:14px 20px 14px 42px}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .game-tile{padding:18px}
  .game-tile .gi .gl{width:104px;height:104px}
  .game-tile .gn{font-size:16px}
  .games-sec h2{font-size:19px}
  .featured-card .fc-name{font-size:23px}
  .featured-card .fc-desc{font-size:14.5px}
  .featured-card.gross{min-height:220px}
  .msgs-wrap{max-width:680px}
  .profile-wrap{max-width:620px}
  .pc-head .avatar-big{width:104px;height:104px}
  .pc-info h1{font-size:30px}
  .profile-stat b{font-size:22px}
  .profile-stat span{font-size:13.5px}
  .pf-kachel{padding:18px 20px}
  .pf-ic,.pf-kachel[data-pf] .pf-ic{width:48px;height:48px}
  .pf-txt b{font-size:17px}
  .pf-txt small{font-size:13.5px}
  .profile-tile .pt-title{font-size:17px}
  .profile-tile,.profile-tile label{font-size:15.5px}
  .auth-hint{font-size:13.5px}
  .ps-recht a{font-size:14.5px}
}
@media (min-width:1440px){
  :root{--nav-w:290px}
  .games-wrap{max-width:1000px}
  .profile-wrap{max-width:680px}
  .nav-item{font-size:18px}
}
/* Profil am Handy ebenfalls etwas groesser */
@media (max-width:1023.98px){
  .profile-wrap{max-width:520px}
  .pc-head .avatar-big{width:92px;height:92px}
  .pc-info h1{font-size:26px}
  .profile-stat b{font-size:20px}
  .pf-txt b{font-size:16px}
  .pf-txt small{font-size:12.8px}
  .pf-kachel{padding:16px}
  .pf-ic,.pf-kachel[data-pf] .pf-ic{width:44px;height:44px}
}
@media (min-width:1024px){
  .pso-banner{padding:18px 20px!important}
  .pso-banner b{font-size:17px!important}
  .pso-banner small{font-size:13.5px!important}
  .games-rang-balken{padding:16px 20px!important}
  .games-rang-balken .grb-txt b{font-size:17px!important}
  .games-rang-balken .grb-txt small{font-size:13.5px!important}
  .profile-tile.install-zeile .pt-title{font-size:16.5px}
}

/* ---------- Helle Ansicht, neu (Block 16, 2026-10-18) ----------
   Warmes Weiss statt kaltem Grau-Weiss, Orange als einziger Akzent,
   Text in warmem Dunkelbraun statt Schwarz. Gleicher Aufbau wie dunkel,
   nur die Toene wechseln. Die Spielbuehne bleibt dunkel (siehe style.css). */
html.ps-hell{
  --bg:#fffaf3; --bg2:#f8efe2;
  --txt:#2b1d0e; --txt-dim:rgba(43,29,14,.62);
  --glass:rgba(150,90,20,.06); --glass-border:rgba(150,90,20,.16);
  --linie:rgba(150,90,20,.12); --rollbalken:rgba(150,90,20,.28);
  --navbtn-bg:rgba(150,90,20,.08); --navbtn-bg-aktiv:rgba(255,138,0,.18);
  --gold-txt:#9a5600; --cyan-txt:#b35f00;
  --leiste:rgba(255,250,243,.94);
  --flaeche:#fffdf9;
  --buehne-schatten:0 1px 0 rgba(150,90,20,.08),0 22px 60px rgba(120,70,10,.16);
  --seite:var(--bg); --seite-txt:var(--txt); --seite-txt-dim:var(--txt-dim);
  --seite-glass:var(--glass); --seite-glass-border:var(--glass-border);
  --marke:#f28100; --marke-txt:#9a5600;
  --marke-weich:rgba(255,138,0,.11); --marke-rand:rgba(242,129,0,.38);
  --flaeche-l:#fffdf9; --flaeche-l2:#fdf3e6;
}
html.ps-hell body.theme-orange{--gold-txt:#9a5600; --cyan-txt:#b35f00}
html.ps-hell .app-topbar{background:rgba(255,250,243,.9)}
html.ps-hell #view-games,html.ps-hell #view-profile,html.ps-hell #view-messages,
html.ps-hell #view-saved,html.ps-hell #view-install,html.ps-hell #view-rangliste{
  background:radial-gradient(120% 360px at 50% -140px,rgba(255,160,40,.14),transparent 70%),var(--seite)}
/* Karten und Kacheln: feiner warmer Rand + weicher Schatten statt grauer Flaeche */
html.ps-hell .game-tile .gi .gl{box-shadow:0 0 0 1px var(--linie),0 6px 16px rgba(120,70,10,.14)}
html.ps-hell .s2-konto{background:var(--bg2)}
html.ps-hell ::selection{background:rgba(255,138,0,.25)}