/**
 * Der Laden auf /shop/.
 *
 * DIESE DATEI LAEDT NACH app.css und darf deshalb keinen Namen aus dem
 * Kopfbaukasten treffen: .pc-page-title, .pc-description, .pc-eyebrow und
 * .pc-title-rule. Genau daran ist die Stats-Seite mit 6.60.2 gescheitert
 * und die 404-Seite bis 6.65.0 auseinandergelaufen.
 *
 * Die Bausteine sind bewusst dieselben wie anderswo:
 *   .pc-detail-back   der Zurueck-Knopf von Turnier- und Team-Details
 *   .pc-switch        der Regler aus site.css
 *   .pc-ptag          das Kuerzel aus base.css
 *   .pc-av-box        das Abzeichen aus base.css
 *   .pc-level-card    die Levelkarte aus site.css
 *
 * Teil des Plugins PRIMECUP Core.
 */

/* ---------------------------------------------------------------
 * Die Breite
 *
 * DIE VIER !important MUESSEN SEIN: Das Theme setzt Breite, Raender und
 * einen Grund an jedem Block, und ohne sie gewinnt es trotz geringerer
 * Genauigkeit. Genau die Lektion "!important schlaegt Genauigkeit".
 *
 * Bis 6.87.3 stand .pc-shop-head in derselben Regel, und das musste so:
 * Ein Kopf ohne eigene Breitenregel bekommt die des Themes, und bei 1430
 * Pixeln gemessen waren das 645 statt 931 - der Titel begann 143 Pixel
 * weiter innen als die Karten darunter. Genau das hat Robert mit 6.84.0
 * gemeldet. Mit 6.88.0 hat die Seite ihren Kopf verloren, die Frage
 * stellt sich nicht mehr, und uebrig ist die Regel fuer den Inhalt.
 *
 * Die Rundung liegt als Variable an einer Stelle statt als fuenf Werte -
 * dieselbe Loesung wie --pc-ro-radius im Roulette seit 6.69.0. Sie steht am
 * Container, nicht an :root: Sie geht nur diese Seite etwas an.
 * ------------------------------------------------------------- */

