/* ── Karten-Overlay-Dialog ───────────────────────────── */
.card-overlay {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20,18,24,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}
.card-overlay.hidden { display: none; }
/* Wenn Overlay sichtbar: Drawer und Bedienbuttons blockieren */
.wrap.overlay-active .tab-drawer,
.wrap.overlay-active .left-controls { pointer-events: none; opacity: 0.4; }
.card-dialog {
  background: #23202a;
  border-radius: 18px;
  box-shadow: 0 8px 32px #000a;
  padding: 24px 18px 16px 18px;
  max-width: 98vw;
  max-height: 90dvh;
  width: 420px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  box-sizing: border-box;
}
.card-dialog-main {
  display: flex;
  gap: 18px;
}
.card-dialog-image img {
  width: 110px;
  height: 180px;
  object-fit: contain;
  border-radius: 10px;
  background: #18151c;
  border: 1.5px solid var(--line);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-dialog-image img.img-loaded {
  opacity: 1;
}
.card-dialog-info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-dialog-title {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--accent);
}
.card-dialog-meaning {
  font-size: 1em;
  color: var(--ok);
  margin-bottom: 4px;
}
.card-dialog-text {
  font-size: 0.98em;
  color: var(--text);
  margin-top: 8px;
}
.card-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 8px;
}
.card-save-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-save-btn.active #cardOverlayStar {
  color: #ffd700;
  content: "★";
}
#cardOverlayStar {
  font-size: 1.3em;
  color: #b8c0d4;
  transition: color 0.2s;
}
.card-close-btn {
  background: var(--accent);
  color: #18151c;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.05em;
  padding: 8px 18px;
  cursor: pointer;
}
.card-audio-btn {
  background: none;
  border: 1.5px solid var(--ok);
  color: var(--ok);
  border-radius: 8px;
  font-weight: 700;
  font-size: 1em;
  padding: 6px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.card-audio-btn:active {
  background: var(--ok);
  color: #18151c;
}
@media (max-width: 600px) {
  .card-dialog {
    width: 98vw;
    min-width: 0;
    max-height: calc(100dvh - 40px);
    padding: 10px 2vw 8px 2vw;
    border-radius: 0;
  }
  .card-dialog-main {
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }
  .card-dialog-image img {
    width: 80px;
    height: 120px;
    flex-shrink: 0;
  }
  .card-dialog-text {
    max-height: 25vh;
    overflow-y: auto;
  }
}

/* Button-Logik: Erste Karte aufdecken (grün) */
#dealBtn.first-reveal {
  background: #7c4dbe !important; /* kräftiges Lila passend zum Hintergrund */
  color: #18151c !important; /* Schwarz für bessere Lesbarkeit */
  border-color: #a084ca !important;
  box-shadow: 0 2px 10px #7c4dbe55;
  transition: background 0.18s, color 0.18s;
}
:root {
  --panel: #1b1f27;
  --panel2: #232936;
  --line: #3a4254;
  --text: #f0f2f7;
  --muted: #b8c0d4;
  --accent: #c9a96a;
  --ok: #89d185;
  --flip-speed: 0.75s;
  --flip-radius: 5px;
  --card-shadow: 0 4px 10px rgba(0,0,0,0.18);
  --main-height: 92vh;
  --field-height: 84vh;
  --controls-height: 6vh;
  --ui-gap: 16px;
}
* { box-sizing: border-box; }
html{
  margin:0;
  padding:0;
  /* overflow:hidden; entfernt, damit Seite scrollbar */
  overscroll-behavior:none;
  background:#000000;
  height:100%;
}
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  font-family:Arial, Helvetica, sans-serif;
  background: #07030e;
  color:var(--text);
  min-height:100vh;
  width:100vw;
  max-width:100%;
}
body::before{
  content:'';
  position:fixed;
  top:-10%; left:-10%;
  width:120%; height:120%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 60% 55% at 20% 25%, rgba(90,15,170,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 75% 68%, rgba(50,8,110,0.50) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 55% 45%, rgba(130,55,15,0.12) 0%, transparent 50%);
  animation: bgDrift 22s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%   { transform: translate(0,    0)    scale(1);    }
  25%  { transform: translate(3.5%, -5%)  scale(1.04); }
  55%  { transform: translate(-3%,  4.5%) scale(0.97); }
  80%  { transform: translate(4%,   2%)   scale(1.02); }
  100% { transform: translate(-1.5%,-3%)  scale(1.01); }
}

