/* ÉCLAT — du silex aux étoiles */
:root {
  --bg: #0f0c0a;
  --bg2: #16120f;
  --panel: #1c1814;
  --panel2: #242019;
  --line: rgba(255, 240, 220, 0.08);
  --line2: rgba(255, 240, 220, 0.16);
  --text: #f1e8da;
  --muted: #a89a87;
  --dim: #6f6556;
  --acc: #c58d4e;
  --acc-ink: #1a1208;
  --good: #7fd18b;
  --bad: #ff7a66;
  --intu: #ffd86b;
  --r: 16px;
  --nav: 64px;
  --top: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
input, select, .gis, .gis-ic, .frag, .rec, .tab-btn, .mini, .chip, .geste {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input { font: inherit; }
.hidden { display: none !important; }
b, strong { font-weight: 650; }

#app {
  position: relative; max-width: 640px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%),
    var(--bg);
  transition: background 1.2s;
}
@media (min-width: 641px) {
  body { background: #070605; }
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- barre du haut */
#top {
  flex: 0 0 auto; height: calc(var(--top) + var(--safe-t)); padding: var(--safe-t) 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.age {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; text-align: left;
  background: transparent; border: 0; padding: 2px 6px; border-radius: 8px;
  cursor: pointer; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent;
}
.age:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.age:active { transform: scale(0.97); }
/* le nom de l’âge sur sa ligne, « Âge n/13 » et le badge dessous : le nom ne se coupe plus */
.age .age-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; max-width: 100%; }
.age .age-sub { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.age .age-sub small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.age .age-badge { flex: 0 0 auto; }
.age #ageName { max-width: 100%; line-height: 1.05; font-family: var(--serif); font-size: 18px; letter-spacing: 0.02em; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.age small { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.age .age-badge { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 18%, var(--panel)); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); line-height: 1.2; }
.age .age-badge.done { background: var(--good); color: #fff; border-color: var(--good); }
.age-bar-track { display: block; width: 100%; height: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.age-bar-fill { display: block; height: 100%; background: var(--age, var(--acc)); border-radius: 2px; transition: width .3s ease; }
.top-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: 14px; line-height: 1;
}
.chip.intu b { color: var(--intu); }
.chip .cv { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.chip .cv small { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 2px; font-weight: 600; }
.chip.mem b { color: #ffd36b; }
.chip.mem.ready { border-color: #ffd36b; box-shadow: 0 0 10px rgba(255, 211, 107, 0.45); animation: memglow 2.4s ease-in-out infinite; }
@keyframes memglow { 50% { box-shadow: 0 0 2px rgba(255, 211, 107, 0.2); } }
.chip.quest { position: relative; }
.chip.quest b { color: var(--acc); }
.chip.quest.ready { border-color: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 45%, transparent); animation: questpulse 2.2s ease-in-out infinite; }
.quest-dot { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
@keyframes questpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.passbox { margin-top: 8px; padding: 8px 10px; border-radius: 12px; border: 1px dashed rgba(255, 211, 107, 0.5); background: rgba(255, 211, 107, 0.06); }
.bar.pass { margin: 6px 0; }
.bar.pass i { background: #ffd36b; }
.ing.paid { opacity: 0.6; }
.memrel { margin: 10px 0; }
.memrel .mgain { color: #ffd36b; font-size: 18px; }
.mems { display: flex; flex-direction: column; gap: 6px; }
.mem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.mem.on { border-color: rgba(255, 211, 107, 0.45); }
.mem .mic { font-size: 20px; width: 26px; text-align: center; }
.mem .btn { white-space: nowrap; flex: 0 0 auto; }
.mem .btn.soon { display: flex; flex-direction: column; align-items: center; line-height: 1.1; border-color: rgba(255, 211, 107, 0.6); }
.mem .btn.soon small { font-size: 9.5px; opacity: 0.8; }
h2 .mgain { color: #ffd36b; font-family: inherit; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; }
/* téléphones étroits : le nom de l’âge passe avant tout, les pastilles ne gardent que l’icône et le chiffre */
.age { min-width: 84px; }
.top-right { min-width: 0; }
@media (max-width: 430px) {
  #top { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .top-right { gap: 4px; }
  .chip { padding: 6px 8px; gap: 3px; font-size: 13px; min-height: 40px; }
  .chip .cv small { display: none; }
  .chip.quest .cv b { display: none; }
  .chip.quest .cv small { display: inline; font-size: 12px; margin: 0; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 700; }
  .icon-btn { width: 38px; height: 38px; }
  .age #ageName { font-size: 17px; }
  /* la carte d’objectif : le titre garde toute la largeur, les boutons passent dessous */
  .goal-card .ghead-row { flex-wrap: wrap; row-gap: 6px; }
  .goal-card .ghead { flex: 1 1 100%; }
  .gmiles { min-height: 32px; }
}
.exp-mini { font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- vues */
#views { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; }
.view { padding: 12px 12px calc(var(--nav) + var(--safe-b) + 24px); }
.view:not(.on) { display: none; }

h2.title { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 6px 4px 10px; }
h3.sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 18px 4px 8px; font-weight: 600; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 4px 8px; }
.sub-row h3.sub { margin: 0; }
.bench-clear { flex: 0 0 auto; font-size: 12px; padding: 3px 9px; border-radius: 99px; color: #f3dcb8;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,240,220,.18); }
.inv.zero { opacity: .45; }
.inv.zero.sel { opacity: .8; }
.inv.zero .c { color: var(--bad); }
.inv.spent { filter: grayscale(.85); border-style: dashed; }
.inv.spent .n { opacity: .7; }
.study-all { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.serif { font-family: var(--serif); }
.center { text-align: center; }
p { margin: 0.4em 0; }

.card {
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 85%, var(--bg)));
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 12px;
}
.card.acc { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }

/* ---------------------------------------------------------------- navigation */
#tabs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: calc(var(--nav) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#tabs button {
  flex: 1 1 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 20px; color: var(--muted); position: relative; padding: 0;
}
#tabs button span { font-size: 11px; letter-spacing: 0.03em; }
#tabs button.on { color: var(--text); }
#tabs button.born { animation: born 1.6s ease-out; }
@keyframes born { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.25); opacity: 1; color: var(--acc); } 100% { transform: none; } }
#tabs button.on::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--acc); border-radius: 2px; }
#tabs button .dot { position: absolute; top: 9px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg2); }

/* ---------------------------------------------------------------- icônes de matière */
.ic {
  --c: #333; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 9px; font-size: 19px; line-height: 1;
  background: var(--panel2); border: 1px solid var(--line);
}
.ic.sym {
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 100%, #fff 18%), var(--c));
  color: var(--ink, #fff); font-weight: 750; font-size: 13px; letter-spacing: -0.02em;
  border-color: color-mix(in srgb, var(--c) 60%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25);
  font-family: var(--sans);
}
.ic.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; }
.ic.sm.sym { font-size: 9.5px; }
.ic.lg { width: 64px; height: 64px; border-radius: 16px; font-size: 36px; }
.ic.xl { width: 92px; height: 92px; border-radius: 24px; font-size: 56px; }
.ic.xl.sym { font-size: 40px; }
.ic.lg.sym { font-size: 22px; }
.ic.unk { color: var(--dim); font-weight: 700; font-size: 16px; background: var(--bg2); border-style: dashed; }
.ing { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 8px; }
.ing.lack { color: var(--bad); }
.ing .q { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--panel2); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: transform .08s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn.pri { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 34px; padding: 5px 10px; font-size: 13px; border-radius: 10px; }
.btn:disabled, .btn.off { opacity: .38; pointer-events: none; }
.btn.pri:disabled { background: var(--panel2); color: var(--muted); border-color: var(--line2); }
.btn.wide { width: 100%; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- objectif */
.goal { display: flex; gap: 10px; align-items: flex-start; }
.goal .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--acc); font-weight: 700; }
.goal .name { font-family: var(--serif); font-size: 18px; }
.riddle { font-family: var(--serif); font-style: italic; color: var(--muted); }

/* ---------------------------------------------------------------- paysages (fiche d’une terre) */
.bd .tw { animation: blink 3s ease-in-out infinite; }
.bd .ripples path { animation: ripple 3s ease-in-out infinite; }
@keyframes ripple { 50% { transform: translateX(6px); opacity: .2; } }
.bd .glint { animation: blink 4s ease-in-out infinite; }
.bd .glow { animation: glowp 3s ease-in-out infinite; }
@keyframes glowp { 50% { opacity: .3; } }
.bd .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .4s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scale(1.1, .85); } }
.bd .drift { animation: driftb 20s ease-in-out infinite; }
@keyframes driftb { 50% { transform: translate(-10px, 6px); } }
.ext-line { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.ext-line .x { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); }
.exp { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line2); }
.exp .en { font-size: 13.5px; }
.bar { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #000), var(--acc)); border-radius: 999px; transition: width .25s linear; }

/* ---------------------------------------------------------------- atelier */
.gestes { display: flex; flex-wrap: nowrap; gap: 6px; padding: 2px 12px 8px; margin: 0 -12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 12px; }
.gestes::-webkit-scrollbar { display: none; }
.gestes.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.gestes .geste { scroll-snap-align: start; }
.geste {
  flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel);
}
.geste .gi { font-size: 24px; line-height: 1.1; }
.geste .gn { font-size: 11px; color: var(--muted); }
.geste.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, var(--panel)); }
.geste.on .gn { color: var(--text); }
.geste.lock { opacity: .4; border-style: dashed; }
.geste.secret { border-color: #b36bff; }

.bench { position: relative; padding: 10px 12px 10px; text-align: center; border: 1px solid #2b1d12; overflow: hidden;
  --wood1: #6b4a2e; --wood2: #4a3220;
  background:
    linear-gradient(180deg, rgba(255,235,200,.09), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(0,0,0,.28) 62px 64px),
    repeating-linear-gradient(2deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wood1), var(--wood2));
  box-shadow: inset 0 2px 0 rgba(255,220,170,.16), inset 0 -10px 18px rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.45); }
