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.33;
    background: #080808;
    background-image: url(background.svg);
    background-size: 10%;
    color: #ececec;

    --panel-bg-color: hsl(225, 10%, 20%);
    --button-bg-color: hsl(225, 10%, 25%);
    --button-bg-hover-color: hsl(225, 15%, 30%);
}

/* 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;
    font-family: inherit;
    color: white;
    background: var(--button-bg-color);
    border: 1px solid hsl(225, 10%, 15%);
    box-shadow:
        inset 0 0 0 1px hsl(225, 10%, 33%),
        0 1px 1px hsl(225, 10%, 10%);
    border-radius: 0.25em;
    text-transform: lowercase;
    cursor: pointer;
}
button:hover {
    background: var(--button-bg-hover-color);
}
button:active {
    box-shadow:
        inset 0 0 2px 1px hsl(225, 10%, 33%);
    transform: translateY(1px);
    /* Need this for the editor's tool help things and i'm not questioning it */
    z-index: 1;
}
button:disabled {
    color: #606060;
    background: #202020;
    box-shadow:
        inset 0 0 2px 1px hsl(225, 0%, 10%),
        0 1px 0 hsl(225, 10%, 10%);
    cursor: auto;
}
button.button-big {
    display: block;
    width: 100%;
    margin: 0.5em 0;
    padding: 1em;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
}
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.normal-list {
    margin-left: 1em;
    list-style: disc;
}
ol.normal-list {
    margin-left: 1.5em;
    list-style: decimal;
}
p {
    margin: 0.5em 0;
}
p:first-child {
    margin-top: 0;
}
p:last-child {
    margin-bottom: 0;
}
pre {
    white-space: pre-wrap;
}
code {
    color: #c0c0e0;
}

a {
    color: #c0c0c0;
}
a:link,
a:visited {
    text-decoration: underline dotted;
}
a:link {
    color: hsl(225, 50%, 75%);
}
a:visited {
    color: hsl(255, 50%, 75%);
}
a:link:hover,
a:visited:hover {
    text-decoration: underline;
}
a:active {
    color: hsl(0, 50%, 60%);
}

svg#svg-iconsheet {
    /* This is a collection of SVG icons to be re-<use>d */
    display: none;
}
svg.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;

    stroke: none;
    fill: currentColor;
    fill-rule: evenodd;
}

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

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff4;
}
.overlay.--transient {
    align-items: start;
    justify-content: start;
    background: none;
}
.dialog {
    display: flex;
    flex-direction: column;

    min-width: 33%;
    max-width: 75%;
    max-height: 75%;
    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;
}
.dialog pre.error {
    color: #400000;
    background: #f0d0d0;
    padding: 0.5em 1em;
}
.dialog a:link {
    color: hsl(225, 50%, 50%);
}
.dialog a:visited {
    color: hsl(255, 50%, 50%);
}
dl.formgrid {
    display: grid;
    grid: auto-flow min-content / 1fr 4fr;
    align-items: baseline;
    gap: 1em;
    margin: 0;
}
dl.formgrid > dt {
    grid-column: 1;
}
dl.formgrid > dd {
    grid-column: 2;
    margin: 0;
}

/* 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;
}
table.level-browser thead {
    position: sticky;
    top: -1em;  /* counteract padding so cells don't appear above us */
    background: #f4f4f4;  /* match dialog background */
}
table.level-browser thead tr th {
    border-bottom: 2px solid hsl(225, 20%, 60%);
}
table.level-browser td {
    padding: 0.25em;
}
table.level-browser td.-number {
    color: #404040;
    text-align: right;
}
table.level-browser td.-time {
    text-align: right;
}
table.level-browser td.-score {
    text-align: right;
}
table.level-browser tr.--unvisited {
    color: #606060;
    font-style: italic;
}
table.level-browser tr.--error {
    color: #600000;
    font-style: italic;
}
table.level-browser tbody tr {
    cursor: pointer;
}
table.level-browser tbody tr:hover {
    background: hsl(225, 60%, 85%);
}
table.level-browser tbody tr:nth-child(10n) td {
    border-bottom: 2px solid hsl(225, 20%, 80%);
}

