.hl-stage {
    --em: #2fbf8f; --em-2: #7cf0c4; --gold: #f7d77a; --gold-2: #c9a24a; --red: #ff5a6b;
    --cw: 168px; --ch: 236px;
    position: relative; overflow: hidden; border-radius: var(--r-xl); min-height: 640px;
    padding: 18px 20px 20px;
    display: flex; flex-direction: column;
    background: #07130f;
    box-shadow: var(--sh-screen), inset 0 0 0 1px rgba(124,240,196,.12);
    isolation: isolate;
}

.hl-felt { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 55% at 50% 46%, rgba(47,191,143,.30), transparent 70%),
        radial-gradient(120% 90% at 50% 40%, #0f3a2c 0%, #0a2a20 45%, #06140f 100%);
}
.hl-felt::before {
    content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background:
        repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 5px);
}
.hl-felt .spot {
    position: absolute; left: 50%; top: -30%; width: 900px; height: 900px; margin-left: -450px;
    background: radial-gradient(closest-side, rgba(220,255,236,.14), transparent 70%);
    animation: hlBreath 7s ease-in-out infinite alternate;
}
.hl-felt .rim {
    position: absolute; left: 4%; right: 4%; top: 17%; bottom: 20%; border-radius: 50%;
    border: 2px solid rgba(247,215,122,.16);
    box-shadow: 0 0 0 10px rgba(0,0,0,.14), inset 0 0 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(247,215,122,.06);
}
@keyframes hlBreath { from { opacity: .65; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.hl-stage.is-up .hl-felt .spot { background: radial-gradient(closest-side, rgba(247,215,122,.16), transparent 70%); }
.hl-stage.is-bust::after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: radial-gradient(80% 70% at 50% 50%, transparent 40%, rgba(255,40,70,.35));
    animation: hlBust 1.1s ease-out forwards;
}
@keyframes hlBust { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.hl-hud { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items: center; }
.hl-hud small { display: block; font: 800 10.5px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(124,240,196,.7); }
.hl-mult { display: grid; gap: 4px; min-width: 150px; padding: 10px 16px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2)); border: 1px solid rgba(124,240,196,.16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hl-mult b {
    font: 800 30px/1 var(--f-display, 'Unbounded'), sans-serif; letter-spacing: -.02em;
    background: linear-gradient(180deg, #eafff6, var(--em-2) 60%, var(--em));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.hl-mult span { font: 700 13px/1 Manrope, sans-serif; color: rgba(255,255,255,.7); }
.hl-stage.is-up .hl-mult b { background-image: linear-gradient(180deg, #fff6d6, var(--gold) 55%, var(--gold-2)); }
.hl-mult.pop b { animation: hlPop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes hlPop { 0% { transform: scale(1); } 35% { transform: scale(1.22); filter: drop-shadow(0 0 16px rgba(247,215,122,.8)); } 100% { transform: scale(1); } }

.hl-streak { justify-self: center; display: grid; gap: 8px; justify-items: center; }
.hl-streak small b { color: #fff; font-size: 12px; }
.hl-streak ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.hl-streak li {
    width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); transition: all .35s cubic-bezier(.2,1.5,.4,1);
}
.hl-streak li:last-child { width: 22px; height: 22px; margin: -3px 0 0 2px; background: url(../assets/art/hilo/crest.webp) center/cover; filter: grayscale(1) brightness(.5); border: 0; }
.hl-streak li.on { background: radial-gradient(circle at 35% 30%, #eafff6, var(--em-2) 45%, var(--em)); border-color: transparent; box-shadow: 0 0 12px rgba(124,240,196,.7); transform: scale(1.12); }
.hl-streak li.on.gold { background: radial-gradient(circle at 35% 30%, #fff6d6, var(--gold) 45%, var(--gold-2)); box-shadow: 0 0 14px rgba(247,215,122,.8); }
.hl-streak li:last-child.on { background: url(../assets/art/hilo/crest.webp) center/cover; filter: none; box-shadow: 0 0 18px rgba(247,215,122,.9); animation: hlSpin 1.2s ease-out; }
@keyframes hlSpin { from { transform: rotateY(0) scale(1.4); } to { transform: rotateY(360deg) scale(1.12); } }

.hl-skips { display: grid; gap: 6px; justify-items: end; }
.hl-skips [data-hl-skips] { display: flex; gap: 4px; }
.hl-skips i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(247,215,122,.1); border: 1px solid rgba(247,215,122,.25); transition: all .4s; }
.hl-skips i img { width: 20px; height: 20px; object-fit: contain; transform: rotate(-20deg); }
.hl-skips i.used { opacity: .3; filter: grayscale(1); transform: scale(.85); }

.hl-hint { position: relative; z-index: 3; margin: 14px 0 0; text-align: center; font: 600 14px/1.4 Manrope, sans-serif; color: rgba(255,255,255,.72); min-height: 20px; }
.hl-hint b { color: #fff; }

.hl-table {
    position: relative; z-index: 2; flex: 1 1 auto; min-height: 330px;
    display: grid; grid-template-columns: 1fr var(--cw) 1fr; align-items: center; gap: 28px;
    padding: 18px 0 8px;
}
.hl-deck { position: relative; justify-self: end; width: calc(var(--cw) * .62); height: calc(var(--ch) * .62); }
.hl-deck i {
    position: absolute; inset: 0; border-radius: 12px;
    background: url(../assets/art/hilo/crest.webp) center/58% no-repeat, radial-gradient(circle at 50% 40%, #1d3d9a, #0c1a45 70%);
    border: 2px solid rgba(247,215,122,.55); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 4px #0c1a45, inset 0 0 0 5px rgba(247,215,122,.35);
}
.hl-deck i:nth-child(1) { transform: translate(-6px, 6px) rotate(-4deg); }
.hl-deck i:nth-child(2) { transform: translate(-4px, 4px) rotate(-2deg); }
.hl-deck i:nth-child(3) { transform: translate(-2px, 2px); }
.hl-deck i:nth-child(4) { box-shadow: 0 16px 30px -10px rgba(0,0,0,.7), inset 0 0 0 4px #0c1a45, inset 0 0 0 5px rgba(247,215,122,.35); overflow: hidden; }
.hl-deck i:nth-child(4)::after {
    content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,.35) 50%, transparent 60%);
    animation: hlSheen 4.5s ease-in-out infinite;
}
@keyframes hlSheen { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.hl-deck-t { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font: 800 10px/1 Manrope, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); }

.hl-slot { position: relative; width: var(--cw); height: var(--ch); perspective: 1100px; }
.hl-slot::before {
    content: ''; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 26px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(4px);
}

.hl-card { position: absolute; inset: 0; perspective: 1100px; will-change: transform; }
.hl-card .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .46s cubic-bezier(.3,1.35,.5,1); }
.hl-card.down .in { transform: rotateY(180deg); }
.hl-card .f { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.hl-card .front {
    background: radial-gradient(120% 90% at 30% 10%, #ffffff, #f4f1e8 60%, #e7e1d0);
    box-shadow: 0 22px 40px -14px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(201,162,74,.35);
    color: #151a2b;
}
.hl-card[data-s="h"] .front, .hl-card[data-s="d"] .front { color: #d8263d; }
.hl-card .back {
    transform: rotateY(180deg);
    background: radial-gradient(circle at 50% 40%, #2448b8, #0c1a45 72%);
    box-shadow: 0 22px 40px -14px rgba(0,0,0,.75), inset 0 0 0 7px #0c1a45, inset 0 0 0 8.5px rgba(247,215,122,.6);
    display: grid; place-items: center;
}
.hl-card .back::before {
    content: ''; position: absolute; inset: 12px; border-radius: 10px; opacity: .35;
    background: repeating-linear-gradient(45deg, rgba(247,215,122,.25) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(247,215,122,.25) 0 1px, transparent 1px 9px);
}
.hl-card .back img { position: relative; width: 66%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.hl-card .c { position: absolute; display: grid; justify-items: center; line-height: 1; }
.hl-card .c b { font: 800 26px/1 var(--f-display, 'Unbounded'), sans-serif; letter-spacing: -.04em; }
.hl-card .c i { font-style: normal; font-size: 20px; margin-top: 2px; }
.hl-card .tl { left: 13px; top: 13px; }
.hl-card .br { right: 13px; bottom: 13px; transform: rotate(180deg); }
.hl-card .pip { position: absolute; inset: 0; display: grid; place-items: center; }
.hl-card .pip i { font-style: normal; font-size: 84px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.hl-card .pip .fig {
    position: absolute; font: 800 70px/1 var(--f-display, 'Unbounded'), sans-serif; letter-spacing: -.05em;
    background: linear-gradient(180deg, #e9c46a, #a8791f); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,.9));
}
.hl-card .pip .fig + i { opacity: .16; font-size: 130px; }
.hl-card .front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.55), transparent 35%, transparent 70%, rgba(255,255,255,.18));
}

.hl-card.next { z-index: 2; }
.hl-card.sink { animation: hlSink .5s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes hlSink { to { transform: translateY(70%) scale(.45) rotate(8deg); opacity: 0; } }
.hl-card.fade { transition: opacity .35s, transform .35s; opacity: 0; transform: translateY(-20px) scale(.9); }
.hl-card.swept { animation: hlSwept .65s cubic-bezier(.3,.1,.5,1) forwards; }
@keyframes hlSwept { 0% { transform: none; } 20% { transform: translateX(10px) rotate(3deg); } 100% { transform: translate(-480px, 60px) rotate(-38deg); opacity: 0; } }
.hl-card.bust { animation: hlShake .5s cubic-bezier(.36,.07,.19,.97); }
.hl-card.bust .front { box-shadow: 0 0 0 3px var(--red), 0 0 40px rgba(255,90,107,.6), 0 22px 40px -14px rgba(0,0,0,.75), inset 0 0 0 6px #fff; }
@keyframes hlShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px) rotate(-2deg); } 40%, 60% { transform: translateX(8px) rotate(2deg); } }

.hl-ring { position: absolute; inset: -14px; border-radius: 26px; pointer-events: none; z-index: 3; border: 3px solid var(--em-2); box-shadow: 0 0 40px rgba(124,240,196,.8), inset 0 0 30px rgba(124,240,196,.5); animation: hlRing .85s ease-out forwards; }
.hl-ring.bad { border-color: var(--red); box-shadow: 0 0 40px rgba(255,90,107,.8), inset 0 0 30px rgba(255,90,107,.5); }
@keyframes hlRing { from { opacity: 1; transform: scale(.92); } to { opacity: 0; transform: scale(1.25); } }

.hl-sparks { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hl-sparks i { position: absolute; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); border-radius: 50%; animation: hlSpark .9s var(--dl) cubic-bezier(.1,.7,.3,1) forwards; opacity: 0; }
.hl-sparks i.ok { background: var(--em-2); box-shadow: 0 0 10px var(--em-2); }
.hl-sparks i.bad { background: var(--red); box-shadow: 0 0 10px var(--red); border-radius: 2px; }
.hl-sparks i.dust { background: radial-gradient(circle, rgba(200,255,225,.35), transparent 70%); animation-duration: 1s; }
.hl-sparks i.gold { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
@keyframes hlSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

.hl-guess { display: grid; gap: 12px; width: 100%; max-width: 280px; justify-self: start; }
.hl-btn {
    --c: var(--em-2); --c2: var(--em);
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
    height: 76px; padding: 0 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; text-align: left;
    color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(5,20,15,.75);
    box-shadow: 0 12px 26px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .18s, box-shadow .25s, border-color .25s, opacity .25s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hl-btn.lo { --c: #ffb86b; --c2: #f07b48; }
.hl-btn[data-kind="eq"] { --c: #d7b4ff; --c2: #9b6bff; }
.hl-btn .ar {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; position: relative; z-index: 1;
    background: linear-gradient(180deg, var(--c), var(--c2)); box-shadow: 0 6px 16px -4px var(--c2), inset 0 1px 0 rgba(255,255,255,.5);
}
.hl-btn .ar::before { content: ''; width: 0; height: 0; border: 9px solid transparent; border-bottom: 12px solid #06140f; margin-top: -10px; }
.hl-btn.lo .ar::before, .hl-btn[data-kind="lt"] .ar::before, .hl-btn[data-kind="lte"] .ar::before { border-bottom: 9px solid transparent; border-top: 12px solid #06140f; margin: 10px 0 0; }
.hl-btn[data-kind="eq"] .ar::before { border: 0; width: 18px; height: 11px; margin: 0; background: linear-gradient(#06140f 0 3.5px, transparent 3.5px 7.5px, #06140f 7.5px); }
.hl-btn .t, .hl-btn .q { position: relative; z-index: 1; display: grid; gap: 4px; }
.hl-btn .t b { font: 800 17px/1 var(--f-display, 'Unbounded'), sans-serif; }
.hl-btn .t small, .hl-btn .q small { font: 700 11.5px/1 Manrope, sans-serif; color: rgba(255,255,255,.6); }
.hl-btn .q { text-align: right; }
.hl-btn .q b { font: 800 19px/1 var(--f-display, 'Unbounded'), sans-serif; color: var(--c); font-variant-numeric: tabular-nums; }
.hl-btn .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--c2), var(--c)); box-shadow: 0 0 12px var(--c); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.hl-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 120% at 0% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.hl-btn:not(:disabled):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--c2) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.hl-btn:not(:disabled):hover::after { opacity: 1; }
.hl-btn:not(:disabled):active { transform: translateY(1px) scale(.985); }
.hl-btn:disabled { cursor: default; opacity: .5; }
.hl-btn.picked { opacity: 1; border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent); }
.hl-btn.picked::after { opacity: 1; }
.hl-stage[data-phase="idle"] .hl-btn, .hl-stage[data-phase="done"] .hl-btn { opacity: .35; }

.hl-skip {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 14px; cursor: pointer;
    font: 700 13px/1 Manrope, sans-serif; color: #f7e3b0; background: rgba(247,215,122,.08); border: 1px dashed rgba(247,215,122,.35);
    transition: background .2s, transform .15s, opacity .2s;
}
.hl-skip img { width: 24px; height: 24px; object-fit: contain; transform: rotate(-25deg); transition: transform .3s; }
.hl-skip:not(:disabled):hover { background: rgba(247,215,122,.16); }
.hl-skip:not(:disabled):hover img { transform: rotate(-45deg) translateX(-3px); }
.hl-skip:disabled { opacity: .35; cursor: default; }

.hl-dealer {
    position: absolute; left: -4px; bottom: -34px; width: 190px; z-index: 0; pointer-events: auto; cursor: pointer;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); transform-origin: 50% 100%;
    animation: hlIdle 5s ease-in-out infinite;
}
.hl-dealer.cheer { animation: hlCheer .7s cubic-bezier(.2,1.6,.4,1), hlIdle 5s .7s ease-in-out infinite; }
.hl-dealer.sad { animation: hlSad 1.4s ease-in-out forwards; }
.hl-dealer.swipe { animation: hlLean .9s ease-in-out; }
@keyframes hlIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes hlCheer { 0% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(3deg) scale(1.04); } 100% { transform: translateY(0); } }
@keyframes hlSad { 0% { transform: none; } 30% { transform: translateY(10px) rotate(-6deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)) saturate(.6); } 100% { transform: translateY(6px) rotate(-3deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)) saturate(.8); } }
@keyframes hlLean { 0%, 100% { transform: none; } 40% { transform: translateX(-14px) rotate(-6deg); } }

.hl-paw {
    position: absolute; left: 50%; top: 50%; width: 150px; z-index: 4; pointer-events: none; opacity: 0;
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.5)); transform-origin: 50% 45%;
}
.hl-paw.on { opacity: 1; }

.hl-print { position: absolute; left: 50%; top: 50%; width: 46%; margin: -23% 0 0 -23%; z-index: 2; pointer-events: none;
    fill: rgba(201,120,60,.55); mix-blend-mode: multiply; animation: hlPrint .25s ease-out; }
.hl-card .back .hl-print { fill: rgba(255,200,120,.5); mix-blend-mode: screen; }
@keyframes hlPrint { from { opacity: 0; transform: scale(1.3); } }

.hl-claw { position: absolute; z-index: 1; pointer-events: none; }
.hl-claw svg { width: 100%; height: 100%; overflow: visible; }
.hl-claw path { fill: none; stroke: rgba(0,0,0,.4); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 200; stroke-dashoffset: 200; animation: hlClaw 1.5s ease-out forwards; filter: drop-shadow(0 1px 0 rgba(170,255,215,.25)); }
.hl-claw path:nth-child(2) { animation-delay: .04s; }
.hl-claw path:nth-child(3) { animation-delay: .08s; }
@keyframes hlClaw { 0% { stroke-dashoffset: 200; opacity: 1; } 22% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.hl-deck.riffle i:nth-child(4) { animation: hlRiffle .6s ease-in-out; }
.hl-deck.riffle i:nth-child(3) { animation: hlRiffle .6s .05s ease-in-out reverse; }
@keyframes hlRiffle { 25% { transform: translate(-8px,-6px) rotate(-6deg); } 50% { transform: translate(6px,-4px) rotate(5deg); } 75% { transform: translate(-3px,-2px) rotate(-2deg); } }

.hl-skips i.burn { animation: hlBurn .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes hlBurn { 0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(-20deg); box-shadow: 0 0 20px rgba(247,215,122,.9); filter: none; opacity: 1; } 100% { transform: scale(.85); } }

.hl-say {
    position: absolute; left: 120px; bottom: 196px; z-index: 4; max-width: 220px; padding: 9px 14px; border-radius: 16px 16px 16px 4px;
    font: 700 13px/1.3 Manrope, sans-serif; color: #10251d; background: linear-gradient(180deg, #fff, #e6fff5);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 0 100%;
    transition: opacity .25s, transform .3s cubic-bezier(.2,1.5,.4,1); pointer-events: none;
}
.hl-say.on { opacity: 1; transform: none; }

.hl-chain-wrap { position: relative; z-index: 3; margin-top: 18px; padding: 12px 14px 10px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.hl-chain-t { display: block; margin-bottom: 8px; font: 800 10px/1 Manrope, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hl-chain { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px; min-height: 104px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.hl-chain:empty::before { content: 'Угаданные карты лягут сюда'; margin: auto; font: 600 13px/1 Manrope, sans-serif; color: rgba(255,255,255,.3); }
.hl-link { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; scroll-snap-align: end; transition: opacity .3s, filter .3s; }
.hl-link .hl-card.mini { position: relative; inset: auto; width: 54px; height: 76px; }
.hl-card.mini .f { border-radius: 8px; }
.hl-card.mini .front { box-shadow: 0 8px 16px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 3px #fff, inset 0 0 0 3.5px rgba(201,162,74,.35); }
.hl-card.mini .c b { font-size: 12px; }
.hl-card.mini .c i { font-size: 10px; margin-top: 1px; }
.hl-card.mini .tl { left: 5px; top: 5px; }
.hl-card.mini .br { right: 5px; bottom: 5px; }
.hl-card.mini .pip i { font-size: 28px; }
.hl-card.mini .pip .fig { font-size: 24px; }
.hl-card.mini .pip .fig + i { font-size: 44px; }
.hl-link em { font: 800 11px/1 var(--f-display, 'Unbounded'), sans-serif; font-style: normal; color: rgba(255,255,255,.45); white-space: nowrap; }
.hl-link em.ok { color: var(--em-2); }
.hl-link em.x { color: var(--red); }
.hl-link.swept .hl-card { opacity: .4; transform: rotate(-8deg) translateY(4px) scale(.9); filter: grayscale(.5); }
.hl-link.swept em { text-decoration: line-through; }
.hl-link em.sk { color: #f7d77a; }
.hl-link.lost .front { box-shadow: 0 0 0 2px var(--red), inset 0 0 0 3px #fff; }
.hl-link.new { animation: hlLink .55s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes hlLink { from { opacity: 0; transform: translateY(24px) scale(.6) rotate(-8deg); } }
.hl-link.dim:not(.lost) { opacity: .45; filter: grayscale(.7); }
.hl-link.shine .hl-card { animation: hlShine .6s ease-out; }
.hl-link.shine .front { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(247,215,122,.6), inset 0 0 0 3px #fff; }
@keyframes hlShine { 50% { transform: translateY(-8px) scale(1.08); } }

.hl-result, .hl-badge {
    position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px;
    background: radial-gradient(60% 60% at 50% 45%, rgba(6,20,15,.72), rgba(3,10,8,.9));
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    animation: hlFade .35s ease-out;
}
.hl-result[hidden], .hl-badge[hidden] { display: none; }
@keyframes hlFade { from { opacity: 0; } }
.hl-result small, .hl-badge small { font: 800 11px/1 Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(124,240,196,.8); }
.hl-result .big {
    font: 800 76px/1 var(--f-display, 'Unbounded'), sans-serif;
    background: linear-gradient(180deg, #fff6d6, var(--gold) 55%, var(--gold-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 24px rgba(247,215,122,.55)); animation: hlBig .7s cubic-bezier(.2,1.5,.4,1) backwards;
}
@keyframes hlBig { from { opacity: 0; transform: scale(.4) translateY(20px); } }
.hl-result.low small { color: rgba(255,140,150,.85); }
.hl-result.low .big { font-size: 56px; background-image: linear-gradient(180deg, #ffe0e4, #ff7a88); filter: drop-shadow(0 6px 24px rgba(255,90,107,.45)); }
.hl-result .sum { font: 800 24px/1 Manrope, sans-serif; color: #fff; }
.hl-result p, .hl-badge p { margin: 4px 0 8px; max-width: 420px; font: 600 14px/1.5 Manrope, sans-serif; color: rgba(255,255,255,.78); }
.hl-result .rays, .hl-badge .rays {
    position: absolute; left: 50%; top: 42%; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(247,215,122,.12) 0 8deg, transparent 8deg 22deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent);
    animation: hlRays 18s linear infinite;
}
@keyframes hlRays { to { transform: rotate(360deg); } }
.hl-again {
    height: 52px; padding: 0 30px; border: 0; border-radius: 16px; cursor: pointer;
    font: 800 15px/1 Manrope, sans-serif; color: #06140f;
    background: linear-gradient(180deg, #b8ffe3, var(--em-2) 45%, var(--em)); box-shadow: 0 12px 28px -10px rgba(47,191,143,.8), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .15s;
}
.hl-again:hover { transform: translateY(-2px); }

.hl-badge { background: radial-gradient(60% 60% at 50% 45%, rgba(40,30,6,.75), rgba(8,6,2,.92)); }
.hl-badge img { width: 170px; filter: drop-shadow(0 10px 40px rgba(247,215,122,.6)); }
.hl-badge.on img { animation: hlMedal 1.1s cubic-bezier(.2,1.3,.4,1) backwards; }
.hl-badge.on b { animation: hlBig .7s .35s cubic-bezier(.2,1.5,.4,1) backwards; }
.hl-badge b {
    font: 800 34px/1.1 var(--f-display, 'Unbounded'), sans-serif;
    background: linear-gradient(180deg, #fff6d6, var(--gold) 55%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-badge small { color: rgba(247,215,122,.8); }
.hl-badge.off { transition: opacity .4s; opacity: 0; }
@keyframes hlMedal { 0% { opacity: 0; transform: translateY(-160px) rotateY(0) scale(.5); } 70% { transform: translateY(0) rotateY(720deg) scale(1.1); } 100% { opacity: 1; transform: rotateY(720deg) scale(1); } }

.hl-bet {
    --em: #2fbf8f; --em-2: #7cf0c4; --gold: #f7d77a; --gold-2: #c9a24a;
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(47,191,143,.22), transparent 65%),
        linear-gradient(180deg, #0f3326, #0a2219 60%, #081a14) !important;
    border-color: rgba(247,215,122,.2) !important;
    box-shadow: 0 20px 40px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.hl-bet::before {
    content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(247,215,122,.85), transparent);
}
.hl-bet::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.1) 0 2px, transparent 2px 5px);
}
.hl-bet .bet-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.hl-bet .bet-head .push { margin-left: auto; }
.hl-bet .bet-head .cap { color: rgba(124,240,196,.85); }
.hl-bet .bet-head .dim { color: rgba(255,255,255,.55); }

.hl-tray {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr); align-items: center;
    padding: 8px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22));
    box-shadow: inset 0 3px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(247,215,122,.14), 0 1px 0 rgba(255,255,255,.05);
}
.hl-bet .field, .rail .hl-bet .field { min-height: 56px; padding: 0; border: 0; background: transparent !important; box-shadow: none; gap: 6px; }
.hl-bet .field .val {
    font: 800 28px/1 var(--f-display, 'Unbounded'), sans-serif !important; letter-spacing: -.02em;
    white-space: nowrap;
    background: linear-gradient(180deg, #fff9e0, var(--gold) 58%, var(--gold-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 10px rgba(247,215,122,.25));
}
.hl-bet .field .step {
    width: 44px; height: 44px; border-radius: 13px; font-size: 20px; color: #d9fff0;
    background: rgba(124,240,196,.08); box-shadow: inset 0 0 0 1px rgba(124,240,196,.18);
}
.hl-bet .field .step:hover { background: rgba(124,240,196,.18); color: #fff; }
.hl-bet .field .step.plus { color: #06231a; background: linear-gradient(180deg, #b8ffe3, var(--em-2) 45%, var(--em)); box-shadow: 0 6px 14px -6px rgba(47,191,143,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.hl-bet .field .step.plus:hover { background: linear-gradient(180deg, #d4fff0, #9af5d3 45%, var(--em-2)); color: #06231a; }

.hl-bet .quick-row { margin-top: 12px; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.hl-bet .quick-row button { color: rgba(220,255,240,.7); }
.hl-bet .quick-row button:hover { color: var(--gold); background: rgba(247,215,122,.07); }

.hl-bet .hl-go, .dock [data-hl-go] {
    position: relative; overflow: hidden; color: #04231a !important;
    background: linear-gradient(180deg, #b8ffe3, var(--em-2, #7cf0c4) 42%, var(--em, #2fbf8f)) !important;
    box-shadow: 0 16px 30px -14px rgba(47,191,143,.95), inset 0 -3px 0 rgba(6,70,50,.35), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.hl-bet .hl-go { min-height: 60px; margin-top: 12px; border-radius: 16px; font-family: var(--f-display, 'Unbounded'), sans-serif; letter-spacing: .01em; gap: 10px; }
.hl-bet .hl-go .l1, .hl-bet .hl-go .l2 { position: relative; z-index: 1; }
.hl-bet .hl-go .l2 { padding: 4px 9px; border-radius: 9px; background: rgba(4,35,26,.14); font-size: .92em; }
.hl-bet .hl-go::after, .dock [data-hl-go]::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%);
    animation: hlGoShine 3.4s ease-in-out infinite;
}
@keyframes hlGoShine { 55%, 100% { transform: translateX(120%); } }
.hl-bet .hl-go:hover:not(:disabled) { filter: brightness(1.06); }
.hl-bet .hl-go:disabled, .dock [data-hl-go]:disabled { filter: grayscale(.55) brightness(.75); opacity: 1; }
.hl-bet .hl-go:disabled::after, .dock [data-hl-go]:disabled::after { animation: none; opacity: 0; }
[data-hl-go].cash { background: linear-gradient(180deg, #fff1bf, #f7d77a 50%, #c9a24a) !important; color: #1b1206 !important; box-shadow: 0 12px 30px -10px rgba(247,215,122,.8) !important; }
[data-hl-go].cash:not(:disabled) { animation: hlCash 2.4s ease-in-out infinite; }
@keyframes hlCash { 0%, 100% { box-shadow: 0 12px 30px -10px rgba(247,215,122,.8); } 50% { box-shadow: 0 12px 40px -6px rgba(247,215,122,1); } }

.hl-bet.is-live .hl-tray, .hl-bet.is-live .quick-row { opacity: .45; pointer-events: none; filter: saturate(.6); transition: opacity .3s, filter .3s; }

@media (max-width: 1100px) {
    .hl-stage { --cw: 150px; --ch: 210px; }
    .hl-table { gap: 20px; }
    .hl-dealer { width: 150px; }
    .hl-say { left: 90px; bottom: 160px; }
}
@media (max-width: 700px) {
    .hl-stage { --cw: 124px; --ch: 174px; padding: 12px 10px 12px; min-height: 0; border-radius: var(--r-lg); }
    .hl-hud { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; }
    .hl-hud small { font-size: 9px; letter-spacing: .1em; }
    .hl-mult { min-width: 0; padding: 8px 10px; border-radius: 12px; }
    .hl-mult b { font-size: 20px; }
    .hl-mult span { font-size: 11px; }
    .hl-streak ol { gap: 3px; }
    .hl-streak li { width: 10px; height: 10px; }
    .hl-streak li:last-child { width: 16px; height: 16px; margin: -3px 0 0 1px; }
    .hl-skips i { width: 22px; height: 22px; }
    .hl-skips i img { width: 15px; height: 15px; }
    .hl-hint { font-size: 12.5px; margin-top: 10px; }
    .hl-table { grid-template-columns: 1fr var(--cw) 1fr; gap: 14px; min-height: 0; padding: 14px 0 0; row-gap: 18px; }
    .hl-deck { justify-self: center; }
    .hl-guess { grid-column: 1 / -1; max-width: none; grid-template-columns: 1fr 1fr; gap: 8px; }
    .hl-btn { height: 66px; padding: 0 10px; gap: 8px; grid-template-columns: auto minmax(0,1fr); border-radius: 15px; }
    .hl-btn .ar { width: 32px; height: 32px; border-radius: 10px; grid-row: span 2; }
    .hl-btn .ar::before { transform: scale(.8); }
    .hl-btn .t b { font-size: 14px; }
    .hl-btn .t small { display: none; }
    .hl-btn .q { text-align: left; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 6px; }
    .hl-btn .q b { font-size: 14px; }
    .hl-btn .q small { font-size: 11px; }
    .hl-skip { grid-column: 1 / -1; height: 40px; }
    .hl-dealer { width: 104px; left: auto; right: -4px; top: 4px; bottom: auto; }

    .hl-say { left: auto; right: 0; top: 112px; bottom: auto; width: calc((100% - var(--cw)) / 2 - 16px); max-width: 150px; padding: 7px 10px; font-size: 11.5px; border-radius: 4px 14px 14px 14px; transform-origin: 50% 0; }
    .hl-paw { width: 110px; }
    .hl-bet .field .val { font-size: 24px !important; }
    .hl-bet .hl-go { min-height: 54px; }
    .hl-card .c b { font-size: 19px; }
    .hl-card .c i { font-size: 15px; }
    .hl-card .tl { left: 9px; top: 9px; }
    .hl-card .br { right: 9px; bottom: 9px; }
    .hl-card .pip i { font-size: 60px; }
    .hl-card .pip .fig { font-size: 50px; }
    .hl-card .pip .fig + i { font-size: 96px; }
    .hl-felt .rim { top: 22%; bottom: 36%; }
    .hl-chain-wrap { margin-top: 14px; padding: 10px; }
    .hl-chain { min-height: 92px; gap: 8px; }
    .hl-link .hl-card.mini { width: 46px; height: 65px; }
    .hl-result .big { font-size: 54px; }
    .hl-badge img { width: 130px; }
    .hl-badge b { font-size: 26px; }
}

@media (max-width: 700px) and (max-height: 760px) {
    .hl-stage { --cw: 92px; --ch: 128px; padding-top: 10px; }
    .hl-hint { display: none; }
    .hl-table { padding-top: 10px; row-gap: 12px; }
    .hl-btn { height: 54px; }
    .hl-skip { height: 34px; }
    .hl-dealer { width: 80px; }
    .hl-say { top: 84px; }
    .hl-card .pip i { font-size: 44px; }
    .hl-card .pip .fig { font-size: 36px; }
    .hl-card .pip .fig + i { font-size: 70px; }
    .hl-card .c b { font-size: 16px; }
    .hl-card .c i { font-size: 13px; }
    .hl-card .tl { left: 7px; top: 7px; }
    .hl-card .br { right: 7px; bottom: 7px; }
}

.is-lite .hl-felt .spot, .is-lite .hl-deck i::after, .is-lite .hl-dealer, .is-lite .hl-result .rays, .is-lite .hl-badge .rays, .is-lite [data-hl-go].cash, .is-lite [data-hl-go]::after { animation: none !important; }
.is-lite .hl-mult, .is-lite .hl-btn, .is-lite .hl-result, .is-lite .hl-badge { backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-lite .hl-card .in { transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
    .hl-stage *, .hl-stage { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

.hl-stage > .brandmark { --bm-y: 70%; --bm-o: .4; --bm-w: clamp(84px, 17%, 140px); }
@media (max-width: 760px) {

    .hl-stage > .brandmark { left: auto; right: 3%; top: 41%; width: 27%; transform: none; }
}