/* Grombi header mini-game v2.0
   One-button game: eat all eight dots, reverse to dodge the red orb, 3 lives. */
.grombi-mini-game {
    --grombi-track: #b8cbc0;
    --game-green: #39c866;
    --game-blue: #57c9ff;
    --game-red: #e33f47;
    --game-ink: #183229;
    position: relative;
    z-index: 8;
    height: 32px;
    pointer-events: none;
    isolation: isolate;
}

.category-mast .grombi-mini-game {
    position: absolute;
    right: 18px;
    bottom: 5px;
    left: 18px;
}

.category-mast:has(.grombi-mini-game) {
    padding-bottom: 36px;
}

.top-games-page-head > .grombi-mini-game {
    width: 100%;
    margin: 10px 0 0;
}

.grombi-mini-game .category-grombi-path {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    height: 1px;
    opacity: .94;
    background: linear-gradient(90deg, transparent, var(--grombi-track) 4%, var(--grombi-track) 96%, transparent);
}

.grombi-mini-game .category-grombi-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.grombi-mini-game .category-grombi-dots i {
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(18,78,42,.15);
    border-radius: 50%;
    background: var(--game-blue);
    box-shadow: 0 0 0 2px rgba(87,201,255,.08);
    transition: opacity .15s ease, transform .15s ease;
}
.grombi-mini-game .category-grombi-dots i:nth-child(1) { left: 7%; }
.grombi-mini-game .category-grombi-dots i:nth-child(2) { left: 18%; background: #70e978; }
.grombi-mini-game .category-grombi-dots i:nth-child(3) { left: 31%; }
.grombi-mini-game .category-grombi-dots i:nth-child(4) { left: 43%; background: #70e978; }
.grombi-mini-game .category-grombi-dots i:nth-child(5) { left: 57%; }
.grombi-mini-game .category-grombi-dots i:nth-child(6) { left: 69%; background: #70e978; }
.grombi-mini-game .category-grombi-dots i:nth-child(7) { left: 82%; }
.grombi-mini-game .category-grombi-dots i:nth-child(8) { left: 93%; background: #70e978; }
.grombi-mini-game .category-grombi-dots i.is-collected {
    opacity: 0;
    transform: translateY(-6px) scale(.1);
}

.grombi-mini-game .category-grombi-hint {
    position: absolute;
    right: 2px;
    top: -2px;
    color: #70857a;
    font-family: var(--font-mono);
    font-size: .34rem;
    font-weight: 700;
    letter-spacing: .105em;
    opacity: .74;
    white-space: nowrap;
}

.grombi-game-hud {
    position: absolute;
    top: -3px;
    left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #62786d;
    font-family: var(--font-mono);
    font-size: .38rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
}
.grombi-game-hud b { color: #244d38; font: inherit; }
.grombi-game-hud span { color: #2fb95b; font-style: normal; letter-spacing: .02em; }
.grombi-game-hud em { color: #5f756a; font: inherit; font-style: normal; }
.grombi-mini-game[data-game-tone="danger"] .grombi-game-hud em { color: var(--game-red); }
.grombi-mini-game[data-game-tone="good"] .grombi-game-hud em,
.grombi-mini-game[data-game-tone="win"] .grombi-game-hud em { color: #1e9c4c; }
.grombi-mini-game[data-game-tone="lose"] .grombi-game-hud em { color: #ca3038; }

.grombi-mini-game .category-mini-grombi {
    --grombi-x: 0px;
    --grombi-facing: 1;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 52px;
    height: 25px;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transform: translate3d(var(--grombi-x),0,0) scaleX(var(--grombi-facing));
    transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 2px rgba(13,70,42,.17));
    will-change: transform;
}

.grombi-mini-game .mini-grombi-body {
    position: absolute;
    left: 6px;
    bottom: 2px;
    width: 38px;
    height: 20px;
    border: 1px solid #1e653c;
    border-radius: 52% 48% 47% 53% / 58% 55% 45% 42%;
    background: linear-gradient(145deg,#8af08a,#4fd36c 52%,#279d50);
    box-shadow: inset 0 -4px 7px rgba(14,90,48,.18);
    transform-origin: 50% 100%;
    animation: grombi-game-bob .46s ease-in-out infinite alternate;
}

.grombi-mini-game .mini-grombi-eye {
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid #285842;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--game-blue), inset 0 0 0 4px #142a21;
}
.grombi-mini-game .mini-grombi-eye--one { left: 7px; }
.grombi-mini-game .mini-grombi-eye--two { right: 6px; }
.grombi-mini-game .mini-grombi-mouth {
    position: absolute;
    right: 6px;
    bottom: 4px;
    width: 10px;
    height: 4px;
    border-bottom: 1px solid #17462d;
    border-radius: 50%;
    transform: rotate(-7deg);
}
.grombi-mini-game .mini-grombi-spark {
    position: absolute;
    left: -6px;
    top: 8px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: var(--game-blue);
    opacity: 0;
}

.grombi-mini-game .category-mini-grombi.is-paused .mini-grombi-body { animation-play-state: paused; }
.grombi-mini-game .category-mini-grombi.is-picking .mini-grombi-body { animation: grombi-game-pick .24s ease both; }
.grombi-mini-game .category-mini-grombi.is-boosted .mini-grombi-body { animation-duration: .18s; }
.grombi-mini-game .category-mini-grombi.is-boosted .mini-grombi-spark { animation: grombi-game-spark .28s linear infinite; }
.grombi-mini-game .category-mini-grombi.is-hit .mini-grombi-body { animation: grombi-game-hit .38s ease both; }

.grombi-game-hazard {
    --hazard-x: -999px;
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border: 2px solid #8b1018;
    border-radius: 50%;
    background: #ef4650;
    box-shadow: 0 0 0 3px rgba(227,63,71,.13), 0 0 11px rgba(227,63,71,.4);
    opacity: 0;
    transform: translate3d(calc(var(--hazard-x) - 5px), 0, 0) scale(.4);
    pointer-events: none;
}
.grombi-game-hazard::before,
.grombi-game-hazard::after {
    position: absolute;
    top: -4px;
    width: 1px;
    height: 4px;
    background: #8b1018;
    content: "";
}
.grombi-game-hazard::before { left: 2px; transform: rotate(-28deg); }
.grombi-game-hazard::after { right: 2px; transform: rotate(28deg); }
.grombi-game-hazard.is-active {
    opacity: 1;
    transform: translate3d(calc(var(--hazard-x) - 5px), 0, 0) scale(1);
    animation: grombi-danger-pulse .46s ease-in-out infinite alternate;
}
.grombi-game-hazard.is-dodged {
    opacity: 0;
    transform: translate3d(calc(var(--hazard-x) - 5px), -8px, 0) scale(1.55);
    transition: opacity .26s ease, transform .26s ease;
}
.grombi-game-hazard.is-hit {
    opacity: 0;
    transform: translate3d(calc(var(--hazard-x) - 5px), 2px, 0) scale(2.1);
    transition: opacity .28s ease, transform .28s ease;
}

.grombi-mini-game.is-win::after,
.grombi-mini-game.is-lose::after {
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    pointer-events: none;
    content: "";
}
.grombi-mini-game.is-win::after {
    background: radial-gradient(circle, #70e978 0 2px, transparent 2.5px) 0 50% / 18px 4px repeat-x;
    animation: grombi-win-dots .5s ease-out 3;
}
.grombi-mini-game.is-lose::after {
    background: linear-gradient(90deg, transparent, rgba(227,63,71,.72), transparent);
    animation: grombi-lose-flash .24s linear 4;
}

@keyframes grombi-game-bob { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-2px) scaleY(.94); } }
@keyframes grombi-game-pick { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(3px) rotate(8deg) scale(.96,1.04); } }
@keyframes grombi-game-spark { from { transform: translateX(0); opacity: .7; } to { transform: translateX(-9px); opacity: 0; } }
@keyframes grombi-game-hit { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-8deg); } 55% { transform: translateX(3px) rotate(8deg); } 80% { transform: translateX(-2px) rotate(-4deg); } }
@keyframes grombi-danger-pulse { from { filter: brightness(.95); } to { filter: brightness(1.22); box-shadow: 0 0 0 5px rgba(227,63,71,.08), 0 0 14px rgba(227,63,71,.5); } }
@keyframes grombi-win-dots { from { opacity: .1; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
@keyframes grombi-lose-flash { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

@media (max-width: 760px) {
    .category-mast .grombi-mini-game { right: 10px; left: 10px; }
    .grombi-game-hud { gap: 5px; font-size: .32rem; }
    .grombi-mini-game .category-grombi-hint { font-size: .28rem; letter-spacing: .075em; }
    .top-games-page-head > .grombi-mini-game { margin-top: 8px; }
}

@media (max-width: 470px) {
    .grombi-mini-game .category-grombi-hint { display: none; }
    .grombi-game-hud { top: -1px; }
}

@media (prefers-reduced-motion: reduce) {
    .grombi-mini-game .mini-grombi-body,
    .grombi-game-hazard,
    .grombi-mini-game::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   v2.1 — lethal contact + visible death + linear dodge progression
   ============================================================ */
.grombi-game-hud i[data-grombi-level] {
    color: #226b42;
    font: inherit;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
}

.grombi-mini-game[data-game-tone="level"] .grombi-game-hud em,
.grombi-mini-game[data-game-tone="level"] .grombi-game-hud i[data-grombi-level] {
    color: #0f8fb7;
}

.grombi-mini-game.is-level-up .category-grombi-path {
    animation: grombi-level-track .52s ease-out both;
}

.grombi-mini-game.is-level-up .category-grombi-dots i:not(.is-collected) {
    animation: grombi-level-dot .5s ease-out both;
}

.grombi-mini-game.is-death::before {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 16px;
    pointer-events: none;
    content: "";
    background: radial-gradient(ellipse at center, rgba(227,63,71,.23), transparent 70%);
    animation: grombi-death-rail .42s ease-out both;
}

.grombi-mini-game .category-mini-grombi.is-dead {
    cursor: default;
    pointer-events: none;
    filter: drop-shadow(0 2px 1px rgba(80,20,24,.2));
}

.grombi-mini-game .category-mini-grombi.is-dead .mini-grombi-body {
    animation: grombi-game-death .86s cubic-bezier(.18,.7,.25,1) forwards !important;
}

.grombi-mini-game .category-mini-grombi.is-dead .mini-grombi-eye {
    animation: grombi-game-dead-eye .68s ease-out forwards;
}

.grombi-mini-game .category-mini-grombi.is-dead .mini-grombi-mouth {
    width: 8px;
    height: 5px;
    border-bottom: 0;
    border-top: 2px solid #6c2027;
    border-radius: 50%;
    transform: rotate(18deg);
}

.grombi-mini-game .category-mini-grombi.is-dead::after {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: -7px;
    color: #ef4650;
    content: "✦";
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 8px rgba(227,63,71,.38);
    transform: translateX(-50%);
    animation: grombi-death-star .82s ease-out forwards;
}

.grombi-mini-game .category-mini-grombi.is-respawn .mini-grombi-body {
    animation: grombi-game-respawn .62s cubic-bezier(.18,.8,.25,1) both !important;
}

.grombi-mini-game .category-mini-grombi.is-respawn .mini-grombi-eye {
    animation: grombi-game-respawn-eye .62s ease-out both;
}

.grombi-game-hazard.is-hit {
    animation: grombi-danger-explode .38s ease-out forwards !important;
}

@keyframes grombi-game-death {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; filter: saturate(1); }
    24%  { transform: translateY(-8px) rotate(20deg) scale(1.06,.94); opacity: 1; }
    58%  { transform: translateY(3px) rotate(72deg) scale(.94,.76); opacity: .9; filter: saturate(.55); }
    100% { transform: translateY(7px) rotate(90deg) scale(.9,.22); opacity: .48; filter: grayscale(.55) saturate(.35); }
}

@keyframes grombi-game-dead-eye {
    0%, 28% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1,.12) rotate(18deg); opacity: .7; }
}

@keyframes grombi-death-star {
    0% { opacity: 0; transform: translate(-50%,5px) scale(.3) rotate(0deg); }
    30% { opacity: 1; transform: translate(-50%,-4px) scale(1.35) rotate(110deg); }
    100% { opacity: 0; transform: translate(-50%,-17px) scale(.65) rotate(260deg); }
}

@keyframes grombi-danger-explode {
    0% { opacity: 1; transform: translate3d(calc(var(--hazard-x) - 5px),0,0) scale(1); }
    55% { opacity: 1; transform: translate3d(calc(var(--hazard-x) - 5px),-2px,0) scale(2.25); filter: brightness(1.5); }
    100% { opacity: 0; transform: translate3d(calc(var(--hazard-x) - 5px),2px,0) scale(3.1); filter: brightness(1.8); }
}

@keyframes grombi-game-respawn {
    0% { opacity: 0; transform: translateY(-9px) scale(.25) rotate(-18deg); }
    62% { opacity: 1; transform: translateY(2px) scale(1.12,.9) rotate(3deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes grombi-game-respawn-eye {
    0%, 35% { opacity: 0; transform: scale(.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes grombi-death-rail {
    0% { opacity: 0; transform: scaleX(.15); }
    45% { opacity: 1; transform: scaleX(1); }
    100% { opacity: .15; transform: scaleX(.75); }
}

@keyframes grombi-level-track {
    0% { box-shadow: 0 0 0 rgba(87,201,255,0); background: var(--grombi-track); }
    45% { box-shadow: 0 0 12px rgba(87,201,255,.55); background: #57c9ff; }
    100% { box-shadow: 0 0 0 rgba(87,201,255,0); background: var(--grombi-track); }
}

@keyframes grombi-level-dot {
    0%,100% { transform: scale(1); }
    45% { transform: translateY(-2px) scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
    .grombi-mini-game .category-mini-grombi.is-dead .mini-grombi-body,
    .grombi-mini-game .category-mini-grombi.is-dead .mini-grombi-eye,
    .grombi-mini-game .category-mini-grombi.is-dead::after,
    .grombi-mini-game .category-mini-grombi.is-respawn .mini-grombi-body,
    .grombi-mini-game .category-mini-grombi.is-respawn .mini-grombi-eye,
    .grombi-mini-game.is-level-up .category-grombi-path,
    .grombi-mini-game.is-level-up .category-grombi-dots i {
        animation: none !important;
    }
}