/* Enochian Word 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:.78rem; max-width:36rem; text-align:center;
         line-height:1.5; margin:-1rem 0 0; }

  /* the word: a row of columns (glyph on top, typed-letter slot beneath) */
  .word{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
         min-height:7rem; align-items:flex-start; }
  .col{ position:relative; display:flex; flex-direction:column; align-items:center;
        gap:.4rem; }
  .tile{ width:3.6rem; height:4.2rem; display:flex; align-items:center;
         justify-content:center; border:1px solid var(--line); border-radius:.4rem;
         background:#13131a; transition:all .25s; }
  .tile .g{ font-family:"Enochian"; font-size:2.2rem; color:var(--gold); line-height:1; }
  .tile.active{ border-color:var(--glow); box-shadow:0 0 14px -2px var(--glow);
                animation:pulse 1.4s ease-in-out infinite; }
  @keyframes pulse{ 50%{ box-shadow:0 0 18px 0 var(--glow); } }

  .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 .15s; font-size:1.3rem; }
  .slot .v{ color:var(--gold-bright); }
  .slot.filled{ border-style:solid; border-color:var(--glow); }
  .slot.good{ border-style:solid; border-color:var(--good);
              box-shadow:0 0 12px -4px var(--good); }
  .slot.good .v{ color:var(--good); }
  .slot.bad{ border-style:solid; border-color:var(--bad);
             box-shadow:0 0 12px -4px var(--bad); }
  .slot.bad .v{ color:var(--bad); }

  /* hover a column to peek that glyph's letters + name */
  .peek{ position:absolute; bottom:-1.6rem; font-size:.62rem; letter-spacing:.04em;
         color:var(--dim); text-transform:uppercase; white-space:nowrap;
         opacity:0; pointer-events:none; transition:opacity .15s; }
  .col:hover .peek{ opacity:1; }

  .status{ min-height:1.6rem; font-size:1rem; letter-spacing:.04em; color:var(--dim); }
  .status.good{ color:var(--good); }
  .status.bad{ color:var(--bad); }
  .status b{ color:var(--gold-bright); letter-spacing:.1em; }