/* ============================================================
   GENESIS ENGINEERED INTERPRETATIONS — app.css
   No-scroll, 100vh professional app shell. Dark = "Night" theme,
   light = "Day" theme. Accent gradient mirrors the yallToo logo.
   ============================================================ */
:root{
  --bg:#0a0f24; --bg2:#0e1633; --panel:#121b3d; --panel2:#182450;
  --ink:#eef2ff; --ink-dim:#9aa7d4; --line:#28356b;
  --blue:#5b8dee; --cyan:#17b0d8; --pink:#ea4fa8; --gold:#ffd166;
  --grad:linear-gradient(90deg,var(--blue),var(--cyan) 45%,var(--pink));
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:16px;
}
body.light{
  --bg:#f3efe4; --bg2:#ece5d3; --panel:#fffdf6; --panel2:#f6efdd;
  --ink:#20264a; --ink-dim:#6a7194; --line:#d9d0b6;
  --shadow:0 10px 26px rgba(90,80,40,.18);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden}
body{
  font-family:"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(1200px 700px at 75% -10%, #16224d 0%, var(--bg) 55%) fixed;
  color:var(--ink); transition:background .5s,color .5s;
}
body.light{background:radial-gradient(1200px 700px at 75% -10%, #fff8e2 0%, var(--bg) 55%) fixed}
#stars{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9; transition:opacity .6s}
body.light #stars{opacity:0}
#app{position:relative; z-index:1; height:100vh; display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:10px 14px 8px}

/* ---------- HEADER ---------- */
header{display:flex; align-items:center; gap:14px; padding:6px 10px}
.logo{height:38px; width:auto; filter:drop-shadow(0 2px 6px rgba(234,79,168,.35)); animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.titles h1{font-size:clamp(13px,1.25vw,17px); letter-spacing:.14em; font-weight:800; text-transform:uppercase}
.titles h1 b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.titles p{font-size:clamp(10px,.85vw,12px); color:var(--ink-dim); letter-spacing:.06em}
nav{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:nowrap}
.pill{font-size:clamp(10px,.85vw,12px); font-weight:700; padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-dim); text-decoration:none; background:var(--panel); transition:.2s; white-space:nowrap}
.pill:hover{transform:translateY(-2px); color:var(--ink); border-color:var(--cyan)}
.pill.active{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(23,176,216,.4)}
.pill.soon{opacity:.55; font-style:italic}
.pill.soon:hover{opacity:.85}
#ring{width:44px; height:44px; transform:rotate(-90deg)}
#ringBg{stroke:var(--line)} #ringFg{stroke:url(#ringGrad); stroke-linecap:round; transition:stroke-dashoffset .6s}
#progWrap{display:flex; align-items:center; gap:8px}
#progTxt{font-size:11px; font-weight:800; color:var(--ink-dim); line-height:1.15}
#progTxt b{display:block; font-size:13px; color:var(--ink)}

/* ---------- MAIN GRID ---------- */
main{display:grid; grid-template-columns:minmax(196px,19%) minmax(0,1fr) minmax(280px,29%); gap:12px; min-height:0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-height:0; display:flex; flex-direction:column; overflow:hidden}
.card>h2{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); padding:10px 14px 8px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.card>h2 .dot{width:8px; height:8px; border-radius:50%; background:var(--grad)}
.pad{padding:10px 12px; overflow-y:auto; scrollbar-width:thin}
.pad::-webkit-scrollbar{width:6px} .pad::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}

/* Left tool panel */
.toolbtn{display:flex; align-items:center; gap:9px; width:100%; text-align:left; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin-bottom:7px; cursor:pointer; transition:.18s}
.toolbtn:hover{transform:translateX(3px); border-color:var(--cyan); box-shadow:0 3px 12px rgba(23,176,216,.25)}
.toolbtn .ico{font-size:16px}
.toolbtn small{margin-left:auto; color:var(--ink-dim); font-weight:600}
.sect{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin:10px 2px 6px}
.devbtn{display:flex; gap:8px; align-items:flex-start; width:100%; font:inherit; font-size:11.5px; color:var(--ink-dim); background:transparent; border:1px solid transparent; border-radius:10px; padding:6px 8px; margin-bottom:3px; cursor:pointer; text-align:left; transition:.18s}
.devbtn:hover{color:var(--ink); background:var(--panel2)}
.devbtn.on{color:var(--ink); border-color:var(--gold); background:rgba(255,209,102,.08)}
.devbtn .ico{font-size:14px}
#statBar{height:8px; border-radius:6px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; margin:6px 2px}
#statFill{height:100%; width:0%; background:var(--grad); transition:width .6s}

/* Center stage */
#stageCard{position:relative}
#devBanner{display:none; align-items:center; gap:10px; margin:10px 14px 0; padding:8px 12px; border-radius:12px; background:rgba(255,209,102,.1); border:1px dashed var(--gold); font-size:12px; color:var(--ink)}
#devBanner.show{display:flex; animation:slideDown .35s ease}
@keyframes slideDown{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
#devBanner b{color:var(--gold)}
#devBanner button{margin-left:auto; background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:14px}
#verses{padding:14px 20px 16px; overflow-y:auto; scrollbar-width:thin}
.verse{margin-bottom:12px; line-height:2.05; font-family:Georgia,"Times New Roman",serif; font-size:clamp(14px,1.32vw,18.5px)}
.vnum{font-family:"Segoe UI",system-ui,sans-serif; font-size:.62em; font-weight:800; color:var(--cyan); vertical-align:super; margin-right:6px; user-select:none}
.tok{display:inline; cursor:pointer; border-radius:6px; padding:1px 3px; margin:0 1px; transition:background .15s, color .15s, transform .15s, box-shadow .15s; position:relative; outline:none}
.tok:hover,.tok:focus-visible{background:var(--panel2); color:var(--cyan); transform:translateY(-2px) scale(1.06); box-shadow:0 3px 10px rgba(23,176,216,.3)}
.tok.punct{color:var(--pink); font-weight:700; padding:1px 4px; border-radius:50%}
.tok.punct:hover{color:#fff; background:var(--pink)}
.tok.sel{background:var(--grad); color:#fff !important; box-shadow:0 4px 16px rgba(234,79,168,.45)}
.tok.seen{border-bottom:2px dotted var(--cyan)}
.tok.hl{animation:goldPulse 1.1s ease-in-out infinite; background:rgba(255,209,102,.14)}
@keyframes goldPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.55)}50%{box-shadow:0 0 0 7px rgba(255,209,102,0)}}
.tok.pop{animation:popIn .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes popIn{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-3deg)}100%{transform:scale(1)}}
.tok.reveal{opacity:0; animation:riseIn .5s ease forwards}
@keyframes riseIn{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.tok.glowburst{animation:burst 1s ease}
@keyframes burst{0%{box-shadow:0 0 0 0 rgba(255,209,102,.9)}45%{box-shadow:0 0 34px 14px rgba(255,209,102,.55); background:rgba(255,209,102,.35)}100%{box-shadow:0 0 0 0 rgba(255,209,102,0)}}
#hint{margin-top:2px; padding:8px 20px 12px; font-size:11.5px; color:var(--ink-dim); border-top:1px dashed var(--line)}
#hint b{color:var(--gold)}

/* Right dossier panel */
#dossHead{padding:12px 14px 10px; border-bottom:1px solid var(--line); position:relative}
#dWord{font-size:clamp(22px,2.1vw,30px); font-weight:800; font-family:Georgia,serif; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
#dWord .saybtn{font-size:15px; background:var(--panel2); border:1px solid var(--line); border-radius:50%; width:30px; height:30px; cursor:pointer; transition:.2s}
#dWord .saybtn:hover{transform:scale(1.15) rotate(12deg); border-color:var(--cyan)}
#dHeb{font-size:clamp(20px,1.9vw,27px); color:var(--gold); direction:rtl; font-family:"SBL Hebrew","Times New Roman",serif}
#dMeta{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.tag{font-size:10px; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); color:var(--ink-dim)}
.tag.tr{color:var(--cyan); border-color:var(--cyan)}
.tag.st{color:var(--pink); border-color:var(--pink)}
.tag.fg{color:var(--gold); border-color:var(--gold); cursor:pointer}
#dMean{padding:10px 14px 4px; font-size:13px; line-height:1.5; color:var(--ink)}
#dossBody{padding:4px 10px 12px; overflow-y:auto; scrollbar-width:thin}
.acc{border:1px solid var(--line); border-radius:12px; margin:6px 2px; overflow:hidden; background:var(--panel2)}
.acc>button{width:100%; display:flex; align-items:center; gap:8px; font:inherit; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:transparent; border:none; padding:9px 12px; cursor:pointer; transition:.2s}
.acc>button:hover{color:var(--ink)}
.acc>button .chev{margin-left:auto; transition:transform .3s}
.acc.open>button .chev{transform:rotate(90deg); color:var(--cyan)}
.acc .body{max-height:0; overflow:hidden; transition:max-height .35s ease}
.acc.open .body{max-height:340px; overflow-y:auto; scrollbar-width:thin}
.acc .inner{padding:2px 12px 11px; font-size:12.5px; line-height:1.55; color:var(--ink)}
.acc .inner .lbl{color:var(--ink-dim); font-size:10px; text-transform:uppercase; letter-spacing:.1em; display:block; margin:7px 0 3px}
.chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:4px}
.chip{font:inherit; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--cyan); color:var(--cyan); background:transparent; cursor:pointer; transition:.15s}
.chip:hover{background:var(--cyan); color:#04121f; transform:scale(1.07)}
.chip.ant{border-color:var(--pink); color:var(--pink)} .chip.ant:hover{background:var(--pink); color:#fff}
.chip.homo{border-color:var(--gold); color:var(--gold)} .chip.homo:hover{background:var(--gold); color:#241a02}
.chip.rel{border-color:var(--blue); color:var(--blue)} .chip.rel:hover{background:var(--blue); color:#fff}
.funbox{margin:8px 12px 12px; padding:9px 11px; border-radius:12px; background:linear-gradient(135deg,rgba(91,141,238,.14),rgba(234,79,168,.14)); border:1px solid var(--line); font-size:12px; line-height:1.5}
.funbox .star{font-size:14px; margin-right:5px; display:inline-block; animation:spinStar 3.4s linear infinite}
@keyframes spinStar{0%{transform:rotate(0)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg)}}
#popBtn{margin:0 12px 12px; font:inherit; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--grad); border:none; border-radius:11px; padding:9px; cursor:pointer; transition:.2s; box-shadow:0 4px 14px rgba(23,176,216,.35)}
#popBtn:hover{transform:translateY(-2px); box-shadow:0 7px 20px rgba(234,79,168,.45)}

/* ---------- FOOTER ---------- */
footer{display:flex; align-items:center; gap:10px; font-size:10.5px; color:var(--ink-dim); padding:0 8px}
footer .sep{opacity:.5}
footer a{color:var(--cyan); text-decoration:none} footer a:hover{text-decoration:underline}
#dayDots{margin-left:auto; display:flex; gap:5px}
#dayDots span{width:9px; height:9px; border-radius:50%; background:var(--line); transition:.3s}
#dayDots span.done{background:var(--grad)}

/* ---------- TOOLTIP ---------- */
#tip{position:fixed; z-index:60; max-width:230px; background:var(--panel2); border:1px solid var(--cyan); border-radius:10px; padding:7px 10px; font-size:11.5px; line-height:1.4; color:var(--ink); pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; box-shadow:var(--shadow)}
#tip.show{opacity:1; transform:none}
#tip .th{color:var(--gold); direction:rtl; font-size:14px}
#tip .tt{color:var(--cyan); font-weight:800}

/* ---------- MODALS ---------- */
#modalWrap{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; background:rgba(4,7,20,.66); backdrop-filter:blur(4px)}
#modalWrap.show{display:flex; animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(560px,92vw); max-height:84vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.5); animation:zoomIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes zoomIn{from{transform:scale(.85); opacity:0}to{transform:scale(1); opacity:1}}
.modal header{padding:14px 18px; border-bottom:1px solid var(--line)}
.modal header h3{font-size:16px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.modal header .x{margin-left:auto; background:none; border:none; color:var(--ink-dim); font-size:18px; cursor:pointer}
.modal header .x:hover{color:var(--pink); transform:rotate(90deg)}
.modal .mbody{padding:14px 18px; overflow-y:auto; font-size:13px; line-height:1.6; scrollbar-width:thin}
.alphaGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px}
.alphaCell{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 6px; text-align:center; transition:.2s; cursor:default}
.alphaCell:hover{transform:translateY(-3px) scale(1.05); border-color:var(--gold); box-shadow:0 6px 16px rgba(255,209,102,.25)}
.alphaCell .L{font-size:26px; color:var(--gold); direction:rtl}
.alphaCell .N{font-size:11px; font-weight:800}
.alphaCell .S{font-size:10px; color:var(--ink-dim)}
.alphaCell .V{font-size:9.5px; color:var(--cyan)}

/* Quiz */
.quizTop{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-dim); margin-bottom:10px}
.quizTop b{color:var(--gold)}
#qText{font-size:16px; font-weight:700; line-height:1.45; margin-bottom:14px}
.qopt{display:block; width:100%; text-align:left; font:inherit; font-size:13.5px; color:var(--ink); background:var(--panel2); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:.15s}
.qopt:hover{border-color:var(--cyan); transform:translateX(4px)}
.qopt.right{border-color:#39d98a; background:rgba(57,217,138,.15); animation:popIn .4s}
.qopt.wrong{border-color:var(--pink); background:rgba(234,79,168,.12); animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
#qNext{font:inherit; font-weight:800; font-size:13px; color:#fff; background:var(--grad); border:none; border-radius:11px; padding:9px 18px; cursor:pointer; display:none}
#qNext:hover{transform:translateY(-2px)}

/* Confetti */
#confetti{position:fixed; inset:0; z-index:90; pointer-events:none}

/* Placeholder / about pages */
.hero{max-width:760px; margin:6vh auto 0; text-align:center; padding:0 20px}
.hero .big{font-size:clamp(34px,6vw,64px); font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; animation:floaty 5s ease-in-out infinite}
.hero p{color:var(--ink-dim); font-size:clamp(13px,1.5vw,16px); margin:14px 0 22px; line-height:1.7}
.hero .cta{display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center}
.btn{font:inherit; font-weight:800; font-size:14px; padding:11px 22px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; transition:.2s}
.btn.grad{background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(23,176,216,.4)}
.btn.grad:hover{transform:translateY(-3px) scale(1.03)}
.btn.ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink-dim)}
.btn.ghost:hover{border-color:var(--cyan); color:var(--ink)}
.featGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; max-width:960px; margin:26px auto; padding:0 20px}
.feat{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:left; transition:.2s}
.feat:hover{transform:translateY(-4px); border-color:var(--cyan); box-shadow:var(--shadow)}
.feat .fi{font-size:24px} .feat h4{margin:8px 0 5px; font-size:14px} .feat p{font-size:12px; color:var(--ink-dim); line-height:1.55}
.roadmap{max-width:760px; margin:10px auto 40px; padding:0 20px; font-size:13px; color:var(--ink-dim)}
.roadmap table{width:100%; border-collapse:collapse}
.roadmap td,.roadmap th{border:1px solid var(--line); padding:8px 10px; text-align:left}
.roadmap th{color:var(--ink); background:var(--panel2)}

@media (max-width:900px){
  main{grid-template-columns:1fr; grid-template-rows:auto}
  html,body{overflow:auto}
  #app{height:auto; min-height:100vh}
}