/* v4 polish: settings panel, toggles and the 14-language chooser. Loaded last. */

/* ---------- Modal shell: never scrolls, sized per content ---------- */
.modal-card {
  overflow: visible;
  max-height: none;
  box-sizing: border-box;
}
.modal[data-kind='settings'] .modal-card,
.modal[data-kind='audio'] .modal-card {
  width: min(62cqw, 760px);
  padding: 2.4cqh 3cqw 3.4cqh;
}
.modal[data-kind='language'] .modal-card {
  width: min(72cqw, 900px);
  padding: 2.4cqh 3cqw 3.4cqh;
}
.modal-card .heading {
  font-size: clamp(20px, 5cqh, 46px);
  margin-bottom: 1.6cqh;
}
.modal-card .close {
  width: max(48px, 6cqw);
  height: max(48px, 8cqh);
  font-size: clamp(22px, 5cqh, 44px);
}

/* ---------- Rows ---------- */
.settings-list {
  display: grid;
  gap: max(6px, 1.2cqh);
}
.modal-body-audio,
#modal-body > .setting-row + .setting-row {
  margin-top: max(6px, 1.2cqh);
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  min-height: max(48px, 9.5cqh);
  padding: 0.2em 0.45em 0.2em 0.6em;
  font-size: clamp(15px, 3.3cqh, 30px);
  font-weight: 700;
  color: #4b126b;
  background: #ffe7c6;
  border-radius: 1em;
  box-shadow: inset 0 -0.12em #f1c995;
}
.setting-label {
  flex: 1;
  min-width: 0;
  line-height: 1.05;
  text-align: left;
}
.setting-icon {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  padding: 0.25em;
  box-sizing: border-box;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: #8a23bf;
  border-radius: 0.55em;
  box-shadow: inset 0 -0.12em #0003;
}
.setting-row:nth-child(2) .setting-icon {
  background: #1686e7;
}
.setting-row:nth-child(3) .setting-icon {
  background: #f08a12;
}
.setting-row:nth-child(4) .setting-icon {
  background: #e2458f;
}
.setting-row:has([data-action='language']) .setting-icon {
  background: #18a79f;
}

