/* ===== Base / Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #020c14;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,.14), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(45,255,210,.12), transparent 42%),
    radial-gradient(circle at 30% 70%, rgba(45,255,210,.05), transparent 38%),
    radial-gradient(circle at 75% 90%, rgba(124,92,255,.06), transparent 40%),
    linear-gradient(180deg, #020c14 0%, #04121c 45%, #020a11 100%);
  background-attachment: fixed;
  color: #dff7f2;
  line-height: 1.4;
  padding-bottom: 24px;
  overflow-x: hidden;
}
[v-cloak] { display: none; }
a { color: inherit; text-decoration: none; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
::-webkit-scrollbar { display: none; }
/* ===== Top Bar ===== */
.topbar {
  position: static; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #04121c; border-bottom: 1px solid #0d2b3a;
  box-shadow: 0 1px 12px rgba(124,92,255,.15);
}
.topbar-logo { font-size: 18px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 0 10px rgba(45,255,210,.6); }
.topbar-search-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0a2838; color: #2dffd2;
  border: 1px solid rgba(45,255,210,.4);
  box-shadow: 0 0 10px rgba(45,255,210,.3);
}
/* ===== Category Tabs ===== */
.cat-tabs {
  position: static; top: 60px; z-index: 30;
  background: #020c14; border-bottom: 1px solid #0d2b3a;
  overflow-x: auto; white-space: nowrap;
}
.cat-tabs-inner { display: inline-flex; gap: 8px; padding: 10px 16px; }
.cat-tab {
  flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
  background: #0a2230; color: #7fb0bd; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(124,92,255,.25);
}
.cat-tab.active {
  background: linear-gradient(135deg, #7c5cff, #5b2fd6);
  color: #fff;
  box-shadow: 0 0 14px rgba(124,92,255,.6);
  border-color: transparent;
}
/* ===== Search ===== */
.search-bar-wrap {
  position: static; top: 60px; z-index: 30;
  display: flex; gap: 8px; padding: 10px 16px;
  background: #020c14; border-bottom: 1px solid #0d2b3a;
}
.search-input {
  flex: 1; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(45,255,210,.3);
  background: #082230; color: #dff7f2; font-size: 14px;
}
.search-cancel { font-size: 14px; color: #2dffd2; font-weight: 600; padding: 0 4px; text-shadow: 0 0 8px rgba(45,255,210,.6); }
/* ===== Loading ===== */
.loading-full { display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.loading-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #0d2b3a; border-top-color: #7c5cff;
  box-shadow: 0 0 12px rgba(124,92,255,.5);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Section spacing ===== */
section[class$="-sec"] { margin-bottom: 32px; }
/* ===== Section Header ===== */
.sec-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; }
.sec-label { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.sec-more { font-size: 12px; color: #2dffd2; font-weight: 600; }
.sec-cnt { font-size: 13px; color: #5f8a9a; }
/* ===== Featured ===== */
.featured-sec { padding: 12px 16px 0; }
.featured-card {
  display: flex; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #0a2838, #04121c);
  border: 1px solid rgba(124,92,255,.3);
  box-shadow: 0 0 20px rgba(124,92,255,.25);
  cursor: pointer;
}
.featured-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feat-badge {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(135deg, #7c5cff, #5b2fd6); color: #fff; padding: 3px 8px; border-radius: 6px; text-transform: uppercase;
  box-shadow: 0 0 10px rgba(124,92,255,.5);
}
.feat-title { font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.feat-desc { font-size: 12px; color: #8fb8c4; overflow: hidden; }
.feat-play-btn {
  margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700;
  background: #2dffd2; color: #020c14; padding: 7px 14px; border-radius: 20px;
  box-shadow: 0 0 14px rgba(45,255,210,.6);
}
.featured-cover { width: 40%; aspect-ratio: 4/5; flex-shrink: 0; }
/* ===== Hot Games ===== */
.hot-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px 10px; }
.htcard { border-radius: 14px; overflow: hidden; cursor: pointer; position: relative; }
.htcard img { aspect-ratio: 1/1; }
.htcard {
  border: 1px solid rgba(45,255,210,.25);
  box-shadow: 0 0 10px rgba(45,255,210,.15);
}
.htcard-nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(10,1,24,.9));
}
.hot-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.hsmcard { cursor: pointer; }
.hsmcard-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(124,92,255,.2); }
.hsmcard-img img { aspect-ratio: 1/1; }
.hsmcard-nm { font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Rank list (Action) ===== */
.rank-list { padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.ritem { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rnum { width: 20px; text-align: center; font-size: 15px; font-weight: 800; color: #2f5566; flex-shrink: 0; }
.rnum.rn-1 { color: #7c5cff; text-shadow: 0 0 8px rgba(124,92,255,.7); }
.rnum.rn-2 { color: #7fe0c9; }
.rnum.rn-3 { color: #2dffd2; text-shadow: 0 0 8px rgba(45,255,210,.7); }
.rthumb { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(45,255,210,.25); }
.rbody { flex: 1; min-width: 0; }
.rname { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtag { font-size: 11px; color: #5f8a9a; }
.rdesc { font-size: 11px; color: #5f8a9a; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rplay { color: #7c5cff; font-size: 13px; flex-shrink: 0; text-shadow: 0 0 8px rgba(124,92,255,.6); }
/* ===== Puzzle horizontal scroll ===== */
.puzzle-scroll { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; }
.pzcard { flex-shrink: 0; width: 92px; cursor: pointer; }
.pzcard-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(124,92,255,.2); }
.pzcard-img img { aspect-ratio: 1/1; }
.pzcard-nm { font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Generic responsive icon grid (8 columns on desktop) ===== */
.kids-grid, .all-grid, .games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 8px;
}
@media (min-width: 480px) {
.kids-grid, .all-grid, .games-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 860px) {
.kids-grid, .all-grid, .games-grid { grid-template-columns: repeat(8, 1fr); }
}
.kcard, .agcard, .gcard { cursor: pointer; min-width: 0; }
.kcard-img, .agcard-img, .gcard-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(45,255,210,.2); }
.kcard-img img, .agcard-img img, .gcard-img img { aspect-ratio: 1/1; }
.kcard-nm, .agcard-nm, .gcard-nm {
  font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== Two / Tri column grids (Sports, Racing, Adventure, Girl) ===== */
.two-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.twcard, .tgcard { cursor: pointer; }
.twcard-img, .tgcard-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(124,92,255,.2); }
.twcard-img img, .tgcard-img img { aspect-ratio: 1/1; }
.twcard-nm, .tgcard-nm {
  font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== Spotlight / Hero cards (Sports, Adventure) ===== */
.spot-card, .adv-hero {
  position: relative; margin: 0 16px 10px; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(124,92,255,.3);
  box-shadow: 0 0 16px rgba(124,92,255,.2);
}
.spot-card img, .adv-hero img { aspect-ratio: 16/9; }
.spot-ovl, .adv-hero-ovl {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px;
  background: linear-gradient(transparent, rgba(10,1,24,.9));
}
.spot-badge, .adv-badge {
  font-size: 10px; font-weight: 700; background: linear-gradient(135deg, #2dffd2, #2dc7ff); color: #020c14;
  padding: 3px 8px; border-radius: 6px; text-transform: uppercase;
  box-shadow: 0 0 10px rgba(45,255,210,.5);
}
.spot-name, .adv-name { font-size: 15px; font-weight: 700; color: #fff; margin-top: 6px; }
.adv-desc { font-size: 11px; color: #a9d8d0; margin-top: 3px; }
.spot-desc { font-size: 11px; color: #a9d8d0; margin-top: 3px; }
/* ===== Load more ===== */
.more-wrap, .loadmore-wrap { display: flex; justify-content: center; padding: 16px; }
.more-btn, .loadmore-btn {
  padding: 10px 22px; border-radius: 20px; background: #0a2230; color: #2dffd2;
  font-size: 13px; font-weight: 600; border: 1px solid rgba(45,255,210,.4);
  box-shadow: 0 0 10px rgba(45,255,210,.25);
}
/* ===== Filter header ===== */
.filter-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.filter-back { font-size: 13px; color: #2dffd2; font-weight: 600; }
.filter-title { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: .03em; }
.filter-cnt { font-size: 12px; color: #5f8a9a; }
.empty-msg { text-align: center; padding: 60px 0; color: #5f8a9a; font-size: 13px; }
/* ===== Footer ===== */
.site-footer { display: flex; justify-content: center; gap: 10px; padding: 24px 16px; font-size: 12px; color: #4a6b78; }
/* ===== Back to top ===== */
.totop-btn {
  position: fixed; right: 16px; bottom: 20px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #2dffd2); color: #020c14; font-size: 16px;
  box-shadow: 0 4px 18px rgba(124,92,255,.5);
}
/* ===== Desktop content width cap ===== */
@media (min-width: 860px) {
  body { max-width: 1080px; margin: 0 auto; }
}
/* ===== Avatar row (overlapping circular cards) ===== */
.avatar-row { display: flex; padding: 6px 20px 8px; overflow-x: auto; }
.avcard { flex-shrink: 0; width: 66px; margin-left: -16px; cursor: pointer; text-align: center; }
.avcard:first-child { margin-left: 0; }
.avcard-img { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.avcard-img img { width: 100%; height: 100%; object-fit: cover; }
.avcard-nm { font-size: 10px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8fb8c4; }
.twcard-desc, .tgcard-desc { font-size: 10px; color: #a9d8d0; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Spotlight Picks (terminal log) ===== */
.term-list { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px; margin: 0 16px; background: #020c14; border: 1px solid rgba(45,255,210,.25); border-radius: 10px; font-family: "Consolas", "SF Mono", monospace; }
.term-item { cursor: pointer; }
.term-prompt { color: #7c5cff; margin-right: 6px; font-weight: 700; }
.term-name { color: #2dffd2; font-weight: 700; text-shadow: 0 0 6px rgba(45,255,210,.5); }
.term-cat { color: #5f8a9a; margin-left: 8px; font-size: 12px; }
.term-desc { color: #a9d8d0; font-size: 12px; margin: 4px 0 0 16px; opacity: .8; }

/* ===== Fix: All Games / filtered / kids grid icons — lock container aspect ratio so size never depends on the source image's native dimensions ===== */
.kcard-img, .agcard-img, .gcard-img { aspect-ratio: 1/1 !important; width: 100%; height: auto; }
.kcard-img img, .agcard-img img, .gcard-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== New Arrivals: Tide Log (vertical glow timeline) ===== */
.tide-list { position: relative; padding: 4px 16px 4px 30px; display: flex; flex-direction: column; gap: 18px; }
.tide-list::before {
  content: ""; position: absolute; left: 33px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, rgba(45,255,210,.6), rgba(124,92,255,.5), rgba(45,255,210,.1));
}
.tide-item { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tide-dot {
  position: absolute; left: -19px; width: 10px; height: 10px; border-radius: 50%;
  background: #2dffd2; box-shadow: 0 0 8px 2px rgba(45,255,210,.7); flex-shrink: 0;
}
.tide-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(45,255,210,.3); box-shadow: 0 0 8px rgba(45,255,210,.2); }
.tide-body { min-width: 0; flex: 1; }
.tide-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tide-tag { font-size: 10px; color: #5f8a9a; }

/* ===== Diver's Picks (staggered 2-col glow grid) ===== */
.abyss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding: 4px 16px 8px; }
.abcard { cursor: pointer; }
.abcard-shift { margin-top: 26px; }
.abcard-img {
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(124,92,255,.35);
  box-shadow: 0 0 14px rgba(124,92,255,.25), inset 0 0 20px rgba(45,255,210,.06);
}
.abcard-img img { aspect-ratio: 4/3; }
.abcard-nm { font-size: 12px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abcard-desc { font-size: 10px; color: #5f8a9a; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Deep-sea glow accents on existing cards (bioluminescent outline) ===== */
.featured-card, .spot-card, .adv-hero { box-shadow: 0 0 22px rgba(124,92,255,.22), 0 0 0 1px rgba(45,255,210,.08) inset; }
.htcard, .rthumb, .pzcard-img, .kcard-img, .agcard-img, .gcard-img, .twcard-img, .tgcard-img { position: relative; }
.htcard::after, .rthumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 10px rgba(45,255,210,.15) inset;
}

/* ===================================================================
   STRUCTURAL REDESIGN — 12 home sections, each a distinct layout
   =================================================================== */

/* ----- 1. Action: jagged staggered zigzag list ----- */
.zig-list { display: flex; flex-direction: column; gap: 20px; padding: 4px 16px 8px; }
.zigcard { display: flex; align-items: center; gap: 12px; width: 82%; cursor: pointer; }
.zigcard-b { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.zigcard-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(45,255,210,.3); box-shadow: 0 0 10px rgba(45,255,210,.2); }
.zigcard-img img { width: 100%; height: 100%; object-fit: cover; }
.zigcard-body { min-width: 0; }
.zigcard-nm { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zigcard-tag { font-size: 10px; color: #5f8a9a; }

/* ----- 2. Puzzle: vinyl-record circular grid ----- */
.vinyl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding: 4px 16px 8px; }
.vinylcard { cursor: pointer; text-align: center; min-width: 0; }
.vinylcard-img {
  position: relative; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(124,92,255,.4); box-shadow: 0 0 12px rgba(124,92,255,.3);
  transition: transform .35s ease;
}
.vinylcard-img img { width: 100%; height: 100%; object-fit: cover; }
.vinyl-hole {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; background: #020c14;
  border: 2px solid rgba(45,255,210,.7); box-shadow: 0 0 6px rgba(45,255,210,.6);
}
.vinylcard:hover .vinylcard-img { transform: rotate(18deg); }
.vinylcard-nm { font-size: 11px; margin-top: 6px; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 3. Kids: passport-stamp badge grid (no clip-path, box-shadow rings) ----- */
.stamp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; padding: 6px 16px 10px; }
.stampcard { cursor: pointer; text-align: center; min-width: 0; }
.stampcard-img {
  aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;
  border: 2px dashed rgba(45,255,210,.55);
  box-shadow:
    0 0 0 4px #020c14,
    0 0 0 6px rgba(124,92,255,.35),
    0 0 10px rgba(45,255,210,.3);
}
.stampcard-img img { width: 100%; height: 100%; object-fit: cover; }
.stampcard-nm { font-size: 11px; margin-top: 8px; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 4. Sports: 4-column landscape grid (4:3 thumbs) ----- */
.sport4-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px 8px; }
@media (min-width: 480px) { .sport4-grid { grid-template-columns: repeat(4, 1fr); } }
.sport4card { cursor: pointer; min-width: 0; }
.sport4card-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(124,92,255,.25); }
.sport4card-img img { aspect-ratio: 4/3; width: 100%; height: 100%; object-fit: cover; }
.sport4card-nm { font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 5. Adventure: horizontal scroll with play-button badge ----- */
.advh-scroll { display: flex; gap: 12px; padding: 0 16px 8px; overflow-x: auto; }
.advhcard { flex-shrink: 0; width: 150px; cursor: pointer; }
.advhcard-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid rgba(124,92,255,.25); }
.advhcard-img img { width: 100%; height: 100%; object-fit: cover; }
.advh-play {
  position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(2,12,20,.75); color: #2dffd2; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(45,255,210,.5); box-shadow: 0 0 8px rgba(45,255,210,.4);
}
.advhcard-nm { font-size: 12px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advhcard-desc { font-size: 10px; color: #8fb8c4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 6. Racing: fixed-width tag-flow wrap ----- */
.race-flow { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 8px; }
.racecard { width: 104px; flex-shrink: 0; cursor: pointer; }
.racecard-img { border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; border: 1px solid rgba(45,255,210,.25); }
.racecard-img img { width: 100%; height: 100%; object-fit: cover; }
.racecard-nm { font-size: 11px; margin-top: 5px; text-align: center; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 7. Girl: rounded-avatar centered-name grid ----- */
.girl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding: 0 16px 8px; }
.girlcard { cursor: pointer; text-align: center; min-width: 0; }
.girlcard-img { border-radius: 22px; overflow: hidden; aspect-ratio: 1/1; border: 1px solid rgba(124,92,255,.3); box-shadow: 0 0 10px rgba(124,92,255,.2); }
.girlcard-img img { width: 100%; height: 100%; object-fit: cover; }
.girlcard-nm { font-size: 12px; font-weight: 600; margin-top: 8px; color: #dff7f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 8. Arcade: thick-ring circular horizontal scroll ----- */
.arc-scroll { display: flex; gap: 16px; padding: 4px 16px 8px; overflow-x: auto; }
.arccard { flex-shrink: 0; width: 76px; text-align: center; cursor: pointer; }
.arccard-img {
  width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin: 0 auto;
  border: 4px solid transparent;
  background:
    linear-gradient(#020c14, #020c14) padding-box,
    linear-gradient(135deg, #7c5cff, #2dffd2) border-box;
  box-shadow: 0 0 10px rgba(45,255,210,.4);
}
.arccard-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.arccard-nm { font-size: 10px; margin-top: 6px; color: #8fb8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 9. Hot Games (custom): hover / tap mask-reveal grid ----- */
.reveal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px 8px; }
.revealcard { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; cursor: pointer; border: 1px solid rgba(45,255,210,.2); }
.revealcard-img { width: 100%; height: 100%; }
.revealcard-img img { width: 100%; height: 100%; object-fit: cover; }
.reveal-mask {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px; background: linear-gradient(transparent 30%, rgba(2,12,20,.95));
  transform: translateY(72%); transition: transform .3s ease;
}
.revealcard:hover .reveal-mask, .revealcard:focus .reveal-mask, .revealcard:active .reveal-mask { transform: translateY(0); }
.reveal-nm { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reveal-desc { font-size: 10px; color: #a9d8d0; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- 10. Spotlight Picks (custom): multi-open accordion panels ----- */
.accord-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 8px; }
.accord-item { border: 1px solid rgba(45,255,210,.2); border-radius: 10px; overflow: hidden; background: rgba(10,34,48,.4); }
.accord-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  text-align: left; cursor: pointer; font-family: inherit;
}
.accord-idx { font-size: 11px; font-weight: 800; color: #7c5cff; flex-shrink: 0; }
.accord-name { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accord-cat { font-size: 10px; color: #5f8a9a; flex-shrink: 0; }
.accord-arrow { font-size: 15px; color: #2dffd2; flex-shrink: 0; width: 16px; text-align: center; }
.accord-item.accord-open .accord-head { border-bottom: 1px solid rgba(45,255,210,.15); }
.accord-panel { display: flex; gap: 10px; padding: 12px 14px; }
.accord-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(124,92,255,.25); }
.accord-thumb img { width: 100%; height: 100%; object-fit: cover; }
.accord-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.accord-desc { font-size: 11px; color: #a9d8d0; line-height: 1.5; }
.accord-play { align-self: flex-start; font-size: 10px; font-weight: 700; background: #2dffd2; color: #020c14; padding: 4px 10px; border-radius: 14px; }

/* ----- 11. New Arrivals (custom): horizontal scroll-snap strip ----- */
.snap-scroll { display: flex; gap: 12px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.snapcard { flex-shrink: 0; width: 118px; scroll-snap-align: start; cursor: pointer; }
.snapcard-img { border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; border: 1px solid rgba(45,255,210,.3); box-shadow: 0 0 8px rgba(45,255,210,.2); }
.snapcard-img img { width: 100%; height: 100%; object-fit: cover; }
.snapcard-nm { font-size: 12px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapcard-tag { font-size: 10px; color: #5f8a9a; }

/* ----- 12. Diver's Picks (custom): image-text banner horizontal scroll ----- */
.banner-scroll { display: flex; gap: 12px; padding: 4px 16px 8px; overflow-x: auto; }
.bannercard {
  flex-shrink: 0; width: 260px; display: flex; gap: 10px; cursor: pointer;
  border-radius: 14px; overflow: hidden; padding: 8px;
  background: rgba(10,40,56,.4); border: 1px solid rgba(124,92,255,.25);
  box-shadow: 0 0 10px rgba(124,92,255,.15);
}
.banner-img { width: 88px; aspect-ratio: 1/1; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; }
.banner-body { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.banner-nm { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-tag { font-size: 10px; color: #2dffd2; }
.banner-desc { font-size: 10px; color: #a9d8d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }