/* The Kids' Arcade look (2026-10-21, round 2). Josh: the arcade pages take
   Times Table Town's lighter look (pastel pink → cream, white rounded cards
   with colored borders, a rounded font) instead of Reading Quest's navy.
   One file, loaded by absolute path by the Next arcade pages AND every static
   game, so the two can't drift. Every rule sits under .arc: Reading Quest
   pages never get it, even after a client-side hop leaves this sheet loaded.
   Light only (color-scheme: light): the games have no dark mode, and a
   dark-mode iPad used to show a navy arcade that opened into a pastel game.
   System rounded font, not a web font: the static games can't load
   next/font's hashed files, and on the iPad ui-rounded is SF Pro Rounded. */

.arc {
  --ink: #3a2c4a; --pink: #ff8fb8; --pink-d: #e2678f; --sky: #8fd8ff; --mint: #8ee6c4;
  --sun: #ffd166; --sun-d: #e8a93a; --grape: #a08cff; --grape-d: #7a64e6; --cream: #fff8ef;
  --font: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Chalkboard SE', 'Comic Sans MS', system-ui, sans-serif;
  color-scheme: light;
  font-family: var(--font); color: var(--ink);
  background: linear-gradient(180deg, #ffe3f0 0%, #fff4e0 55%, #dff7ec 100%) fixed;
  -webkit-tap-highlight-color: transparent;
}
.arc *, .arc *::before, .arc *::after { box-sizing: border-box; }
.arc button { font-family: inherit; border: none; cursor: pointer; color: inherit; }
.arc a { color: inherit; }
.arc [hidden] { display: none !important; }

/* ---------- buttons and chips (the games use these same three) ---------- */
.arc .bigbtn {
  font-size: 24px; padding: 16px 34px; border-radius: 999px; font-weight: 800; text-decoration: none;
  background: linear-gradient(180deg, #ffd98a, #ffab4a); color: #6a3800; display: inline-block;
  box-shadow: 0 6px 0 #d4852c, 0 10px 18px rgba(0, 0, 0, .15); transition: transform .08s;
}
.arc .bigbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d4852c; }
.arc .bigbtn.pink { background: linear-gradient(180deg, #ffb3cf, #ff7fac); color: #fff; box-shadow: 0 6px 0 var(--pink-d), 0 10px 18px rgba(0, 0, 0, .15); }
.arc .bigbtn:disabled { opacity: .5; }
.arc .ghostbtn { background: #ffffffcc; border-radius: 14px; padding: 8px 14px; font-size: 15px; font-weight: 800;
  box-shadow: 0 2px 0 #0001; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.arc .chip { background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 15px; box-shadow: 0 2px 0 #0001; }

/* ---------- the arcade pages (front door, My arcade) ---------- */
.arc-page { min-height: 100dvh; padding: 14px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  user-select: none; -webkit-user-select: none; }
.arc-bar { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arc-bar .sp { flex: 1; }
.arc-brand { font-weight: 900; font-size: 18px; color: var(--grape-d); }
.arc-hero { text-align: center; }
.arc-hero h1 { font-size: clamp(34px, 8vw, 58px); line-height: 1.02; margin: 4px 0 6px; color: #fff;
  -webkit-text-stroke: 2px var(--grape-d); paint-order: stroke fill; text-shadow: 0 5px 0 var(--grape-d); }
.arc-hero p { font-size: 19px; margin: 0; }
.arc-face { font-size: 56px; line-height: 1; }

.arc-games { width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.arc-card { background: #fff; border-radius: 24px; padding: 14px 16px; text-align: left; display: flex; gap: 12px; align-items: center;
  text-decoration: none; border: 3px solid var(--c, #ddd); box-shadow: 0 6px 0 var(--c, #ddd), 0 12px 22px #0001; transition: transform .1s; }
.arc-card:nth-child(3n+1) { transform: rotate(-.8deg); } .arc-card:nth-child(3n+2) { transform: rotate(.6deg); }
.arc-card:active { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 var(--c, #ddd); }
.arc-card .pic { font-size: 50px; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; flex: none; }
.arc-card .pic svg { height: 66px; width: auto; }
.arc-card h3 { font-size: 21px; margin: 0; color: var(--c); }
.arc-card p { font-size: 14px; margin: 2px 0 0; opacity: .8; }
.arc-card .status { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 800; background: #fff6e6; border-radius: 999px; padding: 2px 10px; }
.arc-tile { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; justify-content: center; text-decoration: none;
  background: #ffffffb3; border: 3px dashed #8ccf8a; border-radius: 22px; padding: 12px 16px; font-weight: 900; font-size: 20px; color: #3f8f33; }

/* front door: pick your face, then your PIN */
.arc-kids { width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.arc-kid { background: #fff; border-radius: 26px; padding: 18px 10px; text-align: center; border: 3px solid var(--c);
  box-shadow: 0 6px 0 var(--c), 0 12px 22px #0001; }
.arc-kid:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c); }
.arc-kid .face { font-size: 64px; line-height: 1.1; display: block; }
.arc-kid h3 { font-size: 26px; margin: 6px 0 0; color: var(--c); }
.arc-pin { background: #fff; border-radius: 28px; padding: 20px; width: 100%; max-width: 420px; text-align: center;
  border: 3px solid var(--c); box-shadow: 0 6px 0 var(--c), 0 12px 22px #0001; }
.arc-pin h3 { font-size: 24px; margin: 6px 0 12px; color: var(--c); }
.arc-pin input { font: inherit; font-size: 40px; font-weight: 900; letter-spacing: 14px; text-align: center; width: 220px;
  padding: 8px 0 8px 14px; border-radius: 18px; border: 4px solid var(--grape); background: #fff; color: var(--ink); }
.arc-pin .err { color: #e0436b; font-weight: 800; min-height: 22px; margin: 8px 0; }
.arc-pin .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- the arcade intro: plays once after a kid signs in ---------- */
.arc-intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #160c34; color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center; user-select: none; -webkit-user-select: none; }
/* CRT scanlines and a vignette: the arcade-cabinet glass. */
.arc-intro::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, #0000 0 3px, #0000002e 3px 4px), radial-gradient(ellipse at center, #0000 55%, #000a 100%); }
.arc-intro .marquee { position: absolute; inset: 10px; border-radius: 26px; pointer-events: none; z-index: 5;
  border: 6px dotted var(--kc, #ffd166); filter: drop-shadow(0 0 8px var(--kc, #ffd166)); animation: bulbs .5s steps(2) infinite; }
@keyframes bulbs { 50% { border-color: #fff; } }
.arc-intro .burst { position: absolute; width: 240vmax; height: 240vmax; left: 50%; top: 50%; margin: -120vmax 0 0 -120vmax; opacity: 0;
  transition: opacity .5s; background: repeating-conic-gradient(from 0deg, var(--kc, #ff7fac) 0 10deg, #2b1b5a 10deg 20deg);
  animation: arcspin 16s linear infinite; }
.arc-intro.lit .burst { opacity: .55; }
@keyframes arcspin { to { transform: rotate(360deg); } }
.arc-intro .rain { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.arc-intro .rain b { position: absolute; top: -70px; font-size: 38px; animation: arcfall linear forwards; }
@keyframes arcfall { to { transform: translateY(125vh) rotate(220deg); } }
.arc-intro .beat { position: absolute; z-index: 3; opacity: 0; padding: 0 16px; font-weight: 900; text-shadow: 0 5px 0 #0006; }
.arc-intro .beat.on { animation: arcslam .45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.arc-intro .beat.off { animation: arcfade .25s forwards; }
@keyframes arcslam { 0% { opacity: 0; transform: scale(2.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes arcfade { from { opacity: 1; } to { opacity: 0; transform: scale(.7); } }
.arc-intro .p1 { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: clamp(22px, 5vw, 40px); letter-spacing: 4px; color: var(--sun); }
.arc-intro .p1.on { animation: arcslam .3s forwards, arcblink .5s steps(2) .3s infinite; }
@keyframes arcblink { 50% { opacity: 0; } }
.arc-intro .hey { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.arc-intro .hey .face { font-size: clamp(90px, 20vw, 170px); line-height: 1; }
.arc-intro .hey .name { font-size: clamp(54px, 13vw, 120px); color: #fff; -webkit-text-stroke: 3px var(--kc); paint-order: stroke fill;
  text-shadow: 0 0 24px var(--kc), 0 6px 0 #0006; }
.arc-intro .count { font-size: clamp(120px, 30vw, 240px); color: var(--sun); }
.arc-intro .title { top: 9%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.arc-intro .title .line { display: flex; }
.arc-intro .title .ch { display: inline-block; opacity: 0; font-size: clamp(40px, 10vw, 96px); color: #fff;
  -webkit-text-stroke: 3px var(--grape-d); paint-order: stroke fill; text-shadow: 0 0 18px #ff8fb8; }
.arc-intro .title .line2 .ch { color: var(--sun); font-size: clamp(58px, 15vw, 140px); text-shadow: 0 0 22px var(--sun); }
.arc-intro .title.on .ch { animation: arcdrop .5s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes arcdrop { 0% { opacity: 0; transform: translateY(-90px) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
.arc-intro .cast { position: absolute; z-index: 3; bottom: 15%; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(8px, 3vw, 34px); padding: 0 20px; }
.arc-intro .cab { display: flex; flex-direction: column; align-items: center; opacity: 0; width: clamp(84px, 16vw, 140px); }
.arc-intro .cab.on { animation: archop .6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes archop { 0% { opacity: 0; transform: translateY(140px); } 100% { opacity: 1; transform: none; } }
.arc-intro .cab .scr { width: 100%; aspect-ratio: 1; border-radius: 18px 18px 8px 8px; background: #2b1b5a; border: 4px solid var(--c);
  box-shadow: 0 0 18px var(--c), inset 0 0 14px #000; display: flex; align-items: center; justify-content: center; font-size: clamp(38px, 8vw, 66px); }
.arc-intro .cab .scr svg { height: 75%; width: auto; }
.arc-intro .cab span { margin-top: 6px; background: var(--c); color: #fff; font-weight: 900; border-radius: 999px; padding: 3px 10px;
  font-size: clamp(11px, 2vw, 15px); line-height: 1.2; }
.arc-intro .star { top: 46%; font-size: clamp(20px, 4vw, 34px); background: #160c34e6; border: 3px solid var(--kc); border-radius: 999px; padding: 10px 24px; }
.arc-intro .star em { font-style: normal; color: var(--sun); }
.arc-intro .go { position: absolute; z-index: 7; bottom: 4%; opacity: 0; pointer-events: none; }
.arc-intro .go.on { opacity: 1; pointer-events: auto; animation: arcpulse 1s ease-in-out infinite; }
.arc-intro .press { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.arc-intro .press .p1 { opacity: 1; animation: arcblink 1s steps(2) infinite; }
.arc-intro .skip { position: absolute; top: 18px; right: 18px; z-index: 8; font-size: 18px; padding: 10px 18px; }
@keyframes arcpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .arc-intro .burst, .arc-intro .marquee, .arc-intro .go.on, .arc-card { animation: none; transform: none; }
}