/* ======================================================
   LE CLAN LABHARD — Thème whiskey / prohibition / mafia irlandaise
   ====================================================== */

:root {
  --bg: #ede1c2;
  --bg-soft: #e2d4ad;
  --ink: #2a1a08;
  --ink-dim: #6b5530;
  --gold: #8a6315;
  --gold-bright: #5c420f;
  --blood: #8b1818;
  --blood-bright: #a82525;
  --paper: #f8efd4;
  --paper-dark: #d5c59a;
  --border: rgba(138, 99, 21, 0.4);
  --border-strong: rgba(138, 99, 21, 0.75);
}

* { box-sizing: border-box; }

/* Barres de défilement dans le ton parchemin / or du site */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(138, 99, 21, 0.12);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(138, 99, 21, 0.10);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse at top, #f8efd4 0%, var(--bg) 60%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(138,99,21,0.04) 12px 13px);
}

#vignette {
  pointer-events: none;
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(90,60,15,0.25) 100%);
  z-index: 2;
}
#grain {
  pointer-events: none;
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0 0.03  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 3;
  mix-blend-mode: multiply;
}

.view { display: none; position: relative; z-index: 10; min-height: 100vh; }
.view.active { display: block; }

/* ======================================================
   Intro
   ====================================================== */
.intro-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
}

.family-crest {
  margin: 0 auto 24px;
  width: 120px; height: 120px;
  display: grid; place-items: center;
}
.crest-ring {
  width: 120px; height: 120px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  box-shadow: 0 0 30px rgba(138,99,21,0.25), inset 0 0 20px rgba(138,99,21,0.15);
}
.crest-ring::before, .crest-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.5;
}
.crest-ring::after { inset: 18px; opacity: 0.3; }
.crest-star { font-size: 46px; color: var(--gold); }

.title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(42px, 7vw, 72px);
  letter-spacing: 0.18em;
  color: var(--gold-bright);
  margin: 0 0 6px;
  text-shadow: 0 2px 20px rgba(138,99,21,0.35);
}
.subtitle {
  font-family: "Cinzel", serif;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  margin: 0 0 40px;
}

.intro-letter {
  text-align: left;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  padding: 32px 36px;
  font-size: 17px;
  line-height: 1.7;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  position: relative;
}
.intro-letter::before, .intro-letter::after {
  content: "";
  position: absolute; width: 20px; height: 20px;
  border: 1px solid var(--gold);
}
.intro-letter::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.intro-letter::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.typewriter {
  font-family: "Special Elite", monospace;
  color: var(--gold-bright);
  font-size: 18px;
}
.sign {
  font-family: "Special Elite", monospace;
  color: var(--ink-dim);
  text-align: right;
  margin-top: 24px;
}

.btn-door {
  margin-top: 40px;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 14px;
  padding: 16px 38px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}
.btn-door:hover {
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 0 30px rgba(138,99,21,0.5);
}
.btn-door.small { padding: 10px 20px; font-size: 12px; margin-top: 0; }

/* ======================================================
   Topbar + tabs
   ====================================================== */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(248, 239, 212, 0.92);
  box-shadow: 0 2px 10px rgba(42,26,8,0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { justify-self: start; }
.topbar > *:last-child { justify-self: end; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Cinzel", serif;
  letter-spacing: 0.25em;
  color: var(--gold);
  font-size: 14px;
}
.brand.small { font-size: 12px; }

.tabs {
  justify-self: center;
  display: flex;
  gap: 4px;
  border: 1px solid var(--border);
  padding: 4px;
}
.tab {
  font-family: "Cinzel", serif;
  background: transparent;
  color: var(--ink-dim);
  border: none;
  padding: 8px 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.tab-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blood-bright);
  box-shadow: 0 0 0 2px var(--bg), 0 0 6px rgba(212, 38, 25, 0.7);
  pointer-events: none;
  animation: tabBadgeIn 0.35s ease;
}
@keyframes tabBadgeIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.tab:hover { color: var(--gold); }
.tab.active {
  background: var(--gold);
  color: var(--bg);
}

.btn-ghost {
  font-family: "Cinzel", serif;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  padding: 8px 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.btn-ghost:disabled { opacity: 0.3; cursor: not-allowed; }

.progress-box {
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  min-width: 180px;
  text-align: right;
}
#progress-count { color: var(--gold-bright); font-weight: 600; }
.progress-bar {
  margin-top: 6px;
  height: 3px;
  background: rgba(138,99,21,0.1);
  border: 1px solid var(--border);
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blood) 0%, var(--gold) 100%);
  transition: width 0.6s ease;
}

.tab-panel { min-height: calc(100vh - 80px); }

/* ======================================================
   Calendrier — grilles mensuelles
   ====================================================== */
.calendar-wrap {
  margin: 0 auto;
  padding: 48px 32px;
}
#months-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.section-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--gold-bright);
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 0 8px;
}
.section-hint {
  text-align: center;
  color: var(--ink-dim);
  font-style: italic;
  margin-bottom: 40px;
}

.month {
  margin: 0;
  flex: 0 1 700px;
  min-width: 360px;
}
.month-header {
  font-family: "Cinzel", serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.month-header::before, .month-header::after {
  content: "—";
  color: var(--ink-dim);
  margin: 0 14px;
  font-weight: normal;
  letter-spacing: 0;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.weekdays div {
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.15em;
  padding: 6px 0;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-cell {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  padding: 10px;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  font-family: "Cinzel", serif;
}
.day-cell::before {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid rgba(138,99,21,0.12);
  pointer-events: none;
}
.day-cell.empty {
  background: transparent;
  border: 1px dashed rgba(138,99,21,0.08);
  cursor: default;
}
.day-cell.empty::before { display: none; }

.day-cell .date-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.day-cell .day-roman {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.15em;
  font-weight: 600;
}
.day-cell .cell-status {
  position: absolute; top: 6px; right: 8px;
  font-size: 12px;
}

.day-cell.locked {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.6);
}
.day-cell.locked .date-num, .day-cell.locked .day-roman { color: var(--ink-dim); }

.day-cell.unlocked:hover:not(.solved) {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 16px rgba(138,99,21,0.2);
}

.day-cell.solved {
  border-color: var(--gold);
  background: linear-gradient(160deg, #e8d59a 0%, #c9b376 100%);
}
.day-cell.solved::after {
  content: "✓";
  position: absolute;
  top: 6px; right: 8px;
  color: var(--blood-bright);
  font-size: 13px;
}

.day-cell.today {
  border-color: var(--blood-bright);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(165,28,31,0); }
  50% { box-shadow: 0 0 20px rgba(165,28,31,0.45); }
}

/* ======================================================
   Timeline
   ====================================================== */
.timeline-wrap {
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.timeline-status {
  text-align: center;
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.timeline-status b { color: var(--gold-bright); }
.timeline-status .sep { margin: 0 12px; color: var(--border-strong); }

.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--paper-dark) 0%, var(--bg-soft) 100%);
  padding: 30px 0;
}
.timeline-scroll::-webkit-scrollbar { height: 10px; }
.timeline-scroll::-webkit-scrollbar-track { background: var(--bg-soft); }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--border); }

/* The track defaults to a compact height with the axis centered. When a
   card is focused, the track grows on its side: focus-above adds room
   above the axis, focus-below adds room below. The axis position is
   tracked in --tl-axis-top so card-positioning calc() stays consistent. */
.timeline-track {
  position: relative;
  --tl-track-h: 380px;
  --tl-axis-top: 190px;
  height: var(--tl-track-h);
  min-width: 100%;
  transition: height 0.25s ease;
}
.timeline-track.focus-above {
  --tl-track-h: 760px;
  --tl-axis-top: 570px;
}
.timeline-track.focus-below {
  --tl-track-h: 760px;
  --tl-axis-top: 190px;
}

/* L'axe central */
.timeline-axis {
  position: absolute;
  top: var(--tl-axis-top);
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 10%, var(--gold) 90%, transparent 100%);
  transition: top 0.25s ease;
}

.year-tick {
  position: absolute;
  top: var(--tl-axis-top);
  transform: translate(-50%, -50%);
  text-align: center;
  transition: top 0.25s ease;
}
.year-tick .tick-line {
  width: 1px; height: 14px;
  background: var(--ink-dim);
  margin: 0 auto;
}
.year-tick.major .tick-line { height: 22px; background: var(--gold); }
.year-tick .tick-label {
  margin-top: 4px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
}
.year-tick.major .tick-label { color: var(--gold); font-weight: 600; }

/* Placed event card on timeline */
.placed-card {
  position: absolute;
  transform: translateX(-50%);
  width: 200px;
  max-height: 120px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--gold);
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(42,26,8,0.25);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease,
    bottom 0.25s ease,
    top 0.25s ease;
  cursor: pointer;
  z-index: 1;
}
.placed-card.focused { cursor: default; }
.placed-card:not(.focused):hover {
  transform: translateX(-50%) translateY(-4px) scale(1.04);
  border-color: var(--blood-bright);
  box-shadow:
    0 14px 28px rgba(42,26,8,0.45),
    0 0 24px rgba(212,166,76,0.45),
    0 0 0 2px rgba(208,146,38,0.35);
}
.placed-card.focused {
  width: 420px;
  max-height: none;
  z-index: 30;
  border-color: var(--blood-bright);
  border-width: 2px;
  box-shadow: 0 14px 40px rgba(42,26,8,0.45), 0 0 0 4px rgba(138,99,21,0.18);
  background: linear-gradient(180deg, #fbf4dd 0%, #ecdfc0 100%);
}
.placed-card.focused .pc-desc {
  font-size: 15px;
  color: var(--ink);
  font-style: normal;
}
.timeline-track.has-focused .placed-card:not(.focused) {
  opacity: 0.4;
  filter: saturate(0.6);
}
.placed-card.above {
  bottom: calc(var(--tl-track-h) - var(--tl-axis-top) + 20px + var(--card-offset, 0px));
}
.placed-card.below {
  top: calc(var(--tl-axis-top) + 20px + var(--card-offset, 0px));
}
.placed-card::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 1px; height: 20px;
  background: var(--gold);
}
.placed-card.above::after { bottom: -20px; }
.placed-card.below::after { top: -20px; }
.placed-card .pc-year {
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 5px;
}
.placed-card .pc-title {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 5px;
}
.placed-card .pc-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}

.drop-zone.active {
  background: rgba(138,99,21,0.06);
  outline: 2px dashed var(--gold);
  outline-offset: -4px;
}

/* Inventaire */
.inv-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--gold);
  font-size: 14px;
  margin: 40px 0 18px;
  text-transform: uppercase;
}
.inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
  min-height: 80px;
  padding: 16px;
  border: 1px dashed var(--border);
  background: rgba(138,99,21,0.02);
}
@media (min-width: 1100px) {
  .inventory { grid-template-columns: repeat(4, 1fr); }
}
.inventory:empty::before {
  content: "Aucun souvenir en main pour l'instant. Résous des énigmes dans le calendrier.";
  color: var(--ink-dim);
  font-style: italic;
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

.card {
  padding: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  transition: all 0.2s;
  user-select: none;
  position: relative;
}
.card:hover { border-color: var(--gold); }
.card.locked { opacity: 0.75; }
.card.locked:hover { border-color: var(--border); }

.card .c-title {
  font-family: "Cinzel", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.card .c-desc {
  font-size: 15px;
  color: var(--ink);
  font-style: italic;
  line-height: 1.5;
}
.card .c-progress {
  font-family: "Cinzel", serif;
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: 0.15em;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  text-transform: uppercase;
}

/* Full souvenir text (shown on inventory card once complete) */
.card .c-text {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}

/* Circular progress wheel — per souvenir */
.souvenir-wheel {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 14px auto 6px;
}
.souvenir-wheel svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.souvenir-wheel .wheel-bg {
  fill: none;
  stroke: rgba(212, 192, 138, 0.12);
  stroke-width: 3;
}
.souvenir-wheel .wheel-fg {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}
.souvenir-wheel .wheel-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
}

/* Compact wheel inside the puzzle "solved" view */
#p-event-progress .souvenir-wheel {
  width: 80px;
  height: 80px;
}
#p-event-progress .souvenir-wheel .wheel-label {
  font-size: 16px;
}
.card .c-drag-hint {
  font-size: 11px;
  color: var(--gold);
  font-style: italic;
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* Year submission form inside an inventory card */
.c-year-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.c-year-input {
  width: 90px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "Special Elite", monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-align: center;
  outline: none;
}
.c-year-input:focus { border-color: var(--gold); }
.c-year-submit {
  padding: 8px 14px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.c-year-submit:hover { background: var(--blood-bright); }
.c-year-feedback {
  flex-basis: 100%;
  font-size: 14px;
  font-style: italic;
  min-height: 16px;
}
.c-year-feedback.ok { color: var(--gold-bright); }
.c-year-feedback.ko { color: var(--blood-bright); }
.card.accepted { border-color: var(--gold); box-shadow: 0 0 20px rgba(138,99,21,0.35); }
.card.rejected { border-color: var(--blood-bright); }

.card.locked .c-title {
  color: var(--ink-dim);
  font-style: italic;
}

.card.ghost {
  position: fixed;
  pointer-events: none;
  z-index: 2000;
  transform: translate(-50%, -50%);
  width: 220px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.8);
  transition: none !important;
  opacity: 0.95;
}

/* Final banner */
.final-banner {
  margin-top: 40px;
  padding: 30px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--gold);
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 18px;
  color: var(--gold-bright);
  letter-spacing: 0.1em;
}
.final-banner button {
  display: block;
  margin: 20px auto 0;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 13px;
  padding: 14px 32px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  cursor: pointer;
  text-transform: uppercase;
}
.final-banner button:hover { background: var(--gold); color: var(--bg); }

