/* ============================================
   FoxyNoTail.com - "Nocturne" theme (near-black + gold, quiet serif headings)
   Loaded after main.css on every page. Owner picked concept 2 on 2026-10-07.
   The old Bedrock Glow theme is kept as css/theme.css + css/theme-glow.css for rollback.
   ============================================ */
/* Press Start 2P (SIL Open Font License), self-hosted latin subset: no Google Fonts request */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/press-start-2p-latin.woff2') format('woff2');
}

:root {
    --bg: #0d0e11;
    --surface: #15171c;
    --surface-2: #1b1e25;
    --surface-3: #22252e;
    --border: rgba(255,255,255,.09);
    --text: #ece9e2;
    --text-muted: #9b978c;
    --text-dim: #6d6a61;
    --accent: #d9b36a;
    --accent-hover: #e5c27c;
    --accent-dim: rgba(217,179,106,.15);
    --purple: #d9b36a;
    --purple-dim: rgba(217,179,106,.18);
    --blue: #ece9e2;          /* links read as text; gold is reserved for accents (concept 2) */
    --radius: 14px;
    --radius-sm: 8px;
    --shadow-deep: 0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.45);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --pixel-font: var(--serif);
}

/* Page background: quiet near-black (concept 2) */
body { background-color: var(--bg); }

/* Headings: quiet serif (page titles + section titles) */
h1, .page-section > h2, .layout-main > h2 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}
h1 { font-size: 1.9rem; }
.page-section > h2, .layout-main > h2 { font-size: 1.4rem; }
@media (max-width: 600px) { h1 { font-size: 1.4rem; } .page-section > h2 { font-size: 1rem; } }

/* Panels: flat surface, hairline outline (concept 2) */
.page-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.page-section > h1, .page-section > h2 { border-bottom: none; }

/* Buttons: pills (concept 2) */
.btn { border-radius: 999px; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #171308; border: 1px solid var(--accent); }
.btn-primary:hover { background: #e5c27c; color: #171308; }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover { border-color: rgba(255,255,255,.25); color: var(--text); }

/* Cards: outline brightens on hover, no lift (concept 2) */
.dl-card, .mkt-card, .video-card, .latest-video {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dl-card:hover, .mkt-card:hover, .video-card:hover { border-color: rgba(217,179,106,.45); }
.dl-card img, .mkt-card img { background: var(--surface); }

/* Sidebar: latest video card (concept 2) */
.latest-video h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .6rem; }
.latest-video img { border-radius: 10px; border: 1px solid var(--border); aspect-ratio: 16/9; object-fit: cover; width: 100%; margin-bottom: .6rem; }
.latest-video .title { display: block; font-size: .9rem; color: var(--text); margin-bottom: .75rem; }
.latest-video .title:hover { color: var(--accent); }

/* Badges + filter tabs */
.badge { border-radius: 999px; }
.badge-blue, .badge-accent { background: var(--purple-dim); color: var(--accent); border: 1px solid rgba(217,179,106,.35); }
.filter-tab { border-radius: 999px !important; }
.filter-tab.active { background: var(--accent) !important; color: #171308 !important; }

/* Nav (concept 2): serif brand with gold ring, muted links, gold underline active, gold support, pill search */
.site-nav { background: rgba(13,14,17,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-brand { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; }
.nav-brand:hover { color: var(--text); }
.nav-brand img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(217,179,106,.35); }
.nav-toggle { color: var(--text); }
.nav-links a { color: var(--text-muted); border-radius: 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { background: none; color: var(--text); border-bottom-color: transparent; }
.nav-links a.active { color: var(--accent); background: none; border-bottom-color: var(--accent); font-weight: 600; }
.nav-search input { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); }
.nav-search input::placeholder { color: var(--text-dim); }
.nav-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,179,106,.15); }
@media (max-width: 768px) {
    .nav-links { border-radius: var(--radius); }
    .nav-links a { border-bottom: none; padding: .75rem 1rem; }
}

/* Ads: quiet boxes on the surface (concept 2) */
.ad-placeholder { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); color: #7a766b; }

/* Tables */
.info-table th, .versions-table th { color: var(--text-muted); }
.versions-table tr.is-latest td { background: rgba(217,179,106,.07); }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); }

