/* Terra Mercantis — thème « dark medieval commerce » (GAME_DESIGN §9), mobile-first. */
:root {
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2128;
  --gold:#d4a843; --gold-light:#f0c060;
  --green:#3fb950; --blue:#58a6ff; --red:#f85149; --cyan:#3dd6e0;
  --text:#e6edf3; --muted:#8b949e; --border:#30363d; --border-gold:#d4a843;
  --serif:'Palatino Linotype','Book Antiqua',Palatino,'Times New Roman',serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }   /* prime sur display:flex/block des règles plus bas */
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:var(--serif); touch-action:manipulation; }
#app { max-width:430px; margin:0 auto; min-height:100%; background:var(--bg); position:relative; }
.view { min-height:100vh; display:flex; flex-direction:column; }
#game.view { min-height:0; height:100vh; height:100dvh; }   /* shell à hauteur fixe → #content défile en interne (header + onglets restent collés) */
.muted { color:var(--muted); } .green{color:var(--green);} .blue{color:var(--blue);}
h1,h2 { letter-spacing:.04em; font-weight:600; }
.err { color:var(--red); font-size:.9rem; margin:.5rem 0 0; }
button { font-family:var(--serif); cursor:pointer; }

/* Auth */
#auth { justify-content:center; padding:1.5rem; gap:1rem; }
.brand { text-align:center; }
.brand h1 { color:var(--gold); text-shadow:0 0 18px rgba(212,168,67,.35); margin:.2rem 0; font-size:2rem; }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:1rem; box-shadow:0 6px 24px rgba(0,0,0,.4); }
.auth-card { width:100%; }
.seg { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.seg button { flex:1; padding:.6rem; background:transparent; color:var(--muted); border:0; }
.seg .seg-on { background:var(--bg3); color:var(--gold); border-bottom:2px solid var(--gold); }
/* Onglets du Marché collés en haut du contenu scrollable (sous la barre de ressources) */
.market-tabs { position:sticky; top:0; z-index:4; background:var(--bg); padding-bottom:1rem; }
.market-tabs .market-toggle { margin-bottom:0; }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.7rem; }
input,select { width:100%; margin-top:.25rem; padding:.6rem; min-height:44px; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:8px; font-family:var(--serif); font-size:1rem; }
input:focus,select:focus { outline:none; border-color:var(--gold); }
.btn { width:100%; min-height:46px; border:1px solid var(--border-gold); border-radius:8px; font-size:1rem; padding:.6rem;
  background:var(--bg3); color:var(--text); }
.btn-gold { background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:#241a05; border:0; font-weight:600; }
.btn-green { background:transparent; border-color:var(--green); color:var(--green); }
.btn-blue { background:transparent; border-color:var(--blue); color:var(--blue); }
.btn-google { background:#fff; color:#3c4043; border:0; display:flex; align-items:center; justify-content:center; gap:.6rem; text-decoration:none; font-weight:600; }
.divider { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.8rem; margin:.9rem 0; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--border); }
.btn:disabled { opacity:.45; }
.btn-sm { width:auto; min-height:36px; padding:.3rem .7rem; font-size:.85rem; }

/* Topbar */
#stickytop { position:sticky; top:0; z-index:5; background:var(--bg); padding-top:env(safe-area-inset-top); }   /* header + barre de ressources collés en haut ; padding-top = encoche/barre d'état (PWA plein écran) */
#topbar { display:flex; flex-direction:column; gap:.45rem; padding:.6rem .8rem; background:var(--bg2); border-bottom:1px solid var(--border); }
.hdr-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.brand-title { color:var(--gold); font-weight:600; letter-spacing:.04em; font-size:1.05rem; text-shadow:0 0 12px rgba(212,168,67,.3); white-space:nowrap; }
.hdr-cur { display:flex; align-items:center; gap:.4rem; }
.pill { display:inline-flex; align-items:center; gap:.25rem; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:.2rem .6rem; font-size:.9rem; cursor:pointer; }
.gold-pill { border-color:var(--border-gold); } .gold-pill b { color:var(--gold-light); }
/* Pastille de recherche — même gabarit que l'or, teinte bleue pour la distinguer d'un coup d'œil.
   Bordure atténuée / chiffre vif, comme le couple --border-gold / --gold-light de la pastille d'or. */
.research-pill { border-color:rgba(88,166,255,.45); } .research-pill b { color:var(--blue); }
.energy-pill { border-color:var(--cyan); } .energy-pill b { color:var(--cyan); }
.user-btn { background:var(--bg3); border:1px solid var(--border); border-radius:50%; width:34px; height:34px; font-size:1rem; color:var(--text); flex:0 0 auto; }
.pvp-pill { align-self:flex-start; font-size:.68rem; letter-spacing:.05em; padding:.12rem .5rem; border-radius:12px; border:1px solid var(--border); color:var(--muted); }
.pvp-pill.on { color:var(--red); border-color:var(--red); background:rgba(248,81,73,.12); font-weight:600; }
.cap-max { color:var(--muted); font-weight:400; font-size:.78rem; }
.res-empty { padding:.4rem; font-size:.82rem; }

/* Resource strip — barre unifiée, enroulée sur plusieurs lignes (toutes les ressources visibles d'un coup) */
.resbar { display:flex; flex-wrap:wrap; gap:.35rem; padding:.5rem .8rem; background:var(--bg); border-bottom:1px solid var(--border); }
.res { flex:1 0 auto; text-align:center; min-width:58px; max-width:84px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:.35rem .4rem; }
.res .n { font-size:.68rem; color:var(--muted); }
.res .q { font-size:.95rem; font-weight:600; }
.res.eco .q{color:var(--text);} .res.war .q{color:var(--cyan);} .res.essential .q{color:var(--green);}

/* Content */
#content { flex:1; min-height:0; padding:1rem 1rem calc(6.8rem + env(safe-area-inset-bottom)); overflow-y:auto; }   /* min-height:0 = défilement interne ; marge basse inclut la zone home indicator (PWA) */
.section-h { margin:1.2rem 0 .5rem; color:var(--gold); font-size:1.05rem; }
.build-panel h2 { margin:0 0 .6rem; font-size:1.05rem; }
.build-row { display:flex; gap:.5rem; }
.build-row select { flex:1; margin-top:0; }
.build-row .btn { width:auto; }

/* Grid 4×4 */
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:.8rem 0; }
.cell { aspect-ratio:1; border:1px dashed var(--border); border-radius:8px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--bg2); font-size:.7rem; color:var(--muted); }
.cell.filled { border-style:solid; border-color:var(--border-gold); color:var(--text); background:var(--bg3); }
.cell .ic { font-size:1.3rem; } .cell .lv { font-size:.65rem; color:var(--gold); }
/* Entrepôts (vert) vs producteurs (or) + débit/capacité par case */
.cell { overflow:hidden; padding:2px; gap:1px; }
.cell.filled.wh { border-color:var(--green); }
.cell.wh .lv { color:var(--green); }
.cell .cn { font-size:.6rem; color:var(--muted); line-height:1.05; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell .cr { font-size:.58rem; color:var(--green); margin-top:1px; }

/* Drag & drop des bâtiments (déplacer / échanger de case — souris + tactile) */
.cell { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.cell img { -webkit-user-drag:none; }
.cell.filled { cursor:grab; }
.cell.drag-src { opacity:.35; border-style:dashed; }
.cell.drop-ok { border-style:solid; border-color:var(--gold-light); background:rgba(212,168,67,.14); color:var(--gold-light); box-shadow:inset 0 0 0 2px var(--gold-light); }
.cell.drop-swap { border-color:var(--cyan); box-shadow:inset 0 0 0 2px var(--cyan); }
.drag-ghost { position:fixed; left:0; top:0; margin:0; z-index:400; pointer-events:none; opacity:.8;
  aspect-ratio:auto; box-shadow:0 10px 28px rgba(0,0,0,.55); cursor:grabbing; }   /* semi-transparent → la surbrillance de la cible reste lisible dessous */
.grid-hint { font-size:.72rem; margin:-.3rem 0 .8rem; }

/* Lists (buildings, market) */
.list { display:flex; flex-direction:column; gap:.5rem; }
.item { display:flex; align-items:center; gap:.6rem; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:.6rem .7rem; }
.item .ic { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border-radius:8px; font-size:1.1rem; }
.item .info { flex:1; min-width:0; } .item .info b{ display:block; } .item .info small{ color:var(--muted); }
.item .act { display:flex; gap:.35rem; align-items:center; }
.qin { width:74px; min-height:36px; margin:0; padding:.3rem .4rem; }
.price .b{color:var(--green);} .price .s{color:var(--blue);} .price{font-size:.8rem; text-align:right;}

/* Tabbar — 2 lignes : Carte/Guerre/Attaque · Marché/Classement/MSG/Chat */
#tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px;
  display:flex; flex-wrap:wrap; background:var(--bg2); border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgba(0,0,0,.4); z-index:10; padding-bottom:env(safe-area-inset-bottom); }   /* padding-bottom = home indicator (PWA plein écran) */
#tabbar button { height:46px; background:transparent; border:0; border-top:2px solid transparent; color:var(--muted);
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:.32rem; padding:0 4px;
  font-size:.78rem; white-space:nowrap; }
