:root {
    --medal-navy: #071a3b;
    --medal-navy-light: #142e60;
    --medal-member-bg: #424777;
    --medal-gold: #f7c768;
    --medal-cream: #fff8ef;
    --medal-red: #d92f2f;
}

.member-medal-summary {
    position: relative;
    min-height: 2.24rem;
    margin-top: -.12rem;
    padding: .28rem .24rem .68rem;
    color: #fff5d0;
    background: var(--medal-member-bg);
    border-top: 1px solid rgba(255,255,255,.22);
    border-radius: 0 0 .15rem .15rem;
    box-sizing: border-box;
}

.member-medal-summary.is-without-coupon {
    min-height: 0;
    padding-bottom: .28rem;
}

.member-medal-test-trigger {
    position: absolute;
    top: .08rem;
    right: .18rem;
    z-index: 2;
    padding: .05rem .14rem;
    color: #ffe5a0;
    font-size: .2rem;
    line-height: 1.4;
    background: rgba(7,26,59,.32);
    border: 1px solid rgba(255,229,160,.55);
    border-radius: .18rem;
}

.member-medal-main {
    display: flex;
    align-items: center;
    min-height: 1.2rem;
}

.member-medal-count {
    flex: none;
    width: 1.48rem;
    padding-right: .18rem;
    color: #fff5d0;
    border-right: 1px solid rgba(255,255,255,.35);
    box-sizing: border-box;
}

.member-medal-count span {
    display: block;
    font-size: .26rem;
    font-weight: bold;
    line-height: 1.2;
}

.member-medal-count strong {
    display: block;
    margin-top: .06rem;
    color: var(--medal-gold);
    font-size: .58rem;
    line-height: 1;
}

.member-medal-count small {
    font-size: .34rem;
}

.member-medal-preview {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0 .14rem 0 .18rem;
}

.member-medal-icon,
.collection-medal,
.medal-detail-icon {
    display: block;
    flex: none;
    background-repeat: no-repeat;
    background-size: 700% auto;
}

.member-medal-icon {
    width: .88rem;
    height: 1.12rem;
    border-radius: 0;
}

.member-medal-icon[class*="annual-medal-"] {
    background-image: url(/h5/v2/css/img/medals/annual-medals-transparent.png);
    background-size: 700% auto;
}

.member-medal-icon[class*="permanent-medal-"] {
    background-image: url(/h5/v2/css/img/medals/permanent-medals-gold.png);
    position: relative;
    background-size: 0 0;
}

.member-medal-icon[class*="permanent-medal-"]::before,
.collection-medal[class*="permanent-medal-"]::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 94%;
    margin: auto;
    background-image: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: 300% auto;
    pointer-events: none;
}

.member-medal-icon.is-locked {
    filter: grayscale(1);
    opacity: .42;
}

.member-medal-arrow {
    flex: none;
    color: #ffe5a0;
    font-size: .42rem;
    line-height: 1;
}

.member-medal-coupon {
    position: absolute;
    right: 0;
    bottom: .08rem;
    min-width: 2.18rem;
    height: .56rem;
    padding: 0 .18rem 0 .28rem;
    color: #5f3300;
    background: #ffd990;
    border: 0;
    border-radius: .08rem 0 .14rem .08rem;
    box-shadow: 0 0 .14rem rgba(247,199,104,.45);
    font-size: .2rem;
    white-space: nowrap;
}

.member-medal-coupon::before {
    content: '';
    position: absolute;
    left: -.1rem;
    top: 50%;
    width: .2rem;
    height: .2rem;
    margin-top: -.1rem;
    background: var(--medal-member-bg);
    border-radius: 50%;
}

.member-medal-coupon strong {
    display: inline-block;
    margin-right: .14rem;
    padding-right: .14rem;
    border-right: 1px solid rgba(95,51,0,.32);
    font-size: .3rem;
}

.member-medal-coupon.is-loading,
.member-medal-coupon.is-claimed {
    color: #7c6a50;
    background: #e9e0d1;
}

.member-medal-coupon.is-loading {
    pointer-events: none;
}

