@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap");

:root {
  --red: #e00000;
  --white: #ffffff;
  --green: #008a00;
  /* Comic Neue only kicks in for people who don't have Comic Sans installed (most Linux/Android) */
  --comic: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive;
}

* {
  box-sizing: border-box;
}

/* things marked hidden stay hidden even when a rule below gives them a display type */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

body {
  background: var(--white);
  color: var(--red);
  font-family: var(--comic);
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  line-height: 1.1;
}

.home a,
.page-head a {
  color: var(--red);
  font-size: 1.75rem;
}

/* a button that looks like the underlined links */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font: 1.75rem var(--comic);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.link-button.small {
  font-size: 1.1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1rem 2rem;
}

/* home page */

.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* the whole screen is the drawing wall (wall.js) except this box, which sits on top of it */
.home-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 2rem 2.5rem;
  border: 4px solid var(--red);
  border-radius: 10px;
  background: var(--white);
}

.clowncar {
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
}

/* images page */

.collage {
  columns: 15rem;
  column-gap: 1.25rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.tile {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.5rem 0.4rem;
  border: 4px solid var(--red);
  border-radius: 10px;
  background: var(--white);
  transform: rotate(var(--tilt, 0deg));
}

.tile:nth-child(4n + 1) { --tilt: -1.5deg; }
.tile:nth-child(4n + 2) { --tilt: 1deg; }
.tile:nth-child(4n + 3) { --tilt: -0.5deg; }
.tile:nth-child(4n + 4) { --tilt: 1.5deg; }

.tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.tile figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.4rem;
  font-size: 0.9rem;
  text-align: left;
}

.tile .name {
  overflow-wrap: anywhere;
}

.copy {
  flex: none;
  padding: 0.15em 0.7em;
  border: 2px solid var(--red);
  border-radius: 999px;
  background: var(--white);
  color: var(--red);
  font: 700 0.85rem var(--comic);
  cursor: pointer;
}

.copy:focus-visible {
  background: var(--red);
  color: var(--white);
}

.empty {
  font-size: 1.25rem;
}

.post-dialog {
  width: min(26rem, 100% - 2rem);
  padding: 1.25rem;
  border: 4px solid var(--red);
  border-radius: 10px;
  background: var(--white);
  color: var(--red);
  font-family: var(--comic);
  text-align: center;
}

.post-dialog::backdrop {
  background: rgb(255 255 255 / 0.85);
}

.post-dialog h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 12rem;
  padding: 1rem;
  border: 3px dashed var(--red);
  border-radius: 10px;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* keeps dragging over the preview or text from flickering the highlight */
.drop > * {
  pointer-events: none;
}

.drop.over {
  background: #ffe5e5;
}

.drop:has(input:focus-visible) {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.drop img {
  max-width: 100%;
  max-height: 14rem;
}

.password {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 1.2rem;
}

.password input {
  width: 6rem;
  padding: 0.25rem 0.5rem;
  border: 3px solid var(--red);
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font: 700 1.3rem var(--comic);
  letter-spacing: 0.3em;
  text-align: center;
}

.password input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.post-message {
  min-height: 1.5em;
  margin: 0.75rem 0;
}

/* server page */

.status-box {
  width: min(28rem, 100% - 2rem);
  margin: 0 auto 1.5rem;
  padding: 0.25rem 1.25rem;
  border: 4px solid var(--red);
  border-radius: 10px;
}

.status-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-box li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  font-size: 1.4rem;
  text-align: left;
}

.status-box li + li {
  border-top: 2px solid var(--red);
}

.status {
  white-space: nowrap;
}

.status.online {
  color: var(--green);
  font-weight: 700;
}

.status.offline {
  color: var(--red);
}

/* starting, applying and stopping */
.status.busy {
  color: #b35f00;
  font-weight: 700;
}

/* counter strike 2 */

.cs2-box {
  width: min(36rem, 100% - 2rem);
  margin: 0 auto 3rem;
  padding: 1rem 1.25rem;
  border: 4px solid var(--red);
  border-radius: 10px;
  text-align: left;
}

