/* ========== 幼儿端 · 卡通界面（老一体机兼容：无框架、纯 Flex、px 大字） ========== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; }
body {
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:26px; color:#5b3a1e;
  background:linear-gradient(180deg,#bfe9ff 0%,#e6f9d9 60%,#fff3c4 100%);
  user-select:none;
}

/* ---------- 页面切换 ---------- */
.page { display:none; width:100%; height:100%; flex-direction:column; }
.page.active { display:flex; }

/* ---------- 欢迎页 ---------- */
.welcome-box { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mascot { font-size:140px; animation:bounce 1.6s infinite; }
/* 班级宠物：上传过图就在吉祥物位里放图，没传图用阶段emoji（蛋→龙）兜底，等级越高个儿越大 */
.mascot img { object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.pet-tag { display:inline-block; background:#fff7ec; border:3px solid #ffd9a0; color:#8a5a1e; border-radius:26px; padding:6px 24px; font-size:26px; margin-top:-10px; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
#welcome h1 { font-size:52px; color:#ff8c2f; text-shadow:2px 3px 0 #fff; }
.hello { font-size:32px; }
.btn-start {
  font-size:40px; padding:22px 64px; border:none; border-radius:999px;
  background:linear-gradient(180deg,#ffb64d,#ff8c2f); color:#fff;
  box-shadow:0 8px 0 #d96f13; cursor:pointer;
}
.btn-start:active { transform:translateY(6px); box-shadow:0 2px 0 #d96f13; }

/* ---------- 顶栏 ---------- */
.top-bar {
  height:96px; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; background:rgba(255,255,255,.6); border-bottom:4px solid #ffd79a;
}
.org-title { font-size:40px; color:#ff8c2f; font-weight:bold; }
.live-chip { font-size:26px; background:#ff5f3f; color:#fff; border-radius:999px; padding:8px 20px; cursor:pointer; animation:pulse 1.2s infinite; }
.icon-btn { font-size:44px; background:none; border:none; cursor:pointer; padding:8px 16px; }

/* ---------- 主页四大功能卡 ---------- */
.func-grid {
  flex:1; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;
  gap:36px; padding:36px;
}
.func-card {
  width:42%; min-width:300px; height:36vh; min-height:230px;
  border:none; border-radius:36px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#fff; box-shadow:0 10px 0 rgba(0,0,0,.15);
}
.func-card:active { transform:translateY(8px); box-shadow:0 2px 0 rgba(0,0,0,.15); }
.func-emoji { font-size:110px; }
.func-name { font-size:48px; font-weight:bold; }
.func-tip { font-size:26px; opacity:.9; }
.func-draw  { background:linear-gradient(160deg,#ff9db8,#ff5f81); }
.func-change{ background:linear-gradient(160deg,#a184ff,#7a4dff); }
.func-move  { background:linear-gradient(160deg,#5fc8ff,#2f9bff); }
.func-photo { background:linear-gradient(160deg,#8ad86b,#4caf3f); }
.quota-bar { text-align:center; font-size:28px; padding:14px; color:#8a6a3b; }
.quota-bar b { color:#ff5f1f; font-size:36px; }

/* ---------- 创作页 ---------- */
.studio-body { flex:1; display:flex; flex-direction:column; padding:20px; gap:18px; min-height:0; }
.canvas-area {
  position:relative; flex:1; border-radius:32px; background:#fff;
  border:6px dashed #ffd79a; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:0;
}
.canvas-area img, .canvas-area video { max-width:100%; max-height:100%; object-fit:contain; }
.canvas-hint { font-size:34px; color:#c9a56a; text-align:center; line-height:1.8; }
.loading-mask {
  position:absolute; inset:0; background:rgba(255,255,255,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
.loading-emoji { font-size:100px; animation:spin 1.2s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { font-size:36px; color:#ff8c2f; }

.prompt-area { background:rgba(255,255,255,.75); border-radius:24px; padding:16px 20px; }
.prompt-text { font-size:32px; min-height:48px; color:#333; text-align:center; }
.prompt-actions { display:flex; gap:16px; margin-top:14px; }
.prompt-actions button {
  flex:1; border:none; border-radius:20px; font-size:32px; padding:18px 0; cursor:pointer; color:#fff;
}
.btn-keyboard { background:#a9b6c4; }
.btn-mic { background:linear-gradient(180deg,#ff9d6b,#ff5f3f); box-shadow:0 6px 0 #d34a2d; }
.btn-mic.recording { background:#3f9bff; box-shadow:0 6px 0 #2a6fd0; animation:pulse .8s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.btn-go { background:linear-gradient(180deg,#8ed86b,#4caf3f); box-shadow:0 6px 0 #3a8a2f; }
.btn-go:disabled { background:#ccc; box-shadow:none; cursor:not-allowed; }
.btn-upload { width:100%; margin-top:12px; border:none; border-radius:16px; font-size:28px; padding:14px; background:#7a4dff; color:#fff; cursor:pointer; }

/* ---------- 作品墙 ---------- */
.works-grid { flex:1; display:flex; flex-wrap:wrap; gap:20px; padding:24px; overflow-y:auto; align-content:flex-start; }
.work-item { width:calc(25% - 15px); background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.work-item img { width:100%; height:24vh; min-height:150px; object-fit:cover; display:block; }

/* ---------- 键盘弹层 ---------- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; z-index:99; }
/* 命门修复：.overlay/.loading-mask 等带 display 的类会压过 hidden 属性的默认样式。
   不写这条，JS 里 el.hidden=true 根本关不掉弹层——登录层永远挡屏，桌面端"登录后不跳转"真凶就是它 */
[hidden] { display:none !important; }
.kb-box { width:100%; max-width:1200px; background:#fff; border-radius:32px 32px 0 0; padding:24px; }
.kb-input { width:100%; font-size:36px; padding:16px; border:4px solid #ffd79a; border-radius:16px; text-align:center; }
.kb-keys { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; max-height:32vh; overflow-y:auto; }
.kb-keys button { font-size:28px; padding:12px 16px; border-radius:12px; border:2px solid #e0d0b0; background:#fff8ec; cursor:pointer; }
.kb-actions { display:flex; gap:16px; margin-top:14px; }
.kb-actions button { flex:1; font-size:30px; padding:14px; border:none; border-radius:16px; background:#e5e5e5; cursor:pointer; }
.kb-actions .primary { background:#ff8c2f; color:#fff; }

/* ---------- 提示气泡 ---------- */
.toast {
  position:fixed; top:120px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.75); color:#fff; font-size:30px;
  padding:18px 36px; border-radius:999px; z-index:100; max-width:80%; text-align:center;
}

/* ---------- 断网横幅 ---------- */
.net-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:linear-gradient(180deg,#ff8c5a,#ff5f3f); color:#fff;
  font-size:32px; text-align:center; padding:18px; letter-spacing:2px;
  box-shadow:0 -4px 16px rgba(255,95,63,.4); animation:pulse 1.6s infinite;
}

/* ---------- 护眼模式 ---------- */
body.eyecare { filter:sepia(.28) brightness(.94); }