@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap";

/* base.css */
.black {
  background-color: #000 !important;
}

.white {
  background-color: #fff !important;
}

.red {
  background-color: #cb5d64 !important;
}

.green {
  background-color: #899b67 !important;
}

.blue {
  background-color: #608a9c !important;
}

.yellow {
  background-color: #eccc45 !important;
}

.paper {
  background-color: #e2e0db !important;
}

.hint {
  background-color: #fff4 !important;
}

html {
  font-size: 100%;
}

body {
  box-sizing: border-box;
  margin: 0;
}

.btn {
  aspect-ratio: 1;
  color: #000;
  cursor: pointer;
  display: flex;
  text-align: center;
  text-transform: uppercase;
  background-color: #fff;
  border: 4px solid #fff;
  border-radius: 99px;
  justify-content: center;
  align-items:  center;
  transition: border-color .1s ease-in-out;
  font-family: Nunito, sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
}

.btn > img {
  max-width: 40px;
  transition: invert .1s ease-in-out;
  aspect-ratio: 1 !important;
}

.btn.selected {
  border-color: #000;
}

.btn.disabled {
  opacity: .25;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .btn {
    min-width: 64px;
    max-width: 96px;
    font-size: 1.5rem;
  }
}

@media (hover: hover) {
  .btn:hover {
    background-color: #e2e0dc;
    border-color: #000;
  }
}

@media (hover: none) {
  .btn:active {
    border-color: #000;
  }
}

.btn.toggle {
  border-color: #000;
}

.btn.toggle.selected {
  color: #0000;
  position: relative;
  background-color: #c95050 !important;
  border-color: #c95050 !important;
}

.btn.toggle.selected img {
  opacity: 0;
}

.btn.toggle.selected:after {
  content: "x";
  position: absolute;
  display: flex;
  color: #fff;
  justify-content: center;
  align-items:  center;
  font-family: Nunito, sans-serif;
  font-size: 1.2rem;
  inset: 0;
}

.modal {
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
}

.modal:not(.floating) {
  background-color: #e2e0db;
  border: 4px solid #fff;
  border-radius: 14px;
  padding: 10px;
}

@media screen and (min-width: 768px) {
  .modal:not(.floating) {
    padding: 20px;
  }
}

#debug {
  color: #a00;
  position: absolute;
  z-index: 2;
  font-size: .75rem;
  top: 6px;
  left: 7px;
}

#app {
  box-sizing: border-box;
  position: relative;
  background-color: #e2e0db;
  width: 100dvw;
  height: 100dvh;
}

#ui .btn {
  pointer-events: auto;
  align-self:  center;
}

.no-scroll-area {
  touch-action: none;
  overflow: hidden;
}

.dn {
  display: none !important;
}

.hidden, .hidden * {
  display: none !important;
  pointer-events: none !important;
}

.invisible, .invisible * {
  visibility: hidden !important;
  pointer-events: none !important;
}

.flex {
  display: flex !important;
}

.row {
  flex-direction: row !important;
}

.col {
  flex-direction: column !important;
}

.flex1 {
  flex: 1;
}

.gap5 {
  gap: 5px !important;
}

.gap10 {
  gap: 10px !important;
}

.wrap {
  flex-wrap: wrap !important;
}

.mb050 {
  margin-bottom: .5rem;
}

.mb100 {
  margin-bottom: 1rem;
}

.mb200 {
  margin-bottom: 2rem;
}

.ob {
  outline: 1px solid #000;
}

.oc {
  outline: 1px solid #0ff;
}

.of {
  outline: 1px solid #f0f;
}

.or {
  outline: 1px solid red;
}

.bob {
  border: 1px solid #000;
}

.boc {
  border: 1px solid #0ff;
}

.bof {
  border: 1px solid #f0f;
}

.bor {
  border: 1px solid red;
}

.bold {
  font-weight: bold !important;
}

.screen-center {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* style.css */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  font-optical-sizing: auto;
  margin: 0;
  font-family: Nunito, sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

body {
  display: flex;
  background-color: #111;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  width: 100dvw;
  height: 100dvh;
}

#notice {
  color: #000;
  display: flex;
  position: absolute;
  z-index: 1;
  justify-content: center;
  align-items:  center;
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 0;
  inset: 0;
  display: none !important;
}

@media screen and (orientation: portrait) {
  #notice {
    display: none !important;
  }
}

#app {
  box-sizing: border-box;
  position: relative;
  background-color: #e2e0db;
  width: 100dvw;
  height: 100dvh;
}

#app canvas {
  cursor: crosshair;
  position: absolute;
  background-color: #eee;
  border: 1px solid #0001;
  inset: 20px;
}

#ui {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(10, 1fr);
  grid-template-rows: repeat(10, minmax(0, 1fr));
  pointer-events: none;
  position: absolute;
  z-index: 2;
  justify-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  top: 0;
  left: 0;
}

#ui .btn {
  pointer-events: auto;
  align-self: stretch;
  height: auto;
}

#ui .btn {
  box-sizing: border-box;
  aspect-ratio: 1;
  align-self:  start;
  width: 100%;
  min-width: 0;
}

#ui .btn img {
  max-width: 100%;
  max-height: 100%;
}

#extras-btn {
  grid-area: 10 / 5 / span 1 / span 1;
  opacity: 1;
}

