:root {
  --blue: #36e688; --blue-d: #1dc069; --navy: #25231b;
  --gold: #ffc83d; --gold-d: #c99700; --green: #1bb864; --green-d: #128a4a;
  --ink: #2d2b21; --paper: #ffffff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  font-family: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  background: #25231b; color: var(--ink);
  display: flex; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.hidden { display: none !important; }

#app { position: relative; width: 100%; max-width: 440px; height: 100dvh; overflow: hidden; }

/* ---------- Décors ---------- */
#bg { position: absolute; inset: 0; transition: background .6s; overflow: hidden; }
#bg .sun { position: absolute; top: 5%; right: 12%; width: 70px; height: 70px; border-radius: 50%;
  background: #fff3b0; opacity: .85; }
#bg .cloud { position: absolute; height: 26px; width: 90px; border-radius: 30px; background: rgba(255,255,255,.75);
  filter: blur(.5px); animation: drift 60s linear infinite; }
#bg .cloud::before, #bg .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
#bg .cloud::before { width: 42px; height: 42px; top: -20px; left: 14px; }
#bg .cloud::after { width: 32px; height: 32px; top: -14px; left: 46px; }
#bg .c1 { top: 9%; left: -120px; animation-duration: 70s; }
#bg .c2 { top: 17%; left: -120px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
#bg .c3 { top: 4%; left: -120px; animation-duration: 120s; animation-delay: -80s; transform: scale(.55); }
@keyframes drift { to { left: 110%; } }
#decor { position: absolute; inset: auto 0 0 0; height: 36%; pointer-events: none; }
#decor span { position: absolute; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(3deg); } }

#bg[data-theme="home"]     { background: #2fd07a; }
#bg[data-theme="beach"]    { background: #3ad884; }
#bg[data-theme="forest"]   { background: #2ab069; }
#bg[data-theme="desert"]   { background: #3abf78; }
#bg[data-theme="mountain"] { background: #777157; }
#bg[data-theme="ocean"]    { background: #1d9c58; }
#bg[data-theme="jungle"]   { background: #1fa85f; }
#bg[data-theme="poles"]    { background: #5ddf9a; }
#bg[data-theme="world"]    { background: #2e2b21; }
#bg[data-theme="forest"] .sun, #bg[data-theme="jungle"] .sun { opacity: .6; }
#bg[data-theme="world"] .sun { background: #eaf4ef; }
#bg[data-theme="world"] .cloud { opacity: .15; }
#bg[data-theme="ocean"] .cloud { opacity: .35; }

/* ---------- Écrans ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }

/* Barre du haut */
.topbar { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: 900; color: #fff;
  background: var(--blue);
  border: 2px solid #fff; box-shadow: 0 3px 0 var(--navy), 0 5px 10px rgba(0,0,0,.25); display: grid; place-items: center; line-height: 1; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.level-pill { margin: 0 auto; padding: 5px 18px; border-radius: 20px; background: rgba(255,255,255,.92);
  font-weight: 900; font-size: 13px; color: var(--navy); box-shadow: 0 2px 6px rgba(0,0,0,.2); white-space: nowrap; }
.coinpill { display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 8px; border-radius: 20px;
  background: var(--navy); border: 2px solid #fff; color: #fff; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.coinpill b { min-width: 28px; text-align: right; font-size: 14px; }
.coinpill.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.18); } }
.plus { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; font-size: 18px; line-height: 1; box-shadow: inset 0 -2px 0 var(--green-d); }
.coin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--gold); border: 2px solid #f6a800;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.coin.sm { width: 13px; height: 13px; border-width: 1.5px; box-shadow: none; vertical-align: -2px; margin-right: 3px; }
.coin.lg { width: 46px; height: 46px; border-width: 3px; }

