body { 
    font-family: monospace;
    font-size: 15px;
    background: #505050;
    color: #dddddd;
    
    display: grid;
    /* Extra 2em around the content for border */
    /* rot.js seems to want 10px for char width and 16px (1em) for height. So we'll
       make the map area 80 chars wide and the inventory / status area 20 chars' worth:
       (remembering the extra 16px / 1em on each for the border */
    grid-template-columns: auto 1032px auto;
    /* Height wise, rot.js is much nicer since it'll just use ems like it should. We
       put 50 rows in, then add a further 8 for the log display */
    grid-template-rows: 1em 52em 2em;
    height: 100vh;
    margin: 0;
}

a { color: #9090ff; }
a:visited { color: #ff9090; }

.content {
    grid-area: 2 / 2 / 3 / 3;
    border: 1em solid #e4d8b4;
    border-radius: 0.5em;
    background: #1a1713;
}

.help {
    overflow: auto;
    padding-left: 1em;
    padding-right: 1em;
}

.game {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 200px;
    grid-template-rows: auto 10em;
}
.map { grid-area: 1 / 1 / 2 / 2; }
.status { grid-area: 1 / 2 / 2 / 3; }
.log {
     grid-area: 2 / 1 / 3 / 3;
     margin: 5px;
 }

 .status .item {
     margin-left: 1em;
 }

.status .inventory { color: #77f; }
.status .ground { color: #7f7; }
.status .player { color: #f77; }

.workshop {
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 1em;
    column-gap: 1em;
    row-gap: 1em;
}

.victory {
    grid-area: 1 / 1 / 2 / 2;
    padding: 5em;
    text-align: center;
}

.workstation {
    border-radius: 2em;
    padding: 1em;
    min-height: 200px;
}

.workstation.market {
    background: #4d1100;
    grid-area: 1 / 1 / 2 / 2;
}

.workstation.forge {
    background: #2c2c2c;
    grid-area: 1 / 2 / 2 / 3;
}

.workstation.workbench {
    background: #3a3a00;
    grid-area: 2 / 1 / 3 / 2;
}

.workstation.mine {
    background: #00205c;
    grid-area: 2 / 3 / 3 / 4;
}

.workstation.garden {
    background: #005c10;
    grid-area: 1 / 3 / 2 / 4;
}

.workstation.gym {
    background: #5c002c;
    grid-area: 2 / 2 / 3 / 3;
}

.workstation .button {
    cursor: pointer;
    user-select: none;
}

.workstation .button.disabled {
    color: #888;
}

.footer {
    grid-area: 3 / 2 / 4 / 3;
    text-align: center;
    margin-top: 0.25em;
}
/*background: #e4d8b4;*/