/* Age of Warlords – Phase 4: Schatzkammer (Cases, Shop, Tägliches), Case-Öffnung, Belohnungs-Block, Unique-Items (SPEC-P4 3, 5).
   Größen in Design-Pixeln × --eu. --eu ist --u mit Untergrenze, damit Texte auf kleinen Bühnen lesbar bleiben.
   Seltenheit und Case-Art kommen als --rarity und --tier aus dem JS. Tap-Ziele mindestens 44 CSS-px. */

.eco { --eu: max(var(--u, 1px), 0.74px); --tap: max(44px, calc(62 * var(--eu))); }
@media (pointer: coarse), (max-height: 520px) { .eco { --eu: max(var(--u, 1px), 0.9px); } }

/* ================================================================ Screen */

.screen-shop {
  width: min(100%, calc(1640 * var(--u)));
  height: min(100%, calc(1000 * var(--u)));
  max-height: 100%;
  padding: calc(26 * var(--u)) calc(34 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (pointer: coarse), (max-height: 520px) {
  .screen-shop { width: 100%; height: 100%; padding: 10px 12px; border-radius: 0; }
}
.eco-shop { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--eu)); }
.eco-head { position: relative; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--eu)) calc(20 * var(--eu)); }
.eco-head .menu-title { justify-content: flex-start; font-size: calc(36 * var(--eu)); }
.eco-head .menu-title .ico { width: calc(34 * var(--eu)); height: calc(34 * var(--eu)); }
.eco-wallet { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--eu)); }
.eco-wallet .wallet { min-height: calc(52 * var(--eu)); gap: calc(8 * var(--eu)); padding: 0 calc(16 * var(--eu)) 0 calc(12 * var(--eu)); }
.eco-wallet .wallet .ico { width: calc(26 * var(--eu)); height: calc(26 * var(--eu)); }
.eco-wallet .wallet b { font-size: calc(21 * var(--eu)); }
.eco-wallet .wallet small { font-size: calc(12 * var(--eu)); }
.eco-wallet-gem { border-color: rgba(120, 210, 255, 0.55); box-shadow: inset 0 0 calc(14 * var(--eu)) rgba(79, 195, 255, 0.14); }
.eco-wallet-gem .ico { color: #8fdcff; }

.eco-mult-wrap { position: relative; }
.eco-mult {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--eu));
  min-height: max(44px, calc(52 * var(--eu)));
  padding: 0 calc(14 * var(--eu));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.22);
  color: var(--text-dim);
}
.eco-mult .ico { width: calc(22 * var(--eu)); height: calc(22 * var(--eu)); }
.eco-mult b { font: 800 calc(21 * var(--eu)) / 1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.eco-mult small { font: 600 calc(12 * var(--eu)) / 1.1 var(--font-body); }
.eco-mult:hover { border-color: var(--gold-soft); }
.eco-mult.is-active {
  color: #2a1d06;
  background: linear-gradient(180deg, #f8da6e, #c8921c);
  border-color: var(--gold-hi);
  box-shadow: 0 0 calc(16 * var(--eu)) rgba(230, 180, 34, 0.5);
}
.eco-mult.is-active b { color: #2a1d06; }
.eco-tip {
  position: absolute;
  top: calc(100% + calc(8 * var(--eu)));
  right: 0;
  z-index: 8;
  width: min(calc(440 * var(--eu)), 86vw);
  padding: calc(14 * var(--eu)) calc(16 * var(--eu));
  border-radius: calc(12 * var(--eu));
  background: rgba(10, 12, 18, 0.98);
  border: calc(1 * var(--eu)) solid var(--gold-soft);
  box-shadow: 0 calc(14 * var(--eu)) calc(36 * var(--eu)) rgba(0, 0, 0, 0.7);
  font: 500 calc(14.5 * var(--eu)) / 1.35 var(--font-body);
  color: var(--text-dim);
}
.eco-tip-title { display: block; margin-bottom: calc(8 * var(--eu)); font: 700 calc(18 * var(--eu)) / 1.15 var(--font-head); color: var(--gold-hi); }
.eco-tip ul { margin: 0 0 calc(8 * var(--eu)); padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(5 * var(--eu)); }
.eco-tip li { display: flex; align-items: center; gap: calc(8 * var(--eu)); }
.eco-tip li .ico { flex: none; width: calc(18 * var(--eu)); height: calc(18 * var(--eu)); opacity: 0.7; }
.eco-tip li span { flex: 1; min-width: 0; }
.eco-tip li small { font: 600 calc(13 * var(--eu)) / 1 var(--font-body); font-variant-numeric: tabular-nums; }
.eco-tip li.is-on { color: var(--gold-hi); }
.eco-tip li.is-on .ico { opacity: 1; color: var(--gold); }
.eco-tip p { margin: calc(5 * var(--eu)) 0 0; }
.eco-tip p.is-good { color: var(--good); }

.eco-tabs .tab {
  position: relative;
  min-height: max(44px, calc(60 * var(--eu)));
  padding: 0 calc(22 * var(--eu));
  gap: calc(8 * var(--eu));
  font: 700 calc(17 * var(--eu)) / 1 var(--font-head);
}
.eco-tabs .tab .ico { width: calc(22 * var(--eu)); height: calc(22 * var(--eu)); }
.eco-badge {
  min-width: calc(24 * var(--eu));
  height: calc(24 * var(--eu));
  padding: 0 calc(6 * var(--eu));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font: 800 calc(13 * var(--eu)) / 1 var(--font-body);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.eco-body {
  container: eco-body / inline-size;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: calc(8 * var(--eu));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--eu));
  -webkit-overflow-scrolling: touch;
}
.eco-body::-webkit-scrollbar { width: calc(10 * var(--u)); }
.eco-body::-webkit-scrollbar-thumb { background: rgba(230, 180, 34, 0.45); border-radius: 999px; }
.eco-foot { margin-top: 0; }

.eco h3 {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--eu));
  margin: 0;
  font: 700 calc(21 * var(--eu)) / 1.15 var(--font-head);
  color: var(--gold-hi);
}
.eco h3 .ico { flex: none; width: calc(22 * var(--eu)); height: calc(22 * var(--eu)); color: var(--gold); }
.eco h4 { margin: 0; font: 700 calc(18 * var(--eu)) / 1.15 var(--font-head); color: var(--text); }
.eco-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: calc(4 * var(--eu)) calc(12 * var(--eu)); }
.eco-row > small { font: 600 calc(14 * var(--eu)) / 1.2 var(--font-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eco-lead, .eco-hint { margin: 0; font: 500 calc(14.5 * var(--eu)) / 1.35 var(--font-body); color: var(--text-dim); }
.eco-card {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--eu));
  padding: calc(14 * var(--eu)) calc(16 * var(--eu));
  border-radius: calc(12 * var(--eu));
  background: linear-gradient(180deg, rgba(40, 43, 60, 0.7), rgba(18, 20, 30, 0.82));
  border: calc(1 * var(--eu)) solid rgba(230, 180, 34, 0.2);
}
.eco-section { display: flex; flex-direction: column; gap: calc(10 * var(--eu)); }
.eco-done { display: inline-flex; align-items: center; gap: calc(6 * var(--eu)); font: 700 calc(15 * var(--eu)) / 1.1 var(--font-body); color: var(--good); }
.eco-done .ico { width: calc(18 * var(--eu)); height: calc(18 * var(--eu)); }
.eco-bar {
  display: block;
  height: calc(8 * var(--eu));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.eco-bar u {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transition: width 0.3s ease;
}
.eco-bar.is-xp u { background: linear-gradient(90deg, var(--xp), var(--xp-hi)); }
.eco-warn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--eu));
  padding: calc(10 * var(--eu)) calc(14 * var(--eu));
  border-radius: calc(10 * var(--eu));
  background: rgba(224, 74, 63, 0.14);
  border: calc(1 * var(--eu)) solid rgba(224, 74, 63, 0.55);
  color: #ffd7d1;
  font: 600 calc(15 * var(--eu)) / 1.3 var(--font-body);
}
.eco-warn > span { flex: 1; min-width: calc(200 * var(--eu)); }
.eco-warn .ico { width: calc(22 * var(--eu)); height: calc(22 * var(--eu)); }
.eco-warn .mbtn { min-height: var(--tap); font-size: calc(16 * var(--eu)); padding: 0 calc(16 * var(--eu)); }

