:root {
  --bg: #0f0f14;
  --surface: #1a1a22;
  --text: #f3f2f7;
  --muted: #a9a7b8;
  --accent: #ff5c8a;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans", sans-serif;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

main { max-width: 1120px; margin: 0 auto; padding: 16px; }

.site-header, .site-footer { max-width: 1120px; margin: 0 auto; padding: 16px; }
.brand { font-weight: 800; font-size: 20px; text-decoration: none; }
.site-footer { color: var(--muted); font-size: 14px; }

.intro h1 { font-size: 28px; line-height: 1.25; margin: 8px 0; }
.intro p { color: var(--muted); margin: 0 0 20px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-link { text-decoration: none; display: block; flex: 1; }
.card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #2a2a34; }
.card h3 { font-size: 16px; margin: 10px 12px 4px; line-height: 1.3; }
.shelf h2, .all h2 { font-size: 20px; margin: 28px 0 12px; }
/* Horizontal shelf: fixed-width cards that scroll sideways, like the apps' home rows. */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w, 180px); gap: var(--gap, 12px);
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; }
.row > .card { scroll-snap-align: start; }
.card p { font-size: 13px; color: var(--muted); margin: 0 12px 10px; }

.chat-button {
  display: block;
  margin: 0 12px 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.chat-button.primary { margin: 20px 0 0; font-size: 18px; padding: 14px 20px; }

.character { display: grid; gap: 24px; grid-template-columns: minmax(0, 360px) 1fr; align-items: start; }
.avatar { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); background: #2a2a34; }
.character h1 { font-size: 28px; line-height: 1.25; margin: 0 0 12px; overflow-wrap: anywhere; }
.summary { white-space: pre-line; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; }
.tags li { background: var(--surface); color: var(--muted); padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.opening h2, .related h2 { font-size: 18px; margin: 20px 0 8px; }
.opening blockquote { margin: 0; padding: 12px 16px; border-inline-start: 3px solid var(--accent); background: var(--surface); border-radius: 8px; white-space: pre-line; }
.related { margin-top: 32px; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-app { font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 12px; border: 1px solid currentColor; border-radius: 999px; }
.disclaimer { font-size: 12px; margin: 0 0 6px; }

.card-media { display: block; }
.card-text { display: block; }
.card-tags, .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.card-tags { margin: 0 12px 10px; }
.card-tags li { font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, 0.06); padding: 1px 8px; border-radius: 999px; }
.chips { margin: 0 0 16px; }
.chips li { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--muted); }

.platform-picker { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.platform-tile { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: var(--radius); background: var(--surface); text-decoration: none; border: 1px solid transparent; }
.platform-tile:hover { border-color: var(--accent); }
.tile-name { font-size: 20px; font-weight: 700; }
.tile-count { font-size: 14px; color: var(--muted); }

/* Platform skins: original CSS approximating each app's layout and palette; no copied assets. */
.skin { --card-ratio: 3 / 4; --card-min: 160px; --cta: var(--accent); --cta-text: #fff; --cta-radius: 999px; --chip-radius: 999px; }
/* height:auto lets aspect-ratio win over the intrinsic width/height attributes (they only reserve space). */
.card img, .avatar { height: auto; }
.skin .card img { aspect-ratio: var(--card-ratio); }
/* Fixed column width = the measured card width, so cards never stretch beyond the original size. */
.skin .grid { grid-template-columns: repeat(auto-fill, var(--card-w, 180px)); }
.skin-caveduck .grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); }
@media (max-width: 720px) { .skin .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skin .chat-button { background: var(--cta); color: var(--cta-text); border-radius: var(--cta-radius); }
.skin .chips li, .skin .tags li { border-radius: var(--chip-radius); }
.skin .grid { gap: var(--gap, 14px); }
/* None of the apps put a chat button on listing cards; the card opens the detail page. */
.skin .card > .chat-button { display: none; }
.skin .card-media { position: relative; border-radius: var(--radius); overflow: hidden; }
.skin .card-text h3, .skin .card-text p { overflow-wrap: anywhere; }
.clamp-1, .skin .card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hook-lines, 2); overflow: hidden; }

/* Caveduck: wide page, ~249px 2:3 cards, name/hook/tags overlaid on a bottom gradient. */
.skin-caveduck { --bg: #1a1b1b; --surface: #262727; --text: #f4f7fb; --muted: #cdd5e2; --accent: #df205d;
  --radius: 12px; --card-ratio: 2 / 3; --card-min: 230px; --cta-radius: 6px; }
