/* =========================================================================
   TROLLTRAIL VOUILLANTS — systeme visuel
   Verre vert sombre sur photo de sous-bois, or grave, bois et parchemin.
   ========================================================================= */

:root {
  /* fonds verre */
  --glass-1: rgba(26, 58, 42, 0.86);
  --glass-2: rgba(13, 33, 24, 0.90);
  --glass-3: rgba(9, 24, 18, 0.94);
  --ink-900: #071510;
  --ink-800: #0b1f16;

  /* accents */
  --moss:      #7fd07f;
  --moss-soft: #a8e0a0;
  --moss-deep: #2f7a42;
  --gold:      #e2c98d;
  --gold-deep: #b3934f;
  --ember:     #d98b46;
  --rot:       #d9695c;
  --sky:       #7fb6c9;
  --gem:       #64c8f0;

  /* texte */
  --parchment: #eef1e6;
  --parch-dim: #b9c9b6;
  --parch-faint: #8ba28c;

  /* cartes claires (liste des missions) */
  --card-light: #f4f2e7;
  --card-light-2: #e9e6d6;
  --ink-card: #1e3227;

  /* bois / parchemin */
  --wood-1: #c9a468;
  --wood-2: #a3763f;
  --wood-ink: #3a2412;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;

  --line: 1px solid rgba(168, 224, 160, 0.15);
  --line-soft: 1px solid rgba(238, 241, 230, 0.09);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 46px rgba(0, 0, 0, 0.60);
  --glow-moss: 0 0 22px rgba(110, 200, 120, 0.30);
  --glow-gold: 0 0 22px rgba(226, 201, 141, 0.28);

  --header-h: 62px;
  --nav-h: 70px;
  --rail-w: 80px;
  --chat-w: 330px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* 100% seul se cale sur le viewport initial de Safari (barre d'adresse
   deployee) : la barre du bas se retrouve alors au-dessus du vrai bord de
   l'ecran, avec un vide en dessous. 100dvh suit la hauteur visible reelle. */
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--parchment);
  background: var(--ink-900);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* --------------------------- fond photo de foret --------------------------- */

#bg-photo {
  position: fixed; inset: 0; z-index: 0;
  background: url("../assets/bg/foret.jpg") center/cover no-repeat;
  transform: scale(1.06);
  filter: saturate(0.86);
}
#bg-veil {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(8, 26, 18, 0.22), transparent 55%),
    radial-gradient(100% 60% at 50% 112%, rgba(4, 14, 10, 0.80), transparent 62%),
    linear-gradient(180deg, rgba(6, 20, 14, 0.42), rgba(5, 16, 11, 0.66));
}
/* Les ecrans de jeu ont besoin d'un fond plus dense que les ecrans d'intro. */
body.in-game #bg-photo { filter: saturate(0.7) blur(3px); }
body.in-game #bg-veil { background: linear-gradient(180deg, rgba(6, 22, 15, 0.90), rgba(4, 14, 10, 0.95)); }

#particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ---------------------------- canevas fixe mis a l'echelle ---------------------------- */
/* L'UI se dessine a une resolution logique fixe (--stage-w/--stage-h, en px
   « design », definis par js/stage.js) puis se met a l'echelle en un bloc via
   transform: scale(). Ca garantit un rendu identique sur tous les telephones
   et bannit tout defilement de page — seuls certains panneaux (liste des
   missions, chat) defilent en interne. --k/--k-y sont recalcules a chaque
   redimensionnement/rotation ; en mode "conserve le ratio" ils sont egaux
   (letterbox), en mode "remplir" ils divergent (etirement assume). */
#stage-outer {
  position: fixed; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#stage {
  position: relative; flex: none;
  width: calc(var(--stage-w, 420) * 1px);
  height: calc(var(--stage-h, 912) * 1px);
  transform: scale(var(--k, 1), var(--k-y, 1));
  transform-origin: center center;
}
#root { position: relative; height: 100%; }

/* ============================ typographie ============================ */

h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-family: var(--serif); font-size: 1.7rem; }
h2 { font-family: var(--serif); font-size: 1.25rem; }
h3 { font-size: 0.92rem; }

.serif { font-family: var(--serif); }
.eyebrow {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parch-faint); font-weight: 800;
}
.muted { color: var(--parch-dim); }
.faint { color: var(--parch-faint); }
.sm { font-size: 0.86rem; }
.xs { font-size: 0.72rem; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.leaf { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* Titre grave dore, comme le logo. */
.gold-title {
  font-family: var(--serif);
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 3px 10px rgba(0,0,0,0.6);
  letter-spacing: 0.01em;
}
.moss-title { font-family: var(--serif); color: var(--moss); font-size: 1.16rem; }

/* Sous-titre "VOUILLANTS" du logo. */
.wordmark-sub {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--moss-soft);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-top: -2px;
}
.wordmark-sub.big { font-size: 1.25rem; }
.wordmark-sub.xs { font-size: 0.56rem; letter-spacing: 0.30em; opacity: 0.9; }

.baseline {
  font-family: var(--serif); font-style: italic;
  color: #dfe9d6; font-size: 1.02rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  margin-top: 8px;
}
.baseline.sm { font-size: 0.86rem; margin-top: 5px; }

/* ============================ surfaces ============================ */

.panel {
  background: linear-gradient(165deg, var(--glass-1), var(--glass-2) 60%, var(--glass-3));
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2), var(--bevel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.panel.tight { padding: 12px; }
.panel.glow { border-color: rgba(127, 208, 127, 0.42); box-shadow: var(--shadow-2), var(--glow-moss); }
.panel.plain { background: rgba(9, 26, 19, 0.72); }

.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(238,241,230,0.16), transparent); margin: 14px 0; }

