/* Branchement Fusion des écrans déjà en jeu.
   Consomme tokens.css et components.css. Aucune couleur hors jeton.
   Ne vise ni .b04-* ni .b07-* : Héros et Événements restent à Gamesbuilder.
   Les boutons historiques (.btn, .goldBtn, .ghostBtn) reprennent le rendu
   des composants or de la PR #42 (mêmes jetons --go-btn-gold-*). */

body {
  background: var(--go-bg);
  color: var(--go-text);
  font-family: var(--go-font-body);
}

h1.title,
.panel h2,
.modal h3,
.kicker,
.psec,
.finale h2,
.brand,
#boardT,
.stp-ttl b,
#steName,
.ldTitle,
.ptTitle,
.pTitle,
.cT,
.ccName,
.chT,
.chK,
.cnTitle b,
.gn-h b {
  font-family: var(--go-font-display);
}

.scene { background: var(--go-bg); }

/* ----- boutons : même peinture que .go-btn--gold / --glass ----- */
.btn,
.ghostBtn,
.goldBtn {
  font-family: var(--go-font-body);
}

.btn.primary,
.btn.primary:hover,
.goldBtn,
#world .goldBtn,
#city .goldBtn {
  background: var(--go-btn-gold-bg);
  color: var(--go-text-on-gold);
  border: 1px solid var(--go-gold);
  box-shadow: var(--go-emboss-gold);
  font-weight: 600;
  letter-spacing: normal;
  text-shadow: none;
}

.goldBtn::after { display: none; animation: none; }

.btn:not(.primary):not(.danger):not(.link):not(.go-btn--bronze):not(.menu-tile),
.btn:not(.primary):not(.danger):not(.link):not(.go-btn--bronze):not(.menu-tile):hover,
.ghostBtn {
  background: var(--go-glass-2);
  color: var(--go-text);
  border: 1px solid var(--go-line);
  box-shadow: none;
  font-weight: 600;
}

/* Commencer le défi : bronze biseauté, filet d'or, reflet intérieur, ombre. */
.btn.go-btn.go-btn--bronze:not(.primary),
.btn.go-btn.go-btn--bronze:not(.primary):hover {
  position: relative;
  isolation: isolate;
  gap: 10px;
  color: var(--go-gold-light);
  background: linear-gradient(180deg, #e4c48a 0%, #a67c45 16%, #6e4e2c 40%, #3a2818 68%, #1a120c 100%);
  border: 2px solid var(--go-gold);
  box-shadow:
    inset 0 1px 0 #fff6d4,
    inset 0 -5px 0 rgba(42, 24, 10, .72),
    inset 0 0 0 1px rgba(90, 58, 22, .9),
    0 6px 0 #2a1a0c,
    0 12px 22px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  font-weight: 700;
}
.btn.go-btn.go-btn--bronze:not(.primary)::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 248, 220, .22), rgba(255, 248, 220, 0));
  pointer-events: none;
}
#title .menu-tile.btn {
  align-items: center;
  justify-content: center;
  min-height: 118px;
}
#title .menu-tile.btn img.menu-tile__ic {
  width: 48px;
  height: 48px;
  flex: none;
  display: block;
  margin-inline: auto;
  object-fit: contain;
}
.btn.go-btn.go-btn--bronze:not(.primary) > * { position: relative; z-index: 1; }
.btn.go-btn.go-btn--bronze .btn-emb {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
}

.btn.link,
.btn.link:hover {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--go-text-muted);
}

.btn.danger,
.btn.danger:hover {
  background: transparent;
  color: var(--go-wrong);
  border: 1px solid var(--go-wrong);
  box-shadow: none;
}

.btn.danger.solid,
.btn.danger.solid:hover {
  background: var(--go-wrong);
  color: var(--go-wrong-ink);
  border-color: var(--go-wrong);
}

.goldBtn.off,
.goldBtn[disabled],
#world .goldBtn[disabled],
.btn[disabled] {
  opacity: .5;
  filter: none;
}

.icon-btn,
.icoBtn:not(.cineBtn),
.backBtn,
.ldHome {
  border: 1px solid var(--go-line);
  color: var(--go-gold);
  background: var(--go-glass-strong);
  box-shadow: none;
}

