/* ═══ Naval War of Emperium — page vitrine PvP ════════════════════════════
   Recette design : parallaxe (bannière nwoe.png) + alternance de voiles
   (page multi-slides) + lueurs + Rajdhani + cartes bordées or. */

html { background: var(--bg); }
body.page-nwoe { background: transparent; }
.page-bg-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh; z-index: -1;
  background-image: url('/images/nwoe.png');
  background-size: cover; background-position: center 30%;
  filter: blur(1px) saturate(1.06) contrast(1.02) brightness(0.68);
  pointer-events: none;
}

.nw-page {
  padding-top: 64px;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  --ink: #eef1f7; --sub: #b3bccb; --faint: #8a94a6;
}
.nw-page p { line-height: 1.6; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.nw-hero {
  position: relative;
  padding: 120px 0 78px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(4,6,12,0.96) 100%),
    linear-gradient(90deg, rgba(4,6,12,0.90) 0%, rgba(4,6,12,0.70) 32%, rgba(4,6,12,0.30) 62%, rgba(4,6,12,0.08) 88%),
    radial-gradient(120% 80% at 82% 12%, rgba(110,168,212,0.16), transparent 55%),
    url('/images/nwoe.png') center 30% / cover no-repeat,
    #0a0d14;
  overflow: hidden; text-align: left;
  border-bottom: 1px solid var(--border);
}
.nw-hero .container { position: relative; z-index: 1; }
.section-label {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--blue);
}
.nw-title {
  font-size: clamp(38px, 5.4vw, 62px); font-weight: 700; color: #fff;
  margin-top: 8px; letter-spacing: 0.01em; line-height: 1.03;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.nw-sub {
  font-size: 18px; color: var(--sub); font-weight: 500;
  margin-top: 16px; max-width: 640px; line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Sommaire collant (réutilise .info-toc de main.css) ─────────────────
   .info-toc est déjà stylé globalement ; rien à redéfinir ici. */

/* ── Sections — alternance (impaire sombre / paire révèle la bannière) ── */
.nw-section {
  position: relative; padding: 66px 0;
  background: linear-gradient(180deg, rgba(4,6,12,0.93) 0%, rgba(4,6,12,0.90) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,147,58,0.10);
}
.nw-section:nth-of-type(even) {
  background: linear-gradient(180deg,
    rgba(5,7,13,0.86) 0%, rgba(5,7,13,0.58) 130px,
    rgba(5,7,13,0.58) calc(100% - 130px), rgba(5,7,13,0.86) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nw-section:nth-of-type(odd)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 45% at 12% 3%, rgba(110,168,212,0.12), transparent 60%),
    radial-gradient(55% 45% at 92% 97%, rgba(201,147,58,0.10), transparent 62%);
}
.nw-section > .container { position: relative; z-index: 1; }
.nw-section:last-child { border-bottom: none; }
.nw-section-title {
  font-size: clamp(25px, 3.1vw, 34px); font-weight: 700; color: #fff;
  margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.nw-section-desc {
  font-size: 16px; color: var(--sub); font-weight: 500;
  max-width: 720px; margin-bottom: 30px; line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Carte générique + puce d'icône ─────────────────────────────────── */
.nw-card {
  background: linear-gradient(180deg, rgba(30,34,45,0.72) 0%, rgba(17,20,28,0.76) 100%);
  border: 1px solid rgba(201,147,58,0.16); border-radius: 15px; padding: 24px 22px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nw-card:hover {
  border-color: rgba(201,147,58,0.45); transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,147,58,0.12) inset;
}
.nw-card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(201,147,58,0.20), rgba(201,147,58,0.07));
  border: 1px solid rgba(201,147,58,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.nw-card-icon svg { width: 24px; height: 24px; }
.nw-card-title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.nw-card-desc { font-size: 14.5px; font-weight: 500; color: var(--sub); line-height: 1.55; }

.nw-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nw-prep-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.nw-prep-grid .nw-card { flex: 1 1 300px; }

/* ── Tableau des niveaux de frégate ─────────────────────────────────── */
.nw-levels {
  border-radius: 15px; overflow: hidden;
  border: 1px solid rgba(201,147,58,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.nw-levels-head, .nw-level-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr; align-items: center;
  gap: 14px; padding: 14px 22px;
}
.nw-levels-head {
  background: rgba(201,147,58,0.12);
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-lt);
}
.nw-level-row {
  background: linear-gradient(180deg, rgba(30,34,45,0.6), rgba(17,20,28,0.66));
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: background 0.15s;
}
.nw-level-row:hover { background: linear-gradient(180deg, rgba(40,45,58,0.7), rgba(22,26,35,0.72)); }
.nw-level-row--max { background: linear-gradient(180deg, rgba(201,147,58,0.14), rgba(17,20,28,0.7)); }
.nw-level-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 4px 10px; border-radius: 8px;
  background: rgba(201,147,58,0.14); border: 1px solid rgba(201,147,58,0.34);
  color: var(--gold-lt); font-weight: 700; font-size: 14px;
}
.nw-level-row--max .nw-level-badge { background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk)); color: #16110a; border-color: transparent; }
.nw-level-cost { color: #fff; }
.nw-level-endur { color: var(--blue); }
.nw-level-chest { color: var(--gold-lt); }
.nw-fineprint { font-size: 13.5px; color: var(--faint); font-weight: 500; margin-top: 14px; max-width: 720px; }

/* ── Étapes de l'assaut ─────────────────────────────────────────────── */
.nw-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.nw-step {
  position: relative;
  background: linear-gradient(180deg, rgba(30,34,45,0.72) 0%, rgba(17,20,28,0.76) 100%);
  border: 1px solid rgba(201,147,58,0.16); border-radius: 16px; padding: 24px 22px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s, transform 0.2s;
}
.nw-step:hover { border-color: rgba(201,147,58,0.42); transform: translateY(-4px); }
.nw-step-ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; color: var(--blue);
  background: linear-gradient(180deg, rgba(110,168,212,0.18), rgba(110,168,212,0.06));
  border: 1px solid rgba(110,168,212,0.34);
}
.nw-step-ico svg { width: 23px; height: 23px; }
.nw-step-num {
  position: absolute; top: 20px; right: 22px;
  font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700;
  color: rgba(255,255,255,0.12); line-height: 1;
}
.nw-step-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 7px; }
.nw-step-desc { font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1.55; }

/* ── Condition de victoire (bandeau) ────────────────────────────────── */
.nw-wincond {
  display: flex; gap: 18px; align-items: center; margin-top: 22px;
  background: linear-gradient(180deg, rgba(201,147,58,0.10), rgba(17,20,28,0.55));
  border: 1px solid rgba(201,147,58,0.3); border-radius: 14px; padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nw-wincond-ico {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(201,147,58,0.22), rgba(201,147,58,0.08));
  border: 1px solid rgba(201,147,58,0.4);
}
.nw-wincond-ico svg { width: 26px; height: 26px; }
.nw-wincond-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.nw-wincond-desc { font-size: 15px; font-weight: 500; color: var(--sub); line-height: 1.55; }

/* ── Butin (gagnant / perdant) ──────────────────────────────────────── */
.nw-spoils-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nw-spoils-card {
  border-radius: 16px; padding: 26px 26px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
.nw-spoils-card--win  { background: linear-gradient(180deg, rgba(46,213,115,0.10), rgba(17,20,28,0.66)); border: 1px solid rgba(46,213,115,0.3); }
.nw-spoils-card--lose { background: linear-gradient(180deg, rgba(224,85,85,0.10), rgba(17,20,28,0.66)); border: 1px solid rgba(224,85,85,0.3); }
.nw-spoils-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border2);
}
.nw-spoils-ico { display: inline-flex; width: 30px; height: 30px; }
.nw-spoils-ico svg { width: 26px; height: 26px; }
.nw-spoils-card--win .nw-spoils-ico { color: #6fe0a0; }
.nw-spoils-card--lose .nw-spoils-ico { color: #f08080; }
.nw-spoils-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nw-spoils-list li {
  position: relative; padding-left: 24px; font-size: 15px; font-weight: 500;
  color: var(--ink); line-height: 1.5;
}
.nw-spoils-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px;
  border-radius: 50%;
}
.nw-spoils-card--win .nw-spoils-list li::before { background: #2ed573; box-shadow: 0 0 8px rgba(46,213,115,0.6); }
.nw-spoils-card--lose .nw-spoils-list li::before { background: #e05555; box-shadow: 0 0 8px rgba(224,85,85,0.6); }

/* ── CTA ────────────────────────────────────────────────────────────── */
.nw-cta {
  text-align: center; margin-top: 40px;
  background: linear-gradient(180deg, rgba(88,101,242,0.10), rgba(17,20,28,0.6));
  border: 1px solid rgba(88,101,242,0.28); border-radius: 18px; padding: 40px 30px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.nw-cta-title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.nw-cta-desc { font-size: 15.5px; color: var(--sub); font-weight: 500; max-width: 540px; margin: 0 auto 22px; }
.nw-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: #5865f2; color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 28px; border-radius: 12px; box-shadow: 0 10px 28px rgba(88,101,242,0.4);
  transition: transform 0.18s, filter 0.18s;
}
.nw-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nw-cta-btn svg { width: 20px; height: 20px; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nw-pillars { grid-template-columns: repeat(2, 1fr); }
  .nw-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .nw-pillars, .nw-steps, .nw-spoils-grid { grid-template-columns: 1fr; }
  .nw-levels-head { display: none; }
  .nw-level-row { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .nw-wincond { flex-direction: column; text-align: center; align-items: center; }
}

/* ══════════ CARTE MARITIME LIVE ══════════════════════════════════════════ */
.nw-maplayout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
@media(max-width:900px){ .nw-maplayout{ grid-template-columns:1fr; } }

.nw-mapbox{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  border:1px solid rgba(232,192,122,.35); border-radius:14px; background:#0b1826;
  box-shadow:0 18px 55px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4); }
.nw-mapbox svg{ display:block; width:100%; height:100%; user-select:none; }
.nw-glabel{ fill:#e8c07a; font-weight:700; font-family:inherit; }
.nw-mlabel{ font-family:inherit; font-weight:700; paint-order:stroke;
  stroke:#08111c; stroke-width:3px; stroke-linejoin:round; }
.nw-ship.is-war{ animation:nwPulse 1.4s ease-in-out infinite; }
@keyframes nwPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ── colonne flotte ── */
.nw-fleet{ background:linear-gradient(180deg,rgba(21,40,62,.92),rgba(13,27,42,.92));
  border:1px solid rgba(232,192,122,.28); border-radius:14px; padding:16px 15px; }
.nw-fleet-title{ display:flex; align-items:center; gap:9px; margin:0 0 13px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#e8c07a; }
.nw-fleet-title svg{ width:17px; height:17px; flex:0 0 auto; }
.nw-fleet-list{ display:flex; flex-direction:column; gap:9px; max-height:560px; overflow-y:auto; }
.nw-fleet-empty{ margin:0; font-size:13px; color:#7d90a6; font-style:italic; }

.nw-fleet-row{ background:rgba(255,255,255,.035); border:1px solid rgba(232,192,122,.18);
  border-left:3px solid rgba(232,192,122,.5); border-radius:9px; padding:9px 11px; }
.nw-fleet-row.is-navigation{ border-left-color:#7dd3fc; }
.nw-fleet-row.is-guerre{ border-left-color:#e2574c; background:rgba(226,87,76,.08); }
.nw-fleet-row.is-quai{ border-left-color:#8fa3ba; opacity:.72; }
.nw-fleet-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nw-fleet-guild{ font-size:14.5px; font-weight:700; color:#e6eef7; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nw-fleet-lv{ font-size:11px; color:#8fa3ba; flex:0 0 auto; }
.nw-fleet-meta{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.nw-badge{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:color-mix(in srgb, var(--c) 14%, transparent); border-radius:20px; padding:2px 9px; }
.nw-fleet-pos{ font-size:12.5px; font-weight:700; color:#e8c07a; font-variant-numeric:tabular-nums; }
.nw-fleet-nav{ margin-top:6px; font-size:12.5px; color:#a9bccf; }
.nw-fleet-nav b{ color:#7dd3fc; }
.nw-eta{ color:#e6eef7; font-variant-numeric:tabular-nums; }

/* ── zoom / déplacement de la carte maritime ── */
.nw-mapbox svg{ cursor:grab; touch-action:none; }
.nw-mapbox.is-panning svg{ cursor:grabbing; }
.nw-zoom{ position:absolute; top:10px; right:10px; z-index:5; display:flex; flex-direction:column; gap:5px; }
.nw-zoom button{
  width:32px; height:32px; border-radius:8px; cursor:pointer;
  background:rgba(8,17,28,.85); border:1px solid rgba(232,192,122,.45); color:#e8c07a;
  font:700 17px/1 'Segoe UI',system-ui,sans-serif; display:flex; align-items:center; justify-content:center;
  transition:.12s;
}
.nw-zoom button:hover{ background:rgba(232,192,122,.22); color:#fff; border-color:#e8c07a; }
.nw-zoom button:active{ transform:scale(.94); }

/* ── navire : l'onde est animée en JS (voir nwoe-map.js), pas ici ── */
.nw-hit{ pointer-events:all; cursor:pointer; }

/* ── infobulle au survol d'un navire ── */
.nw-tip{ position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:230px;
  background:rgba(8,17,28,.94); border:1px solid rgba(232,192,122,.45); border-radius:10px;
  padding:9px 11px; box-shadow:0 10px 30px rgba(0,0,0,.55); }
.nw-tip[hidden]{ display:none; }
.nw-tip-head{ display:flex; align-items:center; gap:8px; }
.nw-tip-head img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated;
  border-radius:4px; background:rgba(255,255,255,.06); flex:0 0 auto; }
.nw-tip-name{ font-size:14px; font-weight:700; color:#e6eef7; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nw-tip-sub{ display:flex; align-items:center; gap:7px; margin-top:6px; flex-wrap:wrap; }
.nw-tip-badge{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:color-mix(in srgb, var(--c) 14%, transparent); border-radius:20px; padding:2px 8px; }
.nw-tip-pos{ font-size:12px; font-weight:700; color:#e8c07a; font-variant-numeric:tabular-nums; }
.nw-tip-line{ margin-top:5px; font-size:12px; color:#a9bccf; }

/* ── interrupteur "emblèmes sur la carte" ── */
.nw-switch{ display:flex; align-items:center; gap:9px; cursor:pointer; margin-bottom:12px;
  font-size:12.5px; color:#a9bccf; user-select:none; }
.nw-switch input{ position:absolute; opacity:0; width:0; height:0; }
.nw-switch-track{ position:relative; width:34px; height:18px; border-radius:20px; flex:0 0 auto;
  background:rgba(255,255,255,.12); border:1px solid rgba(232,192,122,.3); transition:.18s; }
.nw-switch-track::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px;
  border-radius:50%; background:#8fa3ba; transition:.18s; }
.nw-switch input:checked + .nw-switch-track{ background:rgba(232,192,122,.35); border-color:#e8c07a; }
.nw-switch input:checked + .nw-switch-track::after{ transform:translateX(16px); background:#e8c07a; }
.nw-switch input:focus-visible + .nw-switch-track{ outline:2px solid #e8c07a; outline-offset:2px; }

/* ── logo de la flotte + emblème dans la liste ── */
.nw-fleet-logo{ display:block; width:132px; max-width:62%; height:auto; margin:2px auto 10px;
  opacity:.95; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.nw-fleet-emblem{ width:22px; height:22px; flex:0 0 auto; object-fit:contain;
  image-rendering:pixelated; border-radius:4px; background:rgba(255,255,255,.07); }
.nw-fleet-guild{ flex:1 1 auto; min-width:0; }