/* 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;
}
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 */
}

@media (max-width: 800px) {
    .dialog {
        max-width: 90%;
        max-height: 90%;
    }
}

/* 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;
    gap: 0.5em;

    padding: 0.5em;
    line-height: 1.125;
}
body > header h1 {
    font-size: 1.66em;
}
body > header h2 {
    font-size: 1.33em;
}
body > header h3 {
    font-size: 1.75em;
}
body > header > nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
}
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 {
    order: 3;
    color: #606060;
}

@media (max-width: 800px) {
    body > header {
        padding: 0.25em;
    }
    /* All these headings are way too big on phones */
    body > header h1 {
        font-size: 1.25em;
    }
    body > header h2 {
        font-size: 1.125em;
    }
    body > header h3 {
        font-size: 1.0625em;
    }
    body > header p {
        /* "a game by eevee" takes up too much space :( */
        display: none;
    }
}

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

#splash {
    display: grid;
    grid:
        "header header  header"
        "intro  intro   intro"
        "stock  upload  yours"
        / 1fr 1fr 1fr
    ;
    gap: 1em;

    position: relative;
    padding: 1em 10%;
    margin: auto;
    overflow: auto;
}
#splash > .drag-overlay {
    display: none;
    justify-content: center;
    align-items: center;

    font-size: 10vmin;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    background: #fff2;
    border: 0.25rem dashed white;
    border-radius: 1rem;
    text-shadow: 0 1px 5px black;
    text-align: center;
}
#splash.--drag-hover > .drag-overlay {
    display: flex;
}

#splash > header {
    grid-area: header;

    text-align: center;
}
#splash > header img {
    display: block;
    margin: auto;
}
#splash > header h1 {
    font-size: 3em;
}
#splash > header p {
    margin: 0;
    font-style: italic;
    color: #909090;
}
#splash h2 {
    border-bottom: 1px solid #404040;
    color: #909090;
    text-shadow: 0 1px #0004;
}
#splash > section {
    padding: 1em;
    background: var(--panel-bg-color);
    box-shadow: 0 0.25em 1em black;
}
#splash > #splash-intro {
    grid-area: intro;
    font-size: 20px;
}
#splash > #splash-stock-levels {
    grid-area: stock;
}
#splash > #splash-upload-levels {
    grid-area: upload;
}
#splash-upload-file,
#splash-upload-dir {
    /* Hide the file upload control, which is ugly */
    display: none;
}
#splash > #splash-your-levels {
    grid-area: yours;
}

@media (max-width: 800px) {
    #splash {
        /* Grid layout doesn't fit, just stack everything */
        display: flex;
        flex-direction: column;
        /* 10% padding is way way too much */
        padding: 1em;
    }
    /* Shrink logo and title */
    #splash > header img {
        width: 48px;
    }
    #splash > header h1 {
        font-size: 2em;
    }
}

button.level-pack-button {
    display: grid;
    grid:
        "title  score"
        "desc   desc"
        / 1fr min-content
    ;

    padding: 0.5em;
    text-align: left;
}
button.level-pack-button h3 {
    grid-area: title;
}
button.level-pack-button .-score {
    grid-area: score;
    font-style: italic;
    color: #c0c0c0;
    text-align: right;
}
button.level-pack-button p {
    grid-area: desc;
    font-size: 0.833em;
    font-style: italic;
    color: #c0c0c0;
}

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

