/* =====================================================
   FIREHELMET - STYLE 5/8: SHOP
   ---------------------------------------------------
   Shop, Avatar- und Zeilenrahmen, Dublonen-Toast, Bewertung.

   ACHTUNG REIHENFOLGE: diese Dateien waren bis zum Aufteilen
   EINE Datei mit 13.539 Zeilen. An mehreren Stellen entscheidet
   allein die Reihenfolge, welche Regel gewinnt (gleich starke
   Selektoren, spaeter schlaegt frueher). Die Einbindung in
   index.html muss daher genau in dieser Nummerierung bleiben -
   eine umgestellte oder vergessene Datei aendert das Aussehen.
===================================================== */

/* =====================================================
   SHOP
===================================================== */

/* Intro-Effekte und große Karten-Glows dürfen die Seite nicht horizontal verschieben. */
#shop { overflow-x: clip; }
.shop-content {
  position: relative;
  max-width: 940px;
  margin: auto;
}

/* Treibende Schatz-Symbole im Hintergrund der ganzen Seite */
.shop-content::before {
  content: "💰 🏆 💎 ⚓ 💰 🗺️ 💎 🏆";
  position: absolute;
  inset: -40px;
  z-index: -1;
  font-size: 24px;
  line-height: 90px;
  letter-spacing: 90px;
  opacity: .07;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  animation: leaderboardBgDrift 45s linear infinite;
}

.shop-content h1 {
  position: relative;
  animation: shopTitleGlow 3s ease-in-out infinite;
}

@keyframes shopTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(214,168,79,.3)); }
  50%      { filter: drop-shadow(0 0 40px rgba(214,168,79,.6)); }
}

.shop-currency-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(214,168,79,.28), rgba(214,168,79,.08));
  border: 1px solid rgba(214,168,79,.55);
  font-family: var(--fh-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--fh-gold-bright);
  box-shadow: 0 0 25px rgba(214,168,79,.3);
  overflow: hidden;
  animation: shopCurrencyBarPulse 2.6s ease-in-out infinite;
}

@keyframes shopCurrencyBarPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(214,168,79,.25); }
  50%      { box-shadow: 0 0 36px rgba(214,168,79,.5); }
}

/* Glanzstreifen, läuft periodisch über die Dublonen-Anzeige */
.shop-currency-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 62%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: shopCurrencySweep 3.5s ease-in-out infinite;
}

@keyframes shopCurrencySweep {
  0%   { background-position: 200% 0; }
  45%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

.shop-currency-icon {
  font-size: 22px;
  animation: shopCoinSpin 2.2s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(255,215,107,.7));
}

@keyframes shopCoinSpin {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}

.shop-earn-hint {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--fh-muted-fg, #999);
  line-height: 1.6;
}

/* Das Schaufenster ist jetzt NACH ART gruppiert statt hinter zwei
   Reitern versteckt - #shop-grid traegt daher nur noch die
   Gruppen, das eigentliche Raster liegt eine Ebene tiefer. */
.shop-grid {
  margin-top: 34px;
}

.shop-gruppe + .shop-gruppe { margin-top: 34px; }

/* Holz und Messing wie in der Spielothek. */
.shop-gruppe-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px solid rgba(217, 164, 65, .28);
  border-left: 4px solid var(--fh-gold, #d6a84f);
  border-radius: var(--fh-radius, 12px);
  background: linear-gradient(180deg, rgba(74, 48, 24, .5), rgba(28, 20, 12, .5));
  font-family: var(--fh-font-display, 'Oswald'), 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shop-gruppe-zahl {
  margin-left: auto;
  color: var(--fh-muted-fg, #8296ad);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}

.shop-gruppe-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
}

/* Die Vorschau zeigt das EIGENE Bild im Rahmen (siehe
   shopVorschauAvatar() in scripts/shop/shop.js). */
.shop-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  font-size: 34px;
  line-height: 1;
}

.shop-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.shop-item-familie {
  margin-left: 8px;
  opacity: .7;
  font-weight: 400;
}


.shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 18px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.22, 0.9, 0.32, 1.2), border-color .25s, box-shadow .3s;
  animation: leaderboardRowIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

