/* === Global Reset === */
* {
  box-sizing: border-box;
}

/* === Base Elements === */
body {
  background: linear-gradient(270deg, #2a003f, #0d001a, #350040, #0d001a);
  background-size: 600% 600%;
  animation: scrollBackground 30s ease infinite;
  color: #f8f0ff;
  font-family: 'Orbitron', sans-serif;
  padding: 2rem;
}

/* === Global Cursor === */
.box, .navbar, .main-content {
  cursor: default;
}

/* === Navbar === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d001a;
  border-bottom: 3px solid #c84fff;
  box-shadow: 0 0 15px #c84fff88;
  padding: 0.5rem 1rem;
  margin: 0;
}

.navbar .logo {
  font-size: 1.4rem;
  font-weight: bold;
  color: #00ffe6;
  text-shadow: 0 0 10px #00ffe6, 0 0 20px #00ffe655;
  font-family: 'Orbitron', sans-serif;
}

.navbar nav a {
  margin-left: 2rem;
  text-decoration: none;
  color: #c84fff;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 5px #c84fff;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar nav a:hover {
  color: #00ffe6;
  text-shadow: 0 0 10px #00ffe6, 0 0 20px #00ffe655;
}

/* === Responsive Navbar === */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar nav {
    margin-top: 1rem;
  }

  .navbar nav a {
    margin: 0.5rem 1rem 0 0;
  }
}

/* === Background === */
.background {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #1a001f;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.background::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('images/stars.png');
  background-size: 10%;
  background-repeat: repeat;
  background-position: top left;
  opacity: 0.08;
  animation: pan 120s linear infinite;
  z-index: -2;
}

/* === Container === */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

.container {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  padding-top: 30px;
  margin: 0 auto;
}

@media (max-width: 1000px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .container { grid-template-columns: 1fr; }
}

/* === Neon Boxes === */
.box {
  background: #1a1a1a;
  border: 5px solid #c84fff;
  border-left-color: #00ffe6;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 0 12px #c84fff, 0 0 24px #c84fff55, -6px 0 12px #00ffe6;
  transition: transform 0.2s ease;
}

.box h1 {
  color: #00ffe6;
  text-shadow: 0 0 8px #00ffe6;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.box h4 {
  color: #00ffe6;
  text-shadow: 0 0 8px #00ffe6;
  margin-bottom: 1rem;
}

.box p {
  color: #d4faff;
  text-shadow: 0 0 6px #00ffe6;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.box ul,
.box ol {
  list-style: disc inside;
  padding-left: 0;
  margin: 0 0 1rem 0;
}

.box li {
  color: #d4faff;
  margin-bottom: 0.5rem;
  line-height: 1.6;
  text-shadow: 0 0 6px #00ffe6;
}

/* === Buttons === */
.button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  font-size: 1rem;
  text-decoration: none;
  color: #0d0d0d;
  background: #00ffe6;
  border: 2px solid #00ffe6;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 12px #00ffe6, 0 0 24px #00ffe680;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #00cfc9;
  transform: scale(1.03);
}

.button:active {
  background: #6bfff0;
  transform: scale(0.97);
}