.bench.m-pierre { --wood1: #6f6a63; --wood2: #45413c; }
.bench.m-metal { --wood1: #5d636b; --wood2: #33373d; background:
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 30%),
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.45) 2px, transparent 3px) 0 0 / 50% 100%,
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--wood1), var(--wood2)); }
.bench.m-labo { --wood1: #24313d; --wood2: #141c24; border-color: #3a5a73; background:
    linear-gradient(180deg, rgba(120,200,255,.1), transparent 30%),
    linear-gradient(90deg, rgba(120,200,255,.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(120,200,255,.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, var(--wood1), var(--wood2)); }
.bench .heat { font-size: 12px; color: #f3dcb8; text-shadow: 0 1px 2px rgba(0,0,0,.6); min-height: 24px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.slots { display: flex; justify-content: center; align-items: center; gap: 10px; }
.slot {
  width: 80px; height: 84px; border-radius: 16px; border: 1.5px dashed rgba(255,230,190,.28); background: rgba(10,6,3,.42);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.55), 0 1px 0 rgba(255,230,190,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px;
  transition: border-color .2s, transform .1s;
}
.slot.full { border-style: solid; border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: rgba(20,14,9,.55); animation: drop .25s ease-out; }
@keyframes drop { 0% { transform: translateY(-8px) scale(1.05); } 70% { transform: translateY(1px); } }
.slot .sn { font-size: 11px; color: #e9d8bf; line-height: 1.15; max-width: 76px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot .ic { width: 44px; height: 44px; font-size: 26px; border-radius: 12px; }
.slot .ic.sym { font-size: 15px; }
.slot .plus { font-size: 26px; color: rgba(255,230,190,.35); }
.plus-sep { color: rgba(255,230,190,.45); font-size: 16px; }
.slot .tiny.muted { color: #c9b496; }
.strike { position: fixed; z-index: 55; pointer-events: none; font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.forge-btn {
  margin-top: 10px; width: 100%; min-height: 50px; border-radius: 16px; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 100%, #fff 12%), color-mix(in srgb, var(--acc) 80%, #000));
  color: var(--acc-ink); font-family: var(--serif); font-size: 20px; letter-spacing: .12em; font-weight: 700;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--acc) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .08s, filter .2s;
}
.forge-btn:active { transform: scale(.97); }
.forge-btn:disabled { filter: grayscale(.8) brightness(.6); }
.bench.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.bench.glow { animation: glow .9s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 70%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }

.result { min-height: 72px; }
.result .new { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-ink); background: var(--acc); padding: 2px 8px; border-radius: 999px; }
.result .rname { font-family: var(--serif); font-size: 19px; }
.thermo { margin: 8px 0 6px; }
.thermo .row { margin-bottom: 8px; }
.thermo .tbar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #6aa8ff, #7fd8f5, #ffd36b, #ff9a3c, #ff4a3c); opacity: .9; }
.thermo .tmark { position: absolute; top: -4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,.5); transition: left .45s cubic-bezier(.3,1.6,.5,1); }
.thermo .tl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-top: 4px; }
.tname { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.inv {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); position: relative; min-width: 0;
}
.inv:active { transform: scale(.95); }
.inv .n { font-size: 10.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.inv .c { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--panel)); }
.inv.relic { border-color: #8a7bd8; }
.filters { display: flex; gap: 6px; overflow-x: auto; margin: 0 -12px 8px; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--panel);
  font-size: 12.5px; color: var(--muted); cursor: pointer; transition: all .15s ease;
  user-select: none; -webkit-user-select: none;
}
.filters button.on {
  color: var(--acc-ink); background: var(--acc); border-color: transparent; font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 30%, transparent);
}
.filters button .f-cnt {
  font-size: 10.5px; font-weight: 700; opacity: .85; padding: 1px 5px;
  border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent);
  font-variant-numeric: tabular-nums;
}
.filters.more, .age-nav.more {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
}

