/* ================================================================
   PLAY SCROLL – core/style_shop.css   (Shop-Neubau 2026-10-15)
   Der Spiel-Shop im Look der Installations- und Online-Seite
   (core/style_look.css): ruhiger dunkler Grund, feine Linien, EIN
   Orange mit Verlauf für alles, was man kaufen oder wählen kann.
   Gilt für ALLE Spiele gleich - spielspezifisch ist nur die Vorschau
   (core/feed_shop.js, SHOP_VORSCHAU). Lädt NACH style_look.css.
   ================================================================ */
#shop-sheet .sheet-body{padding-top:6px}

/* ---------- Kopf ---------- */
.s2-kopf{display:flex;align-items:center;gap:12px;padding:6px 0 10px}
.s2-kopf-ic{width:46px;height:46px;border-radius:14px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;
  background:var(--flaeche-l2);border:1px solid var(--linie);font-size:26px}
.s2-kopf-ic svg,.s2-kopf-ic img{width:100%;height:100%;display:block}
.s2-kopf-txt small{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--marke-txt)}
.s2-kopf-txt b{display:block;font-size:21px;font-weight:900;letter-spacing:-.3px;line-height:1.15}

/* Kontostand: bleibt beim Scrollen oben stehen */
.s2-konto{position:sticky;top:-14px;z-index:3;display:flex;gap:8px;padding:6px 0 10px;background:var(--bg2)}
.s2-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--flaeche-l);border:1px solid var(--linie)}
.s2-chip .i{width:16px;height:16px}
.s2-chip b{font-size:15px;font-weight:900}
.s2-chip small{font-size:11px;color:var(--txt-dim);font-weight:700}

/* Sprungleiste */
.s2-leiste{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.s2-leiste::-webkit-scrollbar{display:none}
.s2-leiste button{flex-shrink:0;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--flaeche-l);border:1px solid var(--linie);color:var(--txt)}
.s2-leiste button:active{background:var(--marke-weich);border-color:var(--marke-rand);color:var(--marke-txt)}

/* ---------- Abschnitte ---------- */
.s2-abschnitt{margin:6px 0 18px;scroll-margin-top:52px}
.s2-titel{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--txt-dim);margin:0 0 8px;padding-top:12px;border-top:1px solid var(--linie)}
.s2-titel .i{width:15px;height:15px;color:var(--marke)}
.s2-zaehler{margin-left:auto;letter-spacing:0;font-size:11px;font-weight:800;text-transform:none;color:var(--marke-txt);
  background:var(--marke-weich);border:1px solid var(--marke-rand);border-radius:999px;padding:1px 9px}
.s2-notiz{font-size:12px;color:var(--txt-dim);line-height:1.5;margin:-2px 0 10px}
.s2-notiz.ver{text-align:center;opacity:.55;font-size:11px;margin-top:6px}

/* ---------- Kaufen / Aktiv / Wählen ---------- */
.s2-kauf,.s2-aktiv,.s2-waehlen{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 13px;
  border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap;cursor:pointer;flex-shrink:0}
