/* The client shares the sculpted brass / enchanted forest materials of the match HUD. */
.client,.auth,#collection-dialog,#loadout-dialog{--gold:#e7ce90;--gold-dark:#b69756;--text:#eee8d5;--muted:#a5ad96;--line:#c7ad6a38;--bg:#171c13;--panel:#25291a;color:var(--text)}
.client{--client-header:76px;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(100deg,#101a13e8,#101a13f2),url('./assets/ui/asa/sengolia-panorama.png') center/cover}
.client button:focus-visible,.client input:focus-visible,#collection-dialog button:focus-visible{outline:2px solid #e4d098;outline-offset:4px}
.client [hidden],.client-social-backdrop[hidden]{display:none!important}
.client-top{min-width:0;min-height:var(--client-header);gap:12px;padding:9px 16px;background:linear-gradient(#303323,#171c14 84%);border-bottom:1px solid #c3a76777;box-shadow:0 4px 22px #0007;z-index:3}
.client-wordmark{display:flex;align-items:center;gap:8px;flex:none;padding:0 10px 0 0;background:none;color:#e7ce90;text-align:left}
.client-wordmark svg{width:30px;height:38px;filter:drop-shadow(0 1px 2px #000)}
.client-wordmark b{font:600 13px var(--serif);letter-spacing:1.4px;line-height:1.15}.client-wordmark small{display:block;font:500 8px var(--sans);letter-spacing:3px;margin-top:4px}
.client-play{align-self:center;min-width:116px;height:48px;padding:0 25px;clip-path:none;background:url('./assets/ui/asa/action-button.png') center/100% 100% no-repeat;color:#f5e6bc;font:600 15px var(--serif);letter-spacing:2px;text-shadow:0 2px 3px #000;filter:drop-shadow(0 3px 4px #0005)}
.client-play.active{filter:brightness(1.18) drop-shadow(0 0 8px #d6bb6d3a)}
.client-nav{gap:0;min-width:0;scrollbar-width:none;align-self:stretch}.client-nav::-webkit-scrollbar{display:none}
.client-nav button{position:relative;padding:0 13px;font-size:10px;letter-spacing:1.3px;color:#b8bda8;border:0;min-height:42px}
.client-nav button.active{color:#f1d79a;background:linear-gradient(0deg,#d6bb6c15,transparent 75%)}
.client-nav button.active:after{content:'';position:absolute;height:2px;bottom:0;left:15%;right:15%;background:linear-gradient(90deg,transparent,#ecd795,transparent)}
.client-wallet{gap:5px;flex:none}.client-wallet button{padding:7px 10px;background:linear-gradient(#34382780,#171d13);border-color:#bda5693f;gap:5px}.client-wallet small{font-size:6px;letter-spacing:1px}.client-wallet b{font-size:12px}
.client-tools{flex:none}.client .icon-button{background:linear-gradient(#3a3c2980,#1b2117);border-color:#bda56955;color:#d7ca9e;width:30px;height:32px}.client .icon-button svg{width:15px;height:15px}
.client-me{gap:8px;background:#343a2544;border-color:#bda56955;flex:none;padding:3px 8px 3px 3px}.client-me canvas{border:2px solid #c6ac66;background:#223127;width:38px;height:38px}.client-me strong{font-size:11px}.client-me small{font-size:9px}
.client-main{padding:24px 28px 44px;scrollbar-color:#7a704b #151c13;scrollbar-width:thin}.client-page{max-width:1480px;margin:0 auto;min-width:0}
.client .eyebrow{color:#cdb77c;font-size:9px;letter-spacing:2px}.client h1,.client h2,.client h3{color:#f3e4bb;text-shadow:0 2px 4px #0005}.client h2{font-size:30px}.client p{line-height:1.65}
.client .button-gold,.auth .button-gold,#collection-dialog .button-gold,#loadout-dialog .button-gold{background:url('./assets/ui/asa/action-button.png') center/100% 100% no-repeat;border:0;color:#f8e7b7;text-shadow:0 2px 3px #000;min-height:46px;padding:12px 28px;box-shadow:none;clip-path:none;transition:filter .18s}
.client .button-gold:before,.client .button-gold:after,.auth .button-gold:before,.auth .button-gold:after,#collection-dialog .button-gold:before,#collection-dialog .button-gold:after,#loadout-dialog .button-gold:before,#loadout-dialog .button-gold:after{display:none}
.client .button-gold:hover,.auth .button-gold:hover,#collection-dialog .button-gold:hover,#loadout-dialog .button-gold:hover{filter:brightness(1.2)}
.client .button-gold:disabled,#collection-dialog .button-gold:disabled{filter:grayscale(.65) brightness(.68)}
.client .button-secondary{background:linear-gradient(#474b3066,#1e291a);border-color:#c5ab654f;color:#e3d9ba;min-height:36px;line-height:1.5;letter-spacing:1px}
.client-toast{background:#252b1af5;border-color:#dcc08199;color:#f5e7bf}
.client .button-gold{min-width:0;gap:16px}.play-side{min-width:0}.play-side .button-gold{min-width:0;gap:10px}.play-side .button-gold svg{width:18px}
.social-settings{display:none}.social-logout{display:flex;align-items:center;gap:8px;margin-left:auto;background:none;color:#d5c797;font-size:11px}.social-logout svg{width:16px;height:16px}
/* Home: a quiet copy area and a real, transparent costume on the panorama's pedestal. */
.client-welcome{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:17px}.client-welcome>span:last-child{font-size:12px;color:#c4c9b3;margin:0}
.home-hero{grid-template-columns:43% minmax(0,1fr);min-height:360px;padding:24px 42px 24px 15px;border:1px solid #cdb47280;background:linear-gradient(90deg,transparent 20%,#102017a6 43%,#101d16bb 75%),url('./assets/ui/asa/sengolia-panorama.png') center/cover;box-shadow:0 10px 32px #0004,inset 0 0 0 4px #101b1666;isolation:isolate}
.home-hero:after{content:'';position:absolute;inset:6px;border:1px solid #d8bf7b2a;pointer-events:none}
.home-hero-art{align-self:stretch;display:grid;place-items:center;min-width:0}.home-hero-art canvas{width:min(280px,100%);height:auto;margin:0;filter:drop-shadow(0 6px 8px #0004)}
.home-hero-copy{position:relative;z-index:1;max-width:580px;padding:12px 0}.home-hero h1{font-size:clamp(28px,2.5vw,45px);line-height:1.16;margin:14px 0 13px;letter-spacing:.1px}.home-hero p{font-size:13px;color:#d3d9c3;max-width:45ch;margin-bottom:22px}.home-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.home-hero .button-gold{font-size:10px;letter-spacing:1.5px;min-width:220px}.home-hero .text-link{margin:0;font-size:11px;min-height:40px}.home-hero.is-complete{grid-template-columns:1fr;padding:48px}
.home-grid{gap:14px;margin-top:18px}.home-card{padding:22px;border:10px solid transparent;border-image:url('./assets/ui/asa/panel.png') 80 fill / 10px;background:none;box-shadow:0 8px 20px #0003;min-width:0}.home-card.glow{box-shadow:0 8px 22px #0003,inset 0 0 40px #c8ab4220}
.home-card h3{font:500 21px var(--serif);margin:10px 0;color:#f0ddaa}.home-card p,.home-card .news{font-size:12px;color:#d2d6c3;line-height:1.65}.home-card p{margin:9px 0 14px}.home-card small{color:#adb69a;line-height:1.5}.home-rank{gap:12px;margin-top:12px}.home-rank b{color:#e4dfc9}.home-card .text-link{margin-top:14px}
.feed{margin-top:28px}.feed-head{margin-bottom:14px}.feed-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}.feed-post{padding:19px;background:linear-gradient(135deg,#303924cc,#19241acc);border-color:#b19e603d;box-shadow:0 5px 14px #0002}.feed-post.pinned{border-color:#cbb16f88;box-shadow:inset 2px 0 #cbb16f}.feed-copy h3{font-size:18px;line-height:1.35;margin:10px 0}.feed-copy p,.feed-copy li{color:#c6cdb8}.feed-meta{font-size:9px;line-height:1.8;letter-spacing:.7px}.feed-art{width:84px;height:84px;background:#243322;border-color:#c7ad6a55}.feed-kind{color:#8ecdb5}
/* Mode selection */
.play-banner{padding:30px 34px;min-height:177px;margin-bottom:22px;border:1px solid #b49c6b77;background:linear-gradient(90deg,#122117eb,#12211766),url('./assets/ui/asa/sengolia-panorama.png') center 40%/cover}.play-banner h2{font-size:36px;margin:10px 0 6px}.play-banner p{font-size:12px;color:#c6d0b6;margin:0}
.play-layout{gap:22px;grid-template-columns:minmax(0,1fr) 280px}.play-group{color:#b9bb9e;margin:12px 0;font-size:9px}.queue-grid{gap:12px}.queue-card{padding:24px 10px 19px;min-height:171px;border:9px solid transparent;border-image:url('./assets/ui/asa/panel.png') 80 fill / 9px;background:none;color:#dadfc9;box-shadow:0 6px 16px #0003;gap:7px}.queue-card>svg{width:38px;height:38px;color:#d5bd7e;margin:3px 0 8px;filter:drop-shadow(0 0 10px #e8c36344)}.queue-card b{font:500 16px var(--serif);color:#efdfb3}.queue-card small{color:#aeb99d;line-height:1.5}.queue-card.selected,.queue-card[aria-pressed="true"]{box-shadow:0 0 0 1px #dcc481,inset 0 0 40px #b4c5741f,0 8px 20px #0005}.queue-card.selected>svg{color:#9cdec4}.queue-card:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.1)}
.play-side{padding:22px 19px;border:10px solid transparent;border-image:url('./assets/ui/asa/panel.png') 80 fill / 10px;background:none;box-shadow:0 6px 18px #0003}.play-side .button-gold{width:100%;font-size:9px;letter-spacing:1px;padding-left:15px;padding-right:15px}.party-list li{background:#111e1466;color:#e6dec2}.play-summary{border-color:#bfa35f3a}.play-summary p{color:#c3cdb3}.play-summary small{color:#dccb91}.queue-card strong{font:500 16px var(--serif);color:#efdfb3}.queue-icon{width:48px;height:48px;background:radial-gradient(#8a875633,transparent);border-color:#c3a86677;color:#d5bd7e;margin:3px 0 8px}.queue-icon svg{width:28px;height:28px}.queue-card.selected .queue-icon{color:#9cdec4;border-color:#a8d2a788}.client .map-choice{margin:24px 0 0;padding-top:18px;border-color:#bfa35f3a}.client .map-choice .eyebrow{font-size:8px}
/* Atelier / full catalog */
.store-page-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:8px 2px 20px}.store-page-head h2{font-size:34px;margin:10px 0 6px}.store-page-head p{font-size:12px;color:#bac6ad;margin:0}.store-head-mark{width:68px;height:68px;display:grid;place-items:center;color:#d7bf80;border:1px solid #c9ad6866;transform:rotate(45deg);margin:8px 25px;background:radial-gradient(#7f7d3c44,transparent)}.store-head-mark svg{width:36px;height:36px;transform:rotate(-45deg)}
.store-tabs{gap:12px;border-color:#b8a06444;margin-bottom:20px}.store-tabs button{padding:13px 18px;font-size:10px;letter-spacing:1.5px;color:#b7c0a5}.store-tabs button[aria-selected="true"]{background:linear-gradient(0deg,#d8bf6d14,transparent);color:#f2dca4;border-bottom-color:#d7bd7d}
.store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}.store-search{display:flex;align-items:center;gap:14px;padding:0 14px;border:1px solid #c5ac6655;background:#192419c9;width:min(420px,100%)}.store-search:focus-within{border-color:#dfc784;box-shadow:0 0 0 2px #d8c4771a}.store-search>span{font-size:8px;letter-spacing:1.4px;color:#c5b87f}.store-search input{width:100%;min-width:0;padding:12px 0;background:none;border:0;outline:none!important;color:#ede8d1;font:12px var(--sans)}.store-search input::placeholder{color:#839379}.store-toolbar>small{color:#a9b496;font-size:11px;white-space:nowrap}
.store-filter{gap:7px;margin-bottom:20px}.store-filter button{padding:9px 16px;background:#24301f99;border-color:#b59b5b44;font-size:9px;color:#b9c3aa}.store-filter button[aria-pressed="true"]{background:#a1904033;color:#f7e4af;border-color:#d5b977}
.store-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}.store-card{position:relative;display:flex;flex-direction:column;gap:0;padding:0;align-items:stretch;background:linear-gradient(#26341f,#1e291a);border:1px solid #c7ad6a66;box-shadow:0 7px 18px #0004;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0}.store-card:before{content:'';position:absolute;inset:5px;border:1px solid #d2b97722;pointer-events:none;z-index:1}.store-card:hover{transform:translateY(-4px);border-color:#ecd08b;box-shadow:0 10px 24px #0005,0 0 20px #c6b3641a}
.store-card-art{position:relative;display:block;aspect-ratio:5/6;background:url('./assets/ui/asa/costume-stage.png') center/cover;overflow:hidden}.store-card-art:after{content:'';position:absolute;inset:auto 0 0;height:35px;background:linear-gradient(transparent,#1e291a)}.store-card-art canvas{display:block;width:100%;height:100%;margin:0;object-fit:contain;filter:drop-shadow(0 5px 6px #0005);transition:transform .25s}.store-card:hover canvas{transform:translateY(-2px) scale(1.025)}
.store-card-copy{display:flex;flex-direction:column;padding:13px 17px 18px;flex:1;gap:7px;text-align:left;position:relative}.store-card .eyebrow,.store-card strong,.store-card small,.store-card em{padding:0}.store-card .eyebrow{font-size:7px;letter-spacing:1.3px;line-height:1.5;color:#b7bc91}.store-card strong{font:500 20px/1.15 var(--serif);color:#f1dfae;min-height:2.3em;overflow-wrap:anywhere}.store-card small{font-size:11px;color:#b4bea5;line-height:1.5}.store-card em{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap;font-size:12px;color:#d8b7ee;padding-top:13px;margin-top:auto;border-top:1px solid #b7a36130;font-variant-numeric:tabular-nums}.store-card em>span{font:600 7px var(--sans);letter-spacing:1px;color:#dac792;line-height:1.6}.store-card[data-owned="true"] em{color:#96ceac}.store-requirement{font-size:9px;color:#bdad85}.store-new-badge{position:absolute;top:13px;left:13px;padding:5px 8px;background:#d5bd7b;color:#252a15;font-size:8px;letter-spacing:1px;box-shadow:0 2px 6px #0004}.store-empty{padding:50px 20px;text-align:center;font-size:13px;color:#c9cdb5;border:1px solid #bca05e44;background:#202b1baa}
.pack-card{border:10px solid transparent;border-image:url('./assets/ui/asa/panel.png') 80 fill / 10px;background:none;padding:28px 18px}.pack-gem{margin:12px 0}.pack-card .button-secondary{margin-top:14px}
/* Collection cards and actual purchase dialog */
.champion-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.champion-tile{border-color:#c7ad6a66;background:#202c1c;box-shadow:0 6px 18px #0003}.champion-tile>.champion-tile-art{padding:0;background:url('./assets/ui/asa/costume-stage.png') center/cover}.champion-tile>.champion-tile-copy{padding:17px}.champion-tile h3{font-size:23px;margin:8px 0}.champion-tile small{line-height:1.6;color:#b5c0a6}.tile-actions{margin-top:16px;gap:8px}.client .tile-actions .button-secondary{font-size:8px;padding:8px 10px}
#collection-dialog,#loadout-dialog{border:18px solid transparent;border-image:url('./assets/ui/asa/shop-window.png') 80 fill / 18px;background:none;box-shadow:0 24px 90px #000c;padding:22px 28px;scrollbar-color:#80744c #252919}#collection-dialog::backdrop,#loadout-dialog::backdrop{background:#030b07c9;backdrop-filter:blur(5px)}
#collection-dialog .eyebrow,#loadout-dialog .eyebrow{color:#d9c38a}#collection-dialog h2,#loadout-dialog h2{color:#efdfb2}#collection-dialog .close-dialog,#loadout-dialog .close-dialog{background:#26301f;border-color:#c5ac6655;color:#e6d3a1;top:8px;right:8px}
.collection-wallet{border-color:#b29c5944}.collection-header p{color:#adb69b}.collection-tabs{border-color:#b7a36244}.collection-tabs>button{color:#aeb99d}.collection-heroes button{background:linear-gradient(#51543655,#222b1a);border-color:#c7ac6744;color:#d0d5ba}.collection-heroes button[aria-pressed=true]{background:#bb9e4830;border-color:#cdb375}.collection-heroes small{color:#a5af8d}
.collection-preview{border-color:#c3a85e33}.preview-art{background:url('./assets/ui/asa/costume-stage.png') center 67%/cover;border-color:#c4aa6544}.preview-art canvas{object-fit:contain!important}.preview-art>small{color:#c6cdb2;text-shadow:0 1px 3px #000;background:#111b14a6;left:0;right:0;bottom:0;padding:6px}
.preview-controls button{background:#283322;border-color:#c8ad6244;color:#bac5a6}.preview-controls button[aria-pressed=true]{background:#aa8f3f33;border-color:#c9ad67}.preview-copy>strong,.preview-copy p,.collection-selection>p{color:#bcc7ad}.preview-copy h3{color:#efdaa3}.collection-cards{gap:10px}.collection-card{background:#202c1d;border-color:#bda36066}.collection-card canvas{background:url('./assets/ui/asa/costume-stage.png') center/cover;object-fit:contain!important}.collection-card[aria-pressed=true]{background:#34432b;box-shadow:inset 0 -2px #e0ca8c;border-color:#e0ca8c}.collection-card strong{color:#e8d7ab}.collection-card>small{color:#b4c2a2}.collection-card .card-kicker{color:#aebc9a}.collection-selection .local-economy{color:#98a487;border-color:#b7a36233}.challenge-card{background:linear-gradient(#434b2e,#242f1e);border-color:#c7ad6a55}
.profile-banner,.rank-mine{background:linear-gradient(110deg,#3c452caa,#1c281a);border-color:#bfa66555}.history-row{background:#27341fcc}.tier-legend{color:#b0bb9e}.client .rank-table tr:hover td{background:#30412688}
/* Friends stay available without taking a third of small displays. */
.client-social{grid-column:2;grid-row:2;background:linear-gradient(#252f1deb,#121f16f5);border-left-color:#bda56844;grid-template-rows:auto auto minmax(0,1fr) minmax(180px,38%);box-shadow:inset 4px 0 15px #0002}.social-head{padding:18px 15px 14px;align-items:center;gap:10px}.social-head strong{display:flex;align-items:center;gap:8px;letter-spacing:1.8px;font-size:9px}.social-head strong svg{width:18px;height:18px;color:#cab477}.social-head small{font-size:9px;margin-left:auto}.friend-form input,.chat-form input,.chat-form button{background:#111e1599;border-color:#bda56944}.friend-form .icon-button{height:34px;width:32px}.social-list .hint{padding:4px 6px;line-height:1.7;color:#a7b59a;font-size:11px}.client-chat{border-color:#bea46133}.chat-log{color:#c2cdb3}.chat-tabs button[aria-selected=true]{color:#e6cf93;border-color:#d7bd7c}.friend:hover{background:#42503244}.friend-actions button{background:#283622;border-color:#c7ad6a44;color:#c9ccae}
#client-social-toggle,.social-close,.client-social-backdrop{display:none}
.auth{background:linear-gradient(90deg,#08160dd4,#101b14a3),url('./assets/ui/asa/sengolia-panorama.png') center/cover}.auth-card{border:16px solid transparent;border-image:url('./assets/ui/asa/shop-window.png') 80 fill / 16px;background:none;padding:32px 30px;box-shadow:0 30px 90px #000b}.auth-lead,.auth-note{color:#aeb89c}.auth input{background:#192719;border-color:#b69d5e66}.auth-brand{color:#ead29a}
@media(max-width:1500px){.client-top{gap:9px}.client-wordmark b{font-size:11px}.client-wordmark small{font-size:7px}.client-wordmark svg{width:25px}.client-nav button{padding:0 9px;font-size:9px}.client-wallet small{display:none}.client-top .client-tools{gap:3px}.client-me{gap:6px}.client-main{padding:22px}.home-hero{padding-right:28px}.play-layout{grid-template-columns:minmax(0,1fr) 250px}.queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.queue-card{min-height:150px;padding:16px 10px}.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-card{padding:16px}.store-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}}
@media(max-width:1250px){.client{--client-header:120px}.client-top{flex-wrap:wrap;gap:8px;padding:9px 16px 0;min-height:120px}.client-nav{order:5;flex-basis:100%;height:44px;align-self:stretch;flex-shrink:0}.client-nav button{padding:0 17px;font-size:10px}.client-wallet{margin-left:auto}.client-play{height:43px}.client-wordmark{margin-right:8px}.client-me span{display:block}.client-main{padding:20px}.home-hero{min-height:330px;grid-template-columns:40% minmax(0,1fr);padding:22px}.home-hero-art canvas{width:min(250px,100%)}.home-hero h1{font-size:31px}.home-grid{grid-template-columns:1fr 1fr}.play-layout{grid-template-columns:1fr}.party-panel{margin-top:8px}.store-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media(max-width:1100px){.client{grid-template-columns:1fr}.client-social{position:fixed;top:var(--client-header);bottom:0;right:0;width:min(310px,calc(100vw - 30px));transform:translateX(100%);transition:transform .22s;z-index:6;border-top:0;box-shadow:-12px 0 50px #0008;grid-template-rows:auto auto minmax(0,1fr) minmax(200px,38%)}.client.social-open .client-social{transform:translateX(0)}#client-social-toggle,.client .social-close{display:grid}.client-social-backdrop{position:fixed;inset:var(--client-header) 0 0;background:#030b078c;z-index:5;border:0;padding:0}.client.social-open .client-social-backdrop{display:block}.client-main{grid-row:2;grid-column:1}.client-page{max-width:1100px}.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-hero{grid-template-columns:43% minmax(0,1fr)}.play-layout{grid-template-columns:minmax(0,1fr) 250px}.store-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media(max-width:760px){.client{--client-header:116px;grid-template-rows:auto minmax(0,1fr)}.client-top{min-height:116px;padding:8px 12px 0;column-gap:8px}.client-wordmark{padding:0;margin:0}.client-wordmark svg{width:23px;height:30px}.client-wordmark b{font-size:9px;letter-spacing:1px}.client-wordmark small{font-size:6px;letter-spacing:1.7px}.client-play{min-width:100px;padding:0 20px;height:40px;font-size:13px}.client-tools>.icon-button:not(#client-social-toggle){display:none}.client-me span{display:none}.client-me{padding:0;border:0;background:none}.client-me canvas{width:32px;height:32px}.client-wallet button{padding:5px 7px;font-size:9px;gap:3px}.client-wallet b{font-size:10px}.client-nav{height:43px}.client-nav button{padding:0 13px;font-size:9px;letter-spacing:1.1px}.client-main{padding:18px 14px 32px}.client-welcome{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:14px}.client-welcome p{font-size:11px}.home-hero{min-height:315px;grid-template-columns:38% minmax(0,1fr);padding:19px 20px 19px 6px;background-position:40% center}.home-hero h1{font-size:28px}.home-hero .eyebrow{font-size:7px;letter-spacing:1.3px}.home-hero p{font-size:11px;margin-bottom:14px}.home-hero .button-gold{min-width:0;width:100%;font-size:8px;padding:11px 18px;letter-spacing:1px}.home-hero-actions{gap:2px}.home-hero .text-link{font-size:10px}.home-grid{grid-template-columns:1fr;gap:12px;margin-top:14px}.home-card{padding:17px}.home-card h3{font-size:21px}.home-card p{font-size:12px}.home-rank{display:inline-flex;margin-right:20px}.feed-list{grid-template-columns:1fr}.play-banner{padding:25px 22px;min-height:160px}.play-banner h2{font-size:30px}.play-layout{grid-template-columns:1fr}.queue-card{min-height:155px}.store-page-head{padding:3px 0 16px;gap:12px}.store-page-head h2{font-size:29px;line-height:1.2}.store-page-head p{font-size:11px}.store-head-mark{display:none}.store-tabs{gap:0;margin-bottom:17px}.store-tabs button{padding:12px 14px;font-size:9px}.store-filter{gap:6px}.store-filter button{font-size:8px;padding:8px 12px}.store-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.store-card-copy{padding:11px 13px 15px}.store-card strong{font-size:18px}.store-card em{font-size:11px}.champion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.client .tile-actions .button-secondary{padding:8px;font-size:7px}#collection-dialog,#loadout-dialog{border-width:12px;border-image-width:12px;padding:22px 16px;max-height:calc(100dvh - 18px)}.collection-preview{grid-template-columns:1fr 1fr}.collection-cards.skin-collection{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-modal .collection-card canvas{max-height:none}.preview-art canvas{height:230px;object-fit:contain}.collection-wallet b{font-size:14px}}
@media(max-width:480px){.client-top{column-gap:6px;row-gap:4px;padding-left:10px;padding-right:10px}.client-wordmark{gap:4px}.client-wordmark svg{width:21px}.client-wordmark b{font-size:8px;letter-spacing:.5px}.client-wordmark small{letter-spacing:1.3px}.client-play{min-width:82px;padding:0 14px;font-size:12px}.client-wallet{gap:3px}.client-wallet button{padding:5px;font-size:8px}.client-wallet b{font-size:9px}.client-me{display:none}.client-tools .icon-button{width:28px;height:31px}.client-main{padding:16px 12px 28px}.client .eyebrow{font-size:8px;letter-spacing:1.5px}.home-hero{display:flex;flex-direction:column;min-height:0;padding:12px 20px 25px;background-position:30% center}.home-hero-art{height:210px;align-self:stretch;position:relative}.home-hero-art canvas{position:absolute;width:220px;max-width:100%;top:-25px}.home-hero:before{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#112116e8 28%);z-index:-1}.home-hero-copy{padding:4px 0 0;text-align:center}.home-hero h1{font-size:29px;margin-top:10px}.home-hero p{font-size:12px}.home-hero-actions{justify-content:center;gap:4px}.home-hero .button-gold{width:auto;min-width:220px;font-size:9px}.home-hero .eyebrow{font-size:7px}.home-hero.is-complete{padding:32px 22px}.home-rank{display:flex}.store-page-head h2{font-size:27px}.store-tabs button{padding:12px;font-size:8px;letter-spacing:1px}.store-toolbar{gap:10px}.store-search{gap:9px;padding:0 10px}.store-search input{font-size:11px;padding:11px 0}.store-toolbar>small{font-size:9px}.store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.store-card-copy{padding:10px 12px 14px;gap:6px}.store-card strong{font-size:17px;min-height:2.3em}.store-card .eyebrow{font-size:6px;letter-spacing:.8px}.store-card small{font-size:10px}.store-card em{font-size:11px;padding-top:11px;align-items:flex-start;flex-direction:column;gap:7px}.store-card em>span{font-size:7px}.store-new-badge{font-size:7px;left:10px;top:10px}.store-filter button{padding:8px 10px;font-size:7px}.store-requirement{font-size:8px}.store-card-art:after{height:22px}.champion-tile>.champion-tile-copy{padding:12px}.champion-tile h3{font-size:21px}.champion-tile small{font-size:9px}.tile-actions{flex-direction:column;margin-top:12px}.client .tile-actions .button-secondary{font-size:8px}.play-banner{padding:24px 20px}.play-banner h2{font-size:28px}.queue-card b{font-size:15px}.queue-card small{font-size:10px}#collection-dialog{width:calc(100% - 16px);padding:19px 10px}.collection-header{padding-right:22px;gap:9px}.collection-header h2{font-size:23px}.collection-header .eyebrow{font-size:6px}.collection-wallet{padding-left:9px;gap:7px}.collection-wallet b{font-size:12px}.collection-heroes{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-heroes small{font-size:5px}.collection-preview{display:block}.preview-art canvas{height:230px}.preview-controls{margin:12px 0 17px;justify-content:center}.preview-controls button{font-size:7px;padding:7px 9px}.preview-copy h3{font-size:25px}.preview-copy p{font-size:11px}.preview-copy>strong{font-size:11px}.collection-cards.skin-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.collection-card strong{font-size:14px;line-height:1.3}.collection-card .card-kicker{font-size:6px;letter-spacing:.5px}.collection-card>small{font-size:9px}.collection-selection>p{font-size:11px}.collection-selection .eyebrow{font-size:8px}.collection-tabs{gap:20px}.collection-tabs>button{font-size:8px}.auth-card{padding:27px 20px}.auth-brand{font-size:14px}}
@media(max-width:1100px){.client-social{grid-template-rows:auto auto minmax(0,1fr) minmax(180px,35%) auto}.social-settings{display:flex;align-items:center;gap:8px;padding:12px 15px;border-top:1px solid #bea46133}}
@media(max-width:480px){.collection-header{padding-right:0;flex-wrap:wrap;gap:12px}.collection-header>div:first-child{padding-right:35px}.collection-wallet{display:flex;border:0;padding-left:0;width:100%;gap:16px}.collection-wallet b{font-size:14px}.collection-header p{font-size:9px}.collection-tabs{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.client *,.client *:before,.client *:after{transition:none!important;animation:none!important}}