/* ZERAPHIA build1367 | Character roster only, self-contained visual system.
   Keep original primoa classes for existing events, lazy-loading and mutations,
   but draw their visual anatomy solely under the zchar-redesign index scope.
   No rules here touch the character detail view. */

html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index{
  background: url("../images/bg_charalist.webp") center center / cover no-repeat !important;
  background-color:#f8f7f4 !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index > .app-page-header{
  position:relative !important;
  flex:0 0 clamp(52px,8.2dvh,66px) !important;
  height:clamp(52px,8.2dvh,66px) !important;
  min-height:clamp(52px,8.2dvh,66px) !important;
  grid-template-columns:86px minmax(0,1fr) 86px !important;
  padding:0 10px !important;
  background:linear-gradient(180deg,rgba(255,253,248,.44) 0%,rgba(255,253,248,.34) 65%,rgba(251,247,237,.20) 100%) !important;
  border:0 !important;
  border-top:1px solid rgba(191,150,86,.48) !important;
  border-bottom:1px solid rgba(193,155,93,.70) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 12px rgba(136,104,48,.06) !important;
  overflow:visible !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index > .app-page-header::after{
  content:"✧" !important;
  position:absolute !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  inset:auto auto -10px 50% !important;
  width:22px !important;
  height:18px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,rgba(255,251,242,.16),rgba(255,251,242,.55),rgba(255,251,242,.16)) !important;
  color:#ae7e36 !important;
  font-size:17px !important;
  filter:none !important;
  z-index:3 !important;
  pointer-events:none !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index > .app-page-header .app-page-title{
  font-size:clamp(18px,5vw,25px) !important;
  letter-spacing:.075em !important;
  color:#52301e !important;
  font-weight:700 !important;
  overflow:visible !important;
  text-shadow:0 1px 0 rgba(255,255,255,.95) !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index #zukan-detail-back{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:auto !important;
  min-width:70px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 12px !important;
  border:1px solid rgba(187,149,88,.64) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(255,253,249,.99),rgba(248,241,228,.98)) !important;
  color:#754b2b !important;
  box-shadow:0 2px 5px rgba(98,75,38,.08),inset 0 0 0 1px rgba(255,255,255,.88) !important;
  font-size:13px !important;
  letter-spacing:.04em !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index #zukan-header-back{
  position:static !important;
  display:block !important;
  justify-self:end !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index .zukan-header-actions{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
  height:38px !important;
  min-width:75px !important;
  padding:0 5px !important;
  border:1px solid rgba(190,153,88,.54) !important;
  border-radius:12px !important;
  background:rgba(255,253,248,.85) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.60) !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index .zukan-header-actions .zukan-header-switch{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  flex:0 0 36px !important;
  width:36px !important;
  min-width:36px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#644021 !important;
  font-size:23px !important;
  box-shadow:none !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index .zukan-header-actions .zukan-header-switch + .zukan-header-switch{
  border-left:1px solid rgba(181,146,87,.58) !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index .zukan-search-glyph{
  width:16px !important;
  height:16px !important;
  border-color:#644021 !important;
  border-width:2px !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index .zukan-filter-menu-button .sasaphia-menu-glyph{
  color:#644021 !important;
  font-size:19px !important;
  line-height:1 !important;
}

/* One scroll owner; remove old fade mask and carousel / page padding. */
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index > .zukan-screen-scroll{
  position:relative !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  background:linear-gradient(180deg,rgba(255,251,245,.22),rgba(255,252,247,.09)) !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index #zukan-sub-box{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:12px 0 0 !important;
  margin:0 !important;
  overflow:visible !important;
  background:none !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index #zukan-stats{
  display:none !important;
}
html body:not(.ui-immersive) #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:max-content !important;
  justify-content:stretch !important;
  align-items:start !important;
  align-content:start !important;
  gap:8px 7px !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 12px calc(12px + env(safe-area-inset-bottom,0px)) !important;
  overflow:visible !important;
  touch-action:pan-y !important;
  background:transparent !important;
}

/* New card anatomy. Panel, portrait surface and Lv footer are transparent; framed image and badges remain. */
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid > .zchar-card{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:3px !important;
  border:1px solid #b89350 !important;
  border-radius:5px !important;
  background:transparent !important;
  box-shadow:0 1px 0 rgba(110,76,33,.12),0 2px 5px rgba(90,64,29,.10) !important;
  overflow:visible !important;
  color:#58371f !important;
  text-align:center !important;
  isolation:isolate !important;
  transition:transform .14s ease !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid > .zchar-card::before{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  inset:1px !important;
  border:1px solid rgba(207,168,98,.62) !important;
  border-radius:3px !important;
  pointer-events:none !important;
  z-index:5 !important;
  background:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid > .zchar-card::after{
  content:"✦" !important;
  position:absolute !important;
  display:block !important;
  top:-4px !important;
  left:-3px !important;
  width:auto !important;
  height:auto !important;
  z-index:8 !important;
  color:#bd8841 !important;
  font-size:12px !important;
  line-height:1 !important;
  pointer-events:none !important;
  background:none !important;
  box-shadow:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid > .zchar-card:active{transform:scale(.975) !important;}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid > .zchar-card .zchar-portrait-shell{
  display:block !important;
  width:100% !important;
  height:auto !important;
  position:relative !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
  overflow:visible !important;
  background:transparent !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-portrait{
  position:relative !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1.02 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:2px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-portrait::before,
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-portrait::after{
  content:none !important;
  display:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-image{
  position:absolute !important;
  display:block !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:50% 16% !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transform:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-attribute{
  display:block !important;
  position:absolute !important;
  top:-2px !important;
  left:-2px !important;
  width:clamp(19px,5.7vw,26px) !important;
  height:clamp(19px,5.7vw,26px) !important;
  max-width:none !important;
  max-height:none !important;
  z-index:12 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,250,234,.94) !important;
  object-fit:contain !important;
  background:radial-gradient(circle,#fff9df,rgba(255,250,239,.86)) !important;
  box-shadow:0 0 0 1px rgba(168,124,52,.85),0 2px 4px rgba(80,56,28,.22) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-notice{
  display:block !important;
  position:absolute !important;
  top:-1px !important;
  right:-1px !important;
  left:auto !important;
  bottom:auto !important;
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  min-height:12px !important;
  transform:none !important;
  opacity:1 !important;
  z-index:20 !important;
  border:2px solid #fffdf5 !important;
  border-radius:50% !important;
  background:#ed3349 !important;
  box-shadow:0 0 0 1px rgba(181,117,86,.58),0 2px 3px rgba(92,49,46,.2) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-meta{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-height:clamp(35px,9vw,44px) !important;
  margin:0 !important;
  padding:3px 0 4px !important;
  gap:3px !important;
  background:transparent !important;
  border-top:1px solid rgba(189,153,93,.66) !important;
  color:#54351f !important;
  position:relative !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-level{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  font:700 clamp(11px,3.1vw,17px)/1.1 "Cinzel","Noto Serif JP",serif !important;
  color:#483023 !important;
  white-space:nowrap !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
  overflow:visible !important;
  isolation:auto !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-level::before{
  content:none !important;
  display:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-resonance{
  display:flex !important;
  position:static !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:11px !important;
  min-height:11px !important;
  margin:0 !important;
  padding:0 !important;
  gap:clamp(4px,1.6vw,8px) !important;
  background:none !important;
  border:0 !important;
  opacity:1 !important;
  transform:none !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-resonance .primoa-index-lb-dot{
  position:relative !important;
  display:block !important;
  width:clamp(6px,1.9vw,9px) !important;
  height:clamp(6px,1.9vw,9px) !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:rotate(45deg) !important;
  border-radius:0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-resonance .is-empty{
  border:1px solid #a57d42 !important;
  background:rgba(255,252,247,.85) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-resonance .is-filled{
  border:1px solid #a06b23 !important;
  background:linear-gradient(135deg,#ffe2a1 0%,#d3a041 58%,#a26a25 100%) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card.is-unowned{
  opacity:.68 !important;
  filter:saturate(.5) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card.is-unowned .zchar-image{
  filter:grayscale(1) brightness(.7) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card.is-max-limitbreak .zchar-portrait{
  animation:none !important;
}

/* Search remains functional and follows the title bar rather than covering cards. */
html body #screen-zukan.zchar-redesign.is-primoa-index .zukan-name-search.open{
  position:sticky !important;
  display:grid !important;
  grid-template-rows:1fr !important;
  left:auto !important;
  right:auto !important;
  top:0 !important;
  width:calc(100% - 24px) !important;
  max-width:none !important;
  z-index:225 !important;
  margin:0 12px 10px !important;
  padding:0 !important;
  transform:none !important;
  background:rgba(255,250,241,.96) !important;
  box-shadow:0 4px 9px rgba(87,64,30,.12) !important;
}
html body #screen-zukan.zchar-redesign.is-primoa-index .zukan-name-search.open + #box-grid{
  margin-top:0 !important;
}

@media (max-width:360px){
  html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid{
    gap:7px 5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  html body #screen-zukan.zchar-redesign.is-primoa-index .zchar-card .zchar-meta{
    min-height:32px !important;
  }
  html body #screen-zukan.zchar-redesign.is-primoa-index #zukan-detail-back{min-width:59px !important;padding:0 7px !important;font-size:12px !important;}
  html body #screen-zukan.zchar-redesign.is-primoa-index .zukan-header-actions{min-width:68px !important;}
  html body #screen-zukan.zchar-redesign.is-primoa-index .zukan-header-actions .zukan-header-switch{width:31px !important;min-width:31px !important;flex-basis:31px !important;}
}

/* Short-screen fit: show four rows above the persistent bottom navigation.
   Keep all 4 columns and text; only shorten the portrait crop. */
@media (max-height:700px) and (min-width:350px){
  html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-portrait{
    aspect-ratio:1 / .85 !important;
  }
}
@media (max-height:610px) and (max-width:349px){
  html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-portrait{
    aspect-ratio:1 / .70 !important;
  }
  html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-meta{
    min-height:30px !important;
    padding-top:2px !important;
    padding-bottom:3px !important;
    gap:2px !important;
  }
  html body #screen-zukan.zchar-redesign.is-primoa-index #box-grid.primoa-index-grid .zchar-card .zchar-level{
    font-size:10.5px !important;
  }
}