/* ── Layout ─────────────────────────────────────────── */

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 14px 4px;
  overflow-x:hidden;
}
/* All non-game page wrappers must also sit above body::before (z-index:0) */
.app-wrap, .wf-wrap {
  position:relative;
  z-index:1;
}
.topinfo{
  position:relative;
  height:8vh;
  min-height:64px;
  margin-bottom:0;
  padding:6px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.topinfo-logo{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}
.main{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap:var(--ui-gap);
  align-items:stretch;
  height:var(--field-height);
  min-height:var(--field-height);
  margin:0;
}
.left-column{
  display:block;
  height:100%;
  min-height:0;
  min-width:0;
}

/* ── Spread & Cross  (Phase 1: overflow visible für Glow) ── */

.spread{
  position:relative;
  background: rgba(235,235,255,0.08);
  border:1px solid var(--line);
  border-radius:16px;
  padding:8px;
  height:100%;
  min-height:0;
  overflow:visible;
}

/* ── Controls ───────────────────────────────────────── */

.left-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  align-content:flex-start;
  padding:0;
  min-height:var(--controls-height);
  width:100%;
  margin:16px 0 0;
}
button, .filelabel{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#1a140a;
  font-weight:700;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
button:disabled{
  opacity:.5;
  cursor:default;
}
input[type="file"]{ display:none; }
.small{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

/* ── Cross Grid (Desktop 5×3) ───────────────────────── */

.cross{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:2.5%;
  padding:0;
}
.cross-column{
  display:grid;
  gap:2.5%;
  position:relative;
  min-width:0;
  min-height:0;
}
.cross-column.left-layout{
  grid-column:1 / span 3;
  grid-row:1 / span 3;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
}
.cross-column.right-layout{
  grid-column:4 / span 2;
  grid-row:1 / span 3;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,1fr);
}
.slot{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  isolation:isolate;
}
.ghost-card{
  position:absolute;
  height:95%;
  aspect-ratio: 9 / 16;
  min-height:72px;
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:10px;
  opacity:.18;
  pointer-events:none;
}
.ghost-card.rotated{
  height:95%;
  aspect-ratio:9 / 16;
  transform:rotate(90deg);
  transform-origin:center center;
}

/* ── Deck Stage & Cards ─────────────────────────────── */

.deck-stage{
  position:absolute;
  inset:14px;
  z-index:10;
  pointer-events:none;
}
.deal-card{
  position:absolute;
  width:86px;
  height:153px;
  border-radius:var(--flip-radius);
  transition:
    left 760ms cubic-bezier(.22,1,.36,1),
    top 760ms cubic-bezier(.22,1,.36,1),
    transform 760ms cubic-bezier(.22,1,.36,1);
  overflow:visible;
}
.deal-card-container{
  width:100%;
  height:100%;
  perspective:1400px;
}
.deal-card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform var(--flip-speed) cubic-bezier(0.22, 0.75, 0.2, 1);
  transform-origin:center bottom;
  transform:translateY(0) rotateX(0deg) scale(1);
}
.deal-card.flipped .deal-card-inner{
  transform:translateY(-100%) rotateX(180deg) scale(1.06);
}
.deal-card-face{
  position:absolute;
  inset:0;
  border-radius:var(--flip-radius);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:var(--card-shadow);
  transition:box-shadow var(--flip-speed) ease;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  background-color:#202634;
}
.deal-card-face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--flip-radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  pointer-events:none;
}
.deal-card-visible{ transform:rotateX(0deg); }
.deal-card-hidden{ transform:rotateX(180deg); }
.deal-card.flipped .deal-card-face{
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
}
.deal-card.focused{
  z-index: 999 !important;
  transform: scale(1.06) !important;
}
.deal-card.focused .deal-card-face{
  box-shadow:0 0 30px rgba(201,169,106,0.95), 0 0 56px rgba(201,169,106,0.55), 0 14px 28px rgba(0,0,0,0.22);
}

