/* A3Tech Robotics - kid-friendly theme.
   Loaded AFTER each page's own <style>, so it overrides the old dark "terminal" look.
   To undo on a page: remove its <link href="css/kids.css">. */
:root {
  --k-ink:    #2B2A5E;   /* main text */
  --k-soft:   #5B5A9A;   /* secondary text */
  --k-purple: #8E5CF7;
  --k-green:  #2FCB6E;
  --k-red:    #FF5C6C;
  --k-yellow: #FFC233;
  --k-blue:   #3AA6FF;
  --k-font: 'Fredoka', 'Baloo 2', 'Trebuchet MS', 'Comic Sans MS', system-ui, sans-serif;
}

html { font-size: 18px; }
body {
  font-family: var(--k-font) !important;
  color: var(--k-ink) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.45) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.45) 0 9px, transparent 10px),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.35) 0 7px, transparent 8px),
    radial-gradient(circle at 22% 84%, rgba(255,255,255,.35) 0 10px, transparent 11px),
    linear-gradient(160deg, #7FD3FF 0%, #B79BFF 52%, #FFA8E0 100%) fixed !important;
  background-attachment: fixed !important;
}
button, input, a, label, select, textarea { font-family: var(--k-font) !important; }

/* ── Page titles ─────────────────────────────────────────── */
header h1, .logo h1 {
  color: #fff !important;
  letter-spacing: 1px !important;
}
header h1 { font-size: 2.8rem !important; text-shadow: 0 4px 0 #5B33C2, 0 8px 0 rgba(43,42,94,.25) !important; }
header p  { color: var(--k-ink) !important; font-size: 1rem !important; letter-spacing: 0 !important; }
.logo h1  { font-size: 2rem !important; color: var(--k-purple) !important; text-shadow: 0 3px 0 #E4D9FF !important; }
.logo p, #mode-label { color: var(--k-soft) !important; font-size: 1rem !important; }
.logo-wrap img { filter: drop-shadow(0 6px 0 rgba(43,42,94,.25)) !important; border-radius: 22px; width: 110px !important; }
.logo-click-hint { color: var(--k-ink) !important; font-size: .7rem !important; }

/* top bars on inner pages */
body > header:has(.user-info), body > header:has(.hdr-right) {
  background: rgba(255,255,255,.88) !important;
  border-bottom: 5px solid var(--k-purple) !important;
  padding: 12px 24px !important;
}
body > header:has(.user-info) h1, body > header:has(.hdr-right) h1 { font-size: 1.5rem !important; color: var(--k-purple) !important; text-shadow: 0 2px 0 #E4D9FF; }
.user-info, .hdr-right, #user-email { color: var(--k-ink) !important; font-size: .9rem !important; }
#user-email { font-weight: 600; }

/* ── Cards ───────────────────────────────────────────────── */
.card, .box, .status-card {
  background: #fff !important;
  border-width: 5px !important;
  border-style: solid;
  border-radius: 28px !important;
  box-shadow: 0 10px 0 rgba(43,42,94,.18), 0 18px 30px rgba(43,42,94,.15);
}
.card { width: 270px !important; padding: 24px 16px !important; }
.card:hover:not(.disabled) { transform: translateY(-8px) rotate(-1deg) scale(1.03) !important; }
.card-icon { font-size: 3.6rem !important; line-height: 1.1; animation: k-bob 3s ease-in-out infinite; }
.card:nth-child(even) .card-icon { animation-delay: -1.2s; }
.card h2, .card h3 { font-size: 1.35rem !important; letter-spacing: 0 !important; }
.card p { font-size: 1rem !important; color: var(--k-soft) !important; line-height: 1.5 !important; }
.welcome h2 { color: #fff !important; font-size: 2rem !important; text-shadow: 0 3px 0 var(--k-purple); }
.welcome p  { color: var(--k-ink) !important; font-size: 1.1rem !important; }
main h2 { color: var(--k-ink) !important; font-size: 1.4rem !important; letter-spacing: 0 !important; margin-bottom: 14px !important; }
.welcome h2 { margin-bottom: 6px !important; }

/* each mode keeps its own bright colour */
.card.robotc  { border-color: var(--k-purple) !important; } .card.robotc  h2, .card.robotc  h3 { color: var(--k-purple) !important; }
.card.python  { border-color: var(--k-green)  !important; } .card.python  h2, .card.python  h3 { color: #1FA553 !important; }
.card.multi, .card.battle { border-color: var(--k-red) !important; } .card.multi h2, .card.battle h3 { color: #E5394B !important; }
.card.academy { border-color: var(--k-yellow) !important; } .card.academy h2, .card.academy h3 { color: #E08A00 !important; }
.card.editor, .card.compete { border-color: var(--k-blue) !important; } .card.editor h2, .card.compete h3 { color: #1B84DB !important; }

/* ── Buttons: big, round, chunky ─────────────────────────── */
.card a, .card span, button.primary, #auth-bar a, button.logout, #auth-bar button {
  border-radius: 999px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 13px 10px !important;
  white-space: nowrap;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 0 rgba(0,0,0,.22);
  transition: transform .12s, box-shadow .12s, filter .12s !important;
  cursor: pointer;
}
.card a:hover, button.primary:hover, #auth-bar a:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); opacity: 1 !important; }
.card a:active, button.primary:active, #auth-bar a:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
.card.robotc a  { background: var(--k-purple) !important; }
.card.python a  { background: var(--k-green)  !important; }
.card.multi a, .card.battle a { background: var(--k-red) !important; }
.card.academy a { background: var(--k-yellow) !important; color: var(--k-ink) !important; }
.card.editor a, .card.compete a { background: var(--k-blue) !important; }
.card.disabled { opacity: .55; }
button.primary, #auth-bar a { background: var(--k-green) !important; }
button.primary:disabled { background: #B8B7D9 !important; box-shadow: none; }
button.logout, #auth-bar button { background: var(--k-ink) !important; padding: 8px 16px !important; font-size: .9rem !important; }
#auth-bar { font-size: 1rem !important; top: 12px !important; right: 16px !important; }
#auth-bar span { color: var(--k-ink) !important; font-weight: 600; }

/* ── Forms ───────────────────────────────────────────────── */
.box { padding: 34px 32px !important; width: min(420px, 92vw) !important; border-color: var(--k-purple) !important; gap: 16px !important; }
label { font-size: 1rem !important; color: var(--k-ink) !important; letter-spacing: 0 !important; font-weight: 600; margin-bottom: 6px !important; }
input {
  background: #F4F0FF !important; color: var(--k-ink) !important;
  border: 3px solid #CDBBFF !important; border-radius: 16px !important;
  font-size: 1.1rem !important; padding: 12px 16px !important;
}
input::placeholder { color: #9C94C9; }
input:focus { border-color: var(--k-purple) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(142,92,247,.2); }
.toggle-row, .back { font-size: 1rem !important; color: var(--k-soft) !important; }
.toggle-row a { color: var(--k-purple) !important; font-weight: 700; }
.back a { color: var(--k-soft) !important; font-weight: 600; }
.back a:hover { color: var(--k-purple) !important; }
.divider { border-top: 3px dotted #CDBBFF !important; }
.msg { font-size: 1rem !important; border-radius: 16px !important; padding: 12px 16px !important; }
.msg.error   { background: #FFE9EC !important; border: 3px solid var(--k-red) !important; color: #C21F33 !important; }
.msg.success { background: #E4FBEF !important; border: 3px solid var(--k-green) !important; color: #178A47 !important; }

/* ── Competition page ────────────────────────────────────── */
.status-card { border-color: var(--k-blue) !important; }
.status-card h2 { color: #1B84DB !important; font-size: 1.8rem !important; letter-spacing: 0 !important; }
.status-card p  { color: var(--k-soft) !important; font-size: 1.05rem !important; line-height: 1.6 !important; }
.status-icon { font-size: 4.5rem !important; animation: k-bob 3s ease-in-out infinite; }
#comp-status { background: #FFE9EC !important; border-color: var(--k-red) !important; color: #C21F33 !important; font-size: 1rem !important; padding: 8px 22px !important; letter-spacing: 0 !important; }
#comp-status.active { background: #E4FBEF !important; border-color: var(--k-green) !important; color: #178A47 !important; }

/* ── Footer + contact popup on the home page ─────────────── */
footer { color: var(--k-ink) !important; font-size: .95rem !important; opacity: .8; }
.contact-box { background: #fff !important; color: var(--k-ink) !important; border: 5px solid var(--k-purple) !important; border-radius: 28px !important; }
.contact-box .cb-brand, .contact-box .cb-row span.label { color: var(--k-soft) !important; font-size: 1rem !important; }
.contact-box .cb-row { color: var(--k-ink) !important; font-size: 1.05rem !important; }
.contact-box .cb-row a { color: var(--k-purple) !important; font-weight: 700; }
.contact-box .cb-close { color: var(--k-ink) !important; font-size: 1.6rem !important; }

@keyframes k-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@media (max-width: 600px) {
  html { font-size: 17px; }
  body > header:has(.user-info), body > header:has(.hdr-right) { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
  body > header:has(.user-info) h1, body > header:has(.hdr-right) h1 { font-size: 1.15rem !important; }
  .user-info, .hdr-right { gap: 8px !important; flex-wrap: wrap; font-size: .8rem !important; }
  header h1 { font-size: 1.8rem !important; }
  .card { width: min(320px, 92vw) !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Uniform "back to menu" button (overrides Gemini inline red styles) */
a[style*="#E74C3C"][href$="index.html"] { background: #FFC233 !important; color: #2B2A5E !important; border: none !important; border-radius: 999px !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 4px 0 rgba(43,42,94,.25) !important; text-decoration: none !important; }