:root {
  --ink: #1b140e;
  --paper: #e8dcc0;
  --paper2: #d8c8a0;
  --paperDark: #b8a47a;
  --wood: #3a2a1c;
  --wood2: #4a3726;
  --red: #b8342a;
  --gold: #e0b050;
  --text: #f1e6cc;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --hand: 'Gaegu', 'Nanum Pen Script', 'Apple SD Gothic Neo', sans-serif;
  --brush: 'East Sea Dokdo', 'Gaegu', serif;
  --slot: min(44px, calc((100vw - 26px) / 8));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #120d0a; color: var(--text); font-family: var(--hand); font-weight: 700;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none;
}
canvas#game { position: fixed; inset: 0; display: block; touch-action: none; }
button { font-family: inherit; font-weight: 700; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
[hidden] { display: none !important; }
img { -webkit-user-drag: none; }

/* 종이·나무 질감 */
.paper {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(120,90,40,0.18), transparent 50%),
    linear-gradient(180deg, #ecdfc2, #d9c79c);
  color: var(--ink); border: 3px solid var(--ink); border-radius: 14px 18px 12px 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45), inset 0 0 18px rgba(120,80,30,0.25);
}

/* ── HUD 상단 ── */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar {
  position: absolute; top: calc(8px + var(--st)); left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
#meters { display: flex; gap: 6px; pointer-events: none; }
.meter {
  position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink);
  background: #2a2018; box-shadow: 0 3px 0 rgba(0,0,0,0.5);
}
.meter .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height 0.3s; }
.meter.hp .fill { background: linear-gradient(180deg, #d8483a, #8a1e18); }
.meter.hunger .fill { background: linear-gradient(180deg, #e8a040, #9a5a1a); }
.meter.sanity .fill { background: linear-gradient(180deg, #a898c8, #4a3a6a); }
.meter.temp .fill { background: linear-gradient(180deg, #9ad0f0, #3a6a9a); }
.meter.temp.warm .fill { background: linear-gradient(180deg, #f0b070, #a0582a); }
.meter .ic { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 50% 30%; background-size: 22px 22px; opacity: 0.9; }
.meter b {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 14px; line-height: 14px; color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 0 #000;
}
.meter.warn { animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.1); box-shadow: 0 0 12px #ff5a3a; } }
.meter.hp .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z' fill='%23fff' stroke='%231b140e' stroke-width='1.6'/%3E%3C/svg%3E"); }
.meter.hunger .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13a7 6 0 0 1 14 0c0 3-3 6-7 6s-7-3-7-6z' fill='%23fff' stroke='%231b140e' stroke-width='1.6'/%3E%3Cpath d='M9 7c0-2 1-3 3-3' stroke='%231b140e' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); }
.meter.sanity .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 15c-2-1-2-5 0-6 0-3 3-5 6-4 3-1 6 1 6 4 2 1 2 5 0 6-1 3-4 4-6 3-2 1-5 0-6-3z' fill='%23fff' stroke='%231b140e' stroke-width='1.6'/%3E%3Cpath d='M12 6v11M9 9q1 2 3 2M15 12q-1 2-3 2' stroke='%231b140e' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); }
.meter.temp .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a2 2 0 0 1 4 0v10a4 4 0 1 1-4 0z' fill='%23fff' stroke='%231b140e' stroke-width='1.6'/%3E%3C/svg%3E"); }

#clockWrap { position: relative; width: 66px; text-align: center; pointer-events: none; }
#clock { width: 66px; height: 66px; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.5)); }
#seasonLabel { font-size: 13px; margin-top: 1px; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }

#sidebtns { position: absolute; top: calc(98px + var(--st)); right: 10px; display: flex; flex-direction: column; gap: 8px; }
#sidebtns button {
  width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper2);
  box-shadow: 0 3px 0 rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
#menuBtn span { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--ink); }
#mapBtn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z' fill='%23d8c8a0' stroke='%231b140e' stroke-width='1.6'/%3E%3Cpath d='M9 4v14M15 6v14' stroke='%231b140e' stroke-width='1.3'/%3E%3Cpath d='M11 11l2 2m0-2l-2 2' stroke='%23b8342a' stroke-width='1.6'/%3E%3C/svg%3E") !important; background-size: 26px 26px !important; background-repeat: no-repeat !important; background-position: center !important; }

#toasts { position: absolute; top: calc(104px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: 80%; }
.toast { padding: 5px 14px; font-size: 16px; animation: toast 3.2s ease forwards; text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px) scale(0.9); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ── HUD 하단 ── */
#bottom {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px calc(8px + var(--sb));
  background: linear-gradient(180deg, rgba(18,12,8,0), rgba(18,12,8,0.75) 22%, rgba(18,12,8,0.92));
}
#actRow { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; gap: 6px; }
#craftBtn, #ctxBtn {
  width: 62px; height: 62px; border-radius: 16px 18px 14px 17px; border: 3px solid var(--ink); background: var(--paper2); color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; line-height: 14px;
}
#ctxBtn { border-radius: 50%; }
#craftBtn:active, #ctxBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.55); }
#craftBtn i, #ctxBtn i { display: block; width: 34px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center; }
#ctxBtn:disabled { opacity: 0.45; }
#craftBtn.badge::after { content: ''; position: absolute; }
#equip { display: flex; gap: 6px; }
.slots { display: grid; grid-template-columns: repeat(8, var(--slot)); gap: 3px; justify-content: center; }
#packRow { margin-bottom: 4px; }
#packRow .slot { background-color: #4a3a22; }
.slot {
  position: relative; width: var(--slot); height: var(--slot); border-radius: 8px 9px 7px 9px; border: 2px solid var(--ink);
  background: linear-gradient(180deg, #5a4630, #3e2f20); box-shadow: inset 0 2px 5px rgba(0,0,0,0.45);
}
.slot.eq { width: 46px; height: 46px; background: linear-gradient(180deg, #6a5438, #4a3a26); }
.slot em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; color: rgba(241,230,204,0.35); }
.slot img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }
.slot .n { position: absolute; right: 2px; bottom: 0; font-size: 13px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000; pointer-events: none; }
.slot .bar { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(0,0,0,0.5); pointer-events: none; }
.slot .bar i { display: block; height: 100%; border-radius: 2px; background: #8ad060; }
.slot.fresh-mid .bar i { background: #e0c040; }
.slot.fresh-low .bar i { background: #d05030; }
.slot.fresh-low { background: linear-gradient(180deg, #5a4a26, #3e3218); }
.slot.sel { border-color: #f4d070; box-shadow: 0 0 0 2px #f4d070, inset 0 2px 5px rgba(0,0,0,0.45); }
.slot.hot img { filter: drop-shadow(0 0 4px #ff7a30); }
.slot.cold img { filter: drop-shadow(0 0 4px #7ac8ff); }

#popup {
  position: absolute; min-width: 140px; max-width: 220px; padding: 8px; z-index: 5; display: flex; flex-direction: column; gap: 5px;
}
#popup .ttl { font-size: 17px; padding: 0 4px; }
#popup .sub { font-size: 12.5px; opacity: 0.75; padding: 0 4px 3px; line-height: 1.25; font-weight: 400; }
#popup button {
  padding: 8px 10px; font-size: 16px; border: 2px solid var(--ink); border-radius: 10px; background: #f4ead0; text-align: left; color: var(--ink);
}
#popup button:first-of-type { background: #f8e2a8; }
#popup button:active { background: #e8d090; }

#contPanel { position: absolute; left: 50%; transform: translateX(-50%); padding: 8px 10px 10px; text-align: center; }
#contPanel .ttl { font-size: 17px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#contPanel .ttl button { font-size: 20px; line-height: 20px; width: 28px; height: 28px; }
#contPanel .grid { display: grid; gap: 3px; justify-content: center; }
#contPanel .cook { margin-top: 8px; padding: 6px 14px; font-size: 16px; border: 2px solid var(--ink); border-radius: 10px; background: #f8e2a8; color: var(--ink); }
#contPanel .cook:disabled { opacity: 0.5; }
#contPanel .hint { font-size: 12px; font-weight: 400; margin-top: 4px; opacity: 0.75; }

#placeBar { position: absolute; left: 12px; right: 12px; bottom: calc(190px + var(--sb)); text-align: center; z-index: 4; }
#placeBar .msg { font-size: 18px; text-shadow: 0 1px 3px #000, 0 0 6px #000; margin-bottom: 8px; }
#placeBar .btns { display: flex; gap: 10px; justify-content: center; }
.pbtn {
  padding: 10px 18px; font-size: 18px; border: 3px solid var(--ink); border-radius: 14px; background: #f8e2a8; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,0.5);
}
.pbtn.ghost { background: var(--paper2); }
.pbtn:disabled { opacity: 0.5; }
.pbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.5); }

/* ── 시트 (제작·메뉴·지도·타이틀) ── */
#sheet { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#sheet > * { pointer-events: auto; }
.dim { position: absolute; inset: 0; background: rgba(8,5,3,0.55); animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.panel {
  position: absolute; left: 8px; right: 8px; bottom: calc(8px + var(--sb)); max-width: 520px; margin: 0 auto; padding: 12px; animation: up 0.22s cubic-bezier(.2,1.2,.4,1);
  display: flex; flex-direction: column; max-height: calc(100% - 90px - var(--st));
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.panel h2 { margin: 0; font-family: var(--brush); font-weight: 400; font-size: 34px; line-height: 34px; }
.panel .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.x { width: 38px; height: 38px; border: 3px solid var(--ink); border-radius: 50%; background: #f4ead0; font-size: 22px; line-height: 30px; color: var(--ink); }
.tierTag { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: rgba(27,20,14,0.12); margin-left: 8px; }
.tierTag.on { background: #f8d878; }
.tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 6px; margin: 0 -2px; scrollbar-width: none; touch-action: pan-x; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 10px; background: #d8c8a0; position: relative;
}
.tab img { width: 38px; height: 38px; margin-top: 3px; }
.tab.on { background: #f8e2a8; box-shadow: 0 0 0 2px #b8342a; }
.tab.dot::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #6ac040; border: 2px solid var(--ink); }
.tabname { font-size: 15px; margin: 0 2px 4px; opacity: 0.8; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; overflow-y: auto; touch-action: pan-y; padding: 2px; min-height: 70px; }
.rc { position: relative; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 10px; background: #efe4c8; display: flex; align-items: center; justify-content: center; }
.rc img { width: 78%; height: 78%; }
.rc.miss { background: #cfc09a; } .rc.miss img { opacity: 0.45; }
.rc.lock img { filter: brightness(0) opacity(0.35); }
.rc.lock::after { content: '?'; position: absolute; font-size: 24px; color: rgba(27,20,14,0.6); }
.rc.can { box-shadow: 0 0 0 2px #6ac040; }
.rc.proto::before { content: '💡'; position: absolute; top: -8px; right: -6px; font-size: 16px; }
.rc.on { outline: 3px solid #b8342a; outline-offset: 1px; }
.detail { border-top: 2px dashed rgba(27,20,14,0.35); margin-top: 8px; padding-top: 8px; display: flex; gap: 10px; align-items: flex-start; }
.detail .big { width: 58px; height: 58px; flex: none; background: #efe4c8; border: 2px solid var(--ink); border-radius: 10px; padding: 4px; }
.detail .big img { width: 100%; height: 100%; }
.detail .info { flex: 1; min-width: 0; }
.detail .nm { font-size: 20px; }
.detail .ds { font-size: 13.5px; font-weight: 400; line-height: 1.3; margin: 2px 0 6px; }
.need { display: flex; gap: 8px; flex-wrap: wrap; }
.need span { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.need img { width: 28px; height: 28px; }
.need .no { color: #b8342a; }
.detail .go { margin-top: 8px; width: 100%; padding: 10px; font-size: 18px; border: 3px solid var(--ink); border-radius: 12px; background: #f8e2a8; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,0.4); }
.detail .go:disabled { background: #cfc09a; opacity: 0.8; box-shadow: none; }
.detail .go.proto { background: #ffe070; }

.menuPanel { top: 50%; bottom: auto; transform: translateY(-50%); animation: fade 0.2s; max-width: 340px; gap: 8px; align-items: stretch; text-align: center; }
.mbtn { padding: 12px; font-size: 20px; border: 3px solid var(--ink); border-radius: 14px; background: #f4ead0; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,0.4); }
.mbtn.main { background: #f8e2a8; }
.mbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.toggles { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tog { padding: 6px 12px; font-size: 15px; border: 2px solid var(--ink); border-radius: 99px; background: #cfc09a; color: rgba(27,20,14,0.55); }
.tog.on { background: #f8e2a8; color: var(--ink); }

.mapPanel { top: calc(12px + var(--st)); bottom: calc(12px + var(--sb)); max-height: none; }
.mapPanel canvas { width: 100%; flex: 1; min-height: 0; border: 2px solid var(--ink); border-radius: 10px; background: #d8c8a0; object-fit: contain; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 400; margin-top: 6px; justify-content: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); margin-right: 3px; vertical-align: -1px; }

.help { overflow-y: auto; touch-action: pan-y; font-size: 15px; font-weight: 400; line-height: 1.45; text-align: left; }
.help b { font-weight: 700; }
.help h3 { margin: 10px 0 3px; font-size: 18px; }

/* ── 타이틀 ── */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(20px + var(--st)) 20px calc(20px + var(--sb)); gap: 10px; animation: fade 0.6s; }
.logo { text-align: center; margin-bottom: 18px; }
.logo h1 {
  margin: 0; font-family: var(--brush); font-weight: 400; font-size: 66px; line-height: 0.95; color: #efe2c4;
  text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255,120,40,0.35); transform: rotate(-3deg);
}
.logo p { margin: 8px 0 0; letter-spacing: 6px; font-size: 13px; color: #b8a47a; }
.logo .flame { width: 44px; height: 60px; margin: 0 auto 6px; position: relative; }
.logo .flame i { position: absolute; left: 50%; bottom: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: translateX(-50%); animation: flick 0.18s ease-in-out infinite alternate; }
.logo .flame i:nth-child(1) { width: 36px; height: 54px; background: #e86a20; filter: blur(1px); }
.logo .flame i:nth-child(2) { width: 24px; height: 38px; background: #f8b040; animation-duration: 0.23s; }
.logo .flame i:nth-child(3) { width: 12px; height: 20px; background: #fff0b0; animation-duration: 0.15s; }
@keyframes flick { to { transform: translateX(-50%) scale(0.92, 1.06); } }
.tbtn { width: 100%; max-width: 300px; padding: 13px; font-size: 22px; border: 3px solid var(--ink); border-radius: 16px 18px 14px 17px; background: var(--paper2); color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,0.6); }
.tbtn.main { background: #f8d878; }
.tbtn small { display: block; font-size: 14px; opacity: 0.7; }
.tbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.xpline { font-size: 14px; color: #b8a47a; margin-top: 6px; text-align: center; font-weight: 400; }

.chars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.chr { position: relative; padding: 6px 6px 8px; text-align: center; border: 3px solid var(--ink); border-radius: 14px; background: #d8c8a0; color: var(--ink); }
.chr img { width: 86px; height: 86px; display: block; margin: 0 auto -4px; }
.chr .nm { font-size: 20px; }
.chr .tt { font-size: 13px; opacity: 0.7; }
.chr.on { background: #f8e2a8; box-shadow: 0 0 0 3px #b8342a; }
.chr.lock img { filter: brightness(0) opacity(0.45); }
.chr.lock .tt::after { content: ' 🔒'; }
.perk { width: 100%; max-width: 420px; padding: 10px 12px; font-size: 15px; font-weight: 400; line-height: 1.35; }
.perk b { font-size: 17px; }
.stats3 { display: flex; gap: 10px; justify-content: center; font-size: 13px; margin-top: 4px; }
.stats3 span { background: rgba(27,20,14,0.1); padding: 1px 8px; border-radius: 99px; }

.death { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; animation: fade 1.2s; }
.death h1 { margin: 0; font-family: var(--brush); font-weight: 400; font-size: 60px; color: #d8c8a0; text-shadow: 3px 3px 0 #000; }
.death .cause { font-size: 20px; color: #c8a878; }
.death .card { padding: 12px 18px; width: 100%; max-width: 340px; }
.xpbar { height: 12px; border: 2px solid var(--ink); border-radius: 8px; background: #b8a47a; overflow: hidden; margin: 6px 0 2px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #e0a040, #f8d878); transition: width 1.2s ease; }
.unlock { color: #3a8a2a; font-size: 17px; margin-top: 4px; }

@media (min-width: 700px) {
  :root { --slot: 50px; }
  .slot.eq { width: 52px; height: 52px; }
}
@media (max-height: 640px) {
  .meter { width: 42px; height: 42px; } .meter b { font-size: 12px; bottom: 2px; }
  #clock { width: 56px; height: 56px; }
  #craftBtn, #ctxBtn { width: 54px; height: 54px; }
}