:root { --transition: 300ms ease-in-out; }

html, body {
  margin:0; padding:0; height:100%;
  background:#000; color:#fff;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* App zentriert – kein Vollbild erzwingen */
#app{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:16px;
  background:#000;
}

/* Bühne mit Ratio + max Breite */
.frame{
  position:relative;
  width:min(100%, 900px);
  /* Angepasstes Verhältnis, damit alle drei Karten vollständig sichtbar bleiben */
  aspect-ratio: 5 / 11;
  background:#000;
  border-radius:16px;
  border:1px solid #222;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  overflow:hidden;
}
@media (min-aspect-ratio: 5/4) {
  .frame{
    width:min(100%, 1200px); /* Desktop größer */
    /* Behalte das Hochformat auch auf Desktops, damit die Karten nicht abgeschnitten werden */
    aspect-ratio: 5 / 11;
  }
}

/* Schichten innerhalb der Bühne */
.layer{ position:absolute; inset:0; }
.hidden{ display:none !important; }

/* Splash/Endcard: komplette Bühne füllen, nichts beschneiden */
#splash img, #endcard img{
  width:100%; height:100%;
  object-fit:contain;
}

/* Stage: 3 exakt gleiche Reihen per Grid */
#stage{ display:grid; grid-template-rows: 1fr 1fr 1fr; }

/* Separat eine Rows-Hülle, damit Topbar/Overlays sauber darüberliegen */
.rows{
  position:relative; inset:0;
  display:grid; grid-template-rows: 1fr 1fr 1fr;
}
.row{
  position:relative; width:100%; height:100%;
  overflow:hidden;
}
.row img{
  width:100%;
  height:100%;
  /* 'contain' sorgt dafür, dass die kompletten Kartengrafiken sichtbar bleiben */
  object-fit: contain;
  transform: translateX(0);
  transition: transform var(--transition);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Falls deine Stücke exakt zusammensitzen müssen und nichts beschnitten werden darf:
   -> 'cover' oben auf 'contain' ändern (kann Ränder/Letterboxing erzeugen) */

/* Top-Bar (Buttons) sichtbar, klickbar, über Rows */
#topBar{
  position:absolute; top:8px; left:8px; right:8px;
  display:flex; align-items:flex-start; gap:12px;
  z-index:10; pointer-events:auto;
}
.tinyBtn{
  margin:0; padding:6px 10px; border-radius:9999px;
  background:rgba(255,255,255,0.95); color:#000;
  font-weight:600; font-size:13px; border:none; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.spacer{ flex:1; }

/* Overlays */
.overlay{ position:absolute; inset:0; pointer-events:none; }
#flash{ background:#fff; opacity:0; transition:opacity 150ms ease-in-out; }
#confetti{ overflow:hidden; }
.confetti{ position:absolute; width:8px; height:8px; will-change:transform,opacity; }

.toast{
  left:50%; bottom:90px; transform:translateX(-50%);
  width:max-content; padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.85); color:#fff; font-size:12px;
  opacity:0; transition:opacity .25s ease;
}
.toast.show{ opacity:1; }

/* Endcard Klickflächen responsiv */
.end-link{
  position:absolute; background:transparent;
  width:clamp(140px, 22vw, 260px);
  height:clamp(140px, 22vw, 260px);
  bottom:clamp(80px, 12vh, 200px);
}
#discordHit{ left:clamp(16px, 4vw, 40px); }
#instagramHit{ right:clamp(16px, 4vw, 40px); }

/* Kleinere Phones */
@media (max-width: 360px){
  .tinyBtn{ font-size:12px; padding:5px 8px; }
}