/* moc2 なめこライク放置収穫。
   枠線・オフセット影は使わない（旧モックの「古いソシャゲ感」の原因だった）。
   代わりに枠線なし・大きめの角丸・低コントラストの影で組む。 */
: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,.weed{position:absolute;transform:translate(-50%,0);transform-origin:50% 100%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 2px 2px rgba(60,48,32,.22));
  pointer-events:none}
/* 満開の株はごく淡く呼吸する。位相は株ごとに --ph でずらす（一斉点滅は安っぽい） */
.plot.bloom{animation:breathe 3s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes breathe{50%{filter:drop-shadow(0 2px 2px rgba(60,48,32,.22)) brightness(1.06)}}
/* 摘んだ瞬間に一瞬だけ縮む（120ms）。派手にしない */
.plot.picking{animation:pick .12s ease-in both}
@keyframes pick{to{transform:translate(-50%,0) scale(.86)}}
/* 見ている最中に咲いた株。下からぽこっと出る。終わると 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)}
}

/* ---- 演出（Sheet B のマスを流すだけ。花の上に円や✦は貼らない） ---- */
.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}}
.fx.weed-fx{animation:fx-hop .2s ease-out forwards}
@keyframes fx-hop{60%{transform:translate(-50%,-22px)}to{transform:translate(-50%,-12px);opacity:0}}

/* ---- はちちゃんとベンチ ---- */
/* 摘んだ株へ遅れて飛んでいく。ゆっくりの 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 .34s ease-out}
@keyframes hop{50%{transform:translateY(-7px)}}
@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}

.cta{position:absolute;z-index:20;left:50%;transform:translateX(-50%);
  bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));width:min(78%,320px);padding:15px;
  border-radius:18px;background:linear-gradient(#ffd98a,#f6b95e);
  box-shadow:0 8px 20px rgba(120,88,40,.28);font-size:15px;font-weight:900;color:#5a4326}
.cta:disabled{opacity:.5}

/* デバッグ用。ゲーム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)}
#soundButton{margin-top:3px}

/* ---- 図鑑 ---- */
.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}
  .cta{padding:13px}
}