body {
    padding: 0;
    margin: 0;
}


.player h1 {
    font-size: calc(2 * var(--size-base));
    text-align: center;
    background-color: #ccc;
    color: black;
    padding: var(--size-base);
    margin: 0 calc(-1 * var(--size-base)) var(--size-base) calc(-1 * var(--size-base));
    text-transform: uppercase;
    letter-spacing: calc(0.2 * var(--size-base));
    font-family: "Arial Black";
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}


.player input[type=text] {
    padding: calc(0.25 * var(--number-padding));
    font-size: calc(2.5 * var(--size-base));
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 0;
}

    .player input[type=text]:focus {
        outline-width: 0;
    }


.player .sheet {
    max-width: calc(38 * var(--size-base));
    margin: 0 auto;
    position: relative;
    display: block;
    border: var(--size-base) solid var(--border-color);
    padding: 0 var(--size-base) var(--size-base) var(--size-base);
    background-color: #f2f2f2;
}

    .player .sheet .resources {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }


.player span[data-add] {
    display: none;
}

.player input {
    user-select: none;
    pointer-events: none;
}

.player .sheet .resource {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: calc(3 * var(--size-base));
    border: calc(0.25 * var(--size-base)) solid var(--border-color);
    border-radius: calc(0.5 * var(--size-base));
    margin-bottom: var(--size-base);
    background-color: white;
    padding: var(--size-base);
}

    .player .sheet .resource.tr .production {
        background: white;
        margin-left: calc(-2.5 * var(--size-base));
    }

.player .sheet .production {
    background: chocolate url("production.png") repeat;
    padding: calc(2 * var(--size-base));
    padding-left: calc(1 * var(--size-base));
    width: calc(8 * var(--size-base));
    margin: calc(-1 * var(--size-base)) 0;
}

    .player .sheet .production input {
        max-width: calc(4 * var(--size-base));
    }


.player .sheet .resource .icon {
    display: flex;
    align-items: center;
    text-align: center;
    margin-left: calc(1 * var(--size-base));
    margin-right: calc(-1 * var(--size-base));
}

.player .sheet .resource img {
    height: calc(5.5 * var(--size-base));
    align-self: center;
}

.player .sheet .resource.money img {
    box-shadow: none;
}

.player .sheet .resource .value {
    display: flex;
    align-items: center;
}

    .player .sheet .resource .value input {
        width: calc(11 * var(--size-base));
        height: calc(5 * var(--size-base));
        border: none;
        font-size: calc(3.5 * var(--size-base));
        background-color: white;
    }


.player .sheet .resource .value,
.player .sheet .resource .production {
    position: relative;
}

.player .resource .value > span,
.player .sheet .production span {
    display: inline-block;
    margin-left: calc(0.2 * var(--size-base));
    margin-bottom: calc(0.2 * var(--size-base));
    font-family: monospace;
    border: 1px solid var(--border-color);
    border-radius: calc(0.4 * var(--size-base));
    cursor: pointer;
    padding: calc(0.5 * var(--size-base));
    font-size: calc(1.5 * var(--size-base));
    user-select: none; /* Prevents select text on double click */
}

.player .resource .value > span,
.player .sheet .production span {
    position: absolute;
    right: 0;
    background-color: white;
    border: none;
    border-radius: 0;
    opacity: 0.4;
    box-sizing: border-box;
    height: calc(3.1 * var(--size-base));
    width: calc(3.1 * var(--size-base));
    padding: calc(0.5 * var(--size-base));
    padding-top: calc(1 * var(--size-base));
}

    .player .resource .value > span:nth-of-type(1) {
        top: calc(-0.5 * var(--size-base));
    }

    .player .sheet .production span:nth-of-type(1) {
        top: 0;
    }

    .player .resource .value > span:nth-of-type(2) {
        bottom: calc(-0.5 * var(--size-base));
        z-index: 120;
    }

    .player .sheet .production span:nth-of-type(2) {
        bottom: calc(-0.3 * var(--size-base));
    }


/* READONLY MODE (MONITOR) */

.player .sheet.readonly .resource .value > span,
.player .sheet.readonly .production span {
    display: none;
}

.player .sheet.readonly .production {
    display: flex;
    place-content: center;
    padding-left: calc(1.8 * var(--size-base));
}