/* ==================================================================
   单词板：4 × 2 的卡片网格
   ================================================================== */

.board-frame {
  position: relative;
  width: min(100%, 1740px, calc((100vh - 250px) * 2.8));
  width: min(100%, 1740px, calc((100dvh - 250px) * 2.8));
  container-type: inline-size;
}

/* 顶部：喇叭 —— 2/5 —— 闪电 */
.board-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-bottom: clamp(6px, 1.1vh, 14px);
}

.round-counter {
  display: flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.round-counter .slash {
  display: inline-block;
  transform: translateY(-0.08em);
  font-size: 0.72em;
  color: var(--ink-mute);
}

.round-counter.is-swap {
  animation: counterSwap 0.42s cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes counterSwap {
  0% {
    transform: scale(1.16) rotate(-1.5deg);
  }
  100% {
    transform: scale(1);
  }
}

/* 网格 */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(6px, 0.8vw, 14px);
  width: 100%;
  aspect-ratio: 2.8 / 1;
}

/* ---------------------------------------------------------------- 卡片 */

.card {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--paper-card);
  border: var(--bw) solid var(--ink);
  border-radius: 2px;
  animation: deal 0.44s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 24ms);
  transition:
    border-color 0.12s linear,
    box-shadow 0.14s ease-out;
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 单词：字号由 JS 按卡片尺寸算出来，保证刚好铺满 */
.word {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
  transform-origin: center;
}

/* 中文释义（默认隐藏） */
.gloss {
  position: absolute;
  right: 4.5%;
  bottom: 3.5%;
  font-size: clamp(9px, 1.45vw, 19px);
  font-weight: 700;
  color: var(--ink-mute);
  opacity: 0;
  transition: opacity 0.18s linear;
  pointer-events: none;
}

.board--gloss .gloss {
  opacity: 0.6;
}

/* 当前目标：黑框保持，外面先留一道白缝再套绿框 —— 和参考图一致 */
.card.is-target {
  border-color: var(--ink);
  box-shadow:
    0 0 0 3px var(--paper-card),
    0 0 0 7px var(--green);
  z-index: 2;
}

/* 换目标时轻轻弹一下 */
.card.is-pop .word {
  animation: wordPop 0.24s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes wordPop {
  0% {
    transform: scale(0.93);
  }
  62% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

/* 每一拍：目标卡外面炸开一圈黄框，不改变字的可读性 */
.card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 4px solid var(--yellow);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}

.card.is-beat::after {
  animation: beatRing 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes beatRing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: scale(1.045);
  }
}

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

@media (max-width: 860px) {
  .board-frame {
    width: 100%;
  }

  .board {
    /* 手机上 4×2 太扁，保留四列但让卡片更方一点 */
    aspect-ratio: 2.1 / 1;
  }
}

/* 竖屏手机：4 列太挤、上下又空一大片，改成 2 列 × 4 行把整屏高度吃满。
   阅读顺序仍是「从左到右、从上到下」，和桌面一致。 */
@media (max-width: 560px) and (orientation: portrait) {
  .board-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
  }

  .board {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* 手机横屏：又宽又矮。这里不按宽度算比例，而是让板子把「剩下的高度」全吃掉，
   屏幕再矮也不会把卡片挤出画面。4 列 2 行保持不变，和投影时的版式一致。 */
@media (orientation: landscape) and (max-height: 560px) {
  .board-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
  }

  .board {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
    gap: 5px;
  }

  .board-head {
    margin-bottom: 2px;
  }

  .round-counter {
    font-size: clamp(20px, 4vw, 38px);
  }

  .card {
    border-width: 2px;
  }

  .card.is-target {
    box-shadow:
      0 0 0 2px var(--paper-card),
      0 0 0 5px var(--green);
  }

  .card::after {
    inset: -2px;
    border-width: 3px;
  }
}

@media (max-width: 560px) {
  .board {
    gap: 4px;
  }

  .card {
    border-width: 2px;
  }

  .card.is-target {
    box-shadow:
      0 0 0 2px var(--paper-card),
      0 0 0 5px var(--green);
  }

  .card::after {
    inset: -2px;
    border-width: 3px;
  }
}