:root {
  --bg: #07050c; --glass: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.12);
  --text: #f5f0f7; --muted: #a89bb0; --accent: #ff2d55; --accent-soft: #ff6b8a;
  --green: #30d158; --orange: #ff9f0a;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
.bg-glow { position:fixed; top:-20%; left:-10%; width:70vw; height:70vw; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); pointer-events:none; z-index:0; }
.bg-glow2 { position:fixed; bottom:-15%; right:-15%; width:60vw; height:60vw; background:radial-gradient(circle,rgba(191,90,242,0.12) 0%,transparent 70%); pointer-events:none; z-index:0; }
#app { position:relative; z-index:1; min-height:100%; }
.screen { display:none; min-height:100vh; padding:24px 16px 40px; animation:fadeIn 0.35s ease; }
.screen.active { display:flex; justify-content:center; align-items:flex-start; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.glass { background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:28px; padding:28px 22px; width:100%; max-width:420px; box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.container { margin-top:3vh; }
.logo { font-size:48px; text-align:center; margin-bottom:6px; filter:drop-shadow(0 0 18px rgba(255,45,85,0.5)); }
h1 { font-family:'Outfit',sans-serif; font-size:2.1rem; font-weight:700; text-align:center; letter-spacing:-0.5px; background:linear-gradient(135deg,#fff 30%,var(--accent-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
.tagline { text-align:center; color:var(--muted); font-size:0.9rem; margin-bottom:24px; }
h2 { font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:600; text-align:center; margin-bottom:20px; }
.tut-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.tut-step { display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:16px; padding:14px; }
.tut-step .num { width:28px; height:28px; border-radius:50%; background:rgba(255,45,85,0.2); color:var(--accent-soft); font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tut-step strong { display:block; font-size:0.95rem; margin-bottom:4px; }
.tut-step p { font-size:0.82rem; color:var(--muted); line-height:1.4; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:0.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
input[type="text"] { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; color:var(--text); font-size:1rem; outline:none; }
input[type="text"]:focus { border-color:var(--accent); background:rgba(255,255,255,0.08); }
.gender-row { display:flex; gap:8px; margin-top:10px; }
.g-btn { flex:1; padding:11px 6px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.04); color:var(--muted); font-size:0.82rem; font-weight:500; cursor:pointer; }
.g-btn.active { background:rgba(255,45,85,0.18); border-color:rgba(255,45,85,0.5); color:var(--accent-soft); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:10px 14px; border-radius:20px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.04); color:var(--muted); font-size:0.85rem; font-weight:500; cursor:pointer; }
.chip.active { background:rgba(255,45,85,0.18); border-color:rgba(255,45,85,0.5); color:var(--accent-soft); }
.range-value { text-align:center; font-size:0.88rem; font-weight:600; color:var(--accent-soft); }
.btn-main { width:100%; padding:16px; border-radius:50px; border:none; background:linear-gradient(135deg,#ff2d55,#e01e45); color:white; font-size:1.05rem; font-weight:600; cursor:pointer; margin-top:10px; box-shadow:0 8px 28px rgba(255,45,85,0.35); }
.btn-main:active { transform:scale(0.97); }
.btn-sec { flex:1; padding:15px; border-radius:50px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); color:var(--text); font-size:0.95rem; font-weight:500; cursor:pointer; }
.btn-icon { width:42px; height:42px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); color:var(--text); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hint { text-align:center; font-size:0.72rem; color:var(--muted); margin-top:20px; opacity:0.75; }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.players { flex:1; text-align:center; font-size:0.9rem; color:var(--muted); }
.players strong { color:var(--text); }
.badge { font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:20px; background:rgba(255,45,85,0.18); color:var(--accent-soft); white-space:nowrap; }
.session-bar { text-align:center; margin-bottom:16px; padding:10px; background:rgba(255,45,85,0.1); border-radius:14px; border:1px solid rgba(255,45,85,0.25); }
.session-bar.hidden { display:none; }
.session-bar #sessionTime { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:700; color:var(--accent-soft); display:block; }
.session-label { font-size:0.75rem; color:var(--muted); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card-btn { background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:20px; padding:22px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; color:var(--text); }
.card-btn:active { background:rgba(255,45,85,0.12); border-color:rgba(255,45,85,0.4); transform:scale(0.97); }
.card-btn .emoji { font-size:26px; }
.card-btn span:last-child { font-size:0.88rem; font-weight:600; text-align:center; line-height:1.3; }
.play-area { background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:22px; padding:36px 18px 28px; min-height:240px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; margin-bottom:16px; position:relative; }
.tag { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:0.68rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 12px; border-radius:20px; }
.tag.truth { background:rgba(48,209,88,0.15); color:var(--green); }
.tag.dare { background:rgba(255,45,85,0.18); color:var(--accent-soft); }
.tag.never { background:rgba(255,159,10,0.15); color:var(--orange); }
.tag.hot { background:rgba(255,45,85,0.2); color:var(--accent-soft); }
.tag.penalty { background:rgba(255,45,85,0.3); color:#ff8fa3; }
.info-btn { position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--glass-border); background:rgba(255,255,255,0.08); color:var(--muted); font-size:0.9rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.turn { font-size:0.85rem; color:var(--muted); margin:18px 0 12px; }
.turn strong { color:var(--accent-soft); }
.card-text { font-size:1.2rem; font-weight:500; line-height:1.5; padding:0 4px; }
.card-sub { margin-top:14px; font-size:0.82rem; color:var(--muted); line-height:1.4; }
.choice-row { display:flex; gap:12px; width:100%; margin-top:18px; }
.choice { flex:1; padding:18px 10px; border-radius:16px; border:1.5px solid var(--glass-border); background:rgba(255,255,255,0.05); color:var(--text); font-size:1.05rem; font-weight:600; cursor:pointer; }
.timer-box { background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:18px; padding:16px; margin-bottom:16px; text-align:center; }
.timer-box.hidden { display:none; }
.timer-display { font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:700; letter-spacing:2px; margin-bottom:12px; color:var(--accent-soft); }
.timer-controls { display:flex; gap:8px; }
.timer-controls .btn-sec { padding:12px; font-size:0.9rem; }
.actions { display:flex; gap:12px; }
.actions .btn-main, .actions .btn-sec { margin-top:0; flex:1; }
.modal { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.2s ease; }
.modal.hidden { display:none; }
.modal-box { max-width:360px; width:100%; padding:28px 22px; }
.modal-box h3 { font-family:'Outfit',sans-serif; font-size:1.25rem; margin-bottom:14px; text-align:center; }
.modal-box p { font-size:0.95rem; line-height:1.55; color:var(--muted); margin-bottom:22px; text-align:left; }
.modal-box .btn-main { margin-top:0; }
@media (max-width:380px) {
  .glass { padding:24px 16px; border-radius:24px; }
  h1 { font-size:1.85rem; }
  .card-text { font-size:1.1rem; }
  .play-area { min-height:220px; padding:32px 14px 24px; }
  .timer-display { font-size:2rem; }
}