/* =========================================================
   Bestiaire — styles additionnels (s'appuie sur style.css)
   ========================================================= */

/* ---------- Tabs de catégorie ---------- */
.dex-tabs{
    display:flex; gap:.6rem; flex-wrap:wrap;
}
.dex-tab{
    flex:1; min-width:120px;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1rem; border-radius:14px;
    border:1px solid var(--border-color);
    background:rgba(255,255,255,.03); color:var(--text-muted);
    font-family:var(--font-heading); font-weight:700; font-size:.95rem;
    cursor:pointer; transition:all .2s ease;
}
.dex-tab .tab-emoji{ font-size:1.1rem; }
.dex-tab .tab-count{
    font-family:var(--font-body); font-weight:600; font-size:.72rem;
    color:var(--text-muted); background:rgba(255,255,255,.06);
    padding:.1rem .5rem; border-radius:999px;
}
.dex-tab:hover{ border-color:var(--border-color-active); color:var(--text-main); }
.dex-tab.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:var(--bg-darker); border-color:transparent;
    box-shadow:0 4px 14px rgba(0,242,254,.35);
}
.dex-tab.active .tab-count{ background:rgba(4,13,26,.25); color:var(--bg-darker); }

/* ---------- Filtre niveau custom ---------- */
.dex-filter-level {
    position: relative;
}
.dex-level-btn {
    width: 100%; height: 100%; max-width: 260px;
    padding: .75rem 1rem; border-radius: 12px;
    border: 1px solid var(--border-color); background: rgba(255,255,255,.03);
    color: var(--text-main); font-family: var(--font-body); font-size: .9rem;
    outline: none; cursor: pointer; transition: border-color .2s ease;
    display: flex; align-items: center; gap: .5rem;
    white-space: nowrap;
}
.dex-level-btn > span:not(.dex-level-chevron) {
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dex-level-btn:hover, .dex-level-btn.open { border-color: var(--border-color-active); }
.dex-level-btn.active { color: var(--primary); border-color: var(--border-color-active); }
.dex-level-chevron { margin-left: auto; font-size: .72rem; color: var(--text-muted); transition: transform .2s ease; }
.dex-level-btn.open .dex-level-chevron { transform: rotate(180deg); }

.dex-level-panel {
    position: absolute; top: calc(100% + 6px); left: auto; right: 0;
    background: var(--bg-dark); border: 1px solid var(--border-color-active);
    border-radius: 14px; padding: .75rem;
    box-shadow: var(--shadow-lg);
    z-index: 100; min-width: 180px;
    display: none;
}
.dex-level-panel.open { display: block; }

.dex-level-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem;
}
.dex-level-pill {
    padding: .45rem 0; border-radius: 8px;
    border: 1px solid var(--border-color); background: rgba(255,255,255,.03);
    color: var(--text-muted); font-family: var(--font-heading); font-weight: 700;
    font-size: .85rem; cursor: pointer; transition: all .15s ease;
    text-align: center; user-select: none;
}
.dex-level-pill:hover { border-color: var(--border-color-active); color: var(--text-main); }
.dex-level-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--bg-darker); border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,242,254,.35);
}
/* Mode "exclue" (2e clic) : retire du résultat toute créature disponible sous
   ce créneau/cette météo (ex: exclure Ensoleillé pour ne garder que la pluie). */
.dex-level-pill.exclusive {
    background: linear-gradient(135deg, var(--gold), var(--accent));
    color: var(--bg-darker); border-color: transparent;
    box-shadow: 0 2px 10px rgba(255,209,102,.45);
}
/* Pastille "verrouillée" par le raccourci "Actif maintenant" : c'est l'horloge
   qui l'a activée, pas un clic — désactivée tant que le mode direct tourne. */
.dex-level-pill:disabled {
    cursor: not-allowed; opacity: .85;
}
.dex-level-all {
    grid-column: 1 / -1; font-size: .78rem; letter-spacing: .02em;
    margin-bottom: .2rem;
}