.pc-shop-container {
  width: var(--pc-width);
  max-width: var(--pc-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;

  --pc-shop-radius: 16px;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------
 * Der Spielerkopf
 *
 * Derselbe Aufbau wie auf /arcade/: links wer da ist, rechts was er hat.
 * ------------------------------------------------------------- */

/* DERSELBE GRUND WIE .pc-ah-kopf AUF /arcade/, und das ist der Punkt:
   rgba(255, 255, 255, 0.025) laesst den Seitengrund durchscheinen,
   var(--pc-surface) ist deckendes #252629. Nebeneinander gehalten war der
   Shop-Block spuerbar heller und schwerer als der auf der Arcade.

   Gemessen: Arcade rgba(255, 255, 255, 0.024) - das ist die gerundete
   Darstellung von 0.025 -, Shop rgb(37, 38, 41).

   Auch der Abstand geht auf 28, wie dort. Zwei Koepfe, die fast gleich
   aussehen, sind schlechter als zwei, die gleich aussehen. */
.pc-shop-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin: 0 0 26px 0;
  border-radius: var(--pc-shop-radius);
  background: rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * DER SPIELERKOPF IST AUSGEBLENDET, AUF JEDER BREITE
 *
 * Roberts Vorgabe vom 17.08.2026, in zwei Schritten: erst am Telefon
 * ("Da sollen NUR die Buttons zu sehen sein", 6.88.1), dann auch am
 * Rechner ("in der Desktop Version bitte auch die 2 Bloecke").
 *
 * ES TRIFFT ALLE FUENF ADRESSEN des Ladens, die Uebersicht und die vier
 * Bereichsseiten: Der Kopf ist EIN Baustein, und
 * pc_shopseite_shortcode() setzt ihn ueberall.
 *
 * EIGENE REGEL DIREKT HINTER DER GRUNDREGEL. Die Grundregel darueber
 * beschreibt, WIE der Kasten aussieht, wenn er dasteht; sie bleibt
 * unangetastet und ist die Vorlage fuer ein Zurueckdrehen. Die Zeile in
 * der 768er Medienabfrage aus 6.88.1 ist dafuer wieder entfallen: zwei
 * Stellen fuer dieselbe Frage laufen erfahrungsgemaess auseinander.
 *
 * Kein !important noetig: gleiche Klasse, gleiche Genauigkeit, spaetere
 * Stellung.
 *
 * Das Guthaben geht dabei NICHT verloren: Es steht seit 6.87.3 in der
 * Kopfleiste, und die traegt es auf jeder Breite. Der Verweis "Punkte
 * verdienen" faellt weg, die Arcade steht aber im Menue.
 *
 * BEWUSST NUR AUSGEBLENDET, nicht herausgeschnitten. kopfBauen() in
 * shop.js fuellt die Huelle weiter; die Funktion ist damit unerreichbar,
 * aber ein Zurueckdrehen ist eine Zeile. Der Rest von shop.js ist davon
 * unberuehrt, er traegt Karten, Bereiche und den Kauf.
 * ------------------------------------------------------------- */
.pc-shop-kopf {
  display: none;
}

.pc-shop-person {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 320px;
  min-width: 0;
}

.pc-shop-name {
  display: flex;
  align-items: center;
  font-family: var(--pc-font-page);
  font-size: 19px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
}

.pc-shop-level { max-width: 460px; }

.pc-shop-primy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  text-align: right;
}

.pc-shop-primy-label {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

/* Dieselbe Schrift und Farbe wie das Guthaben auf /arcade/ und in der
   Setzleiste des Roulettes. Es ist derselbe Zaehler. */
.pc-shop-primy-zahl {
  font-family: "droid-sans-mono", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--pc-gold);
  font-variant-numeric: tabular-nums;
}

.pc-shop-primy-fuss {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  color: var(--pc-muted);
}

/* Der Weg zu neuen Punkten. Ohne ihn stuende der Spieler mit zu wenig
   Guthaben vor einer Zahl und wuesste nicht, wo er sie herbekommt. */
.pc-shop-primy-weg,
.pc-shop-primy-weg:hover,
.pc-shop-primy-weg:focus,
.pc-shop-primy-weg:active {
  margin-top: 6px;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pc-gold);
  text-decoration: none;
}

.pc-shop-primy-weg:hover { text-decoration: underline; }

/* ---- Der Gast ---- */

.pc-shop-gast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.pc-shop-gast-text {
  margin: 0 !important;
  flex: 1 1 280px;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
}

/* ---------------------------------------------------------------
 * Die vier Karten der Uebersicht
 *
 * Zwei Spalten am Rechner, eine am Telefon - dieselbe Aufteilung wie die
 * beiden Spielkarten auf /arcade/. Die ganze Karte ist der Verweis, kein
 * Knopf darin: Ein Klickziel im Klickziel ist weder gueltiges HTML noch
 * vorhersehbar zu bedienen, und genau daran haengt seit 6.55.0 die
 * Entscheidung, dem Kapitaen in der Teamliste keine Spielerkarte zu geben.
 * ------------------------------------------------------------- */

