/* ── FX ──────────────────────────────────────────────────── */
  .fx-layer {
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    pointer-events: none;
  }
  .fx-particle {
    position: absolute;
    width: var(--size, 9px);
    height: var(--size, 9px);
    border-radius: var(--radius, 50%);
    background: var(--color, #ffc84a);
    animation: particle-fly var(--dur, .7s) cubic-bezier(.13, .65, .34, 1) forwards;
    will-change: transform, opacity;
  }
  .fx-ring {
    position: absolute;
    width: var(--ring-size, 56px);
    height: var(--ring-size, 56px);
    margin-left: calc(var(--ring-size, 56px) / -2);
    margin-top: calc(var(--ring-size, 56px) / -2);
    border: 3px solid var(--color, #ffd15b);
    border-radius: 50%;
    animation: ring-out .45s ease-out forwards;
  }
  .fx-float {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    font-family: var(--round);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: -.02em;
    color: #fff6cb;
    text-shadow: 0 2px 0 #d48224, 0 5px 12px rgba(73, 45, 12, .3);
    white-space: nowrap;
    animation: float-up .85s ease-out forwards;
  }
  .fx-float.is-gold { color: #fff1a0; text-shadow: 0 2px 0 #b77410, 0 0 16px rgba(255, 212, 76, .8); font-size: 24px; }
  .fx-float.is-bad { color: #ffd5cc; text-shadow: 0 2px 0 #a32f1e, 0 5px 12px rgba(75, 20, 12, .3); }
  .fx-float.is-miss { color: rgba(255, 249, 228, .8); font-size: 13px; letter-spacing: .08em; text-shadow: 0 2px 5px rgba(29, 53, 30, .5); }
  .fx-confetti {
    position: absolute;
    top: -20px;
    width: var(--w, 8px);
    height: var(--h, 13px);
    border-radius: 2px;
    background: var(--color);
    animation: confetti-fall var(--dur, 2.4s) linear var(--delay, 0s) forwards;
    will-change: transform;
  }
  .screen-flash {
    position: fixed;
    inset: 0;
    z-index: 92;
    pointer-events: none;
    opacity: 0;
  }
  .screen-flash.is-danger { animation: danger-flash .42s ease-out; }
  .screen-flash.is-win { animation: win-flash .75s ease-out; }
  .toast-layer {
    position: fixed;
    left: 50%;
    bottom: max(18px, 2.5vh);
    z-index: 95;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
    width: calc(100% - 24px);
    max-width: 430px;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: rgba(35, 77, 47, .92);
    box-shadow: 0 10px 24px rgba(24, 53, 31, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
    color: #fff9e7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    animation: toast-in .28s cubic-bezier(.2, 1.3, .4, 1) both;
    backdrop-filter: blur(8px);
  }
  .toast.is-combo { background: rgba(205, 95, 31, .94); }
  .toast.is-danger { background: rgba(177, 54, 38, .94); }
  .toast.is-leaving { animation: toast-out .25s ease-in both; }
  .toast .toast-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffd66a; box-shadow: 0 0 8px #ffd66a; }