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

    display: flex;
    flex-direction: column;

    font-family: Ubuntu, Source Sans Pro, DejaVu Sans, sans-serif;
    line-height: 1.25;
    background: #101214;
    color: white;
}

/* Generic element styling */
main[hidden] {
    display: none !important;
}
input[type=radio],
input[type=checkbox],
input[type=range] {
    margin: 0.125em;
    vertical-align: middle;
}
button {
    font-size: inherit;
    padding: 0.25em 0.5em;
    border: 1px solid black;
    font-family: inherit;
    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;
}
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
p {
    margin: 0.5em 0;
}
p:first-child {
    margin-top: 0;
}
p:last-child {
    margin-bottom: 0;
}

/* Overlay styling */
.overlay {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff4;
}
.dialog {
    display: flex;
    flex-direction: column;

    min-width: 33%;
    max-width: 80%;
    max-height: 80%;
    border: 1px solid black;
    color: black;
    background: #f4f4f4;
    box-shadow: 0 1px 3px #000c;
}
.dialog > header {
    padding: 0.5em;
    line-height: 1;
    background: hsl(225, 20%, 40%);
    color: white;
}
.dialog > header h1 {
    font-size: 1em;
}
.dialog > footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;

    padding: 0.5em;
    background: #d0d0d0;
}
.dialog > header:empty,
.dialog > footer:empty {
    display: none;
}
.dialog > section {
    overflow: auto;
    padding: 1em;
}

/* Individual overlays */
table.level-browser {
    width: 100%;
    /* for some reason the table ignores the bottom padding when it overflows */
    margin-bottom: 1em;
    line-height: 1.25;
    border-spacing: 0;
    cursor: pointer;
}
table.level-browser td {
    padding: 0 0.25em;
}
table.level-browser tr:hover {
    background: hsl(225, 60%, 90%);
}

/* Options dialog */
.dialog-options {
    height: 60%;
    width: 75%;
}
.dialog-options > section {
    flex: 1;
}
nav.tabstrip {
    display: flex;
    border-bottom: 1px solid #d0d0d0;
}
nav.tabstrip > a {
    margin: 0 0.5em;
    padding: 0.5em 1em;
    color: inherit;
    text-decoration: none;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
nav.tabstrip > a:hover {
    background: #e8e8e8;
}
nav.tabstrip > a.--selected {
    background: #d0d0d0;
}
.dialog section.tabblock {
    display: none;
    overflow: auto;
    margin: 0.25em 0.5em;
}
.dialog section.tabblock.--selected {
    display: initial;
}
label.option {
    display: flex;
    align-items: center;
    padding: 0.25em;
}
label.option:hover {
    outline: 2px solid #d0d0d0;
    outline-radius: 2px;
}
label.option .option-label {
    flex: 1;
}
.option-help {
    display: none;
    background: #e8e8e8;
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
}
.option-help.--visible {
    /* TODO */
}

/* Bits and pieces */
img.compat-icon {
    margin: 0 0.25em 0.125em;
    vertical-align: middle;
}
.compat-lynx,
.compat-ms {
    font-size: 0.75em;
    display: inline-block;
    margin: 0 0.25em;
    padding: 0.25em;
    line-height: 1;
    vertical-align: middle;
    color: white;
    background: gray;
    border-radius: 0.25em;
}


/**************************************************************************************************/
/* Main page structure */

body > header {
    display: flex;
    align-items: center;
    background: #00080c;
}
body > header h1,
body > header h2,
body > header h3 {
    margin: 0.25rem 0.5rem;
    line-height: 1.125;
}
body > header h1 {
    font-size: 1.66rem;
}
body > header h2 {
    font-size: 1.33rem;
}
body > header h3 {
    font-size: 1.25rem;
}
body > header > nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin: 0.25rem 0.5rem;
}
body > header button {
    font-size: 0.75em;
}

body[data-mode=splash] #header-pack,
body[data-mode=splash] #header-level {
    display: none;
}
body[data-mode=editor] #player-edit,
body[data-mode=player] #editor-play {
    display: none;
}