.member-coupon-plus {
    position: fixed;
    z-index: 1012;
    color: #c66c00;
    font-size: .26rem;
    font-weight: bold;
    pointer-events: none;
    animation: couponPlus .9s ease-out forwards;
}

.member-coupon-fly {
    position: fixed;
    z-index: 1011;
    width: 1.2rem;
    padding: .12rem .08rem;
    color: #603400;
    background: #ffd990;
    border-radius: .08rem;
    text-align: center;
    font-size: .24rem;
    font-weight: bold;
    pointer-events: none;
}

.medal-coupon-arrival {
    position: fixed;
    z-index: 1010;
    right: .2rem;
    top: .2rem;
    display: flex;
    align-items: center;
    min-width: 2.5rem;
    padding: .12rem .16rem .12rem .12rem;
    color: #fff2c6;
    background: linear-gradient(145deg, #142f65, #071b3f);
    border: 1px solid rgba(255, 217, 144, .75);
    border-radius: .16rem;
    box-shadow: 0 .08rem .24rem rgba(3, 15, 39, .3);
    opacity: 0;
    transform: translateY(-.28rem) scale(.92);
    transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease;
    pointer-events: none;
}

.medal-coupon-arrival.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.medal-coupon-arrival.is-arrived {
    box-shadow: 0 0 .12rem rgba(255, 224, 151, .92), 0 .1rem .28rem rgba(3, 15, 39, .36);
    animation: medalCouponArrival .55s ease-out;
}

.medal-coupon-arrival-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .58rem;
    height: .46rem;
    margin-right: .12rem;
    color: #a92920;
    background: linear-gradient(180deg, #fff1c8, #ffd17b);
    border-radius: .08rem;
    font-size: .22rem;
    font-weight: bold;
}

.medal-coupon-arrival-copy {
    display: flex;
    flex-direction: column;
    min-width: 1.15rem;
    line-height: 1.25;
}

.medal-coupon-arrival-copy em {
    color: rgba(255, 242, 198, .72);
    font-size: .18rem;
    font-style: normal;
}

.medal-coupon-arrival-copy strong {
    color: #fff4d0;
    font-size: .22rem;
    font-weight: 600;
}

.medal-coupon-arrival-count {
    min-width: .54rem;
    margin-left: .12rem;
    color: #ffda87;
    font-size: .3rem;
    font-weight: bold;
    text-align: right;
}

.medal-coupon-arrival-count::after {
    content: '\5f20';
    margin-left: .02rem;
    font-size: .18rem;
    font-weight: normal;
}

.member-medal-summary.is-arrived #memberCouponCount,
#memberCouponCount.is-arrived {
    animation: couponArrive .55s ease-out;
}

@keyframes couponFly {
    0% { transform: translate(0,0) scale(1) rotate(-4deg); opacity: 1; }
    45% { transform: translate(var(--fly-mid-x),var(--fly-mid-y)) scale(.82) rotate(8deg); opacity: 1; }
    100% { transform: translate(var(--fly-x),var(--fly-y)) scale(.2) rotate(-4deg); opacity: 0; }
}

@keyframes couponArrive {
    0%,100% { transform: scale(1); }
    45% { transform: scale(1.28); color: #f3a51d; }
}

@keyframes medalCouponArrival {
    0%,100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(0) scale(1.08); }
}

@keyframes couponPlus {
    0% { transform: translateY(.18rem) scale(.6); opacity: 0; }
    35% { transform: translateY(0) scale(1.12); opacity: 1; }
    100% { transform: translateY(-.42rem) scale(1); opacity: 0; }
}

.annual-medal-1 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 0 50%; }
.annual-medal-2 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 16.6667% 50%; }
.annual-medal-3 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 33.3333% 50%; }
.annual-medal-4 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 50% 50%; }
.annual-medal-5 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 66.6667% 50%; }
.annual-medal-6 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 83.3333% 50%; }
.annual-medal-7 { background-image: url(/h5/v2/css/img/medals/annual-medals.png); background-position: 100% 50%; }

