/* Planet Trainer — page-specific styles; shared base in site.css */
body{ background:var(--bg); color:var(--gold); font-family:system-ui,sans-serif;
        margin:0; min-height:100vh; display:flex; flex-direction:column;
        align-items:center; justify-content:center; gap:1.6rem; padding:2.5rem 1.5rem; }
  h1{ font-weight:300; letter-spacing:.12em; color:var(--gold-bright);
      font-size:1.2rem; margin:0 0 .5rem; text-transform:uppercase; }
  .hint{ color:var(--dim); font-size:.74rem; max-width:30rem; text-align:center;
         line-height:1.5; margin:-.8rem 0 .4rem; }

  /* the card: the planet's classical colour behind its symbol */
  .card{ position:relative; width:11rem; height:11rem; border-radius:1rem;
         display:flex; align-items:center; justify-content:center;
         transition:background-color .4s ease, box-shadow .25s ease;
         box-shadow:0 0 40px -10px #000 inset, 0 8px 30px -12px #000; }
  .card.solved{ box-shadow:0 0 40px -10px #000 inset, 0 0 26px -2px var(--good); }
  .sym{ font-family:"Noto Sans Symbols","Segoe UI Symbol","Apple Symbols",system-ui,sans-serif;
        font-size:6rem; line-height:1; user-select:none; }
  .peek{ position:absolute; bottom:.5rem; font-size:.66rem; letter-spacing:.12em;
         text-transform:uppercase; opacity:0; transition:opacity .15s; }
  .card:hover .peek{ opacity:.55; }

  /* clickable name bank */
  .options{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width:30rem; }
  .opt{ position:relative; padding:.5rem 1rem; font-size:.92rem; letter-spacing:.1em;
        text-transform:uppercase; cursor:pointer; background:#13131a;
        border:1px solid var(--line); border-radius:.5rem; color:var(--gold);
        transition:border-color .12s, background-color .12s, color .12s; }
  .opt:hover{ border-color:var(--glow); background:#1a1a22; color:var(--gold-bright); }
  .opt .n{ position:absolute; top:.15rem; left:.3rem; font-size:.5rem; color:#48443a; }
  .opt.good{ border-color:var(--good); color:var(--good); box-shadow:0 0 14px -4px var(--good); }
  .opt.bad{ animation:shake .35s; border-color:#7a3030; }
  @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
                    40%{transform:translateX(5px)} 60%{transform:translateX(-3px)}
                    80%{transform:translateX(3px)} }