/* ============================================================
   Seigneurs de Guerre Online
   Thème "Dark Fantasy stylisé" : plat, moderne, tons froids.
   ============================================================ */
:root {
  /* Fond NOIR : tout le reste se pose dessus par voiles successifs. */
  --bg:        #000000;
  --bg2:       #05070a;
  --panel:     #0c1016;
  --panel2:    #12171f;
  --panel3:    #1b222d;
  --border:    #263042;
  --border2:   #3a4757;
  /* or patiné : la couleur des ornements, sceaux et titres */
  --gilt:      #c9a227;
  --gilt-d:    #7a6216;
  --gilt-l:    #f0d878;
  --text:      #dde5ef;
  --muted:     #8493a8;
  --accent:    #2dd4bf;
  --accent-d:  #1aa595;
  --blue:      #4f8ff0;
  --emerald:   #3ddc97;
  --danger:    #e0556c;
  --danger-d:  #b53a4f;
  --warn:      #e0a13a;
  --or:        #e6b94d;
  --bois:      #7fae5e;
  --pierre:    #9aa6b8;
  --radius:    7px;
  --shadow:    0 6px 22px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Noir de fond, halo de race très atténué, lueur d'or rasante au sommet. */
  background:
    radial-gradient(1100px 420px at 50% -180px, var(--race-glow, #14203a) 0%, transparent 72%),
    radial-gradient(700px 300px at 50% 0, rgba(201,162,39,.05) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  transition: background 0.6s ease;
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
/* Grain de parchemin + vignette : donne de la matière sans éclaircir le noir. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.014) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.011) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.012) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  opacity: .5;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.75) 100%);
}
#app { position: relative; z-index: 1; }

h1, h2, h3 { font-weight: 600; }
.cinzel, .page-title, .logo-main, .brand-text, .sec-title,
.start-logo .logo-main { font-family: 'Cinzel', Georgia, serif; }

#app {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 14px 60px;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 6px 10px; position: relative;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.28) 30%, rgba(201,162,39,.28) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 6px;
  background: linear-gradient(135deg, var(--race, var(--accent)) 0%, var(--blue) 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--race, var(--accent)) 55%, transparent);
  position: relative; transition: background 0.4s, box-shadow 0.4s;
}
.brand-mark::after {
  content: ''; position: absolute; inset: 8px;
  border: 2px solid #0b0f15; transform: rotate(45deg);
}
.brand-text {
  font-size: 22px; letter-spacing: 3px; font-weight: 700;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.online { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.online .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

/* ---------- Resource bar ---------- */
.resourcebar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
}
.res { display: flex; align-items: center; gap: 9px; padding-right: 16px; }
.res + .res { border-left: 1px solid var(--border); padding-left: 16px; }
.res-info { display: flex; flex-direction: column; line-height: 1.15; }
.res-val { font-weight: 700; font-size: 15px; }
.res-cap { font-size: 10px; color: var(--muted); }
.res-rate { font-size: 11px; color: var(--emerald); }
.res-spacer { flex: 1; }
.msg-link {
  background: var(--panel3); border: 1px solid var(--border2);
  color: var(--muted); padding: 7px 14px; border-radius: 5px;
  font-size: 12px; cursor: pointer;
}
.msg-link.has-unread { color: #fff; border-color: var(--danger); box-shadow: 0 0 12px rgba(224,85,108,.35); }
.msg-link:hover { color: var(--text); }

/* Resource icons (SVG détaillés) */
.ricon {
  display: inline-flex; width: 17px; height: 17px;
  vertical-align: -4px; margin-right: 4px;
}
.ricon .rsvg { width: 100%; height: 100%; display: block; }

/* ---------- Main nav ---------- */
.mainnav { display: flex; gap: 6px; margin: 12px 0; }
.navbtn {
  position: relative; flex: 1; padding: 13px 8px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel2), #080b10);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted); font-size: 15px; font-family: 'Cinzel', serif;
  letter-spacing: 1.5px; text-transform: uppercase; transition: .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.navbtn:hover { color: #e8dcc0; border-color: var(--gilt-d); }
.navbtn.active {
  color: #f4ead2; border-color: var(--gilt-d);
  background: linear-gradient(180deg, #1a2028, #0a0d12);
  box-shadow: inset 0 -2px 0 var(--gilt), inset 0 1px 0 rgba(255,255,255,.05),
              0 0 20px rgba(201,162,39,.14);
}

/* ---------- Ticker ---------- */
.ticker {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 12px; overflow: hidden;
  margin-bottom: 12px;
}
.ticker-label {
  font-size: 11px; color: var(--accent); white-space: nowrap;
  font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px;
  border-right: 1px solid var(--border); padding-right: 12px;
}
.ticker-track { flex: 1; overflow: hidden; white-space: nowrap; }
.ticker-track span {
  display: inline-block; padding-left: 100%;
  animation: ticker 38s linear infinite; font-size: 12px; color: var(--muted);
}
@keyframes ticker { to { transform: translateX(-100%); } }

/* ---------- Layout ---------- */
.layout {
  display: grid; grid-template-columns: 186px 1fr 226px; gap: 12px;
  align-items: start;
}
.sidebar, .citypanel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; position: sticky; top: 12px;
}
.side-title, .cp-title {
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 2px;
  color: var(--accent); border-bottom: 1px solid var(--border);
  padding-bottom: 9px; margin-bottom: 10px;
}
.side-menu { display: flex; flex-direction: column; gap: 4px; }
.side-btn {
  text-align: left; padding: 9px 11px; cursor: pointer; font-size: 13px;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--muted); transition: .12s;
}
.side-btn:hover { background: var(--panel3); color: var(--text); }
.side-btn.active {
  background: linear-gradient(90deg, rgba(45,212,191,.16), transparent);
  color: #fff; border-color: var(--border2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.side-note { font-size: 12px; color: var(--muted); }

/* ---------- City panel ---------- */
.citypanel { text-align: center; }
.cp-shield {
  width: 78px; height: 92px; margin: 6px auto 8px;
  background: linear-gradient(160deg, var(--rc, var(--accent)), #0c1119);
  border: 2px solid var(--border2);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
  display: flex; align-items: center; justify-content: center;
}
.cp-shield span {
  font-family: 'Cinzel', serif; font-size: 34px; font-weight: 700;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); margin-bottom: 14px;
}
.cp-name { font-family: 'Cinzel', serif; font-size: 16px; }
.cp-race { font-size: 12px; margin-bottom: 8px; }
.cp-stat {
  display: flex; justify-content: space-between; font-size: 12px;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.cp-stat span { color: var(--muted); }
.cp-pop { margin-top: 8px; }
.cp-alert {
  margin-top: 10px; padding: 9px; border-radius: 5px;
  background: rgba(224,85,108,.12); border: 1px solid var(--danger-d);
  font-size: 11px; color: #f3b6c0;
  animation: pulse 1.6s ease-in-out infinite;
}
.cp-alert-title { font-weight: 700; color: var(--danger); font-size: 12px; }
.cp-alert-time { margin-top: 3px; }
.cp-safe {
  margin-top: 10px; padding: 9px; border-radius: 5px; font-size: 11px;
  background: rgba(61,220,151,.08); border: 1px solid #2a5a45; color: var(--emerald);
}

/* marches en cours dans le panneau « Votre cité » */
.cp-marches {
  margin-top: 10px; padding: 8px 9px; border-radius: 5px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  transition: border-color .2s, background .2s;
}
.cp-marches:hover { border-color: var(--accent); background: rgba(45,212,191,.06); }
.cp-marches-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.cp-march {
  display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px;
  border-left: 2px solid transparent; padding-left: 6px;
}
.cp-march + .cp-march { border-top: 1px solid rgba(255,255,255,.05); }
.cpm-attack { border-left-color: var(--danger); }
.cpm-return { border-left-color: var(--emerald); }
.cpm-trade  { border-left-color: var(--accent); }
.cpm-label { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpm-meta { color: var(--muted); font-size: 10px; }
.cpm-time .cd { font-size: 11px; }
@keyframes pulse { 50% { box-shadow: 0 0 14px rgba(224,85,108,.5); } }

/* ---------- Content / panels ---------- */
.content { min-width: 0; }
.page-title {
  font-size: 25px; margin-bottom: 16px;
  color: #f4ead2; text-shadow: 0 1px 0 #000, 0 0 22px rgba(201,162,39,.16);
  border-bottom: 1px solid var(--border); padding: 0 0 10px 16px;
  letter-spacing: 1.5px; position: relative; text-transform: uppercase;
}
/* second filet, plus fin et doré : effet de gravure */
.page-title::after {
  content: ''; position: absolute; left: 16px; right: 0; bottom: -3px; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,.5), transparent 60%);
}
.page-title::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 28%;
  width: 4px; border-radius: 2px;
  background: var(--race, var(--accent));
  box-shadow: 0 0 8px var(--race, var(--accent));
}
.sec-title {
  font-size: 14px; color: var(--accent); margin: 16px 0 9px;
  letter-spacing: 1px; text-transform: uppercase;
}
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 2px 14px rgba(0,0,0,.5);
}
/* filet doré au sommet de chaque plaque : la signature du thème */
.panel::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.45), transparent);
  pointer-events: none;
}
.panel-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px; color: #eee3c8; margin-bottom: 11px;
  padding-bottom: 8px; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* petit losange gravé sous le titre, comme un sceau */
