@import '_content/BlazorBase.Components/BlazorBase.Components.22hfir5bzc.bundle.scp.css';
@import '_content/BlazorBase.CRUD/BlazorBase.CRUD.p1zdg4f4br.bundle.scp.css';
@import '_content/BlazorBase.Notifications/BlazorBase.Notifications.nytgtwm13r.bundle.scp.css';
@import '_content/BlazorBase.User/BlazorBase.User.yoiq0av1ua.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Layout/GameLayout.razor.rz.scp.css */
/*
  The game pages run without the app shell. The main area keeps the content clear of notches and the home indicator;
  the game inside sizes itself to the remaining viewport, so the document only scrolls when a screen is genuinely
  taller than the device (a long result recap).
*/
.game-layout[b-iogiutxbdb] {
    --game-safe-top: env(safe-area-inset-top, 0px);
    --game-safe-bottom: env(safe-area-inset-bottom, 0px);
    display: block;
    min-height: 100dvh;
    padding: var(--game-safe-top) env(safe-area-inset-right, 0px) var(--game-safe-bottom) env(safe-area-inset-left, 0px);
    color: var(--color-text-primary);
}

.game-layout:focus[b-iogiutxbdb] {
    outline: none;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.avatar[b-r7bjr6km36] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent-fill);
    color: var(--color-text-on-accent);
    font-size: 12px;
    font-weight: 700;
    user-select: none;
}

/*
  The framework components render themselves; where they sit is the host's call. BaseLayout shows the
  navigation as a rail beside the body and, at 1024 px and below, as an off-canvas drawer behind the
  header button, so the navigation only needs to fill the space the layout gives it.
*/
.side-nav[b-r7bjr6km36] {
    display: block;
    height: 100%;
}
/* /Modules/Critters/Components/Critter.razor.rz.scp.css */
/*
  Critter sprites. The artwork components paint with the paint-* and ink classes below, so every critter shares one
  outline, one face and one set of mood animations; the per-kind rules only set the palette. Every animated group is
  wrapped by a group that carries its SVG position, so the CSS transform never fights a transform attribute.
*/

