#banner-view {
    position: absolute; inset: 0; overflow: hidden; color: #d6c29d;
    background: linear-gradient(90deg, rgba(3, 3, 4, .18), transparent 48%, rgba(3, 3, 4, .24)), url("../image/bg/banner_menu.png") center / 1920px 1080px no-repeat;
}
#banner-view::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 34%, rgba(0, 0, 0, .22));
}
#banner-view::after {
    content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
    background: transparent url("../image/ui/frame.png") center / 1920px 960px no-repeat;
}
.banner-heading {
    position: absolute; left: 60px; top: -26px; z-index: 6; width: 1800px; height: 192px;
    background: transparent url("../image/ui/banner_frame.png") center / 1800px 192px no-repeat;
    pointer-events: none;
}
.banner-heading > * {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.banner-list {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
}
.banner-choice {
    position: absolute;
    top: 69px;
    width: 160px;
    height: 422px;
    padding: 0;
    border: 0;
    color: #c7b48d;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}
.banner-choice:nth-child(1) { left: 94px; }
.banner-choice:nth-child(2) { left: 242px; }
.banner-choice:nth-child(3) { left: 390px; }
.banner-choice:nth-child(4) { left: 538px; }
.banner-choice:nth-child(5) { left: 1222px; }
.banner-choice:nth-child(6) { left: 1370px; }
.banner-choice:nth-child(7) { left: 1518px; }
.banner-choice:nth-child(8) { left: 1666px; }

.banner-choice__level {
    position: absolute; left: 24px; top: 1px; z-index: 2;
    width: 112px; height: 112px;
    pointer-events: none;
}

.banner-choice__level-frame {
    position: absolute; inset: 0; z-index: 0;
    background: transparent url("../image/ui/skillprogress_level.png") center / 112px 112px no-repeat;
    transform: rotate(0deg); transform-origin: 50% 50%; will-change: transform;
}

.banner-choice.is-selected .banner-choice__level-frame { background-image: url("../image/ui/skillprogress_levelon.png"); animation: bannerSelectedLevelRotation 18s linear infinite; }

.banner-choice.is-previewed .banner-choice__level { animation: bannerPreviewPulse 1.35s ease-in-out infinite; }

@keyframes bannerPreviewPulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(222, 174, 87, .38));
        color: #d7bc84;
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(242, 196, 103, .92));
        color: #f3dba5;
    }
}

@keyframes bannerSelectedLevelRotation { to { transform: rotate(360deg); } }

.banner-choice__position {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #bca177; font: 700 18px/1 var(--font-title); text-shadow: 0 2px 0 #000;
}

.banner-choice__sprite {
    width: var(--banner-frame-width);
    height: var(--banner-frame-height);
    background-repeat: no-repeat;
    background-size: var(--banner-atlas-width) var(--banner-frame-height);
    background-position: var(--banner-atlas-x) 0;
}

.banner-choice__sprite {
    position: absolute;
    left: 0;
    top: 62px;
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .82));
    pointer-events: none;
    transform: translateY(0); transition: filter .18s ease, transform .35s ease;
}

.banner-choice.is-previewed .banner-choice__sprite { transform: translateY(-18px); }

.banner-choice__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.banner-choice:hover .banner-choice__sprite,
.banner-choice:focus-visible .banner-choice__sprite,
.banner-choice.is-previewed .banner-choice__sprite {
    filter: drop-shadow(0 11px 9px rgba(0, 0, 0, .9));
}

.banner-main-window {
    position: absolute;
    left: 660px;
    top: 148px;
    z-index: 5;
    width: 600px;
    height: 800px;
    background: transparent url("../image/ui/window_squere.png") center / 600px 800px no-repeat;
    pointer-events: none;
}

.banner-own-content[hidden] { display: none; }

.banner-own-name {
    position: absolute;
    left: 70px;
    top: 27px;
    width: 460px;
    margin: 0;
    overflow: hidden;
    color: #caba95;
    font: 700 20px/38px var(--font-title);
    letter-spacing: .02em;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 0 #000;
    text-transform: uppercase;
    white-space: nowrap;
}