.pc-shop-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* WIE DIE BEIDEN SPIELKARTEN AUF /arcade/, Zeichen fuer Zeichen.
 *
 * KEIN ANHEBEN BEIM UEBERFAHREN. Bis 6.83.0 stand hier
 * `transform: translateY(-2px)`, und die Karte sprang unter dem Zeiger
 * hoch. Der Kommentar an .pc-ah-karte sagt seit 6.77.0, warum das dort
 * nicht so ist: "Ein Anheben oder ein Schatten liesse die Karte springen,
 * und daneben stuende die zweite still." Genau davor war gewarnt, und
 * genau das war hier gebaut; Robert hat es sofort gesehen.
 *
 * Was beim Ueberfahren passiert, ist damit dasselbe wie dort: Der Grund
 * wird eine Spur heller, der Rand golden, und der Titel wechselt die Farbe.
 * Drei Antworten auf den Zeiger, und keine bewegt die Karte.
 *
 * Auch Grund und Rand sind angeglichen: rgba(255, 255, 255, 0.025) statt
 * var(--pc-surface), und 0.16 statt var(--pc-line) - gemessen trug die
 * Arcade-Karte 0.16, die Shop-Karte 0.11.
 *
 * Die Zustandsliste wehrt die Vorgaben des Themes ab, das jedem <a> eine
 * Farbe und eine Unterstreichung gibt. Was spaeter je nach Zustand neu
 * gesetzt wird, steht in einer eigenen schlichten Regel darunter - sonst
 * verloere es in dem Augenblick, in dem der Finger die Karte beruehrt. */
.pc-shop-karte,
.pc-shop-karte:hover,
.pc-shop-karte:focus,
.pc-shop-karte:active {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--pc-shop-radius);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transform: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pc-shop-karte:hover,
.pc-shop-karte:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 213, 110, 0.45);
}

/* Der Fokusrahmen fuer die Tastatur, in Gold wie auf /arcade/. Ohne ihn
   waere die Karte mit dem Tabulator nicht zu finden. */
.pc-shop-karte:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 3px;
}

.pc-shop-karte-bild {
  display: block;
  width: 100%;
  height: 132px;
  overflow: hidden;
}

.pc-shop-bild {
  display: block;
  width: 100%;
  height: 100%;
}

.pc-shop-karte-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px 20px;
  width: 100%;
  box-sizing: border-box;
}

.pc-shop-karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.pc-shop-karte-titel {
  font-family: var(--pc-font-page);
  font-size: 17px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
}

.pc-shop-karte:hover .pc-shop-karte-titel { color: var(--pc-gold); }

.pc-shop-karte-stand {
  flex-shrink: 0;
  font-family: "droid-sans-mono", monospace;
  font-size: 12.5px;
  color: var(--pc-muted);
}

.pc-shop-karte-stand strong { color: var(--pc-live); }
.pc-shop-karte-von { margin-left: 2px; }

.pc-shop-karte-info {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted);
}

.pc-shop-karte-hinweis {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pc-info);
}

/* ---------------------------------------------------------------
 * Ein Bereich
 * ------------------------------------------------------------- */

.pc-shop-detailkopf {
  margin: 18px 0 22px 0;
}

/* h2 statt der Kopfbaukasten-Klassen: base.css setzt h1 bis h6 auf Weiss
   mit !important und laedt immer zuerst, deshalb hier ebenfalls
   !important - dieselbe Lage wie bei .pc-game-title in games.css. */
.pc-shop-detailtitel {
  margin: 0 0 8px 0 !important;
  font-family: "droid-sans-mono", monospace;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--pc-gold) !important;
}

.pc-shop-detailtext {
  margin: 0 !important;
  max-width: 680px;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.65;
  color: var(--pc-muted) !important;
}

.pc-shop-gruppe {
  margin: 26px 0 8px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted) !important;
}

.pc-shop-leer,
.pc-shop-fuss {
  margin: 18px 0 0 0 !important;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
}

/* ---- Die Zeilen ----
 *
 * ALLES OFFEN, kein Aufklapper. Robert hat das ausdruecklich so gewollt:
 * Wer in einen Bereich geht, will sehen, was es dort gibt, und nicht erst
 * klicken.
 *
 * DREI SPALTEN, und die mittlere hat eine FESTE Breite. Mit `auto`
 * richtete sie sich nach ihrem eigenen Inhalt, und "Gekauft" ist breiter
 * als ein Kaufknopf - die Regler stuenden dann von Zeile zu Zeile an einer
 * anderen Stelle. Genau daran ist die Teamliste des Leaderboards in 6.66.0
 * haengengeblieben. */