/* Choix final */
.final-intro {
  max-width: 640px;
  margin: 30px auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
}
.final-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 40px auto;
}
.envelope {
  padding: 32px 24px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  color: var(--ink);
  font-family: inherit;
}
.envelope:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
}
.envelope.env-shadow:hover { box-shadow: 0 16px 40px rgba(122,15,17,0.5); border-color: var(--blood-bright); }
.envelope.env-chosen,
.envelope.env-chosen:hover {
  cursor: default;
  transform: none;
}
.envelope.env-light.env-chosen,
.envelope.env-light.env-chosen:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px var(--gold-bright), 0 16px 40px rgba(0,0,0,0.5);
}
.envelope.env-shadow.env-chosen,
.envelope.env-shadow.env-chosen:hover {
  border-color: var(--blood-bright);
  box-shadow: 0 0 0 2px var(--blood-bright), 0 16px 40px rgba(122,15,17,0.5);
}
.envelope.env-locked {
  opacity: 0.35;
  filter: grayscale(0.7);
  cursor: not-allowed;
  pointer-events: none;
}
.env-seal { font-size: 40px; color: var(--gold); margin-bottom: 12px; }
.env-shadow .env-seal { color: var(--blood-bright); }
.env-label {
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  font-size: 14px;
  color: var(--gold-bright);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.env-sub {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.5;
}
.final-outcome {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 32px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--gold);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
.final-outcome h4 {
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0;
}

/* Finale view */
.final-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 32px;
  text-align: center;
}
.final-reveal {
  margin-top: 40px;
  font-family: "Cinzel", serif;
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: 0.12em;
  line-height: 1.7;
}

/* ======================================================
   Puzzle view
   ====================================================== */
/* Navigation jour précédent / suivant dans le header de l'énigme */
.topbar-nav { display: flex; gap: 8px; justify-self: end; }
.topbar-nav .btn-ghost:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Page d'énigme : 2 colonnes pleine largeur, scroll indépendant.
   Gauche = titre/texte/explications + réponse/contact + souvenir.
   Droite = le contenu jouable (#p-body). */
#view-puzzle.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}
.puzzle-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 22px;
  padding: 22px 26px;
  box-sizing: border-box;
}
.pz-left, .pz-right {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 4px;
}
.pz-game-card { margin: 0; }
/* énigmes sans contenu jouable : une seule colonne centrée */
.puzzle-wrap.no-game { grid-template-columns: minmax(0, 760px); justify-content: center; }
.puzzle-wrap.no-game .pz-right { display: none; }

@media (max-width: 880px) {
  #view-puzzle.active { display: block; height: auto; min-height: 100vh; }
  .puzzle-wrap, .puzzle-wrap.no-game {
    display: block; max-width: 760px; margin: 0 auto; padding: 24px 16px;
  }
  .pz-left, .pz-right { overflow: visible; min-height: 0; display: block; }
  .puzzle-wrap.no-game .pz-right { display: none; }
  .pz-left > *, .pz-right > * { margin-bottom: 22px; }
}
.puzzle-card {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  padding: 40px;
  position: relative;
}
.puzzle-card::before, .puzzle-card::after {
  content: "";
  position: absolute; width: 24px; height: 24px;
  border: 1px solid var(--gold);
}
.puzzle-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.puzzle-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.puzzle-head {
  display: flex; justify-content: space-between;
  font-family: "Cinzel", serif;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: var(--ink-dim);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.puzzle-day { color: var(--gold); }
.puzzle-type { color: var(--blood-bright); }

.puzzle-title {
  font-family: "Cinzel", serif;
  font-size: 30px;
  color: var(--gold-bright);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}
.puzzle-story {
  font-size: 21px;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
  white-space: pre-line;
}
.puzzle-story b {
  font-weight: 900;
  -webkit-text-stroke: 0.3px currentColor;
}

/* Puzzle bodies that are essentially a printable image (gravure /
   plaque) — show the image full-width and offer a PDF download below. */
.puzzle-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.puzzle-pdf-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.puzzle-pdf-download {
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.puzzle-pdf-download:hover {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold-bright);
}

/* ==================================================================
   JOUR 3
   ================================================================== */
.nono-wrap { padding: 4px 0; }

/* Overview: 2×2 grid of mini-quadrants. Each quadrant is a 15×15 of
   tiny cells. Hovering scales the quadrant up so the user understands
   it's clickable, and pointer cursor reinforces it. */
.nono-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: max-content;
  margin: 14px auto 8px;
  padding: 8px;
  background: rgba(138, 99, 21, 0.04);
  border: 1px solid var(--border);
}
.nono-quad {
  display: grid;
  grid-template-columns: repeat(15, 11px);
  grid-template-rows: repeat(15, 11px);
  gap: 1px;
  padding: 1px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1.5px solid var(--border);
  background: var(--paper-dark);
  outline: none;
}
.nono-quad:hover, .nono-quad:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 8px 22px rgba(42, 26, 8, 0.35);
  border-color: var(--gold);
  z-index: 2;
}
.nono-quad.solved {
  border-color: var(--gold-bright);
  cursor: default;
}
.nono-quad.solved:hover { transform: none; box-shadow: none; }
.nono-mini {
  background: var(--ink);
}
.nono-mini.fill  { background: var(--paper); }
.nono-mini.cross { background: var(--ink); }
.nono-mini.cross::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, transparent 45%, var(--paper) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--paper) 45% 55%, transparent 55%);
}

.nono-hint-overview {
  text-align: center;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 13px;
  margin: 14px 0 4px;
}

/* Solver bar: back / title / tools */
.nono-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nono-back {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 12px;
  cursor: pointer;
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.nono-back:hover { background: var(--gold); color: var(--paper); }
.nono-quad-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  text-transform: uppercase;
  font-size: 13px;
}
.nono-tools { display: flex; gap: 6px; }
.nono-tool {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.15s, background 0.15s;
  padding: 0;
}
.nono-tool:hover { border-color: var(--gold); }
.nono-tool.active {
  border-color: var(--gold-bright);
  background: rgba(138, 99, 21, 0.14);
}
.nono-tool {
  background: var(--ink);
  color: var(--paper);
}
.nono-tool:hover { background: #1a0e02; border-color: var(--gold); }
.nono-tool.active {
  background: var(--paper);
  border-color: var(--gold-bright);
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.nono-tool.active .nono-tool-fill  { background: var(--ink); }
.nono-tool.active .nono-tool-cross { color: var(--ink); }

/* Reset is a destructive action — text button, dim then warm-red hover. */
.nono-reset {
  margin-left: 6px;
  padding: 0 12px;
  height: 36px;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nono-reset:hover {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
  background: rgba(160, 0, 0, 0.06);
}
.nono-tool-fill {
  display: block;
  width: 20px; height: 20px;
  background: var(--paper);
}
.nono-tool-cross {
  font-size: 22px;
  color: var(--paper);
  font-weight: 700;
  line-height: 1;
}

/* Solver layout — corner / col-clues / row-clues / grid */
.nono-solver {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  width: max-content;
  margin: 0 auto;
}
.nono-corner { background: transparent; }
.nono-col-clues {
  display: grid;
  grid-template-columns: repeat(15, 28px);
  align-items: end;
}
.nono-col-clue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0 4px;
  min-height: 86px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: var(--ink);
  line-height: 1.25;
}
.nono-row-clues {
  display: grid;
  grid-template-rows: repeat(15, 28px);
}
.nono-row-clue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 8px;
  min-width: 80px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: var(--ink);
}
.nono-clue-blank { visibility: hidden; }

.nono-grid {
  display: grid;
  grid-template-columns: repeat(15, 28px);
  grid-template-rows: repeat(15, 28px);
  border: 2px solid var(--ink);
  touch-action: none; /* swipe over cells should paint, not scroll */
}
.nono-cell {
  width: 28px;
  height: 28px;
  border-right: 1px solid #4a3a18;
  border-bottom: 1px solid #4a3a18;
  background: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  transition: background 0.08s;
}
.nono-cell:hover { background: #1a0e02; }
.nono-cell.fill {
  background: var(--paper);
}
.nono-cell.fill:hover { background: var(--paper-dark); }
.nono-cell.cross::after {
  content: "×";
  font-family: "Cinzel", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
}
/* Thicker dividers every 5 cells to ease counting */
.nono-cell[data-c="4"],
.nono-cell[data-c="9"] { border-right: 2px solid var(--gold); }
.nono-cell[data-r="4"],
.nono-cell[data-r="9"] { border-bottom: 2px solid var(--gold); }

.nono-feedback {
  text-align: center;
  margin: 12px 0 0;
  font-style: italic;
  color: var(--ink-dim);
  min-height: 1.4em;
}
.nono-feedback.ok { color: var(--gold-bright); font-style: normal; font-weight: 600; }

.nono-rules {
  margin-top: 22px;
  padding: 12px 16px;
  background: rgba(138, 99, 21, 0.04);
  border-left: 2px solid var(--gold);
  font-size: 14px;
}
.nono-rules summary {
  cursor: pointer;
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nono-rules ul { margin: 10px 0 0 18px; padding: 0; line-height: 1.6; color: var(--ink); }
.nono-rules li { margin-bottom: 6px; }

/* Victory: full shield image once all 4 quadrants match. */
.nono-victory { text-align: center; padding: 12px 0; }
.nono-shield {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 380px;
  height: auto;
}
.nono-victory-caption {
  margin-top: 14px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 14px;
}

/* Victory transition: overview scales/fades out under the shield, which
   simultaneously fades in. Both elements share the same grid cell so
   they stack centered. */
.nono-victory-transition { text-align: center; padding: 12px 0; }
.nono-victory-stack {
  display: grid;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  justify-items: center;
}
.nono-victory-stack > * { grid-area: 1 / 1; }
.nono-overview-fade {
  animation: nono-overview-out 1.6s 0.45s ease-out forwards;
}
.nono-shield-fade {
  opacity: 0;
  width: 380px;
  max-width: 100%;
  height: auto;
  animation: nono-shield-in 1.6s 0.45s ease-out forwards;
}
@keyframes nono-overview-out {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.92); filter: blur(2px); }
}
@keyframes nono-shield-in {
  0%   { opacity: 0; transform: scale(1.04); }
  60%  { opacity: 0.85; }
  100% { opacity: 1; transform: scale(1); }
}

/* ==================================================================
   JOUR 5
   ================================================================== */
.xword-wrap { padding: 4px 0; }

.xword-portrait {
  margin: 0 auto 22px;
  max-width: 320px;
  text-align: center;
}
.xword-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  box-shadow: 0 6px 22px rgba(42, 26, 8, 0.35);
}
.xword-portrait figcaption {
  margin-top: 10px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 13px;
}

