/*
=========================================================
MINECRAFT REDSTONE FACTORY
LEVEL 9

PART 2
FULL RESTORED STYLE.CSS

Version 4.1
=========================================================
*/


/* =====================================================
   ROOT COLORS
===================================================== */

:root {

    --background:
        #030704;

    --background-two:
        #07100a;

    --panel:
        #0c1b12;

    --panel-light:
        #11271a;

    --panel-bright:
        #173521;

    --border:
        #31533c;

    --border-light:
        #55765e;

    --text:
        #f2f7f3;

    --text-soft:
        #c1cdc4;

    --muted:
        #7d9182;

    --green:
        #42bb4d;

    --green-light:
        #69df73;

    --green-dark:
        #1d6728;

    --red:
        #e33a3a;

    --red-light:
        #ff5c5c;

    --red-dark:
        #721919;

    --gold:
        #f0c64c;

    --gold-dark:
        #755209;

    --orange:
        #ec7c31;

    --blue:
        #58a9cb;

    --steel:
        #9ca8a1;

    --shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.5);

}


/* =====================================================
   RESET
===================================================== */

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    width:
        100%;

    min-height:
        100%;

    scroll-behavior:
        smooth;

}


body {

    width:
        100%;

    min-height:
        100vh;

    overflow-x:
        hidden;

    color:
        var(--text);

    background:
        var(--background);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

}


button {

    font:
        inherit;

}


button,
canvas {

    -webkit-tap-highlight-color:
        transparent;

}


button:focus-visible {

    outline:
        2px solid
        var(--green-light);

    outline-offset:
        3px;

}


/* =====================================================
   GLOBAL BACKGROUND
===================================================== */

#background {

    position:
        fixed;

    inset:
        0;

    z-index:
        -20;

    overflow:
        hidden;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 50% -25%,
            #193923,
            #07110b 48%,
            #020503 100%
        );

}


.background-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        0.18;

    background-image:

        linear-gradient(
            rgba(83, 143, 96, 0.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(83, 143, 96, 0.18) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    animation:
        backgroundMove
        25s linear infinite;

}


.background-noise {

    position:
        absolute;

    inset:
        0;

    opacity:
        0.12;

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0 8px,
            rgba(255, 255, 255, 0.018) 8px 9px
        );

}


.background-glow {

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    filter:
        blur(125px);

    opacity:
        0.13;

}


.glow-red {

    top:
        -250px;

    left:
        -200px;

    background:
        #d93737;

}


.glow-green {

    right:
        -220px;

    bottom:
        -260px;

    background:
        #3ec14a;

}


@keyframes backgroundMove {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            42px 42px;

    }

}


/* =====================================================
   SCREEN SYSTEM
===================================================== */

.screen {

    display:
        none;

}


.screen.active-screen {

    display:
        flex;

}


/* =====================================================
   MAIN MENU
===================================================== */

#mainMenu {

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        100vh;

    padding:
        25px 15px;

}


.main-menu-card {

    position:
        relative;

    width:
        min(
            100%,
            575px
        );

    padding:
        42px 40px 30px;

    overflow:
        hidden;

    border:
        2px solid
        #476b51;

    border-radius:
        7px;

    text-align:
        center;

    background:
        linear-gradient(
            145deg,
            rgba(20, 41, 27, 0.98),
            rgba(6, 16, 10, 0.99)
        );

    box-shadow:

        var(--shadow),

        inset
        0 0 0 2px
        rgba(255, 255, 255, 0.025);

}


.menu-top-line {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        repeating-linear-gradient(
            90deg,
            #f24b4b 0 22px,
            #8c1818 22px 44px
        );

    box-shadow:
        0 0 16px
        rgba(255, 70, 70, 0.45);

}


/* =====================================================
   MENU LOGO
===================================================== */

.factory-logo {

    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        18px;

}


.logo-frame {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        82px;

    height:
        82px;

    border:
        2px solid
        #ff5c5c;

    background:
        linear-gradient(
            145deg,
            #5c1717,
            #260808
        );

    box-shadow:

        0 0 25px
        rgba(255, 70, 70, 0.25),

        inset
        0 0 20px
        rgba(255, 80, 80, 0.1),

        5px 5px 0
        rgba(0, 0, 0, 0.32);

}


.logo-frame::before,
.logo-frame::after {

    content:
        "";

    position:
        absolute;

    background:
        #cd3333;

}


.logo-frame::before {

    width:
        12px;

    height:
        96px;

}


.logo-frame::after {

    width:
        96px;

    height:
        12px;

}


.logo-gear {

    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    border:
        8px solid
        #aeb8b1;

    border-radius:
        50%;

    background:
        #3d4741;

    box-shadow:

        inset
        0 0 0 5px
        #151a17,

        0 0 0 3px
        #59645d;

    animation:
        logoSpin
        7s linear infinite;

}


.logo-gear::before {

    content:
        "";

    position:
        absolute;

    inset:
        9px;

    border-radius:
        50%;

    background:
        #111713;

    box-shadow:
        inset
        0 0 0 3px
        #747e78;

}


.logo-gear span {

    position:
        absolute;

    inset:
        -13px;

    border:
        7px dashed
        #a2aca6;

    border-radius:
        50%;

}


@keyframes logoSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =====================================================
   MAIN MENU TEXT
===================================================== */

.academy-title {

    margin-bottom:
        10px;

    color:
        var(--green-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.academy-title strong {

    margin-left:
        5px;

    color:
        white;

}


.main-menu-card h1 {

    color:
        #f0f4f1;

    line-height:
        0.94;

    font-size:
        clamp(
            38px,
            8vw,
            62px
        );

    font-weight:
        900;

    letter-spacing:
        -2px;

    text-shadow:

        4px 4px 0
        #000,

        0 0 18px
        rgba(255, 255, 255, 0.05);

}


.main-menu-card h1 span {

    display:
        block;

    margin-top:
        12px;

    color:
        var(--red-light);

    font-size:
        clamp(
            27px,
            6vw,
            44px
        );

    letter-spacing:
        -1px;

}


.menu-subtitle {

    margin:
        20px 0 28px;

    color:
        #a8b8ab;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


/* =====================================================
   MAIN MENU BUTTONS
===================================================== */

.main-buttons {

    display:
        grid;

    gap:
        11px;

}


.main-btn {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    width:
        100%;

    min-height:
        55px;

    padding:
        12px 18px;

    cursor:
        pointer;

    border:
        2px solid
        #44674f;

    border-radius:
        4px;

    color:
        white;

    background:
        linear-gradient(
            #263f2e,
            #13251a
        );

    box-shadow:

        0 4px 0
        #030705,

        inset
        0 1px 0
        rgba(255, 255, 255, 0.05);

    font-weight:
        800;

    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        border-color 0.15s ease;

}


.main-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        #6f9a7a;

    filter:
        brightness(1.12);

}


.main-btn:active {

    transform:
        translateY(2px);

    box-shadow:
        0 1px 0
        #030705;

}


.primary-btn {

    border-color:
        #78df80;

    background:
        linear-gradient(
            #4bc959,
            #228330
        );

}


.challenge-btn {

    border-color:
        #dfaf37;

    background:
        linear-gradient(
            #a57510,
            #654305
        );

}


.main-btn:disabled {

    cursor:
        not-allowed;

    opacity:
        0.42;

    transform:
        none;

    filter:
        grayscale(0.75);

}


/* =====================================================
   MAIN MENU ICONS
===================================================== */

.menu-button-icon {

    position:
        relative;

    flex:
        0 0 20px;

    width:
        20px;

    height:
        20px;

}


.play-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        5px;

    border-top:
        7px solid
        transparent;

    border-bottom:
        7px solid
        transparent;

    border-left:
        11px solid
        white;

}


.continue-icon {

    border:
        3px solid
        white;

    border-right-color:
        transparent;

    border-radius:
        50%;

}


.continue-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        -3px;

    right:
        -2px;

    border-top:
        4px solid
        transparent;

    border-bottom:
        4px solid
        transparent;

    border-left:
        6px solid
        white;

    transform:
        rotate(-25deg);

}


