:root{
  --bg0:#101722; --bg1:#0b111a; --panel:#1b2534; --panel2:#223045;
  --ink:#eaeef5; --muted:#8fa0b5; --line:#32405a;
  --p0:#4da3ff; --p1:#ff5d5d; --p2:#ffc93c; --p3:#5ad06e;
  --display:'Arial Black','Avenir Next',Futura,'Segoe UI',system-ui,sans-serif;
  --body:system-ui,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
html{height:100%}
body{
  height:100dvh; overflow:hidden; color:var(--ink);
  font-family:var(--body);
  background:
          radial-gradient(1100px 600px at 50% -12%, #24344f 0%, var(--bg0) 48%, var(--bg1) 100%);
  display:flex; flex-direction:column; align-items:center;
  padding:14px 20px 20px; gap:16px;
}

header{
  width:100%; max-width:1600px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:4px;
}
h1{
  font-family:var(--display); font-weight:900; font-size:clamp(24px,4.4vw,36px); margin:0;
  letter-spacing:2.5px; line-height:1;
  color:var(--ink); text-shadow:0 3px 0 rgba(0,0,0,.45), 0 0 26px rgba(77,163,255,.25);
}
h1 span{color:var(--p2)}
.tag{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.hbtns{margin-left:auto; display:flex; gap:8px}

button{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; cursor:pointer; transition:background .15s, transform .1s;
}
button:hover{background:var(--panel2)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--p0); outline-offset:2px}
button.primary{background:var(--p0); border-color:transparent; color:#0a1626}
button.primary:hover{filter:brightness(1.08); background:var(--p0)}
button:disabled{opacity:.5; cursor:not-allowed}

.tinput{
  width:100%; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; outline:none;
}
.tinput:focus{border-color:var(--p0)}
.bigbtn{width:100%; padding:12px; font-size:15px; margin-bottom:10px}
.joinrow{display:flex; gap:8px; margin-bottom:10px}
.joinrow .tinput{flex:1; min-width:0; text-transform:uppercase; letter-spacing:2px}
.linkrow{display:flex; gap:8px; margin:0 0 14px}
.linkrow .tinput{flex:1; min-width:0; font-size:12px}
.codebadge{font-family:var(--display); color:var(--p2); letter-spacing:3px}
#lobPlayers{margin:4px 0 8px; display:flex; flex-direction:column}
#startMsg,#nameMsg{font-size:13px; color:var(--p1); min-height:18px; margin:6px 0 0}
#lobMsg{font-size:13px; color:var(--muted); min-height:18px; margin:2px 0 8px}

.main-area{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:1600px;
}

.side{
  flex:0 0 240px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#stage-wrapper{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  min-height:0;
}

#hud{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-start;
}
.card{
  --pc:var(--p0);
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px; transition:box-shadow .2s, border-color .2s, transform .3s, opacity .92;
}
.card.animating {
  transition: transform 0.4s ease-in-out, box-shadow 0.2s, border-color 0.2s;
}
.card.active{
  border-color:var(--pc); opacity:1;
  box-shadow:0 0 0 1px var(--pc), 0 0 15px rgba(120,170,255,.25);
}
@keyframes cardReveal{
  from{opacity:0; transform:translateX(-16px) scale(.95)}
  to{opacity:.92; transform:none}
}
.card.reveal{animation:cardReveal .42s ease backwards}
.turn-arrow{
  position:absolute; left:-15px; top:50%;
  transform:translateY(-50%) translateX(-4px);
  color:var(--pc); font-size:14px; line-height:1;
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
  text-shadow:0 0 8px var(--pc);
}
.card.active .turn-arrow{opacity:1; transform:translateY(-50%)}
.rank-badge{
  position:absolute; top:-8px; left:-8px; width:22px; height:22px;
  background:var(--panel2); border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--ink); box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.mdot{
  width:18px; height:18px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--pc) 36%, #000 165%);
  box-shadow:0 2px 3px rgba(0,0,0,.5);
}
.cmembers{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0}
.pmember{display:flex; align-items:center; gap:8px; min-width:0}
.pname{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pname em{font-style:normal; font-size:9px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 3px; margin-left:3px; vertical-align:1px}
.pturns{
  margin-left:auto; flex:none; min-width:38px; text-align:center;
  font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.3px;
  color:var(--ink); background:rgba(255,255,255,.07);
  border:1.5px solid var(--line); border-radius:9px; padding:1px 7px;
  transition:background .15s, color .15s, transform .15s, border-color .15s;
}
.pmember.now .pname{color:#fff}
.pmember.now .pturns{background:var(--pc); color:#0a1626; border-color:transparent; transform:scale(1.1)}
.cpts{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; flex:none}

#stage{
  position:relative;
  flex:1;
  width:100%;
  min-height:0;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:
          radial-gradient(900px 500px at 50% 30%, #182335 0%, #0d1420 70%, #0a0f18 100%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.55);
  touch-action:none;
}
canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

#banner{
  position:absolute;
  top:10px;
  left:50%; transform:translateX(-50%);
  font-family:var(--display);
  font-weight:900;
  font-size:15px;
  letter-spacing:.4px;
  padding:7px 18px;
  border-radius:999px;
  background:rgba(12,18,28,.92);
  border:3px solid var(--line);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  backdrop-filter:blur(4px); white-space:nowrap; pointer-events:none;
  max-width:95%; overflow:hidden; text-overflow:ellipsis;
  z-index:5;
}
@keyframes bannerPop{
  0%{transform:translateX(-50%) scale(.7) rotate(-3deg)}
  55%{transform:translateX(-50%) scale(1.14) rotate(2deg)}
  75%{transform:translateX(-50%) scale(.96) rotate(-1deg)}
  100%{transform:translateX(-50%) scale(1) rotate(0)}
}
#banner.pop{animation:bannerPop .4s cubic-bezier(.3,1.5,.5,1)}

#toast{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%) translateY(8px);
  font-weight:700; font-size:15px; padding:9px 18px; border-radius:12px;
  background:rgba(10,15,24,.88); border:1px solid var(--line);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

#turnBanner{
  position:fixed; top:80px; left:50%; transform:translate(-50%,-20px) scale(0.8);
  background:rgba(10,15,24,.92); border:3px solid var(--line); border-radius:24px;
  padding:20px 36px; text-align:center; font-family:var(--display);
  box-shadow:0 8px 0 rgba(0,0,0,.35), 0 12px 40px rgba(0,0,0,.6); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .32s cubic-bezier(.3,1.6,.5,1); z-index:100; display:flex; flex-direction:column; gap:8px;
}
#turnBanner.show{opacity:1; transform:translate(-50%,0) scale(1)}
#turnBanner.final{
  border-color:var(--p1) !important;
  box-shadow:0 0 50px rgba(255,93,93,0.4), 0 12px 40px rgba(0,0,0,0.6);
  animation: finalPulse 0.45s ease infinite alternate;
}
@keyframes finalPulse {
  from { transform: translate(-50%,0) scale(1); }
  to { transform: translate(-50%,0) scale(1.08); }
}
.tb-title{font-size:28px; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tb-turns{font-family:var(--body); font-size:16px; font-weight:600; color:var(--muted)}

#hint{width:100%; margin:12px 0 0; font-size:13px; color:var(--muted); text-align:center}

body.demo-mode .side,
body.demo-mode #banner,
body.demo-mode #turnBanner,
body.demo-mode #toast,
body.demo-mode #hint,
body.demo-mode #specTray{ display:none !important; }

.overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,17,.72); backdrop-filter:blur(5px); padding:16px;
}
.overlay[hidden]{display:none}