#tabbar button .ti { font-size:1.05rem; line-height:1; }
/* Ligne 1 : Éco + Carte + Guerre (séparateur en bas) — 3 colonnes */
#tabbar button[data-tab="carte"], #tabbar button[data-tab="map"], #tabbar button[data-tab="guerre"] {
  flex:0 0 33.333%; border-bottom:1px solid var(--border); }
/* Ligne 2 : Marché + Classement + MSG + Chat — 4 colonnes */
#tabbar button[data-tab="market"], #tabbar button[data-tab="classement"],
#tabbar button[data-tab="msg"], #tabbar button[data-tab="chat"] { flex:0 0 25%; }
/* Onglet actif : liseré or en haut */
#tabbar .tab-on { color:var(--gold); border-top-color:var(--gold); background:rgba(212,168,67,.06); }
/* Guerre & Attaque actifs : rouge */
#tabbar button[data-tab="guerre"].tab-on, #tabbar button[data-tab="attaque"].tab-on {
  color:var(--red); border-top-color:var(--red); background:rgba(248,81,73,.06); }
/* Carte (territoires §12) actif : orange */
#tabbar button[data-tab="map"].tab-on { color:#e8833a; border-top-color:#e8833a; background:rgba(232,131,58,.08); }
.market-note { font-size:.8rem; }
/* Vues « bientôt » (MSG, Chat) */
.placeholder-card { text-align:center; padding:1.6rem 1.2rem; }
.placeholder-card .ph-ic { font-size:2.4rem; margin-bottom:.4rem; }
.placeholder-card h2 { color:var(--gold); margin:0 0 .6rem; }
.placeholder-card p { margin:0; }

