/* STARTPAL ARCADE — shared chrome for the hub and each player's area.
   Palette lifted from RYDER so the whole site reads as one machine. */
:root{
  --bg:#0a0d11; --panel:#141a21; --panel2:#1b232c;
  --line:#2a333d; --txt:#dfe9f2; --dim:#8b99a7;
  --mint:#8ef5d0; --cyan:#7fd3ff; --gold:#ffd166; --pink:#ff8fc7; --orange:#ff9f43;
  --accent:var(--mint);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--txt);
  background:
    radial-gradient(1100px 560px at 50% -12%, #1a2330 0%, transparent 62%),
    linear-gradient(180deg,#0a0d11,#070a0d 60%);
  font-family:"Rajdhani",system-ui,sans-serif;
}
.wrap{max-width:1040px; margin:0 auto; padding:34px 20px 60px}

/* -------------------------------------------------------------- header */
header.top{display:flex; align-items:center; gap:14px; margin-bottom:6px}
header.top .mark{font-size:40px; filter:drop-shadow(0 0 10px rgba(142,245,208,.45))}
header.top h1{
  margin:0; font-size:30px; letter-spacing:.2em; line-height:1;
}
header.top h1 span{color:var(--accent)}
header.top em{
  display:block; margin-top:5px; font-style:normal; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}
.lead{
  margin:18px 0 26px; max-width:62ch; font-size:16px; line-height:1.55; color:#b9c6d3;
}
.lead b{color:var(--mint)}
.back{
  display:inline-block; margin-bottom:20px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
}
.back:hover{color:var(--mint)}

h2.sec{
  margin:34px 0 12px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:7px;
}

/* --------------------------------------------------------------- cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:12px}
.card{
  display:block; text-decoration:none; color:var(--txt);
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:8px; padding:14px 16px;
  transition:transform .08s, background .14s, border-color .14s;
}
.card:hover{background:var(--panel2); transform:translateY(-2px)}
.card .ci{font-size:28px; line-height:1; display:block; margin-bottom:8px}
.card .cn{display:block; font-size:19px; font-weight:600; letter-spacing:.03em; line-height:1.2}
.card .cd{
  display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--dim);
}
.card .cc{
  display:block; margin-top:10px; font-family:"Share Tech Mono",monospace;
  font-size:10px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase;
}
.card.empty{
  border-left-color:#2a333d; cursor:default; opacity:.72;
}
.card.empty:hover{transform:none; background:var(--panel)}

/* ------------------------------------------------------------ emptiness */
.blank{
  background:var(--panel); border:1px dashed var(--line); border-radius:8px;
  padding:26px 22px; color:var(--dim); font-size:15px; line-height:1.6;
}
.blank b{color:var(--txt)}

footer.bot{
  margin-top:46px; padding-top:14px; border-top:1px solid var(--line);
  font-family:"Share Tech Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; color:#5d6b79;
}

@media (max-width:560px){
  .wrap{padding:24px 16px 48px}
  header.top h1{font-size:23px; letter-spacing:.14em}
  header.top .mark{font-size:32px}
  .lead{font-size:15px}
}

/* ----------------------------------------------------------- request form */
.cta{
  display:inline-block; margin-top:20px; padding:11px 18px;
  background:linear-gradient(180deg,#1d2731,#141c24);
  border:1px solid var(--accent); border-radius:7px; color:var(--accent);
  font-family:"Rajdhani",sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .14s, transform .08s;
}
.cta:hover{background:#243040; transform:translateY(-1px)}

form.req{display:grid; gap:16px; max-width:640px; margin-top:4px}
.field{display:grid; gap:6px}
.field > label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.field .hint{font-size:12px; color:#6f7d8b; margin:-2px 0 0}
.field input[type=text], .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:6px;
  background:#0e141b; border:1px solid var(--line); color:var(--txt);
  font-family:"Rajdhani",sans-serif; font-size:16px;
}
.field textarea{min-height:84px; resize:vertical; line-height:1.45}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(142,245,208,.12);
}
.checks{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:8px}
.checks label{
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  background:#0e141b; border:1px solid var(--line); border-radius:6px;
  font-size:14px; cursor:pointer;
}
.checks label:hover{border-color:#3b4854}
.checks input{accent-color:#8ef5d0; width:16px; height:16px; cursor:pointer}
button.send{
  justify-self:start; padding:13px 26px; border-radius:7px; cursor:pointer;
  background:linear-gradient(180deg,#8ef5d0,#5fd3ab); border:none; color:#07231b;
  font-family:"Rajdhani",sans-serif; font-weight:700; font-size:15px; letter-spacing:.14em;
}
button.send:hover{filter:brightness(1.08)}
button.send:disabled{opacity:.5; cursor:default; filter:none}
.msg{padding:13px 15px; border-radius:7px; font-size:15px; line-height:1.5}
.msg.ok{background:#11271f; border:1px solid #2f6a53; color:var(--mint)}
.msg.err{background:#2a1618; border:1px solid #6b3034; color:#ff9a9a}

/* the homework card on a player's shelf, above the games, whenever the gate is on:
   .lock while she has work tonight, .ok once it is done (with the way to keep
   going), .bonus when only extra practice is left */
.hw{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 18px; padding:13px 16px;
  background:#2a1d26; border:1px solid var(--gold); border-radius:8px; color:var(--gold);
  text-decoration:none; font-family:"Rajdhani",sans-serif; font-size:17px}
.hw span{font-size:22px}
.hw b{flex:1 1 200px; min-width:0; font-weight:700; letter-spacing:.04em}   /* on a phone the call to action drops below */
.hw em{font-style:normal; font-family:"Share Tech Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; margin-left:auto; white-space:nowrap}
.hw:hover{background:#352330}
.hw.ok{background:#11271f; border-color:var(--mint); color:var(--mint)}
.hw.ok:hover{background:#17311f}
.hw.bonus{background:#2a2316; border-color:var(--gold); color:var(--gold)}
.hw.bonus:hover{background:#352d1c}

/* the video from Dad on the home page, above the players */
.note{margin:4px 0 8px; padding:18px 18px 16px; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--pink); border-radius:8px}
.note-h{margin:0 0 12px; font-size:24px; font-weight:700; letter-spacing:.06em; color:var(--pink)}
.film{margin:0}
.film video{display:block; width:100%; max-width:820px; aspect-ratio:16/9; background:#000; border-radius:6px}
.film figcaption{margin-top:10px; font-size:19px; font-weight:600; letter-spacing:.03em; color:var(--txt)}
.film figcaption span{font-size:17px}

/* the parents link in the home footer: there, but not shouting */
footer.bot a.plink{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer.bot a.plink:hover{color:var(--gold)}