.student-home{width:min(1040px,100%);min-height:100dvh;margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);background:#fff;box-shadow:0 0 48px #18304a16}
.student-visual{position:relative;overflow:hidden;padding:48px 56px;background:linear-gradient(145deg,#eaf8ff 0%,#f5fbff 55%,#dff3ff 100%);display:flex;flex-direction:column;min-height:650px}
.student-visual:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:#fff8;right:-130px;bottom:-150px}
.student-label,.entry-heading>span{display:block;color:#1687df;font-size:13px;font-weight:950;letter-spacing:.16em;margin-bottom:8px}
.student-visual .brand{font-size:clamp(48px,7vw,76px);line-height:.92;margin:0;color:#17273c}.student-visual .brand span{color:#ff4d45}
.student-art{position:relative;height:310px;display:grid;place-items:center;margin:auto 0 12px}.student-art img{position:absolute;width:155px;aspect-ratio:63/88;object-fit:contain;filter:drop-shadow(0 14px 10px #18304a24)}.student-art img:nth-child(1){transform:translateX(-125px) rotate(-14deg)}.student-art img:nth-child(2){z-index:2;transform:scale(1.08) rotate(3deg)}.student-art img:nth-child(3){transform:translateX(125px) rotate(15deg)}
.student-visual>p{position:relative;z-index:1;margin:0;text-align:center;color:#42556d;font-size:18px;font-weight:850}
.student-entry{padding:64px 58px;display:flex;flex-direction:column;justify-content:center;background:#fff}.entry-heading{margin-bottom:34px}.entry-heading h2{margin:0 0 10px;color:#17273c;font-size:32px;line-height:1.25}.entry-heading p{margin:0;color:#728096;font-size:16px}
.student-entry>label{margin:0 0 9px;color:#34465d;font-size:15px;font-weight:850}.student-entry>input{width:100%;height:56px;margin:0 0 22px;padding:0 17px;border:1.5px solid #d7dee8;border-radius:12px;background:#fbfcfe;color:#17273c;font:inherit;font-size:17px;box-sizing:border-box}.student-entry>input:focus{outline:3px solid #1687df24;border-color:#1687df}.student-entry #room-code{font-size:22px;font-weight:900;letter-spacing:.22em}
.student-join{min-height:58px;display:flex;align-items:center;justify-content:center;gap:20px;margin:3px 0 14px!important;border-radius:12px!important;background:#1687df!important;font-size:17px!important}.student-join span{font-size:22px}
.study-room{min-height:78px;padding:13px 17px;border:1.5px solid #cfe2f4;border-radius:12px;background:#eef8ff;color:#17273c;display:flex;align-items:center;justify-content:space-between;text-align:left}.study-room span{display:grid;gap:4px}.study-room b{font-size:16px}.study-room small{color:#64788f;font-size:12px}.study-room strong{padding:11px 9px;border-radius:9px;background:#fff;color:#1687df;letter-spacing:.08em;box-shadow:0 4px 12px #18304a12}.student-entry>.student-resume{width:100%;min-height:72px;margin:0 0 24px;padding:12px 16px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;border:2px solid #1687df;border-radius:14px;background:#eaf6ff;color:#14385c;text-align:left;box-shadow:0 4px 0 #1687df26}.student-resume>span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1687df;color:#fff;font-size:23px;font-weight:900}.student-resume>b{font-size:16px;line-height:1.2}.student-resume>small{margin-top:3px;color:#5c7690;font-size:12px}.student-resume:active{transform:translateY(2px);box-shadow:0 2px 0 #1687df26}

/* Desktop mobile preview must keep the real phone study layout even though the
   outer browser viewport is landscape. */
html.mobile-preview #app:has(.study){background:#fff8e8}
html.mobile-preview .study{width:100%;height:auto;min-height:100%;max-width:620px;display:flex;grid-template-columns:none;grid-template-rows:none;gap:14px;padding:14px 18px 18px;background:#fff8e8}
html.mobile-preview .study-header,html.mobile-preview .study progress,html.mobile-preview .study-picture,html.mobile-preview .study-slots,html.mobile-preview .study-feedback,html.mobile-preview .study-choices{grid-column:auto;grid-row:auto}
html.mobile-preview .study-picture{width:100%;height:auto;min-height:220px;max-height:560px;flex:1 1 300px}
html.mobile-preview .study-slots{display:flex;align-self:auto;justify-content:center}

/* Match the APK's portrait play screen inside the desktop phone preview. */
html.mobile-preview .game{box-sizing:border-box;width:100%;max-width:none;height:100%;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden;position:relative;--slot-height:40px;--picture-size:54px;--board-gap:6px;background:var(--paper)}
html.mobile-preview .game .scores{flex:0 0 auto;width:100%;display:grid;grid-template-columns:repeat(var(--score-count),minmax(0,1fr));gap:5px;padding:10px 10px 8px;min-width:0}
html.mobile-preview .game .score{min-width:0;width:100%;height:46px;min-height:46px;padding:6px;gap:5px;overflow:hidden}
html.mobile-preview .game .score.active{padding:5px}
html.mobile-preview .game .score .avatar{width:26px;height:26px;flex:0 0 26px}
html.mobile-preview .game .score strong{margin-left:auto;font-size:20px;line-height:1}
html.mobile-preview .game .scores.many .score-name{display:none}
html.mobile-preview .game .board{box-sizing:border-box;width:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column;grid-template-columns:none;grid-template-rows:none;grid-auto-rows:auto;align-content:normal;gap:var(--board-gap);overflow-y:auto;padding:2px 10px 8px}
html.mobile-preview .game .word-card{box-sizing:border-box;width:100%;height:auto;max-height:none;flex:1 0 auto;min-height:72px;display:grid;grid-template-columns:var(--picture-size) minmax(0,1fr);grid-template-rows:1fr;align-items:center;gap:7px;padding:7px 8px}
html.mobile-preview .game .picture-row{grid-column:1;grid-row:1;width:var(--picture-size);height:var(--picture-size);min-height:0;margin:0;padding:0;justify-content:center}
html.mobile-preview .game .picture-button{width:var(--picture-size);height:var(--picture-size);margin:auto}
html.mobile-preview .game .word-label{display:none}
html.mobile-preview .game .slots{grid-column:2;grid-row:1;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:4px;padding:0;overflow:visible}
html.mobile-preview .game .slot{min-width:0;width:100%;height:var(--slot-height);font-size:23px}
html.mobile-preview .game .word-card.long-word{min-height:118px}
html.mobile-preview .game .hand-panel{box-sizing:border-box;flex:0 0 auto;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:8px 10px 10px;position:relative;inset:auto;display:flex;flex-direction:column;gap:5px;overflow:visible;border-radius:18px 18px 0 0}
html.mobile-preview .game .hand-panel-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin:0}
html.mobile-preview .game .hand-panel-controls{display:flex;align-items:center;gap:6px;white-space:nowrap}
html.mobile-preview .game .hand-title{display:none}
html.mobile-preview .game .hand{flex:none;width:100%;min-height:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
html.mobile-preview .game .hand-card,html.mobile-preview .game .hand-gap{min-width:0;width:100%;height:58px;font-size:29px}
html.mobile-preview .game .hand-card .corner{display:none}
html.mobile-preview .game .actions{flex:none;width:100%;margin:7px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html.mobile-preview .game .actions button{min-height:44px;margin:0;padding:7px 4px;font-size:12px;box-shadow:none}
@media(max-width:760px){.student-home{display:block;min-height:100dvh}.student-visual{min-height:auto;padding:26px 24px 20px}.student-visual .brand{font-size:46px}.student-art{height:150px}.student-art img{width:84px}.student-art img:nth-child(1){transform:translateX(-70px) rotate(-14deg)}.student-art img:nth-child(3){transform:translateX(70px) rotate(15deg)}.student-visual>p{font-size:15px}.student-entry{padding:28px 24px 36px}.entry-heading{margin-bottom:24px}.entry-heading h2{font-size:26px}.student-entry>input{height:52px;margin-bottom:16px}}

/* Phone-first entry screen: safe areas, reachable controls, and no sideways scroll. */
@media(max-width:760px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 .student-home{width:100%;min-height:100svh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-shadow:none}
 .student-entry>input,.student-entry>button{min-height:48px;touch-action:manipulation}
 .student-entry>input{font-size:16px}
}
@media(max-width:380px){
 .student-visual{padding:18px 18px 14px}.student-label{font-size:12px}.student-visual .brand{font-size:40px}.student-art{height:112px}.student-art img{width:68px}.student-art img:nth-child(1){transform:translateX(-56px) rotate(-14deg)}.student-art img:nth-child(3){transform:translateX(56px) rotate(15deg)}
 .student-entry{padding:20px 18px 26px}.entry-heading{margin-bottom:16px}.entry-heading h2{font-size:23px}.entry-heading p{font-size:14px}.student-entry>label{margin-bottom:6px}.student-entry>input{height:48px;margin-bottom:12px}.student-join{min-height:50px;margin-bottom:10px!important}.study-room{min-height:68px;padding:10px 12px}.study-room small{font-size:11px}
}
@media(max-width:760px) and (max-height:700px){
 .student-visual{padding-top:14px;padding-bottom:10px}.student-art{height:88px}.student-art img{width:58px}.student-art img:nth-child(1){transform:translateX(-48px) rotate(-14deg)}.student-art img:nth-child(3){transform:translateX(48px) rotate(15deg)}.student-visual>p{display:none}
 .student-entry{padding-top:16px;padding-bottom:18px}.entry-heading{margin-bottom:12px}.entry-heading p{display:none}.student-entry>input{margin-bottom:10px}.study-room{min-height:60px}
}
@media(orientation:landscape) and (max-height:560px){
 .student-home{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(360px,1.1fr);height:100dvh;min-height:0;overflow:hidden}
 .student-visual{min-height:0;padding:20px 28px}.student-visual .brand{font-size:46px}.student-art{height:170px}.student-art img{width:88px}.student-art img:nth-child(1){transform:translateX(-72px) rotate(-14deg)}.student-art img:nth-child(3){transform:translateX(72px) rotate(15deg)}
 .student-entry{padding:18px 32px;overflow-y:auto}.entry-heading{margin-bottom:12px}.entry-heading h2{font-size:24px}.entry-heading p{display:none}.student-entry>input{height:46px;margin-bottom:9px}.student-join{min-height:46px;margin-bottom:8px!important}.study-room{min-height:58px;padding:8px 12px}
}

html.mobile-preview body{min-height:100vh;display:grid;place-items:center;padding:28px;background:#dfe6ee;overflow:auto}
html.mobile-preview #app{width:390px;height:844px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;border-radius:34px;background:#fff;box-shadow:0 24px 70px #17273c38,0 0 0 9px #17273c}
html.mobile-preview .student-home{display:block;width:100%;min-height:100%;box-shadow:none}
html.mobile-preview .student-visual{min-height:auto;padding:24px 24px 18px}
html.mobile-preview .student-visual .brand{font-size:46px}
html.mobile-preview .student-art{height:145px}
html.mobile-preview .student-art img{width:82px}
html.mobile-preview .student-art img:nth-child(1){transform:translateX(-68px) rotate(-14deg)}
html.mobile-preview .student-art img:nth-child(3){transform:translateX(68px) rotate(15deg)}
html.mobile-preview .student-visual>p{font-size:15px}
html.mobile-preview .student-entry{padding:25px 24px 32px}
html.mobile-preview .entry-heading{margin-bottom:20px}
html.mobile-preview .entry-heading h2{font-size:25px}
html.mobile-preview .student-entry>input{height:50px;margin-bottom:14px}
@media(max-width:430px){html.mobile-preview body{padding:0}html.mobile-preview #app{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;box-shadow:none}}