/* Glossy art pass. Images live in assets/ui/. Backgrounds are applied from JS when a screen opens. */

:root {
    --art: url("../assets/ui/ui/panel-gold-frame.png");
}

.lx-screen, .pvp-screen, .summon-screen, .result-screen, #screenHeroes.has-detail {
    background-color: #123a78;
    background-size: cover;
    background-position: center top;
}

.lx-star {
    background: url("../assets/ui/icons/icon-level-star-badge.png") center / contain no-repeat;
    clip-path: none;
    width: 62px;
    height: 62px;
    color: #7c2d12;
    text-shadow: 0 1px 0 #fff6d0, 0 2px 0 rgba(120, 53, 15, .45);
}
.lx-star small { margin-top: 14px; }
.lx-name, .lx-pwr, .stage-title, .map-title, .pvp-title, .summon-banner h2, .up-banner h2, #resultTitle, .result-stage, .result-rating {
    text-shadow: 0 2px 0 #1a1208, 1px 1px 0 #1a1208, -1px -1px 0 #1a1208, -1px 1px 0 #1a1208, 1px -1px 0 #1a1208;
}

.cur { background: linear-gradient(180deg, rgba(8, 20, 48, .72), rgba(8, 20, 48, .88)); border-width: 2px; }
.cur .ico { width: 18px; height: 18px; object-fit: contain; display: block; }
.cur { overflow: visible; position: relative; min-height: 48px; align-items: center; }
.lx-wallet { gap: 4px; }
.lx-wallet, .up-top, .summon-top, .result-wallet { position: relative; z-index: 6; }
.plus {
    width: 48px; height: 48px; min-width: 48px; min-height: 48px;
    margin: 0;
    padding: 0; border: 0; background: transparent;
    box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    cursor: pointer; flex: 0 0 48px;
}
.plus img { width: 22px; height: 22px; display: block; pointer-events: none; }
.stat-line { grid-template-columns: 1fr 44px; }
.up-mid { grid-template-columns: 68px 1fr 112px; }
.up-back { min-height: 44px; min-width: 44px; }

.cal-art, .lx-chest img, .ad-ico, .mf-ico, .side-ico, .orb {
    width: 54px; height: 54px; object-fit: contain; display: block;
    filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.lx-chest { background: transparent; border: 0; box-shadow: none; width: 58px; }
.lx-chest img { width: 58px; height: 58px; }
.ad-ico, .mf-ico, .side-ico { width: 36px; height: 36px; margin: 0 auto 2px; }
.orb { width: 58px; height: 58px; border: 0; background: none; box-shadow: none; border-radius: 0; }

.lx-diorama {
    background: transparent;
    border: 0;
    box-shadow: none;
}
#screenTitle .lx-profile {
    background: linear-gradient(180deg, #16345c, #0e2444);
    border: 3px solid #e7b008;
    border-radius: 18px;
    padding: 4px 8px 5px 2px;
    overflow: visible;
}
#screenTitle .lx-star {
    position: relative;
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display: block;
    overflow: visible;
    margin: -6px 0 -6px -2px;
}
#screenTitle .lx-star small,
#screenTitle .lx-star b {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: #7c2d12;
    text-shadow: 0 1px 0 #fff4c2;
}
#screenTitle .lx-star small { top: 20px; font-size: 8px; font-weight: 800; letter-spacing: .02em; }
#screenTitle .lx-star b { top: 30px; font-size: 18px; font-weight: 800; line-height: 1; }
#screenTitle .lx-id { gap: 3px; }
#screenTitle .lx-name { font-size: 14px; color: #fff; }
#screenTitle .lx-xp {
    display: block;
    height: 7px;
    border-radius: 99px;
    background: #071422;
    border: 1px solid #f6d36b;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
#screenTitle .lx-xp i {
    display: block;
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #fde047, #f59e0b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
#screenTitle .lx-pwr { font-size: 11px; color: #fde68a; }

#screenTitle .orb-label {
    font-size: 8px;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.05;
    max-width: 74px;
}
#screenTitle .float-tag, #screenTitle .boost-tag.free {
    top: 22px;
    right: 2px;
    width: 46px;
    min-height: 26px;
    font-size: 8px;
    padding: 4px 2px 8px;
}
#screenTitle .ad-chest {
    min-height: 36px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
}
#screenTitle .ad-flag {
    position: static;
    transform: none;
    background: #f59e0b;
    color: #7c2d12;
    border: 2px solid #7c2d12;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 6px;
    text-shadow: none;
}
#screenTitle .ad-ico { width: 26px; height: 26px; margin: 0; flex: 0 0 26px; }

