:root{
  --bg1:#fff1c9; --bg2:#ffc9dc; --ink:#3a2a4d; --ink-soft:#6b5a80;
  --panel:rgba(255,255,255,.84); --panel-line:rgba(58,42,77,.18);
  --board-bg:#5b4a78;
  --light:#ffb21e; --dark:#6c5ce7; --ok:#22b573; --atk:#ff4757; --gold:#ffd23f; --spell:#2d8cff;
  --btn:#3a2a4d; --btn-ink:#fff;
  --bs:min(calc(100vw - 24px), calc(100vh - 290px), 700px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg1:#1b1238; --bg2:#35206b; --ink:#f3ecff; --ink-soft:#b9a8dd;
    --panel:rgba(42,31,79,.9); --panel-line:rgba(255,255,255,.18);
    --board-bg:#2a2146; --btn:#ffd23f; --btn-ink:#2a1a4a;
  }
}
:root[data-theme="dark"]{
  --bg1:#1b1238; --bg2:#35206b; --ink:#f3ecff; --ink-soft:#b9a8dd;
  --panel:rgba(42,31,79,.9); --panel-line:rgba(255,255,255,.18);
  --board-bg:#2a2146; --btn:#ffd23f; --btn-ink:#2a1a4a;
}
@supports (height:100dvh){ :root{ --bs:min(calc(100vw - 24px), calc(100dvh - 290px), 700px); } }
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
*{ box-sizing:border-box; }
body{
  margin:0; height:100%; overflow:hidden; color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2)); background-color:var(--bg1);
  font-family:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif; font-weight:500;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
button,input,select{ font:inherit; color:inherit; }
.hidden{ display:none !important; }
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; overflow:auto; padding:12px; }

/* Start */
#screen-start{ justify-content:center; gap:14px; text-align:center; }
.logo{ font-weight:800; font-size:clamp(2.4rem,9vw,4.6rem); line-height:1; margin:0; letter-spacing:-.01em; }
.logo .s{ color:var(--light); } .logo .m{ color:var(--dark); }
.tag{ margin:0; color:var(--ink-soft); font-size:1.15rem; }
.deck{ font-size:2.2rem; letter-spacing:.2em; }
.card{ background:var(--panel); border:2px solid var(--panel-line); border-radius:22px; padding:14px 18px; width:min(560px,100%); text-align:left; }
.row{ display:flex; gap:12px; align-items:center; margin:6px 0; flex-wrap:wrap; }
.row label{ min-width:110px; font-weight:700; }
.row input[type=text],.row select{ flex:1; min-width:140px; padding:8px 12px; border-radius:12px; border:2px solid var(--panel-line); background:rgba(255,255,255,.75); color:#3a2a4d; font-size:1.05rem; }
.row input[type=checkbox]{ width:24px; height:24px; accent-color:var(--ok); }
.big{ background:var(--btn); color:var(--btn-ink); border:0; border-radius:18px; padding:12px 34px; font-weight:800; font-size:1.5rem; cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.25); }
.big:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.small{ background:var(--panel); border:2px solid var(--panel-line); border-radius:12px; padding:6px 12px; cursor:pointer; font-weight:700; }
.small:disabled{ opacity:.4; cursor:default; }
details{ width:min(560px,100%); text-align:left; background:var(--panel); border:2px solid var(--panel-line); border-radius:18px; padding:10px 16px; }
summary{ cursor:pointer; font-weight:800; font-size:1.1rem; }
details p{ margin:.5em 0; line-height:1.35; }

