/* Brainy Lab Games hub: a calm night-sky game studio. Every button is at least 48px; no inline styles are needed. */
:root {
  --night-1: #1e1b4b;
  --night-2: #312e81;
  --night-3: #4338ca;
  --ink: #f8fafc;
  --ink-soft: #c7d2fe;
  --glass: rgba(255, 255, 255, 0.1);
  --glass-line: rgba(255, 255, 255, 0.22);
  --paper: #ffffff;
  --paper-ink: #1e1b4b;
  --pink: #ec4899;
  --teal: #14b8a6;
  --gold: #fbbf24;
  --focus: #fde047;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: linear-gradient(170deg, var(--night-1) 0%, var(--night-2) 55%, #4c1d95 100%);
  background-attachment: fixed;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
  padding: 0 max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Night sky: soft aurora glows and twinkling stars, all CSS */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(236, 72, 153, 0.28), transparent 38%),
    radial-gradient(circle at 85% 12%, rgba(20, 184, 166, 0.26), transparent 36%),
    radial-gradient(circle at 60% 95%, rgba(251, 191, 36, 0.18), transparent 42%);
}
.sky::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff, transparent),
    radial-gradient(2px 2px at 78% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 64%, #fde68a, transparent),
    radial-gradient(2px 2px at 90% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 24% 82%, #fff, transparent),
    radial-gradient(2px 2px at 63% 38%, #fbcfe8, transparent);
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.bar, .view { position: relative; z-index: 1; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 12px; padding: 12px 0; max-width: 980px; margin: 0 auto; }
.bar-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 999px; background: var(--glass); border: 2px solid var(--glass-line);
  color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap;
}
.bar-title { flex: 1; margin: 0; font-size: 22px; font-weight: 900; text-align: center; letter-spacing: 0.01em; }
.bar-tools { display: flex; align-items: center; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--glass); border: 2px solid var(--glass-line); font-weight: 800;
}
.round {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--glass-line);
  background: var(--glass); color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center;
}
.round .snd-off { display: none; }
.round.is-off .snd-on { display: none; }
.round.is-off .snd-off { display: inline; }

/* Buttons */
.btn {
  min-height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--glass-line);
  background: var(--glass); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.18); }
