/* =====================================================================
   Look A „Sci-Fi-Glas“ (Entwurf: docs/entwuerfe-menue/entwurf-menue-a.png)
   Glas-Panels mit Cyan-Kante, Teile-Karten mit leuchtendem Seltenheitsrahmen,
   oranger Hauptknopf, gemalte Werkstatt hinter Werkstatt und Beute.
   ===================================================================== */
:root {
  --glass: rgba(9, 16, 27, 0.8);
  --glass2: rgba(15, 27, 43, 0.88);
  --cyan: #4fc3ff;
  --cyan-line: rgba(79, 195, 255, 0.5);
}

/* Gemalte Werkstatt, unten abgedunkelt für die Bedienelemente */
.screen.workshop, .screen.reward {
  background:
    linear-gradient(rgba(6, 9, 14, 0.05), rgba(6, 9, 14, 0.45) 34%, rgba(6, 9, 14, 0.9) 58%, #06090e 80%),
    url(../img/bg/werkstatt.webp) center top / 100% auto no-repeat, #06090e;
}
.screen.workshop .ws-preview-wrap { background: transparent; border: 0; box-shadow: none; }

/* Glas-Panels */
.panel, .tabs, .stat, .syn, .topbar .topbar-title {
  background: var(--glass);
  border: 1px solid var(--cyan-line);
  box-shadow: inset 0 0 0 1px rgba(79, 195, 255, 0.07), inset 0 0 18px rgba(79, 195, 255, 0.08);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.topbar .topbar-title { flex: 0 1 auto; margin: 0 auto; padding: 4px 18px 1px; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.tabs button { color: #9fb6c9; }
.tabs button.on { background: linear-gradient(rgba(79, 195, 255, 0.3), rgba(79, 195, 255, 0.08)); color: #eaf7ff; box-shadow: inset 0 -2px 0 var(--cyan); }
.stat b { color: #eaf7ff; }

/* Teile-Karten: dicker Seltenheitsrahmen, großes Teilebild */
.reward-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 24%, var(--glass2)), var(--glass) 62%);
  border: 2px solid var(--rc);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--rc) 32%, transparent);
}
.card-rarity { text-shadow: 0 0 8px var(--rc); }
.card-icon, .card-wicon {
  width: 78px; height: 78px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), rgba(0, 0, 0, 0.4) 72%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
}
.card-title { font-size: 23px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Hauptknopf: kräftiges Orange */
.btn.primary {
  background: linear-gradient(#ffbe45, #ff7a1a 70%);
  color: #1a0d00;
  border: 1px solid #ffd27a; border-bottom: 3px solid #8a3a00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(160, 50, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Werkstatt-Teile wie im Entwurf A: Rahmen und Glühen in der Seltenheitsfarbe, großes Teilebild */
.screen.workshop .item[style*="--rc"] {
  border: 2px solid color-mix(in srgb, var(--rc) 75%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--rc) 20%, var(--glass2)), var(--glass) 62%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--rc) 24%, transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.screen.workshop .item[style*="--rc"].on { border-color: var(--rc); box-shadow: inset 0 0 28px color-mix(in srgb, var(--rc) 42%, transparent); }
.screen.workshop .item[style*="--rc"] .item-emoji, .screen.workshop .item[style*="--rc"] .wicon {
  width: 64px !important; height: 64px !important; font-size: 34px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 32%, transparent), rgba(0, 0, 0, 0.45) 72%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
}