/* Oddshelf v2 components: library, play, community, profiles, settings, cookie notice. Loads after site.css. */
.pill.live { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.card .badges .pill.live { background: color-mix(in srgb, var(--good-ink) 80%, transparent); color: var(--good-hi); }
.pill.staff { background: var(--accent); color: var(--accent-ink); }
.pill.pro { background: linear-gradient(90deg, var(--ai-3), var(--heart)); color: var(--accent-ink); }
.notice { border-radius: 16px; padding: 14px 16px; margin: 18px 0 0; background: color-mix(in srgb, var(--aimade) 10%, transparent); border: 1px solid color-mix(in srgb, var(--aimade) 35%, transparent);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14.5px; }
.owned-tag { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; font-size: 13px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent);
  padding: 5px 11px; border-radius: 99px; margin-bottom: 12px; }
.dl.archived { opacity: .75; border: 1px dashed var(--line-hi); }
/* Checkboxes and radios inside .field must not pick up the text-input styles (width 100%, padding, min-height). */
.field input[type="checkbox"], .field input[type="radio"], .check input { width: auto; min-height: 0; padding: 0; margin: 0; flex-shrink: 0; box-shadow: none; }
.check.consent { display: block; font-size: 13.5px; line-height: 1.5; font-weight: 500; padding: 12px 14px; margin: 4px 0 12px; }
.check.consent input { margin-right: 8px; vertical-align: -2px; }
.check.consent a { color: var(--accent); font-weight: 700; }
.shake { animation: shake .4s; border-color: var(--bad) !important; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, transparent) !important; }
.editor .panel + .panel { margin-top: 18px; }
.lib-meta { font-size: 12px; color: var(--faint); }
.seg a { padding: 7px 12px; border-radius: 9px; font-weight: 700; color: var(--muted); font-size: 13.5px; }
.seg a.on { background: var(--surface-2); color: var(--text); }
.crumb { display: inline-block; color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.crumb:hover { color: var(--accent); }

.playcard { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; display: block; background: var(--shade); overflow: hidden; }
.playcard .art { position: absolute; inset: 0; transition: transform .6s, filter .4s; }
.playcard .art svg { width: 100%; height: 100%; }
.playcard:hover .art { transform: scale(1.04); filter: brightness(.8); }
.playcard-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(circle, color-mix(in srgb, var(--shade) 15%, transparent), color-mix(in srgb, var(--shade) 55%, transparent)); }
.playcard-cta small { color: var(--on-art); font-weight: 600; text-shadow: 0 1px 8px var(--shade); }
.shot.playing { position: relative; }
.fs-btn { position: absolute; right: 12px; bottom: 12px; background: color-mix(in srgb, var(--ink) 70%, transparent); color: var(--white); border-color: color-mix(in srgb, var(--white) 20%, transparent); }

.live-band { position: relative; display: grid; grid-template-columns: 1.4fr .9fr; border-radius: 26px; overflow: hidden; min-height: 300px;
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--good) 45%, transparent); isolation: isolate; }
.live-band .art { position: absolute; inset: 0; z-index: -2; }
.live-band .art svg { width: 100%; height: 100%; }
.live-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 20%, color-mix(in srgb, var(--ink) 40%, transparent) 70%, color-mix(in srgb, var(--ink) 85%, transparent)); }
.live-copy { padding: 34px; display: grid; gap: 10px; align-content: center; justify-items: start; color: var(--white); }
.live-copy h2 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.03em; }
.live-copy p { margin: 0 0 8px; color: var(--on-art); font-size: 16px; max-width: 520px; }
.live-side { margin: 22px; padding: 22px; border-radius: 20px; background: color-mix(in srgb, var(--white) 7%, transparent); border: 1px solid color-mix(in srgb, var(--white) 12%, transparent); backdrop-filter: blur(14px);
  display: grid; gap: 10px; align-content: center; color: var(--white); }
.live-side b { font-family: var(--display); font-size: 20px; }
.live-side span { color: var(--on-art-2); font-size: 14px; }
.live-side code, .prose code, .panel code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: color-mix(in srgb, var(--shade) 35%, transparent); padding: 2px 7px; border-radius: 7px; color: var(--accent-pale); }
.live-side code { padding: 10px 12px; font-size: 14px; }

.community-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.post-row, .thread-row { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; transition: background .15s; }
.post-row:hover, .thread-row:hover { background: var(--surface); }
.post-row .thumb { width: 110px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.post-row .thumb svg { width: 100%; height: 100%; }
.post-row b, .thread-row b { display: block; font-size: 15px; }
.post-row small, .thread-row small { color: var(--muted); font-size: 13px; display: block; }
.thread-row i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.forum-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding-bottom: 40px; }
.forum-grid aside { display: grid; gap: 18px; align-content: start; }
.cat-list, .thread-list, .posts { display: grid; gap: 12px; }
.cat, .thread { display: grid; grid-template-columns: auto 1fr 80px 80px 220px; gap: 16px; align-items: center; transition: transform .15s, border-color .15s; }
.cat:hover, .thread:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.cat { position: relative; overflow: hidden; isolation: isolate; }
/* Each forum's colour breathes: a glowing bar with light running through it, and a soft aura washing across the card. */
.cat i { position: relative; width: 12px; height: 46px; border-radius: 6px; background: var(--cat); overflow: hidden;
  animation: catPulse 3.2s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.55s); }
.cat i::after { content: ""; position: absolute; left: 0; right: 0; height: 60%; top: -60%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--white) 85%, transparent), transparent); animation: catShine 2.6s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -0.43s); }
.cat::before { content: ""; position: absolute; z-index: -1; left: -120px; top: 50%; width: 320px; height: 220px; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--cat), transparent); opacity: .26; filter: blur(8px);
  animation: catAura 5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.8s); transition: opacity .3s; }
.cat:hover::before { opacity: .45; }
.cat:hover { border-color: color-mix(in srgb, var(--cat) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat) 25%, transparent), 0 14px 40px -12px var(--cat); }
.cat:hover i { animation-duration: 1.4s; }
.thread-row i { animation: dotPulse 2.4s ease-in-out infinite; }
.thread-row:nth-child(2n) i { animation-delay: -.8s; } .thread-row:nth-child(3n) i { animation-delay: -1.6s; }
.page-head h1[style*="--cat"] { animation: titleGlow 4s ease-in-out infinite; }
@keyframes catPulse { 0%, 100% { box-shadow: 0 0 10px var(--cat), 0 0 0 transparent; filter: brightness(1); }
  50% { box-shadow: 0 0 24px var(--cat), 0 0 46px color-mix(in srgb, var(--cat) 45%, transparent); filter: brightness(1.25); } }
@keyframes catShine { 0% { top: -60%; } 60%, 100% { top: 110%; } }
@keyframes catAura { 0%, 100% { translate: 0 -50%; scale: 1; } 50% { translate: 40px -50%; scale: 1.15; } }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 4px currentColor; transform: scale(1); } 50% { box-shadow: 0 0 14px currentColor; transform: scale(1.25); } }
@keyframes titleGlow { 0%, 100% { text-shadow: 0 0 30px color-mix(in srgb, var(--cat) 50%, transparent); } 50% { text-shadow: 0 0 60px var(--cat); } }
@media (prefers-reduced-motion: reduce) { .cat i, .cat i::after, .cat::before, .thread-row i, .page-head h1 { animation: none !important; } }
.cat-main b, .t-main b { display: block; font-family: var(--display); font-size: 18px; }
.cat-main small, .t-main small { color: var(--muted); }
.cat-stats { text-align: center; }
.cat-stats b { display: block; font-family: var(--display); font-size: 20px; }
.cat-stats small { color: var(--faint); font-size: 12px; }
.cat-latest { min-width: 0; }
.cat-latest b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-latest small { color: var(--faint); font-size: 12px; }
.thread { grid-template-columns: 42px 1fr 80px 80px 160px; }
.post { display: grid; grid-template-columns: 46px 1fr; gap: 16px; }
.post .avatar { width: 46px; height: 46px; font-size: 20px; }
.post-body { min-width: 0; }
.post-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.post-head a:hover { color: var(--accent); }
.post-actions { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }
.posts + .form, .posts + p { margin-top: 18px; }
.md h3 { font-size: 22px; margin: 26px 0 10px; }
.md ul { margin: 0 0 14px; padding-left: 22px; }
.md li { margin: 4px 0; }
.md a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.md a:hover { text-decoration: underline; }