#pencil {
  grid-area: 10 / 1 / span 1 / span 1;
}

#brush {
  grid-area: 10 / 2 / span 1 / span 1;
}

#eraser {
  grid-area: 10 / 3 / span 1 / span 1;
}

#color {
  grid-area: 10 / 4 / span 1 / span 1;
}

#swap {
  grid-area: 1 / 6 / span 1 / span 1;
}

#ui-toggle {
  grid-area: 10 / 6 / span 1 / span 1;
}

.sidebar {
  display: flex;
  position: fixed;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  top: 50px;
  left: 0;
}

.sidebar .minibtn {
  display: inline-block;
  text-align: center;
  background-color: #fff;
  width: 20px;
  height: 50px;
  line-height: 44px;
}

.sidebar .minibtn img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 5px;
}

.sidebar .minibtn.selected {
  color: #fff;
  background: #000;
}

#ui-toggle.active {
  opacity: 1;
}

#options {
  grid-area: 2 / 1 / span 5 / span 1;
  z-index: 10;
  background-color: #fff4;
}

#options #size-1, #options #size-2, #options #size-3, #options .btn {
  margin: 10px 0;
  width: 32px !important;
  min-width: 32px !important;
}

#about {
  display: flex;
  align-items:  center;
  gap: 5px;
  justify-content: enter;
  background-color: #eee;
  border-color: #000;
  flex-direction: column;
  padding: 1rem;
  font-size: 1.1rem;
  box-shadow: 0 0 10px 5px #0008;
}

#about h1 {
  letter-spacing: 1px;
}

#about .version {
  margin-bottom: .25rem;
}

#about a {
  letter-spacing: .5px;
  font-weight: 400;
}

#top-row {
  display: flex;
  z-index: 11;
  gap: 10px;
  margin-bottom: auto;
  padding: 10px;
}

@media screen and (min-width: 768px) {
  #top-row {
    gap: 20px;
    padding: 20px;
  }
}

#bottom-row {
  display: flex;
  z-index: 1;
  justify-content: space-around;
  align-self:  flex-end;
  gap: 10px;
  width: 100%;
  padding: 10px;
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #bottom-row {
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 768px) {
  #bottom-row {
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
}

#tools {
  grid-area: 1 / 1 / 8 / 2;
  position: static;
  z-index: 10;
  display: flex;
  background-color: #eee;
  border: 4px solid #000;
  border-radius: 14px;
  flex-direction: column-reverse;
  place-self:  end center;
  gap: 10px;
  padding: .5rem;
  box-shadow: 0 0 10px 5px #0008;
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #tools {
    flex-direction: unset;
    justify-self: flex-start;
  }
}

#tools .btn {
  border-color: #000;
}

#tools .btn.selected {
  box-shadow: 0 0 5px 2px #c9505044;
}

#sizes {
  grid-area: 1 / 3 / 8 / 4;
  position: static;
  z-index: 10;
  display: flex;
  background-color: #eee;
  border: 4px solid #000;
  border-radius: 14px;
  flex-direction: column-reverse;
  place-self:  end center;
  gap: 10px;
  padding: .5rem;
  box-shadow: 0 0 10px 5px #0008;
}

#sizes .btn {
  border-color: #000;
}

#sizes .btn.selected {
  box-shadow: 0 0 5px 2px #c9505044;
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #sizes {
    flex-direction: unset;
    justify-self: flex-center;
  }
}

#modes {
  grid-area: 1 / 4 / 8 / 4;
  position: static;
  z-index: 10;
  display: flex;
  background-color: #eee;
  border: 4px solid #000;
  border-radius: 14px;
  flex-direction: column-reverse;
  place-self:  end center;
  gap: 10px;
  padding: .5rem;
  box-shadow: 0 0 10px 5px #0008;
}

#modes .btn {
  border-color: #000;
}

#modes .btn.selected {
  box-shadow: 0 0 5px 2px #c9505044;
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #modes {
    flex-direction: unset;
    justify-self: flex-center;
  }
}

#colors {
  grid-area: 4 / 2 / span 6 / span 4;
  position: static;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #eee;
  border: 4px solid #000;
  border-radius: 14px;
  place-self:  end center;
  gap: 10px;
  box-shadow: 0 0 10px 5px #0008;
}

#colors .btn {
  border-color: #000;
  min-width: 40px;
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #colors {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    justify-self: flex-start;
  }
}

#extras {
  grid-area: 2 / 5 / 9 / 6;
  position: static;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, 40px);
  grid-template-rows: repeat(3, 40px);
  background-color: #eee;
  border-color: #000;
  place-self:  start center;
  gap: 10px;
  padding: 10px;
  transform: translateX(-30px);
  box-shadow: 0 0 10px 5px #0008;
}

#extras .btn {
  aspect-ratio: unset;
  max-width: unset;
  border-color: #000;
  border-radius: 8px;
  height: 100%;
  font-size: 1rem;
}

#extras #clear {
  grid-area: 1 / 1 / span 1 / span 2 !important;
}

#extras #clear-all {
  grid-area: 1 / 2 / span 1 / span 1 !important;
}

#extras #share {
  grid-area: 2 / 1 / span 1 / span 2 !important;
}

#extras #show-about {
  grid-area: 3 / 1 / span 1 / span 2 !important;
}