/* Zodiac 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.4rem; padding:2.5rem 1.5rem; }
  h1{ font-weight:300; letter-spacing:.12em; color:var(--gold-bright);
      font-size:1.2rem; margin:0 0 .4rem; text-transform:uppercase; }
  .hint{ color:var(--dim); font-size:.72rem; max-width:32rem; text-align:center;
         line-height:1.5; margin:-.7rem 0 .3rem; }

  /* the card: a fixed footprint; the coloured shape is clipped per element */
  .card{ position:relative; width:12rem; height:12rem; display:flex;
         align-items:center; justify-content:center; }
  .shape{ position:absolute; inset:0; transition:background-color .4s ease, filter .25s ease;
          filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
  .card.solved .shape{ filter:drop-shadow(0 0 15px var(--good)); }
  /* elemental geometry: fire △, water ▽, earth ■, air ● */
  .card.earth .shape{ clip-path:inset(0 round 1rem); }
  .card.air   .shape{ clip-path:circle(50%); }
  .card.fire  .shape{ clip-path:polygon(50% 3%, 3% 97%, 97% 97%); }
  .card.water .shape{ clip-path:polygon(3% 3%, 97% 3%, 50% 97%); }

  /* glyph + archetype word, nudged into each triangle's wide zone */
  .content{ position:relative; z-index:1; display:flex; flex-direction:column;
            align-items:center; gap:.55rem; transition:transform .3s ease; }
  .card.fire  .content{ transform:translateY(1.4rem); }
  /* downward triangle is widest at the top, so put the word above the glyph */
  .card.water .content{ transform:translateY(-1.4rem); flex-direction:column-reverse; }
  .sym{ font-family:"Noto Sans Symbols","Segoe UI Symbol","Apple Symbols",system-ui,sans-serif;
        font-size:4.6rem; line-height:1; user-select:none; }
  .word{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.88; }

  .peek{ position:absolute; bottom:-.1rem; z-index:1; font-size:.64rem; letter-spacing:.12em;
         text-transform:uppercase; color:var(--dim); opacity:0; transition:opacity .15s; }
  .card:hover .peek{ opacity:.7; }

  /* clickable name bank */
  .options{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; max-width:32rem; }
  .opt{ padding:.45rem .9rem; font-size:.82rem; letter-spacing:.06em; 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.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)} }

  .reveal{ min-height:1.4rem; font-size:.82rem; letter-spacing:.05em; color:var(--dim);
           text-align:center; }
  .reveal b{ color:var(--gold-bright); }