@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --bg-page:            #FAF9F7;
  --bg-surface:         #FFFFFF;
  --bg-surface-sunken:  #F5F3EF;

  --border:             #E8E4DD;
  --border-strong:      #D9D2C7;

  --text-primary:       #1C1A17;
  --text-secondary:     #6B6459;
  --text-tertiary:      #A39C8D;

  --truth:        #5B3DF5;
  --truth-subtle: #EEEAFE;
  --dare:         #E4572E;
  --dare-subtle:  #FDEEE6;

  --danger:       #C4342B;
  --danger-subtle:#FBEAE8;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,26,23,0.05);
  --shadow-md: 0 12px 32px -10px rgba(28,26,23,0.18), 0 2px 8px -2px rgba(28,26,23,0.08);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease: ease;
  --dur-fast: 150ms;
  --dur-med: 240ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background:var(--bg-page);
  color:var(--text-primary);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }
button{ font-family:inherit; }
::selection{ background:var(--truth); color:#fff; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--truth); outline-offset:2px; border-radius:4px; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.wrap{ max-width:720px; margin:0 auto; padding:28px 20px 32px; }
.wrap-narrow{ max-width:420px; padding-top:60px; }

.top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.top h1{ font-size:20px; font-weight:800; letter-spacing:-0.01em; }

.player-badge{
  font-size:12.5px; color:var(--text-secondary); margin-bottom:18px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.player-badge strong{ color:var(--text-primary); font-weight:700; }
.insta-badge{
  font-size:11px; font-weight:700; color:var(--text-tertiary);
  background:var(--bg-surface-sunken); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:2px 9px;
}

.btn-ghost{
  background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary);
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:var(--radius-pill);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), transform 120ms var(--ease-out);
}
.btn-ghost:active{ transform:scale(0.96); }
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{ background:var(--bg-surface-sunken); }
}

.banner{ border-radius:var(--radius-sm); padding:11px 14px; font-size:13px; font-weight:600; margin-bottom:16px; }
.banner-error{ background:var(--danger-subtle); color:var(--danger); border:1px solid var(--danger); }

.btn-full{ width:100%; }

/* ---- Login ---- */
.login-card{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:32px 26px; text-align:center;
}
.login-card h1{ font-size:22px; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px; }
.login-sub{ font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:22px; }
.login-form{ display:flex; flex-direction:column; gap:10px; }
.login-form input{ width:100%; text-align:center; }

/* ---- Stage ---- */
.stage{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:40px 28px; text-align:center; margin-bottom:18px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  min-height:230px; justify-content:center;
}
.stage-eyebrow{ font-size:12px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; }
.stage-heading{ font-size:19px; font-weight:700; margin-top:2px; }
.stage-help{ font-size:13.5px; color:var(--text-secondary); }
.truth-reply{ color:var(--truth); font-weight:700; }

.picked-name{
  font-size:clamp(32px, 8vw, 46px); font-weight:800; letter-spacing:-0.02em;
  margin:4px 0 2px;
}
.picked-name.is-cycling{ color:var(--text-tertiary); }

