*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

.page{
  height:100%;
  display:grid;
  place-items:center;
  padding:10px;
}

.scene{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Bühne */
.stack{
  position:relative;
  width:min(92vmin, 880px);
  height:min(92vmin, 880px);
  user-select:none;
  touch-action:auto;
}

.layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.bg{ z-index:1; }
.body{ z-index:2; pointer-events:auto; cursor:pointer; }
.spear{ z-index:4; }
.eye{ z-index:5; }
.mouth{ z-index:6; }
.bubble{ z-index:7; }
.poemCloud{ z-index:50; }
.confirm{ z-index:60; }

.eyeClosed{ opacity:0; }
.eyeOpen{ opacity:1; }

/* Sprechblase */
.bubble{
  position:absolute;
  left:50%;
  top:2%;
  transform:translateX(-50%);
  width:min(86%, 680px);
  display:none;
  pointer-events:none;
}

.bubbleInner{
  position:relative;
  background:#fff;
  border:3px solid #000;
  border-radius:22px;
  padding:12px 14px;
  max-height:34%;
  overflow:hidden;
}

.bubbleTitle{
  font-weight:900;
  font-size:clamp(13px, 2.2vw, 17px);
  margin-bottom:6px;
}

.bubbleText{
  font-size:clamp(13px, 2.1vw, 18px);
  line-height:1.35;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.bubble.fadeout{ animation: fadeOut 260ms ease forwards; }
@keyframes fadeOut{ from{opacity:1;} to{opacity:0;} }

.bubbleInner::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:14px solid #000;
}
.bubbleInner::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-11px;
  transform:translateX(-50%);
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid #fff;
}

/* Abbruch Box */
.confirm{
  position:absolute;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  width:min(78%, 520px);
  display:none;
  pointer-events:auto;
}
.confirmInner{
  background:#fff;
  border:3px solid #000;
  border-radius:20px;
  padding:12px 14px;
}
.confirmText{
  font-size:clamp(14px, 2.4vw, 18px);
  font-weight:900;
  line-height:1.2;
  text-align:center;
}
.confirmBtns{
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.cbtn{
  padding:10px 14px;
  border:2px solid #000;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}
.cbtn:active{ transform:translateY(1px); }

/* Unten Buttons */
.links{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:2px solid #000;
  border-radius:999px;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.btn:active{ transform:translateY(1px); }

/* Gedicht Zufallsauswahl */
.poemCloud{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.stack.choosing .poemCloud{ pointer-events:auto; }
.stack.choosing .body{ pointer-events:none; }

.poemPick{
  pointer-events:auto;
  padding:10px 14px;
  border:2px solid #000;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:900;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,0.06);
  min-width:220px;
  text-align:center;
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.poemPick:active{ transform:translateY(1px); }

@keyframes popIn{
  0%{ transform:translate(-50%, -50%) scale(0.7); opacity:0; }
  70%{ transform:translate(-50%, -50%) scale(1.06); opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(1.0); opacity:1; }
}

@media (min-width:521px){
  .poemPick{
    position:absolute;
    transform:translate(-50%, -50%) scale(0.95);
    opacity:0;
  }
  .poemPick.pop{ animation:popIn 240ms ease-out forwards; opacity:1; }
}

@media (max-width:520px){
  .stack{ width:94vw; height:94vw; }
  .bubble{ top:0.5%; width:92%; }
  .bubbleInner{ max-height:26%; padding:10px 12px; }
  .bubbleText{ font-size:13px; line-height:1.4; }

  .poemCloud{ padding:18% 10% 10% 10%; }
  .poemCloud.list{
    display:flex;
    flex-direction:column;
    gap:10px;
    justify-content:flex-start;
    align-items:center;
  }

  .poemPick{
    position:relative;
    min-width:0;
    width:100%;
    max-width:100%;
    font-size:13px;
    padding:10px 12px;
    white-space:normal;
    opacity:1;
  }
}

/* Liste Overlay ganz simpel */
.listOverlay{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,0.35);
  z-index:9999;
  pointer-events:auto;
}

.listOverlay.open{ display:block; }

.listBox{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 820px);
  height:min(78vh, 620px);
  background:#fff;
  border:3px solid #000;
  border-radius:18px;
  overflow:hidden;
}

.listTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:3px solid #000;
}

.listHeadline{
  font-weight:900;
  font-size:16px;
}

.listX{
  width:42px;
  height:34px;
  border:2px solid #000;
  border-radius:999px;
  background:#fff;
  font-weight:900;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.listScroll{
  height:calc(100% - 55px);
  overflow:auto;
  padding:12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 1 Spalte Handy, 2 Tablet, 3 PC */
.listGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
}

@media (min-width:640px){
  .listGrid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:980px){
  .listGrid{ grid-template-columns: 1fr 1fr 1fr; }
}

.listLink{
  display:block;
  padding:10px 12px;
  border:2px solid #000;
  border-radius:14px;
  text-decoration:none;
  color:#000;
  font-weight:900;
  background:#fff;
  touch-action: manipulation;
}

.listLink:active{ transform:translateY(1px); }
.scene{ position:relative; }

.stack{ position:relative; z-index:1; }

.links{
  position:relative;
  z-index:200;          /* Buttons sind garantiert über der Bühne */
}
/* ===== PC Fix: Buttons immer über der Bühne ===== */
.scene{ position:relative; }
.links{ position:relative; z-index:5000; }

/* ===== Liste Overlay (fixed, scrollt sauber) ===== */
.listOverlay{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,0.35);
  z-index:99999;
  pointer-events:auto;
}

.listOverlay.open{ display:block; }

.listBox{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 820px);
  height:min(78vh, 620px);
  background:#fff;
  border:3px solid #000;
  border-radius:18px;
  overflow:hidden;
}

.listTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:3px solid #000;
}

.listHeadline{
  font-weight:900;
  font-size:16px;
}

.listX{
  width:42px;
  height:34px;
  border:2px solid #000;
  border-radius:999px;
  background:#fff;
  font-weight:900;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.listScroll{
  height:calc(100% - 55px);
  overflow:auto;
  padding:12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 1 Spalte Handy, 2 Tablet, 3 PC */
.listGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
}
@media (min-width:640px){
  .listGrid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:980px){
  .listGrid{ grid-template-columns: 1fr 1fr 1fr; }
}

.listLink{
  display:block;
  padding:10px 12px;
  border:2px solid #000;
  border-radius:14px;
  text-decoration:none;
  color:#000;
  font-weight:900;
  background:#fff;
  touch-action: manipulation;
}
.listLink:active{ transform:translateY(1px); }