/* かめおじぃの 入れ歯ミニゲーム — 見た目
   2026-10-06 Claude Design のデザイン（kame-ui.css）を土台にした。
   ・色・角丸・影・字の大きさは :root の変数にまとまっている
   ・ゲームの中のもの（かめおじぃ・たべもの・入れ歯・かけら）の位置は js が決める
   ・後半の「ゲームの動き」は、もとの style.css から引きついだもの */

:root {
  /* 色 */
  --c-ink: #4F3423;
  --c-ink-soft: #7A5A44;
  --c-cream: #FFF8EC;
  --c-cream-deep: #F6E7CC;
  --c-white: #FFFFFF;
  --c-coral: #EE6A5E;
  --c-coral-deep: #C94C42;
  --c-green: #3E9E68;
  --c-green-deep: #2A7449;
  --c-sky: #5CC3D9;
  --c-sun: #FFD15A;
  --c-pink: #F48C7F;
  --c-wood: #D99F62;
  --c-wood-light: #EBC08A;
  --c-wood-dark: #9A6234;
  --c-wood-deep: #74461F;
  --c-stone: #D6CDBE;
  --c-stone-dark: #A89C88;
  --c-stone-deep: #877B68;

  /* 角丸 */
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 30px;
  --r-pill: 999px;

  /* 影（ぷっくりクレイ感） */
  --sh-clay: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -5px 0 rgba(190,140,90,.18), 0 5px 0 rgba(170,120,70,.28), 0 10px 18px rgba(90,60,30,.16);
  --sh-chip: inset 0 -3px 0 rgba(190,140,90,.16), 0 4px 0 rgba(150,105,60,.22), 0 6px 12px rgba(60,40,20,.12);
  --sh-thing: drop-shadow(0 8px 6px rgba(60,40,20,.22));

  /* 字の大きさ */
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 19px;
  --fs-xl: 26px;
  --fs-num: 32px;

  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* ⚠️ ページ自体はスクロールさせない（iPhone で QR から開くと、少し下にスクロールした状態で
   開いて、看板の上が切れ、下にベージュの帯が出た。2026-10-07 作者が実機で発見） */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #FBF3E6;
  color: var(--c-ink);
  font-family: var(--font);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; touch-action: manipulation; }

/* ---------- 画面の土台（#app） ----------
   スマホは画面いっぱい。PCでは真ん中にスマホ幅で置く。
   背景は ::before で少しぼかして（--bg-blur）、白いベール（--bg-veil）を重ねる */
/* ⚠️ 高さは 100dvh にしない。画面そのものに貼りつける（position: fixed; 上下左右 0）。
   100dvh は Safari のツールバーの出し入れの途中で計算がずれて、開いた直後だけ上にずれた（2026-10-07） */
.screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font);
  color: var(--c-ink);
  background: #cfeaf3;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  --bg-veil: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38));
  --bg-blur: 3px;
  --bg-img: url("img/hamabe.jpg");
}
.screen::before {
  content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none;
  background: var(--bg-veil), var(--bg-img) center bottom / cover no-repeat;
  filter: blur(var(--bg-blur));
}
.screen--menu { --bg-img: url("img/bg_menu.jpg"); }
.screen--go   { --bg-img: url("img/bg_go.jpg"); }
.screen--puz  { --bg-img: url("img/bg_menu.jpg"); }
/* カーリングは、的が背景にえがかれているので ぼかさない。
   どのスマホでも的が同じくらいの高さに来るように、位置と大きさは js（curling.js）が決める */
.screen--curl { --bg-img: url("img/bg_curl.jpg"); --bg-blur: 0px; }
.screen--curl::before {
  inset: 0;
  background: var(--bg-veil), var(--bg-img) 50% var(--curl-bg-y, 100%) / var(--curl-bg-size, cover) no-repeat;
}
.screen img { display: block; -webkit-user-drag: none; }

/* 選ぶ画面と、ゲームの場所 */
.view { position: absolute; inset: 0; }
/* ⚠️ #menu の display:flex より強くしないと、隠しても見えたままになる */
.view[hidden] { display: none !important; }
#stage { touch-action: none; }

