/* ============================================================
   DotEyes · 小新
   底图是手绘稿直接上色的 PNG（轮廓、脸型、耳朵、拳头都来自原稿），
   代码只叠两层：会跟着指针跑的星星高光 + 眨眼时盖下来的皮肤色眼皮。
   ============================================================ */

.dot-eyes {
  --look-x: 0px;
  --look-y: 0px;
  --tilt: 0deg;
  --attention: 0;
  --face-w: 120px;
  --face-h: 137px;
  align-items: center;
  align-self: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-self: end;
  max-width: 100%;
  padding: 2px 6px;
  position: relative;
  user-select: none;
}

.dot-eyes:disabled {
  cursor: default;
}

.dot-eyes:focus-visible {
  border-radius: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 底图 ---------- */

.shin-art {
  display: block;
  height: var(--face-h);
  position: relative;
  transform: rotate(var(--tilt));
  transform-origin: 50% 88%;
  transition: transform 120ms linear;
  width: var(--face-w);
}

.shin-art__bob {
  animation: shin-bob 3.8s ease-in-out infinite;
  display: block;
  height: 100%;
  transform-origin: 50% 88%;
  width: 100%;
}

.shin-art__img {
  display: block;
  height: 100%;
  user-select: none;
  width: 100%;
}

/* ---------- 眼睛上的星星高光 ---------- */

.shin-eye {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  overflow: hidden;
  place-items: center;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14.18%;
}

.shin-eye--l {
  left: 36.82%;
  top: 45.96%;
}

.shin-eye--r {
  left: 59.45%;
  top: 45.96%;
}

.shin-eye__star {
  display: block;
  height: 66%;
  transform: translate(var(--look-x), var(--look-y));
  transition: transform 90ms linear;
  width: 66%;
}

.shin-eye__star svg {
  display: block;
  fill: #ffffff;
  height: 100%;
  width: 100%;
}

/* ---------- 眨眼：皮肤色眼皮盖下来 + 一条闭眼线 ---------- */

.shin-lid {
  aspect-ratio: 1 / 1;
  background: #ffd9a8;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 40ms linear;
  width: 15.6%;
}

.shin-lid--l {
  left: 36.82%;
  top: 45.96%;
}

.shin-lid--r {
  left: 59.45%;
  top: 45.96%;
}

.shin-lid::after {
  border-bottom: 2.5px solid #1a1a1a;
  border-radius: 0 0 50% 50%;
  bottom: 30%;
  content: "";
  height: 30%;
  left: 14%;
  position: absolute;
  right: 14%;
}

.dot-eyes--blink .shin-lid {
  opacity: 1;
}

/* ---------- 数据未就绪：闭眼、整体变淡 ---------- */

.dot-eyes--dormant {
  opacity: 0.55;
}

.dot-eyes--dormant .shin-lid {
  opacity: 1;
}

.dot-eyes--dormant .shin-eye__star {
  opacity: 0.15;
}

/* ---------- 首次睁眼 ---------- */

.dot-eyes--waking .shin-lid {
  animation: shin-eyes-open 620ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
  opacity: 1;
}

.dot-eyes--waking .shin-eye__star {
  animation: shin-star-in 520ms linear 240ms both;
  opacity: 0;
}

.dot-eyes--waking .shin-art__bob {
  animation: shin-bob 3.8s ease-in-out infinite, shin-pop 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- 双击回应：蹦一下 + 冒颗星星 ---------- */

.dot-eyes--respond .shin-art__bob {
  animation: shin-hop 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shin-spark {
  animation: shin-spark 640ms ease-out both;
  height: 30%;
  position: absolute;
  right: 4%;
  top: 6%;
  width: 26%;
}

.shin-spark svg {
  display: block;
  fill: #ffb02e;
  height: 100%;
  width: 100%;
}

@keyframes shin-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.4px);
  }
}

@keyframes shin-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shin-hop {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-8px) scale(1.03);
  }
  70% {
    transform: translateY(1px) scale(0.985);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes shin-eyes-open {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shin-star-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shin-spark {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shin-art,
  .shin-art__bob,
  .shin-eye__star,
  .shin-lid,
  .shin-spark {
    animation: none !important;
    transition: none !important;
  }

  .dot-eyes--dormant .shin-lid {
    opacity: 0;
  }

  .dot-eyes--dormant {
    opacity: 1;
  }
}

/* ERP placement only; DotEyes rules above are copied from the live HD source. */
.home-mascot-slot{grid-column:3;grid-row:1;position:relative;min-width:0;align-self:stretch;pointer-events:none;}
.home-mascot-slot .dot-eyes{--accent:var(--brand);position:absolute;bottom:-2px;right:max(128px,calc((100% - 153px)/2));z-index:2;pointer-events:auto;padding-top:12px;}
.home-mascot-slot .dot-eyes--still :is(.shin-art,.shin-art__bob,.shin-eye__star,.shin-lid,.shin-spark),
.home-mascot-slot .dot-eyes--print :is(.shin-art,.shin-art__bob,.shin-eye__star,.shin-lid,.shin-spark){animation:none!important;transition:none!important;}
.home-mascot-slot .dot-eyes--still .shin-art,.home-mascot-slot .dot-eyes--still .shin-eye__star{transform:none!important;}
.home-mascot-slot .dot-eyes--still .shin-lid,.home-mascot-slot .dot-eyes--still .shin-spark{opacity:0!important;}
@media(max-width:900px){
  .silver-home{position:relative;}
  :root[data-slg-ui="silver"] .silver-home .home-heading{min-height:152px;padding-right:159px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;}
  .home-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-mascot-slot{position:absolute;top:-10px;right:0;width:153px;height:165px;}
  .home-mascot-slot .dot-eyes{right:0;bottom:0;padding-top:0;}
}
@media print{.home-mascot-slot{display:none!important;}}

@media(max-width:600px){.silver-home .home-stat{flex-wrap:wrap;gap:4px 6px;padding-inline:10px;}.silver-home .home-stat>b{font-size:24px;}.silver-home .home-stat>.nav-symbol{width:24px;height:24px;padding:4px;}.silver-home .home-stat>span{font-size:12px;}}