@font-face {
  font-family: Fredoka;
  src: url('../assets/fredoka-700.woff2');
}
@font-face {
  font-family: Fredoka;
  src: url('../assets/fredoka-500.woff2');
  font-weight: 500;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #123b3a;
}
body,
button {
  font-family: Fredoka, system-ui, sans-serif;
}
button {
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.game {
  height: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
}
.scene {
  position: relative;
  width: min(100vw, 177.78dvh);
  height: min(100dvh, 56.25vw);
  container-type: size;
  overflow: hidden;
  background: #258f88 url('../assets/bg-home.jpg') center/100% 100% no-repeat;
  color: #54242a;
}
.topbar {
  position: absolute;
  inset: 1.6% 2% auto;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.logo {
  position: absolute;
  width: 43%;
  height: 10cqh;
  object-fit: contain;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.top-right {
  display: flex;
  gap: 1cqw;
  margin-left: auto;
}
.icon-btn,
.game-btn {
  position: relative;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  text-shadow:
    0 0.15em 0 #4d251d,
    0 0 0.12em #4d251d;
  border: 0.23cqw solid #63321b;
  border-radius: 1.2cqw;
  box-shadow:
    inset 0 0.22cqw #ffffff80,
    inset 0 -0.45cqw #0003,
    0 0.35cqw #65351680;
  transition:
    transform 0.12s,
    filter 0.12s;
}
.icon-btn:active,
.game-btn:active,
.category-tile:active {
  transform: translateY(0.25cqw) scale(0.97);
}
.icon-btn:disabled {
  filter: grayscale(1);
  opacity: 0.65;
  cursor: default;
}
.icon-btn {
  width: 7.5cqw;
  height: 7.5cqh;
  font-size: 4.5cqh;
  line-height: 1;
}
.icon-btn svg {
  width: 60%;
  height: 60%;
  fill: white;
  stroke: white;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orange {
  background: linear-gradient(#ffdf42 0%, #ffa000 27%, #ff8900 76%, #d55800);
}
.green {
  background: linear-gradient(#a7fa29 0%, #18dc00 30%, #00bc09 75%, #008b10);
}
.purple {
  background: linear-gradient(#dfa1ff, #aa46ec 38%, #7d1bd7);
}
.red {
  background: linear-gradient(#ff7770, #ed2423 55%, #b50d20);
}
.blue {
  background: linear-gradient(#84dcff, #009bea 50%, #0065ba);
}
.game-btn {
  min-height: 7cqh;
  padding: 0.12em 0.6em;
  font-size: 4cqh;
  border-radius: 1.5cqw;
  text-transform: uppercase;
  white-space: normal;
  line-height: 1;
  letter-spacing: 0.01em;
}
.game-btn.big {
  font-size: 9cqh;
  min-width: 28cqw;
  min-height: 20cqh;
}
.game-btn.small {
  font-size: 2.2cqh;
  min-height: 5.5cqh;
}
.screen {
  position: absolute;
  inset: 0;
}
.mascot {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 9%;
  width: 20%;
  height: 42%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  animation: bob 4s ease-in-out infinite;
}
.game[data-screen='studio'] .mascot {
  bottom: 14%;
}
.game[data-screen='splash'] .mascot {
  display: none;
}
.game[data-screen='categories'] .logo,
.game[data-screen='drawings'] .logo {
  display: none;
}
.game[data-screen='home'] .logo {
  width: 61%;
  height: 20cqh;
}
.paper {
  background: #fffdf7;
  border: 0.4cqw solid #f6e5cf;
  border-radius: 1.2cqw;
  box-shadow: 0 0.4cqw 0.3cqw #754a3270;
}
.home-art {
  position: absolute;
  top: 27%;
  left: 24%;
  width: 35%;
  height: 60%;
  overflow: hidden;
}
.home-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 51%;
}
.home-buttons {
  position: absolute;
  left: 63%;
  top: 36%;
  width: 30%;
  display: grid;
  gap: 4cqh;
}
.home-buttons .orange {
  font-size: 4cqh;
}
.splash {
  display: grid;
  place-content: center;
  text-align: center;
}
.splash img {
  width: 38cqw;
  max-height: 60cqh;
  object-fit: contain;
}
.skip {
  background: #fff8;
  border: 0;
  border-radius: 1em;
  color: #613424;
  font-size: 2.5cqh;
  padding: 0.4em 1em;
  justify-self: center;
}
.heading {
  margin: 0;
  display: inline-block;
  color: #4b126b;
  background: #fff9e7;
  border: 0.25cqw solid #e5a347;
  border-radius: 2cqw;
  box-shadow: 0 0.35cqw #b66424;
  font-size: 5.5cqh;
  line-height: 1.15;
  text-align: center;
  padding: 0.12em 0.65em;
  text-shadow: 0 0.06em #fff;
  max-width: 85%;
  z-index: 1;
}
.category-screen,
.drawing-screen {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 1cqh;
  gap: 1cqh;
}
.book {
  position: relative;
  background: linear-gradient(110deg, #fff8e9, #f8e7ca);
  border: 0.7cqw solid #8a23bf;
  border-radius: 1.6cqw;
  box-shadow:
    inset 0 0 0 0.35cqw #c67fe2,
    0 0.5cqw 0 #61225e,
    0 0.8cqw 1cqw #3a1e1766;
}
.book:before,
.book:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.6cqw;
  width: 4cqw;
  height: 3cqw;
  background: linear-gradient(#fff266, #ffaf00);
  border: 0.2cqw solid #a75a08;
  border-radius: 0.8cqw;
  pointer-events: none;
}
.book:before {
  left: -0.7cqw;
}
.book:after {
  right: -0.7cqw;
}
.category-screen .book {
  width: 65%;
  height: 76%;
  padding: 2% 4% 1%;
}
.category-grid {
  height: 81%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2% 3%;
}
.category-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.25cqw solid #a55c12;
  border-radius: 3cqw;
  box-shadow:
    inset 0 0.4cqw #ffffff88,
    inset 0 -0.55cqw #0002,
    0 0.35cqw #82421a55;
  line-height: 1;
  min-height: 0;
  color: #451071;
  font-size: 4.3cqh;
  font-weight: 700;
  overflow: hidden;
}
.category-tile img {
  width: 36%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 0.2cqw 0.1cqw #4227);
}
.category-tile span {
  overflow-wrap: anywhere;
}
.category-tile:nth-child(4n + 1) {
  background: linear-gradient(#fff25c, #ffbe08);
}
.category-tile:nth-child(4n + 2) {
  background: linear-gradient(#94f9ff, #00cbd5);
}
.category-tile:nth-child(4n + 3) {
  background: linear-gradient(#f1b4ff, #b646f2);
}
.category-tile:nth-child(4n) {
  background: linear-gradient(#ccff4a, #70dd00);
}
.pager {
  height: 19%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}
.pager .icon-btn {
  width: 5.5cqw;
  height: 6.5cqh;
}
.counter,
.choice-footer span {
  background: #ffe6c6;
  border: 2px solid #fff;
  border-radius: 1em;
  padding: 0.1em 1em;
  font-size: 3.5cqh;
  color: #5a2917;
}
.drawing-screen .heading {
  min-width: 25%;
}
.drawing-choice {
  height: 64%;
  width: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
.choice-paper {
  height: 100%;
  aspect-ratio: 1/1.05;
  padding: 1%;
  display: flex;
  flex-direction: column;
  gap: 1%;
  overflow: hidden;
}
.choice-image {
  height: 85%;
  overflow: hidden;
  border-radius: 0.5cqw;
}
.choice-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.choice-footer {
  display: flex;
  justify-content: space-between;
  gap: 1%;
  height: 14%;
  min-height: 0;
}
.choice-footer span {
  font-size: 3.4cqh;
  display: grid;
  place-items: center;
  flex: 1;
  white-space: nowrap;
  padding: 0 0.3em;
}
.choice-footer span:first-child {
  flex: 2;
}
.arrow {
  flex: none;
}
.color-btn {
  min-width: 29%;
  min-height: 13%;
  font-size: 7cqh;
}
.studio .paper-wrap {
  position: absolute;
  top: 12%;
  left: 27%;
  width: 46%;
  height: 68%;
  overflow: hidden;
  padding: 1%;
}
.drawing,
.raster-holder {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.drawing svg,
.paint-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  touch-action: manipulation;
}
.raster-holder canvas {
  max-width: 100%;
  max-height: 100%;
}
.paint-transition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.drawing svg .region {
  cursor: pointer;
}
.drawing svg .region:hover {
  filter: brightness(0.94);
}
#sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.spark {
  position: absolute;
  width: 1.5cqw;
  height: 1.5cqw;
  background: #fff76c;
  border-radius: 50%;
  animation: spark 0.6s ease-out forwards;
}
.studio-tools {
  position: absolute;
  bottom: 2%;
  left: 6%;
  right: 6%;
  height: 16%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2%;
}
.palette-area {
  height: 100%;
  display: flex;
  align-items: end;
  gap: 1cqw;
}
.palette {
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5cqw;
}
.crayon {
  position: relative;
  display: block;
  width: 4.2cqw;
  height: 100%;
  border: 0;
  background: none;
  padding: 0;
  transition: transform 0.15s;
}
.crayon img,
.crayon-tint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.crayon img {
  filter: grayscale(1) brightness(0.75);
  mix-blend-mode: multiply;
}
.crayon-tint {
  background: var(--color);
  mask: url('../assets/crayon-v2.png') center/contain no-repeat;
  -webkit-mask: url('../assets/crayon-v2.png') center/contain no-repeat;
}
.crayon[aria-pressed='true'] {
  transform: translateY(-12%);
  filter: drop-shadow(0 0 0.7cqw #fff853);
}
.crayon.extra {
  display: none;
}
.palette.expanded .extra,
.crayon.keep-extra {
  display: block;
}
.done {
  width: 22%;
  height: 78%;
  font-size: 6cqh;
}
.modal {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: #101012a8;
  display: grid;
  place-items: center;
}
.modal-card {
  width: min(55%, 66cqw);
  max-height: 90%;
  padding: 3% 5%;
  text-align: center;
  overflow: auto;
}
.modal-card:before,
.modal-card:after {
  display: none;
}
.modal-card .heading {
  font-size: 4.8cqh;
  max-width: 100%;
  margin-bottom: 2cqh;
}
.modal-card .close {
  position: absolute;
  right: -1.5cqw;
  top: -2cqh;
  width: 6cqw;
  height: 8cqh;
}
.modal-actions {
  display: grid;
  gap: 1.5cqh;
  justify-items: stretch;
}
.modal-actions .game-btn {
  font-size: 3.5cqh;
  min-height: 8cqh;
}
.modal-copy {
  font-size: 3cqh;
  font-weight: 500;
  margin: 1cqh 0 2cqh;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: 3cqh;
  background: #ffe2bc;
  border-radius: 1em;
  padding: 0.25em 0.6em;
  margin: 0.5em 0;
  text-align: left;
}
.setting-row select {
  font: inherit;
  max-width: 50%;
  border: 2px solid #c8792e;
  border-radius: 0.6em;
  background: #fff8e8;
  color: #522063;
}
.switch {
  min-width: 6em;
  padding: 0.3em 0.6em;
  font: inherit;
  border: 2px solid #308130;
  border-radius: 1em;
  color: white;
  background: #31bd2c;
}
.switch[aria-pressed='false'] {
  background: #888;
  border-color: #666;
}
.finish-art {
  height: 33cqh;
  max-width: 80%;
  object-fit: contain;
  background: white;
  border: 0.4cqw solid white;
  border-radius: 1cqw;
}
.loading {
  font-size: 3cqh;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
@keyframes bob {
  50% {
    transform: translateY(-1.2%);
  }
}
@keyframes spark {
  to {
    transform: translate(var(--x), var(--y)) scale(0.2);
    opacity: 0;
  }
}
.reduced * {
  animation: none !important;
  transition: none !important;
}
@media (orientation: portrait) {
  .scene {
    width: 100vw;
    height: 100dvh;
    background-size: auto 100%;
    background-position: center;
  }
  .topbar {
    inset: 2% 5% auto;
  }
  .logo {
    width: 65%;
    height: 8cqh;
  }
  .game[data-screen='home'] .logo {
    top: 8cqh;
    width: 85%;
    height: 10cqh;
  }
  .icon-btn {
    width: 15cqw;
    height: 7cqh;
    font-size: 5cqh;
    border-width: 0.55cqw;
    border-radius: 3cqw;
  }
  .top-right {
    gap: 3cqw;
  }
  .mascot {
    left: 35%;
    bottom: 1%;
    width: 30%;
    height: 19%;
  }
  .game[data-screen='studio'] .mascot {
    left: 3%;
    bottom: 1%;
    width: 23%;
    height: 16%;
  }
  .home-art {
    top: 22%;
    left: 16%;
    width: 68%;
    height: 39%;
    border-width: 1cqw;
    border-radius: 3cqw;
  }
  .home-buttons {
    left: 20%;
    top: 64%;
    width: 60%;
    gap: 2cqh;
  }
  .game-btn.big {
    min-height: 10cqh;
    font-size: 6cqh;
  }
  .game-btn {
    border-width: 0.6cqw;
    border-radius: 3cqw;
    font-size: 3.4cqh;
    min-height: 6cqh;
  }
  .home-buttons .orange {
    font-size: 3cqh;
  }
  .category-screen,
  .drawing-screen {
    padding-top: 11cqh;
    gap: 1.5cqh;
  }
  .heading {
    max-width: 86%;
    font-size: 3.7cqh;
    border-width: 0.5cqw;
    border-radius: 3cqw;
  }
  .category-screen .book {
    width: 90%;
    height: 64%;
    padding: 3% 4%;
    border-width: 1.4cqw;
    border-radius: 3cqw;
  }
  .category-grid {
    height: 83%;
    gap: 2%;
  }
  .category-tile {
    border-width: 0.5cqw;
    border-radius: 5cqw;
    font-size: 2.7cqh;
  }
  .category-tile img {
    width: 60%;
    height: 60%;
  }
  .pager {
    height: 17%;
    gap: 5cqw;
  }
  .pager .icon-btn {
    width: 14cqw;
    height: 6cqh;
  }
  .counter,
  .choice-footer span {
    font-size: 2.8cqh;
  }
  .book:before,
  .book:after {
    width: 8cqw;
    height: 5cqw;
  }
  .drawing-choice {
    height: 51%;
    width: 95%;
    gap: 2cqw;
  }
  .choice-paper {
    height: auto;
    width: 68%;
    max-height: 100%;
    aspect-ratio: 1/1.08;
    padding: 1.5%;
    border-width: 1cqw;
  }
  .choice-image {
    height: 85%;
  }
  .choice-footer span {
    font-size: 2cqh;
  }
  .drawing-choice .arrow {
    width: 11cqw;
    height: 7cqh;
  }
  .color-btn {
    min-width: 55%;
    min-height: 9%;
    font-size: 4.5cqh;
  }
  .studio .paper-wrap {
    top: 12%;
    left: 8%;
    width: 84%;
    height: auto;
    aspect-ratio: 1/1;
    max-height: 43%;
    border-width: 1cqw;
    border-radius: 3cqw;
    padding: 2%;
  }
  .studio-tools {
    top: 55%;
    bottom: 2%;
    left: 5%;
    right: 5%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .palette-area {
    height: 65%;
    width: 100%;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: start;
    gap: 0.5cqh;
  }
  .palette {
    height: auto;
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.4cqh 3cqw;
    place-items: center;
  }
  .palette.expanded {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .crayon {
    width: 12cqw;
    height: 100%;
    min-height: 0;
  }
  .crayon[aria-pressed='true'] {
    transform: translateY(-5%);
  }
  .game-btn.small {
    font-size: 1.8cqh;
    min-height: 3.7cqh;
  }
  .done {
    align-self: flex-end;
    width: 65%;
    height: 9cqh;
    font-size: 4.5cqh;
  }
  .modal-card {
    width: 85%;
    max-height: 80%;
    border-width: 1.4cqw;
    border-radius: 3cqw;
    padding: 5%;
  }
  .modal-card .heading {
    font-size: 3.6cqh;
  }
  .modal-card .close {
    width: 13cqw;
    height: 6cqh;
    right: -2cqw;
    top: -2cqh;
  }
  .modal-actions .game-btn {
    font-size: 2.6cqh;
    min-height: 6cqh;
  }
  .modal-copy,
  .setting-row {
    font-size: 2.3cqh;
  }
  .finish-art {
    height: 28cqh;
  }
  .splash img {
    width: 65cqw;
  }
  .skip {
    font-size: 2cqh;
  }
}
@media (orientation: landscape) and (max-height: 450px) {
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .crayon {
    min-width: 38px;
  }
  .category-tile {
    font-size: 4cqh;
  }
}
.home-art img {
  position: absolute;
  width: 235%;
  height: 151%;
  left: -51%;
  top: -21%;
  object-fit: fill;
}
.crayon img {
  filter: var(--crayon-filter);
  mix-blend-mode: normal;
}
.crayon.replaced {
  display: none;
}
.logo {
  height: 15cqh;
  top: -2.5cqh;
}
.game[data-screen='home'] .logo {
  height: 27cqh;
  top: -3cqh;
}
.category-tile img {
  width: 55%;
  height: 65%;
}
.game-btn:before,
.icon-btn:before {
  content: '';
  position: absolute;
  left: 7%;
  top: 6%;
  width: 32%;
  height: 12%;
  border-radius: 100%;
  background: #fff9;
  transform: rotate(-8deg);
  pointer-events: none;
}
.icon-btn {
  height: 9cqh;
  width: 6cqw;
}
.top-right .icon-btn {
  width: 6cqw;
}
.pager .icon-btn {
  height: 7cqh;
}
@media (orientation: portrait) {
  .game[data-screen='studio'] .logo {
    display: none;
  }
  .game[data-screen='home'] .logo {
    height: 15cqh;
    top: 5cqh;
  }
  .icon-btn,
  .top-right .icon-btn {
    width: 15cqw;
    height: 7cqh;
  }
  .category-tile img {
    width: 70%;
    height: 65%;
  }
}
.category-tile {
  position: relative;
}
.category-tile:after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 0.18cqw dashed #a5602855;
  border-radius: 2.5cqw;
  pointer-events: none;
}
.category-grid:before,
.category-grid:after {
  content: '';
  position: absolute;
  top: -0.6cqw;
  width: 4cqw;
  height: 3cqw;
  background: linear-gradient(#fff266, #ffaf00);
  border: 0.2cqw solid #a75a08;
  border-radius: 0.8cqw;
  z-index: 2;
}
.category-grid:before {
  left: -0.7cqw;
}
.category-grid:after {
  right: -0.7cqw;
}
.crayon {
  width: 5.2cqw;
  min-width: 44px;
}
.crayon img {
  transform: scale(1.32);
}
.palette {
  gap: 0.2cqw;
}
.finish-screen {
  display: flex;
  justify-content: center;
  align-items: center;
}
.finish-screen .heading {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7cqh;
  white-space: nowrap;
}
.finish-picture {
  position: absolute;
  top: 24%;
  left: 25%;
  width: 34%;
  height: 63%;
  object-fit: contain;
  background: #fffdf7;
}
.finish-actions {
  position: absolute;
  top: 25%;
  left: 60%;
  width: 26%;
  height: 62%;
  padding: 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8%;
}
.finish-actions .game-btn {
  min-height: 32%;
  font-size: 4.2cqh;
}
.game[data-screen='finish'] .mascot {
  bottom: 10%;
}
.raster-holder canvas.paint-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.raster-holder .paint-transition {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (orientation: portrait) {
  .category-grid:before,
  .category-grid:after {
    width: 8cqw;
    height: 5cqw;
  }
  .category-tile:after {
    inset: 5%;
    border-width: 0.45cqw;
    border-radius: 4cqw;
  }
  .crayon {
    width: 13cqw;
    min-width: 44px;
  }
  .crayon img {
    transform: scale(1.35);
  }
  .finish-screen .heading {
    top: 4%;
    font-size: 4cqh;
  }
  .finish-picture {
    top: 17%;
    left: 11%;
    width: 78%;
    height: 43%;
    border-width: 1cqw;
  }
  .finish-actions {
    top: 70%;
    left: 8%;
    width: 84%;
    height: 26%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    gap: 10%;
  }
  .finish-actions:before,
  .finish-actions:after {
    display: none;
  }
  .finish-actions .game-btn {
    min-height: 40%;
    font-size: 3.5cqh;
  }
  .game[data-screen='finish'] .mascot {
    left: 6%;
    bottom: 30%;
    width: 25%;
    height: 15%;
  }
}
.drawing,
.raster-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.raster-holder {
  overflow: hidden;
}
.raster-holder canvas.paint-canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (orientation: landscape) {
  .game[data-expanded='true'] .studio .paper-wrap {
    height: 57%;
  }
  .game[data-expanded='true'] .studio-tools {
    left: 3%;
    right: 3%;
    height: 27%;
    align-items: center;
  }
  .game[data-expanded='true'] .palette-area {
    width: 71%;
    align-items: center;
  }
  .game[data-expanded='true'] .palette {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    grid-template-rows: repeat(2, minmax(44px, 1fr));
    width: 100%;
    height: 100%;
    gap: 0;
  }
  .game[data-expanded='true'] .crayon {
    width: 100%;
    height: 100%;
    min-width: 44px;
  }
  .game[data-expanded='true'] .crayon img {
    transform: scale(0.95);
  }
  .game[data-expanded='true'] .done {
    height: 75%;
    min-width: 16%;
    font-size: 5cqh;
  }
  .game[data-expanded='true'] .game-btn.small {
    min-width: 9cqw;
  }
  .game[data-expanded='true'][data-screen='studio'] .mascot {
    left: 3%;
    bottom: 28%;
    height: 31%;
    width: 20%;
  }
}
@media (orientation: portrait) {
  .palette-area {
    height: 75%;
  }
  .game-btn.small {
    min-height: 44px;
  }
  .palette.expanded .crayon {
    min-height: 44px;
  }
  .palette.expanded .crayon img {
    transform: scale(0.95);
  }
}
.topbar .icon-btn,
.game-btn.small {
  min-width: 44px;
  min-height: 44px;
}
.game-btn:disabled {
  filter: grayscale(0.75);
  opacity: 0.65;
  cursor: default;
}
.screen.entering:not(.finish-screen) {
  animation: screen-enter 220ms ease-out both;
}
.modal:not([hidden]) .modal-card {
  animation: modal-enter 220ms ease-out both;
}
.spark {
  background: var(--spark-color, #fff76c);
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  filter: drop-shadow(0 0 3px white);
}
.finish-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.finish-sparkles img {
  position: absolute;
  width: 8cqw;
  height: 12cqh;
  object-fit: contain;
  opacity: 0;
}
.finish-sparkles img:nth-child(1) {
  left: 20%;
  top: 22%;
  animation-delay: 50ms;
}
.finish-sparkles img:nth-child(2) {
  left: 53%;
  top: 17%;
  animation-delay: 130ms;
}
.finish-sparkles img:nth-child(3) {
  left: 20%;
  top: 70%;
  animation-delay: 210ms;
}
.finish-sparkles img:nth-child(4) {
  left: 53%;
  top: 72%;
  animation-delay: 90ms;
}
.finish-screen.entering .finish-picture {
  animation: finish-picture 600ms cubic-bezier(0.22, 1.18, 0.36, 1) both;
}
.finish-screen.entering .heading {
  animation: finish-heading 500ms cubic-bezier(0.22, 1.18, 0.36, 1) both;
}
.finish-screen.entering .finish-sparkles img {
  animation-name: finish-sparkle;
  animation-duration: 900ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.game[data-screen='finish'] .mascot {
  animation:
    mascot-celebrate 700ms ease-out both,
    bob 4s ease-in-out 1s infinite;
}
@keyframes screen-enter {
  from {
    opacity: 0.65;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modal-enter {
  from {
    opacity: 0.6;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes finish-picture {
  0% {
    opacity: 0.6;
    transform: translateY(12px) scale(0.96);
  }
  65% {
    opacity: 1;
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes finish-heading {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes finish-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
  }
  35% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(12deg);
  }
}
@keyframes mascot-celebrate {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  35% {
    transform: translateY(-8px) rotate(-4deg);
  }
  65% {
    transform: translateY(-3px) rotate(3deg);
  }
}
@media (orientation: portrait) {
  .finish-sparkles img {
    width: 15cqw;
    height: 9cqh;
  }
  .finish-sparkles img:nth-child(1) {
    left: 4%;
    top: 15%;
  }
  .finish-sparkles img:nth-child(2) {
    left: 82%;
    top: 17%;
  }
  .finish-sparkles img:nth-child(3) {
    left: 5%;
    top: 52%;
  }
  .finish-sparkles img:nth-child(4) {
    left: 80%;
    top: 50%;
  }
}
.icon-btn {
  min-width: 44px;
  min-height: 44px;
}
.spark {
  width: clamp(14px, 1.8cqw, 24px);
  height: clamp(14px, 1.8cqw, 24px);
  background: #fff;
  filter: drop-shadow(0 0 4px var(--spark-color)) drop-shadow(0 1px 1px #784000);
}
.paint-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--spark-color),
    0 0 8px var(--spark-color);
  animation: paint-ring 500ms ease-out forwards;
  pointer-events: none;
}
.finish-sparkles img {
  width: 11cqw;
  height: 16cqh;
}
.finish-sparkles i {
  position: absolute;
  left: 25%;
  top: 26%;
  width: 8px;
  height: 14px;
  border-radius: 4px;
  background: #ffb700;
  opacity: 0;
}
.finish-sparkles i:nth-of-type(2) {
  background: #f45b85;
}
.finish-sparkles i:nth-of-type(3) {
  background: #59d948;
}
.finish-sparkles i:nth-of-type(4) {
  background: #20d9ef;
}
.finish-sparkles i:nth-of-type(n + 5) {
  left: 59%;
  top: 26%;
}
.finish-sparkles i:nth-of-type(5) {
  background: #ffb700;
}
.finish-sparkles i:nth-of-type(6) {
  background: #f45b85;
}
.finish-sparkles i:nth-of-type(7) {
  background: #59d948;
}
.finish-sparkles i:nth-of-type(8) {
  background: #20d9ef;
}
.finish-screen.entering .finish-sparkles i {
  animation: confetti 850ms ease-out both;
}
.finish-sparkles i:nth-of-type(1) {
  --dx: -55px;
  --dy: -25px;
}
.finish-sparkles i:nth-of-type(2) {
  --dx: -48px;
  --dy: 25px;
}
.finish-sparkles i:nth-of-type(3) {
  --dx: -25px;
  --dy: 65px;
}
.finish-sparkles i:nth-of-type(4) {
  --dx: -70px;
  --dy: 70px;
}
.finish-sparkles i:nth-of-type(5) {
  --dx: 45px;
  --dy: -25px;
}
.finish-sparkles i:nth-of-type(6) {
  --dx: 60px;
  --dy: 20px;
}
.finish-sparkles i:nth-of-type(7) {
  --dx: 30px;
  --dy: 60px;
}
.finish-sparkles i:nth-of-type(8) {
  --dx: 70px;
  --dy: 65px;
}
@keyframes paint-ring {
  0% {
    opacity: 1;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3) rotate(0);
  }
  20% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.9) rotate(140deg);
  }
}
@media (orientation: portrait) {
  .game[data-screen='studio'] .mascot {
    width: 26%;
    height: 17%;
    bottom: 0;
  }
  .finish-sparkles img {
    width: 18cqw;
    height: 11cqh;
  }
  .finish-sparkles i {
    left: 11%;
    top: 19%;
  }
  .finish-sparkles i:nth-of-type(n + 5) {
    left: 88%;
    top: 19%;
  }
  .drawing-choice {
    gap: min(2cqw, 3px);
  }
  .drawing-choice .choice-paper {
    width: min(68%, calc(100% - 94px));
  }
}
@media (orientation: landscape) {
  .finish-picture {
    left: 24%;
    top: 21%;
    width: 39%;
    height: 66%;
  }
  .finish-actions {
    left: 64%;
    width: 23%;
    padding: 2%;
  }
  .finish-sparkles img:nth-child(2),
  .finish-sparkles img:nth-child(4) {
    left: 59%;
  }
}
@media (orientation: portrait) {
  .game[data-expanded='true'][data-screen='studio'] .mascot {
    width: 20%;
    height: 12%;
  }
}
@media (orientation: portrait) {
  .studio .paper-wrap {
    top: 11%;
    left: 4%;
    width: 92%;
    max-height: 43.5%;
    padding: 1%;
  }
}
.zoom svg {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
}
.zoom[aria-pressed='true'] .zoom-plus {
  display: none;
}
.drawing.is-zoomed {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.drawing.is-zoomed .raster-holder {
  width: 170%;
  height: 170%;
}
.drawing.is-zoomed svg {
  width: 170%;
  height: auto;
  max-width: none;
}
.drawing.is-zoomed:focus-visible {
  outline: 3px solid #9a55e9;
  outline-offset: -3px;
}
.zoom svg {
  width: 75%;
  height: 75%;
  stroke-width: 3.5;
}
.zoom-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  padding: 0.35em 0.8em;
  border: 2px solid #ffc665;
  border-radius: 1em;
  background: #5c247cdd;
  color: #fff;
  font-size: clamp(12px, 2.1cqh, 18px);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.zoom-hint span:first-child {
  color: #ffe56b;
  font-size: 1.25em;
}
.drawing.is-zoomed {
  cursor: grab;
}
.drawing.is-zoomed:active {
  cursor: grabbing;
}
@media (orientation: portrait) {
  .palette-area {
    height: 65%;
  }
  .game[data-expanded='true'] .palette-area {
    height: 75%;
  }
  .game[data-screen='studio'] .mascot {
    width: 24%;
    height: 15%;
  }
}
.crayon[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6a269b;
  color: #fff;
  font:
    700 13px/1 system-ui,
    sans-serif;
  box-shadow: 0 2px 3px #4227;
  pointer-events: none;
}
@media (orientation: portrait) {
  .scene {
    background-image: url('../assets/bgp-home.jpg');
    background-size: 100% 100%;
  }
}
@media (orientation: portrait) {
  .palette {
    row-gap: 1cqh;
  }
  .crayon img {
    transform: scale(1.12);
  }
  .palette.expanded .crayon img {
    transform: scale(0.9);
  }
}
.category-tile img[src*='-v3.png'] {
  transform: scale(1.25);
}
@media (orientation: portrait) {
  .palette.expanded {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    grid-template-rows: repeat(2, minmax(44px, 1fr));
    column-gap: 0;
  }
  .palette.expanded .crayon img {
    transform: scale(1);
  }
}
.game[data-screen='splash'] .scene {
  background: #060e19;
}
/* End of src/base.css */