.btn-spin{
  margin-top:8px; background:var(--truth); color:#fff; border:none;
  font-size:15px; font-weight:700; padding:14px 36px; border-radius:var(--radius-pill);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), transform 120ms var(--ease-out);
}
.btn-spin:active{ transform:scale(0.96); }
.btn-spin:disabled{ background:var(--border-strong); color:var(--text-tertiary); cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){
  .btn-spin:not(:disabled):hover{ background:#4A2FD9; }
}

.choice-row{ display:flex; gap:12px; margin-top:10px; }
.btn-choice{
  font-size:14.5px; font-weight:700; padding:12px 26px; border-radius:var(--radius-pill);
  border:1.5px solid transparent; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform 120ms var(--ease-out);
}
.btn-choice:active{ transform:scale(0.96); }
.btn-truth{ background:var(--truth-subtle); color:var(--truth); border-color:var(--truth); }
.btn-dare{ background:var(--dare-subtle); color:var(--dare); border-color:var(--dare); }
@media (hover:hover) and (pointer:fine){
  .btn-truth:hover{ background:var(--truth); color:#fff; }
  .btn-dare:hover{ background:var(--dare); color:#fff; }
}

.type-badge{
  display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  padding:4px 12px; border-radius:var(--radius-pill); margin-top:2px;
}
.type-badge.type-truth{ background:var(--truth-subtle); color:var(--truth); }
.type-badge.type-dare{ background:var(--dare-subtle); color:var(--dare); }

.task-text{
  font-size:20px; font-weight:600; line-height:1.4; max-width:46ch;
  margin:6px 0 4px;
}

.insta-note{
  border:1px solid var(--dare); background:var(--dare-subtle);
  border-radius:var(--radius-md); padding:12px 16px;
  max-width:46ch; text-align:left; margin:8px 0 4px;
}
.insta-note-title{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--dare); margin-bottom:3px;
}
.insta-note-body{ font-size:13.5px; color:var(--text-primary); font-weight:500; }
.insta-note-handle{ font-size:12px; color:var(--text-secondary); margin-top:5px; }

.stage.is-revealing .picked-name,
.stage.is-revealing .task-text{
  animation: pop-in var(--dur-med) var(--ease-out);
}
@keyframes pop-in{
  from{ opacity:0; transform:scale(0.94) translateY(4px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

/* ---- Panels ---- */
.panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:18px 18px 20px;
}
.panel h2{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.count{
  font-size:11.5px; font-weight:700; color:var(--text-secondary);
  background:var(--bg-surface-sunken); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:1px 8px;
}

.player-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; max-height:220px; overflow-y:auto; }
.player-list li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 4px 8px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600;
}
.player-list li.is-active{ background:var(--truth-subtle); }
.you-tag{ font-size:11px; font-weight:600; color:var(--text-tertiary); }
@media (hover:hover) and (pointer:fine){
  .player-list li:hover{ background:var(--bg-surface-sunken); }
}
.player-list .empty-row{ color:var(--text-tertiary); font-weight:400; font-size:13px; }
.player-list form{ display:contents; }
.icon-btn{
  width:26px; height:26px; border-radius:50%; border:none; background:transparent;
  color:var(--text-tertiary); font-size:16px; line-height:1; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{ background:var(--danger-subtle); color:var(--danger); }
}

.pool-counts{ display:flex; gap:16px; font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
.pool-counts b{ color:var(--text-primary); font-weight:800; }

.add-form{ display:flex; gap:8px; }
.add-task-form{ flex-wrap:wrap; }
.add-task-form select{ flex:0 0 auto; }
.add-task-form input[type="text"]{ flex:1 1 140px; }

input[type="text"], select{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:9px 11px; font-size:13.5px; font-family:inherit; color:var(--text-primary);
  background:var(--bg-surface); min-width:0;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input[type="text"]{ flex:1; }
input[type="text"]:focus, select:focus{
  border-color:var(--truth); box-shadow:0 0 0 3px var(--truth-subtle);
}

.btn-primary{
  background:var(--text-primary); color:#fff; border:none;
  font-size:13px; font-weight:700; padding:9px 16px; border-radius:var(--radius-sm);
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), transform 120ms var(--ease-out);
}
.btn-primary:active{ transform:scale(0.96); }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ background:#000; }
}

.btn-danger{
  background:var(--danger); color:#fff; border:none;
  font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:var(--radius-sm);
  cursor:pointer;
}

.hint{ font-size:11.5px; color:var(--text-tertiary); margin-top:10px; }

/* ---- Reset modal ---- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(28,26,23,0.35);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
  opacity:0; visibility:hidden; transition:opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal{
  background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:22px; max-width:380px; width:100%;
  transform:scale(0.96); transition:transform var(--dur-med) var(--ease-out);
}
.modal-backdrop.is-open .modal{ transform:scale(1); }
.modal-title{ font-size:16px; font-weight:800; margin-bottom:8px; }
.modal-body{ font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:18px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; }

.made-by{
  text-align:center; font-size:11.5px; color:var(--text-tertiary);
  padding:20px 0 28px; font-weight:600; letter-spacing:0.02em;
}

@media (max-width:560px){
  .panels{ grid-template-columns:1fr; }
  .stage{ padding:32px 18px; }
  .choice-row{ width:100%; }
  .choice-row form{ flex:1; }
  .btn-choice{ width:100%; }
}