:root{--gold:#e0b95c;--gold2:#a8802f;--ink:#f2e8d2;--dim:#b9ab8f;--panel:rgba(20,15,11,.84);--panel2:rgba(34,26,18,.9);--line:#6d5428;--red:#d8452e;--green:#55c24a;--blue:#4aa8ff;--serif:'Crimson Pro','Georgia','Times New Roman',serif;--head:'Cinzel','Trajan Pro','Georgia',serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0b09;color:var(--ink);font-family:var(--serif);font-size:17px}
#app{position:fixed;inset:0}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hidden{display:none!important}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.screen>*{pointer-events:auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,220,140,.06),inset 0 0 40px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
h1,h2,h3{font-family:var(--head);margin:0;letter-spacing:.04em;color:var(--gold)}
.btn{font-family:var(--head);font-size:.92rem;letter-spacing:.05em;color:var(--ink);background:linear-gradient(#4a3a24,#2c2216);border:1px solid var(--gold2);border-radius:8px;padding:.55em 1em;cursor:pointer;transition:transform .08s,filter .15s,box-shadow .15s;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,225,150,.18)}
.btn:hover:not(:disabled){filter:brightness(1.25);box-shadow:0 0 14px rgba(224,185,92,.35),inset 0 1px 0 rgba(255,225,150,.25)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{font-size:1.05rem;padding:.8em 1.3em}.btn.small{font-size:.78rem;padding:.35em .7em}.btn.icon{width:2.4rem;height:2.4rem;padding:0;font-size:1.05rem;display:grid;place-items:center}
.btn.primary{background:linear-gradient(#b58a2c,#6e4f14);border-color:#f0cf7a;color:#fff7e0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.btn.ghost{background:rgba(20,15,11,.6)}
input[type=text],input:not([type]),input[type=search],#codeInput,#nameInput{font-family:var(--serif);font-size:1rem;color:var(--ink);background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:6px;padding:.45em .7em;outline:none;width:100%}
input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(224,185,92,.25)}
.hint{color:var(--dim)}.small{font-size:.85rem}
/* Titel */
.logo{margin-top:4vh;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.logo h1{font-size:clamp(2rem,6vw,4.4rem);font-weight:900;color:#f6e3b0;text-shadow:0 2px 0 #6a4a14,0 0 30px rgba(224,185,92,.45),0 6px 30px rgba(0,0,0,.9)}
.logo h1 em{font-style:normal;color:var(--gold)}
.logo p{margin:.3rem 0 0;color:#f3e9d0;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--head);font-size:.9rem;text-shadow:0 2px 10px #000}
.title-menu{position:absolute;bottom:3.2vh;left:50%;transform:translateX(-50%);width:min(1060px,96vw);padding:.8rem 1rem;display:flex;flex-direction:row;align-items:flex-end;gap:.7rem;flex-wrap:wrap}
.title-menu .btn.big{flex:1 1 auto;white-space:nowrap;padding:.7em 1em}.title-menu .field{flex:0 1 180px}.title-menu #titleMsg{flex-basis:100%;margin:0;min-height:0}.field span{display:block;font-size:.8rem;color:var(--dim);margin-bottom:.2rem;font-family:var(--head);letter-spacing:.06em}
.joinrow{display:flex;gap:.5rem;flex:0 1 270px}.joinrow input{width:6.2em;text-transform:uppercase;text-align:center;letter-spacing:.2em;font-family:var(--head)}.joinrow .btn{flex:1}
.foot{position:absolute;bottom:.5vh;left:0;right:0;text-align:center;font-size:.72rem;color:rgba(255,255,255,.6);text-shadow:0 1px 4px #000;pointer-events:none}
.htag{position:absolute;left:0;top:0;text-align:center;line-height:1.05;text-shadow:0 2px 6px #000,0 0 12px #000;pointer-events:none;white-space:nowrap}
.htag b{display:block;font-family:var(--head);font-size:clamp(.7rem,1.25vw,1rem);color:#fff1c8;letter-spacing:.06em}.htag span{font-size:clamp(.6rem,.95vw,.82rem);color:#e6d9b8}
/* Lobby */
#lobby{background:linear-gradient(rgba(8,6,4,.55),rgba(8,6,4,.78));backdrop-filter:blur(3px);overflow:auto}
.lobby-wrap{width:min(1180px,96vw);padding:1.2vh 0 2vh;display:flex;flex-direction:column;gap:.9rem}
.lobby-head{display:flex;align-items:center;gap:1.2rem;padding:.8rem 1.1rem;flex-wrap:wrap}.lobby-head>div:first-child{min-width:12rem}
.roomline{color:var(--dim);font-size:.95rem}.roomline b{color:var(--gold);font-family:var(--head);letter-spacing:.2em;font-size:1.2rem;cursor:pointer}
.players{flex:1;display:flex;gap:.4rem;flex-wrap:wrap}.chip{padding:.2em .7em;border-radius:99px;border:1px solid var(--line);background:rgba(0,0,0,.35);font-size:.85rem}.chip.host{border-color:var(--gold);color:var(--gold)}.chip.me{background:rgba(224,185,92,.18)}
.lobby-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:.9rem}
@media(max-width:900px){.lobby-cols{grid-template-columns:1fr}}
.party,.options{padding:1rem 1.1rem}.party h3,.options h3{margin-bottom:.7rem;font-size:1.05rem}.party h3 small{color:var(--dim);font-family:var(--serif);letter-spacing:0}
.heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.7rem}
@media(max-width:600px){.heroes{grid-template-columns:repeat(2,1fr)}}
.hcard{position:relative;border:1px solid #4a3a22;border-radius:10px;overflow:hidden;background:#17120d;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,filter .15s;filter:grayscale(.85) brightness(.65)}
.hcard:hover{transform:translateY(-3px);filter:grayscale(.3) brightness(.95)}
.hcard.mine{filter:none;border-color:var(--gold);box-shadow:0 0 18px rgba(224,185,92,.45)}
.hcard.other,.hcard.ai{filter:none;border-color:#5a7ea8;box-shadow:0 0 12px rgba(90,126,168,.4)}
.hcard img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.hcard .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .4rem .35rem;background:linear-gradient(transparent,rgba(0,0,0,.92));text-align:center;line-height:1.05}
.hcard .cap b{display:block;font-family:var(--head);font-size:.82rem;color:#fff1c8}.hcard .cap span{font-size:.7rem;color:var(--dim)}
.hcard .own{position:absolute;top:.3rem;left:.3rem;right:.3rem;font-size:.7rem;text-align:center;padding:.1em .4em;border-radius:99px;background:rgba(0,0,0,.7);border:1px solid var(--gold2);color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .hostbtn{position:absolute;top:.3rem;right:.3rem;display:flex;gap:2px}.hcard .hostbtn button{font-size:.65rem;border:1px solid var(--line);background:rgba(0,0,0,.75);color:var(--ink);border-radius:4px;cursor:pointer;padding:1px 4px}
.hcard .hstats{position:absolute;inset:0;background:rgba(10,8,5,.92);padding:.5rem;font-size:.74rem;opacity:0;transition:opacity .18s;pointer-events:none;overflow:hidden}.hcard:hover .hstats{opacity:1}.hcard .hstats b{color:var(--gold);font-family:var(--head);font-size:.78rem}.hcard .hstats div{margin-bottom:.15rem;line-height:1.15}
.row{display:flex;gap:.6rem;align-items:center}.row.tight{gap:.4rem}
.scenes{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin-bottom:.8rem}
.scard{padding:.5rem .2rem;text-align:center;border:1px solid #4a3a22;border-radius:10px;background:#17120d;cursor:pointer;transition:all .15s;font-size:.78rem;line-height:1.1}.scard i{display:block;font-style:normal;font-size:1.6rem;margin-bottom:.15rem}.scard:hover{border-color:var(--gold2)}.scard.sel{border-color:var(--gold);background:linear-gradient(#3b2d18,#1e170e);box-shadow:0 0 14px rgba(224,185,92,.35)}.scard.dis{opacity:.5;pointer-events:none}
.sceneDesc{font-size:.85rem;color:var(--dim);margin:-.4rem 0 .7rem;min-height:2.4em}
.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;margin:.5rem 0;cursor:pointer;color:#e0d4b8}.check input{margin-top:.25rem;accent-color:var(--gold)}
.sliderrow{display:flex;align-items:center;gap:.7rem;margin:.6rem 0}.sliderrow>span{width:7.5rem;color:var(--dim);font-family:var(--head);font-size:.78rem;letter-spacing:.04em;flex-shrink:0}.sliderrow input[type=range]{flex:1;accent-color:var(--gold)}.sliderrow b{width:3.6rem;text-align:right;color:var(--gold);font-family:var(--head)}
.sliderrow input[type=text]{flex:1}
.seg{display:flex;flex:1;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg button{flex:1;padding:.4em .2em;border:0;background:#17120d;color:var(--dim);cursor:pointer;font-family:var(--head);font-size:.72rem;border-right:1px solid var(--line)}.seg button:last-child{border-right:0}.seg button.sel{background:linear-gradient(#b58a2c,#6e4f14);color:#fff7e0}
.lobby-foot{display:flex;align-items:center;gap:1rem;justify-content:center}.lobby-foot .hint{font-size:.9rem}
.lock{pointer-events:none;opacity:.6}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}#hud>*{pointer-events:auto}
#topbar{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;align-items:flex-start;gap:.8rem;pointer-events:none}#topbar>*{pointer-events:auto}
.pill{padding:.45rem .9rem;font-family:var(--head);font-size:.85rem;color:var(--gold);white-space:nowrap}.pill small{color:var(--dim);font-family:var(--serif);font-size:.85rem;margin-left:.5rem}
.order{flex:1;display:flex;gap:.3rem;justify-content:center;overflow:hidden;pointer-events:none}.order>*{pointer-events:auto}
.chipu{position:relative;width:46px;height:56px;border-radius:8px;border:2px solid #3a3a46;background:#15171d;overflow:hidden;cursor:pointer;flex:0 0 auto;transition:transform .15s,box-shadow .15s}
.chipu.hero{border-color:#2f7fbf}.chipu.enemy{border-color:#8f3328;background:linear-gradient(#2a1512,#140a09)}
.chipu.cur{transform:translateY(4px) scale(1.18);box-shadow:0 0 16px rgba(255,210,74,.9);border-color:#ffd24a;z-index:2}
.chipu img{width:100%;height:100%;object-fit:cover;object-position:top}.chipu .em{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem}
.chipu .mini{position:absolute;left:0;right:0;bottom:0;height:5px;background:#000}.chipu .mini i{display:block;height:100%;background:var(--green)}
.chipu.ai::after{content:'🤖';position:absolute;top:0;right:1px;font-size:.6rem}
.topbtns{display:flex;gap:.4rem;margin-left:auto}
.turnbanner{position:absolute;top:4.6rem;left:50%;transform:translateX(-50%);padding:.35rem 1.2rem;font-family:var(--head);color:var(--gold);font-size:.9rem;letter-spacing:.08em;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:99px;pointer-events:none!important}
#unitPanel{position:absolute;left:.6rem;bottom:.6rem;width:min(300px,42vw);padding:.7rem .8rem;display:flex;gap:.7rem}
#unitPanel .pic{width:76px;height:96px;border-radius:8px;border:2px solid var(--gold2);overflow:hidden;background:#111;flex:0 0 auto;display:grid;place-items:center;font-size:2.6rem}.pic img{width:100%;height:100%;object-fit:cover;object-position:top}
#unitPanel .info{flex:1;min-width:0}#unitPanel h4{margin:0;font-family:var(--head);font-size:1rem;color:#fff1c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#unitPanel .sub{font-size:.78rem;color:var(--dim);margin-bottom:.3rem}
.bar{position:relative;height:13px;background:#0b0907;border:1px solid #3a2e1a;border-radius:4px;margin:3px 0;overflow:hidden}.bar i{display:block;height:100%}.bar span{position:absolute;inset:0;text-align:center;font-size:.68rem;line-height:13px;color:#fff;text-shadow:0 1px 2px #000;font-family:var(--head)}
.bar.le i{background:linear-gradient(#e0553b,#a22a16)}.bar.aup i{background:linear-gradient(#e0c040,#9a7c14)}.bar.asp i{background:linear-gradient(#5a9aff,#2a54b0)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 6px;font-size:.72rem;margin-top:.3rem}.stats div{color:var(--dim)}.stats b{color:var(--ink);font-family:var(--head)}
.sts{margin-top:.25rem;font-size:.78rem;min-height:1.1em}
.actionbar{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);display:flex;gap:.4rem;align-items:flex-end;max-width:calc(100vw - 660px);flex-wrap:wrap;justify-content:center}
@media(max-width:1100px){.actionbar{max-width:calc(100vw - 20px);bottom:7.4rem}}
.abtn{position:relative;width:76px;height:70px;border-radius:10px;border:2px solid var(--gold2);background:linear-gradient(#3b2d19,#1c150d);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--head);font-size:.58rem;line-height:1.05;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.6);transition:transform .1s,box-shadow .15s}
.abtn .ic{font-size:1.5rem;line-height:1.1}.abtn .nm{padding:0 2px;margin-top:2px;font-size:.58rem;word-break:break-word}.abtn .key{position:absolute;top:1px;left:4px;font-size:.6rem;color:var(--gold)}.abtn .cost{position:absolute;top:1px;right:4px;font-size:.6rem;color:#9cd0ff}.abtn .cost.aup{color:#ffe08a}
.abtn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 0 16px rgba(224,185,92,.5)}.abtn.sel{border-color:#fff2b0;box-shadow:0 0 20px rgba(255,235,150,.85);background:linear-gradient(#6a4e1c,#33250f)}.abtn:disabled{opacity:.4;cursor:not-allowed}
.abtn.end{width:84px;margin-left:.4rem;border-color:#9a4a3a;background:linear-gradient(#5a2a20,#2a120d)}
#logPanel{position:absolute;right:.6rem;bottom:.6rem;width:min(340px,38vw);height:min(210px,28vh);padding:.4rem .5rem;overflow:hidden}
#log{height:100%;overflow-y:auto;font-size:.82rem;line-height:1.28;scrollbar-width:thin;scrollbar-color:#6d5428 transparent}
#log div{padding:1px 0;border-bottom:1px solid rgba(255,255,255,.04)}
#log .sys{color:var(--gold);font-family:var(--head);font-size:.75rem}#log .hit,#log .dmg{color:#ffb4a0}#log .miss{color:#a9a9a9}#log .parry{color:#bcd7ff}#log .good,#log .heal{color:#9ff0a0}#log .bad{color:#ff8f7a}#log .kill{color:#ffd24a}#log .buff{color:#9cd0ff}#log .chat{color:#e8d8ff}
.cambtns{position:absolute;right:.6rem;top:4.2rem;display:flex;flex-direction:column;gap:.3rem}
.banner{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);font-family:var(--head);font-size:clamp(1.6rem,5vw,3.4rem);font-weight:900;color:#fff1c8;text-shadow:0 0 30px rgba(224,185,92,.9),0 4px 18px #000;letter-spacing:.1em;pointer-events:none!important;animation:ban 1.7s ease-out forwards;white-space:nowrap}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}
.banner.mine{color:#ffe08a}.banner.foe{color:#ff8a7a}
/* Beschriftungen in der Szene */
.ubar{position:absolute;left:0;top:0;text-align:center;pointer-events:none;will-change:transform;white-space:nowrap}
.ubar .uname{font-family:var(--head);font-size:.62rem;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;margin-bottom:1px;opacity:.0;transition:opacity .2s}
.ubar.boss .uname,.ubar.active .uname,.ubar.hov .uname{opacity:1}
.ubar .hp{position:relative;width:42px;height:6px;margin:0 auto;background:#000;border:1px solid rgba(0,0,0,.9);border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.ubar.boss .hp{width:60px;height:8px}
.ubar .hp i,.ubar .hp b{position:absolute;left:0;top:0;bottom:0;display:block}.ubar .hp b{background:#fff;opacity:.35;transition:width .8s .25s}.ubar .hp i{transition:width .3s}
.ubar .st{font-size:.65rem;text-shadow:0 1px 2px #000;min-height:.8rem}.ubar.active .hp{box-shadow:0 0 0 1px #ffd24a,0 0 8px #ffd24a}
.floater{position:absolute;left:0;top:0;font-family:var(--head);font-weight:900;font-size:1.25rem;color:#fff;text-shadow:0 2px 4px #000,0 0 10px #000;pointer-events:none;white-space:nowrap;will-change:transform}
.floater.dmg{color:#ff5a44;font-size:1.5rem}.floater.crit{color:#ffd24a;font-size:2.1rem}.floater.heal{color:#6bff8a;font-size:1.5rem}.floater.miss{color:#c8c8c8;font-size:.95rem}.floater.parry{color:#a8d0ff;font-size:1rem}.floater.bad{color:#ff7a5a}.floater.wound{color:#ff3030;font-size:1rem}.floater.status{color:#e8d8ff;font-size:.95rem}
.tip{position:fixed;z-index:50;max-width:280px;padding:.5rem .7rem;background:rgba(14,10,7,.95);border:1px solid var(--gold2);border-radius:8px;font-size:.82rem;line-height:1.3;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.6)}.tip b{color:var(--gold);font-family:var(--head)}.tip .g{color:#9ff0a0}.tip .r{color:#ff9a86}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:60}
.helpbox,.resultbox{padding:1.4rem 1.6rem;max-width:min(560px,92vw)}.helpbox ul{padding-left:1.1rem;line-height:1.5}.helpbox li{margin:.2rem 0}
.resultbox{text-align:center}.resultbox h2{font-size:2.4rem;margin-bottom:.4rem}.resultbox.won h2{color:#ffe08a;text-shadow:0 0 24px rgba(255,210,74,.7)}.resultbox.lost h2{color:#ff7a66}.resultbox .row{justify-content:center;margin-top:1rem}
.toast{position:absolute;left:50%;bottom:9rem;transform:translateX(-50%);padding:.55rem 1.1rem;background:rgba(60,18,12,.95);border:1px solid #c85a40;border-radius:8px;z-index:70;font-size:.95rem;pointer-events:none}
.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;background:#0d0b09;z-index:100;font-family:var(--head);color:var(--gold);transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}
.spinner{width:42px;height:42px;border:4px solid #3a2e1a;border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:700px){#order{display:none}.logo p{display:none}#unitPanel{display:none}#logPanel{height:20vh;width:46vw}.abtn{width:54px;height:54px}.actionbar{bottom:21vh}}

#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.38) 100%);z-index:1}
#labels{z-index:2}.screen,#hud{z-index:3}
@media(max-height:620px){#unitPanel{width:min(260px,40vw);padding:.4rem .5rem}#unitPanel .pic{width:56px;height:70px}#unitPanel .stats{display:none}#logPanel{height:min(140px,26vh)}.abtn{height:58px;width:66px}.actionbar{bottom:.4rem}}

.btn{border-radius:12px}.abtn{border-radius:16px}.hcard,.scard{border-radius:16px}.chipu{border-radius:12px}

/* Mobil: Lobby muss scrollbar sein (Container selbst war pointer-events:none) */
#lobby{pointer-events:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;height:100%;justify-content:flex-start}
.lobby-wrap{padding-bottom:max(3rem,env(safe-area-inset-bottom))}
@media(max-width:700px){.lobby-wrap{width:94vw}.heroes{grid-template-columns:repeat(2,1fr)}.scenes{grid-template-columns:repeat(3,1fr)}.sliderrow>span{width:5.5rem}.lobby-foot{flex-direction:column}}