/*
 * CS-UP safe 3D control layer.
 *
 * Geometry belongs to the native component styles and to the SVG returned by
 * GameHub::frame()/StaffPanel::frame(). This file intentionally does NOT set
 * position/display/inset/clip-path/background/padding and does not create
 * ::before/::after pseudo-elements. That rule prevents a visual enhancement
 * from ever pulling an SVG frame into normal document flow again.
 */

:where(.hub-button,.hub-nav-item,.hub-arrow,.hub-login,.hub-all,.hub-game-cta,.hub-favorite,
       .site-button,.btn,.tab,.pager a,.pager button,
       .cab-top a,.cab-nav a,.cab-actions button,.cab-actions a,
       .s-button,.s-nav a,.s-subnav a,.s-plain,.s-item,button[data-action]) {
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  transition: transform .16s ease, filter .16s ease, color .16s ease, opacity .16s ease;
  will-change: transform, filter;
}

:where(.hub-surface,.site-button,.btn,.tab,.cab-nav a,.s-button,.s-nav a,.s-subnav a,.s-plain) > :where(.hub-frame,.s-frame) {
  transition: filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.42));
  pointer-events: none;
}

:where(.hub-frame,.s-frame) :where(.hub-frame-base,.s-frame-base) {
  stroke-width: 2.15;
}
:where(.hub-frame,.s-frame) :where(.hub-frame-inner,.s-frame-inner) {
  stroke-width: 1.2;
}
:where(.hub-frame,.s-frame) :where(.hub-frame-hot,.s-frame-hot) {
  stroke-width: 2.35;
}
:where(.hub-frame,.s-frame) :where(.hub-frame-trace,.s-frame-trace) {
  stroke-width: 2.6;
}

@media (hover:hover) and (pointer:fine) {
  :where(.hub-button,.hub-nav-item,.hub-arrow,.hub-login,.hub-all,.hub-game-cta,
         .site-button,.btn,.tab,.pager a,.pager button,
         .cab-top a,.cab-nav a,.cab-actions button,.cab-actions a,
         .s-button,.s-nav a,.s-subnav a,.s-plain,.s-item,button[data-action]):hover {
    transform: translate3d(0,-2px,8px) scale(1.012);
    filter: brightness(1.08) saturate(1.08) drop-shadow(0 8px 10px rgba(0,0,0,.34));
  }
  :where(.hub-button,.hub-nav-item,.hub-arrow,.hub-login,.hub-all,.hub-game-cta,
         .site-button,.btn,.tab,.pager a,.pager button,
         .cab-top a,.cab-nav a,.cab-actions button,.cab-actions a,
         .s-button,.s-nav a,.s-subnav a,.s-plain,.s-item,button[data-action]):hover > :where(.hub-frame,.s-frame) {
    filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 48%, transparent)) drop-shadow(0 7px 7px rgba(0,0,0,.44));
  }
}

:where(.hub-button,.hub-nav-item,.hub-arrow,.hub-login,.hub-all,.hub-game-cta,
       .site-button,.btn,.tab,.pager a,.pager button,
       .cab-top a,.cab-nav a,.cab-actions button,.cab-actions a,
       .s-button,.s-nav a,.s-subnav a,.s-plain,.s-item,button[data-action]):active {
  transform: translate3d(0,1px,0) scale(.994);
  filter: brightness(.96);
  transition-duration: .06s;
}

:where(button,a)[disabled], :where(button,a)[aria-disabled="true"] {
  transform: none !important;
  filter: saturate(.45) brightness(.72) !important;
}

@media (max-width:760px), (prefers-reduced-motion:reduce) {
  :where(.hub-button,.hub-nav-item,.hub-arrow,.hub-login,.hub-all,.hub-game-cta,
         .site-button,.btn,.tab,.pager a,.pager button,
         .cab-top a,.cab-nav a,.cab-actions button,.cab-actions a,
         .s-button,.s-nav a,.s-subnav a,.s-plain,.s-item,button[data-action]) {
    transition-duration:.08s;
  }
}