.trophy-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        2px;

    width:
        10px;

    height:
        10px;

    border-radius:
        2px 2px 6px 6px;

    background:
        var(--gold);

}


.trophy-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        8px;

    bottom:
        1px;

    width:
        4px;

    height:
        7px;

    border-bottom:
        3px solid
        var(--gold);

    background:
        var(--gold);

}


.stats-icon {

    border-bottom:
        2px solid
        white;

}


.stats-icon::before {

    content:
        "";

    position:
        absolute;

    bottom:
        2px;

    left:
        2px;

    width:
        4px;

    height:
        7px;

    background:
        #64da70;

    box-shadow:

        6px -4px 0
        #64da70,

        12px -9px 0
        #64da70;

}


.settings-icon {

    border:
        5px solid
        #c6cec9;

    border-radius:
        50%;

    box-shadow:
        0 0 0 2px
        #4d5952;

}


.settings-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        3px;

    border-radius:
        50%;

    background:
        #18221b;

}


/* =====================================================
   SAVE STATUS
===================================================== */

.save-status {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        20px;

    padding:
        11px;

    border:
        1px solid
        #23392a;

    color:
        var(--muted);

    background:
        rgba(0, 0, 0, 0.23);

    font-size:
        11px;

}


.save-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #69776d;

}


.save-dot.active {

    background:
        #61e06d;

    box-shadow:
        0 0 10px
        #61e06d;

}


.menu-footer {

    margin-top:
        24px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    color:
        #758579;

    font-size:
        10px;

}


.menu-footer strong {

    display:
        block;

    color:
        #a0aea4;

}


.menu-footer span {

    display:
        block;

    margin-top:
        4px;

}


/* =====================================================
   GAME SCREEN
===================================================== */

#gameScreen {

    flex-direction:
        column;

    width:
        100%;

    min-height:
        100vh;

    background:
        #061009;

}


/* =====================================================
   HUD
===================================================== */

#hud {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    display:
        flex;

    align-items:
        stretch;

    gap:
        7px;

    width:
        100%;

    padding:
        8px 10px;

    border-bottom:
        2px solid
        #365b42;

    background:
        rgba(6, 17, 10, 0.98);

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.45);

}


.hud-stat {

    flex:
        1;

    display:
        flex;

    min-width:
        105px;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px 10px;

    border:
        1px solid
        #2a4c36;

    border-radius:
        3px;

    background:
        linear-gradient(
            #11291b,
            #0c1e14
        );

    box-shadow:
        inset
        0 1px
        rgba(255, 255, 255, 0.025);

}


.hud-label {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #a6b6a9;

    font-size:
        10px;

    font-weight:
        700;

}


.hud-stat strong {

    margin-top:
        3px;

    color:
        white;

    font-size:
        14px;

}


.hud-icon-button {

    flex:
        0 0 51px;

    display:
        grid;

    place-items:
        center;

    min-height:
        51px;

    cursor:
        pointer;

    border:
        1px solid
        #41674c;

    border-radius:
        3px;

    color:
        white;

    background:
        linear-gradient(
            #173624,
            #0f271a
        );

    transition:
        filter 0.15s ease;

}


.hud-icon-button:hover {

    filter:
        brightness(1.2);

}


/* =====================================================
   HAMBURGER
===================================================== */

.hamburger-icon {

    display:
        flex;

    width:
        22px;

    flex-direction:
        column;

    gap:
        4px;

}


.hamburger-icon i {

    display:
        block;

    width:
        100%;

    height:
        2px;

    background:
        white;

}


/* =====================================================
   HUD SYMBOLS
===================================================== */

.hud-symbol {

    position:
        relative;

    display:
        inline-block;

    width:
        12px;

    height:
        12px;

}


.coin-symbol {

    border:
        2px solid
        #ffdc57;

    border-radius:
        50%;

    background:
        #a97910;

}


.coin-symbol::after {

    content:
        "";

    position:
        absolute;

    inset:
        3px;

    border-radius:
        50%;

    background:
        #ffe47b;

}


.power-symbol::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        4px;

    width:
        5px;

    height:
        13px;

    background:
        #f7da46;

    clip-path:
        polygon(
            55% 0,
            100% 0,
            65% 43%,
            100% 43%,
            20% 100%,
            42% 57%,
            0 57%
        );

}


.item-symbol {

    border:
        1px solid
        #d99d62;

    background:
        #925d32;

    box-shadow:

        inset
        3px 3px
        rgba(255, 255, 255, 0.1),

        inset
        -3px -3px
        rgba(0, 0, 0, 0.16);

}


.storage-symbol {

    border:
        1px solid
        #d29445;

    background:
        linear-gradient(
            #b9792f 0 44%,
            #71481b 44% 56%,
            #a36a2b 56%
        );

}


.efficiency-symbol {

    border-left:
        2px solid
        #5fe16b;

    border-bottom:
        2px solid
        #5fe16b;

}


.efficiency-symbol::before {

    content:
        "";

    position:
        absolute;

    left:
        2px;

    bottom:
        2px;

    width:
        2px;

    height:
        4px;

    background:
        #5fe16b;

    box-shadow:

        3px -3px
        #5fe16b,

        6px -6px
        #5fe16b;

}


/* =====================================================
   SPEAKER
===================================================== */

.speaker-icon {

    position:
        relative;

    width:
        8px;

    height:
        12px;

    background:
        #d5ddd7;

}


.speaker-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        -3px;

    left:
        6px;

    border-top:
        9px solid
        transparent;

    border-bottom:
        9px solid
        transparent;

    border-left:
        10px solid
        #d5ddd7;

}


.speaker-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        -4px;

    left:
        17px;

    width:
        7px;

    height:
        16px;

    border:
        2px solid
        #75d37f;

    border-left:
        0;

    border-radius:
        0 12px 12px 0;

}


/* =====================================================
   CHALLENGE BAR
===================================================== */

#challengeHud {

    display:
        none;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        9px 16px;

    border-bottom:
        1px solid
        #b47d17;

    background:
        linear-gradient(
            90deg,
            #4f3307,
            #76520e,
            #4f3307
        );

    color:
        #ffe79b;

    font-size:
        11px;

}