#player {
    flex: 1;
    position: relative;
    display: flex;

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

    --tile-width: 32px;
    --tile-height: 32px;
    --scale: 1;
}
#player-main {
    /* This element basically just exists so that #player can have relative positioning and the
     * debug panel can use that to sit against the right edge; absolute positioning excludes
     * margins, so if it were positioned as a child of THIS element, it would be stuffed into the
     * game area (oops!) */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: 0.5em;
    margin: auto;  /* center in both directions baby */
}
#player-game-area {
    isolation: isolate;
    align-self: center;  /* don't stretch if the buttons or music blow out somehow */
    display: grid;
    align-items: center;
    grid:
        "level      chips"      min-content
        "level      time"       min-content
        "level      bonus"      min-content
        "level      message"    1fr
        "level      inventory"  min-content
        "level      actions"    min-content
        /* Need explicit min-content to force the hint to wrap */
        / min-content min-content
    ;
    column-gap: 2em;
    row-gap: 0.5em;

    padding: 1em;
    background: hsl(225, 10%, 20%);
    box-shadow: 0 0.25em 1em black;
}
#player > .controls {
    order: -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: 2;
    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;
}
/* Allow clicking through the overlay in debug mode */
#player.--debug .overlay-message {
    pointer-events: none;
}
#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] {
    background: hsla(225, 50%, 25%, 0.5);
    box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(225, 50%, 25%);
}
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%);
}

.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;
    color: hsl(225, 20%, 90%);
}
.chips output,
.time output,
.bonus output {
    flex: 1;
    font-size: 2em;
    min-width: 2em;
    min-height: 1em;
    line-height: 1;
    text-align: right;
    font-family: monospace;
    color: hsl(225, 20%, 60%);
}
.chips output.--done {
    color: hsl(225, 10%, 30%);
}
.time output.--warning {
    color: hsl(345, 60%, 60%);
}
.time output.--danger {
    color: hsl(330, 60%, 60%);
    /* TODO this can get out of sync and keeps going at 0, but is a neat idea */
    /* animation: time-pulse 1s linear infinite; */
}
@keyframes time-pulse {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.time output.--frozen {
    color: hsl(225, 10%, 30%);
}
#player .bonus {
    visibility: hidden;
    display: none;
}
#player.--bonus-visible .bonus {
    visibility: initial;
    display: 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));
    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 .actions {
    grid-area: actions;
    display: flex;
    gap: 0.5em;
}
#player .actions button {
    flex: 1;
    white-space: nowrap;
}

#player-music {
    grid-area: music;
    display: flex;
    gap: 1em;
    margin: 0 1em;
    text-transform: lowercase;
    color: #909090;
}
#player-music #player-music-left {
    /* allow me to wrap if need be */
    flex: 1 0 0px;
}
#player-music #player-music-right {
    text-align: right;
}
#player-music #player-music-volume {
    width: 8em;
}

#player .controls {
    grid-area: controls;
    display: flex;
    gap: 0.25em;
    justify-content: space-between;
}
#player button {
    position: relative;
}
#player button .keyhint {
    position: absolute;
    left: 0;
    right: 0;
    top: -2em;
    width: 1em;
    margin: auto;
    color: #404040;
    border: 1px solid #202020;
    border-radius: 0.25em;
    box-shadow: 0 2px 0 #202020;
    text-align: center;
    text-transform: uppercase;
}
#player button:disabled .keyhint {
    display: none;
}

.play-controls {
    display: flex;
    align-items: center;
    gap: 0.25em;
}
.play-controls {
    align-self: start;
}