/* Panneau de bois grave : entetes de section facon pancarte. */
.wood-sign {
  display: block;
  margin: -4px auto 14px;
  padding: 12px 26px;
  max-width: 92%;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  color: #2e1c0c;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,0.06) 0 3px, transparent 3px 9px),
    linear-gradient(178deg, #d8b57c, var(--wood-1) 45%, var(--wood-2));
  border-radius: 8px / 22px;
  border: 1px solid rgba(80, 50, 20, 0.55);
  box-shadow: var(--shadow-2), inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -3px 6px rgba(80,45,15,0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.30);
}

/* Petite note manuscrite sur bois clair. */
.wood-note {
  display: inline-block;
  padding: 12px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--wood-ink);
  background: linear-gradient(172deg, #e5cfa4, #c9a874 60%, #b08d5c);
  border-radius: 6px / 14px;
  border: 1px solid rgba(90, 60, 25, 0.45);
  box-shadow: var(--shadow-2), inset 0 2px 0 rgba(255,255,255,0.42);
  transform: rotate(-1.6deg);
}
.wood-note.small { font-size: 0.76rem; padding: 9px 12px; }
.wood-note.wide { display: block; text-align: center; margin: 18px 6px 4px; transform: rotate(-0.6deg); }

/* Parchemin : descriptions de mission. */
.parchment {
  padding: 16px 18px;
  border-radius: 10px;
  color: #3a2a13;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(255,255,255,0.28), transparent 60%),
    linear-gradient(168deg, #ddc79b, #c3a976 55%, #ab8f60);
  border: 1px solid rgba(90, 62, 28, 0.42);
  box-shadow: var(--shadow-2), inset 0 2px 0 rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.parchment h3 { color: #4b6b34; font-size: 0.94rem; margin-bottom: 6px; }
.parchment p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.parchment .quote { font-family: var(--serif); font-style: italic; font-size: 0.84rem; color: #5a4522; margin-top: 12px; }

/* ============================ boutons ============================ */

.btn {
  appearance: none;
  border: 1px solid rgba(168, 224, 160, 0.22);
  background: linear-gradient(180deg, rgba(52, 92, 62, 0.92), rgba(20, 46, 32, 0.94));
  color: var(--parchment);
  font: inherit;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-1), var(--bevel);
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}
.btn:active { transform: translateY(2px) scale(0.985); filter: brightness(0.94); }
.btn:disabled { opacity: 0.42; pointer-events: none; }
.btn svg { width: 20px; height: 20px; }

.btn.primary {
  background: linear-gradient(180deg, #4f9b5b, #2c6b3f 55%, #1c4a2c);
  border-color: rgba(160, 232, 168, 0.42);
  box-shadow: var(--shadow-2), 0 6px 26px rgba(60, 150, 80, 0.32), inset 0 1px 0 rgba(255,255,255,0.30);
  color: #f2fbef;
}
.btn.gold {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #2a1e08;
  border-color: rgba(226, 201, 141, 0.6);
  box-shadow: var(--shadow-2), var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn.outline { background: rgba(238, 241, 230, 0.04); border-color: rgba(214, 231, 210, 0.28); }
.btn.danger { background: linear-gradient(180deg, #a8483a, #6f2c23); color: #fbe9e4; }
.btn.wide { width: 100%; }
.btn.xl { min-height: 62px; font-size: 1.1rem; font-family: var(--serif); letter-spacing: 0.01em; }
.btn.sm { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; }
.btn .btn-ic { display: grid; place-items: center; flex: none; }
.btn .btn-ic.ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(214, 240, 210, 0.55);
  background: rgba(255,255,255,0.06);
}
.btn.xl .grow { text-align: left; }

/* bouton rond d'entete */
.round-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(30, 62, 44, 0.88), rgba(12, 30, 22, 0.92));
  border: var(--line);
  box-shadow: var(--shadow-1), var(--bevel);
  color: var(--parchment);
  cursor: pointer;
  position: relative;
  transition: transform 0.12s var(--ease);
}
.round-btn:active { transform: scale(0.92); }
.round-btn svg { width: 20px; height: 20px; }

/* bouton pilule d'entete */
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font: inherit; font-size: 0.86rem; font-weight: 700;
  color: var(--parchment);
  background: linear-gradient(180deg, rgba(30, 62, 44, 0.88), rgba(12, 30, 22, 0.92));
  border: var(--line);
  box-shadow: var(--shadow-1), var(--bevel);
  cursor: pointer;
}
.pill-btn svg { width: 17px; height: 17px; opacity: 0.9; }
.pill-btn .pill-arrow svg { width: 14px; height: 14px; opacity: 0.6; }

/* ============================ champs ============================ */

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parch-faint); font-weight: 800;
}

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--parchment);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(214, 231, 210, 0.18);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.40);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-user-select: text;
  user-select: text;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(127, 208, 127, 0.55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 3px rgba(110, 200, 120, 0.16);
}
textarea { resize: vertical; min-height: 78px; }
::placeholder { color: var(--parch-faint); }

.code-input {
  text-align: center; letter-spacing: 0.5em; text-indent: 0.5em;
  font-size: 1.9rem; font-weight: 800; padding: 16px 10px; text-transform: uppercase;
}

/* ============================ chips ============================ */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  background: rgba(238, 241, 230, 0.07);
  border: 1px solid rgba(238, 241, 230, 0.10);
  color: var(--parch-dim);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip.moss { background: rgba(110,200,120,0.16); border-color: rgba(110,200,120,0.35); color: var(--moss); }
