/* Use the game's painted cloud button for temple choices and card growth. */
#hextech-screen.temple-gamble #hextech-shuffle-btn,
#hextech-screen.temple-gamble .qian-decision-actions button,
#skill-upgrade-screen .su-det-upgrade-btn,
#skill-upgrade-screen .su-upg-ok {
    box-sizing:border-box;border:0;border-radius:0;background:transparent url('../assets/ui_controls_20260917o/button-amber.png') center/100% 100% no-repeat;
    color:#fff8e4;font:400 21px/1 var(--font-game-title);-webkit-text-stroke:1px #69482e;paint-order:stroke fill;text-shadow:0 1.5px #69482e;
    box-shadow:none;letter-spacing:.035em;touch-action:manipulation;
}
#hextech-screen.temple-gamble #hextech-shuffle-btn {height:60px;min-height:60px;padding:0 14px 4px}
#hextech-screen.temple-gamble .qian-decision-actions button {height:54px;min-height:54px;padding:0 7px 4px;font-size:19px}
#hextech-screen.temple-gamble .qian-decision-actions button:disabled {opacity:.6;filter:grayscale(.7);cursor:default}
#hextech-screen.temple-gamble .qian-decision-gamble {border:0!important}
#hextech-screen.temple-gamble .hextech-icon-wrap {border-radius:13px}

