@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Noto+Serif+SC:wght@600;700&display=swap');
:root{font-family:'Be Vietnam Pro',sans-serif;color:#1b3037;background:#e8f0ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 12%,#f8faf1 0,#e8f0ee 42%,#d7e7e4 100%)}button,input{font:inherit}button{cursor:pointer;border:1px solid #93aea9;border-radius:10px;background:#fff;color:#173c3d;padding:13px 18px;font-weight:600}button:hover{background:#ecf4ef}button:focus-visible,input:focus-visible{outline:3px solid #f0ac5a;outline-offset:2px}.primary{background:#176c68;border-color:#176c68;color:#fff}.primary:hover{background:#0d5553}.shell{max-width:1120px;min-height:100vh;margin:auto;padding:25px 30px;display:flex;flex-direction:column}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #9bb9b2;padding-bottom:22px}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}.brand-mark{display:grid;place-items:center;width:39px;height:39px;background:#176c68;color:white;border-radius:10px;font-family:'Noto Serif SC',serif;font-size:23px}.status{font-size:13px;color:#935b41}.status.online{color:#176c68}.status:before{content:'●';margin-right:7px}.welcome{flex:1;display:grid;grid-template-columns:1.3fr .8fr;align-items:center;gap:8vw;padding:70px 0 100px}.stamp{display:inline-block;background:#f0c56e;color:#3d3a25;padding:8px 13px;border-radius:6px;transform:rotate(-2deg);font-weight:700;font-size:14px}.hero h1{font-size:clamp(46px,6vw,79px);line-height:1.14;letter-spacing:-.06em;margin:24px 0}.hero h1 em{font-style:normal;color:#176c68}.hero p,.room-head p{max-width:530px;line-height:1.8;color:#546e70}.entry{background:#fff;padding:34px;border:1px solid #b8cec7;border-radius:18px;box-shadow:10px 12px 0 #c4dcd4}.entry h2{font-size:25px;margin:0 0 29px}.entry label{display:block;margin:16px 0 9px;font-size:13px;font-weight:700}.entry input,.conversation input{width:100%;padding:14px;border:1px solid #abc2bd;border-radius:9px;background:#f8fbf9;min-width:0}.entry>.primary{width:100%;margin-top:17px}.divider{display:flex;align-items:center;gap:12px;margin:25px 0 12px;color:#728784;font-size:12px;white-space:nowrap}.divider:before,.divider:after{content:'';height:1px;background:#d3e1dc;flex:1}.join{display:flex;gap:9px}.join input{text-transform:uppercase;letter-spacing:.14em}.error{min-height:18px;color:#a13232;font-size:13px}.room{flex:1;padding:50px 0 70px}.room-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px}.room-label{font-weight:700;color:#176c68!important;margin:0}.room-head h1{font-size:clamp(44px,6vw,66px);letter-spacing:.14em;margin:5px 0;font-family:'Noto Serif SC',serif}.room-head p{margin:0}.room-actions{display:flex;gap:10px;align-items:center}.text-button{border:0;background:transparent}.room-grid{display:grid;grid-template-columns:290px 1fr;gap:22px;min-height:440px}.players,.conversation{background:#fff;border:1px solid #b8cec7;border-radius:15px;padding:25px}.players h2,.conversation h2{font-size:18px;margin:0 0 20px}.players h2 span{color:#176c68}.players ul{padding:0;list-style:none}.players li{padding:12px 0;border-bottom:1px solid #e1eae5}.players li:before{content:'●';font-size:9px;color:#43a182;margin-right:11px}.players p{font-size:12px;line-height:1.7;color:#718481;margin-top:30px}.conversation{display:flex;flex-direction:column}.messages{flex:1;overflow:auto;max-height:430px;padding-right:8px}.messages p{max-width:85%;width:fit-content;padding:10px 14px;margin:9px 0;border-radius:10px;background:#edf4ef;line-height:1.6;overflow-wrap:anywhere}.messages .mine{margin-left:auto;background:#d9ebe2}.messages .notice{background:none;color:#82928f;font-size:12px;padding:2px 0}.conversation form{display:flex;gap:10px;margin-top:15px}.hidden{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{padding:20px 0;font-size:12px;color:#738a88;border-top:1px solid #9bb9b2}@media(max-width:760px){.shell{padding:18px}.welcome{grid-template-columns:1fr;gap:30px;padding:45px 0 70px}.hero h1{font-size:48px}.entry{padding:25px;box-shadow:6px 7px 0 #c4dcd4}.room-head{align-items:flex-start;flex-direction:column}.room-actions{flex-wrap:wrap}.room-grid{grid-template-columns:1fr}.players{padding:19px}.conversation{min-height:420px;padding:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep the join action legible on narrow screens. */
.join button{white-space:nowrap}
.room-head .deadline{margin-top:12px;color:#a15c36}.deadline strong{font-variant-numeric:tabular-nums;color:#8d442c}
.game-panel{background:#fff;border:1px solid #b8cec7;border-radius:15px;padding:25px;margin-bottom:22px}.game-panel h2{font-size:24px;margin:0 0 12px}.game-panel p{line-height:1.6;color:#607a78}.game-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.game-controls label{font-weight:600}.game-controls select{font:inherit;padding:12px;border:1px solid #abc2bd;border-radius:9px;background:#f8fbf9;color:#1b3037}.game-meta{display:flex;justify-content:space-between;color:#176c68;font-weight:700;margin-bottom:14px}.game-meta strong{font-variant-numeric:tabular-nums;font-size:24px}#question-text{font-size:clamp(24px,4vw,34px);line-height:1.4}#answer-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}#answer-form input{flex:1;min-width:190px;padding:14px;border:1px solid #abc2bd;border-radius:9px;font:inherit}.choice-row{display:flex;gap:10px}.choice-row button{min-width:100px}.result-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid #e1eae5}.result-row.correct{color:#176c68}.result-row.incorrect{color:#9c513d}#next,#change-mode{margin-top:20px}@media(max-width:760px){.game-panel{padding:19px}.game-controls select,.game-controls button{width:100%}.result-row{align-items:flex-start;flex-direction:column;gap:4px}}
.hidden{display:none!important}
.entry select{width:100%;padding:14px;border:1px solid #abc2bd;border-radius:9px;background:#f8fbf9;color:#1b3037;font:inherit}#compose-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}#compose-form input{flex:1;min-width:220px;padding:14px;border:1px solid #abc2bd;border-radius:9px;font:inherit}.grade-check{width:20px;height:20px;accent-color:#176c68}.result-row:has(.grade-check){cursor:pointer}@media(max-width:760px){#compose-form button{width:100%}}
#compose-form select{padding:12px;border:1px solid #abc2bd;border-radius:9px;background:#f8fbf9;color:#1b3037;font:inherit}@media(max-width:760px){#compose-form select{width:100%}}
.grading-table{margin:24px 0 8px}.grading-heading,.grading-row{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) 105px 94px;gap:16px;align-items:center}.grading-heading{padding:0 12px 11px;color:#607a78;font-size:13px;font-weight:700;border-bottom:2px solid #abc2bd}.grading-row{min-height:64px;padding:12px;border-bottom:1px solid #dce8e3}.grading-name,.grading-answer{min-width:0;overflow-wrap:anywhere}.grading-answer{font-size:17px;line-height:1.5}.grading-time{font-variant-numeric:tabular-nums;white-space:nowrap}.grading-verdict{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}.grading-verdict .grade-check{margin:0;flex:none}@media(max-width:700px){.grading-heading{display:none}.grading-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name verdict' 'answer answer' 'time time';gap:8px;padding:16px 4px}.grading-name{grid-area:name}.grading-answer{grid-area:answer;padding:10px 12px;background:#f3f8f5;border-radius:7px}.grading-time{grid-area:time;color:#607a78;font-size:13px}.grading-verdict{grid-area:verdict}}
.answer-focus{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:225px;margin:22px 0 28px;padding:25px;text-align:center;background:#edf6f1;border:1px solid #c7ded1;border-radius:14px}.answer-focus p{font-size:18px;color:#425e5e;margin:0 0 10px}.answer-focus strong{font-family:'Noto Serif SC',serif;font-size:clamp(64px,10vw,110px);font-weight:700;line-height:1.2;color:#176c68;overflow-wrap:anywhere}.answer-focus span{font-size:22px;color:#536e6a;margin-top:9px}@media(max-width:700px){.answer-focus{min-height:190px;margin:16px 0 20px;padding:18px}.answer-focus p{font-size:16px}.answer-focus strong{font-size:clamp(58px,16vw,84px)}.answer-focus span{font-size:19px}}
.answer-focus{flex-direction:row;gap:clamp(20px,5vw,55px)}.answer-focus img{width:clamp(130px,20vw,190px);height:clamp(130px,20vw,190px);object-fit:contain;flex:none}.answer-focus strong{min-width:0}@media(max-width:700px){.answer-focus{flex-direction:column;gap:4px}.answer-focus img{width:145px;height:145px}}
.review-copy{display:flex;flex-direction:column;align-items:center;min-width:0}.review-copy #review-pinyin{font-size:clamp(22px,3vw,30px);color:#176c68}.review-copy #review-meaning{font-size:clamp(18px,2vw,23px);color:#425e5e;margin-top:4px}
.answer-focus.sentence-review{min-height:235px;padding:30px 26px}.sentence-review .review-copy{max-width:100%;gap:12px}.answer-focus.sentence-review strong{font-size:clamp(32px,5vw,58px);line-height:1.35;letter-spacing:.01em}.sentence-review #review-pinyin{line-height:1.5}.sentence-review #review-meaning{line-height:1.5}@media(max-width:700px){.answer-focus.sentence-review{min-height:210px;padding:24px 16px}.answer-focus.sentence-review strong{font-size:clamp(29px,8vw,44px)}}
.room-browser{grid-column:1/-1;align-self:stretch;border-top:1px solid #a9c5bb;padding-top:25px;margin-top:-20px}.room-browser-head{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.room-browser h2{font-size:23px;margin:0}.room-browser-head p{color:#607a78;font-size:13px;margin:0}.room-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px;margin-top:18px}.room-empty{grid-column:1/-1;margin:0;color:#607a78;padding:20px;border:1px dashed #abc2bd;border-radius:11px}.room-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #b8cec7;border-radius:12px;padding:17px}.room-card div{display:flex;flex-direction:column;gap:6px;min-width:0}.room-card strong{font-size:16px;overflow-wrap:anywhere}.room-card span{font-size:12px;color:#607a78}.room-card button{white-space:nowrap;padding:10px 12px}.room-card button:disabled{opacity:.6;cursor:default}@media(max-width:760px){.room-browser{margin-top:0}.room-browser-head{display:block}.room-browser-head p{margin-top:7px}.room-list{grid-template-columns:1fr}}
.game-controls input[type=number]{font:inherit;width:100px;padding:12px;border:1px solid #abc2bd;border-radius:9px;background:#f8fbf9;color:#1b3037}@media(max-width:760px){.game-controls input[type=number]{width:100%}}