/* ============================================================
   LE JEU DES DIEUX — V2 — DESIGN SYSTEM (mobile-first)
   ============================================================ */

:root {
  --bg-0: #0a0705;
  --bg-1: #130d08;
  --bg-2: #1c140c;
  --bg-3: #2a1e12;
  --gold: #d4af37;
  --gold-bright: #f0c420;
  --gold-dim: #8a6d1f;
  --ivory: #f5eedc;
  --ivory-dim: #c9bfa7;
  --mal: #e04545;
  --mal-deep: #8b1e1e;
  --bien: #6fb3d2;
  --ok: #5cb85c;
  --border: rgba(212, 175, 55, 0.25);
  --border-strong: rgba(212, 175, 55, 0.55);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg-0);
  color: var(--ivory);
  min-height: 100dvh;
  line-height: 1.5;
  background-image:
    radial-gradient(ellipse at 25% 0%, rgba(212, 175, 55, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 30, 30, 0.09) 0%, transparent 55%);
  background-attachment: fixed;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.03em; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------- layout ---------- */
.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(12px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
}
.app.wide { max-width: 760px; }

.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 2px 14px;
}
.topbar .brand {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px;
  color: var(--gold); letter-spacing: 0.12em;
}
.topbar .chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ivory-dim);
  background: rgba(0,0,0,0.25); text-transform: uppercase;
  white-space: nowrap;
}
.chip.gold { color: var(--gold); border-color: var(--border-strong); }
.chip.live { color: var(--ok); border-color: rgba(92,184,92,0.4); }
.chip.warn { color: var(--mal); border-color: rgba(224,69,69,0.4); }

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 14px;
}
.card.tight { padding: 14px; }
.card h2 { color: var(--gold); font-size: 17px; margin-bottom: 12px; }
.card .sub { color: var(--ivory-dim); font-size: 13px; }

.hero {
  text-align: center;
  padding: 34px 18px 26px;
}
.hero .eyebrow {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.4em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 12px;
}
.hero h1 {
  font-size: clamp(30px, 9vw, 44px); font-weight: 900; line-height: 1.12;
  background: linear-gradient(180deg, #f5eedc 0%, #d4af37 55%, #8a6d1f 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 10px;
}
.hero .tagline { color: var(--ivory-dim); font-style: italic; font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 18px;
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border-radius: 12px; border: none; transition: transform 0.12s, box-shadow 0.2s, opacity 0.2s;
  min-height: 54px;
}
.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold-dim) 100%);
  color: var(--bg-0); box-shadow: 0 4px 18px rgba(212, 175, 55, 0.3);
}
.btn-ghost { background: rgba(212,175,55,0.06); color: var(--ivory); border: 1px solid var(--border-strong); }
.btn-danger { background: linear-gradient(135deg, var(--mal-deep), #a82626); color: var(--ivory); }
.btn-dark { background: var(--bg-3); color: var(--ivory-dim); border: 1px solid var(--border); }
.btn.small { min-height: 40px; padding: 9px 14px; font-size: 11px; border-radius: 9px; width: auto; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
.field input, .field select {
  width: 100%; padding: 15px 14px; font-size: 17px;
  background: rgba(0,0,0,0.35); color: var(--ivory);
  border: 1px solid var(--border); border-radius: 11px;
  outline: none;
}
.field input:focus { border-color: var(--gold); }
.field input.code { text-transform: uppercase; letter-spacing: 0.5em; text-align: center; font-family: 'Cinzel', serif; font-size: 26px; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid rgba(212,175,55,0.12);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .lbl { font-size: 14px; }
.toggle-row .lbl small { display: block; color: var(--ivory-dim); font-size: 11.5px; margin-top: 2px; }
.switch { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border); transition: 0.2s;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ivory-dim); transition: 0.2s;
}
.switch input:checked + .track { background: var(--gold-dim); border-color: var(--gold); }
.switch input:checked + .track::after { transform: translateX(22px); background: var(--gold-bright); }

.seg {
  display: flex; background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: 11px; overflow: hidden;
}
.seg button {
  flex: 1; padding: 12px 8px; background: transparent; border: none;
  color: var(--ivory-dim); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
}
.seg button.active { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: var(--bg-0); }

/* ---------- player list / target grid ---------- */
.plist { display: flex; flex-direction: column; gap: 8px; }
.prow {
  display: flex; align-items: center; gap: 11px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.15);
  border-radius: 11px; padding: 11px 13px;
}
.prow .seat {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--gold); font-family: 'Cinzel', serif;
  font-weight: 700; font-size: 13px; border: 1px solid var(--border);
}
.prow .name { flex: 1; font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .tag { font-size: 10.5px; color: var(--ivory-dim); }
.prow.dead { opacity: 0.45; }
.prow.dead .name { text-decoration: line-through; }
.prow.offline .name::after { content: ' ⚠'; color: var(--mal); }

.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 16px 8px; min-height: 64px;
  background: rgba(0,0,0,0.3); color: var(--ivory);
  border: 1.5px solid var(--border); border-radius: 13px;
  font-size: 15px; font-weight: 600; transition: all 0.13s;
}
.tbtn small { color: var(--ivory-dim); font-size: 10.5px; font-weight: 400; }
.tbtn.sel {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(212,175,55,0.08));
  color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(212,175,55,0.25);
}
.tbtn:active { transform: scale(0.96); }
.tbtn:disabled { opacity: 0.35; pointer-events: none; }

