.membership-billing-content{padding:1.4rem;display:grid;gap:1rem;color:#f5eaf5}
.membership-billing-content p{line-height:1.5;color:#d4bfd6}
.membership-billing-content label{display:flex;gap:.8rem;align-items:flex-start}
.membership-billing-content input[type=checkbox]{width:1.25rem;height:1.25rem;flex-shrink:0}
.membership-billing-card{padding:1.2rem;border:1px solid #704664;border-radius:16px;background:#160f20}
.membership-billing-card .button{margin:.4rem .4rem .4rem 0}
.membership-billing-dialog{max-height:90dvh;overflow:auto;width:min(900px,95vw)}
.game-subscription-card .game-plan-details p{margin:.6rem 0}

/* Keep approved art and all four tools tiers; collapse supporting explanations. */
#page-membership .membership-scope{padding:0;margin:10px auto 14px;max-width:1000px;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:0 2px 5px #030612}
#page-membership .membership-scope h2{font-size:22px!important;margin:0 0 5px}
#page-membership .membership-scope p{font-size:13px;margin:0}
#page-membership .membership-products{margin:12px auto;gap:12px}
#page-membership .membership-product{padding:10px 12px;gap:3px}
#page-membership .membership-product strong{font-size:16px}
#page-membership .membership-product span{font-size:11px}
#page-membership .sky-heading h1{font-size:clamp(34px,4vw,58px)!important}
#page-membership .sky-heading>p{font-size:14px!important;margin:5px 0 9px!important}
#page-membership .sky-account{padding:6px 14px}
#page-membership .membership-more{max-width:1000px;margin:12px auto;padding:10px 0;border:0;border-top:1px solid #cba4c277;border-radius:0;background:none;color:#f5e6f4;text-shadow:0 1px 5px #000}
#page-membership .membership-more summary{cursor:pointer;font-size:14px;font-weight:600}
#page-membership .membership-more summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
#page-membership .membership-more-content{margin-top:12px;padding:14px 18px;background:#080c1bea;border-radius:10px}
#page-membership .membership-more-content h3{font-size:15px;margin:10px 0 5px}
#page-membership .membership-more-content p{font-size:13px;line-height:1.55;margin:7px 0 12px}
#page-membership .membership-more-content .button{margin:4px 8px 8px 0}
#page-membership .membership-renewal{margin:6px auto 10px;text-align:center;font-size:12px;line-height:1.4;color:#f1e6f4;text-shadow:0 1px 5px #000}
#page-membership .sky-values{padding:12px 4%}

/* Fit the membership overview into desktop windows; details open over the page. */
@media(min-width:1100px) and (min-height:650px){
body[data-page="membership"]{overflow:hidden!important}
body[data-page="membership"] .app-frame{position:fixed!important;inset:0!important;height:100dvh!important;min-height:0!important}
body[data-page="membership"] .workspace{height:100dvh!important;min-height:0!important;overflow:hidden!important}
body[data-page="membership"] .main-content{min-height:0!important;overflow:hidden!important}
#page-membership.sky-membership.active{display:flex!important;flex-direction:column;height:100%!important;max-height:100%!important;min-height:0!important;padding:10px 3% 6px!important;overflow:hidden}
#page-membership .sky-heading{flex:none;padding-bottom:4px!important}
#page-membership .sky-heading h1{font-size:clamp(32px,4vh,44px)!important}
#page-membership .sky-heading>p{margin:3px 0 5px!important;font-size:12px!important}
#page-membership .sky-account{padding:4px 12px;font-size:11px}
#page-membership .membership-products{flex:none;width:min(780px,100%);margin:7px auto;gap:12px}
#page-membership .membership-product{padding:7px 12px}
#page-membership .membership-product span{display:none}
#page-membership .membership-product-panel{display:flex;flex-direction:column;flex:1;min-height:0}
#page-membership .membership-scope{flex:none;margin:3px auto 5px}
#page-membership .membership-scope h2{display:none}
#page-membership .membership-scope p{font-size:12px}
#page-membership .sky-plans{flex:1;min-height:0;align-items:stretch;width:100%;max-width:1200px;margin:0 auto}
#page-membership .sky-plans{container-type:size;align-items:center}
#page-membership .sky-pass{height:auto;max-height:100%;width:min(100%,62cqh);aspect-ratio:.62;align-self:center;justify-self:center}
#page-membership .sky-pass-copy{inset:33% 10% 8%;row-gap:1%}
#page-membership .sky-pass-heading h2,#page-membership .game-subscription-card h2{font-size:clamp(19px,2.8vh,30px)!important;margin:0}
#page-membership .sky-price strong{font-size:clamp(28px,4.5vh,48px)!important}
#page-membership .sky-price span{font-size:12px}
#page-membership .sky-benefits{font-size:clamp(10px,1.5vh,14px);margin:2% 0;gap:2%}
#page-membership .sky-benefits .sky-icon{width:17px;height:17px;flex-basis:17px}
#page-membership .sky-plan-action{font-size:13px;min-height:30px;padding:5px 3px}
#page-membership .game-plan-details{font-size:clamp(11px,1.55vh,14px);line-height:1.25}
#page-membership .game-plan-details p{margin:4px 0}
#page-membership .membership-more{flex:none;width:100%;margin:5px auto 0;padding:5px 0}
#page-membership .membership-more summary{font-size:12px}
#page-membership .membership-more[open] .membership-more-content{position:absolute;z-index:20;bottom:72px;left:5%;right:5%;max-height:55dvh;overflow:auto;border:1px solid #c998bb;box-shadow:0 8px 40px #000}
#page-membership .membership-renewal{flex:none;margin:3px 0;font-size:11px}
#page-membership .sky-notice-row{flex:none;padding:4px 0;gap:10px}
#page-membership .sky-benefits-link{min-height:30px;padding:5px 12px;font-size:12px}
#page-membership .sky-values{flex:none;margin:3px 0 0;padding:7px 4%}
#page-membership .sky-values .sky-icon{width:23px;height:23px;flex-basis:23px}
#page-membership .sky-values strong{font-size:11px}
#page-membership .sky-values small{font-size:10px}
}

#page-membership .membership-details-close{display:block;position:sticky;top:0;margin:0 0 10px auto;padding:8px 14px;border:1px solid #d598bf;border-radius:8px;background:#21142b;color:#ffeaf7;font:600 14px/1.3 inherit;cursor:pointer;z-index:2}

#page-membership .membership-info-trigger{flex:none;align-self:flex-start;margin:7px 0 3px;padding:5px 0;border:0;background:none;color:#f7d7ec;font:600 13px/1.4 Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.membership-info-dialog{position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%);margin:0!important;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-sizing:border-box;overflow:auto;padding:24px;border:1px solid #9a6488;border-radius:16px;background:#100e1c;color:#f5ebf5;box-shadow:0 20px 80px #000b;text-shadow:none}
.membership-info-dialog::backdrop{background:#03040ac9;backdrop-filter:blur(4px)}
.membership-info-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.membership-info-head h2{font:500 26px/1.2 Georgia,serif;margin:0;color:#ffe2f3}
.membership-info-close{flex-shrink:0;border:1px solid #916780;border-radius:8px;background:#261a2d;color:#ffe6f4;padding:8px 12px;cursor:pointer}
.membership-info-dialog .membership-more-content{margin:0;padding:0;background:none;border:0}
.membership-info-dialog h3{font-size:15px;margin:18px 0 7px;color:#f0c2df}
.membership-info-dialog p{font-size:14px;line-height:1.6;margin:0 0 14px;color:#d1c5d7}
.membership-info-dialog .button{margin-top:8px;background:#693752;color:#fff0fa;border:1px solid #be80a5;border-radius:9px;padding:10px 16px}
.membership-info-dialog button:focus-visible{outline:2px solid #f5b6df;outline-offset:3px}

.game-benefits-dialog .game-benefits-price{font-size:30px;color:#ffe2f3;margin:0 0 18px}
.game-benefits-price span{font-size:14px;color:#bcaec8}
.game-benefits-list{margin:0 0 16px}
.game-benefits-list div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #473346;font-size:14px}
.game-benefits-list dt{color:#d5c9de}
.game-benefits-list dd{margin:0;text-align:right;font-weight:700;color:#f7cce7;white-space:nowrap}
.game-benefits-dialog p.game-benefits-note{font-size:12px;line-height:1.5;margin:12px 0}
.game-benefits-dialog summary{cursor:pointer;color:#edc5df;font-size:13px}
.game-benefits-dialog details p{font-size:12px;margin-top:10px}
.game-benefits-dialog .game-benefits-subscribe{width:100%;font-weight:700}

#page-membership .game-plan-details.game-perk-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-self:center;text-align:center;margin:0}
#page-membership .game-perk{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
#page-membership .game-perk small{font-size:clamp(8px,2.5cqw,10px);font-weight:650;color:#cbbbd6;white-space:nowrap}
#page-membership .game-perk img{width:clamp(34px,15cqw,60px);height:clamp(34px,15cqw,60px);object-fit:contain;filter:drop-shadow(0 0 6px #e981ae44)}
#page-membership .game-perk strong{font:700 clamp(20px,7cqw,28px)/1.1 Georgia,serif;color:#ffe3f3}
#page-membership .game-perk>span:last-child{font-size:clamp(10px,3.2cqw,13px);line-height:1.2;color:#eee4f4}
#page-membership .membership-rk-icon{width:clamp(34px,15cqw,60px);height:clamp(34px,15cqw,60px);display:grid;place-items:center;border-radius:25%;background:linear-gradient(145deg,#ed73b0,#96285f);box-shadow:inset 0 0 0 2px #ffc1e366,0 0 14px #d23b8b44;color:#ffe8f3;font-size:clamp(24px,10cqw,40px);line-height:1}

.sakura-token-wallet{display:flex;align-items:center;gap:18px}
.sakura-token-wallet img{width:80px;height:80px;flex:none}
.sakura-token-wallet h3{margin:0;color:#ffe6f3;font-size:24px}
.sakura-token-wallet p{margin:5px 0;font-size:13px}
.sakura-token-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sakura-token-success{color:#94ecc5!important}
#page-membership .sakura-token-shop-link{align-self:center;flex:none;margin:5px auto;min-height:32px;padding:5px 16px}
@media(max-width:500px){.sakura-token-offers{grid-template-columns:1fr}.sakura-token-wallet img{width:58px;height:58px}.sakura-token-wallet h3{font-size:21px}}

/* Illustrated game benefit popup — shared across desktop and mobile. */
.game-benefits-dialog{--benefit-accent:#ffacd6;--benefit-glow:#a83271;--benefit-ink:#280e25;width:min(640px,calc(100vw - 24px));padding:0;border:1px solid var(--benefit-accent);border-radius:22px;background:#0d0b19;box-shadow:0 24px 90px #000c,0 0 28px color-mix(in srgb,var(--benefit-accent) 15%,transparent)}
.game-benefits-dialog[data-tier="silver"]{--benefit-accent:#8ae4ff;--benefit-glow:#246b99;--benefit-ink:#082838}
.game-benefits-dialog[data-tier="gold"]{--benefit-accent:#ffdf91;--benefit-glow:#a06d27;--benefit-ink:#382309}
.game-benefits-dialog .benefit-hero{padding:24px 26px 20px;background:linear-gradient(100deg,#0c0b18f5,#0c0b1899),url('../images/membership/sakura-skyline/backdrop.webp') center 40%/cover;border-bottom:1px solid color-mix(in srgb,var(--benefit-accent) 40%,transparent)}
.game-benefits-dialog .membership-info-head{margin-bottom:14px;align-items:flex-start}
.game-benefits-dialog .membership-info-head h2{font-size:32px;color:var(--benefit-accent);margin-top:5px;text-shadow:0 0 18px var(--benefit-glow)}
.game-benefits-dialog .membership-info-close{background:#090b1ddd;border-color:var(--benefit-accent);color:#fff;min-height:40px}
.game-benefits-dialog .benefit-eyebrow{font:700 10px/1.4 Arial,sans-serif;letter-spacing:.12em;color:var(--benefit-accent)}
.game-benefits-dialog .game-benefits-price{font:500 36px/1.1 Georgia,serif;color:#fff5e8;margin:0}
.game-benefits-dialog .game-benefits-price span{font:400 14px/1.4 Arial,sans-serif;color:#e0d9ea}
.game-benefits-dialog p.benefit-tagline{margin:8px 0 0;font-size:14px;color:#f2e5f6}
.game-benefits-dialog .benefit-body{padding:20px 26px 18px}
.game-benefits-dialog .benefit-section-title{font:700 11px/1.3 Arial,sans-serif;letter-spacing:.14em;text-align:center;color:var(--benefit-accent);margin:0 0 12px}
.game-benefits-dialog .benefit-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center;padding:0 0 8px}
.game-benefits-dialog .benefit-rewards>div{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0;background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--benefit-accent) 13%,transparent),transparent 67%)}
.game-benefits-dialog .benefit-rewards img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 4px 10px #0008)}
.game-benefits-dialog .benefit-rewards strong{font:700 30px/1.1 Georgia,serif;color:#fff3e8}
.game-benefits-dialog .benefit-rewards div>span:last-child{font-size:12px;color:#e6ddea}
.game-benefits-dialog .benefit-rk{display:grid;place-items:center;width:58px;height:58px;margin:9px;border-radius:16px;background:linear-gradient(140deg,#ff98cf,#c93685 60%,#861853);box-shadow:inset 0 2px 3px #ffd5ef99,0 0 16px #d8327e44;color:white;font:700 40px/1 Arial,sans-serif}
.game-benefits-dialog p.benefit-delivery{text-align:center;font-size:11px;color:#bdb2cd;margin:6px 0 18px}
.game-benefits-dialog .benefit-boost{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--benefit-accent) 38%,transparent);border-radius:14px;background:linear-gradient(110deg,var(--benefit-ink),#131121)}
.game-benefits-dialog .benefit-boost img{width:65px;height:65px;object-fit:contain;flex:none}
.game-benefits-dialog .benefit-boost strong{display:block;font-size:25px;color:var(--benefit-accent);margin:4px 0}
.game-benefits-dialog .benefit-boost p{margin:0;font-size:12px;line-height:1.45;color:#e2d9ea}
.game-benefits-dialog p.benefit-capsule{display:flex;align-items:center;gap:8px;font-size:12px;margin:15px 0;color:#d9cfe5}
.game-benefits-dialog .benefit-capsule>span{font-size:24px;color:var(--benefit-accent)}
.game-benefits-dialog .benefit-capsule strong{margin-left:auto;color:var(--benefit-accent);white-space:nowrap}
.game-benefits-dialog .benefit-fineprint{border-top:1px solid #ffffff18;padding-top:12px;margin-bottom:12px}
.game-benefits-dialog .benefit-fineprint summary{font-size:12px;color:#cec2da}
.game-benefits-dialog .benefit-fineprint p{font-size:12px;line-height:1.5}
.game-benefits-dialog .game-benefits-subscribe{margin-top:0;padding:13px 16px;font-size:16px;background:linear-gradient(180deg,#fff0cf,var(--benefit-accent));color:var(--benefit-ink);border:1px solid var(--benefit-accent);box-shadow:0 4px 18px color-mix(in srgb,var(--benefit-accent) 18%,transparent)}
.game-benefits-dialog .game-benefits-subscribe:hover{filter:brightness(1.1)}
.game-benefits-dialog p.benefit-renewal{text-align:center;font-size:11px;color:#cbbfd7;margin:8px 0 0}
.game-benefits-dialog .game-benefits-error:empty{display:none}
@media(max-width:480px){.game-benefits-dialog .benefit-hero{padding:20px 17px 16px}.game-benefits-dialog .benefit-body{padding:17px}.game-benefits-dialog .membership-info-head{gap:8px}.game-benefits-dialog .membership-info-head h2{font-size:26px}.game-benefits-dialog .benefit-rewards{gap:6px}.game-benefits-dialog .benefit-rewards img{width:64px;height:64px}.game-benefits-dialog .benefit-rk{width:50px;height:50px;margin:7px;font-size:34px}.game-benefits-dialog .benefit-boost{padding:12px;gap:10px}.game-benefits-dialog .benefit-boost img{width:48px;height:48px}.game-benefits-dialog .benefit-boost strong{font-size:22px}.game-benefits-dialog .benefit-capsule{flex-wrap:wrap}}