:root { color-scheme: dark; }

.project-art-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: start center;
  background-color: #0b0907;
  background-image: url("tile3.jpg"), var(--tile-placeholder);
  background-size: 350px 350px;
  color: #e8dec2;
  font-family: "Courier New", monospace;
}

.project-art {
  --art-gutter-gap: .35rem;
  --art-side-label-width: 1.25rem;
  width: fit-content;
  max-width: calc(100vw - 1rem);
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid #685d43;
  border-radius: 12px;
  background: rgba(12, 10, 8, .94);
  box-shadow: 0 12px 36px #000;
}

.project-art h1 {
  margin: 0;
  color: #e8dec2;
  font: bold 1.15rem Verdana, sans-serif;
  text-transform: lowercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.instructions {
  width: fit-content;
  max-width: 100%;
  margin: .5rem 0 1rem;
  padding: .35rem .5rem;
  box-sizing: border-box;
  border: 1px solid #403a2b;
  border-radius: 5px;
  color: #aaa18c;
  font-size: .75rem;
}

.instructions summary { color: #e8dec2; cursor: pointer; }
.instructions p { margin: .45rem 0 .1rem; }

.alias-picker {
  display: flex;
  width: fit-content;
  margin-bottom: .55rem;
  border: 1px solid #685d43;
  border-radius: 7px;
  overflow: hidden;
}

.alias-picker input { position: absolute; opacity: 0; }

.alias-picker label {
  padding: .42rem .68rem;
  border-right: 1px solid #685d43;
  cursor: pointer;
  font-size: .82rem;
}

.alias-picker label:last-child { border-right: 0; }
.alias-picker input:checked + span { color: #10100c; background: #ffd75f; }

.alias-picker span {
  display: block;
  margin: -.42rem -.68rem;
  padding: .42rem .68rem;
}

.alias-picker input:focus-visible + span {
  outline: 2px solid #87ffff;
  outline-offset: -2px;
}

.art-toolbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
  flex-wrap: wrap;
}

.brush-symbol,
.tool-button,
.action-button {
  min-height: 2rem;
  box-sizing: border-box;
  border: 1px solid #685d43;
  border-radius: 5px;
  background: #17140f;
  color: #e8dec2;
  font: inherit;
}

.brush-symbol { min-width: 3rem; padding: .35rem .5rem; text-align: center; }
.tool-button { width: 2rem; padding: 0; cursor: pointer; }
.tool-button.is-active { border-color: #ffd75f; color: #17140f; background: #ffd75f; }
.italic-button { font-style: italic; }
.underline-button { text-decoration: underline; }
.flash-button { font-style: italic; }

.canvas-options {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: .2rem;
}

.canvas-options-divider {
  width: 1px;
  height: 2rem;
  background: #685d43;
}

.canvas-width {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #aaa18c;
  font-size: .75rem;
}

.canvas-width select {
  min-height: 2rem;
  border: 1px solid #685d43;
  border-radius: 5px;
  background: #17140f;
  color: #e8dec2;
  font: inherit;
}

.art-canvas {
  width: fit-content;
  max-width: 100%;
}

.art-size {
  display: block;
  margin: 0 0 .25rem;
  color: #aaa18c;
  font-size: .75rem;
  text-align: right;
}

.art-canvas-body {
  --art-columns: 30;
  --art-cell-width: 1.35rem;
  --art-row-height: calc(1.45rem + 1px);
  --art-column-label-height: 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content;
  column-gap: var(--art-gutter-gap);
  max-width: 100%;
}

.art-grid-wrap {
  display: grid;
  grid-template-columns: .8rem max-content;
  grid-template-rows: var(--art-column-label-height) auto;
  column-gap: .2rem;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  padding: 0 .45rem .45rem .2rem;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #685d43;
  border-radius: 7px;
  background: #080706;
}

.art-column-labels {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(var(--art-columns), var(--art-cell-width));
  width: max-content;
  height: var(--art-column-label-height);
  padding: .2rem 0 0;
  box-sizing: border-box;
  color: #aaa18c;
  font-size: .6rem;
  line-height: 1rem;
  text-align: center;
}

.art-row-labels,
.art-row-sizes {
  display: grid;
  grid-auto-rows: var(--art-row-height);
  color: #aaa18c;
  font-size: .7rem;
  line-height: var(--art-row-height);
  text-align: right;
}

.art-row-labels {
  font-size: .6rem;
  grid-column: 1;
  grid-row: 2;
  min-width: .8rem;
  text-align: center;
}

.art-row-sizes {
  grid-column: 2;
  grid-row: 1;
  min-width: var(--art-side-label-width);
  padding-top: calc(var(--art-column-label-height) + 1px);
}

.art-size.is-invalid,
.art-row-size.is-invalid { color: #ff5f5f; }

.art-grid {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(var(--art-columns), var(--art-cell-width));
  width: max-content;
  padding: 0;
  touch-action: none;
}

.art-cell {
  width: var(--art-cell-width);
  height: 1.45rem;
  padding: 0;
  border: 0;
  border-right: 1px dotted #29251d;
  border-bottom: 1px dotted #29251d;
  color: #e8dec2;
  background: #17140f;
  font: 1rem/1 "Courier New", monospace;
  cursor: crosshair;
}

.art-cell:hover { outline: 1px solid #ffd75f; outline-offset: -1px; }
.art-cell.is-type-cursor {
  position: relative;
  z-index: 1;
  outline: 2px solid #87ffff;
  outline-offset: -2px;
}
.is-bold { font-weight: bold; }
.is-italic { font-style: italic; }
.is-underlined { text-decoration: underline; }
.is-flashing { animation: mud-flash 1s steps(2, jump-none) infinite; }
.is-drawing .is-flashing { animation: none; }

@keyframes mud-flash { 50% { color: transparent; } }

.output-row {
  grid-column: 1;
  grid-row: 2;
  margin-top: .65rem;
}

.project-art textarea {
  width: 100%;
  height: 7rem;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #403a2b;
  border-radius: 5px;
  background: #080706;
  color: #aaa18c;
  font: .75rem/1.3 "Courier New", monospace;
}

.project-art textarea.is-invalid { border-color: #ff5f5f; }

.action-button {
  min-height: 1.75rem;
  padding: .25rem .55rem;
  font-size: .9rem;
  cursor: pointer;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2rem;
  margin-top: .4rem;
}

.footer-actions { display: flex; gap: .35rem; }

.status {
  flex: 1;
  margin: 0 calc(var(--art-side-label-width) + var(--art-gutter-gap)) 0 0;
  color: #e8dec2;
  font-size: .75rem;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .is-flashing { animation: none; }
}

@media (max-width: 34rem) {
  .project-art { margin: .5rem auto; padding: .75rem; }
}

@media (min-width: 34.01rem) and (max-width: 46rem) {
  .project-art { padding-inline: .25rem; }
}