/* ============================================================
   なつつり！ スタイル
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

html, body {
  width: 100%; height: 100%;
  background: #1c2418;
  overflow: hidden;
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
}

#wrap {
  position: absolute;
  width: 960px; height: 540px;
  transform-origin: top left;
}

#game {
  display: block;
  width: 960px; height: 540px;
  touch-action: none;
  cursor: pointer;
}

.hidden { display: none !important; }

/* ---------- 共通ボタン ---------- */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

#btn-vol {
  position: absolute; top: 10px; right: 12px;
  background: rgba(40, 34, 24, 0.62);
  color: #ffedc0;
  font-size: 14px; font-weight: bold;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 240, 200, 0.35);
}
#btn-vol:hover { background: rgba(70, 58, 38, 0.75); }

/* ---------- 釣りHUD ---------- */
#btn-gohome {
  position: absolute; top: 52px; right: 12px;
  background: rgba(40, 34, 24, 0.62);
  color: #ffedc0;
  font-size: 14px; font-weight: bold;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 240, 200, 0.35);
}
#btn-gohome:hover { background: rgba(70, 58, 38, 0.75); }

#bait-bar {
  position: absolute; left: 12px; bottom: 10px;
  display: flex; gap: 6px;
}
.bait-chip {
  position: relative;
  width: 46px; height: 46px;
  font-size: 22px;
  background: rgba(46, 40, 28, 0.68);
  border: 2px solid rgba(255, 236, 190, 0.3);
  border-radius: 12px;
  color: #fff;
}
.bait-chip em {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 11px; font-style: normal; font-weight: bold;
  color: #ffe9a0;
  text-shadow: 0 1px 2px #000;
}
.bait-chip.active {
  border-color: #ffd24a;
  background: rgba(110, 84, 30, 0.85);
  box-shadow: 0 0 10px rgba(255, 210, 74, 0.5);
}
.bait-chip.empty { opacity: 0.4; }

#depth-ctl {
  position: absolute; right: 12px; top: 190px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  background: rgba(40, 34, 24, 0.55);
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 240, 200, 0.25);
}
#depth-ctl button {
  width: 44px; height: 34px;
  font-size: 15px; font-weight: bold;
  background: rgba(255, 240, 200, 0.16);
  color: #ffedc0;
  border-radius: 8px;
}
#depth-ctl button:active { background: rgba(255, 220, 120, 0.4); }
#depth-label {
  color: #e8dcb8; font-size: 10px; text-align: center; line-height: 1.3;
}
#depth-label b { font-size: 14px; color: #fff; }

/* ---------- 家メニュー ---------- */
#home-menu {
  position: absolute; right: 26px; top: 120px;
  display: flex; flex-direction: column; gap: 12px;
}
.home-btn {
  min-width: 240px;
  padding: 13px 22px;
  font-size: 19px; font-weight: bold;
  text-align: left;
  color: #4a3418;
  background: linear-gradient(180deg, #f5e3b8, #e8cf96);
  border: 3px solid #a5804a;
  border-radius: 14px;
  box-shadow: 0 4px 0 #7d5f34, 0 6px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.06s;
}
.home-btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, #fdf0cd, #f0dcae); }
.home-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7d5f34; }

/* ---------- タイトル ---------- */
#title-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
#title-screen button { pointer-events: auto; }
#title-logo { margin-top: 52px; text-align: center; }
#title-main {
  font-size: 88px; font-weight: 900;
  color: #fff;
  letter-spacing: 6px;
  text-shadow:
    0 0 0 #fff,
    4px 4px 0 #e8574a,
    -4px 4px 0 #e8574a,
    4px -4px 0 #e8574a,
    -4px -4px 0 #e8574a,
    0 8px 18px rgba(60, 20, 10, 0.45);
  transform: rotate(-2deg);
}
#title-sub {
  margin-top: 6px;
  font-size: 22px; font-weight: bold;
  color: #fff8e0;
  text-shadow: 0 2px 4px rgba(40, 30, 10, 0.7), 0 0 14px rgba(0,0,0,0.3);
}
#title-btns {
  margin-top: 46px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.title-btn {
  min-width: 280px;
  padding: 14px 30px;
  font-size: 22px; font-weight: bold;
  color: #4a3418;
  background: linear-gradient(180deg, #fdf0cd, #ecd7a2);
  border: 3px solid #a5804a;
  border-radius: 16px;
  box-shadow: 0 5px 0 #7d5f34, 0 8px 16px rgba(0, 0, 0, 0.4);
}
.title-btn:hover { transform: translateY(-2px); }
.title-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7d5f34; }
#title-note {
  margin-top: 22px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#title-disclaimer {
  position: absolute; bottom: 8px; left: 0; right: 0;
  font-size: 9.5px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(30, 26, 18, 0.55);
  padding: 6px 14px;
  text-align: center;
}