#challengeHud.active {

    display:
        flex;

}


.challenge-left {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.challenge-mini-icon {

    width:
        12px;

    height:
        12px;

    border:
        2px solid
        var(--gold);

    border-radius:
        50%;

}


/* =====================================================
   FACTORY LAYOUT
===================================================== */

#factoryLayout {

    display:
        grid;

    grid-template-columns:

        225px

        minmax(
            440px,
            1fr
        )

        180px;

    gap:
        10px;

    width:
        100%;

    padding:
        10px;

}


/* =====================================================
   PANELS
===================================================== */

#buildPanel,
#factoryControls {

    align-self:
        start;

    padding:
        13px;

    border:
        1px solid
        #31553d;

    border-radius:
        4px;

    background:
        linear-gradient(
            #10251a,
            #091810
        );

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.22);

}


.panel-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding-bottom:
        11px;

    border-bottom:
        1px solid
        #28402f;

}


.panel-title h2 {

    color:
        white;

    font-size:
        17px;

}


.panel-title p {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        9px;

}


.panel-title-icon {

    position:
        relative;

    flex:
        0 0 31px;

    width:
        31px;

    height:
        31px;

    border:
        1px solid
        #4c7257;

    background:
        #142c1d;

}


/* =====================================================
   BUILDER TITLE ICON
===================================================== */

.builder-icon::before {

    content:
        "";

    position:
        absolute;

    width:
        17px;

    height:
        5px;

    top:
        13px;

    left:
        7px;

    background:
        #c3cdc6;

    transform:
        rotate(-42deg);

}


.builder-icon::after {

    content:
        "";

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    right:
        3px;

    top:
        4px;

    border:
        3px solid
        #c3cdc6;

    border-left:
        0;

    border-bottom:
        0;

    transform:
        rotate(-42deg);

}


/* =====================================================
   FACTORY TITLE ICON
===================================================== */

.control-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        3px solid
        #63d76e;

    border-radius:
        50%;

}


.control-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        14px;

    width:
        3px;

    height:
        25px;

    background:
        #63d76e;

}


/* =====================================================
   BUILD CATEGORIES
===================================================== */

.build-category {

    margin-top:
        15px;

}


.build-category h3 {

    margin-bottom:
        7px;

    color:
        #70dd7b;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


/* =====================================================
   TOOL BUTTONS
===================================================== */

.tool-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        6px;

}


.tool-btn {

    position:
        relative;

    display:
        flex;

    min-height:
        72px;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        7px 4px;

    cursor:
        pointer;

    border:
        1px solid
        #365941;

    border-radius:
        3px;

    color:
        white;

    background:
        linear-gradient(
            #172f20,
            #0e2217
        );

    box-shadow:
        inset
        0 1px
        rgba(255, 255, 255, 0.025);

    transition:
        transform 0.13s ease,
        filter 0.13s ease,
        border-color 0.13s ease;

}


.tool-btn strong {

    font-size:
        9px;

}


.tool-btn small {

    position:
        absolute;

    top:
        4px;

    right:
        4px;

    min-width:
        18px;

    padding:
        2px 3px;

    border-radius:
        2px;

    color:
        #ffe45f;

    background:
        rgba(0, 0, 0, 0.58);

    font-size:
        7px;

    font-weight:
        900;

}


.tool-btn:hover {

    transform:
        translateY(-1px);

    border-color:
        #608a6c;

    filter:
        brightness(1.15);

}


.tool-btn.selected {

    border-color:
        #62e170;

    background:
        linear-gradient(
            #2d7139,
            #184d24
        );

    box-shadow:

        0 0 11px
        rgba(75, 225, 90, 0.2),

        inset
        0 0 12px
        rgba(80, 230, 90, 0.05);

}


.danger-tool.selected {

    border-color:
        #ff5a5a;

    background:
        linear-gradient(
            #6d2424,
            #421414
        );

}


/* =====================================================
   TOOL GRAPHIC BASE
===================================================== */

.tool-graphic {

    position:
        relative;

    display:
        block;

    width:
        38px;

    height:
        32px;

}


/* =====================================================
   CONVEYOR TOOL
===================================================== */

.belt-tool-icon {

    height:
        21px;

    margin-top:
        3px;

    border:
        2px solid
        #7a8680;

    background:
        repeating-linear-gradient(
            90deg,
            #343d38 0 6px,
            #626c66 6px 9px
        );

    box-shadow:
        inset
        0 3px
        rgba(255, 255, 255, 0.06);

}


.belt-tool-icon::before,
.belt-tool-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    width:
        3px;

    height:
        11px;

    background:
        #b2bbb5;

}


.belt-tool-icon::before {

    left:
        3px;

}


.belt-tool-icon::after {

    right:
        3px;

}


.belt-tool-icon i::before {

    content:
        "";

    position:
        absolute;

    top:
        5px;

    left:
        15px;

    border-top:
        4px solid
        transparent;

    border-bottom:
        4px solid
        transparent;

    border-left:
        8px solid
        white;

}


/* =====================================================
   SPLITTER TOOL
===================================================== */

.splitter-tool-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        17px;

    width:
        4px;

    height:
        26px;

    background:
        #9ba59f;

}


.splitter-tool-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        7px;

    top:
        4px;

    width:
        24px;

    height:
        18px;

    border-left:
        4px solid
        #9ba59f;

    border-right:
        4px solid
        #9ba59f;

    border-bottom:
        4px solid
        #9ba59f;

}


.splitter-tool-icon i::before {

    content:
        "";

    position:
        absolute;

    left:
        14px;

    bottom:
        0;

    border-left:
        5px solid
        transparent;

    border-right:
        5px solid
        transparent;

    border-top:
        7px solid
        #e7ebe8;

}


/* =====================================================
   MACHINE ICON BASE
===================================================== */

.machine-icon {

    border:
        2px solid
        #747f78;

    background:
        linear-gradient(
            #59655e,
            #2c3731
        );

    box-shadow:

        inset
        4px 4px
        rgba(255, 255, 255, 0.08),

        inset
        -4px -4px
        rgba(0, 0, 0, 0.25),

        2px 2px 0
        rgba(0, 0, 0, 0.25);

}


.machine-icon::after {

    content:
        "";

    position:
        absolute;

    right:
        4px;

    bottom:
        4px;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #5ee66a;

    box-shadow:
        0 0 7px
        #5ee66a;

}


/* =====================================================
   MINER TOOL GRAPHIC
===================================================== */

.miner-icon::before {

    content:
        "";

    position:
        absolute;

    width:
        22px;

    height:
        4px;

    left:
        7px;

    top:
        13px;

    background:
        #c8cfcb;

    transform:
        rotate(-40deg);

}


.miner-icon i::before {

    content:
        "";

    position:
        absolute;

    width:
        15px;

    height:
        7px;

    left:
        16px;

    top:
        5px;

    border-top:
        4px solid
        #c8cfcb;

    border-right:
        4px solid
        #c8cfcb;

    transform:
        rotate(-40deg);

}


/* =====================================================
   CRUSHER TOOL GRAPHIC
===================================================== */

