/* ============================================================================
 * Nav · 动效层（老虎机 · 内联循环版）
 * 作者：Bob   日期：2026-05-13
 * 设计：
 *   - 老虎机 reel 内联在 LINK 文字 和 game 按钮之间，不再遮挡按钮
 *   - 透明背景 + 主题色金线边框，融入整体配色
 *   - 持续循环：滚 → 中奖停留 → 冲光 → 继续滚（4.5s 一个周期）
 *   - 中奖瞬间，一道金色激光从 reel 横扫到 game 按钮，按钮 brightness pulse
 * 性能：sprite repeat-y 无缝衔接，无 layout 抖动；CSS ~5KB
 * ========================================================================= */

:root{
  --glow-color: 251, 246, 0;
  --glow-strong: 0.55;
  --glow-soft:   0.18;
}

/* —— LINK 主按钮锚点（LINK 文字 + game 按钮紧贴） —— */
.net-wrapper ul li{
  position: relative;
}
.net-wrapper ul li a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .14rem;
  isolation: isolate;
}
.net-wrapper ul li a .button{
  margin-left: 0 !important;   /* 取消原 .8rem 间距，让 game 紧贴 LINK */
}

/* ============================================================================
 *  金光四射 sunburst：从 game 按钮中心爆开（li::before）
 *  实现：SVG data URL 内联 (8 条放射光线 + 中心光晕)
 *  blend mode screen 让光"溶进"按钮而不遮挡
 * ========================================================================= */
.net-wrapper ul li::before{
  content: "";
  position: absolute;
  top: 50%;
  right: .64rem;            /* game 按钮中心：按钮宽 1.28rem 的一半 */
  width: 2rem;
  height: 2rem;
  transform: translate(50%, -50%) scale(0) rotate(0);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  /* 柔化：中心从纯白改暖白 #fff5d8，光线从纯白改奶油 #fff0c0 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><radialGradient id='c' cx='50%25' cy='50%25' r='50%25'><stop offset='0' stop-color='%23fff5d8' stop-opacity='.95'/><stop offset='.18' stop-color='%23ffe89a' stop-opacity='.75'/><stop offset='.4' stop-color='%23ffd700' stop-opacity='.25'/><stop offset='1' stop-color='%23ffd700' stop-opacity='0'/></radialGradient><linearGradient id='r' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffd700' stop-opacity='0'/><stop offset='.45' stop-color='%23fff0c0' stop-opacity='.9'/><stop offset='.55' stop-color='%23fff0c0' stop-opacity='.9'/><stop offset='1' stop-color='%23ffd700' stop-opacity='0'/></linearGradient></defs><g transform='translate(100 100)'><rect x='-4' y='-92' width='8' height='184' fill='url(%23r)' transform='rotate(0)'/><rect x='-3' y='-78' width='6' height='156' fill='url(%23r)' transform='rotate(45)'/><rect x='-4' y='-92' width='8' height='184' fill='url(%23r)' transform='rotate(90)'/><rect x='-3' y='-78' width='6' height='156' fill='url(%23r)' transform='rotate(135)'/><circle r='42' fill='url(%23c)'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: gold-burst 4.5s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
  animation-delay: calc(var(--idx, 0) * .3s);
  filter: blur(.5px);   /* 一点点模糊让光更柔 */
}

/* sunburst 爆开（柔化版：opacity 起始 0.75，整体不晃眼）*/
@keyframes gold-burst{
  0%, 55%  { transform: translate(50%, -50%) scale(0)    rotate(0deg);  opacity: 0; }
  56%      { transform: translate(50%, -50%) scale(.35)  rotate(8deg);  opacity: .7; }
  60%      { transform: translate(50%, -50%) scale(.95)  rotate(22deg); opacity: .75; }
  66%      { transform: translate(50%, -50%) scale(1.35) rotate(40deg); opacity: .55; }
  74%      { transform: translate(50%, -50%) scale(1.7)  rotate(60deg); opacity: .25; }
  82%      { transform: translate(50%, -50%) scale(1.95) rotate(75deg); opacity: 0; }
  100%     { transform: translate(50%, -50%) scale(0)    rotate(0deg);  opacity: 0; }
}

