.sky {
  --ink: #486883;
  --muted: #6a8b9c;
  --accent: #d3a34e;
  background: #d4e7ed !important;
}
.sky .game-shell {
  background: radial-gradient(
    ellipse at 50% 20%,
    #fff7e2,
    #d5e8f1 62%,
    #aecdda
  );
}
.sky .intro {
  background: linear-gradient(
    transparent 25%,
    #d5e8f100 40%,
    #d5e8f1ed 66%,
    #d5e8f1 100%
  );
}
.sky .primary {
  background: #f0c97e;
  color: #597384;
  box-shadow: 0 7px 16px #86a3b92a;
}
.sky .primary.aligned {
  background: #a5d7ba;
  color: #3c7568;
}
.sky .dock {
  background: #f7f5e17d;
}
.sky #progress {
  background: linear-gradient(90deg, #92bfc9, #eecb81);
}
.sky .mission-card strong {
  color: #738fab;
}
.sky .intro p {
  color: #6a8898;
}
.sky .live-dot {
  background: #daa856;
}
.mode-button {
  display: block;
  min-height: 44px;
  margin: 5px auto 0;
  padding: 3px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}
.scoop-shop {
  --ink: #7c586a;
  --muted: #987788;
  background: #ecd5d3 !important;
}
.scoop-shop .game-shell {
  background: radial-gradient(
    ellipse at 50% 20%,
    #fff5dc,
    #f6e4db 65%,
    #e8c8d1
  );
}
.scoop-shop .intro {
  background: linear-gradient(
    transparent 20%,
    #f4e0dd00 30%,
    #f4e0ddf5 58%,
    #f4e0dd 100%
  );
}
.scoop-shop .brand {
  font-size: 16px;
}
.scoop-shop .dock {
  padding-top: 10px;
}
.scoop-shop .primary {
  background: #ae647c;
  min-height: 50px;
  padding: 12px 16px;
}
.flavor-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.flavor-options button {
  border: 1px solid #d9b8bd60;
  background: #fff8eb80;
  border-radius: 13px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #815c6c;
}
.flavor-options button:disabled {
  opacity: 0.45;
}
.flavor-ball {
  width: 21px;
  height: 19px;
  border-radius: 50%;
  box-shadow: inset -2px -3px 0 #ac6f5021;
}
.flavor-0 {
  background: #f6b3c0;
}
.flavor-1 {
  background: #f9dfab;
}
.flavor-2 {
  background: #a9d9bc;
}
.topping-options {
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  gap: 7px;
  margin: 7px 0;
}
.topping-options button {
  min-height: 44px;
  background: #fff8eb60;
  border: 1px solid #caa1b043;
  border-radius: 11px;
  font-size: 10px;
  color: #896376;
}
.topping-options button[aria-pressed="true"] {
  background: #d9a5b53d;
  border-color: #b46f89;
}
.topping-options button:disabled {
  opacity: 0.4;
}
.scoop-shop .bottom-note {
  margin-top: 2px;
}
.scoop-shop .dock-label {
  margin-bottom: 7px;
}
.order-ticket {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 15px;
  right: 15px;
  padding: 12px 13px;
  background: #fffaeddc;
  border: 1px solid #ffffff8c;
  border-radius: 13px;
  box-shadow: 0 4px 13px #956d7410;
  pointer-events: none;
}
.order-ticket strong {
  font-size: 11px;
}
.order-direction {
  float: right;
  letter-spacing: 1px;
  font-size: 6px;
  color: #a1818b;
  line-height: 16px;
}
#recipe {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.recipe-chip {
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 9px;
  color: #7c5a63;
}
.recipe-topping {
  font-size: 9px;
  color: #9a647e;
  margin-left: 3px;
}
.scoop-shop .scene-caption {
  display: none;
}
.scoop-shop #announcement {
  bottom: 245px;
}
.monster-party {
  --ink: #675783;
  --muted: #9783ad;
  background: #d9cde9 !important;
}
.monster-party .game-shell {
  background: radial-gradient(
    ellipse at 50% 10%,
    #f1e8f9,
    #ded0eb 70%,
    #cdb7dd
  );
}
.monster-party .intro {
  background: linear-gradient(
    transparent 24%,
    #dac7e700 40%,
    #dac7e7ef 68%,
    #dac7e7 100%
  );
}
.monster-party .primary {
  background: #8d73b0;
  color: #fff7e9;
  box-shadow: 0 7px 16px #8b659426;
}
.monster-party .intro p {
  color: #9276a1;
}
.monster-party .mission-card strong {
  color: #9474a8;
}
.monster-party #progress {
  background: linear-gradient(90deg, #bb97d0, #a1ceb8);
}
.monster-party .brand {
  font-size: 16px;
}
.memory-target {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 48px;
  min-height: 48px;
  pointer-events: auto;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff6dc;
  font-size: 30px;
  font-weight: 700;
  touch-action: manipulation;
}
.memory-target:disabled {
  opacity: 1;
}
.memory-target:active {
  transform: translate(-50%, -50%) scale(0.95);
}
.memory-target.face-up {
  font-size: 9px;
  padding-top: 35px;
  color: #6f537e;
  letter-spacing: 0.5px;
}
.memory-target.matched:after {
  content: " ✓";
  color: #45816d;
}
.monster-party .dock {
  padding-top: 13px;
}
.monster-party .scene-caption {
  top: 10px;
}
.monster-party .intro-card h1 {
  max-width: 325px;
}
@media (max-width: 360px) {
  .sky .brand,
  .scoop-shop .brand,
  .monster-party .brand {
    font-size: 13px;
  }
  .recipe-chip {
    padding: 4px;
    font-size: 8px;
  }
  .recipe-topping {
    font-size: 8px;
  }
  .flavor-options {
    gap: 5px;
  }
  .scoop-shop .order-ticket {
    padding: 9px;
    left: 10px;
    right: 10px;
  }
  .scoop-shop .dock {
    padding-top: 6px;
    padding-bottom: 3px;
  }
  .scoop-shop .flavor-options button {
    min-height: 48px;
  }
  .topping-options {
    margin: 5px 0;
  }
  .scoop-shop .primary {
    min-height: 48px;
  }
}
@media (max-height: 650px) {
  .scoop-shop .order-ticket {
    padding: 7px 10px;
    top: 3px;
  }
  .order-ticket strong {
    font-size: 10px;
  }
  #recipe {
    margin-top: 5px;
  }
  .scoop-shop .dock-label {
    display: none;
  }
  .flavor-options button {
    min-height: 48px;
  }
  .flavor-ball {
    height: 14px;
    width: 16px;
  }
  .scoop-shop .bottom-note > span {
    font-size: 5px;
  }
  .scoop-shop .intro p {
    font-size: 10px;
  }
  .scoop-shop .topping-options {
    margin: 4px 0;
  }
  .scoop-shop #announcement {
    bottom: 210px;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  .sky .intro {
    background: linear-gradient(90deg, #d5e8f1 30%, #d5e8f100 70%);
  }
  .scoop-shop .intro {
    background: linear-gradient(90deg, #f4e0dd 30%, #f4e0dd00 70%);
  }
  .monster-party .intro {
    background: linear-gradient(90deg, #dac7e7 30%, #dac7e700 70%);
  }
  .scoop-shop .dock {
    width: 255px;
    bottom: 0;
    padding-top: 0;
  }
  .scoop-shop .bottom-note {
    display: none;
  }
  .scoop-shop .order-ticket {
    left: 5px;
    right: 5px;
    max-width: 350px;
    margin: auto;
  }
  .scoop-shop .intro-card h1 {
    font-size: 25px;
  }
  .scoop-shop #announcement {
    bottom: 10px;
  }
  .monster-party #stage {
    margin-top: 68px;
  }
  .sky .dock {
    width: 245px;
  }
  .monster-party .dock {
    width: 245px;
  }
  .scoop-shop .mission-card {
    top: 65px;
    padding: 8px 12px;
  }
  .scoop-shop .mission-card .stats {
    font-size: 8px;
  }
  .scoop-shop .mission-card > div:first-child {
    font-size: 11px;
  }
  .scoop-shop .topping-options button {
    min-height: 44px;
  }
  .scoop-shop #stage {
    margin-left: 255px;
  }
  .scoop-shop .flavor-options button {
    min-height: 46px;
  }
  .scoop-shop .primary {
    min-height: 45px;
    padding: 10px;
  }
}