.cs2-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.cs2-head h2 {
  margin: 0;
  font-size: 1.6rem;
}

.cs2-head .status {
  font-size: 1.4rem;
}

.cs2-detail {
  margin: 0.25rem 0 0;
  font-size: 1rem;
}

.field select:disabled {
  opacity: 0.6;
}

.cs2-box .links {
  margin-top: 1rem;
}

.cs2-scores {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.cs2-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  font-size: 1.15rem;
}

.cs2-team span {
  min-width: 10rem;
  font-weight: 700;
  text-align: center;
}

.cs2-connect {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cs2-connect input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 3px solid var(--red);
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font: 700 1.15rem var(--comic);
}

.cs2-connect .copy {
  padding: 0.3em 1em;
  font-size: 1rem;
}

/* blog page */

.blog {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(40rem, 100% - 2rem);
  margin: 0 auto;
  text-align: left;
}

/* a box of clickable rows (blog posts, apps) */
.post-list {
  padding: 0 1.25rem;
  border: 4px solid var(--red);
  border-radius: 10px;
}

/* each row is one link; it reaches the box edges so the whole row is clickable */
.post-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 -1.25rem;
  padding: 0.75rem 1.25rem;
  color: var(--red);
  text-decoration: none;
}

.post-row + .post-row {
  border-top: 2px solid var(--red);
}

.post-row:hover {
  background: #fff0f0;
}

.post-row:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}

.row-subject {
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.post-row .meta {
  margin: 0;
}

.blog .empty,
.older {
  text-align: center;
}

.post,
.tool {
  padding: 1rem 1.25rem;
  border: 4px solid var(--red);
  border-radius: 10px;
}

.post h2 {
  margin: 0;
  font-size: 1.6rem;
  overflow-wrap: anywhere;
}

.meta {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.9rem;
}

.text {
  margin: 0;
  font-size: 1.1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.text a {
  color: var(--red);
}

.comments {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--red);
}

.comments h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

.comment {
  padding: 0.5rem 0;
}

.comment + .comment {
  border-top: 1px dashed var(--red);
}

.comment .text {
  font-size: 1rem;
}

.comment-form {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--red);
}

.comment-form .password {
  justify-content: flex-start;
}

.older {
  margin: 1.5rem 0 3rem;
}

/* form fields for posts, comments and apps */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.75rem;
  font-size: 1.1rem;
  text-align: left;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: 3px solid var(--red);
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font: 1.05rem var(--comic);
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.post-dialog.wide {
  width: min(36rem, 100% - 2rem);
}

/* apps */

.apps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(40rem, 100% - 2rem);
  margin: 0 auto 3rem;
  text-align: left;
}

.tool .links {
  margin-top: 1rem;
}

/* fields side by side */
.field-row {
  display: flex;
  gap: 1rem;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 1.1rem;
}

.check input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--red);
}

.big-result {
  min-height: 1.5em;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

/* team creator */

/* two teams side by side in boxes of the same size */
.teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.team {
  padding: 0.75rem 1rem;
  border: 4px solid var(--red);
  border-radius: 10px;
  text-align: center;
}

.team h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}

.team ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.team .captain {
  font-weight: 700;
}

/* spin the wheel */

.wheel {
  position: relative;
  width: min(22rem, 100%);
  margin: 0 auto;
}

.wheel canvas {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 4s cubic-bezier(0.15, 0.85, 0.2, 1);
}

/* the arrow at the top that points at the winner */
.wheel-pointer {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 1.75rem solid #000000;
  border-right: 0.9rem solid transparent;
  border-left: 0.9rem solid transparent;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .wheel canvas {
    transition: none;
  }
}

/* roll the dice */

.dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.dice:not(:empty) {
  margin-top: 1rem;
}

.die {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 4px solid var(--red);
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 700;
}

/* image resizer */

.resized img {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  margin: 0 auto;
}

.resized .meta {
  text-align: center;
}

.field input[type="range"] {
  padding: 0;
  border: 0;
  accent-color: var(--red);
}

