/* phone.css — kaal, zwart, grote knoppen (FIX 4) */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100dvh; }

.scherm {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px; min-height: 0;
}
.scherm[hidden] { display: none !important; }

.titel {
  font-family: Georgia, serif; color: #d4af37;
  font-size: 2.4rem; letter-spacing: .12em; margin: 0;
}
.wacht-tekst { font-size: 1.3rem; opacity: .8; margin: 0; }
.wacht-naam { font-size: 1.6rem; color: #d4af37; margin: 0; }
.fout { background: #c0392b; padding: 10px 14px; border-radius: 6px; font-size: 1rem; }

#naamInput {
  width: 100%; max-width: 380px; height: 64px;
  font-size: 1.4rem; text-align: center;
  background: #111; color: #fff; border: 2px solid #444; border-radius: 8px;
}
.knop {
  width: 100%; max-width: 380px; min-height: 64px;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .06em;
  border: none; border-radius: 8px; background: #333; color: #fff;
}
.knop.goud { background: #d4af37; color: #1a1a1a; }
.volgende { min-height: 72px; font-size: 1.6rem; }

.top-regel { font-size: 1.3rem; letter-spacing: .06em; opacity: .85; text-align: center; }
.vraag { font-size: 1.2rem; text-align: center; opacity: .9; }

/* kaart groot in beeld, met flip (FIX 4) */
.kaart-podium { display: flex; align-items: center; justify-content: center; min-height: 0; }
.flip { animation: flip 400ms ease-out; transform-style: preserve-3d; }
@keyframes flip { from { transform: rotateY(90deg); } to { transform: rotateY(0deg); } }

.uitslag { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uitslag .oordeel { font-size: 2.2rem; font-weight: 800; letter-spacing: .08em; }
.uitslag.goed .oordeel { color: #2ecc71; }
.uitslag.fout .oordeel { color: #e74c3c; }
.uitslag .slokken { font-size: 1.5rem; color: #d4af37; }

/* keuzeknoppen (FIX 4) */
.keuzes { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.keuze {
  width: 100%; min-height: 120px;
  font-size: 1.6rem; font-weight: 800; letter-spacing: .08em;
  color: #fff; background: #1f1f1f;
  border: 3px solid #555; border-radius: 10px;
}
.keuze.balk { min-height: 100px; font-size: 1.4rem; }
.keuze.vlak-rood { background: #c0392b; border-color: #e06055; }
.keuze.vlak-zwart { background: #1a1a1a; border-color: #666; }

/* bus */
/* De busspeler ziet alleen de vraag; de rij staat op de TV. */
#scherm-bus { justify-content: center; gap: 18px; }
#scherm-bus .keuzes { gap: 16px; }
#scherm-bus .keuze { min-height: 180px; font-size: 2rem; }

/* eigen hand onderaan (FIX 4/5) */
.hand {
  flex: none; display: flex; gap: 8px; justify-content: center;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #222; background: #050505; min-height: 106px;
}
.hand[hidden] { display: none; }
.handkaart { transition: transform 180ms ease; touch-action: pan-x; }
.handkaart.gedimd { opacity: .4; }
.handkaart.speelbaar { box-shadow: 0 0 0 3px #d4af37; border-radius: 8px; }
.handkaart.weg { transform: translateY(-140px); opacity: 0; }