/* 班級登入頁（2026-10-06 多人對戰階段 B）：D1 紙片森林風格，給 4 歲小朋友用，大按鈕、大圖 */
:root{--ink:#3B2B22;--brown:#8A5A2A;--kraft:#EEDDBC;--paper:#FFFDF6;--green:#5DBB63;--deep:#3E8E46;--orange:#FF8A3D;--red:#E0533F;
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--grain),radial-gradient(circle at 12% 18%,#F6E9CC 0 18%,transparent 19%),radial-gradient(circle at 88% 82%,#E7D2A8 0 16%,transparent 17%),var(--kraft);font-family:Park,"Microsoft JhengHei","Noto Sans TC",sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent;user-select:none}
body.ck-open{overflow:hidden}
button,input{font-family:inherit}
.ck-top{display:flex;align-items:center;gap:18px;padding:10px 24px;background:linear-gradient(180deg,#A8D77F,#7DBB5A);box-shadow:0 4px 0 #5E9C44}
.ck-brand{display:flex;align-items:center;gap:8px;color:#fff}.ck-brand img{height:42px}.ck-brand b{font-size:20px;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.ck-top h1{margin:0;font-size:30px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.18);letter-spacing:2px}
.ck-adult{margin-left:auto;font-size:14px;font-weight:800;color:#fff;opacity:.85}
.ck-main{max-width:1320px;margin:0 auto;padding:16px 24px 30px}
.ck-loading{font-size:22px;font-weight:900;text-align:center;margin-top:80px}
.ck-card{position:relative;max-width:760px;margin:40px auto;padding:26px 30px;background:var(--grain),var(--paper);border-radius:6px;box-shadow:0 6px 0 #DCC8A4,0 14px 24px rgba(90,60,30,.15)}
.ck-card::before{content:"";position:absolute;left:50%;top:-14px;width:120px;height:28px;translate:-50% 0;rotate:-3deg;background:repeating-linear-gradient(45deg,#BFE3FA 0 8px,#A5D4F3 8px 16px);opacity:.9}
.ck-card h2{margin:0 0 8px;font-size:30px}.ck-card p{font-size:17px;font-weight:700;line-height:1.7;margin:0 0 10px}
.ck-code{display:flex;gap:22px;align-items:center}.ck-code .ck-guide{width:150px}
.ck-code form{display:flex;gap:12px;align-items:center;margin-top:6px}
#ck-code{width:250px;height:76px;padding:0 0 0 22px;border:4px solid #DCC8A4;border-radius:14px;background:#fff;color:var(--ink);font-size:44px;font-weight:900;letter-spacing:18px;text-transform:uppercase}
#ck-code:focus{outline:none;border-color:var(--orange)}
.ck-btn{height:64px;padding:0 26px;border:0;border-radius:16px;background:var(--orange);color:#fff;font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #C9621A}
.ck-btn:active{translate:0 3px;box-shadow:0 2px 0 #C9621A}
.ck-btn.ghost{height:52px;font-size:18px;background:#fff;color:var(--brown);box-shadow:0 4px 0 #DCC8A4}
.ck-err{min-height:1.5em;font-size:20px!important;font-weight:900!important;color:var(--red)}.ck-err.ok{color:var(--deep)}
/* 歡迎小豬＋說話泡泡 */
.ck-hello{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.ck-guide{width:96px;animation:ck-bob 2.4s ease-in-out infinite}
.ck-bubble{position:relative;display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--grain),var(--paper);border-radius:18px;box-shadow:0 4px 0 #DCC8A4;font-size:28px}
.ck-bubble::before{content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;border:10px solid transparent;border-right:14px solid var(--paper)}
.ck-say{width:48px;height:48px;border:0;border-radius:50%;background:var(--orange);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 3px 0 #C9621A;flex:none}
/* 全班頭像 */
.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:16px 14px}
.ck-kid{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;border:0;border-radius:10px;background:var(--grain),var(--paper);cursor:pointer;box-shadow:0 5px 0 #DCC8A4,0 8px 14px rgba(90,60,30,.12);animation:ck-in .45s var(--d) both cubic-bezier(.3,1.5,.5,1);transition:transform .12s}
.ck-kid:nth-child(3n){rotate:1.5deg}.ck-kid:nth-child(3n+1){rotate:-1.2deg}
.ck-kid:hover{transform:translateY(-4px) scale(1.04)}.ck-kid:active{transform:scale(.95)}
.ck-kid .cp-av{width:88px}
.ck-name{max-width:100%;font-size:20px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-foot{text-align:right;margin-top:16px}.ck-link{border:0;background:none;color:var(--brown);font-size:15px;font-weight:800;text-decoration:underline;cursor:pointer}
/* 圖片密碼視窗 */
.ck-pw{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:rgba(60,40,20,.45);animation:ck-fade .2s both}
.ck-pwbox{display:flex;gap:26px;align-items:center;padding:22px 28px;max-height:calc(100vh - 32px);background:var(--grain),var(--paper);border-radius:10px;box-shadow:0 8px 0 #DCC8A4,0 20px 40px rgba(0,0,0,.3);animation:ck-in .35s both cubic-bezier(.3,1.5,.5,1)}
.ck-me{display:flex;flex-direction:column;align-items:center;gap:10px;width:200px}.ck-me b{font-size:30px}
.ck-bigav{width:180px}
.ck-pwmain h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:28px}
.ck-slots{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ck-slot{display:grid;place-items:center;width:78px;height:78px;padding:8px;border:4px dashed #DCC8A4;border-radius:16px;background:#FFF8EA;font-size:30px;font-weight:900;color:#CDB48A}
.ck-slot.on{border-style:solid;border-color:var(--green);background:#fff;animation:ck-pop .3s}
.ck-slot svg{width:100%;height:100%}
.ck-del{width:64px;height:64px;margin-left:6px;border:0;border-radius:50%;background:#fff;color:var(--brown);font-size:28px;cursor:pointer;box-shadow:0 4px 0 #DCC8A4}
.ck-pics{display:grid;grid-template-columns:repeat(3,128px);gap:14px}
.ck-p{width:128px;height:128px;padding:14px;border:0;border-radius:20px;background:#fff;cursor:pointer;box-shadow:0 6px 0 #DCC8A4,inset 0 0 0 3px #F1E4CB;transition:transform .1s}
.ck-p:active{transform:scale(.92)}.ck-p svg{width:100%;height:100%}
.ck-p.pop{animation:ck-pop .3s}
.ck-pwbox.wait .ck-p{opacity:.6;pointer-events:none}
.ck-pwbox.no{animation:ck-shake .5s}
.ck-pwbox.yay .ck-bigav{animation:ck-jump .5s 3}
@keyframes ck-bob{50%{translate:0 -6px;rotate:-3deg}}
@keyframes ck-in{from{opacity:0;scale:.6}}
@keyframes ck-fade{from{opacity:0}}
@keyframes ck-pop{40%{scale:1.15}}
@keyframes ck-shake{20%,60%{translate:-14px 0}40%,80%{translate:14px 0}}
@keyframes ck-jump{50%{translate:0 -24px}}
@media(max-height:700px){.ck-top{padding:6px 20px}.ck-brand img{height:34px}.ck-top h1{font-size:24px}.ck-hello{margin-bottom:8px}.ck-guide{width:72px}.ck-bubble{font-size:24px;padding:8px 14px}
 .ck-p{width:108px;height:108px;padding:12px}.ck-pics{grid-template-columns:repeat(3,108px);gap:12px}.ck-slot{width:66px;height:66px}.ck-bigav{width:150px}.ck-pwbox{padding:16px 24px}.ck-kid .cp-av{width:78px}}
@media(max-width:1100px){.ck-me{width:170px}.ck-bigav{width:150px}}
.ck-say{display:grid;place-items:center;padding:10px}.ck-say svg{width:100%;height:100%}

/* ══ 2026-10-11 白底綠色機器人風格（使用者：班級登入頁也改成和全站一樣；拿掉紙片森林的牛皮紙底、紙紋、膠帶、歪斜） ══ */
:root{--ink:#2A4A30;--brown:#3E8E46;--kraft:#F3FBEF;--paper:#fff;--green:#6BBF59;--deep:#3E9A4A;--orange:#F28C28;--line:#CFE8C3;--soft:#EAF6E4}
body{background:radial-gradient(ellipse at 50% 0,#EAF6E4,#fff 60%)!important;color:var(--ink)}
.ck-top{background:linear-gradient(180deg,#9BD07B,#6BBF59)!important;box-shadow:0 4px 0 #4E9A42!important}
.ck-card,.ck-bubble,.ck-kid,.ck-pwbox{background:#fff!important;border:3px solid var(--line);border-radius:22px!important;box-shadow:0 5px 0 var(--soft)!important}
.ck-card::before{display:none!important}
.ck-bubble::before{border-right-color:var(--line)!important}
.ck-kid,.ck-kid:nth-child(3n),.ck-kid:nth-child(3n+1){rotate:none!important}
.ck-kid:hover{border-color:var(--green);box-shadow:0 5px 0 var(--line),0 0 0 4px rgba(107,191,89,.25)!important}
.ck-btn{background:linear-gradient(#FFB547,#F28C28)!important;box-shadow:0 5px 0 #C86A12!important}
.ck-btn.ghost{background:#fff!important;color:var(--deep)!important;border:3px solid var(--line);box-shadow:0 4px 0 var(--soft)!important}
.ck-say{background:linear-gradient(#FFB547,#F28C28)!important;box-shadow:0 3px 0 #C86A12!important}
#ck-code{border-color:var(--line)!important}#ck-code:focus{border-color:var(--orange)!important}
.ck-slot{border-color:var(--line)!important;background:#F6FCF2!important}
.ck-slot.on{border-color:var(--green)!important}
.ck-p{box-shadow:0 6px 0 var(--soft),inset 0 0 0 3px var(--line)!important}
.ck-del{color:var(--deep)!important;box-shadow:0 4px 0 var(--soft)!important;border:3px solid var(--line)}
.ck-pw{background:rgba(20,60,30,.45)!important}
.ck-link,.ck-adult{color:var(--deep)}.ck-adult{color:#fff}