/* game-page.css: the game start pages (wordlink.au/clock and the rest).

   The top of each page is the start screen from game.html, so the rules for it
   are copied from there and should stay the same look: a learner who opens a
   shared link and one who comes in through the app see one card. The part
   below the card is the about text, written for teachers and tutors and kept
   quieter than the card above it. */
:root{--bg:#0d0d1a;--card:#16213e;--accent:#e94560;--gold:#f5a623;--teal:#0f9b8e;
  --purple:#7c4dff;--green:#00c853;--text:#f0f0ff;--muted:#8888aa;--radius:16px;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{touch-action:manipulation;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;
  overflow-x:hidden;line-height:1.5;}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 20% 20%,rgba(124,77,255,.12) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 80%,rgba(233,69,96,.10) 0%,transparent 60%);}
a{color:var(--gold);}
button,a,input,select{touch-action:manipulation;font:inherit;}

.gp-bar{text-align:center;padding:18px 20px 4px;font-family:'Fredoka One',cursive;font-size:1.4rem;
  letter-spacing:1px;}
.gp-bar a{color:var(--accent);text-decoration:none;text-shadow:0 0 20px rgba(233,69,96,.5);}
.gp-bar span{color:var(--gold);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Fredoka One',cursive;
  font-size:1.1rem;padding:14px 28px;border-radius:50px;border:none;cursor:pointer;transition:all .18s;
  text-decoration:none;letter-spacing:.5px;}
.btn:hover{transform:translateY(-3px);filter:brightness(1.1);}
.btn:active{transform:scale(.95);filter:brightness(1.18);transition-duration:0s;}
.btn-gold{background:var(--gold);color:#1a0a00;box-shadow:0 6px 24px rgba(245,166,35,.4);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 24px rgba(15,155,142,.4);}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--muted);}
.btn-ghost:hover{color:var(--text);border-color:var(--text);}
.btn-sm{font-size:.85rem;padding:8px 18px;}
.btn-lg{font-size:1.2rem;padding:15px 38px;}

/* ── The start card ──
   At least a screen tall, so the about text starts below the fold and the
   first thing a learner sees is the card and nothing else. */
.gp-launch{display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:560px;margin:0 auto;width:100%;min-height:calc(100svh - 60px);
  padding:12px 16px 120px;justify-content:center;}
.launch-skill{font-family:'Fredoka One',cursive;font-size:.8rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--lx,var(--muted));opacity:.9;text-align:center;}
.launch-medallion{width:116px;height:116px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:4rem;line-height:1;
  background:var(--card);border:2px solid rgba(255,255,255,.10);
  box-shadow:0 12px 40px var(--lx-glow,rgba(233,69,96,.25));}
.home-title{font-family:'Fredoka One',cursive;font-weight:400;font-size:clamp(2rem,8vw,3.2rem);
  text-align:center;line-height:1.1;
  background:linear-gradient(135deg,var(--accent),var(--gold),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.launch-sub{color:var(--muted);font-size:1.05rem;line-height:1.45;text-align:center;max-width:34ch;}
.launch-free{font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:.5px;color:var(--gold);
  text-align:center;}
.gp-say{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:var(--text);
  border-radius:50%;width:44px;height:44px;margin-left:6px;vertical-align:middle;cursor:pointer;
  font-size:1.1rem;}
.gp-say[hidden]{display:none;}
.launch-settings{width:100%;max-width:400px;background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.09);border-radius:14px;padding:14px;}
.mc-toggle-wrap{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:10px 14px;
  background:rgba(124,77,255,.12);border:1.5px solid rgba(124,77,255,.35);border-radius:12px;
  cursor:pointer;text-align:left;color:var(--text);}
.mc-toggle-wrap > span:last-child{display:flex;flex-direction:column;}
.mc-toggle-txt{font-size:.9rem;font-weight:800;}
.mc-toggle-sub{font-size:.72rem;color:var(--muted);font-weight:600;}
.mc-switch{position:relative;width:46px;height:26px;flex:0 0 auto;border-radius:50px;
  background:rgba(255,255,255,.18);transition:background .15s;}
.mc-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .15s;}
.mc-toggle-wrap.on .mc-switch{background:var(--teal);}
.mc-toggle-wrap.on .mc-switch::after{transform:translateX(20px);}
.launch-nums{display:flex;gap:12px;}
.launch-nums > div{flex:1;display:flex;flex-direction:column;gap:5px;}
.launch-nums label,.gp-lang label{font-size:.78rem;color:var(--muted);font-weight:700;}
.game-input{width:100%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);
  border-radius:12px;padding:9px 12px;font-size:1rem;color:var(--text);font-weight:700;outline:none;
  text-align:center;}
.game-input:focus{border-color:var(--gold);}
select.game-input{background:var(--card);text-align:left;cursor:pointer;}
.gp-lang{display:flex;flex-direction:column;gap:5px;margin-top:10px;}
.launch-exits{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.launch-exits [hidden]{display:none;}
/* Pinned, like the app's: Play is the one thing that must never scroll away. */
.solo-start-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--bg) 0%,var(--bg) 62%,rgba(13,13,26,0) 100%);}
.launch-begin{animation:launchPulse 2.6s ease-in-out infinite;}
@keyframes launchPulse{
  0%,100%{box-shadow:0 6px 24px rgba(245,166,35,.4);}
  50%{box-shadow:0 6px 34px rgba(245,166,35,.75);}
}
@media (prefers-reduced-motion:reduce){.launch-begin{animation:none;}.btn{transition:none;}}

/* ── About, for teachers and tutors ── */
.gp-about{max-width:720px;margin:0 auto;padding:32px 16px 24px;
  border-top:1px solid rgba(255,255,255,.08);}
.gp-kicker{font-family:'Fredoka One',cursive;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--lx,var(--muted));}
.gp-about h2{font-family:'Fredoka One',cursive;font-weight:400;font-size:1.35rem;color:var(--text);
  margin:26px 0 8px;}
.gp-about h2:first-of-type{margin-top:6px;}
.gp-about p{color:#c6c6dd;font-size:1rem;}
.gp-about p + p{margin-top:12px;}
.gp-shot{margin:20px 0 4px;}
.gp-shot img{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 40px var(--lx-glow,rgba(0,0,0,.4));}
.gp-steps{list-style:none;counter-reset:step;display:grid;gap:10px;}
.gp-steps li{counter-increment:step;display:flex;align-items:center;gap:12px;color:#c6c6dd;
  background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 14px;}
.gp-steps li::before{content:counter(step);flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;
  background:var(--lx,var(--accent));color:#10101c;}
.gp-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.gp-tags li{font-size:.85rem;color:#c6c6dd;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);border-radius:50px;padding:5px 12px;}
.gp-more{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.gp-more a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:var(--card);border:1px solid rgba(255,255,255,.07);color:var(--text);
  text-decoration:none;font-weight:700;}
.gp-more a:hover{border-color:var(--lx,var(--gold));}
.gp-more span{font-size:1.4rem;}
.gp-foot{max-width:720px;margin:0 auto;padding:12px 16px 130px;color:var(--muted);font-size:.85rem;
  text-align:center;}
.gp-foot p + p{margin-top:8px;}

@media (max-width:600px){
  .gp-bar{font-size:1.2rem;padding-top:14px;}
  .launch-medallion{width:92px;height:92px;font-size:3.2rem;}
  .gp-launch{gap:13px;}
}