/* ===== UI commune ===== */
  * { box-sizing:border-box; }
  html,body { margin:0; }
  body {
    font-family:'VT323','Courier New',monospace; font-size:20px; color:#f0f0f0;
    background:#0c0c10;
    background-image:
      radial-gradient(900px 500px at 50% -5%, rgba(255,255,255,.07) 0%, transparent 55%),
      linear-gradient(180deg, #14141a 0%, #0c0c10 60%);
    overflow-x:hidden;
  }
  a { color:#bfc4ff; }
  ::selection { background:#7a5cd8; color:#fff; }
  /* curseur doigt GB sur tout ce qui se clique */
  a, button, .chip, .cell, .tchip, .tab, .drow, .atk, .it,
  .tr > header, .zbtn, .esp, .powerswitch, .power, #top, label {
    cursor:url('assets/cursor_sm.png') 15 2, pointer;
  }
  input[type=text], input[type=search], input:not([type]) { cursor:text; }
  body > *:not(.moon):not(.star):not(.horizon):not(.bglogo):not(.mon):not(.tyra):not(.mtn):not(.watcher):not(.fog):not(.flake):not(#watchers) { position:relative; z-index:1; }
  /* scrollbar stylée */
  * { scrollbar-width:thin; scrollbar-color:#4a3a70 #0b0a12; }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track { background:#0b0a12; }
  ::-webkit-scrollbar-thumb { background:#3a2f55; border-radius:6px;
    border:2px solid #0b0a12; }
  ::-webkit-scrollbar-thumb:hover { background:#7a5cd8; }
  /* nav croisée texte — sticky pour suivre le scroll des longues pages */
  .sitenav { display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
             align-items:center; margin-bottom:20px;
             position:sticky; top:0; z-index:40; padding:8px 10px;
             background:rgba(12,11,18,.86);
             backdrop-filter:blur(9px) saturate(1.2);
             -webkit-backdrop-filter:blur(9px) saturate(1.2);
             border-bottom:1px solid #3a2f55;
             box-shadow:0 4px 18px rgba(0,0,0,.35); }
  .sitenav a {
    color:#b8b8c8; text-decoration:none; font-size:18px; padding:4px 18px;
    border:1px solid #4a4a5c; border-radius:20px;
    background:rgba(255,255,255,.04); transition:all .12s;
    font-family:'VT323',monospace;
  }
  .sitenav a:hover { border-color:#7a80aa; color:#fff; transform:translateY(-2px); }
  .sitenav a.here { background:#c01830; color:#fff; border-color:#e03050; }
  /* menu "Explorer" (injecté par bg.js) — accès direct aux 14 pages */
  .sitenav .xplr { position:relative; }
  .sitenav .xplr > a { cursor:pointer; }
  .sitenav .xmenu { position:absolute; top:calc(100% + 8px); left:50%;
    transform:translateX(-50%); min-width:320px; padding:8px;
    display:none; grid-template-columns:1fr 1fr; gap:2px; z-index:50;
    background:rgba(18,15,32,.97); border:2px solid #4a4468;
    border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.65); }
  /* pont invisible au-dessus : le survol ne casse pas en traversant le gap */
  .sitenav .xmenu::before { content:""; position:absolute; top:-12px;
    left:-4px; right:-4px; height:12px; }
  .sitenav .xplr.open .xmenu { display:grid; }
  @media (hover:hover) and (pointer:fine) {
    .sitenav .xplr:hover .xmenu { display:grid; }
  }
  .sitenav .xmenu a { padding:6px 14px; border:none; border-radius:7px;
    background:none; color:#c8c8d8; font-size:19px; white-space:nowrap; }
  .sitenav .xmenu a:hover { background:#241d3e; color:#ffd76a; transform:none; }
  .sitenav .xmenu a.here { background:none; color:#ffd76a; }
  .sitenav .xmenu a.here::after { content:" ◄"; color:#8a8a96; font-size:14px; }
  /* focus clavier visible partout */
  a:focus-visible, button:focus-visible, input:focus-visible,
  .chip:focus-visible, .tab:focus-visible, summary:focus-visible {
    outline:2px solid #ffd76a; outline-offset:2px; border-radius:4px; }
  /* ===== finitions globales : profondeur + champs ===== */
  /* vignette douce sur toutes les pages */
  body::after { content:""; position:fixed; inset:0; z-index:3;
    pointer-events:none;
    box-shadow:inset 0 0 160px 30px rgba(0,0,0,.42); }
  /* champs texte/recherche : puits sombre + liseré violet au focus */
  input[type=text], input[type=search], input:not([type]), select,
  textarea {
    background:#0d0b18; color:#f0f0f0;
    border:2px solid #3a3650; border-radius:9px;
    padding:8px 12px; font-family:'VT323',monospace; font-size:19px;
    outline:none; transition:border-color .15s, box-shadow .15s;
  }
  input:focus, select:focus, textarea:focus {
    border-color:#7a5cd8;
    box-shadow:0 0 0 2px rgba(122,92,216,.25), 0 0 12px rgba(122,92,216,.2);
  }
  /* liens actifs de la nav : halo */
  .sitenav a.here { box-shadow:0 0 12px rgba(224,48,80,.35); }
  /* bas de page : filet pointillé pixel */
  footer.sitefoot { border-top:none; position:relative; }
  footer.sitefoot::before { content:""; display:block; height:5px;
    margin:0 auto 26px; max-width:440px;
    background-image:radial-gradient(circle at 2px 2px,
      #4a4468 1.7px, transparent 1.9px);
    background-size:11px 5px; opacity:.8; }
  /* boutons façon cartouche */
  .cta { margin-top:26px; display:flex; gap:14px; flex-wrap:wrap;
         justify-content:center; }
  .btn {
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    font-family:'VT323',monospace; font-size:21px; letter-spacing:1px;
    padding:10px 24px; border-radius:10px;
    border:1px solid #555a75; border-bottom:3px solid #171924;
    background:linear-gradient(180deg,#41455a,#2c2f40); color:#f0ead8;
    transition:transform .08s, filter .12s;
  }
  .btn:hover { filter:brightness(1.2); }
  .btn:active { transform:translateY(2px); border-bottom-width:1px; }
  .btn.dex { background:linear-gradient(180deg,#e84840,#a81f18);
             border-color:#5e0d0d; }
  .btn.discord { background:linear-gradient(180deg,#5a64e8,#424cb8);
                 border-color:#7a82ff; border-bottom-color:#232a70; }
  .btn.map { background:linear-gradient(180deg,#3a3f52,#252839); }
  .btn.data { background:linear-gradient(180deg,#7a4a20,#5a2f14);
              border-color:#a87448; border-bottom-color:#3a1f10; }
  /* chips */
  .chip {
    background:#2a2a32; border:2px solid #5a5a66; color:#c8c8d8;
    font-size:17px; padding:1px 12px; border-radius:16px;
    transition:all .1s; font-family:'VT323',monospace;
  }
  .chip:hover { border-color:#fff; background:#f0f0f0; color:#0c0c10;
                transform:translateY(-1px); }
  /* cartes / panneaux */
  .card {
    background:#131120; border:2px solid #4a4468;
    border-radius:12px; padding:18px 22px;
    box-shadow:0 6px 18px rgba(0,0,0,.6);
    transition:transform .15s, border-color .15s;
  }
  .card:hover { transform:translateY(-3px); border-color:#7a80aa; }
  /* pied de page */
  footer.sitefoot {
    position:relative; z-index:1; text-align:center; color:#6a6a76;
    font-size:17px; line-height:1.7; padding:50px 16px 120px;
  }
  footer.sitefoot b { color:#a8a8b8; font-weight:normal; }
  @media (max-width:640px) {
    .mon { transform:scale(.5); opacity:.45; }
    .tyra { opacity:.25; }
    .watcher { transform:scale(.6); transform-origin:bottom center; }
    .btn { font-size:18px; padding:10px 16px; }
  }
  @media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
  }

  /* ===== fond vivant (couches, du sol au ciel) ===== */
  .moon {         /* lune pixel en haut a gauche + halo */
    position:fixed; left:11vw; top:4vh; width:110px; height:110px; z-index:0;
    background:url('assets/moon.png') center/contain no-repeat;
    image-rendering:pixelated; pointer-events:none; opacity:.85;
    filter:drop-shadow(0 0 26px rgba(240,225,160,.4));
    animation:moonhov 9s ease-in-out infinite;
  }
  @keyframes moonhov {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-8px); }
  }
  .star {         /* etoiles scintillantes */
    position:fixed; width:4px; height:4px; background:#fff;
    image-rendering:pixelated; pointer-events:none; z-index:0;
    animation:tw 4s ease-in-out infinite;
  }
  @keyframes tw {
    0%,100% { opacity:.10; transform:scale(.6); }
    50%     { opacity:.8;  transform:scale(1); }
  }
  .horizon {      /* lueur d'aurore a l'horizon */
    position:fixed; left:0; right:0; bottom:0; height:36vh; z-index:0;
    background:linear-gradient(180deg, transparent 0%,
      rgba(120,80,160,.07) 55%, rgba(190,110,90,.09) 100%);
    pointer-events:none;
  }
  .bglogo {
    position:fixed; left:50%; top:44%; z-index:0;
    width:min(88vw, 980px); height:calc(min(88vw, 980px) * 216 / 480);
    transform:translate(-50%,-50%);
    background:url('assets/logo_prism_fr.png?v=5') center/contain no-repeat;
    image-rendering:pixelated; opacity:.06; pointer-events:none;
    filter:blur(1px);
    -webkit-mask-image:radial-gradient(ellipse 72% 62% at center,
                                       #000 25%, transparent 78%);
            mask-image:radial-gradient(ellipse 72% 62% at center,
                                       #000 25%, transparent 78%);
    animation:bgfloat 12s ease-in-out infinite;
  }
  @keyframes bgfloat {
    0%,100% { transform:translate(-50%,-50%) scale(1); }
    50%     { transform:translate(-50%,-52%) scale(1.02); }
  }
  .mon {          /* sprites de combat flottants */
    position:fixed; z-index:0; pointer-events:none;
    image-rendering:pixelated; opacity:.55;
    filter:drop-shadow(0 0 14px rgba(170,170,230,.3));
    background-repeat:no-repeat;
    background-size:contain; background-position:center;
    animation:monfloat 6.5s ease-in-out infinite;
  }
  @keyframes monfloat {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-10px); }
  }
  .tyra {         /* tyranitar en filigrane (un seul, a droite) */
    position:fixed; right:-3vw; bottom:60px; z-index:0;
    height:52vh; width:calc(52vh * 544 / 224);
    background:url('assets/tyranitar.png') no-repeat right bottom/contain;
    image-rendering:pixelated; opacity:.10; pointer-events:none;
    transform-origin:bottom center;
    animation:breathe 7s ease-in-out infinite;
  }
  @keyframes breathe {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.02) translateY(-5px); }
  }
  .mtn {          /* frise montagnes en bas de page */
    position:fixed; left:-40px; right:-40px; bottom:0; height:80px;
    background:url('assets/mountains_wide.png') repeat-x bottom center;
    background-size:auto 100%; opacity:.35; pointer-events:none; z-index:0;
    image-rendering:pixelated;
  }
  .watcher {      /* pokemon de dos qui contemplent le paysage */
    position:fixed; z-index:0; image-rendering:pixelated;
    pointer-events:none; opacity:.92;
    background-repeat:no-repeat; background-size:contain;
    filter:drop-shadow(0 0 10px rgba(0,0,0,.55));
  }
  .cry {          /* bulle de dialogue GB */
    position:absolute; bottom:100%; left:50%;
    transform:translate(-50%,-10px);
    background:#f8f8f0; color:#181828;
    border:2px solid #181828; border-radius:6px;
    outline:1px solid #f8f8f0; outline-offset:-4px;
    padding:5px 8px; font-family:'Press Start 2P',monospace;
    font-size:9px; letter-spacing:1px; white-space:nowrap;
    opacity:0; transition:opacity .18s, transform .18s;
  }
  .cry::after {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#181828;
  }
  .cry.on { opacity:1; transform:translate(-50%,-14px); }
  .fog {          /* nappes de brouillard derivantes */
    position:fixed; left:-15vw; width:130vw; height:64px;
    background:radial-gradient(55% 100% at 50% 50%, rgba(255,255,255,.05), transparent 72%);
    pointer-events:none; z-index:0;
    animation:fog 46s ease-in-out infinite alternate;
  }
  .fog.f1 { bottom:96px; }
  .fog.f2 { bottom:26px; animation-duration:62s; animation-direction:alternate-reverse; }
  @keyframes fog { from{transform:translateX(-4%)} to{transform:translateX(4%)} }
  .flake {        /* neige */
    position:fixed; top:-8px; background:#fff; opacity:.5;
    image-rendering:pixelated; pointer-events:none; z-index:0;
    animation:fall linear infinite;
  }
  @keyframes fall { to { transform:translateY(105vh) translateX(24px); } }