/* Debug stuff */
#player.--debug #player-debug {
    display: flex;
}
#player-debug {
    flex: 0 0 max-content;
    align-self: center;
    display: none;
    /* FIXME this blows out the height instead of scrolling and i cannot figure out how to make it
     * stop, so here is an arbitrary max height on it which i extremely hate */
    overflow: auto;
    max-height: 75vh;
    flex-direction: column;
    justify-content: start;
    gap: 0.25em;
    padding: 0.5em;
    background-image: repeating-linear-gradient(135deg,
        hsl(0, 0%, 4%) 0px,
        hsl(0, 0%, 4%) 16px,
        hsl(30, 25%, 8%) 16px,
        hsl(30, 25%, 8%) 32px);
    border: 0.25em solid hsl(30, 75%, 50%);
    border-right-width: 0;
    box-shadow: inset 0 0 0.25em 0.25em #0004;
}
#player-debug > h3 {
    margin: -0.25em -0.25em 0.25em;
    padding: 0 0.5em;
    background: hsl(30, 60%, 20%);
    color: black;
}
#player-debug > * + h3 {
    margin-top: 0.5em;
}
#player-debug table.-time-controls {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.5em;
}
#player-debug table.-time-controls button {
    width: 100%;
    text-align: inherit;
}
#player-debug table.-time-controls td:nth-child(1) {
    /* go backwards button */
    text-align: left;
}
#player-debug table.-time-controls td:nth-child(2) {
    /* value */
    width: 4em;
    text-align: right;
}
#player-debug table.-time-controls td:nth-child(3) {
    /* label */
}
#player-debug table.-time-controls td:nth-child(4) {
    /* go forward button */
    text-align: right;
}
#player-debug .-inventory {
    display: grid;
    margin: 0 auto;
    grid: auto-fill var(--tile-height) / repeat(8, var(--tile-width));
    gap: 2px;
}
#player-debug > .-inventory > button {
    padding: 0;
}
#player-debug > .-inventory > button > img {
    display: block;
}
#player-debug > .-inventory > button.-wide {
    grid-column: span 8;
    padding: 0.25em;
}
#player-debug .-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0.25em;
}
#player-debug .-buttons button {
    flex: 1 0 max-content;
}

#player-debug .-replay-columns {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}
#player-debug .-replay-columns .-buttons {
    flex-direction: column;
}
#player-debug-input {
    flex: none;
    display: grid;
    grid:
        "drop   up      cycle"  1em
        "left   .       right"  1em
        ".      down    swap"   1em
        / 1em 1em 1em
    ;
    gap: 0.5em;
}
#player-debug-input > svg {
    fill: #404040;
}
#player-debug-input > svg.--held {
    fill: white;
}
#player-debug-replay-playback {
    display: none;
    gap: 0.25em;
}
#player.--replay #player-debug-replay-playback {
    display: flex;
}
#player-debug-replay-playback progress {
    flex: 1;
}
#player-debug-replay-playback output {
    width: 3em;
    width: 5ch;
    text-align: right;
}
#player-debug-replay-playback span {
    flex: none;
}


@media (max-width: 800px) {
    #player {
        /* sentinel for js */
        --is-portrait: 1;
        /* The play area isn't necessarily the biggest thing any more, and it's ugly when stretched */
        align-items: center;
    }
    #player .controls {
        flex-direction: column;
    }
    #player-game-area {
        /* Rearrange the grid to be vertical */
        grid:
            "level      level"
            "chips      inventory" calc((var(--tile-height) * var(--scale) * 2 - 1em) / 3)
            "time       inventory" calc((var(--tile-height) * var(--scale) * 2 - 1em) / 3)
            "bonus      inventory" calc((var(--tile-height) * var(--scale) * 2 - 1em) / 3)
            "actions    actions"   min-content
            /* FIXME ideally the first column would be 1fr so the hearts/time have space, but that
             * allows hints to grow to the entire width of the window, which incredibly sucks.  i
             * don't know how to get around this except by giving the grid a fixed width, which i
             * guess wouldn't be that hard */
            / min-content min-content
        ;
        row-gap: 0.5em;
        column-gap: 1em;

        padding: 0.5em;
    }
    #player .inventory {
        /* stick me in the center right */
        place-self: center end;
    }
    #player .message {
        /* Overlay hints on the inventory area */
        grid-row: chips / bonus;
        grid-column: level;
        z-index: 1;
        font-size: calc(var(--tile-height) * var(--scale) / 2.5);
    }
    #player .keyhint {
        /* Hide key hints, they take up surprisingly a lot of space */
        display: none;
    }
    #player-music {
        /* Stack the title/artist on the volume, since they don't fit well side by side */
        font-size: 0.875em;
    }
}


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

#editor {
    flex: 1 1 auto;
    display: grid;
    grid:
        "controls   controls"   min-content
        "palette    level"      1fr
        / min-content 1fr
    ;
    gap: 0.5em;

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

