/* styles.css */
@font-face{font-family:Montserrat;src:url('/assets/fonts/montserrat-regular.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Montserrat;src:url('/assets/fonts/montserrat-bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:Montserrat;src:url('/assets/fonts/montserrat-extrabold.woff2') format('woff2');font-weight:800;font-display:block}
@font-face{font-family:ECDisplay;src:url('/assets/fonts/ec-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:ECDisplayLight;src:url('/assets/fonts/ec-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
:root{--cream:#fffaf0;--ink:#101010;--gold:#ffb900;--navy:#060d1e;--red:#e8343d;--green:#24a85d;--yellow:#f4b914;--blue:#328ee2;--shadow:#110d08}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Montserrat,Arial,sans-serif;color:var(--cream);background:var(--navy)}
button,input,select,textarea{font:inherit;font-style:normal}
button{cursor:pointer;font-family:Montserrat,Arial,sans-serif;font-weight:800;font-style:normal;font-synthesis:none}
.hidden{display:none!important}
#background{position:fixed;inset:0;z-index:-3;background:center/cover no-repeat;background-image:linear-gradient(#05091466,#05091466),url('/assets/backgrounds/castle-walk-v8.17.webp')}
#background:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#02050a22 0%,#02050a08 48%,#02050a66 100%);pointer-events:none}
.area-start #background{background-image:linear-gradient(#05091452,#05091452),url('/assets/backgrounds/castle-walk-v8.17.webp')}
.area-students #background{background-image:linear-gradient(#0509148c,#0509148c),url('/assets/backgrounds/students-walk-v8.17.webp')}
.area-teacher #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/library-walk-v8.17.webp')}
.area-school #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/school-hall-walk-v8.17.webp')}
.area-admin #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/winter-garden-walk-v8.17.webp')}
.area-training #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/training-walk-v8.17.webp')}
.area-game #background,.area-quiz #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/game-arena-walk-v8.17.webp')}
#weather{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.clouds,.rain,.snow,.lightning{position:absolute;inset:0;opacity:0}.clouds{inset:-20%;background:radial-gradient(ellipse at 30% 40%,#0008,transparent 38%),radial-gradient(ellipse at 75% 20%,#0006,transparent 34%);animation:cloudDrift 34s linear infinite}.theme-dusk .clouds{opacity:.16}.area-game .clouds{opacity:.24}
#hud{position:fixed;left:0;right:0;top:0;height:164px;z-index:50;isolation:isolate;pointer-events:none}
.hud-left{position:absolute;left:18px;top:22px;display:flex;gap:9px}
.game-meta-box{min-width:68px;height:58px;padding:6px 10px;border:1px solid #a38b49;border-radius:12px;background:#071022e8;text-align:center}.game-meta-box small{display:block;color:#e8d38a;font-size:9px;letter-spacing:1.5px}.game-meta-box strong{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;line-height:29px;font-weight:800}
.brand-title-row{position:absolute;left:0;right:0;top:4px;display:flex;align-items:center;width:100%;height:158px;overflow:visible;background:transparent}
.brand-title-lock{position:absolute;left:50%;top:0;width:0;height:100%;overflow:visible;background:transparent}
#hud-logo{display:block;width:350px;height:158px;padding:0;object-fit:contain;object-position:center;overflow:visible;z-index:3;filter:drop-shadow(0 7px 6px #000c)}
.brand-title-row #hud-logo{position:absolute;right:-38px;transform:scale(1.2);transform-origin:top right}
.title-stack{position:absolute;left:-18px;top:50%;width:max-content;min-width:0;padding:0 0 6px;text-align:left;transform:translateY(calc(-50% + 21px));filter:drop-shadow(0 7px 6px #000c);background:transparent}
#page-title-image{display:none}
.title-stack:before{content:attr(data-title);display:block;white-space:nowrap;font-family:ECDisplay,Arial,sans-serif;font-style:normal;font-weight:400;font-size:clamp(32.4px,2.4vw,40.8px);line-height:1;letter-spacing:.1px;color:var(--gold);-webkit-text-stroke:0;text-shadow:2px 4px 0 #382200,0 7px 13px #000d}
.title-underline{position:absolute;left:6%;bottom:0;width:88%;height:9px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 58%,#f8ad00 80%,transparent 100%);clip-path:polygon(0 17%,8% 8%,23% 16%,43% 10%,62% 22%,78% 27%,90% 38%,100% 50%,91% 62%,76% 69%,58% 76%,39% 88%,20% 80%,7% 93%,0 100%);filter:drop-shadow(1px 1px 0 #744400);transform:rotate(-.35deg);transform-origin:left center}
.hud-right{position:absolute;right:18px;top:22px;display:flex;gap:9px}.score-box,.timer-box,.question-box,.answers-box{min-width:68px;height:58px;padding:6px 10px;border:1px solid #a38b49;border-radius:12px;background:#071022e8;text-align:center}.hud-right small{display:block;color:#e8d38a;font-size:9px;letter-spacing:1.5px}.hud-right strong{font-size:22px;line-height:29px;font-weight:800}.score-box{display:none}
#page-content{position:fixed;left:0;right:0;top:164px;bottom:74px;z-index:5;overflow:auto;padding:8px 18px 24px;scrollbar-width:thin}
.screen{width:min(1200px,100%);min-height:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.menu-stack{width:min(330px,34vw);display:grid;grid-auto-rows:58px;gap:12px;margin:26px auto 0}.menu-stack>.piatnik{height:58px;margin:0;align-self:stretch}
.piatnik{position:relative;width:100%;height:58px;border:4px solid currentColor;border-radius:16px;background:linear-gradient(#fffdf8,#f2eee5);box-shadow:0 7px 0 #140f08,0 10px 15px #0009;color:var(--red);display:grid;grid-template-columns:52px 1fr 52px;align-items:center;padding:0 10px;text-transform:uppercase}
.piatnik>span:last-child{grid-column:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:translateY(5px);text-align:center;font-family:ECDisplay,Arial,sans-serif;font-style:normal;font-size:22px;font-weight:400;line-height:1;color:var(--ink);letter-spacing:.1px;text-shadow:none}
.piatnik{overflow:hidden}.piatnik:after{content:"";position:absolute;top:-80%;left:-42%;width:28%;height:260%;background:linear-gradient(90deg,transparent,#ffffff8f,transparent);transform:rotate(18deg);opacity:0;pointer-events:none}.piatnik.piatnik-light-sweep:after{animation:piatnikShine 1.9s ease-in-out 1}.piatnik.piatnik-light-halo{animation:piatnikHalo 2s ease-in-out 1}.piatnik.piatnik-light-pulse{animation:piatnikPulse 1.8s ease-in-out 1}
.piatnik .suit{display:block;position:absolute;z-index:2;left:17px;top:50%;width:34px;height:34px;transform:translateY(-50%);filter:drop-shadow(1px 2px 1px #777)}.piatnik .suit svg{display:block;width:100%;height:100%;fill:currentColor}
.piatnik.spade{color:var(--green)}.piatnik.diamond{color:var(--yellow)}.piatnik.club{color:var(--blue)}.piatnik.disabled{opacity:.45;cursor:not-allowed}
.panel{width:min(800px,78vw);margin:20px auto 0;padding:22px 26px;border:1px solid #a77818;border-radius:20px;background:#061225e8;box-shadow:0 15px 35px #0008;color:#fff}.panel.login-panel{width:min(410px,66vw);border:0;padding:0;background:transparent;box-shadow:none}.panel.login-panel .form-grid{grid-template-columns:1fr;gap:14px}.panel.login-panel .field.full{grid-column:1}.panel.class-summary{border:0;background:transparent;box-shadow:none}
.panel.login-panel .actions{flex-direction:column;align-items:center}.panel.login-panel .login-register{display:block;margin-top:8px}
.panel.login-panel .school-login-actions{flex-direction:row;align-items:center;justify-content:center;gap:18px}.panel.login-panel .school-login-actions .login-register{margin-top:0}
body[data-route="/school"] .panel.login-panel .actions.school-login-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;gap:18px;width:100%;margin-top:26px}body[data-route="/school"] .panel.login-panel .actions.school-login-actions .simple-nav{position:static;margin:0}
.school-password-forgot{display:block;margin:13px auto 0;padding:2px 6px;border:0;background:transparent;color:#ffd34d;font:700 13px Montserrat,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.school-password-forgot:hover,.school-password-forgot:focus-visible{color:#fff1a8}.school-password-reset-field{width:min(560px,52vw);text-align:left}.school-password-reset-field h2,.school-password-reset-field p{text-align:center}.school-password-reset-field .actions .simple-nav{position:static;width:auto;min-width:190px}@media(max-width:700px){.school-password-reset-field{width:calc(100vw - 32px);padding-inline:14px}.school-password-reset-field p{font-size:13px}}
.panel h2,.panel h3{font-family:ECDisplay,Arial,sans-serif;font-style:normal;font-weight:400;color:var(--gold);letter-spacing:.5px}.panel h2{margin:0 0 20px;font-size:34px}.panel h3{font-size:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font-weight:700;text-transform:uppercase;color:#ffe080;letter-spacing:1px}.field input,.field select,.field textarea{width:100%;min-height:58px;padding:12px 18px;border:2px solid #e1bf55;border-radius:14px;background:#fffbc9;color:#111;font-size:21px}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:26px}.credentials,.notice{margin-top:18px;padding:14px 18px;border-radius:12px;background:#030b19bf;text-align:center}.notice.success{border:2px solid #35b56a}.notice.error{border:2px solid #e34c51}.small{font-size:14px;color:#d9d5c9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat-card{padding:18px;border:2px solid #a77818;border-radius:14px;text-align:center}.stat-card strong{display:block;font-size:34px;color:var(--gold)}
.data-table{width:100%;border-collapse:collapse;background:#071022}.data-table th,.data-table td{padding:12px;border-bottom:1px solid #685625;text-align:left}.data-table th{color:#ffe080;text-transform:uppercase}.student-admin-table{margin-top:22px}.student-remove{width:34px;height:34px;border:0;border-radius:8px;background:#e34c51;color:#fff;font-size:20px;font-weight:800;cursor:pointer}
.units-grid{width:min(780px,70vw);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.units-grid .piatnik{height:58px}.units-grid .piatnik>span:last-child{font-size:23px}.units-grid .piatnik .suit{font-size:32px}
.unit-continue-stack{width:min(360px,54vw);margin:18px auto 0}.unit-continue-stack .piatnik{height:58px}
.question-shell{width:min(740px,62vw)}.progress-line{display:flex;justify-content:space-between;margin:0 0 12px;font-weight:700}.game-layout{display:grid;grid-template-columns:minmax(0,740px);gap:20px;align-items:start;justify-content:center}.game-layout:not(.has-ranking){grid-template-columns:minmax(0,740px)}.question-card{position:relative;min-height:150px;padding:42px 32px 28px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;text-align:center;font-size:clamp(25px,2.3vw,39px);font-weight:700;box-shadow:0 10px 0 #140f08;display:flex;align-items:center;justify-content:center}.question-suits{position:absolute;left:50%;top:0;transform:translate(-50%,-68%);font-family:Georgia,serif;font-size:31px;line-height:1;display:flex;gap:9px;z-index:2;text-shadow:0 5px 5px #0008}.question-suits span:nth-child(1){color:var(--red)}.question-suits span:nth-child(2){color:var(--green)}.question-suits span:nth-child(3){color:var(--yellow)}.question-suits span:nth-child(4){color:var(--blue)}
.question-suits span{display:inline-block}.question-suits span:nth-child(1),.question-suits span:nth-child(4){transform:translateY(3px)}.question-suits span:nth-child(2),.question-suits span:nth-child(3){transform:translateY(-3px)}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.answer{position:relative;min-height:78px;border:5px solid var(--blue);border-radius:18px;background:#fffaf0;color:#111;font-family:Montserrat,Arial,sans-serif;font-size:21px;font-weight:700;text-align:left;padding:12px 18px;box-shadow:0 8px 0 #140f08;display:flex;align-items:center}.answer:nth-child(1){border-color:var(--red)}.answer:nth-child(2){border-color:var(--green)}.answer:nth-child(3){border-color:var(--yellow)}.ans-suit{font-family:Georgia,serif;font-size:31px;margin-right:18px}.answer:nth-child(1) .ans-suit{color:var(--red)}.answer:nth-child(2) .ans-suit{color:var(--green)}.answer:nth-child(3) .ans-suit{color:var(--yellow)}.answer:nth-child(4) .ans-suit{color:var(--blue)}.answer.selected-wrong{opacity:.38}.answer.correct-answer:after{content:"";position:absolute;inset:7px 10px;border:5px solid #f4d536;border-radius:48% 52% 45% 55%;transform:rotate(-8deg);box-shadow:0 0 0 1px #6f510040;pointer-events:none}.answer.correct-choice:after{content:"✓";position:absolute;right:17px;top:50%;transform:translateY(-52%) rotate(-8deg);font-family:'Comic Sans MS',cursive;font-size:48px;color:#1a8d39;text-shadow:0 2px 0 #fff}
.admin-question-screen{padding-top:2px}.admin-question-editor{width:min(740px,72vw)}.admin-question-nav{display:flex;justify-content:center;gap:18px;margin-bottom:16px}.admin-question-nav label{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #a77818;border-radius:10px;background:#061225e8;color:#ffe080;font-weight:800;text-transform:uppercase}.admin-question-nav select{min-height:34px;padding:3px 9px;border:1px solid #e1bf55;border-radius:7px;background:#fffbc9;color:#111}.admin-question-card textarea,.admin-answer textarea{width:100%;border:0;outline:0;resize:none;overflow:auto;background:transparent;color:#111;font:inherit;font-weight:700;text-align:inherit}.admin-question-card textarea{min-height:72px;text-align:center;font-size:clamp(23px,2.1vw,35px)}.admin-answer{cursor:text}.admin-answer textarea{min-height:50px}.correct-answer-radio{position:absolute;right:10px;top:8px;width:22px;height:22px;accent-color:#199447;cursor:pointer}.correct-answer-label{position:absolute;right:9px;bottom:5px;color:#147b37;font-size:10px;letter-spacing:.6px;opacity:0}.admin-answer.admin-correct-answer{background:#eaffdf;box-shadow:0 8px 0 #140f08,0 0 0 4px #38b75a}.admin-answer.admin-correct-answer .correct-answer-label{opacity:1}.admin-question-actions{margin-top:18px}.admin-question-actions button:disabled{opacity:.4;cursor:not-allowed}
.answer.wrong-choice{opacity:.45;transition:opacity .42s ease,filter .42s ease;filter:saturate(.58)}.answer.correct-choice:after{content:none}.answer-copy{min-width:0}.brush-check{position:static;display:inline-block;width:48px;height:48px;margin-left:7px;overflow:visible;vertical-align:middle;transform:rotate(var(--check-rotate));filter:drop-shadow(0 2px 0 #fff);pointer-events:none}.brush-check path{fill:none;stroke:#147f38;stroke-linecap:round;stroke-linejoin:round}.brush-check-texture{opacity:.42;stroke:#48ad66!important}.brush-check-bristle{opacity:.3;stroke:#0b6429!important}.answer-celebration{width:max-content;max-width:90%;margin:22px auto 0;color:var(--gold);font-family:ECDisplay,Arial,sans-serif;font-size:clamp(34px,3.2vw,50px);line-height:1;text-align:center;text-shadow:1px 2px 0 #704500,0 5px 12px #000;transform-origin:center;will-change:transform;animation-duration:1.25s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.answer-celebration.dance-0{animation-name:celebrationBounce}.answer-celebration.dance-1{animation-name:celebrationSwing}.answer-celebration.dance-2{animation-name:celebrationHop}.answer-celebration.dance-3{animation-name:celebrationTwist}
.answer.correct-choice:not(:has(.brush-check)):after{content:"✓";position:absolute;right:17px;top:50%;transform:translateY(-52%) rotate(-7deg);font-family:'Comic Sans MS',cursive;font-size:52px;font-weight:900;color:#198e43;text-shadow:1px 0 #198e43,0 2px 0 #fff}
.league-feedback{position:relative;width:max-content;max-width:90%;margin:26px auto 0;overflow:visible;color:var(--gold);font-family:ECDisplay,Arial,sans-serif;font-size:clamp(34px,3.2vw,50px);line-height:1.08;text-align:center;text-shadow:1px 2px 0 #704500,0 5px 12px #000;transform-origin:center}.feedback-enter-0{animation:feedbackAppear .9s cubic-bezier(.2,.85,.25,1) 1 both}.feedback-enter-1{animation:feedbackSlide .82s cubic-bezier(.18,.82,.28,1) 1 both}.feedback-enter-2{animation:feedbackTwirl .92s cubic-bezier(.2,.8,.2,1) 1 both}.feedback-enter-3{animation:feedbackDrop .86s cubic-bezier(.18,.85,.3,1) 1 both}.league-feedback:after{content:"";position:absolute;z-index:2;top:-25%;bottom:-25%;left:-42%;width:28%;background:linear-gradient(105deg,transparent,#fff4ae12 28%,#fff8ccaa 50%,#fff4ae18 72%,transparent);transform:skewX(-18deg);pointer-events:none}.feedback-copy{position:relative;z-index:1;display:block;padding-top:5px}.feedback-light-0:after{animation:feedbackLight 3.4s ease-in-out 1s infinite}.feedback-light-1 .feedback-copy{animation:feedbackGlow 3.1s ease-in-out 1s infinite}.feedback-light-2 .feedback-copy{animation:feedbackBreathe 3.7s ease-in-out 1s infinite}.wait-dots{position:relative;z-index:1;display:inline-flex;width:.72em;justify-content:flex-start}.wait-dots i{font-style:normal;opacity:.22;animation:waitDot 1.35s ease-in-out infinite}.wait-dots i:nth-child(2){animation-delay:.18s}.wait-dots i:nth-child(3){animation-delay:.36s}.result-motivating{color:#ffd13f}.result-positive{color:var(--gold)}.card-feedback{margin-top:12px}.card-feedback-red{color:#ff515a}.card-feedback-yellow{color:#ffd13f}
.ranking{display:grid;gap:8px;margin:0}.ranking-question-field{position:relative;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;box-shadow:0 10px 0 #140f08;color:#111;width:min(720px,66vw);margin:44px auto 0;padding:28px 26px 22px}.ranking-question-field .rank-row{border-bottom:1px solid #d9caa8;border-radius:0;background:transparent}.ranking-question-field .rank-row:last-child{border-bottom:0}.ranking-empty{padding:18px;text-align:center;font-weight:700}.game-layout>.ranking{max-height:430px;overflow:auto;padding-right:3px}.rank-row{display:grid;grid-template-columns:38px 1fr 48px;padding:10px 12px;border-radius:10px;background:#fffaf0;color:#111;font-weight:700}.live-status,.player-count{text-align:center;margin:18px;font-size:20px}.player-wait{margin:82px 0 0;color:var(--gold);font-family:ECDisplay,Arial,sans-serif;font-size:44px;font-style:normal;font-weight:400;text-align:center;text-shadow:.35px .35px 0 #6d4b00}.lobby-screen{gap:18px;padding-top:0}.lobby-code{position:relative;width:max-content;margin:18px auto 0;padding-bottom:6px;text-align:center;font-size:72px;font-weight:800;letter-spacing:7px;color:var(--gold)}.lobby-code:after{content:"";position:absolute;left:6%;bottom:0;width:88%;height:9px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 58%,#f8ad00 80%,transparent 100%);clip-path:polygon(0 17%,8% 8%,23% 16%,43% 10%,62% 22%,78% 27%,90% 38%,100% 50%,91% 62%,76% 69%,58% 76%,39% 88%,20% 80%,7% 93%,0 100%);filter:drop-shadow(1px 1px 0 #744400);transform:rotate(-.35deg);transform-origin:left center}.lobby-student-grid{width:min(1120px,88vw);display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:14px}.lobby-student-button{flex:0 0 auto;width:clamp(190px,calc(var(--nickname-length) * 17px + 132px),460px);height:58px;grid-template-columns:52px minmax(0,1fr) 42px}.lobby-remove{position:relative;z-index:4;grid-column:3;justify-self:center;right:auto;top:auto;transform:none;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:#e7e8ed;color:#111;font-size:18px;font-weight:800}.lobby-requests-field{width:min(680px,65vw);padding:12px;border-radius:16px;background:#fffaf0;color:#111}.player-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.player-chip{padding:10px 12px;border-radius:20px;background:#fff;color:#111}.player-chip button{border:0;border-radius:8px;padding:6px 8px}
.voice-management{overflow:visible}.voice-management>.ranking{max-height:40vh;overflow:auto}.voice-all-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:2px 12px 12px;border-bottom:2px solid #d9caa8;font-weight:800}.voice-rank-row{grid-template-columns:38px minmax(0,1fr) 68px 92px;align-items:center}.voice-toggle{min-width:88px;height:34px;padding:0 10px;border:2px solid #ffe16a;border-radius:8px;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;text-shadow:0 1px 2px #0008;cursor:pointer}.voice-toggle.voice-on{background:linear-gradient(#48a8fa,#1266b5)}.voice-toggle.voice-off{background:linear-gradient(#8c9199,#555a62)}.voice-toggle:disabled{opacity:.45;cursor:not-allowed}
.card-rank-row{grid-template-columns:38px minmax(120px,1fr) 68px 92px minmax(168px,auto)}.card-actions{display:flex;gap:5px}.card-button{height:30px;padding:0 8px;border:2px solid #2225;border-radius:7px;font-size:10px;font-weight:900;text-transform:uppercase;cursor:pointer}.card-button.yellow{background:#ffd62f;color:#211900}.card-button.red{background:#e9323d;color:#fff}.card-button.clear{background:#e5e7eb;color:#222}.card-status{display:inline-block;padding:2px 5px;border-radius:4px;font-size:9px;font-style:normal}.card-status.yellow{background:#ffd62f}.card-status.red{background:#e9323d;color:#fff}.ranking-points{white-space:nowrap}.student-card-notice{position:fixed;left:260px;bottom:11px;z-index:32;display:flex;width:62px;height:50px;align-items:center;justify-content:center;margin:0;pointer-events:none;transform-origin:50% 100%;will-change:transform;animation:studentHeldCardWave 1.55s ease-in-out .7s infinite}.student-card-notice span{display:block;width:34px;height:48px;border:2px solid #fff7;border-radius:4px;box-shadow:0 4px 8px #0008;animation:cardAppear .7s cubic-bezier(.2,.85,.25,1) 1 both}.student-card-notice.yellow-card span{background:#ffd62f}.student-card-notice.red-card span{background:#e9323d}
.card-management-nav{position:fixed;z-index:41;left:380px;bottom:12px;width:54px;height:46px;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer}.card-management-nav .mini-card{position:absolute;top:7px;width:23px;height:32px;border:2px solid #fff7;border-radius:3px;box-shadow:0 2px 3px #0008}.card-management-nav .mini-card.red{left:25px;background:#e9323d;transform:rotate(12deg)}.card-management-nav .mini-card.yellow{left:9px;background:#ffd62f;transform:rotate(-5deg)}
.ans-suit{text-shadow:0 3px 3px #0005}
#nav-controls{position:fixed;inset:0;z-index:30;pointer-events:none}.simple-nav{height:46px;min-width:130px;padding:0 12px;border:2px solid #ffe16a;border-radius:10px;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;text-shadow:0 2px 2px #0008;box-shadow:0 4px 0 #090b10;pointer-events:auto}.simple-nav.yellow{background:linear-gradient(#ffc52e,#e79700)}.simple-nav.green{background:linear-gradient(#5ddd1c,#199100)}.simple-nav.red{background:linear-gradient(#fa3939,#bf0909)}.simple-nav.blue{background:linear-gradient(#48a8fa,#1266b5)}.simple-nav.gray{background:linear-gradient(#d9dadd,#777a82)}.simple-nav:disabled{opacity:.45;cursor:not-allowed}
.home{position:absolute;right:14px;bottom:12px}.quit{position:absolute;right:404px;bottom:12px}.pause{position:absolute;right:260px;bottom:12px}.back{position:absolute;right:260px;bottom:12px;width:88px;min-width:88px}.next{position:absolute;right:158px;bottom:12px;width:88px;min-width:88px}
.training-quit{position:absolute;right:362px;bottom:12px}
.training-quit{width:88px;min-width:88px;padding:0 6px}
.ranking-nav{position:absolute;left:258px;bottom:12px;min-width:112px}
#lobby-quit{right:302px;width:130px;min-width:130px}.lobby-start{position:absolute;left:50%;bottom:96px!important;min-width:130px;transform:translateX(-50%)}
#screen-button{position:fixed;left:14px;right:auto;bottom:12px;z-index:31;width:88px;min-width:88px;height:46px;padding:0 6px}
#mute-button{position:fixed;left:116px;right:auto;bottom:12px;z-index:31;min-width:88px;width:88px;height:46px;padding:0 6px;background:linear-gradient(#48a8fa,#1266b5);font-family:Montserrat,Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:0}
#teacher-continue-button{position:fixed;left:218px;right:auto;bottom:12px;z-index:31;width:130px;min-width:130px;height:46px;padding:0 8px}

/* V8.192: unambiguous teacher controls in an active League game. */
body[data-route^="/teacher/room/"] .ranking-nav{left:218px;width:130px;min-width:130px}
body[data-route^="/teacher/room/"] .card-management-nav{left:362px}
body[data-route^="/teacher/room/"] .quit,
body[data-route^="/teacher/room/"] .pause,
body[data-route^="/teacher/room/"] .next{width:130px;min-width:130px}
body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) .quit{right:302px}
body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) .pause{right:158px}
body[data-route$="/ranking"] .quit{right:302px}
body[data-route$="/ranking"] .pause{right:158px}
body[data-route^="/teacher/room/"] .next{right:158px}
.ranking-continue-stack{display:flex;justify-content:center;margin-top:22px}
.ranking-continue-stack .simple-nav{position:static;width:170px;min-width:170px}
#help-language-button{position:fixed;left:218px;bottom:12px;z-index:31;width:130px;min-width:130px;height:46px;margin:0}
body.has-teacher-continue #help-language-button{display:none!important}
body.student-live-game #bottom-links{display:none}
#bottom-links{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:32;display:flex;gap:24px}#bottom-links a{color:#f3dfac;text-decoration:none}#logout-link{display:none}
.area-splash #page-content{top:0;bottom:0;padding-bottom:58px}.splash{justify-content:center;transform:translateY(-16vh)}.splash-logo-shell{display:block;width:min(295px,48vw);max-height:200px}.splash-logo{display:block;width:100%;max-height:200px;object-fit:contain;transform:rotate(3deg);transform-origin:center;filter:drop-shadow(0 12px 12px #000d)}.demo-badge,.tagline{text-align:center;font-weight:800;letter-spacing:2px}.tagline{font-size:18px;margin:8px 0 18px}.enter{margin-top:4px}
body[data-route="/teacher/home"] #background,body[data-route="/teacher/classes"] #background,body[data-route="/teacher/classes/edit"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/alchemy-walk-v8.17.webp')}
body[data-route^="/teacher/class/"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/library-walk-v8.17.webp')}
body[data-route^="/teacher/class/"][data-route*="/students"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/greenhouse-walk-v8.17.webp')}
body[data-route^="/teacher/class/"][data-route$="/results"] #background{background-image:linear-gradient(#05091478,#05091478),url('/assets/backgrounds/school-hall-walk-v8.17.webp')}
body[data-route^="/teacher/class/"][data-route$="/units"] #background{background-image:linear-gradient(#05091478,#05091478),url('/assets/backgrounds/game-arena-walk-v8.17.webp')}
body[data-route^="/teacher/room/"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/cloister-walk-v8.17.webp')}
body[data-route^="/teacher/room/"] .question-shell,body[data-route^="/play/"] .question-shell{margin-top:24px}
body[data-route^="/students/league"] #background{background-image:linear-gradient(#05091478,#05091478),url('/assets/backgrounds/bridge-walk-v8.17.webp')}
body[data-route^="/students/league"] .screen>.panel{width:min(680px,70vw)}
body[data-route^="/training/play/"] .score-box{display:block}
body[data-route^="/training/play/"] .question-box{display:block}
body[data-route^="/training/play/"] .training-feedback{margin-top:18px}
body[data-route^="/training/play/"] .training-question-shell{width:min(740px,62vw);margin-top:30px}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{box-sizing:border-box;display:flex;flex-direction:column;width:min(820px,78vw);border:4px solid #f4b914;background:linear-gradient(#0b1b31ed,#061225ed);box-shadow:0 8px 0 #140f08,0 13px 18px #000c}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form{order:1;display:grid;grid-template-columns:64px 120px 64px auto;gap:14px;align-items:end}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form .form-grid,body[data-route^="/teacher/class/"][data-route*="/students"] #student-form .form-grid{display:contents}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form .actions{grid-column:4;grid-row:1;margin:0;justify-content:flex-end}
body[data-route^="/teacher/class/"][data-route*="/students"] #class-msg{grid-column:1/-1}
body[data-route^="/teacher/class/"][data-route*="/students"] #student-form{order:2;display:block;margin-top:22px}
body[data-route^="/teacher/class/"][data-route*="/students"] #student-form .notice{grid-column:1;grid-row:1;margin:0}
body[data-route^="/teacher/class/"][data-route*="/students"] #student-form .actions{grid-column:2;grid-row:1;margin:0;justify-content:flex-end}
body[data-route^="/teacher/class/"][data-route*="/students"] #student-msg{grid-column:1/-1}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table{order:3;margin-top:22px}
body[data-route^="/quiz"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/game-arena-walk-v8.17.webp')}
body[data-route^="/training/play"] .timer-box.hidden{display:block!important}
/* V7.56 requested result, lobby and league-control refinements */
.lobby-student-button .lobby-student-name{grid-column:2;grid-row:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:translateY(5px);padding:0 6px;overflow:visible;white-space:nowrap;text-align:center;font-family:ECDisplay,Arial,sans-serif;font-size:22px;font-weight:400;line-height:1;color:var(--ink)}
.lobby-student-button .lobby-remove{grid-column:3;grid-row:1}
.league-quit{position:absolute;right:446px;bottom:12px}
.player-quit{position:absolute;right:14px;bottom:12px}
.student-total-nav{position:absolute;left:258px;bottom:12px}
body[data-route^="/training/play/"] .training-feedback{margin-top:24px}
body[data-route$="/results"] .results-panel,body[data-route$="/total"] .results-panel{max-height:68vh;overflow:auto}
.all-results-panel>h3:not(:first-of-type){margin-top:32px;padding-top:22px;border-top:1px solid #a7781877}.season-total-table{margin-bottom:28px}
.ceremony-screen{position:relative;min-height:100%;overflow:hidden;padding-top:0}.ceremony-heading{position:relative;z-index:8;display:grid;gap:2px;text-align:center;color:#ffe6a1;text-shadow:0 3px 8px #000}.ceremony-heading span{font-size:12px;font-weight:800;letter-spacing:3px}.ceremony-heading strong{font-family:ECDisplay,Arial,sans-serif;font-size:25px;color:var(--gold);font-weight:400}.podium-announcer{position:relative;z-index:9;width:100%;height:48px;margin-top:3px;text-align:center;font-family:ECDisplay,Arial,sans-serif;font-size:34px;color:#ffd336;text-shadow:2px 4px 0 #382200,0 0 14px #ffc40088}.podium-announcer span{position:absolute;left:0;right:0;opacity:0}.announce-third{animation:podiumAnnouncement 2.2s ease .3s 1 both}.announce-second{animation:podiumAnnouncement 2.2s ease 2.55s 1 both}.announce-first{animation:podiumAnnouncement 2.2s ease 4.8s 1 both}.announce-champion{animation:championAnnouncement 1.1s cubic-bezier(.2,.9,.2,1) 6.75s 1 both}
.formula-podium{position:relative;z-index:8;display:flex;align-items:flex-end;justify-content:center;gap:14px;width:min(780px,78vw);height:245px;margin:72px auto 0;filter:drop-shadow(0 14px 12px #000c)}.podium-place{position:relative;display:grid;grid-template-rows:1fr 68px;width:31%;height:226px;border:5px solid var(--blue);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08;opacity:0}.podium-place-3{order:3;border-color:var(--blue);animation:podiumRevealThird .85s cubic-bezier(.18,.88,.22,1.1) .8s 1 both}.podium-place-2{order:1;border-color:var(--green);animation:podiumRevealSecond .9s cubic-bezier(.18,.88,.22,1.1) 3.05s 1 both}.podium-place-1{order:2;border-color:var(--yellow);animation:podiumRevealFirst 1.05s cubic-bezier(.16,.9,.2,1.15) 5.3s 1 both}.podium-name{position:relative;z-index:3;display:grid;grid-template-rows:18px 82px 28px 18px;place-items:center;min-width:0;padding:8px 10px 0;text-align:center}.podium-name span{font-size:10px;font-weight:800;letter-spacing:2px;color:#6a5312}.podium-avatar-head{display:block;width:82px;height:82px;object-fit:cover;object-position:50% 16%;border-radius:50%;background:#102036;filter:drop-shadow(0 3px 3px #0006)}.podium-name strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ECDisplay,Arial,sans-serif;font-size:clamp(17px,1.7vw,24px);font-weight:400;color:#111}.podium-name small{font-size:11px;font-weight:800;color:#6a5312}.podium-step{display:grid;place-items:end center;min-height:68px;padding-bottom:0;border-top:2px solid #d9caa8;background:linear-gradient(180deg,#fff8df,#ead7a7);border-radius:0 0 16px 16px}.podium-place-1 .podium-step{background:linear-gradient(180deg,#fff3a7,#e5bc34)}.podium-step b{font-family:ECDisplay,Arial,sans-serif;font-size:62px;line-height:.82;font-weight:400;color:#d99b00;text-shadow:0 3px 0 #704500}.ceremony-complete .podium-place,.ceremony-complete .podium-announcer .announce-champion,.ceremony-complete .ceremony-history{animation:none!important;opacity:1!important;transform:none!important}.ceremony-complete .podium-announcer span:not(.announce-champion){display:none!important}
.piatnik-results-field{position:relative;width:min(900px,68vw);border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08}.piatnik-results-field>.question-suits{top:0}.piatnik-results-field h2,.piatnik-results-field h3{color:#111}.piatnik-results-field .small{color:#514b40}.piatnik-results-field .notice{background:#f1e5c8;color:#332b1f}.piatnik-results-field .data-table{background:transparent;color:#111}.piatnik-results-field .data-table th{color:#5c470d}.piatnik-results-field .data-table th,.piatnik-results-field .data-table td{border-bottom-color:#d9caa8}
.ceremony-history{position:relative;z-index:9;width:min(900px,84vw);margin:-2px auto 0;padding:8px 14px 10px;border:1px solid #a77818aa;border-radius:14px;background:#04101dda;opacity:0;transform:translateY(18px);animation:ceremonyHistoryReveal .8s ease 7.65s 1 both}.ceremony-history h3{margin:0 0 6px;text-align:center;font-family:ECDisplay,Arial,sans-serif;font-size:18px;font-weight:400;color:var(--gold)}.ceremony-total-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}.ceremony-total-row{display:grid;grid-template-columns:24px minmax(0,1fr) 76px 62px;gap:7px;align-items:center;padding:3px 7px;border-radius:6px;background:#ffffff0b;font-size:11px}.ceremony-total-row>b{color:var(--gold)}.ceremony-total-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.ceremony-total-row>small{color:#ddcfab}.ceremony-total-row>strong{text-align:right;color:#ffd956}.ceremony-total-empty{text-align:center;grid-column:1/-1}.ceremony-actions{display:flex;justify-content:center;gap:10px;margin-top:7px}.ceremony-actions .simple-nav{position:static;height:36px;min-width:112px;font-size:12px}
.victory-lightshow,.fireworks,.confetti{position:fixed;inset:164px 0 74px;z-index:6;overflow:hidden;pointer-events:none}.victory-lightshow{opacity:0;animation:victoryLightsOn .7s ease 6.2s 1 forwards}.victory-lightshow span{position:absolute;top:-12%;width:22%;height:120%;background:linear-gradient(180deg,#fff9b855,transparent 62%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0;animation:victoryBeam 2.8s ease-in-out 6.2s infinite}.victory-lightshow span:nth-child(1){left:8%}.victory-lightshow span:nth-child(2){left:39%;animation-delay:6.55s}.victory-lightshow span:nth-child(3){right:8%;animation-delay:6.9s}.fireworks{opacity:0;animation:victoryLightsOn .2s linear 6.15s 1 forwards}.fireworks b{position:absolute;width:8px;height:8px;border-radius:50%;left:18%;top:24%;box-shadow:0 -62px #ffd42a,44px -44px #ff4b54,62px 0 #42a5ff,44px 44px #67e85c,0 62px #ffd42a,-44px 44px #ff4b54,-62px 0 #42a5ff,-44px -44px #67e85c;animation:fireworkBurst 2.4s ease-out 6.15s infinite}.fireworks b:nth-child(2){left:78%;top:31%;animation-delay:6.65s}.fireworks b:nth-child(3){left:52%;top:12%;animation-delay:7.2s}.confetti{opacity:0;animation:victoryLightsOn .2s linear 6.25s 1 forwards}.confetti i{position:absolute;left:var(--x);top:-8%;width:8px;height:14px;background:hsl(var(--h) 90% 58%);transform:rotate(var(--r));animation:confettiFall 4.8s linear calc(6.25s + var(--d)) infinite}
.personal-total-cards{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.personal-result-panel{width:min(900px,82vw)}
/* V7.57 feedback, checks, training units and reliable league controls */
.league-feedback{background:transparent!important;box-shadow:none!important;text-shadow:2px 4px 0 #382200,0 7px 13px #000d}
.league-feedback:after{display:none!important}
.feedback-light-0 .feedback-copy{animation:feedbackTextSweep 6.2s ease-in-out 1s infinite}
.feedback-light-1 .feedback-copy{animation:feedbackGlow 7.1s ease-in-out 1.4s infinite}
.feedback-light-2 .feedback-copy{animation:feedbackBreathe 5.8s ease-in-out 1.8s infinite}
.result-feedback.feedback-light-0 .feedback-copy{animation:resultFeedbackLight 8.4s ease-in-out 1.8s infinite}
.result-feedback.feedback-light-1 .feedback-copy{animation:resultFeedbackNudge 9.2s ease-in-out 2.1s infinite}
.result-feedback.feedback-light-2 .feedback-copy{animation:resultFeedbackGlow 8.8s ease-in-out 2.4s infinite}
.result-feedback .feedback-copy,.card-feedback .feedback-copy{animation:stableFeedbackLife 10.8s ease-in-out 1.8s infinite!important;transform-origin:center}
.teacher-inline-next-shell{display:flex;justify-content:center;width:100%;height:54px;margin:24px auto 0}.teacher-inline-next-shell.inline-next-enter{animation:inlineNextEnter .85s cubic-bezier(.18,.88,.22,1.12) 1 both}.teacher-inline-next{position:static!important;min-width:170px;height:46px;animation:inlineNextLife 10.8s ease-in-out 1.8s infinite;transform-origin:center}
.brush-check{width:42px;height:42px;filter:drop-shadow(2px 4px 3px #0009)}
.training-menu-layout{display:grid;grid-template-columns:270px 510px;gap:28px;align-items:start;justify-content:center;width:min(850px,86vw);margin-top:26px}
.training-mode-menu{width:270px;height:268px;margin:0;gap:12px;grid-template-rows:repeat(4,58px)}
.training-unit-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,58px);gap:12px;width:510px;height:268px;align-items:stretch}
.training-mode-menu .piatnik,.training-unit-grid .piatnik{height:58px;min-height:58px;max-height:58px;align-self:start}
.training-unit-grid .piatnik>span:last-child{font-size:19px;white-space:nowrap}
.training-unit-grid .piatnik[aria-current="true"]{filter:brightness(1.12);box-shadow:0 7px 0 #140f08,0 0 14px #ffd45b99}
.league-quit{left:446px;right:auto}
.card-management-nav{pointer-events:auto}
.card-management-nav .mini-card{pointer-events:none}
.quiz-feedback{margin-top:28px}
.avatar-panel{width:min(430px,66vw);border:0;background:transparent;box-shadow:none;text-align:center}.teacher-avatar-mark{display:grid;place-items:center;width:128px;height:128px;margin:0 auto 18px;border:6px solid var(--blue);border-radius:50%;background:#fffaf0;color:var(--blue);font-family:Georgia,serif;font-size:78px;line-height:1;box-shadow:0 10px 0 #140f08,0 0 24px #57aaff66}
.avatar-selection-screen{align-items:flex-start;padding-top:4px}
.student-avatar-groups{width:min(550px,48vw);margin:0 auto;padding:0 14px 92px;text-align:center}
.student-avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.student-avatar-choice{position:relative;overflow:hidden;aspect-ratio:1.146/1;width:100%;padding:0;border:2px solid #c89827;border-radius:5px;background:#06111c;box-shadow:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.student-avatar-choice img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
.student-avatar-choice span{position:absolute;left:3px;top:3px;display:grid;place-items:center;width:22px;height:24px;border-radius:4px;background:#a92e4b;color:#fff;font-family:"Montserrat ExtraBold",sans-serif;font-size:14px;box-shadow:0 1px 3px #000}
.student-avatar-choice.avatar-boy span{background:#1473ae}
.student-avatar-choice:hover{filter:brightness(1.08);transform:translateY(-2px)}
.student-avatar-choice.selected{z-index:1;border-color:#fff1a8;filter:brightness(1.12);transform:scale(1.035);box-shadow:0 0 0 3px #ffd34f}
.teacher-avatar-groups{width:min(550px,48vw);margin:0 auto;padding:0 14px 92px;text-align:center}
.teacher-avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.teacher-avatar-choice{position:relative;overflow:hidden;aspect-ratio:1.146/1;width:100%;padding:0;border:2px solid #c89827;border-radius:5px;background:linear-gradient(#101927,#06111c);box-shadow:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.teacher-avatar-choice img{display:block;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;transform:none}
.teacher-avatar-choice span{position:absolute;left:3px;top:3px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:4px;background:#a92e4b;color:#fff;font-family:"Montserrat ExtraBold",sans-serif;font-size:12px;box-shadow:0 1px 3px #000}
.teacher-avatar-choice.avatar-man span{background:#1473ae}
.teacher-avatar-choice:hover{filter:brightness(1.08);transform:translateY(-2px)}
.teacher-avatar-choice.selected{z-index:1;border-color:#fff1a8;filter:brightness(1.12);transform:scale(1.035);box-shadow:0 0 0 3px #ffd34f}
.avatar-save{position:fixed;left:218px;bottom:12px;z-index:34;min-width:112px}
.avatar-save:disabled{filter:grayscale(.8);opacity:.55}
body[data-route="/students/avatar"] #page-content,body[data-route="/teacher/avatar"] #page-content{bottom:96px}
body[data-route="/students/avatar"] .student-avatar-layer::before,body[data-route="/students/avatar"] .student-avatar-layer::after,body[data-route="/teacher/avatar"] .student-avatar-layer::before,body[data-route="/teacher/avatar"] .student-avatar-layer::after{display:none}
body[data-route="/students/avatar"] .student-avatar-layer img,body[data-route="/teacher/avatar"] .student-avatar-layer img{filter:none}
.student-avatar-layer{position:fixed;z-index:8;left:70px;top:210px;bottom:60px;width:280px;text-align:center;pointer-events:none}
.student-avatar-layer::before{content:"";position:absolute;z-index:0;left:20px;bottom:-4px;width:190px;height:28px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.78) 0%,rgba(0,0,0,.48) 42%,rgba(0,0,0,0) 76%);filter:blur(3px);transform:perspective(110px) rotateX(58deg)}
.student-avatar-layer::after{content:"";position:absolute;z-index:0;left:-42px;top:-2%;bottom:-2%;width:330px;background:radial-gradient(ellipse at 44% 52%,rgba(255,226,154,.25) 0%,rgba(255,211,119,.16) 31%,rgba(255,198,78,.08) 55%,rgba(255,188,60,0) 78%);filter:blur(8px)}
.student-avatar-sprite{position:relative;z-index:1;width:100%;height:100%}
.student-avatar-layer img{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 0 11px rgba(255,222,151,.30)) drop-shadow(0 0 25px rgba(255,195,76,.17)) drop-shadow(0 10px 9px rgba(0,0,0,.76))}
.training-selection-note,.training-selected-unit{margin:4px auto 10px;color:#ffe49c;font-weight:800;text-align:center}.training-selected-unit{margin-top:12px}.training-unit-grid .piatnik[aria-current="true"]{outline:4px solid #fff2a8;outline-offset:2px;transform:translateY(-2px);filter:brightness(1.22)}
.help-assistant{margin:16px 0 24px;padding:14px 18px;border:2px solid #4b9cff;border-radius:15px;background:#081b35}.help-assistant h3{margin:0 0 6px;color:#ffe49c}.help-assistant p{margin:0 0 10px}.help-assistant label{display:block;margin-bottom:5px;font-weight:700}.help-assistant form>div{display:grid;grid-template-columns:1fr auto;gap:8px}.help-assistant input{min-width:0;height:46px;padding:0 12px;border:2px solid #d9b94d;border-radius:10px;background:#fffbd0;color:#111;font-size:16px}.help-assistant button{min-width:100px;border:2px solid #ffe16a;border-radius:10px;background:linear-gradient(#48a8fa,#1266b5);color:#fff;font-weight:800;text-transform:uppercase}.help-assistant #help-answer{margin-top:10px}.help-content code{padding:2px 5px;border-radius:5px;background:#020a15;color:#ffe49c;overflow-wrap:anywhere}
.student-avatar-layer[data-kind="teacher"]{left:36px;top:170px;bottom:44px;width:340px}
.student-avatar-layer[data-kind="teacher"]::before{left:38px;width:232px}
.student-avatar-layer[data-kind="teacher"]::after{left:-54px;width:400px}
@media(max-width:900px){.student-avatar-groups,.teacher-avatar-groups{width:min(520px,62vw)}.student-avatar-grid,.teacher-avatar-grid{grid-template-columns:repeat(4,1fr);gap:5px}.student-avatar-layer{left:54px;top:190px;bottom:54px;width:220px}.student-avatar-layer[data-kind="teacher"]{left:28px;top:155px;bottom:42px;width:282px}}
@media(max-height:760px) and (hover:none) and (pointer:coarse){.student-avatar-layer{top:150px;bottom:50px;width:215px}.student-avatar-layer[data-kind="teacher"]{top:116px;bottom:40px;width:278px}.avatar-save{bottom:10px}}
.login-panel .credentials{background:transparent;padding-bottom:0}
@keyframes piatnikHalo{0%,100%{filter:brightness(1);box-shadow:0 7px 0 #140f08,0 10px 15px #0009}48%{filter:brightness(1.12);box-shadow:0 7px 0 #140f08,0 10px 15px #0009,0 0 17px #ffe596aa}}
@keyframes piatnikPulse{0%,100%{filter:brightness(1) saturate(1)}45%{filter:brightness(1.15) saturate(1.08)}68%{filter:brightness(1.04) saturate(1.03)}}
@keyframes feedbackSlide{0%{opacity:0;transform:translateX(-42px) rotate(-4deg) scale(.9)}62%{opacity:1;transform:translateX(5px) rotate(1deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes feedbackTwirl{0%{opacity:0;transform:scale(.35) rotate(-12deg)}66%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes feedbackDrop{0%{opacity:0;transform:translateY(-34px) scale(.88)}62%{opacity:1;transform:translateY(5px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes feedbackTextSweep{0%,68%,100%{filter:brightness(1);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}76%{filter:brightness(1.28);text-shadow:2px 4px 0 #382200,0 7px 13px #000d,0 0 12px #fff0a888}84%{filter:brightness(1.05);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}}
@keyframes resultFeedbackLight{0%,72%,88%,100%{filter:brightness(1);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}79%{filter:brightness(1.3);text-shadow:2px 4px 0 #382200,0 7px 13px #000d,0 0 15px #fff2a899}}
@keyframes resultFeedbackNudge{0%,74%,90%,100%{transform:translateX(0) rotate(0);filter:brightness(1)}79%{transform:translateX(-3px) rotate(-1deg);filter:brightness(1.08)}84%{transform:translateX(3px) rotate(1deg);filter:brightness(1.14)}}
@keyframes resultFeedbackGlow{0%,70%,90%,100%{filter:brightness(1) saturate(1);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}80%{filter:brightness(1.24) saturate(1.12);text-shadow:2px 4px 0 #382200,0 7px 13px #000d,0 0 17px #ffe58faa}}
@keyframes podiumAnnouncement{0%{opacity:0;transform:translateY(14px) scale(.8)}22%,68%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px) scale(1.05)}}
@keyframes championAnnouncement{0%{opacity:0;transform:scale(.25) rotate(-5deg)}70%{opacity:1;transform:scale(1.16) rotate(1deg)}100%{opacity:1;transform:scale(1)}}
@keyframes podiumRevealThird{0%{opacity:0;transform:translateX(90px) scale(.65)}100%{opacity:1;transform:none}}
@keyframes podiumRevealSecond{0%{opacity:0;transform:translateX(-110px) scale(.65)}100%{opacity:1;transform:none}}
@keyframes podiumRevealFirst{0%{opacity:0;transform:translateY(-85px) scale(.4)}72%{opacity:1;transform:translateY(7px) scale(1.08)}100%{opacity:1;transform:none}}

/* V8.196: the completed podium and season standings share the avatar foot line. */
.ceremony-results-row{position:relative;z-index:8;display:flex;align-items:flex-end;justify-content:center;gap:18px;width:min(1120px,88vw);height:245px;margin:72px auto 0}
.ceremony-results-row .formula-podium{width:min(750px,61vw);margin:0}
.ceremony-results-row .ceremony-history{flex:0 0 330px;width:330px;max-height:226px;margin:0;padding:16px 14px 12px;overflow:auto;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08}
.ceremony-results-row .ceremony-history h3{color:#5c470d}.ceremony-results-row .ceremony-total-row{background:#f1e5c8;color:#111}.ceremony-results-row .ceremony-total-row>small{color:#514b40}
@media(max-width:900px){.ceremony-results-row{gap:10px;width:92vw}.ceremony-results-row .formula-podium{width:64vw}.ceremony-results-row .ceremony-history{flex-basis:25vw;width:25vw;padding:10px 8px}.ceremony-total-grid{grid-template-columns:1fr}.ceremony-total-row{grid-template-columns:20px minmax(0,1fr) 52px}.ceremony-total-row small{display:none}}
@keyframes ceremonyHistoryReveal{to{opacity:1;transform:none}}
@keyframes victoryLightsOn{to{opacity:1}}
@keyframes victoryBeam{0%,100%{transform:rotate(-13deg);opacity:.22}50%{transform:rotate(13deg);opacity:.62}}
@keyframes fireworkBurst{0%{transform:scale(.05);opacity:0}18%{opacity:1}58%{transform:scale(1);opacity:1}100%{transform:scale(1.55);opacity:0}}
@keyframes confettiFall{0%{transform:translate3d(0,-10vh,0) rotate(var(--r));opacity:0}8%{opacity:1}100%{transform:translate3d(var(--dx),112vh,0) rotate(720deg);opacity:.9}}
body[data-route^="/teacher/class/"]:not([data-route*="/students"]):not([data-route$="/results"]):not([data-route$="/units"]):not([data-route*="/unit/"]) .screen>.panel:first-child{border:0;background:transparent;box-shadow:none}
body[data-route="/help"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/astronomy-walk-v8.17.webp')}
body[data-route="/help/assistant"] #background,body[data-route="/help/contact"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/astronomy-walk-v8.17.webp')}
body[data-route="/help/tutorial"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/astronomy-walk-v8.17.webp')}
body[data-route="/help"] #page-content,body[data-route="/help/assistant"] #page-content,body[data-route="/help/contact"] #page-content,body[data-route="/help/tutorial"] #page-content{overflow:hidden}
@media(min-width:651px){body[data-route="/help/tutorial"] #page-content{bottom:40px;overflow:visible}}
.help-menu-screen{position:relative;width:100%;height:100%;padding:0}
.help-menu-stack{position:static;width:min(330px,34vw);margin:26px auto 0;grid-auto-rows:58px;gap:12px;transform:none}
.help-menu-stack>.piatnik{height:58px}
.help-menu-stack>.piatnik>span:last-child{font-size:22px}
.help-tutorial-launch{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px auto 16px;padding:12px 16px;background:#f5e4bc;color:#17120d;border:2px solid #8a5928;border-radius:14px;box-shadow:inset 0 0 28px #7c4e1d1c,0 8px 20px #0007}
.help-tutorial-launch p{margin:0;color:#24160e;font-family:Montserrat,Arial,sans-serif;font-weight:700;text-align:left}
.tutorial-book-screen{width:min(1120px,96vw);height:100%;min-height:0;margin:0 auto;padding:0}
.tutorial-book-frame{display:block;width:100%;height:100%;border:0;background:transparent}
@media(max-width:650px){.help-tutorial-launch{align-items:stretch;flex-direction:column;gap:8px}.help-tutorial-launch p{text-align:center}.tutorial-book-screen{width:100vw;height:calc(100dvh - 155px);min-height:0}.help-menu-stack{width:min(330px,74vw);grid-auto-rows:58px;gap:12px}}
body[data-route="/help"] #page-content{scroll-behavior:smooth}.help-panel{width:min(1040px,88vw);max-height:none;margin-bottom:28px}.help-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 0 14px;border-bottom:1px solid #8a592877}.help-heading h2{margin:0;color:#5a301b}.help-language{display:flex;gap:8px}.help-language button{min-width:96px;padding:9px 14px;border:2px solid var(--gold);border-radius:999px;background:#10294a;color:#fff;font:700 16px Arial,sans-serif;cursor:pointer}.help-language button[aria-pressed="true"]{background:var(--gold);color:#171006}.help-content{font-size:17px;line-height:1.55}.help-content section{padding:10px 2px 18px;border-bottom:1px solid #a7781844;scroll-margin-top:90px}.help-content h3{margin:18px 0 8px}.help-content h4{margin:18px 0 4px;color:#ffe49c;font-size:19px}.help-content ol,.help-content ul{padding-left:25px}.help-content li{margin:7px 0}.help-content b,.help-content strong{color:#ffe49c}.help-lead{font-size:19px}.help-index{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.help-index a{padding:8px 11px;border:1px solid #4b9cff;border-radius:9px;background:#0a2850;color:#fff;text-decoration:none}.help-quick{margin:18px 0;padding:12px 18px!important;border:2px solid #dba51f!important;border-radius:15px;background:#071a32cc}.help-content dl{display:grid;grid-template-columns:minmax(170px,240px) 1fr;gap:8px 18px}.help-content dt{font-weight:700;color:#ffe49c}.help-content dd{margin:0 0 9px}
.help-single-screen{display:grid;place-items:center;width:100%;height:100%;padding:0}
.help-single-panel{box-sizing:border-box;width:min(980px,88vw);max-height:calc(100dvh - 190px);margin:0;padding:22px 26px;overflow:hidden;color:#24160e;font-family:Montserrat,Arial,sans-serif}
.help-single-panel p{color:#24160e}.help-single-panel label{color:#4b2918}.help-question-row{display:grid;grid-template-columns:1fr auto;gap:12px}.help-question-row input{min-width:0}
.help-result{max-height:210px;margin-top:14px;overflow:auto}.help-contact-page .support-contact-grid{gap:10px 16px}.help-contact-page textarea{min-height:84px;max-height:110px}.help-contact-page .support-consent{margin:10px 0}.help-contact-page .support-check-button{margin-top:4px}

/* V8.41 Help/Contact: preserve the avatar column and show the scene around the form. */
body[data-route="/help/assistant"] .help-single-screen,
body[data-route="/help/contact"] .help-single-screen{box-sizing:border-box;padding-left:220px}
body[data-route="/help/assistant"] .help-single-panel,
body[data-route="/help/contact"] .help-single-panel{width:min(740px,calc(100vw - 330px));margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:#fff}
body[data-route="/help/assistant"] .help-single-panel p,
body[data-route="/help/contact"] .help-single-panel p{color:#fff}
body[data-route="/help/assistant"] .help-heading,
body[data-route="/help/contact"] .help-heading{justify-content:center;border:0}
body[data-route="/help/assistant"] .help-heading h2,
body[data-route="/help/contact"] .help-heading h2{color:var(--gold);text-shadow:0 3px 5px #000}
.help-query-card{box-sizing:border-box;width:100%;min-height:150px;margin-top:20px;padding:36px 28px 22px;display:flex;flex-direction:column;gap:8px;align-items:stretch;justify-content:center;color:#111}
.help-query-card>label,.help-query-card.support-question-field{color:#111!important;font-weight:800;text-align:left}
.help-query-card .help-question-row{width:100%}
.help-query-card input,.help-query-card textarea{box-sizing:border-box;width:100%;border:2px solid #b69b54!important;border-radius:12px;background:#fffbc9!important;color:#111!important;font:700 18px Montserrat,Arial,sans-serif}
.help-assistant-screen{box-sizing:border-box;padding:0}
.help-assistant-shell{width:min(650px,56vw);margin-top:30px}
.help-assistant-question{padding:34px 30px 24px}
.help-assistant-question textarea{width:100%;min-height:88px;padding:0;border:0;outline:0;resize:none;overflow:auto;background:transparent;color:#111;font:400 clamp(16px,1.45vw,20px) Montserrat,Arial,sans-serif;text-align:center}
.help-assistant-question textarea::placeholder{color:#817761;opacity:.72}
.help-assistant-actions{display:flex;justify-content:center;gap:18px;width:100%;margin-top:16px}
.help-assistant-actions .simple-nav{position:static;width:170px;min-width:170px}
.help-assistant-answer{width:100%;margin-top:20px}
.help-assistant-answer .help-answer-card{box-sizing:border-box;width:100%;min-height:82px;margin:0;border-color:var(--blue);font-size:16px;font-weight:400;line-height:1.35;text-align:left}
.help-assistant-answer .help-answer-card .ans-suit{color:var(--blue)}
.help-answer-card .answer-copy{width:100%}
.help-answer-error{border-color:var(--red)}
.help-contact-screen{box-sizing:border-box;padding:0}
.help-contact-shell{margin-top:30px}
.help-contact-question{padding:34px 30px 24px}
.help-contact-question textarea{width:100%;min-height:88px;padding:0;border:0;outline:0;resize:none;overflow:auto;background:transparent;color:#111;font:400 clamp(16px,1.45vw,20px) Montserrat,Arial,sans-serif;text-align:center}
.help-contact-question textarea::placeholder{color:#817761;opacity:.72}
.contact-email-field{display:grid;gap:7px;width:100%;margin-top:14px;color:#ffe080!important;font-weight:800;text-shadow:0 2px 3px #000}
.contact-email-field input{width:100%;min-height:52px;padding:8px 16px;border:2px solid #b98642;border-radius:12px;background:#fffaf0;color:#111;font:700 18px Montserrat,Arial,sans-serif}
.contact-consent{display:flex;align-items:flex-start;gap:8px;width:100%;margin:10px 0 0;color:#fff!important;font-size:13px;line-height:1.3;text-shadow:0 2px 3px #000}
.contact-consent input{flex:0 0 auto;margin-top:2px}
.help-contact-actions{display:flex;justify-content:center;gap:18px;width:100%;margin-top:12px}
.help-contact-actions .simple-nav{position:static;width:170px;min-width:170px}
.help-contact-shell .help-result{width:100%;margin-top:14px}
.help-contact-page .support-contact-grid>label:not(.help-query-card){color:#ffe080;font-weight:800;text-shadow:0 2px 3px #000}
.help-contact-page .support-consent{color:#fff!important;text-shadow:0 2px 3px #000}
@media(max-width:700px){body[data-route="/help/assistant"] .help-single-screen,body[data-route="/help/contact"] .help-single-screen{padding-left:92px;padding-right:4px}body[data-route="/help/assistant"] .help-single-panel,body[data-route="/help/contact"] .help-single-panel{width:100%;max-height:calc(100dvh - 150px)}.help-query-card{min-height:120px;margin-top:12px;padding:30px 12px 12px}.help-query-card input,.help-query-card textarea{font-size:14px}.help-assistant-screen,.help-contact-screen{padding:0}.help-assistant-shell,.help-contact-shell{width:100%;margin-top:30px}.help-assistant-question,.help-contact-question{min-height:120px;padding:30px 12px 12px}.help-assistant-question textarea,.help-contact-question textarea{min-height:68px;font-size:16px;font-weight:400}.help-assistant-actions,.help-contact-actions{gap:8px;margin-top:10px}.help-assistant-actions .simple-nav,.help-contact-actions .simple-nav{width:calc((100% - 8px)/2);min-width:0}.help-assistant-answer{margin-top:12px}.help-answer-card{min-height:72px;font-size:14px;font-weight:400}.contact-email-field{margin-top:9px;font-size:12px}.contact-email-field input{min-height:44px;font-size:15px}.contact-consent{font-size:10px}.help-contact-shell .help-result{margin-top:8px}}

/* V8.167 Desk: narrow Piatnik fields for assigned questions. */
.desk-review-panel{width:min(650px,56vw);padding:0;border:0;background:transparent;box-shadow:none}
.desk-review-panel>h2{text-align:center;color:var(--gold);text-shadow:0 3px 5px #000}
.desk-piatnik-card{position:relative;padding:34px 24px 22px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08}
.desk-piatnik-card h3{color:#3b2415;font-size:18px;font-weight:400}
.desk-piatnik-card .help-review-meta span,.desk-piatnik-card .help-review-meta strong{border-color:#b69b54;color:#111}
.desk-piatnik-card label{color:#111}
.desk-piatnik-card textarea{border:2px solid #b69b54;background:#fffbc9;color:#111;font:400 16px Montserrat,Arial,sans-serif}
@media(max-width:700px){.desk-review-panel{width:calc(100vw - 110px)}.desk-piatnik-card{padding:30px 12px 16px;border-width:4px}}

/* V8.167 School Admin: regular Piatnik fields instead of thin wide frames. */
.school-ranking-panel{width:min(900px,76vw);padding:0;border:0;background:transparent;box-shadow:none}
.school-ranking-panel>h2{text-align:center;color:var(--gold);text-shadow:0 3px 5px #000}
.school-admin-piatnik-field{position:relative;width:100%;box-sizing:border-box;margin:30px auto 0;padding:34px 24px 22px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08}
.school-admin-piatnik-field h2,.school-admin-piatnik-field h3,.school-admin-piatnik-field label{color:#111;text-shadow:none}
.school-admin-piatnik-field .data-table{background:transparent;color:#111}
.school-admin-piatnik-field .data-table th,.school-admin-piatnik-field .data-table td{border-bottom-color:#d9caa8;color:#111}
.school-admin-piatnik-field .field input,.school-admin-piatnik-field .field select,.school-admin-piatnik-field .field textarea{border-color:#b69b54;background:#fffbc9;color:#111}
.school-ranking-field{margin-top:34px}
.school-teacher-form,.school-teacher-list{width:min(650px,56vw)}
.school-teacher-create-form{margin:0 auto}.school-teacher-create-field{width:100%;margin-top:30px}.school-teacher-create-actions{justify-content:center;margin-top:16px}.school-teacher-create-actions .simple-nav{position:static;margin:0}
.school-teacher-list{display:grid;gap:24px}
.has-unassigned-card{position:relative}
.school-unassigned-card{position:fixed;left:clamp(24px,calc(50vw + 150px),calc(100vw - 280px));top:clamp(170px,30vh,280px);transform:rotate(-8deg);z-index:6;box-sizing:border-box;width:250px;max-width:calc(100vw - 48px);max-height:calc(100vh - 300px);overflow:auto;padding:12px 14px;border:3px solid #e3aa17;border-radius:14px;background:#fff8db;color:#251900;box-shadow:3px 7px 20px rgba(0,0,0,.28);text-align:left;pointer-events:auto}
.school-unassigned-card strong{display:block;margin-bottom:5px;font:400 18px/1.1 ECDisplay,Arial,sans-serif}
.school-unassigned-card span{display:block;font:700 13px/1.4 Montserrat,Arial,sans-serif;overflow-wrap:anywhere}

.school-teacher-edit{margin-top:0}
.school-assignment-block-card{position:fixed;top:180px;right:24px;z-index:80;box-sizing:border-box;width:min(340px,calc(100vw - 32px));padding:15px 18px;border:4px solid #d79b00;border-radius:18px;background:#fff8db;color:#2b1a00;box-shadow:3px 7px 20px rgba(0,0,0,.28);text-align:left}.school-assignment-block-card strong{display:block;margin-bottom:6px;font:400 21px ECDisplay,Arial,sans-serif}.school-assignment-block-card span{display:block;font:700 14px/1.4 Montserrat,Arial,sans-serif}@media(max-width:700px){.school-assignment-block-card{top:145px;right:12px}}
.teacher-activation-explanation{margin:15px 0 4px;color:#4a2b12;font-weight:700;line-height:1.45;text-align:center}.school-teacher-create-field .teacher-activation-explanation{color:#4a2b12}.teacher-assignment-history{margin:12px 0;padding:10px 12px;border:1px solid #ad8731;border-radius:12px;color:#251900}.teacher-assignment-history ul{padding-left:18px;margin:6px 0}.teacher-assignment-history li{margin:7px 0;line-height:1.35}.teacher-assignment-history p{margin:6px 0 0}.school-class-list{width:min(750px,70vw);display:grid;gap:24px}.school-class-card{margin:0;text-align:left}.school-class-card h2{margin:0 0 16px}.school-class-card p{margin:9px 0}.school-class-teachers-form{margin-top:14px}.school-class-teachers-form fieldset{display:flex;flex-wrap:wrap;gap:8px 14px;border:1px solid #ad8731;border-radius:12px;padding:10px 12px}.school-class-teachers-form legend{font-weight:800;padding:0 6px}.school-class-teacher-choice{display:flex;align-items:center;gap:7px}.school-class-teacher-choice input{width:19px;height:19px;accent-color:#218c50}.school-class-teachers-form .actions{margin-top:12px}.school-class-teachers-form .simple-nav{position:static;height:42px}.school-class-message{margin-top:8px}@media(max-width:700px){.school-class-list{width:calc(100vw - 32px)}}
.admin-school-edit-screen{padding-top:8px}.admin-school-edit-form{width:min(760px,70vw);padding:30px 24px 18px}.admin-school-edit-form>.question-suits{top:0;transform:translate(-50%,-68%)}.admin-school-edit-form .form-grid{gap:8px 16px}.admin-school-edit-form .field input{min-height:38px;padding:6px 10px}.admin-school-edit-actions{display:flex;justify-content:center;gap:14px;margin-top:14px}.admin-school-edit-actions .simple-nav{position:static}@media(max-width:700px){.admin-school-edit-form{width:calc(100vw - 32px);padding:30px 14px 16px}.admin-school-edit-form .form-grid{grid-template-columns:1fr}.admin-school-edit-form .field{grid-column:1}}
.school-registration-screen{padding-top:8px;padding-bottom:12px}
.school-registration-form{width:min(650px,56vw);margin-top:10px;padding:27px 22px 11px;overflow:visible}
.school-registration-form>.question-suits{top:0;transform:translate(-50%,-68%);z-index:5}
.school-registration-status-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}.school-registration-status-card{width:min(700px,62vw);margin-top:12px;padding:44px 34px 30px;text-align:center}.school-registration-status-card>.question-suits{top:0}.school-registration-status-card h2{margin:0 0 18px;color:#111}.school-registration-status-card p{margin:0;font-size:clamp(20px,1.8vw,28px);line-height:1.35}.school-registration-status-card small{display:block;margin-top:14px;color:#695d48;font-size:14px}.school-registration-status-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.school-registration-status-content{width:100%}
.school-registration-form .form-grid{gap:5px 14px}.school-registration-form .field label{margin-bottom:1px}.school-registration-form .field input{min-height:34px;padding:5px 9px}.school-registration-form .notice{margin:6px 0 0;padding:7px 9px}.school-registration-form .actions{margin-top:6px}
.school-registration-check{display:block;margin-top:3px}.school-registration-check label{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:9px;margin:0;text-transform:uppercase}.school-registration-check input{width:22px!important;height:22px!important;min-height:22px!important;margin:1px 0 0;padding:0!important;accent-color:#748ca1}.school-registration-check span{display:block;min-width:0;line-height:1.25}.privacy-registration-consent{font-size:11px;line-height:1.25}.privacy-registration-consent a{display:block;width:max-content;max-width:100%;margin-top:3px;color:#075cab;font-weight:800;text-transform:none}.school-register-visible-message{width:min(650px,56vw);min-height:0;margin:5px auto 0}.school-register-visible-message .notice{margin:0;padding:7px 10px}.school-registration-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:7px auto 2px}.school-registration-pagination span{min-width:54px;color:#ffe080;font-size:16px;font-weight:800;text-align:center}.school-registration-pagination-actions{display:flex;align-items:center;justify-content:center;gap:12px}.school-registration-pagination .simple-nav{position:static;width:130px;height:42px}.school-registration-form .field input.registration-invalid{border-color:#e32935!important;box-shadow:0 0 0 3px #e3293555;background:#fff1f1}.privacy-policy-panel{max-height:calc(100dvh - 255px);overflow:auto;text-align:left}.privacy-policy-panel h2,.privacy-policy-panel h3{color:#ffe080}
.privacy-account-consent{display:grid;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid #b58b45}.privacy-account-consent label{display:flex;align-items:center;gap:12px}.privacy-account-consent input{width:28px;height:28px}.privacy-account-consent .simple-nav{position:static;justify-self:center}.area-privacy-link{display:block;width:max-content;margin:12px auto 0;color:#f4bd19;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.school-registration-success-screen{padding-top:18px;padding-bottom:12px}
.school-registration-success-shell{width:min(700px,60vw);margin-top:8px}
.school-registration-success-card{box-sizing:border-box;min-height:0;padding:42px 34px 24px;overflow:visible;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;text-align:left;font:500 15px/1.38 Montserrat,Arial,sans-serif}
.school-registration-success-card>.question-suits{top:0;transform:translate(-50%,-68%);z-index:5}
.school-registration-success-card h2{width:100%;margin:0 0 5px;color:#111;text-align:center;font:800 clamp(22px,1.8vw,29px)/1.1 ECDisplay,Montserrat,Arial,sans-serif}
.school-registration-success-copy{width:100%}
.school-registration-success-copy p{width:100%;margin:0 0 8px;color:#111;font:500 15px/1.38 Montserrat,Arial,sans-serif}
.school-registration-success-copy p:last-child{margin-bottom:0}
.school-registration-finish{position:static;margin-top:16px;min-width:150px;height:46px}
@media(max-width:700px){.school-ranking-panel,.school-registration-form{width:calc(100vw - 110px)}.school-admin-piatnik-field{padding:30px 12px 16px;border-width:4px}.school-registration-success-shell{width:calc(100vw - 110px)}.school-registration-success-card{padding:40px 18px 20px}.school-registration-success-card h2{font-size:21px}.school-registration-success-copy p{font-size:13px}}
@media(max-width:700px){
  .school-registration-status-screen{justify-content:flex-start;gap:12px;padding:20px 8px 90px;overflow-y:auto}
  .school-registration-status-card{width:min(420px,calc(100vw - 32px));margin-top:20px;padding:32px 14px 18px;border-width:4px}
  .school-registration-status-card>.question-suits{top:0;transform:translate(-50%,-62%)}
  .school-registration-status-content{box-sizing:border-box;max-height:34dvh;padding:0 4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .school-registration-status-card h2{margin:0 0 10px;font-size:18px;line-height:1.1}
  .school-registration-status-card p{font-size:14px;line-height:1.35}
  .school-registration-status-card small{margin-top:8px;font-size:11px;line-height:1.3}
  .school-registration-status-actions{gap:8px;width:min(420px,calc(100vw - 32px))}
  .school-registration-status-actions .simple-nav{position:static;width:auto;min-width:130px;height:40px;padding:0 12px;font-size:12px}
}
@media(max-height:520px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .school-registration-status-screen{justify-content:flex-start;gap:8px;padding:10px 8px 68px;overflow-y:auto}
  .school-registration-status-card{width:min(560px,66vw);margin-top:16px;padding:25px 14px 11px;border-width:4px}
  .school-registration-status-card>.question-suits{top:0;transform:translate(-50%,-62%)}
  .school-registration-status-content{max-height:82px;padding:0 4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .school-registration-status-card h2{margin:0 0 6px;font-size:16px;line-height:1.05}
  .school-registration-status-card p{font-size:13px;line-height:1.25}
  .school-registration-status-card small{margin-top:5px;font-size:10px;line-height:1.2}
  .school-registration-status-actions{gap:7px}
  .school-registration-status-actions .simple-nav{position:static;min-width:116px;height:36px;padding:0 9px;font-size:11px}
}

/* V8.253: protected Central Admin registration reset controls. */
.admin-home-screen{height:100%;min-height:0;align-items:flex-start;overflow:visible;padding:0}
.admin-home-panel{--admin-card-width:900px;--admin-action-width:76px;--admin-control-height:64px;--admin-row-gap:12px;--admin-row-width:988px;width:100%!important;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}





.admin-home-scroll{position:fixed;z-index:10;left:50%;top:238px;bottom:63px;box-sizing:border-box;width:var(--admin-row-width);min-height:0;margin:0;padding:0 0 12px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;transform:translateX(-50%)}.admin-home-scroll::-webkit-scrollbar{display:none}
.admin-registration-list{display:grid;gap:28px;margin-top:0}.admin-registration-entry{display:grid;grid-template-columns:var(--admin-card-width) var(--admin-action-width);align-items:stretch;justify-items:stretch;gap:var(--admin-row-gap);width:var(--admin-row-width);margin:0}
.admin-registration-card{box-sizing:border-box;width:var(--admin-card-width);height:100%;margin:0;padding:16px 30px 18px;border-color:#278fe0;border-width:5px;background:linear-gradient(180deg,#123b70 0%,#071d3c 100%)!important;box-shadow:0 8px 0 #031022;color:#f5f8ff}
.admin-registration-card.verified{border-color:#239b43}.admin-registration-card.plausible{border-color:#d5a719}.admin-registration-card h2{margin:0 0 7px;color:#ffd34d;text-align:center;font:800 24px Montserrat,Arial,sans-serif}.admin-registration-grid{display:grid}.admin-registration-row{display:grid;grid-template-columns:minmax(200px,.95fr) minmax(250px,1.3fr) minmax(180px,.85fr);align-items:center;gap:10px;min-height:31px;border-bottom:1px solid #7ca2ca;color:#f5f8ff}.admin-registration-row>strong{font-size:14px}.admin-registration-row>span{overflow-wrap:anywhere;font-size:14px}.admin-registration-row>b{display:flex;align-items:center;gap:7px;font-size:12px}.admin-registration-row>b i{display:inline-grid;width:23px;height:23px;place-items:center;border-radius:50%;color:#fff;font-style:normal}.admin-registration-row.verified>b{color:#6fe38a}.admin-registration-row.verified>b i{background:#148b36}.admin-registration-row.plausible>b{color:#ffd34d}.admin-registration-row.plausible>b i{background:#d5a719}.admin-registration-row.unverified>b{color:#ff7973}.admin-registration-row.unverified>b i{background:#c92831}.admin-registration-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#c9dbef;font-size:10px}.admin-registration-entry>.admin-school-actions .simple-nav:disabled{display:none!important}
.admin-school-table{width:100%;overflow:auto}
.tutorial-book-screen{align-items:flex-start;overflow:auto;padding:8px 0 105px}.tutorial-book-layer{width:min(1100px,92vw);max-height:calc(100dvh - 205px);margin:0 auto;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.tutorial-book-layer.hidden{display:none}.tutorial-book-anchor{padding:24px;color:#ffe080;font-weight:800}.tutorial-book-layer button,.admin-backup-box button{touch-action:manipulation}
.admin-backup-box{margin-top:16px;padding:18px;border:3px solid var(--gold);border-radius:18px;background:#030b19bf}.admin-backup-box h3{margin:0 0 6px}.admin-backup-box p{margin:0 0 12px}.admin-backup-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-backup-fields label{display:grid;gap:5px;font-weight:800}.admin-backup-fields input{min-width:0;height:42px;padding:6px 12px;border:2px solid #b79a42;border-radius:12px;background:#fffbc4;font:inherit}.admin-backup-box .actions{margin-top:14px}


.admin-school-table td small{display:inline-block;margin-top:5px;line-height:1.35}
.registration-email-states{display:grid;gap:5px;margin:8px 0}.registration-email-state{display:grid;grid-template-columns:16px minmax(110px,1fr) auto;align-items:center;gap:5px;padding:5px 7px;border:1px solid;border-radius:8px;background:#071326cc;font-size:11px;line-height:1.2}.registration-email-state strong,.registration-email-state b{font-size:11px}.registration-email-state small{grid-column:2/4;margin:0!important;font-size:9px;opacity:.85}.registration-email-state.confirmed{border-color:#42c765;color:#73e78e}.registration-email-state.open{border-color:#e64c4c;color:#ff8585}

body[data-route="/admin/schools"] #page-content{overflow:hidden}

.admin-dashboard-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:100%;padding:8px 18px 18px}.admin-dashboard-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.admin-dashboard-stats .stat-card{box-sizing:border-box;width:112px;min-width:112px;height:72px;padding:8px 6px;text-align:center;font-family:Montserrat,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.2}.admin-dashboard-stats .stat-card strong{display:block;font-size:25px;font-weight:700;line-height:1.2}.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,330px));gap:22px 28px;width:min(688px,80vw)}.admin-dashboard-grid .piatnik{height:70px;margin:0}.admin-dashboard-grid .piatnik>span:last-child{font-size:20px}.admin-hub-menu{width:min(420px,58vw)}.admin-status-panel{width:min(760px,76vw)}.admin-status-panel>.cards{justify-content:center}.admin-system-list{display:grid;gap:0;margin:10px 0 18px}.admin-system-list p{display:flex;justify-content:space-between;gap:24px;margin:0;padding:11px 8px;border-bottom:1px solid #ffffff40}.admin-system-list span{text-align:right}
.admin-session-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:20px}.admin-session-settings label{display:grid;grid-template-columns:1fr 82px auto;align-items:center;gap:8px;font-weight:700}.admin-session-settings input{min-width:0;padding:8px;border:2px solid var(--gold);border-radius:9px;background:#fffbc9;color:#111}.admin-session-settings .actions,.admin-session-settings #session-settings-message{grid-column:1/-1;margin-top:4px}.admin-question-move{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 10px}.admin-question-move label{display:flex;align-items:center;gap:8px;color:#ffe080;font-weight:700}.admin-question-move select{padding:8px;border:2px solid var(--gold);border-radius:9px;background:#fffbc9}.admin-question-move .simple-nav{position:static;width:120px;height:42px;font-size:12px}.communication-screen{padding-bottom:16px}.communication-panel{width:min(1120px,88vw);height:min(640px,68vh);min-height:410px;margin:24px auto 0;padding:28px 18px 16px;display:flex;flex-direction:column;overflow:hidden}.communication-panel>.question-suits{top:0;transform:translate(-50%,-65%);text-shadow:none}.message-tabs{display:flex;gap:10px;margin:0 0 12px}.message-tabs button{padding:8px 16px;border:2px solid #b7943c;border-radius:12px;background:#f2e8ce;color:#251900;font-weight:800}.message-tabs button.active{background:#124371;color:#fff;border-color:#124371}.communication-layout{display:grid;grid-template-columns:minmax(210px,31%) minmax(0,1fr);height:100%;min-height:0;gap:0;border:2px solid #beaa76;border-radius:15px;overflow:hidden;background:#fffdf5}.communication-sidebar{min-height:0;overflow:auto;border-right:2px solid #beaa76;background:#f5ead1}.communication-sidebar h2{margin:0;padding:12px 14px;font-size:19px;color:#2b1b04}.communication-contacts{display:grid;align-content:start}.communication-contacts button{position:relative;width:100%;padding:12px 14px;border:0;border-bottom:1px solid #d4c5a2;background:transparent;color:#261e10;text-align:left}.communication-contacts button.active,.communication-contacts button:hover{background:#dce9ef}.communication-contacts button strong,.communication-contacts button small,.message-preview{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.communication-contacts button small,.message-preview{margin-top:4px;color:#5b5348}.communication-main,.communication-thread{min-height:0;height:100%}.communication-thread{display:flex;flex-direction:column;color:#261e10}.communication-thread>p{padding:16px}.message-thread-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid #d6c8a7;background:#f5ead1}.message-thread-header h2{margin:0;color:#271800;font-size:20px}.message-thread-header small{display:block;color:#594d3b}.message-list-back{display:none;border:0;background:transparent;color:#152f46;font-size:25px}.communication-messages{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px;background:#f8f3e6}.communication-messages article{max-width:75%;padding:10px 13px;border-radius:15px;background:#e5e0cf;color:#1a1a1a;box-shadow:0 1px 3px #0002}.communication-messages article.sent{align-self:flex-end;background:#d2ead8}.communication-messages p{margin:0 0 5px;white-space:pre-wrap;overflow-wrap:anywhere}.communication-messages small{font-size:11px;color:#4a524c}.message-empty{margin:auto;color:#514937}.communication-thread form{display:flex;align-items:flex-end;gap:10px;padding:10px;border-top:2px solid #d6c8a7;background:#fffdf5}.communication-thread textarea{flex:1;min-width:0;min-height:48px;max-height:110px;padding:10px;border:2px solid #b69b54;border-radius:12px;background:#fffbc9;color:#111;resize:vertical}.communication-thread .actions{flex:0 0 auto;margin:0;gap:8px}.communication-thread .simple-nav{position:static;width:auto;min-width:92px;height:46px}.message-help-pane{flex:1;min-height:0;overflow:auto;padding:8px 12px}.message-help-pane h2{color:#2b1b04}.message-help-pane .help-review-list{display:grid;gap:20px}.message-help-pane .desk-piatnik-card{max-width:100%;margin:16px auto;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 8px 0 #140f08}.message-help-pane .empty-office-field{text-align:center;padding:20px}.message-help-pane .help-review-card h3{color:#211600}
@media(max-width:750px){.communication-panel{width:calc(100vw - 28px);height:calc(100dvh - 200px);min-height:320px;padding:26px 10px 10px}.communication-layout{display:block}.communication-sidebar,.communication-main{width:100%;height:100%}.communication-layout[data-message-view="list"] .communication-main,.communication-layout[data-message-view="thread"] .communication-sidebar{display:none}.communication-sidebar{border-right:0}.message-list-back{display:block}.communication-messages article{max-width:88%}.communication-thread form{flex-wrap:wrap}.communication-thread textarea{flex-basis:100%}.message-help-pane{padding:4px}.message-tabs button{flex:1;font-size:12px;padding:8px 4px}}
.teacher-class-assignments{display:flex;flex-wrap:wrap;gap:8px 12px;margin:12px 0;padding:10px 12px;border:1px solid #ad8731;border-radius:12px}.teacher-class-assignments legend{padding:0 6px;font-weight:800}.teacher-class-choice{display:flex;align-items:center;gap:6px}.teacher-class-choice input{width:18px;height:18px}
.admin-plausibility-alert{margin-top:12px;padding:10px 12px;border:2px solid #d5a719;border-radius:10px;background:#fff2bd;color:#5b4100;font-size:12px;line-height:1.4}.admin-plausibility-alert strong{display:block;margin-bottom:3px;color:#8a5e00}.admin-plausibility-alert ul{margin:5px 0 0;padding-left:20px}

/* V8.169 student Schoolbag uses only established Piatnik fields and buttons. */
.schoolbag-list-screen{align-items:flex-start;overflow:auto;padding-top:28px;padding-bottom:24px}
.schoolbag-list{display:grid;gap:22px;width:min(650px,56vw);margin:0 auto}
.schoolbag-answer-card{box-sizing:border-box;width:100%;min-height:110px;padding:34px 28px 22px;color:#111;text-align:left}
.schoolbag-answer-card h3{margin:0 0 14px;color:#111;font:400 17px Montserrat,Arial,sans-serif}
.schoolbag-answer-card p{margin:0;color:#111;font:400 16px/1.4 Montserrat,Arial,sans-serif}
.schoolbag-friend-list{max-height:62vh;overflow:auto;padding:8px 12px 12px}
.schoolbag-friend-selected{filter:brightness(1.08);box-shadow:0 10px 0 #140f08,0 0 18px #79e447aa}
@media(max-width:700px){.schoolbag-list{width:calc(100vw - 110px)}.schoolbag-answer-card{padding:30px 14px 18px}.schoolbag-friend-list{max-height:58vh}}
@media(max-width:650px){.help-single-panel{width:94vw;max-height:calc(100dvh - 150px);padding:12px 14px;font-size:13px}.help-heading{gap:8px;padding-bottom:8px}.help-heading h2{font-size:20px}.help-language button{min-width:70px;padding:6px 8px;font-size:13px}.help-question-row{grid-template-columns:1fr}.help-contact-page textarea{min-height:58px;max-height:68px}.help-contact-page .support-contact-grid{grid-template-columns:1fr 1fr}.help-contact-page .support-question-field{grid-column:1/-1}.help-contact-page .support-consent{font-size:11px;line-height:1.25}.help-result{max-height:110px;margin-top:8px}}
body[data-route="/about"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/castle-walk-v8.17.webp')}
@keyframes piatnikShine{0%,32%{left:-42%;opacity:0}38%{opacity:.7}52%{left:116%;opacity:.35}56%,100%{left:116%;opacity:0}}
@keyframes cloudDrift{to{transform:translateX(18%)}}
@keyframes celebrationBounce{0%,100%{transform:translateY(0) rotate(var(--celebration-tilt)) scale(1)}45%{transform:translateY(-11px) rotate(-4deg) scale(1.08)}70%{transform:translateY(2px) rotate(var(--celebration-tilt)) scale(.98)}}
@keyframes celebrationSwing{0%,100%{transform:rotate(calc(var(--celebration-tilt) - 5deg)) translateX(-3px)}50%{transform:rotate(calc(var(--celebration-tilt) + 6deg)) translateX(4px) scale(1.05)}}
@keyframes celebrationHop{0%,100%{transform:translate(0,0) rotate(var(--celebration-tilt))}30%{transform:translate(-9px,-8px) rotate(calc(var(--celebration-tilt) - 4deg))}65%{transform:translate(10px,-3px) rotate(calc(var(--celebration-tilt) + 4deg))}}
@keyframes celebrationTwist{0%,100%{transform:scale(1) rotate(var(--celebration-tilt))}40%{transform:scale(1.09,.94) rotate(calc(var(--celebration-tilt) + 7deg))}70%{transform:scale(.98,1.06) rotate(calc(var(--celebration-tilt) - 5deg))}}
@keyframes feedbackAppear{0%{opacity:0;transform:translateY(14px) scale(.78) rotate(-2deg)}55%{opacity:1;transform:translateY(-4px) scale(1.07) rotate(1deg)}78%{transform:translateY(1px) scale(.98) rotate(-.35deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes feedbackLight{0%,42%{left:-42%;opacity:0}49%{opacity:.72}66%{left:116%;opacity:.28}67%,100%{left:116%;opacity:0}}
@keyframes feedbackGlow{0%,100%{filter:brightness(1);text-shadow:1px 2px 0 #704500,0 5px 12px #000}50%{filter:brightness(1.2);text-shadow:1px 2px 0 #704500,0 5px 12px #000,0 0 13px #fff0a888}}
@keyframes feedbackBreathe{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.14) saturate(1.16)}}
@keyframes waitDot{0%,20%,100%{opacity:.2;transform:translateY(0)}42%{opacity:1;transform:translateY(-2px)}}

/* V7.61 student identity, personal ranking and direct class management */
.training-menu-layout>.training-mode-menu,.training-menu-layout>.training-unit-grid{align-self:start;margin:0!important}
.training-mode-menu,.training-unit-grid{row-gap:12px!important}
.training-mode-menu .piatnik,.training-unit-grid .piatnik{box-sizing:border-box;margin:0}
.student-avatar-mark{display:grid;place-items:center;width:128px;height:128px;margin:0 auto 18px;border:6px solid var(--red);border-radius:50%;background:#fffaf0;color:var(--red);font-family:Georgia,serif;font-size:76px;line-height:1;box-shadow:0 10px 0 #140f08,0 0 24px #ff596a66}
.personal-ranking-cards{grid-template-columns:repeat(5,minmax(105px,1fr));margin-bottom:18px}
.student-ranking-field{position:relative;width:min(590px,52vw);margin:42px auto 0;padding:32px 28px 24px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08;font:400 17px/1.3 Montserrat,Arial,sans-serif}
.student-ranking-field h2{margin:0 0 12px;text-align:center;color:#111;font:400 25px ECDisplay,Arial,sans-serif}
.student-ranking-lines{display:grid}.student-ranking-lines p{display:flex;justify-content:space-between;gap:24px;margin:0;padding:9px 4px;border-bottom:1px solid #d9caa8}.student-ranking-lines p:last-child{border-bottom:0}.student-ranking-lines strong{white-space:nowrap}.student-ranking-current{margin-top:5px!important;color:#175e29}.student-ranking-field>small{display:block;margin-top:12px;text-align:center;color:#4b463d}
.student-edit-input{box-sizing:border-box;width:100%;min-width:0;height:36px;padding:5px 8px;border:2px solid #d4b851;border-radius:8px;background:#fffbd0;color:#171717;font:inherit}
.student-edit-input:disabled{border-color:transparent;background:transparent;color:#fff;opacity:1;-webkit-text-fill-color:#fff}
.student-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.student-row-actions .student-row-action{position:static;height:38px;min-width:92px;padding:0 9px;border-radius:8px;font-size:13px;line-height:1.05}
.student-row-actions .student-remove{width:38px;min-width:38px;padding:0;font-size:20px}
.student-access-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;letter-spacing:.04em;color:#fff2a8;white-space:nowrap}
.student-code-dialog{width:min(380px,88vw);padding:24px;border:4px solid #f4b914;border-radius:20px;background:#071022;color:#fff;text-align:center}.student-code-dialog::backdrop{background:#000b}.student-code-dialog h2{margin:0 0 12px;color:#ffe080}.student-code-dialog img{display:block;width:280px;max-width:75vw;margin:0 auto 12px;border:8px solid #fff}.student-code-dialog strong{display:block;font:800 28px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#fff2a8}.student-code-dialog .simple-nav{position:static;margin:15px auto 0}#print-student-codes{position:static;width:auto;min-width:150px;margin:0 0 12px auto}
.class-management-actions{display:flex!important;flex-wrap:nowrap;gap:10px}.class-management-actions .simple-nav{position:static;width:auto;min-width:136px;height:46px;padding:0 14px;font-size:14px}.optional-label{font-size:.72em;font-weight:600;opacity:.78;text-transform:none}
.student-save{height:34px;padding:0 10px;border:2px solid #ffe16a;border-radius:8px;background:linear-gradient(#5ddd1c,#199100);color:#fff;font-weight:800;text-transform:uppercase;text-shadow:0 1px 2px #0008;cursor:pointer}
.student-admin-table th:nth-child(1),.student-admin-table td:nth-child(1),.student-admin-table th:nth-child(2),.student-admin-table td:nth-child(2),.student-admin-table th:nth-child(3),.student-admin-table td:nth-child(3){width:27%}
.student-admin-table th:last-child,.student-admin-table td:last-child{width:19%}
body[data-route="/teacher/manage"] #background{background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/alchemy-walk-v8.17.webp')}
body[data-route="/students/login/students"] .login-panel,body[data-route="/students/login/training"] .login-panel,body[data-route="/students/login/league"] .login-panel{background:transparent;border:0;box-shadow:none}

/* Stable brand shadow; only the title lettering receives occasional motion. */
#hud-logo{animation:none!important}
.splash-logo.splash-intro-pop{animation:splashIntroPop .95s cubic-bezier(.17,.84,.28,1.18) 1 both!important}
.splash-logo.splash-intro-swoop{animation:splashIntroSwoop 1.05s cubic-bezier(.2,.82,.25,1) 1 both!important}
.splash-logo.splash-intro-turn{animation:splashIntroTurn 1.05s cubic-bezier(.16,.83,.3,1.08) 1 both!important}
.splash-logo.splash-intro-rise{animation:splashIntroRise .95s cubic-bezier(.18,.82,.27,1.12) 1 both!important}
.splash-logo.splash-idle-nudge{animation:splashIdleNudge 1.65s ease-in-out 1!important}
.splash-logo.splash-idle-float{animation:splashIdleFloat 1.75s ease-in-out 1!important}
.splash-logo.splash-idle-tilt{animation:splashIdleTilt 1.6s ease-in-out 1!important}
@keyframes splashIntroPop{0%{opacity:0;transform:rotate(3deg) scale(.56)}68%{opacity:1;transform:rotate(1deg) scale(1.06)}100%{opacity:1;transform:rotate(3deg) scale(1)}}
@keyframes splashIntroSwoop{0%{opacity:0;transform:translate(-70px,-26px) rotate(-8deg) scale(.78)}72%{opacity:1;transform:translate(5px,2px) rotate(5deg) scale(1.02)}100%{transform:rotate(3deg)}}
@keyframes splashIntroTurn{0%{opacity:0;transform:rotate(-18deg) scale(.68)}72%{opacity:1;transform:rotate(6deg) scale(1.04)}100%{transform:rotate(3deg) scale(1)}}
@keyframes splashIntroRise{0%{opacity:0;transform:translateY(58px) rotate(3deg) scale(.78)}70%{opacity:1;transform:translateY(-5px) rotate(2deg) scale(1.03)}100%{transform:rotate(3deg)}}
@keyframes splashIdleNudge{0%,100%{transform:rotate(3deg)}38%{transform:translateX(4px) rotate(4deg)}62%{transform:translateX(-2px) rotate(2deg)}}
@keyframes splashIdleFloat{0%,100%{transform:translateY(0) rotate(3deg)}48%{transform:translateY(-5px) rotate(2.5deg)}}
@keyframes splashIdleTilt{0%,100%{transform:rotate(3deg)}45%{transform:rotate(4.5deg) scale(1.012)}70%{transform:rotate(2.2deg)}}
.title-stack.title-motion-nudge:before{animation:titleNudge 1.5s ease-in-out 1}
.title-stack.title-motion-quiver:before{animation:titleQuiver 1.25s ease-in-out 1}
.title-stack.title-motion-glow:before{animation:titleGlow 1.8s ease-in-out 1}
.title-stack.title-motion-lift:before{animation:titleLift 1.55s ease-in-out 1}
@keyframes titleNudge{0%,100%{transform:none}38%{transform:translateX(2px) rotate(.25deg)}55%{transform:translateX(-1px) rotate(-.18deg)}72%{transform:translateX(1px)}}
@keyframes titleQuiver{0%,32%,100%{transform:none}38%{transform:translate(-1px,1px)}44%{transform:translate(1px,-1px)}50%{transform:translate(-1px,0)}56%{transform:translate(1px,1px)}62%{transform:none}}
@keyframes titleGlow{0%,100%{color:var(--gold);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}48%{color:#ffc933;text-shadow:2px 4px 0 #382200,0 7px 13px #000d,0 0 12px #ffe9a788}}
@keyframes titleLift{0%,100%{transform:none}44%{transform:translateY(-2px) scale(1.012)}68%{transform:translateY(1px) scale(.998)}}
@media(prefers-reduced-motion:reduce){.title-stack:before{animation:none!important}}
@keyframes cardAppear{0%{opacity:0;transform:translateY(12px) scale(.72) rotate(-8deg)}65%{opacity:1;transform:translateY(-3px) scale(1.08) rotate(3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes cardWave{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes studentHeldCardWave{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes stableFeedbackLife{0%,24%,40%,68%,88%,100%{transform:translateX(0) rotate(0);filter:brightness(1) saturate(1);text-shadow:2px 4px 0 #382200,0 7px 13px #000d}29%{transform:translateX(-3px) rotate(-1deg)}34%{transform:translateX(3px) rotate(1deg)}77%{filter:brightness(1.3) saturate(1.12);text-shadow:2px 4px 0 #382200,0 7px 13px #000d,0 0 16px #fff0a899}}
@keyframes inlineNextEnter{0%{opacity:0;transform:translateY(18px) scale(.72)}70%{opacity:1;transform:translateY(-3px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes inlineNextLife{0%,24%,40%,68%,88%,100%{transform:translateX(0) rotate(0);filter:brightness(1);box-shadow:0 5px 10px #0008}29%{transform:translateX(-3px) rotate(-1deg)}34%{transform:translateX(3px) rotate(1deg)}77%{filter:brightness(1.16);box-shadow:0 6px 14px #0008,0 0 12px #dfff8d88}}
@keyframes brandLightWarm{0%,100%{filter:brightness(1)}45%{filter:brightness(1.13) drop-shadow(0 0 7px #ffd36a66)}}
@keyframes brandLightSheen{0%,100%{filter:brightness(1) contrast(1)}35%{filter:brightness(1.06) contrast(1.04)}58%{filter:brightness(1.16) contrast(1.02) drop-shadow(4px 0 8px #fff4a455)}}
@keyframes brandLightBreathe{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.1) saturate(1.08) drop-shadow(0 1px 9px #ffc92855)}}
.brand-light-warm{animation:brandLightWarm 2.2s ease-in-out 1}.brand-light-sheen{animation:brandLightSheen 2.2s ease-in-out 1}.brand-light-breathe{animation:brandLightBreathe 2.2s ease-in-out 1}
@keyframes controlLightGlint{0%,100%{filter:brightness(1)}42%{filter:brightness(1.18)}58%{filter:brightness(1.06)}}
@keyframes controlLightHalo{0%,100%{filter:brightness(1);box-shadow:0 4px 0 #090b10}50%{filter:brightness(1.09);box-shadow:0 4px 0 #090b10,0 0 12px #fff7aa70}}

/* V7.65: transparent content surfaces and independent, position-stable logo light. */
.panel,.credentials,.notice,.data-table{background-color:transparent!important;background-image:none!important}
#hud-logo.brand-light-warm{animation:hudLogoLightWarm 2.2s ease-in-out 1!important}
#hud-logo.brand-light-sheen{animation:hudLogoLightSheen 2.2s ease-in-out 1!important}
#hud-logo.brand-light-breathe{animation:hudLogoLightBreathe 2.2s ease-in-out 1!important}
.splash-logo-shell.brand-light-warm{animation:brandLightWarm 2.2s ease-in-out 1!important}
.splash-logo-shell.brand-light-sheen{animation:brandLightSheen 2.2s ease-in-out 1!important}
.splash-logo-shell.brand-light-breathe{animation:brandLightBreathe 2.2s ease-in-out 1!important}
@keyframes hudLogoLightWarm{0%,100%{filter:brightness(1) drop-shadow(0 7px 6px #000c)}45%{filter:brightness(1.13) drop-shadow(0 7px 6px #000c) drop-shadow(0 0 7px #ffd36a66)}}
@keyframes hudLogoLightSheen{0%,100%{filter:brightness(1) contrast(1) drop-shadow(0 7px 6px #000c)}35%{filter:brightness(1.06) contrast(1.04) drop-shadow(0 7px 6px #000c)}58%{filter:brightness(1.16) contrast(1.02) drop-shadow(0 7px 6px #000c) drop-shadow(4px 0 8px #fff4a455)}}
@keyframes hudLogoLightBreathe{0%,100%{filter:brightness(1) saturate(1) drop-shadow(0 7px 6px #000c)}50%{filter:brightness(1.1) saturate(1.08) drop-shadow(0 7px 6px #000c) drop-shadow(0 1px 9px #ffc92855)}}
@keyframes controlLightPulse{0%,100%{filter:brightness(1) saturate(1)}45%{filter:brightness(1.13) saturate(1.1)}65%{filter:brightness(1.04) saturate(1.04)}}
.control-light-glint{animation:controlLightGlint 1.55s ease-in-out 1}.control-light-halo{animation:controlLightHalo 1.55s ease-in-out 1}.control-light-pulse{animation:controlLightPulse 1.55s ease-in-out 1}
@media(prefers-reduced-motion:reduce){.brand-light-warm,.brand-light-sheen,.brand-light-breathe,.control-light-glint,.control-light-halo,.control-light-pulse{animation:none!important}}
@media(max-width:1000px){.hud-left{left:8px;top:8px;gap:4px}.game-meta-box{min-width:54px;height:49px;padding:4px 6px}.game-meta-box strong{max-width:88px;font-size:18px;line-height:24px}.brand-title-row{width:70vw}.hud-right{right:12px}.timer-box{min-width:70px}.brand-title-row{left:46%}#hud-logo{width:276px}.menu-stack{width:54vw;max-width:330px}.piatnik{grid-template-columns:52px 1fr 52px}.piatnik>span:last-child{font-size:21px}.panel{width:86vw}.panel.login-panel{width:min(470px,82vw)}.units-grid{grid-template-columns:repeat(2,1fr)}.lobby-student-grid{gap:9px}#bottom-links{display:none}}
@media(max-width:1300px){.game-layout,.game-layout:not(.has-ranking){grid-template-columns:minmax(0,740px)}}
@media(max-width:900px){.simple-nav{min-width:120px;padding:0 10px}.home{right:8px}.quit{right:380px}#lobby-quit{right:142px}.training-quit{right:350px}.pause{right:246px}.back{right:246px;width:90px;min-width:90px}.next{right:142px;width:90px;min-width:90px}#screen-button{left:8px;width:90px;min-width:90px}#mute-button{left:112px;width:90px;min-width:90px}#help-language-button{left:216px}.avatar-save{left:216px;min-width:108px}.student-card-notice{left:246px}.ranking-nav{left:244px;min-width:108px}.card-management-nav{left:362px}}
@media(max-width:700px){.admin-home-panel{width:94vw}.admin-backup-fields{grid-template-columns:1fr}.admin-backup-box{padding:12px}.admin-backup-box p{font-size:13px;line-height:1.35}.admin-backup-box input{width:100%;min-height:46px;font-size:16px}.admin-backup-box .actions{display:grid;grid-template-columns:1fr;gap:10px}.admin-backup-box .simple-nav{width:100%;min-height:46px}.tutorial-book-screen{padding-top:0}.tutorial-book-layer{width:100vw;max-height:calc(100dvh - 170px);padding:0 4px;scrollbar-gutter:auto}}
@media(min-width:701px) and (max-width:1100px){.admin-backup-box{width:100%}.tutorial-book-layer{width:min(1000px,96vw)}}
@media(max-height:620px) and (orientation:landscape) and (hover:none) and (pointer:coarse){.tutorial-book-screen{padding-bottom:78px}.tutorial-book-layer{max-height:calc(100dvh - 132px)}.admin-home-screen{padding-bottom:84px}.admin-backup-box{padding:10px 14px}.admin-backup-box .actions{margin-top:8px}}
@media(max-height:760px) and (hover:none) and (pointer:coarse){#hud{height:132px}.brand-title-row{top:10px;height:122px}#hud-logo{height:122px;width:246px}#page-title-image{max-width:430px;height:62px}#page-content{top:132px;bottom:66px}.area-splash #page-content{top:0;bottom:0}.menu-stack{margin-top:12px;gap:9px}.piatnik{height:50px;border-width:4px}.piatnik>span:last-child{font-size:21px}.piatnik .suit{width:30px;height:30px;left:16px}.panel{margin-top:8px;padding:16px 22px}.simple-nav{height:46px}#screen-button,#mute-button,#help-language-button{bottom:10px}.home{bottom:10px}.back,.next,.pause{bottom:10px}.lobby-start{bottom:56px!important}#bottom-links{bottom:15px}}
.hall-of-champs-panel{width:min(760px,64vw);max-height:calc(100vh - 220px);overflow:auto;margin:8px auto 0;padding:8px 14px 22px}.hall-of-champs-panel>h2{margin:0 0 18px;text-align:center;white-space:nowrap;color:var(--gold);font:400 30px/1 ECDisplay,Arial,sans-serif;text-shadow:0 3px 5px #000}.hall-season-field{position:relative;margin:32px 0 20px;padding:32px 24px 20px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 10px 0 #140f08}.hall-season-field>h3{margin:0 0 12px;text-align:center;font:400 21px ECDisplay,Arial,sans-serif}.hall-school-results{margin-top:12px}.hall-school-results h4{margin:8px 0 4px;padding-bottom:4px;border-bottom:2px solid #d9caa8;font:700 15px Montserrat,Arial,sans-serif}.hall-result-row{display:grid;grid-template-columns:30px 42px 1fr;gap:8px;align-items:center;min-height:47px;padding:5px 2px;border-bottom:1px solid #e5dac0;font:400 14px/1.25 Montserrat,Arial,sans-serif}.hall-result-row:last-child{border-bottom:0}.hall-result-row>.hall-row-suit{grid-column:1;width:25px;color:currentColor}.hall-result-row>img{grid-column:2;width:38px;height:42px;object-fit:contain}.hall-result-row>div{grid-column:3;display:grid}.hall-result-row:not(:has(img))>div{grid-column:2/4}.hall-result-row b,.hall-result-row strong,.hall-result-row small{font:inherit}.hall-result-row b{font-weight:700}.hall-result-row strong{font-weight:700}.hall-result-row small{font-size:12px}.hall-result-row.heart{color:var(--red)}.hall-result-row.spade{color:var(--green)}.hall-result-row.diamond{color:#b77d00}.hall-result-row.club{color:var(--blue)}.hall-result-row div,.hall-result-row small{color:#111}.empty-hall-field{text-align:center;font-size:15px}@media(max-width:760px){.hall-of-champs-panel{width:calc(100vw - 110px);padding-inline:4px}.hall-season-field{padding:28px 10px 14px}.hall-result-row{font-size:12px}}

/* V8.180: Office uses the same compact Piatnik answer fields as Desk. */
.school-office-panel{width:min(650px,56vw)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.school-office-panel .help-review-list{gap:24px}.school-office-panel .desk-piatnik-card{border:5px solid var(--gold)!important;border-radius:22px!important;background:#fffaf0!important;box-shadow:0 10px 0 #140f08!important}.empty-office-field{text-align:center;font-size:15px}
@media(max-height:760px) and (hover:none) and (pointer:coarse){
  #page-content{padding:4px 18px 18px;scroll-padding-bottom:76px}
  .form-grid{gap:9px 14px}.field{gap:4px}.field label{font-size:13px}.field input,.field select,.field textarea{min-height:43px;padding:7px 13px;font-size:18px}
  .actions{gap:10px;margin-top:10px}.credentials,.notice{margin-top:9px;padding:8px 12px}.notice.small{font-size:12px;line-height:1.25}
  .question-shell{width:min(740px,62vw)}.progress-line{margin-bottom:6px;font-size:15px}.question-card{padding:18px 32px;min-height:82px;font-size:25px;border-width:4px}
  .answer-grid{gap:10px 14px;margin-top:12px}.answer{min-height:68px;border-width:4px;padding:10px 18px;font-size:18px}.ans-suit{font-size:28px;margin-right:14px}
  .cards{gap:10px}.stat-card{padding:10px}.stat-card strong{font-size:28px}.panel h2{font-size:28px;margin-bottom:10px}
  .area-game #page-content,.area-training #page-content{bottom:70px}
}
@media(max-width:700px){.help-panel{width:91vw;padding:14px 16px}.help-heading{align-items:flex-start;flex-direction:column}.help-language{width:100%}.help-language button{flex:1}.help-content{font-size:15px}.help-content dl{grid-template-columns:1fr}.help-content dd{margin-bottom:15px}.help-index a{flex:1 1 42%;text-align:center}.help-quick{padding:9px 12px!important}}

/* V8.173: softer shadows for the existing bottom/control buttons only. */
.simple-nav{box-shadow:0 5px 10px #0008}
.simple-nav.control-light-halo{box-shadow:0 6px 14px #0008,0 0 12px #fff7aa70}
@keyframes controlLightHalo{0%,100%{filter:brightness(1);box-shadow:0 5px 10px #0008}50%{filter:brightness(1.09);box-shadow:0 6px 14px #0008,0 0 12px #fff7aa70}}

/* V8.17: the castle exterior persists through entry, login, menus and lobbies. */
body[data-scene="outside"] #background{background-image:linear-gradient(#05091452,#05091452),url('/assets/backgrounds/castle-walk-v8.17.webp')!important}
body[data-scene="activity"] #background{background-image:linear-gradient(#05091470,#05091470),var(--activity-background),url('/assets/backgrounds/castle-walk-v8.17.webp')!important}

/* V8.36: readable long-form bilingual manual. */
.help-content section{margin:18px 0 28px;padding:18px 22px;border:1px solid #d9ad3266;border-radius:12px;background:#071933d9}
.help-content section h3{margin-top:0;scroll-margin-top:150px}
.help-content table{width:100%;margin:12px 0 18px;border-collapse:collapse;font-size:.94em}
.help-content th,.help-content td{padding:9px 11px;border:1px solid #d9ad3266;text-align:left;vertical-align:top}
.help-content th{background:#122b4e;color:#ffe39a}
.help-content ol,.help-content ul{padding-left:24px}.help-content li{margin:7px 0}
.help-index{position:sticky;top:0;z-index:2;padding:10px;background:#06162eef;backdrop-filter:blur(8px)}
@media(max-width:700px){.help-content section{padding:14px 13px}.help-content table{display:block;overflow-x:auto}.help-index{position:static}}

/* Central Admin review queue for unanswered Help questions. */
.stat-card.help-open{border-color:#ffbc16;box-shadow:0 0 18px #ffbc1644}
.help-review-panel{width:min(1180px,88vw)}
.help-review-list{display:grid;gap:18px;margin-top:18px}
.help-review-card{padding:18px;border:2px solid #2b89da;border-radius:14px;background:#071933df}
.help-review-card h3{margin:12px 0;color:#fff3be;font-family:Montserrat,sans-serif;font-size:20px}
.help-review-meta{display:flex;flex-wrap:wrap;gap:8px}
.help-review-meta span,.help-review-meta strong{padding:4px 8px;border:1px solid #d9ad3266;border-radius:8px;font-size:12px}
.help-review-card textarea{min-height:86px}
@media(max-width:700px){.help-review-panel{width:91vw}.help-review-card{padding:13px}.help-review-card .actions{align-items:stretch;flex-direction:column}.help-review-card .simple-nav{width:100%}}

/* V8.191: compact Piatnik Open Questions field for Desk and Office. */
.help-review-panel.desk-review-panel{width:min(560px,48vw)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.help-review-panel.desk-review-panel .desk-piatnik-card{padding:34px 22px 20px!important;border:5px solid var(--gold)!important;border-radius:22px!important;background:#fffaf0!important;color:#111!important;box-shadow:0 10px 0 #140f08!important}
.help-review-panel.desk-review-panel .help-review-list{gap:20px}
@media(max-width:700px){.help-review-panel.desk-review-panel{width:calc(100vw - 110px)!important}.help-review-panel.desk-review-panel .desk-piatnik-card{padding:30px 12px 16px!important}}

/* V8.38: book-style tutorial and matching Help Assistant. */
body[data-route="/help"] .help-panel.help-book-panel{width:min(1420px,94vw);padding:16px 20px 24px}
body[data-route="/help"] .help-book-panel,
body[data-route="/help"] .help-book-panel button,
body[data-route="/help"] .help-book-panel input{font-family:Montserrat,Arial,sans-serif;font-weight:700}
body[data-route="/help"] .help-heading{position:static;padding:2px 4px 12px;background:transparent;border-bottom:0}
body[data-route="/help"] .help-paper-surface{background:#f5e4bc!important;color:#17120d;border-color:#8a5928;box-shadow:inset 0 0 28px #7c4e1d1c,0 8px 20px #0007}
body[data-route="/help"] .help-paper-surface h3,
body[data-route="/help"] .help-paper-surface label,
body[data-route="/help"] .help-paper-surface b{color:#542f18}
body[data-route="/help"] .help-paper-surface p{color:#17120d}
body[data-route="/help"] .help-assistant input{background:#fffaf0;color:#111;border-color:#8a5928;font-weight:700}
body[data-route="/help"] .help-assistant #help-answer .notice{background:#fff8e8!important;color:#111;border-color:#8a5928;text-align:left;line-height:1.45}
body[data-route="/help"] .help-assistant #help-answer .notice.success{border-color:#22844c}
.help-book-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.help-chapter-root{max-height:620px;padding:14px 10px;overflow-y:auto;border:2px solid #8a5928;border-radius:14px;background:#ead2a2!important;box-shadow:inset 0 0 24px #74451d20,0 7px 18px #0007;color:#17120d}
.help-chapter-root h3{margin:0 7px 10px;color:#542f18;font-family:Montserrat,Arial,sans-serif;font-size:19px;font-weight:800}
.help-chapter-root button{display:block;width:100%;margin:3px 0;padding:8px 9px;border:0;border-left:4px solid transparent;border-radius:7px;background:transparent;color:#21170f;text-align:left;font-size:13px;line-height:1.25;cursor:pointer}
.help-chapter-root button:hover,.help-chapter-root button:focus-visible{background:#fff5dd;outline:2px solid #895528;outline-offset:-2px}
.help-chapter-root button[aria-current="page"]{border-left-color:#8d3d22;background:#fff5dd;color:#542f18}
.help-book-wrap{min-width:0}
.help-book{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:500px;max-height:620px;overflow:hidden;border:3px solid #70431f;border-radius:12px;background:#f7e9c7;box-shadow:0 14px 28px #000a}
.help-book:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,#5b341a22,#fff7df55 42%,#6d401f33 52%,#fff7df44);box-shadow:0 0 13px #4a2a1744;pointer-events:none}
.help-book-page{min-width:0;padding:34px 38px;overflow-y:auto;background:radial-gradient(circle at 20% 10%,#fff9e7 0,#f5e4bc 64%,#e9cc94 100%);color:#111;font-family:Montserrat,Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.55}
.help-book-page:first-child{border-right:1px solid #9c7548}
.help-book-page h3,.help-book-page h4,.help-book-page dt{color:#542f18;font-family:Montserrat,Arial,sans-serif;font-weight:800}
.help-book-page h3{margin:8px 0 22px;font-size:clamp(24px,2.2vw,34px);line-height:1.12}
.help-book-page h4{margin:20px 0 6px;font-size:17px}
.help-book-page p,.help-book-page li,.help-book-page dd,.help-book-page td{color:#111}
.help-book-page b,.help-book-page strong{color:#542f18}
.help-book-page ul,.help-book-page ol{padding-left:23px}.help-book-page li{margin:7px 0}
.help-book-page dl{margin:0}.help-book-page dt{margin-top:12px}.help-book-page dd{margin:3px 0 10px}
.help-book-page code{padding:1px 4px;border-radius:4px;background:#e4c992;color:#3d2414;overflow-wrap:anywhere}
.help-book-page table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:13px}
.help-book-page th,.help-book-page td{padding:7px;border:1px solid #8a683e;text-align:left;vertical-align:top}.help-book-page th{background:#d9ba7d;color:#3d2414}
.help-book-kicker{color:#76502d;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.help-book-answer{font-size:clamp(18px,1.6vw,23px);line-height:1.55}
.help-book-mobile{display:none}
.help-book-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:14px;color:#fff;font-weight:800}
.help-book-controls .simple-nav{position:static;min-width:128px;height:45px}
.help-book-controls .simple-nav:disabled{opacity:.38;cursor:not-allowed}
@media(max-width:1050px){
  .help-book-layout{grid-template-columns:1fr}
  .help-chapter-root{display:flex;align-items:center;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:9px 10px}
  .help-chapter-root h3{position:sticky;left:0;z-index:1;flex:0 0 auto;margin:0;padding:8px 10px;background:#ead2a2}
  .help-chapter-root button{flex:0 0 180px;margin:0;border-left:0;border-bottom:4px solid transparent;white-space:normal}
  .help-chapter-root button[aria-current="page"]{border-left-color:transparent;border-bottom-color:#8d3d22}
  .help-book{min-height:450px;max-height:570px}
}
@media(max-width:700px){
  body[data-route="/help"] .help-panel.help-book-panel{width:94vw;padding:10px 10px 18px}
  body[data-route="/help"] .help-heading{align-items:stretch;gap:9px}.help-language button{min-width:0}
  body[data-route="/help"] .help-assistant{padding:12px;margin:10px 0 14px}
  body[data-route="/help"] .help-assistant form>div{grid-template-columns:1fr}
  body[data-route="/help"] .help-assistant button{min-height:44px}
  .help-chapter-root button{flex-basis:150px;font-size:12px}
  .help-book{display:block;min-height:390px;max-height:55vh}
  .help-book:after,.help-book-summary,.help-book-detail{display:none}
  .help-book-mobile{display:block;height:100%;min-height:390px;padding:25px 22px;border:0!important}
  .help-book-page h3{font-size:25px}.help-book-page{font-size:14px}
  .help-book-controls{gap:10px}.help-book-controls .simple-nav{min-width:100px;padding:0 8px;font-size:13px}
}

/* V8.39: bilingual About page in the approved book style. */
body[data-route="/about"] #page-content{overflow:hidden}
.about-screen{justify-content:center}
.about-book-panel{width:min(1040px,90vw);margin:4px auto 0;padding:0;border:0;background:transparent!important;box-shadow:none;color:#111;font-family:Montserrat,Arial,sans-serif;font-weight:700}
.about-language{display:flex;justify-content:flex-end;gap:8px;margin:0 4px 10px}
.about-language button{min-width:96px;min-height:42px;padding:7px 14px;border:2px solid var(--gold);border-radius:999px;background:#10294a;color:#fff;font-weight:700;cursor:pointer}
.about-language button[aria-pressed="true"]{background:var(--gold);color:#171006}
.about-book{position:relative;display:grid;grid-template-columns:1fr 1fr;height:clamp(300px,calc(100dvh - 290px),440px);overflow:hidden;border:3px solid #70431f;border-radius:12px;background:#f7e9c7;box-shadow:0 14px 28px #000a}
.about-book:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,#5b341a22,#fff7df66 43%,#6d401f3d 53%,#fff7df44);box-shadow:0 0 13px #4a2a1744;pointer-events:none}
.about-book-page{display:flex;min-width:0;align-items:center;justify-content:center;flex-direction:column;padding:clamp(20px,3vw,42px);overflow:hidden;background:radial-gradient(circle at 20% 10%,#fff9e7 0,#f5e4bc 64%,#e9cc94 100%);color:#111;text-align:center}
.about-book-page:first-child{border-right:1px solid #9c7548}
.about-book-page h2{margin:0 0 18px;color:#542f18;font-family:Montserrat,Arial,sans-serif;font-size:clamp(25px,2.6vw,38px);font-weight:800;line-height:1.12}
.about-book-page p{max-width:590px;margin:0;color:#111;font-size:clamp(14px,1.35vw,18px);font-weight:700;line-height:1.45}
.about-book-kicker{margin-bottom:12px;color:#76502d;font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.about-book-lead{font-size:clamp(16px,1.6vw,21px)!important}
.about-book-rule{width:74px;height:4px;margin:18px auto;background:#9e6b2e;transform:rotate(-1deg)}
.about-book-credit strong{display:block;margin-top:8px;color:#542f18;font-size:clamp(19px,2vw,27px);font-weight:800}
.about-book-signature{margin:18px 0!important;color:#542f18!important;font-family:Georgia,serif!important;font-size:clamp(18px,1.8vw,25px)!important;font-style:italic;font-weight:400!important}
.about-book-copyright{max-width:520px!important;padding-top:13px;border-top:1px solid #9c7548;color:#3f2a18!important;font-size:clamp(11px,1.05vw,14px)!important}
.about-book-mobile{display:none}
.about-screen{padding:0}.about-piatnik-shell{width:min(640px,54vw);margin-top:4px}.about-piatnik-card{min-height:300px;padding:34px 42px 28px}.about-essential{width:100%;text-align:center}.about-essential small{display:block;margin-bottom:9px;color:#76502d;font-size:13px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}.about-essential h2{margin:0 0 15px;color:#542f18;font-family:Montserrat,Arial,sans-serif;font-size:clamp(26px,2.5vw,38px);font-weight:800;line-height:1.1}.about-essential p{margin:0 auto;color:#17120d;font-size:clamp(15px,1.4vw,20px);line-height:1.35}.about-essential .about-credit{margin-top:20px;font-size:clamp(13px,1.15vw,17px)}.about-essential .about-credit strong{display:block;margin-top:3px;color:#542f18;font-size:clamp(20px,1.8vw,28px)}.about-essential .about-version{margin-top:15px;color:#542f18;font-size:clamp(11px,.95vw,14px);font-weight:800}.about-essential .about-copyright{margin-top:7px;padding-top:10px;border-top:1px solid #9c7548;font-size:clamp(11px,.95vw,14px)}
@media(max-width:700px){.about-piatnik-shell{width:calc(100% - 8px);margin-top:4px}.about-piatnik-card{min-height:230px;padding:30px 14px 20px}.about-essential h2{font-size:23px}.about-essential p{font-size:13px}}
@media(max-width:700px){
  .about-book-panel{width:94vw;margin-top:0}
  .about-language{margin-bottom:6px}.about-language button{flex:1;min-height:40px}
  .about-book{display:block;height:calc(100dvh - 245px);min-height:350px;max-height:510px}
  .about-book:after,.about-book-intro,.about-book-credits{display:none}
  .about-book-mobile{display:flex;height:100%;padding:18px 17px}
  .about-book-page h2{margin-bottom:10px;font-size:23px}.about-book-kicker{margin-bottom:7px}
  .about-book-page p{font-size:13px;line-height:1.35}.about-book-lead{font-size:14px!important}
  .about-book-rule{margin:10px auto}.about-book-signature{margin:8px 0!important;font-size:17px!important}
  .about-book-credit strong{margin-top:4px;font-size:19px}.about-book-copyright{padding-top:8px;font-size:11px!important}
}
@media(max-height:520px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .about-screen{justify-content:flex-start}.about-book-panel{width:min(900px,84vw)}
  .about-language{position:absolute;right:8px;top:2px;z-index:2;margin:0}.about-language button{min-width:78px;min-height:34px;padding:4px 9px;font-size:12px}
  .about-book{display:grid;grid-template-columns:1fr 1fr;height:calc(100dvh - 150px);min-height:205px;max-height:300px}
  .about-book:after{display:block}.about-book-intro,.about-book-credits{display:flex}.about-book-mobile{display:none}
  .about-book-page{padding:12px 26px}.about-book-page h2{margin-bottom:7px;font-size:21px}.about-book-kicker{margin-bottom:4px;font-size:11px}
  .about-book-page p{font-size:11px;line-height:1.25}.about-book-lead{font-size:12px!important}.about-book-rule{width:52px;height:3px;margin:7px auto}
  .about-book-credit strong{font-size:17px}.about-book-signature{margin:7px 0!important;font-size:16px!important}.about-book-copyright{padding-top:6px;font-size:11px!important}
}

/* Personal support form and Central Admin inbox. */
.support-contact{margin:0 0 18px;padding:14px 18px;border:2px solid #8a5928;border-radius:15px;background:#f5e4bc!important;color:#17120d;box-shadow:inset 0 0 28px #7c4e1d1c,0 8px 20px #0007;font-family:Montserrat,Arial,sans-serif;font-weight:700}
.support-contact summary{min-height:34px;color:#542f18;font-size:20px;font-weight:800;cursor:pointer}
.support-contact p,.support-contact label{color:#17120d}
.support-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.support-contact-grid label{display:grid;gap:5px}
.support-contact-grid input,.support-contact-grid select,.support-contact-grid textarea{width:100%;min-width:0;padding:10px 12px;border:2px solid #8a5928;border-radius:10px;background:#fffaf0;color:#111;font-weight:700}
.support-contact-grid textarea{min-height:90px;resize:vertical}.support-question-field{grid-column:1/-1}
.support-consent{display:flex;align-items:flex-start;gap:9px;margin:12px 0;font-size:13px;line-height:1.35}.support-consent input{flex:0 0 auto;width:19px;height:19px;margin-top:1px}
.support-check-button,.support-forward-button,.support-answer-actions button{min-height:44px;padding:8px 16px;border:2px solid #76502d;border-radius:10px;background:linear-gradient(#48a8fa,#1266b5);color:#fff;font-weight:800;cursor:pointer}
.support-answer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.support-answer-actions button:first-child{background:linear-gradient(#5ddd1c,#199100)}.support-answer-actions button:last-child{background:linear-gradient(#ffad21,#dc7210)}
.support-contact #support-contact-result .notice{background:#fff8e8!important;color:#111;border-color:#8a5928;text-align:left;line-height:1.45}
.support-contact #support-contact-result .notice.success{border-color:#22844c}
.support-inbox-panel{width:min(1120px,90vw)}.support-inbox-list{display:grid;gap:16px;margin-top:18px}
.support-inbox-card{padding:17px;border:2px solid #d4a632;border-radius:14px;background:#071933df}.support-inbox-card h3{margin:14px 0;color:#fff3be;font-family:Montserrat,Arial,sans-serif;font-size:19px;font-weight:800}.support-email-link{color:#9dceff;font-weight:800;overflow-wrap:anywhere}
.support-question-button{display:block;width:100%;margin:12px 0 4px;padding:10px 12px;border:2px solid transparent;border-radius:10px;background:transparent;color:#fff3be;text-align:left;font-family:Montserrat,Arial,sans-serif;font-size:21px;font-weight:800;cursor:pointer}.support-question-button:hover,.support-question-button:focus-visible{border-color:#d4a632;background:#0d2a50;outline:0}.support-question-button:after{content:"  ›";color:var(--gold)}
.support-answer-editor{margin-top:14px;padding:16px;border:2px solid #4b9cff;border-radius:13px;background:#061225}.support-answer-editor textarea{min-height:88px}.support-suggestion-status .notice{margin-top:0}.support-card-actions.hidden{display:none!important}
@media(max-width:700px){.support-contact{padding:12px}.support-contact-grid{grid-template-columns:1fr}.support-question-field{grid-column:auto}.support-answer-actions{align-items:stretch;flex-direction:column}.support-inbox-panel{width:94vw}.support-inbox-card{padding:12px}.support-inbox-card .actions{align-items:stretch;flex-direction:column}.support-inbox-card .simple-nav{width:100%}}

/* V8.166: winner journeys reuse only the established Piatnik and League fields. */
.journey-panel{width:min(980px,82vw)}
.journey-award{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;width:100%;min-height:92px;margin:12px 0;padding:10px 14px;text-align:left}
.journey-award>span:nth-child(2){display:grid;gap:5px}.journey-award b{font-size:20px}.journey-award small{font-family:Montserrat,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400}
.journey-award .simple-nav{position:static;min-width:130px}
.journey-sight{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding-top:48px;font-weight:400}
.journey-sight>strong{font-size:26px}.journey-sight>small{max-width:80%;font-size:16px;font-weight:400;line-height:1.35}
.journey-sight-image{width:min(360px,70%);max-height:190px;border:3px solid #d4a632;border-radius:12px;object-fit:cover;box-shadow:0 6px 15px #0006}
@media(max-width:700px){.journey-panel{width:94vw}.journey-award{grid-template-columns:36px 1fr}.journey-award .simple-nav{grid-column:1/-1;width:100%}.journey-sight>strong{font-size:21px}.journey-sight>small{font-size:14px}}

/* V8.197: compact Piatnik presentation for final and personal results. */
.personal-result-field{width:min(590px,52vw)}
.personal-result-field>.question-suits{top:0}
.personal-result-field .actions{margin-top:18px}
.personal-result-field .simple-nav{position:static}

/* V8.202: compact Piatnik result field for the five-question Anyone demo. */
.quiz-result-field{width:min(500px,46vw);margin-top:72px;padding:30px 28px 24px}
.quiz-result-field>.question-suits{top:0}
.quiz-result-field .actions{margin-top:18px}
.quiz-result-field .simple-nav{position:static}
@media(max-width:700px){.quiz-result-field{width:min(500px,88vw)}}

/* The podium is stepped upward, while all three Piatnik fields share one bottom edge. */
.ceremony-results-row{height:300px;margin-top:17px}
.ceremony-results-row .formula-podium{height:300px;align-items:flex-end}
.ceremony-results-row .podium-place-3{height:230px}
.ceremony-results-row .podium-place-2{height:260px}
.ceremony-results-row .podium-place-1{height:290px}

/* V8.211: compact, bottom-aligned final podium and standings. */
.ceremony-screen{justify-content:flex-end}
.ceremony-results-row{width:min(900px,76vw);height:200px;margin:0 auto;gap:12px;transform:translateX(78px)}
.ceremony-results-row .formula-podium{width:min(630px,53vw);height:200px;gap:10px}
.ceremony-results-row .podium-place{grid-template-rows:1fr 50px;width:31%}
.ceremony-results-row .podium-place-3{height:150px}
.ceremony-results-row .podium-place-2{height:175px}
.ceremony-results-row .podium-place-1{height:200px}
.ceremony-results-row .podium-name{grid-template-rows:14px 52px 22px 14px;padding:5px 7px 0}
.ceremony-results-row .podium-avatar-head{width:52px;height:52px}
.ceremony-results-row .podium-step{min-height:50px}
.ceremony-results-row .podium-step b{font-size:48px}
.ceremony-results-row .ceremony-history{flex:0 0 240px;width:240px;max-height:200px;padding:10px 9px 8px;overflow:auto}
.ceremony-results-row .ceremony-history h3{font-size:15px}
.ceremony-results-row .ceremony-total-grid{grid-template-columns:1fr}
.ceremony-results-row .ceremony-total-row{grid-template-columns:18px minmax(0,1fr) 54px;font-size:9px}
.ceremony-results-row .ceremony-total-row>small{display:none}
.ceremony-results-row .ceremony-actions{flex-direction:column;align-items:stretch;gap:5px}
.ceremony-results-row .ceremony-actions .simple-nav{width:100%;min-width:0;height:31px}

/* V8.209: rounded lobby underline and an active waiting indicator. */
.lobby-code:after{clip-path:none;border-radius:999px 45% 55% 999px / 70% 45% 55% 70%}
.player-wait-word{display:inline-block;transform-origin:center bottom;animation:playerWaitMotion 5.6s ease-in-out infinite}
.player-wait-dots{display:inline-flex;width:.78em;justify-content:flex-start}
.player-wait-dots i{font-style:normal;opacity:.18;animation:waitDot 1.35s ease-in-out infinite}
.player-wait-dots i:nth-child(2){animation-delay:.18s}
.player-wait-dots i:nth-child(3){animation-delay:.36s}
/* Keep the filter list stable throughout the Wait animation: WebKit can crash
   when the animated node is removed while interpolating none/brightness. */
@keyframes playerWaitMotion{0%,62%,100%{transform:translateY(0) rotate(0);filter:brightness(1)}68%{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.1)}74%{transform:translateY(0) rotate(1deg);filter:brightness(1)}80%{transform:translateY(-1px) rotate(0);filter:brightness(1)}}
.break-message{animation:breakOccasional 5.8s ease-in-out infinite}
@keyframes breakOccasional{0%,58%,100%{transform:translateY(0) rotate(0) scale(1)}64%{transform:translateY(-5px) rotate(-2deg) scale(1.04)}70%{transform:translateY(0) rotate(2deg) scale(1.02)}76%{transform:translateY(-2px) rotate(0) scale(1.03)}82%{transform:translateY(0) rotate(0) scale(1)}}

/* V8.214: compact grade rows, focused ranking navigation and fully visible suits. */
.class-choice-grid{width:min(900px,72vw);margin:8px auto 0;display:grid;gap:10px;max-height:calc(100dvh - 235px);overflow:auto;padding:4px 10px 14px}
.class-choice-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px}
.class-choice-row h3{margin:0;color:#ffd13c;text-align:right;font:800 20px Montserrat,sans-serif;text-shadow:0 2px 4px #000}
.class-choice-row>div{display:grid;grid-template-columns:repeat(4,minmax(150px,190px));gap:10px;justify-content:start}
.class-choice-row .piatnik{width:100%;min-width:0;height:54px;margin:0;grid-template-columns:40px 1fr 12px;padding:4px 8px;border-width:4px}
.class-choice-row .piatnik .suit{position:static;align-self:center;justify-self:center;width:27px;height:27px;transform:none}
.class-choice-row .piatnik>span:last-child{font-size:18px;white-space:nowrap}
.ranking-menu{width:min(330px,calc(100vw - 32px))}
.league-participation-screen{gap:16px;padding:14px 16px 42px;box-sizing:border-box}
.league-participation-screen .ranking-menu{margin-top:0}
.league-level-menu{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:20px}
.league-level-menu h2{margin:10px 0 0;color:#ffcf37;text-align:center;font:400 clamp(20px,2.3vw,27px) ECDisplay,Arial,sans-serif;text-shadow:0 3px 5px #000}
.league-level-menu .ranking-menu{width:min(330px,calc(100vw - 32px))}
.league-participation-card,.league-consent-notice{box-sizing:border-box;width:min(760px,90vw);padding:15px 20px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#281c0c;box-shadow:0 8px 0 #140f08}
.league-participation-card h2{margin:0 0 10px;font:400 24px ECDisplay,Arial,sans-serif;text-align:center}
.league-participation-row,.league-next-season{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:38px;padding:5px 2px;border-top:1px solid #d5c69e;font:700 13px Montserrat,Arial,sans-serif}
.league-participation-row span,.league-next-season span{color:#634514}
.league-participation-row .simple-nav,.league-next-season .simple-nav{position:static;width:auto;min-width:132px;height:34px;padding:3px 10px;font-size:11px}
.league-next-season{margin-top:5px;border-top:2px solid #c3a353}
.league-participation-card small{display:block;margin-top:8px;font-weight:700}
.league-consent-notice{width:min(640px,90vw);text-align:center}.league-consent-notice strong,.league-consent-notice span{display:block}.league-consent-notice strong{margin-bottom:7px;font:400 22px ECDisplay,Arial,sans-serif}
@media(max-width:700px){.league-participation-row,.league-next-season{grid-template-columns:minmax(0,1fr) auto}.league-participation-row .simple-nav,.league-next-season .simple-nav{grid-column:1/-1;justify-self:center}.league-participation-card{padding:13px}}
.ranking-view{width:min(760px,64vw);margin:0 auto;max-height:calc(100dvh - 220px);overflow:auto;padding:26px 10px 16px}
.ranking-display-field{width:100%;margin:0;padding:34px 20px 18px}
.ranking-display-field>h2{margin:0 0 14px;text-align:center;color:#6a510d}
.team-ranking-table th,.team-ranking-table td{font-size:13px;padding:8px 7px}
.league-choice-grid .class-choice-row,.school-choice-grid .class-choice-row{grid-template-columns:1fr}
.league-choice-grid .class-choice-row>div,.school-choice-grid .class-choice-row>div{justify-content:center}
@media(max-width:1000px){.class-choice-grid{width:78vw}.class-choice-row{grid-template-columns:90px 1fr}.class-choice-row>div{grid-template-columns:repeat(3,minmax(135px,1fr))}.class-choice-row h3{font-size:16px}.ranking-view{width:72vw}}

/* V8.215: heading-free class grid and compact class-assignment controls. */
.class-choice-grid{grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:center;gap:10px 12px}
.class-choice-grid>.piatnik{width:100%;min-width:0;height:54px;margin:0;grid-template-columns:40px 1fr 12px;padding:4px 8px;border-width:4px}
.class-choice-grid>.piatnik .suit{left:13px;top:50%;width:27px;height:27px;transform:translateY(-50%)}
.class-choice-grid>.piatnik>span:last-child{font-size:18px;white-space:nowrap}
.league-choice-grid,.school-choice-grid{display:block}
.league-choice-grid .class-choice-row>div,.school-choice-grid .class-choice-row>div{grid-template-columns:repeat(4,minmax(150px,190px))}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{width:min(1120px,84vw)}
.class-management-actions{width:100%;justify-content:flex-start}
.class-management-actions .simple-nav{width:128px;min-width:128px;padding:0 8px;font-size:12px}
.class-management-actions #student-export{margin-left:auto}
body[data-route^="/teacher/class/"][data-route*="/students"] #student-form .actions{justify-content:flex-end}
.class-assignment-editor{display:flex;align-items:end;justify-content:flex-end;gap:10px;margin-top:12px}
.class-assignment-editor label{display:grid;gap:4px;color:#f8d66d;font-weight:800}.class-assignment-editor select{min-width:240px;height:42px;padding:0 10px;border:2px solid var(--gold);border-radius:10px;background:#fff8ce;color:#111}
.class-assignment-editor .simple-nav{position:static;width:128px;min-width:128px;height:42px;font-size:12px}
.assignment-panel{position:relative;width:min(800px,68vw);margin-top:24px;padding-top:32px}.assignment-list{display:grid;gap:10px}.assignment-card{display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:12px;padding:12px;border:2px solid var(--gold);border-radius:12px;background:#fffaf0;color:#17120d}.assignment-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}.assignment-actions .simple-nav{position:static;width:128px;height:42px}.school-assignment-panel{width:min(980px,78vw);max-height:calc(100dvh - 230px);overflow:auto}
@media(max-width:1000px){.class-choice-grid{grid-template-columns:repeat(auto-fit,minmax(135px,190px))}.class-management-actions{flex-wrap:wrap}.class-management-actions #student-export{margin-left:0}.assignment-panel{width:78vw}}

/* V8.301: screen-aware class-action widths and typography. */
body[data-route^="/teacher/class/"][data-route*="/students"] #page-content{overflow:visible}
body[data-route^="/teacher/class/"][data-route*="/students"] .screen{position:relative;height:100%;min-height:0}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{position:fixed;box-sizing:border-box;left:50%;top:164px;bottom:63px;width:min(860px,66vw);height:auto;min-height:0;margin:0;overflow:hidden;transform:translateX(-50%)}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form{display:grid;grid-template-columns:266px minmax(0,1fr);align-items:end;gap:0 14px}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid{display:grid!important;grid-column:1;grid-row:1;grid-template-columns:58px 132px 58px;align-items:end;gap:9px}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid .field{min-width:0}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid .field>label{display:block;width:100%;text-align:center}
body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid input{box-sizing:border-box;width:100%;text-align:center}
.class-management-actions{grid-column:2;grid-row:1;display:grid!important;grid-template-columns:.95fr 1.08fr .95fr 1.18fr .95fr .95fr 1.18fr;align-items:end;width:100%;gap:7px;margin:0}
.class-management-actions .simple-nav,.class-management-actions #print-student-codes{box-sizing:border-box;width:100%;min-width:0;height:58px;margin:0;padding:0 5px;overflow:visible;font-size:var(--class-action-font-size,13px);line-height:1.05;white-space:normal;overflow-wrap:normal;word-break:normal}
.class-management-actions #student-export{margin-left:0}
body[data-route^="/teacher/class/"][data-route*="/students"] .class-assignment-editor{grid-column:1/-1;grid-row:3}
body[data-route^="/teacher/class/"][data-route*="/students"] #class-msg,body[data-route^="/teacher/class/"][data-route*="/students"] #student-msg{position:absolute;width:0;height:0;margin:0;padding:0;overflow:hidden}
body[data-route^="/teacher/class/"][data-route*="/students"] .class-hint-overlay{position:fixed;z-index:60;display:none;box-sizing:border-box;width:235px;min-height:86px;padding:18px 16px;border:4px solid #39ad18;border-radius:15px;background:linear-gradient(#fff6bd,#e6c75f);color:#21160a;transform:rotate(10deg);transform-origin:center;box-shadow:3px 7px 20px rgba(0,0,0,.28);text-align:center;font-weight:700;pointer-events:none}
body[data-route^="/teacher/class/"][data-route*="/students"] .class-hint-overlay.visible{display:block}
body[data-route^="/teacher/class/"][data-route*="/students"] .class-hint-overlay .notice{margin:0;padding:0;border:0;background:transparent;color:inherit}
.piatnik-hint-overlay{position:fixed;z-index:60;display:none;box-sizing:border-box;width:235px;min-height:86px;padding:18px 16px;border:4px solid #39ad18;border-radius:15px;background:linear-gradient(#fff6bd,#e6c75f);color:#21160a;transform:rotate(10deg);transform-origin:center;box-shadow:3px 7px 20px rgba(0,0,0,.28);text-align:center;font-weight:700;pointer-events:none}
.piatnik-hint-overlay.visible{display:block}
.piatnik-hint-overlay .notice{margin:0;padding:0;border:0;background:transparent;color:inherit}
body[data-route="/teacher/avatar"] .piatnik-hint-overlay,body[data-route="/students/avatar"] .piatnik-hint-overlay,body[data-route="/quiz/avatar"] .piatnik-hint-overlay{display:none!important}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table-header{order:3;flex:none;width:100%;margin-top:2px;background:transparent!important}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-table-scroll{order:4;flex:1;min-height:0;margin-top:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table{table-layout:fixed}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-table-scroll .student-admin-table{width:100%;margin-top:0}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table thead{position:static;background:transparent}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th{padding-top:5px;padding-bottom:8px}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td{padding-top:7px;padding-bottom:7px}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-row-actions{justify-content:flex-start;width:100%}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-row-actions .student-row-action:not(.student-remove){flex:1 1 0;min-width:0;font-size:var(--class-action-font-size,13px)}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:nth-child(1),body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:nth-child(1){box-sizing:border-box;width:9ch;max-width:9ch}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:first-child,body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:first-child{padding-left:0}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:nth-child(2),body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:nth-child(2){width:24%}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:nth-child(3),body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:nth-child(3){width:25%}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:last-child,body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:last-child{width:auto}
body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table th:last-child,body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table td:last-child{padding-right:0}
@media(max-width:1100px){body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{width:min(860px,88vw)}body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form{grid-template-columns:1fr}body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid{grid-column:1;grid-row:1}.class-management-actions{grid-column:1;grid-row:2;margin-top:16px}body[data-route^="/teacher/class/"][data-route*="/students"] .class-assignment-editor{grid-row:4}}
@media(max-width:700px){body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form>.form-grid{grid-template-columns:1fr}.class-management-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1400px){body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{--class-action-font-size:12px}}
@media(max-height:760px) and (hover:none) and (pointer:coarse){body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{top:132px;bottom:61px}.class-management-actions .simple-nav,.class-management-actions #print-student-codes{height:43px}}
.school-verification{margin-top:10px;padding:8px 10px;border:2px solid #d5a719;border-radius:10px;background:rgba(0,0,0,.5);text-align:left;min-width:250px}.school-verification summary{cursor:pointer;font-weight:800;color:#ffd34d}.school-verification.verified{border-color:#48c96b}.school-verification.verified summary{color:#6fe38a}.school-verification.plausible{border-color:#d5a719}.school-verification.plausible summary{color:#ffd34d}.school-verification.attention{border-color:#ef4b45}.school-verification.attention summary{color:#ff7973}.verification-time{font-size:.72rem;opacity:.75;margin:5px 0}.verification-check{display:grid;grid-template-columns:minmax(105px,.7fr) 1.3fr;gap:4px 10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.15);font-size:.78rem}.verification-check small{grid-column:2;opacity:.85}.verification-check.verified strong{color:#6fe38a}.verification-check.plausible strong{color:#ffd34d}.verification-check.mismatch strong{color:#ff7973}.verification-check.manual_review strong{color:#ffd34d}.verification-summary{margin-top:8px;color:#ffd34d;font-size:.8rem}

/* V8.282 BOOK REGRESSION FIX: restore the proven V8.249 interaction layer. */
.tutorial-book-screen{position:relative;width:min(1120px,96vw);height:100%;min-height:0;margin:0 auto;padding:0;overflow:visible}
#tutorial-book-layer{position:fixed;z-index:25!important;overflow:visible;border:0;background:transparent;pointer-events:auto;width:auto;max-height:none;margin:0;padding:0;overscroll-behavior:auto;scrollbar-gutter:auto}
#tutorial-book-layer.hidden{display:none!important}
.tutorial-book-anchor{visibility:hidden;pointer-events:none;padding:0}
@media(max-width:650px){.tutorial-book-screen{width:100vw;height:calc(100dvh - 155px);min-height:0}.tutorial-book-layer{width:auto;max-height:none;padding:0}}

/* V8.311: final Central Admin headline geometry. This remains after every
   generic responsive action/button rule. */





/* V8.314: complete compact Central Admin headline and persistent stepped podium. */
body[data-route="/admin/schools"] .admin-home-panel{--admin-action-width:70px;--admin-control-height:54px;--admin-row-gap:10px}





body[data-route="/admin/schools"] .admin-home-scroll{top:204px}
.podium-place-3,.podium-place-2,.podium-place-1{animation-fill-mode:forwards!important}
.podium-name{grid-template-rows:18px 28px 18px;padding:12px 10px 6px}
.podium-avatar-head{position:absolute;z-index:6;left:50%;top:-72px;width:82px;height:82px;filter:drop-shadow(0 5px 4px #0009);transform:translateX(-50%)}
.ceremony-results-row .podium-name{grid-template-rows:14px 22px 14px;padding:10px 7px 4px}
.ceremony-results-row .podium-avatar-head{top:-52px;width:58px;height:58px}

/* V8.321: final podium ceremony, ranking hint and full-game ranking. */
body:has(.ceremony-screen) #page-content{bottom:0!important;overflow:hidden!important;padding-bottom:86px!important}
body:has(.ceremony-screen) #bottom-control-unit{background:transparent!important;overflow:visible!important}
.ceremony-screen{box-sizing:border-box;height:100%;min-height:0;overflow:visible!important}
.ceremony-results-row{width:min(780px,78vw);height:210px;margin:0 auto 4px;overflow:visible!important;transform:none}
.ceremony-results-row .formula-podium{width:100%;height:210px;overflow:visible!important}
.ceremony-results-row .podium-place{grid-template-rows:1fr;box-sizing:border-box;overflow:visible!important;will-change:opacity,transform}
.podium-place-3{border-color:var(--blue)!important;animation:podiumCardRevealThird .72s cubic-bezier(.18,.88,.22,1.1) .55s 1 both!important}
.podium-place-2{border-color:var(--yellow)!important;animation:podiumCardRevealSecond .72s cubic-bezier(.18,.88,.22,1.1) 2.35s 1 both!important}
.podium-place-1{border-color:var(--green)!important;animation:podiumCardRevealFirst .82s cubic-bezier(.16,.9,.2,1.15) 4.15s 1 both!important}
.podium-place .podium-avatar-head,.podium-place .podium-name{opacity:0}
.podium-place-3 .podium-avatar-head,.podium-place-3 .podium-name{animation:podiumPlayerReveal .62s ease 1.35s 1 both}
.podium-place-2 .podium-avatar-head,.podium-place-2 .podium-name{animation:podiumPlayerReveal .62s ease 3.15s 1 both}
.podium-place-1 .podium-avatar-head,.podium-place-1 .podium-name{animation:podiumPlayerReveal .7s ease 5.1s 1 both}
.ceremony-results-row .podium-avatar-head{top:-72px;width:112px;height:112px;box-sizing:border-box;border:5px solid;object-position:50% 16%}
.ceremony-results-row .podium-place-3 .podium-avatar-head{border-color:#b87333;box-shadow:0 0 0 2px #6f3e19,0 7px 10px #0009}
.ceremony-results-row .podium-place-2 .podium-avatar-head{border-color:#d8dce2;box-shadow:0 0 0 2px #858b94,0 7px 10px #0009}
.ceremony-results-row .podium-place-1 .podium-avatar-head{border-color:#f2c230;box-shadow:0 0 0 2px #9b6b00,0 7px 10px #0009}
.ceremony-results-row .podium-name{position:absolute;z-index:7;left:8px;right:8px;bottom:58px;display:grid;grid-template-rows:14px 25px;place-items:center;padding:0;text-align:center;transform:none}
.ceremony-results-row .podium-name strong{font-size:clamp(17px,1.7vw,24px)}
.podium-place-3 .podium-name,.podium-place-2 .podium-name,.podium-place-1 .podium-name{animation-name:podiumNameReveal}
.ceremony-results-row .podium-step{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:42px 1fr;align-items:end;justify-items:center;box-sizing:border-box;min-height:50px;height:50px;padding:0 12px 10px;border-radius:0 0 16px 16px}
.ceremony-results-row .podium-step b{align-self:end;font-size:32px;line-height:1}
.ceremony-results-row .podium-step small{align-self:end;justify-self:center;font-size:11px;font-weight:800;line-height:1.1;color:#6a5312}
/* Revisited podiums skip the card entrance, but still celebrate. */
.ceremony-screen{--confetti-start:3.95s;--fireworks-start:5.9s}
.ceremony-screen.ceremony-complete{--confetti-start:0s;--fireworks-start:0s}
.victory-lightshow,.fireworks,.confetti{inset:0 0 74px;z-index:6}
.victory-lightshow{animation:victoryLightsOn .45s ease .1s 1 forwards}
.victory-lightshow span{animation:victoryBeam 2.8s ease-in-out .1s infinite}
.victory-lightshow span:nth-child(2){animation-delay:.45s}.victory-lightshow span:nth-child(3){animation-delay:.8s}
.confetti{animation:victoryLightsOn .2s linear var(--confetti-start) 1 forwards}
.confetti i{animation:confettiFall 4.8s linear calc(var(--confetti-start) + var(--d)) infinite}
.fireworks{animation:victoryLightsOn .2s linear var(--fireworks-start) 1 forwards}
.fireworks b{animation:fireworkBurst 2.4s ease-out var(--fireworks-start) infinite}
.fireworks b:nth-child(2){animation-delay:calc(var(--fireworks-start) + .5s)}.fireworks b:nth-child(3){animation-delay:calc(var(--fireworks-start) + 1.05s)}
#bottom-control-unit>.ceremony-ranking-hint{position:fixed;z-index:70;top:96px;right:170px;left:auto;bottom:auto;box-sizing:border-box;width:205px;min-height:72px;max-height:none;margin:0;padding:12px 12px 10px;overflow:visible;border:4px solid #39ad18;border-radius:15px;background:linear-gradient(#fff6bd,#e6c75f);color:#21160a;transform:rotate(10deg);transform-origin:center;box-shadow:3px 7px 20px rgba(0,0,0,.28);text-align:center;font-weight:700;pointer-events:auto;animation:ceremonyReplayHintReveal .8s ease 7.65s 1 both}
#bottom-control-unit>.ceremony-ranking-hint h3{margin:0 0 3px;color:#21160a;font-size:14px}
#bottom-control-unit>.ceremony-ranking-hint .ceremony-total-empty{font-size:12px;line-height:1.2}
#bottom-control-unit>.ceremony-ranking-hint small{display:block;margin-top:5px;font-size:9px;letter-spacing:.7px}
#bottom-control-unit>.ceremony-ranking-hint .ceremony-actions{display:flex;justify-content:center;margin-top:7px}
#bottom-control-unit>.ceremony-ranking-hint .simple-nav{position:static;width:100%;min-width:0;height:30px;font-size:11px}
.podium-full-ranking-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:110px 18px 82px;background:#02071299;pointer-events:auto}
.podium-full-ranking-card{box-sizing:border-box;width:min(680px,76vw);max-height:100%;padding:24px;border:5px solid var(--gold);border-radius:22px;background:#fffaf0;color:#111;box-shadow:0 14px 0 #140f08,0 24px 42px #000b;text-align:center}
.podium-full-ranking-card h2{margin:0 0 4px;color:#5c470d;font-family:ECDisplay,Arial,sans-serif;font-weight:400}
.podium-full-ranking-card>small{display:block;margin-bottom:10px;color:#6a5312;font-weight:800}
.podium-full-ranking-list{max-height:calc(100vh - 300px);overflow:auto;border-top:1px solid #d9caa8}
.podium-full-ranking-list>div{display:grid;grid-template-columns:42px minmax(0,1fr) 100px;gap:10px;align-items:center;padding:9px 7px;border-bottom:1px solid #d9caa8;text-align:left}
.podium-full-ranking-list>div>b{color:#9b6b00;text-align:center}.podium-full-ranking-list>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.podium-full-ranking-list>div>strong{text-align:right;font-size:12px}
.podium-full-ranking-card>.simple-nav{position:static;margin-top:14px}
@keyframes podiumCardRevealThird{0%{opacity:0;transform:translateX(90px) scale(.65)}100%{opacity:1;transform:none}}
@keyframes podiumCardRevealSecond{0%{opacity:0;transform:translateX(-110px) scale(.65)}100%{opacity:1;transform:none}}
@keyframes podiumCardRevealFirst{0%{opacity:0;transform:translateY(-85px) scale(.4)}72%{opacity:1;transform:translateY(7px) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes podiumPlayerReveal{0%{opacity:0;transform:translateX(-50%) translateY(12px) scale(.82)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes podiumNameReveal{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes ceremonyReplayHintReveal{0%{opacity:0;transform:translateY(18px) rotate(10deg) scale(.82)}100%{opacity:1;transform:rotate(10deg) scale(1)}}
.ceremony-complete .podium-avatar-head,.ceremony-complete .podium-name{animation:none!important;opacity:1!important}
@media(max-height:760px) and (hover:none) and (pointer:coarse){#bottom-control-unit>.ceremony-ranking-hint{top:82px;right:150px}}

/* Central Admin inbox indicators; reuse equal statistic frames. */
.admin-dashboard-stats .admin-notification-stat {background:transparent;color:inherit;cursor:pointer;}
.admin-dashboard-stats .admin-notification-stat:focus-visible {outline:3px solid #ffe080;outline-offset:3px;}
.admin-dashboard-grid .piatnik.admin-has-notifications {box-shadow:0 0 18px #ffbc1680,0 5px 10px #0008;}

.admin-hub-menu .piatnik.admin-has-notifications {box-shadow:0 0 18px #ffbc1680,0 5px 10px #0008;}


/* responsive-v8.34.css */
/* English Champ V8.34 – device adaptation only. Desktop design remains authoritative. */
:root{--ec-safe-top:env(safe-area-inset-top,0px);--ec-safe-right:env(safe-area-inset-right,0px);--ec-safe-bottom:env(safe-area-inset-bottom,0px);--ec-safe-left:env(safe-area-inset-left,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{min-height:100vh;min-height:100dvh;overscroll-behavior:none}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,.piatnik,.simple-nav{touch-action:manipulation}
input,select,textarea{font-size:max(16px,1em)}
#page-content{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-left:max(18px,var(--ec-safe-left));padding-right:max(18px,var(--ec-safe-right))}
.simple-nav,.home,.back,.next,.pause,.quit,#screen-button,#mute-button{bottom:max(12px,var(--ec-safe-bottom))}

/* Tablet portrait and compact laptops. */
@media (min-width:701px) and (max-width:1100px){
  .brand-title-row{left:0;width:100%}
  #hud-logo{width:270px}
  .brand-title-row #hud-logo{right:-30px;transform:scale(1.08)}
  .title-stack{left:-14px}
  .menu-stack{width:min(360px,48vw)}
  .panel{width:min(820px,88vw)}
  .question-shell,.admin-question-editor{width:min(720px,78vw)}
  .units-grid{width:min(760px,82vw);grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .data-table{min-width:680px}
  .panel:has(.data-table){overflow-x:auto}
  .student-avatar-layer{left:18px;width:190px}
  .student-avatar-layer[data-kind="teacher"]{left:12px;width:245px}
}

/* Smartphone portrait. */
@media (max-width:700px) and (orientation:portrait){
  #hud{height:116px;padding-top:var(--ec-safe-top)}
  .brand-title-row{left:0;top:var(--ec-safe-top);width:100%;height:108px}
  #hud-logo{width:156px;height:102px}
  .brand-title-row #hud-logo{right:-8px;transform:scale(1);transform-origin:center right}
  .title-stack{left:-2px;max-width:48vw;transform:translateY(calc(-50% + 25px))}
  .title-stack:before{max-width:48vw;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,6.1vw,27px);text-shadow:1px 2px 0 #382200,0 4px 8px #000d}
  .title-underline{height:6px}
  .hud-left{left:max(4px,var(--ec-safe-left));top:calc(var(--ec-safe-top) + 4px);gap:2px;z-index:5}
  .hud-right{right:max(4px,var(--ec-safe-right));top:calc(var(--ec-safe-top) + 4px);gap:3px;z-index:5}
  .game-meta-box,.score-box,.timer-box,.question-box,.answers-box{min-width:43px;height:40px;padding:3px 4px;border-radius:8px}
  .game-meta-box small,.hud-right small{font-size:7px;letter-spacing:.5px}
  .game-meta-box strong,.hud-right strong{max-width:55px;font-size:14px;line-height:19px}
  #page-content{top:calc(116px + var(--ec-safe-top));bottom:calc(67px + var(--ec-safe-bottom));padding:4px max(8px,var(--ec-safe-right)) 18px max(8px,var(--ec-safe-left));scroll-padding-bottom:72px}
  .area-splash #page-content{top:0;bottom:0;padding:var(--ec-safe-top) var(--ec-safe-right) var(--ec-safe-bottom) var(--ec-safe-left)}
  .screen{width:100%;min-height:100%}
  .menu-stack{width:min(330px,88vw);grid-auto-rows:52px;gap:10px;margin-top:8px}
  .menu-stack>.piatnik,.piatnik{height:52px;border-width:4px;border-radius:14px;grid-template-columns:42px 1fr 42px;padding:0 5px}
  .piatnik .suit{left:11px;width:28px;height:28px}
  .piatnik>span:last-child{font-size:19px;transform:translateY(4px)}
  .panel,.panel.login-panel,.question-shell,.admin-question-editor,.lobby-student-grid,.lobby-requests-field,.ranking-question-field{width:calc(100vw - 18px);max-width:none}
  .panel{margin-top:4px;padding:13px 12px;border-radius:15px;overflow-x:auto}
  .panel h2{font-size:26px;margin-bottom:10px}
  .panel h3{font-size:21px}
  .form-grid{grid-template-columns:1fr;gap:9px}
  .field,.field.full{grid-column:1}
  .field input,.field select,.field textarea{min-height:48px;padding:8px 11px;font-size:16px}
  .actions{gap:8px;margin-top:12px}
  .cards{grid-template-columns:1fr;gap:9px}
  .stat-card{padding:10px}
  .units-grid{width:calc(100vw - 18px);grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .units-grid .piatnik{height:51px}
  .question-shell{margin-left:0}
  .question-card{min-height:88px;padding:20px 12px 14px;border-width:4px;border-radius:16px;font-size:clamp(19px,5.5vw,25px)}
  .question-suits{font-size:25px;gap:6px}
  .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
  .answer{min-width:0;min-height:66px;padding:8px 7px;border-width:4px;border-radius:14px;font-size:clamp(13px,3.7vw,17px);overflow-wrap:anywhere}
  .ans-suit{flex:0 0 auto;margin-right:6px;font-size:24px}
  .progress-line{font-size:12px;gap:6px}
  .ranking-question-field{margin-top:18px;padding:16px 8px 12px}
  .rank-row{grid-template-columns:28px minmax(0,1fr) 42px;padding:8px 6px;font-size:13px}
  .data-table{min-width:620px;font-size:13px}
  .data-table th,.data-table td{padding:8px}
  .lobby-code{margin-top:4px;font-size:clamp(43px,16vw,64px);letter-spacing:4px}
  .lobby-student-button{max-width:calc(100vw - 24px);height:52px}
  .student-avatar-groups,.teacher-avatar-groups{width:calc(100vw - 18px);padding:0 4px 80px}
  .student-avatar-grid,.teacher-avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .student-avatar-layer{left:max(2px,var(--ec-safe-left));top:auto;bottom:calc(62px + var(--ec-safe-bottom));width:86px;height:210px;opacity:.92}
  .student-avatar-layer[data-kind="teacher"]{left:max(2px,var(--ec-safe-left));top:auto;bottom:calc(62px + var(--ec-safe-bottom));width:105px;height:225px}
  .student-avatar-layer::before,.student-avatar-layer::after{display:none}
  .simple-nav{min-width:96px;height:46px;padding:0 6px;font-size:15px}
  #screen-button{left:max(6px,var(--ec-safe-left));width:66px;min-width:66px;font-size:12px}
  #mute-button{left:calc(max(6px,var(--ec-safe-left)) + 72px);width:66px;min-width:66px;font-size:12px}
  #help-language-button{left:calc(max(6px,var(--ec-safe-left)) + 144px)}
  .home{right:max(6px,var(--ec-safe-right))}
  .next{right:calc(max(6px,var(--ec-safe-right)) + 102px);width:66px;min-width:66px;font-size:12px}
  .back{right:calc(max(6px,var(--ec-safe-right)) + 174px);width:66px;min-width:66px;font-size:12px}
  .pause{right:calc(max(6px,var(--ec-safe-right)) + 174px)}
  .quit{right:calc(max(6px,var(--ec-safe-right)) + 276px)}
  .training-quit{right:calc(max(6px,var(--ec-safe-right)) + 246px)}
  .avatar-save{left:calc(max(6px,var(--ec-safe-left)) + 144px);min-width:96px}
  .ranking-nav,.lobby-check{left:calc(max(6px,var(--ec-safe-left)) + 102px);min-width:96px}
  .card-management-nav{left:calc(max(6px,var(--ec-safe-left)) + 204px)}
  .lobby-start{bottom:calc(61px + var(--ec-safe-bottom))}
  #bottom-links{display:flex;bottom:calc(61px + var(--ec-safe-bottom))}
  #bottom-links a:not([href="#/help"]){display:none}
  body[data-route="/help"] #bottom-links{display:none}
  .help-assistant form>div{grid-template-columns:1fr}.help-assistant button{height:44px}
}

/* Smartphone landscape and very low browser windows. */
@media (max-height:520px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  #hud{height:82px;padding-top:var(--ec-safe-top)}
  .brand-title-row{left:0;top:var(--ec-safe-top);width:100%;height:76px}
  #hud-logo{width:150px;height:76px}
  .brand-title-row #hud-logo{right:-4px;transform:scale(1)}
  .title-stack{left:0;transform:translateY(calc(-50% + 13px))}
  .title-stack:before{font-size:23px}
  .title-underline{height:5px}
  .hud-left,.hud-right{top:calc(var(--ec-safe-top) + 3px)}
  .game-meta-box,.score-box,.timer-box,.question-box,.answers-box{min-width:44px;height:38px;padding:2px 4px}
  .game-meta-box small,.hud-right small{font-size:7px}.game-meta-box strong,.hud-right strong{font-size:14px;line-height:18px}
  #page-content{top:calc(82px + var(--ec-safe-top));bottom:calc(58px + var(--ec-safe-bottom));padding-top:2px}
  .area-splash #page-content{top:0;bottom:0}
  .screen{min-height:100%}
  .menu-stack{width:min(330px,44vw);grid-auto-rows:43px;gap:6px;margin-top:0}
  .menu-stack>.piatnik,.piatnik{height:43px;border-width:3px}
  .piatnik>span:last-child{font-size:17px}.piatnik .suit{width:25px;height:25px}
  .panel{margin-top:2px;padding:8px 14px;max-height:calc(100dvh - 142px);overflow:auto}
  .panel h2{font-size:23px;margin-bottom:6px}
  .question-shell{width:min(680px,76vw)}
  .question-card{min-height:60px;padding:12px 20px 9px;font-size:19px;border-width:3px}
  .answer-grid{gap:6px 10px;margin-top:7px}
  .answer{min-height:48px;padding:5px 10px;border-width:3px;font-size:14px}.ans-suit{font-size:21px;margin-right:8px}
  .student-avatar-layer{left:max(4px,var(--ec-safe-left));top:88px;bottom:54px;width:100px}
  .student-avatar-layer[data-kind="teacher"]{left:max(4px,var(--ec-safe-left));top:82px;bottom:50px;width:125px}
  .simple-nav,#mute-button{height:42px;bottom:max(6px,var(--ec-safe-bottom))}
  #bottom-links{display:flex;left:auto;right:max(8px,var(--ec-safe-right));bottom:max(7px,var(--ec-safe-bottom));transform:none}
  #bottom-links a:not([href="#/help"]){display:none}
  body[data-route="/help"] #bottom-links{display:none}
}

@media (hover:none){
  .piatnik:hover,.student-avatar-choice:hover,.teacher-avatar-choice:hover{transform:none;filter:none}
  button:active,.piatnik:active{filter:brightness(.9)}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* layers-v8.122.css */
/* V8.237: one surface, five independent sibling layers. */
.ec-layer{position:fixed;inset:0;overflow:visible;pointer-events:none}
.ec-layer-background{z-index:0}
.ec-layer-magic{z-index:10}
.ec-layer-workflow{z-index:20}
.ec-layer-fixes{z-index:30}
.ec-layer-interactives{z-index:40}
.ec-layer-workflow>#page-content{pointer-events:auto}
#background{z-index:0}
#weather{z-index:1;background:transparent;pointer-events:none}
#magic-effects{position:fixed;inset:0;background:transparent;pointer-events:none}
#page-content,#tutorial-book-layer{z-index:10;background:transparent}
#student-avatar-layer{z-index:20;background:transparent;pointer-events:none}
#hud{z-index:30;background:transparent;pointer-events:none}
#bottom-control-unit{position:fixed;inset:0;z-index:40;background:transparent;pointer-events:none}
#bottom-control-unit #nav-controls{pointer-events:none}
#bottom-control-unit #nav-controls .simple-nav,
#bottom-control-unit #screen-button,
#bottom-control-unit #mute-button,
#bottom-control-unit #teacher-continue-button,
#bottom-control-unit #help-language-button,
#bottom-control-unit #bottom-links{pointer-events:auto}
#bottom-control-unit #mute-button{z-index:60}
.piatnik,.answer,button,a,select,input,textarea{pointer-events:auto}

/* zoom-units-v8.125.css */
/* V8.125: only zoom-unit integrity. V8.123 remains otherwise unchanged. */
#bottom-links a{color:var(--gold);font-family:Montserrat,Arial,sans-serif;font-weight:400;text-transform:none}
body[data-route="/"] #bottom-control-unit{display:none}
@media (hover:hover){
  #bottom-links a:hover{
    color:var(--gold);filter:none;text-shadow:none;scale:1.02
  }
  button:not(.simple-nav):not(.card-management-nav):not(:disabled):not(.disabled):not(.hidden):not([aria-disabled="true"]):hover{
    z-index:5;filter:none!important;scale:1.02;
    transition:scale .14s ease
  }
  .student-avatar-choice:hover,.teacher-avatar-choice:hover{transform:none}
}

/* V8.225: one dependable smartphone layout. */
#portrait-required{display:none}
@media (max-width:700px) and (orientation:portrait){
  #background{
    display:block!important;
    visibility:visible!important;
    opacity:1!important
  }
  .brand-title-row .title-stack,
  body[data-route="/help/tutorial"] .brand-title-row .title-stack{
    transform:translateY(calc(-50% - 6px))!important
  }
  .student-avatar-layer,
  .student-avatar-layer img,
  .student-avatar-layer .student-avatar-sprite{
    opacity:1!important
  }
  body:has(#student-avatar-layer:not(.hidden)) .screen:has(.answer-grid) .question-shell{
    width:calc(100vw - 112px)!important;
    margin-left:104px!important;
    margin-right:8px!important
  }
  body:not([data-route^="/admin"]) .screen:has(.answer-grid) .answer-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    margin-top:10px!important
  }
  body:not([data-route^="/admin"]) .screen:has(.answer-grid) .answer{
    min-height:46px!important;
    padding:7px 9px!important;
    border-width:3px!important;
    border-radius:12px!important;
    font-size:12px!important
  }
  body:not([data-route^="/admin"]) .screen:has(.answer-grid) .ans-suit{
    margin-right:7px!important;
    font-size:22px!important
  }
}

@media (max-height:520px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  #portrait-required{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:max(18px,var(--ec-safe-top,0px)) max(24px,var(--ec-safe-right,0px)) max(18px,var(--ec-safe-bottom,0px)) max(24px,var(--ec-safe-left,0px));
    box-sizing:border-box;
    background:linear-gradient(#05091499,#050914d9),url('/assets/backgrounds/castle-walk-v8.17.webp') center/cover no-repeat;
    color:#fff;
    text-align:center
  }
  #portrait-required img{width:min(320px,48vw);height:auto}
  #hud,#page-content,#student-avatar-layer,#bottom-control-unit,#tutorial-book-layer{visibility:hidden!important;pointer-events:none!important}
}
#bottom-links a{display:inline-block;transition:scale .14s ease}
.create-class-shell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.create-class-panel{
  box-sizing:border-box;width:auto;min-width:372px;max-width:min(92vw,640px);margin-top:20px;padding:18px 34px 24px;
  border:5px solid var(--gold);border-radius:20px;
  background:#061225b8;box-shadow:0 10px 0 #140f08,0 16px 28px #0009
}
.create-class-panel .create-class-form-grid{grid-template-columns:96px 170px 132px;justify-content:center;align-items:end;gap:18px}
.create-class-shell .create-class-submit-row{margin-top:18px;margin-bottom:0}
.create-class-shell #form-msg{margin-top:12px;max-width:min(92vw,640px)}
.title-underline{background:transparent;clip-path:none}
.title-underline:before{
  content:"";position:absolute;z-index:2;left:-3px;top:2px;width:7px;height:5px;
  border-radius:50%;background:var(--gold)
}
.title-underline:after{
  content:"";position:absolute;z-index:1;inset:0;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 58%,#f8ad00 80%,transparent 100%);
  clip-path:polygon(0 17%,8% 8%,23% 16%,43% 10%,62% 22%,78% 27%,90% 38%,100% 50%,91% 62%,76% 69%,58% 76%,39% 88%,20% 80%,7% 93%,0 100%)
}
@media (min-width:701px){
  #bottom-links{bottom:10px}
  .student-avatar-layer{left:136.6667px;top:auto;bottom:60px;width:147px;height:333px;transform:none;transform-origin:left bottom}
  .student-avatar-layer[data-kind="teacher"]{left:153.6667px;top:auto;bottom:60px;width:160px;height:403px;transform-origin:left bottom}
  .brand-title-row{left:0;right:0;top:4px;width:100%;height:158px}
  .brand-title-lock{left:calc(50% - 40px);top:0;width:0;height:158px;transform:none;transform-origin:top center}
  .brand-title-row #hud-logo{width:350px;height:158px;right:-76px;transform:scale(1.2);transform-origin:top right}
  .brand-title-row .title-stack{left:-18px;top:50%;transform:translateY(calc(-50% + 21px))}
  .brand-title-row .title-stack:before{font-size:40.8px}
  .menu-stack{margin-top:22px}
  #bottom-control-unit .simple-nav,
  #bottom-control-unit #screen-button,
  #bottom-control-unit #mute-button,
  #bottom-control-unit #teacher-continue-button,
  #bottom-control-unit #help-language-button{height:40px;bottom:10px;font-size:15px}
  #bottom-control-unit #screen-button,
  #bottom-control-unit #mute-button,
  #bottom-control-unit .back,
  #bottom-control-unit .next,
  #bottom-control-unit .home{width:80px;min-width:80px}
  #bottom-control-unit #help-language-button{left:182px;width:100px;min-width:100px;padding:0 12px}
}

@media (min-width:701px) and (max-height:760px) and (hover:none) and (pointer:coarse){
  #bottom-links{bottom:10px}
  .brand-title-row{top:10px;height:122px}
  .brand-title-lock{height:158px;transform:scale(.7721518987)}
  .menu-stack{margin-top:22px}
  #bottom-control-unit .simple-nav,
  #bottom-control-unit #screen-button,
  #bottom-control-unit #mute-button,
  #bottom-control-unit #teacher-continue-button,
  #bottom-control-unit #help-language-button{bottom:10px}
}

/* V8.185: Die untere Bedienleiste bleibt auch bei starkem Browser-Zoom stabil. */
#bottom-control-unit #screen-button,
#bottom-control-unit #mute-button{
  top:auto!important;
  bottom:10px!important;
  height:40px!important
}
#bottom-control-unit #screen-button{
  left:10px!important;
  z-index:45;
  pointer-events:auto
}
#bottom-control-unit #mute-button{
  left:96px!important
}
#bottom-control-unit #teacher-continue-button{
  left:182px!important;
  top:auto!important;
  bottom:10px!important;
  height:40px!important;
  z-index:45;
  pointer-events:auto
}
/* CHOOSE follows MUTE with the same 6px gap as SCREEN/MUTE.
   Compact phone/landscape rules below retain their shared 6px gap. */
@media(min-width:701px){#bottom-control-unit>.avatar-save{left:182px!important}}
#bottom-control-unit #bottom-links,
body[data-route="/help"] #bottom-control-unit #bottom-links{
  display:flex!important;
  left:50%!important;
  right:auto!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  justify-content:center;
  white-space:nowrap
}
#bottom-control-unit #bottom-links a{
  display:inline-block!important
}

@media (min-width:701px){
  #bottom-control-unit .home{right:10px!important}
  #bottom-control-unit .next{right:96px!important;display:block!important}
  #bottom-control-unit .back{right:182px!important}
}

/* V8.222: compact two-row smartphone footer without overlapping controls. */
@media (max-width:700px) and (orientation:portrait){
  #bottom-control-unit > .avatar-save{display:none}
  #page-content{
    bottom:calc(96px + var(--ec-safe-bottom,0px))!important
  }
  .area-splash #page-content{bottom:0!important}
  #bottom-control-unit .simple-nav,
  #bottom-control-unit #screen-button,
  #bottom-control-unit #mute-button,
  #bottom-control-unit #teacher-continue-button,
  #bottom-control-unit #help-language-button,
  .avatar-save{
    bottom:10px!important;
    height:42px!important;
    padding:0 4px!important;
    font-size:11px!important
  }
  #bottom-control-unit #screen-button{
    left:max(6px,var(--ec-safe-left,0px))!important;
    width:62px!important;
    min-width:62px!important
  }
  #bottom-control-unit #mute-button{
    left:calc(max(6px,var(--ec-safe-left,0px)) + 68px)!important;
    width:54px!important;
    min-width:54px!important
  }
  #bottom-control-unit #help-language-button,
  #bottom-control-unit #teacher-continue-button,
  .avatar-save{
    left:calc(max(6px,var(--ec-safe-left,0px)) + 128px)!important;
    width:72px!important;
    min-width:72px!important
  }
  #bottom-control-unit .home{
    right:max(6px,var(--ec-safe-right,0px))!important;
    width:72px!important;
    min-width:72px!important
  }
  #bottom-control-unit .next{
    right:calc(max(6px,var(--ec-safe-right,0px)) + 78px)!important;
    width:58px!important;
    min-width:58px!important
  }
  #bottom-control-unit .back{
    right:calc(max(6px,var(--ec-safe-right,0px)) + 142px)!important;
    width:58px!important;
    min-width:58px!important
  }
  #bottom-control-unit .next:disabled{display:none!important}
  body:has(#bottom-control-unit .next:disabled) #bottom-control-unit .back{
    right:calc(max(6px,var(--ec-safe-right,0px)) + 78px)!important
  }
  #bottom-control-unit #bottom-links,
  body[data-route="/help"] #bottom-control-unit #bottom-links{
    bottom:10px!important;
    gap:16px!important;
    width:calc(100vw - 20px);
    font-size:13px
  }
  body[data-route="/help/tutorial"] .tutorial-book-screen{
    height:calc(100dvh - 212px)!important
  }
  body[data-route="/help/tutorial"] .brand-title-row .title-stack{
    transform:translateY(calc(-50% - 6px))!important
  }

  /* V8.223: avatar selection uses one full-body column plus three card columns. */
  body[data-route="/students/avatar"] .student-avatar-groups,
  body[data-route="/teacher/avatar"] .teacher-avatar-groups,
  body[data-route="/quiz/avatar"] .student-avatar-groups{
    width:calc(100vw - 112px)!important;
    margin-left:104px!important;
    margin-right:8px!important
  }
  body[data-route="/students/avatar"] .student-avatar-grid,
  body[data-route="/teacher/avatar"] .teacher-avatar-grid,
  body[data-route="/quiz/avatar"] .student-avatar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important
  }
  body[data-route="/students/avatar"] .student-avatar-layer,
  body[data-route="/quiz/avatar"] .student-avatar-layer{
    left:max(2px,var(--ec-safe-left,0px))!important;
    top:auto!important;
    opacity:1!important
  }
  /* Avatar selection uses the same control-anchored vertical placement as Test Game.
     Do not force an independent top, bottom, width or height here. */
  body[data-route="/teacher/avatar"] .student-avatar-layer{
    top:auto!important;
    opacity:1!important
  }
  body[data-route="/students/avatar"] .student-avatar-layer img,
  body[data-route="/teacher/avatar"] .student-avatar-layer img,
  body[data-route="/quiz/avatar"] .student-avatar-layer img{
    opacity:1!important;
    object-fit:contain!important;
    object-position:center bottom!important
  }
  body[data-route="/students/avatar"] .avatar-save,
  body[data-route="/teacher/avatar"] .avatar-save,
  body[data-route="/quiz/avatar"] .avatar-save{
    display:block!important;
    visibility:visible!important;
    z-index:40!important;
    left:calc(max(6px,var(--ec-safe-left,0px)) + 128px)!important;
    width:62px!important;
    min-width:62px!important
  }
}

/* V8.224: dedicated compact Tutorial layout for smartphone landscape. */
@media (max-height:520px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  #hud{height:72px!important;padding-top:var(--ec-safe-top,0px)!important}
  .brand-title-row{left:0!important;right:0!important;top:var(--ec-safe-top,0px)!important;width:100%!important;height:68px!important}
  .brand-title-lock{left:50%!important;top:0!important;height:68px!important;transform:none!important}
  .brand-title-row #hud-logo{right:-2px!important;width:148px!important;height:68px!important;transform:scale(1)!important;transform-origin:center right!important}
  .brand-title-row .title-stack{left:0!important;transform:translateY(calc(-50% + 9px))!important}
  .brand-title-row .title-stack:before{font-size:22px!important}
  .title-underline{height:5px!important}
  #page-content{
    top:calc(72px + var(--ec-safe-top,0px))!important;
    bottom:calc(76px + var(--ec-safe-bottom,0px))!important;
    padding-top:2px!important
  }
  .area-splash #page-content{top:0!important;bottom:0!important}
  #bottom-control-unit .simple-nav,
  #bottom-control-unit #screen-button,
  #bottom-control-unit #mute-button,
  #bottom-control-unit #teacher-continue-button,
  #bottom-control-unit #help-language-button,
  #bottom-control-unit > .avatar-save{
    top:auto!important;
    bottom:10px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 4px!important;
    font-size:11px!important
  }
  #bottom-control-unit #screen-button{left:max(6px,var(--ec-safe-left,0px))!important;width:68px!important;min-width:68px!important}
  #bottom-control-unit #mute-button{left:calc(max(6px,var(--ec-safe-left,0px)) + 74px)!important;width:56px!important;min-width:56px!important}
  #bottom-control-unit #help-language-button,
  #bottom-control-unit #teacher-continue-button,
  #bottom-control-unit > .avatar-save{left:calc(max(6px,var(--ec-safe-left,0px)) + 136px)!important;width:70px!important;min-width:70px!important}
  #bottom-control-unit .home{right:max(6px,var(--ec-safe-right,0px))!important;width:70px!important;min-width:70px!important}
  #bottom-control-unit .next{right:calc(max(6px,var(--ec-safe-right,0px)) + 76px)!important;width:56px!important;min-width:56px!important}
  #bottom-control-unit .back{right:calc(max(6px,var(--ec-safe-right,0px)) + 138px)!important;width:56px!important;min-width:56px!important}
  #bottom-control-unit .next:disabled{display:none!important}
  body:has(#bottom-control-unit .next:disabled) #bottom-control-unit .back{right:calc(max(6px,var(--ec-safe-right,0px)) + 76px)!important}
  #bottom-control-unit #bottom-links,
  body[data-route="/help"] #bottom-control-unit #bottom-links{
    display:flex!important;
    left:50%!important;
    right:auto!important;
    bottom:10px!important;
    width:auto!important;
    gap:16px!important;
    transform:translateX(-50%)!important;
    font-size:12px!important
  }
  #bottom-control-unit #bottom-links a{display:inline-block!important}

  body[data-route="/help/tutorial"] #hud{height:70px!important}
  body[data-route="/help/tutorial"] .brand-title-row{height:66px!important}
  body[data-route="/help/tutorial"] .brand-title-row .title-stack{
    transform:translateY(calc(-50% + 8px))!important
  }
  body[data-route="/help/tutorial"] #page-content{
    top:calc(70px + var(--ec-safe-top,0px))!important;
    bottom:calc(82px + var(--ec-safe-bottom,0px))!important;
    padding:0 4px!important
  }
  body[data-route="/help/tutorial"] .tutorial-book-screen{
    width:100%!important;
    height:100%!important
  }
  body[data-route="/help/tutorial"] #bottom-control-unit .simple-nav,
  body[data-route="/help/tutorial"] #bottom-control-unit #screen-button,
  body[data-route="/help/tutorial"] #bottom-control-unit #mute-button,
  body[data-route="/help/tutorial"] #bottom-control-unit #help-language-button{
    bottom:10px!important;
    height:38px!important;
    padding:0 5px!important;
    font-size:11px!important
  }
  body[data-route="/help/tutorial"] #screen-button{
    left:max(6px,var(--ec-safe-left,0px))!important;width:72px!important;min-width:72px!important
  }
  body[data-route="/help/tutorial"] #mute-button{
    left:calc(max(6px,var(--ec-safe-left,0px)) + 78px)!important;width:62px!important;min-width:62px!important
  }
  body[data-route="/help/tutorial"] #help-language-button{
    left:calc(max(6px,var(--ec-safe-left,0px)) + 146px)!important;width:72px!important;min-width:72px!important
  }
  body[data-route="/help/tutorial"] .home{
    right:max(6px,var(--ec-safe-right,0px))!important;width:76px!important;min-width:76px!important
  }
  body[data-route="/help/tutorial"] .next:disabled{display:none!important}
  body[data-route="/help/tutorial"] .back{
    right:calc(max(6px,var(--ec-safe-right,0px)) + 82px)!important;width:62px!important;min-width:62px!important
  }
  body[data-route="/help/tutorial"] #bottom-links{
    display:flex!important;
    left:50%!important;
    right:auto!important;
    bottom:10px!important;
    width:auto!important;
    gap:16px!important;
    transform:translateX(-50%)!important;
    font-size:12px!important
  }
  body[data-route="/help/tutorial"] #bottom-links a{display:inline-block!important}
}

/* reference-center-v8.362.css */
/* Restore only the V8.356 compact central-area geometry on short desktop viewports.
   The already working outer controls, logo and headline remain governed by V8.359. */
@media (min-width:701px) and (max-height:760px){
  #page-content{top:132px;bottom:66px;padding:4px 18px 18px;scroll-padding-bottom:76px}
  .area-splash #page-content{top:0;bottom:0}
  .menu-stack{margin-top:12px;gap:9px}
  .piatnik{height:50px;border-width:4px}
  .piatnik>span:last-child{font-size:21px}
  .piatnik .suit{width:30px;height:30px;left:16px}
  .panel{margin-top:8px;padding:16px 22px}
  .form-grid{gap:9px 14px}.field{gap:4px}.field label{font-size:13px}
  .field input,.field select,.field textarea{min-height:43px;padding:7px 13px;font-size:18px}
  .actions{gap:10px;margin-top:10px}
  .credentials,.notice{margin-top:9px;padding:8px 12px}.notice.small{font-size:12px;line-height:1.25}
  .question-shell{width:min(740px,62vw)}.progress-line{margin-bottom:6px;font-size:15px}
  .question-card{padding:18px 32px;min-height:82px;font-size:25px;border-width:4px}
  .answer-grid{gap:10px 14px;margin-top:12px}.answer{min-height:68px;border-width:4px;padding:10px 18px;font-size:18px}.ans-suit{font-size:28px;margin-right:14px}
  .cards{gap:10px}.stat-card{padding:10px}.stat-card strong{font-size:28px}.panel h2{font-size:28px;margin-bottom:10px}
  .area-game #page-content,.area-training #page-content{bottom:70px}
  body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{top:132px;bottom:61px}
  .class-management-actions .simple-nav,.class-management-actions #print-student-codes{height:43px}
}

/* reference-layout-v8.370.css */
/* V8.367 desktop geometry contract — 2026-09-28
   Approved combination at real 100% browser zoom:
   - bottom controls/footer links stay at the approved 100% pixel size;
   - student/teacher avatar stays at the approved 100% pixel size;
   - logo, page headline and ordinary central stage use the visual geometry of the approved 80% reference;
   - the logo/headline -> Piatnik/action vertical relationship scales with that central stage.
   Never scale #bottom-control-unit or .student-avatar-layer here. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  /* Header: 80% of the former desktop geometry, anchored to the same centre reference. */
  .brand-title-row{top:3.2px;height:126.4px}
  .brand-title-lock{left:calc(50% - 32px);height:126.4px}
  .brand-title-row #hud-logo{width:280px;height:126.4px;right:-60.8px;transform:scale(1.2);transform-origin:top right}
  .brand-title-row .title-stack{left:-14.4px;transform:translateY(calc(-50% + 16.8px))}
  .brand-title-row .title-stack:before{font-size:32.64px}

  /* Ordinary central stage: reproduce the approved 80%-view geometry at actual 100% browser zoom.
     Footer controls and avatar are separate fixed layers and therefore deliberately unaffected. */
  body:not([data-route="/help/tutorial"]) #page-content{top:131.2px}
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen{
    zoom:.8;
    width:125%;
    min-height:125%;
    box-sizing:border-box;
  }

  /* Welcome keeps its special composition; only its logo adopts the approved smaller reference size. */
  .area-splash .splash-logo-shell{width:min(236px,38.4vw);max-height:160px}
  .area-splash .splash-logo{max-height:160px}
}

/* V8.369 final desktop geometry corrections — 2026-09-28
   User-approved rules:
   - fixed EC desktop pages never create browser scrollbars;
   - Welcome logo stays at its approved V8.368/100% size;
   - Welcome tagline + ENTER use the former 80%-view size and the whole Welcome composition is screen-centred;
   - Piatnik/action groups are horizontally centred;
   - avatar and bottom controls retain their approved 100% sizes;
   - CHOOSE is docked exactly 5px to the right of MUTE at 100% view. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  html,body{overflow:hidden!important}
  #app,body:not([data-route="/school/classes"]):not([data-route^="/season/rankings"]) #page-content{overflow:hidden!important}
  body[data-route="/school/classes"] #page-content,body[data-route^="/season/rankings"] #page-content{overflow-y:auto!important;overflow-x:hidden!important}
  body:not([data-route="/help/tutorial"]):not([data-route="/school/classes"]):not([data-route^="/season/rankings"]) #page-content>.screen{overflow:hidden!important}

  /* Welcome: logo already approved; only copy/tagline and Enter shrink to the 80% reference. */
  .area-splash #page-content{top:0!important;bottom:0!important;padding:0!important}
  .area-splash #page-content>.splash{height:100%!important;min-height:100%!important;justify-content:center!important;overflow:hidden!important}
  .area-splash .tagline{font-size:14.4px!important;line-height:1.22!important;letter-spacing:1.6px!important;margin:6.4px 0 14.4px!important}
  .area-splash .enter{width:136px!important;min-width:136px!important;height:37px!important;min-height:37px!important;margin-top:3px!important;font-size:16px!important}

  /* Keep action/Piatnik groups centred in the usable stage. */
  .menu-stack,.help-menu-stack{margin-left:auto!important;margin-right:auto!important}
  .screen>.menu-stack,.screen>.help-menu-stack,.screen>.role-menu,.screen>.class-menu{align-self:center!important}

}


/* V8.370 viewport-centering correction — 2026-09-28
   The 80%-reference central stage is wider before CSS zoom. Therefore ordinary action groups
   must be shifted by the exact pre-zoom compensation so their rendered centre is 50vw.
   Vertical geometry, sizes, footer controls and avatars are unchanged. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.help-menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.role-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-choice-row,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-choice-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.units-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.training-mode-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.training-unit-grid{
    position:relative!important;
    left:-15.625vw!important;
  }
}

/* V8.446: Training selection geometry is owned by student-consolidation-v8.446; legacy child offsets are neutralized by that authoritative layer. */

/* reference-layout-v8.371.css */
/* V8.371 global viewport-centering contract — 2026-09-28
   All ordinary central desktop UI groups are anchored to the actual viewport centre.
   This compensates for the 125%-wide pre-zoom stage used to reproduce the approved
   80%-reference geometry at real 100% browser zoom.
   Excluded/frozen layers: logo/headline HUD, avatar, bottom controls/footer,
   Welcome composition, and Tutorial book/notebook rendering. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen > *:not(.ranking-unit-controls){
    position:relative!important;
    left:-15.625vw!important;
  }

  /* Nested central blocks which can be positioned independently of their screen wrapper. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-dashboard-stats,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-dashboard-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .question-shell,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .help-menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .role-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-choice-row,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-choice-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .units-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .training-mode-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .training-unit-grid{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* V8.370 already compensated these groups. Prevent double compensation when they
     are direct children of .screen under the new global rule. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.help-menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.role-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-choice-row,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.class-choice-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.units-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.training-mode-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>.training-unit-grid{
    left:-15.625vw!important;
  }
}

/* V8.446: Training selection geometry is owned by student-consolidation-v8.446; legacy child offsets are neutralized by that authoritative layer. */

/* reference-layout-v8.373.css */
/* V8.373 true viewport-centering contract — 2026-09-28
   The desktop central stage is rendered with CSS zoom:.8 to reproduce the approved
   80%-reference geometry at real 100% browser zoom. Fixed-position central fields
   inside that zoomed stage therefore need a pre-zoom X anchor of 62.5vw so that
   their rendered bounding-box midpoint lands at the real viewport midpoint 50vw.
   This rule neutralises legacy horizontal offsets without changing sizes, vertical
   geometry, avatar, HUD logo/headline, tutorial book/notebook, or footer controls. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  /* Large/special fixed central content roots inside the zoomed workflow stage. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) .student-management-panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-home-scroll,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .card-management-nav{
    left:62.5vw!important;
    right:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
  }

/* V8.445: obsolete teacher-specific geometry removed; consolidated in teacher-consolidation-v8.445. */


  /* Ordinary central flow roots remain compensated as a group; do not let legacy
     inline/stylesheet margins introduce an additional horizontal bias. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* reference-layout-v8.374.css */
/* V8.374 layout consolidation — 2026-09-28
   Rules implemented from the latest agreements:
   1) ordinary central fields sit globally lower so their top labels stay readable;
      the logo may overlap only the outer frame, never the content text.
   2) the tutorial book must stay fully visible (no right-edge clipping).
   3) no scrolling is allowed in the desktop/tablet tutorial-book area. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  /* Lower ordinary central desktop content as one global safety rule. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen{
    padding-top:22px!important;
    box-sizing:border-box!important;
  }
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>*:not(.tutorial-book-anchor){
    margin-top:22px!important;
  }

  /* Fixed / independently positioned central fields also move down globally. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) .student-management-panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-home-scroll,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .card-management-nav,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .question-shell{
    margin-top:22px!important;
  }

/* V8.445: obsolete teacher-specific geometry removed; consolidated in teacher-consolidation-v8.445. */


  /* Admin dashboard fixed rows follow the same lower safe-top rule. */
  
  body[data-route^="/admin/"] .admin-home-scroll{top:226px!important}
}

/* Tutorial book area: no browser/layer scrolling, no clipping workaround by scrollbars. */
body[data-route="/help/tutorial"] .tutorial-book-screen,
body[data-route="/help/tutorial"] #tutorial-book-layer{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  scrollbar-width:none!important;
}
body[data-route="/help/tutorial"] .tutorial-book-screen::-webkit-scrollbar,
body[data-route="/help/tutorial"] #tutorial-book-layer::-webkit-scrollbar{
  display:none!important;
}

/* reference-layout-v8.375.css */
/* V8.375 global no-clipping contract — 2026-09-28
   No visible EC content may be cut off at any viewport edge. This is a layout
   containment rule, not a scrolling fallback. Footer controls and avatars keep
   their approved sizes and are excluded from central-content resizing. */

/* Universal box sizing for predictable containment. */
#page-content *, #tutorial-book-layer *, #student-avatar-layer *, #bottom-control-unit *{
  box-sizing:border-box;
}

/* Fixed EC screens do not use browser scrolling as a clipping workaround. */
html,body,#app,#page-content{
  overflow:hidden!important;
}

/* Desktop: the central stage is pre-scaled with zoom:.8. Keep every direct
   visible central root inside the corresponding 125vw pre-zoom safe width. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body:not(.area-splash) #page-content>.screen{
    overflow:hidden!important;
  }
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>*:not(.student-avatar-layer):not(#bottom-control-unit){
    max-width:calc(125vw - 30px)!important;
  }
  body:not([data-route="/help/tutorial"]):not(.area-splash) .panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .question-shell,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .student-management-panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-home-scroll,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .help-menu-stack,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .role-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-choice-row,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .class-choice-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .units-grid,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .training-mode-menu,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .training-unit-grid{
    max-width:calc(125vw - 30px)!important;
  }
}

/* Tablet/phone: all central content must fit inside the visible viewport. */
@media (max-width:1000px), (hover:none), (pointer:coarse){
  #page-content>.screen,
  #page-content>.screen>*{
    max-width:calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))!important;
  }
  #page-content>.screen{
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }
  .panel,.question-shell,.menu-stack,.help-menu-stack,.role-menu,.class-menu,
  .class-choice-row,.class-choice-grid,.units-grid,.training-mode-menu,.training-unit-grid,
  .student-management-panel,.admin-home-scroll{
    max-width:calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))!important;
  }
}

/* Tutorial route: both book and smartphone notebook are fully contained with no
   clipping and no page/layer scrolling. */
body[data-route="/help/tutorial"] #page-content,
body[data-route="/help/tutorial"] .tutorial-book-screen,
body[data-route="/help/tutorial"] #tutorial-book-layer{
  overflow:hidden!important;
  max-width:100vw!important;
}
body[data-route="/help/tutorial"] #tutorial-book-layer{
  left:0!important;
  width:100vw!important;
}

/* Administrative lists deliberately scroll within the central content layer.
   The fixed HUD and footer remain outside this scrolling area. */
body:is([data-route="/school/classes"],[data-route^="/season/rankings"]) #page-content{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body:is([data-route="/school/classes"],[data-route^="/season/rankings"]) #page-content>.screen{
  overflow:visible!important;
}

/* Central Admin dashboard: keep the first stats close to the logo, and let
   the full button grid scroll above the fixed footer. */
body[data-route="/admin/home"] #page-content{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body[data-route="/admin/home"] #page-content>.admin-dashboard-screen{
  height:auto!important;
  min-height:0!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  gap:18px!important;
  padding-top:8px!important;
  padding-bottom:40px!important;
}

/* V8.443: obsolete school-admin geometry removed; consolidated globally. */

/* V8.396: long administrative panels scroll inside the fixed central stage. */
body:is([data-route="/admin/help-questions"],[data-route="/admin/support-requests"],[data-route="/admin/monitoring"],[data-route="/school/register"],[data-route^="/school/correction/"]) #page-content{
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
}
body:is([data-route="/admin/help-questions"],[data-route="/admin/support-requests"],[data-route="/admin/monitoring"],[data-route="/school/register"],[data-route^="/school/correction/"]) #page-content>.screen{
  overflow:visible!important;height:auto!important;min-height:100%;padding-bottom:32px;
}

/* V8.443: obsolete school list/editor geometry removed; consolidated globally. */

/* reference-layout-v8.376.css */
/* V8.376 — tighten logo-to-central-field spacing globally while keeping text readable. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  /* Central fields should stay close to the logo. The logo may overlap frames/buttons slightly,
     but text/info must remain fully visible. */
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen{
    padding-top:8px!important;
    box-sizing:border-box!important;
  }
  body:not([data-route="/help/tutorial"]):not(.area-splash) #page-content>.screen>*:not(.tutorial-book-anchor){
    margin-top:8px!important;
  }
  body:not([data-route="/help/tutorial"]):not(.area-splash) .panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .question-shell,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .student-management-panel,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .admin-home-scroll,
  body:not([data-route="/help/tutorial"]):not(.area-splash) .card-management-nav{
    margin-top:8px!important;
  }

  /* Specific large fixed central fields: move them a little upward globally. */
  /* V8.445: obsolete teacher class geometry removed. */

  
  body[data-route^="/admin/"] .admin-home-scroll{top:214px!important}

  /* Keep the first content row readable: add a small inner top padding to management tables. */
  /* V8.445: obsolete teacher class geometry removed. */

  body[data-route^="/teacher/class/"][data-route*="/students"] .student-admin-table-header,
  body[data-route^="/teacher/class/"][data-route*="/students"] #edit-class-form{
    position:relative;
    z-index:1;
  }
}

/* reference-layout-v8.378.css */

/* V8.378 avatar action contract: exactly one CHOOSE button. */
body[data-route="/teacher/avatar"] #teacher-continue-button,
body[data-route="/students/avatar"] #teacher-continue-button,
body[data-route="/quiz/avatar"] #teacher-continue-button{display:none!important}
body[data-route="/teacher/avatar"] #bottom-control-unit>.avatar-save,
body[data-route="/students/avatar"] #bottom-control-unit>.avatar-save,
body[data-route="/quiz/avatar"] #bottom-control-unit>.avatar-save{display:block!important}

/* reference-layout-v8.383.css */
/* V8.383 Tutorial placement contract — 2026-09-28
   Restore V8.381 placement. Book and chapter box are one geometry group.
   Book itself never scrolls; chapter list scrolls internally. Their lower edges
   stay flush and the shared lower edge is JS-anchored 10px above visible footer controls. */
body[data-route="/help/tutorial"] .tutorial-book-screen,
body[data-route="/help/tutorial"] #tutorial-book-layer{overflow:hidden!important;overscroll-behavior:none!important}

/* reference-layout-v8.387.css */
/* V8.387 Tutorial zoom/baseline contract — 2026-09-28
   - No page/layer scrolling on Tutorial.
   - Chapter list alone may scroll internally.
   - Book and Chapter box are structurally bottom-flush and move as one group.
   - Shared visible baseline is set by app.js 10px above the visible bottom controls. */
html:has(body[data-route="/help/tutorial"]),
body[data-route="/help/tutorial"]{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body[data-route="/help/tutorial"] #page-content,
body[data-route="/help/tutorial"] .tutorial-book-screen,
body[data-route="/help/tutorial"] #tutorial-book-layer{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  scrollbar-width:none!important;
}
body[data-route="/help/tutorial"] #page-content::-webkit-scrollbar,
body[data-route="/help/tutorial"] .tutorial-book-screen::-webkit-scrollbar,
body[data-route="/help/tutorial"] #tutorial-book-layer::-webkit-scrollbar{
  display:none!important;
}

/* admin-layout-v8.392.css */
/* Consolidated: school list VISUAL styling only; geometry belongs to V8.444. */
.school-overview-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;color:#ffe080;}
.school-overview-toolbar .simple-nav {position:static;flex:0 0 110px;height:44px;}
.school-summary-list {display:block;overflow-x:auto;padding-bottom:8px;}
.school-summary-row {display:grid;grid-template-columns:200px 130px minmax(330px,1fr);align-items:center;gap:6px;padding:4px 8px;border:2px solid #278fe0;border-radius:10px;background:#0b2b50ee;color:#fff;margin-bottom:4px;}
.school-row-name {min-width:180px;font-size:15px;}
.school-row-status {color:#ffe080;font-size:12px;font-weight:800;}
.school-row-status[data-status="APPROVED"] {color:#6fe38a;}
.school-row-status[data-status="REJECTED"] {color:#ff7973;}
.school-row-actions {display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.school-summary-row .simple-nav {position:static;inset:auto;box-sizing:border-box;min-width:78px!important;max-width:78px!important;width:78px!important;flex:0 0 78px;height:30px!important;padding:2px;border-radius:7px;font-size:10px!important;line-height:1.1;white-space:normal;}
.school-row-actions .simple-nav:disabled {display:block;opacity:.4;cursor:default;}
.school-overview-toolbar .simple-nav {box-sizing:border-box;min-width:94px;max-width:110px;}
@media(max-width:700px){.school-overview-toolbar{font-size:12px}.school-info-screen .admin-registration-row{grid-template-columns:1fr;gap:4px;padding:8px 0}.school-info-screen .admin-registration-meta{flex-wrap:wrap}}

/* V8.444: School/Central Admin geometry is owned by admin-consolidation-v8.444.css. */
/* V8.405: bounded internal scrolling for Tutorial Editor and System & Security. */
body:is([data-route="/admin/tutorial-editor"],[data-route="/admin/system"]) #page-content {overflow:hidden!important;}
body:is([data-route="/admin/tutorial-editor"],[data-route="/admin/system"]) #page-content>.screen.admin-inner-scroll-screen {
 zoom:1!important;width:100%!important;height:100%!important;min-height:0!important;
 box-sizing:border-box!important;padding:8px 0 12px!important;overflow:hidden!important;
}
body:is([data-route="/admin/tutorial-editor"],[data-route="/admin/system"]) #page-content>.screen.admin-inner-scroll-screen>.panel.admin-inner-scroll-panel {
 position:relative!important;left:0!important;right:auto!important;transform:none!important;
 box-sizing:border-box!important;width:min(900px,100%)!important;max-width:100%!important;
 height:100%!important;min-height:0!important;max-height:100%!important;margin:0 auto!important;
 overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
 scrollbar-gutter:stable;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}

/* V8.444: Edit School geometry consolidated. */

/* Compact saved registration checks in the four-row school editor. */
.admin-school-edit-fields .school-input-check-wrap{position:relative;min-width:0}
.admin-school-edit-fields .school-input-check-wrap input{width:100%;box-sizing:border-box;padding-right:30px}
.admin-school-edit-fields .school-field-check{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:24px;padding:0;border:0;background:transparent;color:#c32020;font-size:22px;font-weight:900;line-height:24px;cursor:pointer}
.admin-school-edit-fields .school-field-check[hidden]{display:none}
.admin-school-edit-fields .school-field-check:focus-visible{outline:2px solid #c32020;border-radius:3px}

/* Unknown checks are neutral; red is reserved for an actual mismatch. */
.admin-school-edit-fields .school-field-check.check-unknown{color:#776534}
.admin-registration-row.unverified b{color:#d8cfae!important}
.admin-registration-row.unverified b i{background:#766a4e!important}
.admin-registration-row.mismatch b{color:#ff7973}
.admin-registration-row.mismatch b i{background:#c32020}
.school-approval-status{text-align:center;color:#ffe080;font-weight:700}

/* V8.444: teacher/class editor geometry consolidated. */

/* central-scroll.css */
/* Only overflowing central content gets a scroll area; fixed layers are excluded. */
#page-content .ec-inner-scroll{box-sizing:border-box;overscroll-behavior-y:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}

/* admin-consolidation-v8.444.css */
/* V8.444 CONSOLIDATION — authoritative School/Central Admin geometry. */
body.ec-admin-consolidated #layer-workflow>#page-content{overflow:visible!important}
body.ec-admin-consolidated #layer-workflow>#page-content>.screen{width:125%!important;min-height:125%!important;height:auto!important;overflow:visible!important;align-items:center!important;justify-content:flex-start!important;box-sizing:border-box!important}
body.ec-admin-consolidated #page-content>.screen.ec-admin-central-root,body.ec-admin-consolidated #page-content>.screen>.ec-admin-central-root{position:relative!important;left:0!important;right:auto!important;transform:none!important;translate:0 var(--ec-admin-central-shift,0px)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
body.ec-admin-consolidated .ec-admin-central-field,body.ec-admin-consolidated .ec-admin-central-root:is(.school-teacher-list,.school-class-list,.teacher-editor-list,.class-editor-list,.admin-school-edit-form,.admin-registration-list,.menu-stack,.school-summary-list,.communication-panel,.ranking-display-field,.student-management-panel){width:fit-content!important;min-width:0!important;max-width:calc(125vw - 48px)!important;box-sizing:border-box!important}
body.ec-admin-consolidated .ec-admin-central-field :is(label,legend),body.ec-admin-consolidated .school-compact-row :is(strong,span),body.ec-admin-consolidated :is(.teacher-class-choice,.school-class-teacher-choice),body.ec-admin-consolidated .class-summary-strip>p{overflow-wrap:normal!important;word-break:normal!important}
body.ec-admin-consolidated .school-compact-row :is(strong,span),body.ec-admin-consolidated :is(.teacher-class-choice,.school-class-teacher-choice),body.ec-admin-consolidated .class-summary-strip>p{white-space:nowrap!important}
body.ec-admin-consolidated .school-teacher-list:not(.teacher-editor-list),body.ec-admin-consolidated .school-class-list:not(.class-editor-list){display:grid!important;grid-auto-rows:max-content!important;align-content:start!important;gap:6px!important;padding:8px!important;overflow:auto!important;max-height:var(--ec-admin-central-max,none)!important;scrollbar-width:thin}
body.ec-admin-consolidated .school-compact-row{display:grid!important;grid-template-columns:max-content max-content minmax(max-content,1fr)!important;align-items:center!important;gap:12px!important;width:100%!important;min-width:max-content!important;box-sizing:border-box!important}
body.ec-admin-consolidated .school-compact-row .simple-nav{justify-self:end!important;margin-left:auto!important}
body[data-route="/admin/schools"].ec-admin-consolidated .school-summary-row .school-row-actions{justify-self:end!important;justify-content:flex-end!important;width:max-content!important;margin-left:auto!important}
body.ec-admin-consolidated :is(.teacher-editor-list,.class-editor-list){display:block!important;padding:0!important;overflow:visible!important;max-height:none!important}
body.ec-admin-consolidated :is(.school-teacher-edit,.class-editor-form,.admin-school-edit-form,.school-teacher-form){display:flex!important;flex-direction:column!important;width:fit-content!important;min-width:0!important;max-width:calc(125vw - 48px)!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:0!important;overflow:visible!important;box-sizing:border-box!important}
body.ec-admin-consolidated :is(.teacher-edit-fields,.class-edit-fields,.admin-school-edit-fields,.school-teacher-create-field){flex:0 1 auto!important;width:fit-content!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:var(--ec-admin-field-max,none)!important;margin:0!important;overflow:auto!important;box-sizing:border-box!important}
body.ec-admin-consolidated .class-summary-strip{display:flex!important;flex-flow:row nowrap!important;align-items:baseline!important;gap:10px 24px!important;width:max-content!important;max-width:100%!important;margin:0!important}
body.ec-admin-consolidated :is(.teacher-editor-actions,.class-editor-actions,.school-teacher-create-actions,.admin-school-edit-actions,.admin-school-command-row){display:flex!important;flex:0 0 auto!important;flex-flow:row nowrap!important;justify-content:center!important;align-items:center!important;gap:8px!important;width:max-content!important;max-width:100%!important;min-height:50px!important;margin:8px auto 0!important;padding:0 0 4px!important;overflow:visible!important;box-sizing:border-box!important}
body[data-route="/admin/schools"].ec-admin-consolidated .school-overview-screen{padding-left:24px!important;padding-right:24px!important}
body[data-route="/admin/schools"].ec-admin-consolidated .school-overview-toolbar,body[data-route="/admin/schools"].ec-admin-consolidated .school-summary-list{width:calc(125vw - 48px)!important;max-width:calc(125vw - 48px)!important}
body[data-route="/admin/schools"].ec-admin-consolidated .school-summary-row{width:100%!important;min-width:max-content!important}
#layer-fixes>:is(#school-unassigned-overlay,#global-hint-overlay,#class-hint-overlay,.school-assignment-block-card){position:fixed!important;display:block!important;width:max-content!important;min-width:0!important;max-width:min(280px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;max-height:min(180px,calc(100dvh - 24px))!important;margin:0!important;padding:12px 14px!important;overflow:auto!important;box-sizing:border-box!important;z-index:90!important;transform:rotate(5deg)!important;transform-origin:center!important}
#layer-fixes>:is(#school-unassigned-overlay,#global-hint-overlay,#class-hint-overlay) span{overflow-wrap:normal!important;word-break:normal!important}
@media(max-width:1000px),(hover:none),(pointer:coarse){body.ec-admin-consolidated #layer-workflow>#page-content>.screen{zoom:1!important;width:100%!important;min-height:100%!important}body.ec-admin-consolidated #page-content>.screen.ec-admin-central-root,body.ec-admin-consolidated #page-content>.screen>.ec-admin-central-root,body.ec-admin-consolidated .ec-admin-central-field,body.ec-admin-consolidated :is(.school-teacher-edit,.class-editor-form,.admin-school-edit-form,.school-teacher-form){max-width:calc(100vw - 24px)!important}body.ec-admin-consolidated :is(.teacher-editor-actions,.class-editor-actions,.school-teacher-create-actions,.admin-school-command-row){flex-wrap:wrap!important;width:auto!important}body[data-route="/admin/schools"].ec-admin-consolidated .school-overview-toolbar,body[data-route="/admin/schools"].ec-admin-consolidated .school-summary-list{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}}

/* teacher-consolidation-v8.445.css */
/* V8.445 CONSOLIDATION — authoritative Teacher standard-page geometry.
   Live room/game and Avatar remain frozen special layouts. */
body.ec-teacher-consolidated #page-content{overflow:visible!important}
body.ec-teacher-consolidated #page-content>.screen{box-sizing:border-box!important;overflow:visible!important;align-items:center!important;justify-content:flex-start!important}
body.ec-teacher-consolidated .ec-teacher-central-root{box-sizing:border-box!important;translate:0 var(--ec-teacher-central-shift,0px)!important}
body.ec-teacher-consolidated .ec-teacher-central-field{box-sizing:border-box!important;min-width:0!important;max-width:calc(125vw - 48px)!important}
body.ec-teacher-consolidated :is(.create-class-panel,.assignment-panel,.results-panel,.panel.ec-teacher-central-field){width:fit-content!important;height:auto!important;min-height:0!important}
body.ec-teacher-consolidated :is(.create-class-panel,.assignment-panel,.results-panel,.student-management-panel) :is(label,legend,strong),body.ec-teacher-consolidated :is(.class-choice-grid,.units-grid,.menu-stack) .piatnik>span:last-child{overflow-wrap:normal!important;word-break:normal!important}
body.ec-teacher-consolidated :is(.class-choice-grid,.units-grid,.menu-stack) .piatnik>span:last-child{white-space:nowrap!important}
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
 body.ec-teacher-consolidated #page-content>.screen{zoom:.8!important;width:125%!important;min-height:125%!important}
 body.ec-teacher-consolidated #page-content>.screen>:is(.menu-stack,.class-choice-grid,.units-grid,.create-class-shell,.assignment-panel,.results-panel,.ec-teacher-ordinary-panel){position:relative!important;left:-15.625vw!important;margin-left:auto!important;margin-right:auto!important}
 body.ec-teacher-consolidated .student-management-panel.ec-teacher-central-root{position:fixed!important;left:62.5vw!important;right:auto!important;transform:translateX(-50%)!important;margin-left:0!important;margin-right:0!important}
}
body.ec-teacher-consolidated .create-class-shell{display:flex!important;flex-direction:column!important;align-items:center!important;width:fit-content!important;max-width:calc(125vw - 48px)!important;height:auto!important;min-height:0!important;margin-left:auto!important;margin-right:auto!important;overflow:visible!important}
body.ec-teacher-consolidated .create-class-panel{margin:0!important}
body.ec-teacher-consolidated .create-class-submit-row{flex:0 0 auto!important;margin:8px auto 0!important;overflow:visible!important}
body.ec-teacher-consolidated #edit-class-form:not(.student-management-panel #edit-class-form){width:fit-content!important;max-width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important}
body.ec-teacher-consolidated .student-management-panel{display:flex!important;flex-direction:column!important;width:max-content!important;min-width:0!important;max-width:calc(125vw - 48px)!important;height:auto!important;min-height:0!important;max-height:var(--ec-teacher-central-max,none)!important;padding-top:16px!important;overflow:hidden!important}
body.ec-teacher-consolidated .student-management-panel #edit-class-form{flex:0 0 auto!important}
body.ec-teacher-consolidated .student-management-panel .student-admin-table-header{flex:0 0 auto!important}
body.ec-teacher-consolidated .student-management-panel .student-table-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:auto!important;scrollbar-width:thin}
body.ec-teacher-consolidated .student-management-panel .class-management-actions{overflow:visible!important}
body.ec-teacher-consolidated .student-management-panel .class-management-actions :is(.simple-nav,#print-student-codes){overflow:visible!important;word-break:normal!important;overflow-wrap:normal!important}
body.ec-teacher-consolidated :is(.assignment-panel,.results-panel){max-height:var(--ec-teacher-central-max,none)!important;overflow:auto!important;scrollbar-width:thin}
#layer-fixes>#class-hint-overlay{position:fixed!important;display:block!important;width:max-content!important;min-width:0!important;max-width:min(280px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;max-height:min(180px,calc(100dvh - 24px))!important;margin:0!important;padding:12px 14px!important;overflow:auto!important;box-sizing:border-box!important;z-index:90!important;transform:rotate(5deg)!important;transform-origin:center!important}
@media(max-width:1000px),(hover:none),(pointer:coarse){
 body.ec-teacher-consolidated #page-content>.screen{zoom:1!important;width:100%!important;min-height:100%!important}
 body.ec-teacher-consolidated #page-content>.screen>:is(.menu-stack,.class-choice-grid,.units-grid,.create-class-shell,.assignment-panel,.results-panel,.ec-teacher-ordinary-panel){left:0!important;max-width:calc(100vw - 24px)!important}
 body.ec-teacher-consolidated .ec-teacher-central-field,body.ec-teacher-consolidated .student-management-panel,body.ec-teacher-consolidated .create-class-shell{max-width:calc(100vw - 24px)!important}
 body.ec-teacher-consolidated .student-management-panel.ec-teacher-central-root{position:relative!important;left:0!important;top:auto!important;bottom:auto!important;transform:none!important;margin-left:auto!important;margin-right:auto!important}
}


/* student-consolidation-v8.446.css */
/* V8.446 CONSOLIDATION — authoritative Student standard-page geometry.
   Live game, Training play/questions, Champ Journey play and Avatar remain frozen special layouts. */
body.ec-student-consolidated #page-content{overflow:visible!important}
body.ec-student-consolidated #page-content>.screen{box-sizing:border-box!important;overflow:visible!important;align-items:center!important;justify-content:flex-start!important}
body.ec-student-consolidated .ec-student-central-root{box-sizing:border-box!important;translate:0 var(--ec-student-central-shift,0px)!important}
body.ec-student-consolidated .ec-student-central-field{box-sizing:border-box!important;min-width:0!important;max-width:calc(125vw - 48px)!important;height:auto!important;min-height:0!important}
body.ec-student-consolidated :is(.panel.ec-student-central-field,.student-ranking-field.ec-student-central-field){max-height:var(--ec-student-central-max,none)!important;overflow:auto!important;scrollbar-width:thin}
body.ec-student-consolidated :is(.login-panel,.privacy-policy-panel,.personal-result-panel,.student-ranking-field) :is(label,legend,strong),
body.ec-student-consolidated :is(.menu-stack,.training-menu-layout) .piatnik>span:last-child{overflow-wrap:normal!important;word-break:normal!important}
body.ec-student-consolidated :is(.menu-stack,.training-menu-layout) .piatnik>span:last-child{white-space:nowrap!important}
body.ec-student-consolidated .student-ranking-lines p{flex-wrap:nowrap!important}
body.ec-student-consolidated .student-ranking-lines p>span,
body.ec-student-consolidated .student-ranking-lines p>strong{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
body.ec-student-consolidated .schoolbag-list-screen{overflow:visible!important;padding-bottom:0!important}
body.ec-student-consolidated .schoolbag-list{max-height:var(--ec-student-central-max,none)!important;overflow:auto!important;scrollbar-width:thin;padding-right:4px!important}
body.ec-student-consolidated .schoolbag-friend-list{max-height:var(--ec-student-central-max,62vh)!important;overflow:auto!important;scrollbar-width:thin}
body.ec-student-consolidated .training-menu-layout{height:auto!important;min-height:0!important;overflow:visible!important}
body.ec-student-consolidated .training-menu-layout>.training-mode-menu,
body.ec-student-consolidated .training-menu-layout>.training-unit-grid{left:0!important;translate:none!important}
#layer-fixes>#global-hint-overlay{position:fixed!important;display:block!important;width:max-content!important;min-width:0!important;max-width:min(280px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;max-height:min(180px,calc(100dvh - 24px))!important;margin:0!important;padding:12px 14px!important;overflow:auto!important;box-sizing:border-box!important;z-index:90!important;transform:rotate(5deg)!important;transform-origin:center!important}
#layer-fixes>#global-hint-overlay span{overflow-wrap:normal!important;word-break:normal!important}
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
 body.ec-student-consolidated #page-content>.screen{zoom:.8!important;width:125%!important;min-height:125%!important}
 body.ec-student-consolidated #page-content>.screen>:is(.menu-stack,.training-menu-layout,.schoolbag-list,.ec-student-central-root){position:relative!important;left:-15.625vw!important;margin-left:auto!important;margin-right:auto!important}
 body.ec-student-consolidated #page-content>.screen>.ec-student-central-root:is(.menu-stack,.training-menu-layout,.schoolbag-list){left:-15.625vw!important}
}
@media(max-width:1000px),(hover:none),(pointer:coarse){
 body.ec-student-consolidated #page-content>.screen{zoom:1!important;width:100%!important;min-height:100%!important}
 body.ec-student-consolidated #page-content>.screen>:is(.menu-stack,.training-menu-layout,.schoolbag-list,.ec-student-central-root){left:0!important;max-width:calc(100vw - 24px)!important}
 body.ec-student-consolidated .ec-student-central-field{max-width:calc(100vw - 24px)!important}
 body.ec-student-consolidated .student-ranking-lines p{gap:14px!important}
}

/* Training menu columns own their button widths, including narrow desktop views. */
body.ec-student-consolidated .training-menu-layout{grid-template-columns:minmax(0,270px) minmax(0,510px)!important;column-gap:28px!important;max-height:var(--ec-safe-height,none)!important;overflow:auto!important;padding:6px!important;box-sizing:border-box!important}
body.ec-student-consolidated .training-menu-layout>.training-mode-menu,body.ec-student-consolidated .training-menu-layout>.training-unit-grid{width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important}
body.ec-student-consolidated .training-mode-menu{display:flex!important;flex-direction:column!important;gap:12px!important}
body.ec-student-consolidated :is(.training-mode-menu,.training-unit-grid)>.piatnik{width:100%!important;min-width:0!important;max-width:100%!important;flex-shrink:0!important;padding-left:44px!important;padding-right:8px!important}
body.ec-student-consolidated :is(.training-mode-menu,.training-unit-grid)>.piatnik>span:last-child{width:auto!important;min-width:0!important;max-width:100%!important;white-space:normal!important}


/* gameplay-consolidation-v8.447.css */
/* EC V8.447 — Gameplay / Training / League consolidation.
   This layer does not redesign gameplay. It only protects approved behaviour that
   had been spread across older generic layout rules. HUD, avatar column, question
   field, 2x2 League answer layout, controls and backgrounds remain owned by their
   existing frozen families. */

/* Training-only correction feedback contract:
   correct selection = green handwritten check;
   wrong selection adds the correction circle; all wrong answers fade, while the correct
   answer receives a thin, almost closed yellow hand-drawn correction circle. */
body[data-route^="/training/play/"] .training-question-shell .answer.training-correction-answer::after,
body[data-route="/training/play"] .training-question-shell .answer.training-correction-answer::after{
  content:""!important;
  position:absolute!important;
  inset:8px 11px!important;
  border:2px solid #f4d536!important;
  border-radius:49% 51% 47% 53% / 53% 47% 52% 48%!important;
  transform:rotate(var(--training-correction-tilt,-8deg))!important;
  box-shadow:0 0 0 1px #6f510030!important;
  pointer-events:none!important;
}
body[data-route^="/training/play/"] .training-question-shell .answer.training-correction-answer::before,
body[data-route="/training/play"] .training-question-shell .answer.training-correction-answer::before{
  content:"";
  position:absolute;
  right:8px;
  bottom:8px;
  width:12px;
  height:4px;
  background:#fffaf0;
  transform:rotate(var(--training-correction-tilt,-8deg));
  pointer-events:none;
  z-index:1;
}
/* Do not dim unselected wrong alternatives in Training. */
body[data-route^="/training/play/"] .training-question-shell .answer:not(.selected-wrong):not(.wrong-choice),
body[data-route="/training/play"] .training-question-shell .answer:not(.selected-wrong):not(.wrong-choice){opacity:1;filter:none}

/* admin-consolidation-v8.448.css */
/* V8.448 School Admin correction layer.
   No redesign: this only restores the binding V8.444 UI contract on the
   School Admin screens shown in the 2026-10-02 review. */

/* The 125%-wide pre-zoom desktop stage needs the same viewport-centre
   compensation for direct School/Admin roots as every other ordinary EC root. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body.ec-admin-consolidated #page-content>.screen>.ec-admin-central-root{
    left:-15.625vw!important;
  }
  /* Nested editor roots inherit the compensated parent; do not compensate twice. */
  body.ec-admin-consolidated #page-content>.screen .ec-admin-central-root .ec-admin-central-root{
    left:0!important;
  }
}

/* The runtime may select an editor form nested inside the list. Its vertical
   shift must apply there as well; the former direct-child-only selector did not. */
body.ec-admin-consolidated #page-content>.screen .ec-admin-central-root{
  position:relative!important;
  right:auto!important;
  transform:none!important;
  translate:0 var(--ec-admin-central-shift,0px)!important;
  box-sizing:border-box!important;
}

/* Teacher/Class overview lists are central information fields too. Restore the
   existing EC school-admin field visual instead of leaving naked text on the
   background. Width remains content-driven and rows do not manufacture wraps. */
body.ec-admin-consolidated :is(.school-teacher-list,.school-class-list):not(.teacher-editor-list):not(.class-editor-list){
  position:relative!important;
  width:fit-content!important;
  min-width:0!important;
  max-width:calc(125vw - 48px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:14px 16px!important;
  border:5px solid var(--gold)!important;
  border-radius:22px!important;
  background:#fffaf0!important;
  color:#111!important;
  box-shadow:0 10px 0 #140f08!important;
}
body.ec-admin-consolidated :is(.school-teacher-list,.school-class-list):not(.teacher-editor-list):not(.class-editor-list) .school-compact-row{
  color:#111!important;
  padding:6px 8px!important;
  border-bottom:1px solid #d9caa8!important;
}
body.ec-admin-consolidated :is(.school-teacher-list,.school-class-list):not(.teacher-editor-list):not(.class-editor-list) .school-compact-row:last-child{
  border-bottom:0!important;
}

/* Logo is the decoration at the top border on ordinary School Admin fields.
   Do not let the generic question suits become content underneath the logo. */
body[data-route="/school/teachers/create"].ec-admin-consolidated .school-teacher-create-field>.question-suits{
  display:none!important;
}

/* V8.450: both Messages tabs share the narrower, full safe-height field. */
body[data-route="/communication"].ec-admin-consolidated .communication-panel{
  width:min(80ch,calc(125vw - 48px))!important;
  min-width:0!important;
  max-width:calc(125vw - 48px)!important;
  height:var(--ec-admin-central-max,auto)!important;
  min-height:0!important;
}
body[data-route="/communication"].ec-admin-consolidated .communication-panel .message-help-pane{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  overflow:auto!important;
}
body[data-route="/communication"].ec-admin-consolidated .communication-panel .help-review-list{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

@media(max-width:1000px),(hover:none),(pointer:coarse){
  body.ec-admin-consolidated :is(.school-teacher-list,.school-class-list):not(.teacher-editor-list):not(.class-editor-list){
    max-width:calc(100vw - 24px)!important;
  }
  body[data-route="/communication"].ec-admin-consolidated .communication-panel{
    width:calc(100vw - 28px)!important;
    min-width:0!important;
    height:var(--ec-admin-central-max,auto)!important;
    min-height:0!important;
  }
}

/* V8.449: reviewed teacher fields and controls, in the same owning rule group. */
body.ec-admin-consolidated :is(.teacher-editor-actions,.school-teacher-create-actions){margin-top:20px!important}
body.ec-admin-consolidated .school-teacher-edit>.teacher-edit-fields{width:100%!important}
body.ec-admin-consolidated .teacher-access-status{background:transparent!important;color:#4a2b12!important;opacity:1!important;font-weight:600}
body.ec-admin-consolidated .teacher-editor-actions{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;width:100%!important}
body.ec-admin-consolidated .teacher-editor-actions>.simple-nav{width:100%!important;min-width:max-content!important;height:46px!important;box-sizing:border-box!important;padding:0 12px!important}
body.ec-admin-consolidated .school-teacher-create-field{padding-top:40px!important;padding-bottom:28px!important}
body[data-route="/communication"].ec-admin-consolidated .communication-panel{padding-top:36px!important;padding-bottom:20px!important}
.message-tabs{justify-content:flex-start;flex:0 0 auto;flex-wrap:wrap}
.message-tabs>.simple-nav{position:static!important;flex:0 0 auto!important;width:max-content!important;min-width:0!important;padding:0 10px!important;height:34px!important;border:2px solid #ffe16a!important;border-radius:8px!important;background:linear-gradient(#48a8fa,#1266b5)!important;color:#fff!important;font-size:12px!important;text-transform:uppercase}
.message-tabs>.simple-nav.active{background:linear-gradient(#287abc,#124371)!important}
.message-empty-questions{color:#34270f;text-align:center;margin:24px 0}
#layer-fixes>#global-hint-overlay.teacher-action-hint{pointer-events:none;font-size:14px!important;line-height:1.3!important;padding:10px 12px!important;color:#34270f}
#global-hint-overlay.teacher-action-hint p{margin:0}
@media(max-width:700px){body.ec-admin-consolidated .teacher-editor-actions{grid-auto-flow:row!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}body.ec-admin-consolidated .teacher-editor-actions>.simple-nav{min-width:0!important;white-space:normal!important}}

/* workflow-v8.452.css */
/* Corrected workflows have a single unscaled viewport stage. */
body.ec452-workflow #layer-workflow>#page-content{overflow:visible!important}
body.ec452-workflow #layer-workflow>#page-content>.screen{position:fixed!important;inset:var(--ec452-top,220px) 16px auto!important;width:calc(100vw - 32px)!important;height:var(--ec452-height,60vh)!important;min-height:0!important;max-height:none!important;zoom:1!important;transform:none!important;translate:none!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;overflow:auto!important;box-sizing:border-box!important}
body.ec452-workflow #page-content>.screen>:is(.student-management-panel,.create-class-shell,.communication-panel,.assignment-panel,.ranking-board,.ranking-card){position:relative!important;inset:auto!important;transform:none!important;translate:none!important;zoom:1!important;margin:0 auto!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body.ec452-workflow .student-management-panel{width:min(1150px,100%)!important;height:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;flex-direction:column!important;border:5px solid #ffbf00!important;border-radius:26px!important;padding:18px!important;overflow:hidden!important}
body.ec452-workflow .student-management-panel .student-table-scroll{flex:1 1 auto!important;min-height:0!important;overflow:auto!important}
body.ec452-workflow .student-management-panel #edit-class-form{flex:0 0 auto!important;width:100%!important;display:flex!important;flex-direction:column!important;gap:12px!important;margin-bottom:12px!important}
body.ec452-workflow .student-management-panel #edit-class-form>.form-grid{display:grid!important;grid-template-columns:80px 170px 140px!important;align-self:center!important;align-items:end!important;width:max-content!important;max-width:100%!important;margin:0 auto!important;gap:12px!important}
body.ec452-workflow .student-management-panel #edit-class-form>.form-grid .field{width:auto!important;min-width:0!important}
body.ec452-workflow .student-management-panel #edit-class-form>.form-grid label{white-space:nowrap!important}
body.ec452-workflow .student-management-panel #edit-class-form>.form-grid input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
body.ec452-workflow .class-management-actions{display:flex!important;flex-flow:row wrap!important;justify-content:center!important;gap:8px!important;min-width:0!important}
body.ec452-workflow .class-management-actions>*{flex:0 0 140px!important;width:140px!important;min-width:140px!important;height:46px!important}
body.ec452-workflow .student-management-panel .question-suits,body.ec452-workflow .communication-panel .question-suits{display:none!important}
body.ec452-workflow .create-class-shell{width:fit-content!important;height:auto!important;overflow:visible!important}
body.ec452-workflow .create-class-panel{border:5px solid #ffbf00!important;border-radius:26px!important;margin:0!important;max-width:100%!important}
#layer-fixes>#class-hint-overlay:empty,#layer-fixes>#class-hint-overlay:not(.visible){display:none!important}
body.ec452-workflow .communication-panel{width:var(--ec-message-width,min(1080px,100%))!important;height:100%!important;min-height:0!important;max-height:100%!important;border:5px solid #ffbf00!important;border-radius:26px!important;padding:var(--ec-message-padding-top,16px) 16px 12px var(--ec-message-padding-left,16px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:rgba(12,14,18,.8)!important}
body.ec452-workflow .communication-layout{flex:1!important;min-height:0!important;height:auto!important}
body.ec452-workflow .message-tabs{display:flex!important;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important;flex:0 0 auto!important;margin:0 0 12px!important}
body.ec452-workflow .message-tabs .simple-nav{width:auto!important;min-width:0!important;flex:0 0 auto!important;padding:8px 14px!important}
body.ec452-workflow :is(.message-help-pane,.message-requests-pane){min-height:0!important;overflow:auto!important;flex:1!important}
body.ec452-workflow .message-requests-pane .screen{padding:0!important;min-height:0!important;height:auto!important;width:100%!important;zoom:1!important}
body.ec452-workflow :is(.message-help-pane,.message-requests-pane)>h2,body.ec452-workflow .message-requests-pane :is(h2,th){color:#ffcf43!important}
body.ec452-workflow .message-requests-pane :is(td,span,strong,b),body.ec452-workflow .message-empty-questions{color:#fff6de!important}
body.ec452-workflow .message-requests-pane .assignment-card{color:#fff6de!important;background:rgba(0,0,0,.3)!important}
body.ec452-workflow .assignment-panel{width:100%!important;border:0!important;padding:8px!important;background:transparent!important;box-shadow:none!important}
body.ec452-workflow .ranking-board{width:min(900px,100%)!important;max-width:900px!important;height:100%;display:flex;flex-direction:column;min-height:0}
body.ec452-workflow .ranking-card{border:5px solid #ffbf00;border-radius:24px;background:rgba(10,15,20,.85);padding:16px;min-width:0;overflow:auto;box-sizing:border-box;width:100%;max-height:100%}
body.ec452-workflow .ranking-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;flex:1;min-height:0}
body.ec452-workflow .ranking-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
/* Ranking menus use their own class, outside legacy menu-stack positioning. */
body.ec452-workflow #page-content>.screen>.ranking-menu{position:relative!important;left:0!important;right:auto!important;transform:none!important;translate:none!important;zoom:1!important;align-self:center!important;margin:0 auto!important;padding:0!important;width:232.285px!important;max-width:100%!important;min-width:0!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;overflow:visible!important}
body.ec452-workflow #page-content .ranking-menu .piatnik{box-sizing:border-box!important;width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important;max-height:58px!important;border-width:4px!important;border-radius:16px!important;padding:0 10px!important;margin:0!important;transform:none!important;translate:none!important;left:0!important;zoom:1!important;grid-template-columns:38px minmax(0,1fr) 12px!important}
body.ec452-workflow #page-content .ranking-menu .piatnik>span:last-child{font-size:21px!important;white-space:nowrap!important}
body.ec452-workflow #page-content .ranking-menu .piatnik .suit{width:30px!important;height:30px!important;left:16px!important}
body.ec452-workflow #page-content>.ranking-screen>.ranking-card{width:min(900px,100%)!important}
body.ec452-workflow .ranking-board>.ranking-card{flex:0 1 auto;min-height:0}
/* Local rankings reserve a compact selector row beneath the full-height card. */
body.ec452-workflow .ranking-local-board{height:100%!important;gap:8px}
body.ec452-workflow .ranking-local-board>.ranking-card{flex:1 1 0;min-height:0;padding-top:24px}
body.ec452-workflow .ranking-local-board>.ranking-card>h2{margin-top:0}
body.ec452-workflow .ranking-local-board>.ranking-tabs{flex:0 0 auto;margin:0;gap:8px;align-self:center;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%}
body.ec452-workflow .ranking-local-board>.ranking-tabs>.simple-nav{box-sizing:border-box!important;width:100%!important;min-width:var(--ranking-control-width,80px)!important;white-space:nowrap!important;height:var(--ranking-control-height,40px)!important;min-height:0!important;padding:0 8px!important;font-size:var(--ranking-control-font,16px)!important;border-width:var(--ranking-control-border,2px)!important;border-radius:var(--ranking-control-radius,10px)!important;line-height:1!important;display:flex;align-items:center;justify-content:center}
body.ec452-workflow #page-content .ranking-league-board{width:min(1500px,100%)!important;max-width:1500px!important}
body.ec452-workflow .hidden{display:none!important}
@media(max-width:1000px){body.ec452-workflow #page-content>.screen>.ranking-menu{width:231.8125px!important}body.ec452-workflow #page-content .ranking-menu .piatnik>span:last-child{font-size:21px!important}body.ec452-workflow .ranking-columns{grid-template-columns:1fr}body.ec452-workflow .ranking-card{padding:10px}body.ec452-workflow .student-management-panel{padding:10px!important}}

body.ec452-workflow .ranking-avatar{width:34px!important;height:40px!important;object-fit:contain;vertical-align:middle}
body.ec452-workflow .season-ranking-table{font-size:13px;min-width:570px;width:100%}
body.ec452-workflow .ranking-board>h2{text-align:center;margin:0 0 12px;color:#ffcf43}
body.ec452-workflow .create-class-panel label{white-space:nowrap}
body.ec452-workflow .create-class-panel{width:560px!important}
@media(max-width:1000px){body.ec452-workflow .ranking-board{height:auto}body.ec452-workflow .ranking-columns{display:flex;flex-direction:column}body.ec452-workflow .ranking-card{max-height:none}body.ec452-workflow .class-management-actions>*{flex-basis:125px!important;width:125px!important;min-width:125px!important}}

/* Keep the reference 80% desktop button size on the unscaled ranking stage. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){body.ec452-workflow #page-content>.screen>.ranking-menu{zoom:.8!important}}
/* Match the card bounds of views with the selector row, without adding dummy controls. */
body.ec452-workflow .ranking-students-board{padding-bottom:calc(var(--ranking-control-height,40px) + 8px)}

/* Messages uses a fixed outer rim; only each content pane scrolls. */
body[data-route="/communication"].ec452-workflow #layer-workflow>#page-content>.screen{overflow:hidden!important}
body.ec452-workflow .communication-main,body.ec452-workflow .communication-thread{min-height:0!important;overflow:hidden!important}
body.ec452-workflow .communication-sidebar,body.ec452-workflow .communication-messages{overflow:auto!important;min-height:0!important}

/* ui-fixes-v8.460.css */
/* V8.460 — binding late UI fixes. */
/* Hint/info cards keep the agreed soft, gentle shadow globally. */
#layer-fixes>#school-unassigned-overlay,
#layer-fixes>#global-hint-overlay,
#layer-fixes>#class-hint-overlay,
#layer-fixes>.school-assignment-block-card,
.piatnik-hint-overlay,
.class-hint-overlay{
  box-shadow:3px 7px 20px rgba(0,0,0,.28)!important;
}
/* Teacher Lobby only: retain original control look, compact widths, fixed 14px gaps. */
body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #lobby-quit{right:258px!important;width:108px!important;min-width:108px!important;}
body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #global-next{right:136px!important;width:108px!important;min-width:108px!important;}
body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) .home{right:14px!important;width:108px!important;min-width:108px!important;}
@media(max-width:900px){
  body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #lobby-quit{right:192px!important;width:80px!important;min-width:80px!important;}
  body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #global-next{right:100px!important;width:80px!important;min-width:80px!important;}
  body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) .home{right:8px!important;width:80px!important;min-width:80px!important;}
}

/* jokers-v8.493.css */
/* Shared 50:50 presentation for live games and the admin preview. */
.answer.joker-faded-answer,.answer.joker-hidden-answer{opacity:.45!important;visibility:visible!important;pointer-events:none;filter:saturate(.55);transition:opacity .4s ease,filter .4s ease}
.answer.joker-faded-answer .answer-copy,.answer.joker-faded-answer .ans-suit,.answer.joker-hidden-answer .answer-copy,.answer.joker-hidden-answer .ans-suit{opacity:1;visibility:visible}

/* live-messages-v8.496.css */
/* V8.492: suit silhouettes and softly separating upward motion. */
.live-message-layer{position:fixed;inset:0;z-index:25;overflow:hidden;pointer-events:none}
.live-message-float{position:absolute;left:0;top:0;width:128px;height:116px;pointer-events:none;opacity:0;will-change:transform,opacity}
.live-message-piatnik{position:relative;width:100%;height:100%;color:#101010}
.live-message-heart{--lm-rim:var(--red);--copy-top:42%;--copy-width:64px;--copy-height:40px}
.live-message-spade{--lm-rim:var(--green);--copy-top:56%;--copy-width:58px;--copy-height:36px}
.live-message-diamond{--lm-rim:var(--yellow);--copy-top:50%;--copy-width:52px;--copy-height:34px}
.live-message-circle{--lm-rim:var(--blue);--copy-top:50%;--copy-width:76px;--copy-height:58px}
.live-message-suit{position:absolute;inset:0;filter:drop-shadow(0 2px 0 #140f08) drop-shadow(0 3px 3px #0004)}
.live-message-suit svg{width:100%;height:100%;overflow:visible}
.live-message-suit svg path,.live-message-suit svg circle{fill:#fffaf0;stroke:var(--lm-rim);stroke-width:.65;stroke-linejoin:round}
.live-message-copy{position:absolute;left:50%;top:var(--copy-top);width:var(--copy-width);transform:translate(-50%,-50%);text-align:center;color:#101010;font-family:Montserrat,"Noto Color Emoji",Arial,sans-serif;text-shadow:none}
.live-message-text{display:block;font-size:14px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.student-live-message-composer{position:fixed;z-index:45;box-sizing:border-box;margin:0;padding:9px 12px 8px;border:4px solid var(--gold);border-radius:16px;background:linear-gradient(#fffdf8,#f2eee5);box-shadow:0 5px 0 #140f08,0 9px 17px #0004;color:#101010;pointer-events:auto}
.student-live-message-row{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px;grid-template-rows:28px 28px;gap:6px;align-items:center}
.student-live-message-row textarea{grid-column:1;grid-row:1/3;width:100%;height:62px;min-width:0;box-sizing:border-box;resize:none;border:1px solid #b69b54;border-radius:7px;padding:8px 6px;background:#fffaf0;color:#101010;font:600 13px/22px Montserrat,Arial,sans-serif}
.student-live-message-counter{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;border:1px solid #b69b54;border-radius:50%;background:#ffdf7b;color:#101010;font:800 12px/1 Montserrat,Arial,sans-serif}
.student-live-message-row .simple-nav{grid-column:2/4;grid-row:2;position:static!important;min-width:0!important;width:100%!important;height:28px!important;padding:0 4px!important;font-size:10px!important}
.student-live-message-composer small{display:block;margin-top:5px;color:#101010;font:500 9px/1.2 Montserrat,Arial,sans-serif;text-align:right}
.student-live-message-composer small:empty{display:none}
.live-message-smiley{grid-column:2;grid-row:1;position:static;width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#674900;font:22px/1 Arial,sans-serif;cursor:pointer;padding:0}
.live-message-smiley:hover,.live-message-smiley:focus-visible{background:#ffe7a1;outline:2px solid #b68a20;outline-offset:-2px}
.live-message-symbol-popup{max-height:min(320px,60vh);overflow-y:auto;box-sizing:border-box;position:absolute;bottom:100%;left:-4px;right:-4px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:9px;border:3px solid var(--gold);border-radius:13px;background:#fffaf0;box-shadow:0 5px 14px #0003;z-index:1}
.live-message-symbol-popup[hidden]{display:none}
.live-message-symbol-popup button{min-width:0;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:#101010;font:21px/1 "Noto Color Emoji",Arial,sans-serif;cursor:pointer}
.live-message-symbol-popup button:hover,.live-message-symbol-popup button:focus-visible{background:#ffe7a1;outline:2px solid #b68a20;outline-offset:-2px}

.live-message-symbol-only{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--symbol-cols),1fr);align-content:center;justify-items:center;align-items:center;gap:0;filter:drop-shadow(0 3px 4px #0004);color:#101010}
.live-message-symbol-only span{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:var(--symbol-size);line-height:1.12;text-align:center}

.live-message-emoji{width:1em;height:1em;display:inline-block;object-fit:contain;vertical-align:-.12em}
.live-message-symbol-only .live-message-emoji{width:var(--symbol-size);height:var(--symbol-size);vertical-align:middle}
.live-message-smiley .live-message-emoji,.live-message-symbol-popup .live-message-emoji{width:22px;height:22px;vertical-align:middle}

/* management-v8.498.css */
/* V8.498: scoped administration surface; existing HUD and controls stay fixed. */
.ec-management{width:min(1050px,88vw);height:calc(100dvh - 245px);display:flex;flex-direction:column;box-sizing:border-box;min-height:180px;margin-top:24px;padding:16px!important;overflow:hidden}
.ec-management .management-toolbar,.ec-management .management-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ec-management .management-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.ec-management .simple-nav{position:static!important;width:auto!important;min-width:100px;height:36px!important;padding:5px 12px!important;font-size:14px!important;margin:0!important}
.ec-management .management-content{overflow-y:auto;flex:1;min-height:0;padding:8px 4px}
.ec-management article{border-top:1px solid #b28b42;padding:10px 0}
.ec-management h2{font-size:19px;margin:8px 0}.ec-management p{margin:8px 0}
.ec-management input,.ec-management select{max-width:100%;font-size:16px;padding:6px;box-sizing:border-box}
.ec-management .management-reason input{width:100%}.ec-management .management-reason{border-top:1px solid #b28b42;padding-top:8px}
.ec-management .management-result{padding:8px 0;border-bottom:1px solid #b28b4244}
@media(max-width:650px){.ec-management{width:92vw;height:calc(100dvh - 225px);padding:10px!important}.ec-management .simple-nav{min-width:75px;font-size:12px!important}.ec-management .management-filters label{max-width:100%}}

.training-league-picker{display:flex;gap:8px;align-items:center;justify-content:center;color:#ffe18b;font-weight:bold}.training-league-picker select{font:inherit;padding:5px 10px;border-radius:8px;background:#fff7d8;color:#111}

.ec-management{position:fixed!important;top:180px!important;bottom:84px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;height:auto!important;margin:0!important;max-height:none!important}
/* Training jokers are an overlay; question and answer geometry is unchanged. */
#page-content .training-question-shell .league-joker-bar button{width:117.5px;max-width:calc((100% - 12px)/3);height:42.5px;border:2px solid #ffe16a;border-radius:10px;background:linear-gradient(#fff6c1,#e5c052);color:#17120a;font:800 11px/1 Montserrat,Arial,sans-serif;cursor:pointer}
#page-content .training-question-shell .league-joker-bar button:disabled{opacity:.4;cursor:default}

/* The shared workflow owns the stage; no fixed child inside a zoomed stage. */
body.ec452-workflow #layer-workflow>#page-content>.screen>.ec-management{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;translate:none!important;zoom:1!important;width:min(1050px,100%)!important;max-width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;margin:0 auto!important;flex:0 1 auto!important;overflow:hidden!important}

/* central-frame-v8.500.css */
/* One outer rim. Compact content and independent action rows; scroll only on overflow. */
body.ec500-framed #layer-workflow>#page-content{overflow:visible!important}
body.ec500-framed #layer-workflow>#page-content::before{content:"";position:fixed;left:var(--ec500-left);top:var(--ec500-top);width:var(--ec500-width);height:var(--ec500-height);box-sizing:border-box;border:5px solid #ffbf00;border-radius:26px;background:rgba(12,14,18,.8);pointer-events:none}
body.ec500-framed #layer-workflow>#page-content>.screen{position:static!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0!important;zoom:1!important;transform:none!important;translate:none!important;overflow:visible!important;padding:0!important;margin:0!important}
body.ec500-framed #layer-workflow>#page-content>.screen>.ec500-frame-content{position:fixed!important;left:var(--ec500-text-left)!important;top:var(--ec500-text-top)!important;right:auto!important;bottom:auto!important;width:var(--ec500-text-width)!important;max-width:var(--ec500-text-width)!important;min-width:0!important;height:var(--ec500-text-height)!important;min-height:0!important;max-height:var(--ec500-text-height)!important;zoom:1!important;transform:none!important;translate:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:auto!important;box-sizing:border-box!important;overscroll-behavior:contain;scrollbar-width:thin}
body.ec500-framed #page-content>.screen>.ec-management{display:flex!important;overflow:hidden!important}
body.ec500-framed #page-content>.screen>.communication-panel{display:flex!important;overflow:hidden!important}

/* Decorative suits belong exclusively to live quiz question cards. */
#page-content .question-suits{display:none!important}
#page-content .question-card>.question-suits{display:flex!important}

/* Schools: one content root contains the toolbar and list in document flow. */
body.ec500-framed #layer-workflow>#page-content>.school-overview-screen>.school-overview-content{display:flex!important;flex-direction:column!important;gap:12px!important;overflow:hidden!important}
body.ec500-framed #page-content .school-overview-content>.school-overview-toolbar,
body.ec500-framed #page-content .school-overview-content>.school-summary-list{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;translate:none!important;zoom:1!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
body.ec500-framed #page-content .school-overview-content>.school-overview-toolbar{flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;height:auto!important;overflow:visible!important}
body.ec500-framed #page-content .school-overview-content>.school-summary-list{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:auto!important}
body.ec500-framed #page-content .school-overview-toolbar [data-admin-school-view]{position:static!important;inset:auto!important;transform:none!important;translate:none!important;margin:0!important;flex:0 0 auto!important}
body.ec500-framed #page-content #school-approval-message:empty{display:none!important}

/* Edit Class: all information and actions fit in one row; labels may use two lines. */
body.ec452-workflow #page-content .class-header-row{display:flex!important;align-items:flex-end!important;gap:8px!important;min-width:0!important;width:100%!important;padding:0 0 8px!important;box-sizing:border-box!important;overflow:visible!important;container-type:inline-size!important}
body.ec452-workflow #page-content .class-header-row>.form-grid{display:grid!important;grid-template-columns:minmax(0,.6fr) minmax(0,1.2fr) minmax(0,.75fr)!important;gap:6px!important;align-items:end!important;flex:0 0 27%!important;min-width:0!important;margin:0!important;width:27%!important}
body.ec452-workflow #page-content .class-header-row .field{min-width:0!important;width:auto!important}
body.ec452-workflow #page-content .class-header-row label{font-size:clamp(9px,1.05cqw,11px)!important;white-space:normal!important;line-height:1.15!important;letter-spacing:.03em!important}
body.ec452-workflow #page-content .class-header-row input{width:100%!important;min-width:0!important;height:42px!important;box-sizing:border-box!important;padding:4px!important;font-size:clamp(12px,1.6cqw,17px)!important}
body.ec452-workflow #page-content .class-header-row>.class-management-actions{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;flex:1 1 0!important;min-width:0!important;width:0!important;gap:6px!important;margin:0!important;align-items:end!important}
body.ec452-workflow #page-content .class-header-row>.class-management-actions>*{width:100%!important;min-width:0!important;max-width:100%!important;height:42px!important;padding:2px 4px!important;font-size:clamp(9px,1.05cqw,11px)!important;line-height:1.15!important;white-space:normal!important;box-sizing:border-box!important;margin:0!important;letter-spacing:0!important}
body.ec452-workflow #page-content .class-header-row>#class-msg:empty{display:none!important}

/* Class selection has one horizontal geometry owner; no legacy viewport offset. */
body #layer-workflow>#page-content>.screen:has(>.class-choice-grid){zoom:1!important;width:100%!important;min-height:100%!important;margin-left:0!important;margin-right:0!important;align-items:center!important}
body #layer-workflow>#page-content>.screen>.class-choice-grid{position:relative!important;left:0!important;right:auto!important;transform:none!important;translate:none!important;margin-left:auto!important;margin-right:auto!important;width:min(900px,100%)!important;max-width:100%!important;justify-content:center!important}
@media(min-width:1001px) and (hover:hover) and (pointer:fine){body #layer-workflow>#page-content>.screen>.class-choice-grid{zoom:.8!important}}
/* The global outer rim replaces inner decorative ranking rims. */
body.ec500-framed #page-content .ranking-board .ranking-display-field,body.ec500-framed #page-content .ranking-board .ranking-card{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;min-width:0!important;max-width:100%!important}

/* Edit Class table: shared column geometry for the fixed heading and scroll body. */
body.ec500-framed #page-content .student-admin-table{table-layout:fixed!important;width:100%!important}
body.ec500-framed #page-content .student-admin-table :is(th,td){box-sizing:border-box!important;padding-left:6px!important;padding-right:6px!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.ec500-framed #page-content .student-admin-table :is(th,td):nth-child(1){width:74px!important;max-width:none!important;padding-left:0!important}
body.ec500-framed #page-content .student-admin-table th:nth-child(1){font-size:11px!important;overflow-wrap:normal!important;word-break:normal!important}
body.ec500-framed #page-content .student-admin-table :is(th,td):nth-child(2){width:clamp(90px,var(--student-nickname-width,14ch),22%)!important}
body.ec500-framed #page-content .student-admin-table :is(th,td):nth-child(3){width:auto!important}
body.ec500-framed #page-content .student-admin-table :is(th,td):last-child{width:clamp(180px,27%,260px)!important;padding-right:0!important}
body.ec500-framed #page-content .student-admin-table .student-access-code{font-size:15px!important;line-height:1.4!important;letter-spacing:.02em!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.ec500-framed #page-content .student-row-actions{display:flex!important;flex-wrap:wrap!important;gap:5px!important;width:100%!important;justify-content:flex-start!important}
body.ec500-framed #page-content .student-row-actions .student-row-action{position:static!important;flex:1 1 54px!important;min-width:0!important;width:auto!important;max-width:100%!important;height:36px!important;padding:2px 4px!important;font-size:10px!important;line-height:1.1!important;white-space:normal!important;box-sizing:border-box!important}
body.ec500-framed #page-content .student-row-actions .student-remove{flex:0 0 28px!important;width:28px!important;font-size:18px!important}

/* Whole forms, including pagination and actions, share the content scroll area. */
body.ec500-framed .school-registration-content .school-registration-form{position:static!important;transform:none!important;translate:none!important;zoom:1!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;margin:0!important;border:0!important;box-shadow:none!important;box-sizing:border-box!important;padding:12px!important}
body.ec500-framed .school-registration-content .school-registration-pagination{position:static!important;margin:12px auto!important}
body.ec500-framed .class-management-overview>.menu-stack{position:static!important;left:auto!important;transform:none!important;translate:none!important;zoom:1!important;margin:0 auto 20px!important}
body.ec500-framed .class-management-overview>.panel{border:0!important;box-shadow:none!important;width:100%!important;box-sizing:border-box!important}

/* V8.519: all framed administration surfaces share this content policy. */
body.ec500-framed #layer-workflow>#page-content>.screen>.ec519-measure{height:auto!important;max-height:none!important;overflow:visible!important}
body.ec500-framed #page-content .ec500-frame-content :is(.school-admin-piatnik-field,.admin-backup-box,.panel,.ranking-display-field,.ranking-card){border:0!important;border-radius:0!important;box-shadow:none!important;max-width:100%!important;box-sizing:border-box!important}
body.ec500-framed #page-content .ec500-frame-content :is(.school-admin-piatnik-field,.admin-backup-box){margin:0!important;padding:10px!important}
body.ec500-framed #page-content .ec500-frame-content .panel{margin:0!important;padding:8px!important}
body.ec500-framed #page-content .ec500-frame-content .form-grid{gap:8px 14px!important}
body.ec500-framed #page-content .ec500-frame-content .field{min-width:0!important;gap:4px!important}
body.ec500-framed #page-content .ec500-frame-content .field label{font-size:12px!important;line-height:1.25!important;letter-spacing:.035em!important;white-space:normal!important}
body.ec500-framed #page-content .ec500-frame-content .field :is(input,select){min-height:36px!important;height:36px!important;padding:5px 9px!important;font-size:16px!important;box-sizing:border-box!important;min-width:0!important}
body.ec500-framed #page-content .ec500-frame-content .field textarea{min-height:60px!important;padding:7px 9px!important;font-size:15px!important;line-height:1.35!important;box-sizing:border-box!important}
body.ec500-framed #page-content .ec500-frame-content :is(h2,h3){margin-top:6px;margin-bottom:10px}
body.ec500-framed #page-content .ec500-frame-content .actions{gap:8px!important;margin-top:10px!important;flex-wrap:wrap!important}
body.ec500-framed #page-content .ec500-frame-content .actions .simple-nav{position:static!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:normal!important}

/* School edit: the form fields scroll only if needed; all seven actions stay out of that scroll. */
body.ec500-framed #layer-workflow>#page-content>.screen>.admin-school-edit-form{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:hidden!important}
body.ec500-framed #page-content .admin-school-edit-form>.admin-school-edit-fields{flex:0 1 auto!important;min-height:0!important;width:100%!important;overflow:auto!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#fffaf0!important}
body.ec500-framed #page-content .admin-school-edit-form>#admin-school-edit-message:empty{display:none!important}
body.ec500-framed #page-content .admin-school-command-row{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:7px!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;margin:0!important;padding:4px 0!important;overflow:visible!important;align-items:stretch!important}
body.ec500-framed #page-content .admin-school-command-row .simple-nav{position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;height:44px!important;margin:0!important;padding:3px 5px!important;font-size:11px!important;line-height:1.15!important;white-space:normal!important;box-sizing:border-box!important}

/* Six compact field pairs, including School Enrolment at bottom right. */
body.ec500-framed #page-content .admin-school-edit-form>.admin-school-edit-fields{padding:8px 10px!important;max-height:none!important}
body.ec500-framed #page-content .admin-school-edit-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 12px!important}
body.ec500-framed #page-content .admin-school-edit-form .field{gap:3px!important;margin:0!important;padding:0!important;grid-column:auto!important}
body.ec500-framed #page-content .admin-school-edit-form .field label{font-size:11px!important;line-height:1.15!important;letter-spacing:0!important;margin:0!important;color:#fffaf0!important}
body.ec500-framed #page-content .admin-school-edit-form .field input{height:30px!important;min-height:30px!important;padding:3px 30px 3px 8px!important;font-size:14px!important}
body.ec500-framed #page-content .admin-school-edit-form .admin-school-command-row .simple-nav{height:38px!important;font-size:10px!important}

/* Schools: compact status and four controls in one unbroken row. */
body.ec500-framed #page-content .school-summary-list{gap:6px!important;padding:0!important}
body.ec500-framed #page-content .school-summary-row{display:grid!important;grid-template-columns:minmax(130px,1fr) max-content max-content!important;gap:8px!important;min-width:0!important;width:100%!important;padding:5px 8px!important;box-sizing:border-box!important}
body.ec500-framed #page-content .school-row-name{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:15px!important}
body.ec500-framed #page-content .school-row-status{font-size:12px!important;width:max-content!important;min-width:0!important;max-width:110px!important}
body.ec500-framed #page-content .school-row-actions{display:grid!important;grid-template-columns:repeat(4,72px)!important;gap:6px!important;width:max-content!important;min-width:0!important;max-width:none!important;flex-wrap:nowrap!important;justify-content:end!important}
body.ec500-framed #page-content .school-row-actions .simple-nav{width:72px!important;min-width:0!important;height:32px!important;font-size:10px!important;padding:3px!important;margin:0!important}
body.ec500-framed #page-content .school-approval-reason{grid-column:1/-1!important;font-size:12px!important}
body.ec500-framed #page-content .school-overview-toolbar{font-size:15px!important}

/* Tutorial editor: both languages share rows; save is outside the scrolling fields. */
body.ec500-framed #layer-workflow>#page-content>.screen>.tutorial-editor-panel{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:hidden!important}
body.ec500-framed #page-content .tutorial-editor-panel>h2{flex:0 0 auto!important;font-size:21px!important;margin:0!important}
body.ec500-framed #page-content #tutorial-editor-form{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1 1 auto!important;gap:8px!important}
body.ec500-framed #page-content .tutorial-editor-fields{min-height:0!important;overflow:auto!important;flex:0 1 auto!important;padding:0 3px!important}
body.ec500-framed #page-content .tutorial-language-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin-top:8px!important}
body.ec500-framed #page-content .tutorial-language-grid fieldset{min-width:0!important;border:0!important;padding:0!important;margin:0!important;display:grid!important;gap:7px!important;align-content:start!important}
body.ec500-framed #page-content .tutorial-language-grid legend{font-weight:700;font-size:14px;color:#ffe080;padding:0 0 5px}
body.ec500-framed #page-content #tutorial-editor-form>.actions{flex:0 0 auto!important;margin:0!important;padding:3px 0!important}
body.ec500-framed #page-content #tutorial-editor-message:empty{display:none!important}
body.ec500-framed #page-content .tutorial-topic-browser{flex:0 0 auto!important;font-size:14px!important}
body.ec500-framed #page-content .tutorial-topic-browser>summary{cursor:pointer;font-weight:700;padding:6px 0}
body.ec500-framed #page-content .tutorial-topic-browser[open]{flex:0 1 30%!important;min-height:56px!important;overflow:auto!important}

@media(max-width:760px){
 body.ec500-framed #page-content .admin-school-command-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 body.ec500-framed #page-content .school-summary-row{grid-template-columns:minmax(0,1fr) auto!important}
 body.ec500-framed #page-content .school-row-actions{grid-column:1/-1!important;justify-content:flex-start!important}
 body.ec500-framed #page-content .tutorial-language-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
 body.ec500-framed #page-content .admin-school-command-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.ec500-framed #page-content .ec500-frame-content .form-grid{grid-template-columns:1fr!important}
}

.school-enrolment-note{font-size:12px;line-height:1.3;align-self:center;margin:0}

/* One horizontal owner for Desk and School Home, on entry, return and resize. */
body:is([data-route="/teacher/manage"],[data-route="/school/home"]) #layer-workflow>#page-content>.screen{zoom:1!important;width:100%!important;min-height:100%!important;transform:none!important;translate:none!important}
body:is([data-route="/teacher/manage"],[data-route="/school/home"]) #layer-workflow>#page-content>.screen>.menu-stack{position:relative!important;left:auto!important;right:auto!important;max-width:calc(100vw - 32px)!important;margin-left:auto!important;margin-right:auto!important;transform:none!important;translate:none!important;align-self:center!important}

@media (min-width:1001px) and (hover:hover) and (pointer:fine){body:is([data-route="/teacher/manage"],[data-route="/school/home"]) #layer-workflow>#page-content>.screen>.menu-stack{zoom:.8!important}}

/* Dashboard: one scrollport reaching the footer; no nested height limiter. */
body[data-route="/admin/home"] #layer-workflow>#page-content{bottom:var(--ec-dashboard-bottom,58px)!important;overflow-y:auto!important;overflow-x:hidden!important}
body[data-route="/admin/home"] #layer-workflow>#page-content>.admin-dashboard-screen{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding-bottom:8px!important}

/* Rankings: one yellow outer frame, one readable table, compact controls below. */
body.ec500-framed #layer-workflow>#page-content>.ranking-screen>.ranking-board{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:hidden!important}
body.ec500-framed #page-content .ranking-board>h2{flex:0 0 auto;margin:0!important;font-size:20px!important;line-height:1.2;color:#ffe080;text-align:center}
body.ec500-framed #page-content .ranking-board>.ranking-card{flex:1 1 0!important;min-height:0!important;overflow:auto!important;padding:4px 0!important;scrollbar-width:thin}
body.ec500-framed #page-content .ranking-board>.ranking-card>h2{font-size:17px!important;margin:2px 0 8px!important}
body.ec500-framed #page-content .ranking-board>.ranking-tabs,body.ec500-framed #page-content .ranking-board>.ranking-controls{flex:0 0 auto!important;margin:0!important;padding:4px 0!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important}
body.ec500-framed #page-content .ranking-controls .ranking-tabs{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important;justify-content:center!important}
body.ec500-framed #page-content .ranking-board :is(.ranking-tabs,.ranking-controls) .simple-nav{position:static!important;inset:auto!important;transform:none!important;translate:none!important;zoom:1!important;width:auto!important;min-width:80px!important;max-width:100%!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0 10px!important;font-size:13px!important;line-height:1.2!important;white-space:normal!important}
body.ec500-framed #page-content .ranking-choice-list{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:0}
body.ec500-framed #page-content .ranking-choice{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:0 0 auto;width:100%;min-height:50px;padding:8px 4px;background:transparent;color:#fff;border:0;border-bottom:1px solid #ffffff30;text-align:left;font:600 16px Montserrat,Arial,sans-serif;box-sizing:border-box}
body.ec500-framed #page-content .ranking-choice:last-child{border-bottom:0}
body.ec500-framed #page-content .ranking-choice>span{min-width:0;overflow-wrap:anywhere}
body.ec500-framed #page-content .ranking-choice>.ranking-open{position:static!important;inset:auto!important;transform:none!important;translate:none!important;zoom:1!important;flex:0 0 76px!important;width:76px!important;min-width:76px!important;max-width:76px!important;height:34px!important;min-height:34px!important;padding:0 10px!important;margin:0!important;font-size:13px!important;line-height:1.2!important}
body.ec500-framed #page-content .ranking-open:focus-visible{outline:2px solid #ffbf00;outline-offset:3px}
body.ec500-framed #page-content .ranking-navigation.ec519-measure .ranking-choice-list{flex:none;overflow:visible}
body.ec500-framed #page-content .season-ranking-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.3}
body.ec500-framed #page-content .season-ranking-table :is(th,td){padding:8px 7px;vertical-align:middle;border-bottom:1px solid #ffffff25}
body.ec500-framed #page-content .season-ranking-table th{position:sticky;top:0;z-index:1;background:#142536;color:#ffe080;font-size:12px}
body.ec500-framed #page-content .season-ranking-table tbody tr:nth-child(even){background:#ffffff07}
body.ec500-framed #page-content .season-ranking-table :is(th,td):first-child{width:34px;text-align:center}
body.ec500-framed #page-content .season-ranking-table td:has(strong){font-variant-numeric:tabular-nums}
body.ec500-framed #page-content .ranking-league-board>.notice{flex:0 0 auto!important;font-size:12px!important;line-height:1.3!important;margin:0!important;padding:5px 8px!important}

/* Unit selector: a single row outside the lower rim, above the fixed footer. */
body.ec500-framed #page-content .ranking-unit-controls{position:fixed!important;top:var(--ec-unit-top)!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:center!important;gap:clamp(2px,.45vw,6px)!important;width:min(740px,calc(100vw - 24px))!important;height:34px!important;margin:0!important;padding:0!important;z-index:5;color:#ffe080;font-size:clamp(10px,1.4vw,14px);line-height:1;box-sizing:border-box}
body.ec500-framed #page-content .ranking-unit-controls>span{flex:0 0 auto;margin-right:2px}
body.ec500-framed #page-content .ranking-unit-controls>.simple-nav{position:static!important;inset:auto!important;transform:none!important;translate:none!important;zoom:1!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:44px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;font-size:clamp(10px,1.4vw,13px)!important;line-height:1!important;border-width:2px!important;white-space:nowrap!important}
body.ec500-framed #page-content .ranking-unit-controls>.ranking-unit-total{flex:1.65 1 0!important;max-width:64px!important}
body.ec500-framed #page-content .ranking-unit-controls>.simple-nav:disabled{background:#555!important;border-color:#888!important;color:#bbb!important;opacity:.6;cursor:default}

/* compact-hints-v8.503.css */
/* Compact forms and state pages have content-sized surfaces. */
#page-content .school-password-reset-field,#page-content .school-registration-status-card,#page-content .ec-compact-panel{width:min(560px,calc(100vw - 48px))!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 220px)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
#page-content .ec-compact-panel .question-suits{display:none!important}
#page-content .ec503-hint-source{display:none!important}
#layer-fixes .ec503-positioned-hint{box-sizing:border-box!important;padding:10px 12px!important;border:4px solid #c49b40!important;border-radius:10px!important;background:#fff4d3!important;color:#302315!important;box-shadow:3px 7px 20px rgba(0,0,0,.28)!important;font:14px/1.35 Montserrat,Arial,sans-serif!important;overflow:auto!important;scrollbar-width:thin;pointer-events:auto!important}
#layer-fixes .ec503-positioned-hint .notice{display:block!important;background:transparent!important;border:0!important;padding:0!important;margin:0 0 6px!important;color:inherit!important;font:inherit!important}

#layer-fixes .ec503-positioned-hint[data-hint-kind="warning"]{border-color:#e53935!important}
#layer-fixes .ec503-positioned-hint[data-hint-kind="help"]{border-color:#46ad28!important}
#layer-fixes .ec503-positioned-hint[data-hint-kind="organization"]{border-color:#ffc400!important}
#layer-fixes .ec503-positioned-hint[data-hint-kind="neutral"]{border-color:#2698e8!important}

/* Teacher edit uses its existing single form rim at a compact width. */
#page-content .teacher-editor-list,#page-content .school-teacher-edit{width:min(700px,calc(100vw - 48px))!important;min-width:0!important;max-width:700px!important;margin-left:auto!important;margin-right:auto!important}
#page-content .school-teacher-edit .teacher-edit-fields{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

body[data-route^="/teacher/class/"][data-route*="/students"] #layer-fixes .ec503-positioned-hint{box-shadow:5px 12px 25px rgba(0,0,0,.48)!important;min-height:0!important}

/* Compact edit/create forms retain one rim and safe space below the header. */
#page-content .school-teacher-create-form{width:min(650px,calc(100vw - 48px))!important;max-width:650px!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important}
#page-content .school-teacher-create-field{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
#page-content :is(.login-panel,.units-grid,.school-teacher-create-form,.ec-compact-panel){max-height:var(--ec-safe-height,none)!important;overflow:auto!important}

/* mobile-compliance-v8.539.css */
/* V8.539: touch-only mobile compliance; intentionally no desktop selectors. */
@media (hover:none) and (pointer:coarse), (max-width:700px){
 html,body{max-width:100%;overflow-x:hidden}
 #page-content,#page-content .screen,#page-content .ec500-frame-content{min-width:0;box-sizing:border-box}
 #page-content .ec500-frame-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 body.ec500-framed #page-content .ec500-frame-content :is(table,.season-ranking-table){max-width:100%;table-layout:auto}
 body.ec500-framed #page-content .ranking-board>.ranking-card{overflow:auto!important;-webkit-overflow-scrolling:touch!important;min-width:0!important}
 body.ec500-framed #page-content .season-ranking-table{min-width:440px!important;width:max-content!important;max-width:none!important}
 body.ec500-framed #page-content .ranking-board>.ranking-card{overflow-x:auto!important}
 body.ec500-framed #page-content .school-summary-list,body.ec500-framed #page-content .school-overview-content,body.ec500-framed #page-content .student-management-panel{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 #page-content :is(input,textarea,select){max-width:100%;min-width:0;box-sizing:border-box}
 #layer-fixes .ec503-positioned-hint{max-height:none!important;overflow:visible!important;max-width:min(300px,calc(100vw - 28px))!important;font-size:13px!important;line-height:1.25!important;padding:7px 9px!important;box-shadow:4px 9px 23px rgba(0,0,0,.38)!important;touch-action:manipulation;cursor:pointer}
 #layer-fixes .ec503-positioned-hint .notice{max-height:none!important;overflow:visible!important}
 body.ec539-no-avatar #student-avatar-layer{display:none!important}
}


/* current-corrections.css */
/* V8.540: binding two-level mobile footer; never move controls into the links row. */
@media (max-width:700px) and (orientation:portrait){
 body.ec539-mobile #bottom-control-unit #bottom-links,
 body.ec539-mobile[data-route="/help"] #bottom-control-unit #bottom-links{
  position:fixed!important;left:50%!important;right:auto!important;
  bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;display:flex!important;
  justify-content:center!important;align-items:center!important;
  gap:clamp(9px,3vw,18px)!important;white-space:nowrap!important;
  width:auto!important;max-width:calc(100vw - 12px)!important;
  font-size:clamp(11px,3vw,13px)!important;z-index:42!important;
 }
 body.ec539-mobile #bottom-control-unit #bottom-links a{display:inline-block!important}
 body.ec539-mobile #bottom-control-unit :is(.simple-nav,#screen-button,#mute-button,#teacher-continue-button,#help-language-button,.avatar-save){
  position:fixed!important;top:auto!important;
  bottom:calc(46px + env(safe-area-inset-bottom,0px))!important;
  height:36px!important;min-height:36px!important;
  padding:0 4px!important;font-size:11px!important;
  transform:none!important;box-sizing:border-box!important;
 }
 body.ec539-mobile #bottom-control-unit #screen-button{left:8px!important;right:auto!important;width:64px!important;min-width:64px!important}
 body.ec539-mobile #bottom-control-unit #mute-button{left:78px!important;right:auto!important;width:58px!important;min-width:58px!important}
 body.ec539-mobile #bottom-control-unit :is(#teacher-continue-button,#help-language-button,.avatar-save){left:142px!important;right:auto!important;width:72px!important;min-width:72px!important}
 body.ec539-mobile #bottom-control-unit .home{right:8px!important;left:auto!important;width:58px!important;min-width:58px!important}
 body.ec539-mobile #bottom-control-unit .next{right:72px!important;left:auto!important;width:58px!important;min-width:58px!important}
 body.ec539-mobile #bottom-control-unit .back{right:136px!important;left:auto!important;width:58px!important;min-width:58px!important}
 body.ec539-mobile #bottom-control-unit .next:disabled{display:none!important}
 body.ec539-mobile:has(#bottom-control-unit .next:disabled) #bottom-control-unit .back{right:72px!important}
 body.ec539-mobile #page-content:not(.area-splash #page-content){bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
}

/* V8.541 – phone-only Edit Class correction. Desktop remains unchanged. */
@media (max-width:700px) and (orientation:portrait){
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel,
 body.ec-teacher-consolidated[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;
  height:100%!important;max-height:100%!important;min-height:0!important;
  padding:12px 12px 10px!important;margin:0 auto!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form{
  width:100%!important;max-width:100%!important;display:flex!important;
  flex-direction:column!important;flex:0 0 auto!important;align-items:stretch!important;
  gap:10px!important;margin:0 0 12px!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form>.form-grid,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form>.form-grid{
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 12px!important;align-items:end!important;justify-items:stretch!important;
  margin:0!important;align-self:stretch!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form>.form-grid .field{
  width:100%!important;max-width:100%!important;min-width:0!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form>.form-grid label{
  white-space:normal!important;overflow-wrap:normal!important;text-align:left!important;
  font-size:13px!important;line-height:1.15!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form>.form-grid input{
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:42px!important;box-sizing:border-box!important;font-size:16px!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions{
  box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;max-width:100%!important;gap:8px!important;
  margin:6px 0 0!important;align-items:stretch!important;overflow:visible!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions :is(.simple-nav,#print-student-codes){
  position:static!important;display:flex!important;justify-content:center!important;align-items:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:48px!important;padding:6px 8px!important;margin:0!important;
  font-size:clamp(11px,3vw,14px)!important;line-height:1.14!important;
  white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;
  text-align:center!important;box-sizing:border-box!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table-header{
  width:100%!important;min-width:0!important;flex:none!important;box-sizing:border-box!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-table-scroll,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-table-scroll{
  flex:0 0 auto!important;min-height:230px!important;max-height:none!important;height:auto!important;
  overflow:visible!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table{
  table-layout:fixed!important;width:100%!important;max-width:100%!important;min-width:0!important;
  border-collapse:collapse!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td){
  min-width:0!important;max-width:none!important;overflow-wrap:anywhere!important;
  word-break:normal!important;padding:9px 4px!important;vertical-align:middle!important;
  box-sizing:border-box!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(1){width:12%!important;max-width:12%!important;padding-left:0!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(2){width:25%!important;max-width:25%!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(3){width:47%!important;max-width:47%!important;padding-right:0!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table td:nth-child(3){
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  font-size:clamp(12px,3.2vw,15px)!important;letter-spacing:0!important;
  overflow-wrap:break-word!important;word-break:normal!important;white-space:normal!important;
 }
}
@media(max-width:700px) and (orientation:portrait){body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(4){width:16%!important;max-width:16%!important}}

/* V8.542: phone-specific message/help layout repairs; desktop geometry unchanged. */
@media (max-width:700px) and (orientation:portrait){
  /* Messages stays inside the central content area, not in a clipped desktop column. */
  body[data-route="/communication"] #page-content,
  body[data-route="/communication"] #page-content>.screen{
    box-sizing:border-box!important;min-width:0!important;max-width:100vw!important;overflow:visible!important;
  }
  body[data-route="/communication"] #page-content>.screen>.communication-panel,
  body[data-route="/communication"].ec-admin-consolidated .communication-panel,
  body[data-route="/communication"].ec452-workflow .communication-panel{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    transform:none!important;translate:none!important;
    width:calc(100vw - 124px)!important;min-width:0!important;max-width:calc(100vw - 124px)!important;
    height:100%!important;max-height:100%!important;min-height:0!important;
    margin:0 10px 0 auto!important;padding:14px 10px 10px!important;
    box-sizing:border-box!important;overflow:hidden!important;
  }
  body[data-route="/communication"] .communication-panel .message-tabs{display:flex!important;flex-wrap:wrap!important;gap:5px!important;min-width:0!important;width:100%!important}
  body[data-route="/communication"] .communication-panel .message-tabs button{flex:1 1 95px!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:clamp(10px,2.8vw,13px)!important;padding:7px 3px!important}
  body[data-route="/communication"] .communication-layout{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;flex:1!important;height:auto!important;min-height:0!important;overflow:hidden!important}
  body[data-route="/communication"] :is(.communication-sidebar,.communication-main,.communication-thread,.message-help-pane){box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important}
  body[data-route="/communication"] :is(.communication-sidebar,.communication-messages,.message-help-pane){overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}
  body[data-route="/communication"] :is(.communication-contacts button,.communication-messages article,.message-help-pane *){max-width:100%!important;overflow-wrap:anywhere!important}
  /* V8.543: Messages has no avatar on smartphones; use the full central width. */
  body[data-route="/communication"] #student-avatar-layer{display:none!important}
  body[data-route="/communication"] .communication-panel{
    width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;
    margin:0 auto!important;left:auto!important;right:auto!important;
  }
  /* V8.544: no avatar throughout mobile Help, Tutorial or About. */
  body[data-route="/help"] #student-avatar-layer,
  body[data-route^="/help/"] #student-avatar-layer,
  body[data-route="/tutorial"] #student-avatar-layer,
  body[data-route^="/tutorial/"] #student-avatar-layer,
  body[data-route="/about"] #student-avatar-layer,
  body[data-route^="/about/"] #student-avatar-layer{display:none!important}
  /* Tutorial book is a standalone fixed layer; keep it in the usable phone viewport. */
  body[data-route="/help/tutorial"] #tutorial-book-layer:not(.hidden){max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 205px)!important}
  /* Controls in their own row ABOVE the footer links. */
  body.ec539-mobile #bottom-control-unit #bottom-links{bottom:calc(7px + env(safe-area-inset-bottom,0px))!important}
  body.ec539-mobile #bottom-control-unit :is(.simple-nav,#screen-button,#mute-button,#teacher-continue-button,#help-language-button,.avatar-save){bottom:calc(46px + env(safe-area-inset-bottom,0px))!important}
}

/* V8.543: smartphone Tutorial uses the existing notebook renderer, never the desktop book. */
@media (max-width:700px) and (pointer:coarse){
 body[data-route="/help/tutorial"] #tutorial-book-layer{max-width:100vw!important;overflow:hidden!important}
 body[data-route="/communication"] #student-avatar-layer{display:none!important}
}

/* V8.545 smartphone regressions: scoped to phone viewport, not desktop. */
@media (max-width:700px) and (orientation:portrait){
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row,
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form{
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 12px!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions,
 body.ec-teacher-consolidated[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions{
  grid-column:1/-1!important;grid-row:auto!important;display:grid!important;flex-flow:unset!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
  justify-content:stretch!important;align-items:stretch!important;
  width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;
  margin:8px 0 12px!important;overflow:visible!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions>button,
 body.ec452-workflow[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions>button,
 body.ec-teacher-consolidated[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .class-management-actions>button{
  position:static!important;display:flex!important;justify-content:center!important;align-items:center!important;
  flex:none!important;grid-column:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:48px!important;padding:8px 5px!important;margin:0!important;
  font-size:clamp(11px,3vw,14px)!important;line-height:1.14!important;
  white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;
  text-align:center!important;box-sizing:border-box!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(1){width:10%!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(2){width:24%!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(3){width:38%!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table :is(th,td):nth-child(4){width:28%!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table td:nth-child(3){font-size:12px!important;overflow-wrap:normal!important;word-break:normal!important}
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel .student-admin-table td:nth-child(4) button{min-width:0!important;max-width:100%!important;white-space:normal!important;font-size:11px!important}
 body[data-route="/communication"] .communication-panel .message-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 body[data-route="/communication"] .communication-panel .message-tabs button{width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:46px!important;padding:5px 2px!important;font-size:clamp(10px,2.5vw,12px)!important;line-height:1.15!important;overflow-wrap:break-word!important;word-break:normal!important;white-space:normal!important}
 body[data-route="/communication"] .communication-panel .communication-layout{min-height:0!important;overflow-y:auto!important}
 body[data-route="/help/tutorial"] #tutorial-book-layer:not(.hidden){position:fixed!important;left:0!important;top:clamp(150px,20dvh,230px)!important;width:100vw!important;height:calc(100dvh - clamp(150px,20dvh,230px) - 106px)!important;max-height:none!important;z-index:30!important;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
}

/* V8.546 mobile corrections; never apply to desktop. */
@media (max-width:700px) and (orientation:portrait) {
 /* Three compact fields on one row; align both edges of the yellow panel. */
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row {
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid {
  display:grid!important;grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1.1fr)!important;
  gap:8px!important;align-items:start!important;width:100%!important;max-width:100%!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid>.field {
  display:flex!important;flex-direction:column!important;min-width:0!important;width:100%!important;
  grid-column:auto!important;grid-row:auto!important;margin:0!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid>.field label {
  min-width:0!important;max-width:100%!important;font-size:clamp(10px,2.8vw,13px)!important;line-height:1.16!important;
  white-space:normal!important;min-height:2.35em!important;margin:0 0 5px!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid>.field input {
  box-sizing:border-box!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
  height:42px!important;min-height:42px!important;padding:5px 7px!important;font-size:clamp(13px,3.2vw,16px)!important;
 }
 /* Buttons are separate from the input row, in a fully usable two-row / wrap grid. */
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-management-actions {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;
  gap:8px!important;position:static!important;transform:none!important;float:none!important;
  clear:both!important;width:100%!important;max-width:100%!important;min-width:0!important;
  height:auto!important;min-height:0!important;margin:10px 0 12px!important;overflow:visible!important;
 }
 body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-management-actions>button {
  width:100%!important;max-width:100%!important;min-width:0!important;min-height:47px!important;height:auto!important;
  position:static!important;transform:none!important;grid-column:auto!important;grid-row:auto!important;
  font-size:clamp(11px,2.7vw,13px)!important;line-height:1.15!important;white-space:normal!important;
  overflow-wrap:normal!important;word-break:normal!important;padding:6px!important;
 }
 /* Create class must never retain desktop negative offset or fixed-width inputs. */
 body[data-route="/teacher/classes/create"] :is(.create-class-shell,.create-class-panel,.create-class-form-grid),
 body[data-route="/teacher/classes/create"] .create-class-shell .field {
  box-sizing:border-box!important;position:relative!important;left:auto!important;right:auto!important;
  transform:none!important;margin-left:auto!important;margin-right:auto!important;min-width:0!important;
  max-width:100%!important;width:100%!important;
 }
 body[data-route="/teacher/classes/create"] .create-class-form-grid {
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
 }
 body[data-route="/teacher/classes/create"] .create-class-form-grid .field input {
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
 }
 body[data-route="/teacher/classes/create"] .create-class-panel {padding:16px!important;overflow:visible!important}
 /* Mobile avatars use the shared fixed anchor on every route. */
 /* Prefer readable compact menus rather than oversized full-width Piatnik rows. */
 body[data-route="/teacher/manage"] .menu-stack .piatnik-button,
 body[data-route="/teacher/test"] .menu-stack .piatnik-button {max-width:min(82vw,420px)!important;margin-left:auto!important;margin-right:auto!important}
 /* Lobby's fixed actions have their own area to the right of SCREEN/MUTE. */
 body[data-route*="lobby"] :is(#quit-button,#start-button,[id*="lobby-quit"],[id*="lobby-start"]) {
  max-width:24vw!important;min-width:0!important;padding-inline:5px!important;font-size:clamp(11px,3vw,14px)!important;
 }
}

/* V8.549: smartphone gameplay avatar positioning/safety ONLY. Desktop/tablet unchanged. */
@media (max-width:600px) and (pointer:coarse){
 body #student-avatar-layer.ec549-mobile-no-overlap{left:0!important;right:auto!important;transform:none!important;}
 body #student-avatar-layer.ec549-mobile-no-overlap.ec549-avatar-occluded{visibility:hidden!important;pointer-events:none!important;}
}

/* EC V8.550 smartphone-only Tutorial flipchart: occupy available display between logo and bottom controls. */
@media(max-width:650px){body[data-route="/help/tutorial"] #tutorial-book-layer:not(.hidden){top:clamp(102px,19dvh,162px)!important;left:0!important;width:100vw!important;max-width:100vw!important;height:calc(100dvh - clamp(102px,19dvh,162px) - 104px)!important;max-height:none!important;overflow:hidden!important;}}

/* V8.550 mobile avatar alignment and compact Piatnik menus, 2026-10-11.
   Phone only. Keep all desktop, notebook and gameplay panel geometry intact. */
@media (max-width:700px) and (orientation:portrait){
  /* Single-column Piatnik stacks shrink to the widest label, rather than the phone. */
  #page-content .menu-stack:not(.units-grid):not(.class-choice-grid),
  #page-content .training-mode-menu:not(.units-grid){
    width:max-content!important;max-width:calc(100vw - 36px)!important;
    grid-template-columns:minmax(0,max-content)!important;
    justify-content:center!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  #page-content .menu-stack:not(.units-grid):not(.class-choice-grid)>.piatnik,
  #page-content .training-mode-menu:not(.units-grid)>.piatnik{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;
    grid-template-columns:30px max-content 8px!important;column-gap:5px!important;
    padding:0 9px!important;
  }
  #page-content .menu-stack:not(.units-grid):not(.class-choice-grid)>.piatnik>span:last-child,
  #page-content .training-mode-menu:not(.units-grid)>.piatnik>span:last-child{
    box-sizing:border-box!important;width:auto!important;min-width:0!important;
    padding:0 9px!important;white-space:nowrap!important;
    max-width:calc(100vw - 102px)!important;
  }
  #page-content .menu-stack:not(.units-grid):not(.class-choice-grid)>.piatnik .suit,
  #page-content .training-mode-menu:not(.units-grid)>.piatnik .suit{
    left:9px!important;width:25px!important;height:25px!important;
  }
}

/* V8.557: Only the requested Central Admin home compacting and the LOGIN heading clearance.
   No global HUD, button, avatar, tutorial or other route geometry is modified. */
/* LOGIN titles follow the approved shared close logo/title HUD geometry. */
body[data-route="/admin/home"] #layer-workflow>#page-content{
  overflow:hidden!important;
}
body[data-route="/admin/home"] #layer-workflow>#page-content>.admin-dashboard-screen{
  position:relative!important;left:auto!important;right:auto!important;
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  height:100%!important;min-height:0!important;max-height:100%!important;
  padding:0!important;overflow:hidden!important;display:block!important;
  transform:none!important;zoom:1!important;
}
body[data-route="/admin/home"] .admin-dashboard-stats{
  position:absolute!important;inset:6px 0 auto 0!important;
  width:100%!important;margin:0!important;padding:0 18px!important;
  display:grid!important;
  grid-template-columns:repeat(3,96px) minmax(36px,1fr) repeat(3,96px)!important;
  gap:8px!important;align-items:start!important;justify-content:center!important;justify-items:stretch!important;
  left:0!important;right:0!important;transform:none!important;zoom:1!important;
}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card{
  width:96px!important;min-width:96px!important;height:54px!important;
  font-size:14px!important;padding:5px 4px!important;line-height:1.04!important;
}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card strong{display:block;font-size:24px!important;line-height:1.02!important}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(1){grid-column:1}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(2){grid-column:2}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(3){grid-column:3}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(4){grid-column:5}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(5){grid-column:6}
body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card:nth-child(6){grid-column:7}
body[data-route="/admin/home"] .admin-dashboard-grid{
  position:absolute!important;top:76px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;
  width:248px!important;max-width:248px!important;
  margin:0!important;padding:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(7,54px)!important;gap:6px!important;align-content:start!important;
  overflow:hidden!important;zoom:1!important;
}
body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik{
  box-sizing:border-box!important;width:100%!important;min-height:54px!important;height:54px!important;
  margin:0!important;border-width:3px!important;border-radius:10px!important;
  grid-template-columns:29px minmax(0,1fr) 6px!important;padding:0 5px!important;
}
body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik .suit{left:6px!important;width:20px!important;height:20px!important}
body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik>span:last-child{
  min-width:0!important;font-size:19px!important;font-weight:700!important;
  line-height:1.03!important;transform:none!important;
  white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
  text-align:center!important;
}
@media(max-width:700px), (hover:none) and (pointer:coarse){
  body[data-route="/admin/home"] .admin-dashboard-stats{
    top:4px!important;left:4px!important;right:auto!important;bottom:auto!important;
    width:86px!important;padding:0!important;
    grid-template-columns:86px!important;grid-template-rows:repeat(6,74px)!important;
    gap:4px!important;justify-content:start!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card{
    grid-column:1!important;width:86px!important;min-width:86px!important;height:74px!important;min-height:74px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;font-size:12px!important;
    padding:3px 2px!important;line-height:1.02!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card strong{font-size:22px!important;line-height:1!important}
  body[data-route="/admin/home"] .admin-dashboard-grid{
    top:4px!important;left:96px!important;right:4px!important;bottom:auto!important;
    width:auto!important;max-width:none!important;transform:none!important;
    grid-template-rows:repeat(7,58px)!important;gap:4px!important;align-content:start!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik{
    min-height:58px!important;height:58px!important;border-width:3px!important;border-radius:9px!important;
    grid-template-columns:24px minmax(0,1fr) 4px!important;padding:0 4px!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik .suit{left:4px!important;width:17px!important;height:17px!important}
  body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik>span:last-child{
    font-size:18px!important;line-height:1.02!important;
    white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
    text-align:center!important;
  }
}

/* V8.558: only the Central Admin league-question selector row on narrow screens. */
.admin-question-nav .admin-nav-compact{display:none}
@media(max-width:700px){
  body[data-route^="/admin/questions/"] .admin-question-editor{box-sizing:border-box!important;min-width:0!important;max-width:calc(100% - 12px)!important}
  body[data-route^="/admin/questions/"] .admin-question-nav{box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;min-width:0!important;gap:5px!important;margin-inline:auto!important}
  body[data-route^="/admin/questions/"] .admin-question-nav label{box-sizing:border-box!important;display:flex!important;justify-content:space-between!important;align-items:center!important;min-width:0!important;width:100%!important;padding:5px 4px!important;gap:3px!important;white-space:nowrap!important;font-size:clamp(10px,2.7vw,13px)!important}
  body[data-route^="/admin/questions/"] .admin-question-nav .admin-nav-full{display:none!important}
  body[data-route^="/admin/questions/"] .admin-question-nav .admin-nav-compact{display:inline!important}
  body[data-route^="/admin/questions/"] .admin-question-nav select{box-sizing:border-box!important;min-width:0!important;max-width:58%!important;width:auto!important;padding:3px 2px!important;font-size:clamp(11px,2.8vw,14px)!important}
}

/* V8.560: Central Admin-only messaging composer. Other roles and pages unchanged. */
body[data-route="/communication"] .admin-broadcast{flex:0 0 auto;max-height:42%;overflow:auto;background:#f5ead1;color:#271c08;border:2px solid #beaa76;border-radius:10px;margin-bottom:7px;padding:5px 10px;font:600 13px Montserrat,Arial,sans-serif}
body[data-route="/communication"] .admin-broadcast summary{cursor:pointer;padding:5px;font-weight:800}
body[data-route="/communication"] .admin-broadcast form{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:6px 0}
body[data-route="/communication"] .admin-broadcast label{display:grid;gap:3px}
body[data-route="/communication"] .admin-broadcast select,body[data-route="/communication"] .admin-broadcast textarea{box-sizing:border-box;min-width:0;width:100%;padding:7px;border:2px solid #b69b54;border-radius:8px;background:#fffbc9;color:#111;font:600 13px Montserrat,Arial,sans-serif}
body[data-route="/communication"] .admin-broadcast textarea{grid-column:1/-1;min-height:65px;resize:vertical}
body[data-route="/communication"] .admin-broadcast-preview{grid-column:1/-1;margin:0}
body[data-route="/communication"] .admin-broadcast .simple-nav{position:static;grid-column:1/-1;width:auto;height:auto;min-height:39px}
body[data-route="/communication"] .admin-broadcast .hidden{display:none!important}
@media(max-width:750px){body[data-route="/communication"] .admin-broadcast{max-height:48%;font-size:12px}body[data-route="/communication"] .admin-broadcast form{grid-template-columns:1fr}body[data-route="/communication"] .admin-broadcast textarea,body[data-route="/communication"] .admin-broadcast-preview,body[data-route="/communication"] .admin-broadcast .simple-nav{grid-column:1}}

/* V8.561: Central Admin messaging recipient mode control buttons only. */
body[data-route="/communication"] .admin-broadcast .admin-recipient-modes{grid-column:1/-1;min-width:0;border:0;margin:0;padding:0}
body[data-route="/communication"] .admin-broadcast .admin-recipient-modes legend{font-weight:800;padding:0 0 4px}
body[data-route="/communication"] .admin-broadcast .admin-recipient-mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
body[data-route="/communication"] .admin-broadcast .admin-recipient-mode{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:38px;padding:5px 7px;border:2px solid #d7ad32;border-radius:8px;background:linear-gradient(#fffefa,#f5e8c5);color:#272014;font:800 12px/1.12 Montserrat,Arial,sans-serif;white-space:normal;text-align:center;cursor:pointer}
body[data-route="/communication"] .admin-broadcast .admin-recipient-mode.selected{background:#2679bc;border-color:#ffda56;color:white;box-shadow:inset 0 0 0 1px #fff5}
body[data-route="/communication"] .admin-broadcast .admin-recipient-mode:focus-visible{outline:3px solid #1b5fb4;outline-offset:2px}
body[data-route="/communication"] .admin-broadcast .admin-recipient-scope-native{display:none!important}
@media(max-width:750px){body[data-route="/communication"] .admin-broadcast .admin-recipient-mode-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}body[data-route="/communication"] .admin-broadcast .admin-recipient-mode{font-size:11px;min-height:42px;padding:4px 3px}}

/* V8.562: Central Admin desktop only — position dashboard against full viewport,
   not the narrower workflow content container. Smartphone rules stay untouched. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body[data-route="/admin/home"] #layer-workflow>#page-content>.admin-dashboard-screen{
    position:fixed!important;
    inset:330px 0 64px 0!important;
    left:0!important;right:0!important;top:330px!important;bottom:64px!important;
    width:100vw!important;max-width:100vw!important;
    height:auto!important;max-height:none!important;min-height:0!important;
    transform:none!important;translate:none!important;zoom:1!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats{
    position:absolute!important;inset:4px 20px auto 20px!important;
    left:20px!important;right:20px!important;top:4px!important;
    width:calc(100% - 40px)!important;
    display:grid!important;
    grid-template-columns:repeat(3,110px) minmax(0,1fr) repeat(3,110px)!important;
    gap:10px!important;padding:0!important;margin:0!important;
    justify-content:stretch!important;align-items:start!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card{
    box-sizing:border-box!important;width:110px!important;min-width:110px!important;height:62px!important;
    font-size:15px!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid{
    position:absolute!important;top:88px!important;bottom:3px!important;
    left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:300px!important;max-width:300px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:repeat(7,minmax(0,1fr))!important;
    gap:6px!important;overflow:hidden!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik{
    min-height:0!important;height:100%!important;width:100%!important;
  }
}

/* V8.563: Central Admin desktop dashboard is mounted directly under BODY.
   This avoids transformed workflow ancestors and keeps the approved mobile view intact. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body[data-route="/admin/home"] > #ec-admin-desktop-portal{
    position:fixed!important;inset:0!important;top:0!important;bottom:0!important;
    left:0!important;right:0!important;width:100vw!important;height:100dvh!important;
    max-width:none!important;max-height:none!important;min-height:0!important;
    padding:0!important;margin:0!important;zoom:1!important;transform:none!important;
    background:transparent!important;overflow:visible!important;pointer-events:none!important;
    z-index:35!important;display:block!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats{
    position:absolute!important;top:177px!important;left:16px!important;right:16px!important;
    bottom:auto!important;width:calc(100vw - 32px)!important;max-width:none!important;
    display:grid!important;grid-template-columns:repeat(3,114px) minmax(0,1fr) repeat(3,114px)!important;
    gap:8px!important;transform:none!important;pointer-events:auto!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats>.stat-card{
    width:114px!important;min-width:0!important;height:65px!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid{
    position:absolute!important;top:340px!important;bottom:100px!important;
    left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:310px!important;max-width:310px!important;
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:repeat(7,minmax(0,1fr))!important;gap:6px!important;
    overflow:visible!important;pointer-events:auto!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid>.piatnik{
    height:100%!important;min-height:0!important;width:100%!important;
  }
  @media (max-height:700px){
    body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats{top:140px!important}
    body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid{top:266px!important;bottom:72px!important}
  }
}

/* V8.564 — Central Admin Home only. Desktop and phone are independent layouts. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body[data-route="/admin/home"] > #ec-admin-desktop-portal{
    position:fixed!important;inset:0!important;display:block!important;
    width:100vw!important;height:100dvh!important;overflow:hidden!important;
    transform:none!important;zoom:1!important;pointer-events:none!important;z-index:35!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats{
    position:absolute!important;top:36px!important;left:18px!important;right:18px!important;bottom:auto!important;
    width:calc(100vw - 36px)!important;margin:0!important;padding:0!important;
    display:grid!important;grid-template-columns:repeat(3,114px) minmax(0,1fr) repeat(3,114px)!important;
    gap:8px!important;transform:none!important;pointer-events:auto!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats>.stat-card{
    box-sizing:border-box!important;width:114px!important;min-width:0!important;height:64px!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid{
    position:absolute!important;top:165px!important;bottom:75px!important;left:50%!important;right:auto!important;
    width:310px!important;max-width:310px!important;margin:0!important;padding:0!important;
    transform:translateX(-50%)!important;display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(7,minmax(0,1fr))!important;
    gap:6px!important;overflow:visible!important;pointer-events:auto!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid>.piatnik{
    box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;
  }
}
/* V8.565: Central Admin DESKTOP only — use the existing compact button height. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid{
    bottom:auto!important;
    grid-template-rows:repeat(7,54px)!important;
    gap:8px!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid>.piatnik{
    height:54px!important;min-height:54px!important;
  }
}
/* Phone layout is scoped independently. Never move the mobile dashboard into a desktop portal. */
@media (max-width:700px) and (orientation:portrait){
  body[data-route="/admin/home"] #page-content>.admin-dashboard-screen{
    position:relative!important;display:block!important;width:100%!important;height:100%!important;
    max-height:100%!important;overflow:hidden!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats{
    position:absolute!important;top:3px!important;left:3px!important;right:auto!important;bottom:auto!important;
    width:86px!important;margin:0!important;padding:0!important;
    display:grid!important;grid-template-columns:86px!important;
    grid-template-rows:repeat(6,46px)!important;gap:5px!important;
    height:auto!important;transform:none!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-stats>.stat-card{
    width:86px!important;min-width:0!important;height:46px!important;min-height:46px!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid{
    position:absolute!important;top:3px!important;left:95px!important;right:3px!important;bottom:auto!important;
    width:auto!important;max-width:none!important;height:auto!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:repeat(7,48px)!important;gap:6px!important;
    margin:0!important;padding:0!important;transform:none!important;overflow:hidden!important;
  }
  body[data-route="/admin/home"] .admin-dashboard-grid>.piatnik{
    box-sizing:border-box!important;width:100%!important;height:48px!important;min-height:48px!important;
  }
}

/* V8.567: Detached Central Admin Home dashboard must never appear on other routes.
   This guards Help & Tutorial and every other screen, with no layout changes. */
body:not([data-route="/admin/home"]) > #ec-admin-desktop-portal{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
}

/* V8.568: Central Admin HOME desktop only. Keep stats at the upper screen edge
   and preserve room for bottom navigation. Phone styling stays separate. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-stats{
    top:8px!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid{
    top:154px!important;bottom:auto!important;
    grid-template-rows:repeat(7,44px)!important;gap:6px!important;
  }
  body[data-route="/admin/home"] > #ec-admin-desktop-portal .admin-dashboard-grid>.piatnik{
    height:44px!important;min-height:44px!important;
  }
}

/* V8.570: Central Admin Home desktop only — hide the decorative management
   frame behind the detached dashboard. Do not change pointer events, layers,
   navigation, dimensions, or any other route. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  body.ec500-framed[data-route="/admin/home"] #layer-workflow > #page-content::before{
    content:none!important;
    display:none!important;
  }
}

/* V8.573: No-avatar is an empty selection cell, not a substitute teacher image. */
.teacher-avatar-choice.teacher-avatar-none{display:flex;align-items:center;justify-content:center;background:linear-gradient(#101927,#06111c);}
.teacher-avatar-choice.teacher-avatar-none .teacher-avatar-none-label{position:static;display:block;min-width:0;height:auto;padding:4px;background:transparent;box-shadow:none;color:#f9e9ad;font-family:Montserrat,Arial,sans-serif;font-size:clamp(10px,1.4vw,15px);line-height:1.15;text-align:center;white-space:normal;}

/* V8.574: Keep only live-game question and answer panels free of wiggle animations.
   Feedback, control buttons, cards and avatars retain their existing motion. */
body[data-route^="/teacher/room/"] .question-card,
body[data-route^="/teacher/room/"] .answer-grid .answer,
body[data-route^="/play/"] .question-card,
body[data-route^="/play/"] .answer-grid .answer {
  animation: none !important;
}

/* V8.575: Messages > Help Questions — readable text and contained line wrapping only. */
body[data-route="/communication"] .message-help-pane .help-review-list{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  overflow-x:hidden!important;
}
body[data-route="/communication"] .message-help-pane .help-review-card{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  color:#fff3d5!important;overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important;
}
body[data-route="/communication"] .message-help-pane .help-review-card :is(h3,p,strong,span,small){
  color:#fff3d5!important;max-width:100%!important;min-width:0!important;
  overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important;
}

/* V8.576: Teacher Messages help questions — white text and safe wrapping inside frame. */
body[data-route="/communication"] .message-help-pane,
body[data-route="/communication"] .message-help-pane .help-review-list,
body[data-route="/communication"] .message-help-pane .help-review-card {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  overflow-x:hidden!important;
}
body[data-route="/communication"] .message-help-pane .help-review-card,
body[data-route="/communication"] .message-help-pane .help-review-card :is(h1,h2,h3,h4,p,small,strong,span,div) {
  color:#ffffff!important;white-space:normal!important;
  min-width:0!important;max-width:100%!important;
  overflow-wrap:anywhere!important;word-break:break-word!important;
}

/* V8.577 — Teacher live game: card symbol follows RANKING, never global centering.
   Keep existing control positions, dimensions and all non-live-game layouts. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine) {
  body[data-route^="/teacher/room/"] .card-management-nav {
    left:356px!important;right:auto!important;
    transform:none!important;margin-left:0!important;margin-top:0!important;
  }
}
@media (max-width:1000px), (hover:none), (pointer:coarse) {
  body[data-route^="/teacher/room/"] .card-management-nav {
    left:calc(max(6px,var(--ec-safe-left)) + 204px)!important;
    right:auto!important;transform:none!important;margin-left:0!important;margin-top:0!important;
  }
}

/* V8.578: Teacher room control grouping. Desktop and smartphone are separate. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
 body[data-route^="/teacher/room/"] .ranking-nav{left:218px!important;right:auto!important;transform:none!important}
 body[data-route^="/teacher/room/"] .card-management-nav{left:362px!important;right:auto!important;transform:none!important}
}
@media (max-width:1000px), (hover:none), (pointer:coarse){
 body[data-route^="/teacher/room/"] .ranking-nav{left:calc(max(6px,var(--ec-safe-left,0px)) + 136px)!important;right:auto!important;transform:none!important;width:90px!important;min-width:90px!important}
 body[data-route^="/teacher/room/"] .card-management-nav{left:calc(max(6px,var(--ec-safe-left,0px)) + 232px)!important;right:auto!important;transform:none!important}
}
/* Student Test and League games use the same /play/ page and joker API. */
body[data-route^="/play/"] .league-joker-bar{box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-width:0;margin:9px auto;position:relative;z-index:5}
body[data-route^="/play/"] .league-joker-bar button{box-sizing:border-box;min-height:38px;padding:5px 12px;border:2px solid #e4b62f;border-radius:9px;background:linear-gradient(#fff8d8,#f2d273);color:#241b0b;font:800 13px/1.15 Montserrat,Arial,sans-serif;cursor:pointer}
body[data-route^="/play/"] .league-joker-bar button:disabled{opacity:.5;cursor:default}
@media(max-width:700px){body[data-route^="/play/"] .league-joker-bar{gap:4px;margin:5px auto}body[data-route^="/play/"] .league-joker-bar button{min-height:33px;padding:3px 7px;font-size:11px}}

/* V8.581: ranking interlude and display preference; only Test / League routes. */
body[data-route^="/teacher/room/"] .ec-ranking-interlude,
body[data-route^="/play/"] .ec-ranking-interlude {display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:0;position:fixed;inset:120px 0 100px;width:100%;padding:0 12px;box-sizing:border-box;z-index:4;pointer-events:none;}
.ec-ranking-interlude-panel{width:min(680px,calc(100vw - 340px));max-width:680px;min-width:420px;min-height:0;max-height:100%;flex:1 1 auto;display:flex;flex-direction:column;pointer-events:auto;background:#fff6da;color:#241b0b;border:4px solid #e9bb45;border-radius:17px;padding:54px 14px 14px;box-sizing:border-box;text-align:center;overflow:hidden;position:relative;}
.ec-ranking-interlude-panel h2{font-family:ECDisplay,Montserrat,sans-serif;color:#97610b;margin:0 0 10px;font-size:clamp(22px,4vw,36px);line-height:1}
.ec-ranking-list-shell{min-height:0;flex:1 1 auto;max-height:100%;overflow-y:auto;padding-right:4px}
.ec-ranking-list{display:flex;flex-direction:column;gap:4px}
.ec-ranking-line{display:grid;grid-template-columns:32px minmax(0,1fr) 90px 18px;align-items:center;gap:8px;height:48px;padding:5px 10px;box-sizing:border-box;background:#fff;border:2px solid #ddc17d;border-radius:9px;text-align:left;animation:ecRankArrive 1.8s cubic-bezier(.16,1,.3,1) both;}
.ec-ranking-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-ranking-arrow{color:#00883c;font-weight:900;font-size:22px}
.ec-ranking-empty{padding:18px 10px;background:#fff;border:2px solid #ddc17d;border-radius:9px;color:#5a4621}
.ec-ranking-interlude>.ec-ranking-wait{position:relative!important;inset:auto!important;transform:none!important;translate:none!important;margin:10px auto 0!important;flex:0 0 48px;min-height:48px;max-height:48px;display:flex!important;justify-content:center!important;align-items:center!important;gap:3px;pointer-events:none}
@keyframes ecRankArrive{from{transform:translateY(var(--rank-old-offset,0px));filter:brightness(1.15)}to{transform:translateY(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.ec-ranking-line{animation:none!important}}
@media(max-width:1000px), (hover:none), (pointer:coarse){.ec-ranking-interlude-panel{width:min(680px,calc(100vw - 28px));min-width:0;max-height:100%;padding:50px 10px 14px}.ec-ranking-list-shell{max-height:100%}}
@media(max-width:700px){.ec-ranking-interlude-panel{width:calc(100vw - 28px);padding:46px 7px 12px}.ec-ranking-list-shell{max-height:100%}.ec-ranking-line{grid-template-columns:22px minmax(0,1fr) 66px 14px;height:42px;gap:3px;padding:3px 5px;font-size:12px}}

/* V8.585: center only the three Edit Class header labels above their fields. */
body[data-route^="/teacher/class/"][data-route*="/students"] .student-management-panel #edit-class-form .class-header-row>.form-grid>.field label{
 text-align:center!important;align-self:stretch!important;
}

/* V8.586: compact 6-digit Student League game code; no Seats spinner arrows. */
body[data-route="/students/league"] #join-form .form-grid,
body[data-route="/students/league"] #join-form .field.full {
  display:flex!important;flex-direction:column!important;align-items:center!important;
}
body[data-route="/students/league"] #join-form .field.full input[name="code"] {
  width:150px!important;max-width:calc(100vw - 48px)!important;min-width:0!important;
  box-sizing:border-box!important;text-align:center!important;
}
body[data-route="/students/league"] #join-form .field.full label {text-align:center!important;}
body[data-route^="/teacher/class/"][data-route*="/students"] input[name="seats"] {
  appearance:textfield!important;-moz-appearance:textfield!important;
}
body[data-route^="/teacher/class/"][data-route*="/students"] input[name="seats"]::-webkit-inner-spin-button,
body[data-route^="/teacher/class/"][data-route*="/students"] input[name="seats"]::-webkit-outer-spin-button {
  -webkit-appearance:none!important;margin:0!important;
}

/* Teacher footer: match the rendered SCREEN/MUTE width and gap.
   Lobby Start occupies the same right-hand slot as NEXT, never the middle of Quit. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
 body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #nav-controls :is(.home,.pause,.quit,#lobby-quit,#global-next,#start-game){position:fixed!important;left:auto!important;top:auto!important;bottom:10px!important;width:80px!important;min-width:80px!important;height:40px!important;transform:none!important;padding:0 4px!important;}
 body[data-route^="/teacher/room/"] #nav-controls .home{right:14px!important;}
 body[data-route^="/teacher/room/"] #nav-controls :is(.pause,#global-next,#start-game){right:100px!important;}
 body[data-route^="/teacher/room/"] #nav-controls :is(.quit,#lobby-quit){right:186px!important;}
 body[data-route^="/teacher/room/"] #nav-controls .ranking-nav{left:218px!important;right:auto!important;bottom:10px!important;width:88px!important;min-width:88px!important;transform:none!important;}
 body[data-route^="/teacher/room/"] #nav-controls .card-management-nav{left:312px!important;right:auto!important;bottom:10px!important;width:54px!important;transform:none!important;}
}
@media (max-width:1000px), (hover:none), (pointer:coarse){
 body[data-route^="/teacher/room/"]:not([data-route$="/ranking"]) #nav-controls :is(.home,.pause,.quit,#lobby-quit,#global-next,#start-game){position:fixed!important;left:auto!important;top:auto!important;width:58px!important;min-width:58px!important;transform:none!important;padding:0 4px!important;}
 body[data-route^="/teacher/room/"] #nav-controls .home{right:8px!important;}
 body[data-route^="/teacher/room/"] #nav-controls :is(.pause,#global-next,#start-game){right:72px!important;}
 body[data-route^="/teacher/room/"] #nav-controls :is(.quit,#lobby-quit){right:136px!important;}
}
/* V8.589: Restore approved WHO'S THERE? centering without changing its button sizes.
   Desktop uses its own viewport-centering contract; phone remains independent. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine) {
 body[data-route="/start"] #page-content>.screen>.menu-stack {
   position:relative!important;left:-15.625vw!important;right:auto!important;
   margin-left:auto!important;margin-right:auto!important;
 }
}
@media (max-width:1000px), (hover:none), (pointer:coarse) {
 body[data-route="/start"] #page-content>.screen>.menu-stack {
   left:0!important;right:auto!important;transform:none!important;
   margin-left:auto!important;margin-right:auto!important;
 }
}
/* Requests tab has no hint card; hints elsewhere keep their approved behavior. */
body[data-route="/communication"]:has(.message-requests-pane:not(.hidden)) #global-hint-overlay,
body[data-route="/communication"]:has(.message-requests-pane:not(.hidden)) #layer-fixes #global-hint-overlay {
 display:none!important;
}

/* V8.591: yellow/red student card waves BELOW answers, never on an answer.
   Only the card overlay itself is repositioned; answers/controls are unchanged. */
body[data-route^="/play/"] .play-column > .student-card-notice {
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  margin:8px auto 0!important;width:62px!important;height:50px!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
  z-index:7!important;pointer-events:none!important;
}

/* V8.593: Student Login only — approved close logo/title spacing, no unrequested hint overlay. */
/* Student login uses the same approved global LOGIN geometry. */
body[data-route^="/students/login/"] #global-hint-overlay{display:none!important}

/* Narrow admin forms use a single column inside the existing scrolling frame. */
@media(max-width:700px){
 body[data-route="/admin/system"] #session-settings{grid-template-columns:minmax(0,1fr)!important;}
 body[data-route="/admin/system"] #session-settings>label{min-width:0!important;grid-template-columns:minmax(0,1fr) 80px auto!important;}
 body[data-route^="/teacher/room/"] #nav-controls :is(#teacher-inline-next,#pause-game){left:auto!important;right:8px!important;bottom:94px!important;width:58px!important;min-width:58px!important;height:34px!important;transform:none!important;}
 body[data-route^="/teacher/room/"] #nav-controls #quit-game{left:auto!important;right:72px!important;bottom:94px!important;width:58px!important;min-width:58px!important;height:34px!important;transform:none!important;}
 body[data-route^="/teacher/room/"] #nav-controls .ranking-nav{left:8px!important;right:auto!important;bottom:94px!important;width:80px!important;min-width:80px!important;height:34px!important;transform:none!important;}
 body[data-route^="/teacher/room/"] #nav-controls .card-management-nav{left:94px!important;right:auto!important;bottom:94px!important;width:44px!important;height:34px!important;transform:none!important;}
 body[data-route^="/teacher/room/"] .ec-ranking-interlude,body[data-route^="/play/"] .ec-ranking-interlude{bottom:150px;}
}

/* Portrait game HUD: use the existing gap below the fixed logo/title, keeping
   question, answers and all desktop coordinates unchanged. */
@media(max-width:700px) and (orientation:portrait){
 body:is(.area-game,.area-training) #hud :is(.hud-left,.hud-right){top:96px!important;}
 body:is(.area-game,.area-training) #hud :is(.hud-left,.hud-right)>div{height:32px!important;min-height:32px!important;padding:2px 4px!important;box-sizing:border-box!important;}
 body:is(.area-game,.area-training) #hud :is(.hud-left,.hud-right) strong{font-size:14px!important;line-height:16px!important;}
}

/* Phone training retains all modes and the 3 by 4 Unit grid in a scrollable column. */
@media(max-width:700px){
 body.ec-student-consolidated #page-content .training-menu-layout{grid-template-columns:minmax(0,1fr)!important;row-gap:20px!important;max-height:calc(100dvh - 230px)!important;width:calc(100vw - 32px)!important;}
 body.ec-student-consolidated #page-content .training-unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik{grid-template-columns:22px minmax(0,1fr)!important;gap:4px!important;padding:0 5px!important;font-size:14px!important;}
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik>span:last-child{width:auto!important;min-width:0!important;max-width:100%!important;padding:0!important;white-space:nowrap!important;font-size:14px!important;}
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik .suit{width:22px!important;height:26px!important;font-size:24px!important;}
}

/* Narrow phones need a separate Back row; otherwise it covers Mute/Choose/Language. */
@media(max-width:340px) and (orientation:portrait){
 body.ec539-mobile #bottom-control-unit #nav-controls .back{bottom:calc(94px + env(safe-area-inset-bottom,0px))!important;}
 body.ec539-mobile:has(#nav-controls:not(.hidden) .back:not(.hidden)) #page-content{bottom:calc(148px + env(safe-area-inset-bottom,0px))!important;}
}
/* Landscape phones retain the existing two-column menu, with labels fitting each Unit. */
@media(min-width:701px) and (max-width:1000px) and (max-height:500px){
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik{grid-template-columns:22px minmax(0,1fr)!important;gap:4px!important;padding:0 5px!important;}
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik>span:last-child{width:auto!important;min-width:0!important;padding:0!important;font-size:14px!important;white-space:nowrap!important;}
 body.ec-student-consolidated #page-content .training-unit-grid>.piatnik .suit{width:22px!important;height:26px!important;font-size:24px!important;}
}

/* These two routes use their container's centre, without legacy offset compensation. */
body[data-route="/teacher/classes/create"] #layer-workflow #page-content>.screen>.create-class-shell{
 left:0!important;right:auto!important;translate:none!important;transform:none!important;
}
body[data-route="/admin/questions"] #layer-workflow #page-content>.screen{
 width:100%!important;min-height:100%!important;margin-inline:auto!important;
}
body[data-route="/admin/questions"] #layer-workflow #page-content>.screen>.menu-stack{
 left:0!important;right:auto!important;translate:none!important;transform:none!important;margin-inline:auto!important;
}
body[data-route="/students/ranking"] #layer-workflow #page-content>.screen{width:100%!important;margin-inline:auto!important;}
body[data-route="/students/ranking"] #layer-workflow #page-content>.screen>.student-ranking-field{left:0!important;right:auto!important;translate:0 var(--ec-student-central-shift,0px)!important;transform:none!important;margin-inline:auto!important;}

/* While a mobile Joker hint is open, reserve a separate band below the HUD.
   The question scrollport begins below it and restores on dismissal. */
@media(max-width:700px) and (orientation:portrait){
 #layer-workflow #page-content.ec-mobile-joker-hint{top:var(--ec-joker-content-top)!important;}
 #layer-workflow #page-content.ec-mobile-joker-hint>.screen{height:100%!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;}
 #page-content.ec-mobile-joker-hint .question-shell{margin-top:16px!important;}
}

/* V8.605: requested retained/faded sound control and equal compact Piatnik widths. */
#mute-button{opacity:1!important;}

#page-content .ec605-button-stack{width:var(--ec605-stack-width)!important;max-width:calc(100vw - 36px)!important;}
:is(#page-content,#ec-admin-desktop-portal) button.piatnik.ec605-sized{
 box-sizing:border-box!important;width:var(--ec605-button-width)!important;
 min-width:0!important;max-width:100%!important;justify-self:center!important;
 margin-left:auto!important;margin-right:auto!important;
}
:is(#page-content,#ec-admin-desktop-portal) button.piatnik.ec605-sized>span:last-child{
 min-width:0!important;white-space:normal!important;overflow:visible!important;
 overflow-wrap:normal!important;word-break:normal!important;text-overflow:clip!important;
 font-size:var(--ec605-label-size)!important;
}

/* Requested opt-in device login storage, within the existing login form. */
.login-device-remember{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--gold);font-family:Montserrat,Arial,sans-serif;font-size:12px;line-height:1.3;cursor:pointer;}
.login-device-remember input[type="checkbox"]{width:18px;min-width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:#4cab21;}

body[data-route="/admin/home"]>#ec-admin-desktop-portal .admin-dashboard-grid>button.piatnik.ec605-sized{width:var(--ec605-button-width)!important;min-width:0!important;}

/* V8.606: Decorative podium layers are viewport overlays, not central-content
   fields. Older desktop centering rules otherwise make them relative, collapsing
   their all-absolute children into a zero-size clipping box. */
body #layer-workflow > #page-content > .ceremony-screen > :is(.victory-lightshow,.fireworks,.confetti){
  position:fixed!important;
  inset:0 0 74px!important;
  width:auto!important;height:auto!important;
  max-width:none!important;max-height:none!important;
  margin:0!important;
  pointer-events:none;
}

/* V8.608: shared menu and live-game corrections. */
body[data-route^="/students/league"] #page-content .panel:has(#join-form){width:226px!important;min-width:0!important;padding:14px 30px!important;border:5px solid var(--gold)!important;box-sizing:border-box!important;}
body[data-route^="/students/league"] #join-form .form-grid,
body[data-route^="/students/league"] #join-form .field.full{display:flex!important;flex-direction:column!important;align-items:center!important;}
body[data-route^="/students/league"] #join-form input[name="code"]{width:150px!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;text-align:center!important;}
.lobby-student-button{grid-template-columns:minmax(0,1fr) 36px!important;width:clamp(120px,calc(var(--nickname-length)*17px + 58px),386px)!important;padding-left:12px!important;}
.lobby-student-button .lobby-student-name{grid-column:1!important;transform:none!important;}
.lobby-student-button .lobby-remove{grid-column:2!important;}
body[data-route^="/teacher/room/"] .teacher-ranking-interlude{bottom:66px!important;}
.teacher-ranking-interlude .ec-ranking-line{flex:0 0 36px;height:36px;padding-top:2px;padding-bottom:2px;}
.teacher-ranking-interlude .ec-ranking-list{gap:4px;}
.league-joker-bar{margin:12px auto 0!important;}
 .card-management-nav .mini-card{transform-origin:center bottom;animation:ec610CardSway 15s ease-in-out infinite;}
@keyframes ec610CardSway{0%,78%,100%{rotate:0deg}82%{rotate:-9deg}86%{rotate:8deg}90%{rotate:-5deg}94%{rotate:3deg}}
@media(prefers-reduced-motion:reduce){.card-management-nav .mini-card{animation:none!important}}
/* Single-column menus occupy identical slots; label fitting never widens a button. */

@media(max-width:700px){
 body[data-route^="/teacher/room/"] .teacher-ranking-interlude{bottom:110px!important;}
 
}
#page-content .menu-stack.ec605-button-stack{grid-template-columns:minmax(0,1fr)!important;}
#page-content .menu-stack.ec605-button-stack>button.piatnik{grid-template-columns:36px minmax(0,1fr) 8px!important;}
#page-content .menu-stack.ec605-button-stack>button.piatnik>span:last-child{width:100%!important;max-width:100%!important;white-space:nowrap!important;}
body #layer-workflow #page-content .screen .menu-stack.ec605-button-stack{width:var(--ec605-stack-width)!important;grid-template-columns:minmax(0,1fr)!important;}
body #layer-workflow #page-content .screen .menu-stack.ec605-button-stack>button.piatnik{grid-template-columns:36px minmax(0,1fr) 8px!important;}

/* V8.609: one compact rhythm for matching menus, including Help and Training. */
body #layer-workflow #page-content :is(.menu-stack,.help-menu-stack,.training-mode-menu,.training-unit-grid){row-gap:9px!important;}
body #layer-workflow #page-content .training-menu-layout{grid-template-columns:minmax(0,510px) minmax(0,290.4px)!important;column-gap:12px!important;row-gap:14px!important;}
body #layer-workflow #page-content .training-menu-layout>.training-unit-grid{grid-column:1;grid-row:1;}
body #layer-workflow #page-content .training-menu-layout>.training-mode-menu{grid-column:2;grid-row:1;display:grid!important;grid-template-rows:repeat(4,58px)!important;grid-auto-rows:58px!important;width:100%!important;}
body #layer-workflow #page-content .training-menu-layout .training-unit-grid>button.piatnik{width:100%!important;grid-template-columns:36px minmax(0,1fr) 8px!important;padding:0 8px!important;}
body #layer-workflow #page-content .training-menu-layout :is(.training-mode-menu,.training-unit-grid)>button.piatnik>span:last-child{font-size:22px!important;white-space:nowrap!important;line-height:1!important;padding:0!important;}
.training-resume-row{grid-column:1/-1;display:flex;justify-content:center;align-items:center;}
.training-resume-row .simple-nav{position:static!important;width:130px!important;min-width:130px!important;height:40px!important;margin:0!important;}
body[data-route^="/training/play/"] #page-content .league-joker-bar{position:static!important;inset:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;transform:none!important;width:100%!important;margin:12px auto 0!important;gap:6px!important;}
body #layer-workflow #page-content .privacy-policy-panel h3{margin-top:24px;}
body #layer-workflow #page-content .privacy-policy-panel p{line-height:1.55;}
@media(max-width:700px){
 body #layer-workflow #page-content .training-menu-layout{width:calc(100vw - 24px)!important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;padding:4px!important;column-gap:8px!important;}
 body #layer-workflow #page-content .training-menu-layout .training-unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px 4px!important;grid-template-rows:repeat(4,52px)!important;}
 body #layer-workflow #page-content .training-menu-layout>.training-mode-menu{grid-template-rows:repeat(4,52px)!important;}
 body #layer-workflow #page-content .training-menu-layout :is(.training-unit-grid,.training-mode-menu)>button.piatnik{height:52px!important;min-height:52px!important;grid-template-columns:16px minmax(0,1fr)!important;padding:0 3px!important;gap:1px!important;border-width:3px!important;}
 body #layer-workflow #page-content .training-menu-layout :is(.training-unit-grid,.training-mode-menu)>button.piatnik>span:last-child{font-size:14px!important;}
 body #layer-workflow #page-content .training-menu-layout :is(.training-unit-grid,.training-mode-menu)>button.piatnik .suit{left:3px!important;width:15px!important;height:18px!important;}
}

body #page-content .privacy-policy-panel a{color:#ffe080;text-underline-offset:3px;}

/* V8.610: result first, then a single-line waiting message. */
.league-feedback.wait-feedback{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:center;white-space:nowrap;gap:0;}
.league-feedback.wait-feedback .feedback-copy{display:inline;padding-top:0;}
.league-feedback.wait-feedback .wait-dots{flex:none;width:auto;}

/* V8.611: only the empty pupil lobby and the answer-reveal waiting message. */
body[data-route^="/play/"] #page-content>.screen>.player-wait{position:fixed;left:50%;top:44vh;margin:0!important;translate:-50% -50%;white-space:nowrap;}
.league-feedback.wait-feedback.ec-reveal-wait{opacity:0;animation:ecRevealWaitFade .45s ease var(--wait-delay,3000ms) both!important;}
@keyframes ecRevealWaitFade{from{opacity:0}to{opacity:1}}

/* V8.612: compact outlined lobby code; shared joker control sizing owns dimensions. */
.lobby-code{border:5px solid var(--gold);border-radius:22px;padding:8px 14px!important;box-sizing:border-box;}
.lobby-code::after{content:none!important;display:none!important;}
.league-joker-bar{gap:6px!important;}
.league-joker-bar button{flex:none;}

/* V8.615: nickname change form only; use the existing EC font and Piatnik colours. */
#nickname-change-form{text-align:center}
#nickname-change-form .nickname-current{margin:0 0 14px;color:var(--gold);font-family:ECDisplay,Montserrat,sans-serif;font-size:30px;line-height:1.15}
#nickname-change-form .nickname-current span{display:block;font-size:18px;margin-bottom:6px}
#nickname-change-form .nickname-instructions{margin:0 0 20px;font-family:ECDisplay,Montserrat,sans-serif;font-size:20px;line-height:1.4;color:var(--cream);text-shadow:0 2px 3px #000}
#nickname-change-form .field label{font-family:ECDisplay,Montserrat,sans-serif;font-size:22px;line-height:1.2;color:var(--gold);letter-spacing:0;text-transform:none}
#nickname-change-form .field input{min-height:54px;border:5px solid var(--gold);border-radius:18px;background:#fffbc9;color:var(--ink);font-family:ECDisplay,Montserrat,sans-serif;font-size:24px;line-height:1.2;text-align:center;padding:8px 14px;box-shadow:0 5px 12px #0006}
#nickname-change-form .field input:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* V8.616: privacy text and school declaration stay readable inside the existing panel. */
body #page-content .privacy-policy-panel :is(p,dd,dt,h3,a,label){overflow-wrap:anywhere;min-width:0;}
body #page-content .privacy-policy-panel dd{margin:6px 0 18px;}
body #page-content .privacy-school-declaration label{display:block;margin:12px 0;}
body #page-content .privacy-school-declaration :is(input:not([type="checkbox"]),textarea){box-sizing:border-box;width:100%;max-width:100%;}
body #page-content .privacy-school-declaration textarea{min-height:100px;}
body #page-content .hall-of-champs-panel :is(h4,b,small){overflow-wrap:anywhere;}

/* V8.618 mobile footer: Tutorial has its own book navigation. The separate
   disabled global NEXT is never part of the mobile Tutorial controls. */
@media (max-width:700px) and (orientation:portrait){
 body[data-route="/help/tutorial"] #nav-controls #global-next{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
 }
}

/* V8.618 mobile teacher lobby: disabled START is never painted. No changes
   to the Tutorial book, desktop, or running League/Test controls. */
@media (max-width:700px) and (orientation:portrait){
 body[data-route^="/teacher/room/"] #nav-controls #start-game:disabled{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
 }
}

/* Answer reveal on all devices: preserve card geometry and existing wrong-answer fading. */
 .answer .brush-check{display:none!important}
 .answer:is(.correct-choice,.correct-answer,.training-correction-answer)::after,
 body[data-route^="/training/play"] .training-question-shell .answer.training-correction-answer::after,
 body[data-route^="/training/play"] .training-question-shell .answer.training-correction-answer::before{display:none!important}
 .answer:is(.correct-choice,.correct-answer,.training-correction-answer){box-shadow:0 0 18px 6px #ffe789bb,0 0 30px 8px #ffcc4577;animation:ecMobileAnswerLight 2.4s ease-in-out infinite!important}
@keyframes ecMobileAnswerLight{
 0%,100%{box-shadow:0 0 12px 4px #ffe78988,0 0 24px 6px #ffcc4544}
 50%{box-shadow:0 0 18px 6px #ffe789cc,0 0 34px 10px #ffcc4588}
}
@media (prefers-reduced-motion:reduce){
 .answer:is(.correct-choice,.correct-answer,.training-correction-answer){animation:none!important}
}

/* V8.635: Quiz uses the same compact question order as Training:
   question, answers, motivation hint, NEXT, footer controls/links. */
body[data-route^="/quiz/play"] .quiz-question-shell{margin-top:18px}
body[data-route^="/quiz/play"] .quiz-question-shell .progress-line{margin-bottom:6px}
/* V8.640: keep the motivational copy clear of answers; shared Next is footer-anchored. */
body[data-route^="/quiz/play"] .quiz-feedback{margin-top:18px}
body[data-route^="/training/play"] .training-question-shell .training-feedback{margin-top:30px}

/* V8.641: long prompt/option tokens wrap instead of clipping horizontally. */
body[data-route^="/quiz/play"] .question-card,
body[data-route^="/training/play"] .question-card,
body[data-route^="/quiz/play"] .answer-copy,
body[data-route^="/training/play"] .answer-copy{min-width:0;overflow-wrap:anywhere}


/* V8.644: fixed Piatnik question-field height across Demo, Training, Test and League.
   The field equals two standard answer rows plus their vertical gap, independent of
   whether the question wraps to one, two or three lines. Question text never scrolls. */
body[data-route^="/quiz/play"] .question-card,
body[data-route^="/training/play"] .question-card,
body[data-route^="/teacher/room/"] .question-card,
body[data-route^="/play/"] .question-card{
  box-sizing:border-box!important;
  height:172px!important;
  min-height:172px!important;
  max-height:172px!important;
  padding:12px 24px!important;
  overflow:visible!important;
  line-height:1.15!important;
  font-size:clamp(20px,2vw,34px)!important;
}
@media(max-height:760px) and (hover:none) and (pointer:coarse){
 body[data-route^="/quiz/play"] .question-card,
 body[data-route^="/training/play"] .question-card,
 body[data-route^="/teacher/room/"] .question-card,
 body[data-route^="/play/"] .question-card{
  height:150px!important;min-height:150px!important;max-height:150px!important;
 }
}
@media(max-width:700px) and (orientation:portrait){
 body[data-route^="/quiz/play"] .question-card,
 body[data-route^="/training/play"] .question-card,
 body[data-route^="/teacher/room/"] .question-card,
 body[data-route^="/play/"] .question-card{
  height:141px!important;min-height:141px!important;max-height:141px!important;
  padding:12px!important;font-size:clamp(17px,4.7vw,22px)!important;
 }
 body:has(#student-avatar-layer:not(.hidden))[data-route^="/quiz/play"] .question-card,
 body:has(#student-avatar-layer:not(.hidden))[data-route^="/training/play"] .question-card,
 body:has(#student-avatar-layer:not(.hidden))[data-route^="/teacher/room/"] .question-card,
 body:has(#student-avatar-layer:not(.hidden))[data-route^="/play/"] .question-card{
  height:99px!important;min-height:99px!important;max-height:99px!important;
 }
}
@media(max-width:700px) and (orientation:landscape){
 body[data-route^="/quiz/play"] .question-card,
 body[data-route^="/training/play"] .question-card,
 body[data-route^="/teacher/room/"] .question-card,
 body[data-route^="/play/"] .question-card{
  height:102px!important;min-height:102px!important;max-height:102px!important;
  padding:10px 16px!important;font-size:clamp(16px,2.6vw,20px)!important;
 }
}

/* V8.648: entry controls and background fallback. */
body.ec-entry-shell #hud .hud-right{display:none!important}
body.ec-entry-shell #bottom-control-unit #nav-controls{position:fixed!important;inset:auto max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) auto!important;display:flex!important;gap:6px!important;align-items:end!important;width:auto!important;height:auto!important;pointer-events:none}
body.ec-entry-shell #bottom-control-unit #nav-controls.hidden{display:none!important}
body.ec-entry-shell #bottom-control-unit #nav-controls > .simple-nav{position:static!important;inset:auto!important;transform:none!important;margin:0!important;pointer-events:auto}
body.ec-entry-shell #entry-back{order:1}body.ec-entry-shell #entry-home{order:2}
#background{background-color:#050914;background-image:linear-gradient(#05091470,#05091470),url('/assets/backgrounds/castle-walk-v8.17.webp')}

/* No vacant control slot between BACK and HOME. */
#bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause)){position:fixed!important;inset:auto max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) auto!important;display:flex!important;gap:6px!important;width:auto!important;height:auto!important}
#bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.simple-nav{position:static!important;inset:auto!important;margin:0!important;transform:none!important}
#bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.back{order:1}
#bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.home{order:2}

/* V8.649 privacy page: stationary rim and confirmation outside, above controls. */
body.ec649-privacy #page-content::before{display:none!important}
body.ec649-privacy #page-content>.screen{zoom:1!important;transform:none!important;translate:none!important;overflow:visible!important}
body.ec649-privacy .privacy-layout{position:fixed!important;top:var(--privacy-top,180px)!important;bottom:var(--privacy-bottom,64px)!important;left:50%!important;transform:translateX(-50%)!important;translate:none!important;width:min(960px,calc(100vw - 32px))!important;display:flex!important;flex-direction:column!important;gap:8px!important;min-height:0!important}
body.ec649-privacy .privacy-policy-panel{position:relative!important;inset:auto!important;flex:1 1 0!important;min-height:0!important;max-height:none!important;width:100%!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;border:5px solid #ffc400!important;border-radius:28px!important;padding:18px!important;margin:0!important;background:rgba(5,9,20,.82)!important;transform:none!important;translate:none!important}
body.ec649-privacy .privacy-confirm-row{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;padding:0!important;color:#fff;box-sizing:border-box!important}
body.ec649-privacy .privacy-confirm-row label{display:flex!important;align-items:center!important;gap:9px!important;flex:1 1 auto!important;min-width:0!important;font:14px/1.3 Montserrat,Arial,sans-serif!important;text-shadow:0 1px 3px #000}
body.ec649-privacy .privacy-confirm-row input{flex:0 0 24px!important;width:24px!important;height:24px!important;margin:0!important;accent-color:#27b800}
body.ec649-privacy .privacy-confirm-row button{position:static!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;font-size:12px!important;height:44px!important;padding:0 10px!important}
body.ec649-privacy #message:empty{display:none!important}
body.ec649-privacy #message:not(:empty){position:absolute;bottom:100%;left:0;background:#08101b;color:#fff}
body.ec-anyone-shell #hud .hud-right{display:none!important}
@media(max-width:700px){body.ec649-privacy .privacy-layout{width:calc(100vw - 16px)!important;gap:6px!important}body.ec649-privacy .privacy-policy-panel{padding:12px!important;border-width:4px!important;border-radius:18px!important}body.ec649-privacy .privacy-confirm-row{gap:6px!important}body.ec649-privacy .privacy-confirm-row label{font-size:11px!important;gap:5px!important}body.ec649-privacy .privacy-confirm-row button{font-size:10px!important;max-width:115px!important;white-space:normal!important}}

/* V8.650: privacy belongs to the viewport, outside translated workflow layers. */
body.ec649-privacy>#ec-privacy-portal{position:fixed!important;z-index:15!important;left:50%!important;right:auto!important;top:var(--privacy-top,180px)!important;bottom:var(--privacy-bottom,64px)!important;width:min(960px,calc(100vw - 32px))!important;height:auto!important;max-height:none!important;min-height:0!important;margin:0!important;padding:0!important;transform:translateX(-50%)!important;translate:none!important;zoom:1!important;display:flex!important;flex-direction:column!important;overflow:visible!important;box-sizing:border-box!important}
body.ec649-privacy>#ec-privacy-portal>.privacy-policy-panel{height:auto!important;flex:1 1 0px!important;min-height:0!important;overflow:auto!important;max-height:none!important}
body.ec649-privacy>#ec-privacy-portal>.privacy-confirm-row{border:0!important;width:100%!important;max-width:none!important;overflow:visible!important}
#ec-privacy-portal .privacy-confirm-row label{white-space:normal!important;overflow:visible!important}
#ec-privacy-portal .privacy-policy-panel p{line-height:1.55}
@media(max-width:700px){body.ec649-privacy>#ec-privacy-portal{width:calc(100vw - 16px)!important}}

/* Privacy-only width and readable confirmation. */
body.ec649-privacy>#ec-privacy-portal{width:min(1200px,calc(100vw - 32px))!important}
body.ec649-privacy>#ec-privacy-portal .privacy-policy-panel{color:var(--cream)!important;text-align:left!important}
body.ec649-privacy>#ec-privacy-portal .privacy-confirm-row{border:0!important}
body.ec649-privacy>#ec-privacy-portal .privacy-confirm-row label{font-size:clamp(11px,1vw,15px)!important}
@media(max-width:700px){body.ec649-privacy>#ec-privacy-portal{width:calc(100vw - 16px)!important}}
/* Privacy-only phone footer: five reachable controls and links below them. */
@media(max-width:700px){
 body.ec649-privacy{--privacy-control-width:min(76px,calc((100vw - 40px)/5))}
 body.ec649-privacy #bottom-control-unit :is(#screen-button,#mute-button,#help-language-button,#entry-back,#entry-home,#nav-controls>.back,#nav-controls>.home){position:fixed!important;top:auto!important;bottom:26px!important;width:var(--privacy-control-width)!important;min-width:var(--privacy-control-width)!important;max-width:var(--privacy-control-width)!important;height:38px!important;min-height:38px!important;padding:0 2px!important;font-size:10px!important;transform:none!important;translate:none!important;margin:0!important}
 body.ec649-privacy #screen-button{left:8px!important;right:auto!important}
 body.ec649-privacy #mute-button{left:calc(14px + var(--privacy-control-width))!important;right:auto!important}
 body.ec649-privacy #help-language-button{left:calc(20px + 2*var(--privacy-control-width))!important;right:auto!important}
 body.ec649-privacy #bottom-control-unit #nav-controls>:is(#entry-back,.back){left:auto!important;right:calc(14px + var(--privacy-control-width))!important}
 body.ec649-privacy #bottom-control-unit #nav-controls>:is(#entry-home,.home){left:auto!important;right:8px!important}
 body.ec649-privacy #bottom-links{bottom:3px!important;font-size:10px!important;gap:12px!important;line-height:14px!important;white-space:nowrap!important}
}
@media(max-width:700px){
 body.ec649-privacy #bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.simple-nav{position:fixed!important;bottom:26px!important;top:auto!important}
}
body.ec649-privacy>#ec-privacy-portal{z-index:25!important;pointer-events:auto!important}

/* V8.651: privacy rim and acknowledgement share two thirds of the previous desktop/tablet width. */
@media(min-width:701px){body.ec649-privacy>#ec-privacy-portal{width:min(800px,calc(66.666667vw - 21.333334px))!important}}

/* V8.652: compact login Piatnik rim; input widths remain those of the existing panel. */
#page-content .login-panel.ec-login-target{overflow:visible!important}
#page-content .ec-login-frame{position:relative;box-sizing:border-box;margin:0 -18px;padding:16px 14px;border:4px solid var(--gold);border-radius:18px;background:rgba(5,9,20,.78);box-shadow:0 7px 0 #110d08}
#page-content .ec-login-frame>.question-suits{position:absolute!important;top:-15px!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;gap:8px!important;height:24px!important;font-size:23px!important;line-height:24px!important;pointer-events:none}
#page-content .login-panel .ec-login-actions{margin-top:12px!important;margin-bottom:0!important}
#page-content .ec-login-frame [role="status"]:empty{display:none}
@media(max-width:700px){#page-content .ec-login-frame{margin-inline:-4px;padding:14px 0;border-radius:16px}#page-content .ec-login-frame>.question-suits{font-size:20px!important}}

#page-content>.screen:has(>.ec-login-target){overflow:visible!important}
@media(max-width:360px){body.ec-teacher-reset #bottom-control-unit :is(#screen-button,#mute-button,#help-language-button,#entry-back,#entry-home){width:calc((100vw - 40px)/5)!important;min-width:0!important;max-width:none!important;padding:0 2px!important;font-size:10px!important}body.ec-teacher-reset #help-language-button{left:calc(20px + 2*(100vw - 40px)/5)!important}body.ec-teacher-reset #entry-back{right:calc(14px + (100vw - 40px)/5)!important}}

/* Limited public forms use the existing compact phone footer. */
@media(max-width:700px){
 body.ec-public-workflow{--privacy-control-width:min(76px,calc((100vw - 40px)/5))}
 body.ec-public-workflow #bottom-control-unit :is(#screen-button,#mute-button,#help-language-button,#entry-back,#entry-home,#nav-controls>.back,#nav-controls>.home){position:fixed!important;top:auto!important;bottom:26px!important;width:var(--privacy-control-width)!important;min-width:var(--privacy-control-width)!important;max-width:var(--privacy-control-width)!important;height:38px!important;min-height:38px!important;padding:0 2px!important;font-size:10px!important;transform:none!important;translate:none!important;margin:0!important}
 body.ec-public-workflow #screen-button{left:8px!important;right:auto!important}
 body.ec-public-workflow #mute-button{left:calc(14px + var(--privacy-control-width))!important;right:auto!important}
 body.ec-public-workflow #help-language-button{left:calc(20px + 2*var(--privacy-control-width))!important;right:auto!important}
 body.ec-public-workflow #bottom-control-unit #nav-controls>:is(#entry-back,.back){left:auto!important;right:calc(14px + var(--privacy-control-width))!important}
 body.ec-public-workflow #bottom-control-unit #nav-controls>:is(#entry-home,.home){left:auto!important;right:8px!important}
 body.ec-public-workflow #bottom-links{bottom:3px!important;font-size:10px!important;gap:12px!important;line-height:14px!important;white-space:nowrap!important}
}
@media(max-width:700px){
 body.ec-public-workflow #bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.simple-nav{position:fixed!important;bottom:26px!important;top:auto!important}
}

/* Prevent footer controls overlapping on the narrowest entry login screens. */
@media(max-width:360px){
 body.ec-entry-shell:has(.ec-login-target){--privacy-control-width:min(76px,calc((100vw - 40px)/5))}
 body.ec-entry-shell:has(.ec-login-target) #bottom-control-unit :is(#screen-button,#mute-button,#help-language-button,#entry-back,#entry-home,#nav-controls>.back,#nav-controls>.home){position:fixed!important;top:auto!important;bottom:26px!important;width:var(--privacy-control-width)!important;min-width:var(--privacy-control-width)!important;max-width:var(--privacy-control-width)!important;height:38px!important;min-height:38px!important;padding:0 2px!important;font-size:10px!important;transform:none!important;translate:none!important;margin:0!important}
 body.ec-entry-shell:has(.ec-login-target) #screen-button{left:8px!important;right:auto!important}
 body.ec-entry-shell:has(.ec-login-target) #mute-button{left:calc(14px + var(--privacy-control-width))!important;right:auto!important}
 body.ec-entry-shell:has(.ec-login-target) #help-language-button{left:calc(20px + 2*var(--privacy-control-width))!important;right:auto!important}
 body.ec-entry-shell:has(.ec-login-target) #bottom-control-unit #nav-controls>:is(#entry-back,.back){left:auto!important;right:calc(14px + var(--privacy-control-width))!important}
 body.ec-entry-shell:has(.ec-login-target) #bottom-control-unit #nav-controls>:is(#entry-home,.home){left:auto!important;right:8px!important}
 body.ec-entry-shell:has(.ec-login-target) #bottom-links{bottom:3px!important;font-size:10px!important;gap:12px!important;line-height:14px!important;white-space:nowrap!important}
}
@media(max-width:360px){
 body.ec-entry-shell:has(.ec-login-target) #bottom-control-unit #nav-controls:has(>.home):has(>.back):not(:has(>.next,>.quit,>.pause))>.simple-nav{position:fixed!important;bottom:26px!important;top:auto!important}
}

/* V8.655: reserve the measured shared footer, including links and safe area. */
body.ec-footer-flow:not(.area-splash) #page-content{bottom:var(--ec-footer-reserve,90px)!important}

/* V8.658: tiny gameplay may use the clear space immediately below the logo.
   Keep the existing fixed question field and show its progress/suit edge fully. */
body.ec-footer-tiny #page-content:has(.question-shell),
body.ec-footer-tiny #page-content>.screen:has(.question-shell){overflow:visible!important}

/* V8.676: compact support request, unified gold editor, readable activities */
.support-question-button{font-size:clamp(13px,1.4vw,16px)!important;font-weight:650!important;line-height:1.4!important}
.support-answer-editor{border:2px solid #f4bf20!important;background:#071933!important}
.support-answer-editor [data-support-language][hidden]{display:none!important}
.ec-activities-panel{max-height:68vh;overflow:auto;width:min(1100px,94vw)}
.ec-activities-panel .data-table{font-size:13px;min-width:650px}.ec-activities-panel h3{margin-top:22px}

/* V8.676: show the same school plausibility alerts as Central Admin Monitoring. */
.school-summary-row.school-has-alerts{border-color:#ff9b38!important;box-shadow:inset 0 0 0 1px #ff9b38,0 0 12px #ff9b3866}
.school-summary-row .school-alert-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;margin:2px 4px;border:2px solid #ffbc4a;border-radius:8px;background:#7a2719;color:#fff1cb;font-size:12px;font-weight:900;white-space:nowrap;grid-column:1;justify-self:start}
.school-summary-row.school-has-alerts .school-row-name{grid-column:1}
.school-summary-row.school-has-alerts .school-row-status{grid-column:2;grid-row:1}
.school-summary-row.school-has-alerts .school-row-actions{grid-column:3;grid-row:1 / span 2}
@media(max-width:700px){.school-summary-row.school-has-alerts .school-row-actions{grid-column:1 / -1;grid-row:auto}.school-summary-row.school-has-alerts .school-row-status{grid-column:2;grid-row:1}}

/* V8.676 alert compact button: no additional grid rows. */
body.ec500-framed #page-content .school-summary-row{grid-template-columns:minmax(130px,1fr) max-content 48px max-content!important;align-items:center!important}
body.ec500-framed #page-content .school-summary-row:not(.school-has-alerts){grid-template-columns:minmax(130px,1fr) max-content 48px max-content!important}
body.ec500-framed #page-content .school-row-name{grid-column:1!important;grid-row:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.ec500-framed #page-content .school-row-status{grid-column:2!important;grid-row:1!important}
body.ec500-framed #page-content .school-row-actions{grid-column:4!important;grid-row:1!important}
body.ec500-framed #page-content .school-alert-button{grid-column:3!important;grid-row:1!important;display:inline-flex!important;align-items:center;justify-content:center;width:46px;height:27px;padding:0 3px;border:2px solid #ffb43b;border-radius:7px;background:#a34b12;color:white;font-size:12px;font-weight:900;cursor:pointer}
body.ec500-framed #page-content .school-alert-button:hover,body.ec500-framed #page-content .school-alert-button:focus-visible{background:#d16b17;outline:2px solid #ffdc82}
body.ec500-framed #page-content .school-summary-row.school-has-alerts .school-row-actions{grid-row:1!important;grid-column:4!important}
body.ec500-framed #page-content .school-summary-row.school-has-alerts .school-row-status{grid-row:1!important;grid-column:2!important}
.school-alert-dialog{max-width:min(560px,92vw);max-height:85vh;overflow:auto;color:#fff;background:#102b4b;border:2px solid #ffb43b;border-radius:12px;padding:22px}
.school-alert-dialog li{margin:10px 0}
@media(max-width:760px){body.ec500-framed #page-content .school-summary-row{min-width:590px!important;grid-template-columns:minmax(130px,1fr) max-content 48px max-content!important}body.ec500-framed #page-content .school-summary-row .school-row-actions{grid-column:4!important;grid-row:1!important}}