/* 抢数对决 · 样式（.g-numbersnap 前缀） */

.g-numbersnap {
  gap: 8px;
  padding-bottom: calc(12px + var(--safe-b));
  position: relative;
}

/* ---------------- 顶部 ---------------- */

.g-numbersnap .ns-head { min-height: 40px; align-items: center; gap: 8px; }

.g-numbersnap .ns-target {
  flex: none;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.g-numbersnap .ns-diff {
  flex: 1;
  max-width: 250px;
  margin-left: auto;
}

.g-numbersnap .ns-diff .seg-item { min-height: 34px; font-size: 11.5px; }

/* ---------------- 玩家区域 ---------------- */

.g-numbersnap .ns-player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.g-numbersnap .ns-player.p1 {
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(121, 184, 255, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(46, 100, 200, 0.28), rgba(16, 30, 66, 0.42));
  border-color: rgba(121, 184, 255, 0.35);
}

.g-numbersnap .ns-player.p2 {
  background:
    radial-gradient(80% 60% at 80% 100%, rgba(255, 92, 108, 0.16), transparent 65%),
    linear-gradient(180deg, rgba(160, 40, 56, 0.26), rgba(60, 14, 22, 0.45));
  border-color: rgba(255, 92, 108, 0.35);
}

.g-numbersnap .ns-phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.g-numbersnap .ns-pname {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.g-numbersnap .ns-player.p1 .ns-pname { color: #a8d4ff; }
.g-numbersnap .ns-player.p2 .ns-pname { color: #ffb3ba; }

.g-numbersnap .ns-score {
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  color: #eaf4ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(121, 184, 255, 0.35);
}

.g-numbersnap .ns-player.p2 .ns-score { color: #ffe6e8; text-shadow: 0 0 18px rgba(255, 92, 108, 0.35); }

.g-numbersnap .ns-options {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.g-numbersnap .ns-opt {
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf4ff;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  transition: transform 0.1s ease, background 0.16s ease, opacity 0.2s ease;
}

.g-numbersnap .ns-player.p2 .ns-opt { color: #ffe8ea; }
.g-numbersnap .ns-opt:active { transform: scale(0.965); background: rgba(255, 255, 255, 0.16); }

.g-numbersnap .ns-opt.ok {
  background: #7ee787;
  border-color: #baffc4;
  color: #08330f;
  box-shadow: 0 0 26px rgba(126, 231, 135, 0.4);
}

.g-numbersnap .ns-opt.bad {
  background: #ff8b96;
  border-color: #ffc4ca;
  color: #3a0a10;
}

.g-numbersnap .ns-opt.locked {
  opacity: 0.26;
  filter: grayscale(1);
  pointer-events: none;
}

.g-numbersnap .ns-player.flash { animation: nsFlash 0.42s ease; }
.g-numbersnap .ns-player.wrong { animation: nsShake 0.38s ease; }

@keyframes nsFlash {
  0% { box-shadow: inset 0 0 0 rgba(126, 231, 135, 0); }
  35% { box-shadow: inset 0 0 46px rgba(126, 231, 135, 0.35), 0 0 24px rgba(126, 231, 135, 0.25); }
  100% { box-shadow: inset 0 0 0 rgba(126, 231, 135, 0); }
}

@keyframes nsShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* ---------------- 中间题目 ---------------- */

.g-numbersnap .ns-mid {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 20, 0.55);
}

.g-numbersnap .ns-round {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.g-numbersnap .ns-question {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: #f4f7ff;
  text-shadow: 0 0 24px rgba(121, 184, 255, 0.22);
  white-space: nowrap;
}

.g-numbersnap .ns-timer {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.g-numbersnap .ns-timer-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #79b8ff, #ff5c6c);
  transition: width 0.1s linear;
}

.g-numbersnap .ns-timer-fill.low { background: #ff5c6c; }

/* ---------------- 结算 ---------------- */

.g-numbersnap .ns-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 6, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.g-numbersnap .ns-overlay.show { display: flex; animation: fadeIn 0.18s ease both; }

.g-numbersnap .ns-ov-card {
  width: min(86%, 320px);
  padding: 22px 18px 16px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #161d2c, #0e131d);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.g-numbersnap .ns-ov-badge {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--faint);
}

.g-numbersnap .ns-ov-badge.p1 { color: #79b8ff; }
.g-numbersnap .ns-ov-badge.p2 { color: #ff7a86; }

.g-numbersnap .ns-ov-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 900;
  color: #eaf4ff;
}

.g-numbersnap .ns-ov-score {
  margin: 10px 0 8px;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.g-numbersnap .ns-ov-stats {
  font-size: 11px;
  line-height: 1.8;
  color: var(--dim);
  margin-bottom: 16px;
}

.g-numbersnap .ns-ov-card .btn { min-height: 44px; flex: 1; }

/* ---------------- 窄屏 ---------------- */

@media (max-height: 700px) {
  .g-numbersnap .ns-player { padding: 8px 10px; gap: 6px; }
  .g-numbersnap .ns-score { font-size: 23px; }
  .g-numbersnap .ns-question { font-size: 26px; }
  .g-numbersnap .ns-opt { font-size: 21px; }
  .g-numbersnap .ns-mid { padding: 6px 12px; gap: 4px; }
}

@media (max-width: 359px) {
  .g-numbersnap .ns-target { display: none; }
  .g-numbersnap .ns-diff { max-width: none; }
  .g-numbersnap .ns-opt { min-height: 60px; }
}