*{box-sizing:border-box;margin:0;padding:0;}
:root{--bg0:#07091a;--bg1:#0c1028;--bg2:#121540;--bg3:#1a1c50;--gold:#c9a84c;--gold2:#e8c860;--parch:#f8edcc;--parch2:#ecd9a8;--ink:#1e0c04;--bd:#1e2550;--bdg:#5a3e14;--lt:#c4b490;--mt:#9aa8d0;--dim:#3a4490;}
body{font-family:'IM Fell English',Georgia,serif;background:var(--bg0);display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;}
.wrap{width:100%;max-width:820px;height:100vh;max-height:800px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg0);position:relative;}
.splash{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg0);}
.sp-title{font-family:'Cinzel',Georgia,serif;font-size:28px;color:var(--gold);letter-spacing:.1em;text-align:center;}
.sp-sub{font-size:14px;color:var(--mt);text-align:center;line-height:1.9;max-width:360px;font-style:italic;}
.sp-key{margin-top:4px;font-size:12px;color:var(--mt);text-align:center;}
.sp-key input{background:var(--bg2);border:1px solid var(--bd);color:var(--lt);padding:6px 10px;border-radius:4px;font-size:12px;width:260px;font-family:monospace;}
.sp-key input::placeholder{color:#6878a8;}
.hdr{position:relative;z-index:10;padding:8px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:rgba(7,9,26,.97);}
.hdr-l{display:flex;align-items:center;gap:6px;}
.hdr-title{font-family:'Cinzel',Georgia,serif;font-size:13px;color:var(--gold);letter-spacing:.05em;}
.hbadge{font-size:10px;padding:2px 8px;border-radius:99px;border:1px solid;font-style:italic;}
.lvlbadge{font-size:10px;padding:2px 7px;border-radius:99px;background:rgba(201,168,76,.1);color:var(--gold);border:1px solid #4a3810;font-style:italic;}
.hdr-r{display:flex;align-items:center;gap:10px;}
.streak-d{display:flex;align-items:center;gap:3px;}
.streak-n{color:var(--gold2);font-size:15px;}
.streak-lbl{color:var(--mt);font-size:15px;}
.pts-disp{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lt);}
.pts-n{font-size:15px;color:var(--gold2);}
.hdr-lbl{font-size:15px;color:var(--mt);}
.daily-goal{display:flex;align-items:center;gap:4px;}
.dgb{width:28px;height:4px;background:var(--bg2);border-radius:2px;border:1px solid var(--bd);overflow:hidden;}
.dgb-f{height:100%;border-radius:2px;background:var(--gold);transition:width .4s;}
.abtn{background:none;border:none;cursor:pointer;color:var(--mt);font-size:15px;padding:4px;}
.abtn:hover{color:var(--gold);}
.skip-btn{background:none;border:none;cursor:pointer;color:var(--mt);font-size:15px;padding:4px;}
.skip-btn:hover{color:var(--gold);}
.ctabs{position:relative;z-index:10;display:flex;border-bottom:1px solid var(--bd);background:rgba(7,9,22,.97);}
.ctab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.ctab:hover{background:rgba(201,168,76,.05);}
.cport{width:42px;height:42px;border-radius:50%;overflow:hidden;border:1.5px solid var(--dim);}
.cname{font-size:10px;color:var(--mt);font-style:italic;}
.ctab.active .cname{color:var(--gold);}
.mdot{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:background .5s;}
.main{display:flex;flex:1;overflow:hidden;position:relative;z-index:10;}
.ccol{display:flex;flex-direction:column;flex:1;min-width:0;}
.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent;}
.msgs::-webkit-scrollbar{width:3px;}.msgs::-webkit-scrollbar-thumb{background:var(--bd);}
.msg{display:flex;gap:8px;align-items:flex-start;}
.msg.u{flex-direction:row-reverse;}
.mav{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid var(--bd);flex-shrink:0;}
.bbl{max-width:78%;padding:9px 13px;font-size:13px;line-height:1.7;}
.msg.u .bbl{background:var(--bg3);color:var(--lt);border:1px solid var(--bd);border-radius:10px 3px 10px 10px;font-family:Georgia,sans-serif;}
.msg.a .bbl{background:var(--parch);color:var(--ink);border:1px solid var(--bdg);border-radius:3px 10px 10px 10px;}
.bbl .note{display:block;font-size:11px;color:#7a4e18;margin-top:7px;padding-top:6px;border-top:1px solid rgba(139,105,20,.3);font-style:italic;}
.spk-btn{background:none;border:none;cursor:pointer;color:#7a4e18;padding:1px 4px;vertical-align:middle;display:inline-flex;align-items:center;}
.spk-btn:hover{color:var(--gold);}
.spk-btn i{font-size:12px;}
.spell-flash{animation:sflash 3s ease-out;}
@keyframes sflash{
  0%{box-shadow:0 0 0 3px rgba(232,200,96,.95),0 0 26px 8px rgba(232,200,96,.85);}
  60%{box-shadow:0 0 0 3px rgba(232,200,96,.5),0 0 18px 5px rgba(232,200,96,.4);}
  100%{box-shadow:0 0 0 0 rgba(232,200,96,0),0 0 0 0 rgba(232,200,96,0);}
}
.chal{margin:8px 12px 0;padding:9px 13px;background:var(--parch2);border:1px solid var(--bdg);border-radius:3px;flex-shrink:0;}
.chal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.chal-lbl{font-size:9px;color:#7a5010;letter-spacing:.09em;font-family:'Cinzel',Georgia,serif;}
.chal-txt{font-size:12px;color:var(--ink);font-style:italic;line-height:1.5;}
.chal-act{font-size:11px;color:#7a5520;cursor:pointer;text-decoration:underline;margin-top:4px;display:inline-block;}
.inp-area{padding:9px 12px;border-top:1px solid var(--bd);background:rgba(7,9,22,.98);flex-shrink:0;}
.inp-row{display:flex;gap:6px;align-items:flex-end;}
textarea#ui{flex:1;resize:none;border-radius:4px;padding:7px 10px;font-size:13px;font-family:'IM Fell English',Georgia,serif;min-height:36px;max-height:72px;line-height:1.5;background:var(--bg2);color:var(--lt);border:1px solid var(--bd);}
textarea#ui::placeholder{color:#6878a8;}
.ibtn{width:34px;height:34px;border-radius:4px;border:1px solid var(--bd);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ibtn:hover{border-color:var(--gold);}.ibtn:disabled{opacity:.35;cursor:not-allowed;}
.ibtn i{font-size:15px;color:var(--mt);}
.ibtn.send{background:#740001;border-color:#9a1010;}.ibtn.send:hover{background:#9a0000;}.ibtn.send i{color:#f5e5c0;}
.ibtn.mic.rec{border-color:var(--gold);background:rgba(201,168,76,.12);}.ibtn.mic.rec i{color:var(--gold);}
.hints{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;}
.hchip{font-size:11px;color:var(--gold);background:rgba(201,168,76,.07);border:.5px solid var(--bdg);border-radius:99px;padding:3px 10px;cursor:pointer;font-style:italic;}
.hchip:hover{background:rgba(201,168,76,.18);}
.side{width:186px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--bd);background:rgba(6,8,20,.98);overflow:hidden;}
.ss{padding:9px 11px;border-bottom:1px solid var(--bd);flex-shrink:0;}
.stitle{font-size:9px;color:#b09848;letter-spacing:.09em;margin-bottom:6px;font-family:'Cinzel',Georgia,serif;}
.hg{width:100%;height:9px;background:var(--bg2);border-radius:5px;border:1px solid var(--bd);overflow:hidden;margin-bottom:3px;}
.hg-f{height:100%;border-radius:5px;background:var(--gold);transition:width .6s;}
.pts-sub{font-size:10px;color:var(--mt);text-align:center;}
.stabs{display:flex;border-bottom:1px solid var(--bd);flex-shrink:0;}
.stab{flex:1;padding:5px 2px;border:none;background:none;font-size:10px;color:var(--mt);cursor:pointer;border-bottom:2px solid transparent;font-family:'Cinzel',Georgia,serif;}
.stab.active{color:var(--gold);border-bottom-color:var(--gold);}
.stab:hover{color:var(--lt);}
.scon{flex:1;overflow-y:auto;padding:6px 11px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent;}
.scon::-webkit-scrollbar{width:2px;}.scon::-webkit-scrollbar-thumb{background:var(--bd);}
.vi{padding:4px 0;border-bottom:.5px solid var(--bd);}.vi:last-child{border-bottom:none;}
.vw{font-size:12px;color:var(--gold);font-style:italic;}.vd{font-size:10px;color:var(--mt);}
.gi{padding:5px 0;border-bottom:.5px solid var(--bd);}.gi:last-child{border-bottom:none;}
.mi{padding:4px 0;border-bottom:.5px solid var(--bd);}.mi:last-child{border-bottom:none;}
.mw{font-size:11px;color:#d04040;text-decoration:line-through;}
.mr{font-size:11px;color:#5ab030;font-weight:500;}
.mn{font-size:10px;color:var(--mt);margin-top:1px;}
.edim{font-size:11px;color:#6878a8;font-style:italic;padding:4px 0;}
.wknav{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 0 8px;margin-bottom:6px;border-bottom:.5px solid var(--bd);}
.wknav-btn{background:none;border:1px solid var(--bdg);color:var(--gold);width:20px;height:20px;border-radius:3px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wknav-btn:disabled{opacity:.25;cursor:not-allowed;}
.wknav-lbl{font-size:10px;color:var(--mt);font-style:italic;text-align:center;}
.vadd{margin-bottom:8px;padding:7px;background:var(--bg2);border:1px solid var(--bd);border-radius:4px;}
.vadd input{width:100%;background:var(--bg3);border:1px solid var(--bd);color:var(--lt);padding:4px 6px;border-radius:3px;font-size:11px;margin-bottom:5px;font-family:Georgia,sans-serif;}
.vadd input::placeholder{color:#6878a8;}
.vadd-row{display:flex;gap:5px;}
.vadd-row button{flex:1;font-size:10px;padding:4px 0;border-radius:3px;border:1px solid var(--bdg);background:none;color:var(--gold);cursor:pointer;font-family:'Cinzel',Georgia,serif;}
.vadd-row button:hover{background:rgba(201,168,76,.1);}
.sel-vocab-btn{position:absolute;z-index:60;font-size:11px;color:var(--ink);background:var(--gold2);border:1px solid var(--bdg);border-radius:99px;padding:4px 11px;cursor:pointer;display:none;font-family:'Cinzel',Georgia,serif;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.sel-vocab-btn:hover{background:var(--gold);}
.owl-wrap{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden;}
.owl{position:absolute;font-size:22px;animation:owlfly 2.2s ease-in-out forwards;}
@keyframes owlfly{0%{left:-60px;}40%{transform:translateY(-18px);}70%{transform:translateY(-8px);}100%{left:calc(100% + 60px);transform:translateY(0);}}
.typing-bb{display:flex;gap:4px;align-items:center;padding:2px 0;}
.dot{width:5px;height:5px;border-radius:50%;background:#8b6914;animation:bonce 1.2s infinite;}
.dot:nth-child(2){animation-delay:.2s;}.dot:nth-child(3){animation-delay:.4s;}
@keyframes bonce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
.empty-ch{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--dim);font-size:13px;font-style:italic;padding:24px;text-align:center;}
.fc-ov{position:absolute;inset:0;z-index:200;background:rgba(6,8,20,.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.fc-card{width:280px;min-height:170px;background:var(--parch);border:1px solid var(--bdg);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;cursor:pointer;text-align:center;}
.fc-word{font-family:'IM Fell English',Georgia,serif;font-size:30px;color:var(--ink);}
.fc-def{font-size:15px;color:#7a4e18;font-style:italic;display:none;}
.fc-hint{font-size:11px;color:#8b6914;margin-top:4px;}
.fc-nav{display:flex;gap:14px;}
.fc-btn{background:none;border:1px solid var(--bdg);color:var(--gold);padding:7px 18px;border-radius:4px;cursor:pointer;font-family:'IM Fell English',Georgia,serif;font-size:13px;}
.fc-btn:hover{border-color:var(--gold);}
.fc-close{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--mt);font-size:22px;cursor:pointer;line-height:1;}
.fc-close:hover{color:var(--lt);}
.settings-ov{position:absolute;inset:0;z-index:200;background:rgba(6,8,20,.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;}
.settings-card{width:280px;max-height:80%;overflow-y:auto;background:var(--parch);border:1px solid var(--bdg);border-radius:6px;padding:18px;}
.settings-tabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--bdg);padding-bottom:8px;}
.settings-tab{flex:1;padding:5px;border:none;background:none;font-family:'Cinzel',Georgia,serif;font-size:11px;color:#7a5520;cursor:pointer;border-bottom:2px solid transparent;}
.settings-tab.active{color:#5a3000;border-bottom-color:#8b6914;font-weight:600;}
.svc-row{margin-bottom:14px;}
.svc-lbl{font-size:11px;color:#5a3000;margin-bottom:4px;font-family:'Cinzel',Georgia,serif;}
.svc-row select,.svc-row input{width:100%;padding:5px;border-radius:4px;border:1px solid var(--bdg);background:#fffaf0;color:var(--ink);font-size:12px;margin-bottom:5px;font-family:'IM Fell English',Georgia,serif;}
.svc-row button{font-size:11px;padding:4px 10px;border-radius:3px;border:1px solid var(--bdg);background:none;color:#7a5520;cursor:pointer;}
.svc-row button:hover{background:rgba(139,105,20,.1);}
.vi-row,.mi-row{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;}
.vi-acts{display:flex;gap:2px;flex-shrink:0;}
.vi-btn{background:none;border:none;color:#8b6914;cursor:pointer;padding:1px 3px;font-size:10px;}
.vi-btn:hover{color:var(--gold);}
.toast{position:absolute;top:62px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:4px;font-family:'Cinzel',Georgia,serif;font-size:12px;z-index:300;white-space:nowrap;pointer-events:none;}
.order-letter{background:var(--parch2);border:1px solid var(--bdg);border-radius:4px;padding:12px;margin-bottom:10px;text-align:center;}
.order-letter .owl-stamp{font-size:20px;display:block;margin-bottom:4px;}
.order-letter .order-desc{font-size:11px;color:#7a5010;font-style:italic;margin-bottom:8px;}
.order-scrambled{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:36px;padding:6px;background:rgba(139,105,20,.08);border-radius:4px;border:1px dashed var(--bdg);margin-bottom:8px;}
.order-target{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:36px;padding:6px;background:rgba(201,168,76,.06);border-radius:4px;border:1px solid var(--bdg);}
.word-chip{padding:5px 11px;border-radius:99px;background:var(--gold2);color:var(--ink);font-size:12px;cursor:grab;border:1px solid var(--bdg);font-family:'IM Fell English',Georgia,serif;user-select:none;}
.word-chip:active{cursor:grabbing;}
.word-chip.placed{background:var(--parch);border-color:#8b6914;}
.word-chip.hint-glow{box-shadow:0 0 0 2px #4aa020,0 0 8px rgba(74,160,32,.4);}
.order-actions{display:flex;gap:5px;margin-top:8px;}
.order-actions button{flex:1;font-size:10px;padding:5px 0;border-radius:3px;border:1px solid var(--bdg);background:none;color:var(--gold);cursor:pointer;font-family:'Cinzel',Georgia,serif;}
.order-actions button:hover{background:rgba(201,168,76,.1);}
.order-result{margin-top:8px;padding:8px;border-radius:3px;text-align:center;font-size:12px;}
.order-result .correct-line{color:#5ab030;font-weight:500;}
.order-result .incorrect-line{color:#d04040;}
.order-result .restored-sentence{font-size:13px;color:var(--ink);font-style:italic;margin-top:4px;}