/* Finitions : spécialisation, bascules, gestion bâtiments, classement */
.spec-card h2 { margin:0 0 .6rem; font-size:1.05rem; }
.spec-row { display:flex; gap:.6rem; }
.spec-row label { flex:1; margin-bottom:0; }
.spec-lock { flex:1; display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; }
.spec-lock b { color:var(--gold-light); }
#tab-recherche .card { margin-bottom:.8rem; }
/* Comparatif des gains de recherche (avec vs sans) */
.rp-gains { margin-top:.7rem; border-top:1px solid var(--border); padding-top:.6rem; }
.rp-gains-h { color:var(--gold); font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.rp-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.rp-tbl th { text-align:right; color:var(--muted); font-weight:400; font-size:.72rem; padding:.15rem .3rem; }
.rp-tbl th:first-child { text-align:left; }
.rp-tbl td { padding:.28rem .3rem; border-top:1px solid var(--border); }
.rp-tbl td:not(:first-child) { text-align:right; white-space:nowrap; }
.rp-tbl small { font-size:.72rem; opacity:.85; }
.spec-note { margin:.6rem 0 0; font-size:.74rem; }
.grid-toggle { margin:.2rem 0 .8rem; }
.rang-toggle { margin-bottom:.8rem; }
.btn-danger { border-color:var(--red); color:var(--red); background:transparent; }
.item.off, .cell.off { opacity:.5; }
.item .act { flex-wrap:wrap; justify-content:flex-end; }
.item .act .btn-sm { min-width:36px; padding:.25rem .4rem; line-height:1.1; }
.item .rk { width:26px; text-align:center; color:var(--gold); font-weight:700; font-size:1.05rem; }
.item .val { color:var(--gold-light); font-weight:600; font-size:.9rem; white-space:nowrap; }
.item.mine { border-color:var(--border-gold); background:var(--bg3); }
/* Podium — top 3 du classement : contour + halo or/argent/bronze (renforce les médailles 🥇🥈🥉). Défini APRÈS .mine pour l'emporter si le joueur est lui-même sur le podium. */
.item.podium { border-width:2px; }
.item.podium-1 { border-color:#e8bf55; box-shadow:0 0 0 1px rgba(232,191,85,.25), 0 3px 12px rgba(232,191,85,.20); }
.item.podium-2 { border-color:#bcc6d2; box-shadow:0 0 0 1px rgba(188,198,210,.22), 0 3px 12px rgba(188,198,210,.16); }
.item.podium-3 { border-color:#cf8f52; box-shadow:0 0 0 1px rgba(207,143,82,.22), 0 3px 12px rgba(207,143,82,.16); }
.item.podium-1 .val { color:#f0cd6a; }
.item.podium-2 .val { color:#cfd8e2; }
.item.podium-3 .val { color:#dda36a; }
.rang-gap { text-align:center; color:var(--muted); font-size:1.1rem; line-height:1; padding:.2rem 0; letter-spacing:.25em; }   /* saut top 50 → joueur épinglé */
.item .ic img { width:34px; height:34px; border-radius:8px; object-fit:cover; }

/* Jeu vivant : barres de capacité, tranches marché, bilans cliquables, modales */
.res { cursor:pointer; }
.res .cap { height:3px; background:var(--bg); border-radius:2px; margin-top:4px; overflow:hidden; }
.res .cap span { display:block; height:100%; background:var(--green); transition:width .6s linear, background .6s; }
.gold { cursor:pointer; }
.tier { font-weight:600; }
.tier.abundant { color:var(--green); } .tier.limited { color:var(--gold); } .tier.rare { color:var(--red); }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:70; padding:1rem; }   /* > volet (60) : une modale est toujours au premier plan */
.modal-box { background:var(--bg2); border:1px solid var(--border-gold); border-radius:12px; padding:1.1rem; width:100%; max-width:380px; max-height:85vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.modal-box h3 { margin:0 0 .7rem; color:var(--gold); letter-spacing:.03em; }
.modal-msg { margin:.2rem 0 1.1rem; }
.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; }
.modal-actions .btn { width:auto; }
.bal-grid { display:grid; grid-template-columns:1fr auto; gap:.4rem .9rem; margin-bottom:.7rem; font-size:.92rem; }
.bal-grid span:not([class]) { color:var(--muted); }
.bal-bourse { font-size:.82rem; margin:.5rem 0; }
/* Tableau par ressource dans le Bilan de l'or */
.bal-sec { color:var(--gold); font-size:.78rem; font-weight:600; margin:.9rem 0 .3rem; text-transform:uppercase; letter-spacing:.05em; }
.bal-tbl { width:100%; border-collapse:collapse; font-size:.8rem; }
.bal-tbl th { text-align:left; color:var(--muted); font-weight:400; font-size:.7rem; padding:.2rem .25rem; border-bottom:1px solid var(--border); }
.bal-tbl td { padding:.32rem .25rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.bal-tbl td:first-child { white-space:normal; }
.bal-ic { width:15px; height:15px; object-fit:contain; vertical-align:-3px; }
.gic { width:15px; height:15px; object-fit:contain; vertical-align:-2px; }
.bal-full { color:var(--gold); font-weight:600; }
.bal-low { color:var(--red); }
.bal-bar { height:3px; background:var(--bg); border-radius:2px; margin-top:3px; overflow:hidden; max-width:92px; }
.bal-bar span { display:block; height:100%; }
/* Détail des dépenses (groupé éco/guerre) */
.bal-exp-sec { display:flex; justify-content:space-between; align-items:center; margin:.9rem 0 .3rem; padding:.4rem .55rem;
  background:var(--bg3); border:1px solid var(--border); border-radius:6px; color:var(--gold); font-size:.82rem; font-weight:600; }
.bal-exp { display:flex; align-items:center; gap:.55rem; padding:.45rem .3rem; border-bottom:1px solid var(--border); }
.bal-exp-ic { width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.bal-exp-ic .cic { width:28px; height:28px; object-fit:contain; }
.bal-exp-n { flex:1; min-width:0; display:flex; flex-direction:column; }
.bal-exp-n b { font-size:.88rem; }
.bal-exp-n small { color:var(--muted); font-size:.74rem; }
.bal-exp-v { text-align:right; display:flex; flex-direction:column; white-space:nowrap; }
.bal-exp-v small { color:var(--muted); font-size:.74rem; }

/* PvP / Guerre */
.pvp-card { display:flex; flex-direction:column; gap:.7rem; }
.pvp-status { display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.pvp-card .btn { width:100%; }
.atk-units { display:flex; flex-direction:column; gap:.45rem; margin:.5rem 0; }
.atk-u { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin:0; }
.atk-u input { width:84px; margin:0; }

/* Arbre de recherche */
.gold-pts { color:var(--gold-light); font-weight:700; }
.branch { margin-bottom:1.1rem; }
.branch h3 { margin:0 0 .5rem; font-size:1rem; color:var(--gold); }
.track { display:flex; gap:.4rem; }
.node { flex:1; aspect-ratio:1; border-radius:8px; border:1px solid var(--border); background:var(--bg2);
  color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; padding:.2rem; }
.node .nt { font-size:1.1rem; font-weight:700; } .node .nc { font-size:.6rem; color:var(--muted); }
.node.on { border-color:var(--green); color:var(--green); background:var(--bg3); }
.node.on .nc { color:var(--green); }
.node.avail { border-color:var(--gold); box-shadow:0 0 10px rgba(212,168,67,.4); cursor:pointer; }
.node.lock { opacity:.4; }
.market-toggle { margin-bottom:.8rem; }

/* Marché — Bourse IA (cartes verticales, cf. design voulu) */
.mk-statusbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:.45rem .7rem; margin-bottom:.7rem; }
.mk-open { color:var(--green); font-weight:600; font-size:.9rem; }
.mk-hours { font-size:.78rem; }
.mk-titlebar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.1rem; }
.mk-title { color:var(--gold); font-size:1.1rem; margin:0; }
.mk-hist { width:auto; min-height:34px; }
.mk-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; margin-bottom:.6rem; }
.mk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.mk-name { display:flex; align-items:center; gap:.5rem; }
.mk-name b { color:var(--gold-light); font-size:1.02rem; }
.mk-ic { width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.mk-prices { text-align:right; font-size:.82rem; color:var(--muted); line-height:1.55; white-space:nowrap; }
.mk-sell { color:var(--red); font-weight:700; }
.mk-buy { color:var(--green); font-weight:700; }
.mk-stock { font-size:.85rem; margin:.55rem 0 .4rem; }
.mk-stock b { color:var(--text); }
.mk-dispo { display:flex; align-items:center; gap:.5rem; font-size:.8rem; margin-bottom:.65rem; }
.mk-bar { flex:1; height:6px; background:var(--bg); border-radius:4px; overflow:hidden; }
.mk-bar span { display:block; height:100%; background:var(--gold); transition:width .5s linear; }
.mk-bar.tier-rare span { background:var(--red); }
.mk-bar.tier-abundant span { background:var(--green); }
.mk-avail { white-space:nowrap; color:var(--text); }
.mk-act { display:flex; align-items:center; gap:.4rem; }
.mk-act .qin { width:60px; text-align:center; margin:0; }
.mk-act .btn-sm { flex:1; white-space:nowrap; }
.mk-step { width:38px; min-height:40px; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:1.2rem; line-height:1; flex:0 0 auto; }

/* Toast */
.toast { position:fixed; left:50%; bottom:6.8rem; transform:translateX(-50%); background:var(--bg3); color:var(--text);
  border:1px solid var(--border-gold); border-radius:8px; padding:.6rem 1rem; z-index:65; max-width:90%; font-size:.9rem; }   /* > volet (60) → jamais caché derrière */
.toast.err { border-color:var(--red); color:#ffd7d4; }

/* Icônes PNG (ressources) — grille, liste de bâtiments, barre de ressources */
.cell .cic { width:30px; height:30px; object-fit:contain; }
.item .ic .cic { width:30px; height:30px; object-fit:contain; border-radius:0; }
.res .n .res-ic { width:13px; height:13px; object-fit:contain; vertical-align:-2px; }

/* Cases vides cliquables (ouvrent le volet de construction) */
.cell.empty { cursor:pointer; font-size:1.5rem; color:var(--border); transition:color .15s, border-color .15s; }
.cell.empty:hover, .cell.empty:active { border-color:var(--gold); color:var(--gold); background:rgba(212,168,67,.05); }

/* Volet de construction (bottom sheet) */
.sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:60; }
.sheet-overlay.open { opacity:1; pointer-events:auto; }
.sheet { width:100%; max-width:430px; background:var(--bg2); border:1px solid var(--border-gold); border-bottom:0;
  border-radius:16px 16px 0 0; padding:.5rem 1rem 1.5rem; transform:translateY(100%); transition:transform .28s ease;
  box-shadow:0 -10px 40px rgba(0,0,0,.6); max-height:85vh; overflow-y:auto; }
.sheet-overlay.open .sheet { transform:translateY(0); }
.sheet-grab { width:42px; height:4px; background:var(--border); border-radius:3px; margin:.2rem auto .7rem; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.sheet-title { margin:0; color:var(--gold); letter-spacing:.03em; font-size:1.12rem; }
.sheet-x { background:transparent; border:0; color:var(--muted); font-size:1.25rem; line-height:1; padding:.2rem .45rem; }
.sheet-note { font-size:.82rem; margin:.1rem 0 .8rem; }
.sheet-cards { display:flex; flex-direction:column; gap:.6rem; }
.sheet-card { display:flex; align-items:center; gap:.8rem; text-align:left; width:100%; background:var(--bg3);
  border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; color:var(--text); }
.sheet-card:active { border-color:var(--gold); background:rgba(212,168,67,.07); }
.sheet-card:disabled, .sheet-card.sc-locked { opacity:.45; }   /* grisé mais cliquable : un clic explique la raison (toast) */
.sheet-card .sc-ic { width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.sheet-card .sc-img { width:46px; height:46px; object-fit:contain; }
.sheet-card .sc-info { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.sheet-card .sc-info b { color:var(--gold-light); font-size:1.02rem; }
.sheet-card .sc-info small { color:var(--muted); font-size:.8rem; }
/* Volet de gestion d'un bâtiment */
.sheet-title .bs-tic img { width:26px; height:26px; object-fit:contain; vertical-align:-6px; }
.sheet-title .bs-lv { color:var(--muted); font-weight:400; font-size:.82rem; }
.bs-sub { font-size:.9rem; margin:0 0 .7rem; padding-bottom:.7rem; border-bottom:1px solid var(--border); }
.bs-info { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.bs-row { display:flex; justify-content:space-between; gap:.6rem; font-size:.88rem; }
.bs-block { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; margin-bottom:.7rem; }
.bs-block-h { color:var(--gold); font-size:.92rem; margin-bottom:.35rem; }
.bs-cost { font-size:.85rem; margin-bottom:.6rem; }
.bs-improve { background:var(--green); border-color:var(--green); color:#06240e; font-weight:600; }
.bs-improve:disabled { background:var(--bg3); border-color:var(--border); color:var(--muted); opacity:1; cursor:not-allowed; }
.bs-lack { color:var(--red); font-size:.8rem; margin-bottom:.5rem; }
.bs-bar { height:5px; background:var(--bg); border-radius:3px; overflow:hidden; margin:-.1rem 0 .1rem; }   /* jauge de stock (fiche entrepôt) */
.bs-bar span { display:block; height:100%; }

/* 📜 Historique du marché (modale) */
.mh-list { max-height:56vh; overflow-y:auto; display:flex; flex-direction:column; gap:.45rem; margin:.2rem 0 .4rem; }
.mh-row { display:flex; align-items:center; gap:.6rem; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:.45rem .6rem; }
.mh-ic { flex:0 0 auto; width:30px; text-align:center; font-size:1.15rem; }
.mh-img { width:26px; height:26px; object-fit:contain; vertical-align:middle; }
.mh-ric { width:15px; height:15px; object-fit:contain; vertical-align:-2px; }
.mh-main { flex:1; min-width:0; font-size:.88rem; line-height:1.35; }
.mh-main small { display:block; color:var(--muted); font-size:.72rem; margin-top:1px; }
.mh-gold { white-space:nowrap; font-weight:600; font-size:.9rem; }
/* ETA « prêt dans ~X » / alerte stockage sous le manque (construction + amélioration) */
.sheet-card .sc-info small.eta-note { color:var(--gold-light); }
.bs-eta { color:var(--gold-light); font-size:.8rem; margin:-.3rem 0 .5rem; }
.btn-down { border-color:var(--red); color:var(--gold-light); background:rgba(248,81,73,.07); }
.bs-toggle { margin-bottom:.7rem; }

/* ── Notifications (§13) ─────────────────────────────────────── */
.notif-btn { position:relative; }
.notif-badge { position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box; border-radius:8px; background:#e8833a; color:#1c2128; font-size:.6rem; font-weight:700; line-height:15px; text-align:center; }
.notif-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.notif-item { display:flex; align-items:center; gap:.6rem; padding:.7rem .5rem; border-bottom:.5px solid var(--border); position:relative; cursor:pointer; }
.notif-item .notif-ic { font-size:.85rem; flex-shrink:0; }
.notif-item .notif-main { flex:1; min-width:0; }
.notif-item .notif-title { font-size:.86rem; color:var(--text); line-height:1.35; }
.notif-item .notif-time { font-size:.7rem; color:var(--muted); margin-top:1px; }
.notif-item.unread { background:rgba(255,255,255,.03); }
.notif-item:not(.unread) .notif-title { color:var(--muted); }
.notif-item.lvl-critical.unread .notif-title { color:var(--red); }
.notif-unread-dot { width:7px; height:7px; border-radius:50%; background:#e8833a; flex-shrink:0; }
.notif-settings { padding:.7rem .5rem; margin-bottom:.4rem; border-bottom:.5px solid var(--border); display:flex; flex-direction:column; gap:.7rem; }
.notif-settings .ns-master { font-size:.82rem; color:var(--muted); }
.notif-settings .ns-grp h3 { margin:0 0 .2rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.notif-settings .ns-row { display:flex; align-items:center; justify-content:space-between; padding:.35rem 0; font-size:.86rem; color:var(--text); }
.notif-settings .ns-row.ns-dis { opacity:.45; }
.notif-settings .ns-row input { width:1.1rem; height:1.1rem; flex-shrink:0; accent-color:#e8833a; }
/* Toasts de notification temps réel (§13.4) : haut de l'écran, empilés (max 3), tap = deep-link. */
.notif-toasts { position:fixed; top:calc(.6rem + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:.4rem; width:min(92vw,420px); pointer-events:none; }
.notif-toasts .ntoast { pointer-events:auto; display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:10px; background:var(--bg3); color:var(--text); border:1px solid var(--border); box-shadow:0 6px 20px #0006; font-size:.86rem; cursor:pointer; animation:ntoast-in .18s ease-out; }
.notif-toasts .ntoast .ntoast-ic { flex-shrink:0; }
.notif-toasts .ntoast .ntoast-tx { flex:1; min-width:0; line-height:1.3; }
.notif-toasts .ntoast.lvl-critical { border-color:var(--red); color:#ffd7d4; }
@keyframes ntoast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
/* Carte du Monde (§12) — grille brouillard */
.map-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.map-drones { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.map-drones .md-stat { font-size:.76rem; color:var(--text); white-space:nowrap; }
.map-hint { font-size:.8rem; margin:.2rem 0 .6rem; }
.map-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.map-cell { position:relative; aspect-ratio:1; border-radius:10px; border:1px solid var(--border); background:var(--bg3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--text); padding:.2rem; }
.map-cell .mc-img { width:26px; height:26px; }
.map-cell .mc-ic { font-size:1.2rem; opacity:.55; }
.map-cell .mc-q { font-size:.72rem; font-weight:700; }
.map-cell .mc-tag { font-size:.62rem; color:var(--muted); }
.map-cell .mc-coord { position:absolute; top:2px; right:4px; font-size:.55rem; font-weight:600; line-height:1; color:var(--muted); opacity:.6; pointer-events:none; }   /* coordonnée échiquier (A1, B2…) en haut à droite */
/* Case masquée par le filtre : EMPLACEMENT INERTE, pas une suppression — la grille garde sa géométrie,
   donc l'adresse (A1, D4…) tombe toujours sur la même position à l'écran, filtre actif ou non. */
.map-cell.mc-off { background:transparent; border-style:dashed; opacity:.3; cursor:default; pointer-events:none; }
.map-cell.c-fog { opacity:.65; }
.map-cell.c-free { border-color:#3fae6b; }
.map-cell.c-owned { border-color:#e8833a; background:rgba(232,131,58,.10); }
.map-cell.c-occ { border-color:var(--red); opacity:.85; }
.map-cell.c-empty { background:#30363d; border-color:#586069; opacity:1; }   /* case scoutée VIDE : grisée pleine → bien distincte du brouillard et des cases à ressource */
.map-cell.c-empty .mc-ic { opacity:.85; }
.map-cell.c-empty .mc-tag { color:#9da7b3; }
.map-cell.c-siege { border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset; }
/* MA case sous attaque : battement de cœur rouge sur le bord (urgence défensive) */
.map-cell.c-attacked { border-color:var(--red); animation:siege-beat 1.2s ease-in-out infinite; }
@keyframes siege-beat { 0%,22%,48%,100% { box-shadow:0 0 0 1px var(--red) inset; } 12%,34% { box-shadow:0 0 0 2px var(--red) inset, 0 0 7px 1px rgba(248,81,73,.75); } }
@media (prefers-reduced-motion: reduce) { .map-cell.c-attacked { animation:none; box-shadow:0 0 0 1px var(--red) inset; } }
.map-cell.c-reinf { outline:2px dashed var(--blue); outline-offset:-3px; }   /* renfort (déploiement) en route vers cette case */
.map-empty-note { grid-column:1/-1; text-align:center; color:var(--muted); font-size:.82rem; padding:1.2rem .5rem; }
/* ── Filtre flottant de la Carte ── */
#tab-map { position:relative; }
#map-filter-btn.flt-on { border-color:var(--green); color:var(--green); }
.map-filter { position:absolute; top:2.7rem; right:0; z-index:40; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.55rem .6rem; box-shadow:0 10px 28px rgba(0,0,0,.5); min-width:188px; }
.map-filter .mf-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.76rem; font-weight:600; color:var(--text); margin-bottom:.45rem; }
.map-filter .mf-all { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; font-size:.7rem; padding:.12rem .45rem; cursor:pointer; }
.map-filter .mf-all:hover { color:var(--text); border-color:var(--text); }
.mf-chips { display:flex; flex-direction:column; gap:.18rem; }
.mf-chip { display:flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--text); cursor:pointer; padding:.22rem .3rem; border-radius:6px; user-select:none; }
.mf-chip:hover { background:var(--bg3); }
.mf-chip .mf-box { width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; line-height:1; flex:0 0 auto; }
.mf-chip.on .mf-box { background:var(--green); border-color:var(--green); color:#fff; }
.mf-chip.off { opacity:.5; }
.mf-chip .mf-ct { margin-left:auto; color:var(--muted); font-size:.74rem; font-variant-numeric:tabular-nums; }
/* Bandeau « filtre actif » : visible au-dessus de la grille quand des cases sont masquées (anti-piège : on n'oublie pas qu'un filtre cache des cases). Tap = tout réafficher. */
.map-filter-active { margin:.1rem 0 .5rem; padding:.45rem .6rem; background:var(--bg3); border:1px solid var(--gold); border-radius:8px; color:var(--gold-light); font-size:.8rem; font-weight:600; text-align:center; cursor:pointer; }
.map-filter-active:hover { background:rgba(232,131,58,.18); }
.miner-ctl { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.6rem 0; }
.miner-step { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.miner-step .btn { min-width:2.2rem; font-size:1.1rem; font-weight:700; padding:.2rem 0; }
.miner-step b { min-width:1.8rem; text-align:center; font-size:1.05rem; }
.map-transport { border-top:1px solid var(--border); padding-top:.6rem; margin-top:.2rem; }
.map-transport .mt-title { font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.map-transport .mt-btns { display:flex; gap:.4rem; flex-wrap:wrap; }
.map-transport .mt-btns .btn { flex:1; min-width:9rem; }
.map-transport .mt-active { margin-top:.5rem; display:flex; flex-direction:column; gap:.25rem; }
.map-transport .mt-active .md-stat { font-size:.78rem; color:var(--muted); }
/* Garnison par troupe (Carte) : 1 ligne / unité de combat — nom + sur place + caserne + quantité à déployer */
.gar-list { margin:.1rem 0 .1rem; }
.gar-row { display:flex; align-items:center; justify-content:space-between; gap:.4rem .5rem; padding:.4rem 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.gar-row:first-child { border-top:0; }
.gar-info { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.gar-info b { font-size:.86rem; }
.gar-info small { font-size:.72rem; }
.gar-act { display:flex; align-items:center; gap:.3rem; }
.gar-qin, .rec-qin { width:3rem; min-height:34px; margin:0; padding:.3rem .3rem; text-align:center; }
/* Modale de case — onglets Transport / Déploiement / Retour de la partie inférieure */
.tile-tabs { display:flex; gap:.3rem; border-top:1px solid var(--border); padding-top:.6rem; margin-top:.3rem; }
.tile-tabs .tt-btn { flex:1; padding:.42rem .2rem; font:inherit; font-size:.8rem; font-weight:600; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.tile-tabs .tt-btn.on { background:rgba(212,168,67,.15); border-color:var(--gold); color:var(--gold); }
.tt-panel { padding-top:.55rem; }
/* Indicateur « Transports en cours » (Carte) : liste de tous les convois actifs + temps restant live */
.map-convoys { margin:.1rem 0 .6rem; padding:.4rem .55rem; background:var(--bg3); border:1px solid var(--border); border-radius:8px; }
.map-convoys .mcv-head { font-size:.8rem; font-weight:600; margin-bottom:.3rem; color:var(--text); }
.mcv-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; padding:.2rem 0; border-top:1px solid var(--border); }
.mcv-row:first-of-type { border-top:0; }
.mcv-res { display:flex; align-items:center; gap:.3rem; color:var(--text); min-width:0; }
.mcv-res .mcv-ic { width:1.05rem; height:1.05rem; flex:0 0 auto; }
.mcv-meta { color:var(--muted); white-space:nowrap; flex:0 0 auto; }
.mcv-row.mcv-arrived .mcv-meta { color:var(--green); }
/* Panneau « Combats en cours » (Carte) : sièges actifs des 2 camps + bouton Voir */
.map-sieges { margin:.1rem 0 .5rem; padding:.4rem .55rem; background:var(--bg3); border:1px solid var(--red); border-radius:8px; }
.map-sieges .mcv-head { font-size:.8rem; font-weight:600; margin-bottom:.3rem; color:var(--text); }
.msg-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; padding:.25rem 0; border-top:1px solid var(--border); }
.msg-row:first-of-type { border-top:0; }
.msg-info { display:flex; align-items:center; gap:.3rem; min-width:0; flex-wrap:wrap; color:var(--text); }
.msg-info .mcv-ic { width:1rem; height:1rem; }
.msg-meta { display:flex; align-items:center; gap:.45rem; white-space:nowrap; color:var(--muted); flex:0 0 auto; }
/* « Mouvements en cours » (§12.6) : trajets de troupes + attaques entrantes (réutilise .mcv-row/.mcv-res/.mcv-meta) */
.map-movements { margin:.1rem 0 .5rem; padding:.4rem .55rem; background:var(--bg3); border:1px solid var(--border); border-radius:8px; }
.map-movements .mcv-head { font-size:.8rem; font-weight:600; margin-bottom:.3rem; color:var(--text); }
/* Mouvements = 2 lignes empilées (titre + ETA / détails) au lieu d'une seule ligne entassée, illisible sur mobile */
.map-movements .mcv-row { flex-direction:column; align-items:stretch; gap:.15rem; }
.map-movements .mv-head-row { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.map-movements .mv-title { font-weight:600; min-width:0; }
.map-movements .mv-in .mv-title { color:var(--red); }
.map-movements .mv-detail { display:flex; flex-wrap:wrap; align-items:center; gap:.05rem .35rem; font-size:.76rem; color:var(--muted); line-height:1.35; }
.map-movements .mv-detail .mcv-ic { width:1rem; height:1rem; }
.map-movements .mv-coord { color:var(--gold); font-weight:700; }
.map-movements .mv-dot { opacity:.45; }
.map-movements .mv-cancel { font:inherit; font-size:.72rem; color:var(--red); background:rgba(248,81,73,.12); border:1px solid var(--red); border-radius:.35rem; padding:.02rem .34rem; margin-left:.15rem; cursor:pointer; white-space:nowrap; }   /* rappeler un renfort en route */
/* Visuel de combat (siège) : minuteurs + arène des deux camps avec pertes */
.cb-timers { display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .6rem; }
.cb-timer { flex:1; min-width:8rem; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:.35rem .55rem; display:flex; flex-direction:column; gap:.1rem; font-size:.8rem; }
.cb-timer b { font-size:.9rem; color:var(--text); }
/* Camps EMPILÉS (mobile-first) : sur ~380px, 2 colonnes écrasaient nom+type+badge → débordement/scroll horizontal. */
.cb-arena { display:flex; flex-direction:column; gap:.4rem; }
.cb-side { min-width:0; background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cb-side.cb-mine { border-color:var(--blue); }
.cb-side-h { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0; padding:.4rem .6rem; font-size:.82rem; font-weight:700; color:var(--text); background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); }
.cb-side.cb-mine .cb-side-h { color:var(--blue); background:rgba(88,166,255,.10); }
.cb-side:not(.cb-mine) .cb-side-h { color:#ff9d9d; background:rgba(248,81,73,.08); }
.cb-you { color:var(--blue); font-weight:600; }
.cb-u { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; font-size:.82rem; padding:.3rem .6rem; color:var(--text); border-bottom:1px solid rgba(255,255,255,.05); }
.cb-u:last-of-type { border-bottom:0; }
.cb-u > span:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .35rem; min-width:0; }
.cb-u > span:last-child { white-space:nowrap; flex:none; text-align:right; font-variant-numeric:tabular-nums; }
.cb-u.muted { color:var(--muted); }
.cb-tot { margin:0; padding:.34rem .6rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--muted); background:rgba(255,255,255,.02); }
.cb-vs { align-self:center; font-weight:800; letter-spacing:.14em; color:var(--muted); font-size:.6rem; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:.12rem .6rem; margin:.02rem 0; }
.cb-reinf { margin:.55rem 0 0; padding:.4rem .6rem; font-size:.8rem; font-weight:600; color:var(--blue); background:rgba(88,166,255,.1); border:1px solid var(--blue); border-radius:8px; line-height:1.5; }   /* renforts À MOI en route vers la case assiégée (bonne nouvelle défenseur) */

/* ── §12.9 CACHE CADEAU — overlay de découverte (handoff design_handoff_coffre_cadeau) ──────────────
   Géométrie, timings et easings repris tels quels. Seule liberté prise : la typo passe au --serif du jeu
   (le handoff proposait Cinzel/Manrope via Google Fonts — exclu, la PWA doit rester autonome hors-ligne).
   Toute la séquence est pilotée par animation-delay : aucun timer JS. Le lot est DÉJÀ crédité côté serveur
   au moment du scout → fermer l'overlay plus tôt ne coûte rien, c'est un simple affichage. */
@keyframes cc-fade { from { opacity:0 } to { opacity:1 } }
@keyframes cc-rays { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes cc-rays-in { from { opacity:0; transform:scale(.4) } to { opacity:.55; transform:scale(1) } }
@keyframes cc-drop { 0% { opacity:0; transform:translateY(-220px) scale(.6) rotate(-8deg) } 60% { opacity:1; transform:translateY(14px) scale(1.04) rotate(2deg) } 80% { transform:translateY(-8px) scale(.99) rotate(-1deg) } 100% { opacity:1; transform:translateY(0) scale(1) rotate(0) } }
@keyframes cc-shake { 0%,100% { transform:translateX(0) rotate(0) } 15% { transform:translateX(-9px) rotate(-3deg) } 30% { transform:translateX(9px) rotate(3deg) } 45% { transform:translateX(-7px) rotate(-2deg) } 60% { transform:translateX(7px) rotate(2deg) } 80% { transform:translateX(-3px) rotate(-1deg) } }
@keyframes cc-lid { 0% { transform:rotateX(0) translateY(0) } 45% { transform:rotateX(-118deg) translateY(-10px) } 60% { transform:rotateX(-100deg) translateY(-6px) } 100% { transform:rotateX(-112deg) translateY(-8px) } }
@keyframes cc-flash { 0% { opacity:0; transform:scale(.2) } 25% { opacity:1; transform:scale(1.1) } 100% { opacity:0; transform:scale(2.4) } }
@keyframes cc-beam { 0% { opacity:0; transform:scaleY(.1) } 40% { opacity:.85 } 100% { opacity:.35; transform:scaleY(1) } }
@keyframes cc-spark { 0% { opacity:0; transform:translate(0,0) scale(.4) } 12% { opacity:1 } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(.9) } }
@keyframes cc-rise { 0% { opacity:0; transform:translateY(46px) scale(.8) } 70% { opacity:1; transform:translateY(-6px) scale(1.03) } 100% { opacity:1; transform:translateY(0) scale(1) } }
@keyframes cc-glowpulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes cc-coin { 0% { opacity:0; transform:translate(0,0) rotate(0) } 15% { opacity:1 } 70% { opacity:1 } 100% { opacity:0; transform:translate(var(--cx),-260px) rotate(540deg) } }

.cc-ov { position:fixed; inset:0; z-index:90; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 46%, rgba(60,42,12,.92), rgba(6,7,9,.97) 62%);
  backdrop-filter:blur(6px); animation:cc-fade .35s ease both; }
@supports not (backdrop-filter:blur(6px)) { .cc-ov { background:rgba(6,7,9,.96); } }   /* repli mobile : backdrop-filter coûte cher / absent */
.cc-rays { position:absolute; width:1200px; height:1200px; opacity:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(240,193,75,.22) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%); mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  animation:cc-rays-in .9s .25s ease-out both, cc-rays 34s linear 1.1s infinite; }
.cc-halo { position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,120,.55), transparent 68%);
  animation:cc-fade .8s .3s ease both, cc-glowpulse 3.2s 1.2s ease-in-out infinite; }
.cc-main { position:relative; display:flex; flex-direction:column; align-items:center; gap:34px; padding:0 20px; }

/* Chute et tremblement sur DEUX éléments imbriqués : un seul porterait deux transform concurrents. */
.cc-chest { position:relative; width:230px; height:190px; animation:cc-drop .8s .25s cubic-bezier(.2,.9,.25,1) both; }
.cc-shake { position:absolute; inset:0; animation:cc-shake .55s 1.15s ease-in-out 2 both; }
.cc-beam { position:absolute; left:50%; bottom:108px; translate:-50% 0; width:150px; height:300px; transform-origin:bottom center; opacity:0;
  background:linear-gradient(to top, rgba(255,220,140,.85), rgba(255,220,140,0)); filter:blur(6px); animation:cc-beam 1.1s 2.35s ease-out both; }
.cc-box { position:absolute; left:14px; right:14px; bottom:0; height:108px; border-radius:8px 8px 12px 12px;
  background:linear-gradient(#7a4a20, #4a2a12 55%, #351d0c); border:2px solid #2a1608;
  box-shadow:inset 0 6px 14px rgba(255,190,110,.22), 0 22px 40px rgba(0,0,0,.6); }
.cc-band { position:absolute; inset:12px 0 auto; height:16px; background:linear-gradient(#f0c14b, #a9762a); border-top:1px solid #ffe6a8; border-bottom:1px solid #6d4614; }
.cc-lock { position:absolute; left:50%; top:-14px; translate:-50% 0; width:40px; height:44px; border-radius:6px;
  background:linear-gradient(#ffdd8f, #c1892f); border:2px solid #6d4614; display:grid; place-items:center; }
.cc-hole { width:9px; height:9px; border-radius:50%; background:#3a2409; box-shadow:0 7px 0 -2px #3a2409; }
.cc-lid { position:absolute; left:14px; right:14px; bottom:100px; height:74px; transform-origin:bottom center; transform-style:preserve-3d;
  animation:cc-lid .9s 2.25s cubic-bezier(.3,1.5,.4,1) both; }
.cc-lidface { position:absolute; inset:0; border-radius:14px 14px 4px 4px; background:linear-gradient(#8d5726, #5a3315 60%, #3d2110);
  border:2px solid #2a1608; box-shadow:inset 0 8px 16px rgba(255,200,120,.25); }
.cc-lidband { position:absolute; left:0; right:0; top:26px; height:14px; background:linear-gradient(#f0c14b, #a9762a); border-top:1px solid #ffe6a8; }
.cc-flash { position:absolute; left:50%; bottom:96px; translate:-50% 0; width:210px; height:210px; border-radius:50%; opacity:0;
  background:radial-gradient(circle, #fff 6%, rgba(255,226,150,.9) 26%, transparent 68%); animation:cc-flash .75s 2.2s ease-out both; }
.cc-spark { position:absolute; left:50%; bottom:130px; border-radius:50%; opacity:0; }
.cc-coin { position:absolute; left:50%; bottom:120px; opacity:0; }

.cc-titles { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; animation:cc-rise .7s 2.6s cubic-bezier(.2,.9,.25,1) both; }
.cc-sup { font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:#b9925a; font-weight:700; }
.cc-h { font-family:var(--serif); font-weight:700; font-size:40px; line-height:1.05; color:#ffe9bd; text-shadow:0 0 26px rgba(240,193,75,.55); }
.cc-rewards { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.cc-card { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:108px; padding:16px 18px; border-radius:14px;
  background:linear-gradient(#211a0f, #15120b); border:1px solid #4c3a1c; box-shadow:0 16px 34px rgba(0,0,0,.5);
  animation:cc-rise .6s 2.85s cubic-bezier(.2,.9,.25,1) both; }
.cc-card .cc-ic { font-size:30px; line-height:1; } .cc-card .cc-ic img { width:34px; height:34px; object-fit:contain; }
.cc-amt { font-weight:800; font-size:19px; color:#ffe9bd; }
.cc-nm { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#a08a63; font-weight:700; }
.cc-btn { border:1px solid #ffd987; border-radius:999px; padding:15px 46px; font-weight:800; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:#2a1a05; background:linear-gradient(#ffdb8e, #e2a63a); box-shadow:0 14px 34px rgba(226,166,58,.4);
  animation:cc-rise .6s 3.5s cubic-bezier(.2,.9,.25,1) both; }
.cc-btn:hover { filter:brightness(1.08); } .cc-btn:active { transform:translateY(2px); }
.cc-hint { font-size:11px; letter-spacing:.06em; color:#8a7a5f; animation:cc-fade .6s 3.9s ease both; }

/* Accessibilité : plus de chute/tremblement/particules — fondu simple, récompense affichée d'emblée. */
@media (prefers-reduced-motion: reduce) {
  .cc-ov, .cc-halo, .cc-main, .cc-chest, .cc-shake, .cc-titles, .cc-card, .cc-btn { animation:cc-fade .2s ease both !important; }
  .cc-rays, .cc-beam, .cc-flash, .cc-spark, .cc-coin { display:none; }
  .cc-lid { animation:none; transform:rotateX(-112deg) translateY(-8px); }
}
/* §12.9 — compteur de cadeaux restants sur l'en-tête Carte : doré tant qu'il en reste, éteint à 0. */
.md-stat.md-cache { color:var(--gold-light); border-color:var(--border-gold); }
/* §12.9 — palmarès des trouveurs de la semaine, juste à côté du compteur. Volontairement plus discret que lui
   (c'est un résultat, pas l'incitation) et tronqué : la liste ne doit jamais pousser l'en-tête sur une 2e ligne. */
.md-stat.md-finders { color:var(--gold-light); opacity:.85; max-width:22ch; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:720px) { .md-stat.md-finders { max-width:44ch; } }