/* Lemon Cobalt — butter cream + jewel blue + golden yellow */
:root {
  color-scheme: light;
  --cobalt-deep: #173b78;
  --cobalt-nav: #214d96;
  --cobalt-primary: #2f6fda;
  --cobalt-sky: #69b8ed;
  --cobalt-gold: #e6aa22;
  --cobalt-lemon: #ffe58a;
  --cobalt-cream: #fff8dd;
  --cobalt-mist: #e9f4ff;
  --cobalt-paper: rgba(255, 255, 255, .82);
  --cobalt-line: rgba(47, 111, 218, .19);
  --cobalt-text: #263858;
  --cobalt-muted: #68758d;
}

html { background: #fff9e6; }
body {
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 229, 138, .38), transparent 34%),
    radial-gradient(circle at 91% 13%, rgba(105, 184, 237, .2), transparent 38%),
    radial-gradient(circle at 48% 94%, rgba(47, 111, 218, .1), transparent 42%),
    linear-gradient(155deg, #fffdf4 0%, var(--cobalt-cream) 50%, var(--cobalt-mist) 100%) !important;
  color: var(--cobalt-text) !important;
}
::selection { background: var(--cobalt-lemon); color: var(--cobalt-deep); }

.topbar,
.detail-bar,
.legal-bar {
  background: linear-gradient(110deg, var(--cobalt-deep), var(--cobalt-nav)) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  box-shadow: 0 5px 22px rgba(23, 59, 120, .22) !important;
}
.topbar-logo,
.detail-bar-title,
.legal-bar-title { color: #fffdf2 !important; text-shadow: none !important; }
.hamburger-btn,
.detail-back,
.legal-back {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: none !important;
}
.hamburger-menu {
  background: rgba(23, 59, 120, .98) !important;
  box-shadow: 0 14px 32px rgba(14, 39, 82, .32) !important;
}
.hamburger-item { color: #edf5ff !important; border-color: rgba(255, 255, 255, .11) !important; }
.hamburger-item.active { color: var(--cobalt-lemon) !important; }
.hamburger-backdrop { background: rgba(18, 43, 84, .42) !important; }

.search-bar-wrap { background: transparent !important; border-color: transparent !important; }
.search-input {
  background: rgba(255, 255, 255, .88) !important;
  color: var(--cobalt-text) !important;
  border: 1px solid var(--cobalt-line) !important;
  box-shadow: 0 6px 18px rgba(32, 73, 137, .09) !important;
}
.search-input:focus {
  border-color: rgba(47, 111, 218, .55) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 218, .11), 0 6px 18px rgba(32, 73, 137, .09) !important;
}
.search-input::placeholder { color: #8490a4; }

.sec-label,
.filter-title,
.legal-pg-title,
.legal-sec-h2,
.sec-title-text,
.related-title,
.glow-feat-title,
.sun-badge-name,
.rname,
.mag-nm { color: var(--cobalt-text) !important; text-shadow: none !important; }
.sec-more,
.filter-back,
.not-found button,
.sun-badge-cat,
.legal-page a { color: var(--cobalt-primary) !important; }
.sec-cnt,
.filter-cnt,
.empty-msg,
.site-footer,
.feat-desc,
.rtag,
.rdesc,
.kcard-nm,
.agcard-nm,
.gcard-nm,
.twcard-nm,
.tgcard-nm,
.twcard-desc,
.tgcard-desc,
.avcard-nm,
.mag-desc,
.glow-feat-desc,
.ring-nm,
.sun-badge-desc,
.promo-text,
.rel-nm,
.not-found,
.legal-pg-date,
.legal-sec-body,
.legal-sec p,
.legal-sec li { color: var(--cobalt-muted) !important; }

.glow-feat {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 229, 138, .36), transparent 56%),
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(237, 247, 255, .78)) !important;
  border: 1px solid var(--cobalt-line) !important;
  box-shadow: 0 12px 30px rgba(32, 73, 137, .1) !important;
}
.sun-badge-item,
.about-section,
.howplay-section,
.legal-intro-sec,
.legal-sec {
  background: var(--cobalt-paper) !important;
  border-color: var(--cobalt-line) !important;
  box-shadow: 0 9px 26px rgba(32, 73, 137, .09) !important;
}
.mag-row,
.ritem { border-color: rgba(47, 111, 218, .14) !important; }

