/*
 .----------------.  .----------------.  .----------------.  .-----------------. .----------------.  .-----------------. .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| | _____  _____ | || |      __      | || |  _______     | || | ____  _____  | || |     _____    | || | ____  _____  | || |    ______    | |
| ||_   _||_   _|| || |     /  \     | || | |_   __ \    | || ||_   \|_   _| | || |    |_   _|   | || ||_   \|_   _| | || |  .' ___  |   | |
| |  | | /\ | |  | || |    / /\ \    | || |   | |__) |   | || |  |   \ | |   | || |      | |     | || |  |   \ | |   | || | / .'   \_|   | |
| |  | |/  \| |  | || |   / ____ \   | || |   |  __ /    | || |  | |\ \| |   | || |      | |     | || |  | |\ \| |   | || | | |    ____  | |
| |  |   /\   |  | || | _/ /    \ \_ | || |  _| |  \ \_  | || | _| |_\   |_  | || |     _| |_    | || | _| |_\   |_  | || | \ `.___]  _| | |
| |  |__/  \__|  | || ||____|  |____|| || | |____| |___| | || ||_____|\____| | || |    |_____|   | || ||_____|\____| | || |  `._____.'   | |
| |              | || |              | || |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------' 

Not only is looking at the code below a potential academic
integrity violation, but the code below is also crap.
Do not model your code after this.
You will fail the assignment.
*/

body {
    background: #f0eee4;
    color: black;
    margin: 0;
    padding: 0;
    font-family: verdana, arial, helvetica, sans-serif;

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

    min-height: 100vh;
    min-height: 100svh;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    flex-direction: row;
    background: #b31b1b;
    color: white;
    align-items: center;
    font-family: georgia, "times new roman", times, serif;
}

header a {
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0 1em;
    font-weight: normal;
    font-size: 20px;
    color: white;
    text-decoration: none;
}

header a:hover,
header a:focus {
    text-decoration: underline;
}

header a:active {
    text-decoration: none;
}

header h1 {
    margin: 0;
    padding: 0.5em 1em;
    text-align: center;
    flex-grow: 1;
    font-weight: normal;
    font-size: 25px;
}

pre, code {
    font-family: 'Consolas', monospace;
}

button {
    padding: 0.5em 1em;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

input[type="text"] {
    padding: 0.5em 1em;
}

input[type="number"] {
    width: 50px;
    padding: 0.5em 1em;
}

#connectForm {
    text-align: center;
    padding-top: 100px;
}

#connectForm input {
    min-width: 250px;
}

.cautionBox {
    padding: 20px;
    background: #fdcb6e;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px black solid;
}

.cautionBox .logo {
    font-size: 100px;
    margin: 0;
    padding: 0;
    margin-top: -30px;
    line-height: 150px;
    text-shadow: 0 0 5px black;
}

.cautionBox p {
    margin: 4px 0;
    font-size: 14px;
}

.cautionBox pre {
    text-align: left;
    display: inline-block;
    margin: 0 auto;
    line-height: 18px;
    font-size: 14px;
}

#mainContent {
    padding-top: 100px;
    padding-bottom: 20px;
    width: 95%;
}

.controlBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.controlBar .speedControl {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    flex-grow: 1;
}

.controlBar .speedControl form {
    display: flex;
    flex-direction: row;
}

.controlBar .speedControl button {
    line-height: 16px;
    margin: 0 5px;
}

.worldCritterWrap {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.worldCritterWrap section {
    display: block;
}

.worldCritterWrap section.world {
    flex-grow: 1;
    padding-right: 20px;
    width: calc(200% / 3);
}

.worldCritterWrap section.critter {
    width: calc(100% / 3);
    max-width: 400px;
    position: sticky;
    align-self: flex-start;
    top: 0;
}

.worldCritterWrap section.critter p {
    max-width: 100%;
    word-break: break-all;
}

.worldCritterWrap section.critter pre {
    max-width: 100%;
    max-height: 60vh;
    overflow: auto;
    padding: 1.5em 2em;
    box-shadow: inset 0 0 15px black;

    position: relative;
    margin: 0 0 1em 0;
    line-height: 15px;
}

.worldCritterWrap section.critter pre.marker::before {
    content: '>';
    top: var(--lineNum);
    position: absolute;
    left: 0.5em;
    margin: calc(1.5 * 15px) 0 0 0;
    line-height: 15px;
    font-size: 20px;
    font-weight: bold;
}

.worldCritterWrap section.critter select {
    padding: 0.5em 1em;
}

#selectedCritterDirectionSpinner {
    display: inline-block;
}