/* ---------- Toggle: knob slides, state readable without reading ---------- */
.switch {
  position: relative;
  flex: none;
  width: 5.4em;
  min-width: 0;
  height: max(44px, 1.9em);
  padding: 0;
  margin: 0;
  border: 0.14em solid #1f7a1f;
  border-radius: 999px;
  background: linear-gradient(#5fe04a, #2fae2a);
  color: #fff;
  font: inherit;
  font-size: 0.9em;
  font-weight: 700;
  box-shadow:
    inset 0 0.14em #ffffff70,
    inset 0 -0.16em #0002,
    0 0.14em #0003;
  cursor: pointer;
  transition:
    background-color 0.2s,
    filter 0.12s,
    transform 0.12s;
}
.switch:active {
  transform: translateY(2px);
}
.switch[aria-checked='false'] {
  background: linear-gradient(#b8bec4, #8c949b);
  border-color: #666d73;
}
.switch-text {
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translateY(-50%);
  text-shadow: 0 0.08em #0004;
  transition: left 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.switch[aria-checked='false'] .switch-text {
  left: auto;
  right: 0.75em;
}
.switch-knob {
  position: absolute;
  top: 50%;
  right: 0.2em;
  width: 1.65em;
  height: 1.65em;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2c9d29;
  border-radius: 50%;
  font-size: 1em;
  line-height: 1;
  box-shadow: 0 0.1em 0.15em #0004;
  transform: translate(0, -50%);
  transition:
    transform 0.26s cubic-bezier(0.3, 1.5, 0.5, 1),
    color 0.2s;
}
.switch[aria-checked='false'] .switch-knob {
  color: #7b838a;
  transform: translate(-3.07em, -50%);
}

/* ---------- Language ---------- */
.lang-current {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  max-width: 55%;
  padding: 0.25em 0.5em 0.25em 0.8em;
  font: inherit;
  font-size: 0.85em;
  color: #4b126b;
  background: #fffaf0;
  border: 0.14em solid #d68a35;
  border-radius: 999px;
  box-shadow: 0 0.12em #c6772a;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-current span {
  font-size: 1.4em;
  line-height: 0.8;
  color: #d68a35;
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(6px, 1.2cqh);
}
.lang-option {
  min-height: max(44px, 9cqh);
  padding: 0.2em 0.4em;
  font: inherit;
  font-weight: 700;
  font-size: clamp(14px, 2.9cqh, 26px);
  color: #fff;
  background: linear-gradient(#b65be6, #8a23bf);
  border: 0.12em solid #5f167f;
  border-radius: 0.8em;
  box-shadow:
    inset 0 0.12em #ffffff60,
    0 0.14em #4a0f63;
  text-shadow: 0 0.08em #0005;
  cursor: pointer;
  line-height: 1.1;
}
.lang-option[aria-checked='true'] {
  background: linear-gradient(#45a8ff, #1676d8);
  border-color: #0d4f99;
  box-shadow:
    0 0 0 0.18em #ffd84a,
    0 0.14em #0d4f99;
}
.lang-option:active,
.lang-current:active {
  transform: translateY(2px);
}

/* Low landscape phones: two columns so nothing scrolls. */
@media (orientation: landscape) and (max-height: 500px) {
  .modal[data-kind='settings'] .modal-card,
  .modal[data-kind='audio'] .modal-card {
    width: 86cqw;
  }
  .modal[data-kind='settings'] .settings-list {
    grid-template-columns: 1fr 1fr;
  }
  .modal[data-kind='language'] .modal-card {
    width: 92cqw;
  }
  .lang-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .setting-row {
    font-size: 15px;
  }
  .lang-option {
    font-size: 14px;
  }
  .modal-card .heading {
    font-size: 20px;
    margin-bottom: 8px;
  }
}

/* Portrait: full-width card, bigger rows. */
@media (orientation: portrait) {
  .modal[data-kind='settings'] .modal-card,
  .modal[data-kind='audio'] .modal-card,
  .modal[data-kind='language'] .modal-card {
    width: 90cqw;
    padding: 2.4cqh 4cqw 3cqh;
  }
  .setting-row {
    font-size: clamp(16px, 2.3cqh, 26px);
    min-height: max(52px, 6.5cqh);
  }
  .lang-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lang-option {
    font-size: clamp(15px, 2.2cqh, 24px);
    min-height: max(48px, 5.8cqh);
  }
  .modal-card .heading {
    font-size: clamp(22px, 3.6cqh, 40px);
  }
}

.reduced .switch-knob,
.reduced .switch-text {
  transition: none;
}

/* ---------- Button plates are 3:1 art: boxes keep 3:1, never stretched ---------- */
.game-btn.green,
.game-btn.orange,
.game-btn.purple {
  aspect-ratio: 3 / 1;
  height: auto !important;
  min-height: 0 !important;
}
.color-btn {
  width: 22%;
  min-width: 0;
  font-size: clamp(18px, 6cqh, 64px);
}
.done {
  width: 20%;
  font-size: clamp(16px, 5.4cqh, 54px);
}
.game[data-expanded='true'] .done {
  width: 17%;
  min-width: 0;
  font-size: clamp(15px, 4.6cqh, 46px);
}
.modal-actions {
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
  align-items: center;
}
.modal-actions .game-btn {
  width: 100%;
  font-size: clamp(13px, 2.8cqh, 28px);
}
.modal[data-kind='leave'] .modal-card,
.modal[data-kind='finish'] .modal-card {
  width: min(58cqw, 720px);
}
.modal-copy {
  font-size: clamp(15px, 3cqh, 28px);
}
.finish-actions .game-btn {
  font-size: clamp(14px, 2.8cqh, 30px);
}
.choice-footer {
  font-size: max(14px, 1em);
}
@media (orientation: portrait) {
  .color-btn {
    width: 58%;
    font-size: clamp(18px, 4.5cqh, 44px);
  }
  .done,
  .game[data-expanded='true'] .done {
    width: 62%;
    font-size: clamp(18px, 4.5cqh, 44px);
  }
  .modal-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .modal-actions .game-btn {
    width: min(100%, 64cqw);
    font-size: clamp(15px, 2.4cqh, 24px);
  }
  .modal[data-kind='leave'] .modal-card,
  .modal[data-kind='finish'] .modal-card {
    width: 88cqw;
  }
}

/* ---------- "More colors": a real chunky pill, readable everywhere ---------- */
#more-colors {
  min-width: 44px;
  min-height: 44px;
  padding: 0.25em 0.8em;
  white-space: nowrap;
  font-size: clamp(13px, 2.4cqh, 22px);
  color: #fff;
  border: 0.14em solid #0d4f99;
  border-radius: 999px;
  background: linear-gradient(#5bb8ff, #1676d8);
  box-shadow:
    inset 0 0.14em #ffffff70,
    0 0.16em #0d4f99;
  text-shadow: 0 0.08em #0d4f99;
}
/* Small landscape phones: plates keep 3:1 but never under 44 px tall. */
.done,
.game[data-expanded='true'] .done {
  min-width: 138px;
}
.finish-actions .game-btn,
.modal-actions .game-btn {
  min-width: 138px;
}
.lang-current {
  font-size: max(14px, 0.85em);
}
.choice-footer span {
  font-size: max(14px, 1em);
}
.drawing .loading {
  font-size: max(15px, 1em);
}

/* ---------- Crayons: one clean grey crayon tinted with the exact paint colour ---------- */
.crayon {
  isolation: isolate;
}
.crayon img {
  filter: none !important;
  mix-blend-mode: normal !important;
}
.crayon .crayon-tint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color);
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask: url('../assets/crayon-gray.png') center / contain no-repeat;
  mask: url('../assets/crayon-gray.png') center / contain no-repeat;
  transform: scale(1.32);
}
@media (orientation: portrait) {
  .crayon .crayon-tint {
    transform: scale(1.35);
  }
}

/* ---------- Flying mascot: hovers, never "stands" on anything ---------- */
.mascot {
  animation: fly-hover 3.2s ease-in-out infinite !important;
  transform-origin: 50% 60%;
}
@keyframes fly-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4.5%) rotate(2deg);
  }
}
@media (orientation: landscape) {
  .game[data-screen='studio'] .mascot {
    bottom: 27%;
    left: 2.5%;
    width: 17%;
    height: 36%;
  }
  .game[data-screen='home'] .mascot,
  .game[data-screen='categories'] .mascot,
  .game[data-screen='drawings'] .mascot {
    bottom: 16%;
  }
}
.game[data-screen='finish'] .mascot {
  animation:
    fly-cheer 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    fly-hover 3.2s ease-in-out 0.9s infinite !important;
}
@keyframes fly-cheer {
  0% {
    transform: translateY(18%) scale(0.9);
  }
  55% {
    transform: translateY(-10%) scale(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.reduced .mascot {
  animation: none !important;
}

/* ---------- Crayon pick: quick springy pop ---------- */
.crayon.pop {
  animation: crayon-pop 300ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes crayon-pop {
  0% {
    transform: translateY(-12%) scale(1);
  }
  40% {
    transform: translateY(-20%) scale(1.12);
  }
  100% {
    transform: translateY(-12%) scale(1);
  }
}
@media (orientation: portrait) {
  @keyframes crayon-pop {
    0% {
      transform: translateY(-5%);
    }
    40% {
      transform: translateY(-12%) scale(1.1);
    }
    100% {
      transform: translateY(-5%);
    }
  }
}

/* ---------- Sparks: bigger burst in the paint colour; dead tap = soft grey ring ---------- */
.spark {
  width: clamp(14px, 2cqw, 28px);
  height: clamp(14px, 2cqw, 28px);
}
.paint-ring.miss {
  border-color: #ffffffcc;
  box-shadow: 0 0 0 1px #0002;
  animation-duration: 380ms;
}

/* ---------- Done!: dim until the first colour, then breathes once ---------- */
#finish:disabled {
  filter: saturate(0.35) brightness(1.05);
  opacity: 0.75;
}
#finish:not(:disabled) {
  animation: done-ready 700ms cubic-bezier(0.3, 1.6, 0.5, 1) 1;
}
@keyframes done-ready {
  0% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Finish: picture "stamps" in, then confetti behind the buttons ---------- */
.finish-screen.entering .finish-picture {
  animation: picture-stamp 420ms cubic-bezier(0.5, 0, 0.6, 1.4) both !important;
}
@keyframes picture-stamp {
  0% {
    opacity: 0;
    transform: scale(1.25) rotate(-3deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.97) rotate(0.5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.finish-actions,
.finish-screen .heading {
  z-index: 2;
}
.confetti-layer i {
  position: absolute;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confetti-fly 1.7s cubic-bezier(0.2, 0.65, 0.4, 1) both;
}
@keyframes confetti-fly {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  35% {
    transform: translate(var(--dx), var(--up)) rotate(calc(var(--rot) * 0.4));
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--dx) * 1.5), calc(var(--up) + 70cqh)) rotate(var(--rot));
    opacity: 0;
  }
}
.reduced .confetti-layer {
  display: none;
}

/* ---------- Categories: all five on one page ---------- */
.category-screen .pager {
  display: none;
}
.category-grid {
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
}
.category-tile {
  grid-column: span 2;
}
.category-tile:nth-child(4) {
  grid-column: 2 / 4;
}
.category-tile:nth-child(5) {
  grid-column: 4 / 6;
  background: linear-gradient(#ffc2df, #ff6fae);
}
@media (orientation: portrait) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .category-tile,
  .category-tile:nth-child(4) {
    grid-column: auto;
  }
  .category-tile:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
  }
}

/* ---------- Finish: no empty purple panel, two big buttons ---------- */
.finish-actions {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  justify-content: center;
  gap: 4cqh !important;
}
.finish-actions::before,
.finish-actions::after {
  display: none !important;
}
@media (orientation: landscape) {
  .finish-actions .game-btn {
    width: 100%;
    font-size: clamp(16px, 3.6cqh, 36px);
  }
}

/* ---------- Disabled icon buttons keep their colour (they look asleep, not broken) ---------- */
.icon-btn:disabled {
  filter: saturate(0.55) brightness(1.08);
  opacity: 0.55;
}

/* ---------- Finished drawings wear a gold seal ---------- */
.choice-paper {
  position: relative;
}
.choice-paper.done::after {
  content: '★';
  position: absolute;
  top: -3%;
  right: -3%;
  width: max(44px, 9cqh);
  height: max(44px, 9cqh);
  display: grid;
  place-items: center;
  font-size: max(26px, 5.5cqh);
  line-height: 1;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffe680, #f5a400);
  border: 0.2em solid #fff;
  border-radius: 50%;
  box-shadow: 0 0.2em 0.4em #0004;
  text-shadow: 0 0.06em #b86b00;
  transform: rotate(12deg);
}
@media (orientation: portrait) {
  .choice-paper.done::after {
    width: max(44px, 6cqh);
    height: max(44px, 6cqh);
    font-size: max(24px, 3.6cqh);
  }
}

/* ===== Round 2 (final critic) ===== */
/* Toggle: the ✓/✕ knob says it all; the word stays for screen readers only. */
.switch {
  width: 4.2em;
}
.switch-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.switch[aria-checked='false'] .switch-knob {
  transform: translate(-1.87em, -50%);
}
.switch-knob {
  font-weight: 700;
}

/* Done asleep (before the first colour) is still tappable and answers with a nudge. */
#finish[aria-disabled='true'] {
  filter: saturate(0.35) brightness(1.05);
  opacity: 0.75;
}
#finish[aria-disabled='false'] {
  animation: done-ready 700ms cubic-bezier(0.3, 1.6, 0.5, 1) 1;
}
#finish.nudge {
  animation: done-nudge 360ms ease-out 1 !important;
}
@keyframes done-nudge {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: -6px;
  }
  50% {
    translate: 5px;
  }
  75% {
    translate: -3px;
  }
}