.pc-shop-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pc-shop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  color: var(--pc-muted);
  border-radius: 6px;
}

/* Ein feiner Wechsel je Zeile. Ohne ihn liest sich eine Liste mit zwanzig
   Abzeichen als Wand; mit ihm findet das Auge seine Zeile wieder. */
.pc-shop-item:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }

.pc-shop-item.is-hat { color: var(--pc-text); }

/* Was gerade getragen wird, bekommt eine Kante. Sie sitzt INNEN als
   Schatten und nicht als Rahmen: Ein Rahmen aenderte die Hoehe der Zeile,
   und dann sprangen beim Umschalten alle darunter. */
.pc-shop-item.is-an {
  background: rgba(69, 217, 163, 0.07);
  box-shadow: inset 3px 0 0 0 var(--pc-live);
}

.pc-shop-item-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pc-shop-item-name strong { color: var(--pc-text); }

.pc-shop-item-mitte {
  flex: 0 0 150px;
  display: flex;
  justify-content: flex-end;
}

.pc-shop-item-schalter {
  flex: 0 0 44px;
  display: flex;
  justify-content: flex-end;
}

/* Das Abzeichen in der Liste. Ohne Kreis und ohne Grund: Hier steht kein
   Name daneben, sondern eine Bezeichnung, und zwanzig Kreise untereinander
   waeren eine zweite Spalte. */
.pc-shop-av.pc-av-box {
  width: 1.7em;
  height: 1.7em;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-right: 10px;
}

/* ---- Die mittlere Spalte ---- */

.pc-shop-hat,
.pc-shop-lvl {
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pc-shop-hat { color: var(--pc-live); }
.pc-shop-lvl { color: var(--pc-muted); }

/* Der Kaufknopf.
   Alle Eigenschaften mit !important, und das ist keine Vorsicht: base.css
   setzt `button { padding: 10px 20px !important }` und faerbt jeden Knopf.
   Ohne das gewaenne die Grundregel trotz geringerer Genauigkeit - genau die
   Lektion "!important schlaegt Genauigkeit".

   Im Knopf steht nur der Preis, in der Groesse von "Gekauft" daneben. */
.pc-shop-buy {
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 13px !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(245, 213, 110, 0.09) !important;
  box-shadow: none !important;
  color: var(--pc-gold) !important;
  font-family: "droid-sans-mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.2s ease !important;
}

.pc-shop-buy:hover {
  background: rgba(245, 213, 110, 0.2) !important;
}

/* Zu teuer: grau und ohne Zeigefinger. Der Knopf bleibt STEHEN und
   verschwindet nicht - sonst wuesste niemand, was das Item kostet und
   worauf er sparen soll. */
.pc-shop-buy.is-teuer {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--pc-muted) !important;
  cursor: default !important;
}

.pc-shop-buy.is-teuer:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---- Der Sperrhinweis ---- */

.pc-shop-lock {
  margin: 18px 0 0 0 !important;
  font-family: var(--pc-font-page);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pc-warn) !important;
}

.pc-shop-lock strong { color: var(--pc-warn); }

/* ---------------------------------------------------------------
 * Am Telefon
 * ------------------------------------------------------------- */

/* Dieselben drei Stufen wie auf /arcade/. Bis 6.87.3 stand .pc-shop-head
   in denselben Regeln, damit Titel und Karten fluchten; der Kopf ist mit
   6.88.0 weggefallen. */
@media (max-width: 1100px) {
  .pc-shop-container { width: 88%; }
}