/* Brett */
#screen-game{ gap:6px; justify-content:flex-start; }
#hud{ width:var(--bs); display:flex; gap:8px; align-items:center; justify-content:space-between; }
#turn{ flex:1; text-align:center; font-weight:800; font-size:clamp(1.1rem,4.4vw,1.6rem); padding:2px 14px; border-radius:16px; color:#fff; transition:background .3s; }
#turn.L{ background:#e08a00; } #turn.D{ background:var(--dark); }
#score{ width:var(--bs); display:flex; justify-content:space-between; font-weight:700; font-size:.95rem; }
#score span{ background:var(--panel); border:2px solid var(--panel-line); border-radius:12px; padding:0 10px; }
#lumwrap{ width:var(--bs); display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; }
#lumbar{ flex:1; display:flex; gap:3px; }
#lumbar i{ flex:1; height:14px; border-radius:5px; border:2px solid transparent; }
#lumbar i.on{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(0,0,0,.35); transform:scaleY(1.35); }
#board{ position:relative; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); gap:2px; width:var(--bs); height:var(--bs); padding:5px; border-radius:16px; background:var(--board-bg); box-shadow:0 8px 0 rgba(0,0,0,.2); font-size:calc(var(--bs) / 9 * .52); }
.cell{ position:relative; border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cell .pp{ position:absolute; font-size:.8em; line-height:1; color:#ff3b3b; text-shadow:0 0 6px #ff3b3b; opacity:.9; animation:blink 1s infinite alternate; }
@keyframes blink{ from{ opacity:.35; } to{ opacity:1; } }
.pc{ position:relative; width:88%; height:88%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72em; line-height:1; background:rgba(255,255,255,.78); border:3px solid; transition:transform .15s; }
.pc.L{ border-color:var(--light); } .pc.D{ border-color:var(--dark); }
.cell.sel .pc{ transform:scale(1.1); box-shadow:0 0 0 3px var(--gold); }
.cell.mv::after{ content:""; position:absolute; width:30%; height:30%; border-radius:50%; background:var(--ok); border:2px solid #fff; }
.cell.at{ box-shadow:inset 0 0 0 3px var(--atk); }
.cell.at::after{ content:"⚔️"; position:absolute; top:-2px; right:1px; font-size:.45em; }
.cell.sp{ box-shadow:inset 0 0 0 4px var(--spell); }
.cell.spa{ box-shadow:inset 0 0 0 4px var(--atk); }
.cell.cur{ outline:3px dashed var(--gold); outline-offset:-3px; z-index:1; }
.hpbar{ position:absolute; left:12%; right:12%; bottom:2px; height:5px; border-radius:4px; background:rgba(0,0,0,.4); overflow:hidden; }
.hpbar b{ display:block; height:100%; background:var(--ok); }
.hpbar b.mid{ background:#ffb100; } .hpbar b.low{ background:var(--atk); }
.lock{ position:absolute; right:1px; top:0; font-size:.42em; }
#info{ width:var(--bs); min-height:3.2em; background:var(--panel); border:2px solid var(--panel-line); border-radius:14px; padding:4px 12px; font-size:.95rem; line-height:1.25; display:flex; align-items:center; }
#spells{ width:var(--bs); display:flex; flex-wrap:wrap; gap:6px; }
#spells .small{ font-size:.9rem; padding:3px 9px; }
#bar{ display:flex; gap:8px; }
#toast{ position:absolute; top:calc(env(safe-area-inset-top,0px) + 8px); left:50%; transform:translateX(-50%); background:var(--btn); color:var(--btn-ink); padding:8px 18px; border-radius:16px; font-weight:800; z-index:20; pointer-events:none; text-align:center; max-width:92vw; }

#tip{ position:fixed; z-index:25; pointer-events:none; background:var(--btn); color:var(--btn-ink); padding:4px 10px; border-radius:10px; font-weight:800; font-size:.95rem; white-space:nowrap; box-shadow:0 3px 0 rgba(0,0,0,.25); }

#a1Text{ width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem; padding:8px 10px; border-radius:10px; border:2px solid var(--panel-line); background:rgba(255,255,255,.8); color:#3a2a4d; margin-top:8px; }
select.mini{ padding:3px 6px; border-radius:10px; border:2px solid var(--panel-line); background:rgba(255,255,255,.75); color:#3a2a4d; font-size:.85rem; max-width:110px; }
#musicVol{ width:90px; accent-color:var(--btn); cursor:pointer; }

/* Gruselstil */
:root.scary:not([data-x]){
  --bg1:#0e0716; --bg2:#2a0c1c; --ink:#f1e6ee; --ink-soft:#b9a1b4;
  --panel:rgba(30,14,32,.92); --panel-line:rgba(255,120,120,.28);
  --board-bg:#1a0f1c; --btn:#c4161c; --btn-ink:#fff;
  --light:#e8c46a; --dark:#9b30ff; --gold:#ff9a2b;
}
:root.scary .logo{ text-shadow:0 0 18px rgba(255,40,40,.5); }
:root.scary .deck{ letter-spacing:.3em; }

/* Balancing-Editor */
#screen-admin{ justify-content:flex-start; align-items:stretch; padding:10px 12px; gap:10px; }
.ad-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ad-top b{ font-size:1.3rem; }
.ad-body{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:14px; align-items:start; }
#adList{ display:flex; flex-direction:column; gap:4px; position:sticky; top:0; max-height:calc(100vh - 80px); overflow:auto; padding-right:4px; }
#adList h4{ margin:8px 0 2px; font-size:.95rem; color:var(--ink-soft); }
.adbtn{ text-align:left; display:flex; align-items:center; gap:6px; }
.adbtn.on{ outline:3px solid var(--gold); background:var(--panel); }
.wr2{ margin-left:auto; font-size:.8rem; padding:0 6px; border-radius:8px; color:#fff; }
.wr2.good{ background:#22b573; } .wr2.mid{ background:#e0a100; } .wr2.bad{ background:#e0453a; }
.adh{ margin:0 0 8px; font-size:1.6rem; } .adh small{ font-size:.9rem; color:var(--ink-soft); font-weight:600; }
.ad-card{ width:auto; margin-bottom:12px; }
.ad-card h3{ margin:0 0 8px; font-size:1.15rem; } .ad-card h3 small{ font-weight:600; color:var(--ink-soft); font-size:.85rem; }
.adrow{ display:flex; gap:16px; flex-wrap:wrap; }
.adrow2{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pvside{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.pv{ width:320px; max-width:100%; height:260px; border-radius:14px; overflow:hidden; border:2px solid var(--panel-line); background:#cfefff; }
.pv canvas{ width:100%; height:100%; display:block; }
.pvEmoji{ width:100%; height:100%; align-items:center; justify-content:center; font-size:6rem; }
.pvctl{ display:flex; gap:6px; }
.pvform{ flex:1; min-width:260px; }
.prow{ display:grid; grid-template-columns:minmax(120px,190px) 1fr 84px; gap:8px; align-items:center; margin:5px 0; }
.prow > label{ font-weight:700; }
.prow.chg > label{ color:#d9480f; } .prow.chg > label::after{ content:" ●"; }
.prow input[type=text],.prow input[type=number],.prow select,.prow textarea,#adJson{ padding:6px 10px; border-radius:10px; border:2px solid var(--panel-line); background:rgba(255,255,255,.8); color:#3a2a4d; font-size:1rem; width:100%; }
.prow input[type=range]{ width:100%; accent-color:var(--btn); }
.prow input[type=color]{ width:60px; height:34px; padding:0; border:0; background:none; }
.prow input[type=checkbox]{ width:20px; height:20px; accent-color:var(--ok); margin-right:8px; vertical-align:middle; }
.prow textarea{ grid-column:2 / span 2; }
.prow input[type=text]{ grid-column:2 / span 2; }
.prow select{ grid-column:2 / span 2; }
.adnote{ color:var(--ink-soft); font-size:.9rem; margin:6px 0; line-height:1.3; }
.simout{ margin-top:8px; }
.tblwrap{ overflow:auto; }
.adtbl{ border-collapse:collapse; width:100%; font-size:.95rem; }
.adtbl th,.adtbl td{ padding:4px 8px; border-bottom:1px solid var(--panel-line); text-align:left; }
.adtbl tr.clk{ cursor:pointer; } .adtbl tr.clk:hover{ background:rgba(255,210,63,.25); }
.wr{ display:inline-block; position:relative; width:120px; height:18px; border-radius:9px; background:rgba(0,0,0,.18); overflow:hidden; vertical-align:middle; }
.wr i{ position:absolute; left:0; top:0; bottom:0; opacity:.9; } .wr b{ position:relative; font-size:.8rem; color:#fff; padding-left:8px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.wr.good i{ background:#22b573; } .wr.mid i{ background:#e0a100; } .wr.bad i{ background:#e0453a; }
#adJson{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; }
@media (max-width:760px){
  .ad-body{ grid-template-columns:1fr; }
  #adList{ flex-direction:row; overflow-x:auto; position:static; max-height:none; padding-bottom:6px; }
  #adList h4{ display:none; } .adbtn{ white-space:nowrap; flex:0 0 auto; }
  .prow{ grid-template-columns:1fr 84px; } .prow > label{ grid-column:1 / span 2; }
  .prow input[type=range]{ grid-column:1; }
}

/* 3D-Brett */
#bwrap{ position:relative; width:min(calc(100vw - 24px),940px); height:min(calc(100vh - 300px),640px); min-height:300px; border-radius:16px; overflow:hidden; box-shadow:0 8px 0 rgba(0,0,0,.2); background:#bfe6ff; touch-action:none; }
@supports (height:100dvh){ #bwrap{ height:min(calc(100dvh - 300px),640px); } }
#b3d{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#b3d:active{ cursor:grabbing; }
#camToggle{ position:absolute; right:8px; top:8px; width:36px; height:36px; border-radius:10px; border:0; background:rgba(255,255,255,.55); font-size:1.1rem; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.25); z-index:2; }
#camToggle:hover,#camToggle.on{ background:rgba(255,255,255,.85); }
#camctl{ position:absolute; right:8px; top:52px; display:flex; flex-direction:column; gap:4px; }
#camctl button{ width:36px; height:36px; border-radius:10px; border:0; background:rgba(255,255,255,.78); font-size:1.15rem; cursor:pointer; color:#3a2a4d; box-shadow:0 2px 0 rgba(0,0,0,.25); }
#camctl button:active{ transform:translateY(2px); box-shadow:none; }
#camhint{ position:absolute; left:10px; bottom:8px; right:60px; font-size:.78rem; color:#fff; text-shadow:0 1px 3px #000,0 0 6px #000; pointer-events:none; }
.mover{ position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:6; will-change:transform; filter:drop-shadow(0 6px 4px rgba(0,0,0,.35)); }

/* Arena */
#screen-arena{ padding:0; justify-content:center; background:#0d1f10; }
#stage{ position:relative; width:960px; height:540px; }
#stage canvas{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
#cv{ touch-action:none; }
.pad{ position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); display:flex; gap:12px; align-items:flex-end; touch-action:none; }
.pad.L{ left:12px; } .pad.D{ right:12px; flex-direction:row-reverse; }
.dp{ display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:4px; }
.pb{ border:0; border-radius:14px; background:rgba(255,255,255,.28); font-size:1.4rem; touch-action:none; color:#fff; }
.pb.on{ background:rgba(255,255,255,.62); }
.pb.fire{ width:80px; height:80px; border-radius:50%; font-size:1.8rem; }
.pb.alt{ width:56px; height:56px; border-radius:50%; font-size:1.2rem; }
.pbs{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.pad.L .pb.fire{ background:rgba(255,178,30,.6); } .pad.D .pb.fire{ background:rgba(108,92,231,.65); }

/* Sieg */
#overlay{ position:absolute; inset:0; z-index:30; background:rgba(20,10,40,.7); display:flex; align-items:center; justify-content:center; overflow:hidden; }
#winbox{ background:var(--panel); color:var(--ink); border:3px solid var(--gold); border-radius:28px; padding:24px 30px; text-align:center; max-width:92vw; backdrop-filter:blur(6px); position:relative; z-index:2; }
#winbox h2{ margin:0 0 6px; font-size:clamp(1.8rem,7vw,3rem); line-height:1.05; }
#winbox .em{ font-size:4rem; }
#winbox .row{ justify-content:center; margin-top:12px; }
.conf{ position:absolute; top:-10%; font-size:2rem; animation:fall linear forwards; z-index:1; }
@keyframes fall{ to{ transform:translateY(120vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce){ .conf{ display:none; } .cell .pp{ animation:none; } }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }