.cloud-heading{padding:36px 0 24px}.cloud-heading h1{font-size:clamp(30px,4vw,48px);margin:20px 0 12px}.cloud-heading p{color:#796c5b;line-height:1.7}.cloud-toolbar,.cloud-context-tools,.cloud-profile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cloud-toolbar>div,.cloud-room-actions,.cloud-card>div{display:flex;gap:10px;flex-wrap:wrap}.cloud-context-tools{padding:14px 18px;border:1px solid #d5c9b4;border-radius:14px;background:#fff9ec;margin-top:20px}.cloud-context-tools a{margin-left:auto}.cloud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:22px;padding:25px 0}.cloud-card,.cloud-empty,.cloud-join,.cloud-room-side{padding:26px;border:1px solid #c6b796;border-radius:20px;background:#fffbf2;box-shadow:0 6px 0 #3e32100a}.cloud-card h2{font-size:23px;margin:15px 0}.cloud-card>span,.cloud-card small{color:#887555}.cloud-card>div{margin-top:24px}.cloud-card p{margin-bottom:14px}.cloud-empty{grid-column:1/-1;text-align:center;padding:48px 25px}.cloud-empty p{margin:18px 0;line-height:1.7}.cloud-profile{padding:20px;background:#efe9da;border-radius:15px;margin:15px 0}.cloud-profile label,.cloud-join label,#cloud-dialog label,.cloud-room-side label{display:flex;flex-direction:column;gap:8px}.cloud-footnote{font-size:13px;color:#867b6a}.cloud-profile input,.cloud-join input,#cloud-dialog input,#cloud-dialog textarea,.cloud-room-side input{font:inherit;padding:13px;border:1px solid #b9ab8e;border-radius:10px;background:#fffdf7;max-width:100%;width:100%;box-sizing:border-box}.cloud-join{max-width:500px;margin:20px auto}.cloud-join .primary{margin-top:22px}.cloud-profile label{flex:1;min-width:180px;max-width:350px}#cloud-dialog{position:fixed;margin:auto;width:min(640px,calc(100vw - 30px));padding:30px;border:1px solid #8c7657;border-radius:22px;color:#392f24;background:#fffaf0;max-height:88vh;overflow:auto;box-sizing:border-box}#cloud-dialog::backdrop{background:#32281c70;backdrop-filter:blur(4px)}#cloud-dialog h2{padding-right:35px;margin-bottom:24px}#cloud-dialog form{display:grid;gap:20px}#cloud-dialog textarea{min-height:200px}#cloud-save-status{color:#8f3928;line-height:1.5}.cloud-close{position:absolute;right:16px;top:12px;font-size:25px}.cloud-use-games{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}#cloud-account{max-width:200px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cloud-live{display:flex;justify-content:space-between;align-items:center;padding:15px;border-radius:12px;background:#e7ecdb;margin-bottom:20px}.cloud-live b{font:700 24px monospace;letter-spacing:3px}.cloud-room-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.cloud-room-side canvas{display:block;margin:20px auto;max-width:100%}.cloud-room-side h2{font-size:19px;margin-bottom:15px}.cloud-room-side ul{list-style:none;padding:0;margin:18px 0}.cloud-room-side li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e6dbc6}.cloud-room-side input{font-size:12px}.cloud-room-side .secondary{margin:12px 0 28px}.cloud-room-actions{margin:20px 0}.cloud-mole{padding:24px;background:#f5f6e9;border:1px solid #c5bea2;border-radius:20px}.cloud-mole .mole-board{padding:10px;gap:16px}.cloud-mole .mole-question h1{font-size:clamp(35px,5vw,65px)}.cloud-answer-feedback{text-align:center;line-height:1.7;margin:22px 0 0}.cloud-mole .mole-target:disabled{opacity:1;cursor:default}.offline{color:#a34930}body:has(.cloud-room) main,body:has(.cloud-library) main{max-width:1400px;width:calc(100% - 64px);margin:auto}.cloud-room-side{align-self:start}.cloud-mole .mole-option{max-width:100%;overflow-wrap:anywhere;font-size:clamp(12px,1.5vw,19px)}@media(max-width:950px){.cloud-room-layout{grid-template-columns:1fr}.cloud-room-side{width:100%;box-sizing:border-box}.cloud-room-side canvas{width:160px}.cloud-toolbar>div{flex-wrap:wrap}.cloud-live{gap:12px;flex-wrap:wrap}}@media(max-width:600px){body:has(.cloud-room) main,body:has(.cloud-library) main{width:calc(100% - 24px)}.cloud-mole{padding:12px}.cloud-mole .mole-board{gap:6px}.cloud-context-tools{padding:10px}.cloud-context-tools button{font-size:12px}.cloud-use-games{grid-template-columns:1fr}#cloud-account{max-width:105px}.cloud-room-side{padding:20px}.cloud-toolbar button{font-size:13px}}

.cloud-history{display:grid;gap:12px;margin:20px 0}.cloud-past-rooms{margin-top:35px} @media(max-width:900px){body header{flex-wrap:wrap;gap:12px;padding:16px 20px!important}body header nav{margin-left:0!important;gap:18px;order:3;width:100%;height:auto;justify-content:center}body header nav a{padding:8px 0}.header-right{margin-left:auto!important;gap:10px}body header .brand{min-width:0}} @media(max-width:480px){body header .brand span{font-size:15px}body header .fang-logo{width:32px}.header-right #motion-toggle{display:none}body header nav{gap:18px}body header nav a{font-size:12px}.header-right .language-switch{padding:5px 8px}.header-right{gap:6px}.header-right #cloud-account{max-width:90px;font-size:11px}}

body:has(.cloud-heading) main{width:calc(100% - 64px);max-width:1400px;margin:auto}@media(max-width:600px){body:has(.cloud-heading) main{width:calc(100% - 24px)}}
body:has(.cloud-heading){min-width:0;width:100%} .cloud-card>div{align-items:center}
.cloud-room-layout>div{min-width:0}.cloud-mole{margin:0;width:100%;max-width:100%;box-sizing:border-box}.cloud-mole .mole-board{grid-template-columns:repeat(3,minmax(0,1fr))}.cloud-mole .mole-target{min-width:0}.cloud-mole .mole-option{min-width:0;box-sizing:border-box}@media(max-width:950px){.cloud-room-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:480px){.cloud-mole .mole-hole{width:95%}.cloud-mole .mole-animal{width:88px}.cloud-mole .mole-nose{left:27px}.cloud-mole .mole-board{padding:4px;gap:3px}}
@media(max-width:900px){body header{height:auto!important;min-height:0;position:relative!important;top:auto!important}body header nav{position:static!important}}

/* Student links are a dedicated classroom surface, independent of teacher login. */
body.student-layout{min-width:0!important;width:100%;}
body.student-layout header nav,body.student-layout #cloud-account,body.student-layout #motion-toggle,body.student-layout footer,body.student-layout .paper-decor{display:none!important}
body.student-layout header{position:relative!important;justify-content:space-between;height:auto!important;min-height:76px;padding:18px clamp(16px,5vw,64px)!important}
body.student-layout .header-right{margin-left:auto!important}
body.student-layout main{width:calc(100% - 32px)!important;max-width:1100px!important;margin:0 auto!important;padding:clamp(32px,8vh,88px) 0!important;min-height:calc(100dvh - 100px);box-sizing:border-box}
.student-entry{max-width:480px;margin:0 auto;padding:clamp(24px,5vw,44px);background:#fffaf0;border:1px solid #dbcdb3;border-radius:24px;box-shadow:0 8px 0 #5b483c0b;text-align:center}
.student-eyebrow{font-size:13px;color:#866b46;letter-spacing:.08em}
.student-entry h1{font-size:clamp(26px,5vw,36px);line-height:1.35;margin:18px 0;overflow-wrap:anywhere}
.student-entry>p{font-size:15px;line-height:1.8;color:#786d60}
.student-entry .cloud-join{width:100%;max-width:none;padding:0;margin:28px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;box-sizing:border-box}
.student-entry input{width:100%;min-width:0;box-sizing:border-box;font-size:18px;margin-top:10px}
.student-entry .primary{width:100%;margin-top:12px;min-height:48px}
.student-entry #cloud-join-code input{text-transform:uppercase;letter-spacing:.18em}
.student-room-heading{text-align:center;margin:0 0 26px}.student-room-heading h1{font-size:clamp(26px,5vw,38px);overflow-wrap:anywhere}
body.student-layout:has(.cloud-room) main{padding-top:24px!important}
body.student-layout .cloud-room-layout{grid-template-columns:minmax(0,1fr)}
body.student-layout .cloud-room-side{width:100%;box-sizing:border-box}
body.student-layout .cloud-room-side ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 24px}
#student-entry-link{white-space:nowrap}

/* All classroom tools must fit the device, not a fixed desktop canvas. */
body{min-width:0}
@media(max-width:850px){
 .workspace,.practice-intro,.tool-intro,.classroom-shell{width:calc(100% - 32px)!important;margin-left:auto!important;margin-right:auto!important}
 .workspace,.guess-setup,.picker-shell{grid-template-columns:minmax(0,1fr)}
 .workspace>* , .guess-setup>* , .picker-shell>*{min-width:0}
 .mole-setup{grid-template-columns:minmax(0,1fr)}.mole-setup>*{min-width:0}.mole-config{padding:20px!important}.mole-type-tabs,.source-tabs{flex-wrap:wrap}
 .word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .picker-shell{min-height:0}.picker-stage{padding:20px!important;min-width:0}
 .cloud-context-tools{flex-wrap:wrap;gap:10px}.cloud-context-tools>a{margin-left:0}
 .question-body,.flash-body{padding:24px 18px 15px}.big-flash{width:100%;max-width:390px}
 .play-shell,.results{width:calc(100% - 24px);margin:24px auto}.results{padding:24px 16px}
 .start-bar,.result-actions{flex-wrap:wrap;gap:12px}.review-list>div{grid-template-columns:1fr 1fr}
 .guess-actions,.picker-rules{flex-wrap:wrap;gap:12px}
 .pw-components{gap:6px}.pw-components div{min-width:56px}
 footer{flex-wrap:wrap;gap:16px}footer nav{flex-wrap:wrap}
}
@media(max-width:480px){
 .word-grid{grid-template-columns:minmax(0,1fr)}.word-text{max-width:none}
 .grid-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .answers{grid-template-columns:minmax(0,1fr)}
 .header-right #cloud-account{max-width:none}
 .mole-play{padding:16px!important;width:calc(100% - 24px)!important}
}