/* ===== RESET & VARIABLES ===== */
* { margin:0; padding:0; box-sizing:border-box }
:root {
  --dark1:#0a0f23; --dark2:#1f2042;
  --accent:#e0e5ec; --highlight:#ff79c6;
  --gold:#f1fa8c; --green:#50fa7b; --blue:#8be9fd;
  --orange:#ffb86c; --red:#ff5555; --font:'Segoe UI',sans-serif;
}
body {
  font-family:var(--font); color:var(--accent);
  background:linear-gradient(-45deg,var(--dark1),var(--dark2));
  background-size:400% 400%; animation:bgShift 30s ease infinite;
  display:flex; justify-content:center; padding:1rem;
  touch-action: manipulation; /* Prevents zooming on double-tap */
  -webkit-user-select: none;  /* Disables text selection on iOS */
  user-select: none;
}
@keyframes bgShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
button { font-family:var(--font); cursor:pointer }
a { color:var(--highlight); text-decoration:none }
a:hover { text-decoration:underline }

/* ===== WRAPPER ===== */
#game {
  width:100%; max-width:1000px;
  display:grid; grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows:auto 1fr auto;
  gap:1rem;
}
header { grid-area:header; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between }
#header-left { display:flex; align-items:center; gap:1rem }
#materials-summary { display:flex; gap:.5rem; font-size:.9rem }
main { grid-area:main; display:flex; flex-direction:column; align-items:center; animation:fadeIn .5s }
footer { grid-area:footer; text-align:center; font-size:.8rem; margin-top:1rem }

/* ===== POTION AREA ===== */
#potion-container { position:relative; width:220px; height:220px; margin:1rem; animation:fadeIn .5s }
#potion {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px;
  background:url('assets/potion1.png')center/contain no-repeat;
  cursor:pointer; animation:float 3s ease-in-out infinite;
  transition:background-image .2s;
}
@keyframes float {
  0%,100% { transform:translate(-50%,-50%) }
  50% { transform:translate(-50%,-60%) }
}
.pop-effect {
  position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  background:var(--gold); opacity:0.6; animation:popAnim .5s ease-out forwards;
}
@keyframes popAnim { to { width:50%; height:50%; opacity:0 } }

/* ===== NOTIFICATIONS ===== */
.notif {
  position:absolute; left:50%; transform:translateX(-50%);
  background:var(--highlight); color:var(--dark1);
  padding:.3rem .6rem; border-radius:4px; opacity:0;
  animation:fadeInUp 3s forwards; font-weight:bold; pointer-events:none;
}
@keyframes fadeInUp {
  0%{opacity:0;transform:translate(-50%,20px)}
  10%{opacity:1;transform:translate(-50%,0)}
  80%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-20px)}
}

/* ===== TABS ===== */
.tabs { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:.5rem }
.tabs button {
  flex:1; padding:.5rem; background:var(--dark2); color:var(--accent);
  border:none; border-bottom:3px solid transparent; transition:.2s;
}
.tabs button.active {
  border-bottom-color:var(--highlight);
  filter:drop-shadow(0 0 6px var(--highlight));
}

/* ===== PANELS ===== */
.panel {
  display:none; padding:1rem; width:100%; max-width:360px;
  border-radius:6px; background:rgba(0,0,0,0.5); margin-bottom:1rem;
  animation:fadeIn .4s ease;
}
.panel.active { display:block }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ===== SECTION COLORS ===== */
#upgrades-panel{border-top:4px solid var(--green)}
#autos-panel{border-top:4px solid var(--blue)}
#craft-panel{border-top:4px solid var(--orange)}
#achieve-panel{border-top:4px solid var(--highlight)}
#daily-panel{border-top:4px solid var(--red)}
#shop-panel{border-top:4px solid var(--gold)}
#settings-panel{border-top:4px solid var(--accent)}

/* ===== BUTTONS ===== */
.btn {
  padding:.6rem 1rem; margin:.3rem;
  background:var(--dark2); color:var(--accent);
  border:2px solid var(--highlight); border-radius:4px;
  transition:transform .2s;
}
.btn:hover {
  transform:translateY(-2px);
  filter:drop-shadow(0 0 8px var(--highlight));
  animation:pulse 1.5s infinite;
}
.btn:active { transform:translateY(0); animation:none }
@keyframes pulse {
  0%,100%{box-shadow:0 0 6px var(--highlight)}
  50%{box-shadow:0 0 12px var(--highlight)}
}

/* ===== PROGRESS BARS ===== */
.progress-bar {
  width:100%; background:#333; border-radius:4px; overflow:hidden;
  height:12px; margin:.5rem 0;
}
.progress-bar>div {
  width:0%; height:100%;
  background:linear-gradient(90deg,var(--green),var(--highlight));
  animation:glowBar 2s infinite alternate;
}
@keyframes glowBar {
  from{filter:drop-shadow(0 0 5px var(--green))}
  to{filter:drop-shadow(0 0 5px var(--highlight))}
}

/* ===== DIVIDER ===== */
.divider { height:1px; background:rgba(255,255,255,0.2); margin:1rem 0 }

/* ===== MODAL ===== */
#modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center;
  z-index:10;
}
#modal {
  background:var(--dark2); padding:1.5rem; border-radius:8px;
  max-width:300px; text-align:center; color:var(--accent);
  box-shadow:0 0 12px var(--highlight);
}
#modal h3 { margin-bottom:1rem; color:var(--highlight) }
#modal .actions { margin-top:1rem; display:flex; gap:1rem; justify-content:center }
#modal .actions button { flex:1 }

/* ===== TUTORIAL ===== */
#tutorial-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:9;
}
#tutorial {
  pointer-events:auto; background:var(--dark2); padding:2rem; border-radius:8px;
  max-width:400px; text-align:center; animation:fadeIn .5s;
}
#tutorial h2 { color:var(--highlight); margin-bottom:1rem }
#tutorial p { margin-bottom:1rem }

/* ===== PAGINATION & SORT ===== */
.pagination {
  display:flex; align-items:center; gap:.5rem; justify-content:center; margin-top:.5rem;
}
.pagination button {
  padding:.3rem .6rem; font-size:1.2rem;
  background:var(--dark2); border:2px solid var(--highlight); border-radius:4px;
}
#craft-sort {
  width:100%; margin-bottom:.5rem; padding:.3rem;
  border-radius:4px; border:1px solid var(--accent);
  background:var(--dark2); color:var(--accent);
}

/* ===== MOBILE ===== */
@media(min-width:800px) {
  #game {
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
    grid-template-columns:2fr 1fr;
  }
  main { align-items:flex-start }
  aside#sidebar {
    grid-area:sidebar; display:flex; flex-direction:column; align-items:center;
  }
}