/* Enochian Headline 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:38rem; text-align:center;
         line-height:1.5; margin:-1rem 0 0; }

  /* the sentence: word-groups (no internal wrap) separated by space gaps */
  .sentence{ display:flex; flex-wrap:wrap; justify-content:center;
             align-items:flex-start; gap:2.4rem .2rem; min-height:7rem; max-width:54rem; }
  .wgroup{ display:flex; gap:.4rem; }
  .col{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
  .tile{ width:3.6rem; height:4.2rem; display:flex; flex-direction:column;
         align-items:center; justify-content:center; gap:.15rem;
         border:1px solid var(--line); border-radius:.4rem;
         background:#13131a; transition:all .25s; }
  .tile .g{ font-family:"Enochian"; font-size:2rem; color:var(--gold); line-height:1; }
  /* always-on Enochian letter name under the glyph */
  .tile .nm{ font-size:.5rem; letter-spacing:.04em; color:var(--dim);
             text-transform:uppercase; 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); }

  /* a space between words: empty spacer aligned with tiles, thin slot below */
  .space{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:1.5rem; }
  .space .top{ height:4.2rem; }
  .spaceslot{ width:1.5rem; height:2.3rem; border-radius:.4rem; display:flex;
              align-items:center; justify-content:center; transition:all .15s; }
  .spaceslot::after{ content:"\00B7"; color:var(--line); font-size:1.1rem; }
  .spaceslot.filled::after{ color:var(--gold); }
  .spaceslot.good{ border:1px solid var(--good); }
  .spaceslot.good::after{ color:var(--good); }
  .spaceslot.bad{ border:1px solid var(--bad); }
  .spaceslot.bad::after{ color:var(--bad); }
  .space.active .spaceslot{ border:1px dashed var(--glow); box-shadow:0 0 10px -3px var(--glow); }

  .peek{ position:absolute; bottom:-1.4rem; font-size:.6rem; letter-spacing:.04em;
         color:var(--dim); 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);
           text-align:center; }
  .status.good{ color:var(--good); }
  .status.bad{ color:var(--bad); }
  .status b{ color:var(--gold-bright); letter-spacing:.08em; }
  .src{ min-height:.9rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
        color:var(--dim); opacity:.8; }