.critter[b-dd7yspps3g] {
    --critter-ink: var(--eq-night, #2B1B5A);
    --critter-effect-ink: var(--critter-ink);
    --critter-body: #F2A65A;
    --critter-shade: #DB8A3E;
    --critter-belly: #FFF1DC;
    --critter-accent: #FFC93C;
    --critter-accent-shade: #E8A92A;
    --critter-pink: #FFB8C6;
    --critter-cheek: #FF7A9A;
    --critter-tongue: #FF7A93;
    --critter-water: #8FD3FF;
    --critter-phase: 0s;
    --critter-rim: drop-shadow(0 0 0 transparent);
    --critter-tint: saturate(1);
    display: inline-block;
    flex: none;
    width: var(--critter-size, 96px);
    height: var(--critter-size, 96px);
    overflow: visible;
    vertical-align: middle;
    filter: var(--critter-rim) var(--critter-tint);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .critter[b-dd7yspps3g] {
        --critter-rim: drop-shadow(0 0 2px #FFFFFF47);
        --critter-effect-ink: #E4DCFF;
    }
}

:root[data-theme="dark"] .critter[b-dd7yspps3g] {
    --critter-rim: drop-shadow(0 0 2px #FFFFFF47);
    --critter-effect-ink: #E4DCFF;
}

/*
  Singing notes, listening waves and snores are drawn in the ink colour, which is dark in the light theme. A critter
  that stands in front of a dark stage (a sibling right after the stage backdrop) switches them to the light ink, so
  they stay visible on the starry night, the spotlight and the concert hall; a thin dark halo keeps them readable where
  they leave the stage.
*/

.stage-backdrop--concert-hall ~ .critter[b-dd7yspps3g],
.stage-backdrop--starry-night ~ .critter[b-dd7yspps3g],
.stage-backdrop--spotlight-stage ~ .critter[b-dd7yspps3g] {
    --critter-effect-ink: #E4DCFF;
}

.stage-backdrop--concert-hall ~ .critter[b-dd7yspps3g]  .critter-effects .ink-fine,
.stage-backdrop--starry-night ~ .critter[b-dd7yspps3g]  .critter-effects .ink-fine,
.stage-backdrop--spotlight-stage ~ .critter[b-dd7yspps3g]  .critter-effects .ink-fine {
    filter: drop-shadow(0 0 1.5px #2B1B5ACC);
}

/* ---------- Palettes ---------- */

.critter--chameleon[b-dd7yspps3g] { --critter-body: #44D3B9; --critter-shade: #23A991; --critter-belly: #D2F8EC; --critter-accent: #FFB347; --critter-accent-shade: #F28C28; --critter-phase: -0.4s; }
.critter--badger[b-dd7yspps3g] { --critter-body: #A3A8BE; --critter-shade: #7B8199; --critter-belly: #FFFFFF; --critter-accent: #3D3656; --critter-accent-shade: #2B2540; --critter-phase: -2.1s; }
.critter--owl[b-dd7yspps3g] { --critter-body: #9D7DEB; --critter-shade: #7655D4; --critter-belly: #F0E6FF; --critter-accent: #FFA43B; --critter-accent-shade: #EE8420; --critter-phase: -3.3s; }
.critter--frog[b-dd7yspps3g] { --critter-body: #7FD957; --critter-shade: #4FB043; --critter-belly: #EDF9C3; --critter-accent: #FFFFFF; --critter-accent-shade: #DDEFD2; --critter-phase: -1.2s; }
.critter--giraffe[b-dd7yspps3g] { --critter-body: #FFD65C; --critter-shade: #F2B53A; --critter-belly: #FFF1C8; --critter-accent: #E58A35; --critter-accent-shade: #B8672A; --critter-phase: -2.8s; }
.critter--monkey[b-dd7yspps3g] { --critter-body: #BE7E50; --critter-shade: #965B38; --critter-belly: #F8D6AE; --critter-accent: #F8D6AE; --critter-accent-shade: #E9BC8D; --critter-phase: -0.9s; }
.critter--hare[b-dd7yspps3g] { --critter-body: #EAD6C2; --critter-shade: #CDAE91; --critter-belly: #FFF9F1; --critter-accent: #FFFFFF; --critter-accent-shade: #EDE7E0; --critter-phase: -3.9s; }
.critter--clown-fish[b-dd7yspps3g] { --critter-body: #FF8A3D; --critter-shade: #E8662A; --critter-belly: #FFFFFF; --critter-accent: #FFB27A; --critter-accent-shade: #E8662A; --critter-phase: -1.7s; }
.critter--dolphin[b-dd7yspps3g] { --critter-body: #79C0F3; --critter-shade: #4F98DA; --critter-belly: #E3F4FF; --critter-accent: #4F98DA; --critter-accent-shade: #3A7CC0; --critter-phase: -2.5s; }
.critter--fish[b-dd7yspps3g] { --critter-body: #FF92BA; --critter-shade: #EE6A9C; --critter-belly: #FFE1EC; --critter-accent: #FFCF4A; --critter-accent-shade: #F2AE2A; --critter-phase: -0.2s; }
.critter--goose[b-dd7yspps3g] { --critter-body: #FFFFFF; --critter-shade: #D9E0F0; --critter-belly: #FFFFFF; --critter-accent: #FF9E3D; --critter-accent-shade: #E87F22; --critter-phase: -3.0s; }
.critter--beaver[b-dd7yspps3g] { --critter-body: #B5703F; --critter-shade: #8C4F2A; --critter-belly: #EBC79B; --critter-accent: #6B4535; --critter-accent-shade: #523327; --critter-phase: -1.4s; }
.critter--fennec[b-dd7yspps3g] { --critter-body: #F4A95D; --critter-shade: #DC883C; --critter-belly: #FFF1DC; --critter-accent: #FFB8C6; --critter-accent-shade: #F493A8; --critter-phase: -2.3s; }
.critter--sun[b-dd7yspps3g] { --critter-body: #FFD23F; --critter-shade: #F7AE1F; --critter-belly: #FFE98A; --critter-accent: #FF8A3D; --critter-accent-shade: #F06A1F; --critter-phase: -0.6s; }
.critter--moon[b-dd7yspps3g] { --critter-body: #BEC6FF; --critter-shade: #919DF0; --critter-belly: #E3E7FF; --critter-accent: #FFD23F; --critter-accent-shade: #F7AE1F; --critter-phase: -3.6s; }
.critter--ghost[b-dd7yspps3g] { --critter-body: #F9F6FF; --critter-shade: #DCD2F7; --critter-belly: #FFFFFF; --critter-accent: #C9BCF2; --critter-accent-shade: #A894E6; --critter-phase: -1.9s; }
.critter--rocket[b-dd7yspps3g] { --critter-body: #F3F5FF; --critter-shade: #CDD3EE; --critter-belly: #8E6BEA; --critter-accent: #FF5A6E; --critter-accent-shade: #D93A52; --critter-phase: -2.7s; }
.critter--crown[b-dd7yspps3g] { --critter-body: #FFD54A; --critter-shade: #F0AE1E; --critter-belly: #FFE58A; --critter-accent: #8E6BEA; --critter-accent-shade: #6C4BD8; --critter-phase: -1.1s; }
.critter--star[b-dd7yspps3g] { --critter-body: #FFA3C8; --critter-shade: #F276A5; --critter-belly: #FFD3E5; --critter-accent: #FFFFFF; --critter-accent-shade: #FFE3EF; --critter-phase: -3.4s; }
.critter--cloud[b-dd7yspps3g] { --critter-body: #F0F7FF; --critter-shade: #C3DAF4; --critter-belly: #FFFFFF; --critter-accent: #8FD3FF; --critter-accent-shade: #5CB6F0; --critter-phase: -0.7s; }

/* ---------- Paint ---------- */

.critter[b-dd7yspps3g]  .paint-body { fill: var(--critter-body); }
.critter[b-dd7yspps3g]  .paint-shade { fill: var(--critter-shade); }
.critter[b-dd7yspps3g]  .paint-belly { fill: var(--critter-belly); }
.critter[b-dd7yspps3g]  .paint-accent { fill: var(--critter-accent); }
.critter[b-dd7yspps3g]  .paint-accent-shade { fill: var(--critter-accent-shade); }
.critter[b-dd7yspps3g]  .paint-pink { fill: var(--critter-pink); }
.critter[b-dd7yspps3g]  .paint-ink { fill: var(--critter-ink); }
.critter[b-dd7yspps3g]  .paint-white { fill: #FFFFFF; }
.critter[b-dd7yspps3g]  .paint-shine { fill: #FFFFFF; opacity: 0.5; }
.critter[b-dd7yspps3g]  .paint-cheek { fill: var(--critter-cheek); opacity: 0.55; }
.critter[b-dd7yspps3g]  .paint-tongue { fill: var(--critter-tongue); }
.critter[b-dd7yspps3g]  .paint-water { fill: var(--critter-water); }
.critter[b-dd7yspps3g]  .paint-violet { fill: var(--eq-violet, #6C4BD8); }
.critter[b-dd7yspps3g]  .paint-orange { fill: var(--eq-orange, #FF8A3D); }
.critter[b-dd7yspps3g]  .paint-green { fill: var(--eq-green, #3CC97A); }
.critter[b-dd7yspps3g]  .paint-coral { fill: var(--eq-coral, #FF5A6E); }
.critter[b-dd7yspps3g]  .paint-gold { fill: var(--eq-gold, #FFC93C); }
.critter[b-dd7yspps3g]  .paint-none { fill: none; }

.critter[b-dd7yspps3g]  .ink,
.critter[b-dd7yspps3g]  .ink-fine,
.critter[b-dd7yspps3g]  .ink-thin,
.critter[b-dd7yspps3g]  .ink-joint,
.critter[b-dd7yspps3g]  .ink-double {
    stroke: var(--critter-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.critter[b-dd7yspps3g]  .ink { stroke-width: 6; }
.critter[b-dd7yspps3g]  .ink-fine { stroke-width: 4.5; }
.critter[b-dd7yspps3g]  .ink-thin { stroke-width: 3; }
.critter[b-dd7yspps3g]  .ink-joint { stroke-width: 2.5; }
.critter[b-dd7yspps3g]  .ink-double { stroke-width: 12; }
.critter[b-dd7yspps3g]  .critter-effects .ink-fine { stroke: var(--critter-effect-ink); }

.critter[b-dd7yspps3g]  .ink-shade,
.critter[b-dd7yspps3g]  .ink-accent {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.critter[b-dd7yspps3g]  .ink-shade { stroke: var(--critter-shade); }
.critter[b-dd7yspps3g]  .ink-accent { stroke: var(--critter-accent-shade); }

.critter[b-dd7yspps3g]  .tube-ink,
.critter[b-dd7yspps3g]  .tube-body {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.critter[b-dd7yspps3g]  .tube-ink { stroke: var(--critter-ink); stroke-width: 22; }
.critter[b-dd7yspps3g]  .tube-body { stroke: var(--critter-body); stroke-width: 10; }

.critter[b-dd7yspps3g]  .round-ink,
.critter[b-dd7yspps3g]  .round-shade,
.critter[b-dd7yspps3g]  .round-body {
    stroke-linejoin: round;
}

.critter[b-dd7yspps3g]  .round-ink { fill: var(--critter-ink); stroke: var(--critter-ink); stroke-width: 22; }
.critter[b-dd7yspps3g]  .round-shade { fill: var(--critter-shade); stroke: var(--critter-shade); stroke-width: 10; }
.critter[b-dd7yspps3g]  .round-body { fill: var(--critter-body); stroke: var(--critter-body); stroke-width: 10; }

.critter-shadow[b-dd7yspps3g] {
    fill: #000000;
    opacity: 0.14;
    transform-origin: 100px 189px;
}

/* ---------- Pivots ---------- */

.critter-figure[b-dd7yspps3g] {
    transform-origin: 100px 186px;
}

.critter[b-dd7yspps3g]  .critter-head {
    transform-origin: var(--critter-neck, 100px 138px);
}

.critter[b-dd7yspps3g]  .critter-eye,
.critter[b-dd7yspps3g]  .critter-eye-open,
.critter[b-dd7yspps3g]  .critter-mouth,
.critter[b-dd7yspps3g]  .critter-sparkle,
.critter[b-dd7yspps3g]  .critter-note,
.critter[b-dd7yspps3g]  .critter-snore,
.critter[b-dd7yspps3g]  .critter-confetti-piece,
.critter[b-dd7yspps3g]  .critter-rays {
    transform-box: fill-box;
    transform-origin: center;
}

.critter[b-dd7yspps3g]  .critter-ears {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.critter[b-dd7yspps3g]  .critter-arm-left {
    transform-box: fill-box;
    transform-origin: 90% 10%;
}

.critter[b-dd7yspps3g]  .critter-arm-right {
    transform-box: fill-box;
    transform-origin: 10% 10%;
}

/*
  The arm that holds a paw item turns around a fixed shoulder point, so a held item never shifts the pivot. The points
  equal the fill-box pivots of the bare arms, so the arm moves exactly as before.
*/
.critter[b-dd7yspps3g]  .critter-arm-holding {
    transform-box: view-box;
    transform-origin: var(--critter-paw-pivot, 120.8px 140.9px);
}

.critter--chameleon[b-dd7yspps3g] { --critter-paw-pivot: 120.8px 140.9px; }
.critter--clown-fish[b-dd7yspps3g] { --critter-paw-pivot: 61.5px 130.8px; }
.critter--badger[b-dd7yspps3g] { --critter-paw-pivot: 121.8px 140.9px; }
.critter--dolphin[b-dd7yspps3g] { --critter-paw-pivot: 126.6px 142.8px; }
.critter--owl[b-dd7yspps3g] { --critter-paw-pivot: 134px 136.4px; }
.critter--frog[b-dd7yspps3g] { --critter-paw-pivot: 122.8px 141.9px; }
.critter--fish[b-dd7yspps3g] { --critter-paw-pivot: 57.5px 134.8px; }
.critter--giraffe[b-dd7yspps3g] { --critter-paw-pivot: 120.8px 140.9px; }
.critter--goose[b-dd7yspps3g] { --critter-paw-pivot: 132px 139.6px; }
.critter--monkey[b-dd7yspps3g] { --critter-paw-pivot: 120.5px 140.1px; }
.critter--beaver[b-dd7yspps3g] { --critter-paw-pivot: 121.8px 140.9px; }
.critter--hare[b-dd7yspps3g] { --critter-paw-pivot: 120.8px 140.9px; }
.critter--fennec[b-dd7yspps3g] { --critter-paw-pivot: 120.8px 140.9px; }

.critter[b-dd7yspps3g]  .critter-tail {
    transform-box: fill-box;
    transform-origin: var(--critter-tail-pivot, 0% 100%);
}

.critter[b-dd7yspps3g]  .critter-mouth-open {
    transform-box: fill-box;
    transform-origin: 50% 15%;
}

.critter[b-dd7yspps3g]  .critter-beak-lower {
    transform-box: fill-box;
    transform-origin: 50% 0%;
}

.critter[b-dd7yspps3g]  .critter-flame {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: critter-flicker-b-dd7yspps3g 0.24s ease-in-out infinite alternate;
}

.critter[b-dd7yspps3g]  .critter-rays {
    animation: critter-turn-b-dd7yspps3g 24s linear infinite;
}

.critter[b-dd7yspps3g]  .critter-wave,
.critter[b-dd7yspps3g]  .critter-sweat-drop {
    transform-box: fill-box;
    transform-origin: 0% 50%;
}

/* ---------- Face and effect visibility ---------- */

.critter[b-dd7yspps3g]  .critter-eye-closed,
.critter[b-dd7yspps3g]  .critter-eye-happy,
.critter[b-dd7yspps3g]  .critter-brow,
.critter[b-dd7yspps3g]  .critter-mouth-open,
.critter[b-dd7yspps3g]  .critter-mouth-grin,
.critter[b-dd7yspps3g]  .critter-mouth-frown,
.critter[b-dd7yspps3g]  .critter-mouth-small,
.critter[b-dd7yspps3g]  .critter-waves,
.critter[b-dd7yspps3g]  .critter-notes,
.critter[b-dd7yspps3g]  .critter-sparkles,
.critter[b-dd7yspps3g]  .critter-sweat,
.critter[b-dd7yspps3g]  .critter-snores,
.critter[b-dd7yspps3g]  .critter-confetti,
.critter[b-dd7yspps3g]  .critter-teeth {
    display: none;
}

.critter--idle[b-dd7yspps3g]  .critter-teeth {
    display: inline;
}

.critter--listening[b-dd7yspps3g]  .critter-mouth-smile,
.critter--singing[b-dd7yspps3g]  .critter-mouth-smile,
.critter--happy[b-dd7yspps3g]  .critter-mouth-smile,
.critter--sad[b-dd7yspps3g]  .critter-mouth-smile,
.critter--sleeping[b-dd7yspps3g]  .critter-mouth-smile,
.critter--celebrating[b-dd7yspps3g]  .critter-mouth-smile,
.critter--happy[b-dd7yspps3g]  .critter-eye-open,
.critter--celebrating[b-dd7yspps3g]  .critter-eye-open,
.critter--sleeping[b-dd7yspps3g]  .critter-eye-open {
    display: none;
}

.critter--listening[b-dd7yspps3g]  .critter-mouth-small,
.critter--listening[b-dd7yspps3g]  .critter-waves,
.critter--singing[b-dd7yspps3g]  .critter-mouth-open,
.critter--singing[b-dd7yspps3g]  .critter-notes,
.critter--happy[b-dd7yspps3g]  .critter-eye-happy,
.critter--happy[b-dd7yspps3g]  .critter-mouth-grin,
.critter--happy[b-dd7yspps3g]  .critter-sparkles,
.critter--sad[b-dd7yspps3g]  .critter-brow,
.critter--sad[b-dd7yspps3g]  .critter-mouth-frown,
.critter--sad[b-dd7yspps3g]  .critter-sweat,
.critter--sleeping[b-dd7yspps3g]  .critter-eye-closed,
.critter--sleeping[b-dd7yspps3g]  .critter-mouth-small,
.critter--sleeping[b-dd7yspps3g]  .critter-snores,
.critter--celebrating[b-dd7yspps3g]  .critter-eye-happy,
.critter--celebrating[b-dd7yspps3g]  .critter-mouth-grin,
.critter--celebrating[b-dd7yspps3g]  .critter-sparkles,
.critter--celebrating[b-dd7yspps3g]  .critter-confetti {
    display: inline;
}

/* ---------- Idle: breathing bob and a blink now and then ---------- */

.critter--idle .critter-figure[b-dd7yspps3g] {
    animation: critter-breathe-b-dd7yspps3g 3s ease-in-out var(--critter-phase) infinite;
}

.critter--idle[b-dd7yspps3g]  .critter-eye,
.critter--listening[b-dd7yspps3g]  .critter-eye,
.critter--sad[b-dd7yspps3g]  .critter-eye {
    animation: critter-blink-b-dd7yspps3g 4.8s linear var(--critter-phase) infinite;
}

.critter--idle[b-dd7yspps3g]  .critter-tail {
    animation: critter-wag-b-dd7yspps3g 3s ease-in-out var(--critter-phase) infinite;
}

/* ---------- Listening: head tilt, perked eyes and ears, sound waves ---------- */

.critter--listening .critter-figure[b-dd7yspps3g] {
    animation: critter-breathe-b-dd7yspps3g 3s ease-in-out var(--critter-phase) infinite;
}

.critter--listening[b-dd7yspps3g]  .critter-head {
    animation: critter-tilt-b-dd7yspps3g 2.4s ease-in-out infinite;
}

.critter--listening[b-dd7yspps3g]  .critter-eye-open {
    transform: scale(1.14);
}

.critter--listening[b-dd7yspps3g]  .critter-ears {
    animation: critter-perk-b-dd7yspps3g 2.4s ease-in-out infinite;
}

.critter--listening[b-dd7yspps3g]  .critter-wave {
    animation: critter-wave-b-dd7yspps3g 1.6s ease-out infinite;
}

.critter--listening[b-dd7yspps3g]  .critter-wave-2 {
    animation-delay: 0.3s;
}

/* ---------- Singing: sway, mouth open and close, notes floating up ---------- */

.critter--singing .critter-figure[b-dd7yspps3g] {
    animation: critter-sway-b-dd7yspps3g 1.4s ease-in-out infinite;
}

.critter--singing[b-dd7yspps3g]  .critter-mouth-open {
    animation: critter-sing-b-dd7yspps3g 0.7s ease-in-out infinite;
}

.critter--singing[b-dd7yspps3g]  .critter-beak-lower {
    animation: critter-beak-b-dd7yspps3g 0.7s ease-in-out infinite;
}

.critter--singing[b-dd7yspps3g]  .critter-tail {
    animation: critter-wag-b-dd7yspps3g 1.4s ease-in-out infinite;
}

.critter--singing[b-dd7yspps3g]  .critter-note {
    opacity: 0;
    animation: critter-note-rise-b-dd7yspps3g 2.4s ease-out infinite;
}

.critter--singing[b-dd7yspps3g]  .critter-note-1 { --critter-drift: 14px; }
.critter--singing[b-dd7yspps3g]  .critter-note-2 { --critter-drift: -16px; animation-delay: 0.8s; }
.critter--singing[b-dd7yspps3g]  .critter-note-3 { --critter-drift: 10px; animation-delay: 1.6s; }

/* ---------- Happy: hop with squash and stretch, cheering arms, sparkles ---------- */

.critter--happy .critter-figure[b-dd7yspps3g] {
    animation: critter-hop-b-dd7yspps3g 0.9s ease-in-out infinite;
}

.critter--happy .critter-shadow[b-dd7yspps3g] {
    animation: critter-shadow-hop-b-dd7yspps3g 0.9s ease-in-out infinite;
}

.critter--happy[b-dd7yspps3g]  .critter-arm-left,
.critter--celebrating[b-dd7yspps3g]  .critter-arm-left {
    animation: critter-cheer-left-b-dd7yspps3g 0.45s ease-in-out infinite alternate;
}

.critter--happy[b-dd7yspps3g]  .critter-arm-right,
.critter--celebrating[b-dd7yspps3g]  .critter-arm-right {
    animation: critter-cheer-right-b-dd7yspps3g 0.45s ease-in-out infinite alternate;
}

.critter--happy[b-dd7yspps3g]  .critter-beak-lower,
.critter--celebrating[b-dd7yspps3g]  .critter-beak-lower {
    transform: translateY(5px);
}

.critter--happy[b-dd7yspps3g]  .critter-tail,
.critter--celebrating[b-dd7yspps3g]  .critter-tail {
    animation: critter-wag-b-dd7yspps3g 0.45s ease-in-out infinite;
}

.critter--happy[b-dd7yspps3g]  .critter-sparkle,
.critter--celebrating[b-dd7yspps3g]  .critter-sparkle {
    animation: critter-twinkle-b-dd7yspps3g 1.6s ease-in-out infinite;
}

.critter[b-dd7yspps3g]  .critter-sparkle-2 { animation-delay: 0.4s; }
.critter[b-dd7yspps3g]  .critter-sparkle-3 { animation-delay: 0.8s; }
.critter[b-dd7yspps3g]  .critter-sparkle-4 { animation-delay: 1.2s; }

/* ---------- Sad: droop, a little head shake, sweat drop, faded colours ---------- */

.critter--sad[b-dd7yspps3g] {
    --critter-tint: saturate(0.7) brightness(0.97);
}

.critter--sad .critter-figure[b-dd7yspps3g] {
    animation: critter-droop-b-dd7yspps3g 3.2s ease-in-out infinite;
}

.critter--sad[b-dd7yspps3g]  .critter-head {
    animation: critter-shake-b-dd7yspps3g 3.2s ease-in-out infinite;
}

.critter--sad[b-dd7yspps3g]  .critter-ears {
    transform: scaleY(0.88);
}

.critter--sad[b-dd7yspps3g]  .critter-sweat-drop {
    animation: critter-sweat-b-dd7yspps3g 2.6s ease-in infinite;
}

/* ---------- Sleeping: slow deep breaths, nodded head, floating z ---------- */

.critter--sleeping .critter-figure[b-dd7yspps3g] {
    animation: critter-snooze-b-dd7yspps3g 4.2s ease-in-out infinite;
}

.critter--sleeping[b-dd7yspps3g]  .critter-head {
    transform: rotate(7deg);
}

.critter--sleeping[b-dd7yspps3g]  .critter-mouth-small {
    animation: critter-snore-mouth-b-dd7yspps3g 4.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.critter--sleeping[b-dd7yspps3g]  .critter-snore {
    opacity: 0;
    animation: critter-snore-b-dd7yspps3g 3.6s ease-out infinite;
}

.critter--sleeping[b-dd7yspps3g]  .critter-snore-2 { animation-delay: 1.2s; }
.critter--sleeping[b-dd7yspps3g]  .critter-snore-3 { animation-delay: 2.4s; }

.critter[b-dd7yspps3g]  .critter-effects--mirrored {
    --critter-effects-direction: -1;
}

/* ---------- Celebrating: spin jump with confetti ---------- */

.critter--celebrating .critter-figure[b-dd7yspps3g] {
    transform-origin: 100px 120px;
    animation: critter-spin-jump-b-dd7yspps3g 1.8s ease-in-out 2, critter-breathe-b-dd7yspps3g 3s ease-in-out 3.6s infinite;
}

.critter--celebrating .critter-shadow[b-dd7yspps3g] {
    animation: critter-shadow-spin-b-dd7yspps3g 1.8s ease-in-out 2;
}

.critter--celebrating[b-dd7yspps3g]  .critter-confetti-piece {
    opacity: 0;
    animation: critter-confetti-b-dd7yspps3g 1.8s ease-out 2;
}

.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(1) { --critter-burst-x: -72px; --critter-burst-y: -46px; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(2) { --critter-burst-x: 70px; --critter-burst-y: -54px; animation-delay: 0.05s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(3) { --critter-burst-x: -40px; --critter-burst-y: -72px; animation-delay: 0.1s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(4) { --critter-burst-x: 46px; --critter-burst-y: -70px; animation-delay: 0.02s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(5) { --critter-burst-x: -86px; --critter-burst-y: -8px; animation-delay: 0.12s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(6) { --critter-burst-x: 86px; --critter-burst-y: -12px; animation-delay: 0.08s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(7) { --critter-burst-x: -12px; --critter-burst-y: -80px; animation-delay: 0.04s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(8) { --critter-burst-x: 18px; --critter-burst-y: -84px; animation-delay: 0.14s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(9) { --critter-burst-x: -62px; --critter-burst-y: 22px; animation-delay: 0.06s; }
.critter[b-dd7yspps3g]  .critter-confetti-piece:nth-child(10) { --critter-burst-x: 62px; --critter-burst-y: 20px; animation-delay: 0.11s; }

.critter--chameleon.critter--celebrating[b-dd7yspps3g]  :is(.paint-body, .paint-shade, .paint-belly, .paint-accent, .paint-accent-shade, .tube-body):not(.wear *) {
    animation: critter-rainbow-b-dd7yspps3g 1.8s linear infinite;
}

/* ---------- Keyframes ---------- */

@keyframes critter-breathe-b-dd7yspps3g {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-2px) scale(0.985, 1.025); }
}

@keyframes critter-blink-b-dd7yspps3g {
    0%, 91%, 97%, 100% { transform: scaleY(1); }
    94% { transform: scaleY(0.1); }
}

@keyframes critter-wag-b-dd7yspps3g {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}

@keyframes critter-tilt-b-dd7yspps3g {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-6deg); }
}

@keyframes critter-perk-b-dd7yspps3g {
    0%, 100% { transform: scaleY(1.06); }
    50% { transform: scaleY(1.12); }
}

@keyframes critter-wave-b-dd7yspps3g {
    0% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes critter-sway-b-dd7yspps3g {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes critter-sing-b-dd7yspps3g {
    0%, 100% { transform: scale(0.85, 0.55); }
    50% { transform: scale(1, 1.1); }
}

@keyframes critter-beak-b-dd7yspps3g {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes critter-note-rise-b-dd7yspps3g {
    0% { opacity: 0; transform: translate(0, 10px) scale(0.5) rotate(-12deg); }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--critter-drift, 12px), -58px) scale(1.05) rotate(12deg); }
}

@keyframes critter-hop-b-dd7yspps3g {
    0% { transform: translateY(0) scale(1.1, 0.88); }
    15% { transform: translateY(-6px) scale(0.93, 1.09); }
    45% { transform: translateY(-24px) scale(0.98, 1.03); }
    72% { transform: translateY(-5px) scale(0.95, 1.06); }
    86% { transform: translateY(0) scale(1.1, 0.88); }
    100% { transform: translateY(0) scale(1.1, 0.88); }
}

@keyframes critter-shadow-hop-b-dd7yspps3g {
    0%, 86%, 100% { transform: scale(1); opacity: 0.16; }
    45% { transform: scale(0.68); opacity: 0.08; }
}

@keyframes critter-cheer-left-b-dd7yspps3g {
    0% { transform: rotate(40deg); }
    100% { transform: rotate(95deg); }
}

@keyframes critter-cheer-right-b-dd7yspps3g {
    0% { transform: rotate(-40deg); }
    100% { transform: rotate(-95deg); }
}

@keyframes critter-twinkle-b-dd7yspps3g {
    0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes critter-droop-b-dd7yspps3g {
    0%, 100% { transform: translateY(4px) scale(1.02, 0.95); }
    50% { transform: translateY(5px) scale(1.035, 0.935); }
}

@keyframes critter-shake-b-dd7yspps3g {
    0%, 58%, 100% { transform: rotate(5deg); }
    64% { transform: rotate(-3deg); }
    70% { transform: rotate(6deg); }
    76% { transform: rotate(-2deg); }
    82% { transform: rotate(5deg); }
}

@keyframes critter-sweat-b-dd7yspps3g {
    0% { opacity: 0; transform: translateY(-6px) scale(0.6); }
    20% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(16px) scale(1); }
    100% { opacity: 0; transform: translateY(22px) scale(0.9); }
}

@keyframes critter-snooze-b-dd7yspps3g {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.04, 0.965); }
}

@keyframes critter-snore-mouth-b-dd7yspps3g {
    0%, 100% { transform: scale(0.8); }
    50% { transform: scale(1.25); }
}

@keyframes critter-snore-b-dd7yspps3g {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(-10deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(26px * var(--critter-effects-direction, 1)), -44px) scale(1.2) rotate(10deg); }
}

@keyframes critter-spin-jump-b-dd7yspps3g {
    0% { transform: translateY(0) rotate(0deg) scale(1.08, 0.9); }
    12% { transform: translateY(-8px) rotate(0deg) scale(0.94, 1.08); }
    45% { transform: translateY(-34px) rotate(200deg) scale(1, 1); }
    70% { transform: translateY(-4px) rotate(360deg) scale(0.96, 1.05); }
    78% { transform: translateY(0) rotate(360deg) scale(1.1, 0.88); }
    88%, 100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}

@keyframes critter-shadow-spin-b-dd7yspps3g {
    0%, 78%, 100% { transform: scale(1); opacity: 0.16; }
    45% { transform: scale(0.6); opacity: 0.07; }
}

@keyframes critter-confetti-b-dd7yspps3g {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
    8% { opacity: 1; }
    45% { opacity: 1; transform: translate(var(--critter-burst-x), var(--critter-burst-y)) rotate(200deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--critter-burst-x), calc(var(--critter-burst-y) + 52px)) rotate(420deg) scale(0.9); }
}

@keyframes critter-rainbow-b-dd7yspps3g {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes critter-flicker-b-dd7yspps3g {
    0% { transform: scale(0.9, 0.82); }
    100% { transform: scale(1.06, 1.12); }
}

@keyframes critter-turn-b-dd7yspps3g {
    to { transform: rotate(360deg); }
}

@keyframes critter-fade-b-dd7yspps3g {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ---------- Reduced motion: no movement, the moods stay readable through faces and gently fading effects ---------- */

@media (prefers-reduced-motion: reduce) {
    .critter[b-dd7yspps3g],
    .critter-figure[b-dd7yspps3g],
    .critter-shadow[b-dd7yspps3g],
    .critter[b-dd7yspps3g]  * {
        animation: none !important;
    }

    .critter[b-dd7yspps3g]  .critter-note,
    .critter[b-dd7yspps3g]  .critter-sparkle,
    .critter[b-dd7yspps3g]  .critter-snore,
    .critter[b-dd7yspps3g]  .critter-wave,
    .critter[b-dd7yspps3g]  .critter-sweat-drop,
    .critter[b-dd7yspps3g]  .critter-confetti-piece {
        opacity: 1;
        animation: critter-fade-b-dd7yspps3g 2.4s ease-in-out infinite !important;
    }

    .critter[b-dd7yspps3g]  .critter-snore-2 { transform: translate(calc(12px * var(--critter-effects-direction, 1)), -16px); }
    .critter[b-dd7yspps3g]  .critter-snore-3 { transform: translate(calc(26px * var(--critter-effects-direction, 1)), -34px); }

    .critter[b-dd7yspps3g]  .critter-confetti-piece {
        transform: translate(var(--critter-burst-x), var(--critter-burst-y));
    }

    .critter--listening[b-dd7yspps3g]  .critter-head {
        transform: rotate(-8deg);
    }

    .critter--sad[b-dd7yspps3g]  .critter-head {
        transform: rotate(5deg);
    }
}
/* /Modules/Critters/Components/CritterPad.razor.rz.scp.css */
.critter-pad[b-adc59tyq6t] {
    --critter-pad-ring: transparent;
    --critter-pad-ring-width: 0px;
    --critter-pad-lift: 5px;
    --critter-pad-edge: var(--color-border-strong);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 88px;
    min-height: 88px;
    padding: var(--space-1);
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.critter-pad:focus-visible[b-adc59tyq6t] {
    outline: none;
}

.critter-pad-disc[b-adc59tyq6t] {
    display: grid;
    place-items: center;
    width: calc(var(--critter-pad-size, 80px) + 28px);
    height: calc(var(--critter-pad-size, 80px) + 28px);
    border-radius: 50%;
    border: 3px solid var(--critter-pad-edge);
    background: var(--critter-pad-fill);
    box-shadow: 0 0 0 var(--critter-pad-ring-width) var(--critter-pad-ring), 0 var(--critter-pad-lift) 0 var(--critter-pad-edge);
    transition: transform 0.12s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

.critter-pad:focus-visible .critter-pad-disc[b-adc59tyq6t] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: calc(var(--critter-pad-ring-width) + 4px);
}

.critter-pad-label[b-adc59tyq6t] {
    min-width: 2.4em;
    padding: var(--space-0) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--critter-pad-label-bg);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

@media (hover: hover) {
    .critter-pad:not(:disabled):hover[b-adc59tyq6t] {
        --critter-pad-lift: 8px;
    }

    .critter-pad:not(:disabled):hover .critter-pad-disc[b-adc59tyq6t] {
        transform: translateY(-3px);
    }
}

.critter-pad:not(:disabled):active[b-adc59tyq6t] {
    --critter-pad-lift: 1px;
}

.critter-pad:not(:disabled):active .critter-pad-disc[b-adc59tyq6t] {
    transform: translateY(4px) scale(0.95);
    transition-duration: 0.05s;
}

.critter-pad--correct[b-adc59tyq6t] {
    --critter-pad-ring: var(--eq-green);
    --critter-pad-ring-width: 5px;
    --critter-pad-fill: color-mix(in srgb, var(--eq-green) 16%, var(--color-bg-elevated));
    --critter-pad-edge: var(--eq-green);
}

.critter-pad--correct .critter-pad-disc[b-adc59tyq6t] {
    animation: critter-pad-pop-b-adc59tyq6t 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.critter-pad--wrong[b-adc59tyq6t] {
    --critter-pad-ring: var(--eq-coral);
    --critter-pad-ring-width: 5px;
    --critter-pad-fill: color-mix(in srgb, var(--eq-coral) 14%, var(--color-bg-elevated));
    --critter-pad-edge: var(--eq-coral);
}

.critter-pad--wrong .critter-pad-disc[b-adc59tyq6t] {
    animation: critter-pad-wobble-b-adc59tyq6t 0.5s ease-in-out;
}

.critter-pad--highlighted[b-adc59tyq6t] {
    --critter-pad-ring: var(--eq-gold);
    --critter-pad-ring-width: 5px;
    --critter-pad-fill: color-mix(in srgb, var(--eq-gold) 18%, var(--color-bg-elevated));
    --critter-pad-edge: var(--eq-gold);
}

.critter-pad--highlighted .critter-pad-disc[b-adc59tyq6t] {
    animation: critter-pad-glow-b-adc59tyq6t 1.4s ease-in-out infinite;
}

.critter-pad--correct .critter-pad-label[b-adc59tyq6t],
.critter-pad--wrong .critter-pad-label[b-adc59tyq6t],
.critter-pad--highlighted .critter-pad-label[b-adc59tyq6t] {
    background: var(--critter-pad-ring);
    color: var(--eq-night);
}

.critter-pad:disabled[b-adc59tyq6t] {
    cursor: default;
}

.critter-pad--disabled .critter-pad-disc[b-adc59tyq6t],
.critter-pad--disabled .critter-pad-label[b-adc59tyq6t] {
    opacity: 0.5;
    filter: grayscale(0.7);
}

@keyframes critter-pad-pop-b-adc59tyq6t {
    0% { transform: scale(0.9); }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes critter-pad-wobble-b-adc59tyq6t {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-7px) rotate(-5deg); }
    40% { transform: translateX(6px) rotate(4deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(2px) rotate(1deg); }
}

@keyframes critter-pad-glow-b-adc59tyq6t {
    0%, 100% { box-shadow: 0 0 0 4px var(--critter-pad-ring), 0 var(--critter-pad-lift) 0 var(--critter-pad-edge); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--critter-pad-ring) 45%, transparent), 0 var(--critter-pad-lift) 0 var(--critter-pad-edge); }
}

@media (prefers-reduced-motion: reduce) {
    .critter-pad-disc[b-adc59tyq6t],
    .critter-pad-label[b-adc59tyq6t] {
        transition: none;
    }

    .critter-pad .critter-pad-disc[b-adc59tyq6t] {
        animation: none;
    }

    .critter-pad:not(:disabled):hover .critter-pad-disc[b-adc59tyq6t],
    .critter-pad:not(:disabled):active .critter-pad-disc[b-adc59tyq6t] {
        transform: none;
    }
}
/* /Modules/Critters/Components/MascotBubble.razor.rz.scp.css */
.mascot-bubble[b-eleno8irey] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.mascot-bubble-speech[b-eleno8irey] {
    position: relative;
    max-width: 34ch;
    margin: 0 0 calc(var(--space-6) + var(--space-2));
    padding: var(--space-3) var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 0 var(--color-border-strong);
    transform-origin: 0% 100%;
    animation: mascot-bubble-pop-b-eleno8irey 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-bubble-speech[b-eleno8irey]::before {
    content: "";
    position: absolute;
    left: -11px;
    bottom: 14px;
    width: 16px;
    height: 16px;
    border-left: 3px solid var(--color-border-strong);
    border-bottom: 3px solid var(--color-border-strong);
    border-bottom-left-radius: 4px;
    background: var(--color-bg-elevated);
    transform: rotate(45deg) skew(8deg, 8deg);
}

@keyframes mascot-bubble-pop-b-eleno8irey {
    0% { opacity: 0; transform: scale(0.6) translateY(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-bubble-speech[b-eleno8irey] {
        animation: mascot-bubble-fade-b-eleno8irey 0.3s ease-out;
    }
}

@keyframes mascot-bubble-fade-b-eleno8irey {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mascot-bubble-link[b-eleno8irey] {
    display: block;
    flex: none;
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mascot-bubble-link:focus-visible[b-eleno8irey] {
    outline: 3px solid var(--eq-violet);
    outline-offset: 3px;
}

.mascot-bubble-figure[b-eleno8irey] {
    position: relative;
    display: flex;
    flex: none;
}

.mascot-bubble-figure--staged[b-eleno8irey] {
    display: grid;
}

.mascot-bubble-figure--staged[b-eleno8irey]  svg {
    grid-area: 1 / 1;
}
/* /Modules/Critters/Pages/CritterGalleryPage.razor.rz.scp.css */
.critter-gallery[b-98897jwgva] {
    max-width: var(--shell-max, 1120px);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-7, 48px);
}

.critter-gallery-intro[b-98897jwgva],
.critter-gallery-hint[b-98897jwgva] {
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 var(--space-4);
}

.critter-gallery-section[b-98897jwgva] {
    margin-top: var(--space-6);
}

.critter-gallery-section h2[b-98897jwgva] {
    margin-bottom: var(--space-3);
}

.critter-gallery-section h3[b-98897jwgva] {
    margin: var(--space-5) 0 var(--space-3);
}

.critter-gallery-pads[b-98897jwgva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    justify-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.critter-gallery-pads[b-98897jwgva]  .critter-pad {
    max-width: 100%;
    min-width: 0;
}

.critter-gallery-pads[b-98897jwgva]  .critter-pad-label {
    max-width: 100%;
    padding: 2px var(--space-1);
    font-size: var(--font-size-base);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.critter-gallery-cell[b-98897jwgva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.critter-gallery-caption[b-98897jwgva] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: center;
}

.critter-gallery-scroller[b-98897jwgva] {
    overflow-x: auto;
    padding: var(--space-3) 0;
}

.critter-gallery-moods[b-98897jwgva] {
    display: grid;
    grid-template-columns: 10rem repeat(7, 84px);
    align-items: center;
    justify-items: center;
    row-gap: var(--space-3);
    min-width: max-content;
}

.critter-gallery-name[b-98897jwgva] {
    justify-self: start;
    font-weight: 700;
}

.critter-gallery-sizes[b-98897jwgva] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-5);
}

.critter-gallery-stages[b-98897jwgva] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.critter-gallery-stage[b-98897jwgva] {
    display: grid;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1;
}

.critter-gallery-stage[b-98897jwgva]  svg {
    grid-area: 1 / 1;
}

.critter-gallery-try-on[b-98897jwgva] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

.critter-gallery-try-on h2[b-98897jwgva] {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
}

.critter-gallery-try-on .critter-gallery-hint[b-98897jwgva] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
}

.critter-gallery-try-on-controls[b-98897jwgva] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.critter-gallery-field[b-98897jwgva] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.critter-gallery-field select[b-98897jwgva],
.critter-gallery-try-on-reset[b-98897jwgva] {
    min-height: 44px;
    max-width: 100%;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-base);
}

.critter-gallery-try-on-reset[b-98897jwgva] {
    cursor: pointer;
}

.critter-gallery-field select:focus-visible[b-98897jwgva],
.critter-gallery-try-on-reset:focus-visible[b-98897jwgva] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
/* /Modules/Game/Components/AnswerPadGrid.razor.rz.scp.css */
.answer-pads[b-t73qtwtfw0] {
    --pad-gap-x: var(--space-2);
    --pad-gap-y: var(--space-3);
    --pad-columns-active: var(--pad-columns, 2);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--pad-gap-y) var(--pad-gap-x);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.answer-pads--centered[b-t73qtwtfw0] {
    justify-content: center;
}

.answer-pads-cell[b-t73qtwtfw0] {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 0 0 calc((100% - (var(--pad-columns-active) - 1) * var(--pad-gap-x)) / var(--pad-columns-active));
    min-width: 0;
}

.answer-pads[b-t73qtwtfw0]  .critter-pad {
    width: 100%;
    min-width: 0;
}

.answer-pads[b-t73qtwtfw0]  .critter-pad-label {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.answer-pads-cell--long-label[b-t73qtwtfw0]  .critter-pad-label {
    font-size: var(--font-size-base);
    line-height: 1.25;
    padding: 2px var(--space-2);
}

.answer-pads--listening .answer-pads-cell[b-t73qtwtfw0] {
    opacity: 0.82;
    transition: opacity 0.25s ease-out;
}

.answer-pads--priming[b-t73qtwtfw0] {
    pointer-events: none;
}

.answer-pads--priming .answer-pads-cell[b-t73qtwtfw0] {
    opacity: 0.62;
}

.answer-pads--priming[b-t73qtwtfw0]  .critter-pad {
    cursor: default;
}

.answer-pads--auditioning[b-t73qtwtfw0]  .critter-pad {
    cursor: pointer;
}

.answer-pads-xp[b-t73qtwtfw0] {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--eq-gold);
    color: var(--eq-night);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 0 var(--eq-gold-edge);
    animation: answer-pads-xp-rise-b-t73qtwtfw0 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.answer-pads-shortcut[b-t73qtwtfw0] {
    display: none;
    position: absolute;
    top: 0;
    right: calc(50% - 4.2em);
    min-width: 1.6em;
    padding: 0 var(--space-1);
    border: 2px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

@media (min-width: 720px) {
    .answer-pads[b-t73qtwtfw0] {
        --pad-columns-active: var(--pad-columns-wide, 4);
        max-width: min(860px, calc(var(--pad-columns-active) * 168px + (var(--pad-columns-active) - 1) * var(--pad-gap-x)));
    }
}

@media (max-height: 760px) {
    .answer-pads[b-t73qtwtfw0] {
        --pad-gap-y: var(--space-2);
    }

    .answer-pads[b-t73qtwtfw0]  .critter-pad {
        gap: var(--space-1);
    }

    .answer-pads[b-t73qtwtfw0]  .critter-pad-disc {
        width: calc(var(--critter-pad-size, 80px) + 20px);
        height: calc(var(--critter-pad-size, 80px) + 20px);
    }
}

@media (hover: hover) and (pointer: fine) {
    .answer-pads-shortcut[b-t73qtwtfw0] {
        display: block;
    }
}

@keyframes answer-pads-xp-rise-b-t73qtwtfw0 {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(0.6); }
    20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
    35% { transform: translate(-50%, -18px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

@keyframes answer-pads-xp-fade-b-t73qtwtfw0 {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .answer-pads-xp[b-t73qtwtfw0] {
        transform: translate(-50%, -18px);
        animation: answer-pads-xp-fade-b-t73qtwtfw0 1.1s ease-out forwards;
    }
}
/* /Modules/Game/Components/ComboGlyph.razor.rz.scp.css */
.combo-glyph[b-d1b57ti66b] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.combo-glyph-burst[b-d1b57ti66b] {
    display: block;
    flex: none;
    overflow: visible;
}

.combo-glyph-rays[b-d1b57ti66b] {
    fill: transparent;
    stroke: var(--color-border-strong);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-dasharray: 2.4 1.8;
}

.combo-glyph-note[b-d1b57ti66b] {
    fill: var(--color-border-strong);
}

.combo-glyph-multiplier[b-d1b57ti66b] {
    min-width: 1.6em;
    font-variant-numeric: tabular-nums;
}

.combo-glyph--lit[b-d1b57ti66b] {
    color: var(--color-text-primary);
}

.combo-glyph--lit .combo-glyph-rays[b-d1b57ti66b] {
    fill: var(--eq-gold);
    stroke: var(--eq-gold-edge);
    stroke-dasharray: none;
}

.combo-glyph--lit .combo-glyph-note[b-d1b57ti66b] {
    fill: var(--eq-night);
}

.combo-glyph--lit .combo-glyph-burst[b-d1b57ti66b] {
    transform-origin: 50% 50%;
    animation: combo-glyph-pop-b-d1b57ti66b 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.combo-glyph--hot .combo-glyph-rays[b-d1b57ti66b] {
    fill: var(--eq-orange);
    stroke: var(--eq-coral);
}

.combo-glyph--hot .combo-glyph-burst[b-d1b57ti66b] {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--eq-orange) 70%, transparent));
}

@keyframes combo-glyph-pop-b-d1b57ti66b {
    0% { transform: scale(0.55) rotate(-20deg); }
    60% { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .combo-glyph--lit .combo-glyph-burst[b-d1b57ti66b] {
        animation: none;
    }
}
/* /Modules/Game/Components/ConfettiBurst.razor.rz.scp.css */
.confetti[b-sd3escnnn3] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.confetti-piece[b-sd3escnnn3] {
    position: absolute;
    top: -24px;
    left: var(--confetti-left);
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-fall-b-sd3escnnn3 var(--confetti-duration) cubic-bezier(0.25, 0.6, 0.45, 1) var(--confetti-delay) forwards;
}

.confetti-piece--shape-1[b-sd3escnnn3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.confetti-piece--shape-2[b-sd3escnnn3] {
    width: 6px;
    height: 18px;
}

.confetti-piece--color-0[b-sd3escnnn3] { background: var(--eq-gold); }
.confetti-piece--color-1[b-sd3escnnn3] { background: var(--eq-coral); }
.confetti-piece--color-2[b-sd3escnnn3] { background: var(--eq-green); }
.confetti-piece--color-3[b-sd3escnnn3] { background: var(--eq-violet); }
.confetti-piece--color-4[b-sd3escnnn3] { background: var(--eq-orange); }

@keyframes confetti-fall-b-sd3escnnn3 {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--confetti-drift), 110vh, 0) rotate(var(--confetti-turn));
    }
}

@media (prefers-reduced-motion: reduce) {
    .confetti[b-sd3escnnn3] {
        display: none;
    }
}
/* /Modules/Game/Components/CountdownRing.razor.rz.scp.css */
.countdown-ring[b-tnr4199u0h] {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
}

.countdown-ring-svg[b-tnr4199u0h] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.countdown-ring-track[b-tnr4199u0h],
.countdown-ring-value[b-tnr4199u0h] {
    fill: none;
    stroke-width: 6;
}

.countdown-ring-track[b-tnr4199u0h] {
    stroke: var(--color-bg-subtle);
}

.countdown-ring-value[b-tnr4199u0h] {
    stroke: var(--eq-orange);
    stroke-linecap: round;
    stroke-dasharray: calc(var(--progress) * 125.66px) 125.66px;
    transition: stroke-dasharray 0.9s linear;
}

.countdown-ring--final .countdown-ring-value[b-tnr4199u0h] {
    stroke: var(--eq-coral);
}

.countdown-ring--done .countdown-ring-value[b-tnr4199u0h] {
    stroke: var(--eq-gold);
}

.countdown-ring-time[b-tnr4199u0h] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.countdown-ring--final .countdown-ring-time[b-tnr4199u0h] {
    animation: countdown-ring-pulse-b-tnr4199u0h 1s ease-in-out infinite;
}

@keyframes countdown-ring-pulse-b-tnr4199u0h {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-ring-value[b-tnr4199u0h] {
        transition: none;
    }

    .countdown-ring--final .countdown-ring-time[b-tnr4199u0h] {
        animation: none;
    }
}
/* /Modules/Game/Components/ExitConfirmDialog.razor.rz.scp.css */
.exit-dialog-backdrop[b-7sogmo6x60] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--eq-night) 55%, transparent);
    animation: exit-dialog-fade-b-7sogmo6x60 0.2s ease-out;
}

.exit-dialog[b-7sogmo6x60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(100%, 380px);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: 24px;
    background: var(--color-bg-elevated);
    box-shadow: 0 6px 0 var(--color-border-strong);
    text-align: center;
    animation: exit-dialog-pop-b-7sogmo6x60 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exit-dialog-title[b-7sogmo6x60] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.exit-dialog-message[b-7sogmo6x60] {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 600;
    line-height: 1.45;
}

.exit-dialog-actions[b-7sogmo6x60] {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
}

.exit-dialog-stay[b-7sogmo6x60],
.exit-dialog-leave[b-7sogmo6x60] {
    min-height: 52px;
    border-radius: var(--radius-pill);
    font: inherit;
    font-family: var(--font-display);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.exit-dialog-stay[b-7sogmo6x60] {
    border: none;
    background: var(--eq-violet);
    color: #FFFFFF;
    box-shadow: 0 5px 0 #4B2FA8;
}

.exit-dialog-leave[b-7sogmo6x60] {
    border: 3px solid var(--color-border-strong);
    background: transparent;
    color: var(--color-danger);
}

.exit-dialog-stay:focus-visible[b-7sogmo6x60],
.exit-dialog-leave:focus-visible[b-7sogmo6x60] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 3px;
}

.exit-dialog-stay:active[b-7sogmo6x60] {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #4B2FA8;
}

@keyframes exit-dialog-fade-b-7sogmo6x60 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes exit-dialog-pop-b-7sogmo6x60 {
    0% { opacity: 0; transform: scale(0.85) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .exit-dialog[b-7sogmo6x60] {
        animation: exit-dialog-fade-b-7sogmo6x60 0.2s ease-out;
    }
}
/* /Modules/Game/Components/GamePageNotice.razor.rz.scp.css */
.game-notice[b-nz72n22iy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 420px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.game-notice-message[b-nz72n22iy4] {
    margin: 0;
    line-height: 1.45;
}
/* /Modules/Game/Components/GamePauseOverlay.razor.rz.scp.css */
.pause-backdrop[b-d7ojuf0bxt] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--eq-night) 72%, transparent);
    animation: pause-fade-b-d7ojuf0bxt 0.2s ease-out;
}

.pause[b-d7ojuf0bxt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(100%, 380px);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: 24px;
    background: var(--color-bg-elevated);
    box-shadow: 0 6px 0 var(--color-border-strong);
    text-align: center;
    animation: pause-pop-b-d7ojuf0bxt 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pause-mascot[b-d7ojuf0bxt] {
    animation: pause-breathe-b-d7ojuf0bxt 2.4s ease-in-out infinite;
}

.pause-title[b-d7ojuf0bxt] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.pause-message[b-d7ojuf0bxt] {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 600;
    line-height: 1.45;
}

.pause-resume[b-d7ojuf0bxt],
.pause-end[b-d7ojuf0bxt] {
    min-height: 52px;
    font: inherit;
    font-family: var(--font-display);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.pause-resume[b-d7ojuf0bxt] {
    width: 100%;
    margin-top: var(--space-2);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--eq-violet);
    color: #FFFFFF;
    font-size: var(--font-size-lg);
    box-shadow: 0 5px 0 #4B2FA8;
}

.pause-resume:active[b-d7ojuf0bxt] {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #4B2FA8;
}

.pause-end[b-d7ojuf0bxt] {
    padding: 0 var(--space-4);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pause-resume:focus-visible[b-d7ojuf0bxt],
.pause-end:focus-visible[b-d7ojuf0bxt] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 3px;
}

@keyframes pause-fade-b-d7ojuf0bxt {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pause-pop-b-d7ojuf0bxt {
    0% { opacity: 0; transform: scale(0.85) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pause-breathe-b-d7ojuf0bxt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .pause[b-d7ojuf0bxt] {
        animation: pause-fade-b-d7ojuf0bxt 0.2s ease-out;
    }

    .pause-mascot[b-d7ojuf0bxt] {
        animation: none;
    }
}
/* /Modules/Game/Components/GamePlayer.razor.rz.scp.css */
.game[b-m6tt6hhyvx] {
    --game-accent: var(--eq-violet);
    --game-on-accent: #FFFFFF;
    --game-band: var(--color-bg-subtle);
    --game-padding-top: var(--space-2);
    --game-padding-bottom: var(--space-3);
    --game-viewport-height: 100vh;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    min-height: var(--game-viewport-height);
    margin: 0 auto;
    padding: var(--game-padding-top) var(--space-3) var(--game-padding-bottom);
}

@supports (height: 100dvh) {
    .game[b-m6tt6hhyvx] {
        --game-viewport-height: calc(100dvh - var(--game-safe-top, 0px) - var(--game-safe-bottom, 0px));
    }
}

.game-empty[b-m6tt6hhyvx],
.game[b-m6tt6hhyvx]  .game-start,
.game[b-m6tt6hhyvx]  .result {
    margin-block: auto;
}

.game--daily[b-m6tt6hhyvx] {
    --game-accent: var(--eq-orange);
    --game-on-accent: var(--eq-daily-on-accent);
    --game-band: color-mix(in srgb, var(--eq-gold) 22%, var(--color-bg-elevated));
}

.game--world-meadow[b-m6tt6hhyvx] {
    --game-accent: var(--eq-world-meadow-accent);
    --game-on-accent: var(--eq-world-meadow-on-accent);
    --game-band: var(--eq-world-meadow-band);
}

.game--world-mountains[b-m6tt6hhyvx] {
    --game-accent: var(--eq-world-mountains-accent);
    --game-on-accent: var(--eq-world-mountains-on-accent);
    --game-band: var(--eq-world-mountains-band);
}

.game--world-cave[b-m6tt6hhyvx] {
    --game-accent: var(--eq-world-cave-accent);
    --game-on-accent: var(--eq-world-cave-on-accent);
    --game-band: var(--eq-world-cave-band);
}

.game--world-lake[b-m6tt6hhyvx] {
    --game-accent: var(--eq-world-lake-accent);
    --game-on-accent: var(--eq-world-lake-on-accent);
    --game-band: var(--eq-world-lake-band);
}

.game--world-castle[b-m6tt6hhyvx] {
    --game-accent: var(--eq-world-castle-accent);
    --game-on-accent: var(--eq-world-castle-on-accent);
    --game-band: var(--eq-world-castle-band);
}

.game-board[b-m6tt6hhyvx] {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--space-3);
}

.game-stage[b-m6tt6hhyvx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-4);
    border: 3px solid color-mix(in srgb, var(--game-accent) 24%, transparent);
    border-radius: 26px;
    background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.game--correct .game-stage[b-m6tt6hhyvx] {
    animation: game-stage-glow-b-m6tt6hhyvx 0.6s ease-out;
}

.game--wrong .game-stage[b-m6tt6hhyvx] {
    border-color: color-mix(in srgb, var(--eq-coral) 55%, transparent);
}

.game-stage-host[b-m6tt6hhyvx] {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 96px;
}

.game-stage-actions[b-m6tt6hhyvx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-height: 118px;
    justify-content: center;
}

.game-stage-actions[b-m6tt6hhyvx]  .game-continue {
    min-width: 220px;
    animation: game-continue-in-b-m6tt6hhyvx 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-replay[b-m6tt6hhyvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.game-replay-disc[b-m6tt6hhyvx] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--game-accent);
    color: var(--game-on-accent);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--game-accent) 65%, #000000);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.game-replay svg[b-m6tt6hhyvx] {
    overflow: visible;
}

.game-replay-speaker[b-m6tt6hhyvx] {
    fill: currentColor;
}

.game-replay-wave[b-m6tt6hhyvx] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.game-replay-label[b-m6tt6hhyvx] {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--color-text-secondary);
}

.game-replay:not(:disabled):active .game-replay-disc[b-m6tt6hhyvx] {
    transform: translateY(4px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--game-accent) 65%, #000000);
}

.game-replay:focus-visible .game-replay-disc[b-m6tt6hhyvx] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 4px;
}

.game-replay:disabled[b-m6tt6hhyvx] {
    cursor: default;
}

.game-replay:disabled:not(.game-replay--playing) .game-replay-disc[b-m6tt6hhyvx] {
    opacity: 0.55;
}

.game-replay--playing .game-replay-disc[b-m6tt6hhyvx] {
    animation: game-replay-pulse-b-m6tt6hhyvx 0.9s ease-in-out infinite;
}

.game-replay--playing .game-replay-wave--near[b-m6tt6hhyvx] {
    animation: game-replay-wave-b-m6tt6hhyvx 0.9s ease-in-out infinite;
}

.game-replay--playing .game-replay-wave--far[b-m6tt6hhyvx] {
    animation: game-replay-wave-b-m6tt6hhyvx 0.9s ease-in-out 0.2s infinite;
}

.game-reference[b-m6tt6hhyvx] {
    min-height: var(--tap-target, 44px);
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.game-reference:disabled[b-m6tt6hhyvx] {
    opacity: 0.55;
    cursor: default;
}

.game-reference:focus-visible[b-m6tt6hhyvx] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.game-toast[b-m6tt6hhyvx] {
    position: absolute;
    top: 56px;
    left: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, var(--eq-orange), var(--eq-gold));
    color: var(--eq-night);
    font-family: var(--font-display);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 4px 0 #D9622B;
    pointer-events: none;
    animation: game-toast-b-m6tt6hhyvx 3.4s ease-in-out forwards;
}

.game-toast--combo[b-m6tt6hhyvx] {
    top: 50px;
    right: 0;
    left: auto;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
    background: linear-gradient(120deg, var(--eq-violet), color-mix(in srgb, var(--eq-violet) 60%, var(--eq-coral)));
    color: #FFFFFF;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--eq-violet) 60%, #000000);
    transform-origin: 85% 0;
    animation-name: game-toast-combo-b-m6tt6hhyvx;
}

.game-toast--combo[b-m6tt6hhyvx]  .combo-glyph {
    color: #FFFFFF;
}

.game-pads[b-m6tt6hhyvx] {
    margin-top: auto;
    padding-bottom: var(--space-1);
}

.game-empty[b-m6tt6hhyvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.game-empty p[b-m6tt6hhyvx] {
    margin: 0;
}

.game-empty-link[b-m6tt6hhyvx] {
    color: var(--color-accent);
    font-weight: 800;
}

@keyframes game-stage-glow-b-m6tt6hhyvx {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eq-green) 70%, transparent); }
    100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--eq-green) 0%, transparent); }
}

@keyframes game-continue-in-b-m6tt6hhyvx {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes game-replay-pulse-b-m6tt6hhyvx {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes game-replay-wave-b-m6tt6hhyvx {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes game-toast-combo-b-m6tt6hhyvx {
    0% { opacity: 0; transform: translateY(-14px) scale(0.6); }
    10% { opacity: 1; transform: translateY(0) scale(1.1); }
    16% { transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(1); }
}

@keyframes game-toast-b-m6tt6hhyvx {
    0% { opacity: 0; transform: translate(-50%, -12px) scale(0.85); }
    10% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    16% { transform: translate(-50%, 0) scale(1); }
    85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -8px) scale(1); }
}

@keyframes game-fade-out-b-m6tt6hhyvx {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

@media (min-width: 720px) {
    .game[b-m6tt6hhyvx] {
        --game-padding-top: var(--space-4);
        --game-padding-bottom: var(--space-5);
        padding-inline: var(--space-5);
    }

    .game-stage[b-m6tt6hhyvx] {
        align-self: center;
        width: 100%;
        max-width: 640px;
        padding: var(--space-4) var(--space-5) var(--space-5);
    }
}

@media (min-width: 1024px) {
    .game-board[b-m6tt6hhyvx] {
        gap: var(--space-4);
    }

    .game-stage[b-m6tt6hhyvx] {
        margin-top: auto;
    }

    .game-pads[b-m6tt6hhyvx] {
        margin-top: 0;
        margin-bottom: auto;
    }

    .game-toast--combo[b-m6tt6hhyvx] {
        right: max(0px, calc(50% - 380px));
    }
}

@media (max-height: 760px) {
    .game-board[b-m6tt6hhyvx] {
        gap: var(--space-2);
    }

    .game-stage[b-m6tt6hhyvx] {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .game-stage-host[b-m6tt6hhyvx] {
        min-height: 80px;
    }

    .game-stage-actions[b-m6tt6hhyvx] {
        min-height: 104px;
    }

    .game-replay-disc[b-m6tt6hhyvx] {
        width: 64px;
        height: 64px;
    }

    .game-toast[b-m6tt6hhyvx] {
        top: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game--correct .game-stage[b-m6tt6hhyvx] {
        animation: none;
        box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--eq-green) 55%, transparent);
    }

    .game-stage-actions[b-m6tt6hhyvx]  .game-continue,
    .game-replay--playing .game-replay-disc[b-m6tt6hhyvx],
    .game-replay--playing .game-replay-wave--near[b-m6tt6hhyvx],
    .game-replay--playing .game-replay-wave--far[b-m6tt6hhyvx] {
        animation: none;
    }

    .game-toast[b-m6tt6hhyvx] {
        transform: translateX(-50%);
        animation: game-fade-out-b-m6tt6hhyvx 3.4s ease-out forwards;
    }

    .game-toast--combo[b-m6tt6hhyvx] {
        transform: none;
    }
}
/* /Modules/Game/Components/GameStartCard.razor.rz.scp.css */
.game-start[b-vgtksizisi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(100%, 560px);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border: 3px solid var(--color-border-strong);
    border-radius: 26px;
    background: var(--color-bg-elevated);
    box-shadow: 0 5px 0 var(--color-border-strong);
    text-align: center;
    animation: game-start-rise-b-vgtksizisi 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-start-kicker[b-vgtksizisi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--game-band, var(--color-bg-subtle));
    color: var(--game-accent, var(--color-text-secondary));
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-start-title[b-vgtksizisi] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xxl);
    font-weight: 800;
    line-height: 1.15;
}

.game-start-host[b-vgtksizisi] {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: left;
}

.game-start-facts[b-vgtksizisi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.game-start-stars[b-vgtksizisi] {
    display: inline-flex;
    gap: var(--space-1);
}

.game-start-chip[b-vgtksizisi] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-weight: 800;
}

.game-start-goal[b-vgtksizisi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.game-start-goal[b-vgtksizisi]  .goal-ring {
    width: 150px;
}

.game-start-goal[b-vgtksizisi]  .goal-ring-minutes {
    font-size: 32px;
}

.game-start-goal-text[b-vgtksizisi] {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.game-start-subheading[b-vgtksizisi] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-start-cast-hint[b-vgtksizisi] {
    margin: calc(var(--space-1) * -1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.game-start-cast[b-vgtksizisi] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-start-cast-member[b-vgtksizisi] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-start-cast[b-vgtksizisi]  .critter-pad {
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: var(--space-1);
}

.game-start-cast[b-vgtksizisi]  .critter-pad-label {
    font-size: var(--font-size-md);
}

.game-start-new[b-vgtksizisi] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--eq-gold);
    color: var(--eq-night);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: rotate(8deg);
    box-shadow: 0 2px 0 var(--eq-gold-edge);
    pointer-events: none;
}

.game-start-meet[b-vgtksizisi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 26px;
    background: var(--game-band, var(--color-bg-subtle));
    animation: game-start-meet-in-b-vgtksizisi 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-start-meet-label[b-vgtksizisi] {
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.game-start-skip[b-vgtksizisi] {
    min-height: var(--tap-target, 44px);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
    touch-action: manipulation;
}

.game-start-skip:focus-visible[b-vgtksizisi] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.game-start-hint[b-vgtksizisi] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-weight: 600;
    line-height: 1.4;
}

.game-start-stakes[b-vgtksizisi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--game-accent, var(--color-text-secondary));
    font-weight: 800;
}

.game-start[b-vgtksizisi]  .game-start-action {
    width: 100%;
    max-width: 360px;
    margin-top: var(--space-2);
}

.game-start-keys[b-vgtksizisi] {
    display: none;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .game-start-keys[b-vgtksizisi] {
        display: block;
    }
}

@media (max-height: 760px) {
    .game-start[b-vgtksizisi] {
        gap: var(--space-2);
        padding: var(--space-3) var(--space-3) var(--space-4);
    }

    .game-start-title[b-vgtksizisi] {
        font-size: var(--font-size-xl);
    }

    .game-start .game-start-host[b-vgtksizisi]  svg.critter {
        width: 88px;
        height: 88px;
    }

    .game-start-host[b-vgtksizisi]  .mascot-bubble-speech {
        margin-bottom: var(--space-4);
        padding: var(--space-2) var(--space-3);
    }

    .game-start .game-start-meet[b-vgtksizisi]  svg.critter {
        width: 120px;
        height: 120px;
    }

    .game-start-goal[b-vgtksizisi]  .goal-ring {
        width: 112px;
    }

    .game-start-goal[b-vgtksizisi]  .goal-ring-minutes {
        font-size: 26px;
    }

    .game-start-subheading[b-vgtksizisi] {
        margin-top: var(--space-1);
    }

    .game-start-hint[b-vgtksizisi] {
        padding: var(--space-1) var(--space-3);
    }

    .game-start[b-vgtksizisi]  .game-start-action {
        margin-top: var(--space-1);
    }
}

@keyframes game-start-rise-b-vgtksizisi {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes game-start-meet-in-b-vgtksizisi {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .game-start[b-vgtksizisi],
    .game-start-meet[b-vgtksizisi] {
        animation: none;
    }
}
/* /Modules/Game/Components/GameTopBar.razor.rz.scp.css */
.game-top-bar[b-rxkkp12i7e] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.game-top-bar-close[b-rxkkp12i7e] {
    display: grid;
    place-items: center;
    width: var(--tap-target, 44px);
    height: var(--tap-target, 44px);
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.game-top-bar-close svg[b-rxkkp12i7e] {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.game-top-bar-close:hover[b-rxkkp12i7e] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.game-top-bar-close:focus-visible[b-rxkkp12i7e] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.game-top-bar-middle[b-rxkkp12i7e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-width: 0;
}

.game-progress-track[b-rxkkp12i7e] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.game-progress-retries[b-rxkkp12i7e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.game-progress-retry[b-rxkkp12i7e] {
    width: 14px;
    height: 16px;
    border: 3px solid var(--eq-gold);
    border-radius: 6px;
    background: var(--color-bg-subtle);
    animation: game-progress-retry-in-b-rxkkp12i7e 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-progress-retry--current[b-rxkkp12i7e] {
    background: color-mix(in srgb, var(--eq-gold) 45%, var(--color-bg-subtle));
    animation: game-progress-retry-pulse-b-rxkkp12i7e 1.2s ease-in-out infinite;
}

.game-progress-retry--done[b-rxkkp12i7e] {
    background: var(--eq-gold);
}

.game-progress[b-rxkkp12i7e] {
    position: relative;
    flex: 1;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
    overflow: hidden;
}

.game-progress-fill[b-rxkkp12i7e] {
    width: calc(var(--progress, 0) * 100%);
    height: 100%;
    min-width: 16px;
    border-radius: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--eq-green) 70%, #FFFFFF) 0 35%, var(--eq-green) 35%);
    transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-top-bar-caption[b-rxkkp12i7e],
.game-top-bar-free[b-rxkkp12i7e] {
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-weight: 800;
    white-space: nowrap;
}

.game-top-bar-free[b-rxkkp12i7e] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
}

.game-combo[b-rxkkp12i7e] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 64px;
    min-height: var(--tap-target, 44px);
}

@media (min-width: 1024px) {
    .game-top-bar[b-rxkkp12i7e] {
        max-width: 760px;
        margin-inline: auto;
    }
}

@keyframes game-progress-retry-in-b-rxkkp12i7e {
    0% { transform: scale(0.2); opacity: 0; }
    70% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes game-progress-retry-pulse-b-rxkkp12i7e {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .game-progress-fill[b-rxkkp12i7e] {
        transition: none;
    }

    .game-progress-retry[b-rxkkp12i7e],
    .game-progress-retry--current[b-rxkkp12i7e] {
        animation: none;
    }
}
/* /Modules/Game/Components/LevelUpOverlay.razor.rz.scp.css */
.level-up-backdrop[b-yi9w6v6nid] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--eq-violet) 70%, transparent), color-mix(in srgb, var(--eq-night) 88%, transparent) 70%);
    animation: level-up-fade-b-yi9w6v6nid 0.3s ease-out;
}

.level-up[b-yi9w6v6nid] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: min(100%, 360px);
    padding: var(--space-5) var(--space-4);
    border: 3px solid var(--eq-gold);
    border-radius: 28px;
    background: var(--color-bg-elevated);
    box-shadow: 0 8px 0 var(--eq-gold-edge), 0 0 60px #FFC93C66;
    text-align: center;
    animation: level-up-pop-b-yi9w6v6nid 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.level-up-kicker[b-yi9w6v6nid] {
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--eq-gold);
    color: var(--eq-night);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.level-up-mascot[b-yi9w6v6nid] {
    animation: level-up-bounce-b-yi9w6v6nid 1.2s ease-in-out 0.5s infinite;
}

.level-up-heading[b-yi9w6v6nid] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-accent);
}

.level-up-rank[b-yi9w6v6nid] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.level-up[b-yi9w6v6nid]  .level-up-action {
    width: 100%;
}

@keyframes level-up-fade-b-yi9w6v6nid {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes level-up-pop-b-yi9w6v6nid {
    0% { opacity: 0; transform: scale(0.5) rotate(-6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes level-up-bounce-b-yi9w6v6nid {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .level-up[b-yi9w6v6nid] {
        animation: level-up-fade-b-yi9w6v6nid 0.3s ease-out;
    }

    .level-up-mascot[b-yi9w6v6nid] {
        animation: none;
    }
}

.level-up-surprise[b-yi9w6v6nid],
.level-up-timbre[b-yi9w6v6nid] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 3px dashed var(--eq-gold);
    border-radius: 18px;
    background: var(--color-bg-surface);
    text-align: left;
    animation: level-up-surprise-in-b-yi9w6v6nid 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s backwards;
}

.level-up-surprise-text[b-yi9w6v6nid],
.level-up-timbre-text[b-yi9w6v6nid] {
    font-weight: 800;
    line-height: 1.25;
}

.level-up-timbre-icon[b-yi9w6v6nid] {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--eq-gold);
    color: var(--eq-night);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

@keyframes level-up-surprise-in-b-yi9w6v6nid {
    from { opacity: 0; transform: scale(0.6) rotate(-4deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .level-up-surprise[b-yi9w6v6nid],
    .level-up-timbre[b-yi9w6v6nid] {
        animation: level-up-fade-b-yi9w6v6nid 0.3s ease-out;
    }
}
/* /Modules/Game/Components/ResultCritterRecap.razor.rz.scp.css */
.recap[b-klzkapyb6p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.recap-heading[b-klzkapyb6p] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.recap-list[b-klzkapyb6p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-2);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recap-item[b-klzkapyb6p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-0);
    padding: var(--space-2);
    border: 3px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg-surface);
}

.recap-label[b-klzkapyb6p] {
    font-family: var(--font-display);
    font-weight: 800;
}

.recap-chips[b-klzkapyb6p] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
}

.recap-chip[b-klzkapyb6p] {
    padding: 0 var(--space-2);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.recap-chip--correct[b-klzkapyb6p] {
    border-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 18%, var(--color-bg-elevated));
}

.recap-chip--wrong[b-klzkapyb6p] {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 14%, var(--color-bg-elevated));
}
/* /Modules/Game/Components/ResultScreen.razor.rz.scp.css */
.result[b-elhowtamd6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: min(100%, 560px);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border: 3px solid var(--color-border-strong);
    border-radius: 26px;
    background: var(--color-bg-elevated);
    box-shadow: 0 5px 0 var(--color-border-strong);
    overflow: hidden;
    text-align: center;
    animation: result-rise-b-elhowtamd6 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.result-host[b-elhowtamd6] {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: left;
}

.result-heading[b-elhowtamd6] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xxl);
    font-weight: 800;
    line-height: 1.15;
}

.result-stars[b-elhowtamd6] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.result-star[b-elhowtamd6] {
    display: inline-flex;
}

.result-star:nth-child(2)[b-elhowtamd6] {
    transform: translateY(-10px);
}

.result-star--earned[b-elhowtamd6]  svg {
    animation: result-star-pop-b-elhowtamd6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 3px 0 var(--eq-gold-edge));
}

.result-stats[b-elhowtamd6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    width: 100%;
    margin: 0;
}

.result-star-bar[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.result-stars-missing[b-elhowtamd6] {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 800;
}

.result-stat[b-elhowtamd6] {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: end;
    gap: var(--space-0);
    padding: var(--space-3) var(--space-2);
    border: 3px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg-surface);
}

.result-stat dt[b-elhowtamd6] {
    display: grid;
    grid-row: 2;
    min-height: 2.4em;
    place-items: center;
    line-height: 1.2;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.result-stat dd[b-elhowtamd6] {
    grid-row: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .result-stat[b-elhowtamd6] {
        padding-inline: var(--space-1);
    }

    .result-stat dd[b-elhowtamd6] {
        font-size: var(--font-size-lg);
    }
}

.result-stat--xp[b-elhowtamd6] {
    border-color: var(--eq-gold);
}

.result-stat--xp dd[b-elhowtamd6] {
    color: var(--eq-gold-text);
}

.result-saving[b-elhowtamd6] {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 700;
    animation: result-breathe-b-elhowtamd6 1.4s ease-in-out infinite;
}

.result-unsent[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 3px solid var(--eq-coral);
    border-radius: 18px;
    background: color-mix(in srgb, var(--eq-coral) 10%, var(--color-bg-elevated));
    font-weight: 700;
}

.result-unsent p[b-elhowtamd6] {
    margin: 0;
}

.result-confusion[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    border: 3px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg-surface);
}

.result-confusion-line[b-elhowtamd6] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.result-confusion[b-elhowtamd6]  .result-duel {
    width: 100%;
    max-width: 360px;
}

.result-goal[b-elhowtamd6],
.result-unlocked[b-elhowtamd6],
.result-world[b-elhowtamd6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: 18px;
    text-align: left;
    animation: result-banner-in-b-elhowtamd6 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-goal[b-elhowtamd6] {
    background: linear-gradient(120deg, var(--eq-orange), var(--eq-gold));
    color: var(--eq-night);
}

.result-goal p[b-elhowtamd6],
.result-unlocked p[b-elhowtamd6] {
    margin: 0;
}

.result-goal-title[b-elhowtamd6],
.result-unlocked-title[b-elhowtamd6] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.result-goal-streak[b-elhowtamd6] {
    font-weight: 700;
}

.result-unlocked[b-elhowtamd6] {
    border: 3px dashed var(--game-accent, var(--eq-violet));
    background: var(--game-band, var(--color-bg-subtle));
    color: var(--color-text-primary);
    text-decoration: none;
}

.result-unlocked[b-elhowtamd6]  .lock {
    color: var(--game-accent, var(--color-accent));
}

.result-world[b-elhowtamd6] {
    justify-content: center;
    background: linear-gradient(120deg, var(--eq-violet), var(--eq-night));
    color: #FFFFFF;
    text-decoration: none;
}

.result-world-title[b-elhowtamd6] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    text-align: center;
}

.result-unlocked:hover[b-elhowtamd6],
.result-world:hover[b-elhowtamd6] {
    filter: brightness(1.06);
}

.result-unlocked-lesson[b-elhowtamd6] {
    font-weight: 700;
    color: var(--color-text-secondary);
}

.result-subheading[b-elhowtamd6] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.result-achievements[b-elhowtamd6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.result-achievement[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 104px;
    padding: var(--space-3) var(--space-2);
    border: 3px solid var(--eq-gold);
    border-radius: 18px;
    background: var(--color-bg-surface);
    animation: result-banner-in-b-elhowtamd6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-achievement-name[b-elhowtamd6] {
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.25;
}


.result-wardrobe[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.result-wardrobe-items[b-elhowtamd6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.result-wardrobe-item[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 124px;
    padding: var(--space-3) var(--space-2);
    border: 3px solid var(--eq-violet);
    border-radius: 18px;
    background: var(--color-bg-surface);
    animation: result-item-pop-b-elhowtamd6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--pop-index, 0) * 0.3s) backwards;
}

.result-wardrobe-name[b-elhowtamd6] {
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.result-wardrobe[b-elhowtamd6]  .result-try-on {
    min-width: 200px;
}

@keyframes result-item-pop-b-elhowtamd6 {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.result-actions[b-elhowtamd6] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 360px;
    margin-top: var(--space-2);
}

.result-actions[b-elhowtamd6]  .call-to-action {
    width: 100%;
}

.result-link[b-elhowtamd6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    padding: var(--space-2);
    color: var(--color-accent);
    font-weight: 800;
    text-decoration: none;
}

.result-link:hover[b-elhowtamd6] {
    text-decoration: underline;
}

@keyframes result-rise-b-elhowtamd6 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes result-star-pop-b-elhowtamd6 {
    0% { transform: scale(0) rotate(-40deg); }
    70% { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes result-banner-in-b-elhowtamd6 {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes result-breathe-b-elhowtamd6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes result-fade-b-elhowtamd6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .result[b-elhowtamd6] {
        animation: result-fade-b-elhowtamd6 0.3s ease-out;
    }

    .result-star--earned[b-elhowtamd6]  svg {
        animation: result-fade-b-elhowtamd6 0.3s ease-out;
    }

    .result-goal[b-elhowtamd6],
    .result-unlocked[b-elhowtamd6],
    .result-world[b-elhowtamd6],
    .result-achievement[b-elhowtamd6],
    .result-wardrobe-item[b-elhowtamd6] {
        animation: result-fade-b-elhowtamd6 0.3s ease-out;
    }

    .result-saving[b-elhowtamd6] {
        animation: none;
    }
}
/* /Modules/Game/Components/StarProgressBar.razor.rz.scp.css */
.star-bar[b-o0scmx1uk2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: 0 var(--space-3);
}

.star-bar-markers[b-o0scmx1uk2] {
    position: relative;
    height: 40px;
}

.star-bar-marker[b-o0scmx1uk2] {
    position: absolute;
    top: 18px;
    left: var(--position);
    display: inline-flex;
    transform: translateX(-50%);
}

.star-bar-marker--stars-2[b-o0scmx1uk2] {
    top: 0;
}

.star-bar-marker-count[b-o0scmx1uk2] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-top: 2px;
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.star-bar-marker--reached .star-bar-marker-count[b-o0scmx1uk2] {
    color: var(--eq-night);
}

.star-bar-track[b-o0scmx1uk2] {
    position: relative;
    height: 12px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
}

.star-bar-fill[b-o0scmx1uk2] {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--position);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--eq-orange), var(--eq-gold));
}

.star-bar-tick[b-o0scmx1uk2] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: var(--position);
    width: 2px;
    background: var(--color-border-strong);
    transform: translateX(-50%);
}

.star-bar-player[b-o0scmx1uk2] {
    position: absolute;
    top: 50%;
    left: var(--position);
    width: 18px;
    height: 18px;
    border: 3px solid var(--color-bg-elevated);
    border-radius: 50%;
    background: var(--color-accent-fill);
    box-shadow: 0 0 0 2px var(--color-accent-fill);
    transform: translate(-50%, -50%);
}
/* /Modules/Game/Components/WorldBackdrop.razor.rz.scp.css */
.world-backdrop[b-g2vwv3zetk] {
    --world-backdrop-band: var(--color-bg-subtle);
    --world-backdrop-ink: var(--eq-violet);
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--world-backdrop-band) 0%,
        color-mix(in srgb, var(--world-backdrop-band) 55%, var(--color-bg-surface)) 38%,
        var(--color-bg-surface) 82%);
}

.world-backdrop--meadow[b-g2vwv3zetk] {
    --world-backdrop-band: var(--eq-world-meadow-band);
    --world-backdrop-ink: var(--eq-world-meadow-accent);
}

.world-backdrop--lake[b-g2vwv3zetk] {
    --world-backdrop-band: var(--eq-world-lake-band);
    --world-backdrop-ink: var(--eq-world-lake-accent);
}

.world-backdrop--cave[b-g2vwv3zetk] {
    --world-backdrop-band: var(--eq-world-cave-band);
    --world-backdrop-ink: var(--eq-world-cave-accent);
}

.world-backdrop--mountains[b-g2vwv3zetk] {
    --world-backdrop-band: var(--eq-world-mountains-band);
    --world-backdrop-ink: var(--eq-world-mountains-accent);
}

.world-backdrop--castle[b-g2vwv3zetk] {
    --world-backdrop-band: var(--eq-world-castle-band);
    --world-backdrop-ink: var(--eq-world-castle-accent);
}

.world-backdrop--daily[b-g2vwv3zetk] {
    --world-backdrop-band: color-mix(in srgb, var(--eq-gold) 22%, var(--color-bg-elevated));
    --world-backdrop-ink: var(--eq-orange);
}

.world-backdrop-shape[b-g2vwv3zetk] {
    position: absolute;
    display: block;
    height: auto;
    fill: var(--world-backdrop-ink);
    opacity: 0.07;
}

.world-backdrop-shape--wide[b-g2vwv3zetk] {
    width: clamp(150px, 40vw, 320px);
}

.world-backdrop-shape--tall[b-g2vwv3zetk] {
    width: clamp(80px, 22vw, 170px);
}

.world-backdrop-shape--small[b-g2vwv3zetk] {
    width: clamp(90px, 24vw, 200px);
}

.world-backdrop-shape--tower[b-g2vwv3zetk] {
    width: clamp(70px, 18vw, 150px);
}

.world-backdrop-shape--sun[b-g2vwv3zetk] {
    width: clamp(220px, 60vw, 460px);
}

.world-backdrop-shape--sparkle[b-g2vwv3zetk] {
    width: clamp(36px, 9vw, 64px);
}

.world-backdrop-shape--sparkle-small[b-g2vwv3zetk] {
    width: clamp(24px, 6vw, 42px);
}

.world-backdrop-shape--bottom-left[b-g2vwv3zetk] {
    left: 0;
    bottom: 0;
}

.world-backdrop-shape--bottom-right[b-g2vwv3zetk] {
    right: 0;
    bottom: 0;
}

.world-backdrop-shape--bottom-middle[b-g2vwv3zetk] {
    left: 54%;
    bottom: 0;
}

.world-backdrop-shape--middle-right[b-g2vwv3zetk] {
    right: 4%;
    bottom: 34%;
}

.world-backdrop-shape--top-left[b-g2vwv3zetk] {
    top: 0;
    left: 0;
}

.world-backdrop-shape--top-right[b-g2vwv3zetk] {
    top: 0;
    right: 0;
}

.world-backdrop-shape--bottom-band[b-g2vwv3zetk] {
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(56px, 12vh, 120px);
}

.world-backdrop-shape--high-band[b-g2vwv3zetk] {
    height: clamp(90px, 22vh, 220px);
}

.world-backdrop-shape--low-band[b-g2vwv3zetk] {
    height: clamp(28px, 5vh, 48px);
}

.world-backdrop--daily .world-backdrop-shape--bottom-left[b-g2vwv3zetk] {
    left: 8%;
    bottom: 6%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .world-backdrop-shape[b-g2vwv3zetk] {
        opacity: 0.08;
    }
}

:root[data-theme="dark"] .world-backdrop-shape[b-g2vwv3zetk] {
    opacity: 0.08;
}
/* /Modules/Game/Pages/DailyTrainingPage.razor.rz.scp.css */
.training-page[b-qtyvmx23m4] {
    width: 100%;
}
/* /Modules/Game/Pages/LessonPage.razor.rz.scp.css */
.lesson-page[b-kbljzjdtcw] {
    width: 100%;
}
/* /Modules/Player/Components/AchievementBadge.razor.rz.scp.css */
.achievement-badge[b-em2tf5u55o] {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--badge-size);
    height: var(--badge-size);
    border: 3px solid var(--eq-gold);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #FFF3C4, #FFD96B);
    box-shadow: 0 3px 0 var(--eq-gold-edge);
}

.achievement-badge-art[b-em2tf5u55o] {
    display: grid;
    place-items: center;
}

.achievement-badge-number[b-em2tf5u55o] {
    position: absolute;
    bottom: 12%;
    color: #7A3B10;
    font-family: var(--font-display);
    font-size: calc(var(--badge-size) * 0.3);
    font-weight: 800;
    line-height: 1;
}

.achievement-badge--locked[b-em2tf5u55o] {
    border-color: var(--color-border-strong);
    background: var(--color-bg-subtle);
    box-shadow: 0 3px 0 var(--color-border-strong);
}

.achievement-badge--locked .achievement-badge-art[b-em2tf5u55o] {
    filter: grayscale(1);
    opacity: 0.4;
}

.achievement-badge-lock[b-em2tf5u55o] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: calc(var(--badge-size) * 0.4);
    height: calc(var(--badge-size) * 0.4);
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border-strong);
    color: var(--color-text-muted);
}
/* /Modules/Player/Components/AchievementGrid.razor.rz.scp.css */
.achievement-grid[b-av78vt74q7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.achievement-grid-tile[b-av78vt74q7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
}

.achievement-grid-tile--locked[b-av78vt74q7] {
    border-style: dashed;
}

.achievement-grid-text[b-av78vt74q7] {
    min-width: 0;
}

.achievement-grid-name[b-av78vt74q7],
.achievement-grid-detail[b-av78vt74q7] {
    margin: 0;
}

.achievement-grid-name[b-av78vt74q7] {
    font-family: var(--font-display);
    font-weight: 800;
}

.achievement-grid-detail[b-av78vt74q7] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.achievement-grid-tile--locked .achievement-grid-name[b-av78vt74q7] {
    color: var(--color-text-secondary);
}
/* /Modules/Player/Components/AchievementStrip.razor.rz.scp.css */
.achievement-strip-list[b-yktizr8ulf] {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-1) var(--space-6) var(--space-3) var(--space-1);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.achievement-strip-list[b-yktizr8ulf]::-webkit-scrollbar {
    display: none;
}

.achievement-strip-item[b-yktizr8ulf] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 84px;
    scroll-snap-align: start;
}

.achievement-strip-name[b-yktizr8ulf] {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.achievement-strip-empty[b-yktizr8ulf] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
}

.achievement-strip-link[b-yktizr8ulf] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target, 44px);
    font-weight: 800;
    text-decoration: none;
}

.achievement-strip-link:hover[b-yktizr8ulf] {
    text-decoration: underline;
}

@media (min-width: 720px) {
    .achievement-strip-list[b-yktizr8ulf] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        grid-template-rows: auto auto;
        grid-auto-rows: 0;
        justify-items: center;
        padding-inline: var(--space-1);
        overflow: hidden;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .achievement-strip-item[b-yktizr8ulf] {
        width: 100%;
        max-width: 96px;
    }
}
/* /Modules/Player/Components/CallToAction.razor.rz.scp.css */
.call-to-action[b-tl45x2pdg4] {
    --cta-fill: var(--eq-orange);
    --cta-edge: #D9622B;
    --cta-text: #2B1B5A;
    --cta-lift: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target, 44px);
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--cta-fill);
    color: var(--cta-text);
    box-shadow: 0 var(--cta-lift) 0 var(--cta-edge);
    font: inherit;
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.call-to-action--secondary[b-tl45x2pdg4] {
    --cta-fill: #6C4BD8;
    --cta-edge: #4B2FA8;
    --cta-text: #FFFFFF;
}

.call-to-action--outline[b-tl45x2pdg4] {
    --cta-fill: transparent;
    --cta-edge: var(--color-border-strong);
    --cta-text: var(--color-accent);
    border: 3px solid var(--color-border-strong);
}

.call-to-action--small[b-tl45x2pdg4] {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
}

.call-to-action--large[b-tl45x2pdg4] {
    min-height: 58px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
}

@media (hover: hover) {
    .call-to-action:not(:disabled):hover[b-tl45x2pdg4] {
        transform: translateY(-2px);
        box-shadow: 0 calc(var(--cta-lift) + 2px) 0 var(--cta-edge);
    }
}

.call-to-action:not(:disabled):active[b-tl45x2pdg4] {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--cta-edge);
    transition-duration: 0.05s;
}

.call-to-action:focus-visible[b-tl45x2pdg4] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 3px;
}

.call-to-action:disabled[b-tl45x2pdg4] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Modules/Player/Components/ChoiceTile.razor.rz.scp.css */
.choice-tile[b-gtw876ivlb] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    min-height: var(--tap-target, 44px);
    padding: var(--space-3) var(--space-4);
    border: 3px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: 0 3px 0 var(--color-border);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.choice-tile:focus-visible[b-gtw876ivlb] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (hover: hover) {
    .choice-tile:hover[b-gtw876ivlb] {
        border-color: var(--color-border-strong);
    }
}

.choice-tile:not(:disabled):active[b-gtw876ivlb] {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--color-border);
}

.choice-tile--selected[b-gtw876ivlb] {
    border-color: var(--color-accent-fill);
    background: color-mix(in srgb, var(--color-accent-fill) 16%, var(--color-bg-surface));
    box-shadow: 0 2px 0 var(--color-accent-fill);
    transform: translateY(1px);
}

.choice-tile--selected[b-gtw876ivlb]::after {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-bg-elevated);
    border-radius: 50%;
    background: var(--color-accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-sizing: border-box;
    pointer-events: none;
}

.choice-tile--selected:hover[b-gtw876ivlb] {
    border-color: var(--color-accent-fill);
}

.choice-tile--selected:not(:disabled):active[b-gtw876ivlb] {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--color-accent-fill);
}

.choice-tile-title[b-gtw876ivlb] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 800;
}

.choice-tile-description[b-gtw876ivlb] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.35;
}

.choice-tile--compact[b-gtw876ivlb] {
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--space-2);
}

.choice-tile--compact .choice-tile-title[b-gtw876ivlb] {
    font-size: var(--font-size-lg);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .choice-tile[b-gtw876ivlb] {
        transition: none;
    }
}

.choice-tile:disabled[b-gtw876ivlb] {
    opacity: 0.55;
    cursor: not-allowed;
}

.choice-tile--locked:disabled[b-gtw876ivlb] {
    opacity: 1;
    border-style: dashed;
    background: var(--color-bg-subtle);
    box-shadow: none;
}

.choice-tile--locked .choice-tile-title[b-gtw876ivlb],
.choice-tile--locked .choice-tile-description[b-gtw876ivlb] {
    opacity: 0.6;
}

.choice-tile--locked[b-gtw876ivlb]::after {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-bg-elevated);
    border-radius: 50%;
    background: var(--color-text-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='9' width='10' height='7.5' rx='1.6' fill='%23fff'/%3E%3Cpath d='M7 9V6.8a3 3 0 0 1 6 0V9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-sizing: border-box;
    pointer-events: none;
}

.choice-tile-lock-hint[b-gtw876ivlb] {
    align-self: flex-start;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-text-secondary) 16%, var(--color-bg-surface));
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
/* /Modules/Player/Components/ChordAccuracyBars.razor.rz.scp.css */
.chord-bars[b-jr6ftavsy9] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chord-bar[b-jr6ftavsy9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.chord-bar-body[b-jr6ftavsy9] {
    flex: 1;
    min-width: 0;
}

.chord-bar-head[b-jr6ftavsy9] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-weight: 800;
}

.chord-bar-rate[b-jr6ftavsy9] {
    color: var(--color-text-secondary);
}

.chord-bar-track[b-jr6ftavsy9] {
    --bar-color: var(--color-border-strong);
    height: 14px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
}

.chord-bar-fill[b-jr6ftavsy9] {
    width: calc(var(--accuracy) * 100%);
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--bar-color);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.chord-bar-track--low[b-jr6ftavsy9] { --bar-color: var(--eq-coral); }
.chord-bar-track--medium[b-jr6ftavsy9] { --bar-color: var(--eq-gold); }
.chord-bar-track--good[b-jr6ftavsy9] { --bar-color: #7ED9A2; }
.chord-bar-track--great[b-jr6ftavsy9] { --bar-color: var(--eq-green); }
/* /Modules/Player/Components/ChordWorldTeaser.razor.rz.scp.css */
.chord-teaser[b-6vcsv61hqq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 3px dashed var(--eq-world-castle-accent);
    border-radius: 28px;
    background: var(--eq-world-castle-band);
}

.chord-teaser-text[b-6vcsv61hqq] {
    min-width: 0;
}

.chord-teaser-title[b-6vcsv61hqq] {
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.15;
}

.chord-teaser-description[b-6vcsv61hqq] {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.chord-teaser[b-6vcsv61hqq]  .chord-teaser-action {
    display: inline-flex;
}

@media (max-width: 480px) {
    .chord-teaser[b-6vcsv61hqq] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Modules/Player/Components/ConfusionList.razor.rz.scp.css */
.confusion-list-hint[b-wlwkrutyi1] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.confusion-list-pairs[b-wlwkrutyi1] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.confusion-list-pair[b-wlwkrutyi1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "members practise"
        "count practise";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.confusion-list-members[b-wlwkrutyi1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    grid-area: members;
}

.confusion-list-member[b-wlwkrutyi1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.confusion-list-label[b-wlwkrutyi1] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 800;
}

.confusion-list-versus[b-wlwkrutyi1] {
    color: var(--color-text-muted);
    font-weight: 800;
}

.confusion-list-count[b-wlwkrutyi1] {
    grid-area: count;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.confusion-list-practise[b-wlwkrutyi1] {
    display: inline-flex;
    grid-area: practise;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: var(--tap-target, 44px);
    padding: 0 var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: 800;
    text-decoration: none;
}

.confusion-list-practise:hover[b-wlwkrutyi1] {
    background: var(--color-bg-selected);
}

.confusion-list-practise:focus-visible[b-wlwkrutyi1] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}
/* /Modules/Player/Components/ContinueLessonCard.razor.rz.scp.css */
.continue-card-body[b-yuki49ybgt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.continue-card-text[b-yuki49ybgt] {
    flex: 1;
    min-width: 0;
}

.continue-card-world[b-yuki49ybgt] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.continue-card-title[b-yuki49ybgt] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-0) 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1.2;
}

.continue-card-stars[b-yuki49ybgt] {
    display: flex;
    gap: var(--space-1);
}

.continue-card-empty[b-yuki49ybgt] {
    margin: 0;
    color: var(--color-text-secondary);
}

.continue-card-content[b-yuki49ybgt]  .continue-card-action {
    display: flex;
    width: 100%;
    margin-top: var(--space-4);
}
/* /Modules/Player/Components/DailyGoalRing.razor.rz.scp.css */
.goal-ring[b-jit7pyi0xz] {
    position: relative;
    width: min(100%, 210px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.goal-ring-svg[b-jit7pyi0xz] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.goal-ring-track[b-jit7pyi0xz],
.goal-ring-value[b-jit7pyi0xz] {
    fill: none;
    stroke-width: 13;
}

.goal-ring-track[b-jit7pyi0xz] {
    stroke: var(--color-bg-subtle);
}

.goal-ring-value[b-jit7pyi0xz] {
    stroke: var(--eq-orange);
    stroke-linecap: round;
    stroke-dasharray: calc(var(--progress) * 326.73px) 326.73px;
    animation: goal-ring-fill-b-jit7pyi0xz 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.goal-ring-value--empty[b-jit7pyi0xz] {
    display: none;
}

.goal-ring--met .goal-ring-value[b-jit7pyi0xz] {
    stroke: var(--eq-gold);
    filter: drop-shadow(0 0 6px #FFC93C99);
}

.goal-ring-center[b-jit7pyi0xz] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.goal-ring-minutes[b-jit7pyi0xz] {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.goal-ring-goal[b-jit7pyi0xz] {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    letter-spacing: 0;
}

.goal-ring-caption[b-jit7pyi0xz] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@keyframes goal-ring-fill-b-jit7pyi0xz {
    from { stroke-dasharray: 0 326.73px; }
}
/* /Modules/Player/Components/Glyphs/CrownGlyph.razor.rz.scp.css */
.crown[b-n6z8aj6fu5] {
    display: inline-block;
    flex: none;
    overflow: visible;
}

.crown-body[b-n6z8aj6fu5] {
    fill: var(--eq-gold);
    stroke: var(--eq-gold-edge);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.crown-jewel[b-n6z8aj6fu5] {
    fill: var(--eq-coral);
}
/* /Modules/Player/Components/Glyphs/FlameGlyph.razor.rz.scp.css */
.flame[b-mzkqlhqmqb] {
    display: inline-block;
    flex: none;
    overflow: visible;
}

.flame-outer[b-mzkqlhqmqb] {
    fill: var(--eq-orange);
    stroke: #D9622B;
    stroke-width: 1;
    stroke-linejoin: round;
}

.flame-inner[b-mzkqlhqmqb] {
    fill: var(--eq-gold);
}

.flame--out .flame-outer[b-mzkqlhqmqb] {
    fill: var(--color-bg-subtle);
    stroke: var(--color-border-strong);
}

.flame--out .flame-inner[b-mzkqlhqmqb] {
    fill: var(--color-border);
}
/* /Modules/Player/Components/Glyphs/LockGlyph.razor.rz.scp.css */
.lock[b-bhuu4ejp2n] {
    display: inline-block;
    flex: none;
}

.lock-shackle[b-bhuu4ejp2n] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.lock-body[b-bhuu4ejp2n] {
    fill: currentColor;
}

.lock-keyhole[b-bhuu4ejp2n] {
    fill: var(--color-bg-elevated);
}

.lock--open .lock-shackle[b-bhuu4ejp2n] {
    transform-box: view-box;
    transform-origin: 16px 10px;
    transform: translateY(-1px) rotate(32deg);
    animation: lock-open-b-bhuu4ejp2n 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lock--open[b-bhuu4ejp2n] {
    animation: lock-pop-b-bhuu4ejp2n 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lock-open-b-bhuu4ejp2n {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-1px) rotate(32deg); }
}

@keyframes lock-pop-b-bhuu4ejp2n {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lock--open[b-bhuu4ejp2n],
    .lock--open .lock-shackle[b-bhuu4ejp2n] {
        animation: none;
    }
}
/* /Modules/Player/Components/Glyphs/StarGlyph.razor.rz.scp.css */
.star[b-vf2xptm80t] {
    display: inline-block;
    flex: none;
    overflow: visible;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.star--filled[b-vf2xptm80t] {
    fill: var(--eq-gold);
    stroke: var(--eq-gold-edge);
}

.star--empty[b-vf2xptm80t] {
    fill: var(--color-bg-subtle);
    stroke: var(--color-border-strong);
}
/* /Modules/Player/Components/HeaderStatus.razor.rz.scp.css */
.header-status[b-eui3ade9zb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-end: var(--space-1);
}

.header-status-level[b-eui3ade9zb],
.header-status-streak[b-eui3ade9zb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 30px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.header-status-level[b-eui3ade9zb]::after,
.header-status-streak[b-eui3ade9zb]::after {
    content: "";
    position: absolute;
    inset: calc((var(--tap-target, 44px) - 30px) / -2) -3px;
}

.header-status-level:focus-visible[b-eui3ade9zb],
.header-status-streak:focus-visible[b-eui3ade9zb] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.header-status-level[b-eui3ade9zb] {
    background: var(--color-accent-fill);
    color: var(--color-text-on-accent);
    box-shadow: 0 2px 0 var(--color-accent-fill-pressed);
}

.header-status-streak[b-eui3ade9zb] {
    padding: 0 var(--space-2) 0 var(--space-1);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.header-status-streak--lit[b-eui3ade9zb] {
    background: #FF8A3D26;
    color: var(--color-text-primary);
}

.header-status-skeleton[b-eui3ade9zb] {
    display: inline-block;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
}

.header-status-skeleton--level[b-eui3ade9zb] {
    width: 52px;
}

.header-status-skeleton--streak[b-eui3ade9zb] {
    width: 50px;
}

.header-status--loading .header-status-skeleton[b-eui3ade9zb] {
    background: linear-gradient(90deg, var(--color-bg-subtle) 0%, var(--color-bg-hover) 50%, var(--color-bg-subtle) 100%);
    background-size: 200% 100%;
    animation: header-status-shimmer-b-eui3ade9zb 1.4s ease-in-out infinite;
}

.header-status--stale .header-status-level[b-eui3ade9zb],
.header-status--stale .header-status-streak[b-eui3ade9zb] {
    background: var(--color-bg-subtle);
    box-shadow: none;
    color: var(--color-text-muted);
    filter: grayscale(1);
}

@keyframes header-status-shimmer-b-eui3ade9zb {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .header-status--loading .header-status-skeleton[b-eui3ade9zb] {
        background: var(--color-bg-subtle);
        animation: none;
    }
}
/* /Modules/Player/Components/LessonNodeButton.razor.rz.scp.css */
.lesson-node[b-kk846eh2m4] {
    --node-size: 66px;
    --node-fill: var(--world-node-fill, var(--world-accent, var(--eq-violet)));
    --node-edge: color-mix(in srgb, var(--node-fill) 70%, #000000);
    --node-text: var(--world-on-accent, #FFFFFF);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-node--boss[b-kk846eh2m4] {
    --node-size: 88px;
}

.lesson-node-button[b-kk846eh2m4] {
    display: grid;
    place-items: center;
    width: var(--node-size);
    height: var(--node-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lesson-node-button:focus-visible[b-kk846eh2m4] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 4px;
}

.lesson-node-face[b-kk846eh2m4] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 4px solid var(--node-edge);
    border-radius: 50%;
    background: var(--node-fill);
    box-shadow: 0 6px 0 var(--node-edge);
    color: var(--node-text);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.lesson-node-number[b-kk846eh2m4] {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 0 #00000026;
}

@media (hover: hover) {
    .lesson-node-button:hover .lesson-node-face[b-kk846eh2m4] {
        transform: translateY(-3px);
        box-shadow: 0 9px 0 var(--node-edge);
    }
}

.lesson-node-button:active .lesson-node-face[b-kk846eh2m4] {
    transform: translateY(5px);
    box-shadow: 0 1px 0 var(--node-edge);
    transition-duration: 0.05s;
}

.lesson-node--locked[b-kk846eh2m4] {
    --node-fill: color-mix(in srgb, var(--color-text-muted) 30%, var(--world-band, var(--color-bg-subtle)));
    --node-edge: color-mix(in srgb, var(--color-text-muted) 55%, var(--world-band, var(--color-border-strong)));
    --node-text: var(--color-text-muted);
}

.lesson-node--unlocked .lesson-node-face[b-kk846eh2m4] {
    animation: lesson-node-pulse-b-kk846eh2m4 1.8s ease-in-out infinite;
}

.lesson-node--unlocked[b-kk846eh2m4]::before {
    content: "";
    position: absolute;
    top: 0;
    width: var(--node-size);
    height: var(--node-size);
    border-radius: 50%;
    border: 3px solid var(--node-fill);
    opacity: 0;
    pointer-events: none;
    animation: lesson-node-ring-b-kk846eh2m4 1.8s ease-out infinite;
}

.lesson-node--boss .lesson-node-face[b-kk846eh2m4] {
    border-color: var(--eq-gold-edge);
    box-shadow: 0 7px 0 var(--eq-gold-edge);
}

.lesson-node--boss.lesson-node--locked .lesson-node-face[b-kk846eh2m4] {
    border-color: var(--node-edge);
    box-shadow: 0 7px 0 var(--node-edge);
}

.lesson-node-stars[b-kk846eh2m4] {
    position: absolute;
    bottom: -14px;
    display: inline-flex;
    gap: 1px;
    padding: 2px 8px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
}

.lesson-node-unlock-lock[b-kk846eh2m4] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-muted) 30%, var(--world-band, var(--color-bg-subtle)));
    color: var(--color-text-muted);
    pointer-events: none;
    animation: lesson-node-unlock-b-kk846eh2m4 2s ease-in both;
}

.lesson-node-unlock-lock[b-kk846eh2m4]  .lock--open {
    animation-delay: 0.6s;
}

.lesson-node-unlock-lock[b-kk846eh2m4]  .lock--open .lock-shackle {
    animation-delay: 0.6s;
    animation-fill-mode: backwards;
}

.lesson-node--just-unlocked[b-kk846eh2m4]::before {
    content: "";
    position: absolute;
    top: 0;
    width: var(--node-size);
    height: var(--node-size);
    border-radius: 50%;
    border: 4px solid var(--node-fill);
    opacity: 0;
    pointer-events: none;
    animation: lesson-node-halo-b-kk846eh2m4 1.2s ease-out 1.4s 3 both;
}

@keyframes lesson-node-unlock-b-kk846eh2m4 {
    0%, 55% { opacity: 1; transform: scale(1) rotate(0deg); }
    62% { transform: scale(1) rotate(-9deg); }
    70% { transform: scale(1) rotate(9deg); }
    78% { opacity: 1; transform: scale(1.08) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.4) rotate(0deg); }
}

@keyframes lesson-node-halo-b-kk846eh2m4 {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}

@keyframes lesson-node-pulse-b-kk846eh2m4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes lesson-node-ring-b-kk846eh2m4 {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-node-unlock-lock[b-kk846eh2m4] {
        display: none;
    }

    .lesson-node--just-unlocked[b-kk846eh2m4]::before {
        animation: none;
        opacity: 0;
    }
}
/* /Modules/Player/Components/LessonSheet.razor.rz.scp.css */
.lesson-sheet-backdrop[b-4nz13x3w7w] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #150F2BB3;
    animation: lesson-sheet-fade-b-4nz13x3w7w 0.2s ease-out;
}

.lesson-sheet[b-4nz13x3w7w] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 88dvh;
    overflow-y: auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    border: 3px solid var(--color-border-strong);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    box-shadow: 0 -6px 0 var(--color-border-strong);
    animation: lesson-sheet-rise-b-4nz13x3w7w 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.lesson-sheet:focus[b-4nz13x3w7w] {
    outline: none;
}

.lesson-sheet-close[b-4nz13x3w7w] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    cursor: pointer;
}

.lesson-sheet-close:focus-visible[b-4nz13x3w7w] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.lesson-sheet-close path[b-4nz13x3w7w] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.lesson-sheet-world[b-4nz13x3w7w] {
    margin: 0 var(--space-6) var(--space-1) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lesson-sheet-title[b-4nz13x3w7w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: var(--space-6);
    font-size: var(--font-size-xxl);
    line-height: 1.15;
}

.lesson-sheet-description[b-4nz13x3w7w] {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.lesson-sheet-facts[b-4nz13x3w7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.lesson-sheet-stars[b-4nz13x3w7w] {
    display: flex;
    gap: var(--space-1);
}

.lesson-sheet-count[b-4nz13x3w7w] {
    color: var(--color-text-secondary);
    font-weight: 800;
}

.lesson-sheet-subheading[b-4nz13x3w7w] {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-sheet-chips[b-4nz13x3w7w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-sheet-chip[b-4nz13x3w7w] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0) var(--space-3) var(--space-0) var(--space-1);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface);
    font-family: var(--font-display);
    font-weight: 800;
}

.lesson-sheet-plain[b-4nz13x3w7w] {
    margin: 0;
    font-weight: 700;
}

.lesson-sheet[b-4nz13x3w7w]  .lesson-sheet-action {
    display: flex;
    width: 100%;
    margin-top: var(--space-5);
}

.lesson-sheet-locked[b-4nz13x3w7w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: var(--space-3);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-weight: 700;
}

@media (min-width: 720px) {
    .lesson-sheet-backdrop[b-4nz13x3w7w] {
        align-items: center;
    }

    .lesson-sheet[b-4nz13x3w7w] {
        padding-bottom: var(--space-5);
        border-bottom: 3px solid var(--color-border-strong);
        border-radius: 28px;
        box-shadow: 0 6px 0 var(--color-border-strong);
    }
}

@keyframes lesson-sheet-rise-b-4nz13x3w7w {
    from { opacity: 0; transform: translateY(40px); }
}

@keyframes lesson-sheet-fade-b-4nz13x3w7w {
    from { opacity: 0; }
}
/* /Modules/Player/Components/LevelCard.razor.rz.scp.css */
.level-card-body[b-lv1s6b2o3m] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.level-card-badge[b-lv1s6b2o3m] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 3px solid #4B2FA8;
    border-radius: 50%;
    background: linear-gradient(160deg, #8566F0, #6C4BD8);
    box-shadow: 0 4px 0 #4B2FA8;
    color: #FFFFFF;
    line-height: 1;
}

.level-card-badge-prefix[b-lv1s6b2o3m] {
    font-size: var(--font-size-xxs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

.level-card-badge-number[b-lv1s6b2o3m] {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
}

.level-card-details[b-lv1s6b2o3m] {
    flex: 1;
    min-width: 0;
}

.level-card-rank[b-lv1s6b2o3m] {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.1;
}

.level-card-bar[b-lv1s6b2o3m] {
    height: 16px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
    box-shadow: inset 0 2px 0 #00000014;
}

.level-card-bar-fill[b-lv1s6b2o3m] {
    width: calc(var(--progress) * 100%);
    min-width: 16px;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--eq-orange), var(--eq-gold));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.level-card-xp[b-lv1s6b2o3m] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
/* /Modules/Player/Components/LockedWorldCard.razor.rz.scp.css */
.locked-world[b-qh562jnbmg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 3px dashed color-mix(in srgb, var(--world-accent) 55%, var(--world-band));
    border-radius: 24px;
    background: linear-gradient(180deg, var(--world-band), color-mix(in srgb, var(--world-accent) 14%, var(--world-band)));
    scroll-margin-top: var(--space-4);
}

.locked-world-text[b-qh562jnbmg] {
    min-width: 0;
}

.locked-world-title[b-qh562jnbmg] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-md);
    font-weight: 800;
    line-height: 1.15;
}

.locked-world-hint[b-qh562jnbmg] {
    margin: var(--space-0) 0 var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.locked-world-dots[b-qh562jnbmg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.locked-world-dot[b-qh562jnbmg] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-muted) 40%, var(--world-band));
}

.locked-world-dot--boss[b-qh562jnbmg] {
    width: 16px;
    height: 16px;
    margin-top: -2px;
    background: color-mix(in srgb, var(--color-text-muted) 65%, var(--world-band));
}
/* /Modules/Player/Components/PianoKeyboard.razor.rz.scp.css */
.piano-wrapper[b-3g6xb32zkf] {
    --key-none-white: #F4F1FF;
    --key-none-black: #2B1B5A;
    --key-low: #FF8E9B;
    --key-medium: #FFD76A;
    --key-good: #9BE3B6;
    --key-great: #3CC97A;
    --key-low-black: #D6334A;
    --key-medium-black: #B8780B;
    --key-good-black: #1E9A57;
    --key-great-black: #0F7A45;
}

.piano[b-3g6xb32zkf] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 0 0 var(--space-1);
    list-style: none;
}

.piano-key[b-3g6xb32zkf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    user-select: none;
}

.piano-key--white[b-3g6xb32zkf] {
    height: 150px;
    padding-bottom: var(--space-2);
    border: 2px solid #2B1B5A;
    border-radius: 0 0 12px 12px;
    background: var(--key-none-white);
    box-shadow: 0 4px 0 #2B1B5A;
    color: #2B1B5A;
}

.piano-key--black[b-3g6xb32zkf] {
    position: absolute;
    top: 0;
    left: calc(var(--slot) / 7 * 100%);
    z-index: 1;
    width: 10.5%;
    height: 92px;
    padding-bottom: var(--space-1);
    transform: translateX(-50%);
    border: 2px solid #150F2B;
    border-radius: 0 0 8px 8px;
    background: var(--key-none-black);
    box-shadow: 0 3px 0 #150F2B;
    color: #FFFFFF;
}

.piano-key-label[b-3g6xb32zkf] {
    font-size: var(--font-size-base);
    line-height: 1;
}

.piano-key--black .piano-key-label[b-3g6xb32zkf] {
    font-size: var(--font-size-xs);
}

.piano-key-rate[b-3g6xb32zkf] {
    font-size: var(--font-size-xs);
    line-height: 1;
    opacity: 0.85;
}

.piano-key--black .piano-key-rate[b-3g6xb32zkf] {
    font-size: var(--font-size-xxs);
}

.piano-key--white.piano-key--low[b-3g6xb32zkf] { background: var(--key-low); }
.piano-key--white.piano-key--medium[b-3g6xb32zkf] { background: var(--key-medium); }
.piano-key--white.piano-key--good[b-3g6xb32zkf] { background: var(--key-good); }
.piano-key--white.piano-key--great[b-3g6xb32zkf] { background: var(--key-great); }

.piano-key--black.piano-key--low[b-3g6xb32zkf] { background: var(--key-low-black); }
.piano-key--black.piano-key--medium[b-3g6xb32zkf] { background: var(--key-medium-black); }
.piano-key--black.piano-key--good[b-3g6xb32zkf] { background: var(--key-good-black); }
.piano-key--black.piano-key--great[b-3g6xb32zkf] { background: var(--key-great-black); }

.piano-legend[b-3g6xb32zkf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.piano-legend-item[b-3g6xb32zkf] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.piano-legend-item[b-3g6xb32zkf]::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #2B1B5A;
    border-radius: 4px;
    background: var(--key-none-white);
}

.piano-legend-item--low[b-3g6xb32zkf]::before { background: var(--key-low); }
.piano-legend-item--medium[b-3g6xb32zkf]::before { background: var(--key-medium); }
.piano-legend-item--good[b-3g6xb32zkf]::before { background: var(--key-good); }
.piano-legend-item--great[b-3g6xb32zkf]::before { background: var(--key-great); }
/* /Modules/Player/Components/PracticeChart.razor.rz.scp.css */
.practice-chart[b-mn9ohzq9n0] {
    --chart-height: 130px;
}

.practice-chart-days[b-mn9ohzq9n0] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 1.6em 0 0;
    list-style: none;
}

.practice-chart-day[b-mn9ohzq9n0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.practice-chart-minutes[b-mn9ohzq9n0] {
    position: absolute;
    right: 0;
    bottom: calc(max(var(--height) * var(--chart-height), 4px) + 4px);
    left: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.practice-chart-area[b-mn9ohzq9n0] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: var(--chart-height);
}

.practice-chart-area[b-mn9ohzq9n0]::before {
    content: "";
    position: absolute;
    right: calc(var(--space-1) * -1);
    bottom: calc(var(--goal) * 100%);
    left: calc(var(--space-1) * -1);
    border-top: 2px dashed var(--color-border-strong);
}

.practice-chart-bar[b-mn9ohzq9n0] {
    box-sizing: border-box;
    width: min(100%, 34px);
    height: calc(var(--height) * 100%);
    min-height: 4px;
    border-radius: 10px 10px 4px 4px;
    background: var(--eq-violet);
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.practice-chart-day--met .practice-chart-bar[b-mn9ohzq9n0] {
    background: linear-gradient(180deg, var(--eq-gold), var(--eq-orange));
}

.practice-chart-day--empty .practice-chart-bar[b-mn9ohzq9n0] {
    height: 16px;
    border: 2px dashed var(--color-border-strong);
    background: transparent;
}

.practice-chart-weekday[b-mn9ohzq9n0] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.practice-chart-legend[b-mn9ohzq9n0] {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
/* /Modules/Player/Components/ReminderPushSection.razor.rz.scp.css */
.reminder-push-section[b-gp5dhuozfa] {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px dashed var(--color-border-strong);
}

.reminder-push-hint[b-gp5dhuozfa] {
    display: none;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

@supports (-webkit-touch-callout: none) {
    .reminder-push-hint[b-gp5dhuozfa] {
        display: flex;
    }
}

.reminder-push-hint-glyph[b-gp5dhuozfa] {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.reminder-push-hint-glyph circle:last-child[b-gp5dhuozfa] {
    fill: var(--color-accent);
    stroke-width: 1.2;
}

.reminder-push-hint-text[b-gp5dhuozfa] {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.45;
}

.reminder-push-test[b-gp5dhuozfa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.reminder-push-feedback[b-gp5dhuozfa] {
    margin: 0;
    font-weight: 700;
}

.reminder-push-feedback--success[b-gp5dhuozfa] {
    color: var(--color-success);
}

.reminder-push-feedback--warning[b-gp5dhuozfa] {
    color: var(--color-warning);
}

.reminder-push-feedback--error[b-gp5dhuozfa] {
    color: var(--color-danger);
}
/* /Modules/Player/Components/ReminderTimePicker.razor.rz.scp.css */
.reminder-time-picker[b-4kzjs4hsa8] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.reminder-time-legend[b-4kzjs4hsa8] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reminder-time-chips[b-4kzjs4hsa8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-2);
    padding-top: var(--space-2);
}

.reminder-time-chips[b-4kzjs4hsa8]  .choice-tile-title {
    font-size: var(--font-size-md);
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

.reminder-time-custom[b-4kzjs4hsa8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.reminder-time-custom-label[b-4kzjs4hsa8] {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.reminder-time-input[b-4kzjs4hsa8] {
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.reminder-time-input:focus-visible[b-4kzjs4hsa8] {
    border-color: var(--color-accent-fill);
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.reminder-time-summary[b-4kzjs4hsa8] {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 800;
}

.reminder-time-picker:disabled .reminder-time-summary[b-4kzjs4hsa8] {
    color: var(--color-text-muted);
}
/* /Modules/Player/Components/SoundCheckCard.razor.rz.scp.css */
.sound-check[b-jfrnsnvr9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.sound-check[b-jfrnsnvr9n]  .sound-check-action {
    display: flex;
    width: 100%;
}

.sound-check-ask[b-jfrnsnvr9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.sound-check-question[b-jfrnsnvr9n] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    text-align: center;
}

.sound-check-answers[b-jfrnsnvr9n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
}

.sound-check-result[b-jfrnsnvr9n] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sound-check-message[b-jfrnsnvr9n] {
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
}
/* /Modules/Player/Components/StickerCard.razor.rz.scp.css */
.sticker-card[b-0ggbj06y46] {
    padding: var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: 22px;
    background: var(--color-bg-elevated);
    box-shadow: 0 4px 0 var(--color-border-strong);
    min-width: 0;
}

.sticker-card-heading[b-0ggbj06y46] {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-md);
    font-weight: 800;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* /Modules/Player/Components/StreakCard.razor.rz.scp.css */
.streak-card-top[b-gb5kc0zvlx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.streak-card-count[b-gb5kc0zvlx] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.streak-card-days[b-gb5kc0zvlx] {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.streak-card-unit[b-gb5kc0zvlx] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.streak-card-record[b-gb5kc0zvlx] {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.streak-card-freeze-line[b-gb5kc0zvlx] {
    margin: 0 0 var(--space-2);
}

.streak-card-freeze[b-gb5kc0zvlx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0) var(--space-2);
    border: 2px solid #3AA6E8;
    border-radius: 999px;
    background: color-mix(in srgb, #3AA6E8 14%, var(--color-bg-elevated));
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.streak-card-freeze-hint[b-gb5kc0zvlx] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.streak-card-week[b-gb5kc0zvlx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.streak-card-day[b-gb5kc0zvlx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.streak-card-dot[b-gb5kc0zvlx] {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 38px;
    aspect-ratio: 1;
    border: 2px dashed var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg-subtle);
}

.streak-card-day--met .streak-card-dot[b-gb5kc0zvlx] {
    border-style: solid;
    border-color: var(--eq-orange);
    background: #FF8A3D26;
}

.streak-card-day--frozen .streak-card-dot[b-gb5kc0zvlx] {
    border-style: solid;
    border-color: #3AA6E8;
    background: color-mix(in srgb, #3AA6E8 18%, var(--color-bg-elevated));
    color: #3AA6E8;
}

.streak-card-day--today .streak-card-dot[b-gb5kc0zvlx] {
    border-style: solid;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-bg-selected);
}

.streak-card-day--today.streak-card-day--met .streak-card-dot[b-gb5kc0zvlx] {
    border-color: var(--eq-orange);
}

.streak-card-day--today.streak-card-day--frozen .streak-card-dot[b-gb5kc0zvlx] {
    border-color: #3AA6E8;
}

.streak-card-weekday[b-gb5kc0zvlx] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.streak-card-day--today .streak-card-weekday[b-gb5kc0zvlx] {
    color: var(--color-accent);
}

.streak-card[b-gb5kc0zvlx] {
    scroll-margin-top: var(--space-4);
}

@keyframes streak-dot-light-up-b-gb5kc0zvlx {
    0% {
        border-style: dashed;
        border-color: var(--color-border-strong);
        background: var(--color-bg-subtle);
        box-shadow: 0 0 0 0 #FF8A3D00;
    }
    45% {
        border-style: solid;
        border-color: var(--eq-orange);
        background: #FF8A3D26;
        box-shadow: 0 0 0 9px #FF8A3D4D;
    }
    100% {
        border-style: solid;
        border-color: var(--eq-orange);
        background: #FF8A3D26;
        box-shadow: 0 0 0 0 #FF8A3D00;
    }
}

@keyframes streak-flame-whoosh-b-gb5kc0zvlx {
    0%, 20% {
        opacity: 0;
        transform: translateY(14px) scale(0.3);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.35);
    }
    80% {
        transform: translateY(1px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.streak-card-day--grew .streak-card-dot[b-gb5kc0zvlx] {
    animation: streak-dot-light-up-b-gb5kc0zvlx 1.1s ease-out 0.3s both;
}

.streak-card-day--grew .streak-card-dot[b-gb5kc0zvlx]  .flame {
    animation: streak-flame-whoosh-b-gb5kc0zvlx 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@media (prefers-reduced-motion: no-preference) {
    .streak-card-day--today.streak-card-day--arriving .streak-card-dot[b-gb5kc0zvlx] {
        border-style: dashed;
        border-color: var(--color-border-strong);
        background: var(--color-bg-subtle);
    }

    .streak-card-day--today.streak-card-day--arriving .streak-card-dot[b-gb5kc0zvlx]  .flame {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .streak-card-day--grew .streak-card-dot[b-gb5kc0zvlx],
    .streak-card-day--grew .streak-card-dot[b-gb5kc0zvlx]  .flame {
        animation: none;
    }
}
/* /Modules/Player/Components/ToggleSwitch.razor.rz.scp.css */
.toggle-switch[b-3kixve7s5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap-target, 44px);
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.toggle-switch:focus-visible[b-3kixve7s5s] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.toggle-switch:disabled[b-3kixve7s5s] {
    opacity: 0.55;
    cursor: not-allowed;
}

.toggle-switch-track[b-3kixve7s5s] {
    position: relative;
    flex: none;
    width: 52px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--color-text-muted);
    box-shadow: inset 0 2px 0 #00000026;
    transition: background-color 0.15s ease-out;
}

.toggle-switch-knob[b-3kixve7s5s] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 3px 0 #00000040;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch[aria-checked="true"] .toggle-switch-track[b-3kixve7s5s] {
    background: var(--color-accent-fill);
}

.toggle-switch[aria-checked="true"] .toggle-switch-knob[b-3kixve7s5s] {
    transform: translateX(22px);
}

.toggle-switch:not(:disabled):active .toggle-switch-knob[b-3kixve7s5s] {
    box-shadow: 0 1px 0 #00000040;
}

@media (prefers-reduced-motion: reduce) {
    .toggle-switch-track[b-3kixve7s5s],
    .toggle-switch-knob[b-3kixve7s5s] {
        transition: none;
    }
}
/* /Modules/Player/Components/WorldSection.razor.rz.scp.css */
.world[b-fthlfajf91] {
    --world-band: var(--eq-world-meadow-band);
    --world-accent: var(--eq-world-meadow-accent);
    --world-on-accent: var(--eq-world-meadow-on-accent);
    --world-node-fill: var(--world-accent);
    --world-edge: color-mix(in srgb, var(--world-accent) 55%, var(--world-band));
    position: relative;
    overflow: hidden;
    padding: var(--space-4) var(--space-3) var(--space-5);
    border: 3px solid var(--world-edge);
    border-radius: 28px;
    background: linear-gradient(180deg, var(--world-band), color-mix(in srgb, var(--world-accent) 22%, var(--world-band)));
    box-shadow: 0 5px 0 var(--world-edge);
    scroll-margin-top: var(--space-4);
}

.world--mountains[b-fthlfajf91] {
    --world-band: var(--eq-world-mountains-band);
    --world-accent: var(--eq-world-mountains-accent);
    --world-on-accent: #FFFFFF;
    --world-node-fill: color-mix(in srgb, var(--world-accent) 85%, #000000);
}

.world--cave[b-fthlfajf91] {
    --world-band: var(--eq-world-cave-band);
    --world-accent: var(--eq-world-cave-accent);
    --world-on-accent: #FFFFFF;
    --world-node-fill: color-mix(in srgb, var(--world-accent) 90%, #000000);
}

.world--lake[b-fthlfajf91] {
    --world-band: var(--eq-world-lake-band);
    --world-accent: var(--eq-world-lake-accent);
    --world-on-accent: var(--eq-world-lake-on-accent);
}

.world--castle[b-fthlfajf91] {
    --world-band: var(--eq-world-castle-band);
    --world-accent: var(--eq-world-castle-accent);
    --world-on-accent: var(--eq-world-castle-on-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .world--mountains[b-fthlfajf91],
    :root:not([data-theme="light"]) .world--cave[b-fthlfajf91] {
        --world-on-accent: #150F2B;
        --world-node-fill: var(--world-accent);
    }
}

:root[data-theme="dark"] .world--mountains[b-fthlfajf91],
:root[data-theme="dark"] .world--cave[b-fthlfajf91] {
    --world-on-accent: #150F2B;
    --world-node-fill: var(--world-accent);
}

.world-header[b-fthlfajf91] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-1);
}

.world-header-text[b-fthlfajf91] {
    min-width: 0;
}

.world-title[b-fthlfajf91] {
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.15;
}

.world-description[b-fthlfajf91] {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.35;
}

.world-progress[b-fthlfajf91] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-0) var(--space-3) var(--space-0) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.world-path[b-fthlfajf91] {
    --step-height: 96px;
    position: relative;
    width: 280px;
    margin: var(--space-4) auto 0;
    padding: 0;
    list-style: none;
}

.world-path-step[b-fthlfajf91] {
    position: relative;
    height: var(--step-height);
}

.world-path-step:last-child[b-fthlfajf91] {
    height: 100px;
}

.world-path-step[b-fthlfajf91] >  .lesson-node {
    position: absolute;
    top: 0;
    left: calc(50% + (var(--offset) * 15.714%));
    transform: translateX(-50%);
    z-index: 1;
}

.world-path-link[b-fthlfajf91] {
    position: absolute;
    top: 33px;
    left: 0;
    width: 100%;
    height: var(--step-height);
    overflow: visible;
}

.world-path-link path[b-fthlfajf91] {
    fill: none;
    stroke: color-mix(in srgb, var(--world-accent) 45%, transparent);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 2 14;
    vector-effect: non-scaling-stroke;
}

.world-path-link--done path[b-fthlfajf91] {
    stroke: var(--world-accent);
    stroke-dasharray: none;
    stroke-width: 7;
}

@media (min-width: 760px) {
    .world[b-fthlfajf91] {
        padding: var(--space-5) var(--space-5) var(--space-6);
    }

    .world-path[b-fthlfajf91] {
        --step-height: 118px;
        margin-top: var(--space-5);
    }

    .world-header[b-fthlfajf91] {
        gap: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .world-path[b-fthlfajf91] {
        width: 560px;
    }
}
/* /Modules/Player/Components/WorldWelcomeSheet.razor.rz.scp.css */
.world-welcome-backdrop[b-1wp8l3xh52] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #150F2BB3;
    animation: world-welcome-fade-b-1wp8l3xh52 0.2s ease-out;
}

.world-welcome[b-1wp8l3xh52] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 88dvh;
    overflow-y: auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    border: 3px solid var(--color-border-strong);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    box-shadow: 0 -6px 0 var(--color-border-strong);
    text-align: center;
    animation: world-welcome-rise-b-1wp8l3xh52 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.world-welcome:focus[b-1wp8l3xh52] {
    outline: none;
}

.world-welcome-close[b-1wp8l3xh52] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: var(--tap-target, 44px);
    height: var(--tap-target, 44px);
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    cursor: pointer;
}

.world-welcome-close:focus-visible[b-1wp8l3xh52] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.world-welcome-close path[b-1wp8l3xh52] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.world-welcome-mascot[b-1wp8l3xh52] {
    display: grid;
    place-items: center;
}

.world-welcome-title[b-1wp8l3xh52] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xxl);
    line-height: 1.15;
}

.world-welcome-description[b-1wp8l3xh52] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.world-welcome-subheading[b-1wp8l3xh52] {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.world-welcome-critters[b-1wp8l3xh52] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.world-welcome-critter[b-1wp8l3xh52] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    font-family: var(--font-display);
    font-weight: 800;
}

.world-welcome[b-1wp8l3xh52]  .world-welcome-action {
    display: flex;
    width: 100%;
    margin-top: var(--space-5);
}

@media (min-width: 720px) {
    .world-welcome-backdrop[b-1wp8l3xh52] {
        align-items: center;
    }

    .world-welcome[b-1wp8l3xh52] {
        padding-bottom: var(--space-5);
        border-bottom: 3px solid var(--color-border-strong);
        border-radius: 28px;
        box-shadow: 0 6px 0 var(--color-border-strong);
    }
}

@keyframes world-welcome-rise-b-1wp8l3xh52 {
    from { opacity: 0; transform: translateY(40px); }
}

@keyframes world-welcome-fade-b-1wp8l3xh52 {
    from { opacity: 0; }
}
/* /Modules/Player/Pages/DashboardPage.razor.rz.scp.css */
.dashboard[b-avsubbxhmh] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-6);
}

.dashboard-heading[b-avsubbxhmh] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.dashboard-hero[b-avsubbxhmh] {
    display: flex;
    justify-content: center;
    padding: var(--space-2) 0 var(--space-5);
}

.dashboard-hero-sticker[b-avsubbxhmh] {
    position: absolute;
    left: 50%;
    bottom: -14px;
    white-space: nowrap;
    padding: 2px var(--space-3);
    border: 3px solid var(--eq-night);
    border-radius: 999px;
    background: var(--eq-gold);
    color: var(--eq-night);
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    transform: translateX(-50%) rotate(-3deg);
    box-shadow: 0 3px 0 var(--eq-night);
    animation: dashboard-sticker-in-b-avsubbxhmh 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dashboard-sticker-in-b-avsubbxhmh {
    from { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(0.5); }
    to { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-hero-sticker[b-avsubbxhmh] {
        animation: none;
    }
}

.dashboard-grid[b-avsubbxhmh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.dashboard[b-avsubbxhmh]  .dashboard-goal {
    text-align: center;
}

.dashboard-goal-text[b-avsubbxhmh] {
    margin: var(--space-3) 0 var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
}

.dashboard[b-avsubbxhmh]  .dashboard-goal-action,
.dashboard[b-avsubbxhmh]  .dashboard-welcome-action {
    display: flex;
    width: 100%;
}

.dashboard[b-avsubbxhmh]  .dashboard-welcome {
    margin-bottom: var(--space-4);
}

.dashboard-steps[b-avsubbxhmh] {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.dashboard-step[b-avsubbxhmh] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
}

.dashboard-status[b-avsubbxhmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.dashboard-status p[b-avsubbxhmh] {
    margin: 0;
}

@media (min-width: 760px) {
    .dashboard[b-avsubbxhmh] {
        padding: var(--space-5) var(--space-5) var(--space-6);
    }

    .dashboard-grid[b-avsubbxhmh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "goal level"
            "goal streak"
            "continue achievements";
        align-items: start;
    }

    .dashboard-grid[b-avsubbxhmh]  .dashboard-goal {
        grid-area: goal;
        align-self: stretch;
    }

    .dashboard-grid[b-avsubbxhmh]  .level-card {
        grid-area: level;
    }

    .dashboard-grid[b-avsubbxhmh]  .streak-card {
        grid-area: streak;
    }

    .dashboard-grid[b-avsubbxhmh]  .continue-card {
        grid-area: continue;
    }

    .dashboard-grid[b-avsubbxhmh]  .achievement-strip {
        grid-area: achievements;
    }

    .dashboard-steps[b-avsubbxhmh] {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard-step[b-avsubbxhmh] {
        flex-direction: column;
        text-align: center;
    }

    .dashboard[b-avsubbxhmh]  .dashboard-welcome-action {
        max-width: 360px;
        margin: 0 auto;
    }
}
/* /Modules/Player/Pages/SettingsPage.razor.rz.scp.css */
.settings[b-fbbncsu6xd] {
    display: grid;
    gap: var(--space-4);
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-7);
}

.settings-title[b-fbbncsu6xd] {
    font-size: var(--font-size-hero);
    font-weight: 800;
}

.settings-intro[b-fbbncsu6xd] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
}

.settings-columns[b-fbbncsu6xd] {
    display: grid;
    gap: var(--space-4);
}

.settings-column[b-fbbncsu6xd] {
    display: contents;
}

.settings-column[b-fbbncsu6xd]  .settings-card--last {
    order: 1;
}

.settings-hint[b-fbbncsu6xd] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.settings-switch-hint[b-fbbncsu6xd] {
    margin: var(--space-2) 0 0;
}

.settings-group-label[b-fbbncsu6xd] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-group-label:not(:first-of-type)[b-fbbncsu6xd] {
    margin-top: var(--space-4);
}

.settings-appearance-tiles[b-fbbncsu6xd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.settings-appearance-tiles--three[b-fbbncsu6xd] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-goal-tiles[b-fbbncsu6xd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.settings-tiles[b-fbbncsu6xd] {
    display: grid;
    gap: var(--space-2);
}

.settings-reminder-switch[b-fbbncsu6xd] {
    margin-bottom: var(--space-3);
}

.settings-time-zone[b-fbbncsu6xd] {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.settings-preview-label[b-fbbncsu6xd] {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-preview-action[b-fbbncsu6xd] {
    margin: var(--space-3) 0 var(--space-4);
}

.settings-savebar[b-fbbncsu6xd] {
    position: sticky;
    bottom: var(--space-3);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-raised);
    animation: settings-savebar-in-b-fbbncsu6xd 0.22s ease-out;
}

.settings-savebar[b-fbbncsu6xd]  .call-to-action {
    flex: none;
}

.settings-unsaved[b-fbbncsu6xd] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.settings-status[b-fbbncsu6xd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.settings-status p[b-fbbncsu6xd] {
    margin: 0;
}

@keyframes settings-savebar-in-b-fbbncsu6xd {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-savebar[b-fbbncsu6xd] {
        animation: none;
    }
}

@media (min-width: 760px) {
    .settings[b-fbbncsu6xd] {
        padding-top: var(--space-5);
    }

    .settings-goal-tiles[b-fbbncsu6xd] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .settings[b-fbbncsu6xd] {
        max-width: 1080px;
    }

    .settings-columns[b-fbbncsu6xd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .settings-column[b-fbbncsu6xd] {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .settings-column[b-fbbncsu6xd]  .settings-card--last {
        order: 0;
    }

    .settings-goal-tiles[b-fbbncsu6xd] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* /Modules/Player/Pages/StatisticsPage.razor.rz.scp.css */
.statistics[b-g4ntiye94c] {
    display: grid;
    gap: var(--space-4);
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-7);
}

.statistics-title[b-g4ntiye94c] {
    font-size: var(--font-size-hero);
    font-weight: 800;
}

.statistics-intro[b-g4ntiye94c] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
}

.statistics-hint[b-g4ntiye94c] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.statistics-totals[b-g4ntiye94c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.statistics-total[b-g4ntiye94c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    box-shadow: 0 4px 0 var(--color-border-strong);
    text-align: center;
}

.statistics-total-value[b-g4ntiye94c] {
    font-family: var(--font-display);
    font-size: var(--font-size-xxl);
    font-weight: 800;
    line-height: 1;
}

.statistics-total-label[b-g4ntiye94c] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xxs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.statistics-achievements[b-g4ntiye94c] {
    scroll-margin-top: var(--space-4);
}

.statistics-status[b-g4ntiye94c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.statistics-status p[b-g4ntiye94c] {
    margin: 0;
}

@media (min-width: 760px) {
    .statistics[b-g4ntiye94c] {
        padding-top: var(--space-5);
    }
}
/* /Modules/Player/Pages/WorldMapPage.razor.rz.scp.css */
.world-map[b-br75pit6rq] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-7);
}

.world-map-header[b-br75pit6rq] {
    padding: 0 var(--space-1);
}

.world-map-title[b-br75pit6rq] {
    font-size: var(--font-size-hero);
    font-weight: 800;
}

.world-map-intro[b-br75pit6rq] {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--color-text-secondary);
}

.world-map-summary[b-br75pit6rq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: 0 var(--space-1);
}

.world-map-total[b-br75pit6rq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    font-weight: 800;
}

.world-map-jump[b-br75pit6rq] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-weight: 800;
    text-decoration: none;
}

.world-map-jump:hover[b-br75pit6rq] {
    text-decoration: underline;
}

.world-map-worlds[b-br75pit6rq] {
    display: grid;
    gap: var(--space-4);
}

.world-map-worlds[b-br75pit6rq]  .chord-teaser {
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-3);
    text-align: left;
}

.world-map-worlds[b-br75pit6rq]  .chord-teaser-title {
    font-size: var(--font-size-lg);
}

.world-map-worlds[b-br75pit6rq]  .chord-teaser-description {
    margin-bottom: var(--space-2);
}

.world-map-status[b-br75pit6rq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.world-map-status p[b-br75pit6rq] {
    margin: 0;
}

@media (min-width: 760px) {
    .world-map[b-br75pit6rq] {
        padding-top: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .world-map[b-br75pit6rq] {
        max-width: 760px;
    }
}
/* /Modules/Wardrobe/Components/CritterPicker.razor.rz.scp.css */
.critter-picker[b-o3gp76empt] {
    min-width: 0;
}

.critter-picker-strip[b-o3gp76empt] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-5)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-5)), transparent 100%);
}

.critter-picker-strip[b-o3gp76empt]::-webkit-scrollbar {
    display: none;
}

.critter-picker-item[b-o3gp76empt] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 76px;
    min-height: var(--tap-target, 44px);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    cursor: pointer;
    scroll-snap-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.critter-picker-item:focus-visible[b-o3gp76empt] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--radius-lg);
}

.critter-picker-avatar[b-o3gp76empt] {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 3px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-elevated);
    box-shadow: 0 3px 0 var(--color-border);
    transition: transform 0.12s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

@media (hover: hover) {
    .critter-picker-item:hover .critter-picker-avatar[b-o3gp76empt] {
        border-color: var(--color-border-strong);
    }
}

.critter-picker-item:active .critter-picker-avatar[b-o3gp76empt] {
    transform: translateY(2px);
}

.critter-picker-item--selected[b-o3gp76empt] {
    color: var(--color-text-primary);
}

.critter-picker-item--selected .critter-picker-avatar[b-o3gp76empt],
.critter-picker-item--selected:hover .critter-picker-avatar[b-o3gp76empt] {
    border-color: var(--color-accent-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-fill) 30%, transparent), 0 3px 0 var(--color-accent-fill);
}

.critter-picker-name[b-o3gp76empt] {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.critter-picker-hearts[b-o3gp76empt] {
    display: flex;
    gap: 1px;
    min-height: 12px;
}

.critter-picker-heart[b-o3gp76empt] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.6;
    stroke-linejoin: round;
    opacity: 0.6;
}

.critter-picker-heart--filled[b-o3gp76empt] {
    fill: var(--eq-coral);
    stroke: var(--eq-coral);
    opacity: 1;
}

@media (min-width: 1024px) {
    .critter-picker-strip[b-o3gp76empt] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3) var(--space-2);
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .critter-picker-item[b-o3gp76empt] {
        width: 66px;
    }

    .critter-picker-avatar[b-o3gp76empt] {
        width: 62px;
        height: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .critter-picker-avatar[b-o3gp76empt] {
        transition: none;
    }
}
/* /Modules/Wardrobe/Components/ItemArt.razor.rz.scp.css */
/*
  An item drawn on its own. The wearables paint their outline with the critter ink classes, which only exist inside a
  critter sprite, so the same ink rules live here. The silhouette is one flat shadow of the whole drawing.
*/

.item-art[b-h575dwmv0u] {
    --critter-ink: var(--eq-night, #2B1B5A);
    --item-art-rim: drop-shadow(0 0 0 transparent);
    --item-art-shadow: brightness(0);
    display: block;
    flex: none;
    width: var(--item-art-size, 64px);
    height: var(--item-art-size, 64px);
    overflow: visible;
    filter: var(--item-art-rim);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .item-art[b-h575dwmv0u] {
        --item-art-rim: drop-shadow(0 0 2px #FFFFFF47);
        --item-art-shadow: brightness(0) invert(1);
    }
}

:root[data-theme="dark"] .item-art[b-h575dwmv0u] {
    --item-art-rim: drop-shadow(0 0 2px #FFFFFF47);
    --item-art-shadow: brightness(0) invert(1);
}

.item-art--silhouette[b-h575dwmv0u] {
    filter: var(--item-art-shadow);
    opacity: 0.25;
}

.item-art[b-h575dwmv0u]  .ink,
.item-art[b-h575dwmv0u]  .ink-thin,
.item-art[b-h575dwmv0u]  .ink-joint {
    stroke: var(--critter-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.item-art[b-h575dwmv0u]  .ink { stroke-width: 6; }
.item-art[b-h575dwmv0u]  .ink-thin { stroke-width: 3; }
.item-art[b-h575dwmv0u]  .ink-joint { stroke-width: 2.5; }
.item-art[b-h575dwmv0u]  .paint-ink { fill: var(--critter-ink); }
/* /Modules/Wardrobe/Components/ItemTile.razor.rz.scp.css */
.item-tile[b-oo1kho7mom] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: 118px;
    padding: var(--space-2) var(--space-2) var(--space-2);
    border: 3px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: 0 3px 0 var(--color-border);
    color: var(--color-text-primary);
    font: inherit;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.item-tile:focus-visible[b-oo1kho7mom] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (hover: hover) {
    .item-tile:hover[b-oo1kho7mom] {
        border-color: var(--color-border-strong);
    }
}

.item-tile:active[b-oo1kho7mom] {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--color-border);
}

.item-tile--equipped[b-oo1kho7mom] {
    border-color: var(--color-accent-fill);
    background: color-mix(in srgb, var(--color-accent-fill) 16%, var(--color-bg-surface));
    box-shadow: 0 2px 0 var(--color-accent-fill);
    transform: translateY(1px);
}

.item-tile--equipped:hover[b-oo1kho7mom] {
    border-color: var(--color-accent-fill);
}

.item-tile--locked[b-oo1kho7mom] {
    border-style: dashed;
    box-shadow: none;
    background: var(--color-bg-subtle);
}

.item-tile--hint-open[b-oo1kho7mom] {
    border-style: solid;
    border-color: var(--color-accent-fill);
}

.item-tile-art[b-oo1kho7mom] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
}

.item-tile-none[b-oo1kho7mom] {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 3;
    stroke-linecap: round;
}

.item-tile-name[b-oo1kho7mom] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-xs, 0.8125rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
}

.item-tile--locked .item-tile-name[b-oo1kho7mom] {
    color: var(--color-text-secondary);
}

.item-tile-badge[b-oo1kho7mom] {
    position: absolute;
    top: -9px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-bg-elevated);
    border-radius: 50%;
    pointer-events: none;
}

.item-tile-badge svg[b-oo1kho7mom] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.item-tile-badge--equipped[b-oo1kho7mom] {
    background: var(--color-accent-fill);
}

.item-tile-badge--equipped svg[b-oo1kho7mom] {
    stroke: #FFFFFF;
    stroke-width: 2.8;
}

.item-tile-badge--locked[b-oo1kho7mom] {
    background: var(--color-text-muted);
}

.item-tile-badge--locked svg[b-oo1kho7mom] {
    stroke: var(--color-bg-elevated);
}

.item-tile-sticker[b-oo1kho7mom] {
    position: absolute;
    top: -8px;
    left: -6px;
    padding: 1px var(--space-2);
    border: 2px solid var(--color-bg-elevated);
    border-radius: var(--radius-pill);
    background: var(--eq-coral);
    color: #FFFFFF;
    font-size: var(--font-size-xxs);
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    transform: rotate(-8deg);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .item-tile[b-oo1kho7mom] {
        transition: none;
    }
}
/* /Modules/Wardrobe/Components/SlotTabs.razor.rz.scp.css */
.slot-tabs[b-dmw96lmo5s] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-1);
    border: 3px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.slot-tab[b-dmw96lmo5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 68px;
    padding: var(--space-1);
    border: 2px solid transparent;
    border-radius: calc(var(--radius-lg) - 4px);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.slot-tab:focus-visible[b-dmw96lmo5s] {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (hover: hover) {
    .slot-tab:hover[b-dmw96lmo5s] {
        background: var(--color-bg-hover);
    }
}

.slot-tab--selected[b-dmw96lmo5s],
.slot-tab--selected:hover[b-dmw96lmo5s] {
    border-color: var(--color-accent-fill);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.slot-tab-icon[b-dmw96lmo5s] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
}

.slot-tab-glyph[b-dmw96lmo5s] {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.slot-tab-label[b-dmw96lmo5s] {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .slot-tab[b-dmw96lmo5s] {
        transition: none;
    }
}
/* /Modules/Wardrobe/Components/StageBackdrop.razor.rz.scp.css */
/*
  The stage behind the mascot: a flat, outline-free scene that keeps the critter in front readable. The palette class
  sets the three stage colours; the fixed scene colours sit in the rules below. The frame keeps the square visible on
  either theme, and the dark theme dims the scene a little so it never outshines the page.
*/

.stage-backdrop[b-oc2hkytcco] {
    --stage-main: #3CC97A;
    --stage-shade: #24A35E;
    --stage-trim: #FFE07A;
    --stage-frame: #2B1B5A29;
    --stage-dim: brightness(1);
    display: block;
    flex: none;
    width: var(--stage-size, 96px);
    height: var(--stage-size, 96px);
    clip-path: inset(0 round 15.5%);
    filter: var(--stage-dim);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stage-backdrop[b-oc2hkytcco] {
        --stage-frame: #FFFFFF2E;
        --stage-dim: brightness(0.88) saturate(0.95);
    }
}

:root[data-theme="dark"] .stage-backdrop[b-oc2hkytcco] {
    --stage-frame: #FFFFFF2E;
    --stage-dim: brightness(0.88) saturate(0.95);
}

.stage-backdrop--green[b-oc2hkytcco] { --stage-main: #3CC97A; --stage-shade: #24A35E; --stage-trim: #FFE07A; }
.stage-backdrop--gold[b-oc2hkytcco] { --stage-main: #FFC93C; --stage-shade: #E5A426; --stage-trim: #FF5A6E; }
.stage-backdrop--blue[b-oc2hkytcco] { --stage-main: #4F98DA; --stage-shade: #3577BC; --stage-trim: #FFFFFF; }
.stage-backdrop--violet[b-oc2hkytcco] { --stage-main: #8E6BEA; --stage-shade: #6C4BD8; --stage-trim: #FFC93C; }

.stage-frame[b-oc2hkytcco] {
    fill: none;
    stroke: var(--stage-frame);
    stroke-width: 2;
}

.stage-backdrop[b-oc2hkytcco]  .stage-main { fill: var(--stage-main); }
.stage-backdrop[b-oc2hkytcco]  .stage-shade { fill: var(--stage-shade); }
.stage-backdrop[b-oc2hkytcco]  .stage-trim { fill: var(--stage-trim); }
.stage-backdrop[b-oc2hkytcco]  .stage-white { fill: #FFFFFF; }
.stage-backdrop[b-oc2hkytcco]  .stage-far { opacity: 0.5; }
.stage-backdrop[b-oc2hkytcco]  .stage-farther { opacity: 0.35; }

.stage-backdrop[b-oc2hkytcco]  .stage-line-shade {
    fill: none;
    stroke: var(--stage-shade);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stage-backdrop[b-oc2hkytcco]  .stage-sky { fill: #CDEEFF; }
.stage-backdrop[b-oc2hkytcco]  .stage-sun-glow { fill: #FFF6CC; opacity: 0.8; }
.stage-backdrop[b-oc2hkytcco]  .stage-cloud { fill: #FFFFFF; }

.stage-backdrop[b-oc2hkytcco]  .stage-wall { fill: #5A2850; }
.stage-backdrop[b-oc2hkytcco]  .stage-wall-panel { fill: #683060; }
.stage-backdrop[b-oc2hkytcco]  .stage-glow { fill: #FFE7B0; opacity: 0.16; }
.stage-backdrop[b-oc2hkytcco]  .stage-curtain { fill: #C8304A; }
.stage-backdrop[b-oc2hkytcco]  .stage-curtain-fold { fill: #A02139; }
.stage-backdrop[b-oc2hkytcco]  .stage-wood { fill: #C98A4E; }
.stage-backdrop[b-oc2hkytcco]  .stage-lamp { fill: #FFF1C9; }

.stage-backdrop[b-oc2hkytcco]  .stage-wood-line {
    fill: none;
    stroke: #A86B36;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.stage-backdrop[b-oc2hkytcco]  .stage-night { fill: #1C2660; }
.stage-backdrop[b-oc2hkytcco]  .stage-moon { fill: #FFE9A8; }
.stage-backdrop[b-oc2hkytcco]  .stage-star { fill: #FFE07A; }
.stage-backdrop[b-oc2hkytcco]  .stage-twinkle { opacity: 0.85; }
.stage-backdrop[b-oc2hkytcco]  .stage-hill-far { fill: #26357A; }
.stage-backdrop[b-oc2hkytcco]  .stage-hill-near { fill: #16204C; }

.stage-backdrop[b-oc2hkytcco]  .stage-hill-rim {
    fill: none;
    stroke: var(--stage-main);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0.7;
}

.stage-backdrop[b-oc2hkytcco]  .stage-dark { fill: #231848; }
.stage-backdrop[b-oc2hkytcco]  .stage-beam { fill: #FFFFFF; opacity: 0.12; }
.stage-backdrop[b-oc2hkytcco]  .stage-pool { fill: #FFFFFF; opacity: 0.22; }
.stage-backdrop[b-oc2hkytcco]  .stage-lamp-housing { fill: #3B3160; }
/* /Modules/Wardrobe/Components/UnlockHint.razor.rz.scp.css */
.unlock-hint[b-y25swuapcv] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease-out;
}

.unlock-hint--open[b-y25swuapcv] {
    grid-template-rows: 1fr;
}

.unlock-hint-inner[b-y25swuapcv] {
    min-height: 0;
    overflow: hidden;
}

.unlock-hint-body[b-y25swuapcv] {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 3px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

.unlock-hint-text[b-y25swuapcv] {
    min-width: 0;
}

.unlock-hint-name[b-y25swuapcv] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 800;
}

.unlock-hint-source[b-y25swuapcv] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .unlock-hint[b-y25swuapcv] {
        transition: none;
    }
}
/* /Modules/Wardrobe/Components/Wearables/TriangleWearable.razor.rz.scp.css */
/*
  The triangle and its beater are thin metal bars: an ink stroke under a palette stroke keeps the bar as round and as
  outlined as the filled parts of the other items.
*/

.triangle-bar-outline[b-b22dkre9ts],
.triangle-bar[b-b22dkre9ts],
.triangle-bar-shine[b-b22dkre9ts],
.triangle-ting[b-b22dkre9ts] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.triangle-bar-outline[b-b22dkre9ts] {
    stroke: var(--critter-ink, #2B1B5A);
    stroke-width: 6.2;
}

.triangle-bar[b-b22dkre9ts] {
    stroke: var(--wear-main);
    stroke-width: 3;
}

.triangle-rod.triangle-bar-outline[b-b22dkre9ts] {
    stroke-width: 5.6;
}

.triangle-rod.triangle-bar[b-b22dkre9ts] {
    stroke: var(--wear-shade);
    stroke-width: 2;
}

.triangle-bar-shine[b-b22dkre9ts] {
    stroke: #FFFFFF;
    stroke-opacity: 0.75;
    stroke-width: 1.1;
}

.triangle-ting[b-b22dkre9ts] {
    stroke: var(--wear-trim);
    stroke-width: 2.2;
}
/* /Modules/Wardrobe/Components/WearableSlot.razor.rz.scp.css */
/*
  Wearables paint with the wear-* classes; the palette class on the slot group sets the three palette colours. The
  outline comes from the critter's ink classes, so items keep their colours in dark mode and share the critter outline.
*/

.wear[b-mqdumoia0r] {
    --wear-main: #8E6BEA;
    --wear-shade: #6C4BD8;
    --wear-trim: #FFC93C;
}

.wear--violet[b-mqdumoia0r] { --wear-main: #8E6BEA; --wear-shade: #6C4BD8; --wear-trim: #FFC93C; }
.wear--black[b-mqdumoia0r] { --wear-main: #4A4462; --wear-shade: #312C47; --wear-trim: #FF5A6E; }
.wear--green[b-mqdumoia0r] { --wear-main: #3CC97A; --wear-shade: #24A35E; --wear-trim: #FFE07A; }
.wear--orange[b-mqdumoia0r] { --wear-main: #FF8A3D; --wear-shade: #E2672A; --wear-trim: #FFF1C9; }
.wear--red[b-mqdumoia0r] { --wear-main: #FF5A6E; --wear-shade: #D93A52; --wear-trim: #FFFFFF; }
.wear--blue[b-mqdumoia0r] { --wear-main: #4F98DA; --wear-shade: #3577BC; --wear-trim: #FFFFFF; }
.wear--gold[b-mqdumoia0r] { --wear-main: #FFC93C; --wear-shade: #E5A426; --wear-trim: #FF5A6E; }
.wear--teal[b-mqdumoia0r] { --wear-main: #2EC4B6; --wear-shade: #1C9C90; --wear-trim: #FFFFFF; }
.wear--white[b-mqdumoia0r] { --wear-main: #FFFFFF; --wear-shade: #DCE2EE; --wear-trim: #FFC93C; }
.wear--silver[b-mqdumoia0r] { --wear-main: #DCE1EB; --wear-shade: #A8B2C6; --wear-trim: #4F98DA; }
.wear--bronze[b-mqdumoia0r] { --wear-main: #D98F4E; --wear-shade: #AE6A31; --wear-trim: #3CC97A; }
.wear--pink[b-mqdumoia0r] { --wear-main: #FF9EC4; --wear-shade: #F0739F; --wear-trim: #FFE07A; }

.wear[b-mqdumoia0r]  .wear-main { fill: var(--wear-main); }
.wear[b-mqdumoia0r]  .wear-shade { fill: var(--wear-shade); }
.wear[b-mqdumoia0r]  .wear-trim { fill: var(--wear-trim); }
.wear[b-mqdumoia0r]  .wear-shine { fill: #FFFFFF; opacity: 0.55; }
/* /Modules/Wardrobe/Pages/WardrobePage.razor.rz.scp.css */
.wardrobe[b-63c2vv47wu] {
    display: grid;
    gap: var(--space-4);
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-7);
}

.wardrobe-title[b-63c2vv47wu] {
    font-size: var(--font-size-hero);
    font-weight: 800;
}

.wardrobe-counter[b-63c2vv47wu] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.wardrobe-layout[b-63c2vv47wu] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.wardrobe-showcase[b-63c2vv47wu] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    align-content: start;
}

.wardrobe-preview[b-63c2vv47wu] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 236px;
    border: 3px solid var(--color-border-strong);
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--color-accent-fill) 20%, transparent) 0, transparent 62%),
        var(--color-bg-elevated);
    box-shadow: 0 4px 0 var(--color-border-strong);
}

.wardrobe-preview-stage[b-63c2vv47wu],
.wardrobe-preview-critter[b-63c2vv47wu] {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
}

.wardrobe-sparkles[b-63c2vv47wu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wardrobe-sparkle[b-63c2vv47wu] {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--eq-gold);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: wardrobe-sparkle-pop-b-63c2vv47wu 0.75s ease-out both;
}

.wardrobe-sparkle--one[b-63c2vv47wu] { top: 16%; left: 24%; }
.wardrobe-sparkle--two[b-63c2vv47wu] { top: 10%; right: 26%; width: 14px; height: 14px; animation-delay: 0.08s; }
.wardrobe-sparkle--three[b-63c2vv47wu] { top: 48%; right: 14%; width: 16px; height: 16px; animation-delay: 0.16s; }
.wardrobe-sparkle--four[b-63c2vv47wu] { bottom: 20%; left: 16%; width: 12px; height: 12px; animation-delay: 0.04s; }

@keyframes wardrobe-sparkle-pop-b-63c2vv47wu {
    0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
    35% { opacity: 1; transform: scale(1.25) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.6) rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wardrobe-sparkles[b-63c2vv47wu] {
        display: none;
    }
}

.wardrobe-collection[b-63c2vv47wu] {
    display: grid;
    gap: 0;
    min-width: 0;
    align-content: start;
}

.wardrobe-grid[b-63c2vv47wu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.wardrobe-status[b-63c2vv47wu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.wardrobe-status p[b-63c2vv47wu] {
    margin: 0;
}

@media (max-width: 420px) {
    .wardrobe[b-63c2vv47wu] {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }
}

@media (min-width: 1024px) {
    .wardrobe[b-63c2vv47wu] {
        padding-top: var(--space-5);
    }

    .wardrobe-layout[b-63c2vv47wu] {
        grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
        gap: var(--space-5);
        align-items: start;
    }
}

@media (min-width: 1024px) and (min-height: 760px) {
    .wardrobe-showcase[b-63c2vv47wu] {
        position: sticky;
        top: var(--space-4);
    }
}
/* /Pages/NotFoundPage.razor.rz.scp.css */
.not-found[b-m55koakezv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 520px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.not-found-heading[b-m55koakezv] {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: var(--font-size-xxl);
    font-weight: 800;
    text-wrap: balance;
}

.not-found-message[b-m55koakezv] {
    margin: 0;
}

.not-found[b-m55koakezv]  .not-found-action {
    min-width: min(100%, 260px);
}