/* MVP Farm — UI styles (mobile-first) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  background: #8fc4ec;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- overlay (pass-through) ---------- */
#overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
  font-size: 15px;
}
.ui-control { pointer-events: auto; }

/* ---------- top-left cluster ---------- */
#top-left {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 8px; max-width: min(66vw, 300px);
}
#money-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(20, 28, 16, 0.72); color: #ffe9a8;
  border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  font-weight: 700; backdrop-filter: blur(4px);
}
#money-bar .money-icon { font-size: 16px; }
#money-value { font-size: 18px; color: #ffe14f; letter-spacing: 0.5px; transform-origin: center; }
#money-value.bump { animation: bump .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3); text-shadow: 0 0 14px #ffe14f; }
  100% { transform: scale(1); }
}
#machine-status {
  background: rgba(20, 28, 16, 0.55); color: #eaf6e0; padding: 6px 10px;
  border-radius: 10px; font-size: 13px; backdrop-filter: blur(4px);
}
.st-cargo { color: #ffe14f; }

/* ---------- control indicator chip (top-left) ---------- */
#control-hint {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(20, 28, 16, 0.55); color: #cfe3c2;
  padding: 5px 9px; border-radius: 10px; font-size: 12px; backdrop-filter: blur(4px);
}
#control-hint .ch-label { font-weight: 800; color: #ffe14f; letter-spacing: .4px; }
.kbd-group { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
kbd {
  display: inline-block; min-width: 21px; padding: 1px 4px; text-align: center;
  font-size: 11px; font-weight: 800; color: #fff; line-height: 1.4;
  border: 1px solid rgba(255,255,255,0.45); border-bottom-width: 2.5px;
  border-radius: 5px; background: rgba(255,255,255,0.08);
  transition: background .08s, color .08s, border-color .08s, box-shadow .08s;
}
kbd.active {
  background: #ffe14f; color: #3a2700; border-color: #fff;
  box-shadow: 0 0 8px rgba(255,225,79,0.9);
}
.kbd-group .or { color: #a8bca0; font-size: 11px; margin: 0 2px; }
#pad-ind {
  display: inline-block; padding: 1px 7px; font-weight: 800; font-size: 10.5px; letter-spacing: .5px;
  color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 5px;
  background: rgba(255,255,255,0.08); transition: background .08s, color .08s, box-shadow .08s;
}
#pad-ind.active {
  background: #ff9d5c; color: #3a2700; border-color: #fff;
  box-shadow: 0 0 8px rgba(255,157,92,0.9);
}