#editor .editor-canvas {
    grid-area: level;
    overflow: auto;
    /* Flex layout to center the canvas and overlay together */
    display: flex;
    /* This isn't supported in Chrome (still!!), so use auto margins on the child instead
    align-items: safe center;
    justify-content: safe center;
    */
    background: #202020;
    border: 0.125em solid black;
}
#editor .editor-canvas .-container {
    position: relative;
    margin: auto;
    /* Give the canvas/overlay a bit of a margin; it has to be a border because, due to some quirk
     * of overflowing flexboxes I guess, padding and margins won't extend the scroll area on the
     * right and bottom */
    /* TODO padding should be half a cell? */
    border: 2em solid transparent;
}
#editor .editor-canvas canvas {
    display: block;
    width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
    --viewport-width: 9;
    --viewport-height: 9;
}
/* SVG overlays */
#editor svg.level-editor-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* allow clicks to go through us! */
    pointer-events: none;

    /* default svg properties */
    stroke-width: 0.0625;
    fill: none;
}
#editor .level-editor-overlay rect.overlay-cxn {
    stroke: red;
}
#editor .level-editor-overlay line.overlay-cxn {
    stroke: red;
}
#editor .level-editor-overlay rect.overlay-camera {
    stroke: #808080;
    fill: #80808040;
    pointer-events: auto;
}
#editor .level-editor-overlay text {
    /* Each cell is one "pixel", so text needs to be real small */
    font-size: 1px;
}
#editor .level-editor-overlay text.overlay-edit-tip {
    stroke: none;
    fill: black;
}

#editor .controls {
    /* TODO with the hint area gone i don't think this needs to be a grid?  could just flex */
    grid-area: controls;
    display: grid;
    grid:
        "tile   toolbar    layer   direction   .       menu" auto
        / auto auto auto auto 1fr auto
    ;
    align-items: center;
    column-gap: 1em;
}
#editor .controls #editor-tile {
    grid-area: tile;
}
#editor .controls #editor-tile canvas {
    display: block;
}
#editor .controls #editor-toolbar {
    grid-area: toolbar;
}
#editor-toolbar .-help {
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    position: absolute;
    width: max-content;
    margin-top: -0.25em;
    margin-left: -0.5em;
    padding: 0.33em 0.75em;
    pointer-events: none;

    border: 1px solid black;
    white-space: pre-wrap;
    line-height: 1.5;
    text-transform: none;
    text-align: left;
    background: hsl(225, 10%, 20%);
    box-shadow: 0 1px 2px 1px #0004;

    transition-property: margin-top, opacity, visibility;
    transition-timing-function: ease-out;
    transition-duration: 0.125s, 0.125s, 0s;
    transition-delay: 0s, 0s, 0.125s;
}
#editor-toolbar .-help h3 {
    font-size: 1.25em;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid currentColor;
}
#editor-toolbar button:hover .-help {
    opacity: 1;
    z-index: 2;  /* show above any that are in mid-fade */
    visibility: visible;
    margin-top: 0.25em;
    transition-delay: 0.5s;
    transition-timing-function: ease-in;
}
#editor .controls .-buttons {
    grid-area: menu;
}
.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;
    border-radius: 0;
    box-shadow: none;
}
.icon-button-set button.-selected {
    background-image: url(icons/tool-bg-selected.png);
}
.icon-button-set button img {
    display: block;
}

#editor .palette {
    isolation: isolate;
    grid-area: palette;
    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;
    margin: 0.33em 4px;  /* matches gap */
    grid: auto-flow 32px / repeat(8, 32px);
    gap: 4px;
}
.palette-entry {
}
.palette-entry:hover {
    box-shadow: 0 0 0 1px black, 0 0 0 3px hsl(225, 100%, 75%);
}
.palette-entry.--selected {
    z-index: 1;
    box-shadow: 0 0 0 1px black, 0 0 0 3px white;
}

