:root{
  --bg:#0b1222; --card:#0f172a; --text:#e8eefc; --muted:#93a1b7;
  --ring:#3b82f6; --accent:#5eead4; --tabBorder:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #14203a 0%, #0b1222 50%) no-repeat, var(--bg);
  min-height:100svh; display:flex; flex-direction:column;
}

/* Layout containers */
.container{width:min(1100px, 95%); margin:0 auto;}

/* Header bar */
header{padding:20px 0;}
.nav-box{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--tabBorder); border-radius:14px;
  padding:10px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; /* allows brand on one row and tabs/subtitle below if needed */
}
.brand img.logo{height:50px; width:auto; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

/* Tabs (center) */
.tabs{
  display:flex; align-items:center; gap:14px;
  flex-wrap:nowrap;                 /* keep tabs on one line */
  min-width:0;
}
.tab{
  padding:10px 16px; border-radius:10px; text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.2px; white-space:nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.tab:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px); }
.tab:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.tab.active{ color:#0b1222; background:linear-gradient(90deg,var(--accent),#93c5fd); }

/* Subtitle (right on wide screens; wraps below on small screens) */
.subtitle{ color:var(--muted); font-size:.95rem; white-space:nowrap }
@media (max-width: 880px){
  .subtitle{ white-space:normal; flex:1 0 100%; text-align:center; margin-top:6px }
}

/* Cards grid */
main{margin:22px auto 40px}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
}
.card{
  display:block; text-decoration:none; color:inherit; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(94,234,212,.35); box-shadow: 0 18px 36px rgba(0,0,0,.34); }
.thumb{
  aspect-ratio: 4/3; width:100%; object-fit: cover; display:block; background:#0e1628;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.card-body{ padding:12px 14px 16px; }
.title{ font-weight:800; margin:2px 0 4px; }
.desc{ color:var(--muted); margin:0; font-size:.95rem; }
.pill{ display:inline-block; margin-top:8px; font-size:.85rem; color:#0b1222;
  background:linear-gradient(90deg,var(--accent),#93c5fd); padding:6px 10px; border-radius:999px; font-weight:700; }

/* Footer */
footer{ color:var(--muted); text-align:center; padding:20px 0 28px; font-size:.9rem }

/* Accessible hidden H1 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === Disclaimer tab styling (red, no underline) === */
a.nav-disclaimer,
a.nav-disclaimer:link,
a.nav-disclaimer:visited,
a.nav-disclaimer:hover,
a.nav-disclaimer:active,
a.nav-disclaimer:focus{
  color:#ef4444 !important;
  text-decoration:none !important;
}
/* Optional chip look so it feels like a pill */
.nav-disclaimer{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}

/* ==== TEE game: strong feedback for correct / wrong ==== */
.echo-image-wrap.is-correct {
  border-color: rgba(34,197,94,.7);
  box-shadow: 0 0 0 2px rgba(34,197,94,.35) inset, 0 0 28px rgba(34,197,94,.35);
}
.echo-image-wrap.is-wrong {
  border-color: rgba(248,113,113,.75);
  box-shadow: 0 0 0 2px rgba(248,113,113,.35) inset, 0 0 28px rgba(248,113,113,.35);
}
/* Flash overlay */
.echo-flash {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .22s ease;
  background: radial-gradient(120% 120% at 50% 50%, var(--echo-flash, rgba(255,255,255,.25)) 0%, transparent 60%);
}
.echo-flash.show { opacity:1; }
/* Big center ✔ / ✖ */
.echo-signal {
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; opacity:0; transform:scale(.9);
  transition:opacity .22s ease, transform .22s ease;
  font-size: clamp(56px, 8vw, 96px); font-weight:900;
  text-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.echo-signal.show { opacity:1; transform:scale(1); }
.echo-signal.ok  { color:#34d399; }   /* green */
.echo-signal.no  { color:#f87171; }   /* red */
/* Emphasize the correct button when user picks wrong */
.echo-btn.pulse { animation: echo-pulse .6s ease 1; }
@keyframes echo-pulse {
  0%{ transform:scale(1) }
  40%{ transform:scale(1.06) }
  100%{ transform:scale(1) }
}
/* Make wrong/correct buttons pop stronger */
.echo-btn.echo-correct { background:rgba(52,211,153,.22); border-color:rgba(52,211,153,.7); }
.echo-btn.echo-wrong   { background:rgba(248,113,113,.22); border-color:rgba(248,113,113,.7); }

/* Prevent iOS Safari from auto-enlarging text (which causes wraps) */
html{ -webkit-text-size-adjust:100%; }

/* ===== Phone tweaks ===== */
@media (max-width:640px){
  /* Keep tab row tight */
  .tabs{ gap:12px; }
  .tab{ font-size:clamp(.86rem, 2.6vw, .98rem); }

  /* Smaller Disclaimer chip */
  .nav-disclaimer{
    padding:4px 8px;
    font-size:.82rem;
  }

  /* Hide subtitle on phones so tabs stay in one line */
  .subtitle{ display:none; }

  /* Optional: if you used <span class="label-extra">Read </span> inside the Disclaimer link */
  .nav-disclaimer .label-extra{ display:none; }
}

/* Extra-tight phones (e.g. 375–390px wide) */
@media (max-width:390px){
  .tabs{ gap:10px; }
  .tab{ font-size:.84rem; }
  .nav-disclaimer{ padding:3px 6px; font-size:.78rem; }
}