.banner-rank-visuals {
    position: absolute;
    left: 70px;
    top: 54px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 460px;
    height: 156px;
}

.banner-rank-card {
    position: relative;
    display: flex;
    justify-content: center;
    height: 156px;
}

.banner-rank-atlas-icon {
    position: absolute;
    left: 50%;
    top: -4px;
    width: 136px;
    height: 136px;
    background-image: var(--banner-rank-atlas-image);
    background-position: var(--banner-rank-atlas-x, 0) 0;
    background-repeat: no-repeat;
    background-size: var(--banner-rank-atlas-width) var(--banner-rank-atlas-height);
    transform: translateX(-50%);
}

.banner-rank-atlas-icon[hidden] { display: none; }

.banner-rank-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    min-height: 31px;
    padding: 7px 10px 4px;
    background: linear-gradient(90deg, transparent, rgba(13, 10, 7, .82) 18% 82%, transparent);
    text-align: center;
}

.banner-rank-card__caption small {
    color: #a99573; font: 600 12px/1 var(--font-body); text-transform: uppercase;
}

.banner-rank-card__caption strong {
    color: #cdbb9b; font: 700 16px/1 var(--font-title);
}

.banner-own-content[data-outcome="promotion"] .banner-rank-card--projection strong { color: #aebd83; }
.banner-own-content[data-outcome="demotion"] .banner-rank-card--projection strong { color: #bc7b70; }

.banner-own-highlights { position: absolute; left: 70px; top: 216px; display: grid; grid-template-columns: repeat(3, 1fr); width: 460px; height: 72px; background: linear-gradient(90deg, transparent, rgba(92, 67, 37, .16) 12% 88%, transparent); }
.banner-own-highlights > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.banner-own-highlights > div:not(:last-child)::after { position: absolute; top: 12px; right: 0; width: 1px; height: 48px; content: ""; background: linear-gradient(transparent, rgba(177, 139, 78, .34), transparent); }
.banner-own-highlights span { color: #a99573; font: 600 12px/1 var(--font-body); text-transform: uppercase; }
.banner-own-highlights strong { color: #caba95; font: 700 20px/1 var(--font-title); }
.banner-own-ranking-stat[hidden], .banner-own-activity[hidden] { display: none; }
.banner-own-activity { grid-column: 2 / 4; text-align: center; }
.banner-own-activity > span { color: #bc7b70; font: 700 13px/1.15 var(--font-body); }
.banner-own-activity > strong { color: #cdbb9b; font-size: 16px; }
.banner-own-activity b { color: #d2b779; font: inherit; }

.banner-territories {
    position: absolute;
    left: 60px;
    top: 296px;
    width: 480px;
    height: 174px;
}

.banner-territories h2 {
    height: 30px;
    margin: 0;
    color: #bca177;
    font: 700 16px/30px var(--font-title);
    text-align: center; text-shadow: 0 2px 0 #000; text-transform: uppercase;
}

.banner-territory-list {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding-top: 2px;
}

.banner-territory {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    min-width: 0;
    text-align: center;
}

.banner-territory__coat {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 4px;
    background-image: var(--banner-coat-image);
    background-position: var(--banner-coat-x, 0) var(--banner-coat-y, 0);
    background-repeat: no-repeat;
    background-size: var(--banner-coat-atlas-width) var(--banner-coat-atlas-height);
}

.banner-territory strong,
.banner-territory small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.banner-territory strong {
    color: #cdbb9b; font: 700 15px/1.2 var(--font-title);
}
.banner-territory small {
    margin-top: 4px;
    color: #aebd83; font: 600 13px/1.2 var(--font-body); text-transform: uppercase;
}
.banner-territory:not(.banner-territory--pol) small { color: #bc7b70; }
.banner-own-metrics {
    position: absolute;
    left: 70px;
    top: 472px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    width: 460px;
}
.banner-own-metric {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 43px;
    padding: 0 12px;
    background: linear-gradient(90deg, rgba(79, 58, 33, .14), transparent);
}
.banner-own-metric span {
    color: #a99573; font: 600 12px/1.2 var(--font-body);
}

.banner-own-metric strong {
    color: #cdbb9b; font: 700 14px/1 var(--font-title);
    text-align: right;
}

.banner-weekly-reward { position: absolute; left: 70px; top: 572px; width: 460px; height: 102px; background: linear-gradient(90deg, transparent, rgba(92, 67, 37, .2) 12% 88%, transparent); text-align: center; }
.banner-weekly-reward__summary { display: flex; align-items: center; justify-content: center; gap: 9px; height: 36px; }
.banner-weekly-reward__summary > span { display: grid; gap: 2px; text-align: left; }
.banner-weekly-reward__summary small { color: #a99573; font: 600 10px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.banner-weekly-reward__summary strong { color: #caba95; font: 700 15px/1 var(--font-title); }
.banner-reward-coin { display: block; width: 24px; height: 24px; background: transparent var(--banner-coin-atlas, url("../image/ui/gold.png")) 0 0 / 72px 24px no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.banner-reward-coin--large { width: 48px; height: 48px; background-size: 144px 48px; }
.banner-reward-coin--small { width: 18px; height: 18px; background-size: 54px 18px; }
.banner-reward-coin--none { opacity: .28; filter: grayscale(1) drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.banner-weekly-reward__conditions { display: grid; grid-template-columns: repeat(3, 1fr); height: 42px; }
.banner-reward-condition { position: relative; display: grid; grid-template-columns: 29px 1fr; grid-template-rows: 15px 15px; align-content: center; align-items: center; box-sizing: border-box; padding: 2px 7px; opacity: .58; }
.banner-reward-condition:not(:last-child)::after { position: absolute; top: 7px; right: 0; width: 1px; height: 28px; content: ""; background: linear-gradient(transparent, rgba(177, 139, 78, .32), transparent); }
.banner-reward-condition .banner-reward-coin { grid-row: 1 / 3; }
.banner-reward-condition span { color: #a99573; font: 600 10px/1 var(--font-body); text-align: left; text-transform: uppercase; }
.banner-reward-condition strong { overflow: hidden; color: #ad846f; font: 700 11px/1 var(--font-body); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.banner-reward-condition.is-met { opacity: 1; }
.banner-reward-condition.is-met strong { color: #aebd83; }
.banner-reward-condition.is-projected { background: linear-gradient(90deg, transparent, rgba(167, 127, 57, .2), transparent); }
.banner-weekly-reward > p { margin: 3px 0 0; color: #907f63; font: 400 10px/1.25 var(--font-body); }

.banner-details {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 7;
    box-sizing: border-box;
    width: 448px;
    height: 228px;
    color: #d2bf98;
    background: transparent url("../image/ui/window_class.png") center / 448px 228px no-repeat;
}

.banner-details h2 {
    position: absolute;
    left: 48px;
    top: 11px;
    width: 270px;
    height: 38px;
    margin: 0;
    overflow: hidden;
    color: #caba95;
    font: 700 15px/38px var(--font-title);
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 1px #000;
    white-space: nowrap;
}

.banner-details__copy {
    position: absolute;
    left: 52px;
    top: 66px;
    width: 328px;
}

.banner-details__metric {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 38px;
    color: #a99573;
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .045em;
    text-transform: uppercase;
}

.banner-details__metric:not(:last-child)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(177, 139, 78, .28), transparent);
}

.banner-details__metric strong {
    color: #cdbb9b;
    font: 700 14px/1 var(--font-title);
}

.banner-rule {
    position: absolute;
    left: 710px;
    top: 872px;
    z-index: 7;
    width: 500px;
    margin: 0;
    color: #bca177;
    font: 400 12px/1.4 var(--font-body);
    text-align: center;
}

.banner-rule.is-closing {
    color: #d0a36c;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 2px 0 #000;
}

.banner-back-button {
    position: absolute;
    left: 50%;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cab488;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 0 #000;
    text-transform: none;
    transform: translateX(-50%);
}

.banner-back-button {
    bottom: 100px;
}

.banner-view:not(.is-choosing) .banner-back-button { bottom: 56px; }
.banner-view:not(.is-choosing) .banner-rule { left: 710px; top: 912px; width: 500px; }

@media (prefers-reduced-motion: reduce) {
    .banner-choice__level,
    .banner-choice__level-frame { animation: none !important; }
    .banner-choice__sprite { transition: none; }
}

.banner-choice-content[hidden], .banner-choice-preview[hidden], .banner-previous-overview[hidden],
.banner-choice-confirm[hidden], .banner-details[hidden] { display: none; }
.banner-choice-content { position: absolute; inset: 0; color: #cdbb9b; }
.banner-choice-intro { position: absolute; left: 70px; top: 26px; width: 460px; text-align: center; }
.banner-choice-intro h1 { margin: 0; color: #caba95; font: 700 20px/38px var(--font-title); letter-spacing: .02em; text-shadow: 0 2px 0 #000; text-transform: uppercase; }
.banner-choice-intro p { width: 430px; margin: 7px auto 0; color: #a99573; font: 400 15px/1.45 var(--font-body); }
.banner-choice-intro strong { display: block; margin-top: 10px; color: #bca177; font: 700 15px/1.3 var(--font-title); text-shadow: 0 2px 0 #000; }
.banner-previous-overview, .banner-choice-preview { position: absolute; left: 70px; width: 460px; }
.banner-previous-overview { top: 140px; }
.banner-choice-preview { top: 174px; }
.banner-previous-overview h2, .banner-choice-preview > h2, .banner-choice-territories h3 { margin: 0; color: #bca177; font: 700 16px/30px var(--font-title); text-align: center; text-shadow: 0 2px 0 #000; text-transform: uppercase; }
.banner-previous-ranking { margin-top: 5px; }
.banner-previous-ranking__row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; box-sizing: border-box; min-height: 29px; padding: 0 12px; background: linear-gradient(90deg, rgba(79, 58, 33, .15), transparent); }
.banner-previous-ranking__row:nth-child(even) { background-color: rgba(58, 42, 25, .08); }
.banner-previous-ranking__row:first-child { background: linear-gradient(90deg, rgba(132, 94, 43, .3), rgba(81, 58, 31, .15) 72%, transparent); box-shadow: inset 0 0 0 1px rgba(205, 174, 105, .38), inset 0 0 14px rgba(156, 112, 48, .12); }
.banner-previous-ranking__row strong { color: #bca177; font: 700 14px/1 var(--font-title); }
.banner-previous-ranking__row span { overflow: hidden; color: #caba95; font: 600 14px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.banner-previous-ranking__row b { color: #cdbb9b; font: 700 13px/1 var(--font-title); }
.banner-previous-player { margin-top: 11px; padding: 11px 18px; color: #cdbb9b; background: linear-gradient(90deg, transparent, rgba(92, 67, 37, .18) 12% 88%, transparent); font: 400 16px/1.45 var(--font-body); text-align: center; }
.banner-previous-player > span { display: block; }
.banner-previous-reward { width: 506px; min-height: 48px; margin: 9px -41px -3px; padding: 6px 0; box-sizing: border-box; background: linear-gradient(90deg, transparent, rgba(76, 55, 34, .14) 18% 82%, transparent); box-shadow: inset 0 1px rgba(192, 158, 97, .1), inset 0 -1px rgba(40, 27, 17, .28); }
.banner-previous-reward[hidden] { display: none; }
.banner-previous-reward__summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; }
.banner-previous-reward__summary[hidden], .banner-previous-reward__description[hidden] { display: none; }
.banner-previous-reward__summary > span { display: grid; gap: 4px; text-align: left; }
.banner-previous-reward small { color: #bca177; font: 700 13px/1.1 var(--font-body); letter-spacing: .055em; text-transform: uppercase; }
.banner-previous-reward strong { color: #dbc79b; font: 700 20px/1.05 var(--font-title); text-shadow: 0 2px 0 #000; }
.banner-previous-reward__description { width: 476px; margin: 7px auto 6px; color: #cdbb9b; font: 600 14px/1.35 var(--font-body); text-align: center; }
.banner-previous-reward__rules { display: grid; gap: 6px; width: 476px; margin: 6px auto 7px; padding-top: 9px; border-top: 1px solid rgba(184, 150, 90, .15); color: #cdbb9b; font: 600 13px/1.35 var(--font-body); text-align: left; }
.banner-previous-reward__rules[hidden] { display: none; }
.banner-previous-reward__rules b { color: #d2b779; font-weight: 700; }
.banner-previous-reward__rules em { color: inherit; font-style: normal; }
.banner-previous-reward__rules small { margin-top: 4px; color: #9c8a6b; font-size: 12px; text-align: center; }
.banner-choice-preview > h2 { position: relative; width: 285px; color: #caba95; font-size: 18px; line-height: 44px; }
.banner-choice-preview > h2::before, .banner-choice-preview > h2::after { position: absolute; left: 8px; right: 8px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(205, 174, 105, .58) 20% 80%, transparent); }
.banner-choice-preview > h2::before { top: 0; }
.banner-choice-preview > h2::after { bottom: 0; }
.banner-choice-territories { position: absolute; left: -10px; top: 105px; width: 480px; height: 174px; }
.banner-choice-territories .banner-territory-list { padding-top: 2px; }
.banner-choice-metrics { position: absolute; left: 0; top: 330px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 460px; }
.banner-choice-metrics > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 68px; background: linear-gradient(90deg, transparent, rgba(92, 67, 37, .18), transparent); }
.banner-choice-metrics span { color: #a99573; font: 600 11px/1.25 var(--font-body); text-align: center; text-transform: uppercase; }
.banner-choice-metrics strong { color: #caba95; font: 700 20px/1 var(--font-title); }
.banner-choice-rank-card { position: absolute; right: -4px; top: -15px; width: 165px; height: 90px; padding: 14px 0 0 92px; box-sizing: border-box; }
.banner-choice-rank-icon { position: absolute; left: 0; top: 0; width: 96px; height: 96px; background: var(--banner-rank-atlas-image) var(--banner-rank-atlas-x, 0) 0 / var(--banner-rank-atlas-width) var(--banner-rank-atlas-height) no-repeat; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .72)); }
.banner-choice-rank-card span:not(.banner-choice-rank-icon), .banner-choice-rank-card strong { display: block; width: 72px; text-align: center; }
.banner-choice-rank-card span:not(.banner-choice-rank-icon) { color: #a99573; font: 600 12px/1.2 var(--font-body); text-transform: uppercase; }
.banner-choice-rank-card strong { margin-top: 7px; color: #caba95; font: 700 15px/1 var(--font-title); }
.banner-choice-confirm { position: absolute; left: 140px; top: 590px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; color: #cab488; font: 700 16px/1 var(--font-title); text-shadow: 0 2px 0 #000; text-transform: none; }
.banner-choice-confirm:disabled { cursor: wait; }
.banner-choice-status { position: absolute; left: 70px; top: 550px; width: 460px; margin: 0; color: #bca177; font: 400 12px/1.4 var(--font-body); text-align: center; }
.banner-view.is-confirming .banner-choice-territories { display: none; }
.banner-view.is-confirming .banner-choice-status { left: 90px; top: 300px; box-sizing: border-box; width: 420px; padding: 16px 20px; color: #caba95; background: linear-gradient(90deg, transparent, rgba(92, 67, 37, .18) 12% 88%, transparent); font: 700 20px/1.45 var(--font-title); text-shadow: 0 2px 0 #000; }
.banner-view.is-choosing .banner-back-button { bottom: 56px; }