/* ---------- 上の帯 ---------- */
.hud {
  position: absolute; z-index: 20;
  top: calc(var(--safe-top) + 10px); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none; /* 帯の下でも、ねらう・はじく ができるように（もどるだけ押せる） */
}
.hud-back, .hud-score, .hud-lives, .hud-left {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 52px; padding: 0 14px;
  background: var(--c-white); border-radius: var(--r-pill);
  box-shadow: var(--sh-chip);
  font-weight: 700; font-size: var(--fs-s); color: var(--c-ink); white-space: nowrap;
}
.hud-back { height: 46px; padding: 0 16px 0 12px; border: 0; font-family: var(--font); cursor: pointer; pointer-events: auto; }
.hud-back:active { transform: translateY(2px); }
.hud-score { flex: 1; min-width: 0; }
.hud-score b, .hud-left b { font-size: var(--fs-num); font-weight: 900; color: var(--c-coral); line-height: 1; letter-spacing: -.02em; }
.hud-lives { gap: 2px; padding: 0 10px; }
.hud-lives img { width: 30px; height: auto; }
.hud-lives img.is-lost { opacity: .25; filter: grayscale(1); }

/* ---------- かめおじぃのふきだし ---------- */
.say-bubble {
  position: relative; display: inline-block;
  padding: 8px 16px 9px;
  background: var(--c-white); border-radius: var(--r-m);
  box-shadow: var(--sh-chip);
  font-weight: 900; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-ink);
  white-space: nowrap;
}
.say-bubble::after {
  content: ""; position: absolute; width: 16px; height: 16px; background: var(--c-white);
  left: -6px; top: 50%; margin-top: -8px; transform: rotate(45deg); border-radius: 3px;
}
.say-bubble--down::after { left: 50%; top: auto; bottom: -6px; margin: 0 0 0 -8px; }
.say-bubble--up::after { left: 50%; top: -6px; margin: 0 0 0 -8px; }
.say-bubble--right::after { left: auto; right: -6px; }
.say-bubble--s { font-size: var(--fs-m); padding: 6px 12px; }
/* ゲームの中で、かめおじぃのそばに浮かせるとき */
.say-bubble.is-float { position: absolute; z-index: 21; pointer-events: none; white-space: pre; text-align: center; }
.say-bubble.is-center { transform: translateX(-50%); }
.say-bubble.is-pop { animation: say-pop .3s ease-out; }
.say-bubble.is-center.is-pop { animation-name: say-pop-center; }
@keyframes say-pop { from { transform: scale(.7); } to { transform: scale(1); } }
@keyframes say-pop-center { from { transform: translateX(-50%) scale(.7); } to { transform: translateX(-50%) scale(1); } }

/* ---------- ボタン ---------- */
.btn-main, .btn-sub, .maker-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 58px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font); font-weight: 900; font-size: var(--fs-l); letter-spacing: .04em;
  text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn-main, .maker-btn {
  color: var(--c-white); background: var(--c-green);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.1), 0 6px 0 var(--c-green-deep), 0 10px 16px rgba(30,80,50,.25);
}
.btn-sub {
  color: var(--c-ink); background: var(--c-cream);
  box-shadow: inset 0 0 0 3px var(--c-cream-deep), inset 0 -5px 0 rgba(190,140,90,.16), 0 6px 0 #DABE90, 0 10px 16px rgba(90,60,30,.14);
}
.btn-main:active, .maker-btn:active, .btn-sub:active { transform: translateY(4px); }
.btn-main:active, .maker-btn:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.28), 0 2px 0 var(--c-green-deep); }
.btn-sub:active { box-shadow: inset 0 0 0 3px var(--c-cream-deep), 0 2px 0 #DABE90; }

/* ---------- ゲームを選ぶ画面 ---------- */
#menu {
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  /* かめおじぃの場所の高さ。背の低いスマホでは小さくして、カードと連絡先が画面に入るようにする */
  --hero-h: clamp(110px, calc(100vh - 630px), 214px);
}
/* svh＝ツールバーが出ているときのいちばん小さい高さ。開いた直後でも値が変わらない */
@supports (height: 1svh) {
  #menu { --hero-h: clamp(110px, calc(100svh - 630px), 214px); }
}
/* 木の看板（絵：img/title_sign.png）。文字は読み上げ用に残して、見た目は絵にする */
.menu-head { position: relative; margin: calc(var(--safe-top) + 10px) 10px 0; }
.menu-head img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(80,50,20,.22)); }
/* 背の低い画面では看板を少し小さくして、メニューがスクロールしないで入るようにする
   （⚠️ メニューがスクロールできると、看板の上が切れて見えることがある。2026-10-07） */