.permanent-medal-1,
.permanent-medal-2,
.permanent-medal-3 {
    background-image: url(/h5/v2/css/img/medals/permanent-medals-gold.png);
    background-size: 300% auto;
}
.permanent-medal-1 { background-position: 0 50%; }
.permanent-medal-2 { background-position: 50% 50%; }
.permanent-medal-3 { background-position: 100% 50%; }

.medal-page-body {
    background: #f7f1e7;
}

.medal-page {
    min-height: 100vh;
    max-width: 7.86rem;
    margin: 0 auto;
    padding: .16rem .16rem .32rem;
    color: #17233d;
    background: #f7f1e7;
    box-sizing: border-box;
}

.medal-overview {
    position: relative;
    min-height: 5.08rem;
    margin: 0;
    padding: 0 .24rem .32rem;
    color: #fff2c6;
    background: linear-gradient(160deg, #102858 0%, #061a3d 68%, #092047 100%);
    border-radius: .12rem .12rem .18rem .18rem;
    box-shadow: 0 .06rem .16rem rgba(2, 16, 42, .16);
    text-align: center;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.medal-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
}

.medal-page-header h1 {
    margin: 0;
    color: #fff5d4;
    font-size: .4rem;
    font-weight: 600;
    line-height: 1rem;
}

.medal-back-link {
    position: absolute;
    left: 0;
    top: 50%;
    width: .52rem;
    height: .52rem;
    margin-top: -.26rem;
    color: #fff6d6;
    font-size: .4rem;
    line-height: .52rem;
    text-align: left;
}

.medal-year {
    color: #fff6db;
    font-size: .32rem;
    line-height: .48rem;
}

.medal-achievement {
    padding: .03rem 0 .06rem;
    background: url(/h5/v2/css/img/medals/laurel-pair.png) center / 100% 100% no-repeat;
}

.medal-progress-title {
    margin-top: .02rem;
    color: #fff6db;
    font-size: .32rem;
    line-height: .62rem;
}

.medal-progress-title strong {
    color: var(--medal-gold);
    font-size: .5rem;
    font-weight: 600;
}

.medal-progress-title em {
    color: #f8c44f;
    font-style: normal;
}

.medal-rule-link {
    position: absolute;
    right: 0;
    top: 50%;
    height: .52rem;
    margin-top: -.26rem;
    padding: 0;
    color: #fff1c2;
    background: transparent;
    border: 0;
    font-size: .34rem;
    line-height: .52rem;
}

.medal-reward-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-right: -.24rem;
    margin-left: -.24rem;
    margin-top: .2rem;
}

.medal-reward-track::before {
    position: absolute;
    top: .91rem;
    right: 12.5%;
    left: 12.5%;
    z-index: 0;
    border-top: .025rem solid rgba(248, 222, 157, .92);
    content: "";
}

.medal-reward-node {
    position: relative;
    width: 25%;
    color: #fff;
    box-sizing: border-box;
    z-index: 1;
}

.medal-reward-node:not(:last-child)::after {
    position: absolute;
    top: .855rem;
    right: -.06rem;
    z-index: 3;
    width: .12rem;
    height: .12rem;
    background: #f8e3a5;
    border-radius: 50%;
    box-shadow: 0 0 .07rem rgba(255, 221, 143, .8);
    content: "";
}

.medal-reward-card-copy {
    position: relative;
    left: -.14rem;
    z-index: 1;
    width: 2.02rem;
    height: 1.54rem;
    margin: 0 auto;
    padding-top: .11rem;
    box-sizing: border-box;
}

.medal-reward-card-copy::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: center top / 100% 100% no-repeat url("img/medals/reward-tier-normal.png");
    content: "";
}

.medal-reward-node.is-ready .medal-reward-card-copy::before,
.medal-reward-node.is-claimed .medal-reward-card-copy::before {
    background-image: url("img/medals/reward-tier-ready.png");
    filter: drop-shadow(0 0 .1rem rgba(255, 218, 137, .95));
}

.medal-reward-node.is-locked .medal-reward-card-copy::before {
    filter: grayscale(1) brightness(1.42) contrast(.9);
}