/* ---------- on-screen direction pad (bottom-right) ---------- */
#dpad {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 132px; height: 132px;
  pointer-events: auto; touch-action: none;
  opacity: .95;
}
.pad-btn {
  position: absolute; width: 46px; height: 46px; border: none; cursor: pointer;
  border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20, 28, 16, 0.72); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35); touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.pad-btn .key { font-size: 10px; color: #ffe14f; font-weight: 800; line-height: 1.1; }
.pad-btn .arr { font-size: 15px; line-height: 1.15; }
.pad-btn.pressed {
  background: linear-gradient(180deg, #ffd24a, #f2ab1f); color: #3a2700; border-color: #fff;
}
.pad-btn.pressed .key { color: #5a3c05; }
.pad-up    { top: 0; left: 50%; transform: translateX(-50%); }
.pad-down  { bottom: 0; left: 50%; transform: translateX(-50%); }
.pad-left  { left: 0; top: 50%; transform: translateY(-50%); }
.pad-right { right: 0; top: 50%; transform: translateY(-50%); }

#task-panel {
  background: rgba(20, 28, 16, 0.78); color: #e8f3e0;
  border-radius: 12px; padding: 8px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35); backdrop-filter: blur(4px);
}
.panel-title { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #ffe14f; margin-bottom: 6px; }
.task-row { margin-bottom: 8px; }
.task-row:last-child { margin-bottom: 2px; }
.task-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.task-reward { color: #ffe14f; font-weight: 800; }
.task-track { height: 6px; background: rgba(255,255,255,0.16); border-radius: 4px; margin: 4px 0 2px; overflow: hidden; }
.task-fill { height: 100%; background: linear-gradient(90deg, #7fd04a, #c9e83a); border-radius: 4px; }
.task-progress { font-size: 11px; color: #bcd3a8; }
.task-empty { font-size: 13px; color: #a8bca0; font-style: italic; }

/* ---------- restart (top-right) ---------- */
.icon-btn {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  background: rgba(20, 28, 16, 0.72); color: #fff; border: none; border-radius: 12px;
  padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35); backdrop-filter: blur(4px);
}
.icon-btn .icon { font-size: 20px; line-height: 1; }
.icon-btn .lbl { font-size: 11px; font-weight: 700; color: #ffe14f; }

/* ---------- switch (bottom-left) ---------- */
.switch-btn {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #f2b53c, #d98e1c); color: #3a2700;
  border: none; border-radius: 14px; padding: 10px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4); font-weight: 800;
}
.switch-btn .sw-title { font-size: 13px; }
.switch-btn .sw-sub { font-size: 12px; color: #5a3c05; }

/* ---------- turbo / boost (bottom-left, above switch) ---------- */
.boost-btn {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px);
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #565e66, #2e3338); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45); touch-action: none; user-select: none;
  overflow: hidden;
}
.boost-btn .bt-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, #ff9a5c, #e0561f);
  transition: height 0.15s linear;
}
.boost-btn .bt-ico { position: relative; z-index: 1; font-size: 17px; line-height: 1.1; }
.boost-btn .bt-lbl { position: relative; z-index: 1; font-size: 10px; font-weight: 900; letter-spacing: .5px; }
.boost-btn .bt-key { position: relative; z-index: 1; font-size: 8px; font-weight: 800; letter-spacing: 1px; opacity: 0.75; }
.boost-btn.ready { animation: boostPulse 1.1s ease-in-out infinite; }
.boost-btn.ready .bt-key { color: #ffe14f; opacity: 1; }
@keyframes boostPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
  50% { box-shadow: 0 0 16px rgba(255,170,60,0.85); }
}
.boost-btn.active {
  background: radial-gradient(circle at 40% 35%, #ffe14f, #ff8a1f);
  box-shadow: 0 0 22px rgba(255,180,60,0.95); transform: scale(1.06);
  animation: none;
}
.boost-btn.active .bt-fill { background: rgba(255,255,255,0.55); }
.st-combo { color: #ff9d5c; font-weight: 900; }

/* ---------- minimap (top-right) ---------- */
#minimap {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 88px; height: 88px;
  background: rgba(20, 28, 16, 0.6); border-radius: 12px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35); overflow: hidden;
}
#minimap canvas { width: 100%; height: 100%; display: block; }

/* ---------- floating joystick ---------- */
.joy-base {
  position: fixed; width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 60%, rgba(0,0,0,0.18) 100%);
  border: 2px solid rgba(255,255,255,0.45);
  pointer-events: none; z-index: 30;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.65), rgba(90,120,60,0.85));
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}

/* ---------- floating world texts ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.floater {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 15px; font-weight: 900; color: #ffffff;
  -webkit-text-stroke: 1.6px #000; paint-order: stroke fill;
  text-shadow: 1px 1px 0 #000; text-align: center; will-change: transform;
}
.flt-gold { color: #ffe14f; }
.flt-green { color: #8bff86; }
.flt-blue  { color: #9fd2ff; }
.flt-red   { color: #ff8f6b; font-size: 16px; }
.flt-money { color: #ffe14f; }
.flt-wheat { color: #f0d67a; }

/* ---------- growing progress bar ---------- */
.grow-bar {
  position: absolute; left: 0; top: 0; width: 74px; height: 9px;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.5);
  border-radius: 5px; overflow: hidden; will-change: transform;
}
.grow-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #6da34a, #b6e06a); }

/* ---------- task completed banner ---------- */
.task-banner {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(0.6);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; animation: pop-in 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
  transition: opacity 0.65s ease-in-out, transform 0.65s ease-in-out;
}
.task-banner.out { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
.tb-title {
  font-size: clamp(26px, 6vw, 40px); font-weight: 900; color: #ffffff;
  -webkit-text-stroke: 2.5px #000; paint-order: stroke fill;
  text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255,224,90,0.8);
}
.tb-reward {
  font-size: clamp(15px, 3.2vw, 21px); font-weight: 800; color: #ffe14f;
  -webkit-text-stroke: 1.5px #3a2700; paint-order: stroke fill;
}
@keyframes pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- reward flying to the money counter ---------- */
.reward-fly {
  position: absolute; left: 0; top: 0; font-size: 20px; font-weight: 900; color: #ffe14f;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  will-change: transform, opacity; pointer-events: none;
}

/* ---------- hint ---------- */
.hint {
  position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%); text-align: center;
  background: rgba(20, 28, 16, 0.7); color: #eef6e6; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; max-width: 90vw; backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  transition: opacity 0.7s ease; opacity: 1;
}
.hint.out { opacity: 0; }
.hint b { color: #ffe14f; }

@media (min-width: 900px) {
  #overlay { font-size: 16px; }
  .switch-btn { font-size: 15px; }
}

/* ---------- asset loading badge ---------- */
#assets-badge {
  position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: rgba(16, 22, 12, 0.72); color: #ffe9a8; font: 600 12px/1.4 system-ui, sans-serif;
  padding: 6px 12px; border-radius: 999px; pointer-events: none; animation: fadein 0.4s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- contextual action button (bottom centre) ---------- */
.ctx-btn {
  position: absolute;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 4px);
  left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #b06bff, #7b3fe0); color: #fff;
  border: 2px solid rgba(255,255,255,0.5); border-radius: 999px;
  padding: 12px 22px; font: 800 15px/1.2 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 0 18px rgba(176,107,255,0.6); animation: ctxPulse 1.3s ease-in-out infinite;
  max-width: 84vw;
}
@keyframes ctxPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(176,107,255,0.5); transform: translateX(-50%) scale(1); }
  50%      { box-shadow: 0 0 26px rgba(176,107,255,0.95); transform: translateX(-50%) scale(1.045); }
}

