/* Mobile theme enhancements v1
 * Lightweight, theme-specific atmosphere and interaction details for phones.
 * The layer never changes business layout and is intentionally CSS/SVG free of
 * canvas/WebGL work so scrolling remains responsive on low-power devices.
 */

.ng-mobile-theme-atmosphere { display:none; }

@media (max-width:768px) {
  html.ng-skin-active {
    --ng-mobile-parallax:0px;
    --ng-mobile-glow:rgba(var(--ng-accent-rgb),.26);
    --ng-mobile-edge:color-mix(in srgb,var(--ng-accent) 58%,var(--ng-accent-2));
  }

  html.ng-mobile-theme-ready body { position:relative; }
  html.ng-skin-active .ng-mobile-theme-atmosphere {
    position:fixed;
    inset:-34px -24px auto;
    z-index:-2;
    display:block;
    height:min(78dvh,680px);
    overflow:hidden;
    contain:strict;
    pointer-events:none;
    opacity:.78;
    transform:translate3d(0,var(--ng-mobile-parallax),0);
    transition:opacity .28s ease;
  }
  html.ng-skin-active .ng-mobile-theme-atmosphere::before,
  html.ng-skin-active .ng-mobile-theme-atmosphere::after,
  html.ng-skin-active .ng-mobile-theme-atmosphere > i {
    content:"";
    position:absolute;
    display:block;
    pointer-events:none;
  }
  html.ng-skin-active .ng-mobile-theme-atmosphere::before { inset:0; }
  html.ng-skin-active .ng-mobile-theme-atmosphere::after { inset:auto -10% -1px; height:48%; background:linear-gradient(180deg,transparent,var(--ng-page)); }
  html.ng-skin-active .ng-mobile-theme-atmosphere > i:nth-child(1) { inset:6% auto auto 8%; }
  html.ng-skin-active .ng-mobile-theme-atmosphere > i:nth-child(2) { inset:auto 8% 28% auto; }
  html.ng-skin-active .ng-mobile-theme-atmosphere > i:nth-child(3) { inset:17% 5% auto auto; }

  /* Keep the responsive theme illustration present, but let the lightweight
     atmosphere carry motion instead of animating a full-screen bitmap. */
  .ng-theme-scene { height:430px!important; opacity:.27!important; }
  .ng-theme-scene img { animation:none!important; transform:none!important; }

  /* Shared mobile component finish. */
  html.ng-skin-active :is(
    .page-shell .category-button,
    .lottery-shell .main-nav a,
    .trial-vendor-tab,
    .collector-category-list button,
    .common-tools-tab,
    [role="tab"]
  ) {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-color:color-mix(in srgb,var(--ng-line) 78%,var(--ng-mobile-edge))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.1),0 6px 16px rgba(var(--ng-accent-rgb),.08)!important;
  }
  html.ng-skin-active :is(
    .page-shell .category-button,
    .lottery-shell .main-nav a,
    .trial-vendor-tab,
    .collector-category-list button,
    .common-tools-tab,
    [role="tab"]
  )::after {
    content:"";
    position:absolute;
    inset:auto 12% 0;
    z-index:-1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ng-mobile-edge),transparent);
    opacity:.58;
    pointer-events:none;
  }
  html.ng-skin-active :is(
    .page-shell .category-button,
    .lottery-shell .main-nav a,
    .trial-vendor-tab,
    .collector-category-list button,
    .common-tools-tab,
    [role="tab"]
  ):is(.active,.is-active,[aria-selected="true"])::after {
    height:2px;
    opacity:1;
    animation:ng-mobile-tab-line calc(3.2s / var(--ng-motion-speed)) ease-in-out infinite;
  }

  html.ng-skin-active :is(
    .go,.load-more,.retry-button,#enter-button,.button.primary,
    .ng-home-popup-action,.activity-apply-button,.activity-submit-button,
    .site-share-action.primary,.game-card button
  ) {
    position:relative;
    isolation:isolate;
    overflow:hidden;
  }
  html.ng-skin-active :is(
    .go,.load-more,.retry-button,#enter-button,.button.primary,
    .ng-home-popup-action,.activity-apply-button,.activity-submit-button,
    .site-share-action.primary,.game-card button
  )::after {
    content:"";
    position:absolute;
    inset:-40% auto -40% -34%;
    z-index:-1;
    width:22%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    transform:skewX(-18deg);
    opacity:0;
    pointer-events:none;
  }
  html.ng-skin-active .ng-mobile-pressed::after { animation:ng-mobile-button-flash .48s ease-out both!important; }

  /* Cards get a restrained corner language rather than a second moving layer. */
  html.ng-skin-active :is(.card,.game-card,.common-tool-card,.collector-card,.activity-card) {
    border-color:color-mix(in srgb,var(--ng-line) 86%,var(--ng-mobile-edge))!important;
  }

  /* Floating actions: one coherent vertical dock with theme-specific material. */
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn) {
    isolation:isolate;
    overflow:visible;
    border:1px solid color-mix(in srgb,var(--ng-mobile-edge) 68%,#fff)!important;
    background:var(--ng-button)!important;
    box-shadow:0 10px 24px rgba(var(--ng-accent-rgb),.28),inset 0 1px rgba(255,255,255,.28)!important;
    animation:ng-mobile-float-rest calc(5.4s / var(--ng-motion-speed)) ease-in-out infinite!important;
  }
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn)::before {
    content:"";
    position:absolute;
    inset:-5px;
    z-index:-1;
    border:1px solid color-mix(in srgb,var(--ng-mobile-edge) 55%,transparent);
    border-radius:inherit;
    opacity:.42;
    pointer-events:none;
  }
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn):active::before {
    animation:ng-mobile-float-ring .5s ease-out both;
  }
  html.ng-skin-active .page-shell .service-float-btn span,
  html.ng-skin-active .theme-mode-icon,
  html.ng-skin-active .activity-hall-toggle > span {
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
  }

  /* Announcement and action sheets retain a themed, softly moving backdrop. */
  html.ng-skin-active :is(.ng-home-popup-backdrop,.activity-hall-backdrop,.site-share-backdrop,.popup-overlay) {
    background:color-mix(in srgb,var(--ng-modal-overlay) 88%,transparent)!important;
  }
  html.ng-skin-active :is(.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.popup-modal) {
    border-color:color-mix(in srgb,var(--ng-mobile-edge) 68%,var(--ng-line))!important;
    box-shadow:0 24px 62px rgba(0,0,0,.38),0 0 0 1px rgba(var(--ng-accent-rgb),.1)!important;
  }
  html.ng-skin-active :is(.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.popup-modal)::before {
    animation:ng-mobile-modal-edge calc(8s / var(--ng-motion-speed)) linear infinite!important;
  }
  html.ng-skin-active :is(.ng-home-popup-close,.activity-hall-close,.site-share-close,.popup-close) {
    border-color:color-mix(in srgb,var(--ng-mobile-edge) 64%,#fff)!important;
    box-shadow:0 7px 18px rgba(var(--ng-accent-rgb),.24),inset 0 1px rgba(255,255,255,.2)!important;
  }

  /* Banner, announcement and section marks share the active theme identity. */
  html.ng-skin-active :is(.page-shell .carousel-wrap,.page-shell .marquee-wrap,.line-hero,.lottery-shell .site-header) {
    position:relative;
    isolation:isolate;
  }
  html.ng-skin-active .page-shell .marquee-wrap::before {
    box-shadow:0 0 16px rgba(var(--ng-accent-rgb),.22);
  }

  /* COSMIC — orbit rings, star dust and soft parallax. */
  html[data-ui-theme="cosmic"] .ng-mobile-theme-atmosphere::before {
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
      radial-gradient(circle at 72% 28%,rgba(95,220,255,.78) 0 1px,transparent 1.7px),
      radial-gradient(circle at 32% 62%,rgba(147,123,255,.8) 0 1.2px,transparent 1.8px),
      radial-gradient(ellipse at 76% 18%,rgba(100,70,255,.2),transparent 35%);
    background-size:52px 52px,91px 91px,127px 127px,100% 100%;
    animation:ng-mobile-cosmic calc(28s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="cosmic"] .ng-mobile-theme-atmosphere > i:nth-child(1) {
    width:112px; aspect-ratio:1; border:1px solid rgba(113,219,255,.3); border-radius:50%;
    box-shadow:0 0 0 13px rgba(130,105,255,.035),0 0 30px rgba(83,203,255,.12);
    animation:ng-mobile-orbit calc(20s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="cosmic"] .ng-mobile-theme-atmosphere > i:nth-child(2) {
    width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 13px #66ddff,24px -17px 0 -1px #927bff,-19px 31px 0 -1px #fff;
    animation:ng-mobile-star-pulse calc(4.6s / var(--ng-motion-speed)) ease-in-out infinite;
  }
  html[data-ui-theme="cosmic"] :is(.category-button,.go,.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:999px!important; }

  /* AURORA — translucent ribbons, cloud bubbles and slow light breathing. */
  html[data-ui-theme="aurora"] .ng-mobile-theme-atmosphere::before {
    inset:-12% -24%;
    border-radius:42%;
    background:conic-gradient(from 210deg,transparent,rgba(48,235,188,.27),rgba(89,181,239,.16),rgba(161,95,255,.24),transparent 72%);
    filter:blur(24px);
    animation:ng-mobile-aurora calc(17s / var(--ng-motion-speed)) ease-in-out infinite alternate;
  }
  html[data-ui-theme="aurora"] .ng-mobile-theme-atmosphere > i:nth-child(1),
  html[data-ui-theme="aurora"] .ng-mobile-theme-atmosphere > i:nth-child(2) {
    width:90px; aspect-ratio:1; border-radius:44% 56% 62% 38%;
    background:linear-gradient(135deg,rgba(58,232,190,.16),rgba(160,98,255,.12));
    filter:blur(8px); animation:ng-mobile-aurora-blob calc(11s / var(--ng-motion-speed)) ease-in-out infinite alternate;
  }
  html[data-ui-theme="aurora"] .ng-mobile-theme-atmosphere > i:nth-child(2) { width:132px; animation-delay:-5s; }
  html[data-ui-theme="aurora"] :is(.category-button,.go,.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:999px!important; }

  /* DIGITAL — HUD grid, scan line and live data nodes. */
  html[data-ui-theme="particles"] .ng-mobile-theme-atmosphere::before {
    background:
      linear-gradient(rgba(27,171,231,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(27,171,231,.1) 1px,transparent 1px),
      radial-gradient(circle,rgba(23,231,204,.72) 0 1.2px,transparent 1.9px);
    background-size:31px 31px,31px 31px,73px 73px;
    animation:ng-mobile-data-grid calc(20s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="particles"] .ng-mobile-theme-atmosphere > i:nth-child(1) { width:68%; height:1px; background:linear-gradient(90deg,transparent,#1ce1cb,transparent); box-shadow:0 0 10px rgba(24,220,204,.55); animation:ng-mobile-scan calc(6s / var(--ng-motion-speed)) ease-in-out infinite; }
  html[data-ui-theme="particles"] .ng-mobile-theme-atmosphere > i:nth-child(2) { width:74px; aspect-ratio:1; border:1px solid rgba(22,140,255,.4); border-radius:50%; box-shadow:inset 0 0 0 13px rgba(19,223,199,.025); animation:ng-mobile-radar calc(6.4s / var(--ng-motion-speed)) ease-out infinite; }
  html[data-ui-theme="particles"] :is(.category-button,.go,.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:8px!important; }

  /* ESPORTS — angular energy, short pulses and speed language. */
  html[data-ui-theme="esports"] .ng-mobile-theme-atmosphere::before {
    background:
      repeating-linear-gradient(116deg,transparent 0 47px,rgba(255,61,118,.14) 48px 49px,transparent 50px 98px),
      linear-gradient(125deg,transparent 26%,rgba(108,85,255,.16),transparent 72%);
    animation:ng-mobile-speed calc(13s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="esports"] .ng-mobile-theme-atmosphere > i:nth-child(1) { width:160px; height:4px; background:linear-gradient(90deg,#ff3d76,transparent); transform:skewX(-24deg) rotate(-13deg); box-shadow:0 0 16px rgba(255,61,118,.45); animation:ng-mobile-energy calc(5.2s / var(--ng-motion-speed)) ease-in-out infinite; }
  html[data-ui-theme="esports"] .ng-mobile-theme-atmosphere > i:nth-child(2) { width:100px; height:3px; background:linear-gradient(90deg,transparent,#7659ff); transform:skewX(-24deg) rotate(-13deg); animation:ng-mobile-energy calc(6.2s / var(--ng-motion-speed)) ease-in-out -2s infinite; }
  html[data-ui-theme="esports"] :is(.category-button,.go) { border-radius:7px!important; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
  html[data-ui-theme="esports"] :is(.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:10px!important; }

  /* ARCADE — pixel grid, coin lights and tactile controls. */
  html[data-ui-theme="arcade"] .ng-mobile-theme-atmosphere::before {
    background:
      radial-gradient(circle,rgba(255,151,54,.58) 0 2px,transparent 2.8px),
      linear-gradient(90deg,rgba(128,77,255,.09) 1px,transparent 1px),
      linear-gradient(rgba(128,77,255,.09) 1px,transparent 1px);
    background-size:82px 82px,25px 25px,25px 25px;
    animation:ng-mobile-coins calc(18s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="arcade"] .ng-mobile-theme-atmosphere > i:nth-child(1),
  html[data-ui-theme="arcade"] .ng-mobile-theme-atmosphere > i:nth-child(2) {
    width:28px; aspect-ratio:1; border:2px solid rgba(255,198,72,.7); border-radius:50%;
    box-shadow:inset 0 0 0 4px rgba(255,139,50,.1),0 0 15px rgba(255,139,50,.2);
    animation:ng-mobile-coin-float calc(7s / var(--ng-motion-speed)) ease-in-out infinite;
  }
  html[data-ui-theme="arcade"] .ng-mobile-theme-atmosphere > i:nth-child(2) { width:18px; animation-delay:-3s; }
  html[data-ui-theme="arcade"] :is(.category-button,.go,.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:14px!important; border-bottom-width:3px!important; }

  /* GOLD — restrained material sheen, engraved lines and fine dust. */
  html[data-ui-theme="gold"] .ng-mobile-theme-atmosphere::before {
    background:
      radial-gradient(circle,rgba(242,214,154,.64) 0 1px,transparent 1.5px),
      repeating-linear-gradient(120deg,transparent 0 73px,rgba(202,165,98,.08) 74px,transparent 75px 148px),
      linear-gradient(135deg,transparent,rgba(228,199,143,.1),transparent 63%);
    background-size:89px 89px,100% 100%,200% 100%;
    animation:ng-mobile-gold calc(30s / var(--ng-motion-speed)) linear infinite;
  }
  html[data-ui-theme="gold"] .ng-mobile-theme-atmosphere > i:nth-child(1) { width:130px; height:1px; background:linear-gradient(90deg,transparent,#e6ca92,transparent); box-shadow:0 0 9px rgba(230,202,146,.2); animation:ng-mobile-gold-line calc(12s / var(--ng-motion-speed)) ease-in-out infinite; }
  html[data-ui-theme="gold"] .ng-mobile-theme-atmosphere > i:nth-child(2) { width:54px; aspect-ratio:1; border:1px solid rgba(224,190,127,.28); transform:rotate(45deg); }
  html[data-ui-theme="gold"] :is(.category-button,.go,.activity-hall-toggle,.theme-mode-toggle,.service-float-btn) { border-radius:8px!important; }

  /* Low tier keeps identity but removes continuous component motion. */
  html[data-mobile-motion="low"] .ng-mobile-theme-atmosphere { opacity:.58; }
  html[data-mobile-motion="low"] .ng-mobile-theme-atmosphere > i:nth-child(n+2) { display:none; }
  html[data-mobile-motion="low"] :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn) { animation:none!important; }
  html[data-mobile-motion="low"] :is(.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.popup-modal)::before { animation-duration:14s!important; }
  html[data-mobile-motion="off"] .ng-mobile-theme-atmosphere { display:none!important; }
  html.ng-mobile-motion-paused .ng-mobile-theme-atmosphere,
  html.ng-mobile-motion-paused .ng-mobile-theme-atmosphere *,
  html.ng-mobile-motion-paused :is(.theme-mode-toggle,.activity-hall-toggle,.service-float-btn) { animation-play-state:paused!important; }
}

@media (max-width:430px) {
  html.ng-skin-active .ng-mobile-theme-atmosphere { height:610px; opacity:.68; }
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn) { box-shadow:0 8px 19px rgba(var(--ng-accent-rgb),.24),inset 0 1px rgba(255,255,255,.22)!important; }
  html.ng-skin-active :is(.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.popup-modal) { max-width:calc(100vw - 20px)!important; }
}

@media (prefers-reduced-motion:reduce) {
  html.ng-skin-active .ng-mobile-theme-atmosphere { display:none!important; }
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn),
  html.ng-skin-active :is(.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.popup-modal)::before { animation:none!important; }
}

@keyframes ng-mobile-tab-line { 0%,100% { transform:scaleX(.62); opacity:.55; } 50% { transform:scaleX(1); opacity:1; } }
@keyframes ng-mobile-button-flash { 0% { left:-34%; opacity:0; } 25% { opacity:.75; } 100% { left:118%; opacity:0; } }
@keyframes ng-mobile-float-rest { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-2px,0); } }
@keyframes ng-mobile-float-ring { from { opacity:.55; transform:scale(.88); } to { opacity:0; transform:scale(1.35); } }
@keyframes ng-mobile-modal-edge { to { --ng-border-angle:360deg; } }
@keyframes ng-mobile-cosmic { to { background-position:104px 52px,-91px 91px,127px -127px,0 0; } }
@keyframes ng-mobile-orbit { to { transform:rotate(1turn); } }
@keyframes ng-mobile-star-pulse { 0%,100% { opacity:.45; transform:scale(.86); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes ng-mobile-aurora { to { transform:translate3d(7%,-4%,0) rotate(7deg) scale(1.05); } }
@keyframes ng-mobile-aurora-blob { to { transform:translate3d(14px,-11px,0) rotate(12deg); border-radius:61% 39% 42% 58%; } }
@keyframes ng-mobile-data-grid { to { background-position:31px 31px,31px 31px,73px -73px; } }
@keyframes ng-mobile-scan { 0%,100% { transform:translate3d(0,0,0); opacity:0; } 18%,78% { opacity:.75; } 88% { transform:translate3d(0,370px,0); opacity:0; } }
@keyframes ng-mobile-radar { from { opacity:.6; transform:scale(.5); } to { opacity:0; transform:scale(1.45); } }
@keyframes ng-mobile-speed { to { background-position:196px 0,0 0; } }
@keyframes ng-mobile-energy { 0%,70%,100% { opacity:0; transform:translate3d(-18px,0,0) skewX(-24deg) rotate(-13deg); } 78% { opacity:.8; } 92% { opacity:0; transform:translate3d(45px,0,0) skewX(-24deg) rotate(-13deg); } }
@keyframes ng-mobile-coins { to { background-position:0 164px,25px 0,0 25px; } }
@keyframes ng-mobile-coin-float { 0%,100% { transform:translate3d(0,0,0) rotateY(0); opacity:.42; } 50% { transform:translate3d(0,-15px,0) rotateY(180deg); opacity:.8; } }
@keyframes ng-mobile-gold { to { background-position:178px -89px,0 0,-200% 0; } }
@keyframes ng-mobile-gold-line { 0%,72%,100% { opacity:0; transform:translate3d(-24px,0,0); } 80% { opacity:.68; } 94% { opacity:0; transform:translate3d(155px,0,0); } }