/* shop.css - das Aussehen des Shops.
   Entstanden aus entwurf-shop.css, freigegeben von Marco am 16.09.2026.
   Bildpfade zeigen mit ../../ nach appilder - dieses Stylesheet liegt
   zwei Ebenen tiefer als die Bilder. */

/* Diese Datei laeuft auch allein, ohne base.css - deshalb steht das hier.
   Ohne box-sizing kommt bei 768 Punkten das Innenmass oben drauf, und die
   Seite scrollt waagerecht. Genau das ist beim Nachmessen passiert. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --holz-rand:    #a9714b;
  --holz-dunkel:  #78482a;
  --schrift:      #5b3a1e;
  --schrift-matt: #8a705a;
  --pergament:    rgba(255, 252, 240, .96);
  --fokus:        #ffd54a;
  --gruen:        #4a9b3c;
  --gruen-tief:   #35722a;
}

.shop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1b3b5a url('../../bilder/map-background.jpg') center/cover;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Ein ruhiger Schleier, damit die Ware lesbar bleibt.
   Die Insel soll durchscheinen - man ist ja in Pumos Welt -, aber sie
   darf nicht mitreden. Unten etwas dichter, damit der gruene Hauptknopf
   nicht gegen Wasserfall und Pilze antreten muss. */
.shop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 40, 62, .74) 0%,
                              rgba(18, 40, 62, .74) 55%,
                              rgba(14, 32, 50, .86) 100%);
}

.shop > * { position: relative; }

/* ------------------------------------------------------------- Kopfzeile */

.shop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  flex: none;
}

/* Ohne Titel schiebt das den Pudding-Stand nach rechts - genauso wie
   auf der Karte. */
.shop-head .balance { margin-left: auto; }

.balance {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 16px 4px 6px;
  border-radius: 999px;
  background: var(--pergament);
  border: 3px solid var(--holz-rand);
  box-shadow: 0 3px 0 rgba(120, 72, 40, .45), 0 6px 14px rgba(0, 0, 0, .28);
  flex: none;
}

.balance-image { height: 34px; width: auto; display: block; }

.balance-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;   /* die Zahl huepft beim Zaehlen nicht */
}

.round-button {
  width: 52px; height: 52px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  flex: none;
  transition: transform 160ms ease-out;
}

.round-button img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------- Kategorien und Regal */

.shop-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px 10px;
}

/* Die Kategorien sitzen als Reiter OBEN auf dem Regal, wie die Reiter
   eines Karteikastens. Dadurch bekommt das Regal die ganze Breite und
   die Outfits werden deutlich groesser - auf einem Handy der Unterschied
   zwischen "Briefmarken" und "Ware". */
.shop-tabs {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 0 6px;
  margin-bottom: -3px;            /* der Reiter setzt auf dem Regalrand auf */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 46px;
  padding: 8px 14px;
  border: 3px solid var(--holz-rand);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: #e8d5b8;
  color: var(--schrift-matt);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

.tab svg { width: 19px; height: 19px; flex: none; }

/* Der gewaehlte Reiter gehoert zum Regal: gleiche Farbe, kein Strich
   dazwischen, und er steht ein Stueck hoeher. Das liest sich auch ohne
   Farbe - ueber Form und Lage, nicht nur ueber den Ton. */
.tab[aria-pressed="true"] {
  background: var(--pergament);
  border-color: var(--holz-rand);
  color: var(--schrift);
  padding-top: 11px;
  margin-top: -3px;
  position: relative;
  z-index: 2;
}

/* Rechts das Regal.
   ⚠️ Es waechst mit dem Inhalt, statt immer die ganze Hoehe zu fuellen.
   Mit erst zwei Outfits sah ein bildschirmhohes, leeres Pergament aus,
   als sei etwas kaputt - dabei ist der Laden nur noch jung. */
.shop-shelf {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border-radius: 16px;
  border: 3px solid var(--holz-rand);
  background: var(--pergament);
  box-shadow: inset 0 2px 10px rgba(120, 72, 40, .18);
}

/* Zwei Outfits nebeneinander auf dem Handy, mehr auf breiteren Geraeten.
   Mit den Reitern oben steht die ganze Breite zur Verfuegung - eine Kachel
   ist dadurch rund 150 statt 109 Punkte breit. */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

/* --------------------------------------------------------- Ein Outfit */

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 6px;
  min-height: 44px;
  border: 3px solid #d8b892;
  border-radius: 14px;
  background: #fffdf6;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(120, 72, 40, .22);
  transition: transform 150ms ease-out, border-color 150ms ease-out;
}

