#typeDetailScreen{animation:none;width:calc(100% + 32px);margin-inline:-16px}
body.detail-active{background:#EFEBE4}
body.detail-active .app{padding-bottom:0}
.chara-page{position:relative;overflow:hidden;padding:18px 18px 26px;background:#2E2C2A;font-family:'M PLUS Rounded 1c',sans-serif;-webkit-font-smoothing:antialiased}
.chara-page__ticker{position:absolute;left:-10px;top:0;height:200%;pointer-events:none}
.chara-page__ticker-text{font:400 150px/.84 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1.4px rgba(227,204,142,.16);animation:chara-drift 26s linear infinite}
.chara-page__back{position:relative;display:inline-flex;align-items:center;gap:8px;color:#E3CC8E;text-decoration:none;font:900 14px/1 'M PLUS Rounded 1c',sans-serif}
.chara-page__heading{position:relative;margin-top:18px}
.chara-page__code{margin:0;font:400 72px/.9 'Anton',sans-serif;letter-spacing:.04em;color:#E3CC8E;text-shadow:4px 4px 0 #B0603F}
.chara-page__name{margin:8px 0 0;font:400 28px/1.1 'Dela Gothic One',sans-serif;color:#fff}
.chara-page__stage{position:relative;height:380px;margin-top:4px}
.chara-page__floor{position:absolute;left:50%;bottom:4px;width:280px;height:38px;margin-left:-140px;border-radius:50%;background:radial-gradient(closest-side,rgba(227,204,142,.75),rgba(227,204,142,0));animation:chara-glow 2.4s ease-in-out infinite;display:block}
.chara-page__beam{position:absolute;left:50%;bottom:20px;width:240px;height:380px;margin-left:-120px;background:linear-gradient(to top,rgba(227,204,142,.22),rgba(227,204,142,0));clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);animation:chara-beam 3s ease-in-out infinite;display:block}
.chara-page__image{position:absolute;left:0;right:0;bottom:14px;width:100%;height:360px;object-fit:contain;object-position:center bottom;display:block}
.chara-page__tags{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:0;padding:0}
.chara-page__tag{display:flex;align-items:center;gap:8px;background:#1F1E1C;border:2px solid var(--chara-axis-color);border-radius:10px;padding:9px 10px}
.chara-page__diamond{width:8px;height:8px;border-radius:2px;background:var(--chara-axis-color);transform:rotate(45deg);display:block;flex:none}
.chara-page__tag-label{font:900 14px/1 'M PLUS Rounded 1c',sans-serif;color:#fff}
.chara-page__speech{position:relative;margin-top:16px;background:#FFFBF0;border:3px solid #1A1917;border-radius:18px;box-shadow:4px 5px 0 #B0603F;padding:14px 16px}
.chara-page__speech-tail{position:absolute;left:40px;top:-13px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #1A1917}
.chara-page__speech-tail-inner{position:absolute;left:42px;top:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #FFFBF0}
.chara-page__speech p{margin:0;font:700 14px/1.85 'M PLUS Rounded 1c',sans-serif;color:#2E2C2A}
.chara-page__neighbors{position:relative;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chara-page__neighbor{display:flex;align-items:center;gap:8px;background:#1F1E1C;border:2px solid #4A4744;border-radius:14px;padding:8px 10px;text-decoration:none}
.chara-page__neighbor--next{justify-content:flex-end}
.chara-page__arrow{font:900 16px/1 'Outfit',sans-serif;color:#E3CC8E}
.chara-page__neighbor img{width:36px;height:36px;object-fit:contain;filter:invert(.75);display:block}
.chara-page__neighbor-name{font:900 12px/1.2 'M PLUS Rounded 1c',sans-serif;color:#fff}
.chara-page.is-entering .chara-page__heading{animation:chara-slideL .5s ease-out both}
.chara-page.is-entering .chara-page__image{animation:chara-popIn .6s cubic-bezier(.3,1.5,.5,1) .15s both}
.chara-page.is-entering .chara-page__tag:nth-child(1){animation:chara-rise .4s ease-out .45s both}
.chara-page.is-entering .chara-page__tag:nth-child(2){animation:chara-rise .4s ease-out .53s both}
.chara-page.is-entering .chara-page__tag:nth-child(3){animation:chara-rise .4s ease-out .61s both}
.chara-page.is-entering .chara-page__tag:nth-child(4){animation:chara-rise .4s ease-out .69s both}
.chara-page.is-entering .chara-page__speech{animation:chara-rise .45s ease-out .7s both}
@keyframes chara-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes chara-slideL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes chara-popIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}100%{transform:none}}
@keyframes chara-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes chara-glow{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:.9;transform:scaleX(1.08)}}
@keyframes chara-beam{0%,100%{opacity:.5}50%{opacity:.85}}
@media (min-width:600px){main > #typeDetailScreen{width:min(calc(100% - 32px),480px);margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.chara-page,.chara-page *{animation:none!important;transition:none!important}}