.medal-reward-card-copy span,
.medal-reward-card-copy strong,
.medal-reward-node small,
.medal-reward-node button {
    display: block;
}

.medal-reward-card-copy span {
    position: relative;
    top: .05rem;
    z-index: 1;
    height: .47rem;
    padding: 0;
    font-size: .22rem;
    line-height: .47rem;
}

.medal-reward-node small i,
.medal-reward-node button i {
    display: inline-block;
    flex: 0 0 .24rem;
    width: .24rem;
    height: .24rem;
    margin-right: .05rem;
    color: #0b2a5b;
    background: #f8e3a5;
    border-radius: 50%;
    font-size: .14rem;
    line-height: .24rem;
    text-align: center;
    vertical-align: 0;
}

.medal-reward-node small .icon-reduce-1 {
    width: auto;
    height: auto;
    color: inherit;
    background: transparent;
    border-radius: 0;
    font-size: .2rem;
    line-height: inherit;
    vertical-align: 0;
}

.medal-reward-node .reward-status-done i {
    color: #0b2a5b;
    background: #f8e3a5;
}

.medal-reward-node .reward-status-ready {
    color: #ffe4a2;
}

.medal-reward-node .reward-status-ready i {
    color: #f8e3a5;
    background: transparent;
    border: .02rem solid #f8e3a5;
    box-sizing: border-box;
    line-height: .2rem;
}

.medal-reward-card-copy strong {
    position: relative;
    top: .05rem;
    z-index: 1;
    height: .64rem;
    margin: 0;
    padding: 0;
    color: #c92525;
    font-size: .31rem;
    line-height: .64rem;
}

.medal-reward-node.is-ready .medal-reward-card-copy strong,
.medal-reward-node.is-claimed .medal-reward-card-copy strong {
    font-size: .34rem;
    font-weight: 700;
}

.medal-reward-node small,
.medal-reward-node button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: .42rem;
    min-height: .42rem;
    margin-top: .04rem;
    padding: 0 .02rem;
    color: #fff1c8;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: .22rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.medal-reward-node.is-locked {
    color: #afbdd3;
}

.medal-reward-node.is-locked .medal-reward-card-copy strong {
    color: #18294b;
}

.medal-reward-node.is-locked small {
    color: #afbdd3;
}

.medal-reward-tip {
    margin-top: .13rem;
    color: #f7deb0;
    font-size: .24rem !important;
}

.medal-collection {
    position: relative;
    z-index: 1;
    margin: -.08rem 0 0;
    padding: .18rem .16rem .14rem;
    background: var(--medal-cream);
    border: 1px solid #efd8b6;
    border-radius: .12rem;
    box-shadow: 0 .03rem .1rem rgba(113, 78, 27, .05);
}

.medal-collection h2 {
    margin: 0 0 .08rem .08rem;
    padding-bottom: .08rem;
    border-bottom: 1px solid rgba(226, 205, 172, .5);
    font-size: .34rem;
    font-weight: 600;
    line-height: .4rem;
}

.medal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .04rem .08rem;
}

.medal-grid-three {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 .08rem;
}

.medal-card {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1.32rem 1fr;
    grid-template-rows: .38rem .32rem;
    align-items: center;
    align-content: center;
    column-gap: .08rem;
    min-width: 0;
    min-height: 1.36rem;
    padding: 0 .04rem;
    color: #18223d;
}

.medal-grid-three .medal-card {
    display: flex;
    flex-direction: column;
    gap: .02rem;
    min-height: 0;
    text-align: center;
}

.collection-medal {
    grid-row: 1 / 3;
    width: 1.28rem;
    height: 1.34rem;
    border-radius: 0;
}

.collection-medal[class*="permanent-medal-"] {
    position: relative;
    background-size: 0 0;
}

.collection-medal[class*="permanent-medal-"]::before {
    width: 88%;
}

.medal-page .collection-medal[class*="annual-medal-"] {
    background-image: url(/h5/v2/css/img/medals/annual-medals-transparent.png);
    background-size: 700% 190%;
}

