@font-face { font-family: Stardew; src: url('./fonts/StardewValley.ttf'); }


/* Window */
html,
body {
    /* Size */
    width: 100%;
    height: 100%;

    /* Spacing */
    margin: 0;
    padding: 0;

    /* Layout */
    position: relative;
    overflow: hidden;

    /* Visuals */
    border: none;
    image-rendering: pixelated;

    /* Text */
    font-family: Stardew;
    color: var(--text);
    font-size: 19px;
    user-select: none;

    /* Vars */
    --scale: 1;
    --text: #551215;
}

body[hide] {
    display: none;
}

body[cursor="none"] {
    cursor: none;
}


  /*$$$$$
 /$$__  $$
| $$  \__/  /$$$$$$  /$$$$$$/$$$$   /$$$$$$
| $$ /$$$$ |____  $$| $$_  $$_  $$ /$$__  $$
| $$|_  $$  /$$$$$$$| $$ \ $$ \ $$| $$$$$$$$
| $$  \ $$ /$$__  $$| $$ | $$ | $$| $$_____/
|  $$$$$$/|  $$$$$$$| $$ | $$ | $$|  $$$$$$$
 \______/  \_______/|__/ |__/ |__/ \______*/

/* Background */
#background,
#background[background="grass"] {
    /* Size */
    width: calc(100% / var(--scale));
    height: calc(100% / var(--scale));

    /* Visuals */
    background-repeat: repeat;
    background: url(./sprites/backgrounds/grass.png);

    /* Other */
    transform-origin: 0% 0%;
    transform: scale(var(--scale));
    pointer-events: none;
}

#background[background="sand"] {
    background: url(./sprites/backgrounds/sand.png);
}

#background[background="dirt"] {
    background: url(./sprites/backgrounds/dirt.png);
}

#background[background="snow"] {
    background: url(./sprites/backgrounds/snow.png);
}

/* Game canvas */
#canvas {
    /* Layout */
    position: absolute;
    top: 0;
    bottom: 0;

    /* Other */
    transform-origin: 0% 0%;
}

/* Hidden canvas */
#canvasHidden {
    /* Layout */
    display: none;
}


 /*$      /$$
| $$$    /$$$
| $$$$  /$$$$  /$$$$$$   /$$$$$$$ /$$$$$$$  /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$$
| $$ $$/$$ $$ /$$__  $$ /$$_____//$$_____/ |____  $$ /$$__  $$ /$$__  $$ /$$_____/
| $$  $$$| $$| $$$$$$$$|  $$$$$$|  $$$$$$   /$$$$$$$| $$  \ $$| $$$$$$$$|  $$$$$$
| $$\  $ | $$| $$_____/ \____  $$\____  $$ /$$__  $$| $$  | $$| $$_____/ \____  $$
| $$ \/  | $$|  $$$$$$$ /$$$$$$$//$$$$$$$/|  $$$$$$$|  $$$$$$$|  $$$$$$$ /$$$$$$$/
|__/     |__/ \_______/|_______/|_______/  \_______/ \____  $$ \_______/|_______/
                                                     /$$  \ $$
                                                    |  $$$$$$/
                                                     \_____*/

#messages {
    /* Size */
    width: 100%;
    height: 100%;

    /* Layout */
    position: absolute;
    top: 0;
    left: 0;

    /* Other */
    pointer-events: none;
}

.message {
    /* Layout */
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;

    /* Text */
    --border: #ffd889bd;
    text-shadow: -1px -1px 1px var(--border), 1px -1px 1px var(--border), -1px 1px 1px var(--border), 1px 1px 1px var(--border);

    /* Other */
    animation: message 2s ease-out;
    pointer-events: none;
}

.message[long] {
    /* Other */
    animation: message 3s ease-out;
}

@keyframes message {
    0% {
        top: 25px;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    to {
        top: 5px;
        opacity: 0;
    }
}


 /*$      /$$
| $$$    /$$$
| $$$$  /$$$$  /$$$$$$  /$$$$$$$  /$$   /$$  /$$$$$$$
| $$ $$/$$ $$ /$$__  $$| $$__  $$| $$  | $$ /$$_____/
| $$  $$$| $$| $$$$$$$$| $$  \ $$| $$  | $$|  $$$$$$
| $$\  $ | $$| $$_____/| $$  | $$| $$  | $$ \____  $$
| $$ \/  | $$|  $$$$$$$| $$  | $$|  $$$$$$/ /$$$$$$$/
|__/     |__/ \_______/|__/  |__/ \______/ |______*/

#menus {
    /* Size */
    width: 100%;
    height: 100%;

    /* Layout */
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* Decoration */
    background-color: rgba(0, 0, 0, 0.25);
}

#menus[show] {
    /* Layout */
    display: flex;
}

.menu {
    /* Size */
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);

    /* Layout */
    position: relative;
    display: none;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    
    /* Decoration */
    border: 20px solid transparent;
    border-image-source: url('sprites/ui/menu.png');
    border-image-slice: 20 fill;
    border-image-repeat: stretch;
}

.menu[show] {
    /* Layout */
    display: flex;
}

.menu[button] {
    /* Size */
    width: max-content;
    height: max-content;
    max-width: unset;
    max-height: unset;

    /* Other */
    cursor: pointer;
}

