:root {
  --bg: #fff7e9;
  --paper: #fffdf6;
  --ink: #2d2925;
  --blue: #7fc5e9;
  --blue-dark: #3789aa;
  --red: #e7523f;
  --yellow: #f6c84a;
  --green: #4f9a55;
  --brown: #8b552d;
  --shadow: rgba(40, 30, 18, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  background:
    radial-gradient(circle at 10% 16%, rgba(246, 200, 74, 0.28), transparent 18rem),
    radial-gradient(circle at 88% 12%, rgba(127, 197, 233, 0.24), transparent 20rem),
    linear-gradient(180deg, #fffaf0, var(--bg));
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.game {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.stage {
  width: min(100%, 1120px);
}

.title {
  margin-bottom: 14px;
  text-align: center;
}

.title p {
  margin: 0 0 4px;
  color: var(--blue-dark);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  font-weight: 900;
}

.title h1 {
  margin: 0;
  color: #d93f31;
  font-size: clamp(2.2rem, 8vw, 4.6rem);
  line-height: 1.02;
  text-shadow: 0 4px 0 rgba(255, 210, 108, 0.78);
}

.play-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.apron-scene {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  border: 6px solid #f0d09a;
  border-radius: 18px;
  background: #f3eadc;
  box-shadow: 0 18px 34px var(--shadow);
  overflow: hidden;
}

.apron-photo {
  display: block;
  width: 100%;
  height: auto;
}

.apron-foods {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pocket-item {
  position: absolute;
  --angle: 0deg;
  width: clamp(58px, 10vw, 94px);
  aspect-ratio: 1;
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background-color: #fffdf6;
  box-shadow: 0 9px 18px rgba(39, 29, 20, 0.22);
  animation: dropIn 300ms ease-out;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--angle));
}

.pocket-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.curry-finished {
  left: 50%;
  top: 50%;
  width: clamp(210px, 48vw, 360px);
  border-width: 6px;
  border-radius: 40px;
  overflow: visible;
  transform: translate(-50%, -50%);
  z-index: 5;
  animation: curryAppear 520ms cubic-bezier(0.2, 1.35, 0.35, 1);
}

.curry-finished img {
  position: relative;
  z-index: 2;
  border-radius: 34px;
  filter: drop-shadow(0 14px 14px rgba(90, 48, 20, 0.24));
}

.curry-steam,
.curry-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.curry-steam i {
  position: absolute;
  bottom: 76%;
  width: 15px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  filter: blur(0.4px);
  animation: steamRise 1.7s ease-in-out infinite;
}

.curry-steam i:nth-child(1) {
  left: 30%;
}

.curry-steam i:nth-child(2) {
  left: 48%;
  height: 66px;
  animation-delay: 0.25s;
}

.curry-steam i:nth-child(3) {
  left: 66%;
  animation-delay: 0.5s;
}

.curry-sparkle i {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ffe66d;
  clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
  filter: drop-shadow(0 2px 2px rgba(148, 93, 16, 0.24));
  animation: sparkle 1.15s ease-in-out infinite;
}

.curry-sparkle i:nth-child(1) {
  left: -8%;
  top: 18%;
}

.curry-sparkle i:nth-child(2) {
  right: -10%;
  top: 14%;
  animation-delay: 0.2s;
}

.curry-sparkle i:nth-child(3) {
  left: 8%;
  bottom: 4%;
  animation-delay: 0.42s;
}

.curry-sparkle i:nth-child(4) {
  right: 8%;
  bottom: 0;
  animation-delay: 0.62s;
}

.ingredients {
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 92px));
  gap: 10px;
  justify-content: center;
  width: min(100%, 760px);
  margin: 0 auto;
}

.message {
  min-height: 72px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 12px 14px;
  border: 4px solid #e7bd65;
  border-radius: 18px;
  background: var(--paper);
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.ingredient {
  min-height: auto;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 4px solid #e5b557;
  border-radius: 16px;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  text-align: center;
  background: #fff8dc;
  box-shadow: 0 7px 0 #cf8c2f;
  cursor: pointer;
  touch-action: manipulation;
}

.ingredient:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #cf8c2f;
}

.ingredient.is-added {
  color: #f8fff4;
  border-color: #347943;
  background: var(--green);
  box-shadow: none;
  cursor: default;
}

.ingredient-visual {
  width: min(76px, 100%);
  aspect-ratio: 1;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  background-color: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(86, 62, 34, 0.08);
  overflow: hidden;
}

.ingredient-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.complete-panel {
  width: min(100%, 720px);
  justify-self: center;
  padding: 16px;
  border: 5px solid #e7bd65;
  border-radius: 18px;
  background: var(--paper);
  text-align: center;
}

.complete-title {
  margin: 0 0 4px;
  color: #d93f31;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.complete-copy {
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.55;
}

.product-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-button,
.reset-button {
  min-height: 52px;
  display: inline-grid;
  place-items: center;
  margin: 5px;
  padding: 12px 16px;
  border: 0;
  border-radius: 15px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.product-button {
  color: #302416;
  background: var(--yellow);
  box-shadow: 0 7px 0 #c98d1b;
}

.product-button-minne {
  background: #d9f2f8;
  box-shadow: 0 7px 0 #8fc6d7;
}

.reset-button {
  color: #fff;
  background: var(--blue-dark);
  box-shadow: 0 7px 0 #21647e;
}

@keyframes dropIn {
  from {
    transform: translate(-50%, -70%) scale(0.72) rotate(var(--angle));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1) rotate(var(--angle));
    opacity: 1;
  }
}

@keyframes curryAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.62) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes steamRise {
  0%,
  100% {
    opacity: 0.1;
    transform: translateY(14px) scaleY(0.72);
  }
  45% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.35;
    transform: translateY(-18px) scaleY(1.2);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.65) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(18deg);
  }
}

@media (max-width: 860px) {
  .ingredients {
    grid-template-columns: repeat(6, minmax(52px, 76px));
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .game {
    padding: 10px;
  }

  .stage {
    width: 100%;
  }

  .title {
    margin-bottom: 10px;
  }

  .message {
    min-height: 54px;
    padding: 8px 10px;
    border-width: 3px;
    font-size: 0.95rem;
  }

  .apron-scene {
    border-width: 3px;
    border-radius: 14px;
  }

  .ingredients {
    grid-template-columns: repeat(3, minmax(58px, 78px));
    gap: 8px;
  }

  .ingredient {
    padding: 5px;
    border-width: 3px;
    border-radius: 12px;
    box-shadow: 0 5px 0 #cf8c2f;
  }

  .ingredient-visual {
    width: min(54px, 100%);
    border-width: 2px;
    border-radius: 10px;
  }

  .product-links {
    grid-template-columns: 1fr;
  }
}