/* ── Jump Buttons ───────────────────────────────────── */

.jump-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:0;
  flex:1 1 220px;
  min-width:220px;
}
.jump-btn{
  min-width:40px;
  justify-content:center;
  padding:8px 10px;
  font-size:14px;
  background:#141924;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
}
.jump-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 1px rgba(201,169,106,0.45);
}

/* ── Right Column / Panels ──────────────────────────── */

.right-column{
  display:grid;
  grid-template-rows:22fr 39fr 25fr;
  row-gap:var(--ui-gap);
  height:85vh;
  min-height:85vh;
  align-self:start;
}
.panel{
  background:rgba(27,31,39,0.88);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  overflow:auto;
  min-height:0;
  min-width:0;
  max-height:100%;
  box-sizing:border-box;
}
.panel h2{
  margin:0 0 8px;
  font-size:18px;
  color:var(--accent);
  padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
/* Deutung box already uses text-panel-header for its separator – avoid double line */
.text-panel-header { border-bottom:1px solid rgba(255,255,255,0.08); }
.text-panel-header h2 { margin:0; padding-bottom:0; border-bottom:none; }
.text-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:0;
  min-height:0;
}
.text-panel-header{
  flex:0 0 auto;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.text-panel-header h2{ margin:0; padding-bottom:0; border-bottom:none; }
.text-scroll{
  flex:1 1 auto;
  overflow:auto;
  min-height:0;
  max-height:100%;
  padding-top:6px;
  padding-right:2px;
}

/* ── Profile / Entries ──────────────────────────────── */

/* Desktop profile panel: 1/3 avatar — 2/3 text */
.profile-panel-body {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:10px;
  align-items:center;
}
.profile-avatar-desktop {
  width:100%; max-width:80px;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  justify-self:center;
  align-self:center;
  display:none; /* shown by JS when avatar available */
}

.profile-static{
  display:grid;
  gap:5px;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
}
.profile-line{
  display:flex;
  align-items:center;
  gap:8px;
}
.profile-line strong{ color:var(--accent); flex-shrink:0; }

/* Autoplay toggle switch */
.autoplay-switch{
  position:relative; display:inline-block;
  width:36px; height:20px; vertical-align:middle;
}
.autoplay-switch input{ opacity:0; width:0; height:0; }
.autoplay-slider{
  position:absolute; inset:0; cursor:pointer;
  background:#444; border-radius:20px; transition:.25s;
}
.autoplay-slider::before{
  content:''; position:absolute;
  width:16px; height:16px; left:2px; bottom:2px;
  background:#fff; border-radius:50%; transition:.25s;
}
.autoplay-switch input:checked + .autoplay-slider{ background:var(--accent); }
.autoplay-switch input:checked + .autoplay-slider::before{ transform:translateX(16px); }

.entry{
  padding:36px 0 42px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  scroll-margin-top: 0;
  white-space: normal;
}
.entry:first-child{ padding-top:0; }
.entry:last-child{ border-bottom:0; }
.entry-title{
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  margin:0 0 8px;
  padding:0;
}
.entry-text{
  font-size:15px;
  line-height:2.04;
  color:var(--text);
  white-space:pre-wrap;
  margin:0;
  padding:0;
}
.status{
  margin-top:0;
  color:var(--muted);
  font-size:14px;
  white-space:pre-wrap;
}

/* ── Audio ──────────────────────────────────────────── */

.audio-meta{
  color:var(--muted);
  font-size:13px;
  margin-bottom:0;
}
.audio-meta:empty{ display:none; }
.audio-player{
  width:100%;
  margin-bottom:12px;
}
.tracks{
  display:grid;
  gap:8px;
  max-height:140px;
  overflow:auto;
}
.track-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  background:#141924;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  font-size:14px;
}
.track-btn.active{
  border-color:var(--accent);
  color:var(--accent);
}

