/* 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}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-3;background:radial-gradient(1000px 540px at -20% -10%,rgba(56,189,248,.25),transparent 60%),radial-gradient(860px 480px at 120% 6%,rgba(37,99,235,.24),transparent 62%),linear-gradient(160deg,var(--page-bg) 0%,#e8effd 48%,#edf3ff 100%);pointer-events:none}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}canvas#bg-particles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;opacity:.75;filter:blur(.2px)}.wm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.06;background-image:repeating-linear-gradient(45deg,transparent 0 40px,rgba(31,111,235,.25) 40px 41px),repeating-linear-gradient(-45deg,transparent 0 40px,rgba(42,168,255,.22) 40px 41px)}.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}header{position:relative;z-index:20;width:min(1240px,100%);max-width:1240px;margin:10px auto 6px;overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:linear-gradient(180deg,#e8f2ffbd,#d6e6fca8);box-shadow:0 16px 38px #1a458a29;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(120deg,rgba(31,111,235,.12),transparent 60%),repeating-linear-gradient(90deg,rgba(15,40,90,.08) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(15,40,90,.06) 0 1px,transparent 1px 18px);pointer-events:none}.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;opacity:0;transform:translateY(12px) scale(.985);animation:iosCardIn .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--stagger, 0ms);-webkit-backdrop-filter:blur(12px) saturate(1.08);backdrop-filter:blur(12px) saturate(1.08)}.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}.rating{display:flex;max-width:100%;min-width:0;align-items:center;gap:6px;margin-top:2px;overflow:hidden;flex-wrap:nowrap}.stars{display:inline-flex;min-width:0;gap:2px;overflow:hidden;color:#1f6feb;filter:drop-shadow(0 2px 6px rgba(31,111,235,.25))}.stars svg{flex:0 0 auto}.score{flex:0 0 auto;color:#3b5275;font-size:13px;white-space:nowrap}.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}@keyframes iosCardIn{0%{opacity:0;transform:translateY(12px) scale(.985)}68%{opacity:1;transform:translateY(-1px) scale(1.003)}to{opacity:1;transform:translateY(0) scale(1)}}.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;-webkit-backdrop-filter:blur(12px);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}.site-footer{width:100%;max-width:1200px;margin:8px auto 18px;padding:0 20px;overflow:hidden}.brand-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;color:#7b8aa3;font-size:12px;text-align:center}.brand-footer .name{color:#64748b;font-weight:700}.brand-footer .desc,.brand-footer .copy{white-space:pre-line}.popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;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(--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{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(--card);box-shadow:0 22px 52px #194ca038;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.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:#eef4ffb8}.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;opacity:1;transform: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,.site-footer{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}.rating{gap:4px}.stars{flex:1 1 auto;gap:1px}.stars svg{width:14px;height:14px}.score{font-size:12px}.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,.site-footer{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}.stars svg{width:13px;height:13px}.score{font-size:11px}.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;
}

body::before {
  opacity: 1;
  background:
    radial-gradient(760px 420px at 8% -8%, rgba(47, 107, 255, 0.12), transparent 66%),
    radial-gradient(620px 360px at 96% 0%, rgba(91, 181, 255, 0.1), transparent 64%),
    linear-gradient(180deg, #f7f9fc 0%, #f3f6fa 100%);
}

.page-shell canvas#bg-particles { opacity: 0.24; }
.page-shell .wm { opacity: 0.018; }

.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: 62px; padding: 9px 20px; }
.page-shell .brand-logo { max-width: 196px; height: 42px; filter: none; transition: opacity .18s ease; }
/* The compiled shell still creates a historical build-time image before the
   tenant configuration arrives. Never paint that placeholder. */
.page-shell .brand-logo[src*="/reference-assets/ng50-logo"] { visibility: hidden; opacity: 0; }
.page-shell .brand-logo.is-configured { visibility: visible; opacity: 1; }

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

.page-shell .carousel-wrap {
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 24, 40, 0.09);
  backdrop-filter: none;
}

.page-shell .carousel:has(.slides:empty) { display: none; }

.page-shell .slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  background-color: #e9eef5;
  background-position: center;
  background-size: 0 0;
  background-repeat: no-repeat;
}

.page-shell .slide::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 0;
  display: block;
  background-image: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(.88);
  opacity: .46;
  transform: scale(1.04);
  pointer-events: none;
}

.page-shell .slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(10, 22, 42, .1), transparent 24% 76%, rgba(10, 22, 42, .1));
  pointer-events: none;
}

.page-shell .slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

/* Desktop banners use the standard 16:9 canvas and show the complete uploaded
   artwork. Images are never stretched or cropped. */
@media (min-width: 901px) {
  .page-shell .carousel-wrap { aspect-ratio: var(--ng-banner-ratio, 16 / 9); }
  .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,
.page-shell .site-footer { max-width: 1180px; }

.page-shell .notice-section { margin-top: 10px; margin-bottom: 4px; }
.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 .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 13s linear infinite;
  will-change: transform;
}
.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; }

@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: #fff;
  box-shadow: 0 7px 20px rgba(16, 24, 40, 0.05);
  backdrop-filter: none;
}
.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: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.055);
  backdrop-filter: none;
}

.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; }
.page-shell .brand-footer { padding: 18px 0; color: #98a2b3; }

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: 10000;
  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-title { display: grid; grid-template-columns: auto auto; align-items: center; max-width: calc(100% - 58px); min-width: 0; column-gap: 7px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.78); }
.trial-game-title strong { overflow: hidden; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.trial-game-title small { display: none; }
.trial-game-status {
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #26d59a;
  box-shadow: 0 0 0 5px rgba(38, 213, 154, .12), 0 0 18px rgba(38, 213, 154, .7);
  animation: trial-status-pulse 1.9s ease-in-out infinite;
}

.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::before, .trial-game-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 17px; height: 2px; border-radius: 999px; background: currentColor; pointer-events: none; transform-origin: center; }
.trial-game-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.trial-game-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

.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); } }
@keyframes trial-status-pulse { 50% { opacity: .55; transform: scale(.82); } }

body.lottery-inline-mode #cardsScroll { display: none; }
body.lottery-inline-mode .page-shell > .site-footer { 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;
  width: 112px;
  height: 48px;
  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: #fff;
  box-shadow: 0 7px 24px rgba(16, 24, 40, 0.055);
  backdrop-filter: none;
}