/* Search rows wrap on phones */
@media (max-width: 600px) { .search-bar { flex-wrap: wrap; } .search-bar input, .search-bar input[type="text"] { flex: 1 1 100%; min-width: 0; } .search-bar select, .search-bar .btn { flex: 1 1 auto; } }

/* Promo boxes */
.promo{display:grid;grid-template-columns:48px 1fr;gap:.25rem 1rem;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin:1.25rem 0}
.promo img{width:48px;height:48px;grid-row:span 3;border-radius:10px}
.promo strong{display:block;color:var(--text);font-size:.95rem}
.promo p{margin:0;color:var(--text-muted);font-size:.85rem}
.promo .btn{justify-self:start;margin-top:.5rem}
.promo .btn-primary{background:transparent;color:var(--text);border:1px solid var(--border)}
.promo .btn-primary:hover{background:var(--surface-3);border-color:rgba(255,255,255,.25)}
.promo-note{grid-column:2;font-size:.72rem;color:var(--text-muted);font-style:italic;margin-top:.4rem}
.layout-aside .promo{margin:0}

/* Support page: tier cards */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.tier-card{background:var(--surface-2);border:1px solid var(--border);border-top:1px solid rgba(217,179,106,.5);border-radius:var(--radius);padding:1rem}
.tier{display:flex;justify-content:space-between;align-items:center;padding:.45rem .6rem;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
.tier:hover{background:var(--purple-dim)}

/* Sponsors page: stats grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1rem 0}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}
.stat strong{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--accent);margin-bottom:.35rem}
.stat span{color:var(--text-muted);font-size:.85rem}

/* Mods page: square thumbnail */
.mod-card img{object-fit:cover;padding:0}

/* Support: Patreon card spans the full row */
.tier-grid > .tier-card:first-child { grid-column: 1 / -1; }
.tier-grid > .tier-card:first-child .tier { white-space: nowrap; }
.tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .tier-grid { grid-template-columns: 1fr; } }

