:root {
  --cream: #fff8e9;
  --paper: #fffdf7;
  --ink: #49362f;
  --pink: #ef7e9e;
  --pink-dark: #c94e76;
  --mint: #79cab5;
  --yellow: #ffd76a;
  --green: #55a86b;
  --shadow: rgba(72, 43, 35, 0.2);
}

* { 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 8% 12%, rgba(255, 215, 106, .38), transparent 18rem),
    radial-gradient(circle at 90% 15%, rgba(121, 202, 181, .3), transparent 20rem),
    linear-gradient(180deg, #fffdf6, var(--cream));
}
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: #3d927d; font-size: clamp(.95rem, 2.4vw, 1.2rem); font-weight: 900; }
.title h1 { margin: 0; color: var(--pink-dark); font-size: clamp(2.2rem, 8vw, 4.7rem); line-height: 1.02; text-shadow: 0 4px 0 #ffd9a0; }
.play-layout { display: grid; gap: 12px; }
.message { min-height: 72px; display: grid; place-items: center; margin: 0; padding: 12px 14px; border: 4px solid #e9b867; border-radius: 18px; background: var(--paper); font-size: clamp(1rem, 2.8vw, 1.35rem); font-weight: 900; line-height: 1.4; text-align: center; }
.apron-scene { position: relative; width: min(100%, 760px); aspect-ratio: 1; margin: 0 auto; border: 6px solid #efb0c2; border-radius: 20px; background: #fae7ec; box-shadow: 0 18px 34px var(--shadow); overflow: hidden; }
.apron-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.rotate-photo { transform: none; }
.story-pieces { position: absolute; inset: 0; pointer-events: none; }
.story-piece { position: absolute; width: clamp(66px, 13vw, 112px); aspect-ratio: 1; border: 4px solid rgba(255,255,255,.96); border-radius: 20px; background: #fff; box-shadow: 0 8px 16px rgba(57,36,31,.22); overflow: hidden; animation: popIn 380ms cubic-bezier(.2,1.35,.35,1); }
.story-piece img { width: 100%; height: 100%; object-fit: cover; }
.piece-1 { left: 10%; top: 15%; transform: rotate(-5deg); }
.piece-2 { left: 28%; top: 35%; transform: rotate(4deg); }
.piece-3 { left: 43%; top: 12%; transform: rotate(4deg); }
.piece-4 { left: 57%; top: 35%; transform: rotate(-3deg); }
.piece-5 { right: 9%; top: 14%; transform: rotate(-5deg); }
.piece-6 { right: 16%; bottom: 12%; transform: rotate(3deg); }
.piece-7 { left: 10%; bottom: 12%; transform: rotate(-4deg); }
.piece-8 { left: 42%; bottom: 7%; transform: rotate(2deg); }
.celebration { position: absolute; left: 50%; top: 51%; width: max-content; padding: 10px 18px; border: 4px solid #fff; border-radius: 999px; color: #fff; background: var(--pink-dark); box-shadow: 0 8px 18px var(--shadow); font-size: clamp(1.1rem, 4vw, 2rem); font-weight: 900; transform: translate(-50%,-50%); animation: popIn 500ms cubic-bezier(.2,1.4,.35,1); z-index: 5; }
.story-cards { display: grid; grid-template-columns: repeat(8, minmax(62px, 92px)); gap: 9px; justify-content: center; width: min(100%, 820px); margin: 0 auto; }
.story-card { position: relative; aspect-ratio: 1; padding: 5px; border: 4px solid #d7c5b9; border-radius: 16px; background: #eee7e1; box-shadow: 0 6px 0 #a99387; overflow: hidden; cursor: default; opacity: .62; }
.story-card img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.story-card span { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #746159; font-weight: 900; }
.story-card.is-next { border-color: #f4ae28; background: #fff4c4; box-shadow: 0 6px 0 #cb791c, 0 0 0 5px rgba(255,211,74,.28); cursor: pointer; opacity: 1; animation: glow 1.15s ease-in-out infinite; }
.story-card.is-next span { color: #664416; background: var(--yellow); }
.story-card.is-next:active { transform: translateY(4px); box-shadow: 0 2px 0 #cb791c; }
.story-card.is-done { border-color: #3e8d57; background: #dff3df; box-shadow: none; opacity: .78; }
.story-card.is-done span { background: var(--green); }
.complete-panel { width: min(100%, 720px); justify-self: center; padding: 16px; border: 5px solid #e9b867; border-radius: 18px; background: var(--paper); text-align: center; }
.complete-title { margin: 0 0 6px; color: var(--pink-dark); font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; line-height: 1.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: #3d2c22; 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: #3d927d; box-shadow: 0 7px 0 #236653; }
[hidden] { display: none !important; }
@keyframes popIn { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@media (max-width: 700px) { .story-cards { grid-template-columns: repeat(4,minmax(58px,82px)); } }
@media (max-width: 520px) {
  .game { padding: 10px; }
  .message { min-height: 58px; padding: 8px 10px; border-width: 3px; font-size: .95rem; }
  .apron-scene { border-width: 3px; border-radius: 14px; }
  .story-piece { width: clamp(54px,18vw,78px); border-width: 3px; border-radius: 13px; }
  .story-card { border-width: 3px; border-radius: 12px; }
  .story-card span { width: 22px; height: 22px; font-size: .8rem; }
  .product-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }