/* ============================================================
   Impulse88 — Progressive Pool + steal interaction
   Pairs with Views/Shared/_ProgressivePool.cshtml,
   Views/Shared/_StealMascot.cshtml and wwwroot/js/impulse88-pool.js

   Desktop geometry = design screen 03 (1280px).
   The @media block at the bottom = design screen M3 (390x844).

   The character runs inside .imp-stage, a reserved band, so it can
   never overlap page content regardless of viewport.
   ============================================================ */

.imp-pool {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(100deg, #14202a, #0d151c);
    border-left: 4px solid var(--imp-lime);
    overflow: hidden;
}

.imp-pool-top { display: flex; }
.imp-pool-main { flex: 1; padding: 24px 26px; }

.imp-pool-side {
    flex: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 24px 26px;
    border-left: 1px solid var(--imp-line);
}

.imp-pool-kicker { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); }
.imp-pool-amount { font: 800 52px/1 var(--imp-sans); letter-spacing: -.03em; color: #fff; margin-top: 12px; font-variant-numeric: tabular-nums; }
.imp-pool-copy { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 12px; max-width: 560px; }
.imp-pool-copy b { color: var(--imp-lime); font-weight: 700; }

.imp-pool-stats { display: flex; gap: 26px; margin-top: 18px; }
.imp-pool-stat-label { font: 700 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-pool-stat-value { font: 800 18px/1 var(--imp-sans); color: #fff; margin-top: 7px; }
.imp-pool-stat-value.gain { color: var(--imp-lime); }

.imp-pool-hint { font: 400 11px/1.5 var(--imp-sans); color: var(--imp-text-4); }

/* reserved slot so the panel does not jump when the result paints */
.imp-pool-result-slot { height: 70px; display: flex; align-items: flex-end; }

.imp-pool-result {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--imp-lime);
    color: var(--imp-bg);
    animation: imp-popin .3s ease-out;
}

.imp-pool-result.show { display: inline-flex; }
.imp-pool-result.caught { background: var(--imp-red); color: #fff; }
.imp-pool-result-label { font: 700 12px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; }
.imp-pool-result-amount { font: 800 24px/1 var(--imp-sans); font-variant-numeric: tabular-nums; }

.imp-steal-btn {
    position: relative;
    font: 800 20px/1 var(--imp-sans);
    letter-spacing: .04em;
    color: var(--imp-bg);
    background: var(--imp-lime);
    border: 0;
    padding: 20px 0;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    cursor: pointer;
}

.imp-steal-btn:hover { background: var(--imp-lime-hi); }
.imp-steal-btn[disabled] { background: var(--imp-line-2); color: var(--imp-text-3); cursor: not-allowed; }

/* ---------- stage: the band the character runs in ---------- */

.imp-stage { position: relative; height: 146px; border-top: 1px solid var(--imp-line); background: linear-gradient(#0d151c, #0a0f14); }
.imp-stage-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; overflow: hidden; }

.imp-meter { position: absolute; left: 26px; top: 14px; width: 300px; height: 5px; background: #141c24; display: none; }
.imp-meter > span { display: block; height: 5px; background: var(--imp-red); width: 0; }
.imp-meter-label { position: absolute; left: 26px; top: 28px; font: 700 10px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-red); display: none; }

.imp-pool[data-phase="grab"] .imp-meter,
.imp-pool[data-phase="grab"] .imp-meter-label { display: block; }
.imp-pool[data-phase="grab"] .imp-meter > span { animation: imp-meter 1.5s linear forwards; }

.imp-runner { position: absolute; left: 0; bottom: 6px; animation: imp-idle .1s linear forwards; }
.imp-runner-gait { animation: imp-tiptoe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }

.imp-pool[data-phase="sneak"]  .imp-runner { animation: imp-sneak 1.7s ease-in-out forwards; }
.imp-pool[data-phase="grab"]   .imp-runner { animation: imp-hold .1s linear forwards; }
.imp-pool[data-phase="escape"] .imp-runner { animation: imp-escape 1.6s ease-in forwards; }
.imp-pool[data-phase="caught"] .imp-runner { animation: imp-flee 1.6s ease-in forwards; }

.imp-pool[data-phase="sneak"] .imp-runner-gait,
.imp-pool[data-phase="grab"] .imp-runner-gait { animation: imp-tiptoe .7s ease-in-out infinite; }
.imp-pool[data-phase="escape"] .imp-runner-gait,
.imp-pool[data-phase="caught"] .imp-runner-gait { animation: imp-dash .28s ease-in-out infinite; }

.imp-pool[data-phase="caught"] .imp-runner-svg { transform: scaleX(-1); }

.imp-leg-1 { transform-origin: 46px 84px; }
.imp-leg-2 { transform-origin: 62px 84px; }
.imp-pool[data-phase="escape"] .imp-leg-1,
.imp-pool[data-phase="caught"] .imp-leg-1 { animation: imp-stride .28s ease-in-out infinite; }
.imp-pool[data-phase="escape"] .imp-leg-2,
.imp-pool[data-phase="caught"] .imp-leg-2 { animation: imp-stride2 .28s ease-in-out infinite; }

.imp-arm { transform-origin: 62px 70px; }
.imp-pool[data-phase="grab"] .imp-arm { animation: imp-lean .5s ease-in-out infinite; }

.imp-headband-tails { transform-origin: 34px 22px; animation: imp-tail .5s ease-in-out infinite; }

.imp-loot { display: none; transform-origin: 88px 86px; }
.imp-pool[data-phase="grab"] .imp-loot { display: block; animation: imp-wobble .45s ease-in-out infinite; }
.imp-pool[data-phase="escape"] .imp-loot { display: block; animation: imp-grab .5s ease-out forwards; }

.imp-flash { position: absolute; left: 0; right: 0; bottom: 0; top: -240px; display: none; }

.imp-pool[data-phase="caught"] .imp-flash {
    display: block;
    background: radial-gradient(60% 100% at 30% 100%, rgba(230,57,70,.45), transparent);
    animation: imp-alarm .4s ease-in-out 3;
}

.imp-pool[data-phase="escape"] .imp-flash {
    display: block;
    background: linear-gradient(90deg, transparent, rgba(200,255,0,.16), transparent);
    animation: imp-sweep 1.3s ease-out forwards;
}

.imp-pool[data-phase="escape"] .imp-pool-amount { animation: imp-shake .5s ease-in-out 2; }

/* coins thrown on a successful escape */
.imp-coin { position: absolute; border-radius: 99px; background: var(--imp-lime); opacity: 0; }
.imp-pool[data-phase="escape"] .imp-coin-1 { left: 20%; bottom: 60px; width: 26px; height: 26px; animation: imp-coin-a 1.3s ease-out forwards; }
.imp-pool[data-phase="escape"] .imp-coin-2 { left: 25%; bottom: 48px; width: 20px; height: 20px; animation: imp-coin-b 1.4s .1s ease-out forwards; }
.imp-pool[data-phase="escape"] .imp-coin-3 { left: 30%; bottom: 64px; width: 30px; height: 30px; animation: imp-coin-c 1.35s .2s ease-out forwards; }
.imp-pool[data-phase="escape"] .imp-coin-4 { left: 35%; bottom: 44px; width: 18px; height: 18px; animation: imp-coin-d 1.45s .3s ease-out forwards; }

@keyframes imp-idle    { 0%, 100% { transform: translateX(18px); } }
@keyframes imp-sneak   { 0% { transform: translateX(-160px); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(210px); opacity: 1; } }
@keyframes imp-hold    { 0%, 100% { transform: translateX(210px); } }
@keyframes imp-escape  { 0% { transform: translateX(210px); } 80% { opacity: 1; } 100% { transform: translateX(1250px); opacity: 0; } }
@keyframes imp-flee    { 0% { transform: translateX(210px); } 80% { opacity: 1; } 100% { transform: translateX(-170px); opacity: 0; } }
/* No rotation in the idle gait, deliberately. The gait animation never
   stops, so the browser keeps the character on a composited layer and
   re-samples it every frame — and re-sampling a rotation blurs every
   edge in the artwork, permanently. The old ±1deg was imperceptible as
   motion but cost the whole character its sharpness. A pure vertical
   bob only ever softens horizontal edges, and only while it moves.
   imp-dash below keeps its rotation: that one is a 1.6s transient with
   the character sprinting off screen, where motion blur is wanted. */
@keyframes imp-tiptoe  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes imp-dash    { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes imp-lean    { 0%, 100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(7px) rotate(6deg); } }
@keyframes imp-stride  { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes imp-stride2 { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes imp-tail    { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes imp-wobble  { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.07); } }
@keyframes imp-grab    { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes imp-alarm   { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
@keyframes imp-sweep   { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes imp-shake   { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes imp-popin   { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes imp-meter   { 0% { width: 0; } 100% { width: 100%; } }
@keyframes imp-coin-a  { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-70px,-140px) scale(1); opacity: 0; } }
@keyframes imp-coin-b  { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(40px,-160px) scale(1); opacity: 0; } }
@keyframes imp-coin-c  { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-20px,-180px) scale(1.1); opacity: 0; } }
@keyframes imp-coin-d  { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(90px,-130px) scale(1); opacity: 0; } }

/* ---------- mobile: design screen M3 ---------- */

@media only screen and (max-width: 767px) {

    .imp-pool-top { flex-direction: column; }
    .imp-pool-main { padding: 14px 18px 0; }

    .imp-pool-side {
        width: auto;
        border-left: 0;
        padding: 12px 18px 14px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .imp-pool-side > div:first-child { flex: none; }
    .imp-pool-side .imp-steal-btn { flex: 1; font-size: 17px; padding: 17px 0; }
    .imp-pool-side .imp-btn-ghost, .imp-pool-hint { display: none; }

    .imp-pool-kicker { font-size: 10px; letter-spacing: .2em; }
    .imp-pool-amount { font-size: 34px; margin-top: 9px; }
    .imp-pool-copy { font-size: 11px; line-height: 1.5; margin-top: 7px; }
    .imp-pool-stats { display: none; }

    .imp-pool-result-slot { height: auto; padding-bottom: 12px; }
    .imp-pool-result { width: 100%; justify-content: space-between; gap: 10px; padding: 12px 14px; }
    .imp-pool-result-label { font-size: 10px; line-height: 1.2; letter-spacing: .16em; }
    .imp-pool-result-amount { font-size: 19px; }

    .imp-stage { height: 72px; }
    .imp-meter { left: 18px; right: 18px; width: auto; top: 10px; height: 4px; }
    .imp-meter > span { height: 4px; }
    .imp-meter-label { left: 18px; top: 20px; font-size: 9px; letter-spacing: .18em; }
    .imp-runner { bottom: 4px; }
    /* 50/100 exactly — see the sizing note in _StealMascot.cshtml. The
       old 44px put every stroke on a sub-pixel boundary. */
    .imp-runner-svg { width: 50px; height: 52px; }

    .imp-pool[data-phase="escape"] .imp-coin-1 { left: 22%; bottom: 34px; width: 20px; height: 20px; animation-name: imp-coin-a-m; }
    .imp-pool[data-phase="escape"] .imp-coin-2 { left: 34%; bottom: 26px; width: 16px; height: 16px; animation-name: imp-coin-b-m; }
    .imp-pool[data-phase="escape"] .imp-coin-3 { left: 46%; bottom: 38px; width: 24px; height: 24px; animation-name: imp-coin-c-m; }
    .imp-pool[data-phase="escape"] .imp-coin-4 { display: none; }

    @keyframes imp-idle   { 0%, 100% { transform: translateX(12px); } }
    @keyframes imp-sneak  { 0% { transform: translateX(-100px); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(120px); opacity: 1; } }
    @keyframes imp-hold   { 0%, 100% { transform: translateX(120px); } }
    @keyframes imp-escape { 0% { transform: translateX(120px); } 80% { opacity: 1; } 100% { transform: translateX(380px); opacity: 0; } }
    @keyframes imp-flee   { 0% { transform: translateX(120px); } 80% { opacity: 1; } 100% { transform: translateX(-110px); opacity: 0; } }
}

@keyframes imp-coin-a-m { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-46px,-96px) scale(1); opacity: 0; } }
@keyframes imp-coin-b-m { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(30px,-110px) scale(1); opacity: 0; } }
@keyframes imp-coin-c-m { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-12px,-120px) scale(1.1); opacity: 0; } }

