:root{
  --void-black:#040A06; --deep-navy:#08160F; --panel-bg:#0C1E14; --panel-border:#21472F;
  --gold:#C89B3C; --gold-bright:#F0D070; --gold-dim:#7A5C1E;
  --botanical-green:#2A5C3F; --botanical-light:#4A9B6F; --botanical-glow:rgba(42,92,63,0.25);
  --arcane-blue:#3AAFDC;
  --text-primary:#D4C5A0; --text-muted:#9A8E76; --text-bright:#F5EDD8;
  --font-display:'Cinzel Decorative',serif; --font-heading:'Cinzel',serif;
  --font-body:'Crimson Text',Georgia,serif; --font-latin:'IM Fell English SC',serif; --font-rune:'Cinzel',serif;
  --cut:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
*{box-sizing:border-box}
html{background:radial-gradient(130% 100% at 50% -5%, #0c1d13 0%, #071109 60%, #050c08 100%) fixed; min-height:100%}
body{margin:0 auto; max-width:1100px; padding:0 24px 90px; background:transparent;
  color:var(--text-primary); font-family:var(--font-body); font-size:18px; line-height:1.55}
#runes{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.lat,.latcell{font-family:var(--font-latin); font-style:italic}

/* Hero */
header{text-align:center; padding:60px 0 26px; position:relative}
h1{font-family:var(--font-heading); font-weight:600; font-size:clamp(2rem,5.5vw,3.3rem);
  color:var(--gold-bright); margin:0; letter-spacing:.05em; text-shadow:0 0 26px rgba(240,208,112,.28)}
.sub{font-family:var(--font-heading); color:var(--text-muted); font-size:.8rem;
  letter-spacing:.26em; text-transform:uppercase; margin:14px 0 0}

/* Sticky fül-navigáció */
.tabs{position:sticky; top:0; z-index:50; display:flex; justify-content:center; flex-wrap:wrap;
  gap:2px; padding:10px 6px; margin:0 -24px 44px; background:rgba(8,22,15,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--gold-dim)}
.tab{font-family:var(--font-heading); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 16px; cursor:pointer; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-muted); transition:color .2s, border-color .2s}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--gold-bright); border-bottom-color:var(--gold)}
.tab-break{flex-basis:100%; height:0}
.panel{display:none}
.panel.active{display:block}

/* Szekciócím-blokk */
.section-head{text-align:center; margin:6px 0 38px}
.section-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.4rem);
  color:var(--gold-bright); margin:0; text-shadow:0 0 18px rgba(240,208,112,.2)}
.divider{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px}
.divider::before,.divider::after{content:""; height:1px; width:90px}
.divider::before{background:linear-gradient(90deg,transparent,var(--gold-dim))}
.divider::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.divider i{width:8px; height:8px; background:var(--gold); transform:rotate(45deg)}

/* Gombok */
button.act{font-family:var(--font-heading); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px; cursor:pointer; color:var(--void-black); font-weight:700;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:none; clip-path:var(--cut);
  transition:filter .2s}
button.act:hover{filter:brightness(1.1) drop-shadow(0 0 14px rgba(200,155,60,.5))}
button.ghost{background:transparent; color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-dim)}
button.ghost:hover{color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--gold); filter:drop-shadow(0 0 12px rgba(200,155,60,.3))}

/* Űrlapelemek */
input,select,textarea{font-family:var(--font-body); font-size:.98rem; padding:10px 12px;
  border:1px solid var(--panel-border); background:var(--panel-bg); color:var(--text-primary)}
input::placeholder,textarea::placeholder{color:var(--text-muted); font-style:italic}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 12px rgba(200,155,60,.25)}
input.lat-input{font-family:var(--font-latin); font-style:italic}
.row-flex{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.spacer{flex:1}

/* Kereső */
#search{min-width:240px; padding-left:38px; border-color:var(--gold-dim);
  background:var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C89B3C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 12px center; background-size:16px}

/* Szótár táblázat */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px}
table{width:100%; border-collapse:collapse; background:var(--panel-bg); border:1px solid var(--panel-border)}
th,td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--panel-border); font-size:.94rem; vertical-align:top}
th{background:var(--deep-navy); color:var(--gold); font-family:var(--font-heading); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(42,92,63,.1)}
td.latcell{font-size:1.12rem; color:var(--gold-bright)}
.del{cursor:pointer; color:#c06a6a; border:none; background:none; font-size:1rem}
.del:hover{color:#e08a8a}
.thumb{width:42px; height:42px; object-fit:cover; clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); border:1px solid var(--panel-border)}

/* Sor hozzáadása */
.addgrid{display:grid; grid-template-columns:1.1fr 1.1fr .9fr .9fr 1.1fr 1.3fr auto; gap:8px; margin-top:14px}
@media(max-width:760px){.addgrid{grid-template-columns:1fr 1fr}}

/* Fajnévtár lapozó */
.dict-pager{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0 8px; font-family:var(--font-heading); font-size:.8rem; color:var(--text-muted)}
.dict-pager .pgsize{display:flex; align-items:center; gap:8px}
.dict-pager select{width:auto}
.dict-pager .pgnav{display:flex; align-items:center; gap:10px; margin-left:auto}
.dict-pageno{color:var(--gold-bright); letter-spacing:.06em; min-width:52px; text-align:center}
.dict-pageinfo{color:var(--text-muted); font-size:.74rem; letter-spacing:.04em}
.dict-pager .act:disabled{opacity:.4; cursor:default}

/* Kiejtés-kártyák */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.rule{background:var(--panel-bg); border:1px solid var(--panel-border); padding:18px; clip-path:var(--cut); transition:border-color .25s, filter .25s}
.rule:hover{border-color:var(--botanical-light); filter:drop-shadow(0 0 12px rgba(74,155,111,.5))}
.rule h4{margin:0 0 8px; font-family:var(--font-latin); font-style:italic; font-size:1.35rem; color:var(--gold-bright)}
.rule p{margin:0 0 10px; font-size:.96rem; color:var(--text-primary)}
.rule .ex{font-size:.92rem; color:var(--text-muted); background:var(--deep-navy); border-left:2px solid var(--gold-dim); padding:8px 11px}
.notes{margin-top:24px}
.notes>label{font-family:var(--font-heading); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:6px}
.notes textarea{width:100%; min-height:96px; resize:vertical}

/* Vezérlők (Villám / Faj / Memória) */
.mem-controls{display:flex; flex-wrap:wrap; gap:14px; align-items:end; justify-content:center; margin-bottom:18px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-family:var(--font-heading); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.stats{display:flex; gap:24px; justify-content:center; font-family:var(--font-heading); letter-spacing:.04em; font-size:.9rem; color:var(--text-muted); margin-bottom:18px}
.stats b{color:var(--gold-bright)}
.win{margin-top:22px; padding:16px 18px; background:var(--panel-bg); border:1px solid var(--botanical-green); color:var(--botanical-light); font-family:var(--font-heading); letter-spacing:.04em; display:none; text-align:center; clip-path:var(--cut); filter:drop-shadow(0 0 16px rgba(74,155,111,.35))}
.win.show{display:block}
.empty{color:var(--text-muted); font-size:.96rem; padding:22px 0; text-align:center; font-style:italic}

/* Memória rács + kártyák */
.grid{display:grid; gap:12px; grid-template-columns:repeat(4,1fr); max-width:720px}
@media(max-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{aspect-ratio:3/4; cursor:pointer; user-select:none; position:relative; perspective:700px; transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card-inner{position:relative; width:100%; height:100%; transition:transform .55s ease; transform-style:preserve-3d}
.card.up .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.card-back,.card-front{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px}
.card-front{transform:rotateY(180deg)}
.face{font-size:1rem; line-height:1.25; color:var(--text-bright)}

/* Runeterra-stílusú tábla */
.scene{position:relative; left:50%; transform:translateX(-50%); width:min(1500px,94vw); margin:10px 0 0; padding:3.5% 4% 4.5%; overflow:hidden;
  min-height:clamp(420px,52vh,620px); display:flex; flex-direction:column; justify-content:center;
  background:#0c1e14 url('../assets/board.jpg') center/cover no-repeat;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.scene::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(200,155,60,.3), inset 0 0 100px rgba(4,6,13,.7)}
.clearing{position:relative; z-index:1; padding:6px}
.clearing .grid{max-width:none; margin:0 auto}
#memGrid{justify-content:center; gap:14px}
.clearing .empty{color:var(--text-bright); text-shadow:0 1px 4px rgba(0,0,0,.8)}
#memGrid .card{box-shadow:0 4px 10px rgba(0,0,0,.45)}
#memGrid .card-back{background:linear-gradient(160deg, var(--back,#163a26), #0a160e); border:1px solid var(--gold-dim)}
#memGrid .card-back::before,#memGrid .card-front::before{content:""; position:absolute; inset:6px; border:1px solid rgba(200,155,60,.3); border-radius:7px; pointer-events:none}
#memGrid .card-back::after{content:attr(data-glyph); color:rgba(240,208,112,.6); font-size:1.9rem; text-shadow:0 0 10px rgba(0,0,0,.45)}
#memGrid .card-back.has-img{background-size:cover; background-position:center}
#memGrid .card-back.has-img::before,#memGrid .card-back.has-img::after{content:none}
#memGrid .card-front{background:linear-gradient(160deg,#16321f,#0d2014); border:1px solid var(--gold-dim)}
#memGrid .card.latin .card-front .face{font-family:var(--font-latin); font-style:italic; font-size:1.2rem; color:var(--gold-bright)}
#memGrid .card.matched .card-front{border-color:var(--botanical-light)}
#memGrid .card.matched .card-front .face{color:var(--botanical-light)}
#memGrid .card.matched{box-shadow:0 0 16px 2px rgba(74,155,111,.5)}

/* Villámkártya */
.flash-card{background:var(--panel-bg); border:1px solid var(--panel-border); padding:34px 28px; max-width:540px; margin:0 auto; text-align:center; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); filter:drop-shadow(0 0 26px rgba(0,0,0,.4))}
.flash-dir{font-family:var(--font-heading); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin-bottom:16px}
.flash-prompt{font-size:1.7rem; margin-bottom:22px; min-height:2rem; color:var(--text-bright)}
.flash-prompt.latin{font-family:var(--font-latin); font-style:italic; font-size:2.1rem; color:var(--gold-bright); text-shadow:0 0 18px rgba(240,208,112,.25)}
.flash-answer-row{display:flex; gap:8px}
.flash-answer-row input{flex:1}
.flash-result{margin-top:18px; font-family:var(--font-heading); letter-spacing:.03em; font-size:1rem; display:none}
.flash-result.show{display:block}
.flash-result.ok{color:var(--botanical-light)}
.flash-result.bad{color:#d08a6a}
.flash-result .lat{font-family:var(--font-latin); font-style:italic; color:var(--gold-bright)}
.flash-again{background:none; border:none; color:var(--arcane-blue); cursor:pointer; font-size:.82rem; text-decoration:underline; font-family:var(--font-body)}

/* Fajfelismerés */
.img-card{max-width:520px; margin:0 auto}
.img-photo-wrap{position:relative; border:1px solid var(--panel-border); overflow:hidden; background:var(--deep-navy); aspect-ratio:4/5}
.img-photo-wrap img{width:100%; height:100%; object-fit:contain; display:block}
.img-caption{position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px; color:var(--text-bright); opacity:0; transition:opacity .25s; background:linear-gradient(transparent, rgba(4,6,13,.94))}
.img-caption.show{opacity:1}
.img-caption .lat{display:block; font-family:var(--font-latin); font-style:italic; font-size:1.5rem; color:var(--gold-bright); line-height:1.15}
.img-caption .lat + span{font-size:1rem; color:var(--text-muted)}
.img-options{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px auto 0; max-width:520px}
@media(max-width:520px){.img-options{grid-template-columns:1fr}}
.opt{display:flex; align-items:center; gap:11px; text-align:left; padding:11px 13px; border:1px solid var(--panel-border); background:var(--panel-bg); cursor:pointer; font-family:var(--font-body); font-size:.96rem; color:var(--text-primary); clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition:border-color .2s, filter .2s}
.opt:hover:not(:disabled){border-color:var(--botanical-light); filter:drop-shadow(0 0 12px rgba(74,155,111,.5))}
.optletter{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; background:var(--deep-navy); border:1px solid var(--gold-dim); color:var(--gold); font-family:var(--font-heading); font-size:.78rem; font-weight:600}
.opt .lat{font-family:var(--font-latin); font-style:italic; color:var(--gold-bright)}
.opt.correct{border-color:var(--botanical-light); background:rgba(42,92,63,.28)}
.opt.correct .optletter{background:var(--botanical-green); color:var(--text-bright); border-color:var(--botanical-light)}
.opt.wrong{border-color:#a8553f; background:rgba(120,50,40,.22)}
.opt.wrong .optletter{background:#7a3a2a; color:#f0d0c0; border-color:#a8553f}
#imgNext{margin-top:16px}

/* Kurzus-badge (vizuál előkészítés Növénytan 1/2-höz) */
.badge{display:inline-block; font-family:var(--font-heading); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px))}
.badge.c1{color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--gold-dim)}
.badge.c2{color:var(--arcane-blue); box-shadow:inset 0 0 0 1px #1d5b72}

/* Toast */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--panel-bg); border:1px solid var(--gold-dim); color:var(--text-bright); padding:13px 20px; font-size:.95rem; max-width:90vw; opacity:0; transition:opacity .25s; pointer-events:none; clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); filter:drop-shadow(0 0 22px rgba(0,0,0,.6))}
.toast.show{opacity:1}
.toast .lat{font-family:var(--font-latin); font-style:italic; color:var(--gold-bright)}
.saved{font-family:var(--font-heading); font-size:.72rem; letter-spacing:.08em; color:var(--botanical-light); opacity:0; transition:opacity .3s}
.saved.show{opacity:1}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .rune-tile{transition:none}
  .rune-tile:hover{transform:none}
}

/* ============ Könyvtár / Enciklopédia ============ */
button.act:disabled{opacity:.4; cursor:default; filter:none}
.shelf{display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 0 8px}
.shelf-row{display:flex; flex-wrap:wrap; gap:34px; justify-content:center}
.shelf-divider{display:block; width:min(560px,90%); height:auto; margin:14px auto; filter:drop-shadow(0 0 10px rgba(200,155,60,.22))}
.book-cover{width:210px; height:300px; cursor:pointer; position:relative; padding:24px 18px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; color:var(--gold-bright); background:linear-gradient(135deg,#1d3a28,#0c1e14); border:1px solid var(--gold-dim); border-radius:14px; overflow:hidden; transition:transform .2s, filter .2s}
.book-item{display:flex; flex-direction:column; align-items:center; gap:11px; cursor:pointer; width:210px}
.book-item:hover .book-cover{transform:translateY(-7px); filter:drop-shadow(0 12px 24px rgba(200,155,60,.32))}
.book-label{text-align:center}
.bl-title{display:block; font-family:var(--font-display); color:var(--gold-bright); font-size:1.05rem; line-height:1.15; text-shadow:0 0 12px rgba(240,208,112,.25)}
.bl-sub{display:block; font-family:var(--font-heading); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); margin-top:3px}
.book-cover::before{content:""; position:absolute; left:12px; right:12px; top:12px; bottom:12px; border:1px solid var(--gold-dim); border-radius:8px; pointer-events:none}
.page-right .title-page{font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,4vw,2.3rem); color:#39280f; margin:0 0 4px; line-height:1.1}
.book-cover .bc-spine{position:absolute; left:0; top:0; bottom:0; width:12px; background:linear-gradient(90deg,rgba(200,155,60,.4),rgba(200,155,60,0))}
.book-cover .bc-emblem{font-size:2.6rem; color:var(--gold)}
.book-cover.has-cover{padding:0; background-size:cover; background-position:center; overflow:hidden}
.book-cover.has-cover::before{display:none}

.book-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.book-title{font-family:var(--font-display); color:var(--gold-bright); font-size:1.15rem}
.book-page{font-family:var(--font-heading); color:var(--text-muted); font-size:.78rem; letter-spacing:.12em}
.spread{display:grid; grid-template-columns:1fr 1fr; max-width:1000px; margin:0 auto; background:#241b10; padding:10px; border:1px solid var(--gold-dim); position:relative; box-shadow:0 20px 44px rgba(0,0,0,.6); perspective:1800px}
.page{background:#e9dcbb center/cover; color:#3c2c14; padding:30px; height:600px; position:relative; overflow:hidden}
.page-left{box-shadow:inset -22px 0 30px -22px rgba(70,48,16,.6)}
.page-right{box-shadow:inset 22px 0 30px -22px rgba(70,48,16,.6)}
.p1{background-image:url('../assets/parchment-1.jpg')}
.p2{background-image:url('../assets/parchment-2.jpg')}
.p3{background-image:url('../assets/parchment-3.jpg')}
.p4{background-image:url('../assets/parchment-4.jpg')}
.p5{background-image:url('../assets/parchment-5.jpg')}
.page.s1::after,.page.s2::after,.page.s3::after{content:""; position:absolute; right:12px; bottom:12px; width:58px; height:58px; background-position:center; background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 3px 6px rgba(40,28,8,.55)); pointer-events:none}
.page.s1::after{background-image:url('../assets/wax-seal.png')}
.page.s2::after{background-image:url('../assets/wax-seal-2.png')}
.page.s3::after{background-image:url('../assets/wax-seal-3.png')}
.plate{width:100%; height:100%; min-height:340px; display:flex; align-items:center; justify-content:center}
.plate img{max-width:100%; max-height:360px; padding:7px; background:#f6eed7; border:1px solid #6f5527; box-shadow:0 6px 16px rgba(60,40,15,.4); cursor:zoom-in}
.lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(4,6,8,.92); cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:94vw; max-height:92vh; border:1px solid var(--gold-dim); border-radius:4px; box-shadow:0 18px 50px rgba(0,0,0,.7); animation:lbpop .2s ease-out}
@keyframes lbpop{from{transform:scale(.85); opacity:.4} to{transform:scale(1); opacity:1}}
.plate.no-img{font-family:var(--font-body); font-style:italic; color:#8a7448}
/* Herbárium-ív: taxonómia-cédula felül, alatta a lap képe */
.herb-page{height:100%; display:flex; flex-direction:column; gap:8px}
.herb-head{text-align:center}
.herb-page .fam{font-family:var(--font-heading); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:#90702c}
.herb-page .latin{font-family:var(--font-latin); font-style:italic; font-size:1.3rem; color:#39280f; margin:2px 0 0; line-height:1.1}
.herb-page .magyar{font-family:var(--font-body); font-size:.95rem; color:#5a4426}
.herb-page .plate{height:auto; min-height:0; flex:1}
.herb-page .plate img{max-height:430px}
.initial-page{display:flex; align-items:center; justify-content:center}
.initial{font-family:var(--font-latin); font-style:italic; font-size:clamp(2.4rem,6vw,4.2rem); color:#6e3a22; text-align:center; padding:24px 30px; border:2px solid #b89a52; box-shadow:0 0 0 6px rgba(184,154,82,.18)}
.page-right .fam{font-family:var(--font-heading); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:#90702c; margin-bottom:10px}
.page-right .latin{font-family:var(--font-latin); font-style:italic; font-size:clamp(1.7rem,3.6vw,2.2rem); color:#39280f; margin:0 0 4px; line-height:1.08}
.page-right .magyar{font-family:var(--font-body); font-size:1.2rem; color:#5a4426}
.page-right .pron{font-family:var(--font-body); font-style:italic; color:#7c6238; font-size:.98rem; margin-top:2px}
.ink-rule{height:1px; background:linear-gradient(90deg,#b59a5e,transparent); margin:16px 0}
.page-right .desc{font-family:var(--font-body); font-size:1.05rem; color:#473820; line-height:1.62}
.desc-h{display:block; font-family:var(--font-heading); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:#90702c; margin-bottom:6px}
.page-right .example{margin-top:14px; font-family:var(--font-body); font-style:italic; color:#6a5230; background:rgba(150,120,60,.12); border-left:2px solid #b59a5e; padding:8px 12px}
.book-nav{display:flex; gap:12px; justify-content:center; margin-top:16px}
.flip-page{position:absolute; top:10px; bottom:10px; transform-style:preserve-3d; z-index:5}
.flip-next{left:50%; right:10px; transform-origin:left center}
.flip-prev{left:10px; right:50%; transform-origin:right center}
.flip-front,.flip-back{position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
@keyframes flipNext{from{transform:rotateY(0)} to{transform:rotateY(-180deg)}}
@keyframes flipPrev{from{transform:rotateY(0)} to{transform:rotateY(180deg)}}
.flip-next.go{animation:flipNext .6s ease-in-out forwards}
.flip-prev.go{animation:flipPrev .6s ease-in-out forwards}
/* Elméleti kötetek — fejezet-oldalak */
.page.ch-page{overflow-y:auto}
.ch-text{font-family:var(--font-body); color:#40320f; font-size:1.0rem; line-height:1.48}
.ch-text .ch-h,.figpage .ch-h{font-family:var(--font-heading); font-weight:700; font-size:1.1rem; color:#5a3d12; margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid #c3a866}
.ch-text .ch-h:not(:first-child){margin-top:18px}
.ch-text p{margin:0 0 8px; text-align:justify; hyphens:auto}
.ch-end{min-height:340px; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#b59a5e}
.figpage{min-height:100%; display:flex; flex-direction:column; gap:10px}
.figpage .plate{height:auto; min-height:0; flex:1; flex-direction:column; gap:12px}
.figpage .plate-multi img{max-height:250px}
/* Fehér hátterű tusrajz: a pergamenbe simul, mintha a lapra rajzolták volna */
.figpage .plate img.ink{mix-blend-mode:multiply; background:transparent; border:none; box-shadow:none; padding:0}
.fig-cap{font-family:var(--font-body); font-style:italic; font-size:.88rem; color:#6a5230; line-height:1.45; border-top:1px solid #c3a866; padding-top:8px}
.ch-table{width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:.9rem; color:#40320f; line-height:1.35}
.ch-table td{border:1px solid #b59a5e; padding:5px 9px; vertical-align:top; text-align:left}
.ch-table tr:first-child td{font-family:var(--font-heading); font-weight:700; color:#5a3d12; background:rgba(181,154,94,.14)}
@media(max-width:720px){.spread{grid-template-columns:1fr} .page-left{box-shadow:inset 0 -22px 30px -22px rgba(70,48,16,.6)} .page-right{box-shadow:inset 0 22px 30px -22px rgba(70,48,16,.6)} .page{height:auto; min-height:520px}}

/* ============ Belépő / Login ============ */
.intro{position:fixed; inset:0; z-index:1000; background:#04060D url('../assets/login-hero.jpg') center/cover no-repeat; display:flex; flex-direction:column}
.intro-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease}
.intro::before{content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(rgba(4,6,13,.4), rgba(4,6,13,.8))}
.intro-bar,.intro-hero{position:relative; z-index:4}
.intro-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 24px; background:rgba(7,20,13,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--gold-dim)}
.intro-brand{font-family:var(--font-display); color:var(--gold-bright); font-size:1.2rem; letter-spacing:.04em}
.intro-login{display:flex; gap:8px}
.intro-login input{min-width:210px}
.intro-hero{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:5vh 24px 24px; transition:opacity .9s ease}
.intro-title{font-family:var(--font-display); color:var(--gold-bright); font-size:clamp(2rem,6vw,3.6rem); margin:0; text-shadow:0 3px 10px rgba(0,0,0,.75), 0 0 34px rgba(240,208,112,.4)}
.intro-sub{font-family:var(--font-body); color:var(--text-bright); font-size:1.1rem; margin:16px 0 0; max-width:580px; text-shadow:0 2px 8px rgba(0,0,0,.85)}
.intro.hidden{display:none}
.user-bar{position:fixed; top:8px; right:12px; z-index:60; display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:.72rem; letter-spacing:.06em; color:var(--text-muted); background:rgba(10,14,26,.72); padding:5px 11px; border:1px solid var(--panel-border)}
.user-bar b{color:var(--gold-bright); font-weight:600}
.logout{background:none; border:none; color:var(--arcane-blue); cursor:pointer; text-decoration:underline; font:inherit; padding:0}

/* ============ Naplóm (előrehaladás, eredmények) ============ */
.naplo-hero{position:relative; height:clamp(150px,20vh,210px); margin-bottom:26px; overflow:hidden; clip-path:var(--cut); border:1px solid var(--gold-dim); background:var(--panel-bg) url('../assets/naplo-hero.jpg') center/cover}
.naplo-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,10,6,.86) 0%, rgba(4,10,6,.45) 52%, rgba(4,10,6,0) 100%)}
.naplo-hero-text{position:absolute; left:clamp(18px,4vw,40px); top:50%; transform:translateY(-50%); z-index:1; max-width:60%}
.nh-greet{font-family:var(--font-display); color:var(--gold-bright); font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1.1; text-shadow:0 2px 12px rgba(0,0,0,.85)}
.nh-rank{font-family:var(--font-heading); color:var(--text-bright); font-size:clamp(.72rem,1.4vw,.9rem); letter-spacing:.06em; margin-top:8px; text-shadow:0 2px 8px rgba(0,0,0,.85)}
.naplo-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px}
.stat-card{display:flex; flex-direction:column; justify-content:center; background:var(--panel-bg); border:1px solid var(--panel-border); padding:16px 12px; text-align:center; clip-path:var(--cut)}
.sc-val{font-family:var(--font-display); color:var(--gold-bright); font-size:1.7rem; line-height:1}
.sc-val-sm{font-family:var(--font-heading); font-weight:700; font-size:clamp(.92rem,2.3vw,1.15rem); line-height:1.18; overflow-wrap:anywhere}
.sc-label{font-family:var(--font-heading); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-top:6px}
.naplo-h{font-family:var(--font-heading); color:var(--gold); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; text-align:center; margin:36px 0 16px; position:relative}
.naplo-h::before,.naplo-h::after{content:""; position:absolute; top:50%; width:clamp(30px,14%,90px); height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim))}
.naplo-h::before{left:6%} .naplo-h::after{right:6%; transform:scaleX(-1)}
.rank-ladder{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.rank-step{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 18px; background:var(--panel-bg); border:1px solid var(--panel-border); opacity:.45; clip-path:var(--cut)}
.rank-step.reached{opacity:1; border-color:var(--gold-dim)}
.rank-step.current{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 0 16px rgba(200,155,60,.3)}
.rs-name{font-family:var(--font-heading); color:var(--gold-bright); font-size:.8rem; letter-spacing:.05em}
.rs-xp{font-family:var(--font-heading); color:var(--text-muted); font-size:.6rem; letter-spacing:.1em}
.naplo-chapters{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:14px}
.chapter{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; background:var(--panel-bg); border:1px solid var(--panel-border); padding:16px 10px; clip-path:var(--cut)}
.ring{position:relative; width:90px; height:90px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--botanical-light) calc(var(--p)*1%), rgba(33,71,47,.4) 0)}
.ring::before{content:""; position:absolute; inset:8px; border-radius:50%; background:var(--panel-bg)}
.ring-pct{position:relative; z-index:1; font-family:var(--font-display); color:var(--gold-bright); font-size:1.05rem}
.ch-name{font-family:var(--font-body); color:var(--text-primary); font-size:.9rem; line-height:1.15}
.ch-count{font-family:var(--font-heading); color:var(--gold-bright); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase}
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px}
.badge-medal{text-align:center; padding:18px 12px; background:var(--panel-bg); border:1px solid var(--panel-border); clip-path:var(--cut); opacity:.5; filter:grayscale(.7)}
.badge-medal.earned{opacity:1; filter:none; border-color:var(--gold-dim)}
.bm-glyph{width:56px; height:56px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; font-size:1.7rem; color:var(--text-muted); background:var(--deep-navy); border:1px solid var(--panel-border)}
.badge-medal.earned .bm-glyph{color:var(--gold-bright); border-color:var(--gold); background:radial-gradient(circle,#1f3b29,#0b1c12); box-shadow:0 0 16px rgba(200,155,60,.45)}
.bm-name{font-family:var(--font-heading); color:var(--gold-bright); font-size:.82rem; letter-spacing:.04em}
.badge-medal:not(.earned) .bm-name{color:var(--text-muted)}
.bm-desc{font-family:var(--font-body); font-size:.78rem; color:var(--text-muted); margin-top:3px; font-style:italic}
.badge-medal.earned .bm-desc{color:var(--botanical-light); font-style:normal}
@media(max-width:720px){.naplo-hero{height:140px} .naplo-hero-text{max-width:78%}}

/* ============ Leírásból felismerés ============ */
.leiras-card{max-width:760px; margin:0 auto}
.leiras-desc-wrap{position:relative; background:var(--panel-bg); border:1px solid var(--panel-border); clip-path:var(--cut); padding:26px 26px 22px; text-align:center; margin-bottom:18px}
.leiras-eyebrow{font-family:var(--font-heading); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:12px}
.leiras-desc{font-family:var(--font-body); font-style:italic; font-size:1.18rem; line-height:1.55; color:var(--text-bright)}
.leiras-answer{margin-top:16px; opacity:0; transition:opacity .35s}
.leiras-answer.show{opacity:1}
.leiras-answer .lat{font-family:var(--font-latin); font-style:italic; color:var(--gold-bright); font-size:1.15rem; margin-right:8px}
.leiras-answer span:last-child{font-family:var(--font-body); color:var(--text-primary)}

/* ============ Rúnavésés (hiányzó rúnák behúzása) ============ */
.runa-card{max-width:680px; margin:0 auto; text-align:center}
.runa-prompt{font-family:var(--font-heading); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.runa-hun{font-family:var(--font-body); font-size:1.5rem; color:var(--text-bright)}
.runa-stone{position:relative; box-sizing:border-box; max-width:600px; margin:18px auto; aspect-ratio:1456/816; display:flex; align-items:center; justify-content:center; padding:9% 11%; border-radius:6px; background:#0c1e14 url('../assets/runa-stone.jpg') center/100% 100% no-repeat; box-shadow:0 12px 30px rgba(0,0,0,.55)}
.rune-slots{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; min-height:48px}
.rune{width:36px; height:46px; display:grid; place-items:center; font-family:var(--font-rune); font-size:1.6rem; line-height:1; text-transform:uppercase; border-radius:4px; user-select:none}
.rune.fixed{color:#e7d8af; text-shadow:0 1px 0 rgba(255,255,255,.22), 0 -1px 3px rgba(0,0,0,.9)}
.rune.slot{border:2px dashed rgba(200,155,60,.55); background:rgba(2,4,3,.5); box-shadow:inset 0 3px 9px rgba(0,0,0,.8); cursor:pointer}
.rune.slot.drop{border-color:var(--gold-bright); background:rgba(200,155,60,.22)}
.rune.placed{color:var(--gold-bright); background:linear-gradient(160deg,#20492f,#0c1e14); border:1px solid var(--gold-dim); cursor:pointer; box-shadow:0 3px 7px rgba(0,0,0,.55)}
.rune.placed.ok{color:var(--botanical-light); border-color:var(--botanical-light)}
.rune.placed.bad{color:#e0936f; border-color:#b4462f}
.rune-gap{width:16px}
.rune-tray{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:16px auto 2px; max-width:520px; min-height:48px}
.rune-tile{width:42px; height:48px; display:grid; place-items:center; font-family:var(--font-rune); font-size:1.7rem; line-height:1; text-transform:uppercase; color:var(--gold-bright); background:linear-gradient(160deg,#2c4d35,#13271a); border:1px solid var(--gold); border-radius:5px; cursor:grab; box-shadow:0 3px 8px rgba(0,0,0,.5); transition:transform .12s, box-shadow .12s}
.rune-tile:hover{transform:translateY(-2px)}
.rune-tile:active{cursor:grabbing}
.rune-tile.picked{outline:2px solid var(--gold-bright); box-shadow:0 0 14px rgba(240,208,112,.55)}
.rune.slot:focus-visible, .rune.placed:focus-visible, .rune-tile:focus-visible, .plate img:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px; box-shadow:0 0 12px rgba(240,208,112,.5)}
.runa-result{min-height:1.4em; margin-top:8px; font-family:var(--font-heading); font-size:.95rem}
.runa-result.ok{color:var(--botanical-light)}
.runa-result.bad{color:#e0936f}
.runa-result .lat{font-family:var(--font-latin); font-style:italic; color:var(--gold-bright)}
.runa-actions{display:flex; gap:12px; justify-content:center; margin-top:12px}