.blog-lead { position: relative; display: flex; align-items: flex-end; min-height: 380px; border-radius: 26px; overflow: hidden; isolation: isolate; margin-bottom: 26px; box-shadow: var(--shadow); }
.blog-lead .art { position: absolute; inset: 0; z-index: -2; }
.blog-lead .art svg { width: 100%; height: 100%; }
.blog-lead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--ink) 92%, transparent)); }
.blog-lead-copy { padding: 32px; max-width: 700px; color: var(--white); display: grid; gap: 8px; justify-items: start; }
.blog-lead-copy h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
.blog-lead-copy p { color: var(--on-art); margin: 0 0 8px; font-size: 17px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card { display: grid; gap: 8px; align-content: start; transition: transform .2s; }
.blog-card:hover { transform: translateY(-4px); }
.blog-card .thumb { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.blog-card .thumb svg { width: 100%; height: 100%; }
.blog-card h3 { font-size: 20px; }
.blog-card p { margin: 0; font-size: 14px; }
.article-hero { height: 340px; position: relative; overflow: hidden; isolation: isolate; }
.article-hero .art { position: absolute; inset: 0; z-index: -2; }
.article-hero .art svg { width: 100%; height: 100%; }
.article-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); }
.article { max-width: 760px; margin-top: -120px; position: relative; padding-bottom: 40px; }
.article h1 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -.035em; }
.article-meta { color: var(--muted); margin: 10px 0 20px; }
.lede { font-size: 21px; color: var(--muted); line-height: 1.55; margin: 0 0 24px; }
.article .prose { font-size: 17.5px; }

.profile-banner { height: 280px; position: relative; overflow: hidden; isolation: isolate; }
.profile-banner .art { position: absolute; inset: 0; z-index: -2; }
.profile-banner .art svg { width: 100%; height: 100%; }
.profile-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, var(--bg)); }
.profile-head { display: flex; gap: 24px; align-items: flex-end; padding: 0 0 10px; margin-top: -90px; position: relative; flex-wrap: wrap; }
.avatar.xl { width: 132px; height: 132px; font-size: 56px; border: 5px solid var(--bg); box-shadow: var(--shadow); }
.profile-id { flex: 1; min-width: 260px; }
.profile-id h1 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -.03em; }
.profile-id p { margin: 4px 0 0; }
.profile-bio { max-width: 680px; margin-top: 10px !important; font-size: 16px; white-space: pre-wrap; }
.profile-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 0; }
.stat-row .stat + .stat { margin-top: 0; }
.stat { text-align: center; padding: 16px; }
.stat b { display: block; font-family: var(--display); font-size: 26px; }
.stat small { color: var(--muted); }

.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 26px; padding-bottom: 40px; align-items: start; }
.settings-nav { display: grid; gap: 4px; position: sticky; top: 86px; }
.settings-nav a { padding: 10px 14px; border-radius: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.settings-nav a:hover { background: var(--surface); color: var(--text); }
.settings-nav a.on { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
#pane { display: grid; gap: 18px; }
#pane > .panel + .panel { margin-top: 0; }
.banner-edit { position: relative; border-radius: 18px; overflow: hidden; height: 190px; }
.banner-edit .art { position: absolute; inset: 0; }
.banner-edit .art svg { width: 100%; height: 100%; }
.avatar-edit { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 14px; align-items: flex-end; }
.avatar-edit .avatar.xl { width: 104px; height: 104px; font-size: 44px; }

.cookie-note { position: fixed; left: 16px; bottom: 16px; z-index: 120; max-width: 460px; display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line-hi); box-shadow: var(--shadow); animation: pop .3s ease-out; }
.cookie-note p { margin: 0; font-size: 13.5px; color: var(--muted); }
.cookie-note b { color: var(--text); }
.cookie-note a { color: var(--accent); font-weight: 700; }
.footer-in { grid-template-columns: 1.4fr repeat(4, 1fr); }
.footer-note { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-note .linkish { display: inline; margin: 0; font-size: 13px; color: var(--faint); }
.footer-note a { display: inline; color: var(--faint); margin: 0; font-size: 13px; }

.pill.mature { background: var(--bad); color: var(--white); }
/* The optional "Made with AI" badge: a proud, glowing gradient, not a warning label. */
.pill.made-ai { background: linear-gradient(90deg, var(--ai-1), var(--ai-2) 55%, var(--ai-3)); color: var(--white); font-family: var(--display); letter-spacing: .01em;
  box-shadow: 0 0 14px color-mix(in srgb, var(--assist) 45%, transparent); background-size: 200% 100%; animation: aiShimmer 6s ease-in-out infinite; }
@keyframes aiShimmer { 50% { background-position: 100% 0; } }
.ai-box.ai { background: linear-gradient(135deg, color-mix(in srgb, var(--ai-1) 14%, transparent), color-mix(in srgb, var(--ai-2) 10%, transparent)); }
.pill.danger { background: var(--bad); color: var(--white); }
.pill.warn { background: color-mix(in srgb, var(--aimade) 20%, transparent); color: var(--aimade); }
.mature-gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(22px); }
.gate-card { max-width: 460px; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 28px; border-radius: 24px;
  background: var(--surface-solid); border: 1px solid var(--line-hi); box-shadow: var(--shadow); animation: pop .25s ease-out; }
.gate-card p { margin: 0 0 6px; }
.mature-gate h2 { font-size: 28px; }
body.gated { overflow: hidden; }
.report-list { display: grid; gap: 12px; padding-bottom: 40px; }
.report.prio-2 { border-color: color-mix(in srgb, var(--bad) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent), 0 10px 40px -10px color-mix(in srgb, var(--bad) 50%, transparent); }
.report.prio-1 { border-color: color-mix(in srgb, var(--aimade) 45%, transparent); }
.report-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.report-body { display: flex; gap: 14px; align-items: flex-start; }
.report-body .thumb { width: 110px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.report-body .thumb svg, .report-body .thumb img { width: 100%; height: 100%; object-fit: cover; }
.report-body blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line-hi); color: var(--muted); white-space: pre-wrap; }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.report-actions .input { flex: 1; min-width: 180px; min-height: 34px; padding: 6px 10px; }

/* ---------- browse filters, category tiles, tags, sales ---------- */
.filters h4 { display: flex; align-items: center; gap: 8px; }
.filters .badge { background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: 11px; padding: 1px 7px; letter-spacing: 0; }
.fgroup summary { list-style: none; cursor: pointer; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary h4::after { content: "▾"; margin-left: auto; color: var(--faint); transition: transform .2s; }
.fgroup:not([open]) summary h4::after { transform: rotate(-90deg); }
.fopts.long { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(var(--shade) 80%, transparent); mask-image: linear-gradient(var(--shade) 80%, transparent); }
.fgroup .more { font-size: 13px; color: var(--accent); margin: 4px 10px; }
.opt .n { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 600; }
.sort-select { width: auto; min-height: 40px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.price.sale { background: var(--bad); color: var(--white); display: inline-flex; gap: 5px; align-items: center; }
.price.sale s { opacity: .7; font-weight: 700; }
.price.sale em { font-style: normal; background: color-mix(in srgb, var(--shade) 25%, transparent); border-radius: 5px; padding: 0 4px; }
.sale-flag { display: inline-block; background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad-hi); font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 99px; margin-bottom: 10px; }
.big-price .was { font-size: 20px; color: var(--faint); margin-left: 10px; font-weight: 800; }
.facts dd a { color: var(--text); border-bottom: 1px dashed var(--line-hi); }
.facts dd a:hover { color: var(--accent); }
.cat-head { display: grid; gap: 6px; justify-items: start; }
.cat-head .btn { margin-top: 10px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ctile { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.ctile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--accent) 45%, transparent); }
.ctile .ico { font-size: 30px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--shade) 35%, transparent)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ctile:hover .ico { transform: scale(1.2) rotate(-6deg); }
.ctile b { font-family: var(--display); font-size: 17px; }
.ctile small { color: var(--faint); font-size: 12.5px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 40px; }
.detail-group { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.detail-group:first-child { border-top: 0; }
.detail-group b { font-size: 14px; }
.detail-group small { color: var(--faint); font-size: 12px; margin-top: -4px; }
.detail-group .check { padding: 6px 11px; font-size: 13px; }

@media (max-width: 1080px) {
  .forum-grid, .community-strip, .live-band { grid-template-columns: 1fr; }
  .cat, .thread { grid-template-columns: auto 1fr 70px; }
  .cat .cat-latest, .thread .cat-latest, .cat .cat-stats + .cat-stats, .thread .cat-stats + .cat-stats { display: none; }
}
@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .profile-head { margin-top: -70px; }
  .avatar.xl { width: 100px; height: 100px; font-size: 42px; }
  .live-side { display: none; }
  .cookie-note { left: 12px; right: 12px; max-width: none; }
  .post { grid-template-columns: 1fr; }
  .post > .avatar { display: none; }
}

