/* Portraits are presentation only; the living character stages keep their canvas. */
.character-card-art{position:relative;isolation:isolate;width:100%;aspect-ratio:2/3;min-width:0;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 50% 32%,#e4fff1 0,#78d9d2 44%,#267a96 100%);color:#fffdf0;text-align:left;box-sizing:border-box}
.character-card-art:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #fff9,inset 0 -1px 0 #072f58; background:linear-gradient(180deg,#032e4808 35%,#082e485c 65%,#062c46ed 100%)}
.character-card-art .character-card-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;margin:0;border-radius:0;aspect-ratio:auto;object-fit:cover;background:none;filter:none;transition:transform .35s ease}
.character-card-art[data-art=portrait] .character-card-image{object-fit:contain;padding:8% 6% 23%;box-sizing:border-box;filter:drop-shadow(0 6px 5px #19465535)}
.character-card-art .character-card-copy{position:absolute;inset:auto 10px 13px;z-index:2;display:flex;flex-direction:column;gap:3px;padding:0;margin:0;pointer-events:none}
.character-card-art .character-card-rarity{font:900 9px/1.3 'Nunito Sans',sans-serif;text-transform:uppercase;letter-spacing:1.35px;color:#bdf6ec;margin:0;min-height:0;background:none;border:0;padding:0}
.character-card-art .character-card-name{display:block;font:800 clamp(17px,1.7vw,25px)/1.07 'Baloo 2',sans-serif;color:#fffbed;text-shadow:0 2px 3px #092d5266;overflow-wrap:anywhere;margin:0;padding:0}
.character-card-art .character-card-subtitle{display:block;font:800 11px/1.25 'Nunito Sans',sans-serif;color:#d7f4f4;letter-spacing:.1px;margin:0;padding:0}
.character-card-jewel{position:absolute;z-index:2;right:11px;top:11px;width:13px;height:17px;transform:rotate(35deg);border:1px solid #faffdc;border-radius:45% 45% 45% 8%;background:radial-gradient(circle at 30% 25%,#fff 0 10%,#9ef6ed 15% 35%,#37aab9 70%);box-shadow:0 2px 7px #174d6455;pointer-events:none}
.character-card-art[data-rarity=legendary]{background:radial-gradient(ellipse at 45% 30%,#fff0bd,#b0acd9 52%,#494e8a)}
.character-card-art[data-rarity=legendary]:after{box-shadow:inset 0 0 0 2px #ffe6a4,inset 0 0 0 5px #98753e45;background:linear-gradient(180deg,#55325e08 35%,#332e535c 65%,#302947f5 100%)}
.character-card-art[data-rarity=legendary] .character-card-rarity{color:#ffe69e}
.character-card-art[data-rarity=legendary] .character-card-jewel{background:radial-gradient(circle at 30% 25%,#fffef3 0 14%,#fff0a1 20% 37%,#dc9a36 78%);box-shadow:0 0 12px #ffe5a477}
.character-card-art[data-rarity=legendary] .character-card-copy:before{content:"";height:1px;margin:0 0 5px;background:linear-gradient(90deg,#ffe3a9a6,transparent)}
@media(hover:hover){.home-character-card:hover .character-card-image,.skin-card:hover .character-card-image{transform:scale(1.035)}}
.home-character-card:focus-visible,.skin-card button:focus-visible{outline:3px solid #146879!important;outline-offset:4px}

/* All eight choices have the same frame and keep one real button per hero. */
#character-dialog{width:min(1050px,calc(100vw - 32px));background:radial-gradient(ellipse at 60% 0,#ffffed,#edfafa 50%,#d5f0ef);border-color:#a0dedc}
#home-character-grid{gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
#home-character-grid .home-character-card{display:block;padding:4px 4px 11px;border-radius:20px;background:#f6ffef;border:2px solid #a3d8d4;box-shadow:0 4px 0 #6cabbb45;overflow:hidden}
#home-character-grid .home-character-card[aria-pressed=true]{background:#fff5ca;border-color:#d9a345;box-shadow:0 0 0 2px #fff0ad,0 5px 0 #bda15355}
#home-character-grid .home-character-card[aria-pressed=true]:after{top:14px;left:14px;right:auto;width:25px;height:25px;line-height:25px;background:#fff4c9;color:#715321;border:1px solid #dcbd6b;box-shadow:0 2px 7px #133b5677;z-index:3}
#home-character-grid .character-card-art{aspect-ratio:2/3;max-height:290px}
#home-character-grid .character-card-image{height:100%;margin:0;object-fit:cover}
#home-character-grid [data-art=portrait] .character-card-image{object-fit:contain}
#home-character-grid .character-card-name{font-size:26px;line-height:1.08}
#home-character-grid .character-card-subtitle{font-size:11px}
#home-character-grid .kit-label{font-size:11px;line-height:1.35;padding:0 4px;color:#385e71}
#home-character-grid .kit-label:first-of-type{margin-top:9px}
#home-character-grid .kit-label b{font-size:9px;color:#31777f}

/* Collections: the complete illustrated look and a separate reachable action. */
.skins-layout{grid-template-columns:minmax(210px,.65fr) minmax(0,2fr);gap:18px}
.skins-cards{gap:10px;align-items:start}
.skins-cards .skin-card{padding:4px 4px 10px;border-radius:20px;border-width:2px;background:#f7ffed;overflow:visible}
.skins-cards .skin-card .character-card-art{border-radius:14px}
.skins-cards .skin-card[data-rarity=legendary]{background:#fff3c8;border-color:#dfbb69;box-shadow:0 5px 0 #b592585c}
.skins-cards .skin-card[data-selected=true]{border-color:#d8a540;box-shadow:0 0 0 2px #fff3bc,0 5px 0 #bc9a565c}
.skins-cards .skin-card button{margin:8px 5px 0;min-height:38px;font-size:12px;padding:7px 4px;border-radius:10px;box-shadow:0 3px 0 #7cbbc0;white-space:normal}
.skins-cards .skin-card button[aria-pressed=true]{background:#197981;color:#fffce6;border-color:#9dddd2;box-shadow:0 3px 0 #15515f}
.skins-cards .skin-card[data-rarity=legendary] button[aria-pressed=true]{background:#70597c;border-color:#ecd494;color:#fff7d2;box-shadow:0 3px 0 #58475f}
.skins-cards .character-card-name{font-size:clamp(16px,1.5vw,23px)}
.skins-stage{min-width:0}
@media(min-height:601px) and (min-width:601px){
 .skins-choice{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px}
 .skins-cards{height:100%;align-items:stretch}
 .skins-cards .skin-card{min-height:0}
 .skins-cards .character-card-art{flex:1;aspect-ratio:auto;min-height:0}
}

/* Matching uses server roster identities; load progress remains separate. */
#matchmaking-screen .matching-card,#matchmaking-screen[data-team-size="1"] .matching-card{display:flex;flex-direction:column;gap:0;width:155px;max-width:30%;padding:4px 4px 7px;border:2px solid #c2f3e4;border-radius:17px;background:#edfff1;color:#205466;text-align:center}
#matchmaking-screen .matching-card .character-card-art{flex:1;min-height:0;border-radius:11px;aspect-ratio:2/3}
#matchmaking-screen .matching-card .character-card-image{width:100%;height:100%;filter:none;object-fit:cover}
#matchmaking-screen .matching-card [data-art=portrait] .character-card-image{object-fit:contain;filter:drop-shadow(0 4px 4px #17455455)}
#matchmaking-screen .matching-player-name{flex:none;padding:5px 3px 0;font-size:12px;line-height:1.3;min-height:16px}
#matchmaking-screen .matching-player-ready{flex:none;margin:4px 3px 0;font-size:10px;padding:3px 4px;background:#246c7f;color:#fff}
#matchmaking-screen .matching-card .character-card-name{font-size:21px}
#matchmaking-screen .matching-card .character-card-subtitle{font-size:10px}
#matchmaking-screen .character-card-stamp{display:none}
#matchmaking-screen[data-team-size="1"] .matching-card{width:250px;max-width:100%;max-height:470px}
#matchmaking-screen[data-team-size="1"] .matching-card .character-card-name{font-size:29px}
#matchmaking-screen[data-team-size="1"] .matching-player-name{font-size:15px;padding-top:8px}
#matchmaking-screen .opponents .matching-card{background:#fcf1ee;border-color:#f1cad7}

@media(max-width:1000px){.skins-layout{grid-template-columns:minmax(140px,.55fr) minmax(0,2fr);gap:10px}.skins-cards{gap:7px}.character-card-art .character-card-copy{inset:auto 8px 10px}.character-card-art .character-card-rarity{font-size:8px;letter-spacing:.65px}.character-card-art .character-card-subtitle{font-size:10px}.skins-cards .skin-card{border-radius:15px}.skins-cards .skin-card button{font-size:11px;margin:7px 2px 0}.character-card-jewel{width:10px;height:14px;top:9px;right:9px}}
@media(max-width:600px){#character-dialog{padding:24px 16px}#home-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}#home-character-grid .character-card-name{font-size:25px}#home-character-grid .character-card-art{max-height:none}.skins-layout{grid-template-columns:minmax(95px,.5fr) minmax(0,1.5fr)}.skins-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.skins-choice{overflow-y:auto;padding:3px 3px 8px}.skins-heroes button{min-width:50px;min-height:32px}.skins-heading>span{display:none}.skins-cards .character-card-name{font-size:17px}.skins-cards .skin-card button{min-height:38px}}
@media(max-height:600px) and (min-width:601px){#character-dialog{padding:18px 23px}#home-character-grid{gap:10px}#home-character-grid .character-card-art{max-height:240px}#home-character-grid .character-card-name{font-size:24px}.skins-layout{grid-template-columns:minmax(115px,.5fr) minmax(0,2fr)}.skins-cards{height:auto;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.skins-choice{display:block;overflow-y:auto;padding:3px 3px 9px}.skins-cards .character-card-art{aspect-ratio:2/3}.skins-cards .character-card-name{font-size:16px}.skins-cards .skin-card button{min-height:34px;flex-basis:auto;font-size:11px}.skins-cards .character-card-rarity{font-size:8px}.skins-cards .character-card-subtitle{font-size:10px}.skins-description{display:none}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]){grid-template-rows:38px minmax(0,1fr) 24px minmax(0,1fr) auto}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card{width:230px;max-width:31%;display:grid;grid-template-columns:63px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:4px 6px;padding:3px 6px 3px 3px;align-items:center}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-art{grid-column:1;grid-row:1/3;height:100%;width:63px;aspect-ratio:auto}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-copy{inset:auto 4px 5px}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-name{font-size:12px}#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-rarity,#matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-subtitle{display:none}#matchmaking-screen .matching-player-name{padding:0;font-size:11px;min-height:0}#matchmaking-screen .matching-player-ready{font-size:9px;margin:0}#matchmaking-screen[data-team-size="1"] .matching-card{width:172px;padding:4px}#matchmaking-screen[data-team-size="1"] .matching-card .character-card-name{font-size:20px}#matchmaking-screen[data-team-size="1"] .matching-player-name{font-size:11px;padding:3px 0 0}#matchmaking-screen[data-team-size="1"] .matching-player-ready{font-size:9px;margin:3px 0 0;padding:2px}}
@media(prefers-reduced-motion:reduce){.character-card-image{transition:none!important}.home-character-card:hover .character-card-image,.skin-card:hover .character-card-image{transform:none}#matchmaking-screen .matching-water,#matchmaking-screen .matching-card,#matchmaking-screen .matching-vs,#matchmaking-screen .matching-mystery i{animation:none!important}.skins-view button{transition:none}}
@media(max-height:600px) and (min-width:601px){
 .skins-choice{display:flex;overflow:visible;padding:3px 3px 8px;gap:0}
 .skins-cards{height:100%;width:100%;align-items:stretch;min-height:0}
 .skins-cards .skin-card{min-height:0;padding-bottom:7px;overflow:hidden}
 .skins-cards .skin-card .character-card-art{flex:1;aspect-ratio:auto;min-height:0}
 .skins-cards .character-card-art[data-art=card] .character-card-image{object-position:center 10%!important}
 .skins-cards .skin-card button{flex:0 0 34px;margin-top:5px;margin-bottom:0}
 .skins-cards .character-card-copy{inset:auto 4px 4px;gap:0}
 .skins-cards .character-card-name{font-size:11px;line-height:1.1}
 .skins-cards .character-card-subtitle{display:none}
 .skins-cards .character-card-rarity{font-size:7px;line-height:1.15}
 .skins-choice .skin-description{display:none}
}

/* Every illustrated look carries the same noninteractive rarity stamp. */
.character-card-art .character-card-stamp{--stamp-ink:#40586a;--stamp-edge:#a5bac6;--stamp-high:#fffefa;--stamp-low:#dce8ef;position:absolute;z-index:3;top:9px;left:9px;right:9px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:29px;padding:3px 7px 3px 4px;box-sizing:border-box;border:1px solid var(--stamp-edge);border-radius:6px;background:linear-gradient(110deg,var(--stamp-high),var(--stamp-low));box-shadow:0 2px 5px #082f4b40,inset 0 0 0 1px #fff8;color:var(--stamp-ink);pointer-events:none}
.character-card-art .character-card-stamp-emblem{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1px solid var(--stamp-edge);border-radius:50%;box-sizing:border-box;background:radial-gradient(circle at 35% 25%,#fff,var(--stamp-low));box-shadow:inset 0 0 0 2px #fff9,0 1px 3px #092e4326;color:var(--stamp-ink);padding:2px}
.character-card-art .character-card-stamp svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.character-card-art .character-card-stamp-label{display:block;min-width:0;margin:0;padding:0;font:900 11px/1.2 'Nunito Sans',sans-serif;letter-spacing:.35px;text-transform:none;white-space:nowrap;overflow:visible;color:var(--stamp-ink)}
.character-card-art[data-rarity=regular] .character-card-stamp{--stamp-ink:#095a75;--stamp-edge:#5fb7cd;--stamp-high:#effffe;--stamp-low:#91e2e9}
.character-card-art[data-rarity=regular] .character-card-stamp-emblem{border-radius:6px;box-shadow:inset 0 0 0 2px #d6fff5,0 1px 3px #08374430}
.character-card-art[data-rarity=legendary] .character-card-stamp{--stamp-ink:#694212;--stamp-edge:#c99339;--stamp-high:#fffce1;--stamp-low:#efc26b;border-style:double;border-width:3px;padding:1px 5px 1px 2px;box-shadow:0 2px 7px #3e275756,inset 0 0 0 1px #fff7bd}
.character-card-art[data-rarity=legendary] .character-card-stamp-emblem{border-radius:5px;background:radial-gradient(circle at 40% 20%,#fffcec,#f8d889 70%);outline:1px solid #fff8d2;outline-offset:1px}
#home-character-grid .home-character-card[aria-pressed=true]:after{top:51px;left:auto;right:14px}
@media(max-width:1000px){.character-card-art .character-card-stamp{top:7px;left:6px;right:6px;gap:4px;padding:3px 5px;min-height:24px}.character-card-art .character-card-stamp-emblem{flex-basis:18px;width:18px;height:18px;padding:1px}.character-card-art .character-card-stamp-label{font-size:10px;letter-spacing:0}.character-card-art[data-rarity=legendary] .character-card-stamp{padding:1px 3px}#home-character-grid .home-character-card[aria-pressed=true]:after{top:43px}}
@media(max-height:600px) and (min-width:601px){
 #matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]){grid-template-columns:minmax(0,1fr)}
 #matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) :is(.matching-team,.matching-cards){min-width:0}
 #matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card{flex:1 1 0;width:0;min-width:0;max-width:230px;grid-template-columns:92px minmax(0,1fr)}
 #matchmaking-screen:is([data-team-size="2"],[data-team-size="3"]) .matching-card .character-card-art{width:92px}
 #matchmaking-screen .matching-card .character-card-stamp{top:4px;left:3px;right:3px;gap:3px;min-height:21px;padding:2px 3px}
 #matchmaking-screen .matching-card .character-card-stamp-emblem{flex-basis:15px;width:15px;height:15px;padding:0}
 #matchmaking-screen .matching-card .character-card-stamp-label{font-size:9px;letter-spacing:0}
 #matchmaking-screen .matching-card [data-rarity=legendary] .character-card-stamp{padding:0 1px}
}
@media(max-width:1000px){.character-card-art .character-card-stamp-label{font-size:9px}.character-card-art .character-card-stamp{gap:3px}.character-card-art .character-card-stamp-emblem{flex-basis:16px;width:16px;height:16px}.character-card-art[data-rarity=legendary] .character-card-stamp{padding:1px}}
@media(max-height:600px) and (min-width:601px){
 .skins-cards .character-card-stamp{top:3px;left:3px;right:3px;min-height:20px;padding:1px 2px;gap:3px}
 .skins-cards .character-card-stamp-emblem{flex-basis:14px;width:14px;height:14px;padding:0}
 .skins-cards [data-rarity=legendary] .character-card-stamp{padding:0}
}