.type-grid{align-items:start}.type-tile{transition:transform .18s ease;overflow:visible}.type-tile:hover{transform:none}.type-tile[open],.type-tile[open]:hover{transform:translateY(-5px)}.type-tile summary{display:block;list-style:none;cursor:pointer}.type-tile summary::-webkit-details-marker{display:none}.type-tile summary:focus-visible{outline:3px solid #259ce0;outline-offset:3px}.type-tile .type-name{white-space:normal;padding-right:24px;position:relative}.type-tile .type-name:after{content:'+';position:absolute;right:8px;top:5px}.type-tile[open] .type-name:after{content:'−'}.trait-code{display:inline-block;color:#b8e5ff;font:700 1.1em 'Barlow Condensed',sans-serif;letter-spacing:.06em}.type-note{background:#fff;color:#16344e;padding:15px 12px;margin:0;border-top:4px solid var(--group);font-size:14px;line-height:1.8}.type-note small{display:block;margin-top:8px;color:#5d748a;font-size:12px}.group-red{--group:#cf3548}.group-yellow{--group:#e5b422}.group-blue{--group:#2376bd}.group-green{--group:#29965b}.group-legend{display:flex;justify-content:center;gap:12px 20px;flex-wrap:wrap;margin:20px auto;font-size:13px}.group-legend span:before{content:'';display:inline-block;width:11px;height:11px;background:var(--group);border-radius:50%;margin-right:6px}.types-hint{text-align:center;color:#4c6980;font-size:13px}.code-guide{max-width:560px;margin:15px auto 25px;padding:15px;border:1px solid #b8c9d8;border-radius:10px;font-size:13px;line-height:1.8}.code-guide summary{cursor:pointer;font-weight:700}.strengths li{text-align:left;padding:16px!important}.strengths li strong{display:block;font-size:16px}.strengths li span{display:block;font-weight:400;font-size:14px;line-height:1.8;margin-top:8px;color:#416079}.save-result{text-align:center;padding:24px 12px 0}.save-result button,#downloadResult{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border:0;border-radius:999px;background:#123954;color:#fff;padding:14px 28px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}.save-result button:disabled{opacity:.6;cursor:wait}#saveStatus{font-size:13px;line-height:1.7;color:#47637c}.save-dialog{width:min(620px,calc(100% - 24px));max-height:90vh;overflow:auto;border:0;border-radius:16px;padding:24px;box-sizing:border-box;color:#17334d}.save-dialog::backdrop{background:#061526b8}#closeSave{float:right;border:0;border-radius:50%;width:40px;height:40px;font-size:24px;cursor:pointer}.save-dialog h2{font-size:22px}.save-dialog p{font-size:14px;line-height:1.7}.save-dialog img{display:block;width:100%;height:auto;-webkit-touch-callout:default;margin-top:20px}#downloadResult{box-sizing:border-box;width:100%}#styleBars .style-row:nth-child(1) .style-fill{background:#e65b61}#styleBars .style-row:nth-child(2) .style-fill{background:#258ccc}#styleBars .style-row:nth-child(3) .style-fill{background:#30aa91}#styleBars .style-row:nth-child(4) .style-fill{background:#e6b729}@media(max-width:700px){.strengths{grid-template-columns:1fr!important}.type-name{font-size:12px}.group-legend{justify-content:flex-start;padding:0 8px}}@media(prefers-reduced-motion:reduce){.type-tile{transition:none}}

/* One shared nameplate treatment for all 16 illustrations. */
.animal-card,.result-illustration{position:relative;container-type:inline-size;}
.animal-nameplate{position:absolute;left:2%;right:2%;bottom:4%;height:15%;display:flex;align-items:center;justify-content:center;isolation:isolate;color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:900;font-style:italic;font-size:6.5cqw;line-height:1;letter-spacing:-.04em;white-space:nowrap;text-align:center;pointer-events:none;}
.animal-nameplate:before{content:"";position:absolute;inset:0;background:#030506;z-index:-1;clip-path:polygon(3% 0%,99% 0%,96% 10%,100% 15%,97% 22%,99% 30%,96% 35%,100% 42%,97% 48%,99% 55%,96% 62%,99% 68%,95% 75%,98% 84%,94% 90%,97% 100%,0% 100%,3% 90%,0% 83%,4% 76%,1% 68%,4% 61%,0% 55%,3% 48%,1% 40%,5% 33%,1% 27%,5% 20%,2% 13%,6% 7%);}

/* Uniform separation between every illustration and its four-letter code. */
.type-grid .type-tile{background:transparent;}
.type-grid .type-tile>summary{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;background:transparent;}
.type-grid .type-tile>summary>.type-img-wrap.full-card{display:block;margin:0;padding:0;line-height:0;}
.type-grid .type-tile>summary>.type-name{margin:0;}