.crusher-icon::before,
.crusher-icon i::before {

    content:
        "";

    position:
        absolute;

    top:
        8px;

    width:
        10px;

    height:
        15px;

    border:
        2px solid
        #222a25;

    border-radius:
        50%;

    background:
        repeating-linear-gradient(
            90deg,
            #aeb6b1 0 2px,
            #4b5550 2px 4px
        );

}


.crusher-icon::before {

    left:
        6px;

}


.crusher-icon i::before {

    right:
        6px;

}


/* =====================================================
   SMELTER TOOL GRAPHIC
===================================================== */

.smelter-icon {

    border-color:
        #8e6644;

    background:
        linear-gradient(
            #5d5046,
            #352d28
        );

}


.smelter-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px 9px;

    border:
        2px solid
        #271510;

    background:
        radial-gradient(
            circle,
            #ffd15e 0 20%,
            #ff7d24 21% 55%,
            #641912 58%
        );

    box-shadow:
        0 0 7px
        rgba(255, 100, 30, 0.45);

}


/* =====================================================
   SORTER TOOL GRAPHIC
===================================================== */

.sorter-icon {

    border-color:
        #618598;

    background:
        linear-gradient(
            #466a7b,
            #2b4653
        );

}


.sorter-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        13px;

    width:
        26px;

    height:
        5px;

    background:
        #9aa9b0;

}


.sorter-icon i::before {

    content:
        "";

    position:
        absolute;

    left:
        16px;

    top:
        5px;

    width:
        5px;

    height:
        21px;

    background:
        #9aa9b0;

}


.sorter-icon i::after {

    content:
        "";

    position:
        absolute;

    top:
        10px;

    left:
        14px;

    width:
        9px;

    height:
        9px;

    background:
        #63df72;

    border:
        1px solid
        #c3f6ca;

}


/* =====================================================
   CRAFTER TOOL GRAPHIC
===================================================== */

.crafter-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        4px dashed
        #c0c8c3;

    border-radius:
        50%;

}


.crafter-icon i::before {

    content:
        "";

    position:
        absolute;

    top:
        13px;

    left:
        16px;

    width:
        5px;

    height:
        5px;

    background:
        #1f2722;

}


/* =====================================================
   CHEST TOOL GRAPHIC
===================================================== */

.chest-icon {

    border-color:
        #b17b36;

    background:
        linear-gradient(
            #ae742d 0 44%,
            #624019 44% 56%,
            #8e5d25 56%
        );

}


.chest-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        12px;

    left:
        16px;

    width:
        7px;

    height:
        8px;

    border:
        1px solid
        #2b1c0b;

    background:
        #dbc27a;

}


.chest-icon::after {

    display:
        none;

}


/* =====================================================
   REDSTONE WIRE TOOL
===================================================== */

.redstone-wire-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        14px;

    left:
        3px;

    width:
        32px;

    height:
        4px;

    background:
        #e63b3b;

    box-shadow:
        0 0 7px
        rgba(255, 55, 55, 0.75);

}


.redstone-wire-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        7px;

    left:
        17px;

    width:
        4px;

    height:
        18px;

    background:
        #e63b3b;

}


/* =====================================================
   LEVER TOOL
===================================================== */

.lever-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        6px;

    bottom:
        3px;

    width:
        26px;

    height:
        9px;

    border:
        2px solid
        #38352f;

    background:
        #777266;

}


.lever-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        18px;

    bottom:
        10px;

    width:
        5px;

    height:
        21px;

    background:
        #c6baa0;

    transform:
        rotate(27deg);

    transform-origin:
        bottom;

}


/* =====================================================
   BUTTON TOOL
===================================================== */

.button-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        7px;

    left:
        8px;

    width:
        21px;

    height:
        18px;

    border:
        2px solid
        #525b55;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #e6e9e7,
            #8b938e 55%,
            #424943
        );

}


/* =====================================================
   TORCH TOOL
===================================================== */

.torch-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        17px;

    bottom:
        2px;

    width:
        5px;

    height:
        20px;

    background:
        #74502d;

}


.torch-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        12px;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        #ff3a3a;

    box-shadow:

        0 0 10px
        #ff3a3a,

        0 0 18px
        rgba(255, 50, 50, 0.6);

}


/* =====================================================
   REPEATER TOOL
===================================================== */

.repeater-icon {

    border:
        2px solid
        #6c716e;

    background:
        #bbb9ad;

}


.repeater-icon::before,
.repeater-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        7px;

    width:
        6px;

    height:
        16px;

    background:
        #c82929;

    box-shadow:
        0 0 4px
        rgba(255, 60, 60, 0.5);

}


.repeater-icon::before {

    left:
        8px;

}


.repeater-icon::after {

    right:
        8px;

}


/* =====================================================
   INTERACT TOOL
===================================================== */

.interact-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        13px;

    top:
        3px;

    width:
        9px;

    height:
        23px;

    border:
        2px solid
        #d4ded7;

    border-radius:
        7px 7px 4px 4px;

    transform:
        rotate(-18deg);

}


.interact-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    bottom:
        3px;

    width:
        12px;

    height:
        4px;

    background:
        #d4ded7;

    transform:
        rotate(-18deg);

}


/* =====================================================
   DELETE TOOL
===================================================== */

.delete-icon::before,
.delete-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        14px;

    left:
        4px;

    width:
        30px;

    height:
        5px;

    background:
        #ff4747;

    box-shadow:
        0 0 5px
        rgba(255, 70, 70, 0.35);

}


.delete-icon::before {

    transform:
        rotate(45deg);

}


.delete-icon::after {

    transform:
        rotate(-45deg);

}


/* =====================================================
   ROTATE BUTTON
===================================================== */

.rotate-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        100%;

    margin-top:
        12px;

    padding:
        10px;

    cursor:
        pointer;

    border:
        1px solid
        #4b7458;

    border-radius:
        3px;

    color:
        white;

    background:
        linear-gradient(
            #203e2a,
            #132a1b
        );

    font-size:
        11px;

    font-weight:
        700;

    transition:
        filter 0.15s ease;

}


.rotate-btn:hover {

    filter:
        brightness(1.18);

}


.rotate-icon {

    width:
        15px;

    height:
        15px;

    border:
        2px solid
        #7cdf84;

    border-left-color:
        transparent;

    border-radius:
        50%;

}


/* =====================================================
   CENTER FACTORY
===================================================== */

#canvasArea {

    min-width:
        0;

}


.factory-topbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    min-height:
        51px;

    padding:
        8px 12px;

    border:
        1px solid
        #31563d;

    border-bottom:
        0;

    border-radius:
        4px 4px 0 0;

    background:
        linear-gradient(
            #112a1b,
            #0b1c13
        );

}


