.deck-entry{position:relative;min-height:200px;padding-left:130px!important;overflow:hidden;background:linear-gradient(135deg,#172b45eb,#101726f2)!important;border:1px solid #70b9ff55!important;border-radius:18px!important}
.deck-entry-art{position:absolute;left:16px;top:20px;width:96px;aspect-ratio:350/510;object-fit:contain;border-radius:5px;filter:drop-shadow(0 10px 15px #0008)}
.storefront{margin:0 auto 32px;max-width:1200px}.storefront header{display:flex;align-items:center;justify-content:space-between;gap:16px}.storefront h1{font-size:32px;margin:8px 0}.storefront h2{font-size:20px;letter-spacing:.1em;margin:24px 0 10px}.storefront p{font-size:14px;color:#b9cce1}.ticket-wallet,.welcome-ticket{display:inline-block;padding:12px 18px;border:1px solid #f6d68d66;border-radius:12px;background:linear-gradient(120deg,#71502250,#201d31);color:#ffe0a1;font-weight:700;white-space:nowrap}
.shop-deck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shop-deck{display:flex!important;text-align:left!important;align-items:center;gap:16px;padding:14px!important;background:linear-gradient(130deg,#192f48e8,#121c30eb)!important;border:1px solid #8cc8ff55!important;border-radius:14px!important;min-width:0;box-shadow:0 8px 20px #0003}.shop-deck>img{width:70px;aspect-ratio:350/510;object-fit:contain;border-radius:4px}.shop-deck>span{display:grid;gap:8px}.shop-deck b{font-size:17px}.shop-deck small{color:#82c1ff}.shop-deck em{font-style:normal;font-size:12px;color:#b5c8dd}.shop-deck:hover{border-color:#87c8ff!important;box-shadow:0 6px 26px #70b9ff20}
.shop-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.shop-pack-grid>button{display:grid;place-items:center;gap:10px;min-width:0;padding:22px!important;border:1px solid #a18afb55!important;border-radius:18px!important;background:linear-gradient(145deg,#25203ce0,#0e1b2fe8)!important}.shop-pack-grid img{height:190px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #0008)}.shop-pack-grid b{font-size:16px}.shop-pack-grid small{color:#ffdea0;font-size:14px}
#shop-deck-detail{width:min(1000px,calc(100vw - 24px));max-height:90dvh;overflow:auto;background:#111d30;color:#f0f6ff;border:1px solid #7bbfff;border-radius:16px;padding:0}#shop-deck-detail .dialog-head{position:sticky;top:0;background:#101c2f;z-index:2}.shop-deck-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;padding:20px}.shop-deck-detail-grid button{position:relative;border:0!important;background:transparent!important;padding:0!important;display:grid;gap:6px}.shop-deck-detail-grid img{width:100%;border-radius:4px}.shop-deck-detail-grid b{position:absolute;right:5px;top:5px;background:#061324e8;border:1px solid #9bceff;border-radius:6px;padding:3px 8px;font-size:18px}.shop-deck-detail-grid small{font-size:12px}
#starter-welcome{width:min(1120px,calc(100vw - 24px));height:min(860px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;border:1px solid #83c5ff99;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#25446a,#0d182c 66%);color:#f0f6ff;box-shadow:0 22px 80px #000a;overflow:hidden}#starter-welcome[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}#starter-welcome::backdrop{background:#050d1de8;backdrop-filter:blur(8px)}.welcome-heading{text-align:center;padding:24px 20px 16px}.welcome-heading h1{font-size:clamp(24px,4vw,36px);margin:8px 0;line-height:1.25}.welcome-heading p{font-size:16px;color:#c4d8ec;margin:10px 0}.welcome-heading .eyebrow{letter-spacing:.25em;color:#8ecbff}.welcome-ticket{font-size:12px;padding:7px 14px;margin-top:4px}.welcome-decks{overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:12px 28px 24px;align-content:start}.welcome-deck{position:relative;display:grid;justify-items:center;gap:5px;min-width:0;padding:16px!important;text-align:center;border:1px solid color-mix(in srgb,var(--deck-color) 35%,transparent)!important;border-radius:18px!important;background:linear-gradient(150deg,#21385088,#112037dd)!important;transition:transform .22s,box-shadow .22s,border-color .22s;transform-style:preserve-3d}.welcome-art{display:block;perspective:900px;width:100%;height:160px}.welcome-art img{height:100%;max-width:100%;object-fit:contain;border-radius:4px;transform:rotateY(-13deg) rotateZ(-3deg);filter:drop-shadow(12px 13px 10px #0008);transition:transform .3s}.welcome-deck:hover .welcome-art img,.welcome-deck[aria-pressed=true] .welcome-art img{transform:rotateY(0) rotateZ(0) translateY(-5px)}.welcome-deck[aria-pressed=true]{border-color:var(--deck-color)!important;box-shadow:0 0 25px color-mix(in srgb,var(--deck-color) 23%,transparent),inset 0 0 20px #94c9ff10;background:linear-gradient(150deg,#375e8180,#142841)!important}.welcome-deck small{color:var(--deck-color);font-size:12px}.welcome-deck b{font-size:17px}.welcome-deck>span:last-child{font-size:12px;color:#bdd0e3}.welcome-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid #85b9ee33;background:#0c172aee}.welcome-footer p{margin:0;color:#bbd1e7;font-size:14px}.welcome-footer button{min-height:48px;min-width:170px;border:1px solid #8dd0ff!important;border-radius:10px!important;background:linear-gradient(135deg,#32628d,#20405d)!important;font-size:17px!important;color:white}.welcome-footer button:disabled{opacity:.4}
@media(max-width:760px){.shop-deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-deck{gap:10px;padding:10px!important}.shop-deck>img{width:54px}.shop-deck b{font-size:14px}.shop-pack-grid img{height:130px}.shop-pack-grid>button{padding:12px!important}.shop-pack-grid b{font-size:13px}.welcome-decks{gap:12px;padding:10px 16px 20px}.welcome-art{height:135px}}
@media(max-width:500px){.shop-deck-grid{grid-template-columns:1fr}.shop-pack-grid{grid-template-columns:1fr}.shop-pack-grid>button{grid-template-columns:70px 1fr;text-align:left;justify-items:start}.shop-pack-grid img{grid-row:1 / span 2;height:105px;width:70px}.deck-entry{padding-left:104px!important}.deck-entry-art{width:72px;left:14px}.storefront header{align-items:flex-start}.ticket-wallet{font-size:12px;padding:10px}.welcome-heading{padding:20px 14px 10px}.welcome-heading p{font-size:13px}.welcome-decks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 12px 16px}.welcome-deck{padding:12px 8px!important}.welcome-art{height:145px}.welcome-deck b{font-size:14px}.welcome-footer{padding:12px;flex-direction:column;gap:8px}.welcome-footer p{font-size:12px;text-align:center}.welcome-footer button{width:100%}#starter-welcome{border-radius:16px}.shop-deck-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}}
@media(max-height:550px){.welcome-heading{padding:10px}.welcome-heading h1{font-size:22px;margin:3px}.welcome-heading p{margin:3px;font-size:12px}.welcome-ticket{display:none}.welcome-art{height:120px}.welcome-footer{padding:8px 16px}.welcome-footer button{min-height:40px}}
@media(prefers-reduced-motion:reduce){.welcome-art img,.welcome-deck{transition:none;transform:none}}

.ticket-wallet small{display:block;text-align:right;font-size:12px;color:#bdd0e3;margin-top:5px}.shop-deck-purchase{padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid #85b9ee33}.shop-deck-purchase p{flex-basis:100%;margin:0;color:#ff998c}.shop-deck-purchase button{margin-left:auto;border-radius:8px!important;min-height:44px}.pack-readiness{color:#ffda93;font-size:14px}
.tabs[hidden],#account-dialog [hidden]{display:none!important}.login-welcome{text-align:center;margin:12vh auto;color:#c8def3}.login-required #account-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #83c5ff99;border-radius:20px;background:linear-gradient(145deg,#20364f,#0d182b);color:#f0f6ff;box-shadow:0 18px 70px #0009}.login-required #account-dialog::backdrop{background:#050d1ddc;backdrop-filter:blur(7px)}.login-required .account-form h2{margin:0;font-size:26px}.login-required .account-form p{font-size:14px;color:#bcd3e9}.login-required .account-form input{min-height:44px}.login-required .account-form button{min-height:44px;border-radius:8px}


.community-heading{text-align:center;padding:24px 12px}.community-heading h1{font-size:clamp(26px,4vw,40px);margin:8px}.community-heading p,.profile-note{color:#bfd2e7;font-size:14px}.ranked-page,.fighter-profile{max-width:1120px;margin:auto}.ranked-arena{max-width:620px;margin:auto;text-align:center;padding:32px;border:1px solid #82c8ff66;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#244c6d99,#101a2eee);box-shadow:0 20px 55px #0005;position:relative;overflow:hidden}.ranked-arena::before{content:"";position:absolute;inset:8px;border:1px solid #8dcfff22;clip-path:polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));pointer-events:none}.rank-orbit{width:170px;aspect-ratio:1;margin:auto;position:relative}.rank-orbit img{width:100%;filter:drop-shadow(0 0 18px #8bcfff55);animation:rank-float 5s ease-in-out infinite}.rank-orbit::after{content:"";position:absolute;inset:5px;border:1px dashed #89c7ff55;border-radius:50%;animation:rank-spin 28s linear infinite;pointer-events:none}.ranked-arena h2{margin:8px 0}.ranked-arena>strong{font-size:28px;color:#8ed3ff}.ranked-arena p{color:#c6d8eb}.ranked-arena label{display:block;text-align:left;margin:22px 0 8px}.ranked-arena select{width:100%;min-height:48px}.ranked-actions{display:flex;gap:12px;justify-content:center;margin:20px 0}.ranked-actions button{min-height:50px;border-radius:10px!important;min-width:160px}.ranked-arena small{color:#a5bdd4;line-height:1.8}#ranked-status{min-height:24px;color:#9bdfff}#ranked-cancel[hidden],#ranked-status-strip[hidden]{display:none!important}#ranked-status-strip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:16px;align-items:center;border:1px solid #8dd7ff;border-radius:14px;padding:12px 18px;background:#101f35f5;box-shadow:0 0 26px #70caff33;max-width:calc(100vw - 20px);font-size:14px;white-space:nowrap}.profile-hero{display:flex;gap:28px;align-items:center;padding:28px;border:1px solid #92bbff55;border-radius:24px;background:linear-gradient(140deg,#203a55ee,#131a2cee);box-shadow:0 12px 40px #0004}.profile-hero .rank-orbit{margin:0;flex-shrink:0}.profile-hero h1{font-size:clamp(24px,4vw,38px);overflow-wrap:anywhere;margin:8px 0}.profile-hero h2{font-size:20px;margin:8px 0}.profile-hero progress{width:min(300px,100%);height:8px;accent-color:#82caff}.profile-hero p{color:#bcd2e6;font-size:13px}.profile-actions{margin-left:auto;display:grid;gap:10px}.profile-actions button{min-height:44px;border-radius:9px!important;white-space:nowrap}.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.profile-stats article{display:grid;gap:9px;padding:20px;border:1px solid #86bbff44;border-radius:14px;background:linear-gradient(130deg,#20354fe0,#101d30ed);min-width:0}.profile-stats strong{font-size:clamp(20px,3vw,30px);color:#ade0ff}.profile-stats span{color:#b8cee4;font-size:14px}.fighter-profile section{margin-top:28px}.fighter-profile h2{font-size:22px}.rarity-summary{display:flex;gap:12px;flex-wrap:wrap}.rarity-summary>span{background:#17263fe8;border:1px solid #adbcff55;padding:10px 18px;border-radius:10px;color:#e4d8ff}.favorite-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.favorite-decks article{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid #75bfff44;background:#14243bed;border-radius:14px;min-width:0}.favorite-decks img{width:60px;border-radius:4px}.favorite-decks article>div{display:grid;gap:7px;min-width:0;overflow-wrap:anywhere}.favorite-decks small,.favorite-decks span{color:#b8cee4;font-size:13px}.profile-history{display:grid;gap:10px}.profile-history article{display:flex;align-items:center;gap:20px;padding:16px;background:#152137eb;border:1px solid #73c7ff44;border-left:3px solid #63ceac;border-radius:10px}.profile-history article.lost{border-left-color:#ff8c85}.profile-history article>div{display:grid;gap:5px}.profile-history small,.profile-history time{font-size:12px;color:#bcd0e6}.profile-history time{margin-left:auto}.rank-showcase{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:32px 0}.rank-showcase figure{margin:0;text-align:center}.rank-showcase img{width:100%;max-width:120px;filter:drop-shadow(0 0 12px #86bfff33)}.rank-showcase figcaption{font-size:11px;letter-spacing:.08em;color:#c3d4eb}.hub-ranked{border-color:#9cceff!important;background:linear-gradient(110deg,#204c69,#342348)!important}.hub-ranked{display:grid;grid-template-columns:44px minmax(0,1fr) 12px;gap:12px;align-items:center}.hub-ranked>.hub-icon{width:44px;height:44px;align-self:center}.hub-ranked>.hub-icon img{display:block;width:100%;height:100%;object-fit:contain;transform:none}.hub-ranked>span{align-items:flex-start;text-align:left}.hub-ranked>svg{margin-left:0;justify-self:end;align-self:center}
@keyframes rank-float{50%{transform:translateY(-5px)}}@keyframes rank-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.profile-hero{flex-wrap:wrap;padding:18px;gap:14px}.profile-hero .rank-orbit{width:110px}.profile-hero>div:nth-child(2){flex:1;min-width:0}.profile-actions{width:100%;grid-template-columns:1fr 1fr}.profile-stats article{padding:14px}.rank-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}.ranked-arena{padding:24px 16px}.profile-history article{flex-wrap:wrap;gap:10px}.profile-history time{width:100%;margin-left:0}.favorite-decks{grid-template-columns:1fr}}
@media(max-width:500px){.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-stats span{font-size:12px}.ranked-actions{flex-direction:column}.ranked-actions button{width:100%}#ranked-status-strip{gap:8px;padding:10px;font-size:12px}.profile-hero h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.rank-orbit img,.rank-orbit::after{animation:none}}

@media(max-height:550px) and (orientation:landscape){.hub-ranked{grid-template-columns:36px minmax(0,1fr);gap:10px}.hub-ranked>.hub-icon{width:36px;height:36px}}
.booster-picker{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;width:100%;gap:10px;margin-bottom:24px;text-align:left}.booster-picker>span{color:#b8cfe7;font-size:14px}.booster-picker details{border:1px solid #79bfff70;background:#13233be8;border-radius:12px;overflow:hidden}.booster-picker summary{cursor:pointer;padding:16px;display:grid;gap:12px;list-style:none}.booster-picker summary::-webkit-details-marker{display:none}.booster-picker strong{font-size:15px;overflow-wrap:anywhere}.picker-hint{font-size:12px;color:#bdd8ed}.booster-options{max-height:440px;overflow:auto;overscroll-behavior:contain;padding:0 12px 16px;scrollbar-width:thin}.booster-options h3{font-size:12px;letter-spacing:.14em;color:#a4bcd4;margin:16px 4px 8px}.booster-options button{display:grid;gap:10px;width:100%;max-width:none;min-width:0;text-align:left;min-height:72px;border-radius:9px!important;margin:6px 0;padding:12px;background:#0e192dcc;border:1px solid #7799bc3b}.booster-options button[aria-pressed=true]{border-color:#75c7ff;background:#24486a80}.booster-options button:hover{border-color:#afd9ff;background:#234362}.set-clans{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.clan-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--clan-color) 50%,transparent);border-radius:7px;color:var(--clan-color);background:color-mix(in srgb,var(--clan-color) 10%,#0d192b);font-size:11px;line-height:1.4;text-shadow:0 0 9px color-mix(in srgb,var(--clan-color) 35%,transparent)}.clan-tag::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--clan-color);box-shadow:0 0 7px var(--clan-color)}.shop-pack-grid .set-clans{justify-content:center}.shop-pack-grid .clan-tag{font-size:10px}.booster-picker summary:focus-visible{outline:2px solid #a9daff;outline-offset:-3px}#bot-offline-dialog{max-width:460px}#bot-offline-dialog h2{font-size:21px;color:#ffb1a4;line-height:1.5}
@media(max-width:500px){.booster-options{max-height:55dvh}.booster-picker summary{padding:12px}.clan-tag{font-size:10px}}

.display-name-form{display:grid;gap:9px;padding:18px;margin:16px 0;border:1px solid #69bdff44;border-radius:12px;background:#10223999}.display-name-form>div{display:flex;gap:10px}.display-name-form input{min-width:0;flex:1;max-width:420px}.display-name-form small{color:#b2cce0}.profile-hero h1{overflow-wrap:anywhere}@media(max-width:500px){.display-name-form>div{flex-wrap:wrap}.display-name-form input{width:100%}}

.game-offline-notice{padding:14px 18px;border:1px solid #69bdff66;border-radius:12px;background:#142942;color:#c7e8ff;line-height:1.6}



/* Scrollable deck choices must size rows from their content, not available viewport space. */
#starter-welcome{--welcome-art-height:160px;max-height:calc(100dvh - 24px);min-height:0}
#starter-welcome .welcome-decks{min-height:0;min-width:0;grid-auto-rows:max-content;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
#starter-welcome .welcome-deck{align-self:start;grid-template-rows:var(--welcome-art-height) max-content max-content max-content;min-height:calc(var(--welcome-art-height) + 108px);height:auto;overflow:hidden;align-content:start}
#starter-welcome .welcome-art{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:var(--welcome-art-height);min-height:0;min-width:0;padding:8px;overflow:hidden}
#starter-welcome .welcome-art img{display:block;flex:none;width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain}
#starter-welcome .welcome-deck b,#starter-welcome .welcome-deck>span:last-child{max-width:100%;overflow-wrap:anywhere;line-height:1.4}
#starter-welcome .welcome-footer{min-width:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.shop-deck>img{flex:none;max-width:100%;height:auto}
.shop-deck>span{min-width:0;overflow-wrap:anywhere}
.shop-deck-detail-grid,.pack-catalog-grid{grid-auto-rows:max-content;align-items:start}
.shop-deck-detail-grid>button{min-width:0;align-content:start;overflow-wrap:anywhere}
.shop-deck-detail-grid img{display:block;height:auto;aspect-ratio:350/510;object-fit:contain}
@media(max-width:760px){#starter-welcome{--welcome-art-height:135px}}
@media(max-width:500px){#starter-welcome{--welcome-art-height:132px}.welcome-heading{padding-top:16px}.welcome-heading h1{font-size:24px}.welcome-deck small{font-size:11px}}
@media(max-height:550px){#starter-welcome{--welcome-art-height:100px}.welcome-heading .eyebrow{font-size:10px}.welcome-heading h1{font-size:20px}.welcome-heading p{line-height:1.35}.welcome-footer p{font-size:11px}}

/* Keep all pack labels in the text column when the store switches to a compact row. */
@media(max-width:500px){
 .shop-pack-grid>button{grid-template-columns:76px minmax(0,1fr);grid-template-rows:repeat(4,auto);align-items:start}
 .shop-pack-grid>button>img{grid-column:1;grid-row:1 / span 4;width:76px;height:112px;align-self:center}
 .shop-pack-grid>button>b{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
 .shop-pack-grid>button>.product-total{grid-column:2;grid-row:2}
 .shop-pack-grid>button>.set-clans{grid-column:2;grid-row:3;min-width:0;justify-content:flex-start}
 .shop-pack-grid>button>small{grid-column:2;grid-row:4;white-space:normal}
 .shop-pack-grid>button:has(.pack-new)>b{padding-right:42px}
 .shop-pack-grid .pack-new{top:10px;right:10px;font-size:10px;padding:3px 7px}
}