/* Transform/opacity effects complement the existing arcade palette. */
:root { --arcade-ease: cubic-bezier(.16, 1, .3, 1); }
html { overflow-x: clip; }
#level-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #91baff, #85e6a4, #ffe16a); z-index: 10004; pointer-events: none; }
#nav a[aria-current="location"], #mobile-menu a[aria-current="location"] { background: #13291b; color: #a1ffc3; box-shadow: inset 0 -3px #85e6a4; }
#titleBar { display: none; position: fixed; top: 10px; left: 10px; z-index: 10001; }
.menu-toggle { background: #00b140; padding: .4em .7em; }
#mobile-menu { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(310px, 90vw); height: 100dvh; max-height: 100dvh; border: 1px solid #385572; background: #101b2d; padding: 1em; color: #fff; }
#mobile-menu[open] { animation: arcade-menu .3s var(--arcade-ease); }
#mobile-menu::backdrop { background: #0009; }
#mobile-menu ul { list-style: none; padding: 0; margin-top: 1.5em; }
#mobile-menu li { padding: 0; }
#mobile-menu a { display: block; padding: .7em; border-radius: 5px; color: #fff; text-decoration: none; }
.menu-open { overflow: hidden; }
#about .box { background: #101b2d; border: 1px solid #385572; border-radius: 10px; color: #d4e0ee; }
#about .box h2, #about .box strong { color: #fff; }
:is(.shipping-card, .repair-panel, .repair-steps > li, .review-card, #about .box, .shipping-world, .shipping-promo) { transition: translate .35s var(--arcade-ease), border-color .25s, box-shadow .35s; }
:is(button, .button, summary, .shipping-destinations li, .repair-warranty-options li) { transition: scale .22s var(--arcade-ease), translate .25s var(--arcade-ease), background-color .25s, box-shadow .25s; }
button:not(:disabled):active, .button:active { scale: .95; translate: 0 2px; }
.image-placeholder .icon, .repairs-icon, .review-avatar { transition: transform .45s var(--arcade-ease); }
.faq-group details { transition: border-color .25s, box-shadow .25s; }
.faq-group details[open] { box-shadow: 0 0 0 1px #00b14033, 0 8px 25px #0003; }
.contact-field label { transition: color .2s, translate .2s; }
.contact-field:focus-within label { color: #85e6a4; translate: 3px 0; }
.inventory-overlay[open] .inventory-header { animation: arcade-menu .3s var(--arcade-ease); }
.inventory-overlay[open] .inv-category:not([hidden]) { animation: arcade-menu .45s var(--arcade-ease); }
.inventory-overlay[open]::backdrop { animation: arcade-dim .3s ease-out; }
.inventory-overlay[open] .inv-category:not([hidden]) .product-card { animation: arcade-menu .5s var(--arcade-ease) backwards; }
.inventory-overlay[open] .product-card:nth-child(2) { animation-delay: .08s; }
.product-card { transition: translate .25s var(--arcade-ease), box-shadow .25s; }
@keyframes arcade-menu { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes arcade-dim { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
    :is(.shipping-card, .repair-panel, .repair-steps > li, .review-card, #about .box, .shipping-world):hover { translate: 0 -6px; border-color: #85e6a4; box-shadow: 0 12px 28px #00b14020; }
    .shipping-promo:hover { translate: 0 -4px; box-shadow: 0 0 28px #00b14030; }
    :is(button:not(:disabled), .button):hover { translate: 0 -3px; box-shadow: 0 5px 0 #0004; }
    .box:hover .image-placeholder .icon { transform: translateY(-5px) rotate(-7deg) scale(1.12); }
    .box:hover .repairs-icon { transform: rotate(-8deg) scale(1.12); }
    .review-card:hover .review-avatar { transform: rotate(8deg) scale(1.08); }
    .product-card:hover { translate: 0 -4px; box-shadow: 0 8px 24px #00b14040; }
    :is(.shipping-destinations li, .repair-warranty-options li):hover { translate: 0 -3px; background: #254262; }
    .faq-group summary:hover { translate: 4px 0; }
}
/* Pause costly ambient loops when they cannot be seen. */
.motion-outside *, .motion-outside *::before, .motion-outside *::after,
.motion-background *, .motion-background *::before, .motion-background *::after { animation-play-state: paused !important; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off { scroll-behavior: auto; }
.motion-off :is(button, .button, summary, .box, .shipping-card, .review-card, .repair-panel, .repair-steps > li, .shipping-world, .shipping-promo, .shipping-destinations li, .repair-warranty-options li) { translate: none !important; scale: none !important; transform: none !important; }
.motion-off .mario-bros { display: none; }
.motion-off :is(.product-card, .image-placeholder .icon, .repairs-icon, .review-avatar) { transform: none !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    :is(button, .button, summary, .box, .shipping-card, .review-card, .repair-panel, .repair-steps > li) { translate: none !important; scale: none !important; transform: none !important; }
}
@media screen and (max-width: 980px) {
    body.nav-ready #titleBar { display: block; }
    #header, .gaming-bg-1, .bg-laser-grid { background-attachment: scroll; }
}