.factory-name {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.factory-name strong {

    display:
        block;

    font-size:
        12px;

}


.factory-name small {

    display:
        block;

    margin-top:
        2px;

    color:
        #60db6b;

    font-size:
        8px;

    letter-spacing:
        0.8px;

}


.factory-status-light {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #5be469;

    box-shadow:

        0 0 7px
        #5be469,

        0 0 14px
        rgba(91, 228, 105, 0.4);

}


.factory-topbar-info {

    color:
        #688c72;

    font-size:
        8px;

    font-weight:
        800;

}


/* =====================================================
   CANVAS
===================================================== */

#factoryCanvasWrapper {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    border:
        2px solid
        #45684f;

    background:
        #14291c;

    box-shadow:

        inset
        0 0 35px
        rgba(0, 0, 0, 0.48),

        0 13px 30px
        rgba(0, 0, 0, 0.25);

}


#factoryCanvas {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        14 / 9;

    cursor:
        crosshair;

    touch-action:
        none;

}


/* =====================================================
   CANVAS CORNERS
===================================================== */

.canvas-corner {

    position:
        absolute;

    width:
        18px;

    height:
        18px;

    pointer-events:
        none;

}


.canvas-corner::before,
.canvas-corner::after {

    content:
        "";

    position:
        absolute;

    background:
        rgba(111, 205, 128, 0.5);

}


.canvas-corner::before {

    width:
        18px;

    height:
        2px;

}


.canvas-corner::after {

    width:
        2px;

    height:
        18px;

}


.top-left {

    top:
        6px;

    left:
        6px;

}


.top-right {

    top:
        6px;

    right:
        6px;

    transform:
        rotate(90deg);

}


.bottom-left {

    left:
        6px;

    bottom:
        6px;

    transform:
        rotate(-90deg);

}


.bottom-right {

    right:
        6px;

    bottom:
        6px;

    transform:
        rotate(180deg);

}


/* =====================================================
   STATUS BAR
===================================================== */

#factoryStatusBar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    min-height:
        42px;

    padding:
        7px 11px;

    border:
        1px solid
        #31563d;

    border-top:
        0;

    border-radius:
        0 0 4px 4px;

    background:
        #0b1c12;

}


.status-tool {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 8px;

    border:
        1px solid
        #233f2d;

    background:
        #102117;

    font-size:
        9px;

}


.status-tool span {

    color:
        #63876c;

}


.status-tool strong {

    color:
        white;

}


.factory-message {

    overflow:
        hidden;

    color:
        #6edf79;

    font-size:
        10px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* =====================================================
   FACTORY CONTROL BUTTONS
===================================================== */

.control-buttons {

    display:
        grid;

    gap:
        7px;

    margin-top:
        13px;

}


.factory-control-btn {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    width:
        100%;

    min-height:
        43px;

    padding:
        8px 9px;

    cursor:
        pointer;

    border:
        1px solid
        #3c6549;

    border-radius:
        3px;

    color:
        white;

    background:
        linear-gradient(
            #183523,
            #0f2619
        );

    font-size:
        10px;

    font-weight:
        700;

    text-align:
        left;

    transition:
        filter 0.14s ease,
        transform 0.14s ease;

}


.factory-control-btn:hover {

    transform:
        translateX(2px);

    filter:
        brightness(1.18);

}


/* =====================================================
   RIGHT BUTTON ICON BOX
===================================================== */

.control-icon-box {

    position:
        relative;

    flex:
        0 0 25px;

    width:
        25px;

    height:
        25px;

    border:
        1px solid
        #456a50;

    background:
        #0b1b12;

}


/* =====================================================
   INVENTORY CONTROL ICON
===================================================== */

.inventory-control-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        5px;

    border:
        1px solid
        #b17b35;

    background:
        linear-gradient(
            #ad742f 0 44%,
            #5e3b16 44% 56%,
            #8d5b24 56%
        );

}


.inventory-control-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        11px;

    top:
        10px;

    width:
        4px;

    height:
        5px;

    background:
        #dcc47b;

}


/* =====================================================
   UPGRADE CONTROL ICON
===================================================== */

.upgrade-control-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        4px;

    left:
        8px;

    border-left:
        5px solid
        transparent;

    border-right:
        5px solid
        transparent;

    border-bottom:
        8px solid
        #6de17a;

}


.upgrade-control-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        9px;

    top:
        11px;

    width:
        7px;

    height:
        9px;

    background:
        #6de17a;

}


/* =====================================================
   STATISTICS CONTROL ICON
===================================================== */

.statistics-control-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        4px;

    bottom:
        4px;

    width:
        4px;

    height:
        6px;

    background:
        #65de71;

    box-shadow:

        6px -4px
        #65de71,

        12px -9px
        #65de71;

}


/* =====================================================
   SAVE CONTROL ICON
===================================================== */

.save-control-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    border:
        2px solid
        #bac6be;

    background:
        #344239;

}


.save-control-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        8px;

    bottom:
        6px;

    width:
        9px;

    height:
        6px;

    background:
        #87958c;

}


/* =====================================================
   HELP CONTROL ICON
===================================================== */

.help-control-icon::before {

    content:
        "?";

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font-size:
        16px;

    font-weight:
        900;

}


/* =====================================================
   PRODUCTION GUIDE
===================================================== */

.production-guide {

    margin-top:
        15px;

    padding:
        10px 8px;

    border:
        1px solid
        #2a4b35;

    background:
        rgba(0, 0, 0, 0.17);

    text-align:
        center;

}


.production-guide h3 {

    margin-bottom:
        10px;

    color:
        #65db70;

    font-size:
        9px;

    letter-spacing:
        0.7px;

    text-transform:
        uppercase;

}


.production-step {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    font-size:
        9px;

}


.production-arrow {

    display:
        block;

    margin:
        3px 0;

    color:
        #59ce66;

}


/* =====================================================
   MINI MACHINES
===================================================== */

.mini-machine {

    position:
        relative;

    width:
        15px;

    height:
        15px;

    border:
        1px solid
        #768079;

    background:
        #3f4943;

}


.miner-mini::after {

    content:
        "";

    position:
        absolute;

    left:
        3px;

    top:
        6px;

    width:
        9px;

    height:
        2px;

    background:
        #d0d7d3;

    transform:
        rotate(-35deg);

}


.crusher-mini::after {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    background:
        repeating-linear-gradient(
            90deg,
            #bbb 0 2px,
            #333 2px 4px
        );

}


.smelter-mini {

    border-color:
        #86552f;

    background:
        #4d3425;

}


.smelter-mini::after {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    background:
        #ff7d22;

    box-shadow:
        0 0 4px
        #ff7620;

}


.crafter-mini::after {

    content:
        "";

    position:
        absolute;

    inset:
        3px;

    border:
        2px dashed
        #bbb;

    border-radius:
        50%;

}


.chest-mini {

    border-color:
        #a8712d;

    background:
        linear-gradient(
            #a16b2b 0 44%,
            #4d2e10 44% 56%,
            #7d5120 56%
        );

}


/* =====================================================
   MODAL OVERLAY
===================================================== */

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter:
        blur(7px);

}


.modal-overlay.open {

    display:
        flex;

    animation:
        modalFadeIn
        0.18s ease;

}


@keyframes modalFadeIn {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}


/* =====================================================
   MODAL CARD
===================================================== */

.modal-card {

    position:
        relative;

    width:
        min(
            100%,
            540px
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        27px;

    border:
        2px solid
        #4d7458;

    border-radius:
        6px;

    background:
        linear-gradient(
            145deg,
            #172f20,
            #08150e
        );

    box-shadow:

        0 25px 70px
        rgba(0, 0, 0, 0.68),

        inset
        0 0 0 2px
        rgba(255, 255, 255, 0.02);

}


.modal-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #62dc6d,
            transparent 80%
        );

}


.large-modal {

    width:
        min(
            100%,
            740px
        );

}


.inventory-modal {

    width:
        min(
            100%,
            780px
        );

}


.modal-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        21px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid
        #2a4934;

}


.modal-label {

    margin-bottom:
        4px;

    color:
        #65df70;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.modal-header h2 {

    font-size:
        26px;

}


.close-btn {

    flex:
        0 0 38px;

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    cursor:
        pointer;

    border:
        1px solid
        #884747;

    border-radius:
        3px;

    color:
        #ffd4d4;

    background:
        linear-gradient(
            #6d2929,
            #411717
        );

    font-size:
        25px;

    transition:
        filter 0.15s ease;

}


.close-btn:hover {

    filter:
        brightness(1.2);

}


/* =====================================================
   SETTINGS
===================================================== */

.settings-list {

    display:
        grid;

    gap:
        10px;

}


.setting-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        14px;

    border:
        1px solid
        #30523b;

    background:
        rgba(0, 0, 0, 0.16);

}


.setting-description {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.setting-description strong {

    font-size:
        13px;

}


.setting-description p {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        10px;

}


.settings-row-icon {

    position:
        relative;

    flex:
        0 0 32px;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        #3d6549;

    background:
        #0e2318;

}


/* SOUND ICON */

.sound-setting-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        6px;

    top:
        10px;

    width:
        6px;

    height:
        11px;

    background:
        #c9d4cc;

}


.sound-setting-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        12px;

    top:
        7px;

    border-top:
        9px solid
        transparent;

    border-bottom:
        9px solid
        transparent;

    border-left:
        10px solid
        #c9d4cc;

}


/* MUSIC */

.music-setting-icon::before {

    content:
        "♪";

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        #72df7c;

    font-size:
        20px;

    font-weight:
        900;

}


/* EFFECTS */

.effects-setting-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        14px;

    top:
        5px;

    width:
        4px;

    height:
        22px;

    background:
        #ebc64d;

    box-shadow:

        7px 7px 0 -1px
        #ebc64d,

        -7px 7px 0 -1px
        #ebc64d;

}


/* TOGGLE */

.toggle-btn {

    min-width:
        64px;

    padding:
        9px;

    cursor:
        pointer;

    border:
        1px solid
        #78413d;

    border-radius:
        3px;

    color:
        white;

    background:
        #5a2d29;

    font-size:
        10px;

    font-weight:
        900;

}


.toggle-btn.active {

    border-color:
        #68c571;

    background:
        linear-gradient(
            #307c39,
            #1b5925
        );

}


/* =====================================================
   STATISTICS
===================================================== */

.statistics-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        10px;

}


.stat-card {

    position:
        relative;

    min-height:
        145px;

    padding:
        17px;

    overflow:
        hidden;

    border:
        1px solid
        #355940;

    background:
        linear-gradient(
            #162f20,
            #0c1e14
        );

    text-align:
        center;

}


.stat-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        3px;

    background:
        #4fa45a;

}


.stat-card p {

    margin-top:
        9px;

    color:
        #93a598;

    font-size:
        10px;

}


.stat-card strong {

    display:
        block;

    margin-top:
        8px;

    color:
        #f2ca50;

    font-size:
        22px;

}


.stat-visual {

    position:
        relative;

    display:
        block;

    width:
        38px;

    height:
        38px;

    margin:
        auto;

    border:
        1px solid
        #436a4e;

    background:
        #0e2317;

}


/* ITEM STAT */

.item-stat-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        2px solid
        #ac7735;

    background:
        #8f5b27;

}


/* MACHINE STAT */

.machine-stat-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        4px dashed
        #a2aca6;

    border-radius:
        50%;

}


/* COIN STAT */

.coin-stat-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        3px solid
        #f1cc50;

    border-radius:
        50%;

    background:
        #9c7615;

}


/* TIME STAT */

.time-stat-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        2px solid
        #a0aca4;

    border-radius:
        50%;

}


.time-stat-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        18px;

    top:
        10px;

    width:
        2px;

    height:
        10px;

    background:
        #a0aca4;

    transform:
        rotate(30deg);

    transform-origin:
        bottom;

}


/* EFFICIENCY STAT */

.efficiency-stat-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        7px;

    bottom:
        8px;

    width:
        22px;

    height:
        16px;

    border-left:
        2px solid
        #60da6c;

    border-bottom:
        2px solid
        #60da6c;

    transform:
        skewY(-25deg);

}


/* RATING */

.rating-stat-icon::before {

    content:
        "A";

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        #f0c94d;

    font-size:
        22px;

    font-weight:
        900;

}


/* =====================================================
   INVENTORY HEADER
===================================================== */

.inventory-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;

    padding:
        10px;

    border:
        1px solid
        #30523b;

    background:
        #0d2116;

}


.inventory-header-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.inventory-header-info span {

    color:
        #a8b7ab;

    font-size:
        10px;

    font-weight:
        700;

}


.inventory-header-info strong {

    color:
        #64df70;

    font-size:
        9px;

}


/* =====================================================
   SELL ALL PRODUCTS
===================================================== */

.inventory-sell-all-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        39px;

    padding:
        8px 14px;

    cursor:
        pointer;

    border:
        1px solid
        #c79620;

    border-radius:
        3px;

    color:
        #fff0a8;

    background:
        linear-gradient(
            #9e7010,
            #634407
        );

    box-shadow:
        0 3px 0
        rgba(0, 0, 0, 0.3);

    font-size:
        10px;

    font-weight:
        800;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;

}


.inventory-sell-all-btn:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.15);

}


.inventory-sell-all-btn:disabled {

    cursor:
        not-allowed;

    opacity:
        0.4;

    transform:
        none;

}


.sell-all-icon {

    position:
        relative;

    width:
        14px;

    height:
        14px;

    border:
        2px solid
        #ffe16b;

    border-radius:
        50%;

    background:
        #916c12;

}


/* =====================================================
   INVENTORY GRID
===================================================== */

#inventoryList {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

    width:
        100%;

}


/* =====================================================
   INVENTORY RESOURCE CARD
===================================================== */

.resource-inventory-card {

    position:
        relative;

    min-width:
        0;

    padding:
        13px;

    overflow:
        hidden;

    border:
        1px solid
        #385c43;

    border-radius:
        3px;

    background:
        linear-gradient(
            145deg,
            #163020,
            #0b1d13
        );

    box-shadow:

        inset
        0 1px
        rgba(255, 255, 255, 0.04),

        0 5px 12px
        rgba(0, 0, 0, 0.14);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;

}


.resource-inventory-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #5e906a;

}


.resource-inventory-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #50cb5d,
            transparent
        );

}


/* =====================================================
   RESOURCE CARD TOP
===================================================== */

.resource-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


/* =====================================================
   RESOURCE CUBE
===================================================== */

.resource-cube {

    position:
        relative;

    flex:
        0 0 43px;

    width:
        43px;

    height:
        43px;

    border:
        2px solid
        var(--resource-light);

    background:
        var(--resource-color);

    box-shadow:

        inset
        7px 7px 0
        rgba(255, 255, 255, 0.12),

        inset
        -7px -7px 0
        rgba(0, 0, 0, 0.22),

        3px 3px 0
        rgba(0, 0, 0, 0.3);

}


.resource-cube::after {

    content:
        "";

    position:
        absolute;

    right:
        5px;

    bottom:
        5px;

    width:
        8px;

    height:
        8px;

    background:
        rgba(0, 0, 0, 0.15);

}


.resource-cube span {

    position:
        absolute;

    top:
        6px;

    left:
        6px;

    width:
        12px;

    height:
        7px;

    background:
        var(--resource-light);

    opacity:
        0.7;

}


/* =====================================================
   RESOURCE COUNT
===================================================== */

.resource-card-count {

    text-align:
        right;

}


.resource-card-count small {

    display:
        block;

    color:
        #71897a;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.resource-card-count strong {

    display:
        block;

    margin-top:
        2px;

    color:
        white;

    font-size:
        22px;

}


/* =====================================================
   RESOURCE INFO
===================================================== */

.resource-card-info {

    margin-top:
        11px;

}


.resource-card-info h3 {

    overflow:
        hidden;

    color:
        #eef4ef;

    font-size:
        12px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* =====================================================
   INVENTORY BADGES
===================================================== */

.inventory-resource-badge,
.inventory-product-badge {

    display:
        inline-block;

    margin-top:
        6px;

    padding:
        3px 6px;

    border:
        1px solid
        #436a4e;

    color:
        #80bb8b;

    background:
        #0e2518;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        0.7px;

}


.inventory-product-badge {

    border-color:
        #a07a26;

    color:
        #f1cc58;

    background:
        #342809;

}


/* =====================================================
   RESOURCE VALUE
===================================================== */

.resource-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        7px;

    margin-top:
        11px;

    padding-top:
        8px;

    border-top:
        1px solid
        #2c4b36;

    color:
        #74897a;

    font-size:
        8px;

}


.resource-card-footer strong {

    color:
        #ebc64e;

    font-size:
        9px;

}


/* =====================================================
   INVENTORY ACTION BUTTONS
===================================================== */

.inventory-card-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px;

    margin-top:
        11px;

}


.inventory-card-actions button {

    min-height:
        35px;

    padding:
        6px;

    cursor:
        pointer;

    border-radius:
        3px;

    color:
        white;

    font-size:
        8px;

    font-weight:
        900;

    transition:
        transform 0.12s ease,
        filter 0.12s ease;

}


.inventory-card-actions button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.2);

}


.inventory-sell-btn {

    border:
        1px solid
        #68c272;

    background:
        linear-gradient(
            #347d3e,
            #1e5728
        );

}


.inventory-trash-btn {

    border:
        1px solid
        #be5050;

    background:
        linear-gradient(
            #7c2d2d,
            #491818
        );

}


/* =====================================================
   EMPTY INVENTORY
===================================================== */

.inventory-empty {

    grid-column:
        1 / -1;

    padding:
        40px 20px;

    text-align:
        center;

    border:
        1px dashed
        #34573e;

    background:
        rgba(0, 0, 0, 0.14);

}


.inventory-empty::before {

    content:
        "";

    display:
        block;

    width:
        55px;

    height:
        42px;

    margin:
        0 auto 15px;

    border:
        2px solid
        #815a27;

    background:
        linear-gradient(
            #9c682b 0 44%,
            #573513 44% 56%,
            #7c5020 56%
        );

    opacity:
        0.7;

}


.inventory-empty h3 {

    color:
        white;

    font-size:
        15px;

}


.inventory-empty p {

    max-width:
        360px;

    margin:
        7px auto 0;

    color:
        #7f9384;

    font-size:
        10px;

    line-height:
        1.5;

}


/* =====================================================
   UPGRADES
===================================================== */

.upgrade-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        10px;

}


.upgrade-card {

    position:
        relative;

    padding:
        16px;

    border:
        1px solid
        #355a40;

    background:
        linear-gradient(
            #162f20,
            #0c1d13
        );

}


.upgrade-card h3 {

    margin-top:
        9px;

    font-size:
        15px;

}


.upgrade-card p {

    min-height:
        31px;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

}


.upgrade-card strong {

    display:
        block;

    margin:
        9px 0;

    color:
        #6be076;

    font-size:
        11px;

}


.upgrade-card button {

    width:
        100%;

    padding:
        9px;

    cursor:
        pointer;

    border:
        1px solid
        #5b8b66;

    border-radius:
        3px;

    color:
        white;

    background:
        linear-gradient(
            #33713f,
            #20562b
        );

    font-size:
        10px;

    font-weight:
        800;

}


.upgrade-card button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.45;

}


/* =====================================================
   UPGRADE GRAPHICS
===================================================== */

.upgrade-visual {

    position:
        relative;

    display:
        block;

    width:
        41px;

    height:
        41px;

    border:
        1px solid
        #41664b;

    background:
        #0e2317;

}


.belt-upgrade-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        15px;

    width:
        29px;

    height:
        10px;

    border:
        2px solid
        #758079;

    background:
        repeating-linear-gradient(
            90deg,
            #333c37 0 5px,
            #69726d 5px 8px
        );

}


.miner-upgrade-icon::before {

    content:
        "";

    position:
        absolute;

    left:
        7px;

    top:
        19px;

    width:
        28px;

    height:
        4px;

    background:
        #c5cec8;

    transform:
        rotate(-40deg);

}


.storage-upgrade-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        2px solid
        #ad7937;

    background:
        linear-gradient(
            #9d692d 0 44%,
            #533313 44% 56%,
            #7d5122 56%
        );

}


.power-upgrade-icon::before {

    content:
        "";

    position:
        absolute;

    top:
        5px;

    left:
        13px;

    width:
        14px;

    height:
        29px;

    background:
        #ebce48;

    clip-path:
        polygon(
            55% 0,
            100% 0,
            68% 42%,
            100% 42%,
            20% 100%,
            42% 57%,
            0 57%
        );

}


.production-upgrade-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        5px dashed
        #9fa9a3;

    border-radius:
        50%;

}


/* =====================================================
   HELP
===================================================== */

.help-content {

    display:
        grid;

    gap:
        8px;

}


.help-step {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        10px;

    border:
        1px solid
        #30533b;

    background:
        rgba(0, 0, 0, 0.14);

}


.help-step > span {

    flex:
        0 0 27px;

    display:
        grid;

    place-items:
        center;

    width:
        27px;

    height:
        27px;

    border:
        1px solid
        #5cd069;

    color:
        #66e071;

    background:
        #0f291a;

    font-size:
        11px;

    font-weight:
        900;

}


.help-step p {

    color:
        #bcc8bf;

    font-size:
        11px;

    line-height:
        1.4;

}


.help-tip {

    margin-top:
        6px;

    padding:
        11px;

    border-left:
        3px solid
        #d8b33f;

    color:
        #c4cdc6;

    background:
        rgba(99, 72, 10, 0.17);

    font-size:
        10px;

}


kbd {

    padding:
        2px 6px;

    border:
        1px solid
        #718077;

    border-bottom:
        2px solid
        #718077;

    background:
        #14241a;

    color:
        white;

}


/* =====================================================
   CHALLENGE RESULT
===================================================== */

.challenge-result {

    text-align:
        center;

}


.challenge-result-badge {

    width:
        59px;

    height:
        59px;

    margin:
        0 auto 14px;

    border:
        3px solid
        #e8c14a;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            #8d6911,
            #473307
        );

    box-shadow:
        0 0 20px
        rgba(232, 193, 74, 0.25);

}


.challenge-result-badge::before {

    content:
        "";

    display:
        block;

    width:
        18px;

    height:
        24px;

    margin:
        14px auto 0;

    border:
        4px solid
        #f0d15e;

    border-top-width:
        7px;

    border-radius:
        3px 3px 10px 10px;

}


.challenge-result h2 {

    margin-bottom:
        18px;

    font-size:
        28px;

}


.result-rating {

    display:
        block;

    margin:
        12px 0;

    color:
        var(--gold);

    font-size:
        54px;

    font-weight:
        900;

    text-shadow:
        3px 3px 0
        #4a3406;

}


.result-line {

    margin-top:
        6px;

    color:
        #bdc8c0;

    font-size:
        11px;

}


/* =====================================================
   CONFIRM WINDOW
===================================================== */

.confirm-card {

    width:
        min(
            92%,
            470px
        );

    padding:
        31px;

    border-color:
        #785e30;

    text-align:
        center;

}


.confirm-card::before {

    background:
        linear-gradient(
            90deg,
            #e3b541,
            transparent 80%
        );

}


.confirm-warning {

    display:
        grid;

    place-items:
        center;

    width:
        67px;

    height:
        67px;

    margin:
        0 auto 17px;

    border:
        2px solid
        #ebbf4b;

    background:
        linear-gradient(
            #a1791d,
            #604407
        );

    box-shadow:
        0 0 22px
        rgba(232, 188, 67, 0.2);

    transform:
        rotate(45deg);

}


.confirm-warning span {

    color:
        #fff0ad;

    font-size:
        30px;

    font-weight:
        900;

    transform:
        rotate(-45deg);

}


.confirm-card h2 {

    margin-bottom:
        10px;

    font-size:
        25px;

}


#confirmMessage {

    max-width:
        370px;

    margin:
        0 auto 23px;

    color:
        #afbbb2;

    font-size:
        11px;

    line-height:
        1.6;

}


.confirm-buttons {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

}


.confirm-buttons button {

    min-height:
        47px;

    cursor:
        pointer;

    border-radius:
        3px;

    color:
        white;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;

}


.confirm-buttons button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.16);

}


.confirm-cancel-btn {

    border:
        1px solid
        #526e5a;

    background:
        linear-gradient(
            #273f2f,
            #14261a
        );

}


.confirm-action-btn {

    border:
        1px solid
        #df5959;

    background:
        linear-gradient(
            #aa3939,
            #682020
        );

}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;

}


::-webkit-scrollbar-track {

    background:
        #061009;

}


::-webkit-scrollbar-thumb {

    border:
        2px solid
        #061009;

    background:
        #365b40;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #4e7758;

}


/* =====================================================
   TABLET / SMALL LAPTOP
===================================================== */

@media (
    max-width: 1100px
) {

    #factoryLayout {

        grid-template-columns:

            200px

            minmax(
                390px,
                1fr
            );

        grid-template-areas:

            "builder canvas"

            "controls canvas";

    }


    #buildPanel {

        grid-area:
            builder;

    }


    #canvasArea {

        grid-area:
            canvas;

    }


    #factoryControls {

        grid-area:
            controls;

    }


    .production-guide {

        display:
            none;

    }


    #hud {

        overflow-x:
            auto;

    }


    .hud-stat {

        flex:
            0 0 105px;

    }

}


/* =====================================================
   TABLET PORTRAIT
===================================================== */

@media (
    max-width: 760px
) {

    #factoryLayout {

        display:
            flex;

        flex-direction:
            column;

        padding:
            7px;

    }


    #canvasArea {

        order:
            1;

    }


    #buildPanel {

        order:
            2;

    }


    #factoryControls {

        order:
            3;

    }


    .tool-grid {

        grid-template-columns:
            repeat(
                4,
                1fr
            );

    }


    .control-buttons {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    #factoryCanvas {

        min-height:
            335px;

        aspect-ratio:
            auto;

    }


    #hud {

        gap:
            5px;

        padding:
            5px;

    }


    .hud-icon-button {

        flex:
            0 0 44px;

        min-height:
            48px;

    }


    .hud-stat {

        flex:
            0 0 98px;

    }


    #factoryStatusBar {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;

    }


    .statistics-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    #inventoryList {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =====================================================
   PHONE
===================================================== */

@media (
    max-width: 520px
) {

    #mainMenu {

        padding:
            10px;

    }


    .main-menu-card {

        padding:
            31px 15px 22px;

    }


    .logo-frame {

        width:
            64px;

        height:
            64px;

    }


    .logo-frame::before {

        height:
            76px;

    }


    .logo-frame::after {

        width:
            76px;

    }


    .logo-gear {

        width:
            38px;

        height:
            38px;

        border-width:
            6px;

    }


    .logo-gear span {

        inset:
            -10px;

        border-width:
            5px;

    }


    .academy-title {

        font-size:
            8px;

    }


    .main-menu-card h1 {

        font-size:
            36px;

    }


    .main-menu-card h1 span {

        font-size:
            27px;

    }


    .menu-subtitle {

        font-size:
            10px;

    }


    .main-btn {

        min-height:
            51px;

        font-size:
            12px;

    }


    .tool-grid {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


    .tool-btn {

        min-height:
            70px;

    }


    #factoryCanvas {

        min-height:
            295px;

    }


    .modal-overlay {

        align-items:
            flex-end;

        padding:
            7px;

    }


    .modal-card {

        max-height:
            92vh;

        padding:
            20px 13px;

        border-radius:
            5px 5px 2px 2px;

    }


    .statistics-grid,
    .upgrade-grid {

        grid-template-columns:
            1fr;

    }


    .inventory-header {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .inventory-sell-all-btn {

        width:
            100%;

    }


    .inventory-card-actions {

        grid-template-columns:
            1fr;

    }


    .setting-row {

        align-items:
            flex-start;

    }


    #challengeHud {

        flex-wrap:
            wrap;

        justify-content:
            center;

        text-align:
            center;

    }


    .confirm-buttons {

        grid-template-columns:
            1fr;

    }


    .confirm-action-btn {

        order:
            1;

    }


    .confirm-cancel-btn {

        order:
            2;

    }

}


/* =====================================================
   VERY SMALL PHONE
===================================================== */

@media (
    max-width: 365px
) {

    .tool-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    #inventoryList {

        grid-template-columns:
            1fr;

    }


    .control-buttons {

        grid-template-columns:
            1fr;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}