.creative-home {
  margin: 28px 0;
}
.creative-screen > .top-bar {
  position: sticky;
  top: 8px;
  z-index: 8;
  border-radius: 18px;
  background: #fffdf7ec;
}
.creative-screen .icon-btn {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
}
.creative-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.creative-home-card {
  border: 2px solid #d3ded6;
  background: #fffdf7;
  border-radius: 26px;
  padding: 10px 10px 18px;
  color: #203e50;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  box-shadow: 0 5px 0 #d5e3d8;
}
.creative-home-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.4;
  object-fit: cover;
  border-radius: 19px;
  display: block;
  margin-bottom: 12px;
}
.creative-home-card strong {
  display: block;
  font-size: clamp(17px, 2vw, 23px);
}
.creative-home-card small {
  display: block;
  line-height: 1.5;
  margin-top: 6px;
  color: #3d5c65;
}
.creative-home-card:focus-visible,
.creative-button:focus-visible,
.creative-cell:focus-visible {
  outline: 4px solid #23586d;
  outline-offset: 3px;
}
.creative-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 760px;
  gap: 12px;
  margin: 0 auto;
}
.creative-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
}
.creative-heading img {
  border-radius: 18px;
  flex: 0 0 64px;
}
.creative-heading strong {
  display: block;
  font-size: 24px;
  color: #203e50;
}
.creative-heading small {
  display: block;
  color: #3d5c65;
  margin-top: 4px;
}
.creative-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.creative-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 56px;
  min-width: 100px;
  max-width: 174px;
  flex: 1 0 100px;
  padding: 10px;
  border: 2px solid #c7d8d1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fffefb, #f7f2e7);
  box-shadow: 0 4px 0 #ccd8ca, 0 6px 12px #253e5010;
  color: #203e50;
  font: inherit;
  cursor: pointer;
}
.creative-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #ccd8ca;
}
.creative-button:disabled {
  box-shadow: none;
}
.creative-button > span:empty {
  display: none;
}
.creative-button > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.creative-button svg,
.creative-button img,
.creative-cell img,
.creative-cell svg,
.creative-recipe img,
.creative-recipe svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-button strong {
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.creative-button.is-selected {
  background: #e1f1e8;
  border-color: #286753;
  box-shadow: inset 0 -3px 0 #bddfce;
}
.creative-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.creative-instruction {
  width: 100%;
  max-width: 560px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: #203e50;
  margin: 0;
}
.creative-challenge {
  width: 100%;
  max-width: 560px;
  background: #e7f1e8;
  padding: 14px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: #203e50;
}
.creative-recipe {
  display: flex;
  gap: 12px;
}
.creative-recipe span {
  width: 40px;
  height: 40px;
}
.creative-kitchen {
  width: 100%;
  max-width: 480px;
  background: radial-gradient(ellipse at 50% 0, #fffef1, #f4debd);
  border-radius: 28px;
  min-height: 180px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #203e50;
}
.creative-bowl.is-plush,
.creative-bowl.creative-blender,
.creative-bowl.creative-cup {
  position: relative;
  width: 190px;
  height: 190px;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.creative-bowl.is-plush.is-mixed {
  background: transparent;
}
.creative-bowl-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 4px #74563a20);
}
.is-plush .creative-fruit,
.creative-blender .creative-fruit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.creative-bowl.is-plush .creative-fruit > span,
.creative-blender .creative-fruit > span {
  position: absolute;
  left: var(--fruit-x);
  top: var(--fruit-y);
  width: 22%;
  height: 22%;
}
.creative-blender .creative-fruit > span {
  width: 18%;
  height: 18%;
}
.is-plush .creative-decorations {
  position: absolute;
  right: 2%;
  bottom: 22%;
}
.creative-spoon {
  position: absolute;
  width: 10px;
  height: 75px;
  border-radius: 8px;
  background: linear-gradient(90deg, #bb8c55, #e6c18d);
  top: 4%;
  right: 27%;
  transform: rotate(26deg);
  transform-origin: 50% 90%;
}
.creative-spoon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 33px;
  left: -7px;
  bottom: -9px;
  border-radius: 50%;
  background: #ddb47e;
}
.creative-blending-liquid {
  position: absolute;
  left: 27%;
  top: 34%;
  width: 39%;
  height: 24%;
  border-radius: 22% 22% 35% 35%;
  opacity: 0.8;
  border: 2px solid #ffffff8a;
  background: linear-gradient(105deg, #ffffff55, #ffffff00), var(--dish-color);
}
.creative-blend-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 24px;
  background: #fffdf8;
  font-weight: 800;
}
.creative-blend-status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #438a67;
}
.creative-blend-status[data-blend-stage='settling'] i {
  background: #dcad57;
}
.creative-grid[data-motion='playful'] .is-blending {
  animation: blender-whirr calc(0.44s * var(--play-speed)) ease-in-out infinite;
}
.creative-grid[data-motion='playful'] .is-blending .creative-fruit > span {
  animation: fruit-whirl calc(0.88s * var(--play-speed)) ease-in-out infinite;
}
.creative-grid[data-motion='playful']
  .is-blending
  .creative-fruit
  > span:nth-child(even) {
  animation-direction: reverse;
}
@keyframes blender-whirr {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}
@keyframes fruit-whirl {
  0%,
  100% {
    transform: translate(-4px, -2px) rotate(-18deg);
  }
  50% {
    transform: translate(4px, 2px) rotate(18deg);
  }
}
.creative-cup .creative-decorations {
  position: absolute;
  right: 4px;
  bottom: 8px;
  z-index: 1;
}
.creative-kitchen.is-served {
  background: #e8f2dc;
}
.creative-bowl {
  border: 8px solid #89b6c7;
  border-top-width: 3px;
  border-radius: 8px 8px 70px 70px;
  padding: 14px;
  width: min(230px, 100%);
  min-height: 120px;
  background: #fff6e3;
}
.creative-bowl.is-mixed {
  background: var(--dish-color);
}
.creative-bowl.creative-cup.is-mixed {
  background: transparent;
}
.creative-fruit,
.creative-decorations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.creative-fruit > span {
  width: 46px;
  height: 46px;
}
.is-mixed .creative-fruit > span {
  width: 36px;
  height: 36px;
}
.creative-decorations > span {
  width: 36px;
  height: 36px;
}
.creative-fruit img,
.creative-fruit svg,
.creative-decorations img,
.creative-decorations svg,
.creative-dinner-friend img,
.creative-dinner-friend svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-dinner-friend {
  width: 80px;
  height: 80px;
}
.creative-world {
  width: 100%;
  max-width: 480px;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(135deg, #fffcf3, #f1e8d7);
  border: 1px solid #ffffff;
  box-shadow: 0 6px 18px #5b62451a;
  color: #203e50;
}
.creative-world-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.creative-world-heading strong {
  font-size: 18px;
}
.creative-world-heading > span {
  max-width: 45%;
  font-size: 12px;
  text-align: right;
  color: #46634b;
}
.creative-playmat {
  padding: 16px;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #c5d3a3 url('./creative-art/meadow-playmat.png') center / cover;
  box-shadow: 0 4px 0 #c7aa78, 0 8px 16px #6d5c3526;
}
.creative-world.is-rainy .creative-playmat {
  background-image: linear-gradient(#91bcd124, #91bcd124),
    url('./creative-art/meadow-playmat.png');
}
.creative-picked-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  margin-top: 12px;
  border-radius: 16px;
  background: #ffffffc9;
}
.creative-picked-piece > span:first-child {
  width: 38px;
  height: 38px;
}
.creative-picked-piece img,
.creative-picked-piece svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-picked-piece strong,
.creative-picked-piece small {
  display: block;
}
.creative-picked-piece small {
  margin-top: 3px;
  color: #46634b;
}
.creative-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.creative-cell {
  border: 0;
  border-radius: 0;
  background: transparent;
  aspect-ratio: 1;
  min-height: 56px;
  min-width: 56px;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  color: #203e50;
  overflow: visible;
  box-shadow: inset 0 0 0 1px #ffffff35;
}
.creative-world--town .creative-cell {
  border: 1px dashed #49684d35;
  border-radius: 12px;
}
.creative-board.is-visiting .creative-cell {
  border-color: transparent;
  box-shadow: none;
}
.creative-board.is-visiting .creative-empty {
  visibility: hidden;
}
.creative-square-number {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 10px;
  color: #54704c;
}
.creative-cell .creative-empty {
  color: #52714e;
  font-weight: 500;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fffef4a6;
  border: 1px dashed #71936680;
  display: grid;
  place-items: center;
}
.creative-station-art {
  position: absolute;
  top: -8%;
  left: 13%;
  width: 74%;
  height: 64%;
}
.creative-station-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-station-label {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  font-size: 10px;
  font-weight: 800;
  background: #fff9e9dd;
  border-radius: 4px;
}
.creative-train {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.creative-train > span {
  position: absolute;
  width: 18%;
  height: 18%;
  left: calc(var(--train-col) * 25% + 3.5%);
  top: calc(var(--train-row) * 25% + 3.5%);
  transform: rotate(var(--train-facing, 0deg));
}
.creative-train img,
.creative-train svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px #30462d35);
}
.creative-cell-art {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.creative-cell-art > img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px #30462d25);
}
.creative-cell-art > svg {
  width: 100%;
  height: 100%;
}
.creative-cell-art b {
  font-size: 20px;
}
.creative-cell.is-station {
  background: #fff5d930;
}
.creative-cell.is-route {
  background: #e5f5d425;
}
.creative-cell.is-next-track {
  box-shadow: inset 0 0 0 2px #739258;
  border-radius: 12px;
}
.creative-visitor {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 60%;
  height: 60%;
  pointer-events: none;
  border-radius: 50%;
  background: #fffdf0c9;
  box-shadow: 0 3px 6px #52684030;
}
.creative-track-palette,
.creative-town-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
}
.creative-track-palette .creative-button,
.creative-town-palette .creative-button {
  min-width: 56px;
  max-width: none;
  min-height: 82px;
  padding: 6px 3px;
}
.creative-track-palette .creative-button strong,
.creative-town-palette .creative-button strong {
  font-size: 12px;
}
.creative-track-palette .creative-button > span,
.creative-town-palette .creative-button > span {
  width: 38px;
  height: 38px;
}
.creative-track-palette .creative-button > span {
  background: #dfebd2;
  border-radius: 10px;
}
.creative-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.creative-ingredients {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
}
.creative-controls > .creative-button,
.creative-challenge > .creative-button {
  flex: 0 0 auto;
  width: 100%;
  max-width: 280px;
  min-height: 56px;
}
.creative-ingredients .creative-button {
  min-width: 56px;
  max-width: none;
  padding: 8px 3px;
}
@media (max-width: 760px) {
  .creative-heading {
    display: none;
  }
  .creative-grid {
    gap: 8px;
  }
  .creative-kitchen {
    min-height: 130px;
    padding: 14px;
  }
  .creative-bowl {
    min-height: 84px;
    padding: 8px;
  }
  .creative-bowl.is-plush,
  .creative-bowl.creative-blender,
  .creative-bowl.creative-cup {
    width: 150px;
    height: 150px;
  }
  .creative-kitchen > strong {
    font-size: 14px;
  }
  .creative-instruction {
    font-size: 16px;
    line-height: 1.4;
  }
  .creative-button strong {
    font-size: 13px;
  }
  .creative-world {
    max-width: 350px;
    padding: 10px;
  }
  .creative-world-heading strong {
    font-size: 16px;
  }
  .creative-world-heading {
    margin-bottom: 8px;
  }
  .creative-playmat {
    padding: 12px;
  }
  .creative-picked-piece {
    margin-top: 8px;
  }
  .creative-track-palette {
    display: grid;
    grid-template-columns: repeat(4, minmax(56px, 1fr));
  }
  .creative-track-palette .creative-button {
    min-width: 56px;
    max-width: none;
    padding: 5px 3px;
  }
  .creative-track-palette .creative-button > span {
    width: 30px;
    height: 30px;
  }
}
.creative-story {
  width: 100%;
  max-width: 480px;
  min-height: 220px;
  border-radius: 28px;
  background: linear-gradient(#e4f1e8 72%, #b8d19f 72%);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 18px;
  gap: 14px;
}
.creative-story--space {
  background: radial-gradient(circle at 15% 18%, #fffcdf 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #fffcdf 0 3px, transparent 4px),
    radial-gradient(circle at 70% 12%, #fffcdf 0 2px, transparent 3px),
    linear-gradient(#dceaf4 72%, #bbd1dc 72%);
}
.creative-story--pet {
  background: linear-gradient(#fff0dc 72%, #d7c6a3 72%);
}
.creative-grid[data-motion='playful'] .creative-fruit .is-new,
.creative-grid[data-motion='playful'] .creative-cell-art.is-new {
  animation: creative-place calc(380ms * var(--play-speed)) ease-out both;
}
.creative-grid[data-motion='playful'] [data-chef-action='mix'] .creative-spoon {
  animation: creative-stir calc(700ms * var(--play-speed)) ease-in-out both;
}
.creative-grid[data-motion='playful']
  [data-chef-action='serve']
  .creative-dinner-friend {
  animation: creative-place calc(650ms * var(--play-speed)) ease-out both;
}
.creative-grid[data-motion='playful'] .creative-train.is-travelling {
  animation: creative-travel var(--ride-duration) linear both;
}
.creative-grid[data-motion='playful']
  .is-story-action.creative-story-action--launch
  .creative-story-place {
  animation: creative-lift calc(900ms * var(--play-speed)) ease-in-out both;
}
.creative-grid[data-motion='playful']
  .is-story-action.creative-story-action--play
  .creative-story-friend,
.creative-grid[data-motion='playful']
  .is-story-action.creative-story-action--explore
  .creative-story-friend,
.creative-grid[data-motion='playful']
  .is-story-action.creative-story-action--share
  .creative-story-props,
.creative-grid[data-motion='playful'] .creative-visitor {
  animation: creative-place calc(600ms * var(--play-speed)) ease-out both;
}
@keyframes creative-place {
  0% {
    opacity: 0.5;
    transform: translateY(-12px) scale(0.8);
  }
  65% {
    opacity: 1;
    transform: translateY(2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes creative-stir {
  0%,
  100% {
    transform: rotate(26deg);
  }
  25% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(-12deg);
  }
}
@keyframes creative-travel {
  from {
    transform: translate(var(--ride-x), var(--ride-y));
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes creative-lift {
  0% {
    transform: translateY(0) rotate(0);
  }
  60% {
    transform: translateY(-38px) rotate(-14deg);
  }
  100% {
    transform: translateY(-18px) rotate(-12deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creative-grid *,
  .creative-grid *::before,
  .creative-grid *::after {
    animation: none !important;
    transition: none !important;
  }
}
.creative-story-place {
  width: 80px;
  height: 80px;
}
.creative-story-friend {
  width: 104px;
  height: 104px;
}
.creative-story-place img,
.creative-story-place svg,
.creative-story-friend img,
.creative-story-friend svg,
.creative-story-props img,
.creative-story-props svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-story-props {
  width: 100%;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.creative-story-props span {
  width: 48px;
  height: 48px;
}
.creative-story-caption {
  color: #203e50;
  background: #fffdf8;
  padding: 8px 18px;
  border-radius: 14px;
  font-weight: 700;
}
.creative-story-cover {
  height: 180px;
  max-width: 100%;
  border-radius: 22px;
}
.creative-story-action--launch .creative-story-place {
  transform: translateY(-18px) rotate(-12deg);
}
.creative-story-action--explore .creative-story-friend {
  transform: translateX(20px);
}
.creative-story-action--rest .creative-story-friend {
  transform: rotate(12deg) translateY(12px);
}
.creative-story-action--tidy .creative-story-props {
  opacity: 0.3;
  transform: scale(0.65);
}
.creative-story-action--share .creative-story-props,
.creative-story-action--care .creative-story-props {
  transform: translateY(-15px);
}
.creative-save {
  margin: 0;
  color: #3d5c65;
  font-size: 13px;
  text-align: center;
}
.creative-welcome {
  background: #fffdf8;
  border-radius: 28px;
  padding: 24px;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: #203e50;
}
.creative-welcome img {
  border-radius: 24px;
  max-width: 100%;
  object-fit: cover;
}
.creative-welcome p,
.creative-welcome h2 {
  margin: 0;
}
body.high-contrast .creative-button,
body.high-contrast .creative-cell {
  border-color: #102b39;
  border-width: 3px;
  color: #102b39;
}
body.high-contrast .creative-cell {
  border-width: 0;
  box-shadow: inset 0 0 0 3px #102b39;
}
@media (max-width: 760px) {
  .creative-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creative-home-card small {
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .creative-home-grid {
    gap: 10px;
  }
  .creative-home-card {
    padding: 8px 8px 12px;
    border-radius: 20px;
  }
  .creative-home-card strong {
    font-size: 17px;
  }
  .creative-home-card small {
    display: none;
  }
  .creative-heading strong {
    font-size: 20px;
  }
  .creative-tools .creative-button {
    flex-basis: 80px;
    min-width: 80px;
  }
}
@media (min-width: 1000px) and (min-height: 600px) {
  .creative-screen {
    width: min(1100px, 100%);
    max-width: 1100px;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto !important;
    align-content: start;
  }
  .creative-screen .top-bar {
    grid-column: 1;
    grid-row: 1;
  }
  .creative-screen .instruction-card {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 18px;
    max-width: 440px;
    min-height: 76px;
    margin-bottom: 0;
    position: sticky;
    top: 8px;
    z-index: 8;
  }
  .creative-screen .instruction-card h2 {
    font-size: 23px;
  }
  .creative-screen .instruction-card .eyebrow {
    display: none;
  }
  .creative-screen #game-grid.creative-grid {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: minmax(360px, 1.2fr) minmax(260px, 1fr);
    max-width: 1100px;
    align-items: start;
    padding: 20px;
    border: 2px solid #ffffff;
    border-radius: 32px;
    background: linear-gradient(135deg, #fffdf4ed, #f0f6e9ed);
    box-shadow: 0 8px 0 #c8d7c955, 0 16px 40px #253e5015;
  }
  .creative-screen .creative-modes,
  .creative-screen .creative-instruction,
  .creative-screen .creative-tools,
  .creative-screen .creative-challenge,
  .creative-screen .creative-save,
  .creative-screen .creative-welcome {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .creative-screen .creative-kitchen,
  .creative-screen .creative-story,
  .creative-screen .creative-world {
    grid-column: 1;
    justify-self: center;
  }
  .creative-screen .creative-kitchen,
  .creative-screen .creative-story {
    min-height: 270px;
  }
  .creative-screen .creative-controls {
    grid-column: 2;
    align-self: center;
    padding: 12px;
  }
}
@media (min-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .creative-screen {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: auto auto !important;
    align-content: start;
  }
  .creative-screen .top-bar {
    grid-column: 1;
    grid-row: 1;
  }
  .creative-screen .instruction-card {
    grid-column: 2;
    grid-row: 1;
    padding: 10px 16px;
    min-height: 68px;
    margin-bottom: 0;
  }
  .creative-screen #game-grid.creative-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .creative-grid {
    display: grid !important;
    grid-template-columns: minmax(270px, 1fr) minmax(150px, 1fr);
    align-items: start;
    align-content: start;
    gap: 10px;
  }
  .creative-heading {
    display: none;
  }
  .creative-modes,
  .creative-instruction,
  .creative-tools,
  .creative-challenge,
  .creative-save,
  .creative-welcome {
    grid-column: 1 / -1;
  }
  .creative-kitchen,
  .creative-story,
  .creative-world {
    grid-column: 1;
  }
  .creative-world {
    padding: 10px;
  }
  .creative-playmat {
    padding: 12px;
  }
  .creative-controls {
    grid-column: 2;
  }
  .creative-story {
    min-height: 180px;
    height: 180px;
    padding: 10px;
    gap: 6px;
  }
  .creative-story-place {
    width: 50px;
    height: 50px;
  }
  .creative-story-friend {
    width: 64px;
    height: 64px;
  }
  .creative-story-props span {
    width: 30px;
    height: 30px;
  }
  .creative-story-caption {
    padding: 4px 10px;
    font-size: 12px;
  }
  .creative-story-cover {
    height: 140px;
  }
  .creative-ingredients,
  .creative-track-palette {
    grid-template-columns: repeat(2, minmax(56px, 1fr));
  }
}