:root {
  --tan: #b29370;
  --ink: #1b1512;
  --cream: #f6ead8;
  --red: #d6402b;
  --panel: rgba(27, 21, 18, 0.88);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #2e2b28; color: var(--cream);
  font-family: var(--font); -webkit-user-select: none; user-select: none; touch-action: none;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; text-align: center;
  background: rgba(246, 234, 216, .14); border: 1px solid rgba(246, 234, 216, .25); font: 700 12px var(--font);
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.stats {
  position: absolute; top: 16px; left: 16px; background: var(--panel); border-radius: 16px;
  padding: 10px 14px; min-width: 190px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.money { font-size: 26px; font-weight: 900; color: #9be37a; letter-spacing: -.01em; }
.clock { font-size: 13px; font-weight: 700; opacity: .85; margin-top: 2px; }
.energy { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.bar { flex: 1; height: 9px; border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: #f2c230; border-radius: 9px; transition: width .3s; }
.bar i.low { background: var(--red); }
#minimap {
  position: absolute; top: 16px; right: 16px; width: 180px; height: 180px; border-radius: 16px;
  border: 3px solid var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.3); background: #4a4744;
  image-rendering: pixelated;
}
#objective {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: var(--panel);
  padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap;
  max-width: calc(100vw - 440px); overflow: hidden; text-overflow: ellipsis;
}
#objective.urgent { background: var(--red); animation: pulse .6s ease-in-out infinite; }
#prompt {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--cream); color: var(--ink); padding: 10px 18px; border-radius: 999px;
  font-weight: 900; font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
#toasts { position: absolute; left: 16px; top: 132px; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast {
  background: var(--panel); padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: tin .25s ease-out; transition: opacity .4s, transform .4s;
}
.toast.out { opacity: 0; transform: translateX(-12px); }
#help {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700;
  background: rgba(27,21,18,.6); padding: 6px 12px; border-radius: 999px; white-space: nowrap; opacity: .85;
}
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.05); } }

/* ---------- menus ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
#menu { background: rgba(10, 8, 6, .45); backdrop-filter: blur(3px); }
.panel {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #241d19;
  border: 2px solid rgba(246,234,216,.12); border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.ph { display: flex; gap: 12px; align-items: center; padding: 18px 18px 8px; position: sticky; top: 0; background: #241d19; }
.picon { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(246,234,216,.08); border-radius: 14px; }
.pt { flex: 1; min-width: 0; }
.ph h2 { margin: 0; font-size: 22px; font-weight: 900; }
.ph p { margin: 2px 0 0; font-size: 13px; opacity: .7; }
.hearts { color: #ff7aa2; letter-spacing: 2px; }
.x { background: rgba(246,234,216,.1); border: 0; color: var(--cream); width: 34px; height: 34px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.sec { padding: 6px 18px 4px; }
.sec h3 { margin: 8px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; }
.items { display: flex; flex-direction: column; gap: 6px; }
.item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 14px; border: 0; background: rgba(246,234,216,.06); color: var(--cream); cursor: pointer;
  transition: background .12s, transform .12s;
}
.item:hover:not(:disabled) { background: rgba(246,234,216,.14); transform: translateX(2px); }
.item:disabled { opacity: .45; cursor: default; }
.ii { font-size: 24px; width: 30px; text-align: center; }
.il { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.il b { font-size: 15px; }
.il small { font-size: 12px; opacity: .65; margin-top: 1px; }
.ir { font-weight: 900; color: #9be37a; font-size: 15px; }
.item kbd { opacity: .6; }
.pfoot { display: flex; justify-content: space-between; padding: 12px 18px 16px; font-size: 13px; font-weight: 700; opacity: .7; }

#bigmap { background: rgba(10,8,6,.75); flex-direction: column; gap: 10px; }
#bigmapCanvas { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.5); image-rendering: pixelated; }
#bigmap .hint { font-weight: 800; font-size: 13px; opacity: .8; }

/* ---------- title ---------- */
#title { background: radial-gradient(ellipse at center, rgba(178,147,112,.88), rgba(120,95,70,.96)); color: var(--ink); }
.title-card { display: flex; align-items: center; gap: clamp(16px, 5vw, 56px); max-width: 880px; }
.hero { height: min(62vh, 520px); filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.title-copy h1 { margin: 0; font-size: clamp(48px, 9vw, 96px); line-height: .9; font-weight: 900; letter-spacing: -.03em; }
.title-copy h1 span { color: var(--red); }
.title-copy p { font-size: 17px; font-weight: 600; max-width: 420px; line-height: 1.4; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.primary {
  background: var(--ink); color: var(--cream); border: 0; padding: 14px 26px; border-radius: 999px;
  font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .1s;
}
.primary:hover { transform: translateY(-2px); }
.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.controls { list-style: none; padding: 0; margin: 18px 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; font-weight: 700; }
.controls kbd { background: rgba(27,21,18,.12); border-color: rgba(27,21,18,.25); }
.handle { color: var(--ink); font-weight: 800; opacity: .7; text-decoration: none; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; }
#fade.on { opacity: 1; }

/* ---------- touch ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick {
  position: absolute; left: 24px; bottom: 28px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(27,21,18,.35); border: 2px solid rgba(246,234,216,.25); pointer-events: auto; touch-action: none;
}
#knob { position: absolute; left: 37px; top: 37px; width: 56px; height: 56px; border-radius: 50%; background: rgba(246,234,216,.85); }
.tbtns { position: absolute; right: 20px; bottom: 28px; display: grid; grid-template-columns: repeat(2, 60px); gap: 10px; pointer-events: auto; }
.tbtns button {
  width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(246,234,216,.3); background: rgba(27,21,18,.55);
  color: var(--cream); font-size: 22px; font-weight: 900; touch-action: none;
}
.tbtns .big { grid-column: span 2; width: 130px; border-radius: 30px; background: var(--red); }

@media (max-width: 720px) {
  .title-card { flex-direction: column; text-align: center; gap: 8px; }
  .hero { height: 30vh; }
  .title-copy p { margin: 8px auto; font-size: 15px; }
  .btns { justify-content: center; }
  .controls { display: none; }
  #minimap { width: 120px; height: 120px; }
  .stats { min-width: 150px; padding: 8px 12px; }
  .money { font-size: 20px; }
  #objective { top: 128px; left: 16px; transform: none; max-width: calc(100vw - 32px); font-size: 13px; }
  #objective.urgent { animation: none; }
  #prompt { bottom: 250px; }
  #help { display: none; }
  #toasts { top: 176px; }
}
@media (pointer: coarse) { #help { display: none; } #prompt { bottom: 250px; } }