/* RABATZ! – Oberfläche */
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #12142b; --bg-a: #2f74e8; --bg-b: #142a78; --panel: #2a55c4; --panel2: #1b3a92; --panel3: #3b6ee0;
  --yellow: #ffd23f; --yellow-d: #d99a00; --blue: #3aa0ff; --blue-d: #1a64c8; --red: #ff4f5e; --red-d: #c3202f;
  --green: #3fd26a; --green-d: #1e9a42; --orange: #ff8a3d; --purple: #b45cff; --gray: #8f95b2; --gray-d: #5d6380;
  --text: #fff; --muted: #c2d8ff;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: clamp(10px, min(3.3vh, 1.45vw), 19px); }
@media (orientation: portrait) { html { font-size: clamp(10px, 2.4vw, 17px); } }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg-b); color: var(--text); font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif; font-weight: 600; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
body { background: radial-gradient(85% 75% at 50% 42%, #6ec0ff 0%, var(--bg-a) 32%, #1d48b8 62%, var(--bg-b) 100%); }
body::before { content: ''; position: fixed; inset: -10%; background: repeating-linear-gradient(-30deg, rgba(255,255,255,0.05) 0 1.8rem, transparent 1.8rem 3.6rem); pointer-events: none; animation: stripes 40s linear infinite; }
@keyframes stripes { to { transform: translateX(7.2rem); } }
body.ingame::before { display: none; }
#gl { position: fixed; inset: 0; z-index: 0; display: block; }
#ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#ui > * { pointer-events: auto; }
#hud { position: fixed; inset: 0; z-index: 3; }
button { font-family: inherit; font-weight: 700; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }
img { -webkit-user-drag: none; }
a { color: var(--yellow); }
input { user-select: text; -webkit-user-select: text; }
.t { text-shadow: 0 0.14em 0 var(--ink), 0.08em 0.08em 0 var(--ink), -0.08em 0.08em 0 var(--ink), 0.08em -0.06em 0 var(--ink), -0.08em -0.06em 0 var(--ink); letter-spacing: 0.02em; }
.ic { display: inline-flex; width: 1.6em; height: 1.6em; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.small { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.grow { flex: 1; }

/* ---------- Knöpfe */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.55em 1.2em; border-radius: 0.8rem; border: 0.18rem solid var(--ink); font-size: 1.05rem; color: #fff; background: linear-gradient(#ffe36b, var(--yellow)); box-shadow: 0 0.32rem 0 var(--yellow-d), 0 0.5rem 0 var(--ink); transform: translateY(-0.15rem); transition: transform .06s, box-shadow .06s, filter .1s; text-shadow: 0 0.12em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink), 0.07em -0.05em 0 var(--ink), -0.07em -0.05em 0 var(--ink); white-space: nowrap; }
.btn:active { transform: translateY(0.18rem); box-shadow: 0 0.05rem 0 var(--yellow-d), 0 0.15rem 0 var(--ink); }
.btn.blue { background: linear-gradient(#6cc0ff, var(--blue)); box-shadow: 0 0.32rem 0 var(--blue-d), 0 0.5rem 0 var(--ink); }
.btn.blue:active { box-shadow: 0 0.05rem 0 var(--blue-d), 0 0.15rem 0 var(--ink); }
.btn.green { background: linear-gradient(#72f095, var(--green)); box-shadow: 0 0.32rem 0 var(--green-d), 0 0.5rem 0 var(--ink); }
.btn.green:active { box-shadow: 0 0.05rem 0 var(--green-d), 0 0.15rem 0 var(--ink); }
.btn.red { background: linear-gradient(#ff8590, var(--red)); box-shadow: 0 0.32rem 0 var(--red-d), 0 0.5rem 0 var(--ink); }
.btn.gray { background: linear-gradient(#b4b9d4, var(--gray)); box-shadow: 0 0.32rem 0 var(--gray-d), 0 0.5rem 0 var(--ink); }
.btn.sm { font-size: 0.85rem; padding: 0.4em 0.8em; }
.btn.disabled { filter: grayscale(0.85) brightness(0.85); }
.btn .ic { width: 1.25em; height: 1.25em; }
.btn-ic { width: 2.6rem; height: 2.6rem; display: inline-flex; filter: drop-shadow(0 0.15rem 0 var(--ink)); }
.btn-ic .ic { width: 100%; height: 100%; }
.badge { position: absolute; top: -0.45rem; right: -0.45rem; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; border-radius: 1rem; background: var(--red); border: 0.15rem solid var(--ink); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; animation: bump 1.4s infinite; z-index: 2; }
@keyframes bump { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.2); } }
.card { background: linear-gradient(var(--panel3), var(--panel)); border: 0.18rem solid var(--ink); border-radius: 1rem; box-shadow: 0 0.35rem 0 rgba(0,0,0,0.35), inset 0 0.15rem 0 rgba(255,255,255,0.15); }
.bar { position: relative; height: 0.75rem; border-radius: 1rem; background: rgba(0,0,0,0.45); border: 0.13rem solid var(--ink); overflow: hidden; flex: 1; min-width: 3rem; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#8fd2ff, var(--blue)); border-radius: 1rem; }
.bar.gold > i { background: linear-gradient(#ffe680, var(--yellow)); }
.bar.orange > i { background: linear-gradient(#ffc08a, var(--orange)); }
.bar.green > i { background: linear-gradient(#a2f7b8, var(--green)); }
.pill { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(15,8,45,0.72); border: 0.15rem solid var(--ink); border-radius: 1.2rem; padding: 0.15rem 0.8rem 0.15rem 0.2rem; font-size: 1rem; min-width: 5.5rem; }
.pill .ic { width: 1.7rem; height: 1.7rem; margin-left: -0.6rem; filter: drop-shadow(0 0.1rem 0 var(--ink)); }
.cur { display: flex; gap: 1rem; align-items: center; padding-left: 0.6rem; }
.rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.25rem; background: linear-gradient(#ffe680, #e7a800); border: 0.15rem solid var(--ink); border-radius: 0.4rem; transform: rotate(45deg); font-size: 0.8rem; color: var(--ink); }
.rank { transform: none; clip-path: polygon(50% 0, 100% 30%, 100% 75%, 50% 100%, 0 75%, 0 30%); border: none; padding: 0 0.4rem; }
.lvl { background: var(--purple); border: 0.15rem solid var(--ink); border-radius: 0.5rem; padding: 0.05rem 0.5rem; font-size: 0.8rem; }

/* ---------- Ladebildschirm & Meldungen */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: radial-gradient(circle at 50% 40%, #6ec0ff, var(--bg-b)); }
#loading[hidden] { display: none; }
.logo { font-size: 5rem; font-weight: 700; color: var(--yellow); transform: rotate(-4deg); letter-spacing: 0.04em; text-shadow: 0 0.09em 0 var(--ink), 0.05em 0.05em 0 var(--ink), -0.05em 0.05em 0 var(--ink), 0.05em -0.05em 0 var(--ink), -0.05em -0.05em 0 var(--ink), 0 0.2em 0 rgba(0,0,0,0.3); }
.logo span { color: #fff; }
.load-txt { font-size: 1.1rem; color: var(--muted); max-width: 30rem; text-align: center; padding: 0 1rem; }
.spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0.4rem solid rgba(255,255,255,0.2); border-top-color: var(--yellow); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; top: 14%; z-index: 80; transform: translate(-50%, -1rem) scale(0.9); opacity: 0; pointer-events: none; background: rgba(15,8,45,0.92); border: 0.18rem solid var(--ink); border-radius: 0.9rem; padding: 0.6rem 1.2rem; font-size: 1.05rem; transition: all .2s; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast.bad { background: #8a1f2f; } #toast.good { background: #1d7a3e; }
#netbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: var(--red); text-align: center; padding: 0.3rem; font-size: 0.9rem; border-bottom: 0.15rem solid var(--ink); }
#netbar[hidden] { display: none; }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) { body.ingame #rotate { display: flex; position: fixed; inset: 0; z-index: 70; background: rgba(20,10,60,0.94); align-items: center; justify-content: center; flex-direction: column; gap: 1rem; font-size: 1.4rem; text-align: center; padding: 2rem; } }
.rot-ic { font-size: 3.5rem; animation: rot 2s infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---------- Dialoge */
#modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; }
#modal.show { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(10,5,35,0.7); }
.modal-card { position: relative; width: min(32rem, 92vw); max-height: 90vh; overflow: auto; padding: 1.2rem 1.4rem 1.4rem; animation: pop .25s; }
.modal-card.wide { width: min(46rem, 94vw); }
.modal-title { font-size: 1.6rem; text-align: center; margin-bottom: 0.6rem; color: var(--yellow); }
.modal-body { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.modal-body p { margin: 0.5rem 0; }
.modal-btns { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.inp { width: 100%; font: inherit; font-size: 1.1rem; padding: 0.6rem 0.8rem; margin: 0.35rem 0; border-radius: 0.6rem; border: 0.18rem solid var(--ink); background: #fff; color: var(--ink); outline: none; }
.inp.code { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-size: 1.4rem; width: 10rem; }
.warn { background: #6a1f2f; border-radius: 0.6rem; padding: 0.5rem 0.7rem; }
.buy-prev { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }

/* ---------- Lobby */
.lobby { position: absolute; inset: 0; padding: calc(0.8rem + var(--sat)) calc(1rem + var(--sar)) calc(1rem + var(--sab)) calc(1rem + var(--sal)); pointer-events: none !important; }
.lobby > * { position: absolute; pointer-events: auto; }
.lb-tl { top: calc(0.8rem + var(--sat)); left: calc(1rem + var(--sal)); display: flex; flex-direction: column; gap: 0.5rem; }
.profile { display: flex; align-items: center; gap: 0.6rem; background: rgba(15,8,45,0.6); border: 0.18rem solid var(--ink); border-radius: 0.9rem; padding: 0.25rem 1rem 0.25rem 0.25rem; cursor: pointer; }
.pf-ic { width: 3rem; height: 3rem; border-radius: 0.6rem; background: var(--panel3); border: 0.15rem solid var(--ink); object-fit: cover; }
.pf-name { font-size: 1.1rem; }
.pf-tr { display: flex; align-items: center; gap: 0.3rem; font-size: 1.1rem; }
.pf-tr .ic { width: 1.4rem; height: 1.4rem; }
.roadmini { position: relative; display: flex; align-items: center; gap: 0.4rem; width: 15rem; background: rgba(15,8,45,0.6); border: 0.15rem solid var(--ink); border-radius: 0.8rem; padding: 0.25rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.roadmini .ic { width: 1.3rem; height: 1.3rem; }
.lb-tr { top: calc(0.8rem + var(--sat)); right: calc(1rem + var(--sar)); display: flex; align-items: center; gap: 0.8rem; }
.lb-left { left: calc(1rem + var(--sal)); top: 9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.menu-btn { position: relative; display: flex; align-items: center; gap: 0.5rem; width: 10.5rem; padding: 0.4rem 0.6rem; border-radius: 0.9rem; background: linear-gradient(var(--panel3), var(--panel2)); border: 0.18rem solid var(--ink); box-shadow: 0 0.3rem 0 rgba(0,0,0,0.4); font-size: 1.05rem; }
.menu-btn:active { transform: translateY(0.2rem); box-shadow: none; }
.menu-btn .ic { width: 2.2rem; height: 2.2rem; }
.lb-right { right: calc(1rem + var(--sar)); top: 5rem; display: flex; flex-direction: column; gap: 0.7rem; width: 12.5rem; }
.card.side { position: relative; padding: 0.5rem 0.7rem; cursor: pointer; }
.card.side:active { transform: translateY(0.15rem); }
.sc-h { display: flex; align-items: center; gap: 0.4rem; font-size: 1.05rem; }
.sc-h .ic { width: 1.8rem; height: 1.8rem; }
.sc-s { font-size: 0.85rem; color: var(--muted); margin: 0.15rem 0 0.3rem; }
.pass-card { background: linear-gradient(#ff9a4d, #e2602a); }
.pass-card .sc-s { color: #ffe9d6; }
.lb-hero { left: 30%; right: 30%; top: 18%; bottom: 25%; cursor: pointer; }
.lb-heroinfo { left: 50%; bottom: calc(5.6rem + var(--sab)); transform: translateX(-50%); text-align: center; cursor: pointer; }
.hi-name { font-size: 2rem; }
.hi-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 0.2rem; }
.hi-tr { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 1.1rem; }
.hi-tr .ic { width: 1.4rem; height: 1.4rem; }
.lb-bl { left: calc(1rem + var(--sal)); bottom: calc(1rem + var(--sab)); display: flex; align-items: flex-end; gap: 0.8rem; }
.team-btn { font-size: 1.15rem; padding: 0.6em 1.1em; }
.team-btn .ic { width: 1.6em; height: 1.6em; }
.party-row { display: flex; gap: 0.4rem; }
.pm { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; max-width: 4.5rem; }
.pm img { width: 2.8rem; height: 2.8rem; border-radius: 0.6rem; background: var(--panel3); border: 0.15rem solid var(--ink); }
.pm.leader img { border-color: var(--yellow); }
.pm.big { max-width: 7rem; gap: 0.15rem; font-size: 0.9rem; }
.pm.big img { width: 4.5rem; height: 4.5rem; }
.pm em { color: var(--yellow); font-style: normal; font-size: 0.8rem; }
.lb-br { right: calc(1rem + var(--sar)); bottom: calc(1rem + var(--sab)); display: flex; align-items: flex-end; gap: 0.8rem; }
.event { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem 0.45rem 0.5rem; min-width: 13rem; border-radius: 0.9rem; border: 0.18rem solid var(--ink); background: linear-gradient(color-mix(in srgb, var(--mc) 75%, white), var(--mc)); box-shadow: 0 0.3rem 0 rgba(0,0,0,0.4); cursor: pointer; }
.ev-ic { width: 2.8rem; height: 2.8rem; filter: drop-shadow(0 0.12rem 0 var(--ink)); }
.ev-mode { font-size: 1.15rem; }
.ev-map { font-size: 0.85rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 0 var(--ink); }
.ev-chg { position: absolute; top: -0.65rem; right: 0.6rem; background: var(--ink); color: var(--yellow); font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 0.4rem; }
.btn.play { font-size: 2rem; padding: 0.45em 1.1em; min-width: 13rem; border-radius: 1rem; }
.btn.play.searching { background: linear-gradient(#b4b9d4, var(--gray)); box-shadow: 0 0.32rem 0 var(--gray-d), 0 0.5rem 0 var(--ink); flex-direction: column; gap: 0; font-size: 1.3rem; padding: 0.35em 1em; }
.queue-info { font-size: 0.9rem; }
.btn.play .cancel { position: absolute; top: -0.7rem; right: -0.7rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--red); border: 0.15rem solid var(--ink); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }

/* ---------- Allgemeine Bildschirme */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(0.6rem + var(--sat)) calc(1rem + var(--sar)) calc(0.6rem + var(--sab)) calc(1rem + var(--sal)); background: radial-gradient(120% 100% at 50% 30%, rgba(80,150,255,0.55), rgba(20,42,120,0.88)); }
.hero-scr { background: linear-gradient(90deg, transparent 0 38%, rgba(42,21,128,0.75) 60%); }
.scr-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; flex: none; }
.btn-back { width: 2.8rem; height: 2.8rem; border-radius: 0.8rem; background: linear-gradient(var(--panel3), var(--panel2)); border: 0.18rem solid var(--ink); box-shadow: 0 0.25rem 0 rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.btn-back .ic { width: 1.6rem; height: 1.6rem; }
.btn-back:active { transform: translateY(0.15rem); box-shadow: none; }
.scr-title { font-size: 1.8rem; }
.scr-sub { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.5rem; font-weight: 500; text-align: center; }
.season-name { font-size: 1rem; color: var(--yellow); }

/* Heldenliste */
.hero-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.8rem; padding: 0.4rem 0.4rem 1rem; align-content: start; grid-auto-rows: max-content; touch-action: pan-y; }
.hcard { position: relative; border-radius: 0.9rem; border: 0.18rem solid var(--ink); background: linear-gradient(color-mix(in srgb, var(--rc) 60%, #2a1d6c), #2a1d6c 70%); box-shadow: 0 0.3rem 0 rgba(0,0,0,0.4); padding: 0.35rem; cursor: pointer; text-align: center; overflow: hidden; }
.hcard.sel { outline: 0.25rem solid var(--yellow); }
.hcard.locked .hc-por { filter: brightness(0) opacity(0.55); }
.hcard:active { transform: scale(0.97); }
.hc-top { display: flex; justify-content: space-between; align-items: center; height: 1.6rem; font-size: 0.85rem; }
.hc-tr { display: inline-flex; align-items: center; gap: 0.15rem; }
.hc-tr .ic { width: 1.1rem; height: 1.1rem; }
.hc-por { width: 100%; height: 7.6rem; object-fit: contain; display: block; }
.hc-name { font-size: 1.1rem; margin-top: -0.4rem; }
.hc-lvl { font-size: 0.8rem; color: var(--muted); }
.hc-lock { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 0.2rem; min-height: 2rem; }
.hc-lock .ic { width: 1rem; height: 1rem; }

/* Held im Detail */
.hs-body { flex: 1; display: flex; gap: 1rem; min-height: 0; }
.hs-left { flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; padding-top: 0.4rem; cursor: pointer; }
.rar { padding: 0.15rem 0.8rem; border-radius: 0.5rem; border: 0.15rem solid var(--ink); font-size: 0.85rem; text-shadow: 0 1px 0 var(--ink); }
.hs-role { font-size: 1.2rem; }
.hs-panel { flex: 1; overflow-y: auto; padding: 0.7rem 0.9rem; touch-action: pan-y; }
.bio { margin: 0 0 0.6rem; font-weight: 500; color: var(--muted); font-size: 0.92rem; }
.stats { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.stat { flex: 1; background: rgba(0,0,0,0.25); border-radius: 0.6rem; padding: 0.3rem 0.5rem; display: flex; flex-direction: column; font-size: 0.95rem; }
.stat b { font-size: 0.75rem; color: var(--muted); }
em { color: var(--green); font-style: normal; }
.abil { background: rgba(0,0,0,0.22); border-radius: 0.7rem; padding: 0.45rem 0.6rem; margin-bottom: 0.5rem; }
.abil p { margin: 0.2rem 0; font-size: 0.85rem; font-weight: 500; }
.ab-h { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.ab-tag { font-size: 0.65rem; background: var(--blue); border: 0.12rem solid var(--ink); border-radius: 0.35rem; padding: 0.05rem 0.35rem; }
.ab-tag.y { background: var(--yellow-d); } .ab-tag.g { background: var(--green-d); } .ab-tag.p { background: var(--purple); }
.ab-v { font-size: 0.85rem; color: #fff; }
.abil.ex.on { box-shadow: inset 0 0 0 0.15rem var(--green); }
.ab-lock, .ab-ok { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.ab-lock .ic, .ab-ok .ic { width: 1.1rem; height: 1.1rem; }
.skins { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.skin { width: 7rem; background: rgba(0,0,0,0.25); border-radius: 0.7rem; border: 0.15rem solid transparent; padding: 0.25rem; text-align: center; font-size: 0.75rem; cursor: pointer; display: flex; flex-direction: column; }
.skin.active { border-color: var(--yellow); }
.skin.notown { opacity: 0.75; }
.skin em { color: var(--muted); font-size: 0.7rem; }
.sk-por { width: 100%; height: 6rem; object-fit: contain; }
.hs-foot { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; padding-top: 0.6rem; flex: none; flex-wrap: wrap; }
.btn.upg { flex-direction: column; gap: 0.1rem; }
.btn.upg .cost { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; }
.btn.upg .cost .ic { width: 1.1rem; height: 1.1rem; }
.maxed, .chosen { font-size: 1.1rem; color: var(--yellow); }
.lockinfo { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--muted); }

/* Belohnungs-Anzeige */
.rw { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.85rem; min-width: 3.5rem; text-align: center; }
.rw .rw-ic { width: 2.2rem; height: 2.2rem; filter: drop-shadow(0 0.12rem 0 var(--ink)); }
.rw.big .rw-ic { width: 4rem; height: 4rem; }
.rw.big { font-size: 1.15rem; }
.rw-por { width: 3rem; height: 3rem; object-fit: contain; }
.rw.big .rw-por { width: 7rem; height: 7rem; }
.rw-ic.box-gross svg path, .rw-ic.box-gross svg rect { filter: hue-rotate(60deg); }
.rw-ic.box-mega svg { filter: hue-rotate(140deg) saturate(1.4); }
.rw-ic.box-gross svg { filter: hue-rotate(50deg) saturate(1.2); }

/* Shop */
.shop { flex: 1; overflow-y: auto; padding: 0 0.3rem 1rem; touch-action: pan-y; }
.shop-sec { margin-bottom: 1rem; }
.ss-title { font-size: 1.2rem; margin: 0.2rem 0 0.5rem; }
.ss-row { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.6rem 0.2rem 0.8rem; touch-action: pan-x; }
.offer { position: relative; flex: none; width: 10rem; border-radius: 1rem; border: 0.18rem solid var(--ink); background: linear-gradient(#5a46c8, #34258a); box-shadow: 0 0.35rem 0 rgba(0,0,0,0.4); cursor: pointer; display: flex; flex-direction: column; overflow: hidden; }
.offer:active { transform: translateY(0.15rem); }
.offer.sold { filter: grayscale(0.8) brightness(0.7); }
.o-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem 0.4rem 0.6rem; min-height: 8rem; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.22), transparent 70%); }
.o-price { background: var(--green); border-top: 0.18rem solid var(--ink); padding: 0.35rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 1.05rem; text-shadow: 0 0.1em 0 var(--ink); }
.o-price .ic { width: 1.4rem; height: 1.4rem; }
.otag { position: absolute; top: 0.3rem; left: -0.2rem; background: var(--red); border: 0.15rem solid var(--ink); border-radius: 0 0.5rem 0.5rem 0; padding: 0.05rem 0.5rem; font-size: 0.8rem; z-index: 1; }
.shop-note { font-size: 0.85rem; color: var(--muted); font-weight: 500; text-align: center; max-width: 40rem; margin: 0.5rem auto; }

/* Truhen */
.box-list { display: flex; gap: 1rem; justify-content: center; align-items: stretch; flex-wrap: wrap; padding: 1rem 0; flex: 1; align-content: center; }
.boxcard { width: 13rem; padding: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.boxcard.empty { opacity: 0.6; }
.chest-wrap { width: 8rem; height: 7rem; }
.chest { width: 100%; height: 100%; overflow: visible; }
.bc-name { font-size: 1.2rem; }
.bc-n { font-size: 1.5rem; color: var(--yellow); }
.bc-info { font-size: 0.75rem; color: var(--muted); min-height: 2em; }
.boxopen { position: fixed; inset: 0; z-index: 55; background: radial-gradient(circle at 50% 50%, #5a3be0, #160a40 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.boxopen.kind-mega { background: radial-gradient(circle at 50% 50%, #e0405a, #2a0a20 75%); }
.boxopen.kind-gross { background: radial-gradient(circle at 50% 50%, #9a4be0, #1c0a40 75%); }
.bo-rays { position: absolute; width: 200vmax; height: 200vmax; background: repeating-conic-gradient(rgba(255,255,255,0.09) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; }
.bo-rays.gold { background: repeating-conic-gradient(rgba(255,210,63,0.25) 0 10deg, transparent 10deg 20deg); }
.bo-chest { width: 16rem; height: 14rem; animation: wobble 1.2s ease-in-out infinite; position: relative; }
.bo-chest.open { animation: shake 0.5s; }
.bo-chest.open .ch-lid { transform: translateY(-40px) rotate(-14deg); transform-origin: 10px 50px; transition: transform 0.5s cubic-bezier(.3,1.6,.6,1) 0.3s; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.05); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-12px) rotate(-5deg); } 40% { transform: translateX(12px) rotate(5deg); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } }
.bo-hint { position: relative; font-size: 1.5rem; margin-top: 1rem; animation: bump 1.2s infinite; }
.bo-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.bo-item .rw.big { font-size: 2rem; text-shadow: 0 0.1em 0 var(--ink); }
.bo-item .rw.big .rw-ic { width: 8rem; height: 8rem; }
.bo-item .rw.big .rw-por { width: 14rem; height: 14rem; }
.bo-new { font-size: 2.2rem; }
.bo-rar { padding: 0.2rem 1rem; border: 0.15rem solid var(--ink); border-radius: 0.6rem; font-size: 1.1rem; }
.pop { animation: pop 0.35s cubic-bezier(.3,1.6,.6,1); }
.bo-count { position: absolute; bottom: 1.5rem; font-size: 1rem; color: var(--muted); }
.bo-sum { position: relative; padding: 1rem 1.5rem; min-width: 20rem; text-align: center; }
.bo-st { font-size: 1.6rem; color: var(--yellow); margin-bottom: 0.8rem; }
.bo-grid { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Pass */
.pass-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.4rem; flex: none; }
.pt-tier { font-size: 1.5rem; color: var(--orange); }
.pt-prog { flex: 1; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.prem-on { color: var(--yellow); font-size: 1.2rem; }
.pass-rows { position: relative; height: 0; }
.pr-label { position: absolute; left: 0; font-size: 0.7rem; writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.3rem 0.1rem; border-radius: 0.3rem; z-index: 2; }
.pr-label.prem { top: 0.7rem; background: var(--yellow-d); } .pr-label.free { top: 9.6rem; background: var(--blue-d); }
.pass-track { flex: 1; display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.5rem 0.4rem 0.8rem 1.6rem; align-items: center; touch-action: pan-x; }
.pt-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 7rem; }
.pt-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--panel2); border: 0.18rem solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.pt-col.reached .pt-num { background: var(--orange); }
.pt-col.current .pt-num { outline: 0.2rem solid #fff; }
.pt-cell { position: relative; width: 100%; height: 8rem; border-radius: 0.8rem; border: 0.18rem solid var(--ink); display: flex; align-items: center; justify-content: center; background: linear-gradient(#4a3aae, #2a1d6c); box-shadow: 0 0.25rem 0 rgba(0,0,0,0.35); }
.pt-cell.prem { background: linear-gradient(#ffcf6a, #e08a1a); }
.pt-cell.locked { filter: brightness(0.6); }
.pt-cell.done { filter: grayscale(0.5) brightness(0.8); }
.pt-cell.ready { animation: glow 1s infinite alternate; cursor: pointer; }
@keyframes glow { from { box-shadow: 0 0 0 0.15rem #fff, 0 0.25rem 0 rgba(0,0,0,0.35); } to { box-shadow: 0 0 1rem 0.3rem #fff, 0 0.25rem 0 rgba(0,0,0,0.35); } }
.pt-check, .pt-lock { position: absolute; right: -0.4rem; bottom: -0.4rem; width: 1.8rem; height: 1.8rem; }
.pt-check svg, .pt-lock svg { width: 100%; height: 100%; }

/* Pokalpfad */
.road-track { position: relative; flex: 1; display: flex; gap: 1.2rem; overflow-x: auto; padding: 1rem 1rem 1rem; align-items: center; touch-action: pan-x; }
.rd-line { position: absolute; left: 1rem; top: 50%; height: 0.8rem; width: calc(var(--n, 28) * 9.2rem); background: rgba(0,0,0,0.4); border-radius: 1rem; display: none; }
.rd-step { flex: none; width: 8rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.rd-at { display: flex; align-items: center; gap: 0.2rem; font-size: 1.1rem; }
.rd-at .ic { width: 1.4rem; height: 1.4rem; }
.rd-rw { position: relative; width: 100%; height: 9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; }
.rd-step:not(.reached) .rd-rw { filter: brightness(0.6); }
.rd-step.done .rd-rw { filter: grayscale(0.6) brightness(0.8); }
.rd-step.ready .rd-rw { animation: glow 1s infinite alternate; cursor: pointer; }
.rd-claim { background: var(--green); border: 0.15rem solid var(--ink); border-radius: 0.5rem; padding: 0.05rem 0.5rem; font-size: 0.8rem; }

/* Quests & Rangliste */
.quest-list { display: flex; flex-direction: column; gap: 0.8rem; max-width: 40rem; width: 100%; margin: 0 auto; overflow-y: auto; }
.quest { padding: 0.7rem 1rem; }
.quest.done { filter: brightness(0.8); }
.q-txt { font-size: 1.05rem; margin-bottom: 0.4rem; }
.q-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; font-size: 0.9rem; }
.q-rw { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.q-rw .ic, .q-ok .ic { width: 1.4rem; height: 1.4rem; }
.board { flex: 1; overflow-y: auto; max-width: 40rem; width: 100%; margin: 0 auto; padding: 0.6rem; touch-action: pan-y; }
.bd-me { text-align: center; color: var(--yellow); margin-bottom: 0.5rem; }
.bd-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem; border-radius: 0.6rem; }
.bd-row:nth-child(even) { background: rgba(0,0,0,0.18); }
.bd-row.me { background: rgba(255,210,63,0.3); }
.bd-row img { width: 2.2rem; height: 2.2rem; border-radius: 0.4rem; background: var(--panel2); }
.bd-pos { width: 2rem; text-align: center; }
.bd-row.top1 .bd-pos { color: var(--yellow); } .bd-row.top2 .bd-pos { color: #d9e2f0; } .bd-row.top3 .bd-pos { color: #e8a26a; }
.bd-name { flex: 1; }
.bd-tr { display: inline-flex; align-items: center; gap: 0.2rem; }
.bd-tr .ic { width: 1.3rem; height: 1.3rem; }

/* Modi */
.mode-grid { flex: 1; display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.4rem 0.2rem 0.8rem; align-items: stretch; touch-action: pan-x; }
.mode-card { flex: none; width: 12.5rem; border-radius: 1rem; border: 0.18rem solid var(--ink); background: linear-gradient(color-mix(in srgb, var(--mc) 70%, #fff 0%), color-mix(in srgb, var(--mc) 55%, #1b0f3b)); box-shadow: 0 0.35rem 0 rgba(0,0,0,0.4); padding: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; cursor: pointer; text-align: center; }
.mode-card.sel { outline: 0.25rem solid #fff; }
.mc-head { display: flex; align-items: center; gap: 0.4rem; font-size: 1.15rem; }
.mc-head .ic { width: 2rem; height: 2rem; }
.minimap { max-width: 100%; max-height: 11rem; border: 0.15rem solid var(--ink); border-radius: 0.4rem; image-rendering: pixelated; }
.mc-map { font-size: 1rem; }
.mc-desc { font-size: 0.8rem; font-weight: 500; flex: 1; }
.mc-ppl { font-size: 0.75rem; background: rgba(0,0,0,0.3); border-radius: 0.4rem; padding: 0.1rem 0.5rem; }

/* Team */
.team-dlg { text-align: center; }
.team-code { font-size: 2.6rem; letter-spacing: 0.25em; color: var(--yellow); margin: 0.4rem 0; cursor: pointer; }
.team-mem { display: flex; gap: 1rem; justify-content: center; margin: 0.8rem 0; }
.join-row { display: flex; gap: 0.8rem; justify-content: center; align-items: center; margin-top: 0.8rem; }

/* Einstellungen */
.settings { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; max-width: 42rem; width: 100%; margin: 0 auto; touch-action: pan-y; }
.set-card { padding: 0.7rem 1rem; }
.set-h { font-size: 1.2rem; margin-bottom: 0.4rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 1rem; }
.set-row.links { justify-content: flex-start; gap: 1.5rem; }
.set-help { font-size: 0.85rem; color: var(--muted); font-weight: 500; margin-top: 0.4rem; }
.tog { min-width: 4.5rem; padding: 0.3rem 0.6rem; border-radius: 1rem; background: var(--gray-d); border: 0.15rem solid var(--ink); font-size: 0.9rem; }
.tog.on { background: var(--green); }
.seg { display: flex; border: 0.15rem solid var(--ink); border-radius: 0.7rem; overflow: hidden; }
.seg button { padding: 0.3rem 0.7rem; background: var(--panel2); font-size: 0.85rem; }
.seg button.on { background: var(--yellow-d); }

/* Ergebnis */
.results { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(0.6rem + var(--sat)) 1rem calc(0.8rem + var(--sab)); background: linear-gradient(90deg, rgba(42,21,128,0.15) 0 18%, rgba(42,21,128,0.9) 32%); }
.results.win .rs-title { color: var(--yellow); }
.results.loss .rs-title { color: #ff9aa4; }
.results.draw .rs-title { color: #d0d6ff; }
.rs-title { font-size: 3.2rem; animation: pop .4s; }
.rs-sub { color: var(--muted); margin-bottom: 0.6rem; }
.rs-body { flex: 1; display: flex; gap: 1rem; width: min(100%, 66rem); min-height: 0; padding-left: 24%; align-items: center; }
.rs-teams { flex: 1; display: flex; gap: 0.6rem; align-items: center; }
.rs-team { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.rs-vs { font-size: 1.4rem; }
.rs-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; touch-action: pan-y; }
.rs-solo { display: flex; align-items: center; gap: 0.5rem; }
.rs-solo > span { width: 2.4rem; font-size: 1.1rem; }
.rs-solo .rs-p { flex: 1; }
.rs-p { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.7rem; border: 0.15rem solid var(--ink); background: rgba(58,160,255,0.35); }
.rs-team.red .rs-p { background: rgba(255,79,94,0.35); }
.rs-list .rs-p { background: rgba(255,255,255,0.12); }
.rs-p.me { box-shadow: 0 0 0 0.18rem var(--yellow); }
.rs-p img { width: 2.6rem; height: 2.6rem; border-radius: 0.5rem; background: rgba(0,0,0,0.3); }
.rs-pn { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rs-pn b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pn span { font-size: 0.7rem; color: var(--muted); }
.rs-mvp { position: absolute; top: -0.5rem; right: 0.5rem; background: var(--yellow-d); border: 0.12rem solid var(--ink); border-radius: 0.4rem; padding: 0 0.35rem; font-size: 0.75rem; }
.rs-k { font-size: 0.85rem; }
.rs-rewards { width: 14rem; flex: none; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; max-height: 100%; }
.rs-rw { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.rs-rw img { width: 3.2rem; height: 3.2rem; }
.rs-rw .ic { width: 1.8rem; height: 1.8rem; }
.rs-rw b { font-size: 1.2rem; }
.rs-rw.q { font-size: 0.8rem; background: rgba(0,0,0,0.25); border-radius: 0.5rem; padding: 0.2rem 0.4rem; }
.rs-rw.gold { color: var(--yellow); }
.rs-trd { display: flex; align-items: center; gap: 0.3rem; font-size: 1.8rem; }
.rs-trd.up { color: var(--yellow); } .rs-trd.down { color: #ff9aa4; }
.rs-btns { display: flex; gap: 1rem; margin-top: 0.8rem; }
.rs-btns .btn { font-size: 1.4rem; min-width: 10rem; }

/* ---------- Im Spiel */
.tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; width: 6.4rem; margin-left: -3.2rem; margin-top: -2.4rem; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.tn { font-size: 0.78rem; white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.1em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink), 0.07em -0.07em 0 var(--ink), -0.07em -0.07em 0 var(--ink); }
.rel-me .tn { color: #c8ff9c; } .rel-ally .tn { color: #b6dcff; } .rel-enemy .tn { color: #ffb6bd; }
.hpbar { position: relative; width: 100%; height: 0.95rem; background: rgba(15,8,45,0.85); border: 0.13rem solid var(--ink); border-radius: 0.35rem; overflow: hidden; }
.hpbar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#a8ff7a, #4fd23a); transition: width .12s; }
.rel-ally .hpbar > i { background: linear-gradient(#8fd2ff, #2a8ff0); }
.rel-enemy .hpbar > i { background: linear-gradient(#ff9aa4, #e8333f); }
.hpbar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; text-shadow: 0 0.1em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink); }
.hpbar.big { height: 1.3rem; width: 8rem; }
.tag.safe { width: 8rem; margin-left: -4rem; }
.ammo { display: flex; gap: 0.12rem; width: 100%; margin-top: 0.12rem; }
.ammo i { position: relative; flex: 1; height: 0.4rem; border-radius: 0.2rem; background: rgba(15,8,45,0.85); border: 0.1rem solid var(--ink); overflow: hidden; }
.ammo i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 1)); background: #e86a1a; }
.ammo i.full::after { background: #ffb23a; }
.tag.noammo .ammo { animation: shake .3s; }
.tag.super .hpbar { box-shadow: 0 0 0.5rem 0.15rem var(--yellow); }
.xtra { font-size: 0.75rem; margin-top: 0.05rem; text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.xtra.m-crystal { color: #e2c4ff; } .xtra.m-bounty { color: var(--yellow); } .xtra.m-storm { color: #9dffb0; }
.nums { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dn { position: absolute; transform: translate(-50%, -50%); font-size: 1.1rem; font-weight: 700; animation: dnUp 0.9s ease-out forwards; text-shadow: 0 0.1em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink), 0.07em -0.07em 0 var(--ink), -0.07em -0.07em 0 var(--ink); }
.dn.dmg { color: #fff; } .dn.hurt { color: #ff7a84; } .dn.heal { color: #8dff9e; font-size: 0.95rem; }
@keyframes dnUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(0.9); } }
.hud-top { position: absolute; top: calc(0.4rem + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; pointer-events: none; }
.hud-score { display: flex; gap: 0.3rem; }
.sc-team { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.8rem; border: 0.18rem solid var(--ink); font-size: 1.5rem; min-width: 5.5rem; text-shadow: 0 0.1em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink); }
.sc-team .ic { width: 1.8rem; height: 1.8rem; }
.sc-team.blue { background: linear-gradient(#6cc0ff, var(--blue-d)); border-radius: 0.8rem 0.2rem 0.2rem 0.8rem; justify-content: flex-end; }
.sc-team.red { background: linear-gradient(#ff8590, var(--red-d)); border-radius: 0.2rem 0.8rem 0.8rem 0.2rem; }
.sc-pill { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.9rem; border: 0.18rem solid var(--ink); border-radius: 0.8rem; background: rgba(15,8,45,0.75); font-size: 1.4rem; }
.sc-pill .ic { width: 1.6rem; height: 1.6rem; }
.sc-vault { display: flex; align-items: center; gap: 0.4rem; }
.sc-vault .ic { width: 2rem; height: 2rem; }
.vbar { width: 9rem; height: 1.1rem; border: 0.15rem solid var(--ink); border-radius: 0.5rem; background: rgba(15,8,45,0.8); overflow: hidden; position: relative; }
.vbar i { position: absolute; inset: 0 auto 0 0; }
.sc-vault.blue i { background: var(--blue); } .sc-vault.red i { background: var(--red); right: 0; left: auto; }
.hud-timer { font-size: 1.3rem; background: rgba(15,8,45,0.6); border-radius: 0.6rem; padding: 0 0.6rem; }
.hud-timer:empty { display: none; }
.hud-timer.low { color: #ff9aa4; animation: bump 1s infinite; }
.hud-msg { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.5); font-size: 4rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.6,1); color: var(--yellow); white-space: nowrap; }
.hud-msg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud-msg.count { font-size: 6rem; color: #fff; }
.hud-msg.blue { color: #8fd2ff; } .hud-msg.red { color: #ff9aa4; }
.hud-cd { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 3.4rem; opacity: 0; pointer-events: none; }
.hud-cd.show { opacity: 1; } .hud-cd.blue { color: #8fd2ff; } .hud-cd.red { color: #ff9aa4; }
.killfeed { position: absolute; top: calc(0.5rem + var(--sat)); right: calc(4rem + var(--sar)); display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; pointer-events: none; }
.kf { background: rgba(15,8,45,0.7); border-radius: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.8rem; animation: pop .2s; }
.kf-me { color: #c8ff9c; } .kf-ally { color: #8fd2ff; } .kf-enemy { color: #ff9aa4; } .kf-storm { color: #9dffb0; }
.respawn { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 1.8rem; background: rgba(15,8,45,0.6); padding: 0.4rem 1.2rem; border-radius: 1rem; pointer-events: none; }
.respawn b { color: var(--yellow); font-size: 2.4rem; }
.hud-info { position: absolute; left: calc(0.6rem + var(--sal)); top: calc(0.4rem + var(--sat)); font-size: 0.7rem; color: rgba(255,255,255,0.7); pointer-events: none; }
.hud-menu { position: absolute; top: calc(0.5rem + var(--sat)); right: calc(0.8rem + var(--sar)); width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: rgba(15,8,45,0.7); border: 0.15rem solid var(--ink); font-size: 0.9rem; z-index: 5; }

/* Steuerung */
.ctrl { position: absolute; inset: 0; pointer-events: none; }
.joy-base { position: absolute; left: 0; top: 0; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; background: rgba(255,255,255,0.12); border: 0.2rem solid rgba(255,255,255,0.35); opacity: 0; transition: opacity .1s; }
.joy-base.on { opacity: 1; }
.joy-base.aim { background: rgba(255,210,63,0.12); border-color: rgba(255,210,63,0.4); }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: rgba(255,255,255,0.75); border: 0.2rem solid var(--ink); }
.joy-base.aim .joy-knob { background: rgba(255,226,107,0.85); }
.btn-attack, .btn-super, .btn-gadget { position: absolute; border-radius: 50%; border: 0.22rem solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
body:not(.touch) .ctrl .btn-attack { display: none; }
.btn-attack { right: calc(3rem + var(--sar)); bottom: calc(2.5rem + var(--sab)); width: 6.5rem; height: 6.5rem; background: radial-gradient(circle at 50% 35%, rgba(255,140,80,0.85), rgba(200,60,30,0.75)); opacity: 0.85; }
.btn-attack.empty { filter: grayscale(0.8); }
.btn-attack::after { content: ''; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0.3rem solid rgba(255,255,255,0.8); }
.btn-super { right: calc(10.5rem + var(--sar)); bottom: calc(1.4rem + var(--sab)); width: 5rem; height: 5rem; background: conic-gradient(var(--yellow) var(--p, 0%), rgba(15,8,45,0.75) 0); }
body:not(.touch) .btn-super { right: calc(1.5rem + var(--sar)); bottom: calc(1.5rem + var(--sab)); }
.btn-super span { position: relative; z-index: 1; text-shadow: 0 0.1em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink); }
.btn-super .super-fill { position: absolute; inset: 0.4rem; border-radius: 50%; background: rgba(15,8,45,0.8); }
.btn-super.ready { animation: superPulse 0.8s infinite alternate; }
.btn-super.ready .super-fill { background: radial-gradient(circle at 50% 35%, #fff3a0, #e0a000); }
@keyframes superPulse { from { box-shadow: 0 0 0 0 rgba(255,210,63,0.9); transform: scale(1); } to { box-shadow: 0 0 1.4rem 0.4rem rgba(255,210,63,0.6); transform: scale(1.07); } }
.btn-gadget { right: calc(4.5rem + var(--sar)); bottom: calc(10.5rem + var(--sab)); width: 3.6rem; height: 3.6rem; background: radial-gradient(circle at 50% 35%, #7bff9c, #1e9a42); flex-direction: column; }
body:not(.touch) .btn-gadget { right: calc(7.5rem + var(--sar)); bottom: calc(1.9rem + var(--sab)); }
.btn-gadget.off { filter: grayscale(1) brightness(0.6); }
.btn-gadget.press { transform: scale(0.9); }
.btn-gadget span { font-size: 0.6rem; text-shadow: 0 1px 0 var(--ink); }
.gd-dots { display: flex; gap: 0.15rem; margin-top: 0.1rem; }
.gd-dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #fff; border: 0.08rem solid var(--ink); }
body:not(.touch) .btn-super::before { content: 'Rechtsklick'; position: absolute; bottom: -1.1rem; font-size: 0.6rem; color: rgba(255,255,255,0.7); }
body:not(.touch) .btn-gadget::before { content: 'Q'; position: absolute; bottom: -1.1rem; font-size: 0.6rem; color: rgba(255,255,255,0.7); }

/* Kleine Bildschirme (Handy quer) */
@media (max-height: 430px) {
  .lb-left { top: 7.6rem; gap: 0.45rem; }
  .menu-btn { width: 9rem; font-size: 0.95rem; padding: 0.25rem 0.5rem; }
  .menu-btn .ic { width: 1.8rem; height: 1.8rem; }
  .lb-right { top: 4.2rem; gap: 0.45rem; width: 11rem; }
  .card.side { padding: 0.3rem 0.6rem; }
  .hi-name { font-size: 1.6rem; }
}
@media (orientation: portrait) {
  .lb-left { top: auto; bottom: 7.5rem; flex-direction: row; flex-wrap: wrap; width: 22rem; }
  .lb-right { top: 7rem; }
  .lb-hero { left: 15%; right: 15%; }
  .lb-heroinfo { bottom: 13rem; }
  .rs-body { padding-left: 0; flex-direction: column; }
  .rs-rewards { width: 100%; }
}

/* =====================================================================
   Version 2 – Lobby, Shop, Anmeldung und Spiel-Knöpfe im Stil des Originals
   ===================================================================== */

/* ---------- Lobby */
.lobby::before { content: ''; position: absolute; left: 50%; top: 52%; width: 48rem; height: 34rem; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%); pointer-events: none; }
.lb-tl { gap: 0.45rem; }
.profile { background: linear-gradient(rgba(10,20,60,0.75), rgba(10,20,60,0.55)); border-radius: 0.8rem; padding: 0.3rem 1.1rem 0.3rem 0.3rem; }
.pf-frame { width: 3.2rem; height: 3.2rem; border-radius: 0.6rem; border: 0.2rem solid #ffd23f; box-shadow: 0 0 0 0.15rem var(--ink); overflow: hidden; background: linear-gradient(#5aa8ff, #2c6fe0); flex: none; }
.pf-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25) translateY(6%); }
.pf-name { font-size: 1.15rem; line-height: 1.1; }
.pf-user { font-size: 0.78rem; color: var(--muted); }
.trophy-box { position: relative; display: flex; flex-direction: column; gap: 0.2rem; width: 15rem; background: rgba(10,20,60,0.62); border: 0.15rem solid var(--ink); border-radius: 0.8rem; padding: 0.3rem 0.6rem 0.4rem; cursor: pointer; }
.tb-top { display: flex; align-items: center; gap: 0.35rem; font-size: 1.25rem; }
.tb-top .ic { width: 1.6rem; height: 1.6rem; }
.tb-bar { display: flex; align-items: center; gap: 0.4rem; }
.tb-next { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.8rem; }
.ic.mini { width: 1.3rem; height: 1.3rem; }
.lb-tr { gap: 0.6rem; }
.pill { min-width: 6.5rem; padding: 0.12rem 0.25rem 0.12rem 0.2rem; background: rgba(10,20,60,0.78); border-radius: 0.6rem; cursor: pointer; }
.pill b { flex: 1; text-align: center; font-size: 1.05rem; }
.pill .plus { width: 1.35rem; height: 1.35rem; border-radius: 0.35rem; background: linear-gradient(#7af09a, #2bb553); border: 0.13rem solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; text-shadow: 0 1px 0 var(--ink); }
.btn-ic.sq { width: 2.7rem; height: 2.7rem; border-radius: 0.7rem; background: linear-gradient(#5d7bb8, #34508c); border: 0.18rem solid var(--ink); box-shadow: 0 0.25rem 0 var(--ink); padding: 0.25rem; }
.lb-left { display: grid; grid-template-columns: repeat(2, 5.6rem); gap: 0.6rem; top: 10.4rem; }
.tile { position: relative; width: 5.6rem; height: 5.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; border: 0.2rem solid var(--ink); border-radius: 0.9rem; background: linear-gradient(#5aa8ff, #2c6fe0); box-shadow: inset 0 -0.45rem 0 rgba(0,0,0,0.22), inset 0 0.2rem 0 rgba(255,255,255,0.35), 0 0.3rem 0 var(--ink); font-size: 0.82rem; transition: transform .06s; }
.tile .ic { width: 2.9rem; height: 2.9rem; filter: drop-shadow(0 0.12rem 0 var(--ink)); }
.tile:active { transform: translateY(0.2rem); box-shadow: inset 0 -0.3rem 0 rgba(0,0,0,0.22), 0 0.1rem 0 var(--ink); }
.tile.orange { background: linear-gradient(#ffc27a, #f07a22); }
.tile.purple { background: linear-gradient(#c58bff, #8a3cf0); }
.tile.teal { background: linear-gradient(#6ef0e0, #1fb0a8); }
.tile.green { background: linear-gradient(#8cf07a, #3bb82b); }
.tile.team { width: 6.4rem; height: 4.6rem; background: linear-gradient(#5aa8ff, #2c6fe0); }
.lb-right { top: 4.6rem; width: 13rem; gap: 0.7rem; }
.pass-card { position: relative; cursor: pointer; border: 0.2rem solid var(--ink); border-radius: 0.9rem; padding: 0.5rem 0.6rem; background: linear-gradient(135deg, #ffb35a, #ff6a2a 55%, #e2482a); box-shadow: inset 0 0.2rem 0 rgba(255,255,255,0.35), 0 0.3rem 0 var(--ink); }
.pc-top { display: flex; gap: 0.4rem; align-items: center; }
.pc-top .ic { width: 2.2rem; height: 2.2rem; }
.pc-top b { font-size: 1.05rem; }
.pc-season { font-size: 0.7rem; color: #fff3e0; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.pc-tier { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.pc-num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex: none; }
.box-card { position: relative; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; border: 0.2rem solid var(--ink); border-radius: 0.9rem; padding: 0.3rem 0.6rem; background: linear-gradient(135deg, #b67bff, #6a2fd8); box-shadow: inset 0 0.2rem 0 rgba(255,255,255,0.35), 0 0.3rem 0 var(--ink); font-size: 1.05rem; }
.bxc-chest { width: 3.6rem; height: 3.2rem; animation: wobble 2.2s ease-in-out infinite; }
.bxc-chest .chest { width: 100%; height: 100%; }
.lb-heroinfo { bottom: calc(6.8rem + var(--sab)); }
.hi-banner { display: flex; align-items: center; gap: 0.5rem; background: linear-gradient(rgba(10,20,60,0.85), rgba(10,20,60,0.7)); border: 0.18rem solid var(--ink); border-radius: 0.8rem; padding: 0.15rem 0.8rem 0.15rem 0.2rem; transform: skewX(-6deg); }
.hi-banner > * { transform: skewX(6deg); }
.hi-pl { width: 2.3rem; height: 2.3rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: linear-gradient(#c58bff, #7a2fe0); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hi-name { font-size: 1.7rem; letter-spacing: 0.04em; }
.hi-trw { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1.1rem; }
.hi-trw .ic { width: 1.4rem; height: 1.4rem; }
.lb-bl { align-items: center; }
.event { min-width: 15.5rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; gap: 0.6rem; border-radius: 0.9rem; border-width: 0.2rem; background: linear-gradient(color-mix(in srgb, var(--mc) 80%, white), color-mix(in srgb, var(--mc) 85%, black)); box-shadow: inset 0 0.2rem 0 rgba(255,255,255,0.35), 0 0.3rem 0 var(--ink); }
.ev-map-img { width: 3.6rem; height: 4.6rem; border-radius: 0.45rem; border: 0.15rem solid var(--ink); overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; flex: none; }
.ev-map-img .minimap { width: 100%; height: 100%; max-height: none; object-fit: cover; border: none; border-radius: 0; }
.ev-mode { display: flex; align-items: center; gap: 0.3rem; font-size: 1.2rem; }
.ev-ic { width: 1.8rem; height: 1.8rem; }
.ev-chg { top: -0.75rem; right: 0.6rem; background: var(--ink); color: #fff; font-size: 0.68rem; padding: 0.1rem 0.5rem; border-radius: 0.4rem; }
.btn.play { font-size: 2.1rem; min-width: 12.5rem; height: 5.4rem; padding: 0 1.4rem; transform: skewX(-8deg) translateY(-0.15rem); border-radius: 0.9rem; background: linear-gradient(#ffe878, #ffc61a 55%, #ffb000); }
.btn.play > * { transform: skewX(8deg); }
.btn.play:active { transform: skewX(-8deg) translateY(0.18rem); }
.btn.play.searching { font-size: 1.25rem; }
.queue-info { font-size: 0.85rem; }

/* ---------- Shop: von links nach rechts */
.shop-scr .scr-head { margin-bottom: 0.3rem; }
.shop { flex: 1; display: flex; gap: 1.4rem; overflow-x: auto; overflow-y: hidden; padding: 0.3rem 0.6rem 0.8rem; align-items: stretch; touch-action: pan-x; scroll-snap-type: x proximity; }
.shop::-webkit-scrollbar { height: 0.5rem; } .shop::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 1rem; }
.shop-sec { flex: none; display: flex; flex-direction: column; min-height: 0; margin: 0; scroll-snap-align: start; }
.ss-title { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; font-size: 1.15rem; }
.ss-title b { background: var(--ink); padding: 0.15rem 0.9rem; border-radius: 0.5rem; transform: skewX(-8deg); display: inline-block; }
.shop-timer { font-size: 0.82rem; background: rgba(0,0,0,0.35); padding: 0.1rem 0.5rem; border-radius: 0.4rem; color: #ffe9a8; }
.ss-grid { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: 10.2rem; gap: 0.8rem; min-height: 0; }
.offer { position: relative; width: auto; border: 0.2rem solid var(--ink); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; box-shadow: inset 0 0.2rem 0 rgba(255,255,255,0.35), 0 0.35rem 0 rgba(0,0,0,0.45); background: linear-gradient(160deg, #5ab4ff, #2558c9); min-height: 0; }
.offer::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-30deg, rgba(255,255,255,0.07) 0 0.8rem, transparent 0.8rem 1.6rem); pointer-events: none; }
.offer.big { grid-row: span 2; }
.offer.c-daily { background: linear-gradient(160deg, #5ad0ff, #2468d6); }
.offer.c-boxes { background: linear-gradient(160deg, #c58bff, #6a2fd8); }
.offer.c-skins { background: linear-gradient(160deg, #ffb35a, #e2482a); }
.offer.c-coins { background: linear-gradient(160deg, #8cf07a, #22a04a); }
.offer:active { transform: scale(0.97); }
.o-title { position: relative; font-size: 0.85rem; text-align: center; padding: 0.4rem 0.4rem 0; line-height: 1.1; }
.offer.big .o-title { font-size: 1.1rem; }
.o-art { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0.2rem; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), transparent 65%); }
.oa-chest { width: 72%; max-height: 100%; display: flex; }
.oa-chest .chest { width: 100%; height: auto; max-height: 100%; }
.offer.big .oa-chest { width: 88%; }
.oa-por { height: 100%; max-height: 10rem; width: auto; object-fit: contain; }
.oa-cur { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-size: 1.15rem; }
.offer.big .oa-cur { font-size: 1.7rem; }
.oa-pile { display: flex; }
.oa-ic { width: 2.8rem; height: 2.8rem; filter: drop-shadow(0 0.15rem 0 var(--ink)); }
.offer.big .oa-ic { width: 4.4rem; height: 4.4rem; }
.oa-pile.p2 .oa-ic + .oa-ic, .oa-pile.p3 .oa-ic + .oa-ic { margin-left: -1.3rem; margin-top: 0.6rem; }
.o-price { position: relative; margin: 0.35rem; border: 0.18rem solid var(--ink); border-radius: 0.6rem; background: linear-gradient(#7af09a, #2bb553); padding: 0.18rem; display: flex; justify-content: center; align-items: center; gap: 0.3rem; font-size: 1.05rem; box-shadow: 0 0.2rem 0 var(--ink); }
.o-price .ic { width: 1.35rem; height: 1.35rem; }
.o-price.free { background: linear-gradient(#ffe36b, #ffc21a); }
.o-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%); transform: translateX(-120%); animation: shine 4s infinite; pointer-events: none; z-index: 1; }
.offer.big .o-shine { animation-duration: 2.8s; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.offer.sold { filter: grayscale(0.85) brightness(0.72); }
.o-stamp { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-size: 3.2rem; color: var(--green); z-index: 2; }
.otag { position: absolute; top: 0.35rem; right: -0.35rem; left: auto; background: var(--red); border: 0.15rem solid var(--ink); border-radius: 0.4rem; padding: 0.05rem 0.6rem; transform: rotate(8deg); font-size: 0.8rem; z-index: 2; }
.shop-note { flex: none; width: 13rem; align-self: center; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 500; margin: 0; text-align: left; }
.shop-note b { color: #fff; font-size: 1.1rem; }

/* ---------- Anmeldung */
.auth { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: calc(1rem + var(--sat)) calc(3rem + var(--sar)) calc(1rem + var(--sab)) 1rem; }
.auth-logo { position: absolute; left: calc(4% + var(--sal)); top: calc(5% + var(--sat)); pointer-events: none; }
.auth-logo .logo { font-size: 4.2rem; }
.auth-tag { font-size: 1.05rem; margin-top: 0.2rem; }
.auth-card { width: min(25rem, 92vw); max-height: 96vh; overflow-y: auto; padding: 0.9rem 1.1rem; touch-action: pan-y; }
.auth-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.auth-tabs button { flex: 1; padding: 0.45rem 0.3rem; border-radius: 0.6rem; background: rgba(0,0,0,0.3); border: 0.15rem solid var(--ink); font-size: 0.85rem; }
.auth-tabs button.on { background: linear-gradient(#ffd86b, #e8a300); text-shadow: 0 1px 0 var(--ink); }
.auth-form { display: flex; flex-direction: column; }
.af { display: block; margin-bottom: 0.25rem; }
.af-l { font-size: 0.8rem; color: var(--muted); }
.af .inp { margin: 0.15rem 0; padding: 0.45rem 0.7rem; font-size: 1rem; }
.af-info { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.af-info.ok { color: #8dff9e; } .af-info.bad { color: #ffb3bb; }
.at { display: flex; align-items: center; background: #fff; border-radius: 0.6rem; border: 0.18rem solid var(--ink); margin: 0.15rem 0; }
.at > span { color: #6a7090; padding-left: 0.6rem; font-size: 1.05rem; }
.at .inp { border: none; margin: 0; padding-left: 0.2rem; }
.auth-err { color: #ffb3bb; min-height: 1.2em; font-size: 0.88rem; margin: 0.2rem 0; }
.btn.big { width: 100%; font-size: 1.3rem; margin: 0.3rem 0 0.6rem; }
@media (orientation: portrait) {
  .auth { justify-content: center; align-items: flex-start; padding-top: 8rem; }
  .auth-logo { left: 50%; transform: translateX(-50%); top: 1rem; text-align: center; }
}

/* ---------- Konto & Rangliste */
.acc-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.4rem; }
.acc-head img { width: 3.6rem; height: 3.6rem; border-radius: 0.6rem; border: 0.18rem solid var(--yellow); background: var(--panel2); object-fit: cover; }
.acc-name { font-size: 1.4rem; }
.acc-user { color: var(--muted); }
.bd-user { color: var(--muted); font-style: normal; font-size: 0.8rem; font-weight: 500; }

/* ---------- Spiel-Knöpfe wie im Original */
.joy-hint { position: absolute; left: calc(6.5rem + var(--sal)); bottom: calc(5.5rem + var(--sab)); width: 9rem; height: 9rem; margin: 0 0 -4.5rem -4.5rem; border-radius: 50%; border: 0.2rem dashed rgba(255,255,255,0.28); pointer-events: none; transition: opacity .2s; }
.ctrl.moving .joy-hint { opacity: 0; }
body:not(.touch) .joy-hint { display: none; }
.joy-base.aim.sup { background: rgba(255,210,63,0.18); border-color: rgba(255,210,63,0.6); }
.btn-attack { width: 7rem; height: 7rem; right: calc(2.6rem + var(--sar)); bottom: calc(2.2rem + var(--sab)); background: radial-gradient(circle at 50% 30%, #ff9a6a, #e8482a 70%); box-shadow: inset 0 -0.4rem 0 rgba(0,0,0,0.25), 0 0 0 0.35rem rgba(255,255,255,0.12); opacity: 0.88; }
.btn-attack::after { width: 2.6rem; height: 2.6rem; border-width: 0.32rem; box-shadow: 0 0 0 0.6rem rgba(255,255,255,0.25); }
.btn-super { width: 5.2rem; height: 5.2rem; right: calc(11rem + var(--sar)); bottom: calc(1.3rem + var(--sab)); }
.btn-super span { font-size: 0.85rem; }
.btn-gadget { width: 3.8rem; height: 3.8rem; right: calc(4.2rem + var(--sar)); bottom: calc(11.2rem + var(--sab)); }
.hud-score .sc-team { font-size: 1.6rem; min-width: 6rem; }
.hud-timer { font-size: 1.35rem; padding: 0.05rem 0.7rem; background: rgba(10,15,40,0.7); border: 0.15rem solid var(--ink); }
.hud-msg.go { color: #ffe14d; }
@media (max-height: 430px) {
  .lb-left { top: 8.6rem; grid-template-columns: repeat(2, 4.6rem); gap: 0.45rem; }
  .tile { width: 4.6rem; height: 4.6rem; font-size: 0.72rem; }
  .tile .ic { width: 2.3rem; height: 2.3rem; }
  .tile.team { width: 5.4rem; height: 4rem; }
  .lb-right { top: 4rem; width: 11.5rem; }
  .btn.play { height: 4.6rem; min-width: 11rem; font-size: 1.8rem; }
  .event { min-width: 13.5rem; }
  .ev-map-img { width: 3rem; height: 3.8rem; }
  .lb-heroinfo { bottom: calc(5.8rem + var(--sab)); }
}

.offer.tagged .o-title { padding-right: 3.2rem; text-align: left; padding-left: 0.6rem; }
.offer .otag { top: 0.3rem; right: -0.25rem; }

/* =====================================================================
   Version 3 – Rang-Farben, Shop in einer Reihe, neue Kisten-Animation
   ===================================================================== */
.rank { background: linear-gradient(var(--r1, #ffe680), var(--r2, #e7a800)); color: #12142b; font-weight: 700; min-width: 1.8rem; height: 1.9rem; text-shadow: 0 1px 0 rgba(255,255,255,0.5); filter: drop-shadow(0 0.12rem 0 #12142b); }
.rank.legend { animation: legend 2.5s linear infinite; }
@keyframes legend { to { filter: drop-shadow(0 0.12rem 0 #12142b) hue-rotate(360deg); } }

/* Marken-Kiste in der Lobby */
.marks-card { background: linear-gradient(135deg, #5ad0ff, #2a7ae8 55%, #1d55c4); }
.marks-card .pc-season { color: #e8f6ff; }
.pc-chest { width: 2.2rem; height: 2rem; display: inline-flex; flex: none; }
.pc-chest .chest { width: 100%; height: 100%; }
.pc-cnt { font-size: 0.85rem; flex: none; }
.marks-row { display: flex; align-items: center; gap: 0.7rem; max-width: 40rem; margin: 0 auto 0.5rem; padding: 0.5rem 0.8rem; width: 100%; }
.marks-row .ic { width: 2.2rem; height: 2.2rem; }
.mr-txt { display: flex; flex-direction: column; font-size: 0.8rem; min-width: 12rem; }
.mr-txt span { color: var(--muted); font-weight: 500; }
.boxcard.kind-truhe { background: linear-gradient(#5aa8ff, #2a5ac4); } .boxcard.kind-gross { background: linear-gradient(#c58bff, #6a2fd8); } .boxcard.kind-mega { background: linear-gradient(#ff8a94, #c4202f); }
.boxcard .bc-info { min-height: 0; font-size: 0.85rem; color: #fff; }

/* Shop: alle Angebote nebeneinander, gleiche Form */
.shop { align-items: center; }
.shop-sec { height: 100%; justify-content: center; }
.ss-grid { flex: none; display: flex; gap: 0.9rem; height: min(100% - 2.4rem, 19rem); grid-template-rows: none; }
.offer { flex: none; width: 11rem; height: 100%; }
.offer.big { width: 14.5rem; grid-row: auto; }
.offer .o-art { padding: 0.4rem; }
.offer .oa-chest { width: 82%; }
.offer.big .oa-chest { width: 90%; }
.offer .oa-ic { width: 3.6rem; height: 3.6rem; }
.offer.big .oa-ic { width: 5rem; height: 5rem; }
.offer .oa-cur { font-size: 1.4rem; }

/* Kisten öffnen */
.boxopen { flex-direction: column; }
.boxopen.opening .bo-rays { animation-duration: 3s; filter: brightness(1.6); }
.bo-rays.special { background: repeating-conic-gradient(rgba(120,230,255,0.22) 0 10deg, transparent 10deg 20deg); }
.bo-rays.gold { background: repeating-conic-gradient(color-mix(in srgb, var(--rc, #ffd23f) 45%, transparent) 0 10deg, transparent 10deg 20deg); animation-duration: 6s; }
.bo-title { position: relative; font-size: 2rem; margin-bottom: 0.4rem; order: -1; }
.bo-slots { position: absolute; bottom: 1.4rem; font-size: 1.1rem; color: #ffe9a8; }
.bo-drop { position: relative; animation: drop 0.75s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes drop { 0% { transform: translateY(-120vh) scale(0.8); } 70% { transform: translateY(0) scale(1.05, 0.92); } 100% { transform: translateY(0) scale(1); } }
.bo-chest { width: 17rem; height: 15rem; animation: wobble 1.4s ease-in-out infinite; filter: drop-shadow(0 0 calc(var(--glow, 0) * 2.5rem) rgba(255,240,150,0.9)); transition: filter .2s; }
.bo-chest.shake { animation: shake 0.45s; }
.bo-chest.open { animation: openPop 0.9s ease-out forwards; }
.bo-chest.open .ch-lid { transform: translateY(-60px) rotate(-22deg); transform-origin: 10px 50px; transition: transform 0.4s cubic-bezier(.3,1.6,.6,1) 0.35s; }
@keyframes openPop { 0% { transform: scale(1); } 30% { transform: scale(1.12, 0.9) translateX(-6px); } 45% { transform: scale(0.95, 1.1) translateX(6px); } 70% { transform: scale(1.25); filter: drop-shadow(0 0 3rem #fff) brightness(1.6); } 100% { transform: scale(1.6); opacity: 0; filter: drop-shadow(0 0 4rem #fff) brightness(2); } }
.bo-hint { animation: bump 0.9s infinite; }
.bo-flash { position: absolute; inset: 0; background: #fff; animation: flash 0.7s ease-out forwards; pointer-events: none; z-index: 3; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.bo-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; animation: itemIn 0.45s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes itemIn { 0% { transform: translateY(6rem) scale(0.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bo-art { position: relative; display: flex; align-items: center; justify-content: center; }
.bo-ic { width: 9rem; height: 9rem; filter: drop-shadow(0 0.3rem 0 #12142b); position: relative; z-index: 1; animation: floaty 2s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-0.4rem) rotate(3deg); } }
.bo-skin-img { width: 15rem; height: 15rem; object-fit: contain; position: relative; z-index: 1; }
.bo-spark { position: absolute; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 60%); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); opacity: 0.7; } }
.bo-amount { font-size: 3.4rem; color: #fff; }
.bo-label { font-size: 1.3rem; color: #ffe9a8; }
.bo-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; animation: heroIn 0.8s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes heroIn { 0% { transform: scale(0.1) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bo-hero-img { width: 17rem; height: 17rem; object-fit: contain; filter: drop-shadow(0 0 1.5rem rgba(255,255,255,0.7)); }
.bo-hero-name { font-size: 2.6rem; }
.bo-new { font-size: 2.4rem; animation: bump 1s infinite; }
/* Zähler unten rechts: blinkt in der Farbe des nächsten besonderen Fachs */
.bo-left { position: absolute; right: 2rem; bottom: 1.5rem; width: 5.5rem; height: 5rem; display: flex; align-items: flex-end; justify-content: center; }
.bo-left-chest { position: absolute; inset: 0; }
.bo-left-chest .chest { width: 100%; height: 100%; animation: none; }
.bo-left b { position: relative; font-size: 1.7rem; background: #12142b; border-radius: 1rem; min-width: 2.3rem; text-align: center; padding: 0 0.4rem; margin-bottom: -0.6rem; }
.bo-left.special b { animation: plink 0.55s ease-in-out infinite alternate; }
.bo-left.special .bo-left-chest { animation: plinkGlow 0.55s ease-in-out infinite alternate; }
@keyframes plink { from { background: #12142b; transform: scale(1); } to { background: var(--sc); transform: scale(1.25); box-shadow: 0 0 1.2rem var(--sc); } }
@keyframes plinkGlow { from { filter: drop-shadow(0 0 0 transparent); } to { filter: drop-shadow(0 0 1rem var(--sc)) brightness(1.3); } }

/* ---------- Admin-Panel */
.admin-badge { position: absolute; top: calc(0.8rem + var(--sat)); left: 50%; transform: translateX(-50%); background: var(--red); border: 0.18rem solid var(--ink); border-radius: 0.6rem; padding: 0.2rem 0.9rem; font-size: 1rem; animation: bump 1.6s infinite; z-index: 3; }
.admin-scr .btn-back { font-size: 1.4rem; }
.ad-who { color: var(--muted); font-size: 0.9rem; }
.admin { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; max-width: 56rem; width: 100%; margin: 0 auto; padding-bottom: 0.6rem; touch-action: pan-y; user-select: text; }
.ad-card { padding: 0.6rem 0.9rem; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.4rem 1rem; margin-bottom: 0.4rem; }
.ad-f { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.ad-f span { flex: 1; }
.ad-num { width: 8rem; margin: 0.15rem 0; padding: 0.3rem 0.5rem; font-size: 0.95rem; }
.ad-num.sm { width: 5.5rem; }
.ad-sel { width: 4rem; padding: 0.25rem; margin: 0; font-size: 0.95rem; }
.ad-quick { display: flex; gap: 0.3rem; justify-content: flex-end; }
.ad-quick .btn { font-size: 0.7rem; padding: 0.2em 0.5em; }
.ad-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.3rem 0; }
.ad-target { width: 14rem; margin: 0; padding: 0.35rem 0.6rem; font-size: 0.95rem; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ad-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.2rem; }
.ad-table td { padding: 0.15rem 0.3rem; border-top: 0.1rem solid rgba(255,255,255,0.12); }
.ad-table input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: #3fd26a; }
.ad-por { width: 2.2rem; height: 2.2rem; object-fit: cover; border-radius: 0.4rem; background: rgba(0,0,0,0.25); }
.ad-cheat { background: rgba(160,20,40,0.35); border-radius: 0.5rem; padding: 0.4rem 0.6rem; margin-top: 0.3rem; }
.ad-foot { display: flex; justify-content: center; padding-top: 0.4rem; flex: none; }