/* Level-up ceremonies. Effects, compact cards and controls stay inside this modal. */
.modal.reward-modal.upgrade-modal{
 --upgrade-gold:#f3d38b;--upgrade-light:#fff3cf;--upgrade-muted:#c1cbb8;
 width:min(100%,800px);max-width:800px;max-height:calc(100dvh - 36px);
 padding:27px 32px 21px;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;
 background:radial-gradient(ellipse at 34% 40%,#47684635,transparent 62%),
  repeating-linear-gradient(0deg,#c9b57a05 0 1px,transparent 1px 4px),
  linear-gradient(145deg,#293f31,#13291f 58%,#101e19);
 border:4px ridge #c7ac73;box-shadow:0 24px 100px #000c,inset 0 0 0 2px #ead59935;
 scrollbar-gutter:stable;scrollbar-width:thin;
}
.modal.reward-modal.upgrade-modal .modal-close{
 position:sticky;top:0;right:auto;float:right;z-index:30;
 margin:-12px -17px -26px 0;width:36px;height:36px;min-width:36px;
}
.upgrade-modal .upgrade-celebration{
 --upgrade-clan:#78a99c;--upgrade-energy:color-mix(in srgb,var(--upgrade-clan) 65%,#e4c474);
 position:relative;isolation:isolate;min-width:0;
}
.upgrade-modal .upgrade-heading{text-align:center;position:relative;z-index:4;margin:0 auto 15px;padding:0 34px;max-width:640px}
.upgrade-modal .upgrade-heading .eyebrow{font-size:10px;letter-spacing:2px;color:#e3c57d;line-height:1.4}
.upgrade-modal .upgrade-heading h2{margin:7px 0 0;font-size:clamp(27px,3.6vw,38px);line-height:1.15;color:#fff0b9;text-wrap:balance}
.upgrade-modal .upgrade-heading .upgrade-hero-name{margin:8px 0 0;color:#f0e7cd;font-size:17px;font-weight:600;line-height:1.3;text-wrap:balance}
.upgrade-modal .upgrade-levels{display:flex;align-items:center;justify-content:center;gap:13px;margin:12px 0 0;font-variant-numeric:tabular-nums}
.upgrade-modal .upgrade-levels :is(.old-level,.new-level){display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:35px;padding:5px 14px;border:1px solid #9b976b60;border-radius:5px;font:700 20px/1.1 Georgia,'Times New Roman',serif;box-shadow:inset 0 1px #ffffff0d}
.upgrade-modal .upgrade-levels .old-level{color:#aebfae;background:#10211980}
.upgrade-modal .upgrade-levels .new-level{color:#f7dda2;border-color:#d6b77499;background:linear-gradient(135deg,#53634770,#443b2170);transition:box-shadow 1s,color 1s,border-color 1s}
.upgrade-modal .upgrade-levels>i{font-style:normal;font-size:20px;color:#bfa976;line-height:1}
.upgrade-modal .upgrade-layout{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:36px;align-items:center;width:100%;max-width:670px;margin:0 auto}
.upgrade-modal .upgrade-art{position:relative;isolation:isolate;min-width:0;width:100%;padding:12px 0 18px;perspective:1000px}
.upgrade-modal .upgrade-art::before{
 content:"";position:absolute;inset:3% -20%;z-index:-3;pointer-events:none;
 background:radial-gradient(ellipse,var(--upgrade-energy),transparent 68%);
 opacity:.13;filter:blur(21px);transform:scale(.88);transition:opacity 1.4s,transform 1.8s;
}
.upgrade-modal .upgrade-card-stack{position:relative;z-index:3;width:100%;max-width:250px;aspect-ratio:.65;margin:0 auto;transform-style:preserve-3d}
.upgrade-modal :is(.upgrade-card-before,.upgrade-card-after){position:absolute;inset:0;transform-origin:50% 60%;backface-visibility:hidden;pointer-events:none}
.upgrade-modal .upgrade-card-before{z-index:1;opacity:1;transform:translateY(0) scale(1);transition:opacity .85s,transform 1.05s,filter 1.05s}
.upgrade-modal .upgrade-card-after{z-index:2;opacity:0;transform:translateY(9px) scale(.96);filter:brightness(1.15);transition:opacity .8s,transform 1s,filter 1s}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card{
 width:100%;height:100%;min-height:0;padding:9px 8px 7px;border-width:2px;border-radius:16px 16px 13px 13px;
 box-shadow:0 11px 23px #0007,inset 0 0 0 2px #14211b,inset 0 0 0 3px #e8d8aa66;
}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .portrait{
 flex:0 0 auto;width:86%;height:auto;min-height:0;aspect-ratio:.88;margin:22px auto 0;border-width:4px;
}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-body{
 flex:1 0 auto;min-height:0;margin:0;padding:2px 0;border-width:23px 16px 17px;
}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-name{
 margin:0;padding:1px 0 0;min-height:34px;line-height:1.2;font-size:clamp(14px,6.8cqw,18px);
 border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;text-align:center;
}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card :is(.card-ability,.card-mini-info,.card-clan){display:none!important}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top{top:12px;left:11px;right:11px;gap:5px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .cost{min-width:27px;min-height:25px;padding:4px 5px;font-size:12px;border-radius:7px 7px 10px 10px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .level{padding:4px 5px;font-size:9px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-rarity-gem{width:23px;height:23px;flex-basis:23px;margin-top:-2px;border-width:1px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-rarity-gem::after{width:9px;height:9px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats>div{
 top:calc(39cqw + 20px);width:42px;height:65px;gap:2px;padding:4px 1px;border-width:2px;border-radius:7px 21px 21px 7px;
}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats .stat-power{left:0}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats .stat-damage{right:0;border-radius:21px 7px 7px 21px!important}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats b{font-size:26px;letter-spacing:-.5px;line-height:1}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats small{font-size:7px}
.upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats .stat-icon{width:14px;height:14px;line-height:14px}

/* One broad sweep of light. No repeating pulses or strobing. */
.upgrade-modal :is(.upgrade-orbit,.upgrade-rays,.upgrade-particles,.upgrade-flash){pointer-events:none;position:absolute}
.upgrade-modal .upgrade-orbit{inset:0 -13%;z-index:-1;opacity:0;transition:opacity 1.2s}
.upgrade-modal .upgrade-orbit :is(i,span,.upgrade-ring){position:absolute;display:block;left:50%;top:51%;width:111%;aspect-ratio:1;border:1px solid #e6cf87;border-radius:50%;opacity:.5;transform:translate(-50%,-50%) rotate(-26deg) scaleY(.62);box-shadow:0 0 14px #d6bc7533,inset 0 0 13px #d6bc7518}
.upgrade-modal .upgrade-orbit :is(i,span,.upgrade-ring):nth-child(2){width:99%;border-color:var(--upgrade-clan);transform:translate(-50%,-50%) rotate(39deg) scaleY(.63);opacity:.7}
.upgrade-modal .upgrade-orbit :is(i,span,.upgrade-ring):nth-child(3){width:130%;border:1px dashed #d7c48c70;transform:translate(-50%,-50%) rotate(-8deg) scaleY(.67);opacity:.35}
.upgrade-modal .upgrade-rays{inset:-10% -31%;z-index:-2;opacity:0;transform:rotate(-7deg) scale(.85);transition:opacity 1.3s,transform 2s;background:repeating-conic-gradient(from 10deg,#ecd18c00 0deg 6deg,#ecd18c2a 7deg 9deg,#ecd18c00 10deg 24deg);mask-image:radial-gradient(ellipse,#000 12%,transparent 71%)}
.upgrade-modal .upgrade-particles{inset:-4% -16%;z-index:4;overflow:hidden}
.upgrade-modal .upgrade-particles>i{position:absolute;left:var(--particle-x,50%);top:75%;width:4px;height:4px;opacity:0;border-radius:50%;background:#ffe5a1;box-shadow:0 0 7px #e1ba64;transform:translateY(0)}
.upgrade-modal .upgrade-particles>i:nth-child(3n){width:2px;height:2px;background:var(--upgrade-clan)}
.upgrade-modal .upgrade-flash{z-index:5;inset:6% -4%;opacity:0;border-radius:30%;background:radial-gradient(ellipse,#fff3c3b8,#f4d17a50 35%,transparent 72%);mix-blend-mode:screen}
.upgrade-modal .upgrade-sigil{position:relative;z-index:5;width:37px;height:37px;margin:13px auto -13px;display:flex;align-items:center;justify-content:center;color:var(--upgrade-clan);border:1px solid color-mix(in srgb,var(--upgrade-clan) 65%,#e4d093);border-radius:50%;background:linear-gradient(145deg,#385c47,#11241b);box-shadow:0 3px 8px #0008,inset 0 0 0 3px #d4be7926;transition:box-shadow 1s,transform 1s}
.upgrade-modal .upgrade-sigil svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.upgrade-modal .upgrade-celebration.is-running[data-phase=intro] .upgrade-card-stack{animation:upgrade-card-arrive .8s cubic-bezier(.2,.7,.2,1) both}
.upgrade-modal .upgrade-celebration:is([data-phase=charge],[data-phase=transform]) .upgrade-art::before{opacity:.42;transform:scale(1.07)}
.upgrade-modal .upgrade-celebration:is([data-phase=charge],[data-phase=transform]) .upgrade-orbit{opacity:.4}
.upgrade-modal .upgrade-celebration[data-phase=charge] .upgrade-card-stack{animation:upgrade-card-charge 1.8s ease-out both}
.upgrade-modal .upgrade-celebration:is([data-phase=transform],[data-phase=stats],[data-phase=complete],.is-complete) .upgrade-card-before{opacity:0;transform:translateY(-5px) scale(1.025);filter:brightness(1.2)}
.upgrade-modal .upgrade-celebration:is([data-phase=transform],[data-phase=stats],[data-phase=complete],.is-complete) .upgrade-card-after{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
.upgrade-modal .upgrade-celebration:is([data-phase=transform],[data-phase=stats]) .upgrade-flash{animation:upgrade-soft-flash 1.6s ease-out both}
.upgrade-modal .upgrade-celebration.is-running:is([data-phase=charge],[data-phase=transform]) .upgrade-particles>i{animation:upgrade-ember-rise 2.5s var(--particle-delay,0s) ease-out both}
.upgrade-modal .upgrade-celebration:is([data-phase=stats],[data-phase=complete],.is-complete) .upgrade-levels .new-level{color:#fff0b6;border-color:#e4c87c;box-shadow:0 0 18px #ecd08027,inset 0 1px #fff4ce2b}
.upgrade-modal .upgrade-celebration:is([data-phase=complete],.is-complete) .upgrade-art::before{opacity:.2;transform:scale(1)}
.upgrade-modal .upgrade-celebration:is([data-phase=stats],[data-phase=complete],.is-complete) :is(.upgrade-orbit,.upgrade-rays){opacity:.15;transform:rotate(6deg) scale(1)}
.upgrade-modal .upgrade-celebration:is([data-phase=complete],.is-complete) :is(.upgrade-flash,.upgrade-particles){opacity:0}

/* Lv5 changes the portrait. Lv10 adds wider golden rays and a longer reveal. */
.upgrade-modal .upgrade-evolution .upgrade-art::before{filter:blur(17px)}
.upgrade-modal .upgrade-evolution:is([data-phase=charge],[data-phase=transform]) .upgrade-art::before{opacity:.68;transform:scale(1.19)}
.upgrade-modal .upgrade-evolution:is([data-phase=charge],[data-phase=transform]) .upgrade-orbit{opacity:.82}
.upgrade-modal .upgrade-evolution:is([data-phase=charge],[data-phase=transform]) .upgrade-rays{opacity:.65;transform:rotate(9deg) scale(1.05)}
.upgrade-modal .upgrade-evolution:is([data-phase=charge],[data-phase=transform]) .upgrade-orbit{animation:upgrade-orbit-gather 2.7s ease-in-out both}
.upgrade-modal .upgrade-evolution:is([data-phase=transform],[data-phase=stats]) .upgrade-card-before{animation:upgrade-old-form 1.2s ease-in both}
.upgrade-modal .upgrade-evolution:is([data-phase=transform],[data-phase=stats]) .upgrade-card-after{animation:upgrade-new-form 1.65s cubic-bezier(.18,.7,.25,1) both}
.upgrade-modal .upgrade-evolution:is([data-phase=transform],[data-phase=stats]) .upgrade-flash{animation:upgrade-evolution-light 1.8s ease-out both}
.upgrade-modal .upgrade-evolution[data-phase=transform] .upgrade-sigil{transform:scale(1.1);box-shadow:0 0 22px color-mix(in srgb,var(--upgrade-clan) 50%,transparent),0 0 45px #e9c16c55,inset 0 0 0 3px #f0d38955}
.upgrade-modal .upgrade-apex{--upgrade-energy:color-mix(in srgb,var(--upgrade-clan) 36%,#f4ce70)}
.upgrade-modal .upgrade-apex .upgrade-heading h2{color:#ffe0a0;text-shadow:0 2px 14px #0009,0 0 22px #d1a95833}
.upgrade-modal .upgrade-apex .upgrade-rays{inset:-20% -45%;background:repeating-conic-gradient(from 7deg,#f8d08000 0deg 4deg,#f8d08038 5deg 8deg,#f8d08000 9deg 20deg)}
.upgrade-modal .upgrade-apex:is([data-phase=charge],[data-phase=transform]) .upgrade-art::before{opacity:.82;transform:scale(1.24)}
.upgrade-modal .upgrade-apex:is([data-phase=charge],[data-phase=transform]) .upgrade-rays{opacity:.88;transform:rotate(14deg) scale(1.1)}
.upgrade-modal .upgrade-apex:is([data-phase=transform],[data-phase=stats]) .upgrade-card-after{animation-duration:1.95s}
.upgrade-modal .upgrade-apex:is([data-phase=transform],[data-phase=stats]) .upgrade-flash{animation-duration:2.1s}
.upgrade-modal .upgrade-apex:is([data-phase=transform],[data-phase=stats]) .upgrade-card-stack{animation:upgrade-apex-rise 2s cubic-bezier(.2,.65,.2,1) both}

.upgrade-modal .upgrade-gains{position:relative;z-index:7;min-width:0;display:grid;gap:11px;align-content:center}
.upgrade-modal .upgrade-stat-row{min-width:0;position:relative;padding:13px 15px 12px;border:1px solid #c9b57655;border-radius:7px;background:linear-gradient(120deg,#35503b90,#213628c4);box-shadow:inset 0 1px #f5e6b218;transition:border-color 1s,box-shadow 1s,background-color 1s}
.upgrade-modal .upgrade-stat-row label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#d8dfcc;line-height:1.3;margin:0 0 7px}
.upgrade-modal .upgrade-stat-icon{display:flex;align-items:center;gap:7px;min-width:0}
.upgrade-modal .upgrade-stat-icon svg{display:block;flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--upgrade-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.upgrade-modal .upgrade-stat-icon b{min-width:0;font-weight:600;overflow-wrap:anywhere}
.upgrade-modal .upgrade-values{display:flex;align-items:baseline;gap:12px;min-width:0;font-variant-numeric:tabular-nums;line-height:1.1}
.upgrade-modal .upgrade-old{font-size:18px;color:#99b3a0;font-weight:500}
.upgrade-modal .upgrade-values>i{font-style:normal;font-size:14px;color:#b5a574}
.upgrade-modal .upgrade-values strong{color:#e3e9cf;font-size:31px;line-height:1;font-weight:750;letter-spacing:-.5px;transition:color 1s,text-shadow 1s}
.upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-values strong{font-size:27px}
.upgrade-modal .upgrade-stat-row small{display:block;margin:5px 0 0;font-size:10px;line-height:1.3;color:#aabca6}
.upgrade-modal .upgrade-delta{position:absolute;right:15px;top:13px;color:#dfc486;font-size:12px;font-weight:700;line-height:1.3;opacity:0;transform:translateY(4px);transition:opacity .7s,transform .7s;font-variant-numeric:tabular-nums}
.upgrade-modal .upgrade-celebration:is([data-phase=stats],[data-phase=complete],.is-complete) .upgrade-delta{opacity:1;transform:translateY(0)}
.upgrade-modal .upgrade-celebration:is([data-phase=stats],[data-phase=complete],.is-complete) .upgrade-values strong{color:#ffe6a0;text-shadow:0 0 17px #f0ca694d}
.upgrade-modal .upgrade-celebration[data-phase=stats] .upgrade-stat-row{animation:upgrade-stat-glow 2.25s ease-out both}
.upgrade-modal .upgrade-celebration[data-phase=stats] .upgrade-stat-row:nth-child(2){animation-delay:.18s}
.upgrade-modal .upgrade-celebration[data-phase=stats] .upgrade-stat-row:nth-child(3){animation-delay:.36s}
.upgrade-modal .upgrade-celebration:is([data-phase=complete],.is-complete) .upgrade-stat-row{border-color:#d8bc735c}
.upgrade-modal .upgrade-skill-change{min-width:0;border-top:1px solid #c9ae6950;margin:1px 0 0;padding-top:9px;color:#cad7bf}
.upgrade-modal .upgrade-skill-change summary{cursor:pointer;font-size:12px;line-height:1.4;font-weight:600;padding:4px 0;min-height:27px;overflow-wrap:anywhere}
.upgrade-modal .upgrade-skill-change summary:focus-visible{outline:2px solid #ffe29b;outline-offset:3px;border-radius:3px}
.upgrade-modal .upgrade-skill-values{display:grid;gap:7px;padding:8px 0 1px;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.upgrade-modal .upgrade-skill-values small{display:inline-block;margin-right:8px;color:#d6c68f;font-weight:700}
.upgrade-modal .upgrade-skill-before{padding:9px 11px;color:#b9c5ad;border:1px solid #809b7550;background:#12251d66;border-radius:5px}
.upgrade-modal .upgrade-skill-after{padding:9px 11px;color:#f0e5be;border:1px solid #d8bd746b;background:#5b553627;border-radius:5px}
.upgrade-modal .upgrade-status{position:relative;z-index:7;min-height:21px;margin:14px 0 0;text-align:center;color:#d7d8bc;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.upgrade-modal .upgrade-actions{position:sticky;z-index:20;bottom:-21px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 0 5px;margin:12px 0 0;border-top:1px solid #c9ae6940;background:linear-gradient(0deg,#13271ff7 60%,#152a21e8);box-shadow:0 -8px 14px #14282040}
.upgrade-modal .upgrade-continue{min-width:180px;min-height:43px;font-size:14px}
.upgrade-modal .upgrade-continue:disabled{opacity:.58;filter:saturate(.6);cursor:default}
.upgrade-modal .upgrade-skip{min-height:36px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#c7c8aa;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.upgrade-modal .upgrade-skip:hover:not(:disabled){color:#ffe3a0}
.upgrade-modal .upgrade-skip:disabled{opacity:.45;cursor:default}
.upgrade-modal .upgrade-actions :is(button,a):focus-visible{outline:2px solid #ffe29b;outline-offset:3px}

@keyframes upgrade-card-arrive{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes upgrade-card-charge{from{filter:drop-shadow(0 0 0 #f2cf8100)}to{filter:drop-shadow(0 0 15px #e9c16d5c)}}
@keyframes upgrade-soft-flash{0%{opacity:0;transform:scale(.9)}32%{opacity:.35}100%{opacity:0;transform:scale(1.06)}}
@keyframes upgrade-ember-rise{0%{opacity:0;transform:translate(0,12px) scale(.7)}18%{opacity:.65}75%{opacity:.45}100%{opacity:0;transform:translate(calc((var(--i,0) - 6)*2px),-170px) scale(.3)}}
@keyframes upgrade-orbit-gather{from{transform:rotate(-15deg) scale(1.08)}to{transform:rotate(12deg) scale(.95)}}
@keyframes upgrade-old-form{0%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}70%{opacity:.25;transform:translateY(-6px) scale(1.055);filter:brightness(1.35) blur(3px)}100%{opacity:0;transform:translateY(-10px) scale(1.07);filter:brightness(1.4) blur(6px)}}
@keyframes upgrade-new-form{0%{opacity:0;transform:translateY(14px) scale(.91);filter:brightness(1.5) blur(8px)}45%{opacity:.7;filter:brightness(1.18) blur(2px)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1) blur(0)}}
@keyframes upgrade-evolution-light{0%{opacity:0;transform:scale(.85)}25%{opacity:.63}55%{opacity:.24}100%{opacity:0;transform:scale(1.17)}}
@keyframes upgrade-apex-rise{from{transform:translateY(10px) scale(.95)}to{transform:translateY(0) scale(1)}}
@keyframes upgrade-stat-glow{0%{border-color:#d8bc7390;box-shadow:inset 0 0 19px #e7c46a20,0 0 20px #d8bd7138}100%{border-color:#d8bc735c;box-shadow:inset 0 1px #f5e6b218,0 0 0 #d8bd7100}}

@media(max-width:620px){
 .modal.reward-modal.upgrade-modal{padding:25px 18px 16px;max-height:calc(100dvh - 22px);border-width:3px;scrollbar-gutter:auto}
 .modal.reward-modal.upgrade-modal .modal-close{margin:-13px -8px -24px 0;width:33px;height:33px;min-width:33px}
 .upgrade-modal .upgrade-heading{padding:0 24px;margin-bottom:9px}
 .upgrade-modal .upgrade-heading .eyebrow{font-size:8px;letter-spacing:1.4px}
 .upgrade-modal .upgrade-heading h2{font-size:26px}
 .upgrade-modal .upgrade-heading .upgrade-hero-name{font-size:14px;margin-top:6px}
 .upgrade-modal .upgrade-levels{margin-top:9px;gap:9px}
 .upgrade-modal .upgrade-levels :is(.old-level,.new-level){font-size:18px;min-width:65px;min-height:31px;padding:4px 10px}
 .upgrade-modal .upgrade-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:16px;max-width:450px}
 .upgrade-modal .upgrade-art{padding:9px 0 15px}
 .upgrade-modal .upgrade-card-stack{max-width:205px;aspect-ratio:.6}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card{padding:7px 5px 5px;border-radius:13px 13px 10px 10px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .portrait{margin-top:18px;border-width:3px;width:87%}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-body{border-width:18px 10px 12px;padding:1px 0}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-name{min-height:27px;font-size:clamp(11px,7cqw,15px);line-height:1.18}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top{top:9px;left:8px;right:8px;gap:3px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .cost{min-width:23px;min-height:22px;padding:3px 4px;font-size:10px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .level{font-size:8px;padding:3px 4px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-rarity-gem{width:17px;height:17px;flex-basis:17px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-rarity-gem::after{width:7px;height:7px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats>div{top:calc(39cqw + 18px);width:34px;height:54px;border-width:1px;padding:3px 1px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats b{font-size:21px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats small{font-size:6px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats .stat-icon{width:11px;height:11px;line-height:11px}
 .upgrade-modal .upgrade-sigil{width:31px;height:31px;margin:10px auto -10px}
 .upgrade-modal .upgrade-sigil svg{width:20px;height:20px}
 .upgrade-modal .upgrade-gains{gap:8px}
 .upgrade-modal .upgrade-stat-row{padding:10px 10px 9px;border-radius:5px}
 .upgrade-modal .upgrade-stat-row label{font-size:10px;margin-bottom:6px}
 .upgrade-modal .upgrade-stat-icon{gap:5px}
 .upgrade-modal .upgrade-stat-icon svg{flex-basis:14px;width:14px;height:14px}
 .upgrade-modal .upgrade-values{gap:7px}
 .upgrade-modal .upgrade-old{font-size:14px}
 .upgrade-modal .upgrade-values>i{font-size:11px}
 .upgrade-modal .upgrade-values strong{font-size:24px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-values{gap:5px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-old{font-size:12px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-values strong{font-size:19px}
 .upgrade-modal .upgrade-stat-row small{font-size:9px;margin-top:4px}
 .upgrade-modal .upgrade-delta{position:static;display:block;font-size:10px;margin:5px 0 0}
 .upgrade-modal .upgrade-skill-change{padding-top:6px}
 .upgrade-modal .upgrade-skill-change summary{font-size:10px;min-height:26px;padding:3px 0}
 .upgrade-modal .upgrade-skill-values{font-size:10px;line-height:1.5;gap:5px;padding-top:5px}
 .upgrade-modal :is(.upgrade-skill-before,.upgrade-skill-after){padding:7px 8px}
 .upgrade-modal .upgrade-status{font-size:10px;margin-top:9px;min-height:18px}
 .upgrade-modal .upgrade-actions{bottom:-16px;padding-top:11px;margin-top:9px;gap:8px}
 .upgrade-modal .upgrade-continue{min-width:135px;min-height:38px;font-size:12px}
 .upgrade-modal .upgrade-skip{font-size:10px;min-height:34px;padding:6px 7px}
}
@media(max-width:380px){
 .modal.reward-modal.upgrade-modal{padding:22px 10px 12px;max-height:calc(100dvh - 16px)}
 .modal.reward-modal.upgrade-modal .modal-close{margin:-12px -3px -23px 0;width:31px;height:31px;min-width:31px}
 .upgrade-modal .upgrade-heading{padding:0 25px;margin-bottom:6px}
 .upgrade-modal .upgrade-heading h2{font-size:22px;line-height:1.16}
 .upgrade-modal .upgrade-heading .upgrade-hero-name{font-size:12px;margin-top:5px}
 .upgrade-modal .upgrade-levels{margin-top:8px;gap:8px}
 .upgrade-modal .upgrade-levels :is(.old-level,.new-level){font-size:16px;min-width:58px;min-height:27px;padding:3px 8px}
 .upgrade-modal .upgrade-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:10px}
 .upgrade-modal .upgrade-card-stack{aspect-ratio:.55}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .portrait{margin-top:16px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-body{border-width:15px 6px 10px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-name{font-size:11px;min-height:32px;line-height:1.15}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top{left:5px;right:5px;top:8px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .cost{min-width:20px;min-height:20px;font-size:9px;padding:2px 3px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-top .level{font-size:7px;padding:3px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-rarity-gem{width:14px;height:14px;flex-basis:14px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats>div{width:29px;height:46px;top:calc(37cqw + 18px)}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats b{font-size:18px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats small{font-size:5px}
 .upgrade-modal .upgrade-card-stack .hero-card.hero-card .card-stats .stat-icon{width:9px;height:9px;line-height:9px}
 .upgrade-modal .upgrade-gains{gap:6px}
 .upgrade-modal .upgrade-stat-row{padding:8px 8px 7px}
 .upgrade-modal .upgrade-stat-row label{font-size:9px;margin-bottom:5px}
 .upgrade-modal .upgrade-stat-icon{gap:4px}
 .upgrade-modal .upgrade-stat-icon svg{width:12px;height:12px;flex-basis:12px}
 .upgrade-modal .upgrade-values{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1.2fr);gap:4px;align-items:center}
 .upgrade-modal .upgrade-old{font-size:12px}
 .upgrade-modal .upgrade-values>i{font-size:10px}
 .upgrade-modal .upgrade-values strong{font-size:21px;letter-spacing:-.4px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-values{gap:3px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-old{font-size:10px;letter-spacing:-.2px}
 .upgrade-modal .upgrade-stat-row[data-upgrade-stat=attack] .upgrade-values strong{font-size:14px;letter-spacing:-.45px}
 .upgrade-modal .upgrade-stat-row small{font-size:8px}
 .upgrade-modal .upgrade-delta{font-size:9px;margin-top:4px}
 .upgrade-modal .upgrade-skill-change summary{font-size:9px;line-height:1.4;min-height:25px}
 .upgrade-modal .upgrade-skill-values{font-size:9px}
 .upgrade-modal .upgrade-status{font-size:9px;margin-top:8px}
 .upgrade-modal .upgrade-actions{bottom:-12px;gap:4px;padding-top:9px;margin-top:8px;flex-wrap:wrap}
 .upgrade-modal .upgrade-continue{min-width:145px;min-height:36px;font-size:11px}
 .upgrade-modal .upgrade-skip{font-size:9px;min-height:30px;padding:5px 6px}
}
@media(max-height:680px) and (min-width:621px){
 .modal.reward-modal.upgrade-modal{padding:20px 27px 16px;max-height:calc(100dvh - 20px)}
 .upgrade-modal .upgrade-heading{margin-bottom:8px}
 .upgrade-modal .upgrade-heading h2{font-size:28px}
 .upgrade-modal .upgrade-heading .upgrade-hero-name{font-size:14px;margin-top:5px}
 .upgrade-modal .upgrade-levels{margin-top:8px}
 .upgrade-modal .upgrade-layout{grid-template-columns:205px minmax(0,1fr);max-width:610px;gap:28px}
 .upgrade-modal .upgrade-stat-row{padding:10px 13px}
 .upgrade-modal .upgrade-values strong{font-size:28px}
 .upgrade-modal .upgrade-status{margin-top:7px}
 .upgrade-modal .upgrade-actions{bottom:-16px;padding-top:10px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
 .upgrade-modal .upgrade-celebration *, .upgrade-modal .upgrade-celebration *::before, .upgrade-modal .upgrade-celebration *::after{animation:none!important;transition:none!important}
 .upgrade-modal .upgrade-celebration .upgrade-card-stack{transform:none!important;filter:none!important}
 .upgrade-modal .upgrade-celebration .upgrade-card-before{opacity:0!important;visibility:hidden!important}
 .upgrade-modal .upgrade-celebration .upgrade-card-after{opacity:1!important;transform:none!important;filter:none!important}
 .upgrade-modal .upgrade-celebration :is(.upgrade-orbit,.upgrade-rays,.upgrade-particles,.upgrade-flash){display:none!important}
 .upgrade-modal .upgrade-celebration .upgrade-art::before{opacity:.12!important;transform:none!important}
 .upgrade-modal .upgrade-celebration .upgrade-delta{opacity:1!important;transform:none!important}
 .upgrade-modal .upgrade-celebration .upgrade-values strong{color:#ffe6a0;text-shadow:none}
}