:root {
  --bg:#060605; --panel:#0d0c08; --border:#3a2a0a;
  --gold:#c9a227; --text:#e8d5a3; --dim:#b3a27c;
  --aesir:#c9a227; --seidr:#7b68ee; --hel:#6a9a5a; --eld:#dd4400; --natur:#4a9a2a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Cinzel',Georgia,serif;height:100vh;overflow:hidden;display:flex;flex-direction:column;user-select:none;}
/* ── LAYOUT ── */
#app{display:grid;grid-template-rows:1fr 48px 1fr;height:100vh;
  background:url('cards/bg_battlefield.png') center/cover no-repeat, var(--bg);}
.parea{display:flex;flex-direction:column;padding:6px 10px;overflow:hidden;position:relative;min-height:0;
  background:rgba(6,6,5,.45);backdrop-filter:blur(3px);}
.parea.p2{flex-direction:column-reverse;}
/* ── PLAYER INFO BAR ── kritisch: flex-shrink:0 damit nie weggeschnitten */
.pinfo{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:6px 4px;
  background:rgba(0,0,0,.45);border-radius:6px;border:1px solid #3a2a0a;
  position:relative;z-index:10;min-height:56px;}
/* P1-PINFO (eigene): zusätzlich Glow zum Hervorheben (Cluster sitzt jetzt an der Mittellinie → Glow nach unten) */
#pa1 > .pinfo{border-color:var(--gold);box-shadow:0 2px 12px rgba(201,162,39,.2);}
.pname{font-size:14px;font-weight:700;letter-spacing:2px;color:var(--gold);}
.pname.active-player{color:#fff;text-shadow:0 0 12px var(--gold);}
.life{font-size:22px;font-weight:700;color:#ff7777;min-width:55px;}
.mana-pool{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.mp{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;border:1.5px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .1s;}
.mp:hover{transform:scale(1.15);}
.mp-aesir{background:radial-gradient(#f5e6c8,#c9a227);color:#2a1a00;}
.mp-seidr{background:radial-gradient(#3a2a8e,#1a1a4e);color:#c0b0ff;}
.mp-hel  {background:radial-gradient(#2a3a2a,#111);color:#9aaa8a;}
.mp-eld  {background:radial-gradient(#8b2200,#5a1a00);color:#ffaa66;}
.mp-natur{background:radial-gradient(#1a4a1a,#0d200d);color:#8adb8a;}
.zone-counts{margin-left:auto;display:flex;gap:6px;}
.zctr{width:48px;height:48px;border:1px dashed #3a2a0a;border-radius:6px;display:flex;flex-direction:column;
      align-items:center;justify-content:center;font-size:9px;color:var(--dim);cursor:pointer;flex-shrink:0;}
.zctr span{font-size:16px;color:var(--text);font-weight:700;}
/* ── A11y: Button-Reset für ehemalige klickbare <div> (0-Specificity, Klassen-Regeln gewinnen) ── */
:where(button.zctr, button.ss-nav-item, button.ss-currency, button.tool-btn, button.pack-img-wrap){
  appearance:none;-webkit-appearance:none;background:transparent;border:none;margin:0;
  font:inherit;color:inherit;text-align:center;box-sizing:border-box;cursor:pointer;}
button.pack-img-wrap{display:block;padding:0;}
/* ── A11y: sichtbarer Fokus-Ring (Tastatur-Navigation) ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;}
.mc:focus-visible{outline:3px solid #ffd877;outline-offset:2px;}
[role="button"]:focus-visible{outline:2px solid #ffd877;outline-offset:2px;}
/* ── A11y: Skip-Link ── */
.skip-link{position:absolute;left:8px;top:-60px;z-index:99999;background:#1a1208;color:var(--gold);
  border:1px solid var(--gold);padding:8px 14px;border-radius:6px;font-family:'Cinzel',serif;
  font-size:12px;letter-spacing:1px;transition:top .15s;}
.skip-link:focus{top:8px;}
/* ── ZONES ── */
.hand{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 2px;min-height:210px;align-items:flex-end;flex-shrink:0;justify-content:center;}
.bf{display:flex;flex-direction:column;overflow:visible;flex:1 1 0%;min-height:0;
    padding:4px 6px;background:rgba(255,255,255,.015);border-radius:6px;position:relative;gap:3px;}
.bf-row.bf-creatures{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;
        padding:6px 4px;flex:1;min-height:80px;}
.bf-row.bf-lands{display:flex;gap:0px;flex-wrap:nowrap;overflow-x:auto;align-items:center;justify-content:center;
        padding:4px 8px;height:110px;flex-shrink:0;
        background:rgba(255,255,255,.03);border-radius:4px;
        border-top:1px solid rgba(255,255,255,.08);}
.bf-lands .mc{transform:scale(0.52);margin:-48px -33px;}
.bf-lands .mc:hover{transform:translateY(-6px) scale(0.56);z-index:200;}
.bf-lands .mc.tapped{transform:rotate(90deg) scale(0.52);margin:-28px -10px;}
.zone-lbl{position:absolute;top:2px;left:8px;font-size:10px;letter-spacing:2px;color:#3a2a0a;text-transform:uppercase;pointer-events:none;}
/* ── MINI CARD ── */
.mc{width:140px;height:196px;border-radius:8px;position:relative;cursor:pointer;flex-shrink:0;
    border:1.5px solid rgba(58,42,10,.9);overflow:hidden;background:#1a1208;
    transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;
    box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 1px rgba(201,162,39,.15);}
.mc:hover{transform:translateY(-14px) scale(1.05);z-index:200;
    box-shadow:0 12px 35px rgba(0,0,0,.8),0 0 15px rgba(201,162,39,.2);}
@keyframes mc-enter {
  0%   { opacity:0; transform: scale(0.3) translateY(50px) rotate(-8deg); filter: brightness(2); }
  55%  { opacity:1; transform: scale(1.18) translateY(-12px) rotate(2deg); filter: brightness(1.5); box-shadow:0 0 28px rgba(201,162,39,.7);}
  100% { opacity:1; transform: scale(1) translateY(0) rotate(0); filter: brightness(1); }
}
.mc.entering { animation: mc-enter 0.55s cubic-bezier(.22,1.5,.36,1) both; z-index: 250; }
@keyframes life-pulse {
  0%,100% { text-shadow: 0 0 4px #ff4444, 0 0 8px #ff4444; }
  50%     { text-shadow: 0 0 12px #ff4444, 0 0 22px #ff7777; }
}
.life.hit { animation: life-pulse 0.4s ease-out; color: #ff4444; }
.life.heal { color: #88ff88; }
@keyframes spell-flash {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.mc.spell-cast { animation: spell-flash 0.45s ease-out; }
.mc.tapped{transform:rotate(90deg);margin:26px 30px;}
.mc.tapped:hover{transform:rotate(90deg) scale(1.05);}
.mc.sel{box-shadow:0 0 0 3px #fff,0 0 22px rgba(255,255,255,.6),0 0 45px rgba(255,255,255,.15);}
.mc.atk{box-shadow:0 0 0 2px var(--eld),0 0 18px rgba(221,68,0,.7),0 0 40px rgba(221,68,0,.2);
  border-color:var(--eld);}
.mc.blk{box-shadow:0 0 0 2px var(--natur),0 0 18px rgba(74,154,42,.7),0 0 40px rgba(74,154,42,.2);
  border-color:var(--natur);}
.mc.vtgt{box-shadow:0 0 0 3px #ff0,0 0 22px rgba(255,255,0,.9),0 0 50px rgba(255,255,0,.4);
  animation:pulse .8s ease-in-out infinite;cursor:crosshair !important;}
@keyframes pulseBanner{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@keyframes pulseBannerCursor{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* Pending-Target-Banner: zentrierte Ruheposition (Touch) → folgt dem Cursor sobald die Maus bewegt wird */
#pend-banner{position:fixed;left:50%;top:auto;bottom:96px;
  background:linear-gradient(180deg,#ffd877,#c9a227);color:#1a1208;padding:9px 20px;border-radius:6px;
  font-weight:700;font-size:13px;letter-spacing:1px;box-shadow:0 4px 18px rgba(0,0,0,.7);
  z-index:3000;animation:pulseBanner 1.2s ease-in-out infinite;pointer-events:none;white-space:nowrap;}
#pend-banner.following{left:0;top:0;bottom:auto;animation:pulseBannerCursor 1.2s ease-in-out infinite;}
body.pend-active .bf{box-shadow:inset 0 0 60px rgba(255,255,0,0.15);}
.mc.sick{opacity:.7;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px #ff0,0 0 14px rgba(255,255,0,.6);}50%{box-shadow:0 0 0 3px #ff0,0 0 22px rgba(255,255,0,.9);}}
.mc img{width:100%;height:63%;object-fit:cover;object-position:center top;flex-shrink:0;}
.mc-stripe{position:absolute;top:0;left:0;right:0;height:4px;}
.mc-name{font-size:13px;font-weight:700;color:#e8d5a3;padding:3px 5px 1px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;}
.mc-sub{font-size:11px;color:var(--dim);padding:0 5px;}
.mc-pt{position:absolute;bottom:4px;right:5px;font-size:17px;font-weight:700;
       color:#fff;text-shadow:0 0 4px #000,0 0 8px #000;}
.mc-dmg{position:absolute;bottom:4px;left:5px;font-size:15px;color:#ff4444;font-weight:700;}
.mc-cost{position:absolute;top:6px;right:5px;font-size:13px;color:rgba(255,255,255,.9);
         background:rgba(0,0,0,.65);padding:2px 4px;border-radius:3px;}
.mc-back{background:linear-gradient(135deg,#1a1208,#0d0c08);display:flex;align-items:center;
         justify-content:center;font-size:30px;color:var(--gold);opacity:.5;}
/* ── SCHILDWALL ── */
.shieldrow{display:flex;gap:8px;justify-content:center;align-items:center;flex-shrink:0;
           padding:3px 0;min-height:0;perspective:700px;}
.shieldrow:empty{display:none;}
.shieldrow .mc{width:64px;height:90px;cursor:default;}
.shieldrow .mc:hover{transform:translateY(-4px) scale(1.03);z-index:5;
           box-shadow:0 6px 18px rgba(0,0,0,.7),0 0 12px rgba(201,162,39,.35);}
.shieldrow .mc img{height:58%;}
.shieldrow .mc .mc-name{font-size:10px;padding:2px 4px 0;}
.shieldrow .mc .mc-sub{font-size:8px;}
.shieldrow .mc .mc-pt{font-size:13px;bottom:2px;right:3px;}
.shieldrow .mc .mc-dmg{font-size:11px;bottom:2px;left:3px;}
.mc.mc-shield{border-color:#7a6a3a;box-shadow:0 0 10px rgba(201,162,39,.3),0 2px 8px rgba(0,0,0,.65);}
.mc.faceDown{cursor:default;}
.mc-back-face{position:absolute;inset:0;width:100%;height:100%;border-radius:7px;
           background:linear-gradient(135deg,#1a1208,#0d0c08);background-size:cover;background-position:center;}
.mc.faceDown::after{content:'🛡';position:absolute;inset:0;display:flex;align-items:center;
           justify-content:center;font-size:30px;color:rgba(201,162,39,.5);
           text-shadow:0 0 8px rgba(0,0,0,.85);pointer-events:none;}
@keyframes mc-flip-reveal{
  0%  {transform:rotateY(90deg);filter:brightness(2.2);}
  55% {transform:rotateY(-10deg);filter:brightness(1.4);}
  100%{transform:rotateY(0);filter:brightness(1);}
}
.mc.flip-reveal{animation:mc-flip-reveal .5s cubic-bezier(.22,1.3,.36,1) both;}
@keyframes mc-shatter{
  0%  {transform:scale(1) rotate(0);opacity:1;}
  30% {transform:scale(1.12) rotate(-5deg);filter:brightness(1.7);}
  100%{transform:scale(.55) rotate(10deg);opacity:0;filter:brightness(.4);}
}
.mc.shield-shatter{animation:mc-shatter .55s ease-in both;z-index:10;}
/* Schild zerbricht & zieht sich auf die Hand zurück (Fly-to-Hand) */
@keyframes shield-tohand{
  0%  {transform:scale(1);opacity:1;}
  25% {transform:scale(1.1) translateY(-8px);opacity:1;filter:brightness(1.6) drop-shadow(0 0 14px rgba(201,162,39,.85));}
  100%{transform:scale(.45) translateY(46px);opacity:0;filter:brightness(1);}
}
.mc.shield-tohand{animation:shield-tohand .5s ease-in both;z-index:30;}
/* Zurückgekehrtes Schild „landet" in der Hand (kein transform → Fächer-Rotation bleibt erhalten) */
@keyframes hand-arrive{
  0%  {opacity:0;filter:brightness(2.4) drop-shadow(0 0 16px rgba(201,162,39,.95));}
  60% {opacity:1;filter:brightness(1.5) drop-shadow(0 0 10px rgba(201,162,39,.7));}
  100%{opacity:1;filter:none;}
}
.mc.hand-arrive{animation:hand-arrive .55s ease-out both;}
/* ── RUNEN-SOCKEL ── */
.mc-runes{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
          display:flex;align-items:center;gap:2px;z-index:5;
          background:rgba(0,0,0,.62);border-radius:7px;padding:1px 4px;pointer-events:none;}
.rune-pip{font-size:9px;line-height:1;color:#5a4a2a;}
.rune-pip.filled{color:#d8b85a;text-shadow:0 0 4px rgba(201,162,39,.85);}
.rune-reso{font-size:8px;line-height:1;margin-left:2px;font-weight:700;letter-spacing:-1px;}
.rune-reso.reso-2{color:#a8d8ff;text-shadow:0 0 4px rgba(120,180,255,.7);}
.rune-reso.reso-3{color:#ffc060;text-shadow:0 0 6px rgba(255,160,40,.95);}
/* SAGA-Kapitel-Badge */
.mc-saga{position:absolute;top:3px;left:3px;z-index:6;font-size:10px;font-weight:700;
  background:rgba(20,15,40,.85);color:#cdbaff;border:1px solid #6a5ab0;border-radius:7px;padding:1px 5px;
  letter-spacing:.5px;pointer-events:none;}
/* RAGNARÖK-SKALIERUNG: Macht-Badge (wächst mit dem Weltuntergangs-Zähler) */
.mc-ragscale{position:absolute;top:3px;left:3px;z-index:6;font-size:10px;font-weight:800;
  background:rgba(50,8,4,.9);color:#ff7a3c;border:1px solid #cc4422;border-radius:7px;padding:1px 5px;
  text-shadow:0 0 6px rgba(255,90,40,.8);pointer-events:none;animation:ragPulse 1.8s ease-in-out infinite;}
@keyframes ragPulse{0%,100%{box-shadow:0 0 4px rgba(255,80,30,.4);}50%{box-shadow:0 0 11px rgba(255,90,40,.85);}}
/* TRANSFORM: Verwandlungs-Aufblitzen + Gestaltwandler-Badge */
.mc.transforming{animation:transformFlash .7s ease;}
@keyframes transformFlash{0%{filter:brightness(1);}35%{filter:brightness(2.6) saturate(1.5);transform:scaleX(.04);}36%{transform:scaleX(.04);}100%{filter:brightness(1);transform:scaleX(1);}}
.mc-transform{position:absolute;bottom:3px;left:3px;z-index:6;font-size:11px;pointer-events:none;
  text-shadow:0 0 6px rgba(255,200,90,.9);filter:drop-shadow(0 0 3px #000);}
/* FROST: eingefrorene Kreatur (eisblauer Tint + ❄) */
.mc.frozen{box-shadow:0 0 0 2px rgba(140,200,255,.7),0 0 14px rgba(120,180,255,.55)!important;}
.mc.frozen::before{content:'❄';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;
  font-size:30px;color:rgba(200,230,255,.92);text-shadow:0 0 8px rgba(100,160,255,.9);pointer-events:none;}
.mc.frozen img{filter:saturate(.5) brightness(.8) hue-rotate(180deg);}
/* faction stripes */
.f-aesir .mc-stripe{background:var(--aesir);}
.f-seidr .mc-stripe{background:var(--seidr);}
.f-hel   .mc-stripe{background:var(--hel);}
.f-eld   .mc-stripe{background:var(--eld);}
.f-natur .mc-stripe{background:var(--natur);}
/* ── MIDDLE BAR ── */
#mid{display:flex;align-items:center;gap:10px;padding:0 14px;
     background:linear-gradient(90deg,rgba(10,9,5,.92),rgba(20,15,8,.95),rgba(10,9,5,.92));
     border-top:1px solid rgba(201,162,39,.25);border-bottom:1px solid rgba(201,162,39,.25);
     flex-shrink:0;box-shadow:0 0 20px rgba(0,0,0,.5);backdrop-filter:blur(8px);}
#turn-lbl{font-size:13px;color:var(--gold);letter-spacing:1.5px;white-space:nowrap;min-width:260px;}
#phase-pips{display:flex;gap:3px;}
.ppip{width:7px;height:7px;border-radius:50%;background:#2a1a08;}
.ppip.pdone{background:#5a4a2a;}.ppip.pact{background:var(--gold);}
.btn{background:linear-gradient(135deg,#2a1a08,#1a1208);border:1px solid var(--gold);
     color:var(--gold);font-family:'Cinzel',serif;font-size:13px;padding:7px 14px;
     cursor:pointer;border-radius:5px;letter-spacing:.8px;white-space:nowrap;
     transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.5);}
.btn:hover{background:linear-gradient(135deg,#3a2808,#221808);
     box-shadow:0 2px 15px rgba(201,162,39,.2);transform:translateY(-1px);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.red{border-color:#dd4400;color:#dd4400;}
.btn.red:hover{background:linear-gradient(135deg,#2a0a00,#1a0600);}
#log-txt{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
#log-txt:hover{color:var(--gold);}
/* ── SPIEL-VERLAUF-PANEL ── */
.log-toggle{background:rgba(13,12,8,.7);border:1px solid rgba(201,162,39,.35);color:#b8a060;
  font-size:13px;width:28px;height:28px;border-radius:6px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;}
.log-toggle:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.12);}
.log-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.log-panel{position:fixed;right:14px;bottom:52px;width:340px;max-width:86vw;max-height:46vh;
  background:rgba(13,12,8,.96);border:1px solid rgba(201,162,39,.4);border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.7);z-index:1500;display:flex;flex-direction:column;
  overflow:hidden;backdrop-filter:blur(6px);}
.log-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
  border-bottom:1px solid rgba(201,162,39,.25);color:var(--gold);font-family:Cinzel,serif;
  letter-spacing:1px;font-size:12px;font-weight:700;flex-shrink:0;}
.log-panel-x{background:none;border:none;color:#aa8866;font-size:14px;cursor:pointer;
  padding:2px 7px;border-radius:4px;line-height:1;}
.log-panel-x:hover{color:var(--gold);background:rgba(201,162,39,.12);}
.log-panel-body{overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:2px;}
.log-row{font-size:11px;line-height:1.4;padding:2px 0;border-bottom:1px solid rgba(201,162,39,.06);}
.log-meta{color:#8a7a5a;font-size:9px;letter-spacing:.5px;white-space:nowrap;}
.log-msg{color:#d8c89a;}
.log-empty{color:#8a7a5a;font-style:italic;border-bottom:none;}
/* ── TOOLTIP ── */
#tt{position:fixed;pointer-events:none;z-index:900;display:none;background:#0d0c08;
    border:1px solid var(--gold);border-radius:10px;padding:12px;width:280px;
    font-size:13px;color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.95);}
#tt img{width:256px;height:auto;max-height:320px;object-fit:contain;border-radius:6px;margin-bottom:9px;display:block;}
#tt-name{font-weight:700;color:var(--gold);margin-bottom:4px;font-size:18px;letter-spacing:.5px;}
#tt-type{color:var(--dim);margin-bottom:8px;font-size:14px;}
#tt-text{line-height:1.7;font-family:'IM Fell English',serif;font-size:15px;}
#tt-pt{font-weight:700;color:var(--gold);margin-top:8px;font-size:16px;}
/* ── MODAL ── */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1100;
       align-items:center;justify-content:center;}
#modal.on{display:flex;}
#mc2{background:#0d0c08;border:1px solid var(--gold);border-radius:12px;
     padding:28px;max-width:460px;width:90%;text-align:center;}
#m-title{font-size:22px;color:var(--gold);margin-bottom:10px;}
#m-text{font-size:14px;color:var(--text);margin-bottom:20px;line-height:1.6;max-height:340px;overflow-y:auto;}
#m-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* ── PASS SCREEN ── */
#pass{display:none;position:fixed;inset:0;background:#000;z-index:1050;
      align-items:center;justify-content:center;flex-direction:column;gap:24px;}
#pass.on{display:flex;}
#pass h2{font-size:28px;color:var(--gold);letter-spacing:4px;text-align:center;}
#pass p{color:var(--dim);font-size:13px;letter-spacing:2px;}
/* ── START SCREEN (Arena-Style Dashboard) ── */
#start-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  background:url('cards/bg_menu.png') center/cover no-repeat, var(--bg);overflow:hidden;}
#start-screen::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.95) 100%);
  pointer-events:none;}
#start-screen>*{position:relative;z-index:1;}
/* Top nav bar */
#ss-nav{display:flex;align-items:center;gap:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,162,39,.2);padding:0;flex-shrink:0;}
.ss-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;
  cursor:pointer;color:var(--dim);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:all .2s;min-width:70px;flex:0 0 auto;font-weight:600;}
.ss-nav-item:hover{color:var(--text);background:rgba(201,162,39,.06);}
.ss-nav-item.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,162,39,.08);}
.ss-nav-icon{font-size:10px;line-height:1;display:flex;flex-direction:column;align-items:center;gap:5px;letter-spacing:1.5px;}
.nav-icon-img{width:24px;height:24px;object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(201,162,39,.5)) brightness(1.05);transition:all .25s cubic-bezier(.2,.7,.3,1.2);}
.ss-nav-item:hover .nav-icon-img,.ss-nav-item.active .nav-icon-img{
  filter:drop-shadow(0 0 10px rgba(255,215,119,.9)) brightness(1.2);}
#ss-nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;padding:0 16px;}
/* ── Unified Topbar-Pill Style — alle Currency + Tool-Buttons gleich ── */
#ss-nav-right{margin-left:auto;display:flex;align-items:center;gap:5px;padding:0 8px;flex-wrap:nowrap;}
.ss-currency, #ss-level-badge {
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);
  background:linear-gradient(180deg, rgba(20,15,5,.85), rgba(8,6,3,.92));
  padding:5px 10px;border-radius:14px;border:1px solid rgba(201,162,39,.35);
  font-weight:700;font-family:'Cinzel',serif;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,215,119,.12), 0 2px 8px rgba(0,0,0,.5);
  min-height:30px;line-height:1;
}
.ss-currency .ui-icon, #ss-level-badge .ui-icon { width:18px;height:18px; }
.ss-currency.gold-currency span{color:#ffd877;text-shadow:0 0 8px rgba(255,215,119,.5);}
.ss-currency.gem-currency span{color:#a8b8ff;text-shadow:0 0 8px rgba(168,184,255,.5);}
.ss-currency#ss-dust-display span{color:#ff9966;text-shadow:0 0 8px rgba(255,153,102,.5);}
.ss-currency#ss-packs-display span{color:#ffd877;}
/* Tool-Buttons (Music, Lang, Settings) — kleiner, schmaler */
.ss-currency.tool-btn {
  cursor:pointer;user-select:none;padding:5px 8px;font-size:10px;min-width:0;
  background:linear-gradient(180deg, rgba(20,15,5,.7), rgba(8,6,3,.85));
  border-color:rgba(201,162,39,.25);
}
.ss-currency.tool-btn:hover {
  background:linear-gradient(180deg, rgba(40,30,10,.9), rgba(20,15,5,.95));
  border-color:rgba(255,215,119,.6);
  box-shadow:inset 0 1px 0 rgba(255,215,119,.2), 0 4px 12px rgba(201,162,39,.3);
}
.ss-currency.tool-btn .ui-icon { width:18px;height:18px; }
.ss-currency.tool-btn span { color:var(--gold);font-size:11px;letter-spacing:1px; }
/* Main content area */
#ss-content{flex:1;display:flex;gap:0;overflow:hidden;padding:0;}
/* Left: hero banner */
#ss-hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 28px;
  position:relative;overflow:hidden;}
#ss-hero-title{font-size:64px;color:var(--gold);letter-spacing:10px;
  text-shadow:0 0 40px rgba(201,162,39,.5),0 2px 8px rgba(0,0,0,.9);
  animation:titlePulse 3s ease-in-out infinite alternate;margin-bottom:4px;}
@keyframes titlePulse{0%{text-shadow:0 0 40px rgba(201,162,39,.5),0 2px 8px rgba(0,0,0,.9)}
  100%{text-shadow:0 0 60px rgba(201,162,39,.7),0 0 120px rgba(201,162,39,.15),0 2px 8px rgba(0,0,0,.9)}}
#ss-hero-sub{font-size:16px;color:rgba(232,213,163,.6);letter-spacing:6px;margin-bottom:20px;}
#ss-hero-card{background:rgba(0,0,0,.65);backdrop-filter:blur(10px);border:1px solid rgba(201,162,39,.15);
  border-radius:10px;padding:16px 22px;margin-bottom:12px;max-width:520px;}
#ss-hero-card h3{font-size:17px;color:var(--gold);letter-spacing:2px;margin-bottom:8px;}
#ss-hero-card p{font-size:14px;color:var(--dim);line-height:1.6;}
/* Right sidebar */
#ss-sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:0;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);border-left:1px solid rgba(201,162,39,.1);}
.ss-panel{padding:18px 20px;border-bottom:1px solid rgba(201,162,39,.08);}
.ss-panel-title{font-size:12px;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin-bottom:12px;}
.ss-deck-pick{display:flex;gap:6px;flex-wrap:wrap;}
.deck-btn{background:rgba(20,15,5,.85);border:1.5px solid rgba(58,42,10,.8);color:var(--dim);
  font-family:'Cinzel',serif;font-size:13px;padding:9px 16px;cursor:pointer;border-radius:5px;
  letter-spacing:.8px;transition:all .2s;}
.deck-btn:hover{border-color:rgba(201,162,39,.6);color:var(--text);}
.deck-btn.sel-deck{border-color:var(--gold);color:var(--gold);
  background:rgba(40,30,8,.9);box-shadow:0 0 15px rgba(201,162,39,.15);}
#d1-random-btn{border-style:dashed;border-color:rgba(100,80,180,.6);color:rgba(180,160,255,.7);}
#d1-random-btn:hover{border-color:rgba(140,110,220,.9);color:rgba(210,190,255,.9);}
#d1-random-btn.sel-deck{border-color:rgba(140,110,220,.9);color:rgba(210,190,255,.9);background:rgba(30,20,50,.9);box-shadow:0 0 15px rgba(120,80,220,.2);}
.mode-btns{display:flex;gap:6px;flex-wrap:wrap;}
.deck-select{display:flex;gap:6px;flex-wrap:wrap;}
.start-row{display:flex;flex-direction:column;gap:6px;}
.start-row label{font-size:9px;color:rgba(201,162,39,.7);letter-spacing:2px;text-transform:uppercase;}
.start-sep{display:none;}
/* Bottom bar */
#ss-bottom{display:flex;align-items:center;gap:12px;padding:10px 20px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);border-top:1px solid rgba(201,162,39,.15);flex-shrink:0;}
#ss-bottom .btn{backdrop-filter:blur(6px);}
#ss-play-btn{background:linear-gradient(135deg,#8a4400,#c96600)!important;border:none!important;
  color:#fff!important;font-size:20px!important;padding:16px 60px!important;border-radius:8px!important;
  letter-spacing:3px;box-shadow:0 4px 25px rgba(201,100,0,.4);cursor:pointer;transition:all .25s;
  font-family:'Cinzel',serif;font-weight:700;}
#ss-play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 35px rgba(201,100,0,.6);
  background:linear-gradient(135deg,#9a5500,#dd7700)!important;}
#ss-quest-bar{flex:1;display:flex;align-items:center;gap:12px;}
.ss-quest{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);
  background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.1);border-radius:8px;padding:10px 16px;}
.ss-quest-icon{font-size:20px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ss-quest-icon img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(201,162,39,.5));}
.ui-icon{width:24px;height:24px;object-fit:contain;vertical-align:middle;
  filter:drop-shadow(0 0 6px rgba(201,162,39,.8)) brightness(1.15);}
.ss-quest-prog{color:var(--gold);font-weight:700;font-size:13px;}
#start-screen .btn{background:linear-gradient(135deg,rgba(40,30,8,.9),rgba(20,15,5,.95));
  border:1.5px solid var(--gold);box-shadow:0 0 20px rgba(201,162,39,.15),0 4px 15px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);transition:all .25s;}
#start-screen .btn:hover{box-shadow:0 0 30px rgba(201,162,39,.25);transform:translateY(-1px);}
/* scrollbar */
::-webkit-scrollbar{height:4px;width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#3a2a0a;border-radius:2px;}
/* ── COMBAT ANIMATIONS ── */
@keyframes atkSlideUp{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-170px) scale(1.08)}60%{transform:translateY(-170px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes atkSlideDown{0%{transform:translateY(0) scale(1)}35%{transform:translateY(170px) scale(1.08)}60%{transform:translateY(170px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes cardShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-12px) rotate(-3deg)}30%{transform:translateX(12px) rotate(3deg)}45%{transform:translateX(-9px)}60%{transform:translateX(9px)}75%{transform:translateX(-4px)}90%{transform:translateX(4px)}}
@keyframes cardDie{0%{opacity:1;transform:scale(1) rotate(0deg)}25%{opacity:1;transform:scale(1.2) rotate(-8deg)}60%{opacity:.5;transform:scale(.5) rotate(20deg) translateY(-20px)}100%{opacity:0;transform:scale(0) rotate(35deg) translateY(-40px)}}
@keyframes floatDmg{0%{opacity:1;transform:translateY(0) scale(1)}20%{opacity:1;transform:translateY(-10px) scale(1.3)}100%{opacity:0;transform:translateY(-90px) scale(1.8)}}
@keyframes combatFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.anim-atk-up{animation:atkSlideUp .9s ease-in-out forwards!important;z-index:300!important;position:relative!important;}
.anim-atk-down{animation:atkSlideDown .9s ease-in-out forwards!important;z-index:300!important;position:relative!important;}
.anim-shake{animation:cardShake .45s ease-in-out!important;}
.anim-die{animation:cardDie .7s ease-in forwards!important;pointer-events:none!important;}
.dmg-float{position:fixed;font-size:42px;font-weight:900;font-family:'Cinzel',Georgia,serif;pointer-events:none;z-index:1000;animation:floatDmg .9s ease-out forwards;text-align:center;}
.dmg-float.red{color:#ff3333;text-shadow:0 0 15px #ff0000,0 0 35px #ff5500,0 0 60px #ff0000;}
.dmg-float.gold{color:#ffd700;text-shadow:0 0 15px #ffaa00,0 0 35px #ff8800;}
#combat-flash{position:fixed;inset:0;pointer-events:none;z-index:500;display:none;border-radius:0;}
#combat-flash.active{display:block;animation:combatFlash .5s ease-out forwards;}
/* ── DRAG & DROP ── */
.mc.dragging{opacity:.35;transform:scale(.95)!important;}
.mc.drag-over-blocker{outline:3px solid #44ff44!important;box-shadow:0 0 22px rgba(68,255,68,.7)!important;transform:translateY(-10px) scale(1.06)!important;}
.bf.drag-target-active{outline:2px dashed rgba(255,120,0,.6)!important;outline-offset:4px;background:rgba(255,80,0,.04)!important;}
/* ── FLASH / COUNTER BANNER ── */
#flash-banner{position:fixed;bottom:260px;left:50%;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#1e1409,#0d0c08);border:1px solid var(--gold);border-radius:12px;
  padding:18px 26px;z-index:600;display:none;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,.95);min-width:340px;max-width:440px;
  opacity:0;transition:opacity .25s ease,transform .25s ease;}
#flash-banner.show{display:block;opacity:1;transform:translateX(-50%) translateY(0);}
.fb-badge{display:inline-block;background:rgba(255,200,0,.12);border:1px solid var(--gold);
  border-radius:4px;padding:2px 10px;font-size:9px;letter-spacing:2.5px;color:var(--gold);margin-bottom:10px;}
.fb-cname{font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px;}
.fb-msg{font-size:11px;color:var(--dim);margin-bottom:14px;line-height:1.5;}
.fb-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.fb-btns .btn.fb-counter{border-color:#ff5555;color:#ff5555;}
.fb-btns .btn.fb-counter:hover{background:rgba(255,85,85,.15);}
.fb-btns .btn.fb-instant{border-color:#44aaff;color:#44aaff;}
.fb-btns .btn.fb-instant:hover{background:rgba(68,170,255,.15);}

/* ── DECK BUILDER ── */
#deckbuilder{position:fixed;inset:0;z-index:800;display:none;flex-direction:column;
  background:linear-gradient(160deg,#060504 0%,#0a0d08 50%,#06050a 100%);
  font-family:'Cinzel',Georgia,serif;color:var(--text);overflow:hidden;}
#deckbuilder.open{display:flex;}
#db-header{display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.4);}
#db-header h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;}
#db-deck-name{background:transparent;border:1px solid var(--border);color:var(--text);
  font-family:'Cinzel',serif;font-size:14px;padding:5px 10px;border-radius:4px;width:180px;}
#db-deck-name:focus{outline:none;border-color:var(--gold);}
#db-count{font-size:14px;color:var(--dim);min-width:80px;text-align:center;}
#db-count.ready{color:#6f6;}
#db-body{display:flex;flex:1;overflow:hidden;}
#db-filters{width:180px;flex-shrink:0;padding:12px;border-right:1px solid var(--border);
  overflow-y:auto;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:8px;}
#db-filters h3{font-size:13px;letter-spacing:2px;color:var(--gold);margin-bottom:2px;}
.db-filter-btn{background:transparent;border:1px solid var(--border);color:var(--dim);
  font-family:'Cinzel',serif;font-size:13px;padding:7px 12px;border-radius:3px;cursor:pointer;
  text-align:left;transition:all .15s;}
.db-filter-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.08);}
.db-filter-btn:hover{border-color:var(--text);color:var(--text);}
#db-search{background:rgba(0,0,0,.5);border:1px solid var(--border);color:var(--text);
  font-family:'Cinzel',serif;font-size:14px;padding:6px 10px;border-radius:4px;width:100%;}
#db-search:focus{outline:none;border-color:var(--gold);}
#db-collection{flex:1;padding:12px;overflow-y:auto;display:flex;flex-wrap:wrap;
  align-content:flex-start;gap:8px;}
#db-deck-panel{width:280px;flex-shrink:0;border-left:1px solid var(--border);
  display:flex;flex-direction:column;background:rgba(0,0,0,.3);}
#db-deck-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;
  letter-spacing:1.5px;color:var(--gold);}
#db-deck-list{flex:1;overflow-y:auto;padding:8px;}
.db-deck-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:3px;
  font-size:13px;cursor:pointer;transition:background .1s;}
.db-deck-row:hover{background:rgba(201,162,39,.07);}
.db-deck-row .ddr-count{min-width:24px;text-align:center;font-weight:700;color:var(--gold);font-size:14px;}
.db-deck-row .ddr-name{flex:1;color:var(--text);}
.db-deck-row .ddr-cost{font-size:13px;color:var(--dim);letter-spacing:1px;}
.db-deck-row .ddr-rm{color:#aa4444;font-size:14px;padding:0 2px;background:none;border:none;
  cursor:pointer;font-family:monospace;opacity:0;transition:opacity .1s;}
.db-deck-row:hover .ddr-rm{opacity:1;}
#db-deck-actions{padding:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px;}
.db-card{width:120px;cursor:pointer;border-radius:5px;border:2px solid transparent;
  transition:all .15s;position:relative;overflow:hidden;background:var(--panel);}
.db-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.8);}
.db-card.in-deck{border-color:rgba(201,162,39,.5);}
.db-card.maxed{opacity:.5;}
.db-card img{width:100%;height:70px;object-fit:cover;display:block;}
.db-card .db-cinfo{padding:4px 5px;}
.db-card .db-cname{font-size:11px;font-weight:700;color:var(--text);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-card .db-ctype{font-size:10px;color:var(--dim);}
.db-card .db-ccost{font-size:11px;color:var(--gold);letter-spacing:1px;}
.db-card .db-cpt{font-size:11px;color:#ff9966;font-weight:700;}
.db-card .db-qty{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.85);
  color:var(--gold);font-size:12px;font-weight:700;padding:1px 5px;border-radius:10px;
  border:1px solid var(--gold);}
.db-card .db-own{position:absolute;top:3px;left:3px;background:rgba(8,12,20,.85);
  color:#9ab4e0;font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;
  border:1px solid rgba(120,150,200,.55);letter-spacing:.3px;}
/* aktiver Toggle-Button (Dev „Alle Karten") */
.btn.active{background:linear-gradient(135deg,#33508a,#1a2a4a);border-color:#7fa8e0;color:#cfe0ff;
  box-shadow:0 0 10px rgba(120,160,230,.45);}
.db-saved-decks{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.db-saved-deck-btn{background:rgba(201,162,39,.06);border:1px solid var(--border);
  color:var(--text);font-family:'Cinzel',serif;font-size:13px;padding:5px 8px;
  border-radius:3px;cursor:pointer;text-align:left;transition:all .15s;display:flex;
  justify-content:space-between;align-items:center;}
.db-saved-deck-btn:hover{border-color:var(--gold);color:var(--gold);}
.db-saved-deck-btn .dsb-del{color:#aa4444;font-size:12px;padding:0 3px;}
/* color tags */
.f-tag{display:inline-block;padding:1px 5px;border-radius:2px;font-size:8px;font-weight:700;letter-spacing:1px;}
.f-tag.aesir{background:rgba(201,162,39,.2);color:#f5e6a0;}
.f-tag.hel{background:rgba(106,154,90,.2);color:#9ada80;}
.f-tag.eld{background:rgba(221,68,0,.2);color:#ff9966;}
.f-tag.natur{background:rgba(74,154,42,.2);color:#8fe060;}

/* ── PACK SCREEN ── */
#pack-screen{position:fixed;inset:0;z-index:810;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:url('cards/bg_menu.png') center/cover no-repeat,#060605;overflow:hidden;}
#pack-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,rgba(0,0,0,.3),rgba(0,0,0,.85) 70%);pointer-events:none;}
#pack-screen.open{display:flex;}
#pack-screen>*{position:relative;z-index:1;}
#pack-header{display:flex;align-items:center;gap:16px;position:absolute;top:0;left:0;right:0;
  padding:12px 24px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,162,39,.2);}
#pack-header h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;}
#pack-count{font-size:16px;color:var(--text);background:rgba(201,162,39,.12);border:1px solid var(--gold);
  border-radius:20px;padding:4px 16px;}
.pack-img-wrap{cursor:pointer;transition:all .3s;position:relative;}
.pack-img-wrap:hover{transform:scale(1.05);}
.pack-img-wrap img{width:220px;height:auto;border-radius:12px;
  box-shadow:0 8px 40px rgba(201,162,39,.3),0 0 80px rgba(201,162,39,.1);}
.pack-img-wrap.opening{animation:packShake .6s ease-in-out;}
.pack-img-wrap.opened{opacity:0;transform:scale(1.3);transition:all .4s;pointer-events:none;}
@keyframes packShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-5deg) scale(1.05)}
  20%{transform:rotate(5deg) scale(1.08)}30%{transform:rotate(-4deg) scale(1.1)}
  40%{transform:rotate(4deg) scale(1.12)}50%{transform:rotate(-3deg) scale(1.15)}
  60%{transform:rotate(3deg) scale(1.12)}70%{transform:rotate(-2deg) scale(1.08)}
  80%{transform:rotate(1deg) scale(1.05)}90%{transform:rotate(0) scale(1.02)}}
#pack-cards{display:flex;gap:16px;margin-top:24px;perspective:1200px;min-height:260px;align-items:center;}
.pack-card{width:170px;height:240px;position:relative;cursor:pointer;border-radius:8px;overflow:hidden;
  border:2px solid #3a2a0a;box-shadow:0 4px 20px rgba(0,0,0,.7);background:#1a1208;}
.pack-card-back{position:absolute;inset:0;background:linear-gradient(135deg,#1a1208,#0d0a04);display:flex;
  align-items:center;justify-content:center;z-index:2;transition:opacity .5s ease-in-out;}
.pack-card-back::after{content:'ᛏ';font-size:48px;color:rgba(201,162,39,.3);}
.pack-card.revealed .pack-card-back{opacity:0;pointer-events:none;}
.pack-card.revealed{animation:cardRevealPop .6s cubic-bezier(.2,1,.3,1) forwards;}
.pack-card.revealed{cursor:help;}
.pack-card.revealed:hover{filter:brightness(1.15) drop-shadow(0 0 18px rgba(201,162,39,.6));}
@keyframes cardRevealPop{
  0%{transform:scale(1);filter:brightness(1);}
  30%{transform:scale(1.2);filter:brightness(2.5) saturate(1.5);}
  50%{transform:scale(1.15);filter:brightness(1.8);}
  100%{transform:scale(1);filter:brightness(1);}}
.pack-card-front{position:relative;display:flex;flex-direction:column;height:100%;}
.pack-card-front img{width:100%;height:130px;object-fit:cover;}
.pack-card-front .pcf-info{padding:6px 8px;flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.pack-card-front .pcf-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2;}
.pack-card-front .pcf-type{font-size:8px;color:var(--dim);}
.pack-card-front .pcf-stats{display:flex;justify-content:space-between;align-items:center;}
.pack-card-front .pcf-cost{font-size:12px;color:var(--gold);}
.pack-card-front .pcf-pt{font-size:13px;color:#ff9966;font-weight:700;}
.pack-card.rarity-uncommon.revealed{border-color:#a0c0a0;box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 15px rgba(160,192,160,.4);}
.pack-card.rarity-rare.revealed{border-color:var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 20px rgba(201,162,39,.5);}
.pack-card.rarity-legendary.revealed{border-color:#ff8800;box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 30px rgba(255,136,0,.6);
  animation:legendShimmer 2s ease-in-out infinite alternate;}
@keyframes legendShimmer{0%{filter:drop-shadow(0 0 25px rgba(255,136,0,.7))}
  100%{filter:drop-shadow(0 0 40px rgba(255,200,0,.9))}}
@keyframes cardFlyIn{0%{opacity:0;transform:translateY(60px) scale(.6)}100%{opacity:1;transform:translateY(0) scale(1)}}
.pack-card.fly-in{animation:cardFlyIn .4s ease-out forwards;}
#pack-actions{margin-top:24px;display:flex;gap:12px;}
.pack-new-badge{position:absolute;top:-6px;right:-6px;background:#ff4400;color:#fff;font-size:8px;
  font-weight:700;padding:2px 6px;border-radius:10px;letter-spacing:.5px;}

/* ── COLLECTION SCREEN ── */
#collection-screen{position:fixed;inset:0;z-index:805;display:none;flex-direction:column;
  background:linear-gradient(160deg,#060504,#0a0d08,#06050a);font-family:'Cinzel',serif;color:var(--text);}
#collection-screen.open{display:flex;}
#coll-header{display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.4);}
#coll-header h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;}
#coll-progress{font-size:14px;color:var(--dim);}
#coll-progress-bar{width:200px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
#coll-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ffd700);border-radius:3px;transition:width .4s;}
#coll-body{display:flex;flex:1;overflow:hidden;}
#coll-filters{width:180px;flex-shrink:0;padding:12px;border-right:1px solid var(--border);
  overflow-y:auto;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:8px;}
#coll-grid{flex:1;padding:12px;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;}
.coll-card{width:130px;cursor:default;border-radius:5px;border:2px solid transparent;
  transition:all .15s;position:relative;overflow:hidden;background:var(--panel);}
.coll-card.owned{cursor:pointer;}
.coll-card.owned:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.8);}
.coll-card.locked{filter:grayscale(1) brightness(.25);pointer-events:none;}
.coll-card.locked .cc-name{color:#555;}
.coll-card img{width:100%;height:90px;object-fit:cover;display:block;}
.coll-card .cc-info{padding:4px 5px;}
.coll-card .cc-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coll-card .cc-sub{display:flex;justify-content:space-between;align-items:center;}
.coll-card .cc-type{font-size:10px;color:var(--dim);}
.coll-card .cc-rarity{font-size:10px;font-weight:700;letter-spacing:1px;padding:1px 4px;border-radius:2px;}
.cc-rarity.r-common{color:#888;}.cc-rarity.r-uncommon{color:#a0c0a0;}
.cc-rarity.r-rare{color:var(--gold);}.cc-rarity.r-legendary{color:#ff8800;}
.coll-card .cc-qty{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.85);
  color:var(--gold);font-size:13px;font-weight:700;padding:1px 5px;border-radius:10px;
  border:1px solid var(--gold);}
.coll-card.locked .cc-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:28px;opacity:.6;filter:drop-shadow(0 0 4px #000);}
/* ── RUNEN-SCHMIEDE (Vollbild, Feuer+Stein-Mix) ── */
#rune-forge-screen{position:fixed;inset:0;z-index:806;display:none;flex-direction:column;
  background:linear-gradient(160deg,#0a0604,#0d0a08,#0a0606);font-family:'Cinzel',serif;color:var(--text);}
#rune-forge-screen.open{display:flex;}
#rf-header{display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.5);}
#rf-header h2{font-size:20px;letter-spacing:3px;color:#ff9a44;flex:1;text-shadow:0 0 12px rgba(255,120,40,.5);}
#rf-dust{font-size:14px;color:#ffcf99;font-weight:700;white-space:nowrap;}
#rf-msg{font-size:12px;color:#ffcc66;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw;}
#rf-body{display:flex;flex:1;overflow:hidden;}
#rf-filters{width:200px;flex-shrink:0;padding:12px;border-right:1px solid var(--border);
  overflow-y:auto;background:rgba(0,0,0,.35);display:flex;flex-direction:column;gap:8px;}
#rf-filters h3{font-size:11px;letter-spacing:2px;color:#c9a227;margin:0;}
#rf-tip{margin-top:14px;padding:8px 10px;background:rgba(201,162,39,.08);border-left:3px solid var(--gold);
  border-radius:4px;color:#e8d5a3;font-size:10px;line-height:1.5;}
#rf-grid{flex:1;padding:16px;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px;
  background:linear-gradient(rgba(10,5,2,.80),rgba(10,5,2,.90)),url('cards/reich_muspelheim_neu_v0.png') center/cover no-repeat;}
.rf-station{width:182px;border-radius:9px;border:1px solid #5a3a1a;
  background:linear-gradient(180deg,rgba(20,12,6,.92),rgba(8,5,3,.95));
  box-shadow:0 4px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,180,90,.12);
  padding:10px;text-align:center;position:relative;transition:transform .15s,box-shadow .15s;}
.rf-station:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.8),0 0 16px rgba(255,140,50,.35);}
.rf-station.owned{border-color:var(--gold);}
.rf-station .rf-own{position:absolute;top:6px;right:8px;font-size:11px;font-weight:700;
  background:rgba(0,0,0,.7);padding:1px 7px;border-radius:9px;border:1px solid rgba(201,162,39,.5);}
.rf-station img{width:100%;height:88px;object-fit:cover;border-radius:6px;display:block;}
.rf-name{font-weight:700;font-size:13px;margin-top:6px;font-family:Cinzel,serif;}
.rf-rarity{font-size:9px;letter-spacing:1px;color:#8a7a5a;}
.rf-bonus{font-size:11px;margin:5px 0;min-height:30px;line-height:1.35;}
.rf-btns{display:flex;gap:5px;margin-top:4px;}
.rf-btns .btn{flex:1;font-size:11px;padding:6px 2px;}
/* ── KAMPAGNE (Vollbild) ── */
#campaign-screen{position:fixed;inset:0;z-index:806;display:none;flex-direction:column;
  font-family:'Cinzel',serif;color:var(--text);
  background:linear-gradient(rgba(4,5,9,.84),rgba(6,5,10,.93)),url('cards/bg_battlefield.png') center/cover no-repeat,#05060a;}
#campaign-screen.open{display:flex;}
#cm-header{display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.55);}
#cm-header h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;text-shadow:0 0 14px rgba(201,162,39,.45);}
#cm-progress{font-size:14px;color:var(--dim);white-space:nowrap;}
#cm-progress-bar{width:200px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
#cm-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ffd700);border-radius:3px;transition:width .4s;}
#cm-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:24px 20px;
  background:radial-gradient(ellipse at 50% 30%, rgba(60,44,12,.28), transparent 70%);}
#cm-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:min(1040px,96%);}
.cm-card{width:222px;height:272px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  border:2px solid #3a2a0a;background:#0a0806;transition:transform .18s,box-shadow .18s,border-color .18s;}
.cm-card-art{position:absolute;inset:0;background-size:cover;background-position:center top;}
.cm-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 38%,rgba(0,0,0,.93));}
.cm-card-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 13px;text-align:left;}
.cm-realm{font-size:17px;font-weight:700;letter-spacing:2px;color:#ffd877;font-family:Cinzel,serif;text-shadow:0 2px 6px #000;}
.cm-boss{font-size:12px;color:#e8d5a3;text-shadow:0 1px 4px #000;margin-top:1px;}
.cm-reward{font-size:12px;color:#ffcf99;letter-spacing:1px;margin-top:5px;}
.cm-card-num{position:absolute;top:6px;left:11px;z-index:2;font-family:Cinzel,serif;font-size:24px;font-weight:700;
  color:#ffd877;text-shadow:0 2px 8px #000;opacity:.92;}
.cm-badge{position:absolute;top:9px;right:9px;z-index:2;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:10px;}
.cm-badge.current{background:#c9a227;color:#1a1208;box-shadow:0 0 12px rgba(255,215,119,.7);}
.cm-badge.done{background:rgba(18,40,18,.92);color:#7dd87d;border:1px solid #4a8a4a;}
.cm-badge.locked{background:rgba(0,0,0,.72);color:#8a7a5a;border:1px solid #3a2a0a;}
.cm-card.done{border-color:#6a8a4a;}
.cm-card.current{border-color:var(--gold);animation:cmPulse 2.2s ease-in-out infinite;}
.cm-card.current:hover,.cm-card.done:hover{transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 38px rgba(0,0,0,.8),0 0 22px rgba(201,162,39,.5);border-color:#ffd877;}
.cm-card.locked{cursor:not-allowed;}
.cm-card.locked .cm-card-art{filter:grayscale(1) brightness(.32);}
.cm-card.locked::before{content:'🔒';position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:3;
  font-size:40px;opacity:.85;filter:drop-shadow(0 2px 8px #000);}
@keyframes cmPulse{0%,100%{box-shadow:0 0 16px rgba(201,162,39,.35);}50%{box-shadow:0 0 30px rgba(201,162,39,.6);}}
#cm-hint{color:#c9b888;font-size:13px;font-style:italic;letter-spacing:1px;text-shadow:0 2px 6px #000;}
/* ── Generische Vollbild-Seiten (Lore / Profil / Achievements) ── */
.page-screen{position:fixed;inset:0;z-index:806;display:none;flex-direction:column;
  font-family:'Cinzel',serif;color:var(--text);background:linear-gradient(160deg,#060504,#0a0d08,#06050a);}
.page-screen.open{display:flex;}
.page-head{display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.5);}
.page-head h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;text-shadow:0 0 12px rgba(201,162,39,.4);}
.page-close{font-size:10px;padding:6px 14px;border-color:#666;color:#aaa;margin-left:auto;}
.page-body{flex:1;overflow-y:auto;padding:18px 22px;}
.page-body .lore-tab.active{border-color:#ffd877;color:#ffd877;}
/* ════ LORE-CODEX (PDF-Look) ════ */
.lore-tabbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px;}
.lore-tab{font-family:'Cinzel','Georgia',serif;letter-spacing:1px;}
.lore-sec{text-align:center;margin:10px auto 22px;}
.lore-sec-rune{font-family:'Segoe UI Historic','Segoe UI Symbol',serif;font-size:30px;color:#ffd877;line-height:1;filter:drop-shadow(0 2px 10px rgba(255,200,90,.4));}
.lore-sec-title{font-family:'Cinzel','Georgia',serif;font-size:26px;color:#fff;letter-spacing:2px;margin-top:4px;text-shadow:0 2px 16px rgba(255,200,90,.25);}
.lore-sec-rule{display:flex;align-items:center;justify-content:center;gap:14px;color:#ffd877;margin:8px auto 4px;font-size:13px;}
.lore-sec-rule span{display:block;height:1px;width:90px;background:linear-gradient(90deg,transparent,#ffd877,transparent);}
.lore-sec-sub{color:#e8d5a3;font-style:italic;font-size:14px;}
.lore-wrap{max-width:900px;margin:0 auto;}
/* Reiche — abwechselnde Bild/Text-Panels */
.lore-realms{display:flex;flex-direction:column;gap:16px;}
.lore-realm{display:flex;border:1px solid rgba(255,216,119,.28);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(40,32,60,.55),rgba(15,12,26,.65));box-shadow:0 6px 20px rgba(0,0,0,.4);}
.lore-realm.rev{flex-direction:row-reverse;}
.lr-art{position:relative;flex:0 0 240px;min-height:170px;}
.lr-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lore-realm .lr-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(15,12,26,.9));}
.lore-realm.rev .lr-art::after{background:linear-gradient(270deg,transparent 55%,rgba(15,12,26,.9));}
.lr-rune{position:absolute;top:8px;left:10px;font-family:'Segoe UI Historic',serif;font-size:24px;color:#ffd877;text-shadow:0 2px 8px #000;z-index:2;}
.lr-body{flex:1;padding:18px 22px;display:flex;flex-direction:column;justify-content:center;}
.lr-eyebrow{color:#b7ad97;letter-spacing:3px;text-transform:uppercase;font-size:10px;}
.lr-body h3{font-family:'Cinzel','Georgia',serif;font-size:24px;color:#fff;margin:2px 0;letter-spacing:1px;}
.lr-ruler{color:#ffd877;font-style:italic;font-size:13px;margin-bottom:8px;}
.lr-body p{color:#ece6d8;font-size:13.5px;line-height:1.65;font-family:'IM Fell English','Georgia',serif;}
/* Fraktionen — farbcodierte Bänder */
.lore-facs{display:flex;flex-direction:column;gap:12px;}
.lore-fac{display:flex;border:1px solid rgba(255,216,119,.22);border-left:5px solid var(--fc);border-radius:8px;overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--fc) 13%,rgba(15,12,26,.7)),rgba(15,12,26,.7));}
.lf-art{flex:0 0 130px;position:relative;}
.lf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lf-body{flex:1;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;}
.lf-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
.lf-top h3{font-family:'Cinzel','Georgia',serif;font-size:18px;color:#fff;}
.lf-tag{color:var(--fc);font-size:13px;letter-spacing:1px;white-space:nowrap;}
.lf-body p{color:#e8d5a3;font-size:13px;line-height:1.6;font-family:'IM Fell English','Georgia',serif;}
/* Götter — Porträt-Grid */
.lore-gods{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.lore-god{border:1px solid rgba(255,216,119,.28);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(40,32,60,.5),rgba(15,12,26,.66));}
.lg-art{position:relative;height:200px;}
.lg-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.lg-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(15,12,26,.94));}
.lg-body{padding:14px 18px 18px;}
.lg-body h3{font-family:'Cinzel','Georgia',serif;font-size:17px;color:#ffd877;margin-bottom:5px;letter-spacing:.5px;}
.lg-body p{color:#ece6d8;font-size:13px;line-height:1.6;font-family:'IM Fell English','Georgia',serif;}
/* Mechaniken — Runen-Medaillons */
.lore-mechs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lore-mech{display:flex;gap:14px;align-items:flex-start;border:1px solid rgba(255,216,119,.28);border-radius:10px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(40,32,60,.5),rgba(15,12,26,.66));}
.lm-rune{flex:0 0 50px;height:50px;display:flex;align-items:center;justify-content:center;font-family:'Segoe UI Historic',serif;
  font-size:26px;color:#ffd877;border:1px solid rgba(255,216,119,.35);border-radius:50%;background:rgba(255,216,119,.07);}
.lm-body h3{font-family:'Cinzel','Georgia',serif;font-size:15px;color:#fff;margin-bottom:4px;}
.lm-body p{color:#e8d5a3;font-size:12.5px;line-height:1.55;font-family:'IM Fell English','Georgia',serif;}
@media(max-width:720px){.lore-gods,.lore-mechs{grid-template-columns:1fr;}.lr-art{flex-basis:150px;}.lore-realm,.lore-realm.rev{flex-direction:column;}.lore-realm .lr-art::after{background:linear-gradient(180deg,transparent 60%,rgba(15,12,26,.9));}}
/* Rarity card borders in game */
.mc.rarity-uncommon{border-color:rgba(160,192,160,.6);box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 6px rgba(160,192,160,.2);}
.mc.rarity-rare{border-color:rgba(201,162,39,.7);box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 10px rgba(201,162,39,.25),0 0 20px rgba(201,162,39,.1);}
@keyframes legendaryShimmer{
  0%{box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 10px rgba(255,136,0,.3),0 0 25px rgba(255,136,0,.15);}
  50%{box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 18px rgba(255,136,0,.6),0 0 40px rgba(255,200,0,.2),0 0 60px rgba(255,100,0,.1);}
  100%{box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 10px rgba(255,136,0,.3),0 0 25px rgba(255,136,0,.15);}
}
.mc.rarity-legendary{border-color:rgba(255,136,0,.8);animation:legendaryShimmer 2.5s ease-in-out infinite;}
.mc.rarity-legendary:hover{animation:none;box-shadow:0 12px 35px rgba(0,0,0,.8),0 0 25px rgba(255,136,0,.6),0 0 50px rgba(255,100,0,.3)!important;}
/* Hand fan */
.hand .mc{transition:transform .2s, box-shadow .2s, z-index 0s;}
.hand .mc:hover{transform:translateY(-40px) scale(1.15)!important;z-index:300!important;
  box-shadow:0 16px 50px rgba(0,0,0,.9),0 0 20px rgba(201,162,39,.25)!important;}
/* P/T buff/debuff colors */
.mc-pt .pt-buffed{color:#44ff88;text-shadow:0 0 6px rgba(68,255,136,.8);}
.mc-pt .pt-debuffed{color:#ff4444;text-shadow:0 0 6px rgba(255,68,68,.8);}
/* Keyword icons */
.mc-kw{position:absolute;top:3px;left:3px;display:flex;flex-wrap:wrap;gap:1px;max-width:60%;z-index:4;}
.kw-icon{font-size:10px;line-height:1;background:rgba(0,0,0,.65);border-radius:3px;padding:1px 2px;cursor:default;}
/* Mute button */
#sfx-btn{position:fixed;bottom:14px;left:14px;z-index:900;background:rgba(13,12,8,.85);border:1px solid rgba(80,60,20,.5);
  color:var(--dim);font-size:15px;width:32px;height:32px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
#sfx-btn:hover{border-color:var(--gold);color:var(--gold);}
/* Spell Announce Overlay */
#spell-announce{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);}
#spell-announce.open{display:flex;}
.sa-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;animation:saIn .25s ease-out;}
@keyframes saIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.sa-who{font-size:13px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;}
.sa-card-big{width:200px;height:280px;border-radius:10px;position:relative;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 0 30px rgba(201,162,39,.5),0 8px 40px rgba(0,0,0,.8);
  display:flex;flex-direction:column;background:#1a1208;}
.sa-card-big img{width:100%;height:58%;object-fit:cover;object-position:center top;flex-shrink:0;}
.sa-card-big .sa-stripe{position:absolute;top:0;left:0;right:0;height:4px;}
.sa-card-big .sa-cname{font-size:14px;font-weight:700;color:#e8d5a3;padding:4px 7px 1px;letter-spacing:.3px;}
.sa-card-big .sa-ctype{font-size:11px;color:var(--dim);padding:0 7px 3px;}
.sa-card-big .sa-ctext{font-size:11px;color:#c0b080;padding:0 7px;font-family:'IM Fell English',serif;flex:1;overflow:hidden;}
.sa-ok{margin-top:4px;padding:10px 48px;font-family:'Cinzel',serif;font-size:14px;letter-spacing:2px;
  background:linear-gradient(135deg,#3a2a08,#1a1208);border:1px solid var(--gold);
  color:var(--gold);cursor:pointer;border-radius:4px;transition:background .15s;}
.sa-ok:hover{background:linear-gradient(135deg,#5a3a08,#2a1a08);}
.sa-auto-bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.sa-auto-fill{height:100%;background:var(--gold);border-radius:2px;transition:width linear;}
/* Life animations */
@keyframes lifeHit{0%{color:#ff7777}25%{color:#ff0000;transform:scale(1.4)}50%{color:#ff4444;transform:scale(1.2)}100%{color:#ff7777;transform:scale(1)}}
@keyframes lifeHeal{0%{color:#ff7777}25%{color:#44ff44;transform:scale(1.3)}100%{color:#ff7777;transform:scale(1)}}
.life.hit{animation:lifeHit .5s ease-out;}
.life.heal{animation:lifeHeal .5s ease-out;}
/* ── SHOP SCREEN ── */
#shop-screen{position:fixed;inset:0;z-index:820;display:none;flex-direction:column;
  background:
    linear-gradient(180deg, rgba(6,6,5,.85) 0%, rgba(6,6,5,.65) 50%, rgba(6,6,5,.92) 100%),
    url('cards/bg_menu_yggdrasil.jpg') center/cover no-repeat,
    linear-gradient(160deg,#060504,#0a0d08,#06050a);
  font-family:'Cinzel',serif;color:var(--text);overflow:hidden;}
#shop-screen.open{display:flex;}
#shop-screen::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 800px 400px at 50% 10%, rgba(255,215,119,.10), transparent 60%);
  mix-blend-mode: screen;
}
#shop-header{display:flex;align-items:center;gap:16px;padding:12px 20px;flex-shrink:0;
  border-bottom:1px solid var(--border);background:rgba(0,0,0,.65);backdrop-filter:blur(10px);position:relative;z-index:1;}
#shop-body{position:relative;z-index:1;}
#shop-header h2{font-size:20px;letter-spacing:3px;color:var(--gold);flex:1;}
#shop-body{display:flex;flex:1;overflow:hidden;}
#shop-cats{width:180px;flex-shrink:0;padding:12px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.25);}
#shop-cats h3{font-size:12px;letter-spacing:2px;color:var(--gold);margin-bottom:4px;}
.shop-cat-btn{background:transparent;border:1px solid var(--border);color:var(--dim);
  font-family:'Cinzel',serif;font-size:13px;padding:9px 14px;border-radius:4px;cursor:pointer;
  text-align:left;transition:all .2s;width:100%;display:flex;align-items:center;gap:8px;}
.shop-cat-icon{width:32px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.shop-cat-btn:hover{border-color:rgba(201,162,39,.6);color:var(--text);}
.shop-cat-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.08);}
#shop-grid{flex:1;padding:16px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start;}
.shop-item{width:200px;background:rgba(13,12,8,.9);border:1.5px solid rgba(58,42,10,.8);border-radius:10px;
  padding:16px;cursor:pointer;transition:all .2s;position:relative;display:flex;flex-direction:column;gap:8px;}
.shop-item:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.8),0 0 15px rgba(201,162,39,.15);}
.shop-item-img{text-align:center;padding:4px 0;}.shop-item-img img{width:120px;height:120px;object-fit:cover;border-radius:8px;image-rendering:auto;}
.shop-item-name{font-size:14px;font-weight:700;color:var(--text);text-align:center;letter-spacing:.5px;}
.shop-item-desc{font-size:11px;color:var(--dim);text-align:center;line-height:1.4;}
.shop-item-price{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;
  background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.15);border-radius:6px;padding:7px;}
.shop-item-price .price-label{font-size:16px;font-weight:700;color:var(--gold);}
.shop-item-price .price-real{font-size:16px;font-weight:700;color:#88ff88;}
.shop-badge{position:absolute;top:-8px;right:-8px;background:#dd4400;color:#fff;font-size:9px;
  font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:.5px;z-index:2;}
.shop-badge.popular{background:#7b68ee;}
.shop-badge.best{background:#c9a227;color:#000;}
.shop-currency-bar{display:flex;gap:10px;align-items:center;}
.shop-curr{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;
  background:rgba(0,0,0,.4);padding:5px 12px;border-radius:12px;border:1px solid rgba(201,162,39,.2);}
.shop-curr.gold-c{color:#ffd700;border-color:rgba(255,215,0,.25);}
.shop-curr.gems-c{color:#9988ff;border-color:rgba(153,136,255,.25);}
/* ── QUEST BAR IMPROVED ── */
.ss-quest-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.ss-quest-name{font-size:12px;color:var(--text);font-weight:600;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ss-quest-prog-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:2px;}
.ss-quest-prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ffd700);border-radius:2px;transition:width .4s;}
.ss-quest.complete{border-color:rgba(100,255,100,.4)!important;background:rgba(50,200,50,.08)!important;cursor:pointer;}
.ss-quest-reward-lbl{font-size:12px;color:var(--gold);font-weight:700;white-space:nowrap;flex-shrink:0;}
.ss-quest-type-lbl{font-size:8px;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;}
/* ── WEEKLY WINS TRACK ── X-Upgrade: größer + besser sichtbar */
.weekly-wins-track{display:flex;gap:2px;align-items:flex-start;width:100%;padding:10px 4px 8px;position:relative;}
.weekly-wins-line{position:absolute;top:30px;left:22px;right:22px;height:3px;
  background:linear-gradient(90deg,rgba(201,162,39,.3),rgba(255,255,255,.08),rgba(201,162,39,.3));z-index:0;border-radius:2px;}
.ww-node{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;}
.ww-dot{width:44px;height:44px;border-radius:50%;border:2.5px solid rgba(201,162,39,.25);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  background:radial-gradient(circle at 30% 30%, #1a1208, #0d0c08);transition:all .3s cubic-bezier(.2,.7,.3,1.2);cursor:default;
  font-family:'Cinzel',serif;color:rgba(201,162,39,.5);}
.ww-node.earned .ww-dot{
  background:radial-gradient(circle at 30% 30%, #ffd877, #c9a227);
  border-color:#ffd877;color:#1a1208;font-size:16px;
  box-shadow:0 0 16px rgba(255,215,119,.7), inset 0 2px 4px rgba(255,255,255,.4);
}
.ww-node.current .ww-dot{border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 20px rgba(201,162,39,.8);animation:wwPulse 1.8s ease-in-out infinite;
  background:radial-gradient(circle, rgba(201,162,39,.15), #0d0c08);}
@keyframes wwPulse{0%,100%{box-shadow:0 0 14px rgba(201,162,39,.5);transform:scale(1)}
  50%{box-shadow:0 0 28px rgba(201,162,39,.9);transform:scale(1.08)}}
.ww-label{font-size:11px;color:var(--dim);text-align:center;white-space:nowrap;letter-spacing:.8px;font-weight:600;}
.ww-node.earned .ww-label{color:#ffd877;text-shadow:0 0 6px rgba(201,162,39,.5);}
.ww-node.current .ww-label{color:var(--gold);font-weight:700;}
/* ── LEVEL BADGE ── */
#ss-level-badge{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--gold);
  background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.3);padding:5px 12px;
  border-radius:12px;font-weight:700;letter-spacing:.5px;}
.gold-currency{color:#ffd700!important;}
.gem-currency{color:#9988ff!important;}
/* ── FLOAT REWARD ── */
@keyframes floatReward{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(.8)}
  20%{opacity:1;transform:translateX(-50%) translateY(-15px) scale(1.2)}
  100%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(1.4)}}
.float-reward{position:fixed;left:50%;font-size:22px;font-weight:900;pointer-events:none;z-index:1500;
  font-family:'Cinzel',serif;animation:floatReward 1.5s ease-out forwards;text-shadow:0 0 20px currentColor;white-space:nowrap;}
.float-reward.gold{color:#ffd700;}
.float-reward.gems{color:#9988ff;}
.float-reward.pack{color:#c9a227;}
/* ── GRAVE CARD GRID ── */
.grave-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px;}
.grave-thumb{width:76px;text-align:center;cursor:default;}
.grave-thumb img{width:76px;height:55px;object-fit:cover;border-radius:4px;border:1px solid rgba(201,162,39,.25);}
.grave-thumb-name{font-size:9px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ── XP BAR ── */
.xp-bar-wrap{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:4px;}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,#c9a227,#ffd700);border-radius:2px;transition:width .5s;}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE — Phase H.3
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Smaller cards on tablet */
  .mc { width: 110px; height: 154px; }
  .mc img { height: 60%; }
  .mc-name { font-size: 11px; padding: 2px 4px 0; }
  .mc-sub { font-size: 9px; padding: 0 4px; }
  .mc-pt { font-size: 14px; bottom: 2px; right: 4px; }
  .bf-lands .mc { transform: scale(0.50); margin: -45px -32px; }
  /* Hand area */
  .hand { min-height: 165px; }
}

@media (max-width: 640px) {
  /* Phone-Layout */
  body { font-size: 12px; }
  #app { grid-template-rows: 1fr 42px 1fr; }
  .parea { padding: 4px 6px; }
  /* Mini-Cards */
  .mc { width: 86px; height: 120px; border-radius: 6px; border-width: 1px; }
  .mc img { height: 58%; }
  .mc-name { font-size: 9px; padding: 2px 3px 0; letter-spacing: 0; }
  .mc-sub { font-size: 8px; padding: 0 3px; }
  .mc-pt { font-size: 12px; bottom: 1px; right: 3px; }
  .mc-stripe { height: 3px; }
  /* Hand area smaller + scroll */
  .hand { min-height: 130px; gap: 3px; padding: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Battlefield rows */
  .bf-row.bf-creatures { gap: 4px; padding: 3px; min-height: 60px; }
  .bf-row.bf-lands { height: 70px; padding: 2px; }
  .bf-lands .mc { transform: scale(0.42); margin: -36px -25px; }
  .bf-lands .mc.tapped { transform: rotate(90deg) scale(0.42); margin: -22px -8px; }
  /* Player info bar */
  .pname { font-size: 11px; letter-spacing: 1px; }
  .life { font-size: 18px; min-width: 40px; }
  .mp { width: 18px; height: 18px; font-size: 10px; }
  .zctr { width: 38px; height: 38px; font-size: 8px; }
  .zctr span { font-size: 13px; }
  /* Middle bar */
  #mid { height: 38px; flex-wrap: wrap; gap: 4px; }
  #turn-lbl { font-size: 10px; min-width: 0; flex: 1; }
  .btn { font-size: 11px; padding: 5px 10px; }
  .btn.red { font-size: 10px; padding: 5px 9px; }
  #log-txt { display: none; } /* zu wenig Platz */
  /* Tooltip overlap fix */
  #tt { width: 200px; padding: 8px; font-size: 11px; }
  #tt img { width: 180px; max-height: 230px; }
  /* Modal */
  #mc2 { padding: 18px; max-width: 92%; max-height: 88vh; overflow-y: auto; }
  #m-title { font-size: 17px; }
  /* Touch-friendly larger tap targets */
  .deck-btn, .db-filter-btn { min-height: 44px; padding: 10px 14px; }
  /* Start-Screen: stack vertically */
  #ss-content { flex-direction: column; }
  #ss-sidebar { width: 100%; }
  #ss-hero-card { padding: 14px; }
  #ss-hero-title { font-size: 38px; letter-spacing: 5px; }
  /* Deck-Builder & Shop & Collection: hide labels, smaller buttons */
  #db-search-input { font-size: 12px; padding: 8px; }
  .ss-nav-item { padding: 6px 9px; font-size: 10px; }
  .ss-nav-item span:not(.icon) { display: none; } /* nur Icons */
  /* Currency display */
  .currency-pill { padding: 3px 8px; font-size: 11px; }
  /* Tasks bar at bottom */
  .ss-task-card { padding: 6px 8px; font-size: 10px; }
  /* Track C: Mindest-Tap-Flächen ≥44px für interaktive In-Game-Elemente (WCAG 2.5.5) */
  .btn { min-height: 44px; }
  .zctr { min-width: 44px; min-height: 44px; }
  .log-toggle { width: 44px; height: 44px; font-size: 16px; }
}

@media (max-width: 400px) {
  /* Very small phones */
  .mc { width: 70px; height: 98px; }
  .mc img { height: 55%; }
  .mc-name { font-size: 8px; }
  .mc-sub { display: none; }
  .mc-pt { font-size: 11px; }
  .bf-lands .mc { transform: scale(0.36); margin: -32px -22px; }
}

/* Touch-Device: disable hover-lift to avoid sticky cards */
@media (hover: none) {
  .mc:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
  .mc.tapped:hover { transform: rotate(90deg); }
}

/* ════════════════════════════════════════════════════════════
   PHASE X — PREMIUM UI POLISH (Cinematic + Currency + Hover + Typography)
   ════════════════════════════════════════════════════════════ */

/* ── X.1 Animated Embers + Parallax Background ── */
#ember-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  overflow: hidden;
}
.ember {
  position: absolute;
  bottom: -20px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd877 0%, #c9a227 40%, transparent 70%);
  box-shadow: 0 0 8px #ffd877, 0 0 16px rgba(201,162,39,.5);
  opacity: 0;
  animation: emberRise linear infinite;
  will-change: transform, opacity;
}
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translateY(-50vh) translateX(20px) scale(1); }
  90% { opacity: 0.7; }
  100% { transform: translateY(-110vh) translateX(-30px) scale(0.3); opacity: 0; }
}

/* Y: Video-Background — Yggdrasil animiert via MP4 */
#start-bg-video {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.05) saturate(1.2) contrast(1.05);
  animation: bgBreathe 8s ease-in-out infinite;
}
/* Parallax-Overlay: nur Vignette/Light-Rays — kein BG-Image mehr */
#start-bg-parallax {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: transparent;
}
@keyframes bgKenBurns {
  0%   { transform: scale(1.08) translate(0, 0); }
  25%  { transform: scale(1.12) translate(-30px, -15px); }
  50%  { transform: scale(1.15) translate(20px, -25px); }
  75%  { transform: scale(1.10) translate(15px, 10px); }
  100% { transform: scale(1.08) translate(-10px, 5px); }
}
@keyframes bgBreathe {
  0%, 100% { filter: brightness(1.05) saturate(1.2) contrast(1.05); }
  50%      { filter: brightness(1.18) saturate(1.35) contrast(1.1); }
}
#start-bg-parallax::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,5,.55) 0%, transparent 25%, transparent 75%, rgba(6,6,5,.55) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(6,6,5,.4) 90%);
}

/* Zusätzliche atmosphärische Layer: schwebende Lichtstrahlen (über Video) */
#start-bg-parallax::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 300px at 50% 20%, rgba(255,215,119,.15), transparent 70%),
    radial-gradient(ellipse 400px 600px at 70% 40%, rgba(255,215,119,.10), transparent 70%);
  animation: lightRays 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events:none;
}
@keyframes lightRays {
  0%   { opacity: 0.6; transform: translateX(-20px) scale(1); }
  100% { opacity: 1; transform: translateX(20px) scale(1.05); }
}
/* Stelle sicher dass start-screen relativen Position-Context für Parallax bietet */
#start-screen {
  position: fixed !important;
  background: var(--bg) !important;
}

/* Glowing runes overlay (very subtle, slow pulse) */
.rune-bg {
  position: fixed; pointer-events: none; z-index: 2;
  font-family: serif; color: rgba(201,162,39, 0.08);
  font-size: 120px; font-weight: 700;
  text-shadow: 0 0 30px rgba(201,162,39, 0.3);
  animation: runePulse 6s ease-in-out infinite;
}
@keyframes runePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ── X.1 Glassmorphism Panels ── */
#ss-quick-stats, #ss-hero-card, .ss-panel {
  background: rgba(13, 12, 8, 0.55) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 215, 119, 0.08);
}
#ss-nav {
  background: linear-gradient(180deg, rgba(13,12,8,0.92) 0%, rgba(13,12,8,0.75) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative; z-index: 10;
}
#ss-content { position: relative; z-index: 5; }
.quest-bar, #ss-quests-bar { position: relative; z-index: 5; }

/* ── X.1 Hero Title + Slide-In ── */
#ss-hero { position: relative; z-index: 10; }
#ss-hero-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 12px;
  background: linear-gradient(180deg, #ffd877 0%, #c9a227 50%, #8a6a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(201,162,39, 0.5);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
  animation: heroSlideIn 1s cubic-bezier(.2,.7,.3,1) both;
}
#ss-hero-sub {
  animation: heroSlideIn 1.1s cubic-bezier(.2,.7,.3,1) 0.15s both;
  font-family: 'Cinzel', serif;
  letter-spacing: 8px;
  color: #c9a227;
  text-shadow: 0 0 20px rgba(201,162,39, 0.5);
}
#ss-hero-card {
  animation: heroSlideIn 1.2s cubic-bezier(.2,.7,.3,1) 0.3s both;
}
@keyframes heroSlideIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Hero title accent decoration */
#ss-hero-title::before, #ss-hero-title::after {
  content: '⚔'; color: rgba(201,162,39, 0.4);
  font-size: 0.5em; vertical-align: middle; padding: 0 0.3em;
  -webkit-text-fill-color: rgba(201,162,39, 0.5);
  text-shadow: none; filter: none;
}

/* ── X.1 Faction-Colored Deck Buttons ── */
.deck-btn[data-faction="aesir"] { --fcol: 201,162,39; --fglow: 255,215,119; }
.deck-btn[data-faction="hel"]   { --fcol: 106,154,90; --fglow: 154,200,138; }
.deck-btn[data-faction="eld"]   { --fcol: 221,68,0;   --fglow: 255,128,68;  }
.deck-btn[data-faction="natur"] { --fcol: 74,154,42;  --fglow: 138,219,138; }
.deck-btn[data-faction="seidr"] { --fcol: 123,104,238; --fglow: 168,148,255; }
.deck-btn {
  border: 1.5px solid rgba(var(--fcol, 201,162,39), 0.4) !important;
  background: linear-gradient(135deg, rgba(var(--fcol, 201,162,39), 0.08) 0%, rgba(13,12,8,0.85) 100%) !important;
  color: rgb(var(--fglow, 255,215,119)) !important;
  transition: all .3s cubic-bezier(.2,.7,.3,1.2) !important;
  position: relative; overflow: hidden;
}
.deck-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fglow, 255,215,119), 0.25) 0%, transparent 50%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.deck-btn:hover {
  border-color: rgb(var(--fglow, 255,215,119)) !important;
  box-shadow: 0 0 16px rgba(var(--fcol, 201,162,39), 0.5), 0 8px 24px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}
.deck-btn:hover::before { opacity: 1; }
.deck-btn.sel-deck, .deck-btn.selected, .deck-btn[data-selected="true"] {
  background: linear-gradient(135deg, rgba(var(--fcol, 201,162,39), 0.4) 0%, rgba(13,12,8,0.9) 100%) !important;
  border-color: rgb(var(--fglow, 255,215,119)) !important;
  box-shadow: 0 0 24px rgba(var(--fcol, 201,162,39), 0.8), inset 0 0 16px rgba(var(--fglow, 255,215,119), 0.3) !important;
  color: rgb(var(--fglow, 255,215,119)) !important;
  font-weight: 700 !important;
  transform: scale(1.04);
}
.deck-btn.sel-deck::after, .deck-btn.selected::after {
  content: '✓'; position: absolute; top: 3px; right: 6px;
  color: rgb(var(--fglow, 255,215,119)); font-size: 11px; font-weight: 700;
  text-shadow: 0 0 6px currentColor;
}
/* Fallback wenn Mode-Sel-Buttons keine Faction haben (Hotseat/KI) */
.deck-btn.sel-deck:not([data-faction]) {
  --fcol: 201,162,39; --fglow: 255,215,119;
  background: linear-gradient(135deg, rgba(201,162,39,0.4), rgba(13,12,8,0.9)) !important;
  border-color: #ffd877 !important;
  box-shadow: 0 0 24px rgba(201,162,39,0.7), inset 0 0 16px rgba(255,215,119,0.3) !important;
}

/* ── X.2 Premium Currency Counters ── */
.ss-currency {
  transition: transform .25s, filter .25s;
  position: relative;
}
.ss-currency:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.2);
}
.ss-currency.flash {
  animation: currencyFlash 0.6s ease-out;
}
@keyframes currencyFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); filter: brightness(1.6) drop-shadow(0 0 12px #ffd877); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Progress bars */
#ss-coll-bar, #ss-xp-bar, [id$="-bar-fill"] {
  background: linear-gradient(90deg, #c9a227 0%, #ffd877 50%, #c9a227 100%) !important;
  background-size: 200% 100% !important;
  animation: barShimmer 3s linear infinite;
  transition: width .8s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 8px rgba(201,162,39, 0.5);
}
@keyframes barShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Quest badges (täglich/wöchentlich) — subtle pulse */
.quest-badge, [class*="quest-"] {
  transition: transform .2s, box-shadow .2s;
}
.quest-badge.claimable, .ss-quest-card.claimable {
  animation: questPulse 1.8s ease-in-out infinite;
}
@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,215,119,0); }
  50% { box-shadow: 0 0 22px rgba(255,215,119, 0.6); }
}

/* ── X.3 Hover & Micro-Interactions ── */
/* Premium button-ripple */
.btn { position: relative; overflow: hidden; transition: all .25s cubic-bezier(.2,.7,.3,1.2) !important; }
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,215,119, 0.25) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none; border-radius: inherit;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,162,39, 0.25); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Smooth tooltip fade-in */
#tt, .kw-tip { transition: opacity .2s !important; }

/* Nav items elegant active indicator */
.ss-nav-item {
  position: relative;
  transition: color .25s, background .25s !important;
}
.ss-nav-item::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd877, transparent);
  transition: width .3s cubic-bezier(.2,.7,.3,1.2);
}
.ss-nav-item:hover::after { width: 80%; }
.ss-nav-item.active::after { width: 100%; height: 3px; box-shadow: 0 0 12px #ffd877; }
.ss-nav-item.active {
  background: linear-gradient(180deg, rgba(201,162,39,0.18) 0%, rgba(201,162,39,0.05) 100%);
}

/* Cards-Grid hover-zoom */
.coll-card, .pack-card {
  transition: transform .3s cubic-bezier(.2,.7,.3,1.2), box-shadow .3s !important;
}
.coll-card:hover, .pack-card:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 24px rgba(201,162,39, 0.4) !important;
  z-index: 50;
}

/* ── X.4 Typography & Hierarchy ── */
/* Section header dividers with rune ornaments */
.ss-section-title, .ss-quick-stats h3, #db-filters h3 {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  position: relative;
  padding: 6px 0 !important;
  margin: 8px 0 !important;
}
.ss-section-title::before, .ss-section-title::after,
#db-filters h3::before, #db-filters h3::after {
  content: '';
  display: inline-block;
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  vertical-align: middle;
  margin: 0 8px;
}
#db-filters h3 { text-align: left; }

/* Welcome text — bigger, italic */
#ss-hero-card h3 {
  font-family: 'Cinzel', serif;
  font-size: 22px !important;
  letter-spacing: 2px;
  color: #ffd877;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}
#ss-hero-card p {
  font-family: 'IM Fell English', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: rgba(232, 213, 163, 0.9);
}

/* Right panel labels — Cinzel uniform */
#ss-quick-stats > div > div:first-child,
.panel-label { font-family: 'Cinzel', serif; letter-spacing: 2.5px; font-size: 10px; }

/* ── R.5/S.0.a Land-Karten: Full-Art via background-image ── */
.mc.mc-land {
  background-color: #0a0805;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--gold);
  overflow: hidden;
  position: relative;
  display: block !important; /* override .mc display:flex */
}
/* Schöner Vignette-Overlay für Lesbarkeit des Titels */
.mc.mc-land .mc-land-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.3) 22%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.1) 80%,
    rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.mc.mc-land .mc-land-header {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  z-index: 5;
}
.mc.mc-land .mc-land-name {
  color: #ffd877;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc.mc-land .mc-land-manas {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.mc.mc-land .mc-land-mana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-family: serif;
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid rgba(0,0,0,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mc.mc-land .mc-land-mana-aesir { background: radial-gradient(circle at 30% 30%, #ffd877, #c9a227); color: #1a1208; }
.mc.mc-land .mc-land-mana-seidr { background: radial-gradient(circle at 30% 30%, #a8b8ff, #4858bb); color: #fff; }
.mc.mc-land .mc-land-mana-hel   { background: radial-gradient(circle at 30% 30%, #aabb9a, #4a6a3a); color: #1a1208; }
.mc.mc-land .mc-land-mana-eld   { background: radial-gradient(circle at 30% 30%, #ff9966, #cc3300); color: #fff; }
.mc.mc-land .mc-land-mana-natur { background: radial-gradient(circle at 30% 30%, #aaee88, #2a7a18); color: #fff; }
/* Land im getappten Zustand: leicht abgedunkelt damit man "verbraucht" sieht */
.mc.mc-land.tapped { filter: brightness(0.6) saturate(0.7); }
.mc.mc-land.tapped .mc-land-mana { opacity: 0.55; filter: grayscale(40%); }

/* In der Hand: gleiche Land-Optik — keine width-Override (vererbt sonst 0 vom parent) */
/* .mc hat bereits width:140px aus base CSS */

/* ── R.4 Campaign-Map ─────────────────────────────── */
.campaign-node { transition: transform .2s; transform-origin: center; transform-box: fill-box; }
.campaign-node:hover circle { stroke-width: 3; filter: drop-shadow(0 0 12px #ffd877); }
.campaign-node.current circle.pulse-ring { animation: nodePulse 1.6s ease-in-out infinite; }
@keyframes nodePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); transform-origin: center; }
}
.campaign-node.done text { fill: #ffd877; }
.campaign-node.locked { opacity: 0.45; }
.campaign-node.locked:hover circle { stroke-width: 2; filter: none; }

/* ── R.2 UI/UX Polish ─────────────────────────────── */
/* Empty-State */
.empty-state {
  text-align: center; padding: 50px 20px;
  color: var(--dim); font-style: italic; font-size: 14px;
  background: rgba(0,0,0,0.2); border: 1px dashed var(--border); border-radius: 6px;
  margin: 20px 0;
}
.empty-state-icon { font-size: 42px; opacity: 0.4; margin-bottom: 12px; }

/* Pack-NEW-Badge */
.pc-new-badge {
  position: absolute; top: -10px; right: -10px;
  background: linear-gradient(135deg, #ff5500, #cc0000);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 4px 9px; border-radius: 12px;
  letter-spacing: 1.5px;
  box-shadow: 0 0 16px rgba(255,85,0,0.8), 0 2px 4px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.4);
  z-index: 20; pointer-events: none;
  animation: newBadgePulse 1.6s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.15) rotate(3deg); box-shadow: 0 0 24px rgba(255,85,0,1); }
}

/* Mana-Curve-Chart */
.mana-curve-wrap {
  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin: 10px 0;
}
.mana-curve-title {
  color: var(--gold); font-size: 10px; letter-spacing: 2px;
  text-align: center; margin-bottom: 8px;
}
.mana-curve { display: flex; align-items: flex-end; height: 70px; gap: 4px; padding-bottom: 14px; }
.mana-curve-bar {
  flex: 1; background: linear-gradient(180deg, var(--gold), #6a4a07);
  min-height: 2px; border-radius: 3px 3px 0 0;
  position: relative;
  transition: height .35s cubic-bezier(.2,.7,.3,1);
}
.mana-curve-bar::after {
  content: attr(data-label); position: absolute; bottom: -16px; left: 50%;
  transform: translateX(-50%); font-size: 10px; color: var(--dim);
}
.mana-curve-bar.empty { background: rgba(58,42,10,0.4); }
.mana-curve-bar-count {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text); font-weight: 700;
}

/* Disabled-Button-Styling */
.btn:disabled, .btn.disabled {
  opacity: 0.45 !important;
  filter: grayscale(80%);
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Nav-Icon Hover-Animation */
.nav-icon-img { transition: transform .25s cubic-bezier(.2,.7,.3,1.2), filter .2s; }
.ss-nav-item:hover .nav-icon-img { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 8px rgba(255,215,87,0.7)); }
.ss-nav-item { transition: background .2s, color .2s; }
.ss-nav-item:hover:not(.active) { background: rgba(201,162,39,0.08); }

/* XP-Bar Animation */
.xp-bar-fill, [id$="-bar-fill"], .progress-fill { transition: width .7s cubic-bezier(.2,.7,.3,1); }

/* Pack-Loading-Overlay */
.pack-loading::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  animation: packLoadingPulse .9s ease-in-out infinite;
}
@keyframes packLoadingPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Set-Filter-Buttons */
.db-set-filter { display: inline-flex; gap: 4px; margin-left: 8px; }
.db-set-btn {
  padding: 4px 10px; font-size: 11px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  color: var(--dim); cursor: pointer; border-radius: 4px;
  font-family: inherit; letter-spacing: 1px;
  transition: all .15s;
}
.db-set-btn:hover { color: var(--gold); border-color: var(--gold); }
.db-set-btn.active { background: var(--gold); color: #1a1208; font-weight: 700; }

/* ── R.1 Combat-Animationen ─────────────────────── */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 2px); }
  30% { transform: translate(7px, -2px); }
  45% { transform: translate(-5px, 3px); }
  60% { transform: translate(6px, -1px); }
  80% { transform: translate(-3px, 1px); }
}
.screen-shake { animation: screenShake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes screenShakeBig {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-12px, -4px); }
  25% { transform: translate(14px, 5px); }
  40% { transform: translate(-10px, -3px); }
  55% { transform: translate(11px, 4px); }
  70% { transform: translate(-7px, -2px); }
  85% { transform: translate(5px, 2px); }
}
.screen-shake-big { animation: screenShakeBig .65s cubic-bezier(.36,.07,.19,.97) both; }

/* Smoother Tap-Animation — fügt Transition zu existing .mc hinzu (margin-Sprung durch existing CSS ignoriert) */
.bf .mc { transition: transform .28s cubic-bezier(.4,.7,.4,1.1), margin .28s cubic-bezier(.4,.7,.4,1.1), box-shadow .15s; }

/* Block-Confirm-Flash */
@keyframes blkConfirm {
  0% { box-shadow: 0 0 0 0 rgba(255,215,87,0); transform: scale(1); }
  35% { box-shadow: 0 0 22px 6px rgba(255,215,87,.95); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(255,215,87,0); transform: scale(1); }
}
.blk-confirmed { animation: blkConfirm .45s ease-out; }

/* Mana-Drain */
@keyframes manaDrain {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  40% { transform: scale(1.35); filter: brightness(2) saturate(1.5); opacity: 1; }
  100% { transform: scale(0.3) translateY(-8px); filter: brightness(.4); opacity: 0; }
}
.mana-drain { animation: manaDrain .35s ease-out both; }

/* Combat-Phase-Banner (kurzer Pulse-Overlay) */
@keyframes combatBannerSlide {
  0% { opacity: 0; transform: translate(-50%, -150%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
#combat-phase-banner {
  position: fixed; top: 35%; left: 50%; z-index: 5000;
  pointer-events: none;
  font-family: 'Cinzel', serif; font-size: 56px; font-weight: 700;
  color: var(--gold); letter-spacing: 14px;
  text-shadow: 0 0 32px #c9a227, 0 0 64px rgba(201,162,39,.6), 0 4px 12px #000;
  white-space: nowrap;
  animation: combatBannerSlide 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}

/* Spell-Particle-Burst */
@keyframes particleFly {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.4); opacity: 0; }
}
.particle-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 700; }
.particle-burst .particle {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd877 0%, #c9a227 60%, transparent 100%);
  box-shadow: 0 0 8px #ffd877;
  animation: particleFly .65s cubic-bezier(.2,.7,.3,1) forwards;
}

/* Damage-Counter-Float für Blocker-Counterstrike (grün statt rot) */
.dmg-float.counter { color: #66ff88 !important; text-shadow: 0 0 8px #4a9a2a, 0 0 16px rgba(74,154,42,.5) !important; }

/* Phase-Pip smooth transition */
.ppip { transition: background .3s ease, box-shadow .3s ease, transform .2s; }

/* ── END-OF-MATCH SCREEN ─────────────────────────── */
#end-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: radial-gradient(ellipse at center, rgba(20,12,4,0.96), rgba(0,0,0,0.98));
  display: flex; align-items: center; justify-content: center;
  animation: endFadeIn 0.45s ease-out;
}
@keyframes endFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}
#end-card {
  background: linear-gradient(180deg, #1a1208 0%, #0a0805 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 60px rgba(201,162,39,0.4), inset 0 0 20px rgba(0,0,0,0.6);
  border-radius: 10px;
  padding: 28px 36px;
  min-width: 620px; max-width: 780px;
  font-family: inherit;
  animation: endCardSlide 0.55s cubic-bezier(.2,.7,.3,1.2);
}
@keyframes endCardSlide {
  from { transform: translateY(40px) scale(0.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.end-header {
  text-align: center; font-size: 48px; font-weight: 700;
  letter-spacing: 8px; font-family: 'Cinzel', serif;
  margin-bottom: 6px;
}
.end-reason {
  text-align: center; color: var(--text); font-size: 14px;
  font-style: italic; margin-bottom: 22px; opacity: 0.85;
}
.end-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-bottom: 20px;
}
.end-col {
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.end-col-title {
  color: var(--gold); font-weight: 700; letter-spacing: 2px;
  font-size: 12px; text-align: center; margin-bottom: 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.end-stats {
  width: 100%; color: var(--text); border-collapse: collapse; font-size: 12px;
}
.end-stats td { padding: 4px 6px; }
.end-stats td:first-child { color: var(--dim); }
.end-stats td:last-child { text-align: right; font-weight: 600; }
.end-reward-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; margin-bottom: 6px;
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text); font-size: 12px;
}
.end-reward-row .end-val {
  color: var(--gold); font-weight: 700; font-size: 14px;
}
.end-btns {
  display: flex; gap: 14px; justify-content: center; margin-top: 10px;
}
.end-btns .btn {
  flex: 1; max-width: 220px; padding: 12px 18px; font-size: 14px;
}
@media (max-width: 700px) {
  #end-card { min-width: 0; width: 92vw; padding: 18px 16px; }
  .end-header { font-size: 32px; letter-spacing: 4px; }
  .end-cols { grid-template-columns: 1fr; gap: 12px; }
}

/* ════ BATTLE PASS / SAISON ════ */
#bp-body{padding:18px 22px;}
.bp-head{text-align:center;margin-bottom:18px;}
.bp-season{font-family:'Cinzel','Georgia',serif;color:#ffd877;font-size:18px;letter-spacing:2px;margin-bottom:10px;}
.bp-progress-wrap{max-width:520px;margin:0 auto 12px;}
.bp-tier-big{color:#fff;font-size:15px;font-weight:700;margin-bottom:5px;}
.bp-bar{background:#1a1208;border:1px solid var(--border,#3a2a0a);border-radius:6px;height:14px;overflow:hidden;}
.bp-bar-fill{background:linear-gradient(90deg,#c9a227,#ffd877);height:100%;transition:width .7s;}
.bp-xp{color:#8a7a5a;font-size:11px;letter-spacing:1px;margin-top:4px;}
.bp-hint{color:#6a5a3a;font-size:11px;font-style:italic;margin-top:8px;}
.bp-prem-on{color:#8fe06a;font-weight:700;font-size:13px;margin:6px 0;}
.bp-grid-head{display:grid;grid-template-columns:60px 1fr 1fr;gap:8px;max-width:680px;margin:0 auto 6px;
  color:#c9a227;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--border,#3a2a0a);padding-bottom:6px;}
.bp-grid{max-width:680px;margin:0 auto;max-height:52vh;overflow-y:auto;}
.bp-row{display:grid;grid-template-columns:60px 1fr 1fr;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid rgba(255,216,119,.08);opacity:.5;}
.bp-row.reached{opacity:1;}
.bp-tier{text-align:center;font-weight:700;color:#ffd877;font-size:14px;}
.bp-cell{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,0,0,.35);border:1px solid var(--border,#3a2a0a);border-radius:6px;padding:7px 10px;min-height:38px;}
.bp-cell.prem{border-color:rgba(143,224,106,.35);background:rgba(40,60,30,.25);}
.bp-rw{font-size:12px;color:#e8d5a3;}
.bp-claim{font-size:11px;padding:4px 12px;}
.bp-claim.prem{background:linear-gradient(135deg,#5a8a3a,#4a9a2a);border-color:#8fe06a;}
.bp-claimed{color:#8fe06a;font-size:11px;font-weight:700;white-space:nowrap;}
.bp-locked{color:#5a4a2a;font-size:11px;white-space:nowrap;}

/* ════ DECK-STATISTIK (Builder) ════ */
.db-deckstats{display:flex;gap:8px;padding:8px 6px;border-top:1px solid rgba(255,216,119,.12);}
.db-stat-block{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--border,#3a2a0a);border-radius:6px;padding:7px 8px;}
.db-stat-title{font-size:8px;color:var(--dim,#8a7a5a);letter-spacing:1.5px;margin-bottom:5px;}
.db-typemix{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:#e8d5a3;}
.db-typemix span{white-space:nowrap;}

/* ════ KARTENDETAIL-GROSSANSICHT ════ */
#card-detail-ov{position:fixed;inset:0;z-index:900;background:rgba(5,4,10,.85);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;}
#card-detail-ov.on{display:flex;animation:cdFade .18s ease;}
@keyframes cdFade{from{opacity:0;}to{opacity:1;}}
.cd-card{position:relative;width:min(380px,92vw);max-height:92vh;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,#1a1530,#0d0c14);border:2px solid var(--fc,#c9a227);
  box-shadow:0 12px 50px rgba(0,0,0,.7),0 0 28px color-mix(in srgb,var(--fc,#c9a227) 35%,transparent);
  display:flex;flex-direction:column;animation:cdPop .22s cubic-bezier(.2,1.2,.4,1);}
@keyframes cdPop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.cd-close{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:1px solid #555;cursor:pointer;font-size:14px;line-height:1;}
.cd-art{position:relative;height:300px;background:#0a0810;overflow:hidden;}
.cd-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
.cd-pt{position:absolute;bottom:8px;right:10px;background:rgba(10,8,16,.85);border:1px solid var(--fc,#c9a227);
  border-radius:8px;padding:4px 12px;font-size:20px;font-weight:800;color:#fff;font-family:'Cinzel',serif;}
.cd-cost{position:absolute;top:8px;left:10px;background:rgba(10,8,16,.85);border:1px solid var(--fc,#c9a227);
  border-radius:8px;padding:3px 10px;font-size:18px;color:#ffd877;letter-spacing:1px;}
.cd-body{padding:14px 18px 18px;overflow-y:auto;}
.cd-name{font-family:'Cinzel','Georgia',serif;font-size:21px;color:#fff;letter-spacing:.5px;}
.cd-meta{font-size:11px;color:#b7ad97;margin:4px 0 10px;}
.cd-rar{font-weight:700;}
.cd-rar.r-common{color:#bbb;} .cd-rar.r-uncommon{color:#7fd24f;} .cd-rar.r-rare{color:#ffd877;} .cd-rar.r-legendary{color:#ff9a3c;}
.cd-text{font-size:13.5px;line-height:1.6;color:#ece6d8;font-family:'IM Fell English','Georgia',serif;background:rgba(0,0,0,.25);border-radius:8px;padding:10px 12px;}
.cd-extra{font-size:11.5px;color:#cdbaff;margin-top:8px;}
.cd-flavor{font-style:italic;color:#8a7a5a;font-size:12px;margin-top:12px;border-top:1px solid rgba(255,216,119,.15);padding-top:10px;}

/* ════ REDUZIERTE BEWEGUNG (Settings) ════ */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after{
  animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.05s !important;
}

/* ════ MANA-WARNUNG (zu wenig Mana) ════ */
.mana-warn{animation:manaWarn .6s ease;}
@keyframes manaWarn{0%,100%{filter:none;}25%,75%{filter:drop-shadow(0 0 8px #ff5530) brightness(1.3);}50%{filter:drop-shadow(0 0 12px #ff3018) brightness(1.5);}}

/* ===== Layout-Fix Hand/Spielfeld (2026-05-31) ===== */
/* Hand-Karten kleiner + Hand-Hoehe gedeckelt, damit die Hand das Schlachtfeld nicht ueberdeckt. */
.hand{min-height:0;max-height:32vh;align-items:flex-end;padding-bottom:2px;}
.hand .mc{width:104px;height:146px;}
.hand .mc .mc-name{font-size:11px;}
.parea{overflow:hidden;}
/* Schlachtfeld bekommt garantierten Platz, Hand darf es nicht verdraengen. */
#app{grid-template-rows:1fr 48px 1fr;}
.bf{min-height:150px;}
@media (max-height:760px){
  .hand .mc{width:88px;height:124px;}
  .hand{max-height:28vh;}
}
@media (max-height:620px){
  .hand .mc{width:74px;height:104px;}
  .hand{max-height:24vh;}
}
/* ============================================================
   SPIELFELD-OVERHAUL (2026-05-31) — klare, abgegrenzte Zonen
   Länder & Kreaturen je in EINER gut sichtbaren horizontalen Reihe.
   ============================================================ */
#app{grid-template-rows:1fr 44px 1fr;}
.parea{padding:4px 12px;gap:4px;}

/* Kopfzeile (Name / LP / Mana / Zähler) kompakt & klar */
.pinfo{min-height:44px;padding:4px 12px;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(22,16,9,.5));
  border:1px solid #3a2a0a;}
.life{font-size:22px;font-weight:800;color:#ff6b6b;text-shadow:0 0 8px rgba(255,80,80,.45);}

/* Schild-Symbole direkt neben den LP */
.shield-badge{display:inline-flex;align-items:center;gap:3px;margin-left:8px;
  padding:2px 8px;border-radius:12px;font-size:13px;font-weight:700;
  color:#bcd3ff;background:rgba(60,110,180,.22);border:1px solid rgba(120,170,230,.5);
  text-shadow:0 0 6px rgba(120,170,230,.5);}

/* Battlefield-Container deutlich vom Hintergrund abgesetzt */
.bf{background:linear-gradient(180deg,rgba(22,17,11,.6),rgba(8,6,4,.6));
  border:1px solid rgba(201,162,39,.25);border-radius:8px;
  padding:14px 8px 6px;gap:6px;box-shadow:inset 0 0 32px rgba(0,0,0,.45);}
.zone-lbl{position:absolute;top:3px;left:10px;font-size:9px;letter-spacing:3px;
  color:rgba(201,162,39,.5);font-weight:700;pointer-events:none;z-index:2;}

/* Reihen: NEBENEINANDER, eine Linie, horizontal scrollbar bei Überlauf */
.bf-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;
  gap:5px;min-height:0;padding:2px 2px 4px;scrollbar-width:thin;scrollbar-color:rgba(201,162,39,.4) transparent;}
.bf-row::-webkit-scrollbar{height:6px;}
.bf-row::-webkit-scrollbar-thumb{background:rgba(201,162,39,.4);border-radius:3px;}

/* Länder: kompakter oberer Streifen (leicht blau getönt, abgesetzt) */
.bf-lands{flex:0 0 auto;background:rgba(70,110,150,.07);border-radius:6px;
  border:1px solid rgba(120,160,200,.12);padding:3px 4px;min-height:96px;}
/* Kreaturen: prominente Hauptreihe */
.bf-creatures{flex:1 1 auto;align-content:center;}

/* Kartengrößen auf dem Schlachtfeld: Länder klein, Kreaturen mittelgroß */
.bf-lands .mc{width:64px;height:90px;}
.bf-creatures .mc{width:102px;height:143px;}

/* Innere Schrift auf Schlachtfeld-Karten an die kleinere Größe anpassen */
.bf .mc-name{font-size:9px;line-height:1.05;}
.bf .mc-cost{font-size:9px;}
.bf .mc-pt{font-size:12px;}
.bf .mc-type{font-size:7px;}
.bf .mc-kw{font-size:7px;}
.bf-lands .mc-name{font-size:8px;}
.bf-lands .mc-type,.bf-lands .mc-kw{display:none;}

/* Schildwall-Reihe (falls aktiv): kleine Schild-Plättchen statt großer Karten */
.shieldrow .mc{width:44px;height:62px;}
/* ============================================================
   FINAL-LAND-RESET (2026-05-31) — MUSS ganz am Ende stehen.
   Neutralisiert ALLE alten .bf-lands .mc scale()/margin-Regeln
   (auch in Media-Queries) und setzt klare width/height.
   ============================================================ */
.bf-row.bf-creatures{flex-wrap:nowrap;justify-content:flex-start;}
.bf-lands .mc{transform:none;margin:0;width:64px;height:90px;}
.bf-lands .mc:hover{transform:translateY(-4px);}
.bf-lands .mc.tapped{transform:rotate(90deg);margin:0;}
.bf-creatures .mc{transform:none;margin:0;width:102px;height:143px;}
.bf-creatures .mc:hover{transform:translateY(-4px);}
.bf-creatures .mc.tapped{transform:rotate(90deg);}
@media (max-height:760px){
  .bf-lands .mc{width:54px;height:76px;}
  .bf-creatures .mc{width:88px;height:124px;}
}
@media (max-height:620px){
  .bf-lands .mc{width:46px;height:64px;}
  .bf-creatures .mc{width:74px;height:104px;}
}
/* ============================================================
   MTG-TISCH-LOOK (2026-05-31) — EIN durchgehendes Spielfeld.
   MUSS am Dateiende stehen (spätere Regel gewinnt).
   ============================================================ */
/* 1) Trennende Kästen auflösen → ein Tisch */
.parea{background:transparent !important;backdrop-filter:none !important;padding:2px 16px;}
.bf{background:transparent !important;border:none !important;box-shadow:none !important;
    border-radius:0 !important;padding:2px 6px;justify-content:center;}
.pinfo{background:linear-gradient(180deg,rgba(0,0,0,.38),transparent) !important;
       border:none !important;border-radius:0;min-height:40px;}
.zone-lbl{display:none;}

/* 2) Dezente Mittellinie statt dicker Leiste */
#mid{background:linear-gradient(90deg,transparent,rgba(201,162,39,.10),transparent) !important;
     border-top:1px solid rgba(201,162,39,.30);border-bottom:1px solid rgba(201,162,39,.30);
     box-shadow:0 0 24px rgba(201,162,39,.12);backdrop-filter:none !important;}

/* 3) Reihen: mittig + voll sichtbar (kein vertikales Clipping) */
.hand{min-height:0 !important;max-height:23vh;align-items:flex-end;}
.bf-row{overflow-y:visible;min-height:0;}
.bf-row.bf-lands{justify-content:center;flex:0 0 auto;}
.bf-row.bf-creatures{justify-content:center;align-items:center;flex:1 1 auto;
     min-height:150px;overflow-x:auto;overflow-y:hidden;}

/* 4) Karten: voll sichtbar, bei Überfüllung schrumpfen statt abschneiden */
.bf .mc{flex:0 0 auto;box-shadow:0 3px 10px rgba(0,0,0,.6);}
.bf-creatures .mc{flex:0 1 auto;}

/* 5) Hand schwebt */
.hand{filter:drop-shadow(0 -4px 10px rgba(0,0,0,.5));}

/* 6) Responsiv */
@media (max-height:760px){ .bf-creatures .mc{width:88px;height:124px;} .bf-lands .mc{width:54px;height:76px;} .hand{max-height:20vh;} }
@media (max-height:620px){ .bf-creatures .mc{width:74px;height:104px;} .bf-lands .mc{width:46px;height:64px;} .hand{max-height:18vh;} }