:root {
  --moss: #3a5230;
  --moss-deep: #26361f;
  --wood: #7a5230;
  --gold: #ffd24d;
  --good: #5adf87;
  --text: #f2ead8;
  --muted: #b7a888;
  --font: 'Rajdhani', system-ui, sans-serif;
  --font-head: 'Space Grotesk', var(--font);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%; overflow: hidden;
  background: var(--moss); color: var(--text);
  font-family: var(--font); user-select: none; -webkit-user-select: none;
}

#game { position: fixed; inset: 0; }
#game canvas { display: block; touch-action: none; }
.hidden { display: none !important; }

/* ── HUD ── */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 0.6rem) 1rem 0; pointer-events: none; }
.hud-gold { display: flex; align-items: center; gap: 0.4rem;
  background: rgba(20,14,8,0.6); border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 999px; padding: 0.3rem 0.8rem; }
.hud-gold #hud-gold { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--gold); }
.coin { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid #b8860b; display: inline-block; }
.hud-left { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 62vw; }
#pot-stock { justify-content: flex-end; }
.chip { display: flex; align-items: center; gap: 0.28rem;
  background: rgba(20,14,8,0.6); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 0.22rem 0.55rem; font-weight: 700; font-size: 0.9rem; }
.chip.ref { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 6px rgba(255,255,255,0.25); }
.cdot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1.5px solid rgba(0,0,0,0.4); }
.chip.ref .cdot { border-radius: 50%; }

/* ── zentrale Feier ── */
.pop { position: fixed; z-index: 8; pointer-events: none;
  top: 34%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 9vw, 3rem);
  color: var(--gold); text-shadow: 0 0 20px currentColor; opacity: 0; white-space: nowrap; }
.pop.show { animation: pop 1s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes pop {
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.5);}
  20%{opacity:1; transform:translate(-50%,-50%) scale(1.1);}
  60%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-90%) scale(1);}
}

/* ── Toast ── */
.toast { position: fixed; z-index: 9; left: 50%; top: calc(env(safe-area-inset-top) + 4rem);
  transform: translateX(-50%) translateY(-20px); pointer-events: none;
  background: rgba(20,14,8,0.9); border: 1.5px solid var(--gold); color: var(--text);
  padding: 0.7rem 1.2rem; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
  max-width: 80vw; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Kontext-Aktion ── */
.ctx-wrap { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 1.4rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ctx-hint { background: rgba(20,14,8,0.75); color: var(--muted); font-weight: 700;
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.9rem; }
.ctx-btn { padding: 0.9rem 2rem; border: none; border-radius: 999px;
  background: linear-gradient(160deg, var(--good), #2e9e5b); color: #06140c;
  font-family: var(--font); font-weight: 900; font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,0.35); }
.ctx-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.35); }
.ctx-btn:disabled { background: linear-gradient(160deg, #7a6a52, #5a4d3a); color: rgba(255,255,255,0.6);
  box-shadow: 0 5px 0 rgba(0,0,0,0.3); cursor: default; }

/* ── Joystick ── */
.joy { position: fixed; z-index: 4; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.18);
  pointer-events: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.4); }

/* ── Upgrade-Panel ── */
.upgrades { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(10,8,4,0.6); backdrop-filter: blur(2px); }
.up-card { width: 100%; max-width: 360px; background: rgba(30,22,14,0.96);
  border: 1.5px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem; }
.up-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.3rem; }
.up-gold { display: flex; align-items: center; gap: 0.4rem; font-size: 1.1rem; color: var(--gold); }
.up-btn { padding: 0.9rem 1rem; border: 1.5px solid rgba(255,255,255,0.18); border-radius: 10px;
  background: rgba(255,255,255,0.06); color: var(--text); font-family: var(--font);
  font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; }
.up-btn:active { transform: translateY(1px); }
.up-btn:disabled { opacity: 0.45; cursor: default; }
.up-close { margin-top: 0.3rem; text-align: center; color: var(--muted); }