/* ---------- wishlists, follows, notifications ---------- */
.heart-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; transition: fill .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.card .wish { position: absolute; z-index: 4; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--white) 18%, transparent); background: color-mix(in srgb, var(--ink) 60%, transparent); color: var(--white); backdrop-filter: blur(8px); padding: 0;
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s, background .2s, color .2s; }
.card:hover .wish, .card .wish.on, .card .wish:focus-visible { opacity: 1; transform: none; }
.card .wish:hover { background: color-mix(in srgb, var(--heart) 30%, transparent); }
.card .wish.on { color: var(--heart); background: color-mix(in srgb, var(--ink) 72%, transparent); border-color: color-mix(in srgb, var(--heart) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--heart) 45%, transparent); }
.wish.on .heart-ico, .wish-btn.on .heart-ico { fill: currentColor; }
.wish.pop .heart-ico, .wish-btn.pop .heart-ico { animation: heartPop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes heartPop { 0% { transform: scale(.6); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (hover: none) { .card .wish { opacity: 1; transform: none; } }
.card.leaving { animation: cardLeave .32s ease-in forwards; }
@keyframes cardLeave { to { opacity: 0; transform: translateY(14px) scale(.94); } }
.buy-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.buy-actions .btn { flex: 1; }
.wish-btn .n, .follow-btn .n { background: var(--surface-2); border-radius: 99px; padding: 1px 8px; font-size: 12px; color: var(--muted); }
.wish-btn.on { color: var(--heart-hi); border-color: color-mix(in srgb, var(--heart) 50%, transparent); background: color-mix(in srgb, var(--heart) 10%, transparent); }
.follow-btn { border-radius: 99px; gap: 7px; }
.follow-btn .fl { font-weight: 800; }
.follow-btn.on { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--good); }
.game-title .follow-btn { background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--white); border-color: color-mix(in srgb, var(--white) 20%, transparent); backdrop-filter: blur(8px); height: 38px; }
.game-title .follow-btn.on { color: var(--good-hi); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.game-title .follow-btn .n { background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--on-art); }
.profile-actions { display: flex; gap: 10px; align-self: flex-end; padding-bottom: 8px; }
.profile-actions .follow-btn { height: 46px; padding: 0 20px; font-size: 15px; }
.stat-row.five { grid-template-columns: repeat(5, 1fr); }

.bellwrap { position: relative; }
.bell { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center;
  cursor: pointer; transition: background .15s, border-color .15s; padding: 0; }
.bell:hover, .bellwrap.open .bell { background: var(--surface-2); border-color: var(--line-hi); }
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
.bell:has(.bell-count:not([hidden])) svg { animation: bellRing 5s ease-in-out infinite; }
@keyframes bellRing { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(14deg); } 93% { transform: rotate(-12deg); } 96% { transform: rotate(7deg); } }
.bell-count { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink); font: 900 11px/20px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--bg), 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
.bell-pop { position: absolute; right: -52px; top: calc(100% + 12px); width: 390px; max-width: calc(100vw - 24px); background: var(--surface-solid); border: 1px solid var(--line-hi);
  border-radius: 20px; box-shadow: var(--shadow); display: none; overflow: hidden; z-index: 60; }
.bellwrap.open .bell-pop { display: block; animation: pop .16s ease-out; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bell-head b { font-family: var(--display); font-size: 17px; }
.bell-head .linkish { font-size: 13px; font-weight: 700; color: var(--accent); }
.bell-list { max-height: 430px; overflow-y: auto; padding: 6px; }
.bell-empty { padding: 26px 18px; text-align: center; color: var(--muted); display: grid; gap: 4px; justify-items: center; font-size: 14px; }
.bell-empty .big svg { width: 34px; height: 34px; fill: none; stroke: var(--faint); stroke-width: 1.8; }
.bell-empty b { color: var(--text); font-family: var(--display); font-size: 16px; }
.bell-foot { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--accent); }
.bell-foot:hover { background: var(--surface-2); }
.note { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background .15s; }
.note:hover { background: var(--surface-2); }
.note.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.note.unread:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.n-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.n-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.n-main b { font-size: 14px; line-height: 1.35; }
.n-main small { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.n-main em { font-style: normal; color: var(--faint); font-size: 12px; }
.n-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 10px var(--accent); }
.note.compact { padding: 10px; }
.note.compact .n-ico { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
.notes-grid { display: grid; grid-template-columns: 1fr 330px; gap: 24px; padding-bottom: 40px; align-items: start; }
.notes-grid aside { display: grid; gap: 18px; }
.notes-grid aside .panel + .panel { margin-top: 0; }
.note-list { padding: 8px; display: grid; gap: 2px; }
.note-list .empty { border: 0; padding: 50px 20px; }
.note-day { font-family: var(--body); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 12px 12px 4px; }
.note-day:first-child { margin-top: 6px; }
.follow-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); transition: opacity .3s; }
.follow-row:first-of-type { border-top: 0; }
.follow-row > a { display: flex; gap: 10px; align-items: center; min-width: 0; }
.follow-row > a span { display: grid; min-width: 0; }
.follow-row b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row small { color: var(--faint); font-size: 12px; }
.follow-row .follow-btn .n { display: none; }
.follow-row.off { opacity: .5; }
.wish-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; }
.sale-callout { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--bad) 18%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); box-shadow: 0 10px 40px -16px color-mix(in srgb, var(--bad) 60%, transparent); }
.sale-callout .big { font: 900 26px var(--display); }
.sale-callout > span:last-child { display: grid; }
.sale-callout small { color: var(--muted); }
.sale-note { color: var(--bad-hi); font-weight: 700; }
.empty-heart { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: var(--heart);
  background: radial-gradient(circle, color-mix(in srgb, var(--heart) 22%, transparent), transparent 70%); animation: floaty 3s ease-in-out infinite; }
.empty-heart svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; }
.empty-heart.bell-big { color: var(--accent); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
@keyframes floaty { 50% { transform: translateY(-6px); } }
@media (max-width: 1080px) { .notes-grid { grid-template-columns: 1fr; } .stat-row.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .bell-pop { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-width: none; } .stat-row.five { grid-template-columns: 1fr 1fr; } }

/* ---------- devlogs ---------- */
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-head .count { font: 800 12px var(--body); background: var(--surface-2); color: var(--muted); border-radius: 99px; padding: 2px 9px; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.devlog-row { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.devlog-row:hover { background: var(--surface-2); border-color: var(--line); transform: translateX(3px); }
.devlog-row .cal { width: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; text-align: center; background: var(--bg-2); border: 1px solid var(--line-hi); }
.devlog-row .cal b { display: block; font: 900 20px/1 var(--display); padding: 8px 0 3px; }
.devlog-row .cal small { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 0; color: var(--accent-ink); background: var(--accent); }
.dv-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dv-main b { font-family: var(--display); font-size: 16.5px; }
.dv-main small { color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-go { color: var(--faint); font-weight: 800; transition: transform .15s, color .15s; }
.devlog-row:hover .dv-go { color: var(--accent); transform: translateX(3px); }
.devlog-edit-row { display: flex; align-items: center; gap: 8px; }
.devlog-edit-row .devlog-row { flex: 1; min-width: 0; }
.devlog-hero { height: 300px; }
.devlog-hero .art svg, .devlog-hero .art img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(1.1); transform: scale(1.06); }
.devlog-title { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.devlog-title p { margin: 4px 0 0; }
.timeline { position: relative; display: grid; gap: 16px; padding-left: 28px; margin: 10px 0 30px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--tint-1) 70%, transparent), transparent); }
.tl-item { position: relative; }
.tl-dot { position: absolute; left: -26px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 14px var(--accent); }
.tl-card { display: grid; gap: 6px; transition: transform .2s, border-color .2s; }
.tl-card:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.tl-card h2 { font-size: 24px; letter-spacing: -.02em; }
.tl-card p { margin: 0; }
.read-more { color: var(--accent); font-weight: 800; font-size: 14px; }
.devlog-game { display: flex; gap: 16px; align-items: center; margin-top: 30px; transition: border-color .2s, transform .2s; }
.devlog-game:hover { border-color: var(--accent); transform: translateY(-2px); }
.devlog-game .thumb { width: 120px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--shade) 60%, transparent); }
.devlog-game .thumb svg, .devlog-game .thumb img { width: 100%; height: 100%; object-fit: cover; }
.dg-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dg-main small { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.dg-main b { font-family: var(--display); font-size: 20px; }
.dg-main .muted { font-size: 14px; }
.devlog-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.devlog-meta .who { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.devlog-meta .who .avatar { width: 32px; height: 32px; font-size: 14px; }
.devlog-meta .btn { margin-left: auto; }
.devlog-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.devlog-nav a { display: grid; gap: 4px; transition: border-color .2s, transform .2s; }
.devlog-nav a:hover { border-color: var(--accent); transform: translateY(-2px); }
.devlog-nav .newer { text-align: right; }
.devlog-nav small { color: var(--faint); font-weight: 700; }
.devlog-nav b { font-family: var(--display); font-size: 17px; }
.devlog-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 50px; align-items: start; }
.devlog-preview { position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow-y: auto; }
.devlog-preview h2 { font-size: 30px; letter-spacing: -.02em; margin-bottom: 14px; overflow-wrap: anywhere; }
.kicker { margin: 0 0 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1080px) { .devlog-editor { grid-template-columns: 1fr; } .devlog-preview { position: static; max-height: none; } }
@media (max-width: 860px) { .devlog-nav { grid-template-columns: 1fr; } .devlog-game { flex-wrap: wrap; } .devlog-game .thumb { width: 90px; } }

/* ---------- collections ---------- */
.collect-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lock-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; vertical-align: -2px; }
.priv { display: inline-flex; align-items: center; gap: 3px; color: var(--aimade); font-weight: 700; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; overflow: hidden; border-radius: 14px; background: var(--surface-2); }
.mosaic > span { overflow: hidden; min-height: 0; }
.mosaic > span.ghost { opacity: .35; filter: saturate(.6); }
.mosaic svg, .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding-bottom: 30px; }
.coll-grid .skeleton { aspect-ratio: 4 / 3.6; }
.coll-card { display: grid; gap: 10px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.coll-card:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: 0 22px 50px -20px color-mix(in srgb, var(--shade) 70%, transparent); }
.coll-card .mosaic { aspect-ratio: 4 / 3; }
.coll-card .mosaic > span { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.coll-card:hover .mosaic > span:nth-child(1) { transform: scale(1.06) translate(-2%, -2%); }
.coll-card:hover .mosaic > span:nth-child(4) { transform: scale(1.06) translate(2%, 2%); }
.cc-body { display: grid; gap: 3px; padding: 0 4px 2px; }
.cc-body b { font-family: var(--display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-body small { color: var(--faint); font-size: 12.5px; }
.profile-tabs { display: flex; gap: 6px; margin-top: 30px; border-bottom: 1px solid var(--line); }
.profile-tabs a { padding: 12px 16px; font-weight: 800; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 8px; align-items: center; }
.profile-tabs a span { font-size: 12px; background: var(--surface-2); border-radius: 99px; padding: 1px 8px; color: var(--faint); }
.profile-tabs a span:empty { display: none; }
.profile-tabs a:hover { color: var(--text); }
.profile-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.profile-tabs + #ptab .shelf { margin-top: 28px; }
.modal.wide { width: min(580px, 100%); }
.coll-pick { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
.pick { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer;
  text-align: left; transition: border-color .15s, background .15s; }
.pick:hover { border-color: var(--line-hi); }
.pick .mosaic { width: 64px; height: 48px; flex-shrink: 0; border-radius: 9px; gap: 2px; }
.pk-main { flex: 1; min-width: 0; display: grid; }
.pk-main b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-main small { color: var(--faint); font-size: 12.5px; }
.pick .tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-hi); color: transparent; font-weight: 900;
  transition: all .2s cubic-bezier(.3, 1.6, .5, 1); }
.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.pick.on .tick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.08); }
.coll-new { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); gap: 10px; }
.row-in { display: flex; gap: 8px; }
.row-in input { flex: 1; }
.coll-hero { height: 260px; position: relative; overflow: hidden; isolation: isolate; }
.coll-strip { position: absolute; inset: -10px; display: flex; gap: 6px; transform: rotate(-3deg) scale(1.12); z-index: -2; filter: saturate(1.1); }
.coll-strip > span { flex: 1; min-width: 0; overflow: hidden; border-radius: 14px; }
.coll-strip svg, .coll-strip img { width: 100%; height: 100%; object-fit: cover; }
.coll-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 25%, transparent), var(--bg)); }
.coll-page { margin-top: -120px; position: relative; padding-bottom: 40px; }
.coll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; padding: 26px 28px; }
.ch-main { min-width: 0; flex: 1; }
.ch-main h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; }
.coll-desc { margin: 8px 0 0; color: var(--muted); font-size: 16px; max-width: 720px; white-space: pre-wrap; }
.ch-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.ch-meta .who { display: inline-flex; gap: 9px; align-items: center; }
.ch-meta .who .avatar { width: 30px; height: 30px; font-size: 13px; }
.ch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coll-note { margin: 0; font-size: 13px; color: var(--text); font-style: italic; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; }
.coll-tools { display: flex; gap: 14px; font-size: 12.5px; font-weight: 700; }
.coll-tools .linkish:hover { color: var(--accent); }

/* ---------- more listing kinds: nav "More", kind pills, editor kind cards ---------- */
.navmore { position: relative; }
.navmore-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 12px; border-radius: 10px; font-weight: 600; color: var(--muted); background: none; border: 0;
  cursor: pointer; white-space: nowrap; }
.navmore-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.navmore-btn:hover, .navmore-btn.on, .navmore.open .navmore-btn { color: var(--text); background: var(--surface); }
.navmore-pop { position: absolute; left: -8px; top: calc(100% + 10px); width: 300px; padding: 8px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line-hi);
  box-shadow: var(--shadow); display: none; z-index: 60; }
