/* ============================================================
   Food Web Connect — styles
   เกมวิทยาศาสตร์ ห่วงโซ่/สายใยอาหาร สำหรับเด็ก 10–12 ปี
   Responsive: PC เป็นหลัก แต่ tablet/มือถือใช้ได้
   ============================================================ */

:root {
  --bg-top: #7ec8e3;
  --bg-mid: #b6e3a7;
  --bg-bottom: #6bbf59;
  --ink: #10352a;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-line: rgba(16, 53, 42, 0.12);

  --producer: #3fb950;
  --primary: #f2c94c;
  --secondary: #f2994a;
  --apex: #eb5757;

  --good: #37e07a;
  --bad: #ff6b6b;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(4, 40, 25, 0.18);
  --font: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui,
    -apple-system, "Noto Sans Thai", sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }

/* -------------------- หน้าเริ่มเกม -------------------- */
#startScreen { align-items: center; justify-content: center; padding: 16px; overflow: auto; }

.start-card {
  background: var(--panel);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 40px);
  width: min(560px, 94vw);
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.start-emojis { font-size: clamp(34px, 8vw, 54px); letter-spacing: 6px; }
.start-card h1 {
  margin: 6px 0 2px;
  font-size: clamp(28px, 6vw, 44px);
  color: #0b3d2e;
  letter-spacing: 0.5px;
}
.subtitle { margin: 0 0 14px; font-size: clamp(15px, 3.4vw, 20px); font-weight: 700; color: #1c6b4a; }
.lead { margin: 0 auto 20px; line-height: 1.7; font-size: clamp(14px, 3vw, 17px); color: #24463b; }

.level-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.lvl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 8px;
  border: 2px solid var(--panel-line);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  font-family: inherit;
}
.lvl-btn:hover, .lvl-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(4, 40, 25, 0.16);
  border-color: var(--producer);
  outline: none;
}
.lvl-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--producer); color: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 800;
}
.lvl-name { font-weight: 800; font-size: 16px; }
.lvl-desc { font-size: 12px; color: #5a7a6d; }

.how-to { margin-top: 18px; text-align: left; }
.how-to summary {
  cursor: pointer; font-weight: 800; color: #1c6b4a; padding: 8px;
  border-radius: 12px; list-style: none;
}
.how-to summary::before { content: "❔ "; }
.how-to ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.9; font-size: 14px; }