/* —— 按钮被冲光撞中：squash&stretch 重砸 + 节奏闪烁，4 个按钮依次错开 .3s —— */
.net-wrapper ul li a .button{
  position: relative;
  z-index: 2;
  transform-origin: center bottom;   /* 砸的重力中心在底部 */
  transition: filter .18s ease-out;
  animation:
    btn-glow 4.5s linear infinite,
    btn-slam 4.5s cubic-bezier(0.32, 0.64, 0.35, 1) infinite;
  animation-delay: calc(var(--idx, 0) * .3s), calc(var(--idx, 0) * .3s);
}

/*
 * btn-glow：柔和闪光（去掉白光叠加，只用主题金色，亮度峰值 1.25）
 * 时序：0~55% 静默；56% 中奖——温和提亮；3 次衰减脉冲；渐弱归位
 */
@keyframes btn-glow{
  0%, 55%  { filter: drop-shadow(0 0 0 rgba(var(--glow-color), var(--glow-soft))) brightness(1); }
  56%      { filter: drop-shadow(0 0 .14rem rgba(var(--glow-color), .8)) brightness(1.22); }
  62%      { filter: drop-shadow(0 0 .06rem rgba(var(--glow-color), .35)) brightness(1.04); }
  68%      { filter: drop-shadow(0 0 .12rem rgba(var(--glow-color), .7)) brightness(1.16); }
  74%      { filter: drop-shadow(0 0 .05rem rgba(var(--glow-color), .3)) brightness(1.03); }
  80%      { filter: drop-shadow(0 0 .10rem rgba(var(--glow-color), .55)) brightness(1.10); }
  90%      { filter: drop-shadow(0 0 .04rem rgba(var(--glow-color), .2)) brightness(1.02); }
  100%     { filter: drop-shadow(0 0 0 rgba(var(--glow-color), var(--glow-soft))) brightness(1); }
}

/*
 * btn-slam：squash & stretch 砸下反弹（迪士尼 12 法则）
 * 时序（4.5s 周期，56% = 冲光抵达瞬间）：
 *   0~55%  静止
 *   56%    重砸压扁：scaleX 1.18 × scaleY .82 + 下沉 .08rem
 *   60%    回弹拉伸：scaleX .92 × scaleY 1.14 + 上浮 .03rem
 *   64%    二次轻弹：scaleX 1.06 × scaleY .96 + 下沉 .015rem
 *   68%    三次微弹：scaleX .98 × scaleY 1.03
 *   72%~   归位静止
 */
@keyframes btn-slam{
  0%, 55%   { transform: scaleX(1) scaleY(1) translateY(0); }
  56%       { transform: scaleX(1.18) scaleY(.82) translateY(.08rem); }
  60%       { transform: scaleX(.92) scaleY(1.14) translateY(-.03rem); }
  64%       { transform: scaleX(1.06) scaleY(.96) translateY(.015rem); }
  68%       { transform: scaleX(.98) scaleY(1.03) translateY(-.005rem); }
  72%, 100% { transform: scaleX(1) scaleY(1) translateY(0); }
}

/* —— 悬停：只跑 glow，停掉 slam 让 hover scale 生效 —— */
.net-wrapper ul li a:hover .button{
  animation: btn-glow 4.5s linear infinite;
  animation-delay: calc(var(--idx, 0) * .3s);
  transform: scale(1.06);
}
.net-wrapper ul li a:active .button{
  transform: scale(.96);
}

/* ============================================================================
 *  老虎机滚轴：玻璃外壳风（居中、放大、立体感）
 * ========================================================================= */
.slot-reel{
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  width: 1.50rem;       /* 放大：.96 → 1.50 */
  height: .56rem;       /* 放大：.42 → .56 */
  padding: 2px;
  overflow: hidden;
  border-radius: 10px;
  /* 玻璃腔体：深色半透明（保留主题色透出）+ 中央纵向暗带 */
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%,
      rgba(0, 0, 0, .55) 0%,
      rgba(0, 0, 0, .35) 100%);
  /* 双层边框：内侧亮金外发光，模拟金属边框 */
  border: 1.5px solid rgba(var(--glow-color), .65);
  box-shadow:
    /* 外发光 */
    0 0 .08rem rgba(var(--glow-color), .45),
    0 0 .16rem rgba(var(--glow-color), .25),
    /* 内深陷 */
    inset 0 .025rem .04rem rgba(0, 0, 0, .7),
    /* 底部反光 */
    inset 0 -.012rem .02rem rgba(255, 255, 255, .08);
  position: relative;
  margin: 0 auto;       /* 居中 */
  vertical-align: middle;
  flex-shrink: 0;
  z-index: 1;
  isolation: isolate;
}

/* 玻璃凸面顶部高光（椭圆反射，让按钮显得有弧度） */
.slot-reel::before{
  content: "";
  position: absolute;
  top: 1px; left: 6%; right: 6%;
  height: 45%;
  border-radius: 50% 50% 30% 30% / 100% 100% 30% 30%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .28) 0%,
    rgba(255, 255, 255, .08) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
}

/* 内部叠加层：中央金线（中奖指示）+ 上下景深阴影 */
.slot-reel::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 中央指示线 */
    linear-gradient(180deg,
      transparent 0%, transparent 47%,
      rgba(var(--glow-color), .55) 49.5%,
      rgba(255, 255, 255, .75) 50%,
      rgba(var(--glow-color), .55) 50.5%,
      transparent 53%, transparent 100%),
    /* 上下纵深阴影 */
    linear-gradient(180deg,
      rgba(0, 0, 0, .55) 0%,
      transparent 22%,
      transparent 78%,
      rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
  z-index: 8;
}

/* 3 列 */
.slot-col{
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: block;
}

/* strip：sprite repeat-y 实现无缝循环 */
.slot-col::before{
  content: "";
  display: block;
  width: 100%;
  height: 1400%;            /* 2 张 sprite 高 */
  background-size: 100% 50%; /* 1 张 sprite 占一半 */
  background-repeat: repeat-y;
  background-position: 0 0;
  will-change: transform;
}

/* 3 列各引一张顺序不同的 sprite，叠加 idx 错落延迟（4 个按钮依次中奖）*/
.slot-col.col-a::before{
  background-image: url("../img/slot/reel-a.png");
  animation: spin-a 4.5s linear infinite;
  animation-delay: calc(var(--idx, 0) * .3s);
}
.slot-col.col-b::before{
  background-image: url("../img/slot/reel-b.png");
  animation: spin-b 4.5s linear infinite;
  animation-delay: calc(var(--idx, 0) * .3s - .15s);
}
.slot-col.col-c::before{
  background-image: url("../img/slot/reel-c.png");
  animation: spin-c 4.5s linear infinite;
  animation-delay: calc(var(--idx, 0) * .3s - .30s);
}

/* dummy 同步周期 + 中奖时刻整体微亮（JS 监听 animationiteration 切换中奖符号） */
.slot-reel{
  animation: slot-tick 4.5s linear infinite;
  animation-delay: calc(var(--idx, 0) * .3s);
}
@keyframes slot-tick{
  0%, 100% { filter: brightness(1); }
  52%      { filter: brightness(1.18) saturate(1.15); }
  62%      { filter: brightness(1.10) saturate(1.08); }
  72%      { filter: brightness(1); }
}

/*
 * 循环时序（4.5s）：
 *  0%   起始 (translateY: 0)
 *  50%  滚到中奖位置 (var --ya/yb/yc，0~-50%)
 *  72%  中奖停留 0.99s
 *  100% 继续滚到下一张 sprite (-50%)，因 repeat-y 无缝衔接
 *
 *  三列错开方式：a 直接停，b/c 比 a 晚 80ms/160ms 到达中奖（视觉错落）
 */