/* ================================================================ Cases */

.eco-art { display: block; width: calc(84 * var(--eu)); height: calc(84 * var(--eu)); flex: none; filter: drop-shadow(0 0 calc(10 * var(--eu)) color-mix(in srgb, var(--tier) 45%, transparent)); }
.eco-art.is-btn { width: calc(30 * var(--eu)); height: calc(30 * var(--eu)); filter: none; }
.eco-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--eu)); }
@container eco-body (max-width: 900px) { .eco-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container eco-body (max-width: 480px) { .eco-case-grid { grid-template-columns: minmax(0, 1fr); } }
.eco-case {
  --tier: var(--gold);
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--eu));
  min-width: 0;
  padding: calc(14 * var(--eu));
  border-radius: calc(14 * var(--eu));
  border: calc(1 * var(--eu)) solid color-mix(in srgb, var(--tier) 42%, transparent);
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, color-mix(in srgb, var(--tier) 18%, transparent), transparent 75%),
    linear-gradient(180deg, rgba(40, 43, 60, 0.92), rgba(16, 18, 27, 0.96));
}
.eco-case.has-cases { border-color: color-mix(in srgb, var(--tier) 78%, transparent); box-shadow: 0 0 calc(18 * var(--eu)) color-mix(in srgb, var(--tier) 24%, transparent); }
.eco-case-top { display: flex; align-items: center; gap: calc(12 * var(--eu)); }
.eco-case h3 { color: color-mix(in srgb, var(--tier) 70%, #ffffff); }
.eco-owned { display: block; margin-top: calc(5 * var(--eu)); font: 600 calc(15 * var(--eu)) / 1.1 var(--font-body); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.eco-owned.is-some { color: var(--text); font-weight: 800; }
.eco-odds-head { font: 700 calc(12 * var(--eu)) / 1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.eco-odds { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(4 * var(--eu)); }
.eco-odd { display: grid; grid-template-columns: calc(96 * var(--eu)) minmax(0, 1fr) calc(58 * var(--eu)); align-items: center; gap: calc(8 * var(--eu)); font: 600 calc(14 * var(--eu)) / 1.1 var(--font-body); }
.eco-odd-name { color: color-mix(in srgb, var(--rarity) 72%, #ffffff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-odd-bar { display: block; height: calc(7 * var(--eu)); border-radius: 999px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.eco-odd-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--rarity); }
.eco-odd b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.eco-case-acts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--eu)); margin-top: calc(4 * var(--eu)); }
.eco-case-acts .mbtn { flex: 1 1 auto; min-height: var(--tap); padding: 0 calc(12 * var(--eu)); font-size: calc(16 * var(--eu)); gap: calc(7 * var(--eu)); }
.eco-case-acts .mbtn .ico { width: calc(21 * var(--eu)); height: calc(21 * var(--eu)); }
.eco-buy {
  width: 100%;
  min-height: var(--tap);
  padding: 0 calc(14 * var(--eu));
  justify-content: space-between;
  font-size: calc(16 * var(--eu));
}
.eco-buy em {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--eu));
  font: 800 calc(17 * var(--eu)) / 1 var(--font-body);
  font-style: normal;
  color: #a8e4ff;
  font-variant-numeric: tabular-nums;
}
.eco-buy em .ico { width: calc(19 * var(--eu)); height: calc(19 * var(--eu)); }
.eco-buy.is-poor em { color: var(--danger-hi); }
.eco-missing { display: block; margin-top: calc(4 * var(--eu)); text-align: right; font: 600 calc(13 * var(--eu)) / 1.1 var(--font-body); color: var(--danger-hi); }
.eco-buy-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--eu)); }
.eco-buy-confirm small { flex: 1 0 100%; font: 700 calc(14 * var(--eu)) / 1.1 var(--font-body); color: var(--gold-hi); }
.eco-buy-confirm .mbtn { flex: 1 1 auto; min-height: var(--tap); padding: 0 calc(10 * var(--eu)); font-size: calc(15 * var(--eu)); gap: calc(5 * var(--eu)); }
.eco-buy-confirm .mbtn .ico { width: calc(18 * var(--eu)); height: calc(18 * var(--eu)); }

