@font-face {
    font-family: 'PressStart2P';
    src: url('./assets/fonts/PressStart2P.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Silkscreen';
    src: url('./assets/fonts/Silkscreen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg: #1b1b19;
    --black: #282a35;
    --grey: #bcba90;
    --red: #a81134;
    --orange: #d86f3e;
    --orangeRed: #e63f1e;
    --blue: #00a6f2;
    --lightBlue: #65b3d0;
    --green: #70ac4c;
    --white: #d4d4d4;
    --yellow: #d7a53d;  
    --ap: #48cafc;
    --mp: #11dfb9;
    --atk: #e43b3a;
    --spa: #fedb32;
    --spe: #c066d6;
    --crt: #cb3938;
    --crtDmg: #db870e;
    --res: #b4b4b4;

    --cha: #d7ad0c;
    --elu: #909b29;
    --poi: #defeb4;
    --ero: #d3ad79;
    --bur: #ff6d01;
    --wet: #7ed1fe;
    --hea: #f2531f;
    --fea: #8c71fe;
    --fra: #a33518;
}

* {
    cursor: url('./assets/images/misc/cursor.png') 0 0, auto;
}

html, body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
    user-select: none;
    margin: 0;
    padding: 0;

    font-family: "PressStart2P", sans-serif;
    font-weight: 400;
    font-style: normal;

    background: #14161a;
}

input {
    all: unset;
    box-sizing: border-box;
    cursor: url('./assets/images/misc/cursor-input.png') 0 0, pointer;;
}

#screen {
    position: absolute;
    width: 800px;
    height: 576px;
    background: black;
    box-shadow:  0 0 60px black;
    /* overflow: visible; 
    transform-origin: top left;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.stroke {
    text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.super-stroke {
    text-shadow:
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
     2px  0   0 #000,
     2px  2px 0 #000,
     0    2px 0 #000,
    -2px  2px 0 #000,
    -2px  0   0 #000;
}

.link-red {
    cursor: url('./assets/images/misc/cursor-pointer.png') 0 0, pointer;
    font-weight: 800;
    color: var(--red);
    text-decoration: none;
}

.link-blue {
    cursor: url('./assets/images/misc/cursor-pointer.png') 0 0, pointer;
    font-weight: 800;
    color: var(--blue);
    text-decoration: none;
}

#game-scene {
    position: absolute;
    width: 100%;
    height: 100%;
}

#game-scene-transition {
    position: absolute;
    right: 0px;
    top: 37px;
    bottom: 161px;
    width: 60%;
    background-color: black;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    width: 225px;
    height: auto;

    background: rgba(0, 0, 0, 0.85);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: opacity 0.2s ease;

    pointer-events: none;
    display: none;
    z-index: 9999;
}

.tooltip-name {
    font-size: 14px;
    padding-bottom: 10px;
}

.tooltip-description {
    padding-top: 5px;
    font-size: 8px;
}

.tooltip-achievement {
    font-size: 8px;
    line-height: 18px;
}


@keyframes sceneTransition {
    0% { 
        opacity: 0;
        pointer-events: all;
    }
    50% { 
        opacity: 1;
        pointer-events: all;
    }
    100% { 
        opacity: 0;
        pointer-events: none;
    }
}

.red {
    color: #d21714;
}

.green {
    color: #9ce36f;
}

.blue {
    color: var(--blue);
}

.yellow {
    color: var(--yellow);
}

.grey {
    color: var(--grey);
}

.atk {
    color: var(--atk);
}

.spa {
    color: var(--spa);
}

.spe {
    color: var(--spe);
}

.res {
    color: var(--res);
}

.ap {
    color: var(--ap);
}

.mp {
    color: var(--mp);
}

.hp {
    color: #70ae4b;
}

.mix {
    color: #ff0083;
}

.crt {
    color: var(--crt);
}

.crtDmg {
    color: var(--crtDmg);
}

.poi {
   color: var(--poi);
}

.cha {
    color: var(--cha);
}

.elu {
    color: var(--elu);
}

.ero {
    color: var(--ero);
}

.bur {
    color: var(--bur);
}

.wet {
    color: var(--wet);
}

.hea {
    color: var(--hea);
}

.fea {
    color: var(--fea);
}

.fra {
    color: var(--fra);
}

.icon {
    width: 24px;
    height: 22px;
    vertical-align: -5px;
}

.tier-0::before {
    background: linear-gradient(135deg, #4a7c3d, #6fb55d);
}

/* Raro */
.tier-1::before {
    background: linear-gradient(135deg, #68abdd, #3d8bcc);
}

/* Épico */
.tier-2::before {
    background: linear-gradient(135deg, #bf75d3, #8c3aa8);
}

/* Legendario */
.tier-3::before {
    background: linear-gradient(135deg, #eda11f, #e85d04);
}