.medal-card strong {
    overflow: hidden;
    font-size: .27rem;
    font-weight: 600;
    line-height: .32rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.medal-card span {
    color: #b7b3ad;
    font-size: .22rem;
    line-height: .28rem;
}

.medal-card.medal-status-2 span { color: #ed5a28; }
.medal-card.medal-status-1 span { color: #ed7d20; }
.medal-card.medal-status-0 .collection-medal { filter: grayscale(1); opacity: .58; }
.medal-card.medal-status-1 .collection-medal { opacity: .72; }

.permanent-tip {
    margin-top: .08rem;
    color: #8c806e;
    text-align: center;
    font-size: .2rem;
}

.medal-collection + .medal-collection {
    margin-top: .14rem;
}

.medal-grid-three .collection-medal {
    width: 1.42rem;
    height: 1.42rem;
}

.medal-page .medal-grid-three .collection-medal[class*="permanent-medal-"] {
    width: 1.42rem;
    height: 1.42rem;
}

.medal-page .medal-grid-three .collection-medal[class*="permanent-medal-"]::before {
    background-size: 300% 150%;
}

.medal-grid-three .medal-card {
    padding-top: .08rem;
    padding-bottom: .08rem;
}

.medal-empty {
    padding: 2rem .3rem;
    color: #999;
    text-align: center;
}

.medal-rule-mask {
    position: fixed;
    z-index: 1015;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.65);
}

.medal-rule-mask.show { display: flex; }

.medal-rule-panel {
    position: relative;
    width: 82%;
    padding: .4rem .34rem;
    color: #18233e;
    background: var(--medal-cream);
    border-radius: .16rem;
}

.medal-rule-panel button {
    position: absolute;
    right: .18rem;
    top: .12rem;
    color: #26314c;
    background: transparent;
    border: 0;
    font-size: .48rem;
}

.medal-rule-panel h3 {
    text-align: center;
    font-size: .32rem;
}

.medal-rule-panel p {
    margin-top: .22rem;
    color: #5f5a53;
    font-size: .24rem;
    line-height: 1.7;
}

.medal-detail-body {
    min-height: 100vh;
    background: var(--medal-navy);
}

.medal-detail {
    position: relative;
    min-height: 100vh;
    padding: .7rem .38rem .5rem;
    color: #fff0bd;
    background: var(--medal-navy);
    text-align: center;
    box-sizing: border-box;
}

.medal-detail-close {
    position: absolute;
    right: .3rem;
    top: .28rem;
    width: .58rem;
    height: .58rem;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: .43rem;
    line-height: .53rem;
}

.medal-detail-kicker {
    color: #ffe097;
    font-size: .46rem;
    font-weight: bold;
}

.medal-unlock-hero {
    width: 100%;
    height: 5.4rem;
    margin: .2rem auto -.25rem;
    background: url(/h5/v2/css/img/medals/sweet-regular-unlock.png) center center / contain no-repeat;
}

.medal-unlock-hero.is-locked {
    filter: grayscale(1);
    opacity: .52;
}

.medal-detail-icon {
    width: 3.8rem;
    height: 3.8rem;
    margin: .65rem auto .3rem;
    border-radius: .22rem;
}

.medal-detail.medal-status-0 .medal-detail-icon,
.medal-detail.medal-status-1 .medal-detail-icon {
    filter: grayscale(1);
    opacity: .62;
}

.medal-detail h1 {
    font-size: .45rem;
}

.medal-detail-desc {
    margin-top: .15rem;
    color: #f7e6bf;
    font-size: .25rem;
}

.medal-detail-meta {
    margin: .3rem 0;
    padding: .24rem 0;
    border-top: 1px solid rgba(255,230,170,.28);
    border-bottom: 1px solid rgba(255,230,170,.28);
}

.medal-detail-meta span,
.medal-detail-meta strong {
    display: block;
    font-size: .24rem;
}

.medal-detail-meta strong {
    margin-top: .12rem;
    color: var(--medal-gold);
    font-size: .3rem;
}

.medal-share-btn {
    display: block;
    width: 78%;
    margin: .35rem auto 0;
    padding: .2rem 0;
    color: #3e2705;
    background: var(--medal-gold);
    border: 0;
    border-radius: .5rem;
    font-size: .29rem;
    font-weight: bold;
}

.medal-all-link {
    display: inline-block;
    margin-top: .35rem;
    color: #fff0bd;
    font-size: .25rem;
    text-decoration: underline;
}

.medal-unlock-mask {
    --medal-unit: min(13.333333vw, 85.333333px);
    position: fixed;
    z-index: 1014;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    background: rgba(0,0,0,.55);
    box-sizing: border-box;
    animation: medalMaskIn .12s ease-out both;
}

.medal-unlock-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 375px;
    height: auto;
    max-height: 100%;
    min-height: 0;
    padding: calc(.8 * var(--medal-unit)) calc(.28 * var(--medal-unit)) calc(.3 * var(--medal-unit));
    color: #fff0bd;
    background: radial-gradient(circle at 50% 34%, rgba(42,88,155,.26), transparent 48%), linear-gradient(160deg, #071d46 0%, #03142f 100%);
    border: 1px solid rgba(255,220,148,.6);
    border-radius: calc(.28 * var(--medal-unit));
    text-align: center;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0,0,0,.28);
    animation: medalPanelIn .16s ease-out both;
}

.medal-unlock-intro {
    display: none;
    position: absolute;
    z-index: 1;
    top: calc(.72 * var(--medal-unit));
    right: calc(.2 * var(--medal-unit));
    bottom: auto;
    left: calc(.2 * var(--medal-unit));
    height: calc(5.7 * var(--medal-unit));
    pointer-events: none;
    animation: medalIntroStage .2s linear forwards;
}

.medal-unlock-energy {
    background: url(/h5/v2/css/img/medals/medal-unlock-energy-ring.png?v=3) center center / contain no-repeat;
}

.medal-unlock-intro .medal-unlock-energy {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.64);
    will-change: transform, opacity;
    animation: medalIntroEnergy .2s cubic-bezier(.22,1,.36,1) forwards;
}