/* ================================================================ Shop */

.eco-premium { border-color: var(--gold-soft); background: radial-gradient(ellipse 70% 100% at 0% 0%, rgba(230, 180, 34, 0.17), transparent 70%), linear-gradient(180deg, rgba(40, 43, 60, 0.7), rgba(18, 20, 30, 0.82)); }
.eco-premium p { margin: 0; font: 500 calc(15 * var(--eu)) / 1.35 var(--font-body); color: var(--text); }
.eco-premium p.eco-hint { color: var(--text-dim); font-size: calc(14 * var(--eu)); }
.eco-weekly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300 * var(--eu))), 1fr)); gap: calc(12 * var(--eu)); }
.eco-weekly { display: flex; flex-direction: column; gap: calc(8 * var(--eu)); min-width: 0; }
.eco-weekly > .item-card { flex: 1; --u: var(--eu); }
.eco-weekly-buy { min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
.eco-weekly.is-bought .eco-weekly-buy { align-items: center; }
.eco-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(460 * var(--eu))), 1fr)); gap: calc(10 * var(--eu)); }
.eco-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--eu));
  padding: calc(12 * var(--eu));
  border-radius: calc(12 * var(--eu));
  background: linear-gradient(180deg, rgba(40, 43, 60, 0.82), rgba(18, 20, 30, 0.9));
  border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.1);
}
.eco-offer.is-active { border-color: var(--gold-soft); box-shadow: 0 0 calc(14 * var(--eu)) rgba(230, 180, 34, 0.2); }
.eco-offer-ico {
  flex: none;
  width: calc(66 * var(--eu));
  height: calc(66 * var(--eu));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--eu));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 224, 138, 0.3), rgba(0, 0, 0, 0.45));
  border: calc(1 * var(--eu)) solid var(--gold-soft);
  color: var(--gold-hi);
}
.eco-offer-ico .ico { width: calc(24 * var(--eu)); height: calc(24 * var(--eu)); }
.eco-offer-ico b { font: 800 calc(17 * var(--eu)) / 1 var(--font-body); }
.eco-offer-text { flex: 1 1 calc(200 * var(--eu)); min-width: 0; }
.eco-offer-text p { margin: calc(3 * var(--eu)) 0 0; font: 500 calc(14 * var(--eu)) / 1.3 var(--font-body); color: var(--text-dim); }
.eco-offer-text small { display: block; margin-top: calc(4 * var(--eu)); font: 700 calc(14 * var(--eu)) / 1.1 var(--font-body); }
.eco-offer-text small.is-good { color: var(--good); }
.eco-offer-buy { flex: 1 1 calc(170 * var(--eu)); max-width: calc(280 * var(--eu)); display: flex; flex-direction: column; justify-content: center; }
.eco-earn ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(340 * var(--eu))), 1fr)); gap: calc(6 * var(--eu)) calc(16 * var(--eu)); }
.eco-earn li { display: flex; align-items: flex-start; gap: calc(7 * var(--eu)); font: 500 calc(14.5 * var(--eu)) / 1.3 var(--font-body); color: var(--text); }
.eco-earn li .ico { flex: none; width: calc(17 * var(--eu)); height: calc(17 * var(--eu)); color: #8fdcff; margin-top: calc(1 * var(--eu)); }
.eco-earn-acts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--eu)); }
.eco-earn-acts .mbtn { min-height: var(--tap); font-size: calc(16 * var(--eu)); padding: 0 calc(16 * var(--eu)); }