.panel-title::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--gilt); box-shadow: 0 0 6px rgba(201,162,39,.5);
}
.panel-danger { border-color: var(--danger-d); box-shadow: 0 0 18px rgba(224,85,108,.12); }
.panel-locked { text-align: center; padding: 28px; }
.panel-locked p { margin-bottom: 12px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.muted { color: var(--muted); font-size: 13px; }
.emph { color: var(--text); font-weight: 600; }
.sep { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* ---------- Key/value ---------- */
.kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.kv:last-child { border-bottom: none; }
.kv span { color: var(--muted); }
.kv strong { color: var(--text); }
.up { color: var(--emerald); }

/* ---------- Resource lines ---------- */
.resline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }
.resline-name { flex: 1; }
.resline-val { font-weight: 700; }
.resline-rate { color: var(--emerald); font-size: 12px; min-width: 84px; text-align: right; }

/* ---------- Progress bars ---------- */
.pbar {
  height: 7px; background: #0a0e15; border-radius: 4px; overflow: hidden;
  margin: 5px 0 9px; border: 1px solid var(--border);
}
.pbar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-d), var(--accent)); border-radius: 4px; }
.bar-or .pbar-fill     { background: linear-gradient(90deg, #b88e2e, var(--or)); }
.bar-bois .pbar-fill   { background: linear-gradient(90deg, #4f7a3c, var(--bois)); }
.bar-pierre .pbar-fill { background: linear-gradient(90deg, #5f6b7c, var(--pierre)); }
.bar-pop .pbar-fill    { background: linear-gradient(90deg, #2f64b5, var(--blue)); }
.bar-march .pbar-fill  { background: linear-gradient(90deg, var(--blue), var(--accent)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 4px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border2);
  background: linear-gradient(180deg, var(--panel3), #10151d);
  color: var(--text); letter-spacing: .3px;
  font-weight: 600; transition: .14s; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.btn:hover { filter: brightness(1.18); border-color: var(--gilt-d); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-d));
  border-color: var(--accent); color: #07261f;
}
.btn-attack {
  background: linear-gradient(180deg, var(--danger), var(--danger-d));
  border-color: var(--danger); color: #fff;
}
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: transparent; border-color: var(--danger-d); color: var(--danger); }
.btn-danger:hover { background: rgba(224,85,108,.12); }
.btn-disabled, .btn[disabled] {
  background: #161c26 !important; color: #4f5a6b !important;
  border-color: var(--border) !important; cursor: not-allowed; filter: none !important;
}
.btn-lg { padding: 12px 26px; font-size: 14px; width: auto; }
.btn-mini {
  padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer;
  background: var(--panel3); border: 1px solid var(--border2); color: var(--muted);
  width: auto; font-weight: 600;
}
.btn-mini:hover { color: var(--text); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 11px; margin-bottom: 8px;
}
.card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--border2); }
.card-max { opacity: .62; }
.card-done { border-color: #2a5a45; box-shadow: inset 0 0 0 1px rgba(61,220,151,.18); }
.card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.card-head h3 { font-size: 14px; }
.lvl { font-size: 11px; color: var(--muted); }
.card-desc { font-size: 12px; color: var(--muted); flex: 1; margin-bottom: 9px; }
.card-effect {
  font-size: 12px; background: #0c1119; border: 1px solid var(--border);
  border-radius: 5px; padding: 7px 9px; margin-bottom: 9px;
}
.card-cost {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; margin-bottom: 9px;
}
.card-time { color: var(--muted); }

/* building / unit icons (SVG détaillés sur blason sombre) */
.bicon, .uicon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--border2); position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px; background: linear-gradient(145deg, #27313f, #0a0e15 86%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 5px rgba(0,0,0,.4);
}
/* teinte raciale subtile sur les unités */
.uicon {
  border-color: color-mix(in srgb, var(--uc, var(--border2)) 55%, var(--border2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 9px -2px var(--uc, transparent);
}
.bicon .isvg, .uicon .isvg { width: 100%; height: 100%; display: block; }

.unit-stats {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px;
}
.unit-stats span {
  font-size: 10px; background: #0c1119; border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 6px; color: var(--muted);
}
.train-row { display: flex; gap: 6px; }
.qty {
  width: 70px; padding: 8px; background: #0a0e15; color: var(--text);
  border: 1px solid var(--border2); border-radius: 5px; font-size: 13px;
}
.train-row .btn { flex: 1; }

.costline { display: inline-flex; gap: 8px; }
.cost { display: inline-flex; align-items: center; gap: 2px; }
.cost.lack { color: var(--danger); }

/* ---------- Queue rows ---------- */
.q-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px; padding: 8px 10px; background: #0c1119; border: 1px solid var(--border);
  border-radius: 5px; margin-bottom: 6px; font-size: 12px;
}
.q-row .pbar { width: 100%; margin-bottom: 0; }
.cd { font-family: 'Consolas', monospace; color: var(--accent); font-size: 12px; }

/* ---------- Marches ---------- */
.march-row, .march-detail {
  padding: 9px 11px; border-radius: 5px; margin-bottom: 7px;
  background: #0c1119; border: 1px solid var(--border); border-left-width: 3px;
}
.march-detail { padding: 11px 13px; }
.m-attack { border-left-color: var(--danger); }
.m-return { border-left-color: var(--emerald); }
.m-enemy  { border-left-color: var(--warn); background: rgba(224,161,58,.06); }
.march-main, .md-head { display: flex; justify-content: space-between; align-items: center; }
.march-label { font-weight: 600; font-size: 13px; }
.march-units, .md-units { font-size: 12px; color: var(--muted); margin: 3px 0; }
.threat-banner {
  background: rgba(224,85,108,.14); border: 1px solid var(--danger-d);
  color: #f3b6c0; padding: 8px 11px; border-radius: 5px; margin-bottom: 9px;
  font-size: 12px; font-weight: 600;
}

/* ---------- Lines (combat) ---------- */
.lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.line-box {
  background: #0c1119; border: 1px solid var(--border);
  border-top: 3px solid var(--lc, var(--accent));
  border-radius: 5px; padding: 10px 8px; text-align: center;
}
.line-rank {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lc, var(--muted)); opacity: .75; margin-bottom: 2px;
}
.line-name { font-size: 11px; color: var(--muted); min-height: 28px; }
.line-count { font-size: 22px; font-weight: 700; color: var(--lc, var(--text)); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; color: var(--accent); font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; padding: 8px 9px; border-bottom: 1px solid var(--border2);
}
.tbl td { padding: 8px 9px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .uicon { width: 24px; height: 24px; padding: 2px; vertical-align: -8px; margin-right: 8px; }
.row-self { background: rgba(45,212,191,.1); }
.row-self td { color: #fff; font-weight: 600; }
.tbl-footer { font-size: 12px; color: var(--muted); margin-top: 10px; }
.tbl-turns .phase-defense td:nth-child(2) { color: var(--blue); }
.tbl-turns .phase-assault td:nth-child(2) { color: var(--danger); }

/* ---------- Enemy rows ---------- */
.enemy-row {
  display: flex; align-items: center; gap: 12px; padding: 11px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 8px;
}
.enemy-row:hover { border-color: var(--border2); }
.enemy-shield {
  width: 38px; height: 44px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--ec, var(--accent)), #0c1119);
  border: 1px solid var(--border2);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
  display: flex; align-items: center; justify-content: center;
}
.enemy-shield span { font-family: 'Cinzel', serif; font-weight: 700; color: #fff; margin-bottom: 8px; }
.enemy-info { flex: 1; min-width: 0; }
.enemy-name { font-weight: 600; font-size: 14px; }
.etag { color: var(--accent); font-size: 12px; }
.enemy-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.enemy-act { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.enemy-tt { font-size: 11px; color: var(--muted); }
.enemy-act .btn { width: auto; padding: 7px 16px; }
.badge-looted {
  font-size: 10px; background: rgba(61,220,151,.15); color: var(--emerald);
  padding: 1px 6px; border-radius: 3px; border: 1px solid #2a5a45;
}

/* ---------- World map ---------- */
.worldmap {
  position: relative; width: 100%; aspect-ratio: 680 / 660; border-radius: 8px;
  overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.45);
  margin-bottom: 9px;
}
.wm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-terrain { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; }
.map-overlay .map-city { pointer-events: auto; }

/* placement de la capitale (création de cité) */
.placemap {
  position: relative; width: 100%; max-width: 600px; margin: 0 auto;
  aspect-ratio: 680 / 660; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.place-overlay { position: absolute; inset: 0; cursor: crosshair; z-index: 2; }
.place-marker {
  position: absolute; transform: translate(-50%, -100%); z-index: 3;
  pointer-events: none; width: 0; height: 0;
}
.place-marker::before {
  content: ''; position: absolute; left: -1px; bottom: 0; width: 2px; height: 18px;
  background: #2c1c0c;
}
.place-marker::after {
  content: ''; position: absolute; left: 1px; bottom: 10px; width: 12px; height: 9px;
  background: var(--danger); border: 1px solid #7a2c1c;
  clip-path: polygon(0 0, 100% 35%, 0 70%);
}
.place-readout {
  text-align: center; font-size: 13px; color: var(--muted); margin: 8px 0 14px;
}
.map-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(5,8,12,.9) 100%);
}
.region-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(156,176,190,.45);
  text-shadow: 0 1px 5px #000; white-space: nowrap; z-index: 2;
}
.map-compass { position: absolute; top: 12px; right: 12px; width: 50px; height: 50px; opacity: .82; }
.map-city {
  position: absolute; transform: translate(-50%, -66%); cursor: pointer; z-index: 4;
}
.mc-shield {
  width: 21px; height: 25px;
  background: linear-gradient(160deg, var(--ec, #8893a3), #0c1119);
  border: 1.5px solid #0b0f15;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: 0 0 9px var(--ec, #8893a3), 0 3px 6px rgba(0,0,0,.7);
  transition: transform .14s;
}
.map-city:hover { z-index: 25; }
.map-city:hover .mc-shield { transform: scale(1.4) translateY(-2px); }
.map-self { z-index: 6; cursor: default; }
.map-self .mc-shield {
  width: 28px; height: 33px;
  background: linear-gradient(160deg, var(--accent), #0c2420);
  box-shadow: 0 0 18px var(--accent), 0 3px 6px rgba(0,0,0,.7);
}
.mc-ring {
  position: absolute; left: 50%; top: 11px; border: 2px solid var(--accent);
  border-radius: 50%; transform: translate(-50%, -50%);
  opacity: 0; animation: mcring 2.8s ease-out infinite;
}
.mc-ring2 { animation-delay: 1.4s; }
@keyframes mcring {
  0%   { width: 14px; height: 14px; opacity: .65; }
  100% { width: 70px; height: 70px; opacity: 0; }
}
.mc-tip {
  position: absolute; bottom: 132%; left: 50%; transform: translateX(-50%);
  width: 190px; background: linear-gradient(180deg, var(--panel3), var(--panel));
  border: 1px solid var(--border2); border-radius: 7px; padding: 9px 11px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .12s; z-index: 30;
}
.map-city:hover .mc-tip { opacity: 1; }
/* L'infobulle doit recevoir les clics dès qu'elle est visible : ses boutons
   sont la seule voie vers le raid pour qui joue au doigt. */
.map-city:hover .mc-tip, .map-city.mc-open .mc-tip { opacity: 1; pointer-events: auto; }
.map-city.mc-open { z-index: 40; }
.mct-name { font-weight: 700; font-size: 13px; }
.mct-row { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mct-cta { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.mct-btn {
  display: block; width: 100%; padding: 7px 8px; font: inherit; font-size: 11.5px;
  font-weight: 600; letter-spacing: .3px; cursor: pointer; border-radius: 5px;
  background: #0c1119; border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.mct-trade { color: var(--emerald); border-color: #2a5a45; }
.mct-trade:hover { background: rgba(61,220,151,.12); border-color: var(--emerald); }
.mct-raid { color: var(--danger); border-color: #5a2a2a; }
.mct-raid:hover { background: rgba(224,79,79,.12); border-color: var(--danger); }
.map-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: var(--muted); padding: 3px 2px;
}
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i {
  width: 11px; height: 13px; display: inline-block;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.map-legend-hint { color: #5f6b7c; font-style: italic; margin-left: auto; }
.lg-self { background: var(--accent); }
.lg-h { background: #5b9bd5; }
.lg-e { background: #52c98a; }
.lg-n { background: #c98a3f; }

/* ---------- Kingdoms ---------- */
.kingdom-badge {
  width: 44px; height: 44px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--rc), #0c1119);
  border: 1px solid var(--border2); font-family: 'Cinzel', serif;
  font-weight: 700; font-size: 13px; color: #fff;
}
.kingdom-big { width: 64px; height: 64px; font-size: 18px; }
.kingdom-banner { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.kingdom-banner h2 { font-family: 'Cinzel', serif; }
.kingdom-banner p { font-size: 12px; color: var(--muted); }

/* ---------- Messages ---------- */
.msg-toolbar { text-align: right; margin-bottom: 8px; }
.msg-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 10px 12px; background: #0c1119; border: 1px solid var(--border);
  border-radius: 5px; margin-bottom: 6px; border-left-width: 3px;
}
.msg-row.unread { border-left-color: var(--accent); }
.msg-rapport { border-left-color: var(--warn); }
.msg-alerte  { border-left-color: var(--danger); }
.msg-text { font-size: 13px; }
.msg-side { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.msg-date { font-size: 11px; color: var(--muted); }
.log-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.log-row:last-child { border-bottom: none; }
.log-rapport { color: #f0c98a; }
.log-alerte { color: #f3b6c0; }

/* ---------- Start screen ---------- */
.start { max-width: 880px; margin: 0 auto; padding: 36px 16px; text-align: center; }
.start-logo { margin-bottom: 8px; }
.start-logo .logo-main {
  font-size: 46px; font-weight: 700; letter-spacing: 6px; display: block;
  background: linear-gradient(90deg, #fff, var(--accent), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-online {
  font-size: 0.36em; letter-spacing: 4px; margin-left: 12px; vertical-align: 0.5em;
  -webkit-text-fill-color: var(--accent); color: var(--accent); font-weight: 600;
}
.logo-sub { color: var(--muted); font-size: 14px; letter-spacing: 2px; }
.start-intro { color: var(--muted); margin: 14px 0 24px; }
.race-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.race-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 14px; cursor: pointer; transition: .15s;
}
.race-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.race-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(45,212,191,.3), inset 0 0 0 1px var(--accent);
}
.race-emblem {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--rc), #0c1119);
  border: 1px solid var(--border2); transform: rotate(45deg);
}
.race-card h3 { font-family: 'Cinzel', serif; margin-bottom: 6px; }
.race-desc { font-size: 12px; color: var(--muted); min-height: 52px; }
.race-bonus { font-size: 12px; color: var(--emerald); margin-top: 8px; }
.start-name { margin: 24px 0 8px; }
.start-name label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.start-name input {
  width: 320px; max-width: 90%; padding: 11px; text-align: center;
  background: #0a0e15; border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); font-size: 15px; font-family: 'Cinzel', serif;
}
.start-actions { display: flex; gap: 10px; justify-content: center; margin: 18px 0 10px; }
.start-hint { font-size: 12px; color: var(--muted); }
.start-hint strong { color: var(--accent); }

/* ---------- Modals ---------- */
#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.modal-bg {
  position: fixed; inset: 0; background: rgba(4,7,12,.78);
  backdrop-filter: blur(2px); pointer-events: auto;
}
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: var(--shadow); pointer-events: auto;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-family: 'Cinzel', serif; font-size: 17px; }
.modal-x {
  background: none; border: none; color: var(--muted); font-size: 24px;
  cursor: pointer; line-height: 1;
}
.modal-x:hover { color: var(--danger); }
.modal-body { padding: 16px 18px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 13px 18px; border-top: 1px solid var(--border);
}
.atk-intel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  background: #0c1119; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px;
}
.strategy-line { font-size: 13px; line-height: 2.1; }
.strategy-line select {
  background: #0a0e15; color: var(--accent); border: 1px solid var(--border2);
  border-radius: 4px; padding: 3px 6px; font-size: 13px; font-weight: 700;
}
.atk-units { display: flex; flex-direction: column; gap: 6px; }
.atk-unit {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 5px;
}
.atk-uname { flex: 1; font-size: 13px; }
.atk-uavail { font-size: 11px; color: var(--muted); }
.atk-unit .qty { width: 78px; }
.atk-cart { border-color: var(--accent-d); background: rgba(45,212,191,.05); }
.atk-carttag {
  font-size: 9px; background: rgba(45,212,191,.16); color: var(--accent);
  border: 1px solid var(--accent-d); border-radius: 3px; padding: 1px 5px; margin-left: 4px;
}
.atk-loot-hint { font-size: 11px; margin: 4px 0 8px; }
.atk-lootcap { font-size: 13px; color: var(--muted); margin: 6px 0; font-weight: 600; }
.atk-preview { margin-top: 6px; }
.modal-report .report-verdict {
  text-align: center; font-family: 'Cinzel', serif; font-size: 22px;
  letter-spacing: 4px; padding: 10px; border-radius: 6px; margin-bottom: 14px;
}
.verdict-win { color: var(--emerald); background: rgba(61,220,151,.1); border: 1px solid #2a5a45; }
.verdict-lose { color: var(--danger); background: rgba(224,85,108,.1); border: 1px solid var(--danger-d); }
.report-block p { font-size: 13px; color: var(--muted); }
.report-loot {
  margin-top: 12px; text-align: center; font-size: 13px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px; padding: 9px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--panel3); border: 1px solid var(--border2);
  border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 11px 18px; font-size: 13px; box-shadow: var(--shadow);
  pointer-events: auto; transition: .28s; z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok   { border-left-color: var(--emerald); }
.toast-warn { border-left-color: var(--warn); }
.toast-info { border-left-color: var(--blue); }

/* ---------- Commerce ---------- */
.exchange-form { display: flex; align-items: flex-end; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.ex-side { display: flex; flex-direction: column; gap: 5px; }
.ex-side label { font-size: 11px; color: var(--muted); }
.ex-side select {
  background: #0a0e15; color: var(--text); border: 1px solid var(--border2);
  border-radius: 5px; padding: 8px; font-size: 13px;
}
.ex-arrow { font-size: 20px; color: var(--accent); padding-bottom: 7px; }
.ex-preview { font-size: 19px; font-weight: 700; color: var(--emerald); padding: 5px 0; }
.cart-need { font-size: 12px; color: var(--muted); margin: 8px 0; }
.q-pending {
  font-size: 11px; color: var(--muted); font-style: italic;
  background: #0c1119; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px;
}
.q-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 6px; border-radius: 50%;
  background: var(--panel3); border: 1px solid var(--border2);
  font-size: 10px; color: var(--muted); vertical-align: 1px;
}
.md-head-right { display: inline-flex; align-items: center; gap: 8px; }
.btn-recall { width: auto; padding: 3px 9px; border-color: var(--warn); color: var(--warn); }
.btn-recall:hover { background: rgba(224,161,58,.12); color: var(--warn); }
.btn-cancel-q { width: auto; padding: 3px 9px; border: 1px solid var(--danger); color: var(--danger); border-radius: 5px; background: transparent; white-space: nowrap; }
.btn-cancel-q:hover { background: rgba(197,58,58,.14); color: var(--danger); }

.sub-panel { border-color: rgba(212,175,90,.45); }
.sub-status { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.sub-status.sub-on { color: #e7c766; background: rgba(212,175,90,.14); border: 1px solid rgba(212,175,90,.5); }
.sub-status.sub-off { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.sub-perks { list-style: none; padding: 0; margin: 6px 0 10px; }
.sub-perks li { padding: 4px 0; color: var(--text); font-size: 13px; }

/* --- expédition entre seigneurs (commerce de confiance) --- */
.modal-send { max-width: 620px; }
.snd-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; }
.snd-head .profil-card { flex: 0 0 auto; }
.snd-meta { flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: 3px; }
.snd-city { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.snd-city select {
  display: block; margin-top: 4px; width: 100%; background: #0a0e15; color: var(--text);
  border: 1px solid var(--border2); border-radius: 5px; padding: 7px;
}
.snd-trust {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  background: rgba(224,161,58,.07); border: 1px solid rgba(224,161,58,.32);
  border-radius: 6px; padding: 9px 11px; margin: 0 0 6px;
}
/* transfert interne : rassurant, pas d'avertissement de confiance */
.snd-interne {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  background: rgba(61,220,151,.07); border: 1px solid rgba(61,220,151,.28);
  border-radius: 6px; padding: 9px 11px; margin: 0 0 6px;
}
.badge-mine {
  font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 5px;
  background: rgba(61,220,151,.13); color: var(--emerald); border: 1px solid #2a5a45;
}
/* mes autres cités sur la carte : cliquables pour être ravitaillées */
.map-mine { cursor: pointer; }
.map-mine .mc-shield { opacity: .82; }
.map-mine:hover .mc-shield { opacity: 1; }
.snd-res { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.snd-res span { display: flex; align-items: center; gap: 5px; }
.snd-res .qty { width: 96px; }
.snd-units { display: flex; flex-direction: column; gap: 6px; }
.snd-unit {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
}
.snd-uname { flex: 1; font-size: 13px; }
.snd-uavail { font-size: 11px; color: var(--muted); }
.snd-unit .qty { width: 78px; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
}
/* blason cliquable : c'est le point d'entrée du commerce depuis le forum */
.fp-shield-act { cursor: pointer; transition: transform .12s, filter .12s; }
.fp-shield-act:hover { transform: scale(1.09); filter: brightness(1.2); }
.cta-trade { color: var(--emerald); }
.cta-raid { color: var(--danger); margin-left: 8px; }
.m-trade { border-left-color: var(--blue); background: rgba(79,143,240,.05); }

/* ---------- Ambiance par race ---------- */
body[data-race="humains"] { --race: #5b9bd5; --race-glow: rgba(91,155,213,0.22); }
body[data-race="elfes"]   { --race: #52c98a; --race-glow: rgba(82,201,138,0.20); }
body[data-race="nains"]   { --race: #c98a3f; --race-glow: rgba(201,138,63,0.22); }
.race-emblem {
  display: inline-flex; width: 24px; height: 24px; margin-left: 12px;
  filter: drop-shadow(0 0 7px var(--race, transparent));
  transition: filter 0.4s;
}
.race-emblem svg { width: 100%; height: 100%; }

/* ---------- Forum ---------- */
.forum-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--border);
}
.forum-cat-title { font-size: 15px; font-family: 'Cinzel', serif; }
.forum-head .muted { font-size: 12px; margin-top: 3px; }
.forum-new { width: auto; white-space: nowrap; }
.forum-thread {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 7px; cursor: pointer; transition: .12s;
}
.forum-thread:hover { border-color: var(--border2); background: #10161f; }
.ft-cat {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #fff;
  background: linear-gradient(150deg, var(--cc, var(--accent)), #0c1119);
  border: 1px solid var(--border2);
}
.ft-cat-lg { width: 52px; height: 52px; font-size: 13px; border-radius: 8px; }

/* index de catégories du forum */
.forum-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 11px; }
.forum-cat-card {
  display: flex; align-items: center; gap: 13px; padding: 14px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: .14s;
}
.forum-cat-card:hover { border-color: var(--border2); background: #10161f; transform: translateY(-2px); }
.fcc-body { flex: 1; min-width: 0; }
.fcc-body h3 { font-size: 15px; font-family: 'Cinzel', serif; margin-bottom: 3px; }
.fcc-desc { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fcc-meta { font-size: 11px; color: var(--accent); }
.fcc-arrow { font-size: 22px; color: var(--muted); flex-shrink: 0; }
.forum-back-link { width: auto; padding: 4px 10px; }
.ft-main { flex: 1; min-width: 0; }
.ft-title { font-size: 13px; font-weight: 600; }
.ft-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ft-you {
  font-size: 9px; background: rgba(45,212,191,.16); color: var(--accent);
  border: 1px solid var(--accent-d); border-radius: 3px; padding: 1px 5px;
}
.ft-last { text-align: right; flex-shrink: 0; }
.ft-time { font-size: 11px; color: var(--accent); }
.ft-by { font-size: 11px; color: var(--muted); }
.thread-cat {
  font-size: 11px; color: var(--cc, var(--accent));
  border: 1px solid var(--cc, var(--accent)); border-radius: 4px; padding: 3px 10px;
}
.forum-post { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.forum-post:last-of-type { border-bottom: none; }
.fp-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(150deg, var(--ac, var(--accent)), #0c1119);
  border: 1px solid var(--border2);
}
.fp-body { flex: 1; min-width: 0; }
.fp-head { font-size: 13px; }
.fp-date { font-size: 11px; color: var(--muted); margin-left: 6px; }
.fp-text { font-size: 13px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.fp-self { background: rgba(45,212,191,.05); border-radius: 6px; padding: 12px 8px; }
.forum-reply { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.forum-reply textarea, .nt-area, .nt-input, .nt-select {
  width: 100%; background: #0a0e15; color: var(--text);
  border: 1px solid var(--border2); border-radius: 6px; padding: 10px;
  font-size: 13px; font-family: inherit; resize: vertical;
}
.forum-reply textarea { min-height: 76px; margin-bottom: 9px; }
.nt-label { display: block; font-size: 11px; color: var(--muted); margin: 11px 0 5px; }
.nt-area { min-height: 100px; }
.forum-mini {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 5px;
  margin-bottom: 6px; cursor: pointer;
}
.forum-mini:hover { border-color: var(--border2); }
.forum-mini .ft-cat { width: 26px; height: 26px; font-size: 8px; }
.fm-title { flex: 1; min-width: 0; font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fm-time { font-size: 11px; color: var(--accent); flex-shrink: 0; }

/* ---------- Messagerie privée ---------- */
.mail-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(150deg, var(--ac, var(--accent)), #0c1119);
  border: 1px solid var(--border2);
}
.mail-row-unread { border-left: 3px solid var(--accent); }
.mail-row-unread .ft-title { color: #fff; }
.badge-unread {
  font-size: 10px; background: var(--accent); color: #07261f;
  border-radius: 4px; padding: 1px 7px; font-weight: 700; margin-left: 5px;
}
.conv-self { background: rgba(45,212,191,.07); }
.conv-other { background: rgba(255,255,255,.018); border-radius: 6px; padding: 12px 8px; }
.mail-row .ft-meta strong { color: var(--text); }

/* ---------- Royaume jouable ---------- */
.invite-card {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 7px;
  border-left: 3px solid var(--accent); margin-bottom: 8px;
}
.invite-body { flex: 1; min-width: 0; }
.invite-title { font-weight: 600; font-size: 14px; }
.invite-tag { color: var(--accent); font-size: 12px; margin-left: 4px; }
.invite-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.invite-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.invite-act .btn { width: auto; padding: 6px 16px; }

.kingdom-leader-panel { border-color: var(--accent-d); box-shadow: 0 0 22px rgba(45,212,191,.10); }
.leader-tag { color: var(--accent); font-size: 13px; font-weight: 400; }
.badge-leader {
  font-size: 9px; background: rgba(45,212,191,.18); color: var(--accent);
  border: 1px solid var(--accent-d); border-radius: 3px; padding: 1px 6px; vertical-align: 2px;
  font-family: 'Segoe UI', sans-serif; letter-spacing: 1px; text-transform: uppercase;
}
.kingdom-bonus-box {
  margin-top: 16px; padding: 15px; background: linear-gradient(135deg, #0d2826, var(--panel2));
  border: 1px solid var(--accent-d); border-radius: 7px;
}
.kbb-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); letter-spacing: 1px; }
.kbb-value { font-size: 32px; font-weight: 700; color: var(--emerald); line-height: 1; margin: 4px 0 6px; }
.kbb-desc { font-size: 12px; color: var(--muted); }

.member-row, .recruit-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 7px;
}
.member-badge {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; color: #fff; font-size: 15px;
  background: linear-gradient(150deg, var(--rc, var(--accent)), #0c1119);
  border: 1px solid var(--border2);
}
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; }
.member-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chance-high { color: var(--emerald); font-weight: 600; }
.chance-mid  { color: var(--warn); font-weight: 600; }
.chance-low  { color: var(--danger); font-weight: 600; }
.recruit-btn { width: auto !important; padding: 7px 16px; }

.donate-form { display: flex; gap: 10px; margin: 10px 0 11px; flex-wrap: wrap; }
.donate-form span { display: flex; align-items: center; gap: 5px; }
.donate-form .qty { width: 90px; }

.color-row { display: flex; gap: 8px; margin-bottom: 4px; }
.color-swatch {
  display: inline-block; width: 32px; height: 32px; border-radius: 6px;
  background: var(--sw); cursor: pointer; border: 2px solid transparent;
  position: relative; transition: .15s;
}
.color-swatch input { position: absolute; opacity: 0; pointer-events: none; inset: 0; }
.color-swatch:has(input:checked) {
  border-color: #fff; box-shadow: 0 0 10px var(--sw);
}
.bonus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bonus-choice {
  display: flex; flex-direction: column; padding: 9px 11px; cursor: pointer;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
  position: relative; transition: .12s;
}
.bonus-choice input { position: absolute; opacity: 0; inset: 0; }
.bonus-choice:has(input:checked) {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: linear-gradient(135deg, rgba(45,212,191,.08), #0c1119);
}
.bc-nom { font-weight: 600; font-size: 13px; color: var(--text); }
.bc-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }

.card-mine { border-color: var(--accent-d); box-shadow: 0 0 14px rgba(45,212,191,.12); }

/* ---------- Quêtes narratives ---------- */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
  box-shadow: 0 0 8px rgba(224,85,108,.6); animation: pulse 1.6s ease-in-out infinite;
}
.bar-quest .pbar-fill { background: linear-gradient(90deg, var(--warn), var(--accent)); }
.quest-intro { border-color: var(--border2); }
.quest-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.quest-progress-stat {
  font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700; color: var(--accent);
  line-height: 1; text-align: right; flex-shrink: 0;
}
.quest-progress-stat span { display: block; font-size: 11px; color: var(--muted); font-weight: 400; font-family: 'Segoe UI', sans-serif; }
.quest-current { font-size: 13px; color: var(--muted); margin-top: 8px; }
.quest-current strong { color: var(--text); }

.quest-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 11px;
}
.quest-ready { border-color: var(--accent-d); box-shadow: 0 0 20px rgba(45,212,191,.13); }
.quest-claimed { opacity: 0.72; }
.quest-locked { opacity: 0.55; }
.quest-head { display: flex; align-items: center; gap: 13px; }
.quest-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; color: var(--race, var(--accent));
  background: #0c1119; border: 1px solid var(--border2);
}
.quest-titles { flex: 1; min-width: 0; }
.quest-titles h3 { font-size: 15px; font-family: 'Cinzel', serif; }
.quest-sub { font-size: 12px; color: var(--muted); font-style: italic; }
.quest-status {
  flex-shrink: 0; font-size: 10px; padding: 3px 9px; border-radius: 4px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
}
.st-active  { background: rgba(91,155,213,.14); color: var(--blue); border: 1px solid #2f4f7a; }
.st-ready   { background: rgba(45,212,191,.16); color: var(--accent); border: 1px solid var(--accent-d); }
.st-claimed { background: rgba(61,220,151,.12); color: var(--emerald); border: 1px solid #2a5a45; }
.st-locked  { background: #161c26; color: #5f6b7c; border: 1px solid var(--border); }

.quest-goals { margin: 12px 0 0; }
.quest-goal {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  gap: 8px; padding: 5px 0; font-size: 13px;
}
.quest-goal .goal-bar { grid-column: 1 / -1; }
.goal-check {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--emerald);
}
.goal-done .goal-check { background: rgba(61,220,151,.16); border-color: var(--emerald); }
.goal-done .goal-label { color: var(--text); }
.goal-label { color: var(--muted); }
.goal-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-bar { height: 5px; background: #0a0e15; border-radius: 3px; overflow: hidden; margin-top: 3px; border: 1px solid var(--border); }
.goal-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-d), var(--accent)); }

.quest-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border);
}
.quest-reward { font-size: 13px; color: var(--text); }
.claimed-foot { color: var(--muted); font-size: 12px; justify-content: flex-start; }
.quest-claim { width: auto !important; padding: 8px 22px; }

/* widget Accueil */
.quest-widget { border-left: 3px solid var(--race, var(--accent)); }
.qw-narratif { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 10px; }
.qw-goals { display: flex; flex-direction: column; gap: 5px; }
.qw-goal { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.qw-goal.goal-done { color: var(--text); }
.qw-goal .goal-check { font-size: 12px; }
.qw-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.qw-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
}
.qw-foot .btn { width: auto; padding: 8px 18px; }

/* ---------- Multijoueur ---------- */
.cp-net {
  margin-top: 12px; padding: 10px; border-radius: 6px;
  background: #0c1119; border: 1px solid var(--border); font-size: 12px;
}
.cp-net-on { border-color: var(--border2); background: rgba(255,255,255,.03); }
.net-dot-row { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.net-dot { width: 8px; height: 8px; border-radius: 50%; background: #5f6b7c; }
.net-dot.online { background: var(--emerald); box-shadow: 0 0 7px var(--emerald); }
.net-dot.connecting { background: var(--warn); animation: pulse 1.2s infinite; }
.net-pseudo {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-weight: 700; color: var(--text); margin: 2px 0 7px; font-size: 13px;
}
.net-shield, .net-pseudo svg { width: 30px; height: 30px; flex: 0 0 30px; }
.net-btn { width: 100%; margin-top: 5px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.auth-tab {
  flex: 1; padding: 9px; cursor: pointer; font-size: 13px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
}
.auth-tab.active { color: #fff; border-color: var(--accent); background: linear-gradient(180deg, #1d3a3a, var(--panel)); }
.auth-intro { font-size: 12px; margin-bottom: 12px; }
.auth-note { font-size: 12px; margin-top: 10px; }
.auth-err { color: var(--danger); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar, .citypanel { position: static; }
  .side-menu { flex-direction: row; flex-wrap: wrap; }
  .grid-2 { grid-template-columns: 1fr; }
  .race-grid { grid-template-columns: 1fr; }
  .lines-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Téléphones ---- */
@media (max-width: 760px) {
  #app { padding: 0 8px 48px; }
  .topbar { padding: 10px 2px 6px; }
  .brand { gap: 8px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-text { font-size: 17px; letter-spacing: 2px; }
  .race-emblem { width: 20px; height: 20px; margin-left: 8px; }
  .online { font-size: 11px; }

  /* barre de ressources : 3 valeurs sur une ligne, message dessous */
  .resourcebar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .res { flex: 1 1 0; min-width: 0; padding: 0 8px 0 0; gap: 6px; }
  .res + .res { padding-left: 8px; }
  .res-val { font-size: 13px; }
  .res-cap { display: none; }
  .res-rate { font-size: 10px; }
  .res-spacer { display: none; }
  .msg-link { flex: 1 1 100%; order: 5; text-align: center; padding: 9px; }

  /* navigation : 3 par ligne, tout reste visible */
  .mainnav { flex-wrap: wrap; gap: 5px; margin: 10px 0; }
  .navbtn { flex: 1 1 30%; padding: 11px 4px; font-size: 13px; letter-spacing: .5px; }
  .nav-badge { margin-left: 4px; }

  /* on masque le panneau latéral quand il n'a qu'une note d'intro */
  .sidebar:has(.side-note) { display: none; }
  .side-menu { gap: 5px; }
  .side-btn { flex: 1 1 auto; text-align: center; padding: 9px 8px; }

  .ticker { margin-bottom: 10px; padding: 5px 10px; }
  .page-title { font-size: 19px; padding: 0 0 9px 12px; margin-bottom: 12px; }
  .sec-title { font-size: 13px; }
  .panel { padding: 12px; margin-bottom: 10px; }
  .panel-title { font-size: 13px; }
  .card-grid { grid-template-columns: 1fr; }
  .citypanel { margin-top: 12px; }
  .cp-shield { width: 64px; height: 76px; }

  /* modales et formulaires */
  .atk-intel { grid-template-columns: 1fr; }
  .bonus-row { grid-template-columns: 1fr; }
  .modal { width: 96vw; }
  .modal-body { padding: 14px; }
  .donate-form, .exchange-form { gap: 8px; }
  .enemy-row { flex-wrap: wrap; }
  .enemy-act { flex-direction: row; width: 100%; justify-content: space-between; margin-top: 6px; }
}

@media (max-width: 430px) {
  .navbtn { font-size: 12px; letter-spacing: 0; padding: 11px 2px; }
  .res-val { font-size: 12px; }
  .res-rate { font-size: 9px; }
  .page-title { font-size: 17px; }
  .lines-grid { grid-template-columns: 1fr 1fr; }
  .start-logo .logo-main { font-size: 30px; letter-spacing: 3px; }
  .start { padding: 22px 6px; }
}

/* ---------- Barre des cités (capitale + colonies) ---------- */
.citybar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 8px; padding: 6px 8px; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.citytab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 5px; font-size: 12px; cursor: pointer;
  background: #0c1119; border: 1px solid var(--border); color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
}
.citytab:hover { color: var(--text); border-color: var(--accent); }
.citytab.active {
  color: var(--text); border-color: var(--accent);
  background: rgba(45,212,191,.10); font-weight: 600;
}
.ct-crown { color: #e0a13a; font-size: 11px; }
.citytab-new { color: var(--emerald); border-color: #2a5a45; }
.citytab-new:hover { background: rgba(61,220,151,.10); }
.ct-left {
  font-size: 10px; padding: 0 5px; border-radius: 8px;
  background: rgba(61,220,151,.18); color: var(--emerald);
}
.citytab-full { color: var(--muted); cursor: default; opacity: .7; }
.citytab-rename { margin-left: auto; padding: 5px 10px; }

/* carte de colonisation : cases déjà prises */
.modal-colonize .placemap { max-width: 100%; }
.place-taken {
  position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--danger); border: 1px solid #0b0f15;
  pointer-events: none;
}
@media (max-width: 760px) {
  .citytab { padding: 4px 9px; font-size: 11px; }
}

/* ---------- Profil joueur (blason + points + race) ---------- */
.pshield { width: 100%; height: 100%; display: block; }
.profil-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 6px; margin-bottom: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.profil-blason { width: 46px; height: 46px; flex: 0 0 46px; }
.profil-nom { font-weight: 700; font-size: 13px; color: var(--text); }
.profil-race { font-size: 11px; }
.profil-pts { font-size: 11px; color: #e0a13a; font-weight: 600; }

/* blason dans les messages du forum */
.fp-shield { background: none !important; border: none !important; padding: 0; }
.fp-shield .pshield { width: 38px; height: 38px; }
.fp-prof { font-size: 10px; margin-left: 6px; opacity: .9; }

/* galerie de choix d'emblème */
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px; margin-top: 8px;
}
.avatar-pick {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 6px; cursor: pointer;
  background: #0c1119; border: 1px solid var(--border); transition: border-color .15s, background .15s;
}
.avatar-pick .pshield { width: 44px; height: 44px; }
.avatar-pick:hover { border-color: var(--accent); background: rgba(45,212,191,.06); }
.avatar-pick.active { border-color: var(--accent); background: rgba(45,212,191,.12); }
.ap-nom { font-size: 10px; color: var(--muted); }
.avatar-pick.active .ap-nom { color: var(--text); }

/* profil dans l'infobulle de la carte */
.mc-tip .profil-card { margin-bottom: 6px; padding: 6px; }
.mc-tip .profil-blason { width: 38px; height: 38px; flex: 0 0 38px; }

/* infobulle de carte : rester dans le cadre malgré le profil */
.mc-tip.tip-below { bottom: auto; top: 132%; }
.mc-tip.tip-left  { left: -6px; transform: none; }
.mc-tip.tip-right { left: auto; right: -6px; transform: none; }
.mc-tip .profil-nom { font-size: 12px; }

/* rappel : le tutoriel ne se joue qu'une fois, sur la capitale */
.quest-capital-note {
  font-size: 12px; line-height: 1.55; color: var(--muted); margin: 10px 0 0;
  padding: 8px 11px; border-radius: 6px;
  background: rgba(91,155,213,.07); border: 1px solid rgba(91,155,213,.28);
}

/* ---------- Classement des seigneurs ---------- */
.tbl-lb td { padding: 10px 9px; vertical-align: middle; }
.lb-row { cursor: pointer; transition: background .12s; }
.lb-row:hover { background: rgba(255,255,255,.04); }
.lb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 12px;
  background: var(--panel3); border: 1px solid var(--border2); color: var(--muted);
}
.lb-medal { color: #12181f; border: none; }
.lb-or     { background: linear-gradient(180deg, #f7e08a, #cd9b32); }
.lb-argent { background: linear-gradient(180deg, #e8edf2, #9aa6b6); }
.lb-bronze { background: linear-gradient(180deg, #e0a878, #9c6a35); }
.lb-lord { display: flex; align-items: center; gap: 10px; }
.lb-shield { width: 34px; height: 34px; flex: 0 0 34px; }
.lb-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lb-name { font-weight: 600; color: var(--text); }
.lb-race { font-size: 11px; }
.lb-points { font-weight: 700; color: #e0a13a; }
.lb-act { text-align: right; white-space: nowrap; }
.lb-act .btn-mini { margin-left: 5px; }

/* ---------- Fiche publique d'un seigneur ---------- */
.modal-profil { max-width: 560px; }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-blason { width: 78px; height: 78px; flex: 0 0 78px; }
.pf-ident { flex: 1; min-width: 0; }
.pf-nom { font-size: 18px; font-weight: 700; color: #fff; }
.pf-race { font-size: 13px; margin-top: 2px; }
.pf-kingdom { margin-top: 4px; }
.pf-rank { text-align: center; padding: 6px 12px; border-left: 1px solid var(--border); }
.pf-rank span { display: block; font-size: 24px; font-weight: 700; color: #e0a13a; }
.pf-rank small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pf-stats { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.pf-cities { display: flex; flex-direction: column; gap: 6px; }
.pf-city {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
}
.pf-city-name { flex: 1; font-size: 13px; }
.pf-city-pts { font-size: 11px; color: var(--muted); }
.btn-mini-atk { border-color: var(--danger); color: var(--danger); }
.btn-mini-atk:hover { background: rgba(197,58,58,.14); }
@media (max-width: 760px) {
  .lb-act .btn-mini { display: block; margin: 3px 0 0 auto; }
  .pf-head { flex-wrap: wrap; }
}

/* ---------- Devise du seigneur ---------- */
.profil-devise {
  font-size: 11px; font-style: italic; color: var(--muted);
  margin-top: 3px; max-width: 250px; overflow-wrap: anywhere;
}
.pf-devise {
  margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0;
  font-style: italic; font-size: 13px; line-height: 1.5; color: var(--text);
  overflow-wrap: anywhere;
}
.pf-devise-edit { margin-bottom: 14px; }
.pf-devise-label { display: block; font-size: 12px; color: var(--text); margin-bottom: 6px; }
.pf-devise-row { display: flex; gap: 8px; align-items: center; }
.pf-devise-row input {
  flex: 1; min-width: 0; padding: 9px 11px; font-size: 13px; font-style: italic;
  background: #0a0e15; color: var(--text);
  border: 1px solid var(--border2); border-radius: 6px;
}
.pf-devise-row input:focus { outline: none; border-color: var(--accent); }
.pf-devise-row .btn { width: auto; padding: 9px 16px; white-space: nowrap; }
.pf-devise-count { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); text-align: right; }

/* ---------- Royaumes : rangs, vocations, mérite, chronique ---------- */
.krank-badge {
  display: inline-block; padding: 2px 9px; margin-right: 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rc, var(--accent)); background: rgba(255,255,255,.06);
  border: 1px solid var(--rc, var(--border2));
}
.krank-desc { font-size: 12px; font-style: italic; color: var(--muted); margin-top: 4px; }
.kbb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.kbb-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-left: 6px;
}
.kbb-cap { display: block; margin-top: 5px; color: #e0a13a; }
.kbb-second { border-color: rgba(155,127,224,.4); }
.kbb-open { border-color: rgba(61,220,151,.4); }
.kbb-locked { opacity: .6; }
.kbb-pick { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.kbb-pick select {
  flex: 1; min-width: 180px; background: #0a0e15; color: var(--text);
  border: 1px solid var(--border2); border-radius: 5px; padding: 8px;
}
.kbb-pick .btn { width: auto; padding: 8px 14px; }
.member-shield { width: 34px; height: 34px; flex: 0 0 34px; }
.merit-bar { height: 3px; margin-top: 5px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.merit-fill { height: 100%; border-radius: 2px; opacity: .8; }
.ktresor-next {
  margin: 10px 0; padding: 9px 11px; border-radius: 6px;
  background: #0c1119; border: 1px solid var(--border);
}
.krank-progress { margin: 12px 0; }
.krank-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.krank-need { font-size: 12px; color: var(--muted); margin-top: 6px; }
.krank-row {
  display: grid; grid-template-columns: 1.2fr 1.3fr 1fr 1.1fr; gap: 8px; align-items: center;
  padding: 8px 10px; margin-bottom: 5px; border-radius: 6px; font-size: 12px;
  background: #0c1119; border: 1px solid var(--border); color: var(--muted);
}
.krank-done { color: var(--text); }
.krank-now { border-color: var(--accent); background: rgba(45,212,191,.07); }
.krank-nom { font-weight: 700; }
.krank-perk { color: #9b7fe0; font-size: 11px; }
.kchron { list-style: none; padding: 0; margin: 0; }
.kchron li {
  font-size: 12px; line-height: 1.5; padding: 7px 0 7px 11px; margin-bottom: 2px;
  border-left: 2px solid var(--border2); color: var(--text);
}
.kchron-fondation { border-left-color: #e0a13a; }
.kchron-rang      { border-left-color: var(--accent); }
.kchron-vocation  { border-left-color: #9b7fe0; }
.kchron-don       { border-left-color: var(--emerald); }
.kchron-exclusion, .kchron-depart { border-left-color: var(--danger); }
.kchron-time { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kdevise-edit { margin: 12px 0; }
@media (max-width: 760px) {
  .krank-row { grid-template-columns: 1fr 1fr; }
}

/* le blason d'une cité à portée ouvre la fiche de son seigneur */
.enemy-shield-act { cursor: pointer; transition: transform .12s, filter .12s; }
.enemy-shield-act:hover { transform: scale(1.07); filter: brightness(1.18); }

/* ---------- Caserne : effectifs par unité ---------- */
.unit-avoir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 8px 0 2px; padding: 7px 9px; font-size: 12px;
  background: #0c1119; border: 1px solid var(--border); border-radius: 6px;
}
.ua-pays { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text); }
.ua-pays .uicon { width: 20px; height: 20px; padding: 1px; }
.ua-route { color: var(--warn); font-weight: 600; }
.ua-route::before { content: '→ '; opacity: .7; }
.ua-route.ua-vide { color: var(--muted); font-weight: 400; }
.ua-route.ua-vide::before { content: ''; }

/* ---------- Forum : suppression par l'auteur ---------- */
.forum-head-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-del {
  margin-left: auto; padding: 1px 7px; line-height: 1.4;
  border: 1px solid var(--danger); color: var(--danger);
  background: transparent; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.fp-del:hover { background: rgba(197,58,58,.14); }
.fp-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ============================================================
   Habillage thématique — ornements sur fond noir
   ============================================================ */

/* Cartes (bâtiments, unités, royaumes) : plaque frappée, coin biseauté */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), #090c11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 12px rgba(0,0,0,.55);
}
.card::after {
  content: ''; position: absolute; right: 0; top: 0;
  border-width: 0 10px 10px 0; border-style: solid;
  border-color: transparent var(--border) transparent transparent;
  opacity: .8; pointer-events: none;
}
.card:hover { border-color: var(--gilt-d); }

/* Titres de section : petites capitales dorées */
.sec-title {
  color: #d9c98f; letter-spacing: 1.2px; text-transform: uppercase;
  font-size: 12px; border-bottom: 1px solid rgba(201,162,39,.16);
  padding-bottom: 5px;
}

/* Bandeau de ressources : plaque gravée */
.resbar, .topres {
  background: linear-gradient(180deg, #0d1219, #05070a) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Gazette : un parchemin qui défile */
.ticker {
  background: linear-gradient(180deg, #0a0e14, #05070a) !important;
  border-color: rgba(201,162,39,.18) !important;
}
.ticker-label {
  color: var(--gilt-l) !important; letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(201,162,39,.3);
}

/* Panneau latéral et fiche de cité : même matière que les plaques */
.sidebar, .citypanel {
  background: linear-gradient(180deg, var(--panel2), #080b10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.side-title, .cp-title {
  color: #d9c98f !important; letter-spacing: 1.4px;
}
.side-btn.active {
  border-color: var(--gilt-d) !important;
  box-shadow: inset 3px 0 0 var(--gilt);
}

/* Onglets de cité : petits écussons */
.citytab {
  background: linear-gradient(180deg, var(--panel2), #080b10);
  letter-spacing: .4px;
}
.citytab.active {
  border-color: var(--gilt-d);
  box-shadow: inset 0 -2px 0 var(--gilt), 0 0 14px rgba(201,162,39,.12);
  color: #f4ead2;
}

/* Tableaux : lignes gravées, en-têtes dorés */
.tbl th {
  color: #c9bb8a; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid rgba(201,162,39,.22);
}
.tbl tbody tr:hover { background: rgba(201,162,39,.035); }

/* Modales : coffret cerclé d'or */
.modal {
  background: linear-gradient(180deg, #121820, #06090d) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.modal-head {
  border-bottom: 1px solid rgba(201,162,39,.22) !important;
}
.modal-head h2 {
  font-family: 'Cinzel', Georgia, serif; color: #f4ead2;
  letter-spacing: 1.2px; text-transform: uppercase; font-size: 17px;
}
.modal-bg { background: rgba(0,0,0,.82) !important; backdrop-filter: blur(2px); }

/* Barres de progression : lueur d'or sous la jauge */
.bar, .goal-bar { background: #05070a !important; }
.bar-fill, .goal-bar-fill { box-shadow: 0 0 10px rgba(255,255,255,.14); }

/* Carte du monde : cadre de parchemin sur fond noir */
.worldmap {
  border-color: rgba(201,162,39,.25) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 14px 44px rgba(0,0,0,.7);
}

/* Écran d'accueil : le logo prend la lumière */
.start-logo .logo-main, .logo-main {
  text-shadow: 0 2px 0 #000, 0 0 34px rgba(201,162,39,.24);
}

/* Séparateurs discrets partout où le contenu respire */
.grid-2 > .panel + .panel { border-left-color: var(--border); }

/* ---------- Bandeau de phase de test ---------- */
.beta-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 0; padding: 9px 13px; font-size: 12px; line-height: 1.5;
  color: var(--muted); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(201,162,39,.09), rgba(0,0,0,.4));
  border: 1px solid rgba(201,162,39,.34);
}
.beta-tag {
  font-family: 'Cinzel', Georgia, serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; padding: 2px 9px; border-radius: 3px;
  color: #12100a; background: linear-gradient(180deg, var(--gilt-l), var(--gilt));
  box-shadow: 0 0 12px rgba(201,162,39,.35);
}
.beta-build {
  margin-left: auto; font-size: 10px; letter-spacing: .8px;
  color: #6d7686; font-variant-numeric: tabular-nums;
}
.beta-bar .btn-link { font-size: 12px; }
/* nouvelle version disponible : on veut que ça se voie */
.beta-maj {
  color: var(--text);
  background: linear-gradient(180deg, rgba(45,212,191,.12), rgba(0,0,0,.4));
  border-color: var(--accent);
  animation: betaPulse 2.4s ease-in-out infinite;
}
.beta-maj strong { color: var(--accent); }
.beta-btn {
  margin-left: auto; padding: 5px 13px;
  border: 1px solid var(--accent); color: #062b26;
  background: linear-gradient(180deg, var(--accent), var(--accent-d));
  border-radius: 4px; cursor: pointer; font-weight: 700;
}
@keyframes betaPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(45,212,191,0); }
  50%      { box-shadow: 0 0 18px rgba(45,212,191,.22); }
}
@media (max-width: 760px) {
  .beta-build { margin-left: 0; }
  .beta-btn { margin-left: 0; width: 100%; }
}

/* ---------- Bêta : code de secours, modération ---------- */
.modal-recovery { max-width: 460px; }
.rec-warn {
  font-size: 12px; line-height: 1.6; color: var(--text); margin-bottom: 12px;
  padding: 10px 12px; border-radius: 6px;
  background: rgba(224,161,58,.09); border: 1px solid rgba(224,161,58,.4);
}
.rec-code {
  font-family: 'Consolas', 'Courier New', monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 3px; text-align: center; color: var(--gilt-l);
  padding: 16px 10px; margin-bottom: 10px; border-radius: 6px;
  background: #05070a; border: 1px solid var(--gilt-d);
  user-select: all; overflow-wrap: anywhere;
}
.rec-check {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.auth-oubli { margin-top: 8px; text-align: center; }
.auth-oubli .btn-link { font-size: 12px; }
/* outils de modération : reconnaissables au premier coup d'œil */
.fp-mod {
  padding: 1px 7px; margin-left: 6px; line-height: 1.4; font-size: 11px;
  border: 1px solid #9b7fe0; color: #b9a3ec; background: rgba(155,127,224,.1);
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.fp-mod:hover { background: rgba(155,127,224,.22); }

/* ==========================================================================
   TÉLÉPHONES — confort tactile
   Le jeu se joue majoritairement au doigt : ce bloc vient après tout le reste
   pour l'emporter sans avoir à multiplier les !important.
   ========================================================================== */

/* --- Encoche et barre d'accueil (iPhone X et suivants) -------------------- */
/* Sans cela, la barre haute passe sous l'encoche et le bas de page sous la
   barre d'accueil : le dernier bouton d'une liste devient invisible. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#app { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.topbar { padding-top: calc(14px + env(safe-area-inset-top)); }

@media (hover: none) {
  /* Le survol n'existe pas au doigt : il reste « collé » après un appui.
     Seule la classe posée à l'appui ouvre l'infobulle de la carte. */
  .map-city:hover .mc-tip { opacity: 0; pointer-events: none; }
  .map-city.mc-open .mc-tip { opacity: 1; pointer-events: auto; }

  /* halo bleu du navigateur au tap : disgracieux sur un fond noir */
  * { -webkit-tap-highlight-color: rgba(201,162,39,.18); }
}

@media (max-width: 760px) {
  /* --- iOS zoome sur tout champ de moins de 16px, et ne dézoome jamais ---
     C'est la première cause d'abandon sur mobile : 16px partout, sans
     exception, y compris les compteurs de troupes de la modale de raid. */
  input, select, textarea, .modal input, .modal select, .modal textarea {
    font-size: 16px;
  }

  /* --- Barre haute : la marque cède la place au compteur de joueurs ------- */
  .topbar { gap: 10px; }
  .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .topbar-right { flex: 0 0 auto; }
  .online { white-space: nowrap; }

  /* --- Cibles tactiles : 44px, la norme au-dessous de laquelle on rate ---- */
  .btn, .side-btn, .citytab, .btn-mini, .msg-link, .navbtn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .side-btn { padding: 11px 12px; }
  .citytab { padding: 10px 14px; font-size: 12px; }
  .citytab-rename { padding: 10px 14px; }
  .btn-mini { padding: 10px 14px; font-size: 12px; }
  .btn-link { min-height: 44px; padding: 10px 6px; display: inline-flex; align-items: center; }
  .modal-x {
    min-width: 44px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 30px; margin: -8px -8px -8px 0;
  }
  /* champs de troupes et listes déroulantes : visables sans loupe */
  .modal input, .modal select, .modal textarea { min-height: 44px; }

  /* --- Modales : 90vh vaut la hauteur BARRES CACHÉES sur iOS, donc trop --- */
  .modal { max-height: 90dvh; }

  /* --- Carte du monde : plus grande, marqueurs visables au doigt ---------- */
  /* la carte récupère la marge du panneau : chaque pixel compte pour viser */
  .panel:has(> .worldmap) { padding-left: 4px; padding-right: 4px; }
  .panel:has(> .worldmap) .panel-title { padding-left: 8px; }
  .worldmap { min-height: 420px; }
  .map-city { padding: 11px; margin: -11px; }   /* zone tactile 44px, visuel inchangé */
  .mc-tip { width: 210px; }
  .mct-btn { padding: 11px 8px; font-size: 12px; }
}

@media (max-width: 430px) {
  /* l'infobulle ne doit jamais sortir du cadre sur un petit écran */
  .mc-tip { width: min(210px, 76vw); }

  /* Lignes de troupes (raid et expédition) : sur 320px, nom + dispo + champ +
     « max » ne tiennent pas sur une ligne. On passe le champ et le bouton en
     dessous — plus large à viser, et plus lisible. */
  .atk-unit, .snd-unit { flex-wrap: wrap; row-gap: 8px; }
  .atk-uname, .snd-uname { flex: 1 1 auto; min-width: 0; }
  .atk-uavail, .snd-uavail { flex: 0 0 auto; }
  .atk-unit .qty, .snd-unit .qty { flex: 1 1 110px; width: auto; min-width: 0; }
  .atk-unit .btn-mini, .snd-unit .btn-mini { flex: 0 0 auto; }
}

/* --- Fiche de cité en panneau bas (téléphone tactile) ---------------------
   Flottante, l'infobulle fait 240px de haut : accrochée à un marqueur en bord
   de carte, elle sort de l'écran une fois sur deux. Ancrée en bas, elle est
   toujours lisible et ses deux boutons tombent sous le pouce.
   Elle est bâtie au niveau du <body> et non dans le marqueur : celui-ci porte
   un transform, qui piégerait tout position:fixed à l'intérieur. */
.map-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end;
  animation: sheet-fade .14s ease-out;
}
.map-sheet-inner {
  width: 100%;
  background: linear-gradient(180deg, var(--panel3), var(--panel));
  border-top: 1px solid var(--gilt-d); border-radius: 14px 14px 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 34px rgba(0,0,0,.7);
  animation: sheet-up .18s ease-out;
  max-height: 80dvh; overflow-y: auto;
}
/* poignée : signale que le panneau se referme d'un appui à côté */
.map-sheet-inner::before {
  content: ''; display: block; width: 38px; height: 4px; margin: -6px auto 12px;
  border-radius: 2px; background: var(--border2);
}
.map-sheet .mct-name { font-size: 16px; }
.map-sheet .mct-row { font-size: 13px; margin-top: 3px; }
.map-sheet .mct-cta { flex-direction: row; gap: 9px; margin-top: 14px; }
.map-sheet .mct-btn { flex: 1 1 0; min-height: 48px; font-size: 13.5px; }
.map-sheet .profil-card { margin-bottom: 10px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
/* certains joueurs coupent les animations au niveau du système : le panneau
   doit alors apparaître directement en place, jamais figé hors de l'écran */
@media (prefers-reduced-motion: reduce) {
  .map-sheet, .map-sheet-inner { animation: none; }
}