/* === 3D Printer Tycoon - Pixel Art & Animations === */

/* === PIXEL RENDERING === */
* {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* === PRINTER PIXEL SPRITES (CSS box-shadow) === */
.pixel-printer {
    width: 4px;
    height: 4px;
    transform: scale(3);
    transform-origin: center;
}

/* Idle printer sprite - a small 3D printer shape */
.pixel-printer.idle {
    background: transparent;
    box-shadow:
        /* Base plate */
        0px 12px var(--printer-idle),
        4px 12px var(--printer-idle),
        8px 12px var(--printer-idle),
        12px 12px var(--printer-idle),
        16px 12px var(--printer-idle),
        /* Left pillar */
        0px 0px var(--border-color),
        0px 4px var(--border-color),
        0px 8px var(--border-color),
        /* Right pillar */
        16px 0px var(--border-color),
        16px 4px var(--border-color),
        16px 8px var(--border-color),
        /* Top bar */
        4px 0px var(--border-color),
        8px 0px var(--border-color),
        12px 0px var(--border-color),
        /* Extruder */
        8px 4px #ff6688,
        8px 8px #ffaa44;
}

/* Printing state - extruder moves */
.pixel-printer.printing {
    background: transparent;
    box-shadow:
        /* Base plate */
        0px 12px var(--printer-active),
        4px 12px var(--printer-active),
        8px 12px var(--printer-active),
        12px 12px var(--printer-active),
        16px 12px var(--printer-active),
        /* Left pillar */
        0px 0px var(--border-color),
        0px 4px var(--border-color),
        0px 8px var(--border-color),
        /* Right pillar */
        16px 0px var(--border-color),
        16px 4px var(--border-color),
        16px 8px var(--border-color),
        /* Top bar */
        4px 0px var(--border-color),
        8px 0px var(--border-color),
        12px 0px var(--border-color),
        /* Extruder (animated position) */
        8px 4px #ff4466,
        8px 8px #ffcc44,
        /* Print in progress */
        4px 12px #44aaff,
        8px 12px #44aaff,
        12px 12px #44aaff;
    animation: extruder-move 1.2s linear infinite;
}

/* Done state - green glow */
.pixel-printer.done {
    background: transparent;
    box-shadow:
        /* Base plate */
        0px 12px var(--printer-done),
        4px 12px var(--printer-done),
        8px 12px var(--printer-done),
        12px 12px var(--printer-done),
        16px 12px var(--printer-done),
        /* Left pillar */
        0px 0px var(--success),
        0px 4px var(--success),
        0px 8px var(--success),
        /* Right pillar */
        16px 0px var(--success),
        16px 4px var(--success),
        16px 8px var(--success),
        /* Top bar */
        4px 0px var(--success),
        8px 0px var(--success),
        12px 0px var(--success),
        /* Completed item */
        4px 8px #44ff88,
        8px 8px #44ff88,
        12px 8px #44ff88,
        8px 4px #44ff88;
}

/* Failed state - red */
.pixel-printer.failed {
    background: transparent;
    box-shadow:
        /* Base plate */
        0px 12px var(--danger),
        4px 12px var(--danger),
        8px 12px var(--danger),
        12px 12px var(--danger),
        16px 12px var(--danger),
        /* Left pillar */
        0px 0px var(--danger),
        0px 4px var(--danger),
        0px 8px var(--danger),
        /* Right pillar */
        16px 0px var(--danger),
        16px 4px var(--danger),
        16px 8px var(--danger),
        /* Top bar */
        4px 0px var(--danger),
        8px 0px var(--danger),
        12px 0px var(--danger),
        /* X mark */
        4px 4px #ff0000,
        12px 4px #ff0000,
        8px 8px #ff0000,
        4px 8px #ff0000,
        12px 8px #ff0000;
}

/* Locked printer */
.pixel-printer.locked-sprite {
    background: transparent;
    box-shadow:
        /* Question mark */
        4px 0px var(--text-secondary),
        8px 0px var(--text-secondary),
        12px 4px var(--text-secondary),
        8px 8px var(--text-secondary),
        8px 12px var(--text-secondary);
    opacity: 0.5;
}

/* === ANIMATIONS === */
@keyframes extruder-move {
    0% { transform: scale(3) translateX(0); }
    25% { transform: scale(3) translateX(1px); }
    50% { transform: scale(3) translateX(0); }
    75% { transform: scale(3) translateX(-1px); }
    100% { transform: scale(3) translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

@keyframes done-pulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(68, 255, 136, 0.3)); }
    50% { filter: brightness(1.4) drop-shadow(0 0 6px rgba(68, 255, 136, 0.7)); }
}