.skin-caveduck main, .skin-caveduck .site-header, .skin-caveduck .site-footer { max-width: 1800px; }
.skin-caveduck .grid { gap: 8px; }
.skin-caveduck .card { position: relative; background: #000; }
.skin-caveduck .card-text { position: absolute; inset: auto 0 0; padding: 48px 12px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.6) 60%, transparent); }
.skin-caveduck { --card-w: 230px; --gap: 8px; }
.skin-caveduck .card h3 { margin: 0 0 4px; font-size: 16px; }
.skin-caveduck .card-tags { margin: 0; }
.skin-caveduck .card-tags li { background: none; padding: 0; color: #b88e9e; font-size: 12px; }
.skin-caveduck .card-tags li::before { content: '#'; }
/* The whole card opens the detail page; its CTA sits under the title, as on the original. */
.skin-caveduck .card > .chat-button { display: none; }
.skin-caveduck .chat-button.primary { border-radius: 6px; font-size: 16px; padding: 10px 16px; }
.skin-caveduck .chips li { background: transparent; border: 1px solid #4a4b4b; }
.skin-caveduck .chips li:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.skin-caveduck { --hook-lines: 1; }
.skin-caveduck .card p { margin: 0 0 4px; font-size: 12px; }

/* LoveyDovey (measured at 1920px): ~1258px rows, 4-up 301px square images, 18px gap,
   text below: name 16/700, quoted hook 13px one line, hashtags 13px. */
.skin-loveydovey { --bg: #191919; --surface: #222; --text: #fff; --muted: #bababa; --accent: #ff5a98;
  --radius: 8px; --card-ratio: 1 / 1; --card-min: 260px; --card-w: 301px; --gap: 18px; --hook-lines: 1;
  --cta-radius: 8px; --chip-radius: 20px; font-family: Pretendard, system-ui, sans-serif; }
.skin-loveydovey main, .skin-loveydovey .site-header, .skin-loveydovey .site-footer { max-width: 1290px; }
.skin-loveydovey .card { background: transparent; border-radius: 0; }
.skin-loveydovey .card h3 { margin: 10px 0 2px; font-size: 16px; font-weight: 700; }
.skin-loveydovey .card p { margin: 0 0 4px; font-size: 13px; color: #bababa; }
.skin-loveydovey .card p::before { content: '“'; }
.skin-loveydovey .card p::after { content: '”'; }
.skin-loveydovey .card-tags { margin: 0; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.skin-loveydovey .card-tags li::before, .skin-loveydovey .tags li::before { content: '#'; }
.skin-loveydovey .card-tags li, .skin-loveydovey .tags li { background: none; padding: 0; color: #a3a3a3; font-size: 13px; white-space: nowrap; }
.skin-loveydovey .chips li:first-child { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
/* Melting (measured): ~1550px rows, 8-up 185px cards, 10px gap, 184px square image with 12px corners,
   text below: name 16/400 warm white, hook 12px 2 lines at 50%, hashtags 12px at 65%. */
.skin-melting { --bg: #16161e; --surface: #222430; --text: #f2f1eb; --muted: rgba(242, 241, 235, 0.5); --accent: #ef7ab8;
  --radius: 12px; --card-ratio: 1 / 1; --card-min: 170px; --card-w: 185px; --gap: 10px;
  --cta: linear-gradient(90deg, #b82d78, #794ec2); --chip-radius: 16px; }
.skin-melting main, .skin-melting .site-header, .skin-melting .site-footer { max-width: 1582px; }
.skin-melting .card { background: transparent; border-radius: 0; }
.skin-melting .card h3 { margin: 8px 0 2px; font-size: 16px; font-weight: 400; }
.skin-melting .card p { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: rgba(242, 241, 235, 0.5); }
.skin-melting .card-tags { margin: 0; gap: 4px; max-height: 3em; overflow: hidden; }
.skin-melting .card-tags li { background: none; padding: 0; font-size: 12px; color: rgba(242, 241, 235, 0.65); }
.skin-melting .card-tags li::before { content: '#'; }
.skin-melting .shelf h2, .skin-melting .all h2 { font-size: 18px; font-weight: 600; }
.skin-melting .switch-app { background: var(--surface); border-color: #2d303f; }

/* Rofan (measured): horizontal shelves of 240px cards, 20px gap, 236px square image with 8px corners,
   text below: name 18/600, hook 16px 2 lines gray, one-line hashtag string 14px. */
.skin-rofan { --bg: #343a40; --surface: #1f2327; --text: #f3f4f6; --muted: #9ca3af; --accent: #ffc200;
  --radius: 8px; --card-ratio: 1 / 1; --card-min: 220px; --card-w: 236px; --gap: 20px;
  --cta-text: #111; --cta-radius: 8px; --chip-radius: 8px; }
.skin-rofan main, .skin-rofan .site-footer { max-width: 1160px; }
.skin-rofan .site-header { background: #1f2327; max-width: none; }
.skin-rofan .card { background: transparent; border-radius: 0; }
.skin-rofan .card h3 { margin: 10px 0 4px; font-size: 18px; font-weight: 600; }
.skin-rofan .card p { margin: 0 0 4px; font-size: 16px; color: #9ca3af; }
.skin-rofan .card-tags { margin: 0; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.skin-rofan .card-tags li { background: none; padding: 0; font-size: 14px; color: #e5e7eb; white-space: nowrap; }
.skin-rofan .card-tags li::before { content: '#'; }
.skin-rofan .shelf h2, .skin-rofan .all h2 { font-size: 22px; font-weight: 700; }

/* Isekai Zero (measured): #090027, 166x223 (3:4) images with 16px corners, 12px gap; title 14/700 (2 lines)
   and blurb 12px (3 lines) overlaid inside the image; tags below. */
.skin-isekaizero { --bg: #090027; --surface: #141a3d; --text: #fff; --muted: #e0e0e0; --accent: #f99e9e;
  --radius: 16px; --card-ratio: 3 / 4; --card-min: 166px; --card-w: 166px; --gap: 12px; --hook-lines: 3;
  --cta: linear-gradient(90deg, #f99e9e, rgba(29, 40, 118, 0.8)); --cta-radius: 12px; }
.skin-isekaizero .intro h1, .skin-isekaizero .related h2 { background: linear-gradient(90deg, #fff, #f99e9e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skin-isekaizero .card { position: relative; background: transparent; border-radius: 0; }
.skin-isekaizero .card-link { position: relative; }
.skin-isekaizero .card-media img { border-radius: var(--radius); }
.skin-isekaizero .card-text { position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 4; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 10px; border-radius: var(--radius);
  background: linear-gradient(to top, rgba(9, 0, 39, 0.95), rgba(9, 0, 39, 0.55) 45%, transparent 70%); }
.skin-isekaizero .card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.skin-isekaizero .card p { margin: 0; font-size: 12px; line-height: 1.4; color: #e0e0e0; }
/* The original shows creator and play count under the image; we have neither, so tags stay off the card. */
.skin-isekaizero .card-tags { display: none; }
/* WHIF (measured): narrow ~984px column, 6-up 160px cards, tight 4px gap, 160x208 (~3:4) image with 12px corners,
   text below: name 16/700, hook 14/500 gray, @creator 12px. */
.skin-whif { --bg: #12121d; --surface: #2a2a34; --text: #fff; --muted: #88888e; --accent: #8a5de5;
  --radius: 12px; --card-ratio: 10 / 13; --card-min: 150px; --card-w: 160px; --gap: 4px; }
.skin-whif main, .skin-whif .site-header, .skin-whif .site-footer { max-width: 1012px; }
.skin-whif .grid { row-gap: 20px; }
.skin-whif .card { background: transparent; border-radius: 0; }
.skin-whif .card h3 { margin: 8px 4px 2px; font-size: 16px; font-weight: 700; }
.skin-whif .card p { margin: 0 4px 4px; font-size: 14px; font-weight: 500; color: #88888e; }
.skin-whif .card-tags { margin: 0 4px; }
.skin-whif .intro h1 { display: inline-block; padding-bottom: 6px; border-bottom: 4px solid var(--accent); }
.skin-whif .card-tags li { background: none; padding: 0; color: #c496ff; }
.skin-whif .card-tags li::before { content: '#'; }

/* Picker tiles hint at each app's accent without any logo. */
.tile-caveduck { border-inline-start: 4px solid #df205d; }
.tile-loveydovey { border-inline-start: 4px solid #ff5a98; }
.tile-melting { border-inline-start: 4px solid #ef7ab8; }
.tile-rofan { border-inline-start: 4px solid #ffc200; }
.tile-isekaizero { border-inline-start: 4px solid #f99e9e; }
.tile-whif { border-inline-start: 4px solid #8a5de5; }

@media (max-width: 720px) {
  .character { grid-template-columns: 1fr; }
  .avatar { max-width: 420px; margin: 0 auto; }
  .character h1 { font-size: 22px; }
}