/* Mascot keeps the same size when the palette opens (no jump). */
@media (orientation: landscape) {
  .game[data-expanded='true'][data-screen='studio'] .mascot {
    bottom: 27%;
    left: 2.5%;
    width: 17%;
    height: 36%;
  }
}
@media (orientation: portrait) {
  .game[data-expanded='true'][data-screen='studio'] .mascot {
    width: 26%;
    height: 17%;
    bottom: 0;
  }
  .game[data-screen='finish'] .mascot {
    left: 2%;
    bottom: auto;
    top: 58%;
    width: 22%;
    height: 12%;
  }
}

/* Finish picture lands solid, like a stamp (never washed out). */
@keyframes picture-stamp {
  0% {
    opacity: 1;
    transform: scale(1.14) rotate(-3deg);
  }
  70% {
    transform: scale(0.97) rotate(0.5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

/* Small landscape phones: a little headroom over the 44 px / 13 px minimums. */
@media (orientation: landscape) and (max-height: 500px) {
  .icon-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  #more-colors {
    font-size: 14px;
    min-height: 48px;
  }
  .done,
  .game[data-expanded='true'] .done {
    min-width: 150px;
  }
}

/* ===== Zoom v2: transform-based, the drawing never scrolls like a page ===== */
.drawing,
.drawing.is-zoomed {
  display: flex;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
.drawing.is-zoomed .raster-holder {
  width: 100%;
  height: 100%;
}
.drawing.is-zoomed svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.drawing > * {
  will-change: transform;
}
.drawing.is-zoomed {
  cursor: grab;
}
.drawing.is-zoomed:active {
  cursor: grabbing;
}

/* ===== No white band: the drawing itself is the sheet ===== */
.studio .paper-wrap {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
}
.studio .paper-wrap .drawing {
  border-radius: 1.4cqw;
}
.studio .raster-holder canvas.paint-canvas {
  border-radius: 1.4cqw;
  box-shadow:
    0 0.5cqw 0 #0000001f,
    0 0.8cqw 2cqw #3a1e1755;
}
@media (orientation: portrait) {
  .studio .paper-wrap .drawing,
  .studio .raster-holder canvas.paint-canvas {
    border-radius: 3cqw;
  }
}
/* Square sheet sized by height, so no side bands; the shadow sits on the sheet itself. */
.studio .raster-holder canvas.paint-canvas {
  box-shadow: none;
  border-radius: 0;
}
.studio .paper-wrap .drawing {
  background: #fff;
  box-shadow:
    0 0.5cqh 0 #0000001f,
    0 1cqh 2.4cqh #3a1e1755;
}
@media (orientation: landscape) {
  .studio .paper-wrap {
    width: 68cqh !important;
    left: calc(50% - 34cqh) !important;
  }
  .game[data-expanded='true'] .studio .paper-wrap {
    width: 57cqh !important;
    left: calc(50% - 28.5cqh) !important;
  }
}
@media (orientation: portrait) {
  .studio .paper-wrap {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
}
/* The sheet follows each drawing's own shape (the turtle is wider than tall). */
@media (orientation: landscape) {
  .studio .paper-wrap {
    width: calc(68cqh * var(--sheet, 1)) !important;
    left: calc(50% - 34cqh * var(--sheet, 1)) !important;
  }
  .game[data-expanded='true'] .studio .paper-wrap {
    width: calc(57cqh * var(--sheet, 1)) !important;
    left: calc(50% - 28.5cqh * var(--sheet, 1)) !important;
  }
}
@media (orientation: portrait) {
  .studio .paper-wrap {
    aspect-ratio: var(--sheet, 1);
  }
}

/* ===== Drawing chooser card: fixed size (a painted preview must not shrink it) and readable footer ===== */
.choice-footer span {
  font-size: max(14px, 3.4cqh);
}
.choice-image {
  min-width: 0;
  min-height: 0;
}
.choice-image img {
  min-width: 0;
  min-height: 0;
}
@media (orientation: landscape) {
  .drawing-choice .choice-paper {
    flex: none;
    height: 100%;
    width: 61cqh;
    aspect-ratio: auto;
  }
}
@media (orientation: portrait) {
  .choice-footer span {
    font-size: max(14px, 2.2cqh);
  }
  .drawing-choice .choice-paper {
    flex: none;
  }
}

/* ================= Round 3: bigger icons, type polish, more juice ================= */
/* ---- Icon buttons: square, larger, bold glyphs ---- */
.icon-btn svg,
.icon-btn svg.glyph {
  width: 66%;
  height: 66%;
  fill: none;
  stroke: #fff;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.12em 0 #0005);
}
#audio-open svg path:first-child,
#audio-open svg {
  fill: #fff;
}
#audio-open svg {
  stroke-width: 2.8;
}
#zoom svg {
  stroke-width: 3.6;
}
@media (orientation: landscape) {
  .icon-btn,
  .top-right .icon-btn {
    width: 11.5cqh;
    height: 11.5cqh;
    border-radius: 2.4cqh;
  }
  .drawing-choice .arrow {
    width: 13cqh;
    height: 13cqh;
  }
  .top-right {
    gap: 1.6cqh;
  }
}
@media (orientation: portrait) {
  .icon-btn,
  .top-right .icon-btn {
    width: 15.5cqw;
    height: 15.5cqw;
    border-radius: 3.6cqw;
  }
  .drawing-choice .arrow {
    width: 13cqw;
    height: 13cqw;
  }
}
.modal-card .close {
  width: max(48px, 10cqh);
  height: max(48px, 10cqh);
  right: -2.5cqh;
  top: -2.5cqh;
}
@media (orientation: portrait) {
  .modal-card .close {
    width: 13cqw;
    height: 13cqw;
    right: -3cqw;
    top: -3cqw;
  }
}

/* ---- Type: one consistent chunky voice ---- */
.game {
  font-family: Fredoka, 'Trebuchet MS', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.heading {
  font-size: clamp(22px, 6.4cqh, 64px);
  letter-spacing: 0.01em;
  padding: 0.14em 0.8em;
}
.game-btn {
  letter-spacing: 0.03em;
}
.category-tile {
  font-size: clamp(17px, 5cqh, 46px);
  color: #3d0d63;
  text-shadow: 0 0.06em #ffffffb0;
}
.category-tile span {
  margin-top: 0.15em;
}
.choice-footer span {
  font-size: clamp(16px, 4.2cqh, 40px);
  font-weight: 700;
}
.modal-copy {
  font-weight: 700;
  color: #4b126b;
}
#more-colors {
  font-size: clamp(14px, 2.9cqh, 26px);
}
.zoom-hint {
  font-size: clamp(14px, 2.6cqh, 22px);
}
@media (orientation: portrait) {
  .heading {
    font-size: clamp(22px, 4.2cqh, 44px);
  }
  .category-tile {
    font-size: clamp(17px, 3.1cqh, 34px);
  }
  .choice-footer span {
    font-size: clamp(16px, 2.7cqh, 30px);
  }
  #more-colors {
    font-size: clamp(15px, 2.3cqh, 24px);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .setting-row {
    font-size: 16px;
  }
  .lang-option {
    font-size: 15px;
  }
}

/* ---- Seal sits outside the card corner ---- */
.choice-paper {
  overflow: visible;
}
.choice-paper.done::after {
  top: -5%;
  right: -5%;
  animation: seal-pop 420ms cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
@keyframes seal-pop {
  from {
    transform: scale(0) rotate(-40deg);
  }
  to {
    transform: scale(1) rotate(12deg);
  }
}

/* ---- Buttons feel physical ---- */
.game-btn,
.icon-btn,
.category-tile,
.lang-option {
  transition:
    transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1),
    filter 0.12s;
}
@media (hover: hover) {
  .game-btn:hover,
  .icon-btn:not(:disabled):hover,
  .lang-option:hover {
    transform: translateY(-3%) scale(1.04);
    filter: brightness(1.07);
  }
  .category-tile:hover {
    transform: translateY(-2%) scale(1.03) rotate(-1deg);
    filter: brightness(1.05);
  }
  .category-tile:hover img {
    animation: tile-wiggle 0.5s ease-in-out;
  }
}
.game-btn:active,
.icon-btn:active,
.category-tile:active,
.lang-option:active {
  transform: translateY(4%) scale(0.94) !important;
  filter: brightness(0.95);
}
@keyframes tile-wiggle {
  0%,
  100% {
    rotate: 0deg;
  }
  30% {
    rotate: -9deg;
  }
  65% {
    rotate: 7deg;
  }
}
.category-tile img {
  animation: tile-float 3.4s ease-in-out infinite;
}
.category-tile:nth-child(2n) img {
  animation-delay: -1.1s;
}
.category-tile:nth-child(3n) img {
  animation-delay: -2.2s;
}
@keyframes tile-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5%;
  }
}

