* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #fdf6e3;
  --ink: #3a3245;
  --accent: #f4a259;
  --accent2: #8cb369;
  --danger: #e76f51;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c2733;
  font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif;
  color: var(--ink);
  user-select: none;
}

#app { position: relative; width: 100%; height: 100%; }

#game-container { position: absolute; inset: 0; }
#game-container canvas { display: block; }

/* Gemaltes Finish: weiche Vignette + feines Korn über der 3D-Szene */
#fx-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 58%, rgba(72, 42, 82, 0.22) 100%);
}

.hidden { display: none !important; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  z-index: 10;
}

#title-screen { background: transparent; }

.game-title {
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow:
    0 4px 0 #c97b2d,
    0 8px 24px rgba(40, 25, 5, 0.55);
  transform: rotate(-3deg);
  animation: titleIn 1.2s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.game-title span { color: #ffd97d; }

@keyframes titleIn {
  from { opacity: 0; transform: rotate(-3deg) translateY(-60px) scale(0.6); }
  to   { opacity: 1; transform: rotate(-3deg) translateY(0) scale(1); }
}

.hint {
  color: #fff;
  font-size: 1.05rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- Menü ---------- */
.menu { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }

.menu-btn {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: none;
  border-radius: 999px;
  padding: 0.8rem 2.6rem;
  min-width: 280px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(60, 40, 20, 0.35), 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.menu-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  background: #fff;
}
.menu-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(60,40,20,0.35); }
.menu-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.menu-note { color: #ffd0c0; font-size: 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ---------- Weltkarte ---------- */
#map-screen {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 236, 179, 0.25), transparent 60%),
    linear-gradient(160deg, #b7d9a0 0%, #8cb369 45%, #5b8c5a 100%);
}

.map-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #fff;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(70, 90, 50, 0.6), 0 6px 18px rgba(0,0,0,0.3);
  transform: rotate(-2deg);
}

#map-container {
  width: min(92vw, 960px);
  background: var(--cream);
  border-radius: 28px;
  box-shadow: 0 12px 40px rgba(30, 45, 20, 0.45), inset 0 0 0 6px rgba(160, 130, 80, 0.25);
  padding: 10px;
}
#map-container svg { display: block; width: 100%; height: auto; border-radius: 20px; }

.map-node { cursor: pointer; }
.map-node.locked { cursor: not-allowed; }
.map-node circle.ring { transition: r 0.15s; }
.map-node:not(.locked):hover circle.ring { r: 22; }

.node-pulse { animation: nodePulse 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes nodePulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.3; } }

.map-footer {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hud-left {
  position: absolute;
  top: 18px; left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-nuts {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 22, 12, 0.55);
  border-radius: 999px;
  padding: 6px 18px 6px 8px;
  color: #ffe9b3;
  font-size: 1.5rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}

.nut-icon {
  width: 28px; height: 28px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, #d9a066, #8a5a2b 70%);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255, 214, 130, 0.9);
  position: relative;
}
.nut-icon::after {
  content: "";
  position: absolute;
  top: -3px; left: 6px;
  width: 16px; height: 9px;
  border-radius: 50% 50% 20% 20%;
  background: #6b4423;
}

.hud-hearts { display: flex; gap: 6px; padding-left: 8px; }
.heart {
  width: 24px; height: 24px;
  background: var(--danger);
  clip-path: path("M12 21 C 4 15, 0 10, 0 6.5 C 0 3, 2.5 0.5, 5.5 0.5 C 8 0.5, 10.5 2, 12 4.5 C 13.5 2, 16 0.5, 18.5 0.5 C 21.5 0.5, 24 3, 24 6.5 C 24 10, 20 15, 12 21 Z");
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.heart.empty { background: rgba(255,255,255,0.25); }

.hud-right {
  position: absolute;
  top: 18px; right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.roll-label {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.key-hint { font-weight: 400; opacity: 0.75; font-size: 0.8rem; }

.roll-meter {
  width: 190px; height: 16px;
  background: rgba(30, 22, 12, 0.55);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
#roll-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4a259, #ffd97d);
  transition: width 0.1s linear;
}
#roll-fill.ready { animation: readyGlow 1.2s ease-in-out infinite; }
@keyframes readyGlow {
  0%,100% { box-shadow: 0 0 4px 1px rgba(255, 217, 125, 0.5); }
  50% { box-shadow: 0 0 12px 4px rgba(255, 217, 125, 0.95); }
}

.level-toast {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 rgba(60,40,10,0.4), 0 6px 16px rgba(0,0,0,0.4);
  animation: toastFade 3s ease forwards;
}
@keyframes toastFade {
  0% { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Pause / Complete / GameOver ---------- */
#pause-screen, #complete-screen, #gameover-screen {
  background: rgba(20, 16, 28, 0.55);
  backdrop-filter: blur(6px);
}
#pause-screen h2, #gameover-screen h2, .complete-title {
  font-size: 2.6rem;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
#gameover-screen p, #complete-screen p {
  color: #ffe9b3;
  font-size: 1.2rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ---------- Steuerungshinweis ---------- */
.controls-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  background: rgba(30, 22, 12, 0.45);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}