:root {
  --bg: #0c0a12;
  --bg2: #151120;
  --panel: #1b1628;
  --panel2: #241d35;
  --line: #3a3050;
  --ink: #f1e9d8;
  --muted: #a99fbc;
  --blood: #c41d3a;
  --blood2: #8e1027;
  --gold: #d6ad52;
  --ok: #5fbf7a;
  --radius: 12px;
  --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --sans: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; user-select: none; -webkit-user-select: none; }
body { background: radial-gradient(ellipse at 50% -20%, #2a1a3c 0%, var(--bg) 60%) fixed; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: 0.02em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Buttons ---------- */
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; cursor: pointer; transition: transform .08s, background .15s, border-color .15s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn:hover { border-color: #5b4b7a; background: #2c2441; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, var(--blood), var(--blood2)); border-color: #e24660; font-weight: 600; }
.btn.primary:hover { background: linear-gradient(180deg, #d72444, #9d132c); }
.btn.gold { background: linear-gradient(180deg, #c99a3b, #8f6a1f); border-color: #e7c36f; color: #1a1205; font-weight: 700; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(214,173,82,.35) inset; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.chip.on { border-color: var(--gold); color: #fff; background: #3a2f22; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(12,10,18,.75); backdrop-filter: blur(6px); flex-shrink: 0; }
.topbar h2 { font-size: 20px; flex: 1; }

/* ---------- Menü ---------- */
.menu { align-items: center; justify-content: safe center; padding: 24px; gap: 8px; }
.logo { text-align: center; margin-bottom: 18px; }
.logo .t1 { font-family: var(--serif); font-size: clamp(38px, 7vw, 74px); font-weight: 700; letter-spacing: .06em; color: #f6eee0; text-shadow: 0 0 24px rgba(196,29,58,.55), 0 2px 0 #4b0d18; line-height: 1; }
.logo .t1 span { color: var(--blood); }
.logo .t2 { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 8px; font-size: clamp(14px, 2vw, 18px); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(160px, 240px)); gap: 12px; }
.menu-grid .btn { padding: 16px; font-size: 17px; flex-direction: column; gap: 4px; min-height: 84px; }
.menu-grid .btn .ico { font-size: 24px; }
.menu-grid .btn .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.menu-grid .btn.primary .sub { color: #ffd3da; }
.badge { background: var(--blood); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; font-weight: 700; }
.stats { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- Karten ---------- */
.card { --tc: #777; position: relative; width: 15em; border-radius: .9em; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 55%, #fff 0%), color-mix(in srgb, var(--tc) 40%, #000)); padding: .45em; box-shadow: 0 .3em 1em rgba(0,0,0,.5); color: #1b1410; font-family: var(--sans); flex-shrink: 0; overflow: hidden; }
.card .inner { background: linear-gradient(180deg, #f7efdc, #e8dcc0); border-radius: .55em; padding: .45em .5em .4em; display: flex; flex-direction: column; gap: .3em; height: 100%; }
.card.l { font-size: 15px; } .card.m { font-size: 10.5px; } .card.s { font-size: 7.4px; }
.card .hdr { display: flex; align-items: baseline; gap: .4em; }
.card .stage { font-size: .72em; background: #2b2233; color: #f1e9d8; border-radius: .4em; padding: .05em .4em; white-space: nowrap; }
.card .nm { font-family: var(--serif); font-weight: 700; font-size: 1.04em; flex: 1; line-height: 1.1; }
.card .hp { font-weight: 800; font-size: .95em; white-space: nowrap; color: #6e1222; }
.card .hp small { font-size: .65em; font-weight: 700; }
.card .art { position: relative; aspect-ratio: 5/3; border-radius: .4em; overflow: hidden; border: .14em solid color-mix(in srgb, var(--tc) 70%, #000); background: #111; }
.card .art svg, .card .art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card .bb { position: absolute; bottom: .3em; left: .3em; background: var(--blood); color: #fff; font-size: .7em; font-weight: 800; padding: .1em .45em; border-radius: .3em; letter-spacing: .05em; }
.card .meta { font-size: .68em; color: #5b4c3c; display: flex; justify-content: space-between; font-style: italic; }
.card .abil { background: #fff3d6; border: .08em solid #c99a3b; border-radius: .35em; padding: .25em .4em; font-size: .78em; line-height: 1.25; }
.card .abil b { color: #9a1d32; font-family: var(--serif); }
.card .atk { border-top: .06em solid #c9b994; padding-top: .25em; font-size: .8em; line-height: 1.25; }
.card .atk .row { display: flex; align-items: center; gap: .35em; font-weight: 700; font-size: 1.08em; }
.card .atk .row .nm2 { flex: 1; font-family: var(--serif); }
.card .atk .row .dmg { font-size: 1.15em; }
.card .cost { letter-spacing: -.1em; white-space: nowrap; }
.card .ttxt { font-size: .82em; line-height: 1.3; }
.card .ftr { margin-top: auto; display: flex; gap: .3em; justify-content: space-between; font-size: .66em; border-top: .06em solid #c9b994; padding-top: .25em; color: #4a3b2c; }
.card .flavor { font-style: italic; font-size: .68em; color: #6b5a44; }
.card .count { position: absolute; top: .3em; right: .3em; background: #120d1c; color: #fff; border-radius: 99px; font-size: .9em; padding: .1em .55em; font-weight: 800; border: .1em solid var(--gold); z-index: 2; }
.card .newb { position: absolute; top: .3em; left: .3em; background: var(--gold); color: #1a1205; border-radius: .3em; font-size: .85em; padding: .05em .45em; font-weight: 900; z-index: 2; }
.card.unowned { filter: grayscale(.9) brightness(.55); }
.card.energy .inner { align-items: center; justify-content: center; }
.card .rar { font-weight: 800; }
.card.r-L { box-shadow: 0 0 1.2em rgba(214,173,82,.6), 0 .3em 1em rgba(0,0,0,.5); }
.card.r-R { box-shadow: 0 0 .8em rgba(214,173,82,.35), 0 .3em 1em rgba(0,0,0,.5); }
.card.clickable { cursor: pointer; transition: transform .12s; }
.card.clickable:hover { transform: translateY(-.25em); }

/* ---------- Sammlung / Deckbau ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.filters input[type=search], .field { background: var(--bg2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; }
.grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px; justify-content: center; align-content: flex-start; }
.deckedit { display: grid; grid-template-columns: 1fr 340px; flex: 1; min-height: 0; }
.deckedit .left { display: flex; flex-direction: column; min-height: 0; }
.deckedit .right { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg2); }
.dlist { flex: 1; padding: 8px 12px; }
.drow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; }
.drow:hover { background: var(--panel2); }
.drow .n { flex: 1; cursor: pointer; }
.drow .tdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.drow .q { min-width: 22px; text-align: center; font-weight: 700; }
.dhead { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.errs { font-size: 12px; color: #ff9aaa; padding: 0 12px 8px; }
.okmsg { font-size: 12px; color: var(--ok); padding: 0 12px 8px; }
.addwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.addwrap .addbar { display: flex; gap: 6px; align-items: center; }
.addbar .btn { padding: 2px 10px; font-weight: 800; }
.decklist { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.decktile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.decktile.active { border-color: var(--gold); }
.decktile .acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(5,3,9,.78); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fade .15s; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; max-width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal .mh { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal .mh h3 { flex: 1; font-size: 18px; }
.modal .mb { padding: 16px 18px; overflow: auto; }
.modal .mf { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.detail { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.detail .dside { min-width: 240px; max-width: 360px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.actlist { display: flex; flex-direction: column; gap: 8px; }
.actlist .btn { justify-content: flex-start; text-align: left; }
.actlist .why { font-size: 12px; color: #ff9aaa; margin-top: -4px; padding-left: 4px; }
.pickgrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pickable { border-radius: 12px; outline: 3px solid transparent; cursor: pointer; transition: outline-color .12s, transform .12s; }
.pickable:hover { transform: translateY(-3px); }
.pickable.on { outline-color: var(--gold); }
@keyframes fade { from { opacity: 0; } }

/* ---------- Toasts / Münze ---------- */
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 80; pointer-events: none; align-items: center; }
.toast { background: rgba(27,22,40,.95); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; font-size: 14px; animation: toast 2.6s forwards; box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: 90vw; text-align: center; }
.toast.big { font-family: var(--serif); font-size: 22px; border-color: var(--blood); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.coin { display: inline-block; animation: spin .6s ease-out; }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(1080deg); } }

/* ---------- Spielbrett ---------- */
.board { display: grid; grid-template-columns: 1fr 280px; flex: 1; min-height: 0; }
.field-area { display: flex; flex-direction: column; min-height: 0; padding: 8px 12px 0; gap: 6px; background:
  radial-gradient(ellipse at 50% 50%, rgba(60,30,80,.35), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 60px); }
.pinfo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pinfo .who { font-family: var(--serif); color: var(--ink); font-size: 16px; font-weight: 700; }
.kos { display: inline-flex; gap: 3px; }
.kos span { width: 22px; height: 26px; border-radius: 11px 11px 3px 3px; background: #2a2337; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.kos span.on { background: #4a1220; border-color: var(--blood); }
.row { display: flex; gap: 10px; justify-content: center; align-items: flex-end; min-height: 0; }
.mid { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 1; min-height: 0; }
.stadium { width: 128px; text-align: center; font-size: 12px; color: var(--muted); }
.stadium .sbox { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; cursor: pointer; background: rgba(79,138,58,.08); }
.stadium .sbox.empty { cursor: default; background: none; }
.piles { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); width: 128px; align-items: center; }
.pile { width: 70px; height: 52px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(135deg, #3a1020, #1b1628); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; }
.pile b { font-size: 16px; color: var(--ink); }

.slot { --tc: #777; width: 132px; border-radius: 12px; background: var(--panel); border: 2px solid color-mix(in srgb, var(--tc) 70%, #000); overflow: hidden; cursor: pointer; position: relative; transition: transform .12s, box-shadow .2s; flex-shrink: 0; }
.slot:hover { transform: translateY(-2px); }
.slot.active { width: 168px; box-shadow: 0 0 0 2px rgba(214,173,82,.25), 0 8px 24px rgba(0,0,0,.5); }
.slot.empty { background: transparent; border: 2px dashed var(--line); height: 90px; cursor: default; display: flex; align-items: center; justify-content: center; color: #4a4060; font-size: 12px; }
.slot.active.empty { height: 120px; }
.slot .sart { aspect-ratio: 5/3; position: relative; }
.slot .sart svg, .slot .sart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.slot .sname { font-family: var(--serif); font-size: 12px; font-weight: 700; padding: 3px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.active .sname { font-size: 13px; }
.slot .hpbar { height: 6px; margin: 3px 6px; background: #2a2337; border-radius: 3px; overflow: hidden; }
.slot .hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf7a, #9bd86a); transition: width .4s; }
.slot .hpbar i.low { background: linear-gradient(90deg, #c41d3a, #e05a3a); }
.slot .sfoot { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 5px; font-size: 11px; gap: 4px; }
.slot .en { letter-spacing: -1px; font-size: 12px; min-height: 16px; }
.slot .dmgc { position: absolute; top: 4px; right: 4px; background: rgba(150,15,35,.92); color: #fff; font-weight: 800; border-radius: 99px; padding: 1px 7px; font-size: 13px; border: 1px solid #ff6b81; }
.slot .stt { position: absolute; top: 4px; left: 4px; display: flex; gap: 2px; flex-wrap: wrap; max-width: 70%; }
.slot .stt span { background: rgba(10,8,16,.85); border-radius: 6px; padding: 0 4px; font-size: 11px; }
.slot .tool { position: absolute; bottom: 4px; right: 4px; background: rgba(10,8,16,.85); border-radius: 6px; padding: 0 3px; font-size: 13px; }
.slot .stg { position: absolute; bottom: 4px; left: 4px; background: rgba(10,8,16,.85); border-radius: 6px; padding: 0 4px; font-size: 10px; color: #f1e9d8; }
.slot.hit { animation: hit .5s; }
@keyframes hit { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); box-shadow: 0 0 0 3px var(--blood); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.slot.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(214,173,82,.5); }

.hand { display: flex; gap: 8px; padding: 8px 12px calc(10px + var(--safe-b)); overflow-x: auto; min-height: 150px; align-items: flex-end; border-top: 1px solid var(--line); background: rgba(12,10,18,.6); }
.hand .card { cursor: pointer; transition: transform .12s; }
.hand .card:hover { transform: translateY(-8px); }
.hand .card.playable { box-shadow: 0 0 0 2px var(--gold), 0 .3em 1em rgba(0,0,0,.5); }

.side { border-left: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; min-height: 0; }
.side .phase { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.side .phase .turn { font-family: var(--serif); font-size: 17px; }
.log { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; color: #d6cde6; }
.log div { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.log div.t { color: var(--gold); font-family: var(--serif); margin-top: 6px; }
.hint { font-size: 12px; color: var(--muted); }

/* ---------- Booster ---------- */
.pack { width: 220px; height: 320px; border-radius: 16px; background: linear-gradient(160deg, #6d1023, #1b1628 70%); border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 0 40px rgba(196,29,58,.35); cursor: pointer; transition: transform .2s; font-family: var(--serif); text-align: center; padding: 18px; }
.pack:hover { transform: rotate(-2deg) scale(1.03); }
.pack .pl { font-size: 26px; color: #fff; text-shadow: 0 0 12px var(--blood); }
.reveal .card { animation: rev .5s backwards; }
@keyframes rev { from { opacity: 0; transform: rotateY(90deg) scale(.8); } }

/* ---------- Tausch ---------- */
.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; }
.trade > div { display: flex; flex-direction: column; min-height: 0; }
.trade > div + div { border-left: 1px solid var(--line); }
.trade h3 { padding: 12px 16px 0; font-size: 16px; }
.tradebar { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg2); }

.prose { max-width: 820px; margin: 0 auto; padding: 20px; line-height: 1.6; }
.prose h3 { margin: 18px 0 6px; color: var(--gold); }
.prose table { border-collapse: collapse; font-size: 14px; }
.prose td, .prose th { border: 1px solid var(--line); padding: 4px 10px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.opt { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.opt.sel { border-color: var(--gold); background: #2a2233; }
.opt .t { font-family: var(--serif); font-weight: 700; }
.opt .d { font-size: 12px; color: var(--muted); margin-top: 3px; }
.opt.bad { opacity: .55; }

/* ---------- Mobil ---------- */
.logtoggle { display: none; }
@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; }
  .side { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); z-index: 40; transform: translateX(100%); transition: transform .2s; }
  .side.open { transform: none; }
  .logtoggle { display: inline-flex; }
  .slot { width: 84px; } .slot.active { width: 116px; }
  .slot .sname { font-size: 10px; } .slot .sfoot { font-size: 9px; } .slot .en { font-size: 10px; }
  .stadium, .piles { width: 76px; } .pile { width: 56px; height: 44px; }
  .hand { min-height: 112px; } .hand .card.m { font-size: 7.6px; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .deckedit { grid-template-columns: 1fr; grid-template-rows: 1fr 45%; }
  .deckedit .right { border-left: 0; border-top: 1px solid var(--line); }
  .trade { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .trade > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .card.l { font-size: 12.5px; }
  .mobile-bar { display: flex !important; }
}
.mobile-bar { display: none; gap: 6px; padding: 6px 12px; justify-content: space-between; align-items: center; }

/* ---------- Ziel-Hervorhebung & Drag and Drop ---------- */
.hand .card { touch-action: pan-x; }
.targeting .field-area .slot:not(.drop-ok):not(.bench-drop) { filter: grayscale(.75) brightness(.55); transition: filter .2s; }
.targeting .hand .card:not(.drag-src-hint):not(.drag-src) { filter: grayscale(.6) brightness(.6); }
.targeting .stadium:not(.drop-ok), .targeting .piles { opacity: .5; }
.slot.drop-ok { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 18px rgba(214,173,82,.55); animation: goldpulse 1.3s ease-in-out infinite; filter: none !important; }
.evolving .slot.drop-ok { outline-width: 3px; box-shadow: 0 0 26px rgba(255,214,120,.75); }
.slot.drop-hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 32px rgba(255,214,120,.95); }
@keyframes goldpulse { 0%, 100% { box-shadow: 0 0 10px rgba(214,173,82,.35); } 50% { box-shadow: 0 0 26px rgba(214,173,82,.85); } }
[data-mbench].drop-ok, .mid.drop-ok, .stadium.drop-ok { border-radius: 14px; outline: 2px dashed var(--gold); outline-offset: 4px; }
.mid, .stadium { position: relative; }
.mid[data-hint]::after, .stadium[data-hint]::after { content: attr(data-hint); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(214,173,82,.15); border: 1px solid var(--gold); color: #ffe7a8; padding: 8px 14px; border-radius: 10px; font-family: var(--serif); pointer-events: none; white-space: nowrap; z-index: 3; }
.slot.bench-drop { border-color: var(--gold); color: #ffe7a8; height: 90px; width: 132px; cursor: default; background: rgba(214,173,82,.08); }
.slot.bench-drop.drop-hover { background: rgba(214,173,82,.22); transform: scale(1.05); }
.drag-ghost { position: fixed !important; z-index: 120; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.12); transition: transform .1s, left .0s, top .0s; filter: drop-shadow(0 18px 22px rgba(0,0,0,.7)); font-size: 8px !important; }
.drag-ghost.over { transform: translate(-50%, -50%) rotate(0deg) scale(1.2); filter: drop-shadow(0 0 18px rgba(255,214,120,.9)); }
.drag-ghost.drop-in { transition: left .22s ease-in, top .22s ease-in, transform .22s ease-in, opacity .22s; transform: translate(-50%, -50%) scale(.35); opacity: 0; }
.drag-ghost.fly-home { transition: left .25s ease-out, top .25s ease-out, transform .25s; transform: translate(-50%, -50%) scale(1); }
.hand .card.drag-src { opacity: .25; transform: none !important; }
.slot.landed { animation: landed .55s ease-out; }
@keyframes landed { 0% { transform: scale(1.12); box-shadow: 0 0 0 0 rgba(255,214,120,.9); } 100% { transform: none; box-shadow: 0 0 0 22px rgba(255,214,120,0); } }
.spark { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #d6ad52); z-index: 130; pointer-events: none; animation: spark .6s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }

/* ---------- Erfolge ---------- */
.achgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 16px; align-content: start; }
.ach { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.ach .ai { font-size: 30px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #120e1a; border-radius: 10px; flex-shrink: 0; filter: grayscale(1) opacity(.6); }
.ach.done { border-color: #7a6230; background: linear-gradient(135deg, #2a2215, var(--panel)); }
.ach.done .ai { filter: none; box-shadow: 0 0 14px rgba(214,173,82,.35); }
.ach.veiled { border-style: dashed; }
.ach .at { flex: 1; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.ach .at .muted { font-size: 12.5px; }
.ach .rw { font-size: 12px; color: var(--gold); }
.prog { height: 6px; background: #2a2337; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #8f6a1f, var(--gold)); }
.achmini { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 14px; }
.achmini .ai { font-size: 22px; }
.menu-grid { grid-template-columns: repeat(2, minmax(160px, 240px)); }
.card.r-P { box-shadow: 0 0 1.1em rgba(140,210,255,.55), 0 .3em 1em rgba(0,0,0,.5); }
.mid { flex: 1 0 auto; }
.hand .card.s { font-size: 6.9px; }
.hand .card:hover { transform: translateY(-10px) scale(1.04); }
@media (max-height: 820px) { .slot { width: 112px; } .slot.active { width: 140px; } .hand { min-height: 130px; } .hand .card.s { font-size: 6.2px; } }

/* ---------- Ton-Knopf ---------- */
#soundbtn { position: fixed; top: 9px; right: 12px; z-index: 90; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(27,22,40,.9); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: transform .1s, border-color .2s; padding: 0; }
#soundbtn:hover { border-color: var(--gold); transform: scale(1.06); }
#soundbtn.off { opacity: .75; }
.topbar { padding-right: 62px; }
.rowlbl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rowlbl input[type=range] { width: 200px; accent-color: var(--blood); }
.verlink { color: var(--muted); font-size: 12px; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.verlink:hover { color: var(--gold); border-color: var(--gold); }
.chlog h4 { margin: 4px 0 4px; font-family: var(--serif); color: var(--gold); font-size: 16px; }
.chlog ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.5; font-size: 14px; }

/* ---------- Menü-Hintergrund ---------- */
.menu > *:not(.menu-bg) { position: relative; z-index: 1; }
.menu-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.menu-bg .moon { position: absolute; top: 6%; right: 12%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fbf3dc, #d9cfae 60%, #b8ad8c); box-shadow: 0 0 60px 20px rgba(255,240,200,.18), 0 0 160px 60px rgba(196,29,58,.12); opacity: .85; animation: moonglow 8s ease-in-out infinite; }
@keyframes moonglow { 50% { box-shadow: 0 0 80px 30px rgba(255,240,200,.25), 0 0 200px 80px rgba(196,29,58,.16); } }
.menu-bg .fog { position: absolute; left: -50%; width: 200%; height: 45%; bottom: -10%; background: radial-gradient(ellipse at 30% 60%, rgba(160,140,190,.14), transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(160,140,190,.10), transparent 55%); animation: fog 40s linear infinite; filter: blur(8px); }
.menu-bg .fog.f2 { bottom: -18%; animation-duration: 65s; animation-direction: reverse; opacity: .8; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
.mbat { position: absolute; left: -60px; opacity: .55; filter: brightness(.4); animation: fly linear infinite; }
@keyframes fly { 0% { transform: translate(0, 0) scaleX(-1); } 25% { transform: translate(30vw, -30px) scaleX(-1); } 50% { transform: translate(60vw, 20px) scaleX(-1); } 75% { transform: translate(90vw, -20px) scaleX(-1); } 100% { transform: translate(115vw, 10px) scaleX(-1); } }

/* ---------- Effekt-Ebene ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 110; overflow: hidden; }
.fxp { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); }
.fxp.spark { width: 3px; height: 12px; border-radius: 2px; box-shadow: 0 0 6px currentColor; }
.fxp.ember { width: 6px; height: 6px; box-shadow: 0 0 10px currentColor; }
.fxp.star, .fxp.rune, .fxp.bat { width: auto; height: auto; font-size: 16px; text-shadow: 0 0 8px currentColor; }
.fxp.rune { font-size: 14px; font-weight: 700; }
.fxp.confetti { width: 8px; height: 12px; border-radius: 2px; transform: none; }
.fxtext { position: absolute; font-family: var(--serif); font-weight: 800; font-size: 30px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 14px rgba(0,0,0,.8); white-space: nowrap; transform: translate(-50%, -50%); }
.fxtext.dmg { color: #ff5a6e; font-size: 34px; text-shadow: 0 2px 0 #3a0a12, 0 0 18px rgba(255,40,70,.7); }
.fxtext.dmg.weak { color: #ffd23f; font-size: 42px; text-shadow: 0 2px 0 #4a2a00, 0 0 22px rgba(255,200,40,.9); }
.fxtext.weaklbl { font-size: 18px; color: #ffd23f; letter-spacing: .12em; }
.fxtext.healtxt { color: #8dffa6; text-shadow: 0 2px 0 #0b3a17, 0 0 14px rgba(80,255,130,.6); }
.fxtext.poptxt { font-size: 20px; font-family: var(--sans); }
.fxtext.evotxt { font-size: 22px; color: #ffe7a8; text-shadow: 0 0 18px rgba(255,200,80,.9), 0 2px 0 #3a2a00; }
.fxtext.kotxt { font-size: 52px; }
.fxring { position: absolute; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); animation: ring .55s ease-out forwards; }
@keyframes ring { to { width: 200px; height: 200px; opacity: 0; border-width: 1px; } }
.fxflash { position: absolute; inset: 0; }
.fxpillar { position: absolute; height: 120vh; transform: translateX(-50%) translateY(-100%); background: linear-gradient(0deg, rgba(255,230,150,.75), rgba(255,230,150,.25) 50%, transparent); filter: blur(6px); animation: pillar 1.4s ease-out forwards; transform-origin: bottom; }
@keyframes pillar { 0% { opacity: 0; transform: translateX(-50%) translateY(-100%) scaleX(.2); } 25% { opacity: 1; transform: translateX(-50%) translateY(-100%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-100%) scaleX(.6); } }
.fxrays { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255,225,140,.45) 0deg 6deg, transparent 6deg 22deg); mask: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); animation: rays 1.4s ease-out forwards; }
@keyframes rays { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(1.2); } }
.fxghost { position: absolute; }
.fxghost > .slot { width: 100% !important; height: 100%; }
.fxcoin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; perspective: 600px; }
.fxcoin .c3d { position: relative; width: 96px; height: 96px; transform-style: preserve-3d; }
.fxcoin .face { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 34px; backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #fff3c4, #d6ad52 55%, #8f6a1f); border: 4px solid #b38a33; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 12px rgba(0,0,0,.3); color: #3a2400; }
.fxcoin .face small { font-size: 10px; font-weight: 800; letter-spacing: .15em; font-family: var(--sans); }
.fxcoin .zahl { transform: rotateY(180deg); }
.fxcoin .clbl { font-family: var(--serif); font-size: 15px; background: rgba(12,10,18,.85); padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); }
.fxbanner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 14px 70px; background: linear-gradient(90deg, transparent, rgba(12,10,18,.92) 15%, rgba(12,10,18,.92) 85%, transparent); border-top: 1px solid rgba(214,173,82,.6); border-bottom: 1px solid rgba(214,173,82,.6); }
.fxbanner span { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: .08em; color: #f1e9d8; text-shadow: 0 0 18px rgba(196,29,58,.6); }
.fxbanner.mine span { color: #ffe7a8; text-shadow: 0 0 18px rgba(214,173,82,.7); }
.fxbanner.win span { font-size: 56px; color: #ffe7a8; text-shadow: 0 0 30px rgba(255,210,100,.9); }
.fxbanner.lose span { font-size: 56px; color: #ff7a8a; }
.fxgloom { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(60,0,10,.75)); }
@media (prefers-reduced-motion: reduce) { .mbat, .menu-bg .fog, .menu-bg .moon { animation: none; } }

/* ---------- 1.3: Hintergründe ---------- */
.menu-bg svg, .board-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menu-bg .moon { display: none; }
.screen.game > .board-bg, .screen.game > .board-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.screen.game > .board-shade { background: radial-gradient(ellipse at 50% 45%, rgba(6,4,10,.18), rgba(6,4,10,.7) 80%), linear-gradient(180deg, rgba(6,4,10,.25), rgba(6,4,10,.4)); }
.screen.game > *:not(.board-bg):not(.board-shade) { position: relative; z-index: 1; }
.game .field-area { background: transparent; }
.game .side { background: rgba(12,10,18,.82); backdrop-filter: blur(4px); }
.game .hand { background: rgba(8,6,12,.78); backdrop-filter: blur(4px); }
.scene-tag { align-self: flex-start; font-size: 12px; color: rgba(241,233,216,.6); padding: 2px 4px 6px; letter-spacing: .04em; }
.story > *:not(.menu-bg) { position: relative; z-index: 1; }
.btn.primary2 { background: linear-gradient(180deg, #3a2a5a, #241a3a); border-color: #6a4fa0; font-weight: 600; }
.btn.primary2:hover { background: linear-gradient(180deg, #46336c, #2c2046); }
.menu-grid .btn.primary2 .sub { color: #d8c8ff; }

/* ---------- Hotseat-Übergabe ---------- */
.handover { position: fixed; inset: 0; z-index: 95; background: radial-gradient(ellipse at center, #1a0d18, #050307 70%); display: flex; align-items: center; justify-content: center; animation: fade .25s; }
.handover .hbox { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px; }
.handover h2 { font-size: clamp(26px, 4vw, 40px); }

/* ---------- Tutorial ---------- */
.coach { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 30 !important; width: min(720px, calc(100% - 24px)); display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgba(42,30,18,.97), rgba(27,22,40,.97)); border: 1px solid var(--gold); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 24px rgba(214,173,82,.25); animation: fade .3s; }
.coach .cav { font-size: 34px; }
.coach .ctx { flex: 1; font-size: 15px; line-height: 1.45; }
.coach .ctx b:first-child { font-family: var(--serif); color: var(--gold); }
.coach .cbtns { display: flex; flex-direction: column; gap: 6px; }
.coach-hl { outline: 3px solid #ffd77a !important; outline-offset: 3px; border-radius: 12px; animation: coachpulse 1.2s ease-in-out infinite; position: relative; z-index: 5; }
@keyframes coachpulse { 50% { outline-color: rgba(255,215,122,.25); } }

/* ---------- Story ---------- */
.chapters { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.chapter { display: flex; gap: 14px; align-items: center; background: rgba(27,22,40,.88); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: transform .12s, border-color .2s; backdrop-filter: blur(3px); }
.chapter:hover { transform: translateX(4px); border-color: var(--blood); }
.chapter .chn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; font-weight: 700; background: #2a0d16; border: 2px solid var(--blood); flex-shrink: 0; }
.chapter.done .chn { background: #2a2215; border-color: var(--gold); color: var(--gold); }
.chapter.locked { opacity: .5; cursor: not-allowed; }
.chapter.locked .chn { border-color: var(--line); background: #15111d; }
.chapter .cht { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.chapter .cht b { font-family: var(--serif); font-size: 17px; }
.chapter .rw { font-size: 12px; color: var(--gold); }
.storytext { font-family: var(--serif); font-size: 16px; line-height: 1.6; max-width: 620px; }
.storytext p { margin: 0 0 10px; }

/* ---------- Versionen ---------- */
.versions .vitem { border-left: 3px solid var(--line); padding: 4px 0 4px 18px; margin-bottom: 18px; position: relative; }
.versions .vitem::before { content: ''; position: absolute; left: -8px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--line); }
.versions .vitem.cur { border-color: var(--gold); }
.versions .vitem.cur::before { background: var(--gold); border-color: var(--gold); }
.versions .vhead { display: flex; gap: 10px; align-items: center; }
.versions .vtag { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold); }
.versions ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
.menu-grid { grid-template-columns: repeat(2, minmax(160px, 240px)); }
.screen.game > .coach { position: absolute !important; }

/* ---------- v2.0: Profil, Ränge, Rahmen, Gedenken ---------- */
.avatar { --s: 44px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2c4a, #140e1c 75%); border: 2px solid #4a3f5c; flex: none; vertical-align: middle; }
.avatar .ai { font-size: calc(var(--s) * .52); line-height: 1; filter: drop-shadow(0 2px 2px #000a); }
.avatar.f-wood { border: calc(var(--s) * .08) solid #7a4d24; box-shadow: inset 0 0 0 1px #c08a4f; }
.avatar.f-silver { border: calc(var(--s) * .08) solid #c9d1dc; box-shadow: 0 0 8px #c9d1dc66; }
.avatar.f-blood { border: calc(var(--s) * .08) solid #9b1020; box-shadow: 0 0 10px #d0182c88, inset 0 0 8px #d0182c66; }
.avatar.f-mystic { border: calc(var(--s) * .08) solid #8a5cff; box-shadow: 0 0 12px #a97bff99; animation: avglow 3s ease-in-out infinite; }
.avatar.f-crypt { border: calc(var(--s) * .08) dashed #6f7d6a; box-shadow: inset 0 0 10px #000; }
.avatar.f-gold { border: calc(var(--s) * .08) solid var(--gold); box-shadow: 0 0 12px #e8b54a99; }
.avatar.f-neon { border: calc(var(--s) * .07) solid #ff4fd8; box-shadow: 0 0 6px #ff4fd8, 0 0 16px #4fd8ff; animation: avglow 1.6s ease-in-out infinite; }
.avatar.f-hellfire { border: calc(var(--s) * .08) solid #ff6a1a; box-shadow: 0 0 14px #ff3d00, inset 0 0 10px #ff6a1a88; animation: avglow 1.2s ease-in-out infinite; }
.avatar.f-legend { border: calc(var(--s) * .09) solid transparent; background: radial-gradient(circle at 35% 30%, #3a2c4a, #140e1c 75%) padding-box, conic-gradient(#e8b54a, #ff4fd8, #8a5cff, #4fd8ff, #e8b54a) border-box; box-shadow: 0 0 16px #e8b54aaa; }
@keyframes avglow { 50% { filter: brightness(1.35); } }
.profbadge { position: fixed; top: 12px; left: 14px; z-index: 3; display: flex; gap: 10px; align-items: center; background: #0d0912cc; border: 1px solid var(--line); border-radius: 30px; padding: 5px 14px 5px 5px; cursor: pointer; backdrop-filter: blur(4px); }
.profbadge .rk { font-size: 12px; color: var(--gold); }
.profbadge .prog { width: 110px; }
.memoriam { position: relative; z-index: 1; text-align: center; font-family: var(--serif); color: #cbbfd9; font-size: 13px; opacity: .85; margin: 6px auto 18px; padding: 8px 16px; border-top: 1px solid #ffffff14; max-width: 620px; }
.memoriam span { font-size: 12px; color: #a99cb8; }
.profile { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.profhead { display: flex; gap: 20px; align-items: center; background: #ffffff08; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.profhead > div:last-child { flex: 1; min-width: 0; }
.profhead .rk { color: var(--gold); font-family: var(--serif); font-size: 17px; }
.prog.big { height: 10px; border-radius: 5px; margin: 8px 0 4px; }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.avopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #ffffff06; text-align: center; }
.avopt.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #e8b54a55; }
.avopt .fn { font-size: 11px; }
.avopt.locked > .avatar { filter: grayscale(1) brightness(.45); }
.avopt .lk { font-size: 10px; color: #a99cb8; line-height: 1.25; }
.ranklist { display: flex; flex-direction: column; gap: 4px; }
.rrow { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; background: #ffffff05; opacity: .55; }
.rrow.got { opacity: 1; } .rrow.cur { background: #e8b54a22; border: 1px solid #e8b54a66; }
.rrow .rn { width: 24px; text-align: center; color: var(--gold); font-weight: 700; } .rrow .rt { flex: 1; font-family: var(--serif); }
.hints { margin-top: 8px; color: #ffd27a; font-size: 12px; }
@media (max-width: 700px) { .profbadge { position: relative; top: 0; left: 0; margin: 10px auto 0; width: max-content; } .profhead { flex-direction: column; text-align: center; } }
@media (min-width: 900px) { .menu-grid { grid-template-columns: repeat(3, minmax(160px, 230px)); } }
.screen.menu > .profbadge { position: absolute; top: 14px; left: 14px; z-index: 4; }
@media (max-width: 700px) { .screen.menu > .profbadge { position: relative; top: 0; left: 0; } }

/* ---------- v2.1: Deck-Bereiche & Easter Eggs ---------- */
.dsec { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--serif); font-size: 20px; }
.decktile.pre { background: #ffffff06; border-style: dashed; }
.menu-bg .egg-moon { pointer-events: auto; cursor: default; }
.grrargh { position: fixed; bottom: 10px; left: -140px; z-index: 9000; display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: grrwalk 6.5s linear forwards; }
.grrargh .zb { font-size: 64px; animation: grrbob .5s ease-in-out infinite alternate; display: inline-block; }
.grrargh .bub { background: #f6eee0; color: #1a1205; font-family: var(--serif); font-weight: 700; padding: 4px 12px; border-radius: 14px; margin-bottom: 4px; font-size: 18px; }
@keyframes grrwalk { to { left: calc(100% + 140px); } }
@keyframes grrbob { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-6px); } }
body.bored #app { filter: saturate(.4) hue-rotate(-12deg) contrast(1.15); transition: filter .6s; }
.bored-ov { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: grid; place-items: center; animation: bfade .6s ease-out; }
.bored-ov .veins { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, #000c 100%), repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, #2a000822 23px 24px); }
.bored-ov .txt { position: relative; font-family: var(--serif); font-size: clamp(48px, 10vw, 120px); color: #111; -webkit-text-stroke: 2px #b0102a; text-shadow: 0 0 30px #b0102a, 0 0 80px #000; letter-spacing: .04em; animation: bpulse 1.4s ease-in-out infinite; }
.bored-ov.out { opacity: 0; transition: opacity 1s; }
@keyframes bfade { from { opacity: 0; } }
@keyframes bpulse { 50% { transform: scale(1.04); text-shadow: 0 0 50px #ff1a3d, 0 0 90px #000; } }
.cheese-ov { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: grid; place-items: center; align-content: center; gap: 10px; background: #0008; animation: bfade .4s; }
.cheese-ov .slices { font-size: 120px; animation: grrbob .4s ease-in-out infinite alternate; }
.cheese-ov .txt { font-family: var(--serif); font-style: italic; font-size: 26px; color: #ffe9a8; text-align: center; padding: 0 20px; }

/* ---------- v2.3: Holos, Booster-Arten, Events, Herausforderung ---------- */
.card.holo { box-shadow: 0 0 1.2em rgba(160,220,255,.55), 0 .3em 1em rgba(0,0,0,.5); }
.card.holo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.28) 32%, rgba(255,230,0,.28) 42%, rgba(0,255,180,.28) 52%, rgba(0,160,255,.28) 62%, transparent 75%);
  background-size: 250% 250%; mix-blend-mode: color-dodge; animation: holo 4s linear infinite; }
.card.holo .art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 .5em, rgba(255,255,255,.12) .5em .6em); mix-blend-mode: overlay; pointer-events: none; }
@keyframes holo { 0% { background-position: 0% 0%; } 100% { background-position: 250% 250%; } }
.holob { position: absolute; left: .4em; bottom: .4em; z-index: 4; font-size: .8em; font-weight: 800; letter-spacing: .08em; padding: .1em .45em; border-radius: .4em; color: #08131c; background: linear-gradient(90deg, #ff9de6, #ffe98a, #8affd8, #8ad4ff); }
.packrow { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pack.ptype { position: relative; overflow: hidden; }
.pack .picon { font-size: 58px; filter: drop-shadow(0 4px 8px #000a); }
.pack .pd { font-family: var(--sans); font-size: 13px; color: #e8dcc8; text-shadow: 0 1px 3px #000; }
.pack .prare { position: absolute; top: 10px; left: 0; right: 0; font-size: 12px; letter-spacing: .2em; color: #ffd77a; }
.pack.mystery .picon::after { content: ' ?'; font-family: var(--serif); color: var(--gold); }
.pack.mini { width: 120px; height: 180px; padding: 8px; gap: 4px; cursor: default; }
.pack.mini .picon { font-size: 32px; } .pack.mini .pl { font-size: 14px; } .pack.mini .pd { display: none; }
.pack.shake { animation: pshake .5s ease-in-out 2; cursor: default; }
.pack.rarepack { border-color: #ff8a2a; box-shadow: 0 0 60px #ff5a00, 0 0 120px #ff3d0066; }
@keyframes pshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.04); } }
.packtypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; width: min(900px, 100%); }
.ptinfo { background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13px; }
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; justify-items: center; }
.artcell { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.evbanner { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; max-width: 760px; margin: 0 auto 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, #3a1a08cc, #1a0b14cc); border: 1px solid #e8b54a77; box-shadow: 0 0 24px #e8b54a33; }
.evbanner .ei { font-size: 34px; } .evbanner > div { flex: 1; } .evbanner .muted { font-size: 12px; }
.eventdeco { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; opacity: .5; }
.eventdeco span { position: absolute; top: -40px; animation: fall linear infinite; }
.eventdeco.ev-newyear span { top: auto; bottom: -40px; animation-name: rise; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1.3); opacity: 0; } }
.daily { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.dcard { display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, #2a1838ee, #160e1cee); border: 1px solid #e8b54a66; border-radius: 16px; padding: 18px; }
.dcard .dico { font-size: 56px; }
.cstats { font-size: 12px; color: #cbe6ff; margin-top: 4px; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .twocol { grid-template-columns: 1fr; } }
.opt.nemesis { border-color: #ff5a6e; box-shadow: 0 0 14px #ff2a4a55; }
.musical .board-shade { background: radial-gradient(circle at 50% 0%, rgba(255,215,120,.18), transparent 60%), rgba(10,6,14,.55) !important; }

/* ---------- v2.4: Booster-Packs, Aufreißen, Shop, Aufwertung ---------- */
.packfan { position: relative; width: 300px; height: 380px; cursor: pointer; }
.packfan img { position: absolute; left: 50%; top: 10px; width: 210px; transform-origin: 50% 110%; transform: translateX(-50%) rotate(calc((var(--i) - 1.5) * 9deg)) translateY(calc(var(--i) * -2px)); filter: drop-shadow(0 10px 18px #000a); transition: transform .3s; }
.packfan:hover img { transform: translateX(-50%) rotate(calc((var(--i) - 1.5) * 13deg)) translateY(-10px); }
.packfan .fanlbl { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; font-family: var(--serif); font-size: 18px; text-shadow: 0 2px 6px #000; }
.pkimg { width: 210px; cursor: pointer; transition: transform .2s; filter: drop-shadow(0 10px 18px #000a); }
.pkimg img { width: 100%; display: block; }
.pkimg:hover { transform: rotate(-2deg) scale(1.04); }
.ptinfo { display: flex; gap: 10px; align-items: center; }
.ptinfo .ptimg { width: 46px; flex: none; filter: drop-shadow(0 3px 5px #000a); }
.tearstage { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
.tearpack { position: relative; width: 260px; aspect-ratio: 2 / 3; animation: tpIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.tearpack img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 22px #000b); transition: transform .65s cubic-bezier(.3, .1, .3, 1), opacity .65s; }
.tearstage.rarepack .tearpack { filter: drop-shadow(0 0 30px #ff6a00); }
.tearline { position: absolute; left: 3%; top: 10.5%; height: 3px; width: 0; border-radius: 2px; background: linear-gradient(90deg, #fff, #ffe7a6); box-shadow: 0 0 10px #fff, 0 0 22px #ffd77a; transition: width .35s ease-out; }
.tearglow { position: absolute; left: 0; right: 0; top: 0; height: 12%; opacity: 0; background: radial-gradient(ellipse at 50% 100%, #fff8, transparent 70%); transition: opacity .4s; }
.tearname { font-family: var(--serif); font-size: 20px; opacity: 0; animation: fadeUp .5s .3s forwards; }
.tearstage.notch .tearline { width: 16%; }
.tearstage.notch .tp-top { transform: rotate(-2deg) translateY(-2px); }
.tearstage.rip .tearline { width: 94%; transition-duration: .25s; }
.tearstage.rip .tearglow { opacity: 1; }
.tearstage.rip .tp-top { transform: translate(90px, -150px) rotate(28deg); opacity: 0; transition-delay: .18s; }
.tearstage.out .tearpack { animation: tpOut .55s ease-in forwards; }
.tearstage.out .tearline, .tearstage.out .tearglow { opacity: 0; }
@keyframes tpIn { from { transform: scale(.6) translateY(40px); opacity: 0; } }
@keyframes tpOut { to { transform: translateY(160px) scale(.85); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal.fly .card { animation: flyOut .6s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes flyOut { from { transform: translateY(-140px) scale(.5) rotate(-8deg); opacity: 0; } }
.evbanner.soon { border-color: #9fe8ff55; box-shadow: 0 0 20px #9fe8ff22; background: linear-gradient(90deg, #0d1a2acc, #1a0b14cc); }
.evcd { font-size: 12px; color: #ffd77a; margin-top: 2px; }
.coinb { font-size: 12px; color: #ffd77a; font-weight: 700; margin-left: 4px; }
.coinpill { background: #2a2010; border: 1px solid #e8b54a77; color: #ffd77a; padding: 4px 12px; border-radius: 20px; font-weight: 700; }
.shophint { padding: 6px 16px 0; margin: 0; font-size: 13px; }
.extra-f { padding-top: 0 !important; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; padding: 14px 16px; align-content: start; }
.shopcell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shopcell .card.s { font-size: 7.4px; }
.shopbar { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
/* Aufwertungen (nur Optik) */
.card.tier-glitter::before, .card.tier-gold::before, .card.tier-blood::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, #fff6c0 0 .8px, transparent 1.3px);
  background-size: 2.2em 2.6em, 1.7em 1.9em; background-position: 0 0, .8em 1.1em; mix-blend-mode: screen; opacity: .75; animation: sparkle 2.4s linear infinite; }
@keyframes sparkle { 0% { background-position: 0 0, .8em 1.1em; opacity: .45; } 50% { opacity: .9; } 100% { background-position: 2.2em -2.6em, -.9em 3em; opacity: .45; } }
.card.tier-gold { background: linear-gradient(135deg, #8a6a1c, #ffe9a0 25%, #b8892a 50%, #fff2c4 75%, #8a6a1c) !important; box-shadow: 0 0 1.1em rgba(255,215,120,.6), 0 .3em 1em rgba(0,0,0,.5); }
.card.tier-blood { background: radial-gradient(circle at 20% 10%, #ff2a4a, transparent 40%), radial-gradient(circle at 85% 90%, #ff2a4a, transparent 45%), linear-gradient(160deg, #5a0010, #b0102a 40%, #3a0008) !important; box-shadow: 0 0 1.2em rgba(255,20,60,.6), 0 .3em 1em rgba(0,0,0,.5); }
.card.tier-blood .inner { box-shadow: inset 0 0 0 .12em #3a0008; }
.card.tier-blood::after { content: ''; position: absolute; left: 10%; top: -.1em; width: 80%; height: 1.2em; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at 10% 0, #9b0a20 0 .35em, transparent .4em), radial-gradient(ellipse at 35% 0, #9b0a20 0 .25em, transparent .3em), radial-gradient(ellipse at 62% 0, #9b0a20 0 .45em, transparent .5em), radial-gradient(ellipse at 88% 0, #9b0a20 0 .3em, transparent .35em); }
.card.upgradable .art::before { content: '⬆️'; position: absolute; right: .3em; bottom: .3em; z-index: 5; font-size: 1.3em; filter: drop-shadow(0 0 4px #ffd77a); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

/* ---------- v2.5: zwei Stadien ---------- */
.stadium { display: flex; flex-direction: column; gap: 8px; }
.stadium .sbox { font-size: 11px; }
.stadium .sbox.opp { border-color: #ff5a6e66; background: rgba(176,23,47,.08); }
.stadium .sbox.mine { border-color: #6fd08c66; }
.stadium .sown { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }

/* ---------- v2.5: einheitliche Kartengröße ---------- */
.card { height: 21em; }
.card .inner { overflow: hidden; }
.card.dense .atk, .card.dense .abil, .card.dense .ttxt { font-size: .9em; line-height: 1.18; }
.card.xdense .atk, .card.xdense .abil { font-size: .8em; line-height: 1.12; }
.card.xdense .flavor, .card.dense .flavor { display: none; }
.card .ftr { margin-top: auto; }

/* ---------- Glitzer neu: funkelnde Sterne + Lichtreflex ---------- */
.card.tier-glitter::before, .card.tier-gold::before, .card.tier-blood::before { content: none !important; animation: none; }
.card .sparkles { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.card .sparkles i { position: absolute; width: calc(1.1em * var(--sz, 1)); height: calc(1.1em * var(--sz, 1)); margin: calc(-.55em * var(--sz, 1)); opacity: 0;
  background: radial-gradient(circle, #fffbe8 0 10%, #ffe9a8 22%, transparent 60%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 .25em #ffd77a); animation: twinkle 2.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: .5; transform: scale(.6) rotate(80deg); } }
.card .sweep { position: absolute; inset: -20% -60%; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,248,220,var(--sw-op, .35)) 50%, transparent 60%);
  animation: sweep var(--sw-period, 7s) ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-45%); opacity: 0; } 4% { opacity: 1; } 14% { transform: translateX(45%); opacity: 1; } 16%, 100% { transform: translateX(45%); opacity: 0; } }

/* ---------- Special Illustration Rare (Full Art) ---------- */
.card.fullart { background: linear-gradient(135deg, #ff9de6, #ffe98a, #8affd8, #8ad4ff, #c49dff, #ff9de6) !important; background-size: 300% 300% !important; animation: faBorder 6s linear infinite; box-shadow: 0 0 1.3em rgba(255,157,230,.55), 0 .3em 1em rgba(0,0,0,.5); }
@keyframes faBorder { to { background-position: 300% 300%; } }
.card.fullart .inner { position: relative; background: transparent; color: #fff; }
.card.fullart .art { position: absolute; inset: 0; aspect-ratio: auto !important; width: 100% !important; height: 100% !important; border: none; border-radius: .55em; z-index: 0; }
.card.fullart .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 45%, rgba(0,0,0,.78) 70%, rgba(0,0,0,.9) 100%); pointer-events: none; }
.card.fullart .hdr, .card.fullart .meta, .card.fullart .abil, .card.fullart .atk, .card.fullart .ftr, .card.fullart .flavor { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 2px #000; }
.card.fullart .hdr { margin-bottom: 7.5em; } .card.fullart .hp { color: #ffd2dc; }
.card.fullart .abil { background: rgba(0,0,0,.45); border-color: #ffd77a88; color: #fff; }
.card.fullart .meta { margin-top: auto; }
.card.fullart .count, .card.fullart .newb, .card.fullart .holob, .card.fullart .bb { z-index: 3; }
.fab { position: absolute; right: .4em; top: 2.2em; z-index: 3; font-size: .75em; font-weight: 800; letter-spacing: .08em; padding: .1em .45em; border-radius: .4em; color: #2a0a2a; background: linear-gradient(90deg, #ff9de6, #ffe98a, #8ad4ff); }

/* ---------- Favoriten, Sortierung ---------- */
.favb { position: absolute; left: .35em; top: .35em; z-index: 4; font-size: 1.1em; filter: drop-shadow(0 0 3px #000); }
.favrow { display: flex; gap: 10px; flex-wrap: wrap; }
.sortsel { margin-left: 10px; padding: 4px 8px; font-size: 13px; }

/* ---------- Entwicklung sichtbar ---------- */
.evob { position: absolute; left: .3em; right: .3em; bottom: .3em; z-index: 4; text-align: center; font-size: .95em; font-weight: 800; padding: .15em .3em; border-radius: .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evob.can { background: linear-gradient(90deg, #8f6a1f, #ffd77a); color: #1a1205; box-shadow: 0 0 .6em #ffd77a; }
.evob.wait { background: rgba(30,24,40,.85); color: #b9aec9; }
.hand .card.canevo { box-shadow: 0 0 0 2px #ffd77a, 0 0 18px rgba(255,215,120,.7); }
.slot.evotarget { box-shadow: 0 0 0 2px rgba(255,215,120,.85), 0 0 16px rgba(255,215,120,.55); animation: evoPulse 1.8s ease-in-out infinite; }
.slot.evotarget::after { content: '⬆️'; position: absolute; right: 4px; top: 4px; font-size: 14px; z-index: 4; }
@keyframes evoPulse { 50% { box-shadow: 0 0 0 2px rgba(255,215,120,.4), 0 0 6px rgba(255,215,120,.25); } }

/* ---------- Menü: Mini-Events & Spotlight ---------- */
.evbanner.mini { border-color: #ff9de677; background: linear-gradient(90deg, #2a0f2acc, #1a0b14cc); }
.spotline { position: relative; z-index: 2; text-align: center; font-size: 13px; color: #ffe7a8; margin-top: 8px; cursor: help; }

/* ---------- Shop-Reiter, Angebote, Booster-Kauf ---------- */
.shoptabs { display: flex; gap: 8px; padding: 10px 16px 0; }
.deals { margin: 12px 16px 0; padding: 12px; border: 1px solid #ff8a2a66; border-radius: 14px; background: linear-gradient(120deg, #2a1206cc, #160e1ccc); }
.dealhead { margin-bottom: 8px; }
.dealrow { display: flex; gap: 14px; flex-wrap: wrap; }
.shopcell.deal .card { box-shadow: 0 0 14px rgba(255,138,42,.5); }
.boostershop { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding: 24px 16px 6px; }
.bsoffer { position: relative; width: 280px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff08; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bsoffer.best { border-color: #e8b54a; box-shadow: 0 0 22px rgba(232,181,74,.3); }
.bsoffer h3 { margin: 4px 0 0; }
.bestbadge { position: absolute; top: -12px; right: -10px; background: linear-gradient(90deg, #c41d3a, #ff5a6e); color: #fff; font-weight: 800; padding: 4px 10px; border-radius: 20px; transform: rotate(8deg); }
.packfan.small { width: 200px; height: 220px; cursor: default; }
.packfan.small img { width: 120px; }

/* ---------- Wochenaufgaben ---------- */
.weekly { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff06; display: flex; flex-direction: column; gap: 8px; }
.wkhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wkrow { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #ffffff05; }
.wkrow .wkt { flex: 1; }
.wkrow.ready { background: rgba(232,181,74,.12); border: 1px solid #e8b54a66; }
.wkrow.claimed { opacity: .55; }
.wkbonus { font-size: 13px; color: #ffd77a; text-align: center; padding-top: 4px; }
.wkbonus.claimed { opacity: .5; text-decoration: line-through; }

/* ---------- Packs aufreißen (neu) ---------- */
.tearstage { position: relative; }
.tearpack { touch-action: none; cursor: grab; user-select: none; transition: transform .08s; }
.tearpack .tp-top { transform-origin: 100% 10.5%; transition: transform .06s linear; z-index: 3; }
.tearpack .tp-bot { z-index: 1; }
.tearpack .tp-top.fly { transition: transform .55s cubic-bezier(.3,.1,.6,1), opacity .55s; transform: translate(150px, -260px) rotate(-55deg) !important; opacity: 0; }
.tearpack .tglow { position: absolute; left: 6%; right: 6%; top: 6%; height: 10%; z-index: 2; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #fff, #ffe7a6 30%, transparent 70%); filter: blur(4px); pointer-events: none; }
.tearpack .fray { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 2px rgba(255,255,255,.6)); }
.tearline { display: none; }
.tearhint { font-size: 13px; color: var(--muted); animation: fadeUp .5s .6s backwards; }
.tearstage.miracle .tearpack { animation: tpIn .6s cubic-bezier(.2,1.4,.4,1), mirShake .12s 1.2s 10; }
.tearstage.miracle.demigod .tearpack { filter: drop-shadow(0 0 30px #ffd77a) drop-shadow(0 0 60px #ffb84a); }
.tearstage.miracle.god .tearpack { filter: drop-shadow(0 0 28px #ff9de6) drop-shadow(0 0 50px #8ad4ff) drop-shadow(0 0 80px #ffe98a); }
.tearstage .rays { position: absolute; left: 50%; top: 42%; width: 640px; height: 640px; margin: -320px 0 0 -320px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,231,166,.35) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); animation: raySpin 9s linear infinite, fadeUp .6s; }
.tearstage.god .rays { background: repeating-conic-gradient(rgba(255,157,230,.4) 0 6deg, transparent 6deg 12deg, rgba(138,212,255,.4) 12deg 18deg, transparent 18deg 24deg); }
@keyframes raySpin { to { transform: rotate(360deg); } }
@keyframes mirShake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px) rotate(.8deg); } }
.card.fullart .hdr { margin-bottom: 5em; }
.card.fullart .atk, .card.fullart .abil { font-size: .88em; line-height: 1.15; }
.card.fullart .flavor { display: none; }

/* ---------- v2.6: Bildfeld schrumpft nie, Symbole, Energiekarten ---------- */
.card .art { flex-shrink: 0; }
.card .meta, .card .hdr, .card .ftr { flex-shrink: 0; }
.card .abil, .card .atk { flex-shrink: 1; min-height: 0; overflow: hidden; }
.ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; border-radius: 50%; object-fit: cover; }
.ico.any { width: 1.05em; height: 1.05em; vertical-align: -.15em; background: radial-gradient(circle at 35% 30%, #fff, #c9c9cf 60%, #8e8e96); box-shadow: inset 0 0 0 .06em #6a6a72; }
.card .cost .ico { width: 1.15em; height: 1.15em; margin-right: .05em; }
.card.energy { padding: 0; background: none !important; box-shadow: 0 .3em 1em rgba(0,0,0,.5); }
.card.energy .inner { padding: 0; background: none; position: relative; }
.card.energy .ecardimg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: .9em; }
.card.energy .count, .card.energy .newb { position: absolute; top: .5em; right: .5em; z-index: 3; }
.card .art img.cimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip .ico { width: 1.15em; height: 1.15em; }
/* v2.6: Text darf nicht abgeschnitten werden – Karte etwas höher, bei viel Text Bild etwas flacher */
.card { height: 22.5em; }
.card .abil, .card .atk { flex-shrink: 0; overflow: visible; }
.card.dense .art { aspect-ratio: 2 / 1; }
.card.xdense .art { aspect-ratio: 2.5 / 1; }
.card.dense .atk, .card.dense .abil, .card.dense .ttxt { font-size: .84em; line-height: 1.15; }
.card.xdense .atk, .card.xdense .abil { font-size: .76em; line-height: 1.1; }
.card.xdense .meta, .card.dense .meta { font-size: .9em; }
/* automatische Textanpassung (siehe fitCard in ui.js) */
.card .inner { font-size: calc(1em * var(--ts, 1)); }
.card.dense .art, .card.xdense .art { aspect-ratio: 5 / 3; }
.card.squeeze .art { aspect-ratio: 2.2 / 1 !important; }
.card.noflav .flavor { display: none; }

/* ---------- Online: Konto & Lobby (v2.7) ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.panel h3 { margin: 0 0 10px; }
.panel.warn { border-color: #b8860b; background: #2a2010; }
.accpanel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.accchip { position: absolute; top: 14px; right: 70px; z-index: 4; background: #0d0912cc; border: 1px solid var(--line); border-radius: 30px; padding: 8px 14px; cursor: pointer; font-size: 14px; backdrop-filter: blur(4px); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accchip.in { border-color: #3d8f5a; }
@media (max-width: 700px) { .accchip { position: relative; top: 0; right: 0; margin: 10px auto 0; width: max-content; } }
.mpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mprooms { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: auto; }
.mproom { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #00000033; border-radius: 10px; padding: 8px 10px; }
.mpwait { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 26px; }
.mpcode { font-family: var(--serif); font-size: 54px; letter-spacing: 12px; color: var(--gold); text-shadow: 0 0 18px #ffd77a55; user-select: all; }
.mpwait .spinner { animation: mpPulse 1.6s ease-in-out infinite; }
@keyframes mpPulse { 50% { opacity: .45; } }
.chk { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.mpclock { margin-top: 8px; font-size: 14px; }
.mpclock .hot { color: #ff8a8a; font-weight: 700; }
.emotes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.emotes .btn { padding: 4px 8px; font-size: 16px; }
table.kv { border-collapse: collapse; margin: 6px 0; } table.kv td { padding: 3px 12px 3px 0; }