/* =========================================================
   MEGURU v1 prototype — MY TOWN
   実機（スマホ縦）で遊べるページ。デモと同じ配色・書体。
   ========================================================= */
:root{
  --base:#FBF7EF; --green:#2E9E6B; --green-d:#1F7A50; --green-l:#7FD3A8;
  --blue:#4FB3E8; --blue-d:#2E80AE; --accent:#F5A524; --accent-d:#C9821A; --amber:#F2851E;
  --ink:#24312B; --ink-2:#5C6B63; --line:rgba(36,49,43,.12);
  --shadow:0 10px 30px rgba(36,49,43,.10), 0 2px 6px rgba(36,49,43,.06);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent }
html,body{ height:100%; background:#0D1211;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink) }
#app{ max-width:430px; min-height:100%; margin:0 auto; background:linear-gradient(180deg,#FDFAF3,#F0F7F1 60%,#EFE7D6);
  display:flex; flex-direction:column; padding-bottom:70px }
button{ font:inherit; cursor:pointer }
[hidden]{ display:none !important }

/* ---------- header ---------- */
.top{ padding:14px 16px 10px }
.top-row{ display:flex; justify-content:space-between; gap:8px }
.chip{ display:flex; align-items:baseline; gap:6px; background:rgba(255,255,255,.85); border:1px solid var(--line);
  border-radius:11px; padding:5px 10px; box-shadow:0 2px 8px rgba(36,49,43,.07) }
.chip span{ font-size:8.5px; font-weight:800; letter-spacing:.16em; color:var(--ink-2) }
.chip b{ font-size:15px; font-weight:900; letter-spacing:.06em; font-variant-numeric:tabular-nums }
.chip-pt b{ color:var(--green-d) }
.lvbar{ margin-top:9px; height:8px; border-radius:4px; background:rgba(36,49,43,.10); overflow:hidden }
.lvbar i{ display:block; height:8px; width:0; border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width .5s }
.lvnext{ margin-top:4px; font-size:10px; color:var(--ink-2); text-align:right }

/* ---------- 兄弟のステージ帯 ---------- */
.strip{ position:relative; height:118px; margin:0 16px 4px; display:flex; align-items:flex-end; justify-content:space-between;
  border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(194,224,188,.55)); border:1px solid var(--line); overflow:hidden }
