/* 王者峡谷沙盘 — 轻度俯视 3D 桌面
   [视角重做 2026-09-10] 旧版 .st-plate 用 rotateZ(-45deg) 把方图转成菱形，
   再叠 rotateX(54deg) 大角度前倾 —— 三路走向被转没，看起来就是「地图是歪的」。
   现在只保留轻微前倾（27°）让桌面有厚度，不做 Z 轴旋转：峡谷朝向与游戏一致
   （蓝方左下、红方右上、三路沿边、河道对角）。
   ⚠ .st-static / .st-token / .st-focus 的 rotateX 必须与这里的角度互为相反数，
     否则图标会跟着桌面一起"躺平"，看不清。 */
/* [去黑边 2026-09-10] 地图是按舞台高度定尺寸的正方图，在宽容器里左右必然留空。
   空挡不填深色（那就是用户说的"黑边"），而是把同一张底图放大模糊后铺满舞台当背景：
   视觉上像地图向四周延伸进雾里，四角与两侧都不再有硬边。
   ⚠ 必须挂在 .st-stage::before 而不是 .st-plate：plate 是倾斜的 3D 元素，
     背景会跟着一起被透视压扁。 */
.st-root{margin:0 0 18px}
.st-stage::before{
  content:'';position:absolute;inset:-6%;pointer-events:none;
  background:url('map_top_v2.jpg') center/cover no-repeat;
  filter:blur(30px) saturate(1.05) brightness(.62);
  opacity:.5;
}
.st-stage{
  position:relative;
  --st-h:min(560px,58vw);
  perspective:1200px;
  perspective-origin:50% 52%;
  height:var(--st-h);
  border-radius:14px;
  overflow:hidden;
  /* [去黑边 2026-09-10] 底色从"近黑"改成草地同色系：地图边缘（草地/岩壁）与舞台背景咬合，
     四角不再出现黑色三角。底图本身的黑角已在 map_top_v2.jpg 里用边缘色延伸补掉。 */
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%, rgba(58,88,60,.55), transparent 72%),
    linear-gradient(180deg,#1a2419 0%,#141d16 55%,#101711 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 50px rgba(0,0,0,.45);
}
/* 地板：正方形可玩区图，按舞台高度定尺寸（1.08 倍高度 + 27° 前倾后视觉高度刚好铺满） */
/* 地板：正方形可玩区图。1.08 = 让正方图在 27° 前倾后刚好铺满舞台高度
   （视觉高度 = S·cos27° ≈ 0.89S，取 S=1.08h 时约 0.96h，四角基地不会被裁）。
   尺寸按舞台高度而非宽度定：宽容器里左右必然留空，那片空挡由 .st-stage::before
   的模糊同图背景填掉，而不是用深色底 —— 那正是用户看到的"黑边"。 */