.navmore-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.navmore.open .navmore-pop { display: grid; animation: pop .15s ease-out; }
@media (hover: hover) { .navmore:hover .navmore-pop { display: grid; animation: pop .15s ease-out; } .navmore:hover .navmore-btn svg { transform: rotate(180deg); } }
.navmore.shut .navmore-pop { display: none !important; }
.navmore.open .navmore-btn svg { transform: rotate(180deg); }
.mainnav .navmore-pop a { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--text); white-space: normal; }
.mainnav .navmore-pop a:hover, .mainnav .navmore-pop a.on { background: var(--surface-2); }
.navmore-pop i { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 900;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.navmore-pop span { display: grid; }
.navmore-pop b { font-size: 14.5px; }
.navmore-pop small { color: var(--faint); font-size: 12px; font-weight: 500; }
.navmore-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; width: auto; }
.pill.k-asset { background: color-mix(in srgb, var(--hand) 16%, transparent); color: var(--info-hi); }
.pill.k-tool { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-hi); }
.pill.k-comic { background: color-mix(in srgb, var(--aimade) 16%, transparent); color: var(--star-hi); }
.pill.k-book { background: color-mix(in srgb, var(--assist) 16%, transparent); color: var(--assist-hi); }
.pill.k-soundtrack { background: color-mix(in srgb, var(--tint-3) 15%, transparent); color: var(--heart-hi); }
.pill.k-mod { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hi); }
.card .badges .pill[class*="k-"] { background: color-mix(in srgb, var(--ink) 72%, transparent); }
.card .badges .pill.k-comic { color: var(--star-hi); } .card .badges .pill.k-book { color: var(--assist-hi); } .card .badges .pill.k-soundtrack { color: var(--heart-hi); }
.card .badges .pill.k-mod { color: var(--accent-hi); } .card .badges .pill.k-asset { color: var(--info-hi); } .card .badges .pill.k-tool { color: var(--good-hi); }
.game-title a.pill[class*="k-"] { background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(8px); height: 30px; }
.kind-cards { grid-template-columns: repeat(4, 1fr); }
.kind-cards .choice { display: grid; gap: 2px; align-content: start; position: relative; }
.kc-ico { font-style: normal; font-size: 22px; line-height: 1; margin-bottom: 4px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.kind-cards .choice:hover .kc-ico, .kind-cards .choice:has(input:checked) .kc-ico { transform: scale(1.18) rotate(-6deg); }
.kind-links { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-for .input { min-height: 40px; }
@media (max-width: 1080px) { .kind-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .topbar.open .mainnav { padding-top: 68px; max-height: calc(100vh - 66px); overflow-y: auto; }
  .topbar.open .search { top: 78px; }
  .topbar.open .navmore-btn { display: none; }
  .topbar.open .navmore-pop { display: grid; position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; animation: none; }
  .topbar.open .navmore-pop a { padding: 8px 12px; }
  .topbar.open .navmore-pop i { width: 28px; height: 28px; font-size: 15px; }
  .topbar.open .navmore-pop small { display: none; }
  .kind-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- game jams ---------- */
.phase-pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, color-mix(in srgb, var(--ink) 70%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); backdrop-filter: blur(8px); }
.phase-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: dotPulse 2s ease-in-out infinite; color: var(--c); }
.feat { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--accent-ink); }
.secret { display: inline-flex; gap: 6px; align-items: center; color: var(--aimade); font-weight: 700; font-size: 13.5px; }
.theme-tag { font-size: 13.5px; color: var(--muted); }
.theme-tag b { color: var(--text); }
.theme-tag small { color: var(--faint); }
.cd { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--text); }
.cd.big { display: inline-flex; gap: 8px; }
.cd-box { display: grid; justify-items: center; min-width: 62px; padding: 9px 6px 7px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent); }
.cd-box b { font: 900 28px/1 var(--display); color: var(--white); letter-spacing: -.02em; }
.cd-box small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--on-art-2); margin-top: 4px; font-weight: 700; }
.jams-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.jam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.jam-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px);
  transition: transform .2s, border-color .2s, box-shadow .25s; }
