@font-face { font-family: 'Jua'; src: url('../../assets/fonts/Jua-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Gaegu'; src: url('../../assets/fonts/Gaegu-Bold.ttf'); font-display: swap; }
:root { --cream: #fff8e4; --cream2: #fdeec6; --brown: #6e5231; --brown2: #9a7b52; --green: #6cc15a; --teal: #3fb8ad; --yellow: #ffd45e; --pink: #ff8fa8; --shadow: 0 6px 0 rgba(110, 82, 49, 0.18), 0 10px 24px rgba(60, 40, 10, 0.18); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe6ff; font-family: 'Jua', 'Apple SD Gothic Neo', sans-serif; color: var(--brown); user-select: none; -webkit-user-select: none; }
canvas#view { display: block; position: fixed; inset: 0; }
#ui { position: fixed; inset: 0; pointer-events: none; font-size: 18px; }
#ui * { box-sizing: border-box; }
.hide { display: none !important; }
kbd { display: inline-block; min-width: 26px; padding: 2px 8px; margin-right: 6px; border-radius: 9px; background: var(--brown); color: var(--cream); font-family: 'Jua'; font-size: 0.82em; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }

/* ---------- HUD */
#hud { position: absolute; inset: 0; transition: opacity 0.3s; }
#hud.off { opacity: 0; }
.pill { background: var(--cream); border-radius: 999px; box-shadow: var(--shadow); padding: 8px 20px; }
#clock { position: absolute; left: 26px; top: 22px; display: flex; align-items: center; gap: 12px; font-size: 22px; }
#clock .wx { font-size: 26px; line-height: 1; }
#clock .date { color: var(--brown2); font-size: 18px; }
#clock .time b { font-size: 26px; color: var(--teal); margin-left: 4px; }
#money { position: absolute; right: 26px; top: 22px; display: flex; align-items: center; gap: 10px; font-size: 26px; }
#money .coin { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f6c343 60%, #d99a1e); border: 2px solid #c98d17; display: inline-block; }
#money.bump { animation: bump 0.35s; }
@keyframes bump { 40% { transform: scale(1.14); } }
#tools { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; }
#tools .slot { width: 62px; height: 62px; border-radius: 20px; background: rgba(255, 248, 228, 0.82); box-shadow: 0 4px 0 rgba(110, 82, 49, 0.16); display: grid; place-items: center; position: relative; transition: transform 0.15s; }
#tools .slot.on { background: var(--yellow); transform: translateY(-8px) scale(1.08); }
#tools .slot img { width: 50px; height: 50px; }
#tools .slot i { position: absolute; left: 7px; top: 3px; font-style: normal; font-size: 13px; color: var(--brown2); }
#tools .slot .hand { font-size: 28px; }
#prompt { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); font-size: 21px; white-space: nowrap; transition: opacity 0.15s, transform 0.15s; }
#prompt.off { opacity: 0; transform: translateX(-50%) translateY(8px); }
#hints { position: absolute; right: 24px; bottom: 20px; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(40, 60, 30, 0.7); text-align: right; line-height: 1.75; opacity: 0.92; }
#hints kbd { background: rgba(255, 248, 228, 0.9); color: var(--brown); font-size: 12px; min-width: 20px; padding: 1px 6px; margin: 0 4px 0 10px; }
#toasts { position: absolute; left: 26px; top: 84px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.toast { background: var(--cream); border-radius: 18px; padding: 8px 16px 8px 10px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; font-size: 18px; animation: toastIn 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); transition: opacity 0.4s, transform 0.4s; }
.toast img { width: 34px; height: 34px; }
.toast.out { opacity: 0; transform: translateX(-20px); }
.toast.gold { background: var(--yellow); }
@keyframes toastIn { from { transform: translateX(-30px) scale(0.8); opacity: 0; } }
#markers { position: absolute; inset: 0; overflow: hidden; }
.mark { position: absolute; transform: translate(-50%, -100%); font-size: 30px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.15)); animation: pop 0.3s cubic-bezier(0.2, 1.8, 0.4, 1); }
.mark.bubble { background: #fff; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; }
.mark.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.mark.float { animation: floatUp 1.1s ease-out forwards; font-size: 24px; color: #fff; text-shadow: 0 2px 0 #c98d17, 0 0 6px rgba(0, 0, 0, 0.25); white-space: nowrap; }
@keyframes floatUp { from { opacity: 0; margin-top: 10px; } 20% { opacity: 1; } to { opacity: 0; margin-top: -50px; } }
@keyframes pop { from { transform: translate(-50%, -100%) scale(0.2); } }

/* ---------- 말풍선 대화 */
#dialog { position: absolute; left: 50%; bottom: 46px; width: min(880px, 86vw); transform: translateX(-50%); pointer-events: auto; }
#dialog .box { background: var(--cream); border-radius: 46px 46px 46px 46px / 40px 40px 52px 52px; padding: 30px 46px 34px; min-height: 148px; box-shadow: var(--shadow); font-size: 28px; line-height: 1.5; position: relative; animation: dialogIn 0.28s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes dialogIn { from { transform: scale(0.85) translateY(20px); opacity: 0; } }
#dialog .name { position: absolute; left: 44px; top: -22px; padding: 4px 22px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 22px; transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); }
#dialog .text { white-space: pre-wrap; word-break: keep-all; min-height: 84px; }
#dialog .text em { font-style: normal; color: #e0803a; }
#dialog .next { position: absolute; right: 38px; bottom: 14px; color: var(--yellow); font-size: 26px; animation: bob 0.7s infinite alternate ease-in-out; text-shadow: 0 2px 0 #d39a1c; }
@keyframes bob { to { transform: translateY(6px); } }
#dialog .choices { position: absolute; right: 30px; bottom: calc(100% - 26px); background: var(--cream); border-radius: 28px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
#dialog .choices div { padding: 7px 22px; border-radius: 999px; font-size: 23px; cursor: pointer; }
#dialog .choices div.on { background: var(--yellow); }
#dialog.banner .box { background: #fffdf3; text-align: center; }

/* ---------- 창(가방·상점·도감·과제·지도) */
#panel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(60, 90, 50, 0.22); pointer-events: auto; backdrop-filter: blur(3px); }
#panel .win { background: var(--cream); border-radius: 44px; padding: 26px 34px 28px; box-shadow: var(--shadow); min-width: 560px; max-width: 92vw; max-height: 90vh; position: relative; animation: dialogIn 0.25s cubic-bezier(0.2, 1.5, 0.4, 1); }
#panel h2 { margin: 0 0 14px; font-size: 30px; font-weight: normal; display: flex; align-items: center; gap: 12px; }
#panel h2 small { font-size: 17px; color: var(--brown2); margin-left: auto; }
#panel .tabs { display: flex; gap: 8px; margin-bottom: 14px; }
#panel .tabs div { padding: 6px 20px; border-radius: 999px; background: var(--cream2); cursor: pointer; font-size: 20px; }
#panel .tabs div.on { background: var(--green); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(10, 66px); gap: 8px; }
.cell { width: 66px; height: 66px; border-radius: 50%; background: var(--cream2); position: relative; display: grid; place-items: center; cursor: pointer; transition: transform 0.1s; }
.cell.on { background: var(--yellow); transform: scale(1.12); box-shadow: 0 4px 0 rgba(110, 82, 49, 0.18); z-index: 1; }
.cell img { width: 54px; height: 54px; pointer-events: none; }
.cell .n { position: absolute; right: 0; bottom: -2px; background: var(--brown); color: #fff; border-radius: 999px; font-size: 13px; padding: 1px 7px; }
.cell .eq { position: absolute; left: -2px; top: -4px; background: var(--teal); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 6px; }
.cell.dim img { filter: brightness(0); opacity: 0.16; }
.cell .txt { font-size: 12px; text-align: center; line-height: 1.1; padding: 4px; }
.info { margin-top: 14px; min-height: 58px; font-size: 20px; display: flex; align-items: center; gap: 14px; }
.info b { font-weight: normal; font-size: 24px; }
.info span { color: var(--brown2); font-size: 17px; }
.info .price { margin-left: auto; color: #d08a12; white-space: nowrap; }
.menu { position: absolute; background: #fff; border-radius: 24px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; z-index: 5; min-width: 170px; }
.menu div { padding: 6px 18px; border-radius: 999px; font-size: 21px; cursor: pointer; white-space: nowrap; }
.menu div.on { background: var(--yellow); }
.list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; padding: 4px 6px 4px 2px; min-width: 520px; }
.row { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 8px; border-radius: 999px; background: var(--cream2); font-size: 21px; cursor: pointer; }
.row.on { background: var(--yellow); }
.row img { width: 46px; height: 46px; }
.row .price { margin-left: auto; color: #d08a12; }
.row.done { background: #d9f2c4; }
.row .chk { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--green); font-size: 20px; flex: none; margin-left: 4px; }
.row .prog { margin-left: auto; color: var(--brown2); font-size: 18px; white-space: nowrap; }
.close-hint { margin-top: 14px; text-align: right; font-size: 15px; color: var(--brown2); }
#mapc { border-radius: 26px; display: block; width: min(648px, 68vh); height: min(648px, 68vh); }
#panel .win.cert { text-align: center; width: min(820px, 92vw); aspect-ratio: 1280 / 840; min-width: 0; padding: 7% 9% 0; background: url('../../assets/ui/certificate.png') center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; filter: drop-shadow(0 10px 22px rgba(60, 40, 10, 0.3)); }
.cert .close-hint { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; }
.cert h1 { font-size: 46px; font-weight: normal; margin: 8px 0; color: #4d9a3c; }
.cert p { font-size: 22px; line-height: 1.6; margin: 6px 0; }
.cert .seal { position: absolute; left: 82.1%; top: 65.3%; width: 12%; aspect-ratio: 1; display: grid; place-items: center; color: #b3332a; font-size: 26px; transform: rotate(-10deg); }

/* ---------- 타이틀·읽는 중 */
#title { position: absolute; inset: 0; pointer-events: auto; background: linear-gradient(#8fd0ff, #d9f4ff 55%, #bfe89a); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 26vh; transition: opacity 0.6s; }
#title.out { opacity: 0; pointer-events: none; }
#title .logo { font-size: min(11vw, 132px); color: #fff; text-shadow: 0 6px 0 #5aa646, 0 12px 0 rgba(60, 110, 40, 0.35), 0 0 30px rgba(255, 255, 255, 0.6); letter-spacing: 2px; animation: logoIn 0.9s cubic-bezier(0.2, 1.5, 0.4, 1); text-align: center; line-height: 1.05; }
#title .logo img { width: min(64vw, 820px); filter: drop-shadow(0 10px 18px rgba(40, 80, 30, 0.35)); }
#title .logo small { display: block; font-size: 0.24em; letter-spacing: 6px; color: #fffbe6; text-shadow: 0 3px 0 #5aa646; margin-top: 10px; }
@keyframes logoIn { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
#title .btns { margin-top: 2vh; display: flex; flex-direction: column; gap: 12px; align-items: center; }
#title .btn { font-size: 28px; padding: 10px 54px; border-radius: 999px; background: var(--cream); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.12s, background 0.12s; min-width: 280px; text-align: center; }
#title .btn.on, #title .btn:hover { background: var(--yellow); transform: scale(1.06); }
#title .note { position: absolute; bottom: 18px; font-size: 14px; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 3px rgba(40, 70, 40, 0.8); text-align: center; line-height: 1.6; }
#title .bar { width: 320px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); margin-top: 6vh; overflow: hidden; }
#title .bar i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 999px; transition: width 0.2s; }
#title .tip { margin-top: 12px; color: #fff; text-shadow: 0 1px 3px rgba(40, 70, 40, 0.7); font-size: 18px; }
#fade { position: absolute; inset: 0; background: #fff8e4; opacity: 0; transition: opacity 0.45s; }
#fade.on { opacity: 1; }
#photo { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); font-size: 17px; }