/* Erzeugt von scripts/build.mjs aus frontend/styles/game/*.css – dort bearbeiten, dann npm run build. */
/* T-RPG – Spieloberfläche. Aufbau: Kopfleiste (HUD), Bühne mit einer Szene, Dock unten; Fenster und Karte liegen darüber. */

.game-app,.title-screen,.g-backdrop,.g-drawer,.g-map{
  --display:'Cinzel','Trajan Pro','Cormorant Garamond',Georgia,serif;
  --ui:'Alegreya Sans','Fira Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gold:#e3b866;--gold-hi:#f4d892;--gold-lo:#9a7432;--ink:#050c14;
  --stone-1:#101c2b;--stone-2:#16273b;--stone-3:#21364f;--rim:#3f546f;
  --text:#e8edf3;--muted:#9cadc1;--line:#22344a;--line-hi:#304864;--panel:#0f1c2c;--panel-hi:#14263b;--good:#82d982;--bad:#e2604a;--mana:#b08cff;--frost:#8fd3ff;
  --q0:#d9d4c4;--q1:#7fd45a;--q2:#4aa8ff;--q3:#b56cff;--q4:#ff9a2a;
  --hud:60px;--dock:90px;
}
html.is-game,html.is-title{height:100%;overflow:hidden;overscroll-behavior:none;background:#05090e}
html.is-game body,html.is-title body{height:100%;overflow:hidden;font-family:var(--ui,'Alegreya Sans',system-ui,sans-serif);color:#e8edf3;background:#05090e;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html.is-game #root,html.is-title #root{height:100%}
.game-app input,.game-app textarea,.title-screen input,.g-backdrop input{-webkit-user-select:text;user-select:text}
.game-app,.title-screen,.g-backdrop,.g-drawer,.g-map{font-family:var(--ui);color:var(--text);cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2l1 21 5.5-5 4 8.5 3.5-1.7-4-8.3 7.5-.5z' fill='%23f2cb70' stroke='%23140d04' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto}
.game-app button,.game-app a,.g-backdrop button,.g-map button,.title-screen button,.title-screen a,.g-drawer button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2l1 21 5.5-5 4 8.5 3.5-1.7-4-8.3 7.5-.5z' fill='%23fff0b8' stroke='%23140d04' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
.game-app button:disabled,.g-backdrop button:disabled,.g-map button:disabled{cursor:not-allowed}
.game-app h1,.game-app h2,.game-app h3,.game-app p,.g-backdrop h2,.g-backdrop h3,.g-backdrop p,.g-map h2,.g-map h3,.g-map p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.game-app,.title-screen,.g-backdrop,.g-map) :focus-visible{outline:3px solid #ffe08a;outline-offset:2px;border-radius:6px}
:where(.game-app,.g-map,.g-backdrop) *{scrollbar-width:thin;scrollbar-color:#6b5a2e #080e15}

/* ------------------------------------------------------------ Rahmen */
.game-app{position:fixed;inset:0;height:100vh;height:calc(var(--vh,1vh)*100);display:grid;grid-template-rows:var(--hud) minmax(0,1fr) var(--dock);overflow:hidden;isolation:isolate;
  background:radial-gradient(1100px 560px at 50% -10%,#1c3a5c55,transparent 62%),radial-gradient(900px 480px at 100% 100%,#14284033,transparent 60%),linear-gradient(#0b1522,#060c14)}
.game-app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ Kopfleiste */
.g-hud{position:relative;z-index:30;display:flex;align-items:center;gap:12px;padding:0 clamp(10px,2vw,22px);background:linear-gradient(#0d1928f5,#0a1420f0);border-bottom:1px solid var(--line);box-shadow:0 6px 18px #0007}
.g-hud::after{content:none}
.g-avatar{flex:none;position:relative;width:46px;height:46px;padding:0;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c);box-shadow:inset 0 0 0 2px #000b,0 0 14px #e8b95544;overflow:hidden;color:inherit}
.g-avatar:hover{box-shadow:inset 0 0 0 2px #000b,0 0 20px #ffd97a99}
.g-bust{display:block;position:relative;overflow:hidden;width:100%;height:100%;border-radius:inherit}
.g-bust svg{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.75);transform-origin:50% 4%}
.g-bust .g-figure-img{object-fit:cover;object-position:50% 0}
.g-hud-title{display:grid;min-width:0;line-height:1.15}
.g-hud-title strong{font:700 15px var(--display);letter-spacing:.06em;color:#fff0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hud-title small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-wallet{margin-left:auto;display:flex;gap:8px}
.g-res{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:#0d1825;border:1px solid var(--line-hi);font-weight:700;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.g-res svg{color:#f1c65f;flex:none}
.g-res.res-cards svg{color:#8fd3ff}
.g-res.essence svg{color:#d29bff}
.g-hud-menu{flex:none}
.g-busybar{position:absolute;top:0;left:0;right:0;height:3px;z-index:40;pointer-events:none;background:linear-gradient(90deg,transparent,#ffe08a,transparent);background-size:40% 100%;background-repeat:no-repeat;opacity:0;animation:busy 1s linear infinite}
.is-busy .g-busybar{opacity:1}
@keyframes busy{from{background-position:-40% 0}to{background-position:140% 0}}

/* ------------------------------------------------------------ Dock */
.g-dock{position:relative;z-index:30;display:flex;justify-content:center;align-items:stretch;gap:clamp(6px,3vw,44px);padding:0 12px 8px;background:#0b1520;border-top:1px solid var(--line);box-shadow:0 -8px 22px #0008}
.g-dock::before{content:none}
.g-dock-item{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;width:clamp(70px,19vw,118px);padding:0;border:0;background:none;color:var(--muted);font-family:inherit;transition:color .15s}
.g-dock-icon{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;color:inherit;background:none;border:0;transition:color .15s,background .15s}
.g-dock-item:hover .g-dock-icon{color:var(--text);background:#ffffff08}
.g-dock-item:active .g-dock-icon{transform:translateY(1px)}
.g-dock-item.on{color:var(--gold)}
.g-dock-item.on .g-dock-icon{color:var(--gold);background:none}
.g-dock-label{font:700 14px var(--ui);letter-spacing:.01em}
.g-dock-item.on::before{content:"";position:absolute;top:-1px;left:50%;width:44px;height:4px;translate:-50% 0;border-radius:0 0 4px 4px;background:var(--gold);box-shadow:0 0 12px #e3b86688}
.g-dot{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a7a,#d2331f);border:2px solid #1a0a06;box-shadow:0 0 10px #ff6a4acc;animation:dot-pulse 1.6s ease-in-out infinite}
.g-dock-icon .g-dot{top:4px;right:6px;width:12px;height:12px}
@keyframes dot-pulse{50%{transform:scale(1.25);box-shadow:0 0 16px #ff6a4a}}

/* ------------------------------------------------------------ Bühne */
.g-stage{position:relative;isolation:isolate;min-height:0;overflow:hidden;animation:scene-in .38s cubic-bezier(.2,.8,.3,1)}
@keyframes scene-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.scene-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px clamp(12px,2vw,26px) 8px}
.scene-head h1{font:800 clamp(24px,3vw,34px) var(--display);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 0 18px #e8b95544}
.scene-head small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.scene-body{min-height:0;overflow:auto;padding:6px clamp(12px,2vw,26px) 24px}
.g-lead{color:#d9d3bd;line-height:1.55;font-size:14px}
.g-fine{color:var(--muted);font-size:12px;line-height:1.5}
.g-fine.centered,.g-lead.centered{text-align:center}
.g-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.block{display:block}

/* ------------------------------------------------------------ Knöpfe */
.g-btn{--face1:#16263a;--face2:#111d2c;--edge:var(--line-hi);--txt:var(--text);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border:1px solid var(--edge);border-radius:10px;color:var(--txt);font:700 16px/1 var(--ui);letter-spacing:.01em;text-decoration:none;white-space:nowrap;background:linear-gradient(var(--face1),var(--face2));box-shadow:inset 0 1px 0 #ffffff0d,0 6px 16px #0006;transition:transform .08s,filter .15s,box-shadow .15s,border-color .15s}
.g-btn:hover:not(:disabled){filter:brightness(1.18)}
.g-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 0 #ffffff0d,0 2px 6px #0006}
.g-btn:disabled{opacity:.55;filter:grayscale(.5);box-shadow:none}
/* Hauptaktion: echte Goldfläche mit dunkler Schrift, damit sie sich klar vom Spielfeld abhebt. */
.g-btn-gold{--face1:#f6d27a;--face2:#c8902f;--edge:#ffe7a6;--txt:#2a1804;text-shadow:0 1px 0 #ffeebf88;box-shadow:inset 0 1px 0 #fff6d6,inset 0 -3px 0 #8a5a1a66,0 0 22px #e3b86655,0 6px 16px #0008}
.g-btn-gold svg{color:#3a2306}
.g-btn-gold:hover:not(:disabled){filter:brightness(1.08) saturate(1.1)}
.g-btn-gold:active:not(:disabled){box-shadow:inset 0 1px 0 #fff6d6,0 2px 6px #0008}
.g-btn-gold:disabled{opacity:.6;filter:grayscale(.35)}
.g-btn-danger{--face1:#2a171a;--face2:#1f1114;--edge:#9a4436;--txt:#f6b3a5}
.g-btn-sm{min-height:34px;padding:0 13px;font-size:14px;border-radius:9px;gap:7px}
.g-btn-lg{min-height:52px;padding:0 26px;font-size:17px}
/* Große Knöpfe ohne Variante bleiben dunkel; die goldene Hauptaktion behält ihre Farbe. */
.g-btn-xl:not(.g-btn-gold){--face1:#2a2516;--face2:#1a1710}
.g-btn-xl{min-height:64px;padding:0 36px;font-size:21px;border-radius:14px;letter-spacing:.02em}
.g-btn-gold.g-btn-xl:not(:disabled){animation:call-to-action 2.6s ease-in-out infinite}
@keyframes call-to-action{50%{border-color:#fff3c8;box-shadow:inset 0 1px 0 #fff6d6,inset 0 -3px 0 #8a5a1a66,0 0 38px #f4c86699,0 6px 16px #0008}}
.g-round{position:relative;flex:none;display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line-hi);color:var(--text);font:700 22px/1 var(--display);background:linear-gradient(#16263a,#0f1c2c);box-shadow:0 4px 12px #0006;transition:transform .08s,filter .15s,border-color .15s}
.g-round:hover{filter:brightness(1.2);border-color:#b48d4a}
.g-round:active{transform:translateY(1px)}
.g-round.small{width:28px;height:28px;font-size:14px}
.g-segmented{display:inline-flex;padding:3px;border-radius:12px;background:#0a1420;border:1px solid var(--line-hi)}
.g-segmented button{min-height:36px;padding:0 16px;border:0;border-radius:9px;background:none;color:var(--muted);font:700 14px var(--ui);letter-spacing:.01em;transition:background .15s,color .15s}
.g-segmented button:hover:not(:disabled){color:var(--text)}
.g-segmented button.on{color:#1a1206;background:linear-gradient(#ecc678,#d1a14b)}
.g-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-hi);background:#0a1420;color:#1a1206}
.g-tick.on{border-color:#b48d4a;background:linear-gradient(#ecc678,#d1a14b);box-shadow:0 0 10px #e3b86677}

/* ------------------------------------------------------------ Seltenheit */
.g-rarity{display:inline-block;padding:3px 9px;border-radius:5px;font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--q0));border:1px solid color-mix(in srgb,var(--c,var(--q0)) 55%,#000);background:color-mix(in srgb,var(--c,var(--q0)) 16%,#070d14)}
.g-rarity.q0{--c:var(--q0)}.g-rarity.q1{--c:var(--q1)}.g-rarity.q2{--c:var(--q2)}.g-rarity.q3{--c:var(--q3)}.g-rarity.q4{--c:var(--q4)}
.q0{--c:var(--q0)}.q1{--c:var(--q1)}.q2{--c:var(--q2)}.q3{--c:var(--q3)}.q4{--c:var(--q4)}

/* ------------------------------------------------------------ Balken */
.g-meter{position:relative;height:9px;border-radius:5px;background:#03070c00;background:#05090e;border:1px solid #000;box-shadow:inset 0 1px 3px #000,0 0 0 1px #ffffff12;overflow:hidden}
.g-meter>i{position:absolute;inset:0 auto 0 0;display:block;border-radius:inherit;background:linear-gradient(#a8e88a,#4e9a45);box-shadow:inset 0 1px 0 #ffffff66;transition:width .25s ease-out}
.g-meter-xp>i{background:linear-gradient(#ffe49c,#c98a27)}
.g-meter-ult{height:6px}.g-meter-ult>i{background:linear-gradient(#d2b4ff,#7a4fc4)}
.g-meter-spent>i{background:#4a4458}
.g-meter-hp.low>i{background:linear-gradient(#ff9a7a,#c43a22)}

/* ------------------------------------------------------------ Fenster */
.g-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#02060bcc;backdrop-filter:blur(2px);animation:fade-in .2s ease-out}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.g-modal{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(92vh,880px);width:min(100%,560px);border-radius:18px;border:1px solid var(--line-hi);background:linear-gradient(#14263b,#0e1a29 60%);box-shadow:0 24px 70px #000c;animation:pop-in .28s cubic-bezier(.2,1.3,.4,1);overflow:hidden}
.g-modal-sm{width:min(100%,430px)}.g-modal-lg{width:min(100%,980px)}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
.g-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 10px}
.g-modal-head small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.g-modal-head h2{font:700 25px var(--display);letter-spacing:.04em;color:#f3dfae}
.g-modal-body{overflow:auto;padding:6px 22px 18px;display:grid;gap:14px;align-content:start}
.g-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:12px 22px 20px;border-top:1px solid var(--line)}
.g-modal-foot .g-fine{margin-right:auto}
.g-close{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line-hi);background:#16263a;color:var(--text);font:700 16px var(--ui);transition:border-color .15s,filter .15s}
.g-close:hover{border-color:#b48d4a;filter:brightness(1.15)}
/* Menü: Einträge wie im Profilblatt der Gilde – Symbolkachel, Titel und Erklärung. */
.menu-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:8px 4px;border:0;border-radius:12px;background:none;color:var(--text);font-family:var(--ui);text-align:left;text-decoration:none;transition:background .15s}
.menu-row:hover{background:#ffffff08}
.menu-row>i{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--line-hi);background:#121d27;color:#e8edf3;font-style:normal}
.menu-row b{display:block;font:700 18px var(--ui);color:var(--text)}
.menu-row small{display:block;font-size:14px;color:var(--muted);line-height:1.3}
.menu-row>svg{color:var(--muted)}
.menu-row.tone-gold>i{color:var(--gold)}.menu-row.tone-green>i{color:#7fd0a6}.menu-row.tone-red>i{color:#f08a7a;border-color:#5a2a2e;background:#1f1416}
.menu-sep{height:1px;margin:4px 0;background:var(--line)}

/* Menü und Profil */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.profile-grid div{display:grid;gap:2px;padding:10px 8px;text-align:center;border-radius:12px;background:#0d1826;border:1px solid var(--line)}
.profile-grid b{font:800 22px var(--display);color:var(--gold-hi)}
.profile-grid small{font-size:12px;color:var(--muted);line-height:1.2}
.menu-list{display:grid;gap:2px;margin-top:4px}
.menu-list>*{width:100%;min-width:0}
.join-row{display:flex;gap:10px;flex-wrap:wrap}
.join-row input,.title-form input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line-hi);background:#09121d;color:var(--text);font:700 17px var(--ui);letter-spacing:.08em}
.join-row input:focus,.title-form input:focus{outline:none;border-color:var(--gold)}

/* Gruppenwahl */
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.roster-card{position:relative;display:grid;justify-items:center;gap:4px;padding:12px 8px 10px;border-radius:14px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:linear-gradient(#192a40,#0d1622);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,#000);transition:transform .12s,filter .15s}
.roster-card:hover:not(:disabled){transform:translateY(-3px)}
.roster-card:disabled{filter:saturate(.5) brightness(.7)}
.roster-card.on{background:linear-gradient(#2e4560,#112235);box-shadow:inset 0 0 0 2px var(--gold),0 0 22px #e8b95555}
.roster-card .g-bust{width:88px;height:88px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#375375,#0f1a28);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,#000)}
.roster-card .g-tick{position:absolute;top:8px;right:8px}
.roster-card strong{font:700 15px var(--display);color:#fff0c4}
.roster-card small{color:var(--muted);font-size:11px}
.mini-stats{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#d9d3bd}
.mini-stats svg{color:var(--gold)}

/* Handbuch */
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.guide section{padding:14px 16px;border-radius:12px;background:#0d1826;border:1px solid var(--line)}
.guide h3{font:700 14px var(--display);letter-spacing:.08em;color:var(--gold-hi);margin-bottom:6px}
.guide p{font-size:15px;line-height:1.5;color:#d3dbe5}

/* Beute-Fenster */
.results .g-modal-body{padding-top:0}
.results-crest{display:grid;place-items:center;width:84px;height:84px;margin:0 auto;border-radius:50%;border:1px solid var(--line);color:#2b1805;background:radial-gradient(circle at 50% 30%,#ffeeb4,#d8942c);box-shadow:0 0 40px #e8b955aa,inset 0 -6px 0 #9a6516;animation:crest-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.results.defeat .results-crest{color:#e8d8d0;background:radial-gradient(circle at 50% 30%,#8a6a62,#3a2420);box-shadow:0 0 30px #a8382a88}
@keyframes crest-pop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.results.victory .g-modal-head h2{font-size:34px;text-align:center}
.results .g-modal-head{justify-content:center;text-align:center}
.reward-list{display:grid;gap:8px}
.reward-wrap{animation:reward-in .45s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--i)*.14s + .25s)}
@keyframes reward-in{from{opacity:0;transform:translateX(-26px) scale(.96)}to{opacity:1;transform:none}}
.loot-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#080e15;border:1px solid #000;box-shadow:inset 0 0 0 1px #ffffff10}
.loot-row>div{flex:1;min-width:0;display:grid;gap:2px}
.loot-row b{font:700 15px var(--display);color:#fff0c4}
.loot-row small{color:var(--muted);font-size:12px}
.loot-row .g-bust{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#375375,#0f1a28)}
.loot-row .item-art{flex:none}
.reward-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#24374d,#0e1723)}
.reward-icon.gold{color:#f1c65f}.reward-icon.essence{color:#d29bff}.reward-icon.flag{color:#ffd27a}
.reward-amount{display:inline-flex;align-items:center;gap:5px;font:800 20px var(--display);color:var(--gold-hi)}
.reward-amount.levelup{color:#9cff9c}
.loot-row.special{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c,var(--gold)) 70%,#000),0 0 18px color-mix(in srgb,var(--c,var(--gold)) 35%,transparent)}
.loot-row.special{background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--gold)) 18%,#080e15),#080e15)}
.reward-item{display:flex;align-items:center;gap:8px;flex:none}

/* Heldenkarte (Pack / Schrein) */
.reveal-card{display:grid;justify-items:center;gap:6px;padding:18px 16px 16px;border-radius:16px;border:1px solid var(--line);text-align:center;background:radial-gradient(ellipse at 50% 28%,color-mix(in srgb,var(--c) 40%,#112235),#080f18 75%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#000),0 0 40px color-mix(in srgb,var(--c) 50%,transparent);animation:card-flip .8s cubic-bezier(.2,1,.3,1) both}
@keyframes card-flip{from{transform:perspective(900px) rotateY(95deg) scale(.7);opacity:0}60%{transform:perspective(900px) rotateY(-8deg) scale(1.04);opacity:1}to{transform:none}}
.reveal-art{width:200px;height:220px}
.reveal-card h3{font:800 26px var(--display);color:#fff0c4;letter-spacing:.05em}
.reveal-card small{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.reveal-card p{font-size:13px;color:#d9d3bd;line-height:1.5;max-width:30ch}
.reveal .g-modal-head{justify-content:center;text-align:center}

/* Meldungen */
.g-toasts{position:absolute;left:50%;bottom:calc(var(--dock) + 14px);z-index:70;display:grid;gap:8px;justify-items:center;transform:translateX(-50%);width:min(92vw,520px);pointer-events:none}
.g-toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(#21364f,#0f1d2e);box-shadow:inset 0 0 0 1px #ffffff22,0 8px 22px #000b;font-size:14px;font-weight:600;animation:toast-in .35s cubic-bezier(.2,1.4,.4,1);pointer-events:auto}
.g-toast.good{border-color:#183b66;background:linear-gradient(#1c4577,#102844)}
.g-toast.error{border-color:#4a0f0a;background:linear-gradient(#7a2c22,#3d1410);color:#ffe2da}
.g-toast button{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:0;background:#0006;color:inherit}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

/* Ladebildschirm */
.g-loading{display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;background:radial-gradient(circle at 50% 35%,#1d3859,#070d14)}
.g-loading>img{filter:drop-shadow(0 8px 22px #000);animation:float 3s ease-in-out infinite}
.g-loading h1{font:800 42px var(--display);letter-spacing:.2em;color:var(--gold-hi)}
.g-loading p{color:var(--muted)}
.g-spinner{width:34px;height:34px;border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-8px)}}

@media(prefers-reduced-motion:reduce){.game-app *,.title-screen *,.g-backdrop *,.g-map *,.g-drawer *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============================================================ Szene: Kampf */
.battle-scene{position:relative;height:100%;container-type:size;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#122336,#04090f 75%)}
.battle-wrap{position:relative;width:min(100cqw,calc(100cqh*1.7767));aspect-ratio:1672/941;max-height:100cqh}
.g-arena{position:absolute;inset:0;overflow:hidden;container-type:size;background:#091728;box-shadow:0 0 0 3px #000,0 0 0 5px #334862,0 30px 70px #000c}
/* Vignette über dem Spielfeld; Kopf- und Bedienleiste (z-index 320) liegen darüber und bleiben farbig. */
.g-arena::after{content:"";position:absolute;inset:0;z-index:300;pointer-events:none;box-shadow:inset 0 0 8cqw #000a;background:linear-gradient(#0000 60%,#000a)}
.tactical-board{position:absolute;inset:0;isolation:isolate}
.zone-labels{display:none}
.battle-grid{position:absolute;left:7%;top:34%;width:86%;height:48%;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(3,1fr);z-index:1}
.grid-cell{position:relative;min-width:0;padding:0;border:1px solid #fff3b845;border-radius:0;background:#ffedbe08;font:inherit;color:#fff}
.grid-cell.ally-zone{background:#66db7138;border-color:#bbefac80}
.grid-cell.enemy-zone{background:#d74b4530;border-color:#ffd5be55}
.grid-cell.neutral-zone{background:#ffe0a010}
.grid-cell.occupied{background:#d5df564a}
.grid-cell>span{position:absolute;left:3px;bottom:2px;font-size:clamp(5px,.6cqw,9px);color:#fff;opacity:.7;text-shadow:0 1px 3px #000}
button.grid-cell:hover:not(:disabled){background:#c4ff7b77}
.placement-selected .unit-shadow{background:#ffe59c;box-shadow:0 0 0 .2cqw #fff3b8,0 0 1.6cqw #ffed75}

/* Eigene Ebenen für Laufbewegung, Angriff, Treffer und Blickrichtung. */
.board-unit{position:absolute;width:6.6cqw;height:8.8cqw;transform:translate(-50%,-100%) scale(var(--depth,1));transform-origin:50% 100%;transition:left .3s linear,top .3s linear;pointer-events:auto;text-align:center}
.board-unit[draggable="true"]{cursor:grab}
.unit-visual,.unit-idle,.unit-action,.unit-reaction,.unit-facing{position:relative;width:100%;height:100%;transform-origin:50% 90%}
.unit-facing{transform:scaleX(var(--facing,1))}
.board-unit .portrait{position:relative;width:100%;height:100%;display:block}
.board-unit .comic-sprite{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 .35cqw .25cqw #0009)}
.board-unit .custom-portrait,.board-unit .g-figure-img{width:100%;height:100%;object-fit:contain}
.board-unit:not(.moving):not(.stunned):not(.dead) .unit-idle{animation:combat-breathe 3.4s var(--breath-delay,0s) ease-in-out infinite alternate}
.board-unit.moving .unit-idle{animation:combat-step var(--step-duration,320ms) ease-in-out infinite}
.board-unit.moving .unit-shadow{animation:shadow-step var(--step-duration,320ms) ease-in-out infinite}
.board-unit.stunned:not(.dead) .unit-idle{animation:stun-sway .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 .35cqw #e6cb85)}
.board-unit.dead .unit-visual{animation:combat-fall .55s var(--death-delay,0ms) ease-in both}
.board-unit.dead .unit-facing{filter:grayscale(.9) brightness(.7)}
.board-unit.dead .board-unit-label{opacity:.45}
.unit-shadow{position:absolute;left:10%;right:10%;bottom:-.3cqw;height:1.3cqw;border-radius:50%;background:#0008;filter:blur(1.5px);transition:opacity .3s}
.board-unit.dead .unit-shadow{opacity:.25}
.unit-ward{position:absolute;inset:6% -9% 0;border:1px solid #b1dce899;border-radius:50% 50% 42% 42%;background:radial-gradient(ellipse at 35% 25%,#d9f5ff18,transparent 60%);box-shadow:inset 0 0 .8cqw #a3d9ed22,0 0 .5cqw #a3d9ed22;pointer-events:none}
.board-unit.poisoned .unit-shadow{box-shadow:0 0 .9cqw #a1c95b;background:#629923aa}
.board-unit.stealthed .unit-facing{opacity:.42;filter:saturate(.4) drop-shadow(0 0 .6cqw #8a6ad6)}
.board-unit.cursed .unit-shadow{box-shadow:0 0 .9cqw #c2587a;background:#5a2238aa}
.board-unit.rooted .unit-shadow{box-shadow:0 0 .9cqw #7fd07a;background:#204e87aa}
.board-unit-label{position:absolute;top:100%;left:50%;translate:-50% .2cqw;width:9.4cqw;display:grid;gap:.25cqw;justify-items:center;pointer-events:none}
.board-unit-label strong{max-width:100%;font:700 clamp(7px,.95cqw,13px) var(--ui);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000,0 0 4px #000,0 0 2px #000}
.board-unit-label small{display:none}
.board-unit .hp{position:relative;width:100%;height:clamp(3px,.6cqw,8px);margin:0;border-radius:4px;background:#070c13;border:1px solid #000;box-shadow:0 0 0 1px #ffffff1a;overflow:hidden}
.board-unit .hp i{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(#a8e88a,#4e9a45);transition:width .2s ease-out}
.board-unit.enemy .hp-fill{background:linear-gradient(#ff9a7a,#c43a22)}
.board-unit .hp .hp-trail{background:#e8d6a3;transition:width .5s .2s ease-out}
.board-unit .charge{width:70%;height:clamp(2px,.3cqw,4px);background:#0008;border-radius:2px;overflow:hidden}
.board-unit .charge i{display:block;height:100%;background:#d9b866;transition:width .3s linear}
.board-unit .charge.ready i{background:#fff3c4}
.ultimate-meter{position:relative;width:100%;height:clamp(6px,.9cqw,12px);background:#1c1230;border:1px solid #000;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #b08cff44}
.ultimate-meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#cdaeff,#7a4fc4)}
.ultimate-meter span{position:relative;z-index:1;display:block;font:700 clamp(5px,.65cqw,9px)/1.4 var(--ui);color:#fff;text-shadow:0 1px 1px #000}
.status{display:inline-block;margin:0;padding:1px 4px;border-radius:3px;border:1px solid #ffffff33;background:#000a;color:#ffe3b0;font:700 clamp(5px,.62cqw,9px)/1.3 var(--ui);letter-spacing:.04em;white-space:nowrap}
.status.poison{color:#c6e68b;border-color:#a1ff5955}.status.shield{color:#cdeaff;border-color:#8fd3ff66}.status.buff{color:#ffe3a1;border-color:#ffd27a66}
.status.rage{color:#ffd0c0;background:#a8382acc;border-color:#ff8a6a}.status.frost{color:#e8f8ff;background:#3f7fa8cc}.status.taunt{color:#fff0c0;background:#8a6a2acc}.status.ultimate-status{color:#fff;background:#6b3fb0cc;border-color:#d2b4ff}
@container (max-width:720px){
  .board-unit{width:11.5cqw;height:15.5cqw}
  .board-unit-label{width:16cqw}
  .board-unit-label strong,.ultimate-meter span{display:none}
  .grid-cell>span{display:none}
}

/* Gemalte Figuren, warme Funken und zurückhaltendes Leuchten statt flächiger Blitze. */
.combat-effects{position:absolute;inset:0;width:100%;height:100%;z-index:180;pointer-events:none;overflow:hidden}
.fx-event{color:var(--fx);animation:fx-fade var(--lifetime,1200ms) linear both}
.fx-projectile{offset-rotate:auto;offset-anchor:0px 0px;opacity:0;animation:projectile-flight var(--flight,300ms) var(--launch,80ms) linear both;filter:drop-shadow(0 0 2px var(--fx))}
.fx-line,.fx-ring{fill:none;stroke:currentColor;stroke-width:.25;stroke-linecap:round;stroke-linejoin:round}
.fx-ring{stroke-width:.17}
.impact-burst{transform-box:fill-box;transform-origin:center;animation:impact-pop .42s var(--impact-delay,0ms) cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(0 0 1px var(--fx))}
.fx-explosion .impact-burst{animation-name:blast-ring;animation-duration:1s}
/* Zauber, Heilung und Stärkungen stehen länger im Bild als ein Treffer. */
.fx-heal .impact-burst,.fx-shield .impact-burst,.fx-buff .impact-burst,.fx-cleanse .impact-burst{animation-name:spell-hold;animation-duration:1.3s}
.fx-magic .impact-burst,.fx-frost .impact-burst,.fx-poison .impact-burst,.fx-drain .impact-burst,.fx-stun .impact-burst{animation-name:spell-hold;animation-duration:1.15s}
.fx-linger{fill:var(--fx);fill-opacity:.16;stroke:var(--fx);stroke-width:.12;stroke-opacity:.6;transform-box:fill-box;transform-origin:center;animation:spell-linger 1.5s var(--impact-delay,0ms) ease-out both;filter:blur(.15px) drop-shadow(0 0 1.2px var(--fx))}
/* Nahkampf-Hieb: Klinge fährt in 0,16 s über das Ziel und verglüht. */
.fx-slash .impact-burst{animation:slash-hit .55s var(--impact-delay,0ms) cubic-bezier(.2,.8,.3,1) both}
.fx-blade,.fx-blade-glow{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:slash-draw .16s var(--impact-delay,0ms) cubic-bezier(.4,0,.2,1) forwards}
.fx-blade{stroke:#fffaf0;stroke-width:.32}
.fx-blade-glow{stroke:#ffd27a;stroke-width:1.1;opacity:.55;filter:blur(.25px)}
.fx-blade-second{animation-delay:calc(var(--impact-delay,0ms) + 90ms)}
.fx-sparks{transform-box:fill-box;transform-origin:center;animation:spark-spread .5s var(--impact-delay,0ms) ease-out both}
.fx-ultimate-ring{fill:none;stroke:var(--fx);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:ultimate-ring 1.1s var(--impact-delay,0ms) ease-out both}
.combat-float{text-anchor:middle;animation:combat-number 1.25s var(--impact-delay,0ms) ease-out both}
.fx-magic .combat-float,.fx-heal .combat-float,.fx-shield .combat-float,.fx-buff .combat-float,.fx-frost .combat-float,.fx-poison .combat-float,.fx-drain .combat-float,.fx-stun .combat-float,.fx-explosion .combat-float,.fx-ultimate .combat-float{animation-duration:1.6s}
.damage-float,.combat-crit,.combat-caption{font-family:var(--ui);font-weight:800;paint-order:stroke;stroke:#161a1b;stroke-width:3px;stroke-linejoin:round}
.combat-crit{fill:#ffdc8d;letter-spacing:1px;stroke-width:2px}
.combat-caption{fill:#d8e4e8;stroke-width:2px}
@keyframes projectile-flight{0%{offset-distance:0%;opacity:0}8%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes fx-fade{0%,85%{opacity:1}100%{opacity:0}}
@keyframes impact-pop{0%{opacity:0;scale:.35}24%{opacity:.95;scale:1.1}100%{opacity:0;scale:1.45}}
@keyframes blast-ring{0%{opacity:0;scale:.15}20%{opacity:.95;scale:.8}100%{opacity:0;scale:1.7}}
@keyframes spark-spread{from{scale:.7}to{scale:1.35}}
@keyframes ultimate-ring{from{opacity:.8;scale:.4}to{opacity:0;scale:1.8}}
@keyframes spell-hold{0%{opacity:0;scale:.35}18%{opacity:1;scale:1.12}70%{opacity:.9;scale:1.2}100%{opacity:0;scale:1.5}}
@keyframes spell-linger{0%{opacity:0;scale:.5}20%{opacity:1;scale:1}75%{opacity:.7;scale:1.15}100%{opacity:0;scale:1.3}}
@keyframes slash-hit{0%{opacity:0;scale:.8}10%{opacity:1;scale:1}70%{opacity:1}100%{opacity:0;scale:1.08}}
@keyframes slash-draw{to{stroke-dashoffset:0}}
@keyframes combat-number{0%{opacity:0;translate:0 5px;scale:.85}12%,60%{opacity:1;scale:1}100%{opacity:0;translate:0 -24px;scale:1}}
@keyframes combat-breathe{from{transform:translateY(0) scale(1)}to{transform:translateY(-1px) scale(1.012,1.018)}}
@keyframes combat-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes shadow-step{0%,100%{scale:1;opacity:.7}50%{scale:.85;opacity:.45}}
@keyframes stun-sway{from{rotate:-3deg}to{rotate:3deg}}
@keyframes combat-fall{from{transform:none;opacity:1}to{transform:translateY(5px) rotate(calc(var(--facing,1)*16deg));opacity:.28}}
@media(prefers-reduced-motion:reduce){
  .combat-effects *,.board-unit,.board-unit *{animation:none!important;transition:none!important}
  .combat-float,.fx-event{opacity:1}
  .board-unit.dead .unit-visual{opacity:.28}
}

/* Oben: Karte, Begegnung, Gruppe */
.battle-top{position:absolute;z-index:320;top:clamp(6px,1.2cqw,16px);left:clamp(6px,1.2cqw,16px);right:clamp(6px,1.2cqw,16px);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;pointer-events:none}
.battle-top>*{pointer-events:auto}
.battle-left{justify-self:start}.battle-right{justify-self:end;display:flex;gap:10px}
.map-button{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:14px;border:1px solid var(--line);color:#fff0c4;font-family:var(--ui);text-align:left;background:linear-gradient(#283f5a,#0f1c2c);box-shadow:inset 0 0 0 2px #7a6a3a,0 10px 20px #000a;transition:transform .1s,filter .15s}
.map-button:hover{filter:brightness(1.15);transform:translateY(-2px)}
.map-button svg{color:var(--gold);flex:none}
.map-button span{display:grid;line-height:1.2}
.map-button small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.map-button b{font:700 14.5px var(--ui);letter-spacing:.06em}
.encounter-plate{min-width:min(34cqw,420px);padding:7px 30px 9px;border-radius:12px;border:1px solid var(--line);text-align:center;background:linear-gradient(#283f5a,#0d1723);box-shadow:inset 0 0 0 2px #7a6a3a,0 14px 26px #000b}
.encounter-plate.elite{background:linear-gradient(#4d3a63,#1b1426);box-shadow:inset 0 0 0 2px #b58cff,0 14px 26px #000b}
.encounter-plate.boss{background:linear-gradient(#6a2c25,#220f0c);box-shadow:inset 0 0 0 2px #ff8a6a,0 0 26px #d2331f66,0 14px 26px #000b}
.encounter-plate small{display:block;font:700 9.5px var(--ui);letter-spacing:.22em;color:var(--gold)}
.encounter-plate h1{font:800 clamp(15px,1.9cqw,26px)/1.15 var(--display);letter-spacing:.06em;color:#fff0c4;text-shadow:0 2px 0 #000}
.plate-status{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font:700 10px var(--ui);letter-spacing:.2em;color:#c2cfdf}
.live-dot{width:9px;height:9px;border-radius:50%;background:#ff5a42;box-shadow:0 0 10px #ff5a42;animation:dot-pulse 1s ease-in-out infinite}

/* Unten: Gruppenleiste und Aktion */
.battle-bottom{position:absolute;z-index:320;left:clamp(6px,1.2cqw,16px);right:clamp(6px,1.2cqw,16px);bottom:clamp(6px,1.2cqw,16px);display:flex;justify-content:space-between;align-items:flex-end;gap:12px;pointer-events:none}
.battle-bottom>*{pointer-events:auto}
.party-bar{display:flex;gap:10px;min-width:0}
/* Gruppenkarten: hell und farbig (Klassenfarbe als Akzent), damit sie auf dem dunklen Boden präsent sind. */
.party-slot{--cls:#6fa8dc;position:relative;display:flex;align-items:center;gap:10px;width:clamp(150px,16.5cqw,240px);min-height:72px;padding:7px 12px 7px 7px;border-radius:15px;border:1px solid #c9a35a;color:var(--text);font-family:var(--ui);text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--cls) 34%,#20406a),#132a45 55%,#0e2036);box-shadow:inset 0 0 0 1px #ffe2a033,inset 4px 0 0 var(--cls),0 0 16px color-mix(in srgb,var(--cls) 30%,transparent),0 12px 22px #000a;transition:transform .12s,filter .2s,box-shadow .2s}
.party-slot[data-cls=Krieger]{--cls:#d9a441}.party-slot[data-cls=Bogenschütze]{--cls:#6cc070}.party-slot[data-cls=Arkanist]{--cls:#a77bff}.party-slot[data-cls=Zauberer]{--cls:#5cc8ff}
.party-slot[data-cls=Priester]{--cls:#f2e7a2}.party-slot[data-cls=Hexenmeister]{--cls:#c35bd6}.party-slot[data-cls=Schamane]{--cls:#3fc9b0}.party-slot[data-cls=Schurke]{--cls:#e2604a}
.party-slot[role=button]:hover{transform:translateY(-2px)}
.party-slot.active{box-shadow:inset 0 0 0 2px var(--gold-hi),inset 4px 0 0 var(--cls),0 0 26px #f4c866aa,0 12px 22px #000a;transform:translateY(-5px)}
.party-slot .g-bust{flex:none;width:56px;height:56px;border-radius:50%;border:1px solid #000;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--cls) 45%,#3d6493),#14273d);box-shadow:0 0 0 2px var(--gold),0 0 10px color-mix(in srgb,var(--cls) 45%,transparent)}
.party-info{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.party-info strong{font:700 14.5px var(--ui);letter-spacing:.04em;color:#fff0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-info small{font-size:10.5px;color:color-mix(in srgb,var(--cls) 55%,#e8edf3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-stats{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#fff3d2}
.party-stats svg{color:var(--gold);margin-left:4px}.party-stats svg:first-child{margin-left:0}
.party-slot.down{filter:grayscale(1) brightness(.6)}
.party-swap{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #ffe2a0;color:#2a1804;background:linear-gradient(#f6d27a,#c8902f);box-shadow:0 3px 0 #000}
.party-empty{flex-direction:column;justify-content:center;gap:2px;width:clamp(110px,11cqw,150px);color:#f4d892;border-style:dashed;border-color:#c9a35a;background:#0d1b2bdd;box-shadow:0 0 14px #e3b86622;font-size:11px}
.party-empty svg{color:var(--gold-hi)}
.party-empty:hover{color:#fff0c4;border-color:var(--gold)}
.action-panel{display:grid;gap:10px;justify-items:end;align-content:end}
.reward-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.g-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:999px;border:1px solid #7a6a3a;background:linear-gradient(#1b3150,#0d1b2b);box-shadow:inset 0 0 0 1px #ffffff1a,0 3px 8px #0008;color:#ffe9b4;font:700 12px var(--ui)}
.g-chip svg{color:var(--gold)}
.g-chip.first{border-color:#7a6a3a;color:#ffd98a}
.g-chip .item-art{width:26px;height:26px;border-radius:6px}
.combat-actions{display:flex;align-items:center;gap:12px}
.battle-xp{font:700 12px var(--ui);color:#ffe9b4;padding:5px 12px;border-radius:999px;background:#070d14d9;border:1px solid #000}
.lobby-code{display:grid;gap:3px;justify-items:end;padding:10px 14px;border-radius:12px;background:#070d14e6;border:1px solid var(--line);box-shadow:inset 0 0 0 1px #ffffff1a}
.lobby-code small{font-size:10px;color:var(--muted);letter-spacing:.1em}
.lobby-code b{font:800 24px var(--display);letter-spacing:.28em;color:var(--gold-hi)}
.lobby-code .g-round{position:absolute;margin:0}

/* Ergebnis */
.result-banner{position:absolute;z-index:330;left:50%;top:46%;translate:-50% -50%;display:grid;justify-items:center;gap:8px;padding:22px 44px 26px;min-width:min(86%,420px);border-radius:18px;border:1px solid var(--line);text-align:center;background:linear-gradient(#21364ff2,#0a121cf5);box-shadow:inset 0 0 0 3px #e8b955,0 0 60px #e8b95566,0 24px 60px #000d;animation:banner-in .6s cubic-bezier(.2,1.3,.4,1) both}
.result-banner.defeat{box-shadow:inset 0 0 0 3px #b24a38,0 0 50px #a8382a66,0 24px 60px #000d}
@keyframes banner-in{from{opacity:0;scale:.6;translate:-50% -30%}to{opacity:1;scale:1}}
.result-banner h2{font:800 clamp(34px,5cqw,64px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 0 30px #e8b955aa}
.result-banner.defeat h2{color:#ffb3a3;text-shadow:0 0 30px #d2331faa}
.result-banner p{color:#d9d3bd}
.result-crest{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid var(--line);color:#2b1805;background:radial-gradient(circle at 50% 30%,#ffeeb4,#d8942c);box-shadow:0 0 34px #e8b955aa}
.result-banner.defeat .result-crest{color:#f0dcd4;background:radial-gradient(circle at 50% 30%,#8a6a62,#3a2420);box-shadow:0 0 30px #a8382a88}
.result-banner ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:4px 0 8px;padding:0;list-style:none;color:#f3ecda;font-size:13px}
.result-banner li{display:inline-flex;align-items:center;gap:6px}
.result-banner li svg{color:var(--gold)}

/* Chronik-Schublade */
.g-drawer{position:fixed;z-index:55;top:var(--hud);bottom:var(--dock);right:0;width:min(100vw,380px);display:grid;grid-template-rows:auto minmax(0,1fr);border-left:3px solid #000;background:linear-gradient(#132235f7,#080f18f7);box-shadow:inset 3px 0 0 #445f7f,-20px 0 50px #000a;animation:drawer-in .3s cubic-bezier(.2,1,.3,1)}
@keyframes drawer-in{from{translate:100% 0}to{translate:0}}
.g-drawer header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px}
.g-drawer small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.g-drawer h2{font:800 20px var(--display);letter-spacing:.05em;color:var(--gold-hi)}
.log-scroll{overflow:auto;padding:4px 14px 16px;display:grid;gap:5px;align-content:start;font-size:12.5px}
.log{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:6px 8px;border-radius:7px;background:#080e15;color:#d9d3bd}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}
.log.kill,.log.death{color:#ffb3a3}.log.heal{color:#9cff9c}.log.ultimate{color:#d2b4ff}
.empty-log{display:grid;justify-items:center;gap:8px;padding:30px 12px;text-align:center;color:var(--muted)}
.empty-log small{display:block;margin-top:4px;color:var(--muted);letter-spacing:0;font-weight:400;font-size:12px}

/* ============================================================ Abenteuerkarte */
.g-map{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;animation:map-in .35s cubic-bezier(.2,.9,.3,1);
  background:radial-gradient(ellipse at 50% 15%,#214673,#08111c 70%),#070d14}
.g-map::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(0deg,transparent 0 47px,#ffffff08 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,#ffffff08 47px 48px)}
@keyframes map-in{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
.map-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px clamp(14px,3vw,34px);background:linear-gradient(#060d16ee,#060d1600)}
.map-head small{display:block;font:700 10px var(--ui);letter-spacing:.22em;color:var(--gold)}
.map-head h2{font:800 clamp(20px,2.6vw,30px) var(--display);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 2px 0 #000}
.map-world{position:relative;flex:none;overflow-x:auto;overflow-y:hidden;padding:0 clamp(10px,3vw,34px)}
.map-zone{position:absolute;translate:-50% -56px;width:176px;display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;color:inherit;font-family:var(--ui);text-align:center;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.map-zone:hover:not(:disabled){transform:translateY(-5px)}
.zone-medal{position:relative;display:block;width:112px;height:112px;border-radius:50%;overflow:hidden;border:4px solid #000;box-shadow:0 0 0 3px #7a6a3a,0 12px 24px #000c;background:#091728;transition:box-shadow .2s,transform .2s}
.zone-medal .zone-emblem{width:100%;height:100%;display:block;object-fit:cover}
.map-zone.chosen .zone-medal{box-shadow:0 0 0 4px var(--gold),0 0 40px #ffd97aaa,0 12px 24px #000c;transform:scale(1.14)}
.map-zone.locked .zone-medal{filter:grayscale(1) brightness(.45)}
.map-zone.locked{opacity:.8}
.zone-lock{position:absolute;inset:0;margin:auto;color:#ddd}
.zone-crown{position:absolute;right:6px;bottom:6px;color:#ffd97a;filter:drop-shadow(0 1px 2px #000)}
.map-zone strong{margin-top:6px;font:700 14px var(--display);letter-spacing:.06em;color:#fff0c4;text-shadow:0 2px 0 #000,0 0 8px #000}
.map-zone small{font-size:11px;color:#b3c4d8;text-shadow:0 1px 3px #000}
.map-detail{position:relative;width:min(100%,1180px);margin:0 auto;display:grid;gap:16px;padding:6px clamp(14px,3vw,34px) 18px}
.stage-trail{display:flex;list-style:none;margin:0;padding:6px 0 0}
.stage-trail li{position:relative;flex:1;min-width:0}
.stage-trail li+li::before{content:"";position:absolute;top:29px;right:50%;width:100%;height:5px;border-radius:3px;background:#213247;box-shadow:0 0 0 1px #000}
.stage-trail li.done+li::before{background:linear-gradient(90deg,#ffd97a,#c98a27)}
.stage-trail button{position:relative;z-index:1;display:grid;justify-items:center;gap:7px;width:100%;padding:0;border:0;background:none;color:inherit;font-family:var(--ui)}
.stage-node{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px solid #000;background:linear-gradient(#283f5a,#111e2e);color:#f0e2b8;font:800 20px var(--display);box-shadow:inset 0 0 0 2px #577497,0 5px 0 #000;transition:transform .15s}
.stage-trail button:hover:not(:disabled) .stage-node{transform:translateY(-3px)}
.stage-trail li.done .stage-node{background:linear-gradient(#ffe49c,#d8942c);color:#2b1805;box-shadow:inset 0 0 0 2px #fff0b8,0 5px 0 #000}
.stage-trail li.chosen .stage-node{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 4px #ffd97a88,0 0 26px #ffd97a99,0 5px 0 #000;transform:scale(1.14)}
.stage-trail li.boss .stage-node{background:linear-gradient(#a24a3c,#3a1410);color:#ffd8cc;border-color:#2a0c08}
.stage-trail li.elite .stage-node{background:linear-gradient(#7a58a0,#2a1a3a);color:#f0e0ff}
.stage-trail li.locked .stage-node{filter:grayscale(1) brightness(.5)}
.stage-label{display:grid;gap:1px;max-width:120px}
.stage-label b{font:700 11.5px/1.25 var(--display);letter-spacing:.04em;color:#fff0c4}
.stage-label small{font-size:10.5px;color:var(--muted)}
.map-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;padding:18px 22px;border-radius:16px;border:3px solid #000;background:linear-gradient(#1b2e44,#0b141f);box-shadow:inset 0 0 0 2px #49668b,0 14px 34px #000b}
.map-card small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.map-card h3{font:800 clamp(20px,2.4vw,28px) var(--display);letter-spacing:.05em;color:#fff0c4;margin:2px 0 6px}
.map-card p{color:#d9d3bd;font-size:14px;line-height:1.5}
.map-card .stage-copy>p:first-of-type{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:17px;color:#e4dcc2}
.stage-power{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;color:#ffcf8a!important;font-size:12.5px!important;line-height:1.35}
.stage-power svg{flex:none;margin-top:2px;color:#ff9a3c}
.stage-power b{color:#ffe0a0;margin-right:4px}
.stage-done{display:flex;align-items:center;gap:7px;margin-top:10px;color:#9cff9c!important;font-size:13px!important}
.stage-reward{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;padding:9px 12px;border-radius:10px;border:1px dashed #b89a5a;background:#2a2a1a66;font-size:13px}
.stage-reward>span{font:700 10px var(--ui);letter-spacing:.16em;color:var(--gold);display:inline-flex;align-items:center;gap:5px}
.stage-reward b{display:inline-flex;align-items:center;gap:5px;color:#ffe9b4}
.stage-reward b svg{color:var(--gold)}
.stage-reward.free{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.map-enemies{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.map-enemy{display:grid;justify-items:center;gap:3px;width:82px}
.map-enemy>span{display:block;width:78px;height:78px;padding:4px;border-radius:14px;border:2px solid #000;background:radial-gradient(circle at 50% 30%,#304560,#101b29);box-shadow:inset 0 0 0 2px #445f7f,0 4px 0 #000;overflow:hidden}
.map-enemy.elite>span{box-shadow:inset 0 0 0 2px #b58cff,0 4px 0 #000}
.map-enemy.boss>span{box-shadow:inset 0 0 0 2px #ff8a6a,0 0 16px #d2331f66,0 4px 0 #000}
.map-enemy small{font-size:10.5px;text-align:center;color:#d9d3bd;line-height:1.2}
.free-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.stepper{display:inline-flex;align-items:center;gap:6px;padding:3px;border-radius:12px;background:#050a11;border:2px solid #000}
.stepper button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:9px;color:#f0e2b8;background:linear-gradient(#283f5a,#111e2e);box-shadow:inset 0 0 0 1px #ffffff2b,0 3px 0 #000}
.stepper button:disabled{opacity:.4}
.stepper span{display:grid;justify-items:center;min-width:96px}
.stepper small{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.stepper b{font:800 18px var(--display);color:var(--gold-hi)}
.map-foot{position:sticky;bottom:0;z-index:2;display:flex;justify-content:center;padding:12px;margin-top:auto;background:linear-gradient(#060d1600,#060d16f5 40%)}

/* ============================================================ Szene: Helden */
.heroes-scene{display:grid;grid-template-columns:clamp(210px,19vw,270px) minmax(0,1fr) clamp(300px,28vw,390px);gap:clamp(10px,1.4vw,22px);height:100%;min-height:0;padding:clamp(8px,1.4vw,18px)}
.roster-rail,.hero-panel,.hero-stage,.bag-detail,.gear-picker{border-radius:16px;border:1px solid var(--line);background:linear-gradient(#142539,#0a131e);box-shadow:inset 0 0 0 2px #3f546f,0 12px 30px #000a}
.roster-rail{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}
.roster-rail header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 6px}
.roster-rail h2{font:800 20px var(--display);letter-spacing:.08em;color:var(--gold-hi)}
.roster-rail ul{list-style:none;margin:0;padding:6px 10px 12px;overflow:auto;display:grid;gap:8px;align-content:start}
.rail-hero{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px 7px 7px;border-radius:13px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);text-align:left;background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 45%,#000);transition:transform .12s,filter .15s}
.rail-hero:hover{transform:translateX(3px)}
.rail-hero.on{background:linear-gradient(#2e4764,#0f1f33);box-shadow:inset 0 0 0 2px var(--gold),0 0 20px #e8b95566;transform:translateX(6px)}
.rail-hero.locked{filter:grayscale(.8) brightness(.75)}
.rail-hero .g-bust{flex:none;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,#000)}
.rail-text{display:grid;min-width:0;gap:1px}
.rail-text b{font:700 14.5px var(--ui);letter-spacing:.04em;color:#fff0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-text small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-lock{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:#d9c48a}
.rail-party{position:absolute;top:6px;right:8px;color:var(--gold);filter:drop-shadow(0 1px 2px #000)}

.hero-stage{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;min-height:0;padding:14px clamp(10px,1.6vw,22px) 14px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--c) 30%,#142539),#070e17 78%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,#000),0 12px 30px #000a}
.hero-stage.locked .doll-figure{filter:grayscale(.85) brightness(.75)}
.hero-title{display:grid;justify-items:center;gap:3px;text-align:center}
.hero-title h2{font:800 clamp(22px,2.6vw,34px)/1.1 var(--display);letter-spacing:.06em;color:#fff0c4;text-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,transparent)}
.hero-title small{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.doll{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto auto;gap:10px clamp(8px,1.4vw,18px);min-height:0}
.slot-col{display:flex;flex-direction:column;justify-content:space-around;gap:8px;min-height:0}
.slot-col.left{grid-column:1}.slot-col.right{grid-column:3}
.doll-figure{position:relative;grid-column:2;min-height:0}
.doll-figure>svg,.doll-figure>img{position:absolute;inset:0;z-index:2;width:100%;height:100%;filter:drop-shadow(0 12px 14px #000a)}
.doll-glow{position:absolute;inset:4% 2% 6%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent),transparent 66%);filter:blur(14px);animation:glow-breathe 3.8s ease-in-out infinite}
@keyframes glow-breathe{50%{opacity:.55;transform:scale(1.06)}}
.doll-pedestal{position:absolute;left:10%;right:10%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#000b,transparent 70%);z-index:1}
.slot-row{grid-column:1/-1;display:flex;justify-content:center;gap:14px}
/* Unter den Waffen die Verbrauchsplätze, etwas kleiner. */
.slot-row.supplies{margin-top:-4px}.slot-row.supplies .gear-slot{zoom:.84}
.gear-slot{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;width:clamp(64px,6.4vw,78px);height:clamp(72px,7.4vw,88px);padding:4px;border-radius:13px;border:1px solid var(--line);color:#72869f;font-family:var(--ui);background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 2px #354961;transition:transform .12s,filter .15s}
.gear-slot:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.18)}
.gear-slot.filled{color:var(--text);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c,#748ba8) 85%,#000),0 0 16px color-mix(in srgb,var(--c,#748ba8) 40%,transparent)}
.gear-slot .slot-art{display:grid;place-items:center;width:46px;height:46px}
.gear-slot .item-art{width:46px;height:46px}
.gear-slot small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gear-slot.blocked{opacity:.4}
.slot-count{position:absolute;right:5px;top:3px;font:800 11px var(--ui);color:#fff0c4;text-shadow:0 1px 2px #000;font-style:normal}
.hero-quote{text-align:center;max-width:52ch;margin:0 auto;font:italic 600 clamp(14px,1.3vw,17px)/1.45 'Cormorant Garamond',Georgia,serif;color:#d6d3bf}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.locked-note{display:inline-flex;align-items:center;gap:6px}
.hero-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}
.g-tabs{display:flex;gap:4px;padding:8px 8px 0}
.g-tabs button{flex:1;min-height:42px;border:0;border-radius:11px 11px 0 0;background:#060d16;color:#93a9c3;font:700 13px var(--ui);letter-spacing:.1em;text-transform:uppercase;transition:color .15s,background .15s}
.g-tabs button:hover{color:#fff0c4}
.g-tabs button.on{background:linear-gradient(#283f5a,#142539);color:#fff0c4;box-shadow:inset 0 3px 0 var(--gold)}
.panel-body{overflow:auto;padding:14px 16px 18px;display:grid;gap:12px;align-content:start;background:linear-gradient(#142539,#0a131e)}
.hit-card{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;background:#060d16;border:2px solid #7a6a3a;box-shadow:inset 0 0 18px #e8b95522}
.hit-card small{color:var(--muted);font-size:12px}
.hit-card b{font:800 30px var(--display);color:var(--gold-hi);text-shadow:0 2px 0 #000}
.stat-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat-list div{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;background:#060d16;border:1px solid #000;box-shadow:inset 0 0 0 1px #ffffff0d}
.stat-list dt{font-size:12px;color:var(--muted)}
.stat-list dd{margin:0;font-weight:700;color:#fff0c4;font-variant-numeric:tabular-nums}
.xp-bar{display:grid;gap:6px}
.xp-bar>div{display:flex;justify-content:space-between;font-size:12px;color:#d6dabb}
.xp-bar b{color:var(--gold-hi)}
.skill-list{display:grid;gap:10px}
.skill-list article{display:grid;gap:5px;padding:12px 14px;border-radius:12px;background:#060d16;border:1px solid #000;box-shadow:inset 0 0 0 1px #ffffff10}
.skill-list article.ultimate{box-shadow:inset 0 0 0 2px #6b4fb0,0 0 18px #6b4fb033}
.skill-list small{font:700 9.5px var(--ui);letter-spacing:.14em;color:var(--gold)}
.skill-list .ultimate small{color:#c4a6ff}
.skill-list h3{font:700 17px var(--display);letter-spacing:.05em;color:#fff0c4}
.skill-list p{font-size:13px;line-height:1.5;color:#d9d3bd}
.train-list{display:grid;gap:10px}
.train-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;border-radius:12px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:linear-gradient(#283f5a,#111e2e);box-shadow:inset 0 0 0 1px #ffffff2b;transition:transform .1s,filter .15s}
.train-card:hover:not(:disabled){filter:brightness(1.15)}
.train-card:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 0 0 1px #ffffff2b}
.train-card:disabled{opacity:.5}
.train-card svg{flex:none;color:var(--gold)}
.train-card span{display:grid;gap:2px}
.train-card b{font:700 14px var(--display);letter-spacing:.04em;color:#fff0c4}
.train-card small{font-size:12px;color:var(--muted)}
.active-sets{display:grid;gap:6px}
.active-sets p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 10px;border-radius:10px;background:#201a30;border:1px solid #6b4fb0;font-size:12px}
.active-sets svg{color:#d2b4ff}
.active-sets strong{color:#e8d6ff}
.active-sets .on{color:#9cff9c}.active-sets .off{color:#8c8aa0}
.set-tag{display:flex;align-items:flex-start;gap:4px;margin-top:4px;font-size:11px;color:#e8d6ff}

/* Ausrüstungsauswahl */
.picker-backdrop{z-index:65}
.gear-picker{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,680px);max-height:min(88vh,720px);overflow:hidden;animation:pop-in .26s cubic-bezier(.2,1.3,.4,1)}
.gear-picker header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px}
.gear-picker header small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.gear-picker header h2{font:800 22px var(--display);letter-spacing:.06em;color:var(--gold-hi)}
.gear-picker footer{display:flex;justify-content:flex-end;gap:10px;padding:10px 18px 16px;border-top:1px solid #ffffff12}
.picker-grid{overflow:auto;padding:6px 16px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start}
.picker-item{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;text-align:left;border-radius:12px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c,#445f7f) 70%,#000);transition:transform .1s,filter .15s}
.picker-item:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-2px)}
.picker-item.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 18px #e8b95566}
.picker-item .item-art{flex:none;width:52px;height:52px}
.picker-item>span{display:grid;gap:2px;min-width:0}
.picker-item b{font:700 14.5px var(--ui);letter-spacing:.03em;color:#fff0c4}
.picker-item small{font-size:11px;color:var(--muted)}
.picker-item em{font-style:normal;font-size:11.5px;color:#d9d3bd;line-height:1.35}
.picker-check{position:absolute;right:10px;top:10px;color:#9cff9c}

/* ============================================================ Szenen: Inventar und Bestiarium */
.inventory-scene,.codex-scene{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;min-height:0}
.codex-scene{grid-template-rows:auto minmax(0,1fr)}
.scene-head .search{display:flex;align-items:center;gap:8px;height:40px;margin-left:auto;padding:0 12px;border-radius:11px;border:1px solid var(--line);background:#050a11;color:var(--muted);box-shadow:inset 0 2px 6px #000}
.scene-head .search input{width:min(40vw,220px);border:0;outline:0;background:none;color:#fff0c4;font:500 14px var(--ui)}
.scene-head .search:focus-within{border-color:var(--gold)}
.codex-count{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:7px 14px;border-radius:999px;border:1px solid #000;background:#060d16;color:#ffe9b4;font:700 12px var(--ui);letter-spacing:.06em}
.codex-count svg{color:#ff9a7a}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 clamp(12px,2vw,26px) 8px}
.filter-row button{min-height:32px;padding:0 15px;border-radius:999px;border:1px solid var(--line);color:#9fb2ca;font:700 13px var(--ui);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 1px #ffffff1c}
.filter-row button.on{color:#2b1805;background:linear-gradient(#ffe49c,#d8942c);box-shadow:inset 0 1px 0 #fff7d6,0 3px 0 #3b2406}
.scene-note{padding:0 clamp(12px,2vw,26px) 10px}
.bag-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26vw,360px);gap:18px;align-items:start}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;padding:4px 6px 12px}
.bag-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:7px;padding:12px 6px 10px;border-radius:13px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c,#445f7f) 70%,#000);transition:transform .1s,filter .15s}
.bag-tile:hover{transform:translateY(-3px);filter:brightness(1.14)}
.bag-tile.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 22px #e8b95577;transform:translateY(-4px)}
.bag-tile .item-art{width:58px;height:58px}
.bag-tile b{max-width:100%;font:600 12px/1.25 var(--ui);text-align:center;overflow-wrap:anywhere;hyphens:auto}
.bag-detail{position:sticky;top:0;display:grid;gap:12px;align-content:start;padding:16px}
.bag-detail.empty{text-align:center;padding:30px 18px}
.bag-detail-head{display:flex;align-items:center;gap:14px}
.bag-detail-head .item-art{width:84px;height:84px}
.bag-detail-head h2{font:800 20px var(--display);letter-spacing:.04em;color:#fff0c4;margin:6px 0 2px}
.bag-detail-head small{color:var(--muted);font-size:12px}
.bag-detail h3{font:700 13.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bag-stats{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.bag-stats li{display:flex;justify-content:space-between;padding:6px 10px;border-radius:8px;background:#060d16;border:1px solid #000;font-size:13px}
.bag-stats b{color:#9cff9c}
.wearers{display:grid;gap:8px}
.wearer{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px 7px 7px;text-align:left;border-radius:12px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 1px #ffffff1c;transition:transform .1s,filter .15s}
.wearer:hover:not(:disabled){filter:brightness(1.18);transform:translateX(3px)}
.wearer.on{box-shadow:inset 0 0 0 2px #6fbf6f,0 0 14px #6fbf6f44}
.wearer .g-bust{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c)}
.wearer span{display:grid;flex:1;min-width:0}
.wearer b{font:700 14.5px var(--ui);letter-spacing:.03em;color:#fff0c4}
.wearer small{font-size:11px;color:var(--muted)}
.wearer>svg{color:#9cff9c}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;padding:4px 6px 12px}
.shop-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(#1c2f46,#0b141f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c,#445f7f) 60%,#000)}
.shop-card>div{display:grid;gap:3px;justify-items:start;min-width:0}
.shop-card h3{font:700 15px var(--display);letter-spacing:.04em;color:#fff0c4}
.shop-card p{font-size:12.5px;color:#e2d3ac;line-height:1.4}
.shop-card small{font-size:11px;color:var(--muted)}
.shop-card .stock{color:var(--gold-hi);font-weight:800}
.shop-card.missing{opacity:.62;filter:grayscale(.5)}
.shop-card.missing:hover{opacity:.95;filter:none}
.loot-source{color:#d9c48a!important}
.collection-head{display:grid;gap:8px;padding:4px 6px 12px;font:700 14.5px var(--ui);letter-spacing:.06em;color:#fff0c4}

.codex-scene .scene-body{padding-top:0}
.codex-zone{margin-bottom:26px}
.codex-zone>header{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.codex-zone .zone-emblem{width:128px;height:72px;flex:none;border-radius:10px;border:1px solid var(--line);box-shadow:0 0 0 2px #7a6a3a;object-fit:cover}
.codex-zone small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.codex-zone h2{font:800 22px var(--display);letter-spacing:.06em;color:#fff0c4}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.codex-card{position:relative;display:grid;justify-items:center;gap:4px;padding:30px 8px 12px;border-radius:14px;border:1px solid var(--line);color:var(--text);font-family:var(--ui);background:radial-gradient(ellipse at 50% 35%,#2e4562,#0d1622 80%);box-shadow:inset 0 0 0 2px #445f7f;transition:transform .12s,filter .15s}
.codex-card:hover{transform:translateY(-4px);filter:brightness(1.15)}
.codex-card.elite{box-shadow:inset 0 0 0 2px #b58cff}
.codex-card.boss{background:radial-gradient(ellipse at 50% 35%,#6a3a30,#1c0f0c 80%);box-shadow:inset 0 0 0 2px #ff8a6a,0 0 20px #d2331f55}
.codex-rank{position:absolute;top:8px;left:8px;font:700 9px var(--ui);letter-spacing:.16em;color:#ffd0c0}
.codex-card:not(.boss):not(.elite) .codex-rank{color:var(--muted)}
.codex-art{display:block;width:100%;height:112px}
.codex-card b{font:700 13.5px var(--display);letter-spacing:.03em;color:#fff0c4;text-align:center}
.codex-card small{font-size:11px;color:var(--muted)}
.codex-card.unseen .codex-art{filter:brightness(.3) contrast(1.1) saturate(.4)}
.codex-card.unseen b{color:#8298b4}
.enemy-hero{height:210px;margin:0 auto;width:210px}
.enemy-values{display:flex;justify-content:center;gap:18px;font:800 18px var(--display);color:#fff0c4}
.enemy-values span{display:inline-flex;align-items:center;gap:6px}
.enemy-values svg{color:var(--gold)}
.enemy-trait{padding:9px 12px;border-radius:10px;background:#060d16;border:1px solid #000;font-size:12.5px;line-height:1.5;color:#d9d3bd}
.enemy-trait.ultimate{border-color:#a8382a;background:#2a100c}
.enemy-trait b{color:#fff0c4}

/* ============================================================ Titelbildschirm */
.title-screen{--public-border:var(--line-hi);--public-radius:16px;position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;overflow-y:auto;padding:calc(16px + env(safe-area-inset-top,0px)) 0 calc(12px + env(safe-area-inset-bottom,0px));scroll-padding-block:16px;background:#05090e}
.title-bg{position:fixed;inset:-3%;overflow:hidden}
.title-bg .arena-landscape,.title-bg svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.62) saturate(1.1);animation:slow-pan 50s ease-in-out infinite alternate}
@keyframes slow-pan{from{transform:scale(1.04) translateX(-1.5%)}to{transform:scale(1.12) translateX(1.5%)}}
.title-screen::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 15%,#000d 88%),linear-gradient(#0009,transparent 30%,#000c)}
.embers{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#fff2c0,#ff9a3a 55%,transparent 72%);opacity:0;animation:ember linear infinite}
@keyframes ember{0%{translate:0 0;opacity:0}12%{opacity:.95}100%{translate:var(--drift) -108vh;opacity:0}}
.title-content{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;flex:none;width:min(100%,600px);margin-block:auto;padding:20px;text-align:center}
.title-form,.title-menu{max-width:min(100%,400px)}
.title-crest{filter:drop-shadow(0 12px 28px #000);animation:float 5s ease-in-out infinite}
.title-logo{margin:0;white-space:nowrap;font:800 clamp(60px,13vw,112px)/1 var(--display);letter-spacing:.14em;text-indent:.14em;background:linear-gradient(#fff4c8,#e8b955 55%,#9a6a1c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #000) drop-shadow(0 0 28px #e8b95566)}
.title-sub{margin:0 0 26px;font:600 clamp(12px,2.4vw,18px) var(--display);letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:#e0dac3;text-shadow:0 2px 0 #000}
.title-menu{display:grid;gap:14px;width:min(100%,340px)}
.title-menu .g-btn{width:100%}
.title-form{display:grid;gap:12px;width:100%;padding:22px 24px;text-align:left;border-radius:var(--public-radius);border:1px solid var(--public-border);background:linear-gradient(#14263bf2,#0e1a29f2);box-shadow:0 24px 60px #000d;animation:pop-in .3s cubic-bezier(.2,1.3,.4,1)}
.title-form h2{margin:0 0 2px;text-align:center;font:800 22px var(--display);letter-spacing:.06em;color:var(--gold-hi)}
.title-form label{display:grid;gap:5px;font:700 13px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.title-form input{width:100%;font-size:16px;letter-spacing:0;font-weight:500}
.title-form small{color:var(--muted);font-size:12px}
.title-error{margin:0;padding:9px 12px;border-radius:10px;background:#3d1410;border:1px solid #7a2c22;color:#ffd6cc;font-size:13px;text-align:center}
.title-form .g-btn{width:100%}
.title-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.title-links button{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:8px 4px;border:0;background:none;color:#d9d3bd;font:600 13px var(--ui);text-decoration:underline;text-underline-offset:3px}
.title-links button:hover{color:#fff0c4}
.title-foot{position:relative;z-index:2;flex:none;width:100%;margin-top:16px;padding:8px 16px;text-align:center;font:italic 600 15px 'Cormorant Garamond',Georgia,serif;color:#b9b49f;text-shadow:0 1px 3px #000}


/* Öffentliche Formulare bleiben auch bei kleiner Höhe und Bildschirmtastatur erreichbar. */
.title-screen .g-btn{min-height:44px}
.title-screen .g-btn-lg{min-height:52px}
.title-screen .g-btn-xl{min-height:64px}
.is-auth .title-crest{width:72px;height:72px;animation:none}
.is-auth .title-logo{font-size:clamp(40px,9vw,60px)}
.is-auth .title-sub{margin-bottom:14px;font-size:12px;letter-spacing:.3em;text-indent:.3em}
@media(max-height:600px){
  .title-screen .g-btn-lg,.title-screen .g-btn-xl{min-height:44px}
  .title-content{padding:12px 20px}
  .title-crest{width:72px;height:72px}
  .title-logo{font-size:56px}
  .title-sub{margin-bottom:16px}
}
/* ============================================================ Anpassung an kleinere Fenster */
@media(max-width:1180px){
  .heroes-scene{grid-template-columns:clamp(190px,19vw,230px) minmax(0,1fr) clamp(290px,29vw,340px)}
  .bag-layout{grid-template-columns:minmax(0,1fr) 300px}
  .gear-slot{width:60px;height:68px}
  .gear-slot .slot-art,.gear-slot .item-art{width:38px;height:38px}
}
@media(max-height:780px) and (min-width:821px){
  .game-app{--hud:54px;--dock:76px}
  .g-dock-icon{width:48px;height:48px}
  .g-dock-label{font-size:10.5px}
  .hero-quote{display:none}
}
@media(max-width:820px),(max-height:560px) and (orientation:landscape){
  .game-app{--hud:54px;--dock:76px}
  .g-hud-title,.g-hud-menu{display:none}
  .g-wallet{margin-left:0;flex:1;justify-content:flex-end;gap:6px}
  .g-res{height:32px;padding:0 10px 0 7px;font-size:13px;gap:5px}
  .g-dock-icon{width:48px;height:48px;border-radius:15px}
  .g-dock-label{font-size:10px;letter-spacing:.1em}
  
  .g-modal-head{padding:14px 16px 8px}.g-modal-body{padding:6px 16px 14px}.g-modal-foot{padding:10px 16px 16px}
  .g-toasts{bottom:calc(var(--dock) + 8px)}

  /* Karte */
  .map-card{grid-template-columns:1fr;padding:14px}
  .stage-node{width:44px;height:44px;font-size:16px}
  .stage-trail li+li::before{top:24px}
  .stage-label{max-width:64px}.stage-label small{display:none}.stage-label b{display:none;font-size:10px}.stage-trail li.chosen .stage-label b{display:block;position:absolute;top:100%;left:50%;translate:-50% 2px;white-space:nowrap}
  .stage-trail{padding-bottom:22px}

  /* Helden */
  .heroes-scene{display:flex;flex-direction:column;overflow-y:auto;gap:12px;padding:10px}
  .roster-rail{flex:none;grid-template-rows:auto}
  .roster-rail header{padding:10px 12px 4px}
  .roster-rail ul{display:flex;overflow-x:auto;overflow-y:hidden;padding:6px 10px 12px}
  .rail-hero{flex:none;width:176px}.rail-hero:hover,.rail-hero.on{transform:none}
  .hero-stage{flex:none;grid-template-rows:auto auto auto auto}
  .doll{grid-template-columns:auto minmax(0,1fr) auto}
  .doll-figure{height:min(46vh,380px)}
  .gear-slot{width:58px;height:66px}
  .gear-slot .slot-art,.gear-slot .item-art{width:38px;height:38px}
  .gear-slot small{font-size:8.5px}
  .hero-panel{flex:none;max-height:none}
  .panel-body{overflow:visible}
  .stat-list{grid-template-columns:1fr 1fr}
  .picker-grid{grid-template-columns:1fr}

  /* Inventar, Bestiarium */
  .inventory-scene{display:flex;flex-direction:column;overflow-y:auto}
  .inventory-scene .scene-body{overflow:visible;flex:none}
  .bag-layout{grid-template-columns:1fr}
  .bag-layout.has-detail .bag-detail{order:-1;position:static}
  .bag-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .shop-grid{grid-template-columns:1fr}
  .shop-card{grid-template-columns:auto minmax(0,1fr)}.shop-card .g-btn{grid-column:1/-1}
  .scene-head .search{margin-left:0;flex:1}.scene-head .search input{width:100%}
  .codex-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .codex-zone .zone-emblem{display:none}
  .profile-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px) and (orientation:portrait){
  /* Kampf: Kopfzeile, Feld, Gruppe untereinander */
  .battle-scene{display:flex;flex-direction:column;place-items:initial;overflow-y:auto;overflow-x:hidden}
  .battle-wrap{display:flex;flex-direction:column;gap:10px;width:100%;aspect-ratio:auto;max-height:none;padding:8px 8px 18px}
  .g-arena{position:relative;inset:auto;order:2;aspect-ratio:1672/941;width:100%;border-radius:12px}
  .battle-top{position:static;order:1;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
  .map-button{padding:7px 11px}.map-button span{display:none}
  .encounter-plate{min-width:0;padding:6px 14px 8px}
  .encounter-plate h1{font-size:16px}
  .battle-right{gap:8px}
  .battle-bottom{position:static;order:3;flex-direction:column;align-items:stretch;gap:12px}
  .party-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .party-slot{width:auto;flex-direction:column;align-items:center;gap:4px;min-height:0;padding:8px 6px;text-align:center}
  .party-slot .g-bust{width:46px;height:46px}
  .party-info{width:100%;justify-items:center}
  .party-info strong{font-size:11px;max-width:100%}
  .party-info small{display:none}
  .party-swap{top:-8px;right:-6px;width:26px;height:26px}
  .party-empty{width:auto;min-height:92px}
  .action-panel{justify-items:stretch;position:sticky;bottom:6px;z-index:5;padding:10px;border-radius:16px;background:linear-gradient(#060d1600,#060d16ee 30%)}
  .reward-chips{justify-content:center}
  .action-panel .g-btn{width:100%}
  .action-panel .g-row{justify-content:space-between}
  .lobby-code{justify-items:center}
  .result-banner{position:fixed;z-index:330;top:46%;width:min(92vw,420px);padding:18px 22px 22px}
  .g-drawer{width:100vw}

}
@media(max-height:560px) and (orientation:landscape){
  .game-app{--hud:46px;--dock:62px}
  .g-dock-label{display:none}.g-dock-icon{width:40px;height:40px}
  .g-avatar{width:36px;height:36px}
}

/* Gegnervorschau: nur auf kleinen Bildschirmen, wo das Feld wenig Platz lässt */
.foe-preview{display:none}
@media(max-width:820px) and (orientation:portrait){
  .foe-preview{order:3;display:flex;align-items:center;gap:10px;padding:8px 10px;overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:#080e15cc;box-shadow:inset 0 0 0 1px #ffffff14}
  .foe-preview>small{flex:none;font:700 9.5px var(--ui);letter-spacing:.2em;color:var(--gold)}
  .foe{flex:none;display:grid;justify-items:center;gap:2px;width:68px}
  .foe-art{display:block;width:56px;height:56px;padding:3px;border-radius:12px;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#304560,#101b29);box-shadow:inset 0 0 0 2px #445f7f;overflow:hidden}
  .foe.elite .foe-art{box-shadow:inset 0 0 0 2px #b58cff}.foe.boss .foe-art{box-shadow:inset 0 0 0 2px #ff8a6a}
  .foe b{font:600 10px/1.2 var(--ui);text-align:center;color:#d9d3bd}
  .battle-bottom{order:4}
}

/* Hinweis: Held ohne Waffe */
.gear-hint{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 14px;border-radius:12px;border:1px solid var(--line);color:#fff0c4;font:700 12px var(--ui);text-align:left;background:linear-gradient(#7a4a2a,#3d2412);box-shadow:inset 0 0 0 1px #ffd9a055,0 0 18px #ff9a3a44;animation:hint-pulse 2.4s ease-in-out infinite}
.gear-hint svg{flex:none;color:#ffd27a}
.gear-hint:hover{filter:brightness(1.15)}
@keyframes hint-pulse{50%{box-shadow:inset 0 0 0 1px #ffd9a055,0 0 28px #ff9a3acc}}
@media(max-width:820px){.gear-hint{justify-content:center}}

/* Querformat auf dem Handy: Feld bleibt füllend, Zusatzanzeigen schrumpfen */
@media(max-height:560px) and (orientation:landscape){
  .map-button span{display:none}.map-button{padding:7px 9px}
  .encounter-plate{min-width:0;padding:3px 16px 5px}.encounter-plate small{display:none}.encounter-plate h1{font-size:13px}
  .plate-status{font-size:8.5px;margin:0}
  .g-round{width:34px;height:34px}
  .party-slot{width:auto;min-height:0;gap:6px;padding:4px 10px 4px 4px;border-radius:11px}
  .party-slot .g-bust{width:32px;height:32px}
  .party-info small,.party-stats,.party-empty,.party-swap{display:none}
  .party-info strong{font-size:10.5px}
  .reward-chips{display:none}
  .gear-hint{padding:5px 10px;font-size:10px}
  .g-btn-xl{min-height:42px;padding:0 20px;font-size:12px}
  .g-btn-lg{min-height:40px;padding:0 18px;font-size:12px}
  .result-banner{padding:10px 24px 12px;gap:4px}.result-crest{display:none}.result-banner h2{font-size:30px}
  .g-modal{max-height:94vh}
}

/* ------------------------------------------------------------------ Sterne, Truhen, Kampftempo */
.g-stars{display:inline-flex;align-items:center;gap:1px;line-height:0}
.g-stars svg{color:#5a5040;fill:#1b1a14;stroke-width:1.6;filter:drop-shadow(0 1px 0 #000)}
.g-stars svg.on{color:#ffe08a;fill:#f2bb3b;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 5px #ffcf5c88)}
.banner-stars{display:grid;justify-items:center;gap:6px;margin:-2px 0 2px}
.banner-stars .g-stars svg.on{animation:star-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.banner-stars .g-stars svg:nth-child(2){animation-delay:.18s}.banner-stars .g-stars svg:nth-child(3){animation-delay:.36s}
.banner-stars ul{display:flex;gap:6px 12px;margin:0!important;font-size:11.5px!important}
.banner-stars li{color:#8a8574}.banner-stars li::before{content:"✗ ";color:#a8574a}
.banner-stars li.on{color:#f3ecda}.banner-stars li.on::before{content:"★ ";color:var(--gold)}
.banner-stars small{font:700 10px var(--ui);letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
@keyframes star-pop{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.stars-chip .g-stars{gap:0}
.stage-label .g-stars{justify-self:center;margin-top:2px}
.map-zone .zone-stars{display:inline-flex;align-items:center;gap:3px;color:#ffe08a}
.map-zone .zone-stars svg{fill:#f2bb3b;color:#ffe08a}
.reward-stars{flex:none;min-width:46px;justify-content:center}
.reward-icon.chest{color:#ffd27a;background:radial-gradient(circle at 50% 30%,#7a5a2a,#2a1a08)}
.loot-row.chest{box-shadow:inset 0 0 0 1px #ffd27a66,0 0 22px #ffd27a33}

.chest-track{display:flex;align-items:center;gap:14px;padding:8px 14px 18px;border-radius:12px;background:#070d14cc;border:1px solid #000;box-shadow:inset 0 0 0 1px #ffffff10}
.chest-total{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 13px var(--ui);color:#d8cfb6}
.chest-total svg{color:#ffe08a;fill:#f2bb3b}.chest-total b{font:800 18px var(--display);color:var(--gold-hi)}
.chest-bar{position:relative;flex:1;height:10px;border-radius:6px;background:#18222e;box-shadow:inset 0 1px 3px #000,0 0 0 1px #000}
.chest-bar>i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,#c98a27,#ffe08a);box-shadow:0 0 10px #ffcf5c66;transition:width .5s}
.chest-mark{position:absolute;top:50%;translate:-50% -50%;display:grid;justify-items:center;width:34px;height:34px;place-content:center;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#3a3428,#15130e);color:#8a7f66}
.chest-mark:last-child{translate:-100% -50%}
.chest-mark small{position:absolute;top:100%;margin-top:2px;font:700 10px var(--ui);color:var(--muted)}
.chest-mark.ready{color:#ffe08a;box-shadow:0 0 14px #ffcf5caa;animation:chest-glow 1.4s ease-in-out infinite}
.chest-mark.open{color:#2b1805;background:linear-gradient(#ffe49c,#d8942c);box-shadow:inset 0 0 0 2px #fff0b8}
@keyframes chest-glow{50%{box-shadow:0 0 24px #ffcf5c}}

.speed-toggle{width:auto;min-width:42px;padding:0 10px;border-radius:21px;grid-auto-flow:column;gap:4px;font:800 13px var(--ui)}
.speed-toggle b{font:inherit}
.speed-toggle.fast{color:#2b1805;background:linear-gradient(#ffe49c,#d8942c);box-shadow:inset 0 0 0 2px #fff0b8,0 0 16px #ffcf5c88}
.speed-toggle:disabled{opacity:.55;filter:none;cursor:not-allowed}
.g-arena.fast .board-unit{transition-duration:.15s}
@media (max-width:640px){.chest-track{padding:6px 10px 16px;gap:10px}.chest-mark{width:28px;height:28px}.speed-toggle{min-width:34px;height:34px;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.banner-stars .g-stars svg.on,.chest-mark.ready{animation:none}}

/* Beutefenster: Schnellaktionen in einer Zeile, auf dem Handy untereinander mit der Hauptaktion oben */
.results .g-modal-foot{flex-wrap:nowrap}
.results .g-modal-foot .g-btn{white-space:nowrap}
@media (max-width:640px){
  .results .g-modal-foot{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .results .g-modal-foot .g-btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------------ Heldenübersicht: Blättern und Wischen */
.hero-stage{touch-action:pan-y}
.hero-stage .doll{-webkit-user-select:none;user-select:none}
.hero-nav{position:absolute;z-index:6;top:clamp(14px,1.8vw,22px);display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line);color:#f0e2b8;background:linear-gradient(#2f445d,#13202f);box-shadow:inset 0 0 0 1px #ffffff22;transition:transform .15s}
.hero-nav:hover{filter:brightness(1.2)}.hero-nav:active{transform:translateY(2px)}
.hero-nav.prev{left:12px}.hero-nav.next{right:12px}
.hero-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:5px}
.hero-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff2e;box-shadow:0 0 0 1px #000}
.hero-dots i.on{background:var(--gold);box-shadow:0 0 0 1px #000,0 0 8px #ffd97a}
.hero-stage.swipe-next .hero-title,.hero-stage.swipe-next .doll-figure{animation:swipe-from-right .3s cubic-bezier(.2,.9,.3,1)}
.hero-stage.swipe-prev .hero-title,.hero-stage.swipe-prev .doll-figure{animation:swipe-from-left .3s cubic-bezier(.2,.9,.3,1)}
@keyframes swipe-from-right{from{opacity:0;transform:translateX(48px)}}
@keyframes swipe-from-left{from{opacity:0;transform:translateX(-48px)}}

/* ------------------------------------------------------------------ Trage-Status: frei, angelegt, bei anderen Helden */
.item-status{justify-self:start;display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:1px 9px 1px 7px;border-radius:999px;border:1px solid #000;font:700 10.5px var(--ui);letter-spacing:.04em;white-space:nowrap}
.item-status.free{color:#0b1c30;background:linear-gradient(#a8ef9c,#5fbf5a)}
.item-status.mine{color:#2b1805;background:linear-gradient(#ffe49c,#d8942c)}
.item-status.worn{color:#2a1500;background:linear-gradient(#ffc27a,#e08a2a);padding-left:2px}
.item-status.moved{color:#f0e2b8;background:#2f445d}
.item-status.used{color:#f3d6cf;background:#6a2f28}
.item-status .g-bust{width:20px;height:20px;border-radius:50%;border:1px solid #000;background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c)}
.picker-grid{grid-template-columns:1fr}
.picker-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start}
.picker-group h3{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:6px 0 -2px;font:700 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.picker-group h3 small{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#070d14;color:#d8cfb6;letter-spacing:0}
.picker-group.free h3{color:#9cff9c}.picker-group.taken h3{color:#ffc27a}
.picker-item.worn,.picker-item.moved{box-shadow:inset 3px 0 0 #e08a2a,inset 0 0 0 1px #ffffff12}
.picker-item.used{opacity:.55}
.take-note{color:#ffc27a!important;font-weight:600}
.bag-tile.worn{box-shadow:inset 0 0 0 2px #e08a2a99}
.bag-tile.worn.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 22px #e8b95577}
.tile-status{position:absolute;top:-9px;right:-6px;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% + 4px);padding:1px 8px 1px 2px;border-radius:999px;border:1px solid var(--line);font:800 10px var(--ui);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-status.free{padding:1px 8px;color:#0b1c30;background:linear-gradient(#a8ef9c,#5fbf5a)}
.tile-status.worn{color:#2a1500;background:linear-gradient(#ffc27a,#e08a2a)}
.tile-status .g-bust{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid #000;background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c)}
.detail-status{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid var(--line)}
.detail-status span{display:grid;gap:2px}.detail-status b{font:700 14.5px var(--ui);letter-spacing:.03em}.detail-status small{font-size:11.5px}
.detail-status.free{color:#0b1c30;background:linear-gradient(#a8ef9c,#5fbf5a)}
.detail-status.worn{color:#2a1500;background:linear-gradient(#ffc27a,#e08a2a)}
.detail-status .g-bust{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c)}
.wearer.takes small{color:#ffc27a}
.filter-sep{width:2px;align-self:stretch;margin:2px 4px;background:#ffffff1c;border-radius:1px}
.filter-row .status-filter.free.on{color:#0b1c30;background:linear-gradient(#a8ef9c,#5fbf5a)}
.filter-row .status-filter.worn.on{color:#2a1500;background:linear-gradient(#ffc27a,#e08a2a)}
@media (max-width:640px){.hero-nav{width:36px;height:36px;top:10px}.hero-nav.prev{left:8px}.hero-nav.next{right:8px}.tile-status{font-size:9px}}
@media (prefers-reduced-motion:reduce){.hero-stage.swipe-next .hero-title,.hero-stage.swipe-next .doll-figure,.hero-stage.swipe-prev .hero-title,.hero-stage.swipe-prev .doll-figure{animation:none}}

/* ------------------------------------------------------------------ Heldenpack öffnen */
.pack-stage{position:fixed;inset:0;z-index:65;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:8px;padding:clamp(16px,4vh,40px) 16px calc(20px + env(safe-area-inset-bottom));overflow:hidden;font-family:var(--ui);color:var(--text);
  background:radial-gradient(circle at 50% 46%,#132235 0,#04080d 72%);animation:fade-in .25s ease-out}
.pack-stage>*{position:relative;z-index:1}
.pack-stage header{text-align:center}
.pack-stage header small{display:block;font:700 11px var(--ui);letter-spacing:.24em;color:var(--gold)}
.pack-stage header h2{margin:2px 0 0;font:800 clamp(26px,4vw,40px) var(--display);letter-spacing:.08em;color:var(--gold-hi);text-shadow:0 0 26px #e8b95566}
.pack-rays{position:absolute!important;z-index:0!important;inset:-60%;pointer-events:none;opacity:0;transition:opacity .5s;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc,#ffe6a0) 55%,transparent) 0 5deg,transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 34%);mask-image:radial-gradient(circle,#000 0,transparent 34%);filter:blur(3px);animation:rays-spin 30s linear infinite}
.pack-stage.phase-sealed .pack-rays{opacity:.1}
.pack-stage.phase-charging .pack-rays{--rc:var(--c);opacity:.35;animation-duration:6s}
.pack-stage.phase-burst .pack-rays,.pack-stage.phase-revealed .pack-rays{--rc:var(--c);opacity:.6}
.pack-stage.phase-revealed{background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--c) 30%,#132235) 0,#04080d 72%)}
@keyframes rays-spin{to{rotate:360deg}}
.pack-arena{display:grid;place-items:center;width:min(94vw,440px);height:min(60vh,470px)}
.pack-arena>*{grid-area:1/1}
.hero-pack{position:relative;display:grid;align-content:center;justify-items:center;gap:8px;width:200px;height:290px;padding:0;border:0;color:#fff0c4;font-family:var(--ui);
  clip-path:polygon(0 3%,5% 0,10% 3%,15% 0,20% 3%,25% 0,30% 3%,35% 0,40% 3%,45% 0,50% 3%,55% 0,60% 3%,65% 0,70% 3%,75% 0,80% 3%,85% 0,90% 3%,95% 0,100% 3%,100% 100%,0 100%);
  background:linear-gradient(160deg,#294971,#0b1a2c 52%,#1f3b5e);box-shadow:inset 0 0 0 4px #c9a24a,inset 0 0 0 7px #000;filter:drop-shadow(0 0 22px #ffd97a66) drop-shadow(0 22px 30px #000);
  animation:pack-idle 2.6s ease-in-out infinite}
.hero-pack.painted{background:none;box-shadow:none;clip-path:none}
.hero-pack.painted img{width:100%;height:100%;object-fit:contain}
.hero-pack:hover{scale:1.03}
.hero-pack b{font:800 21px var(--display);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 0 #000}
.hero-pack small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d8cfb6}
.pack-crest{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 4px 10px #000)}
.pack-foil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff40 45%,transparent 60%);background-size:260% 100%;animation:foil 2.8s linear infinite}
@keyframes foil{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes pack-idle{50%{translate:0 -10px;rotate:1.5deg}}
.phase-charging .hero-pack{animation:pack-shake .11s linear infinite,pack-charge var(--charge,1s) ease-in forwards}
.q3.phase-charging .hero-pack{--charge:1.3s}
.q4.phase-charging .hero-pack{--charge:1.7s;animation:pack-shake-big .09s linear infinite,pack-charge var(--charge) ease-in forwards}
@keyframes pack-shake{0%,100%{translate:-3px 0;rotate:-2deg}50%{translate:3px 1px;rotate:2deg}}
@keyframes pack-shake-big{0%,100%{translate:-6px 1px;rotate:-4deg}50%{translate:6px -1px;rotate:4deg}}
@keyframes pack-charge{from{scale:1;filter:drop-shadow(0 0 22px #ffd97a66) drop-shadow(0 22px 30px #000)}to{scale:1.16;filter:drop-shadow(0 0 40px var(--c)) drop-shadow(0 0 90px var(--c)) brightness(1.5)}}
.pack-flash{position:relative;width:200%;height:200%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--c) 70%,#fff) 22%,transparent 62%);animation:pack-flash .5s ease-out forwards}
@keyframes pack-flash{from{opacity:0;scale:.3}30%{opacity:1}to{opacity:0;scale:1.5}}
.pack-sparks{position:relative;width:0;height:0;pointer-events:none}
.pack-sparks i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;background:color-mix(in srgb,var(--c) 70%,#fff);box-shadow:0 0 10px var(--c);animation:spark 1.2s cubic-bezier(.1,.7,.3,1) var(--delay) both}
@keyframes spark{from{transform:translate(-50%,-50%) rotate(var(--a)) translateX(0);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d));opacity:0}}
.q4 .pack-sparks i{animation-duration:1.6s}
.flip-card{width:min(80vw,300px);perspective:1200px;animation:card-rise .45s cubic-bezier(.2,1.3,.4,1) calc(var(--i,0)*.38s) both}
@keyframes card-rise{from{scale:.6;opacity:0}}
.flip-inner{position:relative;transform-style:preserve-3d;animation:card-turn .9s cubic-bezier(.3,1.25,.5,1) calc(.2s + var(--i,0)*.38s) both}
@keyframes card-turn{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
.flip-front,.flip-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-front.reveal-card{animation:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#000),0 0 40px color-mix(in srgb,var(--c) 60%,transparent),0 18px 40px #000c}
.q4 .flip-front.reveal-card{animation:legend-glow 1.8s ease-in-out infinite}
@keyframes legend-glow{50%{box-shadow:inset 0 0 0 3px #ffd97a,0 0 70px #ffb73a,0 18px 40px #000c}}
.flip-back{position:absolute;inset:0;display:grid;place-items:center;transform:rotateY(180deg);border-radius:16px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#112742 0 10px,#0d1e32 10px 20px);box-shadow:inset 0 0 0 4px #c9a24a}
.flip-back.painted{background:none;box-shadow:none;border:0}.flip-back.painted img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.pack-stage footer{display:grid;justify-items:center;gap:10px;min-height:60px}
.pack-hint{font:700 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#d8cfb6;animation:hint-pulse 1.6s ease-in-out infinite}
@keyframes hint-pulse{50%{opacity:.45}}
.unlock-banner{padding:7px 26px;font:800 17px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#2b1805;background:linear-gradient(#ffe49c,#d8942c);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);animation:pop-in .4s cubic-bezier(.2,1.6,.4,1) .9s both}
@media (prefers-reduced-motion:reduce){.pack-rays,.hero-pack,.pack-foil,.flip-card,.flip-inner,.unlock-banner,.pack-hint{animation:none!important}}


/* Heldenpack mit mehreren Karten: nebeneinander, nacheinander aufgedeckt; neue Helden markiert. */
.flip-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,1.6vw,16px);width:100%}
.multi .pack-arena{width:min(96vw,640px)}
.flip-card.compact{width:min(30vw,190px)}
.flip-card.compact .reveal-card{position:relative;gap:4px;padding:10px 6px 10px}
.flip-card.compact .reveal-art{width:100%;height:clamp(90px,24vw,180px)}
.flip-card.compact h3{font-size:clamp(14px,3.6vw,20px)}
.flip-card.compact small{font-size:clamp(9px,2.4vw,11px);letter-spacing:.06em}
.flip-new{position:absolute;top:-10px;left:50%;translate:-50% 0;z-index:2;padding:3px 10px;border-radius:999px;background:linear-gradient(#f6d27a,#c8902f);color:#2a1804;font:800 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 10px #000a}
.pack-status{max-width:min(92vw,560px)}
/* Knopf „Heldenpack“ unter Helden: Anzahl bereit oder Fortschritt bis zum nächsten Pack. */
.pack-button{position:relative;overflow:hidden}
.pack-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#2a1804;color:#ffe7a6;font:800 12px var(--ui)}
.pack-pct{font:700 11px var(--ui);opacity:.85}
.pack-button .pack-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.pack-bar{display:block;height:6px;margin-top:5px;border-radius:3px;background:#0006;overflow:hidden}
.pack-bar>i{display:block;height:100%;background:linear-gradient(90deg,#c8902f,#f6d27a)}
.flip-card.compact .g-rarity{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(8px,2.2vw,11px);padding:2px 6px;letter-spacing:.04em}
/* ------------------------------------------------------------------ Weltkarte als Pergament auf dem Kartentisch */
.g-map{background:radial-gradient(ellipse at 50% 20%,#4a3420,#160e07 72%),#120b06}
.g-map::before{opacity:.18;background:repeating-linear-gradient(92deg,transparent 0 22px,#00000030 22px 24px,transparent 24px 61px)}
.map-world{padding:4px clamp(10px,2vw,28px) 12px;scroll-behavior:smooth}
.world-sheet{position:relative;width:min(100%,calc((100vh - 330px) * 1.7778),1560px);min-width:980px;aspect-ratio:16/9;margin:0 auto;border-radius:5px;overflow:hidden;
  box-shadow:0 0 0 2px #2a1a0c,0 0 0 6px #6a4a26,0 0 0 8px #2a1a0c,0 24px 60px #000e;transform:rotate(-.25deg)}
.world-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px #5a3a1488,inset 0 0 14px #3a240c99}
.world-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-text{font-family:var(--display)}
.map-title{font-size:34px;font-weight:800;letter-spacing:2px}
.map-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-style:italic;font-weight:600}
.compass-n{font-size:20px;font-weight:800}
.map-route{fill:none;stroke:#4a3420;stroke-width:4;stroke-dasharray:1 12;stroke-linecap:round;opacity:.8}
.map-route.walked{stroke:#a3281e;stroke-width:4.5;stroke-dasharray:16 9;opacity:.92}
.map-fog circle{fill:#efe5cf;opacity:.92}
.world-sheet .map-zone{position:absolute;z-index:2;translate:-50% -47px;width:156px;gap:2px;color:#3a2814}
.world-sheet .map-zone:hover:not(:disabled){transform:translateY(-4px)}
.world-sheet .zone-medal{width:88px;height:88px;border:3px solid #3a2814;background:#e9d8ae;box-shadow:0 0 0 3px #c9a24a,0 0 0 5px #3a2814,0 8px 14px #0007}
.world-sheet .map-zone.chosen .zone-medal{transform:scale(1.1);box-shadow:0 0 0 3px #d9b45a,0 0 0 6px #a3281e,0 0 28px #a3281e99,0 8px 14px #0007}
.world-sheet .map-zone.locked{opacity:1}
.world-sheet .map-zone.locked .zone-medal{filter:sepia(.7) grayscale(.6) brightness(.85)}
.world-sheet .zone-lock{color:#3a2814;filter:drop-shadow(0 0 3px #f3e6c4)}
.zone-ribbon{position:relative;margin-top:5px;padding:3px 16px 4px;border:1.5px solid #3a2814;background:linear-gradient(#f6e9c8,#dcc493);clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);filter:drop-shadow(0 2px 1px #0005)}
.world-sheet .zone-ribbon strong{margin:0;font:700 12.5px var(--display);letter-spacing:.04em;color:#3a2814;white-space:nowrap;text-shadow:none}
.world-sheet .map-zone small{font-size:10.5px;font-weight:700;color:#3a2814;text-shadow:0 0 4px #f3e6c4,0 0 3px #f3e6c4,0 0 2px #f3e6c4}
.world-sheet .map-zone.locked small{color:#5a4a34}
.world-sheet .map-zone .zone-stars{color:#7a4a10}
.world-sheet .map-zone .zone-stars svg{fill:#d99a2a;color:#7a4a10}
.map-pin{position:absolute;top:-36px;left:50%;translate:-50% 0;z-index:3;line-height:0;animation:pin-bob 1.4s ease-in-out infinite}
.map-pin svg{fill:#c8382a;color:#3a0e08;filter:drop-shadow(0 4px 2px #0008)}
@keyframes pin-bob{50%{translate:-50% -6px}}
@media (prefers-reduced-motion:reduce){.map-pin{animation:none}}

/* Spielmodi: Modifikatoren, Turm, Tagesprüfung */
.affix-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.affix{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:7px;padding:6px 11px;border-radius:10px;border:1px solid #000;background:linear-gradient(#3a2422,#1a0f0e);box-shadow:inset 0 0 0 1px #ff9a7a44;color:#ffd8cc;font:700 12px var(--ui)}
.affix svg{color:#ff9a7a;grid-row:span 2}
.affix small,.map-card .affix small{grid-column:2;display:block;font:500 11.5px/1.35 var(--ui);letter-spacing:0;color:#d9c3b8}
.affix-list.compact{margin:0;gap:6px;justify-content:center}
.affix-list.compact .affix{display:inline-flex;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px}
.battle-affixes{position:absolute;z-index:40;left:50%;translate:-50% 0;top:clamp(62px,7.6cqw,96px);pointer-events:auto;max-width:70%}
.mode-blocked{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0;padding:7px 12px;border-radius:10px;border:1px solid #000;background:#1d1410e6;color:#ffd9a0;font:600 12px var(--ui)}
.mode-detail{padding-top:clamp(10px,3vh,40px);align-content:center;flex:1}
.mode-card .map-enemies{gap:14px}
.mode-card .map-enemy small{max-width:96px;text-align:center}
.mode-card h3{display:flex;align-items:center;gap:9px}
.mode-card h3 svg{color:var(--gold);flex:none}
.mode-card.locked{grid-template-columns:1fr;max-width:720px;justify-self:center}
.mode-card.locked h3 svg{color:#8496ab}
.mode-card .milestone{color:#ffd36a}
.daily-rule{margin-top:4px;padding:8px 12px;border-radius:10px;background:#060d1699;border-left:3px solid var(--gold)}
.daily-rule b{color:#ffe9b4}
.daily-focus{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:8px 12px;border-radius:10px;background:#0b1a1299;border-left:3px solid #7fd45a;font-size:13px}
.daily-focus svg{flex:none;margin-top:2px;color:#9fe07a}
.daily-focus b{color:#d6f5c0}
.mode-card.daily.done{box-shadow:inset 0 0 0 2px #3878c6,0 14px 34px #000b}
.streak{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:12px}
.streak i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:#172434;box-shadow:inset 0 0 0 1px #ffffff1a}
.streak i.on{background:radial-gradient(circle at 40% 35%,#fff1b8,#e8a63a);box-shadow:0 0 10px #ffd36a88}
.streak i.next{background:#3a3220;box-shadow:inset 0 0 0 2px #ffd36a;animation:streak-pulse 1.6s ease-in-out infinite}
.streak span{margin-left:6px;font:600 12px var(--ui);color:#d9d3bd}
@keyframes streak-pulse{50%{box-shadow:inset 0 0 0 2px #ffd36a,0 0 12px #ffd36a}}
.tower-ladder{display:flex;justify-content:center;gap:clamp(6px,1.4vw,18px);list-style:none;margin:0;padding:4px 0 0}
.tower-ladder li{position:relative;display:grid;justify-items:center;gap:4px}
.tower-ladder li+li::before{content:"";position:absolute;right:calc(50% + 29px);top:29px;width:clamp(6px,1.4vw,18px);height:4px;background:#000;border-radius:2px}
.tower-ladder small{font:700 10px var(--ui);letter-spacing:.14em;color:#8496ab}
.tower-ladder li.done .stage-node{background:linear-gradient(#ffe49c,#d8942c);color:#2b1805;box-shadow:inset 0 0 0 2px #fff0b8}
.tower-ladder li.boss .stage-node{background:linear-gradient(#a24a3c,#3a1410);color:#ffd8cc;border-color:#2a0c08}
.tower-ladder li.elite .stage-node{background:linear-gradient(#7a58a0,#2a1a3a);color:#f0e0ff}
.tower-ladder li.done.boss .stage-node,.tower-ladder li.done.elite .stage-node{background:linear-gradient(#ffe49c,#d8942c);color:#2b1805}
.tower-ladder li.chosen .stage-node{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 4px #ffd97a88,0 0 26px #ffd97a99;transform:scale(1.14)}
.tower-ladder li.chosen small{color:#ffe9b4;margin-top:5px}
.tower-ladder li.locked .stage-node{filter:brightness(.55)}
.reward-crown{color:#ffd36a;flex:none}

/* Expeditionen */
.expedition-scene{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}
.expedition-scene .scene-body{display:grid;gap:18px;align-content:start;padding-top:0}
.expedition-scene .codex-count svg{color:var(--gold)}
.expedition-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.expedition-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(#1b2e44,#0b141f);box-shadow:inset 0 0 0 2px #49668b,0 10px 24px #000a}
.expedition-card .g-bust,.expedition-hero .g-bust{flex:none;width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#385a84,#0f1c2c);box-shadow:0 0 0 2px #7a6a3a}
.expedition-card.ready{box-shadow:inset 0 0 0 2px var(--gold),0 0 26px #e8b95577,0 10px 24px #000a;animation:hint-pulse 2.4s ease-in-out infinite}
.expedition-card.empty{grid-template-columns:auto 1fr;min-height:88px;color:#647a96;border-style:dashed;border-color:#314359;background:#080e1588;box-shadow:none;font:700 13.5px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.expedition-info{display:grid;gap:4px;min-width:0}
.expedition-info>small{display:flex;align-items:center;gap:6px;font:700 9.5px var(--ui);letter-spacing:.18em;color:var(--gold)}
.expedition-info>small .zone-emblem{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid #000}
.expedition-info strong{font:800 17px var(--display);letter-spacing:.04em;color:#fff0c4}
.expedition-time,.expedition-loot{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;font:600 12px var(--ui);color:#d9d3bd}
.expedition-card.ready .expedition-time{color:#ffe49c;font-weight:800}
.expedition-loot{color:#a0afc1;font-size:11px}.expedition-loot svg{color:var(--gold);margin-left:4px}.expedition-loot svg:first-child{margin-left:0}
.expedition-new{display:grid;gap:14px;justify-items:start;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(#152436,#091019);box-shadow:inset 0 0 0 2px #354961,0 10px 24px #000a}
.expedition-new h2{font:800 20px var(--display);letter-spacing:.05em;color:var(--gold-hi)}
.expedition-step{display:grid;gap:8px;width:100%}
.expedition-step>small{font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.expedition-heroes,.expedition-zones{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}
.expedition-hero,.expedition-zone{flex:none;display:grid;justify-items:center;gap:3px;width:96px;padding:8px 6px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(#213348,#0f1824);box-shadow:inset 0 0 0 2px #354961;color:#e8dfc4;font-family:inherit;cursor:pointer;transition:transform .15s}
.expedition-hero:hover,.expedition-zone:hover{transform:translateY(-3px)}
.expedition-hero.on,.expedition-zone.on{background:linear-gradient(#2e4560,#112235);box-shadow:inset 0 0 0 2px var(--gold),0 0 18px #e8b95555}
.expedition-hero .g-bust{width:52px;height:52px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#7a6a3a) 70%,#000)}
.expedition-hero b,.expedition-zone b{font:700 12px/1.2 var(--ui);text-align:center}
.expedition-hero small,.expedition-zone small{font:500 10px/1.2 var(--ui);color:#a0afc1;text-align:center}
.expedition-hero.add{align-content:center;color:#8496ab;border-style:dashed;background:#080e1588;box-shadow:none}
.expedition-zone{width:118px}
.expedition-zone small.zone-foe{display:inline-flex;gap:3px;align-items:center;color:#8f9db0}
.expedition-zone small.zone-foe.good{color:#9fe07a}
.g-chip.good{border-color:#5f9e4f;color:#c8f0b0}
.expedition-zone .zone-emblem{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:0 0 0 2px #7a6a3a}
.expedition-step .g-segmented{justify-self:start}
.expedition-preview{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.roster-card.away{opacity:.55}
.roster-card.away small{display:inline-flex;align-items:center;gap:4px;color:#ffd9a0}
@media(max-width:820px) and (orientation:portrait){
  .battle-affixes{position:static;order:2;translate:none;max-width:none}
}
@media(max-width:820px){
  .tower-ladder li:nth-child(n+6){display:none}
  .expedition-card{grid-template-columns:auto minmax(0,1fr);padding:10px}
  .expedition-actions{grid-column:1/-1;display:grid}
  .expedition-new{padding:12px}
}
@media(max-width:640px){
  .g-dock{gap:4px;padding:0 6px 8px}
  .g-dock-item{width:auto;flex:1 1 0;min-width:0}
  .g-dock-icon{width:44px;height:44px;border-radius:14px}
  .g-dock-label{font-size:9px;letter-spacing:.04em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .map-head .g-segmented{order:3;width:100%;display:grid;grid-template-columns:1fr 1fr}
  .expedition-card.empty{min-height:52px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){.streak i.next,.expedition-card.ready{animation:none}}

/* Gegenstandsstufe und Seltenheit */
.item-level{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 5px;border-radius:6px;border:1px solid #000;background:#070c13e6;color:var(--c,#e6e2d6);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#e6e2d6) 45%,transparent);font:800 10px/1 var(--ui);letter-spacing:.02em}
.bag-tile>.item-level{position:absolute;left:6px;top:6px}
.picker-item>.item-level{position:absolute;left:6px;top:6px;z-index:1}
.bag-tile.q4,.picker-item.q4{box-shadow:inset 0 0 0 1px #ff9a2a66,0 0 16px #ff9a2a33}
.bag-tile.q4 b,.picker-item.q4 b{color:#ffc27a}
.bag-tile.q3 b,.picker-item.q3 b{color:#d9b0ff}
.bag-tile.q2 b,.picker-item.q2 b{color:#9fd0ff}
.bag-tile.q1 b,.picker-item.q1 b{color:#b4ec98}
.loot-row.q4{--c:var(--q4)}


/* ============================================================ Handy im Hochformat: spielen ohne Scrollen
   Ziel: ab 360 × 640 sichtbarer Fläche passen Kampf, Karte, Beute, Expeditionen und der Charakterbogen auf einen Bildschirm.
   Nur lange Listen (Inventar, Bestiarium) scrollen – und dann in ihrem eigenen Bereich, Kopf und Filter bleiben stehen. */
.game-app{grid-template-rows:calc(var(--hud) + env(safe-area-inset-top,0px)) minmax(0,1fr) calc(var(--dock) + env(safe-area-inset-bottom,0px))}
.g-hud{padding-top:env(safe-area-inset-top,0px)}
.g-dock{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
@media(max-width:820px) and (orientation:portrait){
  .game-app{--hud:50px;--dock:68px}
  .g-avatar{width:40px;height:40px}
  .g-res{height:30px;font-size:12.5px;padding:0 9px 0 6px}
  .g-dock{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .g-dock-item{gap:3px}
  .g-dock-icon{width:44px;height:44px;border-radius:14px}
  

  /* Kampf: alles in einer Spalte, die Aktion sitzt unten über dem Dock */
  .battle-scene{overflow-y:auto}
  .battle-wrap{min-height:100%;gap:8px;padding:6px 8px 8px}
  .battle-top{gap:6px}
  .map-button{padding:0;width:42px;height:42px;justify-content:center;border-radius:12px}
  .encounter-plate{padding:4px 10px 5px;border-width:2px;border-radius:10px}
  .encounter-plate small{font-size:8.5px;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .encounter-plate h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plate-status{font-size:8.5px;letter-spacing:.14em;margin-top:0}
  .battle-right{gap:6px}
  .battle-right .g-round{width:38px;height:38px}
  .battle-right .speed-toggle{min-width:38px;padding:0 7px}
  .foe-preview{gap:8px;padding:5px 8px;border-radius:12px}
  .foe-preview>small{writing-mode:vertical-rl;rotate:180deg;font-size:8.5px;letter-spacing:.16em}
  .foe{width:56px}
  .foe-art{width:44px;height:44px;padding:2px;border-radius:10px}
  .foe b{font-size:9.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-bottom{margin-top:auto;gap:8px}
  .party-bar{gap:6px}
  .party-slot{flex-direction:row;align-items:center;gap:6px;padding:6px;border-radius:12px;text-align:left;min-height:56px}
  .party-slot.active{transform:translateY(-2px)}
  .party-slot .g-bust{width:36px;height:36px;box-shadow:0 0 0 1.5px #7a6a3a}
  .party-info{justify-items:stretch;gap:2px}
  .party-info strong{font-size:10.5px;letter-spacing:.02em}
  .party-stats{font-size:10px;gap:2px}.party-stats svg{width:11px;height:11px;margin-left:2px}
  .party-swap{top:-7px;right:-5px;width:24px;height:24px}
  .party-swap svg{width:12px;height:12px}
  .party-empty{min-height:56px;flex-direction:row;justify-content:center;gap:4px;padding:6px;font-size:10.5px}
  .party-empty svg{width:16px;height:16px;flex:none}
  .action-panel{gap:8px;padding:0;position:static;background:none}
  .reward-chips{gap:5px}
  .g-chip{min-height:24px;padding:0 9px;font-size:11.5px;gap:4px}
  .g-chip .item-art{width:20px;height:20px}
  .action-panel .g-btn-xl{min-height:52px;font-size:15px;padding:0 18px}
  .gear-hint{padding:6px 10px;font-size:11px}
  .combat-actions{justify-content:space-between}
  .combat-actions .g-btn{flex:1;width:auto}
  .lobby-code{padding:6px 10px}.lobby-code b{font-size:19px}
}
/* Niedrige Handys (z. B. 360 × 640 mit Browserleisten): Zusatzzeilen weiter verdichten */
@media(max-width:820px) and (orientation:portrait) and (max-height:700px){
  .game-app{--hud:46px;--dock:62px}
  .g-dock-icon{width:40px;height:40px;border-radius:13px}
  .g-dock-label{font-size:8.5px}
  .encounter-plate small{display:none}
  .foe{width:50px}.foe-art{width:38px;height:38px}
  .party-slot,.party-empty{min-height:50px;padding:5px}
  .party-slot .g-bust{width:32px;height:32px}
  .action-panel .g-btn-xl{min-height:46px;font-size:14px}
}
@media(max-width:820px) and (orientation:portrait){
  .battle-right .speed-toggle{width:auto;min-width:38px;padding:0 8px}

  /* Abenteuerkarte: verschiebbarer Kartenausschnitt, darunter knapp die gewählte Stufe, Knopf immer sichtbar */
  .g-map{overflow:hidden}
  .map-head{flex:none;gap:6px 10px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 6px}
  .map-head>div:first-child{flex:1;min-width:0}
  .map-head small{font-size:8.5px;letter-spacing:.18em}
  .map-head h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-head .g-round{width:38px;height:38px}
  .map-head .g-segmented{order:3;width:100%;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding:2px}
  .map-head .g-segmented button{min-height:32px;padding:0 4px;font-size:9.5px;letter-spacing:.03em;line-height:1.1}
  .map-world{flex:1 1 0;min-height:150px;overflow:auto;padding:6px;scroll-behavior:auto}
  .world-sheet{width:820px;min-width:0;transform:none}
  .world-sheet .map-zone{width:132px;translate:-50% -38px}
  .world-sheet .zone-medal{width:68px;height:68px}
  .world-sheet .zone-ribbon{padding:2px 12px 3px}
  .world-sheet .zone-ribbon strong{font-size:11px}
  .world-sheet .map-zone small{font-size:9.5px}
  .map-pin{top:-30px}.map-pin svg{width:26px;height:26px}
  .map-detail{flex:none;gap:8px;padding:6px 10px 4px}
  .mode-detail{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;padding-top:8px}
  .stage-trail{padding:2px 0 16px}
  .stage-node{width:38px;height:38px;font-size:15px;border-width:2px}
  .stage-node svg{width:17px;height:17px}
  .stage-trail li+li::before{top:18px;height:4px}
  .stage-trail li.chosen .stage-node{transform:scale(1.08)}
  .stage-trail li.chosen .stage-label b{font-size:9.5px}
  .stage-label .g-stars{display:none}
  .chest-track{padding:4px 10px 14px;gap:10px}
  .chest-total{font-size:11px}.chest-total b{font-size:15px}
  .chest-bar{height:8px}
  .chest-mark{width:26px;height:26px}.chest-mark svg{width:13px;height:13px}
  .chest-mark small{font-size:9px;margin-top:0}
  .map-card{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:10px 12px;border-width:2px;border-radius:13px}
  .map-card small{font-size:8.5px;letter-spacing:.14em}
  .map-card h3{font-size:16px;margin:1px 0 3px}
  .map-card p{font-size:12.5px;line-height:1.4}
  .map-card .stage-copy>p:first-of-type{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mode-card .stage-copy>p:first-of-type{display:block;overflow:visible}
  .stage-done{margin-top:6px;font-size:11.5px!important}
  .stage-power{margin-top:5px;font-size:11px!important}
  .stage-reward{margin-top:6px;padding:5px 8px;gap:4px 10px;font-size:12px}
  .stage-reward>span{font-size:8.5px}
  .stage-reward .reward-item{font-size:11px}
  .map-card .map-enemies{flex-direction:column;flex-wrap:nowrap;gap:4px;align-self:center}
  .map-card.free .map-enemies,.mode-card .map-enemies{flex-direction:row;flex-wrap:wrap;grid-column:1/-1;justify-content:flex-start}
  .map-enemy{width:auto}
  .map-enemy>span{width:46px;height:46px;padding:2px;border-radius:10px;box-shadow:inset 0 0 0 2px #445f7f}
  .map-enemy small{display:none}
  .mode-card .map-enemy small{display:block;max-width:64px;font-size:9px}
  .free-controls{gap:8px;margin-top:6px}
  .free-controls .g-segmented button{min-height:32px;padding:0 10px;font-size:10.5px}
  .stepper button{width:32px;height:32px}.stepper span{min-width:84px}.stepper b{font-size:15px}
  .stage-reward.free{font-size:11px;line-height:1.35}
  .map-foot{flex:none;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .map-foot .g-btn{width:100%;min-height:48px}
  .tower-ladder{gap:4px}
  .affix{padding:4px 8px;font-size:11px}.affix small,.map-card .affix small{font-size:10.5px}
}
@media(max-width:820px) and (orientation:portrait){
  /* Beutefenster: knappe Zeilen, Hauptaktion oben, Nochmal und Weiter nebeneinander */
  .g-backdrop{padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .g-modal{max-height:100%}
  .results .g-modal-head{padding:10px 14px 4px}
  .results.victory .g-modal-head h2,.results .g-modal-head h2{font-size:24px}
  .results-crest{width:48px;height:48px;border-width:2px}
  .results-crest svg{width:26px;height:26px}
  .results .g-modal-body{gap:8px;padding:0 12px 10px}
  .reward-list{gap:6px}
  .loot-row{gap:9px;padding:6px 10px;border-radius:10px}
  .loot-row b{font-size:13px}
  .loot-row small{font-size:11px;line-height:1.3}
  .loot-row .g-bust,.reward-icon{width:36px;height:36px}
  .reward-icon svg{width:18px;height:18px}
  .loot-row .item-art{width:44px;height:44px}
  .reward-item .item-art{width:40px;height:40px}
  .reward-amount{font-size:17px}
  .reward-stars{min-width:36px}.reward-stars svg{width:15px;height:15px}
  .results .g-modal-foot{display:grid;grid-template-columns:1fr;gap:8px;padding:8px 12px 12px}
  .results .g-modal-foot:has(>:nth-child(3)){grid-template-columns:1fr 1fr}
  .results .g-modal-foot .g-btn{width:100%;justify-content:center;min-height:44px}
  .results .g-modal-foot .g-btn-lg{grid-column:1/-1;order:-1;min-height:50px}
}
@media(max-width:820px) and (orientation:portrait) and (min-height:760px){
  /* Hohe Handys: der Platz geht an größere Gruppenkarten und Gegnerbilder */
  .foe{width:64px}.foe-art{width:54px;height:54px}
  .party-slot{flex-direction:column;gap:4px;min-height:96px;padding:8px 6px;text-align:center}
  .party-slot .g-bust{width:48px;height:48px}
  .party-info{justify-items:center}
  .party-info strong{font-size:11.5px;max-width:100%}
  .party-info .g-meter{width:100%}
  .party-empty{min-height:96px;flex-direction:column}
  .action-panel .g-btn-xl{min-height:58px;font-size:16px}
}
@media(max-width:820px) and (orientation:portrait){
  .reward-item .g-rarity{display:none}
  .loot-row .g-rarity{font-size:9px;padding:2px 7px}
}
@media(max-width:820px) and (orientation:portrait) and (max-height:700px){.results-crest{display:none}}

/* Helden auf dem Handy: Heldenleiste oben, darunter Umschalter Ausrüstung / Werte / Fertigkeiten / Training */
.hero-switch{display:none}
@media(max-width:820px) and (orientation:portrait){
  .heroes-scene{overflow:hidden;gap:8px;padding:8px}
  .roster-rail{display:flex;align-items:center;flex:none;border-width:2px;border-radius:13px}
  .roster-rail header{flex:none;padding:5px 0 5px 6px}
  .roster-rail h2{display:none}
  .roster-rail header .g-btn{min-height:46px;padding:0 9px;flex-direction:column;gap:0;font-size:11px;line-height:1.1}
  .pack-word{display:none}
  .roster-rail ul{flex:1;min-width:0;padding:5px 6px;gap:6px}
  .rail-hero{width:122px;padding:4px 6px 4px 4px;gap:6px;border-radius:11px}
  .rail-hero .g-bust{width:36px;height:36px}
  .rail-text b{font-size:11px}.rail-text small,.rail-lock{font-size:9.5px}
  .rail-party{top:3px;right:4px;width:12px;height:12px}
  .hero-switch{display:block;flex:none}
  .hero-switch .g-segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;padding:2px}
  .hero-switch .g-segmented button{min-height:32px;padding:0 3px;font-size:9.5px;letter-spacing:.02em}
  .heroes-scene.show-gear .hero-panel,.heroes-scene.show-panel .hero-stage{display:none}
  .hero-stage{flex:1 1 0;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:8px 8px 10px;border-width:2px}
  .hero-title{gap:1px}
  .hero-title .g-rarity{font-size:8.5px;padding:1px 7px}
  .hero-title h2{font-size:19px}
  .hero-title small{font-size:9.5px;letter-spacing:.1em}
  .hero-dots{margin-top:3px;gap:5px}.hero-dots i{width:6px;height:6px}
  .hero-nav{top:8px;width:34px;height:34px}
  .doll{min-height:0;gap:6px}
  .doll-figure{height:auto}
  .slot-col{justify-content:space-between;gap:5px}
  .gear-slot{width:52px;height:58px;padding:3px;border-radius:11px}
  .gear-slot .slot-art,.gear-slot .item-art{width:34px;height:34px}
  .gear-slot small{font-size:7.5px;letter-spacing:.02em}
  .slot-row{gap:8px}
  .hero-quote{display:none}
  .hero-actions{gap:6px;flex-wrap:nowrap}
  .hero-actions .g-btn{flex:1 1 auto;min-width:0;min-height:38px;padding:0 8px;font-size:10.5px;letter-spacing:.04em}
  .hero-actions .g-btn svg{width:15px;height:15px}
  .hero-actions .g-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-actions .bag-link{display:none}
  .hero-panel{flex:1 1 0;min-height:0;max-height:none;border-width:2px}
  .hero-panel .g-tabs{display:none}
  .panel-body{overflow:auto;padding:10px 12px 14px;border-radius:13px}
  .hit-card{padding:8px 12px}.hit-card b{font-size:24px}
  .stat-list div{padding:5px 8px}
  .skill-list article{padding:9px 11px}.skill-list h3{font-size:15px}.skill-list p{font-size:12px;line-height:1.4}
  .train-card{padding:9px 11px}
}
@media(max-width:820px) and (orientation:portrait) and (max-height:700px){
  .hero-title .g-rarity{display:none}
  .gear-slot{width:46px;height:50px}
  .gear-slot .slot-art,.gear-slot .item-art{width:28px;height:28px}
  .gear-slot small{font-size:7px}
  .hero-actions .g-btn{min-height:34px}
}

/* Expeditionen auf dem Handy: freie Plätze als schmale Leiste, Auswahl in waagerechten Reihen */
@media(max-width:820px) and (orientation:portrait){
  .expedition-scene .scene-head{padding:8px 10px 4px;gap:8px;flex-wrap:nowrap;justify-content:space-between}
  .expedition-scene .scene-head h1{font-size:20px}
  .expedition-scene .scene-head small{font-size:8.5px;letter-spacing:.14em}
  .expedition-scene .codex-count{font-size:12px;padding:5px 10px;white-space:nowrap}
  .expedition-scene .scene-body{gap:8px;padding:0 8px 8px}
  .expedition-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .expedition-card{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:6px 8px;border-width:2px;border-radius:12px}
  .expedition-card .g-bust{width:40px;height:40px}
  .expedition-info{gap:2px}
  .expedition-info>small{font-size:8.5px;letter-spacing:.12em}
  .expedition-info strong{font-size:14px}
  .expedition-time{font-size:11px}
  .expedition-loot{font-size:10px;gap:3px}
  .expedition-actions{grid-column:auto;display:block}
  .expedition-actions .g-btn{min-height:36px;padding:0 10px;font-size:11px}
  .expedition-card.empty{grid-column:auto;display:flex;justify-content:center;gap:6px;min-height:38px;padding:4px 6px;font-size:9.5px;letter-spacing:.06em}
  .expedition-card.empty svg{width:16px;height:16px}
  .expedition-new{gap:6px;padding:8px 10px 10px;border-width:2px;border-radius:13px;justify-items:stretch}
  .expedition-new h2{font-size:16px}
  .expedition-step{gap:3px}
  .expedition-step>small{font-size:8.5px;letter-spacing:.14em}
  .expedition-heroes,.expedition-zones{gap:6px;padding:2px 2px 4px}
  .expedition-hero,.expedition-zone{width:84px;padding:5px 4px;gap:1px;border-radius:11px}
  .expedition-hero .g-bust{width:38px;height:38px}
  .expedition-hero b,.expedition-zone b{font-size:11px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .expedition-hero small,.expedition-zone small{font-size:9px}
  .expedition-zone{width:104px}
  .expedition-zone .zone-emblem{width:34px;height:34px}
  .expedition-step .g-segmented{justify-self:stretch;display:grid;grid-template-columns:repeat(3,1fr)}
  .expedition-step .g-segmented button{min-height:32px;padding:0 6px;font-size:10.5px}
  .expedition-preview{gap:5px}
  .expedition-preview .g-chip{min-height:24px;font-size:11px}
  .expedition-preview .g-fine{display:none}
  .expedition-new .mode-blocked{padding:5px 10px;font-size:11px}
  .expedition-new>.g-btn{width:100%;min-height:46px}
}
@media(max-width:820px) and (orientation:portrait){
  .expedition-scene .scene-head small{display:none}
  .expedition-card.empty span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .expedition-hero small,.expedition-zone small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Inventar und Bestiarium auf dem Handy: Kopf und Filter stehen, nur die Liste scrollt; Details als Blatt von unten */
.sheet-close,.sheet-scrim{display:none}
@media(max-width:820px) and (orientation:portrait){
  .inventory-scene{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
  .inventory-scene .scene-head{flex-wrap:nowrap;gap:6px;padding:8px 8px 6px}
  .inventory-scene .scene-head .g-segmented{flex:none;padding:2px}
  .inventory-scene .scene-head .g-segmented button{min-height:32px;padding:0 8px;font-size:9.5px;letter-spacing:.04em}
  .scene-head .search{min-width:0;height:36px;padding:0 9px;gap:5px}
  .scene-head .search input{width:100%;min-width:0;font-size:13px}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:0 8px 6px;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-row button{flex:none;min-height:28px;padding:0 10px;font-size:9.5px;letter-spacing:.05em}
  .filter-sep{flex:none}
  .inventory-scene .scene-body{overflow-y:auto;overflow-x:hidden;padding:0 8px 10px}
  .inventory-scene .scene-note{display:none}
  .bag-layout,.bag-layout.has-detail{display:block}
  .bag-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px;padding:8px 0 4px}
  .bag-tile{gap:3px;padding:16px 3px 6px;border-radius:11px}
  .bag-tile .item-art{width:42px;height:42px}
  .bag-tile b{font-size:10px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bag-tile>.item-level{left:4px;top:4px;min-width:18px;height:15px;font-size:9.5px}
  .tile-status{font-size:8.5px}
  .bag-detail.empty{display:none}
  .sheet-scrim{display:block;position:absolute;inset:0;z-index:19;border:0;padding:0;background:#000a;animation:fade-in .2s}
  .bag-layout.has-detail .bag-detail{position:absolute;left:0;right:0;bottom:0;z-index:20;max-height:82%;overflow-y:auto;gap:9px;padding:14px 12px 16px;border-radius:18px 18px 0 0;border-bottom:0;animation:sheet-up .26s cubic-bezier(.2,.9,.3,1)}
  .sheet-close{display:grid;position:absolute;top:10px;right:10px;z-index:2}
  .bag-detail-head{padding-right:34px}
  .bag-detail-head .item-art{width:60px;height:60px}
  .bag-detail-head h2{font-size:17px;margin:3px 0 1px}
  .bag-stats li{padding:4px 9px;font-size:12px}
  .wearers{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
  .wearer{padding:5px 8px 5px 5px;gap:7px}
  .wearer .g-bust{width:32px;height:32px}
  .wearer b{font-size:11.5px}.wearer small{font-size:10px}
  .shop-grid{gap:7px;padding:8px 0 4px}
  .shop-card{gap:6px 10px;padding:8px 10px;border-radius:12px}
  .shop-card .item-art{width:46px;height:46px}
  .shop-card h3{font-size:13.5px}.shop-card p{font-size:11.5px}.shop-card small{font-size:10px}
  .shop-card .g-btn{min-height:36px}
  .collection-head{padding:8px 0 2px;font-size:12px}

  .codex-scene .scene-head{padding:8px 10px 4px;gap:6px 10px}
  .codex-scene .scene-head h1{font-size:20px}
  .codex-scene .scene-head small{font-size:8.5px}
  .codex-scene .scene-body{padding:0 8px 10px}
  .codex-zone{margin-bottom:14px}
  .codex-zone>header{margin:4px 0 8px}
  .codex-zone h2{font-size:16px}
  .codex-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:7px}
  .codex-card{padding:20px 4px 8px;gap:2px;border-radius:12px}
  .codex-rank{top:5px;left:6px;font-size:8px}
  .codex-art{height:72px}
  .codex-card b{font-size:11px}.codex-card small{font-size:9.5px;letter-spacing:.02em}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.bag-detail,.sheet-scrim{animation:none!important}}
@media(max-width:820px) and (orientation:portrait){
  .hero-panel .stat-list{gap:4px}
  .hero-panel .stat-list div{padding:4px 8px}
  .hero-panel .stat-list dt{font-size:11px}.hero-panel .stat-list dd{font-size:12.5px}
  .hero-panel .hit-card{padding:6px 12px}.hero-panel .hit-card b{font-size:22px}
}
@media(max-width:820px) and (orientation:portrait){.expedition-card.empty{font-size:9px;letter-spacing:.02em}}
@media(max-width:820px) and (orientation:portrait){
  .expedition-new h2{display:none}
  .expedition-step{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px}
  .expedition-step>small{writing-mode:vertical-rl;rotate:180deg;font-size:8px;letter-spacing:.12em;white-space:nowrap}
}

/* ------------------------------------------------------------------ Android-App: Link auf dem Titel und Download-Seite /app */
.title-app{display:inline-flex;align-items:center;min-height:44px;gap:7px;margin-top:16px;padding:8px 16px;border-radius:999px;border:1px solid #000;background:#060d16cc;box-shadow:inset 0 0 0 1px #e8b95555;color:#ffe9b4;font:700 13px var(--ui);text-decoration:none}
.title-app svg{color:var(--gold)}
.title-app:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--gold),0 0 16px #e8b95544}
.app-page{overflow-y:auto;place-items:start center;padding:calc(12px + env(safe-area-inset-top,0px)) 0 calc(12px + env(safe-area-inset-bottom,0px))}
.app-page .title-bg{position:fixed}
.app-page::after{position:fixed}
.app-content{gap:10px;width:min(100%,640px);margin:auto}
.app-page .title-logo{font-size:clamp(46px,11vw,84px)}
.app-page .title-sub{margin-bottom:10px;letter-spacing:.32em;text-indent:.32em}
.app-card{display:grid;gap:12px;justify-items:center;width:100%;padding:20px clamp(14px,4vw,26px);border-radius:var(--public-radius);border:1px solid var(--public-border);text-align:left;background:linear-gradient(#14263bf2,#0e1a29f2);box-shadow:0 18px 50px #0009}
.app-download{width:min(100%,360px)}
.app-meta{margin:0;color:var(--muted);font-size:12.5px;text-align:center}
.app-status{display:flex;align-items:flex-start;gap:8px;margin:0;width:100%;padding:10px 12px;border-radius:12px;border:1px solid #000;background:#1d1410e6;color:#ffd9a0;font:600 13px/1.45 var(--ui)}
.app-status.good{background:#0a192ce6;color:#b4ec98}
.app-status svg{flex:none;margin-top:1px}
.app-steps{display:grid;gap:8px;width:100%;margin:4px 0 0;padding:0;list-style:none;counter-reset:step}
.app-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:start;padding:12px 0;border:0;background:none;box-shadow:none;counter-increment:step}
.app-steps li+li{border-top:1px solid var(--line)}
.app-steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#2b1805;font:800 15px var(--display);background:linear-gradient(#ffe49c,#d8942c);box-shadow:inset 0 1px 0 #fff7d6}
.app-steps b{font:700 14px var(--display);letter-spacing:.04em;color:#fff0c4}
.app-steps span{font-size:13px;line-height:1.45;color:#d9d3bd}
.app-card .g-fine{width:100%}
.app-card code{font-size:11px;color:#d9c48a}
.app-side{display:grid;justify-items:center;gap:10px}
.app-qr-box{display:grid;justify-items:center;gap:6px;margin:6px 0 0;padding:12px;border-radius:var(--public-radius);border:1px solid var(--public-border);background:#0e1a29f2;box-shadow:0 12px 30px #0006}
.app-qr{width:156px;height:156px;border-radius:6px}
.app-qr-box figcaption{display:inline-flex;align-items:center;gap:6px;color:#d9d3bd;font:600 12px var(--ui)}
.app-ios{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;max-width:460px;margin:0;color:#d9d3bd;font-size:13px;line-height:1.5}
.app-ios svg{color:var(--gold)}
.app-play{margin-top:4px}
.app-content{grid-template-columns:minmax(0,1fr);width:min(100%,960px)}
.app-page .title-sub{white-space:normal;letter-spacing:.24em;text-indent:.24em;font-size:clamp(11px,2.6vw,16px)}
.app-main{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px;width:100%;min-width:0}
.app-main .app-card{flex:1 1 320px;max-width:620px;min-width:0}
.app-main .app-side{flex:0 1 240px}
.app-main .app-qr-box{margin:0}
.app-card{grid-template-columns:minmax(0,1fr)}
.app-card>*{min-width:0}
.app-download{max-width:100%;justify-self:center;padding:0 18px;font-size:clamp(14px,4.2vw,18px)}
.app-steps span svg{vertical-align:-2px;color:var(--gold)}
/* Klassenvorteile */
.matchups{display:grid;gap:6px;margin:8px 0}
.matchups>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.matchups em{font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted);min-width:96px}
.matchup{display:inline-flex;flex-direction:column;padding:3px 8px;border-radius:8px;border:1px solid;background:#0006;font-size:12px;line-height:1.3}
.matchup small{color:var(--muted);font-size:11px}
.matchup.is-strong{border-color:#82d98266}.matchup.is-strong b{color:var(--good)}
.matchup.is-weak{border-color:#e2604a66}.matchup.is-weak b{color:var(--bad)}
.guide-class{display:block;margin-bottom:10px}
.guide-class .matchups{margin:4px 0 0}
.guide-class .matchups em{min-width:0}.guide-class .matchup{padding:1px 6px}

/* ------------------------------------------------------------------ Handy: Fenster als Blatt von unten (wie das Profilblatt der Gildenseite) */
@media (max-width:640px){
  .g-backdrop{place-items:end stretch;padding:calc(12px + env(safe-area-inset-top,0px)) 0 0}
  .g-modal,.g-modal-sm,.g-modal-lg{width:100%;max-height:100%;border-radius:22px 22px 0 0;border-bottom:0;padding-top:14px;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheet-in .3s cubic-bezier(.2,.9,.3,1)}
  .g-modal::before{content:"";position:absolute;top:8px;left:50%;width:52px;height:5px;translate:-50% 0;border-radius:3px;background:#b48d4a99}
  .g-close{height:38px;padding:0 13px;font-size:15px}
}
@keyframes sheet-in{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------------ Ausbildung: Spielleiter und Lektionen */
.coach{position:fixed;inset:0;z-index:55;pointer-events:none}
.coach-ring{position:fixed;border-radius:14px;border:2px solid var(--gold);box-shadow:0 0 0 9999px #02060b59,0 0 24px #e3b866aa;animation:coach-pulse 1.6s ease-in-out infinite;transition:left .2s,top .2s,width .2s,height .2s}
@keyframes coach-pulse{50%{box-shadow:0 0 0 9999px #02060b59,0 0 38px #f4d892}}
.coach-bubble{position:fixed;pointer-events:auto;display:grid;gap:6px;padding:12px 14px 13px;border-radius:14px;border:1px solid #b48d4a;background:linear-gradient(#18304a,#0f1d2e);box-shadow:0 14px 40px #000c;color:var(--text);animation:coach-in .25s cubic-bezier(.2,.9,.3,1)}
.coach-bubble.below::before,.coach-bubble.above::after{content:"";position:absolute;left:calc(50% - 8px);width:14px;height:14px;rotate:45deg;background:inherit;border:inherit}
.coach-bubble.below::before{top:-8px;border-right:0;border-bottom:0;background:#18304a}
.coach-bubble.above::after{bottom:-8px;border-left:0;border-top:0;background:#0f1d2e}
@keyframes coach-in{from{opacity:0;transform:translateY(6px)}}
.coach-head{display:flex;align-items:center;gap:7px;color:var(--gold)}
.coach-head small{flex:1;font:700 12px var(--ui);letter-spacing:.14em}
.coach-close{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted)}
.coach-close:hover{color:var(--text);background:#ffffff10}
.coach-title{font:700 19px var(--display);color:#f3dfae;letter-spacing:.03em}
.coach-bubble p{margin:0;font-size:15.5px;line-height:1.45;color:#dbe3ec}
.coach-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.coach-skip,.tutorial-skip{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:var(--muted);font:600 14px var(--ui);text-decoration:underline;text-underline-offset:3px}
.coach-skip:hover,.tutorial-skip:hover{color:var(--text)}
.tutorial-trail li.chosen .stage-node{border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){.coach-ring,.coach-bubble{animation:none}}
@media (max-width:640px){.coach-bubble{gap:4px;padding:10px 12px 11px}.coach-bubble p{font-size:14.5px;line-height:1.4}.coach-title{font-size:17px}}
/* Gilde und Gruppen: Gildenboss, Aufgaben, Mitglieder, offene Gruppen, Suche und Gründung. */
.guild-scene{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100%;min-height:0}
.guild-scene .scene-head .g-segmented{margin-left:auto}
.guild-scene .scene-body{padding-top:0}
.guild-tag{display:inline-grid;place-items:center;min-width:44px;height:26px;margin-right:10px;padding:0 7px;border-radius:7px;border:1px solid #7a6a3a;background:linear-gradient(#3a2f18,#1d170c);color:var(--gold-hi);font:800 12px var(--ui);letter-spacing:.12em;vertical-align:middle;box-shadow:inset 0 1px #ffffff1a}
.guild-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.guild-card{display:grid;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(#152436,#0a131e);box-shadow:inset 0 0 0 2px #34506f,0 10px 24px #000a;min-width:0}
.guild-card h2{display:flex;align-items:center;gap:8px;font:800 18px var(--display);letter-spacing:.05em;color:var(--gold-hi)}
.guild-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.guild-card>footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.guild-card .reward-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.guild-card .g-chip{min-height:24px;padding:0 9px;font-size:12px}

/* Gildenboss */
.guild-card.boss{grid-template-columns:150px minmax(0,1fr);grid-column:1/-1;align-items:center;background:radial-gradient(circle at 12% 40%,#4a1d1d88,transparent 55%),linear-gradient(#1d2638,#0b121c);box-shadow:inset 0 0 0 2px #7a4b3a,0 12px 28px #000b}
.boss-art{position:relative;display:grid;place-items:end center;height:170px;border-radius:14px;overflow:hidden;border:1px solid #000;background:#0a0f17}
.boss-art .zone-emblem{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.boss-figure{position:relative;display:block;width:132px;height:150px}
.boss-figure svg,.boss-figure img{width:100%;height:100%;object-fit:contain;transform:scaleX(-1);filter:drop-shadow(0 6px 10px #000)}
.boss-copy{display:grid;gap:7px;min-width:0}
.boss-copy>small{font:700 10px var(--ui);letter-spacing:.2em;color:#ffb39c}
.boss-copy h2{font-size:clamp(20px,2.4vw,26px);color:#ffe2c4}
.boss-bar{height:16px}
.boss-left,.boss-tickets{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--ui);color:#e6d6c6}
.boss-left svg{color:#ff8a6a}.boss-tickets svg{color:var(--gold)}

/* Truhen und Gildenstufe */
.guild-chest,.weekly-chest{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid #6a5a2e;background:linear-gradient(#2a2312,#151008)}
.guild-chest>svg,.weekly-chest>svg{color:var(--gold)}
.guild-chest b,.weekly-chest b{display:block;font:700 14px var(--ui);color:#fff0c4}
.guild-chest span,.weekly-chest>span{display:grid;gap:4px;min-width:0}
.weekly-chest{grid-template-columns:auto minmax(0,1fr) auto auto;border-color:var(--line);background:#0a121c}
.weekly-chest small{color:var(--muted);font-size:11.5px}
.weekly-chest.ready{border-color:var(--gold);box-shadow:0 0 18px #e8b95544;animation:hint-pulse 2.4s ease-in-out infinite}
.guild-motto{font:italic 600 14px var(--display);color:#e6dcc0}

/* Aufgaben */
.task-list,.member-list,.lobby-list,.guild-list,.guild-log{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;border:1px solid var(--line);background:#09111b}
.task-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#132235;color:var(--muted)}
.task-row.done .task-icon{background:#3a2f12;color:var(--gold)}
.task-row.claimed{opacity:.65}.task-row.claimed .task-icon{background:#173219;color:var(--good)}
.task-copy{display:grid;gap:4px;min-width:0}
.task-copy b{font:700 14px var(--ui);color:#fff0c4}
.task-copy small{color:var(--muted);font-size:11.5px;line-height:1.35}
.task-count{font:700 13px var(--ui);color:#d9d3bd;white-space:nowrap}
.task-done{font:700 11px var(--ui);letter-spacing:.08em;color:var(--good);text-transform:uppercase}

/* Mitglieder, Anfragen, Gruppen, Suche */
.member-row,.lobby-row,.guild-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#09111b}
.member-row.me{border-color:#5a4a28;background:#141109}
.member-role,.lobby-vis{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#132235;color:var(--muted)}
.member-row.leader .member-role{background:#3a2f12;color:var(--gold)}.member-row.officer .member-role{color:var(--frost)}
.member-copy,.lobby-copy,.guild-copy{display:grid;gap:2px;min-width:0}
.member-copy b,.lobby-copy b,.guild-copy b{font:700 14px var(--ui);color:#fff0c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-copy small,.lobby-copy small,.guild-copy small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-stats{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--ui);color:#d9d3bd;white-space:nowrap}
.member-stats svg{color:var(--gold);margin-left:4px}
.member-actions{display:inline-flex;gap:4px}
.g-round.small.danger{color:#ff9a8a}.g-round.small.good{color:var(--good)}
.lobby-row{grid-template-columns:auto minmax(0,1fr) auto}
.lobby-row.guild .lobby-vis{background:#3a2f12;color:var(--gold)}
.guild-row{grid-template-columns:auto minmax(0,1fr) auto}
.guild-row .guild-tag{margin:0}
.guild-request{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13px var(--ui);color:#ffe49c}
.guild-card.find>header .search{margin-left:0}
.guild-log li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px solid #18283a;font-size:13px}
.guild-log small{color:var(--muted)}

/* Formulare */
.guild-form{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px}
.guild-field{display:grid;gap:4px;font:700 10px var(--ui);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.guild-field input,.guild-field textarea{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line-hi);background:#050a11;color:#fff0c4;font:500 14px var(--ui);letter-spacing:normal;text-transform:none;resize:vertical}
.guild-check{display:flex;align-items:center;gap:8px;font:600 13px var(--ui);color:#d9d3bd}
.guild-card.settings{justify-items:start}

/* Lobby: Sichtbarkeit wählen */
.lobby-visibility{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lobby-visibility small{font:700 10px var(--ui);letter-spacing:.16em;color:var(--gold)}
.lobby-visibility .g-segmented button{min-height:30px;padding:0 10px;font-size:12px}
.group-section{display:grid;gap:10px;padding-top:6px}
.group-section h3{font:800 15px var(--display);letter-spacing:.05em;color:var(--gold-hi)}
.group-modal .guild-card{padding:0;border:0;background:none;box-shadow:none}

@media (max-width:640px){
  .guild-scene .scene-head .g-segmented{margin-left:0;width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:2px}
  .guild-scene .scene-head .g-segmented button{min-height:32px;padding:0 4px;font-size:11px;letter-spacing:0}
  .guild-scene .scene-head{padding-bottom:4px}
  .guild-card{padding:12px}
  .guild-card.boss{grid-template-columns:92px minmax(0,1fr);gap:10px}
  .boss-art{height:118px}.boss-figure{width:86px;height:104px}
  .boss-copy .g-row{flex-wrap:wrap}
  .boss-copy .g-fine{display:none}
  .task-row{grid-template-columns:auto minmax(0,1fr) auto;padding:8px}
  .task-row .task-count{display:none}
  .member-row{grid-template-columns:auto minmax(0,1fr) auto}
  .member-row .member-stats{display:none}
  .weekly-chest{grid-template-columns:auto minmax(0,1fr) auto}
  .weekly-chest .reward-chips{display:none}
  .guild-log li{grid-template-columns:70px minmax(0,1fr)}
}
.lobby-note{display:flex;align-items:center;gap:6px;max-width:420px}
.lobby-note svg{color:var(--gold);flex:none}
.gb-progress{display:inline-flex;align-items:center;gap:6px}.gb-progress svg{color:#ff8a6a}
/* Schmiede: Aufwerten, Sockel und Edelsteine, Verzaubern, Zerlegen, Doppelte; Plaketten an Kacheln und Ausrüstungsplätzen. */
.gem-icon{position:relative;display:inline-grid;place-items:center;flex:none;vertical-align:middle}
.gem-icon svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px #000a)}
.gem-icon i{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);font:900 9px/1 var(--ui);letter-spacing:-1px;color:#fff6d8;text-shadow:0 0 2px #000,0 0 3px #000;font-style:normal;white-space:nowrap}
.gem-icon.g4 svg,.gem-icon.g5 svg{filter:drop-shadow(0 0 4px #fff6) drop-shadow(0 1px 2px #000a)}
.mat-icon{flex:none;vertical-align:middle}

/* Vorräte */
.forge-materials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.forge-materials>span{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:7px 10px;border-radius:11px;border:1px solid var(--line);background:#060d16}
.forge-materials>span>:first-child{grid-row:1/3}
.forge-materials b{font:800 15px var(--ui);color:#fff0c4}
.forge-materials small{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forge-materials>span>svg{color:#d29bff}
.forge-materials.compact{gap:5px}
.forge-materials.compact>span{padding:4px 7px;border-radius:9px}
.forge-materials.compact b{font-size:13px}
.forge-materials.compact small{display:none}

/* Kosten */
.cost-chips{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:4px;vertical-align:middle}
.cost-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;background:#0008;border:1px solid #0006;font:800 11px var(--ui);color:#fff0c4;letter-spacing:0;text-transform:none}
.cost-chip svg{color:#f1c65f}
.cost-chip.short{color:#ff9a8a;border-color:#a8382a}
.cost-chip.gain{color:#b5f5a5}

/* Detail: Reiter Schmiede */
.bag-detail>.g-segmented{display:grid;grid-template-columns:1fr 1fr}
.bag-detail>.g-segmented button{min-height:32px;padding:0 8px;font-size:12.5px}
.forge-tab{display:grid;gap:10px}
.forge-block{display:grid;gap:8px;padding:10px 11px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(#111d2c,#08101a)}
.forge-block>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.forge-block h3{display:inline-flex;align-items:center;gap:6px}
.forge-block>header small{font-size:11px;color:var(--muted)}
.forge-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.forge-actions .g-btn span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px}
.refine-level{font:800 22px var(--display);color:var(--gold-hi);text-shadow:0 0 12px #e8b95566}
.refine-pips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.refine-pips i{height:9px;border-radius:3px;background:#1a2738;border:1px solid #000}
.refine-pips i.on{background:linear-gradient(#ffe49c,#d8942c);box-shadow:0 0 6px #e8b95588}
.refine-pips i.pip-steel:not(.on){background:#1d2140}
.refine-pips i.pip-steel.on{background:linear-gradient(#cfdcff,#6f86d8);box-shadow:0 0 6px #8fa8ff88}
.refine-pips i.pip-socket{outline:1px dashed #e8b95599;outline-offset:1px}

.socket-row{display:grid;gap:6px}
.socket{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:44px;padding:5px 8px;border-radius:10px;border:1px dashed #3b5371;background:#050a11}
.socket.filled{border-style:solid;border-color:#5a4a28;background:#120f08}
.socket.picking{border-color:var(--gold);box-shadow:0 0 12px #e8b95544}
.socket span{display:grid;min-width:0}
.socket b{font:700 13px var(--ui);color:#fff0c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socket small{font-size:11px;color:#9cff9c}
.socket.locked{grid-template-columns:auto 1fr;color:var(--muted);opacity:.7}
.socket.locked small{color:var(--muted)}
.socket-empty{grid-column:1/-1;min-height:32px;border:0;background:none;color:#d9c48a;font:700 12.5px var(--ui);text-align:left}
.socket-empty:disabled{color:var(--muted)}
.socket-swap{border:0;background:none;color:var(--gold);font:700 11.5px var(--ui);text-decoration:underline}
.gem-pick{display:grid;gap:4px;max-height:200px;overflow-y:auto;margin:0;padding:0;list-style:none}
.gem-pick button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:5px 8px;border-radius:9px;border:1px solid var(--line);background:#0a121c;color:var(--text);text-align:left}
.gem-pick button:hover:not(:disabled){border-color:var(--gold);background:#141109}
.gem-pick span{display:grid;min-width:0}
.gem-pick b{font:700 12.5px var(--ui);color:#fff0c4}
.gem-pick small{font-size:11px;color:#9cff9c}
.gem-pick em{font:800 12px var(--ui);color:var(--gold-hi);font-style:normal}

.enchant-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px}
.enchant-option{display:grid;gap:1px;padding:6px 7px;border-radius:9px;border:1px solid var(--line);background:#0a121c;color:var(--text);text-align:left}
.enchant-option b{font:800 13px var(--ui);color:#b9a6ff}
.enchant-option small{font-size:10.5px;color:var(--muted);line-height:1.2}
.enchant-option.active{border-color:#8a6cff;background:#171233;box-shadow:inset 0 0 0 1px #8a6cff66}
.enchant-option.on{border-color:var(--gold);box-shadow:0 0 10px #e8b95555}

.forge-gain{color:#ffd27a;font-style:normal;font-weight:700}
.forge-level{color:var(--gold-hi);font-style:normal}

/* Plaketten */
.forge-badge,.dupe-badge{position:absolute;display:inline-grid;place-items:center;min-width:24px;height:17px;padding:0 5px;border-radius:6px;border:1px solid #000;font:800 11px var(--ui);font-style:normal;z-index:1}
.forge-badge{color:#2b1805;background:linear-gradient(#ffe49c,#d8942c);box-shadow:0 0 8px #e8b95566}
.dupe-badge{color:#e6f0ff;background:linear-gradient(#4a6aa8,#24385e)}
.bag-tile>.forge-badge{left:6px;top:28px}
.bag-tile>.dupe-badge{right:6px;top:22px}
.tile-gems{position:absolute;right:5px;top:44px;display:grid;gap:2px}
.tile-gems i{display:block;width:11px;height:11px;margin:1px;border-radius:50%;border:1px dashed #5a7290}
.gear-slot .forge-badge{left:4px;bottom:4px;top:auto}
.dupe-tag{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px;border-radius:999px;background:#24385e;border:1px solid #4a6aa8;color:#dce8ff;font:800 10.5px var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.loot-row.dupe .item-art{filter:saturate(.8)}
.reward-icon.gemstone,.reward-icon.steel{background:radial-gradient(circle at 50% 30%,#2a3550,#0e1723)}

/* Rechner: Raster und Detail scrollen getrennt, damit lange Schmiede-Reiter erreichbar bleiben. */
@media (min-width:821px) and (min-height:561px){
  .bag-body{overflow:hidden;padding-bottom:8px}
  .bag-body .bag-layout{height:100%}
  .bag-body .bag-grid{max-height:100%;overflow-y:auto;padding-top:12px}
  .bag-body .bag-detail{position:static;max-height:100%;overflow-y:auto;scrollbar-width:thin}
}

/* Ansicht Schmiede */
.forge-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:14px;align-items:start;padding:4px 6px 12px}
.forge-card.intro{grid-column:1/-1}
.forge-card .g-fine b{color:#fff0c4}
.gem-list,.dupe-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.gem-row,.dupe-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:#09111b}
.gem-row span,.dupe-row>span{display:grid;gap:2px;min-width:0}
.gem-row b,.dupe-row b{font:700 13.5px var(--ui);color:#fff0c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gem-row b em,.dupe-row b em{color:var(--gold-hi);font-style:normal}
.gem-row small,.dupe-row small{font-size:11.5px;color:var(--muted)}
.gem-row .g-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.dupe-row{box-shadow:inset 3px 0 0 var(--c,#445f7f)}
.dupe-open{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(#1c2f46,#0b141f)}
.dupe-open .item-art{width:38px;height:38px}
.dupe-open .item-level{position:absolute;left:-4px;top:-4px;min-width:18px;height:15px;font-size:9.5px}
.dupe-row .g-rarity{font-size:9px}
.bulk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulk-row .g-segmented button{min-height:28px;padding:0 8px;font-size:11px}

@media (max-width:640px){
  .forge-materials{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .forge-materials.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
  .forge-view{padding:6px 0 10px;gap:10px}
  .forge-block{padding:8px 9px}
  .enchant-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gem-row,.dupe-row{grid-template-columns:auto minmax(0,1fr);gap:8px}
  .gem-row>.g-row,.dupe-row>.g-btn,.gem-row>.task-done{grid-column:1/-1;justify-content:flex-start}
  .bulk-row .g-segmented{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .bulk-row .g-segmented button{padding:0 2px;font-size:9.5px}
  .bag-tile>.forge-badge{left:4px;top:22px;min-width:20px;height:15px;font-size:9.5px}
  .bag-tile>.dupe-badge{right:3px;top:auto;bottom:3px;min-width:20px;height:15px;font-size:9.5px}
  .tile-gems{top:34px;right:3px}
  .inventory-scene .scene-head .g-segmented button{padding:0 6px}
}
.gem-row .g-btn span,.bulk-row .g-btn span,.dupe-row .g-btn span{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:2px;white-space:nowrap}
/* Gemalte Tafeln (paintedImages 'gems', 'forge-icons'), sobald geliefert. */
.sheet-icon{display:inline-block;flex:none;background-repeat:no-repeat;vertical-align:middle;filter:drop-shadow(0 1px 2px #000a)}
.gem-icon.painted b{display:block;width:100%;height:100%;background-repeat:no-repeat}
.gem-icon.painted.g1 b{filter:saturate(.55) brightness(.85)}
.gem-icon.painted.g2 b{filter:saturate(.8)}
.gem-icon.painted.g4 b,.gem-icon.painted.g5 b{filter:drop-shadow(0 0 4px #fff7)}
.forge-card h2 .sheet-icon,.forge-card h2>svg{margin-right:4px}
.guild-scene h1 .sheet-icon.crest{margin-right:8px}
/* ============================================================ Arena (Spieler gegen Spieler) */
.arena-panel{display:grid;gap:12px;width:min(100%,980px);justify-self:center}
.arena-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;border:3px solid #000;background:linear-gradient(#2a2030,#110c16);box-shadow:inset 0 0 0 2px #7a5a8f,0 14px 34px #000b}
.arena-head small{display:block;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.arena-head h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:2px 0 4px;font:800 clamp(20px,2.4vw,28px) var(--display);color:#fff0c4}
.arena-head p{margin:0;color:#d9d3bd;font-size:13px}
.arena-rank{font:600 13px var(--ui);color:var(--muted)}
.arena-crest{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px solid #000;color:#2b1805;box-shadow:inset 0 0 0 2px #fff4,0 5px 0 #000}
.arena-crest.bronze{background:radial-gradient(circle at 40% 30%,#f2c08f,#9a5a2a)}
.arena-crest.silver{background:radial-gradient(circle at 40% 30%,#ffffff,#8f9cab)}
.arena-crest.gold{background:radial-gradient(circle at 40% 30%,#fff1b8,#d8942c)}
.arena-crest.platinum{background:radial-gradient(circle at 40% 30%,#e8fffb,#4fb3a8)}
.arena-crest.diamond{background:radial-gradient(circle at 40% 30%,#f0e6ff,#8a62e8);color:#1c0f33}
.league-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;border:1px solid #000;font:800 12px var(--ui);letter-spacing:.04em;color:#2b1805;white-space:nowrap}
.league-badge.small{padding:1px 7px;font-size:10.5px}
.league-badge.bronze{background:linear-gradient(#f2c08f,#b06a33)}
.league-badge.silver{background:linear-gradient(#ffffff,#9aa7b5)}
.league-badge.gold{background:linear-gradient(#fff1b8,#e0a03a)}
.league-badge.platinum{background:linear-gradient(#e8fffb,#5cc2b6)}
.league-badge.diamond{background:linear-gradient(#f0e6ff,#9a74f0);color:#1c0f33}
.arena-tries{display:grid;justify-items:end;gap:5px}
.arena-tries span{display:flex;gap:5px}
.arena-tries i{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:#172434}
.arena-tries i.on{background:radial-gradient(circle at 40% 35%,#ffe1ff,#b36ae8);box-shadow:0 0 9px #c58cff88}
.arena-tries small{display:inline-flex;align-items:center;gap:4px;letter-spacing:.06em;color:var(--muted)}
.arena-panel>.g-segmented{justify-self:center}
.arena-body{display:grid;gap:10px}
.arena-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.arena-offer{display:grid;gap:7px;align-content:start;padding:12px 14px;border-radius:14px;border:3px solid #000;background:linear-gradient(#1b2e44,#0b141f);box-shadow:inset 0 0 0 2px #49668b;color:inherit;font-family:var(--ui);text-align:left;transition:transform .15s,box-shadow .15s}
.arena-offer:hover:not(:disabled){transform:translateY(-3px)}
.arena-offer.bot{background:linear-gradient(#24223a,#100f1c)}
.arena-offer.chosen{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 3px #ffd97a88,0 0 24px #ffd97a66}
.offer-name b{display:block;font:800 15px var(--display);letter-spacing:.03em;color:#fff0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offer-name small{font-size:11px;color:var(--muted)}
.offer-rating{display:flex;align-items:center;gap:8px}
.offer-rating b{font:800 18px var(--display);color:#fff0c4}
.offer-stakes{display:flex;gap:10px;font:700 12px var(--ui)}
.offer-stakes span{display:inline-flex;align-items:center;gap:3px}
.offer-stakes .gain{color:var(--good)}.offer-stakes .risk{color:var(--bad)}
.arena-team{display:flex;gap:4px}
.arena-hero{position:relative;display:block;width:46px;height:46px;border-radius:10px;overflow:hidden;border:2px solid #000;background:#0a1420;box-shadow:inset 0 0 0 1px #ffffff22}
.arena-team.sm .arena-hero{width:30px;height:30px;border-radius:7px}
.arena-team.lg .arena-hero{width:64px;height:64px}
.arena-hero .g-bust{width:100%;height:100%}
.arena-hero i{position:absolute;right:1px;bottom:1px;padding:0 4px;border-radius:6px;background:#000c;color:#ffe9b4;font:800 10px var(--ui);font-style:normal}
.arena-team.sm .arena-hero i{display:none}
.arena-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.arena-foot .g-btn{margin-left:auto}
.defense-team{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 16px;border-radius:14px;border:2px solid #000;background:#0b141fcc;box-shadow:inset 0 0 0 1px #49668b}
.defense-team small{display:block;margin-bottom:6px;font:700 10px var(--ui);letter-spacing:.2em;color:var(--gold)}
.defense-team p{max-width:460px;margin:6px 0 0}
.arena-log,.arena-board{display:grid;gap:5px;list-style:none;margin:0;padding:0}
.arena-log li,.arena-board li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;border:1px solid #000;background:#0f1c2ccc}
.arena-log li.empty,.arena-board li.empty{display:block;color:var(--muted);font-size:13px}
.arena-log b,.arena-board b{display:block;font:700 13px var(--ui);color:#fff0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-log small{font-size:11px;color:var(--muted)}
.arena-log strong,.arena-board strong{font:800 14px var(--display);color:#fff0c4}
.arena-log li.won .log-mark{color:var(--good)}.arena-log li.lost .log-mark{color:var(--bad)}
.arena-log li.won strong{color:var(--good)}.arena-log li.lost strong{color:var(--bad)}
.arena-board .rank{display:inline-flex;align-items:center;gap:3px;min-width:34px;font:800 14px var(--display);color:var(--muted)}
.arena-board li.podium .rank{color:var(--gold-hi)}
.arena-board li.me{box-shadow:inset 0 0 0 2px var(--gold)}
.arena-board .who{display:flex;align-items:center;gap:8px;min-width:0}
.arena-rewards{padding:10px 14px;border-radius:12px;border:1px solid #000;background:#0b141fcc}
.arena-rewards>small{display:block;margin-bottom:6px;font:700 10px var(--ui);letter-spacing:.12em;color:var(--gold)}
.arena-rewards table{width:100%;border-collapse:collapse;font:600 12px var(--ui);color:#d9d3bd}
.arena-rewards th{display:flex;align-items:center;gap:6px;text-align:left;font-weight:600}
.arena-rewards th small{color:var(--muted);font-size:10.5px}
.arena-rewards td{padding:3px 6px;white-space:nowrap}
.arena-rewards td svg,.arena-rewards td .forge-icon,.arena-rewards td .gem-icon{vertical-align:-3px;margin-right:3px}
.arena-rewards tr.mine{background:#ffd97a1a}
.arena-note{display:flex;align-items:center;gap:6px;justify-content:center;margin:0}
@media (max-width:720px){
  .arena-panel{gap:8px}
  .arena-head{grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:8px 10px;border-width:2px;border-radius:12px}
  .arena-crest{width:40px;height:40px;border-width:2px}.arena-crest svg{width:20px;height:20px}
  .arena-head h3{font-size:16px;gap:4px 8px;margin:1px 0 2px}
  .arena-head p{font-size:11px}
  .arena-rank{font-size:11px}
  .arena-tries{grid-column:1/-1;grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;gap:8px}
  .arena-tries small:last-child{justify-self:end}
  .arena-tries i{width:12px;height:12px}
  .arena-panel>.g-segmented{width:100%;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
  .arena-offers{grid-template-columns:minmax(0,1fr);gap:6px}
  .arena-offer{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name rating" "team stakes";gap:4px 8px;padding:7px 10px;border-width:2px;border-radius:11px}
  .offer-name{grid-area:name;min-width:0}.offer-rating{grid-area:rating;justify-self:end}.arena-offer .arena-team{grid-area:team}.offer-stakes{grid-area:stakes;justify-self:end;align-self:center}
  .offer-name b{font-size:13px}.offer-name small{font-size:10px}
  .offer-rating b{font-size:15px}
  .arena-hero{width:34px;height:34px;border-radius:8px}
  .arena-team.lg .arena-hero{width:46px;height:46px}
  .arena-foot{gap:6px}.arena-foot .g-chip{font-size:11px}
  .defense-team{padding:8px 10px}
  .arena-log li,.arena-board li{gap:8px;padding:4px 8px}
  .arena-rewards{padding:8px}
  .arena-rewards td{padding:2px 3px;font-size:11px}
  .arena-note{display:none}
}
/* Dungeons: acht Reihen bei unveränderten dreizehn Spalten. */
.dungeon-mode .battle-wrap{width:min(100cqw,calc(100cqh*1.3));aspect-ratio:13/10}
.dungeon-board .battle-grid{top:16%;height:66%;grid-template-rows:repeat(8,minmax(0,1fr))}
.dungeon-board .board-unit{width:5.6cqw;height:7.5cqw}
.dungeon-board .board-unit-label{width:8cqw;gap:.15cqw}
.dungeon-board .board-unit-label strong{font-size:clamp(7px,.8cqw,11px)}
.dungeon-board .status{font-size:clamp(5px,.5cqw,8px)}
.unit-elite-mark{position:absolute;right:-5%;top:0;z-index:2;color:#f2cf82;font-size:clamp(8px,1cqw,15px);text-shadow:0 1px 3px #000,0 0 6px #a76c29}
.elite-unit .unit-shadow{box-shadow:0 0 .65cqw #d6ad6144}
.dungeon-mode .party-bar{gap:5px}
.dungeon-mode .party-slot{width:clamp(90px,11cqw,160px);padding:5px;gap:5px;min-height:58px}
.dungeon-mode .party-slot .g-bust{width:32px;height:32px}
.dungeon-mode .party-info strong{font-size:11px}
.dungeon-mode .party-info small{font-size:9px}
.dungeon-mode .encounter-plate{padding-inline:12px}
.dungeon-mode .encounter-plate h1{font-size:clamp(12px,1.7cqw,21px)}
.dungeon-selection{display:grid;gap:16px}
.dungeon-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dungeon-choice{display:grid;align-content:start;gap:6px;padding:8px;border:1px solid var(--line-hi);border-radius:12px;background:#111f2e;color:var(--text);font:inherit;text-align:left;overflow:hidden}
.dungeon-choice.chosen{border-color:var(--gold);box-shadow:inset 0 0 0 1px #e3b86666}
.dungeon-choice strong{font-size:14px}.dungeon-choice small{color:var(--muted);font-size:11px}
.dungeon-cover{position:relative;display:block;height:100px;border-radius:6px;overflow:hidden;background:#162033}
.dungeon-cover>svg:not(.arena-svg){position:absolute;inset:0;margin:auto;z-index:1;color:#ffebba;filter:drop-shadow(0 2px 3px #000)}
.dungeon-card{align-items:start}.dungeon-card .stage-copy p{line-height:1.5}
.dungeon-card .stage-copy p>svg{vertical-align:middle;color:var(--gold)}
.dungeon-wave-preview{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dungeon-wave-preview>li>b{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gold)}
.dungeon-wave-preview .map-enemies{justify-content:flex-start;gap:6px;flex-wrap:wrap}
.dungeon-wave-preview .map-enemy{width:65px}.dungeon-wave-preview .map-enemy>span{height:66px}
.dungeon-loot{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.dungeon-loot>span{display:flex;gap:8px;align-items:center;max-width:210px}
.dungeon-loot .item-art{width:44px;height:44px}.dungeon-loot small{font-size:12px}

/* Runen teilen keinen Verbrauchsplatz mit Verzauberungen oder Edelsteinen. */
.rune-icon{position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--rune-quality,#b9aa90);border-radius:10px;background:#101923;color:var(--rune-color,#d2b580);box-shadow:inset 0 0 12px #0008}
.rune-icon>b{width:100%;height:100%;background-repeat:no-repeat;border-radius:inherit}
.rune-icon>svg{width:82%;height:82%}.rune-icon>i{position:absolute;bottom:-3px;right:-3px;border-radius:8px;background:#111b28;color:var(--rune-quality,#b9aa90);font-size:9px;font-style:normal;padding:0 3px}
.rune-bag{display:grid;gap:14px}.rune-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.rune-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;padding:12px;border:1px solid var(--line-hi);border-radius:10px;background:#0c1723}
.rune-card h3{font-size:14px;margin:0}.rune-card small{font-size:11px;color:var(--muted);display:block}
.rune-card .g-btn,.rune-card .rune-progress{grid-column:1/-1}
.rune-progress{height:5px;border-radius:3px;background:#070c13;overflow:hidden}
.rune-progress>i{display:block;height:100%;background:var(--gold)}
.rune-binding{display:grid;gap:10px}.rune-binding>header{display:flex;align-items:center;gap:10px}
.rune-binding label{display:grid;gap:6px;font-size:12px}.rune-binding select{max-width:100%;width:100%;background:#101b29;color:var(--text);border:1px solid var(--line-hi);border-radius:8px;padding:8px}
.rune-binding .rune-preview{font-size:12px;color:var(--good);line-height:1.5}
@container(max-width:720px){.dungeon-board .board-unit{width:7.5cqw;height:10cqw}.dungeon-board .board-unit-label{width:10cqw}.dungeon-board .board-unit-label .status{display:none}.dungeon-board .grid-cell>span{display:none}}
@media(max-width:820px){
 .dungeon-mode .battle-wrap{width:100%;aspect-ratio:auto;gap:6px;padding-bottom:6px}
 .dungeon-mode .g-arena{aspect-ratio:13/10}
 .dungeon-mode .party-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:4px}
 .dungeon-mode .party-slot{width:auto;min-width:0;min-height:54px;flex-direction:column;padding:4px 2px;gap:3px}
 .dungeon-mode .party-slot .g-bust{width:27px;height:27px}.dungeon-mode .party-info{width:100%;justify-items:stretch}
 .dungeon-mode .party-info strong{font-size:8px;text-align:center}.dungeon-mode .party-info small,.dungeon-mode .party-stats{display:none}
 .dungeon-mode .party-empty{font-size:8px}.dungeon-mode .party-swap{width:19px;height:19px;top:-6px;right:-3px}
 .dungeon-mode .party-swap svg{width:11px;height:11px}
 .dungeon-mode .battle-bottom{gap:6px}.dungeon-mode .action-panel .g-btn-xl{min-height:42px}
 .dungeon-choices{gap:6px}.dungeon-choice{padding:5px}.dungeon-cover{height:60px}.dungeon-choice strong{font-size:10px;line-height:1.3}.dungeon-choice small{font-size:9px}
 .dungeon-card{grid-template-columns:minmax(0,1fr)}.dungeon-wave-preview{grid-template-columns:minmax(0,1fr)}
 .dungeon-wave-preview .map-enemy{width:48px}.dungeon-wave-preview .map-enemy>span{height:45px}
 .rune-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-height:550px) and (orientation:landscape){.dungeon-mode .battle-wrap{width:min(100cqw,calc(100cqh*1.3));aspect-ratio:13/10;padding:0}.dungeon-mode .g-arena{position:absolute;inset:0}.dungeon-mode .party-slot{min-height:34px}.dungeon-mode .party-info strong{display:none}}
.dungeon-card .stage-copy p.dungeon-daily{font-weight:600}.dungeon-card .stage-copy p.dungeon-daily.spent{color:var(--ember,#e0a06a)}
/* Sammelbuch: Erfolge mit drei Stufen, Belohnung und Titel; Titel neben Namen (Kopfleiste, Gilde, Arena). */
.ach-panel{display:grid;gap:14px}
.ach-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;border:1px solid var(--line-hi);border-radius:12px;background:var(--panel)}
.ach-count{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}.ach-count b{color:var(--gold-hi);font-size:18px}.ach-count svg{color:var(--gold)}
.ach-pick{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-left:auto}
.ach-pick select{max-width:230px;padding:6px 8px;border-radius:8px;border:1px solid var(--line-hi);background:#0d1825;color:var(--text);font:inherit}
.ach-group h2{margin:0 0 8px;font:700 14px var(--display);letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ach-card{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ach-card.ready{border-color:var(--gold);box-shadow:0 0 0 1px #e3b86655,0 0 18px #e3b86622}
.ach-card.done{background:linear-gradient(160deg,#1d2a1c,var(--panel))}
.ach-card header{display:flex;gap:10px;align-items:flex-start}.ach-card header b{display:block;font-size:14px}.ach-card header small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.ach-medals{display:inline-flex;gap:2px;flex:none;padding-top:1px}
.ach-medals i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0d1825;border:1px solid var(--line-hi);color:#4a5a6d}
.ach-medals i.reached{border-style:dashed}
.ach-medals i.bronze.on,.ach-medals i.bronze.reached{color:#d08a52}.ach-medals i.silver.on,.ach-medals i.silver.reached{color:#c9d3de}.ach-medals i.gold.on,.ach-medals i.gold.reached{color:var(--gold-hi)}
.ach-medals i.on{border-color:currentColor;box-shadow:0 0 8px currentColor}
.ach-progress{position:relative;height:18px;border-radius:999px;background:#0b1520;border:1px solid var(--line);overflow:hidden}
.ach-progress i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--gold-lo),var(--gold));opacity:.75}
.ach-progress span{position:relative;display:block;text-align:center;font-size:11px;line-height:16px;font-weight:700;color:var(--text);text-shadow:0 1px 2px #000}
.ach-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.ach-title{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-style:italic}.ach-card.done .ach-title{color:var(--gold-hi)}
.ach-reward{display:inline-flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--muted)}.ach-reward span{display:inline-flex;align-items:center;gap:3px}
.ach-done{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--good);font-weight:700}
.g-hud-badge,.player-title{font-style:normal;color:var(--gold);font-weight:700}
.g-hud-badge{margin-right:6px}.g-hud-badge::after{content:" ·";color:var(--muted);font-weight:400}
.player-title{display:block;font-size:11px;letter-spacing:.02em}
.codex-scene .scene-head .g-segmented{margin-left:auto}
@media (max-width:640px){
 .ach-summary{gap:8px}.ach-pick{margin-left:0;width:100%}.ach-pick select{flex:1;max-width:none}
 .ach-grid{grid-template-columns:minmax(0,1fr)}
 .codex-scene .scene-head .g-segmented{margin-left:0}
}
/* Fehler melden */
.bug-report .bug-field{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.bug-report textarea{width:100%;min-height:110px;resize:vertical;padding:10px;border-radius:10px;border:1px solid var(--line-hi);background:#0d1825;color:var(--text);font:inherit;font-size:14px}
.bug-report .bug-info{display:flex;gap:6px;align-items:flex-start;margin-top:10px;line-height:1.45}.bug-report .bug-info svg{flex:none;margin-top:2px;color:var(--gold)}
/* Kampfregie (BattleDirector.jsx): Einblendungen, Bildwackeln, roter Rand bei Gefahr. */
.battle-callouts{position:absolute;left:50%;top:24%;z-index:325;translate:-50% 0;display:grid;justify-items:center;gap:6px;pointer-events:none;width:min(90%,720px)}
.battle-callout{display:grid;justify-items:center;padding:6px 26px 8px;border-radius:14px;background:linear-gradient(90deg,transparent,#060b12dd 18%,#060b12dd 82%,transparent);animation:callout 1.9s cubic-bezier(.2,.9,.3,1) both;text-align:center}
.battle-callout b{font:800 clamp(22px,3.6cqw,44px) var(--display);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 0 18px #e8b955aa,0 3px 0 #000}
.battle-callout small{font:700 clamp(10px,1.1cqw,13px) var(--ui);letter-spacing:.24em;text-transform:uppercase;color:#d8cfb6}
.battle-callout.tone-ult b{color:#e6d4ff;text-shadow:0 0 22px #a77bffcc,0 3px 0 #000}
.battle-callout.tone-rage b,.battle-callout.tone-boss b{color:#ffb39e;text-shadow:0 0 22px #e2604acc,0 3px 0 #000}
@keyframes callout{0%{opacity:0;scale:1.6;filter:blur(6px)}12%{opacity:1;scale:1;filter:none}80%{opacity:1;scale:1}100%{opacity:0;scale:.96;translate:0 -10px}}
.g-arena.shake{animation:arena-shake .28s linear}
.g-arena.shake-strong{animation:arena-shake-strong .42s linear}
@keyframes arena-shake{20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px 0}80%{translate:2px 1px}}
@keyframes arena-shake-strong{15%{translate:-7px 2px}30%{translate:6px -3px}45%{translate:-5px 2px}60%{translate:4px -1px}80%{translate:-2px 1px}}
.battle-danger{position:absolute;inset:0;z-index:310;pointer-events:none;box-shadow:inset 0 0 9cqw #c4231acc;animation:danger-pulse 1.2s ease-in-out infinite alternate}
@keyframes danger-pulse{from{opacity:.35}to{opacity:.85}}
@media (prefers-reduced-motion:reduce){.battle-callout,.battle-danger{animation:none}.g-arena.shake,.g-arena.shake-strong{animation:none}}
/* Erzählte Szenen (Story.jsx): Prolog und Gebietseinleitung im Vollbild mit langsamem Bildzoom und gestaffeltem Text. */
.story-stage{position:fixed;inset:0;z-index:66;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#020509;color:var(--text);overflow:hidden;cursor:pointer;animation:story-in .6s ease-out both}
@keyframes story-in{from{opacity:0}}
.story-art{position:absolute;inset:0;animation:story-zoom 14s ease-out both}
@keyframes story-zoom{from{scale:1.12;filter:brightness(.4)}12%{filter:brightness(1)}to{scale:1}}
.story-image{width:100%;height:100%;object-fit:cover}
.story-placeholder{position:absolute;inset:0;container-type:size}
.story-placeholder>svg,.story-placeholder>img,.story-placeholder>.arena-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-figures{position:absolute;left:8%;right:8%;bottom:30%;display:flex;justify-content:center;align-items:flex-end;gap:2%}
.story-figure{width:min(24cqw,40cqh);aspect-ratio:3/4;animation:story-figure .9s cubic-bezier(.2,.9,.3,1) calc(.5s + var(--i)*.35s) both;filter:drop-shadow(0 14px 18px #000c)}
.story-figure.foe{margin-left:6%;transform:scaleX(-1);filter:drop-shadow(0 14px 18px #000c) brightness(.75) saturate(.8)}
.story-figure>*{width:100%;height:100%}
@keyframes story-figure{from{opacity:0;translate:0 30px}}
.story-shade{position:absolute;inset:0;background:linear-gradient(#0000 35%,#020509d9 72%,#020509),radial-gradient(ellipse at 50% 40%,transparent 50%,#000a);pointer-events:none}
.story-text{position:relative;align-self:end;justify-self:center;width:min(92vw,820px);padding:0 16px 8px;text-align:center}
.story-text small{display:block;font:700 12px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:story-line .7s ease-out .2s both}
.story-text h2{margin:6px 0 10px;font:800 clamp(28px,5.2vw,58px)/1.05 var(--display);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 0 30px #e8b95566,0 3px 0 #000;animation:story-title 1s cubic-bezier(.2,.9,.3,1) .35s both}
.story-text p{margin:6px auto;max-width:62ch;font:500 clamp(15px,2vw,19px)/1.5 var(--ui);color:#e6e0cf;text-shadow:0 2px 6px #000;animation:story-line .8s ease-out calc(1s + var(--n)*1.1s) both}
@keyframes story-title{from{opacity:0;letter-spacing:.4em;filter:blur(6px)}}
@keyframes story-line{from{opacity:0;translate:0 10px}}
.story-stage footer{position:relative;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px max(16px,env(safe-area-inset-bottom));cursor:default}
.story-dots{display:flex;gap:6px}.story-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff33}.story-dots i.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.story-skip{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font:600 14px var(--ui);text-decoration:underline;text-underline-offset:3px}
.story-skip:hover{color:var(--text)}
@media (max-width:640px){.story-figures{bottom:47%;left:0;right:0;gap:0}.story-figure{width:36cqw}.story-figure.foe{margin-left:0}.story-text p{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.story-stage,.story-art,.story-figure,.story-text *{animation:none!important}}

/* Hochkant bleibt die gesamte Erzählillustration sichtbar; seitliche Gefährten werden nicht abgeschnitten. */
@media (max-aspect-ratio:1/1){
.story-art:has(.story-image){animation:none}
.story-image{object-fit:contain;object-position:center top}
}