.su-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:12px;background:rgba(3,10,14,.78);backdrop-filter:blur(7px)}
.su-frame{position:relative;width:min(1099px,100%);height:min(696px,calc(100dvh - 24px));color:#3b291f;background:#ead9ba url('/tang-kinh-cac/assets/game-ui/soldier-upgrade-frame.png') center/100% 100% no-repeat;filter:drop-shadow(0 25px 30px #000b);font-family:Arial,sans-serif;overflow:hidden}
.su-frame h2{position:absolute;top:14px;left:15%;right:15%;margin:0;color:#f9e7bb;text-shadow:0 2px 3px #091f27;text-align:center;font:700 clamp(14px,2vw,23px)/1.4 Arial,sans-serif;letter-spacing:.09em}
.su-close{position:absolute;z-index:2;top:12px;right:18px;width:38px;height:38px;border:0;border-radius:50%;background:#1b3038;color:#fff0c7;font-size:29px;line-height:1;cursor:pointer}
.su-close:hover,.su-close:focus-visible{background:#7f3021;outline:2px solid #f2d795}
.su-content{position:absolute;inset:96px 36px 29px;display:flex;flex-direction:column;gap:13px;overflow:auto;scrollbar-color:#a17b51 transparent}
.su-intro{margin:0;color:#6a5035;text-align:center;font-size:13px}
.su-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:12px;min-height:0;flex:1}
.su-main{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.su-stages{display:flex;flex-direction:column;gap:7px;overflow:auto;padding:12px;border:1px solid #b1956b;background:#e9dfcbab;scrollbar-width:thin}
.su-stage{flex:none;min-width:0;padding:13px 10px;border:1px solid #a88d65;background:#d6c6a7;color:#584431;cursor:pointer;text-align:left}
.su-stage span{display:block;font-size:10px;letter-spacing:.1em}
.su-stage strong{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.su-stage[aria-pressed=true]{background:#23444c;border-color:#9b7445;color:#f8e9c8;box-shadow:inset 0 0 0 1px #dbbc7a}
.su-stage:focus-visible{outline:2px solid #803825;outline-offset:-2px}
.su-comparison{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:8px;padding:11px 14px;border:1px solid #b1956b;background:#e9dfcbab}
.su-soldier{display:flex;align-items:center;gap:12px;min-width:0}
.su-unit{flex:none;width:70px;height:70px;object-fit:contain;background:#bda47d77;border:1px solid #a58a67}
.su-soldier span{min-width:0}.su-soldier small{display:block;color:#816543;font-size:10px;letter-spacing:.07em}.su-soldier strong{display:block;color:#513225;font-size:18px;line-height:1.2}
.su-arrow{text-align:center;color:#a15833;font-size:22px}
.su-lower{display:grid;grid-template-columns:1.15fr 1fr;gap:15px;min-height:0;flex:1}
.su-stats,.su-materials{min-width:0;padding:13px 16px;border:1px solid #b9a17e;background:#e8ddc8bc;overflow:auto}
.su-lower h3{margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid #bfa77f;color:#4f392b;font-size:12px;letter-spacing:.12em}
.su-stat-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.su-stat{display:grid;grid-template-columns:1fr auto;gap:1px 4px;padding:6px 0;border-bottom:1px solid #cab797;color:#694e37;font-size:11px}
.su-stat b{color:#3d2c25}.su-stat em{grid-column:2;color:#88715e;font-style:normal;text-align:right}.su-stat em.is-positive{color:#287245}
.su-cost{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #cab797}
.su-material{width:42px;height:42px;flex:none;object-fit:contain;background:#9e805e44;border:1px solid #b49a74}
.su-cost span{min-width:0;flex:1}.su-cost strong{display:block;font-size:13px;color:#493126}.su-cost small{display:block;color:#91775b;font-size:10px}.su-cost>b{flex:none;color:#8f3f27;font-size:18px}
.su-materials>p{margin:9px 0 0;color:#806a53;font-size:10px;line-height:1.4}.su-footer{color:#7a694f;font-size:10px;letter-spacing:.08em;text-align:right}
.su-open{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:10px 14px;border:1px solid #d9b677;background:#a45632;color:#fff1d2;font-size:12px;font-weight:700;cursor:pointer}.su-open:hover,.su-open:focus-visible{background:#7f3f28;outline:1px solid #f2d48b}
@media(max-width:680px){.su-backdrop{padding:4px}.su-frame{width:100%;height:min(730px,calc(100dvh - 8px))}.su-frame h2{top:16px;font-size:15px}.su-close{top:12px;right:11px;width:30px;height:30px;font-size:23px}.su-content{inset:103px 17px 22px;gap:9px}.su-intro{font-size:11px}.su-layout{display:flex;flex-direction:column;gap:8px;overflow:auto}.su-main{gap:8px;overflow:visible;flex:none}.su-stages{flex-direction:row;gap:7px;flex:none;min-height:0;padding:0 0 5px;border:0;background:transparent}.su-stage{flex:0 0 118px;padding:7px}.su-stage strong{font-size:11px}.su-comparison{padding:7px;gap:3px;grid-template-columns:minmax(0,1fr) 19px minmax(0,1fr)}.su-soldier{gap:4px;flex-direction:column;align-items:flex-start}.su-unit{width:43px;height:43px}.su-soldier small{font-size:8px}.su-soldier strong{font-size:12px}.su-arrow{font-size:16px}.su-lower{grid-template-columns:1fr;gap:8px;overflow:visible;flex:none}.su-stats,.su-materials{padding:9px 11px;overflow:visible;flex:none}.su-lower h3{margin-bottom:3px}.su-stat{font-size:10px;padding:3px 0}.su-material{width:34px;height:34px}.su-cost{padding:4px 0}.su-cost>b{font-size:15px}.su-footer{text-align:center;font-size:9px}}