/* ----- surfaces quiz ----- */
.panel,
.modal .box,
.sheet .sbox {
  background:
    linear-gradient(180deg, var(--go-glass-highlight), transparent 28%),
    linear-gradient(180deg, var(--go-ink-0), var(--go-ink-2));
  border: 1px solid var(--go-gold-line);
  box-shadow: var(--go-emboss-gold), var(--go-shadow-lg);
  color: var(--go-text);
}

.modal { background: var(--go-shade); }

.toast {
  background: linear-gradient(180deg, var(--go-ink-0), var(--go-ink-2));
  color: var(--go-gold);
  border: 1px solid var(--go-line);
  font-family: var(--go-font-body);
}

.topbar,
.lv-top {
  background: color-mix(in srgb, var(--go-ink-0) 92%, transparent);
  border-bottom: 1px solid var(--go-line);
}

.qcard,
.stg .qcard {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--go-gold) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--go-ink-0), var(--go-ink-2));
  border: 1px solid var(--go-gold-line);
  box-shadow: var(--go-shadow-lg);
}

.qtext,
.ans,
.stg-q,
.subtitle,
.end-msg {
  font-family: var(--go-font-body);
}

.ans {
  background: var(--go-glass);
  border: 1px solid var(--go-line);
  color: var(--go-text);
}

.ans.selected,
.ans.locked {
  border-color: var(--go-gold);
  background: color-mix(in srgb, var(--go-gold) 18%, var(--go-ink-1));
  box-shadow: inset 0 0 0 1px var(--go-gold-line), 0 0 16px var(--go-gold-halo);
}

.chip,
.on-tab,
.on-wtab {
  font-family: var(--go-font-body);
}

/* ----- classement ----- */
#mBoard .board-box {
  text-align: center;
  background: linear-gradient(180deg, var(--go-ink-0), var(--go-ink-2));
}

body.gn-on .screen { min-height: calc(100dvh - var(--gnH, 0px)); }
body.gn-on .screen.center { padding-bottom: var(--go-space-4); }
/* Résultats : la colonne s'arrête au-dessus de la barre.
   --gnH = hauteur de la barre (56 px, 44 px si l'écran est bas) + zone sûre.
   Les boutons restent collés en bas de cette zone, jamais dessous. */
body.gn-on #end.screen {
  box-sizing: border-box;
  height: calc(100dvh - var(--gnH, 0px));
  min-height: 0;
  max-height: calc(100dvh - var(--gnH, 0px));
  justify-content: flex-start;
  overflow-y: auto;
  padding-bottom: var(--go-space-3);
  scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
body.gn-on #end .menu {
  position: sticky;
  bottom: 0;
  z-index: var(--go-z-raised);
  margin-top: auto;
  padding-top: var(--go-space-3);
  padding-bottom: calc(var(--go-space-2) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--go-ink-2) 0%, transparent), var(--go-ink-2) 42%);
}
body.gn-on .stp-cta { bottom: var(--gnH, 0px); }
body.gn-on #rules .panel { padding-block: 16px 10px; }
body.gn-on #rules .rules-list { gap: 8px; }
body.gn-on #rules .actions { margin-top: 12px; }

#mBoard .medal[data-i="board"] { width: 84px; height: 84px; }

#boardT {
  color: var(--go-gold-light);
  letter-spacing: var(--go-tracking-title);
  text-transform: uppercase;
}

#boardTabs,
#boardWorlds { margin: var(--go-space-2) 0 var(--go-space-3); width: 100%; }
/* Onglets Mondial / pays / Défi du jour : le texte entier reste lisible
   (11 langues, pays long). On ne coupe pas ; la piste passe à la ligne. */
#boardTabs.go-seg { flex-wrap: wrap; }
#boardTabs .on-tab {
  flex: 1 1 auto;
  min-inline-size: min(100%, max-content);
  max-inline-size: 100%;
  height: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  padding-inline: 10px;
  font-size: var(--go-text-sm);
  line-height: 1.15;
  letter-spacing: 0;
}
/* Mondes du Mondial : plus de nowrap + overflow hidden (qui coupait
   « Tous les mondes », « Amérique latine », « Monde arabe »). */