#ovlStart{ background:rgba(6,10,17,.40); backdrop-filter:blur(2px); }

.panel.welcome{
  text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #202d42 0%, #18212f 100%);
  border-color:#3a4c6e;
  box-shadow:0 22px 70px rgba(0,0,0,.6), 0 0 60px rgba(77,163,255,.14);
}
.panel.welcome::before{
  content:''; position:absolute; left:0; right:0; top:0; height:130px; pointer-events:none;
  background:radial-gradient(150px 70px at 50% 0, rgba(77,163,255,.22), transparent 72%);
}
.panel.welcome > *{position:relative}
.welcome-marbles{display:flex; justify-content:center; gap:12px; margin:2px 0 14px}
.welcome-marbles span{
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 33% 30%, #fff 0%, var(--c) 55%, rgba(0,0,0,.4) 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:wbob 1.6s ease-in-out infinite;
}
.welcome-marbles span:nth-child(2){animation-delay:.12s}
.welcome-marbles span:nth-child(3){animation-delay:.24s}
.welcome-marbles span:nth-child(4){animation-delay:.36s}
.welcome-marbles span:nth-child(5){animation-delay:.48s}
@keyframes wbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}

/* Ladebildschirm (Raumsuche / Beitreten) */
.load-panel{text-align:center}
.load-panel h2{margin:0 0 6px}
.load-panel .sub{color:#b8c4d6; margin:0}
.load-marbles{display:flex; justify-content:center; gap:12px; margin:4px 0 18px}
.load-marbles span{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 33% 30%, #fff 0%, var(--c) 55%, rgba(0,0,0,.4) 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:loadBounce 1.1s ease-in-out infinite;
}
.load-marbles span:nth-child(2){animation-delay:.14s}
.load-marbles span:nth-child(3){animation-delay:.28s}
.load-marbles span:nth-child(4){animation-delay:.42s}
@keyframes loadBounce{0%,80%,100%{transform:translateY(0); opacity:.55} 40%{transform:translateY(-12px); opacity:1}}
@media (prefers-reduced-motion:reduce){ .load-marbles span{animation-duration:2.2s} }
.welcome-title{
  font-family:var(--display); font-weight:900; letter-spacing:2.5px;
  font-size:32px; margin:0 0 8px; line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 26px rgba(77,163,255,.28);
}
.welcome-title span{color:var(--p2)}
.panel.welcome .sub{margin:0 auto 18px; max-width:360px; line-height:1.5; color:#b8c4d6}
.panel.welcome .sub b{color:var(--ink)}
.panel.welcome .joinrow .tinput{text-align:center}
.panel{
  width:100%; max-width:430px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:22px 22px 20px; box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.panel h2{font-family:var(--display); font-weight:900; font-size:21px; margin:0 0 4px; letter-spacing:1px}
.panel p.sub{margin:0 0 16px; font-size:13px; color:var(--muted)}
.slot{
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
}
.slot .mdot{width:18px; height:18px}
.slot label{font-size:14px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot label em{font-style:normal; font-size:9px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 3px; margin-left:4px; vertical-align:1px}
select{
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 8px;
}
.colsel{min-width:74px}
.slot .colsel{margin-right:2px}
.lobcol,#lobColorSel{min-width:74px}
.row{display:flex; align-items:center; gap:10px; margin:14px 0 16px}
.row label{font-size:14px; font-weight:600; flex:1}
#cfgMsg{font-size:13px; color:var(--p1); min-height:18px; margin:0 0 8px}
.pactions{display:flex; gap:10px; justify-content:flex-end}
#ranking{margin:14px 0 18px; display:flex; flex-direction:column; gap:8px}
.rrow{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  font-weight:600; font-size:15px;
}
.rrow .cpts{margin-left:auto; font-size:18px}
.rrow.win{border-color:var(--p2)}
#endTitle{text-align:center}
#endNote{font-size:13px; color:var(--muted); text-align:center; margin:0 0 12px; min-height:16px}

.overlay .panel{position:relative; z-index:1}
#ovlEnd:not([hidden]) .panel{animation:panelPop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes panelPop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}

#ovlEnd:not([hidden]) #endTitle{
  font-size:23px;
}

#ovlEnd:not([hidden]) .rrow{animation:rowIn .45s ease backwards}
@keyframes rowIn{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
#ranking .rrow:nth-child(1){animation-delay:.05s}
#ranking .rrow:nth-child(2){animation-delay:.18s}
#ranking .rrow:nth-child(3){animation-delay:.31s}
#ranking .rrow:nth-child(4){animation-delay:.44s}
#ranking .rrow:nth-child(5){animation-delay:.57s}
#ovlEnd:not([hidden]) .rrow.win{animation:rowIn .45s ease backwards, winPulse .9s ease .5s infinite alternate}
@keyframes winPulse{
  from{box-shadow:0 0 16px rgba(255,201,60,.25)}
  to{box-shadow:0 0 34px rgba(255,201,60,.65)}
}

#confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
#confetti i{
  position:absolute; top:-24px; display:block; background:var(--col); border-radius:2px;
  animation:confettiFall var(--dur) linear var(--delay) forwards;
}
@keyframes confettiFall{
  0%{opacity:1; transform:translate(0,-24px) rotate(var(--rot))}
  100%{opacity:.85; transform:translate(var(--drift), 104vh) rotate(calc(var(--rot) + 900deg))}
}
@media (prefers-reduced-motion:reduce){
  #confetti{display:none}
}

#itemLegend{
  background:rgba(15,22,34,.92); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; font-size:13px; line-height:1.45;
  backdrop-filter:blur(4px); box-shadow:0 6px 24px rgba(0,0,0,.45);
  width:100%;
}
.leg-title{
  font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.leg-row{display:flex; gap:9px; align-items:flex-start; margin-bottom:5px}
.leg-row:last-child{margin-bottom:0}
.leg-ico{width:20px; font-size:15px; text-align:center; flex:none}
.leg-txt{color:var(--muted)}
.leg-txt b{font-weight:700; color:var(--ink)}

#spectators{
  display:flex; flex-direction:column; gap:6px;
}
#spectators[hidden]{ display:none !important; }
.spec-row{
  display:flex; align-items:center; gap:7px;
  background:var(--panel); border:1px dashed var(--line); border-radius:10px;
  padding:5px 9px; opacity:.62;
}
.spec-eye{font-size:12px; flex:none; filter:grayscale(.4)}
.spec-nm{
  font-size:12.5px; font-weight:600; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
}
.spec-tag{
  flex:none; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:1px 4px;
}

.ver-tag{
  margin-top:10px; font-size:11px; letter-spacing:1px; color:var(--muted); opacity:.7;
}

#specTray{
  position:fixed; right:20px; bottom:110px; z-index:9;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
#specTray[hidden]{ display:none !important; }
.spec-ring {
  --p: 0;
  width: 74px; height: 74px; border-radius: 50%;
  padding: 7px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  transition: filter .2s;
}

.spec-item {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 31px;
  background:
          linear-gradient(to top, rgba(255, 201, 60, 0.75) calc(var(--p) * 100%), transparent calc(var(--p) * 100% + 1px)),
          radial-gradient(circle at 50% 40%, #223049, #131c2c 80%);
  cursor: default; touch-action: none; pointer-events: auto; user-select: none;
}
.spec-item-canvas{
  width: 100%; height: 100%; pointer-events: none;
}
.spec-item.ready{
  cursor:grab;
  box-shadow:0 0 0 3px rgba(255,201,60,.18), inset 0 0 14px rgba(255,201,60,.15);
  animation:specBob 1.1s ease-in-out infinite;
}
.spec-item.ready:active{cursor:grabbing}
@keyframes specPop{
  0%{transform:scale(.2) rotate(-25deg); opacity:0}
  60%{transform:scale(1.25) rotate(8deg); opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.spec-item.pop{animation:specPop .5s cubic-bezier(.3,1.5,.5,1)}
.spec-hint{
  font-size:12px; font-weight:800; color:var(--p2);
  background:rgba(20,30,48,.9); padding:4px 10px; border-radius:10px;
  white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.4);
}
@keyframes specBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.spec-ghost{
  position:fixed; z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); width:56px; height:56px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
}

@media (max-width:1080px){
  .main-area{
    flex-direction:column;
    align-items:center;
  }
  .side{
    flex:auto;
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
  .left-side {
    order: 1;
  }
  #stage-wrapper {
    order: 2;
    width: 100%;
  }
  #stage {
    min-height: 50vh;
  }
  .right-side {
    order: 3;
  }
  .leaderboard{
    width:100%;
  }
  #hud{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:0;
  }
  .card{
    width:auto;
    flex:1 1 140px;
    max-width:180px;
  }
  #spectators{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* --- Menü-Overlay --- */
.menu-panel { position: relative; max-width: 400px; }
#btnCloseMenu {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; font-size: 18px; line-height: 1;
  padding: 6px; box-shadow: none; width: auto; color: var(--muted);
  border-radius: 8px;
}
#btnCloseMenu:hover { color: var(--ink); background: var(--panel2); }
#ovlMenu h2 { text-align: center; margin: 0 0 18px; }

/* Zeilen im selben Look wie .slot im Setup */
.menu-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px;
}
.menu-row[hidden] { display: none; }
.menu-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
#soundIcon { width: 20px; text-align: center; font-size: 16px; }
input[type=range] {
  flex: 1; min-width: 0; cursor: pointer; accent-color: var(--p0); height: 4px;
}

