@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Outfit:wght@400;500;600;700&display=swap');

:root{
  --crimson:#EE1B4D;
  --ink:#2A0511;
  --green:#16A34A;
  --red:#E11D48;
  --disp:'Bricolage Grotesque','Arial Black',sans-serif;
  --body:'Outfit',system-ui,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }

body{
  font-family:var(--body);
  color:#fff;
  background:linear-gradient(165deg,#F0245A 0%,#EE1B4D 48%,#D60F3E 100%);
  background-attachment:fixed;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-user-select:none;
  user-select:none;
}

.wrap{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:24px 22px calc(22px + env(safe-area-inset-bottom));
  position:relative;
}

.deco{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.deco span{ position:absolute; color:rgba(255,255,255,.10); }

.screen{
  position:relative;
  z-index:1;
  display:none;
  flex:1;
  flex-direction:column;
  animation:fade .35s ease both;
}
.screen.active{ display:flex; }

@keyframes fade{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
@keyframes pop{ 0%{opacity:0;transform:scale(.86) rotate(-2deg);} 60%{transform:scale(1.03);} 100%{opacity:1;transform:scale(1);} }

h1{
  font-family:var(--disp);
  font-weight:800;
  font-size:54px;
  line-height:.9;
  letter-spacing:1px;
  font-style:italic;
  text-shadow:0 5px 16px rgba(120,0,30,.35);
  margin-top:6px;
}

.tagline{ font-style:italic; opacity:.92; margin:6px 0 20px; font-size:14px; }
.label{ font-size:11px; letter-spacing:3px; text-transform:uppercase; opacity:.8; font-weight:600; margin:14px 0 10px; }

.players{ display:flex; flex-direction:column; gap:9px; }

.prow{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  padding:5px 6px 5px 15px;
}
.prow input{
  flex:1;
  background:transparent;
  border:none;
  color:#fff;
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  outline:none;
  padding:8px 0;
}
.prow input::placeholder{ color:rgba(255,255,255,.5); }
.prow.joined{ background:rgba(255,255,255,.22); }
.prow .badge{
  font-size:9px;
  letter-spacing:1px;
  background:rgba(255,255,255,.3);
  padding:3px 7px;
  border-radius:999px;
}

.del{
  width:32px;
  height:32px;
  border-radius:9px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.75);
  font-size:19px;
  cursor:pointer;
}

.add{
  margin-top:10px;
  width:100%;
  background:rgba(255,255,255,.12);
  border:1.5px dashed rgba(255,255,255,.45);
  color:#fff;
  padding:13px;
  border-radius:13px;
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }

.chip{
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:11px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:.15s;
  text-align:left;
}
.chip small{
  display:block;
  font-weight:400;
  font-size:10.5px;
  opacity:.7;
  margin-top:1px;
}
.chip.on{ background:#fff; color:var(--crimson); border-color:#fff; }
.chip.adult.on{ background:#2A0511; color:#fff; border-color:#2A0511; }
.chip.locked{ opacity:.5; }

.premnote{ font-size:12px; opacity:.85; margin:8px 0 0; }
.premnote b{ font-weight:700; }

.statusdot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
  flex:0 0 auto;
}
.statusdot.ok{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.statusdot.wait{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }

.emptyline{ font-size:13px; opacity:.7; padding:6px 2px; }

.qrbox.compact{ padding:14px; margin:0 0 14px; }
.qrbox.compact #qrS img,
.qrbox.compact #qrS canvas{ display:block; border-radius:8px; }

.spacer{ flex:1; min-height:14px; }

.btn{
  width:100%;
  border:none;
  border-radius:18px;
  padding:19px;
  font-family:var(--disp);
  font-weight:800;
  font-size:21px;
  letter-spacing:.5px;
  cursor:pointer;
  transition:transform .1s;
  box-shadow:0 10px 24px rgba(120,0,30,.28);
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.55; }

.btn-white{ background:#fff; color:var(--crimson); }
.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.35); box-shadow:none; }
.btn-sm{ padding:13px; font-size:16px; }

.row2{ display:flex; gap:10px; }
.ghead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px; }

.turn{ font-size:12px; opacity:.8; letter-spacing:2px; text-transform:uppercase; }
.who{ font-family:var(--disp); font-weight:800; font-size:32px; margin:2px 0 18px; }

.scorebtn{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:12px;
  padding:8px 13px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.choose-q{ font-size:17px; opacity:.92; margin-bottom:16px; }
.choices{ display:flex; flex-direction:column; gap:13px; }

.choice{
  border-radius:18px;
  padding:22px;
  text-align:left;
  cursor:pointer;
  border:none;
  font-family:var(--disp);
  transition:transform .1s;
  width:100%;
}
.choice:active{ transform:scale(.98); }
.choice .ct{ font-weight:800; font-size:23px; display:block; }
.choice .cs{ font-family:var(--body); font-weight:500; font-size:12.5px; opacity:.85; margin-top:4px; display:block; }

.c-prawda{ background:#fff; color:var(--crimson); }
.c-wyzwanie{ background:var(--ink); color:#fff; }

.card{
  background:#fff;
  color:var(--ink);
  border-radius:24px;
  padding:32px 26px;
  margin:8px 0 20px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-shadow:0 18px 40px rgba(80,0,20,.3);
  animation:pop .4s cubic-bezier(.2,.9,.3,1.2) both;
}

.ctype{
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:14px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.ctype.t{ color:var(--crimson); }
.ctype.w{ color:var(--ink); }

.pbadge{
  font-size:9.5px;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:1px;
}
.pbadge.soft{ background:#E8F5E9; color:#2E7D32; }
.pbadge.friends{ background:#E3F2FD; color:#1565C0; }
.pbadge.hot{ background:#FCE4EA; color:var(--red); }
.pbadge.nolimits{ background:#2A0511; color:#fff; }

.ctext{ font-size:22px; font-weight:600; line-height:1.35; }

.actions{ display:flex; flex-direction:column; gap:11px; }
.done,.ok1{ background:#fff; color:var(--green); }
.fail{ background:#fff; color:var(--red); }

.waitline{ text-align:center; opacity:.92; font-size:16px; margin-top:8px; }

.board{ display:flex; flex-direction:column; gap:9px; margin:8px 0 20px; }

.brow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.13);
  border-radius:14px;
  padding:13px 17px;
}
.brow .rank{ font-family:var(--disp); font-weight:800; opacity:.6; width:28px; }
.brow .bn{ flex:1; font-weight:600; font-size:16px; }
.brow .bs{ font-family:var(--disp); font-weight:800; font-size:21px; }
.brow.lead{ background:#fff; color:var(--crimson); }

.qrbox{
  background:#fff;
  border-radius:20px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:10px 0;
}
.qrbox #qr img,
.qrbox #qr canvas{ display:block; border-radius:8px; }

.codebig{
  font-family:var(--disp);
  font-weight:800;
  font-size:30px;
  color:var(--ink);
  letter-spacing:3px;
}

.linkrow{ width:100%; display:flex; gap:8px; }
.linkrow input{
  flex:1;
  border:1px solid #eee;
  border-radius:10px;
  padding:11px;
  font-size:12px;
  color:var(--ink);
  font-family:var(--body);
}
.copy{
  background:var(--crimson);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:0 16px;
  font-weight:700;
  cursor:pointer;
}

.count{ text-align:center; font-size:13px; opacity:.85; margin-top:8px; }

.winwrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}
.crown{ font-size:60px; }
.winname{ font-family:var(--disp); font-weight:800; font-size:42px; }
.winscore{ font-size:18px; opacity:.9; }

.nameinput{
  width:100%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  border-radius:14px;
  color:#fff;
  font-family:var(--body);
  font-size:18px;
  font-weight:600;
  padding:16px;
  outline:none;
}
.nameinput::placeholder{ color:rgba(255,255,255,.55); }

.toast{
  position:fixed;
  left:50%;
  bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  opacity:0;
  transition:.3s;
  z-index:5;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }