:root{--green:#087a55;--green2:#10a66f;--ink:#14362d;--muted:#65756f;--cream:#fffaf0;--card:#fff;--orange:#ff7a2f;--gold:#ffc83d;--red:#e75555;--line:#dcebe5;--shadow:0 16px 45px rgba(17,73,58,.12)}
*{box-sizing:border-box}html{min-height:100%;background:var(--cream)}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:radial-gradient(circle at 0 0,#fff1bd 0,transparent 27rem),var(--cream);min-height:100vh}.hidden{display:none!important}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:78px;padding:10px max(18px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:none}.brand{display:flex;align-items:center;gap:10px;color:var(--green);text-decoration:none}.brand img{width:54px;height:54px;object-fit:contain}.brand b{display:block;font-size:24px;line-height:1}.brand b span{color:var(--orange)}.brand small{display:block;font-size:10px;font-weight:700;color:#587069;margin-top:5px}.tools{display:flex;align-items:center;gap:8px}.wallet,.icon-btn,.pill-btn{min-height:42px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;gap:5px}.icon-btn{width:44px;padding:0;justify-content:center}.pill-btn{font-size:12px;font-weight:800}.wallet b{font-size:14px}.app-shell{width:min(1120px,calc(100% - 28px));margin:24px auto 50px}.hero{min-height:220px;border-radius:28px;padding:34px 46px;color:#fff;background:linear-gradient(120deg,#056344,#10a66f);display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;box-shadow:var(--shadow)}.hero:before,.hero:after{content:"";position:absolute;border:30px solid rgba(255,255,255,.06);border-radius:50%;width:250px;height:250px;right:-80px}.hero:after{width:160px;height:160px;right:120px;bottom:-130px}.hero-copy{position:relative;z-index:1}.eyebrow{display:inline-block;font-size:12px;letter-spacing:.12em;font-weight:900;color:#f8cf4a}.eyebrow.orange{color:#ff6d2b}.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.08;margin:10px 0}.hero p{margin:0;max-width:600px;font-size:16px}.hero-mascot{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 15px 15px rgba(0,0,0,.18));z-index:1;animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px) rotate(1deg)}}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.tab{border:0;background:#e7f4ef;color:#325c4e;border-radius:14px;padding:14px 10px;font-weight:800}.tab.active{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(8,122,85,.2)}.view{display:none}.view.active{display:block}.card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 30px rgba(16,75,58,.07)}.search-card{padding:28px}.search-card label{display:block;font-weight:900;font-size:20px;margin-bottom:12px}.search-row{display:flex;gap:10px}.search-row input{min-width:0;flex:1;border:2px solid #cfe5dc;border-radius:16px;padding:18px 20px;font-size:18px;outline:0}.search-row input:focus{border-color:var(--green2);box-shadow:0 0 0 4px rgba(16,166,111,.12)}.primary,.secondary{border:0;border-radius:16px;padding:15px 22px;font-weight:900}.primary{background:linear-gradient(135deg,var(--orange),#ff943d);color:#fff;box-shadow:0 8px 18px rgba(255,122,47,.24)}.primary:active,.secondary:active{transform:translateY(1px)}.secondary{color:#fff;background:var(--green)}.primary.large{width:100%;font-size:19px;padding:18px}.hint{font-size:11px;color:var(--muted);margin:10px 2px 0}.lookup-status{min-height:18px;margin:12px 6px;color:var(--muted);font-size:13px}.result-card{padding:28px;margin:12px 0}.result-top{display:flex;justify-content:space-between;gap:14px}.result-word{display:flex;align-items:center;gap:10px}.result-word h2{font-size:30px;margin:0}.status-icon{font-size:28px}.language-chip,.pos-chip{display:inline-block;padding:5px 9px;border-radius:999px;background:#edf7f3;color:#32705a;font-size:11px;font-weight:800;margin:8px 5px 0 0}.correction{border-left:4px solid var(--orange);padding:12px 16px;background:#fff5ee;border-radius:4px 14px 14px 4px;margin:15px 0}.correction strong{color:var(--green);font-size:21px}.definition{padding:14px 0;border-top:1px solid var(--line)}.definition:first-of-type{border-top:0}.definition p{margin:4px 0}.translation{color:#005fbd;font-weight:700}.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.result-actions button{border:1px solid var(--line);background:#f6fbf9;border-radius:12px;padding:10px 13px;font-weight:800;color:var(--ink)}.suggestions{display:flex;gap:8px;flex-wrap:wrap}.suggestions button{border:0;padding:8px 11px;border-radius:999px;background:#e7f4ef;color:var(--green);font-weight:800}.daily{margin-top:16px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(115deg,#fff3c9,#fff)}.daily h2{font-size:20px;margin:8px 0}.daily p{margin:0;color:#6a5b32}.section-head{display:flex;align-items:end;justify-content:space-between;margin:28px 4px 16px}.section-head h2{margin:7px 0 0}.count-badge{padding:7px 11px;background:#e8f5ef;border-radius:999px;font-size:12px;font-weight:800}.word-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.word-item{padding:18px;display:flex;gap:12px;justify-content:space-between}.word-item h3{margin:0 0 4px}.word-item p{margin:0;color:var(--muted);font-size:13px}.word-item button{align-self:start;border:0;background:#fff0ed;color:#a33;border-radius:10px;padding:8px}.empty{padding:45px;text-align:center;color:var(--muted)}.game-setup{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.game-setup>div:first-child{grid-column:1/-1}.game-setup h2{font-size:32px;margin:8px 0}.game-setup p{color:var(--muted);margin:0}.segmented{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);background:#eef5f2;border-radius:14px;padding:4px}.segmented button{border:0;background:transparent;border-radius:11px;padding:12px 8px;font-weight:800}.segmented button.active{background:#fff;color:var(--green);box-shadow:0 4px 14px rgba(20,66,53,.1)}.select-label{font-size:12px;font-weight:800;color:var(--muted)}.select-label select{width:100%;display:block;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:13px;background:#fff;color:var(--ink)}.game-setup .large{grid-column:1/-1}.game-board{max-width:720px;margin:auto;padding:24px;text-align:center;min-height:520px}.game-hud{display:grid;grid-template-columns:1fr 1fr 1fr 36px;align-items:center;gap:4px;font-weight:900}.tiny{border:0;background:#edf4f1;border-radius:10px;width:34px;height:34px}.progress-bar{height:7px;background:#e6efeb;border-radius:999px;overflow:hidden;margin:15px 0}.progress-bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .25s}.mascot-line{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;color:var(--green)}.mascot-line img{width:48px;height:48px;object-fit:contain}.game-instruction{color:var(--muted);font-weight:700;margin:24px 0 5px}.game-word{font-size:clamp(34px,8vw,54px);margin:8px 0 25px;overflow-wrap:anywhere}.answer-area{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-btn{border:2px solid var(--line);border-radius:18px;background:#fff;padding:18px 12px;font-weight:900;color:var(--ink);min-height:64px}.answer-btn:hover{border-color:#89cdb4}.answer-btn.correct{border-color:var(--green2);background:#e6faef}.answer-btn.wrong{border-color:var(--red);background:#fff0f0}.truefalse .answer-btn:first-child{background:#e9f8f0;color:#087a55}.truefalse .answer-btn:last-child{background:#fff0ef;color:#bd3d3d}.feedback{margin-top:15px;border-radius:15px;padding:14px;font-weight:800}.feedback.ok{background:#e7f8ef;color:#087a55}.feedback.no{background:#fff0ed;color:#a33}.speak-prompt{border:0;border-radius:999px;background:#e8f2ff;color:#0757a4;padding:12px 18px;font-weight:800;margin-top:20px}.summary{max-width:620px;margin:auto;padding:36px;text-align:center}.summary .stars{font-size:42px}.summary h2{font-size:34px;margin:8px}.summary-grid,.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.summary-grid div,.stat{padding:15px;background:#f2f8f5;border-radius:15px}.summary-grid b,.stat b{display:block;font-size:22px;color:var(--green)}.summary-grid small,.stat small{color:var(--muted)}.stats-grid{margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(17,73,58,.05)}.learning-card{padding:22px;margin-bottom:12px}.learning-card h3{margin-top:0}.learning-tags{display:flex;gap:7px;flex-wrap:wrap}.learning-tags span{padding:7px 10px;border-radius:999px;background:#f0f6f3;font-size:12px}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#153d31;color:#fff;border-radius:999px;padding:11px 18px;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}footer{background:#064b39;color:#fff;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding:24px;font-size:12px}footer a{color:#fff}
@media(max-width:700px){.topbar{height:68px;padding:8px 12px}.brand img{width:44px;height:44px}.brand b{font-size:20px}.brand small{display:none}.wallet{padding:0 9px}.pill-btn{padding:0 9px}.app-shell{width:calc(100% - 20px);margin:10px auto 30px}.hero{min-height:170px;padding:24px 22px;border-radius:22px}.hero h1{font-size:28px}.hero p{font-size:12px;max-width:65%}.hero-mascot{width:125px;height:125px;margin-right:-18px}.tabs{position:sticky;top:68px;z-index:12;background:var(--cream);padding:7px 0;margin:5px 0 10px}.tab{font-size:11px;padding:10px 4px}.tab span{display:block;margin-top:3px}.search-card,.result-card{padding:18px}.search-card label{font-size:16px}.search-row{display:grid}.search-row input{width:100%;padding:15px;font-size:16px}.search-row button{width:100%}.daily{padding:18px;align-items:flex-start}.daily h2{font-size:15px}.daily p{font-size:11px}.daily button{padding:12px}.word-list{grid-template-columns:1fr}.game-setup{padding:20px;grid-template-columns:1fr}.game-setup>*{grid-column:1!important}.game-setup h2{font-size:26px}.segmented button{font-size:11px}.game-board{padding:16px;min-height:500px}.game-hud{font-size:12px}.answer-btn{min-height:70px;padding:14px 7px}.summary-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.summary{padding:24px 18px}footer{gap:12px;padding:20px 14px;text-align:center}.result-top{align-items:flex-start}.result-word h2{font-size:24px}}
@media(max-width:390px){.hero-mascot{width:105px}.hero h1{font-size:24px}.hero p{max-width:70%}.tools{gap:4px}.icon-btn{width:39px}.wallet{font-size:12px}.tab{font-size:10px}.game-hud{grid-template-columns:1fr 1fr 1fr 32px}.answer-area{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Full-width Phở Learn workspace */
:root{--page-pad:max(24px,4vw)}
body{background:radial-gradient(circle at 0 0,#fff1bd 0,transparent 27rem),linear-gradient(180deg,#fffaf0,#f7fbf8)}
.topbar{padding-left:var(--page-pad);padding-right:var(--page-pad)}
.app-shell{width:100%;max-width:none;margin:0;padding:24px var(--page-pad) 50px}
.hero{min-height:265px;padding:34px clamp(34px,5vw,76px);background:linear-gradient(120deg,#045b40 0%,#087a55 48%,#18ad75 100%)}
.hero-mascot{width:clamp(220px,22vw,360px);height:250px;object-position:center 42%;margin:-8px 1vw -30px 30px;transform-origin:center bottom}
.eyebrow.green{color:var(--green)}
.tabs{gap:10px;margin:18px 0}
.tab{border:1px solid #d8ebe3;background:rgba(255,255,255,.82);border-radius:16px;padding:15px 10px}
.checker-layout.active{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(320px,.78fr);gap:18px;align-items:start}
.checker-main,.checker-side{min-width:0}
.checker-side{display:grid;gap:16px;position:sticky;top:96px}
.search-card{padding:clamp(24px,3vw,38px)}
.search-card label{font-size:clamp(21px,2.2vw,30px);margin:8px 0 14px}
.daily{margin:0;padding:25px;display:grid;align-items:start;gap:18px;background:linear-gradient(135deg,#fff0b9,#fffdf6)}
.daily .secondary{width:100%}
.welcome-card{min-height:150px;padding:28px;display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#effbf6,#fff)}
.welcome-card .welcome-icon{font-size:48px}
.welcome-card h2,.source-card h2{margin:0 0 8px}
.welcome-card p,.source-card p{margin:0;color:var(--muted);line-height:1.55}
.source-card,.examples-card{padding:25px}
.source-card h2{font-size:22px;margin-top:8px}
.coverage-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.coverage-grid div{padding:14px;border-radius:16px;background:#edf8f3}
.coverage-grid b{display:block;font-size:24px;color:var(--green)}
.coverage-grid span{display:block;font-size:11px;color:var(--muted);font-weight:700}
.source-card>a{display:inline-block;margin-top:15px;color:var(--green);font-weight:900;text-decoration:none}
.examples-card h3{margin:0 0 13px}
.example-chips{display:flex;flex-wrap:wrap;gap:8px}
.example-chips button{border:1px solid #cfe7dd;background:#f4fbf8;color:#16684f;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:800}
.example-chips button:hover{background:#e4f6ee;border-color:#8dcbb4}

@media(min-width:1440px){.checker-layout.active{grid-template-columns:minmax(0,2fr) minmax(350px,.7fr)}.hero-copy{padding-left:1vw}.hero h1{font-size:56px}}
@media(max-width:900px){.checker-layout.active{display:block}.checker-side{position:static;margin-top:16px}.welcome-card{margin-top:12px}}
@media(max-width:700px){:root{--page-pad:10px}.app-shell{width:100%;margin:0;padding:10px var(--page-pad) 30px}.hero{min-height:195px;padding:22px 18px}.hero-copy{max-width:61%}.hero p{max-width:100%}.hero-mascot{width:145px;height:180px;margin:-4px -12px -26px 8px}.checker-side{gap:12px}.welcome-card{padding:20px}.welcome-card .welcome-icon{font-size:36px}.source-card,.examples-card{padding:20px}.daily{padding:20px}.coverage-grid b{font-size:20px}}
@media(max-width:390px){.hero-mascot{width:125px;height:160px}.hero-copy{max-width:66%}}

/* V83 learning content, scoped away from games and homepage artwork. */
.topic-lessons{margin-block:14px;padding:20px;min-width:0}.topic-lessons h2{font-size:1.15rem;margin-top:0}.topic-lessons select,#lookupLanguage{max-width:100%;padding:9px 12px;border-radius:12px;border:1px solid #9dbba8;background:white;color:#193d2a;font:inherit}.topic-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:14px}.topic-words button{display:flex;flex-direction:column;text-align:left;padding:10px;border:1px solid #c1dece;border-radius:12px;background:#f2faf5;color:#183c2b;font:inherit;overflow-wrap:anywhere;min-width:0}.topic-words span{font-size:.9rem}.usage-example{border-left:3px solid #309667;padding:10px 14px;background:#f3faf6;margin-block:14px}.usage-example p{margin:6px 0}.topic-lessons button:focus-visible{outline:3px solid #e89919;outline-offset:2px}#practiceTopic{max-width:100%;white-space:normal}