.chip.gold { background: rgba(226,201,141,0.15); border-color: rgba(226,201,141,0.35); color: var(--gold); }
.chip.rot  { background: rgba(217,105,92,0.16); border-color: rgba(217,105,92,0.35); color: #eda093; }

/* badges d'etat des cartes claires */
.badge {
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 800; white-space: nowrap;
}
.badge.current  { background: #d7e6ea; color: #2c4a54; }
.badge.todo     { background: #e3e2d8; color: #55584c; }
.badge.done     { background: #cfeccd; color: #2c6234; }
.badge.near     { background: #d5e7f2; color: #2b5068; }

/* ============================ layout jeu ============================ */

.screen.full { position: absolute; inset: 0; display: none; }
.screen.full.active { display: block; animation: fadeIn 0.4s var(--ease); }
.scroller {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) / var(--k-y, 1) + 18px) 16px calc(28px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  max-width: 560px; margin: 0 auto;
}
.scroller.narrow { max-width: 460px; }

.shell {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "main" "nav";
}

.topbar {
  grid-area: head;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) / var(--k-y, 1) + 8px) 12px 10px;
  background: linear-gradient(180deg, rgba(7, 22, 15, 0.95), rgba(7, 22, 15, 0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--line-soft);
  min-height: var(--header-h);
}
.topbar .tb-brand { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.topbar .tb-brand.center { flex: 1; align-items: center; }
.topbar .tb-title { height: 34px; width: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.topbar.sub { justify-content: space-between; }

.timer-pill {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 38, 26, 0.92), rgba(8, 22, 15, 0.94));
  border: 1px solid rgba(226, 201, 141, 0.22);
  box-shadow: var(--shadow-1), var(--bevel);
}
.timer-pill svg { width: 20px; height: 20px; color: var(--gold); }
.timer-pill .tp-lab { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parch-faint); }
.timer-pill .tp-val { font-size: 1.06rem; font-weight: 800; color: var(--gold); letter-spacing: 0.02em; line-height: 1.15; }
.timer-pill.warn .tp-val { color: var(--ember); }
.timer-pill.crit { border-color: rgba(217,105,92,0.5); }
.timer-pill.crit .tp-val { color: #f0907c; animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.42; } }

main { grid-area: main; position: relative; overflow: hidden; }
.view {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  display: none;
  animation: viewIn 0.3s var(--ease);
}
.view.active { display: block; }
.view.nopad { padding: 0; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------- barre d'onglets -------------------------- */

.tabbar {
  grid-area: nav;
  display: grid; grid-template-columns: repeat(6, 1fr);
  align-items: stretch; gap: 2px;
  padding: 7px 6px calc(6px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  background: linear-gradient(0deg, rgba(5, 16, 11, 0.98), rgba(10, 28, 19, 0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: var(--line-soft);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
  min-height: var(--nav-h);
}
.tab {
  border: 0; background: none;
  color: var(--parch-faint);
  font: inherit; font-size: 0.6rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 1px;
  border-radius: 14px;
  cursor: pointer; position: relative;
  transition: color 0.2s, background 0.2s;
}
.tab svg { width: 24px; height: 24px; transition: transform 0.22s var(--ease); }
.tab.on {
  color: var(--moss);
  background: linear-gradient(180deg, rgba(70, 150, 90, 0.30), rgba(30, 80, 48, 0.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.tab.on svg { filter: drop-shadow(0 0 8px rgba(110,200,120,0.55)); }
.tab:active svg { transform: scale(0.9); }
.badge-dot {
  position: absolute; top: 7px; right: 50%; margin-right: -16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rot); box-shadow: 0 0 8px var(--rot);
  border: 1.5px solid var(--ink-800);
}

/* ============================ SPLASH ============================ */

.splash-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) / var(--k-y, 1) + var(--stage-h, 912) * 1px * 0.04) 20px calc(env(safe-area-inset-bottom, 0px) / var(--k-y, 1) + 16px);
  text-align: center;
}
.splash-logo { width: min(66%, 262px); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.75)); }
#screen-splash .wordmark-sub { font-size: 1.2rem; }
#screen-splash .wood-note { margin-top: calc(var(--stage-h, 912) * 1px * 0.06); align-self: flex-start; margin-left: 4px; }
.splash-foot { margin-top: auto; width: 100%; max-width: 380px; }
.splash-label { font-size: 0.94rem; color: #e6efdd; text-shadow: 0 2px 6px rgba(0,0,0,0.8); margin-bottom: 10px; }
.load-track {
  height: 18px; border-radius: 999px;
  background: rgba(4, 14, 9, 0.72);
  border: 1px solid rgba(150, 220, 150, 0.45);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 0 20px rgba(110, 200, 120, 0.25);
  padding: 3px; overflow: hidden;
}
.load-fill {
  height: 100%; width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4d9a52, #8fd97f 70%, #b6ec9d);
  box-shadow: 0 0 14px rgba(140, 230, 140, 0.7);
  transition: width 0.35s linear;
}
.splash-tags {
  margin-top: 12px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #cfe0c4;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.splash-hint {
  margin-top: 22px; font-family: var(--serif); font-style: italic;
  font-size: 0.86rem; color: #d8e4cd; text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* ============================ AVERTISSEMENT ============================ */

.brand-head { text-align: center; margin-bottom: 16px; }
.brand-title { width: min(64%, 236px); filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7)); display: block; margin: 0 auto; }
.consent-panel { padding: 18px 14px 16px; }

.rule {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  border: var(--line-soft);
  box-shadow: var(--bevel);
  margin-bottom: 10px;
}
.rule.flat { background: rgba(0, 0, 0, 0.20); }
.rule-ic {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(127, 208, 127, 0.55);
  background: rgba(20, 50, 34, 0.7);
  color: var(--moss);
  box-shadow: 0 0 16px rgba(110, 200, 120, 0.20);
}
.rule-ic.rot { border-color: rgba(217, 105, 92, 0.7); color: #e88a7c; box-shadow: 0 0 16px rgba(217,105,92,0.18); }
.rule-ic.bare { border: 0; background: none; box-shadow: none; color: var(--parch-dim); width: 40px; }
.rule-ic svg { width: 26px; height: 26px; }
.rule-txt h3 { color: var(--moss); font-size: 0.94rem; letter-spacing: 0.04em; margin-bottom: 4px; }
.rule-txt h3.warn { color: var(--ember); }
.rule-txt h3.plain { color: var(--parchment); }
.rule-txt p { margin: 0; font-size: 0.79rem; color: var(--parch-dim); line-height: 1.42; }

/* ============================ ACCUEIL ============================ */

.home-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.home-hero { text-align: center; margin: 2px 0 16px; }
.home-logo { width: min(62%, 244px); filter: drop-shadow(0 10px 24px rgba(0,0,0,0.7)); }

.story-panel { padding: 14px; }
.story-row { display: flex; gap: 12px; align-items: flex-start; }
.story-panel .story-txt { flex: 1; min-width: 0; }
.story-head { font-weight: 750; font-size: 0.9rem; margin-bottom: 6px; line-height: 1.3; }
.story-panel p { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.story-stone {
  width: 72px; height: 72px; flex: none;
  background: url("../assets/items/it-10.webp") center/contain no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}
.story-panel .wood-note { display: block; width: max-content; margin: 10px 0 0 auto; }

.stat-row { display: grid; grid-template-columns: 1fr 0.8fr 1.2fr; gap: 8px; margin: 12px 0; align-items: stretch; }
.stat-card {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line);
  box-shadow: var(--shadow-1), var(--bevel);
  min-width: 0;
}
.stat-card svg { width: 21px; height: 21px; color: var(--parch-dim); flex: none; }
.stat-card > div { min-width: 0; }
.stat-card .stat-ic.gold svg { color: var(--gold); }
.stat-lab { font-size: 0.58rem; color: var(--parch-faint); font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-val { font-weight: 800; font-size: 0.94rem; color: var(--gold); white-space: nowrap; }
.stat-val.sm { font-size: 0.72rem; color: var(--parchment); line-height: 1.2; white-space: normal; }
.stat-sub { font-size: 0.62rem; color: var(--parch-faint); }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.quick {
  border: var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  box-shadow: var(--shadow-1), var(--bevel);
  color: var(--parchment); font: inherit;
  padding: 13px 6px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.quick:active { transform: scale(0.95); }
.quick svg { width: 28px; height: 28px; color: var(--parch-dim); }
.quick b { font-size: 0.82rem; font-weight: 750; }
.quick i { font-style: normal; font-size: 0.62rem; color: var(--parch-faint); text-align: center; line-height: 1.25; }

.help-strip {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 12px; text-align: left;
  color: var(--parchment); font: inherit; cursor: pointer;
  padding: 13px 15px;
}
.help-strip .help-ic svg { width: 26px; height: 26px; color: var(--parch-dim); }
.help-strip b { display: block; font-size: 0.88rem; font-weight: 750; }
.help-strip i { font-style: normal; font-size: 0.74rem; color: var(--parch-faint); }
.help-strip .pill-arrow svg { width: 16px; height: 16px; opacity: 0.5; }

/* ============================ CARTE ============================ */

.map-stage { position: absolute; inset: 0; overflow: hidden; background: #16211a; }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.map-hud { position: absolute; inset: 0; pointer-events: none; }
.map-hud > * { pointer-events: auto; }

.map-tools { position: absolute; right: 12px; top: 14px; display: flex; flex-direction: column; gap: 9px; }
.map-tools .round-btn { background: linear-gradient(180deg, rgba(10, 26, 18, 0.90), rgba(6, 18, 12, 0.94)); }

.map-place {
  position: absolute; right: 14px; top: 226px;
  text-align: right; font-family: var(--serif);
  font-size: 0.92rem; color: #e8f0e2; line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* Fiche de mission en bas de carte. */
.target-card {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; gap: 12px; align-items: stretch;
  padding: 11px;
  cursor: pointer;
}
.target-card .tc-photo {
  width: 92px; flex: none; border-radius: 12px;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
  border: var(--line-soft);
}
.target-card .tc-body { flex: 1; min-width: 0; }
.target-card .tc-idx { font-family: var(--serif); font-size: 1.02rem; color: var(--moss); }
.target-card .tc-title { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; margin: 1px 0 6px; }
.target-card .tc-brief { font-size: 0.78rem; color: var(--parch-dim); line-height: 1.35; }
.target-card .tc-dist {
  position: absolute; right: 11px; top: 11px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(60, 130, 80, 0.35);
  border: 1px solid rgba(127, 208, 127, 0.35);
  font-size: 0.76rem; font-weight: 750; color: #d9f2d5;
}
.target-card .tc-dist svg { width: 13px; height: 13px; }
.target-card .tc-arrow { align-self: center; color: var(--parch-faint); }
.target-card .tc-facts {
  display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap;
  padding-top: 9px; border-top: var(--line-soft);
}
.fact { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--parch-dim); font-weight: 650; }
.fact svg { width: 14px; height: 14px; color: var(--moss); }

/* boussole compacte */
.compass-rose {
  position: absolute; left: 12px; bottom: 196px;
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(24,52,36,0.95), rgba(6,18,12,0.95));
  border: var(--line);
  box-shadow: var(--shadow-3), var(--bevel);
  display: grid; place-items: center;
}
/* Pas de transform-origin ici : le rotate() SVG porte deja son centre. */
.compass-rose .needle { transition: transform 0.16s linear; }
.compass-rose .dist {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font-size: 0.66rem; font-weight: 800; color: var(--gold);
}

/* ============================ LISTE DES MISSIONS ============================ */

.page-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 12px;
}
.page-title h1 { font-size: 1.6rem; color: #f2f6ec; text-shadow: 0 3px 10px rgba(0,0,0,0.7); }
.page-title .leaf { font-size: 1.1rem; }

.head-stats { display: grid; grid-template-columns: 1.05fr 0.8fr 1.15fr; gap: 8px; margin-bottom: 12px; }
.hs-card {
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line); box-shadow: var(--shadow-1), var(--bevel);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.hs-card svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.hs-card > div { min-width: 0; }
.hs-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parch-faint); font-weight: 800; }
.hs-val { font-size: 0.96rem; font-weight: 800; color: var(--gold); letter-spacing: 0.04em; white-space: nowrap; }
.hs-val.code { font-family: var(--serif); font-size: 1.24rem; letter-spacing: 0.1em; }
.hs-card .avatar { width: 26px; height: 26px; border-radius: 50%; }

.progress-panel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.progress-panel .pp-sigil {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: url("../assets/items/it-09.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(100, 200, 220, 0.5));
}
.progress-panel .pp-lines { flex: none; font-size: 0.82rem; font-weight: 650; }
.progress-panel .pp-lines span { display: block; color: var(--parch-dim); }
.progress-track {
  flex: 1; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3f8f6a, #63d7c0 70%, #8ff0dd);
  box-shadow: 0 0 12px rgba(100, 220, 200, 0.55);
  transition: width 0.7s var(--ease);
}
.progress-panel .pp-pct { font-weight: 800; color: #86e6d2; font-size: 0.98rem; }

.filter-row { display: flex; gap: 7px; margin-bottom: 12px; align-items: center; }
.filter {
  flex: 1; padding: 9px 6px; border-radius: 999px;
  border: 1px solid rgba(214, 231, 210, 0.20);
  background: rgba(9, 26, 19, 0.72);
  color: var(--parch-dim); font: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.filter.on {
  background: linear-gradient(180deg, #4f9b5b, #2b6a3e);
  color: #f2fbef; border-color: rgba(160, 232, 168, 0.5);
  box-shadow: 0 4px 16px rgba(60, 150, 80, 0.35);
}
.filter-row .round-btn { width: 38px; height: 38px; }
.filter-row .round-btn svg { width: 17px; height: 17px; }

/* carte claire de mission */
.mcard {
  display: flex; align-items: stretch; gap: 12px;
  background: linear-gradient(160deg, var(--card-light), var(--card-light-2));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow-2);
  padding: 9px;
  margin-bottom: 11px;
  color: var(--ink-card);
  cursor: pointer;
  animation: viewIn 0.35s var(--ease) backwards;
  transition: transform 0.15s var(--ease);
}
.mcard:active { transform: scale(0.985); }
.mcard.locked { opacity: 0.72; }
.mcard .m-photo {
  width: 78px; flex: none; border-radius: 12px;
  background: #cdd4c4 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}
.mcard .m-body { flex: 1; min-width: 0; padding: 3px 0; }
.mcard .m-head { display: flex; align-items: center; gap: 9px; }
.mcard .m-num {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.6px solid #6faa74; color: #34693c;
  font-weight: 800; font-size: 0.8rem;
  background: #fff;
}
.mcard.done .m-num { background: #6faa74; color: #fff; border-color: #6faa74; }
.mcard .m-title { font-family: var(--serif); font-size: 0.92rem; font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .m-meta { display: flex; gap: 14px; margin: 7px 0 5px; font-size: 0.78rem; color: #4a5a4d; font-weight: 650; }
.mcard .m-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mcard .m-meta svg { width: 13px; height: 13px; color: #5d7361; }
.mcard .m-diff { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; }
.mcard .m-diff svg { width: 13px; height: 13px; }
.m-diff.easy { color: #2f8a45; }
.m-diff.medium { color: #b8862c; }
.m-diff.hard { color: #c4483a; }
.mcard .m-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  gap: 8px; padding: 3px 4px 3px 0; flex: none; }
.mcard .m-item { display: flex; align-items: center; gap: 3px; font-size: 0.74rem; font-weight: 800; color: #4a5a4d; }
.mcard .m-item img { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28)); }

/* ============================ FICHE MISSION ============================ */

.mission-band {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 12px;
}
.mission-band .mb-leaf {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(60, 130, 80, 0.28);
  border: 1px solid rgba(127, 208, 127, 0.3);
  color: var(--moss);
}
.mission-band .mb-idx { font-size: 0.94rem; color: var(--moss); font-weight: 750; }
.mission-band .mb-title { font-family: var(--serif); font-size: 1.28rem; font-weight: 700; }
.mission-band .mb-diff {
  text-align: center; padding: 6px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.28); border: var(--line-soft);
}
.mission-band .mb-diff .lab { font-size: 0.6rem; color: var(--parch-faint); font-weight: 700; }
.mission-band .mb-diff .dots { font-size: 0.9rem; letter-spacing: 2px; }

.mission-split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 12px; }
.mission-photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: var(--line-soft); box-shadow: var(--shadow-2);
  background: rgba(0,0,0,0.35) center/cover no-repeat;
  min-height: 210px;
}
.mission-photo .zoom {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6, 18, 12, 0.72); border: var(--line-soft);
  color: var(--parchment);
}
.mission-photo .zoom svg { width: 16px; height: 16px; }

.mini-nav { display: flex; flex-direction: column; gap: 9px; }
.mini-dist { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; }
.mini-dist svg { width: 18px; height: 18px; color: var(--parch-dim); flex: none; }
.mini-dist .md-val { font-family: var(--serif); font-size: 1.06rem; font-weight: 700; }
.mini-dist .md-sub { font-size: 0.74rem; color: var(--parch-faint); }
.mini-dist .md-arrow { margin-left: auto; color: var(--moss); }
.mini-map { flex: 1; min-height: 120px; border-radius: var(--radius); overflow: hidden; border: var(--line-soft); position: relative; }
.mini-map canvas { width: 100%; height: 100%; display: block; }
.mini-plan {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; width: 100%;
  color: var(--parchment); font: inherit; font-weight: 700; font-size: 0.86rem;
  cursor: pointer;
}
.mini-plan svg { width: 18px; height: 18px; color: var(--moss); }
.mini-plan .pill-arrow { margin-left: auto; }

.rewards { padding: 14px; margin-bottom: 12px; }
.rewards h3 { color: var(--moss); font-family: var(--serif); font-size: 1.02rem; margin-bottom: 3px; }
.rewards .r-sub { font-size: 0.8rem; color: var(--parch-dim); margin-bottom: 12px; }
.rewards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px; align-items: center; }
.reward { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reward img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.reward .r-name { font-size: 0.78rem; font-weight: 750; line-height: 1.2; }
.reward .r-sub2 { font-size: 0.68rem; color: var(--parch-faint); }
.reward .r-pts { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--moss-soft); flex: none; }

/* ============================ SCANNER / CODE ============================ */

.scan-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scan-head { margin: 12px 12px 0; display: flex; gap: 12px; align-items: center; padding: 13px 15px; }
.scan-head .sh-ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(60, 130, 80, 0.22); border: 1px solid rgba(127, 208, 127, 0.3);
  color: var(--moss);
}
.scan-head b { display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 700; }
.scan-head i { font-style: normal; font-size: 0.8rem; color: var(--parch-dim); line-height: 1.35; }

.scan-stage { position: relative; flex: 1; min-height: 0; margin: 12px 0 0; overflow: hidden; background: #06120c; }
.scan-stage video, .scan-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-stage .cam-still { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0.55; }
.cam-frame { position: absolute; inset: 16% 14%; pointer-events: none; }
.cam-frame i {
  position: absolute; width: 42px; height: 42px;
  border: 4px solid #9ff09a; border-radius: 12px;
  filter: drop-shadow(0 0 8px rgba(140, 240, 140, 0.7));
}
.cam-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cam-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cam-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cam-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.cam-scan {
  position: absolute; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, transparent, #9ff09a, transparent);
  box-shadow: 0 0 16px #9ff09a;
  animation: scanline 2.6s ease-in-out infinite;
}
@keyframes scanline { 0%,100% { top: 20%; } 50% { top: 78%; } }

.scan-side { position: absolute; right: 12px; top: 32%; display: flex; flex-direction: column; gap: 16px; }
.scan-side button {
  border: 0; background: none; color: #eef1e6; font: inherit; font-size: 0.68rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
}
.scan-side .sb-ic {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6, 16, 11, 0.78);
  border: 1px solid rgba(238,241,230,0.16);
  box-shadow: var(--shadow-2);
}
.scan-side svg { width: 21px; height: 21px; }

.scan-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(6, 16, 11, 0.78);
  border: 1px solid rgba(238,241,230,0.14);
  font-size: 0.84rem; white-space: nowrap;
  box-shadow: var(--shadow-2);
}

.detect-card {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; gap: 12px; align-items: center; padding: 11px;
  cursor: pointer;
}
.detect-card .d-photo {
  width: 74px; height: 60px; flex: none; border-radius: 10px; position: relative;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
}
.detect-card .d-check {
  position: absolute; right: -6px; bottom: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #4f9b5b; color: #fff; border: 2px solid var(--ink-800);
}
.detect-card .d-check svg { width: 13px; height: 13px; }
.detect-card .d-lab { color: var(--moss); font-size: 0.82rem; font-weight: 700; }
.detect-card .d-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; }
.detect-card .d-sub { font-size: 0.76rem; color: var(--parch-faint); }

/* saisie du mot */
.code-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.code-strip {
  margin: 12px 12px 0; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
}
.code-strip .cs-leaf { color: var(--moss); }
.code-strip .cs-idx { color: var(--moss); font-size: 0.92rem; font-weight: 750; }
.code-strip .cs-title { font-family: var(--serif); font-size: 1.06rem; font-weight: 700; }
.code-strip .cs-place { text-align: right; font-size: 0.8rem; }
.code-strip .cs-place span { display: block; font-size: 0.66rem; color: var(--parch-faint); }
.code-photo { flex: 1; min-height: 130px; margin-top: 12px; background: center/cover no-repeat #10201a; }
.code-panel { margin: -22px 12px 12px; position: relative; padding: 18px 16px; }
.code-panel h2 { text-align: center; font-size: 1.16rem; }
.code-panel .cp-sub { text-align: center; font-size: 0.8rem; color: var(--parch-faint); margin: 4px 0 14px; }
.code-wrap { position: relative; }
.code-wrap input { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.14rem; font-weight: 700; padding-right: 46px; }
.code-wrap .clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--parch-faint); cursor: pointer; padding: 4px;
}
.code-wrap .clear svg { width: 18px; height: 18px; }

.verdict {
  margin-top: 14px; padding: 16px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid rgba(127, 208, 127, 0.45);
  background: linear-gradient(170deg, rgba(48, 106, 66, 0.42), rgba(16, 42, 28, 0.55));
  box-shadow: var(--glow-moss);
  position: relative; overflow: hidden;
}
.verdict.bad { border-color: rgba(217,105,92,0.45); background: linear-gradient(170deg, rgba(120,48,40,0.42), rgba(42,16,14,0.55)); box-shadow: none; }
.verdict .v-ic {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid var(--moss); color: var(--moss);
}
.verdict.bad .v-ic { border-color: var(--rot); color: var(--rot); }
.verdict .v-ic svg { width: 22px; height: 22px; }
.verdict h3 { font-family: var(--serif); font-size: 1.22rem; color: var(--moss); margin-top: 8px; }
.verdict.bad h3 { color: #f0968a; }
.verdict p { margin: 0; font-size: 0.84rem; color: var(--parch-dim); }
.verdict .v-leaf { position: absolute; font-size: 2rem; opacity: 0.35; top: 16px; }
.verdict .v-leaf.l { left: 14px; } .verdict .v-leaf.r { right: 14px; }

.loot-line { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 16px 0 4px; }
.loot-line img { width: 62px; height: 62px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.loot-line div { font-size: 0.86rem; color: var(--parch-dim); }

/* ============================ INDICES ============================ */

.purse-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.purse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line); box-shadow: var(--shadow-1), var(--bevel);
}
.purse .p-val { font-weight: 800; font-size: 1.05rem; }
.purse .p-lab { font-size: 0.72rem; color: var(--parch-dim); }
.purse .coin { width: 26px; height: 26px; }

.hint-head { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 14px; }
.hint-head .hh-photo { width: 84px; height: 72px; flex: none; border-radius: 12px; background: rgba(0,0,0,0.35) center/cover no-repeat; }
.hint-head .hh-title { font-family: var(--serif); font-size: 1.16rem; }
.hint-head .hh-title b { color: var(--moss); font-weight: 700; }
.hint-head p { margin: 8px 0 0; font-size: 0.84rem; color: var(--parch-dim); }

.hint-sep { text-align: center; font-family: var(--serif); font-size: 1.02rem; color: #dbe7d3; margin: 4px 0 12px; }

.hint-card {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 10px; margin-bottom: 11px;
  position: relative;
}
.hint-card.best { border-color: rgba(100, 200, 224, 0.45); box-shadow: var(--shadow-2), 0 0 22px rgba(100,200,224,0.20); }
.hint-card .hc-ring {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(127, 208, 127, 0.45);
  background: rgba(20, 50, 34, 0.6);
  color: var(--moss);
}
.hint-card.best .hc-ring { border-color: rgba(100,200,224,0.6); color: var(--gem); }
.hint-card .hc-thumb { width: 64px; height: 56px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.4) center/cover no-repeat; border: var(--line-soft); }
.hint-card .hc-txt { flex: 1; min-width: 0; }
.hint-card .hc-name { font-family: var(--serif); font-size: 1.0rem; color: var(--moss); font-weight: 700; line-height: 1.15; }
.hint-card.best .hc-name { color: #9fdff0; }
.hint-card .hc-desc { font-size: 0.76rem; color: var(--parch-dim); margin-top: 4px; line-height: 1.35; }
.hint-card .hc-buy { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.hint-card .hc-price { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 0.92rem; }
.hint-card .hc-price small { font-size: 0.62rem; color: var(--parch-faint); font-weight: 700; display: block; }
.hint-card .flag {
  position: absolute; left: 12px; top: -8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #2b7fa0, #1a5470); color: #dff2fb;
  border: 1px solid rgba(120, 210, 240, 0.4);
}

.note-strip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; margin-bottom: 9px;
  font-size: 0.78rem; color: var(--parch-dim);
}
.note-strip svg { width: 19px; height: 19px; flex: none; color: var(--parch-faint); }
.note-strip img { width: 34px; height: 34px; margin-left: auto; }

/* ============================ CHAT ============================ */

.chat-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-title { padding: 10px 14px 2px; }
.chat-title h1 { font-size: 1.4rem; }

.chat-tabs { display: flex; gap: 7px; padding: 10px 12px 8px; }
.chat-tabs .seg {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(214, 231, 210, 0.18);
  background: rgba(9, 26, 19, 0.72);
  color: var(--parch-dim);
  font: inherit; font-weight: 700; font-size: 0.72rem;
  padding: 10px 4px; border-radius: 999px; cursor: pointer;
  position: relative; white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.chat-tabs .seg svg { width: 15px; height: 15px; flex: none; }
.chat-tabs .seg.on {
  background: linear-gradient(180deg, rgba(70, 150, 95, 0.45), rgba(28, 74, 46, 0.55));
  color: #eaf7e6; border-color: rgba(160, 232, 168, 0.42);
  box-shadow: var(--bevel);
}
.chat-tabs .seg .n {
  position: absolute; top: -4px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--rot); color: #fff; font-size: 0.62rem; font-weight: 800;
  display: grid; place-items: center;
}

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 12px 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg { display: flex; gap: 9px; align-items: flex-start; animation: bubbleIn 0.3s var(--ease); }
.msg .avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.msg .m-col { min-width: 0; max-width: 82%; }
.msg .m-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 0.72rem; }
.msg .m-who { font-weight: 800; color: #dbe7d3; }
.msg .m-when { color: var(--parch-faint); }
.msg .m-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px; font-size: 0.6rem; font-weight: 800;
  background: rgba(226,201,141,0.16); color: var(--gold); border: 1px solid rgba(226,201,141,0.3);
}
.bubble {
  padding: 10px 14px;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(170deg, rgba(28, 60, 43, 0.92), rgba(15, 36, 26, 0.94));
  border: var(--line-soft);
  box-shadow: var(--shadow-1);
  -webkit-user-select: text; user-select: text;
  word-break: break-word;
  font-size: 0.9rem;
}
@keyframes bubbleIn { from { opacity:0; transform: translateY(8px) scale(0.97); } to { opacity:1; transform:none; } }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .m-col { align-items: flex-end; display: flex; flex-direction: column; }
.msg.mine .m-top { flex-direction: row-reverse; }
.msg.mine .bubble {
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(170deg, rgba(58, 104, 72, 0.95), rgba(32, 68, 46, 0.95));
  border-color: rgba(160, 232, 168, 0.24);
}
.msg.admin .bubble {
  background: linear-gradient(170deg, rgba(38, 82, 54, 0.92), rgba(20, 48, 32, 0.94));
  border-color: rgba(127, 208, 127, 0.35);
}
.msg .m-ticks { color: var(--moss); font-size: 0.72rem; margin-left: 6px; }
.reactions { display: flex; gap: 6px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(9, 26, 19, 0.85); border: var(--line-soft);
  font-size: 0.72rem; font-weight: 700; color: var(--parch-dim);
  cursor: pointer;
}
.msg-card {
  display: flex; gap: 10px; align-items: center;
  padding: 9px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(28, 60, 43, 0.92), rgba(15, 36, 26, 0.94));
  border: var(--line-soft); box-shadow: var(--shadow-1);
}
.msg-card .mc-photo { width: 62px; height: 52px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.4) center/cover no-repeat; }
.msg-card b { display: block; font-size: 0.88rem; }
.msg-card i { font-style: normal; font-size: 0.76rem; color: var(--parch-dim); }

.chat-form {
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  border-top: var(--line-soft);
}
.chat-form input { flex: 1; padding: 12px 16px; border-radius: 999px; }
.chat-form .round-btn.send { background: linear-gradient(180deg, #4f9b5b, #2b6a3e); border-color: rgba(160,232,168,0.45); }

/* Panneau de chat : masque en portrait, dock lateral en paysage. */
.chat-dock {
  display: none;
  flex-direction: column;
  border-left: var(--line-soft);
  background: linear-gradient(180deg, rgba(12, 32, 22, 0.80), rgba(6, 18, 12, 0.90));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-right: calc(env(safe-area-inset-right, 0px) / var(--k, 1));
  overflow: hidden;
}

/* ============================ CLASSEMENT ============================ */

.board-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.board-head h1 { font-size: 1.7rem; }
.board-head .bh-sub { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--parch-dim); }
.board-head .bh-sub svg { width: 15px; height: 15px; }
.board-live { margin-left: auto; text-align: right; }
.board-live .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 8px var(--moss); margin-right: 5px; }
.board-live small { font-size: 0.7rem; color: var(--parch-dim); }
.board-live .quip { font-family: var(--serif); font-style: italic; font-size: 0.78rem; color: var(--moss-soft); margin-top: 4px; }

.board-cols {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 50px 58px 62px;
  gap: 6px; padding: 0 10px 7px;
  font-size: 0.68rem; font-weight: 800; color: var(--parch-faint);
  letter-spacing: 0.04em;
}
.board-cols span:nth-child(n+3) { text-align: center; }
.board-cols span:last-child { text-align: right; }

.rank-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 50px 58px 62px;
  gap: 6px; align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line-soft);
  box-shadow: var(--shadow-1), var(--bevel);
  margin-bottom: 8px;
  animation: viewIn 0.35s var(--ease) backwards;
}
.rank-row.p1 { background: linear-gradient(165deg, rgba(150, 118, 42, 0.55), rgba(58, 44, 14, 0.75)); border-color: rgba(226,201,141,0.42); }
.rank-row.p2 { background: linear-gradient(165deg, rgba(110, 122, 118, 0.45), rgba(36, 46, 42, 0.75)); border-color: rgba(210,220,215,0.3); }
.rank-row.p3 { background: linear-gradient(165deg, rgba(140, 92, 44, 0.45), rgba(52, 34, 16, 0.75)); border-color: rgba(200,140,90,0.32); }
.rank-row.me { box-shadow: var(--shadow-2), var(--glow-moss); border-color: rgba(127,208,127,0.5); }

.rank-num { display: grid; place-items: center; font-weight: 900; font-size: 1.0rem; color: var(--parch-dim); }
.rank-num .podium {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: #2a1e08;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rank-num .podium.p1 { background: linear-gradient(180deg, #f5dd9a, #c39a3e); }
.rank-num .podium.p2 { background: linear-gradient(180deg, #e4e9e5, #9aa39c); }
.rank-num .podium.p3 { background: linear-gradient(180deg, #e2ab74, #a56c36); }
.rank-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-team .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.rank-name { font-weight: 750; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-motto { font-family: var(--serif); font-style: italic; font-size: 0.7rem; color: var(--parch-faint); }
.rank-miss { text-align: center; }
.rank-miss .rm-val { font-size: 0.72rem; font-weight: 750; white-space: nowrap; }
.rank-miss .progress-track { height: 5px; margin-top: 4px; }
.rank-frags { display: flex; align-items: center; justify-content: center; gap: 2px; }
.rank-frags img { width: 17px; height: 17px; opacity: 0.9; }
.rank-frags .more { font-size: 0.68rem; font-weight: 800; color: var(--parch-dim); }
.rank-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.rank-score { font-weight: 850; font-size: 0.92rem; }
.rank-delta { font-size: 0.64rem; font-weight: 800; }
.rank-delta.up { color: var(--moss); } .rank-delta.down { color: #ef8a7a; } .rank-delta.flat { color: var(--parch-faint); }

.board-foot {
  display: flex; align-items: flex-end; gap: 10px;
  margin-top: 14px; padding: 14px 16px;
}
.board-foot .quote { flex: 1; font-family: var(--serif); font-style: italic; font-size: 0.84rem; color: #4a3620; }
.board-foot img { width: 74px; align-self: flex-end; }

/* ============================ INVENTAIRE ============================ */

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 11px; }
.inv-slot {
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px;
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line-soft);
  box-shadow: var(--shadow-1), var(--bevel), inset 0 -16px 28px rgba(0,0,0,0.30);
  text-align: center; position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.18s var(--ease);
}
.inv-slot.filled { border-color: rgba(226,201,141,0.28); }
.inv-slot.filled::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(226,201,141,0.18), transparent 62%);
}
.inv-slot:active { transform: scale(0.95); }
.inv-slot img { width: 52px; height: 52px; position: relative; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.inv-slot .nm { font-size: 0.66rem; font-weight: 700; line-height: 1.2; position: relative; }
.inv-slot.empty { opacity: 0.32; border-style: dashed; cursor: default; }
.inv-slot.empty svg { width: 26px; height: 26px; }
.inv-slot .sym {
  position: absolute; top: 6px; right: 8px;
  font-size: 0.8rem; font-weight: 900; color: var(--gold);
  text-shadow: 0 0 10px rgba(226,201,141,0.6);
}

/* ============================ avatars ============================ */

.avatar {
  width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none;
  box-shadow: var(--shadow-1), var(--bevel);
  border: 1px solid rgba(238,241,230,0.14);
  background: rgba(12, 30, 22, 0.8);
}
.avatar img, .avatar svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar.round { border-radius: 50%; }
.avatar.lg { width: 76px; height: 76px; border-radius: 22px; }

.avatar-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; max-height: 214px; overflow-y: auto; padding: 2px; }
.avatar-picker .avatar { width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; transition: transform 0.16s var(--ease), box-shadow 0.2s; }
.avatar-picker .avatar.sel { box-shadow: 0 0 0 2px var(--moss), var(--glow-moss); transform: translateY(-3px); }

/* ============================ overlays ============================ */

/* absolute (pas fixed) : le panneau vit dans #stage et suit sa mise a
   l'echelle, sinon il se dessinerait a la taille reelle de l'ecran pendant
   que le reste de l'UI est reduit au format du canevas. */
.sheet-bg {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(3, 10, 7, 0.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.24s var(--ease);
}
.sheet {
  width: 100%; max-width: 560px; max-height: calc(var(--stage-h, 912) * 1px * 0.88);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, rgba(24, 54, 40, 0.97), rgba(8, 22, 15, 0.98));
  border: var(--line); border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7);
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  animation: sheetUp 0.36s var(--ease);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet .grabber { width: 44px; height: 4px; border-radius: 99px; background: rgba(238,241,230,0.22); margin: -6px auto 14px; }

#toasts {
  position: absolute; z-index: 80;
  /* Sous la barre d'entete : le chrono reste lisible. */
  top: calc(env(safe-area-inset-top, 0px) / var(--k-y, 1) + var(--header-h) + 8px);
  left: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 15px; border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(30, 66, 46, 0.97), rgba(10, 28, 19, 0.97));
  border: var(--line);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(10px);
  animation: toastIn 0.34s var(--ease);
  display: flex; gap: 11px; align-items: flex-start;
}
.toast.success { border-color: rgba(127,208,127,0.45); box-shadow: var(--shadow-3), var(--glow-moss); }
.toast.alert { border-color: rgba(217,105,92,0.45); }
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.toast .t-title { font-weight: 800; font-size: 0.86rem; }
.toast .t-body { font-size: 0.8rem; color: var(--parch-dim); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut 0.3s var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* ============================ divers ============================ */

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.list-empty { padding: 40px 18px; text-align: center; color: var(--parch-faint); font-size: 0.88rem; }
.list-empty svg { width: 46px; height: 46px; opacity: 0.35; margin-bottom: 10px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(238,241,230,0.16); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.shake { animation: shake 0.42s var(--ease); }
@keyframes shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); }
  40%,60% { transform: translateX(7px); }
}

/* ---------------------- mode paysage : rail + chat ---------------------- */
/* La regle de base de .chat-dock est declaree plus haut : cet ordre compte,
   sinon le panneau de chat ne s'ouvre jamais en paysage. */

@media (orientation: landscape) and (max-height: 700px) {
  .shell {
    grid-template-rows: auto 1fr;
    grid-template-columns: var(--rail-w) 1fr var(--chat-w);
    grid-template-areas:
      "head head head"
      "nav  main dock";
  }
  .topbar { padding-top: calc(env(safe-area-inset-top, 0px) / var(--k-y, 1) + 6px); min-height: 52px; }
  .tabbar {
    grid-area: nav;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: start; gap: 6px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px) / var(--k-y, 1)) calc(8px + env(safe-area-inset-left, 0px) / var(--k, 1));
    border-top: 0; border-right: var(--line-soft);
    box-shadow: 8px 0 26px rgba(0,0,0,0.40);
    min-height: 0; overflow-y: auto;
  }
  .tab { padding: 9px 2px; font-size: 0.56rem; }
  .tab .badge-dot { top: 4px; right: 12px; margin-right: 0; }
  .chat-dock { grid-area: dock; display: flex; }
  .tab[data-view="chat"] { display: none; }
  #view-chat.view { display: none !important; }
  .mission-split { grid-template-columns: 1fr 1fr; }
  .sheet-bg { align-items: center; padding: 12px; }
  .sheet { border-radius: var(--radius-lg); border-bottom: var(--line); max-height: calc(var(--stage-h, 912) * 1px * 0.92); animation: viewIn 0.3s var(--ease); }
}