/* Kopier-Button im Stil aus der Lobby */
.copy-btn {
  display: flex; align-items: center; gap: 7px; margin-left: auto; width: auto;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 9px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.copy-btn:hover { background: var(--line); }
.copy-btn.success { border-color: var(--p3); color: var(--p3); background: rgba(90,208,110,.12); }
.copy-icon { font-size: 15px; }

.menu-actions { margin-top: 16px; display: flex; flex-direction: column; }
.menu-actions .bigbtn { margin-bottom: 10px; }
.menu-actions .bigbtn:last-child { margin-bottom: 0; }
#btnRestartGame[hidden] { display: none; }
.menu-leave {
  background: rgba(255, 93, 93, 0.1);
  color: var(--p1);
  border: 1px solid rgba(255, 93, 93, 0.28);
}
.menu-leave:hover { background: rgba(255, 93, 93, 0.2); }

/* --- Leaderboard (Rangliste) links, klar vom Header abgesetzt --- */
.leaderboard {
  background: rgba(15, 22, 34, 0.92);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}
.leaderboard .leg-title { margin-bottom: 10px; }

/* === Handy gemeinsam: Zuganzeigen verdecken das Feld nicht === */
@media (max-width:720px), (max-height:520px){
  .tag{ display:none; }
  #hint{ display:none; }
  /* Großer "… ist dran!"-Pop weg – die hervorgehobene Rangliste zeigt den Zug. */
  #turnBanner{ display:none !important; }
  /* Kleine Status-Pille nach unten in den Abgrund-Bereich statt über die Kacheln. */
  #banner{ top:auto; bottom:10px; font-size:13px; padding:5px 12px; border-width:2px; }
  #toast{ bottom:52px; }
}

/* --- Handy Hochformat: Titel oben, Rangliste, Feld in voller Breite (ungedreht),
       Legende im freien Bereich darunter --- */
@media (max-width:720px) and (orientation:portrait){
  body{ padding:8px 10px 10px; gap:8px; overflow-y:auto; }
  header{ margin:0; gap:8px; }
  h1{ font-size:20px; letter-spacing:1.5px; }

  .main-area{ flex-direction:column; align-items:stretch; gap:8px; }

  /* Rangliste über dem Feld – immer vertikal */
  .left-side{ order:1; width:100%; flex:none; flex-direction:column; }
  .leaderboard{ width:100%; padding:8px 10px; max-height:30vh; overflow-y:auto; }
  .leaderboard .leg-title{ margin-bottom:5px; }
  #hud{ width:100%; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:6px; margin:0; }
  .card{ width:100%; flex:none; max-width:none; padding:6px 9px; }

  /* Feld: volle Breite im Original-Seitenverhältnis */
  #stage-wrapper{ order:2; width:100%; flex:none; }
  #stage{ flex:none; width:100%; aspect-ratio:900 / 720; min-height:0; border-radius:14px; }

  /* Legende in den freien Bereich unter dem Feld */
  .right-side{ order:3; width:100%; flex:none; flex-direction:column; }
  #itemLegend{ width:100%; }
}

/* --- Handy Querformat: Feld füllt den Bildschirm, Rangliste schwebt links im freien
       Rand, Header nur als Menü-Button oben rechts --- */
@media (max-height:520px) and (orientation:landscape){
  body{ padding:0; gap:0; }
  header{ position:absolute; top:6px; right:8px; width:auto; margin:0; z-index:30; }
  header h1{ display:none; }
  .hbtns{ margin:0; }

  .main-area{ position:relative; gap:0; max-width:none; }

  .left-side{
    position:absolute; top:6px; left:6px; z-index:20;
    width:170px; flex:none; flex-direction:column;
  }

  /* Legende schwebt rechts im freien Rand, unter dem Menü-Button */
  .right-side{
    position:absolute; top:48px; right:6px; z-index:20;
    width:190px; flex:none; flex-direction:column;
  }
  #itemLegend{
    width:100%; padding:7px 9px; font-size:11px; line-height:1.35;
    max-height:calc(100dvh - 56px); overflow-y:auto;
    background:rgba(12,18,28,.72); backdrop-filter:blur(6px);
  }
  #itemLegend .leg-title{ margin-bottom:5px; font-size:10px; }
  .leg-row{ gap:6px; margin-bottom:4px; }
  .leg-ico{ width:16px; font-size:12px; }
  .leaderboard{
    width:100%; padding:7px 9px; max-height:calc(100dvh - 12px); overflow-y:auto;
    background:rgba(12,18,28,.72); backdrop-filter:blur(6px);
  }
  .leaderboard .leg-title{ margin-bottom:5px; font-size:10px; }
  #hud{ width:100%; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:6px; margin:0; }
  .card{ width:100%; flex:none; max-width:none; padding:5px 8px; }
  #spectators{ flex-direction:column; flex-wrap:nowrap; }

  #stage-wrapper{ order:0; width:100%; flex:1 1 auto; }
  #stage{ flex:1; width:100%; min-height:0; border-radius:0; border:none; }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}