/* ---------------------------------------------------------------- carnet */
.carnet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.carnet-head .search { margin: 0; flex: 1 1 180px; }
.carnet-view-btns { display: flex; gap: 6px; align-items: center; }
.carnet-view-btns button {
  min-height: 44px; min-width: 44px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line2); background: var(--panel); color: var(--muted);
  cursor: pointer; transition: all .15s ease;
}
.carnet-view-btns button.on {
  color: var(--acc-ink); background: var(--acc); border-color: transparent;
}
.age-nav { display: flex; gap: 6px; overflow-x: auto; margin: 0 -12px 8px; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.age-nav::-webkit-scrollbar { display: none; }
.age-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--panel);
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s ease;
  user-select: none; -webkit-user-select: none;
}
.age-pill:active { transform: scale(.95); }
.age-pill.cur {
  color: #fff; background: var(--ac, var(--acc)); border-color: transparent;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ac, var(--acc)) 30%, transparent);
}
.age-pill.age-all { font-weight: 700; color: var(--text); }
.age-sec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.age-sec > summary::-webkit-details-marker { display: none; }
.age-sec > summary .an { font-family: var(--serif); font-size: 17px; flex: 1; }
.age-sec > summary .cnt { font-size: 12px; color: var(--muted); }
.age-sec > summary::after { content: "›"; color: var(--muted); transition: transform .2s; font-size: 20px; }
.age-sec[open] > summary::after { transform: rotate(90deg); }
.age-sec { padding: 0; }
.age-sec .list { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.rec { padding: 10px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); }
.rec .rh { display: flex; align-items: center; gap: 10px; }
.rec .rt { font-weight: 650; }
.rec .badge { display: inline-block; white-space: nowrap; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; }
/* chaque sorte d’objet a sa couleur : on repère d’un coup d’œil machines, extracteurs, stations */
.rec .badge.t-mach { color: #fff; background: #6b5bd6; border-color: #6b5bd6; }
.rec .badge.t-ext { color: #fff; background: #3f8a4f; border-color: #3f8a4f; }
.rec .badge.t-stat { color: #fff; background: #c8642c; border-color: #c8642c; }
.rec .badge.t-tool, .rec .badge.t-upg { color: #fff; background: #3a78b5; border-color: #3a78b5; }
.rec .badge.t-curio, .rec .badge.t-relic { color: var(--intu); border-color: var(--intu); }
.rec:has(.badge.t-mach) { border-left: 3px solid #6b5bd6; }
.rec:has(.badge.t-ext) { border-left: 3px solid #3f8a4f; }
.rec:has(.badge.t-stat) { border-left: 3px solid #c8642c; }
.rec .stars { color: var(--intu); font-size: 11px; letter-spacing: 1px; }
.rec .rl { margin-top: 8px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.rec .rl .g { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); margin-right: 8px; font-size: 12.5px; }
.rec .fx { margin-top: 6px; font-size: 12.5px; color: var(--good); }
.rec .acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rec .icon-act {
  min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: 10px; flex: 0 0 auto;
}
.carnet-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.carnet-acts .make { flex: 1 1 auto; }

/* Grille 2 colonnes du Carnet, sur téléphone comme sur grand écran : sur téléphone, les fiches se resserrent */
#clist:not(.cols-1) .age-sec > .list,
#clist:not(.cols-1) > .list.flat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
/* en dessous de 360 px, deux fiches ne tiennent plus côte à côte : une seule colonne, quel que soit le réglage */
@media (max-width: 359px) {
  #clist:not(.cols-1) .age-sec > .list, #clist:not(.cols-1) > .list.flat { display: flex; flex-direction: column; align-items: stretch; }
}
@media (min-width: 360px) and (max-width: 519px) {
  #clist:not(.cols-1) .age-sec > .list { padding: 0 6px 8px; gap: 6px; }
  #clist:not(.cols-1) .rec { padding: 8px; min-width: 0; }
  #clist:not(.cols-1) .rec { position: relative; }
  #clist:not(.cols-1) .rec .rh { flex-wrap: nowrap; gap: 6px; padding-right: 40px; align-items: flex-start; }
  #clist:not(.cols-1) .rec .rh > .grow { min-width: 0; }
  #clist:not(.cols-1) .rec .rh > .ic { flex: 0 0 auto; }
  #clist:not(.cols-1) .rec .pinb { position: absolute; top: 2px; right: 2px; }
  #clist:not(.cols-1) .rec .rh > .small.muted { position: absolute; top: 48px; right: 12px; font-size: 11px; }
  #clist:not(.cols-1) .rec .quick-make { display: none; }
  #clist:not(.cols-1) .rec .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  #clist:not(.cols-1) .rec .rt { font-size: 14px; overflow-wrap: anywhere; }
  #clist:not(.cols-1) .rec .rl { font-size: 12px; }
  #clist:not(.cols-1) .carnet-acts { gap: 4px; }
  #clist:not(.cols-1) .carnet-acts .make { flex: 1 1 100%; }
  #clist:not(.cols-1) .carnet-lot { font-size: 12px; }
}

/* Carnet mode compact */
#clist.carnet-dense .rec { padding: 6px 8px; }
#clist.carnet-dense .rec .rh { gap: 6px; }
#clist.carnet-dense .rec .rt { font-size: 14px; }
#clist.carnet-dense .rec .rl { margin-top: 4px; font-size: 12px; }
#clist.carnet-dense .rec .fx { margin-top: 3px; font-size: 11.5px; }
#clist.carnet-dense .carnet-lot { padding: 4px 0; margin: 4px 0; }
#clist.carnet-dense .carnet-acts { margin-top: 4px; }

.rec.unknown { border-style: dashed; }
.rec.unknown .rt { color: var(--muted); }
.rec.owned { opacity: .72; }
.rec .why { font-size: 12px; color: var(--bad); margin-top: 6px; }
.auto-on { background: color-mix(in srgb, var(--good) 22%, var(--panel2)) !important; border-color: var(--good) !important; }

/* ---------------------------------------------------------------- journal */
.frag { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 6px; width: 100%; text-align: left; }
.frag .fi { font-size: 20px; }
.frag.unk { opacity: .45; border-style: dashed; }
.lore { font-family: var(--serif); font-size: 17px; line-height: 1.6; white-space: pre-line; }
.secret-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sec { padding: 8px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; }
.sec .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.sec.unk { opacity: .5; border-style: dashed; }
.flute { display: flex; justify-content: center; gap: 10px; margin: 14px 0 8px; }
.hole {
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid #c9b996;
  background: radial-gradient(circle at 40% 35%, #3a2f22, #0d0a07 70%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
  font-weight: 700; color: #c9b996; font-size: 13px;
}
.hole:active, .hole.ping { background: radial-gradient(circle at 40% 35%, #fff2c9, #c9a24a 70%); color: #2a1d0a; }
.flute-body { background: linear-gradient(180deg, #efe3c4, #cbb98d); border-radius: 40px; padding: 10px 14px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.notes { text-align: center; font-family: var(--mono); letter-spacing: .3em; color: var(--muted); min-height: 22px; transition: opacity .4s; }
.notes.fade { opacity: 0; }
.stat { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }

/* ---------------------------------------------------------------- cosmos */
.sky-wrap { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
#skyCanvas { display: block; width: 100%; height: 52vh; max-height: 440px; min-height: 260px; touch-action: manipulation; }
.sky-info { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(5,6,12,.72); border: 1px solid rgba(255,255,255,.1); color: #dfe6ff; }
.term { background: #050806; border: 1px solid #1d3326; border-radius: var(--r); padding: 12px; font-family: var(--mono); font-size: 12.5px; color: #8cffb0; max-height: 46vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.term .l { margin: 2px 0; }
.term .u { color: #e2ffe9; }
.term-in { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.term-pfx { font-family: var(--mono); font-size: 14px; color: #8cffb0; opacity: 0.85; white-space: nowrap; user-select: none; }
.term-in input { flex: 1; min-width: 0; background: #050806; border: 1px solid #1d3326; border-radius: 10px; padding: 10px; color: #8cffb0; font-family: var(--mono); font-size: 16px; user-select: text; -webkit-user-select: text; }
.capsule-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px; padding: 10px; font-family: var(--font); font-size: 15px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); }
.proj .ph { display: flex; align-items: center; gap: 10px; }
.proj .ph .pi { font-size: 30px; }
.proj .pn { font-family: var(--serif); font-size: 20px; }
.step { margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); }
.step.done { opacity: .55; }
.step.cur { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.step .sn { font-weight: 650; }
.cost-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.cost-row .bar { flex: 1; height: 6px; }

/* ---------------------------------------------------------------- modales & toasts */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,3,2,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .2s; }
@media (min-height: 640px) { .modal { align-items: center; } }
.modal-box {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2);
  border-radius: 22px 22px 0 0; padding: 20px 18px calc(18px + var(--safe-b)); animation: rise .28s cubic-bezier(.2,1,.3,1);
}
@media (min-height: 640px) { .modal-box { border-radius: 22px; margin: 12px; } }
.modal-box h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 4px 0 8px; }
.modal-box .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); font-weight: 800; }
.modal-box .acts { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.modal-box .acts .btn { flex: 1 1 auto; }
.modal.ending { background: #000; align-items: stretch; }
.modal.ending .modal-box { width: 100%; max-width: 620px; max-height: 100vh; border-radius: 0; border: 0; background: radial-gradient(80% 50% at 50% 0%, #2a1b08, #000 70%); padding-top: calc(28px + var(--safe-t)); }
.ending .lore p { opacity: 0; animation: fadeup 1.4s forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav) + var(--safe-b) + 12px); z-index: 65; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(92vw, 480px); }
.toast {
  background: color-mix(in srgb, var(--panel) 92%, #000 8%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line2); border-left: 4px solid var(--line2);
  border-radius: 14px; padding: 8px 12px; font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2);
  max-width: 100%; display: flex; align-items: center; gap: 10px;
  pointer-events: none; user-select: none; -webkit-tap-highlight-color: transparent;
  animation: toastIn .22s cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .12s ease, opacity .18s ease;
}
.toast.toast-out { animation: toastOut .2s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(0.94); } }

.toast-ic {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--text) 10%, transparent);
}
.toast-txt { flex: 1 1 auto; min-width: 0; word-break: break-word; }
/* un toast ne gêne jamais un toucher : seul son ✕ se touche */
body.has-act #toasts { bottom: calc(var(--nav) + var(--safe-b) + 60px); }
body:has(#modal:not(.hidden)) #toasts, body:has(.tuto:not(.hidden)) #toasts { top: calc(var(--top) + var(--safe-t) + 8px); bottom: auto; }
.toast-x {
  pointer-events: auto; min-width: 40px; min-height: 40px; margin: -10px -8px -10px 0;
  opacity: 0.5; font-size: 11px; background: none; border: none; padding: 3px 5px;
  border-radius: 6px; color: inherit; cursor: pointer; transition: opacity .15s; flex: 0 0 auto;
}
.toast:hover .toast-x { opacity: 0.9; }

.toast b { color: var(--acc); }
.toast.toast-warn { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--panel)); }
.toast.toast-warn .toast-ic { background: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--bad); }
.toast.toast-warn b { color: var(--bad); }
.toast.toast-good { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel)); }
.toast.toast-good .toast-ic { background: color-mix(in srgb, var(--good) 25%, transparent); color: var(--good); }
.toast.toast-good b { color: var(--good); }
.toast.toast-gold { border-left-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, var(--panel)); }
.toast.toast-gold .toast-ic { background: color-mix(in srgb, var(--acc) 28%, transparent); color: var(--acc); }
.toast.toast-info { border-left-color: color-mix(in srgb, var(--text) 45%, transparent); }

/* progression et guidage dans la carte d’objectif */
button.gprog-row, .gprog-row {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 8px;
  border-radius: 8px; background: color-mix(in srgb, var(--panel) 40%, transparent);
  border: 0; width: 100%; color: inherit; font-family: inherit; font-size: inherit;
  text-align: left; cursor: pointer; min-height: 44px;
}
button.gprog-row:hover, .gprog-row:hover { background: color-mix(in srgb, var(--panel) 80%, transparent); }
.gprog-track { flex: 1 1 auto; height: 5px; background: color-mix(in srgb, var(--text) 14%, transparent); border-radius: 3px; overflow: hidden; }
.gprog-track i { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.gprog-txt { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.card.result:empty { display: none; }
.carte-svg [tabindex]:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
[data-fichemode].on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.qtybar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0 -12px 8px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--line2); }
.qtybar .tiny { flex: 0 0 auto; margin-right: 2px; }
.chipq { flex: 1 1 0; min-width: 44px; min-height: 44px; border-radius: 99px; border: 1.5px solid var(--line2); background: transparent; color: var(--text); font: 600 14px var(--sans); }
.chipq.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.result { position: relative; }
.result-x { display: block; margin: 8px 0 0 auto; }
.limit { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.limit b { color: var(--text); }
.limit .mini { margin-left: 4px; }
.goal-hint { padding: 8px 10px; margin: 0 0 10px; }
.step-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); padding: 1px 6px; border-radius: 6px; vertical-align: 1px; margin-right: 4px; }
.miles-top-bar { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 60%, transparent); border: 1px solid var(--line); margin: 8px 0; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.float { position: absolute; font-weight: 800; font-size: 15px; color: var(--text); text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: floatUp .85s ease-out forwards; white-space: nowrap; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; pointer-events: none; z-index: 50; }
@keyframes floatUp { to { transform: translate(-50%, -260%); opacity: 0; } }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.modal.agecard { align-items: center; background: rgba(4,3,2,.82); }
.modal.agecard .modal-box { border-radius: 22px; margin: 12px; padding-top: 28px; text-align: center;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--acc) 22%, var(--panel)), var(--panel) 75%); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.modal.agecard .kicker { letter-spacing: .3em; color: var(--muted); }
.modal.agecard h2 { font-size: 36px; color: var(--acc); text-shadow: 0 4px 30px color-mix(in srgb, var(--acc) 55%, transparent); animation: fadeup .8s .15s both; }
.modal.agecard .q { font-family: var(--serif); font-style: italic; font-size: 17px; animation: fadeup .8s .5s both; }
.modal.agecard .small { animation: fadeup .8s .9s both; }

/* Lucioles */
.firefly { position: fixed; width: 4px; height: 4px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 8px 2px rgba(255,240,120,.6); pointer-events: none; z-index: 1; animation: drift var(--d, 9s) ease-in-out infinite alternate, blink 2.3s ease-in-out infinite; opacity: .7; }
@keyframes drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes blink { 50% { opacity: .15; } }
.pip { position: fixed; right: 16px; bottom: calc(var(--nav) + var(--safe-b) + 16px); font-size: 26px; z-index: 4; animation: hop 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes hop { 50% { transform: translateY(-8px) rotate(-6deg); } }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 30%, transparent); } }
.tip { font-size: 13px; background: color-mix(in srgb, var(--acc) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.tip b { color: var(--acc); }
textarea.save { width: 100%; min-height: 110px; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 8px; font-family: var(--mono); font-size: 11px; user-select: text; -webkit-user-select: text; }
.toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu-toggles { display: flex; flex-direction: column; }
.vol-group { display: flex; flex-direction: column; padding: 2px 8px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 40%, transparent); margin: 6px 0; }
.vol-group.hidden { display: none; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.menu-grid .btn { min-height: 44px; text-align: center; justify-content: center; padding: 6px 8px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================ v2 & 0.7.0 */
/* liens internes et pastilles d'objets universelles */
.link-txt { color: var(--acc); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc) 45%, transparent); text-underline-offset: 3px; cursor: pointer; }
.link-txt:hover { color: var(--text); }

.item-pill, .ing.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  padding: 1px 8px 1px 5px;
  margin: 1px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 75%, var(--bg) 25%);
  border: 1px solid color-mix(in srgb, var(--acc) 32%, var(--line2));
  color: var(--text);
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s ease;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.item-pill:hover, .ing.link:hover {
  background: color-mix(in srgb, var(--acc) 14%, var(--panel));
  border-color: var(--acc);
  color: var(--acc);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.item-pill:active, .ing.link:active {
  transform: translateY(0) scale(0.97);
}
.item-pill:focus-visible, .ing.link:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}
.item-pill.lack, .ing.link.lack {
  border-color: color-mix(in srgb, var(--bad) 35%, var(--line2));
  background: color-mix(in srgb, var(--bad) 8%, var(--panel));
  color: var(--text);
}
.item-pill.lack:hover, .ing.link.lack:hover {
  border-color: var(--bad);
  color: var(--bad);
}
.item-pill.paid, .ing.link.paid {
  opacity: 0.72;
}
.item-pill.unk {
  color: var(--muted);
  border-style: dashed;
}
.item-pill .pill-qty, .ing.link .pill-qty, .ing.link .q {
  font-variant-numeric: tabular-nums;
  color: var(--acc);
  font-weight: 700;
}
.item-pill.lack .pill-qty, .ing.link.lack .pill-qty, .ing.link.lack .q {
  color: var(--bad);
}
.item-pill .pill-name {
  white-space: nowrap;
}

/* Affordance renforcée sur tous les conteneurs cliquables data-goto */
.cost-row[data-goto] {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all .15s ease;
}
.cost-row[data-goto]:hover {
  background: color-mix(in srgb, var(--acc) 10%, var(--bg2));
}
.cost-row[data-goto]:active {
  transform: scale(0.99);
}
.u-pr[data-goto] {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background .15s ease;
}
.u-pr[data-goto]:hover {
  background: color-mix(in srgb, var(--acc) 8%, var(--bg2));
}
.comptoir-head[data-goto] {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background .15s ease;
}
.comptoir-head[data-goto]:hover {
  background: color-mix(in srgb, var(--acc) 10%, var(--bg2));
}

.flash { animation: flashy 1.6s ease-out; }
@keyframes flashy { 0%, 30% { box-shadow: 0 0 0 3px var(--acc); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* objectif et prochaine étape */
.goal-card .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--acc); font-weight: 700; margin-bottom: 4px; }
.goal-card .ghead-row { display: flex; align-items: center; gap: 8px; }
.goal-card .ghead { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; }
.gmiles { flex: 0 0 auto; border: 1px solid var(--line2); background: var(--bg2); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--muted); }
.rec .hid { letter-spacing: 2px; color: var(--dim); }
.gmiles.ok { color: var(--good); border-color: var(--good); }
.miles.full summary .muted { color: var(--good); }
.miles { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.miles summary { cursor: pointer; }
.mile { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13.5px; border-top: 1px dashed var(--line); }
.mile:first-of-type { border-top: 0; }
.mile .mk { width: 18px; text-align: center; color: var(--dim); }
.mile.done { color: var(--muted); }
.mile.done .mk { color: var(--good); }
.mile.cur .mk { color: var(--acc); }
.goal-card .ghead .lbl { margin: 0; }
.goal-card .ghead .zt { margin-left: auto; color: var(--dim); }
.goal-card .gname { font-family: var(--serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.goal-card.compact { padding: 10px 14px; }
.goal-card .gstep { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goal-card .name { font-family: var(--serif); font-size: 18px; }
.stepbox { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px dashed var(--line2); }
.stepbox .rl { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.stepbox .rl .g { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); margin-right: 8px; font-size: 12.5px; }
.memo { margin-top: 6px; font-size: 13px; font-family: var(--serif); font-style: italic; color: var(--intu); }
.memo .g { font-style: normal; font-family: var(--sans); }

/* suivi */
.track { border-color: color-mix(in srgb, var(--intu) 45%, transparent); background: color-mix(in srgb, var(--intu) 4%, var(--panel)); }
.track.ready { border-color: color-mix(in srgb, var(--good) 65%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--good) 25%, transparent); }
.track .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--intu); font-weight: 700; }
.track.ready .lbl { color: var(--good); }
.track .cost-row { cursor: pointer; padding: 4px 6px; border-radius: 8px; transition: background .15s; }
.track .cost-row:active { background: var(--bg2); }
.track .cost-row.ok { opacity: .75; }
.track .cost-row.ok .tiny { color: var(--good); }
.track .eta { min-width: 64px; text-align: right; }
.track .ready-pulse { animation: readyPulse 2s infinite ease-in-out; }
@keyframes readyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); } }

