/* Polices (Fredoka, Nunito, JetBrains Mono) : chargées par <link> dans le <head> des pages HTML. */
:root{
  --bg-deep:#120F0C;
  --bg-panel:#1C1611;
  --bg-card:#221B14;
  --line:rgba(255,255,255,.08);
  --line-bright:rgba(255,255,255,.18);
  --accent:#FFC94D;
  --accent-light:#FFE19A;
  --accent2:#E3350D;
  --cyan:#3FA9C9;
  --text-main:#FFF6E8;
  --text-dim:rgba(255,246,232,.55);
  --good:#4ADE80;
  --mid:#FFC94D;
  --low:#F0605C;
  --stone1:#1A1420;
  --stone2:#0A0A0D;
  --font-display:'Fredoka', 'Nunito', sans-serif;
  --font-body:'Nunito', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html{ height:100%; }
input[type="checkbox"], input[type="radio"], input[type="range"]{ accent-color:var(--accent); }
/* Icônes Phosphor (remplacent les émojis partout dans l'interface) : alignées sur le texte environnant,
   héritent sa couleur par défaut. */
[class^="ph-"], [class*=" ph-"]{ vertical-align:-0.125em; }
body{
  margin:0; min-height:100vh; color:var(--text-main);
  font-family:var(--font-body);
  background:
    radial-gradient(140% 100% at 50% 0%, #241A10 0%, #120F0C 50%, #0D0A08 100%),
    var(--bg-deep);
  background-size:100% 100%, 100% 100%;
  background-attachment:fixed;
  padding:0; display:flex; flex-direction:column; align-items:stretch;
}
/* ---- HEADER / LOGO ---- */
.site-header{
  width:100%; max-width:1600px; margin:0 auto 24px; padding:24px 24px 0; position:relative; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.site-logo{
  font-family:var(--font-display);
  font-size:clamp(18px, 3.4vw, 28px);
  letter-spacing:2px;
  color:var(--accent-light);
  display:inline-block; line-height:1.3;
}
.site-subtitle{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(8px, 1.2vw, 11px); color:var(--text-main); opacity:.5; letter-spacing:4px;
  display:block; text-transform:uppercase;
}
.site-header::after{ content:none; }
.header-actions{
  position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:2;
  display:flex; align-items:center; gap:8px;
}
.header-icon-btn{
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:8px;
  font-size:16px; line-height:1; width:40px; height:40px; cursor:pointer;
  color:var(--text-main); text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; transition:border-color .15s, color .15s;
}
.header-icon-btn:hover{ border-color:var(--accent); }
.discord-btn:hover{ border-color:#5865F2; color:#5865F2; }
/* ---- PANEL ---- */
.app{ width:100%; max-width:1600px; margin:0 auto; flex:1; display:flex; flex-direction:column; padding:0 24px 40px; box-sizing:border-box; }
.panel{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
  flex:1;
  width:100%;
  position:relative;
}
.panel::before{ content:none; }
.panel::after{ content:none; }
.hidden{display:none !important;}
.sub{ color:var(--text-dim); font-size:12px; text-align:center; margin-bottom:20px; letter-spacing:.3px; }
/* ---- BOUTONS ---- */
.btn{
  background:var(--accent);
  color:#1C1305; border:none; padding:14px 26px; border-radius:8px;
  font-weight:700; font-family:var(--font-body); cursor:pointer; letter-spacing:.2px; font-size:14px;
  transition:background-color .1s;
  text-transform:none;
}
.btn:hover:not(:disabled){ background:var(--accent-light); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.secondary{
  background:rgba(255,255,255,.05);
  color:var(--text-main); border:1px solid var(--line);
}
.btn.secondary:hover:not(:disabled){ border-color:var(--accent); background:rgba(255,255,255,.08); }
.btn.secondary.diff-active{
  border-color:var(--accent); background:rgba(255,201,77,.14);
  color:var(--accent-light); box-shadow:0 0 0 1px var(--accent);
}
.btn.danger{
  background:#D7453D;
  color:#fff;
}

.draft-progress{ display:flex; justify-content:center; gap:6px; margin-bottom:18px; }
.draft-progress span{ width:28px; height:8px; border-radius:4px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.draft-progress span.done{ background:var(--good); }
.draft-progress span.active{ background:var(--accent); }
.draft-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.draft-team-strip{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.draft-team-slot{
  width:70px; height:84px; border-radius:6px; border:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); font-size:10px; color:var(--text-dim); overflow:hidden;
}
.draft-team-slot.filled{ border-style:solid; border-color:var(--good); }
.draft-team-slot .emoji{ font-size:30px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.draft-team-slot .pname{ font-size:9px; margin-top:2px; text-align:center; padding:0 2px; }
.poke-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:22px 16px;
  text-align:center; cursor:pointer; transition:border-color .12s;
  position:relative;
}
.poke-card .pname{ font-size:18px; }
.poke-card .stat-line{ font-size:12px; }
.poke-card .evoline{ font-size:11px; }
.poke-card:hover{ border-color:var(--accent); }
.poke-card .emoji{ font-size:64px; width:104px; height:104px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.team-card .emoji{ font-size:48px; width:76px; height:76px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.dex-card .emoji{ font-size:50px; width:80px; height:80px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.poke-card .pname{ font-weight:bold; margin:6px 0 4px; font-size:14px;}
.poke-card .evoline{ font-size:10px; color:var(--text-dim); margin-bottom:4px; }
.types-row{ display:flex; justify-content:center; gap:4px; flex-wrap:wrap; margin-bottom:6px;}
.type-tag{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:6px;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.9px;
  color:#fff; border:none; line-height:1.4;
}
.type-icon{
  display:inline-flex; flex-shrink:0; vertical-align:middle;
  filter:
    drop-shadow(1px 0 0 rgba(0,0,0,.65))
    drop-shadow(-1px 0 0 rgba(0,0,0,.65))
    drop-shadow(0 1px 0 rgba(0,0,0,.65))
    drop-shadow(0 -1px 0 rgba(0,0,0,.65));
}
.type-icon svg{ width:100%; height:100%; display:block; fill:currentColor; }
/* Couleurs officielles Pokémon par type */
.t-normal  { background:#9199A1; color:#fff; }
.t-feu     { background:#EE8130; color:#fff; }
.t-eau     { background:#6390F0; color:#fff; }
.t-plante  { background:#7AC74C; color:#fff; }
.t-electrik{ background:#F7D02C; color:#1a1000; }
.t-vol     { background:#A98FF3; color:#fff; }
.t-poison  { background:#A33EA1; color:#fff; }
.t-sol     { background:#E2BF65; color:#1a1000; }
.t-insecte { background:#A6B91A; color:#fff; }
.t-combat  { background:#C22E28; color:#fff; }
.t-glace   { background:#96D9D6; color:#1a2030; }
.t-psy     { background:#F95587; color:#fff; }
.t-fantome { background:#735797; color:#fff; }
.t-roche   { background:#B6A136; color:#fff; }
.t-dragon  { background:#6F35FC; color:#fff; }
.t-acier   { background:#B7B7CE; color:#1a1000; }
.t-tenebres{ background:#5A5465; color:#fff; }
.t-fee     { background:#EE99AC; color:#1a1000; }
.stat-line{ font-size:10px; color:var(--text-dim); }
.sprite-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:bold; color:var(--text-dim); }

/* ---- SPLASH TEXT (bannière penchée) ---- */
.menu-splash{
  position:absolute; top:10px; right:16px;
  transform:rotate(4deg); transform-origin:right center;
  font-family:var(--font-body); font-weight:800;
  font-size:16px; letter-spacing:.2px; color:#0E0B04;
  background:var(--accent); border:2px solid rgba(22,19,10,.55); border-radius:6px;
  padding:9px 18px; white-space:nowrap; cursor:pointer; z-index:5;
  animation:splashBounce 1.6s ease-in-out infinite alternate;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
}
.menu-splash:hover{ background:var(--accent-light); }
@keyframes splashBounce{
  from{ transform:rotate(4deg) translateY(0); }
  to{ transform:rotate(4deg) translateY(-3px); }
}
@media (max-width:600px){
  .menu-splash{ font-size:13px; padding:7px 12px; max-width:calc(100% - 32px); white-space:normal; text-align:center; line-height:1.25; }
}

/* ---- MENU : mise en page façon maquette (colonne de texte + escalier en fond) ---- */
#screenMenu{ position:relative; min-height:560px; overflow-x:clip; overflow-y:visible; padding:20px 10px 40px; }
.menu-content{ position:relative; z-index:2; max-width:560px; text-align:left; }
/* Bannière-logo de l'accueil (assets/image/logo/Draft_mon_banner.webp, fond détouré) : elle sert de
   titre à l'écran d'accueil, centrée tout en haut à la place du titre texte de l'en-tête (masqué sur
   cet écran uniquement), posée sur un halo doré pour se fondre dans le fond. L'étiquette penchée
   (.menu-splash) s'accroche à son coin, comme un autocollant sur le logo. */
.app:has(#screenMenu:not(.hidden)) .site-logo,
.app:has(#screenMenu:not(.hidden)) .site-subtitle{ display:none; }
.app:has(#screenMenu:not(.hidden)) .site-header{ height:56px; margin-bottom:0; padding-top:0; }
.menu-hero{ position:relative; z-index:2; width:min(100%,560px); margin:-36px auto 30px; }
.menu-hero::before{
  content:''; position:absolute; inset:-22% -30%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,186,64,.22), rgba(255,186,64,.07) 55%, transparent 78%);
}
.menu-title{ margin:0; font-size:inherit; font-weight:inherit; }
.menu-banner{ display:block; width:100%; height:auto; margin:0; filter:drop-shadow(0 12px 28px rgba(0,0,0,.6)); }
.menu-hero .menu-splash{ top:-8px; right:-46px; }
@media (max-width:900px){
  .menu-hero{ margin-top:0; width:min(100%,460px); }
  .menu-hero .menu-splash{ top:-16px; right:-4px; }
}
.menu-headline{
  margin:0; font-family:var(--font-display); font-size:clamp(22px,3.4vw,34px);
  line-height:1.2; color:var(--text-main); font-weight:normal;
}
.menu-tagline{ margin:10px 0 0; font-size:14px; line-height:1.6; color:var(--text-dim); }
.menu-about{ max-width:420px; margin-top:18px; padding:16px 24px 10px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid var(--line); text-align:left; }
.menu-about h2{ margin:0 0 6px; font-size:13px; color:var(--accent-light); }
.menu-about p{ margin:0 0 8px; font-size:12px; line-height:1.7; color:var(--text-dim); }
@media (max-width:900px){ .menu-about{ margin-left:auto; margin-right:auto; } }
.menu-note{ max-width:420px; margin:14px 0 0; font-size:11px; line-height:1.6; color:var(--text-dim); text-align:left; }
.menu-note a{ color:var(--accent-light); }
@media (max-width:900px){ .menu-note{ margin-left:auto; margin-right:auto; } }
.menu-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:18px; }
.menu-links a{ font-size:11px; color:var(--text-dim); }
.menu-tokens-pill{
  display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:6px;
  background:rgba(255,255,255,.03); font-family:var(--font-mono); font-size:13px;
  color:var(--accent-light);
}
.menu-howto-card{
  padding:20px 24px; border-radius:8px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); max-width:420px;
}

/* ---- Pastilles de monnaie (argent/Bonbons d'Affinité) : mises en évidence partout où elles comptent
   (étage de la Tour, Campement, menu) pour bien lire que ce sont des ressources importantes, pas du
   texte informatif ordinaire. ---- */
.currency-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.currency-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:6px;
  font-family:var(--font-mono); font-size:13px; font-weight:800; border:1.5px solid;
  white-space:nowrap;
}
.currency-pill .cp-icon{ font-size:15px; }
.currency-pill.cp-money{ background:rgba(255,201,77,.14); border-color:rgba(255,201,77,.55); color:var(--accent-light); }
.currency-pill.cp-candy{ background:rgba(255,111,168,.14); border-color:rgba(255,111,168,.55); color:#FF9FC4; }
/* Escalier + dresseur : collé au bas/à droite de la fenêtre (SVG, les pieds du dresseur tombent
   exactement sur des marches). Les marches hautes s'estompent dans le noir. */
.menu-illustration{
  position:fixed; right:0; bottom:0; width:min(46vw,560px); aspect-ratio:400/300;
  pointer-events:none; z-index:1;
}
.menu-illustration svg{ display:block; width:100%; height:100%; overflow:visible; }
@media (max-width:900px){
  .menu-illustration{ width:min(82vw,440px,calc(62dvh * 4 / 3)); opacity:.45; z-index:0; }
  .menu-content{ max-width:100%; text-align:center; }
  .menu-content > div[style*="display:flex"]{ justify-content:center; }
  .menu-howto-card{ margin:0 auto; }
}

/* ---- PATCH NOTES MODAL ---- */
.patchnotes-overlay{
  position:fixed; inset:0; background:rgba(5,5,10,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.patchnotes-modal{
  background:var(--bg-panel); border:1px solid var(--line-bright); border-radius:8px;
  backdrop-filter:blur(6px);
  max-width:560px; width:100%; max-height:calc(100dvh - 40px); overflow-y:auto; padding:24px 26px; position:relative;
  box-sizing:border-box;
}
@media (max-width:480px), (max-height:520px){
  .patchnotes-overlay{ padding:10px; }
  .patchnotes-modal{ padding:18px 16px; max-height:calc(100dvh - 20px); }
}
.patchnotes-modal h2{
  font-family:var(--font-display); font-weight:normal; font-size:18px; color:var(--accent-light);
  margin:0 0 18px; text-align:center; letter-spacing:.5px;
}
.patchnotes-version{ margin-bottom:20px; }
.patchnotes-version-header{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
}
.patchnotes-version-header:hover .patchnotes-version-title{ color:var(--accent); }
.patchnotes-chevron{ font-size:12px; color:var(--text-dim); flex-shrink:0; width:14px; }
.patchnotes-version-title{
  font-family:var(--font-display); font-weight:normal; font-size:13px; color:var(--good);
  margin-bottom:10px; letter-spacing:.3px;
}
.patchnotes-version-content{ margin-top:8px; }
.patchnotes-category{ margin-bottom:16px; }
.patchnotes-category:last-child{ margin-bottom:0; }
.patchnotes-category-label{
  font-size:13px; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px;
}
.patchnotes-version ul{ margin:0; padding-left:20px; }
.patchnotes-version li{ font-size:14px; color:var(--text-main); line-height:1.7; }
.patchnotes-subversions{ margin-bottom:16px; }
.patchnotes-subversion{ margin-bottom:8px; }
.patchnotes-subversion:last-child{ margin-bottom:0; }
.patchnotes-subversion .patchnotes-version-title{
  font-size:12px; color:var(--accent-dim,var(--text-dim)); margin-bottom:0;
}
.patchnotes-subversion .patchnotes-version-content{ margin-top:6px; padding-left:20px; }
.patchnotes-close{
  position:absolute; top:6px; right:6px; background:none; border:none;
  color:var(--text-dim); font-size:22px; cursor:pointer; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.patchnotes-close:hover{ color:var(--accent); }

/* ---- TEAM BUILDER ---- */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.team-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px;
  padding:0; cursor:pointer; overflow:hidden; position:relative;
  transition:border-color .15s;
  display:flex; flex-direction:column;
}
.team-card:hover{ border-color:var(--line-bright); }
.team-card.configured{ border-color:var(--good); }
.team-card-header{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}
.team-card-sprite{ width:52px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:36px; }
/* Pokémon pas encore évolué (peut encore évoluer) : sprite agrandi pour se démarquer dans la grille d'équipe. */
.team-card-sprite-lg{ width:68px; height:68px; font-size:48px; }
.team-card-info{ flex:1; min-width:0; }
.team-card-info .pname{ font-weight:700; font-size:13px; margin:0 0 3px; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-card-footer{
  padding:6px 12px; display:flex; align-items:center; justify-content:space-between;
  font-size:10px; color:var(--text-dim);
}
.team-card .status-chip{
  font-size:9px; padding:2px 7px; border-radius:10px; font-weight:600; text-transform:uppercase;
  background:rgba(74,222,128,.15); color:var(--good); border:1px solid rgba(74,222,128,.4);
}
.team-card .status-chip.unconfigured{
  background:rgba(236,231,221,.08); color:var(--text-dim); border-color:var(--line);
}
.team-card .lead-badge{
  font-size:9px; padding:2px 6px; border-radius:5px; background:rgba(255,201,77,.15);
  color:var(--accent-light); border:1px solid rgba(255,201,77,.3); font-weight:700; letter-spacing:.5px;
}
.order-btns{ display:flex; gap:3px; }
.order-btn{
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:6px;
  color:var(--text-dim); font-size:10px; padding:2px 6px; cursor:pointer; line-height:1;
}
.order-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.order-btn:disabled{ opacity:.3; cursor:not-allowed; }

/* ---- EDITOR REDESIGN ---- */
.editor{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px;
  margin-top:10px; overflow:visible;
}
.editor-topbar{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--line); border-radius:8px 8px 0 0;
}
.editor-sprite{ width:136px; height:136px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:98px; }
.editor-ident{ flex:1; }
.editor-ident h3{ margin:0 0 5px; color:var(--accent-light); font-family:var(--font-display); font-size:13px; letter-spacing:.5px; }
.editor-body{ padding:14px 16px; }
.editor-section{ margin-bottom:14px; }
.editor-section-title{
  font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:2px;
  font-weight:800; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:4px;
}
.editor-row{ display:flex; gap:12px; flex-wrap:wrap; }
.editor-block{ flex:1; min-width:180px; }
.editor-block label{ font-size:10px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
select, input[type=number]{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-bright);
  color:var(--text-main);
  padding:7px 32px 7px 10px;
  font-family:inherit;
  font-size:12px;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ECE7DD' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  cursor:pointer;
  border-radius:6px;
  transition:border-color .15s;
}
select:hover{ border-color:var(--accent); }
select:focus, input[type=number]:focus{
  outline:none;
  border-color:var(--accent);
}
input[type=number]{
  background-image:none;
  padding:7px 8px;
  text-align:center;
}
select option{
  background:var(--bg-panel);
  color:var(--text-main);
  padding:6px;
}
.stat-bars{ display:flex; flex-direction:column; gap:5px; }
.stat-bar-row{ display:flex; align-items:center; gap:8px; font-size:10px; }
.stat-bar-label{ width:34px; color:var(--text-dim); flex-shrink:0; text-align:right; }
.stat-bar-val{ width:26px; color:var(--text-main); font-weight:700; text-align:right; flex-shrink:0; }
.stat-bar-track{ flex:1; height:6px; background:rgba(0,0,0,.35); border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.stat-bar-fill{ height:100%; border-radius:3px; }
.stat-bar-row.nature-plus .stat-bar-label,.stat-bar-row.nature-plus .stat-bar-val{ color:var(--good); }
.stat-bar-row.nature-minus .stat-bar-label,.stat-bar-row.nature-minus .stat-bar-val{ color:var(--low); }
.ev-grid, .iv-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.ev-row, .iv-row{ display:flex; align-items:center; gap:4px; font-size:10px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:6px; padding:4px 6px; }
.ev-row label, .iv-row label{ width:28px; color:var(--text-dim); flex-shrink:0; }
.ev-row input, .iv-row input{ padding:2px 4px; font-size:11px; border:none; background:transparent; color:var(--text-main); width:40px; }
.ev-total{ font-size:10px; color:var(--text-dim); margin-top:5px; text-align:right; }
.ev-total.over{ color:var(--low); }
.move-select-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.move-select-row .slot-label{
  padding:2px 7px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border-radius:5px; font-size:9px; font-weight:700;
  color:var(--accent-light); flex-shrink:0; letter-spacing:.5px; white-space:nowrap;
  border:1px solid var(--line-bright);
}
.move-select-row select{ font-size:11px; padding:4px 6px; }

/* ---- CUSTOM MOVE DROPDOWN ---- */
.csel{ position:relative; flex:1; user-select:none; }
.csel-trigger{
  display:flex; align-items:center; gap:7px; min-height:34px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-bright); border-radius:6px;
  padding:5px 10px; cursor:pointer; font-size:11px; color:var(--text-main);
  transition:border-color .15s;
}
.csel-trigger:hover{ border-color:var(--accent); }
.csel-trigger.open{ border-color:var(--accent); }
.csel-arrow{ margin-left:auto; color:var(--text-dim); font-size:9px; flex-shrink:0; transition:transform .15s; }
.csel-trigger.open .csel-arrow{ transform:rotate(180deg); }
.csel-name{ flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csel-empty{ color:var(--text-dim); font-style:italic; }
.csel-power{ font-size:10px; color:var(--text-dim); flex-shrink:0; }

.csel-dropdown{
  display:none; position:absolute; top:calc(100% + 3px); left:0; right:0;
  background:var(--bg-panel); border:1px solid var(--accent);
  border-radius:6px; z-index:200; max-height:240px; overflow-y:auto;
}
.csel-dropdown.open{ display:block; }
.csel-dropdown::-webkit-scrollbar{ width:4px; }
.csel-dropdown::-webkit-scrollbar-track{ background:transparent; }
.csel-dropdown::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:2px; }

.csel-opt{
  display:flex; align-items:center; gap:7px; padding:7px 10px;
  cursor:pointer; font-size:11px; border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .1s;
}
.csel-opt:last-child{ border-bottom:none; }
.csel-opt:hover{ background:rgba(255,255,255,.06); }
.csel-opt.selected{ background:rgba(255,201,77,.08); }
.csel-opt-name{ flex:1; font-weight:600; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csel-opt-power{ font-size:10px; color:var(--text-dim); min-width:32px; text-align:right; flex-shrink:0; }
.csel-opt-empty{ color:var(--text-dim); font-style:italic; }
.shiny-badge{ display:inline-block; animation:shiny-twinkle 1.6s ease-in-out infinite; }
@keyframes shiny-twinkle{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.85); } }

/* ---- DEX DETAIL MODAL ---- */
.dex-chain-row{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.dex-chain-arrow{ color:var(--text-dim); font-size:14px; flex-shrink:0; }
.dex-chain-node{
  background:rgba(255,255,255,.04); border:1px solid var(--line-bright); border-radius:8px;
  padding:6px 8px 5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:var(--font-body); color:var(--text-main); min-width:64px;
}
.dex-chain-node:hover{ border-color:var(--accent); }
.dex-chain-node.current{ border-color:var(--accent); background:rgba(255,201,77,.1); }
.dex-chain-name{ font-size:8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70px; }
.dex-move-list{ max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:6px; }
.dex-move-row{
  display:flex; align-items:center; gap:7px; padding:6px 9px;
  font-size:11px; border-bottom:1px solid rgba(255,255,255,.04);
}
.dex-move-row:last-child{ border-bottom:none; }
.dex-move-name{ flex:1; font-weight:600; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dex-move-power{ font-size:10px; color:var(--text-dim); min-width:24px; text-align:right; flex-shrink:0; }
.dex-shiny-btn.active, .dex-form-btn.active{ background:rgba(255,201,77,.16); border-color:var(--accent); color:var(--accent-light); }
.csel-group-label{
  padding:4px 10px 2px; font-size:8px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-dim); background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.04);
}
.csel-opt-hidden{ display:none !important; }
.csel-search-wrap{
  position:sticky; top:0; z-index:2; background:var(--bg-panel);
  padding:7px 8px; border-bottom:1px solid var(--line-bright);
}
.csel-search{
  width:100%; box-sizing:border-box; background:rgba(255,255,255,.05); border:1px solid var(--line-bright);
  border-radius:6px; padding:6px 9px; font-size:11px; color:var(--text-main); font-family:var(--font-body);
}
.csel-search::placeholder{ color:var(--text-dim); }
.csel-search:focus{ outline:none; border-color:var(--accent); }

/* Catégorie chips dans dropdown */
.cat-chip{ font-size:8px; padding:2px 5px; border-radius:2px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; flex-shrink:0; }
.cat-phys  { background:#3a1400; color:#ff8c50; border:1px solid #7a3010; }
.cat-spec  { background:#001040; color:#80a8ff; border:1px solid #103080; }
.cat-status{ background:#1a1a2a; color:#9090b8; border:1px solid #3a3a5c; }
.evolve-row{ margin-top:10px; text-align:center; }
.editor-actions{
  display:flex; gap:8px; justify-content:flex-end;
  padding:10px 16px; border-top:1px solid var(--line);
  background:rgba(0,0,0,.2);
}

.tower-floor{ text-align:center; padding:30px 10px; }
.tower-floor .floor-num{ font-size:52px; color:var(--accent-light); font-weight:bold; font-family:var(--font-display); }
.tower-floor .floor-label{ color:var(--text-dim); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }

.side-row{ display:flex; justify-content:space-between; margin-bottom:8px; }
.bench{ display:flex; gap:4px; }
.pokeball-icon{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(to bottom, #ff5d5d 0%, #ff5d5d 47%, #16263a 47%, #16263a 53%, #eef3f8 53%, #eef3f8 100%);
  border:1.5px solid #16263a; position:relative; opacity:.35;
}
.pokeball-icon::after{
  content:''; position:absolute; top:50%; left:50%; width:7px; height:7px;
  background:#eef3f8; border:1.5px solid #16263a; border-radius:50%; transform:translate(-50%,-50%);
}
.hazard-chip{ display:inline-flex; align-items:center; justify-content:center; height:20px; min-width:20px; padding:0 5px; margin-left:4px; border-radius:10px; font-size:11px; font-weight:800; color:var(--text-main); background:rgba(255,201,77,.16); border:1px solid rgba(255,201,77,.5); }
.pokeball-icon.alive{ opacity:1; }
.pokeball-icon.fainted{ filter:grayscale(1); opacity:.3; }
.pokeball-icon.active{ box-shadow:0 0 0 2px var(--accent); }

.combatant-row{ display:flex; gap:10px; }
.combatant-row:first-child{ justify-content:flex-start; margin-top:auto; }
.is-double-battle .combatant-row{ justify-content:center; }
.combatant{ width:100%; max-width:320px; padding:6px 4px; position:relative; background:none; border:none; box-shadow:none; }
/* Zone au sol thématisée, centrée automatiquement sous chaque combattant (même axe vertical que
   son sprite/sa barre de PV, quelle que soit sa position exacte dans la mise en page). */
.combatant::after{
  content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:80%; max-width:260px; height:48px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse, rgba(var(--arena-rgb,219,163,74),.22), transparent 72%);
}
.combatant.foe::after{ background:radial-gradient(ellipse, rgba(var(--arena-rgb,219,163,74),.16), transparent 72%); }
.is-double-battle .combatant{ max-width:170px; }
.is-double-battle .sprite{ width:92px; height:92px; font-size:50px; }
.is-double-battle .combatant.you .sprite{ width:98px; height:98px; font-size:54px; }
.is-double-battle .name-row{ font-size:11px; }
.name-row{ display:flex; align-items:center; gap:8px; justify-content:space-between; font-size:13px; margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,.8); position:relative; z-index:2; }
.type-badges-row{ display:inline-flex; gap:5px; }
.type-badge-icon{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
.hpbar-track{ height:10px; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:5px; overflow:hidden; position:relative; z-index:2; }
.hpbar-fill{ height:100%; width:100%; background:var(--good); transition:width .5s ease;}
.hp-text{ font-size:10px; color:var(--text-dim); margin-top:3px; text-align:right; position:relative; z-index:2; }
/* z-index bas volontaire : les sprites surdimensionnés (gabarits géants, voir POKEMON_SCALE)
   débordent de leur boîte et doivent passer derrière la barre de vie / le journal de combat
   plutôt que de les recouvrir, pour un effet d'immersion (créature imposante en arrière-plan). */
.sprite{ width:clamp(80px,20dvh,150px); height:clamp(80px,20dvh,150px); margin:8px auto 0; display:flex; align-items:center; justify-content:center; font-size:clamp(44px,10.6dvh,80px); position:relative; z-index:1; }
/* Sprite du joueur (vu de dos) volontairement plus grand : on se sent juste derrière son Pokémon,
   face à l'adversaire plus loin sur le terrain — composition classique des jeux Pokémon. */
.combatant.you .sprite{ width:clamp(90px,23dvh,172px); height:clamp(90px,23dvh,172px); font-size:clamp(50px,12.2dvh,92px); margin-top:0; }
.shake{ animation:shake .35s; }
@keyframes shake{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);} }
.crit-shake{ animation:critShake .45s; }
@keyframes critShake{
  0%{transform:translate(0,0) scale(1);}
  10%,90%{transform:translate(-3px,-2px) scale(1.03);}
  20%,80%{transform:translate(6px,3px) scale(1.05);}
  30%,50%,70%{transform:translate(-12px,4px) scale(1.06);}
  40%,60%{transform:translate(12px,-4px) scale(1.06);}
  100%{transform:translate(0,0) scale(1);}
}
.battle-flash{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  animation:battleFlash .4s ease-out;
}
.flash-crit{ background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,201,77,.3) 45%, transparent 75%); }
.flash-superfx{ background:radial-gradient(circle, rgba(255,90,60,.55) 0%, transparent 70%); }
.battle-flash.flash-custom{ animation-duration:.7s; }
@keyframes battleFlash{ 0%{opacity:1;} 100%{opacity:0;} }
.lunge{ animation:lunge .4s ease; }
@keyframes lunge{ 0%{transform:scale(1) translateY(0);} 35%{transform:scale(1.12) translateY(-6px);} 100%{transform:scale(1) translateY(0);} }

/* ---- Animations d'activation des mécaniques de combat (Dynamax/Méga/Téracristal/Capacité Z),
   inspirées de Pokémon Showdown : pulsation du sprite + effet de particules autour de lui. ---- */
.mecha-fx-wrap{ position:absolute; pointer-events:none; z-index:25; transform:translate(-50%,-50%); }
.mecha-fx-ring{
  position:absolute; left:0; top:0; border-radius:50%; border:4px solid var(--fx-color);
  box-shadow:0 0 18px var(--fx-color); animation:mechaFxRing 1s ease-out forwards;
}
@keyframes mechaFxRing{
  0%{ width:10px; height:10px; margin:-5px; opacity:0; }
  25%{ opacity:.9; }
  100%{ width:180px; height:180px; margin:-90px; opacity:0; }
}
.mecha-fx-shard{
  position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px;
  background:var(--fx-color); clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow:0 0 8px var(--fx-color); animation:mechaFxShard .85s ease-out forwards;
}
@keyframes mechaFxShard{
  0%{ transform:translate(0,0) scale(0) rotate(0deg); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(var(--px),var(--py)) scale(1) rotate(240deg); opacity:0; }
}
.dynamax-grow{ animation:dynamaxGrow .8s cubic-bezier(.34,1.56,.64,1); }
@keyframes dynamaxGrow{
  0%{ filter:drop-shadow(0 0 0 rgba(255,50,90,0)); }
  35%{ transform:scale(1.35); filter:drop-shadow(0 0 22px rgba(255,50,90,.9)) saturate(1.4); }
  60%{ transform:scale(.95); }
  100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(255,50,90,0)); }
}
.tera-shine{ animation:teraShine .9s ease; }
@keyframes teraShine{
  0%{ filter:brightness(1) drop-shadow(0 0 0 var(--fx-color)); }
  40%{ filter:brightness(1.9) drop-shadow(0 0 20px var(--fx-color)); }
  100%{ filter:brightness(1) drop-shadow(0 0 0 var(--fx-color)); }
}
.zmove-beam{
  position:absolute; z-index:24; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--fx-color) 35%, transparent 72%);
  animation:zmoveBeam .55s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes zmoveBeam{
  0%{ transform:translate(-50%,-50%) scale(.1); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:0; }
}
.mega-sparkle{
  position:absolute; left:0; top:0; width:8px; height:8px; margin:-4px;
  background:#fff; border-radius:50%; box-shadow:0 0 10px #ffe27a, 0 0 4px #fff;
  animation:megaSparkle 1.1s ease-out forwards;
}
@keyframes megaSparkle{
  0%{ transform:translate(0,0) scale(0); opacity:1; }
  20%{ transform:scale(1.4); opacity:1; }
  100%{ transform:translate(var(--px),var(--py)) scale(0); opacity:0; }
}
.move-fx-icon{
  position:absolute; width:34px; height:34px; margin-left:-17px; margin-top:-17px;
  pointer-events:none; z-index:20; color:var(--fx-color);
  filter:drop-shadow(0 0 6px var(--fx-color));
}
.move-fx-icon svg{ width:100%; height:100%; display:block; fill:currentColor; }
.move-fx-icon.fx-projectile{ animation:moveFxFly .4s ease-in forwards; }
.move-fx-icon.fx-impact{ animation:moveFxImpact .32s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes moveFxFly{
  0%{ transform:translate(0,0) scale(.5) rotate(-10deg); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(var(--fx-dx), var(--fx-dy)) scale(1.05) rotate(10deg); opacity:1; }
}
@keyframes moveFxImpact{
  0%{ transform:scale(.3) rotate(-20deg); opacity:0; }
  45%{ transform:scale(1.3) rotate(6deg); opacity:1; }
  100%{ transform:scale(.95) rotate(0deg); opacity:1; }
}
.move-fx-trail{
  position:absolute; width:26px; height:26px; margin-left:-13px; margin-top:-13px;
  pointer-events:none; z-index:17; color:var(--fx-color); opacity:.35;
}
.move-fx-trail svg{ width:100%; height:100%; fill:currentColor; }
.move-fx-ring{
  position:absolute; width:18px; height:18px; margin-left:-9px; margin-top:-9px;
  border:3px solid var(--fx-color); border-radius:50%; pointer-events:none; z-index:18;
  animation:moveFxRing .45s ease-out forwards;
}
@keyframes moveFxRing{
  0%{ transform:scale(.4); opacity:.9; }
  100%{ transform:scale(3.4); opacity:0; }
}
.move-fx-particle{
  position:absolute; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  background:var(--fx-color); border-radius:2px; pointer-events:none; z-index:19;
  box-shadow:0 0 6px var(--fx-color);
  animation:moveFxParticle .5s ease-out forwards;
}
@keyframes moveFxParticle{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--px), var(--py)) scale(.2) rotate(200deg); opacity:0; }
}
.faint-fade{ transition:opacity .6s ease, transform .6s ease; opacity:.15; transform:translateY(12px) scale(.85); }

.stat-badges{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.stat-badge{ font-size:9px; padding:1px 6px; border-radius:3px; font-weight:bold; letter-spacing:.3px; }
.stat-badge.boost{ background:rgba(76,206,106,.18); color:var(--good); border:1px solid var(--good); }
.stat-badge.nerf{ background:rgba(255,93,93,.18); color:var(--low); border:1px solid var(--low); }

.status-icon-badge{
  position:absolute; top:2px; right:2px; font-size:20px; line-height:1; z-index:4;
  background:var(--bg-panel); border-radius:50%; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--low);
}
.vsfield{ display:flex; flex-direction:column; gap:18px; position:relative; min-height:170px; height:100%; padding:6px 4%; }

.battle-topbar{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.battle-trackers{ margin-bottom:10px; }
.battle-hud-row{ display:flex; align-items:stretch; gap:14px; }
.mechanics-col{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.mechanics-col:empty{ display:none; }
.mech-btn{
  width:64px; flex:1 1 0; min-height:0; border-radius:8px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--text-main);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; font-family:var(--font-body); transition:border-color .1s;
}
.mech-btn .mech-icon{ font-size:19px; }
.mech-btn .mech-label{ font-size:8px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; }
.mech-btn:hover:not(:disabled){ border-color:var(--accent); }
.mech-btn:disabled{ opacity:.35; cursor:not-allowed; }
.mech-btn.active{ background:rgba(255,201,77,.14); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.moves-panel{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.moves-panel-actions{ display:flex; align-items:center; gap:6px; height:36px; }
.moves-panel-actions .btn.secondary{ height:36px; padding:0 12px; font-size:11px; display:flex; align-items:center; justify-content:center; gap:6px; }
.hud-icon-btn{
  width:36px; height:36px; flex-shrink:0; border-radius:8px;
  background:rgba(24,20,34,.72); border:1px solid var(--line-bright); color:var(--text-main);
  display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer;
  transition:border-color .1s;
}
.hud-icon-btn:hover{ border-color:var(--accent); }
.moves-panel-actions-revealed{ display:flex; align-items:center; gap:6px; }
.moves-panel-actions-revealed.hidden{ display:none; }
.moves .move-btn{ display:flex; flex-direction:column; justify-content:center; }
.trainer-banner{
  display:flex; align-items:center; gap:10px; padding:8px 16px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
  border:1px solid rgba(255,201,77,.3); border-radius:8px;
  flex:1; min-width:0;
}
.trainer-banner.boss{ border-color:rgba(255,201,77,.5); background:rgba(255,201,77,.1); }
.trainer-banner.miniboss{ border-color:rgba(107,79,160,.5); background:rgba(107,79,160,.12); }
.trainer-banner.twin-banner{ gap:0; }
.trainer-info-pair{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.trainer-info-pair + .trainer-info-pair{ margin-left:14px; padding-left:14px; border-left:1px solid var(--line); }
.trainer-avatar{ font-size:32px; line-height:1; flex-shrink:0; }
.trainer-avatar img.trainer-sprite-img{ width:56px; height:56px; object-fit:contain; image-rendering:pixelated; display:block; }
.trainer-banner.boss .trainer-avatar img.trainer-sprite-img{ width:72px; height:72px; }
.trainer-banner.miniboss .trainer-avatar img.trainer-sprite-img{ width:64px; height:64px; }
.trainer-info{ min-width:0; flex:1; }
.trainer-name{ font-family:var(--font-display); font-size:11px; color:var(--accent-light); letter-spacing:.5px; margin-bottom:5px; line-height:1.4; overflow-wrap:anywhere; }
.trainer-quote{ font-size:11px; color:var(--text-dim); font-style:italic; }
.moves-header{ font-size:11px; color:var(--text-dim); text-align:center; margin-bottom:8px; letter-spacing:.3px; }

/* ---- Écran de combat plein écran : arène classique par défaut, thématisée à la couleur du type
   du Maître de Type via --arena-rgb ("R,G,B", posé en JS par applyArenaTheme dans battle-flow.js).
   Structure reprise du canevas : halos de brume (3 cercles flous) + sol qui s'assombrit vers le bas
   + zone au sol sous chaque combattant (voir .combatant::after, alignée automatiquement). ---- */
#screenBattle:not(.hidden){
  position:fixed; inset:0; z-index:200; overflow:hidden;
  padding:20px; background:#140F0A;
  display:flex; flex-direction:column;
}
.battle-arena-fog{
  position:absolute; border-radius:50%; filter:blur(30px); pointer-events:none; z-index:0;
}
.battle-arena-fog.fog1{ width:420px; height:420px; left:-8%; top:8%; background:radial-gradient(circle, rgba(var(--arena-rgb,219,163,74),.20), transparent 70%); }
.battle-arena-fog.fog2{ width:480px; height:480px; right:-8%; top:-6%; background:radial-gradient(circle, rgba(var(--arena-rgb,219,163,74),.22), transparent 70%); }
.battle-arena-fog.fog3{ width:600px; height:600px; left:50%; bottom:-40%; transform:translateX(-50%); background:radial-gradient(circle, rgba(var(--arena-rgb,219,163,74),.30), transparent 72%); }
.battle-arena-floor{
  position:absolute; left:0; right:0; bottom:0; height:45%; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, transparent, rgba(var(--arena-rgb,219,163,74),.18) 45%, rgba(18,13,8,.75));
}
.battle-topbar, .battle-trackers, #weatherBanner, .battle-main{ position:relative; z-index:1; }
.battle-topbar, .battle-trackers, #weatherBanner{ flex-shrink:0; }
/* Fenêtre de combat unique : l'arène et le module d'actions vivent dans le même cadre (un seul
   fond/bordure), côte à côte, alignés sur la même hauteur — tout tient dans la fenêtre, sans
   défiler. Seul le mobile les empile. */
.battle-main{
  flex:1; display:flex; gap:16px; min-height:0; padding:14px;
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:8px;
}
.battle-field{ flex:1; min-width:0; overflow-y:auto; }
/* Colonne d'actions : l'adversaire reste épinglé en haut à droite, le journal + les actions
   (mécaniques/attaques) sont poussés tout en bas grâce à la marge automatique, alignés avec le
   pokémon du joueur dans l'arène. */
.battle-controls{
  display:flex; flex-direction:column; gap:12px; position:relative;
  width:380px; flex-shrink:0; overflow-y:auto;
}
.battle-hud-bottom{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
/* Pokémon adverse dans le coin en haut à droite, au-dessus du module d'actions. */
.foe-row-top-right{ justify-content:flex-end; }

.log{
  margin:0; background:rgba(18,13,8,.6); backdrop-filter:blur(6px);
  border:1px solid var(--line-bright); border-radius:10px; padding:8px 12px;
  font-size:12px; color:var(--text-main); line-height:1.5; letter-spacing:.2px;
  /* Hauteur fixe (pas max-height) : l'historique défile en interne dès le premier message au lieu de
     grandir progressivement, sinon sa croissance vole de la hauteur à .battle-field (flex:1, voir plus
     bas) à chaque nouveau message et fait "sauter" le sprite du joueur vers le haut à chaque action. */
  height:110px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  position:relative; z-index:3; flex-shrink:0;
}
.log b{ color:inherit; }
.log-entry{ padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-dim); opacity:.7; }
.log-entry:last-child{ border-bottom:none; padding-bottom:0; color:var(--text-main); opacity:1; font-weight:500; }
.battle-controls .moves{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,78px); gap:8px 10px; }
.move-btn{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text-main); border-radius:8px; padding:11px 14px;
  font-family:var(--font-body); font-size:13px; text-align:left; cursor:pointer;
  transition:border-color .1s;
}
.move-btn:hover:not(:disabled){ border-color:var(--accent); }
.move-btn:disabled{ opacity:.35; cursor:not-allowed; }
.move-btn small{ display:block; color:var(--text-dim); font-size:10px; margin-top:3px; font-family:var(--font-mono); }
.move-btn.active{ background:rgba(255,201,77,.12); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.switch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }



.dex-card{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:12px; text-align:center; }
.dex-card.selected{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,201,77,.35) inset; }

/* ===== Campement plein écran ===== */
#screenVillage:not(.hidden){
  position:fixed; inset:0; height:100dvh; bottom:auto; z-index:200; overflow-y:auto;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%, #1B1712 0%, #100E0C 55%, #0D0A08 100%);
}
/* Écrans courts (téléphone en paysage) : tout le Campement doit tenir sans défiler. */
@media (max-height:520px){
  #screenVillage:not(.hidden){ padding:8px 14px; }
  .village-topbar{ margin-bottom:6px; }
  .village-bottombar{ padding-top:6px; }
  .village-bottombar .btn{ width:auto; min-height:36px; padding:6px 22px; font-size:13px; }
  .village-building{ --vb-scale:.5; }
  .village-building .vb-label{ font-size:7px; padding:2px 5px; }
  .village-team-mon{ width:54px; height:54px; }
  .village-pen-mon{ width:36px; height:36px; }
  .village-hamburger-btn{ width:32px; height:32px; }
  .village-watchtower{ transform:scale(.55); transform-origin:50% 100%; }
}
.village-topbar{
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0; margin-bottom:14px;
}
.village-topbar-right{ display:flex; align-items:center; gap:10px; position:relative; }
.village-bottombar{ flex-shrink:0; text-align:center; padding-top:14px; position:relative; z-index:2; }

.village-map{
  position:relative; flex:1; min-height:180px; width:100%;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
/* On est À L'INTÉRIEUR de la Tour : pas de silhouette vue de l'extérieur. À la place, une grande
   salle de pierre — arc en fond, piliers latéraux, plafond perdu dans le noir en haut (masque en
   dégradé vers transparent, révélant juste l'obscurité ambiante plutôt qu'un ciel). */
@keyframes village-window-flicker{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

.village-arch-bg{
  position:absolute; left:50%; top:-6%; width:64%; max-width:520px; height:78%; transform:translateX(-50%);
  pointer-events:none; z-index:0; opacity:.9;
  border-radius:50% 50% 0 0 / 38% 38% 0 0;
  border:16px solid #2E2822; border-bottom:none;
  background:linear-gradient(180deg, rgba(8,7,10,.9) 0%, rgba(20,16,22,.55) 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, black 0%, black 40%, transparent 96%);
  mask-image:linear-gradient(to top, black 0%, black 40%, transparent 96%);
}
/* Piliers de pierre, deux paires (extérieure/intérieure), qui se perdent dans le noir en montant. */
.village-pillar{
  position:absolute; top:0; bottom:0; width:38px; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, #1A1512 0%, #4A4036 22%, #5A4E42 50%, #4A4036 78%, #1A1512 100%);
  -webkit-mask-image:linear-gradient(to top, black 0%, black 40%, transparent 88%);
  mask-image:linear-gradient(to top, black 0%, black 40%, transparent 88%);
}
.village-pillar::before, .village-pillar::after{
  content:''; position:absolute; left:-6px; right:-6px; height:14px; background:#241E18;
}
.village-pillar::before{ bottom:0; border-radius:2px; }
.village-pillar::after{ bottom:74%; border-radius:2px; }
.vp-outer-l{ left:2%; opacity:.65; }
.vp-inner-l{ left:16%; width:30px; opacity:.85; }
.vp-inner-r{ right:16%; left:auto; width:30px; opacity:.85; }
.vp-outer-r{ right:2%; left:auto; opacity:.65; }

/* Torches accrochées aux piliers, pour une lumière chaude ponctuelle. */
.village-torch{ position:absolute; bottom:60%; width:0; pointer-events:none; z-index:0; }
.village-torch .vt-flame{
  position:absolute; left:50%; bottom:0; width:16px; height:22px; transform:translateX(-50%);
  border-radius:50% 50% 60% 60%; background:radial-gradient(circle at 50% 30%, rgba(255,225,154,.9), rgba(227,53,13,.5) 60%, transparent 80%);
  filter:blur(2px); animation:village-fire-flicker 1.8s ease-in-out infinite;
}

/* Bannières/fanions suspendus entre les piliers. */
.village-banner-string{
  position:absolute; left:12%; right:12%; top:46%; height:1px; background:rgba(120,100,80,.25);
  pointer-events:none; z-index:0;
}
.village-banner{
  position:absolute; top:0; width:12px; height:14px; transform:translateX(-50%);
  clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  opacity:.8; animation:village-window-flicker 5s ease-in-out infinite;
}

/* Petite tour de guet en bois, en retrait sur le côté. */
.village-watchtower{
  position:absolute; left:47%; bottom:58%; width:56px; height:130px; pointer-events:none; z-index:0; opacity:.5;
}
.village-watchtower .vw-leg{ position:absolute; bottom:0; width:6px; height:78px; background:#2E2118; }
.village-watchtower .vw-leg-l{ left:8px; transform:skewX(-4deg); }
.village-watchtower .vw-leg-r{ right:8px; transform:skewX(4deg); }
.village-watchtower .vw-platform{ position:absolute; bottom:76px; left:0; width:56px; height:10px; background:#3E2E20; border-radius:2px; }
.village-watchtower .vw-roof{ position:absolute; bottom:86px; left:-6px; width:68px; height:30px; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); background:#4A2F22; }

/* Deux tentes de fond, en retrait/plus petites (profondeur), en plus du coin tente principal. */
.village-decor.vd-tent-back{ transform:translate(-50%,-100%) scale(.68); opacity:.5; filter:saturate(.35) brightness(.7); z-index:0; }

/* Brume de profondeur entre le sol et le fond. */
.village-mist{
  position:absolute; left:-5%; right:-5%; bottom:28%; height:110px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, transparent, rgba(190,160,130,.07) 45%, transparent);
  filter:blur(10px);
}

.village-sky{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.village-ember{
  position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent);
  filter:blur(1px); opacity:.5;
  animation:village-ember-rise 5s ease-in infinite;
}
/* Braises qui montent bien plus haut, pour relier visuellement le feu à l'espace vide au-dessus. */
.village-ember-tall{
  position:absolute; left:48%; bottom:10%; width:5px; height:5px; border-radius:50%; background:var(--accent);
  filter:blur(1px); opacity:0;
  animation:village-ember-rise-tall 7s ease-in infinite;
}
@keyframes village-ember-rise-tall{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:.75; }
  90%{ opacity:.3; }
  100%{ transform:translate(var(--vet-dx,0), -72vh); opacity:0; }
}
.vet1{ left:44%; animation-duration:6.5s; --vet-dx:-18px; }
.vet2{ left:51%; animation-duration:8s; animation-delay:-2.5s; width:4px; height:4px; --vet-dx:14px; }
.vet3{ left:47%; animation-duration:7.2s; animation-delay:-4.6s; --vet-dx:8px; }
.vet4{ left:53%; animation-duration:9s; animation-delay:-1.3s; width:4px; height:4px; --vet-dx:-10px; }
@keyframes village-ember-rise{
  0%{ transform:translateY(0); opacity:.6; }
  100%{ transform:translateY(-140px); opacity:0; }
}
.ve1{ left:48%; bottom:38%; animation-duration:4.5s; }
.ve2{ left:53%; bottom:30%; animation-duration:6s; animation-delay:-2s; width:4px; height:4px; }
.ve3{ left:44%; bottom:34%; animation-duration:5.2s; animation-delay:-3.4s; width:5px; height:5px; }
/* Sol : clairière terreuse/nocturne, plus sombre vers le bas de l'écran. */
.village-ground{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 48% 88%, rgba(120,80,50,.16), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(58,42,28,.35) 55%, rgba(20,14,10,.85) 100%);
}
.village-path{
  position:absolute; left:var(--vb-x); top:var(--vb-y); height:22px;
  border-radius:50%; background:rgba(120,80,50,.22); filter:blur(2px); pointer-events:none;
}
/* Détails de camp : caisse, tente, sac de couchage, bûches. */
.village-decor{ position:absolute; left:var(--vb-x); top:var(--vb-y); transform:translate(-50%,-100%); pointer-events:none; }
.vd-crate{ width:24px; height:22px; background:linear-gradient(180deg,#5B4636,#3E2E20); border:1px solid #241a10; border-radius:2px; }
.vd-crate::before, .vd-crate::after{ content:''; position:absolute; inset:3px; border:1px solid rgba(0,0,0,.3); }
.vd-tent{ width:56px; height:46px; }
.vd-tent::before{
  content:''; position:absolute; inset:0; clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  background:repeating-linear-gradient(45deg, #3FA9C9 0px, #3FA9C9 8px, #2A6E80 8px, #2A6E80 16px); opacity:.92;
}
.vd-tent-flap{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:16px; height:22px; background:#1A3A44; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.vd-bedroll{ width:42px; height:14px; border-radius:6px; background:linear-gradient(180deg,#8B5A3A,#5C3A24); opacity:.9; }
.vd-log{ width:46px; height:14px; border-radius:6px; background:linear-gradient(180deg,#4A3628,#2E2118); }
.vd-rock{ width:26px; height:16px; border-radius:50% 50% 40% 40%; background:linear-gradient(180deg,#3A362E,#221F1A); }
.vd-bush{ width:30px; height:20px; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 35% 30%, #2E3A22, #1A2314 75%); }
/* Bûche-siège de l'anneau autour du feu : générée par JS, avec ou sans pokémon dessus. */
.village-log-seat{
  position:absolute; left:var(--vb-x); top:var(--vb-y); transform:translate(-50%,-100%);
  width:44px; height:14px; border-radius:6px; z-index:1;
  background:linear-gradient(180deg,#4A3628,#2E2118);
}
.village-team-ring{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.village-team-mon{
  position:absolute; width:84px; height:84px; transform:translate(-50%,-100%);
  animation:village-mon-bob 2.6s ease-in-out infinite;
}
.village-team-mon img,.village-team-mon .sprite-fallback{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
@keyframes village-mon-bob{ 0%,100%{ transform:translate(-50%,-100%); } 50%{ transform:translate(-50%,-100%) translateY(-4px); } }
.village-ranch-pen{
  position:absolute; left:var(--vb-x); top:var(--vb-y); width:150px; height:0;
  transform:translate(-50%,0); pointer-events:none; z-index:2;
}
.village-pen-mon{
  position:absolute; bottom:0; width:58px; height:58px; transform:translate(-50%,0);
  animation:village-mon-bob 2.6s ease-in-out infinite;
}
.village-pen-mon img,.village-pen-mon .sprite-fallback{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }

.village-hamburger-btn{
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text-main);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.village-hamburger-btn:hover{ border-color:var(--accent); }
.village-hamburger-menu{
  position:absolute; top:44px; right:0; z-index:20; display:flex; flex-direction:column; gap:6px;
  padding:10px; border-radius:8px; background:var(--bg-panel); border:1px solid var(--line);
  min-width:200px;
}
.village-hamburger-menu .btn.secondary{ width:100%; text-align:left; font-size:12px; padding:9px 12px; }

.village-campfire{
  position:absolute; left:var(--vb-x); top:var(--vb-y); transform:translate(-50%,-50%); z-index:1;
  pointer-events:none; display:flex; align-items:center; justify-content:center;
}
.village-campfire .vc-glow{
  position:absolute; width:170px; height:70px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,201,77,.4), transparent 72%);
  filter:blur(5px);
}
.village-campfire .vc-flame{
  position:relative; font-size:28px;
  animation:village-fire-flicker 1.6s ease-in-out infinite;
}
@keyframes village-fire-flicker{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1.08) translateY(-2px); }
}

/* ---- Bâtiments dessinés (bloc + toit en pente + emblème), pas des icônes plates ---- */
.village-building{
  position:absolute; left:var(--vb-x); top:var(--vb-y); transform:translate(-50%,-100%) scale(var(--vb-scale,1));
  background:none; border:none; padding:0; margin:0; cursor:pointer; z-index:1;
  transition:transform .15s;
}
.village-building:hover, .village-building:focus-visible{ transform:translate(-50%,-100%) scale(var(--vb-scale,1)); }
.village-building.hidden{ display:none !important; }
.village-building .vb-label{
  position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px);
  font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; font-family:var(--font-body); color:var(--text-main);
  background:rgba(14,14,20,.85); border:1px solid var(--line); padding:3px 8px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.village-building:hover .vb-label, .village-building:focus-visible .vb-label{ opacity:1; transform:translate(-50%,-10px); }

/* Centre Pokémon */
.village-b-center{ width:92px; height:150px; }
.village-b-center .vbd-body{ position:absolute; left:0; bottom:0; width:92px; height:96px; background:#ECE7DD; border-radius:4px 4px 0 0; }
.village-b-center .vbd-roof{ position:absolute; left:-8px; bottom:92px; width:108px; height:44px; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.village-b-center .vbd-roof-red{ background:linear-gradient(180deg,#E5484D,#B8342A); }
.village-b-center .vbd-emblem.vbd-pokeball{
  position:absolute; left:33px; bottom:38px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg,#E5484D 0%,#E5484D 48%,#14161F 48%,#14161F 52%,#ECE7DD 52%,#ECE7DD 100%);
  border:2px solid #14161F; box-sizing:border-box;
}
.village-b-center .vbd-pokeball-center{
  position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%;
  background:#ECE7DD; border:2px solid #14161F; transform:translate(-50%,-50%); box-sizing:border-box;
}

/* Poké Mart */
.village-b-mart{ width:100px; height:158px; }
.village-b-mart .vbd-body{ position:absolute; left:0; bottom:0; width:100px; height:90px; background:#ECE7DD; border-radius:4px 4px 0 0; }
.village-b-mart .vbd-roof{ position:absolute; left:-8px; bottom:86px; width:116px; height:40px; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); background:linear-gradient(180deg,#4D84C4,#3B6EA5); }
.village-b-mart .vbd-awning-stripes{
  position:absolute; left:12px; bottom:64px; width:76px; height:10px; border-radius:2px;
  background:repeating-linear-gradient(90deg, #3B6EA5 0px, #3B6EA5 10px, #ECE7DD 10px, #ECE7DD 20px);
}
.village-b-mart .vbd-emblem.vbd-mart-badge{
  position:absolute; left:37px; bottom:36px; width:26px; height:26px; border-radius:50%;
  background:#3B6EA5; border:2px solid #14161F; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; color:#ECE7DD;
}

/* Ranch : clôture + grange */
.village-b-ranch{ width:150px; height:130px; }
.village-b-ranch .vbd-fence{
  position:absolute; left:0; bottom:0; width:140px; height:38px;
  background:repeating-linear-gradient(90deg, #6B5238 0px, #6B5238 5px, transparent 5px, transparent 24px);
}
.village-b-ranch .vbd-fence-rail{ position:absolute; left:0; bottom:34px; width:140px; height:4px; background:#6B5238; }
.village-b-ranch .vbd-barn-body{ position:absolute; left:0; bottom:30px; width:66px; height:58px; background:#40301F; border-radius:2px 2px 0 0; }
.village-b-ranch .vbd-barn-roof{ position:absolute; left:-6px; bottom:82px; width:78px; height:32px; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); background:#8B4A3A; }

/* Marchand : stand improvisé (comptoir + auvent triangulaire sur pieds) */
.village-b-merchant{ width:110px; height:110px; }
.village-b-merchant .vbd-stall-pole{ position:absolute; bottom:0; width:4px; height:36px; background:#4A3828; }
.village-b-merchant .vbd-pole-l{ left:6px; }
.village-b-merchant .vbd-pole-r{ left:100px; }
.village-b-merchant .vbd-stall-counter{ position:absolute; left:16px; bottom:0; width:78px; height:34px; background:#5B4636; border-radius:4px; }
.village-b-merchant .vbd-stall-awning{
  position:absolute; left:-8px; bottom:32px; width:126px; height:50px; clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  background:repeating-linear-gradient(45deg, var(--accent2) 0px, var(--accent2) 8px, #4A2A18 8px, #4A2A18 16px); opacity:.94;
}

/* ---- Animations de la Maison Safari (jet de Ball/Caillou/Appât, capture, fuite) : jouées dans
   #safariFxLayer et sur #safariSpriteWrap (village/safari.js), inspirées des animations des vrais
   jeux mais simplifiées pour ce rendu en DOM/CSS. ---- */
.safari-suck-in{ animation:safariSuckIn .3s ease-in forwards; }
@keyframes safariSuckIn{ 0%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.15) translateY(10px); opacity:0; } }
.safari-pop-out{ animation:safariPopOut .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes safariPopOut{ 0%{ transform:scale(.15) translateY(10px); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.safari-shake{ animation:safariShake .4s ease; }
@keyframes safariShake{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  20%{ transform:translateX(-6px) rotate(-4deg); } 40%{ transform:translateX(5px) rotate(3deg); }
  60%{ transform:translateX(-4px) rotate(-2deg); } 80%{ transform:translateX(3px) rotate(2deg); }
}
.safari-bounce-happy{ animation:safariBounceHappy .4s ease; }
@keyframes safariBounceHappy{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.12) translateY(-8px); } }
.safari-flee-out{ animation:safariFleeOut .5s ease-in forwards; }
@keyframes safariFleeOut{ 0%{ transform:translateX(0) scale(1); opacity:1; } 100%{ transform:translateX(70px) scale(.4); opacity:0; } }

.safari-fx-ball{
  position:absolute; left:50%; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0 15%, #E5484D 16% 48%, #14161F 48% 52%, #ECE7DD 52% 100%);
  margin-left:-11px;
}
.safari-fx-ball-throw{ bottom:-10px; animation:safariBallThrow .32s ease-out forwards; }
@keyframes safariBallThrow{
  0%{ bottom:-10px; transform:scale(.6) rotate(0deg); opacity:1; }
  100%{ bottom:50%; transform:scale(1) rotate(300deg); opacity:1; }
}
.safari-ball-land{ bottom:50%; animation:safariBallLand .15s ease-out forwards; }
@keyframes safariBallLand{ 0%{ bottom:50%; } 100%{ bottom:38%; } }
/* Une secousse = une seule occurrence de l'animation, rejouée par JS (playSafariBallFx) avec un léger
   temps d'attente entre chacune — le nombre de secousses dépend du résultat de la capture. */
.safari-ball-shake{ animation:safariWobble .26s ease-in-out; }
@keyframes safariWobble{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-16deg); } 75%{ transform:rotate(16deg); } }
.safari-fx-rock, .safari-fx-berry{
  position:absolute; left:50%; bottom:-10px; width:15px; height:14px; margin-left:-7px;
  animation:safariThrowArc .32s ease-out forwards;
}
.safari-fx-rock{ border-radius:40% 60% 55% 45%; background:#8a7a68; }
.safari-fx-berry{ border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffb3d1,#ff5f96); }
@keyframes safariThrowArc{
  0%{ bottom:-10px; transform:scale(.5) rotate(0deg); opacity:1; }
  100%{ bottom:48%; transform:scale(1) rotate(220deg); opacity:1; }
}
.safari-fx-sparkle{ position:absolute; left:50%; top:38%; width:70px; height:70px; transform:translate(-50%,-50%); }
.safari-fx-sparkle::before, .safari-fx-sparkle::after{
  content:'\e6a2'; font-family:'Phosphor-Bold'; position:absolute; color:#FFE19A; font-size:20px; opacity:0;
  animation:safariSparkle .6s ease-out forwards;
}
.safari-fx-sparkle::before{ left:0; top:10px; }
.safari-fx-sparkle::after{ right:0; bottom:10px; animation-delay:.1s; }
@keyframes safariSparkle{ 0%{ transform:scale(0) rotate(0deg); opacity:0; } 40%{ opacity:1; } 100%{ transform:scale(1.6) rotate(90deg); opacity:0; } }
.safari-fx-heart{ position:absolute; left:50%; bottom:38%; margin-left:-6px; font-size:13px; color:#ff6fa8; opacity:0; animation:safariHeartRise .7s ease-out forwards; }
.safari-fx-heart::before{ content:'\e2a8'; font-family:'Phosphor-Bold'; }
.safari-fx-heart-0{ margin-left:-20px; } .safari-fx-heart-2{ margin-left:8px; }
@keyframes safariHeartRise{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(-34px) scale(1); opacity:0; } }
.safari-fx-dust{
  position:absolute; left:50%; bottom:20%; width:30px; height:14px; margin-left:-15px; border-radius:50%;
  background:rgba(200,190,170,.5); opacity:.7; animation:safariDust .5s ease-out forwards;
}
@keyframes safariDust{ 0%{ opacity:.7; transform:scale(.6); } 100%{ opacity:0; transform:scale(1.8); } }

.eff-badge{ font-size:10px; font-weight:800; }
.eff-badge.eff-hyper{ color:#FFD24A; }
.eff-badge.eff-super{ color:#4ADE80; }
.eff-badge.eff-weak{ color:#F87171; }
.eff-badge.eff-none{ color:var(--text-dim); }

/* Petit effet d'apparition quand un Pokémon est envoyé au combat (changement volontaire, remplaçant
   après K.O., ou l'IA adverse qui change — voir playSwitchInFx dans combat/move-fx.js). */
.switch-in-fx{ animation:switchPokeIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes switchPokeIn{ 0%{ transform:scale(.3) translateY(14px); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1) translateY(0); opacity:1; } }

/* Maison Safari : portique d'entrée en bois (deux poteaux + panneau vert), présence aléatoire */
.village-b-safari{ width:120px; height:140px; }
.village-b-safari .vbd-gate-post{ position:absolute; bottom:0; width:10px; height:96px; background:#5C4A2E; border-radius:2px; }
.village-b-safari .vbd-post-l{ left:6px; }
.village-b-safari .vbd-post-r{ left:104px; }
.village-b-safari .vbd-gate-beam{ position:absolute; left:0; bottom:92px; width:120px; height:10px; background:#6B5238; border-radius:2px; }
.village-b-safari .vbd-gate-sign{
  position:absolute; left:14px; bottom:52px; width:92px; height:36px; background:#3E6B3A; border:3px solid #2B4A28;
  border-radius:3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-size:20px;
}

/* Panneau de boutique (Centre/Mart/Ranch/Marchand) : superposé à la scène plutôt qu'inséré dessous. */
.village-panel-overlay{
  position:fixed; inset:0; z-index:230; background:rgba(5,5,10,.7);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.village-panel-card{
  position:relative; width:100%; max-width:520px; max-height:calc(100dvh - 40px); overflow-y:auto; box-sizing:border-box;
  background:var(--bg-panel); border:1px solid var(--line-bright); border-radius:8px;
  padding:22px 22px 18px;
}
@media (max-width:480px), (max-height:520px){
  .village-panel-overlay{ padding:10px; }
  .village-panel-card{ padding:16px 14px 14px; max-height:calc(100dvh - 20px); }
}

.rarity-badge{
  font-size:8px; padding:3px 9px; border-radius:5px; letter-spacing:.8px;
  text-transform:uppercase; display:inline-block; margin-bottom:6px;
  font-weight:700;
}
.rarity-commun   { background:rgba(74,222,128,.14); color:#4ADE80; border:1px solid rgba(74,222,128,.4); }
.rarity-peucommun{ background:rgba(232,163,61,.14); color:#E8A33D; border:1px solid rgba(232,163,61,.4); }
.rarity-injouable{ background:rgba(136,145,163,.14); color:#8891A3; border:1px solid rgba(136,145,163,.4); }
.rarity-mega     { background:rgba(120,220,232,.14); color:#78DCE8; border:1px solid rgba(120,220,232,.45); }
.rarity-gigamax  { background:rgba(214,51,108,.16); color:#F06595; border:1px solid rgba(214,51,108,.45); }
.rarity-rare     { background:rgba(63,169,201,.14); color:#7ecbe0; border:1px solid rgba(63,169,201,.4); }
.rarity-pseudo   { background:rgba(107,79,160,.16); color:#c3aee6; border:1px solid rgba(107,79,160,.5); }
.rarity-legendaire{ background:rgba(240,96,92,.14); color:#F0605C; border:1px solid rgba(240,96,92,.4); }
.rarity-fabuleux { background:rgba(230,103,175,.16); color:#E667AF; border:1px solid rgba(230,103,175,.45); }
.dex-rate{ font-size:11px; color:var(--text-dim); margin-top:4px; }

/* ==== Couleurs thématiques des icônes Phosphor (phIcon) ====
   Chaque icône reprend une couleur liée à son sens, pour retrouver la lisibilité colorée qu'avaient
   les émojis avant leur remplacement par ces icônes (toutes monochromes par défaut, héritent sinon de
   la couleur du texte autour). Exclusion volontaire : .ph-x reste neutre (hérite de la couleur du
   texte) pour garder l'effet de survol doré des boutons de fermeture (voir .patchnotes-close:hover). */
.ph-coins,.ph-ticket,.ph-trophy,.ph-medal,.ph-crown,.ph-star,.ph-book-open,.ph-scroll,.ph-house,
.ph-smiley,.ph-sun,.ph-lightning,.ph-plug,.ph-sparkle,.ph-warning,.ph-shopping-cart,.ph-dice-five
{ color:#FFC94D; }
.ph-gift,.ph-cookie,.ph-music-notes,.ph-heart,.ph-flower,.ph-mask-happy{ color:#E667AF; }
.ph-diamond,.ph-shield,.ph-arrows-clockwise,.ph-repeat,.ph-users,.ph-user,.ph-person-simple-run,
.ph-bicycle,.ph-sneaker,.ph-snowflake{ color:#7ecbe0; }
.ph-flame,.ph-backpack{ color:#EE8130; }
.ph-cherries,.ph-first-aid-kit,.ph-prohibit,.ph-target,.ph-boxing-glove{ color:#F0605C; }
.ph-flask,.ph-test-tube,.ph-pill,.ph-floppy-disk,.ph-check,.ph-dna,.ph-leaf,.ph-plant,.ph-tent,
.ph-basket{ color:#4ADE80; }
.ph-sword,.ph-mountains,.ph-shovel,.ph-triangle{ color:#B6A136; }
.ph-skull,.ph-ghost{ color:#A33EA1; }
.ph-drop,.ph-person-simple-swim{ color:#6390F0; }
.ph-moon,.ph-moon-stars,.ph-spiral,.ph-magic-wand,.ph-film-reel,.ph-feather,.ph-fan{ color:#A98FF3; }
.ph-brain{ color:#F95587; }
.ph-bug,.ph-asterisk{ color:#A6B91A; }
.ph-lock-simple,.ph-trash-simple,.ph-magnifying-glass,.ph-eye,.ph-gear,.ph-wrench,.ph-sliders,
.ph-desktop,.ph-device-mobile,.ph-tag-simple,.ph-speaker-high,.ph-speaker-low,.ph-circle,
.ph-question,.ph-paw-print{ color:#8891A3; }
.ph-rainbow{
  background:linear-gradient(90deg,#F0605C,#FFC94D,#4ADE80,#7ecbe0,#A98FF3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.move-select-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.move-select-row select{ font-size:11px; padding:4px 6px; }
.base-stats-box{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:14px; }
.base-stats-box div{ font-size:11px; color:var(--text-dim); text-align:center; }
.base-stats-box b{ color:var(--text-main); display:block; font-size:14px; font-family:var(--font-mono); }
.base-stats-box b.stat-boost{ color:var(--good); }
.base-stats-box b.stat-nerf{ color:var(--low); }

.effect-desc{
  font-size:11px; color:var(--text-main); background:rgba(255,201,77,.08);
  border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  padding:4px 8px; margin-top:3px; line-height:1.3;
}

/* ===== Responsive Mobile ===== */
@media (max-width:768px){
.app{padding:0 10px 24px;}
.village-building{ --vb-scale:.46; }
.village-building .vb-label{font-size:7px;padding:2px 5px;}
.village-team-mon{width:44px;height:44px;}
.village-pen-mon{width:26px;height:26px;}
.village-ranch-pen{width:96px;}
.site-header{margin-bottom:12px;padding-left:48px;padding-right:48px;}
.site-logo{white-space:nowrap;}
.draft-cards,#dexGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.team-grid,.switch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.editor-row{flex-direction:column;}
.editor-block{min-width:100%;}
.ev-grid,.iv-grid,.base-stats-box{grid-template-columns:1fr 1fr;}
.poke-card{padding:18px;}
.poke-card .emoji{font-size:64px;width:88px;height:88px;}
.team-card .emoji,.dex-card .emoji{font-size:48px;width:72px;height:72px;}
.trainer-info-pair + .trainer-info-pair{margin-left:8px;padding-left:8px;}
.trainer-avatar img.trainer-sprite-img{width:44px;height:44px;}
.trainer-banner.boss .trainer-avatar img.trainer-sprite-img{width:52px;height:52px;}
.hpbar-track{height:14px;}
.btn{width:100%;padding:14px 12px;font-size:14px;min-height:48px;}
.editor-actions{flex-direction:column;}
.side-row{flex-direction:column;gap:8px;}
input,select{font-size:14px;min-height:44px;}
.move-btn{font-size:13px;padding:14px 12px;}
.type-tag{font-size:10px;padding:4px 10px;}
.csel-dropdown{max-height:45vh;}
.editor,.editor-body,.editor-section,.move-select-row,.csel{overflow:visible;}
}
@media (max-width:480px){
.site-logo{font-size:22px;}
.floor-num{font-size:34px!important;}
.ev-grid,.iv-grid,.base-stats-box{grid-template-columns:1fr;}
.draft-cards,#dexGrid,.team-grid{grid-template-columns:1fr;}
.poke-card .emoji{font-size:56px;width:76px;height:76px;}
}

/* ===== Combat responsive : l'écran tient toujours dans la fenêtre (aucun défilement de page) =====
   Les tailles de sprites suivent la HAUTEUR disponible (dvh) ; en mobile portrait le module d'actions
   passe sous l'arène (display:contents sur .battle-controls pour réordonner adversaire / joueur /
   actions), en paysage court on garde la disposition côte à côte, compactée. */
@media (max-width:899px){
  #screenBattle:not(.hidden){
    height:100dvh; bottom:auto; overflow:hidden;
    padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  }
  .battle-topbar{ flex-wrap:nowrap; gap:8px; margin-bottom:6px; }
  .battle-topbar .btn{ width:auto; min-height:40px; padding:0 12px; font-size:12px; flex-shrink:0; }
  .trainer-banner{ padding:5px 10px; gap:8px; }
  .trainer-quote{ display:none; }
  .trainer-name{ margin-bottom:0; font-size:10px; }
  .battle-trackers{ flex-direction:row; flex-wrap:wrap; gap:4px 14px; margin-bottom:6px; }
  #weatherBanner{ margin:0 0 6px; padding:4px 10px; font-size:11px; }
  .battle-main{ flex-direction:column; gap:6px; padding:8px; }
  .battle-controls{ display:contents; }
  .foe-row-top-right{ order:0; flex-shrink:0; }
  .battle-field{ order:1; flex:1; min-height:0; overflow:hidden; }
  .battle-hud-bottom{ order:2; margin-top:0; gap:6px; flex-shrink:0; }
  .vsfield{ gap:4px; padding:0; min-height:0; }
  .combatant{ max-width:64%; padding:2px 4px; }
  .name-row{ font-size:12px; margin-bottom:3px; }
  .hpbar-track{ height:10px; }
  .sprite{ width:clamp(56px,13dvh,128px); height:clamp(56px,13dvh,128px); font-size:clamp(30px,7dvh,68px); margin-top:2px; }
  .combatant.you .sprite{ width:clamp(64px,15dvh,144px); height:clamp(64px,15dvh,144px); font-size:clamp(34px,8dvh,78px); }
  .is-double-battle .combatant-row{ flex-wrap:nowrap; justify-content:center; }
  .is-double-battle .combatant{ max-width:50%; }
  .is-double-battle .sprite, .is-double-battle .combatant.you .sprite{ width:clamp(48px,10dvh,92px); height:clamp(48px,10dvh,92px); font-size:clamp(26px,5.5dvh,50px); }
  .log{ height:clamp(44px,8dvh,84px); font-size:11px; padding:6px 10px; }
  .battle-hud-row{ flex-direction:row; gap:8px; }
  .mechanics-col{ flex-direction:column; flex-wrap:nowrap; gap:5px; }
  .mech-btn{ width:50px; min-width:0; border-radius:10px; gap:1px; }
  .mech-btn .mech-icon{ font-size:15px; }
  .mech-btn .mech-label{ font-size:6.5px; letter-spacing:.2px; }
  .moves-panel{ gap:6px; }
  .moves-panel-actions{ flex-wrap:nowrap; height:32px; }
  .moves-panel-actions .btn, .moves-panel-actions .btn.secondary{ width:auto; min-height:32px; height:32px; padding:0 10px; font-size:11px; }
  .hud-icon-btn{ width:32px; height:32px; }
  .battle-controls .moves{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,minmax(54px,8dvh)); gap:6px; }
  .move-btn{ padding:5px 8px; font-size:12px; min-width:0; overflow:hidden; }
  .move-btn{ white-space:nowrap; }
  /* Le nom de l'attaque reste sur une ligne (ellipsis si besoin), mais son détail (type/catégorie/puissance/PP)
     passe à la ligne plutôt que d'être coupé : sur mobile il n'y avait pas la place pour tout tenir sur une
     seule ligne, une partie de l'info (souvent les PP) disparaissait derrière "...". */
  .move-btn small{ font-size:9px; margin-top:2px; white-space:normal; line-height:1.35; overflow:visible; text-overflow:clip; }
  .switch-grid{ grid-template-columns:1fr 1fr; gap:6px; max-height:34dvh; overflow-y:auto; }
  .zmove-banner{ min-height:34px; padding:6px 10px; font-size:12px; }
  .trainer-banner.twin-banner{ overflow:hidden; }
  .twin-banner .trainer-info-pair{ gap:6px; min-width:0; }
  .twin-banner .trainer-avatar{ font-size:18px; }
  .twin-banner .trainer-avatar img.trainer-sprite-img{ width:26px; height:26px; }
  .twin-banner .trainer-name{ font-size:7px; line-height:1.25; letter-spacing:0; }
  /* Le bloc du Pokémon du joueur ne déborde jamais sous le journal de combat : quand l'arène manque de
     hauteur (petits écrans), c'est le sprite qui rétrécit — le nom et la barre de PV restent visibles. */
  .battle-field{ display:flex; flex-direction:column; }
  .battle-field .vsfield{ flex:1; height:auto; min-height:0; }
  .battle-field .combatant-row{ min-height:0; }
  .battle-field .combatant.you{ display:flex; flex-direction:column; min-height:0; }
  .battle-field .combatant.you > *{ flex-shrink:0; }
  .battle-field .combatant.you > .sprite{ flex:0 1 auto; min-height:0; }
}
@media (max-width:899px) and (max-height:640px) and (orientation:portrait){
  .is-double-battle .hp-text{ display:none; }
  .is-double-battle .sprite, .is-double-battle .combatant.you .sprite{ width:clamp(40px,8.5dvh,92px); height:clamp(40px,8.5dvh,92px); font-size:clamp(22px,4.6dvh,50px); }
  .is-double-battle .name-row{ font-size:10px; flex-wrap:wrap; }
  .is-double-battle .type-badges-row{ gap:3px; }
}
@media (max-width:899px) and (max-height:640px) and (orientation:portrait){
  .battle-topbar .btn{ min-height:34px; }
  .sprite{ width:clamp(48px,10.5dvh,128px); height:clamp(48px,10.5dvh,128px); font-size:clamp(26px,5.6dvh,68px); }
  .combatant.you .sprite{ width:clamp(54px,12dvh,144px); height:clamp(54px,12dvh,144px); font-size:clamp(30px,6.4dvh,78px); }
  .combatant.foe .hp-text{ display:none; }
  .name-row{ margin-bottom:2px; }
  .log{ height:32px; padding:4px 8px; }
  .battle-controls .moves{ grid-template-rows:repeat(2,minmax(46px,10dvh)); gap:5px; }
  .moves-panel-actions, .hud-icon-btn, .moves-panel-actions .btn, .moves-panel-actions .btn.secondary{ height:28px; min-height:28px; }
  .hud-icon-btn{ width:28px; }
  .battle-trackers{ margin-bottom:4px; }
}
@media (min-width:600px) and (max-width:899px) and (min-height:700px){
  .combatant{ max-width:52%; }
  .sprite{ width:clamp(90px,19dvh,170px); height:clamp(90px,19dvh,170px); font-size:clamp(48px,10dvh,90px); }
  .combatant.you .sprite{ width:clamp(100px,22dvh,200px); height:clamp(100px,22dvh,200px); font-size:clamp(54px,11.5dvh,104px); }
  .name-row{ font-size:14px; }
  .log{ height:clamp(60px,10dvh,110px); font-size:12px; }
  .battle-controls .moves{ grid-template-rows:repeat(2,minmax(58px,8dvh)); }
  .mech-btn{ width:62px; }
}
@media (max-width:899px) and (max-height:520px) and (orientation:landscape){
  #screenBattle:not(.hidden){ padding:6px 12px; }
  .battle-topbar{ margin-bottom:4px; }
  .battle-trackers{ margin-bottom:4px; flex-wrap:nowrap; }
  .battle-main{ flex-direction:row; gap:10px; padding:6px; }
  .battle-controls{ display:flex; flex-direction:column; width:min(48%,400px); flex-shrink:0; gap:4px; overflow-y:auto; overflow-x:hidden; }
  .foe-row-top-right, .battle-field, .battle-hud-bottom{ order:0; }
  .battle-field{ flex:1; }
  .battle-hud-bottom{ margin-top:auto; gap:4px; }
  .combatant{ max-width:100%; }
  .sprite{ width:clamp(44px,20dvh,90px); height:clamp(44px,20dvh,90px); font-size:clamp(24px,10dvh,48px); }
  .combatant.you .sprite{ width:clamp(50px,23dvh,104px); height:clamp(50px,23dvh,104px); font-size:clamp(28px,12dvh,56px); }
  .battle-topbar .btn{ min-height:32px; padding:0 10px; }
  .trainer-banner{ padding:2px 8px; }
  .trainer-avatar img.trainer-sprite-img, .trainer-banner.boss .trainer-avatar img.trainer-sprite-img{ width:30px; height:30px; }
  .trainer-avatar{ font-size:22px; }
  .name-row{ margin-bottom:2px; }
  .hpbar-track{ height:8px; }
  .hp-text{ font-size:9px; margin-top:1px; }
  .sprite{ margin-top:0; width:clamp(40px,17dvh,80px); height:clamp(40px,17dvh,80px); font-size:clamp(22px,9dvh,44px); }
  .combatant.you .sprite{ width:clamp(44px,20dvh,96px); height:clamp(44px,20dvh,96px); font-size:clamp(24px,10.5dvh,52px); }
  .log{ height:28px; padding:4px 8px; font-size:10px; }
  .battle-controls .moves{ grid-template-rows:repeat(2,minmax(40px,15dvh)); gap:4px; }
  .move-btn{ padding:2px 8px; font-size:11px; }
  .move-btn small{ font-size:8px; margin-top:1px; line-height:1.2; }
  .moves-panel{ gap:4px; }
  .moves-panel-actions{ height:28px; }
  .hud-icon-btn, .moves-panel-actions .btn, .moves-panel-actions .btn.secondary{ height:28px; min-height:28px; }
  .hud-icon-btn{ width:28px; }
  .mechanics-col{ gap:3px; }
  .mech-btn{ gap:0; }
  .mech-btn .mech-icon{ font-size:12px; line-height:1; }
  .mech-btn .mech-label{ font-size:5.5px; line-height:1; letter-spacing:0; }
}

/* ---- BUILDER D'ÉQUIPE (ui/team-builder.js) ---- */
.tb-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; padding:10px; background:var(--bg-card); border:1px solid var(--line); border-radius:4px; }
.btn.tb-tool{ width:auto; min-height:0; padding:7px 12px; font-size:11px; white-space:nowrap; }
.tb-slots{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.tb-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:78px; padding:6px 4px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-bright); border-radius:8px; cursor:pointer;
  color:var(--text-main); font-family:var(--font-body);
}
.tb-slot:hover:not(:disabled){ border-color:var(--accent); }
.tb-slot.active{ border-color:var(--accent); background:rgba(255,201,77,.1); }
.tb-slot:disabled{ opacity:.35; cursor:not-allowed; }
.tb-slot-name{ font-size:9px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.tb-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:6px; padding:14px; min-width:0; }
.tb-label{ font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; display:block; margin:10px 0 3px; }
.tb-num-grid{ grid-template-columns:repeat(3,1fr); }
.tb-empty{ font-size:11px; color:var(--text-dim); text-align:center; padding:14px 6px; line-height:1.5; }
.tb-note{ font-size:9px; color:var(--text-dim); line-height:1.5; margin-top:10px; }
.tb-foe-build{ font-size:10px; color:var(--text-dim); line-height:1.6; margin-top:6px; }
.tb-summary-box{ font-size:11px; color:var(--text-main); line-height:1.7; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin-top:8px; }
.tb-move-line{ display:flex; align-items:center; gap:7px; padding:5px 2px; font-size:11px; border-bottom:1px solid rgba(255,255,255,.04); }
.tb-ml-name{ flex:1; min-width:0; font-weight:600; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.tb-ml-pct{ font-size:10px; color:var(--text-dim); flex-shrink:0; font-variant-numeric:tabular-nums; }
.tb-verdict{ font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 6px; border-radius:4px; flex-shrink:0; white-space:nowrap; }
.tb-v-ko{ background:rgba(240,96,92,.16); color:#F0605C; border:1px solid rgba(240,96,92,.45); }
.tb-v-strong{ background:rgba(232,163,61,.16); color:#E8A33D; border:1px solid rgba(232,163,61,.45); }
.tb-v-mid{ background:rgba(63,169,201,.14); color:#7ecbe0; border:1px solid rgba(63,169,201,.4); }
.tb-v-weak, .tb-v-none{ background:rgba(136,145,163,.14); color:#8891A3; border:1px solid rgba(136,145,163,.4); }
.tb-threat{
  display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; margin-bottom:5px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px; color:var(--text-main); font-family:var(--font-body);
}
button.tb-threat:hover{ border-color:var(--accent); }
.tb-threat-name{ display:block; font-size:11px; font-weight:700; }
.tb-threat-sub{ display:block; font-size:9px; color:var(--text-dim); line-height:1.4; }
.tb-fast{ color:var(--accent); font-size:10px; }
.tb-src{ font-size:8px; font-weight:700; text-transform:uppercase; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.08); color:var(--text-dim); }
.tb-src-smogon{ background:rgba(107,79,160,.25); color:#c3aee6; }
.tb-src-jeu{ background:rgba(255,201,77,.16); color:var(--accent-light); }
.tb-src-tournoi{ background:rgba(63,169,201,.2); color:#7ecbe0; }
.tb-src-vgc{ background:rgba(122,199,76,.18); color:#a6dc86; }
.tb-foe-editor{ border:1px solid var(--line); border-radius:6px; padding:2px 10px 10px; margin-top:8px; background:rgba(0,0,0,.18); }
.tb-pick-list{ max-height:52dvh; overflow-y:auto; border:1px solid var(--line); border-radius:6px; }
.tb-pick-row{
  display:flex; align-items:center; gap:8px; width:100%; padding:5px 8px; cursor:pointer; background:none; border:none;
  border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-main); font-family:var(--font-body); font-size:11px;
}
.tb-pick-row:hover{ background:rgba(255,255,255,.06); }
.tb-sum-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tb-sum-card{ background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:8px; padding:10px; min-width:0; }
.tb-sum-line{ font-size:10px; color:var(--text-dim); line-height:1.6; }
.tb-sum-line b{ color:var(--text-main); font-weight:600; }
.tb-sum-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-top:6px; text-align:center; }
.tb-sum-stats span{ font-size:11px; font-weight:700; color:var(--text-main); background:rgba(255,255,255,.04); border-radius:4px; padding:3px 0; }
.tb-sum-stats i{ display:block; font-style:normal; font-size:7px; font-weight:400; color:var(--text-dim); text-transform:uppercase; }
.tb-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.tb-type-row{ display:flex; align-items:center; gap:6px; font-size:9px; padding:2px 4px; border-radius:4px; }
.tb-type-row.bad{ background:rgba(240,96,92,.1); }
.tb-textarea{
  width:100%; box-sizing:border-box; min-height:260px; resize:vertical; background:#0b0b10; border:1px solid var(--line-bright);
  border-radius:6px; color:var(--text-main); font-family:ui-monospace,Consolas,monospace; font-size:11px; line-height:1.5; padding:10px;
}
@media (max-width:820px){
  .tb-grid{ grid-template-columns:minmax(0,1fr); }
  .tb-sum-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .tb-slots{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tb-sum-grid{ grid-template-columns:minmax(0,1fr); }
  .tb-num-grid{ grid-template-columns:repeat(2,1fr); }
  .tb-toolbar .btn.tb-tool{ flex:1 1 40%; }
}

/* ---- PAGES DE CONTENU (guide.html, faq.html, notes-de-mise-a-jour.html) : pages de texte statiques,
   même gabarit que la page Confidentialité, avec un pied de page de liens entre elles. ---- */
.doc-page{ max-width:720px; margin:0 auto; padding:32px 20px 60px; }
.doc-page h1{ font-family:var(--font-display); font-size:22px; color:var(--accent-light); margin:0 0 4px; }
.doc-page .doc-lead{ font-size:14px; line-height:1.7; color:var(--text-main); opacity:.9; margin:10px 0 0; }
.doc-page h2{ font-size:14px; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin:32px 0 10px; display:flex; align-items:center; gap:8px; }
.doc-page h3{ font-size:13px; color:var(--accent-light); margin:20px 0 6px; display:flex; align-items:center; gap:8px; }
.doc-page h4{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 4px; display:flex; align-items:center; gap:6px; }
.doc-page p, .doc-page li{ font-size:13px; line-height:1.7; color:var(--text-main); opacity:.9; }
.doc-page ul, .doc-page ol{ margin:8px 0; padding-left:20px; }
.doc-page li{ margin-bottom:6px; }
.doc-page a:not(.btn){ color:var(--accent-light); }
.doc-page table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:12px; }
.doc-page th, .doc-page td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--text-main); vertical-align:top; }
.doc-page th{ color:var(--text-dim); text-transform:uppercase; font-size:10px; letter-spacing:.5px; }
.doc-back{ display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; }
.doc-footer{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:40px; padding-top:16px; border-top:1px solid var(--line); }
.doc-footer a{ font-size:12px; color:var(--text-dim); }
.doc-footer a[aria-current="page"]{ color:var(--accent-light); }