/* =========================================================
   COLOURS - each mood has its own background, like
   sunny vs rainy on a weather app
   ========================================================= */
:root {
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.72);
  --glass: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --radius: 22px;
}

/* Used for the page background and the mood picker buttons */
.hyped   { --bg-top: #c9980c; --bg-bottom: #4d3502; }
.happy   { --bg-top: #0f9d58; --bg-bottom: #06402b; }
.chill   { --bg-top: #2f8fe4; --bg-bottom: #0e2a5a; }
.tired   { --bg-top: #7a5cc7; --bg-bottom: #241a45; }
.annoyed { --bg-top: #d93636; --bg-bottom: #4f0e0e; }
.sad     { --bg-top: #4b5a73; --bg-bottom: #151a24; }
.hungry  { --bg-top: #f7731c; --bg-bottom: #7a1f05; }
.focused { --bg-top: #129c94; --bg-bottom: #053b38; }

/* ---------- Basics ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--text);
  background: #12131f; /* fallback before a status is set */
  background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  display: flex;
  justify-content: center;
}

/* The phone-sized column */
.app {
  width: 100%;
  max-width: 440px;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 24px 0 8px;
}

.nickname {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Big emoji with "- status text" next to it */
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 8px;
  line-height: 1.15;
}

/* The animated emoji image */
.status-emoji {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 3.5rem; /* size of the plain emoji if the animation can't load */
}

.status-label {
  font-size: 1.6rem;
  text-align: left;
}

.feels-like {
  margin: 0;
  color: var(--text-soft);
}

/* ---------- Glass cards ---------- */
.card,
.panel {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* "wide" cards take up the whole row */
.card.wide { grid-column: 1 / -1; }

.about {
  font-size: 1rem;
  line-height: 1.5;
}

.card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* stops long text from stretching the grid */
}

.card-icon { font-size: 1.5rem; }

.card-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

.card-value {
  font-weight: 700;
  font-size: 1.05rem;
  overflow-wrap: break-word;
}

/* ---------- Season stats ---------- */
.panel { padding: 18px; }

.panel h2 {
  margin: 0 0 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  font-weight: 500;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Mood picker ---------- */
/* Two rows of four buttons */
.mood-picker {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  justify-content: space-around;
  gap: 12px 8px;
}

.mood-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
  background-origin: border-box; /* colour fills right to the edge */
  cursor: pointer;
}

/* Hover: the edge turns brighter (instant, no animation) */
.mood-btn:hover { border-color: rgba(255, 255, 255, 0.7); }

/* White ring around the mood that's showing */
.mood-btn.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.mood-meaning {
  margin: 14px 0 0;
  text-align: center;
  color: var(--text-soft);
}

.mood-meaning strong { color: var(--text); }

.set-back {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #12131f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.set-back[hidden] { display: none; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-soft);
  padding: 0 4px;
}