/* ==================================================================
   JOUR 6
   ================================================================== */
.morse-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}
.morse-photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.morse-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(42, 26, 8, 0.35);
}
.morse-overlay {
  position: absolute;
  inset: 0;
}
/* Each hotspot represents a whole morse letter (a row of small
   dots/dashes blended into the photo). Cursor stays default so the
   marks read as part of the décor. */
.morse-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.morse-spot.taken { display: none; }
.morse-spot .dot,
.morse-spot .dash {
  display: block;
  background: rgba(245, 240, 224, 0.55);
  mix-blend-mode: difference;
}
.morse-spot .dot  { width: 5px;  height: 5px;  border-radius: 50%; }
.morse-spot .dash { width: 14px; height: 4px;  border-radius: 1px; }

.morse-placeholders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  padding: 14px 18px;
  background: rgba(138, 99, 21, 0.04);
  border: 1px dashed var(--border);
  font-family: "Cinzel", serif;
  color: var(--ink);
}
.morse-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-bottom: 2px solid var(--ink-dim);
}
.morse-slot.filled { border-bottom-color: var(--gold-bright); }
.morse-slot .dot,
.morse-slot .dash {
  display: block;
  background: var(--gold-bright);
}
.morse-slot .dot  { width: 6px;  height: 6px;  border-radius: 50%; }
.morse-slot .dash { width: 16px; height: 5px;  border-radius: 1px; }
.morse-sep {
  color: var(--ink-dim);
  font-size: 16px;
  margin: 0 2px;
}

.morse-reset {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.morse-reset:hover {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
  background: rgba(160, 0, 0, 0.06);
}

@media (max-width: 700px) {
  .morse-photo { max-width: 100%; }
  .morse-slot { width: 18px; height: 24px; font-size: 17px; }
}

.xword-grid {
  display: grid;
  grid-template-columns: repeat(var(--xw-cols, 8), 38px);
  grid-template-rows: repeat(var(--xw-rows, 9), 38px);
  width: max-content;
  margin: 0 auto;
  border: 2px solid var(--ink);
  background: var(--ink);
  gap: 1px;
}
.xword-cell {
  position: relative;
  width: 38px;
  height: 38px;
  background: var(--paper);
}
.xword-cell.inactive { background: var(--ink); }
.xword-cell.active   { background: var(--paper); }
.xword-cell.highlight {
  box-shadow: inset 0 0 0 2px var(--blood-bright);
}
.xword-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-family: "Cinzel", serif;
  font-size: 9px;
  color: var(--ink);
  pointer-events: none;
  line-height: 1;
}
.xword-cell input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 18px;
  color: var(--ink);
  text-transform: uppercase;
  padding: 0;
  outline: none;
  caret-color: transparent;
}
.xword-cell.in-word { background: #ebd59d; }
.xword-cell input:focus {
  background: #e4c36d;
}

.xword-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 26px 0 18px;
}
.xword-clues h4 {
  font-family: "Cinzel", serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-size: 12px;
  margin: 0 0 10px;
}
.xword-clues ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.xword-clues li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
  color: var(--ink);
}
.xword-clues li b {
  color: var(--gold-bright);
  margin-right: 6px;
  font-weight: 700;
}

.xword-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.xword-reset {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.xword-reset:hover {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
  background: rgba(160, 0, 0, 0.06);
}

@media (max-width: 700px) {
  .xword-grid {
    grid-template-columns: repeat(var(--xw-cols, 8), 30px);
    grid-template-rows: repeat(var(--xw-rows, 9), 30px);
  }
  .xword-cell { width: 30px; height: 30px; }
  .xword-cell input { font-size: 15px; }
  .xword-num { font-size: 8px; }
  .xword-clues {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  .nono-quad {
    grid-template-columns: repeat(15, 9px);
    grid-template-rows: repeat(15, 9px);
  }
  .nono-col-clues { grid-template-columns: repeat(15, 22px); }
  .nono-row-clues { grid-template-rows: repeat(15, 22px); }
  .nono-grid {
    grid-template-columns: repeat(15, 22px);
    grid-template-rows: repeat(15, 22px);
  }
  .nono-cell { width: 22px; height: 22px; }
  .nono-row-clue { min-width: 60px; gap: 3px; }
  .nono-col-clue { min-height: 70px; font-size: 10px; }
  .nono-row-clue { font-size: 10px; }
}
.puzzle-body {
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.puzzle-answer {
  display: flex; gap: 10px;
  margin-top: 20px;
}
#p-input {
  flex: 1;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--gold-bright);
  font-family: "Special Elite", monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  outline: none;
}
#p-input:focus { border-color: var(--gold); }
#p-submit {
  padding: 14px 26px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
#p-submit:hover { background: var(--blood-bright); }

.puzzle-feedback {
  min-height: 20px;
  margin-top: 14px;
  font-style: italic;
  font-size: 14px;
}
.puzzle-feedback.ok { color: var(--gold-bright); }
.puzzle-feedback.ko { color: var(--blood-bright); }

.btn-contact-messenger {
  margin-top: 24px;
  padding: 10px 18px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-contact-messenger:hover {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold-bright);
}
.btn-contact-messenger.c-contact {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 10px;
  display: block;
  width: fit-content;
}

.solved-banner {
  background: rgba(138, 99, 21, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: center;
}
.solved-banner .sb-icon { color: var(--blood); margin-right: 6px; }

.puzzle-card.readonly #p-input {
  opacity: 0.9;
  color: var(--blood);
  font-weight: 600;
  background: rgba(138, 99, 21, 0.08);
}
.puzzle-card.readonly #p-submit {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--paper-dark);
  color: var(--ink-dim);
  border-color: var(--border);
}

.solved-card { margin-top: 20px; text-align: center; }
.solved-card h3 {
  font-family: "Cinzel", serif;
  letter-spacing: 0.2em;
  color: var(--gold-bright);
  text-transform: uppercase;
}
.solved-note { color: var(--ink-dim); font-style: italic; font-size: 16px; }
.event-progress {
  margin: 20px auto;
  padding: 16px;
  background: rgba(138,99,21,0.05);
  border: 1px dashed var(--gold);
  max-width: 400px;
}
.event-progress .ep-label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.event-progress .ep-count {
  margin-top: 8px;
  font-family: "Special Elite", monospace;
  font-size: 28px;
  color: var(--gold-bright);
}
.event-progress .ep-done {
  color: var(--blood-bright);
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
  margin-top: 10px;
  font-size: 13px;
  text-transform: uppercase;
}

/* ======================================================
   Type-specific puzzle blocks
   ====================================================== */
.printable-box, .location-box, .physical-box {
  padding: 20px;
  background: rgba(138,99,21,0.04);
  border-left: 3px solid var(--gold);
  font-size: 15px;
  line-height: 1.7;
}
.printable-box h4, .location-box h4, .physical-box h4 {
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-top: 0;
  text-transform: uppercase;
  font-size: 13px;
}

.cipher-display {
  font-family: "Special Elite", monospace;
  font-size: 22px;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 24px;
  background: var(--paper);
  border: 1px dashed var(--border);
  color: var(--gold-bright);
  margin: 10px 0;
}
/* Single-line variant for long ciphertexts: shrinks fluidly to fit and
   falls back to horizontal scroll on very narrow viewports. */
.cipher-display.fit {
  white-space: nowrap;
  overflow-x: auto;
  font-size: clamp(13px, 3.6vw, 22px);
  letter-spacing: 0.09em;
  padding: 18px 14px;
}

.suspects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.suspect {
  padding: 14px;
  background: rgba(138,99,21,0.04);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
}
.suspect b {
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.1em;
}

.safe { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.safe-digit {
  width: 60px; height: 80px;
  background: var(--paper);
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  font-family: "Special Elite", monospace;
  font-size: 40px;
  text-align: center;
  outline: none;
}
.safe-digit:focus { border-color: var(--blood-bright); }

.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.choice {
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "EB Garamond", serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.choice:hover { border-color: var(--gold); background: rgba(138,99,21,0.06); }
.choice.selected { border-color: var(--gold); background: rgba(138,99,21,0.1); }

.quiz-progress {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-align: center;
  margin-bottom: 16px;
}

.printable-sheet {
  background: var(--paper);
  color: #2a1a08;
  padding: 30px;
  font-family: "Special Elite", monospace;
  margin: 20px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.printable-sheet h5 {
  font-family: "Cinzel", serif;
  margin: 0 0 14px;
  letter-spacing: 0.2em;
  text-align: center;
}

/* Footer */
.footer { text-align: center; padding: 40px 20px; color: var(--ink-dim); }
.whisper { font-style: italic; opacity: 0.6; letter-spacing: 0.05em; }

/* Dev modal — launcher in bottom-left, panel toggles above it */
.dev-modal {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.dev-modal > * { pointer-events: auto; }
.dev-launcher {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42,26,8,0.3);
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.dev-launcher[hidden] { display: none; }
.dev-launcher:hover { background: var(--paper-dark); border-color: var(--gold-bright); transform: scale(1.05); }
.dev-launcher.open { background: var(--ink); color: var(--paper); }
.dev-launcher-icon { line-height: 1; }

.dev-panel {
  background: rgba(42, 26, 8, 0.94);
  border: 1px solid var(--gold);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--paper);
  display: none;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}
.dev-panel.open { display: flex; }
.dev-panel h4 {
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.dev-panel button {
  background: transparent;
  border: 1px solid rgba(248, 239, 212, 0.4);
  color: var(--paper);
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.dev-panel button:hover { border-color: var(--gold); }
.dev-panel .dev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.dev-panel .dev-row label { color: var(--paper); }
.dev-panel .dev-row input[type="number"] {
  width: 60px;
  background: rgba(248, 239, 212, 0.08);
  border: 1px solid rgba(248, 239, 212, 0.4);
  color: var(--paper);
  padding: 5px 6px;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}
.dev-panel .dev-row input[type="number"]:focus { outline: none; border-color: var(--gold); }
.dev-panel .dev-row span { color: rgba(248, 239, 212, 0.75); }
.dev-panel .dev-row button { padding: 5px 10px; font-size: 12px; margin-left: auto; }
.dev-panel .dev-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--paper);
  cursor: pointer;
  user-select: none;
}
.dev-panel .dev-check input { accent-color: var(--gold-bright); cursor: pointer; }

@media (max-width: 700px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    padding: 14px 12px;
  }
  .topbar > * { justify-self: center !important; }
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-self: stretch !important;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabs::-webkit-scrollbar { height: 4px; }
  .tab { flex-shrink: 0; }
  .progress-box {
    text-align: center;
    min-width: 0;
    width: 100%;
  }
  .puzzle-card { padding: 24px 20px; }
  .day-cell { padding: 5px; }
  .day-cell .date-num { font-size: 12px; }
  .day-cell .day-roman { font-size: 9px; }
  .weekdays div { font-size: 9px; }
}

/* ======================================================
   Arbre généalogique — v2 (chaînes + connecteurs SVG)
   ====================================================== */
.tree-wrap {
  margin: 0 auto;
  padding: 30px 20px 80px;
}
.tree-status {
  text-align: center;
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  font-size: 13px;
  margin-bottom: 26px;
}
.tree-status b { color: var(--gold-bright); }

.family-tree {
  position: relative;
  margin: 30px 0 50px;
  padding: 0 40px 20px;
}
.tree-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--gold);
}
.tree-svg .descent-line {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.85;
}
.tree-svg .descent-line.muted {
  opacity: 0.3;
  stroke-dasharray: 4 4;
}