.hero-stands {
    position: absolute;
    left: 74px;
    right: 74px;
    bottom: 2px;
    height: 62%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none;
}
.hero-stand {
    position: relative;
    width: 30%;
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-stand.left, .hero-stand.right { margin-bottom: 22px; }
.hero-stand.center { width: 34%; flex-basis: 34%; margin-bottom: 0; z-index: 2; }
.hero-cv { width: 70px; height: 78px; display: block; position: relative; z-index: 2; background: transparent; }
.hero-stand.center .hero-cv { width: 88px; height: 100px; }
.ped-img {
    width: 72px;
    height: auto;
    margin-top: -22px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.hero-stand.center .ped-img { width: 92px; margin-top: -26px; }
.hero-stand .plate {
    position: relative;
    z-index: 3;
    width: 70px;
    margin-top: 2px;
    padding: 3px 3px 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e4f68, #0a3348);
    border: 2px solid #7dd3fc;
    box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
}
.hero-stand.center .plate.lead {
    width: 78px;
    margin-top: 12px;
    background: linear-gradient(180deg, #dc2626, #991b1b);
    border-color: #fde68a;
}
.plate .lvl-tab {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    border: 2px solid #fde68a;
    border-radius: 7px;
    padding: 0 5px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 0 #7f1d1d;
}
.plate .pname { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 0 #0b1f33; }
.plate .stars { display: flex; justify-content: center; gap: 0; margin-top: 1px; }
.plate .star { width: 9px; height: 9px; }
.plate .ppower { font-size: 9px; font-weight: 800; color: #fde68a; }
.float-orb {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    animation: orbFloat 2.6s ease-in-out infinite;
}
.float-orb.fire {
    left: 30%;
    top: 38%;
    background: radial-gradient(circle at 32% 30%, #fff7ed, #fb923c 42%, #c2410c);
    box-shadow: 0 0 10px #f97316, inset 0 -3px 0 rgba(0,0,0,.2);
}
.float-orb.water {
    right: 28%;
    top: 34%;
    background: radial-gradient(circle at 32% 30%, #eff6ff, #38bdf8 46%, #1d4ed8);
    box-shadow: 0 0 10px #38bdf8, inset 0 -3px 0 rgba(0,0,0,.2);
    animation-delay: .7s;
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.battle-btn, .find-match, .start-stage, #btnHighGraphics {
    background: url("../assets/ui/ui/btn-battle.png") center / 100% 100% no-repeat;
    border: 0;
    box-shadow: 0 5px 0 rgba(80, 32, 0, .45);
    color: #fff;
    text-shadow: 0 3px 0 #7c2d12, 1px 1px 0 #3b1604, -1px -1px 0 #3b1604;
    min-height: 68px;
}
.side-btn, .pull.one, .ad-chest, .close-wide, .nav-btn {
    background: url("../assets/ui/ui/btn-blue.png") center / 100% 100% no-repeat;
    border: 0;
    box-shadow: 0 4px 0 rgba(8, 30, 70, .45);
    color: #fff;
    text-shadow: 0 2px 0 #0c2340, 1px 0 0 #0c2340, -1px 0 0 #0c2340;
}
.up-upgrade {
    background: url("../assets/ui/ui/btn-green.png") center / 100% 100% no-repeat;
    border: 0;
    color: #fff;
    text-shadow: 0 2px 0 #14532d;
    box-shadow: 0 4px 0 rgba(5, 46, 22, .45);
}
.boost-tag.free, .float-tag {
    background: url("../assets/ui/ui/badge-tag-burst.png") center / 100% 100% no-repeat;
    color: #fff;
    border: 0;
}
.pull.ten, .up-ascend, .fight-btn {
    background: url("../assets/ui/ui/btn-ascend.png") center / 100% 100% no-repeat;
    border: 0;
    color: #fff;
    text-shadow: 0 2px 0 #7c2d12;
    box-shadow: 0 4px 0 rgba(80, 32, 0, .4);
}
.up-ascend::before, .up-ascend::after { display: none; }
.boost-tag, .float-tag {
    background: url("../assets/ui/ui/badge-tag-burst.png") center / 100% 100% no-repeat;
    border: 0;
    width: 52px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 0 #7f1d1d;
    transform: rotate(-8deg);
}
.limited {
    background: url("../assets/ui/ui/badge-tag-diagonal.png") center / 100% 100% no-repeat;
    border: 0;
    color: #fff;
    text-shadow: 0 1px 0 #7f1d1d;
}

.gold-panel, .rank-card, .online-card, .ladder-card, .pass-card, .pity-card, .skill-panel, .lx-banner.quests {
    border-style: solid;
    border-width: 16px;
    border-image: url("../assets/ui/ui/panel-gold-frame.png") 64 fill;
    border-image-slice: 64 fill;
    border-image-width: 16px;
    background: transparent;
    box-shadow: 0 4px 0 rgba(0,0,0,.28);
}
.map-title, .summon-banner, .pvp-title, .up-banner {
    background: url("../assets/ui/ui/banner-title-plate.png") center / 100% 100% no-repeat;
    border: 0;
    box-shadow: 0 3px 0 rgba(0,0,0,.3);
    color: #fde68a;
}
.up-banner h2, .map-title, .pvp-title, .summon-banner h2 { color: #fde68a; }

.world-map {
    background-color: #7dd3fc;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
    box-shadow: none;
}
.map-node .bubble {
    background: radial-gradient(circle at 35% 30%, #fff7c2, #f59e0b 55%, #b45309);
    color: #7c2d12;
    display: flex; align-items: center; justify-content: center;
}
.map-node .bubble img, .map-node .skull { width: 22px; height: 22px; object-fit: contain; }
.map-node .skull { position: absolute; top: -10px; right: -6px; width: 18px; height: 18px; }
.map-node .nstars { display: flex; justify-content: center; }
.map-node .star { width: 10px; height: 10px; }
.node-label { text-shadow: 0 2px 0 #0c2340, 0 0 4px #0c2340; }

.portal-art { width: min(240px, 70%); height: auto; filter: drop-shadow(0 10px 16px rgba(88, 28, 135, .55)); }
.starter-art { width: 84px; height: 84px; object-fit: contain; }
.portal-mini { width: 84px; height: 84px; object-fit: contain; background: none; border: 0; box-shadow: none; }
.rank-step .pip { background: transparent; border: 0; width: 36px; height: 36px; }
.rank-step .pip img { width: 36px; height: 36px; object-fit: contain; }

.ribbon {
    background: url("../assets/ui/ui/banner-victory-ribbon.png") center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    min-height: 78px;
}
.ribbon::before, .ribbon::after { display: none; }
.loot-chest-img { width: 150px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 0 rgba(0,0,0,.28)); }
.rays, .confetti { display: none; }
.result-screen.lose { filter: saturate(.7) brightness(.78); }

.evo-ped { width: 100%; max-height: 150px; object-fit: contain; margin-top: -36px; display: block; pointer-events: none; }
.ped-caption { position: relative; z-index: 3; }
.pedestal-col { display: flex; flex-direction: column; }
.pedestal-col canvas, #heroPreview { height: 130px; position: relative; z-index: 2; }
.ped-stars { display: flex; justify-content: center; }
.ped-stars .star, .up-name .star { width: 16px; height: 16px; }
.gear-slot { background: transparent; border: 0; padding: 0; box-shadow: none; }
.gear-slot .gico, .skill-node img, .rune-btn img { width: 52px; height: 52px; object-fit: contain; display: block; margin: 0 auto; }
.rune-btn { width: 58px; height: auto; background: transparent; border: 0; box-shadow: none; }
.skill-node { background: transparent; border: 0; box-shadow: none; width: auto; height: auto; }
.skill-node.special { width: auto; height: auto; }
.skill-node.special img { width: 72px; height: 72px; }
.close-x { background: transparent; border: 0; width: 32px; height: 32px; padding: 0; box-shadow: none; }
.close-x img { width: 32px; height: 32px; display: block; }

#btnHighGraphics[aria-pressed="true"] { filter: saturate(1.1); }

/* Phone frame scales up on a tablet instead of stretching. */
#app { overflow: hidden; background: #071426; }
#app .menu-screen {
    position: absolute;
    width: 390px;
    height: 844px;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    display: flex;
    transform: translate(-50%, -50%) scale(var(--menu-fit, 1));
    transform-origin: center center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 40;
}
#app .menu-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 46;
}

#lobbyStage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background: transparent;
    z-index: 1;
}
#lobbyPlates { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.stage-plate {
    position: absolute;
    transform: translate(-50%, 0);
    width: 76px;
    padding: 3px 4px 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e4f68, #0a3348);
    border: 2px solid #7dd3fc;
    box-shadow: 0 2px 0 rgba(0,0,0,.45);
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
}
.stage-plate.lead {
    width: 88px;
    background: linear-gradient(180deg, #dc2626, #991b1b);
    border-color: #fde68a;
}
.stage-plate .lvl-tab {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    border: 2px solid #fde68a;
    border-radius: 7px;
    padding: 0 5px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
}
.stage-plate .pname { font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 #0b1f33; }
.stage-plate .stars { display: flex; justify-content: center; gap: 0; }
.stage-plate .star { width: 10px; height: 10px; }
.stage-plate .ppower { font-size: 9px; font-weight: 800; color: #fde68a; }

#screenHeroes.has-detail #heroDetail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#screenHeroes.has-detail .up-mid {
    flex: 1 1 auto;
    min-height: 210px;
    align-items: stretch;
}
#screenHeroes.has-detail .pedestal-col {
    height: 100%;
    min-height: 220px;
    position: relative;
}
#screenHeroes.has-detail #heroPreview {
    width: 100%;
    height: 100%;
    min-height: 220px;
    pointer-events: none;
}
#screenHeroes.has-detail .ped-stars,
#screenHeroes.has-detail .ped-caption {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    text-align: center;
}
#screenHeroes.has-detail .ped-stars { bottom: 18px; display: flex; justify-content: center; }
#screenHeroes.has-detail .ped-caption { bottom: 2px; font-size: 11px; }
#screenHeroes.has-detail .up-name .stars { margin-bottom: 2px; }
#screenHeroes.has-detail .up-actions { margin-top: 8px; }
#screenHeroes.has-detail .skill-panel { margin-top: 6px; }
.branch { position: relative; display: block; min-height: 96px; }
.branch::before { display: none; }
.branch .wires { position: absolute; left: 0; top: 4px; bottom: 4px; width: 46%; height: auto; pointer-events: none; }
.branch-nodes {
    position: relative;
    z-index: 1;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
}
.skill-node.special small { position: static; display: block; margin-top: 2px; font-size: 9px; }
.skill-node img { pointer-events: none; }

#screenDaily {
    background: linear-gradient(180deg, #1d4e9a 0%, #163e78 42%, #0e2a52 100%);
}
#screenDaily .daily-card {
    border-style: solid;
    border-width: 16px;
    border-image: url("../assets/ui/ui/panel-gold-frame.png") 64 fill;
    border-image-width: 16px;
    background: linear-gradient(180deg, rgba(20, 58, 120, .55), rgba(8, 24, 58, .72));
    color: #fff;
    border-radius: 8px;
}
#screenDaily .daily-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fde68a;
    text-shadow: 0 2px 0 #1a1208;
}
#screenDaily .dh { width: 36px; height: 36px; object-fit: contain; }
#screenDaily .spin-wheel {
    width: 148px;
    height: 148px;
    display: block;
    margin: 6px auto;
    object-fit: contain;
    font-size: 0;
}
#screenDaily .menu-btn { min-height: 44px; }

.store-block {
    border-style: solid;
    border-width: 16px;
    border-image: url("../assets/ui/ui/panel-gold-frame.png") 64 fill;
    border-image-width: 16px;
    padding: 4px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.store-block h3 { margin: 0; text-align: center; color: #fde68a; letter-spacing: .06em; }
.store-block .menu-btn { min-height: 44px; font-size: 15px; }
.store-block .menu-btn small { display: block; font-size: 11px; }

#energySheet, #profileSheet, #boosterSheet { z-index: 80; }
.portal-art, .portal-stage, .evo-ped, .float-orb, .stage-title { pointer-events: none; }
.map-node { width: 48px; min-height: 48px; z-index: 2; }
.map-node .bubble { width: 40px; height: 40px; line-height: 34px; }
.mile-chests button { width: 44px; min-height: 44px; font-size: 10px; }
.stat-line { grid-template-columns: 1fr 48px; }
.back-btn, .close-x { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.close-x { display: inline-flex; align-items: center; justify-content: center; }
.close-x img { width: 32px; height: 32px; pointer-events: none; }

.up-name h3, .stage-plate .pname, .node-label, .ban-copy b { overflow: hidden; text-overflow: ellipsis; }