/* extracteurs au travail */
.x.work .ic { animation: bob 1.4s ease-in-out infinite; }
.x.work:nth-child(2n) .ic { animation-delay: -.6s; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-4deg); } }

/* épingles et raccourcis */
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin-bottom: 8px; }
.pin { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); min-height: 44px; }
.pin .pn { font-size: 13px; text-decoration: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.pin-make { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; font-weight: 700; font-size: 13px; border-radius: 8px; }
.pinb { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 18px; flex: 0 0 auto; }
.pinb.on { color: var(--intu); border-color: color-mix(in srgb, var(--intu) 50%, transparent); }

/* recherche */
.search { margin: 0 0 8px; position: relative; display: flex; align-items: center; }
.search input { width: 100%; padding: 10px 34px 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font-size: 16px; user-select: text; -webkit-user-select: text; }
.search input:focus { outline: none; border-color: var(--acc); }
.list.flat { display: flex; flex-direction: column; gap: 8px; }

/* arbre de fabrication */
.tsteps { display: flex; flex-direction: column; gap: 4px; }
.tstep { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13.5px; }
.mini { min-width: 38px; min-height: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel2); font-weight: 700; padding: 0 8px; }
.mini:disabled { opacity: .35; }
.mini:active { transform: scale(.94); }
ul.news { padding-left: 18px; margin: 6px 0; }
ul.news li { margin: 6px 0; font-size: 14px; }
.bk { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }

/* bandeau de mise à jour */
.upd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: color-mix(in srgb, var(--acc) 22%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); font-size: 13.5px; z-index: 5; }

/* ---------------------------------------------------------------- icônes (sprite game-icons) */
svg.gi { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; flex: 0 0 auto; }
.ic.gic { color: var(--text); }
.ic.gic svg.gi { width: 70%; height: 70%; }
#tabs button svg.gi { width: 22px; height: 22px; display: block; margin: 0 auto 1px; }