/* ================================================================ Tägliches */

.eco-daily-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(520 * var(--eu))), 1fr)); gap: calc(14 * var(--eu)); align-items: start; }
.eco-col { display: flex; flex-direction: column; gap: calc(14 * var(--eu)); min-width: 0; }
.eco-level { flex-direction: row; align-items: center; gap: calc(14 * var(--eu)); }
.eco-level-badge {
  flex: none;
  width: calc(72 * var(--eu));
  height: calc(72 * var(--eu));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8da6e, #a8692a 80%);
  border: calc(2 * var(--eu)) solid var(--gold-hi);
  color: #2a1d06;
  font: 900 calc(29 * var(--eu)) / 1 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.eco-level-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(7 * var(--eu)); }
.eco-days { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(6 * var(--eu)); }
.eco-day {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--eu));
  padding: calc(9 * var(--eu)) calc(2 * var(--eu));
  border-radius: calc(9 * var(--eu));
  background: rgba(0, 0, 0, 0.35);
  border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.eco-day > span { font: 700 calc(12 * var(--eu)) / 1 var(--font-body); color: var(--text-dim); white-space: nowrap; }
.eco-day b { display: inline-flex; align-items: center; gap: calc(3 * var(--eu)); font: 800 calc(16 * var(--eu)) / 1 var(--font-body); font-variant-numeric: tabular-nums; }
.eco-day b .ico { width: calc(15 * var(--eu)); height: calc(15 * var(--eu)); color: #8fdcff; }
.eco-day small { font: 600 calc(10.5 * var(--eu)) / 1.05 var(--font-body); color: var(--gold-hi); }
.eco-day.is-seven { border-color: var(--gold-soft); }
.eco-day.is-done { background: rgba(123, 216, 143, 0.13); border-color: rgba(123, 216, 143, 0.5); }
.eco-day.is-done b .ico { color: var(--good); }
.eco-day.is-next { border-color: var(--gold-hi); background: rgba(230, 180, 34, 0.14); animation: eco-pulse 1.6s ease-in-out infinite; }
@keyframes eco-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 180, 34, 0.5); }
  50% { box-shadow: 0 0 calc(14 * var(--eu)) calc(1 * var(--eu)) rgba(230, 180, 34, 0.55); }
}
.eco-daily-foot { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--eu)); }
.eco-daily-foot > .eco-hint { flex: 1 1 calc(220 * var(--eu)); }
.eco-daily-act { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--eu)); }
.eco-claim { min-height: var(--tap); padding: 0 calc(20 * var(--eu)); font-size: calc(17 * var(--eu)); gap: calc(7 * var(--eu)); }
.eco-claim .ico { width: calc(20 * var(--eu)); height: calc(20 * var(--eu)); }
.eco-quests ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--eu)); }
.eco-quest { display: flex; align-items: center; gap: calc(12 * var(--eu)); padding: calc(9 * var(--eu)) calc(12 * var(--eu)); border-radius: calc(9 * var(--eu)); background: rgba(0, 0, 0, 0.28); border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.08); }
.eco-quest.is-ready { border-color: var(--gold-hi); background: rgba(230, 180, 34, 0.1); }
.eco-quest.is-claimed { opacity: 0.68; }
.eco-quest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--eu)); }
.eco-quest-body b { font: 700 calc(15.5 * var(--eu)) / 1.2 var(--font-body); }
.eco-quest-body small { font: 500 calc(13 * var(--eu)) / 1.1 var(--font-body); color: var(--text-dim); }
.eco-quest-n { flex: none; font: 800 calc(15 * var(--eu)) / 1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.eco-ach-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(310 * var(--eu))), 1fr)); gap: calc(7 * var(--eu)); }
.eco-ach { display: flex; align-items: center; gap: calc(9 * var(--eu)); padding: calc(7 * var(--eu)) calc(10 * var(--eu)); border-radius: calc(8 * var(--eu)); background: rgba(0, 0, 0, 0.28); border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.07); }
.eco-ach > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--eu)); }
.eco-ach b { font: 700 calc(14 * var(--eu)) / 1.15 var(--font-body); }
.eco-ach small { font: 600 calc(12 * var(--eu)) / 1 var(--font-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eco-ach .eco-bar { height: calc(5 * var(--eu)); }
.eco-ach-ico { flex: none; color: var(--text-faint); }
.eco-ach-ico .ico { display: block; width: calc(21 * var(--eu)); height: calc(21 * var(--eu)); }
.eco-ach-gem { flex: none; display: inline-flex; align-items: center; gap: calc(3 * var(--eu)); font: 800 calc(14 * var(--eu)) / 1 var(--font-body); color: #a8e4ff; font-variant-numeric: tabular-nums; }
.eco-ach-gem .ico { width: calc(14 * var(--eu)); height: calc(14 * var(--eu)); }
.eco-ach.is-done { border-color: rgba(230, 180, 34, 0.45); background: rgba(230, 180, 34, 0.09); }
.eco-ach.is-done .eco-ach-ico { color: var(--gold); }
.eco-ach.is-done small { color: var(--good); }

/* ================================================================ Case-Öffnung */

.eco-modal-host[hidden] { display: none; }
.eco-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14 * var(--eu));
  background: radial-gradient(ellipse at 50% 45%, rgba(26, 22, 14, 0.94), rgba(5, 6, 10, 0.98));
  border-radius: inherit;
  overflow-y: auto;
  animation: eco-fade 0.18s ease-out;
}
@keyframes eco-fade { from { opacity: 0; } to { opacity: 1; } }
.eco-modal-box { width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--eu)); }
.eco-modal-title { justify-content: center; text-align: center; font-size: calc(30 * var(--eu)) !important; color: color-mix(in srgb, var(--tier) 62%, #ffffff) !important; }
.eco-modal-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--eu)); }
.eco-modal-acts .mbtn { min-height: var(--tap); font-size: calc(17 * var(--eu)); padding: 0 calc(20 * var(--eu)); gap: calc(8 * var(--eu)); }
.eco-modal-acts .mbtn .ico { width: calc(21 * var(--eu)); height: calc(21 * var(--eu)); }
.eco-modal-note { display: flex; align-items: center; gap: calc(7 * var(--eu)); margin: 0; font: 600 calc(15 * var(--eu)) / 1.3 var(--font-body); color: #ffd7d1; }
.eco-modal-note .ico { flex: none; width: calc(18 * var(--eu)); height: calc(18 * var(--eu)); }

.eco-opening { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--eu)); min-height: calc(190 * var(--eu)); justify-content: center; }
.eco-opening .eco-art { width: calc(150 * var(--eu)); height: calc(150 * var(--eu)); }
.eco-art.is-shaking { animation: eco-shake 0.42s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes eco-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg) translateY(-2%); }
  75% { transform: rotate(4deg) translateY(-2%); }
}
.eco-opening-n { min-height: 1.2em; font: 700 calc(17 * var(--eu)) / 1.2 var(--font-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }

.eco-reel {
  --tile: calc(128 * var(--eu));
  position: relative;
  width: 100%;
  max-width: calc(1300 * var(--eu));
  height: calc(var(--tile) + calc(38 * var(--eu)));
  overflow: hidden;
  border-radius: calc(12 * var(--eu));
  border: calc(1 * var(--eu)) solid color-mix(in srgb, var(--tier) 60%, transparent);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 calc(50 * var(--eu)) rgba(0, 0, 0, 0.8), 0 0 calc(30 * var(--eu)) color-mix(in srgb, var(--tier) 18%, transparent);
}
.eco-reel::before, .eco-reel::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
}
.eco-reel::before { left: 0; background: linear-gradient(90deg, rgba(5, 6, 10, 0.95), transparent); }
.eco-reel::after { right: 0; background: linear-gradient(270deg, rgba(5, 6, 10, 0.95), transparent); }
.eco-reel-mark {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  bottom: 0;
  width: calc(3 * var(--eu));
  margin-left: calc(-1.5 * var(--eu));
  background: var(--gold-hi);
  box-shadow: 0 0 calc(12 * var(--eu)) var(--gold-hi), 0 0 calc(26 * var(--eu)) var(--gold);
}
.eco-reel-mark::before, .eco-reel-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: calc(10 * var(--eu)) solid transparent;
  border-right: calc(10 * var(--eu)) solid transparent;
}
.eco-reel-mark::before { top: 0; border-top: calc(14 * var(--eu)) solid var(--gold-hi); }
.eco-reel-mark::after { bottom: 0; border-bottom: calc(14 * var(--eu)) solid var(--gold-hi); }
.eco-strip {
  position: absolute;
  left: 0;
  top: calc(19 * var(--eu));
  display: flex;
  gap: calc(10 * var(--eu));
  padding-left: calc(10 * var(--eu));
  will-change: transform;
}
.eco-tile {
  flex: none;
  width: var(--tile);
  height: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(10 * var(--eu));
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rarity) 42%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(46, 50, 68, 0.98), rgba(18, 20, 30, 1));
  border: calc(2 * var(--eu)) solid color-mix(in srgb, var(--rarity) 78%, transparent);
  border-bottom-width: calc(6 * var(--eu));
  color: color-mix(in srgb, var(--rarity) 70%, #ffffff);
}
.eco-tile .ico { width: 50%; height: 50%; }
.eco-tile.is-center { filter: brightness(1.35); }
.eco-tile.is-legendary { box-shadow: 0 0 calc(14 * var(--eu)) color-mix(in srgb, var(--rarity) 55%, transparent); }
.eco-tile.is-mythic { box-shadow: 0 0 calc(20 * var(--eu)) color-mix(in srgb, var(--rarity) 70%, transparent); }

