/* LexiPlay · Sprint 002.1 Lexi Home
   Production Increment Foundation
   Δεν είναι demo. Είναι η πρώτη μόνιμη βάση του Lexi Home.
*/

:root{
    --ink:#241b14;
    --muted:#755f4b;
    --line:rgba(69,43,22,.17);
    --paper:#fff8ec;
    --paper2:#fffdf7;
    --wood:#895832;
    --wood-dark:#5b351f;
    --fox:#d9772f;
    --fox-dark:#9e4d1f;
    --fox-light:#ffd9ae;
    --green:#5e8d54;
    --shadow:0 24px 70px rgba(63,37,15,.18);
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
    margin:0;
    font-family:"Segoe UI", Arial, sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.9), transparent 34%),
        linear-gradient(135deg,#efe0ce,#fbf1e4);
}

body.mode-evening{
    background:
        radial-gradient(circle at 12% 6%, rgba(255,231,196,.55), transparent 34%),
        linear-gradient(135deg,#dfc3a7,#f5dfc3);
}

body.mode-night{
    background:
        radial-gradient(circle at 12% 6%, rgba(255,241,196,.2), transparent 34%),
        linear-gradient(135deg,#202337,#5e4b69);
}

.app-stage{
    width:min(1220px,96vw);
    min-height:calc(100vh - 32px);
    margin:16px auto;
    border:1px solid var(--line);
    border-radius:30px;
    background:rgba(255,248,236,.84);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.mode-night .app-stage{background:rgba(46,39,55,.82);color:#fff7e8}

.topbar{
    min-height:76px;
    padding:14px 22px;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:18px;
    align-items:center;
}

.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
    width:48px;height:48px;
    display:grid;place-items:center;
    border-radius:17px;
    background:#fffdf8;
    box-shadow:0 8px 20px rgba(62,37,14,.12);
    font-size:25px;
}
.brand-name{font-size:23px;font-weight:850;letter-spacing:-.03em}
.brand-line{font-size:12px;color:var(--muted);font-weight:650}
.mode-night .brand-line{color:#e4d0ba}

.main-nav{
    display:flex;
    gap:6px;
    padding:6px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.52);
}
.main-nav a{
    color:inherit;
    text-decoration:none;
    padding:9px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:750;
}
.main-nav a.active,
.main-nav a:hover{background:#fffaf1}
.mode-night .main-nav a.active,
.mode-night .main-nav a:hover{background:rgba(255,255,255,.13)}

.sprint-chip{
    font-weight:850;
    font-size:12px;
    padding:10px 13px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff6e6;
    color:#6d492d;
}
.mode-night .sprint-chip{background:rgba(255,255,255,.12);color:#fff3dc}

.home-grid{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) 438px;
    gap:20px;
    padding:24px;
}

.hero-panel{
    min-height:570px;
    border:1px solid var(--line);
    border-radius:26px;
    background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,250,242,.62));
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.mode-night .hero-panel{background:rgba(255,255,255,.08)}

.eyebrow{
    font-size:12px;
    color:#9a663b;
    font-weight:900;
    letter-spacing:.12em;
    margin-bottom:13px;
}
.mode-night .eyebrow{color:#ffd39e}

.hero-panel h1{
    font-size:clamp(36px,5vw,66px);
    line-height:1;
    letter-spacing:-.055em;
    margin:0 0 18px;
}
.hero-panel p{
    font-size:17px;
    line-height:1.72;
    max-width:740px;
    color:#584537;
}
.mode-night .hero-panel p{color:#f1dfca}

.knowledge-foundation{
    max-width:790px;
    margin-top:22px;
    border:1px solid var(--line);
    border-radius:20px;
    padding:17px;
    background:#fffaf1;
}
.mode-night .knowledge-foundation{background:rgba(255,255,255,.09)}

.foundation-title{font-weight:900;margin-bottom:11px}
.foundation-flow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.foundation-flow span{
    padding:8px 10px;
    border:1px solid rgba(69,43,22,.12);
    border-radius:999px;
    background:#fff;
    font-size:13px;
    font-weight:750;
    color:#60442e;
}
.mode-night .foundation-flow span{
    background:rgba(255,255,255,.12);
    color:#fff4e4;
}

.today-card{
    margin-top:24px;
    max-width:790px;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.64);
    border:1px solid var(--line);
}
.mode-night .today-card{background:rgba(255,255,255,.08)}
.today-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    color:#9a663b;
    margin-bottom:6px;
}
.today-card strong{font-size:18px}
.today-card p{
    margin:7px 0 0;
    font-size:14px;
    line-height:1.45;
}

.primary-btn{
    border:0;
    border-radius:999px;
    padding:13px 18px;
    background:#7b5335;
    color:white;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 12px 25px rgba(70,40,16,.18);
}
.primary-btn:hover{transform:translateY(-1px);background:#64422b}

.lexi-home{
    position:relative;
    min-height:570px;
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,243,222,.72),rgba(226,192,154,.76)),
        repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 18px,transparent 18px 36px);
}
.mode-night .lexi-home{
    background:
        linear-gradient(180deg,rgba(72,56,82,.9),rgba(63,48,58,.92)),
        repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 18px,transparent 18px 36px);
}

