/* Seiten-Layout: Hauptspalten (.main-area/.side), Buehne (#stage) + Canvas,
   Hinweiszeile, Demo-Modus, Boot-Ausblendung, Werbetafeln. */

.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;
}

#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;
}

#hint{width:100%; max-width:1600px; margin: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 #hint,
body.demo-mode #specTray{ display:none !important; }

/* Bis das ES-Modul geladen und die Hintergrund-Demo im ersten Frame gezeichnet ist,
   die Spielfläche ausblenden – sonst blitzt hinter dem Start-Overlay kurz die leere
   Rangliste / das feldlose Stage auf (Module laufen erst nach dem HTML-Parsen).
   main.js entfernt .booting im ersten Frame (dann ist das Demo-Feld gezeichnet). */
html.booting .main-area{ visibility:hidden; }

/* Werbetafeln in den freien Flächen links/rechts neben dem Spielfeld.
   Füllen den Platz unter Rangliste bzw. Item-Legende. Google-AdSense-Slot liegt in .ad-slot.
   Sichtbar nur, wenn das Skript am Seitenende body.ads-on setzt – das passiert ausschließlich
   bei window.ADS_ENABLED === true (index.html). Aktuell aus, Markup bleibt aber erhalten. */
.ad-board{
  display:none;   /* Standard: aus – erst window.ADS_ENABLED in index.html setzt body.ads-on */
  position:relative; flex:1 1 auto; min-height:260px;
  align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:14px;
  background:rgba(15,22,34,.55); overflow:hidden;
}
body.ads-on .ad-board{ display:flex; }
.ad-flag{
  position:absolute; top:6px; left:9px; z-index:2;
  font-family:var(--display); font-weight:900; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); opacity:.65;
}
.ad-ph{
  position:absolute; z-index:0; color:var(--muted); opacity:.32;
  font-size:12px; letter-spacing:.5px;
}
.ad-slot{ position:relative; z-index:1; width:100%; min-height:260px; }
/* Unter 1080px brechen die Seitenspalten zu vollen Zeilen um / werden zu Overlays –
   dort ergeben vertikale Werbetafeln keinen Sinn, also ausblenden. */
@media (max-width:1080px), (max-height:560px){ body.ads-on .ad-board{ display:none; } }