/* ===== Base / Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f9fafb;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(118,92,122,.12), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(90,176,176,.10), transparent 45%),
    repeating-linear-gradient(0deg, rgba(90,176,176,.05) 0px, rgba(90,176,176,.05) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(118,92,122,.04) 0px, rgba(118,92,122,.04) 1px, transparent 1px, transparent 24px);
  background-attachment: fixed;
  color: #232323;
  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: #f9fafb; border-bottom: 1px solid #dce1e4;
  box-shadow: 0 1px 12px rgba(118,92,122,.15);
}
.topbar-logo { font-size: 18px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 0 10px rgba(90,176,176,.6); }
.topbar-search-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e8edf0; color: #5ab0b0;
  border: 1px solid rgba(90,176,176,.4);
  box-shadow: 0 0 10px rgba(90,176,176,.3);
}
/* ===== Category Tabs ===== */
.cat-tabs {
  position: static; top: 60px; z-index: 30;
  background: #f9fafb; border-bottom: 1px solid #dce1e4;
  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: #ecf0f3; color: #5c666a; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(118,92,122,.25);
}
.cat-tab.active {
  background: linear-gradient(135deg, #765c7a, #765c7a);
  color: #fff;
  box-shadow: 0 0 14px rgba(118,92,122,.6);
  border-color: transparent;
}
/* ===== Search ===== */
.search-bar-wrap {
  position: static; top: 60px; z-index: 30;
  display: flex; gap: 8px; padding: 10px 16px;
  background: #f9fafb; border-bottom: 1px solid #dce1e4;
}
.search-input {
  flex: 1; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(90,176,176,.3);
  background: #eef2f5; color: #232323; font-size: 14px;
}
.search-cancel { font-size: 14px; color: #5ab0b0; font-weight: 600; padding: 0 4px; text-shadow: 0 0 8px rgba(90,176,176,.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 #dce1e4; border-top-color: #765c7a;
  box-shadow: 0 0 12px rgba(118,92,122,.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: #5ab0b0; font-weight: 600; }
.sec-cnt { font-size: 13px; color: #90979a; }
/* ===== Featured ===== */

/* ===== Hot Games ===== */

/* ===== Rank list (Action) ===== */

/* ===== Puzzle horizontal scroll ===== */

/* ===== Generic responsive icon grid (8 columns on desktop) ===== */
 .all-grid, .games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 8px;
}
@media (min-width: 480px) {
 .all-grid, .games-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 860px) {
 .all-grid, .games-grid { grid-template-columns: repeat(8, 1fr); }
}
 .agcard, .gcard { cursor: pointer; min-width: 0; }
 .agcard-img, .gcard-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(90,176,176,.2); }
 .agcard-img img, .gcard-img img { aspect-ratio: 1/1; }
 .agcard-nm, .gcard-nm {
  font-size: 11px; margin-top: 5px; text-align: center; color: #40474a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== Two / Tri column grids (Sports, Racing, Adventure, Girl) ===== */

/* ===== Spotlight / Hero cards (Sports, Adventure) ===== */

/* ===== Load more ===== */
.more-wrap, .loadmore-wrap { display: flex; justify-content: center; padding: 16px; }
.more-btn, .loadmore-btn {
  padding: 10px 22px; border-radius: 20px; background: #ecf0f3; color: #5ab0b0;
  font-size: 13px; font-weight: 600; border: 1px solid rgba(90,176,176,.4);
  box-shadow: 0 0 10px rgba(90,176,176,.25);
}
/* ===== Filter header ===== */
.filter-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.filter-back { font-size: 13px; color: #5ab0b0; font-weight: 600; }
.filter-title { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: .03em; }
.filter-cnt { font-size: 12px; color: #90979a; }
.empty-msg { text-align: center; padding: 60px 0; color: #90979a; font-size: 13px; }
/* ===== Footer ===== */
.site-footer { display: flex; justify-content: center; gap: 10px; padding: 24px 16px; font-size: 12px; color: #90979a; }
/* ===== 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, #765c7a, #5ab0b0); color: #f9fafb; font-size: 16px;
  box-shadow: 0 4px 18px rgba(118,92,122,.5);
}
/* ===== Desktop content width cap ===== */
@media (min-width: 860px) {
  body { max-width: 1080px; margin: 0 auto; }
}
/* ===== Avatar row (overlapping circular cards) ===== */

/* ===== Spotlight Picks (terminal log) ===== */

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

/* ===== 顶部单独大图.html — retthemed hero component ===== */
/* ============================================================
   顶部单独大图 · 板块样式库
   所有可换色的地方都走 CSS 变量，批量换肤时只需改 :root
   ============================================================ */

:root {
  --th-bg: #f9fafb;
  --th-fg: #232323;
  --th-muted: #90979a;
  --th-border: #dce1e4;
  --th-placeholder-bg: #ecf0f3;
  --th-card-bg: #ecf0f3;
  --th-accent: #765c7a;
  --th-accent-fg: #f9fafb;
  --th-accent2: #5ab0b0;
  --th-accent2-dark: #5ab0b0;
  --th-pink: #765c7a;
  --th-red: #765c7a;
  --th-gold: #5ab0b0;
  --th-gold-dark: #5ab0b0;
  --th-cyan: #5ab0b0;
  --th-blue: #5ab0b0;
  --th-orange: #5ab0b0;
  --th-lightred: #765c7a;
  --th-green: #5ab0b0;
  --th-paper: #ecf0f3;
  --th-ink: #232323;
}

/* ---- top bar / jump nav / loading ---- */
/* ---- shared block header ---- */
.th-imgwrap { position: relative; overflow: hidden; background: var(--th-placeholder-bg); }
.th-imgwrap img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 1. gradient overlay + bottom title ---- */

/* ---- 2. centered copy + CTA button ---- */
.th-2-hero { position: relative; border-radius: 16px; aspect-ratio: 16/9; }
.th-2-ovl { position: absolute; inset: 0; background: rgba(0,0,0,.38); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.th-2-title { color: #fff; font-size: 22px; font-weight: 800; }
.th-2-sub { color: rgba(255,255,255,.85); font-size: 12px; margin-top: 6px; max-width: 80%; }
.th-2-btn { margin-top: 14px; background: #fff; color: var(--th-fg); font-size: 12px; font-weight: 800; padding: 8px 22px; border-radius: 999px; }

/* ---- 3. rounded card + bottom-left tag ---- */

/* ---- 4. split image-text layout ---- */

/* ---- 5. ultra-wide banner + top icon badge ---- */

/* ---- 6. play button overlay (video poster style) ---- */

/* ---- 7. magazine cover style ---- */

/* ---- 8. glassmorphism info bar ---- */

/* ---- 9. NEW ribbon + bottom CTA ---- */

/* ---- 10. framed whitespace + bottom dots ---- */

/* ---- 11. featured pick (rating + online count) ---- */

/* ---- 12. recently played (quick launch) ---- */

/* ---- 13. trending leaderboard (top 3) ---- */

/* ---- 14. new release (launch teaser) ---- */

/* ---- 15. trending now (friend avatars + heat index) ---- */

/* ---- 16. live countdown (event timer) ---- */

/* ---- 17. editor's choice (curated picks) ---- */

/* ---- 18. head-to-head poll ---- */

/* ---- 19. game collection (themed picks) ---- */

/* ---- 20. achievement showcase ---- */

/* ---- 21. comic book panel (speech bubble) ---- */

/* ---- 22. boarding pass ticket ---- */

/* ---- 23. neon cyberpunk glitch ---- */

/* ---- 24. tilted polaroid + tape ---- */

/* ---- 25. newspaper headline ---- */

/* ---- 26. vinyl record spin ---- */

@keyframes th-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ---- 27. postcard stamp ---- */

/* ---- 28. duotone split panel ---- */

/* ---- 29. radar sci-fi HUD ---- */

/* ---- 30. sticky note caption ---- */

/* ---- 31. vertical side tab ---- */

/* ---- 32. diagonal corner ribbon ---- */

/* ---- 33. floating card below image ---- */

/* ---- 34. minimal outline frame ---- */

/* ---- 35. multi-stat row ---- */

/* ---- 36. arcade marquee lights ---- */

     
     
   
@keyframes th-blink { 50% { opacity: .2; } }

/* ---- 37. origami fold reveal ---- */

/* ---- 38. spotlight vignette ---- */

/* ---- 39. certificate award frame ---- */

   

/* ---- 40. retro TV bezel ---- */

@media (min-width: 860px) { body { max-width: 1080px; margin: 0 auto; } }

/* ===== 纯文本不带图.html — retthemed text component ===== */
/* ============================================================
   纯文本不带图 · 板块样式库
   所有可换色的地方都走 CSS 变量，批量换肤时只需改 :root
   ============================================================ */

:root {
  --gy-bg: #f9fafb;
  --gy-fg: #232323;
  --gy-muted: #90979a;
  --gy-border: #dce1e4;
  --gy-card-bg: #ecf0f3;
  --gy-accent: #765c7a;
  --gy-accent-fg: #f9fafb;
  --gy-tag-bg: #ecf0f3;
}

/* ---- top bar / loading ---- */
/* ---- shared block header ---- */
/* ---- 1. sticky notes ---- */

/* ---- 2. ranked list ---- */

/* ---- 3. tag cloud ---- */

/* ---- 4. horizontal scroll cards ---- */

/* ---- 5. minimalist dashboard ---- */

/* ---- 6. timeline ---- */

/* ---- 7. accordion ---- */

/* ---- 8. icon grid ---- */

/* ---- 9. quote cards ---- */

/* ---- 10. glassmorphism cards ---- */

/* ---- 11. neon glow buttons ---- */

/* ---- 12. stepped progress ---- */
.gy-progresslist { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
.gy-progress-item { display: flex; flex-direction: column; gap: 6px; }
.gy-progress-hd { display: flex; justify-content: space-between; align-items: baseline; }
.gy-progress-nm { font-size: 13px; font-weight: 700; color: var(--gy-fg); }
.gy-progress-val { font-size: 11px; font-weight: 800; color: var(--gy-muted); }
.gy-progress-bar { height: 6px; background: var(--gy-border); border-radius: 999px; overflow: hidden; }
.gy-progress-fill { height: 100%; background: var(--gy-accent); border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1); }

/* ---- 13. circular rating badges ---- */

/* ---- 14. compact avatar list ---- */
.gy-avatargrid { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.gy-avatar-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f3f0; }
.gy-avatar-img { width: 36px; height: 36px; border-radius: 50%; background: var(--gy-tag-bg); color: var(--gy-fg); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gy-avatar-body { flex: 1; min-width: 0; }
.gy-avatar-nm { font-size: 13px; font-weight: 700; color: var(--gy-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-avatar-txt { font-size: 11px; color: var(--gy-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 15. minimalist table list ---- */

/* ---- 16. terminal / CLI style ---- */

@keyframes gy-blink { 50% { opacity: 0; } }

/* ---- 17. dog-ear folded cards ---- */

/* ---- 18. heartbeat / EKG wave ---- */

/* ---- 19. scrabble letter tiles ---- */

/* ---- 20. subway sign list ---- */

/* ---- 21. liquid fill cards ---- */

/* ---- 22. stamp / perforated grid ---- */

/* ---- 23. cassette tape list ---- */

/* ---- 24. business card list ---- */

/* ---- 25. tic-tac-toe grid ---- */

/* ---- 26. two-column compare list ---- */

/* ---- 27. newspaper columns ---- */

/* ---- 28. chat bubble list ---- */

/* ---- 29. typewriter line-number list ---- */

/* ---- 30. medal ribbon list ---- */

/* ---- 31. diagonal split cards ---- */

/* ---- 32. drop-cap paragraph list ---- */

/* ---- 33. horizontal scale timeline ---- */

/* ---- 34. ticket stub list ---- */

/* ---- 35. subtitle two-line cards ---- */

/* ---- 36. kanban columns ---- */

/* ---- 37. star rating list ---- */

/* ---- 38. equalizer bars list ---- */

/* ---- 39. framed text cards ---- */

/* ---- 40. bookmark fold list ---- */

@media (min-width: 860px) { body { max-width: 1080px; margin: 0 auto; } }

/* ===== 网格布局.html — retthemed grid components ===== */
/* ============================================================
   网格布局 · 板块样式库
   所有可换色的地方都走 CSS 变量，批量换肤时只需改 :root
   ============================================================ */

:root {
  --gr-bg: #f9fafb;
  --gr-fg: #232323;
  --gr-muted: #90979a;
  --gr-border: #dce1e4;
  --gr-placeholder-bg: #ecf0f3;
  --gr-card-bg: #ecf0f3;
  --gr-accent: #765c7a;
  --gr-accent-fg: #f9fafb;
  --gr-tag-bg: #ecf0f3;
  --gr-accent2: #5ab0b0;
  --gr-gold: #5ab0b0;
  --gr-red: #765c7a;
  --gr-green: #5ab0b0;
  --gr-blue: #5ab0b0;
  --gr-pink: #765c7a;
  --gr-cyan: #5ab0b0;
  --gr-silver: #90979a;
  --gr-wood: #5ab0b0;
  --gr-chalk: #232323;
  --gr-slate: #90979a;
}

/* ---- top bar / jump nav / loading ---- */
/* ---- shared block header ---- */
.gr-imgwrap { position: relative; overflow: hidden; background: var(--gr-placeholder-bg); }
.gr-imgwrap img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 1. classic rounded card grid (3-col) ---- */

/* ---- 2. compact square icon grid (4-col) ---- */

/* ---- 3. wide card grid + description (2-col) ---- */

/* ---- 4. numbered channel grid (4-col) ---- */

/* ---- 5. rated card grid (3-col) ---- */

/* ---- 6. category chip grid (3-col) ---- */

/* ---- 7. color bar accent grid (4-col) ---- */

/* ---- 8. ribbon badge grid (3-col) ---- */

/* ---- 9. rounded avatar grid (4-col) ---- */

/* ---- 10. dense mini icon grid (5-col) ---- */

/* ---- 11. portrait poster grid (2-col) ---- */

/* ---- 12. ultra dense micro grid (6-col) ---- */

/* ---- 13. chromeless overlay title grid (3-col) ---- */

/* ---- 14. neumorphism soft grid (3-col) ---- */

/* ---- 15. rank badge grid (4-col) ---- */

/* ---- 16. price tag fold grid (3-col) ---- */

/* ---- 17. online status dot grid (4-col) ---- */

/* ---- 18. blueprint dashed outline grid (3-col) ---- */

/* ---- 19. progress bar grid (3-col) ---- */

/* ---- 20. hexagon icon grid (4-col) ---- */

/* ---- 21. gradient ring avatar grid (3-col) ---- */

/* ---- 22. verified badge grid (4-col) ---- */

/* ---- 23. film strip sprocket grid (3-col) ---- */

/* ---- 24. corner color wash grid (3-col) ---- */

/* ---- 25. diagonal split card grid (3-col) ---- */

/* ---- 26. corner peel grid (3-col) ---- */

/* ---- 27. subway tile grid (2-col) ---- */

/* ---- 28. view count overlay grid (4-col) ---- */

/* ---- 29. checkerboard grid (4-col) ---- */

/* ---- 30. category top border grid (3-col) ---- */

/* ---- 31. retro pixel border grid (3-col) ---- */

/* ---- 32. stamp perforated grid (3-col) ---- */

/* ---- 33. glass caption grid (3-col) ---- */

/* ---- 34. nameplate tab grid (4-col) ---- */

/* ---- 35. landscape play card grid (2-col) ---- */

/* ---- 36. lifted shadow frame grid (3-col) ---- */

/* ---- 37. minimal divider line grid (4-col) ---- */

/* ---- 38. neon gradient border grid (3-col) ---- */

/* ---- 39. multicolor flag corner grid (4-col) ---- */

/* ---- 40. two-line subtitle card grid (3-col) ---- */

/* ---- 41. frosted glass panel grid (3-col) ---- */

/* ---- 42. color strip side border grid (4-col) ---- */

/* ---- 43. jersey number chip grid (4-col) ---- */

/* ---- 44. diagonal stripe backdrop grid (3-col) ---- */

/* ---- 45. vertical stripe column grid (3-col) ---- */

/* ---- 46. orbit dot ring grid (4-col) ---- */
.gr-46-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
.gr-46-card { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 6px; }
.gr-46-orbit { position: relative; width: 100%; aspect-ratio: 1/1; }
.gr-46-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gr-accent2); }
.gr-46-dot:nth-child(1) { top: 0; left: 50%; } .gr-46-dot:nth-child(2) { top: 50%; right: 0; } .gr-46-dot:nth-child(3) { bottom: 0; left: 50%; } .gr-46-dot:nth-child(4) { top: 50%; left: 0; } .gr-46-dot:nth-child(5) { top: 12%; right: 12%; } .gr-46-dot:nth-child(6) { bottom: 12%; left: 12%; }
.gr-46-img { position: absolute; inset: 12%; border-radius: 50%; }
.gr-46-nm { font-size: 10px; font-weight: 700; color: var(--gr-fg); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 47. retro CRT scanline grid (3-col) ---- */
.gr-47-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; background: #111; padding: 10px; border-radius: 10px; }
.gr-47-card { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-47-img { position: relative; aspect-ratio: 1/1; border-radius: 4px; border: 2px solid var(--gr-green); }
.gr-47-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); pointer-events: none; }
.gr-47-nm { font-size: 10px; font-weight: 700; color: var(--gr-green); font-family: 'Consolas', monospace; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 48. wooden plank card grid (3-col) ---- */
.gr-48-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gr-48-card { display: flex; flex-direction: column; min-width: 0; gap: 6px; background: linear-gradient(180deg, #5ac0c9, var(--gr-wood)); border: 2px solid #34828a; border-radius: 6px; padding: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.gr-48-img { aspect-ratio: 1/1; border-radius: 4px; border: 2px solid #2c676e; }
.gr-48-nm { font-size: 10px; font-weight: 700; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 49. sticker peel corner grid (4-col) ---- */
.gr-49-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.gr-49-card { position: relative; display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-49-img { aspect-ratio: 1/1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.gr-49-peel { position: absolute; top: -4px; right: 6%; width: 0; height: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--gr-bg) transparent transparent; }
.gr-49-nm { font-size: 10px; font-weight: 700; color: var(--gr-fg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 50. neon outline glow grid (3-col) ---- */
.gr-50-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; background: #12100d; padding: 12px; border-radius: 10px; }
.gr-50-card { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-50-img { aspect-ratio: 1/1; border-radius: 10px; box-shadow: 0 0 0 2px var(--gr-accent2), 0 0 14px rgba(246,239,92,.6); }
.gr-50-nm { font-size: 10px; font-weight: 700; color: #fff; text-align: center; text-shadow: 0 0 6px var(--gr-accent2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 51. passport stamp grid (3-col) ---- */
.gr-51-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.gr-51-card { position: relative; display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-51-img { aspect-ratio: 1/1; border-radius: 4px; filter: sepia(.15); }
.gr-51-stamp { position: absolute; top: 8%; right: 4%; transform: rotate(-18deg); font-size: 9px; font-weight: 900; color: var(--gr-red); border: 2px solid var(--gr-red); border-radius: 4px; padding: 2px 6px; opacity: .85; }
.gr-51-nm { font-size: 11px; font-weight: 700; color: var(--gr-fg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 52. emoji reaction bar grid (3-col) ---- */
.gr-52-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.gr-52-card { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.gr-52-img { aspect-ratio: 1/1; border-radius: 10px; }
.gr-52-nm { font-size: 11px; font-weight: 700; color: var(--gr-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-52-reacts { display: flex; gap: 8px; }
.gr-52-reacts span { font-size: 10px; font-weight: 700; color: var(--gr-muted); background: var(--gr-tag-bg); padding: 2px 6px; border-radius: 999px; }

/* ---- 53. comic halftone panel grid (3-col) ---- */
.gr-53-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.gr-53-card { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-53-img { position: relative; aspect-ratio: 1/1; border-radius: 4px; border: 3px solid var(--gr-fg); }
.gr-53-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.3) 1.2px, transparent 1.2px); background-size: 6px 6px; mix-blend-mode: multiply; opacity: .3; }
.gr-53-nm { font-size: 11px; font-weight: 800; color: var(--gr-fg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 54. confetti celebration grid (3-col) ---- */
.gr-54-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.gr-54-card { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.gr-54-img { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: visible; }
.gr-54-confetti { position: absolute; width: 5px; height: 8px; border-radius: 1px; }
.gr-54-confetti:nth-child(1) { top: -4px; left: 10%; background: var(--gr-red); transform: rotate(15deg); }
.gr-54-confetti:nth-child(2) { top: -6px; left: 30%; background: var(--gr-gold); transform: rotate(-20deg); }
.gr-54-confetti:nth-child(3) { top: -3px; left: 55%; background: var(--gr-accent2); transform: rotate(30deg); }
.gr-54-confetti:nth-child(4) { top: -7px; left: 75%; background: var(--gr-cyan); transform: rotate(-10deg); }
.gr-54-confetti:nth-child(5) { top: -2px; left: 90%; background: var(--gr-pink); transform: rotate(45deg); }
.gr-54-confetti:nth-child(6) { top: -8px; left: 45%; background: var(--gr-green); transform: rotate(0deg); }
.gr-54-nm { font-size: 11px; font-weight: 700; color: var(--gr-fg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 55. chalkboard card grid (3-col) ---- */

/* ---- 56. holographic foil card grid (3-col) ---- */

/* ---- 57. wax seal badge grid (3-col) ---- */

/* ---- 58. origami fold grid (4-col) ---- */

/* ---- 59. marble texture card grid (3-col) ---- */

/* ---- 60. neon sign card grid (3-col) ---- */

/* ---- 61. ticket roll grid (2-col) ---- */

/* ---- 62. sports scoreboard grid (4-col) ---- */

/* ---- 63. weather stat card grid (3-col) ---- */

/* ---- 64. trading card holo grid (3-col) ---- */

/* ---- 65. puzzle piece shape grid (4-col) ---- */

/* ---- 66. rotated diamond grid (4-col) ---- */

/* ---- 67. vinyl sleeve grid (3-col) ---- */

/* ---- 68. passport photo ID grid (4-col) ---- */

/* ---- 69. concert ticket stub grid (2-col) ---- */

/* ---- 70. bookshelf spine grid (5-col) ---- */

/* ---- 71. sticky tab index grid (4-col) ---- */

/* ---- 72. barcode label grid (3-col) ---- */

/* ---- 73. sticker pack grid (4-col) ---- */

/* ---- 74. level-up badge grid (3-col) ---- */

/* ---- 75. treasure loot grid (4-col) ---- */

/* ---- 76. constellation dotted grid (3-col) ---- */

/* ---- 77. sports jersey card grid (3-col) ---- */

/* ---- 78. missing poster grid (3-col) ---- */

/* ---- 79. emoji mood grid (5-col) ---- */

/* ---- 80. premium combo card grid (3-col) ---- */

@media (min-width: 860px) { body { max-width: 1080px; margin: 0 auto; } }