.eco-reveal {
  position: relative;
  width: min(100%, calc(460 * var(--eu)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--eu));
  padding: calc(8 * var(--eu));
}
.eco-reveal-rarity {
  position: relative;
  z-index: 1;
  font: 900 calc(36 * var(--eu)) / 1.1 var(--font-head);
  text-align: center;
  color: color-mix(in srgb, var(--rarity) 72%, #ffffff);
  text-shadow: 0 0 calc(22 * var(--eu)) var(--rarity), 0 calc(2 * var(--eu)) calc(6 * var(--eu)) rgba(0, 0, 0, 0.8);
  animation: eco-rise 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.eco-reveal-card { position: relative; z-index: 1; width: 100%; animation: eco-pop 0.48s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.eco-reveal-card .item-card { --u: var(--eu); box-shadow: 0 0 calc(34 * var(--eu)) color-mix(in srgb, var(--rarity) 60%, transparent); }
@keyframes eco-pop { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } }
@keyframes eco-rise { from { opacity: 0; transform: translateY(calc(14 * var(--eu))); } to { opacity: 1; transform: none; } }
.eco-rays {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(620 * var(--eu));
  height: calc(620 * var(--eu));
  margin: calc(-310 * var(--eu)) 0 0 calc(-310 * var(--eu));
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 42%, transparent), transparent 62%);
  pointer-events: none;
  animation: eco-fade 0.4s ease-out;
}
.eco-reveal.is-epic .eco-rays, .eco-reveal.is-legendary .eco-rays, .eco-reveal.is-mythic .eco-rays, .eco-reveal.is-unique-reveal .eco-rays {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--rarity) 50%, transparent) 10%, transparent 64%),
    repeating-conic-gradient(color-mix(in srgb, var(--rarity) 34%, transparent) 0 10deg, transparent 10deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  animation: eco-spin 14s linear infinite;
}
@keyframes eco-spin { to { transform: rotate(360deg); } }
/* Enthüllung steigert sich je Seltenheit: Gewöhnlich schlicht, Mythisch und Unikat am stärksten. Nur transform und opacity. */
.eco-reveal.is-common .eco-rays { opacity: 0.45; }
.eco-reveal.is-rare .eco-rays { opacity: 0.8; }
.eco-reveal.is-legendary .eco-reveal-card .item-card { box-shadow: 0 0 calc(52 * var(--eu)) color-mix(in srgb, var(--rarity) 72%, transparent); }
.eco-reveal.is-mythic .eco-reveal-card .item-card, .eco-reveal.is-unique-reveal .eco-reveal-card .item-card { box-shadow: 0 0 calc(76 * var(--eu)) color-mix(in srgb, var(--rarity) 85%, transparent); }
.eco-reveal.is-legendary::before, .eco-reveal.is-mythic::before, .eco-reveal.is-unique-reveal::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(360 * var(--eu));
  height: calc(360 * var(--eu));
  margin: calc(-180 * var(--eu)) 0 0 calc(-180 * var(--eu));
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, color-mix(in srgb, var(--rarity) 70%, transparent) 38%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  animation: eco-flash 0.7s ease-out both;
}
.eco-reveal.is-mythic .eco-rays::after, .eco-reveal.is-unique-reveal .eco-rays::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rarity) 42%, #ffffff 12%) 0 6deg, transparent 6deg 24deg);
  animation: eco-spin 9s linear infinite reverse;
}
@keyframes eco-flash { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 0.95; } 100% { opacity: 0; transform: scale(2.1); } }
.eco-burst { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.eco-burst i {
  position: absolute;
  width: calc(9 * var(--eu));
  height: calc(9 * var(--eu));
  margin: calc(-4.5 * var(--eu));
  border-radius: 50%;
  background: color-mix(in srgb, var(--rarity) 65%, #ffffff);
  box-shadow: 0 0 calc(10 * var(--eu)) var(--rarity);
  opacity: 0;
  animation: eco-spark 0.95s var(--t) cubic-bezier(0.15, 0.7, 0.35, 1) both;
}
@keyframes eco-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1 * var(--eu))) scale(0.25); }
}

