/*
 * TakaraDex shared styles: layout-foundation.css
 * Generated by the V0.2.0 readability refactor.
 * These rules were previously duplicated in every HTML page.
 * For normal spacing/size changes edit ../takaradex-config.css instead.
 */


/* ===== Header alignment and back-button normalization ===== */
/* Fix definitivo: tasto indietro separato dal titolo su desktop e telefono */
.header{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:72px!important;padding:10px 72px!important;box-sizing:border-box!important;overflow:visible!important;}
.header .back-arrow,.back-arrow{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;width:48px!important;height:48px!important;min-width:48px!important;padding:0!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(13,13,13,.86)!important;border:1px solid rgba(255,204,0,.28)!important;box-shadow:0 10px 28px rgba(0,0,0,.38)!important;color:#ffe082!important;font-size:28px!important;line-height:1!important;z-index:5!important;}
.header h1,.header .pokemon-title{margin:0!important;text-align:center!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.1!important;}
@media(max-width:640px){
  .header{min-height:76px!important;padding:10px 18px 10px 78px!important;justify-content:flex-start!important;}
  .header .back-arrow,.back-arrow{left:14px!important;width:52px!important;height:52px!important;border-radius:18px!important;font-size:30px!important;}
  .header h1,.header .pokemon-title{text-align:left!important;font-size:clamp(22px,7vw,34px)!important;max-width:calc(100vw - 112px)!important;}
  .header img.poke-icon{display:none!important;}
}


/* ===== Prevent authenticated-page flashes during startup ===== */
html.td-fast-auth body.auth-loading .loading-screen,
html.td-fast-auth body.auth-loading #loadingScreen,
html.td-fast-auth body.auth-loading .loading-box,
html.td-fast-auth body.auth-loading #loading{display:none!important;visibility:hidden!important;pointer-events:none!important;}
html.td-fast-auth body.auth-loading .container,
html.td-fast-auth body.auth-loading .app-container,
html.td-fast-auth body.auth-loading .page,
html.td-fast-auth body.auth-loading main,
html.td-fast-auth body.auth-loading .header,
html.td-fast-auth body.auth-loading .bottom-glass,
html.td-fast-auth body.auth-loading #tdNativeNav,
html.td-fast-auth body.auth-loading .td-native-nav{display:flex!important;visibility:visible!important;opacity:1!important;}
html.td-fast-auth body.auth-loading table,
html.td-fast-auth body.auth-loading .table-section,
html.td-fast-auth body.auth-loading .panel,
html.td-fast-auth body.auth-loading .hero{visibility:visible!important;opacity:1!important;}
@media (min-width:921px) {
    body.td-page-leaving {
        opacity: 1 !important;
        transition: none !important;
    }

    #sideMenu,
    #sideMenu *,
    .td-final-sidebar,
    .td-final-sidebar * {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== Base five-slot mobile navigation geometry ===== */
/* V0.1.6 - Bottom nav mobile: 5 pulsanti fissi, orizzontali, centrati e simmetrici. Mantiene la navigazione veloce V0.1.5. */
@media (max-width:920px){
  :root{--td-bottom-nav-safe:104px;}
  #tdNativeNav,
  .td-native-nav,
  .td-native-nav.td-native-nav-wide{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:0!important;
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 18px)!important;
    max-width:520px!important;
    height:76px!important;
    padding:7px 8px!important;
    border-radius:28px!important;
    overflow:hidden!important;
    z-index:8800!important;
    background:rgba(12,11,10,.94)!important;
    border:1px solid rgba(216,181,90,.30)!important;
    box-shadow:0 -14px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-sizing:border-box!important;
  }

  #tdNativeNav a,
  .td-native-nav a{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:4px!important;
    padding:5px 1px!important;
    margin:0!important;
    border-radius:20px!important;
    color:#f4f0e5!important;
    text-decoration:none!important;
    font-size:10.5px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:-.2px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  #tdNativeNav a span:not(.td-nav-ico),
  .td-native-nav a span:not(.td-nav-ico){
    display:block!important;
    width:100%!important;
    text-align:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #tdNativeNav .td-nav-ico,
  .td-native-nav .td-nav-ico{
    display:block!important;
    width:100%!important;
    text-align:center!important;
    font-size:21px!important;
    line-height:1!important;
    margin:0!important;
  }

  #tdNativeNav a.add,
  .td-native-nav a.add{
    grid-column:auto!important;
    width:100%!important;
    height:62px!important;
    justify-self:stretch!important;
    align-self:center!important;
    transform:none!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,#ffe15a,#ffc400)!important;
    color:#070707!important;
    border:1px solid rgba(255,255,255,.25)!important;
    box-shadow:0 0 18px rgba(255,204,0,.24), inset 0 1px 0 rgba(255,255,255,.42)!important;
    padding:5px 1px!important;
    z-index:1!important;
  }

  #tdNativeNav a.add .td-nav-ico,
  .td-native-nav a.add .td-nav-ico{
    font-size:26px!important;
    line-height:1!important;
    font-weight:1000!important;
  }

  #tdNativeNav a.active:not(.add),
  .td-native-nav a.active:not(.add){
    background:linear-gradient(135deg,rgba(216,181,90,.30),rgba(216,181,90,.10))!important;
    color:#ffd21a!important;
  }

  #tdNativeNav a:nth-child(1), .td-native-nav a:nth-child(1){grid-column:1!important;}
  #tdNativeNav a:nth-child(2), .td-native-nav a:nth-child(2){grid-column:2!important;}
  #tdNativeNav a:nth-child(3), .td-native-nav a:nth-child(3){grid-column:3!important;}
  #tdNativeNav a:nth-child(4), .td-native-nav a:nth-child(4){grid-column:4!important;}
  #tdNativeNav a:nth-child(5), .td-native-nav a:nth-child(5){grid-column:5!important;}

  body:not(.auth-loading){
    padding-bottom:calc(108px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  #tdNativeNav, .td-native-nav, .td-native-nav.td-native-nav-wide{
    width:calc(100vw - 12px)!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  #tdNativeNav a, .td-native-nav a{font-size:9.7px!important;letter-spacing:-.35px!important;}
  #tdNativeNav .td-nav-ico, .td-native-nav .td-nav-ico{font-size:20px!important;}
  #tdNativeNav a.add .td-nav-ico, .td-native-nav a.add .td-nav-ico{font-size:25px!important;}
}