@charset "UTF-8";
/* =========================================================
   ふたりでピッ！なかよしショップ — スタイル
   ========================================================= */
:root {
  --pink: #ff8fb1;
  --pink-deep: #e2557f;
  --mint: #7ee0d2;
  --mint-deep: #3fb7a5;
  --yellow: #ffd94d;
  --purple: #b28dff;
  --blue: #7fa8ff;
  --cream: #fff8ef;
  --brown: #5a4632;
  --big-color: #8f6fe8;   /* おおきい店員さん＝むらさき */
  --small-color: #ff6f9c; /* ちいさい店員さん＝ピンク */
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Hiragino Maru Gothic ProN', 'BIZ UDGothic', 'Rounded Mplus 1c', 'Yu Gothic', sans-serif;
  background: #ffeef6;
}

img { pointer-events: none; -webkit-user-drag: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; touch-action: manipulation; }

#app { width: 100%; height: 100%; position: relative; }

.screen {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
}
.screen.active { display: flex; flex-direction: column; }

.hidden { display: none !important; }

/* =========================================================
   タイトル画面
   ========================================================= */
#screen-title {
  background: linear-gradient(180deg, #ffe3f0 0%, #fff3d9 55%, #dff7f0 100%);
  align-items: center; justify-content: center;
}

.sky-deco { position: absolute; inset: 0; pointer-events: none; }
.sky-deco::before, .sky-deco::after {
  content: '\2601\FE0F'; position: absolute; font-size: 8vmin; opacity: .8;
  animation: cloud-drift 26s linear infinite;
}
.sky-deco::before { top: 8%; left: -12%; }
.sky-deco::after { top: 20%; left: -12%; animation-delay: -13s; font-size: 6vmin; }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(130vw); } }

.title-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 2vmin;
  z-index: 1;
}

.title-logo { text-align: center; line-height: 1.15; animation: logo-bob 3s ease-in-out infinite; }
.logo-line1 {
  display: block; font-size: 7vmin; font-weight: 900; color: var(--pink-deep);
  text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(226, 85, 127, .25);
  letter-spacing: .04em;
}
.logo-line2 {
  display: block; font-size: 10.5vmin; font-weight: 900;
  background: linear-gradient(90deg, #ff6f9c, #ff9b2f, #3fb7a5, #7fa8ff, #b28dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 6px 0 rgba(0,0,0,.12));
  letter-spacing: .02em;
}
@keyframes logo-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.4vmin) rotate(1deg); } }

.title-chars { display: flex; align-items: flex-end; gap: 4vmin; height: 30vmin; }
.tchar img { height: 28vmin; max-width: 23vmin; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 6px rgba(0,0,0,.15)); }
.tchar-flora img { height: 21vmin; max-width: 18vmin; }