/* Button Variants */
.button.youtube {
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
  box-shadow: 0 0 12px #ff0000, 0 0 24px #ff000080;
}
.button.youtube:hover { background: #cc0000; }
.button.youtube:active { background: #ff4d4d; }

.button.twitch {
  background: #9146ff;
  border-color: #9146ff;
  box-shadow: 0 0 12px #9146ff, 0 0 24px #9146ff80;
}
.button.twitch:hover { background: #7c3aed; }
.button.twitch:active { background: #b88cff; }

.button.steam {
  background: #1b2838;
  border-color: #1b2838;
  color: #ffffff;
  box-shadow: 0 0 12px #66c0f4, 0 0 24px #66c0f480;
}
.button.steam:hover { background: #2a475e; }
.button.steam:active { background: #3c6e91; }

.button.tetrio {
  background: #39ff14;
  border-color: #39ff14;
  box-shadow: 0 0 12px #39ff14, 0 0 24px #39ff1480;
  color: #0d0d0d;
}
.button.tetrio:hover { background: #2fe600; }
.button.tetrio:active { background: #7fff6b; }

/* === Tetr.io Stats === */
.tetrio-stats {
  font-family: 'VT323', monospace, Courier, monospace;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(57, 255, 20, 0.08);
  border: 2px solid #39ff14;
  border-radius: 10px;
  box-shadow: 0 0 12px #39ff14, 0 0 20px #39ff1480;
  text-align: left;
}

.tetrio-stats ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tetrio-stats li {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: #ccffdd;
  text-shadow: 0 0 5px #39ff14;
}

.tetrio-stats .label {
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 5px #39ff14;
}

.tetrio-stats .value {
  color: #39ff14;
  font-weight: bold;
  text-shadow: 0 0 6px #39ff14;
}

/* === Github button === */

.button.github {
  background: #24292e; /* GitHub dark gray */
  border-color: #6cc644; /* GitHub green */
  color: #cdd9e5;
  box-shadow: 0 0 12px #6cc644aa, 0 0 24px #6cc64455;
}

.button.github:hover {
  background: #2ea44f; /* brighter GitHub green on hover */
  border-color: #2ea44f;
  color: #ffffff;
  box-shadow: 0 0 16px #2ea44fcc, 0 0 32px #2ea44f99;
}

.button.github:active {
  background: #1b5e20;
  border-color: #1b5e20;
  color: #d4faff;
  box-shadow: 0 0 8px #1b5e20cc, 0 0 16px #1b5e2099;
}

/* Images */
img{
  height: 1.2em; 
  vertical-align: middle; 
  margin-left: 8px; 
  position: relative; 
  top: 5px;
}

/* === Animations === */
@keyframes scrollBackground {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% -50%; }
}

/* === CRT Filter === */
@keyframes flicker {
  0%   { opacity: 0.27861; }
  5%   { opacity: 0.34769; }
  10%  { opacity: 0.23604; }
  15%  { opacity: 0.90626; }
  20%  { opacity: 0.18128; }
  25%  { opacity: 0.83891; }
  30%  { opacity: 0.65583; }
  35%  { opacity: 0.67807; }
  40%  { opacity: 0.26559; }
  45%  { opacity: 0.84693; }
  50%  { opacity: 0.96019; }
  55%  { opacity: 0.08594; }
  60%  { opacity: 0.20313; }
  65%  { opacity: 0.71988; }
  70%  { opacity: 0.53455; }
  75%  { opacity: 0.37288; }
  80%  { opacity: 0.71428; }
  85%  { opacity: 0.70419; }
  90%  { opacity: 0.7003; }
  95%  { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@keyframes textShadow {
  0%   { text-shadow: 0.3px 0 rgba(0,30,255,0.4), -0.3px 0 rgba(255,0,80,0.25), 0 0 2.5px; }
  50%  { text-shadow: 2px 0 rgba(0,30,255,0.4), -2px 0 rgba(255,0,80,0.25), 0 0 2.5px; }
  100% { text-shadow: 1.6px 0 rgba(0,30,255,0.4), -1.6px 0 rgba(255,0,80,0.25), 0 0 2.5px; }
}

.crt::after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt {
  animation: textShadow 4s ease-in-out infinite;
}

.settings-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
}

.settings-dropdown button {
  background: transparent;
  border: none;
  color: #c84fff;
  font-size: 1rem;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
}

.settings-dropdown button:focus {
  outline: none;
  box-shadow: none;
}

.settings-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 125%;
  right: 0;
  background: #0d001a;
  border: 1px solid #c84fff;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  min-width: 160px;
  box-shadow: 0 0 10px #c84fff88;
  z-index: 1500;
}

.settings-dropdown .dropdown-menu label {
  color: #f8f0ff;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.settings-dropdown .dropdown-menu input[type="checkbox"] {
  margin-right: 0.5rem;
  cursor: pointer;
}

/* Show dropdown when button is active */
.settings-dropdown.open .dropdown-menu {
  display: block;
}

/* === KILL THE POWER MODE === */
html.kill-power body,
body.kill-power {
  animation: none !important;
  background: #111 !important;
  background-size: auto !important;
  color: #ccc !important;
  transition: background 0.5s ease, color 0.5s ease;
}
body.kill-power .background {
  background-color: #111 !important;  /* or #000 for pure black */
}

body.kill-power .background::after {
  animation: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

body.kill-power .navbar {
  background: #222 !important;
  border-color: #555 !important;
  box-shadow: none !important;
}

body.kill-power .navbar .logo,
body.kill-power .navbar nav a {
  color: #999 !important;
  text-shadow: none !important;
}

body.kill-power .box {
  border-color: #444 !important;
  box-shadow: none !important;
  background: #222 !important;
  color: #ccc !important;
}

body.kill-power .box h1,
body.kill-power .box h4,
body.kill-power .box p,
body.kill-power .box li {
  color: #ccc !important;
  text-shadow: none !important;
}

body.kill-power .button {
  box-shadow: none !important;
  background: #555 !important;
  border-color: #666 !important;
  color: #ccc !important;
  transition: background 0.3s ease;
}

body.kill-power .button:hover {
  background: #444 !important;
  color: #eee !important;
}

body.kill-power .tetrio-stats {
  background: #222 !important;
  border-color: #555 !important;
  box-shadow: none !important;
  color: #ccc !important;
  text-shadow: none !important;
}

body.kill-power .tetrio-stats ul,
body.kill-power .tetrio-stats li,
body.kill-power .tetrio-stats .label,
body.kill-power .tetrio-stats .value {
  color: #ccc !important;
  text-shadow: none !important;
}

body.kill-power .tetrio-stats img {
  filter: grayscale(100%) brightness(70%) !important;
}

body.kill-power .crt {
  animation: none !important;
}

body.kill-power .crt::after,
body.kill-power .crt::before {
  display: none !important;
}

/* === Settings dropdown visible but muted === */
body.kill-power .settings-dropdown button {
  color: #ccc !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.kill-power .settings-dropdown .dropdown-menu {
  background: #222 !important;
  border-color: #555 !important;
  box-shadow: none !important;
  color: #ccc !important;
}

body.kill-power .settings-dropdown .dropdown-menu label {
  color: #ccc !important;
  text-shadow: none !important;
}

body.kill-power .settings-dropdown .dropdown-menu input[type="checkbox"] {
  accent-color: #666 !important;
}

/* Optional smaller button style for Kill the Power button */
.button.small {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  margin-top: 1rem;
  width: 8rem;
  border: 2px solid #aaa;        /* solid neutral border */
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}