.shop-item:nth-child(1) { animation-delay: .02s; }
.shop-item:nth-child(2) { animation-delay: .07s; }
.shop-item:nth-child(3) { animation-delay: .12s; }
.shop-item:nth-child(4) { animation-delay: .17s; }
.shop-item:nth-child(5) { animation-delay: .22s; }
.shop-item:nth-child(6) { animation-delay: .27s; }

/* Rotierender Farbverlauf-Rand ums ganze Item, taucht beim Hover auf */
.shop-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--menu-hex3), var(--menu-hex2), #9146ff, #4da3ff, var(--menu-hex3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  animation: avatarFrameSpin 4s linear infinite;
  pointer-events: none;
}

.shop-item:hover {
  transform: translateY(-8px) scale(1.03) rotateX(4deg);
  box-shadow: 0 20px 45px rgba(0,0,0,.45);
}

.shop-item:hover::before {
  opacity: 1;
}

.shop-item-owned {
  border-color: rgba(80,255,140,.35);
}

.shop-item-owned::after {
  content: "✓ Besitzt";
  position: absolute;
  top: 14px;
  right: -30px;
  transform: rotate(35deg);
  width: 120px;
  text-align: center;
  padding: 3px 0;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .1em;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  color: #052a12;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  z-index: 2;
}

.shop-item-preview {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  background: radial-gradient(circle at 35% 30%, rgba(214,168,79,.18), rgba(255,255,255,.03));
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
  animation: shopPreviewFloat 3.4s ease-in-out infinite;
}

@keyframes shopPreviewFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.shop-item-avatar {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.shop-item-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-align: center;
  font-family: var(--fh-font-display);
  letter-spacing: .02em;
}

.shop-item-price {
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255,215,107,.55));
}

/* Alter Preis, wenn der Skill-Rabatt "Feilscher" greift. */
.shop-item-price-alt {
  margin-right: 2px;
  font-size: .85em;
  font-weight: 400;
  opacity: .6;
}

.shop-item-info-meta .shop-item-price {
  color: #ffe9b0;
  font-weight: 700;
}

.shop-item-btn {
  position: relative;
  width: 100%;
  padding: 12px;
  min-height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, rgba(214,168,79,.45), rgba(214,168,79,.22));
  color: #ffe9b0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, filter .2s;
}

.shop-item-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity .2s;
}

.shop-item-btn:hover {
  filter: brightness(1.25);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(214,168,79,.4);
}

.shop-item-btn:hover::after {
  opacity: 1;
  animation: fhNavSweep .7s ease forwards;
}

.shop-item-btn:active {
  transform: translateY(0) scale(.97);
}

.shop-item-equipped {
  background: linear-gradient(135deg, rgba(80,255,140,.4), rgba(80,255,140,.18));
  color: #baffce;
}

.shop-item-equip {
  background: linear-gradient(135deg, rgba(77,163,255,.4), rgba(77,163,255,.18));
  color: #cfe6ff;
}

@media (max-width: 600px) {
  .shop-item-preview {
    width: 74px;
    height: 74px;
    font-size: 30px;
  }
}


/* =====================================================
   AVATAR-RAHMEN
   Alle sechzehn sind Zeichnungen aus assets/rahmen/ - je
   höherwertiger der Rahmen, desto reicher die Zeichnung.
   Sichtbar in der Shop-Vorschau, in der Rangliste, auf dem Podest
   und in der Boss-Rangliste - überall über wrapAvatarWithFrame()
   in scripts/wheel/wheel.js. Der Zeilen-Glow .row-frame-* bleibt
   zusätzlich bestehen.
===================================================== */
.avatar-frame-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
}

/* Der Rahmen ragt über das Bild hinaus (inset: -13% weiter unten).
   In der Tabellenzeile stiesse er ohne diesen Rand links an die
   Platzziffer und rechts an den Namen. */
.leaderboard-name .avatar-frame-wrap,
.boss-leaderboard .avatar-frame-wrap {
  margin: 0 12px 0 5px;
  vertical-align: middle;
}

/* Innerhalb des Rahmens bringen Avatar und Podestbild ihren eigenen
   Abstand und Rand nicht mehr mit - beides macht jetzt der Rahmen.
   Der Podest-Avatar hat ausserdem overflow:hidden; deshalb sitzt der
   Rahmen um ihn herum und nicht auf ihm, sonst schnitte er sich
   selbst weg. */
