:root{
  --grass:#5fb84a; --grass-d:#3f8f36; --wood:#7c5a36; --cream:#f6efe0;
  --ink:#2b2418; --line:rgba(0,0,0,.12); --gold:#e7a93c;
  --panel:#fbf6ea; --panel2:#f0e6cf;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  color:var(--ink);background:#2c3a22;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;height:100dvh;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── Topbar ── */
#topbar{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(#3d6b2b,#345f24);color:#fff;
  border-bottom:2px solid #25461a;flex:0 0 auto;z-index:30;
}
#topbar .back{color:#dff5d0;text-decoration:none;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.14);padding:6px 10px;border-radius:9px}
#topbar .brand{font-weight:800;font-size:16px;display:flex;align-items:center;gap:6px}
#topbar .brand .ic{font-size:18px}
#topbar .spacer{flex:1}
#topbar .hs{font-size:13px;opacity:.92}
#topbar .hs b{color:var(--gold)}
#topbar #helpBtn,#topbar #menuBtn{
  width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.16);
  color:#fff;font-weight:800;font-size:15px}
#topbar #helpBtn:active,#topbar #menuBtn:active{transform:scale(.94)}

/* ── Stage ── */
#app{flex:1;min-height:0;position:relative;display:flex}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#7fae5a;touch-action:none}
#game{position:absolute;inset:0;display:block}

