/* =========================================================
   JYC 鼠界 · 精灵反馈层 jyc-sprite.css
   静态精灵 + CSS 补间 = 动效，体积远小于 GIF
   ========================================================= */

#jyc-sprite-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

.jyc-sprite {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  will-change: transform, opacity;
}
.jyc-sprite img {
  display: block;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .62));
}

/* ---------- 胜利：从下方蹦出 → 欢腾抖动 → 飘升淡出 ---------- */
.jyc-sp-win {
  animation: jycWinIn .52s cubic-bezier(.16, 1.5, .3, 1) both;
}
.jyc-sp-win img {
  animation: jycWinCheer .5s ease-in-out .5s 2 alternate;
}
@keyframes jycWinIn {
  from { transform: translateX(-50%) translateY(90px) scale(.5); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes jycWinCheer {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-14px) rotate(4deg); }
}

/* 大胜 / 巨胜：更大、更亮、带光环 */
.jyc-sp-win.tier1 img { width: 195px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(245,196,81,.55)); }
.jyc-sp-win.tier2 img { width: 250px; filter: drop-shadow(0 18px 34px rgba(0,0,0,.6)) drop-shadow(0 0 42px rgba(245,196,81,.85)); }

.jyc-sp-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,81,.34) 0%, rgba(245,196,81,.14) 42%, transparent 68%);
  animation: jycHalo 1.5s ease-out infinite;
  z-index: -1;
}
@keyframes jycHalo {
  from { transform: scale(.5); opacity: .95; }
  to   { transform: scale(1.75); opacity: 0; }
}

/* ---------- 失败：侧滑进入 → 沮丧摇头 → 下沉淡出 ---------- */
.jyc-sp-lose {
  animation: jycLoseIn .44s cubic-bezier(.16, 1, .3, 1) both;
}
.jyc-sp-lose img {
  width: 130px;
  animation: jycLoseShake .62s ease-in-out .42s 2;
}
@keyframes jycLoseIn {
  from { transform: translateX(-50%) translateY(34px) scale(.82); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes jycLoseShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

/* ---------- 退场 ---------- */
.jyc-sprite.out {
  animation: jycSpOut .42s ease-in forwards;
}
@keyframes jycSpOut {
  to { transform: translateX(-50%) translateY(-46px) scale(.86); opacity: 0; }
}

/* =========================================================
   猫鼠对决：阵营精灵图标
   ========================================================= */
.jyc-faction {
  display: block;
  width: 100%;
  max-width: 92px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .22s ease;
}
.jyc-faction-claw { animation: jycClawIdle 3.4s ease-in-out infinite; }
.jyc-faction-fang { animation: jycFangIdle 3.8s ease-in-out infinite; }
@keyframes jycClawIdle {
  0%, 88%, 100% { transform: rotate(0) scale(1); }
  93% { transform: rotate(-7deg) scale(1.07); }
}
@keyframes jycFangIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.dt-side:hover .jyc-faction {
  transform: scale(1.10);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(245, 196, 81, .5));
}
/* 本局获胜阵营：精灵放大发光 */
.dt-side.winner .jyc-faction {
  transform: scale(1.16);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(245, 196, 81, .85));
}
.dt-side.loser .jyc-faction { filter: grayscale(.75) brightness(.6); transform: scale(.94); }

/* =========================================================
   剩余 3 款玩法的专属材质（补完 v3.3）
   ========================================================= */

/* ---- 鼠王争霸 → 王座废金属 ---- */
body[data-game="pvp"] .game-body > .card:first-child {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(168deg, rgba(58, 52, 74, .44), rgba(18, 14, 28, .34)) !important;
  border-color: rgba(180, 160, 120, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 42px rgba(0,0,0,.4);
}
/* 段位徽章 → 冠冕铭牌 */
body[data-game="pvp"] .pill {
  background: linear-gradient(160deg, rgba(245,196,81,.22), rgba(120,88,20,.18)) !important;
  border: 1px solid rgba(245,196,81,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---- 奶酪天平 → 黄铜仪器 ---- */
body[data-game="classic"] .game-body > .card:first-child {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245, 196, 81, .12), transparent 60%),
    linear-gradient(170deg, rgba(52, 38, 22, .40), rgba(16, 11, 22, .30)) !important;
  border-color: rgba(214, 168, 88, .34) !important;
}
/* 刻度滑杆 → 黄铜游标 */
body[data-game="classic"] input[type="range"] {
  filter: sepia(.45) saturate(1.5) hue-rotate(-8deg);
}
body[data-game="classic"] .roll-display {
  text-shadow: 0 0 22px rgba(245, 196, 81, .55), 0 2px 6px rgba(0, 0, 0, .8);
}

/* ---- 嗅探连击 → 气味波纹 ---- */
body[data-game="hilo"] .game-body > .card:first-child {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(216, 180, 254, .16), transparent 62%),
    linear-gradient(170deg, rgba(38, 20, 52, .38), rgba(14, 8, 24, .28)) !important;
  border-color: rgba(216, 180, 254, .30) !important;
}
/* 从底部升腾的香气波纹 */
body[data-game="hilo"] .game-body > .card:first-child::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -40%;
  height: 90%;
  background:
    radial-gradient(ellipse 22% 46% at 18% 100%, rgba(245, 196, 81, .16), transparent 70%),
    radial-gradient(ellipse 18% 40% at 52% 100%, rgba(216, 180, 254, .14), transparent 70%),
    radial-gradient(ellipse 20% 44% at 82% 100%, rgba(245, 196, 81, .12), transparent 70%);
  animation: jycAroma 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jycAroma {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: .8; }
  50% { transform: translateY(-22px) scaleX(1.12); opacity: 1; }
}

/* =========================================================
   响应式 & 无障碍
   ========================================================= */
@media (max-width: 720px) {
  .jyc-sprite img { width: 112px; }
  .jyc-sp-win.tier1 img { width: 140px; }
  .jyc-sp-win.tier2 img { width: 170px; }
  .jyc-sprite { bottom: 16vh; }
  .jyc-faction { max-width: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .jyc-sp-win img, .jyc-sp-lose img,
  .jyc-faction-claw, .jyc-faction-fang,
  .jyc-sp-halo,
  body[data-game="hilo"] .game-body > .card:first-child::after { animation: none !important; }
}