/* Shared toy chrome + component library — linked by every trainer/tool (NOT the home page).
   Each index.css keeps only its deltas / unique rules, overriding these where it genuinely differs.
   NOTE: .peek is intentionally NOT shared — the glyph-tile and card families style it differently. */

/* --- page chrome --- */
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; }
.hint{ color:var(--dim); text-align:center; line-height:1.5; margin:0; }   /* kill the default <p> 1em margin; spacing comes from the header margin + main gap */

/* --- animations --- */
@keyframes pulse{ 50%{ box-shadow:0 0 18px 0 var(--glow); } }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-5px) }
                  40%{ transform:translateX(5px) } 60%{ transform:translateX(-3px) }
                  80%{ transform:translateX(3px) } }

/* --- glyph-tile toys: a column is a glyph tile over a typed-letter slot --- */
.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; }
.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; }
.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); }
.col:hover .peek{ opacity:1; }   /* base .peek lives per-toy; this reveal is common */
.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; }

/* --- sentence/headline layout: word-groups + word-spacers --- */
.sentence{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
           gap:2.4rem .2rem; min-height:7rem; max-width:var(--read-width); }
.wgroup{ display:flex; gap:.4rem; }
.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); }

/* --- card toys' answer bank (planet / house / zodiac) --- */
.options{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; 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; }
.reveal{ min-height:1.4rem; font-size:.82rem; letter-spacing:.05em; color:var(--dim); text-align:center; }
.reveal b{ color:var(--gold-bright); }
.sym{ font-family:"Noto Sans Symbols","Segoe UI Symbol","Apple Symbols",system-ui,sans-serif;
      line-height:1; user-select:none; }