/* ---------- saucer power panel (fly mode) ---------- */
.ship-panel {
  position: absolute;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 72px);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.power-btn {
  position: relative;
  background: linear-gradient(180deg, #17324a, #0c1e30); color: #bfefff;
  border: 2px solid #35c8ff; border-radius: 14px;
  padding: 10px 16px; font: 800 14px/1.25 system-ui, sans-serif; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 0 14px rgba(53,200,255,0.35);
}
.power-btn small { font-size: 10px; font-weight: 600; color: #7fb6d8; }
.power-btn:active { transform: scale(0.96); }
.power-btn.cooling { opacity: 0.55; pointer-events: none; }
.power-btn .cd {
  position: absolute; top: -8px; right: -8px;
  background: #ff3b30; color: #fff; font-size: 10px; font-weight: 900;
  min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center;
  padding: 0 4px; border: 1px solid rgba(255,255,255,0.6);
}
.power-btn .cd:empty { display: none; }

/* ---------- warp flash overlay (space travel) ---------- */
#warp {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(190,220,255,0.92) 70%, rgba(150,190,255,0.85) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
#warp.on { opacity: 1; }
#warp-txt {
  font: 900 24px/1.3 system-ui, sans-serif; letter-spacing: 2px;
  color: #16223a; text-shadow: 0 1px 0 #fff; text-align: center; padding: 0 8vw;
}

/* ---------- cinematic vignette + warm grade ---------- */
#vignette {
  position: fixed; inset: 0; z-index: 25; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(20,30,60,0.18) 78%, rgba(8,12,30,0.42) 100%),
    linear-gradient(180deg, rgba(255,240,210,0.04) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 78%, rgba(30,25,60,0.10) 100%);
  mix-blend-mode: normal;
}