@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto+Slab:wght@200;400;700&family=Shadows+Into+Light&display=swap');
@font-face {
    font-family: 'No Continue';
    src: url('../font/gomarice_no_continue-webfont.woff2') format('woff2'),
         url('../font/gomarice_no_continue-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-head: 'Roboto Condensed', sans-serif;
    --font-body: 'Roboto Slab', sans-serif;
    --font-title: 'No Continue', sans-serif;
    --font-hand: 'Shadows Into Light', cursive;

    --color-light-gray: #ccc;
    --color-pencil-gray: #555;

    --nav-width: 300px;
    --menu-btn-width: 70px;

    --sheet-width: 1032px;
    --sheet-height: 727px;

    --bevel-corner: 32;
    --bevel-corner-small: 16;
}

body {
    /* background-color: rgba(42, 42, 46, 1); */
    user-select: none;

    &, & main, & div, & label {
        box-sizing: border-box;
    }
}

nav {
    position: fixed;
    z-index: 99;

    & > input {
        &:checked ~ .content {
            left: 0px;

            & > label[for="nav-toggle"] {
                margin-left: calc(var(--nav-width) - var(--menu-btn-width) - 10px);

                & > div > div {
                    width: 65%;

                    & > img {
                        transform: scaleX(-1);
                    }
                }
            }
        }

        &:checked ~ .screen { display: block; }
    }

    & > .screen { display: none; }

    & > .content {
        position: fixed;
        top: 0;
        left: calc(var(--nav-width) * -1 - 50px);
        transition: left 0.15s ease-out;
    
        height: 100vh;
        width: var(--nav-width);
        padding-top: calc(var(--menu-btn-width) + 30px);
        background-color: #fff;
        box-shadow: 1px 1px 10px #0004;

        & > label[for="nav-toggle"] {    
            position: fixed;
            top: 0;
            left: 0;
            width: var(--menu-btn-width);
            height: calc(var(--menu-btn-width) * 0.7);
            margin: 10px 0 0 10px;
            transition: margin-left 0.15s ease-out;
    
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;

            & > div {
                width: 100%;
                height: 100%;
                border-radius: 5px;
                border: 3px solid #000;
                background-color: #fff;

                & > div {
                    height: 100%;
                    width: 100%;
                    float: right;
                    border-left: 3px solid #000;
                    position: relative;
                    left: -3px;
                    padding-left: 3px;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;

                    transition: width 0.15s ease-out;

                    & > img {
                        padding-left: 2px;
                        height: 60%;
                        transform: scaleX(1);
                        transition: transform 0.15s ease-out;
                    }
                }
            }
        }

        & > img {
            width: 180px;
            margin: 20px calc((var(--nav-width) - 180px) / 2) 40px;
        }

        & > #menu {
            & > button,
            & > label {
                display: flex;
                align-items: center;
                justify-content: center;

                pointer-events: all;
                cursor: pointer;
                position: relative;
                width: 180px;
                height: 45px;
                padding: 3px 0;
                margin: 7px auto 7px;
                border: 1px solid #0008;
                border-bottom-width: 2px;
                border-radius: 15px;
                background: #fff;
                font-family: var(--font-head);
                font-size: 20px;
                letter-spacing: 1px;
    
                &:hover { background-color: #ddd; }
                &:active {
                    top: 1px;
                    border-bottom-width: 1px;
                }
            }
        }

        & > footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 10px;
            opacity: 0.6;
            transition: opacity 0.2s;

            &:hover {
                opacity: 1;
            }

            & > p {
                width: 100%;
                text-align: center;
                font-family: var(--font-body);
                font-size: 12px;
                margin: 3px;
                color: #444;

                & > a {
                    text-decoration: none;
                    color: #0d8c9c;
                }
            }
        }
    }
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--menu-btn-width);

    #sheet {
        --border-padding: 42px;
        --inner-padding: 13px;
        --logo-height: 47px;
        --logo-ratio: 2.718;
        --logo-width: calc(var(--logo-height) * var(--logo-ratio));
        --dotted-border: 2px dotted #666;
    
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: var(--sheet-width);
        height: var(--sheet-height);
        padding: var(--border-padding);
        background-color: #fff;
        box-shadow: 1px 1px 10px #0004;
        border-radius: 7px;
        
        & input,
        & textarea {
            font-family: var(--font-hand);
            color: var(--color-pencil-gray);
            background: transparent;
            border: none;
            padding: 0;
    
            scrollbar-color: #0003 transparent;
            scrollbar-width: thin;
    
            user-select: unset;
    
            &::-webkit-scrollbar { width: 8px; background: transparent; }
            &::-webkit-scrollbar-thumb { background: #0003; }
    
            &:focus {
                outline: none;
            }
    
            &::selection {
                background: #0002;
            }
        }
    
        & textarea {
            resize: none;
            border: none;
            padding: 0;
        }
    
        & > .header {
            display: flex;
            margin-bottom: var(--inner-padding);
    
            & > div {
                flex: auto;
                position: relative;
                display: flex;
                align-items: end;
                height: 47px;
                border-bottom: var(--dotted-border);
                padding-bottom: calc(var(--inner-padding) * 0.5);
        
                & > label {
                    font-family: var(--font-head);
                    font-weight: bold;
                    font-size: 24px;
                }
        
                & > input {
                    position: absolute;
                    bottom: -10px;
                    left: 73px;
                    height: 72px;
                    width: calc(100% - 73px);
                    font-size: 45px;
                    clip-path: polygon(0 15%, 0 85%, 100% 85%, 100% 15%);
    
                    &::placeholder {
                        font-family: var(--font-head);
                        color: var(--color-light-gray);
                        opacity: 0;
                    }
                }
            }
    
            & > img {
                height: var(--logo-height);
                margin-left: var(--inner-padding);
            }
        }
        
        & > .body {
            display: flex;
            gap: var(--inner-padding);
            height: calc(var(--sheet-height) - ((2 * var(--border-padding)) + var(--logo-height) + var(--inner-padding)));
    
            & .beveled {
                --bevel-border-width: 14px;
                --bevel-px: calc(var(--bevel-border-width) + 1.5px);
            
                position: relative;
    
                & > div { height: 100%; }
            
                & > .border { border: var(--bevel-border-width) solid; }
            
                &.all .border    { border-image: url('../img/bevel-all.png') var(--bevel-corner); }
                &.top .border    { border-image: url('../img/bevel-side-top.png') var(--bevel-corner); }
                &.bottom .border { border-image: url('../img/bevel-side-bottom.png') var(--bevel-corner); }
                &.left .border { border-image: url('../img/bevel-side-left.png') var(--bevel-corner); }
                &.right .border { border-image: url('../img/bevel-side-right.png') var(--bevel-corner); }
            
                &.all.small .border {
                    --bevel-border-width: 8px;
                    border-image: url('../img/bevel-all-small.png') var(--bevel-corner-small);
                }
            
                & > .content {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    padding: 1px;
                }
            
                &.all .content {
                    clip-path: polygon(
                        0 var(--bevel-px), var(--bevel-px) 0,
                        calc(100% - var(--bevel-px)) 0, 100% var(--bevel-px),
                        100% calc(100% - var(--bevel-px)), calc(100% - var(--bevel-px)) 100%,
                        var(--bevel-px) 100%, 0 calc(100% - var(--bevel-px)));
                }
                &.top .content {
                    clip-path: polygon(
                        0 var(--bevel-px), var(--bevel-px) 0,
                        calc(100% - var(--bevel-px)) 0, 100% var(--bevel-px),
                        100% 100%,
                        0 100%);
                }
                &.bottom .content {
                    clip-path: polygon(
                        0 0,
                        100% 0,
                        100% calc(100% - var(--bevel-px)), calc(100% - var(--bevel-px)) 100%,
                        var(--bevel-px) 100%, 0 calc(100% - var(--bevel-px)));
                }
                &.left .content {
                    clip-path: polygon(
                        0 var(--bevel-px), var(--bevel-px) 0,
                        100% 0,
                        100% 100%,
                        var(--bevel-px) 100%, 0 calc(100% - var(--bevel-px)));
                }
                &.right .content {
                    clip-path: polygon(
                        0 0,
                        calc(100% - var(--bevel-px)) 0, 100% var(--bevel-px),
                        100% calc(100% - var(--bevel-px)), calc(100% - var(--bevel-px)) 100%,
                        0 100%);
                }
                &.all.small .content {
                    --bevel-px: calc(var(--bevel-size-small) * 1px);
                }
            }
    
            & input {
                font-size: 45px;
                height: 72px;
                line-height: 0;
                position: absolute;
                text-align: center;
                clip-path: polygon(0 15%, 0 85%, 100% 85%, 100% 15%);
            }
    
            & > .stats {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: var(--inner-padding);
    
                & > .attributes,
                & > .health {
                    & > .content {
                        display: flex;
                        height: 100%;
    
                        & > div {
                            flex: 1;
                            display: flex;
                        }
    
                        & > .labels {
                            background: #000;
    
                            & > label {
                                flex: 1;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: #fff;
                                font-family: var(--font-head);
                                font-weight: bold;
                                font-size: 35px;
                                letter-spacing: 1px;
                            }
                        }
    
                        & > .fields {
                            display: flex;
    
                            & > div {
                                flex: 1;
                            }
                        }
                    }
                }
    
                & > .attributes {
                    flex: 2.2;
    
                    & > .content {
                        & > div {
                            flex-direction: column;
                        }
    
                        & > .fields > div {
                            &:nth-child(2),
                            &:last-child {
                                border-top: var(--dotted-border);
                            }
    
                            & > input {
                                width: calc(50% - 2px);
                                margin-top: -8px;
                            }
                        }
                    }
                }
    
                & > .health {
                    flex: 1.5;
    
                    & > .content {
                        flex-direction: column;
    
                        & > .labels > label:last-child {
                            font-size: 26px;
                            letter-spacing: 0;
                        }
    
                        & > .fields > div {
                            &:last-child {
                                border-left: var(--dotted-border);
                            }
    
                            & > input {
                                width: calc(50% - 2px);
                                margin-top: -7px;
                            }
                        }
                    }
                }
    
                & > .armor {
                    flex: 1.5;
    
                    & > .content {
                        display: flex;
                        flex-direction: column;
                        height: 100%;
    
                        & label,
                        & > span {
                            display: flex;
                            justify-content: center;
                            font-family: var(--font-head);
                            font-weight: bold;
                        }
    
                        & label {
                            font-size: 14px;
                            padding: 5px 0 0;
                        }
    
                        & span {
                            font-size: 26px;
                            letter-spacing: 1px;
                            padding: 0;
                        }
    
                        & > .fields {
                            flex: 1;
                            display: flex;
    
                            & > div {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
    
                                & > input {
                                    width: calc(50% - 2px);
                                    margin-top: 18px;
                                }
                            }
    
                            & > div:first-child {
                                border-right: var(--dotted-border);
                            }
                        }
                    }
                }
    
                & > .xp {
                    height: 130px;
                    display: flex;
                    flex-direction: column;
    
                    & > div {
                        flex: 1;
    
                        & > .content {
                            display: flex;
        
                            & > label {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: var(--font-head);
                                font-weight: bold;
                                font-size: 26px;
                                padding-left: 16px;
                            }
        
                            & > input {
                                --margin: 45px;
                                width: calc(100% - var(--margin) - 4px);
                                margin-top: 2px;
                                margin-left: var(--margin);
                            }
                        }
                    }
    
                    & > span {
                        display: block;
                        margin-top: var(--inner-padding);
                        text-align: center;
                        font-family: var(--font-head);
                        font-weight: bold;
                        letter-spacing: 0.5px;
                        color: var(--color-light-gray);
                    }
                }
            }
    
            & > .inventory {
                flex: 2;
    
                & > .content {
                    display: grid;
                    grid-template-rows: repeat(10, 1fr);
                    grid-template-columns: repeat(2, 1fr);
                    grid-auto-flow: column;
        
                    & > div {
                        display: flex;
                        border: var(--dotted-border);
                        border-right: none;
                        border-top: none;
                        min-width: 0;
    
                        & > label {
                            display: flex;
                            align-items: center;
                            width: 30px;
                            padding-left: 14px;
                            color: var(--color-light-gray);
                            font-family: var(--font-head);
                            font-weight: lighter;
                            font-size: 23px;
                            letter-spacing: -2px;
                        }
    
                        & > textarea {
                            flex: 1;
                            font-size: 17px;
                            padding: 4px 0;
                            resize: none;
                            border: none;
                        }
                    }
    
                    & > div:nth-child(-n + 10) {
                        border-left: none;
                    }
        
                    & > div:nth-child(10),
                    & > div:nth-child(19) {
                        border-bottom: none;
                    }
    
                    & > .gold {
                        grid-row: 9 / 11;
                        display: flex;
                        padding: 10px 10px 10px 0;
    
                        & > div:first-child {
                            display: flex;
                            flex-direction: column;
                            width: 87px;
    
                            & > label {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                font-family: var(--font-head);
                                font-weight: bold;
                                font-size: 24px;
                                letter-spacing: 1px;
    
                                & > span {
                                    font-size: 16px;
                                    color: var(--color-light-gray);
                                    letter-spacing: 0;
                                }
                            }
                        }
    
                        & > div:last-child {
                            flex: 1;
    
                            & > .content {
                                display: flex;
                                flex-direction: column;
                                height: calc(100% - 2px);
    
                                & > div {
                                    flex: 1;
    
                                    &:first-child { border-bottom: var(--dotted-border); }
    
                                    & > input {
                                        font-size: 40px;
                                        width: calc(100% - 2px);
                                        margin-top: -13px;
                                        clip-path: polygon(0 23%, 0 77%, 100% 77%, 100% 23%);
                                    }
                                }
                            }
                        }
                    }
                }
            }
    
            & > .notes-and-spells {
                --pad: 3px;
    
                flex: 1.3;
                display: flex;
                flex-direction: column;
                gap: var(--inner-padding);
    
                & > div > .content {
                    display: flex;
                    flex-direction: column;
    
                    & > label {
                        text-align: center;
                        font-family: var(--font-head);
                        font-weight: bold;
                        font-size: 14px;
                    }
    
                    & > textarea {
                        flex: 1;
    
                        width: calc(100% - var(--pad) * 2);
                        padding: var(--pad);
                    }
                }
    
                & > .notes {
                    flex: 1.4;
    
                    & label { margin: calc(var(--pad) * 2) 0 var(--pad); }
                }
    
                & > .spells {
                    flex: 1;
    
                    & label { margin: var(--pad) 0 calc(var(--pad) * 2); }
                }
            }
        }
    }
}