.room-light{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 72% 17%, rgba(255,230,164,.38), transparent 28%);
    pointer-events:none;
}
.mode-night .room-light{background:radial-gradient(circle at 72% 17%, rgba(255,223,128,.13), transparent 31%)}

.window-frame{
    position:absolute;
    top:28px;right:28px;
    width:140px;height:132px;
    border:9px solid var(--wood);
    border-radius:19px;
    overflow:hidden;
    background:#a9d6ef;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
}
.window-frame:before,
.window-frame:after{
    content:"";
    position:absolute;
    background:var(--wood);
    z-index:4;
}
.window-frame:before{width:8px;height:100%;left:50%;top:0;transform:translateX(-50%)}
.window-frame:after{height:8px;width:100%;top:50%;left:0;transform:translateY(-50%)}

.outside-sky{position:absolute;inset:0;background:linear-gradient(#8ec8ef,#e8f8ff)}
.mode-evening .outside-sky{background:linear-gradient(#e6a06f,#f5cf9b)}
.mode-night .outside-sky{background:linear-gradient(#1f2b4d,#5e5a84)}

.sun,.moon,.star{position:absolute;border-radius:50%}
.sun{
    width:38px;height:38px;
    background:#ffd166;
    left:20px;top:20px;
    box-shadow:0 0 18px #ffd166;
}
.moon{
    width:34px;height:34px;
    right:18px;top:20px;
    background:#fff2bd;
    opacity:0;
    box-shadow:0 0 14px rgba(255,242,189,.7);
}
.mode-night .sun{opacity:0}
.mode-night .moon{opacity:1}
.star{width:4px;height:4px;background:#fff;opacity:0}
.mode-night .star{opacity:1}
.st1{left:18px;top:20px}.st2{left:62px;top:34px}.st3{right:34px;bottom:28px}

.bookcase{
    position:absolute;
    top:68px;left:30px;
    width:152px;height:154px;
}
.book{
    display:inline-block;
    width:18px;
    margin-left:7px;
    border-radius:4px 4px 1px 1px;
    vertical-align:bottom;
}
.b1{height:46px;background:#b65d39}.b2{height:35px;background:#5c7a59}.b3{height:50px;background:#d7a14a}.b4{height:40px;background:#66547a}
.b5{height:34px;background:#814830;margin-top:30px}.b6{height:44px;background:#477285}.b7{height:37px;background:#c3874b}
.shelf-line{
    position:absolute;
    left:0;top:52px;
    width:150px;height:12px;
    background:var(--wood);
    border-radius:999px;
}
.shelf-line.second{top:122px;width:118px}

.plant{
    position:absolute;
    left:56px;
    bottom:128px;
    width:78px;height:118px;
}
.stem{
    position:absolute;
    left:37px;bottom:30px;
    width:7px;height:66px;
    background:var(--green);
    border-radius:999px;
}
.leaf{
    position:absolute;
    background:#6aa85e;
    border-radius:100% 0 100% 0;
    width:36px;height:22px;
}
.leaf-a{left:5px;top:34px;transform:rotate(22deg)}
.leaf-b{right:4px;top:48px;transform:rotate(-48deg)}
.leaf-c{left:21px;top:18px;transform:rotate(-18deg)}
.pot{
    position:absolute;
    left:17px;bottom:0;
    width:48px;height:34px;
    background:#b86b3b;
    border-radius:0 0 16px 16px;
}
.pot:before{
    content:"";
    position:absolute;
    left:-7px;top:-9px;
    width:62px;height:14px;
    background:#cf7e47;
    border-radius:999px;
}

.desk{
    position:absolute;
    left:26px;right:26px;bottom:38px;
    height:102px;
    background:linear-gradient(#9d633b,#704223);
    border-radius:22px 22px 15px 15px;
    box-shadow:inset 0 -10px 0 rgba(56,30,12,.14);
}
.desk-book{
    position:absolute;
    left:118px;top:28px;
    width:88px;height:34px;
    border-radius:5px 18px 18px 5px;
    background:#fff6e6;
    transform:rotate(-4deg);
}
.desk-book:after{
    content:"";
    position:absolute;
    left:43px;top:0;
    width:2px;height:100%;
    background:#dcc6a6;
}
.note-paper{
    position:absolute;
    left:218px;top:31px;
    width:42px;height:28px;
    border-radius:4px;
    background:#ffe9ae;
    transform:rotate(7deg);
}
.tea-cup{
    position:absolute;
    right:46px;top:28px;
    width:42px;height:30px;
    background:#fff6e6;
    border-radius:0 0 18px 18px;
}
.tea-cup:after{
    content:"";
    position:absolute;
    right:-13px;top:7px;
    width:18px;height:14px;
    border:4px solid #fff6e6;
    border-left:0;
    border-radius:0 14px 14px 0;
}
.tea-cup i{
    position:absolute;
    top:-28px;
    width:8px;height:28px;
    border-left:2px solid rgba(255,255,255,.75);
    border-radius:50%;
    animation:steam 2.9s infinite ease-in-out;
}
.tea-cup i:first-child{left:10px}
.tea-cup i:last-child{left:25px;animation-delay:.9s}
@keyframes steam{
    0%{opacity:0;transform:translateY(8px)}
    50%{opacity:1}
    100%{opacity:0;transform:translateY(-10px)}
}

.lexi-area{
    position:absolute;
    right:66px;
    bottom:100px;
    width:168px;height:232px;
}
.speech-bubble{
    position:absolute;
    right:-42px;
    top:-68px;
    width:240px;
    padding:13px 15px;
    border-radius:19px 19px 7px 19px;
    background:#fffaf1;
    border:1px solid rgba(69,43,22,.16);
    color:#2f2117;
    font-size:14px;
    line-height:1.38;
    box-shadow:0 16px 34px rgba(53,30,11,.17);
    transition:opacity .35s, transform .35s;
    z-index:5;
}
.mode-night .speech-bubble{background:#fff3dd}
.speech-bubble.hidden{opacity:0;transform:translateY(8px)}

.lexi-character{
    position:absolute;
    left:14px;bottom:0;
    width:138px;height:180px;
    animation:breathe 3.5s infinite ease-in-out;
}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.tail{
    position:absolute;
    left:2px;bottom:42px;
    width:66px;height:98px;
    background:var(--fox-dark);
    border-radius:72px 10px 72px 10px;
    transform:rotate(-22deg);
    transform-origin:bottom right;
    animation:tail 4.2s infinite ease-in-out;
}
.tail:after{
    content:"";
    position:absolute;
    left:5px;top:4px;
    width:23px;height:30px;
    background:#fff0d4;
    border-radius:50%;
    transform:rotate(12deg);
}
@keyframes tail{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(-12deg)}}

.body{
    position:absolute;
    left:38px;bottom:20px;
    width:74px;height:92px;
    background:var(--fox);
    border-radius:46px 46px 30px 30px;
}
.belly{
    position:absolute;
    left:58px;bottom:30px;
    width:36px;height:50px;
    background:#fff0d4;
    border-radius:50%;
    z-index:2;
}

.head{
    position:absolute;
    top:20px;left:28px;
    width:86px;height:76px;
    background:var(--fox);
    border-radius:44px 44px 35px 35px;
    z-index:3;
}
.ear{
    position:absolute;
    top:-25px;
    width:37px;height:45px;
    background:var(--fox);
    clip-path:polygon(50% 0,100% 100%,0 100%);
}
.ear:after{
    content:"";
    position:absolute;
    left:10px;top:12px;
    width:17px;height:23px;
    background:var(--fox-light);
    clip-path:polygon(50% 0,100% 100%,0 100%);
}
.ear-left{left:2px;transform:rotate(-18deg)}
.ear-right{right:2px;transform:rotate(18deg)}

.mask{
    position:absolute;
    left:12px;top:19px;
    width:62px;height:47px;
    background:var(--fox-light);
    border-radius:45% 45% 50% 50%;
}
.eye{
    position:absolute;
    top:13px;
    width:7px;height:10px;
    background:#24170f;
    border-radius:50%;
    animation:blink 5.6s infinite;
}
.eye-left{left:16px}.eye-right{right:16px}
@keyframes blink{
    0%,92%,100%{height:10px;top:13px}
    95%{height:2px;top:18px}
}
.nose{
    position:absolute;
    left:27px;top:25px;
    width:9px;height:7px;
    background:#24170f;
    border-radius:50%;
}
.mouth{
    position:absolute;
    left:24px;top:32px;
    width:15px;height:7px;
    border-bottom:2px solid #55311d;
    border-radius:0 0 12px 12px;
}
.paw{
    position:absolute;
    bottom:18px;
    width:22px;height:36px;
    background:#b85a25;
    border-radius:16px;
    z-index:4;
}
.paw-left{left:46px}.paw-right{right:42px}

.lexi-character.mood-happy .tail{animation:happyTail .72s infinite ease-in-out}
@keyframes happyTail{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(2deg)}}

.lexi-character.mood-thinking .head{animation:thinking 1.45s infinite ease-in-out}
@keyframes thinking{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}

.lexi-character.mood-careful .mouth{
    border-bottom:0;
    border-top:2px solid #55311d;
    border-radius:12px 12px 0 0;
    top:37px;
}

.room-status{
    position:absolute;
    left:18px;right:18px;bottom:14px;
    padding:11px 13px;
    border-radius:999px;
    background:rgba(255,250,241,.68);
    border:1px solid rgba(69,43,22,.12);
    color:#684a32;
    font-size:13px;
    font-weight:750;
}
.mode-night .room-status{background:rgba(255,255,255,.1);color:#fff1dc}

.system-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:0 24px 24px;
}
.system-strip article{
    border:1px solid var(--line);
    border-radius:18px;
    padding:15px;
    background:rgba(255,255,255,.5);
}
.mode-night .system-strip article{background:rgba(255,255,255,.08)}
.system-strip strong{display:block;margin-bottom:5px}
.system-strip span{font-size:13px;color:var(--muted)}
.mode-night .system-strip span{color:#ead5bf}

@media (max-width:980px){
    .topbar{grid-template-columns:1fr;gap:12px}
    .main-nav{width:100%;overflow:auto}
    .home-grid{grid-template-columns:1fr}
    .hero-panel{min-height:auto}
    .lexi-home{min-height:570px}
    .system-strip{grid-template-columns:1fr}
}

@media (max-width:560px){
    .app-stage{width:100%;margin:0;border-radius:0;min-height:100vh}
    .home-grid{padding:14px}
    .hero-panel{padding:22px}
    .today-card{align-items:flex-start;flex-direction:column}
    .lexi-area{right:38px}
}

/* First Real Test additions */
.brand-logo{display:block;max-width:190px;max-height:48px;width:auto;height:auto}
.nav-btn{border:0;background:transparent;color:inherit;padding:9px 13px;border-radius:999px;font-size:13px;font-weight:750;cursor:pointer}
.nav-btn.active,.nav-btn:hover{background:#fffaf1}
.mode-night .nav-btn.active,.mode-night .nav-btn:hover{background:rgba(255,255,255,.13)}
.view{display:none}.view.active{display:block}
.lesson-summary{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.lesson-summary span{padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800;color:#62452f}
.primary-btn.large{font-size:16px;padding:16px 24px;align-self:flex-start}
.learning-shell,.result-shell{min-height:680px;padding:28px;display:grid;place-items:start center}
.lesson-topline{width:min(860px,100%);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-bottom:20px}
.text-btn{border:0;background:transparent;color:inherit;font-weight:800;cursor:pointer;padding:8px}
.progress-wrap{width:100%}.progress-label{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-bottom:8px}.progress-bar{height:10px;border-radius:999px;background:rgba(98,69,47,.13);overflow:hidden}.progress-bar span{display:block;height:100%;width:0;background:#7b5335;transition:width .35s}
.learning-card{width:min(760px,100%);padding:42px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 22px 60px rgba(63,37,15,.12);text-align:center}
.mode-night .learning-card,.mode-night .result-card{background:rgba(255,255,255,.1)}
.card-kicker{font-size:12px;letter-spacing:.13em;font-weight:900;color:#9a663b}.learning-word{font-size:clamp(44px,8vw,78px);font-weight:900;letter-spacing:-.04em;margin:22px 0}
.ghost-btn,.hint-btn{border:1px solid var(--line);background:#fffaf1;color:#62452f;padding:12px 17px;border-radius:999px;font-weight:850;cursor:pointer}.mode-night .ghost-btn,.mode-night .hint-btn{background:rgba(255,255,255,.12);color:#fff}
.meaning-panel{margin:18px auto 26px;padding:22px;border-radius:20px;background:#fff8ec;border:1px solid var(--line)}.mode-night .meaning-panel{background:rgba(255,255,255,.08)}
.meaning-panel strong{font-size:28px}.example{font-size:20px;font-weight:750;margin:18px 0 4px}.example-translation{margin:0;color:var(--muted)}.mode-night .example-translation{color:#ead5bf}
.question-block{border-top:1px solid var(--line);padding-top:24px}.question-block h2{font-size:24px;margin:0 0 18px}.answers{display:grid;gap:11px}.answer-btn{border:1px solid var(--line);background:#fff;padding:15px;border-radius:16px;font-size:16px;font-weight:800;cursor:pointer}.answer-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(63,37,15,.1)}.answer-btn.correct{background:#e8f6e6;border-color:#6f9d68}.answer-btn.wrong{background:#fff0ec;border-color:#c57a68}.answer-btn:disabled{cursor:default}
.hint-btn{margin-top:16px}.hint-box{margin-top:12px;padding:14px;border-radius:14px;background:#fff3cf;color:#60442e;font-weight:700}.feedback{margin-top:18px;padding:15px;border-radius:16px;font-weight:900}.feedback.correct{background:#e8f6e6;color:#365d32}.feedback.wrong{background:#fff0ec;color:#834636}.next-btn{margin-top:18px}
.result-shell{place-items:center}.result-card{width:min(760px,100%);padding:42px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 22px 60px rgba(63,37,15,.12);text-align:center}.result-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#e8f6e6;font-size:38px;color:#365d32;font-weight:900}.result-card h1{font-size:48px;margin:8px 0 10px}.result-card>p{font-size:18px;color:var(--muted)}.result-grid{display:grid;gap:9px;margin:26px 0}.result-row{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:#fff}.result-row span{display:flex;flex-direction:column}.result-row small{color:var(--muted);margin-top:3px}.result-row b{font-size:24px}.result-row.ok b{color:#4e8748}.result-row.miss b{color:#b55d49}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hidden{display:none!important}
@media(max-width:680px){.learning-shell,.result-shell{padding:16px}.learning-card,.result-card{padding:24px}.lesson-topline{grid-template-columns:1fr}.learning-word{font-size:52px}.brand-logo{max-width:150px}.result-card h1{font-size:38px}}