/* ================= Teddys & Handel ================= */
.page-tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 2px; }
.ptab { padding: .55em 1em; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 600; white-space: nowrap; }
.ptab.active { color: var(--gold2); border-color: var(--gold); background: rgba(212,175,55,.08); }
.inv-sum { display: flex; flex-direction: column; align-items: flex-end; }

/* Teddy-Bild */
.teddy-art {
  --rc: #b0b8c1; position: relative; width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 45%, transparent), color-mix(in srgb, var(--rc) 8%, #0b0f0d) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent);
}
.teddy-art .tb { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.teddy-art .tacc { position: absolute; right: 6px; bottom: 4px; font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.teddy-art .tb.rainbow { animation: rainbow 4s linear infinite; }
@keyframes rainbow { from { filter: hue-rotate(0deg) saturate(2); } to { filter: hue-rotate(360deg) saturate(2); } }
.teddy-art.xs { width: 34px; height: 34px; border-radius: 9px; } .teddy-art.xs .tb { font-size: 20px; } .teddy-art.xs .tacc { font-size: 11px; right: 1px; bottom: 0; }
.teddy-art.sm { width: 64px; height: 64px; border-radius: 14px; } .teddy-art.sm .tb { font-size: 36px; } .teddy-art.sm .tacc { font-size: 17px; }
.teddy-art.lg { width: 150px; height: 150px; border-radius: 26px; } .teddy-art.lg .tb { font-size: 92px; } .teddy-art.lg .tacc { font-size: 40px; }
.empty-art { font-size: 26px; color: var(--muted); }
.r-common { --rc: #b0b8c1; } .r-uncommon { --rc: #5e98d9; } .r-rare { --rc: #4b69ff; } .r-epic { --rc: #8847ff; }
.r-legendary { --rc: #eb4b4b; } .r-mythic { --rc: #e4ae39; } .r-special { --rc: #ff4fd8; } .r-limited { --rc: #00e5ff; }
.teddy-art.r-mythic, .teddy-art.r-special, .teddy-art.r-limited { animation: glow 2s ease-in-out infinite; }
/* Limitiert: Diamant-Glitzer */
.teddy-art.r-limited { background: radial-gradient(circle at 50% 40%, rgba(0,229,255,.45), rgba(10,20,30,.95) 70%), conic-gradient(from 0deg, #00e5ff22, #ff4fd822, #e4ae3922, #00e5ff22); }
.teddy-art.r-limited::after { content: "✦"; position: absolute; top: 6%; left: 10%; color: #fff; font-size: 14px; animation: sparkle 1.6s ease-in-out infinite; text-shadow: 0 0 6px #00e5ff; }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.2); } }
.limited-intro { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; border-color: rgba(0,229,255,.4); }
.limited-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.limited-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 16px; border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(0,229,255,.12), transparent 60%), linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid rgba(0,229,255,.35); box-shadow: 0 0 24px rgba(0,229,255,.08);
}
.limited-card h3 { margin: 6px 0 0; color: #bff7ff; }
.limited-card.sold-out { opacity: .75; }
.lim-price { font: 800 1.5rem Inter, sans-serif; color: var(--gold2); font-variant-numeric: tabular-nums; }
.lim-stock { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.lim-stock .supply-bar > div { background: linear-gradient(90deg, #00e5ff, #ff4fd8); }
.lim-owners { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.lim-owners a { font-size: .75rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.serial { color: #00e5ff; font-weight: 800; }
@keyframes glow { 50% { box-shadow: inset 0 0 0 2px var(--rc), 0 0 22px color-mix(in srgb, var(--rc) 70%, transparent); } }
.rarity-tag { color: var(--rc); font-weight: 700; font-size: .78rem; }

/* Karten */
.teddy-grid, .auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.auction-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.teddy-card {
  --rc: #b0b8c1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-bottom: 3px solid var(--rc);
  border-radius: var(--radius); padding: 12px 10px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.teddy-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--rc) 25%, transparent); }
.teddy-card.sel { box-shadow: 0 0 0 2px var(--gold2); }
.teddy-card.locked { opacity: .6; cursor: default; }
.teddy-card.auction { cursor: default; gap: 6px; }
.tc-name { font-size: .9rem; margin-top: 4px; }
.tc-wear { color: var(--muted); font-size: .74rem; }
.tc-value { font-weight: 800; color: var(--gold2); font-variant-numeric: tabular-nums; }
.tc-value.big { font-size: 1.4rem; margin-top: 6px; }
.tc-actions { display: flex; gap: 6px; margin-top: 4px; }
.tc-check { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; font-size: .75rem; color: #241c06; }
.teddy-card.sel .tc-check { background: var(--gold2); border-color: var(--gold2); }
.tc-lock { position: absolute; top: 8px; right: 8px; }
.inv-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* Kisten */
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.case-card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.case-box { height: 110px; display: grid; place-items: center; font-size: 70px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, rgba(212,175,55,.25), transparent 70%); animation: caseBob 3s ease-in-out infinite; }
@keyframes caseBob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.case-card h3 { margin: 0; text-align: center; }
.case-odds { display: flex; flex-direction: column; gap: 3px; }
.odd { display: flex; justify-content: space-between; font-size: .8rem; padding: 2px 8px; border-left: 3px solid var(--rc); background: rgba(255,255,255,.03); border-radius: 4px; }
.odd span { color: var(--rc); }
.case-preview { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }

/* Rollband */
.modal-card.wide { max-width: 860px; }
.roll-window { position: relative; overflow: hidden; height: 150px; border-radius: 14px; background: #070a09; border: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.roll-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--gold2); transform: translateX(-50%); z-index: 2; box-shadow: 0 0 12px var(--gold2); }
.roll-marker::before, .roll-marker::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 9px solid transparent; }
.roll-marker::before { top: 0; border-top-color: var(--gold2); } .roll-marker::after { bottom: 0; border-bottom-color: var(--gold2); }
.roll-strip { display: flex; gap: 8px; padding: 10px 0; transition: transform 6s cubic-bezier(.08,.6,.12,1); will-change: transform; }
.roll-tile { --rc: #b0b8c1; width: 124px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: var(--panel); border-bottom: 3px solid var(--rc); }
.roll-tile small { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px; }
.roll-result { min-height: 40px; margin-top: 14px; }
.won { display: flex; gap: 18px; align-items: center; justify-content: center; animation: popIn .5s; flex-wrap: wrap; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }

/* Upgrade */
.upgrade-layout { display: grid; grid-template-columns: 1fr minmax(240px, 300px) 1fr; gap: 16px; align-items: start; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: var(--bg2); }
.pick:hover { border-color: var(--gold-dark); }
.pick.sel { border-color: var(--gold); background: rgba(212,175,55,.1); }
.pick.disabled { opacity: .45; cursor: not-allowed; }
.pick span { display: flex; flex-direction: column; font-size: .88rem; min-width: 0; }
.pick small { color: var(--muted); font-size: .74rem; }
.upgrade-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gauge { position: relative; width: 210px; height: 210px; border-radius: 50%;
  background: conic-gradient(var(--up) 0 calc(var(--p) * 1%), rgba(239,91,91,.35) 0); display: grid; place-items: center; box-shadow: 0 0 30px rgba(0,0,0,.4); }
.gauge-inner { width: 160px; height: 160px; border-radius: 50%; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-inner b { font-size: 1.8rem; } .gauge-inner small { color: var(--muted); }
.needle { position: absolute; left: 50%; top: 0; width: 4px; height: 50%; margin-left: -2px; transform-origin: bottom center; transition: transform 4s cubic-bezier(.15,.6,.15,1); }
.needle::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top: 22px solid var(--gold2); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.up-pair { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }

/* Handel */
.search.inline { max-width: none; margin-top: .3em; }
.offer { margin-bottom: 10px; }
.offer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.offer-msg { margin: 8px 0 0; font-style: italic; color: var(--muted); }
.offer-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 10px; }
.offer-arrow { font-size: 1.6rem; color: var(--gold); }
.mini-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mini-item { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px 2px 2px; font-size: .82rem; }
.mini-item:not(:has(.teddy-art)) { padding: 4px 8px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tb-list { max-height: 280px; margin-bottom: 8px; }
.au-info { display: flex; justify-content: space-between; width: 100%; gap: 8px; text-align: left; }
.au-info div { display: flex; flex-direction: column; }
.au-info b { font-variant-numeric: tabular-nums; }
.teddy-card.auction input { padding: .35em .5em; }

/* ================= Belohnungen ================= */
.daily-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.daily-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); text-align: center; }
.daily-day small { color: var(--muted); font-size: .7rem; }
.daily-day b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.daily-day .dd-ico { font-size: 26px; }
.daily-day.done { opacity: .55; }
.daily-day.today { border-color: var(--gold); box-shadow: 0 0 16px rgba(212,175,55,.35); background: rgba(212,175,55,.08); animation: pulseBtn 1.4s infinite; }
.daily-day.big { background: radial-gradient(circle at 50% 30%, rgba(212,175,55,.2), var(--bg2)); }
.quest { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.quest:last-child { border-bottom: 0; }
.quest.ready { background: linear-gradient(90deg, rgba(212,175,55,.08), transparent); }
.quest.claimed { opacity: .6; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); opacity: .75; }
.ach.got { opacity: 1; border-color: rgba(212,175,55,.5); background: linear-gradient(135deg, rgba(212,175,55,.1), var(--panel)); }
.ach-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--bg2); flex: none; filter: grayscale(1); }
.ach.got .ach-ico { filter: none; background: radial-gradient(circle, rgba(212,175,55,.35), var(--bg2)); }
.ach .h-main { min-width: 0; }
.ach .h-main small { display: block; }
.ach .h-main .ach-reward { color: var(--gold2); font-weight: 700; font-size: .75rem; margin-top: 4px; }
.ach-popup {
  position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: 120; display: flex; gap: 14px; align-items: center;
  padding: 14px 20px; border-radius: 16px; background: linear-gradient(135deg, #2a2208, #141b18); border: 1px solid var(--gold);
  box-shadow: 0 0 40px rgba(212,175,55,.4), var(--shadow); animation: achIn .5s cubic-bezier(.2,1.4,.4,1);
}
.ach-popup .ach-ico { filter: none; background: radial-gradient(circle, rgba(212,175,55,.5), transparent); }
.ach-popup small { color: var(--gold); letter-spacing: .15em; font-size: .65rem; display: block; }
.ach-popup b { display: block; font-size: 1.1rem; }
.ach-popup span { color: var(--muted); font-size: .85rem; }
.ach-popup.out { transition: opacity .5s, transform .5s; opacity: 0; transform: translate(-50%, -20px); }
@keyframes achIn { from { opacity: 0; transform: translate(-50%, -30px) scale(.8); } }
.event-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 6px 12px; font-size: .85rem; font-weight: 700;
  background: linear-gradient(90deg, #3b1d6b, #6b2a8a, #3b1d6b); color: #f4e6ff; }
.event-bar a:hover { text-decoration: underline; }
.event-card { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.event-card:last-child { border-bottom: 0; }
.ev-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(136,71,255,.2); flex: none; }
.season-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.season-head b { display: block; font-size: 1.2rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pbadge { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid rgba(212,175,55,.4); }
.pbadge.special { background: linear-gradient(135deg, rgba(212,175,55,.3), rgba(212,175,55,.08)); border-color: var(--gold); font-weight: 700; }
@media (max-width: 760px) {
  .daily-row { grid-template-columns: repeat(4, 1fr); }
}

.mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-top: 10px; }
.mini-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.mini-bars span { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--gold2), var(--gold-dark)); }
.mini-bars small { font-size: .6rem; color: var(--muted); }

/* ================= Bank ================= */
.bank-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.bank-card {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; min-height: 220px; color: #f6efd6;
  display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(circle at 85% 15%, rgba(243,215,122,.35), transparent 40%),
    radial-gradient(circle at 10% 110%, rgba(31,138,76,.45), transparent 55%),
    linear-gradient(135deg, #10241b, #0b1512 55%, #1d1a0c);
  border: 1px solid rgba(212,175,55,.45); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.bank-card::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.025) 18px 19px); pointer-events: none; }
.bc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bc-logo { font: 800 1.1rem Cinzel, serif; letter-spacing: .18em; color: var(--gold2); }
.bc-chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #f3d77a, #b8891d); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); position: relative; }
.bc-chip::before { content: ""; position: absolute; inset: 8px 0; border-top: 1px solid rgba(0,0,0,.3); border-bottom: 1px solid rgba(0,0,0,.3); }
.bank-card small { letter-spacing: .15em; opacity: .7; font-size: .7rem; }
.bc-balance { font: 800 2.2rem Inter, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.bc-interest { color: var(--up); font-variant-numeric: tabular-nums; font-size: .9rem; }
.bc-interest small { color: #cfe8d7; letter-spacing: 0; }
.bc-bottom { margin-top: auto; display: flex; justify-content: space-between; font: 600 .9rem 'Courier New', monospace; letter-spacing: .08em; opacity: .85; padding-top: 14px; }
.offer-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; border-top: 3px solid var(--gold); }
.offer-card.loan { border-top-color: #4b69ff; }
.oc-rate { font: 800 2rem Inter, sans-serif; color: var(--gold2); }
.offer-card.loan .oc-rate { color: #8fa6ff; }
.emergency { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-color: var(--gold); flex-wrap: wrap; }
.emergency.red { border-color: var(--red); }
.emergency h3 { margin: 0; }
.emergency p { margin: 4px 0 0; }
.emergency .btn { margin-left: auto; }
.loan-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.loan-row:last-child { border-bottom: 0; }

@media (max-width: 1000px) {
  .bank-top { grid-template-columns: 1fr; }
  .upgrade-layout { grid-template-columns: 1fr; }
  .upgrade-mid { order: -1; }
}
@media (max-width: 760px) {
  .teddy-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .teddy-art { width: 78px; height: 78px; } .teddy-art .tb { font-size: 46px; }
  .trade-cols, .offer-sides { grid-template-columns: 1fr; }
  .offer-arrow { transform: rotate(90deg); justify-self: center; }
  .inv-sum { align-items: flex-start; }
}