/* Ecrans etroits : la barre a 6 onglets doit rester lisible. */
@media (max-width: 360px) {
  .tab { font-size: 0.54rem; }
  .tab svg { width: 21px; height: 21px; }
  .quick i { display: none; }
}

/* --- Retouches de calage : ecrans etroits et vignettes sans photo --- */

.hint-card .flag svg { width: 11px; height: 11px; }

/* Une balise sans photo de decor garde une vignette vivante plutot qu'un aplat. */
.ph-none {
  background-image:
    radial-gradient(60% 60% at 50% 40%, rgba(140, 200, 140, 0.16), transparent 70%),
    linear-gradient(150deg, #33503a, #1a2c20) !important;
  background-size: cover;
  position: relative;
}
.ph-none::after {
  content: "";
  position: absolute; inset: 22%;
  background: url("../assets/items/it-01.webp") center/contain no-repeat;
  opacity: 0.22;
}
.mcard .m-photo.ph-none {
  background-image:
    radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(150deg, #b7c4ad, #8e9c88) !important;
}

.scan-manual {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 92px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.76rem; font-weight: 700;
  color: var(--moss-soft);
  text-decoration: underline; text-underline-offset: 3px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* ====================== clavier de mots du chat ====================== */

.word-deck {
  border-top: var(--line-soft);
  background: linear-gradient(180deg, rgba(10, 30, 20, 0.94), rgba(6, 18, 12, 0.96));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) / var(--k-y, 1));
  flex: none;
}
/* Poignee toujours visible : le clavier de mots reste replie par defaut pour
   laisser la place au fil de discussion, et se deroule a la demande. */
.word-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border: 0; background: none;
  color: var(--parch-dim); font: inherit; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.02em; text-align: left; cursor: pointer;
}
.word-toggle .ic { width: 16px; height: 16px; color: var(--gold); flex: none; }
.word-toggle .chev { width: 16px; height: 16px; margin-left: auto; color: var(--parch-faint); flex: none; transition: transform 0.2s var(--ease); }
.word-deck.open .word-toggle { color: var(--parchment); }
.word-deck.open .word-toggle .chev { transform: rotate(90deg); color: var(--moss); }
.word-body { max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease); }
.word-deck.open .word-body { max-height: 230px; }
.word-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px 8px; scrollbar-width: none; }
.word-tabs::-webkit-scrollbar { display: none; }
.word-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px; border-radius: 999px; flex: none;
  border: 1px solid rgba(214, 231, 210, 0.18);
  background: rgba(12, 34, 24, 0.85);
  color: var(--parch-dim);
  font: inherit; font-size: 0.7rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.word-tab svg { width: 14px; height: 14px; }