/* Bed heating glow for printing state */
.pixel-printer.printing {
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(68, 170, 255, 0.4));
}

/* Done state pulse glow */
.pixel-printer.done {
    animation: done-pulse 1.2s ease-in-out infinite;
}

@keyframes completion-flash {
    0% { background: var(--bg-card); }
    25% { background: rgba(68, 255, 136, 0.2); }
    50% { background: var(--bg-card); }
    75% { background: rgba(68, 255, 136, 0.1); }
    100% { background: var(--bg-card); }
}

.printer-card.completing {
    animation: completion-flash 0.6s ease-out;
}

/* === PROGRESS BAR SEGMENTS === */
.progress-bar {
    background: repeating-linear-gradient(
        90deg,
        var(--progress-color) 0px,
        var(--progress-color) 6px,
        rgba(0,0,0,0.2) 6px,
        rgba(0,0,0,0.2) 8px
    );
}

.progress-bar.complete {
    background: repeating-linear-gradient(
        90deg,
        var(--success) 0px,
        var(--success) 6px,
        rgba(0,0,0,0.2) 6px,
        rgba(0,0,0,0.2) 8px
    );
}

/* === ITEM ICONS (small pixel representations) === */
.item-icon {
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: scale(2);
    transform-origin: left center;
    margin-right: 36px;
}

/* Keychain - ring with a small tag hanging */
.item-icon.keychain {
    box-shadow:
        /* Ring */
        4px 0px var(--tier1),
        8px 0px var(--tier1),
        0px 4px var(--tier1),
        12px 4px var(--tier1),
        4px 8px var(--tier1),
        8px 8px var(--tier1),
        /* Tag/charm */
        8px 12px #dddddd,
        8px 16px #dddddd,
        4px 16px #dddddd;
}

/* Phone Stand - phone leaning on L-shaped stand */
.item-icon.phone-stand {
    box-shadow:
        /* Phone (rectangle) */
        4px 0px #aaaacc,
        8px 0px #aaaacc,
        4px 4px #6666aa,
        8px 4px #6666aa,
        4px 8px #aaaacc,
        8px 8px #aaaacc,
        4px 12px #aaaacc,
        8px 12px #aaaacc,
        /* Stand base */
        0px 16px var(--tier1),
        4px 16px var(--tier1),
        8px 16px var(--tier1),
        12px 16px var(--tier1);
}

/* Dice - six-sided die with pips */
.item-icon.dice {
    box-shadow:
        /* Outline */
        0px 0px var(--tier1),
        4px 0px var(--tier1),
        8px 0px var(--tier1),
        12px 0px var(--tier1),
        0px 4px var(--tier1),
        12px 4px var(--tier1),
        0px 8px var(--tier1),
        12px 8px var(--tier1),
        0px 12px var(--tier1),
        4px 12px var(--tier1),
        8px 12px var(--tier1),
        12px 12px var(--tier1),
        /* Pips (showing 5) */
        4px 4px #ffffff,
        8px 4px #ffffff,
        4px 8px #ffffff,
        8px 8px #ffffff;
}

/* Planter Pot - terracotta pot with green plant */
.item-icon.planter {
    box-shadow:
        /* Plant leaves */
        4px 0px #44cc44,
        8px 0px #44cc44,
        0px 4px #33aa33,
        4px 4px #44cc44,
        8px 4px #44cc44,
        12px 4px #33aa33,
        /* Stem */
        4px 8px #33aa33,
        8px 8px #33aa33,
        /* Pot */
        0px 12px #cc6633,
        4px 12px #cc6633,
        8px 12px #cc6633,
        12px 12px #cc6633,
        4px 16px #aa5522,
        8px 16px #aa5522;
}

/* Desk Organizer - tray with pencils/pens sticking up */
.item-icon.desk-org {
    box-shadow:
        /* Pencils/items sticking up */
        0px 0px #ffcc00,
        4px 0px var(--tier2),
        8px 4px #4488ff,
        12px 0px #ff4444,
        /* Tray body */
        0px 4px var(--tier2),
        4px 4px var(--tier2),
        12px 4px var(--tier2),
        0px 8px var(--tier2),
        4px 8px var(--tier2),
        8px 8px var(--tier2),
        12px 8px var(--tier2),
        /* Tray bottom */
        0px 12px #669966,
        4px 12px #669966,
        8px 12px #669966,
        12px 12px #669966;
}

