/* ============================================================
   乐乐学汉语 · 丝路世界入口 样式 v1.0
   刻意沿用 lele-engine.css 的变量与手感（ZCOOL 标题 / 文楷汉字 /
   奶油底 / 果冻按钮）—— 世界和课堂必须看起来是同一个世界，
   否则孩子会觉得「地图」是另一个软件。
   ============================================================ */
@font-face{font-family:'ZCOOL KuaiLe';src:url('../vendor/fonts/ZCOOLKuaiLe-Regular.ttf');font-display:swap;}
@font-face{font-family:'LXGW WenKai';src:url('../vendor/fonts/LXGWWenKaiGBLite-Regular.ttf');font-display:swap;}
:root{
  --cream:#FFF7EA; --ink:#40342C; --red:#E05A47; --orange:#E8823A;
  --gold:#F2B134; --blue:#4FA3D8; --green:#7CB34E; --soft:#F6E7CF; --purple:#9B6BC7;
  --sand:#F0DFBE; --sea:#BFE0F0; --steppe:#DCE9C6; --stone:#C9BCA6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:#2E2620;overflow:hidden;
  font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);
  user-select:none;touch-action:manipulation;}
.hz{font-family:'LXGW WenKai',"KaiTi","STKaiti","Microsoft YaHei",serif;}
h1,h2,h3,.kk{font-family:'ZCOOL KuaiLe','KaiTi','Microsoft YaHei';font-weight:400;}

#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center;
  background:var(--cream);border-radius:18px;overflow:hidden;box-shadow:0 12px 60px rgba(0,0,0,.5);}

/* ---------- 顶栏 ---------- */
#wtop{position:absolute;left:0;right:0;top:0;height:52px;z-index:30;display:flex;align-items:center;
  gap:8px;padding:0 14px;background:linear-gradient(180deg,rgba(255,247,234,.97),rgba(255,247,234,.82));
  border-bottom:2px solid #EADCC4;}
#wtop .brand{font-size:23px;color:var(--red);margin-right:6px;white-space:nowrap;}
#wtop .brand span{font-size:15px;color:#A2937F;margin-left:6px;}
.wbtn{background:#FFF;border:2px solid #E4D6BE;border-radius:999px;padding:5px 13px;font-size:16px;
  cursor:pointer;color:var(--ink);font-family:inherit;white-space:nowrap;transition:transform .08s;
  flex:none;}   /* flex:none —— 顶栏放不下时宁可让班名省略号，也不能把按钮文字挤扁 */
