/* moc3 なめこライク放置受粉。
   枠線・オフセット影は使わない（旧モックの「古いソシャゲ感」の原因だった）。
   代わりに枠線なし・大きめの角丸・低コントラストの影で組む。 */
:root{
  --ink:#4d3a28;
  --cream:#fdf6e6;
  --sub:#a3906f;
  --shadow:0 6px 16px rgba(93,74,48,.14);
  --is:26px;            /* Sheet D のアイコン表示サイズ */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#e9e2d2;color:var(--ink);
  font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif}
button{border:0;background:none;font:inherit;color:inherit;cursor:pointer}

/* ---- 画面 ---- */
.screen{position:relative;width:min(100%,430px);height:100dvh;min-height:600px;margin:auto;
  overflow:hidden;touch-action:none;user-select:none;
  background:linear-gradient(#cfe7f2 0 18%,#e6ecd8 18% 100%)}

.sky{position:absolute;top:0;left:0;right:0;height:20%;
  background:url(../assets/source/bg-sky.png) center bottom/cover no-repeat}
/* 壁掛けプランターなので掛ける先の壁が構図上必須。bg-rail.png は
   プランター背後で左右にはみ出して「はしご」に見えたため使わない */
.wall{position:absolute;top:18%;left:0;right:0;bottom:22%;
  background:url(../assets/source/bg-wall.png) center top/100% 100% no-repeat}
.floor{position:absolute;left:0;right:0;bottom:0;height:22%;
  background:url(../assets/source/bg-floor.png) center top/100% 100% no-repeat}

/* ---- プランター（実測値は game.js の LAYOUT） ---- */
.planter{position:absolute;left:50%;transform:translateX(-50%);
  background:url(../assets/source/planter-tiered-tall.png) center/contain no-repeat}

/* ---- 株（花・成長段階）。シートを background で切り出す ---- */
.plot{position:absolute;transform:translate(-50%,0);transform-origin:50% 100%;
  background-repeat:no-repeat;
  /* 通常時は絵になじむ半透明の濃いオリーブ線。蕾本体は不透明のまま */
  filter:drop-shadow(1px 0 0 rgba(70,65,32,.38))
    drop-shadow(-1px 0 0 rgba(70,65,32,.38))
    drop-shadow(0 1px 0 rgba(70,65,32,.38))
    drop-shadow(0 -1px 0 rgba(70,65,32,.38))
    drop-shadow(0 0 2px rgba(255,246,190,.3))
    drop-shadow(0 2px 2px rgba(60,48,32,.22));
  pointer-events:none}
/* 選んだ蕾と、受粉で震えている蕾だけを一時的に明るくする */
.plot.queued,.plot.pollinating{
  filter:drop-shadow(1px 0 0 rgba(255,246,190,.88))
    drop-shadow(-1px 0 0 rgba(255,246,190,.88))
    drop-shadow(0 1px 0 rgba(255,246,190,.88))
    drop-shadow(0 -1px 0 rgba(255,246,190,.88))
    drop-shadow(0 0 5px rgba(255,224,118,.58))
    drop-shadow(0 2px 2px rgba(60,48,32,.22))}
/* 過去に咲かせた花は景観層へ小さく定着し、遊び層の新芽と同居する */
.settled-flower{position:absolute;transform:translate(-50%,0);transform-origin:50% 100%;
  background-repeat:no-repeat;pointer-events:none;opacity:.78;
  filter:drop-shadow(0 2px 2px rgba(60,48,32,.18)) saturate(.92);
  animation:garden-breathe 7.5s ease-in-out infinite;animation-delay:var(--garden-phase,0s)}
@keyframes garden-breathe{
  50%{transform:translate(-50%,-1px) scale(1.015);filter:drop-shadow(0 2px 3px rgba(60,48,32,.2)) saturate(.92) brightness(1.025)}
}
.settled-flower.queued{opacity:1;filter:drop-shadow(0 0 5px rgba(255,224,118,.72)) saturate(1)}
/* 再タッチ時は再受粉せず、花が一度だけ「うなずく」 */
.plot.acknowledged,.settled-flower.acknowledged{
  animation:acknowledge .68s cubic-bezier(.2,.78,.3,1) both}
@keyframes acknowledge{
  0%,100%{transform:translate(-50%,0) rotate(0)}
  28%{transform:translate(-50%,-3px) rotate(-3deg)}
  55%{transform:translate(-50%,0) rotate(3deg)}
  76%{transform:translate(-50%,-1px) rotate(-1deg)}
}
/* 満開の株はごく淡く呼吸する。位相は株ごとに --ph でずらす（一斉点滅は安っぽい） */
.plot.bloom{animation:breathe 3s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes breathe{
  50%{filter:drop-shadow(1px 0 0 rgba(70,65,32,.38))
    drop-shadow(-1px 0 0 rgba(70,65,32,.38))
    drop-shadow(0 1px 0 rgba(70,65,32,.38))
    drop-shadow(0 -1px 0 rgba(70,65,32,.38))
    drop-shadow(0 0 2px rgba(255,246,190,.3))
    drop-shadow(0 2px 2px rgba(60,48,32,.22)) brightness(1.06)}
}
/* 受粉直後の蕾は左右に震えるだけ。その場では成長させない */
.plot.pollinating{animation:pollinate .62s cubic-bezier(.22,.84,.34,1) both}
@keyframes pollinate{
  0%{transform:translate(-50%,0) rotate(0) scale(1)}
  18%{transform:translate(calc(-50% - 3px),0) rotate(-5deg) scale(1)}
  34%{transform:translate(calc(-50% + 3px),0) rotate(5deg) scale(1)}
  50%{transform:translate(calc(-50% - 2px),0) rotate(-3deg) scale(1)}
  68%{transform:translate(calc(-50% + 2px),0) rotate(2deg) scale(1)}
  to{transform:translate(-50%,0) rotate(0) scale(1)}
}
.plot.bloom.pollinated{transform:translate(-50%,0) scale(1.06);
  animation:pollinated-breathe 3s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes pollinated-breathe{
  0%,100%{filter:drop-shadow(1px 0 0 rgba(70,65,32,.38))
    drop-shadow(-1px 0 0 rgba(70,65,32,.38))
    drop-shadow(0 1px 0 rgba(70,65,32,.38))
    drop-shadow(0 -1px 0 rgba(70,65,32,.38))
    drop-shadow(0 2px 2px rgba(60,48,32,.22))
    drop-shadow(0 0 6px rgba(255,211,82,.62)) brightness(1.04)}
  50%{filter:drop-shadow(1px 0 0 rgba(70,65,32,.38))
    drop-shadow(-1px 0 0 rgba(70,65,32,.38))
    drop-shadow(0 1px 0 rgba(70,65,32,.38))
    drop-shadow(0 -1px 0 rgba(70,65,32,.38))
    drop-shadow(0 2px 2px rgba(60,48,32,.22))
    drop-shadow(0 0 10px rgba(255,220,92,.86)) brightness(1.10)}
}
/* 見ている最中に咲いた株。下からぽこっと出る。終わると breathe に戻る */
.plot.bloom.popping{animation:pop .42s cubic-bezier(.22,1.3,.4,1) both}
@keyframes pop{
  0%{transform:translate(-50%,0) scale(.4);opacity:0}
  60%{transform:translate(-50%,0) scale(1.08);opacity:1}
  to{transform:translate(-50%,0) scale(1)}
}

/* ---- 受粉演出 ---- */
.fx{position:absolute;z-index:40;transform:translate(-50%,0);background-repeat:no-repeat;
  pointer-events:none;animation:fx-rise .5s ease-out forwards}
@keyframes fx-rise{to{transform:translate(-50%,-40px);opacity:0}}
.pollen-layer{position:absolute;z-index:38;inset:0;pointer-events:none;overflow:hidden}
.pollen{position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,#fff3a0 20% 48%,#f6b92f 52% 100%);
  box-shadow:0 0 8px 2px rgba(255,229,102,.88);opacity:0;
  animation:pollen-flight var(--duration,.56s) cubic-bezier(.23,.72,.3,1) var(--delay,0s) forwards}
@keyframes pollen-flight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  14%{opacity:1}
  58%{transform:translate(var(--dx-mid),var(--dy-mid)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}
}

/* ---- はちちゃんとベンチ ---- */
/* 指が描いた道へ遅れて飛んでいく。ゆっくりの ease-out なので指には追いつかない */
.bee{position:absolute;z-index:9;width:26%;right:3%;bottom:2%;
  transition:transform .85s cubic-bezier(.32,.86,.36,1);will-change:transform}
.bee.flying{z-index:34}
.bee img{display:block;width:100%;filter:drop-shadow(0 6px 5px rgba(45,35,24,.22))}
/* 飛んでいる間はふわふわ上下する。hop（受粉した瞬間の喜び）とは別レイヤー */
.bee.flying img{animation:hover 1.6s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-5px)}}
.bee.hop img{animation:hop .42s ease-out}
@keyframes hop{38%{transform:translateY(-7px) rotate(-4deg)}70%{transform:translateY(-2px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){
  .bee{transition-duration:.01s}
  .bee.flying img{animation:none}
}
.bench{position:absolute;z-index:8;width:20%;left:3%;bottom:1.5%}
.bench img{display:block;width:100%}
/* セリフは常設しない。イベント時に出して3秒で消す */
.speech{position:absolute;left:50%;bottom:96%;width:max-content;max-width:180px;
  padding:8px 12px;border-radius:14px 14px 14px 5px;background:var(--cream);
  box-shadow:var(--shadow);font-size:12px;font-weight:800;transform:translateX(-50%)}

/* ---- HUD ---- */
.hud{position:absolute;z-index:20;top:14px;left:14px;right:14px;
  display:flex;justify-content:space-between;align-items:flex-start}
.pill{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:18px;
  background:rgba(253,246,230,.92);box-shadow:var(--shadow);font-size:13px;font-weight:800}
.pill small{display:block;font-size:9px;font-weight:700;color:var(--sub)}
.pill b{display:block;font-size:13px;font-variant-numeric:tabular-nums}

/* Sheet D（4列x3行）から1マスを切り出す */
.icon{flex:none;width:var(--is);height:var(--is);
  background-image:url(../assets/source/sheet-d-ui.png);background-repeat:no-repeat;
  background-size:calc(var(--is) * 4) calc(var(--is) * 3)}

#trail{position:absolute;z-index:12;inset:0;width:100%;height:100%;pointer-events:none}

.guide{position:absolute;z-index:20;left:50%;transform:translateX(-50%);
  bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));width:max-content;max-width:72%;padding:9px 18px;
  border-radius:18px;background:rgba(253,246,230,.9);box-shadow:var(--shadow);
  text-align:center;pointer-events:none}
.guide span,.guide b{display:block}
.guide span{font-size:9px;color:var(--sub);font-weight:800}
.guide b{font-size:13px;font-weight:900}

/* デバッグ用。ゲームUIと区別がつくよう彩度を落とし、目立たない位置に置く */
.tools{position:absolute;z-index:22;top:64px;right:14px;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px}
.tools-title{padding:0 4px;font-size:8px;font-weight:800;letter-spacing:.08em;
  color:rgba(109,97,82,.72);text-shadow:0 1px 2px rgba(253,246,230,.8)}
.tools-row{display:flex;gap:5px}
.tools button{display:flex;align-items:center;padding:5px 9px;border-radius:12px;
  background:rgba(240,236,226,.74);box-shadow:var(--shadow);font-size:10px;font-weight:800;
  color:#7c7266;font-variant-numeric:tabular-nums}
.tools button:active{background:rgba(226,220,207,.92)}

/* ---- 図鑑 ---- */
.dex{position:absolute;z-index:60;left:50%;bottom:0;width:min(100%,430px);
  padding:20px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:var(--cream);
  box-shadow:0 -18px 44px rgba(53,43,31,.24);transform:translateX(-50%)}
.dex h2{margin:0 0 16px;font-size:18px}
.dex h2 span{margin-left:8px;font-size:12px;color:var(--sub)}
.dex-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 10px;row-gap:22px}
.dex-cell{position:relative;padding-top:100%;border-radius:14px;background:#f6ecd6}
.dex-cell i{position:absolute;inset:6px;background-repeat:no-repeat}
/* 未発見はシルエット＋疑問符。灰色の花には見せない */
.dex-cell.unknown i{filter:brightness(0) opacity(.22)}
/* 疑問符アイコンは JS が ICON 定数からマスを決めて差し込む（マス番号を埋め込まない） */
.dex-cell u{position:absolute;left:50%;top:50%;--is:22px;transform:translate(-50%,-50%)}
.dex-cell b{position:absolute;left:-4px;right:-4px;bottom:-16px;font-size:9px;font-weight:700;
  text-align:center;color:var(--sub)}
.dex-close{display:block;width:100%;margin-top:26px;padding:13px;border-radius:16px;
  background:#efe3ca;font-size:13px;font-weight:800}

.scrim{position:absolute;z-index:50;inset:0;background:rgba(49,48,38,.34)}
.toast{position:absolute;z-index:80;left:50%;top:110px;max-width:84%;padding:10px 16px;
  border-radius:18px;background:rgba(253,246,230,.96);box-shadow:var(--shadow);
  font-size:12px;font-weight:800;transform:translateX(-50%);pointer-events:none}

@media(max-height:700px){
  .hud{top:10px}
  .tools{top:56px}
  .guide{padding:7px 15px}
}

@media(prefers-reduced-motion:reduce){
  .plot.pollinating{animation-duration:.01s}
  .pollen{animation-duration:.01s}
}