.menu[button] > span {
    /* Spacing */
    margin: -8px -4px;
}

.menuContent {
    /* Spacing */
    margin: -4px;

    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menuContent[scrollable] {
    /* Spacing */
    padding-right: 5px;

    /* Visuals */
    scrollbar-color: var(--text) transparent;

    /* Other */
    overflow-y: scroll;
    overflow-x: auto;
}

.menuButton {
    /* Spacing */
    padding: 5px;

    /* Layout */
    display: flex;
    align-items: center;
    gap: 8px;

    /* Visuals */
    border-radius: 5px;

    /* Other */
    cursor: pointer;
    transition: background-color .1s;
}

.menuButton:hover {
    /* Visuals */
    background-color: #55121530;
}

.menuButton > img {
    /* Size */
    width: 20px;
    height: 20px;

    /* Visuals */
    border-radius: 5px;
}

.menuButton > span {
    /* Layout */
    flex: 1;
}

/* Store menu */
.storeButton > div {
    /* Size */
    width: 50px;
    height: 50px;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
}

.storeButton > div > div {
    --image: url('./sprites/decoration.png');
    --width: 30px;
    --height: 30px;
    --scale: 1;
    --spriteOffset: -0px -0px;

    /* Size */
    width: var(--width);
    height: var(--height);

    /* Spacing */
    margin: calc(-1 * var(--height)) calc(-1 * var(--width));

    /* Visuals */
    background-image: var(--image);
    background-repeat: no-repeat;
    background-position: var(--spriteOffset);
    scale: var(--scale);
    image-rendering: unset;
}

.storeButtonMoney {
    /* Text */
    font-size: 17px;
    color: #c0640d;
}

.storeButtonMoney[expensive] {
    /* Text */
    color: #c0220d;
}

/* Money menu */
#money {
    /* Layout */
    position: absolute;
    top: 0;
    right: 0;

    /* Other */
    cursor: unset;
}


 /*$$$$$$                                                     /$$     /$$
| $$__  $$                                                   | $$    |__/
| $$  \ $$  /$$$$$$   /$$$$$$$  /$$$$$$   /$$$$$$  /$$$$$$  /$$$$$$   /$$  /$$$$$$  /$$$$$$$
| $$  | $$ /$$__  $$ /$$_____/ /$$__  $$ /$$__  $$|____  $$|_  $$_/  | $$ /$$__  $$| $$__  $$
| $$  | $$| $$$$$$$$| $$      | $$  \ $$| $$  \__/ /$$$$$$$  | $$    | $$| $$  \ $$| $$  \ $$
| $$  | $$| $$_____/| $$      | $$  | $$| $$      /$$__  $$  | $$ /$$| $$| $$  | $$| $$  | $$
| $$$$$$$/|  $$$$$$$|  $$$$$$$|  $$$$$$/| $$     |  $$$$$$$  |  $$$$/| $$|  $$$$$$/| $$  | $$
|_______/  \_______/ \_______/ \______/ |__/      \_______/   \___/  |__/ \______/ |__/  |_*/

#decor {
    /* Size */
    width: 100%;
    height: 100%;

    /* Layout */
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    gap: 5px;

    /* Other */
    pointer-events: none;
}

#decor[show] {
    /* Layout */
    display: flex;
}

#decor > span {
    /* Layout */
    margin: 0 10px;

    /* Text */
    --border: #ffd889bd;
    text-shadow: -1px -1px 1px var(--border), 1px -1px 1px var(--border), -1px 1px 1px var(--border), 1px 1px 1px var(--border);
}

.decorButtons {
    /* Layout */
    display: flex;
    gap: 5px;

    /* Other */
    pointer-events: auto;
}


  /*$$$$$
 /$$__  $$
| $$  \__/ /$$   /$$  /$$$$$$   /$$$$$$$  /$$$$$$   /$$$$$$
| $$      | $$  | $$ /$$__  $$ /$$_____/ /$$__  $$ /$$__  $$
| $$      | $$  | $$| $$  \__/|  $$$$$$ | $$  \ $$| $$  \__/
| $$    $$| $$  | $$| $$       \____  $$| $$  | $$| $$
|  $$$$$$/|  $$$$$$/| $$       /$$$$$$$/|  $$$$$$/| $$
 \______/  \______/ |__/      |_______/  \______/ |_*/

#cursor {
    --size: 9px;
    --bg-pos-x: 0;
    --bg-pos-y: 0;

    width: var(--size);
    height: var(--size);

    position: absolute;
    top: 0;
    left: 0;

    background-image: url(./sprites/emotes.png);
    background-position-x: var(--bg-pos-x);
    background-position-y: var(--bg-pos-y);

    transform: scale(var(--scale)) translateX(calc(-0.25 * var(--size))) translateY(calc(-0.25 * var(--size)));

    pointer-events: none;
    opacity: 0;
}

#cursor[icon="gift"] {
    --bg-pos-x: calc(-12 * var(--size));
    --bg-pos-y: calc(-10 * var(--size));
    opacity: 1;
}

#cursor[icon="ball"] {
    --bg-pos-x: calc(-3 * var(--size));
    --bg-pos-y: calc(-9 * var(--size));
    opacity: 1;
}