@keyframes tilePop {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    100% { transform: scale(0); opacity: 0; }
  }
  /* Hint: dim everything else, spotlight the two answer tiles hard */
  .onet-board.hint-active .onet-tile:not(.hint) { filter: brightness(.4) saturate(.6); transition: filter .2s; }
  .onet-tile.hint {
    position: relative; z-index: 15; outline: 2px solid #38bdf8; outline-offset: -1px;
    animation: hintPop .4s cubic-bezier(.34,1.56,.64,1) forwards, hintGlow 1s ease-in-out .4s infinite;
  }
  .onet-tile.hint::after {
    content: '👆'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    font-size: 18px; animation: hintBounce .6s ease-in-out infinite;
  }
  @keyframes hintPop { 0% { transform: scale(1); } 55% { transform: scale(1.22); } 100% { transform: scale(1.08); } }
  @keyframes hintGlow {
    0%, 100% { box-shadow: 0 0 0 4px #38bdf8, 0 0 16px 4px rgba(56,189,248,.5); }
    50%      { box-shadow: 0 0 0 5px #38bdf8, 0 0 30px 10px rgba(56,189,248,.9); }
  }
  @keyframes hintBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
  .onet-tile.wrong { outline: 2px solid var(--danger); outline-offset: -1px; background: transparent; animation: shake .3s; }
  @keyframes shake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
  .onet-tile.flash { outline: 2px solid var(--success); outline-offset: -1px; background: transparent; }

  .board-wrap.shake { animation: boardShake .28s; }
  @keyframes boardShake { 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} 100%{transform:translateX(0)} }

  /* Level transition: old board pulls down & out, new one slides in from the top */
  .board-wrap.level-out { animation: levelSlideOut .38s cubic-bezier(.5,0,.75,0) forwards; }
  .board-wrap.level-in  { animation: levelSlideIn .42s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes levelSlideOut { to { transform: translateY(50px); opacity: 0; } }
  @keyframes levelSlideIn  { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .praise-line { font-size: 13px; font-weight: 700; color: var(--accent2); margin-top: -4px; }
  .next-level-info {
    margin-top: 6px; padding: 10px 16px; border-radius: 12px;
    background: linear-gradient(120deg, var(--accent), var(--accent2));
    font-size: 13px; font-weight: 700; color: #fff; text-align: center; line-height: 1.5;
    box-shadow: 0 4px 14px rgba(245,158,11,.35);
    animation: nextLevelPulse 1.4s ease-in-out infinite;
  }
  .next-level-info b { font-size: 15px; }
  @keyframes nextLevelPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(245,158,11,.35); }
    50% { transform: scale(1.035); box-shadow: 0 6px 20px rgba(245,158,11,.55); }
  }

  .particle {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    pointer-events: none; z-index: 25;
    animation: particleBurst .55s ease-out forwards;
  }
  @keyframes particleBurst {
    0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
  }

  .combo-popup {
    position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
    width: 88%; max-width: 300px;
    font-size: 19px; font-weight: 800; color: var(--accent2); text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
    pointer-events: none; z-index: 30; opacity: 0;
  }
  .combo-popup.show { animation: comboPop .7s ease forwards; }
  @keyframes comboPop {
    0% { opacity: 0; transform: translate(-50%,-40%) scale(.6); }
    25% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
    70% { opacity: 1; transform: translate(-50%,-55%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-70%) scale(1); }
  }

  /* SVG path overlay — top/left must match board-wrap --bpad */
  .onet-line-svg {
    position: absolute; top: var(--bpad); left: var(--bpad);
    pointer-events: none; z-index: 10;
  }
  .onet-line-svg .seg-bg  { stroke: rgba(255,255,255,.95); stroke-width: 7; stroke-linecap: round; }
  .onet-line-svg .seg-fg  { stroke: #e85d3f; stroke-width: 3.5; stroke-linecap: round; }
  /* Inner colored stroke layered via paint-order trick isn't available — use SVG duplicate in drawPath */

  /* ── Result overlay ── */
  .result {
    display: none; position: absolute; inset: 0;
    background: rgba(255,255,255,.94); border-radius: 16px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; z-index: 20; backdrop-filter: blur(4px);
  }
  .result.show { display: flex; }
  .result-emoji { font-size: 3.5rem; }
  .result-title { font-size: 22px; font-weight: 800; color: var(--success); letter-spacing: -.02em; }
  .result-moves { font-size: 3.5rem; font-weight: 800; color: #0f172a; letter-spacing: -.04em; line-height: 1; }
  .result-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
  .result-sub { font-size: 13px; color: var(--muted); }
  .result-best { font-size: 12px; font-weight: 700; color: var(--muted); }
  .result-best span { color: var(--accent); }
  .result-btn {
    margin-top: 6px; padding: 10px 28px;
    background: linear-gradient(120deg, var(--accent), var(--accent2));
    color: #fff; border: none; border-radius: 10px;
    font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: .5px; text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(245,158,11,.3); transition: filter .15s;
  }
  .result-btn:hover { filter: saturate(1.1); }

  /* Auto-shuffle notice */
  .notice {
    text-align: center; font-size: 11px; font-weight: 700;
    color: var(--accent2); margin-top: 8px; height: 16px;
    opacity: 0; transition: opacity .3s;
    flex-shrink: 0;
  }
  .notice.show { opacity: 1; }

  /* ── Confetti ── */
  .confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
  .confetti-piece {
    position: absolute; top: -10px; width: 8px; height: 14px; opacity: .9;
    animation: confettiFall linear forwards;
  }
  @keyframes confettiFall { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }

  /* ── Level progress ── */
  .level-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
  .level-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); background: var(--bg); border: 1.5px solid var(--line); padding: 3px 10px; border-radius: 20px; }