#nojs-alert {
    position: fixed;
    z-index: 999;

    & > input {
        position: fixed;
        top: -15px;
        
        opacity: 0;
        pointer-events: none;

        &:checked ~ .content,
        &:checked ~ .screen {
            display: none;
        }
    }

    & > .content {
        --nojs-width: 500px;

        display: flex;
        align-items: center;

        position: fixed;
        top: 10vh;
        left: calc(50vw - var(--nojs-width) / 2);
        width: var(--nojs-width);

        background: #eee;
        padding: 20px 30px 50px;
        border-radius: 20px;
        filter: drop-shadow(1px 1px 5px #0008);

        font-family: var(--font-body);

        user-select: none;

        & > .icon {
            font-size: 40px;
            margin-right: 20px;
        }

        & > div {
            & > h2 {
                font-family: var(--font-head);
                margin: 5px;
            }

            & > p { margin: 5px; }
        }

        & > label {
            display: block;
            pointer-events: all;
            cursor: pointer;
            position: absolute;
            bottom: 20px;
            right: 40px;
            border: 1px solid #0008;
            border-bottom-width: 2px;
            padding: 3px 6px;
            border-radius: 5px;
            background: #fff;

            &:hover { background-color: #ddd; }
            &:active {
                bottom: 19px;
                border-bottom-width: 1px;
            }
        }
    }
}

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0003;
}

