/* =========================
   RESET & BASE
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  background: #FAFAFC;
  color: #0F172A;
}

/* =========================
   LAYOUT
========================= */

.layout {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  height: 100vh;
}

/* =========================
   BUTTON
========================= */

button {
  cursor: pointer;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  font-weight: 600;

  background: linear-gradient(135deg, #FF2D8D, #7A3CFF, #00C2FF);
  color: #FFFFFF;

  transition: all 0.25s ease;
}

/* Hover biar hidup */
button:hover {
  box-shadow: 0 8px 20px rgba(255, 45, 141, 0.25);
  transform: translateY(-1px);
}

/* =========================
   SELECT / INPUT
========================= */

select {
  padding: 10px;
  border-radius: 8px;

  border: 1px solid #EEF1F6;
  background-color: #FFFFFF;

  color: #0F172A;
  cursor: pointer;

  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus state (penting biar modern) */
select:focus {
  outline: none;
  border-color: #FF2D8D;
  box-shadow: 0 0 0 3px rgba(255, 45, 141, 0.15);
}

/* =========================
   LINKS (MENU)
========================= */

.menu li a,
.menu li a:link,
.menu li a:visited {
  color: #334155;
  text-decoration: none;
  transition: color 0.2s;
}

/* Hover link */
.menu li a:hover {
  color: #FF2D8D;
}

/* =========================
   SIDEBAR EXTRA
========================= */

.sidebar-games {
  margin-bottom: 20px;
}

/* Locked state (lebih halus) */
.game-item.locked {
  opacity: 0.45;
  filter: grayscale(0.3);
  pointer-events: none;
}