/* Canonical public UI: compiled shell, shared components, responsive rules and current personalization. */
:root{--bg: #eaf1ff;--page-bg: #eaf1ff;--panel: rgba(255, 255, 255, .62);--primary: #2f7bff;--primary-strong: #1f6bff;--accent: #62b7ff;--text: #0f1e3a;--muted: #4b6288;--shadow: 0 12px 28px rgba(37, 79, 152, .14);--hover-shadow: 0 14px 30px rgba(47, 123, 255, .28)}
*{box-sizing:border-box}
html{width:100%;min-height:100%;overflow-x:hidden;background:#edf3ff}
body{position:relative;margin:0;width:100%;max-width:100%;min-width:320px;min-height:100%;overflow-x:hidden;color:var(--text);font-family:SF Pro Display,SF Pro Text,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.6;background:transparent;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.64}
img{max-width:100%;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.page-shell{position:relative;width:100%;max-width:100%;min-height:100vh;overflow-x:hidden}
.fixed-area{position:relative;z-index:10;width:100%;max-width:100%;overflow-x:hidden}
.cards-scroll{position:relative;z-index:1;width:100%;max-width:100%;overflow-x:hidden}
.nav{position:relative;z-index:1;display:flex;align-items:center;max-width:1200px;min-height:54px;margin:0 auto;padding:8px 22px}
.brand-logo{width:auto;max-width:180px;height:44px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(31,111,235,.18))}
.brand-text{color:#0f2250;font-size:18px;font-weight:900}
.carousel{width:100%;max-width:1200px;margin:4px auto;padding:0 20px;overflow:hidden}
.carousel-wrap{position:relative;width:100%;max-width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.62);border-radius:26px;background:linear-gradient(180deg,#ffffff73,#ffffff42);box-shadow:0 26px 46px #1e4e9e38;-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
.slides{display:flex;transition:transform .6s ease}
.slide{display:block;min-width:100%;height:38vw;min-height:250px;max-height:400px;background:#eaf1ff}
.slide img{display:block;width:100%;height:100%;object-fit:cover;opacity:.95}
.dots{position:absolute;right:0;bottom:10px;left:0;z-index:2;display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;min-height:0;padding:0;border:1px solid rgba(15,40,90,.2);border-radius:50%;background:#0f285a26}
.dot.active{background:var(--primary);box-shadow:0 0 12px #1f6feb59;transform:scale(1.18)}
.section{width:100%;max-width:1200px;margin:10px auto;padding:0 20px;overflow:hidden}
.notice-section{margin-top:6px;margin-bottom:2px}
.marquee-wrap{display:flex;min-height:34px;align-items:center;gap:8px;overflow:hidden;padding:4px 10px;border:1px solid rgba(255,255,255,.6);border-radius:12px;background:linear-gradient(120deg,#2c73ffe0,#59b2ffd1);box-shadow:inset 0 1px #ffffff4d,0 10px 26px #2a69d63d}
.marquee{display:inline-flex;white-space:nowrap;animation:marqueeMove 12s linear infinite;padding-left:6px}
.marquee-text{color:#fff;font-size:13px;font-weight:800;letter-spacing:.5px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
@keyframes marqueeMove{0%{transform:translate(100%)}
to{transform:translate(-100%)}
}
.nav-section{margin-top:6px}
.category-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
.category-button{min-height:36px;padding:7px 12px;color:var(--text);font-size:14px;font-weight:800;border:1px solid rgba(47,123,255,.28);border-radius:10px;background:var(--card);box-shadow:inset 0 1px #ffffff8c}
.category-button.active{color:#fff;border-color:#ffffff9e;background:linear-gradient(110deg,var(--primary-strong),var(--accent));box-shadow:0 10px 22px #2f7bff52}
#cardsScroll .section{margin-top:0;padding-top:0}
.pk16-category-title{position:relative;display:flex;justify-content:center;align-items:center;margin:22px 0 14px;padding:6px 0;color:var(--text);font-size:30px;font-weight:900;line-height:1.2;text-align:center}
.pk16-category-title:before,.pk16-category-title:after{content:"";position:absolute;left:50%;width:96px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--primary-strong),var(--accent),transparent);box-shadow:0 4px 12px #1f6feb33;transform:translate(-50%)}
.pk16-category-title:before{top:0}
.pk16-category-title:after{bottom:0}
.card-grid{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.card{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-areas:"avatar meta" "cta cta";gap:9px;align-items:flex-start;min-width:0;padding:12px;border:1px solid rgba(255,255,255,.66);border-radius:22px;background:linear-gradient(180deg,var(--card),rgba(245,250,255,.56));box-shadow:inset 0 1px #ffffffd9,0 14px 30px #1a448a21;animation-delay:var(--stagger, 0ms);}
.card:hover{border-color:#5497ff7a;box-shadow:inset 0 1px #ffffffe0,0 16px 36px #255cb833;transform:translateY(-3px) scale(1.01)}
.card-rec-badge{position:absolute;top:0;right:8px;z-index:2;padding:2px 8px;color:#fff;font-size:11px;font-weight:900;border-radius:0 0 8px 8px;box-shadow:0 6px 12px #1f6feb2e}
.rec-type-1{background:linear-gradient(90deg,#ff5a3d,#ffb000)}
.rec-type-2{background:linear-gradient(90deg,#1f6bff,#62b7ff)}
.avatar{grid-area:avatar;width:54px;height:54px;flex:none;object-fit:cover;border:2px solid rgba(31,111,235,.18);border-radius:50%;background:#eef4ff;box-shadow:0 8px 18px #1f6feb2e}
.meta{grid-area:meta;display:flex;min-width:0;flex-direction:column}
.title{overflow:hidden;display:-webkit-box;color:var(--text);font-size:18px;font-weight:800;line-height:1.15;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.desc{overflow:hidden;display:-webkit-box;margin-top:3px;color:var(--muted);font-size:14px;line-height:1.25;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.go{position:relative;grid-area:cta;width:100%;min-height:32px;margin:4px 0 0;overflow:hidden;color:#fff;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.48);border-radius:14px;background:linear-gradient(110deg,var(--primary) 0%,var(--accent) 100%);box-shadow:inset 0 1px #ffffff42,0 8px 18px #2f7bff57}
.empty{padding:32px;text-align:center;border:1px solid rgba(255,255,255,.62);border-radius:18px;background:var(--card)}
.trial-page-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.ghost-action{min-height:40px;padding:0 16px;color:#1767ee;font-weight:900;border:1px solid rgba(47,123,255,.28);border-radius:12px;background:var(--card);box-shadow:inset 0 1px #ffffffb3}
.trial-tools{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:10px;margin-bottom:0}
.trial-tools input{min-height:40px;padding:0 14px;color:var(--text);border:1px solid rgba(47,123,255,.24);border-radius:12px;outline:0;background:var(--card)}
.trial-tools button,.load-more,.game-card button{color:#fff;font-weight:900;border:1px solid rgba(255,255,255,.48);border-radius:12px;background:linear-gradient(110deg,var(--primary),var(--accent));box-shadow:0 8px 18px #2f7bff42}
.trial-categories{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px}
.trial-categories button{flex:0 0 auto;min-height:34px;padding:6px 12px;color:#143262;font-size:13px;font-weight:800;border:1px solid rgba(47,123,255,.22);border-radius:999px;background:var(--card)}
.trial-categories button.active{color:#fff;background:linear-gradient(110deg,var(--primary-strong),var(--accent))}
.trial-categories span{opacity:.72}
.trial-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.trial-category-card{min-height:auto}
.trial-featured,.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.trial-featured{margin-bottom:12px}
.game-card{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"image text" "button button";gap:9px;align-items:center;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.66);border-radius:18px;background:linear-gradient(180deg,var(--card),rgba(245,250,255,.58));box-shadow:inset 0 1px #ffffffd9,0 12px 24px #1a448a1f;backdrop-filter:blur(12px)}
.featured-game{border-color:#2f7bff52}
.game-card img{grid-area:image;width:72px;height:72px;object-fit:cover;border-radius:14px;background:#eef4ff}
.game-card div{grid-area:text;display:grid;min-width:0;align-content:center}
.game-card strong{overflow:hidden;color:var(--text);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.game-card span{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.game-card button{grid-area:button;display:inline-flex;min-height:32px;align-items:center;justify-content:center;gap:6px}
.load-more{display:block;width:min(260px,100%);min-height:40px;margin:18px auto 0}
.player-panel{overflow:hidden;margin:0 0 14px;border:1px solid rgba(47,123,255,.28);border-radius:18px;background:#0f172a;box-shadow:0 22px 58px #0f172a38}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;color:#fff;background:#0f172af0}
.player-head div{display:grid;min-width:0}
.player-head span{color:#93c5fd;font-size:12px}
.player-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-head button{display:grid;width:34px;height:34px;place-items:center;color:#fff;border:0;border-radius:10px;background:#ffffff29}
.player-panel iframe{display:block;width:100%;height:min(72vh,760px);min-height:520px;border:0;background:#fff}
.player-message{display:grid;min-height:320px;place-items:center;padding:24px;color:#dbeafe;text-align:center}
.popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--ng-layer-modal,220);display:flex;align-items:center;justify-content:center;padding:20px;background:#0e2b6661;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.popup-modal{width:min(440px,92vw);padding:22px;border:1px solid rgba(47,123,255,.18);border-radius:20px;background:var(--ng-surface-decor),var(--card);box-shadow:0 24px 64px #254f9838,0 0 0 1px #ffffffd9 inset}
.popup-header,.popup-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.popup-header h3{margin:0;font-size:18px}
.popup-header button{width:34px;height:34px;color:#8aa0c0;border:0;background:transparent;font-size:24px}
.popup-modal p{margin:16px 0;padding:14px 16px;color:#2d4a7a;border:1px solid rgba(47,123,255,.1);border-radius:12px;background:#2f7bff0f;line-height:1.85;white-space:pre-line}
.popup-footer{justify-content:flex-end}
.popup-footer button{min-height:38px;padding:0 18px;color:#fff;border:0;border-radius:12px;background:linear-gradient(90deg,var(--primary),var(--accent));font-weight:800}
.service-float-btn{position:fixed;right:24px;bottom:30px;z-index:80;display:grid;width:58px;height:58px;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:linear-gradient(135deg,var(--primary-strong),var(--accent));box-shadow:0 16px 34px #2f7bff5c}
.service-float-btn span{font-size:22px;line-height:1}
.service-float-btn b{position:absolute;top:-4px;right:-3px;min-width:20px;height:20px;padding:0 6px;color:#fff;font-size:11px;line-height:20px;border-radius:999px;background:#ff3d57}
.service-panel{--ng-panel:var(--ng-panel-solid,#fff);--ng-surface-fill:var(--ng-panel-solid,#fff);--ng-surface-strong:var(--ng-panel-solid,#fff);--card:var(--ng-panel-solid,#fff);position:fixed;right:22px;bottom:96px;z-index:90;width:min(320px,calc(100vw - 28px));padding:12px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:var(--ng-surface-decor),var(--ng-panel-solid,#fff);box-shadow:0 22px 52px #194ca038}
.service-panel-header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px}
.service-panel-header button{width:30px;height:30px;color:#51709f;border:0;border-radius:10px;background:#eef4ff}
.service-item{display:grid;width:100%;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:9px;color:#0f2250;text-align:left;border:1px solid rgba(47,123,255,.12);border-radius:14px;background:var(--ng-surface-decor),color-mix(in srgb,#eef4ffb8 80%,transparent)}
.service-item+.service-item{margin-top:8px}
.service-item img{width:44px;height:44px;object-fit:cover;border-radius:50%}
.service-item span{display:grid;min-width:0}
.service-item strong,.service-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-item small{color:#607391}
@media (prefers-reduced-motion: reduce){.card{animation:none;}
.marquee{animation:none}
}
@media (max-width: 1024px){.card-grid,.trial-featured,.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 900px){.card-grid,.trial-featured,.game-grid,.trial-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.carousel,.section{padding-right:14px;padding-left:14px}
}
@media (max-width: 768px){header{margin:0 auto 4px;border-radius:0 0 18px 18px}
.nav{min-height:46px;padding:8px 12px}
.brand-logo{max-width:130px;height:30px}
.carousel{margin:2px auto;padding:0 10px}
.carousel-wrap{border-radius:18px}
.slide{height:46vw;min-height:168px;max-height:235px}
.section{padding:0 10px}
.marquee-wrap{min-height:30px;border-radius:10px}
.marquee-text{font-size:12px}
.category-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.category-button{min-height:36px;padding:6px 8px;font-size:13px}
.pk16-category-title{margin:24px 0 14px;padding:7px 0;font-size:25px}
.card-grid,.trial-featured,.game-grid,.trial-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.card{grid-template-columns:50px minmax(0,1fr);gap:8px;min-height:124px;padding:9px;border-radius:16px}
.avatar{width:50px;height:50px}
.title{font-size:17px}
.desc{font-size:13px}
.go{min-height:34px;padding:6px 8px;border-radius:12px;font-size:13px}
.trial-page-head{grid-template-columns:1fr;gap:10px}
.ghost-action{width:100%}
.game-card{grid-template-columns:66px minmax(0,1fr);gap:9px;padding:10px;border-radius:16px}
.game-card img{width:66px;height:66px;border-radius:14px}
.game-card strong{font-size:15px}
.game-card span{font-size:13px}
.game-card button{min-height:36px;font-size:14px}
}
@media (max-width: 420px){.carousel,.section{padding-right:8px;padding-left:8px}
.category-buttons{gap:6px}
.category-button{font-size:12px}
.card-grid,.trial-featured,.game-grid,.trial-category-grid{gap:8px}
.card{grid-template-columns:46px minmax(0,1fr);min-height:118px;padding:8px}
.avatar{width:46px;height:46px}
.card,.game-card{padding:8px}
.title{font-size:16px}
.desc{font-size:12px}
.go{min-height:32px;font-size:12px}
.game-card strong,.game-card button{font-size:12px}
}


/* UI refresh: calmer surfaces, clearer hierarchy, stronger mobile layout. */
:root {
  --bg: #f4f7fb;
  --page-bg: #f4f7fb;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #2f6bff;
  --primary-strong: #2358d8;
  --accent: #68a4ff;
  --text: #101828;
  --muted: #667085;
  --line: #e4eaf2;
  --success: #12a06a;
  --warning: #dc7b14;
  --danger: #e54861;
  --shadow: 0 14px 36px rgba(16, 24, 40, 0.08);
  --soft-shadow: 0 7px 20px rgba(16, 24, 40, 0.06);
}

body {
  background: #f4f7fb;
}

.page-shell header {
  width: min(1180px, calc(100% - 28px));
  margin: 14px auto 10px;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
  backdrop-filter: blur(18px);
}

.page-shell header::before { display: none; }
.page-shell .nav { min-height: 68px; padding: 7px 20px; }
.page-shell .brand-logo {
  width: min(252px, 100%);
  max-width: 252px;
  height: 49px;
  object-fit: contain;
  object-position: left center;
  filter: none;
}
/* The compiled shell still creates a historical build-time image before the
   tenant configuration arrives. Never paint that placeholder. */
.page-shell .brand-logo.is-configured { visibility: visible !important; opacity: 1 !important; }

.page-shell .carousel {
  max-width: 1180px;
  margin: 0 auto 10px;
  padding: 0;
}

.page-shell .carousel-wrap {
  aspect-ratio: var(--ng-banner-ratio, 1280 / 548);
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.page-shell .slides { height: 100%; }

/* Reserve the real banner box during startup; only confirmed empty configuration
   removes it. An empty initial Vue array is not evidence that the site has no banner. */
.page-shell .carousel:has(.slides[data-ng-banners="[]"]:empty) { display: none; }

.page-shell .slide {
  position: relative;
  isolation: isolate;
  overflow: visible;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  background-color: transparent;
  background-position: center;
  background-size: 0 0;
  background-repeat: no-repeat;
}

.page-shell .slide::before {
  content: none;
  display: none;
}

.page-shell .slide::after {
  content: none;
  display: none;
}

.page-shell .slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform-origin: center;
  animation: ngBannerArtworkDrift 12s ease-in-out infinite alternate;
  will-change: transform;
}

/* Responsive sources are wrapped in <picture>. Keep that wrapper transparent
   to the existing carousel geometry so AVIF/WebP selection never changes the
   crop, aspect ratio or animation of the banner artwork. */
.page-shell .slide > picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.page-shell .slide > picture > img {
  z-index: auto;
}

@keyframes ngBannerArtworkDrift {
  from { transform: scale(1); }
  to { transform: scale(1.012); }
}

/* The configured or intrinsic first-banner ratio is shared by every viewport. */
@media (min-width: 901px) {
  .page-shell .carousel-wrap { aspect-ratio: var(--ng-banner-ratio, 1280 / 548); }
  .page-shell .slides { height: 100%; }
  .page-shell .slide { height: 100%; aspect-ratio: auto; }
  .page-shell .slide img { object-fit: contain; }
}

.page-shell .dots { bottom: 14px; }
.page-shell .dot { width: 7px; height: 7px; border: 0; background: rgba(255, 255, 255, 0.7); }
.page-shell .dot.active { width: 24px; border-radius: 99px; background: #fff; box-shadow: none; transform: none; }

.page-shell .section{ max-width: 1180px; }

.page-shell .notice-section { margin-top: 10px; margin-bottom: 4px; }
.page-shell .ng-platform-logo-carousel { margin-top: 8px; margin-bottom: 2px; }
.ng-platform-logo-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding: 5px 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ng-platform-logo-viewport::-webkit-scrollbar { display: none; }
.ng-platform-logo-track, .ng-platform-logo-group, .ng-platform-logo-sequence { display: flex; width: max-content; align-items: center; }
.ng-platform-logo-sequence { gap: 14px; padding: 3px 14px 3px 0; }
.ng-platform-logo-group[hidden] { display: none; }
.ng-platform-logo-link {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--ng-line, var(--primary, #2f7bff));
  border-radius: 50%;
  background: var(--ng-panel-solid, var(--card, #fff));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ng-platform-logo-link img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.ng-platform-logo-link.is-coming-soon { cursor: not-allowed; opacity: .72; filter: saturate(.72); }
.ng-platform-logo-link.is-coming-soon:disabled { pointer-events: none; }
.ng-platform-logo-link:focus-visible { outline: 3px solid var(--ng-accent, var(--primary, #2f7bff)); outline-offset: 2px; }
@media (max-width: 768px) {
  .ng-platform-logo-shell {
    padding: 6px 4px;
    overflow: hidden;
    border: 1px solid var(--ng-line, rgba(47, 123, 255, .18));
    border-radius: 18px;
    background: var(--ng-panel, rgba(255, 255, 255, .65));
  }
  .ng-platform-logo-viewport { padding: 1px 0; }
  .ng-platform-logo-shell.is-scrollable .ng-platform-logo-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  }
  .ng-platform-logo-shell:not(.is-scrollable) .ng-platform-logo-track { margin-inline: auto; }
  .ng-platform-logo-sequence { gap: 12px; padding: 3px 6px; }
  .ng-platform-logo-link {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    padding: 1px;
    border-color: transparent;
    background: transparent;
  }
}
.page-shell #cardsScroll .card[data-ng-resource-type="platform"] > .go.is-coming-soon {
  cursor: not-allowed !important;
  opacity: .78 !important;
  color: var(--ng-muted, var(--muted, #6b7280)) !important;
  border-color: color-mix(in srgb, var(--ng-line, #94a3b8) 70%, transparent) !important;
  background: color-mix(in srgb, var(--ng-panel, #e2e8f0) 84%, transparent) !important;
  box-shadow: none !important;
}
.page-shell .marquee-wrap {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  padding: 7px 16px 7px 43px;
  border: 1px solid #dce7fb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.page-shell [data-ng-scrolling-announcement] {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  overflow: hidden;
  cursor: default;
}
.page-shell [data-ng-scrolling-announcement][hidden],
.page-shell .notice-section[hidden] { display: none; }

.page-shell .marquee-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 17px;
  z-index: 2;
  display: inline-flex;
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2f6bff;
  box-shadow: 0 0 0 5px rgba(47, 107, 255, .1);
  transform: translateY(-50%);
}

.page-shell .marquee-wrap::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 32px;
  width: 1px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, rgba(104, 132, 180, .25), transparent);
  pointer-events: none;
}

.page-shell .marquee {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding-left: 0;
  white-space: nowrap;
  animation: none;
  transform: none;
}
.page-shell .marquee-text {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  overflow: visible;
  color: #3f4f68;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  text-overflow: clip;
  text-shadow: none;
  white-space: nowrap;
  animation: noticeTextScroll var(--ng-notice-duration, 13s) linear infinite;
  will-change: transform;
}
.page-shell .marquee-text .ng-rich-link {
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.page-shell .marquee-text .ng-rich-red { color: #c62828; font-weight: 900; }
.page-shell .marquee-text .ng-rich-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.page-shell .marquee-wrap:hover .marquee-text { animation-play-state: paused; }
.page-shell .marquee-wrap.is-clickable { cursor: pointer; }
.page-shell .marquee-wrap.is-clickable:hover { border-color: rgba(47, 107, 255, .38); }
.page-shell .marquee-wrap.is-clickable:focus-visible { outline: 3px solid rgba(47, 107, 255, .2); outline-offset: 3px; }

html[data-motion="off"] .page-shell .marquee-text {
  padding-left: 0;
  animation: none;
  transform: none;
}

@keyframes noticeTextScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (max-width: 768px) {
  .page-shell .notice-section { margin-top: 7px; }
  .page-shell .marquee-wrap {
    min-height: 42px;
    padding: 6px 11px 6px 38px;
    border-radius: 14px;
  }
  .page-shell .marquee-wrap::before {
    left: 15px;
    width: 7px;
    min-width: 7px;
    height: 7px;
    min-height: 7px;
    padding: 0;
  }
  .page-shell .marquee-wrap::after { top: 11px; bottom: 11px; left: 28px; }
  .page-shell .marquee-text { font-size: 13px; }
}

.page-shell .nav-section { margin-top: 10px; }
.page-shell .category-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.page-shell .category-button {
  min-height: 44px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #344054;
  box-shadow: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.page-shell .category-button:hover { border-color: #9bb9ff; color: #2358d8; transform: translateY(-1px); }
.page-shell .category-button.active {
  border-color: #2f6bff;
  background: #2f6bff;
  color: #fff;
  box-shadow: 0 7px 18px rgba(47, 107, 255, 0.2);
}
.page-shell .category-button.fixed-primary-category,
.page-shell .category-button[data-fixed-category="trial"],
.page-shell .category-button[data-fixed-category="lottery"] { grid-column: span 2; min-height: 50px; font-size: 16px; }

.page-shell .pk16-category-title {
  justify-content: flex-start;
  margin: 28px 0 18px;
  padding: 0 0 0 15px;
  font-size: clamp(24px, 3vw, 30px);
  text-align: left;
}

.page-shell .pk16-category-title::before {
  top: 50%;
  left: 0;
  width: 4px;
  height: 30px;
  background: #2f6bff;
  box-shadow: none;
  transform: translateY(-50%);
}

.page-shell .pk16-category-title::after { display: none; }
.page-shell .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.page-shell .trial-featured,
.page-shell .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.page-shell .game-card {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border-color: #e5eaf1;
  border-radius: 14px;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: 0 7px 20px rgba(16, 24, 40, 0.05);
  
}
.page-shell .game-card img { width: 58px; height: 58px; border-radius: 12px; }
.page-shell .game-card button { min-height: 34px; border-radius: 9px; box-shadow: none; }
.page-shell .card {
  grid-template-columns: 62px minmax(0, 1fr) 90px;
  grid-template-areas: "avatar meta cta";
  gap: 13px;
  align-items: center;
  min-height: 104px;
  padding: 16px;
  border: 1px solid #e5eaf1;
  border-radius: 16px;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.055);
  
}

.page-shell .card:hover {
  border-color: #bed0ff;
  box-shadow: 0 14px 34px rgba(47, 107, 255, 0.11);
  transform: translateY(-3px);
}

.page-shell .avatar {
  width: 62px;
  height: 62px;
  border: 1px solid #e4eaf2;
  background: #f5f7fa;
  box-shadow: none;
}

.page-shell .title { font-size: 17px; font-weight: 800; }
.page-shell .desc { margin-top: 5px; color: #667085; font-size: 13px; }
.page-shell .rating { margin-top: 7px; }
.page-shell .stars { color: #f5a524; filter: none; }
.page-shell .score { color: #98a2b3; font-size: 12px; }
.page-shell .go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #b9ccff;
  border-radius: 10px;
  background: #f4f7ff;
  color: #2358d8;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.page-shell .go:hover { border-color: #2f6bff; background: #2f6bff; color: #fff; }
.page-shell .go:focus-visible {
  outline: 3px solid rgba(47, 107, 255, 0.22);
  outline-offset: 2px;
}
.page-shell .card-rec-badge { top: 8px; right: 8px; border-radius: 999px; box-shadow: none; }
.page-shell .rec-type-1 { background: #f79009; }
.page-shell .rec-type-2 { background: #2f6bff; }

body.trial-direct-mode .trial-page-head { grid-template-columns: minmax(0, 1fr); }
body.trial-direct-mode .trial-category-grid { display: none !important; }
body.trial-direct-mode .trial-page-head .ghost-action { display: none; }

.page-shell .trial-vendor-shell {
  position: relative;
  margin: -2px 0 18px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-shell .trial-vendor-shell::after {
  display: none;
}

.page-shell .trial-vendor-nav {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 6px;
  overflow-x: auto;
  padding: 9px 10px 10px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.page-shell .trial-vendor-nav::-webkit-scrollbar { display: none; }

.page-shell .trial-vendor-tab {
  --vendor-tint: #2f6bff;
  --vendor-soft: #edf3ff;
  display: inline-flex;
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 11px 6px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #667085;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-shell .trial-vendor-tab:nth-child(5n + 2) { --vendor-tint: #7c5ce7; --vendor-soft: #f1edff; }
.page-shell .trial-vendor-tab:nth-child(5n + 3) { --vendor-tint: #1677c8; --vendor-soft: #eaf6ff; }
.page-shell .trial-vendor-tab:nth-child(5n + 4) { --vendor-tint: #0c9b74; --vendor-soft: #e8f8f2; }
.page-shell .trial-vendor-tab:nth-child(5n + 5) { --vendor-tint: #e48a18; --vendor-soft: #fff5e5; }

.page-shell .trial-vendor-tab:hover {
  color: var(--vendor-tint);
  background: var(--vendor-soft);
  transform: translateY(-1px);
}

.page-shell .trial-vendor-tab.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(125deg, var(--vendor-tint), color-mix(in srgb, var(--vendor-tint) 68%, #78a9ff));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--vendor-tint) 24%, transparent);
}

.page-shell .trial-vendor-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] body .page-shell .trial-vendor-shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] body .page-shell .trial-vendor-tab { color: #9cafc8; }
html[data-theme="dark"] body .page-shell .trial-vendor-tab:hover { color: #fff; background: #182b48; }
html[data-theme="dark"] body .page-shell .trial-vendor-tab.active {
  border-color: #294a72;
  color: #fff;
  background: #193354;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 7px 18px rgba(0, 0, 0, .16);
}
body.trial-game-open { overflow: hidden !important; }
.trial-game-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ng-layer-modal, 220);
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  color: #fff;
  background: #07101f;
}

.trial-game-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  padding: max(7px, env(safe-area-inset-top, 0px)) 10px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.trial-game-close {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-left: 8px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 0;
  line-height: 0;
  pointer-events: auto;
  transition: background .18s ease, transform .18s ease;
}
.trial-game-close:hover { background: #e54861; transform: scale(1.04); }
.trial-game-stage { position: absolute; inset: 0; min-height: 0; overflow: hidden; background: #02060d; }
.trial-game-stage iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #02060d; opacity: 0; }
.trial-game-stage iframe.loaded { opacity: 1; transition: opacity .25s ease; }
.trial-game-loading {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  color: #dce8fa;
  background: radial-gradient(circle at 50% 42%, #152e52 0, #081426 42%, #02060d 78%);
}
.trial-game-loading[hidden] { display: none; }
.trial-game-loading span {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: 4px solid rgba(115, 159, 225, .22);
  border-top-color: #4c88ff;
  border-radius: 50%;
  animation: trial-game-spin .85s linear infinite;
}
.trial-game-loading strong { font-size: 19px; }
.trial-game-loading small { color: #8da3c2; font-size: 13px; }

@keyframes trial-game-spin { to { transform: rotate(360deg); } }
body.lottery-inline-mode #cardsScroll { display: none; }
.page-shell .lottery-inline-panel { margin-top: 0; padding-top: 0; }
.page-shell .lottery-inline-panel[hidden] { display: none; }
.page-shell .lottery-inline-frame-shell {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-shell .lottery-inline-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  background: #f7f9fc;
}
.page-shell .lottery-inline-loading[hidden] { display: none; }
.page-shell .lottery-inline-frame {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 0;
  opacity: 0;
  background: transparent;
  transition: opacity 180ms ease;
}
.page-shell .lottery-inline-frame.is-ready { min-height: 0; opacity: 1; }

.page-shell .service-float-btn {
  right: 22px;
  bottom: 24px;
  display: flex;


  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #2f6bff;
  box-shadow: 0 12px 28px rgba(47, 107, 255, 0.26);
}

.page-shell .service-float-btn[hidden] { display: none !important; }

.page-shell .service-float-btn::after { content: "在线客服"; font-size: 13px; font-weight: 800; white-space: nowrap; }
.page-shell .service-float-btn span {
  position: relative;
  display: block;
  width: 23px;
  height: 19px;
  flex: 0 0 23px;
  overflow: visible;
  border: 2px solid currentColor;
  border-radius: 7px;
  color: #fff;
  font-size: 0;
  line-height: 0;
}

.page-shell .service-float-btn span::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
}

.page-shell .service-float-btn span::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 4px;
  width: 7px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 0 0 0 3px;
  transform: skewX(-30deg);
}

.page-shell .service-float-btn b {
  top: -7px;
  right: -7px;
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 6px;
  border: 2px solid #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(229, 72, 97, 0.3);
}

.page-shell .service-item {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.page-shell .service-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid #b9ccff;
  border-radius: 9px;
  background: #fff;
  color: #2358d8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.page-shell .service-item[data-contact-mode="copy"] .service-action {
  border-color: #b9e6d3;
  background: #f0faf6;
  color: #087a53;
}
.page-shell .service-action.is-done {
  border-color: #12a06a;
  background: #12a06a;
  color: #fff;
}

.page-shell button:focus-visible,
.page-shell a:focus-visible { outline: 3px solid rgba(47, 107, 255, 0.24); outline-offset: 3px; }

/* Lottery center */
.lottery-shell { width: min(1180px, 100%); padding-top: 14px; }
.lottery-shell .site-header {
  top: 10px;
  border: 1px solid #e3e9f1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(18px);
}

.lottery-shell .site-header::before { display: none; }
.lottery-shell .brand-row { min-height: 64px; padding: 10px 16px; }
.lottery-shell .brand img { max-width: 138px; height: 36px; filter: none; }
.lottery-shell .source-badge,
.lottery-shell .back-link { border-color: #e2e8f0; background: #f8fafc; }
.lottery-shell .main-nav {
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid #edf0f4;
  background: linear-gradient(180deg, rgba(248,250,255,.96), rgba(255,255,255,.96));
  box-shadow: none;
}

.lottery-shell .main-nav a {
  --nav-tint: #2f6bff;
  --nav-soft: #edf3ff;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #667085;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lottery-shell .main-nav a[data-route="robot"] { --nav-tint: #7c5ce7; --nav-soft: #f1edff; }
.lottery-shell .main-nav a[data-route="history"] { --nav-tint: #1677c8; --nav-soft: #eaf6ff; }
.lottery-shell .main-nav a[data-route="trend"] { --nav-tint: #0c9b74; --nav-soft: #e8f8f2; }
.lottery-shell .main-nav a[data-route="missing"] { --nav-tint: #e48a18; --nav-soft: #fff5e5; }
.lottery-shell .main-nav a[data-route="dragon"] { --nav-tint: #db5368; --nav-soft: #fff0f2; }
.lottery-shell .main-nav .nav-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: var(--nav-soft);
  color: var(--nav-tint);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-tint) 12%, transparent);
}
.lottery-shell .main-nav a:hover { color: var(--nav-tint); border-color: color-mix(in srgb, var(--nav-tint) 18%, transparent); background: var(--nav-soft); transform: translateY(-1px); }
.lottery-shell .main-nav a.active {
  color: #fff;
  border-color: transparent;
  background: var(--nav-tint);
  background: linear-gradient(125deg, var(--nav-tint), color-mix(in srgb, var(--nav-tint) 68%, #78a9ff));
  box-shadow: 0 8px 18px rgba(47,107,255,.2);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--nav-tint) 24%, transparent);
}
.lottery-shell .main-nav a.active .nav-icon { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

@media (min-width: 721px) {
  .lottery-shell .main-nav { justify-content: space-between; gap: 7px; }
  .lottery-shell .main-nav > a { flex: 1 1 0; max-width: 150px; text-align: center; }
}
.lottery-shell .data-note {
  margin: 12px 0;
  border-color: #f5dfb5;
  background: #fffaf0;
  box-shadow: none;
}

.lottery-shell .page-head { align-items: center; margin: 24px 0 14px; }
.lottery-shell .eyebrow { margin-bottom: 6px; color: #2f6bff; }
.lottery-shell .page-head h1 { font-size: clamp(28px, 3.5vw, 38px); letter-spacing: -0.025em; }
.lottery-shell .button,
.lottery-shell .period-button,
.lottery-shell .segmented button { min-height: 40px; border-color: #dfe5ec; background: #fff; box-shadow: none; }
.lottery-shell .button.primary,
.lottery-shell .period-button.active,
.lottery-shell .segmented button.active { border-color: #2f6bff; background: #2f6bff; box-shadow: 0 7px 18px rgba(47, 107, 255, 0.18); }

.lottery-shell .panel,
.lottery-shell .draw-card,
.lottery-shell .stat-card {
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: 0 7px 24px rgba(16, 24, 40, 0.055);
  
}

.lottery-shell .draw-card { padding: 20px 22px 22px; border-top: 4px solid #2f6bff; }
.lottery-shell .draw-main { gap: 26px; }
.lottery-shell .number-expression { min-height: 104px; }
.lottery-shell .result-main { border-radius: 10px; background: #ecf8f3; color: #087a54; }
.lottery-shell .countdown { padding: 6px 12px; border-radius: 10px; background: #f2f4f7; color: #344054; font-size: 15px; }
.lottery-shell .meta-box { border-color: #e7ebf0; background:var(--ng-surface-decor),var(--ng-surface-fill); }
.lottery-shell .stat-card { min-height: 104px; padding: 16px; }
.lottery-shell .stat-card strong { color: #101828; font-size: 26px; }
.lottery-shell .panel-head { min-height: 60px; border-bottom-color: #edf0f4; }
.lottery-shell thead { background:var(--ng-surface-decor),var(--ng-surface-fill); }
.lottery-shell tbody tr:hover { background: #f7f9fc; }
.lottery-shell .robot-lab-head,
.lottery-shell .robot-card { border-color: #e5eaf1; background: #fff; }
.lottery-shell .robot-lab-head,
.lottery-shell .robot-card { box-shadow: 0 7px 20px rgba(16, 24, 40, 0.05); }
.lottery-shell .error-banner { border-color: #f6d7dc; background:var(--ng-surface-decor),var(--ng-surface-fill); }

@media (max-width: 900px) {
  /* Tablet cards keep the desktop horizontal anatomy, but use two columns so
     avatar, copy and CTA each retain a readable measure. Phones deliberately
     switch back to the compact three-column tile layout below 600px. */
  .page-shell .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-shell .trial-featured,
  .page-shell .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lottery-shell .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .page-shell header {
    width: 100%;
    margin: 0 auto 8px;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .page-shell .nav { min-height: 56px; padding: 6px 12px; }
  .page-shell .brand-logo {
    width: min(189px, calc(100vw - 44px));
    max-width: 189px;
    height: 36px;
  }
  .page-shell .carousel { padding: 0 10px; }
  .page-shell .carousel-wrap { border-radius: 14px; }
  .page-shell .slide { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
  .page-shell .nav-section {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-top: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    background:var(--ng-surface-decor),var(--ng-surface-fill);
    
  }

  .page-shell .category-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 1px 0 4px;
  }

  .page-shell .category-button { min-width: 0; min-height: 42px; padding: 7px 4px; overflow: hidden; font-size: clamp(11px, 3vw, 13px); text-overflow: ellipsis; white-space: nowrap; }
  .page-shell .category-button.fixed-primary-category,
  .page-shell .category-button[data-fixed-category="trial"],
  .page-shell .category-button[data-fixed-category="lottery"] { min-height: 46px; font-size: 15px; }
  .page-shell .pk16-category-title { margin: 20px 0 14px; font-size: 23px; }
  .page-shell .trial-vendor-shell { margin-bottom: 13px; border-radius: 0; }
  .page-shell .trial-vendor-nav { gap: 5px; padding: 7px 8px 8px; }
  .page-shell .trial-vendor-tab { gap: 5px; min-height: 40px; padding: 5px 9px 5px 5px; border-radius: 11px; font-size: 12px; }
  .trial-game-toolbar { min-height: 0; padding-right: 8px; padding-left: 8px; }

  .lottery-shell { padding: 0 10px 22px; }
  .lottery-shell .site-header { top: 0; margin: 0 -10px; border-width: 0 0 1px; border-radius: 0; }
  .lottery-shell .brand-row { min-height: 58px; padding: 8px 12px; }
  .lottery-shell .brand img { max-width: 102px; height: 30px; }
  .lottery-shell .brand small { display: none; }
  .lottery-shell .source-badge { display: none; }
  .lottery-shell .main-nav { padding: 6px 10px 9px; }
  .lottery-shell .main-nav a { min-height: 40px; padding: 6px 10px; }
  .lottery-shell .main-nav .nav-icon { width: 23px; height: 23px; border-radius: 7px; font-size: 13px; }
  .lottery-shell .data-note { align-items: flex-start; margin: 10px 0; padding: 9px 12px; }
  .lottery-shell .page-head { align-items: flex-start; margin-top: 18px; }
  .lottery-shell .draw-card { padding: 16px 14px 18px; }
  .lottery-shell .draw-main { grid-template-columns: 1fr; gap: 18px; }
  .lottery-shell .summary-grid { gap: 9px; }
}

@media (max-width: 600px) {
  .page-shell .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .page-shell .trial-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .page-shell .trial-featured,
  .page-shell .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }

  .page-shell .game-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "text" "button";
    gap: 4px;
    min-width: 0;
    padding: 4px;
    border-radius: 10px;
  }
  .page-shell .game-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
  .page-shell .game-card div { width: 100%; text-align: center; }
  .page-shell .game-card strong { display: block; overflow: hidden; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .page-shell .game-card span { display: none; }
  .page-shell .game-card button { min-width: 0; min-height: 25px; padding: 2px; border-radius: 7px; font-size: 10px; }
  .page-shell .game-card button svg { display: none; }

  .page-shell .card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "avatar" "meta" "cta";
    justify-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 122px;
    padding: 8px 5px 6px;
    border-radius: 12px;
  }

  .page-shell .avatar { width: 44px; height: 44px; }
  .page-shell .meta { width: 100%; align-items: center; text-align: center; }
  .page-shell .title { width: 100%; font-size: 13px; white-space: nowrap; }
  .page-shell .desc,
  .page-shell .rating { display: none; }
  .page-shell .go { width: 100%; min-height: 28px; margin: 0; padding: 3px; border-radius: 8px; font-size: 10px; }
  .page-shell .card-rec-badge { top: 3px; right: 3px; padding: 1px 5px; font-size: 9px; }
  .page-shell .service-float-btn {


    width: 52px;
    height: 52px;

    box-shadow: 0 10px 24px rgba(47, 107, 255, 0.3);
  }
  .page-shell .service-float-btn::after { display: none; }

  .page-shell .lottery-inline-panel { padding-right: 8px; padding-left: 8px; }
  .page-shell .lottery-inline-frame-shell { min-height: 180px; }
  .page-shell .lottery-inline-frame { min-height: 180px; }

  .lottery-shell .page-head { display: grid; }
  .lottery-shell .page-head h1 { font-size: 29px; }
  .lottery-shell .number-expression { gap: 6px; }
  .lottery-shell .operator { font-size: 17px; }
  .lottery-shell .result-strip { flex-wrap: wrap; }
  .lottery-shell .summary-grid { grid-template-columns: 1fr 1fr; }
  .lottery-shell .stat-card { min-height: 96px; }
  .lottery-shell .filters { grid-template-columns: 1fr 1fr; }
  .lottery-shell .distribution-grid,
  .lottery-shell .ball-groups { grid-template-columns: 1fr; }
}

html.lottery-embed,
html.lottery-embed body {
  min-width: 0;
  min-height: 0;
  background: transparent;
}
html.lottery-embed .lottery-shell {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
}
html.lottery-embed .lottery-shell .site-header {
  position: static;
  top: auto;
  margin: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.lottery-embed .lottery-shell .brand-row { display: none; }
html.lottery-embed .lottery-shell .data-note,
html.lottery-embed .lottery-shell .page-head { display: none; }
html.lottery-embed .lottery-shell .main-nav {
  gap: 6px;
  padding: 4px 44px 4px 6px;
  border-top: 0;
  background: transparent;
}
html.lottery-embed .lottery-shell .app-main { min-height: 0; padding: 12px; }
html.lottery-embed .toast { position: absolute; }

@media (max-width: 600px) {
  html.lottery-embed .lottery-shell .app-main { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell *, .lottery-shell * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .page-shell .marquee-text { padding-left: 0; animation: none; transform: none; }
}

.seo-only-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Full-site visual system and day/night theme. Loaded after page-specific styles. */

:root {
  --ng-surface: rgba(255, 255, 255, .9);
  --ng-surface-soft: rgba(246, 249, 255, .92);
  --ng-surface-strong: #fff;
  --ng-border: rgba(190, 205, 229, .72);
  --ng-text: #122039;
  --ng-muted: #5c6d86;
  --ng-blue: #2f6bff;
  --ng-blue-soft: #edf3ff;
  --ng-shadow: 0 14px 38px rgba(37, 72, 132, .09);
}

html[data-theme="dark"] {
  --bg: #07111f;
  --page-bg: #07111f;
  --panel: rgba(16, 28, 47, .96);
  --card: #111e32;
  --text: #edf4ff;
  --muted: #97a8c0;
  --line: #273a58;
  --ng-surface: rgba(15, 27, 46, .94);
  --ng-surface-soft: rgba(12, 23, 40, .96);
  --ng-surface-strong: #111e32;
  --ng-border: rgba(75, 101, 139, .48);
  --ng-text: #edf4ff;
  --ng-muted: #97a8c0;
  --ng-blue: #6d98ff;
  --ng-blue-soft: #182b4b;
  --ng-shadow: 0 16px 44px rgba(0, 0, 0, .28);
  color-scheme: dark;
  background: #07111f;
}

html[data-theme="dark"] body {
  color: var(--ng-text);
  background-color: #07111f;
}

.page-shell .service-float-btn {
  width: 112px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .62);
  background: linear-gradient(135deg, #245ee8 0%, #2f6bff 52%, #5b91ff 100%);
  box-shadow: 0 12px 28px rgba(47, 107, 255, .32), inset 0 1px rgba(255, 255, 255, .24);
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}
html[data-theme="dark"] .page-shell .service-float-btn {
  border-color: rgba(130, 170, 255, .62);
  background: linear-gradient(135deg, #1e4fc8 0%, #2f6bff 54%, #477fe9 100%);
}
.page-shell .service-float-btn:hover { border-color: rgba(255, 255, 255, .88); filter: brightness(1.07); transform: translateY(-2px); }
.page-shell .service-float-btn b { }

/* Unified component heights and richer light-theme hierarchy. */
.page-shell .category-buttons { align-items: stretch; }
.page-shell .category-button[hidden] { display: none !important; }
.page-shell .category-button,
.page-shell .category-button.fixed-primary-category {
  position: relative;
  display: inline-flex;
  height: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  padding: 0 13px;
  font-size: 14px;
  line-height: 1;
}
.page-shell .category-button::before {
  content: "◆";
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #2f6bff;
  background: #eaf1ff;
  font-size: 11px;
  box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .08);
}
.page-shell .category-button[data-fixed-category="trial"]::before { content: "◆"; }
.page-shell .category-button[data-fixed-category="lottery"]::before { content: "◉"; }
.page-shell .category-button[data-fixed-category="recommendation"]::before { content: "★"; }
.page-shell .category-button[data-fixed-category="movies"]::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232f6bff' d='M8 5.5v13L18 12z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.page-shell .category-button[data-fixed-category="adult"]::before { content: "☾"; }
.page-shell .category-button[data-fixed-category="tools"]::before { content: "⌘"; }
.page-shell .category-button.active::before {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.page-shell .category-button[data-fixed-category="movies"].active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8 5.5v13L18 12z'/%3E%3C/svg%3E");
}
.page-shell .category-button.active {
  background: linear-gradient(120deg, #225ee7 0%, #3978ff 54%, #68a3ff 100%);
  box-shadow: 0 10px 24px rgba(47, 107, 255, .28), inset 0 1px rgba(255, 255, 255, .22);
}
.page-shell .pk16-category-title { min-height: 48px; }
.page-shell .card-grid,
.page-shell .trial-featured,
.page-shell .game-grid,
.page-shell .trial-category-grid,
.collector-grid { align-items: stretch; }
.page-shell .card,
.page-shell .game-card,
.collector-card { height: 100%; }
.page-shell .card { min-height: 112px; }
.page-shell .game-card { min-height: 123px; }
html[data-theme="dark"] .page-shell .trial-vendor-shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .page-shell .trial-vendor-tab { color: #9cafc8; }
html[data-theme="dark"] .page-shell .trial-vendor-tab:hover { color: #fff; background: #182b48; }
html[data-theme="dark"] .page-shell .trial-vendor-tab.active {
  border-color: #294a72;
  color: #fff;
  background: #193354;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 7px 18px rgba(0, 0, 0, .16);
}
.page-shell .card,
.page-shell .game-card,
.collector-card { position: relative; }
.collector-catalog-shell {
  position: relative;
  isolation: isolate;
}
@media (min-width: 621px) {
  .collector-grid:has(.collector-card:only-child) { grid-template-columns: minmax(190px, 260px); }
}

/* Main navigation application — dark template. */
html[data-theme="dark"] .page-shell header,
html[data-theme="dark"] .page-shell .marquee-wrap,
html[data-theme="dark"] .page-shell .category-button,
html[data-theme="dark"] .page-shell .card,
html[data-theme="dark"] .page-shell .game-card,
html[data-theme="dark"] .page-shell .empty,
html[data-theme="dark"] .page-shell .popup-modal,
html[data-theme="dark"] .page-shell .service-panel {
  border-color: var(--ng-border);
  background: linear-gradient(180deg, rgba(18, 33, 55, .96), rgba(13, 26, 44, .96));
  box-shadow: var(--ng-shadow), inset 0 1px rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .page-shell header::before { opacity: .35; }
html[data-theme="dark"] .page-shell .brand-text,
html[data-theme="dark"] .page-shell .pk16-category-title,
html[data-theme="dark"] .page-shell .title,
html[data-theme="dark"] .page-shell .game-card strong,
html[data-theme="dark"] .page-shell .popup-header h3,
html[data-theme="dark"] .page-shell .service-item strong { color: #edf4ff; }
html[data-theme="dark"] .page-shell .desc,
html[data-theme="dark"] .page-shell .game-card span,
html[data-theme="dark"] .page-shell .score{ color: #94a6bf; }
html[data-theme="dark"] .page-shell .category-button { color: #dce7f8; }
html[data-theme="dark"] .page-shell .category-button::before { color: #8eb0ff; background: #1a3155; }
html[data-theme="dark"] .page-shell .category-button.active { color: #fff; border-color: #6f96f5; }
html[data-theme="dark"] .page-shell .category-button.active::before { color: #fff; background: rgba(255,255,255,.15); }
html[data-theme="dark"] .page-shell .category-button[data-fixed-category="movies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238eb0ff' d='M8 5.5v13L18 12z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
html[data-theme="dark"] .page-shell .category-button[data-fixed-category="movies"].active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8 5.5v13L18 12z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .page-shell .avatar,
html[data-theme="dark"] .page-shell .game-card img { border-color: #314866; background: #172945; }
html[data-theme="dark"] .page-shell .ghost-action,
html[data-theme="dark"] .page-shell .trial-tools input,
html[data-theme="dark"] .page-shell .trial-categories button {
  border-color: #314866;
  color: #dbe7fb;
  background: #101e33;
}
html[data-theme="dark"] .page-shell .trial-tools input::placeholder { color: #71839d; }
html[data-theme="dark"] .page-shell .service-panel-header button { color: #b7c6da; background: #1c2d48; }
html[data-theme="dark"] .page-shell .service-item { border-color: #2b4263; color: #eef4ff; background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .page-shell .service-item small { color: #8fa2bc; }
html[data-theme="dark"] .page-shell .service-action { border-color: #365378; color: #a9c1f4; background: #1b3152; }
html[data-theme="dark"] .page-shell .popup-modal p { border-color: #294564; color: #b7c8df; background: #122540; }
html[data-theme="dark"] .page-shell .player-panel,
html[data-theme="dark"] .page-shell .player-head { background: #050b14; }

/* Catalog pages — dark template and consistent content surfaces. */
html[data-theme="dark"] .collector-catalog-panel { color: #edf4ff; }
html[data-theme="dark"] .collector-card-copy strong,
html[data-theme="dark"] .collector-empty h3,
html[data-theme="dark"] .collector-age-gate h3 { color: #edf4ff; }
html[data-theme="dark"] .collector-card-copy span,
html[data-theme="dark"] .collector-meta,
html[data-theme="dark"] .collector-description,
html[data-theme="dark"] .collector-empty p,
html[data-theme="dark"] .collector-age-gate p,
html[data-theme="dark"] .collector-pagination span { color: #94a6bf; }
html[data-theme="dark"] .collector-toolbar { border-bottom-color: #223650; }
html[data-theme="dark"] .collector-toolbar input,
html[data-theme="dark"] .collector-toolbar select {
  border-color: #304765;
  color: #edf4ff;
  background: #0b1728;
}
html[data-theme="dark"] .collector-toolbar input::placeholder { color: #71839c; }
html[data-theme="dark"] .collector-card {
  border-color: #2a3e5d;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: 0 9px 26px rgba(0,0,0,.2);
}
html[data-theme="dark"] .collector-cover { background: linear-gradient(145deg, #162945, #0c182a); }
html[data-theme="dark"] .collector-pagination button,
html[data-theme="dark"] .collector-age-actions .is-quiet,
html[data-theme="dark"] .collector-episode,
html[data-theme="dark"] .collector-episodes-more {
  border-color: #304765;
  color: #c7d7ee;
  background: #12233b;
}
html[data-theme="dark"] .collector-episode.is-active { border-color: #4b7fff; color: #fff; background: #2f6bff; }

/* Lottery data center — full dark template. */
html[data-theme="dark"] .lottery-shell .site-header {
  border-color: #273b59;
  background: rgba(11, 22, 38, .94);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
html[data-theme="dark"] .lottery-shell .main-nav {
  border-color: #2a3f5e;
  background: linear-gradient(180deg, #14233a, #101d30);
}
html[data-theme="dark"] .lottery-shell .main-nav a { color: #9cafc8; }
html[data-theme="dark"] .lottery-shell .main-nav a:hover { background: #182b48; }
html[data-theme="dark"] .lottery-shell .source-badge,
html[data-theme="dark"] .lottery-shell .back-link,
html[data-theme="dark"] .lottery-shell .button,
html[data-theme="dark"] .lottery-shell .period-button,
html[data-theme="dark"] .lottery-shell .segmented button {
  border-color: #304662;
  color: #bdcce0;
  background: #122238;
}
html[data-theme="dark"] .lottery-shell .button.primary,
html[data-theme="dark"] .lottery-shell .period-button.active,
html[data-theme="dark"] .lottery-shell .segmented button.active { border-color: #4e7cf0; color: #fff; background: #2f6bff; }
html[data-theme="dark"] .lottery-shell .data-note { border-color: #5c4728; color: #e3c483; background: #2b2114; }
html[data-theme="dark"] .lottery-shell .eyebrow { color: #7fa3ff; }
html[data-theme="dark"] .lottery-shell .page-head h1,
html[data-theme="dark"] .lottery-shell .panel-head h2,
html[data-theme="dark"] .lottery-shell .draw-heading,
html[data-theme="dark"] .lottery-shell .draw-issue,
html[data-theme="dark"] .lottery-shell .robot-lab-title strong,
html[data-theme="dark"] .lottery-shell .robot-section-head strong { color: #edf4ff; }
html[data-theme="dark"] .lottery-shell .page-head p,
html[data-theme="dark"] .lottery-shell .panel-head span,
html[data-theme="dark"] .lottery-shell .stat-card span,
html[data-theme="dark"] .lottery-shell .stat-card small { color: #97a8c0; }
html[data-theme="dark"] .lottery-shell .engine-panel span,
html[data-theme="dark"] .lottery-shell .engine-panel small { color: #9cafc8; }
html[data-theme="dark"] .lottery-shell .panel,
html[data-theme="dark"] .lottery-shell .draw-card,
html[data-theme="dark"] .lottery-shell .stat-card,
html[data-theme="dark"] .lottery-shell .robot-lab-head,
html[data-theme="dark"] .lottery-shell .robot-card {
  border-color: #283d5b;
  background: linear-gradient(180deg, rgba(17, 31, 52, .98), rgba(12, 24, 41, .98));
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
html[data-theme="dark"] .lottery-shell .engine-panel article {
  border-color: #2c4261;
  color: #edf4ff;
  background: linear-gradient(180deg, #13233a, #101f34);
  box-shadow: 0 10px 26px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045);
}
html[data-theme="dark"] .lottery-shell .engine-panel strong { color: #edf4ff; }
html[data-theme="dark"] .lottery-shell .draw-top,
html[data-theme="dark"] .lottery-shell .panel-head { border-bottom-color: #263b58; }
html[data-theme="dark"] .lottery-shell .result-main { color: #60d9ad; background: #12382e; }
html[data-theme="dark"] .lottery-shell .countdown { color: #dbe6f5; background: #17263c; }
html[data-theme="dark"] .lottery-shell .meta-box,
html[data-theme="dark"] .lottery-shell .omission-item,
html[data-theme="dark"] .lottery-shell .robot-lab-stats span,
html[data-theme="dark"] .lottery-shell .robot-category-tabs button,
html[data-theme="dark"] .lottery-shell .segmented,
html[data-theme="dark"] .lottery-shell .field input,
html[data-theme="dark"] .lottery-shell .field select {
  border-color: #2c4261;
  color: #dce7f6;
  background: #111f34;
}
html[data-theme="dark"] .lottery-shell .field input::placeholder { color: #71849f; }
html[data-theme="dark"] .lottery-shell .stat-card strong,
html[data-theme="dark"] .lottery-shell .meta-box strong,
html[data-theme="dark"] .lottery-shell .robot-lab-stats b,
html[data-theme="dark"] .lottery-shell .robot-record b { color: #edf4ff; }
html[data-theme="dark"] .lottery-shell thead,
html[data-theme="dark"] .lottery-shell th { color: #9dafc8; background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .lottery-shell th,
html[data-theme="dark"] .lottery-shell td { border-bottom-color: #243955; }
html[data-theme="dark"] .lottery-shell tbody tr:hover { background: #142642; }
html[data-theme="dark"] .lottery-shell .mini-ball,
html[data-theme="dark"] .lottery-shell .result-chip,
html[data-theme="dark"] .lottery-shell .sequence i { color: #9bb8ff; background: #1a3155; }
html[data-theme="dark"] .lottery-shell .bar-track { background: #1b2e49; }
html[data-theme="dark"] .lottery-shell .robot-card { color: #edf4ff; }
html[data-theme="dark"] .lottery-shell .robot-avatar i { border-color: #111e32; }
html[data-theme="dark"] .lottery-shell .robot-modal { border-color: #30445f; color: #edf4ff; background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .lottery-shell .robot-modal-head { border-bottom-color: #2a405e; background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .lottery-shell .robot-modal-close { color: #b8c6d9; background: #1b2c46; }
html[data-theme="dark"] .lottery-shell .robot-modal-stats span,
html[data-theme="dark"] .lottery-shell .robot-history-chart,
html[data-theme="dark"] .lottery-shell .robot-history-table { border-color: #2b405e; color: #dce7f6; background: #111f34; }
html[data-theme="dark"] .lottery-shell .robot-modal-stats strong { color: #edf4ff; }
html[data-theme="dark"] .lottery-shell .robot-rule-note { border-color: #2b4d79; color: #aebdd0; background: #132744; }
html[data-theme="dark"] .lottery-shell .error-banner { border-color: #693342; color: #ff9bab; background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .lottery-shell .skeleton-card { background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .lottery-shell .skeleton { background: linear-gradient(90deg, #172a45, #213958, #172a45); background-size: 220% 100%; }

/* Route detector — dark template. */
html[data-theme="dark"] .line-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(53, 104, 221, .2), transparent 30rem),
    linear-gradient(180deg, #081321 0%, #0a1728 100%);
}
html[data-theme="dark"] .line-shell { border-color: #2a405f; background: rgba(12, 24, 41, .96); box-shadow: 0 30px 90px rgba(0,0,0,.34); }
html[data-theme="dark"] .line-hero { background: linear-gradient(125deg, #183d9e 0%, #285ec9 56%, #366fca 100%); }
html[data-theme="dark"] .progress-panel,
html[data-theme="dark"] .route-card,
html[data-theme="dark"] .retry-button,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .error-panel {
  border-color: #2c4261;
  color: #eaf2ff;
  background: #111f34;
}
html[data-theme="dark"] .progress-track { background: #1b2e49; }
html[data-theme="dark"] .progress-panel p,
html[data-theme="dark"] .route-name span,
html[data-theme="dark"] .metric small{ color: #91a3bb; }
html[data-theme="dark"] .route-name strong,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .section-heading h2 { color: #edf4ff; }
html[data-theme="dark"] .route-card.is-best { border-color: #4d7de8; background: linear-gradient(90deg, #152a49, #111f34); }
html[data-theme="dark"] .route-card.is-down { background:var(--ng-surface-decor),var(--ng-surface-fill); }
html[data-theme="dark"] .best-label { color: #9db9ff !important; background: #1b345d; }

@media (max-width: 768px) {
  .page-shell .category-button,
  .page-shell .category-button.fixed-primary-category {
    height: 44px;
    min-height: 44px;
    gap: 5px;
    padding: 0 8px;
    font-size: 13px;
  }
  .page-shell .category-button::before { width: 21px; height: 21px; border-radius: 7px; font-size: 10px; }
  .page-shell .pk16-category-title { min-height: 44px; }
  .page-shell .card { min-height: 122px; }
  .page-shell .game-card { min-height: 114px; }
}

@media (max-width: 600px) {
  .page-shell .service-float-btn {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    padding: 0;
  }
}

@media (max-width: 390px) {
  .page-shell .category-button,
  .page-shell .category-button.fixed-primary-category { gap: 4px; padding: 0 6px; font-size: 12px; }
  .page-shell .category-button::before { width: 19px; height: 19px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .service-float-btn,
  .page-shell .service-float-btn b { animation: none; }
}

/* NG theme system v4: one component language, six distinct skins, original UI fallback. */
:root { --ng-theme-color: #2f6bff; --ng-motion-speed: 1; }

html.ng-skin-active {
  --ng-accent: #2f6bff; --ng-accent-2: #22c8c3; --ng-accent-rgb: 47,107,255;
  --ng-on-accent:#fff;
  --ng-page: #eff5ff; --ng-page-deep: #dfeaff; --ng-panel: rgba(255,255,255,.88);
  --ng-panel-solid: #fff; --ng-ink: #14223a; --ng-muted: #687b98;
  --ng-line: rgba(74,126,211,.28); --ng-shadow: 0 18px 42px rgba(22,59,118,.15);
  --ng-radius: 22px; --ng-radius-small: 14px; --ng-blur: 18px;
  --ng-title-mark: linear-gradient(180deg,var(--ng-accent),var(--ng-accent-2));
  --ng-button: linear-gradient(120deg,#235bd6,#5146ad);
  --ng-broadcast: "◉"; --ng-broadcast-bg: var(--ng-button);
  --ng-control: color-mix(in srgb,var(--ng-panel-solid) 86%,var(--ng-accent) 14%);
  --ng-control-hover: color-mix(in srgb,var(--ng-panel-solid) 78%,var(--ng-accent) 22%);
  --ng-soft: color-mix(in srgb,var(--ng-panel-solid) 88%,var(--ng-accent) 12%);
  --ng-success:#27b27c; --ng-warning:#e69a2d; --ng-danger:#e45568;
  --ng-empty-glyph:"◇"; --ng-loading-glyph:"";
  --ng-modal-head:linear-gradient(125deg,var(--ng-accent),var(--ng-accent-2));
  --ng-modal-overlay:rgba(2,8,22,.68);
  --ng-tab-indicator:var(--ng-title-mark);
  --ng-button-decoration:linear-gradient(transparent,transparent);
  --ng-button-edge:color-mix(in srgb,var(--ng-accent) 52%,#fff);
  --ng-button-shadow:0 11px 26px rgba(var(--ng-accent-rgb),.28),inset 0 1px rgba(255,255,255,.25);
  --ng-float-decoration:radial-gradient(circle at 30% 24%,rgba(255,255,255,.25),transparent 30%);
  --ng-float-shadow:0 12px 28px rgba(var(--ng-accent-rgb),.3),inset 0 1px rgba(255,255,255,.3);
  --ng-control-radius:var(--ng-radius-small); --ng-focus-ring:rgba(var(--ng-accent-rgb),.24);
  --ng-row-hover:color-mix(in srgb,var(--ng-control-hover) 62%,transparent);
  --ng-row-stripe:color-mix(in srgb,var(--ng-soft) 46%,transparent);
  --ng-skeleton-mid:rgba(var(--ng-accent-rgb),.15);
  color-scheme: dark;
}
html.ng-skin-active[data-theme="light"] { color-scheme: light; }
html.ng-theme-switching body { transition: background-color .36s ease, color .36s ease; }

/* Keep the browser overscroll/safe-area canvas in the active theme.  Mobile
   browsers paint the root element behind the document when the user reaches
   the bottom; a fixed dark root color otherwise appears as an extra black
   strip below an arcade/cosmic/etc. page. */
html[data-ui-theme] {
  background-color: var(--ng-page, #f1f5fb);
}

html.ng-skin-active body {
  isolation: isolate; color: var(--ng-ink); background-color: var(--ng-page);
  background-image: radial-gradient(circle at 12% 8%,rgba(var(--ng-accent-rgb),.12),transparent 32%),linear-gradient(145deg,var(--ng-page),var(--ng-page-deep));
  background-attachment: fixed;
}

html.ng-skin-active :is(.site-header,.page-shell>header,.marquee-wrap,.card,.game-card,.collector-card,.trial-panel,.service-panel,.line-shell,.popup-modal,.ng-home-popup-card,.activity-hall-panel,.activity-card,.activity-notice,.activity-apply-form,.site-share-panel,.site-share-image,.site-share-action,.lottery-shell .draw-card,.lottery-shell .stat-card,table) {
  border-color:var(--ng-line)!important; border-radius:var(--ng-radius)!important; box-shadow:var(--ng-shadow)!important;
}
html[data-ui-theme] :is(.site-header,.page-shell>header,.marquee-wrap,.card,.game-card,.collector-card,.trial-panel,.service-panel,.activity-card,.activity-notice,.activity-apply-form,.site-share-image,.site-share-action,.lottery-shell .draw-card,.lottery-shell .stat-card,table) {
  color:var(--ng-ink); background:var(--ng-surface-decor),var(--ng-panel)!important;  
}
html.ng-skin-active .line-shell { color:var(--ng-ink); background:var(--ng-panel-solid)!important; }
html.ng-skin-active .line-hero { background:var(--ng-surface-decor),var(--ng-modal-head)!important; }
html.ng-skin-active .checker-panel { color:var(--ng-ink); border-color:var(--ng-line)!important; background:var(--ng-surface-decor),var(--ng-panel)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; }
html.ng-skin-active .progress-copy strong { color:var(--ng-ink); }
html.ng-skin-active .checker-copy p { color:var(--ng-muted); }
html.ng-skin-active .progress-track { background:var(--ng-soft); }
html.ng-skin-active .progress-track span { background:var(--ng-button); box-shadow:0 0 16px rgba(var(--ng-accent-rgb),.28); }
html.ng-skin-active .check-orb-core { background:var(--ng-button); box-shadow:var(--ng-button-shadow); }
html.ng-skin-active .check-orb::before { border-top-color:var(--ng-accent); }
html.ng-skin-active .check-orb i { border-right-color:var(--ng-accent-2); }
html.ng-skin-active :is(.card,.game-card,.collector-card,.activity-card,.site-invite-card,.lottery-shell .draw-card,.lottery-shell .stat-card) { position:relative; overflow:hidden; isolation:isolate; }
html.ng-skin-active :is(.pk16-category-title,.section-title,h2.section-heading)::before { background:var(--ng-title-mark)!important; box-shadow:0 0 18px rgba(var(--ng-accent-rgb),.26)!important; }
html.ng-skin-active :is(.category-button.active,.go,.load-more,.retry-button,.button.primary,.trial-tools button,.game-card button,.activity-apply-button,.activity-submit-button,.ng-home-popup-action,.site-share-action.primary) {
  color:var(--ng-on-accent,#fff)!important; border-color:var(--ng-button-edge)!important; background-color:var(--ng-accent)!important;
  background-image:var(--ng-button-decoration),var(--ng-button)!important;
  background-position:center!important; background-size:100% 100%!important;
  box-shadow:var(--ng-button-shadow)!important;
}
html.ng-skin-active :is(button,a,input,textarea,select,.card,.game-card,.collector-card) {
  transition:transform calc(210ms / var(--ng-motion-speed)) cubic-bezier(.2,.8,.2,1),border-color calc(210ms / var(--ng-motion-speed)) ease,box-shadow calc(210ms / var(--ng-motion-speed)) ease,filter calc(170ms / var(--ng-motion-speed)) ease,background-color .28s ease;
}
html.ng-skin-active :is(button,[role="button"]):active { transform:translateY(1px) scale(.985); }
html.ng-skin-active :is(input,textarea,select) { color:var(--ng-ink)!important; border-radius:var(--ng-control-radius)!important; background:var(--ng-control)!important; caret-color:var(--ng-accent); }
html.ng-skin-active :is(input,textarea)::placeholder { color:var(--ng-muted)!important; opacity:1; }
html.ng-skin-active :is(input,textarea,select):disabled { color:color-mix(in srgb,var(--ng-muted) 72%,transparent)!important; background:color-mix(in srgb,var(--ng-control) 72%,var(--ng-page))!important; cursor:not-allowed; opacity:.76; }
html.ng-skin-active :is(button,[role="button"],a).is-loading,
html.ng-skin-active :is(button,[role="button"])[aria-busy="true"] { pointer-events:none; cursor:wait; filter:saturate(.72); }
html.ng-skin-active :is(button,[role="button"]):disabled,
html.ng-skin-active :is(button,[role="button"])[aria-disabled="true"] { color:color-mix(in srgb,var(--ng-muted) 82%,transparent)!important; border-color:color-mix(in srgb,var(--ng-line) 72%,transparent)!important; background:var(--ng-soft)!important; box-shadow:none!important; cursor:not-allowed; filter:none!important; opacity:.72; transform:none!important; }

/* Shared navigation, tabs, pagination, badges and data surfaces. */
html.ng-skin-active :is(.category-button,.trial-vendor-tab,.collector-category,[role="tab"],.collector-pagination button,.site-share-action) {
  color:var(--ng-muted)!important; border-color:var(--ng-line)!important; background:var(--ng-control)!important; box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
}
html.ng-skin-active :is(.category-button,.trial-vendor-tab,.collector-category,[role="tab"]):is(.active,[aria-selected="true"]),
html.ng-skin-active :is(.collector-pagination button,.site-share-action):hover {
  color:var(--ng-on-accent,#fff)!important; border-color:var(--ng-button-edge)!important; background-color:var(--ng-accent)!important;
  background-image:var(--ng-button-decoration),var(--ng-button)!important; background-size:100% 100%!important;
  box-shadow:var(--ng-button-shadow)!important;
}
html.ng-skin-active :is(.activity-hall-toggle,.page-shell .service-float-btn) {
  color:var(--ng-on-accent,#fff)!important;
  border-color:var(--ng-button-edge)!important;
  background-color:var(--ng-accent)!important;
  background-image:var(--ng-float-decoration),var(--ng-button)!important;
  background-position:center!important; background-size:100% 100%!important;
  box-shadow:var(--ng-float-shadow)!important;
}
html.ng-skin-active :is(.status,.badge,.tag,.source-badge,.overall-status,.card-badge,.best-label,.card-rec-badge) {
  border-color:color-mix(in srgb,var(--ng-accent) 30%,var(--ng-line))!important;
}
html.ng-skin-active :is(.is-success,.status-success,.toast-success) { --ng-state-color:var(--ng-success); }
html.ng-skin-active :is(.is-warning,.status-warning,.toast-warning) { --ng-state-color:var(--ng-warning); }
html.ng-skin-active :is(.is-error,.is-danger,.status-error,.toast-error) { --ng-state-color:var(--ng-danger); }
html.ng-skin-active :is(.toast,.ng-toast,.admin-toast)[class*="success"],
html.ng-skin-active :is(.toast,.ng-toast,.admin-toast)[class*="warning"],
html.ng-skin-active :is(.toast,.ng-toast,.admin-toast)[class*="error"] { border-left-color:var(--ng-state-color,var(--ng-accent))!important; }
html.ng-skin-active table { overflow:hidden; border-collapse:separate; border-spacing:0; }
html[data-ui-theme] :is(th,.table-head) { color:var(--ng-ink)!important; background:var(--ng-surface-decor),var(--ng-surface-soft,var(--ng-surface-fill))!important; }
html.ng-skin-active :is(td,th) { border-color:var(--ng-line)!important; }
html.ng-skin-active tbody tr:nth-child(even) { background:var(--ng-surface-decor),var(--ng-row-stripe)!important; }
html.ng-skin-active tbody tr:hover { background:var(--ng-row-hover)!important; }
html.ng-skin-active :is(.collector-pagination button,.pagination button,[aria-label*="上一页"],[aria-label*="下一页"]) { min-width:40px; min-height:40px; border-radius:var(--ng-control-radius)!important; }

/* Keep secondary copy readable in every dark/light combination. */
html.ng-skin-active :is(.card,.game-card,.collector-card,.activity-card,.activity-notice,.activity-apply-form,.popup-modal,.ng-home-popup-card,.lottery-shell) :is(h1,h2,h3,h4,strong) { color:var(--ng-ink); }
html.ng-skin-active :is(.card,.game-card,.collector-card,.activity-card,.activity-notice,.activity-apply-form,.site-share-panel,.popup-modal,.ng-home-popup-card,.lottery-shell) :is(p,small,label,.meta,.description) { color:var(--ng-muted); }

/* Announcement and modal system. */
html.ng-skin-active :is(.popup-overlay,.ng-home-popup-backdrop,.activity-hall-backdrop,.site-share-backdrop,.trial-game-overlay) { background:var(--ng-modal-overlay)!important; -webkit-backdrop-filter:blur(10px) saturate(112%); backdrop-filter:blur(10px) saturate(112%); }
html.ng-skin-active .page-shell .marquee-wrap::before {
  content:"";
  border:0;
  border-radius:50%;
  background:var(--ng-accent);
  box-shadow:0 0 0 5px rgba(var(--ng-accent-rgb),.11),0 0 12px rgba(var(--ng-accent-rgb),.18);
}
html.ng-skin-active .page-shell .marquee-wrap::after { background:linear-gradient(180deg,transparent,var(--ng-line),transparent); }
html.ng-skin-active .page-shell .marquee-text { color:var(--ng-ink); }
html.ng-skin-active .page-shell .marquee-wrap.is-clickable:hover { border-color:color-mix(in srgb,var(--ng-accent) 60%,transparent)!important; }
html.ng-skin-active :is(.popup-modal,.ng-home-popup-card,.activity-hall-panel,.site-share-panel) { position:relative; overflow:hidden; }
html.ng-skin-active :is(.popup-modal,.ng-home-popup-card,.activity-hall-panel,.site-share-panel)::before {
  content:none!important;
  display:none!important;
}
html.ng-skin-active .popup-header h3 { display:flex; align-items:center; gap:10px; }
html.ng-skin-active :is(.popup-header h3,.activity-hall-title strong,.site-share-head strong,.ng-home-popup-eyebrow)::before {
  content:var(--ng-broadcast); display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:12px;
  color:#fff; background:var(--ng-broadcast-bg); box-shadow:0 7px 18px rgba(var(--ng-accent-rgb),.25);
}
html.ng-skin-active :is(.activity-hall-title strong,.site-share-head strong) { display:flex; align-items:center; gap:10px; }
html.ng-skin-active .ng-home-popup-eyebrow::before { width:25px; height:25px; border-radius:9px; font-size:11px; }
html.ng-skin-active :is(.activity-hall-head,.site-share-head) { color:var(--ng-on-accent)!important; background:var(--ng-modal-head)!important; }
html.ng-skin-active :is(.popup-header button,.ng-home-popup-close,.activity-hall-close,.site-share-close,.trial-game-close) { display:grid!important; width:44px!important; height:44px!important; min-width:44px; min-height:44px; padding:0!important; place-items:center; border-radius:13px!important; line-height:0!important; }
html.ng-skin-active :is(.toast,.ng-toast,.admin-toast) { color:var(--ng-ink)!important; border:1px solid var(--ng-line)!important; border-left:4px solid var(--ng-accent)!important; border-radius:var(--ng-radius-small)!important; background:var(--ng-panel-solid)!important; box-shadow:var(--ng-shadow)!important; backdrop-filter:blur(16px); animation:ng-toast-enter .28s ease-out both; }
html.ng-skin-active :is(.empty,.collector-empty,.activity-empty,.empty-state) { position:relative; min-height:150px; padding:72px 20px 24px!important; color:var(--ng-muted)!important; border:1px dashed var(--ng-line)!important; border-radius:var(--ng-radius)!important; background:var(--ng-surface-decor),color-mix(in srgb,var(--ng-panel) 78%,transparent)!important; text-align:center; }
html.ng-skin-active :is(.empty,.activity-empty,.empty-state)::before { content:var(--ng-empty-glyph); position:absolute; top:22px; left:50%; display:grid; width:38px; height:38px; place-items:center; color:var(--ng-accent); border:1px solid var(--ng-line); border-radius:50%; background:var(--ng-soft); box-shadow:0 0 24px rgba(var(--ng-accent-rgb),.13); transform:translateX(-50%);  }
html.ng-skin-active .collector-empty::before { display:none; content:none; }
html.ng-skin-active :is(.skeleton,.is-placeholder>*,.loading-placeholder,.trial-game-loading,.lottery-inline-loading) { color:var(--ng-muted)!important; background:linear-gradient(90deg,color-mix(in srgb,var(--ng-panel-solid) 88%,transparent),var(--ng-skeleton-mid),color-mix(in srgb,var(--ng-panel-solid) 88%,transparent)) 0 0/220% 100%!important; }
html.ng-skin-active :is(.trial-game-loading,.lottery-inline-loading)::before { content:var(--ng-loading-glyph); display:inline-block; width:18px; height:18px; margin-right:9px; vertical-align:-4px; border:2px solid var(--ng-line); border-top-color:var(--ng-accent); border-radius:50%; }
.ng-feature-loader-status { position:fixed; z-index:var(--ng-layer-toast,240); left:50%; bottom:max(24px,env(safe-area-inset-bottom,0px)); width:min(420px,calc(100vw - 32px)); padding:12px 16px; color:var(--ng-ink,#17233b); border:1px solid color-mix(in srgb,var(--ng-danger,#e84f67) 52%,transparent); border-radius:14px; background:color-mix(in srgb,var(--ng-panel-solid,#fff) 94%,var(--ng-danger,#e84f67) 6%); box-shadow:0 16px 42px rgba(9,25,58,.2); font-size:14px; font-weight:700; line-height:1.5; text-align:center; transform:translateX(-50%); }
.ng-feature-loader-status[hidden] { display:none!important; }

@media (hover:hover) {
  html.ng-skin-active :is(.card,.game-card,.collector-card,.activity-card,.site-invite-card):hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--ng-accent) 62%,transparent)!important; box-shadow:0 23px 52px rgba(var(--ng-accent-rgb),.19)!important; }
  html.ng-skin-active :is(button,a,.category-button):hover { filter:brightness(1.06); }
}

html[data-motion="high"] { --ng-motion-speed:1.2; }
html[data-motion="standard"] { --ng-motion-speed:1; }
html[data-motion="low"] { --ng-motion-speed:.66; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none!important; transition-duration:.01ms!important; }
html.ng-page-hidden *,html.ng-page-hidden *::before,html.ng-page-hidden *::after { animation-play-state:paused!important; }

@property --ng-border-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes ng-border-orbit { to { --ng-border-angle:360deg; } }
@keyframes ng-toast-enter { from { opacity:0; transform:translate3d(18px,0,0); } to { opacity:1; transform:none; } }

@media (max-width:768px) {
  html.ng-skin-active { --ng-blur:0px; --ng-shadow:0 10px 25px rgba(22,59,118,.12); }
  html.ng-skin-active body { background-attachment:scroll; }
  html.ng-skin-active :is(.popup-overlay,.ng-home-popup-backdrop,.activity-hall-backdrop,.site-share-backdrop,.trial-game-overlay) { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  html.ng-skin-active :is(.popup-modal,.activity-hall-panel) { --ng-radius:22px; width:min(100%,calc(100vw - 20px))!important; max-height:calc(100dvh - 20px)!important; }
  html.ng-skin-active :is(.activity-hall-head,.site-share-head) { padding-left:16px!important; padding-right:12px!important; }
  html.ng-skin-active :is(.popup-close,.modal-close,.activity-hall-close,.site-share-close,.trial-game-close) { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; }
}

@media (max-width:430px) {
  html.ng-skin-active { --ng-radius:18px; --ng-radius-small:12px; }
  html.ng-skin-active :is(.card,.game-card,.collector-card,.activity-card) { min-width:0; }
  html.ng-skin-active :is(button,[role="button"],input,select) { min-height:44px; }
  html.ng-skin-active :is(.popup-header h3,.activity-hall-title strong,.site-share-head strong,.ng-home-popup-eyebrow)::before { width:30px; height:30px; }
  html.ng-skin-active :is(.empty,.collector-empty,.activity-empty,.empty-state) { min-height:128px; padding-top:66px!important; }
}

@media (prefers-reduced-motion: reduce) {
  html.ng-skin-active *,html.ng-skin-active *::before,html.ng-skin-active *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

.page-shell header {
  border-color: rgba(190, 206, 232, .86);
  background:
    radial-gradient(circle at 8% 0%, rgba(47, 107, 255, .07), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .93));
  box-shadow:
    0 16px 42px rgba(38, 72, 132, .105),
    inset 0 1px rgba(255, 255, 255, .95),
    inset 0 -1px rgba(47, 107, 255, .035);
}

.page-shell header::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(47, 107, 255, .07), transparent 28%),
    linear-gradient(90deg, transparent 62%, rgba(45, 193, 181, .045));
  pointer-events: none;
}

.page-shell .marquee-wrap {
  border-color: rgba(173, 197, 239, .76);
  background:
    linear-gradient(90deg, rgba(237, 244, 255, .96), rgba(255, 255, 255, .95) 28%, rgba(244, 251, 252, .95));
  box-shadow:
    0 8px 24px rgba(35, 72, 137, .075),
    inset 0 1px rgba(255, 255, 255, .9);
}

.page-shell .marquee-wrap::before {
  border: 1px solid rgba(47, 107, 255, .09);
  background: linear-gradient(135deg, #e7efff, #f1f6ff);
  box-shadow: 0 5px 14px rgba(47, 107, 255, .1);
}

.page-shell .nav-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  
  
}

.page-shell .category-button {
  border-color: rgba(196, 208, 228, .82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(244, 248, 255, .94));
  box-shadow:
    0 7px 18px rgba(38, 70, 126, .055),
    inset 0 1px rgba(255, 255, 255, .95);
}

.page-shell .category-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 16%;
  left: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 107, 255, .28), transparent);
  opacity: .65;
  pointer-events: none;
}

.page-shell .category-button:hover {
  border-color: rgba(87, 133, 236, .6);
  background: linear-gradient(145deg, #fff, #eef4ff);
  box-shadow: 0 11px 25px rgba(47, 107, 255, .12), inset 0 1px #fff;
}

.page-shell .category-button.active {
  border-color: rgba(255, 255, 255, .6);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .23), transparent 30%),
    linear-gradient(120deg, #225ee7 0%, #3978ff 54%, #69a5ff 100%);
  box-shadow:
    0 13px 30px rgba(47, 107, 255, .32),
    inset 0 1px rgba(255, 255, 255, .32);
}

.page-shell .category-button.active::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }

.page-shell .pk16-category-title {
  text-shadow: 0 6px 18px rgba(36, 69, 126, .085);
}

.page-shell .pk16-category-title::before {
  background: linear-gradient(180deg, #2f6bff, #65a2ff 60%, #2dc1b5);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, .07), 0 8px 18px rgba(47, 107, 255, .18);
}

.page-shell .pk16-category-title::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 16px;
  display: block;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6bff, #2dc1b5, transparent);
  opacity: .62;
}

.page-shell .card,
.page-shell .game-card,
.collector-card {
  overflow: hidden;
  border-color: rgba(201, 213, 231, .78);
  background:
    radial-gradient(circle at 100% 0, rgba(47, 107, 255, .075), transparent 39%),
    radial-gradient(circle at 0 100%, rgba(45, 193, 181, .035), transparent 34%),
    linear-gradient(145deg, #fff, #f9fbff);
  box-shadow:
    0 11px 28px rgba(35, 67, 122, .075),
    inset 0 1px rgba(255, 255, 255, .95);
}


.page-shell .card:hover,
.page-shell .game-card:hover,
.collector-card:hover {
  border-color: rgba(99, 142, 238, .56);
  box-shadow:
    0 17px 38px rgba(47, 107, 255, .14),
    inset 0 1px rgba(255, 255, 255, .98);
}

.page-shell .avatar {
  border-color: rgba(161, 186, 232, .66);
  background: linear-gradient(145deg, #fff, #edf3ff);
  box-shadow: 0 7px 18px rgba(45, 78, 137, .105), 0 0 0 4px rgba(47, 107, 255, .035);
}

.page-shell .go {
  border-color: rgba(148, 179, 242, .66);
  background: linear-gradient(135deg, #f6f9ff, #eaf2ff);
  box-shadow: 0 5px 14px rgba(47, 107, 255, .07), inset 0 1px #fff;
}

.page-shell .go:hover {
  background: linear-gradient(120deg, #245fe8, #4a86ff);
  box-shadow: 0 9px 20px rgba(47, 107, 255, .25), inset 0 1px rgba(255, 255, 255, .22);
}
.lottery-shell .panel,
.lottery-shell .draw-card,
.lottery-shell .stat-card {
  box-shadow: 0 13px 34px rgba(34, 67, 124, .085), inset 0 1px rgba(255, 255, 255, .78);
}

.lottery-shell .draw-card { background: radial-gradient(circle at 100% 0, rgba(47, 107, 255, .055), transparent 36%), #fff; }
.lottery-shell .panel { background: radial-gradient(circle at 0 0, rgba(45, 193, 181, .035), transparent 34%), #fff; }

html[data-theme="dark"] .page-shell header,
html[data-theme="dark"] .page-shell .marquee-wrap {
  border-color: rgba(66, 92, 133, .66);
  background:
    radial-gradient(circle at 8% 0, rgba(74, 126, 242, .12), transparent 36%),
    linear-gradient(145deg, rgba(17, 31, 52, .97), rgba(10, 23, 40, .97));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .page-shell .marquee-wrap {
  background:
    radial-gradient(circle at 8% 0, rgba(74, 126, 242, .12), transparent 36%),
    linear-gradient(145deg, rgba(17, 31, 52, .97), rgba(10, 23, 40, .97));
}

html[data-theme="dark"] .page-shell .marquee-text { color: #b8c8e0; }
html[data-theme="dark"] .page-shell .marquee-wrap::before {
  border-color: rgba(111, 151, 235, .24);
  color: #c7d7ff;
  background: linear-gradient(135deg, #1a3155, #172b49);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .page-shell .category-button,
html[data-theme="dark"] .page-shell .card,
html[data-theme="dark"] .page-shell .game-card,
html[data-theme="dark"] .collector-card {
  border-color: rgba(65, 91, 129, .62);
  background:
    radial-gradient(circle at 100% 0, rgba(72, 123, 235, .13), transparent 40%),
    radial-gradient(circle at 0 100%, rgba(42, 188, 174, .055), transparent 34%),
    linear-gradient(145deg, #12223a, #0d1b30);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .page-shell .category-button.active {
  border-color: rgba(122, 160, 248, .68);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .18), transparent 31%),
    linear-gradient(120deg, #1f55cf, #326de8 56%, #4f83ed);
}

html[data-theme="dark"] .page-shell .avatar {
  border-color: rgba(83, 115, 164, .72);
  background: linear-gradient(145deg, #1c3150, #132642);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25), 0 0 0 4px rgba(93, 137, 235, .055);
}

html[data-theme="dark"] .page-shell .go {
  border-color: rgba(78, 119, 192, .7);
  color: #bcd0ff;
  background: linear-gradient(135deg, #172b49, #19365e);
  box-shadow: inset 0 1px rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .collector-category-filters {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .collector-category-filters > strong { color: #aabbd3; }

html[data-theme="dark"] .collector-category-list button {
  border-color: rgba(66, 94, 135, .8);
  color: #becde1;
  background: linear-gradient(145deg, #172a46, #10213a);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .collector-category-list button:hover {
  border-color: #5f8de8;
  color: #e7efff;
  background: linear-gradient(145deg, #1a3356, #142a49);
}

html[data-theme="dark"] .collector-category-list button.is-active {
  border-color: rgba(128, 164, 255, .72);
  color: #fff;
  background: linear-gradient(135deg, #245fdf, #4b82f0);
  box-shadow: 0 8px 22px rgba(47, 107, 255, .25), inset 0 1px rgba(255, 255, 255, .15);
}

html[data-theme="dark"] .lottery-shell .draw-card,
html[data-theme="dark"] .lottery-shell .panel {
  background: radial-gradient(circle at 100% 0, rgba(73, 125, 235, .1), transparent 37%), #101e33;
}

@media (max-width: 768px) {
  .page-shell .card,
  .page-shell .game-card,
  .collector-card { box-shadow: 0 7px 18px rgba(35, 67, 122, .075), inset 0 1px rgba(255, 255, 255, .9); }
  .page-shell .card::before,
  .page-shell .game-card::before,
  .collector-card::before { opacity: .62; transform: scale(.8); transform-origin: top right; }
  html[data-theme="dark"] .page-shell .card,
  html[data-theme="dark"] .page-shell .game-card,
  html[data-theme="dark"] .collector-card { box-shadow: 0 8px 22px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .045); }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .category-button,
  .page-shell .card,
  .page-shell .game-card,
  .collector-card { transition-duration: 0s !important; }
}

.page-shell .category-buttons {
  position: relative;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* A single banner has no pagination control; multi-banner carousels keep it. */
.page-shell .carousel .dots[hidden] { display: none !important; }

.page-shell .category-button:not(.active) {
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, .82), transparent 42%),
    linear-gradient(145deg, rgba(244, 248, 255, .9), rgba(232, 240, 252, .82));
  box-shadow:
    0 6px 16px rgba(38, 70, 126, .045),
    inset 0 1px rgba(255, 255, 255, .82);
}

/*
 * NG Arcade UI layer
 * Visual-only enhancement shared by the public site, lottery, line checker,
 * control center and tenant admin. It deliberately does not change grids,
 * spacing, content order or application behavior.
 */

:root {
  --ng-layer-sticky: 30;
  --ng-layer-nav: 100;
  --ng-layer-float: 80;
  --ng-layer-overlay: 200;
  --ng-layer-modal: 220;
  --ng-layer-toast: 240;
  --arcade-blue: #2f6bff;
  --arcade-blue-2: #6a8cff;
  --arcade-cyan: #35dccb;
  --arcade-violet: #8d6bff;
  --arcade-gold: #ffcf65;
  --arcade-success: #28c995;
  --arcade-warning: #ffad42;
  --arcade-danger: #f05b72;
  --arcade-radius: 18px;
  --arcade-fast: 160ms;
  --arcade-normal: 260ms;
  --arcade-slow: 8s;
  --arcade-ease: cubic-bezier(.2, .72, .25, 1);
  --arcade-line: rgba(97, 137, 226, .28);
  --arcade-panel: rgba(255, 255, 255, .86);
  --arcade-glow: 0 12px 34px rgba(47, 107, 255, .13);
  --arcade-inset: inset 0 1px rgba(255, 255, 255, .82);
}

html[data-theme="dark"] {
  --arcade-line: rgba(92, 133, 205, .48);
  --arcade-panel: rgba(13, 27, 47, .9);
  --arcade-glow: 0 15px 38px rgba(0, 0, 0, .28), 0 0 28px rgba(47, 107, 255, .045);
  --arcade-inset: inset 0 1px rgba(255, 255, 255, .065);
}

html {
  background: #f1f5fb;
  transition: background-color var(--arcade-normal) ease, color var(--arcade-normal) ease;
}

html,
body {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.page-shell,
.page-shell > *,
.collector-catalog-panel,
.collector-catalog-shell,
.lottery-inline-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.page-shell img,
.page-shell video,
.page-shell iframe { max-width: 100%; }

/* The public theme owns the browser's bottom/safe-area canvas.  Keep the
   generic admin dark canvas away from themed public pages; otherwise this
   later shorthand overrides --ng-page and exposes a navy/black strip below
   the transparent footer on mobile and short pages. */
html[data-theme="dark"]:not([data-ui-theme]) { background: #06101e; }

body {
  position: relative;
  isolation: isolate;
  background: transparent;
  transition: background-color var(--arcade-normal) ease, color var(--arcade-normal) ease;
}
@keyframes arcade-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Shared glass and energy surfaces. */
:where(.page-shell header, .page-shell .marquee-wrap, .lottery-shell .site-header,
  .lottery-shell .draw-card, .lottery-shell .panel, .lottery-shell .stat-card,
  .line-shell, .panel, .stat-card, .site-summary-card, .control-card) {
  border-color: var(--arcade-line);
  box-shadow: var(--arcade-glow), var(--arcade-inset);
}

:where(.page-shell header, .page-shell .marquee-wrap, .lottery-shell .site-header,
  .lottery-shell .draw-card, .lottery-shell .panel, .line-shell, .panel,
  .stat-card, .collector-card, .site-summary-card) {
  transition: border-color var(--arcade-normal) ease, box-shadow var(--arcade-normal) ease,
    background-color var(--arcade-normal) ease, transform var(--arcade-normal) var(--arcade-ease);
}

/* Header energy line; sits inside the existing box and never affects layout. */
:where(.page-shell header, .lottery-shell .site-header, .topbar) {
  position: relative;
  overflow: hidden;
}

:where(.page-shell header, .lottery-shell .site-header, .topbar)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--arcade-blue), var(--arcade-cyan), transparent);
  background-size: 200% 100%;
  opacity: .72;
  animation: none;
  pointer-events: none;
}

/* Existing cards keep their dimensions; only their material and feedback change. */
:where(.page-shell .card, .page-shell .game-card, .collector-card,
  .lottery-shell .stat-card, .route-card,
  .site-summary-card, .rank-row, .metric-box) {
  border-color: var(--arcade-line);
  box-shadow: var(--arcade-glow), var(--arcade-inset);
  transition: transform var(--arcade-normal) var(--arcade-ease), border-color var(--arcade-normal) ease,
    box-shadow var(--arcade-normal) ease, filter var(--arcade-normal) ease;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  :where(.page-shell .card, .page-shell .game-card, .collector-card,
    .lottery-shell .stat-card, .route-card,
    .site-summary-card):hover {
    border-color: rgba(90, 137, 239, .7);
    box-shadow: 0 17px 40px rgba(47, 107, 255, .16), 0 0 0 1px rgba(53, 220, 203, .08), var(--arcade-inset);
    transform: translateY(-2px);
  }
}

/* Navigation and category controls use one game-console language. */
:where(.page-shell .category-button, .lottery-shell .main-nav a, .collector-category-list button,
  .nav-item, .tab-button, [role="tab"]) {
  position: relative;
  isolation: isolate;
  border-color: var(--arcade-line);
  transition: color var(--arcade-fast) ease, border-color var(--arcade-fast) ease,
    background var(--arcade-normal) ease, box-shadow var(--arcade-normal) ease,
    transform var(--arcade-fast) var(--arcade-ease);
}

:where(.page-shell .category-button.active, .lottery-shell .main-nav a.active,
  .lottery-shell .main-nav a[aria-current="page"], .collector-category-list button.is-active,
  .nav-item.is-active, .tab-button.is-active, [role="tab"][aria-selected="true"]) {
  border-color: rgba(137, 171, 255, .72);
  background-image: linear-gradient(115deg, #2259d8, #407cff 45%, #735fff 76%, #2ebfb5);
  background-size: 100% 100%;
  box-shadow: 0 10px 28px rgba(47, 107, 255, .28), inset 0 1px rgba(255, 255, 255, .24);
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  :where(.page-shell .category-button, .lottery-shell .main-nav a, .collector-category-list button,
    .nav-item, [role="tab"]):hover { transform: translateY(-1px); }
}

/* Arcade-style icon sockets. */
:where(.category-icon, .nav-icon, .stat-icon, .collector-icon,
  .brand-mark, .result-icon, .service-icon, .theme-icon) {
  border: 1px solid rgba(120, 158, 242, .35);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 7px 18px rgba(38, 88, 196, .12);
  text-shadow: 0 0 14px currentColor;
  transition: transform var(--arcade-normal) var(--arcade-ease), box-shadow var(--arcade-normal) ease;
}

:where(.category-button.active, .nav-item.is-active, [role="tab"][aria-selected="true"]) :where(.category-icon, .nav-icon) {
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 0 0 4px rgba(255,255,255,.07), 0 0 22px rgba(100, 149, 255, .34);
}

/* Buttons keep their original size and position. */
:where(button, .button, .go, .back-link, .retry-button) {
  position: relative;
  overflow: hidden;
  transition: transform var(--arcade-fast) var(--arcade-ease), box-shadow var(--arcade-normal) ease,
    border-color var(--arcade-fast) ease, filter var(--arcade-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

:where(.button.primary, .go, button[type="submit"]) {
  background-image: linear-gradient(115deg, #245ddb, #3f7dff 48%, #735fff 77%, #33c9bb);
  background-size: 220% 100%;
  box-shadow: 0 10px 24px rgba(47, 107, 255, .24), inset 0 1px rgba(255,255,255,.24);
}

@media (hover: hover) and (pointer: fine) {
  :where(.button.primary, .go, button[type="submit"]):hover {
    background-position: 100% 50%;
    box-shadow: 0 13px 30px rgba(47, 107, 255, .32), 0 0 18px rgba(53, 220, 203, .1), inset 0 1px rgba(255,255,255,.28);
  }
}

:where(button, .button, .go, .back-link, .retry-button):active,
.ng-interaction-pressed { scale: .975; filter: brightness(.98); }

:where(button, .button, .go, .back-link, .retry-button):disabled {
  box-shadow: none;
  filter: grayscale(.2) saturate(.65);
}

/* Tags and live statuses: only important items breathe. */
:where(.status, .badge, .source-badge, .overall-status, .card-badge, .best-label) {
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.16);
}

:where(.overall-status.is-checking, .source-badge, .card-badge) {
  animation: none;
}

/* Forms become a quiet control console. */
:where(input, select, textarea) {
  transition: border-color var(--arcade-fast) ease, box-shadow var(--arcade-fast) ease,
    background-color var(--arcade-normal) ease;
}

html[data-ui-theme] body :where(input, select, textarea):focus {
  border-color: var(--ng-accent, #245fce) !important;
  box-shadow: none !important;
  outline: 2px solid var(--ng-accent, #245fce);
  outline-offset: 2px;
}

/* Modals and overlays gain a short, consistent entrance without moving layout. */
:where(.modal, .popup-modal, .player-panel) {
  border-color: var(--arcade-line);
  box-shadow: 0 24px 70px rgba(6, 17, 37, .28), 0 0 0 1px rgba(95, 140, 235, .08), var(--arcade-inset);
  animation: arcade-rise 240ms var(--arcade-ease) both;
}

:where(.modal-backdrop, .popup-backdrop) {
  
}

/* Loading states share an energy sweep. */
:where(.skeleton, .is-placeholder > *, .loading-placeholder) {
  background-image: linear-gradient(100deg, rgba(116, 145, 194, .11) 20%, rgba(88, 137, 240, .22) 42%, rgba(53, 220, 203, .12) 52%, rgba(116, 145, 194, .11) 72%);
  background-size: 240% 100%;
}

/* Floating actions: compact energy cores that stay clear of the page content. */
:where(.theme-toggle, .service-float, .customer-service-float, .floating-service, .floating-button) {
  border-color: rgba(116, 158, 250, .72);
  box-shadow: 0 0 0 6px rgba(47, 107, 255, .055), 0 12px 30px rgba(20, 66, 166, .28), inset 0 1px rgba(255,255,255,.26);
  animation: none;
}

/* The actual home-page service launcher uses its own class name. */
.page-shell .service-float-btn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(29, 79, 190, .28), 0 0 0 3px rgba(72, 128, 255, .05), inset 0 1px rgba(255,255,255,.24);
  animation: none;
}

.page-shell .service-float-btn::after { display: none !important; }
.page-shell .service-float-btn span { width: 21px; height: 18px; flex-basis: 21px; }
.page-shell .service-float-btn b {
  display: none !important;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-width: 2px;
  font-size: 10px;
}

/* One persistent service greeting per page visit. Its position is measured
   from the mobile action-hub toggle (or the desktop service action fallback)
   so theme, hub and safe-area layouts cannot detach it from its action. */
.service-greeting {
  position: fixed;
  z-index: calc(var(--ng-layer-float, 80) + 8);
  display: inline-flex;
  max-width: min(286px, calc(100vw - 92px));
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 18%, rgba(255,255,255,.8));
  border-radius: 17px;
  color: var(--ng-ink, #14223a);
  background: color-mix(in srgb, var(--ng-panel-solid, #fff) 94%, transparent);
  box-shadow: 0 12px 32px rgba(18, 42, 84, .18), inset 0 1px rgba(255,255,255,.74);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translateX(8px) scale(.97);
  transform-origin: right center;
  transition: opacity .24s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.service-greeting.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.service-greeting > span { min-width: 0; font-size: 14px; font-weight: 780; letter-spacing: .01em; white-space: nowrap; }
.service-greeting > b { display: inline-grid; flex: 0 0 auto; width: 20px; height: 20px; place-items:center; line-height: 1; transform-origin: 75% 80%; animation: ngServiceWave 1.15s ease-in-out 2; }
.service-greeting > b svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.service-greeting::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 14%, rgba(255,255,255,.8));
  border-right: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 14%, rgba(255,255,255,.8));
  background: color-mix(in srgb, var(--ng-panel-solid, #fff) 96%, transparent);
  transform: translateY(-50%) rotate(45deg);
}
.service-greeting[data-placement="above"] { transform-origin: right bottom; }
.service-greeting[data-placement="above"]::after { top: auto; right: 17px; bottom: -6px; transform: rotate(135deg); }
html[data-theme="dark"] .service-greeting,
html.ng-skin-active[data-mode="dark"] .service-greeting {
  border-color: color-mix(in srgb, var(--ng-accent, #6e75ff) 38%, rgba(255,255,255,.14));
  color: #f2f6ff;
  background: color-mix(in srgb, var(--ng-panel-solid, #101b30) 91%, transparent);
  box-shadow: 0 15px 38px rgba(0, 7, 23, .4), inset 0 1px rgba(255,255,255,.08);
}
html[data-theme="dark"] .service-greeting::after,
html.ng-skin-active[data-mode="dark"] .service-greeting::after {
  border-color: color-mix(in srgb, var(--ng-accent, #6e75ff) 32%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--ng-panel-solid, #101b30) 94%, transparent);
}
@keyframes ngServiceWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(16deg); }
  50% { transform: rotate(-8deg); }
  75% { transform: rotate(12deg); }
}
@media (max-width: 768px) {
  .service-greeting { max-width: min(250px, calc(100vw - 78px)); min-height: 44px; padding: 9px 13px; border-radius: 15px; }
  .service-greeting > span { font-size: 13px; }
  .service-greeting > b { font-size: 18px; }
}
body:is(.trial-game-open,.collector-detail-open,.theme-service-open,.activity-hall-open) .service-greeting { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .service-greeting { transition-duration: .01ms; }
  .service-greeting > b { animation: none; }
}

/* Keep the carousel indicators visually compact while giving touch users a
   reliable hit target. The base theme rendered the whole button at 10px. */
.page-shell .dots { gap: 0; }
.page-shell .dot,
.page-shell .dot.active {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.page-shell .dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(15, 40, 90, .2);
  border-radius: 50%;
  background: rgba(15, 40, 90, .15);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.page-shell .dot.active::before {
  background: var(--primary, #2f6bff);
  box-shadow: 0 0 12px rgba(31, 111, 235, .35);
  transform: translate(-50%, -50%) scale(1.18);
}

/* Banner artwork keeps its crop without an extra framed/glowing backplate. */
.page-shell .carousel-wrap {
  position: relative;
}

.page-shell .carousel-wrap::after {
  content: none;
  display: none;
}

/* Dark-theme material overrides. */
html[data-theme="dark"] :where(.page-shell header, .page-shell .marquee-wrap, .lottery-shell .site-header,
  .lottery-shell .draw-card, .lottery-shell .panel, .lottery-shell .stat-card) {
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  border-color: rgba(75, 108, 158, .66);
}

html[data-theme="dark"] :where(.page-shell .card, .page-shell .game-card,
  .collector-card, .lottery-shell .stat-card, .route-card) {
  border-color: rgba(67, 98, 143, .7);
  box-shadow: 0 15px 36px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.055);
}

/* Line selector stays exceptionally light and fast. */
.line-hero {
  background:
    radial-gradient(circle at 86% 16%, rgba(70, 227, 212, .24), transparent 26%),
    linear-gradient(125deg, #1f51cf, #3c77ff 55%, #745fff);
  background-size: 115% 115%;
  animation: none;
}

.progress-track span,
.health-bar i,
.collector-progress i {
  background-image: linear-gradient(90deg, var(--arcade-blue), var(--arcade-violet), var(--arcade-cyan), var(--arcade-blue));
  background-size: 220% 100%;
}

/* Mobile and touch devices keep the same look with fewer expensive effects. */
@media (max-width: 900px), (pointer: coarse) {
  :where(.page-shell .card, .page-shell .game-card, .collector-card,
    .lottery-shell .stat-card, .route-card, .site-summary-card) {
    will-change: auto;
  }
  :where(.theme-toggle, .service-float, .customer-service-float, .floating-service, .floating-button) {
    animation-duration: 4.5s;
  }
}

@media (max-width: 560px) {
  .page-shell .carousel-wrap::after { animation: none; opacity: .24; transform: translateX(270%) skewX(-18deg); }
  :where(.page-shell header, .page-shell .marquee-wrap, .lottery-shell .site-header,
    .lottery-shell .draw-card, .lottery-shell .panel, .line-shell, .panel,
    .stat-card, .collector-card, .site-summary-card) {
    
  }

  .page-shell .service-float-btn {
    right: 14px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
  }
  .page-shell .service-float-btn {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 50%;
  }
  .page-shell .service-float-btn span { transform: scale(.9); }

  /* Dense mobile grids retain their column count, but primary actions remain
     large enough for dependable touch interaction. */
  .page-shell .go { min-height: 36px; }
  .page-shell .game-card button { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .carousel-wrap::after, :where(.page-shell header, .lottery-shell .site-header, .topbar)::after, :where(.overall-status.is-checking, .source-badge, .card-badge), :where(.theme-toggle, .service-float, .customer-service-float, .floating-service, .floating-button), :where(.skeleton, .is-placeholder > *, .loading-placeholder), :where(.page-shell .category-button.active, .lottery-shell .main-nav a.active,
    .collector-category-list button.is-active, .nav-item.is-active){
    animation: none !important;
  }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Movie/adult catalogs use the same section-heading language as the fixed categories. */
.page-shell .collector-page-heading {
  position: relative;
  margin: 0;
}

html[data-theme="dark"] .page-shell .collector-page-heading .collector-page-title { color: #edf4ff; }

.ng-interaction-paused *,
.ng-interaction-paused *::before,
.ng-interaction-paused *::after { animation-play-state: paused !important; }

@supports not (color: color-mix(in srgb, white, black)) {
  :where(.status, .badge, .source-badge, .overall-status, .card-badge, .best-label) {
    border-color: rgba(99, 133, 198, .35);
  }
}

/* Recommended-platform card polish.
 * This layer intentionally changes only visual treatment; grid dimensions,
 * content order and click targets remain owned by the existing layout CSS.
 */
.page-shell .card-grid > .card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(165, 190, 238, .72);
  background:
    radial-gradient(circle at 92% 4%, rgba(61, 122, 255, .13), transparent 31%),
    radial-gradient(circle at 8% 100%, rgba(40, 205, 190, .06), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .94));
  box-shadow:
    0 10px 28px rgba(34, 77, 151, .10),
    inset 0 1px rgba(255, 255, 255, .98),
    inset 0 -1px rgba(87, 128, 210, .08);
}

/* Card light is owned by the shared theme motion layer; badges stay above it. */

.page-shell .card-grid > .card > :not(.card-rec-badge) {
  position: relative;
  z-index: 1;
}

.page-shell .card-grid > .card .avatar {
  border: 2px solid rgba(125, 163, 238, .48);
  background: linear-gradient(145deg, #fff, #edf4ff);
  box-shadow:
    0 0 0 5px rgba(65, 121, 241, .055),
    0 8px 18px rgba(30, 77, 163, .14),
    inset 0 1px rgba(255, 255, 255, .95);
  filter: saturate(1.04) contrast(1.02);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease, filter .28s ease;
}

.page-shell .card-grid > .card .go {
  position: relative;
  overflow: hidden;
  border-color: rgba(112, 157, 247, .54);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(232, 241, 255, .94));
  color: #245bd5;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .96),
    0 5px 14px rgba(47, 107, 255, .09);
  text-shadow: 0 1px rgba(255, 255, 255, .82);
}

/* Semantic corner badges: upright icons with a dedicated, unclipped text row. */
.page-shell .card-grid > .card .card-rec-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 8;
  display: inline-flex;
  min-width: 48px;
  min-height: 20px;
  max-width: calc(100% - 10px);
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px !important;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    0 4px 10px rgba(30, 71, 148, .18);
  animation: none;
  isolation: isolate;
  transform: none;
}

.page-shell .card-grid > .card .card-rec-badge::before {
  content: none;
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 0;
  transform: none;
  filter: none;
}

.page-shell .card-grid > .card .rec-type-1,
.page-shell .card-grid > .card .badge-color-popularity {
  background: linear-gradient(120deg, #ff7a18 0%, #ff9f0a 52%, #ff6a18 100%);
}

.page-shell .card-grid > .card .badge-color-hot {
  background: linear-gradient(120deg, #d91f3e 0%, #f33f32 45%, #ff8b20 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .4), 0 4px 11px rgba(222, 43, 46, .26);
}

/* AI-generated cutouts stay complete; labels remain selectable HTML text. */
.page-shell .card-grid > .card .badge-effect-hot::before {
  content: "";
  background: url("/badge-icons-ai/v1/hot.webp") center / contain no-repeat;
}

.page-shell .card-grid > .card .badge-effect-like::before {
  content: "";
  background: url("/badge-icons-ai/v1/recommended.webp") center / contain no-repeat;
}

.page-shell .card-grid > .card .badge-effect-verified {
  border-color: rgba(205, 233, 255, .94);
  background: linear-gradient(120deg, #1559d7 0%, #167df0 48%, #12a4f3 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 4px 11px rgba(25, 102, 221, .3);
}

.page-shell .card-grid > .card .badge-effect-verified::before {
  content: "";
  background: url("/badge-icons-ai/v1/official.webp") center / contain no-repeat;
}

.page-shell .card-grid > .card .rec-type-2,
.page-shell .card-grid > .card .badge-color-premium {
  background: linear-gradient(120deg, #6536de 0%, #8b4df2 48%, #cf4fc4 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .4), 0 4px 11px rgba(100, 52, 211, .26);
}

.page-shell .card-grid > .card .badge-color-verified {
  background: linear-gradient(120deg, #1559d7 0%, #167df0 48%, #12a4f3 100%);
}

@media (hover: hover) and (pointer: fine) {
  .page-shell .card-grid > .card:hover {
    border-color: rgba(91, 139, 239, .78);
    box-shadow:
      0 17px 38px rgba(47, 107, 255, .17),
      0 0 0 1px rgba(49, 210, 194, .08),
      inset 0 1px rgba(255, 255, 255, .98);
    transform: translateY(-3px);
  }

  .page-shell .card-grid > .card:hover .avatar {
    box-shadow:
      0 0 0 6px rgba(65, 121, 241, .09),
      0 10px 24px rgba(30, 77, 163, .21),
      0 0 20px rgba(65, 121, 241, .12);
    filter: saturate(1.12) contrast(1.025);
    transform: var(--ng-platform-logo-hover, translateY(-2px) scale(1.045) rotate(1deg));
  }

  .page-shell .card-grid > .card:hover .go {
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(115deg, #245ddb, #3f7dff 55%, #6259ed);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 107, 255, .26), inset 0 1px rgba(255, 255, 255, .28);
    text-shadow: 0 1px 2px rgba(17, 48, 116, .34);
  }

}

html[data-theme="dark"] .page-shell .card-grid > .card {
  border-color: rgba(69, 105, 159, .78);
  background:
    radial-gradient(circle at 92% 4%, rgba(66, 119, 246, .18), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(37, 203, 189, .07), transparent 35%),
    linear-gradient(145deg, rgba(17, 34, 57, .98), rgba(11, 25, 43, .97));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .25),
    inset 0 1px rgba(255, 255, 255, .055),
    inset 0 -1px rgba(28, 56, 93, .68);
}

html[data-theme="dark"] .page-shell .card-grid > .card .avatar {
  border-color: rgba(87, 132, 205, .68);
  background: linear-gradient(145deg, #1c3557, #10233c);
  box-shadow: 0 0 0 5px rgba(75, 127, 235, .08), 0 9px 21px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .page-shell .card-grid > .card .go {
  border-color: rgba(74, 112, 170, .86);
  background: linear-gradient(180deg, rgba(25, 50, 82, .96), rgba(16, 34, 58, .98));
  color: #a9c5ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065), 0 6px 14px rgba(0, 0, 0, .16);
  text-shadow: none;
}

@keyframes platform-badge-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes platform-badge-flame {
  0%, 100% { opacity: .9; transform: translateY(0) rotate(-2deg) scale(.96, 1); }
  50% { opacity: 1; transform: translateY(-1px) rotate(2deg) scale(1.03, 1.06); }
}

@keyframes platform-badge-like {
  0%, 68%, 100% { transform: translateY(0) rotate(0) scale(1); }
  76% { transform: translateY(-1px) rotate(-8deg) scale(1.16); }
  84% { transform: translateY(0) rotate(4deg) scale(.98); }
  92% { transform: rotate(0) scale(1.07); }
}

@keyframes platform-badge-verified {
  0%, 72%, 100% { opacity: .94; transform: scale(1); filter: drop-shadow(0 0 2px rgba(210, 240, 255, .64)); }
  82% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(210, 240, 255, .96)); }
}

@media (max-width: 600px) {
  .page-shell .card-grid > .card .avatar {
    box-shadow: 0 0 0 3px rgba(65, 121, 241, .055), 0 5px 12px rgba(30, 77, 163, .12);
  }

  .page-shell .card-grid > .card:has(> .card-rec-badge) {
    /* Reserve the badge row even when the legacy compact-card skin is active. */
    padding-top: 32px !important;
  }

  .page-shell .card-grid > .card .card-rec-badge {
    top: 6px;
    right: 6px;
    min-width: 48px;
    min-height: 20px;
    gap: 2px;
    padding: 1px 4px;
    font-size: 11px;
  }

  .page-shell .card-grid > .card :is(.badge-effect-hot, .badge-effect-like, .badge-effect-verified)::before {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .card-grid > .card .card-rec-badge {
    animation: none !important;
  }

  .page-shell .card-grid > .card :is(.badge-effect-hot, .badge-effect-like, .badge-effect-verified)::before {
    animation: none !important;
  }

  .page-shell .card-grid > .card .avatar,
  .page-shell .card-grid > .card .go {
    transition: none !important;
  }
}

@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));
  }

  /* 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,
    [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,
    [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,
    [role="tab"]
  ):is(.active,.is-active,[aria-selected="true"])::after {
    height:2px;
    opacity:1;
    
  }

  html.ng-skin-active :is(
    .go,.load-more,.retry-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,.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;
  }

  /* Cards get a restrained corner language rather than a second moving layer. */
  html.ng-skin-active :is(.card,.game-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(.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-color:var(--ng-accent)!important;
    background-image:var(--ng-float-decoration),var(--ng-button)!important;
    background-position:center!important;
    background-size:100% 100%!important;
    box-shadow:var(--ng-float-shadow)!important;
  }
  html.ng-skin-active :is(.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;
  }

  /* Deterministic floating-action stack. Optional launchers no longer overlap. */
  body { --ng-float-bottom:calc(16px + env(safe-area-inset-bottom,0px)); --ng-float-step:60px; }
  .page-shell .service-float-btn { bottom:var(--ng-float-bottom)!important; }
  .activity-hall-toggle { bottom:calc(var(--ng-float-bottom) + var(--ng-float-step))!important; }
  body.theme-has-service .activity-hall-toggle { bottom:calc(var(--ng-float-bottom) + var(--ng-float-step) * 2)!important; }
  html.ng-skin-active :is(.activity-hall-toggle,.page-shell .service-float-btn):active::before {
  }
  html.ng-skin-active .page-shell .service-float-btn span,
  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-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);
  }
  html[data-ui-theme="cosmic"] :is(.category-button,.go,.activity-hall-toggle,.service-float-btn) { border-radius:999px!important; }
  html[data-ui-theme="aurora"] :is(.category-button,.go,.activity-hall-toggle,.service-float-btn) { border-radius:999px!important; }
  html[data-ui-theme="particles"] :is(.category-button,.go,.activity-hall-toggle,.service-float-btn) { border-radius:8px!important; }
  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,.service-float-btn) { border-radius:10px!important; }
  html[data-ui-theme="arcade"] :is(.category-button,.go,.activity-hall-toggle,.service-float-btn) { border-radius:14px!important; border-bottom-width:3px!important; }
  html[data-ui-theme="gold"] :is(.category-button,.go,.activity-hall-toggle,.service-float-btn) { border-radius:8px!important; }
  html[data-mobile-motion="low"] :is(.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; }
}

@media (max-width:430px) {
  html.ng-skin-active :is(.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,.popup-modal) { max-width:calc(100vw - 20px)!important; }
}

/* Mobile usability baseline: visual density may vary by skin, but every
   actionable control keeps a dependable touch target and visible focus ring. */
@media (max-width:768px), (pointer:coarse) {
  :is(
    .page-shell .category-button,.page-shell .load-more,.retry-button,
    .collector-pagination button,
    .collector-episode,.collector-episodes-more,
    .activity-apply-button,.activity-submit-button,.site-share-action,
    .ng-home-popup-action,.button
  ) { min-height:44px!important; }

  :is(
    .activity-hall-toggle,.site-share-button,
    .page-shell .service-float-btn,.ng-home-popup-close,.activity-hall-close,
    .site-share-close,.popup-close,.trial-game-close
  ) { min-width:44px!important; min-height:44px!important; }

  :is(.popup-overlay,.ng-home-popup-backdrop,.activity-hall-backdrop,.site-share-backdrop) { overscroll-behavior:contain; }
  :is(.popup-modal,.ng-home-popup-card,.activity-hall-panel) {
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }

}

@media (max-width:430px) {
  .page-shell .trial-featured,
  .page-shell .game-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .page-shell .card { min-height:124px; }
  .page-shell .go { font-size:11px; }
}

/* Dense recommendation and trial grids need compact, clearly separated visual
   actions so a CTA no longer consumes almost half of a small card. Keep this
   block after shared control rules so six-skin decoration cannot enlarge it. */
@media (max-width:900px), (pointer:coarse) {
  .page-shell .card-grid > .card .go {
    min-height:34px!important;
    padding:5px 8px!important;
    font-size:11px;
    line-height:1;
  }

  .page-shell :is(.trial-featured,.game-grid) .game-card button {
    min-height:32px!important;
    padding:4px 6px!important;
    font-size:11px;
    line-height:1;
  }
}

@media (max-width:430px) {
  .page-shell .card-grid > .card .go { min-height:32px!important; }
  .page-shell :is(.trial-featured,.game-grid) .game-card button { min-height:30px!important; }
}

@media (max-width:360px) {
  .page-shell .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-shell .trial-featured,
  .page-shell .game-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
  .page-shell .game-card { padding:3px; }
  .page-shell .category-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce) {
  html.ng-skin-active :is(.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; }
}

/*
 * NG public design system
 * Structural tokens and shared interaction states only. Theme files continue
 * to own color, material, illustration and motion language.
 */
:root {
  --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ui-text-sm: 12px;
  --ui-text-body: 14px;
  --ui-text-title: 18px;
  --ui-shadow-card: 0 1px 2px rgba(25, 40, 70, .04), 0 10px 30px rgba(25, 40, 70, .07);
  --ui-shadow-hover: 0 2px 4px rgba(25, 40, 70, .05), 0 16px 38px rgba(25, 40, 70, .11);
  --ui-content-max: 1200px;
  --ui-section-max: 1180px;
  --ui-gutter: 20px;
  --ui-section-inner: 20px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-control-sm: 36px;
  --ui-control-md: 42px;
  --ui-control-lg: 48px;
  --ui-search-height: 42px;
  --ui-search-action-width: 86px;
  --ui-search-gap: 10px;
  --ui-category-rail-height: 40px;
  --ui-category-control-height: 32px;
  --ui-category-font-size: 12px;
  --ui-icon-sm: 18px;
  --ui-icon-md: 22px;
  --ui-icon-lg: 24px;
  --ui-radius-sm: var(--ng-control-radius, 10px);
  --ui-radius-md: var(--ng-radius-small, 14px);
  --ui-radius-lg: var(--ng-radius, 20px);
  --ui-card-radius: 20px;
  --ui-control-radius: 12px;
  --ui-motion-fast: 120ms;
  --ui-motion-base: 180ms;
  --ui-motion-slow: 240ms;
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-float-size: 52px;
  --ui-close-size: 44px;
}

html,
body,
#app,
.page-shell {
  min-width: 0;
  max-width: 100%;
}

/* Keep the document as the only vertical scroll container. The compiled
   shell styles use overflow-x:hidden, which implicitly turns overflow-y into
   auto and traps wheel/touch scrolling inside the full-height trial list. */
.page-shell,
.cards-scroll,
body.trial-direct-mode .trial-section {
  overflow-x: clip;
  overflow-y: visible;
}

html,
body {
  overflow-x: clip;
}

html[data-ui-theme] *,
html[data-ui-theme] *::before,
html[data-ui-theme] *::after {
  box-sizing: border-box;
}

html[data-ui-theme] :where(img, video, iframe, canvas, svg) {
  max-width: 100%;
}

html[data-ui-theme] :where(button, input, select, textarea) {
  font: inherit;
}

html[data-ui-theme] body {
  font-family: var(--ui-font-sans);
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] {
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .16), 0 12px 32px rgba(0, 0, 0, .22);
  --ui-shadow-hover: 0 2px 4px rgba(0, 0, 0, .18), 0 18px 42px rgba(0, 0, 0, .3);
}

html[data-ui-theme] :where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--ng-accent, #2f6bff);
  outline-offset: 3px;
}

html[data-ui-theme] :where(button, input, select, textarea, [role="button"]):disabled,
html[data-ui-theme] :where(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed !important;
  filter: saturate(.55) !important;
  opacity: .56 !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-ui-theme] :where(button, [role="button"])[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

html[data-ui-theme] :where(.page-shell, .collector-catalog-shell) {
  overflow-wrap: anywhere;
}

html[data-ui-theme] .page-shell > :where(header, .carousel-container, .marquee-wrap, .nav-section, .section, footer),
html[data-ui-theme] :where(.collector-catalog-shell) {
  width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-content-max));
  margin-inline: auto;
}

html[data-ui-theme] .page-shell #cardsScroll > .section,
html[data-ui-theme] .page-shell > :is(.lottery-inline-panel, .collector-catalog-panel) {
  width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-section-max)) !important;
  margin-inline: auto !important;
}

html[data-ui-theme] .page-shell #cardsScroll > .section {
  padding-inline: var(--ui-section-inner) !important;
}

html[data-ui-theme] body.lottery-inline-mode .page-shell .lottery-inline-panel {
  padding-inline: 0 !important;
  overflow: hidden !important;
}

html[data-ui-theme] body.lottery-inline-mode .page-shell :where(
  .lottery-inline-frame-shell,
  .lottery-inline-frame
) {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Navigation, tab and filter families share dimensions without sharing skins. */
html[data-ui-theme] :where(
  .category-button,
  .collector-category-tab,
  .trial-vendor-tab,
  [role="tab"]
) {
  min-width: 0;
  min-height: var(--ui-control-md) !important;
  padding-block: var(--ui-space-2) !important;
  line-height: 1.2;
  transition-duration: var(--ui-motion-fast) !important;
  transition-timing-function: var(--ui-ease) !important;
}

html[data-ui-theme] :where(
  .category-button,
  .collector-category-tab,
  .trial-vendor-tab,
  [role="tab"]
) :where(span, strong, b) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-ui-theme] :where(.collector-category-list, .trial-vendor-nav, [role="tablist"]) {
  max-width: 100%;
  gap: var(--ui-space-2) !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html[data-ui-theme] :where(.collector-category-list, .trial-vendor-nav, [role="tablist"])::-webkit-scrollbar {
  display: none;
}

/* Trial, movie and adult catalogs use one category-rail contract. */
html[data-ui-theme] body :where(.page-shell .trial-vendor-shell, .collector-category-filters) {
  position: relative;
  width: 100%;
  margin: 0 0 var(--ui-space-3) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme] body :where(.page-shell .trial-vendor-nav, .collector-category-list) {
  min-height: var(--ui-category-rail-height) !important;
  gap: 6px !important;
  padding: 4px 6px !important;
}

html[data-ui-theme] body :where(.page-shell .trial-vendor-tab, .collector-category-tab) {
  box-sizing: border-box;
  min-height: var(--ui-category-control-height) !important;
  height: var(--ui-category-control-height) !important;
  gap: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid var(--ng-line, #dfe7f3) !important;
  border-radius: 9px !important;
  color: var(--ng-muted, #667085) !important;
  background: color-mix(in srgb, var(--ng-panel-solid, #fff) 82%, transparent) !important;
  box-shadow: none !important;
  font-size: var(--ui-category-font-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html[data-ui-theme] body :where(
  .page-shell .trial-vendor-tab.active,
  .collector-category-tab.is-active
) {
  color: var(--ng-on-accent, #fff) !important;
  border-color: var(--ng-button-edge, rgba(255,255,255,.48)) !important;
  background-color: var(--ng-accent, #2f6bff) !important;
  background-image: var(--ng-button-decoration, none), var(--ng-button, linear-gradient(110deg, #2f6bff, #62b7ff)) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: var(--ng-button-shadow, 0 7px 16px rgba(47, 123, 255, .2)) !important;
}

html[data-ui-theme] body :where(
  .page-shell .trial-vendor-tab:not(.active):hover,
  .collector-category-tab:not(.is-active):hover
) {
  color: var(--ng-ink, #17243a) !important;
  border-color: color-mix(in srgb, var(--ng-accent, #2f6bff) 34%, var(--ng-line, #dfe7f3)) !important;
  background: var(--ng-soft, #eef4ff) !important;
}

/* Search, forms and common action controls. */
html[data-ui-theme] :where(
  .trial-tools input,
  .collector-toolbar input,
  .collector-toolbar select,
  .site-share-copy input,
  .activity-hall-body input,
  .activity-hall-body select,
  .activity-hall-body textarea,
  input[type="search"]
) {
  min-width: 0;
  min-height: var(--ui-control-md) !important;
  padding-inline: var(--ui-space-3) !important;
  border-radius: var(--ui-radius-sm) !important;
}

html[data-ui-theme] body .page-shell :where(.trial-tools, .collector-toolbar) {
  display: grid !important;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) var(--ui-search-action-width) !important;
  gap: var(--ui-search-gap) !important;
  margin: 0 0 var(--ui-space-3) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-ui-theme] body .page-shell :where(
  .trial-tools input,
  .trial-tools button,
  .collector-toolbar input,
  .collector-toolbar button
) {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-search-height) !important;
  height: var(--ui-search-height) !important;
  margin: 0 !important;
  border-radius: var(--ui-radius-sm) !important;
}

html[data-ui-theme] body .page-shell :where(.trial-tools button, .collector-toolbar button) {
  padding-inline: var(--ui-space-3) !important;
  color: var(--ng-on-accent, #fff) !important;
  border-color: var(--ng-button-edge, rgba(255, 255, 255, .48)) !important;
  background-color: var(--ng-accent, #2f6bff) !important;
  background-image: var(--ng-button-decoration, none), var(--ng-button, linear-gradient(110deg, #2f6bff, #62b7ff)) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: var(--ng-button-shadow, 0 8px 18px rgba(47, 123, 255, .22)) !important;
}

/* Catalog routes inherit the same page gutter as trial instead of nesting a
   second white panel and an extra mobile inset. */
html[data-ui-theme] body.collector-catalog-mode .collector-catalog-panel {
  width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-section-max)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible;
}

@media (max-width: 620px) {
  html[data-ui-theme] body.collector-catalog-mode .collector-catalog-panel {
    padding-inline: 0 !important;
  }
}

html[data-ui-theme] body.collector-catalog-mode .collector-catalog-shell {
  width: 100% !important;
  margin-inline: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-ui-theme] body.collector-catalog-mode .collector-catalog-shell::before {
  display: none !important;
  content: none !important;
}

html[data-ui-theme] body :where(.collector-grid, .collector-pagination) {
  padding-inline: 0 !important;
}

html[data-ui-theme] :where(
  .collector-toolbar,
  .site-share-actions
) {
  gap: var(--ui-space-2) !important;
}

html[data-ui-theme] :where(
  .collector-toolbar button,
  .collector-pagination button,
  .site-share-action,
  .ng-home-popup-action,
  .trial-game-close
) {
  min-height: var(--ui-control-md) !important;
  padding-inline: var(--ui-space-4) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 800;
  transition-duration: var(--ui-motion-fast) !important;
  transition-timing-function: var(--ui-ease) !important;
}

html[data-ui-theme] .page-shell .card-grid > .card .go {
  min-height: var(--ui-control-sm) !important;
  padding-inline: var(--ui-space-3) !important;
}

/* Recommendation CTAs have one text and surface layer. The legacy white
   text-shadow doubled the strokes of 900-weight Chinese labels at 10px.
   Keep this scoped to backend-rendered platforms, including hover/press. */
html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go {
  min-width: 0;
  max-width: 100%;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: none !important;
  -webkit-text-stroke-width: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

html.ng-skin-active .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go {
  background-image: var(--ng-button) !important;
}

html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go:focus-visible {
  outline: 2px solid var(--ng-on-accent, var(--text)) !important;
  outline-offset: -4px !important;
}

html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go::before,
html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* The recommendation grid owns its mobile density, independently of trial
   games and legacy category grids. Keep every phone width at three columns. */
.page-shell #cardsScroll .card-grid[data-ng-platforms] > .empty { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .page-shell #cardsScroll .card-grid[data-ng-platforms] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "avatar" "meta" "cta";
    justify-items: center;
    align-content: end;
    gap: 4px;
    min-height: 116px;
    padding: 8px 4px 6px;
    border-radius: 12px;
  }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"]:has(> .card-rec-badge) { padding-top: 26px !important; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] .avatar { width: 48px; height: 48px; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] .meta { width: 100%; align-items: center; text-align: center; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] .title { width: 100%; font-size: clamp(12px, 2.9vw, 13px); line-height: 1.4; white-space: nowrap; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] :is(.desc, .rating) { display: none; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] .card-rec-badge { top: 4px; right: 4px; min-width: 40px; min-height: 18px; padding: 1px 3px; gap: 2px; font-size: 9px; }
  .page-shell #cardsScroll .card[data-ng-resource-type="platform"] .card-rec-badge::before { width: 11px; height: 11px; flex-basis: 11px; }
  html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go {
    width: min(80%, 96px);
    min-height: 32px !important;
    margin: 0;
    padding: 2px 4px !important;
    border-radius: 8px;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* A compact 32px painted button inside a 44px touch target. Three-column
   density and URLs stay unchanged; the transparent border is clickable. */
@media (max-width: 768px) and (pointer: coarse) {
  html[data-ui-theme] .page-shell #cardsScroll .card-grid > .card[data-ng-resource-type="platform"] > .go {
    min-height: 44px !important;
    border-color: transparent !important;
    border-block: 6px solid transparent !important;
    background-clip: padding-box !important;
  }
}

/* A 320px viewport cannot fit readable platform names in three 90px cards.
   Preserve every shortcut and its 44px CTA, using two columns only when needed. */
@media (max-width: 360px) {
  .page-shell #cardsScroll .card-grid[data-ng-platforms] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Containers use shared spacing and hierarchy while retaining theme material. */
html[data-ui-theme] :where(
  .collector-catalog-panel,
  .collector-card,
  .activity-card,
  .invite-reward-card
) {
  min-width: 0;
  overflow: hidden;
}

html[data-ui-theme] :where(
  .collector-catalog-panel,
  .activity-card,
  .invite-reward-card
) {
  padding: var(--ui-space-5) !important;
}

html[data-ui-theme] :where(.collector-grid, .activity-list) {
  gap: var(--ui-space-3) !important;
}

html[data-ui-theme] :where(
  .collector-card) :where(h2, h3, strong, p, span) {
  min-width: 0;
}

html[data-ui-theme] :where(
  .collector-card) :where(p, span) {
  overflow-wrap: anywhere;
}

/* Catalog routes use the same inner content line as the title, trial rail and
   lottery rail. The outer panel owns page width; direct content owns one inset. */
html[data-ui-theme] body.collector-catalog-mode .collector-catalog-shell > :where(
  .collector-category-filters,
  .collector-toolbar,
  .collector-grid,
  .collector-pagination,
  .collector-empty,
  .collector-age-gate,
  .collector-error
) {
  width: calc(100% - (var(--ui-section-inner) * 2)) !important;
  margin-inline: var(--ui-section-inner) !important;
}

html[data-ui-theme] body.collector-catalog-mode .collector-catalog-shell > :where(
  .collector-grid,
  .collector-pagination
) {
  padding-inline: 0 !important;
}

/* Modal family: one viewport behavior, theme-owned surfaces. */
html[data-ui-theme] :where(
  
  .activity-hall-backdrop,
  .ng-home-popup
) {
  padding: max(var(--ui-space-5), env(safe-area-inset-top)) max(var(--ui-space-5), env(safe-area-inset-right)) max(var(--ui-space-5), env(safe-area-inset-bottom)) max(var(--ui-space-5), env(safe-area-inset-left)) !important;
}

html[data-ui-theme] :where(
  
  .activity-hall-panel
) {
  width: min(640px, 100%) !important;
  max-height: min(88dvh, 820px) !important;
  overscroll-behavior: contain;
}

/* Trial is an immersive full-screen surface, not a centered or mobile
   bottom-sheet modal. Keep its real toolbar/stage DOM aligned to the viewport. */
html[data-ui-theme] .trial-game-overlay {
  align-items: stretch !important;
  padding: 0 !important;
}

html[data-ui-theme].ng-skin-active .trial-game-toolbar {
  color: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

html[data-ui-theme].ng-skin-active .trial-game-toolbar small { color: color-mix(in srgb, #fff 62%, var(--ng-accent-2)); }
html[data-ui-theme].ng-skin-active .trial-game-close {
  color: var(--ng-on-accent, #fff);
  border-color: var(--ng-button-edge);
  background-image: var(--ng-button-decoration), var(--ng-button);
  box-shadow: var(--ng-button-shadow);
}
html[data-ui-theme].ng-skin-active .trial-game-stage { background: color-mix(in srgb, #02060d 94%, var(--ng-accent) 6%); }

html[data-ui-theme] :where(
  .site-share-body,
  .activity-hall-body,
  .ng-home-popup-body
) {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

html[data-ui-theme] :where(
  .site-share-close,
  .activity-hall-close,
  .ng-home-popup-close,
  .trial-game-close
) {
  display: grid !important;
  width: var(--ui-close-size) !important;
  height: var(--ui-close-size) !important;
  min-width: var(--ui-close-size) !important;
  min-height: var(--ui-close-size) !important;
  padding: 0 !important;
  place-items: center;
  line-height: 1 !important;
}

/* Floating actions: a stable right rail on every route and viewport. */
html[data-ui-theme] body :where(
  .page-shell .service-float-btn,
  .activity-hall-toggle,
  .ng-action-hub-toggle,
  .ng-scroll-top
) {
  width: var(--ui-float-size) !important;
  height: var(--ui-float-size) !important;
  min-width: var(--ui-float-size) !important;
  min-height: var(--ui-float-size) !important;
  right: max(var(--ui-space-4), env(safe-area-inset-right)) !important;
  padding: 0 !important;
  place-items: center;
  box-sizing: border-box !important;
}

html[data-ui-theme] body :where(
  .page-shell .service-float-btn,
  .activity-hall-toggle,
  .ng-action-hub-toggle,
  .ng-scroll-top
) :where(svg, img) {
  width: var(--ui-icon-lg) !important;
  height: var(--ui-icon-lg) !important;
}

/* Empty, loading, error and pagination states use a shared content rhythm. */
html[data-ui-theme] :where(
  .collector-empty,
  .collector-error
) {
  min-height: 150px;
  padding: var(--ui-space-6) !important;
  place-content: center;
  text-align: center;
}

html[data-ui-theme] .collector-pagination {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2) !important;
}

@media (max-width: 768px) {
  :root {
    --ui-gutter: 12px;
    --ui-space-5: 16px;
    --ui-space-6: 20px;
    --ui-float-size: 48px;
    --ui-search-height: 40px;
  }

  html[data-ui-theme] :where(
    
    .activity-hall-backdrop
  ) {
    align-items: end !important;
    padding: max(var(--ui-space-3), env(safe-area-inset-top)) max(var(--ui-space-3), env(safe-area-inset-right)) max(var(--ui-space-3), env(safe-area-inset-bottom)) max(var(--ui-space-3), env(safe-area-inset-left)) !important;
  }

  html[data-ui-theme] :where(
    
    .activity-hall-panel
  ) {
    width: 100% !important;
    max-height: 96dvh !important;
  }

}

@media (max-width: 430px) {
  :root {
    --ui-gutter: 10px;
    --ui-control-md: 44px;
  }

  html[data-ui-theme] :where(.category-button, .collector-category-tab, .trial-vendor-tab) {
    min-height: var(--ui-category-control-height) !important;
  }

  html[data-ui-theme].ng-skin-active body :where(.page-shell .trial-vendor-tab, .collector-category-tab) {
    height: var(--ui-category-control-height) !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
  }

  html[data-ui-theme] :where(.collector-grid) {
    gap: 10px !important;
  }

  html[data-ui-theme] .site-share-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 360px) {
  :root { --ui-gutter: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme] *,
  html[data-ui-theme] *::before,
  html[data-ui-theme] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shared category navigation for trial, video catalogs and lottery routes. */
:root {
  --ng-category-rail-height: 48px;
  --ng-category-item-height: 44px;
  --ng-category-pill-height: 32px;
  --ng-category-gap: 6px;
  --ng-category-radius: 13px;
  --ng-category-item-radius: 9px;
  --ng-category-active-shadow: 0 2px 8px rgba(var(--ng-accent-rgb, 47, 123, 255), .24), inset 0 1px rgba(255, 255, 255, .2);
}

html body .ng-category-rail {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .ng-category-rail::before,
html body .ng-category-rail::after {
  content: none !important;
  display: none !important;
}

html body .ng-category-track {
  box-sizing: border-box;
  display: flex !important;
  width: 100%;
  min-width: 0;
  min-height: var(--ng-category-rail-height) !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--ng-category-gap) !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* When every category fits at its natural width, share the remaining space so
   the row closes cleanly without leaving an empty tail. Overflowing rails keep
   intrinsic widths and remain horizontally scrollable. */
html body .ng-category-rail.is-balanced:not(.has-overflow) .ng-category-item {
  min-width: max-content !important;
  flex: 1 1 auto !important;
}

html body .ng-category-track::-webkit-scrollbar {
  display: none;
}

html body .ng-category-item {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex !important;
  width: auto !important;
  min-width: max-content !important;
  height: var(--ng-category-item-height) !important;
  min-height: var(--ng-category-item-height) !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: var(--ng-category-item-radius) !important;
  color: var(--ng-muted, #667085) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

/* Theme packs may still target generic [role="tab"] controls. Keep the real
   control transparent so every category has exactly one visual pill layer. */
html.ng-skin-active body .ng-category-item {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .ng-category-item::before {
  content: "";
  position: absolute;
  inset: calc((var(--ng-category-item-height) - var(--ng-category-pill-height)) / 2) 0;
  z-index: -1;
  border: 1px solid var(--ng-line, #dfe7f3);
  border-radius: var(--ng-category-item-radius);
  background: color-mix(in srgb, var(--ng-panel-solid, #fff) 72%, transparent);
  box-shadow: none;
  pointer-events: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

html body .ng-category-item:focus-visible {
  position: relative;
  z-index: 4;
}

html body .ng-category-item .nav-icon {
  display: none !important;
}

html body .ng-category-item:is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) {
  color: var(--ng-on-accent, #fff) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ng-skin-active body .ng-category-item:is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .ng-category-item:is(.active, .is-active, [aria-selected="true"], [aria-current="page"])::before {
  border-color: var(--ng-button-edge, rgba(255, 255, 255, .48));
  background-color: var(--ng-accent, #2f6bff);
  background-image: var(--ng-button-decoration, none), var(--ng-button, linear-gradient(110deg, #2f6bff, #62b7ff)) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: var(--ng-category-active-shadow) !important;
}

html body .ng-category-item:not(.active):not(.is-active):not([aria-selected="true"]):not([aria-current="page"]):hover {
  color: var(--ng-ink, #17243a) !important;
}

html body .ng-category-item:not(.active):not(.is-active):not([aria-selected="true"]):not([aria-current="page"]):hover::before {
  border-color: color-mix(in srgb, var(--ng-accent, #2f6bff) 34%, var(--ng-line, #dfe7f3));
  background: var(--ng-soft, #eef4ff);
}

@media (max-width: 430px) {
  html body .ng-category-item {
    padding-inline: 9px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ng-category-item {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Current personalization primitives: card density and mobile action hub. */
.page-shell header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-shell header > .nav {
  position: relative;
  z-index: 2;
}

.card-grid > .card {
  min-width: 0;
  contain: layout paint;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html[data-card-density="compact"] .card-grid {
  gap: 12px;
}

html[data-card-density="compact"] .card-grid > .card {
  padding: 14px;
}

html[data-card-density="compact"] .card-grid > .card .desc,
html[data-card-density="compact"] .card-grid > .card .rating {
  display: none;
}

.ng-page-skeleton .ng-page-content {
  position: relative;
  isolation: isolate;
}

.ng-home-loading-state,
body.ng-app-shell-home .card-grid:empty:not([data-ng-platforms]) {
  min-height: 65svh;
  padding: 24px;
  border-radius: var(--ng-radius, 16px);
  background:var(--ng-surface-decor),var(--ng-panel, transparent);
  text-align: center;
}
body.ng-app-shell-home .card-grid:empty:not([data-ng-platforms])::before { content: '正在加载推荐内容…'; color: var(--ng-muted, #71809a); }

.ng-page-skeleton .pk16-category-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  margin: 28px 0 18px;
  padding: 0 0 0 15px;
  overflow: hidden;
  color: var(--ng-ink, var(--text));
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-page-skeleton .pk16-category-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 30px;
  border-radius: 99px;
  background: var(--ng-title-mark, linear-gradient(180deg, var(--ng-accent, #2f6bff), var(--ng-accent-2, #20c4c9)));
  box-shadow: 0 0 18px color-mix(in srgb, var(--ng-accent, #2f6bff) 35%, transparent);
  transform: translateY(-50%);
}

.ng-page-skeleton .pk16-category-title::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 16px;
  display: block;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ng-accent, #2f6bff), var(--ng-accent-2, #20c4c9), transparent);
  opacity: .62;
}

.ng-page-skeleton #lottery-inline-panel > .pk16-category-title,
.ng-page-skeleton .collector-page-heading {
  width: calc(100% - (var(--ui-section-inner) * 2));
  margin-inline: var(--ui-section-inner);
}
.ng-page-skeleton .collector-page-heading {
  min-height: 0 !important;
  padding: 0;
}

.data-card,
.analytics-card,
.stat-card {
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 18%, var(--ng-line, #dbe5f4));
  background:var(--ng-surface-decor),color-mix(in srgb, var(--ng-surface-strong, #fff) 93%, transparent);
  box-shadow: var(--ng-card-shadow, 0 16px 35px rgba(30, 68, 130, .1));
}

.data-card canvas,
.analytics-card canvas {
  filter: saturate(.92) contrast(1.02);
}

.ng-action-hub-toggle,
.ng-scroll-top {
  display: none;
}

@media (max-width: 768px) {
  :root { --ui-section-inner: 10px; }

  .ng-page-skeleton .pk16-category-title {
    min-height: 44px;
    margin: 20px 0 14px;
    padding-left: 14px;
    font-size: 23px;
  }

  .ng-page-skeleton .pk16-category-title::before {
    width: 4px;
    height: 28px;
  }

  .ng-action-hub-toggle,
  .ng-scroll-top {
    position: fixed;
    z-index: calc(var(--ng-layer-float, 80) + 10);
    right: max(14px, env(safe-area-inset-right));
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ng-float-radius, 16px);
    color: var(--ng-on-accent, #fff);
    border: 1px solid rgba(255, 255, 255, .38);
    background: linear-gradient(135deg, var(--ng-accent, #2f6bff), var(--ng-accent-2, #20c4c9));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ng-accent, #2f6bff) 32%, transparent);
  }

  .ng-action-hub-toggle {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .ng-action-hub-toggle svg,
  .ng-scroll-top svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ng-action-hub-open .ng-action-hub-toggle svg {
    transform: rotate(90deg);
  }

  .ng-scroll-top {
    bottom: calc(80px + env(safe-area-inset-bottom));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }

  .ng-scroll-top.is-available {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .ng-action-hub-open .ng-scroll-top {
    visibility: hidden;


  }

  .ng-floating-hub-enabled .activity-hall-toggle,
  .ng-floating-hub-enabled .service-float-btn {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(12px) scale(.84) !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .ng-floating-hub-enabled.ng-action-hub-open .activity-hall-toggle,
  .ng-floating-hub-enabled.ng-action-hub-open .service-float-btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .ng-floating-hub-enabled.ng-action-hub-open .activity-hall-toggle {
    bottom: calc(138px + env(safe-area-inset-bottom)) !important;
  }

  .ng-floating-hub-enabled.ng-action-hub-open .service-float-btn {
    bottom: calc(196px + env(safe-area-inset-bottom)) !important;
  }

  .ng-action-hub-open .ng-scroll-top {
    opacity: 0;
    pointer-events: none;
  }

}

@media (max-width: 360px) {
  .ng-page-skeleton .pk16-category-title { font-size: 21px; }
}

html[data-ui-theme="cosmic"] .ng-action-hub-toggle {
  border-color: rgba(113, 154, 255, .5);
  box-shadow: 0 0 0 1px rgba(121, 103, 255, .16), 0 18px 42px rgba(33, 30, 102, .36);
}

html[data-ui-theme="esports"] .ng-action-hub-toggle {
  border-radius: 10px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

@media (prefers-reduced-motion: reduce) {
  .ng-action-hub-toggle,
  .ng-scroll-top {
    transition: none;
  }

}

/* Canonical customer-service experience. The fixed builder contact and all
   site-managed contacts share this single structure and motion contract. */
body.theme-service-open { overflow: hidden; }

.service-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  border: 0;
  background:color-mix(in srgb, var(--ng-page-bg, #eef4ff) 16%, rgba(6, 14, 31, .34));
  
  
}

html[data-theme="dark"] .service-panel-backdrop {
  background:rgba(2, 8, 20, .48);
}

.page-shell .service-panel {
  width: min(348px, calc(100vw - 28px));
  max-height: min(70dvh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 16%, rgba(255,255,255,.82));
  border-radius: 20px;
  background: var(--ng-surface-decor), var(--ng-panel-solid, #fff);
  box-shadow: 0 22px 58px rgba(18, 45, 98, .18), inset 0 1px rgba(255,255,255,.88);
  scrollbar-width: thin;
}

.page-shell .service-panel-header {
  position: sticky;
  top: -10px;
  z-index: 2;
  min-height: 50px;
  margin: -10px -10px 8px;
  padding: 9px 10px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 13%, transparent);
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  
}

.page-shell .service-panel-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.page-shell .service-panel-heading > strong {
  color: var(--ng-text, #13264a);
  font-size: 17px;
  line-height: 1.25;
}

.page-shell .service-panel-header > button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 11px;
  color: var(--ng-muted, #64748b);
  background: color-mix(in srgb, var(--ng-accent, #2f6bff) 7%, transparent);
}

.page-shell .service-live-summary {
  position: relative;
  display: inline-flex;
  width: max-content;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ng-muted, #64748b);
  background:var(--ng-surface-decor),color-mix(in srgb, var(--ng-accent, #2f6bff) 6%, transparent);
  font-size: 10.5px;
  font-weight: 760;
  white-space: nowrap;
}

.page-shell .service-live-summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e29b25;
  box-shadow: 0 0 0 0 rgba(226, 155, 37, .28);
}

.page-shell .service-live-summary.is-online::before {
  background: #15b77a;
  animation: ngServicePresence 2.1s ease-out infinite;
}

.page-shell .service-panel .service-item {
  position: relative;
  isolation: isolate;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 66px;
  gap: 10px;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 11%, #dce5f2);
  border-radius: 14px;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 6px 16px rgba(28, 65, 125, .05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-shell .service-panel .service-item + .service-item { margin-top: 7px; }

.page-shell .service-panel .service-item:hover {
  border-color: color-mix(in srgb, var(--ng-accent, #2f6bff) 42%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 12px 28px rgba(31, 79, 164, .12);
  transform: translateY(-1px);
}

.page-shell .service-panel .service-item:active { transform: scale(.99); }

.page-shell .service-panel .service-item.is-builder-contact {
  border-color: color-mix(in srgb, var(--ng-accent, #2f6bff) 27%, #dce5f2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ng-accent, #2f6bff) 7%, rgba(255,255,255,.98)), color-mix(in srgb, var(--ng-accent-2, #20c4c9) 5%, rgba(249,251,255,.98)));
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 8px 20px color-mix(in srgb, var(--ng-accent, #2f6bff) 9%, transparent);
}

.page-shell .service-panel .service-item.is-builder-contact::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--ng-accent, #2f6bff), var(--ng-accent-2, #20c4c9));
  opacity: .88;
}

.page-shell .service-panel .service-item.is-builder-contact::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -35%;
  z-index: -1;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: .26;
  pointer-events: none;
  transform: rotate(18deg) translateX(-240%);
  animation: ngBuilderContactSheen 5.8s ease-in-out infinite;
}

.page-shell .service-avatar {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 22%, #fff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ng-accent, #2f6bff) 8%, #fff);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ng-accent, #2f6bff) 12%, transparent);
}

.page-shell .service-avatar img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 12px;
}

.page-shell .service-avatar-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #15b77a;
  box-shadow: 0 2px 8px rgba(15, 111, 78, .24);
}

.page-shell .service-avatar-status.is-away { background: #e29b25; }
.page-shell .service-avatar-status.is-offline { background: #8a97aa; }
.page-shell .service-avatar-status.is-online { animation: ngServicePresence 2.2s ease-out infinite; }

.page-shell .service-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
}

.page-shell .service-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.page-shell .service-title-row > strong {
  overflow: hidden;
  color: var(--ng-text, #13264a);
  font-size: 14.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell .service-copy > small { color: var(--ng-muted, #66758c); font-size: 11.5px; line-height: 1.4; }

.page-shell .service-role-badge {
  display: inline-flex;
  width: max-content;
  min-height: 18px;
  align-items: center;
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  color: var(--ng-accent, #2f6bff);
  background: color-mix(in srgb, var(--ng-accent, #2f6bff) 8%, rgba(255,255,255,.76));
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .04em;
}

.page-shell .service-panel .service-action {
  min-width: 50px;
  min-height: 32px;
  gap: 6px;
  padding-inline: 10px;
  border: 0;
  border-radius: 999px;
  color: var(--ng-accent, #2f6bff);
  background: color-mix(in srgb, var(--ng-accent, #2f6bff) 9%, rgba(255,255,255,.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ng-accent, #2f6bff) 13%, transparent);
}

.page-shell .service-panel .service-item[data-contact-mode="copy"] .service-action {
  color: #087a53;
  background: rgba(19, 165, 111, .08);
  box-shadow: inset 0 0 0 1px rgba(19, 165, 111, .14);
}

.page-shell .service-item[data-contact-mode="link"] .service-action::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.page-shell .service-float-btn.has-online span::before {
  animation: ngServiceTyping 1.65s ease-in-out infinite;
}

html[data-theme="dark"] .page-shell .service-panel {
  border-color: color-mix(in srgb, var(--ng-accent, #5d8dff) 32%, #253a58);
  background: var(--ng-surface-decor), var(--ng-panel-solid, #192538);
  box-shadow: 0 28px 76px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05);
}

html[data-theme="dark"] .page-shell .service-panel-header {
  border-color: rgba(119, 148, 192, .16);
  background:var(--ng-surface-decor),var(--ng-surface-fill);
}

html[data-theme="dark"] .page-shell .service-panel .service-item {
  border-color: #2a4162;
  background:var(--ng-surface-decor),var(--ng-surface-fill);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.16);
}

html[data-theme="dark"] .page-shell .service-panel .service-item.is-builder-contact {
  border-color: color-mix(in srgb, var(--ng-accent, #5d8dff) 44%, #283c59);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ng-accent, #5d8dff) 13%, #142540), color-mix(in srgb, var(--ng-accent-2, #2ac9ca) 8%, #101f36));
}

html[data-theme="dark"] .page-shell .service-avatar { border-color: #365176; background: #172b48; }
html[data-theme="dark"] .page-shell .service-avatar-status { border-color: #142541; }
html[data-theme="dark"] .page-shell .service-role-badge { color: #b9cbff; background: rgba(77, 119, 218, .15); }
html[data-theme="dark"] .page-shell .service-panel .service-action { color: #b9cbff; background: #1a3151; box-shadow: inset 0 0 0 1px #365378; }

@keyframes ngServicePresence {
  0% { box-shadow: 0 0 0 0 rgba(21, 183, 122, .34); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(21, 183, 122, 0); }
}

@keyframes ngServiceTyping {
  0%, 100% { opacity: .54; box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor; }
  35% { opacity: 1; box-shadow: 5px 0 0 rgba(255,255,255,.58), 10px 0 0 rgba(255,255,255,.28); }
  68% { opacity: .78; box-shadow: 5px 0 0 currentColor, 10px 0 0 rgba(255,255,255,.55); }
}

@keyframes ngBuilderContactSheen {
  0%, 58% { transform: rotate(18deg) translateX(-240%); }
  78%, 100% { transform: rotate(18deg) translateX(780%); }
}

@media (max-width: 600px) {
  .service-panel-backdrop {
    background:rgba(9, 15, 32, .26);
    
    
  }

  .page-shell .service-panel {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: min(326px, calc(100vw - 24px));
    max-height: min(66dvh, 500px);
    padding: 9px;
    border-radius: 18px;
  }
  .page-shell .service-panel-header { top: -9px; min-height: 48px; margin: -9px -9px 7px; padding: 8px 9px 7px 10px; }
  .page-shell .service-panel-header > button { width: 34px; height: 34px; border-radius: 11px; }
  .page-shell .service-panel .service-item { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 62px; gap: 9px; padding: 8px 9px; border-radius: 13px; }
  .page-shell .service-avatar { width: 44px; height: 44px; border-radius: 13px; }
  .page-shell .service-avatar img { width: 40px; height: 40px; border-radius: 11px; }
  .page-shell .service-panel .service-action { min-width: 46px; min-height: 31px; padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel-backdrop,
  .page-shell .service-panel,
  .page-shell .service-live-summary::before,
  .page-shell .service-avatar-status.is-online,
  .page-shell .service-float-btn.has-online span::before,
  .page-shell .service-item.is-builder-contact::after { animation: none; }
  .page-shell .service-panel .service-item { transition: none; }
  .page-shell .slide img { animation: none; transform: none; }
}

/* Full-screen trial play owns the complete viewport. Global floating actions
   must not cover game controls while the player surface is open. */
body:is(.trial-game-open, .collector-detail-open) .ng-action-hub-toggle,
body:is(.trial-game-open, .collector-detail-open) .ng-scroll-top,
body:is(.trial-game-open, .collector-detail-open) .activity-hall-toggle,
body:is(.trial-game-open, .collector-detail-open) .service-float-btn,
body:is(.trial-game-open, .collector-detail-open) .service-panel-backdrop,
body:is(.trial-game-open, .collector-detail-open) .service-panel {
  display: none !important;
}

/* Canonical floating dock rail. All launchers share one physical centre,
   diameter and silhouette so legacy per-component offsets cannot make the
   stack look staggered on high-DPI mobile screens. */
html[data-ui-theme] body {
  --ng-float-rail-right: max(var(--ui-space-4), env(safe-area-inset-right));
  --ng-float-control-size: var(--ui-float-size, 52px);
}

html[data-ui-theme] body :where(
  .ng-action-hub-toggle,
  .ng-scroll-top,
  .activity-hall-toggle,
  .page-shell .service-float-btn
) {
  right: var(--ng-float-rail-right) !important;
  width: var(--ng-float-control-size) !important;
  height: var(--ng-float-control-size) !important;
  min-width: var(--ng-float-control-size) !important;
  min-height: var(--ng-float-control-size) !important;
  max-width: var(--ng-float-control-size) !important;
  max-height: var(--ng-float-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  clip-path: none !important;
  box-sizing: border-box !important;
  transform-origin: 50% 50% !important;
}

@media (max-width: 768px) {
  html[data-ui-theme] body {
    --ng-float-control-size: 48px;
  }
}

/* Mobile sustained-performance budget.
 * Theme identity stays intact through colour, imagery and component styling,
 * while low-tier/coarse-pointer devices release full-screen compositor layers
 * and indefinite decorative animation after the first meaningful paint. */
@media (max-width: 768px), (pointer: coarse) {
  html[data-mobile-motion="low"] .service-greeting > b, html[data-mobile-motion="low"] .service-avatar-status.is-online, html[data-mobile-motion="low"] .service-float-btn.has-online span::before{
    animation: none !important;
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  html[data-mobile-motion="low"] :is(
    .page-shell header,
    .page-shell .carousel-wrap,
    .page-shell .card,
    .page-shell .game-card
  ) {
    
    
  }
}

/* Public dismissals use the active theme surface and foreground. */
html[data-ui-theme] body :where(
  .popup-header button,
  .service-panel-header > button,
  .ng-home-popup-close,
  .popup-close,
  .trial-game-close,
  .activity-hall-close,
  .activity-application-close,
  .site-share-close,
  .robot-modal-close,
  [aria-label="关闭播放列表"]
) {
  isolation: isolate;
  display: grid !important;
  width: var(--ui-close-size, 44px) !important;
  height: var(--ui-close-size, 44px) !important;
  min-width: var(--ui-close-size, 44px) !important;
  min-height: var(--ui-close-size, 44px) !important;
  flex: 0 0 var(--ui-close-size, 44px) !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--ng-accent, #5e6fff) 30%, var(--ng-line, #d6dfed)) !important;
  border-radius: 14px !important;
  color: var(--ng-ink, #17233b) !important;
  background-color: color-mix(in srgb, var(--ng-panel-solid, #fff) 92%, var(--ng-accent, #5e6fff) 8%) !important;
  background-image: none !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ng-ink, #17233b) 12%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(116%);
  backdrop-filter: blur(14px) saturate(116%);
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

@media (hover: hover) {
  html[data-ui-theme] body :where(.popup-header button,.service-panel-header > button,.ng-home-popup-close,.popup-close,.trial-game-close,.activity-hall-close,.activity-application-close,.site-share-close,.robot-modal-close,[aria-label="关闭播放列表"]):hover {
    border-color: color-mix(in srgb, var(--ng-accent, #5e6fff) 48%, var(--ng-line, #d6dfed)) !important;
    background-color: color-mix(in srgb, var(--ng-panel-solid, #fff) 80%, var(--ng-accent, #5e6fff) 20%) !important;
    box-shadow: 0 11px 26px rgba(var(--ng-accent-rgb, 94,111,255),.16), 0 0 0 3px rgba(var(--ng-accent-rgb, 94,111,255),.08) !important;
    filter: none !important;
    transform: translateY(-1px) !important;
  }
}

html[data-ui-theme] body :where(.popup-header button,.service-panel-header > button,.ng-home-popup-close,.popup-close,.trial-game-close,.activity-hall-close,.activity-application-close,.site-share-close,.robot-modal-close,[aria-label="关闭播放列表"]):active {
  filter: none !important;
  transform: translateY(0) scale(.96) !important;
}
html[data-ui-theme] body :where(.popup-header button,.service-panel-header > button,.ng-home-popup-close,.popup-close,.trial-game-close,.activity-hall-close,.activity-application-close,.site-share-close,.robot-modal-close,[aria-label="关闭播放列表"]):focus-visible {
  outline: 3px solid rgba(var(--ng-accent-rgb,94,111,255),.28) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme] body :where(.popup-header button,.service-panel-header > button,.ng-home-popup-close,.popup-close,.trial-game-close,.activity-hall-close,.activity-application-close,.site-share-close,.robot-modal-close,[aria-label="关闭播放列表"]) { transition: none !important; }
}

/* The four public hubs share these structural controls. Theme styles may
   change color and illustration only; sizing and interaction stay stable. */
html[data-ui-theme] body:is(.ng-core-hub-page, .gh-body) {
  --ng-radius: 22px;
  --ng-radius-small: var(--ui-control-radius);
  font-synthesis-weight: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme] body:is(.ng-core-hub-page, .gh-body) *,
  html[data-ui-theme] body:is(.ng-core-hub-page, .gh-body) *::before,
  html[data-ui-theme] body:is(.ng-core-hub-page, .gh-body) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}