input.hidden {
    position: fixed;
    top: -100px;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1032px) {

    body {
        overflow-x: hidden;
    }

    nav {
        & > .content {
            & > footer {
                opacity: 1;
            }
        }
    }

    main {
        margin: 0;

        #sheet {
            --logo-height: 80px;
    
            box-shadow: none;
    
            & textarea { font-size: 20px !important; }
    
            & > .header {
                position: relative;
                padding-top: calc(var(--logo-height) + var(--border-padding));
    
                & > div {
                    & > label { display: none; }
                    & > input {
                        left: 0;
                        width: 100%;
                        text-align: center;
                        
                        &::placeholder { opacity: 1; }
                    }
                }
    
                & > img {
                    position: absolute;
                    top: 0;
                    left: calc((100% - var(--logo-width)) / 2);
                }
            }
    
            & > .body {
                display: block;
    
                & > .stats {
                    display: block;
                    font-size: 0; /* stupid inline whitespace fix */
    
                    & > .attributes {
                        height: 120px;
                        margin-bottom: var(--inner-padding);
        
                        & > .content {
                            flex-direction: column;
    
                            & > div {
                                flex-direction: row;
                            }
        
                            & > .fields > div {
                                & > input {
                                    width: calc((100% - 4px) / 3);
                                }
    
                                &:nth-child(2),
                                &:last-child {
                                    border-top: none;
                                    border-left: var(--dotted-border);
                                }
                            }
                        }
                    }
    
                    & > .health,
                    & > .armor {
                        display: inline-block;
                        width: calc((100% - var(--inner-padding)) / 2);
                        height: 120px;
                    }
    
                    & > .health {
                        & > .border { border-image: url('../img/bevel-side-left.png') var(--bevel-corner); }
                        & > .content {
                            clip-path: polygon(
                                0 var(--bevel-px), var(--bevel-px) 0,
                                100% 0,
                                100% 100%,
                                var(--bevel-px) 100%, 0 calc(100% - var(--bevel-px)));
                        }
                    }
    
                    & > .armor {
                        float: right;
    
                        & > .border { border-image: url('../img/bevel-side-right.png') var(--bevel-corner); }
                        & > .content {
                            flex-direction: column-reverse;
                            clip-path: polygon(
                                0 0,
                                calc(100% - var(--bevel-px)) 0, 100% var(--bevel-px),
                                100% calc(100% - var(--bevel-px)), calc(100% - var(--bevel-px)) 100%,
                                0 100%);
    
                                & > .fields > div > input {
                                    margin-top: 22px;
                                }
                        }
                    }
                    
                    & > .xp {
                        flex-direction: row;
                        width: 50%;
                        margin: var(--inner-padding) auto;
                        height: 72px;
    
                        & > div > .content > input {
                            margin-top: -2px;
                        }
    
                        & > span {
                            display: none;
                        }
                    }
                }
    
                & > .inventory {
                    --gold-height: 60px;
                    --inv-padding-top: calc(var(--gold-height) + var(--inner-padding));
    
                    margin-top: var(--border-padding);
                    height: 1080px;
                    padding-top: var(--inv-padding-top);
    
                    & > .content {
                        display: grid;
                        grid-template-rows: repeat(18, 1fr);
                        grid-template-columns: 1fr;
                        grid-auto-flow: column;
                        padding-top: var(--inv-padding-top);
    
                        & > div {
                            border: none;
                            border-top: var(--dotted-border);
    
                            &:first-child { border-top: none; }
                        }
    
                        & > .gold {
                            grid-row: unset;
                            padding: 0;
                            flex-direction: column;
                            position: absolute;
                            left: calc((100% - 200px) / 2);
                            border-top: none;
                            width: 200px;
                            height: 60px;
    
                            & > div:first-child {
                                flex-direction: row;
                                position: absolute;
    
                                & > label {
                                    position: absolute;
                                    top: 17px;
    
                                    &:first-child { left: -75px; }
                                    &:last-child { left: 207px; }
    
                                    & > span { font-size: 11px; }
                                }
                            }
        
                            & > div:last-child {
                                & > .content {
                                    flex-direction: row;
    
                                    & > div {
                                        &:first-child {
                                            border-bottom: none;
                                            border-right: var(--dotted-border);
                                        }
        
                                        & > input {
                                            width: calc((100% - 2px) / 2);
                                            margin-top: -8px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
    
                & > .notes-and-spells {
                    margin: var(--border-padding) 0;
                    height: 700px;
    
                    & > .spells > .content {
                        flex-direction: column-reverse;
    
                        & > label { margin: calc(var(--pad) * 2) 0 var(--pad); }
    
                        & > textarea {
                            flex: 1;
        
                            width: calc(100% - var(--pad) * 4);
                            padding: calc(var(--pad) * 2);
                        }
                    }
                }
            }
        }
    }
}