/*
  Global styles for the ReadQuest unified platform.

  The design favors clean lines, calm colours and clear hierarchy.  Feel free to customize
  variables at the top of the file to change the theme.
*/

:root {
  /* Dark academia palette and typography inspired by the ReadQuest vertical slice */
  --bg: #0e0a18;       /* deep background */
  --card: #1a1330;     /* dark card surface */
  --primary: #c9a227;  /* gold accent */
  --secondary: #f0cb52;/* bright gold */
  --text: #f4e9d0;     /* parchment text */
  --muted: #ecdcb8;    /* muted parchment */
  --success: #5fae5f;  /* green for success */
  --warning: #f1c40f;  /* yellow for caution */
  --danger: #c0392b;   /* red for errors */
  --font-stack: 'Spectral', Georgia, serif;
  --font-display: 'Cinzel', Georgia, serif;
  --font-fancy: 'Cinzel Decorative', Georgia, serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-stack);
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--secondary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header {
  background: var(--card);
  color: var(--primary);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(201,162,39,.4);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

header h1 {
  margin: 0;
  font-size: 1.6rem;
  font-family: var(--font-display);
}

nav {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

nav a {
  color: var(--secondary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem;
}

.card {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  color: var(--text);
}

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  color: var(--bg);
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(240,203,82,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(240,203,82,.6), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dashboard */
.dashboard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  background: var(--card);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 1px solid rgba(201,162,39,.35);
}

.stat-card h2 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--secondary);
  font-family: var(--font-display);
}

.stat-card p {
  margin: 0.6rem 0 0 0;
  color: var(--muted);
}

/* Quest map */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.realm-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
  color: var(--text);
}

/* Highlight the recommended starting realm determined by the placement test */
.realm-card.recommended {
  border: 2px solid var(--secondary);
  box-shadow: 0 0 14px rgba(240,203,82,0.5);
}

.realm-card h3 {
  margin-top: 0;
  color: var(--secondary);
  font-family: var(--font-display);
}

.realm-card p {
  flex: 1;
  margin-bottom: 1rem;
  color: var(--muted);
}

.realm-status {
  font-family: var(--font-display);
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}

.locked {
  color: var(--danger);
}

.completed {
  color: var(--success);
}

/* Gradebook */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

th, td {
  padding: 0.6rem;
  text-align: left;
}

th {
  background: var(--card);
  color: var(--secondary);
  border-bottom: 1px solid rgba(201,162,39,.35);
  font-family: var(--font-display);
}

tr:nth-child(even) td {
  background: #131021;
}

/* Leaderboard & Trophies */
.leaderboard,
.trophies {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trophy-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 1px solid rgba(201,162,39,.35);
}

.trophy-icon {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--bg);
}

.trophy-item.locked {
  opacity: 0.5;
}

/* Profile */
.profile-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-form input[type="text"] {
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(201,162,39,.35);
  background: var(--card);
  color: var(--text);
}

.profile-form button {
  align-self: flex-start;
}

/* Realm iframe wrapper */
.realm-wrapper {
  position: relative;
  min-height: 80vh;
}

iframe {
  width: 100%;
  min-height: 80vh;
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

/* Completion bar at bottom of realm page */
.complete-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  color: var(--text);
  padding: 1rem;
  border-radius: 8px;
}

/* Pretest styles */
.progress-track {
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.35);
  margin: 0.5rem 0 1rem;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 8px;
  transition: width 0.6s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 12px var(--primary);
}
.pretest-options {
  display: flex;
  flex-direction: column;
}
.pretest-option {
  width: 100%;
  margin-bottom: 0.6rem;
}

/* Supabase authentication panel */
.auth-panel {
  max-width: 1100px;
  margin: 0.75rem auto 0;
  padding: 0.85rem 1rem;
  background: rgba(26, 19, 48, 0.92);
  border: 1px solid rgba(201,162,39,.35);
  border-radius: 14px;
  color: var(--text);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.auth-status {
  font-size: 0.95rem;
  color: var(--muted);
}
.auth-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.auth-controls input {
  min-width: 190px;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,.35);
  background: #120d22;
  color: var(--text);
  font-family: var(--font-stack);
}
.auth-controls input::placeholder {
  color: rgba(244,233,208,.62);
}
.auth-btn {
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
}
@media (max-width: 760px) {
  .auth-panel { margin-left: 1rem; margin-right: 1rem; }
  .auth-controls, .auth-controls input, .auth-controls button { width: 100%; }
}


/* Production launch page */
.launch-page {
  min-height: 100vh;
  background: #070510;
  color: var(--text);
  overflow-x: hidden;
}
.launch-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 680px at 50% -12%, rgba(240,203,82,.20), transparent 62%),
    radial-gradient(900px 620px at 84% 112%, rgba(42,94,87,.18), transparent 58%),
    linear-gradient(180deg,#0e0a18,#070510);
}
.launch-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 4rem;
}
.launch-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.launch-kicker {
  font-family: var(--font-display);
  color: var(--secondary);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
}
.launch-hero h1 {
  margin: .5rem 0 0;
  font-family: var(--font-fancy);
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: .95;
  color: var(--secondary);
  text-shadow: 0 0 30px rgba(240,203,82,.45), 0 4px 0 rgba(0,0,0,.45);
}
.launch-subtitle {
  margin-top: .8rem;
  font-family: var(--font-display);
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--muted);
}
.launch-copy {
  max-width: 740px;
  margin: 1.35rem auto 0;
  font-size: 1.15rem;
  color: var(--muted);
}
.launch-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}
.launch-link:hover { text-decoration: none; }
.launch-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.launch-feature,
.launch-panel {
  background: linear-gradient(180deg, rgba(26,19,48,.94), rgba(14,10,24,.96));
  border: 1px solid rgba(201,162,39,.35);
  border-radius: 20px;
  box-shadow: 0 28px 70px -36px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.launch-feature { padding: 1.4rem; }
.launch-feature span { font-size: 2.2rem; display: inline-block; margin-bottom: .6rem; }
.launch-feature h2,
.launch-panel h2 { margin: 0 0 .5rem; color: var(--secondary); font-family: var(--font-display); }
.launch-feature p,
.launch-panel p { color: var(--muted); }
.launch-forms {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items: start;
}
.launch-panel { padding: 1.6rem; }
.launch-form { display: grid; gap: .65rem; margin-top: 1rem; }
.launch-form.compact { margin-top: 1rem; }
.launch-form label {
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.launch-form input {
  width: 100%;
  padding: .82rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(201,162,39,.38);
  background: rgba(0,0,0,.34);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 1rem;
}
.launch-form input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(240,203,82,.18);
}
.launch-message {
  min-height: 1.4rem;
  margin-top: .75rem;
  color: var(--success) !important;
  font-weight: 600;
}
.launch-message.error { color: var(--danger) !important; }
.launch-divider { height: 1px; background: rgba(201,162,39,.25); margin: 1.25rem 0; }
.launch-note {
  margin-top: 1.3rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(201,162,39,.10);
  border: 1px solid rgba(201,162,39,.28);
  color: var(--muted);
}
.live-auth-panel .auth-controls input { display: none; }
@media (max-width: 860px) {
  .launch-card-grid,
  .launch-forms { grid-template-columns: 1fr; }
  .launch-shell { padding-top: 1.4rem; }
}