/* ---- Home: the logo lands, Play breathes ---- */
.home.entering ~ * {
}
.game[data-screen='home'] .logo {
  animation: logo-land 700ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes logo-land {
  from {
    transform: translateX(-50%) translateY(-60%) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}
#play {
  animation: play-breathe 2.2s ease-in-out infinite;
}
@keyframes play-breathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.045;
  }
}
#play::after {
  content: '';
  position: absolute;
  inset: 8% 4%;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent 40%, #ffffff70 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  animation: play-shine 3.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes play-shine {
  0%,
  55% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}

/* ---- Mascot is tappable ---- */
.mascot {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mascot.tapped {
  animation:
    pet-spin 700ms cubic-bezier(0.3, 1.4, 0.5, 1) 1,
    fly-hover 3.2s ease-in-out 0.7s infinite !important;
}
@keyframes pet-spin {
  0% {
    transform: translateY(0) rotate(0) scale(1);
  }
  40% {
    transform: translateY(-16%) rotate(200deg) scale(1.1);
  }
  100% {
    transform: translateY(0) rotate(360deg) scale(1);
  }
}

/* ---- Done!: a star that fills up as the picture gets painted ---- */
.done-star {
  position: absolute;
  top: -28%;
  right: -7%;
  width: 46%;
  aspect-ratio: 1;
  max-width: 9cqh;
  display: block;
  border-radius: 50%;
  background: conic-gradient(#ffd21f calc(var(--p, 0) * 360deg), #ffffffd0 0);
  border: 0.18em solid #fff;
  box-shadow: 0 0.12em 0.3em #0005;
  transition: background 0.3s;
}
.done-star::after {
  content: '★';
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff8e0;
  color: #f5a400;
  font-size: 1em;
  line-height: 1;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
#finish {
  overflow: visible;
}
#finish.complete .done-star::after {
  background: #ffd21f;
  color: #fff;
}
#finish.complete {
  animation: play-breathe 1.4s ease-in-out infinite !important;
  filter: drop-shadow(0 0 1.2cqh #fff27a);
}
#finish.milestone .done-star {
  animation: seal-pop 500ms cubic-bezier(0.3, 1.7, 0.5, 1);
}
@media (orientation: portrait) {
  .done-star {
    max-width: 11cqw;
  }
}

