/* 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,
.lottery-shell .prediction-card {
  box-shadow: 0 13px 34px rgba(34, 67, 124, .085), inset 0 1px rgba(255, 255, 255, .78);
}

.collector-catalog-head,
.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:not(.collector-catalog-head),
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"] .collector-catalog-head,
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-bottom-color: rgba(62, 88, 126, .7);
  background:
    radial-gradient(circle at 100% 0, rgba(72, 123, 235, .1), transparent 38%),
    linear-gradient(145deg, #11223a, #0c1a2d);
}

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