:root{
  --ink: #0E1A24;
  --ink-soft: #16232f;
  --paper: #E8DCC4;
  --paper-white: #F7F1E3;
  --paper-raised: #DED1B2;
  --paper-dark: #cbbd98;
  --red: #9B2226;
  --red-dark: #7A1A1D;
  --green-ok: #2f5d3a;
  --font-display: "Special Elite", "Courier New", monospace;
  --font-text: "Source Serif 4", Georgia, serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; background:var(--ink); }
body{
  font-family: var(--font-text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
#app{ min-height: 100vh; }
button{ font-family: inherit; }
img{ max-width: 100%; display:block; }

.app{ display:flex; flex-direction:column; min-height:100vh; }

/* ---- paper texture base ---- */
.paper-bg{
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.06), transparent 45%);
}

/* ============ TOP BAR ============ */
.topbar{
  position: sticky; top:0; z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: calc(10px + var(--safe-top)) 16px 10px;
  display:flex; align-items:center; gap:10px;
  border-bottom: 2px solid var(--red);
}
.topbar .back-btn{
  background:none; border:1px solid var(--paper-raised); color:var(--paper);
  font-family: var(--font-display); font-size:0.85rem; padding:8px 12px; cursor:pointer;
  min-height: 40px;
}
.topbar .back-btn:active{ background: var(--red); border-color: var(--red); }
.topbar .title{
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing:0.02em;
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar .folio-tag{ font-size:0.72rem; color: var(--paper-raised); font-family: var(--font-display); }

/* ============ SCREENS ============ */
.screen{ flex:1; display:flex; flex-direction:column; padding-bottom: calc(24px + var(--safe-bottom)); }

/* ============ MENU ============ */
.menu-screen{
  background: var(--ink);
  color: var(--paper);
  padding: 32px 20px calc(40px + var(--safe-bottom));
  min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.menu-screen .kicker{
  font-family: var(--font-display); font-size:0.8rem; letter-spacing:0.04em;
  color: var(--paper-raised); margin-top: var(--safe-top);
}
.menu-screen h1{
  font-family: var(--font-display); font-weight:400; font-size: 2.1rem; color: var(--paper-white);
  margin: 10px 0 4px; line-height:1.15;
}
.menu-screen .subtitle{
  font-style: italic; color: var(--paper); opacity:0.85; margin: 0 0 22px; font-size:1.02rem;
}
.confidential-stamp{
  display:inline-block; border:4px solid var(--red); color:var(--red);
  font-family: var(--font-display); font-size:1.3rem; letter-spacing:0.06em;
  padding:12px 22px; transform: rotate(-5deg); margin: 6px 0 26px;
  background: rgba(155,34,38,0.07);
}
.menu-actions{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:360px; }
.btn{
  font-family: var(--font-display); font-size:1rem; letter-spacing:0.02em;
  padding:16px 18px; min-height:52px; border:2px solid var(--red); background:var(--red);
  color: var(--paper-white); cursor:pointer; text-align:center; width:100%;
}
.btn:active{ background: var(--red-dark); transform: translateY(1px); }
.btn.secondary{ background:transparent; color:var(--paper); border-color: var(--paper-raised); }
.btn.secondary:active{ background: rgba(255,255,255,0.08); }
.btn.ghost{ background:transparent; border-color: transparent; color: var(--paper-raised); text-decoration: underline; min-height:auto; padding:10px; font-size:0.85rem; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; }

.progress-pill{
  margin-top: 26px; font-family: var(--font-display); font-size:0.82rem; color: var(--paper-raised);
  border:1px solid var(--paper-raised); padding:8px 16px; border-radius: 2px;
}

.players-row{
  display:flex; gap:8px; margin: 4px 0 22px; justify-content:center; flex-wrap:wrap;
}
.players-row button{
  font-family: var(--font-display); background:transparent; border:1px solid var(--paper-raised);
  color: var(--paper); padding:10px 14px; min-width:46px; min-height:44px; cursor:pointer; font-size:0.95rem;
}
.players-row button.active{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ============ CASE / DOSSIER LIST (roadmap) ============ */
.case-list{ padding: 16px; display:flex; flex-direction:column; gap:12px; background: var(--paper); flex:1; }
.puzzle-card{
  background: var(--paper-white); border:1px solid var(--paper-raised);
  padding:16px 16px 14px; display:flex; gap:12px; align-items:flex-start;
  position: relative; overflow:hidden;
}
.puzzle-card .num{
  font-family: var(--font-display); font-size:1.6rem; color: var(--paper-raised); line-height:1;
  min-width:38px;
}
.puzzle-card.solved .num{ color: var(--green-ok); }
.puzzle-card.active .num{ color: var(--red); }
.puzzle-card .body{ flex:1; min-width:0; }
.puzzle-card h3{ margin:0 0 4px; font-family: var(--font-display); font-weight:400; font-size:1.02rem; color: var(--ink); }
.puzzle-card p{ margin:0; font-size:0.88rem; color:#4a4332; }
.puzzle-card .status{
  font-family: var(--font-display); font-size:0.7rem; letter-spacing:0.03em; margin-top:8px; display:inline-block;
  padding:3px 8px; border:1px solid;
}
.status.locked{ color:#8a8068; border-color:#b9ac86; }
.status.solved{ color: var(--green-ok); border-color: var(--green-ok); }
.status.available{ color: var(--red); border-color: var(--red); }
.puzzle-card.locked{ opacity:0.72; }
.puzzle-card.locked::after{
  content:"À VENIR"; position:absolute; top:10px; right:-30px; transform: rotate(32deg);
  background: var(--red); color:var(--paper-white); font-family: var(--font-display);
  font-size:0.62rem; padding:3px 36px; letter-spacing:0.05em;
}
.redacted{
  display:inline-block; background: var(--ink); color: transparent; user-select:none;
  border-radius:1px;
}

/* ============ EVIDENCE VIEWER ============ */
.evidence-screen{ background: var(--paper); flex:1; padding: 14px 14px 10px; }
.evidence-intro{ padding: 4px 4px 14px; }
.evidence-intro h2{ font-family: var(--font-display); font-weight:400; font-size:1.3rem; margin:0 0 6px; }
.evidence-intro p{ font-size:0.92rem; color:#3c3528; margin:0; }
.evidence-tabs{ display:flex; gap:8px; overflow-x:auto; padding: 4px 2px 14px; -webkit-overflow-scrolling:touch; }
.evidence-tab{
  font-family: var(--font-display); font-size:0.78rem; white-space:nowrap; padding:10px 14px;
  background: var(--paper-white); border:1px solid var(--paper-raised); color:#4a4332; cursor:pointer;
  min-height:44px;
}
.evidence-tab.active{ background: var(--red); border-color: var(--red); color: var(--paper-white); }

.doc-fictif{
  font-family: var(--font-display); font-size:0.66rem; letter-spacing:0.03em; color: var(--red);
  border:1px solid var(--red); display:inline-block; padding:2px 7px; transform: rotate(-1.2deg); margin-bottom:10px;
}
.piece-card{
  background: var(--paper-white); border:1px solid var(--paper-raised); padding:18px 16px;
  margin-bottom:16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.piece-card .label-overline{ font-family: var(--font-display); font-size:0.72rem; color: var(--red); margin-bottom:6px; }
.piece-card h3{ font-family: var(--font-display); font-weight:400; font-size:1.1rem; margin:0 0 10px; }
.piece-card blockquote{ margin:0; font-size:0.94rem; line-height:1.55; }
.piece-card blockquote p{ margin:0 0 10px; }
.piece-card blockquote p:last-child{ margin-bottom:0; }
.piece-card .stamp-mini{
  display:inline-block; border:2px solid var(--red); color:var(--red); font-family: var(--font-display);
  font-size:0.68rem; padding:4px 8px; transform: rotate(-3deg); float:right; margin:0 0 8px 8px;
}

/* ============ ANSWER FORM ============ */
.answer-box{
  background: var(--ink); color: var(--paper); padding:18px 16px; margin: 6px 0 18px;
  border: 1px solid var(--red);
}
.answer-box h3{ font-family: var(--font-display); font-weight:400; font-size:1rem; color: var(--paper-white); margin:0 0 10px; }
.answer-box .question{ font-size:0.92rem; margin:0 0 14px; color: var(--paper); }
.answer-form{ display:flex; flex-direction:column; gap:10px; }
.answer-form input[type=text]{
  font-family: var(--font-text); font-size:1.05rem; padding:14px 12px; border:1px solid var(--paper-raised);
  background: var(--paper-white); color: var(--ink); min-height:48px;
}
.answer-form input[type=text]:focus{ outline:2px solid var(--red); }
.answer-feedback{ font-family: var(--font-display); font-size:0.85rem; min-height:1.2em; }
.answer-feedback.ok{ color:#7fd79a; }
.answer-feedback.err{ color:#ff9b9b; }
.hint-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.hint-btn{
  font-family: var(--font-display); font-size:0.78rem; background:transparent; border:1px solid var(--paper-raised);
  color: var(--paper); padding:9px 12px; cursor:pointer; min-height:42px;
}
.hint-btn:active{ background: rgba(255,255,255,0.1); }
.hint-btn[disabled]{ opacity:0.4; }
.hint-reveal{
  margin-top:10px; background: rgba(255,255,255,0.05); border-left:3px solid var(--red);
  padding:10px 12px; font-size:0.88rem; display:none;
}
.hint-reveal.shown{ display:block; }

/* ============ SOLVED SCREEN ============ */
.solved-banner{
  text-align:center; padding: 26px 16px; background: var(--ink); color: var(--paper-white);
}
.solved-banner .stamp-box{
  display:inline-block; border:3px solid var(--green-ok); color:var(--green-ok); font-family: var(--font-display);
  padding:10px 20px; transform: rotate(-3deg); margin-bottom:14px; font-size:1.1rem;
}
.solved-banner p{ font-size:0.92rem; color: var(--paper); max-width:420px; margin: 8px auto 0; }

/* ============ TOAST ============ */
.toast{
  position: fixed; left:50%; bottom: calc(18px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper-white); font-family: var(--font-display); font-size:0.82rem;
  padding:12px 18px; border:1px solid var(--red); opacity:0; pointer-events:none; transition: all .25s ease;
  max-width: 88vw; text-align:center; z-index: 50;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============ FOOTER / MISC ============ */
.folio{
  display:flex; justify-content:space-between; font-family: var(--font-display); font-size:0.68rem;
  color:#5a4f3c; padding: 10px 4px 2px; border-top:1px solid var(--paper-raised); margin-top:auto;
}
.sticky-cta{
  position: sticky; bottom:0; padding: 10px 14px calc(12px + var(--safe-bottom)); background: linear-gradient(to top, var(--paper) 70%, transparent);
}

@media (min-width: 720px){
  .case-list, .evidence-screen{ max-width: 680px; margin: 0 auto; width:100%; }
  .menu-screen{ padding-top: 60px; }
}