/* ---------- rôle card ---------- */
.role-card {
  border-radius: 18px; padding: 26px 20px; text-align: center;
  border: 1.5px solid var(--border-strong);
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-1) 100%);
  box-shadow: var(--shadow);
}
.role-card .emoji { font-size: 58px; line-height: 1; margin-bottom: 10px; }
.role-card .team-badge {
  display: inline-block; font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; padding: 5px 13px; border-radius: 3px;
  margin-bottom: 12px;
}
.role-card .team-badge.mal { background: rgba(224,69,69,0.14); color: var(--mal); border: 1px solid rgba(224,69,69,0.4); }
.role-card .team-badge.bien { background: rgba(111,179,210,0.12); color: var(--bien); border: 1px solid rgba(111,179,210,0.35); }
.role-card h2 { font-size: 34px; color: var(--ivory); margin-bottom: 2px; }
.role-card .title { font-style: italic; color: var(--gold); font-size: 14px; margin-bottom: 14px; }
.role-card .desc { color: var(--ivory-dim); font-size: 13.5px; margin-bottom: 14px; }
.role-card ul { text-align: left; color: var(--ivory-dim); font-size: 12.5px; padding-left: 18px; }
.role-card ul li { margin-bottom: 6px; }

/* ---------- COVER (écran masqué) ---------- */
.cover {
  position: fixed; inset: 0; z-index: 50;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(212,175,55,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #070503 0%, #0d0906 100%);
  padding: 30px; text-align: center;
}
.cover.active { display: flex; }
.cover .shield { font-size: 74px; margin-bottom: 18px; filter: grayscale(0.4) brightness(0.8); transition: all 0.4s; }
.cover .label {
  font-family: 'Cinzel', serif; color: rgba(201,191,167,0.55);
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
}
.cover .hint { color: rgba(201,191,167,0.35); font-size: 11.5px; margin-top: 12px; max-width: 250px; }
.cover.my-turn .shield { filter: none; animation: glowPulse 1.6s ease-in-out infinite; }
.cover.my-turn .label { color: var(--gold-bright); }
@keyframes glowPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 18px rgba(212,175,55,0.35); }
  50% { transform: scale(1.08); text-shadow: 0 0 36px rgba(240,196,32,0.7); }
}
.cover .tap-zone { position: absolute; inset: 0; }

/* ---------- night action panel ---------- */
.action-head { text-align: center; margin-bottom: 16px; }
.action-head .emoji { font-size: 44px; }
.action-head h2 { color: var(--gold); font-size: 20px; margin-top: 4px; }
.action-head p { color: var(--ivory-dim); font-size: 13px; margin-top: 5px; }