.menu-head img { max-height: 27vh; width: auto; max-width: 100%; margin: 0 auto; }
@supports (height: 1svh) { .menu-head img { max-height: 27svh; } }
.menu-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.menu-hero { position: relative; flex: none; height: var(--hero-h); display: flex; justify-content: center; margin-top: -22px; }
.menu-hero-shadow { position: absolute; bottom: 12px; left: 50%; width: 150px; height: 22px; margin-left: -75px; border-radius: 50%; background: rgba(120,90,50,.22); filter: blur(4px); }
.menu-hero-kame { position: relative; height: calc(var(--hero-h) * 1.69); width: auto; max-width: none; margin-top: -26px; filter: drop-shadow(0 8px 6px rgba(60,40,20,.2)); }
.menu-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 0 12px; margin-top: -14px; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 14px; min-height: clamp(160px, 23vh, 196px); min-height: clamp(160px, 23svh, 196px);
  background: var(--c-cream); border-radius: var(--r-m);
  box-shadow: var(--sh-clay); border: 0; cursor: pointer; font-family: var(--font); color: var(--c-ink);
  text-align: center;
}
.card:active { transform: translateY(3px); }
.card-icon { position: relative; width: 100%; height: 84px; display: flex; align-items: center; justify-content: center; }
.card-name { font-weight: 900; font-size: 17px; line-height: 1.22; }
/* keep-all：「も｜とに」のように言葉の途中で折り返さず、空白のところで折り返す */
.card-desc { font-weight: 500; font-size: var(--fs-xs); line-height: 1.6; color: var(--c-ink-soft); text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.menu-space { flex: 1; min-height: 10px; }
.maker {
  position: relative; margin: 0 12px calc(var(--safe-bottom) + 14px); padding: 14px 16px 16px;
  background: rgba(255,250,240,.93); border-radius: var(--r-m); box-shadow: var(--sh-clay);
  text-align: center; font-weight: 700; font-size: 13px; line-height: 1.6; color: var(--c-ink-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.maker p { margin: 0; }
.maker-btn { min-height: 52px; font-size: var(--fs-m); }
.maker-btn[hidden] { display: none; }

/* 的（カードの絵・やり方の絵）：内側から 黄・さんご・クリーム・水色 */
.curl-target {
  position: relative; width: 96px; height: 42px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-sun) 0 22%, var(--c-pink) 23% 46%, var(--c-cream) 47% 70%, var(--c-sky) 71% 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.8), inset 0 3px 6px rgba(0,0,0,.08);
}

/* かざり（貝・ヒトデ・葉っぱ・ハイビスカス） */
.deco { position: absolute; pointer-events: none; height: auto; filter: drop-shadow(0 4px 3px rgba(60,40,20,.14)); }
.sparkle { position: absolute; width: 14px; height: 14px; background: #FFE27A; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); pointer-events: none; }
.sparkle--white { background: #fff; }

/* ---------- ヒントの帯（画面の下） ---------- */
.hint {
  position: absolute; z-index: 15; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 14px);
  padding: 9px 18px; background: rgba(255,250,240,.94); border-radius: var(--r-pill);
  box-shadow: var(--sh-chip); font-weight: 700; font-size: var(--fs-s); white-space: nowrap;
  pointer-events: none;
}
.hint:empty { display: none; }
.hint.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 6px)); }
  75% { transform: translateX(calc(-50% + 6px)); }
}

/* ---------- 始める前の「やり方」カード ---------- */
.howto-wrap {
  position: absolute; inset: 0; z-index: 40; cursor: pointer;
  background: rgba(255,250,238,.3);
}
.howto {
  position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
  padding: 18px 20px 22px; background: var(--c-cream); border-radius: var(--r-l);
  box-shadow: var(--sh-clay); display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.howto-pic {
  height: clamp(110px, 18vh, 150px); height: clamp(110px, 18svh, 150px); border-radius: var(--r-m);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #CFEFF6, #E9F7F4 70%, #F6EBD5);
}
.howto-pic img { height: 72%; width: auto; filter: drop-shadow(0 6px 4px rgba(60,40,20,.2)); }
/* かめおじぃの絵はまわりに余白があるので、少し大きく出して入れ歯と見た目をそろえる */
.howto-pic img[src*="kameojii"] { height: 92%; }
.howto-pic .arrow { font-size: 30px; font-weight: 900; color: var(--c-green); }
.howto-title { margin: 0; font-weight: 900; font-size: var(--fs-xl); }
.howto-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.howto-steps li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--fs-m); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.howto-steps .n {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-coral); color: var(--c-white); font-weight: 900; font-size: var(--fs-m);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.howto-note { margin: 0; font-weight: 700; font-size: var(--fs-s); color: var(--c-ink-soft); }
.howto-start { margin-top: 4px; }