/* Compact growth details; the card itself keeps its original illustrated skin. */
#skill-upgrade-screen {container:skillpage / size}
#skill-upgrade-screen .su-popup-overlay {background:rgba(20,18,28,.68);padding:16px;box-sizing:border-box}
#skill-upgrade-screen .su-detail-box,
#skill-upgrade-screen .su-upgrade-box {
    box-sizing:border-box;width:318px;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
    padding:19px 18px 17px;border:2px solid #795337;border-radius:17px;background:#f2dfb7;
    box-shadow:inset 0 0 0 3px #fff3d4,inset 0 0 0 5px #c8a56a,0 12px 32px #16101870;
    color:#634831;font-family:'PingFang SC','Microsoft YaHei',sans-serif;
}
#skill-upgrade-screen .su-det-close {
    box-sizing:border-box;top:5px;right:5px;width:42px;height:42px;padding:0;border:0;background:transparent;
    display:flex;align-items:center;justify-content:center;font:23px/1 sans-serif;color:#795337;cursor:pointer;
}
#skill-upgrade-screen .su-det-close:hover {color:#37271f;transform:none}
#skill-upgrade-screen .su-det-close:focus-visible {outline:2px solid var(--hero-color,#6286be);outline-offset:-6px;border-radius:12px}
#skill-upgrade-screen .su-det-card-wrapper {margin:4px 0 12px;flex:none}
#skill-upgrade-screen .su-det-card {box-sizing:border-box;width:216px;min-height:272px;flex:none;overflow:hidden;border-radius:0}
#skill-upgrade-screen .su-det-card-content {box-sizing:border-box;height:auto;min-height:272px;padding:13px 19px 27px;gap:0}
#skill-upgrade-screen .su-det-card .su-det-type-label {font:11px/1.4 'PingFang SC',sans-serif;padding:0;margin:0 0 4px;color:var(--hero-card-ink,#fff4d9);opacity:.85;letter-spacing:.07em}
#skill-upgrade-screen .su-det-card .su-det-name {padding:0;margin:0 0 6px;color:var(--hero-card-ink,#fff4d9);font:400 23px/1.25 var(--font-game-title);text-shadow:var(--hero-card-text-shadow,none)}
#skill-upgrade-screen .su-det-card .su-det-stars {margin:0 0 8px;gap:4px;font-size:14px}
#skill-upgrade-screen .su-det-card .su-star-empty {color:var(--hero-card-ink,#eef1ff);opacity:.38}
#skill-upgrade-screen .su-det-card .su-star-filled {color:#ffe283;text-shadow:0 1px #735536}
#skill-upgrade-screen .su-det-card .su-det-icon-frame {box-sizing:border-box;flex:none;width:66px;height:66px;margin:2px 0 11px;border:1px solid #e2c687;border-radius:14px;background:#fff1d6;box-shadow:0 2px 0 #34202b30}
#skill-upgrade-screen .su-det-card .su-det-icon {width:54px;height:54px;filter:none}
#skill-upgrade-screen .su-det-card .su-det-desc {width:100%;box-sizing:border-box;margin:0;padding:0;font-size:14px;line-height:1.65;color:var(--hero-card-ink,#f7f4ec);text-shadow:var(--hero-card-text-shadow,none);white-space:pre-line;overflow-wrap:anywhere}
#skill-upgrade-screen .su-det-preview {box-sizing:border-box;width:100%;padding:10px 13px;margin:0 0 13px;background:#fff2d5;color:#725437;border:1px solid #c8ad79;border-radius:9px;box-shadow:none}
.su-preview-heading {font:11px/1.5 'PingFang SC',sans-serif;text-align:center;margin:0 0 5px;color:#8a704d}
.su-preview-values {display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:4px}
.su-preview-step {display:flex;flex-direction:column;align-items:center;gap:4px}
.su-preview-step span {font:10.5px/1.4 'PingFang SC',sans-serif;color:#917456}
.su-preview-step strong {font:400 21px/1.3 var(--font-game-title);color:#7e674b}
.su-preview-step:last-child strong {color:#427350}
.su-preview-arrow {font:22px/1 sans-serif;color:#ba8b41;text-align:center}
#skill-upgrade-screen #su-det-btn-area {width:100%;flex-direction:column;align-items:center;gap:7px}
#skill-upgrade-screen .su-det-upgrade-btn,
#skill-upgrade-screen .su-upg-ok {display:flex;align-items:center;justify-content:center;gap:20px;width:224px;max-width:100%;height:59px;min-height:59px;padding:0 20px 4px;cursor:pointer}
#skill-upgrade-screen .su-det-upgrade-btn .su-upgrade-cost {display:flex;align-items:center;gap:4px;font:400 17px/1 var(--font-game-title)}
#skill-upgrade-screen .su-det-upgrade-btn img {width:21px;height:21px;object-fit:contain}
#skill-upgrade-screen .su-det-upgrade-btn.disabled {filter:grayscale(.75);opacity:.88;color:#6d5d49;-webkit-text-stroke:0;text-shadow:none;cursor:default}
#skill-upgrade-screen .su-det-upgrade-btn:enabled:hover,
#skill-upgrade-screen .su-upg-ok:hover {transform:none;filter:brightness(1.05)}
#skill-upgrade-screen .su-det-upgrade-btn:enabled:active,
#skill-upgrade-screen .su-upg-ok:active {transform:translateY(2px)}
#skill-upgrade-screen .su-material-balance {font:10.5px/1.5 'PingFang SC',sans-serif;color:#8d7050;text-align:center}
#skill-upgrade-screen .su-upg-title {font:400 26px/1.25 var(--font-game-title);color:#745030;text-shadow:0 1px #fff4d6;margin-bottom:9px}
#skill-upgrade-screen .su-upg-diff {color:#427350;font:400 22px/1.4 var(--font-game-title);text-shadow:none;margin:0 0 10px}
@container skillpage (max-height:690px) {
    #skill-upgrade-screen .su-detail-box,#skill-upgrade-screen .su-upgrade-box {padding-top:12px;padding-bottom:13px}
    #skill-upgrade-screen .su-det-card,#skill-upgrade-screen .su-det-card-content {min-height:238px}
    #skill-upgrade-screen .su-det-card-content {padding-top:11px;padding-bottom:22px}
    #skill-upgrade-screen .su-det-card .su-det-icon-frame {width:55px;height:55px;margin-bottom:8px}
    #skill-upgrade-screen .su-det-card .su-det-icon {width:45px;height:45px}
    #skill-upgrade-screen .su-det-card .su-det-name {font-size:21px}
    #skill-upgrade-screen .su-det-card .su-det-desc {font-size:13px;line-height:1.55}
}