/* "Find the spy": rose (its colour in the design system), a dossier feel. Shares style.css with the other games. */
body.spyfall {
  --accent: #fb7185;
  --accent-soft: rgba(251, 113, 133, .15);
  --glow-a: #fb7185;
  --glow-b: #0ea5e9;
}
body.spyfall .spy-mark rect:first-child { fill: #fb7185; }
body.spyfall .spy-mark circle, body.spyfall .spy-mark path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
body.spyfall main { max-width: 1240px; }

.spy-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: start; }
.spy-side, .spy-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .spy-layout { grid-template-columns: 1fr; } }

/* your card */
.spy-card { min-height: 140px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px; border-radius: 16px;
  border: 1px dashed var(--border-strong); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.spy-card-box.town .spy-card { border: 1px solid rgba(14, 165, 233, .5); background: linear-gradient(135deg, rgba(14, 165, 233, .18), transparent); }
.spy-card-box.spy .spy-card { border: 1px solid rgba(239, 68, 68, .5); background: linear-gradient(135deg, rgba(239, 68, 68, .2), transparent); }
.card-big { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.card-role { font-size: 1.15rem; font-weight: 700; }

/* locations */
.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.loc-grid.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.loc { padding: 7px 10px; font-size: .84rem; text-align: left; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.loc.out { opacity: .35; text-decoration: line-through; }
.loc.answer { border-color: #22c55e; background: rgba(34, 197, 94, .18); opacity: 1; text-decoration: none; font-weight: 700; }

/* the stage: questions, accusations, the final vote, the reveal */
.stage-panel { display: flex; flex-direction: column; gap: 10px; }
.stage-top { display: flex; align-items: baseline; gap: 10px; }
.big-timer { font: 700 2.4rem 'Geist Mono', monospace; letter-spacing: -.02em; }
.big-timer.low { color: #f87171; }
.stage-title { font-size: 1.35rem; font-weight: 700; }
.ask-row { gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.vote-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reveal-banner { padding: 14px 18px; border-radius: 14px; font-size: 1.4rem; font-weight: 800; }
.reveal-banner.spy { background: rgba(239, 68, 68, .16); border: 1px solid rgba(239, 68, 68, .45); }
.reveal-banner.town { background: rgba(34, 197, 94, .16); border: 1px solid rgba(34, 197, 94, .45); }
.winner-line { font-size: 1.2rem; font-weight: 700; }

/* the table */
.spy-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.spy-player { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.spy-player.asking { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.spy-player.me .sp-main b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.spy-player .avatar { width: 40px; height: 40px; }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-score { font: 700 1.2rem 'Geist Mono', monospace; min-width: 28px; text-align: right; }
.spy-history { margin: 0; padding-left: 18px; line-height: 1.7; font-size: .9rem; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.results li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.results li.first { border-color: rgba(245, 197, 66, .5); background: linear-gradient(90deg, rgba(245, 197, 66, .14), var(--surface-2)); }
.results .spacer { flex: 1; }

.packs-field { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pack-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
.pack-list .check { margin: 0; }