.eco-multi { width: 100%; max-width: calc(1460 * var(--eu)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(250 * var(--eu))), 1fr)); gap: calc(10 * var(--eu)); }
.eco-multi-slot { position: relative; display: flex; min-width: 0; animation: eco-pop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i) * 70ms); }
.eco-multi-slot .item-card { flex: 1; --u: var(--eu); }
.eco-multi-slot.is-legendary .item-card, .eco-multi-slot.is-mythic .item-card { box-shadow: 0 0 calc(22 * var(--eu)) color-mix(in srgb, var(--rarity) 55%, transparent); }
.eco-multi-slot.is-best .item-card { border-color: var(--gold-hi); }
.eco-best {
  position: absolute;
  z-index: 2;
  top: calc(-7 * var(--eu));
  left: 50%;
  transform: translateX(-50%);
  padding: calc(3 * var(--eu)) calc(9 * var(--eu));
  border-radius: 999px;
  background: linear-gradient(180deg, #f8da6e, #c8921c);
  color: #2a1d06;
  font: 800 calc(12 * var(--eu)) / 1.1 var(--font-body);
  white-space: nowrap;
}

/* ================================================================ Ergebnis-Screen */

.eco-rw {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--eu));
  padding: calc(12 * var(--eu)) calc(14 * var(--eu));
  border-radius: calc(12 * var(--eu));
  background: linear-gradient(180deg, rgba(46, 40, 22, 0.55), rgba(16, 17, 25, 0.8));
  border: calc(1 * var(--eu)) solid var(--gold-soft);
  text-align: left;
}
.eco-rw-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(6 * var(--eu)); }
.eco-rw-mult {
  padding: calc(5 * var(--eu)) calc(11 * var(--eu));
  border-radius: 999px;
  background: linear-gradient(180deg, #f8da6e, #c8921c);
  color: #2a1d06;
  font: 800 calc(14 * var(--eu)) / 1 var(--font-body);
}
.eco-rw-chips { display: flex; flex-wrap: wrap; gap: calc(7 * var(--eu)); }
.eco-rw-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--eu));
  min-height: calc(40 * var(--eu));
  padding: 0 calc(12 * var(--eu)) 0 calc(9 * var(--eu));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  border: calc(1 * var(--eu)) solid rgba(255, 255, 255, 0.14);
}
.eco-rw-chip .ico { width: calc(21 * var(--eu)); height: calc(21 * var(--eu)); color: var(--gold); }
.eco-rw-chip b { font: 800 calc(18 * var(--eu)) / 1 var(--font-body); font-variant-numeric: tabular-nums; }
.eco-rw-chip small { font: 600 calc(12 * var(--eu)) / 1 var(--font-body); color: var(--text-dim); }
.eco-rw-chip.is-xp .ico { color: var(--xp-hi); }
.eco-rw-chip.is-gem .ico { color: #8fdcff; }
.eco-rw-line { display: flex; align-items: center; gap: calc(7 * var(--eu)); font: 600 calc(15 * var(--eu)) / 1.25 var(--font-body); }
.eco-rw-line .ico { flex: none; width: calc(20 * var(--eu)); height: calc(20 * var(--eu)); }
.eco-rw-line.is-level { font: 800 calc(19 * var(--eu)) / 1.15 var(--font-head); color: var(--gold-hi); animation: eco-rise 0.5s ease-out both; }
.eco-rw-line.is-level .ico { color: var(--gold); }
.eco-rw-line.is-capped { color: var(--text-dim); }
.eco-rw-case { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--eu)); }
.eco-rw-case .eco-art { width: calc(52 * var(--eu)); height: calc(52 * var(--eu)); }
.eco-rw-case-text { flex: 1 1 calc(140 * var(--eu)); min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--eu)); }
.eco-rw-case-text b { font: 700 calc(16 * var(--eu)) / 1.15 var(--font-head); color: var(--gold-hi); }
.eco-rw-open { min-height: max(44px, calc(52 * var(--eu))); padding: 0 calc(14 * var(--eu)); font-size: calc(15 * var(--eu)); gap: calc(6 * var(--eu)); }
.eco-rw-open .ico { width: calc(19 * var(--eu)); height: calc(19 * var(--eu)); }
.eco-rw-sub { font: 700 calc(12 * var(--eu)) / 1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.eco-rw-quests { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(5 * var(--eu)); }
.eco-rw-quest { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(calc(50 * var(--eu)), 1fr) auto; align-items: center; gap: calc(8 * var(--eu)); font: 600 calc(14 * var(--eu)) / 1.2 var(--font-body); }
.eco-rw-quest small { display: inline-flex; align-items: center; gap: calc(3 * var(--eu)); font: 700 calc(13 * var(--eu)) / 1 var(--font-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eco-rw-quest small .ico { width: calc(15 * var(--eu)); height: calc(15 * var(--eu)); }
.eco-rw-quest.is-done small { color: var(--good); }

/* ================================================================ Unique-Items */

.item-card.is-unique {
  border-color: var(--gold-hi);
  box-shadow:
    inset 0 0 0 calc(1 * var(--u)) rgba(255, 224, 138, 0.4),
    inset 0 0 calc(24 * var(--u)) rgba(230, 180, 34, 0.2),
    0 0 calc(14 * var(--u)) rgba(230, 180, 34, 0.32);
}
.item-card.is-unique .item-bar { background: linear-gradient(90deg, #a8692a, #ffe08a, #a8692a); }
.item-card.is-unique .item-name { color: var(--gold-hi); }
.item-unique {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u));
  background: linear-gradient(90deg, rgba(230, 180, 34, 0.26), rgba(230, 180, 34, 0.06));
  border: calc(1 * var(--u)) solid rgba(255, 224, 138, 0.5);
  color: var(--gold-hi);
  font: 800 calc(12.5 * var(--u)) / 1.15 var(--font-body);
  letter-spacing: 0.02em;
}
.item-unique .ico { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--gold); }
.inv-slot.is-unique { border-color: var(--gold-hi); box-shadow: inset 0 0 calc(10 * var(--u)) rgba(230, 180, 34, 0.3), 0 0 calc(8 * var(--u)) rgba(230, 180, 34, 0.35); }
.inv-slot.is-unique .inv-slot-name { color: var(--gold-hi); }
.inv-unique-note {
  align-self: center;
  max-width: calc(320 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font: 600 calc(14 * var(--u)) / 1.25 var(--font-body);
  color: var(--gold-hi);
}
.inv-unique-note .ico { flex: none; width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .eco-art.is-shaking, .eco-day.is-next, .eco-rays, .eco-reveal.is-epic .eco-rays, .eco-reveal.is-legendary .eco-rays,
  .eco-reveal.is-mythic .eco-rays, .eco-reveal.is-unique-reveal .eco-rays, .eco-reveal-card, .eco-reveal-rarity,
  .eco-multi-slot, .eco-modal, .eco-rw-line.is-level { animation: none; }
  .eco-reveal::before, .eco-rays::after, .eco-burst { display: none; }
  .eco-bar u { transition: none; }
}

/* ================================================================ Touch und schmale Bühnen */

@media (pointer: coarse), (max-height: 520px) {
  /* Das Panel scrollt hier als Ganzes: Die Öffnung bleibt am Bildschirm statt mitten im langen Panel. */
  .eco-modal { position: fixed; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .eco-modal-box { margin: auto; max-height: none; }
  .eco-mult small { display: none; }
}
@media (max-width: 520px) {
  .eco-tabs { flex-wrap: nowrap; }
  .eco-tabs .tab { flex: 1 1 0; min-width: 0; padding: 0 6px; gap: 5px; }
  .eco-wallet { margin-left: 0; }
  .eco-offer-buy { max-width: none; flex-basis: 100%; }
  .eco-day { padding-left: 0; padding-right: 0; }
  .eco-day > span { font-size: 10px; }
  .eco-day small { font-size: 9px; }
  .eco-reel { --tile: 96px; }
}