/* ---- Ambient: slow sunbeam dust over the wall (decorative, behind UI) ---- */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(circle, #fff 0 1.2px, transparent 2px) 0 0 / 23cqh 19cqh,
    radial-gradient(circle, #fff9c4 0 1.6px, transparent 2.4px) 9cqh 7cqh / 31cqh 27cqh;
  animation: dust 26s linear infinite;
  mask-image: linear-gradient(110deg, #000 0, #000 30%, transparent 55%);
  -webkit-mask-image: linear-gradient(110deg, #000 0, #000 30%, transparent 55%);
}
@keyframes dust {
  to {
    background-position:
      23cqh -19cqh,
      40cqh -20cqh;
  }
}
.game[data-screen='splash'] .scene::after {
  display: none;
}

.reduced #play,
.reduced #play::after,
.reduced .category-tile img,
.reduced .scene::after,
.reduced #finish.complete,
.reduced .game[data-screen='home'] .logo {
  animation: none !important;
}
@media (orientation: portrait) {
  .drawing-choice {
    height: auto;
  }
  .drawing-choice .choice-paper {
    flex: none;
    width: 66cqw;
    height: 72cqw;
    max-height: none;
    aspect-ratio: auto;
  }
  .drawing-choice .arrow {
    width: 14cqw;
    height: 14cqw;
  }
  .drawing-choice {
    gap: 1.5cqw;
  }
}

/* ================= Round 4: crayon tray (12 colours always visible) ================= */
.toolbar {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 2.5cqw;
  left: 4%;
  right: 3%;
  bottom: 1.5cqh;
  height: 17cqh;
}
.tray {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  gap: 0;
  position: relative;
}
.tray-row {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  clip-path: inset(-60% -2% 0 -2%);
}
/* box: dark inside behind the crayons, wooden lip in front */
.tray-row::before {
  content: '';
  position: absolute;
  inset: 42% 0 0 0;
  background: #5b2f17;
  border-radius: 1.6cqh 1.6cqh 0 0;
  box-shadow: inset 0 0.8cqh 1cqh #0006;
}
.tray-row::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  pointer-events: none;
  background: linear-gradient(#f6c88a, #e0a05c 55%, #c9813f);
  border-top: 0.5cqh solid #ffe2b5;
  box-shadow: 0 -0.3cqh 0.6cqh #0003;
}
.tray-row:first-child::after,
.tray-row:first-child::before {
  border-bottom-left-radius: 2cqh;
}
.tray-row:first-child::before {
  border-top-left-radius: 1.6cqh;
  border-top-right-radius: 0;
}
.tray-row:last-child::before {
  border-top-left-radius: 0;
}
.tray-row:last-child::after {
  border-bottom-right-radius: 2cqh;
}
.tray-row:first-child::after {
  border-top-left-radius: 1.2cqh;
}
.tray-row:last-child::after {
  border-top-right-radius: 1.2cqh;
}
.pen {
  position: relative;
  z-index: 2;
  height: 100%;
  min-width: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
  transform: translateY(14%);
}
.pen-body {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(78%, 9cqh);
  aspect-ratio: 212 / 800;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
}
.pen-body img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pen-tint {
  position: absolute;
  inset: 0;
  background: var(--color);
  mix-blend-mode: multiply;
  -webkit-mask: url('../assets/crayon-white.png') center / 100% 100% no-repeat;
  mask: url('../assets/crayon-white.png') center / 100% 100% no-repeat;
}
@media (hover: hover) {
  .pen:hover {
    transform: translateY(4%);
  }
}
.pen[aria-pressed='true'] {
  transform: translateY(-16%);
  filter: drop-shadow(0 0 1cqh #fff27a);
}
.pen[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  z-index: 4;
  top: 30%;
  left: 50%;
  translate: -50% 0;
  width: max(22px, 4cqh);
  height: max(22px, 4cqh);
  display: grid;
  place-items: center;
  border: 0.14em solid #fff;
  border-radius: 50%;
  background: #6a269b;
  color: #fff;
  font:
    700 max(13px, 2.4cqh)/1 Fredoka,
    sans-serif;
  box-shadow: 0 0.1em 0.25em #0006;
}
.pen.pop {
  animation: pen-pop 320ms cubic-bezier(0.3, 1.7, 0.5, 1);
}
@keyframes pen-pop {
  0% {
    transform: translateY(14%);
  }
  45% {
    transform: translateY(-30%) scale(1.06);
  }
  100% {
    transform: translateY(-16%);
  }
}
.pen:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  border-radius: 1cqh;
}
#finish.finish-btn {
  flex: none;
  width: 31cqh;
  min-width: 150px;
  margin-bottom: 2.5cqh;
  font-size: clamp(18px, 5.2cqh, 52px);
}
.studio.entering .toolbar {
  animation: tools-arrive 420ms cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
}

@media (orientation: portrait) {
  .toolbar {
    left: 4%;
    right: 4%;
    bottom: 1.5cqh;
    top: calc(11cqh + 92cqw / var(--sheet, 1) + 3cqh);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2cqh;
  }
  .tray {
    flex: 1;
    flex-direction: column;
    gap: 1.2cqh;
    min-height: 0;
    max-height: 30cqh;
  }
  .tray-row {
    flex: 1;
    min-height: 0;
  }
  .tray-row::before,
  .tray-row:first-child::before,
  .tray-row:last-child::before {
    border-radius: 3cqw 3cqw 0 0;
  }
  .tray-row::after,
  .tray-row:first-child::after,
  .tray-row:last-child::after {
    border-radius: 2cqw 2cqw 4cqw 4cqw;
    border-top-width: 0.9cqw;
  }
  .pen-body {
    width: min(72%, 11cqw);
  }
  .pen[aria-pressed='true']::after {
    width: max(22px, 6cqw);
    height: max(22px, 6cqw);
    font-size: max(13px, 3.6cqw);
  }
  #finish.finish-btn {
    align-self: flex-end;
    width: 62cqw;
    margin: 0;
    font-size: clamp(18px, 4.5cqh, 44px);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .toolbar {
    height: 19cqh;
    gap: 1.5cqw;
  }
  #finish.finish-btn {
    margin-bottom: 1.5cqh;
  }
}
.reduced .pen {
  transition: none;
}
/* tray tuning: show more of each crayon */
.toolbar {
  height: 19cqh;
}
.tray-row::after {
  height: 24%;
}
.tray-row::before {
  inset: 34% 0 0 0;
}
.pen {
  transform: translateY(4%);
}
@media (hover: hover) {
  .pen:hover {
    transform: translateY(-4%);
  }
}
.pen[aria-pressed='true'] {
  transform: translateY(-20%);
}
.pen[aria-pressed='true']::after {
  top: 34%;
}
@keyframes pen-pop {
  0% {
    transform: translateY(4%);
  }
  45% {
    transform: translateY(-34%) scale(1.06);
  }
  100% {
    transform: translateY(-20%);
  }
}
.done-star {
  right: -3%;
}
@media (orientation: portrait) {
  .done-star {
    right: 1%;
    top: -34%;
  }
  .tray {
    max-height: 32cqh;
  }
}

/* ================= Themed rooms: each category has its own background ================= */
@media (orientation: landscape) {
  .game[data-theme='mar'] {
    background-image: url('../assets/bg-mar.jpg');
  }
  .game[data-theme='aventuras'] {
    background-image: url('../assets/bg-aventuras.jpg');
  }
  .game[data-theme='natureza'] {
    background-image: url('../assets/bg-natureza.jpg');
  }
  .game[data-theme='doces'] {
    background-image: url('../assets/bg-doces.jpg');
  }
}
@media (orientation: portrait) {
  .game[data-theme='mar'] .scene {
    background-image: url('../assets/bgp-mar.jpg');
  }
  .game[data-theme='aventuras'] .scene {
    background-image: url('../assets/bgp-aventuras.jpg');
  }
  .game[data-theme='natureza'] .scene {
    background-image: url('../assets/bgp-natureza.jpg');
  }
  .game[data-theme='doces'] .scene {
    background-image: url('../assets/bgp-doces.jpg');
  }
}
.game,
.scene {
  transition: background-image 0.35s ease;
}
@media (orientation: portrait) {
  .toolbar {
    height: auto;
  }
}
/* Short landscape phones: the toolbar uses the whole screen width, not just the 16:9 stage. */
@media (orientation: landscape) and (max-height: 500px) {
  .game[data-screen='studio'] .scene {
    overflow: visible;
  }
  .toolbar {
    left: calc(50% - 48vw);
    right: calc(50% - 48vw);
    gap: 12px;
  }
  .pen-body {
    width: min(74%, 10cqh);
  }
}
/* Labels stay on one line; fitButtons() shrinks them when a language is long. */
.game-btn,
.lang-option,
.choice-footer span {
  white-space: nowrap;
}
.finish-actions .game-btn {
  font-size: clamp(15px, 3.2cqh, 32px);
}

/* ================= Round 5: clean HUD icons + colour boxes ================= */
.icon-btn svg,
.icon-btn svg.glyph {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
.icon-btn svg .solid {
  fill: #fff;
  stroke-width: 2;
}
#audio-open svg,
#zoom svg {
  fill: none;
  stroke-width: 3;
}
.icon-btn {
  text-shadow: none;
}
.icon-btn::before {
  opacity: 0.55;
}
/* asleep, not ghostly: stays solid so nothing shows through */
.icon-btn:disabled {
  opacity: 1;
  filter: saturate(0.25) brightness(1.12);
}
.icon-btn:disabled svg {
  opacity: 0.55;
}

/* swap button: three paint dots, with a small counter of which box is open */
#more-colors.swap-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: none;
  align-self: center;
  width: 11.5cqh;
  height: 11.5cqh;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0.5cqh solid #fff;
  border-radius: 50%;
  background: linear-gradient(#b65be6, #8a23bf);
  box-shadow:
    0 0.6cqh 0 #5f167f,
    0 0.9cqh 1.4cqh #0004;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}
#more-colors.swap-btn svg {
  width: 68%;
  height: 68%;
}
#more-colors.swap-btn svg circle:nth-child(1) {
  fill: #ffd84a;
  stroke: none;
}
#more-colors.swap-btn svg circle:nth-child(2) {
  fill: #5fe0ff;
  stroke: none;
}
#more-colors.swap-btn svg circle:nth-child(3) {
  fill: #ff7ab8;
  stroke: none;
}
#more-colors.swap-btn:active {
  transform: scale(0.9) rotate(-25deg);
}
#more-colors.swap-btn::after {
  content: '';
  position: absolute;
  bottom: -2.1cqh;
  left: 50%;
  translate: -50% 0;
  width: 6cqh;
  height: 1.3cqh;
  min-width: 27px;
  min-height: 6px;
  background: radial-gradient(circle closest-side, #fff 0 80%, transparent 90%) 0 0 / 33.34% 100%;
  filter: drop-shadow(0 1px 1px #0008);
  -webkit-mask: linear-gradient(90deg, #000 33.3%, #0005 0);
  mask: linear-gradient(90deg, #000 33.3%, #0005 0);
}
#more-colors.swap-btn[data-box='1']::after {
  -webkit-mask: linear-gradient(90deg, #0005 33.3%, #000 0 66.6%, #0005 0);
  mask: linear-gradient(90deg, #0005 33.3%, #000 0 66.6%, #0005 0);
}
#more-colors.swap-btn[data-box='2']::after {
  -webkit-mask: linear-gradient(90deg, #0005 66.6%, #000 0);
  mask: linear-gradient(90deg, #0005 66.6%, #000 0);
}
.pen.swap {
  animation: pen-swap 420ms cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  animation-delay: calc(var(--i) * 28ms);
}
.pen.swap[aria-pressed='true'] {
  animation-name: pen-swap-on;
}
@keyframes pen-swap {
  0% {
    transform: translateY(70%);
  }
  100% {
    transform: translateY(4%);
  }
}
@keyframes pen-swap-on {
  0% {
    transform: translateY(70%);
  }
  100% {
    transform: translateY(-20%);
  }
}
.toolbar {
  gap: 1.8cqw;
}
@media (orientation: portrait) {
  .toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 3cqw;
  }
  .tray {
    grid-column: 1 / -1;
    height: 100%;
  }
  #more-colors.swap-btn {
    grid-column: 2;
    width: 14cqw;
    height: 14cqw;
    border-width: 1cqw;
    margin-bottom: 2cqw;
  }
  #more-colors.swap-btn::after {
    bottom: -3cqw;
    width: 8cqw;
    height: 1.8cqw;
  }
  #finish.finish-btn {
    grid-column: 3;
    width: 50cqw;
  }
}
/* small landscape: roomier finish buttons so long languages stay readable */
@media (orientation: landscape) and (max-height: 500px) {
  .finish-actions {
    left: 60% !important;
    width: 37% !important;
  }
  .finish-picture {
    left: 19% !important;
  }
}

/* ================= Round 6: illustrated HUD buttons (images, not code-drawn icons) ================= */
.icon-btn,
#more-colors.swap-btn {
  background: center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0.5cqh 0.5cqh #0000003d);
}
.icon-btn::before,
.icon-btn svg,
#more-colors.swap-btn svg {
  display: none !important;
}
#back,
#drawing-prev,
#drawing-next,
#cat-prev,
#cat-next {
  background-image: url('../assets/btn-back.png') !important;
}
#drawing-next,
#cat-next {
  scale: -1 1;
}
#zoom {
  background-image: url('../assets/btn-zoom-in.png') !important;
}
#zoom[aria-pressed='true'] {
  background-image: url('../assets/btn-zoom-out.png') !important;
}
#undo {
  background-image: url('../assets/btn-undo.png') !important;
}
#audio-open {
  background-image: url('../assets/btn-sound.png') !important;
}
#modal-close {
  background-image: url('../assets/btn-close.png') !important;
}
#more-colors.swap-btn {
  background-image: url('../assets/btn-palette.png') !important;
}
.icon-btn:disabled {
  opacity: 1;
  filter: saturate(0.2) brightness(1.1) opacity(0.7);
}
@media (hover: hover) {
  .icon-btn:not(:disabled):hover,
  #more-colors.swap-btn:hover {
    filter: drop-shadow(0 0.5cqh 0.5cqh #0000003d) brightness(1.08);
  }
}
@media (orientation: landscape) {
  .icon-btn,
  .top-right .icon-btn,
  #more-colors.swap-btn {
    width: 12.5cqh;
    height: 12.5cqh;
  }
  .drawing-choice .arrow {
    width: 14cqh;
    height: 14cqh;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .icon-btn,
  .top-right .icon-btn,
  #more-colors.swap-btn {
    width: 50px;
    height: 50px;
  }
}