.item-image {
  width: 100%;
  height: 112px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22));
}

.item-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--schrift);
  text-align: center;
  line-height: 1.15;
}

/* Die Preiszeile. Tabellenziffern, damit die Zahlen im Raster
   untereinander stehen und nicht tanzen. */
.item-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
}

.item-price img { height: 18px; width: auto; display: block; }

/* Ausgewaehlt - der Rahmen, nicht die Ware selbst */
.item[aria-pressed="true"] {
  border-color: var(--holz-dunkel);
  box-shadow: 0 0 0 3px var(--fokus), 0 2px 0 rgba(120, 72, 40, .22);
}

/* Getragen: ein Haken oben rechts. Ein Icon, kein Farbcode -
   wer Farben schlecht unterscheidet, sieht den Haken trotzdem. */
.item-check {
  position: absolute;
  top: -8px; right: -8px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gruen);
  border: 3px solid #fffdf6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.item-check svg { width: 16px; height: 16px; stroke: #fff; }

/* Besitzt man es schon, steht das da - statt eines Preises */
.item-owned {
  font-size: 13px;
  font-weight: 800;
  color: var(--gruen-tief);
}

/* Zu teuer: gedaempft UND mit Text. Nicht kaputt aussehen lassen,
   sondern erreichbar - es ist ja nur eine Frage der Zeit. */
.item.too-dear .item-image { filter: grayscale(.55) brightness(.95); }
.item.too-dear .item-price { color: var(--schrift-matt); }

/* Noch nicht da */
.item.soon {
  border-style: dashed;
  background: #f6efe2;
  cursor: default;
}

.item.soon .item-image {
  filter: grayscale(1) brightness(.35) opacity(.5);
}

.item.soon .item-name { color: var(--schrift-matt); }

.item-question {
  font-size: 15px;
  font-weight: 900;
  color: var(--schrift-matt);
}

/* ------------------------------------------------------- Die Aktionsleiste

   Genau EIN Hauptknopf je Bildschirm. Was er tut, haengt davon ab, was
   gerade gewaehlt ist - kaufen, anziehen, oder gar nichts. */

.shop-foot {
  flex: none;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
}

/* Der Hinweis auf die Eltern, wenn der Pudding nicht reicht.
   ⚠️ Er sieht mit Absicht NICHT nach Knopf aus — er ist keiner
   (shop-eltern-nur-hinweis). Ruhig, klein, ohne Rahmen. */
.shop-parents {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 244, 222, .82);
}

.main-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 10px 18px;
  border: 3px solid var(--gruen-tief);
  border-radius: 16px;
  background: var(--gruen);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
  box-shadow: 0 4px 0 var(--gruen-tief), 0 6px 14px rgba(0, 0, 0, .3);
  transition: transform 150ms ease-out;
}

.main-button img { height: 24px; width: auto; }

.main-button:disabled {
  background: #b9ab96;
  border-color: #948570;
  box-shadow: 0 4px 0 #948570;
  color: #fdf8ee;
  cursor: default;
  opacity: .92;
}

/* --------------------------------------------------------- Rueckmeldung */

.tab:active, .item:active:not(.soon) { transform: scale(.96); }
.main-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--gruen-tief), 0 3px 8px rgba(0, 0, 0, .3);
}
.round-button:active { transform: scale(.92); }

.tab:focus-visible, .item:focus-visible,
.main-button:focus-visible, .round-button:focus-visible {
  outline: 4px solid var(--fokus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tab, .item, .main-button, .round-button { transition: none; }
}

/* ⚠️ Auf dem schmalsten Handy (360 Punkte) passten die drei Reiter zuerst
   NICHT nebeneinander - "Bald" haette man nur durch Wischen gefunden, und
   was man nicht sieht, benutzt man nicht. Deshalb hier enger gesetzt.
   Die Reiter bleiben trotzdem ueber 44 Punkte hoch. */
@media (max-width: 409px) {
  .tab { padding: 8px 9px; font-size: 14px; gap: 5px; }
  .tab[aria-pressed="true"] { padding-top: 11px; }
  .tab svg { width: 17px; height: 17px; }
  .shop-tabs { gap: 4px; padding: 0 4px; }
}

/* Auf einem breiten Geraet darf das Regal nicht ins Endlose laufen */
@media (min-width: 620px) {
  .shop-body, .shop-head, .shop-foot { max-width: 760px; width: 100%; margin: 0 auto; }
}