/* Styles partagés RO / Zero. La palette est dans theme-<version>.css. */
  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#000008;--bg2:#080015;--border:#1a0033;--border2:#330066;
    --text:#ccbbee;--text2:#886699;--text3:#553366;--text-dim:#3a2a4a;
    --card-footer-border:#110022;--infobar-b:#553366;
    --header-bg:linear-gradient(180deg,#0d0030,#05000f);
    --modal-bg:linear-gradient(145deg,#0d0030,#060015);
    --modal-input-bg:#0d0020;--modal-border:#7700ff;
    --hint-color:#222;--scrollbar:#330055;
    --search-bg:#0d0020;--search-border:#440077;--search-color:#cc88ff;
    --badge-bg:#1a0033;--badge-border:#440077;--badge-color:#aa66ff;
    --fbtn-border:#222;--fbtn-color:#666;
    --fbtn-active-bg:#330055;--fbtn-active-border:#7700ff;--fbtn-active-color:#cc88ff;
    --name-color:#eee;--loc-color:#555;--range-color:#444;--idle-color:#333;
    --toast-bg:linear-gradient(135deg,#0d0030,#05000f);--toast-sub:#555;
    --no-result:#333;
    --local-badge-bg:#003300;--local-badge-border:#006600;--local-badge-color:#00aa44;
    --spinner-border:#220044;--spinner-top:#7700ff;
    --map-bg:#05000f;--map-grid:#1a0033;--map-border:#440077;
    --map-label:#553366;--map-crosshair:#330055;
    --coords-bg:#0d0020;--coords-color:#cc88ff;
  }
  body.light{
    --bg:#f0f0f8;--bg2:#e8e8f4;--border:#ccbbee;--border2:#9988cc;
    --text:#220044;--text2:#664488;--text3:#886699;--text-dim:#9988aa;
    --card-footer-border:#ddccee;--infobar-b:#9977bb;
    --header-bg:linear-gradient(180deg,#f8f4ff,#ede8ff);
    --modal-bg:linear-gradient(145deg,#faf8ff,#f0ecff);
    --modal-input-bg:#f5f0ff;--modal-border:#7700ff;
    --hint-color:#aaa;--scrollbar:#9977cc;
    --search-bg:#fff;--search-border:#9977cc;--search-color:#330055;
    --badge-bg:#ede0ff;--badge-border:#9966cc;--badge-color:#5500aa;
    --fbtn-border:#ccbbee;--fbtn-color:#886699;
    --fbtn-active-bg:#ede0ff;--fbtn-active-border:#7700ff;--fbtn-active-color:#5500aa;
    --name-color:#110033;--loc-color:#664488;--range-color:#886699;--idle-color:#aaa;
    --toast-bg:linear-gradient(135deg,#faf8ff,#f0ecff);--toast-sub:#886699;
    --no-result:#aaa;
    --local-badge-bg:#e0ffe0;--local-badge-border:#44aa44;--local-badge-color:#006600;
    --spinner-border:#ccaaee;--spinner-top:#7700ff;
    --map-bg:#f0ecff;--map-grid:#ccbbee;--map-border:#9966cc;
    --map-label:#9977bb;--map-crosshair:#ccbbee;
    --coords-bg:#f5f0ff;--coords-color:#330055;
  }
  body{background:var(--bg);color:var(--text);font-family:'Segoe UI',sans-serif;min-height:100vh;transition:background .3s,color .3s}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
  @keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(20px)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes markerPop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1)}}
  ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}

  /* HEADER */
  #header{background:var(--header-bg);border-bottom:1px solid var(--border2);padding:16px 20px 12px;position:sticky;top:0;z-index:100;transition:background .3s}
  #header-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
  #title{font-size:21px;font-weight:400;letter-spacing:.06em;color:var(--text);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;text-shadow:0 0 14px color-mix(in srgb, var(--wt-signal, var(--accent)) 45%, transparent)}
  #subtitle{font-size:10px;color:var(--text3);letter-spacing:1px;margin-top:2px}
  #controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #active-badge{background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:20px;padding:3px 12px;font-size:11px;color:var(--badge-color);white-space:nowrap}
  #search{background:var(--search-bg);border:1px solid var(--search-border);color:var(--search-color);padding:6px 12px;border-radius:6px;outline:none;font-size:12px;width:180px}
  #search:focus{border-color:var(--accent)}
  .hbtn{border-radius:5px;cursor:pointer;font-size:11px;padding:5px 11px;transition:all .15s;white-space:nowrap}
  #mute-btn{background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--badge-color)}
  #mute-btn:hover{border-color:var(--accent)}
  #mute-btn.muted{border-color:var(--fbtn-border);color:var(--fbtn-color);background:var(--bg)}
  #sprite-btn{background:linear-gradient(135deg,#001a33,#000d1a);border:1px solid #004488;color:#44aaff}
  body.light #sprite-btn{background:linear-gradient(135deg,#e0eeff,#cce0ff);border-color:#5599cc;color:#003366}
  #sprite-btn.active{border-color:#0088ff;box-shadow:0 0 8px #0066ff44}
  #theme-btn{background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--badge-color)}
  #theme-btn:hover{border-color:var(--accent)}
  #filters{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
  .fbtn{background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);padding:4px 14px;border-radius:20px;cursor:pointer;font-size:11px;transition:.15s}
  .fbtn.active{background:var(--fbtn-active-bg);border-color:var(--fbtn-active-border);color:var(--fbtn-active-color)}
  #sprite-note{font-size:10px;color:var(--text3);font-style:italic}


  /* GRID */
  #grid{max-width:1280px;margin:0 auto;padding:18px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min,215px),1fr));gap:var(--card-gap,12px)}
  #no-results{grid-column:1/-1;text-align:center;color:var(--no-result);padding:60px 0;font-size:15px}

  /* ── ZOOM LEVELS ── */
  :root{
    --card-min:215px;--card-gap:12px;
    --card-pad:13px;
    --avatar-sz:62px;
    --name-fs:13px;--loc-fs:10px;--range-fs:10px;
    --timer-fs:12px;--elapsed-fs:9px;--idle-fs:10px;
    --el-fs:10px;--hint-fs:9px;--killpos-fs:9px;
  }
  body.zoom-large{
    --card-min:280px;--card-gap:16px;
    --card-pad:18px;
    --avatar-sz:84px;
    --name-fs:17px;--loc-fs:13px;--range-fs:13px;
    --timer-fs:16px;--elapsed-fs:12px;--idle-fs:13px;
    --el-fs:12px;--hint-fs:11px;--killpos-fs:11px;--meta-fs:11px;
  }
  body.zoom-xlarge{
    --card-min:360px;--card-gap:20px;
    --card-pad:22px;
    --avatar-sz:108px;
    --name-fs:22px;--loc-fs:16px;--range-fs:16px;
    --timer-fs:20px;--elapsed-fs:15px;--idle-fs:16px;
    --el-fs:14px;--hint-fs:13px;--killpos-fs:13px;--meta-fs:13px;
  }


  /* ── EL-TAG TOOLTIP ── */
  /* el-tag is now a positioned container */
  .el-tag-wrap{position:relative;flex-shrink:0;display:inline-flex}
  .el-tag{font-size:var(--el-fs);padding:3px 8px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#ccc;cursor:default;user-select:none}
  body.light .el-tag{color:#fff}
  /* Tooltip panel */
  .el-tooltip{
    display:none;
    position:fixed;z-index:600;
    min-width:200px;
    background:linear-gradient(145deg,#0a0020,#04000e);
    border:1px solid var(--accent);
    border-radius:12px;
    padding:14px 16px;
    box-shadow:0 8px 32px var(--accent)55, 0 2px 8px #00000088;
    pointer-events:none;
  }
  body.light .el-tooltip{
    background:linear-gradient(145deg,var(--bg2),var(--bg2));
    border-color:var(--border2);
    box-shadow:0 8px 32px var(--border2)33;
  }
  .el-tooltip.visible{display:block;animation:tooltipPop .15s ease}
  @keyframes tooltipPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
  .el-tt-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #2a0044}
  body.light .el-tt-header{border-bottom-color:var(--border)}
  .el-tt-name{font-size:14px;font-weight:800;color:var(--badge-color);letter-spacing:.5px}
  body.light .el-tt-name{color:var(--badge-color)}
  .el-tt-el{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;color:#fff}
  /* Meta pills inside tooltip */
  .tt-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .tt-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;white-space:nowrap}
  .tt-race{background:#1a0030;border:1px solid var(--badge-color);color:var(--badge-color)}
  body.light .tt-race{background:var(--badge-bg);border-color:var(--border2);color:var(--badge-color)}
  .tt-size{background:#001a1a;border:1px solid #006655;color:#44ddbb}
  body.light .tt-size{background:#e0fff8;border-color:#44aa88;color:#005544}
  .tt-lvl{background:#1a1000;border:1px solid #885500;color:#ffbb55}
  body.light .tt-lvl{background:#fff5e0;border-color:#cc8800;color:#664400}
  /* Weakness section */
  .tt-weak-title{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:700;margin-bottom:6px}
  body.light .tt-weak-title{color:var(--text3)}
  .tt-weak-list{display:flex;flex-direction:column;gap:5px}
  .tt-weak-row{display:flex;align-items:center;gap:8px}
  .tt-weak-el{font-size:12px;font-weight:700;min-width:80px;color:#eee}
  body.light .tt-weak-el{color:var(--badge-bg)}
  /* Bar */
  .tt-bar-wrap{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
  body.light .tt-bar-wrap{background:#e0d0f0}
  .tt-bar{height:100%;border-radius:4px;transition:width .3s ease}
  .tt-bar-200{background:linear-gradient(90deg,#cc0000,#ff4444)}
  .tt-bar-175{background:linear-gradient(90deg,#cc5500,#ff8833)}
  .tt-bar-150{background:linear-gradient(90deg,#886600,#ffcc00)}
  .tt-bar-125{background:linear-gradient(90deg,#336633,#66cc44)}
  .tt-bar-100{background:linear-gradient(90deg,#333388,#6666cc)}
  .tt-pct{font-size:11px;font-weight:800;min-width:38px;text-align:right}
  .tt-pct-200{color:#ff4444}
  .tt-pct-175{color:#ff8833}
  .tt-pct-150{color:#ffcc00}
  .tt-pct-125{color:#66cc44}
  .tt-pct-100{color:#6666cc}
  /* SPRITE clickable */
  .sprite-link{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px;transition:filter .15s,transform .15s}
  .sprite-link:hover{filter:brightness(1.2) drop-shadow(0 0 6px var(--accent)77);transform:scale(1.08)}
  .sprite-link:hover::after{content:'🔗';position:absolute;font-size:10px;bottom:-2px;right:-2px}
  .sprite-link{position:relative}


  /* ── PAGE TABS ── */
  #page-tabs{
    display:flex;gap:0;background:var(--bg2);
    border-bottom:1px solid var(--border2);padding:0 20px;
    position:sticky;top:58px;z-index:90;
  }
  .ptab{
    padding:9px 20px;cursor:pointer;font-size:11px;font-weight:700;
    color:var(--text3);border-bottom:2px solid transparent;
    margin-bottom:-1px;transition:.15s;letter-spacing:.5px;text-transform:uppercase;
    white-space:nowrap;
  }
  .ptab:hover{color:var(--text2)}
  .ptab.active{color:var(--accent);border-bottom-color:var(--accent)}

  /* ── SORT BAR ── */
  #sort-bar{
    display:flex;align-items:center;gap:8px;
    padding:8px 20px;background:var(--bg2);
    border-bottom:1px solid var(--border);font-size:11px;flex-wrap:wrap;
  }
  #sort-bar span{color:var(--text3)}
  .sort-btn{
    background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);
    padding:3px 11px;border-radius:12px;cursor:pointer;font-size:11px;transition:.15s;
  }
  .sort-btn.active{background:var(--fbtn-active-bg);border-color:var(--fbtn-active-border);color:var(--fbtn-active-color)}
  #view-toggle{
    margin-left:auto;background:transparent;border:1px solid var(--fbtn-border);
    color:var(--fbtn-color);padding:3px 11px;border-radius:12px;cursor:pointer;font-size:12px;
  }
  #view-toggle:hover{border-color:var(--accent);color:var(--badge-color)}

  /* ── LIST VIEW ── */
  #grid.list-view{
    display:flex;flex-direction:column;gap:6px;
    grid-template-columns:unset;
  }
  #grid.list-view .card{
    display:grid;
    grid-template-columns:var(--avatar-sz) 1fr 1fr auto;
    gap:0 14px;
    align-items:center;
    padding:8px 14px;
    animation:none;
  }
  #grid.list-view .card-top{margin-bottom:0;min-height:unset;align-items:center}
  #grid.list-view .el-tag-wrap{display:none}
  #grid.list-view .loc{font-size:10px;margin-bottom:0}
  #grid.list-view .respawn-range{font-size:10px;color:var(--range-color)}
  #grid.list-view .kill-pos{margin-bottom:0}
  #grid.list-view .divider{border-top:none;padding-top:0}
  #grid.list-view .card-bottom{justify-content:flex-end;gap:8px}
  #grid.list-view .hint{display:none}
  #grid.list-view .name{font-size:13px;margin-bottom:2px}

  /* ── HISTORY TAB ── */
  #page-history{display:none}
  .hist-boss-section{margin-bottom:18px;animation:fadeIn .3s ease}
  .hist-boss-header{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;border-radius:8px 8px 0 0;
    background:var(--badge-bg);border:1px solid var(--badge-border);
    border-bottom:none;cursor:pointer;
  }
  .hist-boss-header:hover{border-color:var(--accent)}
  .hist-boss-name{font-weight:700;font-size:13px;color:var(--name-color)}
  .hist-kills-count{font-size:10px;color:var(--badge-color);margin-left:auto}
  .hist-avg{font-size:10px;color:var(--text3);font-style:italic}
  .hist-table{width:100%;border-collapse:collapse;font-size:11px}
  .hist-table th{
    background:var(--bg2);color:var(--text3);padding:5px 10px;
    text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
    border-bottom:1px solid var(--border);
  }
  .hist-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text2)}
  .hist-table tr:last-child td{border-bottom:none}
  .hist-table tr:hover td{background:rgba(119,0,255,.04)}
  .hist-wrap{border:1px solid var(--badge-border);border-radius:0 0 8px 8px;overflow:hidden}
  .hist-empty{text-align:center;color:var(--text3);padding:40px 0;font-size:13px}
  #hist-search{
    background:var(--search-bg);border:1px solid var(--search-border);
    color:var(--search-color);padding:6px 12px;border-radius:6px;
    outline:none;font-size:12px;width:200px;
  }
  #hist-clear-all{
    background:linear-gradient(135deg,#440000,#220000);border:1px solid #770000;
    color:#ff6666;padding:5px 12px;border-radius:5px;cursor:pointer;font-size:11px;
  }

  /* ── STATS TAB ── */
  #page-stats{display:none}
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
  .stat-card{
    background:var(--badge-bg);border:1px solid var(--badge-border);
    border-radius:10px;padding:16px;text-align:center;
  }
  .stat-card .sv{font-size:28px;font-weight:800;color:var(--accent);margin-bottom:4px}
  .stat-card .sl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
  .top-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:20px}
  .top-table th{background:var(--bg2);color:var(--text3);padding:6px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
  .top-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text2)}
  .top-table tr:hover td{background:rgba(119,0,255,.04)}
  .stats-section-title{font-size:13px;font-weight:700;color:var(--text);margin:16px 0 10px}
  .heat-grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-bottom:8px}
  .heat-cell{
    aspect-ratio:1;border-radius:2px;
    background:var(--border);transition:background .2s;
    cursor:default;position:relative;
  }
  .heat-cell:hover::after{
    content:attr(data-tip);position:absolute;bottom:120%;left:50%;
    transform:translateX(-50%);background:var(--modal-input-bg);color:var(--badge-color);
    font-size:9px;padding:2px 6px;border-radius:3px;white-space:nowrap;
    border:1px solid var(--badge-border);pointer-events:none;z-index:10;
  }
  .heat-labels{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;font-size:8px;color:var(--text3);text-align:center;margin-bottom:16px}

  /* ── SOUND PANEL (inside Settings modal) ── */
  .sound-panel{
    background:var(--bg2);border:1px solid var(--border2);
    border-radius:10px;padding:16px;margin-top:12px;
  }
  .sound-panel h4{font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
  .sound-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .sound-label{font-size:11px;color:var(--text2);min-width:120px}
  input[type=range].vol-slider{
    -webkit-appearance:none;width:120px;height:4px;
    border-radius:2px;background:var(--border2);outline:none;cursor:pointer;
  }
  input[type=range].vol-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;
    border-radius:50%;background:var(--accent);cursor:pointer;
  }
  .sound-toggle{
    background:var(--badge-bg);border:1px solid var(--badge-border);
    color:var(--badge-color);padding:3px 10px;border-radius:4px;cursor:pointer;
    font-size:11px;transition:.15s;
  }
  .sound-toggle.off{border-color:var(--fbtn-border);color:var(--fbtn-color);background:transparent}
  .tts-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
  .tts-select{
    background:var(--search-bg);border:1px solid var(--search-border);
    color:var(--search-color);padding:4px 8px;border-radius:4px;
    font-size:11px;outline:none;max-width:200px;
  }
  .file-upload-btn{
    background:transparent;border:1px solid var(--badge-border);color:var(--badge-color);
    padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;
  }
  .file-upload-btn:hover{border-color:var(--accent)}

  /* ── IN-PAGE NOTIFICATION BANNER ── */
  #notif-banner{
    position:fixed;top:0;left:0;right:0;z-index:2000;
    background:linear-gradient(90deg,#2a0060,#1a0040);
    border-bottom:2px solid var(--accent);
    padding:10px 20px;
    display:none;align-items:center;gap:14px;
    font-size:13px;
    box-shadow:0 4px 20px var(--accent)33;
  }
  #notif-banner.visible{display:flex;animation:slideDown .3s ease}
  @keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
  #notif-icon{font-size:22px;flex-shrink:0}
  #notif-text{flex:1;color:#eee}
  #notif-boss{font-weight:800;color:var(--accent)}
  #notif-close{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:0 4px}
  body.light #notif-banner{background:linear-gradient(90deg,var(--badge-bg),#e0d0ff);border-bottom-color:var(--accent)}
  body.light #notif-text{color:var(--badge-bg)}
  body.light #notif-boss{color:var(--badge-color)}

  /* CARD */
  .card{border-radius:10px;padding:var(--card-pad);cursor:pointer;position:relative;border:1px solid var(--border);transition:transform .15s,border-color .15s,box-shadow .15s;animation:fadeIn .3s ease both}
  body.light .card{box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .card:hover{transform:translateY(-3px) scale(1.02);border-color:var(--accent) !important}
  .card.tracked{border-color:var(--badge-bg) !important;box-shadow:0 0 12px var(--badge-bg)44}
  .card.spawning{border-color:#ffaa00 !important;box-shadow:0 0 15px #ffaa0033}
  .card.spawned{border-color:#ff4444 !important;box-shadow:0 0 18px #ff000033}
  .card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px;min-height:44px}
  .avatar{font-size:var(--avatar-sz);line-height:1;filter:drop-shadow(0 0 4px rgba(0,0,0,.3));flex-shrink:0}
  .sprite-wrap{width:var(--avatar-sz);height:var(--avatar-sz);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:-4px 0 2px}
  .sprite-wrap img{max-width:var(--avatar-sz);max-height:var(--avatar-sz);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
  .sprite-err{font-size:26px;opacity:.7}
  .sprite-loading{width:22px;height:22px;border:2px solid var(--spinner-border);border-top-color:var(--spinner-top);border-radius:50%;animation:spin .8s linear infinite}
  .local-badge{position:absolute;top:8px;left:8px;background:var(--local-badge-bg);border:1px solid var(--local-badge-border);color:var(--local-badge-color);font-size:8px;padding:1px 5px;border-radius:3px;pointer-events:none;font-weight:600;letter-spacing:.5px}
  .el-tag{font-size:var(--el-fs);padding:2px 7px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#ccc;flex-shrink:0}
  body.light .el-tag{color:#fff}
  .name{font-weight:700;font-size:var(--name-fs);color:var(--name-color);line-height:1.2;margin-bottom:3px}
  .loc{font-size:var(--loc-fs);color:var(--loc-color);margin-bottom:5px}
  .respawn-range{font-size:var(--range-fs);color:var(--range-color);margin-bottom:5px}
  .kill-pos{display:inline-flex;align-items:center;gap:5px;background:var(--badge-bg);border:1px solid var(--map-border);border-radius:4px;padding:2px 7px;font-size:var(--killpos-fs);color:var(--badge-color);margin-bottom:6px;cursor:pointer;transition:border-color .15s;font-family:'Courier New',monospace}
  .kill-pos:hover{border-color:var(--accent)}
  .kill-pos .kp-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
  .divider{border-top:1px solid var(--card-footer-border);padding-top:7px}
  .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px}
  .timer-col{display:flex;flex-direction:column;gap:2px;min-width:0}
  .timer-text{font-family:'Courier New',monospace;font-size:var(--timer-fs);font-weight:bold}
  .timer-text.idle{color:var(--idle-color);font-family:'Segoe UI',sans-serif;font-size:var(--idle-fs)}
  .timer-text.counting{color:#00d4ff;text-shadow:0 0 6px #00d4ff44}
  body.light .timer-text.counting{color:#0077aa;text-shadow:none}
  .timer-text.urgent{color:var(--accent);text-shadow:0 0 8px var(--accent)66}
  body.light .timer-text.urgent{text-shadow:none}
  .timer-text.spawning{color:#ffaa00;animation:pulse 1s infinite}
  body.light .timer-text.spawning{color:#cc7700}
  .timer-text.spawned{color:#ff4444;animation:pulse 1s infinite}
  body.light .timer-text.spawned{color:#cc0000}
  .timer-elapsed{font-size:var(--elapsed-fs);font-family:'Courier New',monospace;color:#886600;white-space:nowrap}
  body.light .timer-elapsed{color:#996600}
  .timer-elapsed.over{color:#aa3300}
  body.light .timer-elapsed.over{color:#cc2200}
  .card-btns{display:flex;gap:4px;flex-shrink:0}
  .btn-edit{background:linear-gradient(135deg,var(--badge-bg),var(--badge-bg));border:1px solid var(--accent);color:var(--badge-color);padding:3px 8px;border-radius:5px;cursor:pointer;font-size:11px;transition:.15s}
  body.light .btn-edit{background:linear-gradient(135deg,var(--badge-bg),#e0ccff);border-color:#9955dd;color:var(--badge-color)}
  .btn-edit:hover{background:linear-gradient(135deg,var(--badge-color),var(--badge-bg))}
  .btn-clr{background:linear-gradient(135deg,#440000,#220000);border:1px solid #770000;color:#ff6666;padding:3px 8px;border-radius:5px;cursor:pointer;font-size:11px}
  body.light .btn-clr{background:linear-gradient(135deg,#ffeeee,#ffd0d0);border-color:#cc4444;color:#880000}
  .hint{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:var(--hint-fs);color:var(--hint-color);pointer-events:none;white-space:nowrap}

  /* MODAL */
  #modal-overlay{position:fixed;inset:0;background:#00000099;display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
  #modal-overlay.open{display:flex}
  #modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:14px;padding:24px 28px;width:min(720px,95vw);max-height:90vh;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.55);animation:fadeIn .2s ease}
  #modal-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  #modal-avatar{font-size:28px;flex-shrink:0;min-width:36px;text-align:center}
  #modal-avatar img{max-height:60px;max-width:90px;image-rendering:pixelated;filter:drop-shadow(0 2px 10px #000)}
  #modal-title-block{flex:1}
  #modal-name{color:var(--text);font-size:17px;font-weight:700;margin-bottom:2px}
  #modal-sub{color:var(--text3);font-size:10px}
  #modal-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:540px){#modal-body{grid-template-columns:1fr}}
  #modal-left{display:flex;flex-direction:column;gap:10px}
  #modal-right{display:flex;flex-direction:column;gap:8px}
  #modal label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px}
  #modal-dt{width:100%;background:var(--modal-input-bg);border:1px solid var(--search-border);color:var(--search-color);padding:8px 10px;border-radius:6px;outline:none;font-size:12px}
  #modal-dt:focus{border-color:var(--accent)}
  .modal-btns{display:flex;gap:8px;margin-top:4px}
  #modal-apply{flex:1;background:var(--fbtn-active-bg);border:1px solid var(--fbtn-active-border);color:var(--fbtn-active-color);padding:9px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600}
  #modal-apply:hover{filter:brightness(1.12)}
  #modal-cancel{flex:1;background:transparent;border:1px solid var(--border2);color:var(--text2);padding:9px;border-radius:6px;cursor:pointer;font-size:13px}
  #modal-clr{width:100%;margin-top:6px;background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);padding:7px;border-radius:6px;cursor:pointer;font-size:11px}
  #modal-clr:hover{color:var(--text2);border-color:var(--text3)}

  /* MAP SELECTOR (multi-map) */
  #map-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
  .map-tab{background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:10px;font-family:'Courier New',monospace;transition:.15s;white-space:nowrap}
  .map-tab:hover{border-color:var(--accent);color:var(--text)}
  .map-tab.active{background:var(--fbtn-active-bg);border-color:var(--fbtn-active-border);color:var(--fbtn-active-color);font-weight:700}

  /* MAP CANVAS PORTRAIT */
  #map-section{display:flex;flex-direction:column;gap:6px}
  #map-hint{font-size:9px;color:var(--text3);font-style:italic}
  #map-canvas-wrap{
    width:100%;height:240px;position:relative;overflow:hidden;
    border:1px solid var(--map-border);border-radius:8px;
    transition:border-color .3s;background:var(--map-bg);
  }
  #map-canvas-wrap:hover{border-color:var(--accent)}
  /* bg img hidden - image is now inside the SVG */
  #map-bg-img{display:none}
  body.light #map-bg-img{display:none}
  #map-bg-loading{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:var(--map-bg);font-size:9px;color:var(--text3);z-index:0;
  }
  #map-bg-local{
    position:absolute;top:4px;left:4px;z-index:2;
    background:var(--local-badge-bg);border:1px solid var(--local-badge-border);
    color:var(--local-badge-color);font-size:7px;padding:1px 4px;border-radius:2px;
    font-weight:600;letter-spacing:.5px;display:none;
  }
  /* SVG fills container, preserves aspect ratio of viewBox with letterbox */
  #map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;cursor:crosshair}

  /* Coords row */
  #coords-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
  #coords-x,#coords-y{width:56px;background:var(--coords-bg);border:1px solid var(--search-border);color:var(--coords-color);padding:5px 7px;border-radius:5px;outline:none;font-size:12px;font-family:'Courier New',monospace;text-align:center}
  #coords-x:focus,#coords-y:focus{border-color:var(--accent)}
  #coords-clear-btn{background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);padding:4px 8px;border-radius:5px;cursor:pointer;font-size:10px}
  #coords-clear-btn:hover{border-color:#770000;color:#ff6666}

  /* HOVER MINI-MAP */
  #hover-map{
    position:fixed;z-index:500;pointer-events:none;
    width:160px;background:var(--modal-bg);border:1px solid var(--accent);
    border-radius:10px;padding:10px;box-shadow:0 4px 24px color-mix(in srgb, var(--accent) 28%, transparent);
    display:none;flex-direction:column;gap:6px;
  }
  #hover-map.visible{display:flex}
  #hover-map-title{font-size:11px;font-weight:700;color:var(--badge-color);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hover-map-wrap{width:100%;height:120px;position:relative;border:1px solid var(--map-border);border-radius:6px;overflow:hidden;background:var(--map-bg)}
  #hm-bg-img{display:none}
  body.light #hm-bg-img{display:none}
  #hover-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  #hover-map-coords{font-size:11px;font-family:'Courier New',monospace;color:var(--accent);text-align:center;font-weight:700}
  #hover-map-mapname{font-size:9px;color:var(--text3);text-align:center;font-family:'Courier New',monospace}

  /* TOASTS */
  #toast-c{position:fixed;bottom:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
  .toast{background:var(--toast-bg);border-radius:8px;padding:10px 16px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:10px;min-width:220px;max-width:300px;animation:toastIn .3s ease;pointer-events:none}
  .toast.st{border:1px solid #ffaa00;box-shadow:0 0 12px #ffaa0033}
  .toast.sd{border:1px solid #ff4444;box-shadow:0 0 12px #ff000033}
  .t-icon{font-size:18px;flex-shrink:0}
  .t-icon img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
  .t-body{display:flex;flex-direction:column;gap:2px}
  .t-title{font-weight:700;font-size:12px}
  .t-sub{font-size:10px;color:var(--toast-sub)}


  /* ── FLOATING CONTACT BUTTON ── */
  #contact-fab{
    position:fixed;bottom:24px;right:24px;z-index:900;
    background:linear-gradient(135deg,var(--badge-bg),var(--badge-bg));
    border:1px solid var(--accent);color:var(--badge-color);
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:20px;
    box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
    transition:transform .2s,box-shadow .2s;
  }
  #contact-fab:hover{transform:scale(1.1);box-shadow:0 6px 24px color-mix(in srgb, var(--accent) 40%, transparent)}
  body.light #contact-fab{background:linear-gradient(135deg,var(--badge-bg),#e0ccff);border-color:#9955dd;color:var(--badge-color)}

  /* ── CONTACT MODAL ── */
  #contact-overlay{
    position:fixed;inset:0;background:#00000099;
    display:none;align-items:center;justify-content:center;
    z-index:1100;backdrop-filter:blur(4px);
  }
  #contact-overlay.open{display:flex;animation:fadeIn .2s ease}
  #contact-box{
    background:var(--modal-bg);border:1px solid var(--accent);
    border-radius:14px;padding:26px 28px;
    width:min(480px,95vw);
    box-shadow:0 0 40px rgba(0,0,0,.55);
    max-height:90vh;overflow-y:auto;
  }
  .contact-title{font-size:17px;font-weight:700;color:var(--badge-color);margin-bottom:4px}
  .contact-sub{font-size:10px;color:var(--text3);margin-bottom:18px}
  .contact-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  .contact-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .contact-input{
    background:var(--modal-input-bg);border:1px solid var(--input-border,var(--badge-border));
    color:var(--search-color);padding:8px 12px;border-radius:6px;
    outline:none;font-size:12px;font-family:inherit;
    transition:border-color .2s;
  }
  .contact-input:focus{border-color:var(--accent)}
  .contact-select{
    background:var(--modal-input-bg);border:1px solid var(--input-border,var(--badge-border));
    color:var(--search-color);padding:8px 12px;border-radius:6px;
    outline:none;font-size:12px;font-family:inherit;cursor:pointer;
  }
  .contact-select option{background:var(--modal-input-bg)}
  body.light .contact-select option{background:#fff}
  .contact-textarea{
    background:var(--modal-input-bg);border:1px solid var(--input-border,var(--badge-border));
    color:var(--search-color);padding:8px 12px;border-radius:6px;
    outline:none;font-size:12px;font-family:inherit;
    resize:vertical;min-height:100px;line-height:1.5;
    transition:border-color .2s;
  }
  .contact-textarea:focus{border-color:var(--accent)}
  .contact-footer{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
  .contact-submit{
    background:linear-gradient(135deg,var(--badge-bg),var(--badge-bg));
    border:1px solid var(--accent);color:var(--badge-color);
    padding:9px 20px;border-radius:6px;cursor:pointer;
    font-size:13px;font-weight:600;font-family:inherit;
    transition:.15s;
  }
  .contact-submit:hover{background:linear-gradient(135deg,var(--badge-color),var(--badge-bg))}
  .contact-submit:disabled{opacity:.5;cursor:not-allowed}
  .contact-cancel{
    background:transparent;border:1px solid var(--fbtn-border);
    color:var(--fbtn-color);padding:9px 16px;border-radius:6px;
    cursor:pointer;font-size:13px;font-family:inherit;
  }
  .contact-status{font-size:11px;margin-top:8px;min-height:16px;width:100%}
  .contact-status.ok{color:#44cc88}
  .contact-status.err{color:#ff6666}

  /* ── SESSION LOADING OVERLAY ── */
  #session-loader{
    position:fixed;inset:0;background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:1999;gap:16px;transition:opacity .3s ease;
  }
  #session-loader.hidden{opacity:0;pointer-events:none}
  .loader-spinner{
    width:36px;height:36px;border:3px solid var(--border);
    border-top-color:var(--accent);border-radius:50%;
    animation:spin .7s linear infinite;
  }
  .loader-text{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
  #login-screen{
    position:fixed;inset:0;background:var(--bg);
    display:none;align-items:center;justify-content:center;z-index:2000;
  }
  #login-box{
    background:var(--bg2);
    border:1px solid var(--border2);border-radius:12px;padding:36px 40px;
    width:min(440px,95vw);box-shadow:0 18px 48px rgba(0,0,0,.45);
    animation:fadeIn .4s ease;
  }
  #login-logo{text-align:center;font-size:44px;margin-bottom:8px;filter:grayscale(1) opacity(.8)}
  #login-title{text-align:center;font-size:24px;font-weight:400;letter-spacing:.06em;color:var(--text);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;margin-bottom:4px}
  #login-subtitle{text-align:center;font-size:11px;color:var(--text3);letter-spacing:1px;margin-bottom:28px}
  .login-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
  .login-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .login-input{background:var(--modal-input-bg);border:1px solid var(--border2);color:var(--text);padding:9px 14px;border-radius:7px;outline:none;font-size:13px;font-family:'Segoe UI',sans-serif;transition:border-color .2s}
  .login-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
  .login-select{background:var(--modal-input-bg);border:1px solid var(--border2);color:var(--text);padding:9px 14px;border-radius:7px;outline:none;font-size:13px;font-family:'Segoe UI',sans-serif;cursor:pointer}
  .login-select option{background:var(--modal-input-bg)}
  .login-divider{border:none;border-top:1px solid var(--border);margin:18px 0}
  .login-mode-tabs{display:flex;gap:6px;margin-bottom:14px}
  .login-mode-btn{flex:1;background:transparent;border:1px solid var(--fbtn-border);color:var(--fbtn-color);padding:7px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:.15s}
  .login-mode-btn.active{background:var(--fbtn-active-bg);border-color:var(--fbtn-active-border);color:var(--fbtn-active-color)}
  #login-code-wrap{display:none}
  #login-generated-code{
    background:var(--modal-input-bg);border:1px solid var(--badge-border);border-radius:7px;
    padding:10px 14px;font-family:'Courier New',monospace;font-size:12px;
    color:var(--accent);letter-spacing:1px;word-break:break-all;text-align:center;
    cursor:pointer;transition:background .15s;margin-top:4px;
  }
  #login-generated-code:hover{background:var(--badge-bg)}
  #login-copy-hint{font-size:9px;color:var(--text3);text-align:center;margin-top:4px}
  #login-btn{
    width:100%;background:var(--fbtn-active-bg);
    border:1px solid var(--fbtn-active-border);color:var(--fbtn-active-color);padding:12px;border-radius:8px;
    cursor:pointer;font-size:14px;font-weight:700;margin-top:8px;
    transition:.15s;letter-spacing:.5px;
  }
  #login-btn:hover{filter:brightness(1.12)}
  #login-error{font-size:11px;color:#ff8a72;text-align:center;margin-top:8px;min-height:16px}

  /* Online-only: guild tag in header */
  #guild-bar{
    background:linear-gradient(90deg,#0a0020,#050010);
    border-bottom:1px solid var(--border);
    padding:4px 20px;font-size:11px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .guild-tag{color:var(--text3)}
  .guild-val{color:var(--accent);font-weight:700;font-family:'Courier New',monospace}
  #guild-copy-btn{
    background:transparent;border:1px solid var(--badge-border);color:var(--badge-color);
    padding:2px 8px;border-radius:4px;cursor:pointer;font-size:10px;
  }
  #guild-copy-btn:hover{border-color:var(--accent)}
  #guild-leave-btn{
    margin-left:auto;background:transparent;border:1px solid #440000;
    color:#ff6666;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:10px;
  }
  #online-badge{
    display:inline-flex;align-items:center;gap:4px;
    background:#003300;border:1px solid #006600;color:#44cc88;
    padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;
  }
  .online-dot{width:6px;height:6px;border-radius:50%;background:#44cc88;animation:pulse 2s infinite}


  /* ── BUY ME A COFFEE ── */
  #kofi-footer{
    text-align:center;padding:18px 20px;margin-top:40px;
    border-top:1px solid var(--border);background:var(--bg2);
    font-size:11px;color:var(--text3);
  }
  #kofi-footer a{text-decoration:none}
  #kofi-footer img{height:32px;border-radius:6px;
    transition:opacity .2s,transform .2s;vertical-align:middle}
  #kofi-footer img:hover{opacity:.85;transform:scale(1.04)}
  #kofi-footer span{display:block;margin-top:6px;font-size:10px;color:var(--text3)}

/* ── Catalogue vide (Zero sans données en base) ──────────────────────── */
.catalog-empty {
  grid-column: 1 / -1;
  max-width: 52ch;
  margin: 12vh auto;
  text-align: center;
  color: var(--text2);
}
.catalog-empty h2 {
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}
.catalog-empty p { line-height: 1.6; margin: 0; }

/* ── Séparation PVE / PVP ─────────────────────────────────────────────
   Le libellé (PVE)/(PVP) dans le nom suffit à la recherche, mais pas à la
   lecture rapide d'une grille : la pastille colorée fait le travail à l'œil. */
.warp-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}
.warp-pve {
  background: rgba(120, 140, 160, .16);
  border: 1px solid rgba(120, 140, 160, .45);
  color: var(--text2);
}
.warp-pvp {
  background: rgba(210, 60, 60, .18);
  border: 1px solid rgba(210, 60, 60, .60);
  color: #ff7a7a;
}

/* Bande rouge franche sur le flanc des cartes PvP.
   Un liseré fin se perdait dans la grille ; à 6 px avec un dégradé qui mord
   sur le fond, la zone PvP se lit d'un coup d'œil sans avoir à chercher. */
.card:has(.warp-pvp) {
  border-left: 6px solid #d23c3c;
  box-shadow: inset 14px 0 22px -14px rgba(210, 60, 60, .85);
}
.card:has(.warp-pvp):hover {
  border-left-color: #ff5a5a;
  box-shadow: inset 14px 0 26px -12px rgba(255, 90, 90, .95);
}
/* La carte suivie ou spawned garde sa signalétique propre : la bande PvP
   ne doit pas masquer l'information de timer, qui reste prioritaire. */
.card.spawned:has(.warp-pvp),
.card.spawning:has(.warp-pvp) { border-left-width: 6px; }

/* Séparateur dans la barre de filtres */
#filters .fsep {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  vertical-align: middle;
  background: var(--fbtn-border, var(--border));
}
.fbtn-pvp.active {
  background: rgba(210, 60, 60, .18);
  border-color: rgba(210, 60, 60, .60);
  color: #ff7a7a;
}

/* ── Numéro de version ────────────────────────────────────────────────
   Lisible sans effort quand on le cherche, invisible quand on ne le
   cherche pas. z-index au-dessus de l'écran de connexion (2000) pour
   rester consultable avant même d'ouvrir une session. */
#app-version {
  position: fixed;
  bottom: 10px;
  left: 12px;
  /* Sous les overlays (z-index 1100) : un numéro de version flottant
     par-dessus une modale ferait désordre. */
  z-index: 900;
  font-size: 11px;
  font-style: italic;
  letter-spacing: .02em;
  /* --text2 plutôt que --text3 : lisible sans attirer l'œil, et suit le
     thème clair comme le thème sombre. */
  color: var(--text2);
  opacity: .7;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* ── Menu des réglages ────────────────────────────────────────────────
   Six boutons dans l'en-tête concurrençaient visuellement la recherche
   et le badge de suivi. Regroupés, ils redeviennent ce qu'ils sont :
   des réglages consultés rarement. */
.menu-wrap { position: relative; display: inline-block; }

.menu-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 5px;
  z-index: 1200;
  background: var(--modal-bg, var(--bg2));
  border: 1px solid var(--modal-border, var(--border2));
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.menu-pop.open { display: block; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--badge-bg, rgba(255, 255, 255, .07)); }
.menu-item.active { color: var(--accent, var(--gold)); }
.menu-sep {
  height: 1px;
  margin: 5px 7px;
  background: var(--border, #333);
}

@media (max-width: 640px) {
  .menu-pop { right: auto; left: 0; }
}

/* ═══ Lisibilité et thème — v2.3.0 ═══════════════════════════════════ */

/* Bouton Menu : .hbtn ne porte que la géométrie, les couleurs venaient de
   règles par id. #menu-btn n'en avait aucune et ignorait donc le thème. */
#menu-btn {
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-color);
}
#menu-btn:hover { border-color: var(--accent, var(--gold, var(--accent))); }
#menu-pop.open ~ #menu-btn,
#menu-btn[aria-expanded="true"] {
  border-color: var(--accent, var(--gold, var(--accent)));
  color: var(--text);
}

/* Les entrées du menu conservent les id historiques (#sprite-btn, #mute-btn,
   #theme-btn…), dont les règles par id l'emportent sur .menu-item. On les
   neutralise ici — c'est le seul endroit du fichier qui justifie !important. */
.menu-pop .menu-item,
.menu-pop .menu-item:hover,
.menu-pop .menu-item.active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.menu-pop .menu-item { color: var(--text) !important; }
.menu-pop .menu-item:hover {
  background: var(--badge-bg) !important;
  color: var(--text) !important;
}
.menu-pop .menu-item.active,
.menu-pop #sprite-btn.active { color: var(--badge-color) !important; }

/* Étiquettes d'élément : le fond vient de bg_color (souvent très sombre),
   #ccc n'y suffisait pas. Blanc + ombre portée pour tenir sur n'importe
   quelle teinte, plus un liseré qui détache l'étiquette de la carte. */
.el-tag {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
  border: 1px solid rgba(255, 255, 255, .22) !important;
}
body.light .el-tag {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  border: 1px solid rgba(0, 0, 0, .25) !important;
}

/* ── Fenêtre « How to use » ───────────────────────────────────────────
   Remplace la barre d'aide permanente : l'information reste disponible
   mais ne consomme plus de hauteur d'écran en permanence. */
#help-overlay {
  position: fixed; inset: 0;
  background: #00000099;
  display: none;
  align-items: center; justify-content: center;
  z-index: 1150;
  backdrop-filter: blur(4px);
  padding: 20px;
}
#help-overlay.open { display: flex; }

#help-box {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 14px;
  width: min(680px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, .55);
  animation: fadeIn .2s ease;
}

#help-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
#help-title { font-size: 17px; font-weight: 700; color: var(--accent, var(--gold, var(--badge-color))); }
#help-sub   { font-size: 10.5px; color: var(--text3); margin-top: 3px; }
#help-close {
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 18px; line-height: 1; padding: 2px 4px;
}
#help-close:hover { color: var(--text); }

#help-body {
  overflow-y: auto;
  padding: 4px 24px 22px;
  /* Le contenu dépasse l'écran sur mobile : le défilement reste dans la boîte. */
  overscroll-behavior: contain;
}

.help-sec { padding-top: 18px; }
.help-sec h3 {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--badge-color);
  margin-bottom: 7px;
}
.help-sec p {
  font-size: 12.5px; line-height: 1.62; color: var(--text2);
  margin-bottom: 8px;
}
.help-sec b { color: var(--text); font-weight: 600; }
.help-sec ul { margin: 0 0 8px; padding-left: 18px; }
.help-sec li {
  font-size: 12.5px; line-height: 1.6; color: var(--text2);
  margin-bottom: 5px;
}

.help-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.help-table td {
  font-size: 12.5px; line-height: 1.55; color: var(--text2);
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.help-table td:first-child { white-space: nowrap; padding-right: 16px; color: var(--text); }
.help-table tr:last-child td { border-bottom: none; }

@media (max-width: 560px) {
  #help-body { padding: 4px 16px 18px; }
  #help-head { padding: 16px 18px 12px; }
  .help-table td:first-child { white-space: normal; }
}

/* Compteur d'accès partageant le code de guilde. Aligné sur guild-tag,
   masqué automatiquement si la table n'est pas lisible. */
#guild-members {
  font-size: 11px;
  color: var(--text2);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  cursor: default;
}