/* Shared surfaces: glass panels, pills, keycaps, stars and icons. */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

/* Level 2 glass: menus, cards, overlays. */
.glass {
  border: 1px solid var(--glass-2-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--glass-2);
  box-shadow: var(--glass-2-shadow);
  -webkit-backdrop-filter: var(--glass-2-blur);
  backdrop-filter: var(--glass-2-blur);
}

/* Runic label: tracked caps for meta data. */
.eyebrow {
  margin: 0;
  color: var(--amber);
  font: 600 0.75rem/1rem var(--font-ui);
  letter-spacing: var(--tracking-label-md);
  text-transform: uppercase;
}

/* Status chip with an optional glowing orb. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  background: rgba(8, 11, 17, 0.7);
  color: var(--text);
  font: 700 0.625rem/0.875rem var(--font-ui);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pill__orb {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.pill--accent {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent) 22%, rgba(8, 11, 17, 0.7));
  color: var(--accent-bright);
}

.pill--sealed {
  color: var(--text-muted);
}

/* Keycap for control hints. */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--hairline-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-strong);
  font: 700 0.6875rem/1.125rem var(--font-ui);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Mode selector: pill options with a glowing orb on the selected one. */
.choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.choice__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem 0.625rem 0.875rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-full);
  background: rgba(8, 11, 17, 0.5);
  color: var(--text-muted);
  font: 600 0.875rem/1.25rem var(--font-ui);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.choice__option:hover,
.choice__option:focus-visible {
  border-color: var(--text-strong);
  color: var(--text-strong);
}

.choice__orb {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
}

.choice__option.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text-strong);
}

.choice__option.is-selected .choice__orb {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent-bright) 0 35%, transparent 40%);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* Item icons keep their colour wherever they appear (feedback toasts, menu, end of level). */
.icon--seed {
  color: var(--amber);
}

.icon--pouch {
  color: #d6a868; /* leather */
}

.icon--worm {
  color: #f4a3b5; /* earthworm pink */
}

.icon--chick {
  color: #fde68a; /* downy yellow */
}

.stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--text-sealed);
}

.stars .is-earned {
  color: var(--amber);
  filter: drop-shadow(0 0 4px rgba(245, 180, 66, 0.6));
}