/* Shared finish for the Wonder storefront, marketplace and player centre. */
.skip-link{position:fixed;top:12px;left:16px;z-index:200;padding:12px 18px;border-radius:6px;background:#fff;color:#103989;font-weight:700;transform:translateY(-180%);box-shadow:0 4px 24px #071c4050}
.skip-link:focus{transform:translateY(0)}
.clipboard-field{position:fixed;left:-9999px;top:0;opacity:0}
body.modal-open{overflow:hidden}
main:focus{outline:0}
input,select,textarea{scroll-margin-block:160px 32px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #205fe5;outline-offset:3px}
.noscript-notice{margin:18px auto;padding:16px;border:1px solid #c6d6f2;border-radius:6px;background:#fff;color:#243b5b;max-width:calc(100% - 32px)}
.catalog-footer{display:grid;justify-items:center;gap:10px;padding-top:25px;text-align:center;color:#526174}
.catalog-footer p{margin:0;font-size:12px}
.catalog-footer .btn{min-width:230px}
.empty .btn{display:flex;margin:14px auto 0;width:fit-content}
.store-page .product{transition:transform .2s,box-shadow .2s,border-color .2s}
.store-page .product:hover,.store-page .product:focus-within{border-color:#9fb9e8;box-shadow:0 12px 26px #12398912}
.store-page .product h3{overflow-wrap:anywhere}
.store-page .product .desc{line-height:1.65}
.server-state{flex-wrap:wrap;column-gap:10px;row-gap:3px}
.server-state>div{min-width:0}
.server-state .status-check{margin-left:auto;border:1px solid #d4deec;border-radius:5px;background:#f6f8fc;color:#285290;min-width:34px;min-height:34px;font-size:18px}
.server-state .status-check:hover{background:#e8f0fc}
.server-state .status-detail{display:block;max-width:240px;color:#617087;font-size:10px;line-height:1.4}
.server-state .status-dot{margin-top:0}
.server-strip .server-state{max-width:330px;flex:1}
.order-receipt{margin-top:15px;padding:14px;border:1px solid #bdd9ca;border-radius:6px;background:#f1f8f4;color:#214d36}
.order-receipt strong{display:block;font-size:14px}
.order-receipt p{font-size:12px;line-height:1.6;margin:7px 0 10px}
.order-receipt code{display:block;padding:8px;border:1px solid #cbded2;border-radius:4px;background:#fff;overflow-wrap:anywhere;font-size:11px;user-select:all}
.receipt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.receipt-actions .btn{min-height:40px;padding:8px 10px;font-size:11px}
.checkout-form[aria-busy="true"]{border-color:#8caee9}
.checkout-form[aria-busy="true"] #checkout::before{content:'';width:14px;height:14px;border:2px solid #ffffff55;border-top-color:white;border-radius:50%;animation:wonder-spin .8s linear infinite}
.market-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;color:#516174;font-size:12px}
.market-summary strong{color:#273f62}
.market-summary .btn{min-height:40px;font-size:12px}
.market-page .grid{align-items:stretch}
.market-page .listing{display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.market-page .listing:focus-within,.market-page .listing:hover{border-color:#9fb9e8;box-shadow:0 10px 22px #1239890f}
.market-page .listing .info{display:flex;flex:1;flex-direction:column}
.market-page .listing .seller{overflow-wrap:anywhere}
.market-page .listing .hint{margin-bottom:14px}
.market-page .listing .buy{margin-top:auto;min-height:44px}
.market-page .model{z-index:1}
.market-page .state .btn{margin-top:14px}
.market-page #marketGuide:focus{outline:3px solid #205fe5;outline-offset:4px}
.market-page #syncStatus{font-size:12px;line-height:1.6;white-space:normal}
.market-page .controls label{font-size:12px}
.market-page .controls input,.market-page .controls select{font-size:14px}
.account-page .connection-message.error{line-height:1.7}
.account-page .connection-message button{min-height:36px}
.account-page .dialog-close{min-width:40px;min-height:40px}
.account-page .code-input{font-variant-numeric:tabular-nums}
@keyframes wonder-spin{to{transform:rotate(360deg)}}
@media(max-width:850px){.server-strip .server-state{max-width:none}.market-summary{font-size:12px}}
@media(max-width:580px){
  .store-page .product h3{font-size:15px;line-height:1.4}
  .store-page .product .desc{font-size:12px;min-height:60px}
  .store-page .product .buy,.store-page .product .details{min-height:44px;font-size:12px}
  .store-page .product-meta{font-size:10px}
  .store-page .price small{font-size:10px}
  .store-page .cat{min-height:44px;font-size:12px}
  .store-page .header-search input,.store-page .search-field input,.store-page .sort-field select,.dialog input:not([type="checkbox"]),.account-page input,.market-page .controls input,.market-page .controls select{font-size:16px}
  .store-page .server-state strong{font-size:13px}
  .store-page .server-state small,.store-page .server-state .status-detail{font-size:11px}
  .store-page .server-address strong{font-size:13px}
  .store-page .server-address .btn{min-height:44px;font-size:12px}
  .store-page .dialog{max-height:calc(100dvh - 20px);overscroll-behavior:contain}
  .store-page .dialog label,.store-page .detail-description,.store-page .checkout-status{font-size:13px}
  .store-page .dialog .terms-check{font-size:12px}
  .store-page .detail-use p,.store-page .pix{font-size:12px}
  .store-page .x{min-height:44px;min-width:44px}
  .market-page .intro p,.market-page .notice,.market-page .seller,.market-page .hint,.market-page .quantity{font-size:12px}
  .market-summary{align-items:flex-start;gap:12px}
  .market-summary .btn{white-space:nowrap}
  .account-page .order-filters button{min-height:42px}
  .account-page .account-topbar .navlinks a{min-height:44px;display:inline-flex;align-items:center}
  .receipt-actions{display:grid;grid-template-columns:1fr;width:100%}
}
@media(max-width:380px){.store-page .products{grid-template-columns:1fr}.store-page .product-art{aspect-ratio:1.8}.store-page .product .desc{min-height:0}.store-page .product-actions{grid-template-columns:1fr 1fr;gap:7px}.market-page .nav .brand-logo img{width:120px}.market-page .navlinks{gap:6px}.market-page .navlinks .btn{font-size:10px;padding:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}