/* ── HUD ── */
#hud{position:absolute;top:10px;left:10px;right:10px;z-index:10;pointer-events:none;display:flex;flex-direction:column;gap:7px}
.hudRow{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  background:rgba(251,246,234,.92);border:1.5px solid #d8c79c;border-radius:11px;
  padding:5px 11px;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.16);
  display:inline-flex;align-items:center;gap:5px;line-height:1
}
.pill.clock{background:rgba(40,52,80,.86);color:#fff;border-color:#2a3654}
.pill.gold b{color:#c8861f}
.pill.date b{color:var(--grass-d)}
.enWrap{display:inline-flex;align-items:center;gap:7px;background:rgba(251,246,234,.92);
  border:1.5px solid #d8c79c;border-radius:11px;padding:5px 11px;width:max-content;
  box-shadow:0 2px 6px rgba(0,0,0,.16);font-size:12px;font-weight:700}
.enBarBg{width:120px;height:10px;background:#d8cdb3;border-radius:6px;overflow:hidden}
#enBar{height:100%;width:100%;background:#5fb84a;border-radius:6px;transition:width .25s,background .25s}

/* ── Side quick buttons ── */
#sideBtns{position:absolute;top:64px;right:10px;z-index:10;display:flex;flex-direction:column;gap:8px}
#sideBtns button{
  width:46px;height:46px;border-radius:13px;font-size:22px;
  background:rgba(251,246,234,.94);border:2px solid #d8c79c;box-shadow:0 3px 8px rgba(0,0,0,.2)
}
#sideBtns button:active{transform:scale(.92)}

/* ── Hotbar ── */
#hotbar{
  position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:12;
  display:flex;gap:6px;padding:6px;background:rgba(35,28,16,.62);border-radius:14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:96%;flex-wrap:wrap;justify-content:center
}
.slot{
  position:relative;width:46px;height:46px;border-radius:11px;background:var(--panel);
  border:2px solid #cbb88a;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)
}
.slot .ic{font-size:24px;line-height:1}
.slot.on{border-color:#ffd24a;background:#fff6da;box-shadow:0 0 0 2px #ffd24a,0 2px 8px rgba(0,0,0,.3)}
.slot .ct{position:absolute;right:2px;bottom:1px;font-size:11px;font-weight:800;color:#3a6b22;
  background:#fff;border-radius:6px;padding:0 3px;line-height:1.3}
.slot .kk{position:absolute;left:3px;top:1px;font-size:9px;font-weight:800;color:#9a8a60}
.slot:active{transform:scale(.94)}

/* ── D-pad / action (모바일) ── */
#dpad{position:absolute;left:12px;bottom:64px;z-index:11;width:132px;height:132px;display:none}
.pd{position:absolute;width:44px;height:44px;border-radius:12px;background:rgba(251,246,234,.85);
  border:2px solid #cbb88a;font-size:15px;font-weight:800;color:#6b5a36;display:flex;align-items:center;justify-content:center}
.pd:active{background:#ffe9b0}
.pd.u{left:44px;top:0}.pd.d{left:44px;top:88px}.pd.l{left:0;top:44px}.pd.r{left:88px;top:44px}
#actBtn{position:absolute;right:14px;bottom:72px;z-index:11;width:64px;height:64px;border-radius:50%;
  font-size:28px;background:rgba(251,246,234,.92);border:3px solid #cbb88a;box-shadow:0 4px 10px rgba(0,0,0,.3);display:none}
#actBtn:active{transform:scale(.92)}
@media (pointer:coarse){#dpad{display:block}#actBtn{display:flex}#hotbar{bottom:8px}}

/* ── Toast / banner ── */
#toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%,12px);z-index:20;
  background:rgba(30,24,14,.92);color:#fff;padding:9px 15px;border-radius:11px;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:90%}
#toast.show{opacity:1;transform:translate(-50%,0)}
#banner{position:absolute;left:50%;top:18%;transform:translate(-50%,-14px) scale(.96);z-index:21;
  background:rgba(251,246,234,.96);color:var(--ink);padding:12px 22px;border-radius:14px;font-size:16px;font-weight:800;
  border:2px solid var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.35s;text-align:center}
#banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#bigToast{position:absolute;left:50%;top:34%;transform:translate(-50%,10px);z-index:21;
  background:linear-gradient(#f6c54a,#e7a93c);color:#3a2a10;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:800;
  box-shadow:0 5px 16px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.3s}
#bigToast.show{opacity:1;transform:translate(-50%,0)}

/* ── Modal ── */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(20,28,16,.6);display:none;
  align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.overlay.show{display:flex}
.sheet{
  background:var(--panel);border:3px solid var(--wood);border-radius:18px;width:100%;max-width:440px;
  max-height:86dvh;overflow:auto;padding:18px 18px 16px;box-shadow:0 16px 50px rgba(0,0,0,.5);
  animation:pop .22s ease
}
.sheet.small{max-width:340px}
.sheet.title{max-width:380px;text-align:center;background:linear-gradient(#fbf6ea,#eadfc4)}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:0 0 8px;font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sheet h2 .gold,.sheet h2 .gold{margin-left:auto;color:#c8861f;font-size:15px}
.sheet .sub{font-size:13px;color:#6f6450;margin:0 0 12px;line-height:1.6}
.gold{color:#c8861f;font-weight:800}

.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{flex:1;padding:8px;border-radius:10px;background:var(--panel2);font-weight:700;font-size:13px;color:#6f6450}
.tab.on{background:var(--grass);color:#fff}
.ilist,.qlist{display:flex;flex-direction:column;gap:6px}
.irow{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e6dcc2;border-radius:11px;padding:7px 10px}
.irow.off{opacity:.45}
.irow .ic{font-size:20px;width:24px;text-align:center}
.irow .nm{flex:1;font-weight:700;font-size:13.5px}
.irow .nm small{display:block;font-weight:500;color:#998c70;font-size:11px;margin-top:1px}
.irow .ct{font-size:12px;color:#7a6e54;font-weight:700}
.irow .pr{font-size:13px;font-weight:800;color:#c8861f;min-width:42px;text-align:right}
.irow .pr.done{color:#3f8f36}
.qrow{display:flex;flex-direction:column;background:#fff;border:1.5px solid #e6dcc2;border-radius:11px;padding:8px 11px}
.qrow.done{background:#eef6e6;border-color:#bcd9a8}
.qrow span{font-weight:800;font-size:14px}
.qrow small{color:#8a7d62;font-size:11.5px;margin-top:2px}

.btn{background:var(--panel2);border:2px solid #d8c79c;border-radius:11px;padding:10px 14px;font-weight:800;font-size:14px;color:var(--ink)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--grass);border-color:var(--grass-d);color:#fff}
.btn.danger{background:#e0533c;border-color:#b83c28;color:#fff}
.btn.ghost{background:#fff}
.btn.mini{padding:6px 10px;font-size:12px;border-radius:9px;margin-left:4px}
.btn.big{padding:14px;font-size:16px}
.rowBtns{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.rowBtns.col{flex-direction:column}
.rowBtns.col .btn{width:100%}
.help p{font-size:13px;line-height:1.65;margin:0 0 8px;color:#5a5040}
.help p b{color:var(--ink)}

.title .logo{font-size:30px;font-weight:900;margin:6px 0 2px;color:#3f8f36}
.title .tline{font-size:13.5px;color:#6f6450;margin-bottom:18px;font-weight:600}
.title .credits{font-size:11px;color:#998c70;margin-top:14px}