* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Theme colors; mascots.css changes them per difficulty. Registered so they animate. */
@property --glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #2f7cf6; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 60% at 50% 0%, var(--glow), transparent 70%) fixed, #111;
  transition: --glow 0.6s, --accent 0.6s;
  color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Phone-sized column, centered on desktop */
.phone {
  max-width: 400px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 20px;
}

.screen { display: flex; flex-direction: column; gap: 16px; }
.screen.center { align-items: center; text-align: center; padding-top: 48px; }

h1, h2, h3 { margin: 0; }
.muted { color: #9a9a9a; margin: 0; }
.error { color: #ff6b61; margin: 0; min-height: 1em; font-size: 14px; }
.btn:disabled { opacity: 0.6; cursor: wait; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #ccc; }
input, select {
  padding: 12px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #1d1d1d;
  color: #f5f5f5;
  transition: border-color 0.6s;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: 13px; color: #9a9a9a; min-height: 1em; }
body[data-difficulty="hard"] .hint { color: #ff6b61; }

.btn {
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: #fff; }

/* Caller avatar with pulsing ring while ringing */
.avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #2a2a2a;
  display: grid;
  place-items: center;
  font-size: 44px;
  margin: 24px 0 8px;
}
.avatar.ringing { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
  100% { box-shadow: 0 0 0 28px rgba(52, 199, 89, 0); }
}

.timer { font-size: 20px; margin: 0; font-variant-numeric: tabular-nums; }

.call-actions { display: flex; gap: 64px; margin-top: 80px; }
.round {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}
.round.green { background: #34c759; }
.round.red   { background: #ff3b30; }
.round.gray  { background: #3a3a3a; }
.round.gray.on { background: #f5f5f5; color: #111; }

/* Recap */
.badge {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  background: #3a3a3a;
}
.badge.pass { background: #34c759; color: #06260f; }
.badge.fail { background: #ff3b30; color: #fff; }
.badge.caution { background: #ffcc00; color: #2b2200; }

#flags-section h3, #tips-section h3 { margin-bottom: 10px; }

/* Red flags as chips */
.flag-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flag-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  background: #2a1a1a;
  border: 1px solid #5a2a2a;
  color: #ffb4ae;
  font-size: 14px;
  line-height: 1.3;
}
.flag-chips li::before { content: "🚩 "; }

/* One card per tip: do on top, don't below */
.tip-cards { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tip-cards li { padding: 12px 14px; border-radius: 12px; background: #1d1d1d; font-size: 14px; line-height: 1.45; }
.tip-cards p { margin: 0; }
.tip-cards p + p { margin-top: 6px; color: #c9c9c9; }

.next-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.btn.secondary { background: #262626; color: #f5f5f5; }
a.btn { text-align: center; text-decoration: none; }

ul { margin: 0; padding-left: 20px; line-height: 1.5; }
a { color: #6aa8ff; }