/* ---------- おわりの画面 ---------- */
.result { position: absolute; inset: 0; z-index: 30; }
.result-veil { position: absolute; inset: 0; background: rgba(255,250,238,.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.result-card {
  position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
  max-height: calc(100% - 20px); overflow-y: auto;
  padding: 22px 20px 22px; background: var(--c-cream); border-radius: var(--r-l);
  box-shadow: var(--sh-clay); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.result-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.result-kame { position: relative; flex: none; width: 112px; height: 150px; display: flex; justify-content: center; }
.result-kame--big { width: 180px; height: clamp(140px, 26vh, 220px); height: clamp(140px, 26svh, 220px); }
.result-kame img { position: relative; height: 100%; width: auto; max-width: none; filter: var(--sh-thing); }
/* パズルが完成したときの、うしろの光 */
.result-flash {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,218,100,.55) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: flash-spin 12s linear infinite;
}
@keyframes flash-spin { to { transform: rotate(360deg); } }
.result-head .result-kame { width: 96px; height: 136px; }
.result-say { flex: 1; min-width: 0; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; font-size: var(--fs-m); line-height: 1.6; padding: 10px 14px; text-align: left; }
.result-say.say-bubble--down { flex: none; text-align: center; }
.result-score { margin: 4px 0 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; font-weight: 900; font-size: var(--fs-xl); }
.result-score b { font-size: 56px; font-weight: 900; color: var(--c-coral); line-height: 1; }
.result-line { margin: 0; font-weight: 700; font-size: var(--fs-m); color: var(--c-ink-soft); }
.result-best {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 14px; border-radius: var(--r-pill);
  background: var(--c-cream-deep); font-weight: 700; font-size: var(--fs-s); color: var(--c-ink-soft);
}
.result-best b { font-size: var(--fs-l); color: var(--c-coral); }
.result-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 6px; }

/* ---------- ゲーム共通の動き ---------- */
/* 👆 指の手本 */
.guide-finger {
  position: absolute; z-index: 30; height: auto; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* 「ミス」「カチッ」「10てん！」など、すぐ消える文字 */
.pop {
  position: absolute; z-index: 20; transform: translate(-50%, -50%);
  color: var(--c-coral); font-size: 24px; font-weight: 900; white-space: nowrap;
  text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 5px 8px rgba(60,40,20,.3);
  pointer-events: none;
  animation: pop-up .7s ease-out forwards;
}
@keyframes pop-up {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -36px; }
}
/* 大きな文字（ピカッ！・カタカタ など） */
.pop.is-big {
  z-index: 28; font-size: 34px; color: #FFF3A0;
  text-shadow: 0 2px 0 var(--c-wood-dark), 0 -2px 0 var(--c-wood-dark), 2px 0 0 var(--c-wood-dark), -2px 0 0 var(--c-wood-dark), 0 0 16px rgba(255,220,90,.9);
  animation: pika-text 1.1s ease-out forwards;
}
@keyframes pika-text {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------- 入れ歯で GO！ ---------- */
.go { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
/* 入れ歯をのせる 木の台 */
.go-stand { position: absolute; width: 190px; height: 70px; transform: translateX(-50%); pointer-events: none; }
.go-stand-side {
  position: absolute; left: 0; right: 0; top: 22px; bottom: 0;
  background: linear-gradient(90deg, var(--c-wood-deep), #B57A44 28%, #A46C39 70%, var(--c-wood-deep));
  border-radius: 0 0 50% 50% / 0 0 24px 24px;
  box-shadow: 0 10px 16px rgba(60,40,20,.28);
}
.go-stand-top {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 50% 50%, #EDC48F 0 7px, #D9A066 7px 9px);
  box-shadow: inset 0 0 0 4px #B47944, inset 0 -3px 0 5px rgba(120,70,30,.15);
}
/* 「ぱくっ！」の絵 */
.fx-pakku {
  position: absolute; z-index: 22; width: 96px; height: auto; pointer-events: none;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff);
  animation: pakku .8s ease-out forwards;
}
@keyframes pakku {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(.4); opacity: 0; }
  25% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.15); opacity: 1; }
  40% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -70%) rotate(-8deg) scale(1); opacity: 0; }
}