.strip::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:22px; background:#C2E0BC; opacity:.7 }
.chara{ position:relative; z-index:2; width:72px; flex:0 0 72px; transform-origin:50% 100% }
.chara svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 4px 8px rgba(36,49,43,.18)) }
.ch-yg svg{ height:112px } .ch-ol svg{ height:118px }
.ch-yg{ margin-left:8px } .ch-ol{ margin-right:8px }
.pv-yg-hip { transform-origin:60px 130px } .pv-yg-hipF{ transform-origin:67px 126px } .pv-yg-hipB{ transform-origin:53px 126px }
.pv-yg-shF { transform-origin:82px 86px }  .pv-yg-shB { transform-origin:37px 86px }  .pv-yg-neck{ transform-origin:60px 68px }
.pv-ol-hip { transform-origin:60px 126px } .pv-ol-hipF{ transform-origin:68px 124px } .pv-ol-hipB{ transform-origin:53px 124px }
.pv-ol-shF { transform-origin:82px 78px }  .pv-ol-shB { transform-origin:37px 78px }  .pv-ol-neck{ transform-origin:60px 60px }
.fx{ display:none }
.bubble{ position:absolute; left:88px; right:88px; top:14px; z-index:3; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:8px 10px; font-size:12px; font-weight:800; line-height:1.45; box-shadow:0 8px 20px rgba(36,49,43,.14); animation:bub .25s ease-out }
.bubble i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.14em; color:var(--green-d); margin-bottom:2px }
.bubble.from-yg::before,.bubble.from-ol::before{ content:''; position:absolute; top:22px; width:0; height:0; border:7px solid transparent }
.bubble.from-yg::before{ left:-14px; border-right-color:#fff }
.bubble.from-ol::before{ right:-14px; border-left-color:#fff }
@keyframes bub{ from{ transform:translateY(6px); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------- 街が広がる ---------- */
.tile.is-reveal{ animation:reveal .55s cubic-bezier(.2,.8,.2,1) both }
@keyframes reveal{ from{ opacity:.28; filter:saturate(.3); transform:scale(.6) } 60%{ transform:scale(1.12) } to{ opacity:1; filter:none; transform:scale(1) } }
.unlock{ position:fixed; left:50%; top:238px; transform:translateX(-50%); z-index:40; text-align:center; background:#fff;
  border:3px solid var(--accent); border-radius:18px; padding:12px 22px; box-shadow:0 18px 44px rgba(245,165,36,.32); animation:stamp .4s cubic-bezier(.34,1.56,.64,1) }
.unlock b{ display:block; font-size:11px; letter-spacing:.2em; color:var(--accent-d) }
.unlock span{ display:block; font-size:22px; font-weight:900; margin-top:2px }
@keyframes stamp{ from{ transform:translateX(-50%) scale(1.6) rotate(-6deg); opacity:0 } to{ transform:translateX(-50%) scale(1) rotate(-2deg); opacity:1 } }

/* ---------- views / tabs ---------- */
.view{ display:none; padding:6px 16px 16px; flex:1 }
.view.is-on{ display:block }
.tabs{ position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:430px; display:flex;
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); padding:6px 8px 10px; z-index:20 }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;
  background:none; border:0; color:var(--ink-2); font-size:11px; font-weight:800; padding:6px 0; border-radius:12px }
.tab i{ font-style:normal; font-size:18px }
.tab.is-on{ color:var(--green-d); background:rgba(46,158,107,.10) }
.badge{ position:absolute; top:2px; right:22%; width:16px; height:16px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:10px; display:grid; place-items:center }

/* ---------- town grid ---------- */
.build-banner{ display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 12px; border-radius:12px;
  background:#fff; border:2px solid var(--green); box-shadow:0 8px 20px rgba(46,158,107,.18) }
.build-banner b{ font-size:10px; letter-spacing:.20em; color:var(--green-d) }
.build-banner span{ font-size:13px; font-weight:900; flex:1 }
.build-banner em{ font-style:normal; font-size:10px; color:#fff; background:var(--accent); padding:4px 8px; border-radius:8px; font-weight:900 }
.link{ background:none; border:0; color:var(--ink-2); font-size:11px; text-decoration:underline }
.grid-wrap{ background:#C2E0BC; border-radius:18px; padding:8px; box-shadow:var(--shadow) }
.grid{ position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
  grid-auto-rows:0; gap:3px; aspect-ratio:1/1 }
.tile{ position:relative; min-width:0; min-height:0; border-radius:6px; border:0; background:#D8ECD2; transition:transform .12s, box-shadow .12s }
.tile.z-PARK{ background:#BCDCB2 } .tile.z-SCHOOL{ background:#F7F1E4 } .tile.z-SHOP{ background:#EFE9DA }
.tile.z-ROAD{ background:#E7E0D2 } .tile.z-HOME{ background:#FBF6EC } .tile.z-FIELD{ background:#D8ECD2 }
.tile.is-locked{ opacity:.28; filter:saturate(.3) }
.tile.can{ box-shadow:inset 0 0 0 2px var(--green); cursor:pointer }
.tile.can:active{ transform:scale(.94) }
.tile.hot{ background:rgba(46,158,107,.45) !important }
.fac{ position:relative; min-width:0; min-height:0; width:100%; height:100%; overflow:hidden; padding:10%;
  display:block; pointer-events:auto; cursor:pointer; background:none; border:0 }
.fac svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 3px 5px rgba(36,49,43,.25)) }
.fac.is-new{ animation:pop .5s cubic-bezier(.34,1.56,.64,1) }
@keyframes pop{ from{ transform:scale(.2) } to{ transform:scale(1) } }
.legend{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px }
.legend span{ font-size:10px; color:var(--ink-2); display:flex; align-items:center; gap:4px }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block }
.deliveries{ margin-top:12px; display:flex; flex-direction:column; gap:6px }
.deliveries div{ font-size:12px; background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:10px; padding:7px 10px }

/* ---------- find ---------- */
.find-card{ background:#fff; border-radius:22px; padding:18px 16px 16px; box-shadow:var(--shadow); border:1px solid var(--line); text-align:center }
.find-k{ font-size:9.5px; font-weight:900; letter-spacing:.22em; color:var(--ink-2) }
.find-name{ font-size:26px; font-weight:900; margin-top:6px }
.find-q{ font-size:15px; font-weight:800; margin-top:8px; color:var(--ink-2) }
.find-choices{ display:flex; gap:8px; margin-top:14px }
.choice{ flex:1; min-height:56px; border-radius:14px; background:#fff; border:2px solid var(--line);
  font-size:14px; font-weight:800; color:var(--ink); box-shadow:0 4px 12px rgba(36,49,43,.08) }
.choice:active{ transform:scale(.95) }
.choice.ok{ background:var(--green); border-color:var(--green-d); color:#fff }
.choice.ng{ background:#F2EFE7; color:#9AA49E }
.find-result{ margin-top:12px; font-size:14px; font-weight:800; line-height:1.5 }
.find-result.ok{ color:var(--green-d) } .find-result.ng{ color:var(--amber) }
.find-result small{ display:block; font-size:11px; font-weight:600; color:var(--ink-2); margin-top:4px }
.btn{ margin-top:14px; width:100%; border:0; border-radius:12px; background:var(--green); color:#fff;
  font-size:13px; font-weight:900; letter-spacing:.14em; padding:12px }
.btn[disabled]{ background:#B9C0BA; box-shadow:none }
.note{ margin-top:12px; font-size:11px; color:var(--ink-2); line-height:1.5; text-align:center }
.note.small{ font-size:9.5px; opacity:.8 }

/* ---------- craft ---------- */
.inv{ display:flex; gap:6px; margin-bottom:12px }
.slot{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px; border-radius:12px;
  background:rgba(255,255,255,.85); border:1px solid var(--line) }
.slot i{ width:14px; height:14px; border-radius:4px }
.slot b{ font-size:17px; font-weight:900; font-variant-numeric:tabular-nums }
.slot span{ font-size:7px; font-weight:800; letter-spacing:.08em; color:var(--ink-2) }
.slot.is-pop{ animation:pop .35s }
.recipes{ display:flex; flex-direction:column; gap:8px }
.recipe{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:10px 12px; box-shadow:0 6px 16px rgba(36,49,43,.06) }
.recipe.is-locked{ background:#F2EFE7; opacity:.75 }
.rc-cost{ display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:10px; background:rgba(36,49,43,.05); flex:0 0 auto }
.rc-cost i{ width:12px; height:12px; border-radius:3px }
.rc-cost b{ font-size:12px; font-weight:900; white-space:nowrap }
.rc-arrow{ font-size:13px; font-weight:900; color:var(--ink-2) }
.rc-out{ flex:1; min-width:0; display:flex; align-items:center; gap:8px }
.rc-out svg{ width:34px; height:24px; flex:0 0 34px }
.rc-out b{ display:block; font-size:13px; font-weight:900 }
.rc-out small{ display:block; font-size:9.5px; color:var(--ink-2) }
.rc-btn{ flex:0 0 auto; border:0; border-radius:10px; background:var(--green); color:#fff; font-size:10px; font-weight:900;
  letter-spacing:.12em; padding:10px 10px }
.rc-btn[disabled]{ background:#B9C0BA }
.rc-lock{ font-size:9.5px; font-weight:900; color:#9AA49E; letter-spacing:.06em; white-space:nowrap }

/* ---------- 3層ラベル（デモと同じ） ---------- */
.vtag{ display:inline-block; font-size:8.5px; font-weight:900; letter-spacing:.08em; padding:2px 7px 2px 18px; border-radius:7px; position:relative; white-space:nowrap }
.vtag::before{ content:''; position:absolute; left:6px; top:50%; width:8px; height:8px; margin-top:-4px }
.vtag.is-verified{ background:rgba(46,158,107,.14); color:var(--green-d); border:1px solid rgba(46,158,107,.45) }
.vtag.is-verified::before{ background:var(--green); border-radius:50%; box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 1.5px var(--green) }
.vtag.is-local{ background:rgba(79,179,232,.14); color:var(--blue-d); border:1px solid rgba(79,179,232,.45) }
.vtag.is-local::before{ background:var(--blue); border-radius:2px }
.vtag.is-general{ background:rgba(36,49,43,.06); color:var(--ink-2); border:1px solid rgba(36,49,43,.18) }
.vtag.is-general::before{ background:none; border:1.5px dashed #9AA49E; border-radius:50%; width:9px; height:9px; margin-top:-4.5px }

/* ---------- story modal ---------- */
.modal{ position:fixed; inset:0; background:rgba(16,26,25,.55); display:grid; place-items:center; z-index:50; padding:20px }
.modal-card{ width:100%; max-width:360px; background:#fff; border-radius:22px; padding:22px 18px 16px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.35) }
.story-icon{ width:84px; height:54px }
.story-name{ font-size:18px; font-weight:900; margin-top:6px }
.story-t{ font-size:14.5px; font-weight:800; line-height:1.6; margin-top:8px }
.story-meta{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap }
.story-src{ font-size:9.5px; color:var(--ink-2) }

.toast{ position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:60; background:#fff; border:2px solid var(--accent);
  border-radius:14px; padding:10px 16px; font-size:13px; font-weight:900; box-shadow:0 12px 30px rgba(245,165,36,.3); white-space:nowrap }
.foot{ padding:10px 16px 16px; display:flex; justify-content:space-between; align-items:center; font-size:9.5px; color:var(--ink-2) }