/* respect reduced-motion: keep the result, drop the theatre */
@media (prefers-reduced-motion: reduce) {
    .imp-runner, .imp-runner-gait, .imp-headband-tails, .imp-coin,
    .imp-pool[data-phase] .imp-runner,
    .imp-pool[data-phase] .imp-runner-gait { animation: none !important; }
    .imp-pool[data-phase="escape"] .imp-pool-amount { animation: none !important; }
}

/* Phones: the mascot's idle fidget (tiptoe, tail wag) ran forever on every
   page that carries the pool. SVG transforms are repainted on the CPU on an
   old phone, so the loop cost it something every frame for nothing. The
   steal itself still animates — those phase rules are more specific and
   only run for a couple of seconds when the member acts. */
@media (hover: none) {
    .imp-runner-gait, .imp-headband-tails { animation: none; }
}

/* ============================================================
   Live delta — the movement since the last broadcast

   Every time the server pushes a new figure (PoolSimulator or
   WinBetCalculator hitting /Public/PoolFireUpdate, or the 15s
   backstop poll in PoolBroadcastService) the difference fades
   in beside the amount: lime for a credit, red for a grab.

   Sits superscript at the top-right corner of the figure, and
   only fades — no travel. Absolutely positioned, so it takes no
   layout space at all: the pool figure is 52px type and anything
   sharing its line box would reflow the number sideways every
   ten seconds. .imp-pool already clips, so a long chip can never
   widen the page on a phone.
   ============================================================ */

