/* ============================================================
   DUEL-PLUS (Runde 59): Symbole, Sieg/Niederlage, Kartenvorschau, Ansichten, Dialog-Box
   ============================================================ */

/* ---------- Symbole ---------- */
i.ic{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:0}
.ic-svg{width:1.15em;height:1.15em;flex:none;display:block}
button .ic-svg{width:18px;height:18px}

/* ---------- Steuerleiste im Duell: Symbole statt Text ---------- */
.ctrl .nextbtn{display:flex;align-items:center;justify-content:center;gap:7px}
.ctrl .nextbtn .ic-svg{width:16px;height:16px}
.ctrl .nextbtn[data-ph="battle"] .ic-svg{color:#120d03}
.ctrl-row{display:flex;gap:6px;align-items:stretch}
.ctrl-row .ib{flex:1 1 0;min-width:0;padding:8px 0;display:flex;align-items:center;justify-content:center}
.ctrl-row .ib .ic-svg{width:19px;height:19px}
.ctrl-row .cancelbtn{flex:2 1 0;display:flex;align-items:center;justify-content:center;gap:6px;border-color:var(--red);color:var(--red)}
.ctrl-row .cancelbtn[style*="display: none"]{display:none!important}
.dside .ctrl button,.dside .ctrl-row button{width:auto}
.dside .ctrl .nextbtn{width:100%}
body.a3d .app .ctrl-row{width:100%}
body.a3d .app .ctrl button{flex:none}
body.a3d .app .ctrl-row button{flex:1 1 0}
@media (orientation:portrait){ body.a3d .app .ctrl{flex-wrap:nowrap;align-items:stretch} body.a3d .app .ctrl .nextbtn{flex:1 1 60%;width:auto} body.a3d .app .ctrl-row{flex:1 1 40%;width:auto} }

/* ---------- Phasenleiste: Symbole ---------- */
.ph.ico{padding:3px 5px;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ph.ico .ic-svg{width:14px;height:14px}
.ph.ico.on{box-shadow:0 0 10px rgba(214,178,94,.55)}
.turnno{display:inline-flex;align-items:center;gap:4px}
.turnno .ic-svg{width:13px;height:13px}
.turnno b{font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.who-dot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
.who-dot.me{background:var(--cyan);color:var(--cyan)}.who-dot.opp{background:#ffb26e;color:#ffb26e}
#historyBtn .ic-svg{width:16px;height:16px;color:var(--gold)}
#camBtn{display:none;padding:4px 6px;line-height:0}
body.a3d #camBtn{display:inline-flex;align-items:center}
#camBtn .ic-svg{width:16px;height:16px}

/* ---------- LP mit Herz, Zonen mit Symbolen ---------- */
.duelist .lp{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.duelist .lp::before{content:"";width:.7em;height:.7em;flex:none;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.800-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.800-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat}
.zone.aux .auxlabel{display:flex;align-items:center;justify-content:center}
.zone.aux .auxlabel .ic-svg{width:1.7em;height:1.7em;opacity:.85}
.zone.aux .auxlabel i.ic{font-size:.9rem}
.zone.aux.deckz .auxlabel{color:rgba(78,225,232,.85)}.zone.aux.gyz .auxlabel{color:rgba(226,87,76,.9)}.zone.aux.exz .auxlabel{color:#cf9dff}
.zone.aux.exz.ready{animation:exReady 1.5s ease-in-out infinite;border-style:solid}
.zone.aux.exz.ready::after{content:"";position:absolute;right:-6px;top:-6px;width:16px;height:16px;border-radius:50%;z-index:8;pointer-events:none;
  background:#cf9dff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23120d03'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 10px #cf9dff}
@keyframes exReady{50%{box-shadow:0 0 16px 2px rgba(207,157,255,.75),inset 0 0 12px rgba(207,157,255,.4)}}

/* ---------- Aktionsmenü (Blatt) mit Symbolen ---------- */
.sheetbox .opts button{display:flex;align-items:center;gap:10px;text-align:left}
.sheetbox .opts button .lb-ic{flex:none;display:inline-flex;width:22px;justify-content:center;color:var(--gold)}
.sheetbox .opts button.ghost .lb-ic{color:#8791a5}
.sheetbox .opts button:active .lb-ic{color:#120d03}
.sheetbox .opts button:disabled .lb-ic{opacity:.4}
.sheetbox .opts button .lb-tx{flex:1;min-width:0}

/* ---------- Sieg / Niederlage ---------- */
#endScene{position:fixed;inset:0;z-index:1990;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s;cursor:pointer;-webkit-tap-highlight-color:transparent}
#endScene.on{opacity:1}#endScene.out{opacity:0;transition:opacity .35s}
#endScene .end-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#endScene .es-vig{position:absolute;inset:0;pointer-events:none}
#endScene.win .es-vig{background:radial-gradient(ellipse at 50% 42%,rgba(255,236,160,.22),rgba(255,200,90,.05) 45%,rgba(20,10,0,.55) 100%)}
#endScene.lose .es-vig{background:radial-gradient(ellipse at 50% 46%,rgba(10,14,30,.15),rgba(6,8,18,.78) 100%)}
.es-title{position:relative;text-align:center;padding:0 16px;transform:translateY(-4vh)}
.es-word{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:900;font-size:clamp(2.2rem,11vmin,5.4rem);letter-spacing:.18em;padding-left:.18em;display:flex;justify-content:center;line-height:1.05}
.es-word span{display:inline-block;opacity:0}
#endScene.win .es-word{color:#ffe58a;text-shadow:0 0 22px rgba(255,214,110,.85),0 3px 0 #7a5a10,0 0 60px rgba(255,190,60,.55)}
#endScene.win .es-word span{animation:esWin .7s cubic-bezier(.2,1.5,.4,1) calc(.25s + var(--i)*.09s) forwards}
#endScene.lose .es-word{color:#aeb8d0;text-shadow:0 2px 0 #222a3e,0 0 30px rgba(20,30,60,.9)}
#endScene.lose .es-word span{animation:esLose 1.1s cubic-bezier(.3,.7,.3,1) calc(.3s + var(--i)*.08s) forwards}
@keyframes esWin{0%{opacity:0;transform:translateY(-40px) scale(2.2) rotate(-8deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes esLose{0%{opacity:0;transform:translateY(-26px) scale(1.15);filter:blur(5px)}100%{opacity:.95;transform:none;filter:none}}
.es-why{margin-top:10px;font-size:clamp(.72rem,2.6vmin,1rem);letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:esWhy .6s ease 1.1s forwards}
#endScene.win .es-why{color:#fff2b8}#endScene.lose .es-why{color:#8f9bb8}
@keyframes esWhy{to{opacity:.9}}
.es-skip{position:absolute;left:0;right:0;bottom:calc(14% + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:6px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);opacity:0;animation:esWhy .5s ease 2.4s forwards}
.es-skip .ic-svg{width:12px;height:12px}
.banner.win h2{color:#ffe58a;text-shadow:0 0 18px rgba(255,214,110,.6)}
.banner.lose h2{color:#aeb8d0}
.banner.on h2{animation:bnIn .6s cubic-bezier(.2,1.2,.4,1) both}
.banner.on button{animation:bnIn .6s cubic-bezier(.2,1.2,.4,1) .25s both}
@keyframes bnIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- Friedhof / Extra Deck: Übersicht mit Vorschau ---------- */
.pv{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;background:rgba(5,8,15,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pv.on{display:flex;animation:pvIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes pvIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pv-head{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--edge);background:var(--panel)}
.pv-head h3{margin:0;flex:1;font-size:.92rem;font-weight:400;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-ic{display:inline-flex;color:var(--gold)}.pv[data-kind="gy"] .pv-ic{color:var(--red)}.pv[data-kind="extra"] .pv-ic{color:#cf9dff}
.pv-ic .ic-svg{width:22px;height:22px}
.pv-chips{display:flex;gap:5px}
.pv-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:14px;border-color:#2b3650;color:#9aa4b8}
.pv-chip .ic-svg{width:15px;height:15px}.pv-chip b{font-weight:400;font-size:.7rem;font-variant-numeric:tabular-nums}
.pv-chip.on{border-color:var(--gold);color:var(--gold);background:rgba(214,178,94,.1)}
.pv-head .ib{padding:6px 8px;line-height:0}
.pv-body{flex:1;min-height:0;display:flex}
.pv-grid{flex:1 1 55%;min-width:0;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;align-content:start;-webkit-overflow-scrolling:touch}
.pv-tile{position:relative;padding:0;border:0;background:none;border-radius:6px;cursor:pointer;transition:transform .12s}
.pv-tile .face{width:100%;box-shadow:0 5px 12px rgba(0,0,0,.55)}
.pv-tile:active{transform:scale(.96)}
.pv-tile.sel .face{outline:2px solid var(--cyan);outline-offset:2px}
.pv-tile.ready .face{outline:2px solid #cf9dff;outline-offset:2px;box-shadow:0 0 14px rgba(207,157,255,.55)}
.pv-tile.ready.sel .face{outline-color:var(--cyan)}
.pv-bolt{position:absolute;right:-4px;top:-5px;width:20px;height:20px;border-radius:50%;background:#cf9dff;color:#120d03;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #cf9dff}
.pv-bolt .ic-svg{width:12px;height:12px}
.pv-none,.pv-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px 12px;color:var(--mute);font-size:.78rem;text-align:center;line-height:1.5}
.pv-none .ic-svg,.pv-empty .ic-svg{width:34px;height:34px;opacity:.6}
.pv-side{flex:1 1 45%;max-width:420px;min-width:0;overflow-y:auto;padding:12px 14px;border-left:1px solid var(--edge);background:linear-gradient(180deg,rgba(19,29,49,.7),rgba(10,15,26,.7));display:flex;flex-direction:column;gap:12px}
.pv-card{align-self:center;width:min(210px,52%);flex:none}
.pv-card .face{width:100%;box-shadow:0 12px 26px rgba(0,0,0,.65);animation:pvCard .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes pvCard{from{opacity:0;transform:translateY(10px) scale(.92) rotateY(18deg)}to{opacity:1;transform:none}}
.pv-info h4{margin:0 0 6px;font-weight:400;font-size:1rem;color:var(--gold);line-height:1.25}
.pv-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;font-size:.74rem;color:#c7cfdc}
.pv-ty{display:inline-flex;align-items:center;gap:5px;color:var(--mute)}.pv-ty .ic-svg,.pv-st .ic-svg{width:15px;height:15px}
.pv-st{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;color:var(--gold)}
.pv-txt{font-size:.76rem;line-height:1.55;color:#a9b3c4}
.pv-act{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;background:#cf9dff;border-color:#cf9dff}
.pv-act:disabled{opacity:.45}
.pv-why{margin-top:6px;font-size:.66rem;color:var(--red);line-height:1.4}
@media (orientation:portrait){
  .pv-body{flex-direction:column-reverse}.pv-side{max-width:none;flex:0 0 auto;max-height:46vh;border-left:0;border-bottom:1px solid var(--edge);flex-direction:row;gap:12px}
  .pv-card{width:96px;align-self:flex-start;flex:none}.pv-info{flex:1;min-width:0}
}
@media (orientation:landscape) and (max-height:520px){
  .pv-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;padding:8px}.pv-card{width:min(150px,44%)}.pv-side{padding:8px 10px;gap:8px}
  .pv-info h4{font-size:.9rem}.pv-txt{font-size:.7rem}
}

/* ---------- Ansichten-Leiste + Leerlauf-Kamera ---------- */
#viewBar{position:fixed;left:calc(8px + env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:7;display:none;flex-direction:column;gap:4px;padding:4px;border-radius:10px;
  background:rgba(6,16,32,.6);border:1px solid rgba(90,225,245,.32);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#viewBar.on{display:flex}
#viewBar button{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#9fb4c8;line-height:0}
#viewBar button .ic-svg{width:17px;height:17px}
#viewBar button.on{color:#120d03;background:var(--gold);border-color:var(--gold)}
@media (orientation:portrait){ #viewBar{top:auto;bottom:calc(clamp(110px,22vh,190px)*.78 + 62px);flex-direction:row;left:50%;transform:translateX(-50%)} }
body.duel-intro #viewBar,body.end-scene #viewBar{opacity:0;pointer-events:none}
body.idle-cam .app .duelist,body.idle-cam .app .ctrl,body.idle-cam .app .dpanel,body.idle-cam .app .ticker{opacity:0!important;pointer-events:none!important;transition:opacity 1.2s ease}
body.idle-cam .app .board .zone.aux{opacity:.35;transition:opacity 1.2s}
.app .strip,.app .duelist,.app .ctrl,.app .dpanel,.app .ticker,#viewBar{transition:opacity .5s ease}
body.idle-cam:not(.end-scene)::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%)}

/* ---------- Dialog-Box mit Porträt (Oberwelt) ---------- */
.dialog{overflow:visible}
.dialog.on{animation:dlgIn2 .36s cubic-bezier(.2,1.25,.4,1)}
@keyframes dlgIn2{0%{opacity:0;transform:translateY(22px) scale(.94,.8);clip-path:inset(0 0 55% 0 round 16px)}55%{opacity:1;clip-path:inset(0 0 0 0 round 16px)}100%{opacity:1;transform:none;clip-path:none}}
.dlg-portrait{display:none;position:absolute;left:14px;top:-34px;width:72px;height:72px;border-radius:14px;image-rendering:pixelated;
  background:radial-gradient(circle at 50% 35%,#1d2a45,#0a0f1b);border:2px solid var(--gold);box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 0 3px rgba(10,15,27,.9);z-index:2}
.dialog.hasP .dlg-portrait{display:block;animation:portIn .5s cubic-bezier(.2,1.5,.4,1) .08s both}
@keyframes portIn{from{opacity:0;transform:translateY(22px) scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
.dialog.hasP.talking .dlg-portrait{animation:portIn .5s cubic-bezier(.2,1.5,.4,1) .08s both,portTalk .42s ease-in-out .6s infinite}
@keyframes portTalk{50%{transform:translateY(-2px) scale(1.03)}}
.dialog.hasP .who{margin-left:88px}
.dialog.hasP.nowho .who{display:none}
.dialog.on .who{animation:whoIn .32s cubic-bezier(.2,1.5,.4,1) .16s both}
@keyframes whoIn{from{opacity:0;transform:translateX(-12px) scale(.85)}to{opacity:1;transform:none}}
.dialog .txt.typing::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--gold);opacity:.85;animation:caret .55s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.dialog .choices button{animation:choiceIn .3s cubic-bezier(.2,1.3,.4,1) both}
.dialog .choices button:nth-child(2){animation-delay:.05s}.dialog .choices button:nth-child(3){animation-delay:.1s}.dialog .choices button:nth-child(4){animation-delay:.15s}
@keyframes choiceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Belauschte Gespräche (NPC mit NPC) ---------- */
#overhear{position:fixed;left:calc(10px + env(safe-area-inset-left));top:calc(52px + env(safe-area-inset-top));z-index:6;max-width:min(330px,calc(100vw - 20px));display:flex;gap:9px;align-items:flex-start;padding:8px 12px 9px 8px;
  background:linear-gradient(180deg,rgba(19,29,49,.94),rgba(10,15,26,.95));border:1px solid var(--edge);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-14px) scale(.92);transform-origin:0 0;pointer-events:none;transition:opacity .28s,transform .34s cubic-bezier(.2,1.4,.4,1)}
#overhear.on{opacity:1;transform:none}
#overhear canvas{flex:0 0 42px;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--gold);background:#0a0f1b;image-rendering:pixelated}
#overhear .oh-b{min-width:0}
#overhear .oh-who{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:2px;display:flex;align-items:center;gap:5px}
#overhear .oh-who::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:ohDot 1s ease-in-out infinite}
@keyframes ohDot{50%{opacity:.3}}
#overhear .oh-t{font-size:.8rem;line-height:1.4;color:var(--ink);min-height:1.4em}
#overhear .oh-t.typing::after{content:"";display:inline-block;width:.4em;height:.9em;margin-left:2px;vertical-align:-.1em;background:var(--gold);animation:caret .5s steps(2) infinite}
body.in-duel #overhear{display:none}
@media (max-height:520px){ #overhear{top:calc(46px + env(safe-area-inset-top));max-width:min(300px,calc(100vw - 20px))} }
@media (prefers-reduced-motion:reduce){ .es-word span,.es-why,.es-skip{animation-duration:.01s!important;animation-delay:0s!important} .dialog.on,.dlg-portrait{animation:none!important} }

/* Runde 60: 3D-Bühne hinter der Dialogbox (nur Oberkörper) */
#dlgStage{position:absolute;left:10px;right:10px;max-width:600px;margin:0 auto;bottom:100px;height:min(30vh,190px);display:none;justify-content:space-between;align-items:flex-end;padding:0 3%;pointer-events:none;z-index:4}
#dlgStage.on{display:flex}
#dlgStage canvas{height:100%;width:auto;aspect-ratio:1/1;filter:brightness(.6) saturate(.8);transform:translateY(6px) scale(.96);transition:filter .3s,transform .3s;transform-origin:50% 100%}
#dlgStage canvas.sp{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));transform:translateY(0) scale(1.04)}
#dlgStage.solo .ds-npc{display:none}
.dialog.hasStage .dlg-portrait{display:none}
.dialog.hasStage.hasP .who{margin-left:0}

/* Runde 60b: Abbruch-Knopf der Kamerafahrt + „Nächste Phase“ in der oberen Leiste */
#viewBar .vb-stop{display:none;color:#ffd0c8}
body.idle-cam #viewBar{opacity:1!important;pointer-events:auto!important}
body.idle-cam #viewBar button:not(.vb-stop){display:none}
body.idle-cam #viewBar .vb-stop{display:flex;background:rgba(200,60,50,.35);border-color:rgba(255,120,100,.6)}
body .app .strip #next.in-strip{width:auto!important;flex:none!important;height:30px;min-height:0;padding:0 11px;font-size:.74rem;gap:5px;white-space:nowrap;border-radius:9px}
body .app .strip #next.in-strip .ic-svg{width:15px;height:15px}
body .app .strip #next.in-strip #nextTxt{max-width:30vw;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ body .app .strip #next.in-strip{width:34px!important;padding:0} body .app .strip #next.in-strip #nextTxt{display:none} }
body.a3d .app .ctrl-row{flex:1 1 100%!important}

/* Runde 60c: Kamera-Menü (Knopf oben links) statt eigener Ansichten-Leiste */
#camMenu{position:fixed;z-index:70;display:flex;flex-direction:column;min-width:158px;padding:5px;border-radius:12px;background:rgba(6,16,32,.97);border:1px solid rgba(90,225,245,.42);box-shadow:0 10px 30px rgba(0,0,0,.6);animation:camIn .16s ease-out}
@keyframes camIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
#camMenu button{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;background:transparent;color:#cfe6f5;font:inherit;font-size:.84rem;border-radius:8px;text-align:left;cursor:pointer;line-height:1.2;width:100%}
#camMenu button .ic-svg{width:18px;height:18px;flex:none}
#camMenu button.on{background:var(--gold);color:#120d03}
body.idle-cam .app .strip{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none!important}
body.idle-cam .app .strip>:not(#camBtn){opacity:0;pointer-events:none;transition:opacity 1.2s}
body.idle-cam #camBtn{background:rgba(200,60,50,.55)!important;border-color:#ff8a78!important;opacity:1!important;pointer-events:auto!important}
body.idle-cam #camBtn .ic-svg{display:none}
body.idle-cam #camBtn::after{content:"✕ Stopp";font-size:.74rem;color:#fff;line-height:1.5;padding:0 3px}


/* ---- Handkarte antippen: Symbolleiste (Beschwören / Setzen / Aktivieren / Details) ---- */
#handBar{position:fixed;z-index:110;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:calc(100vw - 16px);animation:hbIn .18s ease-out;pointer-events:none}
@keyframes hbIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
#handBar .hb-cap{pointer-events:none;max-width:min(300px,86vw);padding:4px 12px;border-radius:12px;background:rgba(6,10,18,.88);border:1px solid rgba(214,178,94,.4);color:var(--gold,#d6b25e);font-size:.7rem;line-height:1.35;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#handBar .hb-cap.bad{color:#f0a89f;border-color:rgba(226,87,76,.55)}
#handBar .hb-row{display:flex;gap:10px;pointer-events:auto}
#handBar .hb-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;padding:8px 8px 6px;border-radius:16px;border:1px solid rgba(214,178,94,.55);background:linear-gradient(180deg,rgba(28,36,54,.96),rgba(10,14,24,.96));color:#f3e6bd;font-family:inherit;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 14px rgba(214,178,94,.18);transition:transform .12s,background .12s}
#handBar .hb-btn:active{transform:scale(.93);background:#d6b25e;color:#120d03}
#handBar .hb-ic{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:rgba(214,178,94,.14);color:var(--gold,#d6b25e)}
#handBar .hb-ic svg{width:22px;height:22px}
#handBar .hb-btn:active .hb-ic{color:#120d03;background:rgba(0,0,0,.12)}
#handBar .hb-lb{font-size:.62rem;letter-spacing:.04em;white-space:nowrap}
#handBar .hb-sub{font-size:.54rem;color:#9fead6;margin-top:-2px;white-space:nowrap}
#handBar .hb-btn.info .hb-ic{color:#7fe0c6;background:rgba(127,224,198,.12)}
#handBar .hb-btn.off{opacity:.45;border-color:rgba(255,255,255,.18)}
#handBar .hb-btn.off .hb-ic{color:#8791a5}
.hand .hc.sel{z-index:20;transform:translateY(-14px)!important;filter:drop-shadow(0 0 10px rgba(214,178,94,.8))}
body.a3d .app .hand .hc.sel{transform:translateY(-22px) scale(1.06)!important}

/* ---- Details: mehr Kartendaten, erhöhte Werte hervorgehoben ---- */
.sheethead .desc{max-height:min(46vh,340px);font-size:.74rem}
.ci-chips,.ci-state{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.ci-chips span{padding:2px 8px;border-radius:9px;border:1px solid rgba(214,178,94,.4);background:rgba(214,178,94,.08);color:#e9d9a4;font-size:.64rem;letter-spacing:.03em}
.ci-state span{padding:2px 8px;border-radius:9px;background:rgba(127,224,198,.1);border:1px solid rgba(127,224,198,.35);color:#9fead6;font-size:.62rem}
.ci-stats{display:flex;gap:8px;margin:0 0 8px}
.ci-stat{flex:1;min-width:0;padding:5px 9px 6px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.ci-stat span{font-size:.6rem;letter-spacing:.12em;color:#8791a5}
.ci-stat b{font-size:1.2rem;font-weight:600;color:#f3e6bd}
.ci-stat small{flex-basis:100%;font-size:.6rem}
.ci-stat.up{border-color:rgba(127,224,198,.6);background:rgba(127,224,198,.1);box-shadow:0 0 12px rgba(127,224,198,.18)}
.ci-stat.up b,.ci-stat.up small{color:#7fe0c6}
.ci-stat.down{border-color:rgba(226,87,76,.55);background:rgba(226,87,76,.09)}
.ci-stat.down b,.ci-stat.down small{color:#f0a89f}
.ci-blk{margin:0 0 7px;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.04);line-height:1.5}
.ci-blk h5{margin:0 0 2px;font-weight:400;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#8791a5}
.ci-blk.fx{background:rgba(127,224,198,.07);color:#c9f3e8}
.ci-blk.warn{color:#e8b07a;background:rgba(232,176,122,.08)}
@media (max-width:560px) and (orientation:portrait){ .sheethead{flex-direction:column;align-items:center} .sheethead .txt{width:100%} .sheethead .face{flex-basis:auto;width:132px;height:184px} }


/* ============================================================
   RUNDE 61: Duell-GUI unten am Bildschirm
   LP-Tafeln, Phasenleiste, „Nächste Phase“ und Symbolknöpfe sitzen in einer Leiste am unteren Rand (bei schmalen
   Bildschirmen umbrechend). Die Handkarten liegen direkt darüber, das Feld rückt entsprechend nach oben
   (Höhe der Leiste misst duel-plus.js und schreibt sie nach --hud-h).
   ============================================================ */
body.a3d .app{display:flex!important;flex-flow:row wrap;align-content:flex-end;align-items:stretch;justify-content:center;gap:5px 8px;box-sizing:border-box;
  padding:6px calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
body.a3d .app::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hud-h,64px);z-index:4;pointer-events:auto;
  background:linear-gradient(180deg,rgba(6,16,32,.72),rgba(4,10,22,.93));border-top:1px solid rgba(90,225,245,.38);box-shadow:0 -8px 22px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .5s ease}
body.duel-intro .app::after,body.idle-cam .app::after,body.end-scene .app::after{opacity:0!important;pointer-events:none!important}

/* LP-Tafeln: keine schwebenden Hologramme mehr, sondern Leistenfelder */
body.a3d .app .duelist{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
  width:auto;min-width:0;max-width:260px;flex:1 1 150px;margin:0;z-index:6;align-items:center;padding:4px 8px;
  background:linear-gradient(160deg,rgba(6,24,48,.7),rgba(6,16,34,.5));box-shadow:inset 0 0 12px rgba(78,225,232,.07)}
body.a3d .app .duelist.me{order:1}
body.a3d .app .duelist.opp{order:2;box-shadow:inset 0 0 12px rgba(255,170,80,.07)}
body.a3d .app .duelist .av{flex-basis:28px;height:28px}
body.a3d .app .duelist .av canvas{width:24px;height:24px}
body.a3d .app .duelist .who{font-size:.66rem}
body.a3d .app .duelist .lp{font-size:1.02rem}
/* Deck-/Friedhofszahlen stehen schon an den Zonen auf dem Feld; in der Leiste bleibt nur die gegnerische Handzahl */
body.a3d .app .duelist .counts span:not(.ohandwrap){display:none}
body.a3d .app .duelist .counts:not(:has(.ohandwrap)){display:none}

/* Phasenleiste (mit Kamera-, Nächste-Phase- und Verlaufsknopf) */
body.a3d .app .strip{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:6;order:3;flex:1 1 auto;width:auto;
  justify-content:center;flex-wrap:nowrap;background:rgba(6,16,32,.5)}
/* Symbolknöpfe (Synchro, Abbrechen, Deckbau, Archiv) */
body.a3d .app .ctrl{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:6;order:4;flex:0 0 auto;width:auto;
  flex-direction:row;align-items:stretch;justify-content:center}
body.a3d .app .ctrl-row{flex:0 0 auto!important;width:auto!important;gap:5px}
body.a3d .app .ctrl-row .ib{flex:0 0 auto;min-width:40px;padding:6px 9px}
body.a3d .app .ctrl-row .cancelbtn{flex:0 0 auto;padding:6px 10px}

/* Nachrichtenzeile bleibt oben links; die Leiste oben gibt es nicht mehr */
body.a3d .app .ticker{top:calc(8px + env(safe-area-inset-top))}

/* Handfächer sitzt direkt auf der Leiste, über die volle Breite nutzbar */
body.a3d .app .dpanel{bottom:var(--hud-h,64px);width:min(860px,calc(100vw - 12px));height:clamp(96px,23vh,190px);z-index:3}

@media (orientation:portrait){
  body.a3d .app .duelist{flex:1 1 calc(50% - 8px);max-width:none}
  body.a3d .app .strip{flex:1 1 100%;justify-content:space-between;order:3}
  body.a3d .app .ctrl{flex:1 1 100%;order:4}
  body.a3d .app .ctrl-row{flex:1 1 100%!important;width:100%!important}
  body.a3d .app .ctrl-row .ib{flex:1 1 0}
  body.a3d .app .ticker{top:calc(8px + env(safe-area-inset-top));max-width:calc(100vw - 16px)}
  body.a3d .app .dpanel{width:min(100vw - 8px,640px);height:clamp(100px,21vh,180px)}
}
@media (orientation:landscape) and (max-height:520px){
  body.a3d .app{gap:4px 6px;padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  body.a3d .app .duelist{flex-basis:120px;padding:3px 6px}
  body.a3d .app .duelist .av{flex-basis:24px;height:24px}
  body.a3d .app .duelist .av canvas{width:20px;height:20px}
  body.a3d .app .duelist .lp{font-size:.9rem}
  body.a3d .app .ctrl-row .ib{min-width:34px;padding:5px 7px}
  body.a3d .app .dpanel{height:clamp(76px,25vh,120px)}
}
@media (orientation:landscape) and (max-width:720px){
  body.a3d .app .duelist{flex-basis:96px}
  body.a3d .app .duelist .who{display:none}
}