/* 森のお菓子時間 — moca's Patisserie ゲーム (Codex版を静的移植) */
:root{
  --font-sans: "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --font-heading: Georgia,"Yu Mincho","YuMincho",serif;
  --background:#f4efe3; --foreground:#23352c;
}
html{font-family:var(--font-sans);}
body{background:var(--background);color:var(--foreground);}
/* --- back link (サイトへ戻る) --- */
.to-site{position:fixed;left:14px;bottom:14px;z-index:50;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgb(94 110 90 / 35%);background:rgb(255 252 244 / 92%);color:#4a5d4c;font-size:.72rem;letter-spacing:.04em;text-decoration:none;box-shadow:0 6px 18px rgb(40 50 35 / 14%);backdrop-filter:blur(6px);}
.to-site:hover{background:#fffdf6;}
.to-site svg{width:14px;height:14px;}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); }
button, a { -webkit-tap-highlight-color: transparent; }

.opening-screen { position: relative; min-height: 100svh; overflow: hidden; color: #fffaf0; isolation: isolate; }
.opening-art { position: absolute; inset: -2%; z-index: -3; background: url('assets/opening-forest.jpg') center / cover no-repeat; filter: brightness(1.03) saturate(1.02); animation: forest-breathe 18s ease-in-out infinite alternate; }
.opening-vignette { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgb(25 39 30 / 42%) 0%, rgb(25 39 30 / 10%) 44%, transparent 72%), linear-gradient(0deg, rgb(28 38 29 / 22%) 0%, transparent 45%), radial-gradient(circle at 60% 30%, rgb(255 247 201 / 10%), transparent 36%); }
.brand-mark { position: absolute; top: clamp(24px, 5vw, 54px); left: clamp(24px, 6vw, 86px); display: grid; font-family: var(--font-heading); line-height: .85; text-shadow: 0 2px 18px rgb(15 25 18 / 45%); }
.brand-mark span { font-size: .82rem; letter-spacing: .16em; font-style: italic; }
.brand-mark strong { font-size: clamp(1.3rem, 2.4vw, 2.05rem); letter-spacing: .04em; }
.opening-copy { min-height: 100svh; width: min(620px, 88vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: clamp(24px, 9vw, 140px); padding: 110px 0 92px; }
.eyebrow { margin: 0 0 16px; color: #ede4c9; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.opening-copy h1 { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.22; letter-spacing: .04em; text-shadow: 0 3px 24px rgb(12 24 17 / 56%); }
.opening-lead { max-width: 31rem; margin: 24px 0 30px; font-size: clamp(.92rem, 1.4vw, 1.08rem); line-height: 2; letter-spacing: .06em; text-shadow: 0 2px 10px rgb(12 24 17 / 80%); }
.enter-button { height: 52px; padding: 0 25px; border: 1px solid rgb(255 250 235 / 65%); border-radius: 999px; background: rgb(255 248 231 / 94%); color: #3f2c23; box-shadow: 0 14px 32px rgb(19 28 20 / 28%); font-weight: 700; letter-spacing: .08em; }
.enter-button:hover { background: #fffdf6; transform: translateY(-2px); }
.opening-note { position: absolute; right: 26px; bottom: 18px; margin: 0; color: rgb(255 250 240 / 70%); font-size: .68rem; letter-spacing: .12em; }
@keyframes forest-breathe { from { transform: scale(1.02); } to { transform: scale(1.065); } }
@media (max-width: 680px) {
  .opening-art { background-position: 62% center; }
  .opening-vignette { background: linear-gradient(0deg, rgb(20 32 24 / 48%) 0%, rgb(20 32 24 / 4%) 76%); }
  .opening-copy { justify-content: flex-end; margin: 0 auto; padding-bottom: 72px; }
  .opening-copy h1 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
  .opening-lead { margin: 18px 0 22px; line-height: 1.75; }
  .opening-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .opening-art { animation: none; } }

/* The shop and tasting game */
.game-shell {
  min-height: 100svh;
  color: #26392f;
  background:
    radial-gradient(circle at 10% 15%, rgb(211 192 148 / 18%), transparent 28%),
    #f5f0e4;
}

.game-header {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 72px);
  border-bottom: 1px solid rgb(67 83 65 / 14%);
  background: rgb(250 247 238 / 88%);
  backdrop-filter: blur(12px);
}

.brand { display: grid; color: #fffaf0; font-family: var(--font-heading); line-height: .82; text-shadow: 0 2px 18px rgb(15 25 18 / 45%); }
.brand span { font-size: .7rem; letter-spacing: .16em; font-style: italic; }
.brand strong { font-size: 1.55rem; letter-spacing: .035em; }
.brand-dark { color: #425c4c; text-shadow: none; }

.journey { display: flex; align-items: center; gap: 18px; }
.journey-label { color: #778174; font-family: var(--font-heading); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.journey-dots { display: flex; align-items: center; gap: 6px; }
.journey-dots i { display: block; width: 24px; height: 3px; border-radius: 99px; background: #d8d5c9; transition: background .4s, width .4s; }
.journey-dots i.active { width: 38px; background: #708877; }

.counter-stage { width: min(1240px, 92vw); margin: 0 auto; padding: clamp(38px, 6vw, 72px) 0 48px; }
.counter-intro { display: flex; align-items: center; gap: 20px; max-width: 840px; margin-bottom: 30px; }
.moca-avatar { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #c9bf9f; border-radius: 50%; color: #fffaf0; background: #6f8067; box-shadow: inset 0 0 0 4px #e7dfc8; font-family: var(--font-heading); font-size: 1.6rem; font-style: italic; }
.speaker { margin: 0 0 3px; color: #7e8d7a; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .16em; }
.counter-intro h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.65rem, 3.2vw, 2.8rem); font-weight: 500; letter-spacing: .035em; }
.counter-intro div > p:last-child { margin: 6px 0 0; color: #6e756c; font-size: .88rem; letter-spacing: .03em; }

.mood-picker { display: flex; gap: 10px; margin: 0 0 44px 78px; }
.mood-chip { min-width: 150px; padding: 11px 18px; border: 1px solid #d5cfbd; border-radius: 14px; color: #4a594f; background: rgb(255 253 247 / 74%); text-align: left; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.mood-chip:hover { transform: translateY(-2px); border-color: #97a38f; }
.mood-chip.selected { border-color: #778b78; background: #e4ebdf; box-shadow: 0 8px 24px rgb(58 75 59 / 10%); }
.mood-chip span, .mood-chip small { display: block; }
.mood-chip span { font-weight: 700; letter-spacing: .04em; }
.mood-chip small { margin-top: 4px; color: #7d8177; font-size: .68rem; }

.showcase { overflow: hidden; border: 1px solid rgb(87 77 58 / 18%); border-radius: 26px; background: #fffaf0; box-shadow: 0 24px 70px rgb(55 50 38 / 13%); }
.showcase-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 25px; }
.showcase-heading > div { display: flex; align-items: baseline; gap: 13px; }
.section-number { margin: 0; color: #9b785a; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.showcase-heading h2 { margin: 0; font-family: var(--font-heading); font-size: 1.22rem; font-weight: 500; letter-spacing: .08em; }
.showcase-heading > p { margin: 0; color: #8a897f; font-size: .72rem; letter-spacing: .06em; }
.showcase-image { position: relative; aspect-ratio: 16 / 7.9; overflow: hidden; background: #c6a77c; }
.showcase-image > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sweet-hit-areas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.sweet-hit { position: relative; border: 0; background: transparent; cursor: pointer; }
.sweet-hit:focus-visible { outline: 3px solid #fff8dc; outline-offset: -5px; }
.selection-ring { position: absolute; left: 50%; top: 58%; width: min(20vw, 210px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.8); border: 2px solid rgb(255 253 239 / 0%); border-radius: 50%; transition: transform .25s, border-color .25s, box-shadow .25s; }
.sweet-hit:hover .selection-ring { transform: translate(-50%, -50%) scale(1); border-color: rgb(255 253 239 / 62%); }
.sweet-hit.selected .selection-ring { transform: translate(-50%, -50%) scale(1); border-color: #fffdf2; box-shadow: 0 0 0 5px rgb(75 88 62 / 32%), inset 0 0 42px rgb(255 255 240 / 12%); }
.selection-ring i { position: absolute; right: 6%; top: 6%; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #52634f; background: #fffdf1; opacity: 0; transition: opacity .2s; }
.selection-ring i::after { content: '✓'; font-size: .8rem; font-style: normal; font-weight: 900; }
.sweet-hit.selected .selection-ring i { opacity: 1; }
.sweet-label { position: absolute; left: 50%; bottom: 16px; width: min(88%, 250px); transform: translateX(-50%); padding: 10px 14px; border: 1px solid rgb(255 255 255 / 54%); border-radius: 12px; color: #fffdf4; background: rgb(37 31 24 / 60%); box-shadow: 0 10px 24px rgb(25 20 13 / 16%); backdrop-filter: blur(7px); text-align: left; }
.sweet-label em, .sweet-label strong, .sweet-label small { display: block; }
.sweet-label em { width: fit-content; margin: -22px 0 7px; padding: 3px 9px; border-radius: 99px; color: #52634f; background: #f3ead0; font-size: .62rem; font-style: normal; font-weight: 700; }
.sweet-label strong { font-family: var(--font-heading); font-size: clamp(.76rem, 1.3vw, 1rem); letter-spacing: .06em; }
.sweet-label small { margin-top: 3px; color: rgb(255 253 244 / 73%); font-size: .61rem; }

.selection-footer { min-height: 88px; display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding-top: 18px; }
.selection-footer > div { display: grid; text-align: right; }
.selection-footer span { color: #8b8a80; font-size: .65rem; letter-spacing: .08em; }
.selection-footer strong { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; letter-spacing: .05em; }
.next-button, .memory-button { height: 46px; padding: 0 21px; border-radius: 999px; background: #617663; box-shadow: 0 8px 20px rgb(50 69 52 / 17%); letter-spacing: .06em; }
.next-button:hover, .memory-button:hover { background: #526855; transform: translateY(-1px); }

.table-stage { min-height: calc(100svh - 84px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); }
.table-copy { align-self: center; max-width: 630px; padding: 55px clamp(30px, 6vw, 90px); }
.table-copy > h1 { margin: 12px 0 15px; color: #2d4336; font-family: var(--font-heading); font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 500; line-height: 1.4; letter-spacing: .035em; }
.table-copy > h1 + p { margin: 0 0 34px; color: #76796f; font-size: .88rem; line-height: 1.9; }
.garnish-picker { margin: 0; padding: 0; border: 0; }
.garnish-picker legend { margin-bottom: 11px; color: #59685d; font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.garnish-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.garnish-option { min-height: 68px; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #d8d1be; border-radius: 13px; color: #697369; background: rgb(255 253 247 / 65%); text-align: left; transition: .2s; }
.garnish-option > svg { width: 18px; }
.garnish-option span, .garnish-option strong, .garnish-option small { display: block; }
.garnish-option strong { font-size: .72rem; }
.garnish-option small { margin-top: 3px; color: #949287; font-size: .56rem; }
.garnish-option.selected { border-color: #879983; color: #47604e; background: #e7ece0; box-shadow: inset 0 0 0 1px #879983; }
.tasting-progress { margin-top: 29px; }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #718075; font-size: .68rem; letter-spacing: .08em; }
.meter-label strong { color: #a06f68; }
.sweet-progress [data-slot='progress-track'] { height: 7px; background: #ded9ca; }
.sweet-progress [data-slot='progress-indicator'] { background: linear-gradient(90deg, #b9c8ad, #d79e95); }
.tasting-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
.taste-action { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px; border: 1px solid #ddd5c0; border-radius: 12px; color: #a3a196; background: transparent; text-align: left; }
.taste-action span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e6e1d5; }
.taste-action svg { width: 13px; }
.taste-action strong { font-size: .67rem; letter-spacing: .02em; }
.taste-action.current { border-color: #9eac95; color: #4f6855; background: #f8f7ee; cursor: pointer; box-shadow: 0 7px 17px rgb(63 82 65 / 8%); animation: gentle-pulse 2s infinite; }
.taste-action.current span { color: #fff; background: #7f967f; }
.taste-action.done { border-color: transparent; color: #6b806e; background: #e0e9dd; opacity: 1; }
.taste-action.done span { color: #fff; background: #8ea18c; }
.taste-message { display: block; min-height: 24px; margin-top: 13px; color: #8d6d62; font-family: var(--font-heading); font-size: .79rem; letter-spacing: .04em; }

.plate-area { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px; background: linear-gradient(135deg, #d9cfb8, #c4b899); isolation: isolate; }
.plate-area::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: .3; background: url('assets/komorebi-terrace.jpg') center / cover; filter: blur(25px) saturate(.7); transform: scale(1.15); }
.plate-area::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(246 238 219 / 78%), rgb(224 210 181 / 88%)); }
.window-light { position: absolute; inset: -25% auto auto -10%; width: 70%; height: 90%; transform: rotate(-15deg); background: linear-gradient(90deg, transparent, rgb(255 250 217 / 55%), transparent); filter: blur(18px); }
.plate-label { margin: 0 0 8px; color: #74715f; font-family: var(--font-heading); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.plate { position: relative; width: min(430px, 78%); aspect-ratio: 1.4; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse, #fffdf2 55%, #d9cba5 57%, #faf5df 61%, #aa9568 62%, #e9dec0 64%, transparent 65%); filter: drop-shadow(0 25px 20px rgb(74 60 35 / 22%)); }
.selected-pastry { width: 73%; height: 78%; border-radius: 44%; background-image: url('assets/komorebi-terrace.jpg'); background-size: 330% auto; background-repeat: no-repeat; filter: drop-shadow(0 12px 10px rgb(81 55 27 / 20%)); }
.garnish { position: absolute; top: 11%; right: 24%; display: grid; place-items: center; color: #fff8d5; font-size: 1.6rem; text-shadow: 0 2px 8px rgb(76 52 31 / 35%); transform: rotate(8deg); }
.garnish-berry { width: 18px; height: 18px; border: 3px solid #f7c4aa; border-radius: 50%; color: #a8473e; background: #b75248; font-size: 0; }
.garnish-herb { color: #58705a; font-size: 2.7rem; transform: rotate(-34deg); }
.plate-caption { margin-top: -2px; text-align: center; }
.plate-caption p { margin: 0; color: #8e745e; font-family: var(--font-heading); font-size: .66rem; font-style: italic; letter-spacing: .08em; }
.plate-caption h2 { margin: 5px 0 3px; color: #39483d; font-family: var(--font-heading); font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 500; letter-spacing: .07em; }
.plate-caption span { color: #797666; font-size: .67rem; letter-spacing: .1em; }
.memory-button { margin-top: 24px; animation: rise-in .5s both; }

.memory-screen { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 38px 18px; color: #35483b; isolation: isolate; }
.memory-bg { position: absolute; inset: -5%; z-index: -2; background: linear-gradient(rgb(30 49 38 / 55%), rgb(30 42 34 / 70%)), url('assets/komorebi-terrace.jpg') center / cover; filter: blur(4px); }
.memory-card { position: relative; width: min(490px, 94vw); padding: 42px 48px 36px; border: 1px solid rgb(125 104 74 / 28%); border-radius: 4px; background: #f9f4e8; box-shadow: 0 30px 90px rgb(16 26 20 / 42%); text-align: center; animation: card-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
.memory-card::before { content: ''; position: absolute; inset: 12px; pointer-events: none; border: 1px solid #d8c9a9; }
.memory-kicker { margin: 0; color: #9b7f65; font-family: var(--font-heading); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; }
.memory-sparkle { width: 18px; margin: 11px auto 3px; color: #b28a67; }
.memory-card h1 { margin: 0 0 16px; font-family: var(--font-heading); font-size: 1.72rem; font-weight: 500; letter-spacing: .15em; }
.memory-sweet { width: 170px; height: 132px; margin: 0 auto 13px; border-radius: 45%; background-image: url('assets/komorebi-terrace.jpg'); background-size: 330% auto; background-repeat: no-repeat; }
.memory-date { margin: 0; color: #a39b88; font-size: .62rem; letter-spacing: .1em; }
.memory-card h2 { margin: 7px 0 7px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; letter-spacing: .07em; }
.memory-card h2 + p { max-width: 330px; margin: 0 auto; color: #74766d; font-size: .74rem; line-height: 1.8; }
.memory-details { display: flex; justify-content: center; gap: 20px; margin: 17px 0; color: #6e806f; font-size: .65rem; }
.memory-card blockquote { margin: 0; padding-top: 15px; border-top: 1px solid #ded3bb; color: #8b675c; font-family: var(--font-heading); font-size: .78rem; }
.memory-stamp { position: absolute; right: 34px; bottom: 75px; width: 51px; height: 51px; display: grid; place-items: center; transform: rotate(-10deg); border: 2px solid rgb(163 92 82 / 65%); border-radius: 50%; color: #a45e55; font-family: var(--font-heading); font-size: .52rem; line-height: .5; }
.memory-stamp strong { font-size: 1.45rem; }
.restart-button { position: relative; z-index: 1; margin-top: 27px; border-color: #a8af9f; border-radius: 999px; color: #536756; background: transparent; }
.floating-petal { position: absolute; color: #fff2d9; font-size: 2rem; opacity: .7; animation: petal-float 6s ease-in-out infinite; }
.petal-one { left: 15%; top: 22%; }
.petal-two { right: 13%; bottom: 19%; animation-delay: -3s; }

@keyframes gentle-pulse { 50% { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(63 82 65 / 14%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes card-arrive { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes petal-float { 50% { transform: translate(12px, -18px) rotate(20deg); } }

@media (max-width: 840px) {
  .game-header { height: 70px; }
  .counter-stage { padding-top: 32px; }
  .mood-picker { margin-left: 0; overflow-x: auto; padding-bottom: 5px; }
  .mood-chip { min-width: 138px; }
  .showcase-heading > p { display: none; }
  .showcase-image { aspect-ratio: 16 / 10; }
  .sweet-label { bottom: 9px; padding: 7px 9px; }
  .sweet-label small { display: none; }
  .sweet-label em { margin-top: -19px; }
  .selection-ring { top: 53%; }
  .table-stage { min-height: calc(100svh - 70px); grid-template-columns: 1fr; }
  .plate-area { min-height: 580px; grid-row: 1; }
  .table-copy { max-width: none; padding: 46px clamp(22px, 7vw, 60px) 60px; }
}

@media (max-width: 560px) {
  .game-header .journey-label { display: none; }
  .counter-intro { align-items: flex-start; gap: 13px; }
  .moca-avatar { width: 44px; height: 44px; }
  .counter-intro div > p:last-child { line-height: 1.7; }
  .showcase { border-radius: 18px; }
  .showcase-heading { min-height: 62px; padding: 12px 15px; }
  .showcase-heading h2 { font-size: .95rem; }
  .showcase-image { aspect-ratio: 16 / 10.5; }
  .showcase-image > img { object-fit: cover; object-position: center; }
  .sweet-hit-areas { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
  .selection-ring { display: none; }
  .sweet-label { width: 92%; bottom: 7px; padding: 6px 5px; text-align: center; }
  .sweet-label strong { font-size: .61rem; }
  .sweet-label em { display: none; }
  .selection-footer { justify-content: space-between; gap: 12px; }
  .selection-footer > div { text-align: left; }
  .selection-footer strong { font-size: .8rem; }
  .next-button { flex: 0 0 auto; }
  .plate-area { min-height: 490px; padding: 35px 20px; }
  .plate { width: min(370px, 96%); }
  .table-copy > h1 { font-size: 2rem; }
  .garnish-picker > div, .tasting-actions { grid-template-columns: 1fr; }
  .garnish-option { min-height: 52px; }
  .taste-action { min-height: 45px; }
  .memory-card { padding: 34px 27px 30px; }
  .memory-stamp { right: 22px; bottom: 71px; }
}

@media (prefers-reduced-motion: reduce) {
  .taste-action.current, .memory-card, .floating-petal, .memory-button { animation: none; }
}

/* Sweet-set experience v2 */
.menu-stage {
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: clamp(38px, 5vw, 64px) 0 40px;
}

.stage-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.stage-heading h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 500;
  letter-spacing: .035em;
}

.stage-heading div > p:last-child {
  margin: 6px 0 0;
  color: #72786e;
  font-size: .84rem;
}

.shuffle-button {
  height: 40px;
  padding: 0 16px;
  border-color: #aab5a5;
  border-radius: 999px;
  color: #5c705e;
  background: rgb(255 253 247 / 60%);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.menu-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 1px solid #d7d0bd;
  border-radius: 20px;
  color: #35483b;
  background: #fffaf0;
  box-shadow: 0 14px 34px rgb(56 49 35 / 8%);
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.menu-card:hover {
  transform: translateY(-4px);
  border-color: #9eac98;
  box-shadow: 0 20px 42px rgb(56 66 48 / 14%);
}

.menu-card.selected {
  border-color: #6f8872;
  box-shadow: 0 0 0 3px #dce7d8, 0 20px 42px rgb(56 66 48 / 14%);
}

.menu-picture {
  display: block;
  width: 100%;
  aspect-ratio: 1.18;
  background-repeat: no-repeat;
  background-color: #f6ecd3;
}

.menu-copy {
  display: block;
  min-height: 112px;
  padding: 15px 17px 18px;
}

.menu-copy small,
.menu-copy strong,
.menu-copy em {
  display: block;
}

.menu-copy small {
  overflow: hidden;
  color: #9b7f65;
  font-family: var(--font-heading);
  font-size: .61rem;
  font-style: italic;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-copy strong {
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: clamp(.92rem, 1.4vw, 1.13rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}

.menu-copy em {
  margin-top: 7px;
  color: #8a8c81;
  font-size: .65rem;
  font-style: normal;
  letter-spacing: .06em;
}

.check-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #718a72;
  box-shadow: 0 5px 14px rgb(47 67 48 / 24%);
  font-size: .76rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(.7);
  transition: .22s ease;
}

.menu-card.selected .check-mark { opacity: 1; transform: scale(1); }

.menu-footer {
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding-top: 22px;
}

.menu-footer > div { display: grid; text-align: right; }
.menu-footer > div > span { color: #8b8a80; font-size: .64rem; letter-spacing: .08em; }
.menu-footer > div > strong { font-family: var(--font-heading); font-size: .96rem; font-weight: 500; letter-spacing: .04em; }
.moca-choice { width: fit-content; color: #6c806f; border-radius: 999px; }

.drink-stage { padding-top: clamp(50px, 7vw, 90px); }
.compact-heading { max-width: 900px; grid-template-columns: auto 1fr; }
.drink-menu .menu-picture { aspect-ratio: 1.23; }
.drink-menu .menu-copy { min-height: 104px; }
.chosen-set strong { display: flex; align-items: center; gap: 9px; }
.chosen-set i { color: #b29276; font-style: normal; }

.set-table-stage {
  min-height: calc(100svh - 84px);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
}

.tasting-panel {
  align-self: center;
  max-width: 650px;
  padding: 58px clamp(34px, 6vw, 92px);
}

.tasting-panel > h1 {
  margin: 12px 0 16px;
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
}

.tasting-panel > h1 + p {
  margin: 0;
  color: #747970;
  font-size: .86rem;
  line-height: 2;
}

.set-actions { grid-template-columns: 1fr; }
.set-actions .taste-action { min-height: 52px; }

.served-set {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 36px;
  background: linear-gradient(135deg, #d9cfb8, #c4b899);
  isolation: isolate;
}

.served-set::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/komorebi-terrace.jpg') center / cover;
  filter: blur(22px) saturate(.65);
  opacity: .32;
  transform: scale(1.15);
}

.served-set::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgb(247 239 220 / 77%), rgb(223 209 179 / 9%));
}

.set-plate {
  position: relative;
  width: min(650px, 92%);
  aspect-ratio: 1.52;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffdf2 59%, #d9cba5 60%, #faf5df 64%, #aa9568 65%, #e9dec0 67%, transparent 68%);
  filter: drop-shadow(0 28px 24px rgb(74 60 35 / 24%));
}

.served-sweet,
.served-drink,
.mini-sweet,
.mini-drink {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
}

.served-sweet { left: 8%; top: 11%; width: 59%; height: 72%; border-radius: 42%; }
.served-drink { right: 3%; top: 7%; width: 42%; height: 73%; border-radius: 42%; }

.healing-screen {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 36px 18px;
  color: #33483a;
  isolation: isolate;
}

.healing-card {
  position: relative;
  width: min(620px, 94vw);
  padding: 48px 56px 42px;
  border: 1px solid rgb(125 104 74 / 30%);
  border-radius: 4px;
  background: #faf5e9;
  box-shadow: 0 32px 100px rgb(16 26 20 / 46%);
  text-align: center;
  animation: card-arrive .9s cubic-bezier(.2,.7,.2,1) both;
}

.healing-card::before {
  content: '';
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 1px solid #d8c9a9;
}

.set-miniature { position: relative; width: 210px; height: 110px; margin: 12px auto 5px; }
.mini-sweet { left: 0; top: 0; width: 125px; height: 104px; border-radius: 42%; }
.mini-drink { right: 0; top: 4px; width: 103px; height: 100px; border-radius: 42%; }
.healing-thanks { margin: 8px 0 13px; color: #9a7c63; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .18em; }

.healing-card h1 {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.1vw, 1.85rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .07em;
}

.healing-card h1 span { display: block; animation: healing-line 1.1s both; }
.healing-card h1 span + span { animation-delay: .45s; }

.order-summary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ded3bb;
  color: #758075;
  font-size: .67rem;
}

.order-summary i { color: #b0967b; font-style: normal; }
.healing-card .memory-stamp { bottom: 78px; }
.light-particles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff2c8; box-shadow: 0 0 12px #fff2c8; animation: drift-light 7s infinite ease-in-out; }
.light-particles i:nth-child(1) { left: 12%; top: 20%; }
.light-particles i:nth-child(2) { right: 15%; top: 30%; animation-delay: -2s; }
.light-particles i:nth-child(3) { left: 20%; bottom: 18%; animation-delay: -4s; }
.light-particles i:nth-child(4) { right: 22%; bottom: 13%; animation-delay: -5s; }

@keyframes healing-line { from { opacity: 0; transform: translateY(9px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drift-light { 50% { transform: translate(8px, -24px); opacity: .35; } }

@media (max-width: 920px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .set-table-stage { min-height: calc(100svh - 70px); grid-template-columns: 1fr; }
  .served-set { min-height: 570px; grid-row: 1; }
  .tasting-panel { max-width: none; padding: 48px clamp(24px, 8vw, 76px) 64px; }
}

@media (max-width: 620px) {
  .stage-heading { grid-template-columns: auto 1fr; align-items: start; }
  .stage-heading .shuffle-button { grid-column: 1 / -1; justify-self: start; margin-left: 58px; }
  .menu-grid { gap: 10px; }
  .menu-card { border-radius: 15px; }
  .menu-copy { min-height: 107px; padding: 12px 11px 14px; }
  .menu-copy strong { font-size: .78rem; }
  .menu-copy small { font-size: .52rem; }
  .menu-footer { grid-template-columns: 1fr auto; gap: 10px; }
  .menu-footer .moca-choice, .order-footer > button:first-child { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .menu-footer > div { text-align: left; }
  .menu-footer > div > strong { font-size: .74rem; }
  .next-button { padding-inline: 14px; font-size: .7rem; }
  .chosen-set strong { display: block; max-width: 155px; line-height: 1.5; }
  .chosen-set i { margin: 0 4px; }
  .served-set { min-height: 440px; padding: 35px 12px; }
  .set-plate { width: 100%; }
  .healing-card { padding: 40px 25px 34px; }
  .healing-card h1 { font-size: 1.08rem; line-height: 1.9; }
  .order-summary { flex-wrap: wrap; gap: 5px; }
  .healing-card .memory-stamp { right: 22px; bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-card, .healing-card, .healing-card h1 span, .light-particles i { animation: none; transition: none; }
}

/* Komorebi terrace experience v3 */
.terrace-game { background: #f7f3e8; }
.welcome-back { display: flex; align-items: center; gap: 7px; margin: 18px 0 0; color: #eee5cb; font-size: .72rem; letter-spacing: .06em; text-shadow: 0 2px 12px rgb(12 24 17 / 70%); }
.welcome-back svg { width: 14px; }

.mood-stage-v3 { position: relative; min-height: calc(100svh - 84px); display: grid; grid-template-columns: minmax(360px, .78fr) minmax(520px, 1.22fr); overflow: hidden; }
.mood-forest { background: linear-gradient(90deg, transparent 65%, #f6f1e5 100%), url('assets/komorebi-terrace.jpg') 38% center / cover; }
.mood-panel-v3 { align-self: center; width: min(620px, 86%); padding: 60px clamp(24px, 6vw, 80px) 60px 35px; }
.mood-panel-v3 > h1 { margin: 12px 0 14px; font-family: var(--font-heading); font-size: clamp(2.2rem, 4.3vw, 4.2rem); font-weight: 500; line-height: 1.35; letter-spacing: .05em; }
.mood-panel-v3 > p { margin: 0 0 27px; color: #747970; font-size: .84rem; }
.mood-grid-v3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mood-grid-v3 button { min-height: 86px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 14px 15px; border: 1px solid #d9d1bd; border-radius: 15px; color: #465b4b; background: rgb(255 253 247 / 78%); text-align: left; transition: .22s ease; }
.mood-grid-v3 button:hover { transform: translateY(-2px); border-color: #8ca18c; background: #edf1e7; box-shadow: 0 12px 25px rgb(61 78 62 / 10%); }
.mood-grid-v3 button > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #7c906f; background: #edf0e5; font-family: var(--font-heading); font-style: normal; }
.mood-grid-v3 button svg { width: 15px; color: #a5aa9f; }
.mood-grid-v3 span, .mood-grid-v3 strong, .mood-grid-v3 small { display: block; }
.mood-grid-v3 strong { font-family: var(--font-heading); font-size: .86rem; font-weight: 500; letter-spacing: .04em; }
.mood-grid-v3 small { margin-top: 4px; color: #96978d; font-size: .6rem; }

.menu-stage-v3 { width: min(1380px, 94vw); }
.five-grid { grid-template-columns: repeat(5, 1fr); }
.menu-stage-v3 .menu-card { overflow: visible; background: linear-gradient(#fffcf4, #f8f2e4); }
.menu-stage-v3 .menu-picture { aspect-ratio: 1; background-color: transparent; background-repeat: no-repeat; filter: drop-shadow(0 13px 10px rgb(95 61 32 / 18%)); transform: scale(.92); transition: transform .25s ease; }
.menu-stage-v3 .menu-card:hover .menu-picture, .menu-stage-v3 .menu-card.selected .menu-picture { transform: scale(1); }
.daily-number { position: absolute; left: 14px; top: 12px; color: #bda785; font-family: var(--font-heading); font-size: .58rem; letter-spacing: .12em; }
.v3-footer { grid-template-columns: 1fr auto auto; }

.drink-grid-v3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.drink-card-v3 { position: relative; overflow: hidden; min-height: 210px; padding: 0; border: 1px solid #d9d0ba; border-radius: 18px; color: #405344; background: #fffaf0; text-align: center; transition: .22s ease; }
.drink-card-v3:hover { transform: translateY(-3px); border-color: #95a48d; box-shadow: 0 15px 28px rgb(69 75 53 / 10%); }
.drink-card-v3.selected { border-color: #6f8872; box-shadow: 0 0 0 3px #dce7d8; }
.drink-picture-v3 { display: block; width: 64%; aspect-ratio: .8; margin: 2px auto 0; background-repeat: no-repeat; filter: saturate(.9) contrast(.96) brightness(1.02) drop-shadow(0 9px 7px rgb(88 53 29 / 14%)); transform: scale(.94); }
.drink-card-v3 > span:nth-child(2), .drink-card-v3 strong, .drink-card-v3 small { display: block; }
.drink-card-v3 > span:nth-child(2) { padding: 0 10px 14px; }
.drink-card-v3 strong { font-family: var(--font-heading); font-size: .78rem; font-weight: 500; letter-spacing: .03em; }
.drink-card-v3 small { margin-top: 4px; color: #959184; font-size: .56rem; }
.drink-card-v3 > i { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #758c74; font-size: .66rem; font-style: normal; opacity: 0; transform: scale(.7); transition: .2s; }
.drink-card-v3.selected > i { opacity: 1; transform: scale(1); }

.terrace-stage-v3 { min-height: calc(100svh - 84px); display: grid; grid-template-columns: minmax(620px, 1.35fr) minmax(390px, .65fr); background: #eee7d6; }
.terrace-scene { position: relative; align-self: stretch; min-height: 650px; overflow: hidden; background: url('assets/komorebi-terrace.jpg') center / cover no-repeat; }
.terrace-sweet, .terrace-drink { position: absolute; z-index: 2; display: block; background-repeat: no-repeat; }
.terrace-sweet { left: 29.2%; top: 55.3%; width: 17%; aspect-ratio: 1; filter: saturate(.86) contrast(.94) brightness(1.03) drop-shadow(0 8px 6px rgb(93 61 30 / 19%)); transform-origin: 50% 86%; }
.terrace-drink-wrap { position: absolute; z-index: 3; left: 85.4%; top: auto; bottom: 11.5%; width: 18%; aspect-ratio: .8; translate: -50% 0; transform-origin: 50% 88%; }
.terrace-drink-wrap.iced { left: 83.6%; top: auto; bottom: 13.5%; width: 17%; }
.terrace-drink { inset: 0; width: 100%; height: 100%; filter: saturate(.86) contrast(.94) brightness(1.03) drop-shadow(0 9px 7px rgb(90 59 30 / 18%)); }
.terrace-sweet.enjoyed, .terrace-drink-wrap.enjoyed { pointer-events: none; animation: enjoyed-away .95s cubic-bezier(.34, .02, .38, 1) forwards; }
.komorebi-glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 44% 61%, rgb(255 245 175 / 14%), transparent 18%), linear-gradient(112deg, transparent 28%, rgb(255 248 191 / 12%) 42%, transparent 54%); mix-blend-mode: screen; animation: terrace-light 8s ease-in-out infinite alternate; }
.terrace-order-panel { align-self: center; padding: 55px clamp(32px, 4.6vw, 68px); }
.terrace-order-panel h1 { margin: 11px 0 18px; font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 3.45rem); font-weight: 500; line-height: 1.38; letter-spacing: .05em; }
.terrace-order-panel > p { color: #77796f; font-size: .79rem; line-height: 1.9; }
.set-name-v3 { display: grid; gap: 4px; margin: 0 0 18px; padding: 14px 16px; border-left: 2px solid #b6a47e; background: rgb(255 252 243 / 55%); }
.set-name-v3 strong { font-family: var(--font-heading); font-size: .82rem; font-weight: 500; letter-spacing: .05em; }
.set-name-v3 span { color: #ac947a; font-family: var(--font-heading); font-size: .55rem; font-style: italic; }
.set-actions-v3 { grid-template-columns: repeat(2, 1fr); }
.set-actions-v3 .taste-action { min-height: 52px; }

.terrace-memory { background: linear-gradient(rgb(41 55 38 / 35%), rgb(40 50 35 / 57%)), url('assets/komorebi-terrace.jpg') center / cover; }
.healing-card-v3 { background: linear-gradient(145deg, #fffaf0, #f5eddc); }
.note-leaf { width: 22px; margin: 12px auto 0; color: #8ca17f; }
.return-promise { position: relative; z-index: 1; margin: 20px auto 0; padding: 15px 18px; border-radius: 14px; color: #687766; background: #e9efe3; }
.return-promise > p { margin: 0 0 9px; font-size: .7rem; }
.return-promise > div { display: flex; align-items: center; justify-content: center; gap: 6px; }
.return-promise > div > span { margin-right: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
.return-promise i { color: #cbd1c5; font-size: .65rem; font-style: normal; }
.return-promise i.filled { color: #799174; text-shadow: 0 0 8px rgb(122 151 116 / 45%); }
.return-promise > strong { display: block; margin-top: 9px; color: #9b6e5f; font-family: var(--font-heading); font-size: .65rem; font-weight: 500; }

@keyframes terrace-light { to { opacity: .58; transform: translateX(2%); } }
@keyframes enjoyed-away {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  32% { opacity: 1; transform: translateY(1%) scale(.92); }
  100% { opacity: 0; transform: translateY(-12%) scale(.68); filter: blur(2px) saturate(.7); }
}

@media (max-width: 1100px) {
  .five-grid { grid-template-columns: repeat(3, 1fr); }
  .drink-grid-v3 { grid-template-columns: repeat(3, 1fr); }
  .terrace-stage-v3 { grid-template-columns: 1fr; }
  .terrace-scene { min-height: auto; aspect-ratio: 16 / 9; }
  .terrace-order-panel { max-width: 760px; justify-self: center; }
}

@media (max-width: 760px) {
  .mood-stage-v3 { min-height: calc(100svh - 70px); grid-template-columns: 1fr; }
  .mood-forest { min-height: 36svh; background: linear-gradient(0deg, #f6f1e5 0%, transparent 28%), url('assets/komorebi-terrace.jpg') center / cover; }
  .mood-panel-v3 { width: 92%; margin: 0 auto; padding: 20px 0 45px; }
  .mood-grid-v3 { grid-template-columns: 1fr; }
  .five-grid { grid-template-columns: repeat(2, 1fr); }
  .drink-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .v3-footer { grid-template-columns: 1fr auto; }
  .v3-footer > button:first-child { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .terrace-sweet { left: 29.2%; top: 55.3%; width: 17%; }
  .terrace-drink-wrap { left: 85.4%; top: auto; bottom: 11.5%; width: 18%; }
  .terrace-order-panel { padding: 40px 24px 60px; }
}

@media (max-width: 480px) {
  .mood-panel-v3 > h1 { font-size: 2rem; }
  .menu-stage-v3 .stage-heading { grid-template-columns: auto 1fr; }
  .menu-stage-v3 .menu-copy { min-height: 98px; }
  .drink-card-v3 { min-height: 170px; }
  .drink-picture-v3 { aspect-ratio: .8; }
  .terrace-scene { aspect-ratio: 16 / 9; background-position: center; }
  .terrace-sweet { left: 29.2%; top: 55.3%; width: 17%; }
  .terrace-drink-wrap { left: 85.4%; top: auto; bottom: 11.5%; width: 18%; }
  .set-actions-v3 { grid-template-columns: 1fr; }
  .healing-card-v3 { padding: 38px 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .komorebi-glow { animation: none; }
  .terrace-sweet.enjoyed, .terrace-drink-wrap.enjoyed { animation: none; opacity: 0; }
}

/* ===== shadcn Button/Progress の代替（依存なし版） ===== */
.opening-screen button,.game-shell button,.healing-screen button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;}
.enter-button,.next-button,.memory-button,.shuffle-button,.restart-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.enter-button svg,.next-button svg,.memory-button svg,.shuffle-button svg,.restart-button svg{width:16px;height:16px;flex:0 0 auto;}
.next-button,.memory-button{color:#fffaf0;}
.ghost-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;color:#6c806f;background:transparent;font-size:.75rem;cursor:pointer;border:0;}
.ghost-btn:hover{background:rgb(233 239 227 / 60%);}
.ghost-btn svg{width:16px;height:16px;flex:0 0 auto;}
.sweet-progress{width:100%;}
.sweet-progress [data-slot='progress-track']{width:100%;border-radius:999px;overflow:hidden;}
.sweet-progress [data-slot='progress-indicator']{height:100%;border-radius:999px;transition:width .45s ease;}