/* TUKLASALITA! Classroom Live v2 — large-text teacher-led projector controls */
.classroom-page{--ink:#174d3f;--fresh:#2a8063;--sun:#ffd16e;--pale:#f3fbf1}
.classroom-shell{max-width:1460px}
.classroom-nav .nav-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.classroom-nav .nav-btn.is-active{pointer-events:none}
.classroom-page button{cursor:pointer}
.classroom-page button:focus-visible,.classroom-page a:focus-visible,.classroom-page input:focus-visible,.classroom-page select:focus-visible,.classroom-page textarea:focus-visible{outline:4px solid #e6a83d;outline-offset:3px}
.classroom-hero{padding:35px 38px;display:grid;grid-template-columns:1.7fr .7fr;gap:22px;border-radius:27px;background:linear-gradient(113deg,#154e42,#207559 78%,#3f996b);color:white;overflow:hidden;position:relative;margin:22px 0 18px;box-shadow:0 20px 34px #235a3b24}
.classroom-hero .eyebrow{color:#fff0bc;background:#ffffff1f;border:1px solid #ffffff30;display:inline-block;border-radius:99px;padding:7px 13px;font-weight:900;font-size:12px}
.classroom-hero h1{font-size:clamp(34px,4.4vw,61px);letter-spacing:-2px;line-height:1.04;margin:18px 0;color:white}
.classroom-hero h1 em{font-style:normal;color:#ffe08b}
.classroom-hero p{font-size:clamp(14px,1.5vw,18px);color:#e0f5e9;max-width:680px;line-height:1.6;margin:0}
.classroom-hero .big-flower{font-size:clamp(105px,12vw,192px);align-self:center;justify-self:center;filter:drop-shadow(0 16px 8px #0d53364c);transform:rotate(8deg)}
.classroom-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:18px;margin-bottom:20px}
.classroom-panel{background:white;border:1px solid #e0eee4;border-radius:22px;padding:25px;box-shadow:0 8px 24px #245f3b0a}
.classroom-panel h2{font-size:22px;letter-spacing:-.5px;margin:0;color:#184e40}
.classroom-intro{color:#668274;margin:10px 0 19px;font-size:14px;line-height:1.6}
.classroom-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.classroom-form .wide{grid-column:1/-1}
.classroom-form label{display:block;color:#3f6e58;font-weight:900;font-size:13px;margin:0 0 7px}
.classroom-field{width:100%;min-width:0;min-height:46px;border:2px solid #deebe2;border-radius:12px;background:#fafdfe;padding:11px 12px;color:#194e40;font:inherit;font-size:15px}
.classroom-field:focus{border-color:#379b70}
textarea.classroom-field{resize:vertical;min-height:72px}
.cl-small{display:block;margin:5px 0;color:#7b8f83;font-size:12px;line-height:1.5}
.team-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:9px}
.team-name-fields input{min-height:40px}
.classroom-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:22px}
.classroom-primary,.classroom-secondary,.classroom-light,.classroom-plain{border-radius:13px;padding:12px 17px;min-height:45px;font-family:inherit;font-size:14px;font-weight:950;border:0}
.classroom-primary{background:#1b7357;color:white;box-shadow:0 4px 0 #11533d}
.classroom-primary:hover{background:#145e46}
.classroom-secondary{background:#fff6dc;color:#845825;border:1px solid #ead5a0}
.classroom-light{background:#f0f9f3;color:#20634b;border:1px solid #cce7d7}
.classroom-plain{background:transparent;color:#35705a}
.classroom-suggestions{display:grid;gap:12px}
.classroom-suggestion{display:flex;align-items:start;gap:12px;background:#f1f9f3;border-radius:16px;padding:14px}
.classroom-suggestion .emoji{font-size:29px}
.classroom-suggestion strong{display:block;color:#28654d;font-size:15px;margin-bottom:4px}
.classroom-suggestion p{margin:0;color:#678472;font-size:13px;line-height:1.55}
.cl-noaccount{margin-top:17px;background:#fff4dd;border-radius:14px;padding:13px;color:#7d5d2e;font-size:12px;line-height:1.6}
.classroom-live-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 14px;justify-content:space-between}
.classroom-live-head .eyebrow{color:#3c795c;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.classroom-live-head .progress-meta{color:#6a8675;font-size:13px;font-weight:850}
.classroom-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.classroom-toolbar button{border:1px solid #d3e7da;border-radius:11px;background:white;padding:10px 12px;color:#2d7054;font-size:13px;font-weight:900;min-height:40px}
.classroom-toolbar button:hover{background:#eaf7ed}
.classroom-progress{width:100%;height:10px;border-radius:30px;background:#dcece1;overflow:hidden}
.classroom-progress div{height:100%;background:linear-gradient(90deg,#2a9e72,#fad27b);transition:width .2s}
.classroom-game-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,.8fr);align-items:start;gap:15px;margin:16px 0 22px}
.classroom-stage{background:white;border-radius:25px;border:1px solid #e0e9df;box-shadow:0 12px 36px #234f3810;padding:23px;min-height:520px}
.classroom-stage-title{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}
.classroom-stage-title .tag{display:inline-block;font-size:12px;font-weight:950;padding:8px 12px;background:#fff1ca;color:#856226;border-radius:100px}
.classroom-stage-title h2{font-size:clamp(25px,3vw,42px);letter-spacing:-1px;color:#1c5546;margin:9px 0 5px}
.classroom-stage-title p{color:#637f70;font-size:clamp(13px,1.15vw,17px);margin:0;line-height:1.5}
.classroom-question{min-height:335px;border-radius:22px;background:linear-gradient(145deg,#f4fbf4,#fbf9e8);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px 20px;gap:15px}
.cl-overline{text-transform:uppercase;letter-spacing:1px;color:#638a74;font-size:13px;font-weight:950}
.cl-focus-word{font-size:clamp(68px,9.5vw,134px);line-height:1.15;font-weight:950;color:#185f48;letter-spacing:-4px;overflow-wrap:anywhere}
.cl-big-message{font-size:clamp(22px,3vw,40px);color:#1f5845;font-weight:900;line-height:1.35;max-width:780px}
.cl-big-message .blank{min-width:105px}
.cl-sentence{font-size:clamp(22px,2.65vw,38px);font-weight:850;line-height:1.4;color:#255c46;max-width:840px}
.cl-guidance{font-size:clamp(13px,1.2vw,18px);color:#6c816e;line-height:1.6;max-width:780px}
.cl-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;width:min(100%,760px);margin:8px auto}
.cl-choice{background:#fff;border:3px solid #cee4d5;border-radius:17px;min-height:83px;padding:15px;color:#155f47;font-size:clamp(28px,3.3vw,50px);font-weight:950;transition:transform .12s,border .12s}
.cl-choice:hover:not(:disabled){border-color:#5ca986;transform:translateY(-2px)}
.cl-choice.correct,.cl-choice.answer{background:#e0f8e8;border-color:#2b9c68;color:#126b49}
.cl-choice.wrong{background:#ffebe3;border-color:#da876b;color:#984c34}
.cl-choice:disabled{cursor:default}
.cl-letter-bank,.cl-letter-guess,.cl-mystery{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:100%}
.cl-letter-bank{max-width:790px}
.cl-letter-bank button{width:clamp(49px,5vw,72px);height:clamp(55px,5.6vw,77px);border:2px solid #bcdcca;border-radius:14px;background:#fff;box-shadow:0 5px 0 #c2dfcb;color:#155741;font-size:clamp(25px,3vw,42px);font-weight:950}
.cl-letter-bank button:disabled{opacity:.22;box-shadow:none;transform:translateY(4px)}
.cl-letter-guess span,.cl-mystery span{min-width:clamp(42px,5vw,70px);height:clamp(59px,5.8vw,82px);background:white;border-bottom:5px solid #85b4a0;display:grid;place-items:center;color:#1c614c;font-size:clamp(30px,3.5vw,48px);font-weight:950;border-radius:10px}
.cl-mystery span.hidden{color:#abc5b8;background:#eff8f2}
.cl-inline-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.cl-inline-buttons button{min-height:47px}
.cl-status{display:block;border-radius:13px;padding:12px 16px;font-size:clamp(14px,1.45vw,20px);line-height:1.5;font-weight:850;text-align:center}
.cl-status.good{background:#def6e4;color:#226344}
.cl-status.try{background:#fff0e4;color:#9f5b3b}
.cl-status.tip{background:#fff7db;color:#86642d}
.cl-controls{border-top:1px solid #e5efe6;margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.cl-controls .group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cl-controls button{min-height:46px}
.cl-quicktip{color:#738d80;font-size:12px;line-height:1.5}
.cl-scoreboard{background:white;border:1px solid #e0e9df;border-radius:22px;padding:17px;box-shadow:0 9px 25px #174f320b}
.cl-scoreboard h3{font-size:18px;color:#195542;margin:0 0 7px}
.cl-scoreboard p{color:#779080;font-size:12px;margin:0 0 14px;line-height:1.5}
.cl-team{padding:12px;border:1px solid #e4ede4;border-radius:16px;background:#f8fbf7;margin-bottom:10px}
.cl-team-top{display:flex;justify-content:space-between;gap:6px;align-items:center}
.cl-team-top strong{color:#235b49;font-size:15px;overflow-wrap:anywhere}
.cl-team-top .pts{font-size:25px;color:#1e6f4b;font-weight:950}
.cl-team-actions{display:flex;gap:8px;margin-top:8px}
.cl-team-actions button{min-height:36px;flex:1;border-radius:10px;border:1px solid #cfe6d7;background:#e4f6e9;color:#205e43;font-size:13px;font-weight:900}
.cl-team-actions button:last-child{max-width:48px;background:#fff;border-color:#e3e7e3;color:#647d6c}
.cl-next-list{border-top:1px solid #e4eae3;padding-top:15px;margin-top:14px;color:#6d8577;font-size:12px;line-height:1.6}
.cl-review-toggle{display:flex;align-items:center;gap:9px;padding:12px;border-radius:13px;background:#fff6e5;color:#7c5c2d;font-size:13px;font-weight:900;margin-top:14px}
.cl-review-toggle input{width:20px;height:20px;accent-color:#d7972d}
.cl-timer{border:1px solid #e2e8d4;border-radius:100px;padding:8px 13px;background:#fff7dd;color:#815d2d;font-size:15px;font-weight:950;white-space:nowrap}
.cl-timer.expired{background:#fff0eb;color:#a14933;border-color:#f2bead}
.cl-blank-word{font-size:clamp(28px,3.4vw,48px);font-weight:900;color:#d6b46b;letter-spacing:2px}
.cl-overflow-wrap{overflow-wrap:anywhere}
.cl-summary{max-width:980px;margin:23px auto 32px;background:white;border:1px solid #dcebe0;border-radius:26px;padding:32px;box-shadow:0 15px 35px #1b4d3212}
.cl-summary h1{font-size:clamp(30px,4vw,51px);color:#195943;letter-spacing:-1.5px;margin:8px 0 10px}
.cl-summary p{color:#668070;line-height:1.65}
.cl-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}
.cl-result-tile{background:#f0f9f1;border-radius:16px;padding:16px;text-align:center}
.cl-result-tile b{display:block;color:#1c6149;font-size:33px}
.cl-result-tile span{color:#6d8777;font-size:12px;font-weight:850}
.cl-word-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.cl-word-tag{border-radius:100px;background:#e5f6e8;color:#32694f;padding:8px 12px;font-weight:900;font-size:14px}
.cl-word-tag.review{background:#fff0d4;color:#9b6925}
.cl-team-results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.cl-team-result{border-radius:13px;background:#fff5df;padding:15px;color:#6d5428;font-weight:850}
.classroom-toast{position:fixed;z-index:120;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;background:#164d3d;color:#fff;padding:12px 18px;border-radius:30px;box-shadow:0 10px 24px #162e2540;font-size:14px;font-weight:800;text-align:center}
.classroom-toast.active{transform:translate(-50%,0);opacity:1}
.teacher-guide-dialog{border:0;border-radius:24px;padding:27px;max-width:min(680px,94vw);box-shadow:0 30px 70px #123b2844;color:#255943;line-height:1.55}
.teacher-guide-dialog::backdrop{background:#092f2388}
.teacher-guide-dialog h2{font-size:26px;color:#16543e;margin:0 0 12px}
.teacher-guide-dialog p,.teacher-guide-dialog li{font-size:14px}
.teacher-guide-dialog kbd{background:#e2f4e8;border-radius:5px;padding:2px 6px}
.guide-close{float:right;border:0;background:#e9f4ed;font-size:23px;width:37px;height:37px;border-radius:100%;color:#225943}
.cl-teacher-note{background:#f6fbf4;border-left:5px solid #6bb88b;border-radius:10px;padding:10px 13px;color:#476c57;font-size:13px;line-height:1.6;margin-top:12px}
.cl-winner{color:#b98029;font-weight:950}
.cl-session-print{display:none}
@media(max-width:1100px){.classroom-game-layout{grid-template-columns:minmax(0,1.8fr) minmax(230px,.7fr)}.classroom-topbar .privacy-pill{display:none}}
@media(max-width:880px){.classroom-workspace,.classroom-game-layout{grid-template-columns:1fr}.cl-scoreboard .team-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cl-team{margin:0}.classroom-hero{padding:26px}.classroom-hero .big-flower{font-size:95px}.classroom-stage{min-height:0}}
@media(max-width:590px){.classroom-hero{display:block;padding:25px 20px}.classroom-hero .big-flower{display:none}.classroom-form,.team-name-fields{grid-template-columns:1fr}.classroom-panel,.classroom-stage{padding:18px}.classroom-hero h1{font-size:38px}.cl-choice{min-height:64px;font-size:26px}.cl-choice-grid{gap:8px}.classroom-question{min-height:300px;padding:21px 9px}.cl-scoreboard .team-wrap{grid-template-columns:1fr}.cl-results-grid{gap:6px}.cl-result-tile{padding:11px}.cl-result-tile b{font-size:25px}.cl-controls .group{flex:1}.cl-controls .group button{flex:1}.classroom-toolbar{justify-content:flex-start}.cl-letter-guess span,.cl-mystery span{min-width:35px;height:53px}.classroom-nav{flex-wrap:nowrap}.classroom-nav .nav-btn{font-size:12px!important}.classroom-nav .nav-btn span{display:inline}.cl-summary{padding:20px}.cl-team-results{grid-template-columns:1fr}}
@media(min-width:1000px) and (min-height:700px){:fullscreen .classroom-stage{min-height:68vh}:fullscreen .classroom-question{min-height:48vh}:fullscreen .classroom-shell{max-width:100%;padding:0 2.4vw}}
@media print{.classroom-page .app-shell,.classroom-toast,.teacher-guide-dialog{display:none!important}.cl-session-print{display:block!important;margin:25px;font-family:Arial,sans-serif;color:#222}.cl-session-print h1{font-size:24px}.cl-session-print .summary-table{border-collapse:collapse;width:100%}.summary-table th,.summary-table td{border:1px solid #ddd;padding:7px;text-align:left}}
@media(prefers-reduced-motion:reduce){.cl-choice{transition:none}.classroom-toast{transition:none}}