/* 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:20px;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg,#cc44ff,#6644ff,#44aaff);-webkit-background-clip:text;-webkit-text-fill-color: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:#9900ff}
  .hbtn{border-radius:5px;cursor:pointer;font-size:11px;padding:5px 11px;transition:all .15s;white-space:nowrap}
  #clear-all{background:linear-gradient(135deg,#440000,#220000);border:1px solid #770000;color:#ff6666;display:none}
  #clear-all:hover{background:#550000}
  #mute-btn{background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--badge-color)}
  #mute-btn:hover{border-color:#7700ff}
  #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:#9900ff}
  #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}

  #infobar{background:var(--bg2);border-bottom:1px solid var(--border);padding:6px 20px;font-size:10px;color:var(--text-dim);display:flex;gap:20px;flex-wrap:wrap}
  #infobar b{color:var(--infobar-b)}

  /* 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 #7700ff;
    border-radius:12px;
    padding:14px 16px;
    box-shadow:0 8px 32px #7700ff55, 0 2px 8px #00000088;
    pointer-events:none;
  }
  body.light .el-tooltip{
    background:linear-gradient(145deg,#faf8ff,#f0ecff);
    border-color:#9966cc;
    box-shadow:0 8px 32px #9966cc33;
  }
  .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:#ccbbee}
  .el-tt-name{font-size:14px;font-weight:800;color:#cc88ff;letter-spacing:.5px}
  body.light .el-tt-name{color:#5500aa}
  .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 #5500aa;color:#cc88ff}
  body.light .tt-race{background:#ede0ff;border-color:#9966cc;color:#5500aa}
  .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:#553366;font-weight:700;margin-bottom:6px}
  body.light .tt-weak-title{color:#886699}
  .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:#220044}
  /* Bar */
  .tt-bar-wrap{flex:1;height:8px;background:#1a0033;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 #ff660077);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:#cc44ff;border-bottom-color:#cc44ff}

  /* ── 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:#7700ff;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:#7700ff}
  .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:#cc44ff;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:#0d0020;color:#cc88ff;
    font-size:9px;padding:2px 6px;border-radius:3px;white-space:nowrap;
    border:1px solid #440077;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:#7700ff;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:#7700ff}

  /* ── 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 #cc44ff;
    padding:10px 20px;
    display:none;align-items:center;gap:14px;
    font-size:13px;
    box-shadow:0 4px 20px #cc44ff33;
  }
  #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:#cc44ff}
  #notif-close{background:transparent;border:none;color:#886699;cursor:pointer;font-size:16px;padding:0 4px}
  body.light #notif-banner{background:linear-gradient(90deg,#ede0ff,#e0d0ff);border-bottom-color:#7700ff}
  body.light #notif-text{color:#220044}
  body.light #notif-boss{color:#5500aa}

  /* 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:#7700ff !important}
  .card.tracked{border-color:#440088 !important;box-shadow:0 0 12px #44008844}
  .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:#7700ff}
  .kill-pos .kp-dot{width:6px;height:6px;border-radius:50%;background:#7700ff;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:#ff6600;text-shadow:0 0 8px #ff660066}
  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,#440088,#220044);border:1px solid #7700ff;color:#cc88ff;padding:3px 8px;border-radius:5px;cursor:pointer;font-size:11px;transition:.15s}
  body.light .btn-edit{background:linear-gradient(135deg,#ede0ff,#e0ccff);border-color:#9955dd;color:#5500aa}
  .btn-edit:hover{background:linear-gradient(135deg,#5500aa,#330055)}
  .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 #7700ff44;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:#aa66ff;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:#9900ff}
  .modal-btns{display:flex;gap:8px;margin-top:4px}
  #modal-apply{flex:1;background:linear-gradient(135deg,#440088,#220044);border:1px solid #7700ff;color:#cc88ff;padding:9px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600}
  #modal-apply:hover{background:linear-gradient(135deg,#5500aa,#330055)}
  #modal-cancel{flex:1;background:linear-gradient(135deg,#440000,#220000);border:1px solid #770000;color:#ff6666;padding:9px;border-radius:6px;cursor:pointer;font-size:13px}
  body.light #modal-cancel{background:linear-gradient(135deg,#ffeeee,#ffd0d0);border-color:#cc4444;color:#880000}
  #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:#7700ff;color:var(--badge-color)}
  .map-tab.active{background:var(--fbtn-active-bg);border-color:#7700ff;color:#cc88ff}

  /* 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:#9900ff}
  /* 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:#9900ff}
  #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 #7700ff;
    border-radius:10px;padding:10px;box-shadow:0 4px 24px #7700ff44;
    display:none;flex-direction:column;gap:6px;
  }
  #hover-map.visible{display:flex}
  #hover-map-title{font-size:11px;font-weight:700;color:#aa66ff;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:#ff6600;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,#440088,#220044);
    border:1px solid #7700ff;color:#cc88ff;
    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 #7700ff44;
    transition:transform .2s,box-shadow .2s;
  }
  #contact-fab:hover{transform:scale(1.1);box-shadow:0 6px 24px #7700ff66}
  body.light #contact-fab{background:linear-gradient(135deg,#ede0ff,#e0ccff);border-color:#9955dd;color:#5500aa}

  /* ── 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 #7700ff;
    border-radius:14px;padding:26px 28px;
    width:min(480px,95vw);
    box-shadow:0 0 40px #7700ff44;
    max-height:90vh;overflow-y:auto;
  }
  .contact-title{font-size:17px;font-weight:700;color:#cc88ff;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,#440077);
    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:#7700ff}
  .contact-select{
    background:var(--modal-input-bg);border:1px solid var(--input-border,#440077);
    color:var(--search-color);padding:8px 12px;border-radius:6px;
    outline:none;font-size:12px;font-family:inherit;cursor:pointer;
  }
  .contact-select option{background:#0d0020}
  body.light .contact-select option{background:#fff}
  .contact-textarea{
    background:var(--modal-input-bg);border:1px solid var(--input-border,#440077);
    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:#7700ff}
  .contact-footer{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
  .contact-submit{
    background:linear-gradient(135deg,#440088,#220044);
    border:1px solid #7700ff;color:#cc88ff;
    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,#5500aa,#330055)}
  .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:#000008;
    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 #1a0033;
    border-top-color:#7700ff;border-radius:50%;
    animation:spin .7s linear infinite;
  }
  .loader-text{font-size:11px;color:#553366;letter-spacing:1px;text-transform:uppercase}
  #login-screen{
    position:fixed;inset:0;background:radial-gradient(ellipse at top,#0a0015,#000008);
    display:none;align-items:center;justify-content:center;z-index:2000;
  }
  #login-box{
    background:linear-gradient(145deg,#0d0030,#060015);
    border:1px solid #7700ff;border-radius:18px;padding:36px 40px;
    width:min(440px,95vw);box-shadow:0 0 60px #7700ff44;
    animation:fadeIn .4s ease;
  }
  #login-logo{text-align:center;font-size:52px;margin-bottom:12px}
  #login-title{text-align:center;font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
    background:linear-gradient(90deg,#cc44ff,#6644ff,#44aaff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
  #login-subtitle{text-align:center;font-size:11px;color:#553366;letter-spacing:1px;margin-bottom:28px}
  .login-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
  .login-label{font-size:10px;color:#553366;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .login-input{background:#0d0020;border:1px solid #440077;color:#cc88ff;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:#9900ff;box-shadow:0 0 8px #7700ff33}
  .login-select{background:#0d0020;border:1px solid #440077;color:#cc88ff;padding:9px 14px;border-radius:7px;outline:none;font-size:13px;font-family:'Segoe UI',sans-serif;cursor:pointer}
  .login-select option{background:#0d0020}
  .login-divider{border:none;border-top:1px solid #1a0033;margin:18px 0}
  .login-mode-tabs{display:flex;gap:6px;margin-bottom:14px}
  .login-mode-btn{flex:1;background:transparent;border:1px solid #222;color:#666;padding:7px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:.15s}
  .login-mode-btn.active{background:#330055;border-color:#7700ff;color:#cc88ff}
  #login-code-wrap{display:none}
  #login-generated-code{
    background:#0a0015;border:1px solid #7700ff;border-radius:7px;
    padding:10px 14px;font-family:'Courier New',monospace;font-size:12px;
    color:#ff6600;letter-spacing:1px;word-break:break-all;text-align:center;
    cursor:pointer;transition:background .15s;margin-top:4px;
  }
  #login-generated-code:hover{background:#110025}
  #login-copy-hint{font-size:9px;color:#553366;text-align:center;margin-top:4px}
  #login-btn{
    width:100%;background:linear-gradient(135deg,#440088,#220044);
    border:1px solid #7700ff;color:#cc88ff;padding:12px;border-radius:8px;
    cursor:pointer;font-size:14px;font-weight:700;margin-top:8px;
    transition:.15s;letter-spacing:.5px;
  }
  #login-btn:hover{background:linear-gradient(135deg,#5500aa,#330055);box-shadow:0 0 16px #7700ff44}
  #login-error{font-size:11px;color:#ff6666;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 #1a0033;
    padding:4px 20px;font-size:11px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .guild-tag{color:var(--text3)}
  .guild-val{color:#ff6600;font-weight:700;font-family:'Courier New',monospace}
  #guild-copy-btn{
    background:transparent;border:1px solid #440077;color:#aa66ff;
    padding:2px 8px;border-radius:4px;cursor:pointer;font-size:10px;
  }
  #guild-copy-btn:hover{border-color:#7700ff}
  #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; }