/* Illustrated skill seals, open on the page rather than trapped in square tiles. */
.character-skill-group{padding-top:21px;background:radial-gradient(ellipse at 50% 0,#e4c78110,transparent 68%)}
.character-skill-group .character-section-title{margin-bottom:4px}
.character-skill-group .character-section-title h3{color:#f0d69e;font:700 20px/1.3 var(--display);letter-spacing:.13em}
.character-skill-group .character-subtle-button{border-bottom:1px solid #bc9d62a0;padding:3px 0;color:#d6c39d;font:12px var(--display)}
.character-skill-group .character-subtle-button[aria-pressed=true]{color:#ffe2a4;border-color:#ffe2a4}
.character-skill-premise{margin:7px 0 17px;padding:0 0 0 12px;color:#b8c5b9;font:12px/1.7 var(--display)}
.character-skill-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.character-skill{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:177px;gap:0;padding:9px 10px 14px;border:0;border-bottom:2px solid #c3a66a63;border-radius:0;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--skill-art-tone),transparent 88%),transparent 66%),linear-gradient(180deg,#18323b3a,#0d263054);box-shadow:none;color:#f2e1bd;overflow:hidden;transition:transform .22s ease,background .22s ease,border-color .22s ease}
.character-skill:hover{transform:translateY(-4px);border-bottom-color:#ebcf93;background:radial-gradient(ellipse at 50% 53%,color-mix(in srgb,var(--skill-art-tone),transparent 75%),transparent 67%),#17313a70;box-shadow:none}
.character-skill.selected{border-bottom-color:#ffe3a5;background:radial-gradient(ellipse at 50% 52%,color-mix(in srgb,var(--skill-art-tone),transparent 68%),transparent 68%),#17333b91;box-shadow:0 12px 26px #07191c43}
.character-skill:after,.character-skill.is-active-skill:after{content:none}
.character-skill:before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#fff0c09c,transparent);opacity:0}
.character-skill.selected:before{opacity:1}
.character-skill-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:20px;gap:4px;color:#d6bd86}
.character-skill-head em{font:700 13px/1 var(--display);font-style:normal;letter-spacing:.08em}
.character-skill-head i{font:10px/1 var(--body);font-style:normal;color:#a8b6ac;white-space:nowrap}
.character-skill.is-active-skill .character-skill-head i{color:#f1d58e}
.character-skill-icon{display:block;position:relative;flex:none;width:90px;height:90px;margin:0 auto 2px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--skill-art-tone,#e5ca8a);filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--skill-art-tone),transparent 60%))}
.character-skill.selected .character-skill-icon{filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--skill-art-tone),transparent 42%))}
.character-skill-icon .skill-art-svg{display:block;width:100%;height:100%;overflow:visible}
.skill-art-halo{fill:color-mix(in srgb,var(--skill-art-tone),transparent 92%);stroke:currentColor;stroke-width:1;stroke-dasharray:2 5;opacity:.7}
.skill-art-corners{fill:none;stroke:currentColor;stroke-width:1.3;opacity:.58}
.skill-art-motif{stroke:currentColor}
.skill-art-rays{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.7}
.skill-art-seal{fill:none;stroke:currentColor;stroke-width:1.25;stroke-dasharray:3 5;opacity:.45}
.character-skill>span:last-child{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;gap:3px}
.character-skill small{color:#b3c3b8;font-size:10px;letter-spacing:.12em}
.character-skill b{display:-webkit-box;max-width:100%;overflow:hidden;white-space:normal;text-overflow:clip;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.4;text-align:center;font:700 14px/1.4 var(--display);color:#f1d7a6;overflow-wrap:anywhere}
.character-skill:hover b{white-space:normal;overflow:hidden}
.character-skill-detail{display:grid;grid-template-columns:minmax(125px,29%) minmax(0,1fr);align-items:center;gap:4px 22px;min-height:85px;margin-top:14px;padding:15px 20px;border:0;border-left:2px solid #d8ba7a;background:linear-gradient(90deg,#e8ca7d16,#d7b87b05);box-shadow:inset 0 1px #d5b57029}
.character-skill-detail-head{display:flex;flex-direction:column;gap:6px;grid-row:1 / span 2;align-self:center}
.character-skill-detail-head strong{font:700 20px/1.35 var(--display);color:#f6d99d}
.character-skill-detail-head small{font-size:10px;color:#b8c8b9;letter-spacing:.05em}
.character-skill-keywords{white-space:normal;align-self:end;font-size:10px;letter-spacing:.12em;color:#e4c688}
.character-skill-detail p{align-self:start;font-size:12px;line-height:1.7;color:#d5dbd0;overflow-wrap:anywhere}
@media(max-width:1450px){.character-skill-list{grid-template-columns:repeat(2,minmax(0,1fr))}.character-skill{min-height:149px}.character-skill-icon{width:74px;height:74px}}
@media(max-width:780px){.character-skill-list{gap:7px}.character-skill{min-height:142px}.character-skill-icon{width:66px;height:66px}.character-skill-detail{grid-template-columns:1fr;gap:6px}.character-skill-detail-head{grid-row:auto}.character-skill-detail-head strong{font-size:17px}}
@media(max-width:480px){.character-skill{min-height:133px;padding:6px 2px 10px}.character-skill-head{padding-inline:4px}.character-skill-head em{font-size:11px}.character-skill-head i{font-size:8px}.character-skill-icon{width:52px;height:52px}.character-skill b{font-size:11px}.character-skill small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.character-skill{transition:none}}