/* xdt-trophy/style.css — styles spécifiques trophées (shared.css chargé en premier) */

:root {
    --bronze: #cd7f32;
    --bronze-glow: rgba(205,127,50,.4);
    --silver: #a8b8c8;
    --silver-glow: rgba(168,184,200,.4);
    --medal-gold: #ffd166;
    --medal-gold-glow: rgba(255,209,102,.4);
    --platinum: #e0f0ff;
    --platinum-glow: rgba(224,240,255,.5);
    /* Variables undefined dans le scope outil, nécessaires pour l'animation platinum */
    --teal: #49e8d8;
    --violet: #8f83f2;
    --line: rgba(140,160,200,0.14);
}

.app-container{
    max-width:1100px; margin:0 auto; padding:2rem 1.5rem;
    display:flex; flex-direction:column; gap:1.5rem;
}
/* Bord à bord (bouton, ordinateur uniquement) — voir app.js initWideModeToggle() */
body.wide-mode .app-container{ max-width:none; }

.trophy-wide-toggle{ display:none; }
@media (min-width:901px){
    .trophy-wide-toggle{ display:inline-flex; }
    body.wide-mode .trophy-wide-toggle{ background:var(--teal); color:var(--abyss-0); border-color:transparent; }
}

/* --- Overrides des styles partagés --- */
.logo-icon{ color:var(--gold); filter:drop-shadow(0 0 8px var(--medal-gold-glow)); }
header h1{ background:linear-gradient(135deg, var(--gold), var(--primary)); background-clip: text; }
.btn-success{ background:rgba(0,230,118,.15); border:1px solid rgba(0,230,118,.4); color:var(--success); }
.empty-state{ grid-column:1/-1; }

/* ---------- Banner (fond carte sombre) ---------- */
.banner{
    background:var(--bg-card); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-radius:16px;
    padding:1rem 1.5rem; display:flex; align-items:center;
    justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.banner.hidden{ display:none; }
.banner-content{ display:flex; align-items:center; gap:.8rem; }
.banner-icon{ font-size:1.4rem; color:var(--secondary); }
.banner-actions{ display:flex; gap:.6rem; }

/* ---------- Progress section (flex) ---------- */
.progress-section{
    background:var(--bg-card); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-radius:20px;
    padding:1.5rem; box-shadow:var(--shadow-md);
    display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.progress-info{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:.6rem; }
.progress-stats{ display:flex; justify-content:space-between; align-items:baseline; }
.progress-title{ font-family:var(--font-heading); font-weight:700; font-size:1rem; }
.progress-number{ font-family:var(--font-heading); font-weight:800; font-size:1.1rem; color:var(--gold); }
.progress-track{ height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.progress-fill{
    height:100%; border-radius:999px;
    background:linear-gradient(90deg, var(--bronze), var(--medal-gold), var(--primary));
    transition:width .4s ease;
}
.quick-stats{ display:flex; gap:.8rem; flex-wrap:wrap; }
.stat-card{
    background:rgba(255,255,255,.04); border:1px solid var(--border-color);
    border-radius:12px; padding:.6rem 1rem; text-align:center; min-width:64px;
}
.stat-value{ display:block; font-family:var(--font-heading); font-weight:800; font-size:1.3rem; color:var(--text-highlight); }
.stat-label{ display:block; font-size:.72rem; color:var(--text-muted); margin-top:.1rem; white-space:nowrap; }
.stat-platinum-label{ color:var(--platinum); }

.medal-icon{ width:14px; height:14px; vertical-align:-2px; object-fit:contain; }
.medal-icon-lg{ width:18px; height:18px; vertical-align:-4px; }

/* ---------- Tabs ---------- */
.tabs-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.trophy-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;
}
.trophy-tab:hover{ border-color:var(--border-color-active); color:var(--text-main); }
.trophy-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);
}
.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;
}
.trophy-tab.active .tab-count{ background:rgba(4,13,26,.25); color:var(--bg-darker); }

/* ---------- Controls ---------- */
.controls-section{ gap:.6rem; }
.dex-controls{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.controls-inline-label{
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:.3rem;
}
.controls-inline-label i{ font-size:.6rem; }
.controls-sep{ width:1px; height:1.4rem; background:var(--line); flex-shrink:0; }
.controls-sep:first-of-type{ margin-left:auto; }

.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); pointer-events:none; }
.dex-search input{
    width:100%; padding:.6rem .75rem .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-filter{ flex:0 0 auto; }
.dex-filter select{
    padding:.6rem .75rem; 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); }

.dex-filter-level{ position:relative; }
.dex-level-btn{
    padding:.6rem .85rem; 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; cursor:pointer; transition:border-color .2s ease;
    display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.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: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; }

#trophy-level-panel,
#trophy-zone-panel,
#trophy-medal-panel,
#trophy-sort-panel{ left:auto; right:0; }
#trophy-sort-grid{ display:flex; flex-direction:column; gap:.3rem; min-width:160px; }
#trophy-medal-grid{ display:flex; flex-direction:column; gap:.3rem; min-width:140px; }
.dex-level-grid-flow{
    display:flex; flex-wrap:wrap; gap:.4rem; max-width:280px;
}
.dex-level-grid-flow .dex-level-pill{ flex:0 0 auto; padding:.4rem .7rem; }
.dex-level-grid-flow .dex-level-all{ flex-basis:100%; }

.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;
}
.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);
}
.dex-level-all{ grid-column:1/-1; font-size:.78rem; letter-spacing:.02em; margin-bottom:.2rem; }

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

/* ---------- Grille de cartes trophée ---------- */
.trophy-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1.1rem; }

.trophy-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:.65rem; box-shadow:var(--shadow-sm); transition:all .25s ease; position:relative;
}
.trophy-card:hover{ transform:translateY(-3px); border-color:var(--border-color-active); }