/* ================= Round 7: illustrated icons in the Settings rows ================= */
.setting-row .setting-icon {
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  object-fit: contain;
  background: none !important;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0.08em 0.08em #0003);
}

/* ================= Round 8: six categories, slide between drawings, tidy Done star ================= */
.category-tile:nth-child(4),
.category-tile:nth-child(5) {
  grid-column: span 2;
}
.category-tile:nth-child(6) {
  background: linear-gradient(#ffc49a, #ff7a3d);
}
@media (orientation: portrait) {
  .category-tile:nth-child(4),
  .category-tile:nth-child(5) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}
@media (orientation: landscape) {
  .game[data-theme='veiculos'] {
    background-image: url('../assets/bg-veiculos.jpg');
  }
}
@media (orientation: portrait) {
  .game[data-theme='veiculos'] .scene {
    background-image: url('../assets/bgp-veiculos.jpg');
  }
}

/* the old sheet slides out while the new one slides in; the card itself never moves */
.choice-image {
  position: relative;
  overflow: hidden;
}
.turn-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Done star: a drawn, rounded star, smaller and sitting on the corner, off the word */
.done-star {
  top: -30%;
  right: -5%;
  width: 30%;
  max-width: 6.4cqh;
  border-width: 0.1em;
}
.done-star::after {
  content: '';
  inset: 9%;
  background: #fff8e0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a400' stroke='%23f5a400' stroke-width='2.6' stroke-linejoin='round' d='M12 3.4l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E")
    center / 74% no-repeat;
}
#finish.complete .done-star::after {
  background: #ffc400
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round' d='M12 3.4l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E")
    center / 74% no-repeat;
  animation: star-twinkle 1.6s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%,
  100% {
    transform: rotate(-9deg) scale(1);
  }
  50% {
    transform: rotate(9deg) scale(1.1);
  }
}
.reduced #finish.complete .done-star::after {
  animation: none;
}
@media (orientation: portrait) {
  .done-star {
    top: -46%;
    right: -4%;
    max-width: 8cqw;
  }
}