/* ---------- Accueil ---------- */
#home { align-items: center; }
.home-gear { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; }
.home-coins { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; }
.home-center { margin-top: 15vh; text-align: center; color: #fff; }
.globe { font-size: 104px; line-height: 1; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) scale(1.03); } }
.logo { margin: 10px 0 0; display: flex; flex-direction: column; font-weight: 900; line-height: .95; letter-spacing: 3px; }
.logo span:first-child { font-size: 54px; color: #fff; text-shadow: 0 4px 0 var(--navy), 0 8px 14px rgba(0,0,0,.3); }
.logo span:last-child { font-size: 46px; color: var(--gold); text-shadow: 0 4px 0 var(--navy), 0 8px 14px rgba(0,0,0,.3); }
.tagline { margin: 12px 0 0; font-weight: 800; font-size: 15px; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.home-buttons { margin-top: auto; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 6vh; }

.btn { position: relative; padding: 13px 18px; border-radius: 16px; font-weight: 900; font-size: 17px; color: #fff; letter-spacing: .5px;
  border: 2px solid rgba(255,255,255,.9); text-shadow: 0 2px 0 rgba(0,0,0,.2); transition: transform .08s; }
.btn:active { transform: translateY(3px); }
.btn small { display: block; font-size: 12px; font-weight: 800; opacity: .9; margin-top: 1px; }
.btn.big { padding: 16px 18px; font-size: 26px; }
.btn-green { background: var(--green); box-shadow: 0 5px 0 var(--green-d), 0 8px 14px rgba(0,0,0,.25); }
.btn-blue { background: var(--blue); box-shadow: 0 5px 0 var(--navy), 0 8px 14px rgba(0,0,0,.25); }
.btn-gold { background: var(--gold); color: #6b4300; text-shadow: none; box-shadow: 0 5px 0 var(--gold-d), 0 8px 14px rgba(0,0,0,.25); }
.btn-red { background: #ef8036; box-shadow: 0 5px 0 #c25710; }
.btn-gray { background: #a29b7e; box-shadow: 0 5px 0 #7f785c; }
.btn:active.btn-green { box-shadow: 0 2px 0 var(--green-d); }
.dot { position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #ff893b; border: 2px solid #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.25); } }

/* ---------- Chapitres ---------- */
#chapterList { flex: 1; overflow-y: auto; padding: 4px 2px 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
#chapterList::-webkit-scrollbar { display: none; }
.chap { position: relative; flex: none; border-radius: 18px; padding: 12px 14px; color: #fff; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 12px rgba(0,0,0,.28); overflow: hidden; }
.chap.locked { filter: grayscale(.85) brightness(.7); }
.chap h3 { margin: 0; font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 4px rgba(0,0,0,.45); }
.chap h3 em { margin-left: auto; font-style: normal; font-size: 13px; background: rgba(0,0,0,.35); padding: 2px 9px; border-radius: 12px; }
.chap .emoji { font-size: 26px; }
.lvls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 10px; }
.lv { aspect-ratio: 1; border-radius: 50%; font-weight: 900; font-size: 15px; display: grid; place-items: center; color: var(--navy);
  background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.lv.done { background: var(--gold); color: #6b4300; }
.lv.now { background: var(--green); color: #fff; animation: pulse 1.4s infinite; }
.lv.lock { background: rgba(255,255,255,.35); color: rgba(255,255,255,.8); box-shadow: none; }
.lv:active:not(.lock) { transform: translateY(2px); }

/* ---------- Jeu ---------- */
.wordpanel { background: rgba(255,255,255,.95); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.25); border: 2px solid #fff; }
.ptitle { position: relative; background: var(--blue-d); color: #fff; font-weight: 900; font-size: 13px;
  text-align: center; padding: 3px 8px 3px 62px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptitle .star { position: absolute; left: 4px; top: -3px; font-size: 24px; color: var(--gold); text-shadow: 0 2px 0 var(--gold-d); }
.ptitle .pcount { position: absolute; left: 28px; top: 4px; font-size: 11px; opacity: .95; }
#wordList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 6px; padding: 5px 8px 6px; text-align: center; }
.w { position: relative; font-weight: 800; font-size: 15px; letter-spacing: .3px; padding: 2px 0; border-radius: 6px; transition: color .3s, opacity .3s; }
.w.found { opacity: .45; text-decoration: line-through; text-decoration-thickness: 2px; }
.w .hint { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2; background: var(--gold); color: #5a3a00;
  font-size: 10px; font-weight: 900; padding: 0 6px; border-radius: 8px; letter-spacing: 1px; }
.w.pop { animation: wpop .5s; }
@keyframes wpop { 40% { transform: scale(1.3); color: var(--green-d); } }

#boardWrap { position: relative; display: flex; justify-content: center; margin-top: 12px; container-type: normal; }
#bubble { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 5; min-width: 40px; padding: 2px 14px;
  border-radius: 14px; background: #19c469; color: #fff; font-weight: 900; font-size: 14px; letter-spacing: 2px; text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .1s; }
#bubble.on { opacity: 1; }
#board { background: #fff; border-radius: 16px; padding: 8px; touch-action: none; cursor: pointer; container-type: inline-size;
  width: min(100%, calc(var(--cols, 5) * 74px), calc((100dvh - 330px) * var(--cols, 5) / var(--rows, 5)));
  box-shadow: 0 6px 16px rgba(0,0,0,.28); border: 2px solid #fff; }
#cells { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); grid-template-rows: repeat(var(--rows, 5), 1fr); }
.cell { position: relative; z-index: 2; aspect-ratio: 1; display: grid; place-items: center; font-weight: 900; color: #23211a;
  font-size: calc(100cqw / var(--cols, 5) * .46); pointer-events: none; transition: color .2s; }
.cell.hinted { color: var(--blue-d); }
.cell.hinted::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: rgba(54, 230, 136, .35); z-index: -1; animation: pulse 1s infinite; }
.cell.pulse { animation: cellpulse 1s infinite; }
@keyframes cellpulse { 50% { transform: scale(1.35); color: var(--blue); } }
.cell.swap { animation: swap .5s; }
@keyframes swap { 40% { transform: rotateY(90deg) scale(.7); } }
.pill { position: absolute; z-index: 1; border-radius: 999px; pointer-events: none; opacity: .88; }
.pill.sel { opacity: .8; z-index: 1; }
.pill.fresh { animation: fresh .35s; }
@keyframes fresh { from { opacity: 0; filter: brightness(1.6); } }
.pill.bad { animation: bad .35s forwards; background: #ffa66b !important; }
@keyframes bad { to { opacity: 0; transform: translateX(0) rotate(var(--rot)) scaleY(.5); } }

#tip { margin: 12px auto 0; max-width: 300px; padding: 9px 14px; border-radius: 14px; text-align: center; font-weight: 800; font-size: 14px; line-height: 1.25;
  background: #f1f8f4; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); min-height: 0; }
#tip:empty { display: none; }
#tip b { color: var(--blue-d); }

.boosters { margin-top: auto; display: flex; justify-content: center; gap: 14px; padding-bottom: 6px; }
.booster { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #fff;
  background: var(--blue); box-shadow: 0 4px 0 var(--navy), 0 7px 12px rgba(0,0,0,.3); }
.booster:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.booster .bi { font-size: 28px; line-height: 56px; }
.booster em { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font-style: normal; font-weight: 900; font-size: 11px; color: #fff;
  background: rgba(37, 35, 27, .85); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.booster.off { filter: grayscale(.8); opacity: .6; }

/* ---------- Modales ---------- */
#modalRoot { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.overlay { position: absolute; inset: 0; background: rgba(37, 35, 27, .62); display: grid; place-items: center; pointer-events: auto; animation: fadein .2s; padding: 20px; }
@keyframes fadein { from { opacity: 0; } }
.modal { position: relative; width: 100%; max-width: 330px; background: #fff; border-radius: 18px; overflow: visible; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); border: 3px solid #fff; animation: pop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.modal .mhead { background: var(--blue-d); color: #fff; font-weight: 900; font-size: 20px; padding: 10px 40px; border-radius: 14px 14px 0 0; }
.modal .mbody { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.modal .x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; background: transparent; color: #fff; font-size: 24px; font-weight: 900; line-height: 1; }
.modal p { margin: 0; font-weight: 800; font-size: 15px; }
.modal .btn { width: 100%; }
.ribbon { margin: -34px -26px 0; padding: 12px 24px; color: #fff; font-weight: 900; font-size: 22px; background: #40e78e;
  clip-path: polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ribbon.blue { background: var(--blue-d); }
.reward { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 34px; font-weight: 900; color: var(--blue-d); }
.medal { font-size: 78px; line-height: 1; animation: float 2.5s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.stars { font-size: 38px; letter-spacing: 6px; color: var(--gold); text-shadow: 0 3px 0 var(--gold-d); }
.row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 800; font-size: 16px; padding: 4px 4px; }
.switch { position: relative; width: 52px; height: 28px; border-radius: 14px; background: #d5d1c4; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: var(--green); }
.switch.on::after { left: 27px; }
.sbtn { width: 100%; padding: 10px; border-radius: 14px; font-weight: 800; font-size: 14px; color: #fff; background: var(--blue); box-shadow: 0 3px 0 var(--navy); }
.ver { font-size: 11px; font-weight: 800; color: #ada68d; display: flex; justify-content: space-between; width: 100%; }
.tips-list { text-align: left; font-weight: 700; font-size: 14px; line-height: 1.5; }

#toast { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -20px); z-index: 80; padding: 10px 18px; border-radius: 14px; background: rgba(37, 35, 27, .92); color: #fff;
  font-weight: 800; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; max-width: 85%; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* confettis */
.confetti { position: absolute; top: -10px; width: 9px; height: 14px; z-index: 60; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105dvh) rotate(720deg); } }

@media (max-height: 640px) { .home-center { margin-top: 6vh; } .globe { font-size: 76px; } #tip { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* ================= SIREXE : thèmes, accueil, assistant ================= */
#bg[data-theme="abidjan"]     { background: #2fe182; }
#bg[data-theme="mines"]       { background: #358a5d; }
#bg[data-theme="petrole"]     { background: #1d5e3b; }
#bg[data-theme="energie"]     { background: #2dd079; }
#bg[data-theme="expo"]        { background: #3b9a67; }
#bg[data-theme="gala"]        { background: #2b6a48; }
#bg[data-theme="delegations"] { background: #2aa865; }
#bg[data-theme="infra"]       { background: #1c7043; }
#bg[data-theme="petrole"] .sun, #bg[data-theme="gala"] .sun, #bg[data-theme="infra"] .sun, #bg[data-theme="mines"] .sun { opacity: .3; }
#bg[data-theme="petrole"] .cloud, #bg[data-theme="gala"] .cloud { opacity: .12; }

.home-help { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 60px; background: var(--gold); color: #6b4300; }
.event-badge { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 20px; background: rgba(37, 35, 27, .62); border: 1.5px solid rgba(255,255,255,.7); font-weight: 900; font-size: 13px; }
.home-fact { margin: 12px auto 0; max-width: 300px; min-height: 52px; font-size: 13px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.6); transition: opacity .5s; }
.home-fact.out { opacity: 0; }
.fact { background: #f1f8f4; border: 2px solid #d3e7dc; border-radius: 12px; padding: 8px 10px; font-size: 13px; font-weight: 700; text-align: left; line-height: 1.35; color: var(--ink); }
.fact b { color: var(--blue-d); }
.topbar .icon-btn { flex: none; }
.topbar .level-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Assistant Sirex */
#assistant { position: absolute; inset: 0; z-index: 70; background: rgba(37, 35, 27, .55); display: flex; align-items: flex-end; animation: fadein .2s; }
#assistant.hidden { display: none; }
.as-sheet { width: 100%; height: 80%; background: #f3f7fd; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -8px 30px rgba(0,0,0,.4); animation: slideup .3s cubic-bezier(.2,1,.4,1); }
@keyframes slideup { from { transform: translateY(100%); } }
.as-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: var(--blue-d); }
.as-head b { display: block; font-size: 17px; font-weight: 900; line-height: 1.1; }
.as-head small { font-weight: 700; opacity: .9; font-size: 12px; }
.as-x { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 22px; line-height: 1; font-weight: 900; }
.as-av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; font-size: 24px; background: var(--gold); border: 2px solid #fff; }
.as-av.sm { width: 30px; height: 30px; font-size: 17px; }
.as-msgs { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; user-select: text; -webkit-user-select: text; }
.as-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 94%; animation: pop .25s; }
.as-msg.user { align-self: flex-end; }
.as-b { padding: 9px 12px; border-radius: 16px; font-weight: 700; font-size: 14px; line-height: 1.42; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.12); border-bottom-left-radius: 4px; }
.as-msg.user .as-b { background: var(--blue); color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.as-b a { color: var(--blue-d); font-weight: 900; }
.as-b small { color: #90896b; }
.dots i { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: #b9b49e; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { transform: translateY(-5px); } }
.as-chips { display: flex; gap: 7px; padding: 8px 12px; overflow-x: auto; flex: none; scrollbar-width: none; }
.as-chips:empty { display: none; }
.as-chip { flex: none; padding: 7px 12px; border-radius: 16px; font-weight: 800; font-size: 13px; background: #fff; color: var(--blue-d); border: 2px solid #d3e7dc; white-space: nowrap; }
.as-chip.act { background: var(--gold); color: #6b4300; border-color: #fff; }
.as-chip:active { transform: scale(.96); }
.as-form { display: flex; gap: 8px; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #deeee6; flex: none; }
.as-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 700; padding: 10px 14px; border-radius: 22px; border: 2px solid #d3e7dc; outline: none; background: #f3f7fd; user-select: text; -webkit-user-select: text; }
.as-form input:focus { border-color: var(--blue); }
.as-form button { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 3px 0 var(--green-d); }

/* Visite guidée */
#tour { position: absolute; inset: 0; z-index: 90; }
#tour.hidden { display: none; }
#tour .spot { position: absolute; border-radius: 16px; border: 3px solid var(--gold); box-shadow: 0 0 0 3000px rgba(37, 35, 27, .74); pointer-events: none; transition: all .3s ease; }
#tour .tcard { position: absolute; left: 14px; right: 14px; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: pop .25s; }
#tour .thead { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: var(--navy); }
#tour p { margin: 6px 0 10px; font-weight: 700; font-size: 14px; line-height: 1.4; }
#tour .tfoot { display: flex; align-items: center; justify-content: space-between; }
#tour .tfoot > span:last-child { display: flex; align-items: center; gap: 10px; }
#tour .tdots i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #e0ddd4; }
#tour .tdots i.on { background: var(--blue); width: 18px; border-radius: 6px; }
#tour .tskip { background: none; font-weight: 800; color: #9c957a; font-size: 14px; }
#tour .tnext { padding: 8px 18px; font-size: 15px; width: auto; border-width: 0; box-shadow: 0 3px 0 var(--green-d); }
.as-welcome { z-index: 85; }

/* barre du haut compacte (3 boutons + niveau + pièces) */
.topbar { gap: 6px; }
.topbar .icon-btn { width: 38px; height: 38px; font-size: 18px; }
.topbar .level-pill { padding: 5px 10px; font-size: 12px; overflow: visible; text-overflow: clip; }
.topbar .coinpill { padding-left: 6px; gap: 4px; }
.topbar .coinpill b { min-width: 0; font-size: 13px; }

/* ================= Charte SIREXE : photos, logo, album ================= */
:root { --brand-green: #1bb864; --brand-orange: #53ea99; --brand-dark: #25231b; --brand-beige: #f1f8f4; --brand-gold: #54e899; }
body { font-family: 'Inter', ui-rounded, 'Segoe UI', system-ui, sans-serif; }

#bg { background-color: #25231b; }
#bgPhoto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s; }
#bg.has-photo #bgPhoto { opacity: 1; }
#bg.has-photo .sun, #bg.has-photo .cloud, #bg.has-photo #decor { display: none; }
#bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(37, 35, 27, .4); }
#bg:not(.has-photo)::after { display: none; }

/* Accueil */
.home-center { margin-top: 9vh; }
.logo-card { margin: 0 auto; width: min(80%, 300px); padding: 12px 18px; background: #fff; border-radius: 18px; border: 3px solid var(--brand-orange);
  box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.logo-card img { display: block; width: 100%; height: auto; }
.logo { flex-direction: row; justify-content: center; gap: 10px; margin-top: 18px; letter-spacing: 1px; }
.logo span:first-child { font-size: 40px; color: #fff; text-shadow: 0 3px 0 var(--brand-dark), 0 6px 14px rgba(0,0,0,.5); }
.logo span:last-child { font-size: 40px; color: var(--brand-orange); text-shadow: 0 3px 0 var(--brand-dark), 0 6px 14px rgba(0,0,0,.5); }
.tagline { text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.event-badge { background: rgba(37, 35, 27, .78); border-color: var(--brand-orange); }
.home-fact { text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; padding: 12px 6px; font-size: 15px; }

/* Chapitres : photo du premier niveau en fond de carte */
.chap { background-size: cover !important; background-position: center !important; }

/* Pied de grille : légende de la photo */
#photoCap { margin: auto auto 10px; max-width: 340px; padding: 4px 12px; border-radius: 14px; background: rgba(37, 35, 27, .78);
  color: #fff; font-weight: 700; font-size: 12px; text-align: center; line-height: 1.3; border: 1px solid rgba(255,255,255,.35); }
#photoCap:empty { display: none; }
.boosters { margin-top: 0; }

/* Modales avec photo */
.overlay { display: flex; overflow-y: auto; padding: 44px 20px 20px; }
.modal { margin: auto; }
.mphoto { position: relative; width: 100%; height: 150px; border-radius: 12px; background-size: cover; background-position: center; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.25); border: 2px solid var(--brand-beige); }
.mphoto.big { height: 200px; }
.mphoto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 6px; font-size: 12px; font-weight: 800; color: #fff; text-align: left;
  background: rgba(37, 35, 27, .78); }
.medal.sm { font-size: 44px; }
.mlogo { display: block; width: 72%; max-width: 230px; height: auto; margin: 2px auto 0; }
.cap { color: #77715b; font-size: 13px !important; }
.mtitle { font-weight: 900; font-size: 17px; color: var(--brand-dark); }

/* Album */
#album .topbar .level-pill { margin-left: auto; }
#albumGrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 2px 20px; align-content: start; scrollbar-width: none; }
#albumGrid::-webkit-scrollbar { display: none; }
.ah { grid-column: 1 / -1; margin-top: 8px; color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.ph { position: relative; aspect-ratio: 1; border-radius: 12px; border: 2px solid #fff; background-size: cover; background-position: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); overflow: hidden; }
.ph b { position: absolute; left: 0; bottom: 0; right: 0; padding: 10px 4px 2px; font-size: 11px; color: #fff; text-align: center; background: rgba(37, 35, 27, .78); }
.ph.lock { filter: grayscale(1) brightness(.45) blur(3px); }
.ph.lock::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; filter: none; }
.ph:active:not(.lock) { transform: scale(.97); }

/* Assistant : images dans les réponses */
.as-img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 8px; }

@media (max-height: 700px) { #photoCap { display: none; } .home-center { margin-top: 4vh; } }

/* album : tuiles carrées robustes */
#albumGrid { grid-auto-rows: auto; align-items: start; }
.ph { height: 0; padding-bottom: 100%; aspect-ratio: auto; display: block; width: 100%; }
.ph b { position: absolute; }
.ph.lock::after { position: absolute; }

/* ---------- Icônes Lucide (remplacent les emojis) ---------- */
.ic { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; overflow: visible; }
.booster .bi { display: grid; place-items: center; height: 56px; line-height: 1; }
.medal { color: var(--blue); display: grid; place-items: center; }
.medal.sm { font-size: 44px; }
#decor span { color: rgba(255,255,255,.75); }
.as-av { color: #6b4300; }
.home-help { color: #6b4300; }
.chap .emoji { display: inline-grid; place-items: center; }
.reward .ic { color: var(--blue-d); }

/* ---------- Boutons simples : sans bordure, sans relief, légèrement transparents ---------- */
.btn, .icon-btn, .booster, .coinpill, .sbtn, .as-form button { border: 0; box-shadow: none; text-shadow: none; }
.btn { background: rgba(27, 184, 100, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-green { background: rgba(27, 184, 100, .82); }
.btn-blue { background: rgba(54, 230, 136, .78); }
.btn-gold { background: rgba(255,200,61,.88); }
.btn-red { background: rgba(239, 128, 54, .85); }
.btn-gray { background: rgba(162, 155, 126, .8); }
.btn:active, .icon-btn:active, .booster:active { transform: scale(.97); box-shadow: none; }
.icon-btn, .booster { background: rgba(54, 230, 136, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-help { background: rgba(255,200,61,.88); }
.coinpill { background: rgba(37, 35, 27, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.plus { background: rgba(54, 230, 136, .9); box-shadow: none; }
.sbtn { background: rgba(54, 230, 136, .9); }
.as-form button { background: var(--blue); }
.as-chip, .as-chip.act { border: 0; }
.as-chip { background: #edf5f1; }
.lv { box-shadow: none; }
.booster em { background: rgba(37, 35, 27, .6); }
.dot { border: 0; }

/* ---------- Aucune bordure sur les blocs (la surbrillance de la visite guidée garde son cadre) ---------- */
.icon-btn, .coinpill, .btn, .booster, .chap, .wordpanel, #board, #tip, .modal, .logo-card, .event-badge, .fact,
.as-av, .as-chip, .as-chip.act, .as-form, .as-form input, #photoCap, .mphoto, .ph, .dot, .lv, .as-msg .as-b, .plus, .sbtn,
.level-pill, .home-help, .home-gear, .ptitle, .cell, .overlay, #bubble, .switch { border: 0 !important; }
.as-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--blue); }
.coin, .coin.sm, .coin.lg { border: 0 !important; box-shadow: none; }

.credits-list { margin: 0; padding: 0 0 0 18px; max-height: 50vh; overflow-y: auto; text-align: left; font-size: 11px; font-weight: 700; line-height: 1.4; color: var(--ink); user-select: text; -webkit-user-select: text; }
.credits-list li { margin-bottom: 5px; } .credits-list a { color: var(--blue-d); }

/* ---------- Espacements : rien de collé aux bords ni entre éléments ---------- */
.screen { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
.topbar { gap: 10px; padding: 0 0 12px; }
.home-gear { top: max(18px, env(safe-area-inset-top)); left: 18px; }
.home-help { top: max(18px, env(safe-area-inset-top)); left: 70px; }
.home-coins { top: max(18px, env(safe-area-inset-top)); right: 18px; }
.home-center { margin-top: max(10vh, 84px); padding: 0 8px; width: 100%; }
.logo-card { width: min(78%, 290px); }
.logo { gap: 8px; margin-top: 22px; }
.logo span:first-child, .logo span:last-child { font-size: 36px; }
.tagline { margin-top: 14px; padding: 0 8px; }
.event-badge { margin-top: 14px; }
.home-fact { max-width: 290px; margin-top: 14px; padding: 0 4px; }
.home-buttons { padding-bottom: max(5vh, 20px); }
@media (max-height: 700px) { .home-center { margin-top: max(5vh, 72px); } }
.booster { color: #fff; }

/* ---------- Jeu : la grille prend toute la largeur du bloc des mots ; boosters grands et en bas ---------- */
#boardWrap { flex: 1; min-height: 0; margin-top: 12px; align-items: flex-start; container-type: size; }
#board { width: 100%; max-width: none; }
#cells { --ch: min(calc(100cqw / var(--cols, 5)), calc((100cqh - 16px) / var(--rows, 5))); grid-template-rows: repeat(var(--rows, 5), var(--ch)); }
.cell { aspect-ratio: auto; font-size: calc(var(--ch) * .5); }
#tip { flex: none; }
#photoCap { margin: 10px auto 0; }
.boosters { margin-top: 0; padding: 16px 0 22px; gap: 22px; flex: none; }
.booster { width: 76px; height: 76px; }
.booster .bi { height: 76px; font-size: 36px; }
.booster em { bottom: -16px; font-size: 12px; padding: 2px 9px; }

/* ---------- Logo Earth Quest (image) ---------- */
.logo { display: block; margin: 16px 0 0; }
.logo img { display: block; width: min(86%, 320px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.logo { margin-top: 10px; }
.logo img { width: min(72%, 260px); }
.home-center { margin-top: max(8vh, 78px); }
.home-fact { min-height: 0; }

/* ---------- Écran de démarrage ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#splash { position: absolute; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; background: var(--navy); color: #fff; text-align: center; transition: opacity .5s; }
#splash.gone { opacity: 0; pointer-events: none; }
#splash .sp-card { width: min(70%, 260px); padding: 12px 16px; background: #fff; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
#splash .sp-card img { display: block; width: 100%; height: auto; }
#splash .sp-logo { display: block; width: min(86%, 340px); height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
#splash .sp-tag { margin: 0; font-weight: 800; font-size: 15px; }
#splash .sp-bar { width: min(60%, 220px); height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
#splash .sp-bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .2s; }
#splash small { font-weight: 700; font-size: 12px; opacity: .8; }
.home-center { margin-top: max(18vh, 110px); }

/* Logo SIREXE (version blanche) sur l'accueil */
.home-sirexe { display: block; width: min(72%, 266px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)); }

/* ================= Charte graphique SIREXE : noir #11100B, vert #007D39 / #3F9D6B, orange #EB6607, blanc ================= */
:root {
  --blue: #3f9d6b; --blue-d: #007d39; --navy: #11100b;
  --gold: #eb6607; --gold-d: #b34a00; --green: #007d39; --green-d: #04301a;
  --ink: #11100b; --paper: #ffffff;
  --brand-green: #007d39; --brand-orange: #eb6607; --brand-dark: #11100b; --brand-beige: #e3f1e9; --brand-gold: #eb6607;
}
#bg { background-color: #11100b; }
#bg[data-theme="home"]     { background: #04301a; }
#bg[data-theme="beach"]    { background: #0b4f2b; }
#bg[data-theme="forest"]   { background: #0a4426; }
#bg[data-theme="desert"]   { background: #5e2d05; }
#bg[data-theme="mountain"] { background: #2a2923; }
#bg[data-theme="ocean"]    { background: #04301a; }
#bg[data-theme="jungle"]   { background: #0b4f2b; }
#bg[data-theme="poles"]    { background: #1f6e44; }
#bg[data-theme="world"]    { background: #11100b; }
#bg[data-theme="abidjan"]  { background: #04301a; }
#bg::after { background: rgba(17, 16, 11, .4); }
.btn, .btn-green { background: rgba(0, 125, 57, .9); }
.btn-blue { background: rgba(63, 157, 107, .9); }
.btn-gold { background: rgba(235, 102, 7, .94); color: #fff; }
.btn-red { background: rgba(235, 102, 7, .9); }
.btn-gray { background: rgba(76, 75, 71, .85); }
.btn:disabled { opacity: .5; }
.icon-btn, .booster { background: rgba(0, 125, 57, .88); }
.home-help { background: rgba(235, 102, 7, .94); color: #fff; }
.as-av { color: #fff; }
.plus { background: #eb6607; }
.sbtn { background: rgba(0, 125, 57, .92); }
.coinpill { background: rgba(17, 16, 11, .72); }
.booster em { background: rgba(17, 16, 11, .7); }
.as-chip { background: #e3f1e9; }
.modal .mhead, .ribbon.blue { background: #04301a; }
.ribbon { background: #eb6607; }
#photoCap, .ph b, .mphoto span, .event-badge { background: rgba(17, 16, 11, .78); }
#tip { background: #e3f1e9; }
#tip b { color: #007d39; }
.fact { background: #e3f1e9; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* Première ouverture : À propos, démonstration, cadeaux */
.ob-about .about-modal { max-width: 360px; max-height: 100%; display: flex; flex-direction: column; }
.ob-about .mbody { overflow-y: auto; min-height: 0; align-items: stretch; text-align: left; }
.ob-about .mbody > * { flex: none; }
.about-lead { text-align: center; }
.about-list section { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f3f2ee; }
.about-list b { color: #04301a; font-size: 14px; }
.about-list p { margin-top: 3px; font-size: 12px; font-weight: 700; color: #4c4b47; line-height: 1.4; }
.about-note { font-size: 11px !important; color: #4c4b47; }
.demo-on #game { padding-bottom: calc(var(--coach-h, 0px) + 8px); }
.demo-on #game .boosters { padding-bottom: 14px; }
.demo-on .overlay { z-index: 1; }
.coach { position: absolute; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 52%; overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: #11100b; color: #fff; border-top: 3px solid #eb6607; border-radius: 18px 18px 0 0; animation: fadein .25s; scrollbar-width: none; }
.coach::-webkit-scrollbar { display: none; }
.co-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; color: #9a998f; }
.co-quit { padding: 6px 14px; border-radius: 999px; background: #eb6607; color: #fff; font-weight: 900; font-size: 13px; }
.co-bar { height: 5px; border-radius: 3px; background: #4c4b47; margin: 8px 0 10px; overflow: hidden; }
.co-bar i { display: block; height: 100%; background: #007d39; transition: width .3s; }
.co-title { display: block; font-size: 17px; font-weight: 900; }
.co-text { margin: 6px 0 0; font-size: 13px; font-weight: 700; line-height: 1.45; text-align: left; }
.co-list { margin: 8px 0 0 18px; padding: 0; font-size: 12px; font-weight: 700; color: #cbc7b9; line-height: 1.4; text-align: left; }
.co-list li { margin-bottom: 3px; }
.co-try { margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(235, 102, 7, .16); border: 1px solid #eb6607; font-size: 13px; font-weight: 800; text-align: left; }
.co-try.ok { background: rgba(0, 125, 57, .25); border-color: #3f9d6b; }
.co-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.co-nav .btn { width: auto; min-width: 150px; padding: 11px 18px; font-size: 15px; }
.co-link { background: none; color: #9a998f; text-decoration: underline; font-weight: 700; font-size: 12px; }
.demo-glow { animation: demoglow 1.1s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes demoglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(235, 102, 7, 0); } 50% { box-shadow: 0 0 0 4px rgba(235, 102, 7, .95), 0 0 18px 4px rgba(235, 102, 7, .6); } }
.gift-banner { margin: 12px auto 0; max-width: 300px; padding: 8px 12px; border-radius: 14px; background: rgba(235, 102, 7, .92); color: #fff; font-weight: 800; font-size: 13px; line-height: 1.3; }
.gift-banner small { display: block; font-weight: 700; font-size: 11px; opacity: .95; }
.gift-banner.off { background: rgba(17, 16, 11, .78); color: #e8e7e3; }
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 14px; background: #fdeadb; border: 2px solid #eb6607; color: #11100b; text-align: center; }
.gift-card.off { background: #f0efeb; border-color: #85806c; }
.gift-title { font-weight: 900; font-size: 15px; }
.gift-name { font-weight: 900; color: #b34a00; }
.gift-card small, .gift-item small { display: block; font-size: 12px; font-weight: 700; color: #4c4b47; }
.gift-code { font-size: 24px; font-weight: 900; letter-spacing: 4px; padding: 6px 14px; margin: 4px 0; border: 2px dashed #eb6607; border-radius: 12px; color: #b34a00; background: rgba(235, 102, 7, .08); }
.gift-item { width: 100%; padding: 12px; border-radius: 14px; background: #fdeadb; border: 2px solid #eb6607; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gift-item.claimed { background: #f3f2ee; border-color: #cbc7b9; opacity: .85; }
.gift-pin { width: 100%; text-align: center; }
.gift-pin summary { cursor: pointer; font-weight: 800; font-size: 13px; color: #007d39; padding: 4px 0; }
.gift-pin input { width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 2px solid #cbc7b9; font: inherit; font-weight: 700; }
.ob-about, .ob-ask { z-index: 120; background: rgba(17, 16, 11, .9); }

/* Accueil : logo SIREXE en haut à gauche, boutons réglages / aide à côté des pièces */
.home-logo { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px; width: 112px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.home-gear { left: auto; right: 124px; }
.home-help { left: auto; right: 174px; }
.home-buttons .gift-banner { margin: 0 0 4px; max-width: none; text-align: center; }
.lv { position: relative; }
.lv .gl { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #eb6607; color: #fff; display: grid; place-items: center; font-size: 10px; font-style: normal; }

/* ---------- Fond blanc, sans image ---------- */
#bg, #bg[data-theme] { background: #ffffff !important; }
#bgPhoto, #bg::after, #bg .sun, #bg .cloud, #decor, #photoCap { display: none !important; }
.level-pill { background: #e3f1e9; color: #04301a; }
#board, .wordpanel { box-shadow: 0 0 0 2px #e3f1e9, 0 8px 18px rgba(17, 16, 11, .12); }
.ah { color: #11100b; text-shadow: none; }
.home-logo { filter: none; }
/* Accueil : le bloc JOUER remonte au centre ; réglages et aide en bas, au centre */
#home .home-buttons { margin: auto 0; padding-bottom: 10vh; }
.home-gear, .home-help { top: auto !important; bottom: max(24px, env(safe-area-inset-bottom)); right: auto !important; }
.home-gear { left: calc(50% - 56px) !important; }
.home-help { left: calc(50% + 6px) !important; }

/* Consigne en haut de la liste des mots */
.ptask { margin: 0; padding: 6px 10px 0; text-align: center; font-size: 11px; font-weight: 800; color: #4c4b47; line-height: 1.25; }

/* Salutation du joueur connecté sur l'accueil SIREXE Games */
.sso-hello { margin: 0 auto; padding: 5px 14px; border-radius: 999px; background: #022D1C; color: #fff; font-weight: 700; font-size: 0.9rem; text-align: center; width: fit-content; }
.sso-hello[hidden] { display: none; }

/* Retour à l'accueil SIREXE Games : bouton texte, en bas au centre au-dessus des réglages et de l'aide */
.icon-btn.home-hub { position: absolute; top: auto !important; right: auto !important; width: auto; height: auto; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 800; text-decoration: none; color: #fff; background: rgba(2, 45, 28, .92); bottom: calc(max(24px, env(safe-area-inset-bottom)) + 62px); left: 50% !important; transform: translateX(-50%); white-space: nowrap; }
/* Bandeau cadeau de l'accueil : une seule ligne */
.home-buttons .gift-banner { white-space: nowrap; font-size: clamp(8px, 2.45vw, 12px); padding: 8px 4px; }