@media (max-width: 900px) {
  /* Unter 900 Pixeln stehen zwei Karten nebeneinander so eng, dass der
     Titel neben dem Stand umbricht. Ab hier untereinander, so wie die
     Spielkarten auf /arcade/. */
  .pc-shop-karten { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* !important, weil die Grundregel oben es ebenfalls traegt. Ohne das
     gewaenne sie trotz frueherer Stellung, und am Telefon bliebe der
     Seitenrand weg. */
  .pc-shop-container {
    width: 100%;
    padding: 0 var(--pc-edge) !important;
  }

  /* DIE HIDE-REGEL STAND MIT 6.88.1 HIER und ist mit 6.88.2 nach oben
     gewandert, an die Grundregel: Seither ist der Kopf auf JEDER Breite
     aus, und die Sichtbarkeit gehoert damit an eine Stelle.

     ALLE REGELN DARUNTER, die den Kopf betreffen, greifen seither NICHT
     MEHR - sie stehen bewusst noch da. Sie sind mit 6.85.0 Baustein fuer
     Baustein gegen den Arcade-Kopf ausgemessen worden, und ein
     Zurueckdrehen ist damit eine Zeile statt einer neuen Messreihe. */

  /* ---------------------------------------------------------------
   * DER KOPF IST AM TELEFON DERSELBE WIE AUF /arcade/
   *
   * Roberts Vorgabe vom 16.08.2026: "Baue ihn genauso nach, nur dass der
   * Unterschied ist, dass bei Arcade der Claim Button da ist und bei Shop
   * der Button fuer Coins verdienen, und dass bei Arcade noch die 2 extra
   * Rekorde da sind."
   *
   * Beide Koepfe nebeneinander bei 375 Pixeln gemessen, Baustein fuer
   * Baustein. Sechs Abweichungen kamen heraus, und alle sechs stehen
   * unten:
   *
   *   Baustein            Arcade   Shop bis 6.84.0
   *   Abstand der Bloecke   30 px   26 px
   *   Name                  20 px   19 px
   *   Levelkarte gesamt     77 px   88 px
   *   Level-Zahl            20 px   34 px  (Vorgabe aus site.css)
   *   Level-Kopf unten      12 px   16 px
   *   Knopf darunter       Knopf    Textverweis
   *
   * Die Levelkarte war damit elf Pixel hoeher als drueben, und die Zahl
   * erschlug den Rest des Kastens - genau das, was 6.78.0 fuer /arcade/
   * schon einmal behoben hat. Die Regeln dort sind wortgleich uebernommen.
   *
   * NUR HIER, nicht in der Grundregel: Robert hat ausdruecklich "NUR auf
   * der Mobilen Version" gesagt. Am Rechner bleibt der Shop-Kopf, wie er
   * ist - dort sind die Bloecke ohnehin nebeneinander statt untereinander,
   * und die Levelkarte hat neben dem Guthaben nur die halbe Breite.
   * ------------------------------------------------------------- */

  .pc-shop-kopf {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 18px 16px;
  }

  /* flex: 0 0 auto ist derselbe Befund wie bei .pc-ah-person in 6.76.0:
     `flex: 1 1 320px` aus der Grundregel meint in der ZEILE die Breite, in
     der SPALTE aber die Hoehe, und der Rest waere Leerraum.

     10 Pixel zwischen Name und Levelkarte, gemessen genau die 10, die
     drueben als margin-bottom am Namen stehen. Hier ist es ein gap, weil
     .pc-shop-person ein Flex-Behaelter ist und .pc-ah-person nicht; die
     ZAHL ist dieselbe, und darauf kommt es an. */
  .pc-shop-person {
    flex: 0 0 auto;
    text-align: left;
    gap: 10px;
  }

  /* Die Levelkarte ueber die volle Breite. Die 460 Pixel der Grundregel
     sind fuer die Zeile am Rechner gedacht, wo rechts das Guthaben steht. */
  .pc-shop-level { max-width: none; }

  /* Groesse, Zeilenhoehe UND display wie .pc-ah-name.
     Das display ist der eigentliche Punkt: Als Flex-Behaelter mit
     align-items: center ist die Zeile so hoch wie ihr hoechstes Kind, und
     das ist das Abzeichen mit 27 Pixeln. Als Block bestimmt die
     Zeilenhoehe, und die ist 20 mal 1,3 plus den Ueberstand des
     Abzeichens - gemessen 30, genau wie drueben. Das Abzeichen richtet
     sich dann ueber das vertical-align aus base.css aus, so wie an jeder
     anderen Namensstelle im Projekt auch. */
  .pc-shop-name {
    display: block;
    font-size: 20px;
    line-height: 1.3;
  }

  /* Level links, Punkte rechts - wortgleich mit /arcade/. */
  .pc-shop-level .pc-level-head {
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 12px;
  }

  .pc-shop-level .pc-level-points { text-align: right; }

  /* Das Level in der Groesse der Punkte daneben. Die Vorgabe aus site.css
     setzt die Zahl auf 34 Pixel und die der Punkte auf 20; das Level
     erschlaegt damit alles andere im Kasten, obwohl es die kleinere
     Aussage ist. Dieselbe Ruecknahme wie auf /arcade/ seit 6.78.0. */
  .pc-shop-level .pc-level-badge strong { font-size: 20px; }

  .pc-shop-level .pc-level-word {
    font-size: 12.5px;
    letter-spacing: 1.2px;
  }

  .pc-shop-primy {
    align-items: flex-start;
    text-align: left;
  }

  /* DER WEG ZU NEUEN PUNKTEN ALS KNOPF, an derselben Stelle und in
     derselben Form wie der Claim-Knopf auf /arcade/. Robert nennt ihn
     selbst "den Button fuer Coins verdienen"; ein Textverweis daneben
     saehe an dieser Stelle aus wie eine Fussnote.

     Alle Eigenschaften mit !important, und das ist keine Vorsicht:
     base.css faerbt jeden Verweis und setzt ihm eine Unterstreichung.
     NICHT in einer Zustandsliste mit :hover - was spaeter je nach Zustand
     neu gesetzt wird, verloere dort in dem Augenblick, in dem der Finger
     den Knopf beruehrt.

     22 Pixel Abstand wie beim Claim-Knopf; die 32 aus dessen
     Rechner-Regel gelten hier nicht, denn die gleichen dort eine
     Zentrierung aus, die es in der Spalte nicht gibt. */
  .pc-shop-primy-weg,
  .pc-shop-primy-weg:hover,
  .pc-shop-primy-weg:focus,
  .pc-shop-primy-weg:active {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 22px !important;
    padding: 7px 14px !important;
    border: 1px solid var(--pc-gold) !important;
    border-radius: 999px !important;
    background: rgba(245, 213, 110, 0.10) !important;
    box-shadow: none !important;
    color: var(--pc-gold) !important;
    font-family: var(--pc-font-page) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transform: none !important;
    transition: background 0.2s ease !important;

    /* 20 Pixel Zeilenhoehe. Der Claim-Knopf drueben misst 36, und die
       setzen sich zusammen aus 7 plus 7 Polster, 1 plus 1 Rahmen und 20
       Inhalt - seine 15 Pixel grosse Monospace-Zahl traegt genau diese
       Zeilenhoehe. Hier steht nur Text mit 11 Pixeln; ohne die Angabe
       blieb der Knopf 30 hoch, mit 22 wurde er 38. Die Zeilenhoehe statt
       mehr Polster, damit das Polster bei beiden Knoepfen dasselbe
       bleibt. */
    line-height: 20px !important;
  }

  .pc-shop-primy-weg:hover {
    background: rgba(245, 213, 110, 0.18) !important;
    text-decoration: none !important;
  }

  .pc-shop-detailtitel { font-size: 22px; }

  /* Umbruch statt Ueberlauf: Name, Preis und Regler brauchen bei 375
     Pixeln zusammen mehr Platz als da ist. Der Name nimmt dann die volle
     Breite, Preis und Regler stehen darunter nebeneinander. */
  .pc-shop-item {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 12px;
  }

  .pc-shop-item-name { flex: 1 1 100%; }

  .pc-shop-item-mitte {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}