.field input[type="range"]:disabled {
  opacity: 0.4;
}

/* admin terminal */

/* the tab that's showing is bold */
.tabs [aria-pressed="true"] {
  font-weight: 700;
}

.admin-message {
  margin: 0.5rem 0 0;
  text-align: center;
}

.admin-count {
  margin: 0 0 0.5rem;
  text-align: center;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.post-list > .admin-row + .admin-row,
.admin-post + .admin-post {
  border-top: 2px solid var(--red);
}

.admin-row img {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 6px;
  object-fit: cover;
}

.admin-row .grow {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.admin-row .meta {
  margin: 0;
}

.admin-actions {
  display: flex;
  flex: none;
  gap: 1rem;
}

.admin-post-details {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px dashed var(--red);
  border-radius: 8px;
}

.admin-post-details h3 {
  margin: 0.75rem 0 0;
  font-size: 1.1rem;
}

.admin-comment {
  align-items: flex-start;
}

.admin-comment + .admin-comment {
  border-top: 1px dashed var(--red);
}

.cs2-console {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cs2-console input,
.cs2-output {
  font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;
}

.cs2-console input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 3px solid var(--red);
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font-size: 1rem;
}

.cs2-console input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.cs2-output {
  min-height: 12rem;
  max-height: 60vh;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  border: 3px solid var(--red);
  border-radius: 8px;
  color: var(--red);
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* drawing wall on the home page (wall.js) */

.wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.wall-tools {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 9rem;
  padding: 0.6rem;
  border: 3px solid var(--red);
  border-radius: 10px;
  background: var(--white);
  color: var(--red);
  font-family: var(--comic);
}

/* The invisible admin link: the little square in the bottom right corner of the screen, just past the
   toolbar's corner. It sits outside the toolbar's box, so nothing moves.
   (The extra 3px steps past the toolbar's 3px border; the toolbar is 1rem from the edges.) */
.admin-door {
  position: absolute;
  top: calc(100% + 3px);
  left: calc(100% + 3px);
  width: 1rem;
  height: 1rem;
}

.wall-tools input[type="color"] {
  width: 100%;
  height: 2rem;
  padding: 0;
  border: 2px solid var(--red);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}

.wall-tool-row {
  display: flex;
  gap: 0.4rem;
}

.wall-tools button {
  flex: 1;
  padding: 0.15em 0;
  border: 2px solid var(--red);
  border-radius: 999px;
  background: var(--white);
  color: var(--red);
  font: 700 0.85rem var(--comic);
  cursor: pointer;
}

.wall-tools button[aria-pressed="true"] {
  background: var(--red);
  color: var(--white);
}

.wall-size {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.wall-size input {
  flex: 1;
  min-width: 0;
  accent-color: var(--red);
}

/* rainbow fade on every button and button-like link while it's hovered (color only, nothing moves) */

@keyframes rainbow {
  0%, 100% { color: #e00000; border-color: #e00000; }
  17% { color: #ff7a00; border-color: #ff7a00; }
  33% { color: #e0b000; border-color: #e0b000; }
  50% { color: #00a300; border-color: #00a300; }
  67% { color: #0066ff; border-color: #0066ff; }
  83% { color: #9b00d9; border-color: #9b00d9; }
}

/* same colors for buttons that are filled in (the selected wall tool) */
@keyframes rainbow-fill {
  0%, 100% { background-color: #e00000; border-color: #e00000; }
  17% { background-color: #ff7a00; border-color: #ff7a00; }
  33% { background-color: #e0b000; border-color: #e0b000; }
  50% { background-color: #00a300; border-color: #00a300; }
  67% { background-color: #0066ff; border-color: #0066ff; }
  83% { background-color: #9b00d9; border-color: #9b00d9; }
}

.home a:hover,
.page-head a:hover,
.link-button:hover:not(:disabled),
.copy:hover,
.post-row:hover .row-subject,
.wall-tools button:hover {
  animation: rainbow 2s linear infinite;
}

.wall-tools button[aria-pressed="true"]:hover {
  animation-name: rainbow-fill;
}