/* ---------- Filtre "Disponibilité" (actif maintenant / horaire / météo) ---------- */
.dex-avail-panel { min-width: 250px; max-width: calc(100vw - 2rem); }
.dex-avail-now-btn {
    width: 100%; margin-bottom: .6rem;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem 0; border-radius: 8px;
    border: 1px solid var(--border-color); background: rgba(255,255,255,.03);
    color: var(--text-muted); font-family: var(--font-heading); font-weight: 700;
    font-size: .8rem; cursor: pointer; transition: all .15s ease;
}
.dex-avail-now-btn:hover { border-color: var(--border-color-active); color: var(--text-main); }
.dex-avail-now-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--bg-darker); border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,242,254,.35);
}
.dex-avail-group-label {
    font-size: .68rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .04em; margin: .5rem 0 .35rem;
}
.dex-avail-group-label:first-of-type { margin-top: 0; }
.dex-level-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dex-level-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dex-level-grid-6 { grid-template-columns: repeat(6, 1fr); }
/* Libellés plus longs (Crépuscule, Arc-en-ciel) dans des colonnes étroites —
   réduit légèrement la taille et resserre l'interligne plutôt que de laisser
   le texte s'écraser sur 3 lignes. */
.dex-avail-panel .dex-level-pill {
    padding: .4rem .2rem; font-size: .75rem; line-height: 1.15;
}

/* ---------- Filtre "Pack" (Commun / Événements permanents / Saisons) ---------- */
.dex-pack-panel {
    min-width: 240px; max-width: min(340px, calc(100vw - 2rem));
}
.dex-pack-panel .dex-level-grid {
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.dex-pack-panel .dex-level-grid .dex-level-pill {
    flex: 0 1 auto; max-width: 100%; padding: .4rem .7rem;
    white-space: normal; line-height: 1.3;
}
.dex-pack-past-toggle {
    width: 100%; margin-top: .5rem;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .4rem 0; border-radius: 8px; border: none; background: none;
    color: var(--text-muted); font-family: var(--font-body); font-size: .78rem;
    cursor: pointer; transition: color .15s ease;
}
.dex-pack-past-toggle:hover { color: var(--text-main); }
.dex-pack-past-toggle i { font-size: .68rem; transition: transform .2s ease; }
.dex-pack-past-toggle.open i { transform: rotate(180deg); }
#dex-pack-past-grid { margin-top: .4rem; }

/* ---------- Barre de recherche / filtres ---------- */
.dex-controls{
    display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
}
.dex-search{ position:relative; flex:0 0 120px; transition:flex-basis .3s ease, flex-grow .3s ease; }
.dex-search.expanded{ flex:1 1 240px; }
.dex-search i{
    position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
    color:var(--text-muted); cursor:pointer;
}
.dex-search input{
    width:100%; padding:.6rem 2.2rem .6rem 2.2rem; border-radius:12px;
    border:1px solid var(--border-color); background:rgba(255,255,255,.03);
    color:var(--text-main); font-family:var(--font-body); font-size:.85rem;
    outline:none; transition:border-color .2s ease;
}
.dex-search input::placeholder{ color:var(--text-muted); }
.dex-search input:focus{ border-color:var(--border-color-active); }
.dex-search-clear{
    position:absolute; right:1.75em; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:.3rem;
    color:var(--text-muted); font-size:.85rem; line-height:1;
    transition:color .15s ease;
}
.dex-search-clear:hover{ color:var(--primary); }

.controls-sep{ width:1px; height:1.4rem; background:var(--line); flex-shrink:0; }
.controls-sep:first-of-type{ margin-left:auto; }

.dex-filter{
    flex:0 0 auto;
}
.dex-filter select{
    width:100%; padding:.75rem 1rem; border-radius:12px;
    border:1px solid var(--border-color); background:rgba(255,255,255,.03);
    color:var(--text-main); font-family:var(--font-body); font-size:.9rem;
    outline:none; cursor:pointer; transition:border-color .2s ease;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9eb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 1rem center; background-size:1rem;
}
.dex-filter select:focus{ border-color:var(--border-color-active); }
.dex-filter select option{ background:var(--bg-dark); color:var(--text-main); }

/* ---------- Grille de créatures ---------- */
.dex-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1.1rem;
}
.dex-card{
    background:rgba(255,255,255,.03); border:1px solid var(--border-color);
    border-radius:18px; padding:1.1rem; display:flex; flex-direction:column;
    gap:.55rem; box-shadow:var(--shadow-sm); transition:all .25s cubic-bezier(.2,.8,.2,1);
    position:relative; cursor:pointer;
}
.dex-card:hover{
    transform:translateY(-5px); border-color:var(--border-color-active);
    background:rgba(0,242,254,.05); box-shadow:var(--shadow-md), 0 0 14px rgba(0,242,254,.15);
    /* transform crée un nouveau contexte d'empilement : sans z-index explicite
       ici, le flyout qualité (z-index interne à ce contexte) resterait quand
       même sous la carte suivante dans la grille (qui vient après dans le
       DOM). On fait remonter toute la carte survolée au-dessus de ses voisines. */
    z-index:5;
}

