/* ============================================================
   SOCIAL ANIMAL — prototype styles. Mobile-first, no framework.
   ============================================================ */
:root{
  --bg:#0f1020; --bg2:#16172b; --card:#1c1d35; --card2:#232545;
  --ink:#f4f4fb; --ink-dim:#a7a9c7; --ink-faint:#6d6f93;
  --line:#2d2f52;
  --accent:#ffd23f;        /* hive-mind gold */
  --accent2:#7c5cff;       /* social purple  */
  --green:#3fbf6b; --gold:#ffd23f; --blue:#4aa8ff; --grey:#3a3c5e;
  --radius:16px; --radius-sm:10px;
  --maxw:520px;
  --tap:48px;
  --fs:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* our flex/grid rules must not override the hidden attribute */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:radial-gradient(120% 80% at 50% -10%, #1b1c38 0%, var(--bg) 60%);
  color:var(--ink); font-size:var(--fs);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.4;
  min-height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body[data-large="on"]{ --fs:18px; }
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--accent2); outline-offset:2px; border-radius:6px}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; max-width:var(--maxw); margin:0 auto; padding:12px 14px 4px;
}
.topbar-right{display:flex; gap:6px}
.wordmark{
  font-size:1.12rem; letter-spacing:.22em; font-weight:800; margin:0;
  background:linear-gradient(92deg,var(--accent),#ff9d3f 60%,var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.icon-btn{
  width:var(--tap); height:var(--tap); min-width:var(--tap);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; font-size:1.1rem; display:grid; place-items:center;
  transition:transform .12s var(--ease), background .15s;
}
.icon-btn:active{transform:scale(.92); background:var(--card2)}

/* ---------- layout ---------- */
.game{max-width:var(--maxw); margin:0 auto; padding:10px 14px 28px; display:flex; flex-direction:column; gap:14px}

/* ---------- prompt ---------- */
.prompt-card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 18px; box-shadow:0 10px 30px -18px #000;
}
.prompt-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.puzzle-no{font-weight:800; color:var(--ink-faint); font-size:.8rem; letter-spacing:.05em}
.audience-chip{
  font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(124,92,255,.18); color:#c9bcff; border:1px solid rgba(124,92,255,.4);
  padding:4px 9px; border-radius:999px;
}
.audience-chip[data-special="1"]{ background:rgba(255,210,63,.16); color:#ffe08a; border-color:rgba(255,210,63,.45) }
.category-chip{font-size:.74rem; color:var(--ink-faint); margin-left:auto}
.prompt-lead{margin:0 0 2px; font-size:.82rem; color:var(--ink-dim); letter-spacing:.02em}
.prompt-text{margin:0; font-size:1.5rem; line-height:1.22; font-weight:800; letter-spacing:-.01em}

/* ---------- meter ---------- */
.meter-wrap{display:flex; flex-direction:column; gap:8px}
.meter-row{display:flex; align-items:baseline; justify-content:space-between}
.meter-label{font-size:.72rem; font-weight:800; letter-spacing:.18em; color:var(--ink-faint)}
.meter-val{font-size:1.05rem; font-weight:800; color:var(--accent)}
.meter-track{height:10px; background:var(--bg2); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.meter-fill{height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .6s var(--ease)}
.guess-dots{display:flex; gap:7px; align-items:center}
.guess-dots .dot{width:13px; height:13px; border-radius:50%; background:var(--grey); border:1px solid var(--line); transition:transform .2s var(--ease), background .2s}
.guess-dots .dot.used{background:var(--accent2)}
.guess-dots .dot.miss{background:transparent; border-color:var(--ink-faint)}
.guess-dots .label{font-size:.72rem; color:var(--ink-faint); margin-left:4px}

/* ---------- board ---------- */
.board{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:rank}
.tile{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:54px; padding:0 14px; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--line); overflow:hidden;
}
.tile .rank{
  width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:grid; place-items:center;
  font-weight:800; font-size:.85rem; color:var(--ink-faint); background:var(--bg2); border:1px solid var(--line);
}
.tile .ans{font-weight:700; font-size:1.05rem; flex:1; min-width:0}
.tile .pct{font-weight:800; color:var(--ink-dim); font-variant-numeric:tabular-nums}
/* hidden state */
.tile.hidden .ans{color:var(--ink-faint); font-weight:600; letter-spacing:.3em}
.tile.hidden .pct{color:transparent; background:var(--bg2); border-radius:6px; width:34px; height:14px}
.tile .bar{position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,rgba(124,92,255,.16),rgba(255,210,63,.10)); z-index:0; transition:width .7s var(--ease)}
.tile .rank,.tile .ans,.tile .pct{position:relative; z-index:1}
/* revealed */
.tile.revealed{border-color:var(--accent2); background:var(--card2)}
.tile.revealed .rank{background:var(--accent2); color:#fff; border-color:transparent}
.tile.revealed .ans{color:var(--ink)}
.tile.revealed .pct{color:var(--ink)}
.tile.top1.revealed{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 8px 26px -14px var(--accent)}
.tile.top1.revealed .rank{background:var(--accent); color:#231a00}
.tile.top1.revealed .ans{color:var(--accent)}
.tile.just .ans{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
.crown{position:absolute; right:10px; top:-9px; font-size:1rem; filter:drop-shadow(0 2px 4px #0008)}

/* ---------- originals ---------- */
.originals{background:var(--card); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:10px 14px}
.originals-title{margin:0 0 6px; font-size:.82rem; font-weight:800; color:var(--ink-dim)}
.originals-hint{font-weight:500; color:var(--ink-faint)}
.originals-list{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.originals-list li{background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.85rem; color:var(--ink-dim)}

/* ---------- input ---------- */
.guess-bar{display:flex; gap:8px; position:sticky; bottom:8px; z-index:5}
.guess-input{
  flex:1; min-width:0; height:var(--tap); padding:0 16px; font-size:1.05rem;
  background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px;
  transition:border-color .15s;
}
.guess-input:focus{border-color:var(--accent2); outline:none}
.guess-input::placeholder{color:var(--ink-faint)}
.guess-btn{
  height:var(--tap); padding:0 22px; font-weight:800; font-size:1rem; border:none; border-radius:14px;
  background:linear-gradient(180deg,var(--accent),#ffb02e); color:#231a00;
  transition:transform .12s var(--ease), filter .15s;
}
.guess-btn:active{transform:scale(.95)}
.guess-btn:disabled{filter:grayscale(.7) brightness(.7); cursor:default}
.announce{min-height:1.2em; text-align:center; font-weight:700; color:var(--accent); margin:2px 0 0; transition:opacity .2s}

/* ---------- sheets / modals ---------- */
.sheet-scrim{position:fixed; inset:0; background:rgba(6,6,16,.72); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center; z-index:50; padding:0}
.sheet{
  width:100%; max-width:var(--maxw); background:var(--bg2); border:1px solid var(--line);
  border-radius:22px 22px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  position:relative; max-height:92dvh; overflow:auto; animation:slideup .35s var(--ease);
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-close{position:absolute; right:12px; top:10px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1.3rem; line-height:1}
.sheet-title{margin:2px 0 14px; font-size:1.3rem; font-weight:800}

/* help */
.help-big{font-size:1.05rem; margin:0 0 12px}
.help-steps{margin:0 0 14px; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.help-steps li{line-height:1.35}
.help-foot{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:.92rem; color:var(--ink-dim); margin:0 0 16px}

/* buttons */
.btn-primary{height:var(--tap); padding:0 22px; border:none; border-radius:14px; font-weight:800; font-size:1rem;
  background:linear-gradient(180deg,var(--accent2),#5d3eff); color:#fff; transition:transform .12s var(--ease)}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{height:var(--tap); padding:0 20px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font-weight:700}
.wide{width:100%}
.danger{color:#ff8a8a; border-color:#5a2b3a}

/* ---------- end screen ---------- */
.end-sheet{text-align:center}
.end-emoji{font-size:3rem; line-height:1; margin:4px 0 2px; animation:pop .5s var(--ease)}
.end-tier{margin:0; font-size:1.7rem; font-weight:900; letter-spacing:.02em}
.end-sub{margin:6px 0 16px; color:var(--ink-dim)}
.end-stats{display:flex; justify-content:center; gap:10px; margin-bottom:16px}
.end-stat{flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 6px}
.end-stat-num{font-size:1.4rem; font-weight:900}
.end-stat-cap{font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em}
.end-grid{font-size:1.8rem; letter-spacing:6px; margin:4px 0 14px}
.end-flavor{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; color:var(--ink-dim); font-size:.92rem; margin:0 0 14px; text-align:left}
.end-actions{display:flex; gap:10px; justify-content:center; margin-bottom:10px}
.end-next{font-size:.85rem; color:var(--ink-faint); margin:6px 0 0}

/* contribute */
.contribute{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px; text-align:left}
.contribute-label{display:block; font-size:.86rem; color:var(--ink-dim); margin-bottom:8px}
.contribute-form{display:flex; gap:8px}
.contribute-input{flex:1; min-width:0; height:42px; padding:0 12px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; color:var(--ink)}
.contribute-btn{height:42px; padding:0 16px; border:none; border-radius:10px; background:var(--accent2); color:#fff; font-weight:800}
.contribute-thanks{margin:8px 0 0; color:var(--green); font-weight:700; font-size:.9rem}

/* ---------- stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:16px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 4px; text-align:center}
.stat-num{font-size:1.25rem; font-weight:900}
.stat-cap{font-size:.62rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em}
.stats-sub{font-size:.95rem; margin:6px 0 10px; color:var(--ink-dim)}
.tier-bars{display:flex; flex-direction:column; gap:7px}
.tier-bar{display:flex; align-items:center; gap:8px; font-size:.85rem}
.tier-bar .tname{width:96px; flex:0 0 96px; color:var(--ink-dim)}
.tier-bar .ttrack{flex:1; height:18px; background:var(--bg2); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.tier-bar .tfill{height:100%; background:var(--accent2); width:0; transition:width .5s var(--ease)}
.tier-bar .tnum{width:26px; text-align:right; font-weight:800; color:var(--ink-dim)}

/* ---------- settings ---------- */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600}
.toggle-row input{width:46px; height:28px; appearance:none; background:var(--grey); border-radius:999px; position:relative; transition:background .2s; flex:0 0 46px}
.toggle-row input:checked{background:var(--accent2)}
.toggle-row input::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .2s var(--ease)}
.toggle-row input:checked::after{transform:translateX(18px)}
.settings-note{font-size:.82rem; color:var(--ink-faint); margin:14px 0}
.settings-credit{font-size:.72rem; color:var(--ink-faint); text-align:center; margin:18px 0 0; letter-spacing:.04em}

/* ---------- colorblind / high contrast grid ---------- */
body[data-cb="on"] .meter-fill{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#bbb 6px,#bbb 12px)}
body[data-cb="on"] .tile.revealed{border-color:#fff}
body[data-cb="on"] .tile.top1.revealed{box-shadow:0 0 0 2px #fff}

/* ---------- reduced motion ---------- */
body[data-motion="off"] *{animation:none !important; transition:none !important}
@media (prefers-reduced-motion:reduce){ body:not([data-motion="on"]) *{animation:none!important; transition:none!important} }

@media (min-width:560px){ .sheet-scrim{align-items:center} .sheet{border-radius:22px} }
@media (max-width:340px){ .prompt-text{font-size:1.3rem} }