.medal-unlock-intro p {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ffe29a;
    font-size: calc(.3 * var(--medal-unit));
    line-height: 1.35;
    transform: translate(-50%,-50%);
    text-shadow: 0 0 calc(.18 * var(--medal-unit)) rgba(255,192,68,.6);
    white-space: nowrap;
}

.medal-unlock-intro strong,
.medal-unlock-intro span {
    display: block;
}

.medal-unlock-heading {
    flex-shrink: 0;
    opacity: 0;
    animation: medalContentIn .18s .02s cubic-bezier(.2,.8,.2,1) both;
}

.medal-unlock-visual {
    position: relative;
    flex: none;
    width: calc(100% + calc(.56 * var(--medal-unit)));
    height: calc(5.62 * var(--medal-unit));
    margin: calc(.12 * var(--medal-unit)) calc(-.28 * var(--medal-unit)) 0;
    overflow: visible;
}

.medal-unlock-visual .medal-unlock-energy {
    position: absolute;
    inset: 0 calc(.08 * var(--medal-unit));
    background-size: contain;
    opacity: .85;
    transform: none;
    pointer-events: none;
    animation: none;
}

.medal-unlock-panel .medal-unlock-badge {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: calc(4.2 * var(--medal-unit));
    height: calc(5.3 * var(--medal-unit));
    margin: calc(-2.65 * var(--medal-unit)) 0 0 calc(-2.1 * var(--medal-unit));
    opacity: 0;
    transform: perspective(calc(20 * var(--medal-unit))) rotateY(-540deg) scale(.28);
    filter: none;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    backface-visibility: visible;
    animation: medalBadgeArrive .78s .02s cubic-bezier(.2,.72,.28,1) both;
}

.medal-unlock-panel .medal-unlock-badge[class*="annual-medal-"] {
    background-image: url(/h5/v2/css/img/medals/annual-medals-transparent.png);
}

.medal-unlock-panel .medal-unlock-badge[class*="permanent-medal-"] {
    background-image: url(/h5/v2/css/img/medals/permanent-medals-gold.png);
}