@keyframes spin-a{
  0%   { transform: translateY(0%); }
  48%  { transform: translateY(calc(var(--ya, 0%) - 1.4%)); }   /* 过冲 */
  52%  { transform: translateY(var(--ya, 0%)); }                /* 落定 */
  72%  { transform: translateY(var(--ya, 0%)); }
  100% { transform: translateY(-50%); }
}
@keyframes spin-b{
  0%   { transform: translateY(0%); }
  50%  { transform: translateY(calc(var(--yb, 0%) - 1.4%)); }
  54%  { transform: translateY(var(--yb, 0%)); }
  72%  { transform: translateY(var(--yb, 0%)); }
  100% { transform: translateY(-50%); }
}
@keyframes spin-c{
  0%   { transform: translateY(0%); }
  52%  { transform: translateY(calc(var(--yc, 0%) - 1.4%)); }
  56%  { transform: translateY(var(--yc, 0%)); }
  72%  { transform: translateY(var(--yc, 0%)); }
  100% { transform: translateY(-50%); }
}

/* ============================================================================
 *  中奖冲光：从 reel 中心 → game 按钮，金色激光横扫
 *  实现：li::after，从 li 中部（reel 位置）射向右端（game 按钮）
 * ========================================================================= */
.net-wrapper ul li::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;          /* reel 中心右侧起点 */
  right: 5%;          /* game 按钮中心终点 */
  height: 2px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg,
    rgba(var(--glow-color), 0)   0%,
    rgba(var(--glow-color), .95) 25%,
    rgba(255, 255, 255, 1)        65%,
    rgba(var(--glow-color), 0)   100%);
  filter: drop-shadow(0 0 .04rem rgba(var(--glow-color), .9));
  border-radius: 2px;
  pointer-events: none;
  z-index: 6;
  animation: zap 4.5s ease-out infinite;
  animation-delay: calc(var(--idx, 0) * .3s);
}

@keyframes zap{
  0%,  52%  { transform: translateY(-50%) scaleX(0);    opacity: 0; }
  53%       { transform: translateY(-50%) scaleX(0.05); opacity: .8; }
  56%       { transform: translateY(-50%) scaleX(1);    opacity: 1; }
  62%       { transform: translateY(-50%) scaleX(1);    opacity: .9; }
  68%       { transform: translateY(-50%) scaleX(1);    opacity: 0; }
  100%      { transform: translateY(-50%) scaleX(1);    opacity: 0; }
}

/* ============================================================================
 *  ms 数字微光点 + download/social hover + 公告流光
 * ========================================================================= */
.net-wrapper ul li .flex p{ position: relative; }
.net-wrapper ul li .flex p::after{
  content: "";
  position: absolute;
  top: 50%; right: -.18rem;
  transform: translateY(-50%);
  width: .08rem; height: .08rem;
  border-radius: 50%;
  background: rgba(var(--glow-color), 1);
  box-shadow: 0 0 .08rem rgba(var(--glow-color), .9);
  animation: nav-blink 1.6s ease-in-out infinite;
  animation-delay: calc(var(--idx, 0) * .2s);
}
@keyframes nav-blink{
  0%, 100%{ opacity: .2; transform: translateY(-50%) scale(.7); }
  50%    { opacity: 1;  transform: translateY(-50%) scale(1.1); }
}

.links a img{
  transition: transform .2s ease-out, filter .2s ease-out;
}
.links a:hover img{
  transform: translateY(-.04rem) scale(1.03);
  filter: drop-shadow(0 .06rem .12rem rgba(var(--glow-color), .45)) brightness(1.05);
}
.links a:active img{ transform: translateY(0) scale(.97); }

.notice{ position: relative; overflow: hidden; }
.notice::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(var(--glow-color), .12) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: notice-stream 5s linear infinite;
  pointer-events: none;
}
@keyframes notice-stream{ to { transform: translateX(100%); } }

/* will-change 撤销 */
body.anim-done .slot-col::before{ will-change: auto; }

/* ============================================================================
 *  无障碍：禁用动画时直接隐藏 reel + 冲光
 * ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .slot-reel{ display: none !important; }
  .net-wrapper ul li a::after,
  .net-wrapper ul li a .button,
  .net-wrapper ul li .flex p::after,
  .links a img,
  .notice::before{
    animation: none !important;
    transition: none !important;
  }
}