:root { 
--bg: #f4e9ff;
--panel: #fdf0f9;
--primary-accent:#c9a8e0;
--text:#4a3f5c;
  --purple-mid-hover: #6E51A3;
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Quicksand', sans-serif;
  --shadow-soft: 0 8px 24px rgba(75, 59, 112, 0.18);
}


body {
    background-color: var(--bg);
    text-align: center;
    font-family: system-ui;
    color: var(--text);
    padding-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}


#saved-activities-container ul {
  padding-left: 20px;
  margin: 0;
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

.card {
    background-color: var(--panel);
    border: 1px solid var(--primary-accent);
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    text-align: left;
    width: 250px;
}

#form-title {
    margin-top: 100px;
    color: var(--primary-accent);
}

.btn-primary { 
  background-color: var(--primary-accent);
  border-color: var(--text);
  color: var(--text);
}

.btn-primary:hover {
  background-color: var(--secondary-accent);
  border-color: var(--text);
}

#login-section {
    max-width: 300px;
    margin: 0 auto; 
}

.pixel-box {
    background-color: var(--panel);
    border: 1px solid var(--primary-accent);
    border-radius: 5px;
    padding: 20px;
}

.device-shell {
position: relative;
      background: linear-gradient(180deg, #9b7fc7, #6f5499)
}

.pill-accent {
    background-color: var(--primary-accent);
    border: 1px solid var(--text);
}


.device-screen {
  background-color: #DCD3EF;
  border: 3px solid var(--text);
}

.device-screen-label {
  font-family: "Press Start 2P", monospace;
  font-size: 0.7rem;
  color: var(--text);
  opacity: 0.6;
}

.device-screen-text {
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  color: var(--text);
}

.device-btn-primary {
  background-color: #ffb6d9;
  border: none;
  color: var(--text);
}
.device-btn-primary:hover { background-color: #ff9fcf; }

.device-btn-secondary {
  background-color: #b7c9d9;
  border: none;
  color: var(--text);
}

.device-btn-secondary:hover { background-color: #a3b8ca; }

.quest-item {
        background-color: var(--bg);
        border-left: 4px solid var(--primary-accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.quest-item:hover {
  background-color: var(--panel-light);
  transform: translateY(-2px);
}

.quest-title {
font-family: "VT323", monospace;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text);

}
.quest-meta {
  font-family: "VT323", monospace;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.7;
}

.dashboard-heading {
    margin-top: 40px;
  font-family: "Press Start 2P", monospace;
  font-size: 1.2rem;
  color: var(--text);
}