@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0152-0153, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --carving: linear-gradient(135deg, #454e73, #171c39 20%, #080d24 60%, #333d65);
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
}
.brand, h1, h2, h3, .home-nav button, .button, .text-button, .back-link, .eyebrow {
  font-family: var(--display);
}
.home-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: clamp(64px, 10vw, 144px);
  letter-spacing: .07em;
  color: #f5dcae;
  background: linear-gradient(180deg, #ffe5b4 5%, #dfc9a0 43%, #6f7698 49%, #fbe1b2 58%, #cfbb96 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 1px #0e1128) drop-shadow(0 5px 25px #000000);
  text-shadow: none;
}
.home { background-position: center 43%; }
.home:before {
  background: linear-gradient(180deg, #06071680, #06071612 28%, #05061525 65%, #060717ed), linear-gradient(90deg, #03041160, transparent 30% 70%, #03041160);
}
.home-main { z-index: 2; }
.home-subtitle { color: #ffe5b4; text-shadow: 0 2px 12px #000000; }
.home .topbar, .game-topbar, .page .topbar {
  background: linear-gradient(180deg, #090b1eeb, #121531c9 75%, #070818d9);
  border-bottom: 3px double #71789c88;
  box-shadow: 0 4px 24px #00000066, inset 0 1px #ffe5b418;
}
.brand { letter-spacing: .12em; text-shadow: 0 2px 3px #000000; }
.brand-mark { color: #f6ddaf; text-shadow: 0 0 17px #ecd4a877; }
.home-bottom { z-index: 2; }
.home-nav {
  background: linear-gradient(90deg, transparent, #10132edd 20% 80%, transparent);
  border-top: 3px double #737a9e88;
  border-bottom: 3px double #737a9e66;
  gap: 30px;
}
.home-nav button { font-size: 12px; color: #e1cba2; }
.home-nav button:hover { color: #ffe5b4; text-shadow: 0 0 14px #ead3a7; }
.button, .icon-button, .resource-button, .resource-display {
  background: var(--wood);
  border: 1px solid #697090;
  box-shadow: inset 0 0 0 2px #090b1e, inset 0 0 0 3px #72799d3b, 0 3px 7px #00000066;
  color: #f0d8ab;
}
.button { position: relative; font-size: 12px; letter-spacing: .09em; padding-inline: 34px; }
.button::before, .button::after {
  content: "◆";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 6px; color: #b9a889; /* ornement */
}
.button::before { left: 11px; }
.button::after { right: 11px; }
.button:hover, .icon-button:hover {
  background: var(--wood);
  box-shadow: inset 0 0 0 2px #090b1e, inset 0 0 0 3px #d0bc9788, 0 0 20px #cab79330;
}
.button.primary {
  background: linear-gradient(120deg, #384573, #202948 65%, #30274a);
  border: 1px solid #e4c777;
  box-shadow: inset 0 0 0 3px #111832, inset 0 0 0 4px #e4c77744, 0 0 28px #7a4bc230;
  color: #fff0bb;
  text-shadow: 0 1px #070b21;
}
.button.primary::before, .button.primary::after { color: #e4c777; }
.button.primary:hover { background: linear-gradient(120deg, #4d5e91, #303b62 65%, #43345f); }
.home-primary-actions .primary { min-height: 60px; min-width: 285px; }
.page {
  position: relative;
  isolation: isolate;
  background: linear-gradient(#0a0c20e8, #0c0e24e6), var(--scene-image, url("../assets/backgrounds/menu.png")) center / cover fixed;
}

.realm-art {
  border: var(--frame-border);
  outline: 1px solid #69709066;
  outline-offset: 4px;
  box-shadow: var(--frame-inset), 0 8px 25px #00000099;
}
.realm-art:before { background: linear-gradient(transparent 25%, #080a1cef 94%); }
.realm-art h2 { font-size: 33px; color: #ffe5b4; }
.stage-list-head { color: #d3bf99; }
.stage-row { border-bottom-color: #b5a4862b; }
.stage-row.current {
  background: linear-gradient(90deg, #646b8a3b, #252d5e2b);
  box-shadow: inset 0 1px #d9c49d33, inset 0 -1px #d9c49d33;
}
.stage-row:hover:not(:disabled) { background: #b9a88930; }
.stage-name { color: #edd5a9; }
.stage-metric { color: #cab793; }

.family-focus-item .artifact-icon {
  background: radial-gradient(ellipse, #343f8055, #0c0f25f2);
  border: 1px solid #6970905c;
  box-shadow: inset 0 0 9px #00000077;
}
.game-page { isolation: isolate; }
[data-realm="crypt"] {
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
  --carving: linear-gradient(135deg, #454e73, #171c39 20%, #080d24 60%, #333d65);
}
[data-realm="temple"] {
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
  --carving: linear-gradient(135deg, #454e73, #171c39 20%, #080d24 60%, #333d65);
}
[data-realm="dungeon"] {
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
  --carving: linear-gradient(135deg, #454e73, #171c39 20%, #080d24 60%, #333d65);
}
.game-page:before { background: linear-gradient(#07081870, #080a1c42 30%, #0a0c1f52 75%, #050513cb); }
.game-topbar, .game-table, .game-footer, .orientation-note { z-index: 2; }
.game-table { width: min(1500px, calc((100dvh - 322px) * 20 / 7), calc(100vw - 100px)); }
/* Past 1600px the HUD and the resource bar grow, so the board owes them more room. */
@media (min-width: 1600px) {
  .game-table { width: min(1500px, calc((100dvh - 342px) * 20 / 7), calc(100vw - 100px)); }
}
.game-hud {
  background: linear-gradient(90deg, #0e112ae6, #161b3ce3 48%, #0f122be6);
  border: 1px solid #c0ae8d5c;
  border-bottom: 0;
  box-shadow: inset 0 2px #f0d8ab12, 0 -7px 28px #00000033;
  margin: 0 9px;
}
.hud-stat .value { color: #ffe5b4; text-shadow: 0 2px 3px #000000; }
.hud-stat .label { color: #d0bc97; }
.hud-stat .detail { color: #71789c; }
.family-focus-title { color: #f3daad; }
.board-frame {
  padding: 9px;
  background: var(--carving);
  border: 2px solid #bbaa8a;
  box-shadow: 0 12px 35px #00000099, inset 0 0 0 2px #11142f, inset 0 0 0 4px #6c73954a;
}
.board-frame:before, .board-frame:after {
  top: -12px; font-size: 26px;
  color: #edd5a9;
  text-shadow: 0 2px 2px #0c0e24, 0 0 12px #e0caa155;
}
.board-frame:before { left: -10px; }
.board-frame:after { right: -10px; }
#board { box-shadow: 0 0 0 1px #060717, 0 0 0 2px #b8a7884f, inset 0 0 24px #00000099; }
.bag-slot {
  background: radial-gradient(ellipse at 50% 100%, #37428566, #0c0e24e8), var(--wood);
  border: 1px solid #72799d66;
  border-radius: 3px 3px 8px 8px;
  box-shadow: inset 0 3px 8px #000000aa, 0 1px #ead3a744;
}
.bag-slot.filled { border-color: #d5c09a; background: radial-gradient(ellipse, #4e536b4d, #0c0f25); }
.bag-slot:empty:before { content: "◇"; color: #c9b69333; font-size: 15px; }
.resource-text .resource-label { color: #d2be98; }
.resource-text .resource-value { color: #ffe5b4; text-shadow: 0 2px #000000; }
.resource-button:hover:not(:disabled) { background: var(--wood); box-shadow: inset 0 0 18px #d9c49d26, 0 0 13px #c7b49133; }
.game-footer { color: #c1af8e; text-shadow: 0 1px 4px #000000; }
.modal {
  background: radial-gradient(ellipse at 50% 0, #62688729, transparent 65%), var(--wood);
  border: 4px ridge #6c7294;
  box-shadow: 0 25px 120px #000000dd, inset 0 0 0 3px #070819, inset 0 0 0 5px #cfbb9644;
}
.modal-heading h2 { color: #f4dbad; }

.modal-copy, .modal-heading p, .tutorial-step p, .tutorial-tip { color: #d3bf99; }
.modal .stage-objectives { background: #07081944; border-color: #6b729366; }
.modal .stage-objectives span { color: #d0bc97; }
/* ---- Composants communs à tous les menus --------------------------------
   Un seul cadre, un seul ornement, une seule hiérarchie de boutons : l'accueil,
   les pages, les fenêtres et le plateau partagent ces recettes. */
.modal {
  border: var(--frame-border);
  outline: 1px solid #69709066;
  outline-offset: -8px;
  box-shadow: var(--frame-inset), 0 25px 120px #000000dd;
}
.modal-backdrop { background: #040513d4; }
/* Ornement : deux filets dorés encadrant une étoile, identique partout. */
.title-rule,
.modal-heading:after {
  content: "✧";
  display: block;
  width: 170px;
  margin: 0 auto;
  color: var(--gold);
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, var(--gold-deep)) left center / 42% 1px no-repeat,
    linear-gradient(270deg, transparent, var(--gold-deep)) right center / 42% 1px no-repeat;
}
.title-rule:before, .title-rule:after { display: none; }
.home .title-rule { margin-bottom: 22px; }
.modal-heading:after { margin-top: 20px; }

/* Liens secondaires : même voix que les boutons, sans cadre. */
.text-button,
.back-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.text-button:hover,
.back-link:hover { color: var(--gold-bright); text-shadow: 0 0 12px #ead3a766; }
/* Le voyageur actif, en haut à droite, porte le même cadre que le bouton son. */
.profile-button {
  padding: 0 16px;
  background: var(--wood);
  border: var(--frame-border);
  box-shadow: inset 0 0 0 2px #090b1e, inset 0 0 0 3px #72799d3b, 0 3px 7px #00000066;
  font: 600 12px var(--display);
  letter-spacing: .08em;
  color: #f0d8ab;
}
.profile-button:hover { box-shadow: inset 0 0 0 2px #090b1e, inset 0 0 0 3px #d0bc9788, 0 0 20px #cab79330; }
/* Listes de stages et cartes : panneaux de bois sombre au filet d'or. */
.stages-list {
  padding: 10px 18px 18px;
  background: linear-gradient(160deg, #131735d9, #080a1ce6);
  border: var(--frame-border);
  box-shadow: var(--frame-inset), 0 8px 25px #00000099;
}
.stage-row.current { border-left-color: var(--gold); }

.profile-row, .import-summary, .stage-objectives, .result-stats {
  background: #07081955;
  border: 1px solid var(--line);
}
.profile-row { box-shadow: inset 0 1px #ffe5b40d; }
.profile-row:hover:not(.selected) { border-color: #d0bc9788; background: #b9a8890f; }
.profile-row.selected { background: linear-gradient(90deg, #646b8a3b, #252d5e2b); border-color: var(--gold-deep); }
.profile-row .profile-avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  font-size: 20px;
  border: 1px solid var(--gold-deep);
  background: radial-gradient(#28306455, #080a1c);
  border-radius: 50%;
}
.profile-check { color: var(--gold); }
.result-stats { padding-inline: 12px; }
.profile-form input {
  background: #050614cc;
  border: 1px solid #697090aa;
  box-shadow: inset 0 2px 6px #000000aa;
  font: 14px var(--serif);
  color: var(--text);
}
.profile-form input::placeholder { color: var(--faint); }
.profile-form input:focus { border-color: var(--gold); outline: none; box-shadow: inset 0 2px 6px #000000aa, 0 0 0 1px var(--gold-deep); }
/* Cases à cocher et curseur aux couleurs du grimoire. */
.settings-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  display: grid; place-items: center;
  background: #050614;
  border: 1px solid #697090;
  box-shadow: inset 0 2px 5px #000000cc;
  cursor: pointer;
}
.settings-row input[type="checkbox"]:checked:before {
  content: "◆"; color: var(--gold-bright); font-size: 12px; text-shadow: 0 0 8px #ead3a7;
}
.settings-row input[type="range"] { accent-color: var(--gold); }
.settings-row label, .settings-label { font: 600 12px var(--display); letter-spacing: .06em; color: var(--text); }
.settings-row small { font: 12px var(--serif); letter-spacing: 0; color: var(--muted); }
#toast {
  background: var(--wood);
  border: var(--frame-border);
  box-shadow: var(--frame-inset), 0 8px 35px #000000aa;
  color: var(--text);
  font: 14px var(--serif);
  padding: 14px 26px;
}
.keyboard-hints kbd { background: #050614; border-color: #69709088; color: var(--gold-bright); }
.rule-row h3 { color: #f0d8ab; font-size: 17px; }
.rule-bonus-grid h3 { font-size: 14px; }
.rule-row > .artifact-icon, .family-focus-item .artifact-icon {
  background: radial-gradient(ellipse, #343f8055, #0c0f25f2);
  border: 1px solid #6970905c;
}
.hud-stat .label, .stage-list-head, .stage-objectives span, .result-stats span, .resource-text .resource-label {
  font-weight: 600;
}
.eyebrow { font-size: 12px; letter-spacing: .2em; font-weight: 700; }
.modal-heading .eyebrow, .realm-art .eyebrow { font-size: 12px; }
.stage-number { color: var(--muted); font-weight: 600; }
.profile-form .button { padding-inline: 30px; }
.settings-row small { margin-top: 3px; }
.living-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ambient-canvas { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.drifting-mist {
  position: absolute; left: -25%; right: -25%; bottom: -12%; height: 42%;
  background: radial-gradient(ellipse at 27% 70%, #7b96c31f, transparent 45%), radial-gradient(ellipse at 70% 80%, #cdd9d622, transparent 45%);
  filter: blur(24px);
  animation: mist-drift 24s ease-in-out infinite alternate;
}
[data-realm="crypt"] .drifting-mist { opacity: 1.9; height: 60%; }
[data-realm="dungeon"] .drifting-mist { background: radial-gradient(ellipse at 50% 80%, #e7d0a52c, transparent 60%); }
.game-page .drifting-mist { opacity: .55; }
.ember { display: none; }
@keyframes mist-drift { to { transform: translate(7%, -5%) scale(1.1); } }
.decor-paused .living-decor * { animation-play-state: paused !important; }
@media (max-width: 1000px) {
  .home-nav { gap: 16px; }
  .game-table { width: min(calc((100dvh - 280px) * 20 / 7), calc(100vw - 58px)); }
}
@media (max-width: 760px) {
  .home-nav .button { padding-inline: 4px; }
  .home-nav .button::before, .home-nav .button::after { display: none; }
  .button { padding-inline: 26px; }
  .stages-list { padding: 6px 8px 12px; }

  .stage-list-head, .stage-row { grid-template-columns: 1fr 58px 50px 46px; padding-inline: 6px; }
  .stage-name { font-size: 12px; gap: 8px; min-width: 0; }
  .stage-list-head { font-size: 12px; letter-spacing: .06em; }
  .profile-button { padding: 0 12px; }
  .profile-form { flex-wrap: wrap; }
  .profile-form input { flex-basis: 100%; }
  .profile-form .button { flex: 1; }
}
@media (max-width: 600px) {
  .home-title { font-size: clamp(45px, 11vw, 66px); }
  .home-nav { gap: 6px; }
  .home-nav button { font-size: 12px; }
  .game-table { width: calc(100vw - 20px); }
  .board-frame { padding: 4px; }

  .realm-art h2 { font-size: 28px; }
  .button { font-size: 12px; }
}
@media (orientation: portrait) {
  .game-location .separator { display: none; }
}
/* ---- Plancher de lecture (24 septembre 2026) ------------------------------
   Aucun texte sous 12 px. Les libellés en capitales passent en Cinzel ; les
   phrases en EB Garamond, dont l'œil est plus petit, commencent à 14 px. */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.modal-copy,
.tutorial-step p,
.tutorial-tip,
.rule-row p,
.rule-bonus-grid p,
.keyboard-hints,
.settings-row small,
.storage-note,
.profile-row small,
.form-error,
.import-summary,
.storage-warning,
.realm-note,
.journey-progress {
  font-size: 15px;
  line-height: 1.6;
}
.home-subtitle { font-size: 14px; }
#toast { font-size: 16px; }
.stage-objectives span,
.result-stats span,
.resource-text .resource-label,
.hud-stat .label {
  font-family: var(--display);
  font-size: 12px;
}
.stage-objectives strong,
.result-stats strong,
.realm-art .realm-stats,
.profile-row small {
  font-variant-numeric: lining-nums tabular-nums;
}
.stage-objectives strong,
.result-stats strong {
  font-family: var(--numeric);
  font-size: 30px;
  font-weight: 500;
}
/* ---- Victoire mise en scène -------------------------------------------------- */
.result-emblem {
  position: relative;
  overflow: hidden;
  padding-top: 12px;
}
.result-emblem .artifact-icon {
  position: relative;
  z-index: 1;
}
.result-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 229, 180, 0.18) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000000 18%, transparent 66%);
  mask: radial-gradient(circle, #000000 18%, transparent 66%);
}
.result-emblem.silver .result-rays {
  background: repeating-conic-gradient(rgba(230, 240, 250, 0.16) 0deg 7deg, transparent 7deg 20deg);
}
.result-emblem.bronze .result-rays {
  background: repeating-conic-gradient(rgba(224, 202, 161, 0.18) 0deg 7deg, transparent 7deg 20deg);
}
.result-emblem.lost .result-rays {
  display: none;
}
.result-emblem.lost .artifact-icon {
  filter: grayscale(0.6) brightness(0.8);
}

/* ---- Cadre de bois et de fer pour les fenêtres ------------------------------ */
.modal {
  border: 18px solid transparent;
  border-image: url("../assets/ui/frame.svg") 24 / 18px stretch;
  outline: none;
  box-shadow: 0 25px 120px #000000dd;
  background:
    radial-gradient(ellipse at 50% 0, #62688729, transparent 65%),
    var(--wood) padding-box;
}
.stage-objectives strong,
.result-stats strong {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .stage-objectives {
    gap: 14px;
  }
  .stage-objectives strong,
  .result-stats strong {
    font-size: 24px;
  }
}

/* ---- Fenêtres ouvertes pendant une partie : elles prennent la matière du lieu -- */
body[data-scene="village"] {
  --modal-frame: url("../assets/ui/frame-village.svg");
  --modal-repeat: stretch;
  --modal-bg: radial-gradient(ellipse at 50% 0, rgba(255, 229, 180, 0.14), transparent 62%), linear-gradient(#151938, #090b1e);
  --modal-eyebrow: #edd5a9;
  --modal-title: #fde3b3;
  --modal-line: #343f80;
  --modal-accent: #e8d1a6;
}
body[data-scene="castle"] {
  --modal-frame: url("../assets/ui/frame-castle.svg");
  --modal-repeat: stretch;
  --modal-bg: radial-gradient(ellipse at 50% 0, rgba(91, 143, 224, 0.16), transparent 62%), linear-gradient(#151a39, #0b0d23);
  --modal-eyebrow: #e6cfa5;
  --modal-title: #f6ddaf;
  --modal-line: #4a5a86;
  --modal-accent: #8fb4ff;
}
body[data-scene="crypt"] {
  --modal-frame: url("../assets/ui/frame-crypt.svg");
  --modal-repeat: round;
  --modal-bg: radial-gradient(ellipse at 50% 0, rgba(171, 202, 241, 0.13), transparent 62%), linear-gradient(#151938, #0a0c20);
  --modal-eyebrow: #abcaf1;
  --modal-title: #e8edff;
  --modal-line: #343f80;
  --modal-accent: #abcaf1;
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
}
body[data-scene="temple"] {
  --modal-frame: url("../assets/ui/frame-temple.svg");
  --modal-repeat: stretch;
  --modal-bg: radial-gradient(ellipse at 50% 0, rgba(182, 156, 240, 0.15), transparent 62%), linear-gradient(#151938, #090b1e);
  --modal-eyebrow: #c8bcf2;
  --modal-title: #eee8ff;
  --modal-line: #384489;
  --modal-accent: #b69cf0;
  --wood: radial-gradient(ellipse at 0 0, #53468444, transparent 65%), linear-gradient(135deg, #202344, #0d1129 60%, #292342);
}
body[data-scene="dungeon"] {
  --modal-frame: url("../assets/ui/frame-dungeon.svg");
  --modal-repeat: round;
  --modal-bg:
    radial-gradient(ellipse at 50% 0, rgba(174, 127, 224, 0.14), transparent 62%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(140, 122, 220, 0.12), transparent 70%),
    linear-gradient(#11142f, #090b1d);
  --modal-eyebrow: #d5bce9;
  --modal-title: #e8dcff;
  --modal-line: #2d3670;
  --modal-accent: #e8dcff;
  --wood:
    repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #202651, #10132d 50%, #171c3e);
}
body[data-scene] .modal {
  border-image-source: var(--modal-frame);
  border-image-repeat: var(--modal-repeat);
  background: var(--modal-bg) padding-box;
}
body[data-scene] .modal-heading .eyebrow {
  color: var(--modal-eyebrow);
}
body[data-scene] .modal-heading h2 {
  color: var(--modal-title);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--modal-accent) 35%, transparent),
    0 3px 10px #000000;
}
body[data-scene] .modal-heading:after {
  color: var(--modal-accent);
}
body[data-scene] .modal .stage-objectives,
body[data-scene] .modal .result-stats {
  background: #050615b0;
  border-color: var(--modal-line);
}
body[data-scene] .modal .stage-objectives span,
body[data-scene] .modal .result-stats span {
  color: var(--modal-eyebrow);
}
body[data-scene] .modal .button:not(.primary) {
  border-color: var(--modal-line);
  box-shadow:
    inset 0 0 0 2px #050615,
    inset 0 0 0 3px color-mix(in srgb, var(--modal-accent) 30%, transparent),
    0 3px 7px #00000066;
}
/* Illustration de chaque lieu sur ses sceaux. */
.realm-tab-emblem {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 3px #000000aa);
}

/* ---- Les icônes sur leur support, comme sur le plateau ------------------------ */
.tile-plaque,
.tile-medallion,
.tile-copper,
.tile-bare {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.tile-plaque {
  border-radius: 5px;
  background: linear-gradient(#2e3772, #191e42);
  border: 1px solid #040512;
  box-shadow:
    inset 0 1.5px #ffe5b460,
    inset 0 0 0 4px transparent,
    inset 0 0 0 5px #dec8a066,
    0 3px 7px #000000aa;
}
.tile-medallion,
.tile-copper {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2d366f, #0b0d23 70%);
  border: 3px solid #d9c49d;
  box-shadow:
    0 0 0 1px #0a0c20,
    0 0 12px #ffe5b466,
    0 3px 7px #000000aa;
}
.tile-copper {
  border-color: #c9b693;
  box-shadow:
    0 0 0 1px #0a0c20,
    0 0 12px #ffe5b466,
    0 3px 7px #000000aa;
}
.tile-plaque .artifact-icon,
.tile-medallion .artifact-icon,
.tile-copper .artifact-icon,
.tile-bare .artifact-icon {
  width: 80%;
  height: 80%;
  border: 0;
  background: none;
  box-shadow: none;
}
.tile-plaque .variant-glyph {
  left: 3px;
  bottom: 3px;
}
.tile-pair {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}
.tutorial-step .tile-plaque,
.tutorial-step .tile-medallion {
  margin-bottom: 10px;
}
.rule-row > .tile-plaque,
.rule-row > .tile-medallion,
.rule-row > .tile-copper,
.rule-row > .tile-bare,
.rule-row > .tile-pair {
  flex-shrink: 0;
}
.rule-bonus-grid .tile-medallion,
.rule-bonus-grid .tile-copper,
.rule-bonus-grid .tile-bare {
  width: 44px;
  height: 44px;
}

/* ---- Familles du stage dans l'intro ------------------------------------------ */
.intro-families {
  margin: 16px 0 4px;
  text-align: center;
}
.intro-families-title {
  display: block;
  margin-bottom: 10px;
  font: 600 12px var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--modal-eyebrow, var(--gold));
}
.intro-family-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
}
.intro-family {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 66px;
}
.intro-family .artifact-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #6970905c;
  background: radial-gradient(ellipse, #343f8055, #0c0f25f2);
}
.intro-family small {
  font: 12px/1.2 var(--serif);
  color: #d3bf99;
  text-align: center;
}
.intro-family.is-new .artifact-icon {
  border-color: #ffe5b4;
  box-shadow: 0 0 12px #ffe5b488;
}
.new-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
  font: 700 12px/1.35 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0e112a;
  background: linear-gradient(#ffe5b4, #e0caa1);
  border-radius: 3px;
  white-space: nowrap;
}
@media (max-height: 500px) {
  .intro-families {
    margin: 6px 0 0;
  }
  .intro-family small {
    display: none;
  }
  .intro-family {
    width: 44px;
  }
  .intro-family .artifact-icon {
    width: 34px;
    height: 34px;
  }
}