/* Footer columns */
.site-footer { padding: 2rem 0 1.25rem; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.footer-col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; font-weight: 700; }
.footer-col a { display: block; color: var(--text-muted); font-size: .9rem; padding: .2rem 0; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1rem; }
@media (max-width: 700px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nav: Support stands out (gold text, concept 2) */
.nav-links a[href$="/support"] { color: var(--accent); font-weight: 600; border-bottom-color: transparent; }
.nav-links a[href$="/support"]:hover, .nav-links a[href$="/support"].active { color: #e5c27c; border-bottom-color: transparent; background: none; }

/* Home: support band extra links */
.site-footer .container { display: block; }
.nav-links a { white-space: nowrap; }

/* Click-to-play YouTube embeds */
.yt-lite{cursor:pointer;background:#000}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-lite .yt-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.yt-lite .yt-play::before{content:"";position:absolute;left:28px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #191307}
.yt-lite:hover .yt-play{background:var(--accent-hover)}
.yt-lite-on iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Skin Packs page */
.skin-hero{background:linear-gradient(135deg,rgba(217,179,106,.25),rgba(217,179,106,.12)),var(--surface)}
.skin-hero .hero-stats{display:flex;gap:1.5rem;margin:1rem 0;font-family:var(--pixel-font);color:var(--accent);font-size:.8rem}
.platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@container (max-width:700px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.platform-grid a{display:block;padding:1rem;background:var(--surface-2);border:1px solid var(--border);border-top:1px solid rgba(217,179,106,.5);border-radius:var(--radius);color:var(--text);font-weight:700}
.platform-grid a span{display:block;font-weight:400;font-size:.8rem;color:var(--text-muted)}
.platform-grid a:hover{border-color:var(--accent);transform:translateY(-2px)}
.skin-cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@container (max-width:700px){.skin-cta{grid-template-columns:1fr}}
.skin-cta a{display:block;padding:1rem;background:var(--surface-2);border:1px solid rgba(217,179,106,.35);border-radius:var(--radius);color:var(--text)}
.skin-cta a strong{display:block;color:var(--accent);margin-bottom:.35rem}
.guide-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.guide-list a{display:block;padding:.6rem .8rem;background:var(--surface-2);border-left:3px solid rgba(217,179,106,.5);border-radius:var(--radius)}

/* ── Skin Pack Creator ── */
#spc-import{margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
#spc-import small{color:var(--text-dim)}
.spc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.25rem}
@container (max-width:800px){.spc{grid-template-columns:1fr}}
.spc-drop{border:2px dashed rgba(217,179,106,.5);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;background:rgba(217,179,106,.06)}
.spc-drop.is-over{border-color:var(--accent);background:var(--accent-dim)}
.spc-skins{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}
.spc-skins li{display:grid;grid-template-columns:64px 1fr 110px auto;gap:.6rem;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem}
.spc-skins img{width:64px;height:64px;image-rendering:pixelated;background:#121317}
.spc-skins input,.spc-skins select,.spc-pack input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.4rem .5rem;width:100%}
.spc-pack{display:grid;gap:.6rem;margin-bottom:1rem}
.spc-version{display:flex;gap:.4rem}
.spc-version input{width:4.5rem}
.spc-uuid{font-size:.7rem;color:var(--text-dim);word-break:break-all}
.spc-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.spc-preview{display:flex;flex-direction:column;align-items:center;padding:.75rem;position:sticky;top:calc(var(--nav-height, 60px) + 1rem);align-self:start;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);min-height:360px}
#spc-canvas{max-width:100%;cursor:grab}
.spc-preview-name{margin:.5rem 0 .25rem;font-weight:700;text-align:center}
.spc-preview-ctrl{display:flex;gap:1rem;font-size:.85rem;color:var(--text-muted)}
.spc-preview-ctrl label{display:flex;align-items:center;gap:.3rem;cursor:pointer}
.spc-skins li{cursor:pointer}
.spc-skins li.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media(max-width:800px){.spc-preview{position:static}}
.spc-btns{display:flex;gap:.25rem}
.spc-btns button{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.25rem .4rem;cursor:pointer;font-size:.85rem}
.spc-btns button:hover{background:var(--purple-dim)}
.spc-btns button:disabled{opacity:.35;cursor:default}
.spc-empty{color:var(--text-dim);font-style:italic}
@media(max-width:600px){.spc-skins li{grid-template-columns:48px 1fr}.spc-skins li .spc-btns{grid-column:1/-1}}

/* Skin Pack Creator download page */
#spd-missing{display:none}
#spd-missing.show{display:block}

.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none;  }

/* ── Guide pages ── */
.quick-answer{background:linear-gradient(135deg,rgba(217,179,106,.14),rgba(217,179,106,.14));border:1px solid rgba(217,179,106,.45);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1rem 1.1rem;margin:1rem 0 1.25rem}
.quick-answer-q{font-family:inherit;font-size:1rem;;margin:0 0 .4rem;color:var(--accent)}
.quick-answer-a p{margin:0}
.guide-crumbs{font-size:.8rem;color:var(--text-dim);margin-bottom:.5rem}
.guide-crumbs a{color:var(--text-muted)}
.guide time{font-size:.8rem;color:var(--text-dim)}
.author-box{display:flex;gap:.75rem;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid rgba(217,179,106,.5);border-radius:var(--radius);padding:.75rem 1rem;margin:1rem 0;font-size:.9rem}
.author-box img{width:48px;height:48px;border-radius:50%}
.guide-toc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin:1rem 0}
.guide-toc ol{margin:.25rem 0 0 1.2rem}
.guide section{margin:1.75rem 0}
.guide section h2{font-family:var(--pixel-font);font-size:.95rem;line-height:1.5;scroll-margin-top:calc(var(--nav-height) + 1rem)}
.guide ol li,.guide ul li{margin:.35rem 0}
.guide-shot{margin:1rem 0}
.guide-shot img{border-radius:var(--radius);border:1px solid var(--border)}
.guide-shot figcaption{font-size:.8rem;color:var(--text-dim);margin-top:.35rem}
.guide-shot-missing div{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:2px dashed rgba(217,179,106,.5);border-radius:var(--radius);color:var(--accent);font-size:.85rem;background:rgba(217,179,106,.05)}
.guide-sources{font-size:.85rem;color:var(--text-muted)}
.guide-checked{color:var(--accent);font-size:.8rem}
.guide .note{background:rgba(217,179,106,.12);border-left:3px solid rgba(217,179,106,.5);padding:.6rem .9rem;border-radius:var(--radius)}
.guide .warn{background:rgba(217,179,106,.10);border-left:3px solid rgba(217,179,106,.5);padding:.6rem .9rem;border-radius:var(--radius)}