.st-plate{
  position:absolute;left:50%;top:50%;
  width:calc(var(--st-h) * 1.08);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotateX(27deg);
  transform-style:preserve-3d;
  border-radius:6px;
  box-shadow:
    0 28px 60px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 80px rgba(80,140,100,.12);
}
/* 伪厚度：侧边高光，让桌面有厚度感 */
.st-plate::before{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,rgba(20,28,24,.85),rgba(8,10,10,.95));
  transform:rotateX(-90deg);transform-origin:top;
  box-shadow:0 0 12px rgba(0,0,0,.5);
}
.st-map{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:6px;
  filter:saturate(1.08) contrast(1.06) brightness(.95);
  pointer-events:none;user-select:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 40px rgba(0,0,0,.18);
  /* [去黑边] 边缘 6% 轻微羽化：地图方边与舞台底色之间不再是一道硬直线 */
  -webkit-mask-image:radial-gradient(ellipse 104% 104% at 50% 50%, #000 88%, rgba(0,0,0,.55) 96%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 104% 104% at 50% 50%, #000 88%, rgba(0,0,0,.55) 96%, rgba(0,0,0,0) 100%);
}
.st-plate.no-map{
  background:linear-gradient(145deg,#1e3a28,#0f1f16 60%,#0a140e);
}
/* 点位立绘：浮起，反向倾斜抵消桌面角度保持正面可读（-27° 对应 .st-plate 的 27°） */
.st-static{
  position:absolute;width:7%;height:7%;margin:-3.5% 0 0 -3.5%;
  transform:translateZ(8px) rotateX(-27deg);
  z-index:2;opacity:.88;pointer-events:none;
}
.st-static img{
  width:100%;height:100%;object-fit:contain;border-radius:50%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
  /* 去掉 JPG 底色残留：圆形裁切 + 轻微提亮，看起来像徽章不是色块 */
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),rgba(0,0,0,.35));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
/* [矢量地标 2026-09-10] 塔/水晶/符文走内联 SVG：不裁圆（造型本身不是圆的），
   尺寸按档递减 —— 全图现在有 18 座塔，同尺寸会糊成一片：
   一塔 8%（最外、最亮）/ 二塔 6.6% / 高地塔 5.6%（最暗）/ 野区符文 5.2% */
.st-static.is-vec{width:8%;height:8%;margin:-4% 0 0 -4%;opacity:.95}
.st-static.is-vec.is-t2{width:6.6%;height:6.6%;margin:-3.3% 0 0 -3.3%;opacity:.9}
.st-static.is-vec.is-t3{width:5.6%;height:5.6%;margin:-2.8% 0 0 -2.8%;opacity:.82}
.st-static.is-vec.is-sm{width:5.2%;height:5.2%;margin:-2.6% 0 0 -2.6%;opacity:.8}
/* 龙坑：比塔大一圈（它是全场目标物），但比水晶小，避免又变成"挡地图"的一块 */
.st-static.is-vec.is-drg{width:7.4%;height:7.4%;margin:-3.7% 0 0 -3.7%;opacity:.92}
.st-static.is-vec svg{
  width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));
}
.st-static::after{
  content:"";position:absolute;left:50%;top:100%;
  width:70%;height:6px;margin-left:-35%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent 70%);
}
/* 焦点圈 */
.st-focus{
  position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;border:2px solid var(--gold-300,#F8D568);
  transform:translateZ(12px) rotateX(-27deg);
  z-index:4;opacity:0;pointer-events:none;
  box-shadow:0 0 0 6px rgba(248,213,104,.15),0 0 22px rgba(248,213,104,.5);
  transition:opacity .25s, left .7s var(--ease,cubic-bezier(.2,.8,.2,1)), bottom .7s var(--ease,cubic-bezier(.2,.8,.2,1));
}
.st-focus.on{opacity:1;animation:stPulse 1.5s ease-in-out infinite}
@keyframes stPulse{
  0%,100%{transform:translateZ(12px) rotateX(-27deg) scale(1);box-shadow:0 0 0 4px rgba(248,213,104,.12),0 0 18px rgba(248,213,104,.4)}
  50%{transform:translateZ(14px) rotateX(-27deg) scale(1.08);box-shadow:0 0 0 10px rgba(248,213,104,.08),0 0 28px rgba(248,213,104,.55)}
}
/* 英雄 token：始终面向镜头。
   34px 是跟队形间距(0.085)配套定的尺寸：token 直径约等于舞台宽度 7%，
   大于这个值五人阵地就会糊成一团（截图核过）。 */
.st-token{
  position:absolute;width:34px;margin:-34px 0 0 -17px;z-index:5;
  transform:translateZ(16px) rotateX(-27deg);
  transition:left .75s var(--ease,cubic-bezier(.2,.8,.2,1)), bottom .75s var(--ease,cubic-bezier(.2,.8,.2,1));
  text-align:center;pointer-events:none;
}
.st-token .st-ava{
  width:30px;height:30px;margin:0 auto;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,#3a4a5c,#1a2430);
  border:2px solid #7ec8ff;
  box-shadow:0 6px 14px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;
  position:relative;
}
.st-token.away .st-ava{border-color:#ff8a7a}
.st-token .st-ava img{
  width:100%;height:100%;object-fit:cover;display:block;
  background:#1a2430;
}
.st-token .st-ava img[hidden]{display:none}
.st-token i{
  display:block;font-style:normal;font-size:9px;color:rgba(255,255,255,.92);
  margin-top:2px;text-shadow:0 1px 3px #000,0 0 4px #000;letter-spacing:.2px;
  max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.st-token.is-active .st-ava{
  box-shadow:0 0 0 2px var(--gold-300,#F8D568),0 0 18px rgba(248,213,104,.55),0 6px 14px rgba(0,0,0,.5);
  transform:scale(1.14);
}
/* 控制条 */
.st-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.st-btn{
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#e8eef6;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;
}
.st-btn:hover{background:rgba(255,255,255,.12)}
.st-range{flex:1;min-width:120px;accent-color:var(--gold-300,#F8D568)}
.st-clock{font-family:var(--font-num,monospace);font-size:12px;color:var(--gold-300,#F8D568);min-width:42px}
.st-label{font-size:12px;color:var(--txt-2,#c4cedb);flex:2;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .st-token,.st-focus{transition:none}
  .st-focus.on{animation:none}
}
@media(max-width:560px){
  .st-stage{--st-h:min(340px,78vw)}
  .st-plate{width:calc(var(--st-h) * 1.02)}
  .st-token{width:28px;margin:-28px 0 0 -14px}
  .st-token .st-ava{width:25px;height:25px;font-size:11px}
  .st-token i{display:none}
  .st-static{width:6%;height:6%;margin:-3% 0 0 -3%}
  .st-static.is-vec{width:7%;height:7%;margin:-3.5% 0 0 -3.5%}
  .st-static.is-vec.is-t2{width:5.8%;height:5.8%;margin:-2.9% 0 0 -2.9%}
  .st-static.is-vec.is-t3{width:5%;height:5%;margin:-2.5% 0 0 -2.5%}
  .st-static.is-vec.is-sm{width:4.6%;height:4.6%;margin:-2.3% 0 0 -2.3%}
}