/* ============================================================
   尾数连连看（LL107）九宫格舞台：js/fun-calculator.js 的 LL107.stage 配套样式。
   只作用于 [data-entry="LL107"]，沿用工作区作用域变量（--ink / --green / --line 等）。
   ============================================================ */

.fw-overlay[data-entry="LL107"] .fw-stage { height: auto; }
.fw-tail { --tail-gold: #d9a227; --tail-gold-ink: #8a6a14; --tail-wild: #8a6ad8; display: flex; flex-direction: column; gap: 14px; }
.fw-tail .fw-section-title { margin-bottom: 0; }
.fw-tail-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--fun-badge-2); color: var(--soft); font-weight: 700; }
.fw-tail-chip.locked { background: var(--fun-badge); color: var(--green-dark); }
.fw-tail-chip svg { width: 13px; height: 13px; }
.fw-tail-tip { margin: 0; font-size: 12px; line-height: 1.7; color: var(--soft); }

/* 网格本身是正方形、间距按百分比：格子中心恒在 1/6、1/2、5/6，连线 SVG 直接按百分比画 */
.fw-tail-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2.5%; aspect-ratio: 1; width: 100%; max-width: 420px; margin: 0 auto; }
.fw-tail-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed rgba(99, 159, 112, 0.4);
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, #f1f7ef);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.fw-tail-cell b { font-size: clamp(30px, 5vw, 46px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.fw-tail-cell small { font-size: 11px; font-weight: 800; }
.fw-tail-cell.filled { border-style: solid; border-color: rgba(99, 159, 112, 0.32); box-shadow: 0 2px 8px rgba(47, 86, 54, 0.06); }
.fw-tail-cell:hover { transform: translateY(-2px); border-color: rgba(99, 159, 112, 0.6); }
.fw-tail-cell.selected { border: 2px solid var(--green); background: var(--fun-badge); box-shadow: var(--fun-focus-ring); }
.fw-tail-grid.locked .fw-tail-cell { cursor: default; }
.fw-tail-grid.locked .fw-tail-cell:hover { transform: none; border-color: rgba(99, 159, 112, 0.32); }
.fw-tail-grid.locked .fw-tail-cell:not(.lit) b { color: var(--soft); }
.fw-tail-cell.lit { border-color: #e7c35e; background: radial-gradient(circle at 50% 38%, #fff8d9, #f8e3a1 72%); color: var(--tail-gold-ink); box-shadow: 0 0 0 2px rgba(217, 162, 39, 0.25), 0 8px 20px rgba(217, 162, 39, 0.28); }
.fw-tail-cell.lit small { color: var(--tail-gold-ink); }
.fw-tail-cell.wild small { color: var(--tail-wild); }
.fw-tail-cell.line { border-color: var(--tail-gold); background: radial-gradient(circle at 50% 38%, #ffe9a6, #f3c54f 78%); box-shadow: 0 0 0 3px rgba(217, 162, 39, 0.4), 0 10px 26px rgba(217, 162, 39, 0.38); }
.fw-tail-grid.picking .fw-tail-cell.pickable { cursor: pointer; border: 2px dashed var(--tail-wild); animation: fw-tail-pick 1.2s ease-in-out infinite; }
.fw-tail-grid.picking .fw-tail-cell.pickable:hover { transform: translateY(-2px); background: #f3eefd; }
@keyframes fw-tail-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fw-tail-pick { 50% { box-shadow: 0 0 0 4px rgba(138, 106, 216, 0.18); } }

.fw-tail-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; margin: 0 auto; }
.fw-tail-digit { min-height: 40px; border: 1.5px solid rgba(99, 159, 112, 0.35); border-radius: 10px; background: #fff; color: var(--green-dark); font-size: 17px; font-weight: 900; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.fw-tail-digit:hover { background: var(--fun-badge); transform: translateY(-1px); }
.fw-tail-digit.used { border-style: dashed; background: #f4f6f2; color: var(--soft); }
.fw-tail-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.fw-tail-wild { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgba(138, 106, 216, 0.28); border-radius: 12px; background: #f6f2fe; font-size: 12px; color: #5b4796; line-height: 1.6; }
.fw-tail-wild > span { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 200px; }
.fw-tail-wild > span svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--tail-wild); }
.fw-tail-wild.off { border-color: var(--line); background: #f4f6f2; color: var(--soft); }
.fw-tail-wild.off > span svg { color: var(--soft); }
.fw-tail-lines { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 800; color: var(--tail-gold-ink); }
.fw-tail-lines svg { width: 16px; height: 16px; }

.fw-tail-mini { display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; justify-content: center; margin: 12px 0 4px; }
.fw-tail-mini span { display: grid; place-items: center; height: 48px; border: 1.5px solid rgba(99, 159, 112, 0.35); border-radius: 10px; background: var(--fun-badge-2); font-size: 22px; font-weight: 900; color: var(--green-dark); }

/* ---------------- 动效：只挂在「本次新变化」的元素上（JS 对比上一次画面后加 just-* 类） ---------------- */
.fw-tail-cell.just-set b { animation: fw-tail-set 0.32s cubic-bezier(.2, .9, .3, 1.4); }
.fw-tail-grid.just-shuffle .fw-tail-cell { animation: fw-tail-flip 0.42s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--i) * 45ms); }
.fw-tail-grid.just-lock .fw-tail-cell { animation: fw-tail-lock 0.7s ease both; animation-delay: calc(var(--i) * 55ms); }
.fw-tail-cell.just-lit { z-index: 1; animation: fw-tail-lit 0.62s cubic-bezier(.2, .9, .3, 1.3); }
.fw-tail-cell.just-lit::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid #f3c54f; pointer-events: none; animation: fw-tail-ring 0.8s ease-out forwards; }
.fw-tail-cell.just-lit small { animation: fw-tail-rise 0.5s 0.15s ease both; }
.fw-tail-cell.just-wild::after { border-color: var(--tail-wild); }
.fw-tail-cell.just-wild::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle, rgba(138, 106, 216, 0.45), transparent 70%); animation: fw-tail-glow 0.9s ease-out forwards; }
.fw-tail-cell.just-line { animation: fw-tail-pop 0.5s calc(0.3s + var(--k) * 0.12s) ease forwards; }
.fw-tail-cell.just-lit.just-line { animation: fw-tail-lit 0.62s cubic-bezier(.2, .9, .3, 1.3), fw-tail-pop 0.5s calc(0.3s + var(--k) * 0.12s) ease forwards; }
.fw-tail-cell.just-repeat { animation: fw-tail-shake 0.45s ease; }

.fw-tail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.fw-tail-svg line { stroke: #c8870f; stroke-width: 1.9; stroke-linecap: round; opacity: 0.72; filter: drop-shadow(0 0 1.5px #fff6d2); }
.fw-tail-svg line.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fw-tail-draw 0.55s 0.62s cubic-bezier(.6, 0, .2, 1) forwards; }

.fw-tail-spark { position: absolute; left: 50%; top: 50%; z-index: 3; width: 9px; height: 9px; margin: -4.5px; border-radius: 2px; background: var(--c); pointer-events: none; opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); animation: fw-tail-spark 0.95s var(--t) cubic-bezier(.15, .75, .35, 1) forwards; }
.fw-tail-spark:nth-child(3n) { border-radius: 50%; }
.fw-tail-spark:nth-child(4n) { width: 6px; height: 12px; }