.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 .draw-ball,
.lottery-shell .sum-ball {
  width: 62px;
  height: 62px;
  border: 4px solid #fff;
  font-size: 23px;
  box-shadow: 0 0 0 1px #dfe6ef, 0 8px 18px rgba(16, 24, 40, 0.12);
}

.lottery-shell .draw-ball.ball-a { background: #2f6bff; }
.lottery-shell .draw-ball.ball-b { background: #12a06a; }
.lottery-shell .draw-ball.ball-c { background: #f79009; }
.lottery-shell .sum-ball { background: #e54861; }
.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: #f8fafc; }
.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: #f8fafc; }
.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: #fff7f8; }

@media (max-width: 900px) {
  .page-shell .card-grid { grid-template-columns: repeat(3, 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: 54px; padding: 9px 14px; }
  .page-shell .brand-logo { max-width: 152px; height: 34px; }
  .page-shell .carousel { padding: 0 10px; }
  .page-shell .carousel-wrap { border-radius: 14px; }
  .page-shell .slide { height: clamp(160px, 42vw, 230px); min-height: 160px; max-height: 230px; aspect-ratio: auto; }
  .page-shell .nav-section {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-top: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: rgba(244, 247, 251, 0.9);
    backdrop-filter: blur(14px);
  }

  .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; }
  .trial-game-title strong { font-size: 13px; }

  .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 {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
    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 .draw-ball,
  .lottery-shell .sum-ball { width: 52px; height: 52px; font-size: 20px; }
  .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 body::before { display: none; }
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: #687892;
  --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;
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(760px 460px at 0% -8%, rgba(47, 107, 255, .23), transparent 64%),
    radial-gradient(720px 460px at 110% 8%, rgba(36, 176, 188, .13), transparent 62%),
    linear-gradient(160deg, #07111f 0%, #0a1628 48%, #07111f 100%);
}

html[data-theme="dark"] .wm {
  opacity: .09;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(104, 145, 224, .13) 40px 41px),
    repeating-linear-gradient(-45deg, transparent 0 40px, rgba(62, 187, 218, .1) 40px 41px);
}

/* Theme switch: placed directly above the customer-service launcher. */
.theme-mode-toggle {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 82;
  display: inline-flex;
  width: 112px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #fff;
  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);
  backdrop-filter: blur(16px) saturate(1.1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  animation: ngFloatingBreath 2.9s ease-in-out infinite;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, filter .2s ease;
}
.theme-mode-toggle:hover { border-color: rgba(255, 255, 255, .88); filter: brightness(1.07); transform: translateY(-2px); }
.theme-mode-toggle:focus-visible { outline: 3px solid rgba(47, 107, 255, .28); outline-offset: 3px; }
.theme-mode-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
}
.theme-mode-symbol {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body:not(.theme-has-service) .theme-mode-toggle { bottom: 24px; }
body.theme-service-open .theme-mode-toggle { opacity: 0; pointer-events: none; transform: translateY(8px); }
html[data-theme="dark"] .theme-mode-toggle {
  border-color: rgba(130, 170, 255, .62);
  color: #fff;
  background: linear-gradient(135deg, #1e4fc8 0%, #2f6bff 54%, #477fe9 100%);
}
html[data-theme="dark"] .theme-mode-icon { color: #fff2b8; background: transparent; }

.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);
  animation: ngFloatingBreath 2.9s ease-in-out infinite;
  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 { animation: ngBadgeBreath 2.2s ease-in-out infinite; }

@keyframes ngFloatingBreath {
  0%, 100% { box-shadow: 0 10px 24px rgba(47, 107, 255, .3), 0 0 0 0 rgba(72, 128, 255, .24), inset 0 1px rgba(255, 255, 255, .24); }
  50% { box-shadow: 0 14px 32px rgba(47, 107, 255, .44), 0 0 0 8px rgba(72, 128, 255, 0), inset 0 1px rgba(255, 255, 255, .28); }
}
@keyframes ngBadgeBreath {
  0%, 100% { box-shadow: 0 4px 11px rgba(229, 72, 97, .34), 0 0 0 0 rgba(255, 76, 101, .26); }
  50% { box-shadow: 0 6px 16px rgba(229, 72, 97, .48), 0 0 0 5px rgba(255, 76, 101, 0); }
}

/* 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,
.common-tools-grid,
.collector-grid { align-items: stretch; }
.page-shell .card,
.page-shell .game-card,
.common-tool-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);
}
.common-tool-card { min-height: 136px; }
.page-shell .card::after,
.page-shell .game-card::after,
.common-tool-card::after,
.collector-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(47, 107, 255, .62), transparent);
  opacity: .55;
  pointer-events: none;
}
.page-shell .card,
.page-shell .game-card,
.common-tool-card,
.collector-card { position: relative; }
.page-shell > .site-footer,
.fixed-page-footer,
.lottery-shell > .site-footer {
  min-height: 0;
  margin: 2px auto 0;
  padding: 4px 10px max(5px, env(safe-area-inset-bottom));
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.fixed-page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.fixed-page-footer strong { color: #667085; }
.page-shell .brand-footer { min-height: 0; gap: 2px; padding: 0; line-height: 1.3; }

.common-tools-heading { min-height: 82px; }
.common-tools-group,
.collector-catalog-shell {
  position: relative;
  isolation: isolate;
}
.common-tools-group::before,
.collector-catalog-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 3px;
  background: linear-gradient(90deg, #2f6bff, #63a1ff 45%, #2dc1b5, transparent 92%);
  pointer-events: none;
}
.common-tools-group-head h3 { display: flex; align-items: center; gap: 9px; }
.common-tools-group-head h3::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 4px solid #dce8ff;
  border-radius: 50%;
  background: #2f6bff;
  box-shadow: 0 0 0 1px rgba(47, 107, 255, .2);
}
.common-tools-group {
  overflow: hidden;
  background-image: radial-gradient(circle at 100% 0%, rgba(47, 107, 255, .055), transparent 240px);
}
.collector-grid { background: radial-gradient(circle at 0 0, rgba(47, 107, 255, .04), transparent 360px); }
@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 .carousel-wrap,
html[data-theme="dark"] .page-shell .nav-section,
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,
html[data-theme="dark"] .page-shell .brand-footer,
html[data-theme="dark"] .page-shell .brand-footer .name { 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: #142541; }
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-catalog-shell {
  border-color: #283d5b;
  background: rgba(13, 25, 42, .97);
  box-shadow: 0 22px 58px rgba(0,0,0,.28);
}
html[data-theme="dark"] .collector-card-copy strong,
html[data-theme="dark"] .collector-info-column h3,
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-grid { background: radial-gradient(circle at 0 0, rgba(83, 131, 235, .1), transparent 380px); }
html[data-theme="dark"] .collector-card {
  border-color: #2a3e5d;
  background: #111f35;
  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; }
html[data-theme="dark"] .collector-detail-dialog { color: #edf4ff; background: #101d31; }
html[data-theme="dark"] .collector-info-column { background: #101d31; }
html[data-theme="dark"] .fixed-page-footer { color: #8193ac; }
html[data-theme="dark"] .fixed-page-footer strong { color: #aebed3; }

/* Common tools — dark template. */
html[data-theme="dark"] .common-tools-heading p,
html[data-theme="dark"] .common-tools-group-head p,
html[data-theme="dark"] .common-tool-copy span { color: #93a5be; }
html[data-theme="dark"] .common-tools-group {
  border-color: #283d5b;
  background-color: #101d31;
  background-image: radial-gradient(circle at 100% 0%, rgba(82, 130, 235, .12), transparent 250px);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
html[data-theme="dark"] .common-tools-group-head h3,
html[data-theme="dark"] .common-tool-copy strong { color: #edf4ff; }
html[data-theme="dark"] .common-tool-card { border-color: #2a3f5d; background: #13233a; }
html[data-theme="dark"] .common-tool-download { border-color: #36547d; color: #a8c0ff; background: #172d4e; }
html[data-theme="dark"] .common-tool-download:hover { border-color: #4f80ef; color: #fff; background: #2f6bff; }
html[data-theme="dark"] .common-tools-empty { border-color: #344963; color: #93a5bd; background: #101d31; }

/* 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: #13233a; }
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: #0e1a2c; }
html[data-theme="dark"] .lottery-shell .robot-modal-head { border-bottom-color: #2a405e; background: rgba(16, 29, 49, .98); }
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: #321824; }
html[data-theme="dark"] .lottery-shell .skeleton-card { background: #111f34; }
html[data-theme="dark"] .lottery-shell .skeleton { background: linear-gradient(90deg, #172a45, #213958, #172a45); background-size: 220% 100%; }
html[data-theme="dark"] .lottery-shell > .site-footer { color: #8295ae; }
html[data-theme="dark"] .lottery-shell > .site-footer strong { color: #afbed2; }

/* 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,
html[data-theme="dark"] .site-footer { 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: #0e1b2e; }
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; }
  .common-tools-heading { min-height: 70px; }
}

@media (max-width: 600px) {
  .theme-mode-toggle {
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
  }
  .theme-mode-icon { width: 25px; height: 25px; border-radius: 50%; font-size: 20px; }
  .theme-mode-label { display: none; }
  body:not(.theme-has-service) .theme-mode-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .page-shell .service-float-btn {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    padding: 0;
  }
  .common-tool-card { min-height: 112px; }
}

@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) {
  .theme-mode-toggle,
  .page-shell .service-float-btn,
  .page-shell .service-float-btn b { animation: none; }
  .theme-mode-toggle { transition: 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(135deg,var(--ng-accent),var(--ng-accent-2));
  --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; }

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 body::before, html.ng-skin-active body::after {
  content:""; position:fixed; inset:-18vmax; z-index:-4; pointer-events:none;
}
html.ng-skin-active body::before {
  opacity:.17; background-image:radial-gradient(circle,rgba(var(--ng-accent-rgb),.8) 0 1px,transparent 1.7px);
  background-size:64px 64px; animation:ng-ambient-drift calc(34s / var(--ng-motion-speed)) linear infinite;
}
html.ng-skin-active body::after {
  z-index:-3; opacity:.27; filter:blur(62px);
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(var(--ng-accent-rgb),.22),transparent 35%,color-mix(in srgb,var(--ng-accent-2) 22%,transparent),transparent 70%);
  animation:ng-ambient-turn calc(44s / var(--ng-motion-speed)) linear infinite;
}

.ng-theme-scene { position:fixed; inset:0 0 auto; z-index:-2; height:min(72vh,720px); overflow:hidden; pointer-events:none; opacity:.44; transition:opacity .36s ease; }
.ng-theme-scene[hidden] { display:none; }
.ng-theme-scene picture,.ng-theme-scene img { display:block; width:100%; height:100%; }
.ng-theme-scene img { object-fit:cover; object-position:center top; filter:saturate(1.06) contrast(1.02); transform:scale(1.015); animation:ng-scene-breathe calc(16s / var(--ng-motion-speed)) ease-in-out infinite alternate; }
.ng-theme-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,var(--ng-page) 100%),linear-gradient(90deg,var(--ng-page) 0,transparent 38%,transparent 88%,var(--ng-page)); }
.ng-theme-scene-orbit,.ng-theme-scene-signal { position:absolute; pointer-events:none; border-radius:50%; }
.ng-theme-scene-orbit { top:8%; right:9%; width:220px; aspect-ratio:1; border:1px solid rgba(var(--ng-accent-rgb),.36); box-shadow:0 0 40px rgba(var(--ng-accent-rgb),.15),inset 0 0 30px rgba(var(--ng-accent-rgb),.08); animation:ng-orbit-spin calc(18s / var(--ng-motion-speed)) linear infinite; }
.ng-theme-scene-signal { top:17%; right:15%; width:84px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--ng-accent-2) 48%,transparent); animation:ng-signal-pulse calc(3.6s / var(--ng-motion-speed)) ease-out infinite; }

html.ng-skin-active :is(.site-header,.page-shell>header,.carousel-wrap,.marquee-wrap,.category-buttons,.card,.game-card,.common-tool-card,.collector-card,.collector-catalog-shell,.collector-detail-dialog,.common-tools-panel,.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,input,textarea,select,table) {
  border-color:var(--ng-line)!important; border-radius:var(--ng-radius)!important; box-shadow:var(--ng-shadow)!important;
}
html.ng-skin-active :is(.site-header,.page-shell>header,.marquee-wrap,.category-buttons,.card,.game-card,.common-tool-card,.collector-card,.collector-catalog-shell,.collector-detail-dialog,.common-tools-panel,.trial-panel,.service-panel,.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,input,textarea,select,table) {
  color:var(--ng-ink); background-color:var(--ng-panel)!important; -webkit-backdrop-filter:blur(var(--ng-blur)) saturate(122%); backdrop-filter:blur(var(--ng-blur)) saturate(122%);
}
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-modal-head)!important; }
html.ng-skin-active .checker-panel { color:var(--ng-ink); border-color:var(--ng-line)!important; background: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,.common-tool-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,#enter-button,.button.primary,.trial-tools button,button.el-button--primary,.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,.common-tool-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,a,input,textarea,select,[role="button"],[role="tab"]):focus-visible { outline:3px solid var(--ng-focus-ring); outline-offset:3px; }
html.ng-skin-active :is(button,[role="button"]):active { transform:translateY(1px) scale(.985); }
html.ng-skin-active :is(input,textarea,select):focus { border-color:var(--ng-accent)!important; box-shadow:0 0 0 4px rgba(var(--ng-accent-rgb),.12)!important; }
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:color-mix(in srgb,var(--ng-muted) 78%,transparent)!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,.common-tools-tab,[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,.common-tools-tab,[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(.theme-mode-toggle,.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.ng-skin-active :is(th,.table-head) { color:var(--ng-ink)!important; background:var(--ng-soft)!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-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,.common-tool-card,.collector-card,.activity-card,.activity-notice,.activity-apply-form,.site-share-panel,.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,.common-tool-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,.collector-detail-overlay,.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,.collector-detail-dialog) { position:relative; overflow:hidden; animation:ng-modal-enter calc(390ms / var(--ng-motion-speed)) cubic-bezier(.18,.88,.22,1.12) both; }
html.ng-skin-active :is(.popup-modal,.ng-home-popup-card,.activity-hall-panel,.site-share-panel,.collector-detail-dialog)::before {
  content:""; position:absolute; inset:0; z-index:4; padding:1px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--ng-border-angle,0deg),transparent 0 20%,var(--ng-accent),var(--ng-accent-2),transparent 45% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ng-border-orbit calc(8s / var(--ng-motion-speed)) linear infinite;
}
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); animation:ng-broadcast-pulse calc(3.2s / var(--ng-motion-speed)) ease-in-out infinite;
}
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:#fff!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,.collector-detail-close,.trial-game-close) { display:grid!important; width:40px!important; height:40px!important; min-width:40px; 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,.common-tools-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:color-mix(in srgb,var(--ng-panel) 78%,transparent)!important; text-align:center; }
html.ng-skin-active :is(.empty,.common-tools-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%); animation:ng-empty-float calc(4.8s / var(--ng-motion-speed)) ease-in-out infinite; }
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; animation:ng-skeleton calc(1.5s / var(--ng-motion-speed)) linear infinite!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%; animation:ng-loader-spin calc(.85s / var(--ng-motion-speed)) linear infinite; }
.ng-feature-loader-status { position:fixed; z-index:10050; 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,.common-tool-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="high"] body::before,html[data-motion="high"] body::after,html[data-motion="high"] .ng-theme-scene img { will-change:transform,opacity,background-position; }
html[data-motion="standard"] body::after { display:none; }
html[data-motion="low"] .ng-theme-scene img { animation:none; transform:none; filter:saturate(1.02); }
html[data-motion="low"] .ng-theme-scene-orbit,html[data-motion="low"] .ng-theme-scene-signal,html[data-motion="low"] body::after { display:none; }
html[data-motion="off"] body::before,html[data-motion="off"] body::after,html[data-motion="off"] .ng-theme-scene :is(.ng-theme-scene-orbit,.ng-theme-scene-signal) { display:none!important; animation:none!important; }
html[data-motion="off"] .ng-theme-scene img { animation:none!important; }
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-ambient-drift { to { background-position:128px 64px; } }
@keyframes ng-ambient-turn { to { transform:rotate(1turn); } }
@keyframes ng-scene-breathe { to { transform:scale(1.045) translate3d(-.7%,.4%,0); } }
@keyframes ng-orbit-spin { to { transform:rotate(1turn); } }
@keyframes ng-signal-pulse { 0% { transform:scale(.72); opacity:0; } 38% { opacity:.72; } 100% { transform:scale(1.65); opacity:0; } }
@keyframes ng-border-orbit { to { --ng-border-angle:360deg; } }
@keyframes ng-broadcast-pulse { 0%,78%,100% { transform:scale(1); } 84% { transform:scale(1.08); } 90% { transform:scale(.98); } }
@keyframes ng-modal-enter { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes ng-toast-enter { from { opacity:0; transform:translate3d(18px,0,0); } to { opacity:1; transform:none; } }
@keyframes ng-empty-float { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-4px); } }
@keyframes ng-loader-spin { to { transform:rotate(1turn); } }
@keyframes ng-skeleton { to { background-position:-220% 0!important; } }

@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 body::before,html.ng-skin-active body::after { display:none!important; }
  .ng-theme-scene { height:390px; opacity:.22; }
  .ng-theme-scene img { object-position:64% top; animation:none!important; transform:none; filter:saturate(1.02); }
  .ng-theme-scene::after { background:linear-gradient(180deg,transparent 25%,var(--ng-page) 92%),linear-gradient(90deg,var(--ng-page),transparent 45%,transparent 88%,var(--ng-page)); }
  .ng-theme-scene-orbit,.ng-theme-scene-signal { display:none!important; }
  html.ng-skin-active body::before { opacity:.1; }
  html.ng-skin-active :is(.site-header,.page-shell>header,.marquee-wrap,.category-buttons,.card,.game-card,.common-tool-card,.collector-card,.collector-catalog-shell,.collector-detail-dialog,.common-tools-panel,.trial-panel,.service-panel,.popup-modal,.ng-home-popup-card,.activity-hall-panel,.activity-card,.activity-notice,.activity-apply-form,.site-share-panel,.lottery-shell .draw-card,.lottery-shell .stat-card,input,textarea,select,table) {
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  }
  html.ng-skin-active :is(.popup-overlay,.ng-home-popup-backdrop,.activity-hall-backdrop,.site-share-backdrop,.collector-detail-overlay,.trial-game-overlay) { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  html.ng-skin-active :is(.popup-modal,.activity-hall-panel,.site-share-panel,.collector-detail-dialog) { --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,.collector-detail-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,.common-tool-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,.common-tools-empty,.activity-empty,.empty-state) { min-height:128px; padding-top:66px!important; }
}

@media (prefers-reduced-motion: reduce) {
  html.ng-skin-active body::before,html.ng-skin-active body::after,.ng-theme-scene :is(.ng-theme-scene-orbit,.ng-theme-scene-signal) { display:none!important; }
  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; }
}

/* Decorative-only polish. No grid, spacing, sizing, or interaction changes. */

body::before {
  background:
    radial-gradient(840px 460px at -4% -10%, rgba(47, 107, 255, .16), transparent 64%),
    radial-gradient(720px 430px at 104% 4%, rgba(45, 193, 181, .105), transparent 62%),
    radial-gradient(620px 360px at 52% 72%, rgba(107, 135, 255, .045), transparent 70%),
    linear-gradient(180deg, #f8faff 0%, #f3f6fb 52%, #f5f8fc 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(64, 101, 170, .16) .75px, transparent .85px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 34%, transparent 72%, #000 100%);
  pointer-events: none;
}

.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 .carousel-wrap {
  border-color: rgba(184, 202, 230, .86);
  box-shadow:
    0 20px 50px rgba(32, 68, 128, .135),
    0 2px 8px rgba(32, 68, 128, .055),
    inset 0 1px rgba(255, 255, 255, .72);
}

.page-shell .slide::after {
  background:
    linear-gradient(90deg, rgba(8, 22, 48, .13), transparent 20% 78%, rgba(8, 22, 48, .12)),
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 30% 76%, rgba(4, 15, 35, .08));
}

.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: 1px solid rgba(199, 211, 231, .55);
  border-radius: 17px;
  background:
    radial-gradient(circle at 0 0, rgba(47, 107, 255, .06), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .48), rgba(244, 248, 255, .2));
  box-shadow: 0 12px 32px rgba(37, 72, 132, .055), inset 0 1px rgba(255, 255, 255, .72);
}

.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,
.common-tool-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::before,
.page-shell .game-card::before,
.common-tool-card::before,
.collector-card::before {
  content: "";
  position: absolute;
  top: -52px;
  right: -48px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(47, 107, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(47, 107, 255, .022), 0 0 0 33px rgba(47, 107, 255, .016);
  pointer-events: none;
}

.page-shell .card:hover,
.page-shell .game-card:hover,
.common-tool-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);
}

.collector-catalog-shell,
.common-tools-group,
.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);
}

.common-tools-group-head {
  background:
    radial-gradient(circle at 100% 0, rgba(47, 107, 255, .07), transparent 38%),
    linear-gradient(135deg, #fff, #f7faff);
}

.collector-detail-dialog {
  border: 1px solid rgba(176, 196, 229, .7);
  box-shadow: 0 32px 100px rgba(4, 15, 36, .42), 0 0 0 1px rgba(255, 255, 255, .4) inset;
}

.collector-player-head {
  background: linear-gradient(100deg, #091424, #12233c 65%, #0c1a2e);
}

.collector-info-column {
  background:
    radial-gradient(circle at 100% 0, rgba(47, 107, 255, .07), transparent 34%),
    #fff;
}

.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"] body::before {
  background:
    radial-gradient(880px 500px at -4% -10%, rgba(48, 104, 232, .28), transparent 64%),
    radial-gradient(760px 470px at 104% 5%, rgba(23, 173, 166, .15), transparent 62%),
    radial-gradient(620px 380px at 52% 72%, rgba(93, 123, 224, .07), transparent 70%),
    linear-gradient(160deg, #06101e 0%, #0a1729 48%, #07111f 100%);
}

html[data-theme="dark"] body::after {
  opacity: .32;
  background-image: radial-gradient(circle, rgba(117, 151, 208, .22) .75px, transparent .85px);
}

html[data-theme="dark"] .page-shell header,
html[data-theme="dark"] .page-shell .nav-section,
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 .nav-section,
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"] .common-tool-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"] .common-tools-group-head,
html[data-theme="dark"] .collector-info-column {
  background:
    radial-gradient(circle at 100% 0, rgba(78, 130, 239, .13), transparent 38%),
    linear-gradient(145deg, #132641, #0f1e34);
}

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 .nav-section { border-color: transparent; box-shadow: none; }
  .page-shell .card,
  .page-shell .game-card,
  .common-tool-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,
  .common-tool-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"] .common-tool-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,
  .common-tool-card,
  .collector-card { transition-duration: 0s !important; }
}

/* Let the six primary entries float as one navigation group instead of
   sitting on a heavy white slab. Individual controls keep their own surface. */
.page-shell .nav-section {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

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

/* Complete skins used to repaint this grid as an opaque panel. Keep the skin
   on the controls themselves, while the group surface stays visually open. */
html.ng-skin-active .page-shell .category-buttons {
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The banner artwork is the focus; the former center pagination capsule
   covered text and artwork on compact screens. */
.page-shell .carousel .dots {
  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);
}

html[data-theme="dark"] .page-shell .nav-section {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 768px) {
  .page-shell .nav-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: 0 10px 24px rgba(39, 74, 132, .045);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme="dark"] .page-shell .nav-section {
    background: transparent;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  }
}

/*
 * 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 {
  --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,
.common-tools-panel,
.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%; }

html[data-theme="dark"] { background: #06101e; }

body {
  position: relative;
  isolation: isolate;
  background: transparent;
  transition: background-color var(--arcade-normal) ease, color var(--arcade-normal) ease;
}

body::before {
  content: "";
  position: fixed;
  inset: -16%;
  z-index: -3;
  display: block;
  background:
    radial-gradient(44% 36% at 7% 8%, rgba(47, 107, 255, .18), transparent 72%),
    radial-gradient(38% 32% at 94% 16%, rgba(53, 220, 203, .13), transparent 74%),
    radial-gradient(34% 30% at 52% 92%, rgba(141, 107, 255, .09), transparent 75%),
    linear-gradient(155deg, #f8faff 0%, #f0f5fc 48%, #f6f9fd 100%);
  background-size: 120% 120%, 118% 118%, 125% 125%, 100% 100%;
  animation: arcade-aurora 20s ease-in-out infinite alternate;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  opacity: .48;
  background-image:
    linear-gradient(rgba(68, 103, 170, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 103, 170, .045) 1px, transparent 1px),
    radial-gradient(circle, rgba(47, 107, 255, .23) .7px, transparent .95px);
  background-size: 46px 46px, 46px 46px, 24px 24px;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.3) 38%, rgba(0,0,0,.18) 72%, #000);
  animation: arcade-grid-drift 28s linear infinite;
  pointer-events: none;
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(46% 38% at 5% 5%, rgba(47, 107, 255, .24), transparent 72%),
    radial-gradient(40% 34% at 96% 14%, rgba(45, 207, 197, .16), transparent 74%),
    radial-gradient(34% 32% at 54% 92%, rgba(130, 91, 255, .12), transparent 76%),
    linear-gradient(155deg, #050d18 0%, #09172a 50%, #06111f 100%);
}

html[data-theme="dark"] body::after {
  opacity: .34;
  background-image:
    linear-gradient(rgba(100, 142, 218, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 142, 218, .07) 1px, transparent 1px),
    radial-gradient(circle, rgba(94, 145, 242, .35) .72px, transparent 1px);
}

@keyframes arcade-aurora {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 7% 4%, 92% 8%, 56% 92%, 0 0; }
}

@keyframes arcade-grid-drift { to { background-position: 46px 23px, 23px 46px, 24px 24px; } }
@keyframes arcade-energy { to { background-position: 200% 50%; } }
@keyframes arcade-breathe { 50% { box-shadow: 0 0 0 7px rgba(47, 107, 255, .055), 0 0 24px rgba(47, 107, 255, .22); } }
@keyframes arcade-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes arcade-scan { 0%, 28% { transform: translateX(-130%); } 70%, 100% { transform: translateX(230%); } }

/* Shared glass and energy surfaces. */
:where(.page-shell header, .page-shell .nav-section, .page-shell .marquee-wrap,
  .collector-catalog-shell, .common-tools-group, .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 .nav-section, .page-shell .marquee-wrap,
  .collector-catalog-shell, .common-tools-group, .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: arcade-energy 7s linear infinite;
  pointer-events: none;
}

/* Existing cards keep their dimensions; only their material and feedback change. */
:where(.page-shell .card, .page-shell .game-card, .common-tool-card, .collector-card,
  .lottery-shell .stat-card, .route-card,
  .site-summary-card, .rank-row, .metric-box, .el-card) {
  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, .common-tool-card, .collector-card,
    .lottery-shell .stat-card, .route-card,
    .site-summary-card, .el-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: 220% 100%;
  box-shadow: 0 10px 28px rgba(47, 107, 255, .28), inset 0 1px rgba(255, 255, 255, .24);
  animation: arcade-energy 7s linear infinite;
}

@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, #enter-button, .el-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, #enter-button, .el-button--primary, 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, #enter-button, .el-button--primary, 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, #enter-button, .el-button):active,
.ng-interaction-pressed { transform: scale(.975) !important; filter: brightness(.98); }

:where(button, .button, .go, .back-link, .retry-button, #enter-button, .el-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: arcade-breathe 2.8s ease-in-out infinite;
}

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

:where(input, select, textarea):focus,
:where(.el-input__wrapper, .el-select__wrapper, .el-textarea__inner):focus-within {
  border-color: rgba(67, 119, 240, .82) !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .12), 0 0 20px rgba(47, 107, 255, .08) !important;
  outline: none;
}

/* Modals and overlays gain a short, consistent entrance without moving layout. */
:where(.modal, .popup-modal, .collector-detail-dialog, .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, .collector-detail-backdrop) {
  backdrop-filter: blur(9px) saturate(.88);
}

/* 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%;
  animation: arcade-energy 1.6s linear infinite;
}

/* 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: arcade-breathe 3.2s ease-in-out infinite;
}

/* The actual home-page theme and service launchers use their own class names. */
.theme-mode-toggle,
.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: arcade-float-breathe 3.5s ease-in-out infinite;
}

.theme-mode-toggle { bottom: 84px; }
.theme-mode-label,
.page-shell .service-float-btn::after { display: none !important; }
.theme-mode-icon { width: 21px; height: 21px; font-size: 15px; }
.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;
}

/* 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);
}

@keyframes arcade-float-breathe {
  0%, 100% { box-shadow: 0 8px 20px rgba(29, 79, 190, .27), 0 0 0 0 rgba(72, 128, 255, .16), inset 0 1px rgba(255,255,255,.24); }
  50% { box-shadow: 0 10px 24px rgba(29, 79, 190, .34), 0 0 0 4px rgba(72, 128, 255, 0), inset 0 1px rgba(255,255,255,.28); }
}

/* Main-site carousel receives an edge scan without changing its crop. */
.page-shell .carousel-wrap {
  position: relative;
  border-color: rgba(91, 136, 229, .45);
  box-shadow: 0 20px 52px rgba(31, 73, 154, .18), 0 0 0 1px rgba(53, 220, 203, .055), inset 0 1px rgba(255,255,255,.2);
}

.page-shell .carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34%;
  z-index: 3;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  animation: arcade-scan 8s ease-in-out infinite;
  pointer-events: none;
}

/* Dark-theme material overrides. */
html[data-theme="dark"] :where(.page-shell header, .page-shell .nav-section, .page-shell .marquee-wrap,
  .collector-catalog-shell, .common-tools-group, .lottery-shell .site-header,
  .lottery-shell .draw-card, .lottery-shell .panel, .lottery-shell .stat-card) {
  background-color: rgba(12, 25, 43, .9);
  border-color: rgba(75, 108, 158, .66);
}

html[data-theme="dark"] :where(.page-shell .card, .page-shell .game-card, .common-tool-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: arcade-aurora 14s ease-in-out infinite alternate;
}

.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%;
  animation: arcade-energy 3.6s linear infinite;
}

/* Mobile and touch devices keep the same look with fewer expensive effects. */
@media (max-width: 900px), (pointer: coarse) {
  body::after { opacity: .26; animation-duration: 46s; }
  body::before { animation-duration: 32s; }
  :where(.page-shell .card, .page-shell .game-card, .common-tool-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) {
  body::after {
    background-size: 58px 58px, 58px 58px, 28px 28px;
    opacity: .2;
  }
  .page-shell .carousel-wrap::after { animation: none; opacity: .24; transform: translateX(270%) skewX(-18deg); }
  :where(.page-shell header, .page-shell .nav-section, .page-shell .marquee-wrap,
    .collector-catalog-shell, .common-tools-group, .lottery-shell .site-header,
    .lottery-shell .draw-card, .lottery-shell .panel, .line-shell, .panel,
    .stat-card, .collector-card, .site-summary-card) {
    backdrop-filter: none;
  }

  .theme-mode-toggle,
  .page-shell .service-float-btn {
    right: 14px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
  }
  .theme-mode-toggle { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body:not(.theme-has-service) .theme-mode-toggle { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .theme-mode-icon { width: 21px; height: 21px; font-size: 17px; }
  .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) {
  body::before,
  body::after,
  .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);
}

/* A slow, staggered cabinet-light sweep. */
.page-shell .card-grid > .card::before {
  content: "";
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: -48%;
  z-index: 0;
  width: 34%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 24%,
    rgba(255, 255, 255, .72) 50%,
    rgba(116, 167, 255, .12) 66%,
    transparent 100%
  );
  box-shadow: none;
  opacity: 0;
  transform: translateX(0) skewX(-15deg);
  animation: platform-card-sweep 7.2s cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: calc(1s + var(--stagger, 0ms));
  pointer-events: none;
  will-change: transform, opacity;
}

.page-shell .card-grid > .card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 13px;
  left: 13px;
  z-index: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #4d7dff 35%, #31d2c2 64%, transparent);
  box-shadow: 0 2px 12px rgba(59, 124, 255, .26);
  opacity: .72;
  pointer-events: none;
}

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

.page-shell .card-grid > .card .go::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -46%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .82), transparent);
  opacity: 0;
  transform: skewX(-16deg);
  transition: transform .55s ease, opacity .2s ease;
  pointer-events: none;
}

/* Premium corner plaques: readable, compact and visually consistent. */
.page-shell .card-grid > .card .card-rec-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  display: inline-flex;
  min-height: 24px;
  max-width: calc(100% - 10px);
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 8px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px 13px 6px 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(11, 35, 86, .28);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    0 6px 14px rgba(30, 71, 148, .20);
  animation: platform-badge-breathe 3.8s ease-in-out infinite;
}