/* -------------------- HUD -------------------- */
.hud {
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(10px, 2vw, 20px);
  background: var(--panel);
  border-bottom: 1px solid var(--panel-line);
  box-shadow: 0 2px 10px rgba(4, 40, 25, 0.08);
  z-index: 5;
}
.hud-info { flex: 1; min-width: 0; }
.hud-title { font-weight: 800; font-size: clamp(15px, 3vw, 19px); color: #0b3d2e; }
.progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.progress-bar {
  flex: 1; height: 12px; max-width: 320px;
  background: rgba(16, 53, 42, 0.12); border-radius: 99px; overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--producer), var(--good));
  border-radius: 99px; transition: width 0.35s ease;
}
.progress-text { font-size: 13px; white-space: nowrap; color: #24463b; }
.progress-text b { color: var(--producer); font-size: 15px; }

.hud-actions { display: flex; align-items: center; gap: 8px; }

.pill-btn {
  font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 9px 14px; border-radius: 99px; border: none;
  background: var(--producer); color: #fff; cursor: pointer;
  box-shadow: 0 4px 10px rgba(63, 185, 80, 0.35);
  transition: transform 0.1s ease, filter 0.1s ease;
  white-space: nowrap;
}
.pill-btn:hover { filter: brightness(1.05); }
.pill-btn:active { transform: scale(0.96); }
.pill-btn.ghost {
  background: #fff; color: #1c6b4a; box-shadow: none;
  border: 2px solid var(--panel-line);
}
.pill-btn.big { font-size: 16px; padding: 12px 20px; }

.icon-btn {
  font-size: 20px; width: 42px; height: 42px; border-radius: 12px;
  border: 2px solid var(--panel-line); background: #fff; cursor: pointer;
  display: grid; place-items: center; transition: transform 0.1s ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.muted { opacity: 0.5; }

/* -------------------- Stage (สนามเล่น) -------------------- */
.stage-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none; /* กันหน้าจอเลื่อนตอนลาก */
}

.edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.edge-line {
  stroke: var(--good); stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(55, 224, 122, 0.9));
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: drawIn 0.45s ease forwards;
}
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.temp-line { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 8; opacity: 0.9; }
.edge-flash-bad {
  stroke: var(--bad); stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.9));
  animation: flashBad 0.6s ease forwards;
}
@keyframes flashBad { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

.nodes { position: absolute; inset: 0; z-index: 2; }

.node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(58px, 9vw, 88px);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.node:active { cursor: grabbing; }
.node .bubble {
  width: clamp(52px, 8vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(26px, 4.6vw, 42px);
  background: #fff;
  border: 4px solid var(--lvl-color, #ccc);
  box-shadow: 0 6px 14px rgba(4, 40, 25, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.node:hover .bubble { transform: scale(1.07); }
.node .label {
  font-size: clamp(11px, 2.2vw, 14px);
  font-weight: 800;
  color: #0b3d2e;
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 2px 5px rgba(4, 40, 25, 0.12);
}
.node.selected .bubble {
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(55, 224, 122, 0.5), 0 6px 14px rgba(4, 40, 25, 0.25);
}
.node.hint-pulse .bubble { animation: hintPulse 0.8s ease 3; }
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(4, 40, 25, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(242, 201, 76, 0.6), 0 6px 14px rgba(4, 40, 25, 0.25); }
}

/* สีตามลำดับขั้นในระบบนิเวศ */
.node.producer  { --lvl-color: var(--producer); }
.node.primary   { --lvl-color: var(--primary); }
.node.secondary { --lvl-color: var(--secondary); }
.node.apex      { --lvl-color: var(--apex); }

/* -------------------- Status + Legend -------------------- */
.status-msg {
  margin: 6px 0 0; text-align: center; min-height: 22px;
  font-weight: 700; font-size: clamp(13px, 2.6vw, 16px);
  color: #10352a;
  transition: color 0.2s ease;
}
.status-msg.good { color: #1c8f4a; }
.status-msg.bad { color: #c0392b; }

.legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  padding: 8px 12px 12px;
  font-size: clamp(11px, 2.4vw, 13px); font-weight: 700; color: #10352a;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0,0,0,0.08); }
.dot.producer { background: var(--producer); }
.dot.primary { background: var(--primary); }
.dot.secondary { background: var(--secondary); }
.dot.apex { background: var(--apex); }

/* -------------------- หน้าจอชนะ -------------------- */
#winScreen { align-items: center; justify-content: center; padding: 16px; }
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.win-card {
  position: relative; z-index: 2;
  background: var(--panel); border-radius: 26px; box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 44px); width: min(520px, 94vw); text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.win-emoji { font-size: clamp(48px, 12vw, 72px); animation: pop 0.5s ease; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.win-card h2 { margin: 4px 0; font-size: clamp(26px, 6vw, 40px); color: #0b3d2e; }
.win-card p { margin: 0 0 14px; font-size: clamp(14px, 3vw, 17px); }
.win-fact {
  background: #eafcef; border: 2px dashed var(--producer);
  border-radius: 16px; padding: 14px 16px; margin: 0 0 20px;
  font-size: clamp(13px, 2.8vw, 15px); line-height: 1.6; text-align: left; color: #17573c;
}
.win-fact b { color: #0b3d2e; }
.win-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* -------------------- Responsive tweaks -------------------- */
@media (max-width: 560px) {
  .hud { flex-wrap: wrap; }
  .hud-actions .pill-btn { padding: 8px 10px; font-size: 13px; }
  .legend { gap: 6px 10px; }
}

/* จอเตี้ยมาก (มือถือแนวนอน) — ซ่อน legend ให้เหลือพื้นที่เล่น */
@media (max-height: 460px) {
  .legend { display: none; }
  .status-msg { min-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .edge-line { animation: none; stroke-dashoffset: 0; }
  .node.hint-pulse .bubble { animation: none; }
}