#boardWorlds.go-seg--wrap {
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#boardWorlds.go-seg--wrap > .on-wtab {
  flex: 0 1 auto;
  min-inline-size: min(100%, max-content);
  max-inline-size: 100%;
  width: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  justify-content: center;
  padding-inline: 10px;
  font-size: var(--go-text-sm);
  line-height: 1.15;
  letter-spacing: 0;
}
#boardWorlds .on-wtab span {
  min-inline-size: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-align: center;
}
/* Le segmenté Fusion rétrécit les flex items. L'emblème (globe « Tous les mondes »
   compris) garde 22 px, sinon son cadre mesuré tombe à 0. */
#boardWorlds .on-wtab svg,
#boardWorlds .on-wtab img.wem {
  flex: none;
  width: 22px;
  height: 22px;
}

#boardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--go-space-2);
}

.on-row {
  background: var(--go-glass);
  border: 1px solid var(--go-line);
}

#boardList .on-row.r1,
#boardList .on-row.r2,
#boardList .on-row.r3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--go-space-1);
  width: 30%;
  padding: var(--go-space-3) var(--go-space-1) var(--go-space-3);
  border-radius: var(--go-radius-lg);
  text-align: center;
}

#boardList .on-row.r2 { order: 1; }
#boardList .on-row.r1 { order: 2; width: 34%; padding-top: 26px; }
#boardList .on-row.r3 { order: 3; }
#boardList .on-row:not(.r1):not(.r2):not(.r3),
#boardList .on-empty { order: 4; width: 100%; }

/* Classement vide (démo Mondial : aucun wkTotal). Médaillon gravé,
   titre Cinzel, texte Cormorant, bouton or embouti. Pas de boîte plate. */
#boardList .bd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--go-space-3);
  margin: 0;
  padding: var(--go-space-6) var(--go-space-3) var(--go-space-4);
  border: 0;
  background: none;
  box-shadow: none;
  font-style: normal;
  text-align: center;
  color: var(--go-text-soft);
}
.bd-empty__medal {
  width: 116px;
  height: 116px;
  flex: none;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--go-ink-2) 85%, transparent));
}
.bd-empty__medal svg { width: 100%; height: 100%; display: block; }
.bd-empty__title {
  margin: 0;
  font-family: var(--go-font-display);
  font-weight: 500;
  font-size: var(--go-text-xl);
  letter-spacing: var(--go-tracking-title);
  line-height: var(--go-leading-tight);
  text-transform: uppercase;
  color: var(--go-gold-light);
}
.bd-empty__text {
  margin: 0;
  max-width: 28ch;
  font-family: var(--go-font-body);
  font-weight: 500;
  font-style: normal;
  font-size: var(--go-text-lg);
  line-height: var(--go-leading-body);
  color: var(--go-text-soft);
}
.bd-empty__cta {
  margin-top: var(--go-space-2);
  min-width: min(100%, 260px);
  padding-inline: var(--go-space-6);
}

/* Podium : médaillon héros (octogone or, anneau de rareté). #1 plus grand, couronne.
   Argent et bronze teintent l'anneau déjà embouti, sans carré vide. */
#boardList .bd-med {
  position: relative;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
#boardList .bd-med--gold { width: 96px; height: 96px; }
#boardList .bd-med--silver,
#boardList .bd-med--bronze { width: 72px; height: 72px; }
#boardList .bd-crown {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -18px;
  width: 44px;
  height: 22px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
}
#boardList .bd-crown svg { width: 100%; height: 100%; display: block; }
#boardList .bd-med--silver .hav-ring {
  filter: grayscale(1) brightness(1.6) contrast(1.08);
}
#boardList .bd-med--bronze .hav-ring {
  filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.9);
}
#boardList .on-row .nm {
  font-family: "Cinzel", "Palatino Linotype", Palatino, "Times New Roman", "Noto Naskh Arabic", "Noto Sans Arabic", "Noto Serif SC", "Noto Sans SC", "Noto Serif CJK SC", "Noto Sans CJK SC", "Noto Serif JP", "Noto Sans JP", "Noto Serif CJK JP", "Noto Sans CJK JP", "Noto Serif Devanagari", "Noto Sans Devanagari", "Noto Serif Thai", "Noto Sans Thai", serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--go-text);
}
#boardList .on-row:not(.r1):not(.r2):not(.r3) .nm { font-size: 1.15rem; }
#boardList .on-row .v { font-size: 1.2rem; color: var(--go-gold-light); }
#boardMe {
  display: block;
  margin-top: var(--go-space-3);
  text-align: center;
  font-family: var(--go-font-body);
  font-size: 1.05rem;
  color: var(--go-text-soft);
}
#boardMe b { color: var(--go-gold-light); font-size: 1.35rem; }