.page-shell .card-grid > .card .card-rec-badge::before {
  content: "✦";
  color: rgba(255, 255, 255, .9);
  font-size: 8px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .6));
}

.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, #e83355 0%, #f45468 52%, #d92348 100%);
}

.page-shell .card-grid > .card .rec-type-2,
.page-shell .card-grid > .card .badge-color-premium {
  background: linear-gradient(120deg, #225ee7 0%, #377dff 50%, #6559ed 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: 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);
  }

  .page-shell .card-grid > .card:hover .go::before {
    opacity: .9;
    transform: translateX(440%) skewX(-16deg);
  }
}

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::before {
  background: linear-gradient(100deg, transparent, rgba(106, 151, 255, .03), rgba(111, 162, 255, .20), rgba(49, 212, 194, .05), transparent);
}

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-card-sweep {
  0%, 58% { opacity: 0; transform: translateX(0) skewX(-15deg); }
  64% { opacity: .78; }
  78% { opacity: .28; }
  84%, 100% { opacity: 0; transform: translateX(455%) skewX(-15deg); }
}

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

@media (max-width: 600px) {
  .page-shell .card-grid > .card::before {
    width: 28%;
    opacity: 0;
    animation-duration: 9s;
  }

  .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 .card-rec-badge {
    top: 5px;
    right: 5px;
    min-height: 19px;
    padding: 2px 6px;
    border-radius: 5px 10px 5px 10px;
    font-size: 9px;
  }

  .page-shell .card-grid > .card .card-rec-badge::before { font-size: 6px; }
}

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

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

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

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

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

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

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

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

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

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

  /* Floating actions: one coherent vertical dock with theme-specific material. */
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn) {
    isolation:isolate;
    overflow:visible;
    border:1px solid color-mix(in srgb,var(--ng-mobile-edge) 68%,#fff)!important;
    background-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;
    animation:ng-mobile-float-rest calc(5.4s / var(--ng-motion-speed)) ease-in-out infinite!important;
  }
  html.ng-skin-active :is(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn)::before {
    content:"";
    position:absolute;
    inset:-5px;
    z-index:-1;
    border:1px solid color-mix(in srgb,var(--ng-mobile-edge) 55%,transparent);
    border-radius:inherit;
    opacity:.42;
    pointer-events:none;
  }

  /* 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; }
  .theme-mode-toggle { bottom:var(--ng-float-bottom)!important; }
  body.theme-has-service .theme-mode-toggle { bottom:calc(var(--ng-float-bottom) + var(--ng-float-step))!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(.theme-mode-toggle,.activity-hall-toggle,.page-shell .service-float-btn):active::before {
    animation:ng-mobile-float-ring .5s ease-out both;
  }
  html.ng-skin-active .page-shell .service-float-btn span,
  html.ng-skin-active .theme-mode-icon,
  html.ng-skin-active .activity-hall-toggle > span {
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
  }

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

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

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

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

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

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

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

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

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

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

/* 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,#enter-button,
    .collector-pagination button,
    .collector-episode,.collector-episodes-more,.common-tool-download,
    .activity-apply-button,.activity-submit-button,.site-share-action,
    .ng-home-popup-action,.button,.el-button
  ) { min-height:44px!important; }

  :is(
    .theme-mode-toggle,.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,.site-share-panel,.collector-detail-dialog) {
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }

  :is(button,a,[role="button"],[role="tab"],input,select,textarea):focus-visible {
    outline:3px solid color-mix(in srgb,var(--ng-accent,#2f6bff) 34%,transparent)!important;
    outline-offset:3px;
  }
}

@media (max-width:430px) {
  .page-shell .trial-featured,
  .page-shell .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .page-shell .game-card { gap:5px; padding:5px; }
  .page-shell .game-card strong { font-size:13px; }
  .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(2,minmax(0,1fr)); }
  .page-shell .category-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

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

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

/*
 * NG public design system
 * Structural tokens and shared interaction states only. Theme files continue
 * to own color, material, illustration and motion language.
 */
:root {
  --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-motion-fast: 160ms;
  --ui-motion-base: 220ms;
  --ui-motion-slow: 320ms;
  --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] :where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 34%, transparent);
  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, .common-tools-panel) {
  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, .common-tools-panel) {
  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, .common-tools-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,
  .common-tool-download,
  .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;
}

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

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

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

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