.tree-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 56px;
  margin-bottom: 56px;
  min-width: max-content;
}
.tree-chain {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.tree-spacer {
  flex-shrink: 0;
  height: 1px;
  pointer-events: none;
}

/* Inline links between chained nodes — same look as the SVG cross-link */
.inline-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0 10px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blood);
  opacity: 0.75;
  user-select: none;
}
.inline-link.link-couple {
  flex-direction: row;
  color: var(--blood-bright);
  opacity: 1;
}
.inline-link .il-sym {
  font-size: 22px;
  color: var(--blood-bright);
}
.inline-link .il-bar {
  width: 100%;
  min-width: 70px;
  height: 0;
  border-top: 1.5px dashed currentColor;
}
.inline-link .il-text {
  padding: 0 4px 3px;
  white-space: nowrap;
  text-align: center;
}
.inline-link.muted { color: var(--ink-dim); opacity: 0.35; }
.inline-link.muted .il-bar {
  border-top-width: 1px;
  min-width: 40px;
}

/* Cross-links SVG (amitié / refuge inter-rangées) */
.tree-svg .cross-link {
  stroke: var(--blood);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  fill: none;
  opacity: 0.7;
}
.tree-svg .cross-link.muted {
  stroke: var(--ink-dim);
  opacity: 0.28;
}
.tree-svg .cross-link-label {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  fill: var(--blood);
}

/* Nodes */
.tree-node {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  width: min-content;
  min-width: 200px;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 4px 10px rgba(42,26,8,0.15);
  flex-shrink: 0;
}
.tree-node.revealed {
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(42,26,8,0.25), 0 0 18px rgba(138,99,21,0.1);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tree-node.revealed:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: var(--blood-bright);
  box-shadow:
    0 14px 28px rgba(42,26,8,0.45),
    0 0 24px rgba(212,166,76,0.45),
    0 0 0 2px rgba(208,146,38,0.35);
}
.tree-node.expanded {
  z-index: 8000;
  border-color: var(--blood-bright);
  border-width: 2px;
  box-shadow: 0 14px 40px rgba(42,26,8,0.45), 0 0 0 4px rgba(138,99,21,0.18);
}
.tree-node.hidden-node {
  opacity: 0.55;
  filter: saturate(0.4);
  border-style: dashed;
}
.tree-node.affiliate {
  background: rgba(139, 24, 24, 0.05);
  border-style: dashed;
  min-width: 180px;
}
.tree-node.affiliate.revealed {
  border-color: var(--blood);
  border-style: solid;
  background: rgba(139, 24, 24, 0.07);
}
.tree-node.affiliate.revealed:hover {
  border-color: var(--blood-bright);
}

/* "Nouveau" badge — shown when a card has a layer revealed by the most
   recently placed souvenir. Persists until the next placement. */
.tn-new-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  background: var(--blood-bright);
  color: var(--paper);
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 3px 10px rgba(139, 24, 24, 0.45);
  pointer-events: none;
  z-index: 2;
}

/* Cumulative history panel — appended to <body> (NOT inside the
   tree-node) so it escapes .view's stacking context and can sit above
   the chat/dev modals. JS computes top/left in document coordinates so
   it scrolls naturally with the card. */
