@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

:root {
  --bg: #fff0f6;
  --text: #503c5d;
  --btn-bg: #ffe6f2;
  --btn-text: #ff69b4;
  --border: #ff69b4;
  --accent: #ff69b4;
}

.dark-mode { --bg: #121212; --text: #fff; --btn-bg: #1e1e1e; --btn-text: #fff; --border: #333; --accent: #bb86fc; }
.light-mode { --bg: #fff; --text: #000; --btn-bg: #f0f0f0; --btn-text: #000; --border: #ccc; --accent: #1a0dab; }
.galaxy-theme { --bg: #0b0033; --text: #fff; --btn-bg: #1a0033; --btn-text: #fff; --border: #306; --accent: #f6f; }
.red-nebula-theme { --bg: #300; --text: #fff; --btn-bg: #600; --btn-text: #fff; --border: #900; --accent: #f33; }
.blue-nebula-theme { --bg: #003; --text: #fff; --btn-bg: #006; --btn-text: #fff; --border: #009; --accent: #39f; }
.bubblegum-theme { --bg: #ffe6f0; --text: #303; --btn-bg: #f9c; --btn-text: #303; --border: #f6b2; --accent: #c06; }
.forest-theme { --bg: #e6ffe6; --text: #030; --btn-bg: #9c9; --btn-text: #030; --border: #6b26; --accent: #060; }
.citrus-theme { --bg: #fffde7; --text: #426b1f; --btn-bg: #fe6; --btn-text: #fff; --border: #fa6; --accent: #70c744; }
.pastel-theme { --bg: #f0e6ff; --text: #303; --btn-bg: #c9f; --btn-text: #303; --border: #b26f; --accent: #80f; }
.coffee-theme { --bg: #f3e5d5; --text: #4b2e1e; --btn-bg: #d2b48c; --btn-text: #4b2e1e; --border: #a67c52; --accent: #8b4513; }
.super-dark { --bg: #1e1e2c; --text: #e6e6f0; --btn-bg: #2a2a42; --btn-text: #e6e6f0; --border: #7a7a9e; --accent: #9d9dc9; }

.rainbow-theme {
  --bg: #fff;
  --text: #000;
  --btn-text: #fff;
  --border: #ccc;
  --accent: #f0f;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 300% 300%;
  animation: rainbow 5s ease infinite;
}

@keyframes rainbow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: url('Nekopara-Normal-Select.cur'), auto;
  transition: background 0.4s, color 0.3s;
  overflow-x: hidden;
  margin: 0;
}

#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
}

h1 {
  color: var(--text);
  font-size: 2.2rem;
  margin: 32px 0 18px;
  letter-spacing: 1px;
}

.myButton {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 2px solid var(--border);
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow: 0 0 8px var(--border);
  transition: all 0.2s;
  cursor: url('Nekopara-Link-Select-NEW.cur'), pointer;
  text-decoration: none;
  display: inline-block;
  margin: 12px 10px 18px;
}

.myButton:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 16px var(--border);
  transform: scale(1.06);
  border-color: var(--accent);
}

.rainbow-theme .myButton {
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 300% 300%;
  animation: rainbow 5s ease infinite;
  color: #fff;
}

.rainbow-theme .myButton:hover {
  background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red);
}

.imagebutton {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  border: 2.5px solid var(--border);
  object-fit: cover;
  box-shadow: 0 0 8px var(--border);
  background: var(--btn-bg);
  transition: all 0.2s;
  margin: 6px;
  cursor: url('Nekopara-Link-Select-NEW.cur'), pointer;
}

.imagebutton:hover {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 0 24px var(--border), 0 0 36px var(--border);
  filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 4px var(--border));
}

input[type="text"],
#terminal-input {
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  width: 400px;
  max-width: 90vw;
  padding: 10px;
  border-radius: 20px;
  outline: none;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  box-shadow: 0 0 10px var(--border);
  margin-bottom: 14px;
  transition: all 0.3s;
  font-size: 16px;
}

input[type="text"]:focus,
#terminal-input:focus {
  background: var(--btn-bg);
  box-shadow: 0 0 15px var(--border);
}

input[type="text"]::placeholder,
#terminal-input::placeholder {
  color: var(--accent);
  opacity: 0.7;
}
.game-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.game-counter {
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}

.site-container {
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  h1 { font-size: 1.25rem; }
  .myButton { font-size: 14px; padding: 10px 12px; margin: 7px 4px 14px; }
  .imagebutton { width: 65px; height: 65px; }
  .game-grid { gap: 7px; }
  input[type="text"], #terminal-input { width: 90vw; font-size: 14px; }
}