/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #F8F7F2;
  color: #2A2A28;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- App shell ---------- */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* fallback for iOS 15 and older browsers */
  height: 100dvh;
  width: 100vw;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Header ---------- */
.header {
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #ECE9E1;
  background: #F8F7F2;
}
.title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1D9E75;
}
.level-indicator {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #6B6A63;
}
.icon-btn {
  width: 44px;
  height: 44px;
  margin: 0 -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #6B6A63;
  transition: background 120ms ease;
}
.icon-btn:active { background: #ECE9E1; }

/* ---------- Game area ---------- */
.game-area {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}
.grid-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
#grid-svg {
  display: block;
  border-radius: 14px;
  background: #FDFCF8;
  box-shadow: 0 1px 0 #ECE9E1, 0 8px 24px rgba(40, 38, 30, 0.04);
}

/* ---------- Cells & pipes (SVG) ---------- */
.cell-bg { fill: #FDFCF8; transition: fill 200ms ease; }
.cell-bg.source { fill: #E1F5EE; }
.cell-bg.drain { fill: #FFF3E0; }
.cell-grid { stroke: #E0DED6; stroke-width: 1; fill: none; }
.pipe {
  stroke: #C8C6BE;
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
  transition: stroke 220ms ease;
}
.pipe.connected { stroke: #1D9E75; }
.pipe.source { stroke: #0F6E56; }
.pipe.drain { stroke: #E65100; }
.pipe-group {
  transition: transform 150ms ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
.cell-tap-area { fill: transparent; cursor: pointer; touch-action: manipulation; }
.cell-bg, .cell-grid {
  transition: transform 90ms ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
.cell-group.tapping .cell-bg,
.cell-group.tapping .cell-grid {
  transform: scale(0.94);
}
.lock-icon { fill: #6B6A63; opacity: 0.35; }
.hint-pulse { animation: hintPulse 800ms ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes hintPulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.08); opacity: 0.6; }
  100% { transform: scale(1);    opacity: 1; }
}
.flow-sweep { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: flowSweep 600ms ease-out forwards; }
@keyframes flowSweep { to { stroke-dashoffset: 0; } }

/* ---------- Action bar ---------- */
.action-bar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid #ECE9E1;
  background: #F8F7F2;
}
.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #ECE9E1;
  font-size: 15px;
  font-weight: 500;
  color: #2A2A28;
  transition: transform 80ms ease, background 120ms ease;
}
.action-btn:active { transform: scale(0.97); background: #F2F0E8; }

/* ---------- Win overlay ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(248, 247, 242, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: fadeIn 250ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
  background: #FFFFFF;
  padding: 28px 32px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  animation: cardIn 350ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stars { font-size: 36px; color: #1D9E75; margin-bottom: 8px; }
.overlay-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.overlay-card p { color: #6B6A63; font-size: 14px; margin-bottom: 20px; }

/* ---------- Buttons ---------- */
.primary-btn {
  background: #1D9E75;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 80ms ease, background 120ms ease;
}
.primary-btn:active { transform: scale(0.97); background: #178561; }
.primary-btn.small { padding: 8px 16px; font-size: 14px; }
.ghost-btn { padding: 8px 12px; color: #6B6A63; font-size: 14px; }

/* ---------- Drawer ---------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 50;
  animation: fadeIn 200ms ease-out;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 320px);
  background: #FDFCF8;
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: slideIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #ECE9E1;
}
.drawer-header h2 { font-size: 17px; font-weight: 600; }
.drawer-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #ECE9E1;
  font-size: 15px;
  position: relative;
  cursor: pointer;
}
.setting-row input { display: none; }
.setting-row .switch {
  width: 42px;
  height: 26px;
  background: #D6D3C9;
  border-radius: 999px;
  position: relative;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.setting-row .switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.setting-row input:checked ~ .switch { background: #1D9E75; }
.setting-row input:checked ~ .switch::after { transform: translateX(16px); }

.setting-action {
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #ECE9E1;
  font-size: 15px;
  text-align: left;
  transition: background 120ms ease;
}
.setting-action:active { background: #F2F0E8; }
.setting-action.danger { color: #C04A2E; }

.about { margin-top: 16px; padding: 16px; }
.about h3 { font-size: 13px; color: #6B6A63; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.about p { font-size: 14px; color: #6B6A63; margin-bottom: 4px; }

/* ---------- Install banner ---------- */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  /* sit above the 56px action bar so Hint/Reset stay tappable */
  bottom: calc(56px + 12px + env(safe-area-inset-bottom));
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #ECE9E1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  font-size: 14px;
  z-index: 40;
  animation: bannerIn 350ms ease-out;
}
@keyframes bannerIn { from { transform: translateY(120%); } to { transform: translateY(0); } }
.install-actions { display: flex; gap: 6px; flex-shrink: 0; }