/* Motion for the channel shelf and the menus it opens.
   Intro, lift, and press use translate and scale so a click cannot freeze a matrix.
   Credit: Illicit / cod.city. */

.menu-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.game-shell{position:relative}
.menu-sky-glow{position:absolute;left:8%;top:6%;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,#7ea67a22,transparent 68%)}
.menu-sky-glow-b{left:auto;right:4%;top:auto;bottom:-8%;width:42vw;height:42vw;background:radial-gradient(circle,#c4b48a18,transparent 70%)}

.menu-live{margin:6px 0 0;min-height:1.15em;color:#9fb4a4;font:500 12px/1.3 "Condensed",system-ui,sans-serif;letter-spacing:.08em;text-align:center}

.channel-stage{transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .42s ease}
.game-shell.is-covered .channel-stage{opacity:.4;transform:scale(.975)}
/* Hover, press, and the intro used to share `transform` with a transition.
   Cancelling the animation on :active restarted it and left a squashed matrix. */
.channel-stage .channel{transform:none;transition:translate .18s cubic-bezier(.2,.7,.2,1),scale .18s cubic-bezier(.2,.7,.2,1),opacity .18s ease,box-shadow .18s ease,border-color .15s}
.channel-stage .channel:hover,
.channel-stage .channel:focus,
.channel-stage .channel:focus-visible,
.channel-stage .channel:active,
.channel-stage .channel.is-selected{transform:none}
.channel-grid.is-arriving > .channel{animation:menu-tile-in .52s cubic-bezier(.16,.84,.28,1) backwards;animation-delay:calc(var(--tile-i, 0) * 46ms)}
.channel-stage .channel:not(.channel-empty):hover,
.channel-stage .channel:not(.channel-empty):focus-visible,
.gamepad-navigation .channel-stage .channel:not(.channel-empty):focus,
.channel-stage .channel:not(.channel-empty).is-selected{translate:0 -8px;scale:1.04;box-shadow:0 16px 28px #000a,0 0 0 3px #d7ecc8,0 0 24px #b7d7a355}
.channel-stage .channel:active:not(.is-dragging){translate:0 1px;scale:.97}
.channel-stage .channel.is-dragging,
.channel-stage .channel.is-dragging:hover,
.channel-stage .channel.is-dragging:active{translate:0 0;scale:.96;opacity:.2}
.channel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 28px #e7f6df55;transition:opacity .22s ease}
.channel:not(.channel-empty):hover::before,
.channel:not(.channel-empty):focus-visible::before,
.gamepad-navigation .channel:not(.channel-empty):focus::before,
.channel:not(.channel-empty).is-selected::before{opacity:1}
@keyframes menu-tile-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* Resting translate keeps the open dialog as the containing block for the
   fixed hand. Dropping it when menu-dialog-in ends would reinterpret the
   hand's translate against the viewport and park the fingertip off the cursor. */
.city-dialog[open]{animation:menu-dialog-in .42s cubic-bezier(.16,.84,.3,1) backwards;translate:0 0}
@keyframes menu-dialog-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.tap-in-screen,.public-channel,.cod-menu{animation:menu-screen-in .44s cubic-bezier(.16,.84,.28,1) backwards}
@keyframes menu-screen-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.cod-menu::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 30% 20%,#8fb48a22,transparent 42%),radial-gradient(circle at 80% 70%,#d8c59a18,transparent 46%)}
.cod-column,.cod-party,.cod-foot{z-index:1}
.cod-list .cod-item{animation:menu-row-in .36s cubic-bezier(.2,.75,.2,1) backwards}
.cod-list .cod-item:nth-child(1){animation-delay:.03s}
.cod-list .cod-item:nth-child(2){animation-delay:.07s}
.cod-list .cod-item:nth-child(3){animation-delay:.11s}
.cod-list .cod-item:nth-child(4){animation-delay:.15s}
.cod-list .cod-item:nth-child(5){animation-delay:.19s}
.cod-list .cod-item:nth-child(6){animation-delay:.23s}
.cod-list .cod-item:nth-child(7){animation-delay:.27s}
.cod-list .cod-item:nth-child(8){animation-delay:.31s}
.cod-list .cod-item:nth-child(9){animation-delay:.35s}
.cod-list .cod-item:nth-child(10){animation-delay:.39s}
@keyframes menu-row-in{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
.cod-item:active:not(:disabled),.city-button:active,.home-orb:active,.cod-prompts button:active,.tap-arrow:active{scale:.96}

body.in-game .menu-sky,body.in-match .menu-sky,body.match-loading .menu-sky{display:none}

@media(prefers-reduced-motion:reduce){
  .channel-grid.is-arriving > .channel,.city-dialog[open],.tap-in-screen,.public-channel,.cod-menu,.cod-list .cod-item{animation:none}
  .channel-stage,.channel-stage .channel,.channel::before{transition:none}
  .game-shell.is-covered .channel-stage{transform:none}
}

/* Tile menus and channel dialogs never grow a scrollbar. The preview art
   shrinks to the viewport; a long license list is the one inner scroller. */
.channel-stage,.cod-menu,.city-dialog.cod-menu-dialog,.city-dialog.channel-preview-dialog{overflow:hidden;scrollbar-width:none}
.channel-stage::-webkit-scrollbar,.cod-menu::-webkit-scrollbar,.city-dialog.cod-menu-dialog::-webkit-scrollbar,.city-dialog.channel-preview-dialog::-webkit-scrollbar{display:none;width:0;height:0}
/* Channel panels resize to the screen. Inner lists can still move, but they
   never paint a scrollbar. The license list is the one thin scroller. */
.cod-menu .map-picker,
.cod-menu .cod-stats,
.cod-menu .cod-records,
.cod-menu[data-screen="pills"] .pills-shop{scrollbar-width:none}
.cod-menu .map-picker::-webkit-scrollbar,
.cod-menu .cod-stats::-webkit-scrollbar,
.cod-menu .cod-records::-webkit-scrollbar,
.cod-menu[data-screen="pills"] .pills-shop::-webkit-scrollbar{display:none;width:0;height:0}
/* inset:0 plus margin:auto recenters a fixed dialog at every viewport and zoom.
   inset:auto pinned the card at its static top-left. Do not center with the
   translate property: menu-dialog-in animates that, and clearing it drops the
   hand's containing block (~123px fingertip miss). Width uses 100%, not 100vw,
   so a scrollbar gutter or browser zoom cannot grow a scrollbar. The card
   shrinks to the viewport instead of scrolling. */
.city-dialog.channel-preview-dialog{display:flex;flex-direction:column;position:fixed;inset:0;margin:auto;width:min(940px,calc(100% - 16px));max-width:min(940px,calc(100% - 16px));height:fit-content;max-height:calc(100dvh - 12px);overflow:hidden;scrollbar-width:none}
.city-dialog.channel-preview-dialog::-webkit-scrollbar{display:none;width:0;height:0}
.channel-preview-dialog>.dialog-crt{flex:none}
.channel-preview-dialog #mode-view{flex:0 1 auto;min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:none}
.channel-preview-dialog .tap-in-screen{flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:clamp(28px,5vh,70px) clamp(36px,7vw,84px) clamp(6px,1.4vh,20px);overflow:hidden}
.channel-preview-dialog .tap-in-art{width:min(100%,calc((100dvh - 196px) * 1.86));max-height:min(calc(100dvh - 196px),100%);height:auto;aspect-ratio:1.86;min-height:0;flex:0 1 auto}
.channel-preview-dialog .tap-in-actions{flex:none;padding:clamp(8px,1.5vh,23px) clamp(16px,6vw,9%) clamp(8px,1.8vh,22px)}
.channel-preview-dialog .public-channel{flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden;box-sizing:border-box}
.channel-preview-dialog .public-channel .license-list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
@media(max-width:760px){
  .cod-menu{--edge:56vw;overflow:hidden}
  .cod-column{position:absolute;top:2vh;bottom:88px;left:0;width:var(--edge);padding-top:0;min-height:0;overflow:hidden}
  .cod-party{position:absolute;top:2vh;right:3vw;width:min(220px,38vw);margin:0}
  .cod-item{margin-left:4vw}
  .cod-desc{max-width:50vw}
  .cod-stats{margin-left:4vw}
  .cod-foot{position:absolute;bottom:1.2vh}
}
@media(max-height:560px){
  .cod-item{min-height:0;padding-block:1px;font-size:clamp(13px,3.2vh,18px)}
  .cod-header{margin-bottom:1vh}
  .cod-info,.cod-desc,.cod-stats{margin-top:1vh}
  .cod-desc{min-height:0}
}