html[data-ui-theme] :where(
  .collector-card,
  .common-tool-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(
  .site-share-backdrop,
  .activity-hall-backdrop,
  .ng-home-popup,
  .collector-detail-overlay
) {
  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(
  .site-share-panel,
  .activity-hall-panel,
  .ng-home-popup-card
) {
  width: min(640px, 100%) !important;
  max-height: min(88dvh, 820px) !important;
  overscroll-behavior: contain;
}

html[data-ui-theme] .collector-detail-dialog {
  width: min(1160px, 100%) !important;
  max-height: min(88dvh, 820px) !important;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  html[data-ui-theme] .collector-detail-dialog { width: min(760px, 100%) !important; }
}

/* 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,
  .collector-info-column
) {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

html[data-ui-theme] :where(
  .site-share-close,
  .activity-hall-close,
  .ng-home-popup-close,
  .collector-detail-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(
  .theme-mode-toggle,
  .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;
}

html[data-ui-theme] body :where(
  .theme-mode-toggle,
  .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,
  .common-tools-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(
    .site-share-backdrop,
    .activity-hall-backdrop,
    .collector-detail-overlay
  ) {
    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(
    .site-share-panel,
    .activity-hall-panel,
    .collector-detail-dialog
  ) {
    width: 100% !important;
    max-height: 96dvh !important;
  }

  html[data-ui-theme] :where(.common-tools-group) {
    padding: var(--ui-space-4) !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, .common-tools-grid) {
    gap: 10px !important;
  }

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

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

  html[data-ui-theme] :where(.common-tools-group) {
    padding: var(--ui-space-3) !important;
  }
}

@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: theme art, card density and mobile action hub. */
.page-shell header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

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

.ng-theme-hero-art {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: min(48%, 620px);
  pointer-events: none;
  opacity: .66;
  mask-image: linear-gradient(90deg, transparent 0, #000 36%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
}

.ng-theme-hero-art picture,
.ng-theme-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 48%;
}

.ng-theme-hero-art[hidden] {
  display: none;
}

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

.card-grid > .card.card--featured {
  position: relative;
}

.card-grid > .card.card--compact {
  padding-block: 14px;
}

.card--compact .avatar {
  width: 70px;
  height: 70px;
}

.card--compact .desc,
.card--compact .rating {
  display: none;
}

.card--compact .go {
  min-height: 44px;
}

.card--featured .avatar {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ng-accent, #2f6bff) 9%, transparent),
    0 14px 30px rgba(20, 55, 120, .16);
}

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-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 .common-tools-heading,
.ng-page-skeleton .collector-page-heading {
  width: calc(100% - (var(--ui-section-inner) * 2));
  margin-inline: var(--ui-section-inner);
}

.ng-page-skeleton .common-tools-heading,
.ng-page-skeleton .collector-page-heading {
  min-height: 0 !important;
  padding: 0;
}

.ng-page-skeleton .common-tools-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.data-card,
.analytics-card,
.stat-card {
  border: 1px solid color-mix(in srgb, var(--ng-accent, #2f6bff) 18%, var(--ng-line, #dbe5f4));
  background: color-mix(in srgb, var(--ng-panel-solid, #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;
}

.ng-page-inactive .ng-theme-scene-orbit,
.ng-page-inactive .ng-theme-scene-signal {
  animation-play-state: paused;
}

@media (min-width: 900px) {
  .card-grid > .card.card--featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 132px 1fr minmax(160px, 220px);
    align-items: center;
    gap: 22px;
  }

  .card--featured .avatar {
    grid-row: 1;
  }

  .card--featured .meta {
    align-items: flex-start;
    text-align: left;
  }

  .card--featured .go {
    width: 100%;
    align-self: stretch;
  }
}

@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-theme-hero-art {
    width: 58%;
    opacity: .52;
    mask-image: linear-gradient(90deg, transparent 0, #000 48%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48%);
  }

  .ng-action-hub-toggle,
  .ng-scroll-top {
    position: fixed;
    z-index: 2147483200;
    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;
    opacity: 0;
    pointer-events: none;
  }

  .ng-floating-hub-enabled .theme-mode-toggle,
  .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 .theme-mode-toggle,
  .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 .theme-mode-toggle {
    bottom: calc(80px + env(safe-area-inset-bottom)) !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;
  }

  .card-grid > .card.card--featured {
    grid-column: 1 / -1;
  }

  .card-grid > .card.card--featured .desc {
    display: block;
  }

  .card-grid > .card.card--compact .avatar {
    width: 58px;
    height: 58px;
  }
}

@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-theme-hero-art,
  .ng-action-hub-toggle,
  .ng-scroll-top {
    transition: none;
  }

  .ng-theme-hero-art * {
    animation: 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));
  -webkit-backdrop-filter: blur(9px) saturate(.82);
  backdrop-filter: blur(9px) saturate(.82);
  animation: ngServiceBackdropIn .2s ease-out both;
}

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: linear-gradient(150deg, rgba(255,255,255,.97), rgba(247,249,255,.94));
  box-shadow: 0 22px 58px rgba(18, 45, 98, .18), inset 0 1px rgba(255,255,255,.88);
  animation: ngServicePanelIn .26s cubic-bezier(.22, 1, .36, 1) both;
  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: rgba(251, 252, 255, .92);
  backdrop-filter: blur(14px) saturate(1.15);
}

.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: 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: rgba(249, 251, 255, .92);
  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: linear-gradient(155deg, rgba(16, 30, 51, .97), rgba(10, 22, 39, .95));
  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: rgba(13, 26, 45, .88);
}

html[data-theme="dark"] .page-shell .service-panel .service-item {
  border-color: #2a4162;
  background: rgba(18, 36, 61, .88);
  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 ngServicePanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: none; }
}

@keyframes ngServiceBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@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);
    -webkit-backdrop-filter: blur(7px) saturate(.86);
    backdrop-filter: blur(7px) saturate(.86);
  }

  .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; }
}

/* 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) .theme-mode-toggle,
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;
}