/* ── Positions ──────────────────────────────────────── */

.positions{
  margin-top:20px;
  background:rgba(27,31,39,0.88);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.positions h2{
  margin:0 0 12px;
  font-size:20px;
  color:var(--accent);
}
.positions-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px 18px;
}
.pos-item{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
}

/* ── Confirm Dialog ─────────────────────────────────── */

#confirmBox.hidden, .hidden{ display:none !important; }
#confirmBox{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(0,0,0,0.35);
}
.confirm-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#f3f3f3;
  color:#111;
  border-radius:16px;
  padding:18px;
  width:min(90vw, 340px);
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
}
.confirm-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.confirm-actions button{
  width:100%;
  justify-content:center;
}

/* ── Start Screen (Phase 2) ─────────────────────────── */

.start-screen{
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:flex-start; /* Inhalt oben beginnen lassen damit er scrollbar ist */
  justify-content:center;
  background:rgba(9,7,13,0.85);
  border-radius:16px;
  transition:opacity 0.35s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px 8px;
}
.start-screen.fade-out{
  opacity:0;
  pointer-events:none;
}

/* ── Loading Pulse Overlay ──────────────────────── */

.loading-overlay{
  position:absolute;
  inset:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(9,7,13,0.7);
  border-radius:16px;
}
.loading-pulse{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--accent);
  animation:pulseGlow 1.2s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%  { transform:scale(0.6); opacity:0.4; box-shadow:0 0 0 0 rgba(201,169,106,0.6); }
  50% { transform:scale(1.0); opacity:1;   box-shadow:0 0 40px 12px rgba(201,169,106,0.4); }
  100%{ transform:scale(0.6); opacity:0.4; box-shadow:0 0 0 0 rgba(201,169,106,0.6); }
}
.start-dialog{
  text-align:center;
  padding:24px 24px 32px;
  max-width:420px;
  width:100%;
  margin:auto; /* zentriert vertikal wenn genug Platz, scrollt wenn zu hoch */
}
.start-dialog h2{
  font-size:22px;
  color:var(--accent);
  margin:0 0 16px;
  line-height:1.4;
}
.start-dialog p{
  color:var(--muted);
  font-size:15px;
  margin:0 0 18px;
  line-height:1.5;
}
.start-dialog input[type="text"]{
  display:block;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-size:15px;
  outline:none;
  margin-bottom:22px;
  transition:border-color 0.2s;
}
.start-dialog input[type="text"]:focus{
  border-color:var(--accent);
}
.start-dialog input[type="text"]::placeholder{
  color:var(--muted);
  opacity:0.7;
}
.start-btn{
  font-size:17px;
  padding:14px 32px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#1a140a;
  font-weight:700;
  border-radius:12px;
  cursor:pointer;
  letter-spacing:0.02em;
  transition:transform 0.15s, box-shadow 0.2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.start-btn:hover{
  transform:scale(1.04);
  box-shadow:0 0 24px rgba(201,169,106,0.5);
}
@media (max-width:768px){
  .start-screen{
    border-radius:0;
  }
  .loading-overlay{
    border-radius:0;
  }
  .start-dialog{
    padding:10px 12px 14px;
  }
  .start-dialog h2{
    font-size:17px;
    margin:0 0 8px;
  }
  .start-dialog p{
    font-size:13px;
    margin:0 0 8px;
  }
  .start-btn{
    font-size:15px;
    padding:10px 22px;
    margin-top:10px !important;
  }
}

/* ── Profil Toggle (mobile only, shown via media query) ── */

.profil-toggle,
.login-top-btn,
.hauptmenue-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:rgba(255,255,255,0.06);
  color:var(--accent);
  border:1px solid rgba(201,169,106,0.25);
  border-radius:8px;
  padding:0 10px;
  height:32px;
  box-sizing:border-box;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color 0.2s;
}
/* Profil-Toggle: Avatar darf nie aus dem Button herausragen */
.profil-toggle {
  overflow:hidden;
  max-width:180px;
}
.profil-toggle img {
  width:22px; height:22px; min-width:22px; max-width:22px;
  border-radius:50%; object-fit:cover; flex-shrink:0; display:block;
}
.profil-popup{
  display:none;
}
/* Popup sichtbar wenn .hidden entfernt wurde – gilt auf allen Breakpoints */
.profil-popup:not(.hidden){
  display:block;
  position:absolute;
  top:100%;
  right:0;
  z-index:200;
  background:rgba(27,31,39,0.97);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  min-width:240px;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.profil-popup .profile-static{
  font-size:13px;
  gap:5px;
  line-height:1.35;
}
/* Avatar in popup: positioned right, vertically centred */
.popup-avatar{
  display:none;
  width:46px; height:46px;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--accent);
  flex-shrink:0;
}
.profil-popup:not(.hidden) .popup-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.profil-popup:not(.hidden) .popup-inner .popup-avatar{
  display:block;
}
.profil-popup:not(.hidden) .popup-inner .profile-static{
  flex:1;
}
.topinfo-actions{
  display:none;
}
.mute-toggle{
  display:none;
}
/* Avatar mini: constrain size globally so it never shows at full resolution */
.profil-avatar-mini {
  width:22px; height:22px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--accent); flex-shrink:0; vertical-align:middle;
  display:inline-block;
}
.banner-handle{
  display:none;
}