.dex-card-badge{
    position:absolute; top:.7rem; right:.7rem; z-index:2;
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.2rem .55rem; border-radius:999px;
    font-size:.68rem; font-weight:800; color:#fff;
    text-transform:uppercase; letter-spacing:.3px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.dex-card-level{
    position:absolute; top:.7rem; left:.7rem; z-index:2;
    background:rgba(4,13,26,.55); backdrop-filter:blur(4px);
    color:var(--gold); font-family:var(--font-heading); font-weight:800;
    font-size:.7rem; padding:.2rem .5rem; border-radius:999px;
    border:1px solid rgba(255,209,102,.3);
}

.dex-card-trophy{
    position:absolute; bottom:.65rem; right:.65rem; z-index:2;
    font-size:.95rem; line-height:1;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.dex-card-trophy img{ width:20px; height:20px; display:block; }

/* Rappel en continu de la qualité déjà obtenue — en plus (pas à la place)
   du mini-menu interactif au survol. Absolu comme .dex-card-level/-trophy :
   ne change donc jamais la taille de la carte. Lecture seule (le picker
   complet reste dans le flyout au survol / la fiche détaillée). */
.dex-card-quality-badge{
    position:absolute; bottom:.65rem; left:.65rem; z-index:2;
    display:inline-flex; gap:1px;
    background:rgba(4,13,26,.55); backdrop-filter:blur(4px);
    border-radius:999px; padding:.2rem .45rem;
    font-size:.62rem; line-height:1;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.dex-card-quality-badge i{ color:rgba(255,255,255,.2); }
.dex-card-quality-badge i.active{ color:var(--gold); }

/* Mini-menu "qualité obtenue" — apparaît sur le côté au survol de la carte
   (desktop uniquement, voir aussi le bloc équivalent dans la fiche détaillée
   pour le tactile, où le survol n'existe pas). Un padding invisible (au lieu
   d'un margin) comble la zone entre la carte et le menu : avec un margin, le
   curseur sort du survol de .dex-card en traversant l'espace vide et le
   menu se ferme avant d'être atteint — le padding fait partie de la boîte
   du menu, donc du survol, sans décaler son contenu visuellement. */
.dex-card-quality-flyout{
    position:absolute; top:.7rem; left:100%; z-index:50;
    padding-left:.5rem;
    opacity:0; pointer-events:none;
    transition:opacity .15s ease;
}
.dex-card:hover .dex-card-quality-flyout,
.dex-card-quality-flyout:hover{
    opacity:1; pointer-events:auto;
}
.dex-card-quality-flyout-inner{
    display:flex; align-items:stretch; gap:.4rem;
    background:var(--bg-dark); border:1px solid var(--border-color-active);
    border-radius:12px; padding:.5rem .4rem; box-shadow:var(--shadow-lg);
    white-space:nowrap;
}
/* Texte incliné à 90°, le long de la bordure droite du panneau — réduit
   la largeur prise par le libellé (sinon horizontal au-dessus des étoiles). */
.dex-card-quality-label{
    writing-mode:vertical-rl;
    font-size:.6rem; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.05em; white-space:nowrap;
    border-left:1px solid var(--border-color); padding-left:.4rem;
    display:flex; align-items:center; justify-content:center;
}
.dex-card-quality-content{
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
/* column-reverse/row-reverse : compense l'ordre DOM inversé (5→1, voir
   starPickerHTML dans dex.js) pour un affichage visuel identique (1 en haut
   ou à gauche, 5 en bas ou à droite) tout en permettant le survol en
   cascade ci-dessous. */
.dex-star-row{ display:flex; flex-direction:column-reverse; align-items:center; gap:.3rem; }
.dex-star-row-lg{ flex-direction:row-reverse; gap:.35rem; }
.dex-star-btn{
    background:none; border:none; cursor:pointer; padding:.1rem;
    color:var(--text-muted); font-size:1rem; line-height:1;
    transition:color .15s ease, transform .1s ease;
}
.dex-star-row-lg .dex-star-btn{ font-size:1.35rem; }
.dex-star-btn.active{ color:var(--gold); }
/* Survol en cascade : survoler l'étoile N surligne aussi toutes celles qui
   la précèdent visuellement (frères suivants en DOM, grâce à l'ordre
   inversé), pour prévisualiser "voici ce que ça donnera au clic". Teinte
   légèrement moins vive que .active pour rester lisible comme un aperçu,
   pas encore une valeur enregistrée. */
.dex-star-row:hover .dex-star-btn{ color:var(--text-muted); }
/* Qualifiées par ".dex-star-row:hover" en plus (spécificité 4/5, contre 3
   pour la règle de reset ci-dessus) : sans ça, l'étoile survolée elle-même
   perdait face au reset (même s'il vient avant dans la feuille, il est plus
   spécifique), alors que les frères suivants gagnaient — l'étoile pointée
   restait grise pendant que celles d'avant s'allumaient. */
.dex-star-row:hover .dex-star-btn:hover,
.dex-star-row:hover .dex-star-btn:hover ~ .dex-star-btn{
    color:rgba(255,209,102,.75); transform:scale(1.1);
}
.dex-star-row:hover .dex-star-btn:hover{ transform:scale(1.2); }

/* Raccourci +/- pour saisir les captures xdt-trophy sans quitter xdt-dex. */
.dex-capture-stepper{
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    border-top:1px solid var(--border-color); padding-top:.35rem; width:100%;
}
.dex-capture-stepper-wrap-lg .dex-capture-stepper{
    flex-direction:row; border-top:none; padding-top:0; width:auto;
    gap:.5rem; margin-top:.5rem;
}
.dex-capture-count{
    font-family:var(--font-heading); font-weight:700; font-size:.75rem;
    color:var(--text-main); cursor:pointer;
}
.dex-capture-count:hover{ color:var(--primary); }
.dex-capture-stepper-wrap-lg .dex-capture-count{ font-size:1rem; min-width:1.4rem; text-align:center; }
.dex-capture-count-input{
    font-family:var(--font-heading); font-weight:700; font-size:.75rem;
    color:var(--text-main); background:var(--bg-darker); border:1px solid var(--primary);
    border-radius:.3rem; width:2.6rem; text-align:center; padding:.05rem 0;
}
.dex-capture-stepper-wrap-lg .dex-capture-count-input{ font-size:1rem; width:3.2rem; }
.dex-capture-btn{
    background:none; border:none; cursor:pointer; padding:.15rem;
    color:var(--text-muted); font-size:.68rem; line-height:1;
    transition:color .15s ease, transform .1s ease;
}
.dex-capture-stepper-wrap-lg .dex-capture-btn{ font-size:.9rem; }
.dex-capture-btn:hover{ color:var(--primary); transform:scale(1.15); }
.dex-capture-btn:disabled{ opacity:.3; cursor:not-allowed; }
.dex-capture-btn:disabled:hover{ color:var(--text-muted); transform:none; }

@media (max-width:900px){
    /* Pas assez de place sur le côté en dessous de cette largeur (et pas de
       survol fiable au tactile) — le mini-menu de la fiche détaillée suffit. */
    .dex-card-quality-flyout{ display:none; }
}

.dex-card-image{
    width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 40%, rgba(0,242,254,.08), transparent 70%);
    border-radius:14px; overflow:hidden; margin-top:.3rem;
}
.dex-card-image img{
    max-width:82%; max-height:82%; object-fit:contain;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
    transition:transform .3s ease;
}
.dex-card:hover .dex-card-image img{ transform:scale(1.08) rotate(-2deg); }
.dex-card-image .img-fallback{
    font-size:2.4rem; opacity:.35;
}
.dex-card-image .img-fallback-emoji{
    font-size:4rem; opacity:.4; filter:grayscale(.6);
}

.dex-card-name{
    font-family:var(--font-heading); font-weight:700; font-size:1rem;
    color:var(--text-highlight); text-align:center; line-height:1.25;
}
.dex-card-name .name-en-fallback{
    display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem;
    color:var(--text-muted); font-style:italic; margin-top:.15rem;
}

.dex-card-location{
    display:flex; align-items:center; gap:.4rem; justify-content:center;
    font-size:.72rem; color:var(--text-muted); text-align:center;
}
.dex-card-location i{ color:var(--secondary); flex-shrink:0; }

/* Une ligne par type d'info (horaire / météo / ombre), plutôt qu'un seul
   flux mélangé où les pastilles se retrouvaient dans un ordre en vrac. */
.dex-card-meta-row{
    display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
}
.dex-card-meta-row span{
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.68rem; color:var(--text-muted);
    background:rgba(255,255,255,.04); padding:.22rem .55rem; border-radius:999px;
}
.dex-card-meta-row .meta-schedule i{ color:var(--gold); }
.dex-card-meta-row .meta-weather i{ color:var(--secondary); }
.dex-card-meta-row .meta-shadow i{ color:var(--accent); }

.dex-results-bar{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:.5rem;
}
.dex-results-count{ font-family:var(--font-heading); color:var(--text-muted); font-size:.9rem; }
.dex-results-count strong{ color:var(--primary); }

.dex-loading{
    text-align:center; color:var(--text-muted); padding:3rem 1rem;
    display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.dex-loading i{ font-size:1.8rem; color:var(--primary); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Pastilles horaire/météo (surlignage du créneau actif) ---------- */
.meta-pill{
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.68rem; color:var(--text-muted);
    background:rgba(255,255,255,.04); padding:.22rem .55rem; border-radius:999px;
    transition:all .2s ease;
}
.meta-pill.meta-schedule i{ color:var(--gold); }
.meta-pill.meta-weather i{ color:var(--secondary); }
.meta-pill.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:var(--bg-darker); font-weight:700; box-shadow:0 2px 8px rgba(0,242,254,.35);
}
.meta-pill.active i{ color:var(--bg-darker); }

.dex-card-now{
    align-self:center;
    display:inline-flex; align-items:center; gap:.3rem;
    background:rgba(0,230,118,.15); border:1px solid rgba(0,230,118,.4);
    color:#00ff87; font-size:.62rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.3px; padding:.2rem .5rem; border-radius:999px;
}
.dex-card.available-now{
    border-color:rgba(0,230,118,.45);
    box-shadow:0 0 0 1px rgba(0,230,118,.25), var(--shadow-sm);
}

/* ---------- Widget horloge (header) ---------- */
.dex-clock{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1rem; border-radius:12px;
    border:1px solid var(--border-color); background:rgba(255,255,255,.03);
    color:var(--text-main); font-size:.85rem; white-space:nowrap;
}
.dex-clock i{ color:var(--gold); }

/* ---------- Modale météo ---------- */
.modal {
    position: fixed; inset: 0;
    background: rgba(4, 13, 26, 0.8); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; animation: fadeIn 0.25s ease-out;
}
.modal-content {
    background: var(--bg-card); border: 1px solid var(--border-color-active);
    border-radius: 24px; padding: 2rem; max-width: 460px; width: 90%;
    box-shadow: var(--shadow-lg);
    animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleUp { from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.modal-header h3 { font-family:var(--font-heading); font-size:1.2rem; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:.5rem; }
.modal-eyebrow { font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); opacity:.75; margin-bottom:.2rem; }
.modal-close { background:transparent; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; transition:color .2s; }
.modal-close:hover { color:var(--danger); }
.modal-body p { color:var(--text-muted); margin-bottom:1.2rem; line-height:1.5; font-size:.85rem; }

/* ---------- Modale "fiche détaillée" (fluffy-bassoon#4) ---------- */
.dex-entry-modal-content { max-width: 420px; position: relative; }
.dex-entry-modal-content .modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }

.entry-modal-header {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; padding-right: 1.6rem;
}
.entry-modal-image {
    width: 84px; height: 84px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(0,242,254,.08), transparent 70%);
    border-radius: 14px;
}
.entry-modal-image img { max-width: 82%; max-height: 82%; object-fit: contain; }
.entry-modal-image .img-fallback-emoji { font-size: 2.4rem; opacity: .4; filter: grayscale(.6); }
.entry-modal-pack-badge{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.2rem .55rem; border-radius:999px;
    font-size:.68rem; font-weight:800; color:#fff;
    text-transform:uppercase; letter-spacing:.3px;
    box-shadow:0 2px 8px rgba(0,0,0,.35); margin-bottom:.4rem;
}
.entry-modal-name {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
    color: var(--text-highlight); margin-bottom: .4rem;
}
.entry-modal-name .name-en-fallback {
    display: block; font-family: var(--font-body); font-weight: 500; font-size: .68rem;
    color: var(--text-muted); font-style: italic; margin-top: .1rem;
}
.entry-modal-level {
    font-family: var(--font-heading); font-weight: 700; font-size: .72rem;
    color: var(--gold); margin-left: .4rem;
}

.entry-section { margin-bottom: 1.2rem; }
.entry-section:last-child { margin-bottom: 0; }
.entry-section h4 {
    font-family: var(--font-heading); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--primary); margin-bottom: .5rem;
}
.entry-section p {
    display: flex; align-items: center; gap: .5rem;
    color: var(--text-muted); font-size: .82rem; margin-bottom: .4rem; line-height: 1.4;
}
.entry-section p i { color: var(--secondary); flex-shrink: 0; width: 1em; }
.entry-empty { font-size: .8rem; color: var(--text-muted); font-style: italic; }
.entry-ingredients { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.entry-ingredients li {
    background: var(--surface-alt, rgba(255,255,255,.06)); border-radius: 6px;
    padding: .3rem .6rem; font-size: .82rem; color: var(--text-muted);
}

.entry-medal-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border-color);
    font-size: .82rem; margin-bottom: .4rem;
}
.entry-medal-row:last-child { margin-bottom: 0; }
.entry-medal-row.reached { border-color: rgba(0,230,118,.4); background: rgba(0,230,118,.08); }
.entry-medal-emoji { font-size: 1rem; display: inline-flex; align-items: center; }
.entry-medal-emoji img { width: 18px; height: 18px; }
.entry-medal-label { color: var(--text-main); font-weight: 600; }
.entry-medal-threshold { color: var(--text-muted); margin-left: auto; }
.entry-medal-reached { color: #00ff87; }

/* ---------- Barre météo façon jeu (icône + heure, lecture seule) ---------- */
.weather-bar{
    display:flex; align-items:center; justify-content:center; gap:.3rem;
    background:linear-gradient(180deg, rgba(0,242,254,.12), rgba(0,242,254,.03));
    border:1px solid var(--border-color); border-radius:16px;
    padding:1rem .6rem;
}
.weather-bar-item{
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    border-radius:10px;
    padding:.3rem .5rem;
    font-family:var(--font-body);
}
.weather-bar-icon{ font-size:1.5rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.weather-bar-hour{ font-family:var(--font-heading); font-weight:700; font-size:.8rem; color:var(--text-main); }
.weather-bar-item.is-current{ background:rgba(0,242,254,.1); border-radius:12px; }
.weather-bar-item.is-current .weather-bar-hour{ color:var(--primary); }
.weather-bar-sep{
    width:1px; align-self:stretch; margin:0 .3rem;
    background:repeating-linear-gradient(to bottom, var(--border-color) 0 4px, transparent 4px 8px);
}

@media (max-width:600px){
    .dex-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.7rem; }
    .dex-tab{ min-width:100px; font-size:.82rem; padding:.7rem .6rem; }
    .dex-card{ padding:.8rem; border-radius:14px; }
    .weather-bar{ gap:.1rem; padding:.8rem .3rem; }
    .weather-bar-icon{ font-size:1.2rem; }
    .weather-bar-hour{ font-size:.7rem; }
}