/* Beach, Ocean & Sea Salt — site-wide color theme */
:root {
  color-scheme: light;
  --sea-deep: #075667;
  --sea-mid: #0b7c8b;
  --sea-primary: #18a6ad;
  --sea-sky: #8edbe2;
  --sea-sand: #f3c778;
  --sea-coral: #ef8d62;
  --sea-salt: #fffaf0;
  --sea-foam: #eefcf9;
  --sea-paper: rgba(255, 255, 255, .78);
  --sea-line: rgba(11, 124, 139, .2);
  --sea-ink: #173f49;
  --sea-muted: #617f84;
}

html { background: #dff4f3; }
body {
  background:
    radial-gradient(circle at 10% 5%, rgba(243, 199, 120, .35), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(142, 219, 226, .38), transparent 38%),
    radial-gradient(circle at 52% 92%, rgba(255, 250, 240, .82), transparent 44%),
    linear-gradient(155deg, var(--sea-salt) 0%, var(--sea-foam) 48%, #cdeef1 100%) !important;
  color: var(--sea-ink) !important;
}
body::before {
  background-image:
    radial-gradient(3px 3px at 10% 20%, rgba(255, 255, 255, .95) 0, transparent 100%),
    radial-gradient(2px 2px at 82% 12%, rgba(24, 166, 173, .3) 0, transparent 100%),
    radial-gradient(2px 2px at 45% 35%, rgba(243, 199, 120, .42) 0, transparent 100%),
    radial-gradient(2px 2px at 66% 66%, rgba(255, 255, 255, .9) 0, transparent 100%),
    radial-gradient(2px 2px at 24% 78%, rgba(239, 141, 98, .25) 0, transparent 100%),
    radial-gradient(2px 2px at 92% 50%, rgba(24, 166, 173, .3) 0, transparent 100%) !important;
}
::selection { background: var(--sea-sand); color: var(--sea-deep); }

.topbar,
.detail-bar,
.legal-bar {
  background: linear-gradient(110deg, var(--sea-deep), var(--sea-mid)) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 5px 22px rgba(7, 86, 103, .2) !important;
}
.cat-tabs,
.search-bar-wrap {
  background: rgba(255, 250, 240, .86) !important;
  border-color: var(--sea-line) !important;
  box-shadow: 0 4px 18px rgba(7, 86, 103, .08) !important;
  backdrop-filter: blur(14px);
}
.topbar-logo,
.detail-bar-title,
.legal-bar-title {
  color: #f8ffff !important;
  text-shadow: 0 2px 10px rgba(0, 39, 50, .22) !important;
}
.sec-label,
.filter-title,
.sec-title-text,
.related-title,
.legal-pg-title,
.legal-sec-h2 {
  color: var(--sea-ink) !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(7, 86, 103, .98) !important;
  box-shadow: 0 14px 32px rgba(5, 57, 69, .3) !important;
}
.hamburger-item { color: #e8fbfb !important; border-color: rgba(255, 255, 255, .11) !important; }
.hamburger-item.active { color: var(--sea-sand) !important; }
.hamburger-backdrop { background: rgba(5, 57, 69, .4) !important; }

.search-input {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid var(--sea-line) !important;
  color: var(--sea-ink) !important;
  box-shadow: 0 5px 18px rgba(7, 86, 103, .08) !important;
}
.search-input::placeholder { color: #78959a; }
.search-cancel,
.sec-more,
.filter-back,
.bold-card-tag,
.zig-tag,
.spot-cat,
.not-found button,
.legal-page a { color: var(--sea-mid) !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-paper) !important;
  border-color: var(--sea-line) !important;
  box-shadow: 0 10px 28px rgba(7, 86, 103, .09) !important;
}
.agcard-img,
.gcard-img,
.lantern-card-img,
.trio-img,
.banner-single,
.rel-img,
.gid-icon {
  border-color: rgba(24, 166, 173, .24) !important;
  box-shadow: 0 6px 18px rgba(7, 86, 103, .12) !important;
}
.spot-item,
.mag-row { border-color: rgba(11, 124, 139, .15) !important; }
.stack-card { border-color: rgba(11, 124, 139, .22) !important; }

.topbar-search-btn,
.more-btn,
.loadmore-btn,
.play-btn,
.totop-btn {
  background: linear-gradient(135deg, var(--sea-primary), var(--sea-mid)) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .3) !important;
  box-shadow: 0 7px 20px rgba(7, 86, 103, .22) !important;
}
.cat-tab.active,
.feat-lantern-badge,
.fresh-badge,
.poster-cat-badge,
.banner-badge {
  background: linear-gradient(135deg, var(--sea-sand), #ffe6aa) !important;
  color: var(--sea-deep) !important;
  box-shadow: 0 5px 15px rgba(190, 133, 43, .2) !important;
}
.cat-tab,
.gid-tag {
  background: rgba(216, 244, 244, .82) !important;
  border-color: var(--sea-line) !important;
  color: var(--sea-ink) !important;
}
.gid-tag-free {
  background: rgba(24, 166, 173, .88) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.rank-num,
.spot-bullet { color: var(--sea-coral) !important; text-shadow: none !important; }
.spot-name {
  background: linear-gradient(135deg, var(--sea-mid), var(--sea-coral)) !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(7, 86, 103, .88)) !important; }
.game-poster::after { background: linear-gradient(transparent 52%, rgba(7, 86, 103, .92)) !important; }
.gid-name { color: #fff !important; text-shadow: 0 2px 8px rgba(5, 57, 69, .58) !important; }
.about-body,
.howplay-body,
.legal-intro-sec { color: #345f67 !important; }

body.play-shell {
  background: var(--sea-deep) !important;
  color: #f8ffff !important;
}
.play-shell {
  --c-nav: rgba(7, 86, 103, .98);
  --c-text: #f8ffff;
  --c-grad-s: #18a6ad;
  --c-grad-e: #f3c778;
}
.play-shell .navbar { border-color: rgba(255, 255, 255, .14) !important; box-shadow: 0 3px 16px rgba(5, 57, 69, .34) !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(243, 199, 120, .28) !important; }
.play-shell .ga-wrap { background: #043e4b !important; }
.play-shell .goback { box-shadow: 0 5px 18px rgba(24, 166, 173, .34) !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;
}