#zbr-top, #zbr-bottom{display: contents;}
.me-initial{display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--night); background: var(--plum); font: 800 1rem/1 var(--display); color: var(--cream);}
.me-dot{position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--night); background: var(--rose); box-shadow: 0 0 10px var(--rose);}
.site-toast{position: fixed; left: 50%; bottom: 28px; z-index: 90; max-width: min(92vw, 460px); padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px); font: 700 .9rem/1.4 var(--ui); color: var(--cream); text-align: center; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);}
.site-toast:empty{display: none;}
.site-toast-show{opacity: 1; transform: translate(-50%, 0);}
.vote-toast:empty{display: none;}
@media (max-width: 760px){
.site-toast{bottom: 92px;}
}
/* Full-art character cards: add .is-art to a .char-grid. Used on age-gated pages and unlocked hubs. */
.char-grid.is-art{grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;}
.char-grid.is-art.is-few{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
.char-grid.is-art.is-few .char-card{aspect-ratio: 1 / 1;}
.char-grid.is-art .char-card{isolation: isolate; overflow: hidden; align-content: end; justify-items: start; gap: 3px; aspect-ratio: 4 / 5; height: auto; padding: 14px; border-radius: 20px; background: var(--plum); text-align: left;}
.char-grid.is-art .char-card img, .char-grid.is-art .char-card .char-initial{position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 16%; transition: transform .6s var(--ease);}
.char-grid.is-art .char-card .char-initial{display: grid; place-items: center; font: 800 3.4rem/1 var(--display); color: var(--rose-2); background: radial-gradient(circle at 30% 30%, var(--plum-2), var(--night-2));}
.char-grid.is-art .char-card::before{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 6, 16, 0) 40%, rgba(12, 6, 16, .95));}
.char-grid.is-art .char-card:hover img{transform: scale(1.05); box-shadow: none;}
.char-grid.is-art .char-card strong{font: 800 1.02rem/1.15 var(--ui); color: var(--cream); text-shadow: 0 1px 12px rgba(12, 6, 16, .9);}
.char-grid.is-art .char-card > span{min-height: 0; font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--mist);}
.char-grid.is-art .char-card .tier{margin-top: 6px; background-color: rgba(12, 6, 16, .72);}
.char-grid.is-art .char-card[aria-current="page"]{box-shadow: 0 0 0 2px var(--rose);}
@media (max-width: 760px){
.char-grid.is-art, .char-grid.is-art.is-few{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.char-grid.is-art .char-card{padding: 10px; border-radius: 16px;}
.char-grid.is-art .char-card strong{font-size: .94rem;}
}
@media (prefers-reduced-motion: reduce){
.char-grid.is-art .char-card img{transition: none;}
}
.char-grid.is-art.char-grid-row{grid-template-columns: repeat(6, minmax(0, 1fr));}
/* Hub hero art: three of the hub's own characters, fanned beside the title. */
.hub-side{display: grid; justify-items: end; gap: 18px;}
.hub-art{display: flex; padding: 8px 18px 0 0;}
.hub-art img{width: 150px; height: 196px; border-radius: 18px; border: 1px solid var(--line-2); object-fit: cover; object-position: 50% 16%; box-shadow: 0 24px 50px -24px rgba(255, 46, 126, .8);}
.hub-art img + img{margin-left: -34px;}
.hub-art img:nth-child(1){rotate: -7deg; translate: 0 10px;}
.hub-art img:nth-child(2){position: relative; z-index: 1;}
.hub-art img:nth-child(3){rotate: 7deg; translate: 0 10px;}
@media (max-width: 960px){
.char-grid.is-art.char-grid-row{grid-template-columns: repeat(3, minmax(0, 1fr));}
.hub-art{display: none;}
.hub-side{justify-items: stretch; width: 100%;}
}
@media (max-width: 760px){
.char-grid.is-art.char-grid-row{grid-template-columns: repeat(2, minmax(0, 1fr));}
}