:root{--ember-button:url('/art/optimized/ember-button-v3.c92e9e70cdb1.webp');--ember-header:url('/art/optimized/ember-header-v3.716b85c50808.webp')}
/* Real accessible labels sit on generated, alpha-preserving game artwork. */
.topbar{background:linear-gradient(180deg,#081a20fa,#08171de8);border-bottom:1px solid #be914666;box-shadow:0 7px 30px #0007}
.topbar::after{content:'';position:absolute;width:min(540px,38vw);height:58px;left:50%;bottom:-31px;transform:translateX(-50%);background:var(--ember-header) center/100% 100% no-repeat;pointer-events:none;opacity:.65;z-index:-1}
.topbar .nav,.topbar .outline,.gamebar button,#modal button.primary,#modal button.outline,#resetCollection,#pendingBanner button{border:0;background-color:transparent;background-image:var(--ember-button);background-size:100% 100%;background-repeat:no-repeat;color:#fff0ca;min-height:50px;padding:13px 30px;font-weight:800;text-shadow:0 2px 3px #000;box-shadow:none;filter:drop-shadow(0 3px 5px #0008);transition:filter .16s,transform .16s;line-height:1.2;border-radius:0}
.topbar .nav:hover,.topbar .outline:hover,.gamebar button:hover,#modal button.primary:hover,#modal button.outline:hover{filter:brightness(1.18) drop-shadow(0 3px 8px #f49e4b45);transform:translateY(-1px)}
button:focus-visible,select:focus-visible{outline:3px solid #ffe3a2;outline-offset:3px}
button:disabled{filter:grayscale(.7)!important;opacity:.5;transform:none!important}
.account{gap:10px}.account #wallet{color:#ffe3a2;text-shadow:0 2px 3px #000;font-weight:800}.account select{color:#f8e3ad;border:1px solid #a58247;background:#0b252b;border-radius:12px;min-height:42px;padding:9px 26px 9px 12px;box-shadow:inset 0 1px #ead39b22}
.gamebar{background:linear-gradient(180deg,#103139,#081b23);border-bottom:1px solid #c99b50aa;min-height:66px}.gamebar b{color:#fff1ca;text-shadow:0 2px 3px #000;font-family:Georgia,serif;letter-spacing:.02em}.gamebar button{min-height:48px;padding:12px 28px}.gamebar #startPlaying{color:#ffedbd}
#modal{border:1px solid #d2aa67aa;background:linear-gradient(145deg,#153038,#08171ff5);box-shadow:0 0 0 5px #08151e,0 0 0 6px #b68c4c66,0 25px 90px #000c;color:#f1eee5;border-radius:20px}#modal h2{font-family:Georgia,serif;color:#ffe1a2;font-weight:700}#modal .close,#closeSearch{color:#ffe1a2;background:radial-gradient(circle,#25464a,#0c2028);border:1px solid #bd9455;border-radius:50%;width:38px;height:38px;font-size:23px;padding:0;line-height:32px}
#modal .field input,#modal .field select{border:1px solid #567274;background:#06181fe8;color:#f3eedf;border-radius:9px}#modal .tabs{padding:4px;background:#06161b;border:1px solid #92733c66;border-radius:10px}#modal .tabs button.active{background:#234a4f;color:#ffe3ab;border-bottom:2px solid #d8a555}
#modal .providerButtons button{background:#f5f5f5;color:#17262a;text-shadow:none;border-radius:9px;min-height:44px;padding:12px 20px}
.favorite{background:radial-gradient(circle,#385054,#11262f);border:1px solid #cba568;color:#ffd88d;box-shadow:0 2px 8px #0006}#searchPanel{background:#071c24ee;border:1px solid #aa874e;border-radius:14px}#searchPanel input{background:transparent;color:#fff0ca}#pendingBanner{background:#12343d;border:1px solid #c9a263;border-radius:12px}
@media(max-width:760px){.topbar .nav,.topbar .outline{font-size:12px;padding:10px 21px;min-height:44px}.account{gap:4px}.account select{font-size:11px;max-width:105px;min-height:38px}.topbar::after{display:none}.gamebar button{font-size:12px;padding:10px 20px;min-height:44px}.gamebar b{font-size:12px;max-width:32vw}.topbar #wallet{font-size:11px}}
@media(prefers-reduced-motion:reduce){.topbar button,.gamebar button,#modal button{transition:none!important}}
#modal button.primary,#modal button.outline{width:min(260px,100%);min-height:62px;margin-inline:auto;display:block;padding:16px 36px}
#modal .privacyLink{text-align:center;font-size:11px;margin:12px 0 0;color:#a7babd}#modal .socialSignIn{background:#f6f6f6;color:#23323a;text-shadow:none;border:1px solid #c9d3d6;border-radius:8px;min-height:44px;width:100%;font-weight:600;padding:12px 20px;filter:none}
body .topbar #lobbyNav,body .topbar #accountButton,body .topbar #openWallet,body .gamebar #backToLobby,body .gamebar #gameControls,body .gamebar #startPlaying{background:var(--ember-button) center/100% 100% no-repeat transparent;border:0;box-shadow:none;border-radius:0;min-width:116px;height:52px;min-height:52px;padding:12px 27px;color:#fff1cc;white-space:nowrap}
body .topbar #accountButton{max-width:180px;overflow:hidden;text-overflow:ellipsis}body .topbar #lobbyNav{height:52px}body .gamebar{height:66px;background:linear-gradient(180deg,#103139,#081b23)}body #gameLoading{inset:66px 0 0}
#modal.authDialog{background:linear-gradient(90deg,#07152000 0%,#08172340 31%,#0a1b27f5 47%,#0a1b27 100%),var(--auth-art) left center/auto 100% no-repeat,#0a1b27}
@media(max-width:650px){body .topbar #accountButton,body .topbar #openWallet{min-width:77px;max-width:100px;padding:10px 17px;font-size:11px;height:44px;min-height:44px}body .gamebar #backToLobby,body .gamebar #gameControls,body .gamebar #startPlaying{min-width:72px;height:42px;min-height:42px;padding:9px 16px;font-size:10px}body .gamebar{height:52px}body #gameLoading{inset:52px 0 0}#modal.authDialog{background:linear-gradient(#071522d9,#081b28fa 45%),var(--auth-art) center top/cover}}

/* Phone controls occupy two rows so account access stays within the viewport. */
@media(max-width:650px){
 body .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;height:122px;min-height:122px;padding:0 10px 6px;gap:0 8px}
 body .topbar .brand{grid-column:1;grid-row:1;height:70px;min-width:0}
 body .topbar .brand img{width:min(154px,100%);height:68px}
 body .topbar .catalogTools{grid-column:2;grid-row:1;margin:0}
 body .topbar .account{grid-column:1/-1;grid-row:2;min-width:0;margin:0;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
 body .topbar #currencySelect{width:99px;min-width:0;max-width:99px;font-size:11px;padding:8px 4px}
 body .topbar .account #wallet{position:static;margin-right:auto;min-width:0;max-width:72px;flex:1 1 60px;font-size:9px;overflow-wrap:anywhere}
 body .topbar #accountButton,body .topbar #openWallet,body .topbar .supportMenuButton{min-width:54px;max-width:87px;height:42px;min-height:42px;padding:8px 11px;font-size:10px}
 body .orbit{height:calc(100svh - 186px);min-height:280px}
 body #searchPanel{top:122px}body #pendingBanner{top:126px}
 body .gamebar{min-height:52px;flex-shrink:0;gap:3px;padding:4px}
 body .gamebar b{min-width:0;max-width:25%;font-size:10px;overflow:hidden;text-overflow:ellipsis}
 body .gamebar #backToLobby,body .gamebar #gameControls,body .gamebar #startPlaying,body .gamebar .supportMenuButton{min-width:54px;padding:8px 9px;font-size:9px;height:42px;min-height:42px}
 body #gameWallet{min-width:0;font-size:9px;overflow-wrap:anywhere}
}