.tn-history-overlay {
  position: absolute;
  z-index: 9500;
  background: linear-gradient(180deg, #fbf4dd 0%, #ecdfc0 100%);
  border: 2px solid var(--blood-bright);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(42,26,8,0.4);
  max-width: min(360px, 90vw);
  width: max-content;
}
.tn-history-item {
  padding: 8px 0;
  border-top: 1px dashed var(--border-strong);
  line-height: 1.5;
}
.tn-history-item:first-child { border-top: none; padding-top: 4px; }
.tn-history-label {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.tn-history-text {
  color: var(--ink);
  font-style: italic;
}

.tn-silhouette {
  font-size: 26px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.tn-silhouette.muted { color: var(--ink-dim); opacity: 0.4; }
.tn-name {
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
}
.tn-alias {
  font-style: italic;
  color: var(--ink-dim);
  font-size: 11px;
  margin-bottom: 2px;
}
.tn-years {
  font-family: "Special Elite", monospace;
  color: var(--ink-dim);
  font-size: 11px;
  margin-bottom: 6px;
}
.tn-role {
  color: var(--ink);
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
}
.tn-name.muted, .tn-role.muted {
  color: var(--ink-dim);
}

@media (max-width: 920px) {
  .tree-wrap { padding: 20px 8px 60px; }
  .tree-row { gap: 32px; }
  .inline-link { min-width: 60px; font-size: 9px; }
}
@media (max-width: 700px) {
  .tree-node { min-width: 190px; padding: 9px 10px; }
  .tree-node.affiliate { min-width: 170px; }
  .tn-name { font-size: 12px; }
  .tn-role { font-size: 10px; }
  /* Only the tree itself scrolls horizontally on mobile — keep the
     header / page anchored. */
  .family-tree {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body { overflow-x: hidden; }
}

/* ======================================================
   LOGIN VIEW
   ====================================================== */
.login-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  text-align: left;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field span {
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.login-field input {
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 12px;
  font-family: "Special Elite", monospace;
  font-size: 16px;
  letter-spacing: 0.05em;
  outline: none;
}
.login-field input:focus { border-color: var(--gold); }
#btn-login { margin-top: 8px; }
.login-error {
  margin-top: 6px;
  color: var(--blood-bright);
  font-style: italic;
  text-align: center;
}

/* Logout button in topbar */
.btn-logout {
  font-size: 16px;
  padding: 6px 10px;
  margin-left: 8px;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-logout svg { display: block; }
.btn-logout:hover { opacity: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ======================================================
   CHAT MODAL (joueur, bottom-right)
   ====================================================== */
.chat-modal {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.chat-modal > * { pointer-events: auto; }

.chat-launcher {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42,26,8,0.3);
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.chat-launcher:hover { background: var(--paper-dark); border-color: var(--gold-bright); transform: scale(1.05); }
.chat-launcher.open { background: var(--ink); color: var(--paper); border-color: var(--gold); }
.chat-launcher.has-unread {
  background: var(--blood);
  border-color: var(--blood-bright);
  color: var(--paper);
}
.chat-launcher.has-unread:hover { background: var(--blood-bright); }
.chat-launcher-icon { line-height: 1; }
.chat-launcher-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--gold);
  color: var(--ink);
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
}
.chat-launcher-badge[hidden] { display: none; }

.chat-panel {
  width: 340px;
  max-width: calc(100vw - 36px);
  height: 460px;
  max-height: calc(100vh - 100px);
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(42,26,8,0.45);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open { display: flex; }
.chat-header {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--paper);
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
}
.chat-empty {
  color: var(--ink-dim);
  font-style: italic;
  text-align: center;
  margin: auto;
}
.chat-msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--blood);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.chat-msg.theirs {
  align-self: flex-start;
  background: rgba(138, 99, 21, 0.14);
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
  font-family: "Special Elite", monospace;
  letter-spacing: 0.05em;
}
.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--paper);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", serif;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
  min-height: 36px;
  max-height: 100px;
}
.chat-form textarea:focus { border-color: var(--gold); }
.chat-form button {
  padding: 0 14px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-form button:hover { background: var(--blood-bright); }

/* Context tag shown above the chat input when the user opens the chat
   from a puzzle / souvenir via the Contacter le messager button. */
.chat-context-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 10px;
  background: rgba(138, 99, 21, 0.08);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-family: "EB Garamond", serif;
  font-size: 13px;
  color: var(--ink);
}
.chat-context-tag[hidden] { display: none; }
.chat-context-icon { color: var(--gold); }
.chat-context-label { flex: 1; font-style: italic; }
.chat-context-clear {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.chat-context-clear:hover { color: var(--blood-bright); }

/* Inline context badge displayed inside a chat / thread message bubble
   when its body carried a [CTX] header. Visible on both player and
   messager sides so the messager sees what the player needs help with. */
.msg-ctx-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  background: rgba(138, 99, 21, 0.12);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
}
/* On player's own bubbles (red bg, paper text) the gold-on-transparent
   badge disappears — invert it so the parchment stays readable. */
.chat-msg.mine .msg-ctx-tag,
.thread-msg.mine .msg-ctx-tag {
  background: rgba(245, 240, 224, 0.18);
  border-color: var(--paper);
  color: var(--paper);
}
.msg-text { display: block; }

@media (max-width: 700px) {
  .chat-panel { width: 100vw; max-width: none; right: 0; bottom: 0; height: 70vh; border-radius: 8px 8px 0 0; }
  .chat-modal { right: 12px; bottom: 12px; }
}

/* ======================================================
   MESSAGER VIEW
   ====================================================== */
.messager-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 80px);
  border-top: 1px solid var(--border);
}
.messager-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(138, 99, 21, 0.04);
}
#messager-list-items { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m-reset-all {
  margin-top: 12px;
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
  padding: 9px 12px;
  background: transparent;
  color: #9c2b15;
  border: 1px solid #9c2b15;
  cursor: pointer;
  font-size: 12px;
}
.m-reset-all:hover { background: #9c2b15; color: var(--paper); }
.m-reset-all:disabled { opacity: 0.6; cursor: default; }
.m-add-btn {
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  background: var(--gold);
  color: var(--paper);
  border: 1px solid var(--gold-bright);
  cursor: pointer;
}
.m-add-btn:hover { background: var(--gold-bright); }

/* Formulaires de gestion joueur (réglages + création) */
.m-settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; padding: 6px 2px; }
.m-field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink); }
.m-field > span { font-weight: 600; }
.m-field input[type="text"], .m-field input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--border); background: var(--paper);
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.m-field-check { flex-direction: row; align-items: center; gap: 8px; }
.m-field-check input { width: 16px; height: 16px; flex: none; }
.m-form-row { display: flex; align-items: center; gap: 12px; }
.m-form-row button {
  font-family: "Cinzel", serif; letter-spacing: 0.06em; padding: 9px 18px;
  background: var(--gold); color: var(--paper); border: 1px solid var(--gold-bright); cursor: pointer;
}
.m-form-row button:hover { background: var(--gold-bright); }
.m-form-msg { font-size: 13px; color: var(--ink); opacity: 0.8; }
.m-danger { max-width: 440px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.m-reset-prog {
  font-family: "Cinzel", serif; letter-spacing: 0.06em; padding: 9px 18px;
  background: transparent; color: #9c2b15; border: 1px solid #9c2b15; cursor: pointer;
}
.m-reset-prog:hover { background: #9c2b15; color: var(--paper); }
.m-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,12,2,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.m-modal {
  background: var(--paper); border: 1px solid var(--gold); max-width: 380px;
  padding: 24px 26px; box-shadow: 0 14px 44px rgba(0,0,0,0.45);
}
.m-modal p { margin: 0 0 20px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.m-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.m-modal-btns button {
  font-family: "Cinzel", serif; letter-spacing: 0.06em; padding: 8px 16px; cursor: pointer;
}
.m-modal-cancel { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.m-modal-cancel:hover { background: var(--paper-dark); }
.m-modal-ok { background: #9c2b15; border: 1px solid #9c2b15; color: var(--paper); }
.m-modal-ok:hover { background: #7e2210; }
.messager-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
}
.messager-list-item:hover { border-color: var(--gold); }
.messager-list-item.active {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
}
.messager-list-item .ml-name {
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--gold-bright);
}
.messager-list-item .ml-meta {
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.messager-list-item .ml-unread {
  background: var(--blood);
  color: var(--paper);
  font-family: "Cinzel", serif;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.messager-list-item .ml-time {
  grid-column: 1 / -1;
  font-size: 10px;
  font-family: "Special Elite", monospace;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

.messager-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.messager-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-size: 16px;
}
.messager-header .muted, .messager-list .muted {
  color: var(--ink-dim);
  font-style: italic;
}
.messager-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--border);
}
.messager-tabs .m-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.messager-tabs .m-tab:hover { color: var(--gold); }
.messager-tabs .m-tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}
.m-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.m-panel[hidden] { display: none; }

#m-panel-progress, #m-panel-puzzle, #m-panel-timeline {
  padding: 18px 22px;
}
.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.prog-card {
  border: 1px solid var(--border);
  background: var(--paper);
  padding: 14px 16px;
  text-align: center;
}
.prog-num {
  font-family: "Cinzel", serif;
  font-size: 22px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.prog-label {
  font-family: "Cinzel", serif;
  letter-spacing: 0.12em;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.prog-h {
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink);
  margin: 18px 0 10px;
}
.prog-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prog-day {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 600;
}
.att-group {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  background: var(--paper);
}
.att-group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(138, 99, 21, 0.06);
  border-bottom: 1px solid var(--border);
}
.att-group-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold-bright);
}
.att-group-count {
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.attempts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.attempts-table td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(138,99,21,0.12);
  vertical-align: middle;
}
.attempts-table tr:last-child td { border-bottom: none; }
.attempts-table tr.ok .status-cell { color: var(--gold-bright); font-weight: 600; }
.attempts-table tr.ko .status-cell { color: var(--blood-bright); }
.attempts-table tr.ok { background: rgba(138,99,21,0.04); }
.attempts-table .ans-cell {
  font-family: "Special Elite", monospace;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.attempts-table .time-cell {
  font-family: "Special Elite", monospace;
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  width: 130px;
  text-align: right;
}
.attempts-table .status-cell {
  text-align: center;
  font-size: 16px;
  width: 36px;
}
#m-panel-thread { padding: 0; }
.messager-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thread-msg {
  max-width: 70%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.thread-msg.mine {
  align-self: flex-end;
  background: var(--blood);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.thread-msg.theirs {
  align-self: flex-start;
  background: rgba(138, 99, 21, 0.14);
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.thread-msg-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
  font-family: "Special Elite", monospace;
  letter-spacing: 0.05em;
}
.messager-reply {
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--paper);
}
.messager-reply textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", serif;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
}
.messager-reply textarea:focus { border-color: var(--gold); }
.messager-reply button {
  padding: 0 18px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.messager-reply button:hover { background: var(--blood-bright); }

@media (max-width: 700px) {
  .messager-wrap { grid-template-columns: 1fr; height: auto; }
  .messager-list { max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
}

/* Chat modal only shows for the player role (hidden on login + for messager) */
.chat-modal { display: none; }
body.role-player .chat-modal { display: flex; }
/* Dev modal hidden for messager and on login screen */
.dev-modal { display: none; }
body.role-player .dev-modal { display: flex; }

/* ==================================================================
   PEDANTIX (jour 7) — article masqué + historique de propositions
   ================================================================== */

.ped-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.ped-loading {
  text-align: center;
  font-style: italic;
  color: var(--ink-dim);
  padding: 30px 10px;
}
.ped-loading.ped-error { color: var(--blood); }

.ped-article {
  background: var(--paper-dark);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: "EB Garamond", serif;
  color: var(--ink);
  line-height: 1.7;
  max-height: 60vh;
  overflow-y: auto;
}
.ped-title {
  font-family: "Cinzel", serif;
  text-align: center;
  font-size: 1.2rem;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
  line-height: 1.5;
}
.ped-body { font-size: 1rem; }

/* Each word is a 1-cell grid so its base text and the optional overlay
   (best guess so far) stack in the same cell. The cell sizes to whichever
   child is wider, so a long guess pushes the layout out gracefully. */
.ped-tok { display: inline; }
.ped-word {
  display: inline-grid;
  grid-template-areas: "stack";
  border-radius: 2px;
  padding: 0 2px;
  transition: background 0.25s ease, color 0.25s ease;
  vertical-align: baseline;
}
.ped-word > .ped-base,
.ped-word > .ped-overlay {
  grid-area: stack;
  align-self: center;
  justify-self: center;
  pointer-events: none;
  white-space: nowrap;
}
.ped-word:not(.revealed) {
  background: var(--ink);
  user-select: none;
}
.ped-word:not(.revealed) > .ped-base { color: transparent; }
.ped-word.revealed > .ped-base { color: var(--ink); }
.ped-word.revealed.ped-stop > .ped-base { color: var(--ink-dim); }
.ped-word.revealed > .ped-overlay { display: none; }
.ped-overlay {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.92em;
  color: rgba(248, 239, 212, 0.92);
  line-height: 1.1;
}
/* Tier backgrounds — replace the default ink mask once a guess attaches a
   tier to the word. Same specificity as :not(.revealed) so order matters. */
.ped-word.o-cold:not(.revealed)    { background: #2a3a4d; }
.ped-word.o-cool:not(.revealed)    { background: #3f6280; }
.ped-word.o-warm:not(.revealed)    { background: #846624; }
.ped-word.o-hot:not(.revealed)     { background: #a8581b; }
.ped-word.o-burning:not(.revealed) { background: #b62828; }

/* Input bar */
.ped-bar {
  display: flex;
  gap: 8px;
}
.ped-input {
  flex: 1;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--ink);
  border-radius: 3px;
  outline: none;
}
.ped-input:focus { border-color: var(--gold-bright); }
.ped-input:disabled { opacity: 0.6; }
.ped-submit {
  padding: 0 18px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
}
.ped-submit:hover:not(:disabled) { background: var(--blood-bright); }
.ped-submit:disabled { opacity: 0.5; cursor: default; }

.ped-stats {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}
.ped-stats .ped-found,
.ped-stats .ped-tries {
  color: var(--ink);
  font-weight: 600;
}

/* History list */
.ped-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 30vh;
  overflow-y: auto;
}
.ped-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.4fr) 1fr 50px 80px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  font-family: "EB Garamond", serif;
  font-size: 0.95rem;
}
.ped-row.just { animation: ped-flash 0.5s ease; }
@keyframes ped-flash {
  0% { background: var(--paper-dark); }
  100% {}
}
.ped-row-word {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ped-row-bar {
  position: relative;
  height: 8px;
  background: var(--paper-dark);
  border-radius: 4px;
  overflow: hidden;
}
.ped-row-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink-dim);
  transition: width 0.25s ease;
}
.ped-row-pct {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-align: right;
}
.ped-row-tag {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--paper);
}

/* Temperature tiers */
.ped-row.t-found  .ped-row-fill { background: #2a8c2a; }
.ped-row.t-found  .ped-row-tag  { background: #2a8c2a; }
.ped-row.t-found  .ped-row-pct  { color: #2a8c2a; }

.ped-row.t-burning .ped-row-fill { background: #c12a2a; }
.ped-row.t-burning .ped-row-tag  { background: #c12a2a; }
.ped-row.t-burning .ped-row-pct  { color: #c12a2a; }

.ped-row.t-hot .ped-row-fill { background: #d97a1f; }
.ped-row.t-hot .ped-row-tag  { background: #d97a1f; }
.ped-row.t-hot .ped-row-pct  { color: #d97a1f; }

.ped-row.t-warm .ped-row-fill { background: #c0a437; }
.ped-row.t-warm .ped-row-tag  { background: #c0a437; }
.ped-row.t-warm .ped-row-pct  { color: #c0a437; }

.ped-row.t-cool .ped-row-fill { background: #4f8aa6; }
.ped-row.t-cool .ped-row-tag  { background: #4f8aa6; }
.ped-row.t-cool .ped-row-pct  { color: #4f8aa6; }

.ped-row.t-cold .ped-row-fill { background: #2f5e88; }
.ped-row.t-cold .ped-row-tag  { background: #2f5e88; }
.ped-row.t-cold .ped-row-pct  { color: #2f5e88; }

.ped-row.t-zero .ped-row-fill { background: #6b5530; }
.ped-row.t-zero .ped-row-tag  { background: #6b5530; }
.ped-row.t-zero .ped-row-pct  { color: #6b5530; }

@media (max-width: 600px) {
  .ped-row {
    grid-template-columns: 1fr 56px 64px;
    grid-template-areas: "word pct tag" "bar bar bar";
    gap: 4px 8px;
  }
  .ped-row-word { grid-area: word; }
  .ped-row-bar  { grid-area: bar; }
  .ped-row-pct  { grid-area: pct; }
  .ped-row-tag  { grid-area: tag; }
  .ped-article { padding: 12px 12px; }
}

/* ==================================================================
   MASTERMIND (jour 9) — deux plateaux côte à côte (exemple + cible)
   ================================================================== */
.mm-wrap {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.mm-board {
  background: var(--paper-dark);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 14px 18px;
  min-width: 180px;
  font-family: "Special Elite", "Courier New", monospace;
}
.mm-board-title {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
}
.mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.mm-num {
  font-weight: 600;
  min-width: 5ch;
}
.mm-pegs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 70px;
  justify-content: flex-start;
}
.mm-peg {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.4px solid var(--ink);
  background: var(--paper);
}
.mm-peg.b { background: var(--ink); }
.mm-sep {
  border-top: 1px dashed var(--ink-dim);
  margin: 6px 0;
}
.mm-final .mm-num {
  color: var(--blood);
  font-weight: 700;
}

@media (max-width: 540px) {
  .mm-wrap { gap: 16px; flex-direction: column; align-items: stretch; }
  .mm-board { padding: 12px 14px; }
  .mm-row { font-size: 1rem; }
}

/* ==================================================================
   TAQUIN (jour 19) — sliding puzzle 3×4 sur photo de la boulangerie
   ================================================================== */
.taquin-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.taquin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  width: min(560px, 95vw);
  aspect-ratio: 1199 / 880;
  background: var(--ink);
  border: 1px solid var(--gold);
  padding: 2px;
}
.taq-reset {
  display: block;
  margin: 12px auto 0;
  padding: 7px 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.taq-reset:hover {
  background: var(--gold);
  color: var(--paper);
}
.taq-cell {
  background-image: url("/assets/enigme_19_a.webp");
  background-size: 300% 400%;
  background-repeat: no-repeat;
  background-position: 0 0;
  border-radius: 1px;
}
.taq-tile {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.taq-tile:hover {
  transform: scale(1.02);
  z-index: 1;
}
.taq-empty {
  background-image: none;
  background-color: var(--paper-dark);
  cursor: default;
}
.taquin-grid.solved {
  gap: 0;
  padding: 0;
  transition: gap 0.3s ease, padding 0.3s ease;
}
.taquin-grid.solved .taq-tile {
  cursor: default;
}
.taquin-grid.solved .taq-tile:hover {
  transform: none;
}

/* ==================================================================
   JOUR 10
   ================================================================== */
.tents-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.tents-grid {
  display: grid;
  grid-template-columns: 0.7fr repeat(6, 1fr);
  grid-template-rows: 0.7fr repeat(6, 1fr);
  gap: 2px;
  width: min(560px, 95vw);
  aspect-ratio: 1 / 1;
  background: var(--ink);
  border: 1px solid var(--gold);
  padding: 2px;
}
.tents-corner { background: transparent; }
.tents-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-dark);
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 2.6vw, 1.25rem);
  color: var(--ink);
  user-select: none;
}
.tents-hint.h-ok   { color: #2f7d3a; }
.tents-hint.h-over { color: #b62828; }
.tents-cell {
  background: var(--paper);
  background-size: auto 135%;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.tents-cell.t-empty:hover { background-color: var(--paper-dark); }
.tents-cell.t-micheal {
  background-image: url("/assets/enigme_10_a.webp");
  cursor: default;
}
.tents-cell.t-femme {
  background-image: url("/assets/enigme_10_b.webp");
}
.tents-cell.t-grass {
  position: relative;
}
.tents-cell.t-grass::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-size: clamp(3.2rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-dim);
  opacity: 0.75;
}
.tents-grid.solved .tents-cell { cursor: default; }
.tents-grid.solved .tents-cell.t-empty:hover,
.tents-grid.solved .tents-cell.t-grass:hover {
  background-color: var(--paper);
}
/* Liste de règles / d'indices commune aux storyHtml des énigmes
   (tents, slitherlink, tangram, cluedoku, présent…). Garde un style
   uniforme : non-italique, taille légèrement réduite, puces compactes. */
.puzzle-rules {
  margin: 0.6em 0 0;
  padding-left: 1.2em;
  font-size: 15.5px;
  line-height: 1.4;
  font-style: normal;
  color: var(--ink-dim);
  list-style: disc;
}
.puzzle-rules li { margin: 0.15em 0; }

.present-hint {
  margin: 0.8em 0 0;
  font-size: 0.85em;
  font-style: italic;
  color: var(--ink-dim);
  opacity: 0.85;
}

/* Grille logique 15×15 (jour 11) */
.logic-wrap {
  margin: 14px 0 4px;
}
.logic-scroll {
  display: flex;
  justify-content: center;
}
.logic-grid {
  border-collapse: collapse;
  margin: 0 auto;
  font-family: "Special Elite", monospace;
  font-size: 11px;
  background: var(--paper);
}
.logic-grid th, .logic-grid td {
  border: 1px solid var(--ink-dim);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  background: var(--paper);
  color: var(--ink);
}
.logic-grid .g-corner { border: none; background: transparent; }
.logic-grid .g-cat-h, .logic-grid .g-cat-v {
  background: var(--paper-dark);
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 6px;
}
.logic-grid .g-cat-v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.logic-grid .g-opt-h {
  height: 90px;
  padding: 4px 0;
  vertical-align: bottom;
  white-space: nowrap;
}
.logic-grid .g-opt-h span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.logic-grid .g-opt-v {
  text-align: right;
  padding: 3px 7px;
  white-space: nowrap;
  font-size: 11px;
}
.logic-grid td.g-cell {
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 17px;
  user-select: none;
  transition: background-color 0.1s ease;
}
.logic-grid .g-opt-h { height: 165px; }
.logic-grid .g-opt-h span { font-size: 11.5px; }
.logic-grid .g-opt-v { font-size: 12px; padding: 4px 8px; }
.logic-grid td.g-cell:hover { background: var(--paper-dark); }
.logic-grid td.g-cell.g-yes  { color: #2f7d3a; font-weight: 700; }
.logic-grid td.g-cell.g-no   { color: var(--ink-dim); }
.logic-grid td.g-blank {
  background: repeating-linear-gradient(45deg,
    transparent 0 4px,
    rgba(0, 0, 0, 0.06) 4px 8px);
  border-color: rgba(0, 0, 0, 0.08);
  cursor: default;
}
/* Séparateurs entre blocs logiques */
.logic-grid .g-bl { border-left: 2.5px solid var(--ink); }
.logic-grid .g-bt { border-top:  2.5px solid var(--ink); }
.logic-reset { margin: 0 auto 14px; }

/* Cluedoku — grille 3×3 d'enquêteurs (jour 23) */
.cluedoku-wrap {
  margin: 14px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cluedoku-grid {
  border-collapse: separate;
  border-spacing: 6px;
  margin: 0 auto;
  font-family: "Special Elite", monospace;
  width: 100%;
}
.cluedoku-grid th {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 8px;
  vertical-align: bottom;
  text-align: center;
  background: transparent;
}
.cluedoku-grid th.ck-row {
  text-align: right;
  vertical-align: middle;
  width: 18%;
  max-width: 160px;
  line-height: 1.25;
}
.cluedoku-grid th.ck-col {
  width: 27%;
  line-height: 1.25;
}
.cluedoku-grid th.ck-corner { background: transparent; border: none; }
.cluedoku-grid td.ck-td { padding: 0; vertical-align: middle; }

.cluedoku-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 10px 10px 8px;
  min-height: 78px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cluedoku-cell.ck-valid   { border-color: #2f7d3a; background: rgba(47, 125, 58, 0.06); }
.cluedoku-cell.ck-invalid { border-color: #b62828; background: rgba(182, 40, 40, 0.05); }
.cluedoku-cell.ck-dup     { border-color: #c98a1a; background: rgba(201, 138, 26, 0.07); }

.cluedoku-cell .ck-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--paper-dark);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "Special Elite", monospace;
  font-size: 14px;
  outline: none;
}
.cluedoku-cell .ck-input:focus { border-color: var(--gold); }
.cluedoku-cell .ck-input:disabled { opacity: 0.85; cursor: default; }

.cluedoku-cell .ck-status {
  min-height: 14px;
  font-size: 11px;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink-dim);
}
.cluedoku-cell.ck-valid   .ck-status { color: #2f7d3a; font-style: normal; }
.cluedoku-cell.ck-invalid .ck-status { color: #b62828; }
.cluedoku-cell.ck-dup     .ck-status { color: #8a5d12; }

.cluedoku-cell .ck-locked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cluedoku-cell .ck-locked-name {
  flex: 1;
  font-family: "Special Elite", monospace;
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}
.cluedoku-cell .ck-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cluedoku-cell .ck-clear:hover {
  background: var(--blood);
  color: var(--paper);
  border-color: var(--blood-bright);
}

.cluedoku-grid.solved .cluedoku-cell { cursor: default; }
.cluedoku-reset { margin-top: 14px; }

/* JOUR 31 */
.motus-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 14px 0 4px;
}
.motus-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.motus-row {
  display: flex;
  gap: 6px;
}
.motus-tile {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  user-select: none;
}
.motus-tile.m-green {
  background: #2f7d3a;
  border-color: #245f2c;
  color: var(--paper);
}
.motus-tile.m-yellow {
  background: #d4a017;
  border-color: #a07b10;
  color: var(--paper);
}
.motus-tile.m-absent {
  background: var(--paper-dark);
  border-color: var(--border);
  color: var(--ink-dim);
}
.motus-tile.m-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-dim);
  opacity: 0.55;
}
.motus-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.motus-input {
  width: 220px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  outline: none;
  text-align: center;
}
.motus-input:focus { border-color: var(--gold); }
.motus-submit {
  padding: 10px 18px;
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood-bright);
  font-family: "Cinzel", serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}
.motus-submit:hover { background: var(--blood-bright); }
.motus-feedback {
  min-height: 18px;
  margin: 8px 0 0;
  font-style: italic;
  font-size: 13px;
  color: var(--blood-bright);
}
.motus-reset { margin-top: 6px; }

/* JOUR 17 */
.slither-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 14px 0 4px;
}
.slither-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  user-select: none;
  touch-action: pan-y;
}
.sl-bg-1 { fill: rgba(105, 175, 105, 0.16); }
.sl-bg-2 { fill: rgba(75, 130, 195, 0.22); }
.sl-bg-3 { fill: rgba(225, 195, 80, 0.30); }
.sl-dot  { fill: var(--ink); }
.sl-line {
  stroke: var(--blood);
  stroke-width: 3;
  stroke-linecap: round;
}
.sl-x line {
  stroke: var(--ink-dim);
  stroke-width: 1.6;
}
.sl-clue {
  font-family: "Special Elite", monospace;
  font-size: 13px;
  fill: var(--ink);
  pointer-events: none;
}
.sl-c-0 { fill: rgba(0, 0, 0, 0.25); font-size: 11px; }
.sl-c-3 { font-weight: 700; }
.sl-clue.sl-ok   { fill: #2f7d3a; font-weight: 700; }
.sl-clue.sl-over { fill: #b62828; font-weight: 700; }
.sl-hit { cursor: pointer; }
.sl-hit:hover { fill: rgba(255, 200, 100, 0.35); }
.slither-help {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-dim);
  text-align: center;
}
.slither-reset { margin-top: 8px; }

/* Tas de journaux caviardés — jour 12 */
.newsstack-wrap {
  margin: 24px auto 8px;
  overflow-x: auto;
}
.newsstack-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 10px;
}
.newsstack-paper {
  position: static;
  flex: 0 0 auto;
  width: 270px;
  padding: 14px 16px 18px;
  background: #efe1c0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(120,80,30,0.10), transparent 60%),
    radial-gradient(ellipse at 90% 90%, rgba(80,40,10,0.12), transparent 60%);
  color: #2a1e0a;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  border-radius: 1px;
  user-select: none;
  font-family: "EB Garamond", Georgia, serif;
}
.newsstack-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(80,50,20,0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(80,50,20,0.03) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
}
.news-masthead {
  text-align: center;
  border-bottom: 1px solid #6c4a1f;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.news-title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 26px;
  line-height: 1;
  margin: 0;
  color: #1a0e02;
}
.news-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  color: #4a3216;
}
.news-headline {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.05;
  text-align: center;
  margin: 8px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.news-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  filter: sepia(0.35) contrast(1.05);
}
.news-body {
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}
.news-body p { margin: 0 0 6px; }
.news-body p:last-child { margin-bottom: 0; }
.caviar {
  display: inline-block;
  background: #0a0500;
  color: transparent;
  border-radius: 1px;
  padding: 0 2px;
  margin: 0 1px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
  user-select: none;
  white-space: nowrap;
}
.newsstack-p1 { transform: rotate(-4deg); margin-top: 0; }
.newsstack-p2 { width: 292px; transform: rotate(3deg);  margin-top: 30px; }
.newsstack-p3 { transform: rotate(-2deg); margin-top: 12px; }
.newsstack-p1 .news-title { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 30px; }
.newsstack-p2 .news-title { font-family: "Cinzel", serif; font-weight: 900; font-size: 24px; letter-spacing: 0.05em; }
.newsstack-p3 .news-title { font-family: "Cinzel", serif; font-weight: 900; font-size: 28px; letter-spacing: 0.04em; background: #1a0e02; color: #efe1c0; padding: 4px 0; }
@media (max-width: 720px) {
  .newsstack-paper { width: 220px; padding: 12px 12px 14px; }
  .news-title { font-size: 22px; }
  .news-headline { font-size: 15px; }
  .news-body { font-size: 11px; }
}

/* JOUR 18 */
.tangram-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 14px 0 4px;
}
.tangram-svg {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  height: auto;
  user-select: none;
  touch-action: none;
  display: block;
}
.tg-face {
  font-family: "Cinzel", serif;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  user-select: none;
}
.tg-mahe {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.1;
  stroke-linecap: round;
  pointer-events: none;
}
.tg-target {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.06;
  vector-effect: non-scaling-stroke;
}
.tg-cell {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 0.01;
  vector-effect: non-scaling-stroke;
}
.tg-cell-0 { fill: rgba(255, 240, 210, 0.6); }
.tg-cell-1 { fill: rgba(220, 210, 180, 0.6); }
.tg-piece {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 0.04;
  stroke-linejoin: round;
  cursor: grab;
  vector-effect: non-scaling-stroke;
}
.tg-piece:active, .tg-sel {
  stroke: var(--gold-bright, #d4a017);
  stroke-width: 0.08;
}
.tangram-help {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-dim);
  text-align: center;
}
.tangram-reset { margin-top: 8px; align-self: center; }
.tangram-toolbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tangram-toolbar .tangram-reset { margin: 0; align-self: center; }
.tangram-rotate-all {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tangram-rotate-all:hover {
  background: var(--gold);
  color: var(--paper);
}

/* ==================================================================
   JOUR 25
   ================================================================== */
.hashi-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.hashi-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  background:
    radial-gradient(circle at 22% 14%, #f5e6c0 0%, #ead0a0 60%, #d2b272 100%);
  border-radius: 4px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(120, 75, 25, 0.22);
}
.hashi-grid line {
  stroke: rgba(80, 50, 18, 0.22);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
}
.hashi-bridge {
  stroke: #4a2c0c;
  stroke-width: 5;
  stroke-linecap: round;
  pointer-events: none;
}
.hashi-slot {
  fill: transparent;
  cursor: pointer;
}
.hashi-slot:hover {
  fill: rgba(220, 150, 40, 0.45);
  stroke: rgba(120, 70, 15, 0.7);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.hashi-gear text {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 32px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #fff5d6;
  paint-order: stroke;
  stroke: rgba(30, 12, 0, 0.95);
  stroke-width: 1.4;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.hashi-gear { pointer-events: none; }
.hashi-gear.is-satisfied image {
  filter:
    drop-shadow(0 0 8px rgba(140, 220, 100, 0.95))
    drop-shadow(0 0 14px rgba(120, 200, 80, 0.6));
}
.hashi-caption {
  margin-top: 4px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 13px;
  text-align: center;
}
.hashi-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hashi-reset:hover {
  background: var(--gold);
  color: var(--paper);
}
/* ==================================================================
   JOUR 26
   ================================================================== */
.jig26-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.jig26-svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  background: rgba(20, 12, 4, 0.5);
  border: 1px solid rgba(200, 168, 106, 0.3);
  border-radius: 3px;
  touch-action: none;
  user-select: none;
}
.jig26-g {
  cursor: grab;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.jig26-g.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.7));
}
.jig26-g.is-placed {
  cursor: default;
  pointer-events: none;
  filter: none;
}
.jig26-stroke {
  stroke: rgba(20, 10, 2, 0.55);
  stroke-width: 1.2;
}
.jig26-g.is-placed .jig26-stroke {
  stroke: rgba(20, 10, 2, 0.15);
}
.jig26-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.jig26-reset:hover {
  background: var(--gold);
  color: var(--paper);
}

/* ==================================================================
   JOUR 24
   ================================================================== */
.grille24-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.grille24-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  user-select: none;
  touch-action: none;
  cursor: grab;
}
.grille24-stone {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.grille24-plaque {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  pointer-events: none; /* le stage gère la saisie via hit-test alpha */
  -webkit-user-drag: none;
  user-drag: none;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transition: filter 0.12s ease;
}
.grille24-plaque.is-grabbed {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
}
.grille24-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.grille24-reset:hover {
  background: var(--gold);
  color: var(--paper);
}

/* ==================================================================
   JOUR 28
   ================================================================== */
.clue28-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.clue28-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 900px;
}
.clue28-card {
  position: relative;
  padding: 12px 12px 14px;
  background: rgba(40, 26, 8, 0.55);
  border: 1px solid rgba(200, 168, 106, 0.45);
  border-radius: 4px;
  color: var(--ink, #d8c08a);
  cursor: pointer;
  user-select: none;
  transition: background 0.14s, border-color 0.14s, transform 0.08s;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
}
.clue28-card:hover { transform: translateY(-1px); border-color: var(--gold); }
.clue28-card.is-innocent {
  background: rgba(74, 102, 52, 0.7);
  border-color: #6f9047;
  color: #f0f6dc;
}
.clue28-card.is-criminal {
  background: rgba(120, 30, 22, 0.75);
  border-color: #c44a3a;
  color: #f8dcd6;
}
.clue28-card.is-hidden {
  background: #d8c590;
  border-color: rgba(60, 35, 10, 0.55);
  color: #2c1c0a;
}
.clue28-card.is-hidden .clue28-name {
  color: #4a2a08;
}
.clue28-card.is-hidden .clue28-clue {
  font-style: italic;
  color: #5a3a16;
}
.clue28-card.is-shaking {
  animation: clue28Shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes clue28Shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.clue28-modal {
  position: absolute;
  z-index: 100;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(40, 22, 6, 0.95), rgba(20, 12, 4, 0.97));
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  animation: clue28ModalIn 0.15s ease-out;
}
@keyframes clue28ModalIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.clue28-mbtn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid;
  border-radius: 3px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.clue28-mbtn-crim {
  border-color: #c44a3a;
  color: #f5c6bc;
}
.clue28-mbtn-crim:hover { background: #c44a3a; color: #fff; }
.clue28-mbtn-innoc {
  border-color: #6f9047;
  color: #d2e2b2;
}
.clue28-mbtn-innoc:hover { background: #6f9047; color: #fff; }
.clue28-icon {
  width: 46px;
  height: 46px;
  margin: 2px auto 4px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
}
.clue28-name {
  font-family: "Cinzel", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-bright, #e8c97c);
  line-height: 1.15;
}
.clue28-card.is-innocent .clue28-name,
.clue28-card.is-criminal .clue28-name { color: inherit; }
.clue28-prof {
  font-style: italic;
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 6px;
}
.clue28-clue {
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}
.clue28-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.clue28-reset:hover {
  background: var(--gold);
  color: var(--paper);
}
@media (max-width: 700px) {
  .clue28-grid { grid-template-columns: repeat(2, 1fr); }
  .clue28-card { min-height: 130px; }
  .clue28-name { font-size: 15px; }
  .clue28-prof { font-size: 12px; }
  .clue28-clue { font-size: 12px; }
}

/* ==================================================================
   JOUR 27
   ================================================================== */
.audio27-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 0;
}
.audio27-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  width: 100%;
  max-width: 480px;
  background:
    linear-gradient(180deg, rgba(40, 22, 6, 0.55), rgba(20, 12, 4, 0.65));
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(120, 80, 30, 0.16);
}
.audio27-src { display: none; }
.audio27-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fceaa0 0%, #e8c97c 55%, #c89742 100%);
  border: 1px solid #f5dca0;
  color: #2c1c0a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(232, 201, 124, 0.5),
    inset 0 1px 0 rgba(255, 248, 220, 0.55);
  transition: transform 0.1s, box-shadow 0.15s;
}
.audio27-btn:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(255, 220, 130, 0.75),
    inset 0 1px 0 rgba(255, 250, 230, 0.7);
}
.audio27-btn:active { transform: scale(0.94); }
.audio27-i {
  width: 20px;
  height: 20px;
  fill: currentColor;
  margin-left: 2px; /* compense le centre optique du triangle */
}
.audio27-track {
  flex: 1;
  position: relative;
  height: 8px;
  background:
    linear-gradient(180deg, rgba(232, 201, 124, 0.4), rgba(200, 151, 66, 0.55));
  border: 1px solid rgba(245, 220, 160, 0.75);
  border-radius: 4px;
  overflow: hidden;
}
.audio27-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold-bright, #e8c97c) 100%);
  border-radius: 3px;
  pointer-events: none;
}

.hashi-watch {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  /* drop-shadow suit la silhouette alpha (fond transparent) */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.hashi-victory { gap: 14px; }

/* ==================================================================
   JOUR 21
   ================================================================== */
.sums-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.sums-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-width: 480px;
  width: 100%;
  user-select: none;
}
.sums-corner { background: transparent; }
.sums-collabel,
.sums-rowlabel {
  background: #b6a378;
  color: #2c1c0a;
  font-family: "Cinzel", serif;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.sums-collabel.is-ok,
.sums-rowlabel.is-ok {
  background: #6f9047;
  color: #f0f6dc;
}
.sums-cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(60, 40, 18, 0.35);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "EB Garamond", "Garamond", serif;
  color: #2c1c0a;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.sums-cell:hover { transform: scale(1.04); }
.sums-cell.is-active {
  box-shadow:
    inset 0 0 0 3px var(--gold, #c89742),
    0 4px 10px rgba(0, 0, 0, 0.35);
  transform: scale(1.02);
}
.sums-cell.is-crossed {
  cursor: default;
  opacity: 0.55;
}
.sums-cell.is-crossed:hover { transform: none; }
.sums-cell.is-crossed::after {
  content: "";
  position: absolute;
  inset: 8%;
  background:
    linear-gradient(45deg,
      transparent calc(50% - 1.5px),
      rgba(140, 60, 20, 0.85) calc(50% - 1.5px),
      rgba(140, 60, 20, 0.85) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)),
    linear-gradient(-45deg,
      transparent calc(50% - 1.5px),
      rgba(140, 60, 20, 0.85) calc(50% - 1.5px),
      rgba(140, 60, 20, 0.85) calc(50% + 1.5px),
      transparent calc(50% + 1.5px));
  pointer-events: none;
  border-radius: 3px;
}
.sums-digit {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.sums-letter {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(40, 25, 8, 0.55);
}
.sums-cage-target {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(40, 25, 8, 0.85);
  background: rgba(255, 248, 232, 0.72);
  padding: 0 4px;
  border-radius: 2px;
  line-height: 1.4;
}
.sums-cage-target.is-ok {
  background: #4a6634;
  color: #e8efbe;
}
.sums-coords {
  font-family: "EB Garamond", serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #2c1c0a;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid rgba(60, 40, 18, 0.45);
  background: #d8c590;
  border-radius: 3px;
  min-width: 320px;
}
.sums-coords-label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #5a3e1a;
  text-transform: uppercase;
  margin-right: 8px;
}
.sums-coord-letter {
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
  font-weight: 700;
  color: #8a4a14;
}
.sums-coord-num {
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
  color: #2a4a16;
  font-weight: 700;
}
.sums-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sums-reset:hover {
  background: var(--gold);
  color: var(--paper);
}
@media (max-width: 700px) {
  .sums-digit { font-size: 22px; }
  .sums-coords { font-size: 16px; min-width: 0; }
}

/* ==================================================================
   JOUR 16
   ================================================================== */
.exil-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.exil-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  user-select: none;
  touch-action: none;
}
.exil-map {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  /* drop-shadow suit la silhouette alpha (coins transparents arrondis)
     plutôt que le rectangle englobant. */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.exil-calque {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  height: auto;
  pointer-events: auto;
  cursor: grab;
  -webkit-user-drag: none;
  user-drag: none;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: filter 0.12s ease;
}
.exil-calque.is-grabbed {
  cursor: grabbing;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}
.exil-reset {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.exil-reset:hover {
  background: var(--gold);
  color: var(--paper);
}

/* ==================================================================
   JOUR 15
   ================================================================== */
.goujat-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.goujat-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 460px;
  padding: 36px 40px 44px;
  background:
    radial-gradient(circle at 18% 12%, #f5e7c4 0%, #e8d4a4 60%, #c9b07a 100%);
  border-radius: 4px;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(120, 80, 30, 0.18);
  color: #3a2516;
  font-family: "EB Garamond", Georgia, serif;
}
.goujat-card::before,
.goujat-card::after {
  content: "";
  position: absolute;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(70, 35, 10, 0.18), transparent 70%);
  pointer-events: none;
}
.goujat-card::before { top: 0; left: 0; }
.goujat-card::after  { bottom: 0; right: 0; }
/* Quadrillage uniforme couvrant tout le billet — donne l'impression
   d'un papier piqué. Quelques points actifs se distinguent par une
   nuance plus foncée. */
.goujat-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(12, 1fr);
  padding: 28px 32px;
  pointer-events: none;
  z-index: 1;
}
/* Quadrillage tracé en SVG pour rester net même sur des dimensions
   non-entières. */
.goujat-rule {
  position: absolute;
  top: 28px; left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 56px);
  pointer-events: none;
  z-index: 0;
}
.goujat-rule line {
  stroke: rgba(58, 37, 22, 0.4);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1.5 1.5;
  stroke-linecap: round;
}
.goujat-dot {
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%,
      rgba(190, 155, 105, 0.55) 0%,
      rgba(135, 100, 55, 0.55) 55%,
      rgba(95, 65, 30, 0.55) 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 240, 200, 0.35);
}
.goujat-dot.is-code {
  /* Différence très légère : un peu plus de saturation/profondeur,
     juste assez pour qu'un œil attentif distingue le code du reste. */
  background:
    radial-gradient(circle at 32% 30%,
      rgba(160, 110, 55, 0.78) 0%,
      rgba(105, 65, 25, 0.82) 55%,
      rgba(60, 35, 10, 0.85) 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.32),
    inset 0 1px 1px rgba(255, 235, 195, 0.4);
}

@media (max-width: 700px) {
  .goujat-card { padding: 26px 22px 32px; min-height: 380px; }
  .goujat-grid { padding: 22px 18px; }
  .goujat-dot { width: 5px; height: 5px; }
}

/* ==================================================================
   JOUR 14
   ================================================================== */
.book-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.book-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-height: 560px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.book-page {
  display: none;
  width: 100%;
  animation: bookFade 0.28s ease;
}
.book-page.is-active { display: flex; flex-direction: column; align-items: center; }
@keyframes bookFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.book-page-img {
  width: 100%;
  text-align: center;
}
.book-page-img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  /* drop-shadow follows alpha — fonctionne pour les PNG détourés
     (lettre, médaille) comme pour les JPG rectangulaires (photo). */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.book-page-img .book-caption {
  margin-top: 10px;
  font-family: "EB Garamond", "Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft, #b9a079);
  letter-spacing: 0.02em;
}

/* Registre matricule — page tableau aspect papier vieilli */
.book-page-registry {
  background:
    radial-gradient(circle at 20% 10%, #f4e6c4 0%, #e8d4a4 70%, #c9b07a 100%);
  color: #3a2a18;
  font-family: "EB Garamond", "Garamond", serif;
  padding: 22px 26px 26px;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(120, 80, 30, 0.18);
  width: 100%;
  max-width: 680px;
  position: relative;
}
.book-page-registry::before,
.book-page-registry::after {
  content: "";
  position: absolute;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(80, 40, 10, 0.18), transparent 70%);
  pointer-events: none;
}
.book-page-registry::before { top: 0; left: 0; }
.book-page-registry::after  { bottom: 0; right: 0; }
.registry-head {
  text-align: center;
  border-bottom: 2px solid #6e5028;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.registry-head h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: #4a2f12;
}
.registry-head .registry-sub {
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #604024;
}
.registry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.35;
}
.registry-table th,
.registry-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(74, 47, 18, 0.35);
  text-align: left;
  vertical-align: top;
}
.registry-table th {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a2f12;
  border-bottom: 1.5px solid #6e5028;
}
.registry-table td.col-num {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #2c1a08;
  white-space: nowrap;
}
.registry-table td.col-name { font-variant: small-caps; font-weight: 600; }
.registry-page-num {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
  font-size: 11px;
  color: #6e5028;
  letter-spacing: 0.08em;
}

/* Navigation livre */
.book-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}
.book-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: "EB Garamond", serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.book-nav:hover { background: var(--gold); color: var(--paper); }
.book-nav:active { transform: scale(0.95); }
.book-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.book-nav:disabled:hover { background: transparent; color: var(--gold); }
.book-counter {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  min-width: 80px;
  text-align: center;
}
.book-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.book-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.book-thumb.is-active { background: var(--gold); color: var(--paper); }
.book-thumb:hover { background: var(--gold); color: var(--paper); }

@media (max-width: 700px) {
  .book-stage { min-height: 520px; max-width: 100%; }
  .book-page-registry { padding: 14px 12px 18px; }
  .registry-table { font-size: 11px; }
  .registry-table th, .registry-table td { padding: 4px 4px; }
  .registry-table th { font-size: 9px; letter-spacing: 0.08em; }
  .book-page-img img { max-height: 60vh; }
}

/* ===================================================================
   JOUR 29
   =================================================================== */
.q29-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.q29-board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 500px;
  background: var(--ink);
  padding: 2px;
  border: 2px solid var(--ink);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.q29-corner, .q29-head, .q29-rowhead {
  background: var(--paper);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.q29-head img, .q29-rowhead img {
  width: 82%; height: 82%;
  object-fit: contain;
  display: block;
}
.q29-cell {
  aspect-ratio: 1 / 1;
  border: none; margin: 0; padding: 0;
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  font-size: 18px; line-height: 1;
  transition: filter 0.1s ease;
}
.q29-cell:hover { filter: brightness(0.92); }
.q29-x { color: #1a1208; font-size: 17px; font-weight: 800; opacity: 0.62; }
.q29-boat { font-size: 20px; }
.q29-board.solved .q29-cell { cursor: default; }
.q29-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.q29-reset {
  font-family: "Cinzel", serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; background: transparent; border: 1px solid var(--gold);
  color: var(--ink); cursor: pointer; font-size: 12px;
}
.q29-reset:hover { background: var(--gold); color: var(--paper); }

/* ===================================================================
   JOUR 32
   =================================================================== */
.q32-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.q32-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 720px;
  background: var(--ink);
  padding: 3px;
  border: 2px solid var(--ink);
  -webkit-user-select: none; user-select: none;
}
.q32-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border: none; margin: 0; padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.q32-tile.red { background: #b81a1a; }
.q32-tile.cream { background: #c7b079; }
.q32-tile.sel { box-shadow: inset 0 0 0 4px var(--gold-bright); z-index: 2; }
.q32-tile.empty { cursor: default; }
.q32-tile img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain; pointer-events: none;
}
/* triangle : grande diagonale pleine case */
.q32-l-tri { top: 0; left: 0; transform: none; width: 100%; height: 100%; object-fit: fill; }
/* rosace : grande, derrière les cartes */
.q32-l-star { width: 90%; }
/* angles : ils encadrent largement les cartes */
.q32-l-angles { width: 92%; height: 96%; object-fit: fill; }
/* cartes dame / roi : motif de référence */
.q32-l-card { width: 68%; }
/* dé / pièces / symboles : par-dessus, plus petits */
.q32-l-die  { width: 36%; }
.q32-l-coin { width: 52%; }
.q32-l-suit { width: 60%; }
.q32-letter {
  position: absolute;
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: clamp(1rem, 5vw, 1.8rem); line-height: 1;
  color: #2a1408; pointer-events: none;
}
.q32-let-bl { bottom: 6%; left: 9%; }
.q32-let-tr { top: 6%; right: 9%; }
.q32-controls { display: flex; justify-content: center; }
.q32-reset {
  font-family: "Cinzel", serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; background: transparent; border: 1px solid var(--gold);
  color: var(--ink); cursor: pointer; font-size: 12px;
}
.q32-reset:hover { background: var(--gold); color: var(--paper); }

/* ===================================================================
   JOUR 35
   =================================================================== */
.cheryl-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.cheryl-dialogue { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.cheryl-line {
  margin: 0; padding: 18px 24px;
  background: var(--paper); border: 1px solid var(--border);
  font-style: italic; color: var(--ink); line-height: 1.6; font-size: 17px;
}
.cheryl-who {
  font-family: "Cinzel", serif; font-style: normal; font-weight: 700;
  color: var(--gold); letter-spacing: 0.04em;
}
.cheryl-dates {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 10 dates → exactement 2 lignes de 5 */
  gap: 10px;
  width: 100%;
  max-width: 620px;
}
.cheryl-date { text-align: center; }
.cheryl-date {
  padding: 10px 14px;
  background: var(--paper); border: 1px solid var(--gold);
  color: var(--ink); font-family: "EB Garamond", Georgia, serif; font-size: 15px;
  cursor: pointer; border-radius: 2px;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
}
.cheryl-date:hover { background: var(--paper-dark); }
.cheryl-date.crossed {
  opacity: 0.4; text-decoration: line-through;
  color: var(--ink-dim); background: transparent; border-color: var(--border);
}
.cheryl-hint { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--ink-dim); text-align: center; }

/* ===================================================================
   JOUR 34
   =================================================================== */
.isoler-wrap { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 660px; margin: 0 auto; }
/* citation présentée comme une page de livre (parchemin) */
.isoler-page {
  position: relative;
  margin: 0;
  padding: 40px 44px 26px;
  background: linear-gradient(180deg, #f7eed1 0%, #efe1bd 100%);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: inset 0 0 46px rgba(138, 99, 21, 0.12), 0 6px 18px rgba(42, 26, 8, 0.18);
}
.isoler-page::before {
  content: "\201C";
  position: absolute; top: 2px; left: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px; line-height: 1; color: var(--gold); opacity: 0.32;
}
.isoler-quote {
  margin: 0; font-style: italic;
  font-size: 27px; line-height: 1.55; text-align: center;
  color: var(--ink); font-family: "EB Garamond", Georgia, serif;
}
.isoler-source {
  margin: 18px 0 0; text-align: left; font-style: italic;
  color: var(--ink-dim); font-size: 16px;
  font-family: "EB Garamond", Georgia, serif;
}
.isoler-clues { margin: 0; padding-left: 1.3em; line-height: 1.6; color: var(--ink); font-size: 16px; }
.isoler-clues li { margin: 0.35em 0; }

/* ===================================================================
   JOUR 36
   =================================================================== */
.cryptex-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.cryptex-scroll { width: 100%; overflow-x: auto; display: flex; justify-content: center; padding: 2px 0 8px; }
.cryptex {
  display: inline-flex; gap: 3px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #5a4421 0%, #2e2110 100%);
  box-shadow: inset 0 2px 5px rgba(255,222,160,0.30), inset 0 -3px 6px rgba(0,0,0,0.5), 0 10px 26px rgba(0,0,0,0.45);
  transition: box-shadow 0.3s;
}
.cryptex.done { box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 22px rgba(212,160,23,0.45); }
.cx-col { display: flex; flex-direction: column; align-items: stretch; }
.cx-up, .cx-dn {
  height: 17px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
  background: #3c2c12; color: #f3dca0; font-size: 9px; line-height: 17px;
}
.cx-up:hover, .cx-dn:hover { background: #6b4e1f; color: #fff; }
.cx-window {
  display: flex; flex-direction: column; margin: 2px 0; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg,
    #38280f 0%, #5a4419 13%, #cda649 19%, #f6e1ab 50%, #cda649 81%, #5a4419 87%, #38280f 100%);
  box-shadow: inset 1px 0 0 rgba(255,235,190,0.22), inset -1px 0 0 rgba(0,0,0,0.32);
}
.cx-ghost { opacity: 0.40; }
.cx-cell {
  width: 46px; height: 24px; display: flex; align-items: center; justify-content: flex-start;
  padding-left: 6px;
  font-family: "Cinzel", serif; font-size: 15px; font-weight: 700; color: #2a1a08; line-height: 1;
}
.cx-cell .cx-h { display: inline-block; width: 17px; text-align: center; }

/* Jour 34 — mots cliquables de la citation (barrés) */
.isoler-word { cursor: pointer; transition: color 0.12s, opacity 0.12s; }
.isoler-word:hover { color: var(--gold-bright); }
.isoler-word.crossed { text-decoration: line-through; opacity: 0.4; }

/* ======================================================
   JOUR 37
   ====================================================== */
.hex37-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hex37-board {
  position: relative; margin: 0 auto;
  background-image: url('/assets/enigme_37_a.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.hex37-cell {
  position: absolute;
  pointer-events: none;
  cursor: pointer;
  overflow: visible;
}
.hex37-cell-edit { cursor: crosshair; }
.hex37-outline {
  fill: none;
  stroke: rgba(90, 80, 70, 0.55);
  stroke-width: 1;
  stroke-linejoin: round;
  pointer-events: all;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.hex37-outline:hover {
  stroke: rgba(60, 50, 40, 0.85);
  stroke-width: 1.5;
}
.hex37-cell-sel .hex37-outline {
  stroke: #d92619;
  stroke-width: 3;
}
.hex37-cell-sel .hex37-outline:hover {
  stroke: #d92619;
  stroke-width: 3;
}
.hex37-mid {
  fill: #f0d870;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.5;
  pointer-events: none;
}
.hex37-mid-sel {
  fill: #d92619;
  stroke: #5c1108;
  stroke-width: 2;
}
.hex37-cell-tools {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hex37-cell-tools button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid #5c1108;
  background: var(--paper);
  color: #5c1108;
  font-family: "Cinzel", serif; font-size: 14px; font-weight: 700;
  line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, color 0.15s ease;
}
.hex37-cell-tools button:hover {
  background: #d92619; color: var(--paper); border-color: #d92619;
}
.hex37-cell-tools .hex37-deselect { font-size: 20px; }
.hex37-yarn-core {
  fill: none;
  stroke: #7a1d10;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hex37-yarn-fibers {
  fill: none;
  stroke: #d6543a;
  stroke-width: 2;
  stroke-linecap: round;
}
.hex37-yarn-knot {
  fill: #7a1d10;
  stroke: #d6543a;
  stroke-width: 1.5;
}
.hex37-threads-layer {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.5));
}
.hex37-tools {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.hex37-tools button {
  font-family: "Cinzel", serif; letter-spacing: 0.05em;
  padding: 6px 12px; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--border);
}
.hex37-tools button:hover { background: var(--paper-dark); }

/* ======================================================
   JOUR 38
   ====================================================== */
.verite38-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.verite38-list {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
}
.verite38-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.verite38-card { width: 220px; }
.verite38-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 14px 14px; gap: 8px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(42,26,8,0.12);
}
.verite38-icon {
  font-size: 34px; color: var(--gold-bright); line-height: 1;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(138,99,21,0.08); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.verite38-name {
  font-family: "Cinzel", serif; letter-spacing: 0.05em;
  color: var(--ink); font-size: 14px; line-height: 1.25;
}
.verite38-says {
  flex: 1; color: var(--ink); font-style: italic; font-size: 14px; line-height: 1.45;
  padding: 4px 2px;
}
.verite38-flags { display: flex; gap: 6px; margin-top: auto; }
.verite38-flag {
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  font-family: "Cinzel", serif; letter-spacing: 0.05em;
  background: transparent; color: var(--ink); border: 1px solid var(--border);
}
.verite38-flag:hover { background: var(--paper); }
.verite38-flag.truth.on { background: #5d8a4a; color: var(--paper); border-color: #5d8a4a; }
.verite38-flag.lie.on { background: #9c2b15; color: var(--paper); border-color: #9c2b15; }