.imp-pool-figure { position: relative; display: inline-block; }

.imp-pool-delta {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 12px;
    /* centred on the TOP edge of the figure's box, which lands it
       just above the cap height — the superscript position */
    transform: translateY(-50%);
    font: 800 20px/1 var(--imp-sans);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}

.imp-pool-delta.up   { color: var(--imp-lime); text-shadow: 0 0 20px rgba(200, 255, 0, .45); }
.imp-pool-delta.down { color: var(--imp-red);  text-shadow: 0 0 20px rgba(230, 57, 70, .45); }

/* forwards, so it settles back at opacity 0 and stays out of the
   way until the next push re-triggers it */
.imp-pool-delta.is-live { animation: imp-pool-delta-fade 3400ms linear forwards; }

/* Snaps in, holds long enough to read, then dissolves across a slow
   2.7 seconds — the fade out is by far the longest phase, so the chip
   drains away instead of blinking off.

   Timing functions are per keyframe on purpose. One curve declared on
   the animation applies BETWEEN EVERY PAIR of keyframes, not across
   the whole run, so the ease-out this used to carry front-loaded the
   drop and read as a cut. Opacity only — nothing moves, so there is
   no reduced-motion variant to write. */
@keyframes imp-pool-delta-fade {
      0% { opacity: 0; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
      6% { opacity: 1; animation-timing-function: linear; }
     20% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    100% { opacity: 0; }
}

@media only screen and (max-width: 767px) {
    /* the amount drops to 34px here, so the chip comes down with it */
    .imp-pool-delta { font-size: 14px; margin-left: 8px; }
}