/* ---------------------------------------------------------------- le Domaine */
.dom { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.dom.dom-dense { gap: 6px; }
.dom.dom-dense .gis { min-height: 44px; }
.dom.dom-dense .dom-terre { gap: 4px; }
.dom.dom-dense .card { padding: 8px 10px; }
.dom-bar { display: flex; justify-content: flex-end; margin: -4px 0 -6px; }
.dom-tip { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; background: color-mix(in srgb, var(--intu) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--intu) 35%, transparent); }
.dom-terre { display: flex; flex-direction: column; gap: 8px; }
.dom-ruine { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--panel) 75%, transparent); border: 1px dashed var(--line2); border-radius: 10px; margin: 2px 0; }
.dom-th { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line2); padding-bottom: 4px; }
.dom-th h3, .dom-card h3 { margin: 0; font: 600 20px/1.2 var(--serif); }
.dom-lieu { flex: 1 1 140px; max-width: 220px; }
.dom-lieu .bar { height: 4px; margin-top: 3px; }
.gis { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; }
.gis-ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 0; touch-action: none; }
.gis-ic .ic { width: 34px; height: 34px; border: 0; background: none; font-size: 24px; }
.gis-ic.hand { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.gis-ic.hand:active, .gis-ic.pop { transform: scale(.92); }
.gis-ic.pop { animation: gpop .18s ease-out; }
@keyframes gpop { 50% { transform: scale(.88); } 100% { transform: scale(1); } }
.gis-body { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.gis-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 16px; }
.gis-l2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-rate { font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.dom-rate.hand, .dom-rate.off { font-weight: 400; color: var(--muted); font-style: italic; font-size: 13px; }
.gis-b { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.gis-b .mini { min-width: 44px; min-height: 40px; height: 40px; }
.mini.nope { opacity: .45; }
.gis-b .mini.lbl { font-size: 12.5px; font-weight: 700; max-width: 112px; line-height: 1.05; white-space: normal; padding: 0 7px; }
.dom-free i { font-style: normal; min-width: 0; }
.hcount { position: absolute; left: 4px; top: -14px; z-index: 2; pointer-events: none; padding: 1px 8px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12.5px; font-weight: 700; color: var(--good); white-space: nowrap; }
.hcount.bump { animation: hbump .2s ease-out; }
.hcount.crit { color: var(--acc); border-color: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 50%, transparent); }
.hcount.out { opacity: 0; transition: opacity .4s; }
@keyframes hbump { 50% { transform: scale(1.12); } }
.dom-more, .dom-free { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--line2); background: none; color: var(--muted); font-size: 13.5px; text-align: left; }
.dom-more span, .dom-free span { color: var(--text); font-weight: 600; white-space: nowrap; }
.dom-card { padding: 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.dom-pass { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.dom-pass .passbox { margin: 0; }
.mrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); cursor: pointer; }
.mrow:first-of-type { border-top: 0; }
.mrow-t { font-size: 14.5px; }
.mrow .tiny.good { color: var(--good); } .mrow .tiny.warn { color: var(--intu); } .mrow .tiny.dim { color: var(--muted); }
.dom-oeuvre .btn.on, .proj .btn.on { border-color: var(--good); color: var(--good); }
.dom-prod summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.dom-prod[open] summary { margin-bottom: 6px; }
.dom-epi { text-align: center; font: italic 17px/1.3 var(--serif); color: var(--muted); margin: 10px 0 4px; }
.sheet-h { display: flex; align-items: center; gap: 10px; }
.sheet-h h2 { margin: 0; }
.sheet-rows .u-row { flex-wrap: nowrap; }
.sheet-rows .u-row .grow { min-width: 0; }

/* ---------------------------------------------------------------- la Carte */
#v-carte.on { padding: 0; }
.carte { position: relative; }
.carte-svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; touch-action: pan-y; }
.carte-svg .c-hatch { stroke: var(--muted); stroke-width: 1.1; opacity: .5; }
.carte-svg .c-stars circle { fill: var(--muted); opacity: .55; }
.carte-svg .c-horizon { fill: none; stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 2 6; }
.carte-svg .c-road, .carte-svg .c-pathway { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; }
.carte-svg .c-pathway { stroke: var(--acc); stroke-width: 2; }
.carte-svg .c-land { fill: color-mix(in srgb, var(--zc) 38%, var(--bg)); stroke: var(--text); stroke-width: 1.6; }
.carte-svg .c-ring { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 5 4; }
.carte-svg .c-crater { fill: none; stroke: var(--text); stroke-width: 1; opacity: .45; }
.carte-svg .c-river { fill: none; stroke: #7fb8cf; stroke-width: 7; stroke-linecap: round; opacity: .85; }
.carte-svg .c-deco { color: var(--text); opacity: .55; }
.carte-svg use { fill: currentColor; }
.carte-svg .c-name { font: 600 21px var(--serif); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.carte-svg .c-small { font: 12px var(--sans); fill: var(--muted); text-anchor: middle; }
.carte-svg .c-zone { cursor: pointer; }
.carte-svg .c-camp { color: var(--acc); cursor: pointer; }
.carte-svg .c-lieu circle:first-child { fill: var(--panel); stroke: var(--text); stroke-width: 1.5; }
.carte-svg .c-lieu { color: var(--text); cursor: pointer; }
.carte-svg .c-lieu.next circle:first-child { stroke: var(--acc); stroke-width: 2.5; }
.carte-svg .c-lieu.next { color: var(--acc); }
.carte-svg .c-lieu.locked { color: var(--muted); }
.carte-svg .c-lieu.locked circle:first-child { stroke-dasharray: 3 3; stroke: var(--muted); }
.carte-svg .c-tick { fill: var(--good); stroke: var(--bg); stroke-width: 1.5; }
.carte-svg .c-pulse { fill: none; stroke: var(--acc); stroke-width: 2; animation: cpulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cpulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.carte-svg .c-ahead { cursor: pointer; }
.carte-svg .c-mist { fill: var(--bg); stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 5; }
.carte-svg .c-mist-h { stroke: none; }
.carte-svg .c-vague { font: italic 16px var(--serif); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.carte-svg .c-fog { pointer-events: none; }
.carte-svg .c-pass { cursor: pointer; }
.carte-svg .c-pass rect { fill: var(--acc); stroke: var(--bg); stroke-width: 2; }
.carte-svg .c-pass text { font: 700 14px var(--sans); fill: var(--acc-ink); text-anchor: middle; }

.u-recipe { width: 100%; display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); text-align: left; }
.u-prod { margin: 6px 0 2px; }
.u-pr { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; border-top: 1px dashed var(--line); }
.u-pr:first-child, .u-pr.u-ph + .u-pr { border-top: 0; }
.u-pr b, .u-pr i, .u-pr > span:last-child { flex: 0 0 64px; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; }
.u-pr b { color: var(--good); font-weight: 600; }
.u-pr i { color: var(--bad); }
.u-pr > span:last-child { color: var(--muted); flex-basis: 48px; }
.u-pr.u-ph > span:not(.grow) { flex: 0 0 64px; text-align: right; }
.u-pr.u-ph > span:last-child { flex-basis: 48px; }
.u-prod-full { color: #8fb3ff; margin: 4px 0; }
.u-pr > span.full { color: #8fb3ff; font-weight: 600; }
.u-pr > span.full::after { content: " 📦"; }
.u-pr .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-ins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.u-in { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.u-in i { font-style: normal; color: var(--muted); }
.u-in.no { border-color: var(--bad); }
.u-in.no i::after { content: " ✗"; color: var(--bad); }
.u-arrow { color: var(--muted); }
.u-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.u-row select { min-height: 32px; flex: 1 1 120px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); padding: 0 6px; font-size: 13px; }
.u-row.acts .btn { flex: 1 1 auto; }
.picklist { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin-top: 6px; }
.pick { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); text-align: left; font-size: 14px; }
.modal-box .btn { white-space: normal; text-align: center; line-height: 1.25; }
.rec .acts .btn.ghost { padding: 5px 8px; min-width: 36px; }

.toggle.vol input { flex: 0 1 55%; accent-color: var(--acc); }

/* ---------------------------------------------------------------- compte */
.icon-btn.cloud { font-size: 17px; }
.icon-btn.cloud.warn { box-shadow: 0 0 0 2px var(--intu); animation: pulse 1.6s infinite; }
.fld { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.fld input { min-height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); padding: 0 12px; font-size: 16px; user-select: text; -webkit-user-select: text; }
.fld input:focus { outline: 2px solid color-mix(in srgb, var(--acc) 60%, transparent); border-color: transparent; }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-top: 8px; }
.seg button { flex: 1 1 0; border: 0; border-radius: 9px; padding: 8px 4px; background: none; color: var(--muted); font-size: 13.5px; }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.err { color: var(--bad); min-height: 1em; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.vs .card { margin: 0; padding: 10px; }
.warnc { border-color: var(--intu); }
.warnline { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--intu) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--intu) 45%, transparent); cursor: pointer; }
.u-exts .u-row { margin-top: 6px; flex-wrap: nowrap; }
.u-exts .u-row .grow { min-width: 0; }
.memory { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.memory .bar { height: 6px; }
.memory .bar > i { background: linear-gradient(90deg, #8a7bd8, #c9b8ff); }
.memory .gain { color: #c9b8ff; }

/* ---------------------------------------------------------------- fiches de recettes */
.rwin .rdesc { font-size: 15.5px; margin: 10px 0 6px; }
.rwin .ic.lg.unk { font-size: 26px; }
.rwin .pinb { align-self: flex-start; }
.rrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rings { display: flex; flex-direction: column; gap: 5px; }
.ring { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); text-align: left; font-size: 14px; transition: background .15s, border-color .15s; }
.ring .go { color: var(--dim); font-size: 18px; line-height: 1; }
.ring.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line2)); background: color-mix(in srgb, var(--good) 6%, var(--bg2)); }
.ring.ok .tiny { color: var(--good); font-weight: 700; }
.ring.lack { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 5%, var(--bg2)); }
.ring.lack .tiny { color: var(--bad); }
.ring .can-make { color: var(--acc); font-weight: 600; margin-left: 4px; font-size: 11.5px; }
.ring:active { transform: scale(.98); }
.rwin .ing.link { border: 1px solid var(--line2); background: var(--bg2); border-radius: 999px; padding: 3px 9px 3px 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin: 2px 4px 2px 0; }
.rbtns { margin-top: 10px; gap: 6px; }
.rwin .acts .btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- matières : tri et filtres */
.inv-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.inv-tools .search { flex: 1 1 auto; margin: 0; position: relative; display: flex; align-items: center; }
.inv-tools .search input { width: 100%; padding-right: 32px; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text); font-size: 13px; line-height: 1; display: flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: transform .12s, background .12s;
}
.search-clear:active {
  transform: translateY(-50%) scale(.9);
  background: color-mix(in srgb, var(--text) 28%, transparent);
}
.inv-fbtn { flex: 0 0 auto; white-space: nowrap; }
.btn.inv-fbtn.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.inv-fn { margin-left: 2px; }
.inv-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin: 0 0 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); }
.inv-panel select { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); padding: 0 8px; font-size: 14px; }
.inv-panel .filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.inv-panel [data-fclear] { align-self: flex-start; }
.inv-tools select { flex: 0 0 auto; max-width: 48%; min-height: 40px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); padding: 0 8px; font-size: 13px; }
.inv-age { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 10px 4px 6px; }
.inv { position: relative; }
.inv .fav { position: absolute; top: 3px; right: 6px; font-style: normal; font-size: 11px; color: #ff8a9a; }
.inv .rx { position: absolute; top: 3px; left: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--intu); text-shadow: 0 0 6px color-mix(in srgb, var(--intu) 70%, transparent); }
.inv .c-flow {
  font-size: 9px; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 4px;
  font-variant-numeric: tabular-nums; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv .c-flow.pos {
  color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent);
}
.inv .c-flow.neg {
  color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent);
}
.inv .c-flow.hidden { display: none; }
/* la file de « Tes mains » */
.hands { padding: 10px 12px; }
.hands .lbl { font-size: 13px; }
.hjob { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.hjob:first-of-type { border-top: 0; }
.hjob .bar { height: 5px; margin-top: 4px; }
.hjob:not(.cur) { opacity: .75; }
.hx { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 12px; }
.study { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.study .g { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid color-mix(in srgb, var(--intu) 45%, var(--line2)); font-size: 12px; }
.pinb.fav.on { color: #ff8a9a; border-color: #ff8a9a; }
.rwin .row > .pinb + .pinb { margin-left: 4px; }

/* fiche d’une terre sur la carte */
.u-zone .u-scene { position: relative; height: 120px; border-radius: 12px; overflow: hidden; margin: 2px 34px 8px 0; }
.u-zone .u-scene .bd { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-zone .u-scene .zname { position: absolute; left: 10px; bottom: 6px; font-family: var(--serif); font-weight: 500; font-size: 17px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* ---------------------------------------------------------------- le tutoriel (souvenirs qui guident) */
.tuto { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tuto.hidden { display: none; }
.tu-spot { position: fixed; border-radius: 14px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 3px var(--acc), 0 0 22px 4px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 0 200vmax rgba(4,3,2,.46);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; animation: tupulse 1.6s ease-in-out infinite; }
.tu-spot.nodim { box-shadow: 0 0 0 3px var(--acc), 0 0 22px 4px color-mix(in srgb, var(--acc) 55%, transparent); }
@keyframes tupulse { 50% { outline: 6px solid color-mix(in srgb, var(--acc) 25%, transparent); outline-offset: 4px; } }
.tu-bub { position: fixed; z-index: 2; pointer-events: auto; padding: 10px 14px 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.tu-bub.pop { animation: fadeup .3s; }
.tu-bub::before { content: ""; position: absolute; top: -7px; left: calc(var(--ax, -100px) - 7px); width: 12px; height: 12px; transform: rotate(45deg);
  background: inherit; border-left: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); border-top: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); }
.tu-bub.up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.tu-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); font-weight: 700; }
.tu-t { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; }
.tu-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.tu-acts:empty { display: none; }
.tu-b { border: 1px solid var(--line2); background: var(--bg2); color: var(--muted); border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.tu-b.pri { background: var(--acc); color: #1a1208; border-color: var(--acc); font-weight: 700; }
#tutoMini { font-size: 15px; padding: 3px 9px; color: var(--text); border-color: color-mix(in srgb, var(--acc) 60%, var(--line)); animation: fadeup .3s; }

/* ---------------------------------------------------------------- stabilité (4.4) */
.btn.nope, .forge-btn.nope { opacity: .45; filter: grayscale(.6); }
.btn.pri.nope { background: var(--panel2); color: var(--muted); border-color: var(--line2); }
.u-lack { color: var(--bad); margin: 6px 0 0; }
.u-lack .muted { color: var(--muted); font-style: italic; }
/* la file des mains : une ligne de hauteur fixe */
.hbar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; margin-bottom: 10px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.hbar .hh { font-size: 16px; }
.hbar .hmain { min-width: 0; cursor: pointer; }
.hbar .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .bar { height: 4px; margin-top: 4px; }
.hmore { flex: 0 0 auto; border: 1px solid var(--line2); background: var(--panel2); border-radius: 99px; padding: 2px 8px; font-size: 12px; color: var(--text); }
/* le petit établi, quand le grand est sorti de l’écran */
.mbench { position: fixed; z-index: 6; top: calc(var(--top) + var(--safe-t) + 6px); left: 10px; right: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 16px; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line2));
  box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: fadeup .2s; }
.mbench .mg { font-size: 20px; padding: 0 2px; }
.mslot { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; border: 1px dashed var(--line2); background: var(--bg2); color: var(--muted); font-size: 18px; display: grid; place-items: center; }
.mforge { flex: 1 1 auto; height: 46px; border-radius: 12px; border: 0; background: var(--acc); color: var(--acc-ink); font-weight: 800; letter-spacing: .02em; }

/* ---------------------------------------------------------------- les fêtes (4.4) */
.cele { position: fixed; inset: 0; z-index: 49; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cele .cb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 26px; border-radius: 26px; text-align: center; max-width: 82vw;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 30%, var(--panel)), color-mix(in srgb, var(--panel) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--acc) 35%, transparent);
  animation: celepop var(--ms, 1.9s) cubic-bezier(.2,1.4,.4,1) forwards; }
.cele .ic.xl { animation: celeic .7s cubic-bezier(.2,1.6,.4,1); }
.cele .ck { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); font-weight: 800; margin-top: 6px; }
.cele .cn { font-family: var(--serif); font-size: 26px; color: var(--text); }
.cele .cs { font-size: 13px; color: var(--good); }
.cele .ca { font-size: 14px; color: var(--intu); font-weight: 700; margin-top: 4px; animation: fadeup .4s; }
@keyframes celepop { 0% { transform: scale(.5); opacity: 0; } 14% { transform: scale(1.06); opacity: 1; } 22% { transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes celeic { 0% { transform: scale(.2) rotate(-25deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
.hcount { position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; font-weight: 800; font-size: 17px; color: #fff3d6;
  text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 0 12px color-mix(in srgb, var(--acc) 60%, transparent); transition: opacity .35s; }
.hcount.bump { animation: hbump .22s cubic-bezier(.2,1.8,.4,1); }
.hcount.out { opacity: 0; }
@keyframes hbump { 0% { transform: translate(-50%, -100%) scale(1.35); } 100% { transform: translate(-50%, -100%) scale(1); } }
/* aide : les mots du jeu */
.lexique { margin: 6px 0 10px; }
.lexique dt { font-weight: 700; margin-top: 8px; }
.lexique dd { margin: 2px 0 0; color: var(--muted); }
.passcost { display: flex; flex-direction: column; gap: 4px; }
.passcost .ing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* une ligne de passage porte une phrase entière : elle peut aller à la ligne, ce n’est pas une pastille */
.passcost .ing.link { white-space: normal; border-radius: 10px; padding: 4px 8px; margin: 0; }

/* ---------------------------------------------------------------- comptoir */
.dom-comptoir { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--panel)); }
.comptoir-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.comptoir-row {
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2);
  display: flex; flex-direction: column; gap: 6px;
}
.comptoir-head { display: flex; align-items: center; gap: 8px; }
.comptoir-btns { display: flex; gap: 6px; }
.comptoir-btns .btn { flex: 1 1 0; padding: 6px 4px; font-size: 11.5px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.comptoir-btns .btn small { font-size: 10px; opacity: .8; font-weight: normal; margin-top: 2px; }
.comptoir-trace { text-align: center; margin: 8px 0 14px; }
.big-btn { width: 100%; min-height: 48px; font-size: 15px; font-weight: 700; }

.hcount.crit { color: #ffd36b; border-color: #ffd36b; }
/* le compteur de récolte au-dessus du nom de la matière, jamais coupé par le bord de l’écran */
.gis > .hcount { left: 58px; top: -8px; transform: none; font-size: 14px; }

/* déchiffrer et chaleur étrange (5.8) */
.decipher { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sec-heat { margin-top: 6px; color: #c9b8ff; font-style: italic; }

/* ---------------------------------------------------------------- récit (6.0) */
.signe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.3em;
  padding: 0 3px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  font-size: 0.85em;
  line-height: 1;
  color: var(--muted);
  vertical-align: middle;
  margin: 0 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.signe:hover {
  border-color: var(--acc);
  color: var(--text);
}
.signe.lu {
  border-color: rgba(224, 129, 74, 0.45);
  background: rgba(224, 129, 74, 0.1);
  color: var(--acc);
  font-weight: 600;
  padding: 0 5px;
  letter-spacing: 0.02em;
}
.signe-svg {
  display: inline-block;
  vertical-align: -0.18em;
}
/* horodatage du Journal (0.7.1) : discret, chiffres alignés */
.stamp { font-size: 10.5px; line-height: 1.3; color: var(--dim, var(--muted)); font-variant-numeric: tabular-nums; letter-spacing: .01em; margin-top: 2px; }
.livre-cell .stamp, .signe-card .stamp { font-size: 9.5px; margin-top: 3px; opacity: .85; }
h2 + .stamp { margin: -4px 0 8px; }

.livre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.livre-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 6px 4px;
  text-align: center;
  font-family: inherit;
}
.livre-cell.empty {
  opacity: 0.4;
  color: var(--dim);
}
.livre-cell.found {
  cursor: pointer;
  border-color: var(--line2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.livre-cell.found:hover {
  background: var(--panel2);
}
.livre-num {
  font-weight: 700;
  font-size: 1.1em;
}
.livre-cell.found .livre-num {
  color: var(--acc-base);
}
.livre-titre {
  font-size: 0.72em;
  line-height: 1.1;
  color: var(--text);
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.livre-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.7em;
  color: var(--acc-base);
}

.livre-imprime {
  margin: 12px 0;
  line-height: 1.5;
}
.livre-notes {
  margin-top: 16px;
  border-top: 1px dashed var(--line2);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.livre-note {
  font-family: "Caveat", var(--serif), cursive;
  font-size: 1.25em;
  line-height: 1.35;
  color: var(--text);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--acc-base);
  border-radius: 0 6px 6px 0;
}
.livre-sig {
  text-align: right;
  font-size: 0.9em;
  margin-top: 4px;
  color: var(--muted);
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.question-card.resolu {
  opacity: 0.65;
}
.question-title {
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 6px;
}
.question-title.strikethrough {
  text-decoration: line-through;
  color: var(--muted);
}
.question-aides {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  padding-left: 10px;
  border-left: 2px solid var(--intu);
}
.question-aide {
  font-size: 0.92em;
  line-height: 1.4;
}
.aide-num {
  font-weight: 600;
  color: var(--intu);
}

/* ------------------------------------------------------------- signes (6.1) */
/* une ligne de signes entièrement comprise, lue en français */
.lecture {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.92em;
  font-style: italic;
  color: var(--acc);
}
/* les signes de l’interface et des scènes */
.scene-signe { text-align: center; margin-bottom: 4px; }
.scene-signe .signe, .scene-ornement .signe { font-size: 1.15em; }
.scene-ornement { text-align: center; margin-top: 6px; }
.comptoir-signe { margin: 4px 0 10px; }
.forge-wrap { position: relative; }
.forge-mark {
  position: absolute;
  right: 14px;
  bottom: 0;
  height: 54px;
  display: flex;
  align-items: center;
  color: var(--acc-ink);
  font-size: 14px;
}
.forge-mark .signe { color: inherit; border-color: currentColor; opacity: 0.85; }
.forge-mark .signe.lu { background: rgba(0, 0, 0, 0.15); }
.livre-sig .signe { font-size: 1em; }
.signe-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 14px;
  color: var(--acc);
}
.signe-mot-decouvert {
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--acc);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.signe-lieux {
  font-size: 0.85em;
  text-align: center;
  color: var(--muted);
  margin-bottom: 16px;
  padding: 0 8px;
  line-height: 1.4;
}
.signe-form {
  margin-top: 8px;
  margin-bottom: 12px;
}
.signe-input-row {
  display: flex;
  gap: 8px;
}
.signe-input-row .input {
  flex: 1;
}
.signe-feedback {
  min-height: 24px;
  margin-top: 8px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 600;
}
.signe-feedback.proche {
  color: #e0814a;
}
.signe-feedback.non {
  color: var(--muted);
  font-weight: normal;
}
.signe-feedback.delai {
  color: var(--dim);
  font-size: 0.85em;
  font-weight: normal;
}

.signes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.signe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 6px;
  cursor: pointer;
  min-height: 72px;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.signe-card:hover {
  background: var(--panel2);
  border-color: var(--line2);
}
.signe-card.lu {
  border-color: rgba(224, 129, 74, 0.35);
  background: rgba(224, 129, 74, 0.05);
}
.signe-card-mot {
  font-weight: 700;
  font-size: 1em;
  color: var(--acc);
  margin-bottom: 4px;
}
.signe-card-dessin {
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signe-card-lieux {
  font-size: 0.75em;
  color: var(--muted);
}

/* ================================================================ 0.8.0 */
/* Quêtes : scénario, rituels, contrats du Troqueur */
.quest-tabs { display: flex; gap: 6px; margin: 8px 0 14px; border-bottom: 1px solid var(--line); padding-bottom: 6px; overflow-x: auto; }
.quest-tabs button { flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.quest-tabs button.on { background: var(--bg2); color: var(--text); border-color: var(--line2); }
.quest-hero { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 8%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); margin-bottom: 12px; }
.quest-chapter { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); font-weight: 700; margin-bottom: 4px; }
.quest-titre { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ritual-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 8px; }
.ritual-card.done { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.ritual-card.claimed { opacity: 0.7; }
.ritual-head { display: flex; align-items: center; gap: 8px; }
.ritual-ic { font-size: 20px; line-height: 1; }
.ritual-title { font-weight: 600; font-size: 14px; }
.ritual-prog-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px 0; }
.ritual-prog-bar i { display: block; height: 100%; background: var(--acc); border-radius: 999px; transition: width .3s ease; }
.ritual-card.done .ritual-prog-bar i { background: var(--good); }
.ritual-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.reward-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 85%, var(--bg)); border: 1px solid var(--line2); font-weight: 600; font-size: 11.5px; }

/* Troqueur Contrats & Rang */
.troqueur-rank { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, #ffd36b 40%, var(--line)); margin-bottom: 12px; }
.troqueur-rank-name { font-weight: 700; color: #ffd36b; font-size: 14px; margin-bottom: 2px; }
.contract-row { padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }

/* Carnet & Codex Prêt à fabriquer (0.8.0) */
.badge-ready { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); padding: 1px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); margin-left: 6px; }
.quick-make { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.rec.can-craft { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }

/* Domaine Vue Dense (0.8.0) */
.dom-ctrls { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.dom-dense .gis { padding: 4px 8px; margin: 3px 0; }
.dom-dense .gis-ic { width: 34px; height: 34px; font-size: 16px; }

/* Grand texte : la 4e colonne du Livre reste dans l’écran */
.livre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.livre-cell { min-width: 0; }
.livre-titre { overflow-wrap: anywhere; }

/* fenêtres : croix de fermeture toujours visible, focus lisible */
.modal-box { outline: none; }
.modal-x { position: sticky; top: 0; float: right; z-index: 2; width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 16px; }
.modal-x:focus-visible, .modal-box button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* la fête de découverte : un voile léger sur ce qu’il y a derrière, pour qu’on la lise seule */
.cele::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); animation: celeveil var(--ms, 1.9s) ease forwards; }
.cele .cb { position: relative; background-color: var(--panel); }
@keyframes celeveil { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* la règle d’une terre */
.dom-regle { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--line2); font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.dom-regle b { color: var(--text); }
.dom-regle.gene { border-left-color: var(--bad); }
.dom-regle.ok { border-left-color: var(--good); }

/* le Troqueur parle */
.troc-parole { margin: 6px 0 8px; padding: 12px 14px; min-height: 92px; background: var(--panel2); border-radius: 6px; line-height: 1.5; }
.troc-parole p { margin: 0; }
.troc-parole p.troc-moi { margin: 0 0 10px auto; max-width: 86%; padding: 6px 10px; border-radius: 10px 10px 2px 10px; background: var(--panel); color: var(--muted); text-align: right; }
.troc-parole p.troc-lui { padding-left: 10px; border-left: 3px solid var(--acc); }
.troc-stage { font-style: italic; margin-bottom: 8px !important; opacity: 0.85; }
.troc-choix { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.troc-rep { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; font-weight: normal; font-size: 13.5px; line-height: 1.4; transition: border-color .15s, background .15s; }
.troc-rep:hover, .troc-rep:focus-visible { border-color: var(--acc); background: var(--panel2); }
.troc-rep-k { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(197, 141, 78, 0.18); color: var(--acc); font-weight: bold; font-size: 12px; flex-shrink: 0; }
.troc-rep-txt { flex: 1 1 auto; color: var(--text); }
.troc-fin-bar { margin: 8px 0 4px; justify-content: flex-start; }
.troc-themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }

/* les fouilles : la ligne de l’expédition en cours, au-dessus de la Carte, et les trois durées */
.carte-fouille { display: block; position: sticky; top: 6px; z-index: 4; margin: 6px auto 0; padding: 8px 14px; max-width: 94%; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; text-align: center; cursor: pointer; }
.carte-fouille.pret { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(197, 141, 78, 0.35); }
.fouille-niv { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
/* les dons de la relève, les jours de présence et les seuils (0.9) */
.dons { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.don { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.don .mic { font-size: 22px; width: 28px; text-align: center; }
.don .btn { flex: 0 0 auto; }
.card.memdon { margin-bottom: 8px; }
.card.memdon .mic { font-size: 18px; }
.dom-don { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; margin-bottom: 8px; }
.dom-don span { float: right; opacity: 0.7; }
.icon-btn { position: relative; }
.icon-btn .dot-don { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--intu); box-shadow: 0 0 0 2px var(--panel); }
.jours { padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; border: 1px dashed var(--line); }
.seuil { margin: 6px 0 8px; }
.seuil .bar { margin-top: 4px; height: 6px; }
/* ===== VISITEURS DE PASSAGE (début) ===== */
#visiteurs { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.visiteur {
  position: absolute; top: var(--y, 30%); left: -64px; width: 56px; height: 56px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: inherit; cursor: pointer; pointer-events: auto;
  animation: vis-trav var(--dur, 12s) linear forwards;
}
.visiteur:hover, .visiteur:focus-visible, .visiteur:active { animation-play-state: paused; }
.visiteur:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.visiteur .vis-ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); animation: vis-bob 1.6s ease-in-out infinite; }
.visiteur .vis-luciole { width: 12px; height: 12px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 10px 4px rgba(255, 240, 140, .75); animation: vis-bob 1.2s ease-in-out infinite; }
@keyframes vis-trav { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 128px)); } }
@keyframes vis-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes vis-fond { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .visiteur, .visiteur.fixe { left: var(--x, 50%); animation: vis-fond .3s ease-out both !important; }
  .visiteur .vis-ic, .visiteur .vis-luciole { animation: none !important; }
}
.visiteur.fixe { left: var(--x, 50%); animation: vis-fond .3s ease-out both; }
.visiteur.fixe .vis-ic, .visiteur.fixe .vis-luciole { animation: none; }
/* ===== VISITEURS DE PASSAGE (fin) ===== */

/* ===== FIGURES DU COSMOS (début) ===== */
.fig-wrap { margin: 6px 0 14px; border-radius: 14px; overflow: hidden; background: linear-gradient(#03040c, #0a1026 60%, #1a1530); border: 1px solid var(--line); }
.fig-sky { position: relative; width: 100%; }
.fig-in { position: absolute; inset: 0; }
.fig-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fig-lines line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-lines line.on { stroke: rgba(255, 233, 168, .55); }
.fig-lines line.pale { stroke: rgba(190, 205, 255, .22); stroke-dasharray: 3 4; }
.fig-lines line.lien { stroke: rgba(190, 205, 255, .25); stroke-dasharray: 2 5; }
.fig-star, .fig-signe { position: absolute; transform: translate(-50%, -50%); border: 0; background: transparent; color: #dfe6ff; padding: 0; cursor: pointer; font: inherit; }
.fig-star { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.fig-star i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.fig-star.on i { background: #ffeeb8; box-shadow: 0 0 8px 3px rgba(255, 224, 140, .75); }
.fig-star.pale i { width: 8px; height: 8px; border: 1px solid rgba(190, 205, 255, .6); background: rgba(190, 205, 255, .12); }
.fig-signe { width: 92px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; border-radius: 12px; }
.fig-signe .signe-svg { width: 40px; height: 40px; }
.fig-signe.on { color: #ffeeb8; }
.fig-signe.on .signe-svg { filter: drop-shadow(0 0 4px rgba(255, 224, 140, .7)); }
.fig-signe.pale { color: rgba(190, 205, 255, .5); }
.fig-mot { font-family: var(--serif, inherit); font-size: 14px; line-height: 1.1; color: #ffeeb8; }
.fig-nom { position: absolute; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .02em; color: rgba(210, 220, 255, .6); pointer-events: none; white-space: nowrap; }
.fig-star:focus-visible, .fig-signe:focus-visible { outline: 2px solid #ffeeb8; outline-offset: 0; }
/* ===== FIGURES DU COSMOS (fin) ===== */

/* l’arbre de la Mémoire des mains : des branches qui montent depuis le Semeur */
.mtree { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin: 10px 0 0; padding: 4px 2px 0; min-height: 210px; }
.mbr { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.mbn { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.1; min-height: 22px; display: flex; align-items: flex-end; }
.mchain { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; position: relative; padding-bottom: 6px; }
.mchain::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: -4px; width: 2px; transform: translateX(-1px); background: var(--line2); }
.mnode { position: relative; z-index: 1; width: 52px; min-height: 52px; padding: 4px 2px 3px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; }
.mnode .mic { font-size: 20px; line-height: 1.1; }
.mnode .mpips { font-size: 7px; letter-spacing: -.5px; color: var(--muted); line-height: 1; }
.mnode.on { border-color: var(--acc); }
.mnode.on .mpips { color: var(--acc); }
.mnode.max { background: color-mix(in srgb, var(--good) 22%, var(--panel)); border-color: var(--good); }
.mnode.can { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 45%, transparent); }
.mnode.soon { border-style: dashed; }
.mnode.sel { outline: 2px solid var(--text); outline-offset: 2px; }
.mnode:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mroot { position: relative; margin: 2px 0 10px; text-align: center; font-size: 12px; color: var(--muted); }
.mroot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line2); z-index: 0; }
.mroot span { position: relative; z-index: 1; background: var(--bg2); padding: 0 10px; }
.mem.sel { border-left-color: var(--acc); }
.mem-liste { margin-top: 10px; }
.mem-liste summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
@media (prefers-reduced-motion: no-preference) { .mnode { transition: transform .12s, box-shadow .2s; } .mnode:active { transform: scale(.94); } }
@media (max-width: 350px) { .mtree { gap: 3px; } .mnode { width: 46px; } .mbn { font-size: 9px; } }
.mnode .mbar { display: block; width: 70%; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; margin-top: 3px; }
.mnode .mbar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.mnode.max .mbar i { background: var(--good); }
@media (max-width: 350px) { .mtree { padding: 4px 0 0; } }
.mbn { max-width: 100%; overflow-wrap: anywhere; } .mchain { max-width: 100%; }
/* ===== 0.10 : la relève expliquée, et ce qui vient de s’allumer ===== */
.chip.born, .age.born { animation: born 1.6s ease-out; }
.dom-terre.born { animation: land-born 1.8s ease-out; }
@keyframes land-born {
  0% { box-shadow: inset 0 0 0 2px transparent; }
  30% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 65%, transparent); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
.rel-cols { margin: 10px 0 6px; }
.rel-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 10px 0 2px; }
.rel-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rel-list li { position: relative; padding: 3px 0 3px 16px; }
.rel-list li::before { position: absolute; left: 2px; top: 4px; font-size: 10px; color: var(--muted); }
.rel-keep li::before { content: "✦"; color: var(--intu); }
.rel-reset li::before { content: "↺"; }
.rel-gain { font-size: 13px; margin: 8px 0 2px; }
.rel-gagne li::before { content: "+"; color: var(--good); font-weight: 700; font-size: 13px; top: 2px; }
.rel-gain b { color: var(--intu); }

/* les illustrations des terres : l’île sur la Carte, le décor derrière la fiche du Domaine */
.c-art { pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.c-hit { fill: transparent; stroke: none; }
.dom-terre.a-decor { position: relative; isolation: isolate; border-radius: 14px; overflow: hidden; padding: 6px 8px 8px; }
/* le décor ne couvre que la bande du titre, et s’efface avant les lignes : le texte des ressources se lit sur le fond uni */
.dom-terre.a-decor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 84px; z-index: -1; background: var(--decor) center top / cover no-repeat; opacity: .16;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
body.theme-dark .dom-terre.a-decor::before { opacity: .24; }
@media (prefers-reduced-data: reduce) { .dom-terre.a-decor::before { display: none; } }

/* Le Carnet prépare le lot sélectionné ; l’Arbre garde les relations entre découvertes. */
.carnet-lot { padding: 8px 0; border-block: 1px solid var(--line2); margin: 8px 0; }
.lot-titre { margin: 0 0 6px; font-size: 14px; }
.lot-cout, .lot-manques { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.lot-manques { margin-top: 6px; }
.carnet-lot p.tiny { margin: 5px 0 0; }
.carnet-situer { margin-top: 8px; }
.carnet-lot .ing { max-width: 100%; margin-right: 0; white-space: normal; overflow-wrap: anywhere; }
.carnet-acts { flex-wrap: wrap; }
@media (max-width: 359px) {
  .qtybar { gap: 4px; }
  .qtybar .tiny { display: none; }
}

/* ===== LE JUS (js/juice.js) ===== */
/* un appui : le bouton s’enfonce et s’éclaire, un anneau part du doigt */
.jpress { scale: .95; filter: brightness(1.18); transition: scale .06s ease-out, filter .06s ease-out; }
.jring { position: absolute; width: var(--s, 56px); height: var(--s, 56px); margin: calc(var(--s, 56px) / -2) 0 0 calc(var(--s, 56px) / -2); border-radius: 50%;
  border: 2px solid var(--c, var(--acc)); box-shadow: 0 0 12px var(--c, var(--acc)), inset 0 0 8px var(--c, var(--acc)); animation: jring var(--ms, 520ms) cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes jring { from { transform: scale(.15); opacity: .95; } to { transform: scale(1); opacity: 0; } }
.jflash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, var(--c, #fff), transparent 72%); opacity: 0; animation: jflash .55s ease-out; }
@keyframes jflash { from { opacity: var(--o, .3); } to { opacity: 0; } }
#app.jshake { animation: jshake .42s linear; }
@keyframes jshake { 0%, 100% { translate: 0 0; } 14% { translate: calc(var(--shake, 4px) * -1) calc(var(--shake, 4px) * .5); } 28% { translate: var(--shake, 4px) calc(var(--shake, 4px) * -.5); }
  42% { translate: calc(var(--shake, 4px) * -.7) calc(var(--shake, 4px) * -.3); } 56% { translate: calc(var(--shake, 4px) * .5) calc(var(--shake, 4px) * .3); } 72% { translate: calc(var(--shake, 4px) * -.25) 0; } }
/* le visiteur attrapé fait « pop » */
.vis-pop { position: absolute; font-size: 34px; line-height: 1; transform: translate(-50%, -50%); animation: vispop .5s ease-out forwards; filter: drop-shadow(0 0 10px #ffd36b); }
@keyframes vispop { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -64%) scale(1.7); } 100% { transform: translate(-50%, -120%) scale(.2); opacity: 0; } }
/* les fêtes rares : plus longues, plus grandes, avec un choc à l’arrivée */
.cele.t2 .cb, .cele.t3 .cb { animation: celepopbig var(--ms, 2.9s) cubic-bezier(.2, 1.4, .4, 1) forwards; border-color: var(--cc, var(--acc));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6), 0 0 56px color-mix(in srgb, var(--cc, var(--acc)) 55%, transparent); }
.cele.t2 .cn { font-size: 30px; }
.cele.t2 .ic.xl, .cele.t3 .ic.xl { animation: celeicbig .9s cubic-bezier(.2, 1.7, .4, 1); }
.cele.t3 .cb { padding: 26px 34px; gap: 6px; }
.cele.t3 .cn { font-size: 36px; text-shadow: 0 0 22px color-mix(in srgb, var(--cc, var(--acc)) 70%, transparent); }
.cele.t3 .ck { font-size: 13px; letter-spacing: .3em; color: color-mix(in srgb, var(--cc, var(--acc)) 55%, var(--text)); }
.cele.t3 .ic.xl { font-size: 64px; filter: drop-shadow(0 0 18px var(--cc, var(--acc))); }
.cele.t3 .cs { font-size: 15px; }
.cele .crays { position: absolute; left: 50%; top: 40%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc, var(--acc)) 38%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%);
  animation: crays var(--ms, 4.4s) linear forwards; }
@keyframes crays { 0% { transform: rotate(0) scale(.4); opacity: 0; } 8% { opacity: 1; transform: rotate(8deg) scale(1); } 85% { opacity: 1; } 100% { transform: rotate(60deg) scale(1.05); opacity: 0; } }
@keyframes celepopbig { 0% { transform: scale(.3); opacity: 0; } 6% { transform: scale(1.16); opacity: 1; } 10% { transform: scale(.97); } 14% { transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes celeicbig { 0% { transform: scale(.1) rotate(-40deg); } 55% { transform: scale(1.35) rotate(10deg); } 75% { transform: scale(.92) rotate(-4deg); } 100% { transform: none; } }
/* les trouvailles dorées brillent sur le toast aussi */
.toast-gold { animation: toastIn .3s ease-out, jgold 1.6s ease-in-out .3s 2; }
@keyframes jgold { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #ffd36b 45%, transparent), 0 0 22px #ffd36b; } }
@media (prefers-reduced-motion: reduce) {
  .jpress { scale: 1; }
  .cele .crays, .jring, .jflash, .vis-pop { display: none; }
  .cele.t2 .cb, .cele.t3 .cb { animation: celeveil var(--ms, 2.9s) ease forwards; }
  .cele.t2 .ic.xl, .cele.t3 .ic.xl { animation: none; }
  .toast-gold { animation: none; }
  #app.jshake { animation: none; }
}

/* Affichage compact du Domaine : les boutons d’un gisement ne gardent que leur symbole, côte à côte, la rangée perd la moitié de sa hauteur */
.dom-dense .gis-b .mini .bl { display: none; }
.dom-dense .gis-b .mini .bi { font-size: 16px; }
.dom-dense .gis-b { flex-direction: row; }
.dom-dense .gis-ic { width: 40px; height: 40px; flex-basis: 40px; }
.dom-dense .gis { min-height: 48px; }
@media (max-width: 430px) {
  .dom-dense .gis:not(.gact) { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 4px 0; gap: 6px; }
  .dom-dense .gis:not(.gact) .gis-b { flex-direction: row; max-width: none; }
  .dom-dense .gis:not(.gact) .gis-ic { width: 40px; height: 40px; }
}

/* le menu : des sections, des interrupteurs qui se lisent pareil partout */
.menu-sec { margin: 4px 0 10px; }
.menu-sec .sub { margin: 10px 0 2px; }
.menu-sec .menu-grid { margin: 8px 0 4px; }
.btn.sw { min-width: 104px; }
.btn.sw.on { background: color-mix(in srgb, var(--acc) 18%, var(--panel)); border-color: var(--acc); font-weight: 700; }

/* les ruines : un bloc replié sous ce qui se récolte */
.dom-ruines { margin: 6px 0 2px; border: 1px dashed var(--line2); border-radius: 12px; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.dom-ruines > summary { cursor: pointer; padding: 10px 12px; font-size: 14px; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.dom-ruines > summary::-webkit-details-marker { display: none; }
.dom-ruines > summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 20px; transition: transform .2s; }
.dom-ruines[open] > summary::after { transform: rotate(90deg); }
.dom-ruines .dom-ruine { margin: 0; border: 0; border-top: 1px dashed var(--line2); border-radius: 0; background: none; }
.dom-ruines-all { padding: 0 12px 8px; }