.avatar-frame-wrap .leaderboard-avatar {
  margin-right: 0;
  border-color: transparent;
}

.avatar-frame-wrap .fh-podium-avatar {
  border-color: transparent;
}

.shop-item-preview,
.avatar-frame-wrap,
.fh-podium-avatar {
  position: relative;
}

@keyframes avatarFrameSpin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   GEZEICHNETE RAHMEN (assets/rahmen/*.svg)
   Alle sechzehn Rahmen stehen STILL. Vorher waren die sechs
   ältesten rotierende Farbverläufe, die je nach Stufe
   unterschiedlich schnell liefen - genau das war seinerzeit der
   Grund, den Ring aus der Rangliste zu werfen. Weil sie jetzt
   stillstehen, ist er dort wieder da. Wer im Shop steht, sieht die höheren
   Stufen trotzdem leuchten: dafür sorgt der Seltenheitspuls in
   css/50-redesign.css, nicht der Rahmen selbst.

   Sie brauchen keine Maske: die SVG bringt ihre Durchsichtigkeit
   selbst mit und darf deshalb über den Rand des Bildes
   hinausragen, was Speichen, Flammen und Tentakel überhaupt
   erst möglich macht.
===================================================== */
.avatar-frame-bronze::before,
.avatar-frame-silver::before,
.avatar-frame-gold::before,
.avatar-frame-fire::before,
.avatar-frame-kraken::before,
.avatar-frame-legend::before,
.avatar-frame-tau::before,
.avatar-frame-steuerrad::before,
.avatar-frame-kraken-arm::before,
.avatar-frame-messing::before,
.avatar-frame-welle::before,
.avatar-frame-sturm::before,
.avatar-frame-dublonen::before,
.avatar-frame-kompass::before,
.avatar-frame-fluch::before,
.avatar-frame-pergament::before {
  content: "";
  position: absolute;
  /* Nach aussen versetzt, damit Griffe, Arme und der gerissene
     Pergamentrand Platz haben - die Zeichnungen rechnen mit
     einem Bildkreis bis r=44 in einer 100er-Flaeche. */
  inset: -13%;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.avatar-frame-bronze::before { background-image: url("../assets/rahmen/bronze.svg"); }
.avatar-frame-silver::before { background-image: url("../assets/rahmen/silver.svg"); }
.avatar-frame-gold::before { background-image: url("../assets/rahmen/gold.svg"); }
.avatar-frame-fire::before { background-image: url("../assets/rahmen/fire.svg"); }
.avatar-frame-kraken::before { background-image: url("../assets/rahmen/kraken.svg"); }
.avatar-frame-legend::before { background-image: url("../assets/rahmen/legend.svg"); }
.avatar-frame-tau::before { background-image: url("../assets/rahmen/tau.svg"); }
.avatar-frame-steuerrad::before { background-image: url("../assets/rahmen/steuerrad.svg"); }
.avatar-frame-kraken-arm::before { background-image: url("../assets/rahmen/kraken-arm.svg"); }
.avatar-frame-messing::before { background-image: url("../assets/rahmen/messing.svg"); }
.avatar-frame-welle::before { background-image: url("../assets/rahmen/welle.svg"); }
.avatar-frame-sturm::before { background-image: url("../assets/rahmen/sturm.svg"); }
.avatar-frame-dublonen::before { background-image: url("../assets/rahmen/dublonen.svg"); }
.avatar-frame-kompass::before { background-image: url("../assets/rahmen/kompass.svg"); }
.avatar-frame-fluch::before { background-image: url("../assets/rahmen/fluch.svg"); }
.avatar-frame-pergament::before { background-image: url("../assets/rahmen/pergament.svg"); }

/* =====================================================
   ZEILEN-RAHMEN
   Der ausgerüstete Rahmen umfasst jetzt auch die GANZE Zeile
   in Rangliste, Wochenrennen- und Boss-Rangliste (nicht nur
   den Avatar) - farblich passend zum jeweiligen Rahmen-Stil.
===================================================== */
.row-frame {
  position: relative;
  z-index: 0;
}

tr.row-frame {
  box-shadow: inset 0 0 0 2px var(--row-frame-color, transparent);
}

.boss-leaderboard-row.row-frame,
.race-result-row.row-frame,
.fh-podium-col.row-frame {
  border: 2px solid var(--row-frame-color, transparent);
  box-shadow: 0 0 16px var(--row-frame-glow, transparent);
  border-radius: 14px;
}

.row-frame-bronze {
  --row-frame-color: #cd7f32;
  --row-frame-glow: rgba(205,127,50,.4);
}

.row-frame-silver {
  --row-frame-color: #c8c8dc;
  --row-frame-glow: rgba(200,200,220,.45);
}

.row-frame-gold {
  --row-frame-color: var(--menu-hex3);
  --row-frame-glow: rgba(255,215,107,.5);
  animation: rowFrameGoldPulse 2.2s ease-in-out infinite;
}

@keyframes rowFrameGoldPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--row-frame-color), 0 0 12px var(--row-frame-glow); }
  50%      { box-shadow: inset 0 0 0 2px var(--row-frame-color), 0 0 24px var(--row-frame-glow); }
}

