/* DemonListEC — capa visual estilo TSL v3. Cargar al final. */
:root{--color-background:#08080a;--color-background-hover:#14151a;--dl-panel:#0c0d10;--dl-line:rgba(255,255,255,.1);--dl-blue:#2563eb;--dl-blue-hi:#60a5fa;--dl-text:#f1f5f9;--dl-mute:#94a3b8}
body{background:#08080a;color:var(--dl-text)}
.dl-header{display:block!important;position:sticky;top:0;z-index:50;background:rgba(8,8,10,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--dl-line)}
.dl-header::before{content:"";display:block;height:3px;background:linear-gradient(90deg,#ffd100 50%,#0033a0 50% 75%,#ce1126 75%)}
.dl-bar{max-width:80rem;margin:0 auto;height:67px;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dl-left,.dl-right,.dl-nav{display:flex;align-items:center;gap:.25rem}
.dl-left{gap:1.5rem}
.dl-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff}
.dl-logo img{width:32px;height:32px;border-radius:8px;border:1px solid var(--dl-line)}
.dl-logo b{font:700 1rem "Lexend Deca",sans-serif}
.dl-ver{font-size:.65rem;color:var(--dl-blue-hi);border:1px solid rgba(59,130,246,.35);background:rgba(59,130,246,.1);padding:.1rem .4rem;border-radius:4px}
.dl-tab{color:var(--dl-mute);text-decoration:none;font:700 .8rem "Lexend Deca",sans-serif;padding:.55rem .8rem;border-radius:8px;background:none;border:1px solid transparent;cursor:pointer}
.dl-tab:hover,.dl-tab:focus-visible{color:#fff;background:rgba(255,255,255,.05)}
.dl-tab.router-link-exact-active{color:#fff;background:rgba(255,255,255,.06);border-color:var(--dl-line)}
.dl-drop{position:relative}
.dl-menu{display:none;position:absolute;top:100%;left:0;width:17rem;padding-top:.4rem}
.dl-drop:hover .dl-menu,.dl-drop:focus-within .dl-menu{display:block}
.dl-menu>div{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:12px;padding:.4rem;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.dl-item{display:block;padding:.55rem .7rem;border-radius:8px;text-decoration:none;color:#e2e8f0;font-size:.8rem;font-weight:700}
.dl-item small{display:block;color:var(--dl-mute);font-weight:400;font-size:.7rem;margin-top:.1rem}
.dl-item:hover{background:rgba(255,255,255,.05);color:var(--dl-blue-hi)}
.dl-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--dl-line);background:rgba(255,255,255,.05);color:#e2e8f0;font:700 .8rem "Lexend Deca",sans-serif;text-decoration:none;cursor:pointer}
.dl-btn:hover{background:rgba(255,255,255,.1)}
.dl-btn.main{background:var(--dl-blue);border-color:var(--dl-blue);color:#fff}
.dl-btn.main:hover{background:#3b82f6}
.dl-user{display:flex;align-items:center;gap:.5rem;padding:.2rem .3rem .2rem .7rem;border:1px solid var(--dl-line);border-radius:8px;background:rgba(0,0,0,.5);font-size:.8rem;font-weight:700}
.dl-user img{width:26px;height:26px;border-radius:6px}
.dl-menu.right{left:auto;right:0;width:13rem}
.dl-out{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:#fda4af}
.dl-tabbar,.dl-sheet,.dl-scrim{display:none}
:focus-visible{outline:2px solid var(--dl-blue-hi);outline-offset:2px}
@media(max-width:819px){
 .dl-nav,.dl-right{display:none}
 .dl-bar{height:56px}
 body{padding-bottom:64px}
 .dl-tabbar{display:flex;position:fixed;inset:auto 0 0 0;z-index:60;background:#020617;border-top:1px solid #1e293b;padding:.25rem .25rem max(.375rem,env(safe-area-inset-bottom));justify-content:space-around}
 .dl-tabbar a,.dl-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .25rem;background:none;border:0;color:#94a3b8;font:600 .68rem "Lexend Deca",sans-serif;text-decoration:none;border-radius:8px;cursor:pointer}
 .dl-tabbar .router-link-exact-active,.dl-tabbar .on{color:var(--dl-blue-hi);background:rgba(96,165,250,.1)}
 .dl-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.7)}
 .dl-sheet{display:grid;gap:.4rem;position:fixed;left:.75rem;right:.75rem;bottom:72px;z-index:58;background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:.75rem;max-height:60vh;overflow:auto}
}
/* Página Info */
.dl-info{max-width:64rem;margin:0 auto;padding:2rem 1.25rem 4rem;display:grid;gap:2rem;color:var(--dl-text)}
.dl-hero{position:relative;border:1px solid var(--dl-line);border-radius:16px;overflow:hidden;min-height:18rem;display:flex;align-items:flex-end;background:#000 url(../assets/GD_ECUADOR_BANNER.png) center/cover}
.dl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#08080a 8%,rgba(8,8,10,.35) 70%)}
.dl-hero>div{position:relative;z-index:1;padding:1.5rem;display:grid;gap:.9rem}
.dl-hero h1{font:800 clamp(2rem,6vw,3.5rem)/1 "Lexend Deca",sans-serif;letter-spacing:-.02em}
.dl-hero p{max-width:34rem;color:#cbd5e1;line-height:1.6}
.dl-row{display:flex;flex-wrap:wrap;gap:.6rem}
.dl-staff{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:14px;padding:1rem 1.25rem}
.dl-staff h2{font:700 1rem "Lexend Deca",sans-serif;margin-bottom:.5rem}
.dl-person{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.05);color:#e2e8f0;text-decoration:none;font-weight:700}
.dl-person:hover span:first-child{color:var(--dl-blue-hi)}
.dl-role{font-size:.7rem;padding:.15rem .5rem;border-radius:6px;border:1px solid;font-weight:700}
.r-owner{color:#fcd34d;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.r-admin{color:#7dd3fc;border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.1)}
.r-helper{color:#c4b5fd;border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.1)}
.r-dev{color:#5eead4;border-color:rgba(20,184,166,.4);background:rgba(20,184,166,.1)}

/* ===== Lista de niveles: paneles planos, sin lavados de color ===== */
.page-list{height:calc(100vh - 70px);max-height:calc(100vh - 70px);padding:16px 0 20px;gap:16px}
.page-list .list-container,.page-list .level-container,.page-list .meta-container{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:14px;box-shadow:none;max-height:calc(100vh - 102px)}
.page-list .list .level button{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:.65rem .8rem;box-shadow:none;transition:background .15s,border-color .15s}
.page-list .list .level button:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);transform:none}
.page-list .list .level.active button{background:rgba(37,99,235,.14);border-color:rgba(96,165,250,.55);box-shadow:none}
.page-list .search-input,.page-list .filter-select{background:#000;border:1px solid var(--dl-line);border-radius:10px;color:var(--dl-text)}
.page-list .search-input:focus,.page-list .filter-select:focus{border-color:var(--dl-blue);outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.page-list .list-mode-btn{background:rgba(255,255,255,.04);border:1px solid var(--dl-line);border-radius:8px;color:var(--dl-mute)}
.page-list .list-mode-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.page-list .list-mode-btn.active{background:var(--dl-blue);border-color:var(--dl-blue);color:#fff}
.page-list .stat-grid-card{background:#000;border:1px solid var(--dl-line);border-radius:10px}
.page-list .records .record:hover{background:rgba(255,255,255,.04)}

/* ===== Jugadores ===== */
.page-leaderboard-container{background:#08080a;min-height:calc(100vh - 70px)}
.page-leaderboard-container::before{display:none}
.page-leaderboard{height:calc(100vh - 70px);max-height:calc(100vh - 70px)}
.page-leaderboard .board-container,.page-leaderboard .player-container,.page-leaderboard .error-container{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:14px;box-shadow:none}
.page-leaderboard .search-box,.page-leaderboard input{background:#000;border:1px solid var(--dl-line);color:var(--dl-text)}
.page-leaderboard .search-box:focus-within,.page-leaderboard input:focus{border-color:var(--dl-blue);outline:0}

@media(max-width:819px){
 .page-list,.page-leaderboard{grid-template-columns:1fr;height:auto;max-height:none;overflow:visible;width:calc(100% - 24px)}
 .page-list .list-container,.page-list .level-container,.page-list .meta-container{position:static;max-height:none;min-height:0}
 .page-leaderboard-container{min-height:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Resto de páginas: misma paleta neutra que la lista ===== */
.surface,.profile-container,.admin-container,.community-page,.grind-page,.page-roulette,.page-packs-container,.page-level-wordle,.page-mini-games{background:#08080a;min-height:calc(100vh - 70px)}
.page-level-wordle,.page-mini-games{background:#08080a}
.surface{display:block;max-width:64rem;margin:0 auto;padding:2rem 1.25rem 4rem}

/* Tarjetas y paneles */
.pack-card,.pack-modal-content,.stat-card,.record-card,.post-card,.level-card,.submit-container,.admin-card,.wordle-board,.comparison-level,.answer-grid button,.grind-level-container,.completed-levels-container,.extra-stats-container{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:14px;box-shadow:none;color:var(--dl-text)}
.pack-card:hover,.post-card:hover,.comparison-level:hover,.answer-grid button:hover{background:#14151a;border-color:rgba(255,255,255,.2);transform:none}

/* Formularios (envío de records, comunidad, leveldle) */
.surface input,.surface select,.surface textarea,.community-page input,.community-page textarea,.community-page select,.page-level-wordle input,.page-level-wordle select,.form-group input,.form-group select,.form-group textarea{background:#000;border:1px solid var(--dl-line);border-radius:10px;color:var(--dl-text);padding:.65rem .8rem;font:inherit}
.surface input:focus,.surface select:focus,.surface textarea:focus,.community-page input:focus,.community-page textarea:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--dl-blue);outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.form-help{color:var(--dl-mute)}

/* Botones primarios */
.submit-btn,.admin-btn,.mini-game-actions button,.grind-actions button{background:var(--dl-blue);border:1px solid var(--dl-blue);border-radius:8px;color:#fff;font:700 .85rem "Lexend Deca",sans-serif;cursor:pointer}
.submit-btn:hover,.admin-btn:hover,.mini-game-actions button:hover,.grind-actions button:hover{background:#3b82f6}

@media(max-width:819px){
 .profile-container,.admin-container{padding:1.5rem 1rem 3rem}
 .surface{padding:1.25rem .75rem 3rem}
}