.trophy-card.platinum{
    border-color:transparent; position:relative; animation:masterNeon 3s ease-in-out infinite;
}
.trophy-card.platinum::before{
    content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
    background:linear-gradient(135deg, var(--teal), var(--violet), var(--teal));
    background-size:200% 200%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:masterBorderSpin 3s linear infinite; z-index:0; pointer-events:none;
}
@keyframes masterBorderSpin{
    0%  { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}
@keyframes masterNeon{
    0%,100%{
        box-shadow:0 0 8px rgba(73,232,216,.35),0 0 24px rgba(73,232,216,.2),0 0 48px rgba(143,131,242,.15),var(--shadow-md);
    }
    50%{
        box-shadow:0 0 12px rgba(73,232,216,.7),0 0 36px rgba(73,232,216,.4),0 0 72px rgba(143,131,242,.3),var(--shadow-md);
    }
}

.card-level-badge{
    position:absolute; top:.7rem; left:.7rem;
    background:rgba(4,13,26,.55); backdrop-filter:blur(4px);
    color:var(--gold); font-family:var(--font-heading); font-weight:800;
    font-size:.68rem; padding:.2rem .5rem; border-radius:999px;
    border:1px solid rgba(255,209,102,.3);
}

.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;
}
.card-image img{
    max-width:80%; max-height:80%; object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); transition:transform .3s ease;
}
.trophy-card:hover .card-image img{ transform:scale(1.07) rotate(-1deg); }

.card-name{
    font-family:var(--font-heading); font-weight:700; font-size:.95rem;
    color:var(--text-highlight); text-align:center; line-height:1.3;
}

/* ---------- Barre de progression médaille ---------- */
.medal-bar-wrap{ display:flex; flex-direction:column; gap:.35rem; }
.medal-bar-track{ position:relative; height:6px; background:rgba(255,255,255,.06); border-radius:999px; overflow:visible; }
.medal-bar-fill{ height:100%; border-radius:999px; transition:width .35s ease; background:linear-gradient(90deg, var(--bronze), var(--medal-gold)); }
.medal-bar-fill.full{ background:linear-gradient(90deg, var(--medal-gold), var(--platinum)); }

.medal-markers{ position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; }
.medal-marker{
    position:absolute; transform:translateX(-50%);
    width:10px; height:10px; border-radius:50%;
    border:2px solid var(--bg-darker);
    transition:background .3s ease, box-shadow .3s ease;
}
.medal-marker.reached{ box-shadow:0 0 6px currentColor; }
.medal-marker[data-tier="apprentice"]{ background:var(--bronze); color:var(--bronze); }
.medal-marker[data-tier="expert"]    { background:var(--medal-gold); color:var(--medal-gold); }
.medal-marker[data-tier="master"]    { background:var(--platinum); color:var(--platinum); }
.medal-marker:not(.reached){ background:rgba(255,255,255,.15); color:rgba(255,255,255,.15); }

.medal-info{ display:flex; justify-content:space-between; align-items:center; font-size:.72rem; color:var(--text-muted); }
.medal-current{ font-family:var(--font-heading); font-weight:700; font-size:.8rem; }
.medal-current.bronze-text  { color:var(--bronze); }
.medal-current.gold-text    { color:var(--medal-gold); }
.medal-current.platinum-text{ color:var(--platinum); }
.medal-current.none-text    { color:var(--text-muted); }

/* ---------- Input captures ---------- */
.capture-row{ display:flex; align-items:center; gap:.5rem; }
.capture-btn{
    width:28px; height:28px; border-radius:8px; border:1px solid var(--border-color);
    background:rgba(255,255,255,.05); color:var(--text-main); font-size:1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .15s ease; flex-shrink:0; font-family:var(--font-heading); font-weight:700;
}
.capture-btn:hover{ border-color:var(--border-color-active); background:rgba(0,242,254,.1); color:var(--primary); }
.capture-btn:disabled{ opacity:.3; cursor:not-allowed; }
.capture-btn:disabled:hover{ border-color:var(--border-color); background:rgba(255,255,255,.05); color:var(--text-main); }
.capture-input{
    flex:1; text-align:center; padding:.35rem .4rem; border-radius:8px;
    border:1px solid var(--border-color); background:rgba(255,255,255,.03);
    color:var(--text-main); font-family:var(--font-heading); font-weight:700; font-size:.95rem;
    outline:none; transition:border-color .2s ease; width:100%;
}
.capture-input:focus{ border-color:var(--border-color-active); }
.capture-next{ font-size:.68rem; color:var(--text-muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capture-next .next-val{ color:var(--primary); font-weight:700; }

.no-data-hint{ font-size:.68rem; color:var(--text-muted); text-align:center; font-style:italic; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; background:rgba(4,13,26,.85); display:flex; align-items:center; justify-content:center; z-index:9000; padding:1rem; }
.modal.hidden{ display:none; }
.modal-content{ background:var(--bg-dark); border:1px solid var(--border-color-active); border-radius:20px; padding:2rem; max-width:520px; width:100%; box-shadow:var(--shadow-lg); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.modal-header h3{ font-family:var(--font-heading); font-weight:700; font-size:1.2rem; }
.modal-close{ background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; }
.modal-close:hover{ color:var(--text-main); }
.modal-body p{ color:var(--text-muted); margin-bottom:1rem; font-size:.9rem; }
.share-url-box{ display:flex; gap:.6rem; }
.share-url-box input{
    flex:1; 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:.85rem; outline:none;
}

@media(max-width:600px){
    .trophy-grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:.7rem; }
    .quick-stats{ gap:.5rem; }
    .stat-card{ padding:.5rem .7rem; min-width:54px; }
}