.jam-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.jc-art { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.jc-art svg { width: 100%; height: 100%; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.jam-card:hover .jc-art svg { transform: scale(1.05); }
.jc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ink) 55%, transparent)); }
.jc-art .phase-pill { position: absolute; left: 12px; top: 12px; z-index: 1; }
.jc-art .feat { position: absolute; right: 12px; top: 12px; z-index: 1; }
.jc-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.jc-body > b { font-family: var(--display); font-size: 20px; letter-spacing: -.01em; }
.jc-meta { font-size: 13px; color: var(--muted); }
.jc-meta .cd { color: var(--c); }
.jc-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.jam-spot { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: 26px; overflow: hidden; isolation: isolate; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.jam-spot .art { position: absolute; inset: 0; z-index: -2; }
.jam-spot .art svg { width: 100%; height: 100%; }
.jam-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 25%, color-mix(in srgb, var(--ink) 25%, transparent)); }
.js-copy { padding: 32px; display: grid; gap: 10px; justify-items: start; color: var(--white); }
.js-copy h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.03em; }
.js-copy .theme-tag { color: var(--on-art); font-size: 16px; } .js-copy .theme-tag b { color: var(--white); }
.js-cd { display: grid; gap: 6px; margin: 4px 0 8px; }
.js-cd > small, .jh-cd > small { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--on-art-2); font-weight: 800; }
.jam-hero { position: relative; overflow: hidden; isolation: isolate; padding: 30px 0 34px; min-height: 380px; display: flex; align-items: flex-end; }
.jam-hero .art { position: absolute; inset: 0; z-index: -2; }
.jam-hero .art svg { width: 100%; height: 100%; }
.jam-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 35%, transparent), color-mix(in srgb, var(--ink) 55%, transparent) 50%, var(--bg)); }
.jh-in { color: var(--white); display: grid; gap: 10px; }
.jh-in .crumb { color: var(--on-art); }
.jh-top { display: flex; gap: 8px; }
.jh-in h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -.035em; text-shadow: 0 4px 30px color-mix(in srgb, var(--shade) 50%, transparent); }
.jh-host { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--on-art); font-size: 14px; }
.jh-host .who { display: inline-flex; gap: 9px; align-items: center; color: var(--white); }
.jh-host .avatar { width: 30px; height: 30px; font-size: 13px; }
.jh-theme { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
.theme-card { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--white) 16%, transparent); backdrop-filter: blur(12px); }
.theme-card span { display: grid; }
.theme-card small { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--on-art-2); font-weight: 800; }
.theme-card b { font: 900 clamp(22px, 3vw, 32px) var(--display); letter-spacing: -.02em; }
.theme-card.locked { color: var(--aimade); }
.theme-card.locked .lock-ico { width: 30px; height: 30px; stroke-width: 2; }
.theme-card.locked b { color: var(--white); font-size: 20px; }
.theme-card.reveal-glow { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 40px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.jh-cd { display: grid; gap: 6px; justify-items: end; }
.jh-cd.done b { font: 900 30px var(--display); color: var(--aimade); }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 22px 0 26px; counter-reset: s; }
.stepper li { position: relative; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--faint); }
.stepper li i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; background: var(--surface-2); }
.stepper li span { display: grid; min-width: 0; }
.stepper li b { color: var(--muted); font-size: 14px; }
.stepper li small { font-size: 12px; }
.stepper li.done i { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.stepper li.now { border-color: var(--accent); background: var(--accent-soft); color: var(--muted); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.stepper li.now i { background: var(--accent); color: var(--accent-ink); }
.stepper li.now b { color: var(--text); }
.jam-grid-main { display: grid; grid-template-columns: 1fr 340px; gap: 26px; padding-bottom: 50px; }
.jam-grid-main > * { min-width: 0; }
.jam-side { display: grid; gap: 18px; align-content: start; }
.jam-side .panel + .panel { margin-top: 0; }
.jam-entries { margin-top: 30px; }
.jam-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.jam-tools .btn.rated { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.rank-chip { font: 900 13px var(--display); background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 2px 8px; }
.crit { display: flex; gap: 8px; flex-wrap: wrap; }
.rate-progress { font-size: 14px; color: var(--muted); }
.rate-progress b { font: 900 26px var(--display); color: var(--text); margin-right: 4px; }
.results h3 { font-size: 22px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin: 6px 0 20px; }
.pod { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); transition: transform .2s; }
.pod:hover { transform: translateY(-4px); }
.pod.p1 { order: 2; padding-top: 20px; border-color: color-mix(in srgb, var(--aimade) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--aimade) 16%, transparent), var(--surface-2)); box-shadow: 0 20px 50px -24px color-mix(in srgb, var(--aimade) 70%, transparent); }
.pod.p2 { order: 1; } .pod.p3 { order: 3; }
.pod-art { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.pod-art svg, .pod-art img { width: 100%; height: 100%; object-fit: cover; }
.pod-medal { font-size: 30px; line-height: 1; margin-top: -26px; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--shade) 50%, transparent)); }
.pod b { font-family: var(--display); font-size: 16px; }
.pod small { color: var(--faint); font-size: 12px; }
.pod-score { font: 900 22px var(--display); color: var(--aimade); }
.table-wrap { overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rank-table td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: relative; font-variant-numeric: tabular-nums; }
.rank-table td small { display: block; color: var(--faint); font-size: 12px; }
.rank-table td a:hover b { color: var(--accent); }
.rank-table .rk { font: 900 16px var(--display); width: 40px; }
.rank-table tr.me td { background: var(--accent-soft); }
.rank-table .bar { display: block; height: 4px; width: 56px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--v), var(--surface-2) var(--v)); margin-bottom: 4px; }
.vote-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.vh-art { width: 96px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.vh-art svg, .vh-art img { width: 100%; height: 100%; object-fit: cover; }
.vote-head h2 { font-size: 22px; margin: 2px 0; }
.vote-head .kicker { margin: 0; }
.vote-rows { display: grid; gap: 8px; }
.vote-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.vote-row .rate button { font-size: 28px; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), color .1s; }
.vote-row .rate button.hover { color: var(--star-hi); transform: scale(1.12); }
.vote-row .rate button.on { color: var(--star); }
.jam-pill { background: color-mix(in srgb, var(--aimade) 14%, transparent); color: var(--star-hi); }
.jam-pill.top { background: linear-gradient(90deg, color-mix(in srgb, var(--aimade) 30%, transparent), color-mix(in srgb, var(--accent) 25%, transparent)); color: var(--star-hi); box-shadow: 0 0 16px color-mix(in srgb, var(--aimade) 35%, transparent); }
.game-title .jam-pill { backdrop-filter: blur(8px); background-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.jam-editor { display: grid; grid-template-columns: 1fr 360px; gap: 26px; padding-bottom: 50px; align-items: start; }
.jam-preview { position: sticky; top: 86px; }
.jam-preview .jam-card:hover { transform: none; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.crit-edit { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.crit-edit .chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-weight: 900; }
.home-jam-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch; }
.hj-pitch { display: grid; gap: 10px; align-content: center; justify-items: start; }
.hj-pitch b { font: 900 22px var(--display); }
@media (max-width: 1080px) { .jam-grid-main, .jam-editor, .home-jam-row { grid-template-columns: 1fr; } .jam-preview { position: static; } .stepper { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .row3 { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; } .pod.p1, .pod.p2, .pod.p3 { order: 0; }
  .cd-box { min-width: 52px; } .cd-box b { font-size: 22px; }
  .jh-cd { justify-items: start; }
  .js-copy { padding: 22px; }
}

/* ---------- creator stats, Steam keys, bundles ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpis .panel + .panel { margin-top: 0; }
.kpi { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 18px 20px; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 18px var(--c); }
.kpi small { color: var(--muted); font-weight: 700; font-size: 13px; }
.kpi b { font: 900 30px/1.1 var(--display); letter-spacing: -.02em; }
.kpi > span { font-size: 12.5px; color: var(--faint); }
.kpi em { font-style: normal; }
.delta { font-weight: 800; margin-right: 4px; color: var(--muted); }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.chart-panel { padding: 18px 18px 10px; }
.metric-seg button { display: inline-flex; align-items: center; gap: 7px; }
.metric-seg button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: .5; }
.metric-seg button.on i { opacity: 1; }
.chart { position: relative; width: 100%; min-height: 260px; }
.chart-svg { display: block; overflow: visible; }
.chart-svg .gl { stroke: var(--line); stroke-dasharray: 3 5; }
.chart-svg .ax { fill: var(--faint); font: 600 11.5px var(--body); }
.chart-svg .guide { stroke: var(--line-hi); stroke-width: 1.5; }
.chart-svg .dot { stroke: var(--bg); stroke-width: 3; }
.chart-svg .hit { cursor: crosshair; }
.chart-svg .line { animation: drawLine 1.1s cubic-bezier(.2, .8, .2, 1) both; stroke-dasharray: 4000; }
.chart-svg .area { animation: fade .9s ease-out both; }
@keyframes drawLine { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } }
.chart-tip { position: absolute; pointer-events: none; display: grid; gap: 4px; min-width: 190px; padding: 10px 12px; border-radius: 14px; background: var(--surface-solid);
  border: 1px solid var(--line-hi); box-shadow: var(--shadow); font-size: 12.5px; z-index: 2; }
.chart-tip b { font-size: 13px; margin-bottom: 2px; }
.chart-tip span { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.chart-tip span.on { color: var(--text); font-weight: 700; }
.chart-tip i { width: 8px; height: 8px; border-radius: 50%; }
.chart-tip em { margin-left: auto; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.trow { grid-template-columns: 96px minmax(0, 1fr) 140px auto; }
.trow-spark { display: grid; gap: 2px; justify-items: end; }
.spark { width: 120px; height: 34px; display: block; }
.trow-spark small { font-size: 11px; color: var(--faint); white-space: nowrap; }
.trow-actions { display: flex; gap: 8px; }
.bundle-rows { display: grid; gap: 10px; }
.bundle-rows .trow { grid-template-columns: 96px minmax(0, 1fr) auto; }
.pill.keys-pill { background: color-mix(in srgb, var(--hand) 14%, transparent); color: var(--info-hi); }
.notice.warn-keys { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.stats-head .sh-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sh-thumb { width: 110px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); flex-shrink: 0; }
.sh-thumb svg, .sh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-row > div:nth-child(2) { flex: 1; min-width: 220px; }
.sh-actions { display: flex; gap: 8px; }
.stats-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; margin: 18px 0 40px; }
.stats-grid .panel + .panel { margin-top: 0; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini-stats div { display: grid; }
.mini-stats b { font: 900 22px var(--display); }
.mini-stats small { color: var(--faint); font-size: 12px; }
.conv b { display: block; font: 900 40px/1 var(--display); background: linear-gradient(90deg, var(--aimade), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.conv small { color: var(--muted); }
.keys-mini { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hand) 10%, transparent); font-size: 13.5px; }
.keys-mini.out { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.keys-mini a { color: var(--accent); font-weight: 700; }
.sale-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.sale-row:first-of-type { border-top: 0; }
.key-meter { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.key-meter .meter { margin: 0; }
.steam-key { display: grid; gap: 6px; margin: 4px 0 14px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--hand) 16%, transparent), color-mix(in srgb, var(--ink) 40%, transparent));
  border: 1px solid color-mix(in srgb, var(--hand) 40%, transparent); }
.steam-key small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--info-hi); font-weight: 800; }
.sk-row { display: flex; gap: 8px; align-items: center; }
.steam-key code, .lib-key code { flex: 1; font: 700 15px ui-monospace, Consolas, monospace; letter-spacing: .06em; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--shade) 35%, transparent);
  color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steam-key a { color: var(--info-hi); font-weight: 700; font-size: 13px; }
.steam-key.pending b { font-family: var(--display); font-size: 17px; }
.steam-key.pending span { font-size: 13px; color: var(--muted); }
.includes-key { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--info-hi); }
.owner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lib-key { display: flex; gap: 6px; align-items: center; }
.lib-key code { font-size: 12px; padding: 6px 8px; }
.bundle-promo { display: grid; gap: 4px; border-color: color-mix(in srgb, var(--aimade) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--aimade) 10%, transparent), var(--surface)); transition: transform .2s, border-color .2s; }
.bundle-promo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--aimade) 70%, transparent); }
.bundle-promo .kicker { margin: 0; color: var(--aimade); }
.bundle-promo b { font-family: var(--display); font-size: 18px; }
.save-pill { display: inline-block; font: 900 12px var(--display); color: var(--good-ink); background: var(--good); border-radius: 7px; padding: 1px 7px; }
.bundle-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.bp { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: border-color .15s, background .15s; }
.bp input { display: none; }
.bp.on { border-color: var(--accent); background: var(--accent-soft); }
.bp-art { width: 52px; height: 39px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.bp-art svg, .bp-art img { width: 100%; height: 100%; object-fit: cover; }
.bp-main { display: grid; min-width: 0; }
.bp-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-main small { color: var(--faint); }
.bundle-sum { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 700; color: var(--muted); }
.bundle-sum .save { color: var(--good); }
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding-bottom: 30px; }
.bundle-card { display: grid; gap: 12px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px); transition: transform .2s, border-color .2s, box-shadow .2s; }
.bundle-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--aimade) 50%, transparent); box-shadow: 0 22px 50px -22px color-mix(in srgb, var(--aimade) 50%, transparent); }
.bundle-card .mosaic { aspect-ratio: 16 / 10; }
.bc-body { display: grid; gap: 4px; padding: 0 4px 4px; justify-items: start; }
.bc-body b { font-family: var(--display); font-size: 19px; }
.bc-body small { color: var(--faint); }
.bundle-pill { background: color-mix(in srgb, var(--aimade) 16%, transparent); color: var(--aimade); }
.bc-price { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.bc-price s { color: var(--faint); font-weight: 700; }
.bc-price em { font: 900 20px var(--display); font-style: normal; }
.bc-price i { font-style: normal; font: 900 12px var(--display); background: var(--good); color: var(--good-ink); padding: 2px 7px; border-radius: 7px; }
.bundle-top { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: stretch; margin-bottom: 30px; }
.bundle-top .coll-head { margin: 0; }
.bundle-buy { display: grid; gap: 10px; align-content: center; }
.bundle-buy .note { margin: 0; font-size: 13px; color: var(--muted); }
.bb-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bb-price s { color: var(--faint); font: 800 20px var(--display); }
.bb-price b { font: 900 44px/1 var(--display); letter-spacing: -.03em; }
@media (max-width: 1080px) { .kpis { grid-template-columns: 1fr 1fr; } .stats-grid, .bundle-top { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .trow { grid-template-columns: 70px minmax(0, 1fr); }
  .trow-spark { display: none; }
  .bundle-pick { grid-template-columns: 1fr; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- light theme: darker text for the new coloured pills and notes ---------- */
:root[data-theme="light"] .pill.k-asset { color: var(--info-lo); } :root[data-theme="light"] .pill.k-tool { color: var(--good-lo); }
:root[data-theme="light"] .pill.k-comic { color: var(--gold-ink); } :root[data-theme="light"] .pill.k-book { color: var(--assist-lo); }
:root[data-theme="light"] .pill.k-soundtrack { color: var(--heart-lo); } :root[data-theme="light"] .pill.k-mod { color: var(--accent-edge); }
:root[data-theme="light"] .pill.keys-pill, :root[data-theme="light"] .includes-key { color: var(--info-lo); }
:root[data-theme="light"] .pill.bundle-pill, :root[data-theme="light"] .bundle-promo .kicker { color: var(--gold-ink); }
:root[data-theme="light"] .sale-note { color: var(--bad-lo); }
:root[data-theme="light"] .steam-key small, :root[data-theme="light"] .steam-key a { color: var(--info-lo); }
:root[data-theme="light"] .card .badges .pill[class*="k-"], :root[data-theme="light"] .game-title a.pill[class*="k-"] { color: var(--white); }
:root[data-theme="light"] .jam-card .jc-meta .cd { filter: brightness(.7); }
@media (max-width: 860px) { .topbar.open .navmore-pop a { color: var(--muted); } .topbar.open .navmore-pop b { font-weight: 600; font-size: 15px; } .topbar.open .navmore-pop a:hover b { color: var(--text); } }
.kc-ico { display: inline-block; justify-self: start; transform-origin: 30% 70%; }
.key-meter { margin-bottom: 14px; }
.notice + .kpis, .notice + .notice { margin-top: 14px; }

/* ---------- mods: versions, install-first, tips, requires picker, mod tools directory ---------- */
.mods-free-note { font-size: 13px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mods-free-note a { color: var(--accent); font-weight: 700; }
.cat-head .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mod-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 26px; }
.mod-rules > div { display: grid; gap: 4px; align-content: start; }
.mod-rules b { font-family: var(--display); font-size: 16px; }
.mod-rules span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.mod-rules a { color: var(--accent); font-weight: 700; }
.big-price small { font: 700 13px var(--body); color: var(--muted); margin-left: 8px; text-transform: uppercase; letter-spacing: .08em; }
.pill.update-pill { background: color-mix(in srgb, var(--hand) 16%, transparent); color: var(--hand); font-weight: 800; }
.pill.ver-now { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tip-btn { margin-top: 10px; }
.older-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent); }
.versions { margin-top: 22px; scroll-margin-top: 90px; }
.ver { border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px; margin-top: 10px; background: var(--bg-2); }
.ver.current { border-color: color-mix(in srgb, var(--good) 45%, transparent); box-shadow: inset 3px 0 0 var(--good); }
.ver summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; cursor: pointer; list-style: none; }
.ver summary::-webkit-details-marker { display: none; }
.ver summary::after { content: "\25BE"; margin-left: auto; color: var(--faint); transition: transform .2s; }
.ver[open] summary::after { transform: rotate(180deg); }
.ver-tag { font: 900 18px var(--display); }
.ver-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.ver-log { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--text); border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.ver .dl { margin: 8px 0 10px; }
.requires { margin-top: 22px; }
.req-show { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: req; }
.req-show li, .req-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.req-show li { counter-increment: req; position: relative; padding-left: 42px; }
.req-show li::before { content: counter(req); position: absolute; left: 12px; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center;
  font: 800 11px var(--body); background: var(--accent); color: var(--accent-ink); }
