* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #bfe9a9;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: #5b4636;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; display: block; touch-action: none; cursor: none; }
button { font-family: inherit; }

/* ===== Top bar ===== */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.gauge {
  flex: 1 1 0; min-width: 0; max-width: 360px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .9); border: 3px solid #fff;
  border-radius: 999px; padding: 3px 12px 3px 3px;
  box-shadow: 0 4px 0 rgba(91, 70, 54, .12);
  transition: transform .15s;
}
.gauge.bump { animation: bump .35s ease; }
@keyframes bump { 0%{transform:scale(1)} 35%{transform:scale(1.07,.93)} 70%{transform:scale(.97,1.04)} 100%{transform:scale(1)} }
.gicon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; }
.sero .gicon { background: #c9f2b5; }
.oxy .gicon { background: #ffd1e3; }
.gbody { flex: 1; min-width: 0; }
.glabel { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glabel b { font-size: 16px; color: #4a3328; }
.glabel small { font-size: 10.5px; background: #ff8fb8; color: #fff; padding: 1px 6px; border-radius: 99px; margin-left: 2px; }
.gbar { height: 9px; background: #f2e9e2; border-radius: 99px; overflow: hidden; margin-top: 2px; }
.gbar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .35s ease; }
.sero .gbar i { background: linear-gradient(90deg, #a6ec8e, #43c46e); }
.oxy .gbar i { background: linear-gradient(90deg, #ffb6d0, #ff6fa5); }

.pill {
  flex: 0 0 auto; border: 3px solid #fff; border-radius: 999px;
  background: linear-gradient(#fff6d6, #ffe08a); color: #6a4a00;
  font-size: 13px; font-weight: bold; padding: 8px 12px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(91, 70, 54, .15);
  transition: transform .1s;
}
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(91,70,54,.15); }
.pill.fast { background: linear-gradient(#ffd9ec, #ff9cc6); color: #7a1f4a; }
.pill.round { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 16px; background: linear-gradient(#ffffff, #e8f6ff); color: #3a6a8a; }

/* ===== Bottom bar ===== */
#bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 0 8px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  pointer-events: none;
}
#bottombar > * { pointer-events: auto; }
#subrow {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  min-height: 42px; margin: 0 auto 6px; max-width: 720px;
}
.hint {
  background: rgba(255, 255, 255, .88); border-radius: 14px; padding: 6px 12px;
  font-size: 12px; line-height: 1.35; text-align: center; border: 2px solid #fff;
  box-shadow: 0 3px 0 rgba(91,70,54,.1);
}
.seedbtn {
  border: 3px solid #fff; background: rgba(255,255,255,.9); border-radius: 14px;
  padding: 2px 8px; min-width: 52px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 0 rgba(91,70,54,.12); color: #5b4636; transition: transform .12s;
}
.seedbtn .se { font-size: 20px; line-height: 24px; }
.seedbtn small { font-size: 10px; }
.seedbtn.active { background: linear-gradient(#e2ffd4, #b4ef9c); border-color: #7fd36b; transform: translateY(-3px); }
.seedbtn { position: relative; }
.seedbtn.shun::after {   /* 旬の作物 */
  content: '旬'; position: absolute; top: -7px; right: -5px; background: #ff7a45; color: #fff;
  font-size: 9.5px; font-weight: bold; border-radius: 99px; padding: 1px 4px; border: 2px solid #fff;
}
.seedlabel { font-size: 11px; background: rgba(255,255,255,.8); border-radius: 10px; padding: 3px 8px; }

#tools {
  display: flex; gap: 5px; justify-content: center;
  max-width: 720px; margin: 0 auto;
  background: rgba(255, 255, 255, .9); border: 3px solid #fff; border-radius: 22px;
  padding: 6px; box-shadow: 0 5px 0 rgba(91, 70, 54, .14);
}
.tool {
  flex: 1 1 0; min-width: 0; max-width: 100px;
  border: none; border-radius: 16px; background: #fff7ef;
  padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; color: #6b5a52; cursor: pointer; position: relative;
  transition: transform .15s, background .15s;
}
.tool .ti { font-size: 24px; line-height: 30px; height: 30px; display: grid; place-items: center; }
.tool .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tool.active { background: linear-gradient(#fff1b8, #ffcf5a); color: #5a3d00; transform: translateY(-5px); box-shadow: 0 5px 0 #e3a62a; }
.tool.active .ti { animation: wiggle .5s ease; }
@keyframes wiggle { 0%{transform:scale(1)} 30%{transform:scale(1.25,.8)} 60%{transform:scale(.9,1.15)} 100%{transform:scale(1)} }
.tool .lock { display: none; position: absolute; top: 2px; right: 4px; font-size: 12px; }
.tool.locked { opacity: .5; }
.tool.locked .lock { display: block; }
.tool .badge {
  position: absolute; top: -5px; right: -2px; background: #ff6fa5; color: #fff;
  border-radius: 99px; font-size: 10px; padding: 1px 6px; border: 2px solid #fff; font-weight: bold;
}
.tool .cd {
  display: none; position: absolute; inset: 0; border-radius: 16px; background: rgba(90,70,60,.45);
  color: #fff; font-weight: bold; font-size: 15px; place-items: center;
}
.tool .cd.on { display: grid; }
.tool.shop { background: linear-gradient(#e2f5ff, #9fd8ff); color: #1f4f70; }
.tool.quest { background: linear-gradient(#f1ebff, #cdb8ff); color: #45307a; }
.tool .badge.idle { background: #7a5af8; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,70%,100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(.95); } }

/* ===== Toasts ===== */
#toasts {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toast {
  background: rgba(255,255,255,.95); border: 3px solid #ffd1e3; border-radius: 999px;
  padding: 7px 16px; font-size: 13.5px; font-weight: bold; white-space: nowrap;
  max-width: calc(100vw - 20px);
  box-shadow: 0 4px 0 rgba(91,70,54,.12);
  animation: toastIn .35s cubic-bezier(.3,1.6,.5,1), toastOut .4s ease 2s forwards;
}
.toast.warn { border-color: #ffc078; }
.toast.good { border-color: #a6ec8e; }
@keyframes toastIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

/* ===== Modals ===== */
.modal {
  position: fixed; inset: 0; z-index: 30; background: rgba(90, 70, 60, .35);
  display: grid; place-items: center; padding: 14px;
}
.modal.hidden { display: none; }
.panel {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: #fffaf3; border: 4px solid #fff; border-radius: 26px; padding: 14px 16px 18px;
  box-shadow: 0 10px 0 rgba(91,70,54,.18), 0 20px 50px rgba(0,0,0,.15);
  animation: panelIn .35s cubic-bezier(.3,1.5,.5,1);
}
@keyframes panelIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel h2 { font-size: 18px; margin: 4px 0 8px; }
.close { border: none; background: #ffe3ee; color: #c2447a; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.wallet { background: #fff; border-radius: 14px; padding: 6px 12px; font-size: 14px; margin-bottom: 8px; display: inline-block; }
.shop-sec { font-size: 13px; font-weight: bold; color: #a0785c; margin: 12px 2px 6px; }
.shop-row {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px;
  padding: 8px 10px; margin-bottom: 6px; border: 2px solid #f5ebe1;
}
.shop-row .si { font-size: 26px; width: 36px; text-align: center; flex: 0 0 auto; display: grid; place-items: center; }
.shop-row .sb { flex: 1; min-width: 0; }
.shop-row .sn { font-weight: bold; font-size: 14px; }
.shop-row .sd { font-size: 11.5px; color: #8b7466; }
.buy {
  flex: 0 0 auto; border: none; border-radius: 999px; padding: 8px 12px; min-width: 72px;
  font-weight: bold; font-size: 13px; cursor: pointer;
  background: linear-gradient(#c9f7b0, #7fd36b); color: #23561a; box-shadow: 0 3px 0 #5aa94a;
}
.buy.oxy { background: linear-gradient(#ffd6e6, #ff8fb8); color: #6e1438; box-shadow: 0 3px 0 #d9608e; }
.buy:disabled { background: #eee5dd; color: #b3a397; box-shadow: none; cursor: default; }
.buy.done { background: #fff2c4; color: #a07800; box-shadow: none; }
.buy.danger { background: #ffe3e3; color: #c0392b; box-shadow: none; }
.buy.place { background: linear-gradient(#e2f5ff, #9fd8ff); color: #1f4f70; box-shadow: 0 3px 0 #6fb6e0; }
.buy.star { background: linear-gradient(#efe6ff, #b89cff); color: #3d2470; box-shadow: 0 3px 0 #8c6ee0; }
.quest-now { border-color: #cdb8ff; background: #faf7ff; }
.chal-goats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.chal-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.chal-quit { border: none; background: #ffe3e3; color: #c0392b; border-radius: 999px; padding: 5px 12px; font-weight: bold; font-size: 12px; cursor: pointer; }
.qbtns { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.qbar { height: 8px; background: #eee6fb; border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.qbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #cdb8ff, #7a5af8); }
.quest-empty { background: #fff; border: 2px dashed #e2d6fb; border-radius: 16px; padding: 10px; font-size: 12.5px; color: #8b7466; text-align: center; }
.reroll {
  display: block; margin: 8px auto 4px; border: 2px solid #e2d6fb; background: #fff; color: #5a3fa8;
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: bold; cursor: pointer;
}
.reroll:active { transform: translateY(2px); }
.quest-note { font-size: 11.5px; color: #8b7466; text-align: center; }
.bond-card { background: #fff; border: 2px solid #ffe0ec; border-radius: 16px; padding: 8px 12px; margin-bottom: 8px; }
.bond-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bond-head b { font-size: 15px; }
.bond-head small { font-size: 11px; color: #a0785c; }
.bond-head .hearts { margin-left: auto; letter-spacing: 1px; font-size: 15px; }
.hearts i { font-style: normal; color: #eadbd2; }
.hearts i.on { color: #ff5c9a; }
.qbar.bond { background: #ffeef4; }
.qbar.bond i { background: linear-gradient(90deg, #ffb6d0, #ff6fa5); }
.memories { margin: 4px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.memories .locked { color: #b3a397; list-style: none; margin-left: -14px; }
.buy:not(:disabled):active { transform: translateY(2px); box-shadow: none; }

.help p { font-size: 13.5px; line-height: 1.6; margin: 6px 0; }
.help ul { padding-left: 18px; font-size: 13px; line-height: 1.6; margin: 8px 0; }
.help .small { font-size: 11.5px; color: #8b7466; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.help-grid div { background: #fff; border-radius: 14px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.help-grid span { font-size: 20px; margin-right: 4px; }
.settings { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 10px 0 2px; }
.setbtn {
  border: 2px solid #eee5dd; background: #fff; color: #b3a397; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: bold; cursor: pointer;
}
.setbtn.on { border-color: #a6ec8e; background: #effbe8; color: #2f7a22; }
.setbtn:active { transform: translateY(2px); }
.big-btn {
  display: block; margin: 10px auto 0; border: none; border-radius: 999px; padding: 12px 40px;
  font-size: 17px; font-weight: bold; cursor: pointer;
  background: linear-gradient(#ffd9ec, #ff8fb8); color: #6e1438; box-shadow: 0 5px 0 #d9608e;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9608e; }

/* ===== Narrow screens ===== */
@media (max-width: 560px) {
  #topbar { gap: 5px; padding-left: 6px; padding-right: 6px; }
  .gauge { padding-right: 8px; }
  .gicon { width: 28px; height: 28px; font-size: 16px; }
  .glabel { font-size: 10px; }
  .glabel b { font-size: 14px; }
  .glabel small { font-size: 9.5px; padding: 0 4px; }
  .sp-label { display: none; }
  .pill { padding: 7px 9px; font-size: 12px; }
  .pill.round { width: 34px; height: 34px; font-size: 14px; }
  #soundBtn { display: none; }
  .tool { font-size: 9px; }
  .tool .ti { font-size: 21px; }
  .help-grid { grid-template-columns: 1fr; }
  #toasts { top: 60px; }
  .toast { font-size: 12px; white-space: normal; text-align: center; border-radius: 18px; }   /* 長いお知らせは折り返す */
}
/* スマホ縦：ゲージは名前を省いて数値と信頼Lvを残す／おやつ6種が1行に収まるよう詰める */
@media (max-width: 430px) {
  .gname { display: none; }
  #subrow { gap: 4px; }
  .seedbtn { min-width: 44px; padding: 2px 5px; }
}