/* Guides: long paths/code wrap instead of overflowing */
.guide code { overflow-wrap: anywhere; word-break: break-word; }
.guide pre { overflow-x: auto; max-width: 100%; white-space: pre; }
.guide pre code { overflow-wrap: normal; word-break: normal; }
.guide table { display: block; overflow-x: auto; max-width: 100%; }
.layout-main, .guide { min-width: 0; }

/* ── Skin Pack Creator promo ── */
.promo-creator{background:linear-gradient(135deg,rgba(217,179,106,.20),rgba(217,179,106,.10));border:1px solid rgba(217,179,106,.45);box-shadow:0 10px 30px rgba(217,179,106,.15)}
.promo-star{grid-row:span 3;font-size:2.4rem;line-height:1;color:var(--accent);}
.promo-creator strong{font-family:var(--pixel-font);font-size:.8rem;line-height:1.6;}

/* Nav: tighter padding to fit 9 items */
.nav-links a{padding:.4rem .6rem}

/* ── Mob Griefing maker ── */
.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem;margin:1rem 0}
.mg-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem}
.mg-card h3{font-size:.85rem;margin:0 0 .4rem;color:var(--accent)}
.mg-option{display:block;padding:.35rem 0;cursor:pointer}
.mg-option small{display:block;color:var(--text-dim);margin-left:1.6rem}
.mg-option input{margin-right:.5rem;accent-color:var(--accent)}
.mg-version{display:inline-block;background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent);border-radius:var(--radius);padding:.2rem .6rem;font-size:.8rem}
.mg-toolbar{display:flex;gap:.5rem}

/* ── Home: creator feature band ── */

