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

  /* growing Enochian string (the glyphs to read) */
  .string{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
           min-height:7.5rem; align-items:flex-start; }
  .tile{ position:relative; width:3.6rem; height:4.6rem; display:flex;
         flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
         border:1px solid var(--line); border-radius:.4rem; cursor:default;
         background:#13131a; transition:all .25s; }
  .tile .g{ font-family:"Enochian"; font-size:2rem; color:var(--dim);
            transition:color .25s; line-height:1; }
  /* always-on letter name under the glyph */
  .tile .nm{ font-size:.6rem; letter-spacing:.07em; color:var(--dim);
             text-transform:uppercase; transition:color .25s; }
  /* each character is a column: glyph tile on top, Latin slot beneath */
  .col{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
  .slot{ width:3.6rem; height:2.3rem; display:flex; align-items:center;
         justify-content:center; border:1px dashed var(--line); border-radius:.4rem;
         background:#13131a; transition:all .2s; }
  .slot .v{ opacity:0; transition:opacity .15s; color:var(--gold-bright);
            font-size:1.3rem; }
  .slot .v.peek{ font-size:.9rem; color:var(--gold); letter-spacing:.04em; }
  .col:hover .slot.empty .v{ opacity:.4; }            /* hover to peek the answer */
  .slot.filled{ border-style:solid; border-color:var(--glow);
                box-shadow:0 0 12px -4px var(--glow); }
  .slot.filled .v{ opacity:1; }
  .tile.active{ border-color:var(--glow); box-shadow:0 0 0 1px var(--glow);
                animation:pulse 1.4s ease-in-out infinite; }
  .tile.active .g, .tile.active .nm{ color:var(--gold-bright); }
  @keyframes pulse{ 50%{ box-shadow:0 0 14px -2px var(--glow); } }
  .tile.matched{ border-color:var(--glow); background:#1c1a12;
                 box-shadow:0 0 16px -4px var(--glow); }
  .tile.matched .g, .tile.matched .nm{ color:var(--gold-bright); }

  /* clickable Latin answer bank A-Z */
  .alphabet{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center;
             max-width:40rem; border-top:1px solid var(--line); padding-top:2rem; }
  .key{ width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
        cursor:pointer; background:#13131a; border:1px solid var(--line);
        border-radius:.5rem; color:var(--gold); font-size:1.2rem; transition:all .12s; }
  .key:hover{ border-color:var(--gold); background:#1a1a22; color:var(--gold-bright); }
  .key.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)} }