@font-face { font-family: "DotGothic16"; src: url("assets/DotGothic16.woff2") format("woff2"); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; background-color: #79c7b8; background-image: url("assets/spr_water.png"); background-size: 36px; image-rendering: pixelated; color: #3a3630; }
button { font-family: inherit; cursor: pointer; }
.dot { font-family: "DotGothic16", monospace; }
img.ic { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -6px; }
img.ic.sil { filter: brightness(0) opacity(.45); }
.muted { color: #8a8272; font-size: 12.5px; }

/* HUD（Muse版と同じ構成：左=木のピル／中央=プレイヤーの星／右=財布＋その下にクエスト） */
.hud { position: static; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 6px 8px; background: transparent; }
.hud > * { flex: 0 0 auto; }
.woodpill { display: inline-flex; align-items: center; gap: 6px; border: 3px solid #7d5527; border-radius: 16px; padding: 5px 9px; background: linear-gradient(180deg, #c79a5f 0%, #b08147 55%, #a06c35 100%); box-shadow: inset 0 2px 0 rgba(255,240,200,.55), inset 0 -3px 0 rgba(90,55,15,.35); color: #fff6df; font-weight: 700; font-size: 15px; white-space: nowrap; }
.woodpill .dot { font-size: 15px; letter-spacing: 0; white-space: nowrap; }
.hudright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hudquest { width: 40px; height: 40px; padding: 5px; border: 3px solid #7d5527; border-radius: 12px; background: #f7e7c3; box-shadow: inset 0 2px 0 #fffbe9, inset 0 -3px 0 rgba(160,108,53,.4); }
.hudquest img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.hudquest.has { border-color: #d9a441; box-shadow: 0 0 0 2px #ffe9a8, inset 0 2px 0 #fffbe9; }
.hudw, .hudcoin { width: 24px; height: 24px; image-rendering: pixelated; }
.hudplayers { display: flex; gap: 6px; }
.pstar { background: none; border: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.pstar .pring { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #7d5527; background: #fff6df; }
.pstar .pring img { width: 28px; height: 28px; image-rendering: pixelated; }
.pstar.off .pring { border-color: transparent; background: rgba(243,226,184,.6); opacity: .6; }
.pstar .pname { margin-top: 1px; font-family: "DotGothic16", monospace; font-size: 11px; font-weight: 700; color: #7d5527; line-height: 1; white-space: nowrap; }

/* シーン */
main { max-width: 760px; margin: 0 auto; padding: 4px 8px 218px; }
.scene { position: relative; width: 100%; aspect-ratio: 4 / 3; background-color: #a5d8c5; border-radius: 12px; overflow: hidden; }
body.locked .scene { filter: grayscale(.85) brightness(.92); }
.terrain { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 0; }
img.ic.young { width: 16px; height: 16px; opacity: .8; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 農場シーン（Muse版の合成済み島：枠なし・10/11・島画像＋落影） */
.farmscene { aspect-ratio: 10 / 11; background: transparent; border-radius: 0; overflow: visible; }
.island { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 10px 12px rgba(30,70,60,.28)); pointer-events: none; z-index: 0; }
.house { position: absolute; left: 7%; top: 4%; width: 31%; image-rendering: pixelated; pointer-events: none; z-index: 1; }
/* ポスト：家の前（下端の右寄り）。届け物がある間は旗が上がった絵に切り替わる */
#mailboxBtn { position: absolute; left: 31%; top: 40.5%; width: 9.5%; background: none; border: none; padding: 0; z-index: 2; }
#mailboxBtn img { width: 100%; image-rendering: pixelated; display: block; }
/* ポスト：届け物が待っている間だけ、絵の上に知らせる小さなピル（旗だけでは気づきにくいため）。タップはポスト本体に通す */
#mailboxBtn .mailnotice { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; background: rgba(74,53,32,.85); border-radius: 999px; padding: 3px 9px; color: #fff6df; font-family: "DotGothic16", monospace; font-size: 11.5px; line-height: 1.35; pointer-events: none; z-index: 3; }
.tree { position: absolute; background: none; border: none; padding: 0; }
.tree > img { width: 100%; image-rendering: pixelated; display: block; }
#appleTree { right: 8%; top: 4%; width: 19%; z-index: 1; }
.tree .fruitbadge { position: absolute; right: -4px; top: 0; display: flex; align-items: center; gap: 2px; background: rgba(74,53,32,.65); border-radius: 999px; padding: 2px 7px 2px 3px; color: #fff6df; font-family: "DotGothic16", monospace; font-size: 11px; line-height: 1; }
.tree .fruitbadge img { width: 14px; height: 14px; image-rendering: pixelated; }
.tree .fruitbadge .fcount { font-family: "DotGothic16", monospace; font-size: 11px; line-height: 1; color: #fff6df; }
.tree.nofruit .fruitbadge { display: none; }
.ptree { position: absolute; right: 7%; top: 33%; width: 16%; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.deco { position: absolute; image-rendering: pixelated; pointer-events: none; z-index: 1; }
/* 畑ボード：タンの板に土タイル9枚。全体がタップ標的（畑パネルを開く） */
#fieldBoard { position: absolute; left: 15%; bottom: 12.5%; width: 29%; background: none; border: none; padding: 0; text-align: left; z-index: 2; }
.boardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #d9c084; border-radius: 12px; padding: 5px; box-shadow: 0 4px 10px rgba(60,45,20,.3); }
.btile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 5px; background-size: 18px; image-rendering: pixelated; }
.btile .bstage { position: absolute; inset: 0; margin: auto; width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; }
.btile .bicon { position: absolute; right: 0; top: 0; width: 48%; image-rendering: pixelated; }
.boardplus { position: absolute; right: -8px; bottom: -8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #7d5527; background: #fff6df; color: #a9743f; font-size: 20px; font-weight: 900; line-height: 1; box-shadow: 0 2px 5px rgba(60,45,20,.35); z-index: 3; }
.boardcan { position: absolute; left: -8px; top: -12px; width: 32px; image-rendering: pixelated; animation: bob 2.6s ease-in-out infinite; z-index: 3; }
/* 培地コーナー：地面パッチなし。茂み＋キノコ＋岩、実りはキノコ自体と星で読む */
#baichiCorner { position: absolute; right: 11%; bottom: 15%; width: 28%; background: none; border: none; padding: 0; z-index: 2; }
.cornerin { position: relative; display: block; aspect-ratio: 3 / 2; }
.cbush { position: absolute; left: 0; bottom: 4px; width: 62%; image-rendering: pixelated; }
.cmush { position: absolute; right: 4px; bottom: 0; width: 52%; image-rendering: pixelated; }
.crock { position: absolute; left: 38%; bottom: 0; width: 22%; image-rendering: pixelated; }
.ccluster { position: absolute; right: 2%; bottom: 36%; width: 42%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.ccluster img { width: 100%; image-rendering: pixelated; display: block; }
.ccluster img.young { transform: scale(.55); opacity: .92; }
.cstar { position: absolute; right: 4px; top: -8px; width: 28px; image-rendering: pixelated; animation: bob 1.6s ease-in-out infinite; }
.boat { position: absolute; right: -2%; bottom: -1.5%; width: 19%; image-rendering: pixelated; animation: bob 3.4s ease-in-out infinite; z-index: 2; pointer-events: none; }
/* 村への標識：シーンの下端より下の海に浮かぶ木の丸ボタン */
#plusBtn { position: absolute; right: 1%; bottom: -13%; width: 10%; aspect-ratio: 1; border: none; background: none; padding: 0; z-index: 5; filter: drop-shadow(0 4px 5px rgba(30,70,60,.4)); animation: bob 2.6s ease-in-out infinite; }
#plusBtn .plusin { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #7d5527; background: linear-gradient(180deg, #c79a5f 0%, #b08147 55%, #a06c35 100%); box-shadow: inset 0 2px 0 rgba(255,240,200,.55), inset 0 -3px 0 rgba(90,55,15,.35); color: #fff6df; font-size: 22px; font-weight: 900; line-height: 1; }
/* 発見スポット：見えないタップゾーン。中身のスプライトだけが見える */
#spotLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spotzone2 { position: absolute; aspect-ratio: 1; background: transparent; border: none; padding: 0; pointer-events: auto; }
.spotzone2 img { image-rendering: pixelated; }
.spot-debris { position: absolute; left: 4px; bottom: 0; width: 62%; }
/* 発見のきらめき：四つ星の光が静かに明滅するだけの、さりげないエフェクト（プレイヤーの星とは別物） */
@keyframes kirari-twinkle { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.spotzone2 img.spot-glimmer { position: absolute; right: 0; top: 0; width: 30px; max-width: 70%; image-rendering: auto; animation: kirari-twinkle 2.6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255, 240, 180, .55)); pointer-events: none; }
.spot-critter { position: absolute; right: 0; bottom: 0; width: 72%; animation: bob 2.2s ease-in-out infinite; }

/* 村 */
.backbtn { position: absolute; left: 3%; top: 4%; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #b9ac8d; background: #fffdf5; font-size: 18px; }
.building { position: absolute; background: none; border: none; padding: 0; width: 23%; }
.building img { width: 100%; image-rendering: pixelated; }
.building.closed img { filter: brightness(.55) saturate(.7); }
#shopHouse { left: 7%; top: 9%; }
#giftHouse { right: 7%; top: 30%; }
.board { position: absolute; left: 41%; top: 44%; width: 15%; aspect-ratio: 4/3; background: none; border: none; padding: 0; z-index: 2; }
.board .b-face { position: absolute; left: 0; right: 0; top: 0; height: 76%; background-image: url("assets/tile_wood.png"); background-size: 34px 34px; image-rendering: pixelated; border: 3px solid #77572c; border-radius: 5px; box-shadow: 0 3px 0 rgba(60,40,15,.25); padding: 7px; z-index: 1; }
.board .b-post { position: absolute; top: 58%; width: 10%; height: 42%; background-image: url("assets/tile_wood.png"); background-size: 34px 34px; image-rendering: pixelated; border: 3px solid #77572c; border-top: none; border-radius: 0 0 4px 4px; z-index: 0; }
.board .b-post-l { left: 11%; }
.board .b-post-r { right: 11%; }
.boardpaper { display: block; width: 100%; height: 100%; background: #f7efdb; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(119,87,44,.35); }
.vorange { left: 14%; bottom: 7%; width: 15%; }
.vpear { right: 22%; bottom: 24%; width: 15%; }
.vorange img { filter: hue-rotate(-18deg) saturate(1.5); }
.vpear img { filter: hue-rotate(38deg) saturate(1.2); }

/* ドック */
.dock { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, #c79a5f 0%, #b08147 55%, #a06c35 100%); border: 3px solid #7d5527; border-radius: 16px; box-shadow: inset 0 2px 0 rgba(255,240,200,.55), inset 0 -3px 0 rgba(90,55,15,.35), 0 4px 14px rgba(60,50,30,.25); }
.dock button { position: relative; flex: 1 1 0; max-width: 58px; height: 52px; border: 3px solid #7d5527; border-radius: 12px; background: #f7e7c3; box-shadow: inset 0 2px 0 #fffbe9, inset 0 -3px 0 rgba(160,108,53,.4); font-size: 24px; display: flex; align-items: center; justify-content: center; }
.dock .di { width: 30px; height: 30px; image-rendering: pixelated; }
span.di { width: auto; height: auto; }
.dockbadge { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #e4572e; color: #fff; font-size: 11px; font-weight: 700; }

/* パネル */
#panelWrap { position: fixed; inset: 0; z-index: 40; background: rgba(40,36,28,.45); display: none; align-items: flex-end; justify-content: center; }
#panelWrap.show { display: flex; }
.sheet { background: #fffdf5; width: min(760px, 100%); max-height: 80vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 12px 16px 140px; }
.sheethead { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
#panelClose { border: none; background: none; font-size: 18px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #eee3cb; flex-wrap: wrap; }
.row.shop { flex-wrap: nowrap; }
.row.shop > span:first-child { min-width: 0; font-size: 13px; white-space: nowrap; }
.row.shop .muted { font-size: 11px; }
.row.shop .btn { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; padding: 4px 10px; }
.btn { border: 2px solid #b9ac8d; background: #fff; border-radius: 999px; padding: 4px 14px; font-size: 14px; }
.btn.main { background: #ffd968; border-color: #d9a441; font-weight: 700; }
.btn:disabled { opacity: .45; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tab { border: 2px solid #b9ac8d; background: #fff; border-radius: 999px; padding: 4px 18px; }
.tab.on { background: #ffd968; border-color: #d9a441; font-weight: 700; }
.toolrow { display: flex; gap: 8px; margin-bottom: 6px; }
.toolchip { border: 2px solid #b9ac8d; background: #fff; border-radius: 10px; padding: 4px 12px; }
.toolchip.on { background: #e7f2c8; font-weight: 700; }
.inggrid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ingbtn { border: 2px solid #b9ac8d; background: #fff; border-radius: 12px; padding: 6px 10px; font-size: 13.5px; }
.ingbtn.sel { background: #ffe9a8; border-color: #d9a441; }
.msg { margin-top: 10px; font-size: 14px; min-height: 20px; }
.labelchip { background: #efe6cf; border-radius: 6px; font-size: 11.5px; padding: 1px 7px; }
.ingchip { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; background: #f4efe0; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.ingchip.lack { color: #b0432f; background: #f9e3dc; }
.lackline { color: #b0432f; font-size: 12.5px; padding: 0 2px 6px; }
.selltag { font-weight: 700; }
.trendmark { color: #d9a441; }
.post { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; border-bottom: 1px solid #eee3cb; }
.face { flex: 0 0 32px; width: 32px; height: 32px; background-image: url("assets/teemo.png"); background-size: 160px 160px; image-rendering: pixelated; }
.posttext { font-size: 15.5px; line-height: 1.5; padding-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 6px; }
.cell { text-align: center; font-size: 12px; background: #f8f3e6; border-radius: 10px; padding: 8px 2px; }
.cell .ic { width: 30px; height: 30px; }
.cell span { display: block; margin-top: 2px; }
.wordlist { margin-bottom: 8px; }
.wordchip { display: inline-block; background: #eef4da; border: 1.5px solid #b9c48d; border-radius: 999px; padding: 2px 10px; margin: 2px; font-size: 13.5px; }
.questrow { display: flex; justify-content: space-between; padding: 8px 2px; font-size: 15px; }
h3 { margin: 12px 0 6px; font-size: 15px; }

/* 畑パネル */
.farmgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fplot { position: relative; aspect-ratio: 1; border: 2px solid rgba(138,90,51,.4); border-radius: 16px; background-size: 30px; image-rendering: pixelated; padding: 0; overflow: hidden; }
.fplot .fcrop { position: absolute; inset: 0; margin: auto; width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.fplot .fbadge { position: absolute; right: 4px; top: 4px; width: 36%; image-rendering: pixelated; animation: bob 2.6s ease-in-out infinite; }
.fplot .fcan { position: absolute; right: 4px; bottom: 4px; width: 30%; image-rendering: pixelated; opacity: .9; }
.fplot .fdchip { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(74,53,32,.55); border-radius: 6px; padding: 1px 6px; }
.fplot .fplus { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; font-weight: 900; color: #fff6df; text-shadow: 0 2px 3px rgba(90,55,15,.9); }
.seedchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.seedchip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid #b9ac8d; background: #fff8e6; border-radius: 12px; padding: 6px 10px; font-size: 14px; font-weight: 700; color: #3a3630; }

/* 料理：道具チップと材料スロット */
.toolchip { display: inline-flex; align-items: center; gap: 6px; }
.toolchip.locked { opacity: .5; }
.toolchip .temoji { font-size: 20px; line-height: 1; }
.toolchip .tprice { font-size: 10.5px; font-weight: 700; color: #8a8272; }
.slots { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.slot { width: 56px; height: 56px; display: grid; place-items: center; border: 3px dashed rgba(169,116,63,.55); border-radius: 16px; background: rgba(255,255,255,.5); padding: 0; }
.slot.armed { border-color: #d9a441; background: #fff3cf; }
.slot .slotimg { width: 40px; height: 40px; image-rendering: pixelated; }
.slot .slotplus { font-size: 20px; font-weight: 900; color: rgba(169,116,63,.55); }
.roundbtn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #8a6b3a; background: #e8cf9e; font-size: 30px; line-height: 1; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.roundbtn:disabled { opacity: .4; box-shadow: none; }

/* 図鑑：リスト形式のセクション */
.booklabel { margin: 8px 0 4px; }
.booklist { list-style: none; padding: 0; margin: 0 0 6px; }
.booklist li { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 14px; }
.booklist .bname { font-weight: 700; }
.booklog { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.booklog li { padding: 2px 0; }

/* モーダル */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(40,36,28,.5); display: none; align-items: center; justify-content: center; padding: 16px 16px 110px; }
.modal.show { display: flex; }
.card { background: #fffdf5; border-radius: 16px; padding: 18px; width: min(420px, 100%); text-align: center; }
.card.wide { width: min(520px, 100%); text-align: left; max-height: 84vh; overflow-y: auto; }
.btnrow { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.pickrow { display: flex; gap: 18px; justify-content: center; margin-top: 8px; }
.pickbtn { background: none; border: 3px solid #b9ac8d; border-radius: 16px; padding: 12px 18px; font-size: 20px; font-weight: 700; }
.pickbtn img { width: 52px; height: 52px; image-rendering: pixelated; display: block; }
.loglist { list-style: none; padding: 0; margin: 6px 0; font-size: 14px; }
.loglist li { padding: 4px 0; border-bottom: 1px solid #f0e7d2; }
.seedbtn { display: block; width: 100%; margin: 6px 0; text-align: left; }

/* トースト */
#toast { position: fixed; left: 50%; bottom: 176px; transform: translateX(-50%) translateY(20px); background: rgba(58,52,40,.94); color: #fff8e6; padding: 9px 18px; border-radius: 999px; font-size: 14.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 60; max-width: 92vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.dot { font-family: "DotGothic16", monospace; }

.credits { font-family: "DotGothic16", monospace; text-align: center; font-size: 10px; line-height: 1.4; white-space: nowrap; color: #fdf6df; text-shadow: 0 1px 2px rgba(30,70,60,.55); margin: 14px 4px calc(168px + env(safe-area-inset-bottom)); }
.credits a { color: #fdf6df; }