/* /City/Components/CityBuddy.razor.rz.scp.css */
/* Same look as the GameScreen friend strip. */
.cbd[b-tflgcy56g2] {
    position: relative;
    z-index: var(--z-bubble);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 66px;
    pointer-events: none;
}

.cbd__friend[b-tflgcy56g2] {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 14px rgba(61, 42, 28, 0.25);
    font-size: 34px;
    line-height: 1;
}

.cbd__friend.bump-a[b-tflgcy56g2] { animation: cbd-hop-a-b-tflgcy56g2 0.5s var(--ease-pop); }
.cbd__friend.bump-b[b-tflgcy56g2] { animation: cbd-hop-b-b-tflgcy56g2 0.5s var(--ease-pop); }
.cbd__friend.is-dancing[b-tflgcy56g2] { animation: cbd-dance-b-tflgcy56g2 0.9s ease-in-out infinite; }

.cbd__bubble[b-tflgcy56g2] {
    position: relative;
    min-width: 0;
    max-width: calc(100% - 70px);
    margin: 0;
    padding: 7px 14px 8px;
    border-radius: 18px;
    background: var(--c-surface);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 16px rgba(61, 42, 28, 0.2);
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    animation: cbd-say-b-tflgcy56g2 0.4s var(--ease-pop) both;
}

.cbd__bubble[b-tflgcy56g2]::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: var(--c-surface);
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    border-radius: 0 0 0 5px;
    transform: rotate(45deg);
}

.cbd__name[b-tflgcy56g2] {
    font-size: 12.5px;
    font-weight: 900;
    color: var(--c-fox-dark);
    letter-spacing: 0.3px;
}

.cbd__say[b-tflgcy56g2] {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cbd__bubble--ok .cbd__say[b-tflgcy56g2] { color: #2e7d32; }

@keyframes cbd-say-b-tflgcy56g2 {
    from { transform: scale(0.6) translateX(-20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes cbd-hop-a-b-tflgcy56g2 {
    0%, 100% { transform: none; }
    40% { transform: translateY(-10px) rotate(-8deg); }
}

@keyframes cbd-hop-b-b-tflgcy56g2 {
    0%, 100% { transform: none; }
    40% { transform: translateY(-10px) rotate(8deg); }
}

@keyframes cbd-dance-b-tflgcy56g2 {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-12px) rotate(-12deg); }
    50% { transform: translateY(0) rotate(0); }
    75% { transform: translateY(-12px) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cbd__friend[b-tflgcy56g2], .cbd__bubble[b-tflgcy56g2] { animation: none !important; }
}
/* /City/Components/CityHeader.razor.rz.scp.css */
/* Same look as Games/Components/GameScreen.razor.css (header), in the city's colour family. */
.ch[b-nwfo17ao1m] {
    position: relative;
    z-index: var(--z-stage);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px;
}

.ch__back[b-nwfo17ao1m] {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 11px 13px 11px 9px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.25);
    transition: transform 0.35s var(--ease-pop);
}

.ch__back:active[b-nwfo17ao1m] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

.ch__plate[b-nwfo17ao1m] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 14px 0 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 18px rgba(61, 42, 28, 0.2);
}

.ch__icon[b-nwfo17ao1m] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--c-city-1) 0%, var(--c-city-2) 100%);
    color: #ffffff;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.ch__titles[b-nwfo17ao1m] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.ch__title[b-nwfo17ao1m] {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: clamp(16px, 4.7vw, 22px);
    font-weight: 900;
    line-height: 1.1;
    color: #d84315;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (orientation: landscape) and (max-height: 560px) {
    .ch[b-nwfo17ao1m] { height: 52px; }
    .ch__back[b-nwfo17ao1m] { width: 50px; height: 50px; }
    .ch__plate[b-nwfo17ao1m] { height: 48px; }
}
/* /City/Components/CityHouse.razor.rz.scp.css */
/* A house on the street. Positioned by the street (inline --x / --y / --w in % of the street box). The house colours
   come in as --h-* custom properties (HousePalette, same as the big letter house). */
.house[b-eqeas2f71n] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    aspect-ratio: 100 / 112;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -78%);
    transform-origin: 50% 90%;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent;
}

.house__art[b-eqeas2f71n] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: transform 0.3s var(--ease-pop), filter 0.3s ease;
}

.house:active .house__art[b-eqeas2f71n] {
    transform: scale(0.93);
    transition-duration: 0.07s;
}

/* ---------- Art colours ---------- */
.house__sh0[b-eqeas2f71n] { fill: var(--h-roof); }
.house__sh1[b-eqeas2f71n] { fill: none; stroke: var(--h-roof-dark); stroke-width: 0.7; }
.house__sh2[b-eqeas2f71n] { fill: var(--h-roof-dark); opacity: 0.3; }
.house__roof-lit[b-eqeas2f71n] { fill: #ffffff; opacity: 0.14; }
.house__fascia[b-eqeas2f71n] { fill: var(--h-roof-dark); }
.house__barge[b-eqeas2f71n] { fill: none; stroke: var(--h-roof-dark); stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
.house__finial[b-eqeas2f71n] { fill: var(--h-roof-dark); }
.house__brick[b-eqeas2f71n] { fill: #db7c5e; }
.house__cap[b-eqeas2f71n] { fill: #f3e6d4; }
.house__shade[b-eqeas2f71n] { fill: #3d2a1c; opacity: 0.08; }
.house__wall[b-eqeas2f71n] { fill: var(--h-wall); }
.house__eave[b-eqeas2f71n] { fill: #3d2a1c; opacity: 0.14; }
.house__plinth[b-eqeas2f71n] { fill: #d9c8ad; }
.house__ring[b-eqeas2f71n] { fill: #fffaf1; }
.house__pane[b-eqeas2f71n] { fill: #fffdf6; }
.house__ring-shine[b-eqeas2f71n] { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; }

.house__letter[b-eqeas2f71n] {
    font-family: var(--font-main);
    font-size: 27px;
    font-weight: 1000;
    fill: var(--h-ink);
}

.house__frame[b-eqeas2f71n],
.house__sill[b-eqeas2f71n] { fill: #fffaf1; }
.house__glass[b-eqeas2f71n] { fill: #ffcf4f; }
.house__bar[b-eqeas2f71n] { fill: none; stroke: #fffaf1; stroke-width: 1.3; }
.house__shine[b-eqeas2f71n] { fill: #ffffff; opacity: 0.5; }
.house__shut[b-eqeas2f71n] { fill: var(--h-shutter); }
.house__shut-line[b-eqeas2f71n] { fill: none; stroke: var(--h-shutter-dark); stroke-width: 0.9; }
.house__win--next .house__glass[b-eqeas2f71n] { fill: #fff3b5; }
.house__win-glow[b-eqeas2f71n] { animation: house-winglow-b-eqeas2f71n 1.5s ease-in-out infinite; }
.house__win--shut .house__glass[b-eqeas2f71n] { fill: #44507a; }

.house__door-frame[b-eqeas2f71n] { fill: #fff3dc; }
.house__door[b-eqeas2f71n] { fill: var(--h-door); }
.house__door-line[b-eqeas2f71n] { fill: none; stroke: var(--h-door-dark); stroke-width: 0.9; opacity: 0.5; }
.house__door-in[b-eqeas2f71n] { fill: #ffe39a; }
.house__knob[b-eqeas2f71n] { fill: #ffd54f; }
.house__canopy[b-eqeas2f71n] { fill: var(--h-roof); stroke: var(--h-roof-dark); stroke-width: 1.6; stroke-linejoin: round; }
.house__step[b-eqeas2f71n] { fill: #efe3cf; }
.house__bush-dk[b-eqeas2f71n] { fill: #4caf50; }
.house__bush-lt[b-eqeas2f71n] { fill: #83cf69; }
.house__fl[b-eqeas2f71n] { fill: #ff7eb6; }
.house__fl--b[b-eqeas2f71n] { fill: #ffd23f; }

/* ---------- States ---------- */
.house--locked .house__art[b-eqeas2f71n] {
    filter: grayscale(0.85) brightness(1.08) contrast(0.85);
}

.house--current .house__art[b-eqeas2f71n] {
    animation: house-pulse-b-eqeas2f71n 1.5s ease-in-out infinite;
}

.house--current[b-eqeas2f71n]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: 128%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 246, 190, 0.95) 0%, rgba(255, 228, 120, 0.6) 40%, rgba(255, 228, 120, 0) 66%);
    animation: house-halo-b-eqeas2f71n 1.5s ease-in-out infinite;
    pointer-events: none;
}

.house.is-wiggling .house__art[b-eqeas2f71n] {
    animation: house-wiggle-b-eqeas2f71n 0.55s ease-in-out;
}

.house.is-opening .house__art[b-eqeas2f71n] {
    animation: house-open-b-eqeas2f71n 1s var(--ease-pop) 0.35s both, house-pulse-b-eqeas2f71n 1.5s ease-in-out 1.4s infinite;
}

.house.is-opening .house__badge--lock[b-eqeas2f71n] { display: none; }

/* ---------- Smoke (current house only) ---------- */
.house__smoke[b-eqeas2f71n] {
    position: absolute;
    left: 72%;
    top: 4%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.house__puff[b-eqeas2f71n] {
    position: absolute;
    left: -5cqw;
    top: -5cqw;
    width: 10cqw;
    height: 10cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #ffffff 0 36%, #eef2f7 54%, rgba(226, 233, 242, 0) 71%);
    opacity: 0;
    animation: house-puff-b-eqeas2f71n 3.6s ease-out infinite;
}

.house__puff--b[b-eqeas2f71n] { animation-delay: 1.8s; }

/* ---------- Badges ---------- */
.house__badge[b-eqeas2f71n] {
    position: absolute;
    display: block;
    pointer-events: none;
}

.house__badge--done[b-eqeas2f71n] {
    top: 1%;
    right: -6%;
    width: 34%;
    aspect-ratio: 52 / 56;
    transform: rotate(-12deg);
    filter: drop-shadow(0 2px 2px rgba(30, 70, 20, 0.3));
}

.house__badge--lock[b-eqeas2f71n] {
    top: 4%;
    right: -4%;
    width: 27%;
    aspect-ratio: 44 / 52;
    filter: drop-shadow(0 2px 2px rgba(45, 30, 20, 0.35));
}

.house__stars[b-eqeas2f71n] {
    position: absolute;
    left: 50%;
    bottom: -14%;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 72%;
    transform: translateX(-50%);
}

.house__star[b-eqeas2f71n] {
    flex: 1 1 0;
    aspect-ratio: 1;
    filter: grayscale(1) brightness(1.5) opacity(0.6);
}

.house__star.is-on[b-eqeas2f71n] { filter: drop-shadow(0 1px 1px rgba(150, 80, 0, 0.4)); }

@keyframes house-pulse-b-eqeas2f71n {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes house-halo-b-eqeas2f71n {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes house-winglow-b-eqeas2f71n {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes house-wiggle-b-eqeas2f71n {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-7deg); }
    40% { transform: rotate(6deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(3deg); }
}

@keyframes house-open-b-eqeas2f71n {
    0% { transform: scale(0.6) rotate(-6deg); filter: grayscale(0.9); }
    55% { transform: scale(1.22) rotate(4deg); filter: none; }
    100% { transform: scale(1); }
}

@keyframes house-puff-b-eqeas2f71n {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
    15% { opacity: 0.95; }
    100% { transform: translate(9cqw, -16cqw) scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .house__art[b-eqeas2f71n], .house[b-eqeas2f71n]::before, .house__win-glow[b-eqeas2f71n] { animation: none !important; }
    .house__smoke[b-eqeas2f71n] { display: none; }
}
/* /City/Components/House/HouseWindow.razor.rz.scp.css */
/* A game window. Art box 400 × 440 units; every overlay is placed in % (or cqw) of that box. House colours come in
   as --h-* custom properties from the house. Only transform / opacity animate. */
.lw[b-t4w3lwbuqt] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 400 / 440;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop);
}

.lw:active[b-t4w3lwbuqt] {
    transform: scale(0.94);
    transition-duration: 0.07s;
}

.lw:focus-visible[b-t4w3lwbuqt] {
    outline: 4px solid #ffffff;
    outline-offset: 2px;
    border-radius: 18px;
}

.lw__body[b-t4w3lwbuqt] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 88%;
    animation: lw-in-b-t4w3lwbuqt 0.5s var(--ease-pop) calc(var(--i) * 80ms + 80ms) both;
}

.lw__layer[b-t4w3lwbuqt] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------- Wall details around the frame ---------- */
.lw__drop[b-t4w3lwbuqt] { fill: #3d2a1c; opacity: 0.1; }
.lw__lintel[b-t4w3lwbuqt] { fill: var(--h-wall-shade); }
.lw__key[b-t4w3lwbuqt] { fill: #fff3dc; }
.lw__key-hi[b-t4w3lwbuqt] { fill: #ffffff; opacity: 0.7; }

/* ---------- The room behind the glass: warm gold when lit, so the white icon objects pop (like the old tiles) ---------- */
.lw__rs0[b-t4w3lwbuqt] { stop-color: #ffe68f; }
.lw__rs1[b-t4w3lwbuqt] { stop-color: #ffc646; }
.lw__paper[b-t4w3lwbuqt] { fill: none; stroke: #ffffff; stroke-width: 5; stroke-dasharray: 2 18; stroke-linecap: round; opacity: 0.45; }
.lw__floor[b-t4w3lwbuqt] { fill: #df9a48; }
.lw__floor-line[b-t4w3lwbuqt] { fill: none; stroke: #c98236; stroke-width: 4; }
.lw__light[b-t4w3lwbuqt] { opacity: 0.8; }
.lw__curtain[b-t4w3lwbuqt] { fill: color-mix(in srgb, var(--h-roof) 40%, #ffffff); }
.lw__curtain-fold[b-t4w3lwbuqt] { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; opacity: 0.4; }
.lw__tie[b-t4w3lwbuqt] { fill: var(--h-roof); }
.lw__rod[b-t4w3lwbuqt] { fill: #9b6a47; }

/* A lived-in house: the lamps of the finished rooms flicker a little, each on its own beat. */
.lw--done .lw__light[b-t4w3lwbuqt] { animation: lw-flicker-b-t4w3lwbuqt 4.6s linear calc(var(--i) * -1.7s) infinite; }

.lw--open .lw__rs0[b-t4w3lwbuqt] { stop-color: #fff3b8; }
.lw--open .lw__rs1[b-t4w3lwbuqt] { stop-color: #ffd257; }
.lw--open .lw__light[b-t4w3lwbuqt] { opacity: 1; }

.lw--locked .lw__rs0[b-t4w3lwbuqt] { stop-color: #4a5680; }
.lw--locked .lw__rs1[b-t4w3lwbuqt] { stop-color: #36406a; }
.lw--locked .lw__paper[b-t4w3lwbuqt] { opacity: 0.08; }
.lw--locked .lw__floor[b-t4w3lwbuqt] { fill: #2c3556; }
.lw--locked .lw__floor-line[b-t4w3lwbuqt] { stroke: #252d4a; }
.lw--locked .lw__light[b-t4w3lwbuqt] { opacity: 0; }

/* The game icon stands on the floor of the room, centred in the big lower pane. */
.lw__icon[b-t4w3lwbuqt] {
    position: absolute;
    left: 26%;
    top: 31.4%;
    width: 48%;
    height: 43.6%;
    display: grid;
}

.lw--locked .lw__icon[b-t4w3lwbuqt] { opacity: 0; }

/* ---------- Glass, bars, frame ---------- */
.lw__glass[b-t4w3lwbuqt] { fill: #bfe6ff; opacity: 0.06; }
.lw__shine[b-t4w3lwbuqt] { fill: #ffffff; opacity: 0.42; }
.lw__shine--thin[b-t4w3lwbuqt] { opacity: 0.35; }
.lw__shine--arc[b-t4w3lwbuqt] { fill: none; stroke: #ffffff; stroke-width: 7; stroke-linecap: round; opacity: 0.75; }
.lw__bar[b-t4w3lwbuqt] { fill: #fffaf1; }
.lw__bar-dk[b-t4w3lwbuqt] { fill: #7a3d00; opacity: 0.18; }
.lw__frame[b-t4w3lwbuqt] { fill: #fffaf1; }
.lw__frame-hi[b-t4w3lwbuqt] { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; }
.lw__frame-in[b-t4w3lwbuqt] { fill: none; stroke: #3d2a1c; stroke-width: 6; opacity: 0.13; }

/* ---------- Sill ---------- */
.lw__sill-drop[b-t4w3lwbuqt] { fill: #3d2a1c; opacity: 0.13; }
.lw__sill-front[b-t4w3lwbuqt] { fill: #e3c79e; }
.lw__sill[b-t4w3lwbuqt] { fill: #fff5e3; }
.lw__sill-hi[b-t4w3lwbuqt] { fill: #ffffff; opacity: 0.85; }

/* ---------- Shutters: HTML so they can swing in 3D on their outer hinges ---------- */
.lw__shutters[b-t4w3lwbuqt] {
    position: absolute;
    left: 8.75%;
    top: 6.818%;
    width: 82.5%;
    height: 82.727%;
    perspective: 420cqw;
}

.lw__shutter[b-t4w3lwbuqt] {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    backface-visibility: visible;
}

.lw__shutter svg[b-t4w3lwbuqt] {
    display: block;
    width: 100%;
    height: 100%;
}

.lw__shutter--l[b-t4w3lwbuqt] {
    left: 0;
    border-top-left-radius: 100% 19.78%;
    transform-origin: 0 50%;
}

.lw__shutter--r[b-t4w3lwbuqt] {
    right: 0;
    border-top-right-radius: 100% 19.78%;
    transform-origin: 100% 50%;
}

.lw__shutter--r svg[b-t4w3lwbuqt] { transform: scaleX(-1); }

.lw__sh-edge[b-t4w3lwbuqt] { fill: var(--h-shutter-dark); }
.lw__sh-panel[b-t4w3lwbuqt] { fill: var(--h-shutter); }
.lw__sh-slat[b-t4w3lwbuqt] { fill: none; stroke: var(--h-shutter-dark); stroke-width: 6; opacity: 0.55; }
.lw__sh-heart[b-t4w3lwbuqt] { fill: #2d2230; opacity: 0.62; }
.lw__sh-rail[b-t4w3lwbuqt] { fill: var(--h-shutter-dark); opacity: 0.8; }
.lw__sh-hinge[b-t4w3lwbuqt] { fill: #3e3230; opacity: 0.75; }
.lw__sh-pin[b-t4w3lwbuqt] { fill: #b9aa9f; }

/* Open and done windows: shutters flung wide, seen nearly edge-on beside the frame. */
.lw--done .lw__shutter--l[b-t4w3lwbuqt] { transform: rotateY(-98deg); }
.lw--done .lw__shutter--r[b-t4w3lwbuqt] { transform: rotateY(98deg); }
.lw--open .lw__shutter--l[b-t4w3lwbuqt] { animation: lw-open-l-b-t4w3lwbuqt 0.9s var(--ease-pop) calc(var(--i) * 80ms + 0.55s) both; }
.lw--open .lw__shutter--r[b-t4w3lwbuqt] { animation: lw-open-r-b-t4w3lwbuqt 0.9s var(--ease-pop) calc(var(--i) * 80ms + 0.62s) both; }

/* Locked: shut and a little dim, with a padlock on the latch. */
.lw--locked .lw__shutters[b-t4w3lwbuqt] { filter: saturate(0.6) brightness(0.9); }
.lw--locked .lw__frame[b-t4w3lwbuqt],
.lw--locked .lw__bar[b-t4w3lwbuqt],
.lw--locked .lw__sill[b-t4w3lwbuqt] { fill: #f1ebe2; }
.lw.is-wiggling .lw__body[b-t4w3lwbuqt] { animation: lw-wiggle-b-t4w3lwbuqt 0.55s ease-in-out; }

.lw__latch[b-t4w3lwbuqt] {
    position: absolute;
    left: 39%;
    top: 46.2%;
    width: 22%;
    height: 2.6%;
    border-radius: 99px;
    background: #4b3c36;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lw__lock[b-t4w3lwbuqt] {
    position: absolute;
    left: 36%;
    top: 44.5%;
    width: 28%;
    aspect-ratio: 44 / 52;
    transform-origin: 50% 8%;
    filter: drop-shadow(0 2px 2px rgba(45, 30, 20, 0.4));
}

.lw.is-wiggling .lw__lock[b-t4w3lwbuqt] { animation: lw-lock-b-t4w3lwbuqt 0.55s ease-in-out; }

/* ---------- Done: stars on the sill + the ✓ stamp ---------- */
.lw__stars[b-t4w3lwbuqt] {
    position: absolute;
    left: 50%;
    bottom: 11.4%;
    display: flex;
    align-items: flex-end;
    gap: 1.5cqw;
    transform: translateX(-50%);
}

.lw__star[b-t4w3lwbuqt] {
    display: block;
    width: 15cqw;
    height: 15cqw;
    opacity: 0.95;
    filter: grayscale(1) brightness(1.55) opacity(0.75);
}

.lw__star.is-on[b-t4w3lwbuqt] {
    width: 23cqw;
    height: 23cqw;
    opacity: 1;
    filter: drop-shadow(0 1.5px 1px rgba(150, 80, 0, 0.45));
    animation: lw-star-b-t4w3lwbuqt 0.5s var(--ease-pop) calc(var(--i) * 80ms + 0.45s + var(--s) * 0.12s) both;
}

.lw__stamp[b-t4w3lwbuqt] {
    position: absolute;
    right: -7%;
    top: -4%;
    width: 36%;
    aspect-ratio: 52 / 56;
    transform: rotate(-12deg);
    filter: drop-shadow(0 2px 3px rgba(30, 70, 20, 0.35));
    animation: lw-stamp-b-t4w3lwbuqt 0.45s var(--ease-pop) calc(var(--i) * 80ms + 0.35s) both;
}

/* ---------- Next (the one open game to play now): glow, sparkle, pulse, arrow ---------- */
.lw--next .lw__body[b-t4w3lwbuqt] {
    animation:
        lw-in-b-t4w3lwbuqt 0.5s var(--ease-pop) calc(var(--i) * 80ms + 80ms) both,
        lw-pulse-b-t4w3lwbuqt 1.7s ease-in-out 1.5s infinite;
}

.lw__glow[b-t4w3lwbuqt] {
    position: absolute;
    left: -24%;
    top: -18%;
    width: 148%;
    height: 136%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffffff 0%, rgba(255, 249, 196, 1) 45%, rgba(255, 226, 100, 0.75) 66%, rgba(255, 205, 60, 0.3) 84%, rgba(255, 205, 60, 0) 100%);
    animation: lw-glow-b-t4w3lwbuqt 1.7s ease-in-out infinite;
    pointer-events: none;
}

.lw__sparkle[b-t4w3lwbuqt] {
    position: absolute;
    left: 20%;
    top: 40%;
    width: 13%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #ffffff 35%, #fff2a0 100%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: lw-twinkle-b-t4w3lwbuqt 2.4s ease-in-out 1.2s infinite both;
}

.lw__sparkle--b[b-t4w3lwbuqt] {
    left: 66%;
    top: 16%;
    width: 9%;
    animation-delay: 2.3s;
}

.lw__cta[b-t4w3lwbuqt] {
    position: absolute;
    left: 50%;
    top: -9cqw;
    width: max(34%, 42px);
    margin-left: calc(max(34%, 42px) / -2);
    aspect-ratio: 48 / 56;
    z-index: 2;
    animation: lw-cta-in-b-t4w3lwbuqt 0.45s var(--ease-pop) 1.1s both;
}

/* ---------- Motion ---------- */
@keyframes lw-in-b-t4w3lwbuqt {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes lw-flicker-b-t4w3lwbuqt {
    0%, 100% { opacity: 0.8; }
    12% { opacity: 0.55; }
    15% { opacity: 0.85; }
    44% { opacity: 0.7; }
    47% { opacity: 0.9; }
    76% { opacity: 0.62; }
}

@keyframes lw-open-l-b-t4w3lwbuqt {
    from { transform: rotateY(0); }
    to { transform: rotateY(-98deg); }
}

@keyframes lw-open-r-b-t4w3lwbuqt {
    from { transform: rotateY(0); }
    to { transform: rotateY(98deg); }
}

@keyframes lw-pulse-b-t4w3lwbuqt {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes lw-glow-b-t4w3lwbuqt {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes lw-twinkle-b-t4w3lwbuqt {
    0%, 62%, 100% { transform: scale(0) rotate(0); opacity: 0; }
    72% { transform: scale(1) rotate(45deg); opacity: 1; }
    84% { transform: scale(0.2) rotate(90deg); opacity: 0; }
}

@keyframes lw-wiggle-b-t4w3lwbuqt {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-6deg); }
    40% { transform: rotate(5deg); }
    60% { transform: rotate(-3deg); }
    80% { transform: rotate(2deg); }
}

@keyframes lw-lock-b-t4w3lwbuqt {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(16deg); }
    55% { transform: rotate(-12deg); }
    80% { transform: rotate(6deg); }
}

@keyframes lw-star-b-t4w3lwbuqt {
    from { transform: scale(0) rotate(-40deg); }
    to { transform: none; }
}

@keyframes lw-stamp-b-t4w3lwbuqt {
    from { transform: rotate(-12deg) scale(2.2); opacity: 0; }
    to { transform: rotate(-12deg) scale(1); opacity: 1; }
}

@keyframes lw-cta-in-b-t4w3lwbuqt {
    from { transform: translateY(-30%) scale(0.4); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lw__body[b-t4w3lwbuqt], .lw__glow[b-t4w3lwbuqt], .lw__sparkle[b-t4w3lwbuqt], .lw__star.is-on[b-t4w3lwbuqt], .lw__stamp[b-t4w3lwbuqt], .lw__lock[b-t4w3lwbuqt], .lw__cta[b-t4w3lwbuqt], .lw--done .lw__light[b-t4w3lwbuqt] { animation: none !important; }
    .lw--open .lw__shutter--l[b-t4w3lwbuqt] { animation: none; transform: rotateY(-98deg); }
    .lw--open .lw__shutter--r[b-t4w3lwbuqt] { animation: none; transform: rotateY(98deg); }
    .lw__sparkle[b-t4w3lwbuqt] { display: none; }
}
/* /City/Components/House/LetterHouse.razor.rz.scp.css */
/* The letter house. Sized by the letter screen's stage (container "lsstage"); inside, 1 art unit = 1cqw of .lh.
   Only transform / opacity animate. */
.lh[b-mbgngne7xd] {
    --hw: min(98cqw, calc(100cqh * 100 / 168));
    position: relative;
    width: var(--hw);
    aspect-ratio: 100 / 168;
    container-type: inline-size;
}

.lh__art[b-mbgngne7xd] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lh__art--long[b-mbgngne7xd] { display: none; }

.lh__defs[b-mbgngne7xd] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Colours (SVG classes) ---------- */
.lh__ground[b-mbgngne7xd] { fill: #3d2a1c; opacity: 0.16; }
.lh__shade[b-mbgngne7xd] { fill: #3d2a1c; opacity: 0.07; }
.lh__cap[b-mbgngne7xd] { fill: #f3e6d4; }
.lh__cap-dk[b-mbgngne7xd] { fill: #c9b49a; }
.lh__brick0[b-mbgngne7xd] { fill: #db7c5e; }
.lh__brick1[b-mbgngne7xd] { fill: none; stroke: #b75e44; stroke-width: 0.35; }

.lh__wall[b-mbgngne7xd] { fill: var(--h-wall); }
.lh__plaster-dots[b-mbgngne7xd] { fill: #3d2a1c; fill-opacity: 0.09; }
.lh__quoin[b-mbgngne7xd] { fill: #ffffff; opacity: 0.34; }
.lh__band[b-mbgngne7xd] { fill: var(--h-wall-shade); }
.lh__band-hi[b-mbgngne7xd] { fill: #ffffff; opacity: 0.5; }
.lh__plinth-cap[b-mbgngne7xd] { fill: #f2e6d2; }
.lh__plinth[b-mbgngne7xd] { fill: #d9c8ad; }
.lh__plinth-j[b-mbgngne7xd] { fill: none; stroke: #b9a487; stroke-width: 0.5; }

.lh__vine[b-mbgngne7xd] { fill: none; stroke: #4f9a3f; stroke-width: 0.8; stroke-linecap: round; }
.lh__leaf[b-mbgngne7xd] { fill: #66bb55; }
.lh__leaf--dk[b-mbgngne7xd] { fill: #3f9a44; }
.lh__bloom[b-mbgngne7xd] { fill: #ff8fb4; }
.lh__bloom-c[b-mbgngne7xd] { fill: #ffd54f; }

.lh__door-frame[b-mbgngne7xd] { fill: #fff3dc; }
.lh__door-frame-in[b-mbgngne7xd] { fill: none; stroke: #3d2a1c; stroke-width: 0.6; opacity: 0.2; }
.lh__inside[b-mbgngne7xd] { fill: #4a3a52; }
.lh__inside-lamp[b-mbgngne7xd] { opacity: 0; }
.lh__inside-floor[b-mbgngne7xd] { fill: #c58c56; opacity: 0.5; }
.lh__inside-rug[b-mbgngne7xd] { fill: #e2557e; opacity: 0; }
.lh__canopy-drop[b-mbgngne7xd] { fill: #3d2a1c; opacity: 0.15; }
.lh__bracket[b-mbgngne7xd] { fill: #9b6a47; }
.lh__canopy-rim[b-mbgngne7xd] { fill: none; stroke: var(--h-roof-dark); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lh__spill[b-mbgngne7xd] { opacity: 0; }
.lh__step[b-mbgngne7xd] { fill: #f0e4d0; }
.lh__step-front[b-mbgngne7xd] { fill: #cdbb9f; }

.lh__lamp-glow[b-mbgngne7xd] { opacity: 0.85; animation: lh-flicker-b-mbgngne7xd 3.6s linear infinite; }
.lh__lamp-arm[b-mbgngne7xd] { fill: none; stroke: #3c5a73; stroke-width: 0.7; stroke-linecap: round; }
.lh__lamp-cap[b-mbgngne7xd] { fill: #3c5a73; }
.lh__lamp-glass[b-mbgngne7xd] { fill: #fff4b8; }
.lh__plate-edge[b-mbgngne7xd] { fill: #ffffff; }
.lh__plate[b-mbgngne7xd] { fill: #2f6fc4; }
.lh__plate-heart[b-mbgngne7xd] { fill: #ffffff; }

.lh__pot[b-mbgngne7xd] { fill: #e0794f; }
.lh__pot-rim[b-mbgngne7xd] { fill: #f08c5f; }
.lh__bush-dk[b-mbgngne7xd] { fill: #45a046; }
.lh__bush-md[b-mbgngne7xd] { fill: #5bb851; }
.lh__bush-lt[b-mbgngne7xd] { fill: #83cf69; }
.lh__fl-a[b-mbgngne7xd] { fill: #ff7eb6; }
.lh__fl-b[b-mbgngne7xd] { fill: #ffd23f; }
.lh__fl-w[b-mbgngne7xd] { fill: #ffffff; }
.lh__tuft[b-mbgngne7xd] { fill: #5aab45; }

.lh__fascia[b-mbgngne7xd] { fill: var(--h-roof-dark); }
.lh__sh0[b-mbgngne7xd] { fill: var(--h-roof); }
.lh__sh1[b-mbgngne7xd] { fill: none; stroke: var(--h-roof-dark); stroke-width: 0.45; }
.lh__sh2[b-mbgngne7xd] { fill: var(--h-roof-dark); opacity: 0.3; }
.lh__roof-lit[b-mbgngne7xd] { fill: #ffffff; opacity: 0.13; }
.lh__roof-shade[b-mbgngne7xd] { fill: #3d2a1c; opacity: 0.06; }
.lh__roof-edge[b-mbgngne7xd] { fill: var(--h-roof-dark); opacity: 0.55; }
.lh__barge[b-mbgngne7xd] { fill: none; stroke: var(--h-roof-dark); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.lh__barge-hi[b-mbgngne7xd] { fill: none; stroke: var(--h-roof-light); stroke-width: 1; stroke-linecap: round; opacity: 0.9; }
.lh__finial[b-mbgngne7xd] { fill: var(--h-roof-dark); }

.lh__attic-drop[b-mbgngne7xd] { fill: #3d2a1c; opacity: 0.2; }
.lh__attic-ring[b-mbgngne7xd] { fill: #fffaf1; }
.lh__stud[b-mbgngne7xd] { fill: var(--h-roof-dark); opacity: 0.5; }
.lh__attic-glow[b-mbgngne7xd] { opacity: 0; mix-blend-mode: multiply; }
.lh__attic-in[b-mbgngne7xd] { fill: none; stroke: #3d2a1c; stroke-width: 0.7; opacity: 0.16; }
.lh__attic-shine[b-mbgngne7xd] { fill: none; stroke: #ffffff; stroke-width: 1.1; stroke-linecap: round; opacity: 0.9; }
.lh__sign[b-mbgngne7xd] { font-family: var(--font-main); font-weight: 1000; }
.lh__up[b-mbgngne7xd] { font-size: 15.5px; fill: var(--h-ink); }
.lh__lo[b-mbgngne7xd] { font-size: 11px; fill: var(--h-ink2); }

/* ---------- Ambient life ---------- */
.lh__smoke[b-mbgngne7xd] {
    position: absolute;
    left: 74cqw;
    top: 3cqw;
    width: 0;
    height: 0;
    pointer-events: none;
}

.lh__puff[b-mbgngne7xd] {
    position: absolute;
    left: -3.4cqw;
    top: -3.4cqw;
    width: 6.8cqw;
    height: 6.8cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #ffffff 0 36%, #eef2f7 54%, rgba(226, 233, 242, 0) 71%);
    opacity: 0;
    animation: lh-puff-b-mbgngne7xd 4.2s ease-out calc(var(--k) * 1.4s) infinite;
}

.lh__bird[b-mbgngne7xd] {
    position: absolute;
    left: 31.2cqw;
    top: 3.6cqw;
    width: 9cqw;
    aspect-ratio: 40 / 36;
    transform-origin: 50% 100%;
    animation: lh-bird-b-mbgngne7xd 7s ease-in-out 2s infinite;
    pointer-events: none;
}

.lh__bird svg[b-mbgngne7xd] { display: block; width: 100%; height: 100%; }

/* ---------- Window slots (tall house, game order: 3 · 3 · 2 beside the door) ---------- */
.lh__slot[b-mbgngne7xd] {
    position: absolute;
    width: 27cqw;
}

.lh__slot--1[b-mbgngne7xd] { left: 5.5cqw; top: 43cqw; }
.lh__slot--2[b-mbgngne7xd] { left: 36.5cqw; top: 43cqw; }
.lh__slot--3[b-mbgngne7xd] { left: 67.5cqw; top: 43cqw; }
.lh__slot--4[b-mbgngne7xd] { left: 5.5cqw; top: 76.5cqw; }
.lh__slot--5[b-mbgngne7xd] { left: 36.5cqw; top: 76.5cqw; }
.lh__slot--6[b-mbgngne7xd] { left: 67.5cqw; top: 76.5cqw; }
.lh__slot--7[b-mbgngne7xd] { left: 5.5cqw; top: 112.5cqw; }
.lh__slot--8[b-mbgngne7xd] { left: 67.5cqw; top: 112.5cqw; }

/* ---------- Door ---------- */
.lh__door[b-mbgngne7xd] {
    position: absolute;
    left: 40.3cqw;
    top: 140.4cqw;
    width: 19.4cqw;
    height: 21cqw;
    border-radius: 50% 50% 0 0 / 36.2% 36.2% 0 0;
    overflow: hidden;
    transform-origin: 0 50%;
    pointer-events: none;
}

.lh__door svg[b-mbgngne7xd] { display: block; width: 100%; height: 100%; }
.lh__door-wood[b-mbgngne7xd] { fill: var(--h-door); }
.lh__door-plank[b-mbgngne7xd] { fill: none; stroke: var(--h-door-dark); stroke-width: 5; opacity: 0.45; }
.lh__door-hi[b-mbgngne7xd] { fill: #ffffff; opacity: 0.2; }
.lh__door-kick[b-mbgngne7xd] { fill: var(--h-door-dark); opacity: 0.4; }
.lh__door-win-ring[b-mbgngne7xd] { fill: #fff3dc; }
.lh__door-win[b-mbgngne7xd] { fill: #ffe9a0; }
.lh__door-win-bar[b-mbgngne7xd] { fill: none; stroke: #fff3dc; stroke-width: 5; }
.lh__door-hinge[b-mbgngne7xd] { fill: #3e3230; opacity: 0.72; }
.lh__door-knob-dk[b-mbgngne7xd] { fill: #b07a12; }
.lh__door-knob[b-mbgngne7xd] { fill: #ffd54f; }
.lh__door-knob-hi[b-mbgngne7xd] { fill: #ffffff; opacity: 0.7; }

.lh__door-btn[b-mbgngne7xd] {
    position: absolute;
    left: 34cqw;
    top: 132cqw;
    width: 32cqw;
    height: 34cqw;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6cqw;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lh__door-btn:focus-visible[b-mbgngne7xd] { outline: 4px solid #ffffff; outline-offset: 2px; }

.lh__door-cta[b-mbgngne7xd] {
    position: absolute;
    left: 50cqw;
    top: 123cqw;
    width: max(13cqw, 42px);
    margin-left: calc(max(13cqw, 42px) / -2);
    aspect-ratio: 48 / 56;
    z-index: 3;
    pointer-events: none;
}

/* ---------- Mastered: lights on, door open, fairy lights ---------- */
.lh--lit .lh__attic-glow[b-mbgngne7xd] { opacity: 1; animation: lh-flicker-b-mbgngne7xd 5s linear infinite; }
.lh__wire[b-mbgngne7xd] { fill: none; stroke: #4a3b33; stroke-width: 0.35; opacity: 0.7; }
.lh__art--long .lh__wire[b-mbgngne7xd] { stroke-width: 0.2; }
.lh__bulb--a[b-mbgngne7xd] { fill: #ff5e6c; }
.lh__bulb--b[b-mbgngne7xd] { fill: #ffd23f; }
.lh__bulb--c[b-mbgngne7xd] { fill: #5ad1ff; }
.lh__bulb--d[b-mbgngne7xd] { fill: #7ed957; }
.lh__bulb--e[b-mbgngne7xd] { fill: #ff9f1c; }
.lh__bulb-glow[b-mbgngne7xd] { opacity: 0.35; animation: lh-twinkle-b-mbgngne7xd 2.4s ease-in-out calc(var(--b) * -0.37s) infinite; }
.lh--lit .lh__inside[b-mbgngne7xd] { fill: #ffe7a6; }
.lh--lit .lh__inside-lamp[b-mbgngne7xd] { opacity: 1; }
.lh--lit .lh__inside-rug[b-mbgngne7xd] { opacity: 0.85; }
.lh--lit .lh__spill[b-mbgngne7xd] { opacity: 0.9; }
.lh--lit .lh__door[b-mbgngne7xd] { transform: perspective(60cqw) rotateY(74deg); }

/* ---------- Party (one-time mastery moment) ---------- */
.lh--party .lh__door[b-mbgngne7xd] { animation: lh-door-open-b-mbgngne7xd 1.1s var(--ease-pop) 0.45s both; }
.lh--party .lh__spill[b-mbgngne7xd],
.lh--party .lh__inside-lamp[b-mbgngne7xd] { animation: lh-fade-in-b-mbgngne7xd 0.6s ease 0.7s both; }

.lh__confetti[b-mbgngne7xd] {
    position: absolute;
    left: 50cqw;
    top: 150cqw;
    width: 0;
    height: 0;
    z-index: 4;
    pointer-events: none;
}

.lh__bit[b-mbgngne7xd] {
    position: absolute;
    left: -1.1cqw;
    top: -1.7cqw;
    width: 2.2cqw;
    height: 3.4cqw;
    border-radius: 0.5cqw;
    background: var(--c);
    opacity: 0;
    animation: lh-bit-b-mbgngne7xd 1.7s var(--ease-out) calc(0.75s + var(--t)) both;
}

.lh__bit--1[b-mbgngne7xd] { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.lh__bit--2[b-mbgngne7xd] { width: 1.5cqw; height: 4.2cqw; }

/* ---------- Long layout (wide, short stage: phone landscape) ---------- */
.lh__art--long .lh__barge[b-mbgngne7xd] { stroke-width: 1.9; }
.lh__art--long .lh__barge-hi[b-mbgngne7xd] { stroke-width: 0.56; }
.lh__art--long .lh__canopy-rim[b-mbgngne7xd] { stroke-width: 1; }
.lh__art--long .lh__lamp-arm[b-mbgngne7xd] { stroke-width: 0.4; }
.lh__art--long .lh__attic-in[b-mbgngne7xd] { stroke-width: 0.4; }
.lh__art--long .lh__attic-shine[b-mbgngne7xd] { stroke-width: 0.6; }
.lh__art--long .lh__plinth-j[b-mbgngne7xd] { stroke-width: 0.28; }
.lh__art--long .lh__door-frame-in[b-mbgngne7xd] { stroke-width: 0.34; }
.lh__art--long .lh__up[b-mbgngne7xd] { font-size: 6.3px; }
.lh__art--long .lh__lo[b-mbgngne7xd] { font-size: 4.5px; }
.lh__sh1--s[b-mbgngne7xd] { stroke-width: 0.25; }
.lh__brick1--s[b-mbgngne7xd] { stroke-width: 0.2; }

@container lsstage (min-aspect-ratio: 6 / 5) {
    .lh[b-mbgngne7xd] {
        --hw: min(98cqw, calc(100cqh * 100 / 40));
        aspect-ratio: 100 / 40;
    }

    .lh__art--tall[b-mbgngne7xd] { display: none; }
    .lh__art--long[b-mbgngne7xd] { display: block; }

    /* Eight in a row: four left of the door, four right of it. */
    .lh__slot[b-mbgngne7xd] { width: 10.3cqw; top: 18.4cqw; }
    .lh__slot--1[b-mbgngne7xd] { left: 1.2cqw; }
    .lh__slot--2[b-mbgngne7xd] { left: 11.7cqw; }
    .lh__slot--3[b-mbgngne7xd] { left: 22.2cqw; }
    .lh__slot--4[b-mbgngne7xd] { left: 32.7cqw; }
    .lh__slot--5[b-mbgngne7xd] { left: 57cqw; }
    .lh__slot--6[b-mbgngne7xd] { left: 67.5cqw; }
    .lh__slot--7[b-mbgngne7xd] { left: 78cqw; }
    .lh__slot--8[b-mbgngne7xd] { left: 88.5cqw; }

    .lh__door[b-mbgngne7xd] {
        left: 44.4cqw;
        top: 21.2cqw;
        width: 11.2cqw;
        height: 15.4cqw;
        border-radius: 50% 50% 0 0 / 28.6% 28.6% 0 0;
    }

    .lh__door-btn[b-mbgngne7xd] { left: 40.5cqw; top: 16cqw; width: 19cqw; height: 23.5cqw; border-radius: 3cqw; }
    .lh__door-cta[b-mbgngne7xd] { top: 18.4cqw; width: max(6.8cqw, 42px); margin-left: calc(max(6.8cqw, 42px) / -2); }
    .lh__confetti[b-mbgngne7xd] { top: 29cqw; }
    .lh__smoke[b-mbgngne7xd] { left: 82.5cqw; top: 0; }
    .lh__puff[b-mbgngne7xd] { left: -1.9cqw; top: -1.9cqw; width: 3.8cqw; height: 3.8cqw; }
    .lh__bird[b-mbgngne7xd] { left: 11.4cqw; top: 2.3cqw; width: 5cqw; }
}

/* ---------- Motion ---------- */
@keyframes lh-puff-b-mbgngne7xd {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
    14% { opacity: 0.95; }
    100% { transform: translate(8cqw, -9cqw) scale(1.8); opacity: 0; }
}

@keyframes lh-bird-b-mbgngne7xd {
    0%, 76%, 100% { transform: none; }
    79% { transform: translateY(-16%) rotate(-4deg); }
    82% { transform: none; }
    85% { transform: translateY(-10%) rotate(3deg); }
    88% { transform: none; }
    93% { transform: rotate(-10deg); }
    97% { transform: none; }
}

@keyframes lh-flicker-b-mbgngne7xd {
    0%, 100% { opacity: 0.85; }
    18% { opacity: 0.7; }
    22% { opacity: 0.92; }
    48% { opacity: 0.8; }
    52% { opacity: 0.95; }
    80% { opacity: 0.76; }
}

@keyframes lh-twinkle-b-mbgngne7xd {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.6; }
}

@keyframes lh-door-open-b-mbgngne7xd {
    from { transform: perspective(60cqw) rotateY(0); }
    to { transform: perspective(60cqw) rotateY(74deg); }
}

@keyframes lh-fade-in-b-mbgngne7xd { from { opacity: 0; } }

@keyframes lh-bit-b-mbgngne7xd {
    0% { transform: rotate(var(--a)) translateY(0) rotate(0); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lh__puff[b-mbgngne7xd], .lh__confetti[b-mbgngne7xd] { display: none; }
    .lh__bird[b-mbgngne7xd], .lh__lamp-glow[b-mbgngne7xd], .lh--lit .lh__attic-glow[b-mbgngne7xd], .lh--party .lh__spill[b-mbgngne7xd], .lh--party .lh__inside-lamp[b-mbgngne7xd], .lh__bulb-glow[b-mbgngne7xd] { animation: none !important; }
    .lh--party .lh__door[b-mbgngne7xd] { animation: none; transform: perspective(60cqw) rotateY(74deg); }
}
/* /City/Components/ReviewStopView.razor.rz.scp.css */
/* A review stop on the street. The river is a band across the top of the street; the other stops are round tokens
   that the map places on its little park (inline --x / --y in % of the park, size from the map's CSS). Only transform,
   opacity and filter animate. */
.stop[b-v98cy0be4t] {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stop--token[b-v98cy0be4t] {
    aspect-ratio: 1;
    transform-origin: 50% 50%;
}

.stop__disc[b-v98cy0be4t] {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffefcc 70%, #ffdca0 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #d8b98a, 0 6px 10px rgba(61, 42, 28, 0.22);
}

.stop--token .stop__svg[b-v98cy0be4t] {
    position: absolute;
    inset: 9%;
    width: 82%;
    height: 82%;
}

.stop__tile-glyph[b-v98cy0be4t],
.stop__glass-glyph[b-v98cy0be4t] {
    font-family: var(--font-main);
    font-weight: 1000;
    fill: #f4511e;
}

.stop__tile-glyph[b-v98cy0be4t] { font-size: 17px; }

/* „Састави речи“ cards and „Пиши реч“ word: the same rounded heavy face as the tiles. */
.stop__syl[b-v98cy0be4t],
.stop__word[b-v98cy0be4t] {
    font-family: var(--font-main);
    font-weight: 1000;
}

.stop__syl[b-v98cy0be4t] { font-size: 17px; fill: #e65100; }
.stop__word[b-v98cy0be4t] { font-size: 22px; fill: #1e88e5; }

.stop--current .stop__pencil[b-v98cy0be4t] {
    transform-box: view-box;
    transform-origin: 62px 86px;
    animation: stop-scribble-b-v98cy0be4t 1.4s ease-in-out infinite;
}

.stop--current .stop__rope[b-v98cy0be4t] {
    animation: stop-tug-b-v98cy0be4t 1.4s ease-in-out infinite;
}
.stop__glass-glyph[b-v98cy0be4t] { font-size: 30px; fill: #1e88e5; }

.stop__art[b-v98cy0be4t] {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 0.3s var(--ease-pop), filter 0.3s ease;
}

.stop__svg[b-v98cy0be4t] {
    display: block;
    overflow: visible;
}

.stop:active .stop__art[b-v98cy0be4t] {
    transform: scale(0.93);
    transition-duration: 0.07s;
}

/* ---------- Pond details ---------- */
.stop__ripple[b-v98cy0be4t] { transform-box: fill-box; transform-origin: center; animation: stop-ripple-b-v98cy0be4t 3s ease-out infinite; }
.stop__ripple--b[b-v98cy0be4t] { animation-delay: 1.4s; }
.stop__bobber[b-v98cy0be4t] { animation: stop-bob-b-v98cy0be4t 1.6s ease-in-out infinite alternate; }
.stop__fish[b-v98cy0be4t] { opacity: 0; transform-box: view-box; }
.stop--current .stop__fish[b-v98cy0be4t] { animation: stop-leap-b-v98cy0be4t 2.6s ease-in-out infinite; }

/* ---------- Leaf pile details ---------- */
.stop__fall[b-v98cy0be4t] { opacity: 0; }
.stop--current .stop__fall[b-v98cy0be4t] { animation: stop-fall-b-v98cy0be4t 3.2s ease-in infinite; }
.stop--current .stop__fall--b[b-v98cy0be4t] { animation-delay: 1.6s; }
.stop--current .stop__pile[b-v98cy0be4t] { transform-box: fill-box; transform-origin: 50% 100%; animation: stop-rustle-b-v98cy0be4t 1.5s ease-in-out infinite; }

/* ---------- River: a band across the top of the street, the road's stepping stones across it ---------- */
.stop--river[b-v98cy0be4t] {
    left: 0;
    right: 0;
    top: 0;
    height: max(13%, 56px);
    border-radius: calc(var(--radius-l) - 4px) calc(var(--radius-l) - 4px) 0 0;
    container-type: size;
}

.stop--river .stop__art[b-v98cy0be4t] {
    overflow: hidden;
    border-radius: inherit;
}

.stop__water[b-v98cy0be4t] {
    position: absolute;
    left: 0;
    right: 0;
    top: 16%;
    bottom: 12%;
    overflow: hidden;
    background: linear-gradient(180deg, #2e98cf 0%, #4fbbe8 45%, #7fd3f5 100%);
    box-shadow: inset 0 3px 0 rgba(10, 70, 120, 0.25), inset 0 -3px 0 rgba(255, 255, 255, 0.35);
}

.stop__flow[b-v98cy0be4t] {
    position: absolute;
    left: 0;
    top: 30%;
    width: 30%;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.7);
    animation: stop-flow-b-v98cy0be4t 4.2s linear infinite;
}

.stop__flow--b[b-v98cy0be4t] { top: 62%; width: 22%; animation-duration: 5.4s; animation-delay: -2s; }
.stop__flow--c[b-v98cy0be4t] { top: 44%; width: 16%; animation-duration: 3.6s; animation-delay: -1s; }

.stop__bank[b-v98cy0be4t] {
    position: absolute;
    left: 0;
    right: 0;
}

/* Far bank: the next neighbourhood's lawn, a few flowers. */
.stop__bank--far[b-v98cy0be4t] {
    top: 0;
    height: 18%;
    background:
        radial-gradient(circle at 12% 55%, #ffd23f 0 3px, transparent 3.5px),
        radial-gradient(circle at 34% 40%, #ff7eb6 0 3px, transparent 3.5px),
        radial-gradient(circle at 78% 50%, #ffffff 0 3px, transparent 3.5px),
        linear-gradient(180deg, #8fd16a 0%, #6fbf55 100%);
}

/* Near bank: sand where the road meets the water. */
.stop__bank--near[b-v98cy0be4t] {
    bottom: 0;
    height: 14%;
    background: linear-gradient(180deg, #efe3cf 0%, #d9c8ad 100%);
}

.stop__stones i[b-v98cy0be4t] {
    position: absolute;
    left: var(--sx);
    top: var(--sy);
    width: 34cqh;
    height: 22cqh;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 36% 30%, #f1ece4 0%, #b9b0a4 70%);
    box-shadow: 0 3px 0 #7b7266, 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ---------- States ---------- */
.stop--locked .stop__art[b-v98cy0be4t] {
    filter: grayscale(0.85) brightness(1.08) contrast(0.85);
}

.stop--current .stop__art[b-v98cy0be4t] {
    animation: stop-pulse-b-v98cy0be4t 1.5s ease-in-out infinite;
}

.stop--token.stop--current[b-v98cy0be4t]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 246, 190, 0.95) 0%, rgba(255, 228, 120, 0.6) 40%, rgba(255, 228, 120, 0) 66%);
    animation: stop-halo-b-v98cy0be4t 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* The river is too wide to pulse: its stones glow instead. */
.stop--river.stop--current .stop__art[b-v98cy0be4t] { animation: none; }

.stop--river.stop--current .stop__stones i[b-v98cy0be4t] {
    animation: stop-stone-b-v98cy0be4t 1.5s ease-in-out infinite;
}

.stop--river.stop--current .stop__stones i:nth-child(2)[b-v98cy0be4t] { animation-delay: 0.25s; }
.stop--river.stop--current .stop__stones i:nth-child(3)[b-v98cy0be4t] { animation-delay: 0.5s; }

.stop.is-wiggling .stop__art[b-v98cy0be4t] {
    animation: stop-wiggle-b-v98cy0be4t 0.55s ease-in-out;
}

.stop.is-opening .stop__art[b-v98cy0be4t] {
    animation: stop-open-b-v98cy0be4t 1s var(--ease-pop) 0.35s both, stop-pulse-b-v98cy0be4t 1.5s ease-in-out 1.4s infinite;
}

.stop--river.is-opening .stop__art[b-v98cy0be4t] {
    animation: stop-open-river-b-v98cy0be4t 1s ease 0.35s both;
}

.stop.is-opening .stop__badge--lock[b-v98cy0be4t] { display: none; }

/* ---------- Badges ---------- */
.stop__badge[b-v98cy0be4t] {
    position: absolute;
    display: block;
    pointer-events: none;
}

.stop__badge--done[b-v98cy0be4t] {
    top: -8%;
    right: -10%;
    width: 40%;
    aspect-ratio: 52 / 56;
    transform: rotate(-12deg);
    filter: drop-shadow(0 2px 2px rgba(30, 70, 20, 0.3));
}

.stop__badge--lock[b-v98cy0be4t] {
    top: -6%;
    right: -6%;
    width: 34%;
    aspect-ratio: 44 / 52;
    filter: drop-shadow(0 2px 2px rgba(45, 30, 20, 0.35));
}

.stop__stars[b-v98cy0be4t] {
    position: absolute;
    left: 50%;
    bottom: -14%;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 70%;
    transform: translateX(-50%);
    pointer-events: none;
}

.stop__star[b-v98cy0be4t] {
    flex: 1 1 0;
    aspect-ratio: 1;
    filter: grayscale(1) brightness(1.5) opacity(0.6);
}

.stop__star.is-on[b-v98cy0be4t] { filter: drop-shadow(0 1px 1px rgba(150, 80, 0, 0.4)); }

/* River badges sit on the near bank, right of the stones. */
.stop--river .stop__badge--done[b-v98cy0be4t],
.stop--river .stop__badge--lock[b-v98cy0be4t] {
    top: 50%;
    right: auto;
    left: 66%;
    width: auto;
    height: 64cqh;
    transform: translateY(-50%) rotate(-8deg);
}

.stop--river .stop__stars[b-v98cy0be4t] {
    left: auto;
    right: 4%;
    top: 50%;
    bottom: auto;
    width: 22%;
    transform: translateY(-50%);
}

@keyframes stop-pulse-b-v98cy0be4t {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes stop-halo-b-v98cy0be4t {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes stop-stone-b-v98cy0be4t {
    0%, 100% { box-shadow: 0 3px 0 #7b7266, 0 0 0 3px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 3px 0 #7b7266, 0 0 0 5px #fff3a6, 0 0 12px 4px rgba(255, 228, 120, 0.9); }
}

@keyframes stop-wiggle-b-v98cy0be4t {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-7deg); }
    40% { transform: rotate(6deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(3deg); }
}

@keyframes stop-open-b-v98cy0be4t {
    0% { transform: scale(0.6) rotate(-6deg); filter: grayscale(0.9); }
    55% { transform: scale(1.22) rotate(4deg); filter: none; }
    100% { transform: scale(1); }
}

@keyframes stop-open-river-b-v98cy0be4t {
    0% { filter: grayscale(0.9); }
    100% { filter: none; }
}

@keyframes stop-ripple-b-v98cy0be4t {
    0% { transform: scale(0.4); opacity: 0; }
    25% { opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes stop-bob-b-v98cy0be4t {
    from { transform: translateY(-1px); }
    to { transform: translateY(1.5px); }
}

@keyframes stop-leap-b-v98cy0be4t {
    0%, 55% { opacity: 0; transform: translate(0, 10px); }
    65% { opacity: 1; transform: translate(-2px, 0); }
    85% { opacity: 1; transform: translate(-6px, -2px); }
    100% { opacity: 0; transform: translate(-9px, 10px); }
}

@keyframes stop-fall-b-v98cy0be4t {
    0% { opacity: 0; transform: translate(0, -16px) rotate(0); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(-6px, 26px) rotate(160deg); }
}

@keyframes stop-rustle-b-v98cy0be4t {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-1.5deg) translateY(-0.6px); }
}

@keyframes stop-scribble-b-v98cy0be4t {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(-6px, -1px) rotate(-4deg); }
}

@keyframes stop-tug-b-v98cy0be4t {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes stop-flow-b-v98cy0be4t {
    from { transform: translateX(-110%); }
    to { transform: translateX(380%); }
}

@media (prefers-reduced-motion: reduce) {
    .stop__art[b-v98cy0be4t], .stop[b-v98cy0be4t]::before, .stop__ripple[b-v98cy0be4t], .stop__bobber[b-v98cy0be4t], .stop__fish[b-v98cy0be4t], .stop__fall[b-v98cy0be4t], .stop__pile[b-v98cy0be4t],
    .stop__flow[b-v98cy0be4t], .stop__stones i[b-v98cy0be4t], .stop__pencil[b-v98cy0be4t], .stop__rope[b-v98cy0be4t] {
        animation: none !important;
    }
}
/* /City/LetterGames/Balloons/BalloonButton.razor.rz.scp.css */
/* A candy-style balloon: glossy body with the letter, knot, string. Sized in em: 1em = 16 px gives a 76 × 92 px body
   and a 76 × 128 px tap target; on narrow skies the font-size shrinks so a balloon is always 14 px narrower than its
   lane (25cqw of the sky container), which, with the small sway, keeps neighbours and their hit areas apart.
   Only transform and opacity animate. */
.bb-balloon[b-i8mpvi0tbe] {
    --b1: #ff8a80;
    --b2: #e53935;
    --edge: #b71c1c;
    position: relative;
    display: block;
    font-size: min(16px, calc((25cqw - 14px) / 4.75));
    width: 4.75em;
    height: 8em;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    animation: bb-sway-b-i8mpvi0tbe 3.2s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}

.bb-balloon:disabled[b-i8mpvi0tbe] {
    cursor: default;
}

.bb-balloon--c0[b-i8mpvi0tbe] { --b1: #ff8a80; --b2: #e53935; --edge: #a91b18; }
.bb-balloon--c1[b-i8mpvi0tbe] { --b1: #82c4ff; --b2: #1e88e5; --edge: #0d5aa8; }
.bb-balloon--c2[b-i8mpvi0tbe] { --b1: #9be27c; --b2: #43a047; --edge: #23702a; }
.bb-balloon--c3[b-i8mpvi0tbe] { --b1: #ffe082; --b2: #ffb300; --edge: #a86400; }
.bb-balloon--c4[b-i8mpvi0tbe] { --b1: #d59be3; --b2: #8e24aa; --edge: #5c1170; }
.bb-balloon--c5[b-i8mpvi0tbe] { --b1: #ffc27a; --b2: #fb8c00; --edge: #a85300; }

.bb-balloon__body[b-i8mpvi0tbe] {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 4.75em;
    height: 5.75em;
    border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 34% 28%, var(--b1) 0%, var(--b2) 72%);
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), 0 6px 10px rgba(30, 60, 100, 0.18);
}

.bb-balloon__shine[b-i8mpvi0tbe] {
    position: absolute;
    left: 0.875em;
    top: 0.75em;
    width: 0.75em;
    height: 1.25em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    transform: rotate(24deg);
}

.bb-balloon__glyph[b-i8mpvi0tbe] {
    position: relative;
    font-size: 3.125em;
    font-weight: 1000;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 3px 0 var(--edge), 0 0 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.bb-balloon__knot[b-i8mpvi0tbe] {
    position: absolute;
    left: 1.9375em;
    top: 5.5625em;
    width: 0;
    height: 0;
    border-left: 0.4375em solid transparent;
    border-right: 0.4375em solid transparent;
    border-bottom: 0.5625em solid var(--b2);
}

.bb-balloon__string[b-i8mpvi0tbe] {
    position: absolute;
    left: 2.3125em;
    top: 6.0625em;
    width: 2px;
    height: 1.875em;
    border-radius: 2px;
    background: rgba(90, 70, 50, 0.45);
}

/* Pop: the body puffs up and vanishes, the knot and string drop away, sparks fly out. */
.bb-balloon.is-popped[b-i8mpvi0tbe] {
    animation: none;
}

.bb-balloon.is-popped .bb-balloon__body[b-i8mpvi0tbe] {
    animation: bb-pop-b-i8mpvi0tbe 0.26s ease-out forwards;
}

.bb-balloon.is-popped .bb-balloon__knot[b-i8mpvi0tbe],
.bb-balloon.is-popped .bb-balloon__string[b-i8mpvi0tbe] {
    animation: bb-drop-b-i8mpvi0tbe 0.4s ease-in forwards;
}

.bb-burst[b-i8mpvi0tbe] {
    position: absolute;
    left: 2.375em;
    top: 2.875em;
    width: 0;
    height: 0;
}

.bb-burst i[b-i8mpvi0tbe] {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--b2);
    border: 2px solid #ffffff;
    transform: rotate(var(--a));
    animation: bb-spark-b-i8mpvi0tbe 0.45s ease-out forwards;
}

.bb-burst i:nth-child(odd)[b-i8mpvi0tbe] { background: #ffd54f; }

/* A wrong letter: a quick „no“ wiggle, then it floats on. */
.bb-balloon.is-wrong[b-i8mpvi0tbe] {
    animation: bb-no-b-i8mpvi0tbe 0.5s ease both;
}

@keyframes bb-sway-b-i8mpvi0tbe {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2.5deg); }
}

@keyframes bb-pop-b-i8mpvi0tbe {
    0% { transform: scale(1); opacity: 1; }
    45% { transform: scale(1.35); opacity: 0.85; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes bb-drop-b-i8mpvi0tbe {
    to { transform: translateY(40px); opacity: 0; }
}

@keyframes bb-spark-b-i8mpvi0tbe {
    0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-3.6em) scale(0.4); opacity: 0; }
}

@keyframes bb-no-b-i8mpvi0tbe {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-5px) rotate(-4deg); }
    40% { transform: translateX(5px) rotate(4deg); }
    60% { transform: translateX(-3px) rotate(-2deg); }
    80% { transform: translateX(2px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bb-balloon[b-i8mpvi0tbe] { animation: none; }
}
/* /City/LetterGames/Balloons/LetterBalloonsGame.razor.rz.scp.css */
/* „Балони са словима“: target sign + sky inside the GameScreen panel. Only transform and opacity animate. */

/* ---------- Target sign: the letter to pop, big (both forms in the mixed stage) ---------- */
.bh-sign[b-o37fd06rib] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 12px;
    animation: bh-sign-in-b-o37fd06rib 0.5s var(--ease-pop) both;
}

.bh-sign__tile[b-o37fd06rib] {
    display: grid;
    place-items: center;
    min-width: 72px;
    height: 72px;
    padding: 0 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    animation: bh-bump-b-o37fd06rib 0.45s var(--ease-pop) both;
}

.bh-sign__glyph[b-o37fd06rib] {
    font-size: 56px;
    font-weight: 1000;
    line-height: 1;
    color: var(--c-city-2);
    text-shadow: 0 4px 0 #c23a0d;
    transform: translateY(-2px);
}

/* ---------- Sky ---------- */
.bh-sky[b-o37fd06rib] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 60%, #eaf8ff 100%);
    border: 4px solid #ffffff;
    box-shadow: inset 0 4px 10px rgba(30, 100, 160, 0.18);
    container-type: size;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bh-cloud[b-o37fd06rib] {
    position: absolute;
    width: 120px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.bh-cloud[b-o37fd06rib]::before,
.bh-cloud[b-o37fd06rib]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.bh-cloud[b-o37fd06rib]::before { left: 18px; top: -22px; width: 48px; height: 48px; }
.bh-cloud[b-o37fd06rib]::after { left: 52px; top: -30px; width: 58px; height: 58px; }

.bh-cloud--a[b-o37fd06rib] { left: 6%; top: 18%; }
.bh-cloud--b[b-o37fd06rib] { right: 4%; top: 62%; transform: scale(0.75); opacity: 0.8; }

/* A lane cell starts just below the sky and is at least as tall as it; rising by its own height plus a balloon
   carries the balloon from below the bottom edge to above the top edge. Balloons never spawn inside the sky (fill-mode
   both keeps a waiting balloon below the edge), and a lane's balloons share one speed and are spread evenly over the
   trip, so they never bunch or catch up. The 470 px floor keeps the spacing of BalloonRun.MaxPerLane balloons
   ((470 + 150) / 4 = 155 px) above a balloon's 128 px height on short phones too; the extra trip happens out of sight. */
.bh-lane[b-o37fd06rib] {
    position: absolute;
    top: 100%;
    left: calc(var(--lane) * 25%);
    width: 25%;
    height: max(100%, 470px);
    pointer-events: none;
    will-change: transform;
    animation-name: bh-rise-b-o37fd06rib;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    transition: opacity 0.4s ease;
}

.bh-lane.is-popped[b-o37fd06rib] {
    animation-play-state: paused;
}

.bh-lane[b-o37fd06rib]  .bb-balloon {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2.375em;
    pointer-events: auto;
}

/* Five balloons in a lane (BalloonStage.Dense, neighbourhood 5): (470 + 150) / 5 = 124 px apart, so a balloon is
   capped at 15 px/em = 120 px tall (still ≥ 63 px wide on a 360 px phone). */
.bh-sky--dense .bh-lane[b-o37fd06rib]  .bb-balloon {
    font-size: min(15px, calc((25cqw - 14px) / 4.75));
}

.bh-sky.is-clearing .bh-lane:not(.is-popped)[b-o37fd06rib] {
    opacity: 0;
}

/* The stage's first balloon waits in the middle of the sky, bobbing, until it is popped. */
.bh-park[b-o37fd06rib] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    animation: bh-bob-b-o37fd06rib 2.4s ease-in-out infinite alternate;
}

.bh-park[b-o37fd06rib]  .bb-balloon {
    position: absolute;
    left: 0;
    top: 0;
    margin: -4em 0 0 -2.375em;
}

@keyframes bh-rise-b-o37fd06rib {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% - 150px)); }
}

@keyframes bh-bob-b-o37fd06rib {
    from { transform: translateY(8px); }
    to { transform: translateY(-8px); }
}

@keyframes bh-sign-in-b-o37fd06rib {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes bh-bump-b-o37fd06rib {
    0% { transform: scale(0.9); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Short phones: a smaller sign leaves the sky its room. */
@media (max-height: 700px) {
    .bh-sign__tile[b-o37fd06rib] { min-width: 58px; height: 58px; border-radius: 20px; }
    .bh-sign__glyph[b-o37fd06rib] { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-sign[b-o37fd06rib],
    .bh-sign__tile[b-o37fd06rib],
    .bh-park[b-o37fd06rib] {
        animation: none !important;
    }
}
/* /City/LetterGames/Fishing/FishButton.razor.rz.scp.css */
/* A candy-style fish swimming left: glossy body with the letter, wagging tail, fin, eye. Sized in em (5.25 × 3.75):
   the font-size follows the lane (20cqh of the pond container, FishingRun.Lanes = 5) between 15 px (79 × 56 px, short phones) and 19 px
   (100 × 71 px; the lane keyframes assume a fish of at most 100 px). Only transform and opacity animate. */
.fh-fish[b-eqi9x9xh5h] {
    --f1: #ffc27a;
    --f2: #fb8c00;
    --edge: #a85300;
    position: relative;
    display: block;
    font-size: clamp(15px, calc((20cqh - 6px) / 3.75), 19px);
    width: 5.25em;
    height: 3.75em;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.fh-fish:disabled[b-eqi9x9xh5h] {
    cursor: default;
}

.fh-fish--c0[b-eqi9x9xh5h] { --f1: #ffc27a; --f2: #fb8c00; --edge: #a85300; }
.fh-fish--c1[b-eqi9x9xh5h] { --f1: #82c4ff; --f2: #1e88e5; --edge: #0d5aa8; }
.fh-fish--c2[b-eqi9x9xh5h] { --f1: #ffe082; --f2: #ffb300; --edge: #a86400; }
.fh-fish--c3[b-eqi9x9xh5h] { --f1: #ff9ec4; --f2: #e8437f; --edge: #a11a4e; }
.fh-fish--c4[b-eqi9x9xh5h] { --f1: #b6ec8e; --f2: #43a047; --edge: #23702a; }

.fh-fish__swim[b-eqi9x9xh5h] {
    position: absolute;
    inset: 0;
    animation: fh-bob-b-eqi9x9xh5h 1.7s ease-in-out infinite alternate;
}

.fh-fish__tail[b-eqi9x9xh5h] {
    position: absolute;
    right: 0;
    top: 0.6em;
    width: 1.5em;
    height: 2.55em;
    background: var(--f2);
    clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%);
    transform-origin: 0 50%;
    animation: fh-wag-b-eqi9x9xh5h 0.45s ease-in-out infinite alternate;
}

.fh-fish__fin[b-eqi9x9xh5h] {
    position: absolute;
    left: 1.5em;
    top: 0.05em;
    width: 1.5em;
    height: 0.8em;
    background: var(--f2);
    clip-path: polygon(0 100%, 40% 0, 100% 100%);
}

.fh-fish__body[b-eqi9x9xh5h] {
    position: absolute;
    left: 0;
    top: 0.35em;
    display: grid;
    place-items: center;
    width: 4.2em;
    height: 3.05em;
    border-radius: 58% 42% 42% 58% / 50% 50% 50% 50%;
    background: radial-gradient(circle at 34% 30%, var(--f1) 0%, var(--f2) 74%);
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 5px 9px rgba(10, 60, 100, 0.22);
}

.fh-fish__shine[b-eqi9x9xh5h] {
    position: absolute;
    left: 1em;
    top: 0.32em;
    width: 1.2em;
    height: 0.45em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: rotate(-12deg);
}

.fh-fish__glyph[b-eqi9x9xh5h] {
    position: relative;
    margin-left: 0.7em;
    font-size: 2.1em;
    font-weight: 1000;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 3px 0 var(--edge), 0 0 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.fh-fish__eye[b-eqi9x9xh5h] {
    position: absolute;
    left: 0.55em;
    top: 1.3em;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 45%, #2b1d14 0 34%, #ffffff 36%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Caught: the fish leaps out of the water and is gone; drops fly up. */
.fh-fish.is-caught .fh-fish__swim[b-eqi9x9xh5h] {
    animation: fh-leap-b-eqi9x9xh5h 0.5s ease-in forwards;
}

.fh-splash[b-eqi9x9xh5h] {
    position: absolute;
    left: 2.4em;
    top: 2.6em;
    width: 0;
    height: 0;
}

.fh-splash i[b-eqi9x9xh5h] {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 12px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #e3f6ff;
    border: 2px solid #ffffff;
    transform: rotate(var(--a));
    animation: fh-drop-b-eqi9x9xh5h 0.5s ease-out forwards;
}

/* A wrong letter: a quick „no“ shake and a dart forward, then it swims on. */
.fh-fish.is-wrong .fh-fish__swim[b-eqi9x9xh5h] {
    animation: fh-dart-b-eqi9x9xh5h 0.55s ease both;
}

@keyframes fh-bob-b-eqi9x9xh5h {
    from { transform: translateY(-3px); }
    to { transform: translateY(3px); }
}

@keyframes fh-wag-b-eqi9x9xh5h {
    from { transform: rotate(-12deg); }
    to { transform: rotate(12deg); }
}

@keyframes fh-leap-b-eqi9x9xh5h {
    0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    45% { transform: translateY(-2.4em) rotate(-24deg) scale(1.08); opacity: 1; }
    100% { transform: translateY(-3.4em) rotate(-40deg) scale(0.5); opacity: 0; }
}

@keyframes fh-drop-b-eqi9x9xh5h {
    0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-3em) scale(0.5); opacity: 0; }
}

@keyframes fh-dart-b-eqi9x9xh5h {
    0% { transform: translateX(0) rotate(0); }
    18% { transform: translateX(6px) rotate(6deg); }
    36% { transform: translateX(-6px) rotate(-6deg); }
    60% { transform: translateX(-26px) rotate(-3deg); }
    100% { transform: translateX(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fh-fish__swim[b-eqi9x9xh5h],
    .fh-fish__tail[b-eqi9x9xh5h] {
        animation: none;
    }
}
/* /City/LetterGames/Fishing/FishingGame.razor.rz.scp.css */
/* „Пецање слова“: target sign + pond inside the GameScreen panel. Only transform and opacity animate. */

/* ---------- Target sign: the letter to catch, big ---------- */
.fh-sign[b-fu9trl3ihr] {
    position: relative;
    flex: none;
    display: flex;
    justify-content: center;
    animation: fh-sign-in-b-fu9trl3ihr 0.5s var(--ease-pop) both;
}

.fh-sign__tile[b-fu9trl3ihr] {
    display: grid;
    place-items: center;
    min-width: 72px;
    height: 72px;
    padding: 0 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #eaf7ff 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #9fcde6, 0 9px 16px rgba(20, 70, 110, 0.18);
    animation: fh-bump-b-fu9trl3ihr 0.45s var(--ease-pop) both;
}

.fh-sign__glyph[b-fu9trl3ihr] {
    font-size: 56px;
    font-weight: 1000;
    line-height: 1;
    color: #1e88e5;
    text-shadow: 0 4px 0 #0d5aa8;
    transform: translateY(-2px);
}

/* ---------- Pond ---------- */
.fh-pond[b-fu9trl3ihr] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #8fdcf7 0%, #4fbbe8 45%, #2e98cf 100%);
    border: 4px solid #ffffff;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.25), inset 0 6px 14px rgba(10, 70, 120, 0.25), 0 5px 0 #7cc35f;
    container-type: size;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Ripples, lily pads and reeds: decoration under the fish. */
.fh-ripple[b-fu9trl3ihr] {
    position: absolute;
    width: 90px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
    animation: fh-ripple-b-fu9trl3ihr 3.4s ease-out infinite;
}

.fh-ripple--a[b-fu9trl3ihr] { left: 10%; top: 20%; }
.fh-ripple--b[b-fu9trl3ihr] { right: 8%; top: 56%; animation-delay: 1.2s; }
.fh-ripple--c[b-fu9trl3ihr] { left: 34%; top: 84%; animation-delay: 2.3s; }

.fh-pad[b-fu9trl3ihr] {
    position: absolute;
    width: 44px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent 0 28deg, #5cb85c 28deg 360deg);
    box-shadow: inset 0 -3px 0 rgba(30, 90, 30, 0.35);
    pointer-events: none;
}

.fh-pad--a[b-fu9trl3ihr] { left: -8px; top: 42%; transform: rotate(-20deg); }
.fh-pad--b[b-fu9trl3ihr] { right: -6px; top: 6%; transform: rotate(160deg) scale(0.85); }

.fh-pad--b i[b-fu9trl3ihr] {
    position: absolute;
    left: 14px;
    top: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe082 0 28%, #ff8fb8 30% 100%);
    transform: rotate(-160deg);
}

.fh-reeds[b-fu9trl3ihr] {
    position: absolute;
    left: 6px;
    bottom: -4px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    pointer-events: none;
}

.fh-reeds i[b-fu9trl3ihr] {
    display: block;
    width: 6px;
    height: 46px;
    border-radius: 3px;
    background: linear-gradient(180deg, #8d5a3b 0 22%, #5aa83f 22% 100%);
    transform-origin: 50% 100%;
    animation: fh-sway-b-fu9trl3ihr 3s ease-in-out infinite alternate;
}

.fh-reeds i:nth-child(2)[b-fu9trl3ihr] { height: 60px; animation-delay: 0.6s; }
.fh-reeds i:nth-child(3)[b-fu9trl3ihr] { height: 38px; animation-delay: 1.1s; }

/* A lane cell starts just right of the pond and is at least as wide as it; swimming left by its own width plus a fish
   carries the fish from beyond the right edge to beyond the left edge. Fish never spawn inside the pond (fill-mode
   both keeps a waiting fish outside), and a lane's fish share one speed and are spread evenly over the trip, so they
   never bunch or catch up. The 320 px floor keeps the spacing of FishingRun.MaxPerLane fish ((320 + 100) / 2 = 210 px)
   well above a fish's 100 px max width on narrow phones too; the extra trip happens out of sight. */
.fh-lane[b-fu9trl3ihr] {
    position: absolute;
    left: 100%;
    top: calc(var(--lane) * 20%);
    width: max(100%, 320px);
    height: 20%;
    pointer-events: none;
    will-change: transform;
    animation-name: fh-swim-b-fu9trl3ihr;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    transition: opacity 0.4s ease;
}

.fh-lane.is-caught[b-fu9trl3ihr] {
    animation-play-state: paused;
}

.fh-lane[b-fu9trl3ihr]  .fh-fish {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1.875em;
    pointer-events: auto;
}

.fh-pond.is-clearing .fh-lane:not(.is-caught)[b-fu9trl3ihr] {
    opacity: 0;
}

/* The cast's first fish waits in the middle of the pond, bobbing, until it is caught. */
.fh-park[b-fu9trl3ihr] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    animation: fh-park-b-fu9trl3ihr 2.4s ease-in-out infinite alternate;
}

.fh-park[b-fu9trl3ihr]  .fh-fish {
    position: absolute;
    left: 0;
    top: 0;
    margin: -1.875em 0 0 -2.625em;
}

@keyframes fh-swim-b-fu9trl3ihr {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 100px)); }
}

@keyframes fh-park-b-fu9trl3ihr {
    from { transform: translateX(-10px); }
    to { transform: translateX(10px); }
}

@keyframes fh-ripple-b-fu9trl3ihr {
    0% { transform: scale(0.4); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes fh-sway-b-fu9trl3ihr {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}

@keyframes fh-sign-in-b-fu9trl3ihr {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes fh-bump-b-fu9trl3ihr {
    0% { transform: scale(0.9); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Short phones: a smaller sign leaves the pond its room. */
@media (max-height: 700px) {
    .fh-sign__tile[b-fu9trl3ihr] { min-width: 58px; height: 58px; border-radius: 20px; }
    .fh-sign__glyph[b-fu9trl3ihr] { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-sign[b-fu9trl3ihr],
    .fh-sign__tile[b-fu9trl3ihr],
    .fh-park[b-fu9trl3ihr],
    .fh-ripple[b-fu9trl3ihr],
    .fh-reeds i[b-fu9trl3ihr] {
        animation: none !important;
    }
}
/* /City/LetterGames/Pictures/PictureIdentifyGame.razor.rz.scp.css */
/* „слике“: run bar, the big letter (the question), and a 3-wide grid of picture tiles sized from the board
   (container units). Tiles reuse the shared .g-tile / .g-check pieces of GameScreen. */
.pi-progress[b-gpxc0rc7k5] {
    flex: none;
    display: flex;
    justify-content: center;
}

.pi-play[b-gpxc0rc7k5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* ---------- The letter ---------- */
.pi-key[b-gpxc0rc7k5] {
    flex: none;
    align-self: center;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 24px 6px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.16);
    font-size: clamp(46px, 9.5vh, 92px);
    font-weight: 1000;
    line-height: 1;
    animation: pi-key-in-b-gpxc0rc7k5 0.5s var(--ease-pop) both;
}

.pi-key__upper[b-gpxc0rc7k5] {
    color: #f4511e;
    text-shadow: 0 4px 0 #c23a0d;
}

.pi-key__lower[b-gpxc0rc7k5] {
    font-size: 0.66em;
    color: #1e88e5;
    text-shadow: 0 3px 0 #155fb3;
}

/* ---------- Board ---------- */
.pi-board[b-gpxc0rc7k5] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.pi-grid[b-gpxc0rc7k5] {
    --cols: 3;
    --rows: 3;
    --gap: 10px;
    --tile: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        150px);
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.pi-grid--12[b-gpxc0rc7k5] {
    --rows: 4;
}

.pi-tile[b-gpxc0rc7k5] {
    overflow: visible;
}

.pi-pic[b-gpxc0rc7k5] {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 56%;
    height: 56%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The picture's name: shown on the first board from the start, elsewhere only once tapped. */
.pi-cap[b-gpxc0rc7k5] {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 6%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 1px 4px 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: min(calc(var(--tile) * 0.16), calc(var(--tile) * 1.4 / var(--len, 6)));
    font-weight: 900;
    line-height: 1.1;
    color: var(--c-text-soft);
    white-space: nowrap;
    pointer-events: none;
    animation: pi-cap-in-b-gpxc0rc7k5 0.35s var(--ease-pop) backwards;
}

.pi-cap.is-found[b-gpxc0rc7k5] {
    color: var(--c-text);
}

.pi-cap__first[b-gpxc0rc7k5] {
    font-size: 1.25em;
    color: var(--c-text);
}

.pi-cap__hit[b-gpxc0rc7k5] {
    font-size: 1.3em;
    color: #f4511e;
    text-shadow: 0 2px 0 rgba(194, 58, 13, 0.25);
}

/* Not this letter: stays named, faded, out of play (on the children: the tile's deal-in animation owns its opacity). */
.pi-tile.is-missed .pi-pic[b-gpxc0rc7k5],
.pi-tile.is-missed .pi-cap[b-gpxc0rc7k5] {
    opacity: 0.4;
}

.pi-tile.is-missed[b-gpxc0rc7k5] {
    box-shadow: 0 2px 0 #e6c597;
}

@keyframes pi-key-in-b-gpxc0rc7k5 {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes pi-cap-in-b-gpxc0rc7k5 {
    from { transform: translateY(6px) scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Wider than tall: 12 tiles as 4 x 3, centred under the letter. */
@media (min-aspect-ratio: 1/1) {
    .pi-grid--12[b-gpxc0rc7k5] {
        --cols: 4;
        --rows: 3;
    }
}

/* Landscape phone (too short for the letter above the pictures): it goes to the left, the pictures beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .pi-play[b-gpxc0rc7k5] {
        flex-direction: row;
        align-items: center;
    }

    /* Top-left, clear of the friend, who sits bottom-left on a short landscape screen. */
    .pi-key[b-gpxc0rc7k5] {
        align-self: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 6px 14px 8px;
        font-size: clamp(36px, 13vh, 80px);
    }

    .pi-board[b-gpxc0rc7k5] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pi-key[b-gpxc0rc7k5],
    .pi-cap[b-gpxc0rc7k5] {
        animation: none;
    }
}
/* /City/LetterGames/Tracing/LetterTracingGame.razor.rz.scp.css */
/* „Пиши слово“: the run bar, then one square drawing pad as big as the panel allows (400×400 guide units).
   Animations are transform / opacity only. */
.tg-progress[b-k5sx420olq] {
    flex: none;
    display: flex;
    justify-content: center;
}

/* The model: the solid letter on a small card above the pad. */
.tg-model[b-k5sx420olq] {
    flex: none;
    align-self: center;
    width: 64px;
    height: 64px;
    padding: 6px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 14px rgba(61, 42, 28, 0.16);
}

.tg-model svg[b-k5sx420olq] {
    display: block;
    width: 100%;
    height: 100%;
}

.tg-model path[b-k5sx420olq] {
    fill: none;
    stroke: #1e88e5;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tg-model circle[b-k5sx420olq] { fill: #1e88e5; }

@media (max-height: 560px) {
    .tg-model[b-k5sx420olq] { width: 48px; height: 48px; padding: 4px; border-radius: 14px; }
}

.tg-padbox[b-k5sx420olq] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.tg-pad[b-k5sx420olq] {
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.tg-pad.is-ok[b-k5sx420olq] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.tg-pad.is-low[b-k5sx420olq] {
    box-shadow: 0 5px 0 #f0a46b, 0 0 0 4px rgba(244, 144, 12, 0.4), 0 10px 20px rgba(230, 81, 0, 0.2);
    animation: tg-wiggle-b-k5sx420olq 0.45s ease-in-out;
}

.tg-svg[b-k5sx420olq] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Guide ---------- */
.tg-rule[b-k5sx420olq] {
    stroke: #cfe3f3;
    stroke-width: 3;
    stroke-linecap: round;
}

.tg-rule--x[b-k5sx420olq] {
    stroke-dasharray: 10 10;
}

/* The letter's faint shape: the corridor a stroke may wander in. */
.tg-body[b-k5sx420olq] {
    fill: #ffe8b6;
    stroke: #ffe8b6;
    stroke-width: 46;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tg-body path[b-k5sx420olq] {
    fill: none;
}

/* Strokes still to write: a row of dots (the one to write now in its colour). */
.tg-dots[b-k5sx420olq] {
    fill: none;
    stroke: #d9c7ad;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 16;
}

.tg-dots.is-now[b-k5sx420olq] {
    stroke: var(--c);
    stroke-width: 10;
}

/* Lighter guide: no shape, fainter dots. */
.is-light .tg-dots[b-k5sx420olq] {
    stroke: #e8dccb;
    stroke-width: 7;
}

.is-light .tg-dots.is-now[b-k5sx420olq] {
    stroke: var(--c);
    opacity: 0.6;
    stroke-width: 8;
}

/* Written strokes, locked in their colours. */
.tg-locked[b-k5sx420olq] {
    fill: none;
    stroke: var(--c);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tg-dot-done[b-k5sx420olq] {
    fill: var(--c);
}

/* The whole letter done: it bounces, with a warm glow under it. */
.tg-done[b-k5sx420olq] {
    transform-box: view-box;
    transform-origin: 50% 52%;
}

.tg-done.is-cheer[b-k5sx420olq] {
    animation: tg-bounce-b-k5sx420olq 0.9s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.tg-glow[b-k5sx420olq] {
    fill: #fff1a8;
    stroke: #fff1a8;
    stroke-width: 50;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: tg-glow-b-k5sx420olq 1.4s ease-out both;
}

.tg-glow path[b-k5sx420olq] {
    fill: none;
}

/* Order badges: the stroke's colour, one white pip per place. */
.tg-badge__disc[b-k5sx420olq] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 3.5;
}

.tg-badge__pip[b-k5sx420olq],
.tg-start__pip[b-k5sx420olq] {
    fill: #ffffff;
}

/* Where to start now: the green dot, gently pinging. */
.tg-start__disc[b-k5sx420olq] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 4.5;
}

.tg-start__in[b-k5sx420olq] {
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-pop-in-b-k5sx420olq 0.35s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.tg-start__ring[b-k5sx420olq] {
    fill: none;
    stroke: #43a047;
    stroke-width: 3.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-ping-b-k5sx420olq 1.6s ease-out infinite;
    pointer-events: none;
}

/* Which way: a small green chevron a little way along the stroke. */
.tg-arrow path[b-k5sx420olq] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tg-arrow__under[b-k5sx420olq] {
    stroke: #ffffff;
    stroke-width: 11;
}

.tg-arrow__head[b-k5sx420olq] {
    stroke: #2e7d32;
    stroke-width: 6;
}

/* Outline / dots rungs: plain start points of later strokes, and (dots) each stroke's end point, hollow. */
.tg-pt[b-k5sx420olq] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 4;
    opacity: 0.85;
}

.tg-pt--end[b-k5sx420olq] {
    fill: #ffffff;
    stroke: var(--c);
    stroke-width: 5;
}

/* Later strokes' arrows (full guide): their stroke colour, quieter than the one to write now. */
.tg-arrow--later[b-k5sx420olq] { opacity: 0.6; }
.tg-arrow--later .tg-arrow__head[b-k5sx420olq] { stroke: var(--c); stroke-width: 5; }

/* The finger's ink, in the colour of the stroke being written; green when it is right, fading when not. */
.tg-ink[b-k5sx420olq] {
    fill: none;
    stroke: var(--c);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.tg-pad.is-ok .tg-ink[b-k5sx420olq] {
    stroke: #43a047;
}

.tg-pad.is-low .tg-ink[b-k5sx420olq] {
    animation: tg-fade-b-k5sx420olq 0.5s ease-out forwards;
}

.tg-spark[b-k5sx420olq] {
    fill: #ffc93c;
    stroke: #f29f05;
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-spark-b-k5sx420olq 0.9s ease-out var(--d, 0ms) both;
    pointer-events: none;
}

/* The demo hand (fingertip on the stroke). */
.tg-demo[b-k5sx420olq] {
    pointer-events: none;
}

.tg-demo__hand[b-k5sx420olq] {
    font-size: 58px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

@keyframes tg-spark-b-k5sx420olq {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(40deg); opacity: 1; }
    100% { transform: scale(0.6) rotate(90deg); opacity: 0; }
}

@keyframes tg-bounce-b-k5sx420olq {
    0% { transform: scale(1); }
    30% { transform: scale(1.12) translateY(-10px); }
    55% { transform: scale(0.96); }
    75% { transform: scale(1.04) translateY(-3px); }
    100% { transform: scale(1); }
}

@keyframes tg-glow-b-k5sx420olq {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0.7; }
}

@keyframes tg-fade-b-k5sx420olq {
    to { opacity: 0; }
}

@keyframes tg-wiggle-b-k5sx420olq {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes tg-ping-b-k5sx420olq {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.3); opacity: 0; }
}

@keyframes tg-pop-in-b-k5sx420olq {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Short landscape: the run bar floats in the free space left of the pad, so the pad gets the panel's full height. */
@media (orientation: landscape) and (max-height: 560px) {
    .tg-progress[b-k5sx420olq] {
        position: absolute;
        z-index: 1;
        left: 16px;
        top: 16px;
        width: calc(50% - min(50vh, 160px) - 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-start__ring[b-k5sx420olq],
    .tg-pad.is-low[b-k5sx420olq],
    .tg-done.is-cheer[b-k5sx420olq] {
        animation: none;
    }
}
/* /City/LetterGames/UpperLower/UpperLowerGame.razor.rz.scp.css */
/* „Велико и мало слово“: the run bar and the model card on top (a fixed share of the panel, so the demo hand's
   % position lands on the centre tile on every phone), the letter grid below. Tiles are the shared g-tile. */
.ul-head[b-nt0g9q7wlk] {
    flex: 0 0 28%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ul-model-wrap[b-nt0g9q7wlk] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    container-type: size;
    display: grid;
    place-items: center;
}

/* The model: what to find, big, in the city colour (tiles stay brown, so the model never reads as a tile). */
.ul-model[b-nt0g9q7wlk] {
    --h: min(calc(100cqh - 8px), 150px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--h) * 0.14);
    height: var(--h);
    min-width: var(--h);
    padding: 0 calc(var(--h) * 0.2);
    border-radius: 28%/34%;
    border: 5px solid #ffffff;
    background: linear-gradient(180deg, #fff7ef 0%, #ffe3d3 100%);
    box-shadow: 0 6px 0 #f0a07e, 0 12px 20px rgba(61, 42, 28, 0.2);
    animation: ul-model-in-b-nt0g9q7wlk 0.55s var(--ease-pop) both;
}

.ul-model__glyph[b-nt0g9q7wlk] {
    font-family: var(--font-main);
    font-size: calc(var(--h) * 0.74);
    font-weight: 900;
    line-height: 1;
    color: var(--c-city-2);
    text-shadow: 0 3px 0 rgba(194, 58, 13, 0.18);
}

/* Magnifier badge: "look for this". */
.ul-model__lens[b-nt0g9q7wlk] {
    position: absolute;
    left: calc(var(--h) * -0.16);
    top: calc(var(--h) * -0.12);
    display: grid;
    place-items: center;
    width: calc(var(--h) * 0.4);
    height: calc(var(--h) * 0.4);
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, var(--c-city-1) 0%, var(--c-city-2) 100%);
    box-shadow: 0 3px 0 #c23a0d;
    font-size: calc(var(--h) * 0.2);
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---------- Board ---------- */
.ul-board[b-nt0g9q7wlk] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.ul-grid[b-nt0g9q7wlk] {
    --n: 3;
    --gap: 12px;
    --tile: min(
        calc((100cqw - (var(--n) - 1) * var(--gap) - 8px) / var(--n)),
        calc((100cqh - (var(--n) - 1) * var(--gap) - 10px) / var(--n)),
        130px);
    display: grid;
    grid-template-columns: repeat(var(--n), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.ul-grid--4[b-nt0g9q7wlk] {
    --n: 4;
    --gap: 10px;
}

.ul-grid--5[b-nt0g9q7wlk] {
    --n: 5;
    --gap: 8px;
}

/* A quicker, diagonal deal than the shared 50 ms per tile (--i is row + column). */
.ul-tile:not(.is-picked):not(.is-wrong):not(.is-cheer)[b-nt0g9q7wlk] {
    animation-delay: calc(var(--i, 0) * 45ms) !important;
}

/* The same font size for every tile, so a small letter really looks smaller than its capital. */
.ul-glyph[b-nt0g9q7wlk] {
    font-family: var(--font-main);
    font-size: calc(var(--tile) * 0.6);
    font-weight: 900;
    line-height: 1;
    color: var(--c-text);
    pointer-events: none;
}

.ul-tile.is-picked .ul-glyph[b-nt0g9q7wlk] {
    color: #2e7d32;
}

/* Board cleared: the found tiles hop together. */
.ul-tile.is-cheer[b-nt0g9q7wlk] {
    animation: ul-cheer-b-nt0g9q7wlk 0.6s var(--ease-pop) calc(var(--i, 0) * 40ms) both !important;
}

@keyframes ul-model-in-b-nt0g9q7wlk {
    0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes ul-cheer-b-nt0g9q7wlk {
    0%, 100% { transform: none; }
    45% { transform: translateY(-10px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ul-model[b-nt0g9q7wlk],
    .ul-tile.is-cheer[b-nt0g9q7wlk] {
        animation: none !important;
    }
}
/* /City/Pages/CityMap.razor.rz.scp.css */
/* City map: HUD band / header / one neighbourhood per screen (swipe) / page dots / friend strip. No page scroll. */
.city[b-e30dw8cz6r] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding:
        calc(var(--safe-top) + var(--hud-top-h)) calc(var(--safe-right) + 10px)
        calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 10px);
}

.city__viewport[b-e30dw8cz6r] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -10px;
    overflow: hidden;
    touch-action: none;
}

.city__pages[b-e30dw8cz6r],
.city__track[b-e30dw8cz6r] {
    height: 100%;
}

.city__track[b-e30dw8cz6r] {
    display: flex;
    transform: translateX(calc(var(--page) * -100% + var(--drag, 0px)));
    transition: transform 0.45s var(--ease-out);
    will-change: transform;
}

.city__track.is-dragging[b-e30dw8cz6r] {
    transition: none;
}

.quarter[b-e30dw8cz6r] {
    flex: 0 0 100%;
    height: 100%;
    padding: 4px 10px;
}

/* ---------- Street (lawn + winding road). Container units size the houses to the box. ---------- */
.street[b-e30dw8cz6r] {
    position: relative;
    height: 100%;
    container-type: size;
    border-radius: var(--radius-l);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #a8e08a 0%, #8fd16a 45%, #7cc35f 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #5fae45, 0 10px 22px rgba(61, 42, 28, 0.2);
}

.street[b-e30dw8cz6r]  .house {
    --w: min(31cqw, 22cqh);
}

.street__road[b-e30dw8cz6r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.street__road path[b-e30dw8cz6r] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.street__road-edge[b-e30dw8cz6r] { stroke: #c7b39a; stroke-width: 38px; }
.street__road-top[b-e30dw8cz6r] { stroke: #efe3cf; stroke-width: 30px; }
.street__road-line[b-e30dw8cz6r] { stroke: #ffffff; stroke-width: 4px; stroke-dasharray: 10 12; }

.street__tree[b-e30dw8cz6r] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: min(11cqw, 8cqh);
    aspect-ratio: 1 / 1.25;
    transform: translate(-50%, -100%);
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 38%, #66bb6a 0 38%, transparent 39%),
        linear-gradient(#8d6e63, #8d6e63) 50% 100% / 18% 34% no-repeat;
    filter: drop-shadow(0 3px 0 rgba(46, 125, 50, 0.45));
}

.street__tree--1[b-e30dw8cz6r] { background: radial-gradient(circle at 50% 38%, #9ccc65 0 38%, transparent 39%), linear-gradient(#8d6e63, #8d6e63) 50% 100% / 18% 34% no-repeat; }
.street__tree--2[b-e30dw8cz6r] { background: radial-gradient(circle at 50% 38%, #4caf50 0 38%, transparent 39%), linear-gradient(#8d6e63, #8d6e63) 50% 100% / 18% 34% no-repeat; }

.quarter--locked .street[b-e30dw8cz6r] {
    background: linear-gradient(180deg, #cfd8c8 0%, #b9c7b0 100%);
    box-shadow: 0 5px 0 #98a68f, 0 10px 22px rgba(61, 42, 28, 0.2);
}

.quarter--locked .street__road[b-e30dw8cz6r],
.quarter--locked .street__tree[b-e30dw8cz6r] {
    filter: grayscale(0.8);
}

/* ---------- Park page: the review stops along a path, the river with its stepping stones across the top ---------- */
.street--park[b-e30dw8cz6r] {
    background:
        radial-gradient(circle at 18% 22%, #ffffff 0 3px, transparent 3.5px),
        radial-gradient(circle at 82% 52%, #ffd23f 0 3px, transparent 3.5px),
        radial-gradient(circle at 12% 64%, #ff7eb6 0 3px, transparent 3.5px),
        radial-gradient(circle at 88% 80%, #ffffff 0 3px, transparent 3.5px),
        radial-gradient(circle at 40% 96%, #ffd23f 0 3px, transparent 3.5px),
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #9ad97c 0%, #86cc63 45%, #73bd55 100%);
}

/* The park path: pale paving with a row of stepping-stone dots. */
.park__path-edge[b-e30dw8cz6r] { stroke: #d9c8ad; stroke-width: 34px; }
.park__path-top[b-e30dw8cz6r] { stroke: #f6eddc; stroke-width: 27px; }
.park__path-dots[b-e30dw8cz6r] { stroke: #e6d6b8; stroke-width: 8px; stroke-dasharray: 0.1 16; }

/* Flower beds in the bottom corners. */
.park__bed[b-e30dw8cz6r] {
    position: absolute;
    bottom: 2%;
    width: 16cqw;
    height: 7cqh;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 40%, #ff7eb6 0 9%, transparent 10%),
        radial-gradient(circle at 55% 30%, #ffd23f 0 9%, transparent 10%),
        radial-gradient(circle at 75% 60%, #ffffff 0 8%, transparent 9%),
        radial-gradient(circle at 40% 70%, #ff8a65 0 8%, transparent 9%),
        #5fae45;
    box-shadow: 0 3px 0 rgba(46, 125, 50, 0.45);
    pointer-events: none;
}

.park__bed--a[b-e30dw8cz6r] { left: 3%; }
.park__bed--b[b-e30dw8cz6r] { right: 3%; bottom: 14%; }

/* The river: a band across the park's middle (33–45 %, the map's ParkSpots keep clear of it), four stops below it
   and the two word stops beyond it; wider than a tap target needs, so the stones read well. */
.street--park[b-e30dw8cz6r]  .stop--river {
    top: 33%;
    height: max(12%, 56px);
    border-radius: 0;
}

/* Tokens: centred on their spot, ≥ 64 px on a 360 × 640 phone (the zigzag leaves 24 % between two on one side). */
.street--park[b-e30dw8cz6r]  .stop--token {
    left: var(--x);
    top: var(--y);
    width: min(24cqw, 15cqh);
    transform: translate(-50%, -50%);
}

/* The stop's CTA: the shared arrow in the path's middle, pointing sideways at the token, or up at the river. */
.park__hint[b-e30dw8cz6r] {
    position: absolute;
    z-index: 10;
    left: var(--x);
    top: var(--y);
    width: clamp(40px, 12cqw, 56px);
    aspect-ratio: 48 / 56;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.city__park-icon[b-e30dw8cz6r] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 30px;
    line-height: 1;
}

/* ---------- "The current house is over there": the shared CTA arrow at the edge (it does its own bounce) ---------- */
.city__beckon[b-e30dw8cz6r] {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 84px;
    margin: -42px 0 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.city__beckon--next[b-e30dw8cz6r] { right: 4px; }
.city__beckon--prev[b-e30dw8cz6r] { left: 4px; }

.city__beckon-arrow[b-e30dw8cz6r] {
    display: block;
    width: 54px;
    aspect-ratio: 48 / 56;
}

.city__beckon:active .city__beckon-arrow[b-e30dw8cz6r] { transform: scale(0.9); }

.city__beckon-friend[b-e30dw8cz6r] {
    position: absolute;
    top: -22px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #e6c597, 0 5px 10px rgba(61, 42, 28, 0.22);
    font-size: 22px;
    line-height: 1;
}

/* ---------- Neighbourhood dots ---------- */
.city__nav[b-e30dw8cz6r] {
    position: relative;
    z-index: var(--z-stage);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
}

.city__step[b-e30dw8cz6r] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 9px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    color: #ffffff;
    background: linear-gradient(180deg, var(--c-city-1) 0%, var(--c-city-2) 100%);
    box-shadow: 0 4px 0 #c23a0d, 0 6px 12px rgba(61, 42, 28, 0.22);
    cursor: pointer;
    transition: transform 0.3s var(--ease-pop), opacity 0.2s;
}

.city__step svg[b-e30dw8cz6r] { display: block; width: 100%; height: 100%; }
.city__step:active[b-e30dw8cz6r] { transform: translateY(3px) scale(0.92); transition-duration: 0.07s; }
.city__step:disabled[b-e30dw8cz6r] { opacity: 0.35; cursor: default; }

.city__dots[b-e30dw8cz6r] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* One pill per neighbourhood (44 px tap target): left half = street, right half = park. Each half is coloured by its
   state (grey locked, orange open, green done); the page shown is the white-ringed half of the bigger pill. */
.city__dot[b-e30dw8cz6r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 40px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.3s var(--ease-pop);
}

.city__dot.is-active[b-e30dw8cz6r] {
    transform: scale(1.15);
}

.city__half[b-e30dw8cz6r] {
    display: block;
    width: 16px;
    height: 22px;
    border: 2px solid #ffffff;
    background: #d9cfc4;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.3s var(--ease-pop);
}

.city__half:first-child[b-e30dw8cz6r] { border-radius: 11px 3px 3px 11px; }
.city__half:last-child[b-e30dw8cz6r] { border-radius: 3px 11px 11px 3px; }

.city__half--open[b-e30dw8cz6r] { background: var(--c-city-2); }
.city__half--done[b-e30dw8cz6r] { background: #43a047; }

.city__half.is-here[b-e30dw8cz6r] {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px #3d2a1c, 0 2px 0 rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .city__track[b-e30dw8cz6r] { transition: none; }
}

/* ---------- Hint overlay (friend + "go here" arrow): one layer above all houses ---------- */
.street__hints[b-e30dw8cz6r] {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

/* Same box as the house it points at (position, width and ratio), so the old offsets still apply. */
.hint[b-e30dw8cz6r] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: min(31cqw, 22cqh);
    aspect-ratio: 100 / 112;
    transform: translate(-50%, -78%);
}

.hint__friend[b-e30dw8cz6r] {
    position: absolute;
    bottom: -6%;
    width: 46%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #e6c597, 0 6px 10px rgba(61, 42, 28, 0.25);
    font-size: clamp(20px, 7vw, 32px);
    line-height: 1;
    animation: hint-friend-b-e30dw8cz6r 1.2s ease-in-out infinite;
}

.hint__friend--right[b-e30dw8cz6r] { right: -34%; }
.hint__friend--left[b-e30dw8cz6r] { left: -34%; }

/* The screen's one CTA: big shared arrow over the current house's roof (it does its own bounce). */
.hint__arrow[b-e30dw8cz6r] {
    position: absolute;
    left: 50%;
    top: -38%;
    width: max(38%, 30px);
    aspect-ratio: 48 / 56;
    margin-left: calc(max(38%, 30px) / -2);
}

@keyframes hint-friend-b-e30dw8cz6r {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hint__friend[b-e30dw8cz6r] { animation: none !important; }
}
/* /City/Pages/LetterGamePlaceholder.razor.rz.scp.css */
/* „Ускоро!“ stand-in for a letter game (look of ComingSoonPanel, centred card instead of a bottom sheet). */
.lp[b-r8zyrp4c0t] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding:
        calc(var(--safe-top) + var(--hud-top-h)) calc(var(--safe-right) + 10px)
        calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 10px);
}

.lp__stage[b-r8zyrp4c0t] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
}

.lp__card[b-r8zyrp4c0t] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(360px, 100%);
    padding: 20px 20px 22px;
    border-radius: var(--radius-l);
    background: var(--c-surface);
    border: 4px solid #ffffff;
    box-shadow: 0 6px 0 #e6c597, 0 16px 34px rgba(61, 42, 28, 0.25);
    animation: lp-in-b-r8zyrp4c0t 0.5s var(--ease-pop) both;
}

.lp__letter[b-r8zyrp4c0t] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: min(96px, 12vh);
    font-weight: 1000;
    line-height: 1;
    color: #f4511e;
    text-shadow: 0 5px 0 #c23a0d;
}

.lp__letter small[b-r8zyrp4c0t] { font-size: 0.62em; color: #1e88e5; text-shadow: 0 4px 0 #155fb3; }

.lp__tile[b-r8zyrp4c0t] {
    --size: min(120px, 15vh);
    --edge: 8px;
    position: relative;
    width: var(--size);
    height: calc(var(--size) + var(--edge));
}

.lp__tile-base[b-r8zyrp4c0t],
.lp__tile-face[b-r8zyrp4c0t] {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--size);
    border-radius: 32%;
    border: 4px solid #ffffff;
}

.lp__tile-base[b-r8zyrp4c0t] {
    top: var(--edge);
    background: #c23a0d;
    box-shadow: 0 8px 16px rgba(61, 42, 28, 0.3);
}

.lp__tile-face[b-r8zyrp4c0t] {
    top: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--c-city-1) 0%, var(--c-city-2) 100%);
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12);
}

.lp__tile-art[b-r8zyrp4c0t] {
    display: grid;
    width: 74%;
    height: 74%;
}

.lp__ribbon[b-r8zyrp4c0t] {
    position: absolute;
    left: 62%;
    top: -14px;
    padding: 5px 13px 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ff74a0 0%, #ff3d7a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #c2185b, 0 6px 12px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(150, 10, 60, 0.45);
    transform: rotate(8deg);
}

.lp__friend[b-r8zyrp4c0t] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px 8px 10px;
    border-radius: 18px;
    background: #fff1d9;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
}

.lp__friend-emoji[b-r8zyrp4c0t] {
    flex: none;
    font-size: 36px;
    line-height: 1;
}

.lp__done[b-r8zyrp4c0t] {
    position: relative;
    width: min(220px, 80%);
}

.lp__done[b-r8zyrp4c0t]  .candy__icon { font-size: 34px; }

.lp__hand[b-r8zyrp4c0t] {
    position: absolute;
    right: -10px;
    bottom: -18px;
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
    animation: lp-tap-b-r8zyrp4c0t 1.4s ease-in-out 0.8s infinite both;
    pointer-events: none;
}

.lp__earned[b-r8zyrp4c0t] {
    position: absolute;
    left: 50%;
    top: 34%;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
    pointer-events: none;
}

.lp__star[b-r8zyrp4c0t] {
    width: 58px;
    height: 58px;
    filter: grayscale(1) opacity(0.45);
    animation: lp-star-b-r8zyrp4c0t 0.55s var(--ease-pop) var(--d) both;
}

.lp__star.is-on[b-r8zyrp4c0t] { filter: drop-shadow(0 4px 6px rgba(201, 106, 5, 0.45)); }

@keyframes lp-in-b-r8zyrp4c0t {
    from { transform: scale(0.7) translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes lp-tap-b-r8zyrp4c0t {
    0%, 100% { transform: translate(10px, 18px); opacity: 0.9; }
    45%, 60% { transform: translate(0, 0) scale(0.9); opacity: 1; }
}

@keyframes lp-star-b-r8zyrp4c0t {
    from { transform: scale(0.2) rotate(-40deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lp__card[b-r8zyrp4c0t], .lp__hand[b-r8zyrp4c0t], .lp__star[b-r8zyrp4c0t] { animation: none !important; }
}
/* /City/Pages/LetterScreen.razor.rz.scp.css */
/* Letter screen: HUD / header / one big house whose four windows are the letter's games (LetterHouse) / friend strip.
   Phone landscape: header and friend strip share the first row, so the (long) house gets all the height below. */
.ls[b-d578p4azc9] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding:
        calc(var(--safe-top) + var(--hud-top-h)) calc(var(--safe-right) + 10px)
        calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 10px);
}

.ls__plate-letter[b-d578p4azc9] {
    font-size: 26px;
    font-weight: 1000;
    color: #ffffff;
    text-shadow: 0 2px 0 #c23a0d;
}

/* The house sizes itself from this box (container "lsstage"). */
.ls__stage[b-d578p4azc9] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: end center;
    container: lsstage / size;
}

@media (orientation: landscape) and (max-height: 560px) {
    .ls[b-d578p4azc9] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px 12px;
        align-items: center;
    }

    .ls[b-d578p4azc9]  .ch { grid-column: 1; grid-row: 1; }
    .ls[b-d578p4azc9]  .cbd { grid-column: 2; grid-row: 1; }

    .ls__stage[b-d578p4azc9] {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: stretch;
    }
}

/* ---------- Mastery celebration: the house parties first (door, confetti), then the sheet pops in ---------- */
.lc[b-d578p4azc9] {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: calc(var(--safe-top) + var(--hud-top-h)) 16px calc(var(--safe-bottom) + 90px);
    animation: lc-hold-b-d578p4azc9 1.9s steps(1, end) both;
}

.lc__backdrop[b-d578p4azc9] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255, 236, 160, 0.85) 0%, rgba(61, 42, 28, 0.55) 75%);
    animation: lc-fade-b-d578p4azc9 0.4s ease 1.9s both;
}

.lc__burst[b-d578p4azc9] {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0;
    height: 0;
}

.lc__spark[b-d578p4azc9] {
    position: absolute;
    width: 34px;
    height: 34px;
    margin: -17px;
    animation: lc-spark-b-d578p4azc9 1.6s var(--ease-out) calc(2s + var(--d)) infinite both;
}

.lc__sheet[b-d578p4azc9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(340px, 100%);
    padding: 22px 20px 20px;
    border-radius: var(--radius-l);
    background: var(--c-surface);
    border: 4px solid #ffffff;
    box-shadow: 0 6px 0 #e6c597, 0 18px 40px rgba(61, 42, 28, 0.35);
    animation: lc-pop-b-d578p4azc9 0.6s var(--ease-pop) 1.9s both;
}

.lc__letter[b-d578p4azc9] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 104px;
    font-weight: 1000;
    line-height: 1;
    color: #f4511e;
    text-shadow: 0 5px 0 #c23a0d;
    animation: lc-bounce-b-d578p4azc9 1.2s ease-in-out 2.5s infinite;
}

.lc__letter small[b-d578p4azc9] { font-size: 64px; color: #1e88e5; text-shadow: 0 4px 0 #155fb3; }

.lc__chip[b-d578p4azc9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff3b0 0%, var(--c-gold) 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #e98a0c;
    font-size: 26px;
    font-weight: 1000;
    color: #8a4b00;
}

.lc__chip-star[b-d578p4azc9] { width: 30px; height: 30px; }

.lc__friend[b-d578p4azc9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
}

.lc__friend-face[b-d578p4azc9] {
    flex: none;
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #e6c597;
    animation: lc-dance-b-d578p4azc9 0.9s ease-in-out infinite;
}

/* The one CTA: the ▶ button with the city's arrow bobbing above it. */
.lc__go[b-d578p4azc9] {
    position: relative;
    width: 100%;
    margin-top: 34px;
}

.lc__cta[b-d578p4azc9] {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 8px);
    width: 50px;
    aspect-ratio: 48 / 56;
    margin-left: -25px;
    z-index: 1;
}

@keyframes lc-hold-b-d578p4azc9 {
    from { visibility: hidden; }
    to { visibility: visible; }
}

@keyframes lc-fade-b-d578p4azc9 { from { opacity: 0; } }

@keyframes lc-pop-b-d578p4azc9 {
    from { transform: scale(0.5) translateY(30px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes lc-bounce-b-d578p4azc9 {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-10px) rotate(-4deg); }
    60% { transform: translateY(0) rotate(3deg); }
}

@keyframes lc-dance-b-d578p4azc9 {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-10px) rotate(-12deg); }
    75% { transform: translateY(-10px) rotate(12deg); }
}

@keyframes lc-spark-b-d578p4azc9 {
    0% { transform: rotate(var(--a)) translateY(0) scale(0.3); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-46vmin) scale(1); opacity: 0; }
}

/* Short landscape screens: the sheet lies down (letter left, the rest right). */
@media (orientation: landscape) and (max-height: 560px) {
    .lc[b-d578p4azc9] { padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 12px); }

    .lc__sheet[b-d578p4azc9] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "letter chip" "letter friend" "letter go";
        align-items: center;
        justify-items: center;
        gap: 8px 18px;
        width: min(560px, 100%);
        padding: 16px 20px;
    }

    .lc__letter[b-d578p4azc9] { grid-area: letter; font-size: 96px; }
    .lc__letter small[b-d578p4azc9] { font-size: 58px; }
    .lc__chip[b-d578p4azc9] { grid-area: chip; }
    .lc__friend[b-d578p4azc9] { grid-area: friend; font-size: 16px; }
    .lc__go[b-d578p4azc9] { grid-area: go; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .lc__letter[b-d578p4azc9], .lc__friend-face[b-d578p4azc9], .lc__spark[b-d578p4azc9] { animation: none !important; }
    .lc[b-d578p4azc9] { animation-duration: 0.8s; }
    .lc__sheet[b-d578p4azc9], .lc__backdrop[b-d578p4azc9] { animation-duration: 0.01s !important; animation-delay: 0.8s !important; }
}
/* /City/Review/Colouring/ColouringArt.razor.rz.scp.css */
/* Gentle life in the colouring scenes: seaweed sways, bubbles drift up, the sun breathes. Transform and opacity only. */
.ca-weed[b-jrqlzwuidi] {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ca-sway-b-jrqlzwuidi 3.2s ease-in-out infinite alternate;
}

.ca-weed--b[b-jrqlzwuidi] {
    animation-duration: 2.6s;
    animation-delay: -1.2s;
}

.ca-bubbles[b-jrqlzwuidi] {
    animation: ca-rise-b-jrqlzwuidi 3.6s ease-in-out infinite alternate;
}

.ca-sun[b-jrqlzwuidi] {
    transform-box: fill-box;
    transform-origin: center;
    animation: ca-breathe-b-jrqlzwuidi 2.8s ease-in-out infinite alternate;
}

.ca-flower[b-jrqlzwuidi] {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ca-sway-b-jrqlzwuidi 2.9s ease-in-out infinite alternate;
}

@keyframes ca-sway-b-jrqlzwuidi {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

@keyframes ca-rise-b-jrqlzwuidi {
    from { transform: translateY(4px); opacity: 0.8; }
    to { transform: translateY(-6px); opacity: 1; }
}

@keyframes ca-breathe-b-jrqlzwuidi {
    from { transform: scale(0.94); }
    to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-weed[b-jrqlzwuidi],
    .ca-bubbles[b-jrqlzwuidi],
    .ca-sun[b-jrqlzwuidi],
    .ca-flower[b-jrqlzwuidi] {
        animation: none;
    }
}
/* /City/Review/Colouring/ColouringGame.razor.rz.scp.css */
/* „Боји по слову“: the picture (SVG + letter badges) and the paint pots under it, inside the GameScreen panel.
   Only transform, opacity and SVG fill animate. */

/* ---------- The picture ---------- */
/* Picture and pots stay together, centred in the panel: no gap opens between them on tall phones. */
.cl-stage[b-p83g6jd9lp] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    container-type: size;
}

/* The largest 5 : 4 card that fits the stage above the pots (96 px + gap); badges are placed in % of it and sized
   in its cqw. */
.cl-pic[b-p83g6jd9lp] {
    position: relative;
    flex: none;
    width: min(100cqw - 8px, (100cqh - 112px) * 1.25);
    aspect-ratio: 5 / 4;
    border-radius: 24px;
    background: #fff7ea;
    box-shadow: 0 0 0 4px #fff7ea, 0 6px 0 4px #e6c597, 0 14px 26px rgba(61, 42, 28, 0.22);
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: cl-pic-in-b-p83g6jd9lp 0.55s var(--ease-pop) both;
}

.cl-svg[b-p83g6jd9lp] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.cl-pic.is-done[b-p83g6jd9lp] {
    animation: cl-admire-b-p83g6jd9lp 0.9s var(--ease-pop) both;
}

/* A shine sweeps over the finished picture. */
.cl-pic.is-done[b-p83g6jd9lp]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(105deg, rgba(255, 248, 230, 0) 30%, rgba(255, 248, 230, 0.7) 50%, rgba(255, 248, 230, 0) 70%);
    background-size: 250% 100%;
    pointer-events: none;
    animation: cl-sweep-b-p83g6jd9lp 1.1s 0.2s ease-in-out both;
}

/* Unpainted parts are paper; a wrong tap flushes the part. */
.cl-region[b-p83g6jd9lp] {
    cursor: pointer;
}

.cl-region.is-wrong[b-p83g6jd9lp] {
    animation: cl-flush-b-p83g6jd9lp 0.55s ease-in-out both;
}

/* The paint: a disc of colour grows from the part's letter until the part is full (slow start, so even small parts
   visibly fill), a cream splash ring flies out, then a soft gloss settles on top. */
.cl-paint[b-p83g6jd9lp] {
    transform-box: fill-box;
    transform-origin: center;
    animation: cl-spread-b-p83g6jd9lp 0.95s cubic-bezier(0.5, 0, 0.9, 0.6) both;
}

.cl-splat[b-p83g6jd9lp] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: cl-splat-b-p83g6jd9lp 0.55s var(--ease-out) both;
}

.cl-gloss[b-p83g6jd9lp] {
    opacity: 0;
    animation: cl-fade-in-b-p83g6jd9lp 0.5s 0.45s ease-out forwards;
}

/* ---------- Letter badges (also tap targets for their part) ---------- */
.cl-badge[b-p83g6jd9lp] {
    position: absolute;
    display: grid;
    place-items: center;
    width: max(32px, 11.5cqw);
    height: max(32px, 11.5cqw);
    margin: 0;
    padding: 0;
    border: 3px solid #fff3dc;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #fffaf0 0%, #ffe6bf 100%);
    box-shadow: 0 3px 0 rgba(109, 64, 38, 0.45), 0 5px 10px rgba(61, 42, 28, 0.2);
    transform: translate(-50%, -50%);
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* A bigger invisible finger pad around the badge. */
.cl-badge[b-p83g6jd9lp]::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}

.cl-badge__glyph[b-p83g6jd9lp] {
    font-size: max(19px, 7cqw);
    font-weight: 1000;
    line-height: 1;
    color: #5a3418;
    transform: translateY(-1px);
}

.cl-badge.is-wrong[b-p83g6jd9lp] {
    background: radial-gradient(circle at 40% 30%, #fff1ec 0%, #ffc9b8 100%);
    animation: cl-badge-shake-b-p83g6jd9lp 0.5s ease-in-out both;
}

.cl-badge.is-painted[b-p83g6jd9lp] {
    pointer-events: none;
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.cl-badge.is-painted .cl-badge__glyph[b-p83g6jd9lp] {
    animation: cl-badge-out-b-p83g6jd9lp 0.5s var(--ease-out) forwards;
}

.cl-badge__burst[b-p83g6jd9lp] {
    position: absolute;
    left: 50%;
    top: 50%;
}

.cl-badge__burst i[b-p83g6jd9lp] {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--paint);
    box-shadow: 0 0 0 2px #fff8e6;
    opacity: 0;
    animation: cl-drop-b-p83g6jd9lp 0.65s var(--ease-out) both;
}

.cl-badge__burst i:nth-child(odd)[b-p83g6jd9lp] {
    width: 7px;
    height: 7px;
    animation-delay: 0.05s;
}

/* ---------- Paint pots ---------- */
.cl-pots[b-p83g6jd9lp] {
    position: relative;
    z-index: 2;
    flex: none;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    height: 96px;
    padding-top: 10px;
}

.cl-pot[b-p83g6jd9lp] {
    --rim: color-mix(in srgb, var(--paint) 68%, #3d2a1c);
    position: relative;
    flex: none;
    width: 66px;
    height: 84px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), opacity 0.3s ease;
}

.cl-pot:disabled[b-p83g6jd9lp] {
    cursor: default;
}

.cl-pot__jar[b-p83g6jd9lp] {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 64px;
    border-radius: 14px 14px 22px 22px;
    background:
        linear-gradient(90deg, rgba(255, 248, 230, 0.35) 0%, rgba(255, 248, 230, 0) 38%, rgba(61, 42, 28, 0.12) 100%),
        var(--paint);
    box-shadow: inset 0 -6px 0 rgba(61, 42, 28, 0.16), 0 4px 0 var(--rim), 0 8px 12px rgba(61, 42, 28, 0.22);
    transition: box-shadow 0.25s ease;
}

.cl-pot__rim[b-p83g6jd9lp] {
    position: absolute;
    left: -4px;
    right: -4px;
    top: -7px;
    height: 15px;
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--paint) 80%, #fff8e6) 0%, var(--rim) 100%);
    box-shadow: 0 2px 0 rgba(61, 42, 28, 0.18);
}

.cl-pot__drip[b-p83g6jd9lp] {
    position: absolute;
    left: 9px;
    top: 4px;
    width: 9px;
    height: 16px;
    border-radius: 0 0 6px 6px;
    background: var(--paint);
    box-shadow: inset -2px -2px 0 rgba(61, 42, 28, 0.15);
}

.cl-pot__label[b-p83g6jd9lp] {
    position: absolute;
    left: 50%;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #fffaf0 0%, #ffe6bf 100%);
    box-shadow: 0 2px 0 rgba(61, 42, 28, 0.25);
    transform: translateX(-50%);
}

.cl-pot__glyph[b-p83g6jd9lp] {
    font-size: 27px;
    font-weight: 1000;
    line-height: 1;
    color: #5a3418;
    transform: translateY(-1px);
}

/* The brush in the held pot: wooden handle up, bristles dipped in the paint. */
.cl-pot__brush[b-p83g6jd9lp] {
    position: absolute;
    right: 8px;
    top: -26px;
    width: 9px;
    height: 46px;
    border-radius: 5px;
    background: linear-gradient(90deg, #c68642 0%, #a0623a 100%);
    transform-origin: 50% 100%;
    transform: rotate(18deg) translateY(16px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.35s var(--ease-pop);
}

.cl-pot__brush i[b-p83g6jd9lp] {
    position: absolute;
    left: -2px;
    bottom: -8px;
    width: 13px;
    height: 16px;
    border-radius: 3px 3px 7px 7px;
    background: linear-gradient(180deg, #d9d2c5 0 30%, var(--paint) 30% 100%);
}

.cl-pot.is-held[b-p83g6jd9lp] {
    transform: translateY(-10px);
}

.cl-pot.is-held .cl-pot__jar[b-p83g6jd9lp] {
    box-shadow:
        inset 0 -6px 0 rgba(61, 42, 28, 0.16), 0 4px 0 var(--rim),
        0 0 0 4px #fff3dc, 0 0 0 8px var(--paint), 0 10px 18px rgba(61, 42, 28, 0.3);
}

.cl-pot.is-held .cl-pot__brush[b-p83g6jd9lp] {
    opacity: 1;
    transform: rotate(18deg) translateY(0);
}

.cl-pot.is-done[b-p83g6jd9lp] {
    opacity: 0.55;
}

.cl-pot__tick[b-p83g6jd9lp] {
    position: absolute;
    right: -4px;
    top: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8bd36a 0%, #43a047 100%);
    border: 2px solid #f4ffe9;
    color: #f4ffe9;
    font-size: 15px;
    font-weight: 1000;
    line-height: 1;
    animation: cl-pop-in-b-p83g6jd9lp 0.4s var(--ease-pop) both;
}

.cl-pot.is-shake0[b-p83g6jd9lp] { animation: cl-pot-shake-a-b-p83g6jd9lp 0.45s ease-in-out both; }
.cl-pot.is-shake1[b-p83g6jd9lp] { animation: cl-pot-shake-b-b-p83g6jd9lp 0.45s ease-in-out both; }

.cl-pot__cta[b-p83g6jd9lp] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    width: 42px;
    height: 50px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* ---------- Motion ---------- */
@keyframes cl-pic-in-b-p83g6jd9lp {
    from { opacity: 0; transform: translateX(30%) rotate(4deg) scale(0.9); }
    to { opacity: 1; transform: none; }
}

@keyframes cl-admire-b-p83g6jd9lp {
    0% { transform: none; }
    30% { transform: scale(1.05) rotate(-1.5deg); }
    60% { transform: scale(1.02) rotate(1deg); }
    100% { transform: none; }
}

@keyframes cl-sweep-b-p83g6jd9lp {
    from { background-position: 100% 0; opacity: 1; }
    to { background-position: -50% 0; opacity: 1; }
}

@keyframes cl-flush-b-p83g6jd9lp {
    0%, 100% { fill: #fdf3e1; }
    30%, 70% { fill: #f7c4b6; }
}

@keyframes cl-spread-b-p83g6jd9lp {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes cl-splat-b-p83g6jd9lp {
    0% { opacity: 0.95; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(1.7); }
}

@keyframes cl-fade-in-b-p83g6jd9lp {
    to { opacity: 1; }
}

@keyframes cl-badge-shake-b-p83g6jd9lp {
    0%, 100% { transform: translate(-50%, -50%); }
    20% { transform: translate(calc(-50% - 6px), -50%) rotate(-8deg); }
    40% { transform: translate(calc(-50% + 5px), -50%) rotate(8deg); }
    60% { transform: translate(calc(-50% - 4px), -50%) rotate(-5deg); }
    80% { transform: translate(calc(-50% + 3px), -50%) rotate(3deg); }
}

@keyframes cl-badge-out-b-p83g6jd9lp {
    0% { opacity: 1; transform: scale(1); }
    35% { opacity: 1; transform: scale(1.35); }
    100% { opacity: 0; transform: scale(0.2); }
}

@keyframes cl-drop-b-p83g6jd9lp {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-34px) scale(0.5); }
}

@keyframes cl-pop-in-b-p83g6jd9lp {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cl-pot-shake-a-b-p83g6jd9lp {
    0%, 100% { transform: translateY(-10px); }
    25% { transform: translateY(-10px) rotate(-9deg); }
    50% { transform: translateY(-10px) rotate(8deg); }
    75% { transform: translateY(-10px) rotate(-4deg); }
}

@keyframes cl-pot-shake-b-b-p83g6jd9lp {
    0%, 100% { transform: translateY(-10px); }
    25% { transform: translateY(-10px) rotate(-9deg); }
    50% { transform: translateY(-10px) rotate(8deg); }
    75% { transform: translateY(-10px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-pic[b-p83g6jd9lp],
    .cl-pic.is-done[b-p83g6jd9lp],
    .cl-region.is-wrong[b-p83g6jd9lp],
    .cl-badge.is-wrong[b-p83g6jd9lp],
    .cl-pot.is-shake0[b-p83g6jd9lp],
    .cl-pot.is-shake1[b-p83g6jd9lp] {
        animation: none;
    }

    .cl-paint[b-p83g6jd9lp] {
        animation-duration: 0.01s;
    }
}
/* /City/Review/ComposeWords/ComposeWordsGame.razor.rz.scp.css */
/* „Састави речи“: run bar, then a grid of rows: the word's picture slot, the first-syllable card, the gap the line
   crosses and the second-syllable card. The finger layer (an SVG, 0–100 both ways, stretched) covers the two card
   columns and the gap in the fractions 3 : 2 : 3, so a card's edge is at 37.5 / 62.5 and a row's middle at
   (row + 0.5) / rows. Rows have no gap (the cards carry the spacing). Only transform and opacity animate. */
.cw-progress[b-7u01v3pp2i] {
    flex: none;
    display: flex;
    justify-content: center;
}

.cw-board[b-7u01v3pp2i] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.cw-pairs[b-7u01v3pp2i] {
    /* Row height: fills the board, never under the 56 px tap floor (+ 8 px spacing), never taller than 104 px. */
    --row: max(64px, min(calc(100cqh / var(--rows)), 104px));
    position: relative;
    display: grid;
    grid-template-columns: clamp(52px, 17cqw, 88px) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: repeat(var(--rows), var(--row));
    column-gap: 0;
    width: min(100cqw, 520px);
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Picture slot: a faint ring until the word is built, then its picture pops in ---------- */
.cw-pic[b-7u01v3pp2i] {
    grid-column: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(calc(var(--row) - 12px), 15cqw, 80px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.28);
}

.cw-pic.is-on[b-7u01v3pp2i] {
    border: 4px solid #ffffff;
    background: radial-gradient(circle at 35% 28%, #ffffff 0%, var(--t1) 75%);
    box-shadow: 0 4px 0 var(--edge), 0 8px 12px rgba(61, 42, 28, 0.18);
    animation: cw-pic-in-b-7u01v3pp2i 0.55s var(--ease-pop) both;
}

.cw-pic img[b-7u01v3pp2i] {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    pointer-events: none;
}

/* ---------- Cards ---------- */
.cw-card[b-7u01v3pp2i] {
    --t1: #fffdf4;
    --t2: #ffeccc;
    --edge: #e0b77c;
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    margin: 4px 0;
    padding: 0;
    border-radius: 22px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
    box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(61, 42, 28, 0.16);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), box-shadow 0.2s ease;
    animation: cw-deal-b-7u01v3pp2i 0.45s var(--ease-pop) calc(var(--i, 0) * 45ms) both;
}

.cw-card--l[b-7u01v3pp2i] { grid-column: 2; }
.cw-card--r[b-7u01v3pp2i] { grid-column: 4; }

.cw-card:disabled[b-7u01v3pp2i] {
    cursor: default;
}

.cw-card__text[b-7u01v3pp2i] {
    font-size: min(calc(var(--row) * 0.44), 10cqw, 48px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #e65100;
    text-shadow: 0 3px 0 rgba(191, 54, 12, 0.2);
    pointer-events: none;
}

/* Picked (tap by tap): lifted, with a sunny ring. */
.cw-card.is-picked[b-7u01v3pp2i] {
    --t1: #fff7c2;
    --t2: #ffe680;
    --edge: #e0a800;
    animation: none; /* the deal-in's fill would otherwise pin transform to none */
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 0 4px #ffc93c, 0 7px 0 var(--edge), 0 12px 18px rgba(120, 80, 20, 0.22);
}

/* The other column bobs while a card is picked: „now over here“. */
.cw-pairs.is-picking-l .cw-card--r:not(:disabled)[b-7u01v3pp2i],
.cw-pairs.is-picking-r .cw-card--l:not(:disabled)[b-7u01v3pp2i] {
    animation: cw-bob-b-7u01v3pp2i 0.9s ease-in-out infinite alternate;
}

.cw-card.is-wrong[b-7u01v3pp2i] {
    --t1: #ffe9d6;
    --t2: #ffcfa8;
    --edge: #f0a46b;
    animation: cw-shake-b-7u01v3pp2i 0.5s ease both;
}

.cw-card.is-joined[b-7u01v3pp2i] {
    animation: cw-pop-b-7u01v3pp2i 0.45s var(--ease-pop) both;
}

.cw-card.is-joined .cw-card__text[b-7u01v3pp2i] {
    color: var(--ink);
    text-shadow: none;
}

/* The whole board built: every built card does a little hop together. */
.cw-pairs.is-clear .cw-card.is-joined[b-7u01v3pp2i],
.cw-pairs.is-clear .cw-pic.is-on[b-7u01v3pp2i] {
    animation: cw-cheer-b-7u01v3pp2i 0.8s var(--ease-pop) both;
}

/* ---------- Finger layer: ropes of built words and the ink while drawing ---------- */
.cw-layer[b-7u01v3pp2i] {
    position: relative;
    z-index: 2;
    grid-column: 2 / 5;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    touch-action: none;
    cursor: crosshair;
}

.cw-rope[b-7u01v3pp2i] {
    fill: none;
    stroke: var(--rope);
    stroke-width: 8px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    animation: cw-rope-in-b-7u01v3pp2i 0.35s ease-out both;
    pointer-events: none;
}

/* The finger's line: thick, in the colour the next word will get. */
.cw-ink[b-7u01v3pp2i] {
    fill: none;
    stroke: var(--rope);
    stroke-width: 16px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.85;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Word colours: card fill, edge, text, picture ring and rope. */
.cw-card--c0[b-7u01v3pp2i], .cw-pic--c0[b-7u01v3pp2i], .cw-rope--c0[b-7u01v3pp2i] { --t1: #ffe0d4; --t2: #ffbca5; --edge: #e8825f; --ink: #bf360c; --rope: #f4511e; }
.cw-card--c1[b-7u01v3pp2i], .cw-pic--c1[b-7u01v3pp2i], .cw-rope--c1[b-7u01v3pp2i] { --t1: #d8eeff; --t2: #acd8ff; --edge: #5aa7e0; --ink: #0d47a1; --rope: #1e88e5; }
.cw-card--c2[b-7u01v3pp2i], .cw-pic--c2[b-7u01v3pp2i], .cw-rope--c2[b-7u01v3pp2i] { --t1: #e2f7d6; --t2: #bde9a6; --edge: #7cc35f; --ink: #1b5e20; --rope: #43a047; }
.cw-card--c3[b-7u01v3pp2i], .cw-pic--c3[b-7u01v3pp2i], .cw-rope--c3[b-7u01v3pp2i] { --t1: #fff3c4; --t2: #ffe27f; --edge: #e0b000; --ink: #8d5b00; --rope: #f9a825; }
.cw-card--c4[b-7u01v3pp2i], .cw-pic--c4[b-7u01v3pp2i], .cw-rope--c4[b-7u01v3pp2i] { --t1: #f1def8; --t2: #dcb8ee; --edge: #b07ccb; --ink: #6a1b9a; --rope: #8e24aa; }
.cw-card--c5[b-7u01v3pp2i], .cw-pic--c5[b-7u01v3pp2i], .cw-rope--c5[b-7u01v3pp2i] { --t1: #d4f4f0; --t2: #a6e6de; --edge: #4fb5a8; --ink: #00695c; --rope: #00897b; }

@keyframes cw-deal-b-7u01v3pp2i {
    from { transform: translateY(14px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes cw-bob-b-7u01v3pp2i {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

@keyframes cw-pop-b-7u01v3pp2i {
    0% { transform: scale(0.88); }
    55% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes cw-cheer-b-7u01v3pp2i {
    0%, 100% { transform: none; }
    40% { transform: translateY(-8px) scale(1.06); }
}

@keyframes cw-pic-in-b-7u01v3pp2i {
    0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.18) rotate(6deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes cw-shake-b-7u01v3pp2i {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes cw-rope-in-b-7u01v3pp2i {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-card[b-7u01v3pp2i],
    .cw-pic.is-on[b-7u01v3pp2i],
    .cw-rope[b-7u01v3pp2i],
    .cw-pairs.is-clear .cw-card.is-joined[b-7u01v3pp2i],
    .cw-pairs.is-clear .cw-pic.is-on[b-7u01v3pp2i],
    .cw-pairs.is-picking-l .cw-card--r:not(:disabled)[b-7u01v3pp2i],
    .cw-pairs.is-picking-r .cw-card--l:not(:disabled)[b-7u01v3pp2i] {
        animation: none;
    }
}
/* /City/Review/EggPainting/EggPaintingGame.razor.rz.scp.css */
/* „Шарање јаја“: the letter sign, the eggs on a gingham tablecloth and the basket, inside the GameScreen panel.
   Only transform and opacity animate. */

/* ---------- Sign: the letter to find, big ---------- */
.eg-sign[b-wsqqw49hex] {
    flex: none;
    display: flex;
    justify-content: center;
}

.eg-sign__tile[b-wsqqw49hex] {
    display: grid;
    place-items: center;
    min-width: 72px;
    height: 72px;
    padding: 0 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffbf1 0%, #ffe9d6 100%);
    border: 4px solid #fff3e6;
    box-shadow: 0 5px 0 #f0a07a, 0 9px 16px rgba(160, 60, 20, 0.18);
    animation: eg-bump-b-wsqqw49hex 0.45s var(--ease-pop) both;
}

.eg-sign__glyph[b-wsqqw49hex] {
    font-size: 56px;
    font-weight: 1000;
    line-height: 1;
    color: #e8501a;
    text-shadow: 0 4px 0 #a8360b;
    transform: translateY(-2px);
}

@media (max-height: 700px) {
    .eg-sign__tile[b-wsqqw49hex] {
        min-width: 62px;
        height: 62px;
        border-radius: 20px;
    }

    .eg-sign__glyph[b-wsqqw49hex] {
        font-size: 46px;
    }
}

/* ---------- Table: a spring gingham cloth ---------- */
.eg-table[b-wsqqw49hex] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 138, 101, 0.16) 0 18px, rgba(255, 138, 101, 0) 18px 36px),
        repeating-linear-gradient(0deg, rgba(255, 138, 101, 0.16) 0 18px, rgba(255, 138, 101, 0) 18px 36px),
        #fff3e6;
    border: 4px solid #fff7ee;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.25), inset 0 -8px 16px rgba(160, 60, 20, 0.08), 0 5px 0 #f0c3a0;
    container-type: size;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Eggs: the largest that fit (width and height), 56–104 px wide; 3 or 4 in a row, 5 as 3 + 2. */
.eg-eggs[b-wsqqw49hex] {
    --gap: 10px;
    --egg-w: clamp(56px,
        min(calc((100cqw - 24px - (var(--per-row) - 1) * var(--gap)) / var(--per-row)),
            calc((100cqh - 20px - (var(--rows) - 1) * var(--gap)) / var(--rows) / 1.3)),
        104px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    width: calc(var(--per-row) * var(--egg-w) + (var(--per-row) - 1) * var(--gap));
}

.eg-egg[b-wsqqw49hex] {
    position: relative;
    flex: none;
    width: var(--egg-w);
    height: calc(var(--egg-w) * 1.3);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 92%;
    animation: eg-egg-in-b-wsqqw49hex 0.5s calc(var(--i) * 70ms) var(--ease-pop) backwards;
    transition: opacity 0.35s ease, transform 0.35s var(--ease-pop);
}

.eg-egg:disabled[b-wsqqw49hex] {
    cursor: default;
}

/* A soft shadow on the cloth. */
.eg-egg[b-wsqqw49hex]::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -3px;
    height: 10%;
    border-radius: 50%;
    background: rgba(160, 60, 20, 0.18);
}

.eg-egg__art[b-wsqqw49hex] {
    position: absolute;
    inset: 0;
    display: block;
    filter: drop-shadow(0 3px 0 rgba(160, 90, 40, 0.25));
}

.eg-egg__glyph[b-wsqqw49hex] {
    position: absolute;
    left: 50%;
    top: 55.4%;
    font-size: calc(var(--egg-w) * 0.4);
    font-weight: 1000;
    line-height: 1;
    color: #5a3418;
    transform: translate(-50%, -52%);
}

.eg-egg:active:not(:disabled) .eg-egg__art[b-wsqqw49hex] {
    transform: scale(0.95);
}

.eg-egg.is-wrong[b-wsqqw49hex] {
    animation: eg-wobble-b-wsqqw49hex 0.5s ease-in-out both;
}

.eg-egg.is-faded[b-wsqqw49hex] {
    opacity: 0.4;
    transform: scale(0.9);
}

.eg-egg.is-painted[b-wsqqw49hex] {
    animation: eg-dip-b-wsqqw49hex 1.4s ease-in-out both;
    z-index: 1;
}

/* Sparkles in the dye's colour around the fresh egg. */
.eg-egg__burst[b-wsqqw49hex] {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.eg-egg__burst i[b-wsqqw49hex] {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    background: var(--paint);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: eg-spark-b-wsqqw49hex 0.75s 0.75s var(--ease-out) both;
}

.eg-egg__burst i:nth-child(even)[b-wsqqw49hex] {
    background: #ffd54f;
    animation-delay: 0.85s;
}

/* ---------- Basket ---------- */
.eg-basket[b-wsqqw49hex] {
    position: relative;
    flex: none;
    align-self: center;
    width: min(100%, 280px);
    height: 78px;
}

.eg-basket__handle[b-wsqqw49hex] {
    position: absolute;
    left: 16%;
    right: 16%;
    top: 0;
    height: 74px;
    border: 7px solid #a0623a;
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.eg-basket__back[b-wsqqw49hex] {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 28px;
    height: 22px;
    border-radius: 50%;
    background: #7a4a26;
}

.eg-basket__egg[b-wsqqw49hex] {
    position: absolute;
    left: calc(5% + var(--slot) * 8.7%);
    bottom: calc(22px + var(--lift));
    width: 30px;
    height: 39px;
    transform: rotate(var(--tilt));
}

.eg-basket__egg.is-new[b-wsqqw49hex] {
    animation: eg-into-basket-b-wsqqw49hex 0.6s var(--ease-pop) both;
}

.eg-basket__front[b-wsqqw49hex] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    border-top: 6px solid #d9995a;
    border-radius: 10px 10px 28px 28px;
    background:
        repeating-linear-gradient(180deg, rgba(110, 60, 20, 0) 0 9px, rgba(110, 60, 20, 0.22) 9px 11px),
        repeating-linear-gradient(90deg, #c68642 0 12px, #b5763a 12px 24px);
    box-shadow: inset 0 -5px 0 rgba(90, 50, 20, 0.2), 0 5px 10px rgba(61, 42, 28, 0.22);
}

/* ---------- Motion ---------- */
@keyframes eg-bump-b-wsqqw49hex {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes eg-egg-in-b-wsqqw49hex {
    from { opacity: 0; transform: translateY(18px) scale(0.6); }
    to { opacity: 1; transform: none; }
}

@keyframes eg-wobble-b-wsqqw49hex {
    0%, 100% { transform: none; }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}

/* The egg dips (squash), comes up dyed, does a happy hop. */
@keyframes eg-dip-b-wsqqw49hex {
    0% { transform: none; }
    12% { transform: translateY(6px) scale(1.06, 0.92); }
    45% { transform: translateY(0) scale(1.08); }
    65% { transform: translateY(-14px) scale(1.08) rotate(-4deg); }
    80% { transform: translateY(0) scale(1.06) rotate(3deg); }
    100% { transform: scale(1.06); }
}

@keyframes eg-spark-b-wsqqw49hex {
    0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.6); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--egg-w) * -0.85)) scale(1.1); }
}

@keyframes eg-into-basket-b-wsqqw49hex {
    0% { opacity: 0; transform: translateY(-110px) rotate(0deg) scale(1.5); }
    70% { opacity: 1; transform: translateY(4px) rotate(var(--tilt)) scale(0.95); }
    100% { transform: rotate(var(--tilt)); }
}

@media (prefers-reduced-motion: reduce) {
    .eg-egg[b-wsqqw49hex],
    .eg-egg.is-wrong[b-wsqqw49hex],
    .eg-egg.is-painted[b-wsqqw49hex],
    .eg-basket__egg.is-new[b-wsqqw49hex],
    .eg-sign__tile[b-wsqqw49hex] {
        animation: none;
    }
}
/* /City/Review/EggPainting/PaintedEgg.razor.rz.scp.css */
/* A drawn Easter egg. A fresh one is dipped: the dye rises over the shell with a wavy edge, then the pattern draws itself
   (lines) and pops on (dots, leaves, rosettes, stars), then the shine settles. Transform, opacity and stroke offset only. */
.pe[b-9kuj4bd3wr] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pe--fresh .pe-dye[b-9kuj4bd3wr] {
    animation: pe-dip-b-9kuj4bd3wr 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

.pe--fresh .pe-line[b-9kuj4bd3wr] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pe-draw-b-9kuj4bd3wr 0.55s 0.55s ease-out forwards;
}

.pe--fresh .pe-pop[b-9kuj4bd3wr] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: pe-pop-b-9kuj4bd3wr 0.4s calc(0.6s + var(--d, 0ms)) var(--ease-pop) forwards;
}

.pe--fresh .pe-shade[b-9kuj4bd3wr] {
    opacity: 0;
    animation: pe-fade-b-9kuj4bd3wr 0.4s 0.4s ease-out forwards;
}

@keyframes pe-dip-b-9kuj4bd3wr {
    from { transform: translateY(140px); }
    to { transform: translateY(-10px); }
}

@keyframes pe-draw-b-9kuj4bd3wr {
    to { stroke-dashoffset: 0; }
}

@keyframes pe-pop-b-9kuj4bd3wr {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pe-fade-b-9kuj4bd3wr {
    to { opacity: 1; }
}

/* An egg that is not fresh shows its dye in place. */
.pe:not(.pe--fresh) .pe-dye[b-9kuj4bd3wr] {
    transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
    .pe--fresh .pe-dye[b-9kuj4bd3wr],
    .pe--fresh .pe-line[b-9kuj4bd3wr],
    .pe--fresh .pe-pop[b-9kuj4bd3wr],
    .pe--fresh .pe-shade[b-9kuj4bd3wr] {
        animation-duration: 0.01s;
        animation-delay: 0s;
    }
}
/* /City/Review/FindLetter/FindLetterGame.razor.rz.scp.css */
/* „Нађи слово“: a city building with letter windows inside the GameScreen panel. The roof sign shows the letter;
   found windows light up warm yellow. Only transform and opacity animate. */

/* ---------- The lot: sky, clouds and the ground the building stands on ---------- */
.fl-lot[b-47i7rkddw2] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 14px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(255, 246, 214, 0.6) 0%, rgba(255, 246, 214, 0) 70%),
        linear-gradient(180deg, #a9dcfa 0%, #d4efff 70%, #e4f5e0 100%);
    border: 4px solid #fff7ea;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.22), 0 5px 0 #e6c597;
    container-type: size;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.fl-cloud[b-47i7rkddw2] {
    position: absolute;
    width: 74px;
    height: 24px;
    border-radius: 999px;
    background: #fdfaf2;
    opacity: 0.85;
    pointer-events: none;
    animation: fl-drift-b-47i7rkddw2 9s ease-in-out infinite alternate;
}

.fl-cloud[b-47i7rkddw2]::before {
    content: "";
    position: absolute;
    left: 14px;
    top: -14px;
    width: 34px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
}

.fl-cloud--a[b-47i7rkddw2] { left: 6%; top: 7%; }
.fl-cloud--b[b-47i7rkddw2] { right: 4%; top: 18%; width: 56px; animation-delay: -4s; }

/* The building stands in the middle of the lot (so the demo hand's window sits at the same height on every phone);
   the lawn runs along the bottom. */
.fl-ground[b-47i7rkddw2] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, #8fd16a 0%, #5fae45 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3);
}

/* Bushes on the ground, left and right of the building. */
.fl-ground i[b-47i7rkddw2] {
    position: absolute;
    bottom: 8px;
    width: 34px;
    height: 24px;
    border-radius: 50% 50% 40% 40%;
    background: radial-gradient(circle at 40% 35%, #a5df7e 0%, #5fae45 75%);
}

.fl-ground i:nth-child(1)[b-47i7rkddw2] { left: 2%; }
.fl-ground i:nth-child(2)[b-47i7rkddw2] { left: calc(2% + 22px); width: 26px; height: 18px; }
.fl-ground i:nth-child(3)[b-47i7rkddw2] { right: 3%; }

/* ---------- The building ---------- */
/* One tile size for the whole building: the largest square that fits the lot (width and height), 56–88 px. 4 × 4
   windows fit a 360 px phone at 56+ px; the roof slims down on short screens. */
.fl-house[b-47i7rkddw2] {
    --roof-h: 80px;
    --gap: 8px;
    --pad: 10px;
    --tile: clamp(56px,
        min(calc((100cqw - 2 * var(--pad) - 16px - (var(--cols) - 1) * var(--gap)) / var(--cols)),
            calc((100cqh - var(--roof-h) - 2 * var(--pad) - 14px - (var(--rows) - 1) * var(--gap)) / var(--rows))),
        88px);
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fl-house-in-b-47i7rkddw2 0.55s var(--ease-pop) both;
}

@container (max-height: 380px) {
    .fl-house[b-47i7rkddw2] {
        --roof-h: 64px;
        --gap: 6px;
        --pad: 8px;
    }
}

.fl-house.is-clear[b-47i7rkddw2] {
    animation: fl-house-hop-b-47i7rkddw2 0.7s var(--ease-pop) both;
}

/* Roof: a terracotta gable with the letter sign in it, and a chimney. */
.fl-roof[b-47i7rkddw2] {
    position: relative;
    display: grid;
    place-items: end center;
    width: calc(var(--cols) * var(--tile) + (var(--cols) - 1) * var(--gap) + 2 * var(--pad) + 28px);
    height: var(--roof-h);
    margin-bottom: -2px;
}

.fl-roof__gable[b-47i7rkddw2] {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 12px, rgba(110, 30, 10, 0.18) 12px 15px),
        linear-gradient(180deg, #f0643a 0%, #c23a0d 100%);
    clip-path: polygon(50% 0, 100% 86%, 100% 100%, 0 100%, 0 86%);
    border-radius: 6px;
}

.fl-roof__chimney[b-47i7rkddw2] {
    position: absolute;
    right: 18%;
    top: 10%;
    width: 22px;
    height: 40%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #a1471f 0%, #c45a2a 100%);
    box-shadow: inset 0 5px 0 #7d3416;
}

.fl-roof__sign[b-47i7rkddw2] {
    position: relative;
    display: grid;
    place-items: center;
    min-width: calc(var(--roof-h) - 18px);
    height: calc(var(--roof-h) - 18px);
    margin-bottom: 6px;
    padding: 0 10px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffbf1 0%, #ffe9c7 100%);
    border: 4px solid #fff3dc;
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.25);
    animation: fl-bump-b-47i7rkddw2 0.45s var(--ease-pop) both;
}

.fl-roof__glyph[b-47i7rkddw2] {
    font-size: calc(var(--roof-h) - 34px);
    font-weight: 1000;
    line-height: 1;
    color: #e8501a;
    text-shadow: 0 3px 0 #a8360b;
    transform: translateY(-2px);
}

/* Wall: warm city orange with a soft brick pattern. */
.fl-wall[b-47i7rkddw2] {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    padding: var(--pad);
    border-radius: 6px 6px 0 0;
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 15px, rgba(150, 60, 20, 0.12) 15px 17px),
        linear-gradient(180deg, #ffb488 0%, #ff8a65 100%);
    box-shadow: inset 0 -6px 0 rgba(160, 60, 20, 0.18), 0 6px 0 rgba(61, 42, 28, 0.12);
}

/* The pavement the building stands on. */
.fl-house[b-47i7rkddw2]::after {
    content: "";
    width: calc(100% + 24px);
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(180deg, #e9c48f 0%, #d4a86c 100%);
    box-shadow: 0 3px 0 rgba(61, 42, 28, 0.15);
}

/* ---------- A window ---------- */
.fl-win[b-47i7rkddw2] {
    position: relative;
    display: block;
    width: var(--tile);
    height: var(--tile);
    margin: 0;
    padding: 5px 5px 9px;
    border: 0;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, #fff1dc 0%, #ffdcb0 100%);
    box-shadow: 0 3px 0 #d98a52;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    transition: transform 0.25s var(--ease-pop);
}

.fl-win:active:not(:disabled)[b-47i7rkddw2] {
    transform: translateY(2px) scale(0.95);
    transition-duration: 0.06s;
}

.fl-win:disabled[b-47i7rkddw2] {
    cursor: default;
}

.fl-win__glass[b-47i7rkddw2] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, #8fd3ff 0%, #4fb0ea 100%);
    box-shadow: inset 0 3px 0 rgba(20, 70, 110, 0.25);
}

.fl-win__shine[b-47i7rkddw2] {
    position: absolute;
    left: -30%;
    top: -10%;
    width: 46%;
    height: 140%;
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(24deg);
}

.fl-win__glyph[b-47i7rkddw2] {
    position: relative;
    font-size: calc(var(--tile) * 0.52);
    font-weight: 1000;
    line-height: 1;
    color: #173f66;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

.fl-win__sill[b-47i7rkddw2] {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 7px;
    border-radius: 4px;
    background: #c96a3c;
}

/* Lit: warm light behind the glass, a ✓ badge, a burst of sparks. */
.fl-win.is-lit[b-47i7rkddw2] {
    animation: fl-pop-b-47i7rkddw2 0.45s var(--ease-pop) both;
}

.fl-win.is-lit .fl-win__glass[b-47i7rkddw2] {
    background: radial-gradient(circle at 50% 40%, #fff3b0 0%, #ffd54f 55%, #ffb300 100%);
    box-shadow: inset 0 3px 0 rgba(160, 90, 0, 0.25), 0 0 18px 4px rgba(255, 200, 60, 0.75);
}

.fl-win.is-lit .fl-win__glyph[b-47i7rkddw2] {
    color: #8a4b00;
}

.fl-win__tick[b-47i7rkddw2] {
    position: absolute;
    right: -6px;
    top: -6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8bd36a 0%, #43a047 100%);
    border: 2px solid #f4ffe9;
    color: #f4ffe9;
    font-size: 14px;
    font-weight: 1000;
    line-height: 1;
    animation: fl-tick-b-47i7rkddw2 0.4s 0.1s var(--ease-pop) both;
}

.fl-win__burst[b-47i7rkddw2] {
    position: absolute;
    left: 50%;
    top: 45%;
    pointer-events: none;
}

.fl-win__burst i[b-47i7rkddw2] {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd54f;
    box-shadow: 0 0 0 2px #fff4c2;
    transform: rotate(var(--a)) translateY(0);
    opacity: 0;
    animation: fl-spark-b-47i7rkddw2 0.6s var(--ease-out) both;
}

.fl-win.is-wrong[b-47i7rkddw2] {
    animation: fl-rattle-b-47i7rkddw2 0.5s ease-in-out both;
}

.fl-win.is-wrong .fl-win__glass[b-47i7rkddw2] {
    background: linear-gradient(180deg, #b7c6d8 0%, #8ea3bd 100%);
}

/* The building is done: every lit window twinkles. */
.fl-house.is-clear .fl-win.is-lit .fl-win__glass[b-47i7rkddw2] {
    animation: fl-twinkle-b-47i7rkddw2 0.5s ease-in-out 2 alternate both;
}

.fl-house.is-clear .fl-win:not(.is-lit)[b-47i7rkddw2] {
    opacity: 0.65;
    transition: opacity 0.4s ease;
}

/* ---------- Motion ---------- */
@keyframes fl-house-in-b-47i7rkddw2 {
    from { opacity: 0; transform: translateX(40%) scale(0.92); }
    to { opacity: 1; transform: none; }
}

@keyframes fl-house-hop-b-47i7rkddw2 {
    0% { transform: none; }
    35% { transform: translateY(-10px) scale(1.03); }
    65% { transform: translateY(0) scale(0.99); }
    100% { transform: none; }
}

@keyframes fl-bump-b-47i7rkddw2 {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes fl-pop-b-47i7rkddw2 {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes fl-tick-b-47i7rkddw2 {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fl-spark-b-47i7rkddw2 {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--tile) * -0.75)) scale(0.4); }
}

@keyframes fl-rattle-b-47i7rkddw2 {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px) rotate(-3deg); }
    40% { transform: translateX(5px) rotate(3deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(3px) rotate(1deg); }
}

@keyframes fl-twinkle-b-47i7rkddw2 {
    from { opacity: 1; }
    to { opacity: 0.72; }
}

@keyframes fl-drift-b-47i7rkddw2 {
    from { transform: translateX(0); }
    to { transform: translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .fl-house[b-47i7rkddw2],
    .fl-house.is-clear[b-47i7rkddw2],
    .fl-win.is-lit[b-47i7rkddw2],
    .fl-win.is-wrong[b-47i7rkddw2],
    .fl-cloud[b-47i7rkddw2],
    .fl-roof__sign[b-47i7rkddw2] {
        animation: none;
    }
}
/* /City/Review/Leaves/AutumnTree.razor.rz.scp.css */
/* The autumn tree: SVG art (360 x 300, foot of the trunk at the bottom edge), the sign with the capital hanging in the
   crown, a few leaves drifting down. Fills its box; sizes in cqw of that box. Only transform and opacity animate. */
.at[b-rh38uus46e] {
    position: relative;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    pointer-events: none;
}

.at__art[b-rh38uus46e] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The crown shivers when a pile is done (the wind that blows the rest of the leaves away). */
.at__crown[b-rh38uus46e] {
    transform-box: view-box;
    transform-origin: 50% 70%;
}

.at.is-shaking .at__crown[b-rh38uus46e] {
    animation: at-shiver-b-rh38uus46e 0.7s ease-in-out both;
}

/* ---------- Sign with the capital ---------- */
.at__sign[b-rh38uus46e] {
    position: absolute;
    left: 50%;
    top: 27%;
    width: 30cqw;
    margin-left: -15cqw;
    transform-origin: 50% -12cqw;
    animation: at-swing-b-rh38uus46e 3.2s ease-in-out infinite alternate;
}

.at__rope[b-rh38uus46e] {
    position: absolute;
    top: -12cqw;
    width: 1.1cqw;
    height: 14cqw;
    border-radius: 1cqw;
    background: linear-gradient(90deg, #8a5a36, #b98552);
}

.at__rope--l[b-rh38uus46e] { left: 22%; transform: rotate(9deg); }
.at__rope--r[b-rh38uus46e] { right: 22%; transform: rotate(-9deg); }

.at__tile[b-rh38uus46e] {
    position: relative;
    display: grid;
    place-items: center;
    width: 30cqw;
    height: 30cqw;
    border-radius: 7.5cqw;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    border: 1.3cqw solid #ffffff;
    box-shadow: 0 1.6cqw 0 #e6c597, 0 3cqw 4.5cqw rgba(110, 40, 10, 0.35);
    animation: at-bump-b-rh38uus46e 0.5s var(--ease-pop) both;
}

.at__glyph[b-rh38uus46e] {
    font-size: 21cqw;
    font-weight: 1000;
    line-height: 1;
    color: var(--c-city-2);
    text-shadow: 0 1.3cqw 0 #c23a0d;
    transform: translateY(-3%);
}

/* Nails holding the ropes. */
.at__tile[b-rh38uus46e]::before,
.at__tile[b-rh38uus46e]::after {
    content: "";
    position: absolute;
    top: 1.4cqw;
    width: 2.2cqw;
    height: 2.2cqw;
    border-radius: 50%;
    background: #c9a77a;
    box-shadow: inset 0 -0.4cqw 0 rgba(0, 0, 0, 0.18);
}

.at__tile[b-rh38uus46e]::before { left: 22%; }
.at__tile[b-rh38uus46e]::after { right: 22%; }

/* ---------- Leaves drifting down from the crown ---------- */
.at__drift[b-rh38uus46e] {
    position: absolute;
    top: 58%;
    width: 6cqw;
    height: 6cqw;
    opacity: 0;
    animation: at-drift-b-rh38uus46e var(--d, 8s) linear var(--w, 0s) infinite;
}

.at__drift svg[b-rh38uus46e] {
    display: block;
    width: 100%;
    height: 100%;
    animation: at-flutter-b-rh38uus46e 1.6s ease-in-out infinite alternate;
}

.at__drift--a[b-rh38uus46e] { left: 12%; --d: 8.5s; --w: 0.6s; }
.at__drift--b[b-rh38uus46e] { left: 76%; --d: 9.5s; --w: 3.4s; }
.at__drift--c[b-rh38uus46e] { left: 30%; --d: 10s; --w: 6.2s; }
.at__drift--d[b-rh38uus46e] { left: 64%; --d: 7.6s; --w: 1.9s; }

@keyframes at-drift-b-rh38uus46e {
    0% { transform: translate(0, 0) rotate(0); opacity: 0; }
    8% { opacity: 1; }
    25% { transform: translate(4cqw, 8cqw) rotate(70deg); }
    50% { transform: translate(-3cqw, 16cqw) rotate(150deg); }
    75% { transform: translate(5cqw, 24cqw) rotate(230deg); opacity: 1; }
    100% { transform: translate(0, 33cqw) rotate(300deg); opacity: 0; }
}

@keyframes at-flutter-b-rh38uus46e {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.55); }
}

@keyframes at-swing-b-rh38uus46e {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2.5deg); }
}

@keyframes at-bump-b-rh38uus46e {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes at-shiver-b-rh38uus46e {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-1.6deg); }
    45% { transform: rotate(1.4deg); }
    70% { transform: rotate(-0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .at__sign[b-rh38uus46e],
    .at__tile[b-rh38uus46e],
    .at.is-shaking .at__crown[b-rh38uus46e] {
        animation: none;
    }

    .at__drift[b-rh38uus46e] {
        display: none;
    }
}
/* /City/Review/Leaves/LeafButton.razor.rz.scp.css */
/* One fallen leaf with a small letter. Sized from the pile box (the page's nearest size container): --s is the leaf's
   square, about 59 px on a 360 × 640 phone, 90 px on a 390 × 844 one, max. 140 px; --k varies it a little per leaf.
   The art lies turned (SVG transform) with its flat shadow always straight down; the letter stands upright, big and
   dark on the leaf's pale heart, with no vein under it. The hit area is the round button (the art does not catch
   taps). Only transform and opacity animate. */
.lf-leaf[b-nfqpuzytpb] {
    --s: calc(min(30cqw, 37cqh, 140px) * var(--k, 1));
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    z-index: var(--z, 1);
    display: block;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    animation: lf-fall-b-nfqpuzytpb 0.8s cubic-bezier(0.25, 0.8, 0.3, 1) calc(0.15s + var(--i, 0) * 0.07s) both;
}

.lf-leaf:disabled[b-nfqpuzytpb] {
    cursor: default;
}

.lf-leaf__body[b-nfqpuzytpb] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lf-leaf__art[b-nfqpuzytpb] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lf-leaf__glyph[b-nfqpuzytpb] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(var(--s) * 0.54);
    font-weight: 1000;
    line-height: 1;
    color: #3a1d0c;
    text-shadow: 0 0 2px #fff8e8, 0 0 6px #fff8e8;
    transform: translateY(-5%) rotate(var(--t, 0deg));
}

/* Autumn palette: edge (the flat shadow below), dark rim, base, light, pale heart under the letter. */
.lf-leaf--c0[b-nfqpuzytpb] { --l-edge: #9c2a1b; --l-dark: #bf3522; --l-base: #e2472f; --l-light: #f47c5f; --l-vein: #b83220; }
.lf-leaf--c1[b-nfqpuzytpb] { --l-edge: #b35a05; --l-dark: #d26c06; --l-base: #f4860f; --l-light: #f9ad4c; --l-vein: #c96305; }
.lf-leaf--c2[b-nfqpuzytpb] { --l-edge: #b47606; --l-dark: #d89208; --l-base: #f7b21e; --l-light: #fbcd5c; --l-vein: #cf8a07; }
.lf-leaf--c3[b-nfqpuzytpb] { --l-edge: #7f4520; --l-dark: #a05a2b; --l-base: #c4733c; --l-light: #dc9e6a; --l-vein: #96532a; }
.lf-leaf--c4[b-nfqpuzytpb] { --l-edge: #82202e; --l-dark: #a8293d; --l-base: #cc3a4f; --l-light: #e57885; --l-vein: #a12538; }
.lf-leaf--c5[b-nfqpuzytpb] { --l-edge: #6a7a16; --l-dark: #84961f; --l-base: #a6ba2e; --l-light: #c9d66b; --l-vein: #7f911d; }

.lf-edge[b-nfqpuzytpb] { fill: var(--l-edge); }
.lf-stem[b-nfqpuzytpb] { fill: none; stroke: var(--l-edge); stroke-width: 4.5; stroke-linecap: round; }
.lf-vein[b-nfqpuzytpb] { fill: none; stroke: var(--l-vein); stroke-width: 2.6; stroke-linecap: round; opacity: 0.55; }
.lf-g0[b-nfqpuzytpb] { stop-color: #fff5d8; }
.lf-g1[b-nfqpuzytpb] { stop-color: #ffeab8; }
.lf-g2[b-nfqpuzytpb] { stop-color: var(--l-light); }
.lf-g3[b-nfqpuzytpb] { stop-color: var(--l-base); }
.lf-g4[b-nfqpuzytpb] { stop-color: var(--l-dark); }

/* ---------- Right: the leaf hops and twirls away, little leaves burst out ---------- */
.lf-leaf.is-flown[b-nfqpuzytpb] {
    pointer-events: none;
    animation: lf-fly-b-nfqpuzytpb 0.95s cubic-bezier(0.3, 0.6, 0.4, 1) forwards;
}

.lf-burst[b-nfqpuzytpb] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.lf-burst i[b-nfqpuzytpb] {
    position: absolute;
    left: calc(var(--s) * -0.07);
    top: calc(var(--s) * -0.07);
    width: calc(var(--s) * 0.14);
    height: calc(var(--s) * 0.14);
    border-radius: 0 70% 0 70%;
    background: var(--l-base);
    border: 2px solid #ffffff;
    transform: rotate(var(--a));
    animation: lf-spark-b-nfqpuzytpb 0.6s ease-out forwards;
}

.lf-burst i:nth-child(odd)[b-nfqpuzytpb] {
    background: #ffd54f;
}

/* ---------- Wrong: the leaf rustles and stays ---------- */
.lf-leaf.is-wrong .lf-leaf__body[b-nfqpuzytpb] {
    animation: lf-rustle-b-nfqpuzytpb 0.55s ease both;
}

/* ---------- Pile done: the wind blows the leftovers away ---------- */
.lf-leaf.is-gust:not(.is-flown)[b-nfqpuzytpb] {
    pointer-events: none;
    animation: lf-gust-b-nfqpuzytpb 0.75s ease-in calc(0.3s + var(--i, 0) * 0.04s) forwards;
}

@keyframes lf-fall-b-nfqpuzytpb {
    0% { transform: translate(calc(var(--s) * var(--dx, 0)), calc(var(--s) * -2.6)) rotate(-140deg) scale(0.7); opacity: 0; visibility: hidden; }
    10% { opacity: 1; visibility: visible; }
    55% { transform: translate(calc(var(--s) * var(--dx, 0) * -0.4), calc(var(--s) * -0.5)) rotate(25deg) scale(0.95); }
    80% { transform: translate(0, calc(var(--s) * 0.04)) rotate(-6deg) scale(1); }
    100% { transform: none; opacity: 1; visibility: visible; }
}

@keyframes lf-fly-b-nfqpuzytpb {
    0% { transform: none; opacity: 1; }
    16% { transform: translateY(calc(var(--s) * 0.06)) scale(1.1, 0.84); opacity: 1; }
    36% { transform: translate(calc(var(--s) * var(--dx, 0.5) * 0.3), calc(var(--s) * -0.8)) rotate(calc(var(--dx, 0.5) * 160deg)) scale(1.12); opacity: 1; }
    100% { transform: translate(calc(var(--s) * var(--dx, 0.5) * 1.6), calc(var(--s) * -3.2)) rotate(calc(var(--dx, 0.5) * 620deg)) scale(0.4); opacity: 0; }
}

@keyframes lf-spark-b-nfqpuzytpb {
    0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--s) * -0.85)) rotate(140deg) scale(0.5); opacity: 0; }
}

@keyframes lf-rustle-b-nfqpuzytpb {
    0%, 100% { transform: rotate(0); }
    15% { transform: translateX(-3px) rotate(-11deg); }
    35% { transform: translateX(3px) rotate(9deg); }
    55% { transform: translateX(-2px) rotate(-6deg); }
    75% { transform: translateX(1px) rotate(3deg); }
}

@keyframes lf-gust-b-nfqpuzytpb {
    0% { transform: none; opacity: 1; }
    25% { transform: translate(calc(var(--s) * -0.08), calc(var(--s) * -0.1)) rotate(-12deg); opacity: 1; }
    100% { transform: translate(calc(var(--s) * 3.6), calc(var(--s) * -1.4)) rotate(260deg) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lf-leaf[b-nfqpuzytpb] {
        animation: none;
    }

    .lf-leaf.is-flown[b-nfqpuzytpb],
    .lf-leaf.is-gust:not(.is-flown)[b-nfqpuzytpb] {
        animation: lf-fade-b-nfqpuzytpb 0.3s ease forwards;
    }

    .lf-leaf.is-wrong .lf-leaf__body[b-nfqpuzytpb] {
        animation: none;
    }

    .lf-burst[b-nfqpuzytpb] {
        display: none;
    }
}

@keyframes lf-fade-b-nfqpuzytpb {
    to { opacity: 0; }
}
/* /City/Review/Leaves/LeafPileGame.razor.rz.scp.css */
/* „Гомила лишћа“: the yard inside the GameScreen panel. The tree stands on the horizon (--ground, from the top), the
   pile lies on the lawn below it. The yard is a size container: the tree and the pile box size from it. Only transform
   and opacity animate. */
.lp-yard[b-4tfotaj4i0] {
    --ground: 47%;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #8fd3ff 0%, #c2eaff 30%, #fff1d6 47%);
    box-shadow: inset 0 4px 10px rgba(30, 100, 160, 0.16), 0 5px 0 #e6c597;
    container-type: size;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Scenery ---------- */
.lp-sun[b-4tfotaj4i0] {
    position: absolute;
    left: 7%;
    top: 5%;
    width: 15cqmin;
    height: 15cqmin;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff6c4 0%, #ffd95a 55%, #ffc53a 100%);
    box-shadow: 0 0 0 2.4cqmin rgba(255, 224, 120, 0.35), 0 0 0 5cqmin rgba(255, 224, 120, 0.16);
}

.lp-cloud[b-4tfotaj4i0] {
    position: absolute;
    width: 120px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

.lp-cloud[b-4tfotaj4i0]::before,
.lp-cloud[b-4tfotaj4i0]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.lp-cloud[b-4tfotaj4i0]::before { left: 18px; top: -20px; width: 46px; height: 46px; }
.lp-cloud[b-4tfotaj4i0]::after { left: 52px; top: -28px; width: 56px; height: 56px; }

.lp-cloud--a[b-4tfotaj4i0] { right: 5%; top: 9%; transform: scale(0.8); }
.lp-cloud--b[b-4tfotaj4i0] { left: 3%; top: 27%; transform: scale(0.62); opacity: 0.85; }

.lp-hill[b-4tfotaj4i0] {
    position: absolute;
    border-radius: 50%;
}

.lp-hill--a[b-4tfotaj4i0] { left: -22%; width: 74%; top: calc(var(--ground) - 11%); height: 34%; background: #cfe6a0; }
.lp-hill--b[b-4tfotaj4i0] { right: -28%; width: 82%; top: calc(var(--ground) - 8%); height: 30%; background: #bcdc8c; }

.lp-bush[b-4tfotaj4i0] {
    position: absolute;
    top: calc(var(--ground) - 7.5%);
    width: 18cqmin;
    height: 11cqmin;
}

.lp-bush--a[b-4tfotaj4i0] { left: -2%; }
.lp-bush--b[b-4tfotaj4i0] { right: -3%; width: 22cqmin; height: 13cqmin; top: calc(var(--ground) - 9%); }

.lp-lawn[b-4tfotaj4i0] {
    position: absolute;
    left: -6%;
    right: -6%;
    top: calc(var(--ground) - 3.5%);
    bottom: -2%;
    border-radius: 50% 50% 0 0 / 7cqh 7cqh 0 0;
    background: linear-gradient(180deg, #b9e28a 0%, #a2d672 22%, #8dca5f 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45);
}

/* A few loose leaves on the lawn (no letters, not tappable). */
.lp-litter[b-4tfotaj4i0] {
    position: absolute;
    width: 4.2cqmin;
    height: 4.2cqmin;
    border-radius: 0 70% 0 70%;
    opacity: 0.9;
}

.lp-litter--a[b-4tfotaj4i0] { left: 4%; top: 93%; background: #e2472f; transform: rotate(20deg); }
.lp-litter--b[b-4tfotaj4i0] { left: 93%; top: 88%; background: #f7b21e; transform: rotate(-35deg); }
.lp-litter--c[b-4tfotaj4i0] { left: 2%; top: 60%; background: #f4860f; transform: rotate(70deg) scale(0.8); }
.lp-litter--d[b-4tfotaj4i0] { left: 95%; top: 57%; background: #c4733c; transform: rotate(-10deg) scale(0.8); }

/* Distant trees on the horizon: only when the yard is wider than tall (desktop), to fill the meadow. */
.lp-far[b-4tfotaj4i0] {
    position: absolute;
    bottom: calc(100% - var(--ground) + 1%);
    width: 13cqh;
    height: 15cqh;
    display: none;
}

.lp-far--a[b-4tfotaj4i0] { left: 14%; }
.lp-far--b[b-4tfotaj4i0] { right: 12%; width: 11cqh; height: 13cqh; }

@container (min-aspect-ratio: 1 / 1) {
    .lp-far[b-4tfotaj4i0] { display: block; }
}

/* ---------- Tree ---------- */
.lp-tree[b-4tfotaj4i0] {
    position: absolute;
    left: 50%;
    bottom: calc(100% - var(--ground) - 1%);
    width: min(96cqw, 56cqh, 480px);
    aspect-ratio: 6 / 5;
    transform: translateX(-50%);
}

/* ---------- The pile: leaf centres in % of this box ---------- */
.lp-ground[b-4tfotaj4i0] {
    position: absolute;
    top: calc(var(--ground) + 1.5%);
    bottom: 1.5%;
    left: 50%;
    width: min(95cqw, 72cqh);
    transform: translateX(-50%);
    container-type: size;
}

/* The heap itself: plain leaves, muted and small, under the letter leaves (decoration, not tappable). */
.lp-bed[b-4tfotaj4i0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-bed i[b-4tfotaj4i0] {
    --w: min(calc(30cqw * var(--bs)), calc(37cqh * var(--bs)));
    position: absolute;
    left: calc(var(--bx) * 1%);
    top: calc(var(--by) * 1%);
    width: var(--w);
    height: var(--w);
    margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
    border-radius: 0 80% 0 80%;
    background: var(--bc);
    box-shadow: inset -0.12em -0.12em 0 rgba(90, 40, 15, 0.18);
    transform: rotate(var(--br));
}

.lp-bed i[b-4tfotaj4i0]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 1.5px;
    background: rgba(90, 40, 15, 0.25);
    transform: rotate(-45deg);
}

/* ---------- The friend jumps into the pile ---------- */
/* Placed at (--fx, --fy) % of the pile box by a transform in its container units (1cqw = 1 % of its width). */
.lp-friend[b-4tfotaj4i0] {
    --fs: min(18cqw, 22cqh, 88px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    width: var(--fs);
    height: var(--fs);
    margin: calc(var(--fs) / -1.6) 0 0 calc(var(--fs) / -2);
    pointer-events: none;
    transform: translate(calc(var(--fx) * 1cqw), calc(var(--fy) * 1cqh));
    transition: transform 0.34s ease-in-out;
}

.lp-friend__hop[b-4tfotaj4i0] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 12px rgba(61, 42, 28, 0.25);
    overflow: hidden;
}

/* Two names for the same hop, so every jump restarts it (the class flips). */
.lp-friend__hop.is-hop-a[b-4tfotaj4i0] { animation: lp-hop-a-b-4tfotaj4i0 0.36s ease-out both; }
.lp-friend__hop.is-hop-b[b-4tfotaj4i0] { animation: lp-hop-b-b-4tfotaj4i0 0.36s ease-out both; }

.lp-friend__shadow[b-4tfotaj4i0] {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -12%;
    height: 16%;
    border-radius: 50%;
    background: rgba(61, 42, 28, 0.22);
    z-index: -1;
}

@keyframes lp-hop-a-b-4tfotaj4i0 {
    0% { transform: translateY(0) scale(1, 1); }
    45% { transform: translateY(-55%) scale(0.95, 1.05); }
    85% { transform: translateY(0) scale(1.08, 0.9); }
    100% { transform: none; }
}

@keyframes lp-hop-b-b-4tfotaj4i0 {
    0% { transform: translateY(0) scale(1, 1); }
    45% { transform: translateY(-55%) scale(0.95, 1.05); }
    85% { transform: translateY(0) scale(1.08, 0.9); }
    100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-friend[b-4tfotaj4i0] { transition: none; }
    .lp-friend__hop.is-hop-a[b-4tfotaj4i0],
    .lp-friend__hop.is-hop-b[b-4tfotaj4i0] { animation: none; }
}
/* /City/Review/River/RiverCrossingGame.razor.rz.scp.css */
/* „Пређи реку“: target sign + the river inside the GameScreen panel. The rows of stones sit on three slots (ahead at
   20 %, to choose at 50 %, behind at 80 % of the river's height) and move down one slot per step; the friend moves
   with them. Only transform and opacity animate. */

/* ---------- Target sign: the letter to step on, big ---------- */
.rc-sign[b-bbktu430lc] {
    flex: none;
    display: flex;
    justify-content: center;
    animation: rc-sign-in-b-bbktu430lc 0.5s var(--ease-pop) both;
}

.rc-sign__tile[b-bbktu430lc] {
    display: grid;
    place-items: center;
    min-width: 72px;
    height: 72px;
    padding: 0 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #eaf7ff 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #9fcde6, 0 9px 16px rgba(20, 70, 110, 0.18);
    animation: rc-bump-b-bbktu430lc 0.45s var(--ease-pop) both;
}

.rc-sign__glyph[b-bbktu430lc] {
    font-size: 56px;
    font-weight: 1000;
    line-height: 1;
    color: #1e88e5;
    text-shadow: 0 4px 0 #0d5aa8;
    transform: translateY(-2px);
}

/* ---------- River ---------- */
.rc-river[b-bbktu430lc] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(90deg, rgba(10, 70, 120, 0.22) 0%, rgba(10, 70, 120, 0) 14%, rgba(10, 70, 120, 0) 86%, rgba(10, 70, 120, 0.22) 100%),
        linear-gradient(180deg, #5cc2ee 0%, #3fb0e0 50%, #5cc2ee 100%);
    border: 4px solid #ffffff;
    box-shadow: inset 0 6px 14px rgba(10, 70, 120, 0.25), 0 5px 0 #7cc35f;
    container-type: size;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* The current: white streaks drifting left to right. */
.rc-flow[b-bbktu430lc] {
    position: absolute;
    left: 0;
    width: 34%;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    animation: rc-flow-b-bbktu430lc 4.6s linear infinite;
}

.rc-flow--a[b-bbktu430lc] { top: 12%; }
.rc-flow--b[b-bbktu430lc] { top: 36%; width: 24%; animation-duration: 5.6s; animation-delay: -2.2s; }
.rc-flow--c[b-bbktu430lc] { top: 64%; animation-duration: 4s; animation-delay: -1.1s; }
.rc-flow--d[b-bbktu430lc] { top: 88%; width: 20%; animation-duration: 6s; animation-delay: -3.4s; }

/* A row: a zero-height line across the river, moved to its slot. */
.rc-row[b-bbktu430lc] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    transform: translateY(calc(var(--slot) * -30cqh));
    transition: transform 0.55s var(--ease-out);
    animation: rc-row-in-b-bbktu430lc 0.45s ease both;
}

/* ---------- Banks ---------- */
.rc-bank[b-bbktu430lc] {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 100cqh;
    pointer-events: none;
}

/* Near bank: starts a little above its line and runs off the bottom (sand, then lawn). */
.rc-bank--near[b-bbktu430lc] {
    top: -10cqh;
    background:
        linear-gradient(180deg, #efe3cf 0, #d9c8ad 7cqh, #8fd16a 7cqh, #6fbf55 100%);
    border-top: 4px solid rgba(255, 255, 255, 0.7);
}

.rc-bank--near i[b-bbktu430lc] {
    position: absolute;
    top: 12cqh;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff7eb6;
    box-shadow: 0 0 0 3px #ffffff;
}

.rc-bank--near i:first-child[b-bbktu430lc] { left: 14%; }
.rc-bank--near i:last-child[b-bbktu430lc] { right: 16%; background: #ffd23f; }

/* Far bank: the lawn on the other side, ends a little below its line and runs off the top. */
.rc-bank--far[b-bbktu430lc] {
    bottom: -10cqh;
    background: linear-gradient(0deg, #efe3cf 0, #d9c8ad 7cqh, #8fd16a 7cqh, #7cc35f 100%);
    border-bottom: 4px solid rgba(255, 255, 255, 0.7);
}

.rc-bank__tree[b-bbktu430lc] {
    position: absolute;
    left: 12%;
    bottom: 12cqh;
    width: 15cqh;
    aspect-ratio: 1 / 1.25;
    background:
        radial-gradient(circle at 50% 38%, #4caf50 0 38%, transparent 39%),
        linear-gradient(#8d6e63, #8d6e63) 50% 100% / 18% 34% no-repeat;
}

.rc-bank__tree--b[b-bbktu430lc] {
    left: auto;
    right: 12%;
    width: 12cqh;
    background:
        radial-gradient(circle at 50% 38%, #9ccc65 0 38%, transparent 39%),
        linear-gradient(#8d6e63, #8d6e63) 50% 100% / 18% 34% no-repeat;
}

/* The goal on the far bank: a little flag. */
.rc-bank__flag[b-bbktu430lc] {
    position: absolute;
    left: 50%;
    bottom: 11cqh;
    width: 4px;
    height: 13cqh;
    margin-left: 24%;
    background: #8d6e63;
}

.rc-bank__flag[b-bbktu430lc]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 22px;
    height: 16px;
    background: var(--c-city-2);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    animation: rc-flag-b-bbktu430lc 1s ease-in-out infinite alternate;
    transform-origin: 0 50%;
}

/* ---------- Stones ---------- */
.rc-stones[b-bbktu430lc] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
}

.rc-stone[b-bbktu430lc] {
    position: absolute;
    left: calc(var(--sx) * 1%);
    top: 0;
    width: min(27cqw, 104px, 34cqh);
    aspect-ratio: 1.3;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    transition: opacity 0.4s ease;
}

.rc-stone:disabled[b-bbktu430lc] {
    cursor: default;
}

/* Water ring around the stone. */
.rc-stone__ring[b-bbktu430lc] {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 22%;
    bottom: -14%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
}

.rc-stone__top[b-bbktu430lc] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50% / 46%;
    background: radial-gradient(circle at 36% 30%, #f6f2ec 0%, #c8bfb3 62%, #a99f92 100%);
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.1), 0 6px 0 #7b7266, 0 9px 10px rgba(10, 60, 100, 0.25);
}

.rc-stone__glyph[b-bbktu430lc] {
    font-size: min(40px, 12cqw);
    font-weight: 1000;
    line-height: 1;
    color: #4a3b2e;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.rc-stone.is-current .rc-stone__top[b-bbktu430lc] {
    animation: rc-ready-b-bbktu430lc 2.2s ease-in-out infinite;
}

.rc-stone.is-current:active .rc-stone__top[b-bbktu430lc] {
    transform: scale(0.93);
}

.rc-stone.is-ahead[b-bbktu430lc] { opacity: 0.55; }
.rc-stone.is-behind[b-bbktu430lc] { opacity: 0.45; }

.rc-stone.is-stepped .rc-stone__top[b-bbktu430lc] {
    background: radial-gradient(circle at 36% 30%, #f3ffe9 0%, #b7dca0 62%, #8fbf78 100%);
}

/* A wrong stone: a quick wobble, the water splashes up around it. */
.rc-stone.is-wrong .rc-stone__top[b-bbktu430lc] {
    animation: rc-wobble-b-bbktu430lc 0.6s ease both;
}

.rc-splash[b-bbktu430lc] {
    position: absolute;
    left: 50%;
    top: 60%;
    width: 0;
    height: 0;
}

.rc-splash i[b-bbktu430lc] {
    position: absolute;
    left: -5px;
    top: -6px;
    width: 10px;
    height: 12px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #e3f6ff;
    border: 2px solid #ffffff;
    transform: rotate(var(--a));
    animation: rc-drop-b-bbktu430lc 0.55s ease-out forwards;
}

/* ---------- The friend: stands on its row's right stone (or a bank), hops to the next ---------- */
.rc-friend[b-bbktu430lc] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: min(56px, 17cqh);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translate(calc(var(--fx) * 1cqw - 50%), calc(var(--fy) * 1cqh - 92%));
    transition: transform 0.5s var(--ease-out);
}

.rc-friend__hop[b-bbktu430lc] {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #e6c597, 0 6px 10px rgba(61, 42, 28, 0.25);
}

.rc-friend__hop.is-hopping[b-bbktu430lc] {
    animation: rc-hop-b-bbktu430lc 0.5s ease-out both;
}

.rc-friend__shadow[b-bbktu430lc] {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -12%;
    height: 14%;
    border-radius: 50%;
    background: rgba(10, 50, 80, 0.25);
    z-index: -1;
}

@keyframes rc-flow-b-bbktu430lc {
    from { transform: translateX(-110%); }
    to { transform: translateX(320%); }
}

@keyframes rc-row-in-b-bbktu430lc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rc-ready-b-bbktu430lc {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes rc-wobble-b-bbktu430lc {
    0%, 100% { transform: rotate(0) translateY(0); }
    20% { transform: rotate(-9deg) translateY(3px); }
    40% { transform: rotate(8deg) translateY(4px); }
    60% { transform: rotate(-5deg) translateY(2px); }
    80% { transform: rotate(3deg) translateY(1px); }
}

@keyframes rc-drop-b-bbktu430lc {
    0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-34px) scale(0.5); opacity: 0; }
}

@keyframes rc-hop-b-bbktu430lc {
    0% { transform: translateY(0) scale(1, 1); }
    45% { transform: translateY(-34%) scale(0.95, 1.06); }
    80% { transform: translateY(0) scale(1.08, 0.9); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes rc-flag-b-bbktu430lc {
    from { transform: scaleX(0.85); }
    to { transform: scaleX(1.05); }
}

@keyframes rc-sign-in-b-bbktu430lc {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rc-bump-b-bbktu430lc {
    0% { transform: scale(0.9); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Short phones: a smaller sign leaves the river its room. */
@media (max-height: 700px) {
    .rc-sign__tile[b-bbktu430lc] { min-width: 58px; height: 58px; border-radius: 20px; }
    .rc-sign__glyph[b-bbktu430lc] { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-sign[b-bbktu430lc],
    .rc-sign__tile[b-bbktu430lc],
    .rc-flow[b-bbktu430lc],
    .rc-row[b-bbktu430lc],
    .rc-stone__top[b-bbktu430lc],
    .rc-friend__hop[b-bbktu430lc],
    .rc-bank__flag[b-bbktu430lc]::after {
        animation: none !important;
    }

    .rc-row[b-bbktu430lc],
    .rc-friend[b-bbktu430lc] {
        transition: none;
    }
}
/* /City/Review/WriteWord/WriteWordGame.razor.rz.scp.css */
/* „Пиши реч“: the run bar, the model (the word's picture and the solid word), then one wide drawing pad as big as
   the panel allows, its aspect the word's (guide units: the letters' 400×400 spaces side by side). The guide styles
   are those of „Пиши слово“ (LetterTracingGame.razor.css; scoped CSS cannot be shared), so both games look the same.
   Animations are transform / opacity only. */
.ww-progress[b-zden3kg981] {
    flex: none;
    display: flex;
    justify-content: center;
}

/* The model: the word's picture and the solid word on small cards above the pad. */
.ww-model[b-zden3kg981] {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ww-model__pic[b-zden3kg981],
.ww-model__word[b-zden3kg981] {
    display: grid;
    place-items: center;
    height: 72px;
    padding: 6px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 14px rgba(61, 42, 28, 0.16);
}

.ww-model__pic[b-zden3kg981] {
    width: 72px;
    animation: ww-pop-in-b-zden3kg981 0.45s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.ww-model__pic img[b-zden3kg981] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.ww-model__word[b-zden3kg981] {
    max-width: calc(100% - 82px);
    padding: 6px 12px;
}

.ww-model__word svg[b-zden3kg981] {
    display: block;
    height: 100%;
    max-width: 100%;
}

.ww-model__word path[b-zden3kg981] {
    fill: none;
    stroke: #1e88e5;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ww-model__word circle[b-zden3kg981] { fill: #1e88e5; }

@media (max-height: 600px) {
    .ww-model__pic[b-zden3kg981],
    .ww-model__word[b-zden3kg981] { height: 54px; padding: 4px; border-radius: 14px; }
    .ww-model__pic[b-zden3kg981] { width: 54px; }
}

.ww-padbox[b-zden3kg981] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

/* The pad keeps the word's aspect (--ar, and --arn as a number) and fills the box's width or height, whichever ends first. */
.ww-pad[b-zden3kg981] {
    width: min(100cqw, calc(100cqh * var(--arn)));
    aspect-ratio: var(--ar);
    border-radius: 26px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.ww-pad.is-ok[b-zden3kg981] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.ww-pad.is-low[b-zden3kg981] {
    box-shadow: 0 5px 0 #f0a46b, 0 0 0 4px rgba(244, 144, 12, 0.4), 0 10px 20px rgba(230, 81, 0, 0.2);
    animation: ww-wiggle-b-zden3kg981 0.45s ease-in-out;
}

.ww-svg[b-zden3kg981] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Guide ---------- */
.ww-rule[b-zden3kg981] {
    stroke: #cfe3f3;
    stroke-width: 3;
    stroke-linecap: round;
}

.ww-rule--x[b-zden3kg981] {
    stroke-dasharray: 10 10;
}

/* The letter's faint shape: the corridor a stroke may wander in. */
.ww-body[b-zden3kg981] {
    fill: #ffe8b6;
    stroke: #ffe8b6;
    stroke-width: 46;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ww-body path[b-zden3kg981] {
    fill: none;
}

/* Strokes still to write: a row of dots (the one to write now in its colour). */
.ww-dots[b-zden3kg981] {
    fill: none;
    stroke: #d9c7ad;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 16;
}

.ww-dots.is-now[b-zden3kg981] {
    stroke: var(--c);
    stroke-width: 10;
}

/* Lighter guide: no shape, fainter dots. */
.is-light .ww-dots[b-zden3kg981] {
    stroke: #e8dccb;
    stroke-width: 7;
}

.is-light .ww-dots.is-now[b-zden3kg981] {
    stroke: var(--c);
    opacity: 0.6;
    stroke-width: 8;
}

/* Written strokes, locked in their colours. */
.ww-locked[b-zden3kg981] {
    fill: none;
    stroke: var(--c);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ww-dot-done[b-zden3kg981] {
    fill: var(--c);
}

/* The whole letter done: it bounces, with a warm glow under it. */
.ww-done[b-zden3kg981] {
    transform-box: view-box;
    transform-origin: 50% 52%;
}

.ww-done.is-cheer[b-zden3kg981] {
    animation: ww-bounce-b-zden3kg981 0.9s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.ww-glow[b-zden3kg981] {
    fill: #fff1a8;
    stroke: #fff1a8;
    stroke-width: 50;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: ww-glow-b-zden3kg981 1.4s ease-out both;
}

.ww-glow path[b-zden3kg981] {
    fill: none;
}

/* Order badges: the stroke's colour, one white pip per place. */
.ww-badge__disc[b-zden3kg981] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 3.5;
}

.ww-badge__pip[b-zden3kg981],
.ww-start__pip[b-zden3kg981] {
    fill: #ffffff;
}

/* Where to start now: the green dot, gently pinging. */
.ww-start__disc[b-zden3kg981] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 4.5;
}

.ww-start__in[b-zden3kg981] {
    transform-box: fill-box;
    transform-origin: center;
    animation: ww-pop-in-b-zden3kg981 0.35s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.ww-start__ring[b-zden3kg981] {
    fill: none;
    stroke: #43a047;
    stroke-width: 3.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: ww-ping-b-zden3kg981 1.6s ease-out infinite;
    pointer-events: none;
}

/* Which way: a small green chevron a little way along the stroke. */
.ww-arrow path[b-zden3kg981] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ww-arrow__under[b-zden3kg981] {
    stroke: #ffffff;
    stroke-width: 11;
}

.ww-arrow__head[b-zden3kg981] {
    stroke: #2e7d32;
    stroke-width: 6;
}

/* Outline / dots rungs: plain start points of later strokes, and (dots) each stroke's end point, hollow. */
.ww-pt[b-zden3kg981] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 4;
    opacity: 0.85;
}

.ww-pt--end[b-zden3kg981] {
    fill: #ffffff;
    stroke: var(--c);
    stroke-width: 5;
}

/* Later strokes' arrows (full guide): their stroke colour, quieter than the one to write now. */
.ww-arrow--later[b-zden3kg981] { opacity: 0.6; }
.ww-arrow--later .ww-arrow__head[b-zden3kg981] { stroke: var(--c); stroke-width: 5; }

/* The finger's ink, in the colour of the stroke being written; green when it is right, fading when not. */
.ww-ink[b-zden3kg981] {
    fill: none;
    stroke: var(--c);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.ww-pad.is-ok .ww-ink[b-zden3kg981] {
    stroke: #43a047;
}

.ww-pad.is-low .ww-ink[b-zden3kg981] {
    animation: ww-fade-b-zden3kg981 0.5s ease-out forwards;
}

.ww-spark[b-zden3kg981] {
    fill: #ffc93c;
    stroke: #f29f05;
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: ww-spark-b-zden3kg981 0.9s ease-out var(--d, 0ms) both;
    pointer-events: none;
}

/* The demo hand (fingertip on the stroke). */
.ww-demo[b-zden3kg981] {
    pointer-events: none;
}

.ww-demo__hand[b-zden3kg981] {
    font-size: 58px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

@keyframes ww-spark-b-zden3kg981 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(40deg); opacity: 1; }
    100% { transform: scale(0.6) rotate(90deg); opacity: 0; }
}

@keyframes ww-bounce-b-zden3kg981 {
    0% { transform: scale(1); }
    30% { transform: scale(1.12) translateY(-10px); }
    55% { transform: scale(0.96); }
    75% { transform: scale(1.04) translateY(-3px); }
    100% { transform: scale(1); }
}

@keyframes ww-glow-b-zden3kg981 {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0.7; }
}

@keyframes ww-fade-b-zden3kg981 {
    to { opacity: 0; }
}

@keyframes ww-wiggle-b-zden3kg981 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes ww-ping-b-zden3kg981 {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.3); opacity: 0; }
}

@keyframes ww-pop-in-b-zden3kg981 {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ww-start__ring[b-zden3kg981],
    .ww-pad.is-low[b-zden3kg981],
    .ww-done.is-cheer[b-zden3kg981],
    .ww-model__pic[b-zden3kg981] {
        animation: none;
    }
}
/* /Components/Biomes/BeachBackdrop.razor.rz.scp.css */
/* Biome „Слогови“: sunny beach behind the companion. Mirrors SceneBackdrop.razor.css (layers, units, clusters);
   only small HTML wrappers animate, and only transform/opacity. */
.bh[b-g80fz0yazt] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    container-type: size;
    background: linear-gradient(180deg, #6cc6fa 0%, #87d3ff 20%, #b3e6ff 38%, #dcf4ff 50%, #fff4dc 56%);
}

.bh svg[b-g80fz0yazt] {
    position: absolute;
    display: block;
    overflow: visible;
}

/* Land: scale driven by the height (1 viewBox unit = 0.1cqh), x 1500 = centre of the companion stage. */
.bh-land[b-g80fz0yazt] {
    top: 0;
    left: calc(-1 * var(--dock-w));
    width: calc(100% + var(--dock-w));
    height: 100%;
}

/* Light patch where the companion stands (feet ~7 % above the bottom of the stage). */
.bh-clear[b-g80fz0yazt] {
    --stage-top: calc(var(--safe-top) + var(--hud-top-h));
    --stage-bottom: calc(var(--safe-bottom) + var(--dock-h));
    position: absolute;
    left: calc(var(--safe-left) + (100cqw - var(--safe-left) - var(--safe-right) - var(--dock-w)) / 2);
    top: calc(100cqh - var(--stage-bottom) - 0.07 * (100cqh - var(--stage-top) - var(--stage-bottom)));
    width: min(58cqh, 100cqw);
    height: min(13cqh, 23cqw);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 251, 230, 0.85) 0%, rgba(255, 246, 214, 0.5) 50%, rgba(255, 246, 214, 0) 100%);
}

/* Small animated pieces hold an SVG that fills them. */
.bh-fx svg[b-g80fz0yazt] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Edge clusters: same scale as the land, anchored to the edges; on narrow screens they slide outwards so at
   most ~26 % of the width is covered on each side. */
.bh-cl[b-g80fz0yazt] {
    top: 0;
    height: 100%;
    width: 52cqh;
}

.bh-cl-l[b-g80fz0yazt] {
    left: calc(min(26cqw, 52cqh) - 52cqh);
}

.bh-cl-r[b-g80fz0yazt] {
    right: calc(min(26cqw, 52cqh) - 52cqh + 0.6 * var(--dock-w));
}

/* Sun: static glow, slowly turning rays. */
.bh-sun[b-g80fz0yazt] {
    --d: clamp(58px, 11cqmin, 118px);
    position: absolute;
    left: calc(29cqw - var(--d) / 2);
    top: calc(var(--safe-top) + var(--hud-top-h) + 1.5cqh);
    width: var(--d);
    height: var(--d);
}

.bh-glow[b-g80fz0yazt] {
    position: absolute;
    left: -120%;
    top: -120%;
    width: 340%;
    height: 340%;
    background: radial-gradient(closest-side, rgba(255, 251, 222, 0.85) 0%, rgba(255, 248, 206, 0.42) 34%, rgba(255, 248, 206, 0.12) 66%, rgba(255, 248, 206, 0) 100%);
}

.bh-rays[b-g80fz0yazt] {
    position: absolute;
    left: -90%;
    top: -90%;
    width: 280%;
    height: 280%;
    will-change: transform;
    animation: bh-spin-b-g80fz0yazt 150s linear infinite;
}

.bh-rays svg[b-g80fz0yazt] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Clouds drift across the whole sky; negative delays spread them out. */
.bh-cloud[b-g80fz0yazt] {
    position: absolute;
    left: 0;
    aspect-ratio: 12 / 5;
    will-change: transform;
    animation: bh-drift-b-g80fz0yazt 120s linear infinite;
}

.bh-cloud svg[b-g80fz0yazt] {
    inset: 0;
    width: 100%;
    height: 100%;
}

.bh-c1[b-g80fz0yazt] {
    top: calc(var(--safe-top) + 1cqh);
    width: clamp(84px, 19cqmin, 190px);
    opacity: 0.8;
    animation-duration: 160s;
    animation-delay: -112s;
}

.bh-c2[b-g80fz0yazt] {
    top: calc(var(--safe-top) + var(--hud-top-h) + 8cqh);
    width: clamp(108px, 27cqmin, 260px);
    animation-duration: 125s;
    animation-delay: -82s;
}

.bh-c3[b-g80fz0yazt] {
    top: 33cqh;
    width: clamp(76px, 16cqmin, 170px);
    opacity: 0.9;
    animation-duration: 190s;
    animation-delay: -150s;
}

/* Surf: two foam bands on the shore line (same 3000-unit width and scale as the land), rolling in and out. */
.bh-foam[b-g80fz0yazt] {
    position: absolute;
    left: calc(50cqw - var(--dock-w) / 2 - 150cqh);
    top: 67cqh;
    width: 300cqh;
    height: 4cqh;
    will-change: transform, opacity;
    animation: bh-surf-b-g80fz0yazt 5s ease-in-out infinite alternate;
}

.bh-foam svg[b-g80fz0yazt] {
    inset: 0;
    width: 100%;
    height: 100%;
}

.bh-f2[b-g80fz0yazt] {
    top: 66cqh;
    animation-duration: 6.5s;
    animation-delay: -3s;
}

/* Sailboat far out at sea, drifting very slowly from left to right. The box is 80 x 90 viewBox units
   (1 unit = 0.0875cqh); its waterline (y 75) sits at 58cqh = land y 580, well below the horizon (y 545). */
.bh-boat[b-g80fz0yazt] {
    position: absolute;
    left: 0;
    top: 51.4cqh;
    width: 7cqh;
    aspect-ratio: 8 / 9;
    will-change: transform;
    animation: bh-sail-b-g80fz0yazt 150s linear infinite;
    animation-delay: -62s;
}

.bh-rock[b-g80fz0yazt] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 83%;
    animation: bh-rock-b-g80fz0yazt 3s ease-in-out infinite alternate;
}

/* Water in front of the hull (does not rock): hides the lower hull, with ripples and a soft reflection. */
.bh-wl[b-g80fz0yazt] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Gulls gliding in wide loops over the sea. */
.bh-gull[b-g80fz0yazt] {
    position: absolute;
    width: clamp(38px, 7cqmin, 66px);
    aspect-ratio: 5 / 3;
    will-change: transform;
    animation: bh-glide-b-g80fz0yazt 22s ease-in-out infinite;
}

.bh-g1[b-g80fz0yazt] {
    left: 52cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 20cqh);
}

.bh-g2[b-g80fz0yazt] {
    left: 66cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 27cqh);
    width: clamp(28px, 5cqmin, 48px);
    animation-duration: 28s;
    animation-delay: -11s;
}

.bh-flap[b-g80fz0yazt] {
    position: absolute;
    inset: 0;
    animation: bh-flap-b-g80fz0yazt 0.9s ease-in-out infinite alternate;
}

/* Sparkles on the water. */
.bh-glint[b-g80fz0yazt] {
    position: absolute;
    width: clamp(10px, 1.9cqmin, 18px);
    aspect-ratio: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation: bh-twinkle-b-g80fz0yazt 3.6s ease-in-out infinite;
}

.bh-s1[b-g80fz0yazt] {
    left: 38cqw;
    top: 57cqh;
}

.bh-s2[b-g80fz0yazt] {
    left: 63cqw;
    top: 61cqh;
    animation-delay: -1.3s;
}

.bh-s3[b-g80fz0yazt] {
    left: 20cqw;
    top: 63cqh;
    animation-delay: -2.4s;
    animation-duration: 4.4s;
}

/* Palm crowns (left cluster; pivots at x 430 / y 372 and x 215 / y 560, crown box 360 x 300 units). */
.bh-crown[b-g80fz0yazt],
.bh-crown2[b-g80fz0yazt] {
    position: absolute;
    left: calc(min(26cqw, 52cqh) - 52cqh + 25cqh);
    top: 22.2cqh;
    width: 36cqh;
    height: 30cqh;
    will-change: transform;
    animation: bh-sway-b-g80fz0yazt 5s ease-in-out infinite alternate;
}

.bh-crown2[b-g80fz0yazt] {
    left: calc(min(26cqw, 52cqh) - 52cqh + 3.5cqh);
    top: 41cqh;
    transform: scale(0.7);
    animation-name: bh-sway2-b-g80fz0yazt;
    animation-duration: 6s;
    animation-delay: -2s;
}

@keyframes bh-spin-b-g80fz0yazt {
    to {
        transform: rotate(1turn);
    }
}

@keyframes bh-drift-b-g80fz0yazt {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100cqw);
    }
}

@keyframes bh-surf-b-g80fz0yazt {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0.55;
        transform: translateY(1.1cqh);
    }
}

@keyframes bh-sail-b-g80fz0yazt {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100cqw);
    }
}

@keyframes bh-rock-b-g80fz0yazt {
    from {
        transform: rotate(-3deg);
    }

    to {
        transform: rotate(3deg) translateY(-2%);
    }
}

@keyframes bh-glide-b-g80fz0yazt {
    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-14cqw, -3cqh);
    }

    50% {
        transform: translate(-30cqw, 1cqh);
    }

    75% {
        transform: translate(-12cqw, 4cqh);
    }
}

@keyframes bh-flap-b-g80fz0yazt {
    to {
        transform: scaleY(0.6) translateY(8%);
    }
}

@keyframes bh-twinkle-b-g80fz0yazt {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bh-sway-b-g80fz0yazt {
    from {
        transform: rotate(-2.5deg);
    }

    to {
        transform: rotate(2.5deg);
    }
}

@keyframes bh-sway2-b-g80fz0yazt {
    from {
        transform: scale(0.7) rotate(2deg);
    }

    to {
        transform: scale(0.7) rotate(-3deg);
    }
}

/* Wide screens: the same drift would look hurried over a long distance. */
@media (min-width: 1000px) {
    .bh-c1[b-g80fz0yazt] {
        animation-duration: 260s;
    }

    .bh-c2[b-g80fz0yazt] {
        animation-duration: 210s;
    }

    .bh-c3[b-g80fz0yazt] {
        animation-duration: 320s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bh-anim[b-g80fz0yazt] {
        animation-play-state: paused;
    }

    .bh-glint[b-g80fz0yazt] {
        display: none;
    }
}
/* /Components/Biomes/BiomeBackdrop.razor.rz.scp.css */
/* Biome crossfade: layers stack in DOM order; the entering scene fades in on top of the old one, which stays
   opaque (no flash of the page behind) and frozen until it is removed. */
.bb[b-ke0chqbyp2] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
}

.bb-layer[b-ke0chqbyp2] {
    position: absolute;
    inset: 0;
}

.bb-layer.is-entering[b-ke0chqbyp2] {
    animation: bb-in-b-ke0chqbyp2 0.5s ease-in-out both;
}

/* Only one scene animates at a time: freeze everything in the scene that is fading out. */
.bb-layer.is-leaving[b-ke0chqbyp2]  * {
    animation-play-state: paused !important;
}

@keyframes bb-in-b-ke0chqbyp2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Biomes/CityBackdrop.razor.rz.scp.css */
/* Biome „Слова“: friendly little town behind the companion. Mirrors SceneBackdrop.razor.css (layers, units,
   clusters); only small HTML wrappers animate, and only transform/opacity. */
.ct[b-wo76hzcxbb] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    container-type: size;
    background: linear-gradient(180deg, #7ccafa 0%, #8fd3ff 18%, #b5e4ff 38%, #d8f2ff 50%, #f1f9fb 60%);
}

.ct svg[b-wo76hzcxbb] {
    position: absolute;
    display: block;
    overflow: visible;
}

/* Land: scale driven by the height (1 viewBox unit = 0.1cqh), x 1500 = centre of the companion stage. */
.ct-land[b-wo76hzcxbb] {
    top: 0;
    left: calc(-1 * var(--dock-w));
    width: calc(100% + var(--dock-w));
    height: 100%;
}

/* Light patch where the companion stands (feet ~7 % above the bottom of the stage). */
.ct-clear[b-wo76hzcxbb] {
    --stage-top: calc(var(--safe-top) + var(--hud-top-h));
    --stage-bottom: calc(var(--safe-bottom) + var(--dock-h));
    position: absolute;
    left: calc(var(--safe-left) + (100cqw - var(--safe-left) - var(--safe-right) - var(--dock-w)) / 2);
    top: calc(100cqh - var(--stage-bottom) - 0.07 * (100cqh - var(--stage-top) - var(--stage-bottom)));
    width: min(58cqh, 100cqw);
    height: min(13cqh, 23cqw);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 250, 228, 0.8) 0%, rgba(255, 246, 214, 0.5) 50%, rgba(255, 246, 214, 0) 100%);
}

/* Small animated pieces hold an SVG that fills them. */
.ct-fx svg[b-wo76hzcxbb] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Edge clusters: same scale as the land, anchored to the edges; on narrow screens they slide outwards so at
   most ~26 % of the width is covered on each side. */
.ct-cl[b-wo76hzcxbb] {
    top: 0;
    height: 100%;
    width: 52cqh;
}

.ct-cl-l[b-wo76hzcxbb] {
    left: calc(min(26cqw, 52cqh) - 52cqh);
}

.ct-cl-r[b-wo76hzcxbb] {
    right: calc(min(26cqw, 52cqh) - 52cqh + 0.6 * var(--dock-w));
}

/* Sun: static glow, slowly turning rays. */
.ct-sun[b-wo76hzcxbb] {
    --d: clamp(58px, 11cqmin, 118px);
    position: absolute;
    left: calc(29cqw - var(--d) / 2);
    top: calc(var(--safe-top) + var(--hud-top-h) + 1.5cqh);
    width: var(--d);
    height: var(--d);
}

.ct-glow[b-wo76hzcxbb] {
    position: absolute;
    left: -120%;
    top: -120%;
    width: 340%;
    height: 340%;
    background: radial-gradient(closest-side, rgba(255, 251, 222, 0.85) 0%, rgba(255, 248, 206, 0.42) 34%, rgba(255, 248, 206, 0.12) 66%, rgba(255, 248, 206, 0) 100%);
}

.ct-rays[b-wo76hzcxbb] {
    position: absolute;
    left: -90%;
    top: -90%;
    width: 280%;
    height: 280%;
    will-change: transform;
    animation: ct-spin-b-wo76hzcxbb 150s linear infinite;
}

.ct-rays svg[b-wo76hzcxbb] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Clouds drift across the whole sky; negative delays spread them out. */
.ct-cloud[b-wo76hzcxbb] {
    position: absolute;
    left: 0;
    aspect-ratio: 12 / 5;
    will-change: transform;
    animation: ct-drift-b-wo76hzcxbb 120s linear infinite;
}

.ct-cloud svg[b-wo76hzcxbb] {
    inset: 0;
    width: 100%;
    height: 100%;
}

.ct-c1[b-wo76hzcxbb] {
    top: calc(var(--safe-top) + 1cqh);
    width: clamp(84px, 19cqmin, 190px);
    opacity: 0.8;
    animation-duration: 160s;
    animation-delay: -112s;
}

.ct-c2[b-wo76hzcxbb] {
    top: calc(var(--safe-top) + var(--hud-top-h) + 8cqh);
    width: clamp(108px, 27cqmin, 260px);
    animation-duration: 125s;
    animation-delay: -82s;
}

.ct-c3[b-wo76hzcxbb] {
    top: 33cqh;
    width: clamp(76px, 16cqmin, 170px);
    opacity: 0.9;
    animation-duration: 190s;
    animation-delay: -150s;
}

/* Bus: drives along the street (wheels on the near lane, y 645), then stays off-screen for a while. */
.ct-bus[b-wo76hzcxbb] {
    position: absolute;
    left: 0;
    top: 58.6cqh;
    width: 13cqh;
    aspect-ratio: 160 / 72;
    will-change: transform;
    animation: ct-bus-b-wo76hzcxbb 44s linear infinite;
    animation-delay: -9s;
}

.ct-bob[b-wo76hzcxbb] {
    position: absolute;
    inset: 0;
    animation: ct-bob-b-wo76hzcxbb 0.5s ease-in-out infinite alternate;
}

/* Birds: a little flock crossing the sky from right to left. */
.ct-birds[b-wo76hzcxbb] {
    position: absolute;
    left: 0;
    top: calc(var(--safe-top) + var(--hud-top-h) + 14cqh);
    width: clamp(48px, 9cqmin, 90px);
    aspect-ratio: 2;
    will-change: transform;
    animation: ct-fly-b-wo76hzcxbb 52s linear infinite;
    animation-delay: -30s;
}

.ct-flap[b-wo76hzcxbb] {
    position: absolute;
    inset: 0;
    animation: ct-flap-b-wo76hzcxbb 0.38s ease-in-out infinite alternate;
}

/* Clock hands on the tower face (right cluster, face centre at x 65 / y 268). */
.ct-hands[b-wo76hzcxbb] {
    position: absolute;
    left: calc(100cqw - min(26cqw, 52cqh) - 0.6 * var(--dock-w) + 1.8cqh);
    top: 33.1cqh;
    width: 9.4cqh;
    height: 9.4cqh;
}

.ct-hh[b-wo76hzcxbb],
.ct-hm[b-wo76hzcxbb] {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.ct-hm[b-wo76hzcxbb] {
    animation: ct-spin-b-wo76hzcxbb 60s linear infinite;
}

.ct-hh[b-wo76hzcxbb] {
    transform: rotate(-60deg);
    animation: ct-spin-b-wo76hzcxbb 720s linear infinite;
    animation-delay: -600s;
}

/* Balloon: drifts up from the lower left now and then, fading out before the HUD. */
.ct-balloon[b-wo76hzcxbb] {
    position: absolute;
    left: 10cqw;
    top: 66cqh;
    width: clamp(22px, 4.2cqmin, 40px);
    aspect-ratio: 1 / 2;
    opacity: 0;
    will-change: transform, opacity;
    animation: ct-rise-b-wo76hzcxbb 36s ease-in-out infinite;
    animation-delay: -4s;
}

.ct-sway[b-wo76hzcxbb] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    animation: ct-sway-b-wo76hzcxbb 3.2s ease-in-out infinite alternate;
}

@keyframes ct-spin-b-wo76hzcxbb {
    to {
        transform: rotate(1turn);
    }
}

@keyframes ct-drift-b-wo76hzcxbb {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100cqw);
    }
}

@keyframes ct-bus-b-wo76hzcxbb {
    0% {
        transform: translateX(-100%);
    }

    55%,
    100% {
        transform: translateX(100cqw);
    }
}

@keyframes ct-bob-b-wo76hzcxbb {
    to {
        transform: translateY(-1.5%);
    }
}

@keyframes ct-fly-b-wo76hzcxbb {
    0% {
        transform: translate(100cqw, 0);
    }

    30% {
        transform: translate(60cqw, -3cqh);
    }

    60%,
    100% {
        transform: translate(-100%, 1cqh);
    }
}

@keyframes ct-flap-b-wo76hzcxbb {
    to {
        transform: scaleY(0.45);
    }
}

@keyframes ct-rise-b-wo76hzcxbb {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    6% {
        opacity: 1;
    }

    30% {
        transform: translate(5cqw, -22cqh);
    }

    48% {
        opacity: 0.9;
    }

    56%,
    100% {
        opacity: 0;
        transform: translate(1cqw, -46cqh);
    }
}

@keyframes ct-sway-b-wo76hzcxbb {
    from {
        transform: rotate(-6deg);
    }

    to {
        transform: rotate(6deg);
    }
}

/* Wide screens: the same drift would look hurried over a long distance. */
@media (min-width: 1000px) {
    .ct-c1[b-wo76hzcxbb] {
        animation-duration: 260s;
    }

    .ct-c2[b-wo76hzcxbb] {
        animation-duration: 210s;
    }

    .ct-c3[b-wo76hzcxbb] {
        animation-duration: 320s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-anim[b-wo76hzcxbb] {
        animation-play-state: paused;
    }

    .ct-balloon[b-wo76hzcxbb] {
        display: none;
    }
}
/* /Components/Biomes/MountainBackdrop.razor.rz.scp.css */
/* Biome „Речи“: alpine meadow below snowy peaks. Mirrors SceneBackdrop.razor.css (layers, units, clusters);
   only small HTML wrappers animate, and only transform/opacity. */
.mt[b-hxkda25zbz] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    container-type: size;
    background: linear-gradient(180deg, #6ec3f7 0%, #8fd3ff 20%, #b9e6ff 40%, #e0f5ff 52%, #f0faf4 58%);
}

.mt svg[b-hxkda25zbz] {
    position: absolute;
    display: block;
    overflow: visible;
}

/* Land: scale driven by the height (1 viewBox unit = 0.1cqh), x 1500 = centre of the companion stage. */
.mt-land[b-hxkda25zbz] {
    top: 0;
    left: calc(-1 * var(--dock-w));
    width: calc(100% + var(--dock-w));
    height: 100%;
}

/* Light patch where the companion stands (feet ~7 % above the bottom of the stage). */
.mt-clear[b-hxkda25zbz] {
    --stage-top: calc(var(--safe-top) + var(--hud-top-h));
    --stage-bottom: calc(var(--safe-bottom) + var(--dock-h));
    position: absolute;
    left: calc(var(--safe-left) + (100cqw - var(--safe-left) - var(--safe-right) - var(--dock-w)) / 2);
    top: calc(100cqh - var(--stage-bottom) - 0.07 * (100cqh - var(--stage-top) - var(--stage-bottom)));
    width: min(58cqh, 100cqw);
    height: min(13cqh, 23cqw);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(236, 251, 186, 0.88) 0%, rgba(222, 247, 164, 0.66) 45%, rgba(205, 240, 140, 0.3) 75%, rgba(205, 240, 140, 0) 100%);
}

/* Small animated pieces hold an SVG that fills them. */
.mt-fx svg[b-hxkda25zbz] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Edge clusters: same scale as the land, anchored to the edges; on narrow screens they slide outwards so at
   most ~26 % of the width is covered on each side. */
.mt-cl[b-hxkda25zbz] {
    top: 0;
    height: 100%;
    width: 52cqh;
}

.mt-cl-l[b-hxkda25zbz] {
    left: calc(min(26cqw, 52cqh) - 52cqh);
}

.mt-cl-r[b-hxkda25zbz] {
    right: calc(min(26cqw, 52cqh) - 52cqh + 0.6 * var(--dock-w));
}

/* Sun: static glow, slowly turning rays. */
.mt-sun[b-hxkda25zbz] {
    --d: clamp(58px, 11cqmin, 118px);
    position: absolute;
    left: calc(29cqw - var(--d) / 2);
    top: calc(var(--safe-top) + var(--hud-top-h) + 1.5cqh);
    width: var(--d);
    height: var(--d);
}

.mt-glow[b-hxkda25zbz] {
    position: absolute;
    left: -120%;
    top: -120%;
    width: 340%;
    height: 340%;
    background: radial-gradient(closest-side, rgba(255, 251, 222, 0.85) 0%, rgba(255, 248, 206, 0.42) 34%, rgba(255, 248, 206, 0.12) 66%, rgba(255, 248, 206, 0) 100%);
}

.mt-rays[b-hxkda25zbz] {
    position: absolute;
    left: -90%;
    top: -90%;
    width: 280%;
    height: 280%;
    will-change: transform;
    animation: mt-spin-b-hxkda25zbz 150s linear infinite;
}

.mt-rays svg[b-hxkda25zbz] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Clouds drift across the whole sky; negative delays spread them out. */
.mt-cloud[b-hxkda25zbz] {
    position: absolute;
    left: 0;
    aspect-ratio: 12 / 5;
    will-change: transform;
    animation: mt-drift-b-hxkda25zbz 120s linear infinite;
}

.mt-cloud svg[b-hxkda25zbz] {
    inset: 0;
    width: 100%;
    height: 100%;
}

.mt-c1[b-hxkda25zbz] {
    top: calc(var(--safe-top) + 1cqh);
    width: clamp(84px, 19cqmin, 190px);
    opacity: 0.8;
    animation-duration: 160s;
    animation-delay: -112s;
}

.mt-c2[b-hxkda25zbz] {
    top: calc(var(--safe-top) + var(--hud-top-h) + 8cqh);
    width: clamp(108px, 27cqmin, 260px);
    animation-duration: 125s;
    animation-delay: -82s;
}

.mt-c3[b-hxkda25zbz] {
    top: 33cqh;
    width: clamp(76px, 16cqmin, 170px);
    opacity: 0.9;
    animation-duration: 190s;
    animation-delay: -150s;
}

/* Waterfall on the cliff (right cluster, water column x 52-90 / y 428-788): streaks slide down inside a clip. */
.mt-falls[b-hxkda25zbz] {
    position: absolute;
    left: calc(100cqw - min(26cqw, 52cqh) - 0.6 * var(--dock-w) + 7.9cqh);
    top: 53.1cqh;
    width: 2.85cqh;
    height: 27cqh;
    overflow: hidden;
}

.mt-flow[b-hxkda25zbz] {
    position: absolute;
    left: 0;
    top: -27cqh;
    width: 100%;
    height: 54cqh;
    will-change: transform;
    animation: mt-flow-b-hxkda25zbz 1.6s linear infinite;
}

.mt-flow svg[b-hxkda25zbz] {
    inset: 0;
    width: 100%;
    height: 100%;
}

.mt-mist[b-hxkda25zbz] {
    position: absolute;
    left: calc(100cqw - min(26cqw, 52cqh) - 0.6 * var(--dock-w) + 4.4cqh);
    top: 78.2cqh;
    width: 10cqh;
    height: 5cqh;
    will-change: transform, opacity;
    animation: mt-mist-b-hxkda25zbz 2.4s ease-in-out infinite alternate;
}

/* Chimney smoke (left cluster, chimney top at x 487 / y 594). */
.mt-smoke[b-hxkda25zbz] {
    position: absolute;
    left: calc(min(26cqw, 52cqh) - 52cqh + 47.5cqh);
    top: 57.2cqh;
    width: 2.4cqh;
    height: 2.4cqh;
    opacity: 0;
    will-change: transform, opacity;
    animation: mt-smoke-b-hxkda25zbz 6s ease-out infinite;
}

.mt-sm2[b-hxkda25zbz] {
    animation-delay: -2s;
}

.mt-sm3[b-hxkda25zbz] {
    animation-delay: -4s;
}

/* Eagle soaring in slow wide loops high above the valley. */
.mt-eagle[b-hxkda25zbz] {
    position: absolute;
    left: 50cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 12cqh);
    width: clamp(54px, 10cqmin, 100px);
    aspect-ratio: 5 / 2;
    will-change: transform;
    animation: mt-soar-b-hxkda25zbz 34s ease-in-out infinite;
}

.mt-bank[b-hxkda25zbz] {
    position: absolute;
    inset: 0;
    animation: mt-bank-b-hxkda25zbz 4s ease-in-out infinite alternate;
}

@keyframes mt-spin-b-hxkda25zbz {
    to {
        transform: rotate(1turn);
    }
}

@keyframes mt-drift-b-hxkda25zbz {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100cqw);
    }
}

@keyframes mt-flow-b-hxkda25zbz {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(50%);
    }
}

@keyframes mt-mist-b-hxkda25zbz {
    from {
        opacity: 0.65;
        transform: scale(0.92);
    }

    to {
        opacity: 0.95;
        transform: scale(1.06) translateY(-4%);
    }
}

@keyframes mt-smoke-b-hxkda25zbz {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    15% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform: translate(2.5cqh, -9cqh) scale(2.2);
    }
}

@keyframes mt-soar-b-hxkda25zbz {
    0%,
    100% {
        transform: translate(-30cqw, 0);
    }

    25% {
        transform: translate(5cqw, -4cqh);
    }

    50% {
        transform: translate(25cqw, 2cqh);
    }

    75% {
        transform: translate(-5cqw, 5cqh);
    }
}

@keyframes mt-bank-b-hxkda25zbz {
    from {
        transform: rotate(-7deg);
    }

    to {
        transform: rotate(6deg) translateY(-6%);
    }
}

/* Wide screens: the same drift would look hurried over a long distance. */
@media (min-width: 1000px) {
    .mt-c1[b-hxkda25zbz] {
        animation-duration: 260s;
    }

    .mt-c2[b-hxkda25zbz] {
        animation-duration: 210s;
    }

    .mt-c3[b-hxkda25zbz] {
        animation-duration: 320s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt-anim[b-hxkda25zbz] {
        animation-play-state: paused;
    }

    .mt-smoke[b-hxkda25zbz] {
        display: none;
    }
}
/* /Components/Biomes/SpaceBackdrop.razor.rz.scp.css */
/* Biome „Реченице“: friendly pastel space behind the companion. Mirrors SceneBackdrop.razor.css (layers, units,
   clusters); only small HTML wrappers animate, and only transform/opacity. */
.sp[b-0bms2dt082] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    container-type: size;
    background: linear-gradient(180deg, #34266f 0%, #4b3393 22%, #6c4cb5 40%, #9b78d6 52%, #d7b8f2 60%);
}

.sp svg[b-0bms2dt082] {
    position: absolute;
    display: block;
    overflow: visible;
}

/* Land: scale driven by the height (1 viewBox unit = 0.1cqh), x 1500 = centre of the companion stage. */
.sp-land[b-0bms2dt082] {
    top: 0;
    left: calc(-1 * var(--dock-w));
    width: calc(100% + var(--dock-w));
    height: 100%;
}

/* Light patch where the companion stands (feet ~7 % above the bottom of the stage). */
.sp-clear[b-0bms2dt082] {
    --stage-top: calc(var(--safe-top) + var(--hud-top-h));
    --stage-bottom: calc(var(--safe-bottom) + var(--dock-h));
    position: absolute;
    left: calc(var(--safe-left) + (100cqw - var(--safe-left) - var(--safe-right) - var(--dock-w)) / 2);
    top: calc(100cqh - var(--stage-bottom) - 0.07 * (100cqh - var(--stage-top) - var(--stage-bottom)));
    width: min(58cqh, 100cqw);
    height: min(13cqh, 23cqw);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 248, 255, 0.85) 0%, rgba(246, 232, 255, 0.55) 50%, rgba(246, 232, 255, 0) 100%);
}

/* Small animated pieces hold an SVG that fills them. */
.sp-fx svg[b-0bms2dt082] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Edge clusters: same scale as the land, anchored to the edges; on narrow screens they slide outwards so at
   most ~26 % of the width is covered on each side. */
.sp-cl[b-0bms2dt082] {
    top: 0;
    height: 100%;
    width: 52cqh;
}

.sp-cl-l[b-0bms2dt082] {
    left: calc(min(26cqw, 52cqh) - 52cqh);
}

.sp-cl-r[b-0bms2dt082] {
    right: calc(min(26cqw, 52cqh) - 52cqh + 0.6 * var(--dock-w));
}

/* Soft nebula glows (static). */
.sp-neb[b-0bms2dt082] {
    position: absolute;
    border-radius: 50%;
}

.sp-n1[b-0bms2dt082] {
    left: -20cqw;
    top: 8cqh;
    width: 90cqw;
    height: 40cqh;
    background: radial-gradient(closest-side, rgba(255, 158, 210, 0.35), rgba(255, 158, 210, 0));
}

.sp-n2[b-0bms2dt082] {
    left: 40cqw;
    top: 26cqh;
    width: 90cqw;
    height: 36cqh;
    background: radial-gradient(closest-side, rgba(127, 227, 224, 0.28), rgba(127, 227, 224, 0));
}

/* Smiling crescent moon where the other biomes have the sun; it bobs gently. */
.sp-moon[b-0bms2dt082] {
    --d: clamp(64px, 12cqmin, 128px);
    position: absolute;
    left: calc(29cqw - var(--d) / 2);
    top: calc(var(--safe-top) + var(--hud-top-h) + 1.5cqh);
    width: var(--d);
    height: var(--d);
}

.sp-mglow[b-0bms2dt082] {
    position: absolute;
    left: -80%;
    top: -80%;
    width: 260%;
    height: 260%;
    background: radial-gradient(closest-side, rgba(255, 240, 190, 0.5) 0%, rgba(255, 230, 170, 0.18) 50%, rgba(255, 230, 170, 0) 100%);
}

.sp-mbob[b-0bms2dt082] {
    position: absolute;
    inset: 0;
    will-change: transform;
    animation: sp-bob-b-0bms2dt082 7s ease-in-out infinite alternate;
}

/* Ringed planet floating on the right. */
.sp-planet[b-0bms2dt082] {
    position: absolute;
    left: 62cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 14cqh);
    width: clamp(90px, 22cqmin, 210px);
    aspect-ratio: 3 / 2;
    will-change: transform;
    animation: sp-float-b-0bms2dt082 9s ease-in-out infinite alternate;
}

/* Twinkling stars. */
.sp-tw[b-0bms2dt082] {
    position: absolute;
    width: clamp(10px, 2cqmin, 20px);
    aspect-ratio: 1;
    will-change: transform, opacity;
    animation: sp-twinkle-b-0bms2dt082 3s ease-in-out infinite;
}

.sp-tw1[b-0bms2dt082] {
    left: 12cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 22cqh);
}

.sp-tw2[b-0bms2dt082] {
    left: 50cqw;
    top: calc(var(--safe-top) + var(--hud-top-h) + 4cqh);
    animation-delay: -1s;
}

.sp-tw3[b-0bms2dt082] {
    left: 84cqw;
    top: 44cqh;
    animation-delay: -2.2s;
    animation-duration: 4s;
}

.sp-tw4[b-0bms2dt082] {
    left: 40cqw;
    top: 36cqh;
    animation-delay: -0.6s;
    animation-duration: 3.6s;
}

.sp-tw5[b-0bms2dt082] {
    left: 70cqw;
    top: calc(var(--safe-top) + 3cqh);
    animation-delay: -1.7s;
}

.sp-tw6[b-0bms2dt082] {
    left: 22cqw;
    top: 47cqh;
    animation-delay: -2.8s;
    animation-duration: 4.4s;
}

/* Shooting star: a quick streak now and then, then a long pause. */
.sp-comet[b-0bms2dt082] {
    position: absolute;
    left: 0;
    top: calc(var(--safe-top) + var(--hud-top-h) + 2cqh);
    width: clamp(90px, 22cqmin, 200px);
    aspect-ratio: 10 / 1;
    opacity: 0;
    will-change: transform, opacity;
    animation: sp-comet-b-0bms2dt082 14s ease-out infinite;
    animation-delay: -12.6s;
}

/* Little rocket drifting slowly across the sky, flame flickering. */
.sp-rocket[b-0bms2dt082] {
    position: absolute;
    left: 0;
    top: 50cqh;
    width: clamp(30px, 6cqmin, 56px);
    aspect-ratio: 1 / 2;
    will-change: transform;
    animation: sp-fly-b-0bms2dt082 46s linear infinite;
    animation-delay: -20s;
}

.sp-rtilt[b-0bms2dt082] {
    position: absolute;
    inset: 0;
    transform: rotate(58deg);
}

.sp-flame[b-0bms2dt082] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 77%;
    animation: sp-flick-b-0bms2dt082 0.18s ease-in-out infinite alternate;
}

@keyframes sp-bob-b-0bms2dt082 {
    from {
        transform: translateY(0) rotate(-4deg);
    }

    to {
        transform: translateY(-6%) rotate(4deg);
    }
}

@keyframes sp-float-b-0bms2dt082 {
    from {
        transform: translateY(0) rotate(-2deg);
    }

    to {
        transform: translateY(-1.6cqh) rotate(2deg);
    }
}

@keyframes sp-twinkle-b-0bms2dt082 {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sp-comet-b-0bms2dt082 {
    0% {
        opacity: 0;
        transform: translate(-10cqw, 0) rotate(18deg);
    }

    2% {
        opacity: 1;
    }

    9% {
        opacity: 0;
        transform: translate(70cqw, 22cqh) rotate(18deg);
    }

    100% {
        opacity: 0;
        transform: translate(70cqw, 22cqh) rotate(18deg);
    }
}

@keyframes sp-fly-b-0bms2dt082 {
    from {
        transform: translate(-12cqw, 0);
    }

    to {
        transform: translate(112cqw, -26cqh);
    }
}

@keyframes sp-flick-b-0bms2dt082 {
    from {
        transform: scaleY(0.8);
    }

    to {
        transform: scaleY(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-anim[b-0bms2dt082] {
        animation-play-state: paused;
    }

    .sp-comet[b-0bms2dt082] {
        display: none;
    }
}
/* /Components/ComingSoonPanel.razor.rz.scp.css */
/* "Coming soon" bottom sheet over a dimmed backdrop (tap the backdrop or „У реду!“ to close). */
.cs[b-lmv76zlv9s] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    overflow: hidden;
}

.cs--forest[b-lmv76zlv9s]   { --c1: var(--c-forest-1);   --c2: var(--c-forest-2);   --c3: #2c7a31; --ct: #2e7d32; }
.cs--city[b-lmv76zlv9s]     { --c1: var(--c-city-1);     --c2: var(--c-city-2);     --c3: #c23a0d; --ct: #d84315; }
.cs--beach[b-lmv76zlv9s]    { --c1: var(--c-beach-1);    --c2: var(--c-beach-2);    --c3: #155fb3; --ct: #1565c0; }
.cs--mountain[b-lmv76zlv9s] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5a32a8; --ct: #5e35b1; }
.cs--space[b-lmv76zlv9s]    { --c1: var(--c-space-1);    --c2: var(--c-space-2);    --c3: #232f7e; --ct: #283593; }

.cs__backdrop[b-lmv76zlv9s] {
    position: absolute;
    inset: 0;
    background: rgba(52, 30, 12, 0.5);
    animation: cs-fade-in-b-lmv76zlv9s 0.25s ease-out both;
}

.cs__sheet[b-lmv76zlv9s] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 64px 22px calc(20px + var(--safe-bottom));
    border-radius: 34px 34px 0 0;
    background:
        radial-gradient(rgba(244, 144, 12, 0.08) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fffdf7 0%, #fff1da 100%);
    border: 4px solid #ffffff;
    border-bottom: 0;
    box-shadow: 0 -10px 30px rgba(52, 30, 12, 0.3);
    text-align: center;
    animation: cs-up-b-lmv76zlv9s 0.5s cubic-bezier(0.3, 1.25, 0.55, 1) both;
}

/* Soft wash of the area colour along the top edge. */
.cs__sheet[b-lmv76zlv9s]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, var(--c1, #ffcc80) 0%, transparent 100%);
    opacity: 0.32;
    pointer-events: none;
}

/* ---------- Area icon tile, half above the sheet ---------- */
.cs__icon[b-lmv76zlv9s] {
    --size: 104px;
    --edge: 8px;
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--size);
    height: calc(var(--size) + var(--edge));
    margin: calc(var(--size) * -0.56) 0 0 calc(var(--size) * -0.5);
    animation: cs-icon-in-b-lmv76zlv9s 0.6s var(--ease-pop) 0.12s both;
}

.cs__icon-base[b-lmv76zlv9s],
.cs__icon-face[b-lmv76zlv9s] {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--size);
    border-radius: 32%;
    border: 4px solid #ffffff;
}

.cs__icon-base[b-lmv76zlv9s] {
    top: var(--edge);
    background: var(--c3, #8d6e63);
    box-shadow: 0 8px 16px rgba(61, 42, 28, 0.3);
}

.cs__icon-face[b-lmv76zlv9s] {
    top: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--c1, #ffcc80) 0%, var(--c2, #fb8c00) 100%);
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12);
}

.cs__icon-gloss[b-lmv76zlv9s] {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 5%;
    height: 36%;
    border-radius: 999px 999px 60% 60%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.cs__icon-art[b-lmv76zlv9s] {
    position: relative;
    display: grid;
    width: 74%;
    height: 74%;
    margin-top: -4%;
}

.cs__ribbon[b-lmv76zlv9s] {
    position: absolute;
    left: 70%;
    top: -12px;
    padding: 5px 13px 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ff74a0 0%, #ff3d7a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #c2185b, 0 6px 12px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(150, 10, 60, 0.45);
    transform: rotate(12deg);
    animation: cs-ribbon-in-b-lmv76zlv9s 0.55s var(--ease-pop) 0.32s both;
}

/* ---------- Text ---------- */
.cs__title[b-lmv76zlv9s] {
    position: relative;
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.3px;
    color: var(--ct, var(--c-text));
}

.cs__teaser[b-lmv76zlv9s] {
    position: relative;
    max-width: 400px;
    margin: 8px auto 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--c-text);
    text-wrap: balance;
}

.cs__friend[b-lmv76zlv9s] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: #ffe4c2;
    color: #8a4710;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.cs__paw[b-lmv76zlv9s] {
    display: grid;
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--c-fox);
    transform: rotate(-14deg);
}

/* ---------- „У реду!“ candy button ---------- */
.cs__ok[b-lmv76zlv9s] {
    position: relative;
    display: block;
    width: min(100%, 340px);
    height: 66px;
    margin: 18px auto 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.cs__ok-base[b-lmv76zlv9s],
.cs__ok-face[b-lmv76zlv9s] {
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    border-radius: 22px;
    border: 3px solid #ffffff;
}

.cs__ok-base[b-lmv76zlv9s] {
    top: 6px;
    background: var(--c3, #8d6e63);
    box-shadow: 0 6px 14px rgba(61, 42, 28, 0.28);
}

.cs__ok-face[b-lmv76zlv9s] {
    top: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--c1, #ffcc80) 0%, var(--c2, #fb8c00) 100%);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-shadow:
        0 1.5px 0 var(--c3), 0 -1.5px 0 var(--c3), 1.5px 0 0 var(--c3), -1.5px 0 0 var(--c3),
        1px 1px 0 var(--c3), -1px 1px 0 var(--c3), 1px -1px 0 var(--c3), -1px -1px 0 var(--c3),
        0 3px 0 var(--c3);
    transform-origin: 50% 100%;
    transition: transform 0.4s var(--ease-pop);
}

.cs__ok.is-pressed .cs__ok-face[b-lmv76zlv9s],
.cs__ok:active .cs__ok-face[b-lmv76zlv9s] {
    transform: translateY(5px) scale(1.02, 0.95);
    transition-duration: 0.07s;
    transition-timing-function: ease-out;
}

.cs__ok:focus-visible[b-lmv76zlv9s] {
    outline: none;
}

.cs__ok:focus-visible .cs__ok-face[b-lmv76zlv9s] {
    outline: 3px solid var(--c-text);
    outline-offset: 3px;
}

/* ---------- Closing ---------- */
.cs.is-closing[b-lmv76zlv9s] {
    pointer-events: none;
}

.cs.is-closing .cs__backdrop[b-lmv76zlv9s] {
    animation: cs-fade-out-b-lmv76zlv9s 0.26s ease-in both;
}

.cs.is-closing .cs__sheet[b-lmv76zlv9s] {
    animation: cs-down-b-lmv76zlv9s 0.26s cubic-bezier(0.5, 0, 0.9, 0.5) both;
}

@keyframes cs-up-b-lmv76zlv9s {
    from { transform: translateY(calc(100% + 90px)); }
    to { transform: translateY(0); }
}

@keyframes cs-down-b-lmv76zlv9s {
    from { transform: translateY(0); }
    to { transform: translateY(calc(100% + 90px)); }
}

@keyframes cs-fade-in-b-lmv76zlv9s {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cs-fade-out-b-lmv76zlv9s {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes cs-icon-in-b-lmv76zlv9s {
    0% { transform: scale(0.3) rotate(-25deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(-5deg); opacity: 1; }
}

@keyframes cs-ribbon-in-b-lmv76zlv9s {
    0% { transform: scale(0) rotate(-30deg); }
    100% { transform: scale(1) rotate(12deg); }
}

/* Tablet / desktop: a floating card instead of an edge-to-edge sheet. */
@media (min-width: 768px) and (min-height: 700px) {
    .cs__sheet[b-lmv76zlv9s] {
        bottom: calc(var(--safe-bottom) + 32px);
        max-width: 560px;
        padding: 74px 30px 28px;
        border-radius: 38px;
        border-bottom: 4px solid #ffffff;
    }

    .cs__icon[b-lmv76zlv9s] {
        --size: 120px;
    }

    .cs__title[b-lmv76zlv9s] { font-size: 38px; }
    .cs__teaser[b-lmv76zlv9s] { font-size: 22px; }
    .cs__friend[b-lmv76zlv9s] { font-size: 18px; }
}

/* Phone landscape: compact so the whole sheet fits the short screen. */
@media (orientation: landscape) and (max-height: 560px) {
    .cs__sheet[b-lmv76zlv9s] {
        max-width: 560px;
        padding: 46px 22px calc(12px + var(--safe-bottom));
        border-radius: 30px 30px 0 0;
    }

    .cs__sheet[b-lmv76zlv9s]::before {
        height: 70px;
    }

    .cs__icon[b-lmv76zlv9s] {
        --size: 78px;
        --edge: 6px;
    }

    .cs__ribbon[b-lmv76zlv9s] {
        top: -10px;
        padding: 4px 10px 5px;
        font-size: 15px;
    }

    .cs__title[b-lmv76zlv9s] { font-size: 26px; }
    .cs__teaser[b-lmv76zlv9s] { margin-top: 4px; font-size: 17px; }
    .cs__friend[b-lmv76zlv9s] { margin-top: 8px; padding: 6px 14px 6px 10px; font-size: 15px; }
    .cs__ok[b-lmv76zlv9s] { margin-top: 10px; height: 62px; }
    .cs__ok-base[b-lmv76zlv9s], .cs__ok-face[b-lmv76zlv9s] { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs__sheet[b-lmv76zlv9s] {
        animation: cs-fade-in-b-lmv76zlv9s 0.2s ease-out both;
    }

    .cs.is-closing .cs__sheet[b-lmv76zlv9s] {
        animation: cs-fade-out-b-lmv76zlv9s 0.2s ease-in both;
    }

    .cs__icon[b-lmv76zlv9s],
    .cs__ribbon[b-lmv76zlv9s] {
        animation: none;
    }
}
/* /Components/FriendFace.razor.rz.scp.css */
.face[b-2xfcy74hh4] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    container-type: inline-size;
}

.face__img[b-2xfcy74hh4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18) translateY(4%);
    pointer-events: none;
}

.face__emoji[b-2xfcy74hh4] {
    font-size: 62cqw;
    line-height: 1;
}
/* /Components/LevelUpOverlay.razor.rz.scp.css */
/* Level-up celebration. Rays, burst and confetti live inside the card so they are centred on the badge.
   Everything animates transform/opacity only. */
.lvlup[b-3i751a4buy] {
    position: fixed;
    inset: 0;
    z-index: var(--z-effects);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    animation: lvl-fade-in-b-3i751a4buy 0.3s ease-out both;
}

.lvlup.is-leaving[b-3i751a4buy] {
    pointer-events: none;
    animation: lvl-fade-out-b-3i751a4buy 0.38s ease-in both;
}

.lvlup__dim[b-3i751a4buy] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(255, 190, 90, 0.5) 0%, rgba(150, 64, 10, 0.72) 62%, rgba(80, 30, 5, 0.84) 100%);
}

.lvlup__card[b-3i751a4buy] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -4vh;
    text-align: center;
    animation: lvl-card-b-3i751a4buy 0.7s var(--ease-pop) both;
}

.lvlup__hero[b-3i751a4buy] {
    --badge: 150px;
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--badge) * 1.5);
    height: calc(var(--badge) * 1.32);
}

.lvlup__rays[b-3i751a4buy] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -2;
    width: 200vmax;
    height: 200vmax;
    margin: -100vmax 0 0 -100vmax;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 240, 190, 0.36) 0deg 9deg, rgba(255, 240, 190, 0) 9deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000000 0%, rgba(0, 0, 0, 0.85) 14%, rgba(0, 0, 0, 0) 48%);
    mask-image: radial-gradient(circle closest-side, #000000 0%, rgba(0, 0, 0, 0.85) 14%, rgba(0, 0, 0, 0) 48%);
    animation: lvl-spin-b-3i751a4buy 24s linear infinite;
}

.lvlup__burst[b-3i751a4buy] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: calc(var(--badge) * 1.55);
    height: calc(var(--badge) * 1.55);
    margin: calc(var(--badge) * -0.775) 0 0 calc(var(--badge) * -0.775);
    overflow: visible;
    animation: lvl-spin-rev-b-3i751a4buy 16s linear infinite;
}

.lvlup__badge[b-3i751a4buy] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--badge);
    height: var(--badge);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffe08a 0%, #ffad33 46%, #f27a0c 100%);
    border: calc(var(--badge) * 0.047) solid #ffffff;
    box-shadow:
        inset 0 calc(var(--badge) * -0.06) 0 rgba(160, 60, 0, 0.22),
        inset 0 calc(var(--badge) * 0.045) 0 rgba(255, 255, 255, 0.45),
        0 calc(var(--badge) * 0.045) 0 #c55a00,
        0 18px 34px rgba(80, 30, 0, 0.45);
    animation: lvl-badge-b-3i751a4buy 0.9s var(--ease-pop) 0.05s both;
}

.lvlup__num[b-3i751a4buy] {
    margin-top: calc(var(--badge) * -0.07);
    font-size: calc(var(--badge) * 0.53);
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 3px 0 #b34d00, 0 -3px 0 #b34d00, 3px 0 0 #b34d00, -3px 0 0 #b34d00,
        2.2px 2.2px 0 #b34d00, -2.2px 2.2px 0 #b34d00, 2.2px -2.2px 0 #b34d00, -2.2px -2.2px 0 #b34d00,
        0 6px 0 #b34d00;
}

.lvlup__ribbon[b-3i751a4buy] {
    position: absolute;
    left: 50%;
    bottom: calc(var(--badge) * -0.11);
    transform: translateX(-50%);
    padding: 3px 16px 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6b81 0%, #e2405e 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 3px 0 #a8253f;
    color: #ffffff;
    font-size: calc(var(--badge) * 0.146);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.lvlup__title[b-3i751a4buy] {
    margin: 18px 0 0;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow:
        0 3px 0 #e8590c, 0 -3px 0 #e8590c, 3px 0 0 #e8590c, -3px 0 0 #e8590c,
        2.2px 2.2px 0 #e8590c, -2.2px 2.2px 0 #e8590c, 2.2px -2.2px 0 #e8590c, -2.2px -2.2px 0 #e8590c,
        0 7px 0 #b54708, 0 12px 20px rgba(80, 30, 0, 0.45);
    animation: lvl-drop-b-3i751a4buy 0.6s var(--ease-pop) 0.18s both;
}

.lvlup__sub[b-3i751a4buy] {
    margin: 10px 0 0;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: #fff6dc;
    text-shadow: 0 3px 0 rgba(130, 50, 0, 0.6);
    animation: lvl-drop-b-3i751a4buy 0.6s var(--ease-pop) 0.3s both;
}

.lvlup__reward[b-3i751a4buy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    padding: 6px 12px 6px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fffdf6 0%, #fff0d2 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 4px 0 #e0ac5f, 0 10px 18px rgba(80, 30, 0, 0.35);
    color: var(--c-text);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    animation: lvl-pop-b-3i751a4buy 0.55s var(--ease-pop) 0.45s both;
}

.lvlup__star[b-3i751a4buy] {
    display: grid;
    width: 42px;
    height: 42px;
    animation: lvl-star-b-3i751a4buy 1.6s ease-in-out 1s infinite;
}

/* ---------- Confetti: burst out of the badge, then tumble down ---------- */
.lvlup__confetti[b-3i751a4buy] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 0;
    height: 0;
}

.cf[b-3i751a4buy] {
    position: absolute;
    left: -5px;
    top: -7px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: var(--c, #ffc93c);
    opacity: 0;
    animation: cf-fly-b-3i751a4buy var(--dur, 2.5s) linear var(--dl, 0s) both;
}

.cf--dot[b-3i751a4buy] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.cf--strip[b-3i751a4buy] {
    width: 6px;
    height: 18px;
    border-radius: 3px;
}

@keyframes cf-fly-b-3i751a4buy {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.3);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.15, 0.75, 0.35, 1);
    }
    5% { opacity: 1; }
    26% {
        transform: translate(var(--bx), var(--by)) rotate(calc(var(--rot) * 0.3)) scale(1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.75, 0.6);
    }
    85% { opacity: 1; }
    100% {
        transform: translate(calc(var(--bx) + var(--dr)), calc(var(--by) + 90vh)) rotate(var(--rot)) scale(1);
        opacity: 0;
    }
}

@keyframes lvl-fade-in-b-3i751a4buy {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lvl-fade-out-b-3i751a4buy {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes lvl-card-b-3i751a4buy {
    0% { transform: scale(0.3); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes lvl-badge-b-3i751a4buy {
    0% { transform: scale(0.2) rotate(-140deg); }
    65% { transform: scale(1.12) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes lvl-drop-b-3i751a4buy {
    0% { transform: translateY(-40px) scale(0.6); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lvl-pop-b-3i751a4buy {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes lvl-star-b-3i751a4buy {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(14deg) scale(1.15); }
}

@keyframes lvl-spin-b-3i751a4buy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes lvl-spin-rev-b-3i751a4buy {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Phone landscape: compact so it fits a short screen. */
@media (orientation: landscape) and (max-height: 560px) {
    .lvlup__card[b-3i751a4buy] { margin-top: 0; }
    .lvlup__hero[b-3i751a4buy] { --badge: 104px; }
    .lvlup__title[b-3i751a4buy] { margin-top: 12px; font-size: 44px; }
    .lvlup__sub[b-3i751a4buy] { margin-top: 6px; font-size: 22px; }
    .lvlup__reward[b-3i751a4buy] { margin-top: 10px; font-size: 26px; }
    .lvlup__star[b-3i751a4buy] { width: 34px; height: 34px; }
}

/* Tablet / desktop: a size up. */
@media (min-width: 768px) and (min-height: 700px) {
    .lvlup__hero[b-3i751a4buy] { --badge: 184px; }
    .lvlup__title[b-3i751a4buy] { margin-top: 24px; font-size: 76px; }
    .lvlup__sub[b-3i751a4buy] { font-size: 34px; }
    .lvlup__reward[b-3i751a4buy] { font-size: 38px; }
    .lvlup__star[b-3i751a4buy] { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .lvlup__rays[b-3i751a4buy],
    .lvlup__burst[b-3i751a4buy],
    .lvlup__star[b-3i751a4buy] {
        animation: none;
    }

    .lvlup__confetti[b-3i751a4buy] {
        display: none;
    }

    .lvlup__card[b-3i751a4buy],
    .lvlup__badge[b-3i751a4buy],
    .lvlup__title[b-3i751a4buy],
    .lvlup__sub[b-3i751a4buy],
    .lvlup__reward[b-3i751a4buy] {
        animation: lvl-fade-in-b-3i751a4buy 0.3s ease-out both;
    }
}
/* /Components/MenuDock.razor.rz.scp.css */
/* Main menu: a cream tray of candy buttons at the bottom (portrait / tablet), a right-hand rail in phone landscape.
   Each button = tile (darker 3D base + gradient face that squishes down on press) + label below. */
.dock[b-4dco3aen1f] {
    --vh: 1vh;
    --tile: 56px;
    --hero: 74px;
    --edge: 6px;
    --label: 12.5px;
    position: absolute;
    left: calc(var(--safe-left) + 8px);
    right: calc(var(--safe-right) + 8px);
    bottom: calc(var(--safe-bottom) + 6px);
    height: calc(var(--dock-h) - 6px);
    z-index: var(--z-hud);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

@supports (height: 1dvh) {
    .dock[b-4dco3aen1f] {
        --vh: 1dvh;
    }
}

.dock__tray[b-4dco3aen1f] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
    max-width: 560px;
    padding: 7px 5px 6px;
    border-radius: 30px;
    background:
        radial-gradient(rgba(244, 144, 12, 0.09) 1.6px, transparent 2.2px) 0 0 / 14px 14px,
        linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 12px 26px rgba(61, 42, 28, 0.28);
    pointer-events: auto;
}

/* ---------- Button ---------- */
.menu-btn[b-4dco3aen1f] {
    --size: var(--tile);
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.menu-btn--hero[b-4dco3aen1f] {
    --size: var(--hero);
    flex-grow: 1.3;
    /* Raised above the tray without making the tray taller. */
    margin-top: calc(var(--tile) - var(--hero));
}

.menu-btn--forest[b-4dco3aen1f]   { --c1: var(--c-forest-1);   --c2: var(--c-forest-2);   --c3: #2c7a31; }
.menu-btn--city[b-4dco3aen1f]     { --c1: var(--c-city-1);     --c2: var(--c-city-2);     --c3: #c23a0d; }
.menu-btn--beach[b-4dco3aen1f]    { --c1: var(--c-beach-1);    --c2: var(--c-beach-2);    --c3: #155fb3; }
.menu-btn--mountain[b-4dco3aen1f] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5a32a8; }
.menu-btn--space[b-4dco3aen1f]    { --c1: var(--c-space-1);    --c2: var(--c-space-2);    --c3: #232f7e; }

.menu-btn__tile[b-4dco3aen1f] {
    position: relative;
    display: block;
    flex: none;
    width: var(--size);
    height: calc(var(--size) + var(--edge));
    transform-origin: 50% 90%;
}

.menu-btn__base[b-4dco3aen1f],
.menu-btn__face[b-4dco3aen1f] {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--size);
    border-radius: 32%;
    border: 3px solid #ffffff;
}

.menu-btn__base[b-4dco3aen1f] {
    top: var(--edge);
    background: var(--c3, #8d6e63);
    box-shadow: 0 5px 10px rgba(61, 42, 28, 0.3);
}

.menu-btn__face[b-4dco3aen1f] {
    top: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--c1, #ffcc80) 0%, var(--c2, #fb8c00) 100%);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
    transform-origin: 50% 100%;
    transition: transform 0.42s var(--ease-pop);
}

.menu-btn--hero .menu-btn__base[b-4dco3aen1f],
.menu-btn--hero .menu-btn__face[b-4dco3aen1f] {
    border-width: 4px;
}

.menu-btn__gloss[b-4dco3aen1f] {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 5%;
    height: 36%;
    border-radius: 999px 999px 60% 60%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.menu-btn__icon[b-4dco3aen1f] {
    position: relative;
    display: grid;
    width: 76%;
    height: 76%;
    margin-top: -4%;
}

.menu-btn__label[b-4dco3aen1f] {
    font-size: var(--label);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.1px;
    color: var(--c-text);
    white-space: nowrap;
}

.menu-btn--hero .menu-btn__label[b-4dco3aen1f] {
    font-size: calc(var(--label) + 1.5px);
    color: var(--c3, #c9400f);
}

/* ---------- Locked areas (Games/MenuUnlocks.cs decides): dimmed, lock badge, wiggle on tap ---------- */
.menu-btn.is-locked .menu-btn__face[b-4dco3aen1f] {
    filter: grayscale(0.8) brightness(1.05);
    opacity: 0.78;
}

.menu-btn.is-locked .menu-btn__base[b-4dco3aen1f] {
    filter: grayscale(0.8);
    opacity: 0.7;
}

.menu-btn.is-locked .menu-btn__label[b-4dco3aen1f] {
    color: var(--c-text-soft);
    opacity: 0.8;
}

.menu-btn__lock[b-4dco3aen1f] {
    position: absolute;
    right: -6px;
    bottom: 0;
    z-index: 2;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(61, 42, 28, 0.25);
}

.menu-btn__lock svg[b-4dco3aen1f] {
    width: 100%;
    height: 100%;
}

.menu-btn.wiggle-a .menu-btn__tile[b-4dco3aen1f] { animation: lock-wiggle-a-b-4dco3aen1f 0.55s ease both; }
.menu-btn.wiggle-b .menu-btn__tile[b-4dco3aen1f] { animation: lock-wiggle-b-b-4dco3aen1f 0.55s ease both; }

/* Just unlocked: the button pops out of its locked state. */
.menu-btn.is-unlocking .menu-btn__tile[b-4dco3aen1f] {
    animation: unlock-pop-b-4dco3aen1f 0.9s var(--ease-pop) both;
}

.menu-btn.is-unlocking:nth-child(3) .menu-btn__tile[b-4dco3aen1f] { animation-delay: 0.15s; }
.menu-btn.is-unlocking:nth-child(4) .menu-btn__tile[b-4dco3aen1f] { animation-delay: 0.3s; }
.menu-btn.is-unlocking:nth-child(5) .menu-btn__tile[b-4dco3aen1f] { animation-delay: 0.45s; }

/* The CTA arrow above the current (raised) button: always on; the pulse below plays after a locked tap. */
.menu-btn__beckon[b-4dco3aen1f] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    width: 40px;
    height: 46px;
    margin-left: -20px;
    pointer-events: none;
    z-index: 3;
}

.menu-btn.beckon-a .menu-btn__face[b-4dco3aen1f],
.menu-btn.beckon-b .menu-btn__face[b-4dco3aen1f] {
    animation: beckon-pulse-b-4dco3aen1f 0.7s ease-in-out 3;
}

/* Finished biome: normal size and a small green check. */
.menu-btn__done[b-4dco3aen1f] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 2px 0 #2c7a31;
    color: #ffffff;
    z-index: 2;
}

.menu-btn__done svg[b-4dco3aen1f] { width: 100%; height: 100%; }

@keyframes beckon-arrow-b-4dco3aen1f {
    0%, 100% { transform: translateY(-8px); opacity: 1; }
    50% { transform: translateY(4px); opacity: 1; }
}

@keyframes beckon-pulse-b-4dco3aen1f {
    0%, 100% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(255, 213, 79, 0.9); }
    50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 0 0 10px rgba(255, 213, 79, 0); }
}

@keyframes lock-wiggle-a-b-4dco3aen1f {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(3deg); }
}

@keyframes lock-wiggle-b-b-4dco3aen1f {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(3deg); }
}

@keyframes unlock-pop-b-4dco3aen1f {
    0% { transform: scale(0.85); filter: grayscale(0.8); }
    40% { transform: scale(1.3) rotate(-8deg); filter: grayscale(0); }
    70% { transform: scale(0.95) rotate(4deg); }
    100% { transform: none; }
}

/* Squish: the face drops onto its base while pressed and springs back (with overshoot) on release.
   `is-pressed` comes from pointer events, so it also works on touch screens. */
.menu-btn.is-pressed .menu-btn__face[b-4dco3aen1f],
.menu-btn:active .menu-btn__face[b-4dco3aen1f] {
    transform: translateY(calc(var(--edge) - 1px)) scale(1.06, 0.92);
    transition-duration: 0.07s;
    transition-timing-function: ease-out;
}

.menu-btn:focus-visible[b-4dco3aen1f] {
    outline: none;
}

.menu-btn:focus-visible .menu-btn__face[b-4dco3aen1f] {
    outline: 3px solid var(--c-text);
    outline-offset: 3px;
}

/* ---------- Hero (MenuAreas.Hero = Игре, first button) extras: warm halo, idle wiggle, twinkles ---------- */
.menu-btn__halo[b-4dco3aen1f] {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(var(--size) * 1.75);
    height: calc(var(--size) * 1.75);
    margin: calc(var(--size) * -0.875) 0 0 calc(var(--size) * -0.875);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 170, 0.95) 0%, rgba(255, 214, 110, 0.55) 38%, rgba(255, 214, 110, 0) 68%);
    pointer-events: none;
    animation: halo-pulse-b-4dco3aen1f 2.6s ease-in-out infinite;
}

/* The hand-over: whichever button becomes the CTA pops up into its raised size, then wiggles now and then. */
.menu-btn--hero .menu-btn__tile[b-4dco3aen1f] {
    animation: hero-arrive-b-4dco3aen1f 0.6s var(--ease-pop) both, hero-wiggle-b-4dco3aen1f 5.5s ease-in-out 3s infinite;
}

@keyframes hero-arrive-b-4dco3aen1f {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

.menu-btn__spark[b-4dco3aen1f] {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
}

.menu-btn__spark--1[b-4dco3aen1f] {
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    animation: twinkle-b-4dco3aen1f 2.4s ease-in-out 0.4s infinite;
}

.menu-btn__spark--2[b-4dco3aen1f] {
    top: 26%;
    left: -9px;
    width: 12px;
    height: 12px;
    animation: twinkle-b-4dco3aen1f 2.4s ease-in-out 1.6s infinite;
}

@keyframes halo-pulse-b-4dco3aen1f {
    0%, 100% { transform: scale(0.82); opacity: 0.55; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes hero-wiggle-b-4dco3aen1f {
    0%, 78%, 100% { transform: rotate(0deg) scale(1); }
    82% { transform: rotate(-7deg) scale(1.07); }
    86% { transform: rotate(6deg) scale(1.07); }
    90% { transform: rotate(-3.5deg) scale(1.03); }
    94% { transform: rotate(1.5deg) scale(1); }
}

@keyframes twinkle-b-4dco3aen1f {
    0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
    45% { transform: scale(1) rotate(80deg); opacity: 1; }
    70% { transform: scale(0.6) rotate(120deg); opacity: 0.6; }
}

/* ---------- Small phones ---------- */
@media (max-width: 370px) {
    .dock[b-4dco3aen1f] {
        --tile: 52px;
        --hero: 70px;
        --label: 12px;
        left: calc(var(--safe-left) + 6px);
        right: calc(var(--safe-right) + 6px);
    }

    .dock__tray[b-4dco3aen1f] {
        padding-left: 3px;
        padding-right: 3px;
    }
}

/* ---------- Phone landscape: vertical rail on the right, within --dock-w ---------- */
@media (orientation: landscape) and (max-height: 560px) {
    .dock[b-4dco3aen1f] {
        --tile: clamp(34px, calc((100 * var(--vh) - var(--safe-top) - var(--safe-bottom) - 30px) / 5 - 28px), 52px);
        --hero: calc(var(--tile) + 8px);
        --edge: 5px;
        --label: 11px;
        top: calc(var(--safe-top) + 6px);
        right: calc(var(--safe-right) + 6px);
        bottom: calc(var(--safe-bottom) + 6px);
        left: auto;
        width: calc(var(--dock-w) - 12px);
        height: auto;
        align-items: stretch;
    }

    .dock__tray[b-4dco3aen1f] {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        height: 100%;
        max-width: none;
        padding: 6px 3px;
        border-radius: 28px;
    }

    .menu-btn[b-4dco3aen1f] {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        justify-content: center;
        gap: 2px;
    }

    .menu-btn--hero[b-4dco3aen1f] {
        flex-grow: 1.25;
        margin-top: 0;
    }
}

/* ---------- Tablet / desktop: bigger buttons ---------- */
@media (min-width: 768px) and (min-height: 700px) {
    .dock[b-4dco3aen1f] {
        --tile: 76px;
        --hero: 100px;
        --edge: 8px;
        --label: 16px;
        bottom: calc(var(--safe-bottom) + 10px);
        height: calc(var(--dock-h) - 10px);
    }

    .dock__tray[b-4dco3aen1f] {
        max-width: 640px;
        padding: 10px 14px 9px;
        gap: 10px;
        border-radius: 36px;
        border-width: 4px;
    }

    .menu-btn[b-4dco3aen1f] {
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-btn__halo[b-4dco3aen1f],
    .menu-btn--hero .menu-btn__tile[b-4dco3aen1f],
    .menu-btn.wiggle-a .menu-btn__tile[b-4dco3aen1f],
    .menu-btn.wiggle-b .menu-btn__tile[b-4dco3aen1f],
    .menu-btn.is-unlocking .menu-btn__tile[b-4dco3aen1f],
    .menu-btn__spark[b-4dco3aen1f] {
        animation: none;
    }

    .menu-btn__face[b-4dco3aen1f] {
        transition-duration: 0.12s;
        transition-timing-function: ease-out;
    }
}
/* /Components/RewardLayer.razor.rz.scp.css */
/* Reward tokens. Each token lives 1.2 s:
   0-14 %  pop up at the origin (scale overshoot, small hop),
   14-39 % fly in an arc to the XP bar (X eases in, Y eases out → curved path), arriving at ~0.47 s,
   39-75 % burst at the bar (glow ring + sparks). Transform/opacity only. */
.rewards[b-rd3t8doxc3] {
    position: fixed;
    inset: 0;
    z-index: var(--z-effects);
    overflow: hidden;
    pointer-events: none;
}

.rw--star .rw__orb[b-rd3t8doxc3] {
    background: radial-gradient(circle at 35% 30%, #fff6c2 0%, #ffd54f 50%, #f29f05 100%);
}

.rw[b-rd3t8doxc3] {
    position: absolute;
    width: 0;
    height: 0;
}

.rw__x[b-rd3t8doxc3] {
    position: absolute;
    left: 0;
    top: 0;
    animation: rw-x-b-rd3t8doxc3 1.2s linear both;
}

.rw__y[b-rd3t8doxc3] {
    animation: rw-y-b-rd3t8doxc3 1.2s linear both;
}

.rw__center[b-rd3t8doxc3] {
    transform: translate(-50%, -50%);
}

.rw__token[b-rd3t8doxc3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    animation: rw-token-b-rd3t8doxc3 1.2s linear both;
}

.rw__orb[b-rd3t8doxc3] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #7fd8ff 0%, #2196f3 60%, #1565c0 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #0d47a1, 0 6px 12px rgba(0, 40, 90, 0.3);
}

.rw__amt[b-rd3t8doxc3] {
    margin-left: 2px;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-shadow:
        0 2px 0 #1565c0, 0 -2px 0 #1565c0, 2px 0 0 #1565c0, -2px 0 0 #1565c0,
        1.5px 1.5px 0 #1565c0, -1.5px 1.5px 0 #1565c0, 1.5px -1.5px 0 #1565c0, -1.5px -1.5px 0 #1565c0,
        0 4px 0 #0d47a1;
}

.rw__spark[b-rd3t8doxc3] {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    animation: rw-twinkle-b-rd3t8doxc3 0.45s ease-in-out infinite alternate;
}

.rw__spark--1[b-rd3t8doxc3] {
    top: -12px;
    right: -14px;
}

.rw__spark--2[b-rd3t8doxc3] {
    left: -8px;
    bottom: -8px;
    width: 11px;
    height: 11px;
    animation-delay: 0.22s;
}

.rw__poof[b-rd3t8doxc3] {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    animation: rw-poof-b-rd3t8doxc3 1.2s ease-out both;
}

.rw__burst[b-rd3t8doxc3] {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--dx), var(--dy));
}

.rw__ring[b-rd3t8doxc3] {
    position: absolute;
    left: -34px;
    top: -34px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(180, 236, 255, 0.8) 40%, rgba(90, 209, 255, 0) 70%);
    animation: rw-ring-b-rd3t8doxc3 1.2s ease-out both;
}

.rw__ray[b-rd3t8doxc3] {
    position: absolute;
    left: -4.5px;
    top: -4.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff09a;
    animation: rw-ray-b-rd3t8doxc3 1.2s ease-out both;
}

.rw__ray:nth-child(odd)[b-rd3t8doxc3] {
    background: #ffffff;
}

@keyframes rw-x-b-rd3t8doxc3 {
    0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
    14% { transform: translateX(var(--bow, 0px)); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
    39%, 100% { transform: translateX(var(--dx)); }
}

@keyframes rw-y-b-rd3t8doxc3 {
    0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
    14% { transform: translateY(-46px); animation-timing-function: cubic-bezier(0.25, 0.5, 0.45, 1); }
    39%, 100% { transform: translateY(var(--dy)); }
}

@keyframes rw-token-b-rd3t8doxc3 {
    0% { transform: scale(0.2); opacity: 0; }
    6% { transform: scale(1.3); opacity: 1; }
    11% { transform: scale(0.92); }
    15% { transform: scale(1.05); }
    36% { transform: scale(0.7); opacity: 1; }
    41%, 100% { transform: scale(0.35); opacity: 0; }
}

@keyframes rw-poof-b-rd3t8doxc3 {
    0% { transform: scale(0.2); opacity: 0; }
    4% { opacity: 1; }
    18%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rw-ring-b-rd3t8doxc3 {
    0%, 37% { transform: scale(0.2); opacity: 0; }
    41% { opacity: 1; }
    72%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes rw-ray-b-rd3t8doxc3 {
    0%, 38% { transform: rotate(var(--a)) translateY(0) scale(0); opacity: 0; }
    43% { transform: rotate(var(--a)) translateY(-12px) scale(1.2); opacity: 1; }
    76%, 100% { transform: rotate(var(--a)) translateY(-44px) scale(0.3); opacity: 0; }
}

@keyframes rw-twinkle-b-rd3t8doxc3 {
    from { transform: scale(0.5) rotate(0deg); opacity: 0.5; }
    to { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* No flight: the token simply appears just under the bar and fades. */
    .rw__x[b-rd3t8doxc3] {
        animation: none;
        transform: translateX(var(--dx));
    }

    .rw__y[b-rd3t8doxc3] {
        animation: none;
        transform: translateY(calc(var(--dy) + 40px));
    }

    .rw__token[b-rd3t8doxc3] {
        animation: rw-fade-b-rd3t8doxc3 1.2s ease-out both;
    }

    .rw__poof[b-rd3t8doxc3],
    .rw__ray[b-rd3t8doxc3],
    .rw__spark[b-rd3t8doxc3] {
        display: none;
    }
}

@keyframes rw-fade-b-rd3t8doxc3 {
    0% { opacity: 0; }
    12%, 60% { opacity: 1; }
    100% { opacity: 0; }
}
/* /Components/SceneBackdrop.razor.rz.scp.css */
/* Home-screen backdrop: sunny forest clearing behind the companion.
   Layers (back to front): sky gradient, hills + meadow SVG (height-driven, centred on the companion stage),
   clearing light under the companion's feet, sun, clouds, tree clusters framing the stage from the edges,
   butterfly and pollen. Units: cqw/cqh of the backdrop box. Only small HTML wrappers animate, and only
   transform/opacity, so the WebGL canvas on top keeps its frame budget. */
.sb[b-99rtmjt5v0] {
    position: absolute;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    container-type: size;
    background: linear-gradient(180deg, #7ccafa 0%, #8fd3ff 18%, #b5e4ff 38%, #d8f2ff 50%, #ecf9ff 58%);
}

.sb svg[b-99rtmjt5v0] {
    position: absolute;
    display: block;
    overflow: visible;
}

/* Hills, meadow and distant details. Scale is driven by the height; centred on the companion stage
   (the stage loses --dock-w on the right in phone landscape). */
.sb-land[b-99rtmjt5v0] {
    top: 0;
    left: calc(-1 * var(--dock-w));
    width: calc(100% + var(--dock-w));
    height: 100%;
}

/* Sunlit patch of grass where the companion stands (feet ~7 % above the bottom of the stage). */
.sb-clear[b-99rtmjt5v0] {
    --stage-top: calc(var(--safe-top) + var(--hud-top-h));
    --stage-bottom: calc(var(--safe-bottom) + var(--dock-h));
    position: absolute;
    left: calc(var(--safe-left) + (100cqw - var(--safe-left) - var(--safe-right) - var(--dock-w)) / 2);
    top: calc(100cqh - var(--stage-bottom) - 0.07 * (100cqh - var(--stage-top) - var(--stage-bottom)));
    width: min(58cqh, 100cqw);
    height: min(13cqh, 23cqw);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(236, 251, 186, 0.88) 0%, rgba(222, 247, 164, 0.66) 45%, rgba(205, 240, 140, 0.3) 75%, rgba(205, 240, 140, 0) 100%);
}

/* Sun: static glow, slowly turning rays (the disc is inside the rotating layer — it is round). */
.sb-sun[b-99rtmjt5v0] {
    --d: clamp(58px, 11cqmin, 118px);
    position: absolute;
    left: calc(29cqw - var(--d) / 2);
    top: calc(var(--safe-top) + var(--hud-top-h) + 1.5cqh);
    width: var(--d);
    height: var(--d);
}

.sb-glow[b-99rtmjt5v0] {
    position: absolute;
    left: -120%;
    top: -120%;
    width: 340%;
    height: 340%;
    background: radial-gradient(closest-side, rgba(255, 251, 222, 0.85) 0%, rgba(255, 248, 206, 0.42) 34%, rgba(255, 248, 206, 0.12) 66%, rgba(255, 248, 206, 0) 100%);
}

.sb-rays[b-99rtmjt5v0] {
    position: absolute;
    left: -90%;
    top: -90%;
    width: 280%;
    height: 280%;
    will-change: transform;
    animation: sb-spin-b-99rtmjt5v0 150s linear infinite;
}

.sb-rays svg[b-99rtmjt5v0],
.sb-cloud svg[b-99rtmjt5v0],
.sb-wings svg[b-99rtmjt5v0] {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Clouds drift across the whole sky (enter left, leave right); negative delays spread them out. */
.sb-cloud[b-99rtmjt5v0] {
    position: absolute;
    left: 0;
    aspect-ratio: 12 / 5;
    will-change: transform;
    animation: sb-drift-b-99rtmjt5v0 120s linear infinite;
}

.sb-c1[b-99rtmjt5v0] {
    top: calc(var(--safe-top) + var(--hud-top-h) + 1cqh);
    width: clamp(84px, 19cqmin, 190px);
    opacity: 0.8;
    animation-duration: 160s;
    animation-delay: -112s;
}

.sb-c2[b-99rtmjt5v0] {
    top: calc(var(--safe-top) + var(--hud-top-h) + 8cqh);
    width: clamp(108px, 27cqmin, 260px);
    animation-duration: 125s;
    animation-delay: -82s;
}

.sb-c3[b-99rtmjt5v0] {
    top: 33cqh;
    width: clamp(76px, 16cqmin, 170px);
    opacity: 0.9;
    animation-duration: 190s;
    animation-delay: -150s;
}

/* Tree clusters: sized by the height (same scale as the hills), anchored to the edges; on narrow screens
   they slide outwards so at most ~26 % of the width is covered on each side. */
.sb-cl[b-99rtmjt5v0] {
    top: 0;
    height: 100%;
    width: 52cqh;
}

.sb-cl-l[b-99rtmjt5v0] {
    left: calc(min(26cqw, 52cqh) - 52cqh);
}

.sb-cl-r[b-99rtmjt5v0] {
    right: calc(min(26cqw, 52cqh) - 52cqh + 0.6 * var(--dock-w));
}

/* Butterfly: wandering path on the wrapper, wing flap on the inner element. */
.sb-bfly[b-99rtmjt5v0] {
    position: absolute;
    left: calc(min(26cqw, 52cqh) * 0.35);
    top: 46cqh;
    width: clamp(28px, 5.4cqmin, 46px);
    aspect-ratio: 5 / 4;
    will-change: transform;
    animation: sb-flutter-b-99rtmjt5v0 26s ease-in-out infinite;
}

.sb-wings[b-99rtmjt5v0] {
    position: absolute;
    inset: 0;
    will-change: transform;
    animation: sb-flap-b-99rtmjt5v0 0.45s ease-in-out infinite alternate;
}

/* Floating pollen / sparkles. */
.sb-pollen[b-99rtmjt5v0] {
    position: absolute;
    width: clamp(9px, 1.6cqmin, 14px);
    aspect-ratio: 1;
    opacity: 0;
    background: radial-gradient(closest-side, #fffef4 0%, #fff6bf 45%, rgba(255, 246, 191, 0) 100%);
    will-change: transform, opacity;
    animation: sb-float-b-99rtmjt5v0 9s ease-in-out infinite;
}

.sb-p1[b-99rtmjt5v0] {
    left: 7cqw;
    top: 60cqh;
    animation-delay: -2s;
}

.sb-p2[b-99rtmjt5v0] {
    left: 88cqw;
    top: 52cqh;
    animation-duration: 11s;
    animation-delay: -7s;
}

.sb-p3[b-99rtmjt5v0] {
    left: 72cqw;
    top: 30cqh;
    animation-duration: 13s;
    animation-delay: -4s;
}

@keyframes sb-spin-b-99rtmjt5v0 {
    to {
        transform: rotate(1turn);
    }
}

@keyframes sb-drift-b-99rtmjt5v0 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100cqw);
    }
}

@keyframes sb-flap-b-99rtmjt5v0 {
    to {
        transform: scaleX(0.28);
    }
}

@keyframes sb-flutter-b-99rtmjt5v0 {
    0%,
    100% {
        transform: translate(0, 0) rotate(-8deg);
    }

    20% {
        transform: translate(30px, -28px) rotate(10deg);
    }

    40% {
        transform: translate(56px, -6px) rotate(4deg);
    }

    55% {
        transform: translate(38px, 24px) rotate(-12deg);
    }

    75% {
        transform: translate(10px, 12px) rotate(6deg);
    }
}

@keyframes sb-float-b-99rtmjt5v0 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    25% {
        opacity: 1;
    }

    70% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translate(16px, -70px);
    }
}

/* Wide screens: the same drift would look hurried over a long distance. */
@media (min-width: 1000px) {
    .sb-c1[b-99rtmjt5v0] {
        animation-duration: 260s;
    }

    .sb-c2[b-99rtmjt5v0] {
        animation-duration: 210s;
    }

    .sb-c3[b-99rtmjt5v0] {
        animation-duration: 320s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-anim[b-99rtmjt5v0] {
        animation-play-state: paused;
    }

    .sb-pollen[b-99rtmjt5v0] {
        display: none;
    }
}
/* /Components/SpeechBubble.razor.rz.scp.css */
/* Speech bubble above the fox. The stage (.companion-stage) is the containing block; the 3D module writes
   --avatar-top (top of the ears, px from the stage top) and --avatar-head-x (px from the stage left) on it.
   The wrapper's bottom edge is the tail tip, a few px above the ears. */
.speech[b-y82h1obti7] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - var(--avatar-top, 26%) + 14px); /* room for the ears when she hops */
    z-index: var(--z-bubble);
    display: flex;
    justify-content: center;
    padding-bottom: 19px; /* room for the tail */
    pointer-events: none;
    container-type: inline-size; /* cqw = stage width, to aim the tail at the head */
}

.speech__pop[b-y82h1obti7] {
    /* Tail x inside the bubble: under the head, but never past the rounded corners. */
    --tail-x: clamp(34px, calc(50% + var(--avatar-head-x, 50cqw) - 50cqw), calc(100% - 34px));
    position: relative;
    max-width: min(88%, 380px);
    transform-origin: var(--tail-x) calc(100% + 18px);
    animation:
        speech-pop-b-y82h1obti7 0.44s var(--ease-out) both,
        speech-float-b-y82h1obti7 3.4s ease-in-out 0.6s infinite;
}

.speech__bubble[b-y82h1obti7] {
    position: relative;
    padding: 11px 18px 12px;
    border-radius: 26px;
    background: #ffffff;
    border: 3px solid #f3dcc0;
    box-shadow: 0 8px 20px rgba(61, 42, 28, 0.22);
    color: var(--c-text);
    font-size: clamp(20px, 5.5vw, 24px);
    font-weight: 800;
    line-height: 1.25;
    text-align: left; /* the typewriter reveals left to right; centred lines made the first words look offset */
    text-wrap: balance;
    overflow-wrap: break-word;
}

.speech__tail[b-y82h1obti7] {
    position: absolute;
    left: var(--tail-x);
    bottom: -19px;
    width: 36px;
    height: 22px;
    margin-left: -18px;
    overflow: visible;
}

/* Screen readers get the whole sentence at once; the per-letter spans are decorative. */
.speech__sr[b-y82h1obti7] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.speech__word[b-y82h1obti7] {
    white-space: nowrap;
}

/* Typewriter: every letter is laid out from the start (the bubble never resizes) and fades in 40 ms after the previous one. */
.speech__ch[b-y82h1obti7] {
    opacity: 0;
    animation: speech-ch-b-y82h1obti7 0.14s ease-out both;
    animation-delay: calc(160ms + var(--i, 0) * 40ms);
}

.speech.is-leaving .speech__pop[b-y82h1obti7] {
    animation: speech-out-b-y82h1obti7 0.23s ease-in both;
}

@keyframes speech-pop-b-y82h1obti7 {
    0% { transform: scale(0.3); opacity: 0; }
    35% { opacity: 1; }
    60% { transform: scale(1.07); }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes speech-float-b-y82h1obti7 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes speech-ch-b-y82h1obti7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes speech-out-b-y82h1obti7 {
    from { transform: scale(1); opacity: 1; }
    to { transform: translateY(10px) scale(0.6); opacity: 0; }
}

@media (min-width: 768px) and (min-height: 700px) {
    .speech__pop[b-y82h1obti7] {
        max-width: min(80%, 440px);
    }

    .speech__bubble[b-y82h1obti7] {
        padding: 14px 24px 15px;
        border-radius: 30px;
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .speech__pop[b-y82h1obti7] {
        animation: speech-fade-in-b-y82h1obti7 0.2s ease-out both;
    }

    .speech.is-leaving .speech__pop[b-y82h1obti7] {
        animation: speech-fade-out-b-y82h1obti7 0.2s ease-in both;
    }
}

@keyframes speech-fade-in-b-y82h1obti7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes speech-fade-out-b-y82h1obti7 {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* /Components/TopBar.razor.rz.scp.css */
/* Top HUD band: level badge + experience bar (left), the friend avatar badge (right, opens the profile). */
.topbar[b-tw766stfkb] {
    --badge: 62px;
    --bar-h: 26px;
    --bar-w: clamp(112px, 40vw, 230px);
    --cap: 34px;
    --pill-h: 44px;
    position: absolute;
    top: var(--safe-top);
    left: var(--safe-left);
    right: calc(var(--safe-right) + var(--dock-w));
    height: var(--hud-top-h);
    z-index: var(--z-hud);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    pointer-events: none;
}

/* ---------- Level badge ---------- */
.level[b-tw766stfkb] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.badge[b-tw766stfkb] {
    position: relative;
    z-index: 2;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--badge);
    height: var(--badge);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffd98a 0%, #ffad33 46%, #f27a0c 100%);
    border: 4px solid #ffffff;
    box-shadow:
        inset 0 -5px 0 rgba(160, 60, 0, 0.22),
        inset 0 4px 0 rgba(255, 255, 255, 0.45),
        0 4px 0 #c55a00,
        0 8px 16px rgba(61, 42, 28, 0.28);
}

.badge__num[b-tw766stfkb] {
    margin-top: -5px;
    /* Measured: the digits sat ~3.7 px (0.12em) above the circle centre; this brings them to centre. */
    transform: translateY(0.12em);
    font-size: calc(var(--badge) * 0.48);
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 2px 0 #b34d00, 0 -1.5px 0 #b34d00, 1.5px 0 0 #b34d00, -1.5px 0 0 #b34d00,
        1.2px 1.2px 0 #b34d00, -1.2px 1.2px 0 #b34d00, 1.2px -1.2px 0 #b34d00, -1.2px -1.2px 0 #b34d00,
        0 3.5px 0 #b34d00;
}

/* ---------- Experience bar ---------- */
.xp[b-tw766stfkb] {
    position: relative;
    z-index: 1;
    flex: none;
    width: var(--bar-w);
    margin-left: calc(var(--badge) * -0.3);
    margin-right: calc(var(--cap) * 0.4);
}

.xp__track[b-tw766stfkb] {
    position: relative;
    height: calc(var(--bar-h) + 8px);
    border-radius: 999px;
    background: #1f5d88;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 0 rgba(23, 74, 112, 0.45), 0 8px 14px rgba(61, 42, 28, 0.22);
}

.xp__clip[b-tw766stfkb] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: calc(var(--badge) * 0.3 + 1px);
    right: calc(var(--cap) * 0.42);
    border-radius: 999px;
    overflow: hidden;
    background: #174a6e;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
}

.xp__fill[b-tw766stfkb] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #b3efff 0%, #5ad1ff 48%, #1f9bd6 100%);
    transform: translateX(calc((var(--p, 0) - 1) * 100%));
    overflow: hidden;
    transition: transform 0.55s var(--ease-out);
    will-change: transform;
}

.xp__fill.is-instant[b-tw766stfkb] {
    transition: none;
}

.xp__gloss[b-tw766stfkb] {
    position: absolute;
    left: 7px;
    right: 9px;
    top: 2px;
    height: 32%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}

.xp__shine[b-tw766stfkb] {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 30%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-140%) skewX(-22deg);
    animation: xp-shine-b-tw766stfkb 3.4s ease-in-out 1.2s infinite;
}

@keyframes xp-shine-b-tw766stfkb {
    0% { transform: translateX(-140%) skewX(-22deg); }
    42%, 100% { transform: translateX(380%) skewX(-22deg); }
}

.xp__text[b-tw766stfkb] {
    position: absolute;
    inset: 0 calc(var(--cap) * 0.42) 0 calc(var(--badge) * 0.3);
    display: grid;
    place-items: center;
    font-size: calc(var(--bar-h) * 0.6);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.4px;
    color: #ffffff;
    white-space: nowrap;
    /* Measured: Nunito digits sit ~0.08em above the optical centre of the bar. */
    transform: translateY(0.08em);
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 1.5px 0 #0e4a73, 0 -1.5px 0 #0e4a73, 1.5px 0 0 #0e4a73, -1.5px 0 0 #0e4a73,
        1px 1px 0 #0e4a73, -1px 1px 0 #0e4a73, 1px -1px 0 #0e4a73, -1px -1px 0 #0e4a73,
        0 2.5px 0 #0e4a73;
}

.xp__cap[b-tw766stfkb] {
    position: absolute;
    top: 50%;
    right: calc(var(--cap) * -0.45);
    display: grid;
    place-items: center;
    width: var(--cap);
    height: var(--cap);
    margin-top: calc(var(--cap) * -0.5);
    padding: calc(var(--cap) * 0.14);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #6fd0ff 0%, #2196f3 60%, #1565c0 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #0d47a1, 0 6px 10px rgba(61, 42, 28, 0.25);
    transform: rotate(10deg);
}

/* Reward arrival: the bar pulses and the bolt spins. Two identical keyframe names restart the animation. */
.xp.bump-a .xp__track[b-tw766stfkb] { animation: xp-bump-a-b-tw766stfkb 0.45s var(--ease-pop); }
.xp.bump-b .xp__track[b-tw766stfkb] { animation: xp-bump-b-b-tw766stfkb 0.45s var(--ease-pop); }
.xp.bump-a .xp__cap[b-tw766stfkb] { animation: cap-bump-a-b-tw766stfkb 0.6s var(--ease-pop); }
.xp.bump-b .xp__cap[b-tw766stfkb] { animation: cap-bump-b-b-tw766stfkb 0.6s var(--ease-pop); }

@keyframes xp-bump-a-b-tw766stfkb {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.08, 1.16); }
}

@keyframes xp-bump-b-b-tw766stfkb {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.08, 1.16); }
}

@keyframes cap-bump-a-b-tw766stfkb {
    0%, 100% { transform: rotate(10deg) scale(1); }
    45% { transform: rotate(-28deg) scale(1.3); }
}

@keyframes cap-bump-b-b-tw766stfkb {
    0%, 100% { transform: rotate(10deg) scale(1); }
    45% { transform: rotate(-28deg) scale(1.3); }
}

/* Level up: the badge jumps and wiggles. */
.badge.bump-a[b-tw766stfkb] { animation: badge-bump-a-b-tw766stfkb 0.7s var(--ease-pop); }
.badge.bump-b[b-tw766stfkb] { animation: badge-bump-b-b-tw766stfkb 0.7s var(--ease-pop); }

@keyframes badge-bump-a-b-tw766stfkb {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.3) rotate(-10deg); }
    60% { transform: scale(0.94) rotate(5deg); }
}

@keyframes badge-bump-b-b-tw766stfkb {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.3) rotate(-10deg); }
    60% { transform: scale(0.94) rotate(5deg); }
}

/* ---------- Friend avatar badge (opens the profile; star rewards land here) ---------- */
.avatar[b-tw766stfkb] {
    --size: calc(var(--pill-h) + 14px);
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: radial-gradient(circle at 40% 30%, #fffdf6 0%, #ffe8b6 75%, #ffd38a 100%);
    box-shadow: 0 0 0 4px var(--ring, var(--c-fox)), 0 5px 0 4px var(--ring-dark, #c96a05), 0 10px 18px rgba(61, 42, 28, 0.3);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.35s var(--ease-pop);
}

.avatar:active[b-tw766stfkb] {
    transform: translateY(3px) scale(0.94);
    transition-duration: 0.07s;
}

.avatar:focus-visible[b-tw766stfkb] {
    outline: 3px solid var(--c-text);
    outline-offset: 6px;
}

.avatar--fox[b-tw766stfkb]   { --ring: #f4900c; --ring-dark: #c96a05; }
.avatar--bear[b-tw766stfkb]  { --ring: #a1704f; --ring-dark: #6d4c41; }
.avatar--dog[b-tw766stfkb]   { --ring: #e0a458; --ring-dark: #a86f2c; }
.avatar--cat[b-tw766stfkb]   { --ring: #9e9eb8; --ring-dark: #6b6b88; }
.avatar--lion[b-tw766stfkb]  { --ring: #f9b233; --ring-dark: #c27c00; }
.avatar--panda[b-tw766stfkb] { --ring: #4a4a4a; --ring-dark: #1f1f1f; }

.avatar__img[b-tw766stfkb] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: scale(1.18) translateY(4%);
    pointer-events: none;
}

.avatar__emoji[b-tw766stfkb] {
    font-size: calc(var(--size) * 0.56);
    line-height: 1;
}

.avatar__star[b-tw766stfkb] {
    position: absolute;
    right: -8px;
    bottom: -6px;
    display: grid;
    width: calc(var(--size) * 0.42);
    height: calc(var(--size) * 0.42);
    transform: rotate(-10deg);
    filter: drop-shadow(0 2px 0 rgba(150, 70, 0, 0.35));
}

.avatar.bump-a[b-tw766stfkb] { animation: avatar-bump-a-b-tw766stfkb 0.7s var(--ease-pop); }
.avatar.bump-b[b-tw766stfkb] { animation: avatar-bump-b-b-tw766stfkb 0.7s var(--ease-pop); }

@keyframes avatar-bump-a-b-tw766stfkb {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.2) rotate(-6deg); }
    70% { transform: scale(0.96) rotate(3deg); }
}

@keyframes avatar-bump-b-b-tw766stfkb {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.2) rotate(-6deg); }
    70% { transform: scale(0.96) rotate(3deg); }
}

/* ---------- Sizes per form factor ---------- */
@media (max-width: 370px) {
    .topbar[b-tw766stfkb] {
        --badge: 58px;
        --bar-w: clamp(104px, 37vw, 200px);
        --pill-h: 42px;
        padding: 0 10px;
    }
}

/* Phone landscape: shorter band, the bar stops before the right-hand menu rail. */
@media (orientation: landscape) and (max-height: 560px) {
    .topbar[b-tw766stfkb] {
        --badge: 50px;
        --bar-h: 22px;
        --bar-w: clamp(150px, 26vw, 240px);
        --cap: 30px;
        --pill-h: 38px;
        padding: 0 12px;
    }
}

/* Tablet / desktop: everything a size up. */
@media (min-width: 768px) and (min-height: 700px) {
    .topbar[b-tw766stfkb] {
        --badge: 78px;
        --bar-h: 32px;
        --bar-w: clamp(220px, 30vw, 330px);
        --cap: 42px;
        --pill-h: 54px;
        padding: 0 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xp__shine[b-tw766stfkb] {
        animation: none;
        opacity: 0;
    }

    .xp__fill[b-tw766stfkb] {
        transition-duration: 0.2s;
    }

    .xp.bump-a .xp__track[b-tw766stfkb], .xp.bump-b .xp__track[b-tw766stfkb],
    .xp.bump-a .xp__cap[b-tw766stfkb], .xp.bump-b .xp__cap[b-tw766stfkb],
    .badge.bump-a[b-tw766stfkb], .badge.bump-b[b-tw766stfkb],
    .avatar.bump-a[b-tw766stfkb], .avatar.bump-b[b-tw766stfkb] {
        animation: none;
    }

    .avatar[b-tw766stfkb] {
        transition: none;
    }
}

/* ---------- Right group: the speaker switch beside the friend's face ---------- */
.topbar__right[b-tw766stfkb] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Same look as the game screens' switch (GameScreen .gs__mute): a round candy button, ≥ 56 px. */
.mute[b-tw766stfkb] {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 12px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    color: #ffffff;
    background: linear-gradient(180deg, #42a5f5 0%, #1e88e5 100%);
    box-shadow: 0 4px 0 #1565c0, 0 8px 14px rgba(61, 42, 28, 0.22);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.35s var(--ease-pop);
}

.mute:active[b-tw766stfkb] {
    transform: translateY(3px) scale(0.96);
}

.mute.is-muted[b-tw766stfkb] {
    background: linear-gradient(180deg, #b0bec5 0%, #78909c 100%);
    box-shadow: 0 4px 0 #546e7a, 0 8px 14px rgba(61, 42, 28, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .mute[b-tw766stfkb] {
        transition: none;
    }
}
/* /Games/Beach/Build/SyllableBuildGame.razor.rz.scp.css */
/* „Састави слог“: run bar, the syllable on a sea-blue sign, the котлић scene with its two slots, and the shelf of
   letter tiles (consonants sea-blue, vowels sunny, as in „Грудва“; one sand colour on the mixed shelf). Tiles are
   dragged by games.js (a clone follows the finger); here only transform and opacity animate. */
.bd-progress[b-blwnnzthbd] {
    flex: none;
    display: flex;
    justify-content: center;
}

/* ---------- The syllable ---------- */
.bd-sign[b-blwnnzthbd] {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    min-width: 132px;
    padding: 4px 26px 8px;
    border-radius: 26px;
    background: linear-gradient(180deg, #d6f0ff 0%, #a9dcff 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #5aa7e0, 0 9px 16px rgba(21, 101, 192, 0.22);
    animation: bd-sign-in-b-blwnnzthbd 0.5s var(--ease-pop) both;
}

.bd-sign__text[b-blwnnzthbd] {
    font-size: clamp(44px, 9vh, 72px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f4511e;
    text-shadow: 0 4px 0 #c23a0d;
}

/* ---------- The котлић ---------- */
.bd-scene[b-blwnnzthbd] {
    position: relative;
    flex: none;
    align-self: center;
    height: clamp(150px, 26vh, 196px);
    aspect-ratio: 240 / 170;
    max-width: 100%;
}

.bd-scene svg[b-blwnnzthbd] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bd-fire path[b-blwnnzthbd] {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: bd-flicker-b-blwnnzthbd 0.9s ease-in-out infinite alternate;
}

.bd-fire path + path[b-blwnnzthbd] {
    animation-duration: 0.7s;
    animation-delay: 0.2s;
}

.bd-bubble[b-blwnnzthbd],
.bd-puff[b-blwnnzthbd] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.bd-scene.is-brewing .bd-bubble[b-blwnnzthbd] {
    animation: bd-bubble-b-blwnnzthbd 0.8s ease-out calc(var(--b, 0) * 0.14s) 2 both;
}

.bd-scene.is-brewing .bd-puff[b-blwnnzthbd] {
    animation: bd-steam-b-blwnnzthbd 1.3s ease-out calc(0.1s + var(--b, 0) * 0.12s) both;
}

/* The two slots on the brew. */
.bd-slot[b-blwnnzthbd] {
    position: absolute;
    top: calc(36.5% - 33px);
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    border: 4px dashed #ffe0b2;
    background: rgba(255, 243, 224, 0.55);
    box-shadow: 0 0 0 0 rgba(255, 201, 60, 0);
    transition: transform 0.25s var(--ease-pop), box-shadow 0.25s ease, background 0.25s ease;
}

.bd-slot--0[b-blwnnzthbd] { left: calc(50% - 72px); }
.bd-slot--1[b-blwnnzthbd] { left: calc(50% + 6px); }

.bd-slot.is-near[b-blwnnzthbd] {
    transform: scale(1.14);
    background: rgba(255, 243, 190, 0.95);
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 0 0 0 5px #ffc93c;
}

.bd-slot.is-filled[b-blwnnzthbd] {
    border-style: solid;
    border-color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #dcedf8 100%);
    box-shadow: 0 4px 0 #9fc5e0;
    animation: bd-land-b-blwnnzthbd 0.4s var(--ease-pop) both;
}

.bd-slot.is-filled.is-vowel[b-blwnnzthbd] {
    background: linear-gradient(180deg, #fff3b0 0%, #ffd54f 100%);
    box-shadow: 0 4px 0 #e0a800;
}

.bd-slot.is-wrong[b-blwnnzthbd] {
    border-color: #f0a46b;
    background: rgba(255, 207, 168, 0.9);
    animation: bd-shake-b-blwnnzthbd 0.5s ease both;
}

.bd-slot__letter[b-blwnnzthbd] {
    font-size: 38px;
    font-weight: 1000;
    line-height: 1;
    color: #1565c0;
}

.bd-slot.is-vowel .bd-slot__letter[b-blwnnzthbd] {
    color: #bf360c;
}

/* Brewed: the syllable floats up from the pot in a cloud of steam. */
.bd-cloud[b-blwnnzthbd] {
    position: absolute;
    left: 50%;
    top: 30%;
    padding: 6px 22px 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 0 #cfe3f3, 0 8px 16px rgba(21, 101, 192, 0.2);
    font-size: 40px;
    font-weight: 1000;
    line-height: 1;
    color: #43a047;
    pointer-events: none;
    animation: bd-cloud-b-blwnnzthbd 1.4s ease-out both;
}

/* ---------- The shelf ---------- */
.bd-shelf[b-blwnnzthbd] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
}

.bd-rows[b-blwnnzthbd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bd-row[b-blwnnzthbd] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.bd-rows.is-mixed .bd-row[b-blwnnzthbd] {
    flex-wrap: wrap;
    max-width: 300px;
}

.bd-tile[b-blwnnzthbd] {
    --t1: #fff3d1;
    --t2: #ffe0a3;
    --edge: #dcae5e;
    --ink: #5d4037;
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(56px, 16vw, 76px);
    height: clamp(56px, 16vw, 76px);
    margin: 0;
    padding: 0;
    border-radius: 24%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
    box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(120, 80, 20, 0.16);
    font-family: inherit;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), box-shadow 0.2s ease, opacity 0.2s ease;
    animation: bd-deal-b-blwnnzthbd 0.45s var(--ease-pop) calc(var(--i, 0) * 55ms) both;
}

.bd-tile--c[b-blwnnzthbd] { --t1: #ffffff; --t2: #dcedf8; --edge: #9fc5e0; --ink: #1565c0; }
.bd-tile--v[b-blwnnzthbd] { --t1: #fff3b0; --t2: #ffd54f; --edge: #e0a800; --ink: #bf360c; }

.bd-tile__letter[b-blwnnzthbd] {
    font-size: clamp(30px, 9vw, 42px);
    font-weight: 1000;
    line-height: 1;
    color: var(--ink);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.bd-tile:disabled[b-blwnnzthbd] {
    cursor: default;
}

/* Lifted: the shelf keeps a faint outline while the clone travels. */
.bd-tile.is-lifted[b-blwnnzthbd] {
    border-style: dashed;
    border-color: var(--edge);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.bd-tile.is-lifted .bd-tile__letter[b-blwnnzthbd] {
    opacity: 0;
}

/* The clone under the finger (appended to body, keeps the scoped classes). */
.bd-tile.is-ghost[b-blwnnzthbd] {
    cursor: grabbing;
    box-shadow: 0 10px 0 var(--edge), 0 18px 28px rgba(61, 42, 28, 0.3);
}

.bd-tile.is-used[b-blwnnzthbd] {
    opacity: 0.3;
    box-shadow: 0 2px 0 var(--edge);
}

.bd-tile.is-wrong[b-blwnnzthbd] {
    --t1: #ffe9d6;
    --t2: #ffcfa8;
    --edge: #f0a46b;
    animation: bd-shake-b-blwnnzthbd 0.5s ease both;
}

/* The demo hand: carries the consonant from the shelf up to the first slot, again and again, until the first touch. */
.bd-hand[b-blwnnzthbd] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 5;
    margin: -6px 0 0 -12px;
    font-size: 52px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: bd-carry-b-blwnnzthbd 2.4s ease-in-out 0.6s infinite both;
}

@keyframes bd-carry-b-blwnnzthbd {
    0% { left: var(--x); top: var(--y); opacity: 0; transform: scale(1); }
    12% { left: var(--x); top: var(--y); opacity: 1; transform: scale(1); }
    22% { left: var(--x); top: var(--y); opacity: 1; transform: scale(0.9); }
    70% { left: var(--x2); top: var(--y2); opacity: 1; transform: scale(0.9); }
    82% { left: var(--x2); top: var(--y2); opacity: 1; transform: scale(1); }
    100% { left: var(--x2); top: var(--y2); opacity: 0; transform: scale(1); }
}

@keyframes bd-sign-in-b-blwnnzthbd {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes bd-deal-b-blwnnzthbd {
    from { transform: translateY(16px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes bd-land-b-blwnnzthbd {
    from { transform: scale(1.3); opacity: 0.5; }
    to { transform: none; opacity: 1; }
}

@keyframes bd-shake-b-blwnnzthbd {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes bd-flicker-b-blwnnzthbd {
    from { transform: scaleY(1) scaleX(1); }
    to { transform: scaleY(1.14) scaleX(0.94); }
}

@keyframes bd-bubble-b-blwnnzthbd {
    0% { transform: translateY(6px) scale(0.3); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-26px) scale(1.4); opacity: 0; }
}

@keyframes bd-steam-b-blwnnzthbd {
    0% { transform: translateY(10px) scale(0.3); opacity: 0; }
    35% { opacity: 0.9; }
    100% { transform: translateY(-40px) scale(1.6); opacity: 0; }
}

@keyframes bd-cloud-b-blwnnzthbd {
    0% { transform: translate(-50%, 10px) scale(0.4); opacity: 0; }
    30% { transform: translate(-50%, -20px) scale(1.1); opacity: 1; }
    80% { transform: translate(-50%, -48px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -64px) scale(1); opacity: 0; }
}

/* Short phones: a smaller sign and pot leave the shelf its room. */
@media (max-height: 700px) {
    .bd-sign[b-blwnnzthbd] { padding: 2px 20px 6px; }
    .bd-sign__text[b-blwnnzthbd] { font-size: 40px; }
    .bd-scene[b-blwnnzthbd] { height: 136px; }
    .bd-slot[b-blwnnzthbd] { width: 58px; height: 58px; top: calc(36.5% - 29px); }
    .bd-slot--0[b-blwnnzthbd] { left: calc(50% - 64px); }
    .bd-slot--1[b-blwnnzthbd] { left: calc(50% + 6px); }
    .bd-slot__letter[b-blwnnzthbd] { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .bd-sign[b-blwnnzthbd],
    .bd-fire path[b-blwnnzthbd],
    .bd-scene.is-brewing .bd-bubble[b-blwnnzthbd],
    .bd-scene.is-brewing .bd-puff[b-blwnnzthbd],
    .bd-slot.is-filled[b-blwnnzthbd],
    .bd-slot.is-wrong[b-blwnnzthbd],
    .bd-tile[b-blwnnzthbd],
    .bd-tile.is-wrong[b-blwnnzthbd] {
        animation: none;
    }

    .bd-cloud[b-blwnnzthbd] { animation: bd-cloud-b-blwnnzthbd 1.4s steps(1, end) both; }
    .bd-hand[b-blwnnzthbd] { animation: none; left: var(--x2); top: var(--y2); }
}
/* /Games/Beach/Matching/SyllableMatchingGame.razor.rz.scp.css */
/* „Спој слогове“: run bar and two columns of sand tiles with a rope layer between them. A joined pair takes one colour
   (both tiles and the rope). Rows have no gap (the tiles carry the spacing), so a row's middle in the rope layer is
   exactly (row + 0.5) / rows. Fills are sand, sea and fruit tints, never white or black. */
.sm-progress[b-0ydc4dpbak] {
    flex: none;
    display: flex;
    justify-content: center;
}

.sm-board[b-0ydc4dpbak] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sm-pairs[b-0ydc4dpbak] {
    /* Row height: fills the board, never under the 56 px tap floor (+ 8 px spacing), never taller than 104 px. */
    --row: max(64px, min(calc(100cqh / var(--rows)), 104px));
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(48px, 22cqw, 120px) minmax(0, 1fr);
    grid-template-rows: repeat(var(--rows), var(--row));
    width: min(100cqw, 520px);
    user-select: none;
    -webkit-user-select: none;
}

.sm-ropes[b-0ydc4dpbak] {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.sm-rope[b-0ydc4dpbak] {
    fill: none;
    stroke-width: 7px;
    stroke-linecap: round;
    stroke: var(--rope);
    animation: sm-rope-in-b-0ydc4dpbak 0.35s ease-out both;
}

/* ---------- Tiles ---------- */
.sm-tile[b-0ydc4dpbak] {
    --t1: #fff3d1;
    --t2: #ffe0a3;
    --edge: #dcae5e;
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    margin: 4px 0;
    padding: 0;
    border-radius: 22px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
    box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(120, 80, 20, 0.16);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), box-shadow 0.2s ease;
    animation: sm-deal-b-0ydc4dpbak 0.45s var(--ease-pop) calc(var(--i, 0) * 45ms) both;
}

.sm-tile--l[b-0ydc4dpbak] { grid-column: 1; }
.sm-tile--r[b-0ydc4dpbak] { grid-column: 3; }

.sm-tile:disabled[b-0ydc4dpbak] {
    cursor: default;
}

.sm-tile__text[b-0ydc4dpbak] {
    font-size: min(calc(var(--row) * 0.46), 52px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #1565c0;
    text-shadow: 0 3px 0 rgba(13, 71, 161, 0.22);
    pointer-events: none;
}

/* Picked: lifted, with a sunny ring. */
.sm-tile.is-picked[b-0ydc4dpbak] {
    --t1: #fff7c2;
    --t2: #ffe680;
    --edge: #e0a800;
    animation: none; /* the deal-in's fill would otherwise pin transform to none */
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 0 4px #ffc93c, 0 7px 0 var(--edge), 0 12px 18px rgba(120, 80, 20, 0.22);
}

/* The other column bobs while a syllable is picked: „now over here“. */
.sm-pairs.is-picking-l .sm-tile--r:not(:disabled)[b-0ydc4dpbak],
.sm-pairs.is-picking-r .sm-tile--l:not(:disabled)[b-0ydc4dpbak] {
    animation: sm-bob-b-0ydc4dpbak 0.9s ease-in-out infinite alternate;
}

.sm-tile.is-wrong[b-0ydc4dpbak] {
    --t1: #ffe9d6;
    --t2: #ffcfa8;
    --edge: #f0a46b;
    animation: sm-shake-b-0ydc4dpbak 0.5s ease both;
}

.sm-tile.is-joined[b-0ydc4dpbak] {
    animation: sm-pop-b-0ydc4dpbak 0.45s var(--ease-pop) both;
}

.sm-tile.is-joined .sm-tile__text[b-0ydc4dpbak] {
    color: var(--ink);
    text-shadow: none;
}

/* Pair colours: tile fill, edge, text and rope. */
.sm-tile--c0[b-0ydc4dpbak], .sm-rope--c0[b-0ydc4dpbak] { --t1: #ffe0d4; --t2: #ffbca5; --edge: #e8825f; --ink: #bf360c; --rope: #f4511e; }
.sm-tile--c1[b-0ydc4dpbak], .sm-rope--c1[b-0ydc4dpbak] { --t1: #d8eeff; --t2: #acd8ff; --edge: #5aa7e0; --ink: #0d47a1; --rope: #1e88e5; }
.sm-tile--c2[b-0ydc4dpbak], .sm-rope--c2[b-0ydc4dpbak] { --t1: #e2f7d6; --t2: #bde9a6; --edge: #7cc35f; --ink: #1b5e20; --rope: #43a047; }
.sm-tile--c3[b-0ydc4dpbak], .sm-rope--c3[b-0ydc4dpbak] { --t1: #fff3c4; --t2: #ffe27f; --edge: #e0b000; --ink: #8d5b00; --rope: #f9a825; }
.sm-tile--c4[b-0ydc4dpbak], .sm-rope--c4[b-0ydc4dpbak] { --t1: #f1def8; --t2: #dcb8ee; --edge: #b07ccb; --ink: #6a1b9a; --rope: #8e24aa; }
.sm-tile--c5[b-0ydc4dpbak], .sm-rope--c5[b-0ydc4dpbak] { --t1: #d4f4f0; --t2: #a6e6de; --edge: #4fb5a8; --ink: #00695c; --rope: #00897b; }

@keyframes sm-deal-b-0ydc4dpbak {
    from { transform: translateY(14px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sm-bob-b-0ydc4dpbak {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

@keyframes sm-pop-b-0ydc4dpbak {
    0% { transform: scale(0.88); }
    55% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes sm-shake-b-0ydc4dpbak {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes sm-rope-in-b-0ydc4dpbak {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-tile[b-0ydc4dpbak],
    .sm-rope[b-0ydc4dpbak],
    .sm-pairs.is-picking-l .sm-tile--r:not(:disabled)[b-0ydc4dpbak],
    .sm-pairs.is-picking-r .sm-tile--l:not(:disabled)[b-0ydc4dpbak] {
        animation: none;
    }
}
/* /Games/Beach/MissingSyllable/MissingSyllableGame.razor.rz.scp.css */
/* „Слог који фали“: run bar, the picture on a sand card, the word in syllable chips with a dashed gap, and the syllable
   options (big sea-blue tiles). The chosen syllable flies into the gap (games.js flyClone); everything else is
   transform / opacity. Fills are sand and sea tints, never white or black. */
.ms-progress[b-11dc8yapg7] {
    flex: none;
    display: flex;
    justify-content: center;
}

.ms-stage[b-11dc8yapg7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* ---------- The picture ---------- */
.ms-picture[b-11dc8yapg7] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff3d1 0%, #ffe0a3 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #dcae5e, 0 9px 16px rgba(120, 80, 20, 0.18);
    animation: ms-sign-in-b-11dc8yapg7 0.5s var(--ease-pop) both;
}

.ms-picture img[b-11dc8yapg7] {
    width: auto;
    height: 100%;
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

.ms-picture.is-ok[b-11dc8yapg7] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: ms-pop-b-11dc8yapg7 0.5s var(--ease-pop) both;
}

/* ---------- The word ---------- */
.ms-word[b-11dc8yapg7] {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.ms-chip[b-11dc8yapg7] {
    display: grid;
    place-items: center;
    min-width: calc(var(--len, 2) * 24px + 20px);
    height: 58px;
    padding: 0 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #dcedf8 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #9fc5e0;
    font-size: 34px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #1565c0;
    text-shadow: 0 2px 0 rgba(13, 71, 161, 0.18);
    white-space: nowrap;
}

/* The gap: dashed and breathing until it is filled. */
.ms-chip--gap[b-11dc8yapg7] {
    background: rgba(255, 243, 224, 0.6);
    border: 3px dashed #f4b26a;
    box-shadow: none;
    animation: ms-breathe-b-11dc8yapg7 1.6s ease-in-out infinite;
}

.ms-chip--gap.is-filled[b-11dc8yapg7] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #7cc35f;
    color: #2e7d32;
    text-shadow: none;
    animation: ms-land-b-11dc8yapg7 0.4s var(--ease-pop) both;
}

.ms-word.is-whole .ms-chip:not(.ms-chip--gap)[b-11dc8yapg7] {
    color: #2e7d32;
    text-shadow: none;
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 4px 0 #7cc35f;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- The options ---------- */
.ms-options[b-11dc8yapg7] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ms-option[b-11dc8yapg7] {
    position: relative;
    display: grid;
    place-items: center;
    min-width: max(64px, calc(var(--len, 2) * 26px + 22px));
    height: clamp(64px, 11vh, 80px);
    margin: 0;
    padding: 0 10px;
    border-radius: 22px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #d6f0ff 0%, #a9dcff 100%);
    box-shadow: 0 5px 0 #5aa7e0, 0 9px 16px rgba(21, 101, 192, 0.2);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease, opacity 0.2s ease;
    animation: ms-deal-b-11dc8yapg7 0.45s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.ms-options--4 .ms-option[b-11dc8yapg7] {
    min-width: max(56px, calc(var(--len, 2) * 22px + 18px));
    padding: 0 6px;
}

.ms-option:active:not(:disabled)[b-11dc8yapg7] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #5aa7e0, 0 4px 8px rgba(21, 101, 192, 0.2);
    transition-duration: 0.07s;
}

.ms-option:disabled[b-11dc8yapg7] {
    cursor: default;
}

.ms-option__text[b-11dc8yapg7] {
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #0d47a1;
    text-shadow: 0 3px 0 rgba(13, 71, 161, 0.18);
    pointer-events: none;
}

.ms-options--4 .ms-option__text[b-11dc8yapg7] {
    font-size: clamp(24px, 7vw, 34px);
}

/* Chosen: the tile leaves a dashed outline while its clone flies to the gap. */
.ms-option.is-found[b-11dc8yapg7] {
    border-style: dashed;
    border-color: #5aa7e0;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
    animation: none;
}

.ms-option.is-found .ms-option__text[b-11dc8yapg7] {
    opacity: 0;
}

.ms-option.is-wrong[b-11dc8yapg7] {
    background: linear-gradient(180deg, #ffe9d6 0%, #ffcfa8 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: ms-shake-b-11dc8yapg7 0.5s ease both;
}

.ms-option.is-missed[b-11dc8yapg7] {
    box-shadow: 0 2px 0 #5aa7e0;
    opacity: 0.45;
}

@keyframes ms-sign-in-b-11dc8yapg7 {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ms-deal-b-11dc8yapg7 {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ms-breathe-b-11dc8yapg7 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes ms-land-b-11dc8yapg7 {
    from { transform: scale(1.3); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

@keyframes ms-pop-b-11dc8yapg7 {
    0% { transform: scale(0.95); }
    55% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes ms-shake-b-11dc8yapg7 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Narrow or short phones: smaller chips, so a four-syllable word and four options still fit. */
@media (max-width: 380px), (max-height: 700px) {
    .ms-chip[b-11dc8yapg7] { height: 50px; min-width: calc(var(--len, 2) * 20px + 16px); font-size: 28px; padding: 0 6px; }
    .ms-option[b-11dc8yapg7] { height: 62px; }
    .ms-option__text[b-11dc8yapg7] { font-size: 28px; }
    .ms-options--4 .ms-option__text[b-11dc8yapg7] { font-size: 24px; }
    .ms-picture img[b-11dc8yapg7] { max-height: 150px; }
}

/* Short landscape phone: picture to the left, word and options on the right (taller wide screens keep the centred column). */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .ms-stage[b-11dc8yapg7] {
        flex-direction: row;
        align-items: center;
    }

    .ms-picture[b-11dc8yapg7] {
        flex: 0 0 38%;
        align-self: stretch;
    }

    .ms-word[b-11dc8yapg7],
    .ms-options[b-11dc8yapg7] {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-picture[b-11dc8yapg7],
    .ms-picture.is-ok[b-11dc8yapg7],
    .ms-chip--gap[b-11dc8yapg7],
    .ms-chip--gap.is-filled[b-11dc8yapg7],
    .ms-option[b-11dc8yapg7],
    .ms-option.is-wrong[b-11dc8yapg7] {
        animation: none;
    }
}
/* /Games/Beach/Reading/SyllableReadingGame.razor.rz.scp.css */
/* „Читај слогове“: run bar, the syllable (big, on a sea-blue sign) and 2–4 picture tiles sized from the board
   (container units). Fills are sand and sea tints, never white or black. Only transform and opacity animate. */
.rd-progress[b-jrz7eiu4if] {
    flex: none;
    display: flex;
    justify-content: center;
}

.rd-play[b-jrz7eiu4if] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* ---------- The syllable ---------- */
.rd-sign[b-jrz7eiu4if] {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    min-width: 140px;
    padding: 6px 28px 10px;
    border-radius: 28px;
    background: linear-gradient(180deg, #d6f0ff 0%, #a9dcff 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #5aa7e0, 0 9px 16px rgba(21, 101, 192, 0.22);
    animation: rd-sign-in-b-jrz7eiu4if 0.5s var(--ease-pop) both;
}

.rd-sign__text[b-jrz7eiu4if] {
    font-size: clamp(56px, 12vh, 110px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f4511e;
    text-shadow: 0 4px 0 #c23a0d;
}

/* ---------- Pictures ---------- */
.rd-board[b-jrz7eiu4if] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.rd-grid[b-jrz7eiu4if] {
    --cols: 2;
    --rows: 1;
    --gap: 14px;
    --tile: max(56px, min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        180px));
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.rd-grid--3[b-jrz7eiu4if] { --cols: 3; }
.rd-grid--4[b-jrz7eiu4if] { --cols: 2; --rows: 2; }

.rd-tile[b-jrz7eiu4if] {
    position: relative;
    display: block;
    width: var(--tile);
    height: var(--tile);
    margin: 0;
    padding: 0;
    border-radius: 24%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #fff3d1 0%, #ffe0a3 100%);
    box-shadow: 0 5px 0 #dcae5e, 0 9px 16px rgba(120, 80, 20, 0.18);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: rd-deal-b-jrz7eiu4if 0.45s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.rd-tile:active:not(:disabled)[b-jrz7eiu4if] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #dcae5e, 0 4px 8px rgba(120, 80, 20, 0.18);
    transition-duration: 0.07s;
}

.rd-tile:disabled[b-jrz7eiu4if] {
    cursor: default;
}

.rd-pic[b-jrz7eiu4if] {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 60%;
    height: 60%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The picture's name: shown on the first rounds, elsewhere once tapped; its first syllable lit. */
.rd-cap[b-jrz7eiu4if] {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 6%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 1px 4px 2px;
    border-radius: 999px;
    background: rgba(255, 233, 186, 0.92);
    font-size: min(calc(var(--tile) * 0.15), calc(var(--tile) * 1.3 / var(--len, 6)));
    font-weight: 900;
    line-height: 1.1;
    color: #5d6b78;
    white-space: nowrap;
    pointer-events: none;
    animation: rd-cap-in-b-jrz7eiu4if 0.35s var(--ease-pop) backwards;
}

.rd-cap__head[b-jrz7eiu4if] {
    font-size: 1.3em;
    color: #f4511e;
    text-shadow: 0 2px 0 rgba(194, 58, 13, 0.25);
}

.rd-cap.is-found[b-jrz7eiu4if] {
    color: #2e7d32;
}

.rd-tile.is-found[b-jrz7eiu4if] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: rd-pop-b-jrz7eiu4if 0.45s var(--ease-pop) both;
}

.rd-tile.is-wrong[b-jrz7eiu4if] {
    background: linear-gradient(180deg, #ffe9d6 0%, #ffcfa8 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: rd-shake-b-jrz7eiu4if 0.5s ease both;
}

/* Starts with another syllable: stays named, faded, out of play. */
.rd-tile.is-missed[b-jrz7eiu4if] {
    box-shadow: 0 2px 0 #dcae5e;
}

.rd-tile.is-missed .rd-pic[b-jrz7eiu4if],
.rd-tile.is-missed .rd-cap[b-jrz7eiu4if] {
    opacity: 0.4;
}

@keyframes rd-sign-in-b-jrz7eiu4if {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rd-deal-b-jrz7eiu4if {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rd-cap-in-b-jrz7eiu4if {
    from { transform: translateY(6px) scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rd-pop-b-jrz7eiu4if {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes rd-shake-b-jrz7eiu4if {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Short phones: a smaller sign leaves the pictures their room. */
@media (max-height: 700px) {
    .rd-sign[b-jrz7eiu4if] { padding: 2px 22px 6px; border-radius: 22px; }
    .rd-sign__text[b-jrz7eiu4if] { font-size: 48px; }
}

/* Wider than tall: the pictures in one row, centred under the syllable. */
@media (min-aspect-ratio: 1/1) {
    .rd-grid--4[b-jrz7eiu4if] { --cols: 4; --rows: 1; }
}

/* Landscape phone (too short for the syllable above the pictures): it goes to the left, the pictures beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .rd-play[b-jrz7eiu4if] {
        flex-direction: row;
        align-items: center;
    }

    .rd-sign[b-jrz7eiu4if] {
        align-self: flex-start;
        min-width: 0;
        padding: 6px 16px 10px;
    }

    .rd-sign__text[b-jrz7eiu4if] {
        font-size: clamp(40px, 14vh, 88px);
    }

    .rd-board[b-jrz7eiu4if] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-sign[b-jrz7eiu4if],
    .rd-tile[b-jrz7eiu4if],
    .rd-cap[b-jrz7eiu4if],
    .rd-tile.is-found[b-jrz7eiu4if],
    .rd-tile.is-wrong[b-jrz7eiu4if] {
        animation: none;
    }
}
/* /Games/Beach/Recognition/SyllableRecognitionGame.razor.rz.scp.css */
/* „Уочи слогове“: run bar, the syllable to find (big, on a sea-blue sign), and a 3-wide grid of sand tiles sized from
   the board (container units). Fills are sand and sea tints, never white or black. Only transform and opacity animate. */
.sr-progress[b-64mxcvev83] {
    flex: none;
    display: flex;
    justify-content: center;
}

.sr-play[b-64mxcvev83] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ---------- The syllable to find ---------- */
.sr-sign[b-64mxcvev83] {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    min-width: 132px;
    padding: 4px 26px 8px;
    border-radius: 26px;
    background: linear-gradient(180deg, #d6f0ff 0%, #a9dcff 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #5aa7e0, 0 9px 16px rgba(21, 101, 192, 0.22);
    animation: sr-sign-in-b-64mxcvev83 0.5s var(--ease-pop) both;
}

.sr-sign__text[b-64mxcvev83] {
    font-size: clamp(48px, 10vh, 92px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f4511e;
    text-shadow: 0 4px 0 #c23a0d;
}

/* ---------- Board ---------- */
.sr-board[b-64mxcvev83] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sr-grid[b-64mxcvev83] {
    --cols: 3;
    --rows: 3;
    --gap: 10px;
    /* Never under the 56 px tap-target floor (on very short phones the board may then scroll out a little). */
    --tile: max(56px, min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        140px));
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.sr-grid--12[b-64mxcvev83] {
    --rows: 4;
}

.sr-tile[b-64mxcvev83] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tile);
    height: var(--tile);
    margin: 0;
    padding: 0;
    border-radius: 26%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #fff3d1 0%, #ffe0a3 100%);
    box-shadow: 0 5px 0 #dcae5e, 0 9px 16px rgba(120, 80, 20, 0.18);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: sr-deal-b-64mxcvev83 0.45s var(--ease-pop) calc(var(--i, 0) * 50ms) both;
}

.sr-tile:active:not(:disabled)[b-64mxcvev83] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #dcae5e, 0 4px 8px rgba(120, 80, 20, 0.18);
    transition-duration: 0.07s;
}

.sr-tile:disabled[b-64mxcvev83] {
    cursor: default;
}

.sr-tile__text[b-64mxcvev83] {
    font-size: calc(var(--tile) * 0.36);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #1565c0;
    text-shadow: 0 3px 0 rgba(13, 71, 161, 0.25);
    pointer-events: none;
}

.sr-tile.is-found[b-64mxcvev83] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: sr-pop-b-64mxcvev83 0.45s var(--ease-pop) both;
}

.sr-tile.is-found .sr-tile__text[b-64mxcvev83] {
    color: #2e7d32;
}

.sr-tile.is-wrong[b-64mxcvev83] {
    background: linear-gradient(180deg, #ffe9d6 0%, #ffcfa8 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: sr-shake-b-64mxcvev83 0.5s ease both;
}

/* Not this syllable: faded, out of play. */
.sr-tile.is-missed[b-64mxcvev83] {
    box-shadow: 0 2px 0 #dcae5e;
}

.sr-tile.is-missed .sr-tile__text[b-64mxcvev83] {
    opacity: 0.35;
}

@keyframes sr-sign-in-b-64mxcvev83 {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sr-deal-b-64mxcvev83 {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sr-pop-b-64mxcvev83 {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes sr-shake-b-64mxcvev83 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Short phones: a smaller sign leaves the board its room. */
@media (max-height: 700px) {
    .sr-sign[b-64mxcvev83] { padding: 2px 20px 6px; border-radius: 22px; }
    .sr-sign__text[b-64mxcvev83] { font-size: 44px; }
}

/* Wider than tall: 12 tiles as 4 x 3, centred under the syllable. */
@media (min-aspect-ratio: 1/1) {
    .sr-grid--12[b-64mxcvev83] {
        --cols: 4;
        --rows: 3;
    }
}

/* Landscape phone (too short for the syllable above the pictures): it goes to the left, the pictures beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .sr-play[b-64mxcvev83] {
        flex-direction: row;
        align-items: center;
    }

    .sr-sign[b-64mxcvev83] {
        align-self: flex-start;
        min-width: 0;
        padding: 6px 14px 10px;
    }

    .sr-sign__text[b-64mxcvev83] {
        font-size: clamp(36px, 13vh, 80px);
    }

    .sr-board[b-64mxcvev83] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-sign[b-64mxcvev83],
    .sr-tile[b-64mxcvev83],
    .sr-tile.is-found[b-64mxcvev83],
    .sr-tile.is-wrong[b-64mxcvev83] {
        animation: none;
    }
}
/* /Games/Beach/Snowball/SnowballGame.razor.rz.scp.css */
/* „Грудва“: run bar, the vowel strip (the instruction), the snowman scene and a field of letter tiles sized from the
   board (container units). Fills are snow, sky and sand tints. Only transform and opacity animate (plus the growing
   snowball's radius). */
.sb-progress[b-o05di0z0ke] {
    flex: none;
    display: flex;
    justify-content: center;
}

/* ---------- The five vowels ---------- */
.sb-vowels[b-o05di0z0ke] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sb-vowel[b-o05di0z0ke] {
    display: grid;
    place-items: center;
    width: clamp(40px, 13vw, 54px);
    height: clamp(40px, 13vw, 54px);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff3b0 0%, #ffd54f 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e0a800, 0 6px 10px rgba(224, 168, 0, 0.25);
    font-size: clamp(22px, 7vw, 30px);
    font-weight: 1000;
    line-height: 1;
    color: #bf360c;
    animation: sb-deal-b-o05di0z0ke 0.45s var(--ease-pop) calc(var(--v, 0) * 70ms) both;
}

/* Until the first touch the pills bob one after another: „these ones“. */
.sb-vowels.is-demo .sb-vowel[b-o05di0z0ke] {
    animation: sb-deal-b-o05di0z0ke 0.45s var(--ease-pop) calc(var(--v, 0) * 70ms) both,
               sb-bob-b-o05di0z0ke 2.2s ease-in-out calc(0.6s + var(--v, 0) * 0.22s) infinite;
}

/* ---------- The snowman ---------- */
.sb-scene[b-o05di0z0ke] {
    flex: none;
    align-self: center;
    width: min(100%, 360px);
    height: clamp(96px, 20vh, 150px);
    border-radius: 24px;
    background: linear-gradient(180deg, #d6ecfb 0%, #eef7fd 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #9fc5e0, 0 9px 16px rgba(21, 101, 192, 0.18);
    overflow: hidden;
}

.sb-scene svg[b-o05di0z0ke] {
    display: block;
    width: 100%;
    height: 100%;
}

.sb-part.is-new[b-o05di0z0ke] {
    transform-box: fill-box;
    transform-origin: center;
    animation: sb-pop-b-o05di0z0ke 0.5s var(--ease-pop) both;
}

.sb-ball circle[b-o05di0z0ke],
.sb-ball ellipse[b-o05di0z0ke] {
    transition: r 0.35s var(--ease-pop), rx 0.35s var(--ease-pop);
}

.sb-ball.is-grown[b-o05di0z0ke] {
    transform-box: fill-box;
    transform-origin: center;
    animation: sb-wobble-b-o05di0z0ke 0.45s var(--ease-pop) both;
}

/* Round done: the ball rolls across to the snowman and fades into its new part. */
.sb-ball.is-rolling[b-o05di0z0ke] {
    transform-box: fill-box;
    transform-origin: center;
    animation: sb-roll-b-o05di0z0ke 0.9s ease-in-out both;
}

/* ---------- The snowfield ---------- */
.sb-field[b-o05di0z0ke] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sb-grid[b-o05di0z0ke] {
    --gap: 6px;
    --tile: max(56px, min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 4px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 8px) / var(--rows)),
        92px));
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.sb-tile[b-o05di0z0ke] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tile);
    height: var(--tile);
    margin: 0;
    padding: 0;
    border-radius: 26%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #dcedf8 100%);
    box-shadow: 0 5px 0 #9fc5e0, 0 8px 14px rgba(21, 101, 192, 0.16);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: sb-deal-b-o05di0z0ke 0.45s var(--ease-pop) calc(var(--i, 0) * 50ms) both;
}

.sb-tile:active:not(:disabled)[b-o05di0z0ke] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #9fc5e0, 0 4px 8px rgba(21, 101, 192, 0.16);
    transition-duration: 0.07s;
}

.sb-tile:disabled[b-o05di0z0ke] {
    cursor: default;
}

.sb-tile__letter[b-o05di0z0ke] {
    font-size: min(calc(var(--tile) * 0.56), 52px);
    font-weight: 1000;
    line-height: 1;
    color: #1565c0;
    text-shadow: 0 3px 0 rgba(13, 71, 161, 0.18);
    pointer-events: none;
}

/* A rolled vowel: a snowball lies where it was, the letter faint inside it. */
.sb-tile.is-rolled[b-o05di0z0ke] {
    background: radial-gradient(circle at 38% 32%, #ffffff 0%, #e4f1fa 60%, #c9dff0 100%);
    border-color: #ffffff;
    box-shadow: 0 3px 0 #b9d4e6;
    animation: sb-sink-b-o05di0z0ke 0.5s var(--ease-pop) both;
}

.sb-tile.is-rolled .sb-tile__letter[b-o05di0z0ke] {
    color: #9fc5e0;
    text-shadow: none;
    opacity: 0.55;
}

/* A consonant: a puff of snow and a shake; it stays. */
.sb-tile.is-puff[b-o05di0z0ke] {
    background: linear-gradient(180deg, #ffe9d6 0%, #ffcfa8 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: sb-shake-b-o05di0z0ke 0.5s ease both;
}

.sb-tile.is-puff[b-o05di0z0ke]::before,
.sb-tile.is-puff[b-o05di0z0ke]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    animation: sb-puff-b-o05di0z0ke 0.55s ease-out both;
}

.sb-tile.is-puff[b-o05di0z0ke]::after {
    width: 40%;
    height: 40%;
    animation-delay: 0.08s;
}

@keyframes sb-deal-b-o05di0z0ke {
    from { transform: translateY(14px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sb-bob-b-o05di0z0ke {
    0%, 70%, 100% { transform: none; }
    15% { transform: translateY(-8px) scale(1.08); }
    30% { transform: none; }
}

@keyframes sb-pop-b-o05di0z0ke {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes sb-wobble-b-o05di0z0ke {
    0% { transform: scale(0.9) rotate(-6deg); }
    60% { transform: scale(1.08) rotate(4deg); }
    100% { transform: none; }
}

@keyframes sb-roll-b-o05di0z0ke {
    0% { transform: translateX(0) rotate(0); opacity: 1; }
    80% { transform: translateX(-90px) rotate(-540deg); opacity: 1; }
    100% { transform: translateX(-100px) rotate(-600deg); opacity: 0; }
}

@keyframes sb-sink-b-o05di0z0ke {
    0% { transform: scale(1.15); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes sb-shake-b-o05di0z0ke {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes sb-puff-b-o05di0z0ke {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Short phones: a flatter scene leaves the field its room. */
@media (max-height: 700px) {
    .sb-scene[b-o05di0z0ke] { height: 92px; }
    .sb-vowel[b-o05di0z0ke] { width: 40px; height: 40px; font-size: 22px; }
}

/* Wider than tall: the strip and the scene stack on the left, the field on the right. */
@media (min-aspect-ratio: 1/1) {
    .sb-scene[b-o05di0z0ke] { height: clamp(80px, 30vh, 130px); }
}

@media (prefers-reduced-motion: reduce) {
    .sb-vowel[b-o05di0z0ke],
    .sb-vowels.is-demo .sb-vowel[b-o05di0z0ke],
    .sb-part.is-new[b-o05di0z0ke],
    .sb-ball.is-grown[b-o05di0z0ke],
    .sb-ball.is-rolling[b-o05di0z0ke],
    .sb-tile[b-o05di0z0ke],
    .sb-tile.is-rolled[b-o05di0z0ke],
    .sb-tile.is-puff[b-o05di0z0ke],
    .sb-tile.is-puff[b-o05di0z0ke]::before,
    .sb-tile.is-puff[b-o05di0z0ke]::after {
        animation: none;
    }
}
/* /Games/Beach/Sounds/SoundsGame.razor.rz.scp.css */
/* „Гласови животиња“: run bar, the cry in a big speech bubble (tail down, at the pictures), and 2–4 picture tiles
   sized from the board (container units). Fills are sand and sea tints, never white or black. Only transform and
   opacity animate. */
.so-progress[b-fx5mrd04ke] {
    flex: none;
    display: flex;
    justify-content: center;
}

.so-play[b-fx5mrd04ke] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

/* ---------- The cry ---------- */
.so-bubble[b-fx5mrd04ke] {
    position: relative;
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    min-width: 150px;
    max-width: 100%;
    padding: 8px 26px 12px;
    border-radius: 30px;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    animation: so-sign-in-b-fx5mrd04ke 0.5s var(--ease-pop) both;
}

.so-bubble__tail[b-fx5mrd04ke] {
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    background: #fff4e2;
    border-right: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    border-radius: 0 0 6px 0;
    box-shadow: 4px 4px 0 -1px #e6c597;
    transform: rotate(45deg);
}

.so-bubble__cry[b-fx5mrd04ke] {
    font-size: clamp(44px, 11vw, 72px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f4511e;
    text-shadow: 0 4px 0 #c23a0d;
    white-space: nowrap;
}

.so-bubble__cry--m[b-fx5mrd04ke] { font-size: clamp(36px, 9.5vw, 60px); }
.so-bubble__cry--l[b-fx5mrd04ke] { font-size: clamp(28px, 7.4vw, 48px); }

.so-bubble.is-found[b-fx5mrd04ke] {
    animation: so-hop-b-fx5mrd04ke 0.6s var(--ease-pop) both;
}

.so-bubble.is-found .so-bubble__cry[b-fx5mrd04ke] {
    color: #2e7d32;
    text-shadow: 0 4px 0 #1b5e20;
}

/* ---------- Pictures ---------- */
.so-board[b-fx5mrd04ke] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.so-grid[b-fx5mrd04ke] {
    --cols: 2;
    --rows: 1;
    --gap: 14px;
    --tile: max(56px, min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        190px));
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.so-grid--3[b-fx5mrd04ke] { --cols: 3; }
.so-grid--4[b-fx5mrd04ke] { --cols: 2; --rows: 2; }

.so-tile[b-fx5mrd04ke] {
    position: relative;
    display: block;
    width: var(--tile);
    height: var(--tile);
    margin: 0;
    padding: 0;
    border-radius: 24%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #fff3d1 0%, #ffe0a3 100%);
    box-shadow: 0 5px 0 #dcae5e, 0 9px 16px rgba(120, 80, 20, 0.18);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: so-deal-b-fx5mrd04ke 0.45s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.so-tile:active:not(:disabled)[b-fx5mrd04ke] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #dcae5e, 0 4px 8px rgba(120, 80, 20, 0.18);
    transition-duration: 0.07s;
}

.so-tile:disabled[b-fx5mrd04ke] {
    cursor: default;
}

.so-pic[b-fx5mrd04ke] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68%;
    height: 68%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The cry lands on its maker. */
.so-tag[b-fx5mrd04ke] {
    position: absolute;
    left: 50%;
    top: -14px;
    padding: 3px 12px 5px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #43a047;
    box-shadow: 0 3px 0 #2c7a31;
    font-size: min(calc(var(--tile) * 0.17), 22px);
    font-weight: 1000;
    line-height: 1;
    color: #2e7d32;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: so-tag-in-b-fx5mrd04ke 0.45s var(--ease-pop) both;
}

.so-tile.is-found[b-fx5mrd04ke] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: so-pop-b-fx5mrd04ke 0.45s var(--ease-pop) both;
}

.so-tile.is-wrong[b-fx5mrd04ke] {
    background: linear-gradient(180deg, #ffe9d6 0%, #ffcfa8 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: so-shake-b-fx5mrd04ke 0.5s ease both;
}

.so-tile.is-missed[b-fx5mrd04ke] {
    box-shadow: 0 2px 0 #dcae5e;
}

.so-tile.is-missed .so-pic[b-fx5mrd04ke] {
    opacity: 0.4;
}

@keyframes so-sign-in-b-fx5mrd04ke {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes so-deal-b-fx5mrd04ke {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes so-hop-b-fx5mrd04ke {
    0%, 100% { transform: none; }
    40% { transform: translateY(-12px) scale(1.06); }
}

@keyframes so-tag-in-b-fx5mrd04ke {
    from { transform: translateX(-50%) translateY(10px) scale(0.5); opacity: 0; }
    to { transform: translateX(-50%); opacity: 1; }
}

@keyframes so-pop-b-fx5mrd04ke {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes so-shake-b-fx5mrd04ke {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Short phones: a smaller bubble leaves the pictures their room. */
@media (max-height: 700px) {
    .so-bubble[b-fx5mrd04ke] { padding: 4px 20px 8px; border-radius: 22px; }
    .so-bubble__cry[b-fx5mrd04ke] { font-size: 40px; }
    .so-bubble__cry--m[b-fx5mrd04ke] { font-size: 34px; }
    .so-bubble__cry--l[b-fx5mrd04ke] { font-size: 27px; }
}

/* Wider than tall: the pictures in one row, centred under the cry. */
@media (min-aspect-ratio: 1/1) {
    .so-grid--4[b-fx5mrd04ke] { --cols: 4; --rows: 1; }
}

/* Landscape phone (too short for the bubble above the pictures): it goes to the left, the pictures beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .so-play[b-fx5mrd04ke] {
        flex-direction: row;
        align-items: center;
    }

    .so-bubble[b-fx5mrd04ke] {
        align-self: flex-start;
        min-width: 0;
    }

    .so-board[b-fx5mrd04ke] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .so-bubble[b-fx5mrd04ke],
    .so-bubble.is-found[b-fx5mrd04ke],
    .so-tile[b-fx5mrd04ke],
    .so-tag[b-fx5mrd04ke],
    .so-tile.is-found[b-fx5mrd04ke],
    .so-tile.is-wrong[b-fx5mrd04ke] {
        animation: none;
    }
}
/* /Games/Beach/SyllableCounting/SyllableCountGame.razor.rz.scp.css */
/* „Бројање слогова“: the run bar, the picture, the word in coloured syllable chunks, then the answers (1–4 dots).
   Phone portrait first; every tap target is at least 56 px. Animations are transform / opacity only. */
.sc-progress[b-axdfx76odp] {
    flex: none;
    display: flex;
    justify-content: center;
}

.sc-stage[b-axdfx76odp] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    animation: sc-in-b-axdfx76odp 0.4s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* ---------- Picture ---------- */
.sc-picture[b-axdfx76odp] {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
    width: min(46vw, 30vh, 190px);
    aspect-ratio: 1;
    border-radius: 30px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #e6f4ff 0%, #fff1d2 100%);
    box-shadow: 0 6px 0 #e6c597, 0 12px 22px rgba(61, 42, 28, 0.2);
}

.sc-picture img[b-axdfx76odp] {
    width: 76%;
    height: 76%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.sc-picture.is-ok[b-axdfx76odp] {
    animation: sc-hop-b-axdfx76odp 0.7s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* ---------- The word in chunks ---------- */
.sc-word[b-axdfx76odp] {
    display: flex;
    justify-content: center;
    max-width: 100%;
    padding-bottom: 22px;
}

.sc-word--apart[b-axdfx76odp] { gap: 18px; }
.sc-word--near[b-axdfx76odp] { gap: 6px; }
.sc-word--joined[b-axdfx76odp] { gap: 0; }

.sc-chunk[b-axdfx76odp] {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 66px;
    margin: 0;
    padding: 0 12px;
    border-radius: 20px;
    border: 3px solid #ffffff;
    background: var(--c);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 70%, #000000);
    color: #ffffff;
    font: inherit;
    font-size: clamp(26px, 8.4vw, 38px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.3s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.sc-chunk:active[b-axdfx76odp] {
    transform: translateY(3px) scale(0.95);
    transition-duration: 0.07s;
}

/* Joined: one word, only the colours tell the syllables apart. */
.sc-word--joined .sc-chunk[b-axdfx76odp] {
    min-width: 0;
    padding: 0 8px;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
}

.sc-word--joined .sc-chunk:first-child[b-axdfx76odp] {
    border-left-width: 3px;
    border-radius: 20px 0 0 20px;
}

.sc-word--joined .sc-chunk:last-child[b-axdfx76odp] {
    border-right-width: 3px;
    border-radius: 0 20px 20px 0;
}

.sc-word--joined .sc-chunk:only-child[b-axdfx76odp] { border-radius: 20px; }

/* The clap dot under a chunk: there once the chunk is tapped (or while the chunks count themselves). */
.sc-chunk__dot[b-axdfx76odp] {
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: var(--c-gold, #ffc93c);
    box-shadow: 0 2px 0 var(--c-gold-dark, #f29f05);
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.2s ease, transform 0.3s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.sc-chunk.is-clapped[b-axdfx76odp] { animation: sc-clap-b-axdfx76odp 0.45s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)); }

.sc-chunk.is-clapped .sc-chunk__dot[b-axdfx76odp] {
    opacity: 1;
    transform: scale(1);
}

/* Counting once (after a miss): each chunk in turn hops and keeps its dot. */
.sc-word.is-counting .sc-chunk[b-axdfx76odp] { animation: sc-count-b-axdfx76odp 0.5s ease-in-out calc(var(--k) * 0.5s + 0.2s) both; }
.sc-word.is-counting .sc-chunk__dot[b-axdfx76odp] { animation: sc-dot-b-axdfx76odp 0.5s ease-out calc(var(--k) * 0.5s + 0.2s) both; }

/* Counting in a loop (the rule, on the first word until the first touch): the dots go away and it starts over. */
.sc-word.is-counting.is-loop .sc-chunk[b-axdfx76odp] {
    animation: sc-count-loop-b-axdfx76odp calc(var(--n) * 0.5s + 1.4s) ease-in-out calc(var(--k) * 0.5s + 0.4s) infinite both;
}

.sc-word.is-counting.is-loop .sc-chunk__dot[b-axdfx76odp] {
    animation: sc-dot-loop-b-axdfx76odp calc(var(--n) * 0.5s + 1.4s) ease-out calc(var(--k) * 0.5s + 0.4s) infinite both;
}

.sc-word.is-ok .sc-chunk[b-axdfx76odp] { animation: sc-hop-b-axdfx76odp 0.7s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) calc(var(--k) * 90ms) both; }
.sc-word.is-ok .sc-chunk__dot[b-axdfx76odp] { opacity: 1; transform: scale(1); }

/* ---------- Answers: 1–4 dots ---------- */
.sc-answers[b-axdfx76odp] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 6px;
}

.sc-answer[b-axdfx76odp] {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0;
    padding: 0;
    border-radius: 24px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--c-beach-1) 0%, var(--c-beach-2) 100%);
    box-shadow: 0 5px 0 #1565c0, 0 9px 16px rgba(61, 42, 28, 0.22);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.3s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)), opacity 0.2s ease;
}

.sc-answer:active[b-axdfx76odp] {
    transform: translateY(4px) scale(0.94);
    box-shadow: 0 1px 0 #1565c0, 0 4px 8px rgba(61, 42, 28, 0.2);
    transition-duration: 0.07s;
}

.sc-answer.is-ok[b-axdfx76odp] {
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 5px 0 #2c7a31, 0 0 0 5px rgba(124, 195, 95, 0.5);
    animation: sc-hop-b-axdfx76odp 0.6s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.sc-answer.is-no[b-axdfx76odp] {
    background: linear-gradient(180deg, #d9cfc2 0%, #b9aa98 100%);
    box-shadow: 0 3px 0 #9c8b77;
    opacity: 0.55;
    cursor: default;
    animation: sc-wiggle-b-axdfx76odp 0.45s ease-in-out;
}

/* The dots, like a die: 1, 2 in a row, 3 as a triangle, 4 as a square. */
.sc-pips[b-axdfx76odp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 6px;
    width: 44px;
}

.sc-pip[b-axdfx76odp] {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--c-gold, #ffc93c);
    box-shadow: 0 2px 0 var(--c-gold-dark, #f29f05);
}

.sc-pips--1 .sc-pip[b-axdfx76odp] { width: 22px; height: 22px; }

/* The demo hand: taps the right answer while the chunks count, until the first touch. */
.sc-hand[b-axdfx76odp] {
    position: absolute;
    left: 50%;
    top: 46%;
    font-size: 50px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: sc-tap-b-axdfx76odp 1.4s ease-in-out 0.8s infinite both;
}

@keyframes sc-in-b-axdfx76odp {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes sc-hop-b-axdfx76odp {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-14px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes sc-clap-b-axdfx76odp {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes sc-count-b-axdfx76odp {
    0%, 100% { transform: none; }
    45% { transform: translateY(-10px) scale(1.12); }
}

@keyframes sc-dot-b-axdfx76odp {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* One cycle: hop at the start, the dot stays until near the end, then all dots vanish together-ish. */
@keyframes sc-count-loop-b-axdfx76odp {
    0%, 22%, 100% { transform: none; }
    10% { transform: translateY(-10px) scale(1.12); }
}

@keyframes sc-dot-loop-b-axdfx76odp {
    0% { opacity: 0; transform: scale(0.3); }
    10%, 70% { opacity: 1; transform: scale(1); }
    85%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes sc-tap-b-axdfx76odp {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@keyframes sc-wiggle-b-axdfx76odp {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

/* Short screens: a smaller picture so the answers always stay on screen. */
@media (max-height: 640px) {
    .sc-stage[b-axdfx76odp] { gap: 14px; }
    .sc-picture[b-axdfx76odp] { width: min(40vw, 24vh, 150px); }
    .sc-chunk[b-axdfx76odp] { height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-stage[b-axdfx76odp],
    .sc-picture.is-ok[b-axdfx76odp],
    .sc-chunk.is-clapped[b-axdfx76odp],
    .sc-word.is-counting .sc-chunk[b-axdfx76odp],
    .sc-word.is-counting.is-loop .sc-chunk[b-axdfx76odp],
    .sc-word.is-ok .sc-chunk[b-axdfx76odp],
    .sc-answer.is-ok[b-axdfx76odp],
    .sc-answer.is-no[b-axdfx76odp] {
        animation: none;
    }

    .sc-word.is-counting .sc-chunk__dot[b-axdfx76odp],
    .sc-word.is-counting.is-loop .sc-chunk__dot[b-axdfx76odp] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .sc-hand[b-axdfx76odp] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/Beach/SyllableTracing/SyllableTracingGame.razor.rz.scp.css */
/* „Пиши слогове“: the run bar, the syllable strip, then one square drawing pad as big as the panel allows (400×400
   guide units). The pad styles are the city's „Пиши слово“ (LetterTracingGame.razor.css), copied with an st- prefix
   and a tinted pad. Animations are transform / opacity only. */
.st-progress[b-0tthrhnhdo] {
    flex: none;
    display: flex;
    justify-content: center;
}

.st-padbox[b-0tthrhnhdo] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.st-pad[b-0tthrhnhdo] {
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #f1f9ff 0%, #ddefff 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.st-pad.is-ok[b-0tthrhnhdo] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.st-pad.is-low[b-0tthrhnhdo] {
    box-shadow: 0 5px 0 #f0a46b, 0 0 0 4px rgba(244, 144, 12, 0.4), 0 10px 20px rgba(230, 81, 0, 0.2);
    animation: st-wiggle-b-0tthrhnhdo 0.45s ease-in-out;
}

.st-svg[b-0tthrhnhdo] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Guide ---------- */
.st-rule[b-0tthrhnhdo] {
    stroke: #cfe3f3;
    stroke-width: 3;
    stroke-linecap: round;
}

.st-rule--x[b-0tthrhnhdo] {
    stroke-dasharray: 10 10;
}

/* The letter's faint shape: the corridor a stroke may wander in. */
.st-body[b-0tthrhnhdo] {
    fill: #ffe8b6;
    stroke: #ffe8b6;
    stroke-width: 46;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-body path[b-0tthrhnhdo] {
    fill: none;
}

/* Strokes still to write: a row of dots (the one to write now in its colour). */
.st-dots[b-0tthrhnhdo] {
    fill: none;
    stroke: #d9c7ad;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 16;
}

.st-dots.is-now[b-0tthrhnhdo] {
    stroke: var(--c);
    stroke-width: 10;
}

/* Lighter guide: no shape, fainter dots. */
.is-light .st-dots[b-0tthrhnhdo] {
    stroke: #e8dccb;
    stroke-width: 7;
}

.is-light .st-dots.is-now[b-0tthrhnhdo] {
    stroke: var(--c);
    opacity: 0.6;
    stroke-width: 8;
}

/* Written strokes, locked in their colours. */
.st-locked[b-0tthrhnhdo] {
    fill: none;
    stroke: var(--c);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-dot-done[b-0tthrhnhdo] {
    fill: var(--c);
}

/* The whole letter done: it bounces, with a warm glow under it. */
.st-done[b-0tthrhnhdo] {
    transform-box: view-box;
    transform-origin: 50% 52%;
}

.st-done.is-cheer[b-0tthrhnhdo] {
    animation: st-bounce-b-0tthrhnhdo 0.9s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.st-glow[b-0tthrhnhdo] {
    fill: #fff1a8;
    stroke: #fff1a8;
    stroke-width: 50;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: st-glow-b-0tthrhnhdo 1.4s ease-out both;
}

.st-glow path[b-0tthrhnhdo] {
    fill: none;
}

/* Order badges: the stroke's colour, one white pip per place. */
.st-badge__disc[b-0tthrhnhdo] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 3.5;
}

.st-badge__pip[b-0tthrhnhdo],
.st-start__pip[b-0tthrhnhdo] {
    fill: #ffffff;
}

/* Where to start now: the green dot, gently pinging. */
.st-start__disc[b-0tthrhnhdo] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 4.5;
}

.st-start__in[b-0tthrhnhdo] {
    transform-box: fill-box;
    transform-origin: center;
    animation: st-pop-in-b-0tthrhnhdo 0.35s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.st-start__ring[b-0tthrhnhdo] {
    fill: none;
    stroke: #43a047;
    stroke-width: 3.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: st-ping-b-0tthrhnhdo 1.6s ease-out infinite;
    pointer-events: none;
}

/* Which way: a small green chevron a little way along the stroke. */
.st-arrow path[b-0tthrhnhdo] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-arrow__under[b-0tthrhnhdo] {
    stroke: #ffffff;
    stroke-width: 11;
}

.st-arrow__head[b-0tthrhnhdo] {
    stroke: #2e7d32;
    stroke-width: 6;
}

/* The finger's ink, in the colour of the stroke being written; green when it is right, fading when not. */
.st-ink[b-0tthrhnhdo] {
    fill: none;
    stroke: var(--c);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.st-pad.is-ok .st-ink[b-0tthrhnhdo] {
    stroke: #43a047;
}

.st-pad.is-low .st-ink[b-0tthrhnhdo] {
    animation: st-fade-b-0tthrhnhdo 0.5s ease-out forwards;
}

.st-spark[b-0tthrhnhdo] {
    fill: #ffc93c;
    stroke: #f29f05;
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: st-spark-b-0tthrhnhdo 0.9s ease-out var(--d, 0ms) both;
    pointer-events: none;
}

/* The demo hand (fingertip on the stroke). */
.st-demo[b-0tthrhnhdo] {
    pointer-events: none;
}

.st-demo__hand[b-0tthrhnhdo] {
    font-size: 58px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

@keyframes st-spark-b-0tthrhnhdo {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(40deg); opacity: 1; }
    100% { transform: scale(0.6) rotate(90deg); opacity: 0; }
}

@keyframes st-bounce-b-0tthrhnhdo {
    0% { transform: scale(1); }
    30% { transform: scale(1.12) translateY(-10px); }
    55% { transform: scale(0.96); }
    75% { transform: scale(1.04) translateY(-3px); }
    100% { transform: scale(1); }
}

@keyframes st-glow-b-0tthrhnhdo {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0.7; }
}

@keyframes st-fade-b-0tthrhnhdo {
    to { opacity: 0; }
}

@keyframes st-wiggle-b-0tthrhnhdo {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes st-ping-b-0tthrhnhdo {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.3); opacity: 0; }
}

@keyframes st-pop-in-b-0tthrhnhdo {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ---------- The syllable above the pad ---------- */
.st-word[b-0tthrhnhdo] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.st-chip[b-0tthrhnhdo] {
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 60px;
    padding: 0 10px;
    border-radius: 18px;
    border: 3px dashed #c9b79c;
    background: rgba(255, 248, 231, 0.85);
    color: #c9b79c;
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.3s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.st-chip.is-now[b-0tthrhnhdo] {
    border: 3px solid #ffc93c;
    background: linear-gradient(180deg, #fffbe8 0%, #fff0c2 100%);
    color: #f29f05;
    transform: translateY(-3px) scale(1.06);
    animation: st-chip-pulse-b-0tthrhnhdo 1.2s ease-in-out infinite;
}

.st-chip.is-done[b-0tthrhnhdo] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, var(--c-beach-1) 0%, var(--c-beach-2) 100%);
    box-shadow: 0 4px 0 #1565c0;
    color: #ffffff;
    text-shadow: 0 2px 0 #1565c0;
    animation: st-pop-in-b-0tthrhnhdo 0.35s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.st-word.is-cheer .st-chip[b-0tthrhnhdo] {
    animation: st-hop-b-0tthrhnhdo 0.7s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) calc(var(--k) * 110ms) both;
}

@keyframes st-chip-pulse-b-0tthrhnhdo {
    0%, 100% { transform: translateY(-3px) scale(1.06); }
    50% { transform: translateY(-3px) scale(1.12); }
}

@keyframes st-hop-b-0tthrhnhdo {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-16px) scale(1.15); }
    100% { transform: translateY(0) scale(1); }
}

/* Short landscape: the run bar floats in the free space left of the pad, so the pad gets the panel's full height. */
@media (orientation: landscape) and (max-height: 560px) {
    .st-progress[b-0tthrhnhdo] {
        position: absolute;
        z-index: 1;
        left: 16px;
        top: 16px;
        width: calc(50% - min(50vh, 160px) - 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-start__ring[b-0tthrhnhdo],
    .st-pad.is-low[b-0tthrhnhdo],
    .st-done.is-cheer[b-0tthrhnhdo],
    .st-chip.is-now[b-0tthrhnhdo],
    .st-word.is-cheer .st-chip[b-0tthrhnhdo] {
        animation: none;
    }
}
/* /Games/Components/CandyButton.razor.rz.scp.css */
.candy[b-3ol7lsgybq] {
    --h: 60px;
    --edge: 6px;
    position: relative;
    display: block;
    width: 100%;
    height: calc(var(--h) + var(--edge));
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.candy--m[b-3ol7lsgybq] {
    --h: 52px;
    --edge: 5px;
}

.candy--green[b-3ol7lsgybq]  { --c1: #8ee070; --c2: #43a047; --c3: #2c7a31; }
.candy--orange[b-3ol7lsgybq] { --c1: var(--c-fox-light); --c2: var(--c-fox); --c3: #c96a05; }
.candy--blue[b-3ol7lsgybq]   { --c1: var(--c-beach-1); --c2: var(--c-beach-2); --c3: #155fb3; }
.candy--purple[b-3ol7lsgybq] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5a32a8; }
.candy--pink[b-3ol7lsgybq]   { --c1: #ff8fb4; --c2: #ff4f86; --c3: #c2185b; }
.candy--cream[b-3ol7lsgybq]  { --c1: #fffdf7; --c2: #ffe9c7; --c3: #e6c597; }

.candy__base[b-3ol7lsgybq],
.candy__face[b-3ol7lsgybq] {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--h);
    border-radius: 22px;
    border: 3px solid #ffffff;
}

.candy__base[b-3ol7lsgybq] {
    top: var(--edge);
    background: var(--c3);
    box-shadow: 0 6px 14px rgba(61, 42, 28, 0.28);
}

.candy__face[b-3ol7lsgybq] {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-shadow:
        0 1.5px 0 var(--c3), 0 -1.5px 0 var(--c3), 1.5px 0 0 var(--c3), -1.5px 0 0 var(--c3),
        1px 1px 0 var(--c3), -1px 1px 0 var(--c3), 1px -1px 0 var(--c3), -1px -1px 0 var(--c3),
        0 3px 0 var(--c3);
    transform-origin: 50% 100%;
    transition: transform 0.4s var(--ease-pop);
}

.candy--m .candy__face[b-3ol7lsgybq] {
    font-size: 19px;
    border-radius: 19px;
}

.candy--m .candy__base[b-3ol7lsgybq] {
    border-radius: 19px;
}

.candy--cream .candy__face[b-3ol7lsgybq] {
    color: var(--c-text);
    text-shadow: none;
}

.candy__icon[b-3ol7lsgybq] {
    font-size: 1.15em;
    line-height: 1;
    text-shadow: none;
}

/* Icon-only (no reading needed): one big glyph. */
.candy--icon .candy__icon[b-3ol7lsgybq] {
    font-size: 34px;
    text-shadow:
        0 2px 0 var(--c3), 0 -2px 0 var(--c3), 2px 0 0 var(--c3), -2px 0 0 var(--c3), 0 3px 0 var(--c3);
}

.candy--icon.candy--m .candy__icon[b-3ol7lsgybq] {
    font-size: 30px;
}

.candy__label[b-3ol7lsgybq] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.candy.is-pressed:not(:disabled) .candy__face[b-3ol7lsgybq],
.candy:active:not(:disabled) .candy__face[b-3ol7lsgybq] {
    transform: translateY(calc(var(--edge) - 1px)) scale(1.02, 0.95);
    transition-duration: 0.07s;
    transition-timing-function: ease-out;
}

.candy:disabled[b-3ol7lsgybq] {
    cursor: default;
    filter: grayscale(0.75) opacity(0.6);
}

.candy:focus-visible[b-3ol7lsgybq] {
    outline: none;
}

.candy:focus-visible .candy__face[b-3ol7lsgybq] {
    outline: 3px solid var(--c-text);
    outline-offset: 3px;
}
/* /Games/Components/CtaArrow.razor.rz.scp.css */
.cta[b-4julleujqe] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: rotate(var(--cta-rot, 0deg));
    filter: drop-shadow(0 4px 6px rgba(61, 42, 28, 0.45));
}

.cta__svg[b-4julleujqe] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 20%;
    animation: cta-bounce-b-4julleujqe 1.1s ease-in-out infinite;
}

.cta--loud .cta__svg[b-4julleujqe] { animation-duration: 0.55s; }

.cta__edge[b-4julleujqe] { fill: #e46f00; stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; }
.cta__face[b-4julleujqe] { fill: url(#cta-grad); stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }
.cta__gloss[b-4julleujqe] { fill: #ffffff; opacity: 0.55; }

@keyframes cta-bounce-b-4julleujqe {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    70% { transform: translateY(9px) scale(1.04, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
    .cta__svg[b-4julleujqe] { animation: none; }
}
/* /Games/Components/GameList.razor.rz.scp.css */
/* Game list: back + title header, then big cards (one per row, scrolls inside the list if ever needed). */
.gl[b-hbdq25hjsg] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding:
        calc(var(--safe-top) + var(--hud-top-h)) calc(var(--safe-right) + 12px)
        calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);
}

.gl--games[b-hbdq25hjsg]   { --c1: var(--c-forest-1);  --c2: var(--c-forest-2);  --c3: #2c7a31; --ct: #2e7d32; }
.gl--letters[b-hbdq25hjsg] { --c1: var(--c-city-1);    --c2: var(--c-city-2); --c3: #c23a0d; --ct: #d84315; }
.gl--beach[b-hbdq25hjsg]    { --c1: var(--c-beach-1);    --c2: var(--c-beach-2);    --c3: #1565c0; --ct: #1565c0; }
.gl--mountain[b-hbdq25hjsg] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5e35b1; --ct: #5e35b1; }

.gl__head[b-hbdq25hjsg] {
    position: relative;
    z-index: var(--z-stage);
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gl__back[b-hbdq25hjsg] {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 11px 13px 11px 9px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.25);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
}

.gl__back:active[b-hbdq25hjsg] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

.gl__title[b-hbdq25hjsg] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    margin: 0;
    padding: 0 18px 0 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 4px 0 var(--c3), 0 8px 16px rgba(61, 42, 28, 0.22);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 2px 0 var(--c3);
}

.gl__title-icon[b-hbdq25hjsg] {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
}

.gl__list[b-hbdq25hjsg] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 2px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- Card ---------- */
.gl-card[b-hbdq25hjsg] {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 14px 14px 14px;
    border-radius: 28px;
    border: 4px solid #ffffff;
    background:
        radial-gradient(rgba(244, 144, 12, 0.07) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    box-shadow: 0 6px 0 #e6c597, 0 12px 24px rgba(61, 42, 28, 0.22);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: gl-in-b-hbdq25hjsg 0.5s var(--ease-pop) calc(var(--i) * 90ms) both;
}

.gl-card:active[b-hbdq25hjsg] {
    transform: translateY(5px) scale(0.98);
    box-shadow: 0 1px 0 #e6c597, 0 5px 12px rgba(61, 42, 28, 0.2);
    transition-duration: 0.07s;
}

.gl-card__icon[b-hbdq25hjsg] {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 30%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 65%, #ffffff) 0%, var(--tint) 100%);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--tint) 70%, #000000), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.gl-card__gloss[b-hbdq25hjsg] {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 5%;
    height: 36%;
    border-radius: 999px 999px 60% 60%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.gl-card__art[b-hbdq25hjsg] {
    position: relative;
    display: grid;
    width: 80%;
    height: 80%;
    margin-top: -4%;
}

.gl-card__text[b-hbdq25hjsg] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gl-card__title[b-hbdq25hjsg] {
    font-size: 23px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--c-text);
}

.gl-card__sub[b-hbdq25hjsg] {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text-soft);
}

.gl-card__stars[b-hbdq25hjsg] {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.gl-card__stars svg[b-hbdq25hjsg] {
    width: 24px;
    height: 24px;
    fill: #f1dcc0;
}

.gl-card__stars svg.is-on[b-hbdq25hjsg] {
    fill: var(--c-gold);
    filter: drop-shadow(0 2px 0 var(--c-gold-dark));
}

.gl-card__play[b-hbdq25hjsg] {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 12px 10px 12px 14px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 4px 0 #2c7a31;
    color: #ffffff;
}

.gl-card__play svg[b-hbdq25hjsg] {
    width: 100%;
    height: 100%;
}

/* ---------- Section titles ---------- */
.gl-section[b-hbdq25hjsg] {
    flex: none;
    margin: 6px 4px -4px;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(61, 42, 28, 0.35), 0 0 10px rgba(61, 42, 28, 0.25);
}

/* ---------- Goal: every game once → the city opens (pictures, no reading) ---------- */
.gl-goal[b-hbdq25hjsg] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 22px;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    box-shadow: 0 4px 0 #e6c597, 0 8px 16px rgba(61, 42, 28, 0.18);
}

.gl-goal__ticks[b-hbdq25hjsg] {
    display: flex;
    gap: 6px;
}

.gl-goal__tick[b-hbdq25hjsg] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px dashed #e6c597;
    background: rgba(255, 255, 255, 0.7);
    color: transparent;
    font-size: 18px;
    font-weight: 900;
}

.gl-goal__tick.is-on[b-hbdq25hjsg] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 3px 0 #2c7a31;
    color: #ffffff;
    animation: gl-tick-b-hbdq25hjsg 0.45s var(--ease-pop) calc(var(--t) * 90ms + 200ms) both;
}

.gl-goal__arrow[b-hbdq25hjsg] {
    font-size: 22px;
    font-weight: 900;
    color: #e6c597;
}

.gl-goal__prize[b-hbdq25hjsg] {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 30%;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, var(--c-city-1) 0%, var(--c-city-2) 100%);
    box-shadow: 0 3px 0 #c23a0d;
}

.gl-goal__city[b-hbdq25hjsg] {
    display: grid;
    width: 80%;
    height: 80%;
}

.gl-goal:not(.is-done) .gl-goal__prize[b-hbdq25hjsg] {
    filter: grayscale(0.8);
    opacity: 0.8;
}

.gl-goal__lock[b-hbdq25hjsg] {
    position: absolute;
    right: -10px;
    bottom: -8px;
    font-size: 20px;
    filter: none;
}

.gl-goal.is-done[b-hbdq25hjsg] {
    background: linear-gradient(180deg, #fbfff6 0%, #e3f6d2 100%);
}

.gl-goal.is-done .gl-goal__prize[b-hbdq25hjsg] {
    animation: gl-tick-b-hbdq25hjsg 0.6s var(--ease-pop) 0.8s both;
}

@keyframes gl-tick-b-hbdq25hjsg {
    from { transform: scale(0.3); }
    to { transform: scale(1); }
}

@keyframes gl-in-b-hbdq25hjsg {
    from { transform: translateY(30px) scale(0.9); opacity: 0; }
    to { transform: none; opacity: 1; }
}


/* ============ Done / next / locked language (the letter house reuses it) ============
   done   : green fill, big ✓ stamp (landing once), bigger gold stars, small ↻ replay
   next   : ONE card, lifted, gold frame pulsing (opacity), big pulsing ▶, bouncing CtaArrow above it
   others : the plain card (locked houses on the city map stay grey)                                  */
.gl-card.is-done[b-hbdq25hjsg] {
    background:
        radial-gradient(rgba(67, 160, 71, 0.10) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #e6f9d4 0%, #bfe9a0 100%);
    border-color: #ffffff;
    box-shadow: 0 6px 0 #8cc66b, 0 12px 24px rgba(61, 42, 28, 0.2);
}

.gl-card.is-done .gl-card__stars[b-hbdq25hjsg] { gap: 3px; }
.gl-card.is-done .gl-card__stars svg[b-hbdq25hjsg] { width: 34px; height: 34px; }

.gl-card__done[b-hbdq25hjsg] {
    position: absolute;
    left: 66px;
    top: -8px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 4px 0 #2c7a31, 0 8px 12px rgba(61, 42, 28, 0.25);
    color: #ffffff;
    transform: rotate(-10deg);
}

.gl-card__done svg[b-hbdq25hjsg] { width: 100%; height: 100%; }

/* The stamp lands once: big, transparent, slams down with a little squash. */
.gl-card__done.is-landing[b-hbdq25hjsg] { animation: gl-stamp-b-hbdq25hjsg 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 0.4s both; }

.gl-card__play--replay[b-hbdq25hjsg] {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #e9f3dd 100%);
    box-shadow: 0 3px 0 #8cc66b;
    color: #2c7a31;
}

/* ---- the ONE next card ---- */
.gl-card.is-next[b-hbdq25hjsg] {
    z-index: 2;
    transform: translateY(-3px) scale(1.025);
    border-color: #ffe36e;
    background:
        radial-gradient(rgba(255, 176, 0, 0.12) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fffef2 0%, #fff0c2 100%);
    box-shadow: 0 8px 0 #f2b21a, 0 14px 26px rgba(61, 42, 28, 0.28);
}

/* Glow frame: a pseudo-element whose opacity pulses (cheap, no layout). */
.gl-card.is-next[b-hbdq25hjsg]::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 36px;
    border: 5px solid #ffc93c;
    box-shadow: 0 0 22px 6px rgba(255, 201, 60, 0.85);
    pointer-events: none;
    animation: gl-glow-b-hbdq25hjsg 1.3s ease-in-out infinite;
}

.gl-card.is-next .gl-card__play[b-hbdq25hjsg] {
    width: 68px;
    height: 68px;
    padding: 15px 12px 15px 18px;
    animation: gl-play-b-hbdq25hjsg 1.1s ease-in-out infinite;
}

.gl-card__cta[b-hbdq25hjsg] {
    position: absolute;
    right: 18px;
    top: -52px;
    z-index: 3;
    width: 44px;
    height: 50px;
    pointer-events: none;
}

.gl-card.is-flash[b-hbdq25hjsg] { animation: gl-flash-b-hbdq25hjsg 0.5s ease-in-out 2; }

/* ---- top strip: the pulsing empty circle, the celebration ---- */
button.gl-goal__tick.is-next[b-hbdq25hjsg] {
    margin: 0;
    padding: 0;
    border-color: #ffc93c;
    border-style: solid;
    background: #fffbe8;
    color: #f2b21a;
    cursor: pointer;
    animation: gl-play-b-hbdq25hjsg 1.1s ease-in-out infinite;
}

.gl-goal__prize[b-hbdq25hjsg] { margin: 0; padding: 0; }
.gl-goal__prize.is-open[b-hbdq25hjsg] { cursor: pointer; animation: gl-play-b-hbdq25hjsg 0.9s ease-in-out infinite; }
.gl-goal.is-done .gl-goal__arrow[b-hbdq25hjsg] { color: #43a047; animation: gl-nudge-b-hbdq25hjsg 0.8s ease-in-out infinite; }

.gl-goal__cta[b-hbdq25hjsg] {
    position: absolute;
    left: 50%;
    top: -46px;
    width: 36px;
    height: 42px;
    margin-left: -18px;
    pointer-events: none;
}

@keyframes gl-glow-b-hbdq25hjsg {
    0%, 100% { opacity: 0.35; transform: scale(0.99); }
    50% { opacity: 1; transform: scale(1.015); }
}

@keyframes gl-play-b-hbdq25hjsg {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

@keyframes gl-nudge-b-hbdq25hjsg {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@keyframes gl-stamp-b-hbdq25hjsg {
    0% { transform: rotate(-30deg) scale(3); opacity: 0; }
    55% { transform: rotate(-10deg) scale(0.85); opacity: 1; }
    100% { transform: rotate(-10deg) scale(1); opacity: 1; }
}

@keyframes gl-flash-b-hbdq25hjsg {
    0%, 100% { transform: translateY(-3px) scale(1.025); }
    50% { transform: translateY(-3px) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-card[b-hbdq25hjsg] { animation: none; }
    .gl-card.is-next[b-hbdq25hjsg]::after,
    .gl-card.is-next .gl-card__play[b-hbdq25hjsg],
    button.gl-goal__tick.is-next[b-hbdq25hjsg],
    .gl-goal__prize.is-open[b-hbdq25hjsg],
    .gl-goal.is-done .gl-goal__arrow[b-hbdq25hjsg],
    .gl-card.is-flash[b-hbdq25hjsg],
    .gl-card__done.is-landing[b-hbdq25hjsg] { animation: none; }
}

/* ---------- Beach / mountain lists ---------- */
/* Cards whose game has no drawn icon yet show its emoji on the tinted tile. */
.gl-card__art--emoji[b-hbdq25hjsg] {
    place-items: center;
    font-size: 50px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.18));
}

/* The prize tile in the top strip takes the colours of the biome it opens. */
.gl-goal__prize--beach[b-hbdq25hjsg]    { background: linear-gradient(180deg, var(--c-beach-1) 0%, var(--c-beach-2) 100%);       box-shadow: 0 3px 0 #1565c0; }
.gl-goal__prize--mountain[b-hbdq25hjsg] { background: linear-gradient(180deg, var(--c-mountain-1) 0%, var(--c-mountain-2) 100%); box-shadow: 0 3px 0 #5e35b1; }
.gl-goal__prize--space[b-hbdq25hjsg]    { background: linear-gradient(180deg, var(--c-space-1) 0%, var(--c-space-2) 100%);       box-shadow: 0 3px 0 #283593; }

/* One by one (Sequential): a card after the next one waits, greyed, with a padlock instead of ▶. */
.gl-card.is-locked[b-hbdq25hjsg] {
    filter: grayscale(0.75);
    opacity: 0.78;
}

.gl-card.is-locked:active[b-hbdq25hjsg] {
    transform: none;
    box-shadow: 0 6px 0 #e6c597, 0 12px 24px rgba(61, 42, 28, 0.22);
}

.gl-card__play--locked[b-hbdq25hjsg] {
    padding: 0;
    background: linear-gradient(180deg, #e9dfd0 0%, #cbb9a2 100%);
    box-shadow: 0 4px 0 #a8927a;
    font-size: 24px;
    line-height: 1;
}

/* Long lists (the mountain has 7 games): the ticks shrink to fit, the prize keeps its size. */
.gl-goal__ticks[b-hbdq25hjsg] {
    flex: 0 1 auto;
    min-width: 0;
}

.gl-goal__tick[b-hbdq25hjsg] {
    flex: 0 1 34px;
    min-width: 22px;
    height: auto;
    aspect-ratio: 1;
}

.gl-goal__prize[b-hbdq25hjsg],
.gl-goal__arrow[b-hbdq25hjsg] {
    flex: none;
}
/* /Games/Components/GameResults.razor.rz.scp.css */
/* End-of-game bottom sheet. Between the HUD (z 20) and the reward tokens (z 30), and the dim starts below the
   HUD band, so the "+N" token can be seen flying into the XP bar. */
.gr[b-2tqpe88joa] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-hud) + 5);
    overflow: hidden;
    pointer-events: none;
}

.gr--games[b-2tqpe88joa]   { --c1: var(--c-forest-1);  --c2: var(--c-forest-2); }
.gr--letters[b-2tqpe88joa] { --c1: var(--c-city-1);    --c2: var(--c-city-2); }
.gr--beach[b-2tqpe88joa]    { --c1: var(--c-beach-1);    --c2: var(--c-beach-2); }
.gr--mountain[b-2tqpe88joa] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); }

.gr__backdrop[b-2tqpe88joa] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(var(--safe-top) + var(--hud-top-h));
    background: rgba(52, 30, 12, 0.45);
    pointer-events: auto;
    animation: gr-fade-b-2tqpe88joa 0.25s ease-out both;
}

.gr__sheet[b-2tqpe88joa] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 520px;
    max-height: calc(100% - var(--safe-top) - var(--hud-top-h) - 8px);
    margin: 0 auto;
    padding: 62px 18px calc(18px + var(--safe-bottom));
    border-radius: 34px 34px 0 0;
    background:
        radial-gradient(rgba(244, 144, 12, 0.08) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fffdf7 0%, #fff1da 100%);
    border: 4px solid #ffffff;
    border-bottom: 0;
    box-shadow: 0 -10px 30px rgba(52, 30, 12, 0.3);
    text-align: center;
    pointer-events: auto;
    animation: gr-up-b-2tqpe88joa 0.5s cubic-bezier(0.3, 1.25, 0.55, 1) both;
}

.gr__sheet[b-2tqpe88joa]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, var(--c1) 0%, transparent 100%);
    opacity: 0.32;
    pointer-events: none;
}

/* ---------- Stars, half above the sheet ---------- */
.gr__stars[b-2tqpe88joa] {
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    transform: translate(-50%, -48%);
}

.gr__star[b-2tqpe88joa] {
    display: grid;
    width: 78px;
    height: 78px;
    filter: drop-shadow(0 5px 6px rgba(61, 42, 28, 0.3));
    animation: gr-star-in-b-2tqpe88joa 0.55s var(--ease-pop) var(--d) both;
}

.gr__star--1[b-2tqpe88joa] {
    width: 96px;
    height: 96px;
    margin-bottom: 12px;
}

.gr__star svg[b-2tqpe88joa] {
    width: 100%;
    height: 100%;
    fill: #f1dcc0;
    stroke: #ffffff;
    stroke-width: 2.2px;
}

.gr__star.is-on svg[b-2tqpe88joa] {
    fill: var(--c-gold);
    stroke: #ffffff;
}

.gr__star.is-on[b-2tqpe88joa] {
    filter: drop-shadow(0 4px 0 var(--c-gold-dark)) drop-shadow(0 8px 10px rgba(242, 159, 5, 0.4));
}

.gr__ribbon[b-2tqpe88joa] {
    position: relative;
    display: inline-block;
    margin: 0 0 6px;
    padding: 4px 12px 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ff74a0 0%, #ff3d7a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #c2185b, 0 6px 12px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(150, 10, 60, 0.45);
    transform: rotate(-3deg);
    animation: gr-ribbon-b-2tqpe88joa 0.55s var(--ease-pop) 0.7s both;
}

/* ---------- Text ---------- */
.gr__title[b-2tqpe88joa] {
    position: relative;
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--c-text);
}

.gr__score[b-2tqpe88joa] {
    position: relative;
    margin: 6px 0 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--c-text-soft);
}

.gr__tick[b-2tqpe88joa] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    color: #ffffff;
    font-size: 16px;
    vertical-align: 2px;
}

.gr__chips[b-2tqpe88joa] {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.gr__chip[b-2tqpe88joa] {
    padding: 6px 14px;
    border-radius: 999px;
    border: 3px solid #ffffff;
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    animation: gr-star-in-b-2tqpe88joa 0.5s var(--ease-pop) 0.75s both;
}

.gr__chip--xp[b-2tqpe88joa] {
    background: linear-gradient(180deg, var(--c-xp) 0%, var(--c-xp-dark) 100%);
    text-shadow: 0 2px 0 rgba(10, 80, 130, 0.5);
}

.gr__chip--star[b-2tqpe88joa] {
    background: linear-gradient(180deg, #ffe082 0%, var(--c-gold-dark) 100%);
    text-shadow: 0 2px 0 rgba(150, 90, 0, 0.5);
}

.gr__friend[b-2tqpe88joa] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0;
    padding: 7px 16px 7px 10px;
    border-radius: 999px;
    background: #ffe4c2;
    color: #8a4710;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.gr__friend-emoji[b-2tqpe88joa] {
    font-size: 24px;
    line-height: 1;
}

/* ---------- Buttons ---------- */
.gr__actions[b-2tqpe88joa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    margin: 14px auto 0;
}

.gr__row[b-2tqpe88joa] {
    display: flex;
    gap: 8px;
}

.gr__row[b-2tqpe88joa]  .candy {
    flex: 1 1 0;
    min-width: 0;
}

@keyframes gr-up-b-2tqpe88joa {
    from { transform: translateY(calc(100% + 110px)); }
    to { transform: translateY(0); }
}

@keyframes gr-fade-b-2tqpe88joa {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gr-star-in-b-2tqpe88joa {
    0% { transform: scale(0.2) rotate(-30deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes gr-ribbon-b-2tqpe88joa {
    0% { transform: scale(0) rotate(-20deg); }
    100% { transform: scale(1) rotate(-3deg); }
}

@media (orientation: landscape) and (max-height: 560px) {
    .gr__sheet[b-2tqpe88joa] {
        padding-top: 50px;
        max-width: 600px;
    }

    .gr__star[b-2tqpe88joa] { width: 58px; height: 58px; }
    .gr__star--1[b-2tqpe88joa] { width: 70px; height: 70px; margin-bottom: 8px; }
    .gr__title[b-2tqpe88joa] { font-size: 26px; }
    .gr__friend[b-2tqpe88joa] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gr__sheet[b-2tqpe88joa] { animation: gr-fade-b-2tqpe88joa 0.2s ease-out both; }
    .gr__star[b-2tqpe88joa], .gr__chip[b-2tqpe88joa], .gr__ribbon[b-2tqpe88joa] { animation: none; }
}

/* The one primary action carries the bouncing CTA arrow from the first frame. */
.gr__main[b-2tqpe88joa] {
    position: relative;
    padding-top: 46px;
}

.gr__cta[b-2tqpe88joa] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 42px;
    height: 46px;
    margin-left: -21px;
    pointer-events: none;
}

@media (orientation: landscape) and (max-height: 560px) {
    .gr__main[b-2tqpe88joa] { padding-top: 40px; }
    .gr__cta[b-2tqpe88joa] { width: 36px; height: 40px; margin-left: -18px; }
}
/* /Games/Components/GameScreen.razor.rz.scp.css */
/* Mini-game screen: HUD band (TopBar) / header / play panel / friend strip, phone portrait first.
   Everything sits inside #app (fixed, 100dvh); nothing scrolls the page. */
.gs[b-rmxq985f17] {
    --head-h: 64px;
    --buddy-h: 66px;
    --gap: 8px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding:
        calc(var(--safe-top) + var(--hud-top-h)) calc(var(--safe-right) + 10px)
        calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 10px);
    gap: var(--gap);
}

.gs--games[b-rmxq985f17]   { --c1: var(--c-forest-1);  --c2: var(--c-forest-2);  --c3: #2c7a31; --ct: #2e7d32; }
.gs--letters[b-rmxq985f17] { --c1: var(--c-city-1);    --c2: var(--c-city-2); --c3: #c23a0d; --ct: #d84315; }
.gs--beach[b-rmxq985f17]    { --c1: var(--c-beach-1);    --c2: var(--c-beach-2);    --c3: #1565c0; --ct: #1565c0; }
.gs--mountain[b-rmxq985f17] { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5e35b1; --ct: #5e35b1; }

/* ---------- Header ---------- */
.gs__head[b-rmxq985f17] {
    position: relative;
    z-index: var(--z-stage);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--head-h);
}

.gs__back[b-rmxq985f17],
.gs__mute[b-rmxq985f17] {
    flex: none;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 50%;
    border: 4px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
}

.gs__back[b-rmxq985f17] {
    width: 54px;
    height: 54px;
    padding: 10px 12px 10px 8px;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.25);
}

.gs__mute[b-rmxq985f17] {
    width: 54px;
    height: 54px;
    padding: 11px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: 0 4px 0 var(--c3), 0 8px 14px rgba(61, 42, 28, 0.22);
}

.gs__mute.is-muted[b-rmxq985f17] {
    background: linear-gradient(180deg, #cfc2b4 0%, #a8988a 100%);
    box-shadow: 0 4px 0 #7f6f62, 0 8px 14px rgba(61, 42, 28, 0.22);
}

.gs__back:active[b-rmxq985f17],
.gs__mute:active[b-rmxq985f17] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

.gs__plate[b-rmxq985f17] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 60px;
    padding: 0 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 18px rgba(61, 42, 28, 0.2);
}

.gs__row[b-rmxq985f17] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}

.gs__icon[b-rmxq985f17] {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    font-size: 19px;
    line-height: 1;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.gs__icon-art[b-rmxq985f17] {
    display: grid;
    width: 88%;
    height: 88%;
}

/* Shrinks with the screen; the longest titles („Пронађи разлике“, „Шта иде заједно“) still fit at 360 px. */
.gs__title[b-rmxq985f17] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: clamp(15px, 4.6vw, 22px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--ct);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Play panel ---------- */
.gs__panel[b-rmxq985f17] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-l);
    background:
        radial-gradient(rgba(244, 144, 12, 0.07) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, rgba(255, 253, 247, 0.95) 0%, rgba(255, 241, 218, 0.95) 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 14px 30px rgba(61, 42, 28, 0.25);
    overflow: hidden;
}

/* ---------- Demo hand (how to play, no reading) ---------- */
.gs__demo[b-rmxq985f17] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 5;
    width: 0;
    height: 0;
    pointer-events: none;
}

.gs__demo-hand[b-rmxq985f17] {
    position: absolute;
    left: -10px;
    top: -4px;
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

.gs__demo-ring[b-rmxq985f17] {
    position: absolute;
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: rgba(255, 201, 60, 0.45);
    opacity: 0;
}

.gs__demo--tap .gs__demo-hand[b-rmxq985f17] { animation: gs-demo-tap-b-rmxq985f17 1.4s ease-in-out 0.6s infinite both; }
.gs__demo--tap .gs__demo-ring[b-rmxq985f17] { animation: gs-demo-ring-b-rmxq985f17 1.4s ease-out 0.6s infinite both; }

.gs__demo--trace[b-rmxq985f17] {
    animation: gs-demo-trace-b-rmxq985f17 2.2s ease-in-out 0.6s infinite both;
}

@keyframes gs-demo-tap-b-rmxq985f17 {
    0%, 100% { transform: translate(10px, 26px) scale(1); }
    40% { transform: translate(0, 0) scale(0.92); }
    55% { transform: translate(0, 0) scale(0.92); }
}

@keyframes gs-demo-ring-b-rmxq985f17 {
    0%, 35% { transform: scale(0.3); opacity: 0; }
    45% { transform: scale(0.6); opacity: 1; }
    80%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes gs-demo-trace-b-rmxq985f17 {
    0% { left: var(--x); opacity: 0; }
    12% { left: var(--x); opacity: 1; }
    80% { left: var(--x2); opacity: 1; }
    100% { left: var(--x2); opacity: 0; }
}

/* ---------- Friend strip ---------- */
.gs__buddy[b-rmxq985f17] {
    position: relative;
    z-index: var(--z-bubble);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--buddy-h);
    pointer-events: none;
}

.gs__friend[b-rmxq985f17] {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fffdf7 0%, #ffe8b6 70%, #ffd38a 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 14px rgba(61, 42, 28, 0.25);
    font-size: 34px;
    line-height: 1;
    overflow: hidden;
}

.gs__friend.bump-a[b-rmxq985f17] { animation: gs-hop-a-b-rmxq985f17 0.5s var(--ease-pop); }
.gs__friend.bump-b[b-rmxq985f17] { animation: gs-hop-b-b-rmxq985f17 0.5s var(--ease-pop); }

.gs__bubble[b-rmxq985f17] {
    position: relative;
    min-width: 0;
    max-width: calc(100% - 70px);
    margin: 0;
    padding: 7px 14px 8px;
    border-radius: 18px;
    background: var(--c-surface);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 16px rgba(61, 42, 28, 0.2);
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    animation: gs-say-b-rmxq985f17 0.4s var(--ease-pop) both;
}

.gs__bubble[b-rmxq985f17]::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: var(--c-surface);
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    border-radius: 0 0 0 5px;
    transform: rotate(45deg);
}

.gs__name[b-rmxq985f17] {
    font-size: 12.5px;
    font-weight: 900;
    color: var(--c-fox-dark);
    letter-spacing: 0.3px;
}

.gs__say[b-rmxq985f17] {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gs__bubble--ok .gs__say[b-rmxq985f17] { color: #2e7d32; }

/* ---------- Feedback flash ---------- */
.gs__flash[b-rmxq985f17] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-hud) + 6);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.gs__flash-disc[b-rmxq985f17] {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    padding: 22px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    color: #ffffff;
    animation: gs-flash-b-rmxq985f17 0.75s var(--ease-pop) both;
}

.gs__flash-disc svg[b-rmxq985f17] {
    width: 100%;
    height: 100%;
}

.gs__flash--ok .gs__flash-disc[b-rmxq985f17] {
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 6px 0 #2c7a31, 0 14px 30px rgba(46, 125, 50, 0.4);
}

.gs__flash--no .gs__flash-disc[b-rmxq985f17] {
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 6px 0 #c96a05, 0 14px 30px rgba(201, 106, 5, 0.35);
}

@keyframes gs-flash-b-rmxq985f17 {
    0% { transform: scale(0.3); opacity: 0; }
    30% { transform: scale(1.08); opacity: 1; }
    70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0; }
}

@keyframes gs-say-b-rmxq985f17 {
    from { transform: scale(0.6) translateX(-20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes gs-hop-a-b-rmxq985f17 {
    0%, 100% { transform: none; }
    40% { transform: translateY(-10px) rotate(-8deg); }
}

@keyframes gs-hop-b-b-rmxq985f17 {
    0%, 100% { transform: none; }
    40% { transform: translateY(-10px) rotate(8deg); }
}

/* ==========================================================================
   Shared game pieces for the screens' own content (rendered by the game components, hence ::deep).
   ========================================================================== */

/* Info pill: timer, counters. */
.gs__panel[b-rmxq985f17]  .g-pill {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 0 #f1dcc0;
    font-size: 18px;
    font-weight: 900;
    color: var(--c-text);
}

.gs__panel[b-rmxq985f17]  .g-pill__warn {
    color: #e65100;
    animation: gs-tick-b-rmxq985f17 1s ease-in-out infinite;
}

.gs__panel[b-rmxq985f17]  .g-prompt {
    flex: none;
    margin: 0;
    padding: 8px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 var(--c3);
    color: #ffffff;
    font-size: clamp(18px, 5.4vw, 24px);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 0 var(--c3);
    text-wrap: balance;
}

/* Big tap tile (Categorise). Size comes from the grid (--tile). */
.gs__panel[b-rmxq985f17]  .g-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tile, 96px);
    height: var(--tile, 96px);
    margin: 0;
    padding: 0;
    border-radius: 26%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease;
    animation: gs-deal-b-rmxq985f17 0.45s var(--ease-pop) calc(var(--i, 0) * 50ms) both;
}

.gs__panel[b-rmxq985f17]  .g-tile:active:not(:disabled) {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #e6c597, 0 4px 8px rgba(61, 42, 28, 0.18);
    transition-duration: 0.07s;
}

.gs__panel[b-rmxq985f17]  .g-tile:disabled {
    cursor: default;
}

.gs__panel[b-rmxq985f17]  .g-tile.is-picked {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: gs-pop-b-rmxq985f17 0.45s var(--ease-pop) both;
}

.gs__panel[b-rmxq985f17]  .g-tile.is-wrong {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: gs-shake-b-rmxq985f17 0.5s ease both;
}

.gs__panel[b-rmxq985f17]  .g-check {
    position: absolute;
    right: -8px;
    top: -8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    color: #ffffff;
    box-shadow: 0 2px 0 #2c7a31;
    animation: gs-pop-b-rmxq985f17 0.4s var(--ease-pop) both;
}

.gs__panel[b-rmxq985f17]  .g-check svg {
    width: 100%;
    height: 100%;
}

@keyframes gs-tick-b-rmxq985f17 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes gs-deal-b-rmxq985f17 {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes gs-pop-b-rmxq985f17 {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes gs-shake-b-rmxq985f17 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Phone landscape: short screen → tighter header and strip. */
@media (orientation: landscape) and (max-height: 560px) {
    .gs[b-rmxq985f17] {
        --head-h: 52px;
        --buddy-h: 0px;
        padding-right: calc(var(--safe-right) + 10px);
    }

    .gs__buddy[b-rmxq985f17] {
        position: absolute;
        left: calc(var(--safe-left) + 8px);
        bottom: calc(var(--safe-bottom) + 6px);
        height: 60px;
    }

    .gs__back[b-rmxq985f17],
    .gs__mute[b-rmxq985f17] { width: 48px; height: 48px; }
    .gs__plate[b-rmxq985f17] { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs__flash-disc[b-rmxq985f17],
    .gs__bubble[b-rmxq985f17],
    .gs__friend[b-rmxq985f17],
    .gs__panel[b-rmxq985f17]  .g-tile {
        animation: none !important;
    }
}
/* /Games/Components/ProgressDots.razor.rz.scp.css */
.dots[b-j80krentt3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.dots__dot[b-j80krentt3] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f1dcc0;
    box-shadow: inset 0 1px 2px rgba(61, 42, 28, 0.2);
    transition: background 0.3s ease, transform 0.4s var(--ease-pop);
}

.dots__dot.is-done[b-j80krentt3] {
    background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--c-gold) 45%, var(--c-gold-dark) 100%);
    box-shadow: 0 1px 0 #c27c00;
}

.dots__dot.is-current[b-j80krentt3] {
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--c-fox), inset 0 1px 2px rgba(61, 42, 28, 0.15);
    animation: dots-pulse-b-j80krentt3 1.4s ease-in-out infinite;
}

.dots--light .dots__dot[b-j80krentt3] {
    background: rgba(255, 255, 255, 0.45);
}

@keyframes dots-pulse-b-j80krentt3 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .dots__dot.is-current[b-j80krentt3] {
        animation: none;
    }
}
/* /Games/Components/RunProgress.razor.rz.scp.css */
/* The whole run on one slim bar (fits 360 px whatever the number of steps). */
.rp[b-f40xcmolnt] {
    position: relative;
    flex: none;
    align-self: center;
    width: min(calc(100% - 28px), 300px);
    height: 14px;
    margin-right: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 2px 3px rgba(61, 42, 28, 0.18);
}

.rp__fill[b-f40xcmolnt] {
    display: block;
    height: 100%;
    min-width: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8bd36a 0%, #43a047 100%);
    transition: width 0.5s var(--ease-out);
}

.rp__end[b-f40xcmolnt] {
    position: absolute;
    right: -20px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #e6c597;
    color: #c9a77a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.rp__end.is-on[b-f40xcmolnt] {
    background: #43a047;
    border-color: #ffffff;
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .rp__fill[b-f40xcmolnt] {
        transition: none;
    }
}
/* /Games/LetterFun/Chef/ChefGame.razor.rz.scp.css */
/* „Кувар“: the pot on top (SVG, contain), the shelf of foods under it. --steam (0–1) is how full the dish is. */
.ch-stage[b-97hggzyi7z] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ch-kitchen[b-97hggzyi7z] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.ch-pot[b-97hggzyi7z] {
    position: relative;
    height: min(100cqh, 260px, calc(100cqw * 180 / 200));
    aspect-ratio: 200 / 180;
}

.ch-pot__svg[b-97hggzyi7z] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The target the foods fly into: an unseen box over the pot's mouth. */
.ch-mouth[b-97hggzyi7z] {
    position: absolute;
    left: 30%;
    top: 24%;
    width: 40%;
    height: 24%;
    pointer-events: none;
}

.ch-pot__body[b-97hggzyi7z] {
    fill: #37474f;
}

.ch-pot__shine[b-97hggzyi7z] {
    stroke: #607d8b;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.8;
}

.ch-pot__handle[b-97hggzyi7z] {
    fill: none;
    stroke: #263238;
    stroke-width: 9;
    stroke-linecap: round;
}

.ch-pot__mouth[b-97hggzyi7z] {
    fill: #ffb74d;
}

.ch-stage.is-done .ch-pot__mouth[b-97hggzyi7z] {
    fill: #ff8a65;
}

.ch-pot__rim[b-97hggzyi7z] {
    fill: none;
    stroke: #546e7a;
    stroke-width: 7;
}

.ch-pot__letter[b-97hggzyi7z] {
    font-family: inherit;
    font-size: 72px;
    font-weight: 900;
    fill: #ffffff;
    paint-order: stroke;
    stroke: #263238;
    stroke-width: 6;
    stroke-linejoin: round;
}

/* A gathered food peeks over the rim (it lands with a little hop). */
.ch-pot__food[b-97hggzyi7z] {
    animation: ch-hop-b-97hggzyi7z 0.5s var(--ease-pop) both;
}

/* The steam thickens as the dish fills, and billows once it is done. */
.ch-steam path[b-97hggzyi7z] {
    fill: none;
    stroke: #ffffff;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: calc(0.15 + var(--steam, 0) * 0.7);
    transform-origin: 100px 60px;
    animation: ch-steam-b-97hggzyi7z 2.4s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

.ch-steam path:nth-child(2)[b-97hggzyi7z] { animation-delay: -0.8s; }
.ch-steam path:nth-child(3)[b-97hggzyi7z] { animation-delay: -1.6s; }

.ch-stage.is-done .ch-steam path[b-97hggzyi7z] {
    opacity: 0.95;
    stroke-width: 9;
}

/* The lid: off to the side while the child cooks, down on the pot when the dish is done. */
.ch-lid ellipse[b-97hggzyi7z],
.ch-lid rect[b-97hggzyi7z] {
    fill: #78909c;
    stroke: #ffffff;
    stroke-width: 3;
}

.ch-lid[b-97hggzyi7z] {
    transform: translate(92px, -62px) rotate(24deg);
    transform-origin: 100px 64px;
    transition: transform 0.6s var(--ease-pop);
}

.ch-stage.is-done .ch-lid[b-97hggzyi7z] {
    transform: none;
}

/* ---------- The shelf ---------- */
.ch-bottom[b-97hggzyi7z] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.ch-shelf[b-97hggzyi7z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: calc(4 * 70px + 3 * 10px + 24px);
    padding: 10px 12px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #d9a066 0%, #c48a4a 100%);
    box-shadow: inset 0 3px 0 #e8b77c, 0 5px 0 #8d5524, 0 9px 16px rgba(61, 42, 28, 0.2);
}

.ch-food[b-97hggzyi7z] {
    position: relative;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    border-radius: 20px;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 4px 0 #a1662f;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s var(--ease-pop), box-shadow 0.2s ease;
    animation: ch-deal-b-97hggzyi7z 0.45s var(--ease-pop) calc(var(--i, 0) * 55ms) both;
}

.ch-food img[b-97hggzyi7z] {
    width: 78%;
    height: 78%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.ch-food:active:not(:disabled)[b-97hggzyi7z] {
    transform: translateY(3px) scale(0.95);
    box-shadow: 0 1px 0 #a1662f;
}

.ch-food.is-wrong[b-97hggzyi7z] {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    animation: ch-wobble-b-97hggzyi7z 0.5s ease both;
}

/* In the pot (or on the way): a dashed empty spot stays on the shelf. */
.ch-food.is-gone[b-97hggzyi7z] {
    border: 3px dashed #e8b77c;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: none;
    cursor: default;
    animation: none;
}

.ch-food.is-gone img[b-97hggzyi7z] {
    opacity: 0;
}

.ch-hand[b-97hggzyi7z] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 52px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: ch-tap-b-97hggzyi7z 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- Done: the way on ---------- */
.ch-next[b-97hggzyi7z] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 12px;
    animation: ch-in-b-97hggzyi7z 0.4s var(--ease-pop) both;
}

.ch-next__cta[b-97hggzyi7z] {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes ch-steam-b-97hggzyi7z {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-8px) scaleX(1.08); }
}

@keyframes ch-hop-b-97hggzyi7z {
    0% { transform: translateY(16px) scale(0.6); opacity: 0; }
    60% { transform: translateY(-6px) scale(1.08); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes ch-deal-b-97hggzyi7z {
    from { transform: translateY(14px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ch-wobble-b-97hggzyi7z {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-7deg) translateX(-4px); }
    40% { transform: rotate(6deg) translateX(4px); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(3deg); }
}

@keyframes ch-tap-b-97hggzyi7z {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@keyframes ch-in-b-97hggzyi7z {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (max-height: 640px) {
    .ch-food[b-97hggzyi7z] { width: 62px; height: 62px; }
    .ch-shelf[b-97hggzyi7z] { max-width: calc(4 * 62px + 3 * 10px + 24px); }
    .ch-bottom[b-97hggzyi7z] { min-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-food[b-97hggzyi7z],
    .ch-food.is-wrong[b-97hggzyi7z],
    .ch-pot__food[b-97hggzyi7z],
    .ch-steam path[b-97hggzyi7z],
    .ch-next[b-97hggzyi7z] {
        animation: none;
    }

    .ch-lid[b-97hggzyi7z] { transition: none; }
    .ch-hand[b-97hggzyi7z] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/LetterFun/Cross/CrosswordGame.razor.rz.scp.css */
/* „Укрштеница“: the answer slot, the grid (picture clue column + up to five letter columns), the letter strip. */
.cw-stage[b-f1shv4kisj] {
    --gap: 4px;
    --cell: min(56px, calc((100cqw - 52px - var(--cols) * var(--gap)) / var(--cols)));
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cw-top[b-f1shv4kisj] {
    flex: none;
    display: grid;
    place-items: center;
}

.cw-answer[b-f1shv4kisj] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px dashed #e0b56a;
    background: #fffaf0;
}

.cw-answer.is-open[b-f1shv4kisj] {
    border: 4px solid #ffffff;
    background: #fff4d6;
    box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.55), 0 0 22px rgba(255, 201, 60, 0.8);
    animation: cw-pop-b-f1shv4kisj 0.6s var(--ease-pop);
}

.cw-answer img[b-f1shv4kisj] {
    width: 46px;
    height: 46px;
}

.cw-grid[b-f1shv4kisj] {
    flex: none;
    display: grid;
    grid-template-columns: 48px repeat(var(--cols), var(--cell));
    grid-auto-rows: var(--cell);
    gap: var(--gap);
    align-items: center;
}

.cw-clue[b-f1shv4kisj] {
    width: 44px;
    height: 44px;
    justify-self: center;
}

.cw-clue.is-solved[b-f1shv4kisj] {
    animation: cw-nod-b-f1shv4kisj 0.7s ease-in-out;
}

.cw-cell[b-f1shv4kisj] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 3px solid #f2c46b;
    background: #ffffff;
    box-shadow: 0 2px 0 #e6c597;
    font-family: inherit;
    font-size: calc(var(--cell) * 0.62);
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    cursor: pointer;
    touch-action: manipulation;
}

/* The solution column, as in the workbook: a warm band down the grid. */
.cw-cell.is-key[b-f1shv4kisj] {
    background: #ffe9a8;
    border-color: #f2b33d;
}

.cw-cell.is-filled[b-f1shv4kisj] {
    cursor: default;
    animation: cw-pop-b-f1shv4kisj 0.4s var(--ease-pop);
}

.cw-cell.is-active[b-f1shv4kisj] {
    border-color: #ff8f00;
    box-shadow: 0 2px 0 #e6c597, 0 0 0 4px rgba(255, 143, 0, 0.45);
}

.cw-stage.is-done .cw-cell.is-key[b-f1shv4kisj] {
    background: #ffd54f;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px #ffb300, 0 0 16px rgba(255, 193, 7, 0.9);
    animation: cw-glow-b-f1shv4kisj 1.6s ease-in-out infinite;
}

.cw-cta[b-f1shv4kisj] {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    width: 26px;
    height: 32px;
    margin-left: -13px;
    pointer-events: none;
    z-index: 1;
}

/* The needed letters and a few others (Crosswords.Strip): at most two rows of five, never scrolling. */
.cw-strip[b-f1shv4kisj] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: calc(5 * 56px + 4 * 6px);
    padding: 4px 0 6px;
}

.cw-tile[b-f1shv4kisj] {
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #8fd3ff 0%, #42a5f5 100%);
    box-shadow: 0 4px 0 #1e6fbf;
    font-family: inherit;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 2px 0 #1e6fbf;
    cursor: pointer;
    touch-action: manipulation;
}

.cw-tile:active[b-f1shv4kisj] {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #1e6fbf;
}

.cw-tile.is-shake[b-f1shv4kisj] {
    animation: cw-shake-b-f1shv4kisj 0.45s ease-in-out;
}

.cw-next[b-f1shv4kisj] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 30px;
    margin-bottom: 6px;
    animation: cw-in-b-f1shv4kisj 0.4s var(--ease-pop) both;
}

.cw-next__cta[b-f1shv4kisj] {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

/* The demo hand: taps the active box, then slides down to its letter and taps it. */
.cw-demo[b-f1shv4kisj] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    font-size: 46px;
    line-height: 1;
    pointer-events: none;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    animation: cw-demo-b-f1shv4kisj 3.2s ease-in-out infinite;
}

@keyframes cw-demo-b-f1shv4kisj {
    0% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) + 4px)); opacity: 0; }
    10% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) + 4px)); opacity: 1; }
    20% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) - 2px)) scale(0.88); }
    30% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) + 4px)); }
    60% { transform: translate(calc(var(--x2) - 14px), calc(var(--y2) + 4px)); }
    70% { transform: translate(calc(var(--x2) - 14px), calc(var(--y2) - 2px)) scale(0.88); }
    85% { transform: translate(calc(var(--x2) - 14px), calc(var(--y2) + 4px)); opacity: 1; }
    100% { transform: translate(calc(var(--x2) - 14px), calc(var(--y2) + 4px)); opacity: 0; }
}

@keyframes cw-pop-b-f1shv4kisj {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes cw-nod-b-f1shv4kisj {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg) translateY(-3px); }
    50% { transform: rotate(9deg); }
    75% { transform: rotate(-5deg); }
}

@keyframes cw-shake-b-f1shv4kisj {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
}

@keyframes cw-glow-b-f1shv4kisj {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

@keyframes cw-in-b-f1shv4kisj {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cw-answer.is-open[b-f1shv4kisj],
    .cw-clue.is-solved[b-f1shv4kisj],
    .cw-cell.is-filled[b-f1shv4kisj],
    .cw-tile.is-shake[b-f1shv4kisj],
    .cw-next[b-f1shv4kisj],
    .cw-stage.is-done .cw-cell.is-key[b-f1shv4kisj] {
        animation: none;
    }

    .cw-demo[b-f1shv4kisj] {
        animation-duration: 6s;
    }
}
/* /Games/LetterFun/Fill/FillWordsGame.razor.rz.scp.css */
/* „Допиши“: the staircase grid centred in the panel; the pad opens over it. */
.fw-stage[b-dxy6mws8tr] {
    --cell: min(70px, calc((100cqw - (var(--n) - 1) * 6px) / var(--n)));
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.fw-grid[b-dxy6mws8tr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 26px;
}

.fw-stage.is-done .fw-grid[b-dxy6mws8tr] {
    animation: fw-hop-b-dxy6mws8tr 0.9s var(--ease-pop);
}

.fw-row[b-dxy6mws8tr] {
    display: flex;
    gap: 6px;
}

.fw-cell[b-dxy6mws8tr] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--cell);
    height: var(--cell);
    margin: 0;
    padding: 0;
    border-radius: 14px;
    font-family: inherit;
    font-size: calc(var(--cell) * 0.66);
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    background: #ffffff;
    border: 3px solid #f2c46b;
    box-shadow: 0 3px 0 #e6c597;
}

.fw-cell.is-written[b-dxy6mws8tr] {
    color: #2e7d32;
    background: #f1fbe9;
    border-color: #8ee070;
    animation: fw-pop-b-dxy6mws8tr 0.45s var(--ease-pop);
}

.fw-cell.is-empty[b-dxy6mws8tr] {
    cursor: pointer;
    background: #fffaf0;
    border-style: dashed;
    border-color: #e0b56a;
    touch-action: manipulation;
}

.fw-cell.is-empty:active[b-dxy6mws8tr] {
    transform: translateY(2px) scale(0.95);
}

.fw-cell.is-next[b-dxy6mws8tr] {
    border-style: solid;
    border-color: #ffb000;
    background: #fff4d6;
    box-shadow: 0 3px 0 #e6c597, 0 0 0 4px rgba(255, 201, 60, 0.45);
}

.fw-stage.is-done .fw-cell[b-dxy6mws8tr] {
    border-color: #8ee070;
}

.fw-cta[b-dxy6mws8tr] {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 4px);
    width: 30px;
    height: 36px;
    margin-left: -15px;
    pointer-events: none;
}

.fw-next[b-dxy6mws8tr] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 30px;
    animation: fw-in-b-dxy6mws8tr 0.4s var(--ease-pop) both;
}

.fw-next__cta[b-dxy6mws8tr] {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

/* ---------- The open box: a trace pad over the grid ---------- */
.fw-write[b-dxy6mws8tr] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255, 249, 238, 0.97);
    border-radius: 18px;
    animation: fw-in-b-dxy6mws8tr 0.25s ease-out both;
}

.fw-write__top[b-dxy6mws8tr] {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fw-back[b-dxy6mws8tr] {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 10px 12px 10px 8px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 4px 0 #c96a05, 0 6px 12px rgba(61, 42, 28, 0.22);
}

.fw-back:active[b-dxy6mws8tr] {
    transform: translateY(3px) scale(0.92);
}

.fw-write__row[b-dxy6mws8tr] {
    display: flex;
    gap: 5px;
}

.fw-mini[b-dxy6mws8tr] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    border: 2px solid #f2c46b;
    font-size: 28px;
    font-weight: 900;
    color: #4e342e;
}

.fw-mini.is-now[b-dxy6mws8tr] {
    border: 3px solid #ffb000;
    background: #fff4d6;
    box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.45);
}

.fw-write__pad[b-dxy6mws8tr] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    container-type: size;
    display: grid;
    place-items: center;
}

.fw-write__pad[b-dxy6mws8tr] >  .lp-pad {
    width: min(100cqw, 100cqh);
}

@keyframes fw-hop-b-dxy6mws8tr {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-12px) scale(1.03); }
    70% { transform: translateY(2px); }
}

@keyframes fw-pop-b-dxy6mws8tr {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes fw-in-b-dxy6mws8tr {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fw-stage.is-done .fw-grid[b-dxy6mws8tr],
    .fw-cell.is-written[b-dxy6mws8tr],
    .fw-next[b-dxy6mws8tr],
    .fw-write[b-dxy6mws8tr] {
        animation: none;
    }
}
/* /Games/LetterFun/Fill/LetterPad.razor.rz.scp.css */
/* The square trace pad (400×400 guide units), same look as „Пиши слово“. Size it with the wrapper. */
.lp-pad[b-firqjbs8rt] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.lp-pad.is-ok[b-firqjbs8rt] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.lp-pad.is-low[b-firqjbs8rt] {
    box-shadow: 0 5px 0 #f0a46b, 0 0 0 4px rgba(244, 144, 12, 0.4), 0 10px 20px rgba(230, 81, 0, 0.2);
    animation: lp-wiggle-b-firqjbs8rt 0.45s ease-in-out;
}

.lp-svg[b-firqjbs8rt] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

.lp-rule[b-firqjbs8rt] {
    stroke: #cfe3f3;
    stroke-width: 3;
    stroke-linecap: round;
}

.lp-body path[b-firqjbs8rt] {
    fill: none;
    stroke: #ffe8b6;
    stroke-width: 46;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-body.is-faint path[b-firqjbs8rt] {
    stroke: #fff2d6;
}

.lp-dots[b-firqjbs8rt] {
    fill: none;
    stroke: #d9c7ad;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 16;
}

.lp-dots.is-now[b-firqjbs8rt] {
    stroke: var(--c);
    stroke-width: 10;
}

/* Least guide: the stroke to write now is only a faint dotted trail. */
.lp-pad.is-dots .lp-dots.is-now[b-firqjbs8rt] {
    opacity: 0.5;
    stroke-width: 8;
}

.lp-locked[b-firqjbs8rt] {
    fill: none;
    stroke: var(--c);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-done[b-firqjbs8rt] {
    transform-box: view-box;
    transform-origin: 50% 52%;
}

.lp-done.is-cheer[b-firqjbs8rt] {
    animation: lp-bounce-b-firqjbs8rt 0.7s var(--ease-pop) both;
}

.lp-badge[b-firqjbs8rt] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 3.5;
}

.lp-pip[b-firqjbs8rt] {
    fill: #ffffff;
}

.lp-start[b-firqjbs8rt] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 4.5;
}

.lp-start__ring[b-firqjbs8rt] {
    fill: none;
    stroke: #43a047;
    stroke-width: 3.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-ping-b-firqjbs8rt 1.6s ease-out infinite;
    pointer-events: none;
}

.lp-arrow path[b-firqjbs8rt] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-arrow__under[b-firqjbs8rt] {
    stroke: #ffffff;
    stroke-width: 11;
}

.lp-arrow__head[b-firqjbs8rt] {
    stroke: #2e7d32;
    stroke-width: 6;
}

.lp-ink[b-firqjbs8rt] {
    fill: none;
    stroke: var(--c);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.lp-pad.is-ok .lp-ink[b-firqjbs8rt] {
    stroke: #43a047;
}

.lp-pad.is-low .lp-ink[b-firqjbs8rt] {
    animation: lp-fade-b-firqjbs8rt 0.5s ease-out forwards;
}

.lp-demo[b-firqjbs8rt] {
    pointer-events: none;
}

.lp-demo__hand[b-firqjbs8rt] {
    font-size: 58px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

@keyframes lp-bounce-b-firqjbs8rt {
    0% { transform: scale(1); }
    35% { transform: scale(1.1) translateY(-8px); }
    70% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

@keyframes lp-fade-b-firqjbs8rt {
    to { opacity: 0; }
}

@keyframes lp-wiggle-b-firqjbs8rt {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes lp-ping-b-firqjbs8rt {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-start__ring[b-firqjbs8rt],
    .lp-pad.is-low[b-firqjbs8rt],
    .lp-done.is-cheer[b-firqjbs8rt] {
        animation: none;
    }
}
/* /Games/LetterFun/Fix/FixTheLetterGame.razor.rz.scp.css */
/* „Поправи слово“: the letter's page on top (SVG, contain), the three stroke tiles under it. --c is the board's ink. */
.fx-stage[b-4v2ngpjswn] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fx-page[b-4v2ngpjswn] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.fx-letter[b-4v2ngpjswn] {
    width: min(100cqw, 100cqh, 320px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 18px rgba(61, 42, 28, 0.14);
    transition: box-shadow 0.5s ease;
}

.fx-stage.is-done .fx-letter[b-4v2ngpjswn] {
    box-shadow: 0 4px 0 #e6c597, 0 0 0 4px rgba(255, 201, 60, 0.6), 0 0 26px rgba(255, 201, 60, 0.85);
}

.fx-rule[b-4v2ngpjswn] {
    stroke: #f1e3cc;
    stroke-width: 3;
    stroke-dasharray: 10 10;
}

.fx-strokes path[b-4v2ngpjswn],
.fx-option path[b-4v2ngpjswn] {
    fill: none;
    stroke: var(--c);
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The faint dotted ghost of the gap (the first boards only). */
.fx-ghost[b-4v2ngpjswn] {
    fill: none;
    stroke: #dcd0bf;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 44;
}

/* The found stroke draws itself in (pathLength = 1), in green, then the letter glows. */
.fx-mend[b-4v2ngpjswn] {
    fill: none;
    stroke: #43a047;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fx-draw-b-4v2ngpjswn 0.7s ease-out 0.05s both;
}

/* ---------- The strokes to choose from ---------- */
.fx-bottom[b-4v2ngpjswn] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 104px;
}

.fx-options[b-4v2ngpjswn] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.fx-option[b-4v2ngpjswn] {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 0;
    border-radius: 20px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s var(--ease-pop), box-shadow 0.2s ease;
    animation: fx-deal-b-4v2ngpjswn 0.45s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.fx-option svg[b-4v2ngpjswn] {
    width: 84px;
    height: 84px;
    pointer-events: none;
}

.fx-option:active:not(:disabled)[b-4v2ngpjswn] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #e6c597, 0 4px 8px rgba(61, 42, 28, 0.18);
}

.fx-option.is-wrong[b-4v2ngpjswn] {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: fx-wobble-b-4v2ngpjswn 0.5s ease both;
}

/* In flight: the tile stays as a dashed slot while its clone flies up. */
.fx-option.is-gone[b-4v2ngpjswn] {
    border: 4px dashed #e6c597;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.fx-option.is-gone svg[b-4v2ngpjswn] {
    opacity: 0;
}

/* The demo hand on the right stroke of the first board (until the first touch). */
.fx-hand[b-4v2ngpjswn] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 52px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: fx-tap-b-4v2ngpjswn 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- The whole letter and the way on ---------- */
.fx-glyph[b-4v2ngpjswn] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #ffffff;
    border: 4px solid #ffc93c;
    box-shadow: 0 4px 0 #e6c597, 0 0 16px rgba(255, 201, 60, 0.6);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    animation: fx-pop-b-4v2ngpjswn 0.5s var(--ease-pop) both;
}

.fx-next[b-4v2ngpjswn] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 12px;
    animation: fx-in-b-4v2ngpjswn 0.4s var(--ease-pop) both;
}

.fx-next__cta[b-4v2ngpjswn] {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes fx-draw-b-4v2ngpjswn {
    to { stroke-dashoffset: 0; }
}

@keyframes fx-deal-b-4v2ngpjswn {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes fx-wobble-b-4v2ngpjswn {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-7deg) translateX(-4px); }
    40% { transform: rotate(6deg) translateX(4px); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(3deg); }
}

@keyframes fx-tap-b-4v2ngpjswn {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@keyframes fx-pop-b-4v2ngpjswn {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes fx-in-b-4v2ngpjswn {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (max-height: 640px) {
    .fx-option[b-4v2ngpjswn] { width: 84px; height: 84px; }
    .fx-option svg[b-4v2ngpjswn] { width: 72px; height: 72px; }
    .fx-bottom[b-4v2ngpjswn] { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-option[b-4v2ngpjswn],
    .fx-option.is-wrong[b-4v2ngpjswn],
    .fx-glyph[b-4v2ngpjswn],
    .fx-next[b-4v2ngpjswn] {
        animation: none;
    }

    .fx-mend[b-4v2ngpjswn] { animation-duration: 0.01s; }
    .fx-hand[b-4v2ngpjswn] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/LetterFun/LetterFunEnd.razor.rz.scp.css */
/* The gentle end card of the forest letter games. */
.lfe[b-w0topovsuz] {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(61, 42, 28, 0.28);
}

.lfe__card[b-w0topovsuz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(320px, 100%);
    padding: 20px 16px 22px;
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 6px 0 #e6c597, 0 18px 36px rgba(61, 42, 28, 0.3);
    animation: lfe-in-b-w0topovsuz 0.5s var(--ease-pop) both;
}

.lfe__star[b-w0topovsuz] {
    width: 130px;
    height: 130px;
    overflow: visible;
    filter: drop-shadow(0 0 14px rgba(255, 201, 60, 0.8));
    animation: lfe-glow-b-w0topovsuz 2.4s ease-in-out infinite;
}

.lfe__star path[b-w0topovsuz] {
    fill: #ffc93c;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.lfe__friend[b-w0topovsuz] {
    display: grid;
    width: 72px;
    height: 72px;
}

.lfe__go[b-w0topovsuz] {
    position: relative;
    display: block;
    width: 160px;
    margin-top: 8px;
    padding-top: 40px;
}

.lfe__go .lfe__cta[b-w0topovsuz] {
    top: -4px;
}

.lfe__cta[b-w0topovsuz] {
    position: absolute;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes lfe-in-b-w0topovsuz {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes lfe-glow-b-w0topovsuz {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lfe__card[b-w0topovsuz],
    .lfe__star[b-w0topovsuz] {
        animation: none;
    }
}
/* /Games/LetterFun/Maze/LetterMazeGame.razor.rz.scp.css */
/* „Лавиринт слова“: the fat letter with its corridors fills the panel (SVG, contain); the strip under it holds the
   finished letter and the way on. Colours per maze come from the stage: --c (the letter), --c2 (the trail). */
.lm-stage[b-pa0j7yq7rj] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lm-board[b-pa0j7yq7rj] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.lm-svg[b-pa0j7yq7rj] {
    width: 100cqw;
    height: 100cqh;
    overflow: visible;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* The fat letter: round everywhere, wide enough to wrap every corridor cell, with a soft shadow on the page. */
.lm-body path[b-pa0j7yq7rj] {
    fill: none;
    stroke: var(--c);
    stroke-width: 96;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 0 rgba(61, 42, 28, 0.18));
    transition: stroke 0.5s ease;
}

.lm-stage.is-done .lm-body path[b-pa0j7yq7rj] {
    stroke: #ffc93c;
    filter: drop-shadow(0 0 14px rgba(255, 201, 60, 0.85)) drop-shadow(0 6px 0 rgba(61, 42, 28, 0.18));
}

/* The corridors: cream tiles and bridges (the walls are simply the letter showing between them). */
.lm-floor rect[b-pa0j7yq7rj] {
    fill: #fff8e8;
}

.lm-stage.is-done .lm-floor rect[b-pa0j7yq7rj] {
    fill: #fffdf5;
}

/* The finger's trail, drawn through the cell centres. */
.lm-trail[b-pa0j7yq7rj] {
    fill: none;
    stroke: var(--c2);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    pointer-events: none;
}

.lm-start[b-pa0j7yq7rj] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 2.5;
    pointer-events: none;
}

.lm-flag[b-pa0j7yq7rj] {
    pointer-events: none;
}

.lm-flag__pad[b-pa0j7yq7rj] {
    fill: #ffffff;
    opacity: 0.7;
}

.lm-flag__pole[b-pa0j7yq7rj] {
    stroke: #5d4037;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.lm-flag__cloth[b-pa0j7yq7rj] {
    fill: #ef5350;
    stroke: #ffffff;
    stroke-width: 1;
    stroke-linejoin: round;
    transform-origin: -3px -7px;
    animation: lm-wave-b-pa0j7yq7rj 1.2s ease-in-out infinite;
}

.lm-stage.is-done .lm-flag__cloth[b-pa0j7yq7rj] {
    fill: #43a047;
}

/* The trail's end: the thing the child drags. It pulses until the maze is done. */
.lm-head[b-pa0j7yq7rj] {
    pointer-events: none;
}

.lm-head__dot[b-pa0j7yq7rj] {
    fill: var(--c2);
    stroke: #ffffff;
    stroke-width: 3;
}

.lm-head__ring[b-pa0j7yq7rj] {
    fill: none;
    stroke: var(--c2);
    stroke-width: 2;
    opacity: 0.6;
    transform-origin: 0 0;
    animation: lm-ring-b-pa0j7yq7rj 1.4s ease-out infinite;
}

.lm-stage.is-done .lm-head__ring[b-pa0j7yq7rj] {
    animation: none;
    opacity: 0;
}

.lm-stage.is-done .lm-head__dot[b-pa0j7yq7rj] {
    fill: #43a047;
    animation: lm-pop-b-pa0j7yq7rj 0.6s var(--ease-pop);
}

/* The demo hand walks the start of the way (animateMotion). */
.lm-demo[b-pa0j7yq7rj] {
    pointer-events: none;
}

.lm-demo__hand[b-pa0j7yq7rj] {
    font-size: 54px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
}

/* The bottom strip: the letter badge and the one way on, once the flag is reached. */
.lm-next[b-pa0j7yq7rj] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: 84px;
}

.lm-glyph[b-pa0j7yq7rj] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #ffffff;
    border: 4px solid #ffc93c;
    box-shadow: 0 4px 0 #e6c597, 0 0 16px rgba(255, 201, 60, 0.6);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    animation: lm-pop-b-pa0j7yq7rj 0.5s var(--ease-pop) both;
}

.lm-next__go[b-pa0j7yq7rj] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 12px;
    animation: lm-in-b-pa0j7yq7rj 0.4s var(--ease-pop) both;
}

.lm-next__cta[b-pa0j7yq7rj] {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes lm-ring-b-pa0j7yq7rj {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0; }
}

@keyframes lm-wave-b-pa0j7yq7rj {
    0%, 100% { transform: skewY(0deg); }
    50% { transform: skewY(-8deg); }
}

@keyframes lm-pop-b-pa0j7yq7rj {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes lm-in-b-pa0j7yq7rj {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lm-head__ring[b-pa0j7yq7rj],
    .lm-flag__cloth[b-pa0j7yq7rj],
    .lm-glyph[b-pa0j7yq7rj],
    .lm-next__go[b-pa0j7yq7rj],
    .lm-stage.is-done .lm-head__dot[b-pa0j7yq7rj] {
        animation: none;
    }
}
/* /Games/LetterFun/Shapes/ShapeHuntGame.razor.rz.scp.css */
/* „Слово у предметима“: the letter's card on top, the things to choose from under it. --c is the board's ink. */
.sh-stage[b-0ud4ggu4qc] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sh-top[b-0ud4ggu4qc] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sh-card[b-0ud4ggu4qc] {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100cqw, 100cqh, 300px);
    aspect-ratio: 1;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 9px 18px rgba(61, 42, 28, 0.14);
    overflow: hidden;
    transition: box-shadow 0.5s ease;
}

.sh-stage.is-done .sh-card[b-0ud4ggu4qc] {
    box-shadow: 0 5px 0 #e6c597, 0 0 0 4px rgba(255, 201, 60, 0.6), 0 0 26px rgba(255, 201, 60, 0.85);
}

/* The thing, big on the card once found; the letter settles over it, half-see-through, so the likeness shows. */
.sh-card__thing[b-0ud4ggu4qc] {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    object-fit: contain;
    animation: sh-land-b-0ud4ggu4qc 0.45s var(--ease-pop) both;
}

.sh-letter[b-0ud4ggu4qc] {
    position: relative;
    width: 76%;
    height: 76%;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.sh-letter path[b-0ud4ggu4qc] {
    fill: none;
    stroke: var(--c);
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sh-stage.is-done .sh-letter[b-0ud4ggu4qc] {
    opacity: 0.55;
    filter: drop-shadow(0 0 4px #ffffff);
}

/* ---------- The things ---------- */
.sh-bottom[b-0ud4ggu4qc] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 108px;
}

.sh-options[b-0ud4ggu4qc] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.sh-option[b-0ud4ggu4qc] {
    --size: 100px;
    position: relative;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin: 0;
    padding: 0;
    border-radius: 22%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s var(--ease-pop), box-shadow 0.2s ease;
    animation: sh-deal-b-0ud4ggu4qc 0.45s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.sh-options--4 .sh-option[b-0ud4ggu4qc] {
    --size: 74px;
}

.sh-options--4[b-0ud4ggu4qc] {
    gap: 8px;
}

.sh-option img[b-0ud4ggu4qc] {
    width: 78%;
    height: 78%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.sh-option:active:not(:disabled)[b-0ud4ggu4qc] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #e6c597, 0 4px 8px rgba(61, 42, 28, 0.18);
}

.sh-option.is-wrong[b-0ud4ggu4qc] {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: sh-wobble-b-0ud4ggu4qc 0.5s ease both;
}

.sh-option.is-gone[b-0ud4ggu4qc] {
    border: 4px dashed #e6c597;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.sh-option.is-gone img[b-0ud4ggu4qc] {
    opacity: 0;
}

.sh-hand[b-0ud4ggu4qc] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 52px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: sh-tap-b-0ud4ggu4qc 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- Found: the letter badge and the way on ---------- */
.sh-glyph[b-0ud4ggu4qc] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #ffffff;
    border: 4px solid #ffc93c;
    box-shadow: 0 4px 0 #e6c597, 0 0 16px rgba(255, 201, 60, 0.6);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    animation: sh-pop-b-0ud4ggu4qc 0.5s var(--ease-pop) both;
}

.sh-next[b-0ud4ggu4qc] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 12px;
    animation: sh-in-b-0ud4ggu4qc 0.4s var(--ease-pop) both;
}

.sh-next__cta[b-0ud4ggu4qc] {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes sh-land-b-0ud4ggu4qc {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sh-deal-b-0ud4ggu4qc {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sh-wobble-b-0ud4ggu4qc {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-7deg) translateX(-4px); }
    40% { transform: rotate(6deg) translateX(4px); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(3deg); }
}

@keyframes sh-tap-b-0ud4ggu4qc {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@keyframes sh-pop-b-0ud4ggu4qc {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes sh-in-b-0ud4ggu4qc {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (max-height: 640px) {
    .sh-option[b-0ud4ggu4qc] { --size: 84px; }
    .sh-options--4 .sh-option[b-0ud4ggu4qc] { --size: 68px; }
    .sh-bottom[b-0ud4ggu4qc] { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-option[b-0ud4ggu4qc],
    .sh-option.is-wrong[b-0ud4ggu4qc],
    .sh-card__thing[b-0ud4ggu4qc],
    .sh-glyph[b-0ud4ggu4qc],
    .sh-next[b-0ud4ggu4qc] {
        animation: none;
    }

    .sh-hand[b-0ud4ggu4qc] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/LetterFun/Stars/StarWordsGame.razor.rz.scp.css */
/* „Звездице“: the word fills the panel (SVG, contain), the strip under it holds the picture and the way on. */
.sw-stage[b-knbjjbetu0] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* Drawn 1:1 in the measured stage (StarWords.Layout): the star spacing is real px. */
.sw-word[b-knbjjbetu0] {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    transform-origin: 50% 0;
    transition: transform 0.5s var(--ease-pop);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* The letter's faint road under its stars: readable before a single star is coloured. */
.sw-guide path[b-knbjjbetu0] {
    fill: none;
    stroke: #f1e3cc;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.5s ease;
}

.sw-stage.is-done .sw-guide path[b-knbjjbetu0] {
    stroke: color-mix(in srgb, var(--c) 35%, #ffffff);
}

.sw-star[b-knbjjbetu0] {
    cursor: pointer;
}

.sw-star__hit[b-knbjjbetu0] {
    fill: transparent;
}

.sw-star__shape[b-knbjjbetu0] {
    fill: #ffffff;
    stroke: #b8a184;
    stroke-width: 2.6;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.sw-star.is-on .sw-star__shape[b-knbjjbetu0] {
    fill: var(--c);
    stroke: #ffffff;
    stroke-width: 3;
    animation: sw-pop-b-knbjjbetu0 0.42s var(--ease-pop);
}

.sw-star.is-on[b-knbjjbetu0] {
    cursor: default;
}

.sw-star__spark line[b-knbjjbetu0] {
    stroke: var(--c);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0;
    animation: sw-spark-b-knbjjbetu0 0.55s ease-out;
}

/* The very first star breathes until the first tap (the picture is the instruction). */
.sw-star.is-hint .sw-star__shape[b-knbjjbetu0] {
    animation: sw-breathe-b-knbjjbetu0 1.2s ease-in-out infinite;
    stroke: #f29f05;
}

/* The finished word hops once and makes room (nothing is left to tap) for the picture and the way on. */
.sw-stage.is-done .sw-word[b-knbjjbetu0] {
    transform: scale(0.76);
    animation: sw-hop-b-knbjjbetu0 0.9s var(--ease-pop);
}

.sw-next[b-knbjjbetu0] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 22px;
}

.sw-next > *[b-knbjjbetu0] {
    pointer-events: auto;
}

.sw-next__pic[b-knbjjbetu0] {
    width: 78px;
    height: 78px;
    animation: sw-in-b-knbjjbetu0 0.5s var(--ease-pop) both;
}

.sw-next__go[b-knbjjbetu0] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 30px;
    animation: sw-in-b-knbjjbetu0 0.4s var(--ease-pop) both;
}

.sw-next__cta[b-knbjjbetu0] {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes sw-pop-b-knbjjbetu0 {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

@keyframes sw-spark-b-knbjjbetu0 {
    0% { opacity: 1; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes sw-breathe-b-knbjjbetu0 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@keyframes sw-hop-b-knbjjbetu0 {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-10px) scale(0.84); }
    70% { transform: translateY(2px) scale(0.74); }
    100% { transform: translateY(0) scale(0.76); }
}

@keyframes sw-in-b-knbjjbetu0 {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sw-star.is-on .sw-star__shape[b-knbjjbetu0],
    .sw-star.is-hint .sw-star__shape[b-knbjjbetu0],
    .sw-stage.is-done .sw-word[b-knbjjbetu0],
    .sw-next__pic[b-knbjjbetu0],
    .sw-next__go[b-knbjjbetu0] {
        animation: none;
    }

    .sw-word[b-knbjjbetu0] {
        transition: none;
    }

    .sw-star__spark[b-knbjjbetu0] {
        display: none;
    }
}
/* /Games/LetterFun/Zoo/ZooGame.razor.rz.scp.css */
/* „Зоо“: the ticket on top, the gate in the middle (its doors swing open on the animal), the keypad under it. */
.zo-stage[b-vv9zwn5c6u] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ---------- The ticket ---------- */
.zo-ticket[b-vv9zwn5c6u] {
    flex: none;
    display: flex;
    align-items: stretch;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff8e1 0%, #ffecb3 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #e6c597, 0 8px 16px rgba(61, 42, 28, 0.16);
    animation: zo-deal-b-vv9zwn5c6u 0.45s var(--ease-pop) both;
}

.zo-ticket__stub[b-vv9zwn5c6u] {
    display: grid;
    place-items: center;
    width: 44px;
    border-right: 3px dashed #e0b56a;
    color: #ffb300;
}

.zo-ticket__stub svg[b-vv9zwn5c6u] {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.zo-ticket__code[b-vv9zwn5c6u] {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
}

.zo-ticket__letter[b-vv9zwn5c6u] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    border-radius: 10px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    color: #4e342e;
    transition: color 0.3s ease, background 0.3s ease;
}

.zo-ticket__letter.is-typed[b-vv9zwn5c6u] {
    color: #9e9e9e;
}

.zo-ticket__letter.is-now[b-vv9zwn5c6u] {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.5);
}

/* ---------- The gate ---------- */
.zo-yard[b-vv9zwn5c6u] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    container-type: size;
    display: grid;
    place-items: center;
}

.zo-gate[b-vv9zwn5c6u] {
    position: relative;
    height: min(100cqh, 230px, calc(100cqw * 5 / 6));
    aspect-ratio: 6 / 5;
    perspective: 700px;
}

.zo-gate__inside[b-vv9zwn5c6u] {
    position: absolute;
    inset: 12% 10% 0;
    display: grid;
    place-items: center;
    border-radius: 42% 42% 0 0 / 46% 46% 0 0;
    background: linear-gradient(180deg, #8fd3ff 0%, #c9f0b4 70%, #8fd16a 100%);
    overflow: hidden;
}

.zo-animal[b-vv9zwn5c6u] {
    width: 62%;
    height: 62%;
    object-fit: contain;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.6s var(--ease-pop) 0.25s, opacity 0.3s ease 0.25s;
}

.zo-gate.is-open .zo-animal[b-vv9zwn5c6u] {
    transform: scale(1);
    opacity: 1;
}

.zo-frame[b-vv9zwn5c6u] {
    position: absolute;
    inset: 6% 4% 0;
    border: 10px solid #8d5524;
    border-bottom: 0;
    border-radius: 46% 46% 0 0 / 50% 50% 0 0;
    box-shadow: inset 0 0 0 3px #c48a4a, 0 6px 0 rgba(61, 42, 28, 0.2);
    pointer-events: none;
}

.zo-door[b-vv9zwn5c6u] {
    position: absolute;
    top: 24%;
    bottom: 0;
    width: 40%;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(90deg, transparent 0 22%, rgba(0, 0, 0, 0.08) 22% 25%),
        linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
    border: 4px solid #2e7d32;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25);
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.3, 1);
}

.zo-door--l[b-vv9zwn5c6u] {
    left: 10%;
    border-radius: 6px 0 0 4px;
    transform-origin: left center;
}

.zo-door--r[b-vv9zwn5c6u] {
    right: 10%;
    border-radius: 0 6px 4px 0;
    transform-origin: right center;
}

.zo-gate.is-open .zo-door--l[b-vv9zwn5c6u] {
    transform: rotateY(-112deg);
}

.zo-gate.is-open .zo-door--r[b-vv9zwn5c6u] {
    transform: rotateY(112deg);
}

/* A little barred window in each door. */
.zo-door__window[b-vv9zwn5c6u] {
    width: 48%;
    height: 34%;
    margin-top: -20%;
    border-radius: 8px;
    background:
        repeating-linear-gradient(90deg, #2e7d32 0 4px, transparent 4px 12px),
        #c9f0b4;
    border: 3px solid #2e7d32;
}

.zo-door__knob[b-vv9zwn5c6u] {
    position: absolute;
    top: 55%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffc93c;
    box-shadow: 0 1px 0 #f29f05;
}

.zo-door--l .zo-door__knob[b-vv9zwn5c6u] { right: 8%; }
.zo-door--r .zo-door__knob[b-vv9zwn5c6u] { left: 8%; }

/* The code plate over the doors: a slot per letter, filled as they are typed. */
.zo-plate[b-vv9zwn5c6u] {
    position: absolute;
    left: 50%;
    top: 12%;
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 12px;
    background: #37474f;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #263238;
    transform: translateX(-50%);
    z-index: 2;
}

.zo-slot[b-vv9zwn5c6u] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 36px;
    border-radius: 8px;
    background: #546e7a;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
}

.zo-slot.is-next[b-vv9zwn5c6u] {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.6);
}

.zo-slot.is-filled[b-vv9zwn5c6u] {
    background: #66bb6a;
    animation: zo-pop-b-vv9zwn5c6u 0.4s var(--ease-pop);
}

.zo-gate.is-open .zo-slot.is-filled[b-vv9zwn5c6u] {
    background: #ffc93c;
    color: #4e342e;
}

/* ---------- The keypad ---------- */
.zo-bottom[b-vv9zwn5c6u] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 142px;
}

.zo-keys[b-vv9zwn5c6u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: calc(4 * 64px + 3 * 8px);
}

.zo-key[b-vv9zwn5c6u] {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #8fd3ff 0%, #42a5f5 100%);
    box-shadow: 0 4px 0 #1e6fbf;
    font-family: inherit;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 2px 0 #1e6fbf;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: zo-deal-b-vv9zwn5c6u 0.4s var(--ease-pop) calc(var(--i, 0) * 45ms) both;
}

.zo-key:active:not(:disabled)[b-vv9zwn5c6u] {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #1e6fbf;
}

.zo-key.is-shake[b-vv9zwn5c6u] {
    animation: zo-shake-b-vv9zwn5c6u 0.45s ease-in-out;
}

.zo-hand[b-vv9zwn5c6u] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 50px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    text-shadow: none;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: zo-tap-b-vv9zwn5c6u 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- Open: the way on ---------- */
.zo-next[b-vv9zwn5c6u] {
    position: relative;
    display: block;
    width: 128px;
    padding-top: 12px;
    animation: zo-in-b-vv9zwn5c6u 0.4s var(--ease-pop) both;
}

.zo-next__cta[b-vv9zwn5c6u] {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 38px;
    height: 44px;
    margin-left: -19px;
    pointer-events: none;
}

@keyframes zo-deal-b-vv9zwn5c6u {
    from { transform: translateY(14px) scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes zo-pop-b-vv9zwn5c6u {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes zo-shake-b-vv9zwn5c6u {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
}

@keyframes zo-tap-b-vv9zwn5c6u {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@keyframes zo-in-b-vv9zwn5c6u {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@media (max-height: 640px) {
    .zo-key[b-vv9zwn5c6u] { width: 58px; height: 58px; font-size: 30px; }
    .zo-keys[b-vv9zwn5c6u] { max-width: calc(4 * 58px + 3 * 8px); }
    .zo-bottom[b-vv9zwn5c6u] { min-height: 128px; }
    .zo-ticket__letter[b-vv9zwn5c6u] { width: 34px; height: 38px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .zo-ticket[b-vv9zwn5c6u],
    .zo-key[b-vv9zwn5c6u],
    .zo-key.is-shake[b-vv9zwn5c6u],
    .zo-slot.is-filled[b-vv9zwn5c6u],
    .zo-next[b-vv9zwn5c6u] {
        animation: none;
    }

    .zo-door[b-vv9zwn5c6u],
    .zo-animal[b-vv9zwn5c6u] {
        transition: none;
    }

    .zo-hand[b-vv9zwn5c6u] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/Mountain/Clouds/CloudsGame.razor.rz.scp.css */
/* „Облаци“: run bar, the sky scene (the question) in a rounded frame, and 2–4 word-clouds under it, sized from the
   board (container units). Phone portrait first; on a wide screen the whole column is capped and centred. */
.cl-play[b-pptmkwuny9] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 560px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* ---------- The sky ---------- */
.cl-board[b-pptmkwuny9] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.cl-sky[b-pptmkwuny9] {
    position: relative;
    width: min(100cqw, 200cqh);
    aspect-ratio: 2 / 1;
    container-type: inline-size;
    border-radius: 24px;
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #b39ddb, 0 10px 18px rgba(61, 42, 28, 0.18);
    overflow: hidden;
    animation: cl-sky-in-b-pptmkwuny9 0.5s var(--ease-pop) both;
}

.cl-sky.is-found[b-pptmkwuny9] {
    animation: cl-sky-cheer-b-pptmkwuny9 0.6s var(--ease-pop) both;
}

/* The word over its sky, once the right cloud is caught. */
.cl-cap[b-pptmkwuny9] {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    padding: 2px 16px 4px;
    border-radius: 999px;
    background: rgba(255, 253, 247, 0.94);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #b39ddb;
    font-size: clamp(22px, 7.5cqw, 42px);
    font-weight: 1000;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: #4527a0;
    white-space: nowrap;
    pointer-events: none;
    animation: cl-cap-in-b-pptmkwuny9 0.4s var(--ease-pop) both;
}

/* ---------- The clouds ---------- */
.cl-clouds[b-pptmkwuny9] {
    --gap: 14px;
    --cw: min(calc((100% - var(--gap)) / 2), 240px);
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, var(--cw));
    gap: 10px var(--gap);
    justify-content: center;
}

/* Three clouds: two on top, one centred below. */
.cl-clouds--3 .cl-cloud:nth-child(3)[b-pptmkwuny9] {
    grid-column: 1 / span 2;
    justify-self: center;
}

.cl-cloud[b-pptmkwuny9] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    container-type: inline-size;
    min-height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    animation: cl-deal-b-pptmkwuny9 0.5s var(--ease-pop) calc(var(--i, 0) * 70ms) both;
}

.cl-cloud:disabled[b-pptmkwuny9] {
    cursor: default;
}

/* The drift is on the inner wrapper, so the hit target stays put and the demo hand measures the button itself. */
.cl-cloud__drift[b-pptmkwuny9] {
    position: absolute;
    inset: 0;
    display: block;
    animation: cl-drift-b-pptmkwuny9 5s ease-in-out calc(var(--i, 0) * -1.7s) infinite alternate;
    transition: transform 0.35s var(--ease-pop);
}

.cl-cloud__puff[b-pptmkwuny9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 0 #b39ddb) drop-shadow(0 8px 12px rgba(61, 42, 28, 0.16));
    transition: filter 0.2s ease;
}

.cl-cloud__line[b-pptmkwuny9] {
    fill: #ffffff;
    stroke: #c3adec;
}

.cl-cloud__fill[b-pptmkwuny9] {
    fill: #ffffff;
}

.cl-cloud__word[b-pptmkwuny9] {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-46%);
    font-size: 19cqw;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: center;
    color: #4527a0;
    white-space: nowrap;
    pointer-events: none;
}

.cl-cloud.is-caught .cl-cloud__drift[b-pptmkwuny9] {
    animation: cl-caught-b-pptmkwuny9 0.6s var(--ease-pop) both;
}

.cl-cloud.is-caught .cl-cloud__line[b-pptmkwuny9] {
    fill: #e9fbe0;
    stroke: #7cc35f;
}

.cl-cloud.is-caught .cl-cloud__fill[b-pptmkwuny9] {
    fill: #e9fbe0;
}

.cl-cloud.is-caught .cl-cloud__puff[b-pptmkwuny9] {
    filter: drop-shadow(0 4px 0 #7cc35f) drop-shadow(0 8px 14px rgba(67, 160, 71, 0.3));
}

.cl-cloud.is-caught .cl-cloud__word[b-pptmkwuny9] {
    color: #2e7d32;
}

.cl-cloud.is-wrong .cl-cloud__drift[b-pptmkwuny9] {
    animation: cl-wiggle-b-pptmkwuny9 0.55s ease both;
}

.cl-cloud.is-wrong .cl-cloud__line[b-pptmkwuny9] {
    fill: #fff1e6;
    stroke: #f0a46b;
}

.cl-cloud.is-wrong .cl-cloud__fill[b-pptmkwuny9] {
    fill: #fff1e6;
}

.cl-cloud.is-missed[b-pptmkwuny9] {
    opacity: 0.4;
}

.cl-cloud.is-missed .cl-cloud__drift[b-pptmkwuny9] {
    animation: none;
}

.cl-cloud.is-missed .cl-cloud__puff[b-pptmkwuny9] {
    filter: drop-shadow(0 2px 0 #c3adec);
}

@keyframes cl-sky-in-b-pptmkwuny9 {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes cl-sky-cheer-b-pptmkwuny9 {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes cl-cap-in-b-pptmkwuny9 {
    from { transform: translateX(-50%) translateY(10px) scale(0.6); opacity: 0; }
    to { transform: translateX(-50%); opacity: 1; }
}

@keyframes cl-deal-b-pptmkwuny9 {
    from { transform: translateY(22px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes cl-drift-b-pptmkwuny9 {
    from { transform: translate(-5px, 0); }
    to { transform: translate(5px, -3px); }
}

@keyframes cl-caught-b-pptmkwuny9 {
    0% { transform: scale(1); }
    45% { transform: scale(1.14) translateY(-6px); }
    100% { transform: scale(1.04); }
}

@keyframes cl-wiggle-b-pptmkwuny9 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px) rotate(-4deg) scale(1.06); }
    40% { transform: translateX(8px) rotate(4deg) scale(1.06); }
    60% { transform: translateX(-5px) scale(1.02); }
    80% { transform: translateX(4px); }
}

/* Landscape phone (too short for the clouds under the sky): the sky to the left, the clouds in one column beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .cl-play[b-pptmkwuny9] {
        flex-direction: row;
        align-items: center;
        max-width: none;
    }

    .cl-board[b-pptmkwuny9] {
        align-self: stretch;
    }

    .cl-clouds[b-pptmkwuny9] {
        --cw: min(200px, 34vw);
        grid-template-columns: var(--cw);
        gap: 6px;
    }

    .cl-clouds--3 .cl-cloud:nth-child(3)[b-pptmkwuny9] {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-sky[b-pptmkwuny9],
    .cl-sky.is-found[b-pptmkwuny9],
    .cl-cap[b-pptmkwuny9],
    .cl-cloud[b-pptmkwuny9],
    .cl-cloud__drift[b-pptmkwuny9],
    .cl-cloud.is-caught .cl-cloud__drift[b-pptmkwuny9],
    .cl-cloud.is-wrong .cl-cloud__drift[b-pptmkwuny9] {
        animation: none;
    }
}
/* /Games/Mountain/Clouds/SkyScene.razor.rz.scp.css */
/* The sky scenes of „Облаци“: small, slow movement so the picture feels alive (rain falls, flakes drift, rays turn,
   the bolt flashes, haze slides). Every transform here sits on an element without its own transform attribute. */
.cls[b-sy4ba1wwsx] {
    display: block;
    width: 100%;
    height: 100%;
}

.cls-rays[b-sy4ba1wwsx] {
    transform-box: view-box;
    transform-origin: 150px 60px;
    animation: cls-spin-b-sy4ba1wwsx 28s linear infinite;
}

.cls-glow[b-sy4ba1wwsx] {
    transform-box: view-box;
    transform-origin: center;
    animation: cls-pulse-b-sy4ba1wwsx 3.2s ease-in-out infinite;
}

.cls-bob[b-sy4ba1wwsx] {
    animation: cls-bob-b-sy4ba1wwsx 4s ease-in-out infinite;
}

.cls-drift[b-sy4ba1wwsx] {
    animation: cls-drift-b-sy4ba1wwsx 7s ease-in-out infinite alternate;
}

.cls-rain[b-sy4ba1wwsx] {
    animation: cls-fall-b-sy4ba1wwsx 1.1s linear infinite;
}

.cls-rain--b[b-sy4ba1wwsx] {
    animation-delay: -0.55s;
}

.cls-rain--slant[b-sy4ba1wwsx] {
    animation-name: cls-fall-slant-b-sy4ba1wwsx;
    animation-duration: 0.9s;
}

.cls-rain--slant.cls-rain--b[b-sy4ba1wwsx] {
    animation-delay: -0.45s;
}

.cls-flakes circle[b-sy4ba1wwsx] {
    animation: cls-snow-b-sy4ba1wwsx 5s ease-in-out infinite;
}

.cls-flakes circle:nth-child(3n + 1)[b-sy4ba1wwsx] { animation-delay: -1.6s; animation-duration: 5.6s; }
.cls-flakes circle:nth-child(3n + 2)[b-sy4ba1wwsx] { animation-delay: -3.4s; animation-duration: 6.4s; }
.cls-flakes circle:nth-child(3n)[b-sy4ba1wwsx] { animation-delay: -0.6s; animation-duration: 5.2s; }

.cls-swirl path[b-sy4ba1wwsx] {
    stroke-dasharray: 90 70;
    animation: cls-gust-b-sy4ba1wwsx 3s linear infinite;
}

.cls-swirl path:nth-child(2)[b-sy4ba1wwsx] { animation-delay: -1s; }
.cls-swirl path:nth-child(3)[b-sy4ba1wwsx] { animation-delay: -2s; }

.cls-tree[b-sy4ba1wwsx] {
    transform-box: view-box;
    transform-origin: 50px 130px;
    animation: cls-sway-b-sy4ba1wwsx 2.4s ease-in-out infinite alternate;
}

.cls-tree--dark[b-sy4ba1wwsx] {
    transform-origin: 248px 128px;
}

.cls-leaf[b-sy4ba1wwsx] {
    animation: cls-leaf-b-sy4ba1wwsx 3.6s ease-in infinite;
}

.cls-leaf:nth-child(2)[b-sy4ba1wwsx] { animation-delay: -1.2s; }
.cls-leaf:nth-child(3)[b-sy4ba1wwsx] { animation-delay: -2.4s; }
.cls-leaf:nth-child(4)[b-sy4ba1wwsx] { animation-delay: -0.6s; }

.cls-rainbow[b-sy4ba1wwsx] {
    animation: cls-shimmer-b-sy4ba1wwsx 4s ease-in-out infinite alternate;
}

.cls-bolt[b-sy4ba1wwsx] {
    opacity: 0;
    animation: cls-bolt-b-sy4ba1wwsx 5s linear infinite;
}

.cls-flash[b-sy4ba1wwsx] {
    animation: cls-flash-b-sy4ba1wwsx 5s linear infinite;
}

.cls-band[b-sy4ba1wwsx] {
    animation: cls-haze-b-sy4ba1wwsx 9s ease-in-out infinite alternate;
}

.cls-band:nth-child(2)[b-sy4ba1wwsx] { animation-duration: 11s; animation-direction: alternate-reverse; }
.cls-band:nth-child(3)[b-sy4ba1wwsx] { animation-duration: 8s; }
.cls-band:nth-child(4)[b-sy4ba1wwsx] { animation-duration: 12s; animation-direction: alternate-reverse; }

.cls-star[b-sy4ba1wwsx] {
    animation: cls-twinkle-b-sy4ba1wwsx 2.6s ease-in-out infinite;
}

.cls-stars .cls-star:nth-child(2n)[b-sy4ba1wwsx] { animation-delay: -1.3s; }
.cls-stars .cls-star:nth-child(3n)[b-sy4ba1wwsx] { animation-delay: -0.8s; animation-duration: 3.4s; }
.cls-stars .cls-star:nth-child(5n)[b-sy4ba1wwsx] { animation-delay: -2s; }

.cls-spark[b-sy4ba1wwsx] {
    animation: cls-spark-b-sy4ba1wwsx 0.9s var(--ease-pop) both;
}

.cls-sparks g:nth-child(2) .cls-spark[b-sy4ba1wwsx] { animation-delay: 0.05s; }
.cls-sparks g:nth-child(3) .cls-spark[b-sy4ba1wwsx] { animation-delay: 0.1s; }
.cls-sparks g:nth-child(4) .cls-spark[b-sy4ba1wwsx] { animation-delay: 0.15s; }
.cls-sparks g:nth-child(5) .cls-spark[b-sy4ba1wwsx] { animation-delay: 0.2s; }
.cls-sparks g:nth-child(6) .cls-spark[b-sy4ba1wwsx] { animation-delay: 0.25s; }

@keyframes cls-spin-b-sy4ba1wwsx {
    to { transform: rotate(360deg); }
}

@keyframes cls-pulse-b-sy4ba1wwsx {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes cls-bob-b-sy4ba1wwsx {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes cls-drift-b-sy4ba1wwsx {
    from { transform: translateX(-10px); }
    to { transform: translateX(10px); }
}

@keyframes cls-fall-b-sy4ba1wwsx {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(84px); opacity: 0; }
}

@keyframes cls-fall-slant-b-sy4ba1wwsx {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(-22px, 84px); opacity: 0; }
}

@keyframes cls-snow-b-sy4ba1wwsx {
    0% { transform: translate(0, -30px); opacity: 0; }
    15% { opacity: 1; }
    50% { transform: translate(6px, 20px); }
    85% { opacity: 1; }
    100% { transform: translate(-4px, 70px); opacity: 0; }
}

@keyframes cls-gust-b-sy4ba1wwsx {
    from { stroke-dashoffset: 160; }
    to { stroke-dashoffset: 0; }
}

@keyframes cls-sway-b-sy4ba1wwsx {
    from { transform: rotate(-3deg); }
    to { transform: rotate(4deg); }
}

@keyframes cls-leaf-b-sy4ba1wwsx {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translate(100px, -14px) rotate(180deg); }
    90% { opacity: 1; }
    100% { transform: translate(220px, 10px) rotate(360deg); opacity: 0; }
}

@keyframes cls-shimmer-b-sy4ba1wwsx {
    from { opacity: 0.82; }
    to { opacity: 1; }
}

@keyframes cls-bolt-b-sy4ba1wwsx {
    0%, 60%, 100% { opacity: 0; }
    62%, 66% { opacity: 1; }
    64% { opacity: 0.4; }
    68% { opacity: 0; }
    72%, 74% { opacity: 1; }
    76% { opacity: 0; }
}

@keyframes cls-flash-b-sy4ba1wwsx {
    0%, 60%, 100% { opacity: 0; }
    62% { opacity: 0.35; }
    64% { opacity: 0.08; }
    66% { opacity: 0.3; }
    68% { opacity: 0; }
    72% { opacity: 0.25; }
    76% { opacity: 0; }
}

@keyframes cls-haze-b-sy4ba1wwsx {
    from { transform: translateX(-14px); }
    to { transform: translateX(14px); }
}

@keyframes cls-twinkle-b-sy4ba1wwsx {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@keyframes cls-spark-b-sy4ba1wwsx {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

/* No motion: the pictures stand still; the bolt stays lit so the storm is still a storm. */
@media (prefers-reduced-motion: reduce) {
    .cls-rays[b-sy4ba1wwsx],
    .cls-glow[b-sy4ba1wwsx],
    .cls-bob[b-sy4ba1wwsx],
    .cls-drift[b-sy4ba1wwsx],
    .cls-rain[b-sy4ba1wwsx],
    .cls-flakes circle[b-sy4ba1wwsx],
    .cls-swirl path[b-sy4ba1wwsx],
    .cls-tree[b-sy4ba1wwsx],
    .cls-leaf[b-sy4ba1wwsx],
    .cls-rainbow[b-sy4ba1wwsx],
    .cls-flash[b-sy4ba1wwsx],
    .cls-band[b-sy4ba1wwsx],
    .cls-star[b-sy4ba1wwsx],
    .cls-spark[b-sy4ba1wwsx] {
        animation: none;
    }

    .cls-bolt[b-sy4ba1wwsx] {
        animation: none;
        opacity: 1;
    }

    .cls-leaf[b-sy4ba1wwsx] {
        opacity: 1;
    }

    .cls-spark[b-sy4ba1wwsx] {
        opacity: 0;
    }
}
/* /Games/Mountain/MissingLetter/MissingLetterGame.razor.rz.scp.css */
/* „Допиши слово“: run bar, the picture, the word with its gap, and 3–4 big letter stones below, phone portrait
   first. Mountain palette (lilac, plum, sun gold), no white or black fills. */

/* The "words" colour family for GameScreen / GameResults (the shared components only define games and letters);
   the wrapper generates no box. */
.mtn-area[b-6cszz9wkyu] {
    display: contents;
}

.mtn-area[b-6cszz9wkyu]  .gs--words { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); --c3: #5b3ba3; --ct: #5e35b1; }
.mtn-area[b-6cszz9wkyu]  .gr--words { --c1: var(--c-mountain-1); --c2: var(--c-mountain-2); }

.ml-progress[b-6cszz9wkyu] {
    flex: none;
    display: flex;
    justify-content: center;
}

.ml-play[b-6cszz9wkyu] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

/* ---------- The picture ---------- */
.ml-picture[b-6cszz9wkyu] {
    --pic: clamp(96px, 34cqh, 190px);
    flex: none;
    animation: ml-in-b-6cszz9wkyu 0.45s var(--ease-pop) both;
}

.ml-picture__img[b-6cszz9wkyu] {
    display: block;
    width: var(--pic);
    height: var(--pic);
    padding: calc(var(--pic) * 0.13);
    border-radius: 30%;
    background: radial-gradient(circle at 50% 38%, #f6f1fd 0%, #e6dcf8 62%, #d4c4f1 100%);
    border: 4px solid #c3adec;
    box-shadow: 0 6px 0 #9b7fd3, 0 12px 20px rgba(76, 46, 140, 0.22);
    object-fit: contain;
    pointer-events: none;
}

.ml-picture.is-done .ml-picture__img[b-6cszz9wkyu] {
    animation: ml-cheer-b-6cszz9wkyu 0.6s var(--ease-pop) both;
}

/* ---------- The word ---------- */
.ml-word[b-6cszz9wkyu] {
    --ch: min(64px, calc((100cqw - 8px - (var(--len) - 1) * 6px) / var(--len)));
    flex: none;
    display: flex;
    gap: 6px;
    animation: ml-in-b-6cszz9wkyu 0.45s var(--ease-pop) 0.08s both;
}

.ml-ch[b-6cszz9wkyu] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ch);
    height: calc(var(--ch) * 1.2);
    border-radius: 14px;
    background: linear-gradient(180deg, #f3edfc 0%, #e2d5f7 100%);
    border: 3px solid #c3adec;
    box-shadow: 0 4px 0 #9b7fd3;
    font-size: calc(var(--ch) * 0.72);
    font-weight: 1000;
    line-height: 1;
    color: #3e2470;
}

/* The gap: dashed and glowing until filled; the first word shows its letter faintly (the ghost). */
.ml-slot.is-open[b-6cszz9wkyu] {
    background: rgba(255, 201, 60, 0.28);
    border: 3px dashed #ffb300;
    box-shadow: none;
    animation: ml-glow-b-6cszz9wkyu 1.3s ease-in-out infinite;
}

.ml-ghost[b-6cszz9wkyu] {
    color: rgba(94, 53, 177, 0.3);
}

.ml-slot.is-filled[b-6cszz9wkyu] {
    background: linear-gradient(180deg, #ffe58a 0%, #ffc93c 100%);
    border-color: #f29f05;
    box-shadow: 0 4px 0 #c98a00;
    color: #5a3a00;
    animation: ml-drop-b-6cszz9wkyu 0.45s var(--ease-pop) both;
}

.ml-word.is-done .ml-ch:not(.ml-slot)[b-6cszz9wkyu] {
    animation: ml-wave-b-6cszz9wkyu 0.5s var(--ease-pop) both;
}

/* ---------- The letter stones ---------- */
.ml-options[b-6cszz9wkyu] {
    --stone: clamp(64px, min(calc((100cqw - 3 * 14px) / 4), 22cqh), 96px);
    flex: none;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.ml-options--3[b-6cszz9wkyu] {
    --stone: clamp(64px, min(calc((100cqw - 2 * 16px) / 3), 22cqh), 104px);
    gap: 16px;
}

.ml-sock[b-6cszz9wkyu] {
    display: block;
    width: var(--stone);
    height: var(--stone);
    animation: ml-deal-b-6cszz9wkyu 0.45s var(--ease-pop) calc(0.15s + var(--i, 0) * 70ms) both;
}

.ml-opt[b-6cszz9wkyu] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 4px;
    border-radius: 30%;
    border: 4px solid #d9c8f6;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 250, 240, 0.35) 0 14%, transparent 15%),
        linear-gradient(180deg, #b597ec 0%, #7e57c2 100%);
    box-shadow: 0 6px 0 #4f2f99, 0 11px 16px rgba(62, 36, 112, 0.28);
    font-size: calc(var(--stone) * 0.56);
    font-weight: 1000;
    line-height: 1;
    color: #fff8ec;
    text-shadow: 0 3px 0 #4f2f99;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.3s var(--ease-pop), opacity 0.25s ease, filter 0.25s ease;
}

.ml-opt:active:not(:disabled)[b-6cszz9wkyu] {
    transform: translateY(5px) scale(0.94);
    box-shadow: 0 1px 0 #4f2f99, 0 4px 8px rgba(62, 36, 112, 0.25);
    transition-duration: 0.07s;
}

.ml-opt:disabled[b-6cszz9wkyu] {
    cursor: default;
}

.ml-opt.is-wrong[b-6cszz9wkyu] {
    background: linear-gradient(180deg, #f6a98a 0%, #e0714a 100%);
    border-color: #f9d0bd;
    box-shadow: 0 6px 0 #a8461f;
    text-shadow: 0 3px 0 #a8461f;
    animation: ml-shake-b-6cszz9wkyu 0.5s ease both;
}

.ml-opt.is-out[b-6cszz9wkyu] {
    opacity: 0.32;
    filter: saturate(0.3);
    box-shadow: 0 2px 0 #4f2f99;
}

.ml-opt.is-right[b-6cszz9wkyu] {
    background: linear-gradient(180deg, #ffe58a 0%, #ffc93c 100%);
    border-color: #fff1c2;
    box-shadow: 0 6px 0 #c98a00, 0 0 0 6px rgba(255, 201, 60, 0.4);
    color: #5a3a00;
    text-shadow: none;
    animation: ml-cheer-b-6cszz9wkyu 0.5s var(--ease-pop) both;
}

/* ---------- Motion ---------- */
@keyframes ml-in-b-6cszz9wkyu {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ml-deal-b-6cszz9wkyu {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ml-glow-b-6cszz9wkyu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(255, 179, 0, 0); }
}

@keyframes ml-drop-b-6cszz9wkyu {
    0% { transform: translateY(-26px) scale(1.3); }
    100% { transform: none; }
}

@keyframes ml-wave-b-6cszz9wkyu {
    0%, 100% { transform: none; }
    45% { transform: translateY(-8px); }
}

@keyframes ml-shake-b-6cszz9wkyu {
    0%, 100% { transform: none; }
    20% { transform: translateX(-8px) rotate(-6deg); }
    45% { transform: translateX(7px) rotate(5deg); }
    70% { transform: translateX(-4px) rotate(-2deg); }
}

@keyframes ml-cheer-b-6cszz9wkyu {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Wider than tall (phone landscape, tablets on their side): the picture on the left, word and stones on the right. */
@media (min-aspect-ratio: 1/1) {
    .ml-play[b-6cszz9wkyu] {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        place-content: center;
        column-gap: 24px;
        row-gap: 14px;
    }

    .ml-picture[b-6cszz9wkyu] { grid-column: 1; grid-row: 1 / span 2; --pic: clamp(96px, 60cqh, 200px); }
    .ml-word[b-6cszz9wkyu] { grid-column: 2; grid-row: 1; --ch: min(60px, calc((55cqw - (var(--len) - 1) * 6px) / var(--len))); }
    .ml-options[b-6cszz9wkyu] { grid-column: 2; grid-row: 2; --stone: clamp(64px, 30cqh, 92px); }
}

@media (prefers-reduced-motion: reduce) {
    .ml-picture[b-6cszz9wkyu],
    .ml-word[b-6cszz9wkyu],
    .ml-sock[b-6cszz9wkyu],
    .ml-slot.is-open[b-6cszz9wkyu],
    .ml-slot.is-filled[b-6cszz9wkyu],
    .ml-word.is-done .ml-ch:not(.ml-slot)[b-6cszz9wkyu],
    .ml-opt.is-wrong[b-6cszz9wkyu],
    .ml-opt.is-right[b-6cszz9wkyu],
    .ml-picture.is-done .ml-picture__img[b-6cszz9wkyu] {
        animation: none;
    }
}
/* /Games/Mountain/Mystery/MysteryWordGame.razor.rz.scp.css */
/* „Тајна реч“: run bar, the hidden word as a row of letter slots (tap a „?“ to uncover the next letter), and a grid of
   picture tiles (shared .g-tile / .g-check pieces of GameScreen). */
.mw-play[b-809qunilfk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* ---------- The hidden word ---------- */
.mw-word[b-809qunilfk] {
    flex: none;
    align-self: center;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ece4fb 0%, #dccff5 100%);
    box-shadow: inset 0 2px 4px rgba(69, 39, 160, 0.18);
}

.mw-slot[b-809qunilfk] {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 64px;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    border: 3px solid #ffffff;
    font: inherit;
    font-size: 40px;
    font-weight: 1000;
    line-height: 1;
    touch-action: manipulation;
    animation: mw-deal-b-809qunilfk 0.4s var(--ease-pop) calc(var(--i, 0) * 60ms) both;
}

/* Still hidden, and the child may uncover it: a raised purple card with a „?“. */
.mw-slot.is-hidden[b-809qunilfk] {
    background: linear-gradient(180deg, #b39ddb 0%, #7e57c2 100%);
    box-shadow: 0 4px 0 #5e35b1, 0 7px 12px rgba(69, 39, 160, 0.28);
    color: #f3edff;
    cursor: pointer;
    transition: transform 0.3s var(--ease-pop);
}

.mw-slot.is-hidden:active:not(:disabled)[b-809qunilfk] {
    transform: translateY(3px) scale(0.95);
    box-shadow: 0 1px 0 #5e35b1;
}

/* The last letter (never uncovered): flat, out of play. */
.mw-slot.is-locked[b-809qunilfk] {
    background: linear-gradient(180deg, #cfc2ea 0%, #b8a7dd 100%);
    color: #8e7cc3;
    box-shadow: none;
    cursor: default;
}

.mw-slot.is-shown[b-809qunilfk] {
    background: linear-gradient(180deg, #fffdf7 0%, #fff1da 100%);
    box-shadow: 0 4px 0 #e6c597;
    color: #4527a0;
    cursor: default;
}

.mw-word.is-solved .mw-slot[b-809qunilfk] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 4px 0 #7cc35f;
    color: #2e7d32;
}

.mw-slot__letter[b-809qunilfk] {
    animation: mw-flip-b-809qunilfk 0.35s var(--ease-pop) both;
}

/* ---------- Pictures ---------- */
.mw-board[b-809qunilfk] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.mw-grid[b-809qunilfk] {
    --cols: 2;
    --rows: 2;
    --gap: 12px;
    --tile: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        150px);
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

/* Three pictures: two on top, one centred below. */
.mw-grid--3 .mw-tile:nth-child(3)[b-809qunilfk] {
    grid-column: 1 / span 2;
    justify-self: center;
}

.mw-pic[b-809qunilfk] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    height: 64%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mw-tile.is-missed .mw-pic[b-809qunilfk] {
    opacity: 0.35;
}

.mw-tile.is-missed[b-809qunilfk] {
    box-shadow: 0 2px 0 #e6c597;
}

@keyframes mw-deal-b-809qunilfk {
    from { transform: translateY(-12px) scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes mw-flip-b-809qunilfk {
    from { transform: rotateY(90deg) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Wider than tall: the word on top stays, the pictures in one row. */
@media (min-aspect-ratio: 1/1) {
    .mw-grid[b-809qunilfk] {
        --cols: 4;
        --rows: 1;
    }

    .mw-grid--3[b-809qunilfk] {
        --cols: 3;
    }

    .mw-grid--3 .mw-tile:nth-child(3)[b-809qunilfk] {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-slot[b-809qunilfk],
    .mw-slot__letter[b-809qunilfk] {
        animation: none;
    }
}
/* /Games/Mountain/Spelling/SpellingGame.razor.rz.scp.css */
/* „Напиши реч“: run bar, the picture (the question), the word's empty slots, and the letter tiles to build it from. */
.sp-play[b-i8a6sq1uak] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

/* ---------- The picture ---------- */
.sp-picture[b-i8a6sq1uak] {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
    width: clamp(84px, 17vh, 170px);
    aspect-ratio: 1;
    min-height: 0;
    border-radius: 26%;
    background: linear-gradient(180deg, #fbf8ff 0%, #ece4fb 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #b39ddb, 0 9px 16px rgba(61, 42, 28, 0.16);
    animation: sp-pop-in-b-i8a6sq1uak 0.5s var(--ease-pop) both;
}

.sp-picture img[b-i8a6sq1uak] {
    width: 70%;
    height: 70%;
    object-fit: contain;
    pointer-events: none;
}

/* ---------- The slots ---------- */
.sp-slots[b-i8a6sq1uak] {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ece4fb 0%, #dccff5 100%);
    box-shadow: inset 0 2px 4px rgba(69, 39, 160, 0.18);
}

.sp-slot[b-i8a6sq1uak] {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 60px;
    border-radius: 14px;
    border: 3px dashed #b39ddb;
    background: rgba(251, 248, 255, 0.7);
    font-size: 38px;
    font-weight: 1000;
    line-height: 1;
    color: #4527a0;
}

/* The slot that takes the next letter: a soft pulse, so the order reads without words. */
.sp-slot.is-next[b-i8a6sq1uak] {
    border-color: #7e57c2;
    animation: sp-next-b-i8a6sq1uak 1.2s ease-in-out infinite;
}

.sp-slot.is-filled[b-i8a6sq1uak] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #fffdf7 0%, #fff1da 100%);
    box-shadow: 0 4px 0 #e6c597;
}

.sp-slots.is-solved .sp-slot[b-i8a6sq1uak] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 4px 0 #7cc35f;
    color: #2e7d32;
}

.sp-slot__letter[b-i8a6sq1uak] {
    animation: sp-drop-b-i8a6sq1uak 0.3s var(--ease-pop) both;
}

/* The first words' help: the word, faint, to copy. */
.sp-slot__ghost[b-i8a6sq1uak] {
    color: #b39ddb;
    opacity: 0.6;
}

/* ---------- The letter tiles ---------- */
.sp-bank[b-i8a6sq1uak] {
    --cols: 3;
    flex: none;
    display: grid;
    grid-template-columns: repeat(var(--cols), 64px);
    gap: 10px;
    justify-content: center;
}

.sp-bank--4[b-i8a6sq1uak] {
    --cols: 4;
}

.sp-tile[b-i8a6sq1uak] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0 0 4px;
    border-radius: 18px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #b39ddb 0%, #7e57c2 100%);
    box-shadow: 0 5px 0 #5e35b1, 0 9px 14px rgba(69, 39, 160, 0.25);
    color: #fbf8ff;
    font: inherit;
    font-size: 36px;
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 2px 0 #5e35b1;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.3s var(--ease-pop), box-shadow 0.2s ease;
    animation: sp-deal-b-i8a6sq1uak 0.4s var(--ease-pop) calc(var(--i, 0) * 45ms) both;
}

.sp-tile:active:not(:disabled)[b-i8a6sq1uak] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #5e35b1, 0 3px 6px rgba(69, 39, 160, 0.25);
    transition-duration: 0.07s;
}

.sp-tile:disabled[b-i8a6sq1uak] {
    cursor: default;
}

/* Placed: the tile's place stays (the bank does not jump), the tile is gone. */
.sp-tile.is-used[b-i8a6sq1uak] {
    visibility: hidden;
}

.sp-tile.is-wrong[b-i8a6sq1uak] {
    background: linear-gradient(180deg, #ffab91 0%, #f4511e 100%);
    box-shadow: 0 5px 0 #c23a0d;
    text-shadow: 0 2px 0 #c23a0d;
    animation: sp-shake-b-i8a6sq1uak 0.45s ease both;
}

@keyframes sp-pop-in-b-i8a6sq1uak {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sp-deal-b-i8a6sq1uak {
    from { transform: translateY(16px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sp-drop-b-i8a6sq1uak {
    from { transform: translateY(-18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sp-next-b-i8a6sq1uak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes sp-shake-b-i8a6sq1uak {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Wider than tall: the picture to the left, slots and tiles to the right. */
@media (min-aspect-ratio: 1/1) {
    .sp-play[b-i8a6sq1uak] {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        place-content: center;
        column-gap: 24px;
        row-gap: 12px;
    }

    .sp-picture[b-i8a6sq1uak] {
        grid-row: 1 / span 2;
        width: clamp(96px, 34vh, 200px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-picture[b-i8a6sq1uak],
    .sp-tile[b-i8a6sq1uak],
    .sp-slot.is-next[b-i8a6sq1uak],
    .sp-slot__letter[b-i8a6sq1uak] {
        animation: none;
    }
}
/* /Games/Mountain/ThreeLetter/ReadPickGame.razor.rz.scp.css */
/* Read the word, tap its picture: run bar, the word card (the question), and a grid of picture tiles sized from the
   board (container units). Tiles reuse the shared .g-tile / .g-check pieces of GameScreen. */
.rp-play[b-6qp6tvumoc] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ---------- The word ---------- */
.rp-word[b-6qp6tvumoc] {
    flex: none;
    align-self: center;
    display: flex;
    align-items: baseline;
    padding: 4px 26px 10px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fbf8ff 0%, #ece4fb 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #b39ddb, 0 9px 16px rgba(61, 42, 28, 0.16);
    font-size: clamp(48px, 10vh, 96px);
    font-weight: 1000;
    line-height: 1;
    color: #4527a0;
    text-shadow: 0 4px 0 rgba(69, 39, 160, 0.18);
    animation: rp-word-in-b-6qp6tvumoc 0.5s var(--ease-pop) both;
}

.rp-syl--0[b-6qp6tvumoc] {
    color: #f4511e;
    text-shadow: 0 4px 0 rgba(194, 58, 13, 0.25);
}

.rp-syl--1[b-6qp6tvumoc] {
    color: #1e88e5;
    text-shadow: 0 4px 0 rgba(21, 95, 179, 0.25);
}

/* ---------- Board ---------- */
.rp-board[b-6qp6tvumoc] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.rp-grid[b-6qp6tvumoc] {
    --cols: 2;
    --rows: 1;
    --gap: 14px;
    --tile: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        170px);
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

/* Three pictures: two on top, one centred below (bigger than a row of three on a phone). */
.rp-grid--3[b-6qp6tvumoc] {
    --rows: 2;
}

.rp-grid--3 .rp-tile:nth-child(3)[b-6qp6tvumoc] {
    grid-column: 1 / span 2;
    justify-self: center;
}

.rp-grid--4[b-6qp6tvumoc] {
    --rows: 2;
}

.rp-tile[b-6qp6tvumoc] {
    overflow: visible;
}

.rp-pic[b-6qp6tvumoc] {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 64%;
    height: 64%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The word under its picture, once found. */
.rp-cap[b-6qp6tvumoc] {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 5%;
    padding: 1px 4px 2px;
    border-radius: 999px;
    background: rgba(255, 253, 247, 0.92);
    font-size: calc(var(--tile) * 0.17);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    color: #4527a0;
    white-space: nowrap;
    pointer-events: none;
    animation: rp-cap-in-b-6qp6tvumoc 0.35s var(--ease-pop) backwards;
}

.rp-tile.is-missed .rp-pic[b-6qp6tvumoc] {
    opacity: 0.35;
}

.rp-tile.is-missed[b-6qp6tvumoc] {
    box-shadow: 0 2px 0 #e6c597;
}

@keyframes rp-word-in-b-6qp6tvumoc {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rp-cap-in-b-6qp6tvumoc {
    from { transform: translateY(6px) scale(0.7); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Wider than tall: the pictures in one row, centred under the word (the board spans the full width, so the row sits
   in the middle of the screen). */
@media (min-aspect-ratio: 1/1) {
    .rp-grid--3[b-6qp6tvumoc] {
        --cols: 3;
        --rows: 1;
    }

    .rp-grid--3 .rp-tile:nth-child(3)[b-6qp6tvumoc] {
        grid-column: auto;
    }

    .rp-grid--4[b-6qp6tvumoc] {
        --cols: 4;
        --rows: 1;
    }
}

/* Landscape phone (too short for the word above the pictures): the word to the left, the pictures beside it. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .rp-play[b-6qp6tvumoc] {
        flex-direction: row;
        align-items: center;
    }

    .rp-word[b-6qp6tvumoc] {
        align-self: flex-start;
        font-size: clamp(40px, 13vh, 84px);
    }

    .rp-board[b-6qp6tvumoc] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-word[b-6qp6tvumoc],
    .rp-cap[b-6qp6tvumoc] {
        animation: none;
    }
}
/* /Games/Pages/CategoriseGame.razor.rz.scp.css */
/* „Шта иде заједно“: picture tiles sized from the board (container units), a basket below that fills. */
.ca-progress[b-ci1fjyr0kh] {
    flex: none;
    display: flex;
    justify-content: center;
}

.ca-board[b-ci1fjyr0kh] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.ca-tiles[b-ci1fjyr0kh] {
    --cols: 2;
    --rows: 3;
    --gap: 12px;
    --tile: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 14px) / var(--rows)),
        200px);
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile));
    gap: var(--gap);
    justify-content: center;
}

.ca-glyph[b-ci1fjyr0kh] {
    font-size: calc(var(--tile) * 0.52);
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-main);
    pointer-events: none;
}

/* ---------- Basket ---------- */
.ca-basket[b-ci1fjyr0kh] {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 22px;
    background: rgba(255, 232, 182, 0.6);
    box-shadow: inset 0 2px 6px rgba(61, 42, 28, 0.12);
}

.ca-basket.is-won[b-ci1fjyr0kh] {
    animation: ca-won-b-ci1fjyr0kh 0.6s var(--ease-pop) both;
}

.ca-basket__slots[b-ci1fjyr0kh] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ca-slot[b-ci1fjyr0kh] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 3px dashed #e6c597;
    background: rgba(255, 255, 255, 0.6);
}

.ca-slot.is-filled[b-ci1fjyr0kh] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 3px 0 #7cc35f;
    animation: ca-land-b-ci1fjyr0kh 0.4s var(--ease-pop) both;
}

.ca-slot.is-wrong[b-ci1fjyr0kh] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 3px 0 #f0a46b;
}

.ca-slot__glyph[b-ci1fjyr0kh] {
    font-size: 24px;
    line-height: 1;
}

.ca-basket__count[b-ci1fjyr0kh] {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 17px;
    font-weight: 900;
    color: var(--c-text);
}

@keyframes ca-land-b-ci1fjyr0kh {
    from { transform: translateY(-16px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ca-won-b-ci1fjyr0kh {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); background: rgba(201, 240, 180, 0.8); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-slot.is-filled[b-ci1fjyr0kh],
    .ca-basket.is-won[b-ci1fjyr0kh] {
        animation: none;
    }
}

/* Always six pictures: 2 × 3 on a portrait phone, 3 × 2 when the screen is wider than tall. */
@media (min-aspect-ratio: 1/1) {
    .ca-tiles[b-ci1fjyr0kh] {
        --cols: 3;
        --rows: 2;
    }
}
/* /Games/Pages/ConnectDotsGame.razor.rz.scp.css */
/* „Спој тачкице“: one big square pad (300×300 units, scaled to the panel) with numbered dots; the lines draw
   themselves in, the next dot pulses, the finished outline fills into a picture. */
.cd-progress[b-ly5u95fk8x] {
    flex: none;
    display: flex;
    justify-content: center;
}

.cd-padbox[b-ly5u95fk8x] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.cd-pad[b-ly5u95fk8x] {
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background:
        radial-gradient(rgba(244, 144, 12, 0.09) 1.6px, transparent 2.2px) 0 0 / 18px 18px,
        linear-gradient(180deg, #ffffff 0%, #fff7ea 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.cd-pad.is-done[b-ly5u95fk8x] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.cd-svg[b-ly5u95fk8x] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Lines ---------- */
.cd-seg[b-ly5u95fk8x],
.cd-band[b-ly5u95fk8x] {
    fill: none;
    stroke: var(--c-city-2);
    stroke-width: 8;
    stroke-linecap: round;
    pointer-events: none;
}

/* Each segment draws itself from its first dot to its second. */
.cd-seg[b-ly5u95fk8x] {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: cd-draw-b-ly5u95fk8x 0.35s ease-out forwards;
}

.cd-band[b-ly5u95fk8x] {
    stroke: #f4b26a;
    stroke-width: 6;
    stroke-dasharray: 2 12;
}

.cd-pad.is-done .cd-seg[b-ly5u95fk8x] {
    stroke: #ffffff;
    stroke-width: 4;
    stroke-opacity: 0.8;
}

/* ---------- Dots (rendered as markup, hence ::deep) ---------- */
.cd-svg[b-ly5u95fk8x]  .cd-dot__hit {
    fill: transparent;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot__face {
    fill: #ffffff;
    stroke: #c9a77a;
    stroke-width: 4;
    pointer-events: none;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot__num {
    fill: var(--c-text);
    font-family: var(--font-main);
    font-size: 19px;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-next .cd-dot__face {
    fill: #43a047;
    stroke: #ffffff;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-next .cd-dot__num {
    fill: #ffffff;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-done .cd-dot__face {
    fill: var(--c-city-2);
    stroke: #ffffff;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-done .cd-dot__num {
    fill: #ffffff;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot__ring {
    fill: none;
    stroke: #43a047;
    stroke-width: 4;
    transform-box: fill-box;
    transform-origin: center;
    animation: cd-ping-b-ly5u95fk8x 1.4s ease-out infinite;
    pointer-events: none;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-wrong {
    transform-box: fill-box;
    transform-origin: center;
    animation: cd-wiggle-b-ly5u95fk8x 0.5s ease both;
}

.cd-svg[b-ly5u95fk8x]  .cd-dot.is-wrong .cd-dot__face {
    fill: #ffd9bf;
    stroke: #f0a46b;
}

/* Done: the dots give way to the picture. */
.cd-svg[b-ly5u95fk8x]  .cd-dot {
    transition: opacity 0.5s ease 0.25s;
}

.cd-pad.is-done .cd-svg[b-ly5u95fk8x]  .cd-dot {
    opacity: 0;
}

/* The demo hand on the first dot (until the first touch). */
.cd-svg[b-ly5u95fk8x]  .cd-hand {
    pointer-events: none;
    animation: cd-tap-b-ly5u95fk8x 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- Reveal ---------- */
.cd-reveal[b-ly5u95fk8x] {
    transform-box: fill-box;
    transform-origin: center;
    animation: cd-reveal-b-ly5u95fk8x 0.6s var(--ease-pop) 0.15s both;
}

.cd-spark[b-ly5u95fk8x] {
    fill: #ffc93c;
    stroke: #f29f05;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: cd-spark-b-ly5u95fk8x 0.9s ease-out calc(var(--d, 0ms) + 300ms) both;
    pointer-events: none;
}

@keyframes cd-draw-b-ly5u95fk8x {
    to { stroke-dashoffset: 0; }
}

@keyframes cd-ping-b-ly5u95fk8x {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.2); opacity: 0; }
}

@keyframes cd-wiggle-b-ly5u95fk8x {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    45% { transform: translateX(7px); }
    70% { transform: translateX(-4px); }
}

@keyframes cd-reveal-b-ly5u95fk8x {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes cd-spark-b-ly5u95fk8x {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(40deg); opacity: 1; }
    100% { transform: scale(0.6) rotate(90deg); opacity: 0.85; }
}

@keyframes cd-tap-b-ly5u95fk8x {
    0%, 100% { transform: translate(0, 14px) scale(1); }
    40% { transform: translate(0, 0) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .cd-seg[b-ly5u95fk8x] {
        animation: none;
        stroke-dashoffset: 0;
    }

    .cd-svg[b-ly5u95fk8x]  .cd-dot__ring,
    .cd-svg[b-ly5u95fk8x]  .cd-dot.is-wrong,
    .cd-svg[b-ly5u95fk8x]  .cd-hand,
    .cd-reveal[b-ly5u95fk8x],
    .cd-spark[b-ly5u95fk8x] {
        animation: none;
    }
}
/* /Games/Pages/FindDifferences.razor.rz.scp.css */
/* „Пронађи разлике“: two square pictures, stacked in portrait / side by side when wide. Each picture is a size
   container's child sized min(width, height), so both always fit the panel. */
.fd-scenes[b-kw6m539h8q] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fd-scene[b-kw6m539h8q] {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    padding-top: 8px;
    container-type: size;
    display: grid;
    place-items: center;
}

.fd-frame[b-kw6m539h8q] {
    --side: min(100cqw, 100cqh);
    width: var(--side);
    height: var(--side);
    border-radius: 20px;
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.2);
    background: #fffdf6;
    overflow: hidden;
}

.fd-frame--tap[b-kw6m539h8q] {
    box-shadow: 0 5px 0 var(--c3), 0 0 0 4px var(--c1), 0 12px 20px rgba(21, 95, 179, 0.28);
}

.fd-svg[b-kw6m539h8q] {
    display: block;
    width: 100%;
    height: 100%;
}

.fd-frame--tap .fd-svg[b-kw6m539h8q] {
    cursor: pointer;
    touch-action: manipulation;
}

.fd-label[b-kw6m539h8q] {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    transform: translate(-50%, -30%);
    padding: 3px 12px 4px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 0 #f1dcc0;
    color: var(--c-text-soft);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
}

.fd-label--target[b-kw6m539h8q] {
    background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: 0 2px 0 var(--c3);
    color: #ffffff;
}

.fd-scene--target.is-nudge .fd-frame[b-kw6m539h8q] {
    animation: fd-nudge-b-kw6m539h8q 0.45s ease both;
}

/* A find: the ring pops in, a gold halo spreads and fades, eight sparkles fly out and fade. */
.fd-found[b-kw6m539h8q] {
    animation: fd-fade-b-kw6m539h8q 0.3s ease-out both;
}

.fd-ring[b-kw6m539h8q] {
    transform-box: fill-box;
    transform-origin: center;
    animation: fd-ring-b-kw6m539h8q 0.5s var(--ease-pop) both;
}

.fd-halo[b-kw6m539h8q] {
    transform-box: fill-box;
    transform-origin: center;
    animation: fd-halo-b-kw6m539h8q 0.9s ease-out both;
}

.fd-spark[b-kw6m539h8q] {
    animation: fd-spark-b-kw6m539h8q 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) var(--d, 0ms) both;
}

@keyframes fd-fade-b-kw6m539h8q {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fd-ring-b-kw6m539h8q {
    from { transform: scale(0.3); }
    to { transform: scale(1); }
}

@keyframes fd-halo-b-kw6m539h8q {
    from { transform: scale(0.6); opacity: 0.9; }
    to { transform: scale(1.9); opacity: 0; }
}

@keyframes fd-spark-b-kw6m539h8q {
    0% { transform: translateY(26px) scale(0.2); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(-14px) scale(1); opacity: 0; }
}

@keyframes fd-nudge-b-kw6m539h8q {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* Wide panels (tablet / landscape): side by side. */
@media (min-aspect-ratio: 1/1) {
    .fd-scenes[b-kw6m539h8q] {
        flex-direction: row;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-found[b-kw6m539h8q],
    .fd-ring[b-kw6m539h8q],
    .fd-spark[b-kw6m539h8q],
    .fd-halo[b-kw6m539h8q] {
        animation: none;
    }
}

.fd-progress[b-kw6m539h8q] {
    flex: none;
    display: flex;
    justify-content: center;
}

.fd-wrong[b-kw6m539h8q] {
    animation: fd-wrong-fade-b-kw6m539h8q 1.2s ease-out forwards;
}

@keyframes fd-wrong-fade-b-kw6m539h8q {
    0%, 40% { opacity: 1; }
    100% { opacity: 0; }
}
/* /Games/Pages/LineTracingGame.razor.rz.scp.css */
/* „Вуци линију“: one big drawing pad (300×300 guide units, scaled to fill the panel); strokes are judged when the finger lifts. */
.lt-progress[b-f238ndlzvd] {
    flex: none;
    display: flex;
    justify-content: center;
}

.lt-padbox[b-f238ndlzvd] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.lt-pad[b-f238ndlzvd] {
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background:
        linear-gradient(rgba(31, 155, 214, 0.08) 1px, transparent 1px) 0 0 / 100% 22px,
        linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.lt-pad.is-ok[b-f238ndlzvd] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
}

.lt-pad.is-low[b-f238ndlzvd] {
    box-shadow: 0 5px 0 #f0a46b, 0 0 0 4px rgba(244, 144, 12, 0.4), 0 10px 20px rgba(230, 81, 0, 0.2);
}

.lt-svg[b-f238ndlzvd] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.lt-guide-shadow[b-f238ndlzvd],
.lt-guide[b-f238ndlzvd],
.lt-ink[b-f238ndlzvd] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The corridor a stroke may wander in (≈ the 26-unit tolerance), then the dashed guide on it. */
.lt-guide-shadow[b-f238ndlzvd] {
    stroke: #ffe8b6;
    stroke-width: 34;
}

.lt-guide[b-f238ndlzvd] {
    stroke: #f4b26a;
    stroke-width: 6;
    stroke-dasharray: 2 12;
}

.lt-ink[b-f238ndlzvd] {
    stroke: var(--c-city-2);
    stroke-width: 9;
    pointer-events: none;
}

.lt-start[b-f238ndlzvd] {
    fill: #43a047;
    stroke: #ffffff;
    stroke-width: 4;
}

.lt-start-ring[b-f238ndlzvd] {
    fill: none;
    stroke: #43a047;
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: lt-ping-b-f238ndlzvd 1.6s ease-out infinite;
    pointer-events: none;
}

/* A good trace turns the ink green and sparkles pop along the line. */
.lt-pad.is-ok .lt-ink[b-f238ndlzvd] {
    stroke: #43a047;
}

.lt-spark[b-f238ndlzvd] {
    fill: #ffc93c;
    stroke: #f29f05;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: lt-spark-b-f238ndlzvd 0.9s ease-out var(--d, 0ms) both;
    pointer-events: none;
}

/* A miss: a soft wiggle while the ink fades away (never a harsh verdict). */
.lt-pad.is-low[b-f238ndlzvd] {
    animation: lt-wiggle-b-f238ndlzvd 0.45s ease-in-out;
}

.lt-pad.is-low .lt-ink[b-f238ndlzvd] {
    animation: lt-fade-b-f238ndlzvd 0.5s ease-out forwards;
}

@keyframes lt-spark-b-f238ndlzvd {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(40deg); opacity: 1; }
    100% { transform: scale(0.6) rotate(90deg); opacity: 0.85; }
}

@keyframes lt-fade-b-f238ndlzvd {
    to { opacity: 0; }
}

@keyframes lt-wiggle-b-f238ndlzvd {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes lt-ping-b-f238ndlzvd {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-start-ring[b-f238ndlzvd],
    .lt-pad.is-low[b-f238ndlzvd] {
        animation: none;
    }
}
/* /Games/Pages/MatchingShapes.razor.rz.scp.css */
/* „Упари сличице“: memory cards that flip. The board is a size container, so the square cards take the biggest
   size that fits all rows and columns on the panel (no scrolling on any phone). */
.ms-board[b-luypyumlm7] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.ms-grid[b-luypyumlm7] {
    --cols: var(--cols-p);
    --rows: var(--rows-p);
    --gap: 8px;
    --card: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 6px) / var(--rows)),
        150px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: var(--gap);
    width: calc(var(--cols) * var(--card) + (var(--cols) - 1) * var(--gap));
}

@media (orientation: landscape) {
    .ms-grid[b-luypyumlm7] {
        --cols: var(--cols-l);
        --rows: var(--rows-l);
    }
}

.ms-card[b-luypyumlm7] {
    position: relative;
    width: var(--card);
    height: var(--card);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 600px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: ms-deal-b-luypyumlm7 0.45s var(--ease-pop) calc(var(--i) * 35ms) both;
}

.ms-card:disabled[b-luypyumlm7] {
    cursor: default;
}

.ms-card__inner[b-luypyumlm7] {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.45s var(--ease-pop);
}

.ms-card.is-up .ms-card__inner[b-luypyumlm7] {
    transform: rotateY(180deg);
}

.ms-card__face[b-luypyumlm7] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 22%;
    border: 4px solid #ffffff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ms-card__back[b-luypyumlm7] {
    background:
        radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.6px) 0 0 / 12px 12px,
        linear-gradient(180deg, var(--c-beach-1) 0%, var(--c-beach-2) 100%);
    box-shadow: 0 5px 0 #155fb3, 0 9px 14px rgba(61, 42, 28, 0.2);
}

/* The friend's face in a soft white circle on the card back. */
.ms-card__friend[b-luypyumlm7] {
    display: grid;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 3px 0 rgba(21, 95, 179, 0.45);
}

.ms-card:active:not(:disabled) .ms-card__back[b-luypyumlm7] {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #155fb3, 0 4px 8px rgba(61, 42, 28, 0.2);
}

.ms-card__front[b-luypyumlm7] {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 14px rgba(61, 42, 28, 0.18);
}

.ms-card__front img[b-luypyumlm7] {
    width: 72%;
    height: 72%;
    object-fit: contain;
    pointer-events: none;
}

.ms-card.is-matched .ms-card__front[b-luypyumlm7] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 3px rgba(124, 195, 95, 0.35), 0 9px 16px rgba(67, 160, 71, 0.3);
}

.ms-card.is-matched[b-luypyumlm7] {
    animation: ms-win-b-luypyumlm7 0.5s var(--ease-pop) both;
}

.ms-card.is-wrong .ms-card__front[b-luypyumlm7] {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 14px rgba(230, 81, 0, 0.2);
}

.ms-card.is-wrong[b-luypyumlm7] {
    animation: ms-shake-b-luypyumlm7 0.5s ease both;
}

@keyframes ms-deal-b-luypyumlm7 {
    from { transform: translateY(20px) scale(0.5); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes ms-win-b-luypyumlm7 {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes ms-shake-b-luypyumlm7 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-3deg); }
    40% { transform: translateX(5px) rotate(3deg); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-card[b-luypyumlm7],
    .ms-card.is-matched[b-luypyumlm7],
    .ms-card.is-wrong[b-luypyumlm7] {
        animation: none;
    }

    .ms-card__inner[b-luypyumlm7] {
        transition-duration: 0.01s;
    }
}

.ms-progress[b-luypyumlm7] {
    flex: none;
    display: flex;
    justify-content: center;
}
/* /Games/Pages/MissingPartGame.razor.rz.scp.css */
/* „Шта фали“: one big drawing on a card, the parts to choose from in a row of tiles under it. The chosen part flies
   from its tile onto the drawing (games.js flyClone) and pops into place. */
.mp-progress[b-cvnmnsao3a] {
    flex: none;
    display: flex;
    justify-content: center;
}

.mp-stage[b-cvnmnsao3a] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.mp-picture[b-cvnmnsao3a] {
    width: min(100cqw, 100cqh, 360px);
    aspect-ratio: 1;
    border-radius: 28px;
    border: 4px solid #ffffff;
    background:
        radial-gradient(rgba(244, 144, 12, 0.08) 1.6px, transparent 2.2px) 0 0 / 18px 18px,
        linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 10px 20px rgba(61, 42, 28, 0.2);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    animation: mp-in-b-cvnmnsao3a 0.4s var(--ease-pop) both;
}

.mp-picture.is-ok[b-cvnmnsao3a] {
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 4px rgba(124, 195, 95, 0.55), 0 10px 20px rgba(67, 160, 71, 0.3);
    animation: mp-hop-b-cvnmnsao3a 0.7s var(--ease-pop) 0.05s both;
}

.mp-picture.is-nudge[b-cvnmnsao3a] {
    animation: mp-nudge-b-cvnmnsao3a 0.45s ease both;
}

.mp-svg[b-cvnmnsao3a] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6%;
    overflow: visible;
}

/* The missing part: in the drawing from the start, invisible, so the flight has a target; it pops in when found. */
.mp-part[b-cvnmnsao3a] {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
}

.mp-part.is-on[b-cvnmnsao3a] {
    opacity: 1;
    animation: mp-pop-b-cvnmnsao3a 0.5s var(--ease-pop) both;
}

/* ---------- Parts to choose from ---------- */
.mp-options[b-cvnmnsao3a] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 6px;
}

.mp-option[b-cvnmnsao3a] {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    border-radius: 24px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), opacity 0.2s ease;
    animation: mp-deal-b-cvnmnsao3a 0.45s var(--ease-pop) calc(var(--i, 0) * 60ms) both;
}

.mp-option__art[b-cvnmnsao3a] {
    display: block;
    width: 76%;
    height: 76%;
    overflow: visible;
    pointer-events: none;
}

.mp-option:active:not(:disabled)[b-cvnmnsao3a] {
    transform: translateY(4px) scale(0.94);
    box-shadow: 0 1px 0 #e6c597, 0 4px 8px rgba(61, 42, 28, 0.2);
    transition-duration: 0.07s;
}

/* While the part flies (a clone of the art), the tile shows an empty face. */
.mp-option.is-flying .mp-option__art[b-cvnmnsao3a] {
    opacity: 0;
}

.mp-option.is-ok[b-cvnmnsao3a] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 0 0 5px rgba(124, 195, 95, 0.5);
    animation: mp-hop-b-cvnmnsao3a 0.6s var(--ease-pop) both;
}

.mp-option.is-no[b-cvnmnsao3a] {
    background: linear-gradient(180deg, #d9cfc2 0%, #b9aa98 100%);
    box-shadow: 0 3px 0 #9c8b77;
    opacity: 0.55;
    cursor: default;
    animation: mp-wiggle-b-cvnmnsao3a 0.45s ease-in-out;
}

/* The demo hand on the right part (until the first touch). */
.mp-hand[b-cvnmnsao3a] {
    position: absolute;
    left: 50%;
    top: 46%;
    font-size: 50px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: mp-tap-b-cvnmnsao3a 1.4s ease-in-out 0.8s infinite both;
}

@keyframes mp-in-b-cvnmnsao3a {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes mp-deal-b-cvnmnsao3a {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes mp-hop-b-cvnmnsao3a {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-12px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes mp-pop-b-cvnmnsao3a {
    0% { transform: scale(1.6); opacity: 0.5; }
    60% { transform: scale(0.92); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mp-nudge-b-cvnmnsao3a {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

@keyframes mp-wiggle-b-cvnmnsao3a {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes mp-tap-b-cvnmnsao3a {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

/* Short screens: smaller tiles so the drawing stays big. */
@media (max-height: 640px) {
    .mp-option[b-cvnmnsao3a] { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-picture[b-cvnmnsao3a],
    .mp-picture.is-ok[b-cvnmnsao3a],
    .mp-picture.is-nudge[b-cvnmnsao3a],
    .mp-part.is-on[b-cvnmnsao3a],
    .mp-option[b-cvnmnsao3a],
    .mp-option.is-ok[b-cvnmnsao3a],
    .mp-option.is-no[b-cvnmnsao3a] {
        animation: none;
    }

    .mp-hand[b-cvnmnsao3a] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/Pages/SameOrDifferentGame.razor.rz.scp.css */
/* „Исто или различито“: two shape cards side by side, sized from the stage (container units), and the two big
   answer buttons (= and ≠) under them. Animations are transform / opacity only. */
.sd-progress[b-sysse4kwd2] {
    flex: none;
    display: flex;
    justify-content: center;
}

.sd-stage[b-sysse4kwd2] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sd-pair[b-sysse4kwd2] {
    --gap: 16px;
    --card: min(calc((100cqw - var(--gap) - 8px) / 2), calc(100cqh - 12px), 200px);
    display: flex;
    gap: var(--gap);
}

.sd-card[b-sysse4kwd2] {
    display: grid;
    place-items: center;
    width: var(--card);
    height: var(--card);
    border-radius: 24%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    animation: sd-deal-b-sysse4kwd2 0.45s var(--ease-pop) calc(var(--k, 0) * 90ms) both;
}

.sd-card svg[b-sysse4kwd2] {
    display: block;
    width: 74%;
    height: 74%;
    overflow: visible;
    pointer-events: none;
}

.sd-pair.is-ok .sd-card[b-sysse4kwd2] {
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 5px 0 #7cc35f, 0 9px 16px rgba(67, 160, 71, 0.25);
    animation: sd-hop-b-sysse4kwd2 0.6s var(--ease-pop) calc(var(--k, 0) * 100ms) both;
}

.sd-pair.is-no .sd-card[b-sysse4kwd2] {
    animation: sd-shake-b-sysse4kwd2 0.5s ease both;
}

/* ---------- Answers ---------- */
.sd-answers[b-sysse4kwd2] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 4px 0 6px;
}

.sd-answer[b-sysse4kwd2] {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 76px;
    margin: 0;
    padding: 0;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--c-beach-1) 0%, var(--c-beach-2) 100%);
    box-shadow: 0 5px 0 #1565c0, 0 9px 16px rgba(61, 42, 28, 0.22);
    color: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-pop), opacity 0.2s ease;
}

.sd-answer svg[b-sysse4kwd2] {
    width: 52px;
    height: 52px;
    pointer-events: none;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.22));
}

.sd-answer:active:not(:disabled)[b-sysse4kwd2] {
    transform: translateY(4px) scale(0.94);
    box-shadow: 0 1px 0 #1565c0, 0 4px 8px rgba(61, 42, 28, 0.2);
    transition-duration: 0.07s;
}

.sd-answer.is-ok[b-sysse4kwd2] {
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 5px 0 #2c7a31, 0 0 0 5px rgba(124, 195, 95, 0.5);
    animation: sd-hop-b-sysse4kwd2 0.6s var(--ease-pop) both;
}

/* After a miss: the right answer shows itself, a beat later. */
.sd-answer.is-shown[b-sysse4kwd2] {
    animation: sd-show-b-sysse4kwd2 0.9s var(--ease-pop) 0.3s both;
}

.sd-answer.is-no[b-sysse4kwd2] {
    background: linear-gradient(180deg, #d9cfc2 0%, #b9aa98 100%);
    box-shadow: 0 3px 0 #9c8b77;
    opacity: 0.6;
    animation: sd-shake-b-sysse4kwd2 0.45s ease-in-out;
}

/* The demo hand on the right answer (until the first touch). */
.sd-hand[b-sysse4kwd2] {
    position: absolute;
    left: 50%;
    top: 40%;
    font-size: 50px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: sd-tap-b-sysse4kwd2 1.4s ease-in-out 0.8s infinite both;
}

@keyframes sd-deal-b-sysse4kwd2 {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sd-hop-b-sysse4kwd2 {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-12px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes sd-show-b-sysse4kwd2 {
    0% { transform: scale(1); }
    30% { transform: scale(1.12); }
    60% { transform: scale(1); }
    80% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes sd-shake-b-sysse4kwd2 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

@keyframes sd-tap-b-sysse4kwd2 {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .sd-card[b-sysse4kwd2],
    .sd-pair.is-ok .sd-card[b-sysse4kwd2],
    .sd-pair.is-no .sd-card[b-sysse4kwd2],
    .sd-answer.is-ok[b-sysse4kwd2],
    .sd-answer.is-shown[b-sysse4kwd2],
    .sd-answer.is-no[b-sysse4kwd2] {
        animation: none;
    }

    .sd-hand[b-sysse4kwd2] { animation: none; transform: translate(-30%, 12px); }
}
/* /Games/Pages/SequencingGame.razor.rz.scp.css */
/* „Редослед“: the shuffled picture cards in a pool sized from the board (container units), the timeline of slots
   with arrows under it. Cards fly into the slots (games.js flyClone); everything else is transform / opacity. */
.sq-progress[b-h6689yq92i] {
    flex: none;
    display: flex;
    justify-content: center;
}

.sq-board[b-h6689yq92i] {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.sq-pool[b-h6689yq92i] {
    --gap: 14px;
    --card: min(
        calc((100cqw - (var(--cols) - 1) * var(--gap) - 8px) / var(--cols)),
        calc((100cqh - (var(--rows) - 1) * var(--gap) - 12px) / var(--rows)),
        170px);
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--card));
    gap: var(--gap);
    justify-content: center;
}

/* ---------- Cards ---------- */
.sq-card[b-h6689yq92i] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--card);
    height: var(--card);
    margin: 0;
    padding: 0;
    border-radius: 22%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fff4e2 100%);
    box-shadow: 0 5px 0 #e6c597, 0 9px 16px rgba(61, 42, 28, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.2s ease, opacity 0.2s ease;
    animation: sq-deal-b-h6689yq92i 0.45s var(--ease-pop) calc(var(--i, 0) * 60ms) both;
}

.sq-card img[b-h6689yq92i] {
    width: 84%;
    height: 84%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.sq-card:active:not(:disabled)[b-h6689yq92i] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 #e6c597, 0 4px 8px rgba(61, 42, 28, 0.18);
    transition-duration: 0.07s;
}

/* Placed (or in flight): the card leaves a soft dashed outline behind, so the pool keeps its shape. */
.sq-card.is-gone[b-h6689yq92i] {
    border: 4px dashed #e6c597;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
    cursor: default;
    animation: none;
}

.sq-card.is-gone img[b-h6689yq92i] {
    opacity: 0;
}

.sq-card.is-wrong[b-h6689yq92i] {
    background: linear-gradient(180deg, #fff1e6 0%, #ffd9bf 100%);
    box-shadow: 0 5px 0 #f0a46b, 0 9px 16px rgba(230, 81, 0, 0.2);
    animation: sq-shake-b-h6689yq92i 0.5s ease both;
}

/* The demo hand on the picture that comes first (until the first touch). */
.sq-hand[b-h6689yq92i] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 52px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 4px 6px rgba(61, 42, 28, 0.35));
    pointer-events: none;
    animation: sq-tap-b-h6689yq92i 1.4s ease-in-out 0.8s infinite both;
}

/* ---------- Timeline ---------- */
.sq-line[b-h6689yq92i] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 24px;
    background: rgba(255, 232, 182, 0.6);
    box-shadow: inset 0 2px 6px rgba(61, 42, 28, 0.12);
}

.sq-line.is-won[b-h6689yq92i] {
    animation: sq-won-b-h6689yq92i 0.6s var(--ease-pop) both;
}

.sq-slot[b-h6689yq92i] {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    border: 3px dashed #e6c597;
    background: rgba(255, 255, 255, 0.6);
}

.sq-slot img[b-h6689yq92i] {
    width: 86%;
    height: 86%;
    object-fit: contain;
    pointer-events: none;
}

.sq-slot.is-filled[b-h6689yq92i] {
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #e9fbe0 0%, #c9f0b4 100%);
    box-shadow: 0 3px 0 #7cc35f;
    animation: sq-land-b-h6689yq92i 0.4s var(--ease-pop) both;
}

.sq-line.is-won .sq-slot.is-filled[b-h6689yq92i] {
    animation: sq-hop-b-h6689yq92i 0.6s var(--ease-pop) calc(var(--k) * 110ms) both;
}

/* Empty slot: as many pips as its place (first, second, third…), for children who do not read numbers. */
.sq-pips[b-h6689yq92i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 4px;
    width: 34px;
}

.sq-pip[b-h6689yq92i] {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #e6c597;
}

.sq-pips--1 .sq-pip[b-h6689yq92i] { width: 14px; height: 14px; }

.sq-arrow[b-h6689yq92i] {
    flex: none;
    width: 22px;
    height: 22px;
    color: #c9a77a;
}

@keyframes sq-deal-b-h6689yq92i {
    from { transform: translateY(18px) scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sq-shake-b-h6689yq92i {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes sq-land-b-h6689yq92i {
    from { transform: scale(1.25); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

@keyframes sq-hop-b-h6689yq92i {
    0%, 100% { transform: none; }
    40% { transform: translateY(-12px) scale(1.1); }
}

@keyframes sq-won-b-h6689yq92i {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); background: rgba(201, 240, 180, 0.8); }
    100% { transform: scale(1); }
}

@keyframes sq-tap-b-h6689yq92i {
    0%, 100% { transform: translate(-30%, 26px) scale(1); }
    40% { transform: translate(-30%, 0) scale(0.9); }
}

/* Short screens: smaller slots so the pool keeps its cards big. */
@media (max-height: 640px) {
    .sq-slot[b-h6689yq92i] { width: 52px; height: 52px; }
    .sq-line[b-h6689yq92i] { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sq-card[b-h6689yq92i],
    .sq-card.is-wrong[b-h6689yq92i],
    .sq-slot.is-filled[b-h6689yq92i],
    .sq-line.is-won[b-h6689yq92i],
    .sq-line.is-won .sq-slot.is-filled[b-h6689yq92i] {
        animation: none;
    }

    .sq-hand[b-h6689yq92i] { animation: none; transform: translate(-30%, 12px); }
}
/* /Pages/BiomePreview.razor.rz.scp.css */
/* DEV ONLY page: full-screen backdrop + home layout guides + biome switcher in the dock band. */
.bp[b-wmgvbae00w] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bp-hud[b-wmgvbae00w],
.bp-stage[b-wmgvbae00w] {
    position: absolute;
    left: var(--safe-left);
    right: calc(var(--safe-right) + var(--dock-w));
    z-index: var(--z-hud);
    border: 2px dashed rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

.bp-hud[b-wmgvbae00w] {
    top: var(--safe-top);
    height: var(--hud-top-h);
}

.bp-stage[b-wmgvbae00w] {
    top: calc(var(--safe-top) + var(--hud-top-h));
    bottom: calc(var(--safe-bottom) + var(--dock-h));
    border-color: rgba(255, 255, 255, 0.35);
}

/* Where the companion's feet land (7 % above the bottom of the stage). */
.bp-feet[b-wmgvbae00w] {
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: min(34%, 150px);
    aspect-ratio: 3 / 1;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 60, 30, 0.38), rgba(40, 60, 30, 0));
}

.bp-tag[b-wmgvbae00w] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
}

.bp-dock[b-wmgvbae00w] {
    position: absolute;
    left: var(--safe-left);
    right: calc(var(--safe-right) + var(--dock-w));
    bottom: var(--safe-bottom);
    height: var(--dock-h);
    z-index: var(--z-hud);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bp-btn[b-wmgvbae00w] {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: var(--radius-m);
    background: rgba(255, 250, 240, 0.86);
    box-shadow: var(--shadow-pop);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s var(--ease-pop);
}

.bp-btn.is-on[b-wmgvbae00w] {
    background: var(--c-gold);
    transform: translateY(-6px) scale(1.06);
}
/* /Pages/FriendPicker.razor.rz.scp.css */
/* Friend picker. Phone portrait first: title band on top, live 3D stage in the middle, a 3x2 card grid and the
   confirm button in the bottom panel. --hud-top-h / --dock-h are overridden for this page so SceneBackdrop
   centres its sunlit clearing under this stage. */
.picker[b-rlt91d4vqg] {
    --head-h: 64px;
    --panel-h: 372px;
    --card-h: 116px;
    --hud-top-h: var(--head-h);
    --dock-h: var(--panel-h);
    --dock-w: 0px;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ---------- Per-friend colours (light, main, dark) ---------- */
.card--fox[b-rlt91d4vqg], .picker__name--fox[b-rlt91d4vqg], .picker__ok--fox[b-rlt91d4vqg]       { --f1: #ffc46b; --f2: #f4900c; --f3: #c25e00; }
.card--bear[b-rlt91d4vqg], .picker__name--bear[b-rlt91d4vqg], .picker__ok--bear[b-rlt91d4vqg]    { --f1: #d9a679; --f2: #a8693d; --f3: #6e4224; }
.card--dog[b-rlt91d4vqg], .picker__name--dog[b-rlt91d4vqg], .picker__ok--dog[b-rlt91d4vqg]       { --f1: #7cc4ff; --f2: #2f8fe0; --f3: #15609f; }
.card--cat[b-rlt91d4vqg], .picker__name--cat[b-rlt91d4vqg], .picker__ok--cat[b-rlt91d4vqg]       { --f1: #d2b0ff; --f2: #9b6cd6; --f3: #6a3fa6; }
.card--lion[b-rlt91d4vqg], .picker__name--lion[b-rlt91d4vqg], .picker__ok--lion[b-rlt91d4vqg]    { --f1: #ffdf6b; --f2: #f2a900; --f3: #b87400; }
.card--panda[b-rlt91d4vqg], .picker__name--panda[b-rlt91d4vqg], .picker__ok--panda[b-rlt91d4vqg] { --f1: #9ee08a; --f2: #4caf50; --f3: #2e7d32; }

/* ---------- Title band ---------- */
.picker__head[b-rlt91d4vqg] {
    position: absolute;
    top: var(--safe-top);
    left: var(--safe-left);
    right: var(--safe-right);
    height: var(--head-h);
    z-index: var(--z-hud);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
}

.picker__title[b-rlt91d4vqg] {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(22px, 6.4vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.3px;
    text-align: center;
    color: #ffffff;
    text-shadow:
        0 2px 0 #b34d00, 0 -2px 0 #b34d00, 2px 0 0 #b34d00, -2px 0 0 #b34d00,
        1.5px 1.5px 0 #b34d00, -1.5px 1.5px 0 #b34d00, 1.5px -1.5px 0 #b34d00, -1.5px -1.5px 0 #b34d00,
        0 4px 0 #b34d00, 0 8px 14px rgba(61, 42, 28, 0.3);
    animation: picker-pop-b-rlt91d4vqg 0.6s var(--ease-pop) both;
}

.picker__back[b-rlt91d4vqg] {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 10px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #ffb347 0%, #f4900c 100%);
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.22);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
}

.picker__back:active[b-rlt91d4vqg] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

/* ---------- Live 3D stage ---------- */
.picker__stage[b-rlt91d4vqg] {
    position: absolute;
    top: calc(var(--safe-top) + var(--head-h));
    bottom: calc(var(--safe-bottom) + var(--panel-h));
    left: var(--safe-left);
    right: var(--safe-right);
    z-index: var(--z-stage);
    opacity: 0;
    transform: translateY(24px) scale(0.94);
    transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-pop);
}

.picker__stage.is-ready[b-rlt91d4vqg] {
    opacity: 1;
    transform: none;
}

.picker__canvas[b-rlt91d4vqg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    outline: none;
}

/* Shown only when WebGL is unavailable; re-pops on every selection (keyed). */
.picker__fallback[b-rlt91d4vqg] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: min(40vw, 22vh);
    line-height: 1;
    animation: picker-pop-b-rlt91d4vqg 0.55s var(--ease-pop) both;
}

/* Big name plate just under the friend's feet; re-pops on every selection (keyed). */
.picker__name[b-rlt91d4vqg] {
    position: absolute;
    left: 50%;
    bottom: -22px;
    z-index: 2;
    padding: 4px 22px 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--f1) 0%, var(--f2) 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 5px 0 var(--f3), 0 10px 18px rgba(61, 42, 28, 0.28);
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 2px 0 var(--f3), 0 -1px 0 var(--f3), 1px 0 0 var(--f3), -1px 0 0 var(--f3);
    pointer-events: none;
    transform: translateX(-50%);
    animation: name-pop-b-rlt91d4vqg 0.5s var(--ease-pop) both;
}

/* ---------- Bottom panel: card grid + confirm ---------- */
.picker__panel[b-rlt91d4vqg] {
    position: absolute;
    left: var(--safe-left);
    right: var(--safe-right);
    bottom: 0;
    z-index: var(--z-hud);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    max-width: 560px;
    height: calc(var(--panel-h) + var(--safe-bottom));
    margin: 0 auto;
    padding: 34px 16px calc(14px + var(--safe-bottom));
}

.picker__grid[b-rlt91d4vqg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--card-h);
    gap: 10px;
}

.card[b-rlt91d4vqg] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 96px;
    margin: 0;
    padding: 4px 4px 6px;
    border-radius: 24px;
    border: 4px solid #ffffff;
    background:
        radial-gradient(70% 58% at 50% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, var(--f1) 0%, #fff6e6 100%);
    box-shadow: 0 5px 0 var(--f3), 0 10px 16px rgba(61, 42, 28, 0.22);
    cursor: pointer;
    transition: transform 0.4s var(--ease-pop), box-shadow 0.2s ease-out;
}

.card:active[b-rlt91d4vqg] {
    transform: translateY(4px) scale(0.95);
    box-shadow: 0 1px 0 var(--f3), 0 4px 8px rgba(61, 42, 28, 0.2);
    transition-duration: 0.07s;
}

.card:focus-visible[b-rlt91d4vqg] {
    outline: 3px solid var(--c-text);
    outline-offset: 3px;
}

.card__art[b-rlt91d4vqg] {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
}

.card__img[b-rlt91d4vqg] {
    position: absolute;
    inset: -2px 0 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    animation: card-img-in-b-rlt91d4vqg 0.4s var(--ease-out) both;
}

.card__emoji[b-rlt91d4vqg] {
    font-size: calc(var(--card-h) * 0.46);
    line-height: 1;
}

.card__name[b-rlt91d4vqg] {
    position: relative;
    flex: none;
    padding: 1px 12px 3px;
    border-radius: 999px;
    background: var(--f2);
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1.5px 0 var(--f3);
}

/* Selected: lifted, ring around the card and a check badge. The ring pops in with a bounce. */
.card.is-selected[b-rlt91d4vqg] {
    transform: translateY(-3px) scale(1.04);
    z-index: 1;
}

.card.is-selected:active[b-rlt91d4vqg] {
    transform: translateY(1px) scale(0.98);
}

.card.is-selected[b-rlt91d4vqg]::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 31px;
    border: 5px solid var(--f2);
    box-shadow: 0 0 0 3px #ffffff, 0 0 18px 4px rgba(255, 255, 255, 0.85);
    pointer-events: none;
    animation: ring-pop-b-rlt91d4vqg 0.5s var(--ease-pop) both;
}

.card.is-selected[b-rlt91d4vqg]::after {
    content: "✓";
    position: absolute;
    top: -12px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #43a047;
    box-shadow: 0 3px 0 #2c7a31;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    animation: check-pop-b-rlt91d4vqg 0.45s var(--ease-pop) 0.08s both;
}

/* ---------- Confirm candy button (in the selected friend's colour) ---------- */
.picker__ok[b-rlt91d4vqg] {
    position: relative;
    flex: none;
    display: block;
    width: 100%;
    height: 68px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.picker__ok-base[b-rlt91d4vqg],
.picker__ok-face[b-rlt91d4vqg] {
    position: absolute;
    left: 0;
    right: 0;
    height: 62px;
    border-radius: 24px;
    border: 4px solid #ffffff;
}

.picker__ok-base[b-rlt91d4vqg] {
    top: 6px;
    background: var(--f3);
    box-shadow: 0 6px 14px rgba(61, 42, 28, 0.28);
}

.picker__ok-face[b-rlt91d4vqg] {
    top: 0;
    display: grid;
    place-items: center;
    padding: 0 10px;
    background: linear-gradient(180deg, var(--f1) 0%, var(--f2) 100%);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: clamp(20px, 6vw, 26px);
    font-weight: 900;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-shadow:
        0 1.5px 0 var(--f3), 0 -1.5px 0 var(--f3), 1.5px 0 0 var(--f3), -1.5px 0 0 var(--f3),
        1px 1px 0 var(--f3), -1px 1px 0 var(--f3), 1px -1px 0 var(--f3), -1px -1px 0 var(--f3),
        0 3px 0 var(--f3);
    transform-origin: 50% 100%;
    transition: transform 0.4s var(--ease-pop), background 0.3s ease-out;
}

.picker__ok:active .picker__ok-face[b-rlt91d4vqg] {
    transform: translateY(5px) scale(1.02, 0.95);
    transition-duration: 0.07s;
}

.picker__ok:focus-visible[b-rlt91d4vqg] {
    outline: none;
}

.picker__ok:focus-visible .picker__ok-face[b-rlt91d4vqg] {
    outline: 3px solid var(--c-text);
    outline-offset: 3px;
}

/* ---------- Keyframes ---------- */
@keyframes picker-pop-b-rlt91d4vqg {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes name-pop-b-rlt91d4vqg {
    0% { transform: translateX(-50%) scale(0.4); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.12); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes ring-pop-b-rlt91d4vqg {
    0% { transform: scale(0.82); opacity: 0; }
    55% { transform: scale(1.06); opacity: 1; }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes check-pop-b-rlt91d4vqg {
    0% { transform: scale(0) rotate(-40deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes card-img-in-b-rlt91d4vqg {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Form factors ---------- */

/* Short phones (e.g. 360x640): smaller cards so the stage keeps some room. */
@media (orientation: portrait) and (max-height: 720px) {
    .picker[b-rlt91d4vqg] {
        --head-h: 56px;
        --panel-h: 318px;
        --card-h: 98px;
    }

    .picker__panel[b-rlt91d4vqg] {
        gap: 12px;
        padding-top: 30px;
    }

    .picker__name[b-rlt91d4vqg] {
        font-size: 26px;
    }
}

/* Phone landscape: stage on the left, cards and button on the right. */
@media (orientation: landscape) and (max-height: 560px) {
    .picker[b-rlt91d4vqg] {
        --head-h: 52px;
        --panel-h: 0px;
        --card-h: calc((100dvh - var(--safe-top) - var(--safe-bottom) - 112px) / 2);
        --dock-w: 50vw;
    }

    .picker__head[b-rlt91d4vqg] {
        right: 50%;
    }

    .picker__title[b-rlt91d4vqg] {
        font-size: 24px;
    }

    .picker__stage[b-rlt91d4vqg] {
        right: 50%;
        bottom: calc(var(--safe-bottom) + 34px);
    }

    .picker__name[b-rlt91d4vqg] {
        bottom: -26px;
        font-size: 24px;
    }

    .picker__panel[b-rlt91d4vqg] {
        top: var(--safe-top);
        left: 50%;
        right: var(--safe-right);
        height: auto;
        max-width: none;
        justify-content: center;
        gap: 10px;
        padding: 14px 16px calc(10px + var(--safe-bottom)) 8px;
    }

    .picker__ok[b-rlt91d4vqg] {
        height: 62px;
    }

    .picker__ok-base[b-rlt91d4vqg],
    .picker__ok-face[b-rlt91d4vqg] {
        height: 56px;
    }

    .picker__ok-face[b-rlt91d4vqg] {
        font-size: 22px;
    }
}

/* Tablet / desktop: everything a size up, the panel stays a centred column. */
@media (min-width: 768px) and (min-height: 700px) {
    .picker[b-rlt91d4vqg] {
        --head-h: 84px;
        --panel-h: 446px;
        --card-h: 150px;
    }

    .picker__panel[b-rlt91d4vqg] {
        gap: 18px;
        padding-top: 40px;
    }

    .picker__grid[b-rlt91d4vqg] {
        gap: 16px;
    }

    .card__name[b-rlt91d4vqg] {
        font-size: 20px;
    }

    .picker__name[b-rlt91d4vqg] {
        font-size: 38px;
        bottom: -26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .picker__stage[b-rlt91d4vqg] {
        transition: opacity 0.3s linear;
        transform: none;
    }

    .picker__title[b-rlt91d4vqg],
    .picker__fallback[b-rlt91d4vqg],
    .card__img[b-rlt91d4vqg],
    .card.is-selected[b-rlt91d4vqg]::before,
    .card.is-selected[b-rlt91d4vqg]::after {
        animation: none;
    }

    .picker__name[b-rlt91d4vqg] {
        animation: none;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Home screen root: every layer is positioned inside this full-screen box (see app.css for the layout bands). */
.home[b-g9wfjqv546] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* The box between the top HUD band and the bottom menu band; the 3D canvas fills it and the speech bubble
   is positioned inside it. The 3D module writes --avatar-head-x / --avatar-head-y / --avatar-top on it. */
.companion-stage[b-g9wfjqv546] {
    position: absolute;
    top: calc(var(--safe-top) + var(--hud-top-h));
    bottom: calc(var(--safe-bottom) + var(--dock-h));
    left: var(--safe-left);
    right: calc(var(--safe-right) + var(--dock-w));
    z-index: var(--z-stage);
    opacity: 0;
    transform: translateY(28px) scale(0.94);
    transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-pop);
}

.companion-stage.is-ready[b-g9wfjqv546] {
    opacity: 1;
    transform: none;
}

.companion-canvas[b-g9wfjqv546] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    outline: none;
}

/* Shown only when WebGL is unavailable. */
.companion-fallback[b-g9wfjqv546] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: min(42vw, 30vh);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .companion-stage[b-g9wfjqv546] {
        transition: opacity 0.3s linear;
        transform: none;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* Profile: back button, the friend big with level + stars and a swap button, then sticker and game cards. */
.pf[b-tdoo2nlow4] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);
}

.pf--fox[b-tdoo2nlow4]   { --ring: #f4900c; --ring-dark: #c96a05; }
.pf--bear[b-tdoo2nlow4]  { --ring: #a1704f; --ring-dark: #6d4c41; }
.pf--dog[b-tdoo2nlow4]   { --ring: #e0a458; --ring-dark: #a86f2c; }
.pf--cat[b-tdoo2nlow4]   { --ring: #9e9eb8; --ring-dark: #6b6b88; }
.pf--lion[b-tdoo2nlow4]  { --ring: #f9b233; --ring-dark: #c27c00; }
.pf--panda[b-tdoo2nlow4] { --ring: #4a4a4a; --ring-dark: #1f1f1f; }

.pf__head[b-tdoo2nlow4] {
    position: relative;
    z-index: var(--z-stage);
    flex: none;
    display: flex;
}

.pf__back[b-tdoo2nlow4] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 11px 13px 11px 9px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    box-shadow: 0 4px 0 #c96a05, 0 8px 14px rgba(61, 42, 28, 0.25);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
}

.pf__back:active[b-tdoo2nlow4] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

.pf__body[b-tdoo2nlow4] {
    position: relative;
    z-index: var(--z-stage);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- Hero ---------- */
.pf-hero[b-tdoo2nlow4] {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0 4px;
}

.pf-hero__face[b-tdoo2nlow4] {
    display: grid;
    place-items: center;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    background: radial-gradient(circle at 40% 30%, #fffdf6 0%, #ffe8b6 75%, #ffd38a 100%);
    box-shadow: 0 0 0 6px var(--ring), 0 8px 0 6px var(--ring-dark), 0 16px 28px rgba(61, 42, 28, 0.3);
    overflow: hidden;
    animation: pf-pop-b-tdoo2nlow4 0.6s var(--ease-pop) both;
}

.pf-hero__face img[b-tdoo2nlow4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15) translateY(4%);
}

.pf-hero__emoji[b-tdoo2nlow4] {
    font-size: 88px;
    line-height: 1;
}

.pf-hero__name[b-tdoo2nlow4] {
    margin-top: 10px;
    padding: 4px 18px 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--c-fox-light) 0%, var(--c-fox) 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 0 #c96a05;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    text-shadow: 0 2px 0 rgba(150, 70, 0, 0.5);
}

.pf-hero__stats[b-tdoo2nlow4] {
    display: flex;
    gap: 12px;
}

.pf-stat[b-tdoo2nlow4] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px 0 6px;
    border-radius: 999px;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #fffdf6 0%, #fff0d2 100%);
    box-shadow: 0 4px 0 #e0ac5f, 0 8px 14px rgba(61, 42, 28, 0.2);
    font-size: 24px;
    font-weight: 900;
    color: var(--c-text);
}

.pf-stat--level[b-tdoo2nlow4] {
    padding: 0 6px;
}

.pf-stat__badge[b-tdoo2nlow4] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffd98a 0%, #ffad33 46%, #f27a0c 100%);
    color: #ffffff;
    font-size: 20px;
    text-shadow: 0 2px 0 #b34d00;
}

.pf-stat__icon[b-tdoo2nlow4] {
    display: grid;
    width: 38px;
    height: 38px;
}

/* Big "change friend" button beside the face: two swapping arrows. */
.pf-swap[b-tdoo2nlow4] {
    position: absolute;
    top: 104px;
    left: calc(50% + 52px);
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 12px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    box-shadow: 0 4px 0 #2c7a31, 0 8px 14px rgba(61, 42, 28, 0.25);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
    animation: pf-pop-b-tdoo2nlow4 0.6s var(--ease-pop) 0.2s both;
}

.pf-swap svg[b-tdoo2nlow4] {
    width: 100%;
    height: 100%;
}

.pf-swap:active[b-tdoo2nlow4] {
    transform: translateY(3px) scale(0.92);
    transition-duration: 0.07s;
}

/* ---------- Cards ---------- */
.pf-card[b-tdoo2nlow4] {
    flex: none;
    position: relative;
    padding: 12px;
    border-radius: 26px;
    border: 4px solid #ffffff;
    background:
        radial-gradient(rgba(244, 144, 12, 0.07) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fffdf8 0%, #fff1d9 100%);
    box-shadow: 0 5px 0 #e6c597, 0 12px 22px rgba(61, 42, 28, 0.2);
}

.pf-card__title[b-tdoo2nlow4] {
    position: absolute;
    left: 14px;
    top: -18px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #ffe4c2;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 3px 0 #e6c597;
}

.pf-stickers[b-tdoo2nlow4] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding-top: 10px;
}

.pf-sticker[b-tdoo2nlow4] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 30%;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #fff7d6 0%, #ffe38a 100%);
    box-shadow: 0 3px 0 #e0ac5f;
}

.pf-sticker__art[b-tdoo2nlow4] {
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1;
}

.pf-sticker.is-locked[b-tdoo2nlow4] {
    background: #efe4d4;
    box-shadow: inset 0 2px 4px rgba(61, 42, 28, 0.15);
}

/* Locked: a dark silhouette of the sticker. */
.pf-sticker.is-locked .pf-sticker__art[b-tdoo2nlow4] {
    filter: brightness(0) opacity(0.22);
}

.pf-sticker__need[b-tdoo2nlow4] {
    position: absolute;
    bottom: -8px;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 1px 6px 1px 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(61, 42, 28, 0.15);
    font-size: 12px;
    font-weight: 900;
    color: var(--c-text-soft);
}

.pf-sticker__star[b-tdoo2nlow4] {
    display: grid;
    width: 14px;
    height: 14px;
}

.pf-games[b-tdoo2nlow4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 10px;
}

.pf-game[b-tdoo2nlow4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px 4px 6px;
    border-radius: 22px;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 45%, #ffffff) 0%, color-mix(in srgb, var(--tint) 80%, #ffffff) 100%);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--tint) 70%, #000000);
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop);
}

.pf-game:active[b-tdoo2nlow4] {
    transform: translateY(3px) scale(0.95);
    transition-duration: 0.07s;
}

.pf-game__icon[b-tdoo2nlow4] {
    display: grid;
    width: 64px;
    height: 64px;
}

.pf-game__done[b-tdoo2nlow4] {
    position: absolute;
    right: -6px;
    top: -6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #8ee070 0%, #43a047 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 2px 0 #2c7a31;
}

.pf-game__stars[b-tdoo2nlow4] {
    display: flex;
    gap: 1px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
}

.pf-game__stars svg[b-tdoo2nlow4] {
    width: 17px;
    height: 17px;
    fill: #e6d6c2;
}

.pf-game__stars svg.is-on[b-tdoo2nlow4] {
    fill: var(--c-gold);
}

@keyframes pf-pop-b-tdoo2nlow4 {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-hero__face[b-tdoo2nlow4],
    .pf-swap[b-tdoo2nlow4] {
        animation: none;
    }
}
/* /Pages/StrokeSheet.razor.rz.scp.css */
/* DEV ONLY page: a scrolling grid of the cursive glyphs, 6 letters per row like the reference sheet. */
.cp[b-7t9fd9vaeh] {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 12px;
    background: #f4f4f4;
    color: #222;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.cp-head[b-7t9fd9vaeh] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: 16px;
}

.cp-tag[b-7t9fd9vaeh] {
    padding: 2px 8px;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.cp-check[b-7t9fd9vaeh] {
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.cp-check.is-ok[b-7t9fd9vaeh] {
    background: #c8e6c9;
}

.cp-check.is-bad[b-7t9fd9vaeh] {
    background: #ffcdd2;
}

.cp-fails[b-7t9fd9vaeh] {
    font-size: 12px;
    color: #b71c1c;
}

.cp-grid[b-7t9fd9vaeh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}

.cp-cell[b-7t9fd9vaeh] {
    padding: 6px;
    border-radius: 6px;
    background: #fff;
}

.cp-lbl[b-7t9fd9vaeh] {
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 600;
}

.cp-lbl span[b-7t9fd9vaeh] {
    color: #888;
    font-weight: 400;
    font-size: 13px;
}

.cp-pair[b-7t9fd9vaeh] {
    display: flex;
    gap: 6px;
}

.cp-svg[b-7t9fd9vaeh] {
    width: 170px;
    height: 170px;
    border: 1px solid #ddd;
    background: #fff;
}

.cp-svg.is-bad[b-7t9fd9vaeh] {
    border: 3px solid #e53935;
}

.cp-rule[b-7t9fd9vaeh] {
    stroke: #bbb;
    stroke-width: 1.5;
}

.cp-rule--x[b-7t9fd9vaeh] {
    stroke: #9cf;
    stroke-dasharray: 4 4;
}

.cp-rule--faint[b-7t9fd9vaeh] {
    stroke: #e5e5e5;
    stroke-dasharray: 4 4;
}

.cp-stroke[b-7t9fd9vaeh] {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.cp-arrow[b-7t9fd9vaeh] {
    fill: none;
    stroke: #222;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-arrow--under[b-7t9fd9vaeh] {
    stroke: #fff;
    stroke-width: 7;
}

.cp-start[b-7t9fd9vaeh] {
    fill: #43a047;
    stroke: #fff;
    stroke-width: 3;
}

.cp-start__n[b-7t9fd9vaeh] {
    fill: #fff;
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}