/* ==========================================================================
   学生萌え · 校园模型地图（首页 区域3 · 模型地图面板）
   零外部依赖：单画布 WebGL + 内联 SVG；CSS 3D 作为兼容模型
   模型：每个方块包含完整六面，同色面共用光照变量
   天空：立体不透明纯白的云（夜里转灰）+ Q 版五角星 + 太阳/月亮（唯一光源）
   ========================================================================== */

.smc{
  --smc-sky-a:#a8dcfb;
  --smc-sky-b:#d9f0ff;
  --smc-sky-c:#f4fbff;
  --smc-label-bg:#ffffff;               /* v1.54：文字底不再半透明（不透明白底） */
  --smc-label-bd:rgba(30,58,90,.14);
  /* 云：白天纯白（只有底部一点点灰做体积感），夜里整体转灰 */
  --smc-cl-a:#ffffff;                   /* 受光面 */
  --smc-cl-b:#fbfdff;                   /* 主体 */
  --smc-cl-c:#e7eef8;                   /* 背光 */
  --smc-cl-d:#ccdaeb;                   /* 体积阴影 / 厚度 */
  --smc-cl-e:#ffffff;                   /* 高光 */
  --smc-accent:#38bdf8;
  --smc-shadow:rgba(56,92,150,.22);
  position:relative;
  display:block;
  width:100%;
  min-height:236px;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--smc-sky-a) 0%,var(--smc-sky-b) 54%,var(--smc-sky-c) 100%);
  transition:background .8s linear;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y pinch-zoom;      /* 外围天空区域保持原生页面滚动。 */
  cursor:auto;
  font-size:12px;
  line-height:1.35;
  color:#1e293b;
}
.smc.is-panning{cursor:grabbing;}
.smc-interaction{position:absolute;left:28%;top:15%;width:44%;height:70%;z-index:5;touch-action:none;cursor:grab;}
.smc-interaction.has-building{cursor:pointer;}
.smc.is-panning .smc-interaction{cursor:grabbing;}
@media(hover:hover){.smc-interaction:hover{outline:1px dashed rgba(30,58,90,.18);outline-offset:-1px;}}
.smc-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.smc-webgl .smc-scene{display:none;}
.smc-webgl{contain:layout paint;}
.smc-label{text-decoration:none;}
.smc-label:focus-visible{outline:2px solid #197a88;outline-offset:3px;}
/* 站点昼夜按钮只改页面主题；微校园天空由北京时间决定，这里固定住自己的配色 */
html[data-theme="dark"] .smc, html[data-theme="light"] .smc{ color-scheme:light; }
html[data-theme="dark"] .smc{ border:0; }

.smc,.smc *{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.smc-fallback{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:14px;color:#475569;font-size:12px;line-height:1.7;
}

/* ---------------- 天空：太阳 / 月亮 / 云 / 星 ---------------- */
.smc-sky,.smc-air-anchor,.smc-air-facing{
  position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  transform-style:preserve-3d;pointer-events:none;
}
.smc-air-facing > span{left:0;top:0;right:auto;margin:0;translate:-50% -50%;}
.smc-air-facing .smc-orb{transition:background .8s linear,box-shadow .8s linear;}
.smc-orb{
  position:absolute;right:7%;top:8%;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#fffbe0 0%,#ffe27a 44%,#ffc93c 100%);
  box-shadow:0 0 26px 10px rgba(255,214,102,.42);
  transition:transform 1.2s ease,background .8s linear,box-shadow .8s linear;
  z-index:3;                          /* 永远压在云之上，不会被云挡住 */
}
.smc.is-night .smc-orb{
  background:radial-gradient(circle at 64% 34%,#ffffff 0%,#eef3fc 46%,#cdd8ea 100%);
  box-shadow:0 0 22px 8px rgba(206,220,240,.38),inset -10px -5px 0 -3px rgba(124,146,186,.5);
}
/* 云：一条完整轮廓（内联 SVG）+ 内部体积明暗，不透明纯白；夜里转灰 */
.smc-cloud{
  position:absolute;z-index:2;
  filter:drop-shadow(0 6px 8px rgba(92,124,166,.20));
  animation:smc-drift 26s ease-in-out infinite alternate;
}
.smc-cloud svg{display:block;width:100%;height:auto;}
.smc-cloud-1{left:3%;top:8%;width:72px;animation-duration:30s;}
.smc-cloud-2{left:21%;top:3%;width:90px;animation-duration:24s;animation-delay:-6s;}
.smc-cloud-3{left:42%;top:9%;width:62px;animation-duration:34s;animation-delay:-12s;}
.smc.is-night{
  --smc-cl-a:#dfe2e8;                   /* 夜里的云＝灰色（不透明） */
  --smc-cl-b:#ced3db;
  --smc-cl-c:#b4bac5;
  --smc-cl-d:#9ba2ae;
  --smc-cl-e:#e9ebef;
}
.smc.is-night .smc-cloud{filter:drop-shadow(0 6px 9px rgba(10,18,40,.45));}
@keyframes smc-drift{
  from{transform:translate3d(-6px,0,0);}
  to{transform:translate3d(6px,0,0);}
}
/* 星：圆润五角（Q 版，内联 SVG + 白描边 + 高光）；z-index 比云低，永远在云后面 */
.smc-star{
  position:absolute;z-index:1;opacity:0;
  transition:opacity .7s linear;
  filter:drop-shadow(0 0 5px rgba(255,214,102,.9));
}
.smc-star svg{display:block;width:100%;height:auto;}
.smc.is-night .smc-star{opacity:1;animation:smc-twinkle 3.6s ease-in-out infinite;}
.smc-star-1{left:8%;top:26%;width:16px;}
.smc-star-2{left:30%;top:26%;width:13px;animation-delay:-.7s;}
.smc-star-3{left:50%;top:4%;width:15px;animation-delay:-1.4s;}
.smc-star-4{left:62%;top:20%;width:12px;animation-delay:-2.1s;}
.smc-star-5{left:72%;top:6%;width:14px;animation-delay:-2.8s;}
.smc-star-6{left:59%;top:8%;width:11px;animation-delay:-3.2s;}
@keyframes smc-twinkle{
  0%,100%{opacity:.66;transform:scale(.9) rotate(-7deg);}
  50%{opacity:1;transform:scale(1.08) rotate(7deg);}
}
/* 云 / 星用的渐变与滤镜配色（CSS 变量，白天纯白、夜里灰） */
.smc-cloud .c-a{stop-color:var(--smc-cl-a);}
.smc-cloud .c-b{stop-color:var(--smc-cl-b);}
.smc-cloud .c-c{stop-color:var(--smc-cl-c);}
.smc-cloud .c-d{stop-color:var(--smc-cl-d);}
.smc-cloud .c-e{stop-color:var(--smc-cl-e);}
.smc-star .s-a{stop-color:#fff6c9;}
.smc-star .s-b{stop-color:#ffd447;}
.smc-star .s-c{stop-color:#f7ab2c;}
/* 云朵的各个部件：填充色一律走变量（渐变 id 由脚本按实例写入元素属性） */
.smc-cloud .cl-shade{fill:var(--smc-cl-d);}
.smc-cloud .cl-gloss{fill:var(--smc-cl-e);}
.smc-cloud .cl-rim{fill:none;stroke:var(--smc-cl-a);stroke-width:.5;stroke-opacity:.9;}
.smc-star .st-face{stroke:#fffdf0;stroke-width:1.3;stroke-linejoin:round;}
.smc-star .st-gloss{fill:#ffffff;opacity:.75;}

/* ---------------- 3D 舞台 ---------------- */
.smc-scene{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  perspective:900px;perspective-origin:50% 64%;
}
.smc-stage{
  position:absolute;left:0;top:0;width:0;height:0;
  transform-style:preserve-3d;transform-origin:0 0;
}
.smc-deco{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none;}
.smc-shadow-l{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none;}
.smc-label-a{position:absolute;left:0;top:0;width:0;height:0;}

/* 地面 / 道路 / 跑道等平面（1 个面） */
.smc-flat{position:absolute;transform-origin:0 0;border-radius:2px;}
/* 花坛里的花 / 草地上的樱花花瓣（装饰平面，不参与光照） */
.smc-flower{
  position:absolute;transform-origin:0 0;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#ffe3ec 0%,#ff9fbb 62%,#ef7fa3 100%);
}
.smc-petal-flat{
  position:absolute;transform-origin:0 0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,217,.75) 0%,rgba(255,196,217,.15) 72%,rgba(255,196,217,0) 100%);
}
.smc-track{
  border-radius:999px;background:transparent !important;
  border-style:solid;
}
.smc-water{border-radius:50%;}
.smc-shadow{position:absolute;background:var(--smc-shadow);border-radius:1px;}

/* 方块：顶面 + 底面 + 四个侧面 */
.smc-box{position:absolute;transform-origin:0 0;transform-style:preserve-3d;}
.smc-f{
  position:absolute;transform-origin:50% 50%;backface-visibility:hidden;
  /* 避免数百个面在切换建筑时建立滤镜图层或逐面过渡。 */
}

/* ---------------- 可交互建筑 ---------------- */
.smc-b{
  position:absolute;transform-origin:0 0;transform-style:preserve-3d;
  text-decoration:none;color:inherit;cursor:pointer;

  /* v1.55：.smc-scene 是 pointer-events:none（不挡拖动/旋转），
     建筑本身必须显式打开命中，否则鼠标悬停/点击全部失效 */
  pointer-events:auto;
}
.smc-b:focus{outline:none;}
.smc-in{
  position:absolute;left:0;top:0;width:0;height:0;
  transform-style:preserve-3d;transform-origin:0 0;
  transition:transform .18s ease-out;
}
.smc-b.is-on .smc-in{transform:scale3d(1.075,1.075,1.075) translateZ(9px);}

.smc-hit{position:absolute;background:rgba(255,255,255,0);border-radius:3px;}
.smc-glow{
  position:absolute;border-radius:50%;opacity:0;transform-origin:0 0;
  background:radial-gradient(circle,rgba(56,189,248,.40) 0%,rgba(56,189,248,0) 70%);
  transition:opacity .32s ease;
}
.smc-b.is-on .smc-glow{opacity:1;}

/* 聚焦仅更新当前/上个建筑的 transform，不重绘其余数百个面。 */

/* ---------------- 建筑上方的文字（2D 图层，按相机深度叠放） ----------------
   v1.54：底改为不透明；字号与内边距收小；副文字（日期等）默认不显示，
          只在悬停/选中该建筑时出现 —— 这样文字框不会再盖住旁边的模型 */
.smc-labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;}
.smc-label{
  position:absolute;left:0;top:0;white-space:nowrap;
  display:inline-flex;flex-direction:column;align-items:center;gap:0;
  padding:1px 5px 2px;border-radius:5px;
  background:var(--smc-label-bg);
  border:1px solid var(--smc-label-bd);
  box-shadow:0 1px 3px rgba(15,23,42,.16);
  font-size:10px;font-weight:700;color:#12304d;letter-spacing:0;
  transform:translate(-50%,-100%);
  transform-origin:50% 100%;
  transition:transform .18s ease-out,opacity .18s ease;
  pointer-events:none;
}
.smc-label b{font-weight:700;font-size:10px;line-height:1.2;}
.smc-label i{display:none;font-style:normal;font-size:9px;font-weight:700;color:#0284c7;line-height:1.15;}
.smc-label.is-on i{display:block;}
.smc-label::after{content:none;}
.smc-label.is-on{
  opacity:1;color:#0b2545;
  transform:translate(-50%,-100%) translateY(-6px) scale(1.06);
}
.smc-labels.is-focus .smc-label:not(.is-on){opacity:.55;}

/* ---------------- 天气：云下 → 地面；风沿屏幕右下方 ---------------- */
.smc-weather,.smc-precip-anchor,.smc-precip-fall,.smc-precip-facing,
.smc-person,.smc-person-figure{
  position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  transform-style:preserve-3d;pointer-events:none;
}
.smc-precip-fall{animation:smc-precipitate var(--smc-duration) linear var(--smc-delay) infinite;}
.smc-drop,.smc-flake{position:absolute;pointer-events:none;}
.smc-drop{left:-.6px;top:-9px;width:1.2px;height:9px;border-radius:1px;background:linear-gradient(transparent,#69a6d7);animation:smc-precip-visibility var(--smc-duration) linear var(--smc-delay) infinite;}
.smc-flake{left:-1.5px;top:-3px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 1px #d9edff;animation:smc-snow-sway var(--smc-duration) ease-in-out var(--smc-delay) infinite,smc-precip-visibility var(--smc-duration) linear var(--smc-delay) infinite;}
/* 雨雪时云朵保持在固定锚点，避免发射点与云图案横向漂移。 */
.smc.is-rain .smc-cloud,.smc.is-snow .smc-cloud{animation:none;}
@keyframes smc-precipitate{
  from{transform:translateZ(var(--smc-rain-start));}
  to{transform:translateZ(var(--smc-ground));}
}
/* 透明度只施加在粒子本身，避免压平保留三维空间的父容器。 */
@keyframes smc-precip-visibility{
  0%{opacity:0;}
  2%{opacity:var(--o,.85);}
  99.8%{opacity:var(--o,.85);}
  100%{opacity:0;}
}
@keyframes smc-snow-sway{0%,100%{translate:0 0;}50%{translate:2px 0;}}
.smc-wind-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.smc-petal,.smc-wind{position:absolute;pointer-events:none;}
.smc-petal{width:7px;height:7px;border-radius:60% 0 60% 0;background:linear-gradient(135deg,#ffd9e6,#ffb0cc);animation:smc-petal linear infinite;}
.smc-wind{height:2px;border-radius:2px;animation:smc-wind linear infinite;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 45%,rgba(255,255,255,0));}
@keyframes smc-petal{
  from{transform:translate3d(0,0,0) rotate(0deg);opacity:0;}
  8%,85%{opacity:.9;}
  to{transform:translate3d(var(--smc-blow,420px),var(--smc-blow-down,150px),0) rotate(420deg);opacity:0;}
}
@keyframes smc-wind{
  from{transform:translate3d(-40px,0,0) scaleX(.6);opacity:0;}
  10%,80%{opacity:.8;}
  to{transform:translate3d(var(--smc-blow,420px),0,0) scaleX(1.1);opacity:0;}
}
/* 小人以完整 SVG 绘制圆柱投影与球头；统一朝向，旋转时不会散开。 */
.smc-person-svg{position:absolute;overflow:visible;pointer-events:none;}
.smc-festive,.smc-lantern,.smc-lantern-figure,.smc-festive-text{
  position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  transform-style:preserve-3d;pointer-events:none;
}
.smc-lantern-svg{position:absolute;overflow:visible;pointer-events:none;}
.smc-festive-outline{position:absolute;left:0;top:0;transform-origin:0 0;overflow:visible;pointer-events:none;backface-visibility:visible;}
.smc.is-sleeping *{animation-play-state:paused !important;}

/* ---------------- 面板头部：标题 + 一行日期（原「日期」面板并入这里） ----------------
   v1.55：标题与日期都强制单行 —— 「校园地图」不会被挤成两行，日期/节日过长时省略号收尾 */
.sm-panel-campus{display:flex;flex-direction:column;min-height:0;padding:10px 12px 12px;}
.sm-panel-campus .smc{flex:1;height:auto;min-height:200px;}
.sm-map-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;flex-wrap:nowrap;min-width:0;}
.sm-map-head h3{
  margin:0 !important;flex:0 0 auto;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:40%;
}
.sm-map-date{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-end;
  font-size:10.5px;font-weight:600;color:#7c8ba0;line-height:1.4;letter-spacing:0;
  min-width:0;overflow:hidden;white-space:nowrap;flex:1 1 auto;
}
.sm-map-date time{white-space:nowrap;flex:0 0 auto;}
.sm-map-date .holiday{
  margin:0 !important;background:transparent !important;border:0 !important;padding:0 !important;
  font-size:10.5px !important;color:#8fa0b6 !important;line-height:1.4;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sm-map-date .holiday b{color:#0284c7;font-weight:700;}
.sm-map-date .holiday[hidden]{display:none;}

/* ---------------- 尺寸适配 ---------------- */
@media (max-width:1024px){
  .smc{min-height:270px;}
}
@media (max-width:768px){
  .smc{min-height:250px;}
  .smc-label{font-size:9.5px;padding:1px 4px 2px;}
  .smc-label b{font-size:9.5px;}
  .smc-label i{font-size:8.5px;}
  .sm-map-date{font-size:10px;}
  .sm-map-date .holiday{font-size:10px !important;}
  .sm-map-head h3{max-width:34%;}
}
@media (prefers-reduced-motion:reduce){
  .smc-precip-fall,.smc-drop,.smc-flake,.smc-petal,.smc-wind,.smc-cloud,.smc.is-night .smc-star{animation:none;}
  .smc-precip-fall{transform:translateZ(var(--smc-rain-start));}
  .smc-in,.smc-label{transition:none;}
}

/* 触摸旋转时不允许建筑抬起/落下与舞台变换同时发生。 */
.smc:not(.smc-webgl) .smc-stage{will-change:transform;}
.smc.is-interacting .smc-in{transform:none!important;transition:none!important;}
.smc.is-panning .smc-b{pointer-events:none;}
/* 日期和最近节日分两行，允许长节日信息换行，不再省略日期。 */
.sm-map-head{align-items:flex-start;gap:8px;}
.sm-map-head h3{max-width:none;}
.sm-map-date{flex-direction:column;align-items:flex-end;gap:2px;overflow:visible;white-space:normal;line-height:1.5;}
.sm-map-date .holiday{flex:none;max-width:100%;overflow:visible;white-space:normal;text-overflow:clip;text-align:right;overflow-wrap:anywhere;}