#header-main {
    border-bottom: 1px solid #404040;
    box-shadow: 0 0 3px #0009;
}

/**************************************************************************************************/
/* Splash (intro part) */

#splash {
    margin: auto;
    overflow: auto;
}

#splash h2 {
    border-bottom: 1px solid #404040;
    color: #909090;
    text-shadow: 0 1px #0004;
}
#splash * + h2 {
    margin-top: 2rem;
}

#level-pack-list {
    margin: 1em 0;
}
#level-pack-list > li {
    margin: 1em 0;
    padding: 0.5em 1em;
    background: #ececec;
    color: black;
    border: 2px solid black;
    border-radius: 0.5em;
    box-shadow: inset 0 0 2px 2px #0006, 0 2px 0.25em #0006;
    cursor: pointer;
}
#level-pack-list > li:hover {
    background: hsl(45, 60%, 90%);
    border-color: hsl(45, 80%, 50%);
}
#level-pack-list > li p {
    font-size: 0.833em;
    font-style: italic;
    color: #606060;
}

/**************************************************************************************************/
/* Player */

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

    image-rendering: crisp-edges;
    image-rendering: pixelated;

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

.level {
    grid-area: level;

    position: relative;
    border: 0.125em solid black;
}
.level canvas {
    display: block;
    width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
    --viewport-width: 9;
    --viewport-height: 9;
}
#player .overlay-message {
    grid-area: level;
    place-self: stretch;

    display: grid;
    grid-template-rows: 2fr 6fr 2fr 1fr;
    justify-content: center;
    align-items: center;

    z-index: 1;
    font-size: calc(0.5 * var(--tile-width) * var(--scale));
    padding: 2%;
    background: #0009;
    color: white;
    text-align: center;
    text-shadow: 0 2px 1px black;
}
#player .overlay-message p {
    margin: 0;
}
#player .overlay-message .-top {
    font-size: 1.5em;
}
#player .overlay-message .-middle {
}
#player .overlay-message .-bottom {
}
#player .overlay-message .-keyhint {
    align-self: end;
    font-size: 0.5em;
    color: #c0c0c0;
}
#player .overlay-message[data-reason=""] {
    display: none;
}
#player .overlay-message[data-reason=failure] {
    box-shadow: inset 0 0 calc(4 * var(--tile-width)) var(--tile-width) black;
}
#player .overlay-message[data-reason=success] {
    box-shadow: inset 0 0 var(--tile-width) white;
}
dl.score-chart {
    display: grid;
    grid-auto-columns: 1fr 1fr;
    margin: auto;
    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 {
    font-size: calc(var(--tile-height) * var(--scale) / 3);
    display: flex;
    align-items: center;
}
.chips h3,
.time h3,
.bonus h3 {
    flex: 1;
    font-size: 1.25em;
    line-height: 1;
}
.chips output,
.time output,
.bonus output {
    flex: 1;
    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%, 40%);
    background: hsl(0, 0%, 3%);
    border: 1px inset #202020;
}
.chips output.--done {
    color: hsl(90, 100%, 40%);
    background: hsl(90, 50%, 3%);
}
.time output.--warning {
    color: hsl(30, 100%, 40%);
    background: hsl(0, 50%, 5%);
}
.time output.--danger {
    color: hsl(0, 100%, 40%);
    background: hsl(0, 75%, 8%);
}
.time output.--frozen {
    color: hsl(195, 100%, 40%);
    background: hsl(195, 25%, 3%);
}
#player .bonus {
    visibility: hidden;
}
#player.--bonus-visible .bonus {
    visibility: initial;
}

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

    font-size: calc(var(--tile-height) * var(--scale) / 3);
    padding: 0.25em 0.5em;
    font-family: serif;
    font-style: italic;
    color: hsl(45, 100%, 60%);
    background: #080808;
    border: 1px inset #202020;

    /* FIXME find a way to enforce that the message never makes the grid get bigger */
    overflow: auto;
}
.message:empty {
    display: none;
}