/* Figurine - action figure with head, body, arms, legs */
.item-icon.figurine {
    box-shadow:
        /* Head */
        4px 0px #ffcc99,
        8px 0px #ffcc99,
        /* Body */
        4px 4px var(--tier2),
        8px 4px var(--tier2),
        /* Arms */
        0px 4px var(--tier2),
        12px 4px var(--tier2),
        /* Belt/waist */
        4px 8px #553300,
        8px 8px #553300,
        /* Legs */
        4px 12px var(--tier2),
        8px 12px var(--tier2),
        /* Feet */
        4px 16px #333333,
        8px 16px #333333;
}

/* Lamp - shade on top, stem, glowing base */
.item-icon.lamp {
    box-shadow:
        /* Shade (wide at top, narrow at bottom) */
        0px 0px var(--tier3),
        4px 0px var(--tier3),
        8px 0px var(--tier3),
        12px 0px var(--tier3),
        16px 0px var(--tier3),
        4px 4px var(--tier3),
        8px 4px #ffffaa,
        12px 4px var(--tier3),
        /* Stem */
        8px 8px #888888,
        8px 12px #888888,
        /* Base */
        4px 16px #666666,
        8px 16px #666666,
        12px 16px #666666;
}

/* Drone - X-frame with propellers at tips */
.item-icon.drone {
    box-shadow:
        /* Propellers (corners) */
        0px 0px #888888,
        4px 0px #888888,
        12px 0px #888888,
        16px 0px #888888,
        /* Arms */
        4px 4px var(--tier3),
        12px 4px var(--tier3),
        /* Center body */
        8px 4px #44aaff,
        4px 8px var(--tier3),
        8px 8px var(--tier3),
        12px 8px var(--tier3),
        /* Lower arms */
        4px 12px var(--tier3),
        12px 12px var(--tier3),
        /* Bottom propellers */
        0px 16px #888888,
        4px 16px #888888,
        12px 16px #888888,
        16px 16px #888888;
}

/* Dragon - head with horns, body, wing, tail */
.item-icon.dragon {
    box-shadow:
        /* Horns */
        0px 0px var(--tier3),
        8px 0px var(--tier3),
        /* Head (eye is red pixel) */
        0px 4px var(--tier3),
        4px 4px #ff0000,
        8px 4px var(--tier3),
        /* Wing */
        12px 4px var(--tier3),
        16px 4px var(--tier3),
        /* Body */
        4px 8px var(--tier3),
        8px 8px var(--tier3),
        12px 8px var(--tier3),
        16px 8px var(--tier3),
        /* Legs & Tail */
        4px 12px var(--tier3),
        8px 12px var(--tier3),
        12px 12px var(--tier3),
        16px 12px var(--tier3);
}

/* Helmet - dome with visor slit */
.item-icon.helmet {
    box-shadow:
        /* Top dome */
        4px 0px var(--tier4),
        8px 0px var(--tier4),
        12px 0px var(--tier4),
        0px 4px var(--tier4),
        4px 4px var(--tier4),
        8px 4px var(--tier4),
        12px 4px var(--tier4),
        16px 4px var(--tier4),
        /* Visor slit */
        0px 8px var(--tier4),
        4px 8px #44ddff,
        8px 8px #44ddff,
        12px 8px #44ddff,
        16px 8px var(--tier4),
        /* Lower face guard */
        0px 12px var(--tier4),
        4px 12px var(--tier4),
        8px 12px var(--tier4),
        12px 12px var(--tier4),
        16px 12px var(--tier4);
}

/* Guitar - neck at top, body below */
.item-icon.guitar {
    box-shadow:
        /* Headstock */
        4px 0px #553300,
        8px 0px #553300,
        /* Neck with strings */
        8px 4px #cccccc,
        /* Upper bout */
        4px 8px var(--tier4),
        8px 8px var(--tier4),
        12px 8px var(--tier4),
        /* Waist */
        8px 12px var(--tier4),
        /* Lower bout (wider) */
        0px 16px var(--tier4),
        4px 16px var(--tier4),
        8px 16px #333333,
        12px 16px var(--tier4),
        16px 16px var(--tier4);
}