/* Home tiles: 7 columns on wide screens */
.free-skins{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
.free-skins img{display:inline-block;flex:0 0 auto}

/* Code blocks: darker panel so code stands out (owner request) */
.guide pre, .page-section pre { background: #101116; border: 1px solid rgba(217,179,106,.35); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .9rem 1rem; margin: 1rem 0; line-height: 1.5; }
.guide pre code, .page-section pre code { background: none; padding: 0; font-size: .85rem; color: #ece9e2; }
.guide :not(pre) > code, .page-section :not(pre) > code { background: #101116; border: 1px solid rgba(217,179,106,.25); border-radius: 3px; padding: .05rem .35rem; font-size: .88em; color: #e6c47f; }

/* ── Sidebar fill (marketplace mini-cards + ads) ── */
.aside-fill{display:flex;flex-direction:column;gap:1.25rem}
.aside-fill-title{font-family:var(--pixel-font);font-size:.7rem;color:var(--accent);}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mini-card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text);font-size:.75rem;transition:border-color .15s,transform .15s}
.mini-card:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.mini-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#121317}
.mini-name{padding:.35rem .45rem 0;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-price{padding:.15rem .45rem .45rem;color:var(--accent);font-weight:700}
#aside-fill-items{display:none}

/* Pack matches (skin search page) */
.pack-matches{margin-bottom:1.25rem}
.pack-matches h2{font-size:.9rem}

/* ── Skin Detail ── */
.skin-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:start}
@container (max-width:700px){.skin-detail{grid-template-columns:1fr}}
.skin-detail-img{width:100%;height:auto;border-radius:var(--radius);background:radial-gradient(circle at 50% 35%,#1b1e25,#121317);padding:1rem}
.skin-detail h1{margin:.3rem 0}
.skin-hero-search input{font-size:1rem;padding:.75rem 1rem}
.skin-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem}
.skin-chip{display:inline-block;background:var(--surface-3);border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;font-size:.8rem;color:var(--text);text-decoration:none}
.skin-chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── Skin Search ── */
.skin-search{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.25rem;align-items:start}
@container (max-width:760px){.skin-search{grid-template-columns:1fr}.skin-filters{display:none}}
.skin-filters-mobile{display:none}
@container (max-width:760px){.skin-filters-mobile{display:block;margin-bottom:1rem}}
.skin-filters h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:1rem 0 .4rem}
.skin-filters a,.skin-filters-mobile a{display:flex;justify-content:space-between;padding:.25rem .5rem;border-radius:var(--radius);color:var(--text-muted);font-size:.85rem}
.skin-filters a.active,.skin-filters-mobile a.active{background:var(--accent-dim);color:var(--accent);font-weight:700}
.skin-filters a span,.skin-filters-mobile a span{color:var(--text-dim)}
.skin-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0}
.skin-chips a{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;font-size:.8rem;color:var(--text)}
.skin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@container (min-width:520px){.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:900px){.skin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.skin-grid > .ad-label,.skin-grid > .ad-container{grid-column:1/-1}
.skin-card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text);transition:transform .15s,border-color .15s}
.skin-card:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--text)}
.skin-card img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:radial-gradient(circle at 50% 35%,#22252e,#121317)}
.skin-name{padding:.45rem .6rem 0;font-weight:700;font-size:.9rem}
.skin-pack{padding:0 .6rem;font-size:.75rem;color:var(--accent)}
.skin-tags{padding:.15rem .6rem .55rem;font-size:.7rem;color:var(--text-dim)}
.skin-title{color:var(--text-muted);margin:.1rem 0 .6rem;font-weight:600}
.skin-title-sm{padding:0 .6rem .55rem;font-size:.72rem;color:var(--text-dim);line-height:1.3}
.skin-views{display:flex;gap:.4rem;margin-top:.6rem}
.skin-views button{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.25rem .7rem;cursor:pointer;font-size:.8rem}
.skin-views button.active{border-color:var(--accent);color:var(--accent)}
.skin-img{position:relative;display:block}
.skin-card .skin-img img.front{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:radial-gradient(circle at 50% 35%,#22252e,#121317)}
.skin-card .skin-img img.back{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:radial-gradient(circle at 50% 35%,#22252e,#121317);opacity:0;transition:opacity .2s}
.skin-card:hover .skin-img img.front{opacity:0}
.skin-card:hover .skin-img img.back{opacity:1}

/* Skin search box (sidebar + inline on skin pages for tablets/phones) */
.skin-search-box { background: var(--surface-2); border: 1px solid rgba(217,179,106,.35); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: .85rem; }
.skin-search-box strong { display: block; font-family: var(--serif); font-size: .7rem; color: var(--accent); margin-bottom: .6rem; }
.skin-search-box .search-bar { margin: 0; }
.skin-search-box .search-bar input { min-width: 0; }
.skin-search-quick { margin: .55rem 0 0; font-size: .8rem; color: var(--text-dim); }
.skin-search-inline { display: none; margin-bottom: 1rem; }
@media (max-width: 1000px) { .skin-search-inline { display: block; } }

/* ── Pull quote (article blockquote) ── */
.pullquote{margin:1.5rem 0;padding:1.1rem 1.4rem;border-left:4px solid var(--accent);background:rgba(217,179,106,.08);border-radius:var(--radius);font-size:1.15rem;font-style:italic}
.pullquote cite{display:block;margin-top:.5rem;font-size:.85rem;font-style:normal;color:var(--accent)}

/* Download page screenshot gallery (admin-managed) */
.dl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem}
.dl-gallery a{display:block;border-radius:var(--radius,10px);overflow:hidden;border:1px solid var(--border,#2e2e38)}
.dl-gallery img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .2s}
.dl-gallery a:hover img{transform:scale(1.03)}

/* Extra pack details */
.dl-short{font-size:1.05rem;margin:.4rem 0 .2rem}
.dl-features li,.dl-steps li{margin:.3rem 0}
.dl-gallery figure{margin:0}
.dl-gallery figcaption{font-size:.85rem;color:var(--text-muted);padding:.4rem .2rem}
.tag{display:inline-block;font-size:.75rem;padding:.15rem .55rem;border:1px solid var(--border);border-radius:999px;margin:.2rem .3rem 0 0;color:var(--text-muted)}

.dl-about p{margin:0 0 .8rem}

/* Site-wide announcement bar (admin: Site settings) */
.site-announce{background:linear-gradient(90deg,rgba(217,179,106,.14),rgba(217,179,106,.05) 40%,rgba(217,179,106,.14));color:var(--text);text-align:center;padding:.55rem 1rem;font-size:.85rem;border-bottom:1px solid var(--border)}
.site-announce a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.site-announce a:hover{color:#e5c27c}