#player .inventory {
    grid-area: inventory;
    justify-self: center;
    display: grid;
    grid: auto-flow calc(var(--tile-height) * var(--scale)) / repeat(4, calc(var(--tile-width) * var(--scale)));

    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));
}
#player .inventory img {
    width: calc(var(--tile-width) * var(--scale));
}
#player .inventory .--hidden {
    visibility: hidden;
    pointer-events: none;
}
#player .inventory > span {
    position: relative;
}
#player .inventory .-count {
    font-size: calc(0.25 * var(--tile-height) * var(--scale));
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25em 0.5em;
    margin: 0.25em;  /* 2px, for a 32px tileset */
    line-height: 1;
    border-radius: 0.25em;
    background: #0009;
    color: white;
}

#player-music {
    grid-area: music;
    display: flex;
    text-transform: lowercase;
    color: #909090;
}
#player-music #player-music-left {
    flex: 1 0 auto;
}
#player-music #player-music-right {
    text-align: right;
}
#player-music a {
    color: #c0c0c0;
}
#player-music a:link,
#player-music a:visited {
    text-decoration: underline dotted;
}
#player-music a:link {
    color: hsl(225, 50%, 75%);
}
#player-music a:visited {
    color: hsl(300, 50%, 75%);
}
#player-music a:link:hover,
#player-music a:visited:hover {
    text-decoration: underline;
}
#player-music a:active {
    color: hsl(0, 50%, 75%);
}
#player-music #player-music-volume {
    width: 8em;
}

#player .controls {
    grid-area: controls;
    display: flex;
}
.play-controls,
.demo-controls {
    display: flex;
    gap: 0.25em;
}
.play-controls {
    align-self: start;
}
.demo-controls {
    display: none;
    flex: 1;
    justify-content: flex-end;
}
main.--has-demo .demo-controls {
    display: flex;
}

/* Debug stuff */
.input {
    display: grid;
    display: none;
    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(225, 75%, 25%);
}


/**************************************************************************************************/
/* Editor */

#editor {
    flex: 1 1 auto;
    display: grid;
    grid:
        "controls   level" min-content
        "palette    level" 1fr
        / minmax(25%, auto) auto
    ;
    gap: 0.5em;

    min-height: 0;
    margin: auto;
    padding: 1em;
}

#editor .level {
    grid-area: level;
    position: relative;
    overflow: auto;
}
#editor .level-editor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* FIXME get real size */
    width: 1024px;
    height: 1024px;
}
#editor .level-editor-overlay rect.overlay-cxn {
    stroke-width: 0.0625;
    stroke: red;
    fill: none;
}
#editor .level-editor-overlay line.overlay-cxn {
    stroke-width: 0.0625;
    stroke: red;
}

#editor .controls {
    grid-area: controls;
}
#editor .controls p img {
    background: url(icons/tool-bg-unselected.png);
}
.icon-button-set {
    display: flex;
    flex-wrap: wrap;
}
.icon-button-set button {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    line-height: 1;
    background: url(icons/tool-bg-unselected.png) no-repeat;
    border: none;
}
.icon-button-set button.-selected {
    background-image: url(icons/tool-bg-selected.png);
}
.icon-button-set button img {
    display: block;
}
#editor .palette {
    grid-area: palette;
    min-width: 20vw;
    padding-right: 0.25em;  /* in case of scrollbar */
    overflow-y: auto;
}
#editor .palette h2 {
    font-size: 1em;
    margin-top: 1em;
    border-bottom: 1px solid currentColor;
    color: #909090;
}
#editor .palette h2:first-child {
    margin-top: 0;
}
#editor .palette section {
    display: grid;
    grid: auto-flow 32px / repeat(auto-fit, 32px);
    gap: 3px;
}
.palette-entry {
    margin: 0.25em;
}
.palette-entry.--selected {
    box-shadow: 0 0 0 1px black, 0 0 0 2px white;
}