.editor-level-browser {
    display: grid;
    grid: auto-flow auto / repeat(auto-fill, minmax(13em, 1fr));  /* 12em preview wdith + padding */
    gap: 0.5em;
    width: 70vw;
    /* seems to go into the parent's right padding fsr, i guess because the scrollbar is there */
    margin-right: 1em;
    list-style: none;
}
.editor-level-browser li {
    display: grid;
    grid:
        "preview    preview"
        "number     title"
        / min-content 1fr
    ;
    gap: 0.25em;
    padding: 0.5em;
}
.editor-level-browser li:hover {
    background: hsl(225, 60%, 85%);
}
.editor-level-browser li > .-preview {
    grid-area: preview;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12em;
    height: 12em;
    margin: auto;
}
.editor-level-browser li > .-preview:empty::before {
    content: '···';
    display: block;
    font-size: 5em;
    color: #c0c0c0;
}
.editor-level-browser li > .-preview canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.editor-level-browser li > .-number {
    grid-area: number;
    font-size: 2em;
}
.editor-level-browser li > .-title {
    grid-area: title;
    align-self: center;
}

/* Mini editors for specific tiles with complex properties */
/* FIXME should this stuff be on an overlay container class? */
form.editor-popup-tile-editor {
    position: relative;
    padding: 0.5em;
    color: black;
    background: white;
    border: 1px solid black;
    box-shadow: 0 2px 4px #0004;

    margin-top: 1em;

    --chevron-offset: 0px;
}
form.editor-popup-tile-editor.--above {
    margin-top: -1em;
}
form.editor-popup-tile-editor h3 {
    border-bottom: 1px dotted #606060;
}
form.editor-popup-tile-editor * + h3 {
    margin-top: 0.25em;
}
/* Use ::before for a chevron pointing at the tile in question */
form.editor-popup-tile-editor::before {
    content: '';
    display: block;
    position: absolute;
    border: 1em solid transparent;
    left: var(--chevron-offset);
    margin-left: -1em;

    top: -1em;
    border-top: none;
    border-bottom-color: white;
    filter: drop-shadow(0 -1px 0 black);
}
form.editor-popup-tile-editor.--above::before {
    top: auto;
    bottom: -1em;
    border: 1em solid transparent;
    border-bottom: none;
    border-top-color: white;
    filter: drop-shadow(0 1px 0 black);
}
/* Letter floor tiles, which let you pick the character to use; show them as a grid.  Note the
 * characters are preceded by radio buttons, which we hide for simplicity */
ol.editor-letter-tile-picker {
    display: grid;
    grid: auto-flow 1.5em / repeat(17, 1.5em);
    text-align: center;
    font-family: monospace;
}
ol.editor-letter-tile-picker label,
ol.editor-letter-tile-picker .-glyph {
    display: block;
    height: 100%;
}
ol.editor-letter-tile-picker input[type=radio] {
    display: none;
}
ol.editor-letter-tile-picker input[type=radio]:checked + .-glyph {
    background: hsl(225, 75%, 90%);
    outline: 2px solid hsl(225, 75%, 80%);
}
/* Hint tiles accept prose */
textarea.editor-hint-tile-text {
    font-size: 1.5em;
    width: 20vw;
    height: 20vh;
    min-width: 15rem;
    min-height: 5rem;
    border: none;
    font-family: serif;
}
/* Class for a list that uses hidden inputs with svg icons, shared by directional blocks and
 * railroad tracks */
.editor-tile-editor-svg-parts input {
    display: none;
}
.editor-tile-editor-svg-parts svg {
    display: block;
    width: 3em;
    fill: none;
    stroke: #c0c0c0;
    stroke-width: 2;
}
.editor-tile-editor-svg-parts input:checked + svg {
    stroke: hsl(225, 90%, 50%);
}
/* Directional blocks have arrows */
ol.editor-directional-block-tile-arrows {
    display: grid;
    grid: auto-flow 3em / repeat(3, 3em);
}
/* Railroad tracks are...  complicated */
ul.editor-railroad-tile-tracks {
    display: grid;
    grid: auto-flow 3em / repeat(3, 3em);
    gap: 0.25em;
}
ul.editor-railroad-tile-tracks.--switch input:checked + svg {
    stroke: hsl(15, 90%, 50%);
}