.row-frame-fire {
  --row-frame-color: var(--menu-hex2);
  --row-frame-glow: rgba(255,106,42,.5);
  animation: rowFrameFirePulse 1.1s ease-in-out infinite;
}

@keyframes rowFrameFirePulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--row-frame-color), 0 0 14px var(--row-frame-glow); }
  50%      { box-shadow: inset 0 0 0 2px #ffb020, 0 0 26px rgba(255,180,60,.6); }
}

.row-frame-kraken {
  --row-frame-color: #0e7c66;
  --row-frame-glow: rgba(14,124,102,.45);
  animation: rowFrameKrakenPulse 2.6s ease-in-out infinite;
}

@keyframes rowFrameKrakenPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--row-frame-color), 0 0 12px var(--row-frame-glow); }
  50%      { box-shadow: inset 0 0 0 2px #4ade80, 0 0 20px rgba(74,222,128,.5); }
}

.row-frame-legend {
  animation: rowFrameLegendCycle 3s linear infinite;
}

@keyframes rowFrameLegendCycle {
  0%   { box-shadow: inset 0 0 0 2px var(--menu-hex3), 0 0 18px rgba(255,215,107,.6); }
  25%  { box-shadow: inset 0 0 0 2px var(--menu-hex2), 0 0 18px rgba(255,106,42,.6); }
  50%  { box-shadow: inset 0 0 0 2px #9146ff, 0 0 18px rgba(145,70,255,.6); }
  75%  { box-shadow: inset 0 0 0 2px #4da3ff, 0 0 18px rgba(77,163,255,.6); }
  100% { box-shadow: inset 0 0 0 2px var(--menu-hex3), 0 0 18px rgba(255,215,107,.6); }
}

/* =====================================================
   DUBLONEN-TOAST (kurze Benachrichtigung bei Gewinn)
===================================================== */
.currency-toast {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: var(--fh-z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(214,168,79,.3), rgba(10,10,20,.95));
  border: 1px solid rgba(214,168,79,.6);
  color: #ffe9b0;
  font-weight: 700;
  font-family: var(--fh-font-display);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 25px rgba(214,168,79,.3);
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(0.22, 0.9, 0.32, 1.2);
}

.currency-toast.visible {
  transform: translateX(0);
}

.currency-toast-icon {
  font-size: 20px;
  animation: shopCoinSpin 1.4s ease-in-out infinite;
}

@media (max-width: 600px) {
  .currency-toast {
    left: 16px;
    right: 16px;
    top: 16px;
  }

  .shop-gruppe-raster {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* Belohnungs-Anzeige für Platz 1-3 in den Ranglisten */
.boss-leaderboard-reward,
.race-result-reward {
  font-size: 12px;
  font-weight: 700;
  color: var(--fh-gold-bright, #ffe9b0);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(214,168,79,.15);
  border: 1px solid rgba(214,168,79,.4);
  margin-left: 8px;
}

/* =====================================================
   BEWERTUNG
===================================================== */
.rating-content {
  max-width: 560px;
  margin: auto;
}

.rating-average {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 25px auto 10px;
  padding: 16px 28px;
  border-radius: 16px;
  background: rgba(214,168,79,.1);
  border: 1px solid rgba(214,168,79,.35);
  width: fit-content;
}

.rating-average-stars {
  font-size: 26px;
  color: var(--menu-hex3);
  text-shadow: 0 0 14px rgba(255,215,107,.5);
  letter-spacing: 2px;
}

.rating-average-text {
  font-size: 13px;
  color: var(--fh-muted-fg, #999);
}

.rating-box {
  margin-top: 30px;
  padding: 30px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.rating-star {
  font-size: 44px;
  color: rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .15s, color .2s, text-shadow .2s;
  user-select: none;
}

.rating-star:hover {
  transform: scale(1.15);
}

.rating-star-active {
  color: var(--menu-hex3);
  text-shadow: 0 0 18px rgba(255,215,107,.7);
  animation: ratingStarPop .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ratingStarPop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.rating-box .support-report-textarea {
  margin-top: 4px;
}

@media (max-width: 600px) {
  .rating-star {
    font-size: 34px;
  }

  .rating-box {
    padding: 22px 18px;
  }
}


/* ======================================================
   MYSTERY GIFT (scripts/shop/mystery-gift.js, Migration 44)
   Ausserhalb des Angebots eine ruhige, gedimmte Zeile; im
   Angebot eine leuchtende Karte mit langsam kreisendem Rand.
====================================================== */
.fh-mystery {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 8px 0 26px;
  padding: 16px 18px;
  border: 1px dashed var(--fh-border-strong);
  border-radius: var(--fh-radius);
  background: var(--fh-surface);
  color: var(--fh-muted-fg);
}

.fh-mystery[hidden] { display: none; }

.fh-mystery-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-muted);
  color: var(--fh-muted-fg);
}
.fh-mystery-symbol svg { width: 28px; height: 28px; }

.fh-mystery-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
}
.fh-mystery-name {
  font-family: var(--fh-font-display);
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fh-fg);
}
.fh-mystery-seltenheit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fh-fire);
}
.fh-mystery-satz { margin: 0; font-size: 14px; line-height: 1.5; }
.fh-mystery-status { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--fh-gold-bright); }
.fh-mystery-status.ist-fehler { color: var(--fh-danger); }

/* ---- im Angebot ---- */
.fh-mystery.ist-angebot {
  grid-template-columns: auto 1fr auto;
  padding: 22px 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fh-surface-2), var(--fh-surface-2)) padding-box,
    conic-gradient(from var(--fh-mystery-winkel, 0deg), var(--fh-fire), var(--fh-gold-bright), var(--fh-fire-deep), var(--fh-gold), var(--fh-fire)) border-box;
  box-shadow: var(--fh-glow-fire), var(--fh-shadow-sm);
  color: var(--fh-fg);
  animation: fhMysteryRand 6s linear infinite;
}
.fh-mystery.ist-angebot .fh-mystery-symbol {
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at 50% 40%, rgba(240,201,106,.28), transparent 70%), var(--fh-muted);
  color: var(--fh-gold-bright);
  animation: fhMysteryWippen 2.8s var(--fh-ease) infinite;
}
.fh-mystery.ist-angebot .fh-mystery-symbol svg { width: 36px; height: 36px; }
.fh-mystery.ist-angebot .fh-mystery-name { font-size: 26px; color: var(--fh-gold-bright); text-shadow: var(--fh-glow-gold); }
.fh-mystery-zeit { margin: 8px 0 0; font-size: 13px; color: var(--fh-muted-fg); }
.fh-mystery-rest { font-family: var(--fh-mono); color: var(--fh-fire); }

.fh-mystery-aktion { display: flex; flex-direction: column; align-items: flex-end; }
.fh-mystery-knopf { white-space: nowrap; }
.fh-mystery-aktion .fh-mystery-status { text-align: right; max-width: 260px; }

@property --fh-mystery-winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes fhMysteryRand { to { --fh-mystery-winkel: 360deg; } }
@keyframes fhMysteryWippen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-mystery.ist-angebot,
  .fh-mystery.ist-angebot .fh-mystery-symbol { animation: none; }
}

@media (max-width: 640px) {
  .fh-mystery.ist-angebot { grid-template-columns: auto 1fr; padding: 18px; }
  .fh-mystery-aktion { grid-column: 1 / -1; align-items: stretch; }
  .fh-mystery-aktion .fh-mystery-status { text-align: left; max-width: none; }
}