/* V2/Assets/Css/SupercellStore.css */
/* ====================================================
   Supercell Store Design System
   - Polices via Fonts.css (Lilita One + Outfit)
   - Patterns : losanges matelassés (quilted diamonds)
   ==================================================== */

:root {
    --sc-orange: #ff8c00;
    --sc-yellow: #fbbf24;
    --sc-blue-deep: #0b1121;
    --sc-blue-light: #1d4ed8;
    --sc-slate: #1f2937;
    --sc-gold-gradient: linear-gradient(to bottom, #fee082, #fbbf24, #d97706);
    --sc-blue-gradient: linear-gradient(to bottom, #1d4ed8, #1e40af, #0f172a);
}

/* ============================================
   PATTERN: Quilted Diamonds (Losanges Matelassés)
   Reproduit le motif hexagonal/diamant du Supercell Store
   avec des coins arrondis et un effet 3D subtil.
   ============================================ */
.sc-diamond-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect x='15' y='15' width='30' height='30' rx='6' ry='6' transform='rotate(45 30 30)' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* Variante plus dense et visible (pour les cartes, headers) */
.sc-diamond-grid-dense {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='10' y='10' width='28' height='28' rx='5' ry='5' transform='rotate(45 24 24)' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 32px 32px;
}

/* Variante colorée (fond violet-bleu comme le screenshot) */
.sc-diamond-grid-purple {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect x='12' y='12' width='32' height='32' rx='6' ry='6' transform='rotate(45 28 28)' fill='rgba(255,255,255,0.05)' stroke='rgba(255,255,255,0.12)' stroke-width='1.2'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #3b5cc6 0%, #6b4cba 40%, #8b5ec5 70%, #5b44b0 100%);
    background-size: 36px 36px, 100% 100%;
}

/* Quilted Texture pour les fonds de section */
.sc-quilted-bg {
    background-color: var(--sc-slate);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect x='15' y='15' width='30' height='30' rx='6' ry='6' transform='rotate(45 30 30)' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    position: relative;
}

.sc-quilted-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* ============================================
   CARDS
   ============================================ */
.sc-card {
    background: #273142;
    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================
   BUTTONS
   ============================================ */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sc-blue-light);
    color: #fff;
    font-family: var(--font-title, 'Lilita One', sans-serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    padding: 12px 32px;
    border: none;
    box-shadow: 0 6px 0 #1e3a8a;
    transition: all 0.15s;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.sc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #1e3a8a;
    filter: brightness(1.1);
}

.sc-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #1e3a8a;
}

.sc-btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sc-blue-gradient);
    color: #fff;
    font-family: var(--font-title, 'Lilita One', sans-serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    padding: 12px 32px;
    border: none;
    box-shadow: 0 6px 0 #1e40af;
    transition: all 0.15s;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.sc-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sc-gold-gradient);
    color: #000;
    font-family: var(--font-title, 'Lilita One', sans-serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    padding: 12px 32px;
    border: none;
    box-shadow: 0 6px 0 #b45309;
    transition: all 0.1s;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.sc-btn-gold:active,
.sc-btn-blue:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b45309;
}

/* ============================================
   TITLES
   ============================================ */
.sc-title {
    font-family: var(--font-title, 'Lilita One', sans-serif);
    color: #fff;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    letter-spacing: 0.01em;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */
.sc-shelf {
    height: 12px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 40px 0;
    position: relative;
}

.sc-shelf::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #fbbf24;
    border-radius: 4px;
    rotate: 45deg;
    box-shadow: 0 0 15px #fbbf24;
}

/* ============================================
   SECTION BACKGROUNDS WITH PATTERNS
   ============================================ */

/* Quilted diamond section - blue/purple gradient (like Supercell store) */
.sc-section-quilted {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect x='12' y='12' width='32' height='32' rx='6' ry='6' transform='rotate(45 28 28)' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.13)' stroke-width='1.2'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #2a3f8f 0%, #4b42a8 35%, #6a4eb8 65%, #3b4faa 100%);
    background-size: 36px 36px, 100% 100%;
}

/* Quilted diamond section - dark blue variant */
.sc-section-quilted-dark {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect x='12' y='12' width='32' height='32' rx='6' ry='6' transform='rotate(45 28 28)' fill='rgba(255,255,255,0.04)' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #0f1a3d 0%, #162050 35%, #1a2760 65%, #0e1838 100%);
    background-size: 36px 36px, 100% 100%;
}