/* ── Screens ── */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: radial-gradient(120% 90% at 50% 25%, rgba(60,90,50,0.5) 0%, rgba(20,28,16,0.94) 72%); }
.card { width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.logo { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 16vw, 4.4rem); line-height: 0.9;
  letter-spacing: -0.02em; text-shadow: 0 0 34px rgba(90,223,135,0.4); }
.logo span { display: inline-grid; place-items: center; width: 0.95em; height: 0.95em; margin-left: 0.14em;
  border-radius: 0.24em; transform: rotate(-6deg); background: linear-gradient(160deg, var(--good), #2e7d4a);
  color: #06140c; box-shadow: 0 0 24px rgba(90,223,135,0.5); }
.tagline { color: var(--text); font-size: 1.1rem; font-weight: 700; }
.how { color: var(--muted); font-size: 0.88rem; font-weight: 600; line-height: 1.5; }
.tap-hint { margin-top: 0.5rem; color: var(--text); font-weight: 700; font-size: 1.05rem; opacity: 0.85; animation: blink 1.3s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:0.35} 50%{opacity:0.95} }
@media (prefers-reduced-motion: reduce) { .tap-hint, .pop.show { animation: none; } }

/* ── Overlay-Panels (Garten · Pflanzen · Topf · Veredelung · Bewohner) ── */
.overlay { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(10,8,4,0.6); backdrop-filter: blur(2px); }
.card-panel { width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto;
  background: rgba(30,22,14,0.97); border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 16px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.card-panel.wide { max-width: 420px; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.up-gold { display: flex; align-items: center; gap: 0.4rem; font-size: 1.05rem; color: var(--gold); }
.panel-h { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--muted); margin-top: 0.3rem; }
.muted { color: var(--muted); font-weight: 600; }
.small { font-size: 0.85rem; }

.up-btn { padding: 0.85rem 1rem; border: 1.5px solid rgba(255,255,255,0.18); border-radius: 10px;
  background: rgba(255,255,255,0.06); color: var(--text); font-family: var(--font);
  font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; }
.up-btn:active { transform: translateY(1px); }
.up-btn:disabled { opacity: 0.45; cursor: default; }
.up-btn.brew { text-align: center; background: linear-gradient(160deg, var(--good), #2e9e5b); color: #06140c; font-weight: 900; border: none; }
.up-btn.brew:disabled { background: rgba(255,255,255,0.06); color: var(--muted); }
.close-btn { margin-top: 0.2rem; text-align: center; color: var(--muted); background: none; border: none;
  font-family: var(--font); font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 0.5rem; }

.tabs { display: flex; gap: 0.4rem; }
.tab { flex: 1; padding: 0.6rem; border: 1.5px solid rgba(255,255,255,0.14); border-radius: 10px;
  background: rgba(255,255,255,0.04); color: var(--muted); font-family: var(--font); font-weight: 700; cursor: pointer; }
.tab.active { background: rgba(90,223,135,0.16); color: var(--text); border-color: rgba(90,223,135,0.5); }

.pick-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pick-btn { display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.7rem; border: 1.5px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: rgba(255,255,255,0.05); color: var(--text); font-family: var(--font); font-weight: 700;
  font-size: 0.95rem; cursor: pointer; }
.pick-btn.ref { border-color: rgba(255,255,255,0.5); }
.pick-btn small { color: var(--muted); font-weight: 700; }
.pick-btn:active { transform: translateY(1px); }

.sel-area { min-height: 3rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start;
  padding: 0.6rem; border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 12px; }
.result { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 1.6rem; }
.result em { color: var(--gold); font-style: normal; }

.list { display: flex; flex-direction: column; gap: 0.5rem; }
.book-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.6rem; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px;
  background: rgba(255,255,255,0.04); font-weight: 700; font-size: 0.92rem; }
.book-name { display: flex; align-items: center; gap: 0.35rem; }
.book-cost { color: var(--muted); font-size: 0.82rem; text-align: right; flex: 1; }
.mini-btn { padding: 0.45rem 0.7rem; border: none; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(160deg, var(--good), #2e9e5b); color: #06140c;
  font-family: var(--font); font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.mini-btn:disabled { background: rgba(255,255,255,0.08); color: var(--muted); cursor: default; }