.s2-kauf{background:linear-gradient(135deg,var(--marke),#ffb020);color:var(--knopf-txt);border:0;
  box-shadow:0 4px 14px rgba(255,138,0,.25)}
.s2-kauf .i{width:15px;height:15px;color:var(--knopf-txt)!important}
.s2-kauf .s2-kauf-txt{font-weight:800;opacity:.75;margin-left:3px}
.s2-kauf.zu-teuer{background:var(--flaeche-l2);color:var(--txt-dim);box-shadow:none;border:1px solid var(--linie)}
.s2-kauf.zu-teuer .i{color:var(--txt-dim)!important}
.s2-kauf.sicher{background:linear-gradient(135deg,#ff5a2b,var(--marke));color:#fff;animation:s2-puls .9s ease-in-out infinite}
.s2-kauf:active{transform:scale(.95)}
.s2-aktiv{background:var(--marke-weich);border:1px solid var(--marke-rand);color:var(--marke-txt)}
.s2-aktiv .i{width:14px;height:14px}
.s2-waehlen{background:var(--flaeche-l2);border:1px solid var(--linie);color:var(--txt)}
@keyframes s2-puls{50%{box-shadow:0 0 0 5px rgba(255,138,0,.25)}}

/* ---------- Aussehen: Karten mit Vorschau ---------- */
.s2-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.s2-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.s2-karte{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;
  background:var(--flaeche-l);border:1px solid var(--linie);transition:transform .12s ease,border-color .12s ease}
.s2-karte.besessen{cursor:pointer}
.s2-karte.aktiv{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke) inset,0 6px 22px rgba(255,138,0,.18)}
.s2-vorschau{aspect-ratio:10/7;border-radius:11px;overflow:hidden;background:#0d0d16;display:grid;place-items:center}
.s2-vorschau svg{width:100%;height:100%;display:block}
.s2-karte .s2-name{font-size:14px;font-weight:800;line-height:1.2;padding:0 2px}
.s2-karte .s2-info{padding:0 2px}
.s2-fuss{margin-top:auto;display:flex;justify-content:flex-end}
.s2-fuss button{width:100%}
.s2-rang{position:absolute;top:13px;left:13px;font-size:9.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.25)}
.rang-selten .s2-rang{color:#9fd4ff;border-color:rgba(120,190,255,.55)}
.rang-episch .s2-rang{color:#d9b8ff;border-color:rgba(190,140,255,.6)}
.rang-legende .s2-rang{color:#ffd54a;border-color:rgba(255,213,74,.7);background:rgba(60,40,0,.75)}
.rang-legende .s2-vorschau{box-shadow:0 0 0 1px rgba(255,213,74,.45) inset}

/* Vorschau-Bausteine */
.pv-flaeche{width:100%;height:100%}
.pv-bild{width:100%;height:100%;background:center/contain no-repeat}
.pv-zeichen{font-size:42px;line-height:1}
.pv-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px;width:100%;height:100%;background:#2b2620;box-sizing:border-box}
.pv-kacheln i{display:grid;place-items:center;border-radius:5px;font-style:normal;font-weight:900;font-size:13px;color:#4a4036}

/* ---------- Verbesserungen und Booster: Zeilen ---------- */
.s2-perk,.s2-booster{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:8px;border-radius:16px;
  background:var(--flaeche-l);border:1px solid var(--linie)}
.s2-perk.voll{opacity:.78}
.s2-perk-ic,.s2-booster-ic{width:42px;height:42px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:var(--marke-weich);border:1px solid var(--marke-rand);color:var(--marke)}
.s2-perk-ic .i,.s2-booster-ic .i{width:21px;height:21px}
.s2-perk-ic.bild{width:50px;height:50px;background-color:rgba(20,16,40,.6);background-repeat:no-repeat}
.s2-perk-mitte{flex:1;min-width:0}
.s2-name{font-size:14.5px;font-weight:800;line-height:1.25}
.s2-info{font-size:12px;color:var(--txt-dim);line-height:1.4;margin-top:2px}
.s2-stufen{display:flex;align-items:center;gap:4px;margin-top:6px}
.s2-stufen i{width:16px;height:6px;border-radius:3px;background:var(--flaeche-l2);border:1px solid var(--linie)}
.s2-stufen i.an{background:linear-gradient(90deg,var(--marke),var(--marke2));border-color:transparent}
.s2-stufen span{margin-left:6px;font-size:11px;font-weight:800;color:var(--marke-txt)}

/* Booster */
.s2-booster{background:linear-gradient(100deg,rgba(255,138,0,.10),var(--flaeche-l) 60%);border-color:var(--marke-rand)}
.s2-booster-ic{background:linear-gradient(135deg,var(--marke),#ffb020);color:var(--knopf-txt);border:0}
.s2-booster.laeuft .s2-booster-ic{animation:s2-glimm 1.6s ease-in-out infinite}
@keyframes s2-glimm{50%{box-shadow:0 0 16px rgba(255,138,0,.6)}}
.s2-booster-zeit{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11.5px;font-weight:800;color:var(--marke-txt)}
.s2-booster-balken{display:block;flex:1;height:6px;border-radius:999px;background:var(--flaeche-l2);overflow:hidden;margin-top:6px}
.s2-booster-zeit{flex-wrap:wrap}
.s2-booster-zeit .s2-booster-balken{margin-top:0;flex:1 1 100%}
.s2-booster-balken em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--marke),var(--marke2))}

/* ---------- Wechselstube ---------- */
.s2-tausch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.s2-tausch-zelle{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;border-radius:14px;
  background:var(--flaeche-l);border:1px solid var(--linie);color:var(--txt);cursor:pointer}
.s2-tausch-zelle .i{width:20px;height:20px}
.s2-tausch-zelle b{font-size:13.5px;font-weight:900}
.s2-tausch-zelle small{font-size:11px;color:var(--txt-dim);font-weight:700}
.s2-tausch-zelle:active{border-color:var(--marke-rand);background:var(--marke-weich)}
.s2-tausch-zelle:disabled{opacity:.4;cursor:default}

/* Lane-Rush-Garage an den Look angleichen */
.vehicle-carousel{background:var(--flaeche-l)!important;border:1px solid var(--linie)!important;border-radius:18px!important}
.vc-arrow{background:var(--flaeche-l2)!important;border:1px solid var(--linie)!important}
.vc-title span{color:var(--marke-txt)!important;font-weight:800}
.vc-action .s2-kauf{min-height:42px;padding:0 18px;font-size:15px}

/* Hell */
html.ps-hell .s2-vorschau{background:#1c1c28}
html.ps-hell .s2-konto{background:var(--bg2)}
@media (hover:hover){
  .s2-karte:hover{border-color:var(--marke-rand)}
  .s2-kauf:not(.zu-teuer):hover{filter:brightness(1.08)}
  .s2-leiste button:hover{border-color:var(--marke-rand)}
}

/* ---------- Farbwelt-Tönung für selbst malende Spiele (core/shops.js) ----------
   Liegt über der Bühne, fängt keine Klicks ab. "color" färbt um, ohne
   Helligkeit zu ändern - Formen und Schrift bleiben lesbar. */
.ps-toenung{position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;mix-blend-mode:color;
  /* 2026-10-17: Rand in Prozent statt fester 90 px - am großen PC-Bildschirm lag er sonst weit weg vom Spiel */
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,color-mix(in srgb,var(--t1) 55%,transparent) 100%),
    linear-gradient(165deg,color-mix(in srgb,var(--t1) 22%,transparent),color-mix(in srgb,var(--t2) 16%,transparent))}
/* Regenbogen-Artikel: Farbe wechselt wirklich (2026-10-17, core/shop_figuren.js) */
@keyframes pv-regen{to{filter:hue-rotate(360deg)}}
.pv-regenbogen{animation:pv-regen 3.5s linear infinite}
@media (prefers-reduced-motion: reduce){ .pv-regenbogen{animation:none} }