.req-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--bg-2); flex-shrink: 0; }
.req-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.req-main b { font-size: 14.5px; }
.req-main small { color: var(--muted); font-size: 12.5px; }
.req-main a { color: inherit; }
.req-main small a { color: var(--accent); font-weight: 700; }
.req-note { color: var(--text); background: var(--accent-soft); padding: 1px 7px; border-radius: 99px; font-weight: 700; }
.mods-panel { margin-top: 26px; scroll-margin-top: 90px; }
.mods-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 14px; margin-top: 8px; }
.lib-update { display: grid; gap: 1px; margin-top: 6px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800;
  background: color-mix(in srgb, var(--hand) 14%, transparent); color: var(--hand); }
.lib-update span { font-weight: 600; color: var(--muted); }
/* tip prompt */
.tip-modal { display: grid; gap: 16px; }
.tip-head { display: flex; gap: 14px; align-items: flex-start; }
.tip-head h2 { margin: 0 0 4px; }
.tip-head p { margin: 0; }
.tip-ico { font-size: 30px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); flex-shrink: 0; }
.tip-amounts { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 8px; }
.tip-amt { height: 52px; border-radius: 14px; border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--text); font: 900 19px var(--display); cursor: pointer; transition: transform .15s; }
.tip-amt:hover { transform: translateY(-2px); }
.tip-amt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.tip-other { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-hi); border-radius: 14px; padding: 0 10px; background: var(--surface-2); font-weight: 800; color: var(--muted); }
.tip-other input { width: 100%; min-width: 0; border: 0; background: none; color: var(--text); font: 800 16px var(--body); outline: none; }
.tip-actions { display: grid; gap: 8px; }
.tip-actions .btn { width: 100%; justify-content: center; }
.tip-fine { margin: 0; font-size: 12.5px; text-align: center; }
/* editor: requires picker, game link, version fields */
.req-picker { display: grid; gap: 10px; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.req-item .req-note-in { width: 190px; height: 36px; font-size: 13px; }
.req-btns { display: flex; gap: 2px; }
.req-btns .btn { padding: 0 9px; }
.req-empty { padding: 12px; border: 1px dashed var(--line-hi); border-radius: 14px; font-size: 13.5px; }
.req-add { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.req-src { justify-self: start; flex-wrap: wrap; }
.req-results { display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.req-hit { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.req-hit:hover { border-color: var(--line-hi); background: var(--surface-2); }
.req-hit > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.req-hit small { color: var(--muted); font-size: 12px; }
.req-plus { font-weight: 800; font-size: 12.5px; color: var(--accent); }
.req-link { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; }
.req-link small { grid-column: 1 / -1; }
.mod-for-pick { position: relative; }
.mod-for-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); padding: 6px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line-hi); box-shadow: var(--shadow); }
.linked-chip { margin-top: 6px; }
.ver-fields { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 14px; }
.ver-fields small { display: block; color: var(--muted); font-size: 13px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vault-lock { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0; }
/* mod tools & loaders directory */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 18px; }
.tool-card { display: grid; gap: 10px; align-content: start; margin: 0 !important; transition: transform .2s, border-color .2s; }
.tool-card:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.tool-card p { margin: 0; font-size: 14px; line-height: 1.5; }
.tool-top { display: flex; gap: 12px; align-items: center; color: inherit; }
.tool-top b { display: block; font: 900 19px var(--display); }
.tool-top small { color: var(--muted); font-size: 13px; font-weight: 600; }
.tool-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); flex-shrink: 0; }
.tool-ico.big { width: 72px; height: 72px; font-size: 36px; border-radius: 20px; }
.tool-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tool-uses { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); }
.tool-game { flex: 1; max-width: 300px; }
.tool-hero { display: flex; gap: 16px; align-items: center; }
.tool-hero h1 { margin: 0; }
.tool-hero p { margin: 4px 0 0; }
.tool-detail { max-width: 760px; }
.tool-admin { display: grid; gap: 8px; }
.ta-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.ta-row > div:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ta-row.waiting { box-shadow: inset 3px 0 0 var(--aimade); }
.ta-row a { color: var(--accent); }
.ta-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .mod-rules { grid-template-columns: 1fr 1fr; }
  .row3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mod-rules { grid-template-columns: 1fr; }
  .tip-amounts { grid-template-columns: repeat(3, 1fr); }
  .tip-other { grid-column: 1 / -1; height: 48px; }
  .req-item { flex-wrap: wrap; }
  .req-item .req-note-in { width: 100%; order: 3; }
  .req-link { grid-template-columns: 1fr; }
  .ta-row { flex-wrap: wrap; }
}
.ver-fields .row2 { align-items: start; }

