/* CodeSwitch Academy account screens (sign in, family, play). Builds on v3.css. */
[hidden] { display: none !important; }
body {
  min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(60% 70% at 72% 40%, rgba(53, 232, 245, 0.12), transparent 60%),
    radial-gradient(90% 80% at 70% 40%, #12304a 0%, #0a1a2c 45%, var(--navy-900) 100%) fixed;
}
body::before {               /* faint dotted grid, like the coding space */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(127, 246, 255, 0.07) 1px, transparent 1.5px) 0 0 / 28px 28px;
}
.nav { position: relative; }
.nav .who { color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.nav .who b { color: var(--text); font-weight: 600; }
button.link { background: none; border: 0; color: var(--cyan-soft); font: 600 15px Poppins, sans-serif; cursor: pointer; padding: 6px 4px; }
button.link:hover { color: #fff; }
h1 em, h2 em { font-style: normal; color: var(--gold); }
.demo-note {
  position: fixed; left: 12px; bottom: 12px; z-index: 50; max-width: calc(100% - 24px);
  font: 600 12px Poppins, sans-serif; letter-spacing: 0.04em; padding: 7px 12px; color: #2a1600; background: var(--gold);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* fields, matching the landing page form */
.field { display: block; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.field > span { display: block; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; height: 50px; padding: 0 14px; font: 500 16px Poppins, sans-serif; color: var(--text);
  background: rgba(3, 10, 18, 0.6); border: 1.5px solid rgba(127, 246, 255, 0.28); border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--cyan); background: rgba(3, 10, 18, 0.85); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 4px 0 16px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cyan); flex: none; }
.msg { margin-top: 14px; padding: 12px 14px; font-size: 14px; display: none; }
.msg.show { display: block; }
.msg.err { background: rgba(255, 106, 106, 0.14); color: #ffc2c2; }
.msg.ok { background: rgba(63, 191, 127, 0.15); color: #b9ffe0; }
.key[disabled] { opacity: 0.6; pointer-events: none; }
.key.full { width: 100%; }

/* ---------------------------------------------------------------- sign in */
.auth { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 24px; align-items: center;
  min-height: calc(100svh - 90px); padding: 0 clamp(16px, 5vw, 72px) 40px; }
.auth .slab { padding: 32px 32px 28px; }
.auth h1 { font-size: clamp(30px, 3.4vw, 40px); margin: 14px 0 6px; }
.auth .sub { color: var(--muted); margin: 0 0 22px; }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.tabs button {
  flex: 1; height: 42px; font: 700 15px Poppins, sans-serif; color: var(--muted); cursor: pointer; border: 0;
  background: rgba(255, 255, 255, 0.05); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.tabs button[aria-selected="true"] { background: rgba(53, 232, 245, 0.18); color: var(--cyan-soft); }
.auth .stage-wrap { position: relative; height: min(70vh, 620px); }
.auth canvas.stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.auth .small { font-size: 13.5px; color: var(--muted); margin-top: 16px; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth .stage-wrap { display: none; }
}

/* ---------------------------------------------------------------- family screen */
.family { position: relative; z-index: 1; width: min(1100px, 100% - 2 * clamp(16px, 5vw, 72px)); margin: 10px auto 60px; }
.family h1 { font-size: clamp(32px, 4vw, 48px); margin: 14px 0 6px; }
.family .sub { color: var(--muted); margin: 0 0 30px; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.kid { --cut: 14px; padding: 26px 24px 22px; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform 0.2s ease; }
.kid:hover { transform: translateY(-4px); }
.kid .face {
  width: 96px; height: 84px; display: grid; place-items: center; font-size: 40px; font-weight: 800; color: #2a1600;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); margin-bottom: 14px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12);
}
.kid h2 { font-size: 23px; margin: 0 0 2px; }
.kid .rank { color: var(--cyan-soft); font-size: 13.5px; font-weight: 600; min-height: 20px; }
.kid .meta { color: var(--muted); font-size: 13px; margin: 4px 0 16px; min-height: 19px; }
.kid .key { width: 100%; }
.kid .bars { width: 100%; display: grid; gap: 7px; margin: 0 0 16px; font-size: 12.5px; color: var(--muted); text-align: left; }
.kid .bars div { display: grid; grid-template-columns: 76px 1fr 34px; gap: 8px; align-items: center; }
.kid .bars i { display: block; height: 7px; background: rgba(255, 255, 255, 0.08); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.kid .bars i b { display: block; height: 100%; background: linear-gradient(90deg, #3fbf7f, #35e8f5); }
.kid .bars span:last-child { text-align: right; }
.kid .more { margin-top: 10px; display: flex; gap: 14px; }
.kid .more button { font-size: 13px; color: var(--muted); }
.add { --cut: 14px; --rim-col: rgba(53, 232, 245, 0.35); --fill: rgba(8, 22, 38, 0.5); padding: 26px 24px; min-height: 300px;
  display: grid; place-items: center; text-align: center; cursor: pointer; color: var(--cyan-soft); border: 0; font: 600 17px Poppins, sans-serif; }
.add::after { display: none; }
.add .plus { width: 64px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 34px; background: rgba(53, 232, 245, 0.12);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.add:hover { color: #fff; }
.colors { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.colors label input { position: absolute; opacity: 0; pointer-events: none; }
.colors label span { display: block; width: 44px; height: 38px; cursor: pointer; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); opacity: 0.55; }
.colors label input:checked + span { opacity: 1; outline: 3px solid #fff; outline-offset: -3px; }
.colors label input:focus-visible + span { opacity: 1; }
dialog.slab { color: var(--text); border: 0; width: min(440px, calc(100% - 32px)); padding: 28px 28px 24px; }
dialog::backdrop { background: rgba(2, 6, 12, 0.7); }
dialog h2 { font-size: 24px; margin: 0 0 16px; }
dialog .row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; align-items: center; }
.empty { color: var(--muted); }

/* ---------------------------------------------------------------- play */
.play { position: fixed; inset: 0; background: #000; }
.play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.play .back {
  position: absolute; z-index: 2; left: 50%; top: 10px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  font: 600 14px Poppins, sans-serif; color: var(--text); cursor: pointer; border: 0; background: rgba(5, 12, 22, 0.72);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); opacity: 0.7; transition: opacity 0.2s;
}
.play .back:hover, .play .back:focus-visible { opacity: 1; }
.play .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.play .sync { position: absolute; z-index: 2; right: 14px; top: 14px; font: 600 12px Poppins, sans-serif; color: var(--muted); opacity: 0; transition: opacity 0.4s; }
.play .sync.on { opacity: 0.8; }