.fw-tail-banner { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.fw-tail-banner b { padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg, #fff4c8, #f3c54f); color: #6d4f07; font-size: clamp(17px, 2.6vw, 24px); font-weight: 900; box-shadow: 0 10px 28px rgba(200, 135, 15, 0.38); white-space: nowrap; opacity: 0; animation: fw-tail-banner 1.9s 0.75s ease both; }
.fw-tail-banner.soft b { background: linear-gradient(135deg, #f1fbf3, #d9f3df); color: var(--green-dark); box-shadow: 0 10px 24px rgba(47, 86, 54, 0.18); animation-delay: 0.45s; animation-duration: 1.4s; }

.fw-tail-wild.just-earned { position: relative; overflow: hidden; animation: fw-tail-pop 0.45s ease; }
.fw-tail-wild.just-earned::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%); transform: translateX(-100%); animation: fw-tail-shine 0.9s 0.1s ease forwards; }
.fw-tail-wild.just-earned > span svg { animation: fw-tail-spin 0.8s ease; }
.fw-tail-plus { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tail-wild); color: #fff; font-size: 11px; font-style: normal; font-weight: 900; animation: fw-tail-badge 0.6s cubic-bezier(.2, .9, .3, 1.5); }

@keyframes fw-tail-set { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fw-tail-flip { 0% { transform: perspective(500px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(500px) rotateY(0); opacity: 1; } }
@keyframes fw-tail-lock { 0% { filter: brightness(1); } 40% { filter: brightness(1.12); transform: scale(0.95); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes fw-tail-lit { 0% { transform: scale(0.82); filter: brightness(1.5); } 55% { transform: scale(1.1); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes fw-tail-ring { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fw-tail-glow { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fw-tail-rise { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes fw-tail-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes fw-tail-draw { to { stroke-dashoffset: 0; } }
@keyframes fw-tail-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1) rotate(200deg); } }
@keyframes fw-tail-banner { 0% { opacity: 0; transform: scale(0.6); } 14% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96) translateY(-8px); } }
@keyframes fw-tail-shine { to { transform: translateX(100%); } }
@keyframes fw-tail-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.35); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes fw-tail-badge { 0% { transform: scale(0); } 100% { transform: scale(1); } }

@media (max-width: 760px) {
  .fw-tail-grid { max-width: 320px; }
  .fw-tail-pad { max-width: 320px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fw-tail-digit { min-height: 44px; }
}