.feat-badge,
.spot-badge,
.adv-badge,
.banner-badge,
.glow-feat-badge,
.poster-cat-badge {
  background: linear-gradient(135deg, var(--cobalt-primary), var(--cobalt-sky)) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(47, 111, 218, .23) !important;
}
.more-btn,
.loadmore-btn,
.play-btn,
.totop-btn {
  background: linear-gradient(135deg, var(--cobalt-primary), var(--cobalt-sky)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 7px 20px rgba(47, 111, 218, .24) !important;
}
.loading-ring {
  border-color: rgba(47, 111, 218, .17) !important;
  border-top-color: var(--cobalt-gold) !important;
  box-shadow: 0 0 12px rgba(230, 170, 34, .2) !important;
}
.rnum { color: #8c98ab !important; }
.rnum.rn-1 { color: var(--cobalt-gold) !important; text-shadow: none !important; }
.rnum.rn-2 { color: var(--cobalt-primary) !important; }
.rnum.rn-3 { color: var(--cobalt-sky) !important; text-shadow: none !important; }
.rplay { color: var(--cobalt-primary) !important; text-shadow: none !important; }

.kcard-img,
.agcard-img,
.gcard-img,
.twcard-img,
.tgcard-img,
.rthumb,
.rel-img,
.gid-icon {
  border-color: rgba(47, 111, 218, .22) !important;
  box-shadow: 0 6px 17px rgba(32, 73, 137, .12) !important;
}
.spot-card,
.adv-hero {
  border-color: rgba(230, 170, 34, .3) !important;
  box-shadow: 0 9px 24px rgba(23, 59, 120, .15) !important;
}
.spot-card::after,
.adv-hero::after { background: linear-gradient(transparent, rgba(18, 43, 84, .92)) !important; }
.ring-img {
  border-image: linear-gradient(135deg, var(--cobalt-gold), var(--cobalt-lemon), var(--cobalt-primary)) 1 !important;
}
.sun-badge-icon {
  background: radial-gradient(circle, #fff2a8, var(--cobalt-gold)) !important;
  color: #60420b !important;
}
.glow-feat-img { box-shadow: 0 7px 20px rgba(47, 111, 218, .2) !important; }

.game-poster::after { background: linear-gradient(transparent 52%, rgba(18, 43, 84, .93)) !important; }
.gid-name { color: #fff !important; text-shadow: 0 2px 8px rgba(14, 39, 82, .6) !important; }
.gid-tag {
  background: rgba(255, 255, 255, .84) !important;
  color: var(--cobalt-text) !important;
  border-color: rgba(255, 255, 255, .74) !important;
}
.gid-tag-free {
  background: rgba(230, 170, 34, .94) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.about-body,
.howplay-body,
.legal-intro-sec { color: #50627c !important; }
.legal-pg-icon { filter: drop-shadow(0 5px 12px rgba(230, 170, 34, .24)) !important; }

body.play-shell { background: var(--cobalt-deep) !important; color: #fffdf2 !important; }
.play-shell {
  --c-nav: rgba(23, 59, 120, .98);
  --c-text: #fffdf2;
  --c-grad-s: #2f6fda;
  --c-grad-e: #e6aa22;
}
.play-shell .navbar { border-color: rgba(255, 255, 255, .13) !important; box-shadow: 0 3px 16px rgba(14, 39, 82, .35) !important; }
.play-shell .nav-back { background: rgba(255, 255, 255, .14) !important; }
.play-shell .nav-back:hover { background: rgba(255, 255, 255, .23) !important; }
.play-shell .nav-back:active { background: rgba(255, 229, 138, .3) !important; }
.play-shell .ga-wrap { background: #102a57 !important; }
.play-shell .goback { box-shadow: 0 5px 18px rgba(47, 111, 218, .36) !important; }

.topbar-logo { display: inline-flex !important; align-items: center; gap: 8px; }
.site-logo-icon { display: block; width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }

/* Moderate layout variant — compact blue gaming shelf */
body.arena-home {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.arena-home .topbar {
  position: sticky !important;
  top: 0;
  z-index: 60;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 3px solid var(--cobalt-gold) !important;
  box-shadow: 0 6px 18px rgba(23, 59, 120, .16) !important;
}
.arena-home .topbar-logo {
  justify-content: flex-start;
  text-align: left;
  letter-spacing: .02em;
}
.arena-home .hamburger-btn {
  border-radius: 10px !important;
}
.arena-home .hamburger-menu {
  top: 58px !important;
  left: max(0px, calc((100vw - 1080px) / 2)) !important;
  right: auto !important;
  width: min(320px, 86vw);
  border-radius: 0 0 16px 16px;
}

.arena-home .search-bar-wrap {
  padding: 14px 16px 8px !important;
}
.arena-home .search-input {
  height: 44px;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .94) !important;
}

.arena-home section[class$="-sec"] {
  margin: 0 12px 24px;
}
.arena-home .sec-hd {
  padding: 14px 4px 10px;
}
.arena-home .sec-label {
  position: relative;
  padding-left: 12px;
  font-size: 16px;
}
.arena-home .sec-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: var(--cobalt-gold);
}
.arena-home .sec-more {
  padding: 6px 10px;
  border: 1px solid var(--cobalt-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
}

.arena-home .featured-sec {
  padding: 12px 16px 0;
}
.arena-home .glow-feat {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  min-height: 156px;
  padding: 12px;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .9) !important;
}
.arena-home .glow-feat-img {
  width: 132px;
  height: 132px;
  border-radius: 12px !important;
}
.arena-home .glow-feat-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.arena-home .glow-feat-title {
  font-size: 22px;
  margin-top: 8px;
}
.arena-home .glow-feat-desc {
  max-width: 520px;
  margin-top: 6px;
  line-height: 1.55;
}

.arena-home .ring-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 4px;
  overflow: visible;
}
.arena-home .ring-item {
  width: auto;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .65);
}
.arena-home .ring-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 9px !important;
  border: 2px solid var(--cobalt-gold) !important;
}
.arena-home .ring-nm {
  text-align: left;
  margin: 7px 2px 2px;
}

.arena-home .avatar-row {
  gap: 12px;
  padding: 8px 4px;
}
.arena-home .avcard {
  width: 72px;
  margin-left: 0;
}
.arena-home .avcard-img {
  width: 68px;
  height: 68px;
  border: 3px solid rgba(255, 255, 255, .8);
}

.arena-home .two-grid,
.arena-home .tri-grid,
.arena-home .kids-grid,
.arena-home .all-grid,
.arena-home .games-grid {
  gap: 12px;
  padding-left: 4px;
  padding-right: 4px;
}
.arena-home .twcard,
.arena-home .tgcard,
.arena-home .kcard,
.arena-home .agcard,
.arena-home .gcard {
  padding: 7px;
  border: 1px solid var(--cobalt-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .64);
}
.arena-home .twcard-img,
.arena-home .tgcard-img,
.arena-home .kcard-img,
.arena-home .agcard-img,
.arena-home .gcard-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}
.arena-home .twcard-nm,
.arena-home .tgcard-nm,
.arena-home .kcard-nm,
.arena-home .agcard-nm,
.arena-home .gcard-nm {
  text-align: left;
  margin-left: 2px;
}

.arena-home .mag-list,
.arena-home .rank-list,
.arena-home .sun-badge-list {
  padding-left: 4px;
  padding-right: 4px;
}
.arena-home .mag-row,
.arena-home .ritem,
.arena-home .sun-badge-item {
  padding: 11px;
  border: 1px solid var(--cobalt-line) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, .64) !important;
}
.arena-home .spot-card,
.arena-home .adv-hero {
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 14px !important;
}
.arena-home .flip-row {
  padding-left: 4px;
  padding-right: 4px;
}

.arena-home .more-btn,
.arena-home .loadmore-btn,
.arena-home .totop-btn {
  border-radius: 10px !important;
}
.arena-home .filter-hdr,
.arena-home .grid-sec {
  margin-left: 12px;
  margin-right: 12px;
}
.arena-home .site-footer {
  border-top: 1px solid var(--cobalt-line);
  margin-top: 28px;
}

/* Detail and secondary pages stay familiar, with the same compact geometry. */
.arena-detail .detail-bar,
.arena-legal .legal-bar {
  position: sticky !important;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--cobalt-gold) !important;
}
.arena-detail .game-poster {
  max-width: 900px;
  margin: 18px auto 0;
  border-radius: 14px;
}
.arena-detail .game-id-row,
.arena-detail .play-section,
.arena-detail .about-section,
.arena-detail .howplay-section,
.arena-detail .related-sec {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.arena-detail .gid-icon,
.arena-detail .rel-img {
  border-radius: 9px;
}
.arena-detail .play-btn,
.arena-play .nav-back,
.arena-play .goback {
  border-radius: 10px !important;
}
.arena-legal .legal-intro-sec,
.arena-legal .legal-sec {
  border-radius: 12px !important;
}

@media (min-width: 720px) {
  .arena-home .puzzle-sec .mag-list,
  .arena-home .girl-sec .rank-list,
  .arena-home .text-showcase-sec .sun-badge-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .arena-home .puzzle-sec .mag-row,
  .arena-home .girl-sec .ritem,
  .arena-home .text-showcase-sec .sun-badge-item {
    min-width: 0;
    margin-top: 0;
  }
  .arena-home .two-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .arena-home .tri-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .arena-home .kids-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .arena-home .all-grid,
  .arena-home .games-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .arena-detail .related-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 600px) {
  .arena-home .glow-feat {
    grid-template-columns: 100px 1fr;
    gap: 12px;
    min-height: 124px;
  }
  .arena-home .glow-feat-img {
    width: 100px;
    height: 100px;
  }
  .arena-home .glow-feat-title {
    font-size: 17px;
  }
  .arena-home .glow-feat-desc {
    display: none;
  }
  .arena-home .ring-row {
    display: flex;
    overflow-x: auto;
  }
  .arena-home .ring-item {
    flex: 0 0 92px;
  }
}

/* Visible page-level layout change: compact two-column dashboard. */
.arena-home .home-layout {
  display: block;
}
@media (min-width: 760px) {
  .arena-home .home-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 0 16px;
  }
  .arena-home .home-layout > section[class$="-sec"] {
    width: auto;
    min-width: 0;
    margin: 0;
    align-self: start;
  }
  .arena-home .home-layout > .featured-sec,
  .arena-home .home-layout > .puzzle-sec,
  .arena-home .home-layout > .all-sec,
  .arena-home .home-layout > .filter-hdr,
  .arena-home .home-layout > .grid-sec,
  .arena-home .home-layout > [id^="div-gpt-ad-"] {
    grid-column: 1 / -1;
  }
  .arena-home .home-layout > [id^="div-gpt-ad-"] {
    width: 100%;
    margin: 0;
  }
  .arena-home .home-layout .girl-sec .rank-list,
  .arena-home .home-layout .text-showcase-sec .sun-badge-list {
    grid-template-columns: 1fr;
  }
  .arena-home .home-layout .adv-sec .tri-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arena-home .home-layout .filter-hdr,
  .arena-home .home-layout .grid-sec {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}