textarea {
    width: 50%;
    min-width: 400px;
    min-height: 200px;
}

#critterStatus {
    font-family: 'Consolas', monospace;
}

.worldHeader {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.worldOuterWrap {
    width: 100%;
    transform: translateZ(0);
}

#worldWrap {
    width: 100%;
    overflow: auto;
    padding: var(--radius);
    box-sizing: border-box;
    position: relative;
}

#worldWrap::after {
    content: '';
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 5;
    pointer-events: none;
    user-select: none;
}

#worldTable {
    border-collapse: collapse;
    table-layout: fixed;
}

#worldTable td {
    height: calc(0.5 * var(--radius) * sqrt(3));
    width: calc(var(--radius) * 1.5);
    min-width: calc(var(--radius) * 1.5);
    max-width: calc(var(--radius) * 1.5);
    margin: 0;
    padding: 0;
    position: relative;
}

#worldTable td > button {
    position: absolute;
    height: calc(var(--radius) * sqrt(3));
    max-width: calc(var(--radius) * 2);
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    background: white;
    top: calc(-0.25 * var(--radius) * sqrt(3));
    left: calc(-0.25 * var(--radius));
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#worldTable td > button:hover {
    color: black;
    background: radial-gradient(white, #555555);
}

#worldTable td > button:focus::after {
    background: darkred;
}

#worldTable td > button::after {
    content: '';
    display: block;
    position: absolute;

    top: 0;
    left: 0;

    --b: 2px;
    height: calc(var(--radius) * sqrt(3));
    box-sizing: border-box;
    aspect-ratio: 1/cos(30deg);
    clip-path: 
        polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
        var(--b) 50%,
        calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
        calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
        calc(100% - var(--b)) 50%,
        calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
        calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
        var(--b) 50%);
    background: rgba(0, 0, 0, 0.3);
}

#worldTable .rock {
    background: black;
    color: white;
    font-weight: bold;
}

#worldTable .food {
    background: darkgreen;
    color: white;
    font-weight: bold;
}

#worldTable .critter {
    font-size: calc(var(--radius) * 1.25);
    text-shadow: 0 0 5px black, 0 0 5px black, 0 0 2px black, 0 0 2px black;
}

#worldTable .critter span {
    text-align: center;
    padding: 0;
    display: inline-block;
    line-height: 0.7em;
}

#worldTable .critter.selected {
    background: darkblue;
    text-shadow: 0 0 5px white, 0 0 5px white, 0 0 2px white, 0 0 2px white;
}

#worldTable td {
    position: relative;
}

.zoomBtns {
    margin-right: 5px;
    white-space: nowrap;
}

.zoomBtns button {
    border: 1px black solid;
    background: white;
    font-size: 20px;
    font-weight: bold;
    padding: 0.3em;
    width: 40px;
}

.zoomBtns button:hover,
.zoomBtns button:focus {
    background: #eeeeee;
}

.zoomBtns button:active {
    background: #dddddd;
}

.zoomBtns button:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 0.5em;
}

.zoomBtns button:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 0.5em;
}

.popup {
    position: absolute;
    background: white;
    border: 1px black solid;
    box-shadow: 2px 2px 5px black;
    padding: 1em 1em 0 1em;
    margin: 0;
}

.popup p {
    white-space: nowrap;
}

.popup button {
    font-size: 12px;
}

@media (max-width: 1100px) {
    .controlBar {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 900px) {
    #connectForm {
        max-width: 100%;
    }

    .cautionBox {
        flex-direction: column;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cautionBox div {
        max-width: 100%;
        box-sizing: border-box;
    }

    .cautionBox pre {
        max-width: 100%;
        overflow: auto;
    }

    .worldCritterWrap {
        flex-direction: column;
    }

    .worldCritterWrap section.world,
    .worldCritterWrap section.critter {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .controlBar .speedControl {
        flex-direction: column;
        gap: 2px;
    }
}

@media (max-width: 600px) {
    header h1 {
        font-size: 0;
    }

    .worldHeader {
        flex-direction: column;
        gap: 0;
        align-items: start;
    }
    
    .worldHeader p {
        margin: 0;
    }
}