.wbtn:hover{background:var(--soft);}
.wbtn:active{transform:translateY(2px);}
.wbtn.act{background:linear-gradient(180deg,#F7C04A,#F2B134);color:#fff;border-color:#E0A32B;}
#wstat{margin-left:auto;font-size:15px;color:#8B7B6B;display:flex;gap:12px;align-items:center;
  white-space:nowrap;overflow:hidden;}
#wstat b{color:var(--red);font-size:19px;}

/* ---------- 地图 ---------- */
#mapwrap{position:absolute;inset:52px 0 0 0;overflow:hidden;cursor:grab;
  background:linear-gradient(180deg,#FBF2E0,#F6E9D2);}
#mapwrap.drag{cursor:grabbing;}
#map{display:block;width:100%;height:100%;}
.stn{cursor:pointer;}
.stn .ring{transition:opacity .3s;}
.stn:hover .disc{filter:brightness(1.08);}
.stn text{pointer-events:none;}
@keyframes pulse{0%,100%{r:38;opacity:.85}50%{r:52;opacity:.2}}
.nowring{animation:pulse 1.9s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#lele{animation:bob 2.4s ease-in-out infinite;}

/* ---------- 右下角控制 ---------- */
#mapctl{position:absolute;right:14px;bottom:14px;z-index:20;display:flex;flex-direction:column;gap:6px;}
#mapctl .wbtn{padding:6px 0;width:42px;text-align:center;font-size:19px;box-shadow:0 3px 10px rgba(64,52,44,.16);}
#mapctl .wbtn.wide{width:auto;padding:6px 14px;font-size:15px;}

/* ---------- 学期图例 ---------- */
#legend{position:absolute;left:14px;bottom:14px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;max-width:640px;}
.lgi{background:rgba(255,255,255,.92);border-radius:12px;padding:4px 10px;font-size:13px;
  display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(64,52,44,.12);cursor:pointer;}
.lgi i{width:12px;height:12px;border-radius:50%;display:inline-block;}
.lgi.off{opacity:.42;}
.lgi b{font-weight:700;}

/* ---------- 站牌面板 ---------- */
#panel{position:absolute;right:0;top:52px;bottom:0;width:452px;z-index:40;background:var(--cream);
  border-left:4px solid var(--gold);box-shadow:-10px 0 34px rgba(64,52,44,.22);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;}
#panel.on{transform:none;}
#phead{padding:14px 18px 10px;border-bottom:2px dashed #E4D6BE;position:relative;}
#phead .close{position:absolute;right:12px;top:12px;font-size:20px;cursor:pointer;color:#A2937F;}
#phead .no{font-size:14px;color:#fff;border-radius:999px;padding:2px 12px;display:inline-block;}
#phead h2{font-size:31px;margin-top:5px;line-height:1.15;}
#phead .sub{font-size:17px;color:#8B7B6B;margin-top:2px;}
#pbody{flex:1;overflow-y:auto;padding:12px 18px 18px;}
#pbody::-webkit-scrollbar{width:8px}#pbody::-webkit-scrollbar-thumb{background:#E0D0B4;border-radius:8px}
.keyline{background:#fff;border-radius:16px;padding:10px 14px;margin-bottom:12px;
  box-shadow:0 3px 12px rgba(64,52,44,.1);}
.keyline .k{font-size:27px;line-height:1.35;}
.keyline .p{font-size:15px;color:var(--red);font-weight:600;}
.lrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:9px 12px;
  margin-bottom:8px;box-shadow:0 2px 9px rgba(64,52,44,.09);}
.lrow.void{background:repeating-linear-gradient(-45deg,#F4EBDC,#F4EBDC 8px,#EFE4D2 8px,#EFE4D2 16px);
  box-shadow:none;}
.lrow .n{font-size:13px;color:#fff;background:var(--stone);border-radius:8px;padding:2px 7px;min-width:38px;
  text-align:center;font-weight:700;}
.lrow .tt{flex:1;min-width:0;}
.lrow .tt b{font-size:20px;display:block;line-height:1.2;font-family:'LXGW WenKai',"KaiTi",serif;}
.lrow .tt span{font-size:13px;color:#9C8C78;}
.lrow .go{background:linear-gradient(180deg,#F07760,#E05A47);color:#fff;border:none;border-radius:999px;
  padding:7px 15px;font-size:16px;cursor:pointer;font-family:inherit;box-shadow:0 3px 0 #B54636;}
.lrow .go:active{transform:translateY(3px);box-shadow:none;}
.lrow .go.grey{background:#CFC3AE;box-shadow:0 3px 0 #B3A48C;cursor:not-allowed;}
.tick{width:34px;height:34px;border-radius:50%;border:3px solid #DFD0B6;background:#fff;cursor:pointer;
  font-size:17px;line-height:28px;text-align:center;color:#C6B79E;flex:none;}
.tick.half{border-color:var(--gold);color:var(--gold);}
.tick.done{background:var(--green);border-color:var(--green);color:#fff;}
.tsec{font-size:15px;color:#8B7B6B;margin:14px 0 7px;border-top:2px dashed #E4D6BE;padding-top:10px;}
.chip{display:inline-block;background:#fff;border-radius:10px;padding:3px 9px;margin:0 5px 5px 0;
  font-size:17px;box-shadow:0 2px 6px rgba(64,52,44,.09);}
.chip small{font-size:12px;color:var(--red);margin-left:4px;}

/* ---------- 全屏浮层（护照 / 找词 / 全部课程） ---------- */
.ov{position:absolute;inset:0;z-index:60;background:rgba(46,38,32,.62);display:none;
  align-items:center;justify-content:center;padding:26px;}
.ov.on{display:flex;}
.ovcard{background:var(--cream);border-radius:22px;width:100%;max-width:1080px;max-height:100%;
  padding:18px 22px;box-shadow:0 20px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;}
.ovcard h2{font-size:29px;}
.ovcard .x{float:right;font-size:22px;cursor:pointer;color:#A2937F;}
.ovbody{flex:1;overflow-y:auto;margin-top:10px;}
.ovbody::-webkit-scrollbar{width:9px}.ovbody::-webkit-scrollbar-thumb{background:#E0D0B4;border-radius:9px}
.hint{font-size:15px;color:#8B7B6B;margin-top:3px;}

/* 护照 40 格 */
.pgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;}
.pcell{aspect-ratio:1;border-radius:13px;background:#F4EBDC;border:2px dashed #DDCDB2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;
  color:#B3A48C;position:relative;}
.pcell b{font-size:9px;position:absolute;left:5px;top:3px;color:#C3B49C;}
.pcell.got{background:#fff;border:3px solid var(--gold);color:var(--ink);
  box-shadow:0 4px 12px rgba(242,177,52,.35);}
.pcell.got .e{font-size:27px;line-height:1;}
.pcell .e{font-size:22px;line-height:1;opacity:.35;}
.pcell.got b{color:var(--gold);}
.stamps{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px;}
.stampd{width:76px;height:76px;border-radius:50%;border:4px double var(--red);color:var(--red);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;
  transform:rotate(-8deg);background:#FFF9F0;}
.stampd.no{border-color:#D8CAB2;color:#C6B79E;border-style:dashed;transform:none;background:transparent;}
.stampd .e{font-size:25px;}

/* 找词 */
#qbox{width:100%;font-size:26px;padding:9px 16px;border-radius:14px;border:3px solid #E4D6BE;
  font-family:'LXGW WenKai',"KaiTi",serif;background:#fff;color:var(--ink);}
#qbox:focus{outline:none;border-color:var(--gold);}
.hit{background:#fff;border-radius:14px;padding:9px 14px;margin-bottom:8px;display:flex;
  align-items:center;gap:12px;box-shadow:0 2px 9px rgba(64,52,44,.09);cursor:pointer;}
.hit .w{font-size:26px;font-family:'LXGW WenKai',"KaiTi",serif;min-width:130px;}
.hit .w small{display:block;font-size:13px;color:var(--red);}
.hit .meta{font-size:15px;color:#8B7B6B;flex:1;}
.hit .meta b{color:var(--ink);font-size:18px;}

/* 全部课程 */
.lgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
.lcard{background:#fff;border-radius:14px;padding:9px 11px;cursor:pointer;position:relative;
  box-shadow:0 3px 10px rgba(64,52,44,.1);border-top:5px solid var(--gold);}
.lcard.void{background:#F4EBDC;box-shadow:none;border-top-color:#DDCDB2;cursor:default;}
.lcard .n{font-size:12px;color:#A2937F;}
.lcard b{font-size:19px;display:block;line-height:1.2;font-family:'LXGW WenKai',"KaiTi",serif;}
.lcard .p{font-size:12px;color:#B3A48C;}
.lcard .st{position:absolute;right:7px;top:6px;font-size:14px;}

/* 四语说明行 —— 和课件里的 .tr 同一个角色 */
.tr4{display:block;font-size:15px;color:#8B7B6B;margin-top:3px;line-height:1.35;}
.big4{font-size:17px;color:#7C6C5C;}