/* The MAHANA 247X365 palette extends the existing royal-dark layout. */
.supreme-site {
  --night: #080b18;
  --indigo: #11162c;
  --gold-light: #ffdc94;
  --gold: #f5d18d;
  --muted: #b7bdd8;
  background:
    radial-gradient(ellipse 76rem 40rem at 82% -12rem, #392361 0, transparent 74%),
    radial-gradient(ellipse 55rem 52rem at 100% 75vh, #0d3943 0, transparent 68%),
    var(--night);
}
.supreme-site .topbar {
  background: linear-gradient(100deg, #131329f2, #14152af2 50%, #262042f2);
  border-bottom-color: #7761a85e;
}
.supreme-site .sidebar {
  background: radial-gradient(ellipse at 0 4%, #272044, transparent 48%), #101225;
  border-right-color: #74649e4d;
  overflow-x: hidden;
}
.supreme-site .identity strong { font-size: clamp(17px, 1.7vw, 25px); }
.supreme-site .sidenav-link.current { background: #4e367570; border-color: #b894ff79; }
.supreme-site .utilitybar { color: #ccc0ef; }
.supreme-site .btn.gold {
  background: linear-gradient(125deg, #fff0b5 0%, #f3be69 58%, #f9d89a 100%);
  color: #231635;
}
.supreme-site .panel {
  background: linear-gradient(150deg, #211b37, #121a30 78%);
  border-color: #7768a673;
}
.supreme-site .panel p { color: #d3d4e7; }
.supreme-site section[id] { scroll-margin-top: 92px; }
.supreme-site .footer {
  margin-top: 28px;
  border-color: #8770a65c;
  background: linear-gradient(110deg, #17172e, #101d2d);
}

.crest-gold { --world-accent: #ffda8e; --crest-filter: none; }
.crest-coral { --world-accent: #ff8e80; --crest-filter: hue-rotate(328deg) saturate(1.35); }
.crest-mint { --world-accent: #78edb9; --crest-filter: hue-rotate(100deg) saturate(1.25); }
.crest-blue { --world-accent: #64d9ff; --crest-filter: hue-rotate(158deg) saturate(1.35); }
.crest-violet { --world-accent: #c8a1ff; --crest-filter: hue-rotate(231deg) saturate(1.22); }
.crest-aqua { --world-accent: #6ee8ed; --crest-filter: hue-rotate(138deg) saturate(1.3); }
.crest-rose { --world-accent: #ffa6d3; --crest-filter: hue-rotate(273deg) saturate(1.2); }

.supreme-crest {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 68px;
  aspect-ratio: 1;
  padding: 9px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--world-accent) 20%, #151329), #100e20 74%);
  border: 1px solid color-mix(in srgb, var(--world-accent) 52%, #25203b);
  border-radius: 17px;
  box-shadow: inset 0 0 14px #ffffff10, 0 8px 22px #0607107f;
}
.supreme-crest img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: var(--crest-filter);
}

.supreme-site .banner-gallery { gap: 0; margin: 0 0 12px; }
.supreme-site .banner-slides {
  border: 1px solid #c5a0ff78;
  border-radius: clamp(12px, 1.8vw, 24px);
  box-shadow: 0 16px 48px #070512bb, 0 0 36px #724dd22c;
}
.banner-nav { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 0 0; }
.supreme-site .banner-controls { gap: 4px; }
.supreme-site .banner-choice { display: grid; place-items: center; width: 27px; height: 30px; }
.supreme-site .banner-choice span {
  padding: 0;
  width: 9px;
  height: 9px;
  border-radius: 8px;
  background: #7c77a6;
  border: 0;
  transition: width .18s ease, background .18s ease;
}
.supreme-site .banner-choice input:checked + span { width: 19px; background: #ffe0a0; }
.banner-arrow {
  width: 36px;
  height: 32px;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid #a287d05e;
  color: #f9e8bd;
  background: #231b3e;
  font-size: 23px;
}
.banner-arrow:hover { background: #3b2e5d; }

.home-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 8px 0 25px;
}
.home-quick-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  color: #fbf7ff;
  font-size: clamp(.78rem, 1.1vw, .96rem);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--world-accent) 40%, #1a1833);
  background: linear-gradient(115deg, color-mix(in srgb, var(--world-accent) 22%, #171830), #12182b);
  border-radius: 12px;
}
.home-quick-nav a:hover { border-color: var(--world-accent); }
.home-quick-nav a span { color: var(--world-accent); font-size: 1.12rem; }
.home-collection { margin: 20px 0 27px; }
.home-collection > header {
  margin-bottom: 15px;
  border-radius: 13px;
  border-left: 3px solid var(--section-color);
  padding: 13px 16px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--section-color) 16%, #15162e), transparent 94%);
}
.collection-fast { --section-color: #ff9dd2; }
.collection-library { --section-color: #7de8cd; }
.home-collection h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 3px 0; color: #fcf7ff; }
.home-collection p { color: #c9cbe1; }
.home-collection .eyebrow { color: var(--section-color); }
.supreme-site .fast-play-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.supreme-site .cricket-panel { border-color: #459dcf66; }
.supreme-site .cricket-activity { border-color: #b67bc66e; }

.supreme-site .motion-card {
  border-color: color-mix(in srgb, var(--game-color) 43%, #26203d);
  background: linear-gradient(150deg, color-mix(in srgb, var(--game-color) 13%, #1a1930), #12182d 78%);
}
.supreme-site .motion-card:hover, .supreme-site .motion-card:focus-visible { border-color: var(--accent); }
.motion-card .game-art {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 55% 48%, color-mix(in srgb, var(--game-color) 28%, #0b0e22), #090d1a 80%);
}
.motion-scene {
  --rx: 0deg;
  --ry: 0deg;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .24s ease;
}
.supreme-site .motion-scene img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: transparent;
  transform-origin: 50% 52%;
  transition: filter .22s ease;
}
.supreme-site .motion-card:not(.fast-play-grid .motion-card) .motion-scene img {
  max-width: 148px;
}
.motion-sheen {
  position: absolute;
  z-index: 1;
  inset: -35%;
  transform: translateX(-72%) skewX(-24deg);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 42%, #ffffff47 50%, transparent 58%);
}
.motion-scene.is-in-view img {
  animation: mahana-lift 3.8s cubic-bezier(.45, .04, .22, 1) both;
}
.motion-scene.is-in-view .motion-sheen {
  animation: mahana-sheen 2.8s ease-out both;
}
.motion-card:hover .motion-scene img, .motion-card:focus-visible .motion-scene img {
  filter: brightness(1.13) saturate(1.14);
}
@keyframes mahana-lift {
  0%, 100% { transform: perspective(520px) rotateY(0deg) scale(1); }
  28% { transform: perspective(520px) rotateY(-10deg) rotateX(4deg) scale(1.055); }
  60% { transform: perspective(520px) rotateY(9deg) rotateX(-3deg) scale(1.045); }
}
@keyframes mahana-sheen {
  0%, 100% { opacity: 0; }
  25%, 52% { opacity: .75; }
  74%, 100% { transform: translateX(72%) skewX(-24deg); }
}
.supreme-site .game-bottom b { color: #fff6fa; }
.supreme-site .game-number { color: #f4e9ff; background: #100d20dd; }
.game-detail-art {
  --game-color: #ab80f5;
  display: grid;
  place-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #9272c463;
  border-radius: 17px;
  background: radial-gradient(ellipse at 50% 24%, #302152, #10162b 73%);
}
.game-detail-art .motion-scene { width: min(100%, 164px); height: 164px; border-radius: 13px; }
.game-detail-art.is-fast-art .motion-scene { width: min(100%, 356px); height: auto; aspect-ratio: 356 / 234; }

.universe-showcase {
  margin: 30px 0 0;
  padding: clamp(14px, 2.8vw, 32px);
  border-radius: 22px;
  border: 1px solid #b184c875;
  background:
    radial-gradient(ellipse at 2% 3%, #5030609c, transparent 55%),
    radial-gradient(ellipse at 100% 30%, #17445b9e, transparent 58%),
    linear-gradient(120deg, #1e1732, #10182d 85%);
  box-shadow: 0 18px 48px #080815ba;
}
.universe-intro, .supreme-admin-hero {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 27px);
  margin-bottom: 20px;
}
.universe-intro > .supreme-crest, .supreme-admin-hero > .supreme-crest {
  width: clamp(58px, 11vw, 104px);
  border-radius: 19px;
}
.universe-intro h2, .supreme-admin-hero h1 {
  font-size: clamp(1.8rem, 4.1vw, 3.45rem);
  font-weight: 780;
  color: #fff3cf;
  margin: 3px 0 4px;
}
.universe-intro strong { display: block; font-size: clamp(.75rem, 1.5vw, 1rem); letter-spacing: .14em; color: #f9cc83; }
.universe-intro p, .supreme-admin-hero p { max-width: 66ch; color: #e2def1; margin-top: 7px; }
.universe-intro-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.universe-intro-meta span {
  padding: 4px 10px;
  border: 1px solid #b894d27d;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 650;
  color: #f6eaff;
  background: #231a39;
}
.universe-worlds, .universe-programs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.universe-card, .universe-program {
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--world-accent) 55%, #27223d);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--world-accent) 20%, #19162d), #12182c 75%);
}
.universe-card:hover, .universe-program:hover { border-color: var(--world-accent); }
.universe-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.universe-card-caption { color: var(--world-accent); font-size: .75rem; font-weight: 750; margin-top: 2px; }
.universe-card h3, .universe-program h3 { font-size: clamp(.94rem, 1.35vw, 1.19rem); color: #fff8f2; }
.universe-card p, .universe-program p { font-size: .83rem; color: #d5d7ed; }
.universe-card-arrow { position: absolute; top: 13px; right: 13px; color: var(--world-accent); }
.universe-programs { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.universe-program { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.universe-program > span:last-child { margin-left: auto; color: var(--world-accent); }
.universe-program .supreme-crest { width: 43px; padding: 6px; border-radius: 11px; }

.supreme-admin-hero {
  padding: clamp(14px, 3.2vw, 32px);
  border-radius: 18px;
  border: 1px solid #a285d393;
  background:
    radial-gradient(ellipse at 0 10%, #62416f, transparent 70%),
    linear-gradient(110deg, #231a42, #17324b);
}
.supreme-site .admin-command-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--module-color) 20%, #1c1733), #141a2e 72%);
}
.supreme-site .admin-command-card > span { color: var(--module-color); }
.supreme-site .admin-command-stat { background: linear-gradient(130deg, #302148, #17273d); }
.supreme-site .auth-wrap { background: linear-gradient(135deg, #262044, #101f34); }
.supreme-site .auth-brand img { object-fit: contain; }
.supreme-site .member-access { border-color: #b69d61; }

@media (max-width: 1220px) {
  .supreme-site .fast-play-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 810px) {
  .universe-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .supreme-site .fast-play-grid, .home-quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-quick-nav a { padding: 9px; }
  .supreme-site .top-logout { display: inline-block; }
  .universe-intro, .supreme-admin-hero { align-items: flex-start; }
  .universe-intro p { font-size: .88rem; }
  .universe-programs { grid-template-columns: minmax(0, 1fr); }
  .universe-card .supreme-crest { width: 51px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .supreme-site { scroll-behavior: auto; }
  .motion-scene, .motion-scene img, .motion-sheen, .banner-choice span {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.owner-setup-shell { max-width: 720px; margin: 6vh auto; padding: 0 16px; }
.owner-reference { display: block; margin: 8px 0 14px; color: #f5d18d; overflow-wrap: anywhere; }