/* Ripe Mango — site-wide color theme */
:root {
  color-scheme: dark;
  --sea-950: #2f1a00;
  --sea-900: #4a2900;
  --sea-800: #713f05;
  --sea-700: #9a5808;
  --sea-surface: rgba(64, 35, 0, .9);
  --sea-panel: rgba(111, 62, 5, .68);
  --sea-line: rgba(255, 196, 61, .3);
  --sea-primary: #ffb000;
  --sea-secondary: #ff7a18;
  --sea-highlight: #ffe08a;
  --sea-text: #fff8e8;
  --sea-muted: #e7ca91;
  --sea-ink: #3d2200;
}

html { background: var(--sea-950); }
body {
  background:
    radial-gradient(circle at 14% 6%, rgba(255, 176, 0, .22), transparent 38%),
    radial-gradient(circle at 88% 16%, rgba(255, 122, 24, .18), transparent 40%),
    radial-gradient(circle at 50% 92%, rgba(210, 112, 0, .26), transparent 46%),
    linear-gradient(160deg, var(--sea-950), var(--sea-900) 48%, var(--sea-800)) !important;
  color: var(--sea-text) !important;
}
body::before {
  background-image:
    radial-gradient(3px 3px at 10% 20%, rgba(255, 224, 138, .9) 0, transparent 100%),
    radial-gradient(2px 2px at 82% 12%, rgba(255, 122, 24, .82) 0, transparent 100%),
    radial-gradient(2px 2px at 45% 35%, rgba(255, 176, 0, .76) 0, transparent 100%),
    radial-gradient(2px 2px at 66% 66%, rgba(255, 205, 92, .72) 0, transparent 100%),
    radial-gradient(2px 2px at 24% 78%, rgba(255, 158, 24, .66) 0, transparent 100%),
    radial-gradient(2px 2px at 92% 50%, rgba(255, 235, 173, .62) 0, transparent 100%) !important;
}
::selection { background: var(--sea-primary); color: var(--sea-ink); }

.topbar,
.cat-tabs,
.search-bar-wrap,
.detail-bar,
.legal-bar {
  background: rgba(47, 26, 0, .92) !important;
  border-color: var(--sea-line) !important;
  box-shadow: 0 1px 16px rgba(47, 26, 0, .4) !important;
}
.topbar-logo,
.sec-label,
.filter-title,
.detail-bar-title,
.gid-name,
.sec-title-text,
.related-title,
.legal-pg-title,
.legal-sec-h2 {
  color: var(--sea-text) !important;
  text-shadow: 0 0 10px rgba(255, 176, 0, .2) !important;
}
.topbar-logo { color: var(--sea-highlight) !important; }
.hamburger-btn,
.legal-back {
  background: rgba(255, 176, 0, .15) !important;
  color: var(--sea-highlight) !important;
  border-color: rgba(255, 196, 61, .36) !important;
  box-shadow: 0 0 12px rgba(255, 176, 0, .22) !important;
}
.hamburger-menu {
  background: rgba(74, 41, 0, .98) !important;
  box-shadow: 0 12px 30px rgba(35, 18, 0, .55) !important;
}
.hamburger-item { color: var(--sea-muted) !important; border-color: var(--sea-line) !important; }
.hamburger-item.active { color: var(--sea-highlight) !important; }
.hamburger-backdrop { background: rgba(34, 17, 0, .7) !important; }

.search-input {
  background: rgba(113, 63, 5, .74) !important;
  border-color: rgba(255, 196, 61, .38) !important;
  color: var(--sea-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 176, 0, .08);
}
.search-input::placeholder { color: #c7a76c; }
.search-cancel,
.sec-more,
.filter-back,
.bold-card-tag,
.zig-tag,
.spot-cat,
.not-found button,
.legal-page a { color: var(--sea-primary) !important; }

.sec-cnt,
.filter-cnt,
.empty-msg,
.site-footer,
.agcard-nm,
.gcard-nm,
.rank-tag,
.zig-desc,
.spot-desc,
.mag-desc,
.promo-text,
.rel-nm,
.not-found,
.legal-pg-date,
.legal-sec-body { color: var(--sea-muted) !important; }

.feat-lantern,
.bold-card,
.ticket-card,
.bubble-card,
.about-section,
.howplay-section,
.legal-intro-sec,
.legal-sec {
  background: var(--sea-panel) !important;
  border-color: var(--sea-line) !important;
  box-shadow: 0 8px 28px rgba(35, 18, 0, .24) !important;
}
.agcard-img,
.gcard-img,
.lantern-card-img,
.trio-img,
.banner-single,
.rel-img,
.gid-icon {
  border-color: rgba(255, 196, 61, .3) !important;
  box-shadow: 0 0 14px rgba(255, 176, 0, .16) !important;
}
.spot-item,
.mag-row { border-color: rgba(255, 196, 61, .18) !important; }
.stack-card { border-color: var(--sea-900) !important; }

.topbar-search-btn,
.more-btn,
.loadmore-btn,
.detail-back,
.play-btn,
.totop-btn {
  background: linear-gradient(135deg, var(--sea-secondary), var(--sea-primary)) !important;
  color: var(--sea-ink) !important;
  border-color: rgba(255, 224, 138, .4) !important;
  box-shadow: 0 0 18px rgba(255, 176, 0, .3) !important;
}
.cat-tab.active,
.feat-lantern-badge,
.fresh-badge,
.poster-cat-badge,
.banner-badge {
  background: linear-gradient(135deg, var(--sea-highlight), var(--sea-primary)) !important;
  color: var(--sea-ink) !important;
  box-shadow: 0 0 14px rgba(255, 176, 0, .26) !important;
}
.cat-tab,
.gid-tag {
  background: rgba(113, 63, 5, .72) !important;
  border-color: var(--sea-line) !important;
  color: var(--sea-muted) !important;
}
.gid-tag-free {
  background: rgba(255, 176, 0, .16) !important;
  color: var(--sea-highlight) !important;
}
.rank-num,
.spot-bullet { color: var(--sea-secondary) !important; text-shadow: 0 0 8px rgba(255, 122, 24, .4) !important; }
.spot-name {
  background: linear-gradient(135deg, var(--sea-highlight), var(--sea-secondary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.lantern-card-img::after,
.banner-ovl,
.fresh-ovl { background: linear-gradient(transparent, rgba(47, 26, 0, .94)) !important; }
.game-poster::after { background: linear-gradient(transparent 55%, var(--sea-950)) !important; }
.about-body,
.howplay-body,
.legal-intro-sec { color: #fff0c8 !important; }

body.play-shell {
  background: var(--sea-950) !important;
  color: var(--sea-text) !important;
}
.play-shell {
  --c-nav: rgba(74, 41, 0, .97);
  --c-text: #fff8e8;
  --c-grad-s: #ff7a18;
  --c-grad-e: #ffb000;
}
.play-shell .navbar { border-color: var(--sea-line) !important; box-shadow: 0 2px 14px rgba(47, 26, 0, .45) !important; }
.play-shell .nav-back { background: rgba(255, 248, 232, .14) !important; }
.play-shell .nav-back:hover { background: rgba(255, 248, 232, .23) !important; }
.play-shell .nav-back:active { background: rgba(255, 176, 0, .24) !important; }
.play-shell .ga-wrap { background: #211100 !important; }
.play-shell .goback { box-shadow: 0 4px 16px rgba(255, 176, 0, .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;
}