@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
#menu{top:23%;max-width:460px}#menu h1{font-size:clamp(56px,6vw,88px)}.difficulty{display:flex;gap:4px;padding:4px;border:1px solid #29233624;border-radius:7px;width:302px;margin-top:21px;background:#fff2}.difficulty button{border:0;border-radius:4px;padding:12px 11px;font-size:9px;letter-spacing:1px;font-weight:700;background:transparent;flex:1}.difficulty button.selected{background:#292332;color:#fff5ec;box-shadow:0 3px 8px #28223522}.difficulty button:hover{background:#29233222}.difficulty button.selected:hover{background:#292332}#difficultyDescription{font-size:10px;margin-top:10px;max-width:305px;line-height:1.5;min-height:30px}.wordCard{position:absolute;z-index:7;right:38px;top:31%;width:245px;background:#f8f0eade;border:1px solid #fff9;border-radius:9px;padding:18px 20px;backdrop-filter:blur(18px);box-shadow:0 8px 35px #271b4620}.wordHead{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;font-weight:700;color:#786678;gap:12px}#thaiWord{font-family:'Noto Sans Thai',sans-serif;font-size:38px;font-weight:600;line-height:1.6;margin-top:10px;color:#332743}#romanWord{font-size:12px;color:#8a6d80;letter-spacing:.5px;margin:0 0 8px}#englishWord{font-size:16px;font-weight:600;line-height:1.3;display:block;max-width:210px}.wordFoot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #29233615;margin-top:16px;padding-top:12px;font-size:8px;color:#8a6d80}.wordFoot button{border:0;background:none;padding:0;font-size:7px;font-weight:700;letter-spacing:.5px;color:#68455c}.wordPop{animation:word-arrive .22s ease-out}@keyframes word-arrive{from{transform:translateY(7px);opacity:.65}to{transform:translateY(0);opacity:1}}.utilities .notebookButton{width:52px;border-radius:20px;font-size:9px;font-weight:700}.notebookButton span{background:#7d567329;border-radius:20px;padding:2px 4px;margin-left:2px;font-size:8px}.resultLinks{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.resultLinks button{border:0;background:none;font-size:8px;font-weight:700;letter-spacing:.7px;color:#705067;padding:5px 0}.hookMode{border:1px solid #fff4;background:#fff1;color:inherit;font-size:8px;letter-spacing:1px;font-weight:600;border-radius:20px;padding:10px 12px}.hookMode.active{background:#f4d4b8;color:#392b3b}.hookMode:hover{border-color:#fff}.controls{gap:7px}.controls button{padding:10px}footer{gap:16px}.stamina{width:150px}#notebookPanel{max-height:85dvh;overflow-y:auto;z-index:15}#notebookPanel h2{font-size:57px;margin:18px 0}#wordList{max-height:34dvh;overflow:auto;overscroll-behavior:contain}.wordRow{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:12px 0;border-bottom:1px solid #33274317}.wordRow b{font:600 21px 'Noto Sans Thai',sans-serif;grid-column:1;line-height:1.5}.wordRow small{font-size:10px;color:#85687b;grid-column:1}.wordRow span{grid-column:2;grid-row:span 2;align-self:center;font-size:12px;line-height:1.5}.pronunciationNote{display:block;color:#89747f;font-size:9px;line-height:1.5;margin-top:15px}.modal{max-height:88dvh;overflow-y:auto}#combo{left:58%;top:59%;font-size:35px}#cue{top:24%}.utilities #motion{display:initial}
@media(min-width:701px) and (max-width:1000px){.wordCard{width:195px;right:22px;padding:15px}#thaiWord{font-size:30px}.stamina{width:100px}.controls span{font-size:7px}.controls button{gap:5px;padding:9px 7px}.hookMode{font-size:7px;padding:8px}.score{min-width:70px}}
@media(max-width:700px){#menu{top:135px;bottom:155px;overflow-y:auto;padding-bottom:15px;max-width:calc(100% - 40px)}#menu h1{font-size:57px;margin:17px 0}#menu .difficulty{width:270px;margin-top:14px}.difficulty button{font-size:8px;padding:10px 6px}#difficultyDescription{font-size:9px;min-height:25px}#menu .primary{margin-top:12px}#menu .eyebrow{font-size:7px}#menu p{font-size:11px;margin:8px 0}.utilities #motion{display:none}.utilities .notebookButton{width:44px;font-size:8px}.utilities .notebookButton span{font-size:7px}.utilities{gap:4px}.round>span{font-size:6px;max-width:100px}.wordCard{top:158px;left:18px;right:18px;width:auto;padding:10px 14px;display:grid;grid-template-columns:auto 1fr;gap:1px 18px;align-items:center;border-radius:7px}.wordHead{grid-column:1 / -1;font-size:6px;margin-bottom:2px}#thaiWord{font-size:29px;line-height:1.5;margin:0;grid-column:1}#romanWord{font-size:10px;grid-column:1;margin:0}#englishWord{grid-column:2;grid-row:2 / span 2;font-size:14px;max-width:100%;justify-self:end;text-align:right}.wordFoot{display:none}#cue{top:276px;font-size:7px;padding:9px 15px;max-width:95%}footer{gap:8px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.stamina{width:calc(100% - 180px)}.hookMode{font-size:7px;padding:8px 10px;order:1}.score{order:2;min-width:70px}.controls{order:3}.controls button{padding:9px 4px}.controls span{font-size:7px}.controls kbd{font-size:8px}#combo{left:65%;top:62%;font-size:25px}#notebookPanel h2{font-size:48px}#wordList{max-height:32dvh}.wordRow b{font-size:19px}.wordRow span{font-size:11px}.resultLinks{flex-wrap:wrap}.vignette{background:linear-gradient(#f7eff1c9,transparent 20%,#ece0ecaa 50%,#191932cf)}}
@media(max-height:700px) and (min-width:701px){#menu{top:130px;bottom:105px;overflow:auto}#menu h1{font-size:60px}.wordCard{top:32%}header{padding-top:18px}.health{top:105px}}
@media(prefers-reduced-motion:reduce){.wordPop{animation:none}}