@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(90deg, #0d1516, #375257 18%, #1a2a2d 48%, #3a5b61 80%, #10191b);
  --basalt: repeating-linear-gradient(2deg, #77b6ae10 0 1px, transparent 1px 5px, #04080933 6px 7px), linear-gradient(110deg, #273e42, #141f21 48%, #284146);
}
.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: #c0f5ee;
  background: linear-gradient(180deg, #e5fffc 5%, #a2dfd7 43%, #70ada5 49%, #cefbf5 58%, #8ccfc6 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 1px #102225) drop-shadow(0 5px 25px #000);
  text-shadow: none;
}
.home { background-position: center 43%; }
.home:before {
  background: linear-gradient(180deg, #070a0980, #070a0912 28%, #08090725 65%, #070a0bed), linear-gradient(90deg, #04060560, transparent 30% 70%, #04060560);
}
.home-main { z-index: 2; }
.home-subtitle { color: #dbfffa; text-shadow: 0 2px 12px #000; }
.home .topbar, .game-topbar, .page .topbar {
  background: linear-gradient(180deg, #0c1314eb, #172224c9 75%, #090c0dd9);
  border-bottom: 3px double #79b1aa88;
  box-shadow: 0 4px 24px #0006, inset 0 1px #c1fff718;
}
.brand { letter-spacing: .12em; text-shadow: 0 2px 3px #000; }
.brand-mark { color: #b3f6ed; text-shadow: 0 0 17px #9bece177; }
.home-bottom { z-index: 2; }
.home-nav {
  background: linear-gradient(90deg, transparent, #152224dd 20% 80%, transparent);
  border-top: 3px double #7bb3ac88;
  border-bottom: 3px double #7bb3ac66;
  gap: 30px;
}
.home-nav button { font-size: 12px; color: #c2e1dd; }
.home-nav button:hover { color: #dffffb; text-shadow: 0 0 14px #a7eae1; }
.button, .icon-button, .resource-button, .resource-display {
  background: var(--basalt);
  border: 1px solid #5ea49b;
  box-shadow: inset 0 0 0 2px #0c1415, inset 0 0 0 3px #78b2aa3b, 0 3px 7px #0006;
  color: #caf0eb;
}
.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: #86b9b2; /* ornement */
}
.button::before { left: 11px; }
.button::after { right: 11px; }
.button:hover, .icon-button:hover {
  background: var(--basalt);
  box-shadow: inset 0 0 0 2px #0c1415, inset 0 0 0 3px #95d0c888, 0 0 20px #85cac130;
}
.button.primary {
  background: linear-gradient(180deg, #c0f5ee, #93d5cc 45%, #77bcb3 50%, #ace9e1);
  border: 1px solid #d2fff9;
  box-shadow: inset 0 0 0 2px #3f8077, inset 0 0 0 3px #cdfff880, 0 5px 22px #0008, 0 0 28px #90ede130;
  color: #173135;
  text-shadow: 0 1px #d5fff977;
}
.button.primary::before, .button.primary::after { color: #366770; }
.button.primary:hover { background: linear-gradient(180deg, #d0fff9, #9adbd2 48%, #93d8cf 51%, #cbfff8); }
.home-primary-actions .primary { min-height: 60px; min-width: 285px; }
.page {
  position: relative;
  isolation: isolate;
  background: linear-gradient(#0e1112e8, #0f1617e6), var(--scene-image, url("../assets/backgrounds/menu.png")) center / cover fixed;
}

.realm-art {
  border: var(--frame-border);
  outline: 1px solid #5ea49b66;
  outline-offset: 4px;
  box-shadow: var(--frame-inset), 0 8px 25px #0009;
}
.realm-art:before { background: linear-gradient(transparent 25%, #0b1011ef 94%); }
.realm-art h2 { font-size: 33px; color: #d6fffa; }
.stage-list-head { color: #a5d3cd; }
.stage-row { border-bottom-color: #77b5ad2b; }
.stage-row.current {
  background: linear-gradient(90deg, #529d933b, #304f552b);
  box-shadow: inset 0 1px #a1d9d233, inset 0 -1px #a1d9d233;
}
.stage-row:hover:not(:disabled) { background: #6fb9af30; }
.stage-name { color: #d1ede9; }
.stage-metric { color: #b3cac7; }

.family-focus-item .artifact-icon {
  background: radial-gradient(ellipse, #3e6b7355, #101718f2);
  border: 1px solid #60a49b5c;
  box-shadow: inset 0 0 9px #0007;
}
.game-page { isolation: isolate; }
[data-realm="crypt"] {
  --basalt: repeating-linear-gradient(172deg, #d1e1cf08 0 2px, transparent 3px 9px), linear-gradient(110deg, #293332, #151c1e 48%, #37413d);
  --carving: linear-gradient(110deg, #151c1d, #6e7767 18%, #293536 50%, #616a5d 85%, #141b1c);
}
[data-realm="temple"] {
  --basalt: repeating-linear-gradient(165deg, #c8eae508 0 1px, transparent 2px 9px), linear-gradient(110deg, #3d4b4e, #1f2526 48%, #41565a);
  --carving: linear-gradient(110deg, #2b3739, #88b2ac 18%, #41585c 50%, #92c1bb 85%, #263234);
}
[data-realm="dungeon"] {
  --basalt: repeating-linear-gradient(2deg, #a8fbf00b 0 1px, transparent 2px 6px), linear-gradient(110deg, #48231c, #251210 48%, #2e4c51);
  --carving: linear-gradient(110deg, #122225, #468980 18%, #203e43 50%, #4f998f 85%, #210c08);
}
.game-page:before { background: linear-gradient(#090c0d70, #0a101142 30%, #0c141552 75%, #070808cb); }
.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, #111e20e6, #1a2e32e3 48%, #131f21e6);
  border: 1px solid #84c0b85c;
  border-bottom: 0;
  box-shadow: inset 0 2px #bcf0e912, 0 -7px 28px #0003;
  margin: 0 9px;
}
.hud-stat .value { color: #cbfff8; text-shadow: 0 2px 3px #000; }
.hud-stat .label { color: #aed0cc; }
.hud-stat .detail { color: #9cb1ae; }
.family-focus-title { color: #d1f3ee; }
.board-frame {
  padding: 9px;
  background: var(--carving);
  border: 2px solid #86bbb4;
  box-shadow: 0 12px 35px #0009, inset 0 0 0 2px #162629, inset 0 0 0 4px #71a9a24a;
}
.board-frame:before, .board-frame:after {
  top: -12px; font-size: 26px;
  color: #b7ede6;
  text-shadow: 0 2px 2px #0d1d20, 0 0 12px #91e0d655;
}
.board-frame:before { left: -10px; }
.board-frame:after { right: -10px; }
#board { box-shadow: 0 0 0 1px #080d0e, 0 0 0 2px #7fb8b14f, inset 0 0 24px #0009; }
.bag-slot {
  background: radial-gradient(ellipse at 50% 100%, #466f7666, #11191be8), var(--basalt);
  border: 1px solid #7db2ab66;
  border-radius: 3px 3px 8px 8px;
  box-shadow: inset 0 3px 8px #000a, 0 1px #aeeae244;
}
.bag-slot.filled { border-color: #97d5cd; background: radial-gradient(ellipse, #3b717a4d, #10191b); }
.bag-slot:empty:before { content: "◇"; color: #98c9c333; font-size: 15px; }
.resource-text .resource-label { color: #afd2cd; }
.resource-text .resource-value { color: #d1fff9; text-shadow: 0 2px #000; }
.resource-button:hover:not(:disabled) { background: var(--basalt); box-shadow: inset 0 0 18px #8dd9cf26, 0 0 13px #80c7be33; }
.game-footer { color: #aac1be; text-shadow: 0 1px 4px #000; }
.modal {
  background: radial-gradient(ellipse at 50% 0, #55999029, transparent 65%), var(--basalt);
  border: 4px ridge #75a8a1;
  box-shadow: 0 25px 120px #000d, inset 0 0 0 3px #091011, inset 0 0 0 5px #92cfc744;
}
.modal-heading h2 { color: #c4f4ee; }

.modal-copy, .modal-heading p, .tutorial-step p, .tutorial-tip { color: #b9d3d0; }
.modal .stage-objectives { background: #0a0f1044; border-color: #6fa7a066; }
.modal .stage-objectives span { color: #b0d0cc; }
/* ---- 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 #5ea49b66;
  outline-offset: -8px;
  box-shadow: var(--frame-inset), 0 25px 120px #000d;
}
.modal-backdrop { background: #06090ad4; }
/* 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 #a7eae166; }
/* Le voyageur actif, en haut à droite, porte le même cadre que le bouton son. */
.profile-button {
  padding: 0 16px;
  background: var(--basalt);
  border: var(--frame-border);
  box-shadow: inset 0 0 0 2px #0c1415, inset 0 0 0 3px #78b2aa3b, 0 3px 7px #0006;
  font: 600 12px var(--display);
  letter-spacing: .08em;
  color: #caf0eb;
}
.profile-button:hover { box-shadow: inset 0 0 0 2px #0c1415, inset 0 0 0 3px #95d0c888, 0 0 20px #85cac130; }
/* Listes de stages et cartes : panneaux de basalte sombre au filet de nacre. */
.stages-list {
  padding: 10px 18px 18px;
  background: linear-gradient(160deg, #19272ad9, #0b1112e6);
  border: var(--frame-border);
  box-shadow: var(--frame-inset), 0 8px 25px #0009;
}
.stage-row.current { border-left-color: var(--gold); }

.profile-row, .import-summary, .stage-objectives, .result-stats {
  background: #0a0f1055;
  border: 1px solid var(--line);
}
.profile-row { box-shadow: inset 0 1px #c1fff70d; }
.profile-row:hover:not(.selected) { border-color: #95d0c888; background: #6fb9af0f; }
.profile-row.selected { background: linear-gradient(90deg, #529d933b, #304f552b); 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(#32545a55, #0b1314);
  border-radius: 50%;
}
.profile-check { color: var(--gold); }
.result-stats { padding-inline: 12px; }
.profile-form input {
  background: #070a0bcc;
  border: 1px solid #5ea49baa;
  box-shadow: inset 0 2px 6px #000a;
  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 #000a, 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: #070a0b;
  border: 1px solid #5ea49b;
  box-shadow: inset 0 2px 5px #000c;
  cursor: pointer;
}
.settings-row input[type="checkbox"]:checked:before {
  content: "◆"; color: var(--gold-bright); font-size: 12px; text-shadow: 0 0 8px #a7eae1;
}
.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(--basalt);
  border: var(--frame-border);
  box-shadow: var(--frame-inset), 0 8px 35px #000a;
  color: var(--text);
  font: 14px var(--serif);
  padding: 14px 26px;
}
.keyboard-hints kbd { background: #070a0b; border-color: #5ea49b88; color: var(--gold-bright); }
.rule-row h3 { color: #c4f0ea; font-size: 17px; }
.rule-bonus-grid h3 { font-size: 14px; }
.rule-row > .artifact-icon, .family-focus-item .artifact-icon {
  background: radial-gradient(ellipse, #3e6b7355, #101718f2);
  border: 1px solid #60a49b5c;
}
.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%, #b7c3b31f, 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%, #7de7d92c, 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(181, 255, 245, 0.18) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 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(150, 224, 214, 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 pierre marine et de nacre 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 #000d;
  background:
    radial-gradient(ellipse at 50% 0, #55999029, transparent 65%),
    var(--basalt) 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(175, 255, 244, 0.14), transparent 62%), linear-gradient(#1a2b2e, #0b1416);
  --modal-eyebrow: #afede5;
  --modal-title: #ddfdf9;
  --modal-line: #41676e;
  --modal-accent: #91e8dd;
}
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(#161d33, #0b0f1c);
  --modal-eyebrow: #abe6de;
  --modal-title: #daf6f2;
  --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(95, 201, 168, 0.13), transparent 62%), linear-gradient(#1b2221, #0d1110);
  --modal-eyebrow: #8fd6be;
  --modal-title: #dcf2ea;
  --modal-line: #47564f;
  --modal-accent: #5fc9a8;
  --basalt: linear-gradient(160deg, #3d4643, #1d2322 50%, #2d3533);
}
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(#1c1c2c, #0c0c14);
  --modal-eyebrow: #c8bcf2;
  --modal-title: #eee8ff;
  --modal-line: #4f5268;
  --modal-accent: #b69cf0;
  --basalt: linear-gradient(160deg, #383b4f, #1a1b26 50%, #2a2c3c);
}
body[data-scene="dungeon"] {
  --modal-frame: url("../assets/ui/frame-dungeon.svg");
  --modal-repeat: round;
  --modal-bg:
    radial-gradient(ellipse at 50% 0, rgba(142, 255, 240, 0.14), transparent 62%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(138, 255, 240, 0.12), transparent 70%),
    linear-gradient(#191d1e, #0d1010);
  --modal-eyebrow: #a5f2e8;
  --modal-title: #dcfffa;
  --modal-line: #42565a;
  --modal-accent: #a2fff3;
  --basalt:
    repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #2f3637, #181b1c 50%, #23292a);
}
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 #000;
}
body[data-scene] .modal-heading:after {
  color: var(--modal-accent);
}
body[data-scene] .modal .stage-objectives,
body[data-scene] .modal .result-stats {
  background: #070a0ab0;
  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 #070a0a,
    inset 0 0 0 3px color-mix(in srgb, var(--modal-accent) 30%, transparent),
    0 3px 7px #0006;
}
/* Illustration de chaque lieu sur ses sceaux. */
.realm-tab-emblem {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 3px #000a);
}

/* ---- 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(#3d585d, #213033);
  border: 1px solid #05090a;
  box-shadow:
    inset 0 1.5px #e1fffb60,
    inset 0 0 0 4px transparent,
    inset 0 0 0 5px #a5ded666,
    0 3px 7px #000a;
}
.tile-medallion,
.tile-copper {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #37595f, #0e181a 70%);
  border: 3px solid #8ed9cf;
  box-shadow:
    0 0 0 1px #0c181a,
    0 0 12px #b6fff566,
    0 3px 7px #000a;
}
.tile-copper {
  border-color: #74c9be;
  box-shadow:
    0 0 0 1px #0c181a,
    0 0 12px #9dfff266,
    0 3px 7px #000a;
}
.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 #60a49b5c;
  background: radial-gradient(ellipse, #3e6b7355, #101718f2);
}
.intro-family small {
  font: 12px/1.2 var(--serif);
  color: #b9d3d0;
  text-align: center;
}
.intro-family.is-new .artifact-icon {
  border-color: #cbfff8;
  box-shadow: 0 0 12px #adfff488;
}
.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: #10262a;
  background: linear-gradient(#e1fffb, #8de0d5);
  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;
  }
}