/* Common Styles */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Nunito',sans-serif;background:#FFF8F0;color:#2D3748;overflow:hidden}
#app{width:100%;height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* Setup Screen */
#setup{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;gap:16px;overflow-y:auto}
.s-title{font-family:'Baloo 2',cursive;font-size:32px;font-weight:800;text-align:center;color:#FF6B35}
.s-sub{font-size:16px;color:#718096;text-align:center}
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:400px}
.p-slot{display:flex;flex-direction:column;align-items:center;gap:8px}
.p-slot label{font-size:15px;font-weight:700;color:#718096}
.p-circle{width:84px;height:84px;border-radius:50%;border:2.5px dashed #CBD5E0;background:#F7FAFC;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:border-color 0.2s}
.p-circle:active{transform:scale(0.96)}
.p-circle img{width:100%;height:100%;object-fit:cover;position:absolute;border-radius:50%}
.p-emoji{font-size:30px}
.p-hint{font-size:10px;color:#A0AEC0;margin-top:2px}
.p-name{width:100%;border:1.5px solid #E2E8F0;border-radius:10px;padding:8px 10px;font-family:'Nunito',sans-serif;font-size:17px;text-align:center;outline:none;background:white;color:#2D3748}
.p-name:focus{border-color:#FF6B35}
input[type=file]{display:none}
.topic-label{font-size:15px;font-weight:700;color:#718096;align-self:flex-start;max-width:400px;width:100%}
.topic-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:400px}
.tp-btn{padding:9px 4px;background:white;border:2px solid #E2E8F0;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;transition:all 0.15s;color:#4A5568}
.tp-btn:active{transform:scale(0.95)}
.tp-btn.sel{background:#FF6B35;border-color:#FF6B35;color:white}
.tp-icon{display:block;font-size:22px;margin-bottom:2px}
.go-btn{width:100%;max-width:400px;padding:16px;background:#FF6B35;color:white;border:none;border-radius:14px;font-family:'Baloo 2',cursive;font-size:23px;font-weight:800;cursor:pointer;transition:transform 0.15s;box-shadow:0 4px 16px rgba(255,107,53,0.35)}
.go-btn:active{transform:scale(0.97)}

/* Game Mode Selection */
#mode-select{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;gap:16px;overflow-y:auto}
.mode-title{font-family:'Baloo 2',cursive;font-size:32px;font-weight:800;text-align:center;color:#FF6B35}
.mode-sub{font-size:16px;color:#718096;text-align:center}
.mode-cards{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:400px}
.mode-card{background:white;border:2.5px solid #E2E8F0;border-radius:16px;padding:16px;cursor:pointer;transition:all 0.15s;position:relative;overflow:hidden}
.mode-card:active{transform:scale(0.97);border-color:#FF6B35}
.mode-icon{font-size:40px;display:block;margin-bottom:8px}
.mode-name{font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:#2D3748;margin-bottom:4px}
.mode-desc{font-size:13px;color:#718096;line-height:1.4;margin-bottom:8px}
.mode-badge{display:inline-block;background:#FFE66D;color:#7B5800;font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px}

/* Common Game Elements */
.top-strip{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-shrink:0}
.home-btn{width:36px;height:36px;border-radius:50%;border:2px solid #E2E8F0;background:#FFF5F0;font-size:18px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-btn:active{transform:scale(0.9);border-color:#FF6B35}
.av-wrap{display:flex;align-items:center;gap:6px}
.av{width:40px;height:40px;border-radius:50%;border:2.5px solid #FFE66D;font-size:22px;display:flex;align-items:center;justify-content:center;background:#FFF5F0;flex-shrink:0;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av-name{font-size:14px;font-weight:700;color:#4A5568}
.prog-wrap{flex:1;margin:0 8px}
.prog-dots{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%;background:#E2E8F0;transition:background 0.3s}
.dot.done{background:#22C55E}
.dot.cur{background:#FF6B35}
.score-badge{background:#FFE66D;color:#7B5800;font-weight:800;font-size:16px;padding:4px 10px;border-radius:14px;white-space:nowrap}

.teacher-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;flex-shrink:0}
.t-av{width:64px;height:64px;border-radius:50%;border:2.5px solid #FF6B35;font-size:34px;display:flex;align-items:center;justify-content:center;background:#FFF5F0;flex-shrink:0;overflow:hidden}
.t-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bubble{background:white;border-radius:14px 14px 14px 4px;padding:10px 13px;font-size:16px;font-weight:600;color:#2D3748;border:1.5px solid #FFE0D0;flex:1;line-height:1.4;min-height:44px;display:flex;align-items:center}

/* Finish Screen */
#finish{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#FFF;justify-content:center;display:none;align-items:center;z-index:60}
.finish-card{background:white;border-radius:24px;padding:32px 26px;text-align:center;width:90%;max-width:340px}
.finish-em{font-size:72px;margin-bottom:8px;display:block}
.finish-title{font-family:'Baloo 2',cursive;font-size:34px;font-weight:800;color:#FF6B35;margin-bottom:6px}
.finish-score{font-size:18px;color:#718096;margin-bottom:24px;line-height:1.5}
.f-btn{width:100%;padding:14px;border:none;border-radius:12px;font-family:'Baloo 2',cursive;font-size:21px;font-weight:800;cursor:pointer;margin-bottom:10px;color:white;transition:transform 0.1s}
.f-btn:active{transform:scale(0.97)}

/* PWA Install Prompt */
#pwa-install-prompt{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6);justify-content:center;display:none;align-items:center;z-index:70;padding:20px}
.pwa-prompt-card{background:white;border-radius:20px;padding:28px 24px;text-align:center;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.pwa-prompt-icon{font-size:56px;margin-bottom:12px;display:block}
.pwa-prompt-title{font-family:'Baloo 2',cursive;font-size:28px;font-weight:800;color:#FF6B35;margin-bottom:8px}
.pwa-prompt-text{font-size:16px;color:#4A5568;margin-bottom:20px;line-height:1.5}
.pwa-prompt-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;text-align:left}
.pwa-step{display:flex;align-items:flex-start;gap:10px}
.pwa-step-num{width:28px;height:28px;border-radius:50%;background:#FF6B35;color:white;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.pwa-step-text{font-size:14px;color:#4A5568;line-height:1.4;padding-top:2px}
.pwa-prompt-btn{width:100%;padding:14px;border:none;border-radius:12px;font-family:'Baloo 2',cursive;font-size:18px;font-weight:800;cursor:pointer;background:#718096;color:white;transition:transform 0.1s}
.pwa-prompt-btn:active{transform:scale(0.97)}

/* Animations */
@keyframes wobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-3deg)}75%{transform:translateX(7px) rotate(3deg)}}
@keyframes popIn{0%{transform:scale(0.2);opacity:0}80%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(130px) rotate(380deg)}}
@keyframes slideIn{0%{transform:translateY(28px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.slide-in{animation:slideIn 0.32s ease forwards}