#boardList .on-row.r1 .rk,
#boardList .on-row.r2 .rk,
#boardList .on-row.r3 .rk { color: var(--go-gold-light); }
#boardList .on-row.r1 .rk::before,
#boardList .on-row.r2 .rk::before,
#boardList .on-row.r3 .rk::before { content: none; }

#boardList .rk,
#boardList .sc,
#boardList .v,
#boardMe b,
#mShop .sh-pack .n,
#mShop .sh-bal b,
#mShop .sh-starter .st-t b,
#mShop .ss-head b,
#mShop .ss-pack .n,
#mShop .ss-bt b,
#mShop .mc-pill b,
.go-num {
  font-family: var(--go-font-body);
  font-variant-numeric: var(--go-nums);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
#boardList .sc,
#boardList .v,
#boardMe b,
.go-num {
  font-weight: 700;
}

#boardList .on-row.me {
  border-color: var(--go-gold);
  background: color-mix(in srgb, var(--go-gold) 16%, var(--go-glass));
  box-shadow: inset 0 0 0 1px var(--go-gold-line), 0 0 12px var(--go-gold-halo);
}

#boardList .on-row.me .nm { color: var(--go-gold-light); }

/* ----- barre, boutique, défi ----- */
.gnav {
  background: linear-gradient(180deg, var(--go-ink-0), var(--go-ink-2));
  border-top: 1px solid var(--go-line);
}
.gn-t { font-family: var(--go-font-body); color: var(--go-text-muted); }
.gn-t.on { color: var(--go-gold); }
.gn-pan {
  background: var(--go-glass-strong);
  color: var(--go-text);
  box-shadow: 0 0 0 1px var(--go-gold-line), var(--go-shadow-lg);
}
.gn-x { border-color: var(--go-line); color: var(--go-gold); }

.mc-pill,
.rs-stake > div,
.rs-opt,
.eo-card,
.pon {
  border-color: var(--go-line);
}

/* ----- Sanctuaire (hors héros / événements) ----- */
:root {
  --mF: var(--go-font-body);
  --mGl: var(--go-glass);
  --mGl2: var(--go-glass-strong);
  --mLn: var(--go-line);
  --mTx: var(--go-text);
  --mMu: var(--go-text-muted);
  --mAc: var(--go-gold);
}

#world {
  --wF: var(--go-font-body);
  --wGl: var(--go-glass);
  --wGl2: var(--go-glass-strong);
  --wLn: var(--go-line);
  --wTx: var(--go-text);
  --wMu: var(--go-text-muted);
  --wAc: var(--go-gold);
  --wMe: var(--go-gold);
  background: var(--go-ink-2);
}

#city,
#loading { background: var(--go-ink-2); }

.ldKicker,
.ldTip,
.pWorld,
.ptSub,
.hint { color: var(--go-text-muted); font-family: var(--go-font-body); }

.pill,
.lab,
.cLab,
.cCard,
#world .cCard {
  background: var(--go-glass);
  border-color: var(--go-line);
  color: var(--go-text);
}

.panel {
  background:
    linear-gradient(180deg, var(--go-glass-highlight), transparent 28%),
    var(--go-glass-strong);
}

.cnTitle span,
.cnSkip,
.cnSnd,
.cnWait b { font-family: var(--go-font-body); }

.stp,
.stg,
.ste { color: var(--go-text); }