/* ==========================================================================
   Polish pass: line icons instead of emoji, platform marks on cards, focus rings, phone tap targets,
   buy box first on phones. Colours only through the tokens at the top of site.css.
   ========================================================================== */
/* Line icons (js/icons.js) follow the text colour. */
.ic { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -.2em; }
.btn .ic { width: 18px; height: 18px; vertical-align: 0; }
.btn.small .ic { width: 15px; height: 15px; }
.pill .ic { width: 13px; height: 13px; vertical-align: 0; }
.ldot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.stars { display: inline-flex; align-items: center; gap: 1px; }
.stars .ic { width: 13px; height: 13px; vertical-align: 0; }
.stars .ic.off { color: var(--faint); opacity: .7; }
.rate button { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
.rate button .ic { width: 24px; height: 24px; }
.vote-row .rate button .ic { width: 28px; height: 28px; }
.ctile .ico { color: var(--accent); }
.ctile .ico .ic { width: 30px; height: 30px; display: block; }
.navmore-pop i .ic { width: 19px; height: 19px; }
.topbar.open .navmore-pop i .ic { width: 16px; height: 16px; }
.kc-ico .ic { width: 24px; height: 24px; display: block; }
.req-ico .ic { width: 18px; height: 18px; }
.tip-ico .ic { width: 28px; height: 28px; color: var(--accent); }
.n-ico .ic { width: 18px; height: 18px; }
.dv-go .ic, .see-all .ic, .shelf-head a .ic { width: 16px; height: 16px; vertical-align: -3px; }
.crumb .ic { width: 15px; height: 15px; vertical-align: -2px; }
.kind-links .tag .ic, .profile-links .tag .ic { width: 15px; height: 15px; vertical-align: -3px; }
.delta .ic { width: 12px; height: 12px; vertical-align: -1px; }
.chip .ic { width: 13px; height: 13px; }
.made-card i .ic { width: 34px; height: 34px; padding: 7px; }
.feature .row .pfs { color: var(--on-art); --icon-hole: var(--ink); gap: 9px; margin-left: 4px; }
.feature .row .pfs .pf { width: 18px; height: 18px; }

/* Cards: maker + genre, struck old price on sales, platform marks on every listing. */
.card .by { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.card .by a { overflow: hidden; text-overflow: ellipsis; }
.card .by a:hover { color: var(--text); }
.card .by .genre { color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.card .by .genre::before { content: '·'; margin-right: 6px; }
.card .badges { flex-wrap: wrap; right: 54px; }
.card .badges .pill.off { background: var(--bad); color: var(--white); }
.card .play-chip .ic { width: 12px; height: 12px; }
.price.sale s { margin-right: 1px; }
.pfs { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); --icon-hole: var(--bg); }
.pfs .pf { width: 15px; height: 15px; display: block; }
.pfs [role="listitem"] { display: inline-flex; }
.card .by .pfs { margin-left: auto; padding-left: 6px; flex-shrink: 0; }
.card .meta { align-items: center; }
.card .by { margin-top: -4px; }
.plat-dd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-dd .pfs { color: var(--muted); }

/* Rooms pitch, compact: shown when the live game is already the home hero. */
.rooms-strip { display: flex; align-items: center; gap: 18px; padding: 18px 22px; flex-wrap: wrap; }
.rooms-strip .rs-ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, transparent); }
.rooms-strip .rs-ico .ic { width: 26px; height: 26px; }
.rs-copy { flex: 1; min-width: 240px; }
.rs-copy b { display: block; font: 900 20px var(--display); }
.rs-copy span { color: var(--muted); font-size: 14.5px; }
.rooms-strip code { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }

/* /devlogs feed */
.devlog-feed { display: grid; gap: 14px; max-width: 900px; padding-bottom: 20px; }
.feed-row { display: flex; gap: 18px; align-items: center; padding: 14px; transition: transform .15s, border-color .15s; }
.feed-row:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.feed-row .thumb { width: 150px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.feed-row .thumb svg, .feed-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.fr-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fr-main .kicker { margin: 0; }
.fr-main b { font: 900 19px/1.25 var(--display); }
.fr-main small { color: var(--muted); font-size: 14px; }
.feed-row:hover .dv-go { color: var(--accent); transform: translateX(3px); }

/* Keyboard focus: one clear ring everywhere (mouse clicks don't show it). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }

/* Game page: on phones and tablets the buy box comes right after the title and media. */
@media (max-width: 1080px) {
  .game-top { display: flex; flex-direction: column; gap: 18px; }
  .game-main, .game-top > aside, .game-top .buybox { display: contents; }
  .game-main > *, .game-top .buybox > * { order: 3; margin-top: 0 !important; margin-bottom: 0 !important; }
  .game-main > .game-title, .game-main > .notice, .game-main > .shot { order: 1; }
  .game-top .buybox > .buy-panel { order: 2; }
  .game-main > .comments-panel { order: 5; }
  .game-top .buybox > :not(.buy-panel) { order: 4; }
}

/* Phones: 44px tap targets. */
@media (max-width: 860px) {
  .btn, .btn.small, .menu-btn, .opt, .chip, .seg a, .seg button, .tabs button, .settings-nav a, .profile-tabs a { min-height: 44px; }
  .tag { display: inline-flex; align-items: center; min-height: 40px; }
  .footer a, .footer .linkish { padding: 8px 0; margin: 0; }
  .card .wish { width: 40px; height: 40px; }
  .rooms-strip code { word-break: break-all; }
}
@media (max-width: 600px) {
  .feed-row { align-items: flex-start; gap: 12px; } .feed-row .thumb { width: 84px; } .feed-row .dv-go { display: none; } .fr-main b { font-size: 16px; }
}