/* ---------- モーダル ---------- */
#modal-layer {
  position: absolute; inset: 0;
  background: rgba(20, 18, 10, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
#modal-box {
  width: 470px;
  max-height: 490px;
  background: linear-gradient(180deg, #fdf6e0, #f5e9c8);
  border: 4px solid #8a6a3c;
  border-radius: 18px;
  padding: 18px 22px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  color: #45351c;
}
#modal-box.wide { width: 640px; max-height: 505px; }
#modal-box h3 {
  font-size: 21px;
  color: #5d431e;
  border-bottom: 2px dashed #c9ab72;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.modal-body { overflow-y: auto; flex: 1; font-size: 15px; line-height: 1.7; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: #c9ab72; border-radius: 4px; }
.modal-btns {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 12px;
}
.modal-btn {
  padding: 10px 26px;
  font-size: 17px; font-weight: bold;
  color: #4a3418;
  background: linear-gradient(180deg, #ffe9a8, #f0cf7a);
  border: 2px solid #a5804a;
  border-radius: 12px;
  box-shadow: 0 3px 0 #7d5f34;
}
.modal-btn:active { transform: translateY(2px); box-shadow: none; }
.modal-btn.sub { background: linear-gradient(180deg, #eee4cc, #ddd0b0); font-weight: normal; }

.story { font-size: 15.5px; line-height: 1.9; }
.story.small { font-size: 12.5px; text-align: center; color: #8a734a; margin-top: 10px; }
.small-note { font-size: 13px; color: #7d6538; margin-top: 6px; }

/* ---------- 釣り場選択 ---------- */
.loc-list { display: flex; flex-direction: column; gap: 10px; }
.loc-btn {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: left;
  gap: 0 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fbf2d8, #efdfb4);
  border: 2px solid #b08f56;
  border-radius: 12px;
}
.loc-btn:hover:not(.locked) { background: #fff8e2; border-color: #d4a850; }
.loc-btn.locked { opacity: 0.55; cursor: default; }
.loc-icon { grid-row: 1 / 3; font-size: 34px; text-align: center; }
.loc-name { font-size: 18px; font-weight: bold; color: #513b18; }
.loc-blurb { font-size: 12.5px; color: #7d6538; }

/* ---------- 店 ---------- */
.shop-talk {
  background: #fff;
  border: 2px solid #d9c28e;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.shop-money { text-align: right; font-size: 14px; margin-bottom: 6px; color: #6b5426; }
.shop-money b { color: #b06a10; font-size: 17px; }
.shop-scroll h4 {
  margin: 10px 0 4px;
  color: #8a6428;
  font-size: 14px;
  border-left: 4px solid #d4a850;
  padding-left: 8px;
}
.shop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px dotted #d9c28e;
}
.shop-row.owned { opacity: 0.62; }
.shop-info { flex: 1; display: flex; flex-direction: column; }
.shop-info b { font-size: 15px; color: #51380f; }
.shop-info span { font-size: 11.5px; color: #82683a; }
.shop-info .cnt { font-style: normal; color: #b06a10; font-size: 12px; }
.buy-btn {
  padding: 7px 12px;
  font-size: 13.5px; font-weight: bold;
  background: linear-gradient(180deg, #ffe9a8, #f0cf7a);
  border: 2px solid #a5804a;
  border-radius: 9px;
  color: #4a3418;
  white-space: nowrap;
}
.buy-btn.five { background: linear-gradient(180deg, #d8ecb8, #b8d890); border-color: #7a9a4a; }
.buy-btn:active { transform: translateY(1px); }
.tag { font-size: 12px; color: #8a6a3c; font-weight: bold; padding: 0 8px; }
.tag.dim { color: #b5a27f; }

/* ---------- 売却 ---------- */
.sell-list { max-height: 220px; overflow-y: auto; }
.sell-row {
  display: flex; justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px dotted #d9c28e;
  font-size: 14.5px;
}
.sell-total {
  text-align: right;
  font-size: 17px;
  margin-top: 10px;
  color: #51380f;
}
.sell-total b { color: #b06a10; font-size: 22px; }

/* ---------- 図鑑 ---------- */
.zk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.zk-card {
  background: #fffdf4;
  border: 2px solid #d9c28e;
  border-radius: 10px;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.zk-card:hover { border-color: #d4a850; background: #fffef9; }
.zk-card.nushi.got { border-color: #c89e30; background: linear-gradient(180deg, #fff8dc, #f8ecc0); }
.zk-canvas { height: 54px; display: flex; align-items: center; justify-content: center; }
.zk-name { font-size: 12.5px; font-weight: bold; color: #51380f; }
.zk-card:not(.got) .zk-name { color: #a99368; }
.zk-rec { font-size: 10px; color: #8a734a; }
.zk-detail { text-align: center; }
.zk-detail-fish { display: flex; justify-content: center; margin-bottom: 4px; }
.zk-desc { font-size: 14.5px; text-align: left; margin-bottom: 10px; }
.zk-hints { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.zk-hints div {
  display: flex;
  font-size: 13.5px;
  border-bottom: 1px dotted #d9c28e;
  padding: 3px 6px;
}
.zk-hints span { width: 96px; color: #8a6428; font-weight: bold; }

/* ---------- 日記 ---------- */
.diary-page, .diary-scroll {
  font-family: "UD Digi Kyokasho NP-R", "UD デジタル 教科書体 NP-R", "Yu Kyokasho", "Klee One", "Hiragino Maru Gothic ProN", cursive;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(140, 110, 60, 0.25) 27px 28px);
  padding: 2px 10px;
  font-size: 15.5px;
  line-height: 28px;
  color: #3c3226;
}
.diary-scroll { max-height: 350px; overflow-y: auto; }
.diary-date { font-weight: bold; color: #7a5418; }
.diary-sep { border: none; border-top: 2px dashed #c9ab72; margin: 12px 0; }

/* ---------- 釣果カード ---------- */
.catch-card { text-align: center; }
.catch-card.nushi {
  background: radial-gradient(circle at 50% 30%, #fff8dc, transparent 70%);
}
.catch-fish { display: flex; justify-content: center; }
.catch-name { font-size: 26px; font-weight: 900; color: #51380f; }
.catch-size { font-size: 17px; color: #7a5418; margin: 4px 0; }
.badge {
  display: inline-block;
  font-size: 12px; font-weight: bold;
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: 2px;
}
.badge.new { background: #ffe14a; color: #7a5418; }
.badge.rec { background: #a8e0ff; color: #1c5a7a; }

/* ---------- エンディング ---------- */
.end-stats { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.end-stats div {
  display: flex; justify-content: space-between;
  border-bottom: 1px dotted #d9c28e;
  padding: 4px 12px;
  font-size: 15px;
}
.end-stats span { color: #8a6428; }

/* ---------- トースト ---------- */
#toast-layer {
  position: absolute;
  left: 50%; bottom: 66px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 60;
}
.toast {
  background: rgba(44, 38, 26, 0.88);
  color: #fff4d8;
  font-size: 15px; font-weight: bold;
  padding: 9px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 236, 190, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.bad { background: rgba(120, 30, 22, 0.9); }
.toast.nushi { background: rgba(60, 30, 90, 0.9); border-color: #ffd24a; color: #ffe9a0; }

/* ---------- ねむり ---------- */
#sleep-fade {
  position: absolute; inset: 0;
  background: #0a0806;
  opacity: 0;
  transition: opacity 1.2s;
  z-index: 80;
  pointer-events: none;
}
#sleep-fade.on { opacity: 1; }