/* ── Profil-Popup Action Buttons (global – works on all breakpoints) ── */
.profil-popup-actions {
  border-top:1px solid var(--line);
  margin-top:8px; padding-top:6px;
  display:flex; flex-direction:column; gap:2px;
}
.profil-popup-action {
  display:block; width:100%; padding:7px 4px;
  color:var(--text); font-size:13px;
  background:none; border:none; text-align:left;
  cursor:pointer; text-decoration:none; font-family:inherit;
  border-radius:4px; transition:background 0.1s; box-sizing:border-box;
  line-height:1.4;
}
.profil-popup-action:hover { background:rgba(201,169,106,0.12); }
.profil-popup-divider { height:1px; background:rgba(201,169,106,0.2); margin:2px 0; }
.profil-popup-logout { color:#e57373; }
.profil-popup-logout:hover { background:rgba(229,115,115,0.1) !important; }

/* ── Tab Drawer (mobile only) ─────────────────────────── */

.tab-drawer{
  display:none;
}

/* ── Desktop: hide mobile-only elements ─────────────── */

.desktop-only{ display:block; }

/* ── Desktop: show login/profil button right side ─────── */
@media (min-width:769px){
  .topinfo-actions{
    display:flex;
    position:absolute;
    right:32px;
    left:auto;
    top:50%;
    transform:translateY(-50%);
    gap:6px;
    align-items:center;
    z-index:10;
  }
  /* Alle Buttons im Desktop-Topbar gleich hoch */
  .topinfo-actions button,
  .topinfo-actions a {
    height:36px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    padding-top:0;
    padding-bottom:0;
  }
  .topinfo-actions .mute-toggle{ display:none; }
  /* Login/Profil-Button auf Desktop standardmäßig sichtbar */
  .topinfo-actions .login-top-btn{ display:inline-flex; }
  .topinfo-actions .hauptmenue-toggle{ display:inline-flex; }
  /* Eingeloggter Profil-Button: nur Avatar + Name, kein Rahmen */
  .profil-toggle[data-loggedin="1"]{
    background:none !important;
    border:none !important;
    padding:0 6px;
    height:36px;
  }
}

/* ── Responsive: Tablet (≤1200px) ───────────────────── */

@media (max-width:1200px){
  .main{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; }
  .left-column{ height:auto; min-height:0; max-height:none; }
  .spread{ height:auto; min-height:760px; max-height:none; }
  .cross{ min-width:0; min-height:520px; height:520px; }
  .left-controls{ height:auto; min-height:0; max-height:none; }
  .right-column{ grid-template-rows:auto auto auto; height:auto; min-height:0; max-height:none; margin-top:0; }
  .text-scroll{ max-height:50vh; }
  .positions-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── Responsive: Mobile (≤768px) — Full viewport, no scroll ── */

@media (max-width:768px){
  /* Body: kein overflow:hidden mehr – position:fixed auf topinfo hält Topbar sichtbar */
  html, body{
    height:100%;
    overflow:hidden;
  }

  /* Topbar: im Flex-Flow von .wrap – kein position:fixed nötig,
     da .wrap selbst fixed ist und nichts scrollt */
  .topinfo{
    position:relative;
    flex-shrink:0;
    height:44px;
    padding:4px 10px;
    justify-content:space-between;
    z-index:200;
    background:var(--panel);
    display:flex;
    align-items:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  .topinfo-logo{
    height:32px;
    max-height:32px;
  }
  .topinfo-actions{
    position:static;
    transform:none;
    display:flex;
    gap:6px;
    align-items:center;
  }
  .profil-toggle, .login-top-btn, .hauptmenue-toggle{
    font-size:12px;
    height:30px;
    padding:0 8px;
  }
  .hauptmenue-toggle {
    display:inline-flex;
    margin-left:6px;
  }
  .mute-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:rgba(255,255,255,0.06);
    color:var(--accent);
    border:1px solid rgba(201,169,106,0.25);
    border-radius:8px;
    padding:0 8px;
    height:30px;
    box-sizing:border-box;
    font-size:16px;
    line-height:1;
    font-weight:700;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color 0.2s;
  }
  .profil-popup{
    position:absolute;
    top:100%;
    right:0;
    z-index:60;
    background:rgba(27,31,39,0.95);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    min-width:200px;
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
  }
  .profil-popup.hidden{ display:none !important; }
  .profil-popup:not(.hidden){ display:block; }

  /* Profil button: avatar mini for logged-in state */
  .profil-avatar-mini {
    width:22px; height:22px; border-radius:50%; object-fit:cover;
    border:1.5px solid var(--accent); flex-shrink:0; vertical-align:middle;
  }

  /* Banner handle – deaktiviert, Topbar bleibt immer sichtbar */
  .banner-handle{
    display:none !important;
  }

  /* Wrap = fixierter Container über den ganzen Viewport.
     Topbar und Spielbereich sind Flex-Kinder darin.
     Safari-Viewport-Shifts verschieben nichts. */
  .wrap{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:0 0 52px; /* kein Seitenabstand, 52px unten = Tab-Drawer */
    width:100%;
  }

  /* Main: nimmt verfügbaren Platz */
  .main{
    display:block;
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
    height:auto;
    width:100%;
  }

  /* Left column = Spielfeld */
  .left-column{
    height:100%;
    min-height:0;
    overflow:hidden;
    width:100%;
  }

  /* Desktop-Panels verstecken */
  .right-column{ display:none !important; }
  .desktop-only{ display:none !important; }

  /* Spread: füllt left-column, volle Breite ohne Rundung */
  .spread{
    height:100%;
    min-height:0;
    overflow:hidden;
    width:100%;
    padding:2px;
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  /* 3×5 Grid */
  .cross{
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(5, 1fr);
    gap:2px;
    min-height:0;
    height:100%;
  }
  .cross-column.left-layout,
  .cross-column.right-layout{
    display:contents;
  }

  /* Slot-Platzierung */
  .cross-column.left-layout > .slot:nth-child(1){ grid-row:1; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(2){ grid-row:1; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(3){ grid-row:1; grid-column:3; }
  .cross-column.left-layout > .slot:nth-child(4){ grid-row:2; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(5){ grid-row:2; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(6){ grid-row:2; grid-column:3; }
  .cross-column.left-layout > .slot:nth-child(7){ grid-row:3; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(8){ grid-row:3; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(9){ grid-row:3; grid-column:3; }
  .cross-column.right-layout > .slot:nth-child(1){ grid-row:4; grid-column:3; }
  .cross-column.right-layout > .slot:nth-child(2){ grid-row:5; grid-column:1; }
  .cross-column.right-layout > .slot:nth-child(3){ grid-row:4; grid-column:1; }
  .cross-column.right-layout > .slot:nth-child(4){ grid-row:4; grid-column:2; }
  .cross-column.right-layout > .slot:nth-child(5){ grid-row:5; grid-column:2; }
  .cross-column.right-layout > .slot:nth-child(6){ grid-row:5; grid-column:3; }

  /* Buttons – behalten seitlichen Abstand */
  .left-controls{
    flex:0 0 auto;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    padding:6px 8px;
    width:100%;
    margin:4px 0 0;
  }
  .left-controls > button{
    flex:1 1 0;
    padding:10px 4px;
    font-size:12px;
    white-space:nowrap;
  }
  .jump-buttons{ display:none !important; }

  /* Restliche Desktop-Elemente verstecken */
  .positions,
  #folderStatus{
    display:none !important;
  }

  /* ── Tab Drawer ──────────────────────────────────── */
  .tab-drawer{
    /* Fixiert am unteren Bildschirmrand – volle Breite */
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    z-index:40;
    width:100%;
    padding:0;
  }
  .tab-bar{
    display:flex;
    gap:4px;
    padding:4px;
    background:rgba(27,31,39,0.95);
    border:1px solid var(--line);
    border-left:none;
    border-right:none;
    border-radius:0;
  }
  .tab-drawer.open .tab-bar{
    border-radius:0;
  }
  .tab-btn{
    flex:1 1 0;
    padding:8px 4px;
    font-size:12px;
    font-weight:700;
    text-align:center;
    justify-content:center;
    background:transparent;
    color:var(--muted);
    border:1px solid transparent;
    border-radius:0;
    cursor:pointer;
    transition:all 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .tab-btn.active{
    background:rgba(201,169,106,0.1);
    color:var(--accent);
    border-color:rgba(201,169,106,0.3);
  }
  .tab-handle{
    flex:0 0 40px;
    padding:8px 4px;
    font-size:12px;
    text-align:center;
    justify-content:center;
    background:transparent;
    color:var(--accent);
    border:1px solid transparent;
    border-radius:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tab-drawer.open .tab-handle{
    transform:rotate(180deg);
  }
  .tab-content{
    display:none;
    background:rgba(27,31,39,0.95);
    border:1px solid var(--line);
    border-top:none; /* obere Kante grenzt an Tab-Bar */
    border-radius:0; /* keine runden Ecken – dockt oben an Tab-Bar, unten an Bildschirmrand */
    margin-top:-1px;
  }
  .tab-drawer.open .tab-content{
    display:block;
    max-height:40vh;
    max-height:40dvh;
    overflow:hidden;
  }
  .tab-pane{
    display:none;
    height:100%;
  }
  .tab-pane.active{
    display:block;
  }
  .tab-scroll{
    height:100%;
    max-height:33vh;
    max-height:33dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px 12px;
  }
  .tab-positions-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:6px;
  }
  .tab-pos-btn{
    padding:10px 4px;
    font-size:13px;
    font-weight:700;
    text-align:center;
    justify-content:center;
    background:rgba(255,255,255,0.04);
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:8px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:all 0.15s;
  }
  .tab-pos-btn.active{
    background:rgba(201,169,106,0.12);
    border-color:var(--accent);
    color:var(--accent);
  }
  .tab-pos-btn.next-reveal{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 0 6px rgba(201,169,106,0.35);
  }
  .tab-pos-btn:disabled{
    opacity:0.3;
    cursor:default;
  }
}