/* LakeQuest — feuille de style.
   Mise en page : barre haute collante, colonne centrée de 1120 px, barre d'onglets en bas sur téléphone.
   Signature : la coupe du lac, dont la profondeur atteinte mesure la complétion du jeu. */

:root {
  --bg: #edf3f5; --surface: #ffffff; --surface-2: #e2ebee; --ink: #0c2733; --ink-2: #4a6370; --line: #c9d7dd;
  --water: #0e7490; --water-2: #0a5c73; --on-water: #ffffff; --water-soft: #d8ebf1;
  --deep: #0b3344; --deep-2: #0e4359; --on-deep: #eaf6fa; --on-deep-2: #a8c9d5; --deep-line: #1c566c;
  --gold: #e09d0b; --gold-ink: #8a5800; --gold-soft: #fff1cc;
  --ok: #157a4d; --ok-soft: #dcf3e6; --ko: #bf3528; --ko-soft: #fbe4e0; --warn: #8c6200; --warn-soft: #fff0c7;
  --d1: #0e7490; --d2: #5546c0; --d3: #b4530a; --d4: #a02c5a;
  --bronze: #a8683a; --silver: #70858f; --plat: #2b98b3;
  --lk1: #56b9d4; --lk2: #0a3345;
  --shadow: 0 1px 2px rgba(12, 39, 51, .05), 0 8px 24px rgba(12, 39, 51, .06);
  --r: 14px; --r-sm: 10px;
  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06161d; --surface: #0c232d; --surface-2: #12313d; --ink: #e4f0f4; --ink-2: #93aebb; --line: #1e4353;
    --water: #4cc3de; --water-2: #7fd7ec; --on-water: #04222c; --water-soft: #123b49;
    --deep: #0a2a37; --deep-2: #0d3848; --on-deep: #eaf6fa; --on-deep-2: #9fc0cc; --deep-line: #1b4c5f;
    --gold: #ffc24a; --gold-ink: #ffd27a; --gold-soft: #3b2f0c;
    --ok: #4cd08c; --ok-soft: #10392a; --ko: #ff8172; --ko-soft: #44211d; --warn: #f2c14e; --warn-soft: #3a2f0e;
    --d1: #5cc8e0; --d2: #a9a4f7; --d3: #f0b35a; --d4: #f08fb5;
    --bronze: #c98a5a; --silver: #9fb2bc; --plat: #6fd3ea;
    --lk1: #2c8eab; --lk2: #03141a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #06161d; --surface: #0c232d; --surface-2: #12313d; --ink: #e4f0f4; --ink-2: #93aebb; --line: #1e4353;
  --water: #4cc3de; --water-2: #7fd7ec; --on-water: #04222c; --water-soft: #123b49;
  --deep: #0a2a37; --deep-2: #0d3848; --on-deep: #eaf6fa; --on-deep-2: #9fc0cc; --deep-line: #1b4c5f;
  --gold: #ffc24a; --gold-ink: #ffd27a; --gold-soft: #3b2f0c;
  --ok: #4cd08c; --ok-soft: #10392a; --ko: #ff8172; --ko-soft: #44211d; --warn: #f2c14e; --warn-soft: #3a2f0e;
  --d1: #5cc8e0; --d2: #a9a4f7; --d3: #f0b35a; --d4: #f08fb5;
  --bronze: #c98a5a; --silver: #9fb2bc; --plat: #6fd3ea;
  --lk1: #2c8eab; --lk2: #03141a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--deep); }
body.has-modal { overflow: hidden; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(26px, 4.2vw, 36px); font-weight: 750; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }
a { color: var(--water); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
code { font-family: var(--f-mono); font-size: .9em; background: var(--surface-2); padding: .08em .38em; border-radius: 5px; overflow-wrap: anywhere; }
.opt code, .q-text code, .rv-q code, .bopt code { background: color-mix(in srgb, currentColor 9%, transparent); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
#view:focus { outline: none; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ------------------------------------------------------------------ coque */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--deep); color: var(--on-deep); border-bottom: 1px solid var(--deep-line); }
.top-in { max-width: 1160px; margin: 0 auto; height: 58px; display: flex; align-items: center; gap: 18px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font: 750 19px var(--f-display); letter-spacing: -.02em; }
.brand-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--deep-2); border: 1px solid var(--deep-line); display: grid; place-items: center; }
.brand-ic svg { width: 22px; height: 22px; }
.brand-ic path { fill: var(--gold); }
.brand-ic circle { fill: var(--deep); }
.brand-n b { color: var(--gold); font-weight: 750; }
.nav { display: flex; gap: 2px; margin-left: 8px; flex: 1; min-width: 0; }
.nav a { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; color: var(--on-deep-2); text-decoration: none; font-weight: 550; font-size: 14px; white-space: nowrap; }
.nav a:hover { color: var(--on-deep); background: rgba(255, 255, 255, .06); }
.nav a.on { color: var(--on-deep); background: rgba(255, 255, 255, .1); }
[data-badge]::after { content: attr(data-badge); position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: #201400; font: 700 10.5px/17px var(--f-body); text-align: center; }
.chips { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tchip { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 17px; background: rgba(255, 255, 255, .07); border: 1px solid var(--deep-line); color: var(--on-deep); text-decoration: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.tchip:hover { background: rgba(255, 255, 255, .12); }
.tchip b { font-weight: 650; }
.tchip .ic { color: var(--on-deep-2); }
.tchip.hot .ic { color: var(--gold); }
.tchip.lvl { position: relative; padding-left: 4px; overflow: hidden; }
.lvl-n { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #201400; font: 750 13px/26px var(--f-display); text-align: center; }
.lvl-t { font-weight: 600; }
.lvl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.lvl-bar b { display: block; height: 100%; background: var(--gold); transition: width .5s; }
.banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: var(--warn-soft); color: var(--ink); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.banner em { font-style: normal; font-weight: 650; color: var(--water); text-decoration: underline; }
#view { max-width: 1120px; margin: 0 auto; padding-block: 24px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); min-height: 70vh; }
.foot { max-width: 1120px; margin: 0 auto; padding-block: 18px 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); color: var(--ink-2); font-size: 12.5px; border-top: 1px solid var(--line); }
.foot p { max-width: 75ch; }
.tabbar { display: none; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* ------------------------------------------------------------------ éléments communs */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.pad { padding: 20px; }
.eyebrow { font: 650 11.5px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.lead { color: var(--ink-2); font-size: 16px; max-width: 68ch; }
.small { color: var(--ink-2); font-size: 13px; }
.center { text-align: center; }
.empty { color: var(--ink-2); padding: 14px 0; }
.page-h { display: grid; gap: 8px; margin-bottom: 22px; }
.page-h.tight { margin-bottom: 16px; }
.page-h .dom { justify-self: start; }
.sec-title { margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-sub { color: var(--ink-2); margin: -6px 0 12px; font-size: 14px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.two-col > * { min-width: 0; }
.two-col .sec-title:first-child { margin-top: 30px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; background: none; border: 0; padding: 4px 0; }
.back:hover { color: var(--water); }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--surface-2); color: var(--ink); font-weight: 620; font-size: 14.5px; text-decoration: none; text-align: center; transition: background .15s, border-color .15s, transform .08s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--water); color: var(--on-water); }
.btn.primary:hover:not(:disabled) { background: var(--water-2); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover:not(:disabled) { border-color: var(--water); color: var(--water); }
.btn.danger { background: transparent; border-color: var(--ko); color: var(--ko); }
.btn.danger:hover { background: var(--ko-soft); }
.btn.big { min-height: 48px; padding: 11px 22px; font-size: 15.5px; }
.btn.sm { min-height: 32px; padding: 4px 11px; font-size: 13px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .45; }

.dom { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font: 650 11.5px/1.6 var(--f-body); letter-spacing: .02em; color: var(--dc); border: 1.5px solid var(--dc); white-space: nowrap; }
.d1 { --dc: var(--d1); } .d2 { --dc: var(--d2); } .d3 { --dc: var(--d3); } .d4 { --dc: var(--d4); }
.tag { display: inline-flex; padding: 2px 9px; border-radius: 20px; font: 650 11.5px/1.6 var(--f-body); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.new { background: var(--gold-soft); color: var(--gold-ink); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.ko { background: var(--ko-soft); color: var(--ko); }
.tag.mid { background: var(--water-soft); color: var(--water); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; text-decoration: none; }
.chip:hover { border-color: var(--water); color: var(--water); }
.chip.big { padding: 8px 13px; border-radius: 11px; text-align: left; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: var(--surface-2); font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill.gold { background: var(--gold-soft); color: var(--gold-ink); }
.pill.hot { background: var(--gold); color: #201400; }
.pill.low, .exam-clock.low { background: var(--ko-soft); color: var(--ko); }

.bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--water); transition: width .5s ease; }
.bar.gold i { background: var(--gold); }
.bar.ok i { background: var(--ok); }
.bar.d1 i { background: var(--d1); } .bar.d2 i { background: var(--d2); } .bar.d3 i { background: var(--d3); } .bar.d4 i { background: var(--d4); }
.ring { flex: none; }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--water); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring.gold .ring-fg { stroke: var(--gold); }
.ring.ok .ring-fg { stroke: var(--ok); }
.ring text { font: 700 9px var(--f-body); fill: var(--ink); }
.stars { display: inline-flex; gap: 2px; }
.stars .ic { width: 18px; height: 18px; }
.stars .on, .world-stars .on { color: var(--gold); }
.stars .off { color: var(--line); }

.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.seg button { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 620; font-size: 14px; color: var(--ink-2); }
.seg button small { font-weight: 500; font-size: 11.5px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg.small button { flex-direction: row; gap: 6px; padding: 6px 11px; font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 10px 14px; font-weight: 620; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.tabs button.on { color: var(--water); border-bottom-color: var(--water); }

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 8px 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span:first-of-type { flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .15s; margin-top: 2px; }
.switch > span:first-of-type::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.switch input:checked + span { background: var(--water); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.switch strong { display: block; font-weight: 620; }
.switch small { display: block; color: var(--ink-2); font-size: 13px; }
.field { display: grid; gap: 5px; margin: 12px 0; }
.field > span { font-weight: 620; font-size: 13.5px; }
.field input, .field select, textarea, .search input { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surface); min-height: 42px; }
textarea { font: 12px/1.4 var(--f-mono); resize: vertical; margin: 8px 0; }
.search { position: relative; margin-bottom: 6px; }
.search .ic { position: absolute; left: 13px; top: 13px; color: var(--ink-2); }
.search input { padding-left: 38px; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 650 11.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
.cellbar { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.cellbar .bar { flex: 1; }
.cellbar span { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--water-soft); font-size: 14px; }
.note .ic { margin-top: 2px; color: var(--water); }
.note.ok { background: var(--ok-soft); }
.note.ok .ic { color: var(--ok); }
.facts { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.all-good { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 620; margin-top: 22px; }
.medal { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--m, var(--silver)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.medal .ic { width: 22px; height: 22px; }
.g-b { --m: var(--bronze); } .g-s { --m: var(--silver); } .g-g { --m: var(--gold); } .g-p { --m: var(--plat); }
.gly { flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 5px; border-radius: 10px; background: var(--c, #46606f); color: #fff; font: 700 11.5px var(--f-mono); font-style: normal; letter-spacing: -.02em; }
.gly.big { min-width: 58px; height: 58px; border-radius: 14px; font-size: 15px; }
.c-stream { --c: #8250df; } .c-analytics { --c: #5a67d8; } .c-storage { --c: #2f8f4e; } .c-db { --c: #2869c7; } .c-integ { --c: #cf3f8f; } .c-compute { --c: #d9731a; }
.c-migr { --c: #0e9484; } .c-sec { --c: #c8372d; } .c-gov { --c: #8a6a16; } .c-ops { --c: #5f7285; } .c-dev { --c: #3f7fb0; } .c-ml { --c: #00838f; } .c-concept { --c: #6b5b95; } .c-ext { --c: #46606f; }

/* ------------------------------------------------------------------ toasts et modale */
/* En haut à droite, sous la barre : jamais par-dessus l'explication ni le bouton « suivante ». */
#toasts { position: fixed; top: calc(72px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 80; display: grid; gap: 8px; justify-items: end; width: min(92vw, 380px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px; background: var(--deep); color: var(--on-deep); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 14px; animation: toast-drop .3s ease both; max-width: 100%; }
.toast.out { opacity: 0; transform: translateY(-8px); transition: .3s; }
.toast.warn { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line); }
.toast.ko { background: var(--ko); color: #fff; }
.toast.trophy, .toast.level { padding: 12px 18px 12px 12px; border: 1.5px solid var(--gold); }
.toast-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--m, var(--gold)); color: #fff; }
.toast.level .toast-ic { color: #201400; }
.toast-tx small { display: block; opacity: .8; font-size: 12px; }
.toast-tx strong { font-family: var(--f-display); font-size: 15.5px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-drop { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
#modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.modal-back { position: absolute; inset: 0; background: rgba(3, 18, 25, .62); }
.modal-card { position: relative; width: min(100%, 440px); max-height: 88vh; overflow: auto; background: var(--surface); color: var(--ink); border-radius: 18px; padding: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); animation: toast-in .22s ease both; }
.modal-card.wide { width: min(100%, 580px); }
.modal-title { margin-bottom: 12px; font-size: 22px; }
.modal-body { display: grid; gap: 10px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }
.gloss-fr { font: 650 18px var(--f-display); color: var(--water); }
.gloss-hint { display: flex; gap: 10px; }
.gloss-hint .ic { margin-top: 3px; color: var(--ink-2); }

/* ------------------------------------------------------------------ accueil */
.hero { --lk1: #5cc4de; --lk2: #03161d; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 28px; border-radius: 20px; background: linear-gradient(135deg, var(--deep-2), var(--deep)); color: var(--on-deep); box-shadow: var(--shadow); }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.025em; }
.hero h1 span { color: var(--on-deep-2); }
.hero-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--on-deep-2); text-decoration: none; }
.hero-date strong { color: var(--on-deep); }
a.hero-date { text-decoration: underline; }
.hero-xp { margin-top: 20px; }
.hero-xp-h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--on-deep-2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.hero-xp-h span:first-child { color: var(--on-deep); font-weight: 650; }
.hero .bar, .hero .ring-bg { background: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .16); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hchip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--deep-line); }
.hchip strong { display: block; font: 700 16px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.hchip span { font-size: 12px; color: var(--on-deep-2); }
.hchip-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--on-deep-2); }
.hchip-ic .ic { width: 22px; height: 22px; }
.hchip-ic.hot { color: var(--gold); }
.hero-lake { display: block; color: inherit; text-decoration: none; }
.hero-lake p { margin-top: 4px; font-size: 13.5px; color: var(--on-deep-2); text-align: center; }
.hero-lake strong { color: var(--on-deep); }
.lake { display: block; width: 100%; height: auto; }
.lk-s1 { stop-color: var(--lk1); } .lk-s2 { stop-color: var(--lk2); }
.lk-line { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 7; }
.lk-depth { font: 600 15px var(--f-mono); fill: rgba(255, 255, 255, .78); }
.lk-surf { stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; fill: none; }
.lk-path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; }
.lk-mark { fill: var(--lk2); stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.lk-mark.on { fill: #f0a81c; stroke: #fff; }
.lk-chest rect, .lk-chest path { fill: #7d6a3a; stroke: #2a1f05; stroke-width: 1.2; }
.lk-chest.on rect, .lk-chest.on path { fill: #f0a81c; }
.lk-chest .lk-lockp { fill: #2a1f05; stroke: none; }
.lk-fish { fill: #f0a81c; stroke: #2a1f05; stroke-width: .9; stroke-linejoin: round; }
.lk-eye { fill: #2a1f05; }
.lk-tag { fill: #fff; }
.lk-tagt { font: 700 16px var(--f-mono); fill: #0c2733; }
.sug-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sug { position: relative; display: grid; align-content: start; gap: 3px; padding: 18px 44px 18px 18px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .12s; }
.sug:hover, .mission:hover, .flow-tile:hover, .codex-tile:hover, .scen:hover, .deck:hover, .duel-tile:hover { border-color: var(--water); transform: translateY(-2px); }
.sug-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--water-soft); color: var(--water); display: grid; place-items: center; margin-bottom: 8px; }
.sug-k { font: 650 11.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sug strong { font: 700 17px/1.25 var(--f-display); }
.sug-s { color: var(--ink-2); font-size: 13.5px; }
.sug-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--water); }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.mode:hover { border-color: var(--water); }
.mode-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--water); flex: none; }
.mode strong { display: block; font-weight: 650; }
.mode small { color: var(--ink-2); font-size: 12.5px; }
.dom-row { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dom-row:first-child { padding-top: 0; }
.dom-row-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dom-w { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.dom-row-f { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.dom-row-f strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.tro-mini { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.tro-mini li { display: flex; gap: 12px; align-items: center; }
.tro-mini strong { display: block; }
.tro-mini span { font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------------------ missions */
.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.quick { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.quick:hover { border-color: var(--water); }
.quick .ic { width: 22px; height: 22px; color: var(--water); }
.quick strong { display: block; font-weight: 650; line-height: 1.2; }
.quick small { color: var(--ink-2); font-size: 12.5px; }
.quick.done .ic { color: var(--ok); }
.world { margin-top: 28px; }
.world-h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.world-h p { color: var(--ink-2); font-size: 13.5px; }
.world-stars { margin-left: auto; display: flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.world-stars strong { color: var(--ink); }
.mission-grid, .flow-grid, .scen-grid, .duel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.mission, .flow-tile, .scen, .duel-tile { display: grid; gap: 6px; align-content: start; padding: 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .12s; }
.mission-top, .flow-tile-top, .scen-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.mission strong, .flow-tile strong, .scen strong, .duel-tile strong { font: 700 16px/1.25 var(--f-display); }
.mission-blurb { color: var(--ink-2); font-size: 13px; }
.mission-n { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.mission-best { font: 650 13px var(--f-mono); color: var(--ink-2); }
.mission.boss { background: var(--deep); color: var(--on-deep); border-color: var(--deep-line); }
.mission.boss .mission-blurb, .mission.boss .mission-n, .mission.boss .mission-best { color: var(--on-deep-2); }
.boss-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: var(--gold); }
.mission.boss.locked { opacity: .78; }
.mission.boss.locked .boss-ic { color: var(--on-deep-2); }
.intro { padding: 26px; display: grid; gap: 14px; justify-items: start; }
.intro-stats, .result-stats, .check-stats, .exam-card-s { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.intro-stats > div, .result-stats > div, .check-stats > div, .exam-card-s > div { display: grid; gap: 1px; }
.intro-stats strong, .result-stats strong, .check-stats strong, .exam-card-s strong { font: 750 20px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.intro-stats span, .result-stats span, .check-stats span, .exam-card-s span { font-size: 12.5px; color: var(--ink-2); }
.boss-intro { background: var(--deep); color: var(--on-deep); border-color: var(--deep-line); }
.boss-intro .lead, .boss-intro .intro-stats span { color: var(--on-deep-2); }
.prep { width: 100%; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.prep-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.week { display: flex; gap: 8px; }
.wk { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); }
.wk i { width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--line); display: grid; place-items: center; color: #fff; }
.wk.on i { background: var(--ok); border: 0; }
.big-n { font: 800 64px/1 var(--f-display); color: var(--water); margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.card.pad > .btn { margin-top: 12px; }
.boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.box-col { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); text-align: center; }
.box-col strong { color: var(--ink); font-size: 14px; }
.box-bar { width: 100%; height: 90px; border-radius: 8px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.box-bar i { display: block; width: 100%; background: var(--water); border-radius: 8px 8px 0 0; min-height: 2px; }
.box-col:first-child .box-bar i { background: var(--ko); }
.box-col:last-child .box-bar i { background: var(--ok); }

/* ------------------------------------------------------------------ questions */
.run { max-width: 800px; margin: 0 auto; }
.run-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.run-head .back { margin: 0; }
.run-title { flex: 1; min-width: 0; }
.run-title h1 { font-size: 22px; }
.run-title .eyebrow { margin-bottom: 2px; }
.run-side { display: flex; gap: 8px; }
.dots { display: flex; gap: 4px; margin-bottom: 14px; }
.dot { flex: 1; height: 5px; border-radius: 3px; background: var(--line); max-width: 44px; }
.dot.cur { background: var(--ink); }
.dot.ok { background: var(--ok); } .dot.ko { background: var(--ko); } .dot.set { background: var(--water); }
.dot.cur.ok { box-shadow: 0 0 0 2px var(--ok-soft); } .dot.cur.ko { box-shadow: 0 0 0 2px var(--ko-soft); }
.q { padding: 24px; }
.q-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.q-task { font-size: 12.5px; color: var(--ink-2); }
.q-num { font: 650 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.q-text { font-size: 17px; line-height: 1.6; max-width: 70ch; }
.q-hint { margin-top: 10px; font-size: 13px; font-weight: 620; color: var(--water); }
.gl { all: unset; cursor: help; border-bottom: 2px dotted var(--gold); font-weight: 600; }
.gl:hover, .gl:focus-visible { background: var(--gold-soft); }
.opts { display: grid; gap: 10px; margin-top: 20px; }
.opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .12s, background .12s; }
.opt:hover:not(:disabled) { border-color: var(--water); }
.opt-k { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font: 700 13px var(--f-mono); color: var(--ink-2); }
.opt-t { flex: 1; min-width: 0; padding-top: 3px; line-height: 1.5; overflow-wrap: anywhere; }
.opt-m { flex: none; padding-top: 3px; }
.opt.sel { border-color: var(--water); background: var(--water-soft); }
.opt.sel .opt-k { background: var(--water); color: var(--on-water); }
.opt:disabled { cursor: default; color: var(--ink); }
.opt.good { border-color: var(--ok); background: var(--ok-soft); }
.opt.good .opt-k { background: var(--ok); color: #fff; }
.opt.good .opt-m { color: var(--ok); }
.opt.bad { border-color: var(--ko); background: var(--ko-soft); }
.opt.bad .opt-k { background: var(--ko); color: #fff; }
.opt.bad .opt-m { color: var(--ko); }
.opt.dim { opacity: .62; }
.q-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.q-actions.split { justify-content: space-between; }
.fb { margin-top: 18px; padding: 16px 18px; border-radius: 12px; border-left: 4px solid var(--fc); background: var(--fs); }
.fb.ok { --fc: var(--ok); --fs: var(--ok-soft); } .fb.ko { --fc: var(--ko); --fs: var(--ko-soft); }
.fb-head { display: flex; align-items: center; gap: 8px; font: 700 16px var(--f-display); color: var(--fc); margin-bottom: 6px; }
.fb-text { max-width: 70ch; }
.fb-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.pulse-ok { animation: pulse-ok .5s ease; } .pulse-ko { animation: pulse-ko .4s ease; }
@keyframes pulse-ok { 40% { box-shadow: 0 0 0 5px var(--ok-soft), var(--shadow); } }
@keyframes pulse-ko { 20% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }

.exam-head { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px; background: var(--deep); color: var(--on-deep); margin-bottom: 12px; flex-wrap: wrap; }
.exam-id { font: 700 15px var(--f-display); }
.exam-pos { color: var(--on-deep-2); font-size: 14px; }
.exam-pos strong { color: var(--on-deep); }
.exam-clock { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; background: rgba(255, 255, 255, .1); font: 700 16px var(--f-mono); font-variant-numeric: tabular-nums; }
.exam-foot { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.exam-foot .btn.primary { margin-left: auto; }
.flagbtn.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.exam-grid { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.grid-n { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.gn { position: relative; height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); font: 600 13px var(--f-mono); color: var(--ink-2); }
.gn.set { background: var(--water); border-color: var(--water); color: var(--on-water); }
.gn.flag::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); }
.gn.cur { box-shadow: 0 0 0 2.5px var(--ink); }
.grid-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.grid-key .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line); background: var(--surface); margin-right: -8px; }
.grid-key .k.set { background: var(--water); border-color: var(--water); }
.grid-key .k.flag { background: var(--gold); border-color: var(--gold); border-radius: 50%; }
.check { padding: 26px; display: grid; gap: 16px; }
.check-stats .warn strong { color: var(--ko); }
.exam-quit { text-align: center; margin-top: 18px; }
.focus-mode .nav, .focus-mode .chips, .focus-mode .tabbar, .focus-mode .foot, .focus-mode .banner { display: none; }

.result { max-width: 860px; margin: 0 auto; }
.result-hero { padding: 30px; display: grid; gap: 12px; justify-items: start; border-top: 5px solid var(--tc, var(--water)); }
.result-hero.good { --tc: var(--ok); } .result-hero.mid { --tc: var(--gold); } .result-hero.low { --tc: var(--ko); }
.result-hero h1 { font-size: clamp(30px, 5vw, 42px); }
.result-stars .ic { width: 38px; height: 38px; }
.result-stars .stars { gap: 6px; }
.result-stats { margin: 6px 0; padding: 14px 0; border-block: 1px solid var(--line); width: 100%; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-list { display: grid; gap: 10px; }
.rv { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rv summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.rv summary::-webkit-details-marker { display: none; }
.rv-n { flex: none; width: 30px; font: 650 13px var(--f-mono); color: var(--ink-2); }
.rv-s { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); }
.rv.ko .rv-s { background: var(--ko); }
.rv-s .ic { width: 15px; height: 15px; }
.rv-q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.rv[open] .rv-q { white-space: normal; font-weight: 600; }
.rv-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.rv-body .q-meta { margin: 12px 0 0; }
.rv-body .opts { margin-top: 12px; gap: 7px; }
.rv-body .opt { padding: 9px 12px; font-size: 14px; }
.rv-line { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.rv-line strong { color: var(--ink); }

/* ------------------------------------------------------------------ examen */
.resume { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 2px solid var(--gold); margin-bottom: 18px; }
.resume-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.exam-opts { margin-bottom: 14px; padding-block: 10px; }
.exam-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-wide { margin-top: 14px; }
.exam-card { display: grid; gap: 14px; align-content: start; }
.exam-card-h { display: flex; align-items: center; gap: 14px; }
.exam-card-h p { color: var(--ink-2); font-size: 13.5px; }
.exam-letter { flex: none; width: 54px; height: 54px; border-radius: 14px; background: var(--deep); color: var(--gold); font: 800 28px/54px var(--f-display); text-align: center; }
.exam-card-t { color: var(--ink-2); font-size: 14px; }
.exam-random { margin-top: 14px; display: grid; gap: 14px; justify-items: start; }
.exam-random p { color: var(--ink-2); max-width: 68ch; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hist li { display: flex; align-items: center; gap: 12px; }
.hist li > div { flex: 1; min-width: 0; }
.hist strong { display: block; }
.hist li span { font-size: 13px; color: var(--ink-2); }
.hist .hist-score { flex: none; width: 58px; padding: 6px 0; border-radius: 9px; text-align: center; font: 700 15px var(--f-mono); color: #fff; background: var(--silver); }
.hist .hist-score.ok { background: var(--ok); } .hist .hist-score.ko { background: var(--ko); }
.spark { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-bottom: 16px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.spark span { flex: 1; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--ko); }
.spark span.ok { background: var(--ok); }
.spark-pass { position: absolute; left: 0; right: 0; bottom: 68.9%; border-top: 1.5px dashed var(--ink-2); }
.exam-result { max-width: 900px; margin: 0 auto; }
.score-card { padding: 30px; display: grid; gap: 12px; justify-items: start; border-top: 6px solid var(--tc); }
.score-card.pass { --tc: var(--ok); } .score-card.fail { --tc: var(--ko); }
.score-big { display: flex; align-items: baseline; gap: 10px; }
.score-big strong { font: 800 clamp(56px, 12vw, 92px)/.95 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.score-big span { color: var(--ink-2); font-size: 17px; }
.verdict { font: 700 20px var(--f-display); color: var(--tc); }
.scale { width: 100%; margin: 6px 0 4px; }
.scale-track { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); }
.scale-track i { display: block; height: 100%; border-radius: 6px; background: var(--tc); }
.scale-track b { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--ink); }
.scale-lab { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font: 600 12px var(--f-mono); color: var(--ink-2); }
.scale-pass { position: absolute; transform: translateX(-50%); color: var(--ink); white-space: nowrap; }
.dom-table td:first-child { min-width: 230px; }
.exam-result .seg { margin-bottom: 14px; }

/* ------------------------------------------------------------------ blitz */
.deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.deck { display: grid; gap: 6px; padding: 22px; text-align: left; color: var(--ink); transition: border-color .15s, transform .12s; }
.deck strong { font: 700 20px var(--f-display); }
.deck span { color: var(--ink-2); }
.deck small { font: 600 12.5px var(--f-mono); color: var(--ink-2); margin-top: 6px; }
.deck-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink) !important; display: grid; place-items: center; margin-bottom: 6px; }
.blitz { max-width: 680px; margin: 0 auto; }
.blitz-time { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.blitz-time i { display: block; height: 100%; background: var(--gold); transition: width .2s linear; }
.blitz-nums { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.blitz-card { padding: 30px 24px; text-align: center; min-height: 150px; display: grid; align-content: center; gap: 8px; }
.blitz-clue { font: 650 clamp(19px, 3.6vw, 25px)/1.35 var(--f-display); text-wrap: balance; }
.bopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bopt { display: flex; align-items: center; gap: 10px; padding: 15px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 620; text-align: left; min-height: 62px; }
.bopt:hover { border-color: var(--water); }
.bopt.good { border-color: var(--ok); background: var(--ok-soft); }
.bopt.bad { border-color: var(--ko); background: var(--ko-soft); }
.bopt.dim { opacity: .5; }
.bopts.two .bopt { justify-content: center; font-size: 18px; }
.miss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.miss-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.miss-list span { color: var(--ink-2); font-size: 14px; }
.miss-list small { color: var(--ink-2); }

/* ------------------------------------------------------------------ chantier */
.scen-run { display: grid; gap: 16px; }
.brief { display: grid; gap: 12px; justify-items: start; }
.reqs { margin: 0; padding-left: 20px; display: grid; gap: 5px; max-width: 70ch; }
.chain { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.slot { flex: 1 1 150px; position: relative; display: grid; gap: 3px; align-content: start; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--surface); min-width: 0; }
.slot.set { border-style: solid; }
.slot.open { border-color: var(--water); box-shadow: 0 0 0 3px var(--water-soft); }
.slot-n { font: 700 11px var(--f-mono); color: var(--ink-2); }
.slot-l { font: 650 11.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.slot strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.slot:not(.set) strong { color: var(--ink-2); font-weight: 500; }
.slot.ok { border-color: var(--ok); background: var(--ok-soft); opacity: 1; }
.slot.ko { border-color: var(--ko); background: var(--ko-soft); opacity: 1; }
.slot-m { position: absolute; top: 10px; right: 10px; }
.slot.ok .slot-m { color: var(--ok); } .slot.ko .slot-m { color: var(--ko); }
.slot-arrow { display: grid; place-items: center; color: var(--ink-2); }
.slot-panel h2 { margin-bottom: 6px; }
.slot-ask { color: var(--ink-2); max-width: 70ch; }
.slot-fb { border-left: 4px solid var(--fc); }
.slot-fb.ok { --fc: var(--ok); } .slot-fb.ko { --fc: var(--ko); }
.slot-fb .rv-line { margin: 0 0 6px; }

/* ------------------------------------------------------------------ flux animés */
.flow-min { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.flow-actors { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.flow-actors .gly { min-width: 30px; height: 26px; border-radius: 7px; font-size: 9.5px; }
.flow-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stage { overflow: hidden; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.stage-step { font: 650 12.5px var(--f-mono); color: var(--ink-2); }
.stage-scroll { overflow-x: auto; background: var(--bg); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; }
.stage-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.link { stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .55; }
.live { stroke: var(--water); stroke-width: 2.6; fill: none; }
.arr { fill: var(--water); }
.node-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: stroke .2s; }
.node-tile { fill: var(--c, #46606f); }
.node-g { fill: #fff; font: 700 12.5px var(--f-mono); }
.node-g.sm { font-size: 9px; }
.node-l { fill: var(--ink); font: 650 15px var(--f-body); }
.node-l.sm { font-size: 12px; }
.node-s { fill: var(--ink-2); font: 500 12.5px var(--f-body); }
.node-st { fill: var(--water); font: 650 12.5px var(--f-mono); }
.node.src .node-box { stroke: var(--water); stroke-width: 2.2; }
.node.dst .node-box { stroke: var(--gold); stroke-width: 2.6; }
.node.hit { animation: node-hit .55s ease; transform-box: fill-box; transform-origin: center; }
.node.work .node-tile { animation: node-work .5s ease-in-out infinite alternate; }
@keyframes node-hit { 35% { filter: drop-shadow(0 0 10px var(--gold)); } }
@keyframes node-work { to { opacity: .45; } }
.pkt rect { fill: var(--gold); stroke: #2a1f05; stroke-width: 1; }
.pkt text { fill: #201400; font: 700 13px var(--f-mono); }
.life { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.sq { cursor: pointer; }
.sq-line { stroke: var(--ink-2); stroke-width: 2; fill: none; }
.sq text { font: 600 12.5px var(--f-mono); fill: var(--ink); }
.sq.past { opacity: .55; }
.sq.cur .sq-line { stroke: var(--water); stroke-width: 2.8; stroke-dasharray: 600; animation: draw .6s ease both; }
@keyframes draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ctl-btns { display: flex; align-items: center; gap: 6px; }
.ctl { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); }
.ctl:hover { border-color: var(--water); color: var(--water); }
.ctl.main { width: 50px; height: 50px; background: var(--water); border-color: var(--water); color: var(--on-water); }
.ctl.main:hover { background: var(--water-2); color: var(--on-water); }
.ctl.main .ic { width: 22px; height: 22px; }
.autobar { height: 3px; background: var(--surface-2); }
.autobar i { display: block; height: 100%; width: 0; background: var(--gold); }
.insp { padding: 20px; display: grid; gap: 10px; position: sticky; top: calc(74px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 96px); overflow: auto; }
.insp h2 { font-size: 19px; }
.insp h3 { margin-top: 8px; font: 650 11.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.insp h3 code { text-transform: none; letter-spacing: 0; }
.actor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.actor-list li { display: flex; align-items: center; gap: 10px; }
.actor-list .gly { min-width: 34px; height: 30px; border-radius: 8px; font-size: 10px; }
.actor-list strong { display: block; font-size: 14px; }
.actor-list small { color: var(--ink-2); }
.fields { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fields > div { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr); gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.fields > div:last-child { border-bottom: 0; }
.fields dt { font: 600 12px var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.fields dd { margin: 0; display: grid; gap: 3px; min-width: 0; }
.fields code { background: none; padding: 0; font-size: 12.5px; }
.fields small { color: var(--ink-2); font-size: 12.5px; }
.trap { display: flex; gap: 12px; padding: 13px 15px; border-radius: 12px; background: var(--gold-soft); margin-top: 6px; }
.trap > .ic { flex: none; margin-top: 2px; color: var(--gold-ink); }
.trap > div > strong:first-child { display: block; font: 700 13px var(--f-display); color: var(--gold-ink); }
.trap p strong { color: var(--gold-ink); }
.trap p { font-size: 14px; }
.log { margin-top: 16px; }
.log table { font-size: 13.5px; }
.log td code { white-space: nowrap; }
.log tbody tr { cursor: pointer; }
.log tbody tr:hover { background: var(--surface-2); }
.log tr.cur { background: var(--water-soft); }
.log tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--water); }
.log .empty-row td { color: var(--ink-2); cursor: default; }
.flow-end { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: center; border-left: 5px solid var(--gold); }
.flow-end.done { border-left-color: var(--ok); }
.takeaways { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; max-width: 70ch; }
.docs { margin-top: 12px; }
.docs .ic { width: 13px; height: 13px; margin-left: 3px; }
.flow-end-acts { display: grid; gap: 10px; }

/* ------------------------------------------------------------------ codex */
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.codex-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .12s; }
.codex-tile > span:nth-of-type(1) { flex: 1; min-width: 0; }
.codex-tile strong { display: block; font-weight: 650; line-height: 1.25; }
.codex-tile small { display: block; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-tile { justify-items: start; }
.gloss-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 16px; }
.gloss { display: grid; gap: 3px; padding: 15px; }
.gloss strong { font: 700 15px var(--f-mono); }
.gloss span { color: var(--water); font-weight: 650; }
.gloss p { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.task-table td:nth-child(2) { min-width: 240px; }
.cardv { display: grid; gap: 10px; }
.cardv.full { padding: 28px; max-width: 860px; }
.cardv-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.cardv-h > div:nth-of-type(1) { flex: 1; min-width: 200px; }
.cardv-m { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.card-tag { font: 600 17px/1.45 var(--f-display); max-width: 62ch; }
.cardv h3 { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--water); }
.card-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 72ch; }
.card-list.traps li::marker { color: var(--gold); }
.card-vs { max-width: 72ch; }
.cardv-f { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.duel-table th[scope="row"] { font-weight: 650; white-space: nowrap; background: var(--surface-2); }
.duel-table td { min-width: 170px; }
.duel .trap { margin: 16px 0; }

/* ------------------------------------------------------------------ trophées et profil */
.depth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 22px; align-items: center; }
.depth-lake { border-radius: 12px; overflow: hidden; background: var(--deep); }
.depth-n { margin-bottom: 8px; color: var(--ink-2); }
.depth-n strong { font: 800 34px var(--f-display); color: var(--ink); }
.depth-parts { display: grid; gap: 9px; }
.part { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.part-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.part-h strong { font-variant-numeric: tabular-nums; }
.part small { font-size: 11.5px; color: var(--ink-2); }
.part:hover .part-h span { color: var(--water); text-decoration: underline; }
.tro-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tro-count { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tro-count strong { font: 750 17px var(--f-display); font-variant-numeric: tabular-nums; }
.tro-count span:last-child { color: var(--ink-2); font-size: 13px; }
.tro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tro { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.tro > div { flex: 1; min-width: 0; }
.tro strong { font: 700 16px var(--f-display); }
.tro p { color: var(--ink-2); font-size: 13.5px; }
.tro:not(.got) .medal { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }
.tro.got { border-color: var(--m); box-shadow: inset 4px 0 0 var(--m), var(--shadow); }
.tro-date, .tro-xp { flex: none; font: 600 11.5px var(--f-mono); color: var(--ink-2); text-align: right; }
.tro-p { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.tro-p .bar { flex: 1; height: 6px; }
.tro-p span { font: 600 11.5px var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.me { display: flex; align-items: center; gap: 18px; }
.me-badge { position: relative; flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--deep); color: var(--gold); display: grid; place-items: center; }
.me-badge .ic { width: 38px; height: 38px; }
.me-badge b { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #201400; font: 750 13px/26px var(--f-display); text-align: center; border: 2px solid var(--surface); }
.me-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.me-main strong { font: 700 19px var(--f-display); }
.me-main span { color: var(--ink-2); font-size: 13.5px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stat { padding: 14px; display: grid; gap: 2px; }
.stat strong { font: 750 24px/1.15 var(--f-display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-2); }
.heat { display: flex; gap: 4px; }
.hm-col { display: grid; gap: 4px; flex: 1; max-width: 22px; }
.hm { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--surface-2); }
.hm.l1 { background: color-mix(in srgb, var(--water) 30%, var(--surface-2)); }
.hm.l2 { background: color-mix(in srgb, var(--water) 55%, var(--surface-2)); }
.hm.l3 { background: color-mix(in srgb, var(--water) 80%, var(--surface-2)); }
.hm.l4 { background: var(--water); }
.hm.lx { background: transparent; border: 1px dashed var(--line); }
.hm-key { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.hm-key .hm { width: 12px; }
.form .switch { border-top: 1px solid var(--line); padding: 12px 0; }
.topic-table td { vertical-align: middle; }
.topic-table td:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topic-table a { color: var(--ink); text-decoration: none; }
.topic-table a:hover { color: var(--water); text-decoration: underline; }
.about { margin-top: 28px; color: var(--ink-2); font-size: 13px; max-width: 75ch; }

/* ------------------------------------------------------------------ adaptation aux petits écrans */
@media (max-width: 980px) {
  .nav { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 11px; font-weight: 600; }
  .tabbar a .ic { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--water); background: var(--water-soft); }
  .tabbar [data-badge]::after { right: calc(50% - 24px); top: 0; }
  #view { padding-bottom: 96px; }
  .foot { padding-bottom: 100px; }
  #toasts { top: calc(64px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; width: auto; justify-items: center; }
  .focus-mode #view { padding-bottom: 40px; }
  .flow-main, .flow-end { grid-template-columns: minmax(0, 1fr); }
  .insp { position: static; max-height: none; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero, .two-col, .depth, .exam-grid2, .deck-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 20px; gap: 16px; }
  .sug-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-grid, .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tro-list { grid-template-columns: minmax(0, 1fr); }
  .tro-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q, .check, .intro, .result-hero, .score-card, .cardv.full { padding: 18px; }
  .q-text { font-size: 16px; }
  .slot-arrow { display: none; }
  .two-col .sec-title:first-child { margin-top: 24px; }
  .exam-foot .btn { flex: 1 1 calc(50% - 4px); }
  .exam-foot .btn.primary { margin-left: 0; }
  .tro-date, .tro-xp { display: none; }
  /* Journal des étapes : sur téléphone, l'émetteur et le destinataire se lisent sur la scène. */
  .log th:nth-child(2), .log td:nth-child(2), .log th:nth-child(3), .log td:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  .lvl-t { display: none; }
  .tchip.lvl { padding-right: 4px; }
  .top-in { gap: 10px; }
  .brand-n { font-size: 17px; }
  .bopts:not(.two) { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boxes { gap: 4px; }
  .box-col span { font-size: 10px; }
  .pad { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Un chemin S3 ou un nom long ne doit jamais élargir la page. */
#view p, #view li, #view td, #view span, #view summary { overflow-wrap: anywhere; }

/* Commentaire propre à chaque option (questions importées), affiché à la correction. */
.opt-fb { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-2); }