/**
 * "Choose Your Experience" design gallery (Get Started) page styles.
 * Faithful port of dylan-draft.com /designs.html. All rules are scoped under
 * .design-gallery so they cannot collide with the global theme. This page is a
 * standalone, dark, immersive experience (minimal logo header, no site nav).
 */

/* Standalone immersive page: dark body, no white flash around the wrapper. */
body.design-gallery-page {
    margin: 0;
    background: #080c14;
}

.design-gallery {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #080c14;
    color: #fff;
    min-height: 100vh;
}

.design-gallery *,
.design-gallery *::before,
.design-gallery *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.design-gallery .dg-header {
    padding: 24px 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.design-gallery .dg-header img {
    height: 30px;
    width: auto;
}

.design-gallery .hero {
    text-align: center;
    padding: 56px 24px 36px;
}

.design-gallery .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #307FE2;
    margin-bottom: 12px;
}

.design-gallery .hero h1 {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.design-gallery .hero p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    max-width: 400px;
    margin: 0 auto 36px;
}

.design-gallery .batch-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    max-width: 1280px;
    margin: 0 auto 14px;
    padding: 0 24px;
}

.design-gallery .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto 36px;
    padding: 0 24px;
}

@media (max-width: 560px) {
    .design-gallery .grid {
        grid-template-columns: 1fr;
    }
}

.design-gallery .card {
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #0e141f;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.design-gallery .card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.16);
}

.design-gallery .thumb {
    height: 120px;
    position: relative;
    overflow: hidden;
}

.design-gallery .thumb-n {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.04em;
    opacity: 0.1;
    color: #fff;
}

.design-gallery .body {
    padding: 18px;
}

.design-gallery .num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.3;
    margin-bottom: 5px;
}

.design-gallery .title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.design-gallery .desc {
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
}

.design-gallery .tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

.design-gallery .tag.live {
    border-color: rgba(48, 127, 226, 0.4);
    color: #307FE2;
}

/* Thumbs — Batch 1–3 */
.design-gallery .t01 .thumb { background: linear-gradient(135deg, #0a1628, #1a3a5c, #307FE2); }
.design-gallery .t02 .thumb { background: linear-gradient(135deg, #000, #111, #0071e3); }
.design-gallery .t03 .thumb { background: linear-gradient(135deg, #232f3e, #37475a, #FF9900); }
.design-gallery .t04 .thumb { background: linear-gradient(135deg, #0D1520, #1A2535, #C9A84C); }
.design-gallery .t05 .thumb { background: linear-gradient(135deg, #001830, #003d6b, #007CC3); }
.design-gallery .t06 .thumb { background: linear-gradient(135deg, #0B1F3A, #1a3a5c, #E8622A); }
.design-gallery .t07 .thumb { background: linear-gradient(135deg, #020810, #050f1e, #00d4ff); }
.design-gallery .t08 .thumb { background: linear-gradient(135deg, #1a1a18, #e5e5e0, #3d7a5a); }
.design-gallery .t09 .thumb { background: linear-gradient(135deg, #0e0e0e, #1c1c1c, #c9a84c); }
.design-gallery .t10 .thumb { background: linear-gradient(135deg, #f0f0f0, #fff, #e63022); }
.design-gallery .t11 .thumb { background: linear-gradient(135deg, #f4efe4, #c41e1e, #1a3a6b); }
.design-gallery .t12 .thumb { background: linear-gradient(135deg, #0c0c0f, #2563eb, #7c3aed); }
.design-gallery .t13 .thumb { background: linear-gradient(135deg, #3d0c1f, #6b1428, #c9a84c); }
.design-gallery .t14 .thumb { background: linear-gradient(135deg, #2d1b69, #0891b2, #10b981, #f59e0b); }
.design-gallery .t15 .thumb { background: linear-gradient(135deg, #000, #e63022, #fff); }

/* New ranked thumbs */
.design-gallery .tv1 .thumb  { background: linear-gradient(135deg, #0a0f1e, #0d1e3d, #307FE2); }
.design-gallery .tv2 .thumb  { background: linear-gradient(135deg, #f8fafc, #dce8f7, #307FE2); }
.design-gallery .tv3 .thumb  { background: linear-gradient(135deg, #16213e, #1e2d4a, #E63022); }
.design-gallery .tv4 .thumb  { background: linear-gradient(135deg, #1c2333, #253045, #e8943a); }
.design-gallery .tv5 .thumb  { background: linear-gradient(135deg, #0d0d12, #1a1a22, #c9a84c); }
.design-gallery .tv6 .thumb  { background: linear-gradient(135deg, #e8f0f8, #f0f4f8, #307FE2); }
.design-gallery .tv7 .thumb  { background: linear-gradient(135deg, #0a1628, #0d2040, #00c4e8); }
.design-gallery .tv8 .thumb  { background: linear-gradient(135deg, #090e1f, #101830, #9ab8e8); }
.design-gallery .tv9 .thumb  { background: linear-gradient(135deg, #141820, #1c2230, #2aff8f); }
.design-gallery .tv10 .thumb { background: linear-gradient(135deg, #ffffff, #f0f4f8, #307FE2); }
.design-gallery .tv11 .thumb { background: linear-gradient(135deg, #1e2a3a, #253448, #307FE2); }
.design-gallery .tv12 .thumb { background: linear-gradient(135deg, #0f0d0a, #1e1810, #c4733e); }

.design-gallery .tag.ranked {
    border-color: rgba(48, 127, 226, 0.5);
    color: #307FE2;
    background: rgba(48, 127, 226, 0.08);
}

/* Refined variant thumbs */
.design-gallery .td1 .thumb { background: linear-gradient(135deg, #060a10, #0d1117, #161b22); }
.design-gallery .td2 .thumb { background: linear-gradient(135deg, #f7f9fc, #ffffff, #307FE2); }
.design-gallery .td3 .thumb { background: linear-gradient(135deg, #071538, #040d24, #307FE2); }
.design-gallery .td4 .thumb { background: linear-gradient(135deg, #f2ede4, #faf8f4, #c4733e); }
.design-gallery .td5 .thumb { background: linear-gradient(135deg, #080d14, #0f1623, #4d94ff); }
.design-gallery .td6 .thumb { background: linear-gradient(135deg, #f9fafb, #ffffff, #307FE2); }
.design-gallery .td7 .thumb { background: linear-gradient(135deg, #1a0505, #fff5f5, #EB262A); }

.design-gallery .tag.refined {
    border-color: rgba(235, 38, 42, 0.4);
    color: #EB262A;
    background: rgba(235, 38, 42, 0.06);
}

/* Judge Edit thumb */
.design-gallery .tj .thumb { background: linear-gradient(135deg, #020810, #071538, #0d2d7a, #307FE2); }

.design-gallery .divider {
    max-width: 1280px;
    margin: 0 auto 28px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}