#stage-wrap{position:absolute;inset:0;z-index:1}
.is-covered #stage-wrap{visibility:hidden}
#stage{display:block;width:100%;height:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#world{transform-origin:0 0}

.lbl{font-family:var(--ui);font-weight:900;fill:#000;stroke:var(--halo,#fff);stroke-width:7;paint-order:stroke;stroke-linejoin:round}
.lbl-w{fill:#000;stroke:var(--halo,#fff);stroke-width:8}
/* All selected labels use white lettering with a black edge; inactive labels use their pale base edge. */
.tile.is-active .lbl{fill:#fff;stroke:#000}
/* Downloads and Wii U intentionally use the opposite label treatment from the main menu tiles. */
#tile-street .lbl-w,#tile-wiiu .lbl-w{fill:#fff;stroke:#000}
#tile-street.is-active .lbl-w,#tile-wiiu.is-active .lbl-w{fill:#000;stroke:var(--halo,#fff)}
/* The layered Smash wordmark follows the same inactive black/pale and active white/black rule. */
.tile:not(.is-active) .smash-word text:nth-child(1),.tile:not(.is-active) .smash-word text:nth-child(2){fill:#fff;stroke:#fff}
.tile:not(.is-active) .smash-word text:nth-child(3){fill:#000}
/* Keep the Smash emblem base in lockstep with the wordmark's foreground color. */
#tile-smash{--smash-foreground:#fff}
#tile-smash:not(.is-active){--smash-foreground:#000}
.smash-logo-base{fill:var(--smash-foreground)}

.tile{cursor:pointer;outline:none}
/* Applied only while scatter runs: request a temporary transform layer, then release it immediately. */
.tile.is-scattering,#deco-band.is-scattering{will-change:transform;transform-box:view-box;transform-origin:0 0}
.tile .hit{fill:transparent;stroke:transparent;stroke-width:14;pointer-events:all}
.tile .body{transition:transform .28s var(--ease-out);transform-box:fill-box;transform-origin:center}
@media (hover:hover){.tile:hover .body{transform:scale(1.012)}}
.tile:focus-visible .body{transform:scale(1.012)}
.tile.is-bounce .body{animation:tile-bounce .36s var(--ease-out)}
.online-core{fill:#ff7600}
:root[data-theme="dark"] .online-core{fill:#fffbe0}
:root[data-theme="dark"] #tile-online{--base-color:#fffbe0!important}

.g-edge{fill:none;stroke:var(--ripple-color,#ffef84);stroke-width:12;stroke-linejoin:miter;stroke-miterlimit:20;opacity:1}
.g-pale{fill:none;stroke:var(--ripple-color,#ffef84);stroke-width:86;stroke-linejoin:miter;stroke-miterlimit:20}
.g-amber{fill:none;stroke:var(--ripple-color,#ffbe4a);stroke-width:38;stroke-linejoin:miter;stroke-miterlimit:20}
.g-olive{fill:none;stroke:var(--ripple-color,#7b6900);stroke-width:86;stroke-linejoin:miter;stroke-miterlimit:20}
#glow-under,#glow-top{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s}
.has-active #glow-under,.has-active #glow-top{opacity:1;visibility:visible}
.is-zooming #glow-under,.is-zooming #glow-top{opacity:0;visibility:hidden;transition:none}
.is-zooming .tile .body,.is-zooming .tile:hover .body,.is-zooming .tile:focus-visible .body{transform:none;transition:transform .15s ease}

@keyframes tile-bounce{0%{transform:scale(1)}35%{transform:scale(.955)}100%{transform:scale(1)}}

.hint{display:none}
@media (orientation:portrait) and (max-width:700px){
  .hint{
    display:block;
    position:absolute;
    left:0;right:0;
    bottom:clamp(18px,6vh,48px);
    z-index:2;
    margin:0;
    text-align:center;
    font:800 10.5px/1.4 var(--ui);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--hint);
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .tile .body{transition-duration:.01ms!important}
  .tile.is-bounce .body{animation:none}
}