:root{
  --bg:#0f3a33;              /* noticeably lighter background */
  --card:#1a5a50;            /* lighter card */
  --ink:#effffb;
  --muted:#c9fff2;
  --pri:#48f2d6;             /* brighter primary */
  --sec:#2b8a7a;             /* brighter secondary */
  --danger:#ff5f7a;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(72,242,214,.30), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(72,242,214,.18), transparent 60%),
    linear-gradient(180deg,#06231f,var(--bg));
}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px;background:rgba(15,58,51,.62);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{font-weight:900;letter-spacing:.10em}
.topBtns{display:flex;gap:10px}
.app{padding:14px;max-width:520px;margin:0 auto;position:relative}
.app::before{
  content:"";position:fixed;inset:-40px;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(45,212,191,.05) 0 6px, transparent 6px 18px);
  mask-image: radial-gradient(closest-side at 50% 20%, rgba(0,0,0,.75), transparent 70%);
  opacity:.55;transform:rotate(-6deg);
}
h1,h2,h3,h4{margin:10px 0}
.subtitle{color:var(--muted);margin:0 0 12px 0}
.card{
  background:rgba(26,90,80,.88)
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:14px;margin:12px 0;
}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:10px 0;}
.rowCol{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
label span{color:var(--muted);font-size:14px}
input,select{
  width:160px;max-width:60vw;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:#061311;color:var(--ink);padding:10px;font-size:16px
}
button{border:none;border-radius:14px;padding:12px 14px;font-size:16px;color:var(--ink)}
.primary{background:var(--pri);font-weight:800;color:#02211d}
.secondary{background:var(--sec)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.14)}
.ghostWide{background:transparent;border:1px solid rgba(255,255,255,.14);width:100%}
.huge{padding:18px 14px;font-size:20px}
.center{text-align:center}
.big{font-size:18px;white-space:pre-line}
.small{font-size:13px}
.muted{color:var(--muted)}
.hidden{display:none !important}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;align-items:center;gap:8px;background:#061311;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}
.check input{width:auto}
.btnStack{display:flex;flex-direction:column;margin-top:10px}
.btnStack > button + button{margin-top:10px}
.actionBtn{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.textarea{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#061311;color:var(--ink);padding:10px;font-size:16px;resize:vertical}
.divider{height:1px;background:rgba(255,255,255,.10);margin:14px 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#061311;border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:14px;z-index:9999}

/* Modal Safari-safe */
.modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;padding:12px}
.modal.open{display:flex}
.sheet{width:min(520px,100%);background:#061311;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px}

/* Hold-to-reveal flip */
.holdCard{position:relative;width:100%;height:220px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#061311;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;margin:12px 0;perspective:900px}
.cardInner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .18s ease}
.holdCard.revealed .cardInner{transform:rotateY(180deg)}
.cardFace{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cardFace.front{transform:rotateY(0deg)}
.cardFace.back{transform:rotateY(180deg)}
.frontText{font-weight:900;font-size:18px;letter-spacing:.02em;color:var(--muted)}
.role{font-weight:900;letter-spacing:.08em;margin-bottom:10px}
.word{font-size:30px;font-weight:1000}
.role.bad,.word.bad{color:var(--danger);text-shadow:0 0 14px rgba(255,77,109,.55);animation:waasShake .18s linear infinite}
@keyframes waasShake{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-.6px,.3px,0)}50%{transform:translate3d(.6px,-.3px,0)}75%{transform:translate3d(-.3px,-.6px,0)}}
@media (prefers-reduced-motion: reduce){.role.bad,.word.bad{animation:none}}


#screenReveal .card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:80px;
  background:linear-gradient(
    to bottom,
    rgba(12,35,33,0) 0%,
    rgba(12,35,33,0.6) 35%,
    rgba(7,26,23,0.9) 70%,
    rgba(7,26,23,1) 100%
  );
  pointer-events:none;
}


/* Make 'Volgende speler' button pop more on reveal screen */
#screenReveal #btnNextPlayer{
  background:linear-gradient(
    180deg,
    rgba(45,212,191,0.95),
    rgba(32,180,165,0.95)
  );
  color:#02211d;
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}


/* Overall lighter feel */
.card{
  background:rgba(26,90,80,.88)
}
.topbar{
  background:rgba(11,42,37,.7);
}
button.primary{
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
}

button.secondary{box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22)}


/* Lighter reveal panel (card + button area) */
#screenReveal .card{
  background:rgba(38,120,108,.92);
  border:1px solid rgba(255,255,255,.18);
}

#screenReveal .muted{
  color:#d9fff6;
}

/* Make hold card lighter */
#screenReveal .holdCard{
  background:#1f6f63;
  border-color:rgba(255,255,255,.25);
}

/* Make reveal area feel airier */
#screenReveal{
  background:linear-gradient(
    180deg,
    rgba(72,242,214,.10),
    rgba(72,242,214,.04)
  );
}


/* === Stronger contrast: reveal card vs background === */
#screenReveal{
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(72,242,214,.12), rgba(15,58,51,.08));
}

/* Reveal container card: much brighter */
#screenReveal .card{
  background:linear-gradient(
    180deg,
    #3fdcc2,
    #2aa999
  );
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* Hold card: clearly separated from container */
#screenReveal .holdCard{
  background:linear-gradient(
    180deg,
    #1f6f63,
    #154e46
  );
  border:2px solid rgba(255,255,255,.35);
}

/* Front text clearer */
#screenReveal .frontText{
  color:#eafff9;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* === Next player button: very clear CTA === */
#screenReveal #btnNextPlayer{
  background:linear-gradient(
    180deg,
    #ffffff,
    #e7fff9
  );
  color:#0b3a33;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Make button text unmistakable */
#screenReveal #btnNextPlayer::after{
  content:" →";
}

/* Ensure no overlay covers the Next Player button */
#screenReveal .card::after{ display:none !important; }