.word-tab.on {
  background: linear-gradient(180deg, #4f9b5b, #2b6a3e);
  color: #f2fbef; border-color: rgba(160, 232, 168, 0.5);
  box-shadow: 0 4px 14px rgba(60, 150, 80, 0.35);
}

.word-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 10px 10px; }
.word {
  border: 0; border-radius: 14px;
  padding: 13px 6px;
  font: inherit; font-size: 0.86rem; font-weight: 800;
  color: #10281c;
  cursor: pointer;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.13s var(--ease), filter 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.word:active { transform: scale(0.94); filter: brightness(0.94); }
.word.c0 { background: linear-gradient(180deg, #9fe6a2, #6cc978); }
.word.c1 { background: linear-gradient(180deg, #8fe3d0, #58bfae); }
.word.c2 { background: linear-gradient(180deg, #7fdcc9, #46b8a6); }
.word.c3 { background: linear-gradient(180deg, #a9e6ff, #6fc2e8); }
.word.c4 { background: linear-gradient(180deg, #ffb3ae, #ef8880); }
.word.c5 { background: linear-gradient(180deg, #cdb6f7, #a488e6); }

/* En paysage le dock est etroit : deux colonnes de mots suffisent. */
@media (orientation: landscape) and (max-height: 700px) {
  .word-grid { grid-template-columns: repeat(2, 1fr); }
  .word { padding: 10px 6px; font-size: 0.78rem; }
  .word-deck.open .word-body { max-height: 280px; }
}