html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.visuallyHidden { position: absolute; width: 1px; height: 1px; margin: -1px;border: 0;padding: 0;white-space: nowrap;clip-path: inset(100%);clip: rect(0 0 0 0);overflow: hidden;}

/* Typographic styles */
html {
    font-size: 62.5%;
}

body {
    background-color: black;
    color: white;
    font-size: 2rem;
    font-family: 'Work Sans', sans-serif;
}

h2 {
    font-size: 3.2rem;
    word-break: break-word;
}

h3 {
    font-size: 2.5rem;
}

/* Stripping styles */
h2,h3,p,ul,li {
    margin: 0;
    padding: 0;
}

ul {
    list-style:none;
}

/* Wrapper */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Overall structure */
main {
    display: grid;
    grid-template-columns: 26rem auto;
    grid-template-rows: auto 20rem;
    height: 100vh;
    max-height: 800px;
    border-width: 4px;
    border-style: solid;
    border-color: rgb(40,40,40);
}

.hamburger {
    display: none;
}

/* Cat customization form */
.customization {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 40;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customization form {
    background: rgb(20,20,20);
    border: 4px solid rgb(40,40,40);
    border-radius: 2rem;
    padding: 1rem;
    margin: 2rem;
    width: auto;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.customization fieldset {
    border: none;
    padding: 0;
}

.customization fieldset legend {
    display: block;
    position: static;
    width: 100%;
    text-align: center;
    margin: 1rem 0;
}

.customization fieldset div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.customization fieldset label {
    display: block;
    border: 2px solid rgb(40,40,40);
    margin: 4px;
    border-radius: 1rem;
    transition: 0.3s;
    box-shadow: 0 0 0 transparent;
}

.customization fieldset label:hover {
    border: 2px solid rgb(120,120,120);
}

.customization img {
    display: block;
}

.customization input:checked + label {
    border: 2px solid red;
    box-shadow: 0 0 1rem red;
}

.customization input[type="text"], .customization fieldset {
    width: 100%;
}

.customization input[type="text"], .customization button {
    background: black;
    color: white;
    font-family: 'Work Sans', sans-serif;
    border: 2px solid rgb(200,200,200);
    border-radius: 2.5rem;
    padding: 4px 8px;
    transition: 0.3s;
    padding: 1rem;
    text-align: center;
}

.customization input[type="text"]:hover, .customization button:hover,
.customization input[type="text"]:focus, .customization button:focus {
    border-color: red;
    background: rgb(40,0,0);
}

.customization form > * {
    margin: 1rem 0;
}

/* Status bar */
.statusBar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-width: 12em;
    padding: 10px;
    background: rgb(20,20,20);
    border-right: 4px solid rgb(40,40,40);
    overflow-y: auto;
}

.statusBar h2, .statusBar h3, .statusBar li, .statusBar p {
    margin: 10px 0;
}


.statusBar button {
    background: black;
    color: white;
    font-family: 'Work Sans', sans-serif;
    border: 2px solid rgb(200,200,200);
    border-radius: 2rem;
    padding: 4px 8px;
    transition: 0.3s;
}

.statusBar button:hover, .statusBar button:focus {
    border-color: red;
    background: rgb(40,0,0);
}

.statusBar .item {
    transform:none;
    text-transform: capitalize;
}

.panic {
    color: red;
    font-weight: bold;
}

.party {
    color: cyan;
    font-weight: bold;
}

/* The display */
.display {
    font-family: 'Ubuntu Mono', monospace;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    user-select: none;
}

@keyframes high {
    0% {
        background: rgb(100,0,0);
    }
    25% {
        background: rgb(0,100,0);
    }
    50% {
        background: rgb(0,0,100);
    }
    100% {
        background: rgb(100,0,0);
    }
}

.display.high {
    background: rgb(100,0,0);
    animation: high 10s linear infinite;
}

/* Make images match the size of the surrounding text */
.display img {
    width: 1em;
    height: 1em;
    object-fit:contain;
    object-position: center;
    display: block;
}

/* Messages */
.messages {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background: rgb(20,20,20);
    padding: 0 10px;
    overflow-y: scroll;
    border-top: 4px solid rgb(40,40,40);
    width: 100%;
    line-height: 1.4;
}

.messages li {
    margin: 10px 0;
    opacity: 0.6;
}

.messages li:first-child {
    opacity: 1;
}

.messages .bad {
    color: red;
}

.messages .good {
    color: yellow;
}

.messages button {
    display: inline;
    font-family: 'Work Sans', sans-serif;
    background: inherit;
    border: none;
    color: white;
    text-decoration: underline;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    transform: scale(1);
}

.messages button:hover, .messages button:focus {
    color: yellow;
    transform: scale(1.1);
}

/* Tiles */
.wall {
    background: brown;
    color: wheat;
}

.floor {
    background: black;
    color: white;
    font-weight: bold;
}
.redWall {
    background: rgb(50,0,0);
    color: rgb(200,0,0);
}

.blueWall {
    background: rgb(20,20,100);
    color: rgb(100,100,250);
}

.greenWall {
    background: rgb(0,100,0);
    color: rgb(120,200,120);
}

.purpleWall {
    background: rgb(80,0,100);
    color: rgb(200,120,210);
}

.critter {
    color: white;
    font-weight: normal;
}

.player {
    color: white;
    font-weight: normal;
}

.left {
    transform:scaleX(-1);
}

.dead {
    transform:scaleY(-1);
}

.stairs {
    color: white;
    font-weight: bold;
}

.explosion {
    color: red;
    background: yellow;
}

.scorch {
    color: gray;
}

.blood {
    background: darkred;
}

.barf {
    background: yellow;
    color: green;
}

.memory {
    filter:grayscale(90%) brightness(70%);
    font-weight: normal;
}

@keyframes rotate {
    0% {
        transform: rotate(0turn);
    }
    100% {
        transform: rotate(-1turn);
    }
}

.portal {
    animation: rotate 2s linear infinite;
}

@media(max-height:800px) {
    .statusBar {
        grid-row: 1/3;
    }

    .messages {
        grid-column: 2/3;
    }
}

@media(max-width:666px) {
    h2 {
        font-size: 2.2rem;
    }
    h3 {
        font-size: 2rem;
    }
    body {
        font-size:1.6rem;
    }

    .statusBar button {
        padding: 1rem;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    main {
        grid-template-columns: 20rem auto;
    }

    .customization form {
        width: auto;
    }
}

@media(max-width:500px) {
    main {
        display: flex;
        flex-direction: column;
    }

    .display {
        flex-grow: 1;
    }

    .messages {
        flex-basis: 30vh;
    }

    .statusBar {
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateX(-100%);
        transition: 0.3s;
        z-index:10;
        border: 4px solid rgb(40,40,40);
    }

    .statusBar.open {
        transform: translateX(0%);
    }

    .hamburger {
        display: block;
        position: fixed;
        width: 40px;
        height: 40px;
        right: 12px;
        top: 10px;
        z-index: 20;
    }

    .hamburger button {
        position:absolute;
        border: none;
        background: inherit;
        top:0;
        bottom:0;
        left:0;
        right:0;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        padding:0;
    }

    .hamburger button:hover .meat,
    .hamburger button:hover .meat::before,
    .hamburger button:hover .meat::after,
    .hamburger button:focus .meat,
    .hamburger button:focus .meat::before,
    .hamburger button:focus .meat::after {
        background: rgb(0,255,0);
    }

    .hamburger .meat {
        position: absolute;
        top:calc(50% - 2px);
        height: 4px;
        background: white;
        left:0;
        right:0;
        border-radius: 2px;
        transition: 0.3s;
    }

    .hamburger .meat::before, .hamburger .meat::after {
        content:"";
        position: absolute;
        height: 4px;
        background: white;
        left: 0;
        right: 0;
        border-radius: 2px;
        transition: 0.3s;
    }

    .hamburger .meat::before {
        top:calc(50% - 2px - 12px);
    }
    .hamburger .meat::after {
        top:calc(50% - 2px + 12px);
    }

    .hamburger.clicked .meat {
        transform:rotate(45deg);
    }

    .hamburger.clicked .meat::before {
        top:calc(50% - 2px);
        transform:rotate(-90deg);
    }
    .hamburger.clicked .meat::after {
        top:calc(50% - 2px);
        transform:rotate(-90deg);
    }
}