.btn:active { transform: scale(0.96); }
.btn-main { background: linear-gradient(135deg, var(--pink), #f97316); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(236, 72, 153, 0.8); }
.btn-main:hover { background: linear-gradient(135deg, #f472b6, #fb923c); }
.btn-small { min-height: 48px; padding: 0 14px; font-size: 16px; }
.bar-back:focus-visible, .round:focus-visible, .btn:focus-visible, .card:focus-visible, .seg-btn:focus-visible, .swatch:focus-visible {
  outline: 4px solid var(--focus); outline-offset: 3px;
}

/* Hub */
.view { max-width: 980px; margin: 0 auto; }
.view-narrow { max-width: 560px; }
.hero { text-align: center; padding: 10px 0 18px; }
.hero-kicker { margin: 0; color: var(--ink-soft); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px; }
.hero-title {
  margin: 2px 0; font-size: clamp(40px, 9vw, 68px); font-weight: 900; line-height: 1.05;
  background: linear-gradient(90deg, #fde68a, #f9a8d4, #99f6e4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin: 0; color: var(--ink-soft); font-weight: 700; }

.notice {
  max-width: 560px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 18px;
  background: rgba(251, 191, 36, 0.16); border: 2px solid rgba(251, 191, 36, 0.5); font-weight: 700; text-align: center;
}

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; width: 100%; height: 100%; min-height: 300px; padding: 20px 18px 18px; border-radius: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--ink);
  font: inherit; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 2px solid var(--glass-line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
button.card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 30px 60px -22px rgba(236, 72, 153, 0.55); }
button.card:active { transform: scale(0.98); }
.card-soon { cursor: default; opacity: 0.78; }
.card-name { font-size: 24px; font-weight: 900; line-height: 1.1; }
.card-line { color: var(--ink-soft); font-weight: 600; font-size: 16px; }
.card-go {
  margin-top: auto; min-height: 48px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center;
  font-weight: 900; background: linear-gradient(135deg, var(--teal), #22d3ee); color: #042f2e;
}
.card-go-soon { background: rgba(255, 255, 255, 0.14); color: var(--ink-soft); }
.go-lock { display: none; }
body[data-access="locked"] .card-trace .go-play,
body[data-access="nocode"] .card-trace .go-play,
body[data-access="paused"] .card-trace .go-play,
body[data-access="error"] .card-trace .go-play { display: none; }
body[data-access="locked"] .card-trace .go-lock,
body[data-access="nocode"] .card-trace .go-lock,
body[data-access="paused"] .card-trace .go-lock,
body[data-access="error"] .card-trace .go-lock { display: inline; }
body[data-access="locked"] .card-trace .card-go,
body[data-access="nocode"] .card-trace .card-go,
body[data-access="paused"] .card-trace .card-go,
body[data-access="error"] .card-trace .card-go { background: rgba(255, 255, 255, 0.14); color: var(--ink-soft); }

/* Card art, drawn with CSS */
.art { position: relative; width: 150px; height: 130px; display: grid; place-items: center; margin-top: 4px; }
.art-letter {
  font-style: normal; font-weight: 900; font-size: 104px; line-height: 1; color: transparent;
  -webkit-text-stroke: 5px #f9a8d4; filter: drop-shadow(0 0 14px rgba(249, 168, 212, 0.9));
}
.art-trace .art-letter { -webkit-text-stroke-color: #5eead4; filter: drop-shadow(0 0 14px rgba(94, 234, 212, 0.9)); }
.art-dot {
  position: absolute; left: 44px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px 6px rgba(251, 191, 36, 0.7); animation: startPulse 1s ease-in-out infinite;
}
.art-pitch { display: flex; align-items: flex-end; justify-content: center; gap: 9px; }
.art-pitch i { display: block; width: 14px; border-radius: 8px; background: linear-gradient(180deg, #fde68a, #fb7185); animation: wave 1.4s ease-in-out infinite; }
.art-pitch i:nth-child(1) { height: 40px; }
.art-pitch i:nth-child(2) { height: 80px; animation-delay: 0.15s; }
.art-pitch i:nth-child(3) { height: 110px; animation-delay: 0.3s; }
.art-pitch i:nth-child(4) { height: 70px; animation-delay: 0.45s; }
.art-pitch i:nth-child(5) { height: 44px; animation-delay: 0.6s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.7); } 50% { transform: scaleY(1.1); } }
.card-soon .art { filter: grayscale(0.5); }

.foot { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 22px 0 0; }
.foot a { color: #99f6e4; font-weight: 700; }

/* Locked message */
.lockcard {
  margin-top: 24px; padding: 28px 22px; border-radius: 30px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border: 2px solid var(--glass-line);
}
.lockcard-icon { font-size: 64px; line-height: 1; }
.lockcard-title { margin: 8px 0 4px; font-size: 28px; font-weight: 900; }
.lockcard-text { margin: 0 auto 18px; max-width: 420px; color: var(--ink-soft); font-weight: 600; }
.lockcard-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Trace & Glow */
.trace { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.trace-bar, .trace-colors, .trace-nav, .seg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.seg { gap: 6px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); }
.seg-btn {
  min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid transparent; background: transparent;
  color: var(--ink-soft); font: inherit; font-weight: 800; cursor: pointer;
}
.seg-btn.active { background: linear-gradient(135deg, var(--teal), #22d3ee); color: #042f2e; }
.swatch { width: 52px; height: 52px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; box-shadow: 0 0 0 2px var(--glass-line); }
.sw-green { background: #10b981; }
.sw-pink { background: #ec4899; }
.sw-blue { background: #3b82f6; }
.sw-orange { background: #f59e0b; }

.trace-stage { position: relative; display: flex; justify-content: center; width: 100%; max-width: 560px; }
.trace-canvas {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 360 / 380; border-radius: 28px; touch-action: none;
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%); border: 4px solid #fff;
  box-shadow: 0 0 0 4px #f9a8d4, 0 0 34px 8px rgba(236, 72, 153, 0.4), 0 22px 44px -14px rgba(20, 184, 166, 0.5);
  cursor: crosshair; user-select: none; -webkit-user-select: none;
}
.coach { margin: 2px 0; min-height: 30px; font-size: 20px; font-weight: 900; text-align: center; color: #99f6e4; }
.coach-win { color: #fde68a; font-size: 24px; animation: pulse 0.9s ease-in-out 3; }
.coach-warn { color: #fdba74; }
.trace-nav { margin-bottom: 4px; }

.start-dot {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #f59e0b;
  box-shadow: 0 0 14px 6px rgba(245, 158, 11, 0.7); pointer-events: none; z-index: 4; animation: startPulse 1s ease-in-out infinite;
}
@keyframes startPulse { 0%, 100% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Celebration: stars burst out and the box bounces */
.burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.spark {
  position: absolute; left: 0; top: 0; font-size: 34px; line-height: 1;
  transform: translate(-50%, -50%) scale(0.2); animation: spark var(--d, 1.2s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes spark {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3) rotate(200deg); opacity: 0; }
}
.bounce { animation: bounce 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.04) rotate(-1deg); }
  70% { transform: scale(0.99) rotate(1deg); }
  100% { transform: scale(1); }
}

/* Phones: keep the whole game on one screen */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .bar-back-text { display: none; }
  .bar-title { font-size: 19px; }
  .seg-btn { padding: 0 11px; font-size: 15px; }
  .trace-canvas { max-height: calc(100dvh - 330px); width: auto; margin: 0 auto; min-height: 220px; }
  .coach { font-size: 18px; }
  .card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}