/* Portrait: the sheet is exactly the size of the drawing and always centred (Safari left-aligned it
   when the height limit made the box wider than the picture). */
@media (orientation: portrait) {
  .studio .paper-wrap {
    --pw: min(92cqw, calc(43.5cqh * var(--sheet, 1)));
    width: var(--pw) !important;
    left: calc(50% - var(--pw) / 2) !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: var(--sheet, 1);
  }
}

/* Big buttons: the plate is a little larger than the label box and reaches further down, so the word
   reads smaller and sits centred on the face of the button, clear of the bottom rim. */
.game-btn.green::before,
.game-btn.orange::before,
.game-btn.purple::before {
  inset: -5% -3% -11% -3% !important;
}
.game-btn.green,
.game-btn.orange,
.game-btn.purple {
  padding-bottom: 0.2em;
}
/* Portrait painting screen: the mascot fits in the bottom row, below the crayon shelf. */
@media (orientation: portrait) {
  .game[data-screen='studio'] .mascot,
  .game[data-expanded='true'][data-screen='studio'] .mascot {
    height: 9.6% !important;
    width: 23% !important;
    left: 1.5% !important;
    bottom: 0.6% !important;
  }
}

/* Category names always on one line; the game shrinks the font when a name is too long. */
.category-tile span {
  display: block;
  width: 92%;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* End of src/style.css */