.medal-unlock-close {
    position: absolute;
    right: calc(.18 * var(--medal-unit));
    top: calc(.16 * var(--medal-unit));
    z-index: 2;
    width: calc(.64 * var(--medal-unit));
    height: calc(.64 * var(--medal-unit));
    color: #fff;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: calc(.46 * var(--medal-unit));
    line-height: calc(.58 * var(--medal-unit));
}

.medal-unlock-panel h2 {
    margin: 0;
    color: #ffe29a;
    font-size: calc(.56 * var(--medal-unit));
    font-weight: bold;
    letter-spacing: calc(.04 * var(--medal-unit));
    text-shadow: 0 0 calc(.2 * var(--medal-unit)) rgba(255,200,82,.42);
}

.medal-unlock-copy {
    flex-shrink: 0;
    margin-top: calc(.04 * var(--medal-unit));
    opacity: 0;
    animation: medalContentIn .2s .48s cubic-bezier(.2,.8,.2,1) both;
}

.medal-unlock-copy h3 {
    margin: 0;
    color: #ffe29a;
    font-size: calc(.48 * var(--medal-unit));
    font-weight: bold;
}

.medal-unlock-copy p {
    margin: calc(.14 * var(--medal-unit)) 0 0;
    color: #f1dfb9;
    font-size: calc(.24 * var(--medal-unit));
}

.medal-unlock-copy .medal-unlock-meta {
    position: relative;
    width: 68%;
    margin: calc(.28 * var(--medal-unit)) auto 0;
    color: #f5dfb0;
    line-height: calc(.32 * var(--medal-unit));
}

.medal-unlock-copy .medal-unlock-meta::before,
.medal-unlock-copy .medal-unlock-meta::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,224,158,.88));
}

.medal-unlock-copy .medal-unlock-meta::before {
    left: 0;
}

.medal-unlock-copy .medal-unlock-meta::after {
    right: 0;
    transform: rotate(180deg);
}

.medal-unlock-copy .medal-unlock-progress {
    margin-top: calc(.14 * var(--medal-unit));
}

.medal-unlock-progress strong {
    color: #ffe29a;
    font-size: calc(.38 * var(--medal-unit));
}

.medal-unlock-panel .medal-share-btn {
    display: block;
    width: 82%;
    height: calc(.92 * var(--medal-unit));
    margin: 0 auto;
    border-radius: calc(.5 * var(--medal-unit));
    font-size: calc(.32 * var(--medal-unit));
    font-weight: bold;
}

.medal-unlock-actions {
    flex-shrink: 0;
    margin-top: auto;
    padding: calc(.18 * var(--medal-unit)) 0 calc(.1 * var(--medal-unit));
    opacity: 0;
    animation: medalContentIn .2s .62s cubic-bezier(.2,.8,.2,1) both;
}