.info-banner {
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.05));
  border: 1px solid var(--border-strong); border-radius: 13px;
  padding: 16px; font-size: 15px; text-align: center; margin-bottom: 14px;
}
.info-banner.big { font-size: 17px; padding: 22px 16px; }

.private-log { display: flex; flex-direction: column; gap: 8px; }
.private-log .msg {
  background: rgba(0,0,0,0.3); border-left: 3px solid var(--gold-dim);
  border-radius: 0 10px 10px 0; padding: 10px 13px; font-size: 13.5px;
}
.private-log .msg .n { color: var(--gold-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- narrator night console ---------- */
.step-list { display: flex; flex-direction: column; gap: 6px; }
.step-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(212,175,55,0.1);
  font-size: 13px;
}
.step-row.done { opacity: 0.4; }
.step-row.current { border-color: var(--gold-bright); background: rgba(212,175,55,0.1); }
.step-row .k { font-size: 15px; width: 22px; text-align: center; }
.step-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-row .s { font-size: 10.5px; color: var(--ivory-dim); }
.step-row .s.waiting { color: var(--gold-bright); animation: blink 1.1s infinite; }
.step-row .s.ok { color: var(--ok); }
@keyframes blink { 50% { opacity: 0.35; } }

.now-card {
  border: 1.5px solid var(--border-strong); border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-1));
  padding: 18px 16px; margin-bottom: 14px; text-align: center;
}
.now-card .kind { font-size: 10.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.now-card .txt { font-size: 16.5px; font-style: italic; color: var(--ivory); margin-bottom: 13px; }
.now-card .who { font-size: 13px; color: var(--gold); margin-bottom: 11px; }

.mj-log { display: flex; flex-direction: column-reverse; gap: 6px; max-height: 260px; overflow-y: auto; }
.mj-log .l { font-size: 12.5px; color: var(--ivory-dim); padding: 7px 10px; background: rgba(0,0,0,0.25); border-radius: 8px; }
.mj-log .l b { color: var(--gold); }

.spoiler-hidden .spoiler { filter: blur(7px); pointer-events: none; }

/* ---------- announcements / day ---------- */
.announce {
  background: linear-gradient(135deg, rgba(139,30,30,0.25), rgba(139,30,30,0.06));
  border: 1px solid rgba(224,69,69,0.35); border-radius: 13px;
  padding: 14px 16px; font-size: 15px; margin-bottom: 10px;
}
.announce.good { background: linear-gradient(135deg, rgba(111,179,210,0.18), rgba(111,179,210,0.04)); border-color: rgba(111,179,210,0.35); }

.vote-count { text-align: center; color: var(--ivory-dim); font-size: 13px; margin-top: 10px; }

/* ---------- misc ---------- */
.divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--gold-dim); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }

.toast {
  position: fixed; left: 50%; bottom: calc(26px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); color: var(--ivory); border: 1px solid var(--border-strong);
  padding: 13px 22px; border-radius: 12px; font-size: 14px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: all 0.25s; z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--mal); color: #ffb3b3; }

.pulse-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-bright); animation: blink 1.1s infinite; margin-right: 6px;
}

.countdown { font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold-dim); }

.center { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.hidden { display: none !important; }

.code-display {
  font-family: 'Cinzel', serif; font-size: 46px; font-weight: 900;
  letter-spacing: 0.35em; text-align: center; color: var(--gold-bright);
  text-shadow: 0 0 26px rgba(212,175,55,0.4); padding: 8px 0 4px; text-indent: 0.35em;
}

.big-emoji { font-size: 64px; text-align: center; margin: 18px 0 8px; }

.end-banner { text-align: center; padding: 28px 14px; }
.end-banner h2 { font-size: 27px; margin-bottom: 8px; }
.end-banner.bien h2 { color: var(--bien); }
.end-banner.mal h2 { color: var(--mal); }

/* scrollbars discrets */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }

@media (min-width: 700px) {
  .tgrid { grid-template-columns: 1fr 1fr 1fr; }
}