/* Castle - towers with crenellations and gate */
.item-icon.castle {
    box-shadow:
        /* Left tower top */
        0px 0px var(--tier4),
        8px 0px var(--tier4),
        /* Right tower top */
        16px 0px var(--tier4),
        /* Towers */
        0px 4px var(--tier4),
        4px 4px var(--tier4),
        8px 4px var(--tier4),
        12px 4px var(--tier4),
        16px 4px var(--tier4),
        /* Wall */
        0px 8px var(--tier4),
        4px 8px var(--tier4),
        8px 8px var(--tier4),
        12px 8px var(--tier4),
        16px 8px var(--tier4),
        /* Gate */
        0px 12px var(--tier4),
        4px 12px var(--tier4),
        8px 12px #553300,
        12px 12px var(--tier4),
        16px 12px var(--tier4);
}

/* Full Armor Set - helmet + chestplate + legs */
.item-icon.armor {
    box-shadow:
        /* Helmet */
        4px 0px #cccccc,
        8px 0px #cccccc,
        12px 0px #cccccc,
        /* Visor */
        8px 4px #44ddff,
        /* Shoulder pads */
        0px 8px var(--tier5),
        4px 8px var(--tier5),
        12px 8px var(--tier5),
        16px 8px var(--tier5),
        /* Chestplate with emblem */
        4px 12px #cccccc,
        8px 12px var(--tier5),
        12px 12px #cccccc,
        /* Leg armor */
        4px 16px #aaaaaa,
        8px 16px #aaaaaa,
        12px 16px #aaaaaa,
        /* Boots */
        4px 20px #888888,
        12px 20px #888888;
}

/* City Diorama - skyline with buildings of varying heights */
.item-icon.city {
    box-shadow:
        /* Tall building */
        8px 0px var(--tier5),
        8px 4px #ffffaa,
        /* Medium buildings */
        4px 4px #8866cc,
        12px 4px #aa66aa,
        /* All buildings row */
        0px 8px #aa66aa,
        4px 8px #ffffaa,
        8px 8px var(--tier5),
        12px 8px #aa66aa,
        16px 8px #8866cc,
        /* Ground level */
        0px 12px var(--tier5),
        4px 12px var(--tier5),
        8px 12px var(--tier5),
        12px 12px var(--tier5),
        16px 12px var(--tier5);
}

/* Mech Suit - humanoid robot with cockpit */
.item-icon.mech {
    box-shadow:
        /* Head/cockpit with visor */
        4px 0px #888888,
        8px 0px #44ffff,
        /* Shoulders */
        0px 4px var(--tier5),
        4px 4px var(--tier5),
        8px 4px var(--tier5),
        12px 4px var(--tier5),
        16px 4px var(--tier5),
        /* Arms */
        0px 8px var(--tier5),
        16px 8px var(--tier5),
        /* Torso */
        4px 8px #888888,
        8px 8px #44ffff,
        12px 8px #888888,
        /* Waist */
        4px 12px var(--tier5),
        8px 12px var(--tier5),
        12px 12px var(--tier5),
        /* Legs */
        4px 16px var(--tier5),
        12px 16px var(--tier5),
        /* Feet */
        0px 20px var(--tier5),
        4px 20px var(--tier5),
        12px 20px var(--tier5),
        16px 20px var(--tier5);
}

/* === RETRO PANEL BORDERS === */
.retro-border {
    border: 3px solid var(--border-color);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.1),
        inset -1px -1px 0 rgba(0,0,0,0.3);
}

/* === BUY PRINTER BUTTON === */
.buy-printer-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    transition: border-color 0.2s;
}

.buy-printer-card:hover:not(.cant-afford) {
    border-color: var(--success);
}

.buy-printer-card.cant-afford {
    opacity: 0.5;
}

.buy-printer-plus {
    font-size: 24px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.buy-printer-cost {
    font-size: 8px;
    color: var(--money-color);
}

/* === COLOR SWATCHES (filament colors) === */
.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    margin: 2px;
}

.color-swatch.owned {
    border-color: var(--success);
}

.color-swatch.selected {
    border-color: #ffffff;
    box-shadow: 0 0 4px #ffffff;
}


/* === NOTIFICATION BADGE === */
.badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 6px;
    padding: 2px 4px;
    border-radius: 8px;
    font-family: inherit;
}

/* === TIER LABELS === */
.tier-label {
    font-size: 6px;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-label.t1 { background: var(--tier1); color: #000; }
.tier-label.t2 { background: var(--tier2); color: #000; }
.tier-label.t3 { background: var(--tier3); color: #000; }
.tier-label.t4 { background: var(--tier4); color: #000; }
.tier-label.t5 { background: var(--tier5); color: #000; }