/* Lyo game styles */
/* ── Lyo screens ── */
.lyo-screen{display:none;width:100%;padding:20px;animation:lyoFade 0.3s ease;}
.lyo-screen.active{display:block;}
@keyframes lyoFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lcard{background:#1a1610;border:1px solid #3d3020;border-radius:12px;padding:30px;box-shadow:0 8px 40px rgba(0,0,0,0.6);max-width:720px;margin:0 auto;}
.lcard h1{font-family:'Cinzel',serif;font-size:1.8rem;color:#c9a44a;text-align:center;margin-bottom:8px;}
.lcard h2{font-family:'Cinzel',serif;font-size:1.15rem;color:#c9a44a;margin-bottom:16px;}
.lcard h3{font-family:'Cinzel',serif;font-size:0.7rem;color:#7a6030;margin-bottom:9px;letter-spacing:0.12em;text-transform:uppercase;}
.lsubtitle{text-align:center;color:#8a7a60;font-style:italic;margin-bottom:26px;font-size:1rem;}
.ldivider{border:none;border-top:1px solid #3d3020;margin:18px 0;}
.lbtn{display:inline-block;padding:11px 22px;border:none;border-radius:8px;cursor:pointer;font-family:'Cinzel',serif;font-size:0.85rem;letter-spacing:0.04em;transition:all 0.2s;text-align:center;}
.lbtn-primary{background:linear-gradient(135deg,#c9a44a,#7a6030);color:#0e0c0a;font-weight:700;width:100%;padding:13px;font-size:0.93rem;}
.lbtn-primary:hover{filter:brightness(1.15);transform:translateY(-1px);}
.lbtn-secondary{background:#241e16;color:#8a7a60;border:1px solid #3d3020;}
.lbtn-secondary:hover{border-color:#7a6030;color:#e8dcc8;}
.lvl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px;margin-bottom:8px;}
.lmood-sec{margin-bottom:20px;}
.lmood-hd{font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:#c9a44a;border-bottom:1px solid #3d3020;padding-bottom:6px;margin-bottom:10px;}
.lvl-card{background:#241e16;border:1px solid #3d3020;border-radius:8px;padding:13px;cursor:pointer;transition:all 0.2s;}
.lvl-card:hover{border-color:#c9a44a;transform:translateY(-2px);box-shadow:0 4px 20px rgba(201,164,74,0.1);}
.lvl-card .lnum{font-family:'Cinzel',serif;font-size:0.68rem;color:#7a6030;letter-spacing:0.1em;margin-bottom:3px;}
.lvl-card .ldesc{font-size:0.82rem;color:#8a7a60;line-height:1.4;}
.lvl-card.lgreen{border-left:3px solid #27ae60;}
.lvl-card.lyellow{border-left:3px solid #f39c12;}
.lvl-card.lred{border-left:3px solid #e74c3c;}
.lvl-card.lpurple{border-left:3px solid #8e44ad;}
.lvl-card.ous-sel{background:rgba(201,164,74,0.08);border-color:#7a6030;}
.lcheck-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.lcheck-pill{display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid #3d3020;border-radius:20px;cursor:pointer;font-size:0.87rem;user-select:none;color:#e8dcc8;transition:all 0.15s;}
.lcheck-pill:hover{border-color:#7a6030;}
.lcheck-pill input{display:none;}
.lcheck-pill.checked{background:rgba(201,164,74,0.12);border-color:#c9a44a;color:#e8c87a;}
.lsett-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.lfield label{display:block;font-size:0.72rem;color:#8a7a60;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;font-family:'Cinzel',serif;}
#lyo-wrap select{width:100%;padding:9px 12px;background:#241e16;border:1px solid #3d3020;border-radius:8px;color:#e8dcc8;font-size:0.93rem;cursor:pointer;}
#lyo-wrap select:focus{outline:none;border-color:#c9a44a;}
/* mode selector */
.lmode-sel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.lmode-btn{padding:16px 10px;background:#241e16;border:2px solid #3d3020;border-radius:8px;color:#8a7a60;cursor:pointer;text-align:center;font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.04em;transition:all 0.18s;}
.lmode-btn:hover{border-color:#7a6030;color:#e8dcc8;}
.lmode-btn.selected{border-color:#c9a44a;background:rgba(201,164,74,0.1);color:#c9a44a;}
.lmode-btn .lm-icon{font-size:1.5rem;display:block;margin-bottom:5px;}
.lmode-btn .lm-hint{display:block;font-size:0.7rem;color:#8a7a60;font-family:'Noto Serif',serif;font-style:italic;letter-spacing:0;text-transform:none;margin-top:2px;}
/* game header */
.lgame-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid #3d3020;}
.lstat{text-align:center;min-width:60px;}
.lstat-lbl{font-size:0.63rem;color:#8a7a60;text-transform:uppercase;letter-spacing:0.1em;font-family:'Cinzel',serif;margin-bottom:2px;}
.lstat-val{font-family:'Cinzel',serif;font-size:1.2rem;color:#c9a44a;font-weight:700;}
.ltimer-warn{color:#e74c3c!important;}
.ltimer-caut{color:#f39c12!important;}
/* question box */
.lqbox{background:#241e16;border:1px solid #3d3020;border-radius:8px;padding:16px 20px;margin-bottom:20px;}
.lqbox .lq-main{font-size:1.05rem;line-height:1.5;margin-bottom:8px;color:#e8dcc8;font-family:'Noto Serif',serif;}
.lqbox .lq-main em{color:#c9a44a;font-style:normal;font-weight:700;font-family:'Noto Serif',serif;letter-spacing:0.02em;}
.lq-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:6px;}
.lq-tag{display:inline-block;padding:2px 9px;border-radius:12px;font-size:0.75rem;font-family:'Cinzel',serif;letter-spacing:0.04em;border:1px solid #3d3020;color:#8a7a60;background:#1a1610;white-space:nowrap;}
.lq-tag.voice{border-color:#5a4a2a;color:#c9a44a;}
.lq-tag.tense{border-color:#2a4a3a;color:#5dca8a;}
.lq-tag.mood{border-color:#3a2a5a;color:#a07cd0;}
.lq-tag.gender{border-color:#4a2a3a;color:#c07090;}
.lq-tag.form{border-color:#3a3a2a;color:#c0b060;}
/* mc */
.lopts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.lopt-btn{padding:15px 10px;background:#241e16;border:1px solid #3d3020;border-radius:8px;color:#e8dcc8;font-size:1.2rem;font-family:'Noto Serif',serif;cursor:pointer;transition:all 0.15s;text-align:center;}
.lopt-btn:hover:not(:disabled){border-color:#c9a44a;background:rgba(201,164,74,0.08);transform:translateY(-1px);}
.lopt-btn:disabled{cursor:default;}
.lopt-btn.lcorrect{background:rgba(39,174,96,0.2);border-color:#27ae60;color:#5dca8a;}
.lopt-btn.lwrong{background:rgba(192,57,43,0.2);border-color:#c0392b;color:#e67e6a;}
/* fill-in */
.lfi-wrap{display:none;}
.lfi-wrap.active{display:block;}
.lstem-display{display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.lstem-part{font-family:'Noto Serif',serif;font-size:1.9rem;color:#e8dcc8;padding:9px 13px;background:#241e16;border:1px solid #3d3020;border-radius:8px 0 0 8px;border-right:none;min-width:70px;text-align:center;}
.lfi-inp-wrap{display:flex;align-items:stretch;}
#lyo-fi-input{font-family:'Noto Serif',serif;font-size:1.9rem;padding:9px 14px;background:#241e16;border:2px solid #7a6030;border-radius:0 8px 8px 0;color:#e8c87a;width:140px;outline:none;letter-spacing:0.02em;caret-color:#c9a44a;}
#lyo-fi-input:focus{border-color:#c9a44a;}
#lyo-fi-input.lcorrect{border-color:#27ae60;color:#5dca8a;background:rgba(39,174,96,0.1);}
#lyo-fi-input.lwrong{border-color:#c0392b;color:#e67e6a;background:rgba(192,57,43,0.1);}
.lfi-submit{width:100%;padding:12px;margin-top:14px;background:linear-gradient(135deg,#c9a44a,#7a6030);color:#0e0c0a;border:none;border-radius:8px;font-family:'Cinzel',serif;font-size:0.95rem;font-weight:700;cursor:pointer;letter-spacing:0.05em;transition:filter 0.15s,transform 0.15s;}
.lfi-submit:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px);}
.lfi-submit:disabled{opacity:0.5;cursor:default;}
/* polytonic keyboard */
.lpoly-kb{margin-top:10px;background:#241e16;border:1px solid #3d3020;border-radius:8px;overflow:hidden;}
.lpoly-toggle{width:100%;padding:7px 12px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:#8a7a60;font-family:'Cinzel',serif;font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.15s;}
.lpoly-toggle:hover{color:#c9a44a;}
.lpoly-arrow{transition:transform 0.2s;}
.lpoly-toggle.open .lpoly-arrow{transform:rotate(180deg);}
.lpoly-body{display:none;padding:10px;border-top:1px solid #3d3020;}
.lpoly-body.open{display:block;}
/* diacritic selector groups */
.lpoly-diac-row{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #3d3020;}
.lpoly-kb-groups{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;}
.lpoly-kb-group{display:flex;flex-direction:column;gap:4px;}
.lpoly-kb-group-lbl{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.08em;text-transform:uppercase;color:#5a4a2a;padding-left:2px;}
.lpoly-kb-group-btns{display:flex;gap:5px;}
.lpoly-dkey{min-width:42px;padding:6px 5px;border-radius:6px;border:1px solid #3d3020;font-family:'Noto Serif',serif;font-size:1rem;cursor:pointer;text-align:center;background:#1a1610;color:#e8dcc8;transition:all 0.12s;position:relative;}
.lpoly-dkey:hover{border-color:#c9a44a;background:rgba(201,164,74,0.1);}
.lpoly-dkey.ldkey-active{border-color:#c9a44a;background:rgba(201,164,74,0.22);color:#e8c87a;box-shadow:0 0 0 2px rgba(201,164,74,0.3);}
.lpoly-dkey .ldkey-label{display:block;font-size:0.55rem;color:#8a7a60;font-family:'Cinzel',serif;letter-spacing:0.05em;margin-top:1px;text-transform:uppercase;}
/* vowel row */
.lpoly-vowel-row{display:flex;gap:6px;margin-bottom:4px;align-items:center;}
.lpoly-vlabel{font-family:'Noto Serif',serif;font-size:1rem;font-weight:600;color:#7a6030;min-width:14px;text-align:center;flex-shrink:0;}
.lpoly-vkeys{display:flex;gap:4px;flex-wrap:wrap;}
.lpoly-vkey{min-width:28px;padding:3px 2px;border-radius:5px;border:1px solid #3d3020;font-family:'Noto Serif',serif;font-size:1rem;cursor:pointer;text-align:center;background:#1a1610;color:#e8dcc8;transition:all 0.1s;line-height:1.5;}
.lpoly-vkey:hover{border-color:#c9a44a;background:rgba(201,164,74,0.08);}
.lpoly-vkey:active{transform:scale(0.88);}
/* feedback */
.lfeedback{text-align:center;font-size:0.93rem;min-height:24px;color:#8a7a60;font-style:italic;margin-bottom:6px;}
.lfeedback.lok{color:#5dca8a;}
.lfeedback.lerr{color:#e67e6a;}
/* end screen */
.lend-screen{text-align:center;}
.lbig-score{font-family:'Cinzel',serif;font-size:3.5rem;color:#c9a44a;font-weight:700;line-height:1;margin:12px 0 6px;}
.lend-btns{display:flex;gap:10px;justify-content:center;margin-top:18px;}
.lend-btns .lbtn{min-width:150px;}
#lyo-screen-end .lcard{max-height:84vh;overflow-y:auto;}
.lmistakes-hdr{font-family:'Cinzel',serif;font-size:0.75rem;letter-spacing:0.1em;color:#7a6030;text-transform:uppercase;margin-bottom:10px;}
.lmistakes-list{display:flex;flex-direction:column;gap:9px;}
.lmistake-row{background:#241e16;border:1px solid #3d3020;border-left:3px solid #c0392b;border-radius:8px;padding:9px 13px;font-size:0.9rem;}
.lm-q{color:#8a7a60;font-style:italic;margin-bottom:4px;font-size:0.85rem;}
.lm-ans{display:flex;align-items:center;gap:9px;font-family:'Noto Serif',serif;font-size:1.05rem;}
.lm-wrong{color:#e67e6a;text-decoration:line-through;}
.lm-correct{color:#5dca8a;font-weight:600;}
.lback-link{display:inline-flex;align-items:center;gap:5px;color:#8a7a60;cursor:pointer;font-size:0.87rem;margin-bottom:16px;background:none;border:none;font-family:inherit;transition:color 0.15s;}
.lback-link:hover{color:#c9a44a;}
.llives-row{display:flex;justify-content:center;font-size:1.2rem;gap:2px;}
.lerr-msg{color:#e74c3c;font-size:0.87rem;margin-bottom:10px;}
.lscreen-levels .lcard{max-height:82vh;overflow-y:auto;}
/* ── CHRONO MODE (Χρονική Αντικατάσταση) ── */
.lyo-chrono-table{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.lyo-chrono-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;padding:4px 0;}
/* Given tense row — highlighted in-place */
.lyo-chrono-given-row{
  background:rgba(201,164,74,.08);border:1px solid rgba(201,164,74,.3);
  border-left:3px solid #c9a44a;border-radius:7px;padding:8px 12px;
}
.lyo-chrono-given-row .lyo-chrono-tense{color:#c9a44a;}
.lyo-chrono-tense{font-family:'Cinzel',serif;font-size:.78rem;color:#7a6030;letter-spacing:.06em;text-transform:uppercase;}
.lyo-chrono-input-wrap{display:flex;align-items:center;}
.lyo-chrono-stem{font-family:'Noto Serif',serif;font-size:1.5rem;color:#e8dcc8;padding:6px 10px;background:#241e16;border:1px solid #3d3020;border-right:none;border-radius:8px 0 0 8px;}
.lyo-chrono-given-stem{color:#c9a44a;background:rgba(201,164,74,.06);border-color:rgba(201,164,74,.3);}
.lyo-chrono-given-val{font-family:'Noto Serif',serif;font-size:1.4rem;color:#e8c87a;font-weight:600;letter-spacing:.02em;padding:6px 12px;background:rgba(201,164,74,.06);border:1px solid rgba(201,164,74,.3);border-radius:0 7px 7px 0;}
.lyo-chrono-given-val.no-stem{border-radius:7px;}
.lyo-chrono-inp{font-family:'Noto Serif',serif;font-size:1.5rem;padding:6px 12px;background:#241e16;border:2px solid #7a6030;border-radius:0 8px 8px 0;color:#e8c87a;outline:none;caret-color:#c9a44a;width:150px;letter-spacing:.02em;}
.lyo-chrono-inp.no-stem{border-radius:8px;width:220px;}
.lyo-chrono-inp:focus{border-color:#c9a44a;}
.lyo-chrono-inp.lcorrect{border-color:#27ae60;color:#5dca8a;background:rgba(39,174,96,.1);}
.lyo-chrono-inp.lwrong{border-color:#c0392b;color:#e67e6a;background:rgba(192,57,43,.1);}
.lyo-chrono-hint{grid-column:2;font-size:.83rem;padding:3px 8px;color:#8a7a60;}
@media(max-width:500px){.lyo-chrono-row{grid-template-columns:1fr;gap:4px;}}
</style>