.medal-unlock-panel .medal-share-btn {
    color: #3e2705;
    background: linear-gradient(180deg, #ffdf8c 0%, #f7a62e 100%);
    border: 0;
    box-shadow: 0 calc(.08 * var(--medal-unit)) calc(.2 * var(--medal-unit)) rgba(247,166,46,.24);
}

.medal-unlock-panel .medal-all-link {
    margin-top: calc(.26 * var(--medal-unit));
    text-decoration: none;
}

.medal-share-sheet,
.medal-poster-preview {
    position: fixed;
    z-index: 1016;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(2,8,20,.78);
}

.medal-share-sheet.show,
.medal-poster-preview.show {
    display: flex;
}

.medal-share-sheet-panel {
    width: 100%;
    max-width: calc(7.5 * var(--medal-unit));
    padding: calc(.35 * var(--medal-unit)) calc(.32 * var(--medal-unit)) calc(.22 * var(--medal-unit));
    color: #17233d;
    background: #fff8ef;
    border-radius: calc(.28 * var(--medal-unit)) calc(.28 * var(--medal-unit)) 0 0;
    text-align: center;
    box-sizing: border-box;
}

.medal-share-sheet-panel h3 {
    color: #17233d;
    font-size: calc(.34 * var(--medal-unit));
    font-weight: bold;
}

.medal-share-sheet-panel p {
    margin: calc(.08 * var(--medal-unit)) 0 calc(.24 * var(--medal-unit));
    color: #7b6b55;
    font-size: calc(.22 * var(--medal-unit));
}

.medal-share-sheet-panel button {
    display: block;
    width: 100%;
    height: calc(.78 * var(--medal-unit));
    margin-top: calc(.14 * var(--medal-unit));
    color: #5b350b;
    background: #f7c768;
    border-radius: calc(.4 * var(--medal-unit));
    font-size: calc(.28 * var(--medal-unit));
}

.medal-share-sheet-panel .medal-share-cancel {
    color: #6d7483;
    background: #ebe7df;
}

.medal-poster-preview {
    align-items: center;
    flex-direction: column;
    padding: calc(.3 * var(--medal-unit));
    background: rgba(2,8,20,.94);
    box-sizing: border-box;
}

.medal-poster-preview > button {
    position: absolute;
    top: calc(.24 * var(--medal-unit));
    right: calc(.24 * var(--medal-unit));
    width: calc(.62 * var(--medal-unit));
    height: calc(.62 * var(--medal-unit));
    color: #fff;
    background: rgba(0,0,0,.45);
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: calc(.4 * var(--medal-unit));
}

.medal-poster-preview p {
    margin-bottom: calc(.2 * var(--medal-unit));
    color: #fff0bd;
    font-size: calc(.25 * var(--medal-unit));
}

.medal-poster-preview img {
    display: block;
    max-width: 92%;
    max-height: 82vh;
    background: #071d46;
    border: 1px solid rgba(255,220,148,.65);
    border-radius: calc(.16 * var(--medal-unit));
    box-shadow: 0 calc(.18 * var(--medal-unit)) calc(.7 * var(--medal-unit)) rgba(0,0,0,.48);
}

.medal-poster-preview > a {
    display: block;
    min-width: calc(3.4 * var(--medal-unit));
    margin-top: calc(.2 * var(--medal-unit));
    padding: calc(.16 * var(--medal-unit)) calc(.32 * var(--medal-unit));
    color: #522d08;
    background: linear-gradient(180deg, #ffdf8c 0%, #f7a62e 100%);
    border-radius: calc(.38 * var(--medal-unit));
    font-size: calc(.26 * var(--medal-unit));
    font-weight: bold;
    text-align: center;
}

.medal-unlock-panel.is-poster-capture {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.medal-unlock-panel.is-poster-capture .medal-unlock-heading,
.medal-unlock-panel.is-poster-capture .medal-unlock-energy,
.medal-unlock-panel.is-poster-capture .medal-unlock-badge,
.medal-unlock-panel.is-poster-capture .medal-unlock-copy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

.medal-unlock-panel.is-poster-capture .medal-unlock-intro {
    display: none !important;
}

.medal-unlock-panel.is-poster-capture .medal-unlock-badge {
    transform: translateY(0) scale(1) !important;
}

@keyframes medalMaskIn {
    from { background-color: rgba(0,0,0,0); }
    to { background-color: rgba(0,0,0,.55); }
}

@keyframes medalPanelIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes medalIntroStage {
    0%,72% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes medalIntroEnergy {
    0% { opacity: 0; transform: scale(.88); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes medalBadgeArrive {
    from { opacity: .35; transform: perspective(calc(20 * var(--medal-unit))) rotateY(-540deg) scale(.28); }
    to { opacity: 1; transform: perspective(calc(20 * var(--medal-unit))) rotateY(0deg) scale(1); }
}

@keyframes medalContentIn {
    from { opacity: 0; transform: translateY(calc(.08 * var(--medal-unit))); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .medal-unlock-mask,
    .medal-unlock-panel,
    .medal-unlock-intro,
    .medal-unlock-heading,
    .medal-unlock-panel .medal-unlock-energy,
    .medal-unlock-panel .medal-unlock-badge,
    .medal-unlock-copy,
    .medal-unlock-actions,
    .member-coupon-fly,
    .member-coupon-plus,
    #memberCouponCount.is-arrived {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
    }

    .medal-unlock-intro {
        display: none;
    }

    .medal-unlock-panel .medal-unlock-badge {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}