/* ---------- カーリング ---------- */
.curl { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.curl-kame { position: absolute; z-index: 6; transform: translate(-50%, -50%); background: center / contain no-repeat; pointer-events: none; filter: var(--sh-thing); }
.curl-stone {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  background: center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 6px 4px rgba(60,40,20,.28));
}
.curl-stone.is-done { opacity: .5; z-index: 4; }
/* かくしネタ：入れ歯が当たって、びっくりしてブルブル（残像の絵は炎やもやのぶん大きいので少し小さく） */
.curl-kame.is-shock { background-size: auto 85%; animation: katakata .09s linear 10; }
/* コスコスしたところが、つるっと光る */
.curl-polish {
  position: absolute; z-index: 3; width: 46px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,255,255,.95) 0%, rgba(190,236,244,.6) 55%, transparent 75%);
  pointer-events: none;
  animation: polish .55s ease-out forwards;
}
@keyframes polish {
  from { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.5, 1.1); }
}
.curl-kosu { color: #2E8FA8; }

/* ---------- 入れ歯パズル ---------- */
.puz { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
/* 石の台 */
.puz-mat {
  position: absolute;
  background:
    radial-gradient(circle at 18% 30%, rgba(120,105,85,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(120,105,85,.2) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 78%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 84%, rgba(120,105,85,.2) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 60%, rgba(120,105,85,.18) 0 2px, transparent 3px),
    radial-gradient(120% 90% at 30% 10%, #E6DFD2, var(--c-stone) 55%, #C4B9A7);
  border-radius: 42px 36px 46px 34px / 34px 44px 32px 40px;
  box-shadow: inset 0 0 0 4px var(--c-stone-dark), inset 0 5px 0 4px rgba(255,255,255,.4), 0 8px 0 var(--c-stone-deep), 0 16px 22px rgba(60,40,20,.25);
  transition: opacity .5s;
}
/* うすい見本（どこに置けばいいか分かるように） */
.puz-ghost { position: absolute; background: center / 100% 100% no-repeat; opacity: .28; filter: grayscale(1) brightness(1.2); transition: opacity .5s; }
.puz-piece { position: absolute; z-index: 10; pointer-events: none; filter: drop-shadow(0 6px 4px rgba(60,40,20,.28)); transition: filter .15s; }
.puz-piece.is-drag { filter: drop-shadow(0 12px 8px rgba(60,40,20,.3)); }
.puz-piece.is-set { filter: none; }
.puz-piece-in { position: absolute; inset: 0; pointer-events: auto; background: center / 100% 100% no-repeat; cursor: grab; }
.puz-piece.is-set .puz-piece-in { pointer-events: none; }
/* きょうの入れ歯の名前 */
.puz-tag {
  position: absolute; z-index: 12; transform: translate(-50%, -50%);
  padding: 7px 16px; background: var(--c-green); color: var(--c-white); border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-s); white-space: nowrap;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 var(--c-green-deep);
  transition: opacity .5s;
}
.puz-tag.is-static { position: static; transform: none; }
/* ⚠️ パズルのかめおじぃは、left/top を「左上のかど」にして置く（js が まん中から計算する）。
   translate(-50%) を使うと、iPhone の Safari で「大きくなりながら はねる」とき、
   大きくなる前の幅で -50% を計算したままになって、一瞬 右にずれて見えた（2026-10-07 作者が実機で発見） */
.puz-kame {
  position: absolute; z-index: 20; transform-origin: 50% 50%;
  background: center / contain no-repeat; pointer-events: none; filter: var(--sh-thing);
  transition: left .5s ease-out, top .5s ease-out, width .5s ease-out, height .5s ease-out;
}
/* リアクションの絵は、炎やもやのぶん大きいので、少し小さく出して体の大きさをそろえる */
.puz-kame.is-react { background-size: auto 82%; }
.puz-kame.is-happy { animation: kame-happy .9s ease-out; }
@keyframes kame-happy {
  0% { transform: scale(1); }
  30% { transform: scale(1.3) rotate(-6deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1.1); }
}
/* カタカタ・からいーッ：かめおじぃがこきざみにゆれる */
.puz-kame.fx-katakata { animation: katakata-puz .09s linear 16; }
@keyframes katakata-puz {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: translateX(-3px) rotate(-4deg); }
  75% { transform: translateX(3px) rotate(4deg); }
}
/* カーリングのかめおじぃ（.curl-kame.is-shock）も使う。こちらは大きさが変わらないので -50% のままでよい */
@keyframes katakata {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(calc(-50% - 3px), -50%) rotate(-4deg); }
  75% { transform: translate(calc(-50% + 3px), -50%) rotate(4deg); }
}
/* 1まいにもどった入れ歯が、口へ飛んでいく */
.puz-fly { position: absolute; z-index: 25; background: center / 100% 100% no-repeat; transition: transform .7s cubic-bezier(.5,-.25,.6,1); pointer-events: none; }
/* ピカッ */
.puz-flash {
  position: absolute; z-index: 26; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff6b0 35%, rgba(255,230,120,.5) 55%, transparent 70%);
  pointer-events: none;
  animation: pika .8s ease-out forwards;
}
@keyframes pika {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(4.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}
.puz-spark {
  position: absolute; z-index: 27; width: 18px; height: 18px; background: #FFF3A0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: spark .9s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); opacity: 0; }
}