/* =========================================================
   HOTELLI — Pure CSS Pixel Art Backgrounds
   Habbo-inspired patterns (no images required)
   ========================================================= */

:root {
    --px-tile-a: #2a3d42;
    --px-tile-b: #1e2e32;
    --px-tile-hi: #3a5258;
    --px-wall: #1a3036;
    --px-wall-line: #243e44;
    --px-gold: #c9a24a;
    --px-gold-dim: #8a6e2e;
    --px-teal: #0d4a4f;
    --px-deep: #0a1a1e;
    --px-carpet: #1e3a45;
    --px-carpet-edge: #152a32;
}

/* ---------- 1. Classic Habbo checkerboard floor ---------- */
.px-floor-check {
    background-color: var(--px-tile-b);
    background-image:
        linear-gradient(45deg, var(--px-tile-a) 25%, transparent 25%),
        linear-gradient(-45deg, var(--px-tile-a) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--px-tile-a) 75%),
        linear-gradient(-45deg, transparent 75%, var(--px-tile-a) 75%);
    background-size: 48px 48px;
    background-position: 0 0, 0 24px, 24px -24px, -24px 0;
    image-rendering: pixelated;
}

/* Smaller pixel tiles */
.px-floor-check-sm {
    background-color: #1a2c30;
    background-image:
        linear-gradient(45deg, #2a4046 25%, transparent 25%),
        linear-gradient(-45deg, #2a4046 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a4046 75%),
        linear-gradient(-45deg, transparent 75%, #2a4046 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    image-rendering: pixelated;
}

/* ---------- 2. Habbo isometric-ish diamond floor ---------- */
.px-floor-iso {
    background-color: #152428;
    background-image:
        linear-gradient(30deg, #1e343a 12%, transparent 12.5%, transparent 87%, #1e343a 87.5%, #1e343a),
        linear-gradient(150deg, #1e343a 12%, transparent 12.5%, transparent 87%, #1e343a 87.5%, #1e343a),
        linear-gradient(30deg, #1e343a 12%, transparent 12.5%, transparent 87%, #1e343a 87.5%, #1e343a),
        linear-gradient(150deg, #1e343a 12%, transparent 12.5%, transparent 87%, #1e343a 87.5%, #1e343a),
        linear-gradient(60deg, #243a40 25%, transparent 25.5%, transparent 75%, #243a40 75%, #243a40),
        linear-gradient(60deg, #243a40 25%, transparent 25.5%, transparent 75%, #243a40 75%, #243a40);
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
    image-rendering: pixelated;
}

/* ---------- 3. Pixel grid (subtle UI bg) ---------- */
.px-grid {
    background-color: var(--px-deep);
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 16px 16px;
    image-rendering: pixelated;
}

.px-grid-gold {
    background-color: var(--px-deep);
    background-image:
        linear-gradient(rgba(201, 162, 74, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 74, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ---------- 4. Habbo wall wood paneling ---------- */
.px-wall-wood {
    background-color: #1a2820;
    background-image:
        repeating-linear-gradient(
            90deg,
            #1a2820 0px,
            #1a2820 14px,
            #15221c 14px,
            #15221c 16px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 46px,
            rgba(0,0,0,0.25) 46px,
            rgba(0,0,0,0.25) 48px
        );
    image-rendering: pixelated;
}

/* ---------- 5. Teal Habbo night sky + stars ---------- */
.px-sky-stars {
    background-color: #0a1520;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff8, transparent),
        radial-gradient(1px 1px at 30% 40%, #fff6, transparent),
        radial-gradient(1.5px 1.5px at 50% 15%, #fffc, transparent),
        radial-gradient(1px 1px at 70% 35%, #fff5, transparent),
        radial-gradient(1px 1px at 85% 55%, #fff7, transparent),
        radial-gradient(1.5px 1.5px at 20% 70%, #fff4, transparent),
        radial-gradient(1px 1px at 60% 80%, #fff6, transparent),
        radial-gradient(1px 1px at 40% 60%, #fff5, transparent),
        linear-gradient(180deg, #0a1520 0%, #0d2a32 60%, #123840 100%);
    background-size: 100% 100%;
    image-rendering: pixelated;
}

/* ---------- 6. Pixel dots / confetti atmosphere ---------- */
.px-dots {
    background-color: transparent;
    background-image:
        radial-gradient(circle, rgba(232, 197, 106, 0.35) 1px, transparent 1px),
        radial-gradient(circle, rgba(100, 200, 180, 0.2) 1px, transparent 1px);
    background-size: 28px 28px, 42px 42px;
    background-position: 0 0, 14px 14px;
}

/* ---------- 7. Habbo carpet stripe ---------- */
.px-carpet {
    background-color: var(--px-carpet);
    background-image:
        repeating-linear-gradient(
            90deg,
            var(--px-carpet) 0px,
            var(--px-carpet) 8px,
            var(--px-carpet-edge) 8px,
            var(--px-carpet-edge) 10px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(0,0,0,0.15) 8px,
            rgba(0,0,0,0.15) 10px
        );
    image-rendering: pixelated;
}

/* ---------- 8. Gold scanline (CRT / retro overlay) ---------- */
.px-scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.12) 2px,
        rgba(0,0,0,0.12) 4px
    );
    pointer-events: none;
}

/* ---------- 9. Composite: full CSS Habbo lobby (no image) ---------- */
.px-lobby-css {
    background-color: #0c1e22;
    background-image:
        /* vignette */
        radial-gradient(ellipse 90% 70% at 60% 45%, transparent 0%, rgba(6, 16, 20, 0.75) 100%),
        /* top dark */
        linear-gradient(180deg, rgba(6, 16, 20, 0.5) 0%, transparent 25%),
        /* bottom fade */
        linear-gradient(0deg, rgba(6, 16, 20, 0.85) 0%, transparent 35%),
        /* left text readability */
        linear-gradient(90deg, rgba(6, 16, 20, 0.9) 0%, rgba(6, 16, 20, 0.4) 35%, transparent 55%),
        /* wall panel top third */
        repeating-linear-gradient(
            90deg,
            #152a30 0px, #152a30 18px,
            #112228 18px, #112228 20px
        ),
        /* checker floor bottom */
        linear-gradient(45deg, #1a3036 25%, transparent 25%),
        linear-gradient(-45deg, #1a3036 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a3036 75%),
        linear-gradient(-45deg, transparent 75%, #1a3036 75%);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 42%,
        40px 40px,
        40px 40px,
        40px 40px,
        40px 40px;
    background-position:
        center,
        center,
        center,
        center,
        top,
        0 55%, 0 55%, 0 55%, 0 55%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
    image-rendering: pixelated;
}

/* ---------- 10. Pixel border frame (cards / panels) ---------- */
.px-border {
    border: 4px solid #2a4046;
    box-shadow:
        inset 0 0 0 2px #0a1518,
        0 0 0 2px #1a2c30,
        4px 4px 0 #0a1518;
    image-rendering: pixelated;
}

.px-border-gold {
    border: 3px solid var(--px-gold-dim);
    box-shadow:
        inset 0 0 0 2px rgba(201, 162, 74, 0.25),
        0 0 0 1px #0a1518,
        3px 3px 0 rgba(0,0,0,0.4);
}

/* ---------- Utility: force nearest-neighbor on bg images ---------- */
.px-render {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}