:root{--black:#171717;--cream:#f4f0e3;--lime:#d7ff48;--purple:#8c6cff;--pink:#ff7fa7;--green:#2e9f68}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--black);font-family:Arial,"PingFang SC",sans-serif}header{height:210px;background:var(--black);color:white;display:grid;grid-template-columns:120px 1fr auto;align-items:center;padding:24px 5vw;gap:32px}.logo{width:92px;height:92px;border:2px solid white;border-radius:50%;display:grid;place-items:center;position:relative}.logo i{position:absolute;width:92px;height:2px;background:white;transform:rotate(-35deg)}.logo span{font:900 26px/1 Arial;text-align:center;background:var(--black);z-index:1;padding:4px}.intro p{font-size:10px;letter-spacing:.2em;color:var(--lime)}.intro h1{font-size:42px;line-height:1;margin:12px 0}.intro h1 span{color:var(--lime)}header button{background:transparent;color:white;border:1px solid #777;padding:12px 16px;cursor:pointer}header button b{background:var(--lime);color:var(--black);border-radius:50%;padding:4px 8px;margin-left:8px}.game{width:min(1180px,90vw);margin:42px auto 70px}.game-top{display:grid;grid-template-columns:90px 1fr 80px;gap:18px;align-items:center;font-size:12px;font-weight:800}.timer{height:6px;background:#d5d0c4}.timer i{display:block;height:100%;width:100%;background:var(--purple);transition:width 1s linear}.game-top button{border:0;background:none;text-decoration:underline;cursor:pointer}.question-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;margin-top:20px}.picture-card{background:var(--purple);min-height:450px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.picture-card:before,.picture-card:after{content:"";position:absolute;width:180px;height:180px;border:2px solid #fff6;border-radius:50%}.picture-card:before{left:-70px;top:-60px}.picture-card:after{right:-80px;bottom:-50px}.corner{position:absolute;left:18px;top:16px;background:var(--black);color:white;padding:6px 9px;font-size:10px;letter-spacing:.12em}.picture{font-size:150px;filter:drop-shadow(10px 13px 0 #17171722);z-index:1}.picture-card p{position:absolute;bottom:18px;color:white;font-weight:800}.answer-area{border-top:4px solid var(--black);padding-top:18px}.answer-step{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:14px 0 20px;border-bottom:1px solid #aaa}.answer-step>b{font:12px monospace;color:var(--purple)}.answer-step h2{font-size:18px;margin:0 0 14px}.word-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.word-options button,.syllable-options button{border:2px solid var(--black);background:white;padding:13px;font-weight:800;cursor:pointer}.word-options button.selected,.syllable-options button.selected{background:var(--lime);box-shadow:4px 4px 0 var(--black)}.syllable-options{display:flex;gap:8px}.syllable-options button{width:55px}.submit{width:100%;margin-top:22px;border:0;background:var(--black);color:white;padding:16px 20px;display:flex;justify-content:space-between;font-weight:900;cursor:pointer}.submit:disabled{opacity:.3;cursor:not-allowed}.feedback{min-height:22px;font-size:13px;font-weight:800}.feedback.good{color:var(--green)}.feedback.bad{color:#c52f51}.dashboard{background:#e5dfd1;padding:70px max(5vw,20px)}.dash-title{display:flex;align-items:end;justify-content:space-between;max-width:1180px;margin:auto}.dash-title small{letter-spacing:.2em;font-weight:800}.dash-title h2{font-size:36px;margin:10px 0}.dash-title p{max-width:280px;font-size:13px}.stats-grid{max-width:1180px;margin:28px auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:16px}.stat-card{background:var(--cream);padding:26px;min-height:320px}.stat-card h3{margin-top:0}.bar-row{margin:24px 0}.bar-name{display:flex;justify-content:space-between;font-size:12px;font-weight:800}.bar-track{height:23px;background:#d1cbbd;margin-top:8px}.bar-fill{height:100%;background:var(--pink);min-width:2px}.bar-row:nth-child(2) .bar-fill{background:var(--purple)}.bar-row:nth-child(3) .bar-fill{background:var(--lime)}.trend svg{width:100%;height:210px}.legend{display:flex;gap:20px;font-size:11px}.legend i{display:inline-block;width:12px;height:3px;margin-right:6px}.green{background:var(--green)}.purple{background:var(--purple)}.mistakes{max-width:1180px;margin:auto;border-top:2px solid var(--black);padding-top:22px;display:grid;grid-template-columns:180px 1fr auto;gap:20px}.mistakes h3{margin:0}.mistakes p{font-size:12px}.mistake-chip{display:inline-block;background:white;border:1px solid var(--black);padding:8px 10px;margin:0 6px 6px 0;font-size:12px}.mistakes>button{border:0;background:none;text-decoration:underline;cursor:pointer}.round-modal{position:fixed;inset:0;background:#171717dd;display:grid;place-items:center;z-index:5}.round-modal[hidden]{display:none}.round-modal>div{background:var(--lime);padding:50px;text-align:center;min-width:min(420px,90vw);box-shadow:12px 12px 0 var(--purple)}.round-modal h2{font-size:72px;margin:14px}.round-modal button{border:2px solid var(--black);background:var(--black);color:white;padding:12px 20px;margin:5px;cursor:pointer}.round-modal .ghost{background:transparent;color:var(--black)}@media(max-width:760px){header{height:auto;grid-template-columns:70px 1fr;padding:24px}.logo{width:64px;height:64px}.logo i{width:64px}.intro h1{font-size:31px}header>button{grid-column:1/-1}.question-grid,.stats-grid{grid-template-columns:1fr}.picture-card{min-height:320px}.picture{font-size:115px}.dash-title{display:block}.mistakes{grid-template-columns:1fr}.word-options{grid-template-columns:1fr 1fr}}