.type-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.type-card{position:relative;border-radius:24px;padding:22px 14px;background:#fff5f7;overflow:hidden}.type-number{position:absolute;top:12px;left:14px;font-size:14px;font-weight:700;color:#ce6687}.type-portrait{display:flex;align-items:center;justify-content:center;width:100%;height:184px}.character-art{display:block;background-repeat:no-repeat;width:160px;max-width:100%;flex-shrink:0}.type-portrait .character-art{width:160px;max-height:180px}.type-card strong{font-size:15px;line-height:1.6;margin-top:14px}.type-catchphrase{display:block;font-size:12px;line-height:1.8;margin-top:8px;color:#826575}.type-intro{align-items:flex-start}.type-reference{width:46%;max-width:500px;flex-shrink:0}.type-reference .character-sheet-card{width:100%;max-width:100%;border-radius:16px}.type-intro-copy{padding-top:20px}.type-traits{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin-top:20px}.type-traits li{font-size:12px;background:white;border-radius:20px;padding:8px 12px}.result-character{display:flex;justify-content:center;margin:24px auto}.result-character .character-art{width:230px;max-height:270px}.type-intro-copy h1{overflow-wrap:anywhere}@media(max-width:700px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.type-card{padding:24px 8px 16px;border-radius:18px}.type-number{font-size:12px;top:8px;left:10px}.type-portrait{height:150px}.type-portrait .character-art{width:130px;max-height:146px}.type-card strong{font-size:12px}.type-catchphrase{font-size:10px}.type-reference{width:100%;max-width:460px;margin:auto}.type-intro-copy{padding-top:24px}.type-intro h1{font-size:25px}.type-traits{justify-content:center}.result-character .character-art{width:195px}}

.type-portrait{height:auto;aspect-ratio:auto}.type-portrait .character-art{width:100%;max-height:none;border-radius:10px}

/* Latest approved transparent character artwork. */
.mascot{display:inline-block;width:92px;aspect-ratio:1;background-size:contain;background-position:center;background-repeat:no-repeat;flex-shrink:0;vertical-align:middle}
.mascot-dog{background-image:url("../images/characters/ichizu-dog-v4.27c435319654.webp")}.mascot-rabbit{background-image:url("../images/characters/amae-rabbit-v4.a8d14b410091.webp")}.mascot-cat{background-image:url("../images/characters/free-cat-v4.01003ba03aad.webp")}.mascot-swan{background-image:url("../images/characters/destiny-swan-v4.ea5150511d65.webp")}
.hero-character-art{display:flex;align-items:center;justify-content:center;min-width:0}.hero-mascot{width:min(100%,440px);transform:rotate(-6deg)}.hero-character-message{position:absolute;right:0;top:25px;font-family:"Hachi Maru Pop",cursive;font-size:15px;line-height:1.9;transform:rotate(7deg);color:#977081}.hero-character-art .round-sticker{right:-10px;bottom:5px}.hero-character-art .scribble-one{top:0;right:35px}
.has-mascot{position:relative;padding-right:76px;min-height:80px}.heading-mascot{position:absolute;right:0;bottom:0;width:70px;transform:rotate(7deg)}.has-mascot.centered{padding-left:76px}.wish-tile>.mascot,.target-tile>.mascot{width:64px;height:64px}.oshi-ribbon{position:static;margin-top:0;opacity:1;transform:none;text-align:center;line-height:0}.oshi-ribbon .mascot{width:190px}.my-art .mascot{width:180px}.ranking-message>.mascot{width:150px;height:150px;font-size:inherit}.daily-mascot{width:68px;float:right;margin:0 12px}.footer-characters{display:flex;justify-content:center;align-items:flex-end;max-width:550px;margin:-5px auto 28px;padding:0 20px}.footer-characters .mascot{width:25%;max-width:125px}.footer-characters .mascot:nth-child(even){transform:translateY(-10px)}
@media(max-width:800px){.hero-character-message{font-size:12px;right:0;top:10px}.hero-character-art .round-sticker{right:0;bottom:15px}.heading-mascot{width:57px}.has-mascot{padding-right:62px}.has-mascot.centered{padding-left:62px}.oshi-ribbon .mascot{width:145px}}
@media(max-width:600px){.hero-character-art{min-height:260px;max-width:340px;width:100%;margin:0 auto}.hero-mascot{width:245px;margin-right:55px}.hero-character-message{top:20px;font-size:10px;right:0}.hero-character-art .round-sticker{width:88px;height:88px;right:0;bottom:18px}.hero-character-art .round-sticker strong{font-size:15px}.hero-character-art .scribble-one{right:15px;top:90px;font-size:30px}.has-mascot{min-height:62px}.heading-mascot{width:48px}.has-mascot{padding-right:50px}.has-mascot.centered{padding-left:50px}.wish-tile>.mascot,.target-tile>.mascot{width:46px;height:46px}.oshi-ribbon .mascot{width:120px}.my-section{padding-bottom:140px}.my-section .my-art{top:auto;bottom:8px;right:22px;opacity:1}.my-art .mascot{width:130px}.ranking-message>.mascot{width:95px;height:95px}.daily-mascot{width:58px}.footer-characters{max-width:360px;margin-bottom:22px}}

.character-quote{display:flex;align-items:center;justify-content:center;gap:24px;margin:30px auto;color:#776572}.character-quote p{font-family:"Hachi Maru Pop",cursive;font-size:15px;line-height:2;transform:rotate(-3deg)}.character-quote .mascot{width:108px}.category-heading .category-mascot{width:36px;height:36px;margin-left:auto}.category-heading .category-mascot+a{margin-left:0}
@media(max-width:600px){.character-quote{gap:12px;margin:24px 6px}.character-quote p{font-size:11px}.character-quote .mascot{width:82px}.oshi-ribbon .mascot{width:160px}.oshi-ribbon{height:145px}.category-heading .category-mascot{width:30px;height:30px}}

/* Character spans the title and description rows in editorial recommendations. */
.recommendation-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:6px;align-content:center;align-items:center;min-height:124px}
.recommendation-character{grid-column:1;grid-row:1 / 3;display:block;width:96px;background-repeat:no-repeat;align-self:center}
.recommendation-card>strong{grid-column:2;grid-row:1;align-self:end;min-width:0}
.recommendation-card>p{grid-column:2;grid-row:2;align-self:start;margin:0;min-width:0}
@media(max-width:600px){.recommendation-card{grid-template-columns:80px minmax(0,1fr);column-gap:12px;padding:14px;min-height:112px}.recommendation-character{width:80px}}