/* Road Trip: dark and high-contrast so it's easy to glance at at night, with
   big buttons a passenger can hit on a bumpy road. Party Pad's brand colours. */
:root{
  --bg:#120e26; --bg2:#1b1538; --card:#211a45; --line:rgba(255,255,255,.12);
  --ink:#f4f0ff; --dim:#bdb3de; --mute:#8d82b3;
  --brand:#8975ff; --brand2:#6753ed; --coral:#ff705e; --gold:#ffd44d; --mint:#55d6b5;
  --good:#3fbf9c; --bad:#e8523f;
  --r:18px; --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased}
body{min-height:100vh; background:radial-gradient(120% 60% at 50% 0%, #2a1f5c 0%, var(--bg) 60%)}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--gold)}
.rt{max-width:640px; margin:0 auto; padding:14px 16px calc(28px + env(safe-area-inset-bottom))}

.rt-top{display:flex; align-items:center; gap:12px; margin:4px 0 10px}
.rt-top h1{font-size:1.35rem; font-weight:900; margin:0; flex:1}
.rt-back{font-size:1.4rem; text-decoration:none; color:var(--dim); width:40px; height:40px; display:grid; place-items:center; border-radius:50%}
.rt-lede{color:var(--dim); margin:0 0 14px}
.rt-warn{background:#3a1f1f; border:1px solid #7a3a33; color:#ffcfc7; padding:10px 12px; border-radius:12px; margin:0 0 12px}
.rt-note{color:var(--mute); font-size:.88rem; margin:6px 0 0}
.rt-note.center{text-align:center}

.rt-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin:0 0 12px}
.rt-card h2{font-size:1rem; margin:0 0 10px; letter-spacing:.02em; color:var(--gold)}
.rt-card label{display:block; font-size:.82rem; color:var(--dim); margin:12px 0 6px; font-weight:700}

.rt-games{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rt-game{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:12px; border-radius:14px; background:var(--bg2); border:2px solid transparent}
.rt-game .e{font-size:1.6rem}
.rt-game small{color:var(--mute); font-size:.78rem}
.rt-game.on{border-color:var(--brand); background:#2b2160}
.rt-game:disabled{opacity:.45; cursor:default}

.rt-players{display:flex; flex-wrap:wrap; gap:6px; min-height:4px; margin-bottom:8px}
.rt-chip{display:inline-flex; align-items:center; gap:6px; background:var(--brand2); padding:6px 6px 6px 12px; border-radius:999px; font-weight:700}
.rt-chip button{border:0; background:rgba(0,0,0,.25); width:24px; height:24px; border-radius:50%; line-height:1}

.rt-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rt-row input, .rt-row select{flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line); color:var(--ink); padding:11px 12px; border-radius:12px; font-size:1rem}

.rt-seg{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.rt-seg button, .rt-cats button{border:1px solid var(--line); background:var(--bg2); padding:9px 12px; border-radius:999px; font-weight:700; font-size:.9rem}
.rt-seg button.on, .rt-cats button.on{background:var(--brand); border-color:var(--brand); color:#fff}
.rt-cats{display:flex; flex-wrap:wrap; gap:6px}

.rt-btn{border:0; background:var(--brand2); padding:11px 16px; border-radius:12px; font-weight:800}
.rt-btn.ghost{background:transparent; border:1px solid var(--line)}
.rt-btn.danger{background:var(--bad)}
.rt-btn.big{padding:16px 10px; font-size:1.05rem; border-radius:16px}
.rt-link{border:0; background:none; color:var(--gold); text-decoration:underline; padding:0; font-size:inherit}

.rt-start{width:100%; border:0; margin:6px 0 10px; padding:20px; border-radius:20px; font-size:1.4rem; font-weight:900;
  color:#fff; background:linear-gradient(155deg,#8975ff 0%,#6753ed 56%,#4d3bc8 100%); box-shadow:0 10px 30px rgba(103,83,237,.45)}
.rt-start:disabled{opacity:.4}
.rt-credit{color:var(--mute); font-size:.78rem; text-align:center}

/* game */
.rt-status{font-size:.85rem; font-weight:800; padding:6px 12px; border-radius:999px; background:var(--bg2); color:var(--dim); min-height:30px}
.rt-status:empty{visibility:hidden}
.rt-status.listening{background:var(--coral); color:#fff; animation:rtpulse 1.2s ease-in-out infinite}
.rt-status.speaking{background:var(--brand2); color:#fff}
.rt-status.paused{background:var(--gold); color:#2a2000}
@keyframes rtpulse{50%{opacity:.6}}

.rt-stage{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:18px; min-height:46vh}
.rt-meta{display:flex; justify-content:space-between; color:var(--mute); font-size:.85rem; font-weight:700}
.rt-turn{display:inline-block; margin-top:10px; background:var(--gold); color:#2a2000; font-weight:900; padding:5px 12px; border-radius:999px}
.rt-q{font-size:1.45rem; line-height:1.3; font-weight:800; margin:14px 0 16px}
.rt-opts{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.rt-opts li{display:flex; gap:12px; align-items:center; background:var(--bg2); border:2px solid transparent; padding:12px 14px; border-radius:14px; font-size:1.15rem; font-weight:700}
.rt-opts li b{display:grid; place-items:center; min-width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--gold)}
.rt-opts li b:empty{display:none}
.rt-opts li.right{border-color:var(--good); background:#153b33}
.rt-opts li.wrong{border-color:var(--bad); background:#3b1a1a}
.rt-opts li.dim{opacity:.45}
.rt-heard{color:var(--dim); font-style:italic; margin:14px 0 0; min-height:1.4em}
.rt-big{font-size:1.6rem; font-weight:900; text-align:center; margin:18vh 0}

.rt-scores{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0}
.rt-score{display:inline-flex; gap:8px; align-items:center; background:var(--bg2); border:1px solid var(--line); padding:8px 14px; border-radius:999px; font-size:1.05rem}
.rt-score b{color:var(--dim); font-weight:700}
.rt-controls{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rt-notice{position:fixed; left:12px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); background:#3a1f1f; color:#ffd9d2; border:1px solid #7a3a33; padding:12px; border-radius:14px; text-align:center; z-index:10}

/* home: one big button */
.rt-top .rt-btn.ghost{padding:8px 12px; font-size:.9rem}
button.rt-back{border:0; background:none}
.rt-home{display:flex; flex-direction:column; align-items:center; text-align:center; padding:6vh 0 3vh}
.rt-go-big{width:min(72vw,300px); aspect-ratio:1; border-radius:50%; border:0; color:#fff; font-size:2.6rem; font-weight:900;
  background:radial-gradient(circle at 35% 30%, #a193ff 0%, #6753ed 55%, #4d3bc8 100%);
  box-shadow:0 0 0 10px rgba(137,117,255,.18), 0 0 0 22px rgba(137,117,255,.08), 0 18px 50px rgba(103,83,237,.55);
  animation:rtbreathe 3s ease-in-out infinite}
.rt-go-big:active{transform:scale(.97)}
.rt-go-big:disabled{opacity:.4; animation:none}
@keyframes rtbreathe{50%{box-shadow:0 0 0 14px rgba(137,117,255,.22), 0 0 0 30px rgba(137,117,255,.06), 0 18px 50px rgba(103,83,237,.55)}}
.rt-home-note{color:var(--dim); font-size:1.05rem; max-width:340px; margin:34px 0 8px}
.rt-home-last{color:var(--mute); font-size:.9rem; max-width:360px}

/* Would You Rather */
.rt-wyr{display:grid; gap:8px}
.rt-side{background:var(--bg2); border:2px solid transparent; border-radius:16px; padding:14px; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center}
.rt-side > b{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--gold); font-size:1.1rem}
.rt-side > span{font-size:1.2rem; font-weight:800; line-height:1.25}
.rt-side .rt-picks{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px}
.rt-side.truth{border-color:var(--gold); background:#3a2f12}
.rt-or{text-align:center; color:var(--mute); font-weight:900; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem}
.rt-chip.ghost{background:transparent; border:1px dashed var(--lilac, #b991ff); color:var(--dim); padding:4px 10px}
.rt-music{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:12px 0 0}
.rt-music .rt-btn{padding:8px 12px; font-size:.9rem; min-width:44px}
.rt-music .rt-note{margin:0}