/* DarkoWiki 11.1.0 — App Shell & Navigation 2.0 */

.app-nav-wrap[data-shell-version="11.1.0"]{
  display:grid;
  gap:8px;
  padding-block:8px 10px;
}
.app-hub-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--border) 88%,#fff 12%);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(28,24,52,.96),rgba(18,15,37,.94));
  box-shadow:0 18px 42px -30px rgba(0,0,0,.88);
}
.app-hub{
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"icon label" "icon note";
  align-items:center;
  column-gap:9px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--text-muted);
  text-align:left;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.app-hub:hover{
  color:var(--text);
  background:rgba(255,255,255,.035);
}
.app-hub:active{transform:translateY(1px)}
.app-hub.is-active,.app-hub[aria-pressed="true"]{
  color:#fff;
  border-color:rgba(139,127,240,.44);
  background:linear-gradient(135deg,rgba(139,127,240,.28),rgba(87,74,175,.12));
  box-shadow:0 12px 28px -22px rgba(139,127,240,.92),inset 0 1px rgba(255,255,255,.05);
}
.app-hub-icon{grid-area:icon;font-size:1.22rem;line-height:1}
.app-hub-label{grid-area:label;font-weight:900;font-size:.83rem;line-height:1.05}
.app-hub small{grid-area:note;color:inherit;opacity:.68;font-size:.64rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.app-tool-row{
  display:grid;
  grid-template-columns:minmax(176px,236px) minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.app-nav-context{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(18,15,37,.82);
}
.app-nav-context>span{
  color:var(--accent);
  font:800 .59rem var(--font-mono);
  letter-spacing:.11em;
}
.app-nav-context>strong{
  margin-top:2px;
  color:var(--text);
  font-size:.78rem;
  line-height:1.12;
}
.app-nav-context>small{
  margin-top:3px;
  color:var(--text-muted);
  font-size:.62rem;
  line-height:1.18;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.app-nav-wrap[data-shell-version="11.1.0"] .app-nav{
  width:100%;
  min-width:0!important;
  display:flex!important;
  grid-template-columns:none!important;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:7px!important;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.app-nav-wrap[data-shell-version="11.1.0"] .app-tab{
  flex:1 1 auto!important;
  min-width:max-content!important;
  min-height:44px;
  padding:8px 11px!important;
  scroll-snap-align:center;
}
.app-nav-wrap[data-shell-version="11.1.0"] .app-tab[hidden]{display:none!important}
.app-nav-wrap[data-shell-version="11.1.0"] .app-tab .tab-num{display:none}

/* Hubs subtly tint their context without changing feature-level regional themes. */
.app-nav-wrap[data-current-hub="world"] .app-nav-context{background:linear-gradient(135deg,rgba(66,112,113,.12),rgba(18,15,37,.82))}
.app-nav-wrap[data-current-hub="battle"] .app-nav-context{background:linear-gradient(135deg,rgba(191,91,99,.10),rgba(18,15,37,.82))}
.app-nav-wrap[data-current-hub="run"] .app-nav-context{background:linear-gradient(135deg,rgba(73,119,190,.11),rgba(18,15,37,.82))}
.app-nav-wrap[data-current-hub="fanwiki"] .app-nav-context{background:linear-gradient(135deg,rgba(142,84,204,.14),rgba(18,15,37,.82))}

@media(max-width:900px){
  .app-tool-row{grid-template-columns:1fr}
  .app-nav-context{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:8px;
    row-gap:0;
    align-items:baseline;
    padding:6px 10px;
  }
  .app-nav-context>span{grid-row:1/3}
  .app-nav-context>strong{margin:0}
  .app-nav-context>small{margin:1px 0 0;-webkit-line-clamp:1}
  .app-hub{padding-inline:8px;column-gap:7px}
  .app-hub-label{font-size:.76rem}
  .app-hub small{font-size:.59rem}
}

@media(max-width:760px){
  .app-nav-wrap[data-shell-version="11.1.0"]{
    margin-inline:-10px;
    padding:6px 10px 9px;
    overflow:visible;
    background:linear-gradient(180deg,rgba(18,16,34,.98),rgba(18,16,34,.94));
  }
  .app-hub-nav{gap:4px;padding:5px;border-radius:14px}
  .app-hub{
    grid-template-columns:1fr;
    grid-template-areas:"icon" "label";
    justify-items:center;
    min-height:54px;
    padding:6px 3px;
    text-align:center;
    column-gap:0;
  }
  .app-hub-icon{font-size:1.12rem}
  .app-hub-label{font-size:.66rem;line-height:1.05;letter-spacing:-.01em}
  .app-hub small{display:none}
  .app-nav-context{display:none}
  .app-nav-wrap[data-shell-version="11.1.0"] .app-nav{
    padding:5px 1px 1px!important;
    border:0;
    background:transparent;
    box-shadow:none;
    scroll-padding-inline:8px;
  }
  .app-nav-wrap[data-shell-version="11.1.0"] .app-tab{
    flex:0 0 auto!important;
    min-height:42px!important;
    padding:7px 10px!important;
    font-size:.78rem!important;
  }

  /* Compact hero: first useful navigation stays in the first viewport more often. */
  header.hero{margin-bottom:11px}
  .hero .dw-brand{margin-bottom:5px;gap:9px}
  .hero .dw-logo{width:50px!important;height:50px!important;flex-basis:50px!important}
  .hero .dw-wordmark span{font-size:.58rem}
  .hero .dw-wordmark strong{margin-top:3px;font-size:.94rem}
  .hero>.eyebrow{margin-bottom:4px;font-size:.59rem;letter-spacing:.10em}
  .hero h1{margin-bottom:5px;font-size:clamp(1.58rem,7.7vw,2rem)}
  .hero .subtitle{
    max-width:35rem;
    margin-bottom:7px;
    font-size:.82rem;
    line-height:1.38;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .hero .dw-global-game{margin-top:8px;padding:8px 9px;gap:5px}
  .hero .dw-global-game label{font-size:.59rem}
  .hero .dw-global-game-select{min-height:40px;padding-block:6px;font-size:.75rem}
  .hero #dwGlobalGameHint{display:none}
  .hero .pwa-toolbar{margin-top:7px;gap:6px;grid-template-columns:1fr 1fr auto!important}
  .hero .pwa-tool-btn,.hero .pwa-network-status{min-height:38px;font-size:.69rem;padding:6px 8px}
  .hero .pwa-network-status{grid-column:auto!important;min-width:72px}
}

@media(max-width:430px){
  .app-hub-label{font-size:.61rem}
  .app-hub{min-height:50px}
  .app-nav-wrap[data-shell-version="11.1.0"] .app-tab>span:first-child{font-size:.72rem}
  .hero .pwa-toolbar{grid-template-columns:1fr 1fr!important}
  .hero .pwa-network-status{grid-column:1/-1!important;min-height:32px}
}

@media(prefers-reduced-motion:reduce){
  .app-hub{transition:none!important}
}

@media(forced-colors:active){
  .app-hub[aria-pressed="true"]{outline:2px solid Highlight}
}

/* 11.2 runtime loading treatment */
.tab-panel[aria-busy="true"]{position:relative;min-height:180px}
.tab-panel[aria-busy="true"]::after{content:"Cargando módulo…";position:absolute;inset:12px 12px auto;z-index:5;padding:10px 14px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px;background:color-mix(in srgb,var(--bg,#0b1020) 92%,transparent);backdrop-filter:blur(6px);font-size:.86rem;font-weight:700;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){.tab-panel[aria-busy="true"]::after{animation:dw-runtime-pulse 1.1s ease-in-out infinite alternate}@keyframes dw-runtime-pulse{from{opacity:.62}to{opacity:1}}}