.big-btn {
  font-size: 5.5vmin; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #ff9fbe, #ff6f9c);
  border-radius: 100vmin; padding: 2.4vmin 7vmin;
  box-shadow: 0 8px 0 #d14f7c, 0 12px 16px rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .1s;
  animation: btn-pulse 1.8s ease-in-out infinite;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #d14f7c; }
@keyframes btn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.btn-icon { font-size: 1.1em; }

.title-sub { font-size: 2.6vmin; color: #a06b85; font-weight: 700; }

.corner-btn {
  position: absolute; bottom: 2.4vmin;
  font-size: 2.2vmin; font-weight: 800; color: #a06b85;
  background: rgba(255,255,255,.85); border-radius: 2vmin;
  padding: 1.2vmin 2vmin; box-shadow: var(--shadow);
  line-height: 1.3;
}
.corner-left { left: 2.4vmin; }
.corner-right { right: 2.4vmin; font-size: 3.6vmin; }

/* =========================================================
   おうちのかたへ
   ========================================================= */
#screen-parents { background: rgba(90, 70, 50, .5); align-items: center; justify-content: center; z-index: 30; }
.parents-panel {
  background: #fff; border-radius: 3vmin; padding: 4vmin;
  width: min(88vw, 860px); max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2.4vmin;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  touch-action: pan-y;
}
.parents-panel h2 { color: var(--pink-deep); font-size: 4vmin; text-align: center; }
.parents-body { font-size: 2.6vmin; line-height: 1.8; color: #4a3b2f; }
.parents-body ul { padding-left: 3.4vmin; margin: 1.6vmin 0; }
.parents-body li { margin-bottom: .8vmin; }
.parents-note { color: #a06b85; font-weight: 700; }
.parents-panel .big-btn { align-self: center; animation: none; font-size: 3.4vmin; padding: 1.6vmin 6vmin; }

/* =========================================================
   おみせえらび
   ========================================================= */
#screen-menu { background: linear-gradient(180deg, #fff3d9, #ffe3f0); }

.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2vmin 2.6vmin; z-index: 2;
}
.menu-head h1 { font-size: 5vmin; color: var(--brown); text-shadow: 0 2px 0 #fff; }

.nav-btn {
  font-size: 4.2vmin; background: #fff; border-radius: 2vmin;
  width: 8vmin; height: 8vmin; box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.menu-head-btns { display: flex; gap: 1.2vmin; }
.nav-btn-chars { width: auto; padding: 0 1.6vmin; font-size: 3vmin; }
.nav-btn-label { font-size: 1.8vmin; font-weight: 900; color: var(--brown); margin-left: .5vmin; }
.nav-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

.stamp-mini { display: flex; gap: 1.6vmin; font-size: 3.2vmin; font-weight: 900; }
.stamp-mini span { background: #fff; border-radius: 100vmin; padding: .6vmin 2vmin; box-shadow: var(--shadow); }
.stamp-mini-big { color: var(--big-color); }
.stamp-mini-small { color: var(--small-color); }

.menu-grid {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 2.4vmin; padding: 1vmin 3vmin 16vmin;
  z-index: 2;
}
.menu-card {
  background: #fff; border-radius: 3.4vmin;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vmin;
  box-shadow: 0 8px 0 rgba(0,0,0,.1);
  border: .8vmin solid transparent;
  transition: transform .12s;
}
.menu-card:active { transform: scale(.94); }
.card-fruit  { border-color: #ffb3c8; background: #fff0f5; }
.card-bakery { border-color: #f2c894; background: #fff7ec; }
.card-flower { border-color: #b8e6b0; background: #f2fbef; }
.card-deco   { border-color: #a8d8ff; background: #eef7ff; }
.card-album  { border-color: #d9c4ff; background: #f7f2ff; }
.menu-emoji { font-size: 9vmin; line-height: 1; }
.menu-emoji svg { width: 11vmin; height: 11vmin; }
.menu-name { font-size: 3.2vmin; font-weight: 900; color: var(--brown); }

.menu-clerks {
  position: absolute; bottom: -1vmin; right: 3vmin;
  display: flex; align-items: flex-end; gap: 1.6vmin; z-index: 1;
}
.menu-clerk { height: 17vmin; max-width: 15vmin; object-fit: contain; object-position: bottom; }
.menu-clerk:last-child { height: 13vmin; max-width: 12vmin; }

/* =========================================================
   キャラ共通モーション
   ========================================================= */
/* ぴょこぴょこ待機（squash & stretch） */
.anim-idle { animation: idle-hop 2.2s ease-in-out infinite; transform-origin: bottom center; }
.anim-idle2 { animation: idle-hop 2.2s ease-in-out infinite .55s; transform-origin: bottom center; }
@keyframes idle-hop {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  8%  { transform: translateY(0) scaleY(.94) scaleX(1.04); }
  22% { transform: translateY(-2.2vmin) scaleY(1.05) scaleX(.97); }
  36% { transform: translateY(0) scaleY(.96) scaleX(1.03); }
  46% { transform: translateY(0) scaleY(1) scaleX(1); }
}

/* うれしいジャンプ */
.anim-happy { animation: happy-jump .7s ease-in-out 3; transform-origin: bottom center; }
@keyframes happy-jump {
  0%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(0) scaleY(.9) scaleX(1.08); }
  45% { transform: translateY(-4.5vmin) rotate(-6deg); }
  60% { transform: translateY(-4vmin) rotate(6deg); }
  85% { transform: translateY(0) scaleY(.94) scaleX(1.05); }
}

/* ふるふる（やさしいヒント） */
.anim-wiggle { animation: wiggle .55s ease-in-out 2; transform-origin: bottom center; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}

/* ぽよん（タップしたとき） */
.anim-boing { animation: boing .45s ease-out 1; transform-origin: bottom center; }
@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scaleY(.82) scaleX(1.15); }
  60% { transform: scaleY(1.1) scaleX(.92); }
  100% { transform: scale(1); }
}

/* =========================================================
   おみせ画面
   ========================================================= */
#screen-shop { flex-direction: row !important; background: #ffeef6; }

.shop-bg { position: absolute; inset: 0; transition: background 1s; }
.theme-fruit  { background: linear-gradient(180deg, #ffe9d9 0%, #fff6e3 45%, #ffe0ec 100%); }
.theme-bakery { background: linear-gradient(180deg, #ffedd1 0%, #fff6e8 45%, #f7e3cf 100%); }
.theme-flower { background: linear-gradient(180deg, #e3f7e8 0%, #f4fdf0 45%, #ffeef6 100%); }
.theme-deco   { background: linear-gradient(180deg, #e3f0ff 0%, #f0f8ff 45%, #ffeef6 100%); }

/* --- 店員パネル --- */
.clerk-panel {
  width: 17vw; min-width: 120px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1.2vmin; padding: 1.6vmin 1vmin;
  transition: box-shadow .3s, background .3s;
  position: relative;
}
.clerk-left  { background: rgba(179, 148, 255, .16); border-right: .5vmin dashed rgba(143, 111, 232, .3); }
.clerk-right { background: rgba(255, 143, 177, .14); border-left: .5vmin dashed rgba(255, 111, 156, .3); }

.clerk-label {
  font-size: 2.2vmin; font-weight: 900; text-align: center; line-height: 1.25;
  border-radius: 100vmin; padding: .8vmin 2vmin; color: #fff;
}
.clerk-left .clerk-label { background: var(--big-color); }
.clerk-right .clerk-label { background: var(--small-color); }

.clerk-avatar img { height: 16vmin; max-width: 14vmin; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 4px rgba(0,0,0,.12)); }

/* 手番のときに光る */
.clerk-panel.my-turn { animation: panel-glow 1.4s ease-in-out infinite; }
.clerk-left.my-turn  { background: rgba(179, 148, 255, .38); }
.clerk-right.my-turn { background: rgba(255, 143, 177, .34); }
@keyframes panel-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 160, 0); }
  50% { box-shadow: inset 0 0 6vmin 1vmin rgba(255, 240, 140, .9); }
}
.clerk-panel.my-turn .clerk-avatar { animation: idle-hop 1s ease-in-out infinite; transform-origin: bottom center; }

.clerk-stamps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6vmin;
  min-height: 6vmin; align-content: start;
}
.clerk-stamps svg { width: 4.6vmin; height: 4.6vmin; }
.clerk-stamps .stamp-new { animation: stamp-in .5s cubic-bezier(.2, 2.2, .4, 1) 1; }
@keyframes stamp-in { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ありがとうボタン */
.thanks-btn {
  margin-top: auto;
  width: 13vmin; height: 13vmin; border-radius: 50%;
  font-size: 2.1vmin; font-weight: 900; color: #fff; line-height: 1.3;
  visibility: hidden; opacity: 0; transform: scale(.5);
  transition: opacity .3s, transform .3s;
}
.clerk-left .thanks-btn { background: radial-gradient(circle at 35% 30%, #b79bff, #8f6fe8); box-shadow: 0 6px 0 #6b4fc0; }
.clerk-right .thanks-btn { background: radial-gradient(circle at 35% 30%, #ff9fbe, #ff6f9c); box-shadow: 0 6px 0 #d14f7c; }
.thanks-btn.show {
  visibility: visible; opacity: 1; transform: scale(1);
  animation: thanks-pulse 1s ease-in-out infinite;
}
.thanks-btn.pressed { animation: none; transform: scale(.88); filter: brightness(1.25); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
@keyframes thanks-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 0 0 0 rgba(255, 240, 140, .9); }
  50% { transform: scale(1.1); box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 0 0 2.4vmin rgba(255, 240, 140, 0); }
}

/* --- 中央ステージ --- */
.shop-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 4; min-width: 0;
}

.shop-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.4vmin 2vmin; gap: 1vmin;
}
.shop-title {
  font-size: 3.6vmin; font-weight: 900; color: var(--brown);
  background: #fff; border-radius: 100vmin; padding: .8vmin 3.4vmin;
  box-shadow: var(--shadow);
}
.customer-dots { display: flex; gap: .8vmin; font-size: 2.6vmin; min-width: 12vmin; justify-content: flex-end; }

/* 手番バナー */
.turn-banner {
  font-size: 3vmin; font-weight: 900; color: #fff;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  border-radius: 100vmin; padding: .9vmin 4vmin;
  box-shadow: var(--shadow);
  transition: background .3s, transform .2s;
  z-index: 6;
}
.turn-banner.for-big { background: var(--big-color); }
.turn-banner.for-small { background: var(--small-color); }
.turn-banner.for-both { background: linear-gradient(90deg, var(--big-color), var(--small-color)); }
.turn-banner.bump { animation: banner-bump .5s cubic-bezier(.2, 2, .4, 1) 1; }
@keyframes banner-bump { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* お客さん */
.customer-area { height: 26vmin; display: flex; align-items: flex-end; justify-content: center; position: relative; width: 100%; }
.customer { position: relative; display: flex; flex-direction: column; align-items: center; }
.customer img { height: 22vmin; max-width: 19vmin; object-fit: contain; object-position: bottom; filter: drop-shadow(0 5px 5px rgba(0,0,0,.15)); transform-origin: bottom center; }

.customer.walk-in { animation: walk-in 1.6s ease-out 1; }
@keyframes walk-in {
  0%   { transform: translateX(46vw) translateY(0); }
  12%  { transform: translateX(40vw) translateY(-2vmin); }
  25%  { transform: translateX(34vw) translateY(0); }
  37%  { transform: translateX(28vw) translateY(-2vmin); }
  50%  { transform: translateX(21vw) translateY(0); }
  62%  { transform: translateX(15vw) translateY(-2vmin); }
  75%  { transform: translateX(8vw)  translateY(0); }
  87%  { transform: translateX(3vw)  translateY(-2vmin); }
  100% { transform: translateX(0) translateY(0); }
}
.customer.walk-out { animation: walk-out 1.4s ease-in 1 forwards; }
@keyframes walk-out {
  0%   { transform: translateX(0) translateY(0); }
  15%  { transform: translateX(-6vw) translateY(-2.4vmin) ; }
  30%  { transform: translateX(-13vw) translateY(0); }
  45%  { transform: translateX(-20vw) translateY(-2.4vmin); }
  60%  { transform: translateX(-27vw) translateY(0); }
  75%  { transform: translateX(-35vw) translateY(-2.4vmin); }
  100% { transform: translateX(-50vw) translateY(0); opacity: 0; }
}
.customer.idle img { animation: idle-hop 2.4s ease-in-out infinite; }
.customer.happy img { animation: happy-jump .7s ease-in-out 3; }

/* ふきだし（キャラの右横に出す。顔に被らない） */
.customer { margin-right: 20vmin; } /* ふきだしの分だけ左へ寄せて、ペアでセンターに見せる */
.bubble {
  position: absolute; top: -2vmin; left: calc(100% - 1vmin);
  background: #fff; border-radius: 2.6vmin; padding: 1.4vmin 2.4vmin;
  font-size: 2.9vmin; font-weight: 900; color: var(--brown);
  box-shadow: var(--shadow);
  white-space: normal; width: max-content; max-width: min(38vmin, 36vw);
  line-height: 1.5; text-align: center; z-index: 7;
  opacity: 0; transform: scale(.4); transform-origin: left center;
  transition: opacity .25s, transform .25s cubic-bezier(.2, 2, .4, 1);
}
.bubble.show { opacity: 1; transform: scale(1); }
.bubble::after {
  content: ''; position: absolute; left: -2.2vmin; top: 3.2vmin;
  border: 1.4vmin solid transparent; border-right: 2.4vmin solid #fff; border-left: 0;
}

/* 商品棚 */
.shelf {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2vmin;
  width: min(92%, 130vmin); padding: 1.6vmin;
  background: linear-gradient(180deg, #f9dcb8, #f0c894);
  border-radius: 2.6vmin; box-shadow: 0 6px 0 #d8a86c, var(--shadow);
  min-height: 17vmin;
}
.shelf-item {
  background: var(--cream); border-radius: 2vmin; padding: 1vmin .6vmin .6vmin;
  display: flex; flex-direction: column; align-items: center; gap: .4vmin;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.06);
  position: relative;
  transition: transform .12s;
}
.shelf-item svg { width: 100%; height: 10vmin; }
.shelf-item .item-name { font-size: 1.9vmin; font-weight: 800; color: var(--brown); }
.shelf-item:active { transform: scale(.95); }
.shelf-item.sold { opacity: .35; filter: grayscale(.4); }

/* 正解の商品：キラキラ光る */
.shelf-item.glow {
  animation: item-glow 1.1s ease-in-out infinite;
  z-index: 3;
}
@keyframes item-glow {
  0%, 100% { box-shadow: 0 0 0 .5vmin #ffe94d, 0 0 3vmin 1vmin rgba(255, 233, 77, .8); transform: scale(1.06); }
  50% { box-shadow: 0 0 0 .9vmin #fff3a0, 0 0 5vmin 2vmin rgba(255, 233, 77, .95); transform: scale(1.12); }
}
.shelf-item.glow::before, .shelf-item.glow::after {
  content: '\2728'; position: absolute; font-size: 3vmin; pointer-events: none;
  animation: sparkle-float 1.3s ease-in-out infinite;
}
.shelf-item.glow::before { top: -2vmin; left: -1vmin; }
.shelf-item.glow::after { bottom: -1vmin; right: -1vmin; animation-delay: .6s; }
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-1.4vmin) scale(1.35); opacity: .7; }
}

/* ヒントのゆらゆら */
.shelf-item.hint { animation: wiggle .55s ease-in-out infinite; }

/* カウンター */
.counter {
  margin-top: auto; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding-bottom: 1vmin;
}
.counter-board {
  position: absolute; bottom: 0; width: 100%; height: 9vmin;
  background: linear-gradient(180deg, #e8b988, #d8a86c);
  border-radius: 3vmin 3vmin 0 0;
  box-shadow: inset 0 5px 0 rgba(255,255,255,.35);
}

.bag-area {
  position: relative; z-index: 2; height: 17vmin;
  display: flex; align-items: flex-end; justify-content: center; gap: 1vmin;
}
.bag-wrap { position: relative; }
.bag-wrap svg { width: 15vmin; height: 15vmin; }
.bag-wrap.appear { animation: boing .5s ease-out 1; transform-origin: bottom center; }
.bag-items {
  position: absolute; top: 1vmin; left: 50%; transform: translateX(-50%);
  display: flex; gap: .2vmin; z-index: -1;
}
.bag-items svg { width: 6vmin; height: 6vmin; }
.bag-sticker {
  position: absolute; bottom: 2.4vmin; right: -.5vmin;
  animation: sticker-stick .45s cubic-bezier(.2, 2.4, .4, 1) 1;
}
.bag-sticker svg { width: 6vmin; height: 6vmin; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
@keyframes sticker-stick {
  0% { transform: scale(2.6) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}

/* 選択トレイ（袋・シールなど） */
.choice-tray {
  position: absolute; bottom: 10vmin; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2vmin; z-index: 8;
}
.choice-btn {
  background: #fff; border-radius: 2.4vmin; padding: 1.2vmin;
  box-shadow: 0 5px 0 rgba(0,0,0,.14);
  animation: choice-in .4s cubic-bezier(.2, 2, .4, 1) backwards;
  transition: transform .12s;
}
.choice-btn:nth-child(2) { animation-delay: .08s; }
.choice-btn:nth-child(3) { animation-delay: .16s; }
.choice-btn:nth-child(4) { animation-delay: .24s; }
.choice-btn:active { transform: scale(.9); }
.choice-btn svg { width: 10vmin; height: 10vmin; display: block; }
.choice-btn .choice-name { display: block; text-align: center; font-size: 1.8vmin; font-weight: 800; color: var(--brown); }
@keyframes choice-in { 0% { transform: translateY(6vmin) scale(.4); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

/* 商品が袋へ飛ぶ */
.fly-item { position: fixed; z-index: 40; pointer-events: none; transition: all .75s cubic-bezier(.3, -0.3, .3, 1.2); }
.fly-item svg { width: 10vmin; height: 10vmin; }

/* エフェクトレイヤー（紙ふぶき・スター） */
#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti {
  position: absolute; top: -4vmin;
  width: 1.8vmin; height: 1.2vmin; border-radius: .3vmin;
  animation: confetti-fall linear 1 forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0) translateX(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(var(--sway, 4vmin)); opacity: 0; }
}
.burst-star {
  position: absolute; font-size: 3.4vmin; pointer-events: none;
  animation: burst .8s ease-out 1 forwards;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--bx, 0), var(--by, -10vmin)) scale(1.3); opacity: 0; }
}

/* =========================================================
   ありがとうカード
   ========================================================= */
#screen-album { background: linear-gradient(180deg, #f7f2ff, #ffeef6); }
.album-grid {
  flex: 1; overflow-y: auto; touch-action: pan-y;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17vmin, 1fr));
  gap: 2vmin; padding: 1vmin 3vmin 4vmin;
}
.album-card {
  background: #fff; border-radius: 2.4vmin; padding: 1.4vmin 1vmin;
  display: flex; flex-direction: column; align-items: center; gap: .6vmin;
  box-shadow: var(--shadow); border: .5vmin solid #e8dcff;
  min-height: 22vmin;
}
.album-card img { height: 11vmin; max-width: 9.5vmin; object-fit: contain; object-position: bottom; }
.album-card svg { width: 6.5vmin; height: 6.5vmin; }
.album-card .card-title { font-size: 1.9vmin; font-weight: 800; color: var(--brown); text-align: center; line-height: 1.3; }
.album-card.locked { opacity: .55; justify-content: center; }
.album-card.locked .q { font-size: 7vmin; color: #cbb8f0; font-weight: 900; }
.album-card.new-card { animation: stamp-in .6s cubic-bezier(.2, 2.2, .4, 1) 1; }

/* =========================================================
   オーバーレイ（おいわい）
   ========================================================= */
.overlay {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(255, 240, 250, .72);
  display: flex; align-items: center; justify-content: center;
}
.overlay-card {
  background: #fff; border-radius: 4vmin; padding: 4vmin 6vmin;
  display: flex; flex-direction: column; align-items: center; gap: 2.4vmin;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  animation: banner-bump .5s cubic-bezier(.2, 2, .4, 1) 1;
  max-width: 88vw; text-align: center;
}
.overlay-card h2 { font-size: 5vmin; color: var(--pink-deep); }
.overlay-card .ov-msg { font-size: 3vmin; font-weight: 800; color: var(--brown); line-height: 1.6; }
.overlay-card .ov-chars { display: flex; gap: 2vmin; align-items: flex-end; }
.overlay-card .ov-chars img { height: 16vmin; max-width: 14vmin; object-fit: contain; object-position: bottom; }
.overlay-card .ov-stamps { display: flex; gap: 4vmin; }
.overlay-card .ov-stamp-col { display: flex; flex-direction: column; align-items: center; gap: .8vmin; font-size: 2.4vmin; font-weight: 900; }
.overlay-card .ov-stamp-col svg { width: 10vmin; height: 10vmin; }
.ov-stamp-col.col-big { color: var(--big-color); }
.ov-stamp-col.col-small { color: var(--small-color); }
.overlay-card .big-btn { animation: none; font-size: 3.6vmin; padding: 1.8vmin 6vmin; }
.overlay-card .btn-row { display: flex; gap: 2.4vmin; flex-wrap: wrap; justify-content: center; }
.overlay-card .big-btn.alt { background: linear-gradient(180deg, #9adcd2, #3fb7a5); box-shadow: 0 8px 0 #2e8f81; }

/* =========================================================
   開店じゅんび用の飾り配置スポット
   ========================================================= */
.deco-spot {
  position: absolute; z-index: 6;
  width: 9vmin; height: 9vmin; border-radius: 50%;
  border: .6vmin dashed rgba(255, 111, 156, .65);
  background: rgba(255, 255, 255, .5);
  display: grid; place-items: center;
  animation: thanks-pulse 1.2s ease-in-out infinite;
}
.deco-spot::after { content: '\2728'; font-size: 3.4vmin; }
.deco-placed { position: absolute; z-index: 6; animation: boing .5s ease-out 1; transform-origin: bottom center; }
.deco-placed svg { width: 11vmin; height: 11vmin; }

/* =========================================================
   キャラクターえらび
   ========================================================= */
#screen-select { background: linear-gradient(180deg, #eef4ff, #ffe9f3); }

#select-title { font-size: 3.8vmin; color: var(--brown); text-shadow: 0 2px 0 #fff; transition: color .3s; }
#select-title.for-big { color: var(--big-color); }
#select-title.for-small { color: var(--small-color); }

.select-picked { display: flex; gap: 1.4vmin; }
.picked-slot {
  width: 11vmin; height: 13vmin; border-radius: 2vmin;
  background: rgba(255,255,255,.8); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4vmin;
  border: .5vmin dashed #d8c8e8;
}
.picked-slot span { font-size: 1.7vmin; font-weight: 900; color: #b09ac8; }
.picked-big.filled { border-style: solid; border-color: var(--big-color); }
.picked-small.filled { border-style: solid; border-color: var(--small-color); }
.picked-slot img { height: 8.5vmin; max-width: 7.5vmin; object-fit: contain; }
.picked-slot.filled span { color: var(--brown); }

.select-grid {
  flex: 1; overflow-y: auto; touch-action: pan-y;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.8vmin; padding: 1vmin 3vmin 3vmin;
}
.select-card {
  background: #fff; border-radius: 2.6vmin; padding: 1.2vmin .8vmin;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .6vmin;
  box-shadow: 0 6px 0 rgba(0,0,0,.1);
  border: .6vmin solid transparent;
  transition: transform .12s;
}
.select-card:active { transform: scale(.93); }
.select-card img { height: 14vmin; max-width: 12vmin; object-fit: contain; object-position: bottom; transform-origin: bottom center; }
.select-card:nth-child(odd) img { animation: idle-hop 2.4s ease-in-out infinite; }
.select-card:nth-child(even) img { animation: idle-hop 2.4s ease-in-out infinite .7s; }
.select-card .select-name { font-size: 2.1vmin; font-weight: 900; color: var(--brown); }
.select-card.taken { opacity: .45; }
.select-card.taken .select-name::after { content: ' ✓'; }
.select-card.picked-by-big { border-color: var(--big-color); background: #f3edff; }
.select-card.picked-by-small { border-color: var(--small-color); background: #fff0f5; }

/* =========================================================
   おうちのかたへ：設定UI
   ========================================================= */
.parents-settings { display: flex; flex-direction: column; gap: 1.8vmin; }
.setting-row {
  background: #faf6ff; border-radius: 2vmin; padding: 1.8vmin 2.2vmin;
  display: flex; flex-direction: column; gap: 1.2vmin;
}
.setting-label { font-size: 2.7vmin; font-weight: 900; color: #4a3b2f; display: flex; flex-direction: column; gap: .3vmin; }
.setting-hint { font-size: 2vmin; font-weight: 600; color: #a08cb8; }
.setting-opts { display: flex; gap: 1.2vmin; flex-wrap: wrap; }
.setting-opts button {
  font-size: 2.3vmin; font-weight: 800; color: #7a6a8a;
  background: #fff; border: .4vmin solid #e0d4ee; border-radius: 100vmin;
  padding: 1vmin 2.6vmin;
}
.setting-opts button.on {
  color: #fff; background: linear-gradient(180deg, #b79bff, #8f6fe8);
  border-color: #8f6fe8; box-shadow: 0 3px 0 #6b4fc0;
}

/* =========================================================
   ことばの横の絵（イージーモード）
   ========================================================= */
.inline-icon { display: inline-block; vertical-align: -0.32em; margin: 0 .08em; }
.inline-icon svg { width: 1.35em; height: 1.35em; display: inline-block; }

/* =========================================================
   おしまい（タイマー）画面
   ========================================================= */
.overlay.night { background: rgba(58, 48, 100, .82); }
.overlay-card.night-card { background: linear-gradient(180deg, #fdf8ff, #efe6ff); }
.night-card h2 { color: #6b4fc0; }
.night-card .moon { font-size: 8vmin; animation: logo-bob 3s ease-in-out infinite; }

/* =========================================================
   縦向きヒント
   ========================================================= */
.rotate-hint {
  position: fixed; inset: 0; z-index: 100;
  background: #ffe3f0;
  display: flex; align-items: center; justify-content: center;
}
.rotate-inner { font-size: 6vw; font-weight: 900; color: var(--pink-deep); animation: logo-bob 2s ease-in-out infinite; }

/* 小さい画面の調整 */
@media (max-height: 460px) {
  .clerk-avatar img { height: 12vmin; }
  .customer-area { height: 22vmin; }
}