lexys-labyrinth/style.css

html {
    font-size: 24px;
    height: 100%;
}
body {
    min-height: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;

    background: #101214;
    color: white;
}

/* Generic element styling */
button {
    font-size: inherit;
    padding: 0.125em 0.5em;
    border: 1px solid black;
    background: #909090;
    border-image: url(button.png) 33.333% fill / auto repeat;
    text-transform: lowercase;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
}

/* Main page structure */
body > header {
    display: flex;
    align-items: center;
    padding: 0.5em;
    background: #00080c;
}
body > header > h1 {
    flex: 1;
    font-size: 1.25rem;
}
body > header > nav {
    display: flex;
    gap: 0.5em;
}

.overlay {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0004;
}
.dialog {
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    padding: 1em;
    border: 1px solid black;
    color: black;
    background: #e8e8e8;
    box-shadow: 0 1px 3px #000c;
}

main {
    flex: 0;
    margin: auto;  /* center in both directions baby */
    isolation: isolate;
    display: grid;
    align-items: center;
    grid:
        "header     header"
        "level      chips"
        "level      time"
        "level      bonus"
        "level      message"   1fr
        "level inventory"
        "level controls"
        "demo demo"
        /* Need explicit min-content to force the hint to wrap */
        / min-content min-content
    ;
    column-gap: 1em;
    row-gap: 0.5em;

    image-rendering: optimizeSpeed;

    --tile-width: 32px;
    --tile-height: 32px;
    --scale: 1;
}

main > header {
    grid-area: header;
    display: grid;
    grid-auto-columns: 1fr auto;
    align-items: center;
    gap: 0.25em;
}
main > header > h1,
main > header > h2 {
    grid-column: 1;
    line-height: 1;
}
main > header > nav {
    grid-column: 2;
    justify-self: end;
    display: flex;
    gap: 0.25em;
}

.level {
    grid-area: level;

    position: relative;
}
.level canvas {
    display: block;
    width: calc(9 * var(--tile-width) * var(--scale));
}
.bummer {
    grid-area: level;
    place-self: stretch;

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

    z-index: 1;
    font-size: 48px;
    padding: 10%;
    background: #0009;
    color: white;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 2px 1px black;
}
.bummer:empty {
    display: none;
}
.bummer p {
    margin: 0;
}
dl.score-chart {
    display: grid;
    grid-auto-columns: 1fr 1fr;
    font-size: 1.25rem;
    font-weight: normal;
}
dl.score-chart dt {
    grid-column: 1;
    text-align: left;
}
dl.score-chart dd {
    grid-column: 2;
    margin: 0;
    text-align: right;
}
dl.score-chart .-sum {
    margin-bottom: 0.5em;
    border-top: 1px solid white;
    color: hsl(40, 75%, 80%);
}

.meta {
    grid-area: meta;

    color: yellow;
    background: black;
    text-align: center;
}
.chips {
    grid-area: chips;
}
.time {
    grid-area: time;
}
.bonus {
    grid-area: bonus;
}
.chips,
.time,
.bonus {
    display: flex;
    align-items: center;
}
.chips h3,
.time h3,
.bonus h3 {
    flex: 1;
    font-size: 1.25rem;
    line-height: 1;
}
.chips output,
.time output,
.bonus output {
    flex: 0;
    font-size: 2em;
    padding: 0.125em;
    min-width: 2em;
    min-height: 1em;
    line-height: 1;
    text-align: right;
    font-family: monospace;
    color: hsl(45, 100%, 60%);
    background: #080808;
    border: 1px inset #202020;
}

.message {
    grid-area: message;
    align-self: stretch;

    padding: 0.5em;
    font-family: serif;
    font-style: italic;
    color: hsl(45, 100%, 60%);
    background: #080808;
    border: 1px inset #202020;
}
.message:empty {
    display: none;
}

.inventory {
    grid-area: inventory;
    display: flex;
    flex-wrap: wrap;
    align-items: start;

    background-size: calc(var(--tile-width) * var(--scale)) calc(var(--tile-height) * var(--scale));
    width: calc(4 * var(--tile-width) * var(--scale));
    min-height: calc(2 * var(--tile-height) * var(--scale));
}
.inventory img {
    width: calc(var(--tile-width) * var(--scale));
}
.controls {
    grid-area: controls;
    display: flex;
    gap: 0.25em;
}
.controls > button {
    flex: 1;
}
.demo {
    grid-area: demo;
}

/* Debug stuff */
.input {
    display: grid;
    grid:
        "drop   up      cycle" 1.5em
        "left   swap    right" 1.5em
        ".      down    .    " 1.5em
        / 1.5em 1.5em 1.5em
    ;
    gap: 0.5em;
}
.input-action {
    padding: 0.25em;
    line-height: 1;
    color: #fff4;
    background: #202020;
}
.input-action[data-action=up] { grid-area: up; }
.input-action[data-action=down] { grid-area: down; }
.input-action[data-action=left] { grid-area: left; }
.input-action[data-action=right] { grid-area: right; }
.input-action[data-action=swap] { grid-area: swap; }
.input-action[data-action=cycle] { grid-area: cycle; }
.input-action[data-action=drop] { grid-area: drop; }
.input-action.--pressed {
    color: white;
    background: hsl(215, 75%, 25%);
}