/* 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; }
.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); }   /* header + barre de ressources collés en haut, toujours visibles */
#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); }
.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; padding:1rem 1rem 6.8rem; overflow-y:auto; }
.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; }

/* 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; }
#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 : Carte + Guerre + Attaque (séparateur en bas) */
#tabbar button[data-tab="carte"], #tabbar button[data-tab="guerre"], #tabbar button[data-tab="attaque"] {
  flex:0 0 33.333%; border-bottom:1px solid var(--border); }
/* Ligne 2 : Marché + Classement + MSG + Chat */
#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); }
